@salesforce-ux/design-system/design-tokens/dist/force-base.common.js

Salesforce Lightning Design System

module.exports = {
  borderWidthThin: "1px",
  borderWidthThick: "2px",
  borderStrokeWidthThin: "1px",
  borderStrokeWidthThick: "2px",
  spacingNone: "0",
  spacingXxxSmall: "0.125rem",
  spacingXxSmall: "0.25rem",
  spacingXSmall: "0.5rem",
  spacingSmall: "0.75rem",
  spacingMedium: "1rem",
  spacingLarge: "1.5rem",
  spacingXLarge: "2rem",
  spacingXxLarge: "3rem",
  // Generic sizing token scale for UI components.
  sizeXxSmall: "6rem",
  // Generic sizing token scale for UI components.
  sizeXSmall: "12rem",
  // Generic sizing token scale for UI components.
  sizeSmall: "15rem",
  // Generic sizing token scale for UI components.
  sizeMedium: "20rem",
  // Generic sizing token scale for UI components.
  sizeLarge: "25rem",
  // Generic sizing token scale for UI components.
  sizeXLarge: "40rem",
  // Generic sizing token scale for UI components.
  sizeXxLarge: "60rem",
  // Small utility icon without border.
  squareIconUtilitySmall: "1rem",
  // Medium utility icon without border.
  squareIconUtilityMedium: "1.25rem",
  // Large utility icon without border.
  squareIconUtilityLarge: "1.5rem",
  // Anchor: Outer colored tile
  squareIconLargeBoundary: "3rem",
  // Anchor: avatar
  squareIconLargeBoundaryAlt: "5rem",
  // Anchor: Icon content (white shape)
  squareIconLargeContent: "2rem",
  // Use squareIconMediumBoundary
  squareIconMedium: "2.375rem",
  // Stage left & actions: Outer colored tile
  squareIconMediumBoundary: "2rem",
  // Icon button boundary.
  squareIconMediumBoundaryAlt: "2.25rem",
  // Stage left & actions: Icon content (white shape)
  squareIconMediumContent: "1rem",
  // Alternate medium tap target size
  squareIconMediumContentAlt: "0.875rem",
  // Small tap target size
  squareIconSmall: "1rem",
  // Search Results: Outer colored tile
  squareIconSmallBoundary: "1.5rem",
  // Search Results: Icon content (white shape)
  squareIconSmallContent: ".75rem",
  // Very small icon button boundary.
  squareIconXSmallBoundary: "1.25rem",
  // Very small icons in icon buttons.
  squareIconXSmallContent: ".5rem",
  // Very very small icon button boundary.
  squareIconXxSmallBoundary: "1rem",
  // Very small icons to replace force font with temporary override.
  squareIconXxSmallContent: ".875rem",
  // Large tap target size.
  squareIconLarge: "3.125rem",
  // Minimum height of a pill.
  heightPill: "1.625rem",
  // 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(159, 170, 181)",
  // Hovered header button icon color
  fillHeaderButtonHover: "rgb(0, 95, 178)",
  // Use for large headings only.
  fontWeightLight: "300",
  // Most all body copy.
  fontWeightRegular: "400",
  // Used sparingly for emphasized text within regular body copy.
  fontWeightBold: "700",
  fontSizeXSmall: "0.625rem",
  fontSizeSmall: "0.875rem",
  fontSizeMedium: "1rem",
  fontSizeMediumA: "1.125rem",
  fontSizeLarge: "1.25rem",
  fontSizeXLarge: "1.5rem",
  fontSizeXLargeA: "1.57rem",
  fontSizeXxLarge: "2rem",
  // Extra extra small text.
  fontSizeTextXxSmall: ".625rem",
  // Extra small body text.
  fontSizeTextXSmall: ".75rem",
  // Small body text.
  fontSizeTextSmall: ".8125rem",
  // Medium body text.
  fontSizeTextMedium: "1rem",
  // Large body text.
  fontSizeTextLarge: "1.125rem",
  // Extra large body text.
  fontSizeTextXLarge: "1.25rem",
  // Extra Extra small headings.
  fontSizeHeadingXxSmall: ".625rem",
  // Extra small headings.
  fontSizeHeadingXSmall: ".75rem",
  // Small headings.
  fontSizeHeadingSmall: ".875rem",
  // Medium headings.
  fontSizeHeadingMedium: "1.125rem",
  // Large headings.
  fontSizeHeadingLarge: "1.5rem",
  // Extra large headings.
  fontSizeHeadingXLarge: "2rem",
  // 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",
  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%",
  // Default border color for UI elements.
  colorBorder: "rgb(216, 221, 230)",
  // Our product brand blue.
  colorBorderBrand: "rgb(21, 137, 238)",
  // 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 the concept of an external user or customer.
  colorBorderCustomer: "rgb(255, 154, 60)",
  // Border color for UI elements that have to do with destructive actions.
  colorBorderDestructive: "rgb(194, 57, 52)",
  // Hover border color for UI elements that have to do with destructive actions.
  colorBorderDestructiveHover: "rgb(166, 26, 20)",
  // Active border color for UI elements that have to do with destructive actions.
  colorBorderDestructiveActive: "rgb(135, 5, 0)",
  // Border color for UI elements related to providing neutral information (not error, success, or warning).
  colorBorderInfo: "rgb(84, 105, 141)",
  // Border color for UI elements that have to do with errors.
  colorBorderError: "rgb(194, 57, 52)",
  // Alternative border color for UI elements related to errors.
  colorBorderErrorAlt: "rgb(234, 130, 136)",
  // Dark alternative border color for UI elements related to errors.
  colorBorderErrorDark: "rgb(234, 130, 136)",
  // Border color for UI elements related to the offline state.
  colorBorderOffline: "rgb(68, 68, 68)",
  // Border color for UI elements that have to do with success.
  colorBorderSuccess: "rgb(75, 202, 129)",
  // 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 warnings.
  colorBorderWarning: "rgb(255, 183, 93)",
  // Border color to match UI elements using color-background-inverse.
  colorBorderInverse: "rgb(6, 28, 63)",
  // Border color for a selected tab in a tab group.
  colorBorderTabSelected: "rgb(0, 112, 210)",
  // Border color for an active tab.
  colorBorderTabActive: "rgb(255, 255, 255)",
  // Lightest separator color - used as default separator on white backgrounds.
  colorBorderSeparator: "rgb(244, 246, 249)",
  // Medium separator color - used as default separator on light gray backgrounds.
  colorBorderSeparatorAlt: "rgb(216, 221, 230)",
  // Darkest separator color - used as an alternate separator color when more differentiation is desired.
  colorBorderSeparatorAlt2: "rgb(168, 183, 199)",
  // Used as a separator on dark backgrounds, such as stage left navigation.
  colorBorderSeparatorInverse: "rgb(42, 66, 108)",
  // Used as the border color for selected rows or items on list-like components.
  colorBorderRowSelected: "rgb(0, 112, 210)",
  // Used as the border color for the hover state on selected rows or items on list-like components.
  colorBorderRowSelectedHover: "rgb(21, 137, 238)",
  // Used to delineate the boundary of a specific region. Specific to builders.
  colorBorderHint: "rgb(42, 66, 108)",
  // Used to delineate the boundary of a selected component. Specific to builders.
  colorBorderSelection: "rgb(0, 112, 210)",
  // Used to delineate the boundary of a component that is being hovered over. Specific to builders.
  colorBorderSelectionHover: "rgb(21, 137, 238)",
  // Used to delineate the boundary of a component that is being clicked. Specific to builders.
  colorBorderSelectionActive: "rgb(244, 246, 249)",
  // Used to delineate the boundary of a selected canvas element. Specific to builders.
  colorBorderCanvasElementSelection: "rgb(94, 180, 255)",
  // Used to delineate the boundary of a selected canvas element that is being hovered over. Specific to builders.
  colorBorderCanvasElementSelectionHover: "rgb(0, 95, 178)",
  // 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)",
  // 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 brandable primary button
  colorBorderButtonBrand: "rgb(0, 112, 210)",
  // Border color for brandable primary button - disabled state
  colorBorderButtonBrandDisabled: "rgba(0, 0, 0, 0)",
  // Border color for default secondary button
  colorBorderButtonDefault: "rgb(216, 221, 230)",
  // Border color for disabled inverse button.
  colorBorderButtonInverseDisabled: "rgba(255, 255, 255, 0.15)",
  // Border color on form elements.
  colorBorderInput: "rgb(216, 221, 230)",
  // Border color on active form elements.
  colorBorderInputActive: "rgb(21, 137, 238)",
  // Border color on disabled form elements.
  colorBorderInputDisabled: "rgb(168, 183, 199)",
  // The borders to create the checkmark
  colorBorderInputCheckboxSelectedCheckmark: "rgb(255, 255, 255)",
  // These borders create the faux checkmark when the checkbox toggle is in the checked state.
  colorBorderToggleChecked: "rgb(255, 255, 255)",
  // Our product brand blue.
  colorStrokeBrand: "rgb(0, 112, 210)",
  // Hover stroke color for our product brand blue.
  colorStrokeBrandHover: "rgb(0, 112, 210)",
  // Active stroke color for our product brand blue.
  colorStrokeBrandActive: "rgb(22, 50, 92)",
  // Disabled stroke color.
  colorStrokeDisabled: "rgb(224, 229, 238)",
  // Stroke color for our global header buttons.
  colorStrokeHeaderButton: "rgb(159, 170, 181)",
  // Default background color for the whole app.
  colorBackground: "rgb(244, 246, 249)",
  // Second default background color for the app.
  colorBackgroundAlt: "rgb(253, 253, 253)",
  // Used when further differentiation is needed because colorBackground and colorBackgroundAlt are both being used in close proximity.
  colorBackgroundAlt2: "rgb(238, 241, 246)",
  // Alternative background color for dark portions of the app.
  colorBackgroundAltInverse: "rgb(22, 50, 92)",
  // Used as the background color for the hover state on rows or items on list-like components.
  colorBackgroundRowHover: "rgb(244, 246, 249)",
  // Used as the background color for the active state on rows or items on list-like components.
  colorBackgroundRowActive: "rgb(238, 241, 246)",
  // Used as the background color for selected rows or items on list-like components.
  colorBackgroundRowSelected: "rgb(240, 248, 252)",
  // Used as the background color for the new state on rows or items on list-like components.
  colorBackgroundRowNew: "rgb(217, 255, 223)",
  // Default background color for dark portions of the app (like Stage Left or tooltips).
  colorBackgroundInverse: "rgb(6, 28, 63)",
  // Secondary top bar background color (child browser, file preview, etc.)
  colorBackgroundBrowser: "rgb(84, 105, 141)",
  // Background color for default mobile chrome (ex. global header)
  colorBackgroundChromeMobile: "rgb(0, 112, 210)",
  // Background color for default desktop chrome (ex. global header)
  colorBackgroundChromeDesktop: "rgb(255, 255, 255)",
  // Background color for UI elements related to the concept of an external user or customer.
  colorBackgroundCustomer: "rgb(255, 154, 60)",
  // Background color for highlighting UI elements.
  colorBackgroundHighlight: "rgb(250, 255, 189)",
  // Background color for highlighting text in search results.
  colorBackgroundHighlightSearch: "rgb(255, 240, 63)",
  // Background color for text selected with a mouse.
  colorBackgroundSelection: "rgb(216, 237, 255)",
  // Background for utility icons that live in the action bar on mobile.
  colorBackgroundActionbarIconUtility: "rgb(84, 105, 141)",
  // Color of the indicator dot.
  colorBackgroundIndicatorDot: "rgb(22, 50, 92)",
  // Color of the spinner dot.
  colorBackgroundSpinnerDot: "rgb(159, 170, 181)",
  // Standard modal header
  colorBackgroundModal: "rgb(255, 255, 255)",
  // Brandable modal header
  colorBackgroundModalBrand: "rgb(0, 112, 210)",
  // Notifications badge background color.
  colorBackgroundNotificationBadge: "rgb(194, 57, 52)",
  // Notifications badge background color.
  colorBackgroundNotificationBadgeHover: "rgb(0, 95, 178)",
  // Notifications badge background color.
  colorBackgroundNotificationBadgeFocus: "rgb(0, 95, 178)",
  // Notifications badge background color.
  colorBackgroundNotificationBadgeActive: "rgb(0, 57, 107)",
  // Background color for notification list item.
  colorBackgroundNotification: "rgb(255, 255, 255)",
  // Background color for a new notification list item.
  colorBackgroundNotificationNew: "rgb(240, 248, 252)",
  // Stage left org switcher dropdown arrow background color.
  colorBackgroundOrgSwitcherArrow: "rgb(6, 28, 63)",
  // Background color for payloads in the feed.
  colorBackgroundPayload: "rgb(244, 246, 249)",
  // Background color of comment posts in the feed.
  colorBackgroundPost: "rgb(247, 249, 251)",
  // Hover color for utility bar item.
  colorBackgroundUtilityBarHover: "rgb(224, 229, 238)",
  // Active color for utility bar item.
  colorBackgroundUtilityBarActive: "rgb(21, 137, 238)",
  // Used as gray background when more contrast is desired.
  colorBackgroundShade: "rgb(224, 229, 238)",
  // Used as gray background in conjunction with Shade when more contrast is desired.
  colorBackgroundShadeDark: "rgb(216, 221, 230)",
  // Used as background for loading stencils on white background.
  colorBackgroundStencil: "rgb(238, 241, 246)",
  // Used as an alternate background for loading stencils on gray backgrounds.
  colorBackgroundStencilAlt: "rgb(224, 229, 238)",
  // Used as the default background color for temporary dialog elements, such as the progress spinner background.
  colorBackgroundTempModal: "rgba(126, 140, 153, 0.8)",
  // The color of the mask overlay that appears when you enter a modal state.
  colorBackgroundTempModalTint: "rgba(126, 140, 153, 0.8)",
  // The color of the mask overlay that appears when you enter a modal state.
  colorBackgroundTempModalTintAlt: "rgba(255, 255, 255, 0.75)",
  // The color of the mask overlay that appears when you enter a modal state.
  colorBackgroundBackdrop: "rgba(255, 255, 255, 0.75)",
  // The color of the mask overlay that provides user feedback on interaction.
  colorBackgroundBackdropTint: "rgba(240, 248, 252, 0.75)",
  // The background color of an internal scrollbar.
  colorBackgroundScrollbar: "rgb(224, 229, 238)",
  // The background color of an internal scrollbar track.
  colorBackgroundScrollbarTrack: "rgb(168, 183, 199)",
  // Our product brand blue.
  colorBrand: "rgb(21, 137, 238)",
  // Our product brand blue, darkened to meet accessibility color contrast ratios with white text.
  colorBrandDark: "rgb(0, 112, 210)",
  // Our product brand blue, darkened even further.
  colorBrandDarker: "rgb(0, 95, 178)",
  // Toggle background color.
  colorBackgroundToggle: "rgb(159, 170, 181)",
  // Disabled toggle background color.
  colorBackgroundToggleDisabled: "rgb(159, 170, 181)",
  // Hovered toggle background color.
  colorBackgroundToggleHover: "rgb(126, 140, 153)",
  // Active toggle background color.
  colorBackgroundToggleActive: "rgb(0, 112, 210)",
  // Hovered active toggle background color.
  colorBackgroundToggleActiveHover: "rgb(0, 95, 178)",
  // Button backgrounds on modal headers
  colorBackgroundModalButton: "rgba(0, 0, 0, 0.07)",
  // Active button backgrounds on modal headers
  colorBackgroundModalButtonActive: "rgba(0, 0, 0, 0.16)",
  // Default input field
  colorBackgroundInput: "rgb(255, 255, 255)",
  // Selected input field (when user has clicked or tabbed into field)
  colorBackgroundInputActive: "rgb(255, 255, 255)",
  // Default checkboxes
  colorBackgroundInputCheckbox: "rgb(255, 255, 255)",
  // Disabled checkboxes
  colorBackgroundInputCheckboxDisabled: "rgb(216, 221, 230)",
  // Selected checkboxes
  colorBackgroundInputCheckboxSelected: "rgb(21, 137, 238)",
  // Disabled input
  colorBackgroundInputDisabled: "rgb(224, 229, 238)",
  // Background color for input field that has encountered an error.
  colorBackgroundInputError: "rgb(255, 221, 225)",
  // Background color for search input fields.
  colorBackgroundInputSearch: "rgba(0, 0, 0, 0.16)",
  // Background color for pills.
  colorBackgroundPill: "rgb(255, 255, 255)",
  // Color of mask overlay that sits on top of an image when text is present.
  colorBackgroundImageOverlay: "rgba(0, 0, 0, 0.4)",
  // Color for UI elements related to destructive actions.
  colorBackgroundDestructive: "rgb(194, 57, 52)",
  // Hover color for UI elements related to destructive actions.
  colorBackgroundDestructiveHover: "rgb(166, 26, 20)",
  // Active color for UI elements related to destructive actions.
  colorBackgroundDestructiveActive: "rgb(135, 5, 0)",
  // Background color for UI elements related to providing neutral information (not error, success, or warning).
  colorBackgroundInfo: "rgb(84, 105, 141)",
  // Color for UI elements related to errors.
  colorBackgroundError: "rgb(212, 80, 76)",
  // Dark color for UI elements related to errors. Accessible with white text.
  colorBackgroundErrorDark: "rgb(194, 57, 52)",
  // Alternative color for UI elements related to errors.
  colorBackgroundErrorAlt: "rgb(234, 130, 136)",
  // Color for UI elements related to the offline state.
  colorBackgroundOffline: "rgb(68, 68, 68)",
  // 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 success. Accessible with white text.
  colorBackgroundSuccessDark: "rgb(4, 132, 75)",
  // Background color for toast messaging.
  colorBackgroundToast: "rgba(84, 105, 141, 0.95)",
  // Background color for success toast messaging.
  colorBackgroundToastSuccess: "rgb(4, 132, 75)",
  // Background color for error toast messaging.
  colorBackgroundToastError: "rgba(194, 57, 52, 0.95)",
  // Color for UI elements that have to do with warning.
  colorBackgroundWarning: "rgb(255, 183, 93)",
  // Background color for success buttons
  colorBackgroundButtonSuccess: "rgb(75, 202, 129)",
  // Hovered background color for success buttons
  colorBackgroundButtonSuccessHover: "rgb(4, 132, 75)",
  // Active background color for success buttons
  colorBackgroundButtonSuccessActive: "rgb(4, 132, 75)",
  // Shadow above overflow menu close bar.
  shadowActionOverflowFooter: "0 -2px 4px #F4F6F9",
  // Shadow for overlays.
  shadowOverlay: "0 -2px 4px rgba(0, 0, 0, 0.07)",
  // 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)",
  // Shadow for buttons.
  shadowButton: "0 1px 1px 0 rgba(0, 0, 0, 0.05)",
  // Custom glow for focus states on UI elements with explicit containers.
  shadowButtonFocus: "0 0 3px #0070D2",
  // Custom glow for focus states on UI elements with explicit containers on dark or vibrantly colored backgrounds.
  shadowButtonFocusInverse: "0 0 3px #E0E5EE",
  // Shadow to make inline edit card pop out.
  shadowInlineEdit: "0 2px 4px 4px rgba(0, 0, 0, 0.16)",
  // Inset shadow for editable grid
  shadowFocusInset: "0 0 2px 2px #1589EE inset",
  // Shadow on elements that are docked to the bottom of the viewport.
  shadowDocked: "0 -2px 2px 0 rgba(0, 0, 0, 0.16)",
  // Shadow on images.
  shadowImage: "0 1px 1px rgba(0, 0, 0, 0.16)",
  // Deprecated
  elevation3Inset: "-3",
  // Deprecated
  elevation0: "0",
  // Deprecated
  elevation2: "2",
  // Deprecated
  elevation4: "4",
  // Deprecated
  elevation8: "8",
  // Deprecated
  elevation16: "16",
  // Deprecated
  elevation32: "32",
  // Deprecated
  elevationShadow3Below: "0 3px 3px 0 rgba(0, 0, 0, 0.16) inset",
  // Deprecated
  elevationShadow0: "none",
  // Deprecated
  elevationShadow2: "0 2px 2px 0 rgba(0, 0, 0, 0.16)",
  // Deprecated
  elevationShadow4: "0 4px 4px 0 rgba(0, 0, 0, 0.16)",
  // Deprecated
  elevationShadow8: "0 8px 8px 0 rgba(0, 0, 0, 0.16)",
  // Deprecated
  elevationShadow16: "0 16px 16px 0 rgba(0, 0, 0, 0.16)",
  // Deprecated
  elevationShadow32: "0 32px 32px 0 rgba(0, 0, 0, 0.16)",
  // Deprecated
  elevationInverseShadow3Below: "0 -3px 3px 0 rgba(0, 0, 0, 0.16) inset",
  // 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
  elevationInverseShadow8: "0 -8px 8px 0 rgba(0, 0, 0, 0.16)",
  // Deprecated
  elevationInverseShadow16: "0 -16px 16px 0 rgba(0, 0, 0, 0.16)",
  // Deprecated
  elevationInverseShadow32: "0 -32px 32px 0 rgba(0, 0, 0, 0.16)",
  // Action label text color
  colorTextActionLabel: "rgb(84, 105, 141)",
  // Action label active text color
  colorTextActionLabelActive: "rgb(22, 50, 92)",
  // Our product brand blue.
  colorTextBrand: "rgb(21, 137, 238)",
  // Top bar icon color
  colorTextBrowser: "rgb(255, 255, 255)",
  // Top bar active icon color
  colorTextBrowserActive: "rgba(0, 0, 0, 0.4)",
  // Customer text used in anchor subtitle
  colorTextCustomer: "rgb(255, 154, 60)",
  // Body text color
  colorTextDefault: "rgb(22, 50, 92)",
  // Error text for inputs and error misc
  colorTextError: "rgb(194, 57, 52)",
  // Input disabled text
  colorTextInputDisabled: "rgb(84, 105, 141)",
  // Typed input text
  colorTextInputFocusInverse: "rgb(22, 50, 92)",
  // Input icon
  colorTextInputIcon: "rgb(159, 170, 181)",
  // Inverse text color for dark backgrounds
  colorTextInverse: "rgb(255, 255, 255)",
  // Weak inverse text color for dark backgrounds
  colorTextInverseWeak: "rgb(159, 170, 181)",
  // Active state on a standalone link on a dark background.
  colorTextInverseActive: "rgb(94, 180, 255)",
  // Hover state on a standalone link on a dark background.
  colorTextInverseHover: "rgb(159, 170, 181)",
  // Link text (508)
  colorTextLink: "rgb(0, 112, 210)",
  // Active link text
  colorTextLinkActive: "rgb(0, 57, 107)",
  // Disabled link text
  colorTextLinkDisabled: "rgb(22, 50, 92)",
  // Focus link text
  colorTextLinkFocus: "rgb(0, 95, 178)",
  // Hover link text
  colorTextLinkHover: "rgb(0, 95, 178)",
  // Link color on dark background
  colorTextLinkInverse: "rgb(255, 255, 255)",
  // Link color on dark background - hover state
  colorTextLinkInverseHover: "rgba(255, 255, 255, 0.75)",
  // Link color on dark background - active state
  colorTextLinkInverseActive: "rgba(255, 255, 255, 0.5)",
  // Link color on dark background - disabled state
  colorTextLinkInverseDisabled: "rgba(255, 255, 255, 0.15)",
  // Modal header title
  colorTextModal: "rgb(255, 255, 255)",
  // Modal header button text color
  colorTextModalButton: "rgb(84, 105, 141)",
  // Text in stage left navigation.
  colorTextStageLeft: "rgb(224, 229, 238)",
  // Color for default text in a tab group.
  colorTextTabLabel: "rgb(22, 50, 92)",
  // Color for text on a selected tab in a tab group.
  colorTextTabLabelSelected: "rgb(0, 112, 210)",
  // Color for text in hover state in a tab group.
  colorTextTabLabelHover: "rgb(0, 95, 178)",
  // Color for text in focus state in a tab group.
  colorTextTabLabelFocus: "rgb(0, 95, 178)",
  // Color for text in active state in a tab group.
  colorTextTabLabelActive: "rgb(0, 57, 107)",
  // Color for disabled text in a tab group.
  colorTextTabLabelDisabled: "rgb(224, 229, 238)",
  // Color for text on toast messages.
  colorTextToast: "rgb(224, 229, 238)",
  // Color for texts or icons that are related to warnings on a dark background.
  colorTextWarning: "rgb(255, 183, 93)",
  // Color for texts that are related to warnings on a light background.
  colorTextWarningAlt: "rgb(132, 72, 0)",
  // Color for text that is purposefully de-emphasized to create visual hierarchy.
  colorTextWeak: "rgb(84, 105, 141)",
  // Color for non-interactive icons that represent a selected item in a list
  colorTextIconBrand: "rgb(0, 112, 210)",
  // Color for interactive utility icons
  colorTextIconUtility: "rgb(159, 170, 181)",
  // Color for disabled toggles
  colorTextToggleDisabled: "rgb(216, 221, 230)",
  // Text color for brandable primary button
  colorTextButtonBrand: "rgb(255, 255, 255)",
  // Text color for brandable primary button - hover state
  colorTextButtonBrandHover: "rgb(255, 255, 255)",
  // Text color for brandable primary button - active state
  colorTextButtonBrandActive: "rgb(255, 255, 255)",
  // Text color for brandable primary button - disabled state
  colorTextButtonBrandDisabled: "rgb(255, 255, 255)",
  // Text color for default secondary button
  colorTextButtonDefault: "rgb(0, 112, 210)",
  // Text color for default secondary button - hover state
  colorTextButtonDefaultHover: "rgb(0, 112, 210)",
  // Text color for default secondary button - active state
  colorTextButtonDefaultActive: "rgb(0, 112, 210)",
  // Text color for default secondary button - disabled state
  colorTextButtonDefaultDisabled: "rgb(216, 221, 230)",
  // 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(159, 170, 181)",
  // 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(224, 229, 238)",
  // 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)",
  // Default icon color.
  colorTextIconDefault: "rgb(84, 105, 141)",
  // 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(159, 170, 181)",
  // 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)",
  // 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(224, 229, 238)",
  // Default icon color - hover state.
  colorTextIconDefaultHover: "rgb(0, 112, 210)",
  // Default icon color - active state.
  colorTextIconDefaultActive: "rgb(0, 57, 107)",
  // Default icon color - disabled state
  colorTextIconDefaultDisabled: "rgb(216, 221, 230)",
  // Icon color on dark background
  colorTextIconInverse: "rgb(255, 255, 255)",
  // Icon color on dark background - hover state
  colorTextIconInverseHover: "rgb(255, 255, 255)",
  // Icon color on dark background - active state
  colorTextIconInverseActive: "rgb(255, 255, 255)",
  // Icon color on dark background - disabled state
  colorTextIconInverseDisabled: "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)",
  // Text color for field labels.
  colorTextLabel: "rgb(84, 105, 141)",
  // Input placeholder text.
  colorTextPlaceholder: "rgb(84, 105, 141)",
  // Input placeholder text on dark backgrounds.
  colorTextPlaceholderInverse: "rgb(224, 229, 238)",
  // Color of required field marker.
  colorTextRequired: "rgb(194, 57, 52)",
  // Text color for pills.
  colorTextPill: "rgb(0, 112, 210)",
  // Text color for success text.
  colorTextSuccess: "rgb(2, 128, 72)",
  // Text color for success text on dark backgrounds.
  colorTextSuccessInverse: "rgb(75, 202, 129)",
  // 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",
  // Toasts
  zIndexToast: "10000",
  // Modal
  zIndexModal: "9000",
  // Overlay
  zIndexOverlay: "8000",
  // Dropdown
  zIndexDropdown: "7000",
  // Dialog
  zIndexDialog: "6000",
  // Popup
  zIndexPopup: "5000",
  // Stickied element
  zIndexSticky: "100",
  // Default
  zIndexDefault: "1",
  // Docked element
  zIndexDocked: "4",
  // Deep dive
  zIndexDeepdive: "-99999",
  // Brandable primary button
  colorBackgroundButtonBrand: "rgb(0, 112, 210)",
  // Brandable primary button - active state
  colorBackgroundButtonBrandActive: "rgb(0, 57, 107)",
  // Brandable primary button - hover state
  colorBackgroundButtonBrandHover: "rgb(0, 95, 178)",
  // Brandable primary button - disabled state
  colorBackgroundButtonBrandDisabled: "rgb(224, 229, 238)",
  // Default secondary button
  colorBackgroundButtonDefault: "rgb(255, 255, 255)",
  // Default secondary button - hover state
  colorBackgroundButtonDefaultHover: "rgb(244, 246, 249)",
  // Default secondary button - focus state
  colorBackgroundButtonDefaultFocus: "rgb(244, 246, 249)",
  // Default secondary button - active state
  colorBackgroundButtonDefaultActive: "rgb(238, 241, 246)",
  // Default secondary button - disabled state
  colorBackgroundButtonDefaultDisabled: "rgb(255, 255, 255)",
  // Background color for icon-only button
  colorBackgroundButtonIcon: "rgba(0, 0, 0, 0)",
  // Background color for icon-only button - hover state
  colorBackgroundButtonIconHover: "rgb(244, 246, 249)",
  // Background color for icon-only button - focus state
  colorBackgroundButtonIconFocus: "rgb(244, 246, 249)",
  // Background color for icon-only button - active state
  colorBackgroundButtonIconActive: "rgb(238, 241, 246)",
  // Background color for icon-only button - disabled state
  colorBackgroundButtonIconDisabled: "rgb(255, 255, 255)",
  // Button backgrounds on inverse/dark backgrounds
  colorBackgroundButtonInverse: "rgba(0, 0, 0, 0)",
  // Active button backgrounds on inverse backgrounds on mobile
  colorBackgroundButtonInverseActive: "rgba(0, 0, 0, 0.24)",
  // Disabled button backgrounds on inverse/dark backgrounds
  colorBackgroundButtonInverseDisabled: "rgba(0, 0, 0, 0)",
  // Line heights for regular buttons
  lineHeightButton: "1.875rem",
  // Line heights for small buttons
  lineHeightButtonSmall: "1.75rem",
  // Default Card component background color.
  cardColorBackground: "rgb(255, 255, 255)",
  cardSpacingSmall: "0.75rem",
  cardSpacingMedium: "1rem",
  cardSpacingLarge: "1.5rem",
  // Line heights for toggle buttons
  lineHeightToggle: "1.3rem",
  // Slider size for toggle.
  squareToggleSlider: "1.25rem",
  // Slider width.
  widthToggle: "3rem",
  // Slider height.
  heightToggle: "1.5rem",
  tableSpacingXSmall: "0.5rem",
  // Docked panel header’s background color.
  colorBackgroundDockedPanelHeader: "rgb(247, 249, 251)",
  // 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(168, 183, 199)",
  // Default color for animated icon waffle for app switcher.
  colorBackgroundIconWaffle: "rgb(84, 105, 141)",
  // Global identity icon size.
  squareIconGlobalIdentityIcon: "1.25rem",
  // Default context bar background color.
  colorBackgroundContextBar: "rgb(255, 255, 255)",
  // Brand color in context bar for default theme
  colorBackgroundContextBarBrandAccent: "rgb(0, 161, 223)",
  // Hovered context bar item background color.
  colorBackgroundContextBarItemHover: "rgb(247, 249, 251)",
  // Active context bar item background color.
  colorBackgroundContextBarItemActive: "rgb(247, 249, 251)",
  // Context TAB bar item background color.
  colorBackgroundContextTabBarItem: "rgb(255, 255, 255)",
  // Hovered context bar item background color.
  colorBackgroundContextBarInverseItemHover: "rgba(255, 255, 255, 0.2)",
  // Active context bar item background color.
  colorBackgroundContextBarInverseItemActive: "rgba(255, 255, 255, 0.4)",
  // 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%)",
  // 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(228, 233, 243)",
  // 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(228, 233, 243)",
  // Context bar height.
  heightContextBar: "2.5rem",
  // Context bar text color
  colorTextContextBar: "rgb(84, 105, 141)",
  // 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)",
  // Use COLOR_BACKGROUND_PAGE_HEADER instead.
  colorBackgroundAnchor: "rgb(244, 246, 249)",
  // Page Header background color
  colorBackgroundPageHeader: "rgb(247, 249, 251)",
  // The background color for Salespath stages that are complete.
  colorBackgroundPathComplete: "rgb(75, 202, 129)",
  // The hover background color for Salespath stages that are complete.
  colorBackgroundPathCompleteHover: "rgb(4, 132, 75)",
  // 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 the current stage.
  colorBackgroundPathCurrentHover: "rgb(0, 95, 178)",
  // The background color for Salespath stages that have not been completed.
  colorBackgroundPathIncomplete: "rgb(224, 229, 238)",
  // The hover background color for Salespath stages that have not been completed.
  colorBackgroundPathIncompleteHover: "rgb(216, 221, 230)",
  // 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 guidance coaching section.
  colorBackgroundGuidance: "rgb(250, 250, 251)",
  // 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",
  // The default background color for Progress Indicator
  progressColorBackground: "rgb(255, 255, 255)",
  // The shaded background color for Progress Indicator
  progressColorBackgroundShade: "rgb(244, 246, 249)",
  // The background color for the Progress Bar
  progressBarColorBackground: "rgb(216, 221, 230)",
  // The background color of the fill for the Progess Bar
  progressBarColorBackgroundFill: "rgb(94, 180, 255)",
  // Borders of each indicator item within the Progress Indicator
  progressColorBorder: "rgb(255, 255, 255)",
  // Shaded borders of each indicator item within the Progress Indicator
  progressColorBorderShade: "rgb(244, 246, 249)",
  // Hovered border color of each indicator item within the Progress Indicator
  progressColorBorderHover: "rgb(0, 112, 210)",
  // Active border color of each indicator item within the Progress Indicator
  progressColorBorderActive: "rgb(21, 137, 238)",
  // Height of the Progress Bar
  progressBarHeight: "0.125rem",
  // Split View background color.
  splitViewColorBackground: "rgb(228, 233, 243)",
  // Split View background color on row hover.
  splitViewColorBackgroundRowHover: "rgb(238, 241, 246)",
  // Row dividers in Split View list
  splitViewColorBorder: "rgb(206, 213, 225)",
  // Vertical navigation shaded background color on row hover.
  verticalNavigationColorBackgroundShadeRowHover: "rgb(238, 241, 246)",
  // Vertical navigation shaded background color on row active.
  verticalNavigationColorBackgroundShadeRowActive: "rgb(232, 236, 243)"
};