$components-map: (
  // 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))
);