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",
};