@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
826 lines • 31.3 kB
JavaScript
module.exports = {
// Blue 10
paletteBlue10: "rgb(0, 22, 57)",
// Blue 65
paletteBlue65: "rgb(87, 163, 253)",
// Blue 15
paletteBlue15: "rgb(3, 35, 77)",
// Blue 90
paletteBlue90: "rgb(216, 230, 254)",
// Blue 80
paletteBlue80: "rgb(170, 203, 255)",
// Blue 70
paletteBlue70: "rgb(120, 176, 253)",
// Blue 60
paletteBlue60: "rgb(27, 150, 255)",
// Blue 50
paletteBlue50: "rgb(1, 118, 211)",
// Blue 40
paletteBlue40: "rgb(11, 92, 171)",
// Blue 95
paletteBlue95: "rgb(238, 244, 255)",
// Blue 30
paletteBlue30: "rgb(1, 68, 134)",
// Blue 20
paletteBlue20: "rgb(3, 45, 96)",
// Cloud Blue 90
paletteCloudBlue90: "rgb(207, 233, 254)",
// Cloud Blue 80
paletteCloudBlue80: "rgb(144, 208, 254)",
// Cloud Blue 70
paletteCloudBlue70: "rgb(26, 185, 255)",
// Cloud Blue 60
paletteCloudBlue60: "rgb(13, 157, 218)",
// Cloud Blue 50
paletteCloudBlue50: "rgb(16, 124, 173)",
// Cloud Blue 40
paletteCloudBlue40: "rgb(5, 98, 138)",
// Cloud Blue 95
paletteCloudBlue95: "rgb(234, 245, 254)",
// Cloud Blue 30
paletteCloudBlue30: "rgb(8, 73, 104)",
// Cloud Blue 20
paletteCloudBlue20: "rgb(2, 50, 72)",
// Cloud Blue 10
paletteCloudBlue10: "rgb(0, 26, 40)",
// Cloud Blue 65
paletteCloudBlue65: "rgb(8, 171, 237)",
// Cloud Blue 15
paletteCloudBlue15: "rgb(10, 38, 54)",
// Green 15
paletteGreen15: "rgb(12, 41, 18)",
// Green 90
paletteGreen90: "rgb(205, 239, 196)",
// Green 80
paletteGreen80: "rgb(145, 219, 139)",
// Green 70
paletteGreen70: "rgb(69, 198, 90)",
// Green 60
paletteGreen60: "rgb(59, 167, 85)",
// Green 50
paletteGreen50: "rgb(46, 132, 74)",
// Green 40
paletteGreen40: "rgb(57, 101, 71)",
// Green 95
paletteGreen95: "rgb(235, 247, 230)",
// Green 30
paletteGreen30: "rgb(25, 78, 49)",
// Green 20
paletteGreen20: "rgb(28, 51, 38)",
// Green 10
paletteGreen10: "rgb(7, 27, 18)",
// Green 65
paletteGreen65: "rgb(65, 182, 88)",
// Hot Orange 90
paletteHotOrange90: "rgb(255, 222, 213)",
// Hot Orange 80
paletteHotOrange80: "rgb(254, 185, 165)",
// Hot Orange 70
paletteHotOrange70: "rgb(255, 144, 110)",
// Hot Orange 60
paletteHotOrange60: "rgb(255, 93, 45)",
// Hot Orange 50
paletteHotOrange50: "rgb(216, 58, 0)",
// Hot Orange 40
paletteHotOrange40: "rgb(170, 48, 1)",
// Hot Orange 95
paletteHotOrange95: "rgb(254, 241, 237)",
// Hot Orange 30
paletteHotOrange30: "rgb(126, 38, 0)",
// Hot Orange 20
paletteHotOrange20: "rgb(74, 36, 19)",
// Hot Orange 10
paletteHotOrange10: "rgb(40, 18, 2)",
// Hot Orange 65
paletteHotOrange65: "rgb(255, 120, 79)",
// Hot Orange 15
paletteHotOrange15: "rgb(66, 22, 4)",
// Indigo 90
paletteIndigo90: "rgb(224, 229, 248)",
// Indigo 80
paletteIndigo80: "rgb(190, 199, 246)",
// Indigo 70
paletteIndigo70: "rgb(158, 169, 241)",
// Indigo 60
paletteIndigo60: "rgb(127, 140, 237)",
// Indigo 50
paletteIndigo50: "rgb(88, 103, 232)",
// Indigo 40
paletteIndigo40: "rgb(58, 73, 218)",
// Indigo 95
paletteIndigo95: "rgb(241, 243, 251)",
// Indigo 30
paletteIndigo30: "rgb(47, 44, 183)",
// Indigo 20
paletteIndigo20: "rgb(50, 29, 113)",
// Indigo 10
paletteIndigo10: "rgb(32, 6, 71)",
// Indigo 65
paletteIndigo65: "rgb(142, 155, 239)",
// Indigo 15
paletteIndigo15: "rgb(31, 9, 116)",
// Neutral 90
paletteNeutral90: "rgb(229, 229, 229)",
// Neutral 80
paletteNeutral80: "rgb(201, 201, 201)",
// Neutral 70
paletteNeutral70: "rgb(174, 174, 174)",
// Neutral 100
paletteNeutral100: "rgb(255, 255, 255)",
// Neutral 60
paletteNeutral60: "rgb(147, 147, 147)",
// Neutral 50
paletteNeutral50: "rgb(116, 116, 116)",
// Neutral 40
paletteNeutral40: "rgb(92, 92, 92)",
// Neutral 95
paletteNeutral95: "rgb(243, 243, 243)",
// Neutral 30
paletteNeutral30: "rgb(68, 68, 68)",
// Neutral 20
paletteNeutral20: "rgb(46, 46, 46)",
// Neutral 10
paletteNeutral10: "rgb(24, 24, 24)",
// Orange 90
paletteOrange90: "rgb(254, 223, 208)",
// Orange 80
paletteOrange80: "rgb(255, 186, 144)",
// Orange 70
paletteOrange70: "rgb(254, 147, 57)",
// Orange 60
paletteOrange60: "rgb(221, 122, 1)",
// Orange 50
paletteOrange50: "rgb(169, 100, 4)",
// Orange 40
paletteOrange40: "rgb(130, 81, 1)",
// Orange 95
paletteOrange95: "rgb(255, 241, 234)",
// Orange 30
paletteOrange30: "rgb(95, 62, 2)",
// Orange 20
paletteOrange20: "rgb(62, 43, 2)",
// Orange 10
paletteOrange10: "rgb(32, 22, 0)",
// Orange 65
paletteOrange65: "rgb(243, 131, 3)",
// Orange 15
paletteOrange15: "rgb(55, 30, 3)",
// Pink 50
palettePink50: "rgb(227, 6, 106)",
// Pink 40
palettePink40: "rgb(182, 5, 84)",
// Pink 95
palettePink95: "rgb(254, 240, 243)",
// Pink 30
palettePink30: "rgb(138, 3, 62)",
// Pink 20
palettePink20: "rgb(97, 2, 42)",
// Pink 65
palettePink65: "rgb(254, 114, 152)",
// Pink 10
palettePink10: "rgb(55, 1, 20)",
// Pink 15
palettePink15: "rgb(75, 6, 32)",
// Pink 90
palettePink90: "rgb(253, 221, 227)",
// Pink 80
palettePink80: "rgb(253, 182, 197)",
// Pink 70
palettePink70: "rgb(254, 138, 167)",
// Pink 60
palettePink60: "rgb(255, 83, 138)",
// Purple 15
palettePurple15: "rgb(48, 11, 96)",
// Purple 90
palettePurple90: "rgb(236, 225, 249)",
// Purple 80
palettePurple80: "rgb(215, 191, 242)",
// Purple 70
palettePurple70: "rgb(194, 158, 241)",
// Purple 60
palettePurple60: "rgb(173, 123, 238)",
// Purple 50
palettePurple50: "rgb(144, 80, 233)",
// Purple 40
palettePurple40: "rgb(117, 38, 227)",
// Purple 95
palettePurple95: "rgb(246, 242, 251)",
// Purple 30
palettePurple30: "rgb(90, 27, 169)",
// Purple 20
palettePurple20: "rgb(64, 16, 117)",
// Purple 10
palettePurple10: "rgb(36, 6, 67)",
// Purple 65
palettePurple65: "rgb(183, 141, 239)",
// Red 90
paletteRed90: "rgb(254, 222, 216)",
// Red 80
paletteRed80: "rgb(254, 184, 171)",
// Red 70
paletteRed70: "rgb(254, 143, 125)",
// Red 60
paletteRed60: "rgb(254, 92, 76)",
// Red 50
paletteRed50: "rgb(234, 0, 30)",
// Red 95
paletteRed95: "rgb(254, 241, 238)",
// Red 40
paletteRed40: "rgb(186, 5, 23)",
// Red 30
paletteRed30: "rgb(142, 3, 15)",
// Red 20
paletteRed20: "rgb(100, 1, 3)",
// Red 10
paletteRed10: "rgb(48, 12, 1)",
// Red 65
paletteRed65: "rgb(254, 119, 101)",
// Red 15
paletteRed15: "rgb(74, 12, 4)",
// Teal 15
paletteTeal15: "rgb(7, 40, 37)",
// Teal 90
paletteTeal90: "rgb(172, 243, 228)",
// Teal 80
paletteTeal80: "rgb(4, 225, 203)",
// Teal 70
paletteTeal70: "rgb(1, 195, 179)",
// Teal 60
paletteTeal60: "rgb(6, 165, 154)",
// Teal 50
paletteTeal50: "rgb(11, 130, 124)",
// Teal 40
paletteTeal40: "rgb(5, 103, 100)",
// Teal 95
paletteTeal95: "rgb(222, 249, 243)",
// Teal 30
paletteTeal30: "rgb(2, 77, 76)",
// Teal 20
paletteTeal20: "rgb(2, 52, 52)",
// Teal 10
paletteTeal10: "rgb(7, 27, 18)",
// Teal 65
paletteTeal65: "rgb(3, 180, 167)",
// Violet 15
paletteViolet15: "rgb(61, 1, 87)",
// Violet 90
paletteViolet90: "rgb(242, 222, 254)",
// Violet 80
paletteViolet80: "rgb(229, 185, 254)",
// Violet 70
paletteViolet70: "rgb(216, 146, 254)",
// Violet 60
paletteViolet60: "rgb(203, 101, 255)",
// Violet 50
paletteViolet50: "rgb(186, 1, 255)",
// Violet 40
paletteViolet40: "rgb(150, 2, 199)",
// Violet 95
paletteViolet95: "rgb(249, 240, 255)",
// Violet 30
paletteViolet30: "rgb(115, 3, 148)",
// Violet 20
paletteViolet20: "rgb(72, 26, 84)",
// Violet 10
paletteViolet10: "rgb(46, 0, 57)",
// Violet 65
paletteViolet65: "rgb(209, 125, 254)",
// Yellow 70
paletteYellow70: "rgb(228, 162, 1)",
// Yellow 60
paletteYellow60: "rgb(202, 133, 1)",
// Yellow 50
paletteYellow50: "rgb(168, 100, 3)",
// Yellow 40
paletteYellow40: "rgb(140, 75, 2)",
// Yellow 95
paletteYellow95: "rgb(251, 243, 224)",
// Yellow 30
paletteYellow30: "rgb(111, 52, 0)",
// Yellow 20
paletteYellow20: "rgb(79, 33, 0)",
// Yellow 10
paletteYellow10: "rgb(40, 18, 2)",
// Yellow 65
paletteYellow65: "rgb(215, 147, 4)",
// Yellow 15
paletteYellow15: "rgb(46, 34, 4)",
// Yellow 90
paletteYellow90: "rgb(249, 227, 182)",
// Yellow 80
paletteYellow80: "rgb(252, 192, 3)",
// Used as the background color for the active state on rows or items on list-like components.
colorBackgroundRowActive: "rgb(243, 243, 243)",
// Light variant of COLOR_BACKGROUND.
colorBackgroundLight: "rgb(255, 255, 255)",
// Used as the background color for the hover state on rows or items on list-like components.
colorBackgroundRowHover: "rgb(243, 243, 243)",
// Dark color for UI elements related to errors. Accessible with white text.
colorBackgroundErrorDark: "rgb(186, 5, 23)",
// Background color for UI elements related to providing neutral information (not error, success, or warning).
colorBackgroundInfo: "rgb(116, 116, 116)",
// Alternative background color for dark portions of the app.
colorBackgroundAltInverse: "rgb(3, 45, 96)",
// Used as the background color for the new state on rows or items on list-like components.
colorBackgroundRowNew: "rgb(205, 239, 196)",
// Dark color for UI elements that have to do with success. Accessible with white text.
colorBackgroundSuccessDark: "rgb(46, 132, 74)",
// Used as background for loading stencils on white background.
colorBackgroundStencil: "rgb(243, 243, 243)",
// Color for UI elements that have to do with warning.
colorBackgroundWarning: "rgb(254, 147, 57)",
// Background color for highlighting text in search results.
colorBackgroundHighlightSearch: "rgb(255, 240, 63)",
// Hover color for UI elements related to destructive actions.
colorBackgroundDestructiveHover: "rgb(142, 3, 15)",
// Default background color for the whole app.
colorBackground: "rgb(243, 243, 243)",
// Our product brand blue, darkened to meet accessibility color contrast ratios with white text.
colorBrandDark: "rgb(1, 118, 211)",
// The color of the mask overlay that appears when you enter a modal state.
colorBackgroundBackdrop: "rgba(255, 255, 255, 0.75)",
// Dark variant of COLOR_BACKGROUND.
colorBackgroundDark: "rgb(243, 243, 243)",
// Our product brand blue.
colorBrand: "rgb(27, 150, 255)",
// Color for UI elements related to destructive actions.
colorBackgroundDestructive: "rgb(186, 5, 23)",
// Color for UI elements that have to do with success.
colorBackgroundSuccess: "rgb(69, 198, 90)",
// Dark Color for UI elements that have to do with warning.
colorBackgroundWarningDark: "rgb(254, 147, 57)",
// Color for UI elements related to the offline state.
colorBackgroundOffline: "rgb(68, 68, 68)",
// Used as an alternate background for loading stencils on gray backgrounds.
colorBackgroundStencilAlt: "rgb(243, 243, 243)",
// Light variant of COLOR_BACKGROUND_INVERSE.
colorBackgroundInverseLight: "rgb(3, 45, 96)",
// Background color for UI elements related to the concept of an external user or customer.
colorBackgroundCustomer: "rgb(254, 147, 57)",
// Color for UI elements related to errors.
colorBackgroundError: "rgb(254, 92, 76)",
// Second default background color for the app.
colorBackgroundAlt: "rgb(255, 255, 255)",
// Darker color for UI elements that have to do with success. Accessible with white text.
colorBackgroundSuccessDarker: "rgb(25, 78, 49)",
// Used as the background color for selected rows or items on list-like components.
colorBackgroundRowSelected: "rgb(243, 243, 243)",
// Our product brand blue, darkened even further.
colorBrandDarker: "rgb(1, 68, 134)",
// Background color for text selected with a mouse.
colorBackgroundSelection: "rgb(216, 230, 254)",
// Active color for UI elements related to destructive actions.
colorBackgroundDestructiveActive: "rgb(142, 3, 15)",
// Default background color for dark portions of the app (like Stage Left or tooltips).
colorBackgroundInverse: "rgb(0, 22, 57)",
// Background color for highlighting UI elements.
colorBackgroundHighlight: "rgb(250, 255, 189)",
// Dark alternative border color for UI elements related to errors.
colorBorderErrorDark: "rgb(254, 143, 125)",
// Our product brand blue, darkened to meet accessibility color contrast ratios with white text.
colorBorderBrandDark: "rgb(1, 68, 134)",
// Border color for UI elements related to providing neutral information (not error, success, or warning).
colorBorderInfo: "rgb(116, 116, 116)",
// Border color for UI elements that have to do with warnings.
colorBorderWarning: "rgb(254, 147, 57)",
// Hover border color for UI elements that have to do with destructive actions.
colorBorderDestructiveHover: "rgb(186, 5, 23)",
// Default border color for UI elements.
colorBorder: "rgb(229, 229, 229)",
// Dark alternative border color for UI elements that have to do with success.
colorBorderSuccessDark: "rgb(46, 132, 74)",
// Border color for UI elements that have to do with destructive actions.
colorBorderDestructive: "rgb(234, 0, 30)",
// Darkest separator color - used as an alternate separator color when more differentiation is desired.
colorBorderSeparatorAlt2: "rgb(201, 201, 201)",
// Border color for UI elements related to the offline state.
colorBorderOffline: "rgb(68, 68, 68)",
// Border color for UI elements that have to do with success.
colorBorderSuccess: "rgb(145, 219, 139)",
// Lightest separator color - used as default separator on white backgrounds.
colorBorderSeparator: "rgb(243, 243, 243)",
// Our product brand blue.
colorBorderBrand: "rgb(27, 150, 255)",
// Used to delineate the boundary of a component that is being clicked. Specific to builders.
colorBorderSelectionActive: "rgb(243, 243, 243)",
// Border color for UI elements that have to do with errors.
colorBorderError: "rgb(234, 0, 30)",
// Used to delineate the boundary of a component that is being hovered over. Specific to builders.
colorBorderSelectionHover: "rgb(27, 150, 255)",
// Used as the border color for the hover state on selected rows or items on list-like components.
colorBorderRowSelectedHover: "rgb(27, 150, 255)",
// Border color for UI elements related to the concept of an external user or customer.
colorBorderCustomer: "rgb(254, 147, 57)",
// Used to delineate the boundary of a selected component. Specific to builders.
colorBorderSelection: "rgb(1, 118, 211)",
// Used as the border color for selected rows or items on list-like components.
colorBorderRowSelected: "rgb(1, 118, 211)",
// Medium separator color - used as default separator on light gray backgrounds.
colorBorderSeparatorAlt: "rgb(229, 229, 229)",
// Border color to match UI elements using color-background-inverse.
colorBorderInverse: "rgb(0, 22, 57)",
// Active border color for UI elements that have to do with destructive actions.
colorBorderDestructiveActive: "rgb(142, 3, 15)",
// Alternative border color for UI elements related to errors.
colorBorderErrorAlt: "rgb(254, 143, 125)",
// Used as a separator on dark backgrounds, such as stage left navigation.
colorBorderSeparatorInverse: "rgb(3, 45, 96)",
borderRadiusSmall: "0.125rem",
// Icons in lists, record home icon, unbound input elements
borderRadiusMedium: "0.25rem",
borderRadiusLarge: "0.5rem",
// Circle for global use, action icon bgd shape
borderRadiusCircle: "50%",
borderWidthThin: "1px",
borderWidthThick: "2px",
// Shadow for active states on interactive elements.
shadowActive: "0 0 2px #0176d3",
// Shadow for drag-n-drop.
shadowDrag: "0 2px 4px 0 rgba(0, 0, 0, 0.40)",
// Shadow for drop down.
shadowDropDown: "0 2px 3px 0 rgba(0, 0, 0, 0.16)",
// 0 seconds, 0 frames
durationInstantly: "0s",
// 0.05 seconds, 3 frames
durationImmediately: "0.05s",
// 0.1 seconds, 6 frames
durationQuickly: "0.1s",
// 0.2 seconds, 12 frames
durationPromptly: "0.2s",
// 0.4 seconds, 24 frames
durationSlowly: "0.4s",
// 3.2 seconds, 192 frames
durationPaused: "3.2s",
// Default font-family for Salesforce applications
fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
fontFamilyHeading: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
fontFamilyMonospace: "Consolas, Menlo, Monaco, Courier, monospace",
// Constant typography token for font size 1
fontSize1: "0.625rem",
// Constant typography token for font size 2
fontSize2: "0.75rem",
// Constant typography token for font size 3
fontSize3: "0.8125rem",
// Variable typography token for font size 10
varFontSize10: "2rem",
// Constant typography token for font size 4
fontSize4: "0.875rem",
// Variable typography token for font size 11
varFontSize11: "2.625rem",
// Constant typography token for font size 5
fontSize5: "1rem",
// Constant typography token for font size 6
fontSize6: "1.125rem",
// Constant typography token for font size 7
fontSize7: "1.25rem",
// Constant typography token for font size 8
fontSize8: "1.5rem",
// Variable typography token for font size 1
varFontSize1: "0.625rem",
// Constant typography token for font size 9
fontSize9: "1.75rem",
// Variable typography token for font size 2
varFontSize2: "0.75rem",
// Variable typography token for font size 3
varFontSize3: "0.8125rem",
// Constant typography token for font size 10
fontSize10: "2rem",
// Variable typography token for font size 4
varFontSize4: "0.875rem",
// Constant typography token for font size 11
fontSize11: "2.625rem",
// Variable typography token for font size 5
varFontSize5: "1rem",
// Variable typography token for font size 6
varFontSize6: "1.125rem",
// Variable typography token for font size 7
varFontSize7: "1.25rem",
// Variable typography token for font size 8
varFontSize8: "1.5rem",
// Variable typography token for font size 9
varFontSize9: "1.75rem",
// Use for large headings only.
fontWeightLight: "300",
// Most all body copy.
fontWeightRegular: "400",
// Used sparingly for emphasized text within regular body copy.
fontWeightBold: "700",
// Unitless line-heights for reusability
lineHeightHeading: "1.25",
// Unitless line-heights for reusability
lineHeightText: "1.5",
// Remove extra leading. Unitless line-heights for reusability
lineHeightReset: "1",
// Variable unitless line-heights for reusability
varLineHeightText: "1.5",
// 50% transparency of an element
opacity5: "0.5",
// 80% transparency of an element
opacity8: "0.8",
// Disabled state of BRAND_HEADER_CONTRAST_WEAK
brandHeaderContrastWeakDisabled: "rgba(166, 166, 166, 0.25)",
// Gray Color 11
colorGray11: "rgb(62, 62, 60)",
// Transparent value of BRAND_PRIMARY at 10%
brandPrimaryTransparent10: "rgba(21, 137, 238, 0.1)",
// Gray Color 12
colorGray12: "rgb(43, 40, 38)",
// These RGBA values need to be updated if BRAND_BACKGROUND_DARK changes, solves webkit bug
brandBackgroundDarkTransparent: "rgba(1, 68, 134, 0)",
// Gray Color 13
colorGray13: "rgb(8, 7, 7)",
// Background color a branded app header
brandHeader: "rgb(255, 255, 255)",
// Active / Hover state of BRAND_LIGHT
brandLightActive: "rgb(227, 229, 237)",
// Variant of BRAND_HEADER_CONTRAST that provides a warm color
brandHeaderContrastWarm: "rgb(186, 5, 23)",
// Disabled state of BRAND_HEADER_ICON
brandHeaderIconDisabled: "rgba(145, 145, 145, 0.25)",
// Active / Hover state of BRAND_HEADER_CONTRAST
brandHeaderContrastActive: "rgb(80, 80, 80)",
// Primary page background color
brandBackgroundPrimary: "rgb(238, 244, 255)",
// Primary brand color
brandPrimary: "rgb(27, 150, 255)",
// Active / Hover state of BRAND_HEADER_CONTRAST_WEAK
brandHeaderContrastWeakActive: "rgb(129, 129, 129)",
// Active / Hover state of BRAND_CONTRAST
brandContrastActive: "rgb(13, 14, 18)",
// Variant of BRAND_HEADER_CONTRAST that provides a cool color
brandHeaderContrastCool: "rgb(1, 68, 134)",
// Variant of BRAND_HEADER that is accessible with BRAND_HEADER
brandHeaderContrastInverse: "rgb(255, 255, 255)",
// Dark variant of BRAND that is accessible with light colors
brandDark: "rgb(1, 118, 211)",
// Dark variant of BRAND that is accessible with white
brandAccessible: "rgb(1, 118, 211)",
// Dark variant of BRAND_BACKGROUND_PRIMARY, used within gradient of background color
brandBackgroundDark: "rgb(1, 68, 134)",
// Active / Hover state of BRAND_TEXT_LINK
brandTextLinkActive: "rgb(1, 68, 134)",
// Gray Color 1
colorGray1: "rgb(255, 255, 255)",
// Gray Color 2
colorGray2: "rgb(250, 250, 249)",
// Active / Hover state of BRAND_HEADER_ICON
brandHeaderIconActive: "rgb(129, 129, 129)",
// Gray Color 3
colorGray3: "rgb(243, 242, 242)",
// Icons of BRAND_HEADER that is accessible with BRAND_HEADER
brandHeaderIcon: "rgb(145, 145, 145)",
// Disabled state of BRAND_A11Y
brandDisabled: "rgb(201, 199, 197)",
// Primary text link brand color
brandTextLink: "rgb(1, 118, 211)",
// Gray Color 4
colorGray4: "rgb(236, 235, 234)",
// Gray Color 5
colorGray5: "rgb(221, 219, 218)",
// Gray Color 6
colorGray6: "rgb(201, 199, 197)",
// Active / Hover state of BRAND_A11Y
brandAccessibleActive: "rgb(1, 68, 134)",
// Gray Color 7
colorGray7: "rgb(176, 173, 171)",
// Active / Hover state of BRAND_DARK
brandDarkActive: "rgb(37, 48, 69)",
// Gray Color 8
colorGray8: "rgb(150, 148, 146)",
// Active / Hover state of BRAND_HEADER_CONTRAST
brandHeaderContrastInverseActive: "rgb(238, 238, 238)",
// Active / Hover state of BRAND_HEADER_CONTRAST_COOL
brandHeaderContrastCoolActive: "rgb(1, 68, 134)",
// Gray Color 9
colorGray9: "rgb(112, 110, 107)",
// Variant of BRAND that is accessible with BRAND
brandContrast: "rgb(26, 27, 30)",
// Weak contrast ratio, useful for iconography
brandHeaderContrastWeak: "rgb(145, 145, 145)",
// Active / Hover state of BRAND_PRIMARY
brandPrimaryActive: "rgb(1, 118, 211)",
// These RGBA values need to be updated if BRAND_BACKGROUND_PRIMARY changes, solves webkit bug
brandBackgroundPrimaryTransparent: "rgba(176, 196, 223, 0)",
// Variant of BRAND_HEADER that is accessible with BRAND_HEADER
brandHeaderContrast: "rgb(94, 94, 94)",
// Transparent value of BRAND_PRIMARY
brandPrimaryTransparent: "rgba(21, 137, 238, 0.1)",
// Active / Hover state of BRAND_HEADER_CONTRAST_WARM
brandHeaderContrastWarmActive: "rgb(186, 5, 23)",
// Transparent value of BRAND_PRIMARY at 40%
brandPrimaryTransparent40: "rgba(21, 137, 238, 0.4)",
// Light variant of BRAND that is accessible with dark colors
brandLight: "rgb(244, 246, 254)",
// Gray Color 10
colorGray10: "rgb(81, 79, 77)",
// Generic sizing token scale for UI components.
sizeXSmall: "12rem",
// Generic sizing token scale for UI components.
sizeXxxSmall: "3rem",
// Large utility icon without border.
squareIconUtilityLarge: "1.5rem",
// Generic sizing token scale for UI components.
sizeXxSmall: "6rem",
// Search Results: Outer colored tile
squareIconSmallBoundary: "1.5rem",
// Generic sizing token scale for UI components.
sizeSmall: "15rem",
// Medium utility icon without border.
squareIconUtilityMedium: "1.25rem",
// Very small icon button boundary.
squareIconXSmallBoundary: "1.25rem",
// Small utility icon without border.
squareIconUtilitySmall: "1rem",
// Stage left & actions: Outer colored tile
squareIconMediumBoundary: "2rem",
// Anchor: Icon content (white shape)
squareIconLargeContent: "2rem",
// Anchor: Outer colored tile
squareIconLargeBoundary: "3rem",
// Generic sizing token scale for UI components.
sizeMedium: "20rem",
// Stage left & actions: Icon content (white shape)
squareIconMediumContent: "1rem",
// Generic sizing token scale for UI components.
sizeXLarge: "40rem",
// Very small icons in icon buttons.
squareIconXSmallContent: "0.5rem",
// Variable medium boundary for square icons
varSquareIconMediumBoundary: "2rem",
// Icon button boundary.
squareIconMediumBoundaryAlt: "2.25rem",
// Generic sizing token scale for UI components.
sizeXxLarge: "60rem",
// Anchor: avatar
squareIconLargeBoundaryAlt: "5rem",
// Generic sizing token scale for UI components.
sizeLarge: "25rem",
// Search Results: Icon content (white shape)
squareIconSmallContent: "0.75rem",
// Very very small icon button boundary.
squareIconXxSmallBoundary: "1rem",
// Alternate medium tap target size
squareIconMediumContentAlt: "0.875rem",
// Variable spacing token for size X Large
varSpacingXLarge: "2rem",
// Variable horizontal spacing token for size Small
varSpacingHorizontalSmall: "0.75rem",
// Variable horizontal spacing token for size XX Large
varSpacingHorizontalXxLarge: "3rem",
// Constant spacing token for size X small
spacingXSmall: "0.5rem",
// Constant spacing token for size XXX small
spacingXxxSmall: "0.125rem",
// Constant spacing token for size XX small
spacingXxSmall: "0.25rem",
// Variable vertical spacing token for size Large
varSpacingVerticalLarge: "1.5rem",
// Variable spacing token for size Large
varSpacingLarge: "1.5rem",
// Variable spacing token for size Medium
varSpacingMedium: "1rem",
// Variable vertical spacing token for size Medium
varSpacingVerticalMedium: "1rem",
// Variable vertical spacing token for size X Small
varSpacingVerticalXSmall: "0.5rem",
// Constant spacing token for size Small
spacingSmall: "0.75rem",
// Variable vertical spacing token for size XXX Small
varSpacingVerticalXxxSmall: "0.125rem",
// Variable spacing token for size X Small
varSpacingXSmall: "0.5rem",
// Variable spacing token for size XXX Small
varSpacingXxxSmall: "0.125rem",
// Variable horizontal spacing token for size X Large
varSpacingHorizontalXLarge: "2rem",
// Variable horizontal spacing token for size XX Small
varSpacingHorizontalXxSmall: "0.25rem",
// Variable spacing token for size XX Large
varSpacingXxLarge: "3rem",
// Constant spacing token for size Medium
spacingMedium: "1rem",
// Variable vertical spacing token for size XX Large
varSpacingVerticalXxLarge: "3rem",
// Variable vertical spacing token for size Small
varSpacingVerticalSmall: "0.75rem",
// Variable spacing token for size Small
varSpacingSmall: "0.75rem",
// Constant spacing token for 0
spacingNone: "0",
// Variable horizontal spacing token for size Large
varSpacingHorizontalLarge: "1.5rem",
// Constant spacing token for size X Large
spacingXLarge: "2rem",
// Constant spacing token for size XX Large
spacingXxLarge: "3rem",
// Variable horizontal spacing token for size XXX Small
varSpacingHorizontalXxxSmall: "0.125rem",
// Variable horizontal spacing token for size X Small
varSpacingHorizontalXSmall: "0.5rem",
// Variable spacing token for size XX Small
varSpacingXxSmall: "0.25rem",
// Variable horizontal spacing token for size Medium
varSpacingHorizontalMedium: "1rem",
// Variable vertical spacing token for size XX Small
varSpacingVerticalXxSmall: "0.25rem",
// Variable vertical spacing token for size X Large
varSpacingVerticalXLarge: "2rem",
// Constant spacing token for size Large
spacingLarge: "1.5rem",
// Action label text color
colorTextActionLabel: "rgb(68, 68, 68)",
// Link color on dark background
colorTextLinkInverse: "rgb(255, 255, 255)",
// Link color on dark background - active state
colorTextLinkInverseActive: "rgba(255, 255, 255, 0.5)",
// Action label active text color
colorTextActionLabelActive: "rgb(24, 24, 24)",
// Color for texts or icons that are related to warnings on a dark background.
colorTextWarning: "rgb(254, 147, 57)",
// Focus link text
colorTextLinkFocus: "rgb(1, 68, 134)",
// Text color for destructive actions - hover state
colorTextDestructiveHover: "rgb(186, 5, 23)",
// Disabled link text
colorTextLinkDisabled: "rgb(3, 45, 96)",
// Body text color
colorTextDefault: "rgb(24, 24, 24)",
// Text color for destructive actions
colorTextDestructive: "rgb(234, 0, 30)",
// Hover link text
colorTextLinkHover: "rgb(1, 68, 134)",
// Text color for success text.
colorTextSuccess: "rgb(46, 132, 74)",
// Color for text that is purposefully de-emphasized to create visual hierarchy.
colorTextWeak: "rgb(68, 68, 68)",
// Input placeholder text on dark backgrounds.
colorTextPlaceholderInverse: "rgb(243, 243, 243)",
// Link text (508)
colorTextLink: "rgb(1, 118, 211)",
// Color for texts that are related to warnings on a light background.
colorTextWarningAlt: "rgb(140, 75, 2)",
// Default icon color.
colorTextIconDefault: "rgb(116, 116, 116)",
// Our product brand blue.
colorTextBrand: "rgb(27, 150, 255)",
// Error text for inputs and error misc
colorTextError: "rgb(234, 0, 30)",
// Customer text used in anchor subtitle
colorTextCustomer: "rgb(254, 147, 57)",
// Text color found on any primary brand color
colorTextBrandPrimary: "rgb(255, 255, 255)",
// Active link text
colorTextLinkActive: "rgb(3, 45, 96)",
// Color of required field marker.
colorTextRequired: "rgb(234, 0, 30)",
// Link color on dark background - disabled state
colorTextLinkInverseDisabled: "rgba(255, 255, 255, 0.15)",
// Inverse text color for dark backgrounds
colorTextInverse: "rgb(255, 255, 255)",
// Input placeholder text.
colorTextPlaceholder: "rgb(116, 116, 116)",
// Weak inverse text color for dark backgrounds
colorTextInverseWeak: "rgb(174, 174, 174)",
// Link color on dark background - hover state
colorTextLinkInverseHover: "rgba(255, 255, 255, 0.75)",
// Text color for success text on dark backgrounds.
colorTextSuccessInverse: "rgb(69, 198, 90)",
// Text color for field labels.
colorTextLabel: "rgb(68, 68, 68)",
// Tap target size for elements that rely on width and height dimensions
squareTappable: "2.75rem",
// Small tap target size for elements that rely on width and height dimensions
squareTappableSmall: "2rem",
// X-small tap target size for elements that rely on width and height dimensions
squareTappableXSmall: "1.5rem",
// Xx-small tap target size for elements that rely on width and height dimensions
squareTappableXxSmall: "1.25rem",
// Tap target size for elements that rely on height or line-height
heightTappable: "2.75rem",
// Small tap target size for elements that rely on height or line-height
heightTappableSmall: "2rem",
// Dropdown
zIndexDropdown: "7000",
// Docked element
zIndexDocked: "4",
// Notifications under modals
zIndexReminder: "8500",
// Spinner
zIndexSpinner: "9050",
// Default
zIndexDefault: "1",
// Deep dive
zIndexDeepdive: "-99999",
// Toasts
zIndexToast: "10000",
// Dialog
zIndexDialog: "6000",
// Popup
zIndexPopup: "5000",
// Modal
zIndexModal: "9000",
// Stickied element
zIndexSticky: "100",
// Overlay
zIndexOverlay: "8000",
};