@elastic/eui 107.0.1 → 109.0.0

package/es/components/modal/modal.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", "children", "initialFocus", "onClose", "maxWidth", "role", "style", "focusTrapProps", "aria-describedby"];
+var _excluded = ["className", "children", "initialFocus", "onClose", "maxWidth", "role", "style", "focusTrapProps", "outsideClickCloses", "aria-describedby"];
 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; }
@@ -16,7 +16,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { useRef, useCallback } from 'react';
 import PropTypes from "prop-types";
 import classnames from 'classnames';
 import { keys, useEuiTheme, useGeneratedHtmlId } from '../../services';
@@ -39,6 +39,8 @@ export var EuiModal = function EuiModal(_ref) {
     role = _ref$role === void 0 ? 'dialog' : _ref$role,
     style = _ref.style,
     focusTrapProps = _ref.focusTrapProps,
+    _ref$outsideClickClos = _ref.outsideClickCloses,
+    outsideClickCloses = _ref$outsideClickClos === void 0 ? false : _ref$outsideClickClos,
     _ariaDescribedBy = _ref['aria-describedby'],
     rest = _objectWithoutProperties(_ref, _excluded);
   var onKeyDown = function onKeyDown(event) {
@@ -50,6 +52,14 @@ export var EuiModal = function EuiModal(_ref) {
       }
     }
   };
+  var maskRef = useRef(null);
+  var onClickOutside = useCallback(function (event) {
+    // The overlay mask is always present
+    if (outsideClickCloses === true && event.target === maskRef.current) {
+      onClose(event);
+    }
+    return undefined;
+  }, [onClose, outsideClickCloses]);
   var newStyle = style;
   if (typeof maxWidth !== 'boolean') {
     newStyle = _objectSpread(_objectSpread({}, newStyle), {}, {
@@ -69,10 +79,13 @@ export var EuiModal = function EuiModal(_ref) {
     token: "euiModal.screenReaderModalDialog",
     default: "You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close."
   })));
-  return ___EmotionJSX(EuiOverlayMask, null, ___EmotionJSX(EuiFocusTrap, _extends({}, focusTrapProps, {
+  return ___EmotionJSX(EuiOverlayMask, {
+    maskRef: maskRef
+  }, ___EmotionJSX(EuiFocusTrap, _extends({}, focusTrapProps, {
     initialFocus: initialFocus,
     scrollLock: true,
-    preventScrollOnFocus: true
+    preventScrollOnFocus: true,
+    onClickOutside: onClickOutside
   }), ___EmotionJSX("div", _extends({
     css: cssStyles,
     className: classes,
@@ -125,5 +138,10 @@ EuiModal.propTypes = {
      * Object of props passed to EuiFocusTrap.
      * `returnFocus` defines the return focus behavior and provides the possibility to check the available target element or opt out of the behavior in favor of manually returning focus
      */
-  focusTrapProps: PropTypes.any
+  focusTrapProps: PropTypes.any,
+  /**
+     * Whether clicking outside the modal should close it.
+     * @default false
+     */
+  outsideClickCloses: PropTypes.bool
 };

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

@@ -12,19 +12,12 @@ import { euiBorderStyles, euiShadow, euiShadowHover } from '@elastic/eui-theme-c
 import { euiCanAnimate, logicalCSS, logicalTextAlignCSS } from '../../global_styling';
 import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 export var euiPanelBorderStyles = function euiPanelBorderStyles(euiThemeContext, options) {
-  var euiTheme = euiThemeContext.euiTheme,
-    colorMode = euiThemeContext.colorMode;
+  var euiTheme = euiThemeContext.euiTheme;
   var _ref3 = options !== null && options !== void 0 ? options : {},
-    borderColor = _ref3.borderColor,
-    _ref3$hasFloatingBord = _ref3.hasFloatingBorder,
-    hasFloatingBorder = _ref3$hasFloatingBord === void 0 ? true : _ref3$hasFloatingBord;
-
-  /* TODO: remove `hasFloatingBorder` and `hasVisibleBorder` and once Amsterdam is removed
-   euiTheme.colors.borderBaseFloating is enough then */
-  var hasVisibleBorder = hasFloatingBorder && colorMode === 'DARK';
+    borderColor = _ref3.borderColor;
   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      ".concat(euiBorderStyles(euiThemeContext, {
-      borderColor: (borderColor !== null && borderColor !== void 0 ? borderColor : hasVisibleBorder) ? euiTheme.border.color : euiTheme.colors.borderBaseFloating
+      borderColor: borderColor !== null && borderColor !== void 0 ? borderColor : euiTheme.colors.borderBaseFloating
     }), "\n    "),
     preferred: "\n      border: ".concat(euiTheme.border.thin, ";\n    ")
   });
@@ -53,8 +46,7 @@ export var euiPanelStyles = function euiPanelStyles(euiThemeContext) {
     grow: _ref,
     hasShadow: /*#__PURE__*/css(euiShadow(euiThemeContext, 'm'), ";;label:hasShadow;"),
     hasBorder: /*#__PURE__*/css(euiPanelBorderStyles(euiThemeContext, {
-      borderColor: euiTheme.border.color,
-      hasFloatingBorder: false
+      borderColor: euiTheme.border.color
     }), ";;label:hasBorder;"),
     radius: {
       none: /*#__PURE__*/css(";label:none;"),

package/es/components/resizable_container/resizable_collapse_button.js

@@ -19,7 +19,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 { useEuiMemoizedStyles, useEuiThemeRefreshVariant } from '../../services';
+import { useEuiMemoizedStyles } from '../../services';
 import { EuiButtonIcon } from '../button';
 import { euiScreenReaderOnlyStyles } from '../accessibility/screen_reader_only/screen_reader_only.styles';
 import { euiResizableCollapseButtonStyles } from './resizable_collapse_button.styles';
@@ -37,7 +37,6 @@ export var EuiResizableCollapseButton = function EuiResizableCollapseButton(_ref
     rest = _objectWithoutProperties(_ref, _excluded);
   var isHorizontal = direction === 'horizontal';
   var showOnFocus = !isCollapsed && !isVisible;
-  var isRefreshVariant = useEuiThemeRefreshVariant('buttonVariant');
   var styles = useEuiMemoizedStyles(euiResizableCollapseButtonStyles);
   var collapsedStyles = [styles.collapsed.collapsed, styles.collapsed[direction], styles.collapsed["".concat(direction, "Positions")][internalPosition]];
   var collapsibleStyles = [styles.collapsible.collapsible, styles.collapsible[direction][externalPosition], styles.collapsible[direction][internalPosition]];
@@ -56,7 +55,7 @@ export var EuiResizableCollapseButton = function EuiResizableCollapseButton(_ref
   }
   var classes = classNames('euiResizableCollapseButton', className);
   return ___EmotionJSX(EuiButtonIcon, _extends({
-    display: isRefreshVariant ? 'empty' : isCollapsed ? 'empty' : 'base',
+    display: "empty",
     color: "text",
     className: classes,
     css: cssStyles

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

@@ -26,7 +26,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { useState, useMemo, useCallback, useContext } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { COLOR_MODES_STANDARD, EuiNestedThemeContext, EuiThemeProvider, useCombinedRefs, useCurrentEuiBreakpoint, useEuiMemoizedStyles, useEuiTheme, useEuiThemeRefreshVariant } from '../../../services';
+import { COLOR_MODES_STANDARD, EuiNestedThemeContext, EuiThemeProvider, useCombinedRefs, useCurrentEuiBreakpoint, useEuiMemoizedStyles, useEuiTheme } from '../../../services';
 import { ENTER } from '../../../services/keys';
 import { useEuiI18n, EuiI18n } from '../../i18n';
 import { EuiLoadingSpinner } from '../../loading';
@@ -57,7 +57,6 @@ export var EuiSelectableTemplateSitewide = function EuiSelectableTemplateSitewid
     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();
@@ -226,7 +225,7 @@ export var EuiSelectableTemplateSitewide = function EuiSelectableTemplateSitewid
   }, rest, {
     searchable: true
   }), function (list, search) {
-    var _search = isRefreshVariant && !popoverTrigger ? ___EmotionJSX(EuiThemeProvider, {
+    var _search = !popoverTrigger ? ___EmotionJSX(EuiThemeProvider, {
       colorMode: searchColorMode
     }, search) : search;
 
@@ -242,12 +241,12 @@ export var EuiSelectableTemplateSitewide = function EuiSelectableTemplateSitewid
       panelRef: setPanelRef,
       closePopover: closePopover
     }, popoverRest));
-    return isRefreshVariant ? ___EmotionJSX(EuiThemeProvider, {
+    return ___EmotionJSX(EuiThemeProvider, {
       wrapperProps: {
         cloneElement: true
       },
       colorMode: popoverColorMode
-    }, popover) : popover;
+    }, popover);
   });
 };
 EuiSelectableTemplateSitewide.propTypes = {

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

@@ -22,9 +22,7 @@ export var euiToastStyles = function euiToastStyles(euiThemeContext) {
     // Base
     euiToast: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.medium, ";", euiShadowLarge(euiThemeContext, {
       borderAllInHighContrastMode: true
-    }), " position:relative;", logicalCSS('padding-horizontal', euiTheme.size.base), " ", logicalCSS('padding-vertical', euiTheme.size.base), " background-color:", euiTheme.colors.emptyShade, ";", logicalCSS('width', '100%'), " ", euiTextBreakWord(), euiPanelBorderStyles(euiThemeContext, {
-      hasFloatingBorder: false
-    }), " &:hover,&:focus{[class*='euiToast__closeButton']{opacity:1;}};label:euiToast;"),
+    }), " position:relative;", logicalCSS('padding-horizontal', euiTheme.size.base), " ", logicalCSS('padding-vertical', euiTheme.size.base), " background-color:", euiTheme.colors.emptyShade, ";", logicalCSS('width', '100%'), " ", euiTextBreakWord(), euiPanelBorderStyles(euiThemeContext), " &:hover,&:focus{[class*='euiToast__closeButton']{opacity:1;}};label:euiToast;"),
     // Elements
     euiToast__closeButton: /*#__PURE__*/css("position:absolute;", logicalCSS('top', euiTheme.size.base), " ", logicalCSS('right', euiTheme.size.base), ";;label:euiToast__closeButton;"),
     // Variants

package/es/components/token/token.js

@@ -26,7 +26,7 @@ import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import { useEuiTheme, isColorDark, hexToRgb } from '../../services';
 import { EuiIcon } from '../icon';
-import { TOKEN_MAP_AMSTERDAM, TOKEN_MAP_BOREALIS } from './token_map';
+import { TOKEN_MAP } from './token_map';
 import { COLORS } from './token_types';
 import { euiTokenStyles } from './token.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -58,8 +58,6 @@ export var EuiToken = function EuiToken(_ref) {
     finalSize = 'm';
   }
   var euiTheme = useEuiTheme();
-  var hasVisColorAdjustment = euiTheme.euiTheme.flags.hasVisColorAdjustment;
-  var TOKEN_MAP = hasVisColorAdjustment ? TOKEN_MAP_AMSTERDAM : TOKEN_MAP_BOREALIS;
 
   // If the iconType passed is one of the prefab token types,
   // grab its properties

package/es/components/token/token.styles.js

@@ -17,13 +17,12 @@ import { css } from '@emotion/react';
 import chroma from 'chroma-js';
 import { logicalCSS, logicalSizeCSS, mathWithUnits } from '../../global_styling';
 import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
-import { euiPaletteColorBlind, euiPaletteColorBlindBehindText, makeHighContrastColor, isColorDark, tint, shade } from '../../services';
+import { euiPaletteColorBlind, euiPaletteColorBlindBehindText, isColorDark, tint, shade } from '../../services';
 import { TOKEN_COLOR_TO_ICON_COLOR_MAP } from './token_map';
 var getTokenColor = function getTokenColor(euiThemeContext, fill, color) {
   var euiTheme = euiThemeContext.euiTheme,
     colorMode = euiThemeContext.colorMode,
     highContrastMode = euiThemeContext.highContrastMode;
-  var hasVisColorAdjustment = euiTheme.flags.hasVisColorAdjustment;
   // use inside function as they are not returning constants,
   // but internally depend on EUI_VIS_COLOR_STORE to update per theme
   var visColors = euiPaletteColorBlind();
@@ -38,7 +37,7 @@ var getTokenColor = function getTokenColor(euiThemeContext, fill, color) {
     var iconColorToken = TOKEN_COLOR_TO_ICON_COLOR_MAP[iconColorKey];
     return euiTheme.colors.vis[iconColorToken];
   };
-  var lightColor = hasVisColorAdjustment ? makeHighContrastColor(iconColor)(backgroundLightColor) : isVizColor ? shade(getIconVisColor(euiTheme, color), 0.3) : iconColor;
+  var lightColor = isVizColor ? shade(getIconVisColor(euiTheme, color), 0.3) : iconColor;
   var boxShadowColor = highContrastMode ? iconColor : isDarkMode ? shade(iconColor, 0.6) : tint(iconColor, 0.2);
   var darkColor = isColorDark.apply(void 0, _toConsumableArray(chroma(backgroundDarkColor).rgb())) ? euiTheme.colors.ghost : euiTheme.colors.ink;
   switch (fill) {

package/es/components/token/token_map.js

@@ -12,237 +12,7 @@
  * circle shape for more uncommon token types so they grab attention.
  */
 
-export var TOKEN_MAP_AMSTERDAM = {
-  tokenAlias: {
-    shape: 'circle',
-    color: 'euiColorVis3'
-  },
-  tokenAnnotation: {
-    shape: 'square',
-    color: 'euiColorVis5'
-  },
-  tokenArray: {
-    shape: 'square',
-    color: 'euiColorVis7'
-  },
-  tokenBinary: {
-    shape: 'square',
-    color: 'euiColorVis4'
-  },
-  tokenBoolean: {
-    shape: 'square',
-    color: 'euiColorVis7'
-  },
-  tokenClass: {
-    shape: 'circle',
-    color: 'euiColorVis1'
-  },
-  tokenCompletionSuggester: {
-    shape: 'square',
-    color: 'euiColorVis1'
-  },
-  tokenConstant: {
-    shape: 'circle',
-    color: 'euiColorVis0'
-  },
-  tokenDate: {
-    shape: 'square',
-    color: 'euiColorVis6'
-  },
-  tokenDimension: {
-    shape: 'square',
-    color: 'euiColorVis1'
-  },
-  tokenElement: {
-    shape: 'square',
-    color: 'euiColorVis3'
-  },
-  tokenEnum: {
-    shape: 'circle',
-    color: 'euiColorVis3'
-  },
-  tokenEnumMember: {
-    shape: 'square',
-    color: 'euiColorVis7'
-  },
-  tokenEvent: {
-    shape: 'circle',
-    color: 'euiColorVis4'
-  },
-  tokenException: {
-    shape: 'circle',
-    color: 'euiColorVis0'
-  },
-  tokenField: {
-    shape: 'circle',
-    color: 'euiColorVis0'
-  },
-  tokenFile: {
-    shape: 'square',
-    color: 'euiColorVis2'
-  },
-  tokenFlattened: {
-    shape: 'square',
-    color: 'euiColorVis7'
-  },
-  tokenFunction: {
-    shape: 'circle',
-    color: 'euiColorVis2'
-  },
-  tokenGeo: {
-    shape: 'square',
-    color: 'euiColorVis5'
-  },
-  tokenHistogram: {
-    shape: 'square',
-    color: 'euiColorVis6'
-  },
-  tokenInterface: {
-    shape: 'circle',
-    color: 'euiColorVis9'
-  },
-  tokenIP: {
-    shape: 'square',
-    color: 'euiColorVis9'
-  },
-  tokenJoin: {
-    shape: 'square',
-    color: 'euiColorVis5'
-  },
-  tokenKey: {
-    shape: 'circle',
-    color: 'euiColorVis5'
-  },
-  tokenKeyword: {
-    shape: 'square',
-    color: 'euiColorVis1'
-  },
-  tokenMethod: {
-    shape: 'square',
-    color: 'euiColorVis2'
-  },
-  tokenMetricCounter: {
-    shape: 'square',
-    color: 'euiColorVis0'
-  },
-  tokenMetricGauge: {
-    shape: 'square',
-    color: 'euiColorVis0'
-  },
-  tokenModule: {
-    shape: 'square',
-    color: 'euiColorVis4'
-  },
-  tokenNamespace: {
-    shape: 'square',
-    color: 'euiColorVis1'
-  },
-  tokenNested: {
-    shape: 'circle',
-    color: 'euiColorVis2'
-  },
-  tokenNull: {
-    shape: 'square',
-    color: 'euiColorVis2'
-  },
-  tokenNumber: {
-    shape: 'square',
-    color: 'euiColorVis0'
-  },
-  tokenObject: {
-    shape: 'circle',
-    color: 'euiColorVis3'
-  },
-  tokenOperator: {
-    shape: 'circle',
-    color: 'euiColorVis4'
-  },
-  tokenPackage: {
-    shape: 'square',
-    color: 'euiColorVis0'
-  },
-  tokenParameter: {
-    shape: 'square',
-    color: 'euiColorVis4'
-  },
-  tokenPercolator: {
-    shape: 'square',
-    color: 'euiColorVis6'
-  },
-  tokenProperty: {
-    shape: 'circle',
-    color: 'euiColorVis2'
-  },
-  tokenRange: {
-    shape: 'circle',
-    color: 'euiColorVis4'
-  },
-  tokenRankFeature: {
-    shape: 'square',
-    color: 'euiColorVis8'
-  },
-  tokenRankFeatures: {
-    shape: 'square',
-    color: 'euiColorVis3'
-  },
-  tokenRepo: {
-    shape: 'square',
-    color: 'euiColorVis1'
-  },
-  tokenSearchType: {
-    shape: 'square',
-    color: 'euiColorVis5'
-  },
-  tokenSemanticText: {
-    shape: 'square',
-    color: 'euiColorVis0'
-  },
-  tokenShape: {
-    shape: 'circle',
-    color: 'euiColorVis8'
-  },
-  tokenString: {
-    shape: 'square',
-    color: 'euiColorVis1'
-  },
-  tokenStruct: {
-    shape: 'square',
-    color: 'euiColorVis0'
-  },
-  tokenSymbol: {
-    shape: 'square',
-    color: 'euiColorVis0'
-  },
-  tokenTag: {
-    shape: 'square',
-    color: 'euiColorVis9'
-  },
-  tokenText: {
-    shape: 'square',
-    color: 'euiColorVis3'
-  },
-  tokenTokenCount: {
-    shape: 'square',
-    color: 'euiColorVis4'
-  },
-  tokenVariable: {
-    shape: 'circle',
-    color: 'euiColorVis7'
-  },
-  tokenVectorDense: {
-    shape: 'square',
-    color: 'euiColorVis5'
-  },
-  tokenDenseVector: {
-    shape: 'square',
-    color: 'euiColorVis5'
-  },
-  tokenVectorSparse: {
-    shape: 'square',
-    color: 'euiColorVis1'
-  }
-};
-export var TOKEN_MAP_BOREALIS = {
+export var TOKEN_MAP = {
   tokenAlias: {
     shape: 'square',
     color: 'euiColorVis0'

package/es/global_styling/mixins/_button.js

@@ -1,6 +1,4 @@
-var _templateObject;
 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 _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
 function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
@@ -20,9 +18,9 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
  * Side Public License, v 1.
  */
 
-import { css, keyframes } from '@emotion/react';
-import { getTokenName, euiCanAnimate, mathWithUnits } from '@elastic/eui-theme-common';
-import { makeHighContrastColor, useEuiMemoizedStyles, isEuiThemeRefreshVariant } from '../../services';
+import { css } from '@emotion/react';
+import { getTokenName, mathWithUnits } from '@elastic/eui-theme-common';
+import { makeHighContrastColor, useEuiMemoizedStyles } from '../../services';
 import { highContrastModeStyles, logicalCSS } from '../functions';
 
 /** Tentative usage; these exist only to be used as button directly when used within other components */
@@ -124,7 +122,6 @@ export var useEuiButtonColorCSS = function useEuiButtonColorCSS() {
 };
 var euiButtonDisplaysColors = function euiButtonDisplaysColors(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'buttonVariant');
   var COLORS = [].concat(_toConsumableArray(EXTENDED_BUTTON_COLORS), ['disabled']);
   var displaysColorsMap = {};
   BUTTON_DISPLAYS.forEach(function (display) {
@@ -135,23 +132,19 @@ var euiButtonDisplaysColors = function euiButtonDisplaysColors(euiThemeContext)
           {
             var buttonColors = getButtonVariantTokenValues(euiThemeContext, color, 'base');
             var borderStyle = color === 'text' && "\n              border: ".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.borderBasePlain, ";\n            ");
-            var refreshVariantStyles = isRefreshVariant && "\n            ".concat(_interactionStyles(euiThemeContext, buttonColors, 'overlay'), "\n            ").concat(borderStyle, "\n          ");
-            displaysColorsMap[display][color] = /*#__PURE__*/css(euiButtonColor(euiThemeContext, color), " ", refreshVariantStyles, ";;label:displaysColorsMap-display-color;");
+            displaysColorsMap[display][color] = /*#__PURE__*/css(euiButtonColor(euiThemeContext, color), " ", _interactionStyles(euiThemeContext, buttonColors, 'overlay'), " ", borderStyle, ";;label:displaysColorsMap-display-color;");
             break;
           }
         case 'fill':
           {
             var _buttonColors = getButtonVariantTokenValues(euiThemeContext, color, 'filled');
-            var _refreshVariantStyles = isRefreshVariant && _interactionStyles(euiThemeContext, _buttonColors);
-            displaysColorsMap[display][color] = /*#__PURE__*/css(euiButtonFillColor(euiThemeContext, color), "outline-color:", euiThemeContext.colorMode === 'DARK' && color === 'text' ? 'currentColor' : euiThemeContext.euiTheme.colors.fullShade, ";", _refreshVariantStyles, ";;label:displaysColorsMap-display-color;");
+            displaysColorsMap[display][color] = /*#__PURE__*/css(euiButtonFillColor(euiThemeContext, color), "outline-color:", euiThemeContext.colorMode === 'DARK' && color === 'text' ? 'currentColor' : euiThemeContext.euiTheme.colors.fullShade, ";", _interactionStyles(euiThemeContext, _buttonColors), ";;label:displaysColorsMap-display-color;");
             break;
           }
         case 'empty':
           {
             var _buttonColors2 = getButtonVariantTokenValues(euiThemeContext, color, 'empty');
-            var classicVariantStyles = !isRefreshVariant && "\n              &:focus,\n              &:active {\n                background-color: ".concat(euiButtonEmptyColor(euiThemeContext, color).backgroundColor, ";\n              }\n            ");
-            var _refreshVariantStyles2 = isRefreshVariant && _interactionStyles(euiThemeContext, _buttonColors2, 'overlay');
-            displaysColorsMap[display][color] = /*#__PURE__*/css("color:", euiButtonEmptyColor(euiThemeContext, color).color, ";", classicVariantStyles, " ", _refreshVariantStyles2, ";;label:displaysColorsMap-display-color;");
+            displaysColorsMap[display][color] = /*#__PURE__*/css("color:", euiButtonEmptyColor(euiThemeContext, color).color, ";", _interactionStyles(euiThemeContext, _buttonColors2, 'overlay'), ";;label:displaysColorsMap-display-color;");
             break;
           }
       }
@@ -171,11 +164,11 @@ var euiButtonDisplaysColors = function euiButtonDisplaysColors(euiThemeContext)
 export var useEuiButtonFocusCSS = function useEuiButtonFocusCSS() {
   return useEuiMemoizedStyles(euiButtonFocusCSS);
 };
-var euiButtonFocusAnimation = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  50% {\n    transform: translateY(1px);\n  }\n"])));
-var euiButtonFocusCSS = function euiButtonFocusCSS(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
-  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'buttonVariant');
-  var focusCSS = isRefreshVariant ? /*#__PURE__*/css(";label:focusCSS;") : /*#__PURE__*/css(euiCanAnimate, "{transition:transform ", euiTheme.animation.normal, " ease-in-out,background-color ", euiTheme.animation.normal, " ease-in-out;&:hover:not(:disabled){transform:translateY(-1px);}&:focus{animation:", euiButtonFocusAnimation, " ", euiTheme.animation.normal, " ", euiTheme.animation.bounce, ";}&:active:not(:disabled){transform:translateY(1px);}};label:focusCSS;");
+
+// NOTE: keeping this as placeholder for now in case we need custom button focus styles for https://github.com/elastic/eui-private/issues/267
+var euiButtonFocusCSS = function euiButtonFocusCSS(_euiThemeContext) {
+  var focusCSS = /*#__PURE__*/css(";label:focusCSS;");
+
   // Remove the auto-generated label.
   // We could typically avoid a label by using a plain string `` instead of css``,
   // but we need css`` for keyframes`` to work for the focus animation
@@ -189,16 +182,15 @@ var euiButtonFocusCSS = function euiButtonFocusCSS(euiThemeContext) {
  */
 export var euiButtonSizeMap = function euiButtonSizeMap(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'buttonVariant');
   return {
     xs: {
-      minWidth: euiTheme.base * (isRefreshVariant ? 6 : 7),
+      minWidth: euiTheme.base * 6,
       height: euiTheme.size.l,
       radius: euiTheme.border.radius.small,
       fontScale: 'xs'
     },
     s: {
-      minWidth: euiTheme.base * (isRefreshVariant ? 6 : 7),
+      minWidth: euiTheme.base * 6,
       height: euiTheme.size.xl,
       radius: euiTheme.border.radius.small,
       fontScale: 's'
@@ -206,7 +198,7 @@ export var euiButtonSizeMap = function euiButtonSizeMap(euiThemeContext) {
     m: {
       minWidth: euiTheme.base * 7,
       height: euiTheme.size.xxl,
-      radius: isRefreshVariant ? euiTheme.border.radius.small : euiTheme.border.radius.medium,
+      radius: euiTheme.border.radius.small,
       fontScale: 's'
     }
   };
@@ -217,8 +209,6 @@ export var euiButtonSizeMap = function euiButtonSizeMap(euiThemeContext) {
  */
 var _interactionStyles = function _interactionStyles(euiThemeContext, buttonColors) {
   var type = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'fill';
-  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'buttonVariant');
-  if (!isRefreshVariant) return "";
   var baseStyles = function baseStyles() {
     // button hover is applied as pseudo element with a transparent background-color
     if (type === 'overlay') {

package/es/index.js

@@ -9,5 +9,4 @@
 export * from './components';
 export * from './services';
 export * from './utils';
-export * from './themes';
 export * from './global_styling';

package/es/services/color/eui_palettes.js

@@ -109,16 +109,8 @@ export var euiPaletteColorBlind = function euiPaletteColorBlind() {
  */
 export var euiPaletteColorBlindBehindText = function euiPaletteColorBlindBehindText() {
   var paletteProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var hasVisColorAdjustment = paletteProps.hasVisColorAdjustment;
-  var _hasVisColorAdjustment = hasVisColorAdjustment !== null && hasVisColorAdjustment !== void 0 ? hasVisColorAdjustment : EUI_VIS_COLOR_STORE.hasVisColorAdjustment;
   var originalPalette = euiPaletteColorBlind(paletteProps);
-
-  // new theme palette has required contrast, we don't need to adjust them
-  if (!_hasVisColorAdjustment) return originalPalette;
-  var newPalette = originalPalette.map(function (color) {
-    return chroma(color).brighten(0.5).hex();
-  });
-  return newPalette;
+  return originalPalette;
 };
 var _getVisColorsAsText = function _getVisColorsAsText(visColors, keys) {
   return keys.reduce(function (colors, curr) {
@@ -185,10 +177,8 @@ export var euiPaletteForStatus = function euiPaletteForStatus(steps) {
  */
 export var euiPaletteForTemperature = function euiPaletteForTemperature(steps) {
   var _ref6 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    colors = _ref6.colors,
-    hasVisColorAdjustment = _ref6.hasVisColorAdjustment;
+    colors = _ref6.colors;
   var visColors = colors !== null && colors !== void 0 ? colors : EUI_VIS_COLOR_STORE.visColors;
-  var _hasVisColorAdjustment = hasVisColorAdjustment !== null && hasVisColorAdjustment !== void 0 ? hasVisColorAdjustment : EUI_VIS_COLOR_STORE.hasVisColorAdjustment;
   if (steps === 1) {
     return [visColors.euiColorVisCool2];
   } else if (steps <= 3) {
@@ -196,7 +186,7 @@ export var euiPaletteForTemperature = function euiPaletteForTemperature(steps) {
   }
   var cools = colorPalette([visColors.euiColorVisCool2, visColors.euiColorVisCool1, visColors.euiColorVisCool0], 3);
   var warms = colorPalette([visColors.euiColorVisWarm0, visColors.euiColorVisWarm1, visColors.euiColorVisWarm2], 3);
-  var paletteColors = _hasVisColorAdjustment ? [].concat(_toConsumableArray(cools), _toConsumableArray(warms)) : [].concat(_toConsumableArray(cools), [visColors.euiColorVisBase0], _toConsumableArray(warms));
+  var paletteColors = [].concat(_toConsumableArray(cools), [visColors.euiColorVisBase0], _toConsumableArray(warms));
   return euiPalette(paletteColors, steps, true);
 };
 
@@ -208,14 +198,12 @@ export var euiPaletteForTemperature = function euiPaletteForTemperature(steps) {
  */
 export var euiPaletteComplementary = function euiPaletteComplementary(steps) {
   var _ref7 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    colors = _ref7.colors,
-    hasVisColorAdjustment = _ref7.hasVisColorAdjustment;
+    colors = _ref7.colors;
   var visColors = colors !== null && colors !== void 0 ? colors : EUI_VIS_COLOR_STORE.visColors;
-  var _hasVisColorAdjustment = hasVisColorAdjustment !== null && hasVisColorAdjustment !== void 0 ? hasVisColorAdjustment : EUI_VIS_COLOR_STORE.hasVisColorAdjustment;
   if (steps === 1) {
     return [visColors.euiColorVisComplementary0];
   }
-  var paletteColors = _hasVisColorAdjustment ? [visColors.euiColorVisComplementary0, visColors.euiColorVisComplementary1] : [visColors.euiColorVisComplementary0, visColors.euiColorVisBase0, visColors.euiColorVisComplementary1];
+  var paletteColors = [visColors.euiColorVisComplementary0, visColors.euiColorVisBase0, visColors.euiColorVisComplementary1];
   return euiPalette(paletteColors, steps, true);
 };
 
@@ -307,14 +295,12 @@ export var euiPaletteOrange = function euiPaletteOrange(steps) {
  */
 export var euiPaletteCool = function euiPaletteCool(steps) {
   var _ref13 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    colors = _ref13.colors,
-    hasVisColorAdjustment = _ref13.hasVisColorAdjustment;
+    colors = _ref13.colors;
   var visColors = colors !== null && colors !== void 0 ? colors : EUI_VIS_COLOR_STORE.visColors;
-  var _hasVisColorAdjustment = hasVisColorAdjustment !== null && hasVisColorAdjustment !== void 0 ? hasVisColorAdjustment : EUI_VIS_COLOR_STORE.hasVisColorAdjustment;
   if (steps === 1) {
     return [visColors.euiColorVisCool1];
   }
-  return euiPalette([_hasVisColorAdjustment ? visColors.euiColorVisBase0 : visColors.euiColorVisCool0, visColors.euiColorVisCool1, visColors.euiColorVisCool2], steps);
+  return euiPalette([visColors.euiColorVisCool0, visColors.euiColorVisCool1, visColors.euiColorVisCool2], steps);
 };
 
 /**