@elastic/eui 100.0.0 → 101.0.1

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

@@ -4,10 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-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;
+exports.euiFormVariables = exports.euiFormMaxWidth = exports.euiFormCustomControlVariables = exports.euiFormCustomControlStyles = exports.euiFormControlText = exports.euiFormControlStyles = exports.euiFormControlShowBackgroundUnderline = exports.euiFormControlReadOnlyStyles = exports.euiFormControlInvalidStyles = exports.euiFormControlFocusStyles = exports.euiFormControlDisabledStyles = exports.euiFormControlDefaultShadow = exports.euiFormControlAutoFillStyles = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _services = require("../../services");
 var _global_styling = require("../../global_styling");
+var _high_contrast = require("../../global_styling/functions/high_contrast");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -24,8 +25,9 @@ var euiFormMaxWidth = exports.euiFormMaxWidth = function euiFormMaxWidth(_ref) {
   return euiTheme.components.forms.maxWidth;
 };
 var euiFormVariables = exports.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 = {
@@ -41,7 +43,10 @@ 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.textParagraph,
@@ -49,10 +54,10 @@ var euiFormVariables = exports.euiFormVariables = function euiFormVariables(euiT
     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: (0, _services.makeHighContrastColor)(euiTheme.colors.subduedText)(backgroundColor),
+    controlPlaceholderText: (0, _services.makeHighContrastColor)(euiTheme.colors.textSubdued)(backgroundColor),
     appendPrependBackground: euiTheme.components.forms.prependBackground
   };
   var controlLayout = {
@@ -85,7 +90,10 @@ 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((0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+      none: 'box-shadow: none;',
+      preferred: 'border: 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    "),
@@ -116,21 +124,30 @@ var euiFormControlDefaultShadow = exports.euiFormControlDefaultShadow = function
     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 = (0, _high_contrast.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 = (0, _high_contrast.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(_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;
-  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");
+var euiFormControlFocusStyles = exports.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  ");
 };
-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    ").concat(euiFormControlShowBackgroundUnderline(euiThemeContext, invalidColor), "\n  ");
 };
 var euiFormControlDisabledStyles = exports.euiFormControlDisabledStyles = function euiFormControlDisabledStyles(euiThemeContext) {
   var form = euiFormVariables(euiThemeContext);
@@ -138,7 +155,9 @@ var euiFormControlDisabledStyles = exports.euiFormControlDisabledStyles = functi
 };
 var euiFormControlReadOnlyStyles = exports.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((0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+    forced: 'background-image: none;'
+  }), "\n  ");
 };
 var euiFormControlAutoFillStyles = exports.euiFormControlAutoFillStyles = function euiFormControlAutoFillStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
@@ -161,6 +180,20 @@ 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 euiFormControlShowBackgroundUnderline = exports.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");
 };
@@ -170,7 +203,8 @@ var euiPlaceholderPerBrowser = function euiPlaceholderPerBrowser(content) {
  */
 
 var euiFormCustomControlVariables = exports.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,
@@ -178,14 +212,14 @@ var euiFormCustomControlVariables = exports.euiFormCustomControlVariables = func
   };
   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,
@@ -198,7 +232,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;
@@ -206,18 +241,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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiFormControlLayoutStyles = exports.euiFormControlLayoutSideNodeStyles = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../../global_styling");
+var _high_contrast = require("../../../global_styling/functions/high_contrast");
 var _form = require("../form.styles");
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -68,8 +69,12 @@ 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)((0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+      preferred: (0, _global_styling.logicalCSS)('border-left', euiTheme.border.thin)
+    }), ";label:append;"),
+    prepend: /*#__PURE__*/(0, _react.css)((0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+      preferred: (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
@@ -15,14 +16,26 @@ var _react = require("@emotion/react");
 
 var EuiFormControlLayoutClearButtonStyles = exports.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__*/(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/dual_range.js

@@ -495,10 +495,10 @@ var EuiDualRangeClass = exports.EuiDualRangeClass = /*#__PURE__*/function (_Comp
       var leftThumbColor = levels && (0, _range_levels_colors.getLevelColor)(levels, Number(this.lowerValue));
       var rightThumbColor = levels && (0, _range_levels_colors.getLevelColor)(levels, Number(this.upperValue));
       var leftThumbStyles = leftThumbColor ? _objectSpread(_objectSpread({}, leftThumbPosition), {}, {
-        backgroundColor: (0, _range_levels_colors.euiRangeLevelColor)(leftThumbColor, theme.euiTheme)
+        '--euiRangeThumbColor': (0, _range_levels_colors.euiRangeLevelColor)(leftThumbColor, theme)
       }) : leftThumbPosition;
       var rightThumbStyles = rightThumbColor ? _objectSpread(_objectSpread({}, rightThumbPosition), {}, {
-        backgroundColor: (0, _range_levels_colors.euiRangeLevelColor)(rightThumbColor, theme.euiTheme)
+        '--euiRangeThumbColor': (0, _range_levels_colors.euiRangeLevelColor)(rightThumbColor, theme)
       }) : rightThumbPosition;
       var dualSliderScreenReaderInstructions = (0, _react2.jsx)(_i18n.EuiI18n, {
         token: "euiDualRange.sliderScreenReaderInstructions",

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

@@ -7,6 +7,7 @@ exports.euiRangeVariables = exports.euiRangeTrackPerBrowser = exports.euiRangeTh
 var _react = require("@emotion/react");
 var _services = require("../../../services");
 var _global_styling = require("../../../global_styling");
+var _high_contrast = require("../../../global_styling/functions/high_contrast");
 var _form = require("../form.styles");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -17,30 +18,33 @@ var _form = require("../form.styles");
  */
 
 var euiRangeVariables = exports.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 = (0, _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,
@@ -81,18 +85,24 @@ var euiRangeThumbBoxShadow = exports.euiRangeThumbBoxShadow = function euiRangeT
 };
 var euiRangeThumbFocusBoxShadow = exports.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  ");
 };
 var euiRangeThumbStyle = exports.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 (0, _high_contrast.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: (0, _high_contrast.preventForcedColors)(euiThemeContext)
+  });
 };
 var euiRangeThumbPerBrowser = exports.euiRangeThumbPerBrowser = function euiRangeThumbPerBrowser(content) {
   return "\n    &::-webkit-slider-thumb { ".concat(content, "; }\n    &::-moz-range-thumb { ").concat(content, "; }\n    &::-ms-thumb {").concat(content, "; }\n  ");
 };
-var euiRangeThumbFocus = exports.euiRangeThumbFocus = function euiRangeThumbFocus(euiThemeContext, color) {
+var euiRangeThumbFocus = exports.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  ");
 };
 var euiRangeStyles = exports.euiRangeStyles = function euiRangeStyles(_ref) {
   var euiTheme = _ref.euiTheme;

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiRangeHighlightStyles = exports.euiRangeHighlightProgressStyles = exports.euiRangeHighlightLevelsWrapperStyles = exports.euiRangeHighlightLevelsStyles = void 0;
 var _react = require("@emotion/react");
+var _high_contrast = require("../../../global_styling/functions/high_contrast");
 var _range = require("./range.styles");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -24,7 +25,7 @@ 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;")
+    euiRangeHighlight__progress: /*#__PURE__*/(0, _react.css)("block-size:", range.highlightHeight, ";border-radius:", range.trackBorderRadius, ";background-color:", range.highlightColor, ";", (0, _high_contrast.preventForcedColors)(euiThemeContext), ".euiRangeSlider:focus-visible~.euiRangeHighlight &,.euiRangeThumb:focus-visible~.euiRangeHighlight &,.euiRangeDraggable:focus~.euiRangeHighlight &{background-color:", range.focusColor, ";};label:euiRangeHighlight__progress;")
   };
 };
 var euiRangeHighlightLevelsWrapperStyles = exports.euiRangeHighlightLevelsWrapperStyles = function euiRangeHighlightLevelsWrapperStyles(euiThemeContext) {

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiRangeLevelsStyles = exports.euiRangeLevelStyles = void 0;
 var _react = require("@emotion/react");
 var _services = require("../../../services");
+var _high_contrast = require("../../../global_styling/functions/high_contrast");
 var _range_levels_colors = require("./range_levels_colors");
 var _range = require("./range.styles");
 /*
@@ -24,20 +25,19 @@ var euiRangeLevelsStyles = exports.euiRangeLevelsStyles = function euiRangeLevel
   var stripeColor = isColorDark ? euiTheme.colors.ink : euiTheme.colors.ghost;
   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;"),
+    euiRangeLevels: /*#__PURE__*/(0, _react.css)("display:flex;justify-content:stretch;position:absolute;inset-inline:0;inset-block-start:", range.trackTopPositionWithoutTicks, ";z-index:", range.levelsZIndex, ";", (0, _high_contrast.preventForcedColors)(euiThemeContext), ";;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;"),
     hasTicks: /*#__PURE__*/(0, _react.css)("inset-block-start:", range.trackTopPositionWithTicks, ";;label:hasTicks;")
   };
 };
 var euiRangeLevelStyles = exports.euiRangeLevelStyles = function euiRangeLevelStyles(euiThemeContext) {
-  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;"),
-    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;"),
-    danger: /*#__PURE__*/(0, _react.css)("background-color:", (0, _range_levels_colors.euiRangeLevelColor)('danger', euiTheme), ";;label:danger;"),
+    primary: /*#__PURE__*/(0, _react.css)("background-color:", (0, _range_levels_colors.euiRangeLevelColor)('primary', euiThemeContext), ";;label:primary;"),
+    success: /*#__PURE__*/(0, _react.css)("background-color:", (0, _range_levels_colors.euiRangeLevelColor)('success', euiThemeContext), ";;label:success;"),
+    warning: /*#__PURE__*/(0, _react.css)("background-color:", (0, _range_levels_colors.euiRangeLevelColor)('warning', euiThemeContext), ";;label:warning;"),
+    danger: /*#__PURE__*/(0, _react.css)("background-color:", (0, _range_levels_colors.euiRangeLevelColor)('danger', euiThemeContext), ";;label:danger;"),
     customColor: /*#__PURE__*/(0, _react.css)(";label:customColor;")
   };
 };

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

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

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

@@ -50,11 +50,11 @@ var EuiRangeSlider = exports.EuiRangeSlider = function EuiRangeSlider(_ref) {
   var classes = (0, _classnames.default)('euiRangeSlider', className);
   var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _range_slider.euiRangeSliderStyles)(euiTheme);
-  var thumbStyles = (0, _range_slider.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 = (0, _react.useMemo)(function () {
     return (0, _global_styling.logicalStyles)(_objectSpread({
-      color: thumbColor && (0, _range_levels_colors.euiRangeLevelColor)(thumbColor, euiTheme.euiTheme)
+      // @ts-ignore - CSS variable
+      '--euiRangeThumbColor': thumbColor && (0, _range_levels_colors.euiRangeLevelColor)(thumbColor, euiTheme)
     }, style));
   }, [thumbColor, euiTheme, style]);
   return (0, _react2.jsx)(_resize_observer.EuiResizeObserver, {

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiRangeSliderThumbStyles = exports.euiRangeSliderStyles = void 0;
+exports.euiRangeSliderStyles = void 0;
 var _react = require("@emotion/react");
 var _services = require("../../../services");
 var _range = require("./range.styles");
@@ -24,9 +24,4 @@ var euiRangeSliderStyles = exports.euiRangeSliderStyles = function euiRangeSlide
     hasRange: /*#__PURE__*/(0, _react.css)((0, _range.euiRangeTrackPerBrowser)("\n        background-color: transparent;\n        border-color: ".concat((0, _services.transparentize)(range.trackBorderColor, 0.6), "\n      ")), ";;label:hasRange;"),
     hasLevels: /*#__PURE__*/(0, _react.css)((0, _range.euiRangeThumbPerBrowser)("background-color: ".concat(range.thumbBackgroundColor)), ";;label:hasLevels;")
   };
-};
-var euiRangeSliderThumbStyles = exports.euiRangeSliderThumbStyles = function euiRangeSliderThumbStyles(euiThemeContext) {
-  return {
-    thumb: /*#__PURE__*/(0, _react.css)((0, _range.euiRangeThumbPerBrowser)('background-color: currentcolor'), " &:focus-visible{", (0, _range.euiRangeThumbPerBrowser)((0, _range.euiRangeThumbFocus)(euiThemeContext, 'currentcolor')), ";};label:thumb;")
-  };
 };

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

@@ -28,7 +28,7 @@ var euiRangeThumbStyles = exports.euiRangeThumbStyles = function euiRangeThumbSt
     // 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), ";};label:euiRangeThumb;"),
     hasTicks: _ref
   };
 };

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiRangeTicksStyles = exports.euiRangeTickStyles = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../../global_styling");
+var _high_contrast = require("../../../global_styling/functions/high_contrast");
 var _range = require("./range.styles");
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -14,9 +15,13 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var 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  ");
+var tickStyles = function tickStyles(euiThemeContext, range) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return "\n    position: absolute;\n    ".concat((0, _global_styling.logicalCSS)('top', 0), ";\n    block-size: ").concat(range.tickHeight, ";\n    ").concat((0, _high_contrast.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: (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

@@ -28,16 +28,17 @@ var euiRangeTooltipStyles = exports.euiRangeTooltipStyles = function euiRangeToo
 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 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 = (0, _popover._popoverArrowStyles)(euiThemeContext, arrowSize);
   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:translateY(-50%);", (0, _global_styling.euiFontSize)(euiThemeContext, 's'), " line-height:", (0, _global_styling.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:", (0, _global_styling.mathWithUnits)(arrowSize, function (x) {
+    }), ";padding-block:", euiTheme.size.xxs, ";padding-inline:", euiTheme.size.s, ";transform:translateY(-50%);", (0, _global_styling.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:", (0, _global_styling.mathWithUnits)(arrowSize, function (x) {
       return x / -2;
     }), ";background-color:inherit;border:inherit;};label:euiRangeTooltip__value;"),
     left: /*#__PURE__*/(0, _react.css)("margin-inline-end:", arrowOffset, ";&::before{", arrowStyles.positions.left, " inset-inline-start:100%;};label:left;"),

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiRangeTrackStyles = void 0;
 var _react = require("@emotion/react");
+var _high_contrast = require("../../../global_styling/functions/high_contrast");
 var _range = require("./range.styles");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -18,7 +19,11 @@ var euiRangeTrackStyles = exports.euiRangeTrackStyles = function euiRangeTrackSt
   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, ";", (0, _high_contrast.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__*/(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;")