@elastic/eui 97.3.0 → 97.3.1-rc.0

package/optimize/lib/components/filter_group/filter_button.styles.js

@@ -34,16 +34,16 @@ var _ref3 = process.env.NODE_ENV === "production" ? {
 var euiFilterButtonStyles = exports.euiFilterButtonStyles = function euiFilterButtonStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   var _euiFormVariables = (0, _form.euiFormVariables)(euiThemeContext),
-    controlHeight = _euiFormVariables.controlHeight,
-    borderColor = _euiFormVariables.borderColor;
+    controlHeight = _euiFormVariables.controlHeight;
 
-  // Box shadow simulates borders without affecting width
-  var leftBoxShadow = "-".concat(euiTheme.border.width.thin, " 0 0 0 ").concat(borderColor);
+  // Pseudo elements create borders without affecting width. We also prefer them
+  // over box-shadow for Windows high contrast theme compatability
+  var leftBorder = "\n    &::before {\n      content: '';\n      position: absolute;\n      ".concat((0, _global_styling.logicalCSS)('right', '100%'), "\n      ").concat((0, _global_styling.logicalCSS)('vertical', 0), "\n      ").concat((0, _global_styling.logicalCSS)('border-left', euiTheme.border.thin), "\n    }\n  ");
   // Bottom borders are needed for responsive flex-wrap behavior
-  var bottomBoxShadow = "0 ".concat(euiTheme.border.width.thin, " 0 0 ").concat(borderColor);
+  var bottomBorder = "\n    &::after {\n      content: '';\n      position: absolute;\n      ".concat((0, _global_styling.logicalCSS)('top', '100%'), "\n      ").concat((0, _global_styling.logicalCSS)('horizontal', 0), "\n      ").concat((0, _global_styling.logicalCSS)('border-bottom', euiTheme.border.thin), "\n    }\n  ");
   return {
-    euiFilterButton: /*#__PURE__*/(0, _react.css)(euiFilterButtonDisplay(euiThemeContext), " ", (0, _global_styling.logicalCSS)('height', controlHeight), " border-radius:0;box-shadow:", leftBoxShadow, ",", bottomBoxShadow, ";&:hover:not(:disabled),&:focus:not(:disabled){text-decoration:none;.euiFilterButton__text{text-decoration:underline;}}&:focus-visible{outline-offset:-", euiTheme.focus.width, ";};label:euiFilterButton;"),
-    withNext: /*#__PURE__*/(0, _react.css)("&+.euiFilterButton{", (0, _global_styling.logicalCSS)('margin-left', "-".concat(euiTheme.size.xs)), "box-shadow:", bottomBoxShadow, ";};label:withNext;"),
+    euiFilterButton: /*#__PURE__*/(0, _react.css)("position:relative;", euiFilterButtonDisplay(euiThemeContext), " ", (0, _global_styling.logicalCSS)('height', controlHeight), " border-radius:0;", leftBorder, " ", bottomBorder, "&:hover:not(:disabled),&:focus:not(:disabled){text-decoration:none;.euiFilterButton__text{text-decoration:underline;}}&:focus-visible{outline-offset:-", euiTheme.focus.width, ";};label:euiFilterButton;"),
+    withNext: /*#__PURE__*/(0, _react.css)("&+.euiFilterButton{", (0, _global_styling.logicalCSS)('margin-left', "-".concat(euiTheme.size.xs)), "&::before{display:none;}};label:withNext;"),
     noGrow: _ref3,
     hasNotification: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
       return x * 6;

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

@@ -24,7 +24,8 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 var euiFilterGroupStyles = exports.euiFilterGroupStyles = function euiFilterGroupStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   var _euiFormVariables = (0, _form.euiFormVariables)(euiThemeContext),
     backgroundColor = _euiFormVariables.backgroundColor,
     borderColor = _euiFormVariables.borderColor,
@@ -32,7 +33,7 @@ var euiFilterGroupStyles = exports.euiFilterGroupStyles = function euiFilterGrou
     controlCompressedBorderRadius = _euiFormVariables.controlCompressedBorderRadius,
     controlCompressedHeight = _euiFormVariables.controlCompressedHeight;
   return {
-    euiFilterGroup: /*#__PURE__*/(0, _react.css)("display:inline-flex;", (0, _global_styling.logicalCSS)('max-width', '100%'), " overflow:hidden;background-color:", backgroundColor, ";box-shadow:inset 0 0 0 ", euiTheme.border.width.thin, " ", borderColor, ";>*:not(.euiFilterButton){", (0, _filter_button.euiFilterButtonDisplay)(euiThemeContext), ";}.euiPopover>.euiFilterButton{", (0, _global_styling.logicalCSS)('width', '100%'), ";}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{flex-wrap:wrap;}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs']), "{display:flex;.euiFilterButton{flex-grow:1;}};label:euiFilterGroup;"),
+    euiFilterGroup: /*#__PURE__*/(0, _react.css)("display:inline-flex;", (0, _global_styling.logicalCSS)('max-width', '100%'), " overflow:hidden;background-color:", backgroundColor, ";", highContrastMode ? "border: ".concat(euiTheme.border.thin, ";") : "box-shadow: inset 0 0 0 ".concat(euiTheme.border.width.thin, " ").concat(borderColor, ";"), ">*:not(.euiFilterButton){", (0, _filter_button.euiFilterButtonDisplay)(euiThemeContext), ";}.euiPopover>.euiFilterButton{", (0, _global_styling.logicalCSS)('width', '100%'), ";}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{flex-wrap:wrap;}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs']), "{display:flex;.euiFilterButton{flex-grow:1;}};label:euiFilterGroup;"),
     fullWidth: _ref,
     uncompressed: /*#__PURE__*/(0, _react.css)("border-radius:", controlBorderRadius, ";", buttonChildrenBorderRadii(controlBorderRadius), ";;label:uncompressed;"),
     compressed: /*#__PURE__*/(0, _react.css)("border-radius:", controlCompressedBorderRadius, ";", buttonChildrenBorderRadii(controlCompressedBorderRadius), " .euiFilterButton{", (0, _global_styling.logicalCSS)('height', controlCompressedHeight), ";};label:compressed;"),

package/optimize/lib/components/filter_group/filter_select_item.styles.js

@@ -19,7 +19,7 @@ var euiFilterSelectItemStyles = exports.euiFilterSelectItemStyles = function eui
   var euiTheme = euiThemeContext.euiTheme;
   var focusStyles = "\n    color: ".concat(euiTheme.colors.primary, ";\n    background-color: ").concat(euiTheme.focus.backgroundColor, ";\n    outline-offset: -").concat(euiTheme.focus.width, ";\n    text-decoration: underline;\n\n    &:disabled {\n      background-color: ").concat((0, _services.transparentize)(euiTheme.colors.disabled, 0.1), ";\n    }\n  ");
   return {
-    euiFilterSelectItem: /*#__PURE__*/(0, _react.css)("display:block;", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalShorthandCSS)('padding', "".concat(euiTheme.size.xs, " ").concat(euiTheme.size.m)), " ", (0, _global_styling.euiFontSize)(euiThemeContext, 's'), " ", (0, _global_styling.logicalTextAlignCSS)('left'), " color:", euiTheme.colors.text, ";", (0, _global_styling.logicalCSS)('border-bottom', "".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.lightestShade)), " &:hover{cursor:pointer;text-decoration:underline;}&:focus{", focusStyles, ";}&:disabled{cursor:not-allowed;text-decoration:none;color:", euiTheme.colors.disabledText, ";};label:euiFilterSelectItem;"),
+    euiFilterSelectItem: /*#__PURE__*/(0, _react.css)("display:block;", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalShorthandCSS)('padding', "".concat(euiTheme.size.xs, " ").concat(euiTheme.size.m)), " ", (0, _global_styling.euiFontSize)(euiThemeContext, 's'), " ", (0, _global_styling.logicalTextAlignCSS)('left'), " color:", euiTheme.colors.text, ";", (0, _global_styling.logicalCSS)('border-bottom', "".concat(euiTheme.border.width.thin, " solid ").concat((0, _services.transparentize)(euiTheme.border.color, 0.4))), " &:hover{cursor:pointer;text-decoration:underline;}&:focus{", focusStyles, ";}&:disabled{cursor:not-allowed;text-decoration:none;color:", euiTheme.colors.disabledText, ";};label:euiFilterSelectItem;"),
     isFocused: /*#__PURE__*/(0, _react.css)(focusStyles, ";;label:isFocused;")
   };
 };

package/optimize/lib/components/flyout/_flyout_close_button.styles.js

@@ -22,7 +22,9 @@ var euiFlyoutCloseButtonStyles = exports.euiFlyoutCloseButtonStyles = function e
   return {
     euiFlyout__closeButton: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('right', euiTheme.size.s), " ", (0, _global_styling.logicalCSS)('top', euiTheme.size.s), " z-index:3;;label:euiFlyout__closeButton;"),
     inside: /*#__PURE__*/(0, _react.css)("background-color:", (0, _services.transparentize)(euiTheme.colors.emptyShade, 0.9), ";;label:inside;"),
-    outside: /*#__PURE__*/(0, _react.css)((0, _mixins.euiShadowXLarge)(euiThemeContext), "animation:none!important;;label:outside;"),
+    outside: /*#__PURE__*/(0, _react.css)((0, _mixins.euiShadowXLarge)(euiThemeContext, {
+      borderAllInHighContrastMode: true
+    }), "animation:none!important;;label:outside;"),
     outsideSide: {
       // `transforms` pull in close buttons a little
       // `!important` is necessary here to override the hover/focus transitions of buttons

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

@@ -43,7 +43,9 @@ var euiFlyoutStyles = exports.euiFlyoutStyles = function euiFlyoutStyles(euiThem
     // Left-side flyouts should only be used for navigation
     left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('left', 0), " clip-path:polygon(0 0, 150% 0, 150% 100%, 0 100%);", _global_styling.euiCanAnimate, "{animation:", euiFlyoutSlideInLeft, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ";};label:left;"),
     // Type
-    overlay: /*#__PURE__*/(0, _react.css)((0, _mixins.euiShadowXLarge)(euiThemeContext), ";;label:overlay;"),
+    overlay: /*#__PURE__*/(0, _react.css)((0, _mixins.euiShadowXLarge)(euiThemeContext, {
+      borderAllInHighContrastMode: true
+    }), ";;label:overlay;"),
     push: {
       push: /*#__PURE__*/(0, _react.css)("clip-path:none;z-index:", Number(euiTheme.levels.flyout) - 1, ";;label:push;"),
       right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-left', euiTheme.border.thick), ";;label:right;"),

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

@@ -67,7 +67,7 @@ var euiFilePickerStyles = exports.euiFilePickerStyles = function euiFilePickerSt
       euiFilePicker__input: _ref4,
       largeInteractive: _ref3
     },
-    euiFilePicker__prompt: /*#__PURE__*/(0, _react.css)("pointer-events:none;font-size:", fontSize, ";line-height:1;", (0, _global_styling.euiTextTruncate)(), " color:", euiTheme.colors.text, ";border:", euiTheme.border.width.thick, " dashed var(--euiFormControlStateColor, ", euiTheme.colors.lightShade, ");", _global_styling.euiCanAnimate, "{transition:border-color ", euiTheme.animation.fast, " ease-in,background-color ", euiTheme.animation.fast, " ease-in;};label:euiFilePicker__prompt;"),
+    euiFilePicker__prompt: /*#__PURE__*/(0, _react.css)("pointer-events:none;font-size:", fontSize, ";line-height:1;", (0, _global_styling.euiTextTruncate)(), " color:", euiTheme.colors.text, ";border:", euiTheme.border.width.thick, " dashed var(--euiFormControlStateColor, ", euiTheme.border.color, ");", _global_styling.euiCanAnimate, "{transition:border-color ", euiTheme.animation.fast, " ease-in,background-color ", euiTheme.animation.fast, " ease-in;};label:euiFilePicker__prompt;"),
     disabled: /*#__PURE__*/(0, _react.css)(formStyles.disabled, ";label:disabled;"),
     // Skip the css() on the default height to avoid generating a className
     uncompressed: formStyles.uncompressed,

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiFormVariables = exports.euiFormMaxWidth = exports.euiFormCustomControlVariables = exports.euiFormCustomControlStyles = exports.euiFormControlText = exports.euiFormControlStyles = exports.euiFormControlReadOnlyStyles = exports.euiFormControlInvalidStyles = exports.euiFormControlFocusStyles = exports.euiFormControlDisabledStyles = exports.euiFormControlDefaultShadow = exports.euiFormControlAutoFillStyles = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _css = require("@emotion/css");
 var _services = require("../../services");
 var _global_styling = require("../../global_styling");
 var _mixins = require("../../themes/amsterdam/global_styling/mixins");
@@ -28,7 +29,8 @@ var euiFormMaxWidth = exports.euiFormMaxWidth = function euiFormMaxWidth(_ref) {
 };
 var euiFormVariables = exports.euiFormVariables = function euiFormVariables(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
-    colorMode = euiThemeContext.colorMode;
+    colorMode = euiThemeContext.colorMode,
+    highContrastMode = euiThemeContext.highContrastMode;
   var isColorDark = colorMode === 'DARK';
   var backgroundColor = isColorDark ? (0, _services.shade)(euiTheme.colors.lightestShade, 0.4) : (0, _services.tint)(euiTheme.colors.lightestShade, 0.6);
   var controlHeight = euiTheme.size.xxl;
@@ -46,14 +48,17 @@ var euiFormVariables = exports.euiFormVariables = function euiFormVariables(euiT
     }),
     iconCompressedAffordance: (0, _global_styling.mathWithUnits)(euiTheme.size.m, function (x) {
       return x * 1.5;
-    })
+    }),
+    stateUnderlineHeight: highContrastMode ? (0, _global_styling.mathWithUnits)(euiTheme.border.width.thick, function (x) {
+      return x * 2;
+    }) : euiTheme.border.width.thick
   };
   var colors = {
     textColor: euiTheme.colors.text,
     backgroundColor: backgroundColor,
     backgroundDisabledColor: (0, _services.darken)(euiTheme.colors.lightestShade, 0.05),
     backgroundReadOnlyColor: euiTheme.colors.emptyShade,
-    borderColor: (0, _services.transparentize)(colorMode === 'DARK' ? euiTheme.colors.ghost : (0, _services.darken)(euiTheme.border.color, 4), 0.1),
+    borderColor: highContrastMode ? euiTheme.border.color : (0, _services.transparentize)(colorMode === 'DARK' ? euiTheme.colors.ghost : (0, _services.darken)(euiTheme.border.color, 4), 0.1),
     controlDisabledColor: euiTheme.colors.mediumShade,
     controlBoxShadow: '0 0 transparent',
     controlPlaceholderText: (0, _services.makeHighContrastColor)(euiTheme.colors.subduedText)(backgroundColor),
@@ -82,6 +87,7 @@ var euiFormVariables = exports.euiFormVariables = function euiFormVariables(euiT
   });
 };
 var euiFormControlStyles = exports.euiFormControlStyles = function euiFormControlStyles(euiThemeContext) {
+  var highContrastMode = euiThemeContext.highContrastMode;
   var form = euiFormVariables(euiThemeContext);
   return {
     shared: "\n      ".concat(euiFormControlText(euiThemeContext), "\n      ").concat(euiFormControlDefaultShadow(euiThemeContext), "\n    "),
@@ -89,7 +95,7 @@ var euiFormControlStyles = exports.euiFormControlStyles = function euiFormContro
     uncompressed: "\n      ".concat((0, _global_styling.logicalCSS)('height', form.controlHeight), "\n      ").concat((0, _global_styling.logicalCSS)('padding-vertical', form.controlPadding), "\n      ").concat((0, _global_styling.logicalCSS)('padding-left', "calc(".concat(form.controlPadding, " + (").concat(form.iconAffordance, " * var(--euiFormControlLeftIconsCount, 0)))")), "\n      ").concat((0, _global_styling.logicalCSS)('padding-right', "calc(".concat(form.controlPadding, " + (").concat(form.iconAffordance, " * var(--euiFormControlRightIconsCount, 0)))")), "\n      border-radius: ").concat(form.controlBorderRadius, ";\n    "),
     compressed: "\n      ".concat((0, _global_styling.logicalCSS)('height', form.controlCompressedHeight), "\n      ").concat((0, _global_styling.logicalCSS)('padding-vertical', form.controlCompressedPadding), "\n      ").concat((0, _global_styling.logicalCSS)('padding-left', "calc(".concat(form.controlCompressedPadding, " + (").concat(form.iconCompressedAffordance, " * var(--euiFormControlLeftIconsCount, 0)))")), "\n      ").concat((0, _global_styling.logicalCSS)('padding-right', "calc(".concat(form.controlCompressedPadding, " + (").concat(form.iconCompressedAffordance, " * var(--euiFormControlRightIconsCount, 0)))")), "\n      border-radius: ").concat(form.controlCompressedBorderRadius, ";\n    "),
     // In group
-    inGroup: "\n      ".concat((0, _global_styling.logicalCSS)('height', '100%'), "\n      box-shadow: none;\n      border-radius: 0;\n    "),
+    inGroup: "\n      ".concat((0, _global_styling.logicalCSS)('height', '100%'), "\n      ").concat(highContrastMode ? 'border: none' : 'box-shadow: none', ";\n      border-radius: 0;\n    "),
     // Widths
     formWidth: "\n      ".concat((0, _global_styling.logicalCSS)('max-width', form.maxWidth), "\n      ").concat((0, _global_styling.logicalCSS)('width', '100%'), "\n    "),
     fullWidth: "\n      ".concat((0, _global_styling.logicalCSS)('max-width', '100%'), "\n      ").concat((0, _global_styling.logicalCSS)('width', '100%'), "\n    "),
@@ -118,24 +124,27 @@ var euiFormControlDefaultShadow = exports.euiFormControlDefaultShadow = function
     withBackgroundColor = _ref2$withBackgroundC === void 0 ? withBackground : _ref2$withBackgroundC,
     _ref2$withBackgroundA = _ref2.withBackgroundAnimation,
     withBackgroundAnimation = _ref2$withBackgroundA === void 0 ? withBackground : _ref2$withBackgroundA;
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   var form = euiFormVariables(euiThemeContext);
 
   // We use inset box-shadow instead of border to skip extra height calculations
-  var border = "\n    border: none;\n    box-shadow: inset 0 0 0 ".concat(euiTheme.border.width.thin, " ").concat(form.borderColor, ";\n  ").trim();
+  var border = !highContrastMode ? "\n    border: none;\n    box-shadow: inset 0 0 0 ".concat(euiTheme.border.width.thin, " ").concat(form.borderColor, ";\n  ").trim() : "border: ".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.border.color, ";");
   var backgroundColor = "\n    background-color: ".concat(form.backgroundColor, ";\n  ").trim();
-  var backgroundGradient = "\n    background-repeat: no-repeat;\n    background-size: 0% 100%;\n    background-image: linear-gradient(to top,\n      var(--euiFormControlStateColor),\n      var(--euiFormControlStateColor) ".concat(euiTheme.border.width.thick, ",\n      transparent ").concat(euiTheme.border.width.thick, ",\n      transparent 100%\n    );\n  ").trim();
+  var backgroundGradient = "\n    background-repeat: no-repeat;\n    background-size: 0% 100%;\n    background-image: linear-gradient(to top,\n      var(--euiFormControlStateColor),\n      var(--euiFormControlStateColor) ".concat(form.stateUnderlineHeight, ",\n      transparent ").concat(form.stateUnderlineHeight, ",\n      transparent 100%\n    );\n  ").trim();
   var backgroundAnimation = "\n    ".concat(_global_styling.euiCanAnimate, " {\n      transition:\n        background-image ").concat(form.animationTiming, ",\n        background-size ").concat(form.animationTiming, ",\n        background-color ").concat(form.animationTiming, ";\n    }\n  ").trim();
   return "\n    ".concat(withBorder ? border : '', "\n    ").concat(withBackgroundColor ? backgroundColor : '', "\n    ").concat(withBackground ? backgroundGradient : '', "\n    ").concat(withBackgroundAnimation ? backgroundAnimation : '', "\n  ");
 };
-var euiFormControlFocusStyles = exports.euiFormControlFocusStyles = function euiFormControlFocusStyles(_ref3) {
-  var euiTheme = _ref3.euiTheme,
-    colorMode = _ref3.colorMode;
-  return "\n  --euiFormControlStateColor: ".concat(euiTheme.colors.primary, ";\n  background-color: ").concat(colorMode === 'DARK' ? (0, _services.shade)(euiTheme.colors.emptyShade, 0.4) : euiTheme.colors.emptyShade, ";\n  background-size: 100% 100%;\n  outline: none; /* Remove all outlines and rely on our own bottom border gradient */\n");
+var euiFormControlFocusStyles = exports.euiFormControlFocusStyles = function euiFormControlFocusStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme,
+    colorMode = euiThemeContext.colorMode;
+  var focusColor = euiTheme.colors.primary;
+  return "\n    --euiFormControlStateColor: ".concat(focusColor, ";\n    background-color: ").concat(colorMode === 'DARK' ? (0, _services.shade)(euiTheme.colors.emptyShade, 0.4) : euiTheme.colors.emptyShade, ";\n    background-size: 100% 100%;\n    outline: none; /* Remove all outlines and rely on our own bottom border gradient */\n    ").concat(euiFormControlHighContrastFallback(euiThemeContext, focusColor), "\n  ");
 };
-var euiFormControlInvalidStyles = exports.euiFormControlInvalidStyles = function euiFormControlInvalidStyles(_ref4) {
-  var euiTheme = _ref4.euiTheme;
-  return "\n  --euiFormControlStateColor: ".concat(euiTheme.colors.danger, ";\n  background-size: 100% 100%;\n");
+var euiFormControlInvalidStyles = exports.euiFormControlInvalidStyles = function euiFormControlInvalidStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var invalidColor = euiTheme.colors.danger;
+  return "\n    --euiFormControlStateColor: ".concat(invalidColor, ";\n    background-size: 100% 100%;\n    ").concat(euiFormControlHighContrastFallback(euiThemeContext, invalidColor), "\n  ");
 };
 var euiFormControlDisabledStyles = exports.euiFormControlDisabledStyles = function euiFormControlDisabledStyles(euiThemeContext) {
   var form = euiFormVariables(euiThemeContext);
@@ -169,6 +178,19 @@ var euiFormControlAutoFillStyles = exports.euiFormControlAutoFillStyles = functi
   // These styles only apply/override Chrome/webkit browsers - Firefox does not set autofill styles
   return "\n    &:-webkit-autofill {\n      -webkit-text-fill-color: ".concat(textColor, ";\n      -webkit-box-shadow: ").concat(borderShadow(borderColor), ", ").concat(backgroundShadow, ";\n\n      &:invalid {\n        -webkit-box-shadow: ").concat(borderShadow(invalidBorder), ", ").concat(backgroundShadow, ";\n      }\n    }\n  ");
 };
+var euiFormControlHighContrastFallback = function euiFormControlHighContrastFallback(euiThemeContext, color) {
+  if (!euiThemeContext.highContrastMode) return '';
+  var _euiFormVariables = euiFormVariables(euiThemeContext),
+    stateUnderlineHeight = _euiFormVariables.stateUnderlineHeight,
+    animationTiming = _euiFormVariables.animationTiming;
+
+  // Windows high contrast themes ignore all background-images that aren't url-based,
+  // so to restore the linear-gradient that provides important visual information, we're
+  // using a static inline SVG workaround
+  var fill = encodeURIComponent(color);
+  var inlineSVG = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='".concat(fill, "' /%3E%3C/svg%3E");
+  return "\n    @media (forced-colors: active) {\n      background-size: 100% ".concat(stateUnderlineHeight, ";\n      background-position: bottom left;\n      background-origin: border-box;\n      background-image: url(\"").concat(inlineSVG, "\");\n    }\n    /* Override the default transition with an animation, since we have to use a static height */\n    @media (forced-colors: active) and (prefers-reduced-motion: no-preference) {\n      transition: none;\n      animation: ").concat( /*#__PURE__*/(0, _css.keyframes)("from{background-size:0% ", stateUnderlineHeight, ";}to{background-size:100% ", stateUnderlineHeight, ";};label:euiFormControlHighContrastFallback;"), " ").concat(animationTiming, " 1 forwards;\n    }\n  ");
+};
 var euiPlaceholderPerBrowser = function euiPlaceholderPerBrowser(content) {
   return "\n  &::-webkit-input-placeholder { ".concat(content, " }\n  &::-moz-placeholder { ").concat(content, " }\n  &:-ms-input-placeholder { ").concat(content, " }\n  &:-moz-placeholder { ").concat(content, " }\n  &::placeholder { ").concat(content, " }\n");
 };
@@ -179,7 +201,8 @@ var euiPlaceholderPerBrowser = function euiPlaceholderPerBrowser(content) {
 
 var euiFormCustomControlVariables = exports.euiFormCustomControlVariables = function euiFormCustomControlVariables(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
-    colorMode = euiThemeContext.colorMode;
+    colorMode = euiThemeContext.colorMode,
+    highContrastMode = euiThemeContext.highContrastMode;
   var sizes = {
     control: euiTheme.size.base,
     lineHeight: euiTheme.size.l,
@@ -187,7 +210,7 @@ var euiFormCustomControlVariables = exports.euiFormCustomControlVariables = func
   };
   var colors = {
     unselected: euiTheme.colors.emptyShade,
-    unselectedBorder: colorMode === 'DARK' ? (0, _services.tint)(euiTheme.colors.lightestShade, 0.31) // WCAG AA requirements
+    unselectedBorder: highContrastMode ? euiTheme.border.color : colorMode === 'DARK' ? (0, _services.tint)(euiTheme.colors.lightestShade, 0.31) // WCAG AA requirements
     : (0, _services.shade)(euiTheme.colors.lightestShade, 0.4),
     selected: euiTheme.colors.primary,
     selectedIcon: euiTheme.colors.emptyShade,
@@ -206,7 +229,8 @@ var euiFormCustomControlVariables = exports.euiFormCustomControlVariables = func
   };
 };
 var euiFormCustomControlStyles = exports.euiFormCustomControlStyles = function euiFormCustomControlStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   var controlVars = euiFormCustomControlVariables(euiThemeContext);
   var centerWithLabel = (0, _global_styling.mathWithUnits)([controlVars.sizes.lineHeight, controlVars.sizes.control], function (x, y) {
     return (x - y) / 2;
@@ -214,18 +238,26 @@ var euiFormCustomControlStyles = exports.euiFormCustomControlStyles = function e
   return {
     wrapper: "\n      display: flex;\n      align-items: flex-start;\n    ",
     input: {
-      fauxInput: "\n        position: relative;\n        ".concat((0, _global_styling.logicalCSS)('height', controlVars.sizes.control), "\n        ").concat((0, _global_styling.logicalCSS)('width', controlVars.sizes.control), "\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        &:has(input:focus-visible) {\n          outline: ").concat(euiTheme.focus.width, " solid ").concat(controlVars.colors.selected, ";\n          outline-offset: ").concat(euiTheme.focus.width, ";\n        }\n\n        ").concat(_global_styling.euiCanAnimate, " {\n          transition-property: background-color, color;\n          transition-duration: ").concat(controlVars.animation.speed, ";\n          transition-timing-function: ").concat(controlVars.animation.easing, ";\n        }\n      "),
+      fauxInput: "\n        position: relative;\n        ".concat((0, _global_styling.logicalCSS)('height', controlVars.sizes.control), "\n        ").concat((0, _global_styling.logicalCSS)('width', controlVars.sizes.control), "\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        /* For Windows high contrast themes, a border must always be rendered, not just a background */\n        border: ").concat(euiTheme.border.width.thin, " solid transparent;\n\n        &:has(input:focus-visible) {\n          outline: ").concat(euiTheme.focus.width, " solid ").concat(controlVars.colors.selected, ";\n          outline-offset: ").concat(euiTheme.focus.width, ";\n        }\n\n        ").concat(_global_styling.euiCanAnimate, " {\n          transition-property: background-color, color;\n          transition-duration: ").concat(controlVars.animation.speed, ";\n          transition-timing-function: ").concat(controlVars.animation.easing, ";\n        }\n      "),
       // TODO: Revert https://github.com/elastic/eui/pull/7981
       // once https://github.com/dperini/nwsapi/issues/123
       // has been fixed, and restore `&:has(+ label)` selector
       hasLabel: "\n        ".concat((0, _global_styling.logicalCSS)('margin-top', centerWithLabel), "\n      "),
       enabled: {
-        selected: "\n          color: ".concat(controlVars.colors.selectedIcon, ";\n          background-color: ").concat(controlVars.colors.selected, ";\n        "),
-        unselected: "\n          color: transparent;\n          background-color: ".concat(controlVars.colors.unselected, ";\n          border: ").concat(euiTheme.border.width.thin, " solid ").concat(controlVars.colors.unselectedBorder, ";\n\n          &:has(input:focus) {\n            border-color: ").concat(controlVars.colors.selected, ";\n          }\n        ")
+        selected: "\n          color: ".concat(controlVars.colors.selectedIcon, ";\n          background-color: ").concat(controlVars.colors.selected, ";\n          border-color: ").concat(controlVars.colors.selected, ";\n        "),
+        unselected: "\n          color: transparent;\n          background-color: ".concat(controlVars.colors.unselected, ";\n          border-color: ").concat(controlVars.colors.unselectedBorder, ";\n\n          &:has(input:focus) {\n            border-color: ").concat(controlVars.colors.selected, ";\n          }\n        ")
       },
       disabled: {
-        selected: "\n          label: disabled;\n          color: ".concat(controlVars.colors.disabledIcon, ";\n          background-color: ").concat(controlVars.colors.disabled, ";\n        "),
-        unselected: "\n          label: disabled;\n          color: ".concat(controlVars.colors.disabled, ";\n          background-color: ").concat(controlVars.colors.disabled, ";\n          cursor: not-allowed;\n        ")
+        get shared() {
+          var borderColor = highContrastMode ? controlVars.colors.disabledIcon : controlVars.colors.disabled;
+          return "\n            label: disabled;\n            cursor: not-allowed;\n            background-color: ".concat(controlVars.colors.disabled, ";\n            border-color: ").concat(borderColor, ";\n          ");
+        },
+        get selected() {
+          return "\n            ".concat(this.shared, "\n            color: ").concat(controlVars.colors.disabledIcon, ";\n          ");
+        },
+        get unselected() {
+          return "\n            ".concat(this.shared, "\n            color: ").concat(controlVars.colors.disabled, ";\n          ");
+        }
       },
       // Looks better centered at different zoom levels than just <EuiIcon size="s" />
       icon: "\n        transform: scale(0.75);\n      ",

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

@@ -56,7 +56,8 @@ var euiFormControlLayoutStyles = exports.euiFormControlLayoutStyles = function e
   };
 };
 var euiFormControlLayoutSideNodeStyles = exports.euiFormControlLayoutSideNodeStyles = function euiFormControlLayoutSideNodeStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   var form = (0, _form.euiFormVariables)(euiThemeContext);
   var uncompressedHeight = (0, _global_styling.mathWithUnits)([form.controlHeight, euiTheme.border.width.thin], function (x, y) {
     return x - y * 2;
@@ -68,8 +69,8 @@ var euiFormControlLayoutSideNodeStyles = exports.euiFormControlLayoutSideNodeSty
   var text = '*:is(.euiFormLabel, .euiText)';
   return {
     euiFormControlLayout__side: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', '100%'), " ", (0, _global_styling.euiTextTruncate)('50%'), " flex-shrink:0;display:flex;align-items:center;gap:", euiTheme.size.xs, ";background-color:", form.appendPrependBackground, ";", buttons, "{transform:none!important;&:focus-visible{outline-offset:-", euiTheme.focus.width, ";}}", text, "{cursor:default;overflow:hidden;text-overflow:ellipsis;}&:not(:has(> ", buttons, ":first-child, > *:first-child > ", buttons, ")){", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.s), ";}&:not(:has(> ", buttons, ":last-child, > *:last-child > ", buttons, ")){", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.s), ";};label:euiFormControlLayout__side;"),
-    append: /*#__PURE__*/(0, _react.css)(";label:append;"),
-    prepend: /*#__PURE__*/(0, _react.css)(";label:prepend;"),
+    append: /*#__PURE__*/(0, _react.css)(highContrastMode ? (0, _global_styling.logicalCSS)('border-left', euiTheme.border.thin) : '', ";;label:append;"),
+    prepend: /*#__PURE__*/(0, _react.css)(highContrastMode ? (0, _global_styling.logicalCSS)('border-right', euiTheme.border.thin) : '', ";;label:prepend;"),
     uncompressed: "\n      ".concat(text, " {\n        ").concat((0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), "\n        line-height: ").concat(uncompressedHeight, ";\n      }\n\n      ").concat(buttons, " {\n        ").concat((0, _global_styling.logicalCSS)('height', uncompressedHeight), "\n      }\n\n      .euiButtonIcon {\n        flex-shrink: 0;\n        ").concat((0, _global_styling.logicalCSS)('width', euiTheme.size.xl), "\n      }\n    "),
     compressed: /*#__PURE__*/(0, _react.css)(text, "{", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xxs), " line-height:", compressedHeight, ";}", buttons, "{", (0, _global_styling.logicalCSS)('height', compressedHeight), ";}.euiButtonIcon{flex-shrink:0;", (0, _global_styling.logicalCSS)('width', euiTheme.size.xl), ";};label:compressed;")
   };

package/optimize/lib/components/form/form_control_layout/form_control_layout_clear_button.js

@@ -30,11 +30,12 @@ var EuiFormControlLayoutClearButton = exports.EuiFormControlLayoutClearButton =
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiFormControlLayoutClearButton', className);
   var styles = (0, _services.useEuiMemoizedStyles)(_form_control_layout_clear_button.EuiFormControlLayoutClearButtonStyles);
-  var iconStyles = [styles.euiFormControlLayoutClearButton__icon, styles.size[size]];
+  var cssStyles = [styles.euiFormControlLayoutClearButton, styles.size[size]];
+  var iconStyles = [styles.icon.euiFormControlLayoutClearButton__icon, styles.icon.size[size]];
   var ariaLabel = (0, _i18n.useEuiI18n)('euiFormControlLayoutClearButton.label', 'Clear input');
   return (0, _react2.jsx)("button", (0, _extends2.default)({
     type: "button",
-    css: styles.euiFormControlLayoutClearButton,
+    css: cssStyles,
     className: classes,
     onClick: onClick,
     "aria-label": ariaLabel

package/optimize/lib/components/form/form_control_layout/form_control_layout_clear_button.styles.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EuiFormControlLayoutClearButtonStyles = void 0;
 var _react = require("@emotion/react");
+var _global_styling = require("../../../global_styling");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -18,11 +19,21 @@ var EuiFormControlLayoutClearButtonStyles = exports.EuiFormControlLayoutClearBut
     colorMode = _ref.colorMode;
   var backgroundColor = colorMode === 'DARK' ? euiTheme.colors.darkShade : euiTheme.colors.mediumShade;
   return {
-    euiFormControlLayoutClearButton: /*#__PURE__*/(0, _react.css)("pointer-events:all;background-color:", backgroundColor, ";border-radius:50%;line-height:0;&:disabled{cursor:not-allowed;background-color:", euiTheme.colors.disabled, ";};label:euiFormControlLayoutClearButton;"),
-    euiFormControlLayoutClearButton__icon: /*#__PURE__*/(0, _react.css)("transform:scale(0.5);fill:", euiTheme.colors.emptyShade, ";stroke:", euiTheme.colors.emptyShade, ";;label:euiFormControlLayoutClearButton__icon;"),
+    euiFormControlLayoutClearButton: /*#__PURE__*/(0, _react.css)("pointer-events:all;display:flex;justify-content:center;align-items:center;border-radius:50%;border-style:solid;border-color:", backgroundColor, ";&:disabled{cursor:not-allowed;background-color:", euiTheme.colors.disabled, ";};label:euiFormControlLayoutClearButton;"),
     size: {
-      s: /*#__PURE__*/(0, _react.css)("stroke-width:", euiTheme.size.xs, ";;label:s;"),
-      m: /*#__PURE__*/(0, _react.css)("stroke-width:", euiTheme.size.xxs, ";;label:m;")
+      s: "\n        ".concat((0, _global_styling.logicalSizeCSS)(euiTheme.size.m), "\n        border-width: ").concat((0, _global_styling.mathWithUnits)(euiTheme.size.m, function (x) {
+        return x / 2;
+      }), ";\n      "),
+      m: "\n        ".concat((0, _global_styling.logicalSizeCSS)(euiTheme.size.base), "\n        border-width: ").concat((0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
+        return x / 2;
+      }), ";\n      ")
+    },
+    icon: {
+      euiFormControlLayoutClearButton__icon: /*#__PURE__*/(0, _react.css)("transform:scale(0.5);fill:", euiTheme.colors.emptyShade, ";stroke:", euiTheme.colors.emptyShade, ";;label:euiFormControlLayoutClearButton__icon;"),
+      size: {
+        s: /*#__PURE__*/(0, _react.css)("stroke-width:", euiTheme.size.xs, ";;label:s;"),
+        m: /*#__PURE__*/(0, _react.css)("stroke-width:", euiTheme.size.xxs, ";;label:m;")
+      }
     }
   };
 };

package/optimize/lib/components/form/form_control_layout/form_control_layout_delimited.styles.js

@@ -53,4 +53,4 @@ var euiFormControlLayoutDelimited__delimiter = exports.euiFormControlLayoutDelim
   styles: "align-self:stretch;flex-grow:0;display:flex;align-items:center;line-height:1;label:euiFormControlLayoutDelimited__delimiter;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var euiFormControlLayoutDelimited__input = exports.euiFormControlLayoutDelimited__input = /*#__PURE__*/(0, _react.css)("box-shadow:none;border-radius:0;text-align:center;", (0, _global_styling.logicalCSS)('height', '100%'), ";;label:euiFormControlLayoutDelimited__input;");
+var euiFormControlLayoutDelimited__input = exports.euiFormControlLayoutDelimited__input = /*#__PURE__*/(0, _react.css)("box-shadow:none;border:none;border-radius:0;text-align:center;", (0, _global_styling.logicalCSS)('height', '100%'), ";;label:euiFormControlLayoutDelimited__input;");

package/optimize/lib/components/form/radio/radio.js

@@ -46,7 +46,7 @@ var EuiRadio = exports.EuiRadio = function EuiRadio(_ref) {
     className: "euiRadio__circle"
   }, (0, _react2.jsx)(_icon.EuiIcon, {
     css: styles.input.euiRadio__icon,
-    type: "dot"
+    type: checked ? 'dot' : 'empty' // Note that the icon does explicitly need to be empty for Windows high contrast themes
   }), (0, _react2.jsx)("input", {
     css: styles.input.euiRadio__input,
     className: "euiRadio__input",

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

@@ -41,6 +41,7 @@ var euiRangeVariables = exports.euiRangeVariables = function euiRangeVariables(e
     trackBorderRadius: euiTheme.border.radius.medium,
     tickHeight: trackHeight,
     tickWidth: euiTheme.size.xs,
+    tickColor: euiTheme.colors.lightShade,
     disabledOpacity: 0.5,
     highlightHeight: trackHeight,
     height: form.controlHeight,
@@ -92,7 +93,10 @@ var euiRangeThumbPerBrowser = exports.euiRangeThumbPerBrowser = function euiRang
 };
 var euiRangeThumbFocus = exports.euiRangeThumbFocus = function euiRangeThumbFocus(euiThemeContext, color) {
   var range = euiRangeVariables(euiThemeContext);
-  return "\n   ".concat(euiRangeThumbBorder(euiThemeContext), ";\n   ").concat(euiRangeThumbFocusBoxShadow(euiThemeContext), ";\n   background-color: ").concat(color || range.focusColor, ";\n  ");
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
+  var backgroundColor = color || range.focusColor;
+  return "\n    ".concat(euiRangeThumbBorder(euiThemeContext), ";\n    ").concat(euiRangeThumbFocusBoxShadow(euiThemeContext), ";\n    background-color: ").concat(backgroundColor, ";\n    ").concat(highContrastMode ? "outline: ".concat(euiTheme.border.width.thick, " solid ").concat(backgroundColor, ";") : '', "\n  ");
 };
 var euiRangeStyles = exports.euiRangeStyles = function euiRangeStyles(_ref) {
   var euiTheme = _ref.euiTheme;

package/optimize/lib/components/form/range/range_highlight.styles.js

@@ -24,7 +24,8 @@ var euiRangeHighlightStyles = exports.euiRangeHighlightStyles = function euiRang
 var euiRangeHighlightProgressStyles = exports.euiRangeHighlightProgressStyles = function euiRangeHighlightProgressStyles(euiThemeContext) {
   var range = (0, _range.euiRangeVariables)(euiThemeContext);
   return {
-    euiRangeHighlight__progress: /*#__PURE__*/(0, _react.css)("block-size:", range.highlightHeight, ";border-radius:", range.trackBorderRadius, ";background-color:", range.highlightColor, ";.euiRangeSlider:focus-visible~.euiRangeHighlight &,.euiRangeThumb:focus-visible~.euiRangeHighlight &,.euiRangeDraggable:focus~.euiRangeHighlight &{background-color:", range.focusColor, ";};label:euiRangeHighlight__progress;")
+    // Use border instead of height+background-color to account for Windows high contrast themes
+    euiRangeHighlight__progress: /*#__PURE__*/(0, _react.css)("border-block-start:", range.highlightHeight, " solid ", range.highlightColor, ";border-radius:", range.trackBorderRadius, ";.euiRangeSlider:focus-visible~.euiRangeHighlight &,.euiRangeThumb:focus-visible~.euiRangeHighlight &,.euiRangeDraggable:focus~.euiRangeHighlight &{border-color:", range.focusColor, ";};label:euiRangeHighlight__progress;")
   };
 };
 var euiRangeHighlightLevelsWrapperStyles = exports.euiRangeHighlightLevelsWrapperStyles = function euiRangeHighlightLevelsWrapperStyles(euiThemeContext) {

package/optimize/lib/components/form/range/range_levels.js

@@ -38,7 +38,7 @@ var EuiRangeLevels = exports.EuiRangeLevels = function EuiRangeLevels(_ref) {
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _range_levels.euiRangeLevelsStyles)(euiTheme);
-  var cssStyles = [styles.euiRangeLevels, showTicks && styles.hasTicks, showRange && styles.hasRange];
+  var cssStyles = [styles.euiRangeLevels, showTicks && styles.hasTicks];
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     className: "euiRangeLevels",
     css: cssStyles
@@ -50,6 +50,14 @@ var EuiRangeLevels = exports.EuiRangeLevels = function EuiRangeLevels(_ref) {
       max: max,
       trackWidth: trackWidth
     });
+  }), showRange &&
+  // This must be an <svg> element (as opposed to a pseudo element or standard div)
+  // in order for Windows high contrast themes to respect its background image
+  (0, _react2.jsx)("svg", {
+    className: "euiRangeLevels__overlay",
+    css: styles.euiRangeLevels__overlay,
+    role: "img",
+    "aria-hidden": "true"
   }));
 };
 
@@ -90,6 +98,7 @@ var EuiRangeLevelElement = function EuiRangeLevelElement(_ref2) {
     return (0, _global_styling.logicalStyles)({
       left: "calc(".concat(left, "% + ").concat(leftOffset, "px)"),
       right: "calc(".concat(100 - right, "% - ").concat(rightOffset, "px)"),
+      width: "calc(".concat(right - left, "% + ").concat(rightOffset - leftOffset, "px)"),
       backgroundColor: !isNamedColor ? color : undefined
     });
   }, [levelMin, levelMax, min, max, trackWidth, isNamedColor, color]);
@@ -97,11 +106,17 @@ var EuiRangeLevelElement = function EuiRangeLevelElement(_ref2) {
   var euiTheme = (0, _services.useEuiTheme)();
   var levelStyles = (0, _range_levels.euiRangeLevelStyles)(euiTheme);
   var cssLevelStyles = [levelStyles.euiRangeLevel, isNamedColor ? levelStyles[color] : levelStyles.customColor];
-  return (0, _react2.jsx)("span", (0, _extends2.default)({
-    style: styles,
-    className: levelClasses,
-    css: cssLevelStyles
-  }, levelRest));
+  return (
+    // This must be an <svg> element (as opposed to a span/div) in order
+    // for Windows high contrast themes to respect its background colors
+    (0, _react2.jsx)("svg", (0, _extends2.default)({
+      style: styles,
+      className: levelClasses,
+      css: cssLevelStyles,
+      role: "img",
+      "aria-hidden": "true"
+    }, levelRest))
+  );
 };
 var validateLevelIsInRange = function validateLevelIsInRange(level, _ref3) {
   var min = _ref3.min,

package/optimize/lib/components/form/range/range_levels.styles.js

@@ -25,7 +25,7 @@ var euiRangeLevelsStyles = exports.euiRangeLevelsStyles = function euiRangeLevel
   var stripesBackground = "repeating-linear-gradient(\n    -45deg,\n    ".concat((0, _services.transparentize)(stripeColor, 0.5), ",\n    ").concat((0, _services.transparentize)(stripeColor, 0.5), " 25%,\n    ").concat((0, _services.transparentize)(stripeColor, 0.7), " 25%,\n    ").concat((0, _services.transparentize)(stripeColor, 0.7), " 50%,\n    ").concat((0, _services.transparentize)(stripeColor, 0.5), " 50%\n  )");
   return {
     euiRangeLevels: /*#__PURE__*/(0, _react.css)("display:flex;justify-content:stretch;position:absolute;inset-inline:0;inset-block-start:", range.trackTopPositionWithoutTicks, ";z-index:", range.levelsZIndex, ";;label:euiRangeLevels;"),
-    hasRange: /*#__PURE__*/(0, _react.css)("&::after{content:'';position:absolute;block-size:", range.trackHeight, ";inline-size:100%;background-image:", stripesBackground, ";background-size:", euiTheme.size.xs, " ", euiTheme.size.xs, ";border-radius:", range.trackBorderRadius, ";};label:hasRange;"),
+    euiRangeLevels__overlay: /*#__PURE__*/(0, _react.css)("position:absolute;block-size:", range.trackHeight, ";inline-size:100%;background-image:", stripesBackground, ";background-size:", euiTheme.size.xs, " ", euiTheme.size.xs, ";border-radius:", range.trackBorderRadius, ";;label:euiRangeLevels__overlay;"),
     hasTicks: /*#__PURE__*/(0, _react.css)("inset-block-start:", range.trackTopPositionWithTicks, ";;label:hasTicks;")
   };
 };
@@ -33,7 +33,7 @@ var euiRangeLevelStyles = exports.euiRangeLevelStyles = function euiRangeLevelSt
   var euiTheme = euiThemeContext.euiTheme;
   var range = (0, _range.euiRangeVariables)(euiThemeContext);
   return {
-    euiRangeLevel: /*#__PURE__*/(0, _react.css)("display:block;position:absolute;block-size:", range.trackHeight, ";margin-block:0;&:first-child{margin-inline-start:0;border-start-start-radius:", range.trackBorderRadius, ";border-end-start-radius:", range.trackBorderRadius, ";}&:last-child{margin-inline-end:0;border-start-end-radius:", range.trackBorderRadius, ";border-end-end-radius:", range.trackBorderRadius, ";};label:euiRangeLevel;"),
+    euiRangeLevel: /*#__PURE__*/(0, _react.css)("display:block;position:absolute;block-size:", range.trackHeight, ";margin-block:0;&:first-child{margin-inline-start:0;border-start-start-radius:", range.trackBorderRadius, ";border-end-start-radius:", range.trackBorderRadius, ";}&:last-child,&:has(+ .euiRangeLevels__overlay){margin-inline-end:0;border-start-end-radius:", range.trackBorderRadius, ";border-end-end-radius:", range.trackBorderRadius, ";};label:euiRangeLevel;"),
     primary: /*#__PURE__*/(0, _react.css)("background-color:", (0, _range_levels_colors.euiRangeLevelColor)('primary', euiTheme), ";;label:primary;"),
     success: /*#__PURE__*/(0, _react.css)("background-color:", (0, _range_levels_colors.euiRangeLevelColor)('success', euiTheme), ";;label:success;"),
     warning: /*#__PURE__*/(0, _react.css)("background-color:", (0, _range_levels_colors.euiRangeLevelColor)('warning', euiTheme), ";;label:warning;"),

package/optimize/lib/components/form/range/range_thumb.styles.js

@@ -23,12 +23,16 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 var euiRangeThumbStyles = exports.euiRangeThumbStyles = function euiRangeThumbStyles(euiThemeContext) {
+  var highContrastMode = euiThemeContext.highContrastMode;
   var range = (0, _range.euiRangeVariables)(euiThemeContext);
   return {
     // Base
     euiRangeThumb: /*#__PURE__*/(0, _react.css)((0, _range.euiRangeThumbStyle)(euiThemeContext), " content:'';position:absolute;inset-inline-start:0;inset-block-start:50%;margin-block-start:", (0, _global_styling.mathWithUnits)(range.thumbHeight, function (x) {
       return x / 2 * -1;
-    }), ";pointer-events:none;z-index:", range.thumbZIndex, ";&:focus{", (0, _range.euiRangeThumbFocus)(euiThemeContext), " outline:none;};label:euiRangeThumb;"),
+    }), ";pointer-events:none;z-index:", range.thumbZIndex, ";&:focus{", (0, _range.euiRangeThumbFocus)(euiThemeContext), " ", highContrastMode ?
+    // For whatever reason, the outline renders oddly on the non-native thumbs,
+    // so opt to only show it on Windows high contrast themes
+    '@media (forced-colors: none) { outline: none; }' : '', ";};label:euiRangeThumb;"),
     hasTicks: _ref
   };
 };

package/optimize/lib/components/form/range/range_ticks.styles.js

@@ -16,7 +16,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 var tickStyles = function tickStyles(_ref4, range) {
   var euiTheme = _ref4.euiTheme;
-  return "\n    position: absolute;\n    ".concat((0, _global_styling.logicalCSS)('top', 0), ";\n    ").concat((0, _global_styling.logicalSizeCSS)(euiTheme.size.xs, euiTheme.size.xs), ";\n    background-color: ").concat(euiTheme.colors.lightShade, ";\n    inline-size: ").concat(range.tickWidth, ";\n    block-size: ").concat(range.tickHeight, ";\n    border-radius: ").concat(euiTheme.border.radius.small, ";\n  ");
+  return "\n    position: absolute;\n    ".concat((0, _global_styling.logicalCSS)('top', 0), ";\n    block-size: ").concat(range.tickHeight, ";\n    ").concat((0, _global_styling.logicalCSS)('border-left', "".concat(range.tickWidth, " solid ").concat(range.tickColor)), "\n    border-radius: ").concat(euiTheme.border.radius.small, ";\n  ");
 };
 var _ref3 = process.env.NODE_ENV === "production" ? {
   name: "1sbhdc4-euiRangeTicks",

package/optimize/lib/components/form/range/range_tooltip.styles.js

@@ -26,24 +26,25 @@ var euiRangeTooltipStyles = exports.euiRangeTooltipStyles = function euiRangeToo
   };
 };
 var euiToolTipBackgroundColor = function euiToolTipBackgroundColor(euiTheme, colorMode) {
-  return colorMode === _services.COLOR_MODES_STANDARD.dark ? (0, _services.shade)(euiTheme.colors.emptyShade, 1) : (0, _services.tint)(euiTheme.colors.fullShade, 0.25);
+  return colorMode === 'DARK' ? (0, _services.shade)(euiTheme.colors.emptyShade, 1) : (0, _services.tint)(euiTheme.colors.fullShade, 0.25);
 };
 var euiRangeTooltipValueStyles = exports.euiRangeTooltipValueStyles = function euiRangeTooltipValueStyles(euiThemeContext) {
   var range = (0, _range.euiRangeVariables)(euiThemeContext);
   var euiTheme = euiThemeContext.euiTheme,
-    colorMode = euiThemeContext.colorMode;
+    colorMode = euiThemeContext.colorMode,
+    highContrastMode = euiThemeContext.highContrastMode;
   var arrowSize = euiTheme.size.m;
-  var arrowSizeInt = parseInt(arrowSize, 10);
-  var arrowMinusSize = "".concat((arrowSizeInt / 2 - 1) * -1, "px"); // Shift arrow 1px more than half its size to account for border radius
-
+  var arrowMinusSize = (0, _global_styling.mathWithUnits)(arrowSize, function (x) {
+    return x / -2;
+  });
   return {
     euiRangeTooltip__value: /*#__PURE__*/(0, _react.css)("position:absolute;inset-block-start:50%;max-inline-size:", (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
       return x * 16;
-    }), ";padding-block:", euiTheme.size.xxs, ";padding-inline:", euiTheme.size.s, ";transform:translateX(0) translateY(-50%);", (0, _global_styling.euiFontSize)(euiThemeContext, 's'), " line-height:", (0, _global_styling.euiFontSize)(euiThemeContext, 's').lineHeight, ";color:", euiTheme.colors.ghost, ";background-color:", euiToolTipBackgroundColor(euiTheme, colorMode), ";border:", euiTheme.border.width.thin, " solid ", euiToolTipBackgroundColor(euiTheme, colorMode), ";border-radius:", euiTheme.border.radius.small, ";&::before{content:'';position:absolute;inset-block-end:50%;inline-size:", arrowSize, ";block-size:", arrowSize, ";transform-origin:center;transform:translateY(50%) rotateZ(45deg);background-color:", euiToolTipBackgroundColor(euiTheme, colorMode), ";border-radius:", (0, _global_styling.mathWithUnits)(euiTheme.border.radius.small, function (x) {
+    }), ";padding-block:", euiTheme.size.xxs, ";padding-inline:", euiTheme.size.s, ";transform:translateX(0) translateY(-50%);", (0, _global_styling.euiFontSize)(euiThemeContext, 's'), " line-height:", (0, _global_styling.euiFontSize)(euiThemeContext, 's').lineHeight, ";color:", euiTheme.colors.ghost, ";background-color:", euiToolTipBackgroundColor(euiTheme, colorMode), ";border:", euiTheme.border.width.thin, " solid ", highContrastMode ? euiTheme.border.color : colorMode === 'DARK' ? euiTheme.colors.mediumShade : euiTheme.colors.fullShade, ";border-radius:", euiTheme.border.radius.small, ";&::before{content:'';position:absolute;inset-block-end:50%;inline-size:", arrowSize, ";block-size:", arrowSize, ";transform-origin:center;transform:translateY(50%) rotateZ(45deg);background-color:", euiToolTipBackgroundColor(euiTheme, colorMode), ";border-radius:", (0, _global_styling.mathWithUnits)(euiTheme.border.radius.small, function (x) {
       return x / 2;
     }), ";};label:euiRangeTooltip__value;"),
-    left: /*#__PURE__*/(0, _react.css)("margin-inline-end:", euiTheme.size.l, ";&::before{inset-inline-end:", arrowMinusSize, ";};label:left;"),
-    right: /*#__PURE__*/(0, _react.css)("margin-inline-start:", euiTheme.size.l, ";&::before{inset-inline-start:", arrowMinusSize, ";};label:right;"),
+    left: /*#__PURE__*/(0, _react.css)("margin-inline-end:", euiTheme.size.l, ";&::before{inset-inline-end:", arrowMinusSize, ";", (0, _global_styling.logicalCSS)('border-top', 'inherit'), " ", (0, _global_styling.logicalCSS)('border-right', 'inherit'), ";};label:left;"),
+    right: /*#__PURE__*/(0, _react.css)("margin-inline-start:", euiTheme.size.l, ";&::before{inset-inline-start:", arrowMinusSize, ";", (0, _global_styling.logicalCSS)('border-bottom', 'inherit'), " ", (0, _global_styling.logicalCSS)('border-left', 'inherit'), ";};label:right;"),
     hasTicks: /*#__PURE__*/(0, _react.css)("inset-block-start:", (0, _global_styling.mathWithUnits)(range.thumbWidth, function (x) {
       return x / 2;
     }), ";;label:hasTicks;")

package/optimize/lib/components/form/range/range_track.styles.js

@@ -15,10 +15,11 @@ var _range = require("./range.styles");
  */
 
 var euiRangeTrackStyles = exports.euiRangeTrackStyles = function euiRangeTrackStyles(euiThemeContext) {
+  var highContrastMode = euiThemeContext.highContrastMode;
   var range = (0, _range.euiRangeVariables)(euiThemeContext);
   return {
     // Base
-    euiRangeTrack: /*#__PURE__*/(0, _react.css)("block-size:100%;flex-grow:1;position:relative;align-self:flex-start;&::after{content:'';display:block;position:absolute;inset-block-start:", range.trackTopPositionWithoutTicks, ";inset-inline-start:0;block-size:", range.trackHeight, ";inline-size:", range.trackWidth, ";background:", range.trackColor, ";border-radius:", range.trackBorderRadius, ";};label:euiRangeTrack;"),
+    euiRangeTrack: /*#__PURE__*/(0, _react.css)("block-size:100%;flex-grow:1;position:relative;align-self:flex-start;&::after{content:'';display:block;position:absolute;inset-block-start:", range.trackTopPositionWithoutTicks, ";inset-inline-start:0;inline-size:", range.trackWidth, ";border-block-start:", range.trackHeight, " solid ", range.trackColor, ";border-radius:", range.trackBorderRadius, ";", highContrastMode ? '@media (forced-colors:active) { opacity: 0.25; }' : '', ";};label:euiRangeTrack;"),
     hasTicks: /*#__PURE__*/(0, _react.css)("margin-inline-start:1em;margin-inline-end:1em;&::after{inset-block-start:", range.trackTopPositionWithTicks, ";};label:hasTicks;"),
     disabled: /*#__PURE__*/(0, _react.css)("opacity:", range.disabledOpacity, ";;label:disabled;"),
     hasLevels: /*#__PURE__*/(0, _react.css)(";label:hasLevels;")