@elastic/eui 97.3.0 → 97.3.1-rc.0

package/optimize/lib/components/form/switch/switch.styles.js

@@ -16,11 +16,12 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * Side Public License, v 1.
  */
 var euiSwitchVars = function euiSwitchVars(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   var formVars = (0, _form.euiFormCustomControlVariables)(euiThemeContext);
   var colors = {
     on: formVars.colors.selected,
-    off: formVars.colors.unselectedBorder,
+    off: highContrastMode ? euiTheme.colors.darkShade : formVars.colors.unselectedBorder,
     disabled: formVars.colors.disabled,
     thumb: formVars.colors.selectedIcon,
     thumbBorder: formVars.colors.unselectedBorder,
@@ -82,7 +83,7 @@ var euiSwitchVars = function euiSwitchVars(euiThemeContext) {
     label: label
   };
 };
-var _ref2 = process.env.NODE_ENV === "production" ? {
+var _ref = process.env.NODE_ENV === "production" ? {
   name: "b86pnw-disabled",
   styles: "cursor:not-allowed;label:disabled;"
 } : {
@@ -90,7 +91,7 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   styles: "cursor:not-allowed;label:disabled;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var _ref3 = process.env.NODE_ENV === "production" ? {
+var _ref2 = process.env.NODE_ENV === "production" ? {
   name: "eg68pp-euiSwitch",
   styles: "position:relative;display:inline-flex;align-items:flex-start;/* Required for inline-flex CSS to not render an extra 2-3px of strut height\n       * @see https://stackoverflow.com/a/27536461/4294462 */vertical-align:middle;label:euiSwitch;"
 } : {
@@ -101,10 +102,10 @@ var _ref3 = process.env.NODE_ENV === "production" ? {
 var euiSwitchStyles = exports.euiSwitchStyles = function euiSwitchStyles(euiThemeContext) {
   var switchVars = euiSwitchVars(euiThemeContext);
   return {
-    euiSwitch: _ref3,
+    euiSwitch: _ref2,
     // Skip css`` to avoid generating an extra Emotion className
     enabled: "\n      cursor: pointer;\n    ",
-    disabled: _ref2,
+    disabled: _ref,
     button: buttonStyles(euiThemeContext, switchVars),
     // The track body must be separate from the button wrapper, because the
     // icons have their overflow hidden outside the button, but the thumb doesn't
@@ -127,17 +128,11 @@ var buttonStyles = function buttonStyles(euiThemeContext, switchVars) {
     mini: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(mini.width, mini.height), " border-radius:", mini.height, ";;label:mini;")
   };
 };
-var _ref = process.env.NODE_ENV === "production" ? {
-  name: "19cwu6v-euiSwitch__body",
-  styles: "position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;label:euiSwitch__body;"
-} : {
-  name: "19cwu6v-euiSwitch__body",
-  styles: "position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;label:euiSwitch__body;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var bodyStyles = function bodyStyles(_ref4, _ref5) {
-  var colorMode = _ref4.colorMode;
-  var colors = _ref5.colors;
+var bodyStyles = function bodyStyles(_ref3, _ref4) {
+  var colorMode = _ref3.colorMode,
+    highContrastMode = _ref3.highContrastMode,
+    euiTheme = _ref3.euiTheme;
+  var colors = _ref4.colors;
   // This is probably very extra, but the visual weight of the default
   // disabled custom control feels different in light mode depending
   // on the size of the switch, so I'm tinting it based on that.
@@ -146,7 +141,8 @@ var bodyStyles = function bodyStyles(_ref4, _ref5) {
     return /*#__PURE__*/(0, _react.css)("label:disabled;background-color:", colorMode === 'DARK' ? colors.disabled : (0, _services.tint)(colors.disabled, tintAmount), ";");
   };
   return {
-    euiSwitch__body: _ref,
+    euiSwitch__body: /*#__PURE__*/(0, _react.css)("position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;", highContrastMode ? // For Windows high contrast themes, a border *must* be rendered, not just a background
+    "border: ".concat(euiTheme.border.width.thin, " solid transparent;") : '', ";;label:euiSwitch__body;"),
     on: /*#__PURE__*/(0, _react.css)("background-color:", colors.on, ";;label:on;"),
     off: /*#__PURE__*/(0, _react.css)("background-color:", colors.off, ";;label:off;"),
     disabled: {
@@ -156,10 +152,10 @@ var bodyStyles = function bodyStyles(_ref4, _ref5) {
     }
   };
 };
-var iconStyles = function iconStyles(_ref6, _ref7) {
-  var euiTheme = _ref6.euiTheme;
-  var colors = _ref7.colors,
-    animation = _ref7.animation;
+var iconStyles = function iconStyles(_ref5, _ref6) {
+  var euiTheme = _ref5.euiTheme;
+  var colors = _ref6.colors,
+    animation = _ref6.animation;
   return {
     euiSwitch__icons: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('vertical', 0), " ", (0, _global_styling.logicalCSS)('left', '-50%'), " ", (0, _global_styling.logicalCSS)('width', '200%'), " display:flex;justify-content:space-around;align-items:center;", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), " ", _global_styling.euiCanAnimate, "{transition-property:inset-inline-start;transition-duration:", animation.speed, ";transition-timing-function:", animation.easing, ";};label:euiSwitch__icons;"),
     on: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('left', '-25%'), ";;label:on;"),
@@ -168,8 +164,9 @@ var iconStyles = function iconStyles(_ref6, _ref7) {
     disabled: /*#__PURE__*/(0, _react.css)("color:", colors.thumbBorderDisabled, ";;label:disabled;")
   };
 };
-var thumbStyles = function thumbStyles(_ref8, switchVars) {
-  var euiTheme = _ref8.euiTheme;
+var thumbStyles = function thumbStyles(_ref7, switchVars) {
+  var euiTheme = _ref7.euiTheme,
+    highContrastMode = _ref7.highContrastMode;
   var sizes = switchVars.sizes,
     colors = switchVars.colors,
     animation = switchVars.animation;
@@ -185,18 +182,33 @@ var thumbStyles = function thumbStyles(_ref8, switchVars) {
     euiSwitch__thumb: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('vertical', 0), " aspect-ratio:1;", (0, _global_styling.logicalCSS)('width', 'fit-content'), " ", (0, _global_styling.logicalCSS)('height', '100%'), " border-radius:50%;pointer-events:none;", _global_styling.euiCanAnimate, "{transition-property:inset-inline-start,transform,background-color,border-color;transition-duration:", animation.speed, ";transition-timing-function:", animation.easing, ";};label:euiSwitch__thumb;"),
     off: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('left', 0), ";;label:off;"),
     get on() {
+      var _sizeBasedCss = function _sizeBasedCss(bodyWidth, thumbWidth) {
+        return /*#__PURE__*/(0, _react.css)("label:on;", _calculateLeft(bodyWidth, thumbWidth), " ", _highContrastOn(thumbWidth), ";");
+      };
+
       // right: 0 works but doesn't transition/animate, so we need to
       // manually calculate the left position per switch size
       var _calculateLeft = function _calculateLeft(bodyWidth, thumbWidth) {
         var leftPosition = (0, _global_styling.mathWithUnits)([bodyWidth, thumbWidth], function (x, y) {
           return x - y;
         });
-        return /*#__PURE__*/(0, _react.css)("label:on;", (0, _global_styling.logicalCSS)('left', leftPosition), ";");
+        return (0, _global_styling.logicalCSS)('left', leftPosition);
+      };
+
+      // Windows high contrast themes ignore background-color, making on vs. off state (for
+      // sizes without icons) impossible to distinguish without this pseudo border workaround
+      var _highContrastOn = function _highContrastOn(thumbWidth) {
+        if (highContrastMode) {
+          var borderSize = (0, _global_styling.mathWithUnits)(thumbWidth, function (x) {
+            return x / 2;
+          });
+          return "\n            overflow: hidden;\n            &::after {\n              content: '';\n              position: absolute;\n              inset: 0;\n              border-radius: 50%;\n              border: ".concat(borderSize, " solid ").concat(colors.thumb, ";\n            }\n          ");
+        }
       };
       return {
-        uncompressed: _calculateLeft(uncompressed.width, uncompressed.height),
-        compressed: _calculateLeft(compressed.width, compressed.height),
-        mini: _calculateLeft(mini.width, mini.height)
+        uncompressed: _sizeBasedCss(uncompressed.width, uncompressed.height),
+        compressed: _sizeBasedCss(compressed.width, compressed.height),
+        mini: _sizeBasedCss(mini.width, mini.height)
       };
     },
     enabled: {
@@ -213,9 +225,9 @@ var thumbStyles = function thumbStyles(_ref8, switchVars) {
     }
   };
 };
-var labelStyles = function labelStyles(euiThemeContext, _ref9) {
-  var sizes = _ref9.sizes,
-    label = _ref9.label;
+var labelStyles = function labelStyles(euiThemeContext, _ref8) {
+  var sizes = _ref8.sizes,
+    label = _ref8.label;
   var uncompressed = sizes.uncompressed,
     compressed = sizes.compressed,
     mini = sizes.mini;

package/optimize/lib/components/horizontal_rule/horizontal_rule.styles.js

@@ -15,9 +15,12 @@ var _global_styling = require("../../global_styling");
  */
 
 var euiHorizontalRuleStyles = exports.euiHorizontalRuleStyles = function euiHorizontalRuleStyles(_ref) {
-  var euiTheme = _ref.euiTheme;
+  var euiTheme = _ref.euiTheme,
+    highContrastMode = _ref.highContrastMode;
   return {
-    euiHorizontalRule: /*#__PURE__*/(0, _react.css)("border:none;", (0, _global_styling.logicalCSS)('height', euiTheme.border.width.thin), " background-color:", euiTheme.border.color, ";flex-shrink:0;flex-grow:0;;label:euiHorizontalRule;"),
+    euiHorizontalRule: /*#__PURE__*/(0, _react.css)("border:none;", highContrastMode ?
+    // Windows high contrast themes forcibly remove background colors but respects borders
+    (0, _global_styling.logicalCSS)('border-bottom', euiTheme.border.thin) : "\n    ".concat((0, _global_styling.logicalCSS)('height', euiTheme.border.width.thin), "\n    background-color: ").concat(euiTheme.border.color, ";\n"), "flex-shrink:0;flex-grow:0;;label:euiHorizontalRule;"),
     // Sizes
     full: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), ";;label:full;"),
     half: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '50%'), " ", (0, _global_styling.logicalCSS)('margin-horizontal', 'auto'), ";;label:half;"),

package/optimize/lib/components/image/image.styles.js

@@ -20,7 +20,9 @@ var euiImageStyles = exports.euiImageStyles = function euiImageStyles(euiThemeCo
     euiImage: /*#__PURE__*/(0, _react.css)("vertical-align:middle;", (0, _global_styling.logicalCSS)('max-width', '100%'), " &,[class*='euiText'] &{", (0, _global_styling.logicalCSS)('margin-bottom', 0), ";};label:euiImage;"),
     // Variations
     isFullScreen: /*#__PURE__*/(0, _react.css)("position:relative;", (0, _global_styling.logicalCSS)('max-height', '80vh'), " ", (0, _global_styling.logicalCSS)('max-width', '80vw'), ";;label:isFullScreen;"),
-    hasShadow: /*#__PURE__*/(0, _react.css)((0, _mixins.euiShadow)(euiThemeContext, 's'), ";;label:hasShadow;"),
+    hasShadow: /*#__PURE__*/(0, _react.css)((0, _mixins.euiShadow)(euiThemeContext, 's', {
+      borderAllInHighContrastMode: true
+    }), ";;label:hasShadow;"),
     // Sizes
     // These sizes are mostly suggestions. Don't look too hard for meaning in their values.
     // Size is applied to the image, rather than the wrapper figure to work better with floats

package/optimize/lib/components/image/image_button.styles.js

@@ -20,8 +20,12 @@ var euiImageButtonStyles = exports.euiImageButtonStyles = function euiImageButto
     // Base
     euiImageButton: /*#__PURE__*/(0, _react.css)("position:relative;cursor:pointer;text-align:match-parent;line-height:0;&::before{opacity:0;content:'';pointer-events:none;position:absolute;inset:0;", _global_styling.euiCanAnimate, "{transition:opacity ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";}}&:hover,&:focus{&::before{opacity:1;}[class*='euiImageButton__icon']{opacity:1;}}&:focus{", (0, _global_styling.euiFocusRing)(euiThemeContext, 'outset'), ";};label:euiImageButton;"),
     fullWidth: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), ";;label:fullWidth;"),
-    shadowHover: /*#__PURE__*/(0, _react.css)("&::before{", (0, _mixins.euiShadow)(euiThemeContext, 's'), ";};label:shadowHover;"),
-    hasShadowHover: /*#__PURE__*/(0, _react.css)("&::before{", (0, _mixins.euiShadow)(euiThemeContext, 'm'), ";};label:hasShadowHover;")
+    shadowHover: /*#__PURE__*/(0, _react.css)("&::before{", (0, _mixins.euiShadow)(euiThemeContext, 's', {
+      borderAllInHighContrastMode: true
+    }), ";};label:shadowHover;"),
+    hasShadowHover: /*#__PURE__*/(0, _react.css)("&::before{", (0, _mixins.euiShadow)(euiThemeContext, 'm', {
+      borderAllInHighContrastMode: true
+    }), ";};label:hasShadowHover;")
   };
 };
 var _ref = process.env.NODE_ENV === "production" ? {

package/optimize/lib/components/key_pad_menu/key_pad_menu_item.js

@@ -52,7 +52,7 @@ var EuiKeyPadMenuItem = exports.EuiKeyPadMenuItem = function EuiKeyPadMenuItem(_
   var isDisabled = disabled || _isDisabled || !isHrefValid;
   var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _key_pad_menu_item.euiKeyPadMenuItemStyles)(euiTheme);
-  var cssStyles = [styles.euiKeyPadMenuItem, !isDisabled ? styles.enabled : styles.disabled.disabled, isSelected && (!isDisabled ? styles.selected : styles.disabled.selected)];
+  var cssStyles = [styles.euiKeyPadMenuItem, !isDisabled ? styles.enabled : styles.disabled.disabled, isSelected && (!isDisabled ? styles.selected : styles.disabled.selected), euiTheme.highContrastMode && isSelected && !checkable && styles.selectedHighContrast];
   var classes = (0, _classnames.default)('euiKeyPadMenuItem', className);
   var Element = href && !isDisabled ? 'a' : 'button';
   if (checkable) Element = 'label';

package/optimize/lib/components/key_pad_menu/key_pad_menu_item.styles.js

@@ -19,16 +19,21 @@ var _key_pad_menu = require("./key_pad_menu.styles");
  */
 
 var euiKeyPadMenuItemStyles = exports.euiKeyPadMenuItemStyles = function euiKeyPadMenuItemStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   var _euiKeyPadMenuVariabl = (0, _key_pad_menu.euiKeyPadMenuVariables)(euiThemeContext),
     euiKeyPadMenuSize = _euiKeyPadMenuVariabl.euiKeyPadMenuSize;
   return {
     euiKeyPadMenuItem: /*#__PURE__*/(0, _react.css)("display:block;padding:", euiTheme.size.xs, ";", (0, _global_styling.logicalSizeCSS)(euiKeyPadMenuSize), " border-radius:", euiTheme.border.radius.medium, ";color:", euiTheme.colors.text, ";", _global_styling.euiCanAnimate, "{transition:background-color ", euiTheme.animation.fast, " ease-in,box-shadow ", euiTheme.animation.fast, " ease-in;};label:euiKeyPadMenuItem;"),
-    enabled: /*#__PURE__*/(0, _react.css)("&:hover,&:focus,&:focus-within{cursor:pointer;text-decoration:underline;", (0, _mixins.euiShadow)(euiThemeContext, 's'), " ", _global_styling.euiCanAnimate, "{.euiKeyPadMenuItem__icon{transform:translateY(0);}}}&:focus{background-color:", euiTheme.focus.backgroundColor, ";box-shadow:none;};label:enabled;"),
-    selected: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.title, ";background-color:", euiTheme.focus.backgroundColor, ";&,&:hover,&:focus,&:focus-within{color:", euiTheme.colors.primaryText, ";};label:selected;"),
+    enabled: /*#__PURE__*/(0, _react.css)("&:is(:hover, :focus, :focus-within){cursor:pointer;text-decoration:underline;", highContrastMode ? // Use `outline` instead of border to avoid affecting absolutely positioned children
+    "outline: ".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.primary, ";") : (0, _mixins.euiShadow)(euiThemeContext, 's'), " ", _global_styling.euiCanAnimate, "{.euiKeyPadMenuItem__icon{transform:translateY(0);}}}&:focus{background-color:", euiTheme.focus.backgroundColor, ";box-shadow:none;};label:enabled;"),
+    selected: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.title, ";background-color:", euiTheme.focus.backgroundColor, ";&:is(*, :hover, :focus, :focus-within){color:", euiTheme.colors.primaryText, ";};label:selected;"),
+    // Windows high contrast themes ignore background-color, so we need to ensure
+    // that selected item state is clearly via `outline`
+    selectedHighContrast: /*#__PURE__*/(0, _react.css)(":is(*, :hover, :focus, :focus-within){outline:", euiTheme.border.width.thick, " solid ", euiTheme.colors.primary, ";outline-offset:0;};label:selectedHighContrast;"),
     disabled: {
       disabled: /*#__PURE__*/(0, _react.css)("cursor:not-allowed;color:", euiTheme.colors.disabledText, ";.euiKeyPadMenuItem__icon{filter:grayscale(100%);svg *{fill:", euiTheme.colors.disabledText, ";}};label:disabled;"),
-      selected: /*#__PURE__*/(0, _react.css)("background-color:", (0, _services.transparentize)(euiTheme.colors.disabled, euiTheme.focus.transparency), ";;label:selected;")
+      selected: /*#__PURE__*/(0, _react.css)("background-color:", (0, _services.transparentize)(euiTheme.colors.disabled, euiTheme.focus.transparency), ";", highContrastMode ? "outline-color: ".concat(euiTheme.colors.disabledText, " !important;") : '', ";;label:selected;")
     }
   };
 };
@@ -40,7 +45,7 @@ var euiKeyPadMenuItemChildStyles = exports.euiKeyPadMenuItemChildStyles = functi
     euiKeyPadMenuItem__icon: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.m), " transform:translateY(2px);", _global_styling.euiCanAnimate, "{transition:transform ", euiTheme.animation.normal, " ", euiTheme.animation.bounce, ";};label:euiKeyPadMenuItem__icon;"),
     euiKeyPadMenuItem__label: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), " font-weight:", euiTheme.font.weight.semiBold, ";text-align:center;;label:euiKeyPadMenuItem__label;"),
     euiKeyPadMenuItem__betaBadge: /*#__PURE__*/(0, _react.css)(topRightChildren, ";;label:euiKeyPadMenuItem__betaBadge;"),
-    euiKeyPadMenuItem__checkableInput: /*#__PURE__*/(0, _react.css)(topRightChildren, " transform:scale(.75);transform-origin:top right;&&{position:absolute;};label:euiKeyPadMenuItem__checkableInput;"),
+    euiKeyPadMenuItem__checkableInput: /*#__PURE__*/(0, _react.css)("position:absolute;", topRightChildren, " transform:scale(.75);transform-origin:top right;;label:euiKeyPadMenuItem__checkableInput;"),
     showCheckableInputOnInteraction: /*#__PURE__*/(0, _react.css)(".euiKeyPadMenuItem:not(:hover, :focus, :focus-within) &{", (0, _accessibility.euiScreenReaderOnly)(), ";};label:showCheckableInputOnInteraction;"),
     hideCheckableInput: /*#__PURE__*/(0, _react.css)((0, _accessibility.euiScreenReaderOnly)(), ";;label:hideCheckableInput;")
   };

package/optimize/lib/components/loading/loading_chart.js

@@ -44,9 +44,14 @@ var EuiLoadingChart = exports.EuiLoadingChart = function EuiLoadingChart(_ref) {
   }, rest), Array.from({
     length: _loading_chart.BARS_COUNT
   }, function (_, index) {
-    return (0, _react2.jsx)("span", {
-      key: index,
-      css: barCssStyles
-    });
+    return (
+      // Windows high contrast themes ignore background-color on all elements except svgs
+      // We're using the element here as shortcut (+ b/c loading logos are already SVGs)
+      (0, _react2.jsx)("svg", {
+        key: index,
+        css: barCssStyles,
+        "aria-hidden": true
+      })
+    );
   }));
 };

package/optimize/lib/components/loading/loading_spinner.styles.js

@@ -36,16 +36,32 @@ var euiSpinnerBorderColorsCSS = exports.euiSpinnerBorderColorsCSS = function eui
 var euiLoadingSpinnerStyles = exports.euiLoadingSpinnerStyles = function euiLoadingSpinnerStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiLoadingSpinner: /*#__PURE__*/(0, _react.css)("flex-shrink:0;display:inline-block;border-radius:50%;border:", euiTheme.border.thick, ";", (0, _global_styling.logicalShorthandCSS)('border-color', euiSpinnerBorderColorsCSS(euiThemeContext)), " ", _global_styling.euiCanAnimate, "{animation:", _loadingSpinner, " 0.6s infinite linear;};label:euiLoadingSpinner;"),
+    euiLoadingSpinner: /*#__PURE__*/(0, _react.css)("flex-shrink:0;display:inline-block;border-radius:50%;@media (forced-colors: none){border:", euiTheme.border.thick, ";", (0, _global_styling.logicalShorthandCSS)('border-color', euiSpinnerBorderColorsCSS(euiThemeContext)), ";}", _global_styling.euiCanAnimate, "{animation:", _loadingSpinner, " 0.6s infinite linear;};label:euiLoadingSpinner;"),
     // Sizes
-    s: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size[spinnerSizes.s], euiTheme.size[spinnerSizes.s]), " border-width:", (0, _global_styling.mathWithUnits)(euiTheme.border.width.thin, function (x) {
+    s: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size[spinnerSizes.s]), " border-width:", (0, _global_styling.mathWithUnits)(euiTheme.border.width.thin, function (x) {
       return x * 1.5;
-    }), ";;label:s;"),
-    m: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size[spinnerSizes.m], euiTheme.size[spinnerSizes.m]), " border-width:", (0, _global_styling.mathWithUnits)(euiTheme.border.width.thin, function (x) {
+    }), ";", _highContrastFallback(euiThemeContext, 's'), ";;label:s;"),
+    m: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size[spinnerSizes.m]), " border-width:", (0, _global_styling.mathWithUnits)(euiTheme.border.width.thin, function (x) {
       return x * 1.5;
-    }), ";;label:m;"),
-    l: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size[spinnerSizes.l], euiTheme.size[spinnerSizes.l]), ";;label:l;"),
-    xl: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size[spinnerSizes.xl], euiTheme.size[spinnerSizes.xl]), ";;label:xl;"),
-    xxl: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size[spinnerSizes.xxl], euiTheme.size[spinnerSizes.xxl]), ";;label:xxl;")
+    }), ";", _highContrastFallback(euiThemeContext), ";;label:m;"),
+    l: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size[spinnerSizes.l]), " ", _highContrastFallback(euiThemeContext), ";;label:l;"),
+    xl: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size[spinnerSizes.xl]), " ", _highContrastFallback(euiThemeContext), ";;label:xl;"),
+    xxl: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size[spinnerSizes.xxl], euiTheme.size[spinnerSizes.xxl]), " ", _highContrastFallback(euiThemeContext), ";;label:xxl;")
   };
+};
+
+// Windows high contrast themes allow colors on url-based background-images,
+// so we're inline an SVG to render as a fallback (using opposite shades for contrast)
+var _highContrastFallback = function _highContrastFallback(_ref2) {
+  var euiTheme = _ref2.euiTheme,
+    highContrastMode = _ref2.highContrastMode;
+  var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'm';
+  if (!highContrastMode) return '';
+  var colorOne = encodeURIComponent(euiTheme.colors.emptyShade);
+  var colorTwo = encodeURIComponent(euiTheme.colors.fullShade);
+  var pathSizes = {
+    s: ["d='M10 0a10 10 0 0 1 9.75 12.225l-2.925-.668A7 7 0 0 0 10 3Z'", "d='M19.75 12.225A10 10 0 1 1 9.997 0v3a7 7 0 1 0 6.827 8.557Z'"],
+    m: ["d='M10 0a10 10 0 0 1 9.75 12.225l-1.95-.445A8 8 0 0 0 10 2Z'", "d='M19.75 12.225A10 10 0 1 1 9.997 0v2a8 8 0 1 0 7.802 9.78Z'"]
+  };
+  return "\n    @media (forced-colors: active) {\n      background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 20 20'%3E%3Cpath fill='".concat(colorOne, "' ").concat(pathSizes[size][0], " /%3E%3Cpath fill='").concat(colorTwo, "' ").concat(pathSizes[size][1], " /%3E%3C/svg%3E\");\n    }\n  ");
 };

package/optimize/lib/components/mark/mark.styles.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiMarkStyles = exports.euiMarkScreenReaderStyles = void 0;
 var _react = require("@emotion/react");
-var _services = require("../../services");
 var _accessibility = require("../accessibility");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -17,14 +16,11 @@ var _accessibility = require("../accessibility");
 
 var euiMarkStyles = exports.euiMarkStyles = function euiMarkStyles(_ref) {
   var euiTheme = _ref.euiTheme,
-    colorMode = _ref.colorMode;
-  // TODO: Was $euiFocusBackgroundColor
-  var transparency = {
-    LIGHT: 0.1,
-    DARK: 0.3
-  };
+    highContrastMode = _ref.highContrastMode;
+  var backgroundColor = highContrastMode ? euiTheme.colors.primaryText : euiTheme.focus.backgroundColor;
+  var textColor = highContrastMode ? "".concat(euiTheme.colors.ghost, " !important") : euiTheme.colors.text;
   return {
-    euiMark: /*#__PURE__*/(0, _react.css)("background-color:", (0, _services.transparentize)(euiTheme.colors.primary, transparency[colorMode]), ";font-weight:", euiTheme.font.weight.bold, ";color:", euiTheme.colors.text, ";;label:euiMark;")
+    euiMark: /*#__PURE__*/(0, _react.css)("background-color:", backgroundColor, ";font-weight:", euiTheme.font.weight.bold, ";color:", textColor, ";;label:euiMark;")
   };
 };
 var euiMarkScreenReaderStyles = exports.euiMarkScreenReaderStyles = function euiMarkScreenReaderStyles(highlightStart, highlightEnd) {

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

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiMarkdownFormatStyles = void 0;
 var _react = require("@emotion/react");
-var _services = require("../../services");
 var _global_styling = require("../../global_styling");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -60,13 +59,13 @@ var euiMarkdownFormatStyles = exports.euiMarkdownFormatStyles = function euiMark
       unit: 'em'
     }), ";label:relative;"),
     colors: {
-      default: /*#__PURE__*/(0, _react.css)(euiMarkdownAdjustBorderColors(euiTheme, (0, _services.transparentize)(euiTheme.euiTheme.colors.fullShade, 0.15)), ";label:default;"),
-      subdued: /*#__PURE__*/(0, _react.css)(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.subduedText), ";label:subdued;"),
+      default: /*#__PURE__*/(0, _react.css)(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.border.color), ";label:default;"),
+      subdued: /*#__PURE__*/(0, _react.css)(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.highContrastMode ? euiTheme.euiTheme.border.color : 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;"),
       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;"),
+      ghost: /*#__PURE__*/(0, _react.css)(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.highContrastMode ? euiTheme.euiTheme.border.color : 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;")
     }

package/optimize/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, _mixins.euiShadowXLarge)(euiThemeContext), " display:flex;flex-direction:column;max-block-size:75vh;position:relative;background-color:", euiTheme.colors.emptyShade, ";border-radius:", euiTheme.border.radius.medium, ";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, _mixins.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, ";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, _mixins.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/optimize/lib/components/page/page_header/page_header_content.js

@@ -176,8 +176,9 @@ var EuiPageHeaderContent = exports.EuiPageHeaderContent = function EuiPageHeader
     var itemsToRender = isResponsiveBreakpoint ? rightSideItems : (0, _toConsumableArray2.default)(rightSideItems).reverse();
     var rightSideFlexItems = itemsToRender.map(function (item, index) {
       return (0, _react2.jsx)(_flex.EuiFlexItem, {
+        key: index,
         grow: false,
-        key: index
+        css: contentStyles.euiPageHeaderContent__rightSideItem
       }, item);
     });
     var _cssStyles = [contentStyles.euiPageHeaderContent__rightSideItems, rightSideGroupProps === null || rightSideGroupProps === void 0 ? void 0 : rightSideGroupProps.css];

package/optimize/lib/components/page/page_header/page_header_content.styles.js

@@ -87,7 +87,8 @@ var euiPageHeaderContentStyles = exports.euiPageHeaderContentStyles = function e
     },
     euiPageHeaderContent__top: _ref,
     euiPageHeaderContent__leftSideItems: /*#__PURE__*/(0, _react.css)("@container (max-width: ", euiTheme.breakpoint.m, "px){", (0, _global_styling.logicalCSS)('min-width', '50%'), ";};label:euiPageHeaderContent__leftSideItems;"),
-    euiPageHeaderContent__rightSideItems: /*#__PURE__*/(0, _react.css)("flex:0 1 auto;align-content:flex-start;@container (min-width: ", euiTheme.breakpoint.m, "px){", (0, _global_styling.logicalCSS)('max-width', '50%'), " justify-content:flex-end;};label:euiPageHeaderContent__rightSideItems;"),
+    euiPageHeaderContent__rightSideItems: /*#__PURE__*/(0, _react.css)("flex:0 1 auto;align-content:flex-start;", (0, _global_styling.logicalCSS)('max-width', '100%'), "@container (min-width: ", euiTheme.breakpoint.m, "px){", (0, _global_styling.logicalCSS)('max-width', '50%'), " justify-content:flex-end;};label:euiPageHeaderContent__rightSideItems;"),
+    euiPageHeaderContent__rightSideItem: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-width', '100%'), ";;label:euiPageHeaderContent__rightSideItem;"),
     euiPageHeaderContent__titleIcon: /*#__PURE__*/(0, _react.css)("position:relative;", (0, _global_styling.logicalCSS)('top', "-".concat(euiTheme.size.xs)), " ", (0, _global_styling.logicalCSS)('margin-right', euiTheme.size.base), ";;label:euiPageHeaderContent__titleIcon;")
   };
 };

package/optimize/lib/components/panel/panel.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 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 _classnames = _interopRequireDefault(require("classnames"));
@@ -54,11 +55,19 @@ 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 ? [{
+    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)({

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

@@ -31,7 +31,8 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 var euiPanelStyles = exports.euiPanelStyles = function euiPanelStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   return {
     // Base
     euiPanel: _ref2,
@@ -43,6 +44,7 @@ var euiPanelStyles = exports.euiPanelStyles = function euiPanelStyles(euiThemeCo
       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, _mixins.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{", highContrastMode ? // Use drop-shadow instead of box-shadow, as Windows high contrast themes ignores box-shadows
+    "filter: drop-shadow(0 ".concat(euiTheme.border.width.thick, " 0 ").concat(euiTheme.border.color, ");") : (0, _mixins.euiShadow)(euiThemeContext, 'l'), " transform:translateY(-2px);cursor:pointer;};label:isClickable;")
   };
 };

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

@@ -10,6 +10,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireDefault(require("react"));
 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");
@@ -31,6 +32,7 @@ var _EuiSplitPanelInner = exports._EuiSplitPanelInner = function _EuiSplitPanelI
     className = _ref.className,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiSplitPanel__inner', className);
+  var styles = (0, _services.useEuiMemoizedStyles)(_split_panel.euiSplitPanelInnerStyles);
   var panelProps = {
     hasShadow: false,
     color: 'transparent',
@@ -40,7 +42,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: styles.euiSplitPanelInner
   }, panelProps, rest), children);
 };
 /**

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

@@ -32,13 +32,9 @@ 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 euiSplitPanelInnerStyles = exports.euiSplitPanelInnerStyles = function euiSplitPanelInnerStyles(_ref) {
+  var highContrastMode = _ref.highContrastMode;
+  return {
+    euiSplitPanelInner: /*#__PURE__*/(0, _react.css)("flex-basis:0%;transform:none!important;box-shadow:none!important;", highContrastMode ? 'border: none;' : '', ";;label:euiSplitPanelInner;")
+  };
 };

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

@@ -16,16 +16,27 @@ var _global_styling = require("../../../global_styling");
 
 var popoverArrowSize = exports.popoverArrowSize = 'm';
 var euiPopoverArrowStyles = exports.euiPopoverArrowStyles = function euiPopoverArrowStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
-  var borderColor = 'var(--euiPopoverBackgroundColor)';
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   var arrowSize = euiTheme.size[popoverArrowSize];
+  var arrowDoubleSize = (0, _global_styling.mathWithUnits)(arrowSize, function (x) {
+    return x * 2;
+  });
+  var highContrastPseudoElement = function highContrastPseudoElement(css) {
+    return highContrastMode ? "&::before {".concat(css, "}") : '';
+  };
+  var highContrastBorderAffordance = (0, _global_styling.mathWithUnits)(euiTheme.border.width.thin, function (x) {
+    return x * -2;
+  });
   return {
     // Base
-    euiPopoverArrow: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalSizeCSS)(0, 0), "&::before{content:'';position:absolute;", (0, _global_styling.logicalSizeCSS)(0, 0), ";};label:euiPopoverArrow;"),
+    euiPopoverArrow: /*#__PURE__*/(0, _react.css)("position:absolute;background-color:var(--euiPopoverBackgroundColor);", highContrastPseudoElement("\n        content: '';\n        position: absolute;\n        background-color: inherit;\n        border: ".concat(euiTheme.border.thin, ";\n        transform: rotate(45deg);\n        transform-origin: top;\n        ").concat((0, _global_styling.logicalSizeCSS)((0, _global_styling.mathWithUnits)(arrowDoubleSize, function (x) {
+      return x * 0.75;
+    })), "\n      ")), ";;label:euiPopoverArrow;"),
     // POSITIONS
-    top: /*#__PURE__*/(0, _react.css)("&::before{", _global_styling.logicals.bottom, ":-", arrowSize, ";", _global_styling.logicals['border-left'], ":", arrowSize, " solid transparent;", _global_styling.logicals['border-right'], ":", arrowSize, " solid transparent;", _global_styling.logicals['border-top'], ":", arrowSize, " solid ", borderColor, ";};label:top;"),
-    bottom: /*#__PURE__*/(0, _react.css)("&::before{", _global_styling.logicals.top, ":-", arrowSize, ";", _global_styling.logicals['border-left'], ":", arrowSize, " solid transparent;", _global_styling.logicals['border-right'], ":", arrowSize, " solid transparent;", _global_styling.logicals['border-bottom'], ":", arrowSize, " solid ", borderColor, ";};label:bottom;"),
-    left: /*#__PURE__*/(0, _react.css)("&::before{", _global_styling.logicals.top, ":50%;", _global_styling.logicals.right, ":-", arrowSize, ";", _global_styling.logicals['border-top'], ":", arrowSize, " solid transparent;", _global_styling.logicals['border-bottom'], ":", arrowSize, " solid transparent;", _global_styling.logicals['border-left'], ":", arrowSize, " solid ", borderColor, ";};label:left;"),
-    right: /*#__PURE__*/(0, _react.css)("&::before{", _global_styling.logicals.top, ":50%;", _global_styling.logicals.left, ":-", arrowSize, ";", _global_styling.logicals['border-top'], ":", arrowSize, " solid transparent;", _global_styling.logicals['border-bottom'], ":", arrowSize, " solid transparent;", _global_styling.logicals['border-right'], ":", arrowSize, " solid ", borderColor, ";};label:right;")
+    top: /*#__PURE__*/(0, _react.css)("clip-path:polygon(0 0, 50% 100%, 100% 0);", (0, _global_styling.logicalSizeCSS)(arrowDoubleSize, arrowSize), " ", (0, _global_styling.logicalCSS)('margin-top', highContrastMode ? highContrastBorderAffordance : 0), " ", highContrastPseudoElement("\n        ".concat((0, _global_styling.logicalCSS)('top', '-60%'), "\n        ").concat((0, _global_styling.logicalCSS)('left', '38%'), "\n      ")), ";;label:top;"),
+    bottom: /*#__PURE__*/(0, _react.css)("clip-path:polygon(0 100%, 50% 0, 100% 100%);", (0, _global_styling.logicalSizeCSS)(arrowDoubleSize, arrowSize), " ", (0, _global_styling.logicalCSS)('margin-top', "-".concat(arrowSize)), " ", highContrastPseudoElement("\n        ".concat((0, _global_styling.logicalCSS)('top', '54%'), "\n        ").concat((0, _global_styling.logicalCSS)('left', '38%'), "\n      ")), ";;label:bottom;"),
+    left: /*#__PURE__*/(0, _react.css)("clip-path:polygon(0 0, 100% 50%, 0 100%);", (0, _global_styling.logicalSizeCSS)(arrowSize, arrowDoubleSize), " ", (0, _global_styling.logicalCSS)('margin-left', highContrastMode ? highContrastBorderAffordance : 0), " ", highContrastPseudoElement("\n        ".concat((0, _global_styling.logicalCSS)('top', '24%'), "\n        ").concat((0, _global_styling.logicalCSS)('left', '-30%'), "\n      ")), ";;label:left;"),
+    right: /*#__PURE__*/(0, _react.css)("clip-path:polygon(100% 0, 0 50%, 100% 100%);", (0, _global_styling.logicalSizeCSS)(arrowSize, arrowDoubleSize), " ", (0, _global_styling.logicalCSS)('margin-left', "-".concat(arrowSize)), " ", highContrastPseudoElement("\n        ".concat((0, _global_styling.logicalCSS)('top', '24%'), "\n        ").concat((0, _global_styling.logicalCSS)('left', '90%'), "\n      ")), ";;label:right;")
   };
 };