@octopusdeploy/design-system-tokens
Version:
The design systems tokens. This package contains the raw tokens in their original format, and compiled to an appropriate format for consumption by the design system components.
202 lines (200 loc) • 6.22 kB
CSS
/**
* 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 <html>, 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;
}