@elastic/eui 97.2.0 → 97.3.0-borealis.0

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', 'success', 'accent', 'accentSecondary', 'warning', 'danger'];
 export var EuiBadge = function EuiBadge(_ref) {
   var children = _ref.children,
     _ref$color = _ref.color,

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

@@ -9,7 +9,6 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css } from '@emotion/react';
 import { euiFontSize, euiFocusRing, euiTextTruncate, logicalCSS, logicalShorthandCSS, logicalTextAlignCSS, mathWithUnits } from '../../global_styling';
-import { transparentize } from '../../services';
 import { euiBadgeColors } from './color_utils';
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "1hw5vc4-clickable",
@@ -39,6 +38,7 @@ 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;"),
+    accentSecondary: /*#__PURE__*/css(setBadgeColorVars(badgeColors.accentSecondary), ";label:accentSecondary;"),
     warning: /*#__PURE__*/css(setBadgeColorVars(badgeColors.warning), ";label:warning;"),
     danger: /*#__PURE__*/css(setBadgeColorVars(badgeColors.danger), ";label:danger;"),
     success: /*#__PURE__*/css(setBadgeColorVars(badgeColors.success), ";label:success;"),
@@ -62,7 +62,7 @@ export var euiBadgeStyles = function euiBadgeStyles(euiThemeContext) {
     },
     // Clickable icons (iconOnClick)
     iconButton: {
-      euiBadge__iconButton: /*#__PURE__*/css("font-size:0;&:focus{background-color:", transparentize(euiTheme.colors.ghost, 0.8), ";color:", euiTheme.colors.ink, ";border-radius:", mathWithUnits(euiTheme.border.radius.small, function (x) {
+      euiBadge__iconButton: /*#__PURE__*/css("font-size:0;&:focus{background-color:", euiTheme.components.badgeIconButtonBackgroundHover, ";color:", euiTheme.colors.ink, ";border-radius:", mathWithUnits(euiTheme.border.radius.small, function (x) {
         return x / 2;
       }), ";}&:disabled{cursor:not-allowed;}.euiBadge__icon{margin:0!important;};label:euiBadge__iconButton;"),
       right: /*#__PURE__*/css(logicalCSS('margin-left', euiTheme.size.xs), ";;label:right;"),

package/es/components/badge/beta_badge/beta_badge.js

@@ -19,7 +19,7 @@ import { EuiToolTip } from '../../tool_tip';
 import { EuiIcon } from '../../icon';
 import { euiBetaBadgeStyles } from './beta_badge.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var COLORS = ['accent', 'subdued', 'hollow'];
+export var COLORS = ['accent', 'accentSecondary', 'subdued', 'hollow'];
 export var SIZES = ['s', 'm'];
 export var ALIGNMENTS = ['baseline', 'middle'];
 

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

@@ -44,6 +44,7 @@ export var euiBetaBadgeStyles = function euiBetaBadgeStyles(euiThemeContext) {
     }), ";};label:euiBetaBadge;"),
     // Colors
     accent: /*#__PURE__*/css(badgeColors.accentText, ";label:accent;"),
+    accentSecondary: /*#__PURE__*/css(badgeColors.accentSecondaryText, ";label:accentSecondary;"),
     subdued: /*#__PURE__*/css(badgeColors.subdued, ";label:subdued;"),
     hollow: /*#__PURE__*/css("color:", badgeColors.hollow.color, ";background-color:", badgeColors.hollow.backgroundColor, ";box-shadow:inset 0 0 0 ", euiTheme.border.width.thin, " ", badgeColors.hollow.borderColor, ";;label:hollow;"),
     // Font sizes

package/es/components/badge/color_utils.js

@@ -19,12 +19,11 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
  */
 
 import chroma from 'chroma-js';
-import { isColorDark, tint } from '../../services';
-import { euiButtonColor, euiButtonFillColor } from '../../themes/amsterdam/global_styling/mixins';
+import { isColorDark } from '../../services';
+import { euiButtonColor, euiButtonFillColor } from '../../global_styling/mixins/_button';
 import { chromaValid, parseColor } from '../color_picker/utils';
 export var euiBadgeColors = function euiBadgeColors(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme,
-    colorMode = euiThemeContext.colorMode;
+  var euiTheme = euiThemeContext.euiTheme;
   return {
     // Colors shared between buttons and badges
     primary: euiButtonFillColor(euiThemeContext, 'primary'),
@@ -32,16 +31,18 @@ export var euiBadgeColors = function euiBadgeColors(euiThemeContext) {
     warning: euiButtonFillColor(euiThemeContext, 'warning'),
     danger: euiButtonFillColor(euiThemeContext, 'danger'),
     accent: euiButtonFillColor(euiThemeContext, 'accent'),
+    accentSecondary: euiButtonFillColor(euiThemeContext, 'accentSecondary'),
     disabled: euiButtonColor(euiThemeContext, 'disabled'),
     // Colors unique to badges
     default: getBadgeColors(euiThemeContext, euiTheme.colors.lightShade),
     // Hollow has a border and is used for autocompleters and beta badges
     hollow: _objectSpread(_objectSpread({}, getBadgeColors(euiThemeContext, euiTheme.colors.emptyShade)), {}, {
-      borderColor: colorMode === 'DARK' ? tint(euiTheme.border.color, 0.15) : euiTheme.border.color
+      borderColor: euiTheme.components.badgeBorderColorHollow
     }),
     // Colors used by beta and notification badges
-    subdued: getBadgeColors(euiThemeContext, tint(euiTheme.colors.lightShade, 0.3)),
-    accentText: getBadgeColors(euiThemeContext, euiTheme.colors.accentText)
+    subdued: getBadgeColors(euiThemeContext, euiTheme.components.badgeBackgroundSubdued),
+    accentText: getBadgeColors(euiThemeContext, euiTheme.colors.textAccent),
+    accentSecondaryText: getBadgeColors(euiThemeContext, euiTheme.colors.textAccentSecondary)
   };
 };
 export var getBadgeColors = function getBadgeColors(euiThemeContext, backgroundColor) {

package/es/components/badge/notification_badge/badge_notification.js

@@ -16,7 +16,7 @@ import classNames from 'classnames';
 import { useEuiMemoizedStyles } from '../../../services';
 import { euiNotificationBadgeStyles } from './badge_notification.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var COLORS = ['accent', 'subdued', 'success'];
+export var COLORS = ['accent', 'accentSecondary', 'subdued', 'success'];
 export var SIZES = ['s', 'm'];
 export var EuiNotificationBadge = function EuiNotificationBadge(_ref) {
   var children = _ref.children,

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

@@ -23,6 +23,7 @@ export var euiNotificationBadgeStyles = function euiNotificationBadgeStyles(euiT
     })), " ", logicalCSS('min-width', euiTheme.size.l), ";;label:m;"),
     // Colors
     accent: /*#__PURE__*/css(badgeColors.accentText, ";label:accent;"),
+    accentSecondary: /*#__PURE__*/css(badgeColors.accentSecondaryText, ";label:accentSecondary;"),
     success: /*#__PURE__*/css(badgeColors.success, ";label:success;"),
     subdued: /*#__PURE__*/css(badgeColors.subdued, ";label:subdued;")
   };

package/es/components/bottom_bar/bottom_bar.styles.js

@@ -10,7 +10,6 @@ function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.fre
 
 import { css, keyframes } from '@emotion/react';
 import { euiCanAnimate } from '../../global_styling';
-import { shade } from '../../services';
 import { euiShadowFlat } from '../../themes/amsterdam/global_styling/mixins';
 var euiBottomBarAppear = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    transform: translateY(100%);\n    opacity: 0;\n  }\n\n  100% {\n    transform: translateY(0%);\n    opacity: 1;\n  }\n"])));
 export var euiBottomBarStyles = function euiBottomBarStyles(euiThemeContext) {
@@ -18,7 +17,7 @@ export var euiBottomBarStyles = function euiBottomBarStyles(euiThemeContext) {
   return {
     // Base
     // `color` is inherited from the wrapping `EuiThemeProvider colorMode="dark"`
-    euiBottomBar: /*#__PURE__*/css(euiShadowFlat(euiThemeContext), " background:", shade(euiTheme.colors.lightestShade, 0.5), ";", euiCanAnimate, "{animation:", euiBottomBarAppear, " ", euiTheme.animation.slow, " ", euiTheme.animation.resistance, ";};label:euiBottomBar;"),
+    euiBottomBar: /*#__PURE__*/css(euiShadowFlat(euiThemeContext), " background:", euiTheme.components.bottomBarBackground, ";", euiCanAnimate, "{animation:", euiBottomBarAppear, " ", euiTheme.animation.slow, " ", euiTheme.animation.resistance, ";};label:euiBottomBar;"),
     static: /*#__PURE__*/css(";label:static;"),
     // Default
     fixed: /*#__PURE__*/css("position:fixed;z-index:", Number(euiTheme.levels.header) - 2, ";;label:fixed;"),

package/es/components/breadcrumbs/_breadcrumb_content.styles.js

@@ -7,16 +7,14 @@
  */
 
 import { css } from '@emotion/react';
-import { tintOrShade } from '../../services/color';
 import { euiFontSize, euiTextTruncate, euiFocusRing, logicalCSS, logicalBorderRadiusCSS, mathWithUnits } from '../../global_styling';
-import { euiButtonColor } from '../../themes/amsterdam/global_styling/mixins/button';
+import { euiButtonColor } from '../../global_styling/mixins/_button';
 
 /**
  * Styles cast to inner <a>, <button>, <span> elements
  */
 export var euiBreadcrumbContentStyles = function euiBreadcrumbContentStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme,
-    colorMode = euiThemeContext.colorMode;
+  var euiTheme = euiThemeContext.euiTheme;
 
   // Reuse button colors for `type="application`" clickable breadcrumbs
   var applicationButtonColors = euiButtonColor(euiThemeContext, 'primary');
@@ -24,8 +22,8 @@ export var euiBreadcrumbContentStyles = function euiBreadcrumbContentStyles(euiT
   // Create custom darker gray colors for non-clickable application breadcrumbs
   // The numbers/ratios are fairly specific here to pass WCAG AA contrast minimums
   var applicationTextColors = {
-    backgroundColor: tintOrShade(euiTheme.colors.darkestShade, colorMode === 'DARK' ? 0.7 : 0.85, colorMode),
-    color: tintOrShade(euiTheme.colors.darkestShade, 0.2, colorMode)
+    backgroundColor: euiTheme.components.breadcrumbsApplicationBackground,
+    color: euiTheme.components.breadcrumbsApplicationColor
   };
   return {
     euiBreadcrumb__content: /*#__PURE__*/css("font-weight:", euiTheme.font.weight.regular, ";text-align:center;vertical-align:baseline;&:not(.euiLink){color:", euiTheme.colors.subduedText, ";};label:euiBreadcrumb__content;"),

package/es/components/button/button.js

@@ -13,7 +13,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { BUTTON_COLORS, useEuiButtonColorCSS, useEuiButtonFocusCSS } from '../../themes/amsterdam/global_styling/mixins/button';
+import { BUTTON_COLORS, useEuiButtonColorCSS, useEuiButtonFocusCSS } from '../../global_styling/mixins/_button';
 import { EuiButtonDisplay, isButtonDisabled } from './button_display/_button_display';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var COLORS = BUTTON_COLORS;

package/es/components/button/button_display/_button_display.styles.js

@@ -8,7 +8,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 import { css } from '@emotion/react';
 import { euiFontSize, logicalCSS, logicalShorthandCSS, logicalTextAlignCSS } from '../../../global_styling';
-import { euiButtonSizeMap } from '../../../themes/amsterdam/global_styling/mixins';
+import { euiButtonSizeMap } from '../../../global_styling/mixins';
 // Provides a solid reset and base for handling sizing layout
 // Does not include any visual styles
 export var euiButtonBaseCSS = function euiButtonBaseCSS() {

package/es/components/button/button_empty/button_empty.js

@@ -21,7 +21,7 @@ import PropTypes from "prop-types";
 import classNames from 'classnames';
 import { useEuiMemoizedStyles, getSecureRelForTarget } from '../../../services';
 import { EuiButtonDisplayContent } from '../button_display/_button_display_content';
-import { useEuiButtonColorCSS } from '../../../themes/amsterdam/global_styling/mixins/button';
+import { useEuiButtonColorCSS } from '../../../global_styling/mixins/_button';
 import { isButtonDisabled } from '../button_display/_button_display';
 import { euiButtonEmptyStyles } from './button_empty.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";

package/es/components/button/button_group/button_group_button.js

@@ -26,7 +26,7 @@ import classNames from 'classnames';
 import PropTypes from "prop-types";
 import React from 'react';
 import { useEuiMemoizedStyles } from '../../../services';
-import { useEuiButtonColorCSS } from '../../../themes/amsterdam/global_styling/mixins/button';
+import { useEuiButtonColorCSS } from '../../../global_styling/mixins/_button';
 import { useInnerText } from '../../inner_text';
 import { EuiButtonDisplay } from '../button_display/_button_display';
 import { euiButtonGroupButtonStyles, _compressedButtonFocusColors } from './button_group_button.styles';

package/es/components/button/button_group/button_group_button.styles.js

@@ -20,9 +20,9 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { makeDisabledContrastColor, transparentize } from '../../../services';
+import { makeDisabledContrastColor } from '../../../services';
 import { mathWithUnits, logicalCSS, logicalShorthandCSS, euiTextShift, euiOutline, euiCanAnimate } from '../../../global_styling';
-import { euiButtonFillColor, BUTTON_COLORS } from '../../../themes/amsterdam/global_styling/mixins/button';
+import { euiButtonFillColor, BUTTON_COLORS } from '../../../global_styling/mixins/_button';
 import { euiScreenReaderOnly } from '../../accessibility';
 import { euiFormVariables } from '../../form/form.styles';
 var _ref = process.env.NODE_ENV === "production" ? {
@@ -61,8 +61,8 @@ export var euiButtonGroupButtonStyles = function euiButtonGroupButtonStyles(euiT
       uncompressed: /*#__PURE__*/css("&:is(.euiButtonGroupButton-isSelected){font-weight:", euiTheme.font.weight.bold, ";}&:focus-visible{", euiOutline(euiThemeContext, 'inset', euiTheme.colors.fullShade), ";};label:uncompressed;"),
       get borders() {
         var selectors = '.euiButtonGroupButton-isSelected, .euiButtonGroup__tooltipWrapper-isSelected';
-        var selectedColor = transparentize(euiTheme.colors.emptyShade, 0.2);
-        var unselectedColor = transparentize(euiTheme.colors.fullShade, 0.1);
+        var selectedColor = euiTheme.components.buttonGroupBorderColorSelected;
+        var unselectedColor = euiTheme.components.buttonGroupBorderColor;
         var borderWidth = euiTheme.border.width.thin;
 
         // "Borders" between buttons should be present between two of the same colored buttons,

package/es/components/button/button_icon/button_icon.js

@@ -16,7 +16,7 @@ import classNames from 'classnames';
 import { getSecureRelForTarget, useEuiMemoizedStyles } from '../../../services';
 import { EuiIcon } from '../../icon';
 import { EuiLoadingSpinner } from '../../loading';
-import { useEuiButtonColorCSS, useEuiButtonFocusCSS } from '../../../themes/amsterdam/global_styling/mixins/button';
+import { useEuiButtonColorCSS, useEuiButtonFocusCSS } from '../../../global_styling/mixins/_button';
 import { isButtonDisabled } from '../button_display/_button_display';
 import { euiButtonIconStyles, _emptyHoverStyles } from './button_icon.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";

package/es/components/card/card.styles.js

@@ -9,7 +9,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css } from '@emotion/react';
 import { euiPaddingSize, euiSupportsHas, logicalCSS, logicals, logicalTextAlignCSS } from '../../global_styling';
-import { euiButtonColor } from '../../themes/amsterdam/global_styling/mixins';
+import { euiButtonColor } from '../../global_styling/mixins';
 var paddingKey = 'm';
 var halfPaddingKey = 's';
 

package/es/components/code/code_block_annotations.js

@@ -19,7 +19,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { useState } from 'react';
 import PropTypes from "prop-types";
 import { useEuiTheme, useEuiMemoizedStyles } from '../../services';
-import { useEuiButtonFocusCSS } from '../../themes/amsterdam/global_styling/mixins/button';
+import { useEuiButtonFocusCSS } from '../../global_styling/mixins/_button';
 import { useEuiI18n } from '../i18n';
 import { EuiPopover } from '../popover';
 import { EuiIcon } from '../icon';

package/es/components/code/code_block_line.styles.js

@@ -15,7 +15,6 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/css';
-import { euiBackgroundColor } from '../../global_styling';
 // Note: These styles must be in a separate file due to using `css` from `@emotion/css`
 // (i.e., applying styles in vanilla JS / directly to DOM nodes instead of React)
 
@@ -40,7 +39,7 @@ export var euiCodeBlockLineStyles = function euiCodeBlockLineStyles(euiThemeCont
     }),
     lineText: {
       euiCodeBlock__lineText: /*#__PURE__*/css("flex-grow:1;display:inline-block;padding-inline-start:", euiTheme.size.m, ";border-inline-start:", euiTheme.border.thin, ";user-select:text;;label:euiCodeBlock__lineText;"),
-      isHighlighted: /*#__PURE__*/css("background:", euiBackgroundColor(euiThemeContext, 'primary'), ";border-inline-start:", euiTheme.border.width.thick, " solid ", euiTheme.colors.primary, ";;label:isHighlighted;")
+      isHighlighted: /*#__PURE__*/css("background:", euiTheme.colors.backgroundBasePrimary, ";border-inline-start:", euiTheme.border.width.thick, " solid ", euiTheme.colors.primary, ";;label:isHighlighted;")
     },
     lineNumber: {
       euiCodeBlock__lineNumberWrapper: /*#__PURE__*/css("position:relative;flex-grow:0;flex-shrink:0;user-select:none;padding-inline-end:", euiTheme.size.m, ";box-sizing:content-box;;label:euiCodeBlock__lineNumberWrapper;"),

package/es/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.styles.js

@@ -7,17 +7,15 @@
  */
 
 import { css } from '@emotion/react';
-import { shade } from '../../../services';
 import { logicalCSS } from '../../../global_styling';
 export var euiCollapsibleNavGroupStyles = function euiCollapsibleNavGroupStyles(_ref) {
-  var euiTheme = _ref.euiTheme,
-    colorMode = _ref.colorMode;
+  var euiTheme = _ref.euiTheme;
   return {
     euiCollapsibleNavGroup: /*#__PURE__*/css("&:not(:first-child){", logicalCSS('border-top', euiTheme.border.thin), ";};label:euiCollapsibleNavGroup;"),
     // Background colors
     none: /*#__PURE__*/css(";label:none;"),
-    light: /*#__PURE__*/css("background-color:", euiTheme.colors.body, ";;label:light;"),
-    dark: /*#__PURE__*/css("background-color:", colorMode === 'DARK' ? shade(euiTheme.colors.lightestShade, 0.5) : shade(euiTheme.colors.darkestShade, 0.2), ";.euiCollapsibleNavGroup__title,.euiCollapsibleNavGroup__heading,.euiAccordion__arrow{color:", euiTheme.colors.ghost, ";};label:dark;"),
+    light: /*#__PURE__*/css("background-color:", euiTheme.components.collapsibleNavGroupBackground, ";;label:light;"),
+    dark: /*#__PURE__*/css("background-color:", euiTheme.components.collapsibleNavGroupBackgroundDark, ";.euiCollapsibleNavGroup__title,.euiCollapsibleNavGroup__heading,.euiAccordion__arrow{color:", euiTheme.colors.ghost, ";};label:dark;"),
     // Header padding
     isCollapsible: /*#__PURE__*/css(".euiAccordion__triggerWrapper{padding:", euiTheme.size.base, ";};label:isCollapsible;"),
     notCollapsible: /*#__PURE__*/css(".euiCollapsibleNavGroup__heading{padding:", euiTheme.size.base, ";};label:notCollapsible;"),

package/es/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.styles.js

@@ -15,7 +15,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css } from '@emotion/react';
 import { logicalCSS, mathWithUnits, euiFontSize } from '../../../global_styling';
-import { euiButtonColor } from '../../../themes/amsterdam/global_styling/mixins/button';
+import { euiButtonColor } from '../../../global_styling/mixins/_button';
 
 /**
  * Style variables shared between accordion, link, and sub items

package/es/components/color_picker/color_palette_display/color_palette_display.styles.js

@@ -7,13 +7,12 @@
  */
 
 import { css } from '@emotion/react';
-import { transparentize } from '../../../services';
 import { logicalCSS } from '../../../global_styling';
 export var euiColorPaletteDisplayStyles = function euiColorPaletteDisplayStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
 
   // Border is a pseudo element with transparency
-  var border = "".concat(euiTheme.border.width.thin, " solid ").concat(transparentize(euiTheme.colors.darkestShade, 0.2));
+  var border = "".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.borderBaseFormsColorSwatch);
   return {
     euiColorPaletteDisplay: /*#__PURE__*/css("position:relative;display:flex;flex-direction:row;overflow:hidden;&::after{content:'';position:absolute;inset:0;pointer-events:none;border:", border, ";border-radius:inherit;};label:euiColorPaletteDisplay;"),
     // Sizes

package/es/components/color_picker/color_picker.styles.js

@@ -7,7 +7,6 @@
  */
 
 import { css } from '@emotion/react';
-import { transparentize } from '../../services';
 import { logicalCSS, mathWithUnits } from '../../global_styling';
 export var euiColorPickerStyles = function euiColorPickerStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
@@ -22,6 +21,6 @@ export var euiColorPickerStyles = function euiColorPickerStyles(euiThemeContext)
     euiColorPicker__alphaRange: /*#__PURE__*/css(".euiRangeInput{", logicalCSS('min-width', 0), ";};label:euiColorPicker__alphaRange;"),
     // Adds a stroke color for the swatchInput icon. Unlike most EuiIcons it has a stroke in the SVG
     // Targets a custom className applied directly to the <svg> icon
-    euiColorPicker__swatchInputIcon: /*#__PURE__*/css(".euiSwatchInput__stroke{fill:none;stroke:", transparentize(euiTheme.colors.fullShade, 0.2), ";};label:euiColorPicker__swatchInputIcon;")
+    euiColorPicker__swatchInputIcon: /*#__PURE__*/css(".euiSwatchInput__stroke{fill:none;stroke:", euiTheme.colors.borderBaseFormsColorSwatch, ";};label:euiColorPicker__swatchInputIcon;")
   };
 };

package/es/components/color_picker/color_picker_swatch.styles.js

@@ -14,6 +14,6 @@ export var euiColorPickerSwatchStyles = function euiColorPickerSwatchStyles(euiT
   return {
     euiColorPickerSwatch: /*#__PURE__*/css("display:inline-block;", logicalSizeCSS(euiTheme.size.l), " border-radius:", mathWithUnits(euiTheme.border.radius.medium, function (x) {
       return x / 2;
-    }), ";border:", euiTheme.border.width.thin, " solid ", transparentize(euiTheme.colors.fullShade, 0.1), ";box-shadow:inset 0 0 0 ", euiTheme.border.width.thin, " ", transparentize(euiTheme.colors.emptyShade, 0.05), ";cursor:pointer;&:disabled{cursor:default;}&:focus{", euiOutline(euiThemeContext, 'center'), ";};label:euiColorPickerSwatch;")
+    }), ";border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.borderBaseFormsColorSwatch, ";box-shadow:inset 0 0 0 ", euiTheme.border.width.thin, " ", transparentize(euiTheme.colors.emptyShade, 0.05), ";cursor:pointer;&:disabled{cursor:default;}&:focus{", euiOutline(euiThemeContext, 'center'), ";};label:euiColorPickerSwatch;")
   };
 };

package/es/components/combo_box/combo_box.js

@@ -316,12 +316,15 @@ export var EuiComboBox = /*#__PURE__*/function (_Component) {
           }
           break;
         case keys.ENTER:
-          event.preventDefault();
-          event.stopPropagation();
-          if (_this.hasActiveOption()) {
-            _this.onAddOption(_this.state.matchingOptions[_this.state.activeOptionIndex]);
-          } else {
-            _this.setCustomOptions(false);
+          // Do not block enter keypresses for the clear button or delete selection buttons
+          if (event.target === _this.searchInputRefInstance) {
+            event.preventDefault();
+            event.stopPropagation();
+            if (_this.hasActiveOption()) {
+              _this.onAddOption(_this.state.matchingOptions[_this.state.activeOptionIndex]);
+            } else {
+              _this.setCustomOptions(false);
+            }
           }
           break;
         case keys.TAB:

package/es/components/common.js

@@ -28,12 +28,6 @@ export function keysOf(obj) {
   return Object.keys(obj);
 }
 
-/**
- * Like `keyof typeof`, but for getting values instead of keys
- * ValueOf<typeof {key1: 'value1', key2: 'value2'}>
- * Results in `'value1' | 'value2'`
- */
-
 // Returns the props of a given HTML element
 
 // Utility methods for ApplyClassComponentDefaults
@@ -126,26 +120,4 @@ React.FunctionComponent<ExclusiveUnion<Spanlike, Buttonlike>>
  * type ButtonLike = PropsForButton<BaseProps>
  * type ComponentProps = ExclusiveUnion<AnchorLike, ButtonLike>
  * const Component: FunctionComponent<ComponentProps> ...
- */
-
-/**
- * Replaces all properties on any type as optional, includes nested types
- *
- * @example
- * ```ts
- * interface Person {
- *  name: string;
- *  age?: number;
- *  spouse: Person;
- *  children: Person[];
- * }
- * type PartialPerson = RecursivePartial<Person>;
- * // results in
- * interface PartialPerson {
- *  name?: string;
- *  age?: number;
- *  spouse?: RecursivePartial<Person>;
- *  children?: RecursivePartial<Person>[]
- * }
- * ```
  */

package/es/components/context_menu/context_menu_panel.js

@@ -164,7 +164,7 @@ export var EuiContextMenuPanelClass = /*#__PURE__*/function (_Component) {
         items: _this.props.items
       },
       menuItems: [],
-      focusedItemIndex: props.onClose && props.initialFocusedItemIndex != null ? props.initialFocusedItemIndex + 1 // Account for panel title back button
+      focusedItemIndex: props.onClose && props.initialFocusedItemIndex != null && props.initialFocusedItemIndex !== -1 ? props.initialFocusedItemIndex + 1 // Account for panel title back button
       : props.initialFocusedItemIndex,
       currentHeight: undefined,
       waitingForInitialPopover: false,
@@ -207,6 +207,16 @@ export var EuiContextMenuPanelClass = /*#__PURE__*/function (_Component) {
           return;
         }
 
+        // `initialFocusedItemIndex={-1}` should only be used when preventing initial item focus is desired
+        if (_this2.state.focusedItemIndex === -1) {
+          // Resetting the focusedItemIndex to 0 allows keyboard up/down behavior to
+          // still work correctly later if the panel is manually tabbed into
+          return _this2.setState({
+            tookInitialFocus: true,
+            focusedItemIndex: 0
+          });
+        }
+
         // If an item should be focused, focus it (if it exists)
         if (_this2.state.focusedItemIndex != null && _this2.state.menuItems.length) {
           var focusedItem = _this2.state.menuItems[_this2.state.focusedItemIndex];
@@ -399,6 +409,12 @@ EuiContextMenuPanelClass.propTypes = {
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
   css: PropTypes.any,
+  /**
+       * Determines the initially focused menu item for keyboard and screen reader users.
+       *
+       * Can be set to `-1` to prevent autofocus (an uncommon case that must have
+       * keyboard accessibility accounted for manually if used)
+       */
   initialFocusedItemIndex: PropTypes.number,
   items: PropTypes.arrayOf(PropTypes.element.isRequired),
   onClose: PropTypes.func,

package/es/components/datagrid/body/cell/data_grid_cell.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["renderCellValue", "cellContext", "column", "setCellContentsRef", "rowIndex", "colIndex", "rowHeight", "rowHeightUtils", "isControlColumn"],
+var _excluded = ["renderCellValue", "cellContext", "column", "setCellContentsRef", "rowIndex", "colIndex", "rowHeightsOptions", "rowHeightUtils", "isControlColumn"],
   _excluded2 = ["width", "popoverContext", "interactiveCellId", "columnType", "className", "column", "style", "rowHeightUtils", "rowHeightsOptions", "rowManager", "pagination"],
   _excluded3 = ["isExpandable", "style", "className", "data-test-subj"],
   _excluded4 = ["columnId", "columnIndex", "rowIndex", "visibleRowIndex"];
@@ -58,15 +58,20 @@ var EuiDataGridCellContent = /*#__PURE__*/memo(function (_ref) {
     setCellContentsRef = _ref.setCellContentsRef,
     rowIndex = _ref.rowIndex,
     colIndex = _ref.colIndex,
-    rowHeight = _ref.rowHeight,
+    rowHeightsOptions = _ref.rowHeightsOptions,
     rowHeightUtils = _ref.rowHeightUtils,
     isControlColumn = _ref.isControlColumn,
     rest = _objectWithoutProperties(_ref, _excluded);
   // React is more permissive than the TS types indicate
   var CellElement = renderCellValue;
+
+  // Cell height type
+  var rowHeight = rowHeightUtils === null || rowHeightUtils === void 0 ? void 0 : rowHeightUtils.getRowHeightOption(rowIndex, rowHeightsOptions);
   var cellHeightType = useMemo(function () {
-    return (rowHeightUtils === null || rowHeightUtils === void 0 ? void 0 : rowHeightUtils.getHeightType(rowHeight)) || 'default';
-  }, [rowHeightUtils, rowHeight]);
+    return rowHeightUtils !== null && rowHeightUtils !== void 0 && rowHeightUtils.isAutoBelowLineCount(rowHeightsOptions, rowHeight) ? 'autoBelowLineCount' : (rowHeightUtils === null || rowHeightUtils === void 0 ? void 0 : rowHeightUtils.getHeightType(rowHeight)) || 'default';
+  }, [rowHeightUtils, rowHeight, rowHeightsOptions]);
+
+  // Classes and styles
   var classes = useMemo(function () {
     return classNames('euiDataGridRowCell__content', "euiDataGridRowCell__content--".concat(cellHeightType, "Height"), !isControlColumn && {
       'eui-textBreakWord': cellHeightType !== 'default',
@@ -77,9 +82,9 @@ var EuiDataGridCellContent = /*#__PURE__*/memo(function (_ref) {
   var cssStyles = [styles.content.euiDataGridRowCell__content].concat(_toConsumableArray(isControlColumn ? [styles.content.controlColumn, styles.content.autoHeight] : [
   // Regular data cells should always inherit height from the row wrapper,
   // except for auto height
-  cellHeightType === 'auto' ? styles.content.autoHeight : styles.content.defaultHeight]));
+  cellHeightType === 'auto' || cellHeightType === 'autoBelowLineCount' ? styles.content.autoHeight : styles.content.defaultHeight]));
   return ___EmotionJSX(RenderTruncatedCellContent, {
-    hasLineCountTruncation: cellHeightType === 'lineCount' && !isControlColumn,
+    hasLineCountTruncation: (cellHeightType === 'lineCount' || cellHeightType === 'autoBelowLineCount') && !isControlColumn,
     rowHeight: rowHeight
   }, ___EmotionJSX("div", {
     ref: setCellContentsRef,
@@ -512,6 +517,14 @@ EuiDataGridCellContent.propTypes = {
       lineCount: PropTypes.number,
       height: PropTypes.number
     }).isRequired]),
+    /**
+       * Feature flag for custom `lineCount` behavior, where `lineCount` acts like a
+       * *max* number of lines (instead of a set number of lines for all rows).
+       *
+       * This functionality is in beta and has performance implications;
+       * we do not yet fully recommend/support it for heavy production usage.
+       */
+    autoBelowLineCount: PropTypes.bool,
     /**
        * Defines the height for a specific row. It can be line count or just height.
        *
@@ -652,6 +665,9 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
         rowHeightsOptions = _this$props3.rowHeightsOptions,
         rowIndex = _this$props3.rowIndex;
       var rowHeightOption = rowHeightUtils === null || rowHeightUtils === void 0 ? void 0 : rowHeightUtils.getRowHeightOption(rowIndex, rowHeightsOptions);
+      if (rowHeightUtils !== null && rowHeightUtils !== void 0 && rowHeightUtils.isAutoBelowLineCount(rowHeightsOptions, rowHeightOption)) {
+        return; // Using auto height instead
+      }
       var isSingleLine = rowHeightOption == null; // Undefined rowHeightsOptions default to a single line
       var lineCount = isSingleLine ? 1 : rowHeightUtils === null || rowHeightUtils === void 0 ? void 0 : rowHeightUtils.getLineCount(rowHeightOption);
       if (lineCount) {
@@ -956,7 +972,6 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
         // column width, can be undefined
         lineHeight: (_rowHeightsOptions$li = rowHeightsOptions === null || rowHeightsOptions === void 0 ? void 0 : rowHeightsOptions.lineHeight) !== null && _rowHeightsOptions$li !== void 0 ? _rowHeightsOptions$li : undefined
       }, cellPropsStyle);
-      var rowHeight = rowHeightUtils === null || rowHeightUtils === void 0 ? void 0 : rowHeightUtils.getRowHeightOption(rowIndex, rowHeightsOptions);
       var row = rowManager && !IS_JEST_ENVIRONMENT ? rowManager.getRow({
         rowIndex: rowIndex,
         visibleRowIndex: visibleRowIndex,
@@ -988,7 +1003,7 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
         isExpandable: isExpandable,
         isExpanded: popoverIsOpen,
         setCellContentsRef: this.setCellContentsRef,
-        rowHeight: rowHeight,
+        rowHeightsOptions: rowHeightsOptions,
         rowHeightUtils: rowHeightUtils,
         isControlColumn: isControlColumn,
         rowIndex: rowIndex,
@@ -1373,6 +1388,14 @@ EuiDataGridCell.propTypes = {
       lineCount: PropTypes.number,
       height: PropTypes.number
     }).isRequired]),
+    /**
+       * Feature flag for custom `lineCount` behavior, where `lineCount` acts like a
+       * *max* number of lines (instead of a set number of lines for all rows).
+       *
+       * This functionality is in beta and has performance implications;
+       * we do not yet fully recommend/support it for heavy production usage.
+       */
+    autoBelowLineCount: PropTypes.bool,
     /**
        * Defines the height for a specific row. It can be line count or just height.
        *

package/es/components/datagrid/body/data_grid_body.js

@@ -573,6 +573,14 @@ EuiDataGridBody.propTypes = {
       lineCount: PropTypes.number,
       height: PropTypes.number
     }).isRequired]),
+    /**
+       * Feature flag for custom `lineCount` behavior, where `lineCount` acts like a
+       * *max* number of lines (instead of a set number of lines for all rows).
+       *
+       * This functionality is in beta and has performance implications;
+       * we do not yet fully recommend/support it for heavy production usage.
+       */
+    autoBelowLineCount: PropTypes.bool,
     /**
        * Defines the height for a specific row. It can be line count or just height.
        *

package/es/components/datagrid/body/data_grid_body_custom.js

@@ -83,7 +83,6 @@ export var EuiDataGridBodyCustomRender = /*#__PURE__*/memo(function (_ref) {
    */
   var rowHeightUtils = useRowHeightUtils({
     rowHeightsOptions: rowHeightsOptions,
-    gridStyles: gridStyles,
     columns: columns
   });
   var _useDefaultRowHeight = useDefaultRowHeight({
@@ -738,6 +737,14 @@ EuiDataGridBodyCustomRender.propTypes = {
       lineCount: PropTypes.number,
       height: PropTypes.number
     }).isRequired]),
+    /**
+       * Feature flag for custom `lineCount` behavior, where `lineCount` acts like a
+       * *max* number of lines (instead of a set number of lines for all rows).
+       *
+       * This functionality is in beta and has performance implications;
+       * we do not yet fully recommend/support it for heavy production usage.
+       */
+    autoBelowLineCount: PropTypes.bool,
     /**
        * Defines the height for a specific row. It can be line count or just height.
        *

package/es/components/datagrid/body/data_grid_body_virtualized.js

@@ -216,7 +216,6 @@ export var EuiDataGridBodyVirtualized = /*#__PURE__*/memo(function (_ref3) {
       gridItemsRenderedRef: gridItemsRendered
     },
     rowHeightsOptions: rowHeightsOptions,
-    gridStyles: gridStyles,
     columns: columns
   });
   var _useDefaultRowHeight = useDefaultRowHeight({
@@ -863,6 +862,14 @@ EuiDataGridBodyVirtualized.propTypes = {
       lineCount: PropTypes.number,
       height: PropTypes.number
     }).isRequired]),
+    /**
+       * Feature flag for custom `lineCount` behavior, where `lineCount` acts like a
+       * *max* number of lines (instead of a set number of lines for all rows).
+       *
+       * This functionality is in beta and has performance implications;
+       * we do not yet fully recommend/support it for heavy production usage.
+       */
+    autoBelowLineCount: PropTypes.bool,
     /**
        * Defines the height for a specific row. It can be line count or just height.
        *