$force-base-map: (
  "border-width-thin": (1px),
  "border-width-thick": (2px),
  "border-stroke-width-thin": (1px),
  "border-stroke-width-thick": (2px),
  "spacing-none": (0),
  "spacing-xxx-small": (0.125rem),
  "spacing-xx-small": (0.25rem),
  "spacing-x-small": (0.5rem),
  "spacing-small": (0.75rem),
  "spacing-medium": (1rem),
  "spacing-large": (1.5rem),
  "spacing-x-large": (2rem),
  "spacing-xx-large": (3rem),
  // Generic sizing token scale for UI components.
  "size-xx-small": (6rem),
  // Generic sizing token scale for UI components.
  "size-x-small": (12rem),
  // Generic sizing token scale for UI components.
  "size-small": (15rem),
  // Generic sizing token scale for UI components.
  "size-medium": (20rem),
  // Generic sizing token scale for UI components.
  "size-large": (25rem),
  // Generic sizing token scale for UI components.
  "size-x-large": (40rem),
  // Generic sizing token scale for UI components.
  "size-xx-large": (60rem),
  // Small utility icon without border.
  "square-icon-utility-small": (1rem),
  // Medium utility icon without border.
  "square-icon-utility-medium": (1.25rem),
  // Large utility icon without border.
  "square-icon-utility-large": (1.5rem),
  // Anchor: Outer colored tile
  "square-icon-large-boundary": (3rem),
  // Anchor: avatar
  "square-icon-large-boundary-alt": (5rem),
  // Anchor: Icon content (white shape)
  "square-icon-large-content": (2rem),
  // Use squareIconMediumBoundary
  "square-icon-medium": (2.375rem),
  // Stage left & actions: Outer colored tile
  "square-icon-medium-boundary": (2rem),
  // Icon button boundary.
  "square-icon-medium-boundary-alt": (2.25rem),
  // Stage left & actions: Icon content (white shape)
  "square-icon-medium-content": (1rem),
  // Alternate medium tap target size
  "square-icon-medium-content-alt": (0.875rem),
  // Small tap target size
  "square-icon-small": (1rem),
  // Search Results: Outer colored tile
  "square-icon-small-boundary": (1.5rem),
  // Search Results: Icon content (white shape)
  "square-icon-small-content": (.75rem),
  // Very small icon button boundary.
  "square-icon-x-small-boundary": (1.25rem),
  // Very small icons in icon buttons.
  "square-icon-x-small-content": (.5rem),
  // Very very small icon button boundary.
  "square-icon-xx-small-boundary": (1rem),
  // Very small icons to replace force font with temporary override.
  "square-icon-xx-small-content": (.875rem),
  // Large tap target size.
  "square-icon-large": (3.125rem),
  // Minimum height of a pill.
  "height-pill": (1.625rem),
  // Brand fill color
  "fill-brand": (rgb(0, 112, 210)),
  // Brand hover fill color
  "fill-brand-hover": (rgb(0, 95, 178)),
  // Brand active fill color
  "fill-brand-active": (rgb(22, 50, 92)),
  // Header button icon color
  "fill-header-button": (rgb(159, 170, 181)),
  // Hovered header button icon color
  "fill-header-button-hover": (rgb(0, 95, 178)),
  // Use for large headings only.
  "font-weight-light": (300),
  // Most all body copy.
  "font-weight-regular": (400),
  // Used sparingly for emphasized text within regular body copy.
  "font-weight-bold": (700),
  "font-size-x-small": (0.625rem),
  "font-size-small": (0.875rem),
  "font-size-medium": (1rem),
  "font-size-medium-a": (1.125rem),
  "font-size-large": (1.25rem),
  "font-size-x-large": (1.5rem),
  "font-size-x-large-a": (1.57rem),
  "font-size-xx-large": (2rem),
  // Extra extra small text.
  "font-size-text-xx-small": (.625rem),
  // Extra small body text.
  "font-size-text-x-small": (.75rem),
  // Small body text.
  "font-size-text-small": (.8125rem),
  // Medium body text.
  "font-size-text-medium": (1rem),
  // Large body text.
  "font-size-text-large": (1.125rem),
  // Extra large body text.
  "font-size-text-x-large": (1.25rem),
  // Extra Extra small headings.
  "font-size-heading-xx-small": (.625rem),
  // Extra small headings.
  "font-size-heading-x-small": (.75rem),
  // Small headings.
  "font-size-heading-small": (.875rem),
  // Medium headings.
  "font-size-heading-medium": (1.125rem),
  // Large headings.
  "font-size-heading-large": (1.5rem),
  // Extra large headings.
  "font-size-heading-x-large": (2rem),
  // Unitless line-heights for reusability
  "line-height-heading": (1.25),
  // Unitless line-heights for reusability
  "line-height-text": (1.375),
  // Remove extra leading. Unitless line-heights for reusability
  "line-height-reset": (1),
  // Line heights for tabs
  "line-height-tab": (2.5rem),
  // Deprecated: use FONT_FAMILY_TEXT instead for regular body text and FONT_FAMILY_HEADING for headings.
  "font-family": ('Salesforce Sans', Arial, sans-serif),
  "font-family-text": ('Salesforce Sans', Arial, sans-serif),
  "font-family-heading": ('Salesforce Sans', Arial, sans-serif),
  "border-radius-small": (.125rem),
  // Icons in lists, record home icon, unbound input elements
  "border-radius-medium": (.25rem),
  "border-radius-large": (.5rem),
  "border-radius-pill": (15rem),
  // Circle for global use, action icon bgd shape
  "border-radius-circle": (50%),
  // Default border color for UI elements.
  "color-border": (rgb(216, 221, 230)),
  // Our product brand blue.
  "color-border-brand": (rgb(21, 137, 238)),
  // Our product brand blue, darkened to meet accessibility color contrast ratios with white text.
  "color-border-brand-dark": (rgb(0, 112, 210)),
  // Border color for UI elements related to the concept of an external user or customer.
  "color-border-customer": (rgb(255, 154, 60)),
  // Border color for UI elements that have to do with destructive actions.
  "color-border-destructive": (rgb(194, 57, 52)),
  // Hover border color for UI elements that have to do with destructive actions.
  "color-border-destructive-hover": (rgb(166, 26, 20)),
  // Active border color for UI elements that have to do with destructive actions.
  "color-border-destructive-active": (rgb(135, 5, 0)),
  // Border color for UI elements related to providing neutral information (not error, success, or warning).
  "color-border-info": (rgb(84, 105, 141)),
  // Border color for UI elements that have to do with errors.
  "color-border-error": (rgb(194, 57, 52)),
  // Alternative border color for UI elements related to errors.
  "color-border-error-alt": (rgb(234, 130, 136)),
  // Dark alternative border color for UI elements related to errors.
  "color-border-error-dark": (rgb(234, 130, 136)),
  // Border color for UI elements related to the offline state.
  "color-border-offline": (rgb(68, 68, 68)),
  // Border color for UI elements that have to do with success.
  "color-border-success": (rgb(75, 202, 129)),
  // Dark alternative border color for UI elements that have to do with success.
  "color-border-success-dark": (rgb(4, 132, 75)),
  // Border color for UI elements that have to do with warnings.
  "color-border-warning": (rgb(255, 183, 93)),
  // Border color to match UI elements using color-background-inverse.
  "color-border-inverse": (rgb(6, 28, 63)),
  // Border color for a selected tab in a tab group.
  "color-border-tab-selected": (rgb(0, 112, 210)),
  // Border color for an active tab.
  "color-border-tab-active": (rgb(255, 255, 255)),
  // Lightest separator color - used as default separator on white backgrounds.
  "color-border-separator": (rgb(244, 246, 249)),
  // Medium separator color - used as default separator on light gray backgrounds.
  "color-border-separator-alt": (rgb(216, 221, 230)),
  // Darkest separator color - used as an alternate separator color when more differentiation is desired.
  "color-border-separator-alt-2": (rgb(168, 183, 199)),
  // Used as a separator on dark backgrounds, such as stage left navigation.
  "color-border-separator-inverse": (rgb(42, 66, 108)),
  // Used as the border color for selected rows or items on list-like components.
  "color-border-row-selected": (rgb(0, 112, 210)),
  // Used as the border color for the hover state on selected rows or items on list-like components.
  "color-border-row-selected-hover": (rgb(21, 137, 238)),
  // Used to delineate the boundary of a specific region. Specific to builders.
  "color-border-hint": (rgb(42, 66, 108)),
  // Used to delineate the boundary of a selected component. Specific to builders.
  "color-border-selection": (rgb(0, 112, 210)),
  // Used to delineate the boundary of a component that is being hovered over. Specific to builders.
  "color-border-selection-hover": (rgb(21, 137, 238)),
  // Used to delineate the boundary of a component that is being clicked. Specific to builders.
  "color-border-selection-active": (rgb(244, 246, 249)),
  // Used to delineate the boundary of a selected canvas element. Specific to builders.
  "color-border-canvas-element-selection": (rgb(94, 180, 255)),
  // Used to delineate the boundary of a selected canvas element that is being hovered over. Specific to builders.
  "color-border-canvas-element-selection-hover": (rgb(0, 95, 178)),
  // Border color for a button with an icon that has a parent element that has a hover state
  "color-border-icon-inverse-hint": (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
  "color-border-icon-inverse-hint-hover": (rgba(255, 255, 255, 0.75)),
  // Border color for brandable primary button
  "color-border-button-brand": (rgb(0, 112, 210)),
  // Border color for brandable primary button - disabled state
  "color-border-button-brand-disabled": (rgba(0, 0, 0, 0)),
  // Border color for default secondary button
  "color-border-button-default": (rgb(216, 221, 230)),
  // Border color for disabled inverse button.
  "color-border-button-inverse-disabled": (rgba(255, 255, 255, 0.15)),
  // Border color on form elements.
  "color-border-input": (rgb(216, 221, 230)),
  // Border color on active form elements.
  "color-border-input-active": (rgb(21, 137, 238)),
  // Border color on disabled form elements.
  "color-border-input-disabled": (rgb(168, 183, 199)),
  // The borders to create the checkmark
  "color-border-input-checkbox-selected-checkmark": (rgb(255, 255, 255)),
  // These borders create the faux checkmark when the checkbox toggle is in the checked state.
  "color-border-toggle-checked": (rgb(255, 255, 255)),
  // Our product brand blue.
  "color-stroke-brand": (rgb(0, 112, 210)),
  // Hover stroke color for our product brand blue.
  "color-stroke-brand-hover": (rgb(0, 112, 210)),
  // Active stroke color for our product brand blue.
  "color-stroke-brand-active": (rgb(22, 50, 92)),
  // Disabled stroke color.
  "color-stroke-disabled": (rgb(224, 229, 238)),
  // Stroke color for our global header buttons.
  "color-stroke-header-button": (rgb(159, 170, 181)),
  // Default background color for the whole app.
  "color-background": (rgb(244, 246, 249)),
  // Second default background color for the app.
  "color-background-alt": (rgb(253, 253, 253)),
  // Used when further differentiation is needed because colorBackground and colorBackgroundAlt are both being used in close proximity.
  "color-background-alt-2": (rgb(238, 241, 246)),
  // Alternative background color for dark portions of the app.
  "color-background-alt-inverse": (rgb(22, 50, 92)),
  // Used as the background color for the hover state on rows or items on list-like components.
  "color-background-row-hover": (rgb(244, 246, 249)),
  // Used as the background color for the active state on rows or items on list-like components.
  "color-background-row-active": (rgb(238, 241, 246)),
  // Used as the background color for selected rows or items on list-like components.
  "color-background-row-selected": (rgb(240, 248, 252)),
  // Used as the background color for the new state on rows or items on list-like components.
  "color-background-row-new": (rgb(217, 255, 223)),
  // Default background color for dark portions of the app (like Stage Left or tooltips).
  "color-background-inverse": (rgb(6, 28, 63)),
  // Secondary top bar background color (child browser, file preview, etc.)
  "color-background-browser": (rgb(84, 105, 141)),
  // Background color for default mobile chrome (ex. global header)
  "color-background-chrome-mobile": (rgb(0, 112, 210)),
  // Background color for default desktop chrome (ex. global header)
  "color-background-chrome-desktop": (rgb(255, 255, 255)),
  // Background color for UI elements related to the concept of an external user or customer.
  "color-background-customer": (rgb(255, 154, 60)),
  // Background color for highlighting UI elements.
  "color-background-highlight": (rgb(250, 255, 189)),
  // Background color for highlighting text in search results.
  "color-background-highlight-search": (rgb(255, 240, 63)),
  // Background color for text selected with a mouse.
  "color-background-selection": (rgb(216, 237, 255)),
  // Background for utility icons that live in the action bar on mobile.
  "color-background-actionbar-icon-utility": (rgb(84, 105, 141)),
  // Color of the indicator dot.
  "color-background-indicator-dot": (rgb(22, 50, 92)),
  // Color of the spinner dot.
  "color-background-spinner-dot": (rgb(159, 170, 181)),
  // Standard modal header
  "color-background-modal": (rgb(255, 255, 255)),
  // Brandable modal header
  "color-background-modal-brand": (rgb(0, 112, 210)),
  // Notifications badge background color.
  "color-background-notification-badge": (rgb(194, 57, 52)),
  // Notifications badge background color.
  "color-background-notification-badge-hover": (rgb(0, 95, 178)),
  // Notifications badge background color.
  "color-background-notification-badge-focus": (rgb(0, 95, 178)),
  // Notifications badge background color.
  "color-background-notification-badge-active": (rgb(0, 57, 107)),
  // Background color for notification list item.
  "color-background-notification": (rgb(255, 255, 255)),
  // Background color for a new notification list item.
  "color-background-notification-new": (rgb(240, 248, 252)),
  // Stage left org switcher dropdown arrow background color.
  "color-background-org-switcher-arrow": (rgb(6, 28, 63)),
  // Background color for payloads in the feed.
  "color-background-payload": (rgb(244, 246, 249)),
  // Background color of comment posts in the feed.
  "color-background-post": (rgb(247, 249, 251)),
  // Hover color for utility bar item.
  "color-background-utility-bar-hover": (rgb(224, 229, 238)),
  // Active color for utility bar item.
  "color-background-utility-bar-active": (rgb(21, 137, 238)),
  // Used as gray background when more contrast is desired.
  "color-background-shade": (rgb(224, 229, 238)),
  // Used as gray background in conjunction with Shade when more contrast is desired.
  "color-background-shade-dark": (rgb(216, 221, 230)),
  // Used as background for loading stencils on white background.
  "color-background-stencil": (rgb(238, 241, 246)),
  // Used as an alternate background for loading stencils on gray backgrounds.
  "color-background-stencil-alt": (rgb(224, 229, 238)),
  // Used as the default background color for temporary dialog elements, such as the progress spinner background.
  "color-background-temp-modal": (rgba(126, 140, 153, 0.8)),
  // The color of the mask overlay that appears when you enter a modal state.
  "color-background-temp-modal-tint": (rgba(126, 140, 153, 0.8)),
  // The color of the mask overlay that appears when you enter a modal state.
  "color-background-temp-modal-tint-alt": (rgba(255, 255, 255, 0.75)),
  // The color of the mask overlay that appears when you enter a modal state.
  "color-background-backdrop": (rgba(255, 255, 255, 0.75)),
  // The color of the mask overlay that provides user feedback on interaction.
  "color-background-backdrop-tint": (rgba(240, 248, 252, 0.75)),
  // The background color of an internal scrollbar.
  "color-background-scrollbar": (rgb(224, 229, 238)),
  // The background color of an internal scrollbar track.
  "color-background-scrollbar-track": (rgb(168, 183, 199)),
  // Our product brand blue.
  "color-brand": (rgb(21, 137, 238)),
  // Our product brand blue, darkened to meet accessibility color contrast ratios with white text.
  "color-brand-dark": (rgb(0, 112, 210)),
  // Our product brand blue, darkened even further.
  "color-brand-darker": (rgb(0, 95, 178)),
  // Toggle background color.
  "color-background-toggle": (rgb(159, 170, 181)),
  // Disabled toggle background color.
  "color-background-toggle-disabled": (rgb(159, 170, 181)),
  // Hovered toggle background color.
  "color-background-toggle-hover": (rgb(126, 140, 153)),
  // Active toggle background color.
  "color-background-toggle-active": (rgb(0, 112, 210)),
  // Hovered active toggle background color.
  "color-background-toggle-active-hover": (rgb(0, 95, 178)),
  // Button backgrounds on modal headers
  "color-background-modal-button": (rgba(0, 0, 0, 0.07)),
  // Active button backgrounds on modal headers
  "color-background-modal-button-active": (rgba(0, 0, 0, 0.16)),
  // Default input field
  "color-background-input": (rgb(255, 255, 255)),
  // Selected input field (when user has clicked or tabbed into field)
  "color-background-input-active": (rgb(255, 255, 255)),
  // Default checkboxes
  "color-background-input-checkbox": (rgb(255, 255, 255)),
  // Disabled checkboxes
  "color-background-input-checkbox-disabled": (rgb(216, 221, 230)),
  // Selected checkboxes
  "color-background-input-checkbox-selected": (rgb(21, 137, 238)),
  // Disabled input
  "color-background-input-disabled": (rgb(224, 229, 238)),
  // Background color for input field that has encountered an error.
  "color-background-input-error": (rgb(255, 221, 225)),
  // Background color for search input fields.
  "color-background-input-search": (rgba(0, 0, 0, 0.16)),
  // Background color for pills.
  "color-background-pill": (rgb(255, 255, 255)),
  // Color of mask overlay that sits on top of an image when text is present.
  "color-background-image-overlay": (rgba(0, 0, 0, 0.4)),
  // Color for UI elements related to destructive actions.
  "color-background-destructive": (rgb(194, 57, 52)),
  // Hover color for UI elements related to destructive actions.
  "color-background-destructive-hover": (rgb(166, 26, 20)),
  // Active color for UI elements related to destructive actions.
  "color-background-destructive-active": (rgb(135, 5, 0)),
  // Background color for UI elements related to providing neutral information (not error, success, or warning).
  "color-background-info": (rgb(84, 105, 141)),
  // Color for UI elements related to errors.
  "color-background-error": (rgb(212, 80, 76)),
  // Dark color for UI elements related to errors. Accessible with white text.
  "color-background-error-dark": (rgb(194, 57, 52)),
  // Alternative color for UI elements related to errors.
  "color-background-error-alt": (rgb(234, 130, 136)),
  // Color for UI elements related to the offline state.
  "color-background-offline": (rgb(68, 68, 68)),
  // Color for UI elements that have to do with success.
  "color-background-success": (rgb(75, 202, 129)),
  // Dark color for UI elements that have to do with success. Accessible with white text.
  "color-background-success-dark": (rgb(4, 132, 75)),
  // Background color for toast messaging.
  "color-background-toast": (rgba(84, 105, 141, 0.95)),
  // Background color for success toast messaging.
  "color-background-toast-success": (rgb(4, 132, 75)),
  // Background color for error toast messaging.
  "color-background-toast-error": (rgba(194, 57, 52, 0.95)),
  // Color for UI elements that have to do with warning.
  "color-background-warning": (rgb(255, 183, 93)),
  // Background color for success buttons
  "color-background-button-success": (rgb(75, 202, 129)),
  // Hovered background color for success buttons
  "color-background-button-success-hover": (rgb(4, 132, 75)),
  // Active background color for success buttons
  "color-background-button-success-active": (rgb(4, 132, 75)),
  // Shadow above overflow menu close bar.
  "shadow-action-overflow-footer": (0 -2px 4px #F4F6F9),
  // Shadow for overlays.
  "shadow-overlay": (0 -2px 4px rgba(0, 0, 0, 0.07)),
  // Shadow for drag-n-drop.
  "shadow-drag": (0 2px 4px 0 rgba(0, 0, 0, 0.40)),
  // Shadow for drop down.
  "shadow-drop-down": (0 2px 3px 0 rgba(0, 0, 0, 0.16)),
  // Shadow for header.
  "shadow-header": (0 2px 4px rgba(0, 0, 0, 0.07)),
  // Shadow for buttons.
  "shadow-button": (0 1px 1px 0 rgba(0, 0, 0, 0.05)),
  // Custom glow for focus states on UI elements with explicit containers.
  "shadow-button-focus": (0 0 3px #0070D2),
  // Custom glow for focus states on UI elements with explicit containers on dark or vibrantly colored backgrounds.
  "shadow-button-focus-inverse": (0 0 3px #E0E5EE),
  // Shadow to make inline edit card pop out.
  "shadow-inline-edit": (0 2px 4px 4px rgba(0, 0, 0, 0.16)),
  // Inset shadow for editable grid
  "shadow-focus-inset": (0 0 2px 2px #1589EE inset),
  // Shadow on elements that are docked to the bottom of the viewport.
  "shadow-docked": (0 -2px 2px 0 rgba(0, 0, 0, 0.16)),
  // Shadow on images.
  "shadow-image": (0 1px 1px rgba(0, 0, 0, 0.16)),
  // Deprecated
  "elevation-3-inset": (-3),
  // Deprecated
  "elevation-0": (0),
  // Deprecated
  "elevation-2": (2),
  // Deprecated
  "elevation-4": (4),
  // Deprecated
  "elevation-8": (8),
  // Deprecated
  "elevation-16": (16),
  // Deprecated
  "elevation-32": (32),
  // Deprecated
  "elevation-shadow-3-below": (0 3px 3px 0 rgba(0, 0, 0, 0.16) inset),
  // Deprecated
  "elevation-shadow-0": (none),
  // Deprecated
  "elevation-shadow-2": (0 2px 2px 0 rgba(0, 0, 0, 0.16)),
  // Deprecated
  "elevation-shadow-4": (0 4px 4px 0 rgba(0, 0, 0, 0.16)),
  // Deprecated
  "elevation-shadow-8": (0 8px 8px 0 rgba(0, 0, 0, 0.16)),
  // Deprecated
  "elevation-shadow-16": (0 16px 16px 0 rgba(0, 0, 0, 0.16)),
  // Deprecated
  "elevation-shadow-32": (0 32px 32px 0 rgba(0, 0, 0, 0.16)),
  // Deprecated
  "elevation-inverse-shadow-3-below": (0 -3px 3px 0 rgba(0, 0, 0, 0.16) inset),
  // Deprecated
  "elevation-inverse-shadow-0": (none),
  // Deprecated: Use SHADOW_DOCKED
  "elevation-inverse-shadow-2": (0 -2px 2px 0 rgba(0, 0, 0, 0.16)),
  // Deprecated
  "elevation-inverse-shadow-4": (0 -4px 4px 0 rgba(0, 0, 0, 0.16)),
  // Deprecated
  "elevation-inverse-shadow-8": (0 -8px 8px 0 rgba(0, 0, 0, 0.16)),
  // Deprecated
  "elevation-inverse-shadow-16": (0 -16px 16px 0 rgba(0, 0, 0, 0.16)),
  // Deprecated
  "elevation-inverse-shadow-32": (0 -32px 32px 0 rgba(0, 0, 0, 0.16)),
  // Action label text color
  "color-text-action-label": (rgb(84, 105, 141)),
  // Action label active text color
  "color-text-action-label-active": (rgb(22, 50, 92)),
  // Our product brand blue.
  "color-text-brand": (rgb(21, 137, 238)),
  // Top bar icon color
  "color-text-browser": (rgb(255, 255, 255)),
  // Top bar active icon color
  "color-text-browser-active": (rgba(0, 0, 0, 0.4)),
  // Customer text used in anchor subtitle
  "color-text-customer": (rgb(255, 154, 60)),
  // Body text color
  "color-text-default": (rgb(22, 50, 92)),
  // Error text for inputs and error misc
  "color-text-error": (rgb(194, 57, 52)),
  // Input disabled text
  "color-text-input-disabled": (rgb(84, 105, 141)),
  // Typed input text
  "color-text-input-focus-inverse": (rgb(22, 50, 92)),
  // Input icon
  "color-text-input-icon": (rgb(159, 170, 181)),
  // Inverse text color for dark backgrounds
  "color-text-inverse": (rgb(255, 255, 255)),
  // Weak inverse text color for dark backgrounds
  "color-text-inverse-weak": (rgb(159, 170, 181)),
  // Active state on a standalone link on a dark background.
  "color-text-inverse-active": (rgb(94, 180, 255)),
  // Hover state on a standalone link on a dark background.
  "color-text-inverse-hover": (rgb(159, 170, 181)),
  // Link text (508)
  "color-text-link": (rgb(0, 112, 210)),
  // Active link text
  "color-text-link-active": (rgb(0, 57, 107)),
  // Disabled link text
  "color-text-link-disabled": (rgb(22, 50, 92)),
  // Focus link text
  "color-text-link-focus": (rgb(0, 95, 178)),
  // Hover link text
  "color-text-link-hover": (rgb(0, 95, 178)),
  // Link color on dark background
  "color-text-link-inverse": (rgb(255, 255, 255)),
  // Link color on dark background - hover state
  "color-text-link-inverse-hover": (rgba(255, 255, 255, 0.75)),
  // Link color on dark background - active state
  "color-text-link-inverse-active": (rgba(255, 255, 255, 0.5)),
  // Link color on dark background - disabled state
  "color-text-link-inverse-disabled": (rgba(255, 255, 255, 0.15)),
  // Modal header title
  "color-text-modal": (rgb(255, 255, 255)),
  // Modal header button text color
  "color-text-modal-button": (rgb(84, 105, 141)),
  // Text in stage left navigation.
  "color-text-stage-left": (rgb(224, 229, 238)),
  // Color for default text in a tab group.
  "color-text-tab-label": (rgb(22, 50, 92)),
  // Color for text on a selected tab in a tab group.
  "color-text-tab-label-selected": (rgb(0, 112, 210)),
  // Color for text in hover state in a tab group.
  "color-text-tab-label-hover": (rgb(0, 95, 178)),
  // Color for text in focus state in a tab group.
  "color-text-tab-label-focus": (rgb(0, 95, 178)),
  // Color for text in active state in a tab group.
  "color-text-tab-label-active": (rgb(0, 57, 107)),
  // Color for disabled text in a tab group.
  "color-text-tab-label-disabled": (rgb(224, 229, 238)),
  // Color for text on toast messages.
  "color-text-toast": (rgb(224, 229, 238)),
  // Color for texts or icons that are related to warnings on a dark background.
  "color-text-warning": (rgb(255, 183, 93)),
  // Color for texts that are related to warnings on a light background.
  "color-text-warning-alt": (rgb(132, 72, 0)),
  // Color for text that is purposefully de-emphasized to create visual hierarchy.
  "color-text-weak": (rgb(84, 105, 141)),
  // Color for non-interactive icons that represent a selected item in a list
  "color-text-icon-brand": (rgb(0, 112, 210)),
  // Color for interactive utility icons
  "color-text-icon-utility": (rgb(159, 170, 181)),
  // Color for disabled toggles
  "color-text-toggle-disabled": (rgb(216, 221, 230)),
  // Text color for brandable primary button
  "color-text-button-brand": (rgb(255, 255, 255)),
  // Text color for brandable primary button - hover state
  "color-text-button-brand-hover": (rgb(255, 255, 255)),
  // Text color for brandable primary button - active state
  "color-text-button-brand-active": (rgb(255, 255, 255)),
  // Text color for brandable primary button - disabled state
  "color-text-button-brand-disabled": (rgb(255, 255, 255)),
  // Text color for default secondary button
  "color-text-button-default": (rgb(0, 112, 210)),
  // Text color for default secondary button - hover state
  "color-text-button-default-hover": (rgb(0, 112, 210)),
  // Text color for default secondary button - active state
  "color-text-button-default-active": (rgb(0, 112, 210)),
  // Text color for default secondary button - disabled state
  "color-text-button-default-disabled": (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.
  "color-text-button-default-hint": (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.
  "color-text-button-inverse": (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.
  "color-text-button-inverse-disabled": (rgba(255, 255, 255, 0.15)),
  // Default icon color.
  "color-text-icon-default": (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.
  "color-text-icon-default-hint": (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.
  "color-text-icon-inverse-hint": (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.
  "color-text-icon-default-hint-borderless": (rgb(224, 229, 238)),
  // Default icon color - hover state.
  "color-text-icon-default-hover": (rgb(0, 112, 210)),
  // Default icon color - active state.
  "color-text-icon-default-active": (rgb(0, 57, 107)),
  // Default icon color - disabled state
  "color-text-icon-default-disabled": (rgb(216, 221, 230)),
  // Icon color on dark background
  "color-text-icon-inverse": (rgb(255, 255, 255)),
  // Icon color on dark background - hover state
  "color-text-icon-inverse-hover": (rgb(255, 255, 255)),
  // Icon color on dark background - active state
  "color-text-icon-inverse-active": (rgb(255, 255, 255)),
  // Icon color on dark background - disabled state
  "color-text-icon-inverse-disabled": (rgba(255, 255, 255, 0.15)),
  // Hovered icon color for a button that has a parent element that has a hover state
  "color-text-icon-inverse-hint-hover": (rgba(255, 255, 255, 0.75)),
  // Text color for field labels.
  "color-text-label": (rgb(84, 105, 141)),
  // Input placeholder text.
  "color-text-placeholder": (rgb(84, 105, 141)),
  // Input placeholder text on dark backgrounds.
  "color-text-placeholder-inverse": (rgb(224, 229, 238)),
  // Color of required field marker.
  "color-text-required": (rgb(194, 57, 52)),
  // Text color for pills.
  "color-text-pill": (rgb(0, 112, 210)),
  // Text color for success text.
  "color-text-success": (rgb(2, 128, 72)),
  // Text color for success text on dark backgrounds.
  "color-text-success-inverse": (rgb(75, 202, 129)),
  // Default value for text-transform
  "text-transform": (none),
  // 50% transparency of an element
  "opacity-5": (0.5),
  // 80% transparency of an element
  "opacity-8": (0.8),
  // 0 seconds, 0 frames
  "duration-instantly": (0s),
  // 0.05 seconds, 3 frames
  "duration-immediately": (0.05s),
  // 0.1 seconds, 6 frames
  "duration-quickly": (0.1s),
  // 0.2 seconds, 12 frames
  "duration-promptly": (0.2s),
  // 0.4 seconds, 24 frames
  "duration-slowly": (0.4s),
  // 3.2 seconds, 192 frames
  "duration-paused": (3.2s),
  // 4.8 seconds
  "duration-toast-short": (4.8s),
  // 9.6 seconds
  "duration-toast-medium": (9.6s),
  // Toasts
  "z-index-toast": (10000),
  // Spinner
  "z-index-spinner": (9050),
  // Modal
  "z-index-modal": (9000),
  // Overlay
  "z-index-overlay": (8000),
  // Dropdown
  "z-index-dropdown": (7000),
  // Dialog
  "z-index-dialog": (6000),
  // Popup
  "z-index-popup": (5000),
  // Stickied element
  "z-index-sticky": (100),
  // Default
  "z-index-default": (1),
  // Docked element
  "z-index-docked": (4),
  // Deep dive
  "z-index-deepdive": (-99999),
  // Brandable primary button
  "color-background-button-brand": (rgb(0, 112, 210)),
  // Brandable primary button - active state
  "color-background-button-brand-active": (rgb(0, 57, 107)),
  // Brandable primary button - hover state
  "color-background-button-brand-hover": (rgb(0, 95, 178)),
  // Brandable primary button - disabled state
  "color-background-button-brand-disabled": (rgb(224, 229, 238)),
  // Default secondary button
  "color-background-button-default": (rgb(255, 255, 255)),
  // Default secondary button - hover state
  "color-background-button-default-hover": (rgb(244, 246, 249)),
  // Default secondary button - focus state
  "color-background-button-default-focus": (rgb(244, 246, 249)),
  // Default secondary button - active state
  "color-background-button-default-active": (rgb(238, 241, 246)),
  // Default secondary button - disabled state
  "color-background-button-default-disabled": (rgb(255, 255, 255)),
  // Background color for icon-only button
  "color-background-button-icon": (rgba(0, 0, 0, 0)),
  // Background color for icon-only button - hover state
  "color-background-button-icon-hover": (rgb(244, 246, 249)),
  // Background color for icon-only button - focus state
  "color-background-button-icon-focus": (rgb(244, 246, 249)),
  // Background color for icon-only button - active state
  "color-background-button-icon-active": (rgb(238, 241, 246)),
  // Background color for icon-only button - disabled state
  "color-background-button-icon-disabled": (rgb(255, 255, 255)),
  // Button backgrounds on inverse/dark backgrounds
  "color-background-button-inverse": (rgba(0, 0, 0, 0)),
  // Active button backgrounds on inverse backgrounds on mobile
  "color-background-button-inverse-active": (rgba(0, 0, 0, 0.24)),
  // Disabled button backgrounds on inverse/dark backgrounds
  "color-background-button-inverse-disabled": (rgba(0, 0, 0, 0)),
  // Line heights for regular buttons
  "line-height-button": (1.875rem),
  // Line heights for small buttons
  "line-height-button-small": (1.75rem),
  // Default Card component background color.
  "card-color-background": (rgb(255, 255, 255)),
  "card-spacing-small": (0.75rem),
  "card-spacing-medium": (1rem),
  "card-spacing-large": (1.5rem),
  // Line heights for toggle buttons
  "line-height-toggle": (1.3rem),
  // Slider size for toggle.
  "square-toggle-slider": (1.25rem),
  // Slider width.
  "width-toggle": (3rem),
  // Slider height.
  "height-toggle": (1.5rem),
  "table-spacing-x-small": (0.5rem),
  // Docked panel header’s background color.
  "color-background-docked-panel-header": (rgb(247, 249, 251)),
  // Height of the docked bar.
  "height-docked-bar": (2.5rem),
  // Utility bar notifications badge background color.
  "utility-bar-color-background-notification-badge": (rgb(212, 80, 76)),
  // Utility bar notifications focus background color.
  "utility-bar-color-background-notification-focus": (rgb(168, 183, 199)),
  // Default color for animated icon waffle for app switcher.
  "color-background-icon-waffle": (rgb(84, 105, 141)),
  // Global identity icon size.
  "square-icon-global-identity-icon": (1.25rem),
  // Default context bar background color.
  "color-background-context-bar": (rgb(255, 255, 255)),
  // Brand color in context bar for default theme
  "color-background-context-bar-brand-accent": (rgb(0, 161, 223)),
  // Hovered context bar item background color.
  "color-background-context-bar-item-hover": (rgb(247, 249, 251)),
  // Active context bar item background color.
  "color-background-context-bar-item-active": (rgb(247, 249, 251)),
  // Context TAB bar item background color.
  "color-background-context-tab-bar-item": (rgb(255, 255, 255)),
  // Hovered context bar item background color.
  "color-background-context-bar-inverse-item-hover": (rgba(255, 255, 255, 0.2)),
  // Active context bar item background color.
  "color-background-context-bar-inverse-item-active": (rgba(255, 255, 255, 0.4)),
  // A Gradient used for putting shadows on the bottom when box-shadow is not possible.
  "color-background-context-bar-shadow": (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).
  "color-background-context-bar-action-highlight": (rgba(255, 255, 255, 0.2)),
  // Divider in context bar
  "color-border-context-bar-divider": (rgba(255, 255, 255, 0.2)),
  // Border color in context bar
  "color-border-context-bar-item": (rgba(0, 0, 0, 0.2)),
  // Border color in context bar on dark background
  "color-border-context-bar-inverse-item": (rgba(255, 255, 255, 0.2)),
  // Border color in context bar for default theme
  "color-border-context-bar-theme-default": (rgb(0, 161, 223)),
  // Alternate border color in context bar for default theme
  "color-border-context-bar-theme-default-alt": (rgb(228, 233, 243)),
  // Hovered border color in context bar for default theme
  "color-border-context-bar-theme-default-hover": (rgb(11, 35, 153)),
  // Active border color in context bar for default theme
  "color-border-context-bar-theme-default-active": (rgb(228, 233, 243)),
  // Context bar height.
  "height-context-bar": (2.5rem),
  // Context bar text color
  "color-text-context-bar": (rgb(84, 105, 141)),
  // Context bar text color on a dark background
  "color-text-context-bar-inverse": (rgb(255, 255, 255)),
  // Context bar action trigger text color
  "color-text-context-bar-action-trigger": (rgba(255, 255, 255, 0.4)),
  // Use COLOR_BACKGROUND_PAGE_HEADER instead.
  "color-background-anchor": (rgb(244, 246, 249)),
  // Page Header background color
  "color-background-page-header": (rgb(247, 249, 251)),
  // The background color for Salespath stages that are complete.
  "color-background-path-complete": (rgb(75, 202, 129)),
  // The hover background color for Salespath stages that are complete.
  "color-background-path-complete-hover": (rgb(4, 132, 75)),
  // The background color for Salespath stages that are the current stage.
  "color-background-path-current": (rgb(0, 112, 210)),
  // The hover background color for Salespath stages that are the current stage.
  "color-background-path-current-hover": (rgb(0, 95, 178)),
  // The background color for Salespath stages that have not been completed.
  "color-background-path-incomplete": (rgb(224, 229, 238)),
  // The hover background color for Salespath stages that have not been completed.
  "color-background-path-incomplete-hover": (rgb(216, 221, 230)),
  // The background color for the final stage of a Salespath when it has been lost.
  "color-background-path-lost": (rgb(194, 57, 52)),
  // The background color for Salespath guidance coaching section.
  "color-background-guidance": (rgb(250, 250, 251)),
  // Used as a separator between dark colors like the stages of salespath.
  "color-border-path-divider": (rgb(255, 255, 255)),
  // Line heights for salespath
  "line-height-salespath": (1.5rem),
  // Height of Salespath
  "height-sales-path": (2rem),
  // The default background color for Progress Indicator
  "progress-color-background": (rgb(255, 255, 255)),
  // The shaded background color for Progress Indicator
  "progress-color-background-shade": (rgb(244, 246, 249)),
  // The background color for the Progress Bar
  "progress-bar-color-background": (rgb(216, 221, 230)),
  // The background color of the fill for the Progess Bar
  "progress-bar-color-background-fill": (rgb(94, 180, 255)),
  // Borders of each indicator item within the Progress Indicator
  "progress-color-border": (rgb(255, 255, 255)),
  // Shaded borders of each indicator item within the Progress Indicator
  "progress-color-border-shade": (rgb(244, 246, 249)),
  // Hovered border color of each indicator item within the Progress Indicator
  "progress-color-border-hover": (rgb(0, 112, 210)),
  // Active border color of each indicator item within the Progress Indicator
  "progress-color-border-active": (rgb(21, 137, 238)),
  // Height of the Progress Bar
  "progress-bar-height": (0.125rem),
  // Split View background color.
  "split-view-color-background": (rgb(228, 233, 243)),
  // Split View background color on row hover.
  "split-view-color-background-row-hover": (rgb(238, 241, 246)),
  // Row dividers in Split View list
  "split-view-color-border": (rgb(206, 213, 225)),
  // Vertical navigation shaded background color on row hover.
  "vertical-navigation-color-background-shade-row-hover": (rgb(238, 241, 246)),
  // Vertical navigation shaded background color on row active.
  "vertical-navigation-color-background-shade-row-active": (rgb(232, 236, 243))
);