@elastic/eui 101.1.0 → 101.2.0

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

@@ -34,14 +34,14 @@ export var euiBadgeStyles = function euiBadgeStyles(euiThemeContext) {
     }), ";", logicalTextAlignCSS('left'), "color:var(--euiBadgeTextColor, ", badgeColors.default.color, ");background-color:var(\n        --euiBadgeBackgroundColor,\n        ", badgeColors.default.backgroundColor, "\n      );*::selection{color:var(\n          --euiBadgeBackgroundColor,\n          ", badgeColors.default.backgroundColor, "\n        );background-color:var(\n          --euiBadgeTextColor,\n          ", badgeColors.default.color, "\n        );}&:focus-within{", euiFocusRing(euiThemeContext), ";}&+.euiBadge{", logicalCSS('margin-left', euiTheme.size.xs), ";};label:euiBadge;"),
     clickable: /*#__PURE__*/css("&:not(:disabled){&:hover,&:focus{text-decoration:underline;}}&:focus{", euiFocusRing(euiThemeContext), ";}&:disabled{cursor:not-allowed;};label:clickable;"),
     // Colors
-    default: /*#__PURE__*/css(setBadgeColorVars(badgeColors.default), ";label:default;"),
+    default: /*#__PURE__*/css(setBadgeColorVars(badgeColors.default), " border-color:", badgeColors.default.borderColor, ";;label:default;"),
     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;"),
     warning: /*#__PURE__*/css(setBadgeColorVars(badgeColors.warning), ";label:warning;"),
     danger: /*#__PURE__*/css(setBadgeColorVars(badgeColors.danger), ";label:danger;"),
     success: /*#__PURE__*/css(setBadgeColorVars(badgeColors.success), ";label:success;"),
-    disabled: /*#__PURE__*/css(setBadgeColorVars(badgeColors.disabled), "*::selection{color:", euiTheme.colors.emptyShade, ";};label:disabled;"),
+    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(
     // Ensure proper height in case of just displaying an icon

package/es/components/badge/color_utils.js

@@ -23,7 +23,9 @@ 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;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
+  var badgeColorsAccentText = getBadgeColors(euiThemeContext, euiTheme.colors.textAccent);
   return {
     // Colors shared between buttons and badges
     primary: euiButtonFillColor(euiThemeContext, 'primary'),
@@ -32,16 +34,24 @@ export var euiBadgeColors = function euiBadgeColors(euiThemeContext) {
     danger: euiButtonFillColor(euiThemeContext, 'danger'),
     accent: euiButtonFillColor(euiThemeContext, 'accent'),
     accentSecondary: euiButtonFillColor(euiThemeContext, 'accentSecondary'),
-    disabled: euiButtonColor(euiThemeContext, 'disabled'),
+    disabled: _objectSpread(_objectSpread({}, euiButtonColor(euiThemeContext, 'disabled')), {}, {
+      borderColor: highContrastMode ? euiTheme.colors.textDisabled : ''
+    }),
     // Colors unique to badges
-    default: getBadgeColors(euiThemeContext, euiTheme.components.badgeBackground),
+    default: _objectSpread(_objectSpread({}, getBadgeColors(euiThemeContext, euiTheme.components.badgeBackground)), {}, {
+      borderColor: highContrastMode ? euiTheme.border.color : ''
+    }),
     // Hollow has a border and is used for autocompleters and beta badges
     hollow: _objectSpread(_objectSpread({}, getBadgeColors(euiThemeContext, euiTheme.colors.emptyShade)), {}, {
-      borderColor: euiTheme.components.badgeBorderColorHollow
+      borderColor: highContrastMode ? euiTheme.border.color : euiTheme.components.badgeBorderColorHollow
     }),
     // Colors used by beta and notification badges
-    subdued: getBadgeColors(euiThemeContext, euiTheme.components.badgeBackgroundSubdued),
-    accentText: getBadgeColors(euiThemeContext, euiTheme.colors.textAccent),
+    subdued: _objectSpread(_objectSpread({}, getBadgeColors(euiThemeContext, euiTheme.components.badgeBackgroundSubdued)), {}, {
+      borderColor: highContrastMode ? euiTheme.border.color : ''
+    }),
+    accentText: _objectSpread(_objectSpread({}, badgeColorsAccentText), {}, {
+      borderColor: highContrastMode ? badgeColorsAccentText.backgroundColor : ''
+    }),
     accentSecondaryText: getBadgeColors(euiThemeContext, euiTheme.colors.textAccentSecondary)
   };
 };

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

@@ -15,7 +15,7 @@ export var euiNotificationBadgeStyles = function euiNotificationBadgeStyles(euiT
   var badgeColors = euiBadgeColors(euiThemeContext);
   return {
     euiNotificationBadge: /*#__PURE__*/css("flex-shrink:0;display:inline-flex;justify-content:center;align-items:center;vertical-align:middle;", logicalCSS('padding-horizontal', euiTheme.size.xs), " border-radius:", euiTheme.border.radius.small, ";", highContrastModeStyles(euiThemeContext, {
-      forced: "\n          border: ".concat(euiTheme.border.thin, ";\n          overflow: hidden; /* Fix text clipping */\n        ")
+      preferred: "\n          border: ".concat(euiTheme.border.thin, ";\n          overflow: hidden; /* Fix text clipping */\n        ")
     }), " cursor:default;font-size:", euiFontSizeFromScale('xs', euiTheme), ";font-weight:", euiTheme.font.weight.medium, ";", euiNumberFormat(euiThemeContext), " text-align:center;", euiCanAnimate, "{transition:all ", euiTheme.animation.fast, " ease-in;};label:euiNotificationBadge;"),
     // Sizes
     s: /*#__PURE__*/css(logicalCSS('height', euiTheme.size.base), " ", logicalCSS('min-width', euiTheme.size.base), ";;label:s;"),

package/es/components/basic_table/basic_table.js

@@ -1121,6 +1121,15 @@ EuiBasicTable.propTypes = {
            * When nesting an `EuiTooltip` in a scrollable container, `repositionOnScroll` should be `true`
            */
         repositionOnScroll: PropTypes.bool,
+        /**
+           * Disables the tooltip content being read by screen readers when focusing the trigger element.
+           * Do not use when the trigger `aria-label` and tooltip `content` can be rephrased to be standalone
+           * information (action & additional information).
+           * Enable this prop only when the trigger has a descriptive label that either duplicates or includes
+           * the tooltip content and would result in repetitive output.
+           * @default false
+           */
+        disableScreenReaderOutput: PropTypes.bool,
         /**
            * If supplied, called when mouse movement causes the tool tip to be
            * hidden.
@@ -1236,6 +1245,7 @@ EuiBasicTable.propTypes = {
         title: PropTypes.node,
         id: PropTypes.string,
         repositionOnScroll: PropTypes.bool,
+        disableScreenReaderOutput: PropTypes.bool,
         onMouseOut: PropTypes.func,
         "aria-label": PropTypes.string,
         "data-test-subj": PropTypes.string,
@@ -1376,6 +1386,7 @@ EuiBasicTable.propTypes = {
         title: PropTypes.node,
         id: PropTypes.string,
         repositionOnScroll: PropTypes.bool,
+        disableScreenReaderOutput: PropTypes.bool,
         onMouseOut: PropTypes.func,
         "aria-label": PropTypes.string,
         "data-test-subj": PropTypes.string,

package/es/components/basic_table/in_memory_table.js

@@ -615,6 +615,15 @@ EuiInMemoryTable.propTypes = {
            * When nesting an `EuiTooltip` in a scrollable container, `repositionOnScroll` should be `true`
            */
         repositionOnScroll: PropTypes.bool,
+        /**
+           * Disables the tooltip content being read by screen readers when focusing the trigger element.
+           * Do not use when the trigger `aria-label` and tooltip `content` can be rephrased to be standalone
+           * information (action & additional information).
+           * Enable this prop only when the trigger has a descriptive label that either duplicates or includes
+           * the tooltip content and would result in repetitive output.
+           * @default false
+           */
+        disableScreenReaderOutput: PropTypes.bool,
         /**
            * If supplied, called when mouse movement causes the tool tip to be
            * hidden.
@@ -730,6 +739,7 @@ EuiInMemoryTable.propTypes = {
         title: PropTypes.node,
         id: PropTypes.string,
         repositionOnScroll: PropTypes.bool,
+        disableScreenReaderOutput: PropTypes.bool,
         onMouseOut: PropTypes.func,
         "aria-label": PropTypes.string,
         "data-test-subj": PropTypes.string,
@@ -870,6 +880,7 @@ EuiInMemoryTable.propTypes = {
         title: PropTypes.node,
         id: PropTypes.string,
         repositionOnScroll: PropTypes.bool,
+        disableScreenReaderOutput: PropTypes.bool,
         onMouseOut: PropTypes.func,
         "aria-label": PropTypes.string,
         "data-test-subj": PropTypes.string,

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

@@ -8,7 +8,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { logicalShorthandCSS } from '../../global_styling';
+import { highContrastModeStyles, logicalShorthandCSS } from '../../global_styling';
 import { euiCodeSyntaxVariables } from './code_syntax.styles';
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "gfiv3z-transparentBackground",
@@ -25,7 +25,9 @@ export var euiCodeStyles = function euiCodeStyles(euiThemeContext) {
     /*
      * 1. Size the code against the text its embedded within.
      */
-    euiCode: /*#__PURE__*/css("font-family:", euiTheme.font.familyCode, ";font-size:0.9em;", logicalShorthandCSS('padding', '0.2em 0.5em'), "background:", codeSyntaxVariables.backgroundColor, ";border-radius:", euiTheme.border.radius.small, ";font-weight:", euiTheme.font.weight.bold, ";color:", codeSyntaxVariables.inlineCodeColor, ";", codeSyntaxVariables.tokensCss, " .token.atrule .token.rule,.token.keyword{color:", codeSyntaxVariables.inlineCodeKeywordColor, ";};label:euiCode;"),
+    euiCode: /*#__PURE__*/css("font-family:", euiTheme.font.familyCode, ";font-size:0.9em;", logicalShorthandCSS('padding', '0.2em 0.5em'), "background-color:", codeSyntaxVariables.backgroundColor, ";", highContrastModeStyles(euiThemeContext, {
+      forced: "\n          border: ".concat(euiTheme.border.thin, ";\n        ")
+    }), " border-radius:", euiTheme.border.radius.small, ";font-weight:", euiTheme.font.weight.bold, ";color:", codeSyntaxVariables.inlineCodeColor, ";", codeSyntaxVariables.tokensCss, " .token.atrule .token.rule,.token.keyword{color:", codeSyntaxVariables.inlineCodeKeywordColor, ";};label:euiCode;"),
     transparentBackground: _ref
   };
 };

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

@@ -14,9 +14,12 @@ export var euiCodeTextColors = function euiCodeTextColors(_ref) {
   };
 };
 
-// These variables are computationally expensive - do not call them outside `useEuiMemoizedStyles`
+/**
+ * These variables are computationally expensive - do not call them outside `useEuiMemoizedStyles`
+ */
 export var euiCodeSyntaxVariables = function euiCodeSyntaxVariables(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   var _euiCodeTextColors = euiCodeTextColors(euiThemeContext),
     backgroundColor = _euiCodeTextColors.backgroundColor,
     color = _euiCodeTextColors.color;
@@ -46,7 +49,7 @@ export var euiCodeSyntaxVariables = function euiCodeSyntaxVariables(euiThemeCont
     selectorClassColor: euiTheme.components.codeSelectorClassColor,
     selectorIdColor: euiTheme.components.codeSelectorIdColor,
     get tokensCss() {
-      return "\n  .token.punctuation:not(.interpolation-punctuation):not([class*='attr-']) {\n    opacity: .7;\n  }\n\n  .token.comment,\n  .token.prolog,\n  .token.doctype,\n  .token.cdata,\n  .token.coord,\n  .token.blockquote {\n    color: ".concat(this.commentColor, ";\n    font-style: italic;\n  }\n\n  .token.selector {\n    color: ").concat(this.selectorTagColor, ";\n  }\n\n  .token.string,\n  .token.interpolation,\n  .token.interpolation-punctuation,\n  .token.doc-comment .token.keyword,\n  .token.attr-value,\n  .token.url .token.content {\n    color: ").concat(this.stringColor, ";\n  }\n\n  .token.number,\n  .token.boolean,\n  .token.keyword.nil,\n  .token.regex,\n  .token.variable,\n  .token.unit,\n  .token.hexcode,\n  .token.attr-name,\n  .token.attr-equals {\n    color: ").concat(this.numberColor, ";\n  }\n\n  .token.atrule .token.rule,\n  .token.keyword {\n    color: ").concat(this.keywordColor, ";\n  }\n\n  .token.function {\n    color: ").concat(this.functionTitleColor, ";\n  }\n\n  .token.tag {\n    color: ").concat(this.tagColor, ";\n  }\n\n  .token.class-name {\n    color: ").concat(this.typeColor, ";\n  }\n\n  .token.property {\n    color: ").concat(this.attributeColor, ";\n  }\n\n  .token.console,\n  .token.list-punctuation,\n  .token.url-reference,\n  .token.url .token.url {\n    color: ").concat(this.symbolColor, ";\n  }\n\n  .token.paramater {\n    color: ").concat(this.paramsColor, ";\n  }\n\n  .token.meta,\n  .token.important {\n    color: ").concat(this.metaColor, ";\n  }\n\n  .token.title {\n    color: ").concat(this.titleColor, ";\n  }\n\n  .token.section {\n    color: ").concat(this.sectionColor, ";\n  }\n\n  .token.prefix.inserted,\n  .token.prefix.deleted {\n    padding-inline-start: -").concat(euiTheme.size.xs, ";\n    margin-inline-start:  -").concat(euiTheme.size.xs, ";\n  }\n\n  .token.prefix.inserted {\n    box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(this.additionColor, ";\n    color: ").concat(this.additionColor, ";\n  }\n\n  .token.prefix.deleted {\n    box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(this.deletionColor, ";\n    color: ").concat(this.deletionColor, ";\n  }\n\n  .token.selector .token.class {\n    color: ").concat(this.selectorClassColor, ";\n  }\n\n  .token.selector .token.id {\n    color: ").concat(this.selectorIdColor, ";\n  }\n\n  .token.italic {\n    font-style: italic;\n  }\n\n  .token.important,\n  .token.bold {\n    font-weight: ").concat(euiTheme.font.weight.bold, ";\n  }\n\n  .token.url-reference,\n  .token.url .token.url {\n    text-decoration: underline;\n  }\n\n  .token.entity {\n    cursor: help;\n  }");
+      return "\n  .token.punctuation:not(.interpolation-punctuation):not([class*='attr-']) {\n    opacity: ".concat(highContrastMode ? '1' : '.7', ";\n  }\n\n  .token.comment,\n  .token.prolog,\n  .token.doctype,\n  .token.cdata,\n  .token.coord,\n  .token.blockquote {\n    color: ").concat(this.commentColor, ";\n    font-style: italic;\n  }\n\n  .token.selector {\n    color: ").concat(this.selectorTagColor, ";\n  }\n\n  .token.string,\n  .token.interpolation,\n  .token.interpolation-punctuation,\n  .token.doc-comment .token.keyword,\n  .token.attr-value,\n  .token.url .token.content {\n    color: ").concat(this.stringColor, ";\n  }\n\n  .token.number,\n  .token.boolean,\n  .token.keyword.nil,\n  .token.regex,\n  .token.variable,\n  .token.unit,\n  .token.hexcode,\n  .token.attr-name,\n  .token.attr-equals {\n    color: ").concat(this.numberColor, ";\n  }\n\n  .token.atrule .token.rule,\n  .token.keyword {\n    color: ").concat(this.keywordColor, ";\n  }\n\n  .token.function {\n    color: ").concat(this.functionTitleColor, ";\n  }\n\n  .token.tag {\n    color: ").concat(this.tagColor, ";\n  }\n\n  .token.class-name {\n    color: ").concat(this.typeColor, ";\n  }\n\n  .token.property {\n    color: ").concat(this.attributeColor, ";\n  }\n\n  .token.console,\n  .token.list-punctuation,\n  .token.url-reference,\n  .token.url .token.url {\n    color: ").concat(this.symbolColor, ";\n  }\n\n  .token.paramater {\n    color: ").concat(this.paramsColor, ";\n  }\n\n  .token.meta,\n  .token.important {\n    color: ").concat(this.metaColor, ";\n  }\n\n  .token.title {\n    color: ").concat(this.titleColor, ";\n  }\n\n  .token.section {\n    color: ").concat(this.sectionColor, ";\n  }\n\n  .token.prefix.inserted,\n  .token.prefix.deleted {\n    padding-inline-start: -").concat(euiTheme.size.xs, ";\n    margin-inline-start:  -").concat(euiTheme.size.xs, ";\n  }\n\n  .token.prefix.inserted {\n    box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(this.additionColor, ";\n    color: ").concat(this.additionColor, ";\n  }\n\n  .token.prefix.deleted {\n    box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(this.deletionColor, ";\n    color: ").concat(this.deletionColor, ";\n  }\n\n  .token.selector .token.class {\n    color: ").concat(this.selectorClassColor, ";\n  }\n\n  .token.selector .token.id {\n    color: ").concat(this.selectorIdColor, ";\n  }\n\n  .token.italic {\n    font-style: italic;\n  }\n\n  .token.important,\n  .token.bold {\n    font-weight: ").concat(euiTheme.font.weight.bold, ";\n  }\n\n  .token.url-reference,\n  .token.url .token.url {\n    text-decoration: underline;\n  }\n\n  .token.entity {\n    cursor: help;\n  }");
     }
   };
 };

package/es/components/color_picker/color_picker_swatch.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 = ["className", "color", "style"];
+var _excluded = ["className", "color", "style", "toolTipProps", "showToolTip"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 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) { _defineProperty(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; }
@@ -23,11 +23,16 @@ import { useEuiMemoizedStyles } from '../../services';
 import { useEuiI18n } from '../i18n';
 import { getChromaColor } from './utils';
 import { euiColorPickerSwatchStyles } from './color_picker_swatch.styles';
+import { EuiToolTip } from '../tool_tip';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiColorPickerSwatch = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _toolTipProps$anchorP;
   var className = _ref.className,
     color = _ref.color,
     style = _ref.style,
+    toolTipProps = _ref.toolTipProps,
+    _ref$showToolTip = _ref.showToolTip,
+    showToolTip = _ref$showToolTip === void 0 ? true : _ref$showToolTip,
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = classNames('euiColorPickerSwatch', className);
   var styles = useEuiMemoizedStyles(euiColorPickerSwatchStyles);
@@ -40,7 +45,7 @@ export var EuiColorPickerSwatch = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var ariaLabel = useEuiI18n('euiColorPickerSwatch.ariaLabel', 'Select {color} as the color', {
     color: color
   });
-  return ___EmotionJSX("button", _extends({
+  var element = ___EmotionJSX("button", _extends({
     type: "button",
     css: styles.euiColorPickerSwatch,
     className: classes,
@@ -50,12 +55,89 @@ export var EuiColorPickerSwatch = /*#__PURE__*/forwardRef(function (_ref, ref) {
       background: background
     }, style)
   }, rest));
+  return showToolTip ? ___EmotionJSX(EuiToolTip, _extends({
+    content: color
+  }, toolTipProps, {
+    anchorProps: _objectSpread(_objectSpread({}, toolTipProps === null || toolTipProps === void 0 ? void 0 : toolTipProps.anchorProps), {}, {
+      css: [toolTipProps === null || toolTipProps === void 0 || (_toolTipProps$anchorP = toolTipProps.anchorProps) === null || _toolTipProps$anchorP === void 0 ? void 0 : _toolTipProps$anchorP.css, styles.tooltip]
+    })
+    // since the button already has a descriptive `ariaLabel` we can disable
+    // the tooltip content from being read additionally by screen readers
+    ,
+    disableScreenReaderOutput: true
+  }), element) : element;
 });
 EuiColorPickerSwatch.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
   css: PropTypes.any,
-  color: PropTypes.string
+  color: PropTypes.string,
+  /**
+       * renders a tooltip with the color value to provide a visual text alternative
+       * @default true
+       */
+  showToolTip: PropTypes.bool,
+  /** Additional props for the EuiToolip when `showToolTip={true}` */toolTipProps: PropTypes.shape({
+    /**
+       * Passes onto the span wrapping the trigger.
+       */
+    anchorClassName: PropTypes.string,
+    /**
+       * Passes onto the span wrapping the trigger.
+       */
+    anchorProps: PropTypes.shape({
+      className: PropTypes.string,
+      "aria-label": PropTypes.string,
+      "data-test-subj": PropTypes.string,
+      css: PropTypes.any
+    }),
+    /**
+       * Passes onto the tooltip itself, not the trigger.
+       */
+    className: PropTypes.string,
+    /**
+       * The main content of your tooltip.
+       */
+    content: PropTypes.node,
+    /**
+       * Common display alternatives for the anchor wrapper
+       */
+    display: PropTypes.any,
+    /**
+       * An optional title for your tooltip.
+       */
+    title: PropTypes.node,
+    /**
+       * Unless you provide one, this will be randomly generated.
+       */
+    id: PropTypes.string,
+    /**
+       * When `true`, the tooltip's position is re-calculated when the user
+       * scrolls. This supports having fixed-position tooltip anchors.
+       *
+       * When nesting an `EuiTooltip` in a scrollable container, `repositionOnScroll` should be `true`
+       */
+    repositionOnScroll: PropTypes.bool,
+    /**
+       * Disables the tooltip content being read by screen readers when focusing the trigger element.
+       * Do not use when the trigger `aria-label` and tooltip `content` can be rephrased to be standalone
+       * information (action & additional information).
+       * Enable this prop only when the trigger has a descriptive label that either duplicates or includes
+       * the tooltip content and would result in repetitive output.
+       * @default false
+       */
+    disableScreenReaderOutput: PropTypes.bool,
+    /**
+       * If supplied, called when mouse movement causes the tool tip to be
+       * hidden.
+       */
+    onMouseOut: PropTypes.func,
+    "aria-label": PropTypes.string,
+    "data-test-subj": PropTypes.string,
+    css: PropTypes.any,
+    delay: PropTypes.any,
+    position: PropTypes.any
+  })
 };
 EuiColorPickerSwatch.displayName = 'EuiColorPickerSwatch';

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

@@ -1,3 +1,4 @@
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -10,6 +11,14 @@ import { css } from '@emotion/react';
 import { transparentize } from '../../services';
 import { logicalSizeCSS, mathWithUnits, euiOutline } from '../../global_styling';
 import { highContrastModeStyles, preventForcedColors } from '../../global_styling/functions/high_contrast';
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "164u3xw-tooltip",
+  styles: "display:inline-flex;label:tooltip;"
+} : {
+  name: "164u3xw-tooltip",
+  styles: "display:inline-flex;label:tooltip;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
 export var euiColorPickerSwatchStyles = function euiColorPickerSwatchStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
@@ -19,6 +28,7 @@ export var euiColorPickerSwatchStyles = function euiColorPickerSwatchStyles(euiT
       none: "\n          border: ".concat(euiTheme.border.width.thin, " solid\n            ").concat(euiTheme.colors.borderBaseFormsColorSwatch, ";\n          box-shadow: inset 0 0 0 ").concat(euiTheme.border.width.thin, "\n            ").concat(transparentize(euiTheme.colors.emptyShade, 0.05), ";\n        "),
       preferred: "border: ".concat(euiTheme.border.thin, ";"),
       forced: preventForcedColors(euiThemeContext)
-    }), " cursor:pointer;&:disabled{cursor:default;}&:focus{", euiOutline(euiThemeContext, 'center'), ";};label:euiColorPickerSwatch;")
+    }), " cursor:pointer;&:disabled{cursor:default;}&:focus{", euiOutline(euiThemeContext, 'center'), ";};label:euiColorPickerSwatch;"),
+    tooltip: _ref
   };
 };

package/es/components/header/header.styles.js

@@ -57,5 +57,8 @@ var euiHeaderDarkStyles = function euiHeaderDarkStyles(euiThemeContext) {
     borderColor: euiTheme.components.headerDarkSearchBorderColor,
     placeholderColor: makeHighContrastColor(controlPlaceholderText, 8)(backgroundColor)
   };
-  return "\n    background-color: ".concat(backgroundColor, ";\n\n    .euiHeaderLogo__text,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      color: ").concat(euiTheme.colors.ghost, ";\n    }\n\n    .euiHeaderLink-isActive {\n      color: ").concat(makeHighContrastColor(euiTheme.colors.primary)(backgroundColor), ";\n    }\n\n    .euiHeaderLogo,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      &:focus {\n        background-color: ").concat(euiTheme.components.headerDarkSectionItemBackgroundFocus, ";\n      }\n    }\n\n    .euiHeaderSectionItemButton__notification--badge {\n      box-shadow: 0 0 0 ").concat(euiTheme.border.width.thin, " ").concat(backgroundColor, ";\n    }\n\n    .euiHeaderSectionItemButton__notification--dot {\n      stroke: ").concat(backgroundColor, ";\n    }\n\n    .euiSelectableTemplateSitewide .euiFormControlLayout {\n      background-color: transparent;\n\n      input {\n        box-shadow: inset 0 0 0 ").concat(euiTheme.border.width.thin, " ").concat(selectableSitewide.borderColor, ";\n      }\n\n      &--group {\n        border-color: ").concat(highContrastMode ? euiTheme.border.color : euiTheme.components.headerDarkSearchBorderColor, ";\n\n        input {\n          box-shadow: none;\n        }\n      }\n\n      &:not(:focus-within) {\n        /* Increase contrast of filled text to be more than placeholder text */\n        color: ").concat(selectableSitewide.color, ";\n\n        input {\n          /* Increase contrast of placeholder text */\n          &::placeholder {\n            color: ").concat(selectableSitewide.placeholderColor, ";\n          }\n\n          /* Inherit color from form control layout */\n          color: inherit;\n          background-color: transparent;\n        }\n\n        .euiFormControlLayout__append,\n        .euiFormControlLayout__prepend {\n          background-color: transparent;\n        }\n\n        .euiFormLabel {\n          color: inherit;\n        }\n      }\n    }\n  ");
+  return "\n    background-color: ".concat(backgroundColor, ";\n\n    .euiHeaderLogo__text,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      color: ").concat(euiTheme.colors.ghost, ";\n    }\n\n    .euiHeaderLink-isActive {\n      color: ").concat(makeHighContrastColor(euiTheme.colors.primary)(backgroundColor), ";\n    }\n\n    .euiHeaderLogo,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      &:focus {\n        background-color: ").concat(euiTheme.components.headerDarkSectionItemBackgroundFocus, ";\n      }\n    }\n\n    .euiHeaderSectionItemButton__notification--badge {\n      box-shadow: 0 0 0 ").concat(euiTheme.border.width.thin, " ").concat(backgroundColor, ";\n    }\n\n    .euiHeaderSectionItemButton__notification--dot {\n      stroke: ").concat(backgroundColor, ";\n    }\n\n    .euiSelectableTemplateSitewide .euiFormControlLayout {\n      background-color: transparent;\n\n      input {\n        box-shadow: inset 0 0 0 ").concat(euiTheme.border.width.thin, " ").concat(selectableSitewide.borderColor, ";\n      }\n\n      &--group {\n        border-color: ").concat(
+  // the header is in a faux dark mode, we can't rely on color
+  // switch tokens as they'd be in the wrong color mode
+  highContrastMode ? euiTheme.colors.plainLight : euiTheme.components.headerDarkSearchBorderColor, ";\n\n        input {\n          box-shadow: none;\n        }\n      }\n\n      &__append {\n        border-color: ").concat(highContrastMode ? euiTheme.colors.plainLight : '', "\n      }\n\n      &:not(:focus-within) {\n        /* Increase contrast of filled text to be more than placeholder text */\n        color: ").concat(selectableSitewide.color, ";\n\n        input {\n          /* Increase contrast of placeholder text */\n          &::placeholder {\n            color: ").concat(selectableSitewide.placeholderColor, ";\n          }\n\n          /* Inherit color from form control layout */\n          color: inherit;\n          background-color: transparent;\n        }\n\n        .euiFormControlLayout__append,\n        .euiFormControlLayout__prepend {\n          background-color: transparent;\n        }\n\n        .euiFormLabel {\n          color: inherit;\n        }\n      }\n    }\n  ");
 };

package/es/components/panel/panel.styles.js

@@ -23,7 +23,7 @@ export var euiPanelBorderStyles = function euiPanelBorderStyles(euiThemeContext,
    euiTheme.colors.borderBaseFloating is enough then */
   var hasVisibleBorder = hasFloatingBorder && colorMode === 'DARK';
   return highContrastModeStyles(euiThemeContext, {
-    none: "\n      /* Using a pseudo element for the border instead of floating border only \n      because the transparent border might otherwise be visible with arbitrary \n      full-width/height content in light mode. */\n      &::before {\n        content: '';\n        position: absolute;\n        /* ensure to keep on top of flush content */\n        z-index: 1;\n        inset: 0;\n        border: ".concat(euiTheme.border.width.thin, " solid\n          ").concat((borderColor !== null && borderColor !== void 0 ? borderColor : hasVisibleBorder) ? euiTheme.border.color : euiTheme.colors.borderBaseFloating, ";\n        border-radius: inherit;\n        pointer-events: none;\n      }\n    "),
+    none: "\n      /* Using a pseudo element for the border instead of floating border only \n      because the transparent border might otherwise be visible with arbitrary \n      full-width/height content in light mode. */\n      &::after {\n        content: '';\n        position: absolute;\n        /* ensure to keep on top of flush content */\n        z-index: 0;\n        inset: 0;\n        border: ".concat(euiTheme.border.width.thin, " solid\n          ").concat((borderColor !== null && borderColor !== void 0 ? borderColor : hasVisibleBorder) ? euiTheme.border.color : euiTheme.colors.borderBaseFloating, ";\n        border-radius: inherit;\n        pointer-events: none;\n      }\n    "),
     preferred: "\n      border: ".concat(euiTheme.border.thin, ";\n    ")
   });
 };

package/es/components/table/table_header_cell.js

@@ -193,6 +193,15 @@ EuiTableHeaderCell.propTypes = {
          * When nesting an `EuiTooltip` in a scrollable container, `repositionOnScroll` should be `true`
          */
       repositionOnScroll: PropTypes.bool,
+      /**
+         * Disables the tooltip content being read by screen readers when focusing the trigger element.
+         * Do not use when the trigger `aria-label` and tooltip `content` can be rephrased to be standalone
+         * information (action & additional information).
+         * Enable this prop only when the trigger has a descriptive label that either duplicates or includes
+         * the tooltip content and would result in repetitive output.
+         * @default false
+         */
+      disableScreenReaderOutput: PropTypes.bool,
       /**
          * If supplied, called when mouse movement causes the tool tip to be
          * hidden.

package/es/components/toast/toast.styles.js

@@ -16,7 +16,7 @@ export var euiToastStyles = function euiToastStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
     highContrastMode = euiThemeContext.highContrastMode;
   var highlightStyles = function highlightStyles(color, width) {
-    return "\n    &:after {\n      content: '';\n      position: absolute;\n      /* ensure highlight border is on top of panel border */\n      z-index: 1;\n      inset: 0;\n      border-radius: inherit;\n      ".concat(logicalCSS('border-top', "".concat(width, " solid ").concat(color)), "\n      pointer-events: none;\n    }\n  ");
+    return "\n    &:before {\n      content: '';\n      position: absolute;\n      /* ensure highlight border is on top of panel border */\n      z-index: 1;\n      inset: 0;\n      border-radius: inherit;\n      ".concat(logicalCSS('border-top', "".concat(width, " solid ").concat(color)), "\n      pointer-events: none;\n    }\n  ");
   };
   return {
     // Base
@@ -36,11 +36,11 @@ export var euiToastStyles = function euiToastStyles(euiThemeContext) {
         }) : euiTheme.border.width.thick;
         return highContrastModeStyles(euiThemeContext, {
           none: highlightStyles(color, borderWidth),
-          preferred: "\n            ".concat(highlightStyles(color, borderWidth), "\n            \n            &::after {\n              ").concat(logicalCSS('width', "calc(100% + ".concat(mathWithUnits(euiTheme.border.width.thin, function (x) {
+          preferred: "\n            ".concat(highlightStyles(color, borderWidth), "\n            \n            &::before {\n              ").concat(logicalCSS('width', "calc(100% + ".concat(mathWithUnits(euiTheme.border.width.thin, function (x) {
             return x * 2;
           }), ")")), "\n              ").concat(logicalCSS('margin-top', "-".concat(euiTheme.border.width.thin)), "\n              ").concat(logicalCSS('margin-left', "-".concat(euiTheme.border.width.thin)), "\n            }\n          "),
           // Windows high contrast mode ignores/overrides border colors, which have semantic meaning here. To get around this, we'll use a pseudo element that ignores forced colors
-          forced: "\n            overflow: hidden;\n\n            &::after {\n              content: '';\n              position: absolute;\n              ".concat(logicalCSS('top', 0), "\n              ").concat(logicalCSS('horizontal', 0), "\n              ").concat(logicalCSS('height', borderWidth), "\n              background-color: ").concat(color, ";\n              ").concat(preventForcedColors(euiThemeContext), "\n              pointer-events: none;\n            }\n          ")
+          forced: "\n            overflow: hidden;\n\n            &::before {\n              content: '';\n              position: absolute;\n              ".concat(logicalCSS('top', 0), "\n              ").concat(logicalCSS('horizontal', 0), "\n              ").concat(logicalCSS('height', borderWidth), "\n              background-color: ").concat(color, ";\n              ").concat(preventForcedColors(euiThemeContext), "\n              pointer-events: none;\n            }\n          ")
         });
       },
       get primary() {

package/es/components/tool_tip/icon_tip.js

@@ -81,6 +81,15 @@ EuiIconTip.propTypes = {
      * When nesting an `EuiTooltip` in a scrollable container, `repositionOnScroll` should be `true`
      */
   repositionOnScroll: PropTypes.bool,
+  /**
+     * Disables the tooltip content being read by screen readers when focusing the trigger element.
+     * Do not use when the trigger `aria-label` and tooltip `content` can be rephrased to be standalone
+     * information (action & additional information).
+     * Enable this prop only when the trigger has a descriptive label that either duplicates or includes
+     * the tooltip content and would result in repetitive output.
+     * @default false
+     */
+  disableScreenReaderOutput: PropTypes.bool,
   /**
      * If supplied, called when mouse movement causes the tool tip to be
      * hidden.

package/es/components/tool_tip/tool_tip.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "className", "anchorClassName", "anchorProps", "content", "title", "delay", "display", "repositionOnScroll"];
+var _excluded = ["children", "className", "anchorClassName", "anchorProps", "content", "title", "delay", "display", "repositionOnScroll", "disableScreenReaderOutput"];
 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); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
@@ -245,6 +245,8 @@ export var EuiToolTip = /*#__PURE__*/function (_Component) {
         delay = _this$props.delay,
         display = _this$props.display,
         repositionOnScroll = _this$props.repositionOnScroll,
+        _this$props$disableSc = _this$props.disableScreenReaderOutput,
+        disableScreenReaderOutput = _this$props$disableSc === void 0 ? false : _this$props$disableSc,
         rest = _objectWithoutProperties(_this$props, _excluded);
       var _this$state = this.state,
         arrowStyles = _this$state.arrowStyles,
@@ -260,8 +262,10 @@ export var EuiToolTip = /*#__PURE__*/function (_Component) {
         onFocus: this.onFocus,
         onKeyDown: this.onEscapeKey,
         onMouseOver: this.showToolTip,
-        onMouseOut: this.onMouseOut,
-        id: id,
+        onMouseOut: this.onMouseOut
+        // `id` defines if the trigger and tooltip are automatically linked via `aria-describedby`.
+        ,
+        id: !disableScreenReaderOutput ? id : undefined,
         className: anchorClasses,
         display: display,
         isVisible: visible
@@ -291,7 +295,8 @@ export var EuiToolTip = /*#__PURE__*/function (_Component) {
 _defineProperty(EuiToolTip, "defaultProps", {
   position: 'top',
   delay: 'regular',
-  display: 'inlineBlock'
+  display: 'inlineBlock',
+  disableScreenReaderOutput: false
 });
 EuiToolTip.propTypes = {
   /**
@@ -346,6 +351,15 @@ EuiToolTip.propTypes = {
      * When nesting an `EuiTooltip` in a scrollable container, `repositionOnScroll` should be `true`
      */
   repositionOnScroll: PropTypes.bool,
+  /**
+     * Disables the tooltip content being read by screen readers when focusing the trigger element.
+     * Do not use when the trigger `aria-label` and tooltip `content` can be rephrased to be standalone
+     * information (action & additional information).
+     * Enable this prop only when the trigger has a descriptive label that either duplicates or includes
+     * the tooltip content and would result in repetitive output.
+     * @default false
+     */
+  disableScreenReaderOutput: PropTypes.bool,
   /**
      * If supplied, called when mouse movement causes the tool tip to be
      * hidden.

package/es/components/tool_tip/tool_tip_anchor.js

@@ -47,7 +47,7 @@ export var EuiToolTipAnchor = /*#__PURE__*/forwardRef(function (_ref, ref) {
         _onBlur();
         children.props.onBlur && children.props.onBlur(e);
       },
-      'aria-describedby': isVisible ? classNames(id, children.props['aria-describedby']) : children.props['aria-describedby']
+      'aria-describedby': isVisible && id ? classNames(id, children.props['aria-describedby']) : children.props['aria-describedby']
     }))
   );
 });

package/es/global_styling/mixins/_button.js

@@ -44,10 +44,11 @@ export var euiButtonColor = function euiButtonColor(euiThemeContext, color) {
  * @returns Style object `{ backgroundColor, color }`
  */
 export var euiButtonFillColor = function euiButtonFillColor(euiThemeContext, color) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   var backgroundTokenName = getTokenName('backgroundFilled', color);
   var textColorTokenName = getTokenName('textColorFilled', color);
-  var foreground = euiTheme.components.buttons[textColorTokenName];
+  var foreground = highContrastMode ? color === 'warning' ? euiTheme.colors.ink : euiTheme.colors.textInverse : euiTheme.components.buttons[textColorTokenName];
   var background = euiTheme.components.buttons[backgroundTokenName];
   return _objectSpread({
     color: foreground,

package/eui.d.ts

@@ -1547,6 +1547,9 @@ declare module '@elastic/eui/src/components/code/code_syntax.styles' {
 	    backgroundColor: string;
 	    color: string;
 	};
+	/**
+	 * These variables are computationally expensive - do not call them outside `useEuiMemoizedStyles`
+	 */
 	export const euiCodeSyntaxVariables: (euiThemeContext: UseEuiTheme) => {
 	    backgroundColor: string;
 	    color: string;
@@ -3386,6 +3389,15 @@ declare module '@elastic/eui/src/components/tool_tip/tool_tip' {
 	     * When nesting an `EuiTooltip` in a scrollable container, `repositionOnScroll` should be `true`
 	     */
 	    repositionOnScroll?: boolean;
+	    /**
+	     * Disables the tooltip content being read by screen readers when focusing the trigger element.
+	     * Do not use when the trigger `aria-label` and tooltip `content` can be rephrased to be standalone
+	     * information (action & additional information).
+	     * Enable this prop only when the trigger has a descriptive label that either duplicates or includes
+	     * the tooltip content and would result in repetitive output.
+	     * @default false
+	     */
+	    disableScreenReaderOutput?: boolean;
 	    /**
 	     * If supplied, called when mouse movement causes the tool tip to be
 	     * hidden.
@@ -8003,15 +8015,18 @@ declare module '@elastic/eui/src/components/badge/color_utils' {
 	        backgroundColor: string;
 	    };
 	    disabled: {
+	        borderColor: string;
 	        border: string;
 	        color: string;
 	        backgroundColor: string;
 	    } | {
+	        borderColor: string;
 	        border?: undefined;
 	        color: string;
 	        backgroundColor: string;
 	    };
 	    default: {
+	        borderColor: string;
 	        backgroundColor: string;
 	        color: string;
 	    };
@@ -8021,10 +8036,12 @@ declare module '@elastic/eui/src/components/badge/color_utils' {
 	        color: string;
 	    };
 	    subdued: {
+	        borderColor: string;
 	        backgroundColor: string;
 	        color: string;
 	    };
 	    accentText: {
+	        borderColor: string;
 	        backgroundColor: string;
 	        color: string;
 	    };
@@ -13271,17 +13288,39 @@ declare module '@elastic/eui/src/components/color_picker/color_picker_swatch.sty
 	import { UseEuiTheme } from '@elastic/eui/src/services';
 	export const euiColorPickerSwatchStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiColorPickerSwatch: import("@emotion/react").SerializedStyles;
+	    tooltip: import("@emotion/react").SerializedStyles;
 	};
 
 }
 declare module '@elastic/eui/src/components/color_picker/color_picker_swatch' {
 	import React, { ButtonHTMLAttributes } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
+	import { EuiToolTipProps } from '@elastic/eui/src/components/tool_tip';
 	export type EuiColorPickerSwatchProps = CommonProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'> & {
 	    color?: string;
+	    /**
+	     * renders a tooltip with the color value to provide a visual text alternative
+	     * @default true
+	     */
+	    showToolTip?: boolean;
+	    /** Additional props for the EuiToolip when `showToolTip={true}` */
+	    toolTipProps?: Omit<EuiToolTipProps, 'children' | 'delay' | 'position'> & {
+	        delay?: EuiToolTipProps['delay'];
+	        position?: EuiToolTipProps['position'];
+	    };
 	};
 	export const EuiColorPickerSwatch: React.ForwardRefExoticComponent<CommonProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "color"> & {
 	    color?: string | undefined;
+	    /**
+	     * renders a tooltip with the color value to provide a visual text alternative
+	     * @default true
+	     */
+	    showToolTip?: boolean | undefined;
+	    /** Additional props for the EuiToolip when `showToolTip={true}` */
+	    toolTipProps?: (Omit<EuiToolTipProps, "children" | "position" | "delay"> & {
+	        delay?: import ("@elastic/eui/src/components/tool_tip/tool_tip").ToolTipDelay | undefined;
+	        position?: import ("@elastic/eui/src/components/tool_tip").ToolTipPositions | undefined;
+	    }) | undefined;
 	} & React.RefAttributes<HTMLButtonElement>>;
 
 }