@elastic/eui 100.0.0 → 101.0.0

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

@@ -11,6 +11,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 
 import { makeHighContrastColor } from '../../services';
 import { logicalCSS, mathWithUnits, euiCanAnimate, euiFontSize } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 
 // There are multiple components that only need the form max-width size &
 // don't need the extra overhead/color computing expense of every form var.
@@ -20,8 +21,9 @@ export var euiFormMaxWidth = function euiFormMaxWidth(_ref) {
   return euiTheme.components.forms.maxWidth;
 };
 export var euiFormVariables = function euiFormVariables(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
-  var backgroundColor = euiTheme.components.forms.background;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
+  var backgroundColor = highContrastMode ? euiTheme.colors.emptyShade : euiTheme.components.forms.background;
   var controlHeight = euiTheme.size.xxl;
   var controlCompressedHeight = euiTheme.size.xl;
   var sizes = {
@@ -37,7 +39,10 @@ export var euiFormVariables = function euiFormVariables(euiThemeContext) {
     }),
     iconCompressedAffordance: mathWithUnits(euiTheme.size.m, function (x) {
       return x * 1.5;
-    })
+    }),
+    stateUnderlineHeight: highContrastMode ? mathWithUnits(euiTheme.border.width.thick, function (x) {
+      return x * 2;
+    }) : euiTheme.border.width.thick
   };
   var colors = {
     textColor: euiTheme.colors.textParagraph,
@@ -45,10 +50,10 @@ export var euiFormVariables = function euiFormVariables(euiThemeContext) {
     backgroundColor: backgroundColor,
     backgroundDisabledColor: euiTheme.components.forms.backgroundDisabled,
     backgroundReadOnlyColor: euiTheme.components.forms.backgroundReadOnly,
-    borderColor: euiTheme.components.forms.border,
+    borderColor: highContrastMode ? euiTheme.border.color : euiTheme.components.forms.border,
     controlDisabledColor: euiTheme.components.forms.controlBackgroundDisabled,
     controlBoxShadow: '0 0 transparent',
-    controlPlaceholderText: makeHighContrastColor(euiTheme.colors.subduedText)(backgroundColor),
+    controlPlaceholderText: makeHighContrastColor(euiTheme.colors.textSubdued)(backgroundColor),
     appendPrependBackground: euiTheme.components.forms.prependBackground
   };
   var controlLayout = {
@@ -81,7 +86,10 @@ export var euiFormControlStyles = function euiFormControlStyles(euiThemeContext)
     uncompressed: "\n      ".concat(logicalCSS('height', form.controlHeight), "\n      ").concat(logicalCSS('padding-vertical', form.controlPadding), "\n      ").concat(logicalCSS('padding-left', "calc(".concat(form.controlPadding, " + (").concat(form.iconAffordance, " * var(--euiFormControlLeftIconsCount, 0)))")), "\n      ").concat(logicalCSS('padding-right', "calc(".concat(form.controlPadding, " + (").concat(form.iconAffordance, " * var(--euiFormControlRightIconsCount, 0)))")), "\n      border-radius: ").concat(form.controlBorderRadius, ";\n    "),
     compressed: "\n      ".concat(logicalCSS('height', form.controlCompressedHeight), "\n      ").concat(logicalCSS('padding-vertical', form.controlCompressedPadding), "\n      ").concat(logicalCSS('padding-left', "calc(".concat(form.controlCompressedPadding, " + (").concat(form.iconCompressedAffordance, " * var(--euiFormControlLeftIconsCount, 0)))")), "\n      ").concat(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(logicalCSS('height', '100%'), "\n      box-shadow: none;\n      border-radius: 0;\n    "),
+    inGroup: "\n      ".concat(logicalCSS('height', '100%'), "\n      ").concat(highContrastModeStyles(euiThemeContext, {
+      none: 'box-shadow: none;',
+      preferred: 'border: none;'
+    }), "\n      border-radius: 0;\n    "),
     // Widths
     formWidth: "\n      ".concat(logicalCSS('max-width', form.maxWidth), "\n      ").concat(logicalCSS('width', '100%'), "\n    "),
     fullWidth: "\n      ".concat(logicalCSS('max-width', '100%'), "\n      ").concat(logicalCSS('width', '100%'), "\n    "),
@@ -112,21 +120,30 @@ export var euiFormControlDefaultShadow = function euiFormControlDefaultShadow(eu
     withBackgroundAnimation = _ref2$withBackgroundA === void 0 ? withBackground : _ref2$withBackgroundA;
   var euiTheme = euiThemeContext.euiTheme;
   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 = highContrastModeStyles(euiThemeContext, {
+    // We use inset box-shadow instead of border to skip extra height calculations
+    none: "\n      border: none;\n      box-shadow: inset 0 0 0 ".concat(euiTheme.border.width.thin, " ").concat(form.borderColor, ";\n    "),
+    // In high contrast mode, this doesn't matter - we need to prioritize visibility
+    preferred: "\n      border: ".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.border.color, ";\n    ")
+  });
   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 = highContrastModeStyles(euiThemeContext, {
+    none: "\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    "),
+    // Windows high contrast mode overrides/hides background gradients - we'll need another approach
+    forced: "\n      background-repeat: no-repeat;\n      background-size: 0% ".concat(form.stateUnderlineHeight, ";\n      background-position: bottom left;\n      background-origin: border-box;\n    ")
+  });
   var backgroundAnimation = "\n    ".concat(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  ");
 };
-export var euiFormControlFocusStyles = function euiFormControlFocusStyles(_ref3) {
-  var euiTheme = _ref3.euiTheme;
-  return "\n  --euiFormControlStateColor: ".concat(euiTheme.colors.primary, ";\n  background-color: ").concat(euiTheme.components.forms.backgroundFocused, ";\n  background-size: 100% 100%;\n  outline: none; /* Remove all outlines and rely on our own bottom border gradient */\n");
+export var euiFormControlFocusStyles = function euiFormControlFocusStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var focusColor = euiTheme.colors.primary;
+  return "\n    --euiFormControlStateColor: ".concat(focusColor, ";\n    background-color: ").concat(euiTheme.components.forms.backgroundFocused, ";\n    ").concat(euiFormControlShowBackgroundUnderline(euiThemeContext, focusColor), "\n    outline: none; /* Remove all outlines and rely on our own bottom border gradient */\n  ");
 };
-export var euiFormControlInvalidStyles = function euiFormControlInvalidStyles(_ref4) {
-  var euiTheme = _ref4.euiTheme;
-  return "\n  --euiFormControlStateColor: ".concat(euiTheme.colors.danger, ";\n  background-size: 100% 100%;\n");
+export var euiFormControlInvalidStyles = function euiFormControlInvalidStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var invalidColor = euiTheme.colors.danger;
+  return "\n    --euiFormControlStateColor: ".concat(invalidColor, ";\n    ").concat(euiFormControlShowBackgroundUnderline(euiThemeContext, invalidColor), "\n  ");
 };
 export var euiFormControlDisabledStyles = function euiFormControlDisabledStyles(euiThemeContext) {
   var form = euiFormVariables(euiThemeContext);
@@ -134,7 +151,9 @@ export var euiFormControlDisabledStyles = function euiFormControlDisabledStyles(
 };
 export var euiFormControlReadOnlyStyles = function euiFormControlReadOnlyStyles(euiThemeContext) {
   var form = euiFormVariables(euiThemeContext);
-  return "\n    cursor: default;\n    color: ".concat(form.textColor, ";\n    -webkit-text-fill-color: ").concat(form.textColor, "; /* Required for Safari */\n\n    background-color: ").concat(form.backgroundReadOnlyColor, ";\n    --euiFormControlStateColor: transparent;\n  ");
+  return "\n    cursor: default;\n    color: ".concat(form.textColor, ";\n    -webkit-text-fill-color: ").concat(form.textColor, "; /* Required for Safari */\n\n    background-color: ").concat(form.backgroundReadOnlyColor, ";\n    --euiFormControlStateColor: transparent;\n    ").concat(highContrastModeStyles(euiThemeContext, {
+    forced: 'background-image: none;'
+  }), "\n  ");
 };
 export var euiFormControlAutoFillStyles = function euiFormControlAutoFillStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
@@ -157,6 +176,20 @@ export var euiFormControlAutoFillStyles = function euiFormControlAutoFillStyles(
   // 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  ");
 };
+export var euiFormControlShowBackgroundUnderline = function euiFormControlShowBackgroundUnderline(euiThemeContext, color) {
+  if (euiThemeContext.highContrastMode !== 'forced') {
+    return 'background-size: 100% 100%;';
+  }
+
+  // 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");
+  var _euiFormVariables = euiFormVariables(euiThemeContext),
+    stateUnderlineHeight = _euiFormVariables.stateUnderlineHeight;
+  return "\n    background-size: 100% ".concat(stateUnderlineHeight, ";\n    background-image: url(\"").concat(inlineSVG, "\");\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");
 };
@@ -166,7 +199,8 @@ var euiPlaceholderPerBrowser = function euiPlaceholderPerBrowser(content) {
  */
 
 export var euiFormCustomControlVariables = function euiFormCustomControlVariables(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   var sizes = {
     control: euiTheme.size.base,
     lineHeight: euiTheme.size.l,
@@ -174,14 +208,14 @@ export var euiFormCustomControlVariables = function euiFormCustomControlVariable
   };
   var colors = {
     unselected: euiTheme.components.forms.controlBackgroundUnselected,
-    unselectedBorder: euiTheme.components.forms.controlBorder,
+    unselectedBorder: highContrastMode ? euiTheme.border.color : euiTheme.components.forms.controlBorder,
     selected: euiTheme.colors.primary,
     selectedBorder: euiTheme.components.forms.controlBorderSelected,
     selectedIcon: euiTheme.colors.emptyShade,
     disabled: euiTheme.components.forms.controlBackgroundDisabled,
     disabledBorder: euiTheme.components.forms.controlBorderDisabled,
     disabledIcon: euiTheme.components.forms.iconDisabled,
-    disabledLabel: euiTheme.colors.disabledText // Lighter than formVars.disabledColor because it typically doesn't have as dark a background
+    disabledLabel: euiTheme.colors.textDisabled // Lighter than formVars.disabledColor because it typically doesn't have as dark a background
   };
   var animation = {
     speed: euiTheme.animation.fast,
@@ -194,7 +228,8 @@ export var euiFormCustomControlVariables = function euiFormCustomControlVariable
   };
 };
 export var euiFormCustomControlStyles = function euiFormCustomControlStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   var controlVars = euiFormCustomControlVariables(euiThemeContext);
   var centerWithLabel = mathWithUnits([controlVars.sizes.lineHeight, controlVars.sizes.control], function (x, y) {
     return (x - y) / 2;
@@ -202,18 +237,26 @@ export var euiFormCustomControlStyles = function euiFormCustomControlStyles(euiT
   return {
     wrapper: "\n      display: flex;\n      align-items: flex-start;\n    ",
     input: {
-      fauxInput: "\n        position: relative;\n        ".concat(logicalCSS('height', controlVars.sizes.control), "\n        ").concat(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(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(logicalCSS('height', controlVars.sizes.control), "\n        ").concat(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(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(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/es/components/form/form_control_layout/form_control_layout.styles.js

@@ -9,6 +9,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css } from '@emotion/react';
 import { euiTextTruncate, logicalCSS, mathWithUnits } from '../../../global_styling';
+import { highContrastModeStyles } from '../../../global_styling/functions/high_contrast';
 import { euiFormVariables } from '../form.styles';
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "1w10n1m-inGroup",
@@ -64,8 +65,12 @@ export var euiFormControlLayoutSideNodeStyles = function euiFormControlLayoutSid
   var text = '*:is(.euiFormLabel, .euiText)';
   return {
     euiFormControlLayout__side: /*#__PURE__*/css(logicalCSS('height', '100%'), " ", 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, ")){", logicalCSS('padding-left', euiTheme.size.s), ";}&:not(:has(> ", buttons, ":last-child, > *:last-child > ", buttons, ")){", logicalCSS('padding-right', euiTheme.size.s), ";};label:euiFormControlLayout__side;"),
-    append: /*#__PURE__*/css(";label:append;"),
-    prepend: /*#__PURE__*/css(";label:prepend;"),
+    append: /*#__PURE__*/css(highContrastModeStyles(euiThemeContext, {
+      preferred: logicalCSS('border-left', euiTheme.border.thin)
+    }), ";label:append;"),
+    prepend: /*#__PURE__*/css(highContrastModeStyles(euiThemeContext, {
+      preferred: logicalCSS('border-right', euiTheme.border.thin)
+    }), ";label:prepend;"),
     uncompressed: "\n      ".concat(text, " {\n        ").concat(logicalCSS('padding-horizontal', euiTheme.size.xs), "\n        line-height: ").concat(uncompressedHeight, ";\n      }\n\n      ").concat(buttons, " {\n        ").concat(logicalCSS('height', uncompressedHeight), "\n      }\n\n      .euiButtonIcon {\n        flex-shrink: 0;\n        ").concat(logicalCSS('width', euiTheme.size.xl), "\n      }\n    "),
     compressed: /*#__PURE__*/css(text, "{", logicalCSS('padding-horizontal', euiTheme.size.xxs), " line-height:", compressedHeight, ";}", buttons, "{", logicalCSS('height', compressedHeight), ";}.euiButtonIcon{flex-shrink:0;", logicalCSS('width', euiTheme.size.xl), ";};label:compressed;")
   };

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

@@ -24,11 +24,12 @@ export var EuiFormControlLayoutClearButton = function EuiFormControlLayoutClearB
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = classNames('euiFormControlLayoutClearButton', className);
   var styles = useEuiMemoizedStyles(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 = useEuiI18n('euiFormControlLayoutClearButton.label', 'Clear input');
   return ___EmotionJSX("button", _extends({
     type: "button",
-    css: styles.euiFormControlLayoutClearButton,
+    css: cssStyles,
     className: classes,
     onClick: onClick,
     "aria-label": ariaLabel

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

@@ -7,16 +7,29 @@
  */
 
 import { css } from '@emotion/react';
+import { logicalSizeCSS, mathWithUnits } from '../../../global_styling';
 export var EuiFormControlLayoutClearButtonStyles = function EuiFormControlLayoutClearButtonStyles(_ref) {
   var euiTheme = _ref.euiTheme,
-    colorMode = _ref.colorMode;
-  var backgroundColor = colorMode === 'DARK' ? euiTheme.colors.darkShade : euiTheme.colors.mediumShade;
+    colorMode = _ref.colorMode,
+    highContrastMode = _ref.highContrastMode;
+  var backgroundColor = colorMode === 'DARK' || highContrastMode // mediumShade is not sufficient WCAG contrast
+  ? euiTheme.colors.darkShade : euiTheme.colors.mediumShade;
   return {
-    euiFormControlLayoutClearButton: /*#__PURE__*/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__*/css("transform:scale(0.5);fill:", euiTheme.colors.emptyShade, ";stroke:", euiTheme.colors.emptyShade, ";;label:euiFormControlLayoutClearButton__icon;"),
+    euiFormControlLayoutClearButton: /*#__PURE__*/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__*/css("stroke-width:", euiTheme.size.xs, ";;label:s;"),
-      m: /*#__PURE__*/css("stroke-width:", euiTheme.size.xxs, ";;label:m;")
+      s: "\n        ".concat(logicalSizeCSS(euiTheme.size.m), "\n        border-width: ").concat(mathWithUnits(euiTheme.size.m, function (x) {
+        return x / 2;
+      }), ";\n      "),
+      m: "\n        ".concat(logicalSizeCSS(euiTheme.size.base), "\n        border-width: ").concat(mathWithUnits(euiTheme.size.base, function (x) {
+        return x / 2;
+      }), ";\n      ")
+    },
+    icon: {
+      euiFormControlLayoutClearButton__icon: /*#__PURE__*/css("transform:scale(0.5);fill:", euiTheme.colors.emptyShade, ";stroke:", euiTheme.colors.emptyShade, ";;label:euiFormControlLayoutClearButton__icon;"),
+      size: {
+        s: /*#__PURE__*/css("stroke-width:", euiTheme.size.xs, ";;label:s;"),
+        m: /*#__PURE__*/css("stroke-width:", euiTheme.size.xxs, ";;label:m;")
+      }
     }
   };
 };

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

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

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

@@ -40,7 +40,7 @@ export var EuiRadio = function EuiRadio(_ref) {
     className: "euiRadio__circle"
   }, ___EmotionJSX(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
   }), ___EmotionJSX("input", {
     css: styles.input.euiRadio__input,
     className: "euiRadio__input",

package/optimize/es/components/form/range/dual_range.js

@@ -487,10 +487,10 @@ export var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
       var leftThumbColor = levels && getLevelColor(levels, Number(this.lowerValue));
       var rightThumbColor = levels && getLevelColor(levels, Number(this.upperValue));
       var leftThumbStyles = leftThumbColor ? _objectSpread(_objectSpread({}, leftThumbPosition), {}, {
-        backgroundColor: euiRangeLevelColor(leftThumbColor, theme.euiTheme)
+        '--euiRangeThumbColor': euiRangeLevelColor(leftThumbColor, theme)
       }) : leftThumbPosition;
       var rightThumbStyles = rightThumbColor ? _objectSpread(_objectSpread({}, rightThumbPosition), {}, {
-        backgroundColor: euiRangeLevelColor(rightThumbColor, theme.euiTheme)
+        '--euiRangeThumbColor': euiRangeLevelColor(rightThumbColor, theme)
       }) : rightThumbPosition;
       var dualSliderScreenReaderInstructions = ___EmotionJSX(EuiI18n, {
         token: "euiDualRange.sliderScreenReaderInstructions",

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

@@ -9,32 +9,36 @@
 import { css } from '@emotion/react';
 import { hexToRgb } from '../../../services';
 import { mathWithUnits } from '../../../global_styling';
+import { highContrastModeStyles, preventForcedColors } from '../../../global_styling/functions/high_contrast';
 import { euiFormVariables } from '../form.styles';
 export var euiRangeVariables = function euiRangeVariables(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   var trackHeight = '6px';
   var thumbHeight = euiTheme.size.base;
   var thumbWidth = euiTheme.size.base;
   var form = euiFormVariables(euiThemeContext);
   return {
     trackColor: euiTheme.colors.lightShade,
-    highlightColor: euiTheme.colors.darkShade,
+    highlightColor: highContrastMode ? euiTheme.colors.fullShade : euiTheme.colors.darkShade,
     focusColor: euiTheme.colors.primary,
     thumbHeight: thumbHeight,
     thumbWidth: thumbWidth,
     thumbBorderWidth: euiTheme.border.width.thick,
     thumbBorderColor: euiTheme.colors.emptyShade,
-    thumbBackgroundColor: euiTheme.colors.darkShade,
-    // same as highlightColor
-
+    get thumbBackgroundColor() {
+      return this.highlightColor;
+    },
     trackWidth: '100%',
     trackHeight: trackHeight,
     trackBorderWidth: '0px',
-    trackBorderColor: euiTheme.colors.lightShade,
-    // same as trackColor
+    get trackBorderColor() {
+      return this.trackColor;
+    },
     trackBorderRadius: euiTheme.border.radius.medium,
     tickHeight: trackHeight,
     tickWidth: euiTheme.size.xs,
+    tickColor: highContrastMode ? euiTheme.colors.darkShade : euiTheme.colors.lightShade,
     disabledOpacity: 0.5,
     highlightHeight: trackHeight,
     height: form.controlHeight,
@@ -75,18 +79,24 @@ export var euiRangeThumbBoxShadow = function euiRangeThumbBoxShadow(euiThemeCont
 };
 export var euiRangeThumbFocusBoxShadow = function euiRangeThumbFocusBoxShadow(euiThemeContext) {
   var range = euiRangeVariables(euiThemeContext);
-  return "\n    box-shadow: 0 0 0 ".concat(range.thumbBorderWidth, " ").concat(range.focusColor, ";\n  ");
+  return "\n    outline: ".concat(range.thumbBorderWidth, " solid var(--euiRangeThumbColor, ").concat(range.focusColor, ");\n    outline-offset: 0;\n    box-shadow: none; /* Unset inset box-shadow on high contrast modes */\n  ");
 };
 export var euiRangeThumbStyle = function euiRangeThumbStyle(euiThemeContext) {
   var range = euiRangeVariables(euiThemeContext);
-  return "\n    ".concat(euiRangeThumbBoxShadow(euiThemeContext), ";\n    ").concat(euiRangeThumbBorder(euiThemeContext), ";\n    border-radius: 50%;\n    cursor: pointer;\n    background-color: ").concat(range.thumbBackgroundColor, ";\n    padding: 0;\n    block-size: ").concat(range.thumbHeight, ";\n    inline-size: ").concat(range.thumbWidth, ";\n    box-sizing: border-box;  // required for firefox or the border makes the width and height to increase\n  ");
+  var euiTheme = euiThemeContext.euiTheme;
+  var baseStyles = "\n    border-radius: 50%;\n    cursor: pointer;\n    padding: 0;\n    block-size: ".concat(range.thumbHeight, ";\n    inline-size: ").concat(range.thumbWidth, ";\n    box-sizing: border-box;  // required for firefox or the border makes the width and height to increase\n  ");
+  return highContrastModeStyles(euiThemeContext, {
+    none: "\n      ".concat(baseStyles, "\n      background-color: var(--euiRangeThumbColor, ").concat(range.thumbBackgroundColor, ");\n      ").concat(euiRangeThumbBoxShadow(euiThemeContext), ";\n      ").concat(euiRangeThumbBorder(euiThemeContext), ";\n    "),
+    preferred: "\n      ".concat(baseStyles, "\n      background-color: var(--euiRangeThumbColor, ").concat(euiTheme.colors.emptyShade, ");\n      border: ").concat(range.thumbBorderWidth, " solid var(--euiRangeThumbColor, ").concat(euiTheme.colors.fullShade, ");\n      box-shadow: inset 0 0 0 ").concat(range.thumbBorderWidth, " ").concat(euiTheme.colors.emptyShade, ";\n    "),
+    forced: preventForcedColors(euiThemeContext)
+  });
 };
 export var euiRangeThumbPerBrowser = function euiRangeThumbPerBrowser(content) {
   return "\n    &::-webkit-slider-thumb { ".concat(content, "; }\n    &::-moz-range-thumb { ").concat(content, "; }\n    &::-ms-thumb {").concat(content, "; }\n  ");
 };
-export var euiRangeThumbFocus = function euiRangeThumbFocus(euiThemeContext, color) {
+export var euiRangeThumbFocus = function euiRangeThumbFocus(euiThemeContext) {
   var range = euiRangeVariables(euiThemeContext);
-  return "\n   ".concat(euiRangeThumbBorder(euiThemeContext), ";\n   ").concat(euiRangeThumbFocusBoxShadow(euiThemeContext), ";\n   background-color: ").concat(color || range.focusColor, ";\n  ");
+  return "\n    ".concat(euiRangeThumbBorder(euiThemeContext), ";\n    ").concat(euiRangeThumbFocusBoxShadow(euiThemeContext), "\n    background-color: var(--euiRangeThumbColor, ").concat(range.focusColor, ");\n  ");
 };
 export var euiRangeStyles = function euiRangeStyles(_ref) {
   var euiTheme = _ref.euiTheme;

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

@@ -7,6 +7,7 @@
  */
 
 import { css } from '@emotion/react';
+import { preventForcedColors } from '../../../global_styling/functions/high_contrast';
 import { euiRangeVariables } from './range.styles';
 export var euiRangeHighlightStyles = function euiRangeHighlightStyles(euiThemeContext) {
   var range = euiRangeVariables(euiThemeContext);
@@ -18,7 +19,7 @@ export var euiRangeHighlightStyles = function euiRangeHighlightStyles(euiThemeCo
 export var euiRangeHighlightProgressStyles = function euiRangeHighlightProgressStyles(euiThemeContext) {
   var range = euiRangeVariables(euiThemeContext);
   return {
-    euiRangeHighlight__progress: /*#__PURE__*/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;")
+    euiRangeHighlight__progress: /*#__PURE__*/css("block-size:", range.highlightHeight, ";border-radius:", range.trackBorderRadius, ";background-color:", range.highlightColor, ";", preventForcedColors(euiThemeContext), ".euiRangeSlider:focus-visible~.euiRangeHighlight &,.euiRangeThumb:focus-visible~.euiRangeHighlight &,.euiRangeDraggable:focus~.euiRangeHighlight &{background-color:", range.focusColor, ";};label:euiRangeHighlight__progress;")
   };
 };
 export var euiRangeHighlightLevelsWrapperStyles = function euiRangeHighlightLevelsWrapperStyles(euiThemeContext) {

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

@@ -8,6 +8,7 @@
 
 import { css } from '@emotion/react';
 import { transparentize } from '../../../services';
+import { preventForcedColors } from '../../../global_styling/functions/high_contrast';
 import { euiRangeLevelColor } from './range_levels_colors';
 import { euiRangeVariables } from './range.styles';
 export var euiRangeLevelsStyles = function euiRangeLevelsStyles(euiThemeContext) {
@@ -18,20 +19,19 @@ export var euiRangeLevelsStyles = function euiRangeLevelsStyles(euiThemeContext)
   var stripeColor = isColorDark ? euiTheme.colors.ink : euiTheme.colors.ghost;
   var stripesBackground = "repeating-linear-gradient(\n    -45deg,\n    ".concat(transparentize(stripeColor, 0.5), ",\n    ").concat(transparentize(stripeColor, 0.5), " 25%,\n    ").concat(transparentize(stripeColor, 0.7), " 25%,\n    ").concat(transparentize(stripeColor, 0.7), " 50%,\n    ").concat(transparentize(stripeColor, 0.5), " 50%\n  )");
   return {
-    euiRangeLevels: /*#__PURE__*/css("display:flex;justify-content:stretch;position:absolute;inset-inline:0;inset-block-start:", range.trackTopPositionWithoutTicks, ";z-index:", range.levelsZIndex, ";;label:euiRangeLevels;"),
+    euiRangeLevels: /*#__PURE__*/css("display:flex;justify-content:stretch;position:absolute;inset-inline:0;inset-block-start:", range.trackTopPositionWithoutTicks, ";z-index:", range.levelsZIndex, ";", preventForcedColors(euiThemeContext), ";;label:euiRangeLevels;"),
     hasRange: /*#__PURE__*/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;"),
     hasTicks: /*#__PURE__*/css("inset-block-start:", range.trackTopPositionWithTicks, ";;label:hasTicks;")
   };
 };
 export var euiRangeLevelStyles = function euiRangeLevelStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
   var range = euiRangeVariables(euiThemeContext);
   return {
     euiRangeLevel: /*#__PURE__*/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;"),
-    primary: /*#__PURE__*/css("background-color:", euiRangeLevelColor('primary', euiTheme), ";;label:primary;"),
-    success: /*#__PURE__*/css("background-color:", euiRangeLevelColor('success', euiTheme), ";;label:success;"),
-    warning: /*#__PURE__*/css("background-color:", euiRangeLevelColor('warning', euiTheme), ";;label:warning;"),
-    danger: /*#__PURE__*/css("background-color:", euiRangeLevelColor('danger', euiTheme), ";;label:danger;"),
+    primary: /*#__PURE__*/css("background-color:", euiRangeLevelColor('primary', euiThemeContext), ";;label:primary;"),
+    success: /*#__PURE__*/css("background-color:", euiRangeLevelColor('success', euiThemeContext), ";;label:success;"),
+    warning: /*#__PURE__*/css("background-color:", euiRangeLevelColor('warning', euiThemeContext), ";;label:warning;"),
+    danger: /*#__PURE__*/css("background-color:", euiRangeLevelColor('danger', euiThemeContext), ";;label:danger;"),
     customColor: /*#__PURE__*/css(";label:customColor;")
   };
 };

package/optimize/es/components/form/range/range_levels_colors.js

@@ -13,7 +13,8 @@ export var LEVEL_COLORS = ['primary', 'success', 'warning', 'danger'];
 export var isNamedLevelColor = function isNamedLevelColor(color) {
   return LEVEL_COLORS.includes(color);
 };
-export var euiRangeLevelColor = function euiRangeLevelColor(color, euiTheme) {
+export var euiRangeLevelColor = function euiRangeLevelColor(color, _ref) {
+  var euiTheme = _ref.euiTheme;
   return isNamedLevelColor(color) ? euiTheme.colors[color] : color;
 };
 export var getLevelColor = function getLevelColor(levels, value) {

package/optimize/es/components/form/range/range_slider.js

@@ -18,7 +18,7 @@ import { useEuiTheme } from '../../../services';
 import { logicalStyles } from '../../../global_styling';
 import { EuiResizeObserver } from '../../observer/resize_observer';
 import { euiRangeLevelColor } from './range_levels_colors';
-import { euiRangeSliderStyles, euiRangeSliderThumbStyles } from './range_slider.styles';
+import { euiRangeSliderStyles } from './range_slider.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiRangeSlider = function EuiRangeSlider(_ref) {
   var className = _ref.className,
@@ -41,11 +41,11 @@ export var EuiRangeSlider = function EuiRangeSlider(_ref) {
   var classes = classNames('euiRangeSlider', className);
   var euiTheme = useEuiTheme();
   var styles = euiRangeSliderStyles(euiTheme);
-  var thumbStyles = euiRangeSliderThumbStyles(euiTheme);
-  var cssStyles = [styles.euiRangeSlider, showTicks && styles.hasTicks, showRange && styles.hasRange, thumbColor && thumbStyles.thumb];
+  var cssStyles = [styles.euiRangeSlider, showTicks && styles.hasTicks, showRange && styles.hasRange];
   var sliderStyle = useMemo(function () {
     return logicalStyles(_objectSpread({
-      color: thumbColor && euiRangeLevelColor(thumbColor, euiTheme.euiTheme)
+      // @ts-ignore - CSS variable
+      '--euiRangeThumbColor': thumbColor && euiRangeLevelColor(thumbColor, euiTheme)
     }, style));
   }, [thumbColor, euiTheme, style]);
   return ___EmotionJSX(EuiResizeObserver, {

package/optimize/es/components/form/range/range_slider.styles.js

@@ -18,9 +18,4 @@ export var euiRangeSliderStyles = function euiRangeSliderStyles(euiThemeContext)
     hasRange: /*#__PURE__*/css(euiRangeTrackPerBrowser("\n        background-color: transparent;\n        border-color: ".concat(transparentize(range.trackBorderColor, 0.6), "\n      ")), ";;label:hasRange;"),
     hasLevels: /*#__PURE__*/css(euiRangeThumbPerBrowser("background-color: ".concat(range.thumbBackgroundColor)), ";;label:hasLevels;")
   };
-};
-export var euiRangeSliderThumbStyles = function euiRangeSliderThumbStyles(euiThemeContext) {
-  return {
-    thumb: /*#__PURE__*/css(euiRangeThumbPerBrowser('background-color: currentcolor'), " &:focus-visible{", euiRangeThumbPerBrowser(euiRangeThumbFocus(euiThemeContext, 'currentcolor')), ";};label:thumb;")
-  };
 };

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

@@ -24,7 +24,7 @@ export var euiRangeThumbStyles = function euiRangeThumbStyles(euiThemeContext) {
     // Base
     euiRangeThumb: /*#__PURE__*/css(euiRangeThumbStyle(euiThemeContext), " content:'';position:absolute;inset-inline-start:0;inset-block-start:50%;margin-block-start:", mathWithUnits(range.thumbHeight, function (x) {
       return x / 2 * -1;
-    }), ";pointer-events:none;z-index:", range.thumbZIndex, ";&:focus{", euiRangeThumbFocus(euiThemeContext), " outline:none;};label:euiRangeThumb;"),
+    }), ";pointer-events:none;z-index:", range.thumbZIndex, ";&:focus{", euiRangeThumbFocus(euiThemeContext), ";};label:euiRangeThumb;"),
     hasTicks: _ref
   };
 };

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

@@ -8,11 +8,16 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { logicalCSS, logicalSizeCSS, logicalCSSWithFallback, euiFontSize, mathWithUnits } from '../../../global_styling';
+import { logicalCSS, logicalCSSWithFallback, euiFontSize, mathWithUnits } from '../../../global_styling';
+import { highContrastModeStyles } from '../../../global_styling/functions/high_contrast';
 import { euiRangeVariables } from './range.styles';
-var tickStyles = function tickStyles(_ref4, range) {
-  var euiTheme = _ref4.euiTheme;
-  return "\n    position: absolute;\n    ".concat(logicalCSS('top', 0), ";\n    ").concat(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  ");
+var tickStyles = function tickStyles(euiThemeContext, range) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return "\n    position: absolute;\n    ".concat(logicalCSS('top', 0), ";\n    block-size: ").concat(range.tickHeight, ";\n    ").concat(highContrastModeStyles(euiThemeContext, {
+    none: "\n        inline-size: ".concat(range.tickWidth, ";\n        background-color: ").concat(range.tickColor, ";\n      "),
+    // Windows high contrast themes ignore background color but render borders
+    forced: 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/es/components/form/range/range_tooltip.styles.js

@@ -22,16 +22,17 @@ export var euiRangeTooltipStyles = function euiRangeTooltipStyles(euiThemeContex
 export var euiRangeTooltipValueStyles = function euiRangeTooltipValueStyles(euiThemeContext) {
   var range = euiRangeVariables(euiThemeContext);
   var euiTheme = euiThemeContext.euiTheme,
-    colorMode = euiThemeContext.colorMode;
+    colorMode = euiThemeContext.colorMode,
+    highContrastMode = euiThemeContext.highContrastMode;
   var toolTipBackgroundColor = euiTheme.components.tooltipBackground;
-  var borderColor = colorMode === 'DARK' ? toolTipBackgroundColor : 'transparent';
+  var borderColor = highContrastMode || colorMode === 'DARK' ? euiTheme.border.color : 'transparent';
   var arrowSize = euiTheme.size.m;
   var arrowOffset = euiTheme.size.l;
   var arrowStyles = _popoverArrowStyles(euiThemeContext, arrowSize);
   return {
     euiRangeTooltip__value: /*#__PURE__*/css("position:absolute;inset-block-start:50%;max-inline-size:", mathWithUnits(euiTheme.size.base, function (x) {
       return x * 16;
-    }), ";padding-block:", euiTheme.size.xxs, ";padding-inline:", euiTheme.size.s, ";transform:translateY(-50%);", euiFontSize(euiThemeContext, 's'), " line-height:", euiFontSize(euiThemeContext, 's').lineHeight, ";color:", euiTheme.colors.ghost, ";background-color:", toolTipBackgroundColor, ";border:", euiTheme.border.width.thin, " solid ", toolTipBackgroundColor, ";border:", euiTheme.border.width.thin, " solid ", borderColor, ";border-radius:", euiTheme.border.radius.small, ";&::before{content:'';", arrowStyles._arrowStyles, " inset-block-start:50%;margin-block-start:", mathWithUnits(arrowSize, function (x) {
+    }), ";padding-block:", euiTheme.size.xxs, ";padding-inline:", euiTheme.size.s, ";transform:translateY(-50%);", euiFontSize(euiThemeContext, 's'), " color:", euiTheme.colors.ghost, ";background-color:", toolTipBackgroundColor, ";border:", euiTheme.border.width.thin, " solid ", borderColor, ";border-radius:", euiTheme.border.radius.small, ";&::before{content:'';", arrowStyles._arrowStyles, " inset-block-start:50%;margin-block-start:", mathWithUnits(arrowSize, function (x) {
       return x / -2;
     }), ";background-color:inherit;border:inherit;};label:euiRangeTooltip__value;"),
     left: /*#__PURE__*/css("margin-inline-end:", arrowOffset, ";&::before{", arrowStyles.positions.left, " inset-inline-start:100%;};label:left;"),

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

@@ -7,12 +7,17 @@
  */
 
 import { css } from '@emotion/react';
+import { highContrastModeStyles } from '../../../global_styling/functions/high_contrast';
 import { euiRangeVariables } from './range.styles';
 export var euiRangeTrackStyles = function euiRangeTrackStyles(euiThemeContext) {
   var range = euiRangeVariables(euiThemeContext);
   return {
     // Base
-    euiRangeTrack: /*#__PURE__*/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__*/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, ";", highContrastModeStyles(euiThemeContext, {
+      none: "\n            background: ".concat(range.trackColor, ";\n            block-size: ").concat(range.trackHeight, ";\n          "),
+      // Windows high contrast themes ignore background color, but will render borders
+      forced: "\n            border-block-start: ".concat(range.trackHeight, " solid ").concat(range.trackColor, ";\n            opacity: 0.25;\n          ")
+    }), " border-radius:", range.trackBorderRadius, ";};label:euiRangeTrack;"),
     hasTicks: /*#__PURE__*/css("margin-inline-start:1em;margin-inline-end:1em;&::after{inset-block-start:", range.trackTopPositionWithTicks, ";};label:hasTicks;"),
     disabled: /*#__PURE__*/css("opacity:", range.disabledOpacity, ";;label:disabled;"),
     hasLevels: /*#__PURE__*/css(";label:hasLevels;")