$theme-one-salesforce-map: (
  // The color of the mask overlay that appears when you enter a modal state.
  'color-background-temp-modal-tint': (rgba(8, 7, 7, 0.6)),
  // Winter 18 token, this has been deprecated. Please use BRAND_BACKGROUND_DARK_TRANSPARENT instead. These RGBA values need to be updated if BRAND_BAND_COLOR_BACKGROUND_PRIMARY changes, solves webkit bug
  'brand-band-color-background-secondary-transparent': (rgba(253, 253, 253, 0)),
  // Used when further differentiation is needed because colorBackground and colorBackgroundAlt are both being used in close proximity.
  'color-background-alt-2': (rgb(243, 242, 242)),
  // Hover color for utility bar item.
  'color-background-utility-bar-hover': (rgb(236, 235, 234)),
  // Use COLOR_BACKGROUND_PAGE_HEADER instead.
  'color-background-anchor': (rgb(243, 242, 242)),
  'color-background-primary': (rgb(243, 242, 242)),
  // Color for UI elements related to the offline state.
  'color-background-offline': (rgb(62, 62, 60)),
  // Winter 18 token, this has been deprecated. Please use BRAND_BACKGROUND_PRIMARY_DARK instead.
  'brand-band-color-background-secondary': (rgb(253, 253, 253)),
  // Winter 18 token, this has been deprecated. Please use BRAND_BACKGROUND_PRIMARY_TRANSPARENT instead. These RGBA values need to be updated if BRAND_BAND_COLOR_BACKGROUND_PRIMARY changes, solves webkit bug
  'brand-band-color-background-primary-transparent': (rgba(253, 253, 253, 0)),
  'color-contrast-secondary': (rgb(243, 242, 242)),
  // Secondary top bar background color (child browser, file preview, etc.)
  'color-background-browser': (rgb(112, 110, 107)),
  // Used as the default background color for temporary dialog elements, such as the progress spinner background.
  'color-background-temp-modal': (rgb(150, 148, 146)),
  // Background color for payloads in the feed.
  'color-background-payload': (rgb(250, 250, 249)),
  // Winter 18 token, this has been deprecated. Please use BRAND_BACKGROUND_PRIMARY instead.
  'page-color-background-primary': (rgb(253, 253, 253)),
  // Used as gray background in conjunction with Shade when more contrast is desired.
  'color-background-shade-dark': (rgb(221, 219, 218)),
  // Background for utility icons that live in the action bar on mobile.
  'color-background-actionbar-icon-utility': (rgb(112, 110, 107)),
  // Winter 18 token, this has been deprecated. Please use BRAND_BACKGROUND_PRIMARY instead.
  'brand-band-color-background-primary': (rgb(253, 253, 253)),
  'color-background-secondary': (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(236, 235, 234)),
  // Stroke color for our global header buttons.
  'color-stroke-header-button': (rgb(176, 173, 171)),
  // Hard dropshadow found on general UI elements such as containers
  'shadow-hard-primary': (rgba(0, 0, 0, 0.10) 0 2px 0),
  // Soft dropshadow found on general UI elements such as containers
  'shadow-soft-primary': (rgba(0, 0, 0, 0.10) 0 2px 2px),
  'shadow-soft-primary-hover': (rgba(0, 0, 0, 0.20) 0 3px 6px),
  'shadow-soft-primary-active': (rgba(0, 0, 0, 0.20) 0 1px 1px),
  'card-spacing-margin': (0.75rem),
  'card-footer-padding': (0.75rem 1rem),
  // Color for text on toast messages.
  'color-text-toast': (rgb(236, 235, 234)),
  // Modal header button text color
  'color-text-modal-button': (rgb(62, 62, 60)),
  // Text in stage left navigation.
  'color-text-stage-left': (rgb(236, 235, 234)),
  // Used as the background color for the active state on rows or items on list-like components.
  'color-background-row-active': (rgb(236, 235, 234)),
  // Light variant of COLOR_BACKGROUND.
  'color-background-light': (rgb(255, 255, 255)),
  // Used as the background color for the hover state on rows or items on list-like components.
  'color-background-row-hover': (rgb(243, 242, 242)),
  // Background color for UI elements related to providing neutral information (not error, success, or warning).
  'color-background-info': (rgb(112, 110, 107)),
  // Used as background for loading stencils on white background.
  'color-background-stencil': (rgb(243, 242, 242)),
  // Default background color for the whole app.
  'color-background': (rgb(243, 242, 242)),
  // Light variant of COLOR_BACKGROUND.
  'color-background-dark': (rgb(236, 235, 234)),
  // Used as an alternate background for loading stencils on gray backgrounds.
  'color-background-stencil-alt': (rgb(236, 235, 234)),
  // Used as the background color for selected rows or items on list-like components.
  'color-background-row-selected': (rgb(236, 235, 234)),
  // Default border color for UI elements.
  'color-border': (rgb(221, 219, 218)),
  // Lightest separator color - used as default separator on white backgrounds.
  'color-border-separator': (rgb(243, 242, 242)),
  // Medium separator color - used as default separator on light gray backgrounds.
  'color-border-separator-alt': (rgb(221, 219, 218)),
  // Darkest separator color - used as an alternate separator color when more differentiation is desired.
  'color-border-separator-alt-2': (rgb(201, 199, 197)),
  // Border color for UI elements related to providing neutral information (not error, success, or warning).
  'color-border-info': (rgb(112, 110, 107)),
  // Border color for UI elements related to the offline state.
  'color-border-offline': (rgb(62, 62, 60)),
  // Used to delineate the boundary of a component that is being clicked. Specific to builders.
  'color-border-selection-active': (rgb(243, 242, 242)),
  // Action label text color
  'color-text-action-label': (rgb(62, 62, 60)),
  // Action label active text color
  'color-text-action-label-active': (rgb(8, 7, 7)),
  // Body text color
  'color-text-default': (rgb(8, 7, 7)),
  // Primary body text color
  'color-text-primary': (rgb(8, 7, 7)),
  // Color for text that is purposefully de-emphasized to create visual hierarchy.
  'color-text-weak': (rgb(62, 62, 60)),
  // Input placeholder text on dark backgrounds.
  'color-text-placeholder-inverse': (rgb(236, 235, 234)),
  // Link text (508)
  'color-text-link': (rgb(0, 109, 204)),
  // Default icon color.
  'color-text-icon-default': (rgb(112, 110, 107)),
  // Inverse text color for dark backgrounds
  'color-text-inverse': (rgb(255, 255, 255)),
  // Input placeholder text.
  'color-text-placeholder': (rgb(62, 62, 60)),
  // Weak inverse text color for dark backgrounds
  'color-text-inverse-weak': (rgb(176, 173, 171)),
  // Text color for field labels.
  'color-text-label': (rgb(62, 62, 60)),
  // Background color for a new notification list item.
  'color-background-notification-new': (rgb(243, 242, 242)),
  'color-contrast-primary': (rgb(243, 242, 242)),
  'popover-walkthrough-header-image': ("/assets/images/popovers/popover-header.png"),
  // Disabled input
  'color-background-input-disabled': (rgb(236, 235, 234)),
  // Hovered toggle background color.
  'color-background-toggle-hover': (rgb(150, 148, 146)),
  'popover-walkthrough-color-background': (rgb(3, 46, 97)),
  'popover-walkthrough-alt-image': ("/assets/images/popovers/popover-action.png"),
  'progress-color-border-shade': (rgb(243, 242, 242)),
  // Toggle background color.
  'color-background-toggle': (rgb(176, 173, 171)),
  'popover-walkthrough-alt-nubbin-color-background': (rgb(33, 92, 160)),
  'progress-color-background-shade': (rgb(243, 242, 242)),
  // Default Page Header background color
  'page-header-color-background': (rgb(243, 242, 242)),
  // Disabled checkboxes
  'color-background-input-checkbox-disabled': (rgb(221, 219, 218)),
  // Color of the spinner dot.
  'color-background-spinner-dot': (rgb(176, 173, 171)),
  'table-color-background-header-hover': (rgb(255, 255, 255)),
  // The color of the mask overlay that provides user feedback on interaction.
  'color-background-backdrop-tint': (rgb(250, 250, 249)),
  'popover-walkthrough-color-background-alt': (rgb(22, 74, 133)),
  'table-color-background-header': (rgb(250, 250, 249)),
  // The background color of an internal scrollbar.
  'color-background-scrollbar': (rgb(236, 235, 234)),
  // Disabled toggle background color.
  'color-background-toggle-disabled': (rgb(176, 173, 171)),
  // Background color for toast messaging.
  'color-background-toast': (rgb(112, 110, 107)),
  // Background color of comment posts in the feed.
  'color-background-post': (rgb(243, 242, 242)),
  // Color of mask overlay that sits on top of an image when text is present.
  'color-background-image-overlay': (rgba(0, 0, 0, 0.6)),
  // Used as gray background when more contrast is desired.
  'color-background-shade': (rgb(236, 235, 234)),
  'color-picker-slider-thumb-color-background': (rgb(243, 242, 242)),
  // The background color of an internal scrollbar track.
  'color-background-scrollbar-track': (rgb(201, 199, 197)),
  'popover-walkthrough-header-color-background': (rgb(22, 74, 133)),
  // Border color on disabled form elements.
  'color-border-input-disabled': (rgb(201, 199, 197)),
  // Border color on notification reminders.
  'color-border-reminder': (rgb(236, 235, 234)),
  'page-header-color-border': (rgb(221, 219, 218)),
  'color-border-primary': (rgb(221, 219, 218)),
  // Border color for default secondary button
  'color-border-button-default': (rgb(221, 219, 218)),
  // Border color on form elements.
  'color-border-input': (rgb(221, 219, 218)),
  'color-border-button-focus-inverse': (rgb(236, 235, 234)),
  'card-color-border': (rgb(221, 219, 218)),
  'button-color-border-primary': (rgb(221, 219, 218)),
  'color-border-link-focus-inverse': (rgb(236, 235, 234)),
  'page-header-joined-color-border': (rgb(221, 219, 218)),
  'card-footer-color-border': (rgb(221, 219, 218)),
  'page-header-border-radius': (0.25rem),
  'table-border-radius': (0 0 0.25rem 0.25rem),
  // Custom glow for focus states on UI elements with explicit containers on dark or vibrantly colored backgrounds.
  'shadow-button-focus-inverse': (0 0 3px #ecebea),
  // Custom glow for focus states on UI link elements with explicit containers on dark or vibrantly colored backgrounds.
  'shadow-link-focus-inverse': (0 0 3px #ecebea),
  // Hard dropshadow on page header
  'page-header-shadow': (0 2px 2px 0 rgba(0, 0, 0, 0.10)),
  // Hard dropshadow found on outer cards
  'card-shadow': (0 2px 2px 0 rgba(0, 0, 0, 0.10)),
  'form-label-font-size': (0.75rem),
  'input-static-font-size': (0.875rem),
  'input-static-font-weight': (400),
  // Use for active tab.
  'tabs-font-weight': (700),
  // Use for active tab.
  'card-font-weight': (700),
  'page-header-title-font-weight': (700),
  'brand-band-default-image': ("/assets/images/themes/oneSalesforce/banner-brand-default.png"),
  'banner-user-default-image': ("/assets/images/themes/oneSalesforce/banner-user-default.png"),
  'banner-group-default-image': ("/assets/images/themes/oneSalesforce/banner-group-public-default.png"),
  'component-spacing-margin': (0.75rem),
  'component-spacing-padding': (1rem),
  'template-gutters': (0.75rem),
  'template-profile-gutters': (8rem 0.75rem 0.75rem),
  'table-cell-spacing': (0.25rem 0.5rem),
  'card-footer-text-align': (center),
  // Icon color on dark background
  'color-text-icon-inverse': (rgb(255, 255, 255)),
  // Input icon
  'color-text-input-icon': (rgb(176, 173, 171)),
  // Icon color on dark background - active state
  'color-text-icon-inverse-active': (rgb(255, 255, 255)),
  // Color for disabled text in a tab group.
  'color-text-tab-label-disabled': (rgb(236, 235, 234)),
  // Input disabled text
  'color-text-input-disabled': (rgb(62, 62, 60)),
  // Tertiary body text color
  'color-text-tertiary': (rgb(150, 148, 146)),
  // Default icon color - disabled state
  'color-text-icon-default-disabled': (rgb(221, 219, 218)),
  // Active state on a standalone link on a dark background.
  'color-text-inverse-active': (rgb(94, 180, 255)),
  // 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(236, 235, 234)),
  // Text color for default secondary button - disabled state
  'color-text-button-default-disabled': (rgb(221, 219, 218)),
  // Color for disabled toggles
  'color-text-toggle-disabled': (rgb(221, 219, 218)),
  // 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(176, 173, 171)),
  // Hover state on a standalone link on a dark background.
  'color-text-inverse-hover': (rgb(176, 173, 171)),
  // 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(236, 235, 234)),
  // 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(176, 173, 171)),
  // Color for interactive utility icons
  'color-text-icon-utility': (rgb(176, 173, 171)),
  // Icon color on dark background - hover state
  'color-text-icon-inverse-hover': (rgb(255, 255, 255)),
  // Secondary body text color
  'color-text-secondary': (rgb(62, 62, 60)),
);