@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
516 lines • 23.5 kB
JavaScript
module.exports = {
/* Used as the background color for the active state on rows or items on list-like components. */
colorBackgroundRowActive: "rgb(236, 235, 234)",
/* 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, 242, 242)",
/* Dark color for UI elements related to errors. Accessible with white text. */
colorBackgroundErrorDark: "rgb(194, 57, 52)",
/* Background color for UI elements related to providing neutral information (not error, success, or warning). */
colorBackgroundInfo: "rgb(112, 110, 107)",
/* Alternative background color for dark portions of the app. */
colorBackgroundAltInverse: "rgb(22, 50, 92)",
/* Used as the background color for the new state on rows or items on list-like components. */
colorBackgroundRowNew: "rgb(217, 255, 223)",
/* Dark color for UI elements that have to do with success. Accessible with white text. */
colorBackgroundSuccessDark: "rgb(4, 132, 75)",
/* Used as background for loading stencils on white background. */
colorBackgroundStencil: "rgb(243, 242, 242)",
/* Color for UI elements that have to do with warning. */
colorBackgroundWarning: "rgb(255, 183, 93)",
/* Background color for highlighting text in search results. */
colorBackgroundHighlightSearch: "rgb(255, 240, 63)",
/* Hover color for UI elements related to destructive actions. */
colorBackgroundDestructiveHover: "rgb(166, 26, 20)",
/* Default background color for the whole app. */
colorBackground: "rgb(243, 242, 242)",
/* Our product brand blue, darkened to meet accessibility color contrast ratios with white text. */
colorBrandDark: "rgb(0, 112, 210)",
/* 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(236, 235, 234)",
/* Our product brand blue. */
colorBrand: "rgb(21, 137, 238)",
/* Color for UI elements related to destructive actions. */
colorBackgroundDestructive: "rgb(194, 57, 52)",
/* Color for UI elements that have to do with success. */
colorBackgroundSuccess: "rgb(75, 202, 129)",
/* Dark Color for UI elements that have to do with warning. */
colorBackgroundWarningDark: "rgb(255, 158, 44)",
/* Color for UI elements related to the offline state. */
colorBackgroundOffline: "rgb(62, 62, 60)",
/* Used as an alternate background for loading stencils on gray backgrounds. */
colorBackgroundStencilAlt: "rgb(236, 235, 234)",
/* Light variant of COLOR_BACKGROUND_INVERSE. */
colorBackgroundInverseLight: "rgb(22, 50, 92)",
/* Background color for UI elements related to the concept of an external user or customer. */
colorBackgroundCustomer: "rgb(255, 154, 60)",
/* Color for UI elements related to errors. */
colorBackgroundError: "rgb(212, 80, 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(0, 74, 41)",
/* Used as the background color for selected rows or items on list-like components. */
colorBackgroundRowSelected: "rgb(236, 235, 234)",
/* Our product brand blue, darkened even further. */
colorBrandDarker: "rgb(0, 95, 178)",
/* Background color for text selected with a mouse. */
colorBackgroundSelection: "rgb(216, 237, 255)",
/* Active color for UI elements related to destructive actions. */
colorBackgroundDestructiveActive: "rgb(135, 5, 0)",
/* Default background color for dark portions of the app (like Stage Left or tooltips). */
colorBackgroundInverse: "rgb(6, 28, 63)",
/* Background color for highlighting UI elements. */
colorBackgroundHighlight: "rgb(250, 255, 189)",
/* Dark alternative border color for UI elements related to errors. */
colorBorderErrorDark: "rgb(234, 130, 136)",
/* Our product brand blue, darkened to meet accessibility color contrast ratios with white text. */
colorBorderBrandDark: "rgb(0, 112, 210)",
/* Border color for UI elements related to providing neutral information (not error, success, or warning). */
colorBorderInfo: "rgb(112, 110, 107)",
/* Border color for UI elements that have to do with warnings. */
colorBorderWarning: "rgb(255, 183, 93)",
/* Hover border color for UI elements that have to do with destructive actions. */
colorBorderDestructiveHover: "rgb(166, 26, 20)",
/* Default border color for UI elements. */
colorBorder: "rgb(221, 219, 218)",
/* Dark alternative border color for UI elements that have to do with success. */
colorBorderSuccessDark: "rgb(4, 132, 75)",
/* Border color for UI elements that have to do with destructive actions. */
colorBorderDestructive: "rgb(194, 57, 52)",
/* Darkest separator color - used as an alternate separator color when more differentiation is desired. */
colorBorderSeparatorAlt2: "rgb(201, 199, 197)",
/* Border color for UI elements related to the offline state. */
colorBorderOffline: "rgb(62, 62, 60)",
/* Border color for UI elements that have to do with success. */
colorBorderSuccess: "rgb(75, 202, 129)",
/* Lightest separator color - used as default separator on white backgrounds. */
colorBorderSeparator: "rgb(250, 250, 249)",
/* Our product brand blue. */
colorBorderBrand: "rgb(21, 137, 238)",
/* Used to delineate the boundary of a component that is being clicked. Specific to builders. */
colorBorderSelectionActive: "rgb(250, 250, 249)",
/* Border color for UI elements that have to do with errors. */
colorBorderError: "rgb(194, 57, 52)",
/* Used to delineate the boundary of a component that is being hovered over. Specific to builders. */
colorBorderSelectionHover: "rgb(21, 137, 238)",
/* Used as the border color for the hover state on selected rows or items on list-like components. */
colorBorderRowSelectedHover: "rgb(21, 137, 238)",
/* Border color for UI elements related to the concept of an external user or customer. */
colorBorderCustomer: "rgb(255, 154, 60)",
/* Used to delineate the boundary of a selected component. Specific to builders. */
colorBorderSelection: "rgb(0, 112, 210)",
/* Used as the border color for selected rows or items on list-like components. */
colorBorderRowSelected: "rgb(0, 112, 210)",
/* Medium separator color - used as default separator on light gray backgrounds. */
colorBorderSeparatorAlt: "rgb(221, 219, 218)",
/* Border color to match UI elements using color-background-inverse. */
colorBorderInverse: "rgb(6, 28, 63)",
/* Active border color for UI elements that have to do with destructive actions. */
colorBorderDestructiveActive: "rgb(135, 5, 0)",
/* Alternative border color for UI elements related to errors. */
colorBorderErrorAlt: "rgb(234, 130, 136)",
/* Used as a separator on dark backgrounds, such as stage left navigation. */
colorBorderSeparatorInverse: "rgb(42, 66, 108)",
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 #0070d2",
/* 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: "'Salesforce Sans', Arial, sans-serif",
fontFamilyHeading: "'Salesforce Sans', Arial, sans-serif",
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(25, 85, 148, 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(191, 2, 1)",
/* 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(176, 196, 223)",
/* Primary brand color */
brandPrimary: "rgb(21, 137, 238)",
/* 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(0, 85, 131)",
/* 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(24, 35, 55)",
/* Dark variant of BRAND that is accessible with white */
brandAccessible: "rgb(0, 112, 210)",
/* Dark variant of BRAND_BACKGROUND_PRIMARY, used within gradient of background color */
brandBackgroundDark: "rgb(25, 85, 148)",
/* Active / Hover state of BRAND_TEXT_LINK */
brandTextLinkActive: "rgb(0, 95, 178)",
/* 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(0, 109, 204)",
/* 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(0, 95, 178)",
/* 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(0, 85, 131)",
/* 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(0, 122, 221)",
/* 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(172, 0, 0)",
/* 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(62, 62, 60)",
/* 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(8, 7, 7)",
/* Color for texts or icons that are related to warnings on a dark background. */
colorTextWarning: "rgb(255, 183, 93)",
/* Focus link text */
colorTextLinkFocus: "rgb(0, 95, 178)",
/* Text color for destructive actions - hover state */
colorTextDestructiveHover: "rgb(161, 43, 43)",
/* Disabled link text */
colorTextLinkDisabled: "rgb(22, 50, 92)",
/* Body text color */
colorTextDefault: "rgb(8, 7, 7)",
/* Text color for destructive actions */
colorTextDestructive: "rgb(194, 57, 52)",
/* Hover link text */
colorTextLinkHover: "rgb(0, 95, 178)",
/* Text color for success text. */
colorTextSuccess: "rgb(2, 126, 70)",
/* Color for text that is purposefully de-emphasized to create visual hierarchy. */
colorTextWeak: "rgb(62, 62, 60)",
/* Input placeholder text on dark backgrounds. */
colorTextPlaceholderInverse: "rgb(236, 235, 234)",
/* Link text (508) */
colorTextLink: "rgb(0, 109, 204)",
/* Color for texts that are related to warnings on a light background. */
colorTextWarningAlt: "rgb(132, 72, 0)",
/* Default icon color. */
colorTextIconDefault: "rgb(112, 110, 107)",
/* Our product brand blue. */
colorTextBrand: "rgb(21, 137, 238)",
/* Error text for inputs and error misc */
colorTextError: "rgb(194, 57, 52)",
/* Customer text used in anchor subtitle */
colorTextCustomer: "rgb(255, 154, 60)",
/* Text color found on any primary brand color */
colorTextBrandPrimary: "rgb(255, 255, 255)",
/* Active link text */
colorTextLinkActive: "rgb(0, 57, 107)",
/* Color of required field marker. */
colorTextRequired: "rgb(194, 57, 52)",
/* 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(112, 110, 107)",
/* Weak inverse text color for dark backgrounds */
colorTextInverseWeak: "rgb(176, 173, 171)",
/* Link color on dark background - hover state */
colorTextLinkInverseHover: "rgba(255, 255, 255, 0.75)",
/* Text color for success text on dark backgrounds. */
colorTextSuccessInverse: "rgb(75, 202, 129)",
/* Text color for field labels. */
colorTextLabel: "rgb(62, 62, 60)",
/* 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",
};