$primitive-map: (
  // Blue 10
  'palette-blue-10': (rgb(0, 22, 57)),
  // Blue 65
  'palette-blue-65': (rgb(87, 163, 253)),
  // Blue 15
  'palette-blue-15': (rgb(3, 35, 77)),
  // Blue 90
  'palette-blue-90': (rgb(216, 230, 254)),
  // Blue 80
  'palette-blue-80': (rgb(170, 203, 255)),
  // Blue 70
  'palette-blue-70': (rgb(120, 176, 253)),
  // Blue 60
  'palette-blue-60': (rgb(27, 150, 255)),
  // Blue 50
  'palette-blue-50': (rgb(1, 118, 211)),
  // Blue 40
  'palette-blue-40': (rgb(11, 92, 171)),
  // Blue 95
  'palette-blue-95': (rgb(238, 244, 255)),
  // Blue 30
  'palette-blue-30': (rgb(1, 68, 134)),
  // Blue 20
  'palette-blue-20': (rgb(3, 45, 96)),
  // Cloud Blue 90
  'palette-cloud-blue-90': (rgb(207, 233, 254)),
  // Cloud Blue 80
  'palette-cloud-blue-80': (rgb(144, 208, 254)),
  // Cloud Blue 70
  'palette-cloud-blue-70': (rgb(26, 185, 255)),
  // Cloud Blue 60
  'palette-cloud-blue-60': (rgb(13, 157, 218)),
  // Cloud Blue 50
  'palette-cloud-blue-50': (rgb(16, 124, 173)),
  // Cloud Blue 40
  'palette-cloud-blue-40': (rgb(5, 98, 138)),
  // Cloud Blue 95
  'palette-cloud-blue-95': (rgb(234, 245, 254)),
  // Cloud Blue 30
  'palette-cloud-blue-30': (rgb(8, 73, 104)),
  // Cloud Blue 20
  'palette-cloud-blue-20': (rgb(2, 50, 72)),
  // Cloud Blue 10
  'palette-cloud-blue-10': (rgb(0, 26, 40)),
  // Cloud Blue 65
  'palette-cloud-blue-65': (rgb(8, 171, 237)),
  // Cloud Blue 15
  'palette-cloud-blue-15': (rgb(10, 38, 54)),
  // Green 15
  'palette-green-15': (rgb(12, 41, 18)),
  // Green 90
  'palette-green-90': (rgb(205, 239, 196)),
  // Green 80
  'palette-green-80': (rgb(145, 219, 139)),
  // Green 70
  'palette-green-70': (rgb(69, 198, 90)),
  // Green 60
  'palette-green-60': (rgb(59, 167, 85)),
  // Green 50
  'palette-green-50': (rgb(46, 132, 74)),
  // Green 40
  'palette-green-40': (rgb(57, 101, 71)),
  // Green 95
  'palette-green-95': (rgb(235, 247, 230)),
  // Green 30
  'palette-green-30': (rgb(25, 78, 49)),
  // Green 20
  'palette-green-20': (rgb(28, 51, 38)),
  // Green 10
  'palette-green-10': (rgb(7, 27, 18)),
  // Green 65
  'palette-green-65': (rgb(65, 182, 88)),
  // Hot Orange 90
  'palette-hot-orange-90': (rgb(255, 222, 213)),
  // Hot Orange 80
  'palette-hot-orange-80': (rgb(254, 185, 165)),
  // Hot Orange 70
  'palette-hot-orange-70': (rgb(255, 144, 110)),
  // Hot Orange 60
  'palette-hot-orange-60': (rgb(255, 93, 45)),
  // Hot Orange 50
  'palette-hot-orange-50': (rgb(216, 58, 0)),
  // Hot Orange 40
  'palette-hot-orange-40': (rgb(170, 48, 1)),
  // Hot Orange 95
  'palette-hot-orange-95': (rgb(254, 241, 237)),
  // Hot Orange 30
  'palette-hot-orange-30': (rgb(126, 38, 0)),
  // Hot Orange 20
  'palette-hot-orange-20': (rgb(74, 36, 19)),
  // Hot Orange 10
  'palette-hot-orange-10': (rgb(40, 18, 2)),
  // Hot Orange 65
  'palette-hot-orange-65': (rgb(255, 120, 79)),
  // Hot Orange 15
  'palette-hot-orange-15': (rgb(66, 22, 4)),
  // Indigo 90
  'palette-indigo-90': (rgb(224, 229, 248)),
  // Indigo 80
  'palette-indigo-80': (rgb(190, 199, 246)),
  // Indigo 70
  'palette-indigo-70': (rgb(158, 169, 241)),
  // Indigo 60
  'palette-indigo-60': (rgb(127, 140, 237)),
  // Indigo 50
  'palette-indigo-50': (rgb(88, 103, 232)),
  // Indigo 40
  'palette-indigo-40': (rgb(58, 73, 218)),
  // Indigo 95
  'palette-indigo-95': (rgb(241, 243, 251)),
  // Indigo 30
  'palette-indigo-30': (rgb(47, 44, 183)),
  // Indigo 20
  'palette-indigo-20': (rgb(50, 29, 113)),
  // Indigo 10
  'palette-indigo-10': (rgb(32, 6, 71)),
  // Indigo 65
  'palette-indigo-65': (rgb(142, 155, 239)),
  // Indigo 15
  'palette-indigo-15': (rgb(31, 9, 116)),
  // Neutral 90
  'palette-neutral-90': (rgb(229, 229, 229)),
  // Neutral 80
  'palette-neutral-80': (rgb(201, 201, 201)),
  // Neutral 70
  'palette-neutral-70': (rgb(174, 174, 174)),
  // Neutral 100
  'palette-neutral-100': (rgb(255, 255, 255)),
  // Neutral 60
  'palette-neutral-60': (rgb(147, 147, 147)),
  // Neutral 50
  'palette-neutral-50': (rgb(116, 116, 116)),
  // Neutral 40
  'palette-neutral-40': (rgb(92, 92, 92)),
  // Neutral 95
  'palette-neutral-95': (rgb(243, 243, 243)),
  // Neutral 30
  'palette-neutral-30': (rgb(68, 68, 68)),
  // Neutral 20
  'palette-neutral-20': (rgb(46, 46, 46)),
  // Neutral 10
  'palette-neutral-10': (rgb(24, 24, 24)),
  // Orange 90
  'palette-orange-90': (rgb(254, 223, 208)),
  // Orange 80
  'palette-orange-80': (rgb(255, 186, 144)),
  // Orange 70
  'palette-orange-70': (rgb(254, 147, 57)),
  // Orange 60
  'palette-orange-60': (rgb(221, 122, 1)),
  // Orange 50
  'palette-orange-50': (rgb(169, 100, 4)),
  // Orange 40
  'palette-orange-40': (rgb(130, 81, 1)),
  // Orange 95
  'palette-orange-95': (rgb(255, 241, 234)),
  // Orange 30
  'palette-orange-30': (rgb(95, 62, 2)),
  // Orange 20
  'palette-orange-20': (rgb(62, 43, 2)),
  // Orange 10
  'palette-orange-10': (rgb(32, 22, 0)),
  // Orange 65
  'palette-orange-65': (rgb(243, 131, 3)),
  // Orange 15
  'palette-orange-15': (rgb(55, 30, 3)),
  // Pink 50
  'palette-pink-50': (rgb(227, 6, 106)),
  // Pink 40
  'palette-pink-40': (rgb(182, 5, 84)),
  // Pink 95
  'palette-pink-95': (rgb(254, 240, 243)),
  // Pink 30
  'palette-pink-30': (rgb(138, 3, 62)),
  // Pink 20
  'palette-pink-20': (rgb(97, 2, 42)),
  // Pink 65
  'palette-pink-65': (rgb(254, 114, 152)),
  // Pink 10
  'palette-pink-10': (rgb(55, 1, 20)),
  // Pink 15
  'palette-pink-15': (rgb(75, 6, 32)),
  // Pink 90
  'palette-pink-90': (rgb(253, 221, 227)),
  // Pink 80
  'palette-pink-80': (rgb(253, 182, 197)),
  // Pink 70
  'palette-pink-70': (rgb(254, 138, 167)),
  // Pink 60
  'palette-pink-60': (rgb(255, 83, 138)),
  // Purple 15
  'palette-purple-15': (rgb(48, 11, 96)),
  // Purple 90
  'palette-purple-90': (rgb(236, 225, 249)),
  // Purple 80
  'palette-purple-80': (rgb(215, 191, 242)),
  // Purple 70
  'palette-purple-70': (rgb(194, 158, 241)),
  // Purple 60
  'palette-purple-60': (rgb(173, 123, 238)),
  // Purple 50
  'palette-purple-50': (rgb(144, 80, 233)),
  // Purple 40
  'palette-purple-40': (rgb(117, 38, 227)),
  // Purple 95
  'palette-purple-95': (rgb(246, 242, 251)),
  // Purple 30
  'palette-purple-30': (rgb(90, 27, 169)),
  // Purple 20
  'palette-purple-20': (rgb(64, 16, 117)),
  // Purple 10
  'palette-purple-10': (rgb(36, 6, 67)),
  // Purple 65
  'palette-purple-65': (rgb(183, 141, 239)),
  // Red 90
  'palette-red-90': (rgb(254, 222, 216)),
  // Red 80
  'palette-red-80': (rgb(254, 184, 171)),
  // Red 70
  'palette-red-70': (rgb(254, 143, 125)),
  // Red 60
  'palette-red-60': (rgb(254, 92, 76)),
  // Red 50
  'palette-red-50': (rgb(234, 0, 30)),
  // Red 95
  'palette-red-95': (rgb(254, 241, 238)),
  // Red 40
  'palette-red-40': (rgb(186, 5, 23)),
  // Red 30
  'palette-red-30': (rgb(142, 3, 15)),
  // Red 20
  'palette-red-20': (rgb(100, 1, 3)),
  // Red 10
  'palette-red-10': (rgb(48, 12, 1)),
  // Red 65
  'palette-red-65': (rgb(254, 119, 101)),
  // Red 15
  'palette-red-15': (rgb(74, 12, 4)),
  // Teal 15
  'palette-teal-15': (rgb(7, 40, 37)),
  // Teal 90
  'palette-teal-90': (rgb(172, 243, 228)),
  // Teal 80
  'palette-teal-80': (rgb(4, 225, 203)),
  // Teal 70
  'palette-teal-70': (rgb(1, 195, 179)),
  // Teal 60
  'palette-teal-60': (rgb(6, 165, 154)),
  // Teal 50
  'palette-teal-50': (rgb(11, 130, 124)),
  // Teal 40
  'palette-teal-40': (rgb(5, 103, 100)),
  // Teal 95
  'palette-teal-95': (rgb(222, 249, 243)),
  // Teal 30
  'palette-teal-30': (rgb(2, 77, 76)),
  // Teal 20
  'palette-teal-20': (rgb(2, 52, 52)),
  // Teal 10
  'palette-teal-10': (rgb(7, 27, 18)),
  // Teal 65
  'palette-teal-65': (rgb(3, 180, 167)),
  // Violet 15
  'palette-violet-15': (rgb(61, 1, 87)),
  // Violet 90
  'palette-violet-90': (rgb(242, 222, 254)),
  // Violet 80
  'palette-violet-80': (rgb(229, 185, 254)),
  // Violet 70
  'palette-violet-70': (rgb(216, 146, 254)),
  // Violet 60
  'palette-violet-60': (rgb(203, 101, 255)),
  // Violet 50
  'palette-violet-50': (rgb(186, 1, 255)),
  // Violet 40
  'palette-violet-40': (rgb(150, 2, 199)),
  // Violet 95
  'palette-violet-95': (rgb(249, 240, 255)),
  // Violet 30
  'palette-violet-30': (rgb(115, 3, 148)),
  // Violet 20
  'palette-violet-20': (rgb(72, 26, 84)),
  // Violet 10
  'palette-violet-10': (rgb(46, 0, 57)),
  // Violet 65
  'palette-violet-65': (rgb(209, 125, 254)),
  // Yellow 70
  'palette-yellow-70': (rgb(228, 162, 1)),
  // Yellow 60
  'palette-yellow-60': (rgb(202, 133, 1)),
  // Yellow 50
  'palette-yellow-50': (rgb(168, 100, 3)),
  // Yellow 40
  'palette-yellow-40': (rgb(140, 75, 2)),
  // Yellow 95
  'palette-yellow-95': (rgb(251, 243, 224)),
  // Yellow 30
  'palette-yellow-30': (rgb(111, 52, 0)),
  // Yellow 20
  'palette-yellow-20': (rgb(79, 33, 0)),
  // Yellow 10
  'palette-yellow-10': (rgb(40, 18, 2)),
  // Yellow 65
  'palette-yellow-65': (rgb(215, 147, 4)),
  // Yellow 15
  'palette-yellow-15': (rgb(46, 34, 4)),
  // Yellow 90
  'palette-yellow-90': (rgb(249, 227, 182)),
  // Yellow 80
  'palette-yellow-80': (rgb(252, 192, 3)),
  // Used as the background color for the active state on rows or items on list-like components.
  'color-background-row-active': (rgb(243, 243, 243)),
  // 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, 243, 243)),
  // Dark color for UI elements related to errors. Accessible with white text.
  'color-background-error-dark': (rgb(186, 5, 23)),
  // Background color for UI elements related to providing neutral information (not error, success, or warning).
  'color-background-info': (rgb(116, 116, 116)),
  // Alternative background color for dark portions of the app.
  'color-background-alt-inverse': (rgb(3, 45, 96)),
  // Used as the background color for the new state on rows or items on list-like components.
  'color-background-row-new': (rgb(205, 239, 196)),
  // Dark color for UI elements that have to do with success. Accessible with white text.
  'color-background-success-dark': (rgb(46, 132, 74)),
  // Used as background for loading stencils on white background.
  'color-background-stencil': (rgb(243, 243, 243)),
  // Color for UI elements that have to do with warning.
  'color-background-warning': (rgb(254, 147, 57)),
  // Background color for highlighting text in search results.
  'color-background-highlight-search': (rgb(255, 240, 63)),
  // Hover color for UI elements related to destructive actions.
  'color-background-destructive-hover': (rgb(142, 3, 15)),
  // Default background color for the whole app.
  'color-background': (rgb(243, 243, 243)),
  // Our product brand blue, darkened to meet accessibility color contrast ratios with white text.
  'color-brand-dark': (rgb(1, 118, 211)),
  // The color of the mask overlay that appears when you enter a modal state.
  'color-background-backdrop': (rgba(255, 255, 255, 0.75)),
  // Dark variant of COLOR_BACKGROUND.
  'color-background-dark': (rgb(243, 243, 243)),
  // Our product brand blue.
  'color-brand': (rgb(27, 150, 255)),
  // Color for UI elements related to destructive actions.
  'color-background-destructive': (rgb(186, 5, 23)),
  // Color for UI elements that have to do with success.
  'color-background-success': (rgb(69, 198, 90)),
  // Dark Color for UI elements that have to do with warning.
  'color-background-warning-dark': (rgb(254, 147, 57)),
  // Color for UI elements related to the offline state.
  'color-background-offline': (rgb(68, 68, 68)),
  // Used as an alternate background for loading stencils on gray backgrounds.
  'color-background-stencil-alt': (rgb(243, 243, 243)),
  // Light variant of COLOR_BACKGROUND_INVERSE.
  'color-background-inverse-light': (rgb(3, 45, 96)),
  // Background color for UI elements related to the concept of an external user or customer.
  'color-background-customer': (rgb(254, 147, 57)),
  // Color for UI elements related to errors.
  'color-background-error': (rgb(254, 92, 76)),
  // Second default background color for the app.
  'color-background-alt': (rgb(255, 255, 255)),
  // Darker color for UI elements that have to do with success. Accessible with white text.
  'color-background-success-darker': (rgb(25, 78, 49)),
  // Used as the background color for selected rows or items on list-like components.
  'color-background-row-selected': (rgb(243, 243, 243)),
  // Our product brand blue, darkened even further.
  'color-brand-darker': (rgb(1, 68, 134)),
  // Background color for text selected with a mouse.
  'color-background-selection': (rgb(216, 230, 254)),
  // Active color for UI elements related to destructive actions.
  'color-background-destructive-active': (rgb(142, 3, 15)),
  // Default background color for dark portions of the app (like Stage Left or tooltips).
  'color-background-inverse': (rgb(0, 22, 57)),
  // Background color for highlighting UI elements.
  'color-background-highlight': (rgb(250, 255, 189)),
  // Dark alternative border color for UI elements related to errors.
  'color-border-error-dark': (rgb(254, 143, 125)),
  // Our product brand blue, darkened to meet accessibility color contrast ratios with white text.
  'color-border-brand-dark': (rgb(1, 68, 134)),
  // Border color for UI elements related to providing neutral information (not error, success, or warning).
  'color-border-info': (rgb(116, 116, 116)),
  // Border color for UI elements that have to do with warnings.
  'color-border-warning': (rgb(254, 147, 57)),
  // Hover border color for UI elements that have to do with destructive actions.
  'color-border-destructive-hover': (rgb(186, 5, 23)),
  // Default border color for UI elements.
  'color-border': (rgb(229, 229, 229)),
  // Dark alternative border color for UI elements that have to do with success.
  'color-border-success-dark': (rgb(46, 132, 74)),
  // Border color for UI elements that have to do with destructive actions.
  'color-border-destructive': (rgb(234, 0, 30)),
  // Darkest separator color - used as an alternate separator color when more differentiation is desired.
  'color-border-separator-alt-2': (rgb(201, 201, 201)),
  // 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(145, 219, 139)),
  // Lightest separator color - used as default separator on white backgrounds.
  'color-border-separator': (rgb(243, 243, 243)),
  // Our product brand blue.
  'color-border-brand': (rgb(27, 150, 255)),
  // Used to delineate the boundary of a component that is being clicked. Specific to builders.
  'color-border-selection-active': (rgb(243, 243, 243)),
  // Border color for UI elements that have to do with errors.
  'color-border-error': (rgb(234, 0, 30)),
  // Used to delineate the boundary of a component that is being hovered over. Specific to builders.
  'color-border-selection-hover': (rgb(27, 150, 255)),
  // Used as the border color for the hover state on selected rows or items on list-like components.
  'color-border-row-selected-hover': (rgb(27, 150, 255)),
  // Border color for UI elements related to the concept of an external user or customer.
  'color-border-customer': (rgb(254, 147, 57)),
  // Used to delineate the boundary of a selected component. Specific to builders.
  'color-border-selection': (rgb(1, 118, 211)),
  // Used as the border color for selected rows or items on list-like components.
  'color-border-row-selected': (rgb(1, 118, 211)),
  // Medium separator color - used as default separator on light gray backgrounds.
  'color-border-separator-alt': (rgb(229, 229, 229)),
  // Border color to match UI elements using color-background-inverse.
  'color-border-inverse': (rgb(0, 22, 57)),
  // Active border color for UI elements that have to do with destructive actions.
  'color-border-destructive-active': (rgb(142, 3, 15)),
  // Alternative border color for UI elements related to errors.
  'color-border-error-alt': (rgb(254, 143, 125)),
  // Used as a separator on dark backgrounds, such as stage left navigation.
  'color-border-separator-inverse': (rgb(3, 45, 96)),
  'border-radius-small': (0.125rem),
  // Icons in lists, record home icon, unbound input elements
  'border-radius-medium': (0.25rem),
  'border-radius-large': (0.5rem),
  // Circle for global use, action icon bgd shape
  'border-radius-circle': (50%),
  'border-width-thin': (1px),
  'border-width-thick': (2px),
  // Shadow for active states on interactive elements.
  'shadow-active': (0 0 2px #0176d3),
  // 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)),
  // 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),
  // Default font-family for Salesforce applications
  'font-family': (-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'),
  'font-family-heading': (-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'),
  'font-family-monospace': (Consolas, Menlo, Monaco, Courier, monospace),
  // Constant typography token for font size 1
  'font-size-1': (0.625rem),
  // Constant typography token for font size 2
  'font-size-2': (0.75rem),
  // Constant typography token for font size 3
  'font-size-3': (0.8125rem),
  // Variable typography token for font size 10
  'var-font-size-10': (2rem),
  // Constant typography token for font size 4
  'font-size-4': (0.875rem),
  // Variable typography token for font size 11
  'var-font-size-11': (2.625rem),
  // Constant typography token for font size 5
  'font-size-5': (1rem),
  // Constant typography token for font size 6
  'font-size-6': (1.125rem),
  // Constant typography token for font size 7
  'font-size-7': (1.25rem),
  // Constant typography token for font size 8
  'font-size-8': (1.5rem),
  // Variable typography token for font size 1
  'var-font-size-1': (0.625rem),
  // Constant typography token for font size 9
  'font-size-9': (1.75rem),
  // Variable typography token for font size 2
  'var-font-size-2': (0.75rem),
  // Variable typography token for font size 3
  'var-font-size-3': (0.8125rem),
  // Constant typography token for font size 10
  'font-size-10': (2rem),
  // Variable typography token for font size 4
  'var-font-size-4': (0.875rem),
  // Constant typography token for font size 11
  'font-size-11': (2.625rem),
  // Variable typography token for font size 5
  'var-font-size-5': (1rem),
  // Variable typography token for font size 6
  'var-font-size-6': (1.125rem),
  // Variable typography token for font size 7
  'var-font-size-7': (1.25rem),
  // Variable typography token for font size 8
  'var-font-size-8': (1.5rem),
  // Variable typography token for font size 9
  'var-font-size-9': (1.75rem),
  // 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),
  // Unitless line-heights for reusability
  'line-height-heading': (1.25),
  // Unitless line-heights for reusability
  'line-height-text': (1.5),
  // Remove extra leading. Unitless line-heights for reusability
  'line-height-reset': (1),
  // Variable unitless line-heights for reusability
  'var-line-height-text': (1.5),
  // 50% transparency of an element
  'opacity-5': (0.5),
  // 80% transparency of an element
  'opacity-8': (0.8),
  // Disabled state of BRAND_HEADER_CONTRAST_WEAK
  'brand-header-contrast-weak-disabled': (rgba(166, 166, 166, 0.25)),
  // Gray Color 11
  'color-gray-11': (rgb(62, 62, 60)),
  // Transparent value of BRAND_PRIMARY at 10%
  'brand-primary-transparent-10': (rgba(21, 137, 238, 0.1)),
  // Gray Color 12
  'color-gray-12': (rgb(43, 40, 38)),
  // These RGBA values need to be updated if BRAND_BACKGROUND_DARK changes, solves webkit bug
  'brand-background-dark-transparent': (rgba(1, 68, 134, 0)),
  // Gray Color 13
  'color-gray-13': (rgb(8, 7, 7)),
  // Background color a branded app header
  'brand-header': (rgb(255, 255, 255)),
  // Active / Hover state of BRAND_LIGHT
  'brand-light-active': (rgb(227, 229, 237)),
  // Variant of BRAND_HEADER_CONTRAST that provides a warm color
  'brand-header-contrast-warm': (rgb(186, 5, 23)),
  // Disabled state of BRAND_HEADER_ICON
  'brand-header-icon-disabled': (rgba(145, 145, 145, 0.25)),
  // Active / Hover state of BRAND_HEADER_CONTRAST
  'brand-header-contrast-active': (rgb(80, 80, 80)),
  // Primary page background color
  'brand-background-primary': (rgb(238, 244, 255)),
  // Primary brand color
  'brand-primary': (rgb(27, 150, 255)),
  // Active / Hover state of BRAND_HEADER_CONTRAST_WEAK
  'brand-header-contrast-weak-active': (rgb(129, 129, 129)),
  // Active / Hover state of BRAND_CONTRAST
  'brand-contrast-active': (rgb(13, 14, 18)),
  // Variant of BRAND_HEADER_CONTRAST that provides a cool color
  'brand-header-contrast-cool': (rgb(1, 68, 134)),
  // Variant of BRAND_HEADER that is accessible with BRAND_HEADER
  'brand-header-contrast-inverse': (rgb(255, 255, 255)),
  // Dark variant of BRAND that is accessible with light colors
  'brand-dark': (rgb(1, 118, 211)),
  // Dark variant of BRAND that is accessible with white
  'brand-accessible': (rgb(1, 118, 211)),
  // Dark variant of BRAND_BACKGROUND_PRIMARY, used within gradient of background color
  'brand-background-dark': (rgb(1, 68, 134)),
  // Active / Hover state of BRAND_TEXT_LINK
  'brand-text-link-active': (rgb(1, 68, 134)),
  // Gray Color 1
  'color-gray-1': (rgb(255, 255, 255)),
  // Gray Color 2
  'color-gray-2': (rgb(250, 250, 249)),
  // Active / Hover state of BRAND_HEADER_ICON
  'brand-header-icon-active': (rgb(129, 129, 129)),
  // Gray Color 3
  'color-gray-3': (rgb(243, 242, 242)),
  // Icons of BRAND_HEADER that is accessible with BRAND_HEADER
  'brand-header-icon': (rgb(145, 145, 145)),
  // Disabled state of BRAND_A11Y
  'brand-disabled': (rgb(201, 199, 197)),
  // Primary text link brand color
  'brand-text-link': (rgb(1, 118, 211)),
  // Gray Color 4
  'color-gray-4': (rgb(236, 235, 234)),
  // Gray Color 5
  'color-gray-5': (rgb(221, 219, 218)),
  // Gray Color 6
  'color-gray-6': (rgb(201, 199, 197)),
  // Active / Hover state of BRAND_A11Y
  'brand-accessible-active': (rgb(1, 68, 134)),
  // Gray Color 7
  'color-gray-7': (rgb(176, 173, 171)),
  // Active / Hover state of BRAND_DARK
  'brand-dark-active': (rgb(37, 48, 69)),
  // Gray Color 8
  'color-gray-8': (rgb(150, 148, 146)),
  // Active / Hover state of BRAND_HEADER_CONTRAST
  'brand-header-contrast-inverse-active': (rgb(238, 238, 238)),
  // Active / Hover state of BRAND_HEADER_CONTRAST_COOL
  'brand-header-contrast-cool-active': (rgb(1, 68, 134)),
  // Gray Color 9
  'color-gray-9': (rgb(112, 110, 107)),
  // Variant of BRAND that is accessible with BRAND
  'brand-contrast': (rgb(26, 27, 30)),
  // Weak contrast ratio, useful for iconography
  'brand-header-contrast-weak': (rgb(145, 145, 145)),
  // Active / Hover state of BRAND_PRIMARY
  'brand-primary-active': (rgb(1, 118, 211)),
  // These RGBA values need to be updated if BRAND_BACKGROUND_PRIMARY changes, solves webkit bug
  'brand-background-primary-transparent': (rgba(176, 196, 223, 0)),
  // Variant of BRAND_HEADER that is accessible with BRAND_HEADER
  'brand-header-contrast': (rgb(94, 94, 94)),
  // Transparent value of BRAND_PRIMARY
  'brand-primary-transparent': (rgba(21, 137, 238, 0.1)),
  // Active / Hover state of BRAND_HEADER_CONTRAST_WARM
  'brand-header-contrast-warm-active': (rgb(186, 5, 23)),
  // Transparent value of BRAND_PRIMARY at 40%
  'brand-primary-transparent-40': (rgba(21, 137, 238, 0.4)),
  // Light variant of BRAND that is accessible with dark colors
  'brand-light': (rgb(244, 246, 254)),
  // Gray Color 10
  'color-gray-10': (rgb(81, 79, 77)),
  // Generic sizing token scale for UI components.
  'size-x-small': (12rem),
  // Generic sizing token scale for UI components.
  'size-xxx-small': (3rem),
  // Large utility icon without border.
  'square-icon-utility-large': (1.5rem),
  // Generic sizing token scale for UI components.
  'size-xx-small': (6rem),
  // Search Results: Outer colored tile
  'square-icon-small-boundary': (1.5rem),
  // Generic sizing token scale for UI components.
  'size-small': (15rem),
  // Medium utility icon without border.
  'square-icon-utility-medium': (1.25rem),
  // Very small icon button boundary.
  'square-icon-x-small-boundary': (1.25rem),
  // Small utility icon without border.
  'square-icon-utility-small': (1rem),
  // Stage left & actions: Outer colored tile
  'square-icon-medium-boundary': (2rem),
  // Anchor: Icon content (white shape)
  'square-icon-large-content': (2rem),
  // Anchor: Outer colored tile
  'square-icon-large-boundary': (3rem),
  // Generic sizing token scale for UI components.
  'size-medium': (20rem),
  // Stage left & actions: Icon content (white shape)
  'square-icon-medium-content': (1rem),
  // Generic sizing token scale for UI components.
  'size-x-large': (40rem),
  // Very small icons in icon buttons.
  'square-icon-x-small-content': (0.5rem),
  // Variable medium boundary for square icons
  'var-square-icon-medium-boundary': (2rem),
  // Icon button boundary.
  'square-icon-medium-boundary-alt': (2.25rem),
  // Generic sizing token scale for UI components.
  'size-xx-large': (60rem),
  // Anchor: avatar
  'square-icon-large-boundary-alt': (5rem),
  // Generic sizing token scale for UI components.
  'size-large': (25rem),
  // Search Results: Icon content (white shape)
  'square-icon-small-content': (0.75rem),
  // Very very small icon button boundary.
  'square-icon-xx-small-boundary': (1rem),
  // Alternate medium tap target size
  'square-icon-medium-content-alt': (0.875rem),
  // Variable spacing token for size X Large
  'var-spacing-x-large': (2rem),
  // Variable horizontal spacing token for size Small
  'var-spacing-horizontal-small': (0.75rem),
  // Variable horizontal spacing token for size XX Large
  'var-spacing-horizontal-xx-large': (3rem),
  // Constant spacing token for size X small
  'spacing-x-small': (0.5rem),
  // Constant spacing token for size XXX small
  'spacing-xxx-small': (0.125rem),
  // Constant spacing token for size XX small
  'spacing-xx-small': (0.25rem),
  // Variable vertical spacing token for size Large
  'var-spacing-vertical-large': (1.5rem),
  // Variable spacing token for size Large
  'var-spacing-large': (1.5rem),
  // Variable spacing token for size Medium
  'var-spacing-medium': (1rem),
  // Variable vertical spacing token for size Medium
  'var-spacing-vertical-medium': (1rem),
  // Variable vertical spacing token for size X Small
  'var-spacing-vertical-x-small': (0.5rem),
  // Constant spacing token for size Small
  'spacing-small': (0.75rem),
  // Variable vertical spacing token for size XXX Small
  'var-spacing-vertical-xxx-small': (0.125rem),
  // Variable spacing token for size X Small
  'var-spacing-x-small': (0.5rem),
  // Variable spacing token for size XXX Small
  'var-spacing-xxx-small': (0.125rem),
  // Variable horizontal spacing token for size X Large
  'var-spacing-horizontal-x-large': (2rem),
  // Variable horizontal spacing token for size XX Small
  'var-spacing-horizontal-xx-small': (0.25rem),
  // Variable spacing token for size XX Large
  'var-spacing-xx-large': (3rem),
  // Constant spacing token for size Medium
  'spacing-medium': (1rem),
  // Variable vertical spacing token for size XX Large
  'var-spacing-vertical-xx-large': (3rem),
  // Variable vertical spacing token for size Small
  'var-spacing-vertical-small': (0.75rem),
  // Variable spacing token for size Small
  'var-spacing-small': (0.75rem),
  // Constant spacing token for 0
  'spacing-none': (0),
  // Variable horizontal spacing token for size Large
  'var-spacing-horizontal-large': (1.5rem),
  // Constant spacing token for size X Large
  'spacing-x-large': (2rem),
  // Constant spacing token for size XX Large
  'spacing-xx-large': (3rem),
  // Variable horizontal spacing token for size XXX Small
  'var-spacing-horizontal-xxx-small': (0.125rem),
  // Variable horizontal spacing token for size X Small
  'var-spacing-horizontal-x-small': (0.5rem),
  // Variable spacing token for size XX Small
  'var-spacing-xx-small': (0.25rem),
  // Variable horizontal spacing token for size Medium
  'var-spacing-horizontal-medium': (1rem),
  // Variable vertical spacing token for size XX Small
  'var-spacing-vertical-xx-small': (0.25rem),
  // Variable vertical spacing token for size X Large
  'var-spacing-vertical-x-large': (2rem),
  // Constant spacing token for size Large
  'spacing-large': (1.5rem),
  // Action label text color
  'color-text-action-label': (rgb(68, 68, 68)),
  // Link color on dark background
  'color-text-link-inverse': (rgb(255, 255, 255)),
  // Link color on dark background - active state
  'color-text-link-inverse-active': (rgba(255, 255, 255, 0.5)),
  // Action label active text color
  'color-text-action-label-active': (rgb(24, 24, 24)),
  // Color for texts or icons that are related to warnings on a dark background.
  'color-text-warning': (rgb(254, 147, 57)),
  // Focus link text
  'color-text-link-focus': (rgb(1, 68, 134)),
  // Text color for destructive actions - hover state
  'color-text-destructive-hover': (rgb(186, 5, 23)),
  // Disabled link text
  'color-text-link-disabled': (rgb(3, 45, 96)),
  // Body text color
  'color-text-default': (rgb(24, 24, 24)),
  // Text color for destructive actions
  'color-text-destructive': (rgb(234, 0, 30)),
  // Hover link text
  'color-text-link-hover': (rgb(1, 68, 134)),
  // Text color for success text.
  'color-text-success': (rgb(46, 132, 74)),
  // Color for text that is purposefully de-emphasized to create visual hierarchy.
  'color-text-weak': (rgb(68, 68, 68)),
  // Input placeholder text on dark backgrounds.
  'color-text-placeholder-inverse': (rgb(243, 243, 243)),
  // Link text (508)
  'color-text-link': (rgb(1, 118, 211)),
  // Color for texts that are related to warnings on a light background.
  'color-text-warning-alt': (rgb(140, 75, 2)),
  // Default icon color.
  'color-text-icon-default': (rgb(116, 116, 116)),
  // Our product brand blue.
  'color-text-brand': (rgb(27, 150, 255)),
  // Error text for inputs and error misc
  'color-text-error': (rgb(234, 0, 30)),
  // Customer text used in anchor subtitle
  'color-text-customer': (rgb(254, 147, 57)),
  // Text color found on any primary brand color
  'color-text-brand-primary': (rgb(255, 255, 255)),
  // Active link text
  'color-text-link-active': (rgb(3, 45, 96)),
  // Color of required field marker.
  'color-text-required': (rgb(234, 0, 30)),
  // Link color on dark background - disabled state
  'color-text-link-inverse-disabled': (rgba(255, 255, 255, 0.15)),
  // Inverse text color for dark backgrounds
  'color-text-inverse': (rgb(255, 255, 255)),
  // Input placeholder text.
  'color-text-placeholder': (rgb(116, 116, 116)),
  // Weak inverse text color for dark backgrounds
  'color-text-inverse-weak': (rgb(174, 174, 174)),
  // Link color on dark background - hover state
  'color-text-link-inverse-hover': (rgba(255, 255, 255, 0.75)),
  // Text color for success text on dark backgrounds.
  'color-text-success-inverse': (rgb(69, 198, 90)),
  // Text color for field labels.
  'color-text-label': (rgb(68, 68, 68)),
  // Tap target size for elements that rely on width and height dimensions
  'square-tappable': (2.75rem),
  // Small tap target size for elements that rely on width and height dimensions
  'square-tappable-small': (2rem),
  // X-small tap target size for elements that rely on width and height dimensions
  'square-tappable-x-small': (1.5rem),
  // Xx-small tap target size for elements that rely on width and height dimensions
  'square-tappable-xx-small': (1.25rem),
  // Tap target size for elements that rely on height or line-height
  'height-tappable': (2.75rem),
  // Small tap target size for elements that rely on height or line-height
  'height-tappable-small': (2rem),
  // Dropdown
  'z-index-dropdown': (7000),
  // Docked element
  'z-index-docked': (4),
  // Notifications under modals
  'z-index-reminder': (8500),
  // Spinner
  'z-index-spinner': (9050),
  // Default
  'z-index-default': (1),
  // Deep dive
  'z-index-deepdive': (-99999),
  // Toasts
  'z-index-toast': (10000),
  // Dialog
  'z-index-dialog': (6000),
  // Popup
  'z-index-popup': (5000),
  // Modal
  'z-index-modal': (9000),
  // Stickied element
  'z-index-sticky': (100),
  // Overlay
  'z-index-overlay': (8000),
);