@elastic/eui 100.0.0 → 101.0.1

package/test-env/components/modal/modal.styles.js

@@ -19,11 +19,14 @@ var _form = require("../form/form.styles");
 var euiModalStyles = exports.euiModalStyles = function euiModalStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiModal: /*#__PURE__*/(0, _react.css)((0, _euiThemeCommon.euiShadowXLarge)(euiThemeContext), " display:flex;flex-direction:column;max-block-size:75vh;position:relative;background-color:", euiTheme.colors.emptyShade, ";border-radius:", euiTheme.border.radius.medium, ";border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.borderBaseFloating, ";z-index:", euiTheme.levels.modal, ";min-inline-size:", (0, _form.euiFormVariables)(euiThemeContext).maxWidth, ";max-inline-size:calc(100vw - ", euiTheme.size.base, ");overflow:hidden;", _global_styling.euiCanAnimate, "{animation:", (0, _global_styling.euiAnimSlideInUp)(euiTheme.size.xxl), " ", euiTheme.animation.slow, " ", euiTheme.animation.bounce, ";}", (0, _global_styling.euiMaxBreakpoint)(euiThemeContext, 'm'), "{position:fixed;inset:0;border-radius:0;inline-size:100vw!important;min-inline-size:0!important;max-inline-size:none!important;max-block-size:100vh!important;}&:focus{outline:none;};label:euiModal;"),
+    euiModal: /*#__PURE__*/(0, _react.css)((0, _euiThemeCommon.euiShadowXLarge)(euiThemeContext, {
+      borderAllInHighContrastMode: true
+    }), " display:flex;flex-direction:column;max-block-size:75vh;position:relative;background-color:", euiTheme.colors.emptyShade, ";border-radius:", euiTheme.border.radius.medium, ";border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.borderBaseFloating, ";z-index:", euiTheme.levels.modal, ";min-inline-size:", (0, _form.euiFormVariables)(euiThemeContext).maxWidth, ";max-inline-size:calc(100vw - ", euiTheme.size.base, ");overflow:hidden;", _global_styling.euiCanAnimate, "{animation:", (0, _global_styling.euiAnimSlideInUp)(euiTheme.size.xxl), " ", euiTheme.animation.slow, " ", euiTheme.animation.bounce, ";}", (0, _global_styling.euiMaxBreakpoint)(euiThemeContext, 'm'), "{position:fixed;inset:0;border-radius:0;inline-size:100vw!important;min-inline-size:0!important;max-inline-size:none!important;max-block-size:100vh!important;}&:focus{outline:none;};label:euiModal;"),
     // Variants
     defaultMaxWidth: /*#__PURE__*/(0, _react.css)("max-inline-size:min(\n        ", euiTheme.breakpoint.m, "px,\n        calc(100vw - ", euiTheme.size.base, ")\n      );;label:defaultMaxWidth;"),
     confirmation: /*#__PURE__*/(0, _react.css)("min-inline-size:", (0, _form.euiFormVariables)(euiThemeContext).maxWidth, ";", (0, _global_styling.euiMaxBreakpoint)(euiThemeContext, 'm'), "{", (0, _euiThemeCommon.euiShadowXLarge)(euiThemeContext, {
-      reverse: true
+      reverse: true,
+      borderAllInHighContrastMode: true
     }), " inset-block-start:auto;};label:confirmation;"),
     euiModal__closeIcon: /*#__PURE__*/(0, _react.css)("position:absolute;inset-inline-end:", euiTheme.size.xs, ";inset-block-start:", euiTheme.size.xs, ";z-index:3;;label:euiModal__closeIcon;")
   };

package/test-env/components/overlay_mask/overlay_mask.styles.js

@@ -15,9 +15,10 @@ var _global_styling = require("../../global_styling");
  */
 
 var euiOverlayMaskStyles = exports.euiOverlayMaskStyles = function euiOverlayMaskStyles(_ref) {
-  var euiTheme = _ref.euiTheme;
+  var euiTheme = _ref.euiTheme,
+    highContrastMode = _ref.highContrastMode;
   return {
-    euiOverlayMask: /*#__PURE__*/(0, _css.css)("position:fixed;", (0, _global_styling.logicalCSS)('top', 0), " ", (0, _global_styling.logicalCSS)('left', 0), " ", (0, _global_styling.logicalCSS)('right', 0), " ", (0, _global_styling.logicalCSS)('bottom', 0), " display:flex;align-items:center;justify-content:center;", (0, _global_styling.logicalCSS)('padding-bottom', '10vh'), " animation:", _global_styling.euiAnimFadeIn, " ", euiTheme.animation.fast, " ease-in;background:", euiTheme.colors.backgroundBaseInteractiveOverlay, ";;label:euiOverlayMask;"),
+    euiOverlayMask: /*#__PURE__*/(0, _css.css)("position:fixed;", (0, _global_styling.logicalCSS)('top', 0), " ", (0, _global_styling.logicalCSS)('left', 0), " ", (0, _global_styling.logicalCSS)('right', 0), " ", (0, _global_styling.logicalCSS)('bottom', 0), " display:flex;align-items:center;justify-content:center;", (0, _global_styling.logicalCSS)('padding-bottom', '10vh'), " animation:", _global_styling.euiAnimFadeIn, " ", euiTheme.animation.fast, " ease-in;background:", highContrastMode ? euiTheme.components.overlayMaskBackgroundHighContrast : euiTheme.components.overlayMaskBackground, ";;label:euiOverlayMask;"),
     aboveHeader: /*#__PURE__*/(0, _css.css)("z-index:", euiTheme.levels.mask, ";;label:aboveHeader;"),
     belowHeader: /*#__PURE__*/(0, _css.css)("z-index:", euiTheme.levels.maskBelowHeader, ";", (0, _global_styling.logicalCSS)('top', 'var(--euiFixedHeadersOffset, 0)'), ";;label:belowHeader;")
   };

package/test-env/components/panel/panel.js

@@ -4,9 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SIZES = exports.EuiPanel = exports.COLORS = exports.BORDER_RADII = void 0;
+exports._canRenderHighContrastBorder = exports.SIZES = exports.EuiPanel = exports.COLORS = exports.BORDER_RADII = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -55,11 +56,22 @@ var EuiPanel = exports.EuiPanel = function EuiPanel(_ref) {
     panelRef = _ref.panelRef,
     element = _ref.element,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  // Add borders to panels in high contrast mode
+  var _useEuiTheme = (0, _services.useEuiTheme)(),
+    highContrastMode = _useEuiTheme.highContrastMode,
+    euiTheme = _useEuiTheme.euiTheme;
+  var borderColors = (0, _global_styling.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 = (0, _services.useEuiMemoizedStyles)(_panel.euiPanelStyles);
-  var cssStyles = [styles.euiPanel, grow && styles.grow, styles.radius[borderRadius], (0, _global_styling.useEuiPaddingCSS)()[paddingSize], (0, _global_styling.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], (0, _global_styling.useEuiPaddingCSS)()[paddingSize], (0, _global_styling.useEuiBackgroundColorCSS)()[color], canHaveShadow && hasShadow === true && styles.hasShadow, canHaveBorder && hasBorder === true && styles.hasBorder].concat((0, _toConsumableArray2.default)(highContrastMode && _canRenderHighContrastBorder({
+    color: color,
+    hasBorder: hasBorder
+  }) ? [{
+    border: euiTheme.border.thin
+  }, borderColors[color]] : []), [rest.onClick && styles.isClickable]);
   var classes = (0, _classnames.default)('euiPanel', "euiPanel--".concat(color), (0, _defineProperty2.default)({}, "euiPanel--".concat(paddingSizeToClassNameMap[paddingSize]), paddingSizeToClassNameMap[paddingSize]), className);
   if (rest.onClick && element !== 'div') {
     return (0, _react2.jsx)("button", (0, _extends2.default)({
@@ -74,6 +86,9 @@ var EuiPanel = exports.EuiPanel = function EuiPanel(_ref) {
     css: cssStyles
   }, rest), children);
 };
+
+// Do not render a high contrast border if the panel is transparent
+// and does not have a default contrast border
 EuiPanel.propTypes = {
   element: _propTypes.default.oneOfType([_propTypes.default.oneOf(["button"]), _propTypes.default.oneOf(["div"])]),
   /**
@@ -129,4 +144,9 @@ EuiPanel.propTypes = {
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
   css: _propTypes.default.any
+};
+var _canRenderHighContrastBorder = exports._canRenderHighContrastBorder = function _canRenderHighContrastBorder(_ref2) {
+  var color = _ref2.color,
+    hasBorder = _ref2.hasBorder;
+  return !(color === 'transparent' && !hasBorder);
 };

package/test-env/components/panel/panel.styles.js

@@ -3,10 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiPanelStyles = void 0;
+exports.euiPanelStyles = exports.euiPanelBorderStyles = void 0;
 var _react = require("@emotion/react");
 var _euiThemeCommon = require("@elastic/eui-theme-common");
 var _global_styling = require("../../global_styling");
+var _high_contrast = require("../../global_styling/functions/high_contrast");
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -14,6 +15,22 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+var euiPanelBorderStyles = exports.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 (0, _high_contrast.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;"
@@ -23,27 +40,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__
 };
 var euiPanelStyles = exports.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__*/(0, _react.css)((0, _euiThemeCommon.euiShadow)(euiThemeContext, 'm'), " ", borderStyle, ";;label:hasShadow;"),
-    hasBorder: /*#__PURE__*/(0, _react.css)("border:", euiTheme.border.thin, ";;label:hasBorder;"),
+    hasShadow: /*#__PURE__*/(0, _react.css)((0, _euiThemeCommon.euiShadow)(euiThemeContext, 'm'), " ", euiPanelBorderStyles(euiThemeContext, {
+      hasFloatingBorder: false
+    }), ";;label:hasShadow;"),
+    hasBorder: /*#__PURE__*/(0, _react.css)(euiPanelBorderStyles(euiThemeContext, {
+      borderColor: euiTheme.border.color,
+      hasFloatingBorder: false
+    }), ";;label:hasBorder;"),
     radius: {
       none: /*#__PURE__*/(0, _react.css)(";label:none;"),
       m: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";;label:m;")
     },
     // Setup interactive behavior
-    isClickable: /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{transition:box-shadow ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ",transform ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";}&:enabled{display:block;", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalTextAlignCSS)('left'), ";}&:hover,&:focus{", (0, _euiThemeCommon.euiShadow)(euiThemeContext, 'l'), " transform:translateY(-2px);cursor:pointer;};label:isClickable;")
+    isClickable: /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{transition:box-shadow ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ",transform ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";}&:enabled{display:block;", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalTextAlignCSS)('left'), ";}&:hover,&:focus{", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+      none: (0, _euiThemeCommon.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/test-env/components/panel/split_panel/split_panel.js

@@ -1,16 +1,19 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports._EuiSplitPanelOuter = exports._EuiSplitPanelInner = exports.EuiSplitPanel = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _breakpoint = require("../../../services/breakpoint");
+var _services = require("../../../services");
 var _panel = require("../panel");
 var _split_panel = require("./split_panel.styles");
 var _react2 = require("@emotion/react");
@@ -23,6 +26,10 @@ var _excluded = ["children", "className"],
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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) { (0, _defineProperty2.default)(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; }
 /**
  * Consumed via `EuiSplitPanel.Inner`.
  * Extends most `EuiPanelProps`.
@@ -31,7 +38,10 @@ var _EuiSplitPanelInner = exports._EuiSplitPanelInner = function _EuiSplitPanelI
   var children = _ref.children,
     className = _ref.className,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var borderDirection = (0, _react.useContext)(SplitPanelInnerBorderDirection);
   var classes = (0, _classnames.default)('euiSplitPanel__inner', className);
+  var styles = (0, _services.useEuiMemoizedStyles)(_split_panel.euiSplitPanelInnerStyles);
+  var cssStyles = [styles.euiSplitPanelInner, borderDirection && styles.highContrastBorders[borderDirection]];
   var panelProps = {
     hasShadow: false,
     color: 'transparent',
@@ -41,7 +51,7 @@ var _EuiSplitPanelInner = exports._EuiSplitPanelInner = function _EuiSplitPanelI
   return (0, _react2.jsx)(_panel.EuiPanel, (0, _extends2.default)({
     element: "div",
     className: classes,
-    css: _split_panel.euiSplitPanelInnerStyles.euiSplitPanelInner
+    css: cssStyles
   }, panelProps, rest), children);
 };
 _EuiSplitPanelInner.propTypes = {
@@ -77,15 +87,19 @@ var _EuiSplitPanelOuter = exports._EuiSplitPanelOuter = function _EuiSplitPanelO
     responsive = _ref2$responsive === void 0 ? ['xs', 's'] : _ref2$responsive,
     rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
   var isResponsive = (0, _breakpoint.useIsWithinBreakpoints)(responsive, !!responsive);
+  var responsiveDirection = direction === 'row' && !isResponsive ? 'row' : 'column';
+  var innerBorderDirection = (0, _panel._canRenderHighContrastBorder)(_objectSpread({}, rest)) ? responsiveDirection : undefined;
   var styles = _split_panel.euiSplitPanelOuterStyles;
-  var cssStyles = [styles.euiSplitPanelOuter, direction === 'row' && !isResponsive ? styles.row : styles.column];
+  var cssStyles = [styles.euiSplitPanelOuter, styles[responsiveDirection]];
   var classes = (0, _classnames.default)('euiSplitPanel', className);
   return (0, _react2.jsx)(_panel.EuiPanel, (0, _extends2.default)({
     paddingSize: "none",
     grow: false,
     className: classes,
     css: cssStyles
-  }, rest), children);
+  }, rest), (0, _react2.jsx)(SplitPanelInnerBorderDirection.Provider, {
+    value: innerBorderDirection
+  }, children));
 };
 _EuiSplitPanelOuter.propTypes = {
   /**
@@ -102,6 +116,7 @@ _EuiSplitPanelOuter.propTypes = {
      */
   responsive: _propTypes.default.oneOfType([_propTypes.default.oneOf([false]), _propTypes.default.arrayOf(_propTypes.default.any.isRequired).isRequired])
 };
+var SplitPanelInnerBorderDirection = /*#__PURE__*/(0, _react.createContext)(undefined);
 var EuiSplitPanel = exports.EuiSplitPanel = {
   Outer: _EuiSplitPanelOuter,
   Inner: _EuiSplitPanelInner

package/test-env/components/panel/split_panel/split_panel.styles.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiSplitPanelOuterStyles = exports.euiSplitPanelInnerStyles = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../../global_styling");
+var _high_contrast = require("../../../global_styling/functions/high_contrast");
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -32,13 +33,32 @@ var euiSplitPanelOuterStyles = exports.euiSplitPanelOuterStyles = {
     toString: _EMOTION_STRINGIFIED_CSS_ERROR__
   }
 };
-var euiSplitPanelInnerStyles = exports.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__
+};
+var euiSplitPanelInnerStyles = exports.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 (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+          preferred: "\n            border: none;\n\n            &:not(:last-child) {\n              ".concat((0, _global_styling.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/test-env/components/popover/popover_arrow/_popover_arrow.styles.js

@@ -19,14 +19,15 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  */
 var euiPopoverArrowStyles = exports.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 = (0, _popover._popoverArrowStyles)(euiThemeContext, arrowSize);
   return _objectSpread({
     // Wrapper
-    euiPopoverArrowWrapper: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalSizeCSS)(arrowSize), ";;label:euiPopoverArrowWrapper;"),
+    euiPopoverArrowWrapper: /*#__PURE__*/(0, _react.css)("position:absolute;z-index:1;", (0, _global_styling.logicalSizeCSS)(arrowSize), ";;label:euiPopoverArrowWrapper;"),
     // Base
-    euiPopoverArrow: /*#__PURE__*/(0, _react.css)(arrowStyles._arrowStyles, " background-color:var(--euiPopoverBackgroundColor);", hasBorder ? "border: ".concat(euiTheme.border.thin) : '', ";;label:euiPopoverArrow;")
+    euiPopoverArrow: /*#__PURE__*/(0, _react.css)(arrowStyles._arrowStyles, " background-color:var(--euiPopoverBackgroundColor);", hasBorder ? "border: ".concat(euiTheme.border.thin, ";") : '', ";;label:euiPopoverArrow;")
   }, arrowStyles.positions);
 };

package/test-env/components/popover/popover_footer.styles.js

@@ -15,10 +15,11 @@ var _global_styling = require("../../global_styling");
  */
 
 var euiPopoverFooterStyles = exports.euiPopoverFooterStyles = function euiPopoverFooterStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   return {
     // Base
-    euiPopoverFooter: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 's'), " ", (0, _global_styling.logicalCSS)('border-top', "".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.components.popoverFooterBorderColor)), ";;label:euiPopoverFooter;"),
+    euiPopoverFooter: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 's'), " ", (0, _global_styling.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/test-env/components/popover/popover_panel/_popover_panel.styles.js

@@ -7,6 +7,7 @@ exports.openAnimationTiming = exports.euiPopoverPanelStyles = void 0;
 var _react = require("@emotion/react");
 var _euiThemeCommon = require("@elastic/eui-theme-common");
 var _global_styling = require("../../../global_styling");
+var _panel = require("../../panel/panel.styles");
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -32,17 +33,17 @@ var _ref = process.env.NODE_ENV === "production" ? {
 };
 var euiPopoverPanelStyles = exports.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((0, _global_styling.mathWithUnits)(animationSpeed, function (x) {
     return x + 100;
   }));
-  var hasVisibleBorder = colorMode === 'DARK';
+  var hasShadow = !highContrastMode;
   return {
     // Base
-    euiPopover__panel: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('min-width', "".concat(euiTheme.base * 7, "px")), (0, _global_styling.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', ";", _global_styling.euiCanAnimate, "{transition:", opacityTransition, ",", transformTransition, ";}&:focus{outline-offset:0;};label:euiPopover__panel;"),
+    euiPopover__panel: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('min-width', "".concat(euiTheme.base * 7, "px")), (0, _global_styling.logicalCSS)('max-width', "calc(100vw - ".concat(euiTheme.size.xl, ")")), "backface-visibility:hidden;pointer-events:none;opacity:0;background-color:var(--euiPopoverBackgroundColor);", _global_styling.euiCanAnimate, "{transition:", opacityTransition, ",", transformTransition, ";}", (0, _panel.euiPanelBorderStyles)(euiThemeContext), " &:focus{outline-offset:0;};label:euiPopover__panel;"),
     isOpen: _ref,
     /* 4 */
     light: /*#__PURE__*/(0, _react.css)("--euiPopoverBackgroundColor:", euiTheme.components.popoverPanelBackground, ";;label:light;"),
@@ -50,9 +51,9 @@ var euiPopoverPanelStyles = exports.euiPopoverPanelStyles = function euiPopoverP
     // Regular popover with an arrow, a transform animation/transition, and a
     // drop shadow via `filter` (which automatically handles the arrow)
     hasTransform: {
-      hasTransform: /*#__PURE__*/(0, _react.css)("transform:translateY(0) translateX(0) translateZ(0);", (0, _euiThemeCommon.euiShadowMedium)(euiThemeContext, {
+      hasTransform: /*#__PURE__*/(0, _react.css)("transform:translateY(0) translateX(0) translateZ(0);", hasShadow ? (0, _euiThemeCommon.euiShadowMedium)(euiThemeContext, {
         property: 'filter'
-      }), " ", _global_styling.euiCanAnimate, "{transition:", opacityTransition, ",", transformTransition, ";};label:hasTransform;"),
+      }) : '', " ", _global_styling.euiCanAnimate, "{transition:", opacityTransition, ",", transformTransition, ";};label:hasTransform;"),
       // Positions
       top: /*#__PURE__*/(0, _react.css)("transform:translateY(", translateDistance, ") translateZ(0);;label:top;"),
       bottom: /*#__PURE__*/(0, _react.css)("transform:translateY(-", translateDistance, ") translateZ(0);;label:bottom;"),
@@ -62,8 +63,8 @@ var euiPopoverPanelStyles = exports.euiPopoverPanelStyles = function euiPopoverP
     // No arrow, transform, or filters
     isAttached: {
       isAttached: /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{transition:", opacityTransition, ";};label:isAttached;"),
-      top: /*#__PURE__*/(0, _react.css)((0, _euiThemeCommon.euiShadowFlat)(euiThemeContext), ";;label:top;"),
-      bottom: /*#__PURE__*/(0, _react.css)((0, _euiThemeCommon.euiShadow)(euiThemeContext, 'm'), ";;label:bottom;"),
+      top: /*#__PURE__*/(0, _react.css)(hasShadow ? (0, _euiThemeCommon.euiShadowFlat)(euiThemeContext) : '', ";;label:top;"),
+      bottom: /*#__PURE__*/(0, _react.css)(hasShadow ? (0, _euiThemeCommon.euiShadow)(euiThemeContext, 'm') : '', ";;label:bottom;"),
       get left() {
         return this.bottom;
       },

package/test-env/components/progress/progress.js

@@ -1,14 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SIZES = exports.POSITIONS = exports.EuiProgress = exports.COLORS = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _i18n = require("../i18n");
@@ -25,8 +24,6 @@ var _excluded = ["className", "color", "size", "position", "max", "valueText", "
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var SIZES = exports.SIZES = ['xs', 's', 'm', 'l'];
 var COLORS = exports.COLORS = ['primary', 'success', 'warning', 'danger', 'subdued', 'accent', 'accentSecondary', 'vis0', 'vis1', 'vis2', 'vis3', 'vis4', 'vis5', 'vis6', 'vis7', 'vis8', 'vis9'];
 var POSITIONS = exports.POSITIONS = ['fixed', 'absolute', 'static'];
@@ -82,7 +79,7 @@ var EuiProgress = exports.EuiProgress = function EuiProgress(_ref) {
   // See https://css-tricks.com/html5-progress-element/
 
   if (determinate) {
-    return (0, _react2.jsx)(_react.Fragment, null, label || valueText ? (0, _react2.jsx)("div", {
+    return (0, _react2.jsx)(_react.default.Fragment, null, label || valueText ? (0, _react2.jsx)("div", {
       css: dataCssStyles,
       className: "euiProgress__data"
     }, label && (0, _react2.jsx)(_inner_text.EuiInnerText, null, function (ref, innerText) {

package/test-env/components/progress/progress.styles.js

@@ -8,6 +8,7 @@ exports.euiProgressValueTextStyles = exports.euiProgressStyles = exports.euiProg
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
+var _high_contrast = require("../../global_styling/functions/high_contrast");
 var _services = require("../../services");
 var _text = require("../text/text.styles");
 var _templateObject;
@@ -32,9 +33,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();
 };
 
 /**
@@ -60,46 +62,78 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   styles: "position:relative;label:static;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var euiProgressStyles = exports.euiProgressStyles = function euiProgressStyles(_ref3, isNative) {
-  var euiTheme = _ref3.euiTheme;
+var euiProgressStyles = exports.euiProgressStyles = function euiProgressStyles(euiThemeContext, isNative) {
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
+  var backgroundColor = highContrastMode ? euiTheme.colors.emptyShade : euiTheme.colors.lightShade;
   return {
-    euiProgress: /*#__PURE__*/(0, _react.css)("overflow:hidden;background-color:", euiTheme.colors.lightShade, ";;label:euiProgress;"),
+    euiProgress: /*#__PURE__*/(0, _react.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__*/(0, _react.css)("display:block;", (0, _global_styling.logicalCSS)('width', '100%'), " appearance:none;border:none;border-radius:", euiTheme.size.s, ";&::-webkit-progress-bar{background-color:", euiTheme.colors.lightShade, ";}", _global_styling.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__*/(0, _react.css)("display:block;", (0, _global_styling.logicalCSS)('width', '100%'), " &::-webkit-progress-bar{background-color:", backgroundColor, ";}", (0, _high_contrast.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((0, _global_styling.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
+      (0, _global_styling.logicalCSS)('min-height', euiTheme.size.m),
+      // Also doesn't render without this ¯\_(ツ)_/¯
+      forced: 'background-color: revert;'
+    }), " ", _global_styling.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__*/(0, _react.css)("&::before{position:absolute;content:'';", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalCSS)('top', 0), " ", (0, _global_styling.logicalCSS)('bottom', 0), " ", (0, _global_styling.logicalCSS)('left', 0), " transform:scaleX(0) translateX(0%);animation:", euiIndeterminateAnimation, " 1s ", euiTheme.animation.resistance, " infinite;", _global_styling.euiCantAnimate, "{animation-duration:2s;animation-timing-function:linear;}};label:indeterminate;"),
+    indeterminate: /*#__PURE__*/(0, _react.css)("&::before{position:absolute;content:'';", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalCSS)('top', 0), " ", (0, _global_styling.logicalCSS)('bottom', 0), " ", (0, _global_styling.logicalCSS)('left', 0), " transform:scaleX(0) translateX(0%);animation:", euiIndeterminateAnimation, " 1s ", euiTheme.animation.resistance, " infinite;", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+      // Windows high contrast themes ignore backgrounds, so use a border instead
+      forced: "\n            ".concat((0, _global_styling.logicalCSS)('border-top-style', 'solid'), "\n            ").concat((0, _global_styling.logicalCSS)('border-top-color', 'transparent'), "\n          ")
+    }), ";", _global_styling.euiCantAnimate, "{animation-duration:2s;animation-timing-function:linear;}};label:indeterminate;"),
     // Sizes
-    xs: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', euiTheme.size.xxs), ";;label:xs;"),
-    s: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', euiTheme.size.xs), ";;label:s;"),
-    m: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', euiTheme.size.s), ";;label:m;"),
-    l: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', euiTheme.size.m), ";;label:l;"),
+    _sharedSizeCSS: function _sharedSizeCSS(size) {
+      return "\n      ".concat((0, _global_styling.logicalCSS)('height', size), "\n      ").concat((0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+        forced: "\n          &::before {\n            ".concat((0, _global_styling.logicalCSS)('border-top-width', size), "\n          }")
+      }), "\n    ");
+    },
+    get xs() {
+      return /*#__PURE__*/(0, _react.css)(
+      // Increased visibility/size for high contrast modes
+      this._sharedSizeCSS(highContrastMode ? euiTheme.size.xs : euiTheme.size.xxs), ";label:xs;");
+    },
+    get s() {
+      return /*#__PURE__*/(0, _react.css)(this._sharedSizeCSS(euiTheme.size.xs), ";label:s;");
+    },
+    get m() {
+      return /*#__PURE__*/(0, _react.css)(this._sharedSizeCSS(euiTheme.size.s), ";label:m;");
+    },
+    get l() {
+      return /*#__PURE__*/(0, _react.css)(this._sharedSizeCSS(euiTheme.size.m), ";label:l;");
+    },
     // Positioning
     fixed: /*#__PURE__*/(0, _react.css)("position:fixed;z-index:", Number(euiTheme.levels.header) + 1, ";", nonStaticPositioning(isNative), ";;label:fixed;"),
-    absolute: /*#__PURE__*/(0, _react.css)("position:absolute;", nonStaticPositioning(isNative), ";;label:absolute;"),
+    absolute: /*#__PURE__*/(0, _react.css)("position:absolute;", nonStaticPositioning(isNative), " ", (0, _global_styling.logicalCSS)('border-top-left-radius', 'inherit'), " ", (0, _global_styling.logicalCSS)('border-top-right-radius', 'inherit'), ";;label:absolute;"),
     static: _ref2,
     // Colors
-    primary: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(euiTheme.colors.primary, isNative), ";;label:primary;"),
-    success: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(euiTheme.colors.success, isNative), ";;label:success;"),
-    warning: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(euiTheme.colors.warning, isNative), ";;label:warning;"),
-    danger: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(euiTheme.colors.danger, isNative), ";;label:danger;"),
-    subdued: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(euiTheme.colors.subduedText, isNative), ";;label:subdued;"),
-    accent: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(euiTheme.colors.accent, isNative), ";;label:accent;"),
-    accentSecondary: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(euiTheme.colors.accentSecondary, isNative), ";;label:accentSecondary;"),
-    vis0: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis0, isNative), ";;label:vis0;"),
-    vis1: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis1, isNative), ";;label:vis1;"),
-    vis2: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis2, isNative), ";;label:vis2;"),
-    vis3: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis3, isNative), ";;label:vis3;"),
-    vis4: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis4, isNative), ";;label:vis4;"),
-    vis5: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis5, isNative), ";;label:vis5;"),
-    vis6: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis6, isNative), ";;label:vis6;"),
-    vis7: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis7, isNative), ";;label:vis7;"),
-    vis8: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis8, isNative), ";;label:vis8;"),
-    vis9: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis9, isNative), ";;label:vis9;"),
-    customColor: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor('currentColor', isNative), ";;label:customColor;")
+    primary: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(euiTheme.colors.primary, isNative, highContrastMode), ";;label:primary;"),
+    success: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(euiTheme.colors.success, isNative, highContrastMode), ";;label:success;"),
+    warning: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(euiTheme.colors.warning, isNative, highContrastMode), ";;label:warning;"),
+    danger: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(euiTheme.colors.danger, isNative, highContrastMode), ";;label:danger;"),
+    subdued: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(euiTheme.colors.textSubdued, isNative, highContrastMode), ";;label:subdued;"),
+    accent: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(euiTheme.colors.accent, isNative, highContrastMode), ";;label:accent;"),
+    accentSecondary: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(euiTheme.colors.accentSecondary, isNative, highContrastMode), ";;label:accentSecondary;"),
+    vis0: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis0, isNative, highContrastMode), ";;label:vis0;"),
+    vis1: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis1, isNative, highContrastMode), ";;label:vis1;"),
+    vis2: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis2, isNative, highContrastMode), ";;label:vis2;"),
+    vis3: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis3, isNative, highContrastMode), ";;label:vis3;"),
+    vis4: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis4, isNative, highContrastMode), ";;label:vis4;"),
+    vis5: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis5, isNative, highContrastMode), ";;label:vis5;"),
+    vis6: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis6, isNative, highContrastMode), ";;label:vis6;"),
+    vis7: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis7, isNative, highContrastMode), ";;label:vis7;"),
+    vis8: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis8, isNative, highContrastMode), ";;label:vis8;"),
+    vis9: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis9, isNative, highContrastMode), ";;label:vis9;"),
+    customColor: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor('currentColor', isNative, highContrastMode), ";;label:customColor;")
   };
 };
 
@@ -124,8 +158,8 @@ var _ref = process.env.NODE_ENV === "production" ? {
   styles: "color:currentColor;label:customColor;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var euiProgressValueTextStyles = exports.euiProgressValueTextStyles = function euiProgressValueTextStyles(_ref4) {
-  var euiTheme = _ref4.euiTheme;
+var euiProgressValueTextStyles = exports.euiProgressValueTextStyles = function euiProgressValueTextStyles(_ref3) {
+  var euiTheme = _ref3.euiTheme;
   return {
     euiProgress__valueText: /*#__PURE__*/(0, _react.css)("flex-grow:1;flex-shrink:0;font-feature-settings:'tnum' 1;", (0, _global_styling.logicalTextAlignCSS)('right'), " ", (0, _global_styling.euiTextTruncate)(), ";;label:euiProgress__valueText;"),
     // Colors