@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
1,187 lines • 74.2 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(201, 201, 201)",
/* 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(201, 201, 201)",
/* 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(221, 219, 218, 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(250, 250, 249)",
/* 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(232, 232, 232)",
/* 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(116, 116, 116)",
/* 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(3, 45, 96)",
/* 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(3, 45, 96)",
/* 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(116, 116, 116)",
/* 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(116, 116, 116)",
/* 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",
/* Brandable modal header */
colorBackgroundModalBrand: "rgb(1, 68, 134)",
/* Background color for notification list item. */
colorBackgroundNotification: "rgb(255, 255, 255)",
/* Notifications badge background color. */
colorBackgroundNotificationBadgeActive: "rgb(3, 45, 96)",
/* Notifications badge background color. */
colorBackgroundNotificationBadgeHover: "rgb(1, 68, 134)",
colorContrastPrimary: "rgb(243, 243, 243)",
colorForegroundPrimary: "rgb(255, 255, 255)",
/* The color of the mask overlay that appears when you enter a modal state. */
colorBackgroundTempModalTint: "rgba(126, 140, 153, 0.8)",
/* Color of the indicator dot. */
colorBackgroundIndicatorDot: "rgb(3, 45, 96)",
/* Used when further differentiation is needed because colorBackground and colorBackgroundAlt are both being used in close proximity. */
colorBackgroundAlt2: "rgb(243, 243, 243)",
/* Hover color for utility bar item. */
colorBackgroundUtilityBarHover: "rgb(243, 243, 243)",
/* Brand hover fill color */
fillBrandHover: "rgb(1, 68, 134)",
/* Brand fill color */
fillBrand: "rgb(1, 118, 211)",
/* Background color for default desktop chrome (ex. global header) */
colorBackgroundChromeDesktop: "rgb(255, 255, 255)",
/* Active button backgrounds on modal headers */
colorBackgroundModalButtonActive: "rgba(0, 0, 0, 0.16)",
/* Selected checkboxes */
colorBackgroundInputCheckboxSelected: "rgb(27, 150, 255)",
/* Default checkboxes */
colorBackgroundInputCheckbox: "rgb(255, 255, 255)",
colorBackgroundPrimary: "rgb(255, 255, 255)",
/* The color of the mask overlay that appears when you enter a modal state. */
colorBackgroundTempModalTintAlt: "rgba(255, 255, 255, 0.75)",
colorBackgroundBrandPrimaryFocus: "rgb(1, 68, 134)",
colorBackgroundBrandPrimaryActive: "rgb(3, 45, 96)",
colorBackgroundBrandPrimaryHover: "rgb(1, 68, 134)",
/* Background color for default mobile chrome (ex. global header) */
colorBackgroundChromeMobile: "rgb(1, 118, 211)",
/* Background color for search input fields. */
colorBackgroundInputSearch: "rgba(0, 0, 0, 0.16)",
colorContrastSecondary: "rgb(255, 255, 255)",
/* Secondary top bar background color (child browser, file preview, etc.) */
colorBackgroundBrowser: "rgb(116, 116, 116)",
colorBackgroundBrandPrimary: "rgb(1, 118, 211)",
/* Used as the default background color for temporary dialog elements, such as the progress spinner background. */
colorBackgroundTempModal: "rgba(126, 140, 153, 0.8)",
/* Used as gray background when more contrast is desired. */
colorBackgroundShade: "rgb(243, 243, 243)",
/* Standard modal header */
colorBackgroundModal: "rgb(255, 255, 255)",
/* Hovered active toggle background color. */
colorBackgroundToggleActiveHover: "rgb(1, 68, 134)",
/* Background color for payloads in the feed. */
colorBackgroundPayload: "rgb(243, 243, 243)",
/* Button backgrounds on modal headers */
colorBackgroundModalButton: "rgba(0, 0, 0, 0.07)",
/* Brand active fill color */
fillBrandActive: "rgb(3, 45, 96)",
/* Active color for utility bar item. */
colorBackgroundUtilityBarActive: "rgb(27, 150, 255)",
/* Stage left org switcher dropdown arrow background color. */
colorBackgroundOrgSwitcherArrow: "rgb(0, 22, 57)",
/* Active toggle background color. */
colorBackgroundToggleActive: "rgb(1, 68, 134)",
/* Alternative color for UI elements related to errors. */
colorBackgroundErrorAlt: "rgb(254, 143, 125)",
/* Winter 18 token, this has been deprecated. Please use BRAND_BACKGROUND_PRIMARY instead. */
pageColorBackgroundPrimary: "rgb(255, 255, 255)",
/* Used as gray background in conjunction with Shade when more contrast is desired. */
colorBackgroundShadeDark: "rgb(201, 201, 201)",
/* Notifications badge background color. */
colorBackgroundNotificationBadgeFocus: "rgb(1, 68, 134)",
/* Background for utility icons that live in the action bar on mobile. */
colorBackgroundActionbarIconUtility: "rgb(116, 116, 116)",
colorBackgroundSecondary: "rgb(243, 243, 243)",
/* The borders to create the checkmark */
colorBorderInputCheckboxSelectedCheckmark: "rgb(255, 255, 255)",
/* Disabled stroke color. */
colorStrokeDisabled: "rgb(243, 243, 243)",
/* Active stroke color for our product brand blue. */
colorStrokeBrandActive: "rgb(3, 45, 96)",
colorBorderPrimary: "rgb(201, 201, 201)",
colorBorderBrandPrimaryFocus: "rgb(1, 118, 211)",
colorBorderBrandPrimaryHover: "rgb(1, 118, 211)",
/* Border color for brandable primary button */
colorBorderButtonBrand: "rgb(1, 118, 211)",
colorBorderBrandPrimaryActive: "rgb(3, 45, 96)",
colorBorderBrandPrimary: "rgb(27, 150, 255)",
colorBorderButtonFocusInverse: "rgb(243, 243, 243)",
/* Used to delineate the boundary of a selected canvas element that is being hovered over. Specific to builders. */
colorBorderCanvasElementSelectionHover: "rgb(1, 68, 134)",
/* Used to delineate the boundary of a selected canvas element. Specific to builders. */
colorBorderCanvasElementSelection: "rgb(26, 185, 255)",
/* Hover stroke color for our product brand blue. */
colorStrokeBrandHover: "rgb(1, 118, 211)",
/* Stroke color for our global header buttons. */
colorStrokeHeaderButton: "rgb(174, 174, 174)",
colorBorderLinkFocusInverse: "rgb(243, 243, 243)",
/* Our product brand blue. */
colorStrokeBrand: "rgb(1, 118, 211)",
/* Used to delineate the boundary of a specific region. Specific to builders. */
colorBorderHint: "rgb(3, 45, 96)",
/* Deprecated */
elevation32: "32",
/* Deprecated */
elevationShadow16: "0 16px 16px 0 rgba(0, 0, 0, 0.16)",
/* Deprecated */
elevationInverseShadow0: "none",
/* Custom glow for focus states on UI link elements with explicit containers on dark or vibrantly colored backgrounds. */
shadowLinkFocusInverse: "0 0 3px #f3f3f3",
/* Deprecated: Use SHADOW_DOCKED */
elevationInverseShadow2: "0 -2px 2px 0 rgba(0, 0, 0, 0.16)",
/* Deprecated */
elevationInverseShadow4: "0 -4px 4px 0 rgba(0, 0, 0, 0.16)",
/* Deprecated */
elevation16: "16",
/* Deprecated */
elevationShadow3Below: "0 3px 3px 0 rgba(0, 0, 0, 0.16) inset",
shadowSoftPrimaryHover: "none",
/* Deprecated */
elevationInverseShadow8: "0 -8px 8px 0 rgba(0, 0, 0, 0.16)",
/* Soft dropshadow found on general UI elements such as containers */
shadowSoftPrimary: "none",
/* Deprecated */
elevationInverseShadow32: "0 -32px 32px 0 rgba(0, 0, 0, 0.16)",
/* Hard dropshadow found on general UI elements such as containers */
shadowHardPrimary: "none",
/* Shadow above overflow menu close bar. */
shadowActionOverflowFooter: "0 -2px 4px #f3f3f3",
/* Deprecated */
elevation0: "0",
/* Deprecated */
elevation3Inset: "-3",
/* Deprecated */
elevation2: "2",
/* Shadow for overlays. */
shadowOverlay: "0 -2px 4px rgba(0, 0, 0, 0.07)",
/* Shadow for buttons. */
shadowButton: "0 1px 1px 0 rgba(0, 0, 0, 0.05)",
/* Deprecated */
elevation4: "4",
/* Deprecated */
elevationShadow0: "none",
/* Deprecated */
elevationInverseShadow16: "0 -16px 16px 0 rgba(0, 0, 0, 0.16)",
/* Deprecated */
elevationShadow2: "0 2px 2px 0 rgba(0, 0, 0, 0.16)",
/* Deprecated */
elevation8: "8",
/* Deprecated */
elevationShadow4: "0 4px 4px 0 rgba(0, 0, 0, 0.16)",
/* Inset shadow for editable grid */
shadowFocusInset: "0 0 2px 2px #1b96ff inset",
/* Deprecated */
elevationInverseShadow3Below: "0 -3px 3px 0 rgba(0, 0, 0, 0.16) inset",
shadowSoftPrimaryActive: "none",
/* Deprecated */
elevationShadow8: "0 8px 8px 0 rgba(0, 0, 0, 0.16)",
/* Shadow on images. */
shadowImage: "0 1px 1px rgba(0, 0, 0, 0.16)",
/* Deprecated */
elevationShadow32: "0 32px 32px 0 rgba(0, 0, 0, 0.16)",
/* Medium headings. */
fontSizeHeadingMedium: "1.125rem",
fontSizeMedium: "1rem",
/* Small body text. */
fontSizeTextSmall: "0.8125rem",
fontSizeMediumA: "1.125rem",
fontSizeXLarge: "1.5rem",
fontSizeXLargeA: "1.57rem",
/* Extra large headings. */
fontSizeHeadingXLarge: "1.75rem",
fontSizeXxLarge: "2rem",
/* Extra extra small text. */
fontSizeTextXxSmall: "0.625rem",
fontSizeLarge: "1.25rem",
/* Large headings. */
fontSizeHeadingLarge: "1.5rem",
/* Extra large body text. */
fontSizeTextXLarge: "1.25rem",
fontSizeXSmall: "0.625rem",
/* Extra Extra small headings. */
fontSizeHeadingXxSmall: "0.625rem",
/* Extra small headings. */
fontSizeHeadingXSmall: "0.75rem",
/* Large body text. */
fontSizeTextLarge: "1.125rem",
fontSizeSmall: "0.875rem",
/* Medium body text. */
fontSizeTextMedium: "1rem",
/* Extra small body text. */
fontSizeTextXSmall: "0.75rem",
/* Small headings. */
fontSizeHeadingSmall: "0.875rem",
/* Deprecated: use FONT_FAMILY instead for regular body text and FONT_FAMILY_HEADING for headings. */
fontFamilyText: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
/* Use squareIconMediumBoundary */
squareIconMedium: "2.375rem",
/* Small tap target size */
squareIconSmall: "1rem",
/* Very small icons to replace force font with temporary override. */
squareIconXxSmallContent: ".875rem",
/* Large tap target size. */
squareIconLarge: "3.125rem",
componentSpacingMargin: "0",
componentSpacingPadding: "1rem",
/* Hovered icon color for a button that has a parent element that has a hover state */
colorTextIconInverseHintHover: "rgba(255, 255, 255, 0.75)",
/* Color for text on a selected tab in a tab group. */
colorTextTabLabelSelected: "rgb(1, 118, 211)",
/* Icon color for a button that has a parent element that has a hover state on a dark background. This is the default text/icon color for that button before its parent has been hovered over. */
colorTextIconInverseHint: "rgba(255, 255, 255, 0.5)",
/* Color for disabled text in a tab group. */
colorTextTabLabelDisabled: "rgb(243, 243, 243)",
/* Tertiary body text color */
colorTextTertiary: "rgb(116, 116, 116)",
/* Active state on a standalone link on a dark background. */
colorTextInverseActive: "rgb(26, 185, 255)",
/* Primary body text color */
colorTextPrimary: "rgb(3, 45, 96)",
colorTextLinkPrimaryFocus: "rgb(1, 118, 211)",
/* Color for text in focus state in a tab group. */
colorTextTabLabelFocus: "rgb(1, 68, 134)",
/* Icon color for a button that has a parent element that has a hover state. This is the default text/icon color for that button before its parent has been hovered over. */
colorTextIconDefaultHintBorderless: "rgb(243, 243, 243)",
/* Text color for pills. */
colorTextPill: "rgb(1, 118, 211)",
colorTextLinkPrimaryHover: "rgb(1, 118, 211)",
/* Color for text in active state in a tab group. */
colorTextTabLabelActive: "rgb(3, 45, 96)",
/* Color for text in hover state in a tab group. */
colorTextTabLabelHover: "rgb(1, 68, 134)",
/* Color for text on toast messages. */
colorTextToast: "rgb(243, 243, 243)",
/* Color for disabled toggles */
colorTextToggleDisabled: "rgb(201, 201, 201)",
/* Top bar icon color */
colorTextBrowser: "rgb(255, 255, 255)",
colorTextLinkPrimaryActive: "rgb(3, 45, 96)",
colorTextLinkPrimary: "rgb(1, 118, 211)",
/* Top bar active icon color */
colorTextBrowserActive: "rgba(0, 0, 0, 0.4)",
/* Color for non-interactive icons that represent a selected item in a list */
colorTextIconBrand: "rgb(1, 118, 211)",
/* Hover state on a standalone link on a dark background. */
colorTextInverseHover: "rgb(174, 174, 174)",
/* Modal header title */
colorTextModal: "rgb(255, 255, 255)",
/* Modal header button text color */
colorTextModalButton: "rgb(116, 116, 116)",
/* Color for interactive utility icons */
colorTextIconUtility: "rgb(174, 174, 174)",
/* Secondary body text color */
colorTextSecondary: "rgb(116, 116, 116)",
/* Text in stage left navigation. */
colorTextStageLeft: "rgb(243, 243, 243)",
/* Default value for text-transform */
textTransform: "none",
/* Background color for a new notification list item. */
colorBackgroundNotificationNew: "rgb(243, 243, 243)",
/* Focused header button icon color */
fillHeaderButtonFocus: "rgb(1, 118, 211)",
/* Background color for reminder notification on hover */
colorBackgroundReminderHover: "rgb(255, 255, 255)",
/* Notifications badge background color. */
colorBackgroundNotificationBadge: "rgb(234, 0, 30)",
/* Hovered header button icon color */
fillHeaderButtonHover: "rgb(1, 68, 134)",
/* Disabled input */
colorBackgroundInputDisabled: "rgb(243, 243, 243)",
/* Hovered toggle background color. */
colorBackgroundToggleHover: "rgb(147, 147, 147)",
/* Background color for reminder notification */
colorBackgroundReminder: "rgb(243, 243, 243)",
/* Hovered background color for success buttons */
colorBackgroundButtonSuccessHover: "rgb(46, 132, 74)",
/* Header button icon color */
fillHeaderButton: "rgb(174, 174, 174)",
/* Toggle background color. */
colorBackgroundToggle: "rgb(174, 174, 174)",
/* Background color for success buttons */
colorBackgroundButtonSuccess: "rgb(69, 198, 90)",
/* Disabled checkboxes */
colorBackgroundInputCheckboxDisabled: "rgb(201, 201, 201)",
/* Background color for pills. */
colorBackgroundPill: "rgb(255, 255, 255)",
/* Color of the spinner dot. */
colorBackgroundSpinnerDot: "rgb(174, 174, 174)",
/* The color of the mask overlay that provides user feedback on interaction. */
colorBackgroundBackdropTint: "rgb(243, 243, 243)",
/* Selected input field (when user has clicked or tabbed into field) */
colorBackgroundInputActive: "rgb(255, 255, 255)",
/* The background color of an internal scrollbar. */
colorBackgroundScrollbar: "rgb(243, 243, 243)",
/* Disabled toggle background color. */
colorBackgroundToggleDisabled: "rgb(174, 174, 174)",
/* Background color for toast messaging. */
colorBackgroundToast: "rgb(116, 116, 116)",
/* Background color of comment posts in the feed. */
colorBackgroundPost: "rgb(243, 243, 243)",
/* Default input field */
colorBackgroundInput: "rgb(255, 255, 255)",
/* Background color for success toast messaging. */
colorBackgroundToastSuccess: "rgb(46, 132, 74)",
/* Color of mask overlay that sits on top of an image when text is present. */
colorBackgroundImageOverlay: "rgba(0, 0, 0, 0.4)",
/* Active background color for success buttons */
colorBackgroundButtonSuccessActive: "rgb(46, 132, 74)",
/* Background color for error toast messaging. */
colorBackgroundToastError: "rgb(234, 0, 30)",
/* The background color of an internal scrollbar track. */
colorBackgroundScrollbarTrack: "rgb(201, 201, 201)",
/* Background color for input field that has encountered an error. */
colorBackgroundInputError: "rgb(253, 221, 227)",
/* Border color for disabled inverse button. */
colorBorderButtonInverseDisabled: "rgba(255, 255, 255, 0.15)",
/* Hovered border color for a button with an icon that has a parent element that has a hover state */
colorBorderIconInverseHintHover: "rgba(255, 255, 255, 0.75)",
/* Border color for a button with an icon that has a parent element that has a hover state */
colorBorderIconInverseHint: "rgba(255, 255, 255, 0.5)",
/* Border color for an active tab. */
colorBorderTabActive: "rgb(255, 255, 255)",
/* Border color on disabled form elements. */
colorBorderInputDisabled: "rgb(201, 201, 201)",
/* Border color on notification reminders. */
colorBorderReminder: "rgb(243, 243, 243)",
/* Border color for brandable primary button - disabled state */
colorBorderButtonBrandDisabled: "rgba(0, 0, 0, 0)",
/* Border color for default secondary button */
colorBorderButtonDefault: "rgb(201, 201, 201)",
/* Border color on active form elements. */
colorBorderInputActive: "rgb(27, 150, 255)",
/* Border color on form elements. */
colorBorderInput: "rgb(201, 201, 201)",
/* These borders create the faux checkmark when the checkbox toggle is in the checked state. */
colorBorderToggleChecked: "rgb(255, 255, 255)",
/* Border color for a selected tab in a tab group. */
colorBorderTabSelected: "rgb(1, 118, 211)",
borderStrokeWidthThin: "1px",
borderStrokeWidthThick: "2px",
/* Shadow for notifications that should be elevated above other components but under modals. */
shadowReminder: "0 2px 3px 0 rgba(0, 0, 0, 0.20)",
/* Custom glow for focus states on UI elements with explicit containers. */
shadowButtonFocus: "0 0 3px #0176d3",
/* Custom glow for focus states on UI button elements with explicit containers on dark or vibrantly colored backgrounds. */
shadowButtonFocusInverse: "0 0 3px #f3f3f3",
/* Shadow to make inline edit card pop out. */
shadowInlineEdit: "0 2px 4px 4px rgba(0, 0, 0, 0.16)",
/* Shadow on elements that are docked to the bottom of the viewport. */
shadowDocked: "0 -2px 2px 0 rgba(0, 0, 0, 0.16)",
/* Shadow for header. */
shadowHeader: "0 2px 4px rgba(0, 0, 0, 0.07)",
/* 4.8 seconds */
durationToastShort: "4.8s",
/* 9.6 seconds */
durationToastMedium: "9.6s",
illustrationEmptyStateAssistant: "/assets/images/illustrations/empty-state-assistant.svg",
illustrationEmptyStateEvents: "/assets/images/illustrations/empty-state-events.svg",
illustrationEmptyStateTasks: "/assets/images/illustrations/empty-state-tasks.svg",
bannerUserDefaultImage: "",
bannerGroupDefaultImage: "",
userDefaultAvatar: "/profile_avatar_2