@elastic/eui 105.0.0 → 106.0.0

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

@@ -11,11 +11,11 @@ import { css } from '@emotion/react';
 import { logicalCSS, mathWithUnits } from '../../../global_styling';
 import { euiFormVariables } from '../form.styles';
 var _ref = process.env.NODE_ENV === "production" ? {
-  name: "3lf9c4-euiFormControlLayoutIcons",
-  styles: "pointer-events:none;display:flex;align-items:center;label:euiFormControlLayoutIcons;"
+  name: "oaqulw-euiFormControlLayoutIcons",
+  styles: "position:relative;z-index:1;display:flex;align-items:center;pointer-events:none;label:euiFormControlLayoutIcons;"
 } : {
-  name: "3lf9c4-euiFormControlLayoutIcons",
-  styles: "pointer-events:none;display:flex;align-items:center;label:euiFormControlLayoutIcons;",
+  name: "oaqulw-euiFormControlLayoutIcons",
+  styles: "position:relative;z-index:1;display:flex;align-items:center;pointer-events:none;label:euiFormControlLayoutIcons;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 export var euiFormControlLayoutIconsStyles = function euiFormControlLayoutIconsStyles(euiThemeContext) {
@@ -38,11 +38,11 @@ export var euiFormControlLayoutIconsStyles = function euiFormControlLayoutIconsS
       absolute: {
         absolute: /*#__PURE__*/css("position:absolute;", logicalCSS('vertical', 0), ";;label:absolute;"),
         uncompressed: {
-          left: /*#__PURE__*/css("z-index:1;", logicalCSS('left', controlPadding), ";;label:left;"),
+          left: /*#__PURE__*/css("z-index:2;", logicalCSS('left', controlPadding), ";;label:left;"),
           right: /*#__PURE__*/css(logicalCSS('right', controlPadding), ";;label:right;")
         },
         compressed: {
-          left: /*#__PURE__*/css("z-index:1;", logicalCSS('left', controlCompressedPadding), ";;label:left;"),
+          left: /*#__PURE__*/css("z-index:2;", logicalCSS('left', controlCompressedPadding), ";;label:left;"),
           right: /*#__PURE__*/css(logicalCSS('right', controlCompressedPadding), ";;label:right;")
         }
       },

package/es/components/form/form_error_text/form_error_text.styles.js

@@ -7,10 +7,12 @@
  */
 
 import { css } from '@emotion/react';
+import { isEuiThemeRefreshVariant } from '../../../services';
 import { euiFontSize, logicalCSS } from '../../../global_styling';
 export var euiFormErrorTextStyles = function euiFormErrorTextStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
   return {
-    euiFormErrorText: /*#__PURE__*/css(logicalCSS('padding-top', euiTheme.size.xs), " ", euiFontSize(euiThemeContext, 'xs'), " color:", euiTheme.colors.danger, ";;label:euiFormErrorText;")
+    euiFormErrorText: /*#__PURE__*/css(logicalCSS('padding-top', euiTheme.size.xs), " ", euiFontSize(euiThemeContext, 'xs'), " color:", isRefreshVariant ? euiTheme.colors.textDanger : euiTheme.colors.danger, ";;label:euiFormErrorText;")
   };
 };

package/es/components/form/form_label/form_label.styles.js

@@ -11,6 +11,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 
 import { css } from '@emotion/react';
 import { serializeStyles } from '@emotion/serialize';
+import { isEuiThemeRefreshVariant } from '../../../services';
 import { euiCanAnimate, euiTextBreakWord } from '../../../global_styling';
 import { euiTitle } from '../../title/title.styles';
 export var euiFormLabel = function euiFormLabel(euiThemeContext) {
@@ -26,13 +27,14 @@ export var euiFormLabel = function euiFormLabel(euiThemeContext) {
 };
 export var euiFormLabelStyles = function euiFormLabelStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
   return {
     euiFormLabel: /*#__PURE__*/css(euiFormLabel(euiThemeContext), " display:inline-block;", euiCanAnimate, "{transition:color ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";};label:euiFormLabel;"),
     // Skip css`` to avoid generating an extra Emotion className
     // Use :where to reduce specificity & make the CSS easier to override by prepend/append nodes
     notDisabled: "\n      &:where([for]) {\n        cursor: pointer;\n      }\n    ",
-    invalid: /*#__PURE__*/css("color:", euiTheme.colors.danger, ";;label:invalid;"),
+    invalid: /*#__PURE__*/css("color:", isRefreshVariant ? euiTheme.colors.textDanger : euiTheme.colors.danger, ";;label:invalid;"),
     // Focused state should override invalid state
-    focused: /*#__PURE__*/css("color:", euiTheme.colors.primary, ";;label:focused;")
+    focused: /*#__PURE__*/css("color:", isRefreshVariant ? '' : euiTheme.colors.primary, ";;label:focused;")
   };
 };

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

@@ -9,7 +9,7 @@
 import { css } from '@emotion/react';
 import { euiShadowXSmall } from '@elastic/eui-theme-common';
 import { logicalCSS } from '../../global_styling';
-import { makeHighContrastColor } from '../../services';
+import { isEuiThemeRefreshVariant, makeHighContrastColor } from '../../services';
 export var euiHeaderVariables = function euiHeaderVariables(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
@@ -47,6 +47,7 @@ import { euiFormVariables } from '../form/form.styles';
 var euiHeaderDarkStyles = function euiHeaderDarkStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
     highContrastMode = euiThemeContext.highContrastMode;
+  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
   var _euiFormVariables = euiFormVariables(euiThemeContext),
     controlPlaceholderText = _euiFormVariables.controlPlaceholderText;
   var backgroundColor = euiTheme.components.headerDarkBackground;
@@ -57,8 +58,9 @@ 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(
+  var formLayoutStyles = "\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  ");
+  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  ");
+  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    ").concat(!isRefreshVariant && formLayoutStyles, " \n  ");
 };

package/es/components/markdown_editor/markdown_editor_drop_zone.styles.js

@@ -8,8 +8,10 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
+import { isEuiThemeRefreshVariant } from '../../services';
 import { logicalCSS } from '../../global_styling';
 import { euiMarkdownEditorVariables } from './markdown_editor.styles';
+import { euiFormControlInvalidStyles } from '../form/form.styles';
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "gwjnpv-euiMarkdownEditorDropZone__input",
   styles: "position:absolute;inset:0;opacity:0;overflow:hidden;&:hover{cursor:pointer;}&:hover:disabled{cursor:not-allowed;};label:euiMarkdownEditorDropZone__input;"
@@ -20,13 +22,14 @@ var _ref = process.env.NODE_ENV === "production" ? {
 };
 export var euiMarkdownEditorDropZoneStyles = function euiMarkdownEditorDropZoneStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
   var _euiMarkdownEditorVar = euiMarkdownEditorVariables(euiThemeContext),
     minHeight = _euiMarkdownEditorVar.minHeight;
   return {
     euiMarkdownEditorDropZone: /*#__PURE__*/css("position:relative;display:flex;flex-direction:column;", logicalCSS('min-height', minHeight), ";;label:euiMarkdownEditorDropZone;"),
-    isDragging: /*#__PURE__*/css(".euiMarkdownEditorFooter,.euiMarkdownEditorTextArea{background-color:", euiTheme.colors.backgroundTransparentPrimary, "!important;};label:isDragging;"),
-    isDraggingError: /*#__PURE__*/css(".euiMarkdownEditorFooter,.euiMarkdownEditorTextArea{background-color:", euiTheme.colors.backgroundTransparentDanger, "!important;};label:isDraggingError;"),
-    hasError: /*#__PURE__*/css(".euiMarkdownEditorTextArea{--euiFormControlStateColor:", euiTheme.colors.danger, "!important;background-size:100% 100%;};label:hasError;"),
+    isDragging: /*#__PURE__*/css(".euiMarkdownEditorFooter,.euiMarkdownEditorTextArea{background-color:", isRefreshVariant ? euiTheme.colors.backgroundBasePrimary : euiTheme.colors.backgroundTransparentPrimary, "!important;};label:isDragging;"),
+    isDraggingError: /*#__PURE__*/css(".euiMarkdownEditorFooter,.euiMarkdownEditorTextArea{background-color:", isRefreshVariant ? euiTheme.colors.backgroundBaseDanger : euiTheme.colors.backgroundTransparentDanger, "!important;};label:isDraggingError;"),
+    hasError: /*#__PURE__*/css(".euiMarkdownEditorTextArea{--euiFormControlStateColor:", euiTheme.colors.danger, ";background-size:100% 100%;", isRefreshVariant && euiFormControlInvalidStyles(euiThemeContext), ";};label:hasError;"),
     euiMarkdownEditorDropZone__input: _ref
   };
 };

package/es/components/progress/progress.a11y.js

@@ -72,13 +72,13 @@ describe('EuiProgress', function () {
       cy.checkAxe();
     });
     it('displays correct progress values and labels', function () {
-      cy.get('div[data-test-subj="cy-progress-1"] span.euiProgress__valueText').contains('0');
-      cy.get('div[data-test-subj="cy-progress-2"] span.euiProgress__valueText').contains('33');
-      cy.get('div[data-test-subj="cy-progress-3"] span.euiProgress__valueText').contains('66');
-      cy.get('div[data-test-subj="cy-progress-4"] span.euiProgress__valueText').contains('100');
-      cy.get('div[data-test-subj="cy-progress-5"] span.euiProgress__label').contains('Basic percentage');
-      cy.get('div[data-test-subj="cy-progress-5"] span.euiProgress__valueText').contains('100');
-      cy.get('div[data-test-subj="cy-progress-infinite"] span.euiProgress__valueText').should('not.exist');
+      cy.get('div[data-test-subj="cy-progress-1"] div.euiProgress__valueText').contains('0');
+      cy.get('div[data-test-subj="cy-progress-2"] div.euiProgress__valueText').contains('33');
+      cy.get('div[data-test-subj="cy-progress-3"] div.euiProgress__valueText').contains('66');
+      cy.get('div[data-test-subj="cy-progress-4"] div.euiProgress__valueText').contains('100');
+      cy.get('div[data-test-subj="cy-progress-5"] div.euiProgress__label').contains('Basic percentage');
+      cy.get('div[data-test-subj="cy-progress-5"] div.euiProgress__valueText').contains('100');
+      cy.get('div[data-test-subj="cy-progress-infinite"] div.euiProgress__valueText').should('not.exist');
     });
   });
 });

package/es/components/progress/progress.js

@@ -20,7 +20,6 @@ import React, { useState, useRef, useEffect } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
 import { EuiI18n } from '../i18n';
-import { EuiInnerText } from '../inner_text';
 import { isNil } from '../../services/predicate';
 import { useEuiTheme, makeHighContrastColor } from '../../services';
 import { EuiScreenReaderOnly } from '../accessibility';
@@ -99,34 +98,26 @@ export var EuiProgress = function EuiProgress(_ref) {
     return ___EmotionJSX(React.Fragment, null, label || valueText ? ___EmotionJSX("div", {
       css: dataCssStyles,
       className: "euiProgress__data"
-    }, label && ___EmotionJSX(EuiInnerText, null, function (_ref2, innerText) {
-      return ___EmotionJSX("span", _extends({
-        title: innerText,
-        ref: function ref(node) {
-          labelRef.current = node;
-          _ref2 === null || _ref2 === void 0 || _ref2(node);
-        }
-      }, labelProps, {
-        className: labelClasses,
-        css: labelCssStyles,
-        "aria-hidden": "true"
-      }), label);
-    }), valueRender && ___EmotionJSX(EuiInnerText, null, function (_ref3, innerText) {
-      return ___EmotionJSX("span", {
-        title: innerText,
-        ref: function ref(node) {
-          valueTextRef.current = node;
-          _ref3 === null || _ref3 === void 0 || _ref3(node);
-        },
-        style: customTextColorStyles,
-        css: valueTextCssStyles,
-        className: "euiProgress__valueText",
-        "aria-hidden": "true"
-      }, valueRender);
-    })) : undefined, ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("div", {
+    }, label && ___EmotionJSX("div", _extends({
+      ref: function ref(node) {
+        labelRef.current = node;
+      }
+    }, labelProps, {
+      className: labelClasses,
+      css: labelCssStyles,
+      "aria-hidden": "true"
+    }), label), valueRender && ___EmotionJSX("div", {
+      ref: function ref(node) {
+        valueTextRef.current = node;
+      },
+      style: customTextColorStyles,
+      css: valueTextCssStyles,
+      className: "euiProgress__valueText",
+      "aria-hidden": "true"
+    }, valueRender)) : undefined, ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("div", {
       "aria-live": "polite",
       "aria-atomic": "true"
-    }, ___EmotionJSX("span", null, label && "".concat(label, " "), valueRender || value))), ___EmotionJSX("progress", _extends({
+    }, ___EmotionJSX("span", null, label && ___EmotionJSX(React.Fragment, null, labelText, " "), valueRender || value))), ___EmotionJSX("progress", _extends({
       css: cssStyles,
       className: classes,
       style: customColorStyles,

package/es/components/selectable/selectable_templates/selectable_template_sitewide.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 = ["children", "className", "options", "popoverProps", "popoverTitle", "popoverFooter", "searchProps", "listProps", "isLoading", "popoverButton", "popoverButtonBreakpoints"],
+var _excluded = ["children", "className", "options", "popoverProps", "popoverTitle", "popoverFooter", "searchProps", "listProps", "isLoading", "popoverButton", "popoverButtonBreakpoints", "colorModes"],
   _excluded2 = ["closePopover", "panelRef", "width"];
 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; }
@@ -23,22 +23,21 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
  * Side Public License, v 1.
  */
 
-import React, { useState, useMemo, useCallback } from 'react';
+import React, { useState, useMemo, useCallback, useContext } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { useCombinedRefs, useCurrentEuiBreakpoint, useEuiMemoizedStyles } from '../../../services';
+import { COLOR_MODES_STANDARD, EuiNestedThemeContext, EuiThemeProvider, useCombinedRefs, useCurrentEuiBreakpoint, useEuiMemoizedStyles, useEuiTheme, useEuiThemeRefreshVariant } from '../../../services';
 import { ENTER } from '../../../services/keys';
 import { useEuiI18n, EuiI18n } from '../../i18n';
-import { EuiPopoverTitle, EuiPopoverFooter } from '../../popover';
-import { EuiPopover } from '../../popover/popover';
 import { EuiLoadingSpinner } from '../../loading';
-import { EuiSpacer } from '../../spacer';
 import { EuiSelectable } from '../selectable';
 import { EuiSelectableMessage } from '../selectable_message';
 import { euiSelectableTemplateSitewideFormatOptions, euiSelectableTemplateSitewideRenderOptions } from './selectable_template_sitewide_option';
 import { euiSelectableTemplateSitewideStyles } from './selectable_template_sitewide.styles';
+import { EuiSelectableTemplateSitewidePopover } from './selectable_template_sitewide_popover';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiSelectableTemplateSitewide = function EuiSelectableTemplateSitewide(_ref) {
+  var _colorModes$search, _colorModes$popover;
   var children = _ref.children,
     className = _ref.className,
     options = _ref.options,
@@ -50,7 +49,30 @@ export var EuiSelectableTemplateSitewide = function EuiSelectableTemplateSitewid
     isLoading = _ref.isLoading,
     popoverButton = _ref.popoverButton,
     popoverButtonBreakpoints = _ref.popoverButtonBreakpoints,
+    _ref$colorModes = _ref.colorModes,
+    colorModes = _ref$colorModes === void 0 ? {
+      search: 'default',
+      popover: 'default'
+    } : _ref$colorModes,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var _useEuiTheme = useEuiTheme(),
+    colorMode = _useEuiTheme.colorMode;
+  var isRefreshVariant = useEuiThemeRefreshVariant('formVariant');
+  var _useContext = useContext(EuiNestedThemeContext),
+    hasDifferentColorFromGlobalTheme = _useContext.hasDifferentColorFromGlobalTheme;
+  var _searchColorMode = colorModes === null || colorModes === void 0 || (_colorModes$search = colorModes.search) === null || _colorModes$search === void 0 ? void 0 : _colorModes$search.toLowerCase();
+  var _popoverColorMode = colorModes === null || colorModes === void 0 || (_colorModes$popover = colorModes.popover) === null || _colorModes$popover === void 0 ? void 0 : _colorModes$popover.toLowerCase();
+  var searchColorMode = useMemo(function () {
+    var isStaticTheme = [COLOR_MODES_STANDARD.light.toLowerCase(), COLOR_MODES_STANDARD.dark.toLowerCase()].includes(_searchColorMode);
+    return isStaticTheme ? _searchColorMode : _searchColorMode === 'inverse' ? colorMode === COLOR_MODES_STANDARD.dark ? COLOR_MODES_STANDARD.light : COLOR_MODES_STANDARD.dark : colorMode;
+  }, [colorMode, _searchColorMode]);
+  var popoverColorMode = useMemo(function () {
+    var isStaticTheme = [COLOR_MODES_STANDARD.light.toLowerCase(), COLOR_MODES_STANDARD.dark.toLowerCase()].includes(_popoverColorMode);
+    var inverseColorMode = colorMode === COLOR_MODES_STANDARD.dark ? COLOR_MODES_STANDARD.light : COLOR_MODES_STANDARD.dark;
+    var globalColorMode = hasDifferentColorFromGlobalTheme ? colorMode === COLOR_MODES_STANDARD.dark ? COLOR_MODES_STANDARD.light : COLOR_MODES_STANDARD.dark : colorMode;
+    return isStaticTheme ? _popoverColorMode : _popoverColorMode === 'inverse' ? inverseColorMode : _popoverColorMode === 'global' ? globalColorMode : colorMode;
+  }, [hasDifferentColorFromGlobalTheme, colorMode, _popoverColorMode]);
+
   /**
    * i18n text
    */
@@ -204,25 +226,28 @@ export var EuiSelectableTemplateSitewide = function EuiSelectableTemplateSitewid
   }, rest, {
     searchable: true
   }), function (list, search) {
-    return ___EmotionJSX(EuiPopover, _extends({
-      panelPaddingSize: "none",
+    var _search = isRefreshVariant && !popoverTrigger ? ___EmotionJSX(EuiThemeProvider, {
+      colorMode: searchColorMode
+    }, search) : search;
+
+    // uses standalone subcomponent to ensure scoped style/theme context
+    var popover = ___EmotionJSX(EuiSelectableTemplateSitewidePopover, _extends({
       isOpen: popoverIsOpen,
-      ownFocus: !!popoverTrigger,
-      display: popoverTrigger ? 'inline-block' : 'block'
-    }, popoverRest, {
+      trigger: popoverTrigger,
+      search: _search,
+      list: list,
+      title: popoverTitle,
+      footer: popoverFooter,
+      width: popoverWidth,
       panelRef: setPanelRef,
-      button: popoverTrigger ? popoverTrigger : search,
       closePopover: closePopover
-    }), ___EmotionJSX("div", {
-      style: {
-        width: popoverWidth,
-        maxWidth: '100%'
-      }
-    }, popoverTitle || popoverTrigger ? ___EmotionJSX(EuiPopoverTitle, {
-      paddingSize: "s"
-    }, popoverTitle, popoverTitle && search && ___EmotionJSX(EuiSpacer, null), search) : undefined, list, popoverFooter && ___EmotionJSX(EuiPopoverFooter, {
-      paddingSize: "s"
-    }, popoverFooter)));
+    }, popoverRest));
+    return isRefreshVariant ? ___EmotionJSX(EuiThemeProvider, {
+      wrapperProps: {
+        cloneElement: true
+      },
+      colorMode: popoverColorMode
+    }, popover) : popover;
   });
 };
 EuiSelectableTemplateSitewide.propTypes = {
@@ -441,5 +466,16 @@ EuiSelectableTemplateSitewide.propTypes = {
      * Pass an array of named breakpoints for which to show the `popoverButton`.
      * If `undefined`, the `popoverButton` will always show (if provided)
      */
-  popoverButtonBreakpoints: PropTypes.arrayOf(PropTypes.any.isRequired)
+  popoverButtonBreakpoints: PropTypes.arrayOf(PropTypes.any.isRequired),
+  /**
+     * Manually sets the color mode for the search input and popover. It supports the common `colorMode`
+     * values: `light`, `dark`, `inverse` and additionally `default` and `global`.
+     *
+     * `default` applies the local (nearest) context `colorMode`.
+     * `global` applies the global context `colorMode`
+     */
+  colorModes: PropTypes.shape({
+    search: PropTypes.oneOfType([PropTypes.oneOf(["default", "global"]), PropTypes.any.isRequired]).isRequired,
+    popover: PropTypes.oneOfType([PropTypes.oneOf(["default", "global"]), PropTypes.any.isRequired]).isRequired
+  })
 };

package/es/components/selectable/selectable_templates/selectable_template_sitewide.styles.js

@@ -33,8 +33,8 @@ export var euiSelectableTemplateSitewideStyles = function euiSelectableTemplateS
     euiSelectableTemplateSitewide: _ref2,
     // Override EuiSelectable's default item underline
     euiSelectableTemplateSitewide__listItem: _ref,
-    euiSelectableTemplateSitewide__optionMetasList: /*#__PURE__*/css("display:block;", logicalCSS('margin-top', euiTheme.size.xs), " ", euiFontSize(euiThemeContext, 'xs'), " color:", euiTheme.colors.subduedText, ";;label:euiSelectableTemplateSitewide__optionMetasList;"),
-    euiSelectableTemplateSitewide__optionMeta: /*#__PURE__*/css("&:not(:last-of-type)::after{content:'\u2022';", logicalCSS('margin-horizontal', euiTheme.size.xs), " color:", euiTheme.colors.subduedText, ";};label:euiSelectableTemplateSitewide__optionMeta;"),
+    euiSelectableTemplateSitewide__optionMetasList: /*#__PURE__*/css("display:block;", logicalCSS('margin-top', euiTheme.size.xs), " ", euiFontSize(euiThemeContext, 'xs'), " color:", euiTheme.colors.textSubdued, ";;label:euiSelectableTemplateSitewide__optionMetasList;"),
+    euiSelectableTemplateSitewide__optionMeta: /*#__PURE__*/css("&:not(:last-of-type)::after{content:'\u2022';", logicalCSS('margin-horizontal', euiTheme.size.xs), " color:", euiTheme.colors.textSubdued, ";};label:euiSelectableTemplateSitewide__optionMeta;"),
     metaTypes: {
       fontWeight: "\n        font-weight: ".concat(euiTheme.font.weight.medium, ";\n      "),
       application: /*#__PURE__*/css("color:", makeHighContrastColor(visColors[1])(euiTheme), ";;label:application;"),
@@ -44,4 +44,10 @@ export var euiSelectableTemplateSitewideStyles = function euiSelectableTemplateS
       platform: /*#__PURE__*/css("color:", makeHighContrastColor(visColors[5])(euiTheme), ";;label:platform;")
     }
   };
+};
+export var euiSelectableTemplateSitewidePopoverStyles = function euiSelectableTemplateSitewidePopoverStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiSelectableTemplateSitewide__popover: /*#__PURE__*/css("color:", euiTheme.colors.textParagraph, ";;label:euiSelectableTemplateSitewide__popover;")
+  };
 };

package/es/components/selectable/selectable_templates/selectable_template_sitewide_popover.js

@@ -0,0 +1,63 @@
+var _excluded = ["trigger", "search", "list", "title", "footer", "width", "isOpen", "panelRef", "closePopover"];
+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; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import PropTypes from "prop-types";
+import { useEuiMemoizedStyles } from '../../../services';
+import { EuiPopover, EuiPopoverFooter, EuiPopoverTitle } from '../../popover';
+import { EuiSpacer } from '../../spacer';
+import { euiSelectableTemplateSitewidePopoverStyles } from './selectable_template_sitewide.styles';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var EuiSelectableTemplateSitewidePopover = function EuiSelectableTemplateSitewidePopover(_ref) {
+  var trigger = _ref.trigger,
+    search = _ref.search,
+    list = _ref.list,
+    title = _ref.title,
+    footer = _ref.footer,
+    width = _ref.width,
+    isOpen = _ref.isOpen,
+    panelRef = _ref.panelRef,
+    closePopover = _ref.closePopover,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var styles = useEuiMemoizedStyles(euiSelectableTemplateSitewidePopoverStyles);
+  return ___EmotionJSX(EuiPopover, _extends({
+    panelPaddingSize: "none",
+    isOpen: isOpen,
+    ownFocus: !!trigger,
+    display: trigger ? 'inline-block' : 'block'
+  }, rest, {
+    panelRef: panelRef,
+    button: trigger ? trigger : search,
+    closePopover: closePopover,
+    panelProps: {
+      css: styles.euiSelectableTemplateSitewide__popover
+    }
+  }), ___EmotionJSX("div", {
+    style: {
+      width: width,
+      maxWidth: '100%'
+    }
+  }, title || trigger ? ___EmotionJSX(EuiPopoverTitle, {
+    paddingSize: "s"
+  }, title, title && search && ___EmotionJSX(EuiSpacer, null), search) : undefined, list, footer && ___EmotionJSX(EuiPopoverFooter, {
+    paddingSize: "s"
+  }, footer)));
+};
+EuiSelectableTemplateSitewidePopover.propTypes = {
+  search: PropTypes.node.isRequired,
+  list: PropTypes.node.isRequired,
+  trigger: PropTypes.node,
+  title: PropTypes.node,
+  footer: PropTypes.node,
+  width: PropTypes.any.isRequired,
+  isOpen: PropTypes.bool.isRequired
+};

package/es/global_styling/mixins/_button.js

@@ -195,7 +195,7 @@ export var euiButtonSizeMap = function euiButtonSizeMap(euiThemeContext) {
       minWidth: euiTheme.base * (isRefreshVariant ? 6 : 7),
       height: euiTheme.size.l,
       radius: euiTheme.border.radius.small,
-      fontScale: 'xs'
+      fontScale: isRefreshVariant ? 's' : 'xs'
     },
     s: {
       minWidth: euiTheme.base * (isRefreshVariant ? 6 : 7),

package/es/services/color/eui_palettes.js

@@ -31,6 +31,8 @@ var euiPalette = function euiPalette(colors, steps) {
   return colorPalette(colors, steps, diverge, categorical);
 };
 /**
+ * For usage in React use the `useEuiPaletteColorBlind` hook instead.
+ *
  * NOTE: These functions rely on base vis colors of the theme which are provided via a global
  * singleton instance `EUI_VIS_COLOR_STORE` that's updated by the EuiProvider on theme change.
  * Make sure the function is recalled on theme change to retrieve theme-related colors.
@@ -97,6 +99,8 @@ export var euiPaletteColorBlind = function euiPaletteColorBlind() {
 };
 
 /**
+ * For usage in React use the `useEuiPaletteColorBlindBehindText` hook instead.
+ *
  * Color blind palette with text is meant for use when text is applied on top of the color.
  * It increases the brightness of the color to give the text more contrast.
  *
@@ -155,6 +159,8 @@ export var euiPaletteForDarkBackground = function euiPaletteForDarkBackground()
 };
 
 /**
+ * For usage in React use the `useEuiPaletteForStatus` hook instead.
+ *
  * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
  * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
  */
@@ -172,6 +178,8 @@ export var euiPaletteForStatus = function euiPaletteForStatus(steps) {
 };
 
 /**
+ * For usage in React use the `useEuiPaletteForTemperature` hook instead.
+ *
  * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
  * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
  */
@@ -193,6 +201,8 @@ export var euiPaletteForTemperature = function euiPaletteForTemperature(steps) {
 };
 
 /**
+ * For usage in React use the `useEuiPaletteComplementary` hook instead.
+ *
  * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
  * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
  */
@@ -210,6 +220,8 @@ export var euiPaletteComplementary = function euiPaletteComplementary(steps) {
 };
 
 /**
+ * For usage in React use the `useEuiPaletteRed` hook instead.
+ *
  * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
  * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
  */
@@ -224,6 +236,8 @@ export var euiPaletteRed = function euiPaletteRed(steps) {
 };
 
 /**
+ * For usage in React use the `useEuiPaletteGreen` hook instead.
+ *
  * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
  * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
  */
@@ -238,6 +252,8 @@ export var euiPaletteGreen = function euiPaletteGreen(steps) {
 };
 
 /**
+ * For usage in React use the `useEuiPaletteSkyBlue` hook instead.
+ *
  * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
  * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
  */
@@ -252,6 +268,8 @@ export var euiPaletteSkyBlue = function euiPaletteSkyBlue(steps) {
 };
 
 /**
+ * For usage in React use the `useEuiPaletteYellow` hook instead.
+ *
  * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
  * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
  */
@@ -266,6 +284,8 @@ export var euiPaletteYellow = function euiPaletteYellow(steps) {
 };
 
 /**
+ * For usage in React use the `useEuiPaletteOrange` hook instead.
+ *
  * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
  * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
  */
@@ -280,6 +300,8 @@ export var euiPaletteOrange = function euiPaletteOrange(steps) {
 };
 
 /**
+ * For usage in React use the `useEuiPaletteCool` hook instead.
+ *
  * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
  * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
  */
@@ -296,6 +318,8 @@ export var euiPaletteCool = function euiPaletteCool(steps) {
 };
 
 /**
+ * For usage in React use the `useEuiPaletteWarm` hook instead.
+ *
  * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
  * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
  */
@@ -310,6 +334,8 @@ export var euiPaletteWarm = function euiPaletteWarm(steps) {
 };
 
 /**
+ * For usage in React use the `useEuiPaletteGray` hook instead.
+ *
  * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
  * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
  */

package/es/services/color/vis_color_store.js

@@ -10,4 +10,4 @@ import { EuiVisColorStore } from '@elastic/eui-theme-common';
 import { colorVis } from '@elastic/eui-theme-borealis';
 
 // initialsetup of Vis color storage with default colors
-export var EUI_VIS_COLOR_STORE = EuiVisColorStore.getInstance(colorVis, true);
+export var EUI_VIS_COLOR_STORE = EuiVisColorStore.getInstance(colorVis, false);

package/es/services/color/visualization_colors.js

@@ -9,5 +9,9 @@
 // Array of color-blind safe colors to use in visualizations or other
 // spots that need a large range of varied, qualitative colors.
 import { euiPaletteColorBlind } from '../../services/color/eui_palettes';
+
+/** @deprecated - use the data vis colors on `euiTheme.colors.vis` instead */
 export var VISUALIZATION_COLORS = euiPaletteColorBlind();
+
+/** @deprecated - use the data vis colors on `euiTheme.colors.vis` instead */
 export var DEFAULT_VISUALIZATION_COLOR = VISUALIZATION_COLORS[1];

package/es/services/theme/provider.js

@@ -95,14 +95,16 @@ export var EuiThemeProvider = function EuiThemeProvider(_ref) {
     modifications: modifications
   });
   var isParentTheme = useRef(isGlobalTheme ? prevSystemKey.current === DEFAULTS.system.key && colorMode === DEFAULTS.colorMode && highContrastMode === DEFAULTS.highContrastMode && !_modifications : prevSystemKey.current === parentSystem.key && colorMode === parentColorMode && highContrastMode === parentHighContrastMode && isEqual(parentModifications, modifications));
-  var updateVisColorStore = useCallback(function (theme) {
-    var _theme$flags$hasVisCo, _theme$flags;
-    EUI_VIS_COLOR_STORE.setVisColors(theme.colors.vis, (_theme$flags$hasVisCo = (_theme$flags = theme.flags) === null || _theme$flags === void 0 ? void 0 : _theme$flags.hasVisColorAdjustment) !== null && _theme$flags$hasVisCo !== void 0 ? _theme$flags$hasVisCo : true);
+  var updateVisColorStore = useCallback(function (theme, isGlobalTheme) {
+    if (isGlobalTheme) {
+      var _theme$flags$hasVisCo, _theme$flags;
+      EUI_VIS_COLOR_STORE.setVisColors(theme.colors.vis, (_theme$flags$hasVisCo = (_theme$flags = theme.flags) === null || _theme$flags === void 0 ? void 0 : _theme$flags.hasVisColorAdjustment) !== null && _theme$flags$hasVisCo !== void 0 ? _theme$flags$hasVisCo : true);
+    }
   }, []);
   var getInitialTheme = function getInitialTheme() {
     var theme = getComputed(system, buildTheme(modificationsWithHighContrast, "_".concat(system.key)), colorMode, highContrastMode);
     setTimeout(function () {
-      updateVisColorStore(theme);
+      updateVisColorStore(theme, isGlobalTheme);
     });
     return theme;
   };
@@ -117,9 +119,11 @@ export var EuiThemeProvider = function EuiThemeProvider(_ref) {
       setSystem(newSystem);
       prevSystemKey.current = newSystem.key;
       isParentTheme.current = false;
-      updateVisColorStore(theme);
     }
   }, [_system, parentSystem, theme, updateVisColorStore]);
+  useEffect(function () {
+    updateVisColorStore(theme, isGlobalTheme);
+  }, [theme, colorMode, isGlobalTheme, updateVisColorStore]);
   useEffect(function () {
     var newModifications = mergeDeep(parentModifications, _modifications);
     if (!isEqual(prevModifications.current, newModifications)) {
@@ -143,12 +147,15 @@ export var EuiThemeProvider = function EuiThemeProvider(_ref) {
   }, [highContrastMode]);
   useEffect(function () {
     if (!isParentTheme.current) {
-      /* Enables recomputation of component colors when flags are overridden on the provider 
+      /* Enables recomputation of component colors when flags are overridden on the provider
       by adding the respective key to modifications to trigger a recomputation. */
       // TODO: remove once visual refresh is completed and flags are obsolete
       var flagsToRecompute = [{
         flag: 'buttonVariant',
         componentKey: 'buttons'
+      }, {
+        flag: 'formVariant',
+        componentKey: 'forms'
       }];
       var keys = {};
       var forceRecomputeComponents = flagsToRecompute.some(function (item) {