@elastic/eui 100.0.0 → 101.0.0

package/optimize/es/components/panel/panel.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "className", "paddingSize", "borderRadius", "color", "hasShadow", "hasBorder", "grow", "panelRef", "element"];
 /*
@@ -12,8 +13,8 @@ var _excluded = ["children", "className", "paddingSize", "borderRadius", "color"
 
 import React from 'react';
 import classNames from 'classnames';
-import { useEuiMemoizedStyles } from '../../services';
-import { useEuiBackgroundColorCSS, useEuiPaddingCSS, BACKGROUND_COLORS, PADDING_SIZES } from '../../global_styling';
+import { useEuiMemoizedStyles, useEuiTheme } from '../../services';
+import { useEuiBackgroundColorCSS, useEuiBorderColorCSS, useEuiPaddingCSS, BACKGROUND_COLORS, PADDING_SIZES } from '../../global_styling';
 import { keysOf } from '../common';
 import { euiPanelStyles } from './panel.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -48,11 +49,22 @@ export var EuiPanel = function EuiPanel(_ref) {
     panelRef = _ref.panelRef,
     element = _ref.element,
     rest = _objectWithoutProperties(_ref, _excluded);
+  // Add borders to panels in high contrast mode
+  var _useEuiTheme = useEuiTheme(),
+    highContrastMode = _useEuiTheme.highContrastMode,
+    euiTheme = _useEuiTheme.euiTheme;
+  var borderColors = useEuiBorderColorCSS();
+
   // Shadows are only allowed when there's a white background (plain)
-  var canHaveShadow = !hasBorder && color === 'plain';
+  var canHaveShadow = !hasBorder && color === 'plain' && !highContrastMode;
   var canHaveBorder = color === 'plain' || color === 'transparent';
   var styles = useEuiMemoizedStyles(euiPanelStyles);
-  var cssStyles = [styles.euiPanel, grow && styles.grow, styles.radius[borderRadius], useEuiPaddingCSS()[paddingSize], useEuiBackgroundColorCSS()[color], canHaveShadow && hasShadow === true && styles.hasShadow, canHaveBorder && hasBorder === true && styles.hasBorder, rest.onClick && styles.isClickable];
+  var cssStyles = [styles.euiPanel, grow && styles.grow, styles.radius[borderRadius], useEuiPaddingCSS()[paddingSize], useEuiBackgroundColorCSS()[color], canHaveShadow && hasShadow === true && styles.hasShadow, canHaveBorder && hasBorder === true && styles.hasBorder].concat(_toConsumableArray(highContrastMode && _canRenderHighContrastBorder({
+    color: color,
+    hasBorder: hasBorder
+  }) ? [{
+    border: euiTheme.border.thin
+  }, borderColors[color]] : []), [rest.onClick && styles.isClickable]);
   var classes = classNames('euiPanel', "euiPanel--".concat(color), _defineProperty({}, "euiPanel--".concat(paddingSizeToClassNameMap[paddingSize]), paddingSizeToClassNameMap[paddingSize]), className);
   if (rest.onClick && element !== 'div') {
     return ___EmotionJSX("button", _extends({
@@ -66,4 +78,12 @@ export var EuiPanel = function EuiPanel(_ref) {
     className: classes,
     css: cssStyles
   }, rest), children);
+};
+
+// Do not render a high contrast border if the panel is transparent
+// and does not have a default contrast border
+export var _canRenderHighContrastBorder = function _canRenderHighContrastBorder(_ref2) {
+  var color = _ref2.color,
+    hasBorder = _ref2.hasBorder;
+  return !(color === 'transparent' && !hasBorder);
 };

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

@@ -10,6 +10,23 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 import { css } from '@emotion/react';
 import { euiShadow } from '@elastic/eui-theme-common';
 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 _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';
+  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    "),
+    preferred: "\n      border: ".concat(euiTheme.border.thin, ";\n    ")
+  });
+};
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "122lw0e-grow",
   styles: "flex-grow:1;label:grow;"
@@ -19,27 +36,35 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 var _ref2 = process.env.NODE_ENV === "production" ? {
-  name: "1kk7odi-euiPanel",
-  styles: "flex-grow:0;label:euiPanel;"
+  name: "1xyrf3k-euiPanel",
+  styles: "position:relative;flex-grow:0;label:euiPanel;"
 } : {
-  name: "1kk7odi-euiPanel",
-  styles: "flex-grow:0;label:euiPanel;",
+  name: "1xyrf3k-euiPanel",
+  styles: "position:relative;flex-grow:0;label:euiPanel;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 export var euiPanelStyles = function euiPanelStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var borderStyle = "\n    position: relative;\n\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      inset: 0;\n      border: ".concat(euiTheme.border.width.thin, " solid\n        ").concat(euiTheme.colors.borderBaseFloating, ";\n      border-radius: inherit;\n      pointer-events: none;\n    }\n  ");
   return {
     // Base
     euiPanel: _ref2,
     grow: _ref,
-    hasShadow: /*#__PURE__*/css(euiShadow(euiThemeContext, 'm'), " ", borderStyle, ";;label:hasShadow;"),
-    hasBorder: /*#__PURE__*/css("border:", euiTheme.border.thin, ";;label:hasBorder;"),
+    hasShadow: /*#__PURE__*/css(euiShadow(euiThemeContext, 'm'), " ", euiPanelBorderStyles(euiThemeContext, {
+      hasFloatingBorder: false
+    }), ";;label:hasShadow;"),
+    hasBorder: /*#__PURE__*/css(euiPanelBorderStyles(euiThemeContext, {
+      borderColor: euiTheme.border.color,
+      hasFloatingBorder: false
+    }), ";;label:hasBorder;"),
     radius: {
       none: /*#__PURE__*/css(";label:none;"),
       m: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.medium, ";;label:m;")
     },
     // Setup interactive behavior
-    isClickable: /*#__PURE__*/css(euiCanAnimate, "{transition:box-shadow ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ",transform ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";}&:enabled{display:block;", logicalCSS('width', '100%'), " ", logicalTextAlignCSS('left'), ";}&:hover,&:focus{", euiShadow(euiThemeContext, 'l'), " transform:translateY(-2px);cursor:pointer;};label:isClickable;")
+    isClickable: /*#__PURE__*/css(euiCanAnimate, "{transition:box-shadow ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ",transform ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";}&:enabled{display:block;", logicalCSS('width', '100%'), " ", logicalTextAlignCSS('left'), ";}&:hover,&:focus{", highContrastModeStyles(euiThemeContext, {
+      none: euiShadow(euiThemeContext, 'l'),
+      // Windows high contrast themes ignore box-shadows - use a filter workaround instead
+      preferred: "\n            &:not(.euiPanel--transparent) {\n              filter: drop-shadow(0 ".concat(euiTheme.border.width.thick, " 0 ").concat(euiTheme.border.color, ");\n            }\n          ")
+    }), " transform:translateY(-2px);cursor:pointer;};label:isClickable;")
   };
 };

package/optimize/es/components/panel/split_panel/split_panel.js

@@ -1,7 +1,10 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "className"],
   _excluded2 = ["children", "className", "direction", "responsive"];
+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; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -10,10 +13,11 @@ var _excluded = ["children", "className"],
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { createContext, useContext } from 'react';
 import classNames from 'classnames';
 import { useIsWithinBreakpoints } from '../../../services/breakpoint';
-import { EuiPanel } from '../panel';
+import { useEuiMemoizedStyles } from '../../../services';
+import { EuiPanel, _canRenderHighContrastBorder } from '../panel';
 import { euiSplitPanelOuterStyles, euiSplitPanelInnerStyles } from './split_panel.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 /**
@@ -24,7 +28,10 @@ export var _EuiSplitPanelInner = function _EuiSplitPanelInner(_ref) {
   var children = _ref.children,
     className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var borderDirection = useContext(SplitPanelInnerBorderDirection);
   var classes = classNames('euiSplitPanel__inner', className);
+  var styles = useEuiMemoizedStyles(euiSplitPanelInnerStyles);
+  var cssStyles = [styles.euiSplitPanelInner, borderDirection && styles.highContrastBorders[borderDirection]];
   var panelProps = {
     hasShadow: false,
     color: 'transparent',
@@ -34,7 +41,7 @@ export var _EuiSplitPanelInner = function _EuiSplitPanelInner(_ref) {
   return ___EmotionJSX(EuiPanel, _extends({
     element: "div",
     className: classes,
-    css: euiSplitPanelInnerStyles.euiSplitPanelInner
+    css: cssStyles
   }, panelProps, rest), children);
 };
 /**
@@ -50,16 +57,21 @@ export var _EuiSplitPanelOuter = function _EuiSplitPanelOuter(_ref2) {
     responsive = _ref2$responsive === void 0 ? ['xs', 's'] : _ref2$responsive,
     rest = _objectWithoutProperties(_ref2, _excluded2);
   var isResponsive = useIsWithinBreakpoints(responsive, !!responsive);
+  var responsiveDirection = direction === 'row' && !isResponsive ? 'row' : 'column';
+  var innerBorderDirection = _canRenderHighContrastBorder(_objectSpread({}, rest)) ? responsiveDirection : undefined;
   var styles = euiSplitPanelOuterStyles;
-  var cssStyles = [styles.euiSplitPanelOuter, direction === 'row' && !isResponsive ? styles.row : styles.column];
+  var cssStyles = [styles.euiSplitPanelOuter, styles[responsiveDirection]];
   var classes = classNames('euiSplitPanel', className);
   return ___EmotionJSX(EuiPanel, _extends({
     paddingSize: "none",
     grow: false,
     className: classes,
     css: cssStyles
-  }, rest), children);
+  }, rest), ___EmotionJSX(SplitPanelInnerBorderDirection.Provider, {
+    value: innerBorderDirection
+  }, children));
 };
+var SplitPanelInnerBorderDirection = /*#__PURE__*/createContext(undefined);
 export var EuiSplitPanel = {
   Outer: _EuiSplitPanelOuter,
   Inner: _EuiSplitPanelInner

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

@@ -9,6 +9,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css } from '@emotion/react';
 import { logicalCSS } from '../../../global_styling';
+import { highContrastModeStyles } from '../../../global_styling/functions/high_contrast';
 export var euiSplitPanelOuterStyles = {
   euiSplitPanelOuter: /*#__PURE__*/css("display:flex;", logicalCSS('min-width', 0), " overflow:hidden;;label:euiSplitPanelOuter;"),
   column: process.env.NODE_ENV === "production" ? {
@@ -28,13 +29,32 @@ export var euiSplitPanelOuterStyles = {
     toString: _EMOTION_STRINGIFIED_CSS_ERROR__
   }
 };
-export var euiSplitPanelInnerStyles = {
-  euiSplitPanelInner: process.env.NODE_ENV === "production" ? {
-    name: "1k62yu6-euiSplitPanelInner",
-    styles: "flex-basis:0%;transform:none!important;box-shadow:none!important;label:euiSplitPanelInner;"
-  } : {
-    name: "1k62yu6-euiSplitPanelInner",
-    styles: "flex-basis:0%;transform:none!important;box-shadow:none!important;label:euiSplitPanelInner;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-  }
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1k62yu6-euiSplitPanelInner",
+  styles: "flex-basis:0%;transform:none!important;box-shadow:none!important;label:euiSplitPanelInner;"
+} : {
+  name: "1k62yu6-euiSplitPanelInner",
+  styles: "flex-basis:0%;transform:none!important;box-shadow:none!important;label:euiSplitPanelInner;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var euiSplitPanelInnerStyles = function euiSplitPanelInnerStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiSplitPanelInner: _ref,
+    highContrastBorders: {
+      // Don't double up on borders in high contrast mode, but render
+      // border dividers between nested inner panels
+      _renderBorder: function _renderBorder(direction) {
+        return highContrastModeStyles(euiThemeContext, {
+          preferred: "\n            border: none;\n\n            &:not(:last-child) {\n              ".concat(logicalCSS("border-".concat(direction), euiTheme.border.thin), "\n              border-color: inherit; /* Attempt to inherit from parent panel */\n            }\n          ")
+        });
+      },
+      get column() {
+        return this._renderBorder('bottom');
+      },
+      get row() {
+        return this._renderBorder('right');
+      }
+    }
+  };
 };

package/optimize/es/components/popover/popover_arrow/_popover_arrow.styles.js

@@ -14,14 +14,15 @@ import { logicalSizeCSS } from '../../../global_styling';
 import { _popoverArrowStyles } from '../../../services/popover';
 export var euiPopoverArrowStyles = function euiPopoverArrowStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode,
     colorMode = euiThemeContext.colorMode;
-  var hasBorder = colorMode === 'DARK';
+  var hasBorder = highContrastMode || colorMode === 'DARK';
   var arrowSize = euiTheme.size.base;
   var arrowStyles = _popoverArrowStyles(euiThemeContext, arrowSize);
   return _objectSpread({
     // Wrapper
-    euiPopoverArrowWrapper: /*#__PURE__*/css("position:absolute;", logicalSizeCSS(arrowSize), ";;label:euiPopoverArrowWrapper;"),
+    euiPopoverArrowWrapper: /*#__PURE__*/css("position:absolute;z-index:1;", logicalSizeCSS(arrowSize), ";;label:euiPopoverArrowWrapper;"),
     // Base
-    euiPopoverArrow: /*#__PURE__*/css(arrowStyles._arrowStyles, " background-color:var(--euiPopoverBackgroundColor);", hasBorder ? "border: ".concat(euiTheme.border.thin) : '', ";;label:euiPopoverArrow;")
+    euiPopoverArrow: /*#__PURE__*/css(arrowStyles._arrowStyles, " background-color:var(--euiPopoverBackgroundColor);", hasBorder ? "border: ".concat(euiTheme.border.thin, ";") : '', ";;label:euiPopoverArrow;")
   }, arrowStyles.positions);
 };

package/optimize/es/components/popover/popover_footer.styles.js

@@ -9,10 +9,11 @@
 import { css } from '@emotion/react';
 import { euiFontSize, euiPaddingSize, logicalCSS, logicalShorthandCSS } from '../../global_styling';
 export var euiPopoverFooterStyles = function euiPopoverFooterStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   return {
     // Base
-    euiPopoverFooter: /*#__PURE__*/css(euiFontSize(euiThemeContext, 's'), " ", logicalCSS('border-top', "".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.components.popoverFooterBorderColor)), ";;label:euiPopoverFooter;"),
+    euiPopoverFooter: /*#__PURE__*/css(euiFontSize(euiThemeContext, 's'), " ", logicalCSS('border-top', "".concat(euiTheme.border.width.thin, " solid ").concat(highContrastMode ? euiTheme.border.color : euiTheme.components.popoverFooterBorderColor)), ";;label:euiPopoverFooter;"),
     // If the popover's containing panel has padding applied,
     // ensure the title expands to cover that padding via negative margins
     panelPaddingSizes: {

package/optimize/es/components/popover/popover_panel/_popover_panel.styles.js

@@ -10,6 +10,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 import { css } from '@emotion/react';
 import { euiShadow, euiShadowFlat, euiShadowMedium } from '@elastic/eui-theme-common';
 import { euiCanAnimate, logicalCSS, mathWithUnits } from '../../../global_styling';
+import { euiPanelBorderStyles } from '../../panel/panel.styles';
 export var openAnimationTiming = 'slow';
 
 /**
@@ -28,17 +29,17 @@ var _ref = process.env.NODE_ENV === "production" ? {
 };
 export var euiPopoverPanelStyles = function euiPopoverPanelStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
-    colorMode = euiThemeContext.colorMode;
+    highContrastMode = euiThemeContext.highContrastMode;
   var translateDistance = euiTheme.size.s;
   var animationSpeed = euiTheme.animation[openAnimationTiming];
   var opacityTransition = "opacity ".concat(euiTheme.animation.bounce, " ").concat(animationSpeed);
   var transformTransition = "transform ".concat(euiTheme.animation.bounce, " ").concat(mathWithUnits(animationSpeed, function (x) {
     return x + 100;
   }));
-  var hasVisibleBorder = colorMode === 'DARK';
+  var hasShadow = !highContrastMode;
   return {
     // Base
-    euiPopover__panel: /*#__PURE__*/css("position:absolute;", logicalCSS('min-width', "".concat(euiTheme.base * 7, "px")), logicalCSS('max-width', "calc(100vw - ".concat(euiTheme.size.xl, ")")), "backface-visibility:hidden;pointer-events:none;opacity:0;background-color:var(--euiPopoverBackgroundColor);border:", euiTheme.border.width.thin, " solid ", hasVisibleBorder ? euiTheme.border.color : 'transparent', ";", euiCanAnimate, "{transition:", opacityTransition, ",", transformTransition, ";}&:focus{outline-offset:0;};label:euiPopover__panel;"),
+    euiPopover__panel: /*#__PURE__*/css("position:absolute;", logicalCSS('min-width', "".concat(euiTheme.base * 7, "px")), logicalCSS('max-width', "calc(100vw - ".concat(euiTheme.size.xl, ")")), "backface-visibility:hidden;pointer-events:none;opacity:0;background-color:var(--euiPopoverBackgroundColor);", euiCanAnimate, "{transition:", opacityTransition, ",", transformTransition, ";}", euiPanelBorderStyles(euiThemeContext), " &:focus{outline-offset:0;};label:euiPopover__panel;"),
     isOpen: _ref,
     /* 4 */
     light: /*#__PURE__*/css("--euiPopoverBackgroundColor:", euiTheme.components.popoverPanelBackground, ";;label:light;"),
@@ -46,9 +47,9 @@ export var euiPopoverPanelStyles = function euiPopoverPanelStyles(euiThemeContex
     // Regular popover with an arrow, a transform animation/transition, and a
     // drop shadow via `filter` (which automatically handles the arrow)
     hasTransform: {
-      hasTransform: /*#__PURE__*/css("transform:translateY(0) translateX(0) translateZ(0);", euiShadowMedium(euiThemeContext, {
+      hasTransform: /*#__PURE__*/css("transform:translateY(0) translateX(0) translateZ(0);", hasShadow ? euiShadowMedium(euiThemeContext, {
         property: 'filter'
-      }), " ", euiCanAnimate, "{transition:", opacityTransition, ",", transformTransition, ";};label:hasTransform;"),
+      }) : '', " ", euiCanAnimate, "{transition:", opacityTransition, ",", transformTransition, ";};label:hasTransform;"),
       // Positions
       top: /*#__PURE__*/css("transform:translateY(", translateDistance, ") translateZ(0);;label:top;"),
       bottom: /*#__PURE__*/css("transform:translateY(-", translateDistance, ") translateZ(0);;label:bottom;"),
@@ -58,8 +59,8 @@ export var euiPopoverPanelStyles = function euiPopoverPanelStyles(euiThemeContex
     // No arrow, transform, or filters
     isAttached: {
       isAttached: /*#__PURE__*/css(euiCanAnimate, "{transition:", opacityTransition, ";};label:isAttached;"),
-      top: /*#__PURE__*/css(euiShadowFlat(euiThemeContext), ";;label:top;"),
-      bottom: /*#__PURE__*/css(euiShadow(euiThemeContext, 'm'), ";;label:bottom;"),
+      top: /*#__PURE__*/css(hasShadow ? euiShadowFlat(euiThemeContext) : '', ";;label:top;"),
+      bottom: /*#__PURE__*/css(hasShadow ? euiShadow(euiThemeContext, 'm') : '', ";;label:bottom;"),
       get left() {
         return this.bottom;
       },

package/optimize/es/components/progress/progress.js

@@ -9,7 +9,7 @@ var _excluded = ["className", "color", "size", "position", "max", "valueText", "
  * Side Public License, v 1.
  */
 
-import React, { Fragment } from 'react';
+import React from 'react';
 import classNames from 'classnames';
 import { EuiI18n } from '../i18n';
 import { EuiInnerText } from '../inner_text';
@@ -72,7 +72,7 @@ export var EuiProgress = function EuiProgress(_ref) {
   // See https://css-tricks.com/html5-progress-element/
 
   if (determinate) {
-    return ___EmotionJSX(Fragment, null, label || valueText ? ___EmotionJSX("div", {
+    return ___EmotionJSX(React.Fragment, null, label || valueText ? ___EmotionJSX("div", {
       css: dataCssStyles,
       className: "euiProgress__data"
     }, label && ___EmotionJSX(EuiInnerText, null, function (ref, innerText) {

package/optimize/es/components/progress/progress.styles.js

@@ -11,6 +11,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css, keyframes } from '@emotion/react';
 import { logicalCSS, logicalTextAlignCSS, euiCanAnimate, euiCantAnimate, euiFontSize, euiTextTruncate } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 import { makeHighContrastColor } from '../../services';
 import { euiText } from '../text/text.styles';
 
@@ -28,9 +29,10 @@ var indeterminateProgressValue = function indeterminateProgressValue(cssProperti
  * Color utilities
  */
 
-var nativeVsIndeterminateColor = function nativeVsIndeterminateColor(color, isNative) {
+var nativeVsIndeterminateColor = function nativeVsIndeterminateColor(color, isNative, highContrastMode) {
   var selectors = isNative ? crossBrowserProgressValue : indeterminateProgressValue;
-  return selectors("background-color: ".concat(color, ";"));
+  return "\n    ".concat(selectors("background-color: ".concat(color, ";")), "\n    ").concat(isNative && highContrastMode === 'preferred' // see highContrastModeStyles.preferred comment below
+  ? "border-color: ".concat(color, ";") : '', "\n  ").trim();
 };
 
 /**
@@ -56,46 +58,78 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   styles: "position:relative;label:static;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-export var euiProgressStyles = function euiProgressStyles(_ref3, isNative) {
-  var euiTheme = _ref3.euiTheme;
+export var euiProgressStyles = function euiProgressStyles(euiThemeContext, isNative) {
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
+  var backgroundColor = highContrastMode ? euiTheme.colors.emptyShade : euiTheme.colors.lightShade;
   return {
-    euiProgress: /*#__PURE__*/css("overflow:hidden;background-color:", euiTheme.colors.lightShade, ";;label:euiProgress;"),
+    euiProgress: /*#__PURE__*/css("overflow:hidden;background-color:", backgroundColor, ";;label:euiProgress;"),
     // https://css-tricks.com/html5-progress-element/
     // Good resource if you need to work in here. There's some gotchas with
     // dealing with cross-browser progress bars.
-    native: /*#__PURE__*/css("display:block;", logicalCSS('width', '100%'), " appearance:none;border:none;border-radius:", euiTheme.size.s, ";&::-webkit-progress-bar{background-color:", euiTheme.colors.lightShade, ";}", euiCanAnimate, "{/* Note: FF/Mozilla doesn't actually support animating the native progress bar\n        @see https://bugzilla.mozilla.org/show_bug.cgi?id=662351 */", crossBrowserProgressValue("transition: width ".concat(euiTheme.animation.normal, " linear")), ";};label:native;"),
+    native: /*#__PURE__*/css("display:block;", logicalCSS('width', '100%'), " &::-webkit-progress-bar{background-color:", backgroundColor, ";}", highContrastModeStyles(euiThemeContext, {
+      none: "\n          appearance: none;\n          border: none;\n          border-radius: ".concat(euiTheme.size.s, ";\n        "),
+      // For some reason we absolutely cannot set any border CSS in Windows high contrast
+      // or the native element stops rendering. However, we do want the extra border for
+      // MacOS high contrast, so #ternarylife
+      preferred: highContrastMode !== 'forced' ? "\n              border: ".concat(euiTheme.border.thin, ";\n              border-radius: ").concat(euiTheme.size.s, ";\n              ").concat(logicalCSS('min-height', euiTheme.size.s), "\n            ") :
+      // Increase small sizes, otherwise the border is hard to distinguish,
+      // However, native element heights seem to render differently,
+      // so we need to tweak the min-height accordingly
+      logicalCSS('min-height', euiTheme.size.m),
+      // Also doesn't render without this ¯\_(ツ)_/¯
+      forced: 'background-color: revert;'
+    }), " ", euiCanAnimate, "{/* Note: FF/Mozilla doesn't actually support animating the native progress bar\n          @see https://bugzilla.mozilla.org/show_bug.cgi?id=662351 */", crossBrowserProgressValue("transition: width ".concat(euiTheme.animation.normal, " linear")), ";};label:native;"),
     // An indeterminate bar has an unreliable end time. Because of a Firefox animation issue,
     // we apply this style to a <div> instead of a <progress> element.
     // See https://css-tricks.com/html5-progress-element/ for more info.
-    indeterminate: /*#__PURE__*/css("&::before{position:absolute;content:'';", logicalCSS('width', '100%'), " ", logicalCSS('top', 0), " ", logicalCSS('bottom', 0), " ", logicalCSS('left', 0), " transform:scaleX(0) translateX(0%);animation:", euiIndeterminateAnimation, " 1s ", euiTheme.animation.resistance, " infinite;", euiCantAnimate, "{animation-duration:2s;animation-timing-function:linear;}};label:indeterminate;"),
+    indeterminate: /*#__PURE__*/css("&::before{position:absolute;content:'';", logicalCSS('width', '100%'), " ", logicalCSS('top', 0), " ", logicalCSS('bottom', 0), " ", logicalCSS('left', 0), " transform:scaleX(0) translateX(0%);animation:", euiIndeterminateAnimation, " 1s ", euiTheme.animation.resistance, " infinite;", highContrastModeStyles(euiThemeContext, {
+      // Windows high contrast themes ignore backgrounds, so use a border instead
+      forced: "\n            ".concat(logicalCSS('border-top-style', 'solid'), "\n            ").concat(logicalCSS('border-top-color', 'transparent'), "\n          ")
+    }), ";", euiCantAnimate, "{animation-duration:2s;animation-timing-function:linear;}};label:indeterminate;"),
     // Sizes
-    xs: /*#__PURE__*/css(logicalCSS('height', euiTheme.size.xxs), ";;label:xs;"),
-    s: /*#__PURE__*/css(logicalCSS('height', euiTheme.size.xs), ";;label:s;"),
-    m: /*#__PURE__*/css(logicalCSS('height', euiTheme.size.s), ";;label:m;"),
-    l: /*#__PURE__*/css(logicalCSS('height', euiTheme.size.m), ";;label:l;"),
+    _sharedSizeCSS: function _sharedSizeCSS(size) {
+      return "\n      ".concat(logicalCSS('height', size), "\n      ").concat(highContrastModeStyles(euiThemeContext, {
+        forced: "\n          &::before {\n            ".concat(logicalCSS('border-top-width', size), "\n          }")
+      }), "\n    ");
+    },
+    get xs() {
+      return /*#__PURE__*/css(
+      // Increased visibility/size for high contrast modes
+      this._sharedSizeCSS(highContrastMode ? euiTheme.size.xs : euiTheme.size.xxs), ";label:xs;");
+    },
+    get s() {
+      return /*#__PURE__*/css(this._sharedSizeCSS(euiTheme.size.xs), ";label:s;");
+    },
+    get m() {
+      return /*#__PURE__*/css(this._sharedSizeCSS(euiTheme.size.s), ";label:m;");
+    },
+    get l() {
+      return /*#__PURE__*/css(this._sharedSizeCSS(euiTheme.size.m), ";label:l;");
+    },
     // Positioning
     fixed: /*#__PURE__*/css("position:fixed;z-index:", Number(euiTheme.levels.header) + 1, ";", nonStaticPositioning(isNative), ";;label:fixed;"),
-    absolute: /*#__PURE__*/css("position:absolute;", nonStaticPositioning(isNative), ";;label:absolute;"),
+    absolute: /*#__PURE__*/css("position:absolute;", nonStaticPositioning(isNative), " ", logicalCSS('border-top-left-radius', 'inherit'), " ", logicalCSS('border-top-right-radius', 'inherit'), ";;label:absolute;"),
     static: _ref2,
     // Colors
-    primary: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.primary, isNative), ";;label:primary;"),
-    success: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.success, isNative), ";;label:success;"),
-    warning: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.warning, isNative), ";;label:warning;"),
-    danger: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.danger, isNative), ";;label:danger;"),
-    subdued: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.subduedText, isNative), ";;label:subdued;"),
-    accent: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.accent, isNative), ";;label:accent;"),
-    accentSecondary: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.accentSecondary, isNative), ";;label:accentSecondary;"),
-    vis0: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis0, isNative), ";;label:vis0;"),
-    vis1: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis1, isNative), ";;label:vis1;"),
-    vis2: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis2, isNative), ";;label:vis2;"),
-    vis3: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis3, isNative), ";;label:vis3;"),
-    vis4: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis4, isNative), ";;label:vis4;"),
-    vis5: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis5, isNative), ";;label:vis5;"),
-    vis6: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis6, isNative), ";;label:vis6;"),
-    vis7: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis7, isNative), ";;label:vis7;"),
-    vis8: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis8, isNative), ";;label:vis8;"),
-    vis9: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis9, isNative), ";;label:vis9;"),
-    customColor: /*#__PURE__*/css(nativeVsIndeterminateColor('currentColor', isNative), ";;label:customColor;")
+    primary: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.primary, isNative, highContrastMode), ";;label:primary;"),
+    success: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.success, isNative, highContrastMode), ";;label:success;"),
+    warning: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.warning, isNative, highContrastMode), ";;label:warning;"),
+    danger: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.danger, isNative, highContrastMode), ";;label:danger;"),
+    subdued: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.textSubdued, isNative, highContrastMode), ";;label:subdued;"),
+    accent: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.accent, isNative, highContrastMode), ";;label:accent;"),
+    accentSecondary: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.accentSecondary, isNative, highContrastMode), ";;label:accentSecondary;"),
+    vis0: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis0, isNative, highContrastMode), ";;label:vis0;"),
+    vis1: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis1, isNative, highContrastMode), ";;label:vis1;"),
+    vis2: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis2, isNative, highContrastMode), ";;label:vis2;"),
+    vis3: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis3, isNative, highContrastMode), ";;label:vis3;"),
+    vis4: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis4, isNative, highContrastMode), ";;label:vis4;"),
+    vis5: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis5, isNative, highContrastMode), ";;label:vis5;"),
+    vis6: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis6, isNative, highContrastMode), ";;label:vis6;"),
+    vis7: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis7, isNative, highContrastMode), ";;label:vis7;"),
+    vis8: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis8, isNative, highContrastMode), ";;label:vis8;"),
+    vis9: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis9, isNative, highContrastMode), ";;label:vis9;"),
+    customColor: /*#__PURE__*/css(nativeVsIndeterminateColor('currentColor', isNative, highContrastMode), ";;label:customColor;")
   };
 };
 
@@ -120,8 +154,8 @@ var _ref = process.env.NODE_ENV === "production" ? {
   styles: "color:currentColor;label:customColor;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-export var euiProgressValueTextStyles = function euiProgressValueTextStyles(_ref4) {
-  var euiTheme = _ref4.euiTheme;
+export var euiProgressValueTextStyles = function euiProgressValueTextStyles(_ref3) {
+  var euiTheme = _ref3.euiTheme;
   return {
     euiProgress__valueText: /*#__PURE__*/css("flex-grow:1;flex-shrink:0;font-feature-settings:'tnum' 1;", logicalTextAlignCSS('right'), " ", euiTextTruncate(), ";;label:euiProgress__valueText;"),
     // Colors

package/optimize/es/components/provider/component_defaults/component_defaults.js

@@ -47,4 +47,17 @@ export var usePropsWithComponentDefaults = function usePropsWithComponentDefault
   return useMemo(function () {
     return _objectSpread(_objectSpread({}, componentDefaults), props);
   }, [componentDefaults, props]);
+};
+
+/*
+ * Utilities
+ */
+
+/**
+ * Used only to generate prop type definitions (via `@elastic/eui-docgen`) to document `EuiComponentDefaults` in a props table.
+ *
+ * @see https://github.com/elastic/eui/issues/8388
+ */
+export var EuiProviderComponentDefaultsProps = function EuiProviderComponentDefaultsProps() {
+  return ___EmotionJSX(React.Fragment, null);
 };

package/optimize/es/components/provider/provider.js

@@ -14,7 +14,7 @@ import { cache as fallbackCache } from '../../services/emotion/css';
 import { EuiGlobalStyles } from '../../global_styling/reset/global_styles';
 import { EuiUtilityClasses } from '../../global_styling/utility/utility';
 import { EuiCacheProvider } from './cache';
-import { EuiSystemColorModeProvider } from './system_color_mode';
+import { EuiSystemDefaultsProvider } from './system_defaults';
 import { EuiProviderNestedCheck, useIsNestedEuiProvider } from './nested';
 import { EuiComponentDefaultsProvider } from './component_defaults';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -32,6 +32,7 @@ export var EuiProvider = function EuiProvider(_ref) {
     _ref$utilityClasses = _ref.utilityClasses,
     Utilities = _ref$utilityClasses === void 0 ? EuiUtilityClasses : _ref$utilityClasses,
     colorMode = _ref.colorMode,
+    highContrastMode = _ref.highContrastMode,
     modify = _ref.modify,
     componentDefaults = _ref.componentDefaults,
     children = _ref.children;
@@ -65,19 +66,18 @@ export var EuiProvider = function EuiProvider(_ref) {
   }
   return ___EmotionJSX(EuiProviderNestedCheck, null, ___EmotionJSX(EuiCacheProvider, {
     cache: (_defaultCache = defaultCache) !== null && _defaultCache !== void 0 ? _defaultCache : fallbackCache
-  }, ___EmotionJSX(EuiSystemColorModeProvider, null, function (systemColorMode) {
-    return ___EmotionJSX(EuiThemeProvider, {
-      theme: theme !== null && theme !== void 0 ? theme : undefined,
-      colorMode: colorMode !== null && colorMode !== void 0 ? colorMode : systemColorMode,
-      modify: modify
-    }, theme && ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiCacheProvider, {
-      cache: globalCache,
-      children: Globals && ___EmotionJSX(Globals, null)
-    }), ___EmotionJSX(EuiCacheProvider, {
-      cache: utilityCache,
-      children: Utilities && ___EmotionJSX(Utilities, null)
-    })), ___EmotionJSX(EuiComponentDefaultsProvider, {
-      componentDefaults: componentDefaults
-    }, children));
-  })));
+  }, ___EmotionJSX(EuiSystemDefaultsProvider, null, ___EmotionJSX(EuiThemeProvider, {
+    theme: theme !== null && theme !== void 0 ? theme : undefined,
+    colorMode: colorMode,
+    highContrastMode: highContrastMode,
+    modify: modify
+  }, theme && ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiCacheProvider, {
+    cache: globalCache,
+    children: Globals && ___EmotionJSX(Globals, null)
+  }), ___EmotionJSX(EuiCacheProvider, {
+    cache: utilityCache,
+    children: Utilities && ___EmotionJSX(Utilities, null)
+  })), ___EmotionJSX(EuiComponentDefaultsProvider, {
+    componentDefaults: componentDefaults
+  }, children)))));
 };

package/optimize/es/components/provider/{system_color_mode → system_defaults}/index.js

@@ -6,4 +6,5 @@
  * Side Public License, v 1.
  */
 
-export { EuiSystemColorModeProvider } from './system_color_mode_provider';
+export { EuiSystemDefaultsProvider } from './system_defaults_provider';
+export { useWindowMediaMatcher } from './match_media_hook';