module.exports = {
  // Blue 10
  paletteBlue10: "rgb(0, 22, 57)",
  // Blue 65
  paletteBlue65: "rgb(87, 163, 253)",
  // Blue 15
  paletteBlue15: "rgb(3, 35, 77)",
  // Blue 90
  paletteBlue90: "rgb(216, 230, 254)",
  // Blue 80
  paletteBlue80: "rgb(170, 203, 255)",
  // Blue 70
  paletteBlue70: "rgb(120, 176, 253)",
  // Blue 60
  paletteBlue60: "rgb(27, 150, 255)",
  // Blue 50
  paletteBlue50: "rgb(1, 118, 211)",
  // Blue 40
  paletteBlue40: "rgb(11, 92, 171)",
  // Blue 95
  paletteBlue95: "rgb(238, 244, 255)",
  // Blue 30
  paletteBlue30: "rgb(1, 68, 134)",
  // Blue 20
  paletteBlue20: "rgb(3, 45, 96)",
  // Cloud Blue 90
  paletteCloudBlue90: "rgb(207, 233, 254)",
  // Cloud Blue 80
  paletteCloudBlue80: "rgb(144, 208, 254)",
  // Cloud Blue 70
  paletteCloudBlue70: "rgb(26, 185, 255)",
  // Cloud Blue 60
  paletteCloudBlue60: "rgb(13, 157, 218)",
  // Cloud Blue 50
  paletteCloudBlue50: "rgb(16, 124, 173)",
  // Cloud Blue 40
  paletteCloudBlue40: "rgb(5, 98, 138)",
  // Cloud Blue 95
  paletteCloudBlue95: "rgb(234, 245, 254)",
  // Cloud Blue 30
  paletteCloudBlue30: "rgb(8, 73, 104)",
  // Cloud Blue 20
  paletteCloudBlue20: "rgb(2, 50, 72)",
  // Cloud Blue 10
  paletteCloudBlue10: "rgb(0, 26, 40)",
  // Cloud Blue 65
  paletteCloudBlue65: "rgb(8, 171, 237)",
  // Cloud Blue 15
  paletteCloudBlue15: "rgb(10, 38, 54)",
  // Green 15
  paletteGreen15: "rgb(12, 41, 18)",
  // Green 90
  paletteGreen90: "rgb(205, 239, 196)",
  // Green 80
  paletteGreen80: "rgb(145, 219, 139)",
  // Green 70
  paletteGreen70: "rgb(69, 198, 90)",
  // Green 60
  paletteGreen60: "rgb(59, 167, 85)",
  // Green 50
  paletteGreen50: "rgb(46, 132, 74)",
  // Green 40
  paletteGreen40: "rgb(57, 101, 71)",
  // Green 95
  paletteGreen95: "rgb(235, 247, 230)",
  // Green 30
  paletteGreen30: "rgb(25, 78, 49)",
  // Green 20
  paletteGreen20: "rgb(28, 51, 38)",
  // Green 10
  paletteGreen10: "rgb(7, 27, 18)",
  // Green 65
  paletteGreen65: "rgb(65, 182, 88)",
  // Hot Orange 90
  paletteHotOrange90: "rgb(255, 222, 213)",
  // Hot Orange 80
  paletteHotOrange80: "rgb(254, 185, 165)",
  // Hot Orange 70
  paletteHotOrange70: "rgb(255, 144, 110)",
  // Hot Orange 60
  paletteHotOrange60: "rgb(255, 93, 45)",
  // Hot Orange 50
  paletteHotOrange50: "rgb(216, 58, 0)",
  // Hot Orange 40
  paletteHotOrange40: "rgb(170, 48, 1)",
  // Hot Orange 95
  paletteHotOrange95: "rgb(254, 241, 237)",
  // Hot Orange 30
  paletteHotOrange30: "rgb(126, 38, 0)",
  // Hot Orange 20
  paletteHotOrange20: "rgb(74, 36, 19)",
  // Hot Orange 10
  paletteHotOrange10: "rgb(40, 18, 2)",
  // Hot Orange 65
  paletteHotOrange65: "rgb(255, 120, 79)",
  // Hot Orange 15
  paletteHotOrange15: "rgb(66, 22, 4)",
  // Indigo 90
  paletteIndigo90: "rgb(224, 229, 248)",
  // Indigo 80
  paletteIndigo80: "rgb(190, 199, 246)",
  // Indigo 70
  paletteIndigo70: "rgb(158, 169, 241)",
  // Indigo 60
  paletteIndigo60: "rgb(127, 140, 237)",
  // Indigo 50
  paletteIndigo50: "rgb(88, 103, 232)",
  // Indigo 40
  paletteIndigo40: "rgb(58, 73, 218)",
  // Indigo 95
  paletteIndigo95: "rgb(241, 243, 251)",
  // Indigo 30
  paletteIndigo30: "rgb(47, 44, 183)",
  // Indigo 20
  paletteIndigo20: "rgb(50, 29, 113)",
  // Indigo 10
  paletteIndigo10: "rgb(32, 6, 71)",
  // Indigo 65
  paletteIndigo65: "rgb(142, 155, 239)",
  // Indigo 15
  paletteIndigo15: "rgb(31, 9, 116)",
  // Neutral 90
  paletteNeutral90: "rgb(229, 229, 229)",
  // Neutral 80
  paletteNeutral80: "rgb(201, 201, 201)",
  // Neutral 70
  paletteNeutral70: "rgb(174, 174, 174)",
  // Neutral 100
  paletteNeutral100: "rgb(255, 255, 255)",
  // Neutral 60
  paletteNeutral60: "rgb(147, 147, 147)",
  // Neutral 50
  paletteNeutral50: "rgb(116, 116, 116)",
  // Neutral 40
  paletteNeutral40: "rgb(92, 92, 92)",
  // Neutral 95
  paletteNeutral95: "rgb(243, 243, 243)",
  // Neutral 30
  paletteNeutral30: "rgb(68, 68, 68)",
  // Neutral 20
  paletteNeutral20: "rgb(46, 46, 46)",
  // Neutral 10
  paletteNeutral10: "rgb(24, 24, 24)",
  // Orange 90
  paletteOrange90: "rgb(254, 223, 208)",
  // Orange 80
  paletteOrange80: "rgb(255, 186, 144)",
  // Orange 70
  paletteOrange70: "rgb(254, 147, 57)",
  // Orange 60
  paletteOrange60: "rgb(221, 122, 1)",
  // Orange 50
  paletteOrange50: "rgb(169, 100, 4)",
  // Orange 40
  paletteOrange40: "rgb(130, 81, 1)",
  // Orange 95
  paletteOrange95: "rgb(255, 241, 234)",
  // Orange 30
  paletteOrange30: "rgb(95, 62, 2)",
  // Orange 20
  paletteOrange20: "rgb(62, 43, 2)",
  // Orange 10
  paletteOrange10: "rgb(32, 22, 0)",
  // Orange 65
  paletteOrange65: "rgb(243, 131, 3)",
  // Orange 15
  paletteOrange15: "rgb(55, 30, 3)",
  // Pink 50
  palettePink50: "rgb(227, 6, 106)",
  // Pink 40
  palettePink40: "rgb(182, 5, 84)",
  // Pink 95
  palettePink95: "rgb(254, 240, 243)",
  // Pink 30
  palettePink30: "rgb(138, 3, 62)",
  // Pink 20
  palettePink20: "rgb(97, 2, 42)",
  // Pink 65
  palettePink65: "rgb(254, 114, 152)",
  // Pink 10
  palettePink10: "rgb(55, 1, 20)",
  // Pink 15
  palettePink15: "rgb(75, 6, 32)",
  // Pink 90
  palettePink90: "rgb(253, 221, 227)",
  // Pink 80
  palettePink80: "rgb(253, 182, 197)",
  // Pink 70
  palettePink70: "rgb(254, 138, 167)",
  // Pink 60
  palettePink60: "rgb(255, 83, 138)",
  // Purple 15
  palettePurple15: "rgb(48, 11, 96)",
  // Purple 90
  palettePurple90: "rgb(236, 225, 249)",
  // Purple 80
  palettePurple80: "rgb(215, 191, 242)",
  // Purple 70
  palettePurple70: "rgb(194, 158, 241)",
  // Purple 60
  palettePurple60: "rgb(173, 123, 238)",
  // Purple 50
  palettePurple50: "rgb(144, 80, 233)",
  // Purple 40
  palettePurple40: "rgb(117, 38, 227)",
  // Purple 95
  palettePurple95: "rgb(246, 242, 251)",
  // Purple 30
  palettePurple30: "rgb(90, 27, 169)",
  // Purple 20
  palettePurple20: "rgb(64, 16, 117)",
  // Purple 10
  palettePurple10: "rgb(36, 6, 67)",
  // Purple 65
  palettePurple65: "rgb(183, 141, 239)",
  // Red 90
  paletteRed90: "rgb(254, 222, 216)",
  // Red 80
  paletteRed80: "rgb(254, 184, 171)",
  // Red 70
  paletteRed70: "rgb(254, 143, 125)",
  // Red 60
  paletteRed60: "rgb(254, 92, 76)",
  // Red 50
  paletteRed50: "rgb(234, 0, 30)",
  // Red 95
  paletteRed95: "rgb(254, 241, 238)",
  // Red 40
  paletteRed40: "rgb(186, 5, 23)",
  // Red 30
  paletteRed30: "rgb(142, 3, 15)",
  // Red 20
  paletteRed20: "rgb(100, 1, 3)",
  // Red 10
  paletteRed10: "rgb(48, 12, 1)",
  // Red 65
  paletteRed65: "rgb(254, 119, 101)",
  // Red 15
  paletteRed15: "rgb(74, 12, 4)",
  // Teal 15
  paletteTeal15: "rgb(7, 40, 37)",
  // Teal 90
  paletteTeal90: "rgb(172, 243, 228)",
  // Teal 80
  paletteTeal80: "rgb(4, 225, 203)",
  // Teal 70
  paletteTeal70: "rgb(1, 195, 179)",
  // Teal 60
  paletteTeal60: "rgb(6, 165, 154)",
  // Teal 50
  paletteTeal50: "rgb(11, 130, 124)",
  // Teal 40
  paletteTeal40: "rgb(5, 103, 100)",
  // Teal 95
  paletteTeal95: "rgb(222, 249, 243)",
  // Teal 30
  paletteTeal30: "rgb(2, 77, 76)",
  // Teal 20
  paletteTeal20: "rgb(2, 52, 52)",
  // Teal 10
  paletteTeal10: "rgb(7, 27, 18)",
  // Teal 65
  paletteTeal65: "rgb(3, 180, 167)",
  // Violet 15
  paletteViolet15: "rgb(61, 1, 87)",
  // Violet 90
  paletteViolet90: "rgb(242, 222, 254)",
  // Violet 80
  paletteViolet80: "rgb(229, 185, 254)",
  // Violet 70
  paletteViolet70: "rgb(216, 146, 254)",
  // Violet 60
  paletteViolet60: "rgb(203, 101, 255)",
  // Violet 50
  paletteViolet50: "rgb(186, 1, 255)",
  // Violet 40
  paletteViolet40: "rgb(150, 2, 199)",
  // Violet 95
  paletteViolet95: "rgb(249, 240, 255)",
  // Violet 30
  paletteViolet30: "rgb(115, 3, 148)",
  // Violet 20
  paletteViolet20: "rgb(72, 26, 84)",
  // Violet 10
  paletteViolet10: "rgb(46, 0, 57)",
  // Violet 65
  paletteViolet65: "rgb(209, 125, 254)",
  // Yellow 70
  paletteYellow70: "rgb(228, 162, 1)",
  // Yellow 60
  paletteYellow60: "rgb(202, 133, 1)",
  // Yellow 50
  paletteYellow50: "rgb(168, 100, 3)",
  // Yellow 40
  paletteYellow40: "rgb(140, 75, 2)",
  // Yellow 95
  paletteYellow95: "rgb(251, 243, 224)",
  // Yellow 30
  paletteYellow30: "rgb(111, 52, 0)",
  // Yellow 20
  paletteYellow20: "rgb(79, 33, 0)",
  // Yellow 10
  paletteYellow10: "rgb(40, 18, 2)",
  // Yellow 65
  paletteYellow65: "rgb(215, 147, 4)",
  // Yellow 15
  paletteYellow15: "rgb(46, 34, 4)",
  // Yellow 90
  paletteYellow90: "rgb(249, 227, 182)",
  // Yellow 80
  paletteYellow80: "rgb(252, 192, 3)",
  // Used as the background color for the active state on rows or items on list-like components.
  colorBackgroundRowActive: "rgb(243, 243, 243)",
  // Light variant of COLOR_BACKGROUND.
  colorBackgroundLight: "rgb(255, 255, 255)",
  // Used as the background color for the hover state on rows or items on list-like components.
  colorBackgroundRowHover: "rgb(243, 243, 243)",
  // Dark color for UI elements related to errors. Accessible with white text.
  colorBackgroundErrorDark: "rgb(186, 5, 23)",
  // Background color for UI elements related to providing neutral information (not error, success, or warning).
  colorBackgroundInfo: "rgb(116, 116, 116)",
  // Alternative background color for dark portions of the app.
  colorBackgroundAltInverse: "rgb(3, 45, 96)",
  // Used as the background color for the new state on rows or items on list-like components.
  colorBackgroundRowNew: "rgb(205, 239, 196)",
  // Dark color for UI elements that have to do with success. Accessible with white text.
  colorBackgroundSuccessDark: "rgb(46, 132, 74)",
  // Used as background for loading stencils on white background.
  colorBackgroundStencil: "rgb(243, 243, 243)",
  // Color for UI elements that have to do with warning.
  colorBackgroundWarning: "rgb(254, 147, 57)",
  // Background color for highlighting text in search results.
  colorBackgroundHighlightSearch: "rgb(255, 240, 63)",
  // Hover color for UI elements related to destructive actions.
  colorBackgroundDestructiveHover: "rgb(142, 3, 15)",
  // Default background color for the whole app.
  colorBackground: "rgb(243, 243, 243)",
  // Our product brand blue, darkened to meet accessibility color contrast ratios with white text.
  colorBrandDark: "rgb(1, 118, 211)",
  // The color of the mask overlay that appears when you enter a modal state.
  colorBackgroundBackdrop: "rgba(255, 255, 255, 0.75)",
  // Dark variant of COLOR_BACKGROUND.
  colorBackgroundDark: "rgb(243, 243, 243)",
  // Our product brand blue.
  colorBrand: "rgb(27, 150, 255)",
  // Color for UI elements related to destructive actions.
  colorBackgroundDestructive: "rgb(186, 5, 23)",
  // Color for UI elements that have to do with success.
  colorBackgroundSuccess: "rgb(69, 198, 90)",
  // Dark Color for UI elements that have to do with warning.
  colorBackgroundWarningDark: "rgb(254, 147, 57)",
  // Color for UI elements related to the offline state.
  colorBackgroundOffline: "rgb(68, 68, 68)",
  // Used as an alternate background for loading stencils on gray backgrounds.
  colorBackgroundStencilAlt: "rgb(243, 243, 243)",
  // Light variant of COLOR_BACKGROUND_INVERSE.
  colorBackgroundInverseLight: "rgb(3, 45, 96)",
  // Background color for UI elements related to the concept of an external user or customer.
  colorBackgroundCustomer: "rgb(254, 147, 57)",
  // Color for UI elements related to errors.
  colorBackgroundError: "rgb(254, 92, 76)",
  // Second default background color for the app.
  colorBackgroundAlt: "rgb(255, 255, 255)",
  // Darker color for UI elements that have to do with success. Accessible with white text.
  colorBackgroundSuccessDarker: "rgb(25, 78, 49)",
  // Used as the background color for selected rows or items on list-like components.
  colorBackgroundRowSelected: "rgb(243, 243, 243)",
  // Our product brand blue, darkened even further.
  colorBrandDarker: "rgb(1, 68, 134)",
  // Background color for text selected with a mouse.
  colorBackgroundSelection: "rgb(216, 230, 254)",
  // Active color for UI elements related to destructive actions.
  colorBackgroundDestructiveActive: "rgb(142, 3, 15)",
  // Default background color for dark portions of the app (like Stage Left or tooltips).
  colorBackgroundInverse: "rgb(0, 22, 57)",
  // Background color for highlighting UI elements.
  colorBackgroundHighlight: "rgb(250, 255, 189)",
  // Dark alternative border color for UI elements related to errors.
  colorBorderErrorDark: "rgb(254, 143, 125)",
  // Our product brand blue, darkened to meet accessibility color contrast ratios with white text.
  colorBorderBrandDark: "rgb(1, 68, 134)",
  // Border color for UI elements related to providing neutral information (not error, success, or warning).
  colorBorderInfo: "rgb(116, 116, 116)",
  // Border color for UI elements that have to do with warnings.
  colorBorderWarning: "rgb(254, 147, 57)",
  // Hover border color for UI elements that have to do with destructive actions.
  colorBorderDestructiveHover: "rgb(186, 5, 23)",
  // Default border color for UI elements.
  colorBorder: "rgb(201, 201, 201)",
  // Dark alternative border color for UI elements that have to do with success.
  colorBorderSuccessDark: "rgb(46, 132, 74)",
  // Border color for UI elements that have to do with destructive actions.
  colorBorderDestructive: "rgb(234, 0, 30)",
  // Darkest separator color - used as an alternate separator color when more differentiation is desired.
  colorBorderSeparatorAlt2: "rgb(201, 201, 201)",
  // Border color for UI elements related to the offline state.
  colorBorderOffline: "rgb(68, 68, 68)",
  // Border color for UI elements that have to do with success.
  colorBorderSuccess: "rgb(145, 219, 139)",
  // Lightest separator color - used as default separator on white backgrounds.
  colorBorderSeparator: "rgb(243, 243, 243)",
  // Our product brand blue.
  colorBorderBrand: "rgb(27, 150, 255)",
  // Used to delineate the boundary of a component that is being clicked. Specific to builders.
  colorBorderSelectionActive: "rgb(243, 243, 243)",
  // Border color for UI elements that have to do with errors.
  colorBorderError: "rgb(234, 0, 30)",
  // Used to delineate the boundary of a component that is being hovered over. Specific to builders.
  colorBorderSelectionHover: "rgb(27, 150, 255)",
  // Used as the border color for the hover state on selected rows or items on list-like components.
  colorBorderRowSelectedHover: "rgb(27, 150, 255)",
  // Border color for UI elements related to the concept of an external user or customer.
  colorBorderCustomer: "rgb(254, 147, 57)",
  // Used to delineate the boundary of a selected component. Specific to builders.
  colorBorderSelection: "rgb(1, 118, 211)",
  // Used as the border color for selected rows or items on list-like components.
  colorBorderRowSelected: "rgb(1, 118, 211)",
  // Medium separator color - used as default separator on light gray backgrounds.
  colorBorderSeparatorAlt: "rgb(201, 201, 201)",
  // Border color to match UI elements using color-background-inverse.
  colorBorderInverse: "rgb(0, 22, 57)",
  // Active border color for UI elements that have to do with destructive actions.
  colorBorderDestructiveActive: "rgb(142, 3, 15)",
  // Alternative border color for UI elements related to errors.
  colorBorderErrorAlt: "rgb(254, 143, 125)",
  // Used as a separator on dark backgrounds, such as stage left navigation.
  colorBorderSeparatorInverse: "rgb(3, 45, 96)",
  borderRadiusSmall: "0.125rem",
  // Icons in lists, record home icon, unbound input elements
  borderRadiusMedium: "0.25rem",
  borderRadiusLarge: "0.5rem",
  // Circle for global use, action icon bgd shape
  borderRadiusCircle: "50%",
  borderWidthThin: "1px",
  borderWidthThick: "2px",
  // Shadow for active states on interactive elements.
  shadowActive: "0 0 2px #0176d3",
  // Shadow for drag-n-drop.
  shadowDrag: "0 2px 4px 0 rgba(0, 0, 0, 0.40)",
  // Shadow for drop down.
  shadowDropDown: "0 2px 3px 0 rgba(0, 0, 0, 0.16)",
  // 0 seconds, 0 frames
  durationInstantly: "0s",
  // 0.05 seconds, 3 frames
  durationImmediately: "0.05s",
  // 0.1 seconds, 6 frames
  durationQuickly: "0.1s",
  // 0.2 seconds, 12 frames
  durationPromptly: "0.2s",
  // 0.4 seconds, 24 frames
  durationSlowly: "0.4s",
  // 3.2 seconds, 192 frames
  durationPaused: "3.2s",
  // Default font-family for Salesforce applications
  fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
  fontFamilyHeading: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
  fontFamilyMonospace: "Consolas, Menlo, Monaco, Courier, monospace",
  // Constant typography token for font size 1
  fontSize1: "0.625rem",
  // Constant typography token for font size 2
  fontSize2: "0.75rem",
  // Constant typography token for font size 3
  fontSize3: "0.8125rem",
  // Variable typography token for font size 10
  varFontSize10: "2rem",
  // Constant typography token for font size 4
  fontSize4: "0.875rem",
  // Variable typography token for font size 11
  varFontSize11: "2.625rem",
  // Constant typography token for font size 5
  fontSize5: "1rem",
  // Constant typography token for font size 6
  fontSize6: "1.125rem",
  // Constant typography token for font size 7
  fontSize7: "1.25rem",
  // Constant typography token for font size 8
  fontSize8: "1.5rem",
  // Variable typography token for font size 1
  varFontSize1: "0.625rem",
  // Constant typography token for font size 9
  fontSize9: "1.75rem",
  // Variable typography token for font size 2
  varFontSize2: "0.75rem",
  // Variable typography token for font size 3
  varFontSize3: "0.8125rem",
  // Constant typography token for font size 10
  fontSize10: "2rem",
  // Variable typography token for font size 4
  varFontSize4: "0.875rem",
  // Constant typography token for font size 11
  fontSize11: "2.625rem",
  // Variable typography token for font size 5
  varFontSize5: "1rem",
  // Variable typography token for font size 6
  varFontSize6: "1.125rem",
  // Variable typography token for font size 7
  varFontSize7: "1.25rem",
  // Variable typography token for font size 8
  varFontSize8: "1.5rem",
  // Variable typography token for font size 9
  varFontSize9: "1.75rem",
  // Use for large headings only.
  fontWeightLight: "300",
  // Most all body copy.
  fontWeightRegular: "400",
  // Used sparingly for emphasized text within regular body copy.
  fontWeightBold: "700",
  // Unitless line-heights for reusability
  lineHeightHeading: "1.25",
  // Unitless line-heights for reusability
  lineHeightText: "1.5",
  // Remove extra leading. Unitless line-heights for reusability
  lineHeightReset: "1",
  // Variable unitless line-heights for reusability
  varLineHeightText: "1.5",
  // 50% transparency of an element
  opacity5: "0.5",
  // 80% transparency of an element
  opacity8: "0.8",
  // Disabled state of BRAND_HEADER_CONTRAST_WEAK
  brandHeaderContrastWeakDisabled: "rgba(166, 166, 166, 0.25)",
  // Gray Color 11
  colorGray11: "rgb(62, 62, 60)",
  // Transparent value of BRAND_PRIMARY at 10%
  brandPrimaryTransparent10: "rgba(21, 137, 238, 0.1)",
  // Gray Color 12
  colorGray12: "rgb(43, 40, 38)",
  // These RGBA values need to be updated if BRAND_BACKGROUND_DARK changes, solves webkit bug
  brandBackgroundDarkTransparent: "rgba(221, 219, 218, 0)",
  // Gray Color 13
  colorGray13: "rgb(8, 7, 7)",
  // Background color a branded app header
  brandHeader: "rgb(255, 255, 255)",
  // Active / Hover state of BRAND_LIGHT
  brandLightActive: "rgb(227, 229, 237)",
  // Variant of BRAND_HEADER_CONTRAST that provides a warm color
  brandHeaderContrastWarm: "rgb(186, 5, 23)",
  // Disabled state of BRAND_HEADER_ICON
  brandHeaderIconDisabled: "rgba(145, 145, 145, 0.25)",
  // Active / Hover state of BRAND_HEADER_CONTRAST
  brandHeaderContrastActive: "rgb(80, 80, 80)",
  // Primary page background color
  brandBackgroundPrimary: "rgb(250, 250, 249)",
  // Primary brand color
  brandPrimary: "rgb(27, 150, 255)",
  // Active / Hover state of BRAND_HEADER_CONTRAST_WEAK
  brandHeaderContrastWeakActive: "rgb(129, 129, 129)",
  // Active / Hover state of BRAND_CONTRAST
  brandContrastActive: "rgb(13, 14, 18)",
  // Variant of BRAND_HEADER_CONTRAST that provides a cool color
  brandHeaderContrastCool: "rgb(1, 68, 134)",
  // Variant of BRAND_HEADER that is accessible with BRAND_HEADER
  brandHeaderContrastInverse: "rgb(255, 255, 255)",
  // Dark variant of BRAND that is accessible with light colors
  brandDark: "rgb(1, 118, 211)",
  // Dark variant of BRAND that is accessible with white
  brandAccessible: "rgb(1, 118, 211)",
  // Dark variant of BRAND_BACKGROUND_PRIMARY, used within gradient of background color
  brandBackgroundDark: "rgb(232, 232, 232)",
  // Active / Hover state of BRAND_TEXT_LINK
  brandTextLinkActive: "rgb(1, 68, 134)",
  // Gray Color 1
  colorGray1: "rgb(255, 255, 255)",
  // Gray Color 2
  colorGray2: "rgb(250, 250, 249)",
  // Active / Hover state of BRAND_HEADER_ICON
  brandHeaderIconActive: "rgb(129, 129, 129)",
  // Gray Color 3
  colorGray3: "rgb(243, 242, 242)",
  // Icons of BRAND_HEADER that is accessible with BRAND_HEADER
  brandHeaderIcon: "rgb(145, 145, 145)",
  // Disabled state of BRAND_A11Y
  brandDisabled: "rgb(201, 199, 197)",
  // Primary text link brand color
  brandTextLink: "rgb(11, 92, 171)",
  // Gray Color 4
  colorGray4: "rgb(236, 235, 234)",
  // Gray Color 5
  colorGray5: "rgb(221, 219, 218)",
  // Gray Color 6
  colorGray6: "rgb(201, 199, 197)",
  // Active / Hover state of BRAND_A11Y
  brandAccessibleActive: "rgb(1, 68, 134)",
  // Gray Color 7
  colorGray7: "rgb(176, 173, 171)",
  // Active / Hover state of BRAND_DARK
  brandDarkActive: "rgb(37, 48, 69)",
  // Gray Color 8
  colorGray8: "rgb(150, 148, 146)",
  // Active / Hover state of BRAND_HEADER_CONTRAST
  brandHeaderContrastInverseActive: "rgb(238, 238, 238)",
  // Active / Hover state of BRAND_HEADER_CONTRAST_COOL
  brandHeaderContrastCoolActive: "rgb(1, 68, 134)",
  // Gray Color 9
  colorGray9: "rgb(112, 110, 107)",
  // Variant of BRAND that is accessible with BRAND
  brandContrast: "rgb(26, 27, 30)",
  // Weak contrast ratio, useful for iconography
  brandHeaderContrastWeak: "rgb(145, 145, 145)",
  // Active / Hover state of BRAND_PRIMARY
  brandPrimaryActive: "rgb(1, 118, 211)",
  // These RGBA values need to be updated if BRAND_BACKGROUND_PRIMARY changes, solves webkit bug
  brandBackgroundPrimaryTransparent: "rgba(176, 196, 223, 0)",
  // Variant of BRAND_HEADER that is accessible with BRAND_HEADER
  brandHeaderContrast: "rgb(94, 94, 94)",
  // Transparent value of BRAND_PRIMARY
  brandPrimaryTransparent: "rgba(21, 137, 238, 0.1)",
  // Active / Hover state of BRAND_HEADER_CONTRAST_WARM
  brandHeaderContrastWarmActive: "rgb(186, 5, 23)",
  // Transparent value of BRAND_PRIMARY at 40%
  brandPrimaryTransparent40: "rgba(21, 137, 238, 0.4)",
  // Light variant of BRAND that is accessible with dark colors
  brandLight: "rgb(244, 246, 254)",
  // Gray Color 10
  colorGray10: "rgb(81, 79, 77)",
  // Generic sizing token scale for UI components.
  sizeXSmall: "12rem",
  // Generic sizing token scale for UI components.
  sizeXxxSmall: "3rem",
  // Large utility icon without border.
  squareIconUtilityLarge: "1.5rem",
  // Generic sizing token scale for UI components.
  sizeXxSmall: "6rem",
  // Search Results: Outer colored tile
  squareIconSmallBoundary: "1.5rem",
  // Generic sizing token scale for UI components.
  sizeSmall: "15rem",
  // Medium utility icon without border.
  squareIconUtilityMedium: "1.25rem",
  // Very small icon button boundary.
  squareIconXSmallBoundary: "1.25rem",
  // Small utility icon without border.
  squareIconUtilitySmall: "1rem",
  // Stage left & actions: Outer colored tile
  squareIconMediumBoundary: "2rem",
  // Anchor: Icon content (white shape)
  squareIconLargeContent: "2rem",
  // Anchor: Outer colored tile
  squareIconLargeBoundary: "3rem",
  // Generic sizing token scale for UI components.
  sizeMedium: "20rem",
  // Stage left & actions: Icon content (white shape)
  squareIconMediumContent: "1rem",
  // Generic sizing token scale for UI components.
  sizeXLarge: "40rem",
  // Very small icons in icon buttons.
  squareIconXSmallContent: "0.5rem",
  // Variable medium boundary for square icons
  varSquareIconMediumBoundary: "2rem",
  // Icon button boundary.
  squareIconMediumBoundaryAlt: "2.25rem",
  // Generic sizing token scale for UI components.
  sizeXxLarge: "60rem",
  // Anchor: avatar
  squareIconLargeBoundaryAlt: "5rem",
  // Generic sizing token scale for UI components.
  sizeLarge: "25rem",
  // Search Results: Icon content (white shape)
  squareIconSmallContent: "0.75rem",
  // Very very small icon button boundary.
  squareIconXxSmallBoundary: "1rem",
  // Alternate medium tap target size
  squareIconMediumContentAlt: "0.875rem",
  // Variable spacing token for size X Large
  varSpacingXLarge: "2rem",
  // Variable horizontal spacing token for size Small
  varSpacingHorizontalSmall: "0.75rem",
  // Variable horizontal spacing token for size XX Large
  varSpacingHorizontalXxLarge: "3rem",
  // Constant spacing token for size X small
  spacingXSmall: "0.5rem",
  // Constant spacing token for size XXX small
  spacingXxxSmall: "0.125rem",
  // Constant spacing token for size XX small
  spacingXxSmall: "0.25rem",
  // Variable vertical spacing token for size Large
  varSpacingVerticalLarge: "1.5rem",
  // Variable spacing token for size Large
  varSpacingLarge: "1.5rem",
  // Variable spacing token for size Medium
  varSpacingMedium: "1rem",
  // Variable vertical spacing token for size Medium
  varSpacingVerticalMedium: "1rem",
  // Variable vertical spacing token for size X Small
  varSpacingVerticalXSmall: "0.5rem",
  // Constant spacing token for size Small
  spacingSmall: "0.75rem",
  // Variable vertical spacing token for size XXX Small
  varSpacingVerticalXxxSmall: "0.125rem",
  // Variable spacing token for size X Small
  varSpacingXSmall: "0.5rem",
  // Variable spacing token for size XXX Small
  varSpacingXxxSmall: "0.125rem",
  // Variable horizontal spacing token for size X Large
  varSpacingHorizontalXLarge: "2rem",
  // Variable horizontal spacing token for size XX Small
  varSpacingHorizontalXxSmall: "0.25rem",
  // Variable spacing token for size XX Large
  varSpacingXxLarge: "3rem",
  // Constant spacing token for size Medium
  spacingMedium: "1rem",
  // Variable vertical spacing token for size XX Large
  varSpacingVerticalXxLarge: "3rem",
  // Variable vertical spacing token for size Small
  varSpacingVerticalSmall: "0.75rem",
  // Variable spacing token for size Small
  varSpacingSmall: "0.75rem",
  // Constant spacing token for 0
  spacingNone: "0",
  // Variable horizontal spacing token for size Large
  varSpacingHorizontalLarge: "1.5rem",
  // Constant spacing token for size X Large
  spacingXLarge: "2rem",
  // Constant spacing token for size XX Large
  spacingXxLarge: "3rem",
  // Variable horizontal spacing token for size XXX Small
  varSpacingHorizontalXxxSmall: "0.125rem",
  // Variable horizontal spacing token for size X Small
  varSpacingHorizontalXSmall: "0.5rem",
  // Variable spacing token for size XX Small
  varSpacingXxSmall: "0.25rem",
  // Variable horizontal spacing token for size Medium
  varSpacingHorizontalMedium: "1rem",
  // Variable vertical spacing token for size XX Small
  varSpacingVerticalXxSmall: "0.25rem",
  // Variable vertical spacing token for size X Large
  varSpacingVerticalXLarge: "2rem",
  // Constant spacing token for size Large
  spacingLarge: "1.5rem",
  // Action label text color
  colorTextActionLabel: "rgb(116, 116, 116)",
  // Link color on dark background
  colorTextLinkInverse: "rgb(255, 255, 255)",
  // Link color on dark background - active state
  colorTextLinkInverseActive: "rgba(255, 255, 255, 0.5)",
  // Action label active text color
  colorTextActionLabelActive: "rgb(3, 45, 96)",
  // Color for texts or icons that are related to warnings on a dark background.
  colorTextWarning: "rgb(254, 147, 57)",
  // Focus link text
  colorTextLinkFocus: "rgb(1, 68, 134)",
  // Text color for destructive actions - hover state
  colorTextDestructiveHover: "rgb(186, 5, 23)",
  // Disabled link text
  colorTextLinkDisabled: "rgb(3, 45, 96)",
  // Body text color
  colorTextDefault: "rgb(3, 45, 96)",
  // Text color for destructive actions
  colorTextDestructive: "rgb(234, 0, 30)",
  // Hover link text
  colorTextLinkHover: "rgb(1, 68, 134)",
  // Text color for success text.
  colorTextSuccess: "rgb(46, 132, 74)",
  // Color for text that is purposefully de-emphasized to create visual hierarchy.
  colorTextWeak: "rgb(116, 116, 116)",
  // Input placeholder text on dark backgrounds.
  colorTextPlaceholderInverse: "rgb(243, 243, 243)",
  // Link text (508)
  colorTextLink: "rgb(1, 118, 211)",
  // Color for texts that are related to warnings on a light background.
  colorTextWarningAlt: "rgb(140, 75, 2)",
  // Default icon color.
  colorTextIconDefault: "rgb(116, 116, 116)",
  // Our product brand blue.
  colorTextBrand: "rgb(27, 150, 255)",
  // Error text for inputs and error misc
  colorTextError: "rgb(234, 0, 30)",
  // Customer text used in anchor subtitle
  colorTextCustomer: "rgb(254, 147, 57)",
  // Text color found on any primary brand color
  colorTextBrandPrimary: "rgb(255, 255, 255)",
  // Active link text
  colorTextLinkActive: "rgb(3, 45, 96)",
  // Color of required field marker.
  colorTextRequired: "rgb(234, 0, 30)",
  // Link color on dark background - disabled state
  colorTextLinkInverseDisabled: "rgba(255, 255, 255, 0.15)",
  // Inverse text color for dark backgrounds
  colorTextInverse: "rgb(255, 255, 255)",
  // Input placeholder text.
  colorTextPlaceholder: "rgb(116, 116, 116)",
  // Weak inverse text color for dark backgrounds
  colorTextInverseWeak: "rgb(174, 174, 174)",
  // Link color on dark background - hover state
  colorTextLinkInverseHover: "rgba(255, 255, 255, 0.75)",
  // Text color for success text on dark backgrounds.
  colorTextSuccessInverse: "rgb(69, 198, 90)",
  // Text color for field labels.
  colorTextLabel: "rgb(116, 116, 116)",
  // Tap target size for elements that rely on width and height dimensions
  squareTappable: "2.75rem",
  // Small tap target size for elements that rely on width and height dimensions
  squareTappableSmall: "2rem",
  // X-small tap target size for elements that rely on width and height dimensions
  squareTappableXSmall: "1.5rem",
  // Xx-small tap target size for elements that rely on width and height dimensions
  squareTappableXxSmall: "1.25rem",
  // Tap target size for elements that rely on height or line-height
  heightTappable: "2.75rem",
  // Small tap target size for elements that rely on height or line-height
  heightTappableSmall: "2rem",
  // Dropdown
  zIndexDropdown: "7000",
  // Docked element
  zIndexDocked: "4",
  // Notifications under modals
  zIndexReminder: "8500",
  // Spinner
  zIndexSpinner: "9050",
  // Default
  zIndexDefault: "1",
  // Deep dive
  zIndexDeepdive: "-99999",
  // Toasts
  zIndexToast: "10000",
  // Dialog
  zIndexDialog: "6000",
  // Popup
  zIndexPopup: "5000",
  // Modal
  zIndexModal: "9000",
  // Stickied element
  zIndexSticky: "100",
  // Overlay
  zIndexOverlay: "8000",
  // Brandable modal header
  colorBackgroundModalBrand: "rgb(1, 68, 134)",
  // Background color for notification list item.
  colorBackgroundNotification: "rgb(255, 255, 255)",
  // Notifications badge background color.
  colorBackgroundNotificationBadgeActive: "rgb(3, 45, 96)",
  // Notifications badge background color.
  colorBackgroundNotificationBadgeHover: "rgb(1, 68, 134)",
  colorContrastPrimary: "rgb(243, 243, 243)",
  colorForegroundPrimary: "rgb(255, 255, 255)",
  // The color of the mask overlay that appears when you enter a modal state.
  colorBackgroundTempModalTint: "rgba(126, 140, 153, 0.8)",
  // Color of the indicator dot.
  colorBackgroundIndicatorDot: "rgb(3, 45, 96)",
  // Used when further differentiation is needed because colorBackground and colorBackgroundAlt are both being used in close proximity.
  colorBackgroundAlt2: "rgb(243, 243, 243)",
  // Hover color for utility bar item.
  colorBackgroundUtilityBarHover: "rgb(243, 243, 243)",
  // Brand hover fill color
  fillBrandHover: "rgb(1, 68, 134)",
  // Brand fill color
  fillBrand: "rgb(1, 118, 211)",
  // Background color for default desktop chrome (ex. global header)
  colorBackgroundChromeDesktop: "rgb(255, 255, 255)",
  // Active button backgrounds on modal headers
  colorBackgroundModalButtonActive: "rgba(0, 0, 0, 0.16)",
  // Selected checkboxes
  colorBackgroundInputCheckboxSelected: "rgb(27, 150, 255)",
  // Default checkboxes
  colorBackgroundInputCheckbox: "rgb(255, 255, 255)",
  colorBackgroundPrimary: "rgb(255, 255, 255)",
  // The color of the mask overlay that appears when you enter a modal state.
  colorBackgroundTempModalTintAlt: "rgba(255, 255, 255, 0.75)",
  colorBackgroundBrandPrimaryFocus: "rgb(1, 68, 134)",
  colorBackgroundBrandPrimaryActive: "rgb(3, 45, 96)",
  colorBackgroundBrandPrimaryHover: "rgb(1, 68, 134)",
  // Background color for default mobile chrome (ex. global header)
  colorBackgroundChromeMobile: "rgb(1, 118, 211)",
  // Background color for search input fields.
  colorBackgroundInputSearch: "rgba(0, 0, 0, 0.16)",
  colorContrastSecondary: "rgb(255, 255, 255)",
  // Secondary top bar background color (child browser, file preview, etc.)
  colorBackgroundBrowser: "rgb(116, 116, 116)",
  colorBackgroundBrandPrimary: "rgb(1, 118, 211)",
  // Used as the default background color for temporary dialog elements, such as the progress spinner background.
  colorBackgroundTempModal: "rgba(126, 140, 153, 0.8)",
  // Used as gray background when more contrast is desired.
  colorBackgroundShade: "rgb(243, 243, 243)",
  // Standard modal header
  colorBackgroundModal: "rgb(255, 255, 255)",
  // Hovered active toggle background color.
  colorBackgroundToggleActiveHover: "rgb(1, 68, 134)",
  // Background color for payloads in the feed.
  colorBackgroundPayload: "rgb(243, 243, 243)",
  // Button backgrounds on modal headers
  colorBackgroundModalButton: "rgba(0, 0, 0, 0.07)",
  // Brand active fill color
  fillBrandActive: "rgb(3, 45, 96)",
  // Active color for utility bar item.
  colorBackgroundUtilityBarActive: "rgb(27, 150, 255)",
  // Stage left org switcher dropdown arrow background color.
  colorBackgroundOrgSwitcherArrow: "rgb(0, 22, 57)",
  // Active toggle background color.
  colorBackgroundToggleActive: "rgb(1, 68, 134)",
  // Alternative color for UI elements related to errors.
  colorBackgroundErrorAlt: "rgb(254, 143, 125)",
  // Winter 18 token, this has been deprecated. Please use BRAND_BACKGROUND_PRIMARY instead.
  pageColorBackgroundPrimary: "rgb(255, 255, 255)",
  // Used as gray background in conjunction with Shade when more contrast is desired.
  colorBackgroundShadeDark: "rgb(201, 201, 201)",
  // Notifications badge background color.
  colorBackgroundNotificationBadgeFocus: "rgb(1, 68, 134)",
  // Background for utility icons that live in the action bar on mobile.
  colorBackgroundActionbarIconUtility: "rgb(116, 116, 116)",
  colorBackgroundSecondary: "rgb(243, 243, 243)",
  // The borders to create the checkmark
  colorBorderInputCheckboxSelectedCheckmark: "rgb(255, 255, 255)",
  // Disabled stroke color.
  colorStrokeDisabled: "rgb(243, 243, 243)",
  // Active stroke color for our product brand blue.
  colorStrokeBrandActive: "rgb(3, 45, 96)",
  colorBorderPrimary: "rgb(201, 201, 201)",
  colorBorderBrandPrimaryFocus: "rgb(1, 118, 211)",
  colorBorderBrandPrimaryHover: "rgb(1, 118, 211)",
  // Border color for brandable primary button
  colorBorderButtonBrand: "rgb(1, 118, 211)",
  colorBorderBrandPrimaryActive: "rgb(3, 45, 96)",
  colorBorderBrandPrimary: "rgb(27, 150, 255)",
  colorBorderButtonFocusInverse: "rgb(243, 243, 243)",
  // Used to delineate the boundary of a selected canvas element that is being hovered over. Specific to builders.
  colorBorderCanvasElementSelectionHover: "rgb(1, 68, 134)",
  // Used to delineate the boundary of a selected canvas element. Specific to builders.
  colorBorderCanvasElementSelection: "rgb(26, 185, 255)",
  // Hover stroke color for our product brand blue.
  colorStrokeBrandHover: "rgb(1, 118, 211)",
  // Stroke color for our global header buttons.
  colorStrokeHeaderButton: "rgb(174, 174, 174)",
  colorBorderLinkFocusInverse: "rgb(243, 243, 243)",
  // Our product brand blue.
  colorStrokeBrand: "rgb(1, 118, 211)",
  // Used to delineate the boundary of a specific region. Specific to builders.
  colorBorderHint: "rgb(3, 45, 96)",
  // Deprecated
  elevation32: "32",
  // Deprecated
  elevationShadow16: "0 16px 16px 0 rgba(0, 0, 0, 0.16)",
  // Deprecated
  elevationInverseShadow0: "none",
  // Custom glow for focus states on UI link elements with explicit containers on dark or vibrantly colored backgrounds.
  shadowLinkFocusInverse: "0 0 3px #f3f3f3",
  // Deprecated: Use SHADOW_DOCKED
  elevationInverseShadow2: "0 -2px 2px 0 rgba(0, 0, 0, 0.16)",
  // Deprecated
  elevationInverseShadow4: "0 -4px 4px 0 rgba(0, 0, 0, 0.16)",
  // Deprecated
  elevation16: "16",
  // Deprecated
  elevationShadow3Below: "0 3px 3px 0 rgba(0, 0, 0, 0.16) inset",
  shadowSoftPrimaryHover: "none",
  // Deprecated
  elevationInverseShadow8: "0 -8px 8px 0 rgba(0, 0, 0, 0.16)",
  // Soft dropshadow found on general UI elements such as containers
  shadowSoftPrimary: "none",
  // Deprecated
  elevationInverseShadow32: "0 -32px 32px 0 rgba(0, 0, 0, 0.16)",
  // Hard dropshadow found on general UI elements such as containers
  shadowHardPrimary: "none",
  // Shadow above overflow menu close bar.
  shadowActionOverflowFooter: "0 -2px 4px #f3f3f3",
  // Deprecated
  elevation0: "0",
  // Deprecated
  elevation3Inset: "-3",
  // Deprecated
  elevation2: "2",
  // Shadow for overlays.
  shadowOverlay: "0 -2px 4px rgba(0, 0, 0, 0.07)",
  // Shadow for buttons.
  shadowButton: "0 1px 1px 0 rgba(0, 0, 0, 0.05)",
  // Deprecated
  elevation4: "4",
  // Deprecated
  elevationShadow0: "none",
  // Deprecated
  elevationInverseShadow16: "0 -16px 16px 0 rgba(0, 0, 0, 0.16)",
  // Deprecated
  elevationShadow2: "0 2px 2px 0 rgba(0, 0, 0, 0.16)",
  // Deprecated
  elevation8: "8",
  // Deprecated
  elevationShadow4: "0 4px 4px 0 rgba(0, 0, 0, 0.16)",
  // Inset shadow for editable grid
  shadowFocusInset: "0 0 2px 2px #1b96ff inset",
  // Deprecated
  elevationInverseShadow3Below: "0 -3px 3px 0 rgba(0, 0, 0, 0.16) inset",
  shadowSoftPrimaryActive: "none",
  // Deprecated
  elevationShadow8: "0 8px 8px 0 rgba(0, 0, 0, 0.16)",
  // Shadow on images.
  shadowImage: "0 1px 1px rgba(0, 0, 0, 0.16)",
  // Deprecated
  elevationShadow32: "0 32px 32px 0 rgba(0, 0, 0, 0.16)",
  // Medium headings.
  fontSizeHeadingMedium: "1.125rem",
  fontSizeMedium: "1rem",
  // Small body text.
  fontSizeTextSmall: "0.8125rem",
  fontSizeMediumA: "1.125rem",
  fontSizeXLarge: "1.5rem",
  fontSizeXLargeA: "1.57rem",
  // Extra large headings.
  fontSizeHeadingXLarge: "1.75rem",
  fontSizeXxLarge: "2rem",
  // Extra extra small text.
  fontSizeTextXxSmall: "0.625rem",
  fontSizeLarge: "1.25rem",
  // Large headings.
  fontSizeHeadingLarge: "1.5rem",
  // Extra large body text.
  fontSizeTextXLarge: "1.25rem",
  fontSizeXSmall: "0.625rem",
  // Extra Extra small headings.
  fontSizeHeadingXxSmall: "0.625rem",
  // Extra small headings.
  fontSizeHeadingXSmall: "0.75rem",
  // Large body text.
  fontSizeTextLarge: "1.125rem",
  fontSizeSmall: "0.875rem",
  // Medium body text.
  fontSizeTextMedium: "1rem",
  // Extra small body text.
  fontSizeTextXSmall: "0.75rem",
  // Small headings.
  fontSizeHeadingSmall: "0.875rem",
  // Deprecated: use FONT_FAMILY instead for regular body text and FONT_FAMILY_HEADING for headings.
  fontFamilyText: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
  // Use squareIconMediumBoundary
  squareIconMedium: "2.375rem",
  // Small tap target size
  squareIconSmall: "1rem",
  // Very small icons to replace force font with temporary override.
  squareIconXxSmallContent: ".875rem",
  // Large tap target size.
  squareIconLarge: "3.125rem",
  componentSpacingMargin: "0",
  componentSpacingPadding: "1rem",
  // Hovered icon color for a button that has a parent element that has a hover state
  colorTextIconInverseHintHover: "rgba(255, 255, 255, 0.75)",
  // Color for text on a selected tab in a tab group.
  colorTextTabLabelSelected: "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.
  colorTextIconInverseHint: "rgba(255, 255, 255, 0.5)",
  // Color for disabled text in a tab group.
  colorTextTabLabelDisabled: "rgb(243, 243, 243)",
  // Tertiary body text color
  colorTextTertiary: "rgb(116, 116, 116)",
  // Active state on a standalone link on a dark background.
  colorTextInverseActive: "rgb(26, 185, 255)",
  // Primary body text color
  colorTextPrimary: "rgb(3, 45, 96)",
  colorTextLinkPrimaryFocus: "rgb(1, 118, 211)",
  // Color for text in focus state in a tab group.
  colorTextTabLabelFocus: "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.
  colorTextIconDefaultHintBorderless: "rgb(243, 243, 243)",
  // Text color for pills.
  colorTextPill: "rgb(1, 118, 211)",
  colorTextLinkPrimaryHover: "rgb(1, 118, 211)",
  // Color for text in active state in a tab group.
  colorTextTabLabelActive: "rgb(3, 45, 96)",
  // Color for text in hover state in a tab group.
  colorTextTabLabelHover: "rgb(1, 68, 134)",
  // Color for text on toast messages.
  colorTextToast: "rgb(243, 243, 243)",
  // Color for disabled toggles
  colorTextToggleDisabled: "rgb(201, 201, 201)",
  // Top bar icon color
  colorTextBrowser: "rgb(255, 255, 255)",
  colorTextLinkPrimaryActive: "rgb(3, 45, 96)",
  colorTextLinkPrimary: "rgb(1, 118, 211)",
  // Top bar active icon color
  colorTextBrowserActive: "rgba(0, 0, 0, 0.4)",
  // Color for non-interactive icons that represent a selected item in a list
  colorTextIconBrand: "rgb(1, 118, 211)",
  // Hover state on a standalone link on a dark background.
  colorTextInverseHover: "rgb(174, 174, 174)",
  // Modal header title
  colorTextModal: "rgb(255, 255, 255)",
  // Modal header button text color
  colorTextModalButton: "rgb(116, 116, 116)",
  // Color for interactive utility icons
  colorTextIconUtility: "rgb(174, 174, 174)",
  // Secondary body text color
  colorTextSecondary: "rgb(116, 116, 116)",
  // Text in stage left navigation.
  colorTextStageLeft: "rgb(243, 243, 243)",
  // Default value for text-transform
  textTransform: "none",
  // Background color for a new notification list item.
  colorBackgroundNotificationNew: "rgb(243, 243, 243)",
  // Focused header button icon color
  fillHeaderButtonFocus: "rgb(1, 118, 211)",
  // Background color for reminder notification on hover
  colorBackgroundReminderHover: "rgb(255, 255, 255)",
  // Notifications badge background color.
  colorBackgroundNotificationBadge: "rgb(234, 0, 30)",
  // Hovered header button icon color
  fillHeaderButtonHover: "rgb(1, 68, 134)",
  // Disabled input
  colorBackgroundInputDisabled: "rgb(243, 243, 243)",
  // Hovered toggle background color.
  colorBackgroundToggleHover: "rgb(147, 147, 147)",
  // Background color for reminder notification
  colorBackgroundReminder: "rgb(243, 243, 243)",
  // Hovered background color for success buttons
  colorBackgroundButtonSuccessHover: "rgb(46, 132, 74)",
  // Header button icon color
  fillHeaderButton: "rgb(174, 174, 174)",
  // Toggle background color.
  colorBackgroundToggle: "rgb(174, 174, 174)",
  // Background color for success buttons
  colorBackgroundButtonSuccess: "rgb(69, 198, 90)",
  // Disabled checkboxes
  colorBackgroundInputCheckboxDisabled: "rgb(201, 201, 201)",
  // Background color for pills.
  colorBackgroundPill: "rgb(255, 255, 255)",
  // Color of the spinner dot.
  colorBackgroundSpinnerDot: "rgb(174, 174, 174)",
  // The color of the mask overlay that provides user feedback on interaction.
  colorBackgroundBackdropTint: "rgb(243, 243, 243)",
  // Selected input field (when user has clicked or tabbed into field)
  colorBackgroundInputActive: "rgb(255, 255, 255)",
  // The background color of an internal scrollbar.
  colorBackgroundScrollbar: "rgb(243, 243, 243)",
  // Disabled toggle background color.
  colorBackgroundToggleDisabled: "rgb(174, 174, 174)",
  // Background color for toast messaging.
  colorBackgroundToast: "rgb(116, 116, 116)",
  // Background color of comment posts in the feed.
  colorBackgroundPost: "rgb(243, 243, 243)",
  // Default input field
  colorBackgroundInput: "rgb(255, 255, 255)",
  // Background color for success toast messaging.
  colorBackgroundToastSuccess: "rgb(46, 132, 74)",
  // Color of mask overlay that sits on top of an image when text is present.
  colorBackgroundImageOverlay: "rgba(0, 0, 0, 0.4)",
  // Active background color for success buttons
  colorBackgroundButtonSuccessActive: "rgb(46, 132, 74)",
  // Background color for error toast messaging.
  colorBackgroundToastError: "rgb(234, 0, 30)",
  // The background color of an internal scrollbar track.
  colorBackgroundScrollbarTrack: "rgb(201, 201, 201)",
  // Background color for input field that has encountered an error.
  colorBackgroundInputError: "rgb(253, 221, 227)",
  // Border color for disabled inverse button.
  colorBorderButtonInverseDisabled: "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
  colorBorderIconInverseHintHover: "rgba(255, 255, 255, 0.75)",
  // Border color for a button with an icon that has a parent element that has a hover state
  colorBorderIconInverseHint: "rgba(255, 255, 255, 0.5)",
  // Border color for an active tab.
  colorBorderTabActive: "rgb(255, 255, 255)",
  // Border color on disabled form elements.
  colorBorderInputDisabled: "rgb(201, 201, 201)",
  // Border color on notification reminders.
  colorBorderReminder: "rgb(243, 243, 243)",
  // Border color for brandable primary button - disabled state
  colorBorderButtonBrandDisabled: "rgba(0, 0, 0, 0)",
  // Border color for default secondary button
  colorBorderButtonDefault: "rgb(201, 201, 201)",
  // Border color on active form elements.
  colorBorderInputActive: "rgb(27, 150, 255)",
  // Border color on form elements.
  colorBorderInput: "rgb(201, 201, 201)",
  // These borders create the faux checkmark when the checkbox toggle is in the checked state.
  colorBorderToggleChecked: "rgb(255, 255, 255)",
  // Border color for a selected tab in a tab group.
  colorBorderTabSelected: "rgb(1, 118, 211)",
  borderStrokeWidthThin: "1px",
  borderStrokeWidthThick: "2px",
  // Shadow for notifications that should be elevated above other components but under modals.
  shadowReminder: "0 2px 3px 0 rgba(0, 0, 0, 0.20)",
  // Custom glow for focus states on UI elements with explicit containers.
  shadowButtonFocus: "0 0 3px #0176d3",
  // Custom glow for focus states on UI button elements with explicit containers on dark or vibrantly colored backgrounds.
  shadowButtonFocusInverse: "0 0 3px #f3f3f3",
  // Shadow to make inline edit card pop out.
  shadowInlineEdit: "0 2px 4px 4px rgba(0, 0, 0, 0.16)",
  // Shadow on elements that are docked to the bottom of the viewport.
  shadowDocked: "0 -2px 2px 0 rgba(0, 0, 0, 0.16)",
  // Shadow for header.
  shadowHeader: "0 2px 4px rgba(0, 0, 0, 0.07)",
  // 4.8 seconds
  durationToastShort: "4.8s",
  // 9.6 seconds
  durationToastMedium: "9.6s",
  illustrationEmptyStateAssistant: "/assets/images/illustrations/empty-state-assistant.svg",
  illustrationEmptyStateEvents: "/assets/images/illustrations/empty-state-events.svg",
  illustrationEmptyStateTasks: "/assets/images/illustrations/empty-state-tasks.svg",
  bannerUserDefaultImage: "",
  bannerGroupDefaultImage: "",
  userDefaultAvatar: "/profile_avatar_200.png",
  userDefaultAvatarMedium: "/profile_avatar_160.png",
  userDefaultAvatarSmall: "/profile_avatar_96.png",
  groupDefaultAvatar: "/group_avatar_200.png",
  groupDefaultAvatarMedium: "/group_avatar_160.png",
  groupDefaultAvatarSmall: "/group_avatar_96.png",
  // Line heights for tabs
  lineHeightTab: "2.5rem",
  borderRadiusPill: "15rem",
  // Minimum height of a pill.
  heightPill: "1.625rem",
  // Brand header. Phone 44px; Tablet 50px
  heightHeader: "2.75rem",
  // Action footer menu. Phone 44px; Tablet 50px
  heightFooter: "3.75rem",
  // Text input height
  heightInput: "1.875rem",
  // Stage left for desktop when closed (showing icons only).
  widthStageLeftCollapsed: "4rem",
  // Stage left for desktop when open.
  widthStageLeftExpanded: "15rem",
  // Maximum width for action overflow menu so that it's not full-screen for tablet.
  maxWidthActionOverflowMenu: "512px",
  // Default amount of line breaks before text is truncated
  lineClamp: 3,
  // Icon color on dark background
  colorTextIconInverse: "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.
  colorTextButtonInverseDisabled: "rgba(255, 255, 255, 0.5)",
  // Input icon
  colorTextInputIcon: "rgb(174, 174, 174)",
  // Icon color on dark background - active state
  colorTextIconInverseActive: "rgb(255, 255, 255)",
  // Text color for default secondary button - hover state
  colorTextButtonDefaultHover: "rgb(1, 118, 211)",
  // Input disabled text
  colorTextInputDisabled: "rgb(116, 116, 116)",
  // Text color for default secondary button
  colorTextButtonDefault: "rgb(1, 118, 211)",
  // Default icon color - disabled state
  colorTextIconDefaultDisabled: "rgb(201, 201, 201)",
  // Text color for brandable primary button - disabled state
  colorTextButtonBrandDisabled: "rgb(255, 255, 255)",
  // Text color for brandable primary button - hover state
  colorTextButtonBrandHover: "rgb(255, 255, 255)",
  // Default icon color - hover state.
  colorTextIconDefaultHover: "rgb(1, 118, 211)",
  // Text color for brandable primary button
  colorTextButtonBrand: "rgb(255, 255, 255)",
  // Text color for default secondary button - disabled state
  colorTextButtonDefaultDisabled: "rgb(201, 201, 201)",
  // Color for default text in a tab group.
  colorTextTabLabel: "rgb(3, 45, 96)",
  // Default icon color - active state.
  colorTextIconDefaultActive: "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.
  colorTextIconDefaultHint: "rgb(174, 174, 174)",
  // Text color for brandable primary button - active state
  colorTextButtonBrandActive: "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.
  colorTextButtonInverse: "rgb(243, 243, 243)",
  // Text color for default secondary button - active state
  colorTextButtonDefaultActive: "rgb(1, 118, 211)",
  // Icon color on dark background - disabled state
  colorTextIconInverseDisabled: "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.
  colorTextButtonDefaultHint: "rgb(174, 174, 174)",
  // Icon color on dark background - hover state
  colorTextIconInverseHover: "rgb(255, 255, 255)",
  // Typed input text
  colorTextInputFocusInverse: "rgb(3, 45, 96)",
  // White avatar group background color.
  avatarGroupColorBackgroundLightest: "rgb(255, 255, 255)",
  // Dark gray avatar group background color.
  avatarGroupColorBackgroundInverse: "rgb(116, 116, 116)",
  // White badge background color.
  badgeColorBackgroundLightest: "rgb(255, 255, 255)",
  // Dark gray badge background color.
  badgeColorBackgroundInverse: "rgb(116, 116, 116)",
  brandBandDefaultImage: "",
  brandBandColorBackgroundPrimary: "rgba(0, 0, 0, 0)",
  brandBandColorBackgroundPrimaryTransparent: "rgba(0, 0, 0, 0)",
  brandBandColorBackgroundSecondary: "rgba(0, 0, 0, 0)",
  brandBandColorBackgroundSecondaryTransparent: "rgba(0, 0, 0, 0)",
  brandBandImageHeightSmall: "6rem",
  brandBandImageHeightMedium: "12.5rem",
  brandBandImageHeightLarge: "18.75rem",
  brandBandScrimHeight: "3.125rem",
  templateGutters: "0",
  templateProfileGutters: "0",
  buttonIconColorBorderPrimary: "rgb(255, 255, 255)",
  buttonIconBoundaryTouch: "2.75rem",
  buttonColorBorderPrimary: "rgb(243, 243, 243)",
  buttonColorBorderBrandPrimary: "rgb(1, 118, 211)",
  buttonColorBorderSecondary: "rgba(255, 255, 255, 0.8)",
  buttonBorderRadius: ".25rem",
  // Default secondary button - focus state
  colorBackgroundButtonDefaultFocus: "rgb(243, 243, 243)",
  // Use BRAND_ACCESSIBLE to pick up theming capabilities
  buttonColorBackgroundBrandPrimary: "rgb(1, 118, 211)",
  // Disabled button backgrounds on inverse/dark backgrounds
  colorBackgroundButtonInverseDisabled: "rgba(0, 0, 0, 0)",
  // Default secondary button - hover state
  colorBackgroundButtonDefaultHover: "rgb(243, 243, 243)",
  // Default secondary button
  colorBackgroundButtonDefault: "rgb(255, 255, 255)",
  // Background color for icon-only button - disabled state
  colorBackgroundButtonIconDisabled: "rgb(255, 255, 255)",
  // Background color for icon-only button - focus state
  colorBackgroundButtonIconFocus: "rgb(243, 243, 243)",
  buttonColorBackgroundSecondary: "rgba(255, 255, 255, 0.8)",
  // Brandable primary button - disabled state
  colorBackgroundButtonBrandDisabled: "rgb(243, 243, 243)",
  // Brandable primary button - hover state
  colorBackgroundButtonBrandHover: "rgb(1, 68, 134)",
  // Active button backgrounds on inverse backgrounds on mobile
  colorBackgroundButtonInverseActive: "rgba(0, 0, 0, 0.24)",
  // Background color for icon-only button - hover state
  colorBackgroundButtonIconHover: "rgb(243, 243, 243)",
  // Brandable primary button
  colorBackgroundButtonBrand: "rgb(1, 118, 211)",
  // Background color for icon-only button
  colorBackgroundButtonIcon: "rgba(0, 0, 0, 0)",
  // Default secondary button - disabled state
  colorBackgroundButtonDefaultDisabled: "rgb(255, 255, 255)",
  // Background color for icon-only button - active state
  colorBackgroundButtonIconActive: "rgb(243, 243, 243)",
  // Brandable primary button - active state
  colorBackgroundButtonBrandActive: "rgb(3, 45, 96)",
  // Button backgrounds on inverse/dark backgrounds
  colorBackgroundButtonInverse: "rgba(0, 0, 0, 0)",
  buttonColorBackgroundPrimary: "rgb(255, 255, 255)",
  // Default secondary button - active state
  colorBackgroundButtonDefaultActive: "rgb(243, 243, 243)",
  // Line heights for regular buttons
  lineHeightButton: "1.875rem",
  // Line heights for small buttons
  lineHeightButtonSmall: "1.75rem",
  // Line height for touch screens
  buttonLineHeightTouch: "2.65rem",
  buttonColorTextPrimary: "rgb(255, 255, 255)",
  // Default Card component background color.
  cardColorBackground: "rgb(255, 255, 255)",
  cardColorBorder: "rgb(201, 201, 201)",
  cardFooterColorBorder: "rgba(0, 0, 0, 0)",
  cardShadow: "none",
  // Use for active tab.
  cardFontWeight: "400",
  // 
  cardFooterMargin: "0.75rem",
  // 
  cardBodyPadding: "0 1rem",
  // 
  cardWrapperSpacing: "1rem",
  // 
  cardHeaderPadding: "0.75rem 1rem 0",
  // 
  cardSpacingLarge: "1.5rem",
  // 
  cardHeaderMargin: "0 0 0.75rem",
  // Use for vertical spacing between cards
  cardSpacingMargin: "1rem",
  // 
  cardFooterPadding: "0 1rem 0.75rem",
  // 
  cardSpacingSmall: "0.75rem",
  cardFooterTextAlign: "right",
  // Default background for carousel card
  carouselColorBackground: "rgb(255, 255, 255)",
  // Default background for carousel navigation indicators
  carouselIndicatorColorBackground: "rgb(255, 255, 255)",
  // Default hover background for carousel navigation indicators
  carouselIndicatorColorBackgroundHover: "rgb(243, 243, 243)",
  // Default focus background for carousel navigation indicators
  carouselIndicatorColorBackgroundFocus: "rgb(1, 68, 134)",
  // Default background for active state on carousel navigation indicators
  carouselIndicatorColorBackgroundActive: "rgb(1, 118, 211)",
  // Default width for carousel indicator width
  carouselIndicatorWidth: "1rem",
  // Inbound chat message background color.
  chatMessageColorBackgroundInbound: "rgb(243, 243, 243)",
  // Outbound chat message background color.
  chatMessageColorBackgroundOutbound: "rgb(1, 68, 134)",
  // Outbound agent chat message background color.
  chatMessageColorBackgroundOutboundAgent: "rgb(116, 116, 116)",
  // Status chat message background color.
  chatMessageColorBackgroundStatus: "rgb(255, 255, 255)",
  // Line heights for toggle buttons
  lineHeightToggle: "1.3rem",
  // Slider size for toggle.
  squareToggleSlider: "1.25rem",
  // Slider width.
  widthToggle: "3rem",
  // Slider height.
  heightToggle: "1.5rem",
  colorPickerSliderThumbColorBackground: "rgb(243, 243, 243)",
  colorPickerSliderThumbBorderColor: "rgb(68, 68, 68)",
  colorPickerSwatchShadow: "inset 0 0 1px rgba(0,0,0,0.4)",
  colorPickerInputCustomHexFontSize: "0.75rem",
  colorPickerSelectorWidth: "14rem",
  colorPickerSwatchesWidth: "13.3rem",
  colorPickerRangeHeight: "5rem",
  colorPickerSliderHeight: "1.5rem",
  colorPickerThumbWidth: "0.375rem",
  colorPickerRangeIndicatorSize: "0.75rem",
  colorPickerInputCustomHexWidth: "4.2rem",
  colorPickerSwatchSize: "1.25rem",
  // Alternating row background color for tables
  tableColorBackgroundStripes: "rgb(243, 243, 243)",
  // Default background color for table headers
  tableColorBackgroundHeader: "rgb(255, 255, 255)",
  // Hover state for table header cells
  tableColorBackgroundHeaderHover: "rgb(243, 243, 243)",
  // Focused state for table header cells
  tableColorBackgroundHeaderFocus: "rgb(255, 255, 255)",
  // Resizable handle color for table header cells
  tableColorBackgroundHeaderResizableHandle: "rgb(174, 174, 174)",
  tableBorderRadius: "0",
  // 
  tableCellSpacing: "0.5rem",
  tableColorTextHeader: "rgb(68, 68, 68)",
  datepickerColorTextDayAdjacentMonth: "rgb(116, 116, 116)",
  // Docked panel header’s background color.
  colorBackgroundDockedPanelHeader: "rgb(255, 255, 255)",
  // Docked panel’s background color when open.
  colorBackgroundDockedPanel: "rgb(255, 255, 255)",
  // Height of the docked bar.
  heightDockedBar: "2.5rem",
  // Utility bar notifications badge background color.
  utilityBarColorBackgroundNotificationBadge: "rgb(254, 92, 76)",
  // Utility bar notifications focus background color.
  utilityBarColorBackgroundNotificationFocus: "rgb(201, 201, 201)",
  dropZoneSlotHeight: "0.25rem",
  // Default color for animated icon waffle for app switcher.
  colorBackgroundIconWaffle: "rgb(116, 116, 116)",
  // Default background color for a typing icon dot.
  typingIconDotColorBackgroundGray: "rgb(201, 201, 201)",
  // Active background color for a typing icon dot when animcating.
  typingIconDotColorBackgroundGrayDark: "rgb(201, 201, 201)",
  // Brand fill color
  globalActionFillHover: "rgb(1, 68, 134)",
  // Global action icon size
  globalActionIconSize: "1.5rem",
  // Typing icon size
  typingIconDotSize: ".5rem",
  einsteinHeaderBackground: "/einstein-headers/einstein-header-background.svg",
  einsteinHeaderFigure: "/einstein-headers/einstein-figure.svg",
  // Background color for Einstein header
  einsteinHeaderBackgroundColor: "rgb(144, 208, 254)",
  // Text shadow color for Einstein header background to make text more readable
  einsteinHeaderTextShadow: "#cfe9fe",
  filesZIndexHover: 5,
  formLabelFontSize: "0.75rem",
  // Global Header background color
  globalHeaderColorBackground: "rgb(255, 255, 255)",
  brandLogoImage: "/logo-noname.svg",
  // Global identity icon size.
  squareIconGlobalIdentityIcon: "1.25rem",
  // Hovered context bar item background color.
  colorBackgroundContextBarItemHover: "rgb(255, 255, 255)",
  // Active context bar item background color.
  colorBackgroundContextBarItemActive: "rgb(255, 255, 255)",
  // Default context bar background color.
  colorBackgroundContextBar: "rgb(255, 255, 255)",
  // Context TAB bar item background color.
  colorBackgroundContextTabBarItem: "rgb(255, 255, 255)",
  // Hovered context bar item background color.
  colorBackgroundContextBarInverseItemHover: "rgba(255, 255, 255, 0.2)",
  // A Gradient used for putting shadows on the bottom when box-shadow is not possible.
  colorBackgroundContextBarShadow: "linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0, rgba(0, 0, 0, 0) 100%)",
  // Active context bar item background color.
  colorBackgroundContextBarInverseItemActive: "rgba(255, 255, 255, 0.4)",
  // Brand color in context bar for default theme
  colorBackgroundContextBarBrandAccent: "rgb(13, 157, 218)",
  // Highlight for context bar action (hover and focus states).
  colorBackgroundContextBarActionHighlight: "rgba(255, 255, 255, 0.2)",
  // Divider in context bar
  colorBorderContextBarDivider: "rgba(255, 255, 255, 0.2)",
  // Border color in context bar
  colorBorderContextBarItem: "rgba(0, 0, 0, 0.2)",
  // Border color in context bar on dark background
  colorBorderContextBarInverseItem: "rgba(255, 255, 255, 0.2)",
  // Border color in context bar for default theme
  colorBorderContextBarThemeDefault: "rgb(13, 157, 218)",
  // Alternate border color in context bar for default theme
  colorBorderContextBarThemeDefaultAlt: "rgb(243, 243, 243)",
  // Hovered border color in context bar for default theme
  colorBorderContextBarThemeDefaultHover: "rgb(50, 29, 113)",
  // Active border color in context bar for default theme
  colorBorderContextBarThemeDefaultActive: "rgb(243, 243, 243)",
  // Context bar height.
  heightContextBar: "2.5rem",
  // Context bar tab accent height when tab is active.
  globalnavigationItemHeightAccentActive: "3px",
  // Context bar tab accent height when tab is focused.
  globalnavigationItemHeightAccentFocus: "4px",
  // Context bar text color
  colorTextContextBar: "rgb(68, 68, 68)",
  // Context bar text color on a dark background
  colorTextContextBarInverse: "rgb(255, 255, 255)",
  // Context bar action trigger text color
  colorTextContextBarActionTrigger: "rgba(255, 255, 255, 0.4)",
  // Primary color for illustrations
  illustrationColorPrimary: "rgb(144, 208, 254)",
  // Secondary color for illustrations
  illustrationColorSecondary: "rgb(207, 233, 254)",
  inputStaticFontSize: "0.8125rem",
  inputStaticFontWeight: "400",
  inputReadonlyFontWeight: "400",
  inputStaticColor: "rgb(24, 24, 24)",
  // Default Page Header background color
  pageHeaderColorBackground: "rgb(243, 243, 243)",
  // Secondary Page Header background color
  pageHeaderColorBackgroundAlt: "rgb(255, 255, 255)",
  // Use COLOR_BACKGROUND_PAGE_HEADER instead.
  colorBackgroundAnchor: "rgb(243, 243, 243)",
  // Page Header background color
  colorBackgroundPageHeader: "rgb(255, 255, 255)",
  pageHeaderColorBorder: "rgba(0, 0, 0, 0)",
  pageHeaderJoinedColorBorder: "rgb(201, 201, 201)",
  pageHeaderBorderRadius: "0",
  pageHeaderShadow: "none",
  pageHeaderTitleFontSize: "1.125rem",
  pageHeaderTitleFontWeight: "400",
  // Page header Entity Icon size
  pageHeaderIconSize: "2.25rem",
  // 
  pageHeaderSpacingMargin: "0",
  // 
  pageHeaderSpacingPadding: "1rem",
  // 
  pageHeaderSpacingRow: "0.75rem 1rem",
  // Dropshadow found on docked UI panels when positioned to the left of a viewport
  panelDockedLeftShadow: "1px 0 3px rgba(0,0,0,0.25)",
  // Dropshadow found on docked UI panels when positioned to the left of a viewport
  panelDockedRightShadow: "-1px 0 3px 0 rgba(0,0,0,0.25)",
  // The hover background color for Salespath stages that have not been completed.
  colorBackgroundPathIncompleteHover: "rgb(201, 201, 201)",
  // The background color for the step action arrow that are the active stage
  colorBackgroundPathStepActionActive: "rgb(0, 22, 57)",
  // The background color for Salespath stages that have not been completed.
  colorBackgroundPathIncomplete: "rgb(243, 243, 243)",
  // The hover background color for Salespath stages that are the active stage.
  colorBackgroundPathActiveHover: "rgb(3, 45, 96)",
  // The background color for the final stage of a Salespath when it has been lost.
  colorBackgroundPathLost: "rgb(234, 0, 30)",
  // The background color for Salespath stages that are the active stage.
  colorBackgroundPathActive: "rgb(1, 68, 134)",
  // The background color for Salespath guidance coaching section.
  colorBackgroundGuidance: "rgb(255, 255, 255)",
  // The background color for the final stage of a Salespath when it has been lost.
  colorBackgroundPathWon: "rgb(46, 132, 74)",
  // The hover background color for Salespath stages that are the current stage.
  colorBackgroundPathCurrentHover: "rgb(255, 255, 255)",
  // The background color for Salespath stages that are the current stage.
  colorBackgroundPathCurrent: "rgb(255, 255, 255)",
  // The hover background color for Salespath stages that are complete.
  colorBackgroundPathCompleteHover: "rgb(46, 132, 74)",
  // The background color for Salespath stages that are complete.
  colorBackgroundPathComplete: "rgb(59, 167, 85)",
  // The background color for the step action arrow that are the current stage
  colorBackgroundPathStepActionCurrent: "rgb(1, 68, 134)",
  // The background color for the overall Salespath coaching section.
  colorBackgroundPathExpanded: "rgb(255, 255, 255)",
  // Used as a separator between dark colors like the stages of salespath.
  colorBorderPathDivider: "rgb(255, 255, 255)",
  // Used as a border color for the active Path step.
  colorBorderPathCurrent: "rgb(1, 68, 134)",
  // Used as a border color for the current path step on hover.
  colorBorderPathCurrentHover: "rgb(3, 45, 96)",
  // Line heights for salespath
  lineHeightSalespath: "1.5rem",
  // Height of Path
  heightSalesPath: "2rem",
  // Width of action button to right
  pathButtonWidthFixed: "13rem",
  // Border width of current stage for path item
  widthPathBorderCurrent: "0.125rem",
  // Used as a text color for the active Path step.
  colorTextPathCurrent: "rgb(1, 68, 134)",
  // Used as a text hover color for the active Path step.
  colorTextPathCurrentHover: "rgb(3, 45, 96)",
  // The default background color for Popover Walkthrough
  popoverWalkthroughColorBackground: "rgb(0, 22, 57)",
  // The default background color for Popover Walkthrough Header
  popoverWalkthroughHeaderColorBackground: "rgb(3, 45, 96)",
  // The default background color for alternative Popover Walkthrough
  popoverWalkthroughColorBackgroundAlt: "rgb(1, 118, 211)",
  popoverWalkthroughHeaderImage: "",
  popoverWalkthroughAltImage: "",
  // The background color for nubbins on the bottom of alternate walkthrough popovers
  popoverWalkthroughAltNubbinColorBackground: "rgb(1, 118, 211)",
  // Tooltip nubbin square size
  nubbinSizeDefault: "1rem",
  // Tooltip nubbin offset for branded popovers
  nubbinTriangleOffset: "-0.1875rem",
  // The default border width for Branded Popover
  popoverBrandBorderWidth: "0.25rem",
  // Text color for step counter in walkthrough variant of popovers
  popoverColorText: "rgb(201, 201, 201)",
  // The default background color for Progress Indicator
  progressColorBackground: "rgb(255, 255, 255)",
  // The shaded background color for Progress Indicator
  progressColorBackgroundShade: "rgb(243, 243, 243)",
  // The background color for the Progress Bar
  progressBarColorBackground: "rgb(201, 201, 201)",
  // The background color of the fill for the Progress Bar
  progressBarColorBackgroundFill: "rgb(26, 185, 255)",
  // The success background color of the fill for the Progress Bar
  progressBarColorBackgroundFillSuccess: "rgb(46, 132, 74)",
  // Borders of each indicator item within the Progress Indicator
  progressColorBorder: "rgb(255, 255, 255)",
  // Shaded borders of each indicator item within the Progress Indicator
  progressColorBorderShade: "rgb(243, 243, 243)",
  // Hovered border color of each indicator item within the Progress Indicator
  progressColorBorderHover: "rgb(1, 118, 211)",
  // Active border color of each indicator item within the Progress Indicator
  progressColorBorderActive: "rgb(27, 150, 255)",
  // Height of the Progress Bar
  progressBarHeight: "0.125rem",
  // Inner color for progress ring component
  colorBackgroundProgressRingContent: "rgb(255, 255, 255)",
  // Thickness of the Progress Ring's ring
  progressRingWidth: "0.1875rem",
  // Line height for touch screens
  radioButtonGroupLineHeightTouch: "2.69rem",
  // Dark notification component background color.
  notificationColorBackgroundInverse: "rgb(116, 116, 116)",
  sliderHandleColorBackground: "rgb(27, 150, 255)",
  sliderHandleColorBackgroundHover: "rgb(1, 118, 211)",
  sliderHandleColorBackgroundFocus: "rgb(1, 118, 211)",
  sliderHandleColorBackgroundActive: "rgb(1, 118, 211)",
  sliderTrackColorBackground: "rgb(243, 243, 243)",
  sliderTrackColorBackgroundFill: "rgb(27, 150, 255)",
  sliderColorBackgroundDisabled: "rgb(243, 243, 243)",
  sliderHandleShadow: "rgba(0, 0, 0, 0.16) 0 2px 3px",
  // 
  sliderHandleSize: "1rem",
  // 
  sliderTrackHeight: "4px",
  // 
  sliderTrackWidth: "100%",
  // Spinner size for xx-small modifier
  spinnerSizeXxSmall: "0.5rem",
  // Spinner size for x-small modifier
  spinnerSizeXSmall: "1rem",
  // Spinner size for small modifier
  spinnerSizeSmall: "1.25rem",
  // Spinner size for medium modifier
  spinnerSizeMedium: "2rem",
  // Spinner size for large modifier
  spinnerSizeLarge: "2.75rem",
  // Split View background color.
  splitViewColorBackground: "rgb(243, 243, 243)",
  // Split View background color on row hover.
  splitViewColorBackgroundRowHover: "rgb(255, 255, 255)",
  // Row dividers in Split View list
  splitViewColorBorder: "rgb(201, 201, 201)",
  // Default width for split view container
  splitViewWidth: "25rem",
  // Use for active tab.
  tabsFontWeight: "400",
  // Vertical navigation shaded background color on row hover.
  verticalNavigationColorBackgroundShadeRowHover: "rgb(243, 243, 243)",
  // Vertical navigation shaded background color on row active.
  verticalNavigationColorBackgroundShadeRowActive: "rgb(243, 243, 243)",
  // Text color for the Info section
  welcomeMatTextColorInfo: "rgb(3, 45, 96)",
  // Background Image Path for the Welcome Mat Info section
  welcomeMatBackgroundImageInfo: "/welcome-mat/bg-info@2x.png",
  // Background overflow color for the Welcome Mat Info section
  welcomeMatBackgroundColorInfo: "rgb(207, 233, 254)",
  // Progress Bar background is white
  welcomeMatColorBackgroundProgressBar: "rgb(255, 255, 255)",
  // Box Shadow declaration
  welcomeMatColorActionShadow: "rgba(0, 0, 0, 0.05)",
  // Completed icon color for the Welcome Mat Boxes
  welcomeMatColorIconComplete: "rgb(201, 201, 201)",
  // Font size for the info title
  welcomeMatFontSizeInfoTitle: "2.625rem",
  // Welcome Mat Width
  welcomeMatWidth: "52.0625rem",
  // Min height for Overlay
  welcomeMatMinHeight: "25rem",
  // Max height for Overlay
  welcomeMatMaxHeight: "37.5rem",
  // Welcome Mat Progress Bar width
  welcomeMatWidthProgressBar: "12.5rem",
  // Size of the green completed check mark
  welcomeMatCompleteIconSize: "1.25rem",
  // Size of the check mark in the green icon
  welcomeMatCheckSize: "0.625rem",
  // Bottom spacing (safe area) for background image
  welcomeMatSpacingInfo: "7.75rem",
};