@elastic/eui 100.0.0 → 101.0.0

package/es/components/date_picker/react_date_picker.styles.js

@@ -1,3 +1,9 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -9,11 +15,18 @@
 // Needs to use vanilla `css` to pass a className directly to react-datepicker
 import { css } from '@emotion/css';
 import { euiShadowSmall } from '@elastic/eui-theme-common';
-import { euiCanAnimate, euiMaxBreakpoint, euiFontSize, euiYScroll, logicalCSS, mathWithUnits } from '../../global_styling';
+import { euiCanAnimate, euiMaxBreakpoint, euiFontSize, euiYScroll, logicalCSS, logicalSizeCSS, mathWithUnits } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 import { euiButtonColor, euiButtonEmptyColor, euiButtonFillColor } from '../../global_styling/mixins';
 import { euiFormControlStyles, euiFormControlText, euiFormControlDefaultShadow } from '../form/form.styles';
-export var euiDatePickerVariables = function euiDatePickerVariables(_ref) {
-  var euiTheme = _ref.euiTheme;
+export var euiDatePickerVariables = function euiDatePickerVariables(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
+  var unsetHighContrastBorder = function unsetHighContrastBorder(styles) {
+    return _objectSpread(_objectSpread({}, styles), {}, {
+      border: undefined
+    });
+  };
   return {
     gapSize: euiTheme.size.xs,
     get paddingSize() {
@@ -26,50 +39,94 @@ export var euiDatePickerVariables = function euiDatePickerVariables(_ref) {
       return mathWithUnits([this.headerButtonSize, this.gapSize], function (x, y) {
         return x + y;
       });
-    }
+    },
+    colors: {
+      day: {
+        inMonth: euiTheme.colors.textHeading,
+        outsideMonth: euiTheme.colors.textSubdued,
+        header: euiTheme.colors.textSubdued,
+        today: euiTheme.colors.primary
+      },
+      hover: unsetHighContrastBorder(euiButtonColor(euiThemeContext, 'primary')),
+      disabled: unsetHighContrastBorder(euiButtonColor(euiThemeContext, 'disabled')),
+      get inRange() {
+        return this.hover;
+      },
+      inRangeAndDisabled: {
+        backgroundColor: euiButtonEmptyColor(euiThemeContext, 'primary').backgroundColor
+      },
+      selected: highContrastMode !== 'forced' ? euiButtonFillColor(euiThemeContext, 'primary') : {
+        color: euiTheme.colors.emptyShade,
+        backgroundColor: euiTheme.colors.fullShade,
+        forcedColorAdjust: 'none'
+      },
+      selectedAndDisabled: highContrastMode !== 'forced' ? euiButtonColor(euiThemeContext, 'danger') : {
+        color: euiTheme.colors.textDanger,
+        backgroundColor: euiTheme.colors.emptyShade,
+        border: "".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.textDanger, ";")
+      },
+      highlighted: euiButtonColor(euiThemeContext, 'success')
+    },
+    animationSpeed: euiTheme.animation.fast
   };
 };
 export var euiReactDatePickerStyles = function euiReactDatePickerStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var _euiDatePickerVariabl = euiDatePickerVariables(euiThemeContext),
-    gapSize = _euiDatePickerVariabl.gapSize,
-    paddingSize = _euiDatePickerVariabl.paddingSize,
-    headerOffset = _euiDatePickerVariabl.headerOffset;
+  var datePickerVars = euiDatePickerVariables(euiThemeContext);
+  var gapSize = datePickerVars.gapSize,
+    paddingSize = datePickerVars.paddingSize,
+    headerOffset = datePickerVars.headerOffset;
   return {
-    euiReactDatePicker: /*#__PURE__*/css("display:flex;justify-content:center;padding:", paddingSize, ";font-size:", euiFontSize(euiThemeContext, 'xs').fontSize, ";color:", euiTheme.colors.text, ";border-radius:", euiTheme.border.radius.medium, ";&.react-datepicker--non-interactive{pointer-events:none;}.react-datepicker__focusTrap{display:flex;justify-content:center;gap:", paddingSize, ";}", euiMaxBreakpoint(euiThemeContext, 's'), "{&,.react-datepicker__focusTrap{flex-direction:column;}}.react-datepicker__header__dropdown{position:absolute;", logicalCSS('top', 0), " ", logicalCSS('horizontal', headerOffset), " padding:", paddingSize, ";display:flex;justify-content:center;gap:", gapSize, ";}.react-datepicker__navigation{z-index:1;position:absolute;", logicalCSS('top', paddingSize), "&:hover,&:focus{transform:none;}}.react-datepicker__navigation--previous{", logicalCSS('left', paddingSize), ";}.react-datepicker__navigation--next{", logicalCSS('right', paddingSize), ";}.react-datepicker__month-container{flex-grow:1;", logicalCSS('margin-top', headerOffset), ";}.react-datepicker__time-container{flex-grow:1;", logicalCSS('margin-top',
+    euiReactDatePicker: /*#__PURE__*/css("display:flex;justify-content:center;padding:", paddingSize, ";font-size:", euiFontSize(euiThemeContext, 'xs').fontSize, ";color:", euiTheme.colors.textParagraph, ";border-radius:", euiTheme.border.radius.medium, ";&.react-datepicker--non-interactive{pointer-events:none;}.react-datepicker__focusTrap{display:flex;justify-content:center;gap:", paddingSize, ";}", euiMaxBreakpoint(euiThemeContext, 's'), "{&,.react-datepicker__focusTrap{flex-direction:column;}}.react-datepicker__header__dropdown{position:absolute;", logicalCSS('top', 0), " ", logicalCSS('horizontal', headerOffset), " padding:", paddingSize, ";display:flex;justify-content:center;gap:", gapSize, ";}.react-datepicker__navigation{z-index:1;position:absolute;", logicalCSS('top', paddingSize), "&:hover,&:focus{transform:none;}}.react-datepicker__navigation--previous{", logicalCSS('left', paddingSize), ";}.react-datepicker__navigation--next{", logicalCSS('right', paddingSize), ";}.react-datepicker__month-container{flex-grow:1;", logicalCSS('margin-top', headerOffset), ";}.react-datepicker__time-container{flex-grow:1;", logicalCSS('margin-top',
     // The time select gets a little extra offset
     mathWithUnits([headerOffset, gapSize], function (x, y) {
       return x + y;
-    })), " ", logicalCSS('margin-left', paddingSize), euiMaxBreakpoint(euiThemeContext, 's'), "{", logicalCSS('margin-top', gapSize), " ", logicalCSS('margin-left', 0), ";}}", _monthYearDropdowns(euiThemeContext), " ", _dayCalendarStyles(euiThemeContext), " ", _timeSelectStyles(euiThemeContext), ";;label:euiReactDatePicker;")
+    })), " ", logicalCSS('margin-left', paddingSize), euiMaxBreakpoint(euiThemeContext, 's'), "{", logicalCSS('margin-top', gapSize), " ", logicalCSS('margin-left', 0), ";}}", _monthYearDropdowns(euiThemeContext, datePickerVars), " ", _dayCalendarStyles(euiThemeContext, datePickerVars), " ", _timeSelectStyles(euiThemeContext, datePickerVars), ";;label:euiReactDatePicker;")
   };
 };
-export var _monthYearDropdowns = function _monthYearDropdowns(euiThemeContext) {
+var _monthYearDropdowns = function _monthYearDropdowns(euiThemeContext, _ref) {
+  var colors = _ref.colors;
   var euiTheme = euiThemeContext.euiTheme;
   var formStyles = euiFormControlStyles(euiThemeContext);
   return /*#__PURE__*/css(".react-datepicker__year-read-view,.react-datepicker__month-read-view,.react-datepicker__month-year-read-view{display:flex;justify-content:space-between;align-items:center;", formStyles.compressed, " ", euiFormControlText(euiThemeContext), " font-weight:", euiTheme.font.weight.medium, ";", euiFormControlDefaultShadow(euiThemeContext), " &:hover{cursor:pointer;text-decoration:underline;}}.react-datepicker__year-dropdown-container{position:relative;flex-grow:1;}.react-datepicker__month-dropdown-container{position:relative;flex-grow:2;}.react-datepicker__year-dropdown,.react-datepicker__month-dropdown{z-index:1;position:absolute;", euiYScroll(euiThemeContext, {
     height: 'auto'
-  }), " ", logicalCSS('max-height', '250px'), " ", logicalCSS('width', '100%'), " padding:", euiTheme.size.xs, ";background-color:", euiTheme.colors.emptyShade, ";border-radius:", euiTheme.border.radius.medium, ";", euiShadowSmall(euiThemeContext), ";}.react-datepicker__year-dropdown{", logicalCSS('min-width', '100px'), ";}.react-datepicker__month-dropdown{", logicalCSS('min-width', '140px'), ";}.react-datepicker__year-option,.react-datepicker__month-option,.react-datepicker__month-year-option{", logicalCSS('margin-vertical', euiTheme.size.xs), " ", logicalCSS('padding-horizontal', euiTheme.size.s), " ", logicalCSS('height', euiTheme.size.l), " line-height:", euiTheme.size.l, ";font-size:", euiFontSize(euiThemeContext, 's').fontSize, ";border-radius:", euiTheme.border.radius.small, ";cursor:pointer;&:hover{text-decoration:underline;}&--preselected{background-color:", euiTheme.focus.backgroundColor, ";}&--selected_year,&--selected_month{", euiButtonFillColor(euiThemeContext, 'primary'), ";}&--selected{display:none;}}");
+  }), " ", logicalCSS('max-height', '250px'), " ", logicalCSS('width', '100%'), " padding:", euiTheme.size.xs, ";background-color:", euiTheme.colors.emptyShade, ";border-radius:", euiTheme.border.radius.medium, ";", euiShadowSmall(euiThemeContext, {
+    borderAllInHighContrastMode: true
+  }), ";}.react-datepicker__year-dropdown{", logicalCSS('min-width', '100px'), ";}.react-datepicker__month-dropdown{", logicalCSS('min-width', '140px'), ";}.react-datepicker__year-option,.react-datepicker__month-option,.react-datepicker__month-year-option{display:flex;align-items:center;", logicalCSS('height', euiTheme.size.l), " ", logicalCSS('margin-vertical', euiTheme.size.xs), " ", logicalCSS('padding-horizontal', euiTheme.size.s), " font-size:", euiFontSize(euiThemeContext, 's').fontSize, ";border-radius:", euiTheme.border.radius.small, ";cursor:pointer;&:hover{text-decoration:underline;}&--preselected{", colors.hover, ";}&--selected_year,&--selected_month{", colors.selected, ";}&--selected{display:none;}}");
 };
-export var _dayCalendarStyles = function _dayCalendarStyles(euiThemeContext) {
+var _dayCalendarStyles = function _dayCalendarStyles(euiThemeContext, _ref2) {
+  var gapSize = _ref2.gapSize,
+    colors = _ref2.colors,
+    animationSpeed = _ref2.animationSpeed;
   var euiTheme = euiThemeContext.euiTheme;
-  var _euiDatePickerVariabl2 = euiDatePickerVariables(euiThemeContext),
-    gapSize = _euiDatePickerVariabl2.gapSize;
   var daySize = euiTheme.size.xl;
   var dayMargin = mathWithUnits(gapSize, function (x) {
     return x / 2;
   });
-  var rangeBackgroundColor = euiButtonColor(euiThemeContext, 'primary').backgroundColor;
   var rangeMarginOffset = mathWithUnits(dayMargin, function (x) {
     return x * 1.5;
   });
-  var animationSpeed = euiTheme.animation.fast;
-  return /*#__PURE__*/css(".react-datepicker__day-names,.react-datepicker__week{display:flex;justify-content:space-between;flex-grow:1;color:", euiTheme.colors.subduedText, ";}.react-datepicker__day-name,.react-datepicker__day{display:inline-block;", logicalCSS('width', daySize), " line-height:", daySize, ";margin:", dayMargin, ";font-weight:", euiTheme.font.weight.medium, ";text-align:center;}.react-datepicker__day{color:", euiTheme.colors.title, ";border-radius:", euiTheme.border.radius.small, ";", euiCanAnimate, "{transition:transform ", animationSpeed, " ease-in-out,background-color ", animationSpeed, " ease-in;}&:hover{", euiButtonColor(euiThemeContext, 'primary'), " text-decoration:underline;cursor:pointer;", euiCanAnimate, "{transform:scale(1.1);}}&--today{color:", euiTheme.colors.primary, ";font-weight:", euiTheme.font.weight.bold, ";}&--outside-month{color:", euiTheme.colors.subduedText, ";}&--highlighted,&--highlighted:hover{", euiButtonColor(euiThemeContext, 'success'), ";}&--in-range,&--in-range:hover{", euiButtonColor(euiThemeContext, 'primary'), ";}&--in-range:not(&--selected):not(:hover):not(&--disabled){box-shadow:-", rangeMarginOffset, " 0 ", rangeBackgroundColor, ",", rangeMarginOffset, " 0 ", rangeBackgroundColor, ";border-radius:0;&:first-child{box-shadow:", rangeMarginOffset, " 0 ", rangeBackgroundColor, ";}&:last-child{box-shadow:-", rangeMarginOffset, " 0 ", rangeBackgroundColor, ";}}&--in-range:not(&--selected){", euiCanAnimate, "{transition:transform ", animationSpeed, " ease-in-out,box-shadow ", animationSpeed, " ease-in-out,border-radius ", animationSpeed, " ease-in-out,background-color ", animationSpeed, " ease-in;}}&--selected,&--selected:hover,&--in-selecting-range,&--in-selecting-range:hover{", euiButtonFillColor(euiThemeContext, 'primary'), ";}&--disabled,&--disabled:hover{", euiButtonColor(euiThemeContext, 'disabled'), " cursor:not-allowed;text-decoration:none;transform:none;}&--disabled.react-datepicker__day--in-range:not(&--selected){&,&:hover{background-color:", euiButtonEmptyColor(euiThemeContext, 'primary').backgroundColor, ";}}&--in-selecting-range:not(&--in-range),&--disabled.react-datepicker__day--selected,&--disabled.react-datepicker__day--selected:hover{", euiButtonColor(euiThemeContext, 'danger'), ";}}");
+  return /*#__PURE__*/css(".react-datepicker__day-names,.react-datepicker__week{display:flex;justify-content:space-between;flex-grow:1;color:", colors.day.header, ";}.react-datepicker__day-name,.react-datepicker__day{display:inline-flex;justify-content:center;align-items:center;", logicalSizeCSS(daySize), " margin:", dayMargin, ";font-weight:", euiTheme.font.weight.medium, ";}.react-datepicker__day{color:", colors.day.inMonth, ";border-radius:", euiTheme.border.radius.small, ";", euiCanAnimate, "{transition:transform ", animationSpeed, " ease-in-out,background-color ", animationSpeed, " ease-in;}&:hover{", colors.hover, " text-decoration:underline;cursor:pointer;", euiCanAnimate, "{transform:scale(1.1);}}&--today{color:", colors.day.today, ";font-weight:", euiTheme.font.weight.bold, ";}&--outside-month{color:", colors.day.outsideMonth, ";}&--highlighted,&--highlighted:hover{", colors.highlighted, ";}&--in-range,&--in-range:hover{", colors.inRange, ";}", highContrastModeStyles(euiThemeContext, {
+    // Ranges use 2 side box-shadows that are the same as the button
+    // background to fill the gap between margins
+    none: "\n          &--in-range:not(&--selected):not(:hover):not(&--disabled) {\n            box-shadow: -".concat(rangeMarginOffset, " 0 ").concat(colors.inRange.backgroundColor, ",\n              ").concat(rangeMarginOffset, " 0 ").concat(colors.inRange.backgroundColor, ";\n            border-radius: 0;\n\n            &:first-child {\n              box-shadow: ").concat(rangeMarginOffset, " 0 ").concat(colors.inRange.backgroundColor, ";\n            }\n\n            &:last-child {\n              box-shadow: -").concat(rangeMarginOffset, " 0 ").concat(colors.inRange.backgroundColor, ";\n            }\n          }\n          /* Animate smoothly on hover */\n          &--in-range:not(&--selected) {\n            ").concat(euiCanAnimate, " {\n              transition: transform ").concat(animationSpeed, " ease-in-out,\n                box-shadow ").concat(animationSpeed, " ease-in-out,\n                border-radius ").concat(animationSpeed, " ease-in-out,\n                background-color ").concat(animationSpeed, " ease-in;\n            }\n          }\n        "),
+    // In Windows high contrast mode, use borders and pseudo elements instead of background colors
+    forced: "\n          &--in-range:not(&--selected) {\n            position: relative;\n            transform: none;\n\n            &::before {\n              content: '';\n              position: absolute;\n              inset-inline: -".concat(dayMargin, ";\n              inset-block: ").concat(dayMargin, ";\n              border-block: ").concat(euiTheme.border.thin, ";\n              pointer-events: none;\n            }\n          }\n          &--range-start:not(&--selected)::before {\n            border-inline-start: ").concat(euiTheme.border.thin, ";\n          }\n          &--range-end:not(&--selected)::before {\n            border-inline-end: ").concat(euiTheme.border.thin, ";\n          }\n        ")
+  }), " &--selected,&--selected:hover,&--in-selecting-range,&--in-selecting-range:hover{", colors.selected, ";}&--disabled,&--disabled:hover{", colors.disabled, " ", highContrastModeStyles(euiThemeContext, {
+    forced: 'opacity: 0.5;'
+  }), " cursor:not-allowed;text-decoration:none;transform:none;}&--disabled.react-datepicker__day--in-range:not(&--selected){&,&:hover{", colors.inRangeAndDisabled, ";}}&--in-selecting-range:not(&--in-range),&--disabled.react-datepicker__day--selected,&--disabled.react-datepicker__day--selected:hover{", colors.selectedAndDisabled, " ", highContrastModeStyles(euiThemeContext, {
+    forced: 'opacity: 1;'
+  }), ";}}");
 };
-export var _timeSelectStyles = function _timeSelectStyles(euiThemeContext) {
+var _timeSelectStyles = function _timeSelectStyles(euiThemeContext, _ref3) {
+  var gapSize = _ref3.gapSize,
+    colors = _ref3.colors,
+    animationSpeed = _ref3.animationSpeed;
   var euiTheme = euiThemeContext.euiTheme;
-  var _euiDatePickerVariabl3 = euiDatePickerVariables(euiThemeContext),
-    gapSize = _euiDatePickerVariabl3.gapSize;
   return /*#__PURE__*/css(".react-datepicker__time-container{display:flex;", logicalCSS('width', 'auto'), " background-color:", euiTheme.colors.body, ";border-radius:", euiTheme.border.radius.medium, ";&--focus{.react-datepicker__time-list-item--preselected{text-decoration:underline;}}}.react-datepicker__time,.react-datepicker__time-box{display:flex;flex-direction:column;flex-grow:1;}.react-datepicker__time-list{", euiYScroll(euiThemeContext, {
     height: '100px'
-  }), " display:flex;flex-direction:column;flex-grow:1;align-items:center;gap:", gapSize, ";", logicalCSS('padding-vertical', euiTheme.size.xs), " ", logicalCSS('padding-horizontal', euiTheme.size.m), " &:focus-visible{outline-style:auto;}}.react-datepicker__time-list-item{", logicalCSS('margin-horizontal', 'auto'), ";", logicalCSS('padding-horizontal', euiTheme.size.s), ";", logicalCSS('height', euiTheme.size.l), " line-height:", euiTheme.size.l, ";font-size:", euiFontSize(euiThemeContext, 'xs').fontSize, ";font-weight:", euiTheme.font.weight.medium, ";white-space:nowrap;text-align:center;border-radius:", euiTheme.border.radius.small, ";&:not(:disabled):hover{text-decoration:underline;cursor:pointer;}&--disabled{cursor:not-allowed;color:", euiTheme.colors.disabledText, ";}&--injected{", euiButtonEmptyColor(euiThemeContext, 'success'), ";}&--selected{", euiButtonFillColor(euiThemeContext, 'primary'), ";}&--preselected{background-color:", euiTheme.focus.backgroundColor, ";}", euiCanAnimate, "{transition:background-color ", euiTheme.animation.fast, " ease-in;}}&.react-datepicker--time-only{padding:0;.react-datepicker__time-container{background-color:transparent;margin:0;}.react-datepicker__time-list{", logicalCSS('height', '204px'), ";}.react-datepicker__time-list-item{", logicalCSS('min-width', '112px'), " font-size:", euiFontSize(euiThemeContext, 's').fontSize, ";text-align:start;}}");
+  }), " display:flex;flex-direction:column;flex-grow:1;align-items:center;gap:", gapSize, ";", logicalCSS('padding-vertical', euiTheme.size.xs), " ", logicalCSS('padding-horizontal', euiTheme.size.m), " &:focus-visible{outline-style:auto;}}.react-datepicker__time-list-item{display:flex;justify-content:align-center;align-items:center;", logicalCSS('min-height', euiTheme.size.l), " ", logicalCSS('margin-horizontal', 'auto'), " ", logicalCSS('padding-horizontal', euiTheme.size.s), " font-size:", euiFontSize(euiThemeContext, 'xs').fontSize, ";font-weight:", euiTheme.font.weight.medium, ";white-space:nowrap;border-radius:", euiTheme.border.radius.small, ";&:not(:disabled):hover{text-decoration:underline;cursor:pointer;}&--disabled{cursor:not-allowed;color:", colors.disabled.color, ";}&--injected{", colors.highlighted, ";}&--selected{", colors.selected, ";}&--preselected{", colors.hover, " ", highContrastModeStyles(euiThemeContext, {
+    // Use negative margins to offset the added border width
+    forced: "\n            border: ".concat(euiTheme.border.thin, ";\n            margin-inline: -").concat(euiTheme.border.width.thin, ";\n          ")
+  }), ";}", euiCanAnimate, "{transition:background-color ", animationSpeed, " ease-in;}}&.react-datepicker--time-only{padding:0;.react-datepicker__time-container{background-color:transparent;margin:0;}.react-datepicker__time-list{", logicalCSS('height', '204px'), ";}.react-datepicker__time-list-item{", logicalCSS('min-width', '112px'), " font-size:", euiFontSize(euiThemeContext, 's').fontSize, ";text-align:start;}}");
 };

package/es/components/date_picker/super_date_picker/super_date_picker.styles.js

@@ -10,7 +10,8 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 import { css } from '@emotion/react';
 import { makeHighContrastColor } from '../../../services';
 import { euiFontSize, euiMaxBreakpoint, logicalCSS, mathWithUnits } from '../../../global_styling';
-import { euiFormVariables, euiFormControlDefaultShadow, euiFormControlInvalidStyles, euiFormControlDisabledStyles } from '../../form/form.styles';
+import { highContrastModeStyles } from '../../../global_styling/functions/high_contrast';
+import { euiFormVariables, euiFormControlDefaultShadow, euiFormControlInvalidStyles, euiFormControlDisabledStyles, euiFormControlShowBackgroundUnderline } from '../../form/form.styles';
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "1e4qgxg-euiSuperDatePicker__range",
   styles: "flex-grow:1;overflow:hidden;label:euiSuperDatePicker__range;"
@@ -67,11 +68,24 @@ export var euiSuperDatePickerStyles = function euiSuperDatePickerStyles(euiTheme
     euiSuperDatePicker__prettyFormat: /*#__PURE__*/css(_buttonStyles(euiThemeContext), " text-align:start;;label:euiSuperDatePicker__prettyFormat;"),
     // Form states
     states: {
-      euiSuperDatePicker__formControlLayout: /*#__PURE__*/css(".euiFormControlLayout__childrenWrapper{", euiFormControlDefaultShadow(euiThemeContext), " box-shadow:none;};label:euiSuperDatePicker__formControlLayout;"),
-      default: /*#__PURE__*/css(".euiFormControlLayout__childrenWrapper{color:", forms.textColor, ";background-color:", forms.backgroundColor, ";}.euiDatePopoverButton{", euiFormControlDefaultShadow(euiThemeContext), " box-shadow:none;}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{--euiFormControlStateColor:", euiTheme.colors.primary, ";background-size:100% 100%;};label:default;"),
+      euiSuperDatePicker__formControlLayout: /*#__PURE__*/css(".euiFormControlLayout__childrenWrapper{", euiFormControlDefaultShadow(euiThemeContext), " ", highContrastModeStyles(euiThemeContext, {
+        none: 'box-shadow: none;',
+        preferred: 'border: none;'
+      }), ";};label:euiSuperDatePicker__formControlLayout;"),
+      default: /*#__PURE__*/css(".euiFormControlLayout__childrenWrapper{color:", forms.textColor, ";background-color:", forms.backgroundColor, ";}.euiDatePopoverButton{", euiFormControlDefaultShadow(euiThemeContext, {
+        withBorder: false,
+        withBackgroundColor: false
+      }), ";}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{--euiFormControlStateColor:", euiTheme.colors.primary, ";", euiFormControlShowBackgroundUnderline(euiThemeContext, euiTheme.colors.primary), ";};label:default;"),
       disabled: /*#__PURE__*/css(".euiFormControlLayout__childrenWrapper{", euiFormControlDisabledStyles(euiThemeContext), ";};label:disabled;"),
       invalid: /*#__PURE__*/css(".euiFormControlLayout__childrenWrapper{color:", euiTheme.colors.textDanger, ";background-color:", forms.backgroundColor, ";", euiFormControlInvalidStyles(euiThemeContext), ";};label:invalid;"),
-      needsUpdating: /*#__PURE__*/css(".euiFormControlLayout__childrenWrapper{color:", needsUpdatingTextColor, ";background-color:", needsUpdatingBackgroundColor, ";}.euiFormControlLayoutDelimited__delimiter{color:inherit;}.euiDatePopoverButton{", euiFormControlDefaultShadow(euiThemeContext), " background-color:inherit;box-shadow:none;}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{--euiFormControlStateColor:", euiTheme.colors.success, ";background-size:100% 100%;};label:needsUpdating;")
+      needsUpdating: /*#__PURE__*/css(".euiFormControlLayout__childrenWrapper{color:", needsUpdatingTextColor, ";background-color:", needsUpdatingBackgroundColor, ";}.euiFormControlLayoutDelimited__delimiter{color:inherit;}.euiDatePopoverButton{", euiFormControlDefaultShadow(euiThemeContext, {
+        withBorder: false,
+        withBackgroundColor: false
+      }), ";}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{--euiFormControlStateColor:", euiTheme.colors.success, ";", euiFormControlShowBackgroundUnderline(euiThemeContext, euiTheme.colors.success), ";}", highContrastModeStyles(euiThemeContext, {
+        // Force the fill color of all icons/svgs to give a bit more indication of state,
+        // since Windows high contrast themes otherwise override background/text color
+        forced: "\n            svg,\n            & + * svg {\n              fill: ".concat(euiTheme.colors.success, ";\n            }\n          ")
+      }), ";;label:needsUpdating;")
     }
   };
 };

package/es/components/description_list/description_list_title.styles.js

@@ -17,7 +17,7 @@ export var euiDescriptionListTitleStyles = function euiDescriptionListTitleStyle
     // Types
     row: /*#__PURE__*/css(";label:row;"),
     column: /*#__PURE__*/css(";label:column;"),
-    inline: /*#__PURE__*/css("display:inline;border-radius:", euiTheme.border.radius.small, ";font-weight:", euiTheme.font.weight.medium, ";background-color:", colorMode === 'DARK' ? euiTheme.colors.lightShade : euiTheme.colors.lightestShade, ";", logicalCSS('margin-vertical', '0'), " ", logicalCSS('margin-horizontal', euiTheme.size.xs), " ", colorMode === 'DARK' && "color: ".concat(euiTheme.colors.title, ";"), "&:first-of-type{", logicalCSS('margin-left', '0'), ";};label:inline;"),
+    inline: /*#__PURE__*/css("display:inline;border-radius:", euiTheme.border.radius.small, ";font-weight:", euiTheme.font.weight.medium, ";background-color:", colorMode === 'DARK' ? euiTheme.colors.lightShade : euiTheme.colors.lightestShade, ";", logicalCSS('margin-vertical', '0'), " ", logicalCSS('margin-horizontal', euiTheme.size.xs), " ", colorMode === 'DARK' && "color: ".concat(euiTheme.colors.textHeading, ";"), "&:first-of-type{", logicalCSS('margin-left', '0'), ";};label:inline;"),
     // This nested block handles just the font styling based on compressed and reverse
     fontStyles: {
       normal: /*#__PURE__*/css(euiTitle(euiThemeContext, 'xs'), ";;label:normal;"),

package/es/components/empty_prompt/empty_prompt.styles.js

@@ -15,6 +15,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css } from '@emotion/react';
 import { euiMinBreakpoint, euiPaddingSize, logicalCSS, mathWithUnits } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 import { getTokenName } from '@elastic/eui-theme-common';
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "x4698b-roundedBorders",
@@ -104,8 +105,12 @@ export var euiEmptyPromptStyles = function euiEmptyPromptStyles(euiThemeContext)
       euiEmptyPrompt__footer: _ref2,
       roundedBorders: _ref,
       // Colors
-      transparent: /*#__PURE__*/css("background-color:", euiTheme.colors.body, ";;label:transparent;"),
-      plain: /*#__PURE__*/css("background-color:", euiTheme.colors.body, ";;label:plain;"),
+      transparent: /*#__PURE__*/css("background-color:", euiTheme.colors.body, ";", highContrastModeStyles(euiThemeContext, {
+        preferred: "border: ".concat(euiTheme.border.thin, ";")
+      }), ";;label:transparent;"),
+      plain: /*#__PURE__*/css("background-color:", euiTheme.colors.body, ";", highContrastModeStyles(euiThemeContext, {
+        preferred: logicalCSS('border-top', generateFooterBorder('plain'))
+      }), ";;label:plain;"),
       subdued: /*#__PURE__*/css(logicalCSS('border-top', generateFooterBorder('subdued')), ";;label:subdued;"),
       highlighted: /*#__PURE__*/css(logicalCSS('border-top', generateFooterBorder('plain')), ";;label:highlighted;"),
       primary: /*#__PURE__*/css(logicalCSS('border-top', generateFooterBorder('primary')), ";;label:primary;"),

package/es/components/error_boundary/error_boundary.styles.js

@@ -8,12 +8,19 @@
 
 import { css } from '@emotion/react';
 import { logicalCSS } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 import { transparentize } from '../../services';
-export var euiErrorBoundaryStyles = function euiErrorBoundaryStyles(_ref) {
-  var euiTheme = _ref.euiTheme;
-  var color1 = transparentize(euiTheme.colors.danger, 0.25);
-  var color2 = transparentize(euiTheme.colors.danger, 0.05);
+export var euiErrorBoundaryStyles = function euiErrorBoundaryStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
+  var color1 = transparentize(euiTheme.colors.danger, highContrastMode ? 1 : 0.25);
+  var color2 = transparentize(euiTheme.colors.danger, highContrastMode ? 0.25 : 0.05);
   return {
-    euiErrorBoundary: /*#__PURE__*/css("background-image:repeating-linear-gradient(\n        45deg,\n        ", color1, ",\n        ", color1, " 1px,\n        ", color2, " 1px,\n        ", color2, " 19px\n      );background-size:54px 54px;", logicalCSS('padding-horizontal', euiTheme.size.base), " ", logicalCSS('padding-vertical', euiTheme.size.base), ";;label:euiErrorBoundary;")
+    euiErrorBoundary: /*#__PURE__*/css(logicalCSS('padding-horizontal', euiTheme.size.base), " ", logicalCSS('padding-vertical', euiTheme.size.base), " ", highContrastModeStyles(euiThemeContext, {
+      none: "\n          background-image: repeating-linear-gradient(\n            45deg,\n            ".concat(color1, ",\n            ").concat(color1, " 1px,\n            ").concat(color2, " 1px,\n            ").concat(color2, " 19px\n          );\n          background-size: 54px 54px; /* Fix for Safari 15.4+ */\n        "),
+      // Windows high contrast themes ignore background-images that aren't url()s.
+      // We can fake a basic danger-colored "border" with a little inline SVG trickery
+      forced: "\n          background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='".concat(encodeURIComponent(euiTheme.colors.textDanger), "' /%3E%3C/svg%3E\");\n        ")
+    }), ";;label:euiErrorBoundary;")
   };
 };

package/es/components/expression/expression.styles.js

@@ -10,6 +10,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css } from '@emotion/react';
 import { euiFontSize, logicalCSS, logicalShorthandCSS, logicalTextAlignCSS, euiTextBreakWord, euiTextTruncate, mathWithUnits } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 import { transparentize } from '../../services/color';
 var _colorCSS = function _colorCSS(color) {
   return "\n    &:focus {\n      background-color: ".concat(transparentize(color, 0.1), ";\n    }\n  ");
@@ -17,11 +18,14 @@ var _colorCSS = function _colorCSS(color) {
 export var euiExpressionStyles = function euiExpressionStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiExpression: /*#__PURE__*/css(euiTextBreakWord(), " display:inline-block;font-family:", euiTheme.font.familyCode, ";", logicalCSS('border-bottom', "".concat(euiTheme.border.width.thick, " solid transparent")), " ", euiFontSize(euiThemeContext, 's'), " ", logicalTextAlignCSS('left'), " ", logicalShorthandCSS('padding', "".concat(mathWithUnits(euiTheme.size.s, function (x) {
+    euiExpression: /*#__PURE__*/css(euiTextBreakWord(), " display:inline-block;font-family:", euiTheme.font.familyCode, ";", euiFontSize(euiThemeContext, 's'), " ", logicalTextAlignCSS('left'), " ", logicalShorthandCSS('padding', "".concat(mathWithUnits(euiTheme.size.s, function (x) {
       return x / 2;
-    }), " 0")), " color:", euiTheme.colors.text, ";&:focus{", logicalCSS('border-bottom-style', 'solid'), ";}&+.euiExpression{", logicalCSS('margin-left', euiTheme.size.s), ";};label:euiExpression;"),
+    }), " 0")), " color:", euiTheme.colors.textParagraph, ";&:focus{", logicalCSS('border-bottom-style', 'solid'), ";}&+.euiExpression{", logicalCSS('margin-left', euiTheme.size.s), ";};label:euiExpression;"),
     // Variants
-    columns: /*#__PURE__*/css("border-color:transparent;", logicalCSS('border-bottom-style', 'solid'), " ", logicalCSS('margin-bottom', euiTheme.size.xs), " ", logicalCSS('width', '100%'), " display:flex;padding:", euiTheme.size.xs, ";border-radius:", euiTheme.size.xs, ";;label:columns;"),
+    columns: /*#__PURE__*/css("display:flex;", logicalCSS('width', '100%'), " ", logicalCSS('margin-bottom', euiTheme.size.xs), " padding:", euiTheme.size.xs, ";", highContrastModeStyles(euiThemeContext, {
+      // Render the bottom border in high contrast mode for extra visibility
+      none: "\n          border-radius: ".concat(euiTheme.size.xs, ";\n          border-color: transparent;\n        ")
+    }), ";;label:columns;"),
     truncate: /*#__PURE__*/css(logicalCSS('max-width', '100%'), ";;label:truncate;"),
     // States
     isClickable: /*#__PURE__*/css("cursor:pointer;", logicalCSS('border-bottom', euiTheme.border.editable), " &[class*='-columns']{background-color:", euiTheme.colors.lightestShade, ";&:focus,&:hover:not(:disabled){[class*='euiExpression__description'],[class*='euiExpression__value']{text-decoration:underline;}}};label:isClickable;"),

package/es/components/filter_group/filter_button.styles.js

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

package/es/components/filter_group/filter_group.styles.js

@@ -9,6 +9,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css } from '@emotion/react';
 import { logicalCSS, mathWithUnits, euiBreakpoint } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 import { euiFormVariables } from '../form/form.styles';
 import { euiFilterButtonDisplay } from './filter_button.styles';
 var _ref = process.env.NODE_ENV === "production" ? {
@@ -28,7 +29,10 @@ export var euiFilterGroupStyles = function euiFilterGroupStyles(euiThemeContext)
     controlCompressedBorderRadius = _euiFormVariables.controlCompressedBorderRadius,
     controlCompressedHeight = _euiFormVariables.controlCompressedHeight;
   return {
-    euiFilterGroup: /*#__PURE__*/css("display:inline-flex;", logicalCSS('max-width', '100%'), " overflow:hidden;background-color:", backgroundColor, ";box-shadow:inset 0 0 0 ", euiTheme.border.width.thin, " ", borderColor, ";>*:not(.euiFilterButton){", euiFilterButtonDisplay(euiThemeContext), ";}.euiPopover>.euiFilterButton{", logicalCSS('width', '100%'), ";}", euiBreakpoint(euiThemeContext, ['xs', 's']), "{flex-wrap:wrap;}", euiBreakpoint(euiThemeContext, ['xs']), "{display:flex;.euiFilterButton{flex-grow:1;}};label:euiFilterGroup;"),
+    euiFilterGroup: /*#__PURE__*/css("display:inline-flex;", logicalCSS('max-width', '100%'), " overflow:hidden;background-color:", backgroundColor, ";", highContrastModeStyles(euiThemeContext, {
+      none: "box-shadow: inset 0 0 0 ".concat(euiTheme.border.width.thin, " ").concat(borderColor, ";"),
+      forced: "border: ".concat(euiTheme.border.thin, ";")
+    }), ">*:not(.euiFilterButton){", euiFilterButtonDisplay(euiThemeContext), ";}.euiPopover>.euiFilterButton{", logicalCSS('width', '100%'), ";}", euiBreakpoint(euiThemeContext, ['xs', 's']), "{flex-wrap:wrap;}", euiBreakpoint(euiThemeContext, ['xs']), "{display:flex;.euiFilterButton{flex-grow:1;}};label:euiFilterGroup;"),
     fullWidth: _ref,
     uncompressed: /*#__PURE__*/css("border-radius:", controlBorderRadius, ";", buttonChildrenBorderRadii(controlBorderRadius), ";;label:uncompressed;"),
     compressed: /*#__PURE__*/css("border-radius:", controlCompressedBorderRadius, ";", buttonChildrenBorderRadii(controlCompressedBorderRadius), " .euiFilterButton{", logicalCSS('height', controlCompressedHeight), ";};label:compressed;"),

package/es/components/filter_group/filter_select_item.styles.js

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

package/es/components/flyout/_flyout_close_button.styles.js

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

package/es/components/flyout/flyout.styles.js

@@ -40,7 +40,9 @@ export var euiFlyoutStyles = function euiFlyoutStyles(euiThemeContext) {
     left: /*#__PURE__*/css(logicalCSS('left', 0), " clip-path:polygon(0 0, 150% 0, 150% 100%, 0 100%);", euiCanAnimate, "{animation:", euiFlyoutSlideInLeft, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ";};label:left;"),
     // Type
     overlay: {
-      overlay: /*#__PURE__*/css(euiShadowXLarge(euiThemeContext), " &:has(.euiResizableButton){border-inline:none;};label:overlay;"),
+      overlay: /*#__PURE__*/css(euiShadowXLarge(euiThemeContext, {
+        borderAllInHighContrastMode: true
+      }), " &:has(.euiResizableButton){border-inline:none;};label:overlay;"),
       left: /*#__PURE__*/css("border-inline-end:", colorMode === 'DARK' ? "".concat(euiTheme.border.width.thin, " solid\n          ").concat(euiTheme.colors.borderBaseFloating) : 'none', ";;label:left;"),
       right: /*#__PURE__*/css("border-inline-start:", colorMode === 'DARK' ? "".concat(euiTheme.border.width.thin, " solid\n          ").concat(euiTheme.colors.borderBaseFloating) : 'none', ";;label:right;")
     },

package/es/components/flyout/flyout_body.styles.js

@@ -8,7 +8,9 @@
 
 import { css } from '@emotion/react';
 import { logicalCSS, logicalCSSWithFallback, euiYScrollWithShadows } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 export var euiFlyoutBodyStyles = function euiFlyoutBodyStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
   return {
     euiFlyoutBody: /*#__PURE__*/css(logicalCSSWithFallback('overflow-y', 'hidden'), " ", logicalCSS('height', '100%'), ";;label:euiFlyoutBody;"),
     overflow: {
@@ -18,6 +20,8 @@ export var euiFlyoutBodyStyles = function euiFlyoutBodyStyles(euiThemeContext) {
         side: 'end'
       }), ";;label:hasBanner;")
     },
-    euiFlyoutBody__banner: /*#__PURE__*/css(logicalCSSWithFallback('overflow-x', 'hidden'), ";;label:euiFlyoutBody__banner;")
+    euiFlyoutBody__banner: /*#__PURE__*/css(logicalCSSWithFallback('overflow-x', 'hidden'), " ", highContrastModeStyles(euiThemeContext, {
+      preferred: logicalCSS('border-bottom', euiTheme.border.thin)
+    }), ";;label:euiFlyoutBody__banner;")
   };
 };

package/es/components/flyout/flyout_footer.styles.js

@@ -7,9 +7,13 @@
  */
 
 import { css } from '@emotion/react';
+import { logicalCSS } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 export var euiFlyoutFooterStyles = function euiFlyoutFooterStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiFlyoutFooter: /*#__PURE__*/css("background-color:", euiTheme.components.flyoutFooterBackground, ";flex-grow:0;;label:euiFlyoutFooter;")
+    euiFlyoutFooter: /*#__PURE__*/css("background-color:", euiTheme.components.flyoutFooterBackground, ";flex-grow:0;", highContrastModeStyles(euiThemeContext, {
+      preferred: logicalCSS('border-top', euiTheme.border.thin)
+    }), ";;label:euiFlyoutFooter;")
   };
 };

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

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