$ui-force-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(201, 201, 201)),
  /* 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(201, 201, 201)),
  /* 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(221, 219, 218, 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(250, 250, 249)),
  /* 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(232, 232, 232)),
  /* 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(11, 92, 171)),
  /* 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(116, 116, 116)),
  /* 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(3, 45, 96)),
  /* 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(3, 45, 96)),
  /* 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(116, 116, 116)),
  /* 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(116, 116, 116)),
  /* 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),
  /* Brandable modal header */
  'color-background-modal-brand': (rgb(1, 68, 134)),
  /* Background color for notification list item. */
  'color-background-notification': (rgb(255, 255, 255)),
  /* Notifications badge background color. */
  'color-background-notification-badge-active': (rgb(3, 45, 96)),
  /* Notifications badge background color. */
  'color-background-notification-badge-hover': (rgb(1, 68, 134)),
  'color-contrast-primary': (rgb(243, 243, 243)),
  'color-foreground-primary': (rgb(255, 255, 255)),
  /* 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)),
  /* Color of the indicator dot. */
  'color-background-indicator-dot': (rgb(3, 45, 96)),
  /* Used when further differentiation is needed because colorBackground and colorBackgroundAlt are both being used in close proximity. */
  'color-background-alt-2': (rgb(243, 243, 243)),
  /* Hover color for utility bar item. */
  'color-background-utility-bar-hover': (rgb(243, 243, 243)),
  /* Brand hover fill color */
  'fill-brand-hover': (rgb(1, 68, 134)),
  /* Brand fill color */
  'fill-brand': (rgb(1, 118, 211)),
  /* Background color for default desktop chrome (ex. global header) */
  'color-background-chrome-desktop': (rgb(255, 255, 255)),
  /* Active button backgrounds on modal headers */
  'color-background-modal-button-active': (rgba(0, 0, 0, 0.16)),
  /* Selected checkboxes */
  'color-background-input-checkbox-selected': (rgb(27, 150, 255)),
  /* Default checkboxes */
  'color-background-input-checkbox': (rgb(255, 255, 255)),
  'color-background-primary': (rgb(255, 255, 255)),
  /* 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)),
  'color-background-brand-primary-focus': (rgb(1, 68, 134)),
  'color-background-brand-primary-active': (rgb(3, 45, 96)),
  'color-background-brand-primary-hover': (rgb(1, 68, 134)),
  /* Background color for default mobile chrome (ex. global header) */
  'color-background-chrome-mobile': (rgb(1, 118, 211)),
  /* Background color for search input fields. */
  'color-background-input-search': (rgba(0, 0, 0, 0.16)),
  'color-contrast-secondary': (rgb(255, 255, 255)),
  /* Secondary top bar background color (child browser, file preview, etc.) */
  'color-background-browser': (rgb(116, 116, 116)),
  'color-background-brand-primary': (rgb(1, 118, 211)),
  /* 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)),
  /* Used as gray background when more contrast is desired. */
  'color-background-shade': (rgb(243, 243, 243)),
  /* Standard modal header */
  'color-background-modal': (rgb(255, 255, 255)),
  /* Hovered active toggle background color. */
  'color-background-toggle-active-hover': (rgb(1, 68, 134)),
  /* Background color for payloads in the feed. */
  'color-background-payload': (rgb(243, 243, 243)),
  /* Button backgrounds on modal headers */
  'color-background-modal-button': (rgba(0, 0, 0, 0.07)),
  /* Brand active fill color */
  'fill-brand-active': (rgb(3, 45, 96)),
  /* Active color for utility bar item. */
  'color-background-utility-bar-active': (rgb(27, 150, 255)),
  /* Stage left org switcher dropdown arrow background color. */
  'color-background-org-switcher-arrow': (rgb(0, 22, 57)),
  /* Active toggle background color. */
  'color-background-toggle-active': (rgb(1, 68, 134)),
  /* Alternative color for UI elements related to errors. */
  'color-background-error-alt': (rgb(254, 143, 125)),
  /* Winter 18 token, this has been deprecated. Please use BRAND_BACKGROUND_PRIMARY instead. */
  'page-color-background-primary': (rgb(255, 255, 255)),
  /* Used as gray background in conjunction with Shade when more contrast is desired. */
  'color-background-shade-dark': (rgb(201, 201, 201)),
  /* Notifications badge background color. */
  'color-background-notification-badge-focus': (rgb(1, 68, 134)),
  /* Background for utility icons that live in the action bar on mobile. */
  'color-background-actionbar-icon-utility': (rgb(116, 116, 116)),
  'color-background-secondary': (rgb(243, 243, 243)),
  /* The borders to create the checkmark */
  'color-border-input-checkbox-selected-checkmark': (rgb(255, 255, 255)),
  /* Disabled stroke color. */
  'color-stroke-disabled': (rgb(243, 243, 243)),
  /* Active stroke color for our product brand blue. */
  'color-stroke-brand-active': (rgb(3, 45, 96)),
  'color-border-primary': (rgb(201, 201, 201)),
  'color-border-brand-primary-focus': (rgb(1, 118, 211)),
  'color-border-brand-primary-hover': (rgb(1, 118, 211)),
  /* Border color for brandable primary button */
  'color-border-button-brand': (rgb(1, 118, 211)),
  'color-border-brand-primary-active': (rgb(3, 45, 96)),
  'color-border-brand-primary': (rgb(27, 150, 255)),
  'color-border-button-focus-inverse': (rgb(243, 243, 243)),
  /* 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(1, 68, 134)),
  /* Used to delineate the boundary of a selected canvas element. Specific to builders. */
  'color-border-canvas-element-selection': (rgb(26, 185, 255)),
  /* Hover stroke color for our product brand blue. */
  'color-stroke-brand-hover': (rgb(1, 118, 211)),
  /* Stroke color for our global header buttons. */
  'color-stroke-header-button': (rgb(174, 174, 174)),
  'color-border-link-focus-inverse': (rgb(243, 243, 243)),
  /* Our product brand blue. */
  'color-stroke-brand': (rgb(1, 118, 211)),
  /* Used to delineate the boundary of a specific region. Specific to builders. */
  'color-border-hint': (rgb(3, 45, 96)),
  /* Deprecated */
  'elevation-32': (32),
  /* Deprecated */
  'elevation-shadow-16': (0 16px 16px 0 rgba(0, 0, 0, 0.16)),
  /* Deprecated */
  'elevation-inverse-shadow-0': (none),
  /* 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 #f3f3f3),
  /* 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-16': (16),
  /* Deprecated */
  'elevation-shadow-3-below': (0 3px 3px 0 rgba(0, 0, 0, 0.16) inset),
  'shadow-soft-primary-hover': (none),
  /* Deprecated */
  'elevation-inverse-shadow-8': (0 -8px 8px 0 rgba(0, 0, 0, 0.16)),
  /* Soft dropshadow found on general UI elements such as containers */
  'shadow-soft-primary': (none),
  /* Deprecated */
  'elevation-inverse-shadow-32': (0 -32px 32px 0 rgba(0, 0, 0, 0.16)),
  /* Hard dropshadow found on general UI elements such as containers */
  'shadow-hard-primary': (none),
  /* Shadow above overflow menu close bar. */
  'shadow-action-overflow-footer': (0 -2px 4px #f3f3f3),
  /* Deprecated */
  'elevation-0': (0),
  /* Deprecated */
  'elevation-3-inset': (-3),
  /* Deprecated */
  'elevation-2': (2),
  /* Shadow for overlays. */
  'shadow-overlay': (0 -2px 4px rgba(0, 0, 0, 0.07)),
  /* Shadow for buttons. */
  'shadow-button': (0 1px 1px 0 rgba(0, 0, 0, 0.05)),
  /* Deprecated */
  'elevation-4': (4),
  /* Deprecated */
  'elevation-shadow-0': (none),
  /* Deprecated */
  'elevation-inverse-shadow-16': (0 -16px 16px 0 rgba(0, 0, 0, 0.16)),
  /* Deprecated */
  'elevation-shadow-2': (0 2px 2px 0 rgba(0, 0, 0, 0.16)),
  /* Deprecated */
  'elevation-8': (8),
  /* Deprecated */
  'elevation-shadow-4': (0 4px 4px 0 rgba(0, 0, 0, 0.16)),
  /* Inset shadow for editable grid */
  'shadow-focus-inset': (0 0 2px 2px #1b96ff inset),
  /* Deprecated */
  'elevation-inverse-shadow-3-below': (0 -3px 3px 0 rgba(0, 0, 0, 0.16) inset),
  'shadow-soft-primary-active': (none),
  /* Deprecated */
  'elevation-shadow-8': (0 8px 8px 0 rgba(0, 0, 0, 0.16)),
  /* Shadow on images. */
  'shadow-image': (0 1px 1px rgba(0, 0, 0, 0.16)),
  /* Deprecated */
  'elevation-shadow-32': (0 32px 32px 0 rgba(0, 0, 0, 0.16)),
  /* Medium headings. */
  'font-size-heading-medium': (1.125rem),
  'font-size-medium': (1rem),
  /* Small body text. */
  'font-size-text-small': (0.8125rem),
  'font-size-medium-a': (1.125rem),
  'font-size-x-large': (1.5rem),
  'font-size-x-large-a': (1.57rem),
  /* Extra large headings. */
  'font-size-heading-x-large': (1.75rem),
  'font-size-xx-large': (2rem),
  /* Extra extra small text. */
  'font-size-text-xx-small': (0.625rem),
  'font-size-large': (1.25rem),
  /* Large headings. */
  'font-size-heading-large': (1.5rem),
  /* Extra large body text. */
  'font-size-text-x-large': (1.25rem),
  'font-size-x-small': (0.625rem),
  /* Extra Extra small headings. */
  'font-size-heading-xx-small': (0.625rem),
  /* Extra small headings. */
  'font-size-heading-x-small': (0.75rem),
  /* Large body text. */
  'font-size-text-large': (1.125rem),
  'font-size-small': (0.875rem),
  /* Medium body text. */
  'font-size-text-medium': (1rem),
  /* Extra small body text. */
  'font-size-text-x-small': (0.75rem),
  /* Small headings. */
  'font-size-heading-small': (0.875rem),
  /* Deprecated: use FONT_FAMILY instead for regular body text and FONT_FAMILY_HEADING for headings. */
  'font-family-text': (-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'),
  /* Use squareIconMediumBoundary */
  'square-icon-medium': (2.375rem),
  /* Small tap target size */
  'square-icon-small': (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),
  'component-spacing-margin': (0),
  'component-spacing-padding': (1rem),
  /* 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)),
  /* Color for text on a selected tab in a tab group. */
  'color-text-tab-label-selected': (rgb(1, 118, 211)),
  /* 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)),
  /* Color for disabled text in a tab group. */
  'color-text-tab-label-disabled': (rgb(243, 243, 243)),
  /* Tertiary body text color */
  'color-text-tertiary': (rgb(116, 116, 116)),
  /* Active state on a standalone link on a dark background. */
  'color-text-inverse-active': (rgb(26, 185, 255)),
  /* Primary body text color */
  'color-text-primary': (rgb(3, 45, 96)),
  'color-text-link-primary-focus': (rgb(1, 118, 211)),
  /* Color for text in focus state in a tab group. */
  'color-text-tab-label-focus': (rgb(1, 68, 134)),
  /* 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(243, 243, 243)),
  /* Text color for pills. */
  'color-text-pill': (rgb(1, 118, 211)),
  'color-text-link-primary-hover': (rgb(1, 118, 211)),
  /* Color for text in active state in a tab group. */
  'color-text-tab-label-active': (rgb(3, 45, 96)),
  /* Color for text in hover state in a tab group. */
  'color-text-tab-label-hover': (rgb(1, 68, 134)),
  /* Color for text on toast messages. */
  'color-text-toast': (rgb(243, 243, 243)),
  /* Color for disabled toggles */
  'color-text-toggle-disabled': (rgb(201, 201, 201)),
  /* Top bar icon color */
  'color-text-browser': (rgb(255, 255, 255)),
  'color-text-link-primary-active': (rgb(3, 45, 96)),
  'color-text-link-primary': (rgb(1, 118, 211)),
  /* Top bar active icon color */
  'color-text-browser-active': (rgba(0, 0, 0, 0.4)),
  /* Color for non-interactive icons that represent a selected item in a list */
  'color-text-icon-brand': (rgb(1, 118, 211)),
  /* Hover state on a standalone link on a dark background. */
  'color-text-inverse-hover': (rgb(174, 174, 174)),
  /* Modal header title */
  'color-text-modal': (rgb(255, 255, 255)),
  /* Modal header button text color */
  'color-text-modal-button': (rgb(116, 116, 116)),
  /* Color for interactive utility icons */
  'color-text-icon-utility': (rgb(174, 174, 174)),
  /* Secondary body text color */
  'color-text-secondary': (rgb(116, 116, 116)),
  /* Text in stage left navigation. */
  'color-text-stage-left': (rgb(243, 243, 243)),
  /* Default value for text-transform */
  'text-transform': (none),
  /* Background color for a new notification list item. */
  'color-background-notification-new': (rgb(243, 243, 243)),
  /* Focused header button icon color */
  'fill-header-button-focus': (rgb(1, 118, 211)),
  /* Background color for reminder notification on hover */
  'color-background-reminder-hover': (rgb(255, 255, 255)),
  /* Notifications badge background color. */
  'color-background-notification-badge': (rgb(234, 0, 30)),
  /* Hovered header button icon color */
  'fill-header-button-hover': (rgb(1, 68, 134)),
  /* Disabled input */
  'color-background-input-disabled': (rgb(243, 243, 243)),
  /* Hovered toggle background color. */
  'color-background-toggle-hover': (rgb(147, 147, 147)),
  /* Background color for reminder notification */
  'color-background-reminder': (rgb(243, 243, 243)),
  /* Hovered background color for success buttons */
  'color-background-button-success-hover': (rgb(46, 132, 74)),
  /* Header button icon color */
  'fill-header-button': (rgb(174, 174, 174)),
  /* Toggle background color. */
  'color-background-toggle': (rgb(174, 174, 174)),
  /* Background color for success buttons */
  'color-background-button-success': (rgb(69, 198, 90)),
  /* Disabled checkboxes */
  'color-background-input-checkbox-disabled': (rgb(201, 201, 201)),
  /* Background color for pills. */
  'color-background-pill': (rgb(255, 255, 255)),
  /* Color of the spinner dot. */
  'color-background-spinner-dot': (rgb(174, 174, 174)),
  /* The color of the mask overlay that provides user feedback on interaction. */
  'color-background-backdrop-tint': (rgb(243, 243, 243)),
  /* Selected input field (when user has clicked or tabbed into field) */
  'color-background-input-active': (rgb(255, 255, 255)),
  /* The background color of an internal scrollbar. */
  'color-background-scrollbar': (rgb(243, 243, 243)),
  /* Disabled toggle background color. */
  'color-background-toggle-disabled': (rgb(174, 174, 174)),
  /* Background color for toast messaging. */
  'color-background-toast': (rgb(116, 116, 116)),
  /* Background color of comment posts in the feed. */
  'color-background-post': (rgb(243, 243, 243)),
  /* Default input field */
  'color-background-input': (rgb(255, 255, 255)),
  /* Background color for success toast messaging. */
  'color-background-toast-success': (rgb(46, 132, 74)),
  /* 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)),
  /* Active background color for success buttons */
  'color-background-button-success-active': (rgb(46, 132, 74)),
  /* Background color for error toast messaging. */
  'color-background-toast-error': (rgb(234, 0, 30)),
  /* The background color of an internal scrollbar track. */
  'color-background-scrollbar-track': (rgb(201, 201, 201)),
  /* Background color for input field that has encountered an error. */
  'color-background-input-error': (rgb(253, 221, 227)),
  /* Border color for disabled inverse button. */
  'color-border-button-inverse-disabled': (rgba(255, 255, 255, 0.15)),
  /* 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 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)),
  /* Border color for an active tab. */
  'color-border-tab-active': (rgb(255, 255, 255)),
  /* Border color on disabled form elements. */
  'color-border-input-disabled': (rgb(201, 201, 201)),
  /* Border color on notification reminders. */
  'color-border-reminder': (rgb(243, 243, 243)),
  /* 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(201, 201, 201)),
  /* Border color on active form elements. */
  'color-border-input-active': (rgb(27, 150, 255)),
  /* Border color on form elements. */
  'color-border-input': (rgb(201, 201, 201)),
  /* These borders create the faux checkmark when the checkbox toggle is in the checked state. */
  'color-border-toggle-checked': (rgb(255, 255, 255)),
  /* Border color for a selected tab in a tab group. */
  'color-border-tab-selected': (rgb(1, 118, 211)),
  'border-stroke-width-thin': (1px),
  'border-stroke-width-thick': (2px),
  /* Shadow for notifications that should be elevated above other components but under modals. */
  'shadow-reminder': (0 2px 3px 0 rgba(0, 0, 0, 0.20)),
  /* Custom glow for focus states on UI elements with explicit containers. */
  'shadow-button-focus': (0 0 3px #0176d3),
  /* Custom glow for focus states on UI button elements with explicit containers on dark or vibrantly colored backgrounds. */
  'shadow-button-focus-inverse': (0 0 3px #f3f3f3),
  /* Shadow to make inline edit card pop out. */
  'shadow-inline-edit': (0 2px 4px 4px rgba(0, 0, 0, 0.16)),
  /* 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 for header. */
  'shadow-header': (0 2px 4px rgba(0, 0, 0, 0.07)),
  /* 4.8 seconds */
  'duration-toast-short': (4.8s),
  /* 9.6 seconds */
  'duration-toast-medium': (9.6s),
  'illustration-empty-state-assistant': ("/assets/images/illustrations/empty-state-assistant.svg"),
  'illustration-empty-state-events': ("/assets/images/illustrations/empty-state-events.svg"),
  'illustration-empty-state-tasks': ("/assets/images/illustrations/empty-state-tasks.svg"),
  'banner-user-default-image': (""),
  'banner-group-default-image': (""),
  'user-default-avatar': ("/profile_avatar_200.png"),
  'user-default-avatar-medium': ("/profile_avatar_160.png"),
  'user-default-avatar-small': ("/profile_avatar_96.png"),
  'group-default-avatar': ("/group_avatar_200.png"),
  'group-default-avatar-medium': ("/group_avatar_160.png"),
  'group-default-avatar-small': ("/group_avatar_96.png"),
  /* Line heights for tabs */
  'line-height-tab': (2.5rem),
  'border-radius-pill': (15rem),
  /* Minimum height of a pill. */
  'height-pill': (1.625rem),
  /* Brand header. Phone 44px; Tablet 50px */
  'height-header': (2.75rem),
  /* Action footer menu. Phone 44px; Tablet 50px */
  'height-footer': (3.75rem),
  /* Text input height */
  'height-input': (1.875rem),
  /* Stage left for desktop when closed (showing icons only). */
  'width-stage-left-collapsed': (4rem),
  /* Stage left for desktop when open. */
  'width-stage-left-expanded': (15rem),
  /* Maximum width for action overflow menu so that it's not full-screen for tablet. */
  'max-width-action-overflow-menu': (512px),
  /* Default amount of line breaks before text is truncated */
  'line-clamp': (3),
  /* Icon color on dark background */
  'color-text-icon-inverse': (rgb(255, 255, 255)),
  /* 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.5)),
  /* Input icon */
  'color-text-input-icon': (rgb(174, 174, 174)),
  /* Icon color on dark background - active state */
  'color-text-icon-inverse-active': (rgb(255, 255, 255)),
  /* Text color for default secondary button - hover state */
  'color-text-button-default-hover': (rgb(1, 118, 211)),
  /* Input disabled text */
  'color-text-input-disabled': (rgb(116, 116, 116)),
  /* Text color for default secondary button */
  'color-text-button-default': (rgb(1, 118, 211)),
  /* Default icon color - disabled state */
  'color-text-icon-default-disabled': (rgb(201, 201, 201)),
  /* Text color for brandable primary button - disabled state */
  'color-text-button-brand-disabled': (rgb(255, 255, 255)),
  /* Text color for brandable primary button - hover state */
  'color-text-button-brand-hover': (rgb(255, 255, 255)),
  /* Default icon color - hover state. */
  'color-text-icon-default-hover': (rgb(1, 118, 211)),
  /* Text color for brandable primary button */
  'color-text-button-brand': (rgb(255, 255, 255)),
  /* Text color for default secondary button - disabled state */
  'color-text-button-default-disabled': (rgb(201, 201, 201)),
  /* Color for default text in a tab group. */
  'color-text-tab-label': (rgb(3, 45, 96)),
  /* Default icon color - active state. */
  'color-text-icon-default-active': (rgb(3, 45, 96)),
  /* 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(174, 174, 174)),
  /* Text color for brandable primary button - active state */
  'color-text-button-brand-active': (rgb(255, 255, 255)),
  /* 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(243, 243, 243)),
  /* Text color for default secondary button - active state */
  'color-text-button-default-active': (rgb(1, 118, 211)),
  /* Icon color on dark background - disabled state */
  'color-text-icon-inverse-disabled': (rgba(255, 255, 255, 0.15)),
  /* 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(174, 174, 174)),
  /* Icon color on dark background - hover state */
  'color-text-icon-inverse-hover': (rgb(255, 255, 255)),
  /* Typed input text */
  'color-text-input-focus-inverse': (rgb(3, 45, 96)),
  /* 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),
);