@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
698 lines • 33.6 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",
colorContrastPrimary: "rgb(243, 242, 242)",
/* The color of the mask overlay that appears when you enter a modal state. */
colorBackgroundTempModalTint: "rgba(8, 7, 7, 0.6)",
/* Winter 18 token, this has been deprecated. Please use BRAND_BACKGROUND_DARK_TRANSPARENT instead. These RGBA values need to be updated if BRAND_BAND_COLOR_BACKGROUND_PRIMARY changes, solves webkit bug */
brandBandColorBackgroundSecondaryTransparent: "rgba(253, 253, 253, 0)",
/* Used when further differentiation is needed because colorBackground and colorBackgroundAlt are both being used in close proximity. */
colorBackgroundAlt2: "rgb(243, 242, 242)",
/* Hover color for utility bar item. */
colorBackgroundUtilityBarHover: "rgb(236, 235, 234)",
/* Use COLOR_BACKGROUND_PAGE_HEADER instead. */
colorBackgroundAnchor: "rgb(243, 242, 242)",
colorBackgroundPrimary: "rgb(243, 242, 242)",
/* Winter 18 token, this has been deprecated. Please use BRAND_BACKGROUND_PRIMARY_DARK instead. */
brandBandColorBackgroundSecondary: "rgb(253, 253, 253)",
/* Winter 18 token, this has been deprecated. Please use BRAND_BACKGROUND_PRIMARY_TRANSPARENT instead. These RGBA values need to be updated if BRAND_BAND_COLOR_BACKGROUND_PRIMARY changes, solves webkit bug */
brandBandColorBackgroundPrimaryTransparent: "rgba(253, 253, 253, 0)",
colorContrastSecondary: "rgb(243, 242, 242)",
/* Secondary top bar background color (child browser, file preview, etc.) */
colorBackgroundBrowser: "rgb(112, 110, 107)",
/* Used as the default background color for temporary dialog elements, such as the progress spinner background. */
colorBackgroundTempModal: "rgb(150, 148, 146)",
/* Used as gray background when more contrast is desired. */
colorBackgroundShade: "rgb(236, 235, 234)",
/* Background color for payloads in the feed. */
colorBackgroundPayload: "rgb(250, 250, 249)",
/* Winter 18 token, this has been deprecated. Please use BRAND_BACKGROUND_PRIMARY instead. */
pageColorBackgroundPrimary: "rgb(253, 253, 253)",
/* Used as gray background in conjunction with Shade when more contrast is desired. */
colorBackgroundShadeDark: "rgb(221, 219, 218)",
/* Background for utility icons that live in the action bar on mobile. */
colorBackgroundActionbarIconUtility: "rgb(112, 110, 107)",
/* Winter 18 token, this has been deprecated. Please use BRAND_BACKGROUND_PRIMARY instead. */
brandBandColorBackgroundPrimary: "rgb(253, 253, 253)",
colorBackgroundSecondary: "rgb(255, 255, 255)",
colorBorderPrimary: "rgb(221, 219, 218)",
/* Our product brand blue. */
colorStrokeBrand: "rgb(0, 112, 210)",
/* Hover stroke color for our product brand blue. */
colorStrokeBrandHover: "rgb(0, 112, 210)",
/* Active stroke color for our product brand blue. */
colorStrokeBrandActive: "rgb(22, 50, 92)",
/* Disabled stroke color. */
colorStrokeDisabled: "rgb(236, 235, 234)",
/* Stroke color for our global header buttons. */
colorStrokeHeaderButton: "rgb(176, 173, 171)",
/* Hard dropshadow found on general UI elements such as containers */
shadowHardPrimary: "rgba(0, 0, 0, 0.10) 0 2px 0",
/* Soft dropshadow found on general UI elements such as containers */
shadowSoftPrimary: "rgba(0, 0, 0, 0.10) 0 2px 2px",
shadowSoftPrimaryHover: "rgba(0, 0, 0, 0.20) 0 3px 6px",
shadowSoftPrimaryActive: "rgba(0, 0, 0, 0.20) 0 1px 1px",
/* Custom glow for focus states on UI elements with explicit containers on dark or vibrantly colored backgrounds. */
shadowButtonFocusInverse: "0 0 3px #ecebea",
/* Custom glow for focus states on UI link elements with explicit containers on dark or vibrantly colored backgrounds. */
shadowLinkFocusInverse: "0 0 3px #ecebea",
/* */
componentSpacingMargin: "0.75rem",
/* */
componentSpacingPadding: "1rem",
/* */
cardSpacingMargin: "0.75rem",
/* */
cardFooterPadding: "0.75rem 1rem",
/* Tertiary body text color */
colorTextTertiary: "rgb(150, 148, 146)",
/* Active state on a standalone link on a dark background. */
colorTextInverseActive: "rgb(94, 180, 255)",
/* 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(236, 235, 234)",
/* Color for text on toast messages. */
colorTextToast: "rgb(236, 235, 234)",
/* Hover state on a standalone link on a dark background. */
colorTextInverseHover: "rgb(176, 173, 171)",
/* Modal header button text color */
colorTextModalButton: "rgb(62, 62, 60)",
/* Color for interactive utility icons */
colorTextIconUtility: "rgb(176, 173, 171)",
/* Secondary body text color */
colorTextSecondary: "rgb(62, 62, 60)",
/* Text in stage left navigation. */
colorTextStageLeft: "rgb(236, 235, 234)",
/* Background color for a new notification list item. */
colorBackgroundNotificationNew: "rgb(243, 242, 242)",
popoverWalkthroughHeaderImage: "/assets/images/popovers/popover-header.png",
/* Disabled input */
colorBackgroundInputDisabled: "rgb(236, 235, 234)",
/* Hovered toggle background color. */
colorBackgroundToggleHover: "rgb(150, 148, 146)",
popoverWalkthroughColorBackground: "rgb(3, 46, 97)",
popoverWalkthroughAltImage: "/assets/images/popovers/popover-action.png",
progressColorBorderShade: "rgb(243, 242, 242)",
/* Toggle background color. */
colorBackgroundToggle: "rgb(176, 173, 171)",
popoverWalkthroughAltNubbinColorBackground: "rgb(33, 92, 160)",
progressColorBackgroundShade: "rgb(243, 242, 242)",
/* Default Page Header background color */
pageHeaderColorBackground: "rgb(243, 242, 242)",
/* Disabled checkboxes */
colorBackgroundInputCheckboxDisabled: "rgb(221, 219, 218)",
/* Color of the spinner dot. */
colorBackgroundSpinnerDot: "rgb(176, 173, 171)",
tableColorBackgroundHeaderHover: "rgb(255, 255, 255)",
/* The color of the mask overlay that provides user feedback on interaction. */
colorBackgroundBackdropTint: "rgb(250, 250, 249)",
popoverWalkthroughColorBackgroundAlt: "rgb(22, 74, 133)",
tableColorBackgroundHeader: "rgb(250, 250, 249)",
/* The background color of an internal scrollbar. */
colorBackgroundScrollbar: "rgb(236, 235, 234)",
/* Disabled toggle background color. */
colorBackgroundToggleDisabled: "rgb(176, 173, 171)",
/* Background color for toast messaging. */
colorBackgroundToast: "rgb(112, 110, 107)",
/* Background color of comment posts in the feed. */
colorBackgroundPost: "rgb(243, 242, 242)",
/* Color of mask overlay that sits on top of an image when text is present. */
colorBackgroundImageOverlay: "rgba(0, 0, 0, 0.6)",
colorPickerSliderThumbColorBackground: "rgb(243, 242, 242)",
/* The background color of an internal scrollbar track. */
colorBackgroundScrollbarTrack: "rgb(201, 199, 197)",
popoverWalkthroughHeaderColorBackground: "rgb(22, 74, 133)",
/* Border color on disabled form elements. */
colorBorderInputDisabled: "rgb(201, 199, 197)",
/* Border color on notification reminders. */
colorBorderReminder: "rgb(236, 235, 234)",
pageHeaderColorBorder: "rgb(221, 219, 218)",
/* Border color for default secondary button */
colorBorderButtonDefault: "rgb(221, 219, 218)",
/* Border color on form elements. */
colorBorderInput: "rgb(221, 219, 218)",
colorBorderButtonFocusInverse: "rgb(236, 235, 234)",
cardColorBorder: "rgb(221, 219, 218)",
buttonColorBorderPrimary: "rgb(221, 219, 218)",
colorBorderLinkFocusInverse: "rgb(236, 235, 234)",
pageHeaderJoinedColorBorder: "rgb(221, 219, 218)",
cardFooterColorBorder: "rgb(221, 219, 218)",
pageHeaderBorderRadius: "0.25rem",
tableBorderRadius: "0 0 0.25rem 0.25rem",
/* Hard dropshadow on page header */
pageHeaderShadow: "0 2px 2px 0 rgba(0, 0, 0, 0.10)",
/* Hard dropshadow found on outer cards */
cardShadow: "0 2px 2px 0 rgba(0, 0, 0, 0.10)",
formLabelFontSize: "0.75rem",
inputStaticFontSize: "0.875rem",
inputStaticFontWeight: "400",
/* Use for active tab. */
tabsFontWeight: "700",
/* Use for active tab. */
cardFontWeight: "700",
pageHeaderTitleFontWeight: "700",
brandBandDefaultImage: "/assets/images/themes/oneSalesforce/banner-brand-default.png",
bannerUserDefaultImage: "/assets/images/themes/oneSalesforce/banner-user-default.png",
bannerGroupDefaultImage: "/assets/images/themes/oneSalesforce/banner-group-public-default.png",
templateGutters: "0.75rem",
templateProfileGutters: "8rem 0.75rem 0.75rem",
tableCellSpacing: "0.25rem 0.5rem",
cardFooterTextAlign: "center",
/* Icon color on dark background */
colorTextIconInverse: "rgb(255, 255, 255)",
/* Input icon */
colorTextInputIcon: "rgb(176, 173, 171)",
/* Icon color on dark background - active state */
colorTextIconInverseActive: "rgb(255, 255, 255)",
/* Color for disabled text in a tab group. */
colorTextTabLabelDisabled: "rgb(236, 235, 234)",
/* Input disabled text */
colorTextInputDisabled: "rgb(62, 62, 60)",
/* Default icon color - disabled state */
colorTextIconDefaultDisabled: "rgb(221, 219, 218)",
/* Text color for default secondary button - disabled state */
colorTextButtonDefaultDisabled: "rgb(221, 219, 218)",
/* Color for disabled toggles */
colorTextToggleDisabled: "rgb(221, 219, 218)",
/* Color for default text in a tab group. */
colorTextTabLabel: "rgb(43, 40, 38)",
/* 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. */
colorTextIconDefaultHint: "rgb(176, 173, 171)",
/* 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. */
colorTextButtonInverse: "rgb(236, 235, 234)",
/* 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. */
colorTextButtonDefaultHint: "rgb(176, 173, 171)",
/* Icon color on dark background - hover state */
colorTextIconInverseHover: "rgb(255, 255, 255)",
};