@elastic/eui 101.4.0 → 102.0.0

package/dist/eui_theme_borealis_light.json

@@ -39,8 +39,10 @@
     "primary": "#0B64DD",
     "accent": "#BC1E70",
     "accentSecondary": "#008B87",
+    "neutral": "#1C8CB5",
     "success": "#008A5E",
     "warning": "#FACB3D",
+    "risk": "#ED6723",
     "danger": "#C61E25",
     "ghost": "#ffffff",
     "text": "#5A6D8C"
@@ -300,21 +302,6 @@
   "euiColorVisDanger0": "#F6726A",
   "euiColorVisDanger1": "#FFC9C2",
   "euiColorVisNeutral0": "#F6F9FC",
-  "euiColorSeverity0": "#E3E6EB",
-  "euiColorSeverity1": "#5A6D8C",
-  "euiColorSeverity2": "#7186A8",
-  "euiColorSeverity3": "#8E9FBC",
-  "euiColorSeverity4": "#ABB9D0",
-  "euiColorSeverity5": "#CAD3E2",
-  "euiColorSeverity6": "#FDE9B5",
-  "euiColorSeverity7": "#FCD883",
-  "euiColorSeverity8": "#FFC9C2",
-  "euiColorSeverity9": "#FFB5AD",
-  "euiColorSeverity10": "#FC9188",
-  "euiColorSeverity11": "#F6726A",
-  "euiColorSeverity12": "#EE4C48",
-  "euiColorSeverity13": "#DA3737",
-  "euiColorSeverity14": "#C61E25",
   "euiColorVisGrey0": "#CAD3E2",
   "euiColorVisGrey1": "#8E9FBC",
   "euiColorVisGrey2": "#5A6D8C",
@@ -327,6 +314,12 @@
   "euiColorVisCool2": "#61A2FF",
   "euiColorVisComplementary0": "#61A2FF",
   "euiColorVisComplementary1": "#EAAE01",
+  "euiColorSeverityUnknown": "#E3E8F2",
+  "euiColorSeverityNeutral": "#B5E5F2",
+  "euiColorSeveritySuccess": "#24C292",
+  "euiColorSeverityWarning": "#FCD883",
+  "euiColorSeverityRisk": "#FF995E",
+  "euiColorSeverityDanger": "#EE4C48",
   "euiColorChartLines": "#CAD3E2",
   "euiColorChartBand": "#F6F9FC",
   "euiColorGhost": "#FFFFFF",
@@ -362,8 +355,10 @@
   "euiColorTextPrimary": "#1750BA",
   "euiColorTextAccent": "#A11262",
   "euiColorTextAccentSecondary": "#047471",
+  "euiColorTextNeutral": "#0F658A",
   "euiColorTextSuccess": "#09724D",
   "euiColorTextWarning": "#6A4906",
+  "euiColorTextRisk": "#9E3A16",
   "euiColorTextDanger": "#A71627",
   "euiColorTextParagraph": "#1D2A3E",
   "euiColorTextHeading": "#111C2C",
@@ -373,8 +368,10 @@
   "euiColorBackgroundBasePrimary": "#E8F1FF",
   "euiColorBackgroundBaseAccent": "#FFEBF5",
   "euiColorBackgroundBaseAccentSecondary": "#E2F9F7",
+  "euiColorBackgroundBaseNeutral": "#E5F6FA",
   "euiColorBackgroundBaseSuccess": "#E2F8F0",
   "euiColorBackgroundBaseWarning": "#FDF3D8",
+  "euiColorBackgroundBaseRisk": "#FFEDD6",
   "euiColorBackgroundBaseDanger": "#FFE8E5",
   "euiColorBackgroundBaseSubdued": "#F6F9FC",
   "euiColorBackgroundBasePlain": "#FFFFFF",
@@ -390,22 +387,28 @@
   "euiColorBackgroundLightPrimary": "#D9E8FF",
   "euiColorBackgroundLightAccent": "#FDDDE9",
   "euiColorBackgroundLightAccentSecondary": "#C9F3F0",
+  "euiColorBackgroundLightNeutral": "#CFEEF7",
   "euiColorBackgroundLightSuccess": "#C9F3E3",
   "euiColorBackgroundLightWarning": "#FDE9B5",
+  "euiColorBackgroundLightRisk": "#FFDEBF",
   "euiColorBackgroundLightDanger": "#FDDDD8",
   "euiColorBackgroundLightText": "#E3E8F2",
   "euiColorBackgroundFilledPrimary": "#0B64DD",
   "euiColorBackgroundFilledAccent": "#BC1E70",
   "euiColorBackgroundFilledAccentSecondary": "#008B87",
+  "euiColorBackgroundFilledNeutral": "#1C8CB5",
   "euiColorBackgroundFilledSuccess": "#008A5E",
   "euiColorBackgroundFilledWarning": "#FACB3D",
+  "euiColorBackgroundFilledRisk": "#ED6723",
   "euiColorBackgroundFilledDanger": "#C61E25",
   "euiColorBackgroundFilledText": "#5A6D8C",
   "euiColorBorderBasePrimary": "#BFDBFF",
   "euiColorBorderBaseAccent": "#FFC7DB",
   "euiColorBorderBaseAccentSecondary": "#A6EDEA",
+  "euiColorBorderBaseNeutral": "#B5E5F2",
   "euiColorBorderBaseSuccess": "#AEE8D2",
   "euiColorBorderBaseWarning": "#FCD883",
+  "euiColorBorderBaseRisk": "#FFCDA1",
   "euiColorBorderBaseDanger": "#FFC9C2",
   "euiColorBorderBasePlain": "#CAD3E2",
   "euiColorBorderBaseSubdued": "#E3E8F2",
@@ -416,7 +419,9 @@
   "euiColorBorderStrongPrimary": "#1750BA",
   "euiColorBorderStrongAccent": "#A11262",
   "euiColorBorderStrongAccentSecondary": "#047471",
+  "euiColorBorderStrongNeutral": "#0F658A",
   "euiColorBorderStrongSuccess": "#09724D",
   "euiColorBorderStrongWarning": "#825803",
+  "euiColorBorderStrongRisk": "#9E3A16",
   "euiColorBorderStrongDanger": "#A71627"
 }

package/dist/eui_theme_borealis_light.json.d.ts

@@ -40,8 +40,10 @@ declare module '@elastic/eui/dist/eui_theme_borealis_light.json' {
       primary: string;
       accent: string;
       accentSecondary: string;
+      neutral: string;
       success: string;
       warning: string;
+      risk: string;
       danger: string;
       ghost: string;
       text: string;
@@ -313,21 +315,12 @@ declare module '@elastic/eui/dist/eui_theme_borealis_light.json' {
     euiColorVisCool2: string;
     euiColorVisComplementary0: string;
     euiColorVisComplementary1: string;
-    euiColorSeverity0: string;
-    euiColorSeverity1: string;
-    euiColorSeverity2: string;
-    euiColorSeverity3: string;
-    euiColorSeverity4: string;
-    euiColorSeverity5: string;
-    euiColorSeverity6: string;
-    euiColorSeverity7: string;
-    euiColorSeverity8: string;
-    euiColorSeverity9: string;
-    euiColorSeverity10: string;
-    euiColorSeverity11: string;
-    euiColorSeverity12: string;
-    euiColorSeverity13: string;
-    euiColorSeverity14: string;
+    euiColorSeverityUnknown: string;
+    euiColorSeverityNeutral: string;
+    euiColorSeveritySuccess: string;
+    euiColorSeverityWarning: string;
+    euiColorSeverityRisk: string;
+    euiColorSeverityDanger: string;
     euiColorChartLines: string;
     euiColorChartBand: string;
     euiColorGhost: string;
@@ -363,8 +356,10 @@ declare module '@elastic/eui/dist/eui_theme_borealis_light.json' {
     euiColorTextPrimary: string;
     euiColorTextAccent: string;
     euiColorTextAccentSecondary: string;
+    euiColorTextNeutral: string;
     euiColorTextSuccess: string;
     euiColorTextWarning: string;
+    euiColorTextRisk: string;
     euiColorTextDanger: string;
     euiColorTextParagraph: string;
     euiColorTextHeading: string;
@@ -374,8 +369,10 @@ declare module '@elastic/eui/dist/eui_theme_borealis_light.json' {
     euiColorBackgroundBasePrimary: string;
     euiColorBackgroundBaseAccent: string;
     euiColorBackgroundBaseAccentSecondary: string;
+    euiColorBackgroundBaseNeutral: string;
     euiColorBackgroundBaseSuccess: string;
     euiColorBackgroundBaseWarning: string;
+    euiColorBackgroundBaseRisk: string;
     euiColorBackgroundBaseDanger: string;
     euiColorBackgroundBaseSubdued: string;
     euiColorBackgroundBasePlain: string;
@@ -391,22 +388,28 @@ declare module '@elastic/eui/dist/eui_theme_borealis_light.json' {
     euiColorBackgroundLightPrimary: string;
     euiColorBackgroundLightAccent: string;
     euiColorBackgroundLightAccentSecondary: string;
+    euiColorBackgroundLightNeutral: string;
     euiColorBackgroundLightSuccess: string;
     euiColorBackgroundLightWarning: string;
+    euiColorBackgroundLightRisk: string;
     euiColorBackgroundLightDanger: string;
     euiColorBackgroundLightText: string;
     euiColorBackgroundFilledPrimary: string;
     euiColorBackgroundFilledAccent: string;
     euiColorBackgroundFilledAccentSecondary: string;
+    euiColorBackgroundFilledNeutral: string;
     euiColorBackgroundFilledSuccess: string;
     euiColorBackgroundFilledWarning: string;
+    euiColorBackgroundFilledRisk: string;
     euiColorBackgroundFilledDanger: string;
     euiColorBackgroundFilledText: string;
     euiColorBorderBasePrimary: string;
     euiColorBorderBaseAccent: string;
     euiColorBorderBaseAccentSecondary: string;
+    euiColorBorderBaseNeutral: string;
     euiColorBorderBaseSuccess: string;
     euiColorBorderBaseWarning: string;
+    euiColorBorderBaseRisk: string;
     euiColorBorderBaseDanger: string;
     euiColorBorderBasePlain: string;
     euiColorBorderBaseSubdued: string;
@@ -417,8 +420,10 @@ declare module '@elastic/eui/dist/eui_theme_borealis_light.json' {
     euiColorBorderStrongPrimary: string;
     euiColorBorderStrongAccent: string;
     euiColorBorderStrongAccentSecondary: string;
+    euiColorBorderStrongNeutral: string;
     euiColorBorderStrongSuccess: string;
     euiColorBorderStrongWarning: string;
+    euiColorBorderStrongRisk: string;
     euiColorBorderStrongDanger: string;
   };
   export default sassVariables;

package/es/components/badge/badge.js

@@ -33,7 +33,7 @@ import { getTextColor, getColorContrast, getIsValidColor } from './color_utils';
 import { euiBadgeStyles } from './badge.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var ICON_SIDES = ['left', 'right'];
-export var COLORS = ['default', 'hollow', 'primary', 'success', 'accent', 'warning', 'danger'];
+export var COLORS = ['default', 'hollow', 'primary', 'accent', 'neutral', 'success', 'warning', 'risk', 'danger'];
 export var EuiBadge = function EuiBadge(_ref) {
   var children = _ref.children,
     _ref$color = _ref.color,

package/es/components/badge/badge.styles.js

@@ -38,9 +38,11 @@ export var euiBadgeStyles = function euiBadgeStyles(euiThemeContext) {
     hollow: /*#__PURE__*/css(setBadgeColorVars(badgeColors.hollow), " border-color:", badgeColors.hollow.borderColor, ";;label:hollow;"),
     primary: /*#__PURE__*/css(setBadgeColorVars(badgeColors.primary), ";label:primary;"),
     accent: /*#__PURE__*/css(setBadgeColorVars(badgeColors.accent), ";label:accent;"),
+    neutral: /*#__PURE__*/css(setBadgeColorVars(badgeColors.neutral), ";label:neutral;"),
+    success: /*#__PURE__*/css(setBadgeColorVars(badgeColors.success), ";label:success;"),
     warning: /*#__PURE__*/css(setBadgeColorVars(badgeColors.warning), ";label:warning;"),
+    risk: /*#__PURE__*/css(setBadgeColorVars(badgeColors.risk), ";label:risk;"),
     danger: /*#__PURE__*/css(setBadgeColorVars(badgeColors.danger), ";label:danger;"),
-    success: /*#__PURE__*/css(setBadgeColorVars(badgeColors.success), ";label:success;"),
     disabled: /*#__PURE__*/css(setBadgeColorVars(badgeColors.disabled), " border-color:", badgeColors.disabled.borderColor, ";*::selection{color:", euiTheme.colors.emptyShade, ";};label:disabled;"),
     // Content wrapper
     euiBadge__content: /*#__PURE__*/css(logicalCSS(

package/es/components/badge/color_utils.js

@@ -29,8 +29,10 @@ export var euiBadgeColors = function euiBadgeColors(euiThemeContext) {
   return {
     // Colors shared between buttons and badges
     primary: euiButtonFillColor(euiThemeContext, 'primary'),
+    neutral: euiButtonFillColor(euiThemeContext, 'neutral'),
     success: euiButtonFillColor(euiThemeContext, 'success'),
     warning: euiButtonFillColor(euiThemeContext, 'warning'),
+    risk: euiButtonFillColor(euiThemeContext, 'risk'),
     danger: euiButtonFillColor(euiThemeContext, 'danger'),
     accent: euiButtonFillColor(euiThemeContext, 'accent'),
     accentSecondary: euiButtonFillColor(euiThemeContext, 'accentSecondary'),

package/es/components/datagrid/body/header/column_sorting.js

@@ -19,8 +19,7 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 export var useColumnSorting = function useColumnSorting(_ref) {
   var _sorting$columns;
   var sorting = _ref.sorting,
-    id = _ref.id,
-    hasColumnActions = _ref.hasColumnActions;
+    id = _ref.id;
   var sortedColumn = useMemo(function () {
     return sorting === null || sorting === void 0 ? void 0 : sorting.columns.find(function (col) {
       return col.id === id;
@@ -42,26 +41,28 @@ export var useColumnSorting = function useColumnSorting(_ref) {
   }, [id, isColumnSorted, sortedColumn]);
 
   /**
-   * aria-sort attribute - should only be used when a single column is being sorted
+   * `aria-sort` attribute - should only be used when a single column is being sorted
    * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-sort
    * @see https://www.w3.org/WAI/ARIA/apg/example-index/table/sortable-table.html
    * @see https://github.com/w3c/aria/issues/283 for potential future multi-column usage
    */
-  var ariaSort = isColumnSorted && hasOnlyOneSort ? sorting.columns[0].direction === 'asc' ? 'ascending' : 'descending' : undefined;
+  var hasAriaSortOnly = isColumnSorted && hasOnlyOneSort;
+  var ariaSort = hasAriaSortOnly ? sorting.columns[0].direction === 'asc' ? 'ascending' : 'descending' : undefined;
 
-  // aria-describedby ID for when aria-sort isn't sufficient
+  /**
+   * `aria-describedby` ID for when `aria-sort` cannot be used
+   */
   var sortingAriaId = useGeneratedHtmlId({
     prefix: 'euiDataGridCellHeader',
     suffix: 'sorting'
   });
 
   /**
-   * Sorting status - screen reader text
+   * Screen-reader-only sorting status, an alternative to `aria-sort` for multi-column sorting
    */
   var sortingScreenReaderText = useMemo(function () {
     var _sorting$columns2;
-    if (!isColumnSorted) return null;
-    if (!hasColumnActions && hasOnlyOneSort) return null; // in this scenario, the `aria-sort` attribute will be used by screen readers
+    if (!isColumnSorted || hasAriaSortOnly) return null;
     return ___EmotionJSX("p", {
       id: sortingAriaId,
       hidden: true
@@ -124,7 +125,7 @@ export var useColumnSorting = function useColumnSorting(_ref) {
         }
       }
     }), ".");
-  }, [isColumnSorted, hasColumnActions, hasOnlyOneSort, sorting, sortingAriaId]);
+  }, [isColumnSorted, hasAriaSortOnly, sortingAriaId, sorting === null || sorting === void 0 ? void 0 : sorting.columns, hasOnlyOneSort]);
   return {
     sortingArrow: sortingArrow,
     ariaSort: ariaSort,

package/es/components/datagrid/body/header/data_grid_header_cell.js

@@ -66,8 +66,7 @@ export var EuiDataGridHeaderCell = /*#__PURE__*/memo(function (_ref) {
   var actionsButtonRef = useRef(null);
   var _useColumnSorting = useColumnSorting({
       sorting: sorting,
-      id: id,
-      hasColumnActions: hasColumnActions
+      id: id
     }),
     sortingArrow = _useColumnSorting.sortingArrow,
     ariaSort = _useColumnSorting.ariaSort,

package/es/components/empty_prompt/empty_prompt.styles.js

@@ -117,8 +117,10 @@ export var euiEmptyPromptStyles = function euiEmptyPromptStyles(euiThemeContext)
       accent: /*#__PURE__*/css(logicalCSS('border-top', generateFooterBorder('accent')), ";;label:accent;"),
       accentSecondary: /*#__PURE__*/css(logicalCSS('border-top', generateFooterBorder('accentSecondary')), ";;label:accentSecondary;"),
       danger: /*#__PURE__*/css(logicalCSS('border-top', generateFooterBorder('danger')), ";;label:danger;"),
+      risk: /*#__PURE__*/css(logicalCSS('border-top', generateFooterBorder('risk')), ";;label:risk;"),
       warning: /*#__PURE__*/css(logicalCSS('border-top', generateFooterBorder('warning')), ";;label:warning;"),
-      success: /*#__PURE__*/css(logicalCSS('border-top', generateFooterBorder('success')), ";;label:success;")
+      success: /*#__PURE__*/css(logicalCSS('border-top', generateFooterBorder('success')), ";;label:success;"),
+      neutral: /*#__PURE__*/css(logicalCSS('border-top', generateFooterBorder('neutral')), ";;label:neutral;")
     }, generatePaddingStyles())
   };
 };

package/es/components/form/form_control_layout/form_control_layout_icons.styles.js

@@ -20,6 +20,8 @@ var _ref = process.env.NODE_ENV === "production" ? {
 };
 export var euiFormControlLayoutIconsStyles = function euiFormControlLayoutIconsStyles(euiThemeContext) {
   var _euiFormVariables = euiFormVariables(euiThemeContext),
+    controlHeight = _euiFormVariables.controlHeight,
+    controlCompressedHeight = _euiFormVariables.controlCompressedHeight,
     controlPadding = _euiFormVariables.controlPadding,
     controlCompressedPadding = _euiFormVariables.controlCompressedPadding,
     controlDisabledColor = _euiFormVariables.controlDisabledColor;
@@ -27,10 +29,10 @@ export var euiFormControlLayoutIconsStyles = function euiFormControlLayoutIconsS
     euiFormControlLayoutIcons: _ref,
     uncompressed: "\n      gap: ".concat(mathWithUnits(controlPadding, function (x) {
       return x / 2;
-    }), ";\n    "),
+    }), ";\n      max-block-size: ").concat(controlHeight, ";\n    "),
     compressed: /*#__PURE__*/css("gap:", mathWithUnits(controlCompressedPadding, function (x) {
       return x / 2;
-    }), ";;label:compressed;"),
+    }), ";max-block-size:", controlCompressedHeight, ";;label:compressed;"),
     disabled: /*#__PURE__*/css("cursor:not-allowed;color:", controlDisabledColor, ";;label:disabled;"),
     position: {
       absolute: {

package/es/components/icon/icon.styles.js

@@ -35,15 +35,17 @@ export var euiIconStyles = function euiIconStyles(_ref3) {
     // Base
     euiIcon: /*#__PURE__*/css("flex-shrink:0;display:inline-block;vertical-align:middle;fill:currentColor;transform:translate(0, 0);.euiIcon__fillNegative{fill:", euiTheme.colors.darkestShade, ";};label:euiIcon;"),
     // Colors
+    primary: /*#__PURE__*/css("color:", euiTheme.colors.textPrimary, ";;label:primary;"),
     accent: /*#__PURE__*/css("color:", euiTheme.colors.textAccent, ";;label:accent;"),
     accentSecondary: /*#__PURE__*/css("color:", euiTheme.colors.textAccentSecondary, ";;label:accentSecondary;"),
-    danger: /*#__PURE__*/css("color:", euiTheme.colors.textDanger, ";;label:danger;"),
     ghost: /*#__PURE__*/css("color:", euiTheme.colors.ghost, ";*[fill],.euiIcon__fillNegative{fill:currentColor!important;};label:ghost;"),
-    primary: /*#__PURE__*/css("color:", euiTheme.colors.textPrimary, ";;label:primary;"),
-    success: /*#__PURE__*/css("color:", euiTheme.colors.textSuccess, ";;label:success;"),
     subdued: /*#__PURE__*/css("color:", euiTheme.colors.textSubdued, ";;label:subdued;"),
     text: /*#__PURE__*/css("color:", euiTheme.colors.textHeading, ";*[fill],.euiIcon__fillNegative{fill:currentColor!important;};label:text;"),
+    neutral: /*#__PURE__*/css("color:", euiTheme.colors.textNeutral, ";;label:neutral;"),
+    success: /*#__PURE__*/css("color:", euiTheme.colors.textSuccess, ";;label:success;"),
     warning: /*#__PURE__*/css("color:", euiTheme.colors.textWarning, ";;label:warning;"),
+    risk: /*#__PURE__*/css("color:", euiTheme.colors.textRisk, ";;label:risk;"),
+    danger: /*#__PURE__*/css("color:", euiTheme.colors.textDanger, ";;label:danger;"),
     inherit: _ref2,
     default: /*#__PURE__*/css(";label:default;"),
     customColor: /*#__PURE__*/css(";label:customColor;"),

package/es/components/icon/named_colors.js

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-export var COLORS = ['default', 'primary', 'success', 'accent', 'accentSecondary', 'warning', 'danger', 'text', 'subdued', 'ghost', 'inherit'];
+export var COLORS = ['default', 'primary', 'neutral', 'success', 'accent', 'accentSecondary', 'warning', 'risk', 'danger', 'text', 'subdued', 'ghost', 'inherit'];
 export function isNamedColor(name) {
   return COLORS.includes(name);
 }

package/es/global_styling/mixins/_button.js

@@ -17,7 +17,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import { css, keyframes } from '@emotion/react';
 import { getTokenName, euiCanAnimate } from '@elastic/eui-theme-common';
 import { makeHighContrastColor, useEuiMemoizedStyles } from '../../services';
-export var BUTTON_COLORS = ['text', 'accent', 'accentSecondary', 'primary', 'success', 'warning', 'danger'];
+export var BUTTON_COLORS = ['text', 'accent', 'accentSecondary', 'primary', 'neutral', 'success', 'warning', 'risk', 'danger'];
 export var BUTTON_DISPLAYS = ['base', 'fill', 'empty'];
 /**
  * Creates the `base` version of button styles with proper text contrast.
@@ -48,7 +48,7 @@ export var euiButtonFillColor = function euiButtonFillColor(euiThemeContext, col
     highContrastMode = euiThemeContext.highContrastMode;
   var backgroundTokenName = getTokenName('backgroundFilled', color);
   var textColorTokenName = getTokenName('textColorFilled', color);
-  var highContrastForeground = color === 'warning' ? euiTheme.colors.ink : color === 'disabled' ? euiTheme.components.buttons[textColorTokenName] : euiTheme.colors.textInverse;
+  var highContrastForeground = ['warning', 'neutral', 'risk'].includes(color) ? euiTheme.colors.ink : color === 'disabled' ? euiTheme.components.buttons[textColorTokenName] : euiTheme.colors.textInverse;
   var foreground = highContrastMode ? highContrastForeground : euiTheme.components.buttons[textColorTokenName];
   var background = euiTheme.components.buttons[backgroundTokenName];
   return _objectSpread({

package/es/global_styling/mixins/_color.js

@@ -15,7 +15,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import { css } from '@emotion/react';
 import { useEuiMemoizedStyles } from '../../services';
 import { getTokenName } from '@elastic/eui-theme-common';
-export var BACKGROUND_COLORS = ['transparent', 'plain', 'subdued', 'highlighted', 'accent', 'accentSecondary', 'primary', 'success', 'warning', 'danger'];
+export var BACKGROUND_COLORS = ['transparent', 'plain', 'subdued', 'highlighted', 'accent', 'accentSecondary', 'primary', 'neutral', 'success', 'warning', 'risk', 'danger'];
 /**
  * @deprecated - use background tokens directly
  * @returns A single background color with optional alpha transparency