@elastic/eui 113.1.0 → 113.2.1

package/optimize/lib/components/table/utils.js

@@ -1,15 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.resolveWidthAsStyle = exports.WARNING_MESSAGE = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _excluded = ["width"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+exports.resolveWidthPropsAsStyle = exports.WARNING_MESSAGE_WIDTH = exports.WARNING_MESSAGE_MIN_WIDTH = exports.WARNING_MESSAGE_MAX_WIDTH = void 0;
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -18,21 +12,56 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * Side Public License, v 1.
  */
 
-var WARNING_MESSAGE = exports.WARNING_MESSAGE = 'Two `width` properties were provided. Provide only one of `style.width` or `width` to avoid conflicts.';
-var resolveWidthAsStyle = exports.resolveWidthAsStyle = function resolveWidthAsStyle() {
-  var style = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var width = arguments.length > 1 ? arguments[1] : undefined;
-  var styleWidth = style.width,
-    styleRest = (0, _objectWithoutProperties2.default)(style, _excluded);
-  var attrWidth = width;
-  if (attrWidth != null && (typeof attrWidth === 'number' || !isNaN(Number(attrWidth))) // transform {number} or unitless 'number' to px string
-  ) {
-    attrWidth = "".concat(attrWidth, "px");
+/**
+ * @internal
+ */
+var WARNING_MESSAGE_WIDTH = exports.WARNING_MESSAGE_WIDTH = 'Two `width` properties were provided. Provide only one of `style.width` or `width` to avoid conflicts.';
+
+/**
+ * @internal
+ */
+var WARNING_MESSAGE_MIN_WIDTH = exports.WARNING_MESSAGE_MIN_WIDTH = 'Two `minWidth` properties were provided. Provide only one of `style.minWidth` or `minWidth` to avoid conflicts.';
+
+/**
+ * @internal
+ */
+var WARNING_MESSAGE_MAX_WIDTH = exports.WARNING_MESSAGE_MAX_WIDTH = 'Two `maxWidth` properties were provided. Provide only one of `style.maxWidth` or `maxWidth` to avoid conflicts.';
+var normalizeValue = function normalizeValue(value) {
+  if (value === undefined || Number.isNaN(value)) {
+    return undefined;
+  }
+  if (typeof value === 'number') {
+    return "".concat(value, "px");
   }
-  if (styleWidth && attrWidth) {
-    console.warn(WARNING_MESSAGE);
+  return value;
+};
+
+/**
+ * @internal
+ */
+var resolveWidthPropsAsStyle = exports.resolveWidthPropsAsStyle = function resolveWidthPropsAsStyle() {
+  var style = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _ref = arguments.length > 1 ? arguments[1] : undefined,
+    rawWidth = _ref.width,
+    rawMinWidth = _ref.minWidth,
+    rawMaxWidth = _ref.maxWidth;
+  var width = normalizeValue(rawWidth);
+  var minWidth = normalizeValue(rawMinWidth);
+  var maxWidth = normalizeValue(rawMaxWidth);
+  if (process.env.NODE_ENV !== 'production') {
+    if (style.width && width !== undefined) {
+      console.warn(WARNING_MESSAGE_WIDTH);
+    }
+    if (style.minWidth && minWidth !== undefined) {
+      console.warn(WARNING_MESSAGE_MIN_WIDTH);
+    }
+    if (style.maxWidth && maxWidth !== undefined) {
+      console.warn(WARNING_MESSAGE_MAX_WIDTH);
+    }
   }
-  return _objectSpread(_objectSpread({}, styleRest), {}, {
-    width: attrWidth || styleWidth
-  });
+  return {
+    width: width || style.width,
+    minWidth: minWidth || style.minWidth,
+    maxWidth: maxWidth || style.maxWidth
+  };
 };

package/optimize/lib/components/tree_view/tree_view_item.js

@@ -60,7 +60,7 @@ var EuiTreeViewItem = exports.EuiTreeViewItem = /*#__PURE__*/(0, _react.memo)(fu
   }, rest), hasArrow && (!!children ? (0, _react2.jsx)(_icon.EuiIcon, {
     className: "euiTreeView__expansionArrow",
     size: display === 'compressed' ? 's' : 'm',
-    type: isExpanded ? 'arrowDown' : 'arrowRight'
+    type: isExpanded ? 'chevronSingleDown' : 'chevronSingleRight'
   }) : (0, _react2.jsx)("span", {
     css: iconStyles,
     className: "euiTreeView__arrowPlaceholder"

package/optimize/lib/global_styling/mixins/_button.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useEuiButtonFocusCSS = exports.useEuiButtonColorCSS = exports.highContrastHoverIndicatorStyles = exports.getEuiFilledButtonColors = exports.getEuiButtonColors = exports.euiButtonSizeMap = exports.euiButtonFillColor = exports.euiButtonEmptyColor = exports.euiButtonDisplaysColors = exports.euiButtonColor = exports.SEVERITY_COLORS = exports.EXTENDED_BUTTON_COLORS = exports.BUTTON_DISPLAYS = exports.BUTTON_COLORS = void 0;
+exports.useEuiButtonFocusCSS = exports.useEuiButtonColorCSS = exports.highContrastHoverIndicatorStyles = exports.getEuiFilledButtonColorValues = exports.getEuiButtonColorValues = exports.euiButtonSizeMap = exports.euiButtonInteractionStyles = exports.euiButtonFillColor = exports.euiButtonEmptyColor = exports.euiButtonDisplaysColors = exports.euiButtonColor = exports.SEVERITY_COLORS = exports.EXTENDED_BUTTON_COLORS = exports.BUTTON_DISPLAYS = exports.BUTTON_COLORS = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
@@ -44,14 +44,16 @@ var getButtonVariantTokenValues = function getButtonVariantTokenValues(_ref, col
     borderColor: highContrastMode ? foreground : color === 'text' ? euiTheme.colors.borderBasePlain : 'transparent'
   };
 };
-var getEuiButtonColors = exports.getEuiButtonColors = function getEuiButtonColors(euiThemeContext, color) {
+var getEuiButtonColorValues = exports.getEuiButtonColorValues = function getEuiButtonColorValues(euiThemeContext, color) {
   var buttonColors = getButtonVariantTokenValues(euiThemeContext, color, 'base');
   var foreground = buttonColors.color;
   var background = buttonColors.background;
   return {
     color: background === 'transparent' || color === 'disabled' ? foreground : (0, _services.makeHighContrastColor)(foreground)(background),
     backgroundColor: background,
-    borderColor: buttonColors.borderColor
+    borderColor: buttonColors.borderColor,
+    backgroundHover: buttonColors.backgroundHover,
+    backgroundActive: buttonColors.backgroundActive
   };
 };
 
@@ -62,20 +64,22 @@ var getEuiButtonColors = exports.getEuiButtonColors = function getEuiButtonColor
  * @returns Style object `{ backgroundColor, color }`
  */
 var euiButtonColor = exports.euiButtonColor = function euiButtonColor(euiThemeContext, color) {
-  var buttonColors = getEuiButtonColors(euiThemeContext, color);
+  var buttonColors = getEuiButtonColorValues(euiThemeContext, color);
   return _objectSpread({
     color: buttonColors.color,
     backgroundColor: buttonColors.backgroundColor
   }, _highContrastBorder(euiThemeContext, buttonColors.borderColor));
 };
-var getEuiFilledButtonColors = exports.getEuiFilledButtonColors = function getEuiFilledButtonColors(euiThemeContext, color) {
+var getEuiFilledButtonColorValues = exports.getEuiFilledButtonColorValues = function getEuiFilledButtonColorValues(euiThemeContext, color) {
   var buttonColors = getButtonVariantTokenValues(euiThemeContext, color, 'filled');
   var foreground = buttonColors.color;
   var background = buttonColors.background;
   return {
     color: foreground,
     backgroundColor: background,
-    borderColor: color === 'disabled' ? foreground : background
+    borderColor: color === 'disabled' ? foreground : background,
+    backgroundHover: buttonColors.backgroundHover,
+    backgroundActive: buttonColors.backgroundActive
   };
 };
 
@@ -86,7 +90,7 @@ var getEuiFilledButtonColors = exports.getEuiFilledButtonColors = function getEu
  * @returns Style object `{ backgroundColor, color }`
  */
 var euiButtonFillColor = exports.euiButtonFillColor = function euiButtonFillColor(euiThemeContext, color) {
-  var buttonColors = getEuiFilledButtonColors(euiThemeContext, color);
+  var buttonColors = getEuiFilledButtonColorValues(euiThemeContext, color);
   var foreground = buttonColors.color;
   var background = buttonColors.backgroundColor;
   return _objectSpread({
@@ -148,19 +152,19 @@ var euiButtonDisplaysColors = exports.euiButtonDisplaysColors = function euiButt
           {
             var buttonColors = getButtonVariantTokenValues(euiThemeContext, color, 'base');
             var borderStyle = color === 'text' && "\n              border: ".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.borderBasePlain, ";\n            ");
-            displaysColorsMap[display][color] = /*#__PURE__*/(0, _react.css)(euiButtonColor(euiThemeContext, color), " ", _interactionStyles(euiThemeContext, buttonColors, 'overlay'), " ", borderStyle, ";;label:displaysColorsMap-display-color;");
+            displaysColorsMap[display][color] = /*#__PURE__*/(0, _react.css)(euiButtonColor(euiThemeContext, color), " ", euiButtonInteractionStyles(euiThemeContext, buttonColors, 'overlay'), " ", borderStyle, ";;label:displaysColorsMap-display-color;");
             break;
           }
         case 'fill':
           {
             var _buttonColors = getButtonVariantTokenValues(euiThemeContext, color, 'filled');
-            displaysColorsMap[display][color] = /*#__PURE__*/(0, _react.css)(euiButtonFillColor(euiThemeContext, color), "outline-color:", euiThemeContext.colorMode === 'DARK' && color === 'text' ? 'currentColor' : color !== 'disabled' ? euiThemeContext.euiTheme.colors.fullShade : '', ";", _interactionStyles(euiThemeContext, _buttonColors), ";;label:displaysColorsMap-display-color;");
+            displaysColorsMap[display][color] = /*#__PURE__*/(0, _react.css)(euiButtonFillColor(euiThemeContext, color), "outline-color:", euiThemeContext.colorMode === 'DARK' && color === 'text' ? 'currentColor' : color !== 'disabled' ? euiThemeContext.euiTheme.colors.fullShade : '', ";", euiButtonInteractionStyles(euiThemeContext, _buttonColors), ";;label:displaysColorsMap-display-color;");
             break;
           }
         case 'empty':
           {
             var _buttonColors2 = getButtonVariantTokenValues(euiThemeContext, color, 'empty');
-            displaysColorsMap[display][color] = /*#__PURE__*/(0, _react.css)("color:", euiButtonEmptyColor(euiThemeContext, color).color, ";", _interactionStyles(euiThemeContext, _buttonColors2, 'overlay'), ";;label:displaysColorsMap-display-color;");
+            displaysColorsMap[display][color] = /*#__PURE__*/(0, _react.css)("color:", euiButtonEmptyColor(euiThemeContext, color).color, ";", euiButtonInteractionStyles(euiThemeContext, _buttonColors2, 'overlay'), ";;label:displaysColorsMap-display-color;");
             break;
           }
       }
@@ -228,7 +232,7 @@ var euiButtonSizeMap = exports.euiButtonSizeMap = function euiButtonSizeMap(euiT
 /**
  * internal styles util for applying button background color on hover
  */
-var _interactionStyles = function _interactionStyles(euiThemeContext, buttonColors) {
+var euiButtonInteractionStyles = exports.euiButtonInteractionStyles = function euiButtonInteractionStyles(euiThemeContext, buttonColors) {
   var type = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'fill';
   var baseStyles = function baseStyles() {
     // button hover is applied as pseudo element with a transparent background-color

package/optimize/lib/global_styling/mixins/_container_query.js

@@ -47,7 +47,7 @@ var euiContainer = exports.euiContainer = function euiContainer(type, name, scro
     }
     finalType += 'scroll-state';
   }
-  return [!!name && "container-name: ".concat(name), !!finalType && "container-type: ".concat(finalType)].filter(Boolean).join(';');
+  return [!!name && "container-name: ".concat(name, ";"), !!finalType && "container-type: ".concat(finalType, ";")].filter(Boolean).join('');
 };
 
 /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "113.1.0",
+  "version": "113.2.1",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",

package/test-env/components/accordion/accordion_trigger/accordion_arrow.js

@@ -38,7 +38,7 @@ var EuiAccordionArrow = exports.EuiAccordionArrow = function EuiAccordionArrow(_
   }, arrowProps, rest, {
     className: classes,
     css: cssStyles,
-    iconType: "arrowRight"
+    iconType: "chevronSingleRight"
   }));
 };
 EuiAccordionArrow.propTypes = {

package/test-env/components/badge/badge.js

@@ -60,7 +60,7 @@ var EuiBadge = exports.EuiBadge = function EuiBadge(_ref) {
   var isDisabled = _isDisabled || !isHrefValid;
   var isNamedColor = COLORS.includes(color);
   var isIconOnly = !children && !!iconType;
-  var euiTheme = (0, _services.useEuiTheme)();
+  var euiThemeContext = (0, _services.useEuiTheme)();
   var customColorStyles = (0, _react.useMemo)(function () {
     // Disabled badges should not have custom colors
     if (isDisabled) return style;
@@ -70,22 +70,28 @@ var EuiBadge = exports.EuiBadge = function EuiBadge(_ref) {
     // Do our best to ensure custom colors provide sufficient contrast
     try {
       // Set dark or light text color based upon best contrast
-      var textColor = (0, _color_utils.getTextColor)(euiTheme, color);
+      var textColor = (0, _color_utils.getTextColor)(euiThemeContext, color);
+      // These values are approximations as we don't know what custom color is passed
+      var customInteractiveColors = (0, _color_utils.getCustomInteractiveColors)(euiThemeContext, color);
 
       // Emit a warning if contrast is below WCAG threshold (centralized util)
       (0, _contrast.warnIfContrastBelowMin)(textColor, color, _contrast.wcagContrastMin);
       return _objectSpread({
         '--euiBadgeBackgroundColor': color,
-        '--euiBadgeTextColor': textColor
+        '--euiBadgeTextColor': textColor,
+        '--euiBadgeBackgroundHoverColor': customInteractiveColors.backgroundHover,
+        '--euiBadgeBackgroundActiveColor': customInteractiveColors.backgroundActive
       }, style);
     } catch (err) {
       if (!(0, _color_utils.getIsValidColor)(color)) {
         console.warn('EuiBadge expects a valid color. This can either be a three or six ' + "character hex value, rgb(a) value, hsv value, hollow, or one of the following: ".concat(COLORS, ". ") + "Instead got ".concat(color, "."));
       }
     }
-  }, [color, isNamedColor, isDisabled, style, euiTheme]);
+  }, [color, isNamedColor, isDisabled, style, euiThemeContext]);
   var styles = (0, _services.useEuiMemoizedStyles)(_badge.euiBadgeStyles);
-  var cssStyles = [styles.euiBadge, isIconOnly && styles.iconOnly].concat((0, _toConsumableArray2.default)(isDisabled ? [styles.disabled] : [isNamedColor && fill && styles.colors.fill[color], isNamedColor && !fill && styles.colors.base[color], !iconOnClick && (onClick || href) && styles.clickable]));
+  var clickableCssStyles = styles.clickable[isNamedColor ? color === 'hollow' ? 'hollow' : !fill ? 'base' : 'fill' : 'custom'];
+  var iconOnClickCssStyles = isNamedColor ? styles.iconClickable[color === 'hollow' ? 'hollow' : !fill ? 'base' : 'fill'] : styles.iconClickable.custom;
+  var cssStyles = [styles.euiBadge, isIconOnly && styles.iconOnly].concat((0, _toConsumableArray2.default)(isDisabled ? [styles.disabled] : [isNamedColor && fill && styles.colors.fill[color], isNamedColor && !fill && styles.colors.base[color], !iconOnClick && (onClick || href) && clickableCssStyles, iconOnClick && !(onClick || href) && iconOnClickCssStyles]));
   var textCssStyles = [styles.text.euiBadge__text, (onClick || href) && !isDisabled && styles.text.clickable];
   var iconCssStyles = [styles.icon.euiBadge__icon, styles.icon[iconSide]];
   var iconButtonCssStyles = [styles.iconButton.euiBadge__iconButton, styles.iconButton[iconSide]];

package/test-env/components/badge/badge.styles.js

@@ -34,9 +34,31 @@ var euiBadgeStyles = exports.euiBadgeStyles = function euiBadgeStyles(euiThemeCo
   var euiTheme = euiThemeContext.euiTheme;
   var badgeColors = (0, _color_utils.euiBadgeColors)(euiThemeContext);
   var defaultBadgeColors = badgeColors.fill.default;
+  var focusOutlineOffset = (0, _global_styling.mathWithUnits)([euiTheme.focus.width, euiTheme.border.width.thin], function (x, y) {
+    return x + y;
+  });
   var setBadgeColorVars = function setBadgeColorVars(colors) {
-    return "\n    --euiBadgeTextColor: ".concat(colors.color, ";\n    --euiBadgeBackgroundColor: ").concat(colors.backgroundColor, ";\n    ").concat(colors.border ? "--euiBadgeBorder: ".concat(colors.border, ";") : '', "\n  ");
+    return "\n    --euiBadgeTextColor: ".concat(colors.color, ";\n    --euiBadgeBackgroundColor: ").concat(colors.backgroundColor, ";\n    --euiBadgeBackgroundHoverColor: ").concat(colors.backgroundHover, ";\n    --euiBadgeBackgroundActiveColor: ").concat(colors.backgroundActive, ";\n    ").concat(colors.borderColor ? "--euiBadgeBorder: ".concat(euiTheme.border.width.thin, " solid ").concat(colors.borderColor, ";") : '', "\n  ");
+  };
+  var getButtonInteractionStyles = function getButtonInteractionStyles(euiThemeContext) {
+    var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'fill';
+    return "\n      ".concat((0, _global_styling.euiButtonInteractionStyles)(euiThemeContext, {
+      color: 'var(--euiBadgeTextColor)',
+      background: 'var(--euiBadgeBackgroundColor)',
+      borderColor: 'var(--euiBadgeBorder)',
+      backgroundHover: 'var(--euiBadgeBackgroundHoverColor)',
+      backgroundActive: 'var(--euiBadgeBackgroundActiveColor)'
+    }, type), "\n    ");
+  };
+  var highContrastStyles = (0, _global_styling.highContrastModeStyles)(euiThemeContext, {
+    preferred: "\n      text-decoration: underline;\n    ",
+    forced: "\n      &::after { display: none; }\n    "
+  });
+  var focusStyles = "\n    &:focus {\n      ".concat((0, _global_styling.euiFocusRing)(euiThemeContext, 'outset'), "\n      /* uses custom offset as the default \"outset\" is not enough */\n      outline-offset: ").concat(focusOutlineOffset, ";\n    }\n  ");
+  var getClickableStyles = function getClickableStyles(interactionStyles) {
+    return "\n    &:not(:disabled) {\n      ".concat(interactionStyles, "\n\n      &:hover,\n      &:focus {\n        ").concat(highContrastStyles, "\n      }\n\n      ").concat(focusStyles, "\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  ");
   };
+  var customInteractiveStyles = "\n    &:hover {\n      background-color: var(--euiBadgeBackgroundHoverColor);\n    }\n\n    &:active {\n      background-color: var(--euiBadgeBackgroundActiveColor);\n    }\n\n    ".concat(focusStyles, "\n  ");
   var inlinePadding = (0, _global_styling.mathWithUnits)(
   // Account for the (usually transparent) border so that the visual
   // padding is of size s
@@ -56,7 +78,36 @@ var euiBadgeStyles = exports.euiBadgeStyles = function euiBadgeStyles(euiThemeCo
     [euiTheme.size.xs, euiTheme.border.width.thin], function (size, borderWidth) {
       return size - borderWidth;
     }), ";;label:iconOnly;"),
-    clickable: /*#__PURE__*/(0, _react.css)("&:not(:disabled){&:hover,&:focus{text-decoration:underline;}}&:focus{", (0, _global_styling.euiFocusRing)(euiThemeContext), ";}&:disabled{cursor:not-allowed;};label:clickable;"),
+    get clickable() {
+      // ensures border colors are aligned with the background colors
+      var borderHoverStyles = "\n        &:hover { \n          border-color: var(--euiBadgeBackgroundHoverColor);\n        }\n        &:active {\n          border-color: var(--euiBadgeBackgroundActiveColor);\n        }\n      ";
+      return {
+        fill: /*#__PURE__*/(0, _react.css)(getClickableStyles(getButtonInteractionStyles(euiThemeContext, 'fill')), " ", borderHoverStyles, ";;label:fill;"),
+        base: /*#__PURE__*/(0, _react.css)(getClickableStyles(getButtonInteractionStyles(euiThemeContext, 'overlay')), " ", (0, _global_styling.highContrastModeStyles)(euiThemeContext, {
+          none: borderHoverStyles
+        }), ";;label:base;"),
+        // hollow has a visible border that must not be overwritten on hover
+        hollow: /*#__PURE__*/(0, _react.css)(getClickableStyles(getButtonInteractionStyles(euiThemeContext, 'overlay')), " &:hover,&:focus{", highContrastStyles, ";};label:hollow;"),
+        custom: /*#__PURE__*/(0, _react.css)("&:not(:disabled){", customInteractiveStyles, ";&:hover,&:focus{", highContrastStyles, ";}};label:custom;")
+      };
+    },
+    // on icon button hover, we apply hover styles on the entire badge
+    get iconClickable() {
+      var iconButtonSelector = function iconButtonSelector() {
+        var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ':hover';
+        return "&:not(:disabled):where(:has(.euiBadge__iconButton".concat(state, "))");
+      };
+      var borderHoverStyles = "\n        border-color: var(--euiBadgeBackgroundHoverColor);\n      ";
+      return {
+        fill: /*#__PURE__*/(0, _react.css)(iconButtonSelector(), "{", getButtonInteractionStyles(euiThemeContext, 'fill'), " ", borderHoverStyles, ";}", iconButtonSelector(':is(:hover, :focus)'), "{", highContrastStyles, ";};label:fill;"),
+        base: /*#__PURE__*/(0, _react.css)(iconButtonSelector(), "{", getButtonInteractionStyles(euiThemeContext, 'overlay'), " ", (0, _global_styling.highContrastModeStyles)(euiThemeContext, {
+          none: borderHoverStyles
+        }), ";}", iconButtonSelector(':is(:hover, :focus)'), "{", highContrastStyles, ";};label:base;"),
+        // hollow has a visible border that must not be overwritten on hover
+        hollow: /*#__PURE__*/(0, _react.css)(iconButtonSelector(), "{", getButtonInteractionStyles(euiThemeContext, 'overlay'), ";}", iconButtonSelector(':is(:hover, :focus)'), "{", highContrastStyles, ";};label:hollow;"),
+        custom: /*#__PURE__*/(0, _react.css)(iconButtonSelector(':is(:hover, :focus)'), "{", highContrastStyles, " ", customInteractiveStyles, ";};label:custom;")
+      };
+    },
     colors: {
       fill: {
         default: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.fill.default), " border-color:", badgeColors.fill.default.borderColor, ";;label:default;"),
@@ -81,7 +132,7 @@ var euiBadgeStyles = exports.euiBadgeStyles = function euiBadgeStyles(euiThemeCo
         danger: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.base.danger), ";label:danger;")
       }
     },
-    disabled: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.disabled), " border-color:", badgeColors.disabled.borderColor, ";*::selection{color:", euiTheme.colors.emptyShade, ";};label:disabled;"),
+    disabled: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.disabled), " border-color:", badgeColors.disabled.borderColor, ";*::selection{color:", euiTheme.colors.backgroundBasePlain, ";};label:disabled;"),
     // Content wrapper
     euiBadge__content: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)(
     // Ensure proper height in case of just displaying an icon

package/test-env/components/badge/color_utils.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getTextColor = exports.getIsValidColor = exports.getBadgeColors = exports.euiBadgeColors = void 0;
+exports.getTextColor = exports.getIsValidColor = exports.getCustomInteractiveColors = exports.getBadgeColors = exports.euiBadgeColors = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _chromaJs = _interopRequireDefault(require("chroma-js"));
@@ -25,38 +25,44 @@ var euiBadgeColors = exports.euiBadgeColors = function euiBadgeColors(euiThemeCo
   var badgeColorsAccentText = getBadgeColors(euiThemeContext, euiTheme.colors.textAccent);
   var fill = {
     // Colors shared between buttons and badges
-    primary: (0, _button.euiButtonFillColor)(euiThemeContext, 'primary'),
-    neutral: (0, _button.euiButtonFillColor)(euiThemeContext, 'neutral'),
-    success: (0, _button.euiButtonFillColor)(euiThemeContext, 'success'),
-    warning: (0, _button.euiButtonFillColor)(euiThemeContext, 'warning'),
-    risk: (0, _button.euiButtonFillColor)(euiThemeContext, 'risk'),
-    danger: (0, _button.euiButtonFillColor)(euiThemeContext, 'danger'),
-    accent: (0, _button.euiButtonFillColor)(euiThemeContext, 'accent'),
+    primary: (0, _button.getEuiFilledButtonColorValues)(euiThemeContext, 'primary'),
+    neutral: (0, _button.getEuiFilledButtonColorValues)(euiThemeContext, 'neutral'),
+    success: (0, _button.getEuiFilledButtonColorValues)(euiThemeContext, 'success'),
+    warning: (0, _button.getEuiFilledButtonColorValues)(euiThemeContext, 'warning'),
+    risk: (0, _button.getEuiFilledButtonColorValues)(euiThemeContext, 'risk'),
+    danger: (0, _button.getEuiFilledButtonColorValues)(euiThemeContext, 'danger'),
+    accent: (0, _button.getEuiFilledButtonColorValues)(euiThemeContext, 'accent'),
     // Colors unique to badges
     default: _objectSpread(_objectSpread({}, getBadgeColors(euiThemeContext, euiTheme.components.badgeBackground)), {}, {
-      borderColor: highContrastMode ? euiTheme.border.color : ''
+      backgroundHover: euiTheme.components.buttons.backgroundFilledTextHover,
+      backgroundActive: euiTheme.components.buttons.backgroundFilledTextActive,
+      borderColor: 'transparent'
     })
   };
   var base = {
-    primary: (0, _button.euiButtonColor)(euiThemeContext, 'primary'),
-    neutral: (0, _button.euiButtonColor)(euiThemeContext, 'neutral'),
-    success: (0, _button.euiButtonColor)(euiThemeContext, 'success'),
-    warning: (0, _button.euiButtonColor)(euiThemeContext, 'warning'),
-    risk: (0, _button.euiButtonColor)(euiThemeContext, 'risk'),
-    danger: (0, _button.euiButtonColor)(euiThemeContext, 'danger'),
-    accent: (0, _button.euiButtonColor)(euiThemeContext, 'accent'),
+    primary: (0, _button.getEuiButtonColorValues)(euiThemeContext, 'primary'),
+    neutral: (0, _button.getEuiButtonColorValues)(euiThemeContext, 'neutral'),
+    success: (0, _button.getEuiButtonColorValues)(euiThemeContext, 'success'),
+    warning: (0, _button.getEuiButtonColorValues)(euiThemeContext, 'warning'),
+    risk: (0, _button.getEuiButtonColorValues)(euiThemeContext, 'risk'),
+    danger: (0, _button.getEuiButtonColorValues)(euiThemeContext, 'danger'),
+    accent: (0, _button.getEuiButtonColorValues)(euiThemeContext, 'accent'),
     default: _objectSpread(_objectSpread({}, getBadgeColors(euiThemeContext, euiTheme.colors.backgroundLightText)), {}, {
+      backgroundHover: euiTheme.components.buttons.backgroundTextHover,
+      backgroundActive: euiTheme.components.buttons.backgroundTextActive,
       borderColor: highContrastMode ? euiTheme.border.color : ''
     })
   };
   return {
     fill: fill,
     base: base,
-    disabled: _objectSpread(_objectSpread({}, (0, _button.euiButtonColor)(euiThemeContext, 'disabled')), {}, {
+    disabled: _objectSpread(_objectSpread({}, (0, _button.getEuiButtonColorValues)(euiThemeContext, 'disabled')), {}, {
       borderColor: highContrastMode ? euiTheme.colors.textDisabled : ''
     }),
     // Hollow has a border and is used for autocompleters and beta badges
     hollow: _objectSpread(_objectSpread({}, getBadgeColors(euiThemeContext, euiTheme.colors.emptyShade)), {}, {
+      backgroundHover: euiTheme.components.buttons.backgroundTextHover,
+      backgroundActive: euiTheme.components.buttons.backgroundTextActive,
       borderColor: highContrastMode ? euiTheme.border.color : euiTheme.components.badgeBorderColorHollow
     }),
     // Colors used by beta and notification badges
@@ -80,6 +86,22 @@ var getTextColor = exports.getTextColor = function getTextColor(_ref, bgColor) {
   var textColor = _services.isColorDark.apply(void 0, (0, _toConsumableArray2.default)((0, _chromaJs.default)(bgColor).rgb())) ? euiTheme.colors.textGhost : euiTheme.colors.textInk;
   return textColor;
 };
+
+/**
+ * Generates the background hover and active colors for custom interactive badges by mixing
+ * the background color with black or white depending on the background color luminance.
+ * @returns { backgroundHover: string, backgroundActive: string }
+ */
+var getCustomInteractiveColors = exports.getCustomInteractiveColors = function getCustomInteractiveColors(_ref2, bgColor) {
+  var euiTheme = _ref2.euiTheme;
+  var isDarkColor = _services.isColorDark.apply(void 0, (0, _toConsumableArray2.default)((0, _chromaJs.default)(bgColor).rgb()));
+  var backgroundHover = isDarkColor ? "color-mix(in oklab, ".concat(bgColor, ", ").concat(euiTheme.colors.textGhost, " 10%)") : "color-mix(in oklab, ".concat(bgColor, ", ").concat(euiTheme.colors.textInk, " 10%)");
+  var backgroundActive = isDarkColor ? "color-mix(in oklab, ".concat(bgColor, ", ").concat(euiTheme.colors.textGhost, " 15%)") : "color-mix(in oklab, ".concat(bgColor, ", ").concat(euiTheme.colors.textInk, " 15%)");
+  return {
+    backgroundHover: backgroundHover,
+    backgroundActive: backgroundActive
+  };
+};
 var getIsValidColor = exports.getIsValidColor = function getIsValidColor(color) {
   return (0, _utils.chromaValid)((0, _utils.parseColor)(color || '') || '');
 };

package/test-env/components/basic_table/basic_table.a11y.js

@@ -159,7 +159,7 @@ describe('EuiTable', function () {
               return toggleDetails(user);
             },
             "aria-label": itemIdToExpandedRowMapValues[user.id] ? 'Collapse' : 'Expand',
-            iconType: itemIdToExpandedRowMapValues[user.id] ? 'arrowDown' : 'arrowRight'
+            iconType: itemIdToExpandedRowMapValues[user.id] ? 'chevronSingleDown' : 'chevronSingleRight'
           });
         }
       }]);