@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
1,098 lines • 61.3 kB
JavaScript
module.exports = {
// Deprecated: use FONT_FAMILY_TEXT instead for regular body text and FONT_FAMILY_HEADING for headings.
fontFamily: "'Salesforce Sans', Arial, sans-serif",
// Used as the background color for the active state on rows or items on list-like components.
colorBackgroundRowActive: "rgb(242, 242, 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(249, 249, 250)",
// 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(107, 109, 112)",
// 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(242, 242, 243)",
// 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(249, 249, 250)",
// 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)",
// Light variant of COLOR_BACKGROUND.
colorBackgroundDark: "rgb(233, 234, 236)",
// 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, 64, 65)",
// Used as an alternate background for loading stencils on gray backgrounds.
colorBackgroundStencilAlt: "rgb(233, 234, 236)",
// 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(233, 234, 236)",
// 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(107, 109, 112)",
// 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(217, 219, 221)",
// 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(196, 198, 202)",
// Border color for UI elements related to the offline state.
colorBorderOffline: "rgb(62, 64, 65)",
// 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(249, 249, 250)",
// 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(249, 249, 250)",
// 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(217, 219, 221)",
// 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",
borderRadiusPill: "15rem",
// Circle for global use, action icon bgd shape
borderRadiusCircle: "50%",
// 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)",
// Shadow for header.
shadowHeader: "0 2px 4px rgba(0, 0, 0, 0.07)",
fontFamilyText: "'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",
illustrationEmptyStateAssistant: "/assets/images/illustrations/empty-state-assistant.svg",
illustrationEmptyStateEvents: "/assets/images/illustrations/empty-state-events.svg",
illustrationEmptyStateTasks: "/assets/images/illustrations/empty-state-tasks.svg",
// 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",
// Line heights for tabs
lineHeightTab: "2.5rem",
// 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(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(250, 250, 249)",
// 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(232, 232, 232)",
// 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(250, 250, 249, 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",
borderWidthThin: "1px",
// 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",
borderWidthThick: "2px",
// 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(107, 109, 112)",
// 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(22, 50, 92)",
// 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(22, 50, 92)",
// Primary body text color
colorTextPrimary: "rgb(22, 50, 92)",
// 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(107, 109, 112)",
// Link text (508)
colorTextLink: "rgb(0, 112, 210)",
// Color for texts that are related to warnings on a light background.
colorTextWarningAlt: "rgb(132, 72, 0)",
// Default icon color.
colorTextIconDefault: "rgb(107, 109, 112)",
// 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(107, 109, 112)",
// Weak inverse text color for dark backgrounds
colorTextInverseWeak: "rgb(171, 173, 176)",
// 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(107, 109, 112)",
// 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",
// Notifications badge background color.
colorBackgroundNotificationBadgeActive: "rgb(0, 57, 107)",
// Notifications badge background color.
colorBackgroundNotificationBadgeHover: "rgb(0, 95, 178)",
// The color of the mask overlay that appears when you enter a modal state.
colorBackgroundTempModalTint: "rgba(126, 140, 153, 0.8)",
// Used when further differentiation is needed because colorBackground and colorBackgroundAlt are both being used in close proximity.
colorBackgroundAlt2: "rgb(242, 242, 243)",
// Hover color for utility bar item.
colorBackgroundUtilityBarHover: "rgb(233, 234, 236)",
// Background color for default desktop chrome (ex. global header)
colorBackgroundChromeDesktop: "rgb(255, 255, 255)",
// Selected checkboxes
colorBackgroundInputCheckboxSelected: "rgb(21, 137, 238)",
// 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(0, 95, 178)",
colorBackgroundBrandPrimaryActive: "rgb(0, 57, 107)",
colorBackgroundBrandPrimaryHover: "rgb(0, 95, 178)",
// Background color for default mobile chrome (ex. global header)
colorBackgroundChromeMobile: "rgb(0, 112, 210)",
// 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(107, 109, 112)",
colorBackgroundBrandPrimary: "rgb(0, 112, 210)",
// Used as the default background color for temporary dialog elements, such as the progress spinner background.
colorBackgroundTempModal: "rgba(126, 140, 153, 0.8)",
// Hovered active toggle background color.
colorBackgroundToggleActiveHover: "rgb(0, 95, 178)",
// Background color for payloads in the feed.
colorBackgroundPayload: "rgb(249, 249, 250)",
// Active color for utility bar item.
colorBackgroundUtilityBarActive: "rgb(21, 137, 238)",
// Stage left org switcher dropdown arrow background color.
colorBackgroundOrgSwitcherArrow: "rgb(6, 28, 63)",
// Active toggle background color.
colorBackgroundToggleActive: "rgb(0, 112, 210)",
// Alternative color for UI elements related to errors.
colorBackgroundErrorAlt: "rgb(234, 130, 136)",
// 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(217, 219, 221)",
// Notifications badge background color.
colorBackgroundNotificationBadgeFocus: "rgb(0, 95, 178)",
colorBackgroundSecondary: "rgb(249, 249, 250)",
colorBorderBrandPrimary: "rgb(21, 137, 238)",
colorBorderBrandPrimaryHover: "rgb(0, 112, 210)",
colorBorderBrandPrimaryFocus: "rgb(0, 112, 210)",
colorBorderBrandPrimaryActive: "rgb(0, 57, 107)",
// Used to delineate the boundary of a specific region. Specific to builders.
colorBorderHint: "rgb(42, 66, 108)",
// Disabled stroke color.
colorStrokeDisabled: "rgb(233, 234, 236)",
// Stroke color for our global header buttons.
colorStrokeHeaderButton: "rgb(171, 173, 176)",
// Deprecated
elevation32: "32",
// Deprecated
elevationShadow16: "0 16px 16px 0 rgba(0, 0, 0, 0.16)",
// Deprecated
elevationInverseShadow0: "none",
// 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",
// 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 #1589EE 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",
// 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",
// Secondary body text color
colorTextSecondary: "rgb(107, 109, 112)",
// Tertiary body text color
colorTextTertiary: "rgb(107, 109, 112)",
// Modal header title
colorTextModal: "rgb(255, 255, 255)",
// Modal header button text color
colorTextModalButton: "rgb(107, 109, 112)",
// Text in stage left navigation.
colorTextStageLeft: "rgb(233, 234, 236)",
// Color for text on toast messages.
colorTextToast: "rgb(233, 234, 236)",
// Text color for pills.
colorTextPill: "rgb(0, 112, 210)",
// Default value for text-transform
textTransform: "none",
// Brandable modal header
colorBackgroundModalBrand: "rgb(0, 112, 210)",
// Background color for notification list item.
colorBackgroundNotification: "rgb(255, 255, 255)",
// Background color for a new notification list item.
colorBackgroundNotificationNew: "rgb(249, 249, 250)",
// Focused header button icon color
fillHeaderButtonFocus: "rgb(0, 112, 210)",
colorContrastPrimary: "rgb(249, 249, 250)",
colorForegroundPrimary: "rgb(255, 255, 255)",
// Background color for reminder notification on hover
colorBackgroundReminderHover: "rgb(255, 255, 255)",
// Notifications badge background color.
colorBackgroundNotificationBadge: "rgb(194, 57, 52)",
// Color of the indicator dot.
colorBackgroundIndicatorDot: "rgb(22, 50, 92)",
// Hovered header button icon color
fillHeaderButtonHover: "rgb(0, 95, 178)",
// Disabled input
colorBackgroundInputDisabled: "rgb(233, 234, 236)",
// Hovered toggle background color.
colorBackgroundToggleHover: "rgb(145, 146, 151)",
// Background color for reminder notification
colorBackgroundReminder: "rgb(244, 246, 249)",
// Hovered background color for success buttons
colorBackgroundButtonSuccessHover: "rgb(4, 132, 75)",
// Brand hover fill color
fillBrandHover: "rgb(0, 95, 178)",
// Header button icon color
fillHeaderButton: "rgb(176, 173, 171)",
// Toggle background color.
colorBackgroundToggle: "rgb(171, 173, 176)",
// Background color for success buttons
colorBackgroundButtonSuccess: "rgb(75, 202, 129)",
// Brand fill color
fillBrand: "rgb(0, 112, 210)",
// Active button backgrounds on modal headers
colorBackgroundModalButtonActive: "rgba(0, 0, 0, 0.16)",
// Disabled checkboxes
colorBackgroundInputCheckboxDisabled: "rgb(217, 219, 221)",
// Background color for pills.
colorBackgroundPill: "rgb(255, 255, 255)",
// Color of the spinner dot.
colorBackgroundSpinnerDot: "rgb(171, 173, 176)",
// The color of the mask overlay that provides user feedback on interaction.
colorBackgroundBackdropTint: "rgb(249, 249, 250)",
// 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(233, 234, 236)",
// Disabled toggle background color.
colorBackgroundToggleDisabled: "rgb(171, 173, 176)",
// Background color for toast messaging.
colorBackgroundToast: "rgb(107, 109, 112)",
// Background color of comment posts in the feed.
colorBackgroundPost: "rgb(249, 249, 250)",
// Default input field
colorBackgroundInput: "rgb(255, 255, 255)",
// Background color for success toast messaging.
colorBackgroundToastSuccess: "rgb(4, 132, 75)",
// Color of mask overlay that sits on top of an image when text is present.
colorBackgroundImageOverlay: "rgba(0, 0, 0, 0.4)",
// Used as gray background when more contrast is desired.
colorBackgroundShade: "rgb(233, 234, 236)",
// Standard modal header
colorBackgroundModal: "rgb(255, 255, 255)",
// Button backgrounds on modal headers
colorBackgroundModalButton: "rgba(0, 0, 0, 0.07)",
// Brand active fill color
fillBrandActive: "rgb(22, 50, 92)",
// Active background color for success buttons
colorBackgroundButtonSuccessActive: "rgb(4, 132, 75)",
// Background color for error toast messaging.
colorBackgroundToastError: "rgb(194, 57, 52)",
// Background for utility icons that live in the action bar on mobile.
colorBackgroundActionbarIconUtility: "rgb(107, 109, 112)",
// The background color of an internal scrollbar track.
colorBackgroundScrollbarTrack: "rgb(196, 198, 202)",
// Background color for input field that has encountered an error.
colorBackgroundInputError: "rgb(255, 221, 225)",
// The borders to create the checkmark
colorBorderInputCheckboxSelectedCheckmark: "rgb(255, 255, 255)",
// 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(196, 198, 202)",
// Border color on notification reminders.
colorBorderReminder: "rgb(236, 235, 234)",
// Active stroke color for our product brand blue.
colorStrokeBrandActive: "rgb(22, 50, 92)",
// Border color for brandable primary button - disabled state
colorBorderButtonBrandDisabled: "rgba(0, 0, 0, 0)",
colorBorderPrimary: "rgb(217, 219, 221)",
// Border color for default secondary button
colorBorderButtonDefault: "rgb(217, 219, 221)",
// Border color for brandable primary button
colorBorderButtonBrand: "rgb(0, 112, 210)",
// Border color on active form elements.
colorBorderInputActive: "rgb(21, 137, 238)",
// Border color on form elements.
colorBorderInput: "rgb(217, 219, 221)",
// These borders create the faux checkmark when the checkbox toggle is in the checked state.
colorBorderToggleChecked: "rgb(255, 255, 255)",
colorBorderButtonFocusInverse: "rgb(233, 234, 236)",
// Used to delineate the boundary of a selected canvas element that is being hovered over. Specific to builders.
colorBorderCanvasElementSelectionHover: "rgb(0, 95, 178)",
// Used to delineate the boundary of a selected canvas element. Specific to builders.
colorBorderCanvasElementSelection: "rgb(94, 180, 255)",
// Hover stroke color for our product brand blue.
colorStrokeBrandHover: "rgb(0, 112, 210)",
colorBorderLinkFocusInverse: "rgb(233, 234, 236)",
// Our product brand blue.
colorStrokeBrand: "rgb(0, 112, 210)",
// Border color for a selected tab in a tab group.
colorBorderTabSelected: "rgb(0, 112, 210)",
borderStrokeWidthThin: "1px",
borderStrokeWidthThick: "2px",
// Shadow above overflow menu close bar.
shadowActionOverflowFooter: "0 -2px 4px #F9F9FA",
// 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 #0070D2",
// Custom glow for focus states on UI button elements with explicit containers on dark or vibrantly colored backgrounds.
shadowButtonFocusInverse: "0 0 3px #E9EAEC",
// Custom glow for focus states on UI link elements with explicit containers on dark or vibrantly colored backgrounds.
shadowLinkFocusInverse: "0 0 3px #E9EAEC",
// 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)",
// 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",
// 4.8 seconds
durationToastShort: "4.8s",
// 9.6 seconds
durationToastMedium: "9.6s",
bannerUserDefaultImage: "",
bannerGroupDefaultImage: "",
userDefaultAvatar: "/assets/images/profile_avatar_200.png",
userDefaultAvatarMedium: "/assets/images/profile_avatar_160.png",
userDefaultAvatarSmall: "/assets/images/profile_avatar_96.png",
groupDefaultAvatar: "/assets/images/group_avatar_200.png",
groupDefaultAvatarMedium: "/assets/images/group_avatar_160.png",
groupDefaultAvatarSmall: "/assets/images/group_avatar_96.png",
// Minimum height of a pill.
heightPill: "1.625rem",
// Brand header. Phone 44px; Tablet 50px
heightHeader: "2.75rem",
// Text input height
heightInput: "1.875rem",
// Maximum width for action overflow menu so that it's not full-screen for tablet.
maxWidthActionOverflowMenu: "512px",
// Tap target Size
squareTappable: "2.75rem",
componentSpacingMargin: "0",
componentSpacingPadding: "1rem",
// 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.15)",
// Hovered icon color for a button that has a parent element that has a hover state
colorTextIconInverseHintHover: "rgba(255, 255, 255, 0.75)",
// Input icon
colorTextInputIcon: "rgb(171, 173, 176)",
// Icon color on dark background - active state
colorTextIconInverseActive: "rgb(255, 255, 255)",
// Color for text on a selected tab in a tab group.
colorTextTabLabelSelected: "rgb(0, 112, 210)",
// 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(233, 234, 236)",
// Text color for default secondary button - hover state
colorTextButtonDefaultHover: "rgb(0, 112, 210)",
// Input disabled text
colorTextInputDisabled: "rgb(107, 109, 112)",
// Text color for default secondary button
colorTextButtonDefault: "rgb(0, 112, 210)",
// Default icon color - disabled state
colorTextIconDefaultDisabled: "rgb(217, 219, 221)",
// Active state on a standalone link on a dark background.
colorTextInverseActive: "rgb(94, 180, 255)",
// Text color for brandable primary button - disabled state
colorTextButtonBrandDisabled: "rgb(255, 255, 255)",
colorTextLinkPrimaryFocus: "rgb(0, 112, 210)",
// Text color for brandable primary button - hover state
colorTextButtonBrandHover: "rgb(255, 255, 255)",
// Color for text in focus state in a tab group.
colorTextTabLabelFocus: "rgb(0, 95, 178)",
// Input placeholder text on dark backgrounds.
colorTextPlaceholderInverse: "rgb(233, 234, 236)",
// Default icon color - hover state.
colorTextIconDefaultHover: "rgb(0, 112, 210)",
// 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(233, 234, 236)",
colorTextLinkPrimaryHover: "rgb(0, 112, 210)",
// Text color for brandable primary button
colorTextButtonBrand: "rgb(255, 255, 255)",
// Color for text in active state in a tab group.
colorTextTabLabelActive: "rgb(0, 57, 107)",
// Color for text in hover state in a tab group.
colorTextTabLabelHover: "rgb(0, 95, 178)",
// Text color for default secondary button - disabled state
colorTextButtonDefaultDisabled: "rgb(217, 219, 221)",
// Color for disabled toggles
colorTextToggleDisabled: "rgb(217, 219, 221)",
// Top bar icon color
colorTextBrowser: "rgb(255, 255, 255)",
colorTextLinkPrimaryActive: "rgb(0, 57, 107)",
colorTextLinkPrimary: "rgb(0, 112, 210)",
// Top bar active icon color
colorTextBrowserActive: "rgba(0, 0, 0, 0.4)",
// Color for default text in a tab group.
colorTextTabLabel: "rgb(22, 50, 92)",
// Default icon color - active state.
colorTextIconDefaultActive: "rgb(0, 57, 107)",
// 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(171, 173, 176)",
// Text color for brandable primary button - active state
colorTextButtonBrandActive: "rgb(255, 255, 255)",
// Color for non-interactive icons that represent a selected item in a list
colorTextIconBrand: "rgb(0, 112, 210)",
// Hover state on a standalone link on a dark background.
colorTextInverseHover: "rgb(171, 173, 176)",
// 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(233, 234, 236)",
// Text color for default secondary button - active state
colorTextButtonDefaultActive: "rgb(0, 112, 210)",
// Icon color on dark background - disabled state
colorTextIconInverseDisabled: "rgba(255, 255, 255, 0.15)",
// 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(171, 173, 176)",
// Color for interactive utility icons
colorTextIconUtility: "rgb(171, 173, 176)",
// Icon color on dark background - hover state
colorTextIconInverseHover: "rgb(255, 255, 255)",
// Typed input text
colorTextInputFocusInverse: "rgb(22, 50, 92)",
// White avatar group background color.
avatarGroupColorBackgroundLightest: "rgb(255, 255, 255)",
// Dark gray avatar group background color.
avatarGroupColorBackgroundInverse: "rgb(112, 110, 107)",
// White badge background color.
badgeColorBackgroundLightest: "rgb(255, 255, 255)",
// Dark gray badge background color.
badgeColorBackgroundInverse: "rgb(112, 110, 107)",
brandBandDefaultImage: "",
brandBandColorBackgroundPrimary: "rgba(0, 0, 0, 0)",
brandBandColorBackgroundPrimaryTransparent: "rgba(0, 0, 0, 0)",
brandBandColorBackgroundSecondary: "rgba(0, 0, 0, 0)",
brandBandColorBackgroundSecondaryTransparent: "rgba(0, 0, 0, 0)",
brandBandImageHeightSmall: "6rem",
brandBandImageHeightMedium: "12.5rem",
brandBandImageHeightLarge: "18.75rem",
brandBandScrimHeight: "3.125rem",
templateGutters: "0",
templateProfileGutters: "0",
buttonIconColorBorderPrimary: "rgb(255, 255, 255)",
buttonColorBorderPrimary: "rgb(216, 221, 230)",
buttonColorBorderBrandPrimary: "rgb(0, 112, 210)",
buttonColorBorderSecondary: "rgba(255, 255, 255, 0.8)",
buttonBorderRadius: ".25rem",
// Default secondary button - focus state
colorBackgroundButtonDefaultFocus: "rgb(244, 246, 249)",
buttonColorBackgroundBrandPrimary: "rgb(0, 112, 210)",
// Disabled button backgrounds on inverse/dark backgrounds
colorBackgroundButtonInverseDisabled: "rgba(0, 0, 0, 0)",
// Default secondary button - hover state
colorBackgroundButtonDefaultHover: "rgb(244, 246, 249)",
// Default secondary button
colorBackgroundButtonDefault: "rgb(255, 255, 255)",
// Background color for icon-only button - disabled state
colorBackgroundButtonIconDisabled: "rgb(255, 255, 255)",
// Background color for icon-only button - focus state
colorBackgroundButtonIconFocus: "rgb(244, 246, 249)",
buttonColorBackgroundSecondary: "rgba(255, 255, 255, 0.8)",
// Brandable primary button - disabled state
colorBackgroundButtonBrandDisabled: "rgb(224, 229, 238)",
// Brandable primary button - hover state
colorBackgroundButtonBrandHover: "rgb(0, 95, 178)",
// Active button backgrounds on inverse backgrounds on mobile
colorBackgroundButtonInverseActive: "rgba(0, 0, 0, 0.24)",
// Background color for icon-only button - hover state
colorBackgroundButtonIconHover: "rgb(244, 246, 249)",
// Brandable primary button
colorBackgroundButtonBrand: "rgb(0, 112, 210)",
// Background color for icon-only button
colorBackgroundButtonIcon: "rgba(0, 0, 0, 0)",
// Default secondary button - disabled state
colorBackgroundButtonDefaultDisabled: "rgb(255, 255, 255)",
// Background color for icon-only button - active state
colorBackgroundButtonIconActive: "rgb(238, 241, 246)",
// Brandable primary button - active state
colorBackgroundButtonBrandActive: "rgb(0, 57, 107)",
// Button backgrounds on inverse/dark backgrounds
colorBackgroundButtonInverse: "rgba(0, 0, 0, 0)",
buttonColorBackgroundPrimary: "rgb(255, 255, 255)",
// Default secondary button - active state
colorBackgroundButtonDefaultActive: "rgb(238, 241, 246)",
// Line heights for regular buttons
lineHeightButton: "1.875rem",
// Line heights for small buttons
lineHeightButtonSmall: "1.75rem",
buttonColorTextPrimary: "rgb(255, 255, 255)",
// Default Card component background color.
cardColorBackground: "rgb(255, 255, 255)",
cardColorBorder: "rgb(221, 219, 218)",
cardFooterColorBorder: "rgba(0, 0, 0, 0)",
cardShadow: "none",
// Use for active tab.
cardFontWeight: "400",
//
cardFooterMargin: "0.75rem",
//
cardBodyPadding: "0 1rem",
//
cardWrapperSpacing: "1rem",
//
cardHeaderPadding: "0.75rem 1rem 0",
//
cardSpacingLarge: "1.5rem",
//
cardHeaderMargin: "0 0 0.75rem",
// Use for vertical spacing between cards
cardSpacingMargin: "1rem",
//
cardFooterPadding: "0 1rem 0.75rem",
//
cardSpacingSmall: "0.75rem",
cardFooterTextAlign: "right",
// Default background for carousel card
carouselColorBackground: "rgb(255, 255, 255)",
// Default background for carousel navigation indicators
carouselIndicatorColorBackground: "rgb(255, 255, 255)",
// Default hover background for carousel navigation indicators
carouselIndicatorColorBackgroundHover: "rgb(250, 250, 249)",
// Default focus background for carousel navigation indicators
carouselIndicatorColorBackgroundFocus: "rgb(0, 95, 178)",
// Default background for active state on carousel navigation indicators
carouselIndicatorColorBackgroundActive: "rgb(0, 112, 210)",
// Default width for carousel indicator width
carouselIndicatorWidth: "1rem",
// Inbound chat message background color.
chatMessageColorBackgroundInbound: "rgb(242, 242, 243)",
// Outbound chat message background color.
chatMessageColorBackgroundOutbound: "rgb(0, 95, 178)",
// Outbound agent chat message background color.
chatMessageColorBackgroundOutboundAgent: "rgb(107, 109, 112)",
// Status chat message background color.
chatMessageColorBackgroundStatus: "rgb(255, 255, 255)",
// Line heights for toggle buttons
lineHeightToggle: "1.3rem",
// Slider size for toggle.
squareToggleSlider: "1.25rem",
// Slider width.
widthToggle: "3rem",
// Slider height.
heightToggle: "1.5rem",
colorPickerSliderThumbColorBackground: "rgb(250, 250, 249)",
colorPickerSliderThumbBorderColor: "rgb(81, 79, 77)",
colorPickerSwatchShadow: "inset 0 0 1px rgba(0,0,0,0.4)",
colorPickerInputCustomHexFontSize: "0.75rem",
colorPickerSelectorWidth: "14rem",
colorPickerSwatchesWidth: "13.3rem",
colorPickerRangeHeight: "5rem",
colorPickerSliderHeight: "1.5rem",
colorPickerThumbWidth: "0.375rem",
colorPickerRangeIndicatorSize: "0.75rem",
colorPickerInputCustomHexWidth: "4.2rem",
colorPickerSwatchSize: "1.25rem",
// Alternating row background color for tables
tableColorBackgroundStripes: "rgb(250, 250, 249)",
// Default background color for table headers
tableColorBackgroundHeader: "rgb(255, 255, 255)",
// Hover state for table header cells
tableColorBackgroundHeaderHover: "rgb(250, 250, 249)",
// Focused state for table header cells
tableColorBackgroundHeaderFocus: "rgb(255, 255, 255)",
tableBorderRadius: "0",
//
tableCellSpacing: "0.5rem",
tableColorTextHeader: "rgb(81, 79, 77)",
// Docked panel header’s background color.
colorBackgroundDockedPanelHeader: "rgb(255, 255, 255)",
// Docked panel’s background color when open.
colorBackgroundDockedPanel: "rgb(255, 255, 255)",
// Height of the docked bar.
heightDockedBar: "2.5rem",
// Utility bar notifications badge background color.
utilityBarColorBackgroundNotificationBadge: "rgb(212, 80, 76)",
// Utility bar notifications focus background color.
utilityBarColorBackgroundNotificationFocus: "rgb(201, 199, 197)",
dropZoneSlotHeight: "0.25rem",
// Default color for animated icon waffle for app switcher.
colorBackgroundIconWaffle: "rgb(112, 110, 107)",
// Default background color for a typing icon dot.
typingIconDotColorBackgroundGray: "rgb(221, 219, 218)",
// Active background color for a typing icon dot when animcating.
typingIconDotColorBackgroundGrayDark: "rgb(201, 199, 197)",
// Brand fill color
globalActionFillHover: "rgb(0, 112, 210)",
// Global action icon size
globalActionIconSize: "1.5rem",
// Typing icon size
typingIconDotSize: ".5rem",
einsteinHeaderBackground: "/assets/images/einstein-headers/einstein-header-background.svg",
einsteinHeaderFigure: "/assets/images/einstein-headers/einstein-figure.svg",
// Background color for Einstein header
einsteinHeaderBackgroundColor: "rgb(149, 203, 252)",
// Text sha