@salesforce/design-system-react/lib/utilities/design-tokens/dist/force-base.common.js

Salesforce Lightning Design System for React

"use strict";

module.exports = {
  //
  spacingXSmall: '0.5rem',
  //
  spacingXxxSmall: '0.125rem',
  //
  spacingXxSmall: '0.25rem',
  //
  borderWidthThin: '1px',
  //
  borderStrokeWidthThin: '1px',
  //
  spacingSmall: '0.75rem',
  //
  componentSpacingMargin: '0',
  //
  borderStrokeWidthThick: '2px',
  //
  borderWidthThick: '2px',
  //
  spacingMedium: '1rem',
  //
  componentSpacingPadding: '1rem',
  //
  spacingNone: '0',
  //
  spacingXLarge: '2rem',
  //
  spacingXxLarge: '3rem',
  //
  spacingLarge: '1.5rem',
  // Generic sizing token scale for UI components.
  sizeXSmall: '12rem',
  // Generic sizing token scale for UI components.
  sizeXxxSmall: '3rem',
  // Small tap target size
  squareIconSmall: '1rem',
  // 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',
  // Very small icons to replace force font with temporary override.
  squareIconXxSmallContent: '.875rem',
  // 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',
  // Minimum height of a pill.
  heightPill: '1.625rem',
  // 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: '.5rem',
  // Large tap target size.
  squareIconLarge: '3.125rem',
  // Use squareIconMediumBoundary
  squareIconMedium: '2.375rem',
  // 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: '.75rem',
  // Very very small icon button boundary.
  squareIconXxSmallBoundary: '1rem',
  // Alternate medium tap target size
  squareIconMediumContentAlt: '0.875rem',
  // Brand fill color
  fillBrand: 'rgb(0, 112, 210)',
  // Brand hover fill color
  fillBrandHover: 'rgb(0, 95, 178)',
  // Brand active fill color
  fillBrandActive: 'rgb(22, 50, 92)',
  // Header button icon color
  fillHeaderButton: 'rgb(176, 173, 171)',
  // Hovered header button icon color
  fillHeaderButtonHover: 'rgb(0, 95, 178)',
  // Focused header button icon color
  fillHeaderButtonFocus: 'rgb(0, 112, 210)',
  // Use for large headings only.
  fontWeightLight: '300',
  // Most all body copy.
  fontWeightRegular: '400',
  // Used sparingly for emphasized text within regular body copy.
  fontWeightBold: '700',
  // Medium headings.
  fontSizeHeadingMedium: '1.125rem',
  fontSizeMedium: '1rem',
  // Small body text.
  fontSizeTextSmall: '.8125rem',
  fontSizeMediumA: '1.125rem',
  fontSizeXLarge: '1.5rem',
  fontSizeXLargeA: '1.57rem',
  // Extra large headings.
  fontSizeHeadingXLarge: '2rem',
  fontSizeXxLarge: '2rem',
  // Extra extra small text.
  fontSizeTextXxSmall: '.625rem',
  fontSizeLarge: '1.25rem',
  // Large headings.
  fontSizeHeadingLarge: '1.5rem',
  // Extra large body text.
  fontSizeTextXLarge: '1.25rem',
  fontSizeXSmall: '0.625rem',
  // Extra Extra small headings.
  fontSizeHeadingXxSmall: '.625rem',
  // Extra small headings.
  fontSizeHeadingXSmall: '.75rem',
  // Large body text.
  fontSizeTextLarge: '1.125rem',
  fontSizeSmall: '0.875rem',
  // Medium body text.
  fontSizeTextMedium: '1rem',
  // Extra small body text.
  fontSizeTextXSmall: '.75rem',
  // Small headings.
  fontSizeHeadingSmall: '.875rem',
  // Unitless line-heights for reusability
  lineHeightHeading: '1.25',
  // Unitless line-heights for reusability
  lineHeightText: '1.375',
  // Remove extra leading. Unitless line-heights for reusability
  lineHeightReset: '1',
  // Line heights for tabs
  lineHeightTab: '2.5rem',
  // Deprecated: use FONT_FAMILY_TEXT instead for regular body text and FONT_FAMILY_HEADING for headings.
  fontFamily: "'Salesforce Sans', Arial, sans-serif",
  fontFamilyText: "'Salesforce Sans', Arial, sans-serif",
  fontFamilyHeading: "'Salesforce Sans', Arial, sans-serif",
  fontFamilyMonospace: 'Consolas, Menlo, Monaco, Courier, monospace',
  borderRadiusSmall: '.125rem',
  // Icons in lists, record home icon, unbound input elements
  borderRadiusMedium: '.25rem',
  borderRadiusLarge: '.5rem',
  borderRadiusPill: '15rem',
  // Circle for global use, action icon bgd shape
  borderRadiusCircle: '50%',
  // 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)',
  // Dark alternative border color for UI elements related to errors.
  colorBorderErrorDark: 'rgb(234, 130, 136)',
  // 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)',
  // 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)',
  // Border color for an active tab.
  colorBorderTabActive: 'rgb(255, 255, 255)',
  // Disabled stroke color.
  colorStrokeDisabled: 'rgb(233, 234, 236)',
  // 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)',
  // Border color on disabled form elements.
  colorBorderInputDisabled: 'rgb(196, 198, 202)',
  // Dark alternative border color for UI elements that have to do with success.
  colorBorderSuccessDark: 'rgb(4, 132, 75)',
  // 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)',
  // Border color for UI elements that have to do with destructive actions.
  colorBorderDestructive: 'rgb(194, 57, 52)',
  colorBorderPrimary: 'rgb(217, 219, 221)',
  // Border color for default secondary button
  colorBorderButtonDefault: 'rgb(217, 219, 221)',
  // 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)',
  colorBorderBrandPrimaryFocus: 'rgb(0, 112, 210)',
  // 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)',
  colorBorderBrandPrimaryHover: 'rgb(0, 112, 210)',
  // Used to delineate the boundary of a component that is being clicked. Specific to builders.
  colorBorderSelectionActive: 'rgb(249, 249, 250)',
  // Border color for brandable primary button
  colorBorderButtonBrand: 'rgb(0, 112, 210)',
  // 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)',
  colorBorderBrandPrimaryActive: 'rgb(0, 57, 107)',
  // Border color on active form elements.
  colorBorderInputActive: 'rgb(21, 137, 238)',
  // Border color on form elements.
  colorBorderInput: 'rgb(217, 219, 221)',
  colorBorderBrandPrimary: 'rgb(21, 137, 238)',
  // These borders create the faux checkmark when the checkbox toggle is in the checked state.
  colorBorderToggleChecked: 'rgb(255, 255, 255)',
  // 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 to delineate the boundary of a selected canvas element that is being hovered over. Specific to builders.
  colorBorderCanvasElementSelectionHover: 'rgb(0, 95, 178)',
  // 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)',
  // 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)',
  // Border color to match UI elements using color-background-inverse.
  colorBorderInverse: 'rgb(6, 28, 63)',
  // Stroke color for our global header buttons.
  colorStrokeHeaderButton: 'rgb(171, 173, 176)',
  // 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)',
  // Our product brand blue.
  colorStrokeBrand: 'rgb(0, 112, 210)',
  // Border color for a selected tab in a tab group.
  colorBorderTabSelected: 'rgb(0, 112, 210)',
  // Used to delineate the boundary of a specific region. Specific to builders.
  colorBorderHint: 'rgb(42, 66, 108)',
  // Used as a separator on dark backgrounds, such as stage left navigation.
  colorBorderSeparatorInverse: 'rgb(42, 66, 108)',
  // Used as the background color for the active state on rows or items on list-like components.
  colorBackgroundRowActive: 'rgb(242, 242, 243)',
  // 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)',
  // Notifications badge background color.
  colorBackgroundNotificationBadgeActive: 'rgb(0, 57, 107)',
  // Notifications badge background color.
  colorBackgroundNotificationBadgeHover: 'rgb(0, 95, 178)',
  colorContrastPrimary: 'rgb(249, 249, 250)',
  // Used as the background color for the hover state on rows or items on list-like components.
  colorBackgroundRowHover: 'rgb(249, 249, 250)',
  colorForegroundPrimary: 'rgb(255, 255, 255)',
  // 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)',
  // The color of the mask overlay that appears when you enter a modal state.
  colorBackgroundTempModalTint: 'rgba(126, 140, 153, 0.8)',
  // 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)',
  // Alternative background color for dark portions of the app.
  colorBackgroundAltInverse: 'rgb(22, 50, 92)',
  // Disabled input
  colorBackgroundInputDisabled: 'rgb(233, 234, 236)',
  // Used as the background color for the new state on rows or items on list-like components.
  colorBackgroundRowNew: 'rgb(217, 255, 223)',
  // Hovered toggle background color.
  colorBackgroundToggleHover: 'rgb(145, 146, 151)',
  // Dark color for UI elements that have to do with success. Accessible with white text.
  colorBackgroundSuccessDark: 'rgb(4, 132, 75)',
  // Background color for reminder notification
  colorBackgroundReminder: 'rgb(244, 246, 249)',
  // Used as background for loading stencils on white background.
  colorBackgroundStencil: 'rgb(242, 242, 243)',
  // Used when further differentiation is needed because colorBackground and colorBackgroundAlt are both being used in close proximity.
  colorBackgroundAlt2: 'rgb(242, 242, 243)',
  // Color for UI elements that have to do with warning.
  colorBackgroundWarning: 'rgb(255, 183, 93)',
  // Hovered background color for success buttons
  colorBackgroundButtonSuccessHover: 'rgb(4, 132, 75)',
  // Hover color for utility bar item.
  colorBackgroundUtilityBarHover: 'rgb(233, 234, 236)',
  // Background color for highlighting text in search results.
  colorBackgroundHighlightSearch: 'rgb(255, 240, 63)',
  // Toggle background color.
  colorBackgroundToggle: 'rgb(171, 173, 176)',
  // 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)',
  // Background color for success buttons
  colorBackgroundButtonSuccess: 'rgb(75, 202, 129)',
  // The color of the mask overlay that appears when you enter a modal state.
  colorBackgroundBackdrop: 'rgba(255, 255, 255, 0.75)',
  // Our product brand blue.
  colorBrand: 'rgb(21, 137, 238)',
  // Background color for default desktop chrome (ex. global header)
  colorBackgroundChromeDesktop: 'rgb(255, 255, 255)',
  // Active button backgrounds on modal headers
  colorBackgroundModalButtonActive: 'rgba(0, 0, 0, 0.16)',
  // Color for UI elements related to destructive actions.
  colorBackgroundDestructive: 'rgb(194, 57, 52)',
  // 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)',
  // Color for UI elements that have to do with success.
  colorBackgroundSuccess: 'rgb(75, 202, 129)',
  // 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)',
  colorBackgroundBrandPrimaryFocus: 'rgb(0, 95, 178)',
  // Color for UI elements related to the offline state.
  colorBackgroundOffline: 'rgb(62, 64, 65)',
  // The color of the mask overlay that provides user feedback on interaction.
  colorBackgroundBackdropTint: 'rgb(249, 249, 250)',
  colorBackgroundBrandPrimaryActive: 'rgb(0, 57, 107)',
  // Selected input field (when user has clicked or tabbed into field)
  colorBackgroundInputActive: 'rgb(255, 255, 255)',
  // Used as an alternate background for loading stencils on gray backgrounds.
  colorBackgroundStencilAlt: 'rgb(233, 234, 236)',
  // 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)',
  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)',
  // 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)',
  colorContrastSecondary: 'rgb(255, 255, 255)',
  // Secondary top bar background color (child browser, file preview, etc.)
  colorBackgroundBrowser: 'rgb(107, 109, 112)',
  // Second default background color for the app.
  colorBackgroundAlt: 'rgb(255, 255, 255)',
  // Background color of comment posts in the feed.
  colorBackgroundPost: 'rgb(249, 249, 250)',
  colorBackgroundBrandPrimary: 'rgb(0, 112, 210)',
  // Used as the background color for selected rows or items on list-like components.
  colorBackgroundRowSelected: 'rgb(233, 234, 236)',
  // 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)',
  // Our product brand blue, darkened even further.
  colorBrandDarker: 'rgb(0, 95, 178)',
  // Used as the default background color for temporary dialog elements, such as the progress spinner background.
  colorBackgroundTempModal: 'rgba(126, 140, 153, 0.8)',
  // Background color for text selected with a mouse.
  colorBackgroundSelection: 'rgb(216, 237, 255)',
  // Used as gray background when more contrast is desired.
  colorBackgroundShade: 'rgb(233, 234, 236)',
  // Standard modal header
  colorBackgroundModal: 'rgb(255, 255, 255)',
  // Active color for UI elements related to destructive actions.
  colorBackgroundDestructiveActive: 'rgb(135, 5, 0)',
  // Hovered active toggle background color.
  colorBackgroundToggleActiveHover: 'rgb(0, 95, 178)',
  // Background color for payloads in the feed.
  colorBackgroundPayload: 'rgb(249, 249, 250)',
  // Button backgrounds on modal headers
  colorBackgroundModalButton: 'rgba(0, 0, 0, 0.07)',
  // Active color for utility bar item.
  colorBackgroundUtilityBarActive: 'rgb(21, 137, 238)',
  // Active background color for success buttons
  colorBackgroundButtonSuccessActive: 'rgb(4, 132, 75)',
  // Background color for error toast messaging.
  colorBackgroundToastError: 'rgb(194, 57, 52)',
  // Stage left org switcher dropdown arrow background color.
  colorBackgroundOrgSwitcherArrow: 'rgb(6, 28, 63)',
  // Default background color for dark portions of the app (like Stage Left or tooltips).
  colorBackgroundInverse: '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)',
  // 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)',
  // Background color for highlighting UI elements.
  colorBackgroundHighlight: 'rgb(250, 255, 189)',
  colorBackgroundSecondary: 'rgb(249, 249, 250)',
  // 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',
  // Custom glow for focus states on UI elements with explicit containers.
  shadowButtonFocus: '0 0 3px #0070D2',
  // Deprecated
  elevationInverseShadow8: '0 -8px 8px 0 rgba(0, 0, 0, 0.16)',
  // Shadow for header.
  shadowHeader: '0 2px 4px rgba(0, 0, 0, 0.07)',
  // Soft dropshadow found on general UI elements such as containers
  shadowSoftPrimary: 'none',
  // Deprecated
  elevationInverseShadow32: '0 -32px 32px 0 rgba(0, 0, 0, 0.16)',
  // Hard dropshadow found on general UI elements such as containers
  shadowHardPrimary: 'none',
  // Shadow above overflow menu close bar.
  shadowActionOverflowFooter: '0 -2px 4px #F9F9FA',
  // Deprecated
  elevation0: '0',
  // Deprecated
  elevation3Inset: '-3',
  // Deprecated
  elevation2: '2',
  // Shadow for overlays.
  shadowOverlay: '0 -2px 4px rgba(0, 0, 0, 0.07)',
  // Shadow for notifications that should be elevated above other components but under modals.
  shadowReminder: '0 2px 3px 0 rgba(0, 0, 0, 0.20)',
  // Shadow on elements that are docked to the bottom of the viewport.
  shadowDocked: '0 -2px 2px 0 rgba(0, 0, 0, 0.16)',
  // Shadow for buttons.
  shadowButton: '0 1px 1px 0 rgba(0, 0, 0, 0.05)',
  // Shadow to make inline edit card pop out.
  shadowInlineEdit: '0 2px 4px 4px rgba(0, 0, 0, 0.16)',
  // Deprecated
  elevation4: '4',
  // Deprecated
  elevationShadow0: 'none',
  // Shadow for drag-n-drop.
  shadowDrag: '0 2px 4px 0 rgba(0, 0, 0, 0.40)',
  // Deprecated
  elevationInverseShadow16: '0 -16px 16px 0 rgba(0, 0, 0, 0.16)',
  // Shadow for drop down.
  shadowDropDown: '0 2px 3px 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)',
  // Custom glow for focus states on UI elements with explicit containers on dark or vibrantly colored backgrounds.
  shadowButtonFocusInverse: '0 0 3px #E9EAEC',
  // 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)',
  // Icon color on dark background
  colorTextIconInverse: 'rgb(255, 255, 255)',
  // Action label text color
  colorTextActionLabel: 'rgb(107, 109, 112)',
  // Link color on dark background
  colorTextLinkInverse: '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)',
  // Link color on dark background - active state
  colorTextLinkInverseActive: 'rgba(255, 255, 255, 0.5)',
  // Action label active text color
  colorTextActionLabelActive: 'rgb(22, 50, 92)',
  // 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)',
  // Color for texts or icons that are related to warnings on a dark background.
  colorTextWarning: 'rgb(255, 183, 93)',
  // 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)',
  // Tertiary body text color
  colorTextTertiary: 'rgb(107, 109, 112)',
  // Focus link text
  colorTextLinkFocus: 'rgb(0, 95, 178)',
  // Text color for default secondary button
  colorTextButtonDefault: 'rgb(0, 112, 210)',
  // Default icon color - disabled state
  colorTextIconDefaultDisabled: 'rgb(217, 219, 221)',
  // Disabled link text
  colorTextLinkDisabled: 'rgb(22, 50, 92)',
  // Body text color
  colorTextDefault: 'rgb(22, 50, 92)',
  // 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)',
  // Primary body text color
  colorTextPrimary: 'rgb(22, 50, 92)',
  colorTextLinkPrimaryFocus: 'rgb(0, 112, 210)',
  // Text color for brandable primary button - hover state
  colorTextButtonBrandHover: 'rgb(255, 255, 255)',
  // Hover link text
  colorTextLinkHover: 'rgb(0, 95, 178)',
  // Color for text in focus state in a tab group.
  colorTextTabLabelFocus: 'rgb(0, 95, 178)',
  // Text color for success text.
  colorTextSuccess: 'rgb(2, 128, 72)',
  // Color for text that is purposefully de-emphasized to create visual hierarchy.
  colorTextWeak: 'rgb(107, 109, 112)',
  // 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)',
  // Text color for pills.
  colorTextPill: 'rgb(0, 112, 210)',
  colorTextLinkPrimaryHover: 'rgb(0, 112, 210)',
  // 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)',
  // 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)',
  // Default icon color.
  colorTextIconDefault: 'rgb(107, 109, 112)',
  // Our product brand blue.
  colorTextBrand: 'rgb(21, 137, 238)',
  // 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 text on toast messages.
  colorTextToast: 'rgb(233, 234, 236)',
  // Color for disabled toggles
  colorTextToggleDisabled: 'rgb(217, 219, 221)',
  // Top bar icon color
  colorTextBrowser: 'rgb(255, 255, 255)',
  colorTextLinkPrimaryActive: 'rgb(0, 57, 107)',
  // Error text for inputs and error misc
  colorTextError: 'rgb(194, 57, 52)',
  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)',
  // Customer text used in anchor subtitle
  colorTextCustomer: 'rgb(255, 154, 60)',
  // Default icon color - active state.
  colorTextIconDefaultActive: 'rgb(0, 57, 107)',
  // Text color found on any primary brand color
  colorTextBrandPrimary: 'rgb(255, 255, 255)',
  // Active link text
  colorTextLinkActive: '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 of required field marker.
  colorTextRequired: 'rgb(194, 57, 52)',
  // 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)',
  // Modal header title
  colorTextModal: '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.
  colorTextButtonInverse: 'rgb(233, 234, 236)',
  // Modal header button text color
  colorTextModalButton: 'rgb(107, 109, 112)',
  // 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)',
  // 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)',
  // Input placeholder text.
  colorTextPlaceholder: 'rgb(107, 109, 112)',
  // Weak inverse text color for dark backgrounds
  colorTextInverseWeak: 'rgb(171, 173, 176)',
  // Secondary body text color
  colorTextSecondary: 'rgb(107, 109, 112)',
  // Typed input text
  colorTextInputFocusInverse: 'rgb(22, 50, 92)',
  // Text in stage left navigation.
  colorTextStageLeft: 'rgb(233, 234, 236)',
  // 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)',
  // Default value for text-transform
  textTransform: 'none',
  // 50% transparency of an element
  opacity5: '0.5',
  // 80% transparency of an element
  opacity8: '0.8',
  // 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',
  // 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',
  bannerUserDefaultImage: '',
  bannerGroupDefaultImage: '',
  userDefaultAvatar: '',
  userDefaultAvatarMedium: '',
  userDefaultAvatarSmall: '',
  groupDefaultAvatar: '',
  groupDefaultAvatarMedium: '',
  groupDefaultAvatarSmall: '',
  // 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)',
  // 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)',
  // 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',
  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)',
  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',
  tableColorBackgroundStripes: 'rgb(250, 250, 249)',
  tableColorBackgroundHeader: 'rgb(255, 255, 255)',
  tableColorBackgroundHeaderHover: 'rgb(250, 250, 249)',
  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)',
  // 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',
  einsteinHeaderBackgroundColor: 'rgb(149, 203, 252)',
  // Text shadow color for Einstein header background to make text more readable
  einsteinHeaderTextShadow: '#9EDAFF',
  formLabelFontSize: '0.75rem',
  // Global Header background color
  globalHeaderColorBackground: 'rgb(255, 255, 255)',
  brandLogoImage: '/assets/images/logo.svg',
  // Global identity icon size.
  squareIconGlobalIdentityIcon: '1.25rem',
  // Hovered context bar item background color.
  colorBackgroundContextBarItemHover: 'rgb(255, 255, 255)',
  // Active context bar item background color.
  colorBackgroundContextBarItemActive: 'rgb(255, 255, 255)',
  // Default context bar background color.
  colorBackgroundContextBar: 'rgb(255, 255, 255)',
  // Context TAB bar item background color.
  colorBackgroundContextTabBarItem: 'rgb(255, 255, 255)',
  // Hovered context bar item background color.
  colorBackgroundContextBarInverseItemHover: 'rgba(255, 255, 255, 0.2)',
  // A Gradient used for putting shadows on the bottom when box-shadow is not possible.
  colorBackgroundContextBarShadow: 'linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0, rgba(0, 0, 0, 0) 100%)',
  // Active context bar item background color.
  colorBackgroundContextBarInverseItemActive: 'rgba(255, 255, 255, 0.4)',
  // Brand color in context bar for default theme
  colorBackgroundContextBarBrandAccent: 'rgb(0, 161, 223)',
  // Highlight for context bar action (hover and focus states).
  colorBackgroundContextBarActionHighlight: 'rgba(255, 255, 255, 0.2)',
  // Divider in context bar
  colorBorderContextBarDivider: 'rgba(255, 255, 255, 0.2)',
  // Border color in context bar
  colorBorderContextBarItem: 'rgba(0, 0, 0, 0.2)',
  // Border color in context bar on dark background
  colorBorderContextBarInverseItem: 'rgba(255, 255, 255, 0.2)',
  // Border color in context bar for default theme
  colorBorderContextBarThemeDefault: 'rgb(0, 161, 223)',
  // Alternate border color in context bar for default theme
  colorBorderContextBarThemeDefaultAlt: 'rgb(243, 242, 242)',
  // Hovered border color in context bar for default theme
  colorBorderContextBarThemeDefaultHover: 'rgb(11, 35, 153)',
  // Active border color in context bar for default theme
  colorBorderContextBarThemeDefaultActive: 'rgb(243, 242, 242)',
  // Context bar height.
  heightContextBar: '2.5rem',
  // Context bar text color
  colorTextContextBar: 'rgb(112, 110, 107)',
  // Context bar text color on a dark background
  colorTextContextBarInverse: 'rgb(255, 255, 255)',
  // Context bar action trigger text color
  colorTextContextBarActionTrigger: 'rgba(255, 255, 255, 0.4)',
  // Primary color for illustrations
  illustrationColorPrimary: 'rgb(140, 211, 248)',
  // Secondary color for illustrations
  illustrationColorSecondary: 'rgb(194, 232, 255)',
  inputStaticFontSize: '.8125rem',
  inputStaticFontWeight: '400',
  inputReadonlyFontWeight: '400',
  inputStaticColor: 'rgb(43, 40, 38)',
  // Default Page Header background color
  pageHeaderColorBackground: 'rgb(250, 250, 249)',
  // Secondary Page Header background color
  pageHeaderColorBackgroundAlt: 'rgb(255, 255, 255)',
  // Use COLOR_BACKGROUND_PAGE_HEADER instead.
  colorBackgroundAnchor: 'rgb(250, 250, 249)',
  // Page Header background color
  colorBackgroundPageHeader: 'rgb(255, 255, 255)',
  pageHeaderColorBorder: 'rgba(0, 0, 0, 0)',
  pageHeaderJoinedColorBorder: 'rgb(221, 219, 218)',
  pageHeaderBorderRadius: '0',
  pageHeaderShadow: 'none',
  pageHeaderTitleFontSize: '1.125rem',
  pageHeaderTitleFontWeight: '400',
  //
  pageHeaderSpacingMargin: '0',
  //
  pageHeaderSpacingPadding: '1rem',
  //
  pageHeaderSpacingRow: '0.75rem 1rem',
  // Dropshadow found on docked UI panels when positioned to the left of a viewport
  panelDockedLeftShadow: '1px 0 3px rgba(0,0,0,0.25)',
  // Dropshadow found on docked UI panels when positioned to the left of a viewport
  panelDockedRightShadow: '-1px 0 3px 0 rgba(0,0,0,0.25)',
  // The hover background color for Salespath stages that have not been completed.
  colorBackgroundPathIncompleteHover: 'rgb(221, 219, 218)',
  // The background color for the step action arrow that are the active stage
  colorBackgroundPathStepActionActive: 'rgb(6, 28, 63)',
  // The background color for Salespath stages that have not been completed.
  colorBackgroundPathIncomplete: 'rgb(236, 235, 234)',
  // The hovered background color for Salespath stages that are complete.
  colorBackgroundPathActiveHover: 'rgb(22, 50, 92)',
  // The background color for the final stage of a Salespath when it has been lost.
  colorBackgroundPathLost: 'rgb(194, 57, 52)',
  // The background color for Salespath stages that are active.
  colorBackgroundPathActive: 'rgb(6, 28, 63)',
  // The background color for Salespath guidance coaching section.
  colorBackgroundGuidance: 'rgb(255, 255, 255)',
  // The background color for the final stage of a Salespath when it has been lost.
  colorBackgroundPathWon: 'rgb(75, 202, 129)',
  // The hover background color for Salespath stages that are the current stage.
  colorBackgroundPathCurrentHover: 'rgb(0, 95, 178)',
  // The background color for Salespath stages that are the current stage.
  colorBackgroundPathCurrent: 'rgb(0, 112, 210)',
  // The hover background color for Salespath stages that are complete.
  colorBackgroundPathCompleteHover: 'rgb(4, 132, 75)',
  // The background color for Salespath stages that are complete.
  colorBackgroundPathComplete: 'rgb(75, 202, 129)',
  // The background color for the step action arrow that are the current stage
  colorBackgroundPathStepActionCurrent: 'rgb(0, 112, 210)',
  // The background color for the overall Salespath coaching section.
  colorBackgroundPathExpanded: 'rgb(255, 255, 255)',
  // Used as a separator between dark colors like the stages of salespath.
  colorBorderPathDivider: 'rgb(255, 255, 255)',
  // Line heights for salespath
  lineHeightSalespath: '1.5rem',
  // Height of Salespath
  heightSalesPath: '2rem',
  // Width of action button to right
  pathButtonWidthFixed: '13rem',
  // The default background color for Popover Walkthrough
  popoverWalkthroughColorBackground: 'rgb(6, 28, 63)',
  // The default background color for Popover Walkthrough Header
  popoverWalkthroughHeaderColorBackground: 'rgb(22, 50, 92)',
  // The default background color for alternative Popover Walkthrough
  popoverWalkthroughColorBackgroundAlt: 'rgb(0, 112, 210)',
  popoverWalkthroughHeaderImage: '',
  popoverWalkthroughAltImage: '',
  // The background color for nubbins on the bottom of alternate walkthrough popovers
  popoverWalkthroughAltNubbinColorBackground: 'rgb(0, 112, 210)',
  // Text color