@elastic/eui 100.0.0 → 101.0.0

package/lib/components/markdown_editor/markdown_format.styles.js

@@ -42,33 +42,35 @@ var euiMarkdownAdjustBorderColors = function euiMarkdownAdjustBorderColors(_ref,
 /**
  * Styles
  */
-var euiMarkdownFormatStyles = exports.euiMarkdownFormatStyles = function euiMarkdownFormatStyles(euiTheme) {
+var euiMarkdownFormatStyles = exports.euiMarkdownFormatStyles = function euiMarkdownFormatStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   return {
     euiMarkdownFormat: /*#__PURE__*/(0, _react.css)(";label:euiMarkdownFormat;"),
     // Text sizes
-    m: /*#__PURE__*/(0, _react.css)(euiScaleMarkdownFormatText(euiTheme, {
+    m: /*#__PURE__*/(0, _react.css)(euiScaleMarkdownFormatText(euiThemeContext, {
       customScale: 'm'
     }), ";label:m;"),
-    s: /*#__PURE__*/(0, _react.css)(euiScaleMarkdownFormatText(euiTheme, {
+    s: /*#__PURE__*/(0, _react.css)(euiScaleMarkdownFormatText(euiThemeContext, {
       customScale: 's'
     }), ";label:s;"),
-    xs: /*#__PURE__*/(0, _react.css)(euiScaleMarkdownFormatText(euiTheme, {
+    xs: /*#__PURE__*/(0, _react.css)(euiScaleMarkdownFormatText(euiThemeContext, {
       customScale: 'xs'
     }), ";label:xs;"),
-    relative: /*#__PURE__*/(0, _react.css)(euiScaleMarkdownFormatText(euiTheme, {
+    relative: /*#__PURE__*/(0, _react.css)(euiScaleMarkdownFormatText(euiThemeContext, {
       unit: 'em'
     }), ";label:relative;"),
     colors: {
-      default: /*#__PURE__*/(0, _react.css)(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.components.markdownFormatTableBorderColor), ";label:default;"),
-      subdued: /*#__PURE__*/(0, _react.css)(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.subduedText), ";label:subdued;"),
-      success: /*#__PURE__*/(0, _react.css)(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.success), ";label:success;"),
-      accent: /*#__PURE__*/(0, _react.css)(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.accent), ";label:accent;"),
-      accentSecondary: /*#__PURE__*/(0, _react.css)(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.accentSecondary), ";label:accentSecondary;"),
-      warning: /*#__PURE__*/(0, _react.css)(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.warning), ";label:warning;"),
-      danger: /*#__PURE__*/(0, _react.css)(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.danger), ";label:danger;"),
-      ghost: /*#__PURE__*/(0, _react.css)(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.ghost), ";label:ghost;"),
-      inherit: /*#__PURE__*/(0, _react.css)(euiMarkdownAdjustBorderColors(euiTheme, 'currentColor'), ";label:inherit;"),
-      custom: /*#__PURE__*/(0, _react.css)(euiMarkdownAdjustBorderColors(euiTheme, 'currentColor'), ";label:custom;")
+      default: /*#__PURE__*/(0, _react.css)(euiMarkdownAdjustBorderColors(euiThemeContext, highContrastMode ? euiTheme.border.color : euiTheme.components.markdownFormatTableBorderColor), ";label:default;"),
+      subdued: /*#__PURE__*/(0, _react.css)(euiMarkdownAdjustBorderColors(euiThemeContext, highContrastMode ? euiTheme.border.color : euiTheme.colors.textSubdued), ";label:subdued;"),
+      success: /*#__PURE__*/(0, _react.css)(euiMarkdownAdjustBorderColors(euiThemeContext, euiTheme.colors.success), ";label:success;"),
+      accent: /*#__PURE__*/(0, _react.css)(euiMarkdownAdjustBorderColors(euiThemeContext, euiTheme.colors.accent), ";label:accent;"),
+      accentSecondary: /*#__PURE__*/(0, _react.css)(euiMarkdownAdjustBorderColors(euiThemeContext, euiTheme.colors.accentSecondary), ";label:accentSecondary;"),
+      warning: /*#__PURE__*/(0, _react.css)(euiMarkdownAdjustBorderColors(euiThemeContext, euiTheme.colors.warning), ";label:warning;"),
+      danger: /*#__PURE__*/(0, _react.css)(euiMarkdownAdjustBorderColors(euiThemeContext, euiTheme.colors.danger), ";label:danger;"),
+      ghost: /*#__PURE__*/(0, _react.css)(euiMarkdownAdjustBorderColors(euiThemeContext, euiTheme.colors.ghost), ";label:ghost;"),
+      inherit: /*#__PURE__*/(0, _react.css)(euiMarkdownAdjustBorderColors(euiThemeContext, 'currentColor'), ";label:inherit;"),
+      custom: /*#__PURE__*/(0, _react.css)(euiMarkdownAdjustBorderColors(euiThemeContext, 'currentColor'), ";label:custom;")
     }
   };
 };

package/lib/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/lib/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/lib/components/panel/panel.js

@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 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 _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -26,6 +26,12 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(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; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
 var SIZES = exports.SIZES = _global_styling.PADDING_SIZES;
@@ -59,11 +65,22 @@ var EuiPanel = exports.EuiPanel = function EuiPanel(_ref) {
     panelRef = _ref.panelRef,
     element = _ref.element,
     rest = _objectWithoutProperties(_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(_toConsumableArray(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), _defineProperty({}, "euiPanel--".concat(paddingSizeToClassNameMap[paddingSize]), paddingSizeToClassNameMap[paddingSize]), className);
   if (rest.onClick && element !== 'div') {
     return (0, _react2.jsx)("button", _extends({
@@ -78,6 +95,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"])]),
   /**
@@ -133,4 +153,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/lib/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/lib/components/panel/split_panel/split_panel.js

@@ -1,13 +1,15 @@
 "use strict";
 
+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); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports._EuiSplitPanelOuter = exports._EuiSplitPanelInner = exports.EuiSplitPanel = void 0;
-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");
@@ -21,6 +23,13 @@ var _excluded = ["children", "className"],
  * Side Public License, v 1.
  */
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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) { _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; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
@@ -32,7 +41,10 @@ var _EuiSplitPanelInner = exports._EuiSplitPanelInner = function _EuiSplitPanelI
   var children = _ref.children,
     className = _ref.className,
     rest = _objectWithoutProperties(_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',
@@ -42,7 +54,7 @@ var _EuiSplitPanelInner = exports._EuiSplitPanelInner = function _EuiSplitPanelI
   return (0, _react2.jsx)(_panel.EuiPanel, _extends({
     element: "div",
     className: classes,
-    css: _split_panel.euiSplitPanelInnerStyles.euiSplitPanelInner
+    css: cssStyles
   }, panelProps, rest), children);
 };
 _EuiSplitPanelInner.propTypes = {
@@ -78,15 +90,19 @@ var _EuiSplitPanelOuter = exports._EuiSplitPanelOuter = function _EuiSplitPanelO
     responsive = _ref2$responsive === void 0 ? ['xs', 's'] : _ref2$responsive,
     rest = _objectWithoutProperties(_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, _extends({
     paddingSize: "none",
     grow: false,
     className: classes,
     css: cssStyles
-  }, rest), children);
+  }, rest), (0, _react2.jsx)(SplitPanelInnerBorderDirection.Provider, {
+    value: innerBorderDirection
+  }, children));
 };
 _EuiSplitPanelOuter.propTypes = {
   /**
@@ -103,6 +119,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/lib/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/lib/components/popover/popover_arrow/_popover_arrow.styles.js

@@ -21,14 +21,15 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
  */
 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/lib/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/lib/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/lib/components/progress/progress.js

@@ -1,11 +1,10 @@
 "use strict";
 
-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); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SIZES = exports.POSITIONS = exports.EuiProgress = exports.COLORS = void 0;
-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");
@@ -23,8 +22,6 @@ var _excluded = ["className", "color", "size", "position", "max", "valueText", "
  * Side Public License, v 1.
  */
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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 _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
@@ -83,7 +80,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) {