@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
826 lines • 32.5 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(11, 92, 171)",
/* 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(11, 92, 171)",
/* 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",
};