$components-map: (
  /* White avatar group background color. */
  'avatar-group-color-background-lightest': (rgb(255, 255, 255)),
  /* Dark gray avatar group background color. */
  'avatar-group-color-background-inverse': (rgb(116, 116, 116)),
  /* White badge background color. */
  'badge-color-background-lightest': (rgb(255, 255, 255)),
  /* Dark gray badge background color. */
  'badge-color-background-inverse': (rgb(116, 116, 116)),
  'brand-band-default-image': (""),
  'brand-band-color-background-primary': (rgba(0, 0, 0, 0)),
  'brand-band-color-background-primary-transparent': (rgba(0, 0, 0, 0)),
  'brand-band-color-background-secondary': (rgba(0, 0, 0, 0)),
  'brand-band-color-background-secondary-transparent': (rgba(0, 0, 0, 0)),
  'brand-band-image-height-small': (6rem),
  'brand-band-image-height-medium': (12.5rem),
  'brand-band-image-height-large': (18.75rem),
  'brand-band-scrim-height': (3.125rem),
  'template-gutters': (0),
  'template-profile-gutters': (0),
  'button-icon-color-border-primary': (rgb(255, 255, 255)),
  'button-icon-boundary-touch': (2.75rem),
  'button-color-border-primary': (rgb(243, 243, 243)),
  'button-color-border-brand-primary': (rgb(1, 118, 211)),
  'button-color-border-secondary': (rgba(255, 255, 255, 0.8)),
  'button-border-radius': (.25rem),
  /* Default secondary button - focus state */
  'color-background-button-default-focus': (rgb(243, 243, 243)),
  /* Use BRAND_ACCESSIBLE to pick up theming capabilities */
  'button-color-background-brand-primary': (rgb(1, 118, 211)),
  /* Disabled button backgrounds on inverse/dark backgrounds */
  'color-background-button-inverse-disabled': (rgba(0, 0, 0, 0)),
  /* Default secondary button - hover state */
  'color-background-button-default-hover': (rgb(243, 243, 243)),
  /* Default secondary button */
  'color-background-button-default': (rgb(255, 255, 255)),
  /* Background color for icon-only button - disabled state */
  'color-background-button-icon-disabled': (rgb(255, 255, 255)),
  /* Background color for icon-only button - focus state */
  'color-background-button-icon-focus': (rgb(243, 243, 243)),
  'button-color-background-secondary': (rgba(255, 255, 255, 0.8)),
  /* Brandable primary button - disabled state */
  'color-background-button-brand-disabled': (rgb(243, 243, 243)),
  /* Brandable primary button - hover state */
  'color-background-button-brand-hover': (rgb(1, 68, 134)),
  /* Active button backgrounds on inverse backgrounds on mobile */
  'color-background-button-inverse-active': (rgba(0, 0, 0, 0.24)),
  /* Background color for icon-only button - hover state */
  'color-background-button-icon-hover': (rgb(243, 243, 243)),
  /* Brandable primary button */
  'color-background-button-brand': (rgb(1, 118, 211)),
  /* Background color for icon-only button */
  'color-background-button-icon': (rgba(0, 0, 0, 0)),
  /* Default secondary button - disabled state */
  'color-background-button-default-disabled': (rgb(255, 255, 255)),
  /* Background color for icon-only button - active state */
  'color-background-button-icon-active': (rgb(243, 243, 243)),
  /* Brandable primary button - active state */
  'color-background-button-brand-active': (rgb(3, 45, 96)),
  /* Button backgrounds on inverse/dark backgrounds */
  'color-background-button-inverse': (rgba(0, 0, 0, 0)),
  'button-color-background-primary': (rgb(255, 255, 255)),
  /* Default secondary button - active state */
  'color-background-button-default-active': (rgb(243, 243, 243)),
  /* Line heights for regular buttons */
  'line-height-button': (1.875rem),
  /* Line heights for small buttons */
  'line-height-button-small': (1.75rem),
  /* Line height for touch screens */
  'button-line-height-touch': (2.65rem),
  'button-color-text-primary': (rgb(255, 255, 255)),
  /* Default Card component background color. */
  'card-color-background': (rgb(255, 255, 255)),
  'card-color-border': (rgb(201, 201, 201)),
  'card-footer-color-border': (rgba(0, 0, 0, 0)),
  'card-shadow': (none),
  /* Use for active tab. */
  'card-font-weight': (400),
  'card-footer-margin': (0.75rem),
  'card-body-padding': (0 1rem),
  'card-wrapper-spacing': (1rem),
  'card-header-padding': (0.75rem 1rem 0),
  'card-spacing-large': (1.5rem),
  'card-header-margin': (0 0 0.75rem),
  /* Use for vertical spacing between cards */
  'card-spacing-margin': (1rem),
  'card-footer-padding': (0 1rem 0.75rem),
  'card-spacing-small': (0.75rem),
  'card-footer-text-align': (right),
  /* Default background for carousel card */
  'carousel-color-background': (rgb(255, 255, 255)),
  /* Default background for carousel navigation indicators */
  'carousel-indicator-color-background': (rgb(255, 255, 255)),
  /* Default hover background for carousel navigation indicators */
  'carousel-indicator-color-background-hover': (rgb(243, 243, 243)),
  /* Default focus background for carousel navigation indicators */
  'carousel-indicator-color-background-focus': (rgb(1, 68, 134)),
  /* Default background for active state on carousel navigation indicators */
  'carousel-indicator-color-background-active': (rgb(1, 118, 211)),
  /* Default width for carousel indicator width */
  'carousel-indicator-width': (1rem),
  /* Inbound chat message background color. */
  'chat-message-color-background-inbound': (rgb(243, 243, 243)),
  /* Outbound chat message background color. */
  'chat-message-color-background-outbound': (rgb(1, 68, 134)),
  /* Outbound agent chat message background color. */
  'chat-message-color-background-outbound-agent': (rgb(116, 116, 116)),
  /* Status chat message background color. */
  'chat-message-color-background-status': (rgb(255, 255, 255)),
  /* 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),
  'color-picker-slider-thumb-color-background': (rgb(243, 243, 243)),
  'color-picker-slider-thumb-border-color': (rgb(68, 68, 68)),
  'color-picker-swatch-shadow': (inset 0 0 1px rgba(0,0,0,0.4)),
  'color-picker-input-custom-hex-font-size': (0.75rem),
  'color-picker-selector-width': (14rem),
  'color-picker-swatches-width': (13.3rem),
  'color-picker-range-height': (5rem),
  'color-picker-slider-height': (1.5rem),
  'color-picker-thumb-width': (0.375rem),
  'color-picker-range-indicator-size': (0.75rem),
  'color-picker-input-custom-hex-width': (4.2rem),
  'color-picker-swatch-size': (1.25rem),
  /* Alternating row background color for tables */
  'table-color-background-stripes': (rgb(243, 243, 243)),
  /* Default background color for table headers */
  'table-color-background-header': (rgb(255, 255, 255)),
  /* Hover state for table header cells */
  'table-color-background-header-hover': (rgb(243, 243, 243)),
  /* Focused state for table header cells */
  'table-color-background-header-focus': (rgb(255, 255, 255)),
  /* Resizable handle color for table header cells */
  'table-color-background-header-resizable-handle': (rgb(174, 174, 174)),
  'table-border-radius': (0),
  'table-cell-spacing': (0.5rem),
  'table-color-text-header': (rgb(68, 68, 68)),
  'datepicker-color-text-day-adjacent-month': (rgb(116, 116, 116)),
  /* Docked panel header’s background color. */
  'color-background-docked-panel-header': (rgb(255, 255, 255)),
  /* Docked panel’s background color when open. */
  'color-background-docked-panel': (rgb(255, 255, 255)),
  /* Height of the docked bar. */
  'height-docked-bar': (2.5rem),
  /* Utility bar notifications badge background color. */
  'utility-bar-color-background-notification-badge': (rgb(254, 92, 76)),
  /* Utility bar notifications focus background color. */
  'utility-bar-color-background-notification-focus': (rgb(201, 201, 201)),
  'drop-zone-slot-height': (0.25rem),
  /* Default color for animated icon waffle for app switcher. */
  'color-background-icon-waffle': (rgb(116, 116, 116)),
  /* Default background color for a typing icon dot. */
  'typing-icon-dot-color-background-gray': (rgb(201, 201, 201)),
  /* Active background color for a typing icon dot when animcating. */
  'typing-icon-dot-color-background-gray-dark': (rgb(201, 201, 201)),
  /* Brand fill color */
  'global-action-fill-hover': (rgb(1, 68, 134)),
  /* Global action icon size */
  'global-action-icon-size': (1.5rem),
  /* Typing icon size */
  'typing-icon-dot-size': (.5rem),
  'einstein-header-background': ("/einstein-headers/einstein-header-background.svg"),
  'einstein-header-figure': ("/einstein-headers/einstein-figure.svg"),
  /* Background color for Einstein header */
  'einstein-header-background-color': (rgb(144, 208, 254)),
  /* Text shadow color for Einstein header background to make text more readable */
  'einstein-header-text-shadow': (#cfe9fe),
  'files-z-index-hover': (5),
  'form-label-font-size': (0.75rem),
  /* Global Header background color */
  'global-header-color-background': (rgb(255, 255, 255)),
  'brand-logo-image': ("/logo-noname.svg"),
  /* Global identity icon size. */
  'square-icon-global-identity-icon': (1.25rem),
  /* Hovered context bar item background color. */
  'color-background-context-bar-item-hover': (rgb(255, 255, 255)),
  /* Active context bar item background color. */
  'color-background-context-bar-item-active': (rgb(255, 255, 255)),
  /* Default context bar background color. */
  'color-background-context-bar': (rgb(255, 255, 255)),
  /* 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)),
  /* 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%)),
  /* Active context bar item background color. */
  'color-background-context-bar-inverse-item-active': (rgba(255, 255, 255, 0.4)),
  /* Brand color in context bar for default theme */
  'color-background-context-bar-brand-accent': (rgb(13, 157, 218)),
  /* 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(13, 157, 218)),
  /* Alternate border color in context bar for default theme */
  'color-border-context-bar-theme-default-alt': (rgb(243, 243, 243)),
  /* Hovered border color in context bar for default theme */
  'color-border-context-bar-theme-default-hover': (rgb(50, 29, 113)),
  /* Active border color in context bar for default theme */
  'color-border-context-bar-theme-default-active': (rgb(243, 243, 243)),
  /* Context bar height. */
  'height-context-bar': (2.5rem),
  /* Context bar tab accent height when tab is active. */
  'globalnavigation-item-height-accent-active': (3px),
  /* Context bar tab accent height when tab is focused. */
  'globalnavigation-item-height-accent-focus': (4px),
  /* Context bar text color */
  'color-text-context-bar': (rgb(68, 68, 68)),
  /* 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)),
  /* Primary color for illustrations */
  'illustration-color-primary': (rgb(144, 208, 254)),
  /* Secondary color for illustrations */
  'illustration-color-secondary': (rgb(207, 233, 254)),
  'input-static-font-size': (0.8125rem),
  'input-static-font-weight': (400),
  'input-readonly-font-weight': (400),
  'input-static-color': (rgb(24, 24, 24)),
  /* Default Page Header background color */
  'page-header-color-background': (rgb(243, 243, 243)),
  /* Secondary Page Header background color */
  'page-header-color-background-alt': (rgb(255, 255, 255)),
  /* Use COLOR_BACKGROUND_PAGE_HEADER instead. */
  'color-background-anchor': (rgb(243, 243, 243)),
  /* Page Header background color */
  'color-background-page-header': (rgb(255, 255, 255)),
  'page-header-color-border': (rgba(0, 0, 0, 0)),
  'page-header-joined-color-border': (rgb(201, 201, 201)),
  'page-header-border-radius': (0),
  'page-header-shadow': (none),
  'page-header-title-font-size': (1.125rem),
  'page-header-title-font-weight': (400),
  /* Page header Entity Icon size */
  'page-header-icon-size': (2.25rem),
  'page-header-spacing-margin': (0),
  'page-header-spacing-padding': (1rem),
  'page-header-spacing-row': (0.75rem 1rem),
  /* Dropshadow found on docked UI panels when positioned to the left of a viewport */
  'panel-docked-left-shadow': (1px 0 3px rgba(0,0,0,0.25)),
  /* Dropshadow found on docked UI panels when positioned to the left of a viewport */
  'panel-docked-right-shadow': (-1px 0 3px 0 rgba(0,0,0,0.25)),
  /* The hover background color for Salespath stages that have not been completed. */
  'color-background-path-incomplete-hover': (rgb(201, 201, 201)),
  /* The background color for the step action arrow that are the active stage */
  'color-background-path-step-action-active': (rgb(0, 22, 57)),
  /* The background color for Salespath stages that have not been completed. */
  'color-background-path-incomplete': (rgb(243, 243, 243)),
  /* The hover background color for Salespath stages that are the active stage. */
  'color-background-path-active-hover': (rgb(3, 45, 96)),
  /* The background color for the final stage of a Salespath when it has been lost. */
  'color-background-path-lost': (rgb(234, 0, 30)),
  /* The background color for Salespath stages that are the active stage. */
  'color-background-path-active': (rgb(1, 68, 134)),
  /* The background color for Salespath guidance coaching section. */
  'color-background-guidance': (rgb(255, 255, 255)),
  /* The background color for the final stage of a Salespath when it has been lost. */
  'color-background-path-won': (rgb(46, 132, 74)),
  /* The hover background color for Salespath stages that are the current stage. */
  'color-background-path-current-hover': (rgb(255, 255, 255)),
  /* The background color for Salespath stages that are the current stage. */
  'color-background-path-current': (rgb(255, 255, 255)),
  /* The hover background color for Salespath stages that are complete. */
  'color-background-path-complete-hover': (rgb(46, 132, 74)),
  /* The background color for Salespath stages that are complete. */
  'color-background-path-complete': (rgb(59, 167, 85)),
  /* The background color for the step action arrow that are the current stage */
  'color-background-path-step-action-current': (rgb(1, 68, 134)),
  /* The background color for the overall Salespath coaching section. */
  'color-background-path-expanded': (rgb(255, 255, 255)),
  /* Used as a separator between dark colors like the stages of salespath. */
  'color-border-path-divider': (rgb(255, 255, 255)),
  /* Used as a border color for the active Path step. */
  'color-border-path-current': (rgb(1, 68, 134)),
  /* Used as a border color for the current path step on hover. */
  'color-border-path-current-hover': (rgb(3, 45, 96)),
  /* Line heights for salespath */
  'line-height-salespath': (1.5rem),
  /* Height of Path */
  'height-sales-path': (2rem),
  /* Width of action button to right */
  'path-button-width-fixed': (13rem),
  /* Border width of current stage for path item */
  'width-path-border-current': (0.125rem),
  /* Used as a text color for the active Path step. */
  'color-text-path-current': (rgb(1, 68, 134)),
  /* Used as a text hover color for the active Path step. */
  'color-text-path-current-hover': (rgb(3, 45, 96)),
  /* The default background color for Popover Walkthrough */
  'popover-walkthrough-color-background': (rgb(0, 22, 57)),
  /* The default background color for Popover Walkthrough Header */
  'popover-walkthrough-header-color-background': (rgb(3, 45, 96)),
  /* The default background color for alternative Popover Walkthrough */
  'popover-walkthrough-color-background-alt': (rgb(1, 118, 211)),
  'popover-walkthrough-header-image': (""),
  'popover-walkthrough-alt-image': (""),
  /* The background color for nubbins on the bottom of alternate walkthrough popovers */
  'popover-walkthrough-alt-nubbin-color-background': (rgb(1, 118, 211)),
  /* Tooltip nubbin square size */
  'nubbin-size-default': (1rem),
  /* Tooltip nubbin offset for branded popovers */
  'nubbin-triangle-offset': (-0.1875rem),
  /* The default border width for Branded Popover */
  'popover-brand-border-width': (0.25rem),
  /* Text color for step counter in walkthrough variant of popovers */
  'popover-color-text': (rgb(201, 201, 201)),
  /* 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(243, 243, 243)),
  /* The background color for the Progress Bar */
  'progress-bar-color-background': (rgb(201, 201, 201)),
  /* The background color of the fill for the Progress Bar */
  'progress-bar-color-background-fill': (rgb(26, 185, 255)),
  /* The success background color of the fill for the Progress Bar */
  'progress-bar-color-background-fill-success': (rgb(46, 132, 74)),
  /* 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(243, 243, 243)),
  /* Hovered border color of each indicator item within the Progress Indicator */
  'progress-color-border-hover': (rgb(1, 118, 211)),
  /* Active border color of each indicator item within the Progress Indicator */
  'progress-color-border-active': (rgb(27, 150, 255)),
  /* Height of the Progress Bar */
  'progress-bar-height': (0.125rem),
  /* Inner color for progress ring component */
  'color-background-progress-ring-content': (rgb(255, 255, 255)),
  /* Thickness of the Progress Ring's ring */
  'progress-ring-width': (0.1875rem),
  /* Line height for touch screens */
  'radio-button-group-line-height-touch': (2.69rem),
  /* Dark notification component background color. */
  'notification-color-background-inverse': (rgb(116, 116, 116)),
  'slider-handle-color-background': (rgb(27, 150, 255)),
  'slider-handle-color-background-hover': (rgb(1, 118, 211)),
  'slider-handle-color-background-focus': (rgb(1, 118, 211)),
  'slider-handle-color-background-active': (rgb(1, 118, 211)),
  'slider-track-color-background': (rgb(243, 243, 243)),
  'slider-track-color-background-fill': (rgb(27, 150, 255)),
  'slider-color-background-disabled': (rgb(243, 243, 243)),
  'slider-handle-shadow': (rgba(0, 0, 0, 0.16) 0 2px 3px),
  'slider-handle-size': (1rem),
  'slider-track-height': (4px),
  'slider-track-width': (100%),
  /* Spinner size for xx-small modifier */
  'spinner-size-xx-small': (0.5rem),
  /* Spinner size for x-small modifier */
  'spinner-size-x-small': (1rem),
  /* Spinner size for small modifier */
  'spinner-size-small': (1.25rem),
  /* Spinner size for medium modifier */
  'spinner-size-medium': (2rem),
  /* Spinner size for large modifier */
  'spinner-size-large': (2.75rem),
  /* Split View background color. */
  'split-view-color-background': (rgb(243, 243, 243)),
  /* Split View background color on row hover. */
  'split-view-color-background-row-hover': (rgb(255, 255, 255)),
  /* Row dividers in Split View list */
  'split-view-color-border': (rgb(201, 201, 201)),
  /* Default width for split view container */
  'split-view-width': (25rem),
  /* Use for active tab. */
  'tabs-font-weight': (400),
  /* Vertical navigation shaded background color on row hover. */
  'vertical-navigation-color-background-shade-row-hover': (rgb(243, 243, 243)),
  /* Vertical navigation shaded background color on row active. */
  'vertical-navigation-color-background-shade-row-active': (rgb(243, 243, 243)),
  /* Text color for the Info section */
  'welcome-mat-text-color-info': (rgb(3, 45, 96)),
  /* Background Image Path for the Welcome Mat Info section */
  'welcome-mat-background-image-info': ("/welcome-mat/bg-info@2x.png"),
  /* Background overflow color for the Welcome Mat Info section */
  'welcome-mat-background-color-info': (rgb(207, 233, 254)),
  /* Progress Bar background is white */
  'welcome-mat-color-background-progress-bar': (rgb(255, 255, 255)),
  /* Box Shadow declaration */
  'welcome-mat-color-action-shadow': (rgba(0, 0, 0, 0.05)),
  /* Completed icon color for the Welcome Mat Boxes */
  'welcome-mat-color-icon-complete': (rgb(201, 201, 201)),
  /* Font size for the info title */
  'welcome-mat-font-size-info-title': (2.625rem),
  /* Welcome Mat Width */
  'welcome-mat-width': (52.0625rem),
  /* Min height for Overlay */
  'welcome-mat-min-height': (25rem),
  /* Max height for Overlay */
  'welcome-mat-max-height': (37.5rem),
  /* Welcome Mat Progress Bar width */
  'welcome-mat-width-progress-bar': (12.5rem),
  /* Size of the green completed check mark */
  'welcome-mat-complete-icon-size': (1.25rem),
  /* Size of the check mark in the green icon */
  'welcome-mat-check-size': (0.625rem),
  /* Bottom spacing (safe area) for background image */
  'welcome-mat-spacing-info': (7.75rem),
);