/** * Design tokens from @octopusdeploy/design-system-tokens, as CSS custom properties. * Generated from the design system's source tokens - do not edit. * * Include all four stylesheets. lightTheme.css and darkTheme.css are selected by the * data-theme attribute, set on whichever element you want themed - usually , but any * element works. globals.css and textTheme.css are theme-independent and always apply. */ :root { --colorScalesNavy100: #F4F6F8; --colorScalesNavy200: #DAE2E9; --colorScalesNavy300: #A9BBCB; --colorScalesNavy400: #7C98B4; --colorScalesNavy500: #557999; --colorScalesNavy600: #3E607D; --colorScalesNavy700: #2E475D; --colorScalesNavy800: #1F303F; --colorScalesNavy900: #111A23; --colorScalesBlue100: #F2F8FD; --colorScalesBlue200: #CDE4F7; --colorScalesBlue300: #87BFEC; --colorScalesBlue400: #449BE1; --colorScalesBlue500: #1A77CA; --colorScalesBlue600: #155EA0; --colorScalesBlue700: #0F4778; --colorScalesBlue800: #093051; --colorScalesBlue900: #041A2D; --colorScalesGreen100: #EEFAF5; --colorScalesGreen200: #B8E7D3; --colorScalesGreen300: #5ECD9E; --colorScalesGreen400: #00AB62; --colorScalesGreen500: #00874D; --colorScalesGreen600: #006A3D; --colorScalesGreen700: #00502E; --colorScalesGreen800: #00361F; --colorScalesGreen900: #001E11; --colorScalesYellow100: #FFF7D9; --colorScalesYellow200: #FFDF62; --colorScalesYellow300: #E5B203; --colorScalesYellow400: #B98F02; --colorScalesYellow500: #927002; --colorScalesYellow600: #745801; --colorScalesYellow700: #584201; --colorScalesYellow800: #3B2C00; --colorScalesYellow900: #201800; --colorScalesOrange100: #FFF5ED; --colorScalesOrange200: #FFDABF; --colorScalesOrange300: #FFA461; --colorScalesOrange400: #EA7325; --colorScalesOrange500: #C45317; --colorScalesOrange600: #A13C14; --colorScalesOrange700: #7E2812; --colorScalesOrange800: #59170D; --colorScalesOrange900: #340B07; --colorScalesRed100: #FFF3F3; --colorScalesRed200: #FFD8D8; --colorScalesRed300: #FF9F9F; --colorScalesRed400: #FF5D5D; --colorScalesRed500: #D63D3D; --colorScalesRed600: #AA3030; --colorScalesRed700: #802424; --colorScalesRed800: #571818; --colorScalesRed900: #310E0E; --colorScalesPurple100: #F8F5FD; --colorScalesPurple200: #E7DEF8; --colorScalesPurple300: #C5AEEE; --colorScalesPurple400: #A683E5; --colorScalesPurple500: #895ED3; --colorScalesPurple600: #7043B7; --colorScalesPurple700: #572B97; --colorScalesPurple800: #3B1D66; --colorScalesPurple900: #21103A; --colorScalesSlate100: #F5F6F8; --colorScalesSlate200: #DEE1E6; --colorScalesSlate300: #B2B9C5; --colorScalesSlate400: #8A96A7; --colorScalesSlate500: #68778D; --colorScalesSlate600: #515D70; --colorScalesSlate700: #3D4653; --colorScalesSlate800: #282F38; --colorScalesSlate900: #16191F; --colorScalesGrey100: #F7F7F7; --colorScalesGrey200: #E1E1E1; --colorScalesGrey300: #B9B9B9; --colorScalesGrey400: #959595; --colorScalesGrey500: #757575; --colorScalesGrey600: #5C5C5C; --colorScalesGrey700: #454545; --colorScalesGrey800: #2E2E2E; --colorScalesGrey900: #191919; --colorScalesBlack: #000000; --colorScalesWhite: #FFFFFF; --brandCyan: #0D80D8; --brandGreen: #00B065; --brandGrey: #113049; --fontFamilyPrimary: Roboto; --fontFamilySecondary: Roboto Mono; --fontWeight400: 400; --fontWeight500: 500; --fontWeight600: 600; --fontWeight700: 700; --fontWeightBold: Bold; --fontWeightRegular: Regular; --fontWeightSemi-bold: SemiBold; --fontSizeBase: 1rem; --fontSizeXSmall: 0.75rem; --fontSizeSmall: 0.8125rem; --fontSizeMedium: 0.875rem; --fontSizeLarge: 1.25rem; --fontSizeXLarge: 1.5rem; --fontSize3xLarge: 3rem; --fontSize2xLarge: 2rem; --letterSpacingNone: 0; --letterSpacingWide: 0.006rem; --letterSpacingWider: 0.013rem; --letterSpacingTight: -0.006rem; --lineHeightXSmall: 1.25rem; --lineHeightSmall: 1.5rem; --lineHeightMedium: 1.75rem; --lineHeightLarge: 2rem; --lineHeightXLarge: 2.5rem; --lineHeight2xLarge: 2.75rem; --lineHeight3xLarge: 3.5rem; --space0: 0; --space1: 0.063rem; --space2: 0.125rem; --space4: 0.25rem; --space6: 0.375rem; --space8: 0.5rem; --space12: 0.75rem; --space16: 1rem; --space24: 1.5rem; --space32: 2rem; --space40: 2.5rem; --space48: 3rem; --space56: 3.5rem; --space64: 4rem; --space72: 4.5rem; --space80: 5rem; --borderRadiusNone: 0px; --borderRadiusCircle: 9999px; --borderRadiusExtraSmall: 2px; --borderRadiusSmall: 4px; --borderRadiusLarge: 8px; --borderRadiusExtraLarge: 16px; --borderRadiusMedium: 6px; --opacity0: 0px; --opacity8: 8px; --opacity12: 12px; --opacity16: 16px; --opacity24: 24px; --opacity32: 32px; --opacity40: 40px; --opacity100: 100px; --effect0: 0px; --effect1: 1px; --effect2: 2px; --effect4: 4px; --effect6: 6px; --effect8: 8px; --effect12: 12px; --effect16: 16px; --effect24: 24px; --effect32: 32px; --effect40: 40px; --effect48: 48px; --effect56: 56px; --effect64: 64px; --effect72: 72px; --effect80: 80px; --effect92: 92px; --effect100: 100px; --effect-2: -2px; --effect-4: -4px; --effect-6: -6px; --effect-8: -8px; --effect-12: -12px; --borderWidth1: 1px; --borderWidth2: 2px; --borderWidth3: 3px; --borderWidth4: 4px; --borderWidthNone: 0px; --fontFamilySystem-ui: BlinkMacSystemFont, -apple-system, "Segoe UI", "Oxygen Sans", Ubuntu, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; --fontFamilySystem-ui-monospace: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", "Oxygen Mono", "Ubuntu Mono", monospace; --paragraphSpacing0: 0px; --textCaseNone: none; --textCaseUppercase: uppercase; --textCaseLowercase: lowercase; --textDecorationNone: none; --textDecorationUnderline: underline; --paragraphIndent0: 0px; --dialogSidePanelSlideDuration: 300ms; --dialogSidePanelFadeDuration: 100ms; --dialogSidePanelWidth: 400px; --dialogMainPanelWidthSmall: 480px; --dialogMainPanelWidthMedium: 600px; --dialogMainPanelWidthLarge: 800px; --dialogMainPanelWidthExtraLarge: 1000px; --dialogMaxHeight: 800px; }