@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
1,225 lines • 71.9 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(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(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_200.png",
userDefaultAvatarMedium: "/profile_avatar_160.png",
userDefaultAvatarSmall: "/profile_avatar_96.png",
groupDefaultAvatar: "/group_avatar_200.png",
groupDefaultAvatarMedium: "/group_avatar_160.png",
groupDefaultAvatarSmall: "/group_avatar_96.png",
// Line heights for tabs
lineHeightTab: "2.5rem",
borderRadiusPill: "15rem",
// Minimum height of a pill.
heightPill: "1.625rem",
// Brand header. Phone 44px; Tablet 50px
heightHeader: "2.75rem",
// Action footer menu. Phone 44px; Tablet 50px
heightFooter: "3.75rem",
// Text input height
heightInput: "1.875rem",
// Stage left for desktop when closed (showing icons only).
widthStageLeftCollapsed: "4rem",
// Stage left for desktop when open.
widthStageLeftExpanded: "15rem",
// Maximum width for action overflow menu so that it's not full-screen for tablet.
maxWidthActionOverflowMenu: "512px",
// Default amount of line breaks before text is truncated
lineClamp: 3,
// Icon color on dark background
colorTextIconInverse: "rgb(255, 255, 255)",
// Text 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.
colorTextButtonInverseDisabled: "rgba(255, 255, 255, 0.5)",
// Input icon
colorTextInputIcon: "rgb(174, 174, 174)",
// Icon color on dark background - active state
colorTextIconInverseActive: "rgb(255, 255, 255)",
// Text color for default secondary button - hover state
colorTextButtonDefaultHover: "rgb(1, 118, 211)",
// Input disabled text
colorTextInputDisabled: "rgb(116, 116, 116)",
// Text color for default secondary button
colorTextButtonDefault: "rgb(1