@elastic/eui 97.3.0 → 97.3.1-rc.0

package/test-env/components/steps/step_number.js

@@ -60,12 +60,11 @@ var EuiStepNumber = exports.EuiStepNumber = function EuiStepNumber(_ref) {
     })
   };
   var classes = (0, _classnames.default)('euiStepNumber', className);
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _step_number.euiStepNumberStyles)(euiTheme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_step_number.euiStepNumberStyles);
   var cssStyles = [styles.euiStepNumber, styles[titleSize], status && styles[status]];
-  var contentStyles = (0, _step_number.euiStepNumberContentStyles)(euiTheme);
   var content;
   var screenReaderText;
+  var iconStyles = (0, _services.useEuiMemoizedStyles)(_step_number.euiStepNumberIconStyles);
   switch (status) {
     // Loading spinner
     case 'loading':
@@ -88,10 +87,10 @@ var EuiStepNumber = exports.EuiStepNumber = function EuiStepNumber(_ref) {
     case 'warning':
     case 'complete':
       {
-        var cssIconStyles = [contentStyles.euiStepNumber__icon, contentStyles[status],
+        var cssIconStyles = [iconStyles.euiStepNumber__icon, iconStyles[status],
         // EuiIcon does not support a xxs size so far,
         // we use custom sizing here instead
-        titleSize === 'none' && contentStyles[titleSize]];
+        titleSize === 'none' && iconStyles[titleSize]];
         var iconTypeMap = {
           danger: 'cross',
           warning: 'warning',
@@ -121,11 +120,9 @@ var EuiStepNumber = exports.EuiStepNumber = function EuiStepNumber(_ref) {
       if (titleSize === 'none') {
         break;
       }
-      var cssNumberStyles = [contentStyles.euiStepNumber__number, status && contentStyles[status]];
       content = (0, _react2.jsx)("span", {
         "aria-hidden": "true",
-        className: "euiStepNumber__number",
-        css: cssNumberStyles
+        className: "euiStepNumber__number"
       }, number);
       break;
   }

package/test-env/components/steps/step_number.styles.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiStepNumberStyles = exports.euiStepNumberContentStyles = void 0;
+exports.euiStepNumberStyles = exports.euiStepNumberIconStyles = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
-var _step = require("./step.styles");
 var _mixins = require("../../themes/amsterdam/global_styling/mixins");
+var _step = require("./step.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
  * or more contributor license agreements. Licensed under the Elastic License
@@ -32,10 +32,12 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 var euiStepNumberStyles = exports.euiStepNumberStyles = function euiStepNumberStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   var euiStep = (0, _step.euiStepVariables)(euiTheme);
   var createStepsNumber = function createStepsNumber(size, fontSize) {
-    return "\n      display: inline-block;\n      line-height: ".concat(size, ";\n      border-radius: ").concat(size, ";\n      ").concat((0, _global_styling.logicalCSS)('width', size), ";\n      ").concat((0, _global_styling.logicalCSS)('height', size), ";\n      text-align: center;\n      color: ").concat(euiTheme.colors.emptyShade, ";\n      background-color: ").concat(euiTheme.colors.primary, ";\n      font-size: ").concat(fontSize, ";\n      font-weight: ").concat(euiTheme.font.weight.medium, ";\n    ");
+    var highContrastBorder = highContrastMode ? "border: ".concat(euiTheme.border.thin, ";") : '';
+    return "\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      ".concat((0, _global_styling.logicalCSS)('width', size), ";\n      ").concat((0, _global_styling.logicalCSS)('height', size), ";\n      font-size: ").concat(fontSize, ";\n      font-weight: ").concat(euiTheme.font.weight.medium, ";\n      text-align: center;\n      color: ").concat(euiTheme.colors.emptyShade, ";\n      background-color: ").concat(euiTheme.colors.primary, ";\n      border-radius: 50%;\n      ").concat(highContrastBorder, "\n    ");
   };
   return {
     euiStepNumber: _ref2,
@@ -51,27 +53,24 @@ var euiStepNumberStyles = exports.euiStepNumberStyles = function euiStepNumberSt
     warning: /*#__PURE__*/(0, _react.css)((0, _mixins.euiButtonFillColor)(euiThemeContext, 'warning'), " ", _global_styling.euiCanAnimate, "{animation:", _global_styling.euiAnimScale, " ", euiTheme.animation.fast, " ", euiTheme.animation.bounce, ";};label:warning;"),
     danger: /*#__PURE__*/(0, _react.css)((0, _mixins.euiButtonFillColor)(euiThemeContext, 'danger'), " ", _global_styling.euiCanAnimate, "{animation:", _global_styling.euiAnimScale, " ", euiTheme.animation.fast, " ", euiTheme.animation.bounce, ";};label:danger;"),
     complete: /*#__PURE__*/(0, _react.css)((0, _mixins.euiButtonFillColor)(euiThemeContext, 'success'), " ", _global_styling.euiCanAnimate, "{animation:", _global_styling.euiAnimScale, " ", euiTheme.animation.fast, " ", euiTheme.animation.bounce, ";};label:complete;"),
-    current: /*#__PURE__*/(0, _react.css)("border:", euiTheme.border.width.thick, " solid ", euiTheme.colors.body, ";box-shadow:0 0 0 ", euiTheme.border.width.thick, " ", euiTheme.colors.primary, ";;label:current;")
+    current: /*#__PURE__*/(0, _react.css)("border:", euiTheme.border.width.thick, " solid ", euiTheme.colors.primary, ";box-shadow:inset 0 0 0 ", euiTheme.border.width.thick, " ", euiTheme.colors.body, ";transform:scale(1.15);", highContrastMode ? // Windows high contrast themes ignore box-shadow and background-color,
+    // so double the border width instead to make the selected state clearer
+    "@media (forced-colors: active) {\n            border-width: ".concat((0, _global_styling.mathWithUnits)(euiTheme.border.width.thick, function (x) {
+      return x * 2;
+    }), ";\n          }") : '', ";;label:current;")
   };
 };
-var euiStepNumberContentStyles = exports.euiStepNumberContentStyles = function euiStepNumberContentStyles(_ref3) {
+var euiStepNumberIconStyles = exports.euiStepNumberIconStyles = function euiStepNumberIconStyles(_ref3) {
   var euiTheme = _ref3.euiTheme;
   return {
-    // Statuses with icon content
-    euiStepNumber__icon: /*#__PURE__*/(0, _react.css)("vertical-align:middle;position:relative;inset-block-start:-", euiTheme.border.width.thin, ";;label:euiStepNumber__icon;"),
+    euiStepNumber__icon: /*#__PURE__*/(0, _react.css)(";label:euiStepNumber__icon;"),
     complete: /*#__PURE__*/(0, _react.css)("stroke:currentColor;stroke-width:", (0, _global_styling.mathWithUnits)(euiTheme.border.width.thin, function (x) {
       return x / 2;
     }), ";;label:complete;"),
     danger: /*#__PURE__*/(0, _react.css)("stroke:currentColor;stroke-width:", (0, _global_styling.mathWithUnits)(euiTheme.border.width.thin, function (x) {
       return x / 2;
     }), ";;label:danger;"),
-    warning: /*#__PURE__*/(0, _react.css)("inset-block-start:-", euiTheme.border.width.thick, ";;label:warning;"),
-    // Statuses with number content
-    euiStepNumber__number: /*#__PURE__*/(0, _react.css)(";label:euiStepNumber__number;"),
-    incomplete: /*#__PURE__*/(0, _react.css)("display:unset;position:relative;inset-block-start:-", euiTheme.border.width.thick, ";;label:incomplete;"),
-    loading: /*#__PURE__*/(0, _react.css)(";label:loading;"),
-    disabled: /*#__PURE__*/(0, _react.css)(";label:disabled;"),
-    current: /*#__PURE__*/(0, _react.css)("display:inline-block;transform:translateY(-", euiTheme.border.width.thick, ");;label:current;"),
+    warning: /*#__PURE__*/(0, _react.css)("margin-block-start:-", euiTheme.border.width.thick, ";;label:warning;"),
     none: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size.s), ";label:none;")
   };
 };

package/test-env/components/steps/sub_steps.styles.js

@@ -14,8 +14,9 @@ var _react = require("@emotion/react");
  */
 
 var euiSubStepsStyles = exports.euiSubStepsStyles = function euiSubStepsStyles(_ref) {
-  var euiTheme = _ref.euiTheme;
+  var euiTheme = _ref.euiTheme,
+    highContrastMode = _ref.highContrastMode;
   return {
-    euiSubSteps: /*#__PURE__*/(0, _react.css)("padding:", euiTheme.size.base, ";background-color:", euiTheme.colors.lightestShade, ";margin-block-end:", euiTheme.size.base, ";>*:last-child{margin-block-end:0;}& ol,.euiText & ol{list-style-type:lower-alpha;};label:euiSubSteps;")
+    euiSubSteps: /*#__PURE__*/(0, _react.css)("padding:", euiTheme.size.base, ";background-color:", euiTheme.colors.lightestShade, ";", highContrastMode ? "border: ".concat(euiTheme.border.thin, ";") : '', " margin-block-end:", euiTheme.size.base, ";>*:last-child{margin-block-end:0;}& ol,.euiText & ol{list-style-type:lower-alpha;};label:euiSubSteps;")
   };
 };

package/test-env/components/table/table_row.styles.js

@@ -39,7 +39,9 @@ var euiTableRowStyles = exports.euiTableRowStyles = function euiTableRowStyles(e
       checkboxOffset: /*#__PURE__*/(0, _react.css)("&>.euiTableRowCell:first-child{", (0, _global_styling.logicalCSS)('padding-left', checkboxSize), ";};label:checkboxOffset;")
     },
     mobile: {
-      mobile: /*#__PURE__*/(0, _react.css)("position:relative;display:flex;flex-wrap:wrap;padding:", cellContentPadding, ";", (0, _global_styling.logicalCSS)('margin-bottom', cellContentPadding), (0, _mixins.euiShadow)(euiThemeContext, 's'), " background-color:", (0, _global_styling.euiBackgroundColor)(euiThemeContext, 'plain'), ";border-radius:", euiTheme.border.radius.medium, ";;label:mobile;"),
+      mobile: /*#__PURE__*/(0, _react.css)("position:relative;display:flex;flex-wrap:wrap;padding:", cellContentPadding, ";", (0, _global_styling.logicalCSS)('margin-bottom', cellContentPadding), (0, _mixins.euiShadow)(euiThemeContext, 's', {
+        borderAllInHighContrastMode: true
+      }), " background-color:", (0, _global_styling.euiBackgroundColor)(euiThemeContext, 'plain'), ";border-radius:", euiTheme.border.radius.medium, ";;label:mobile;"),
       selected: /*#__PURE__*/(0, _react.css)("&,&+.euiTableRow-isExpandedRow{background-color:", rowColors.selected.color, ";};label:selected;"),
       /**
        * Left column offset (no border)

package/test-env/components/tabs/tab.styles.js

@@ -22,15 +22,23 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 var euiTabStyles = exports.euiTabStyles = function euiTabStyles(_ref2) {
-  var euiTheme = _ref2.euiTheme;
+  var euiTheme = _ref2.euiTheme,
+    highContrastMode = _ref2.highContrastMode;
+  var _selectedBorder = function _selectedBorder(color) {
+    var borderWidth = euiTheme.border.width.thick;
+    return !highContrastMode ? // By default, styles use an inset box shadow to not increase/affect height
+    "box-shadow: inset 0 -".concat(borderWidth, " 0 ").concat(color, ";") :
+    // However, Windows high contrast themes ignores box-shadow and only respects border-bottom
+    (0, _global_styling.logicalCSS)('border-bottom', "".concat(borderWidth, " solid ").concat(color));
+  };
   return {
     euiTab: /*#__PURE__*/(0, _react.css)("display:flex;cursor:pointer;flex-direction:row;align-items:center;gap:", euiTheme.size.s, ";", (0, _global_styling.logicalCSS)('padding-vertical', 0), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), "font-weight:", euiTheme.font.weight.semiBold, ";color:", euiTheme.colors.title, ";&:focus{outline-offset:-", euiTheme.focus.width, ";};label:euiTab;"),
     // variations
     expanded: _ref,
-    selected: /*#__PURE__*/(0, _react.css)("box-shadow:inset 0 -", euiTheme.border.width.thick, " 0 ", euiTheme.colors.primary, ";color:", euiTheme.colors.primaryText, ";;label:selected;"),
+    selected: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.primaryText, ";", _selectedBorder(euiTheme.colors.primary), ";;label:selected;"),
     disabled: {
       disabled: /*#__PURE__*/(0, _react.css)("cursor:not-allowed;color:", euiTheme.colors.disabledText, ";;label:disabled;"),
-      selected: /*#__PURE__*/(0, _react.css)("box-shadow:inset 0 -", euiTheme.border.width.thick, " 0 ", euiTheme.colors.disabledText, ";;label:selected;")
+      selected: /*#__PURE__*/(0, _react.css)(_selectedBorder(euiTheme.colors.disabledText), ";;label:selected;")
     }
   };
 };

package/test-env/components/tabs/tabs.styles.js

@@ -15,10 +15,17 @@ var _global_styling = require("../../global_styling");
  */
 
 var euiTabsStyles = exports.euiTabsStyles = function euiTabsStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   return {
     euiTabs: /*#__PURE__*/(0, _react.css)("display:flex;", (0, _global_styling.logicalCSS)('max-width', '100%'), " ", (0, _global_styling.logicalCSSWithFallback)('overflow-x', 'auto'), " ", (0, _global_styling.logicalCSSWithFallback)('overflow-y', 'hidden'), " position:relative;flex-shrink:0;;label:euiTabs;"),
-    bottomBorder: /*#__PURE__*/(0, _react.css)("box-shadow:inset 0 -", euiTheme.border.width.thin, " 0 ", euiTheme.border.color, ";;label:bottomBorder;"),
+    bottomBorder: !highContrastMode ?
+    /*#__PURE__*/
+    // By default, uses an inset box shadow to not increase/affect height
+    (0, _react.css)("box-shadow:inset 0 -", euiTheme.border.width.thin, " 0 ", euiTheme.border.color, ";;label:bottomBorder;") :
+    /*#__PURE__*/
+    // However, Windows high contrast themes ignores box-shadow and only respects border-bottom
+    (0, _react.css)((0, _global_styling.logicalCSS)('border-bottom', euiTheme.border.thin), ";label:bottomBorder;"),
     // sizes
     s: /*#__PURE__*/(0, _react.css)("gap:", euiTheme.size.m, ";;label:s;"),
     m: /*#__PURE__*/(0, _react.css)("gap:", euiTheme.size.base, ";;label:m;"),

package/test-env/components/text/text.styles.js

@@ -8,6 +8,7 @@ var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
 var _link = require("../link/link.styles");
 var _title = require("../title/title.styles");
+var _code_syntax = require("../code/code_syntax.styles");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -68,9 +69,11 @@ var euiScaleText = function euiScaleText(euiThemeContext, options) {
  * Styles
  */
 var euiTextStyles = exports.euiTextStyles = function euiTextStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
+  var codeColors = (0, _code_syntax.euiCodeTextColors)(euiThemeContext);
   return {
-    euiText: /*#__PURE__*/(0, _react.css)(euiText(euiTheme, true), "clear:both;a:not([class]){", (0, _link.euiLinkCSS)(euiThemeContext), ";}ul{list-style:disc;}ol{list-style:decimal;}blockquote{border-inline-start-color:", euiTheme.border.color, ";border-inline-start-style:solid;}blockquote:not(.euiMarkdownFormat__blockquote){color:", euiTheme.colors.subduedText, ";}h1{", (0, _title.euiTitle)(euiThemeContext, 'l'), ";}h2{", (0, _title.euiTitle)(euiThemeContext, 'm'), ";}h3{", (0, _title.euiTitle)(euiThemeContext, 's'), ";}h4,dt{", (0, _title.euiTitle)(euiThemeContext, 'xs'), ";}h5{", (0, _title.euiTitle)(euiThemeContext, 'xxs'), ";}h6{", (0, _title.euiTitle)(euiThemeContext, 'xxxs'), " text-transform:uppercase;}h1,h2,h3,h4,h5,h6,dt{color:inherit;}pre:not(.euiCodeBlock__pre){white-space:pre-wrap;background:", (0, _global_styling.euiBackgroundColor)(euiThemeContext, 'subdued'), ";color:", euiTheme.colors.text, ";}pre:not(.euiCodeBlock__pre),pre:not(.euiCodeBlock__pre) code{display:block;}>:last-child{", (0, _global_styling.logicalCSS)('margin-bottom', '0 !important'), ";}kbd{position:relative;display:inline-block;", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.xxs), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), " line-height:1;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.text, ";border-radius:", (0, _global_styling.mathWithUnits)(euiTheme.border.radius.small, function (x) {
+    euiText: /*#__PURE__*/(0, _react.css)(euiText(euiTheme, true), "clear:both;a:not([class]){", (0, _link.euiLinkCSS)(euiThemeContext), ";}ul{list-style:disc;}ol{list-style:decimal;}blockquote{border-inline-start-color:", euiTheme.border.color, ";border-inline-start-style:solid;}blockquote:not(.euiMarkdownFormat__blockquote){color:", euiTheme.colors.subduedText, ";}h1{", (0, _title.euiTitle)(euiThemeContext, 'l'), ";}h2{", (0, _title.euiTitle)(euiThemeContext, 'm'), ";}h3{", (0, _title.euiTitle)(euiThemeContext, 's'), ";}h4,dt{", (0, _title.euiTitle)(euiThemeContext, 'xs'), ";}h5{", (0, _title.euiTitle)(euiThemeContext, 'xxs'), ";}h6{", (0, _title.euiTitle)(euiThemeContext, 'xxxs'), " text-transform:uppercase;}h1,h2,h3,h4,h5,h6,dt{color:inherit;}pre:not(.euiCodeBlock__pre){white-space:pre-wrap;background-color:", codeColors.backgroundColor, ";color:", codeColors.color, ";", highContrastMode ? "border: ".concat(euiTheme.border.thin) : '', ";}pre:not(.euiCodeBlock__pre),pre:not(.euiCodeBlock__pre) code{display:block;}>:last-child{", (0, _global_styling.logicalCSS)('margin-bottom', '0 !important'), ";}kbd{position:relative;display:inline-block;vertical-align:bottom;overflow:hidden;", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.xxs), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), " line-height:1;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.text, ";border-radius:", (0, _global_styling.mathWithUnits)(euiTheme.border.radius.small, function (x) {
       return x / 2;
     }), ";};label:euiText;"),
     constrainedWidth: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-width', euiTextConstrainedMaxWidth), ";;label:constrainedWidth;"),

package/test-env/components/text_truncate/text_truncate.styles.js

@@ -30,24 +30,28 @@ var euiTextTruncateStyles = exports.euiTextTruncateStyles = {
    * cross-browser issues with this at some point. Hopefully CSS natively implements
    * custom text truncation some day (https://github.com/w3c/csswg-drafts/issues/3937)
    * and there'll be no need for the entire component at that point 🙏
+   *
+   * 2024 update: We have found an issue! Windows high contrast themes force overrides
+   * `color` and therefore "breaks" the rgba hack. We can skip this UX (via the
+   * forced-colors media query) for those modes for now.
    */
   // Makes the truncated text unselectable/un-clickable
   euiTextTruncate__truncatedText: process.env.NODE_ENV === "production" ? {
-    name: "1sjxkb1-euiTextTruncate__truncatedText",
-    styles: "user-select:none;pointer-events:none;label:euiTextTruncate__truncatedText;"
+    name: "12qrcqf-euiTextTruncate__truncatedText",
+    styles: "@media (forced-colors: none){user-select:none;pointer-events:none;};label:euiTextTruncate__truncatedText;"
   } : {
-    name: "1sjxkb1-euiTextTruncate__truncatedText",
-    styles: "user-select:none;pointer-events:none;label:euiTextTruncate__truncatedText;",
+    name: "12qrcqf-euiTextTruncate__truncatedText",
+    styles: "@media (forced-colors: none){user-select:none;pointer-events:none;};label:euiTextTruncate__truncatedText;",
     toString: _EMOTION_STRINGIFIED_CSS_ERROR__
   },
   // Positions the full text on top of the truncated text (so that clicking targets it)
   // and gives it a color opacity of 0 so that it's not actually visible
   euiTextTruncate__fullText: process.env.NODE_ENV === "production" ? {
-    name: "19c9gqi-euiTextTruncate__fullText",
-    styles: "position:absolute;inset:0;overflow:hidden;color:rgba(0, 0, 0, 0);@supports (-webkit-hyphens: none){text-overflow:ellipsis;};label:euiTextTruncate__fullText;"
+    name: "lnk46o-euiTextTruncate__fullText",
+    styles: "position:absolute;inset:0;overflow:hidden;color:rgba(0, 0, 0, 0);@supports (-webkit-hyphens: none){text-overflow:ellipsis;}@media (forced-colors: active){display:none;};label:euiTextTruncate__fullText;"
   } : {
-    name: "19c9gqi-euiTextTruncate__fullText",
-    styles: "position:absolute;inset:0;overflow:hidden;color:rgba(0, 0, 0, 0);@supports (-webkit-hyphens: none){text-overflow:ellipsis;};label:euiTextTruncate__fullText;",
+    name: "lnk46o-euiTextTruncate__fullText",
+    styles: "position:absolute;inset:0;overflow:hidden;color:rgba(0, 0, 0, 0);@supports (-webkit-hyphens: none){text-overflow:ellipsis;}@media (forced-colors: active){display:none;};label:euiTextTruncate__fullText;",
     toString: _EMOTION_STRINGIFIED_CSS_ERROR__
   }
 };

package/test-env/components/timeline/timeline.styles.js

@@ -20,13 +20,16 @@ var _gutterSizeAdjustment = function _gutterSizeAdjustment(gutterSize) {
 
 // The vertical line should only appear when the EuiTimelineItem's
 // are wrapped in a EuiTimeline. That's why these styles live here.
-var timelineVerticalLine = function timelineVerticalLine(euiTheme) {
-  return "  \n    [class*='euiTimelineItem-'] > [class*='euiTimelineItemIcon-']::before {\n      content: '';\n      position: absolute;\n      ".concat((0, _global_styling.logicalCSS)('top', 0), ";\n      ").concat((0, _global_styling.logicalCSS)('width', euiTheme.size.xxs), ";\n      background-color: ").concat(euiTheme.colors.lightShade, ";\n    }\n\n    > [class*='euiTimelineItem-center']:first-child > [class*='euiTimelineItemIcon-']::before {\n      ").concat((0, _global_styling.logicalCSS)('top', '50%'), ";\n    }\n  \n    > [class*='euiTimelineItem-center']:last-child:not(:only-child) > [class*='euiTimelineItemIcon-']::before {\n      ").concat((0, _global_styling.logicalCSS)('height', '50%'), ";\n    }\n  ");
+var timelineVerticalLine = function timelineVerticalLine(_ref) {
+  var euiTheme = _ref.euiTheme,
+    highContrastMode = _ref.highContrastMode;
+  var highContrastBorder = highContrastMode ? "\n    [class*=\"euiTimelineItemIcon__content\"] > * {\n      border: ".concat(euiTheme.border.thin, ";\n    }") : '';
+  return "  \n    [class*='euiTimelineItem-'] > [class*='euiTimelineItemIcon-']::before {\n      content: '';\n      position: absolute;\n      ".concat((0, _global_styling.logicalCSS)('top', 0), ";\n      ").concat((0, _global_styling.logicalCSS)('width', euiTheme.size.xxs), ";\n      background-color: ").concat(euiTheme.border.color, ";\n    }\n\n    > [class*='euiTimelineItem-center']:first-child > [class*='euiTimelineItemIcon-']::before {\n      ").concat((0, _global_styling.logicalCSS)('top', '50%'), ";\n    }\n  \n    > [class*='euiTimelineItem-center']:last-child:not(:only-child) > [class*='euiTimelineItemIcon-']::before {\n      ").concat((0, _global_styling.logicalCSS)('height', '50%'), ";\n    }\n\n    ").concat(highContrastBorder, "\n  ");
 };
-var euiTimelineStyles = exports.euiTimelineStyles = function euiTimelineStyles(_ref) {
-  var euiTheme = _ref.euiTheme;
+var euiTimelineStyles = exports.euiTimelineStyles = function euiTimelineStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiTimeline: /*#__PURE__*/(0, _react.css)("display:flex;flex-direction:column;", timelineVerticalLine(euiTheme), ";;label:euiTimeline;"),
+    euiTimeline: /*#__PURE__*/(0, _react.css)("display:flex;flex-direction:column;", timelineVerticalLine(euiThemeContext), ";;label:euiTimeline;"),
     m: /*#__PURE__*/(0, _react.css)(_gutterSizeAdjustment(euiTheme.size.base), ";label:m;"),
     l: /*#__PURE__*/(0, _react.css)(_gutterSizeAdjustment(euiTheme.size.l), ";label:l;"),
     xl: /*#__PURE__*/(0, _react.css)(_gutterSizeAdjustment(euiTheme.size.xl), ";label:xl;")

package/test-env/components/toast/toast.styles.js

@@ -17,17 +17,23 @@ var _title = require("../title/title.styles");
  */
 
 var euiToastStyles = exports.euiToastStyles = function euiToastStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
+  var borderWidth = highContrastMode ? (0, _global_styling.mathWithUnits)(euiTheme.border.width.thick, function (x) {
+    return x * 2;
+  }) : euiTheme.border.width.thick;
   return {
     // Base
-    euiToast: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";", (0, _amsterdam.euiShadowLarge)(euiThemeContext), " position:relative;", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.base), " ", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.base), " background-color:", euiTheme.colors.emptyShade, ";", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.euiTextBreakWord)(), "&:hover,&:focus{[class*='euiToast__closeButton']{opacity:1;}};label:euiToast;"),
+    euiToast: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";", (0, _amsterdam.euiShadowLarge)(euiThemeContext, {
+      borderAllInHighContrastMode: true
+    }), " position:relative;", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.base), " ", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.base), " background-color:", euiTheme.colors.emptyShade, ";", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.euiTextBreakWord)(), "&:hover,&:focus{[class*='euiToast__closeButton']{opacity:1;}};label:euiToast;"),
     // Elements
     euiToast__closeButton: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('top', euiTheme.size.base), " ", (0, _global_styling.logicalCSS)('right', euiTheme.size.base), ";;label:euiToast__closeButton;"),
     // Variants
-    primary: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', "2px solid ".concat(euiTheme.colors.primary)), ";;label:primary;"),
-    success: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', "2px solid ".concat(euiTheme.colors.success)), ";;label:success;"),
-    warning: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', "2px solid ".concat(euiTheme.colors.warning)), ";;label:warning;"),
-    danger: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', "2px solid ".concat(euiTheme.colors.danger)), ";;label:danger;")
+    primary: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', "".concat(borderWidth, " solid ").concat(euiTheme.colors.primary)), ";;label:primary;"),
+    success: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', "".concat(borderWidth, " solid ").concat(euiTheme.colors.success)), ";;label:success;"),
+    warning: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', "".concat(borderWidth, " solid ").concat(euiTheme.colors.warning)), ";;label:warning;"),
+    danger: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', "".concat(borderWidth, " solid ").concat(euiTheme.colors.danger)), ";;label:danger;")
   };
 };
 var euiToastHeaderStyles = exports.euiToastHeaderStyles = function euiToastHeaderStyles(euiThemeContext) {

package/test-env/components/tool_tip/tool_tip.styles.js

@@ -44,7 +44,9 @@ var euiToolTipStyles = exports.euiToolTipStyles = function euiToolTipStyles(euiT
   });
   return {
     // Base
-    euiToolTip: /*#__PURE__*/(0, _react.css)((0, _amsterdam.euiShadow)(euiThemeContext), " border-radius:", euiTheme.border.radius.medium, ";background-color:", euiToolTipBackgroundColor(euiTheme, colorMode), ";color:", euiTheme.colors.ghost, ";z-index:", euiTheme.levels.toast, ";", (0, _global_styling.logicalCSS)('max-width', '256px'), " overflow-wrap:break-word;padding:", euiTheme.size.s, ";", (0, _global_styling.euiFontSize)(euiThemeContext, 's'), " position:absolute;[class*='euiHorizontalRule']{background-color:", euiToolTipBorderColor(euiTheme, colorMode), ";};label:euiToolTip;"),
+    euiToolTip: /*#__PURE__*/(0, _react.css)((0, _amsterdam.euiShadow)(euiThemeContext, undefined, {
+      borderAllInHighContrastMode: true
+    }), " border-radius:", euiTheme.border.radius.medium, ";background-color:", euiToolTipBackgroundColor(euiTheme, colorMode), ";color:", euiTheme.colors.ghost, ";z-index:", euiTheme.levels.toast, ";", (0, _global_styling.logicalCSS)('max-width', '256px'), " overflow-wrap:break-word;padding:", euiTheme.size.s, ";", (0, _global_styling.euiFontSize)(euiThemeContext, 's'), " position:absolute;[class*='euiHorizontalRule']{background-color:", euiToolTipBorderColor(euiTheme, colorMode), ";};label:euiToolTip;"),
     // Sizes
     s: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), ";;label:s;"),
     // Positions
@@ -57,15 +59,22 @@ var euiToolTipStyles = exports.euiToolTipStyles = function euiToolTipStyles(euiT
       return x / 2;
     }), ";background-color:", euiToolTipBackgroundColor(euiTheme, colorMode), ";", (0, _global_styling.logicalSizeCSS)(arrowSize, arrowSize), ";;label:euiToolTip__arrow;"),
     arrowPositions: {
-      top: /*#__PURE__*/(0, _react.css)("transform:translateY(", arrowPlusSize, ") rotateZ(45deg);;label:top;"),
-      bottom: /*#__PURE__*/(0, _react.css)("transform:translateY(", arrowMinusSize, ") rotateZ(45deg);;label:bottom;"),
-      left: /*#__PURE__*/(0, _react.css)("transform:translateX(", arrowPlusSize, ") rotateZ(45deg);;label:left;"),
-      right: /*#__PURE__*/(0, _react.css)("transform:translateX(", arrowMinusSize, ") rotateZ(45deg);;label:right;")
+      top: /*#__PURE__*/(0, _react.css)("transform:translateY(", arrowPlusSize, ") rotateZ(45deg);", _highContrastArrowBorder(euiThemeContext, ['bottom', 'right']), ";;label:top;"),
+      bottom: /*#__PURE__*/(0, _react.css)("transform:translateY(", arrowMinusSize, ") rotateZ(45deg);", _highContrastArrowBorder(euiThemeContext, ['top', 'left']), ";;label:bottom;"),
+      left: /*#__PURE__*/(0, _react.css)("transform:translateX(", arrowPlusSize, ") rotateZ(45deg);", _highContrastArrowBorder(euiThemeContext, ['top', 'right']), ";;label:left;"),
+      right: /*#__PURE__*/(0, _react.css)("transform:translateX(", arrowMinusSize, ") rotateZ(45deg);", _highContrastArrowBorder(euiThemeContext, ['bottom', 'left']), ";;label:right;")
     },
     // Title
     euiToolTip__title: /*#__PURE__*/(0, _react.css)("font-weight:", euiTheme.font.weight.bold, ";", (0, _global_styling.logicalCSS)('border-bottom', "solid ".concat(euiTheme.border.width.thin, " ").concat(euiToolTipBorderColor(euiTheme, colorMode))), " ", (0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.xs), " ", (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.xs), ";;label:euiToolTip__title;")
   };
 };
+var _highContrastArrowBorder = function _highContrastArrowBorder(_ref4, sides) {
+  var euiTheme = _ref4.euiTheme,
+    highContrastMode = _ref4.highContrastMode;
+  return highContrastMode ? sides.map(function (side) {
+    return (0, _global_styling.logicalCSS)("border-".concat(side), euiTheme.border.thin);
+  }).join('\n') : '';
+};
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "fzilnk-inlineBlock",
   styles: "display:inline-block;label:inlineBlock;"

package/test-env/global_styling/mixins/_color.js

@@ -95,16 +95,17 @@ var useEuiBackgroundColorCSS = exports.useEuiBackgroundColorCSS = function useEu
 
 var euiBorderColor = exports.euiBorderColor = function euiBorderColor(_ref4, color) {
   var euiTheme = _ref4.euiTheme,
-    colorMode = _ref4.colorMode;
+    colorMode = _ref4.colorMode,
+    highContrastMode = _ref4.highContrastMode;
   switch (color) {
     case 'transparent':
     case 'plain':
     case 'subdued':
       return euiTheme.border.color;
     case 'warning':
-      return (0, _services.tintOrShade)(euiTheme.colors.warning, 0.4, colorMode);
+      return (0, _services.tintOrShade)(euiTheme.colors.warning, highContrastMode ? 0 : 0.4, colorMode);
     default:
-      return (0, _services.tintOrShade)(euiTheme.colors[color], 0.6, colorMode);
+      return (0, _services.tintOrShade)(euiTheme.colors[color], highContrastMode ? 0 : 0.6, colorMode);
   }
 };
 

package/test-env/services/theme/context.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.defaultComputedTheme = exports.EuiThemeContext = exports.EuiSystemContext = exports.EuiNestedThemeContext = exports.EuiModificationsContext = exports.EuiColorModeContext = void 0;
+exports.defaultComputedTheme = exports.EuiThemeContext = exports.EuiSystemContext = exports.EuiNestedThemeContext = exports.EuiModificationsContext = exports.EuiHighContrastModeContext = exports.EuiColorModeContext = void 0;
 var _react = require("react");
 var _theme = require("../../themes/amsterdam/theme");
 var _utils = require("./utils");
@@ -18,6 +18,7 @@ var _utils = require("./utils");
 var EuiSystemContext = exports.EuiSystemContext = /*#__PURE__*/(0, _react.createContext)(_theme.EuiThemeAmsterdam);
 var EuiModificationsContext = exports.EuiModificationsContext = /*#__PURE__*/(0, _react.createContext)({});
 var EuiColorModeContext = exports.EuiColorModeContext = /*#__PURE__*/(0, _react.createContext)(_utils.DEFAULT_COLOR_MODE);
+var EuiHighContrastModeContext = exports.EuiHighContrastModeContext = /*#__PURE__*/(0, _react.createContext)(false);
 var defaultComputedTheme = exports.defaultComputedTheme = (0, _utils.getComputed)(_theme.EuiThemeAmsterdam, {}, _utils.DEFAULT_COLOR_MODE);
 var EuiThemeContext = exports.EuiThemeContext = /*#__PURE__*/(0, _react.createContext)(defaultComputedTheme);
 var EuiNestedThemeContext = exports.EuiNestedThemeContext = /*#__PURE__*/(0, _react.createContext)({

package/test-env/services/theme/hooks.js

@@ -30,6 +30,7 @@ var providerMessage = "`EuiProvider` is missing which can result in negative eff
 var useEuiTheme = exports.useEuiTheme = function useEuiTheme() {
   var theme = (0, _react.useContext)(_context.EuiThemeContext);
   var colorMode = (0, _react.useContext)(_context.EuiColorModeContext);
+  var highContrastMode = (0, _react.useContext)(_context.EuiHighContrastModeContext);
   var modifications = (0, _react.useContext)(_context.EuiModificationsContext);
   var isFallback = theme === _context.defaultComputedTheme;
   if (isFallback) {
@@ -39,9 +40,10 @@ var useEuiTheme = exports.useEuiTheme = function useEuiTheme() {
     return {
       euiTheme: theme,
       colorMode: colorMode,
+      highContrastMode: highContrastMode,
       modifications: modifications
     };
-  }, [theme, colorMode, modifications]);
+  }, [theme, colorMode, highContrastMode, modifications]);
   return assembledTheme;
 };
 

package/test-env/services/theme/index.js

@@ -21,6 +21,12 @@ Object.defineProperty(exports, "EuiColorModeContext", {
     return _context.EuiColorModeContext;
   }
 });
+Object.defineProperty(exports, "EuiHighContrastModeContext", {
+  enumerable: true,
+  get: function get() {
+    return _context.EuiHighContrastModeContext;
+  }
+});
 Object.defineProperty(exports, "EuiModificationsContext", {
   enumerable: true,
   get: function get() {

package/test-env/services/theme/provider.js

@@ -36,6 +36,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var EuiThemeProvider = exports.EuiThemeProvider = function EuiThemeProvider(_ref) {
   var _system = _ref.theme,
     _colorMode = _ref.colorMode,
+    _highContrastMode = _ref.highContrastMode,
     _modifications = _ref.modify,
     children = _ref.children,
     wrapperProps = _ref.wrapperProps;
@@ -47,6 +48,7 @@ var EuiThemeProvider = exports.EuiThemeProvider = function EuiThemeProvider(_ref
   var parentSystem = (0, _react2.useContext)(_context.EuiSystemContext);
   var parentModifications = (0, _react2.useContext)(_context.EuiModificationsContext);
   var parentColorMode = (0, _react2.useContext)(_context.EuiColorModeContext);
+  var parentHighContrastMode = (0, _react2.useContext)(_context.EuiHighContrastModeContext);
   var parentTheme = (0, _react2.useContext)(_context.EuiThemeContext);
   var _useState = (0, _react2.useState)(_system || parentSystem),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -70,9 +72,35 @@ var EuiThemeProvider = exports.EuiThemeProvider = function EuiThemeProvider(_ref
     colorMode = _useState6[0],
     setColorMode = _useState6[1];
   var prevColorMode = (0, _react2.useRef)(colorMode);
-  var isParentTheme = (0, _react2.useRef)(prevSystemKey.current === parentSystem.key && colorMode === parentColorMode && (0, _isEqual.default)(parentModifications, modifications));
+  var highContrastMode = _highContrastMode !== null && _highContrastMode !== void 0 ? _highContrastMode : parentHighContrastMode;
+  var prevHighContrastMode = (0, _react2.useRef)(highContrastMode);
+
+  // Rather than being calculated when the theme's styles are being computed, we're bogarting the
+  // `modify` logic so we can ensure consumer modifications to border-color are also overriden.
+  // If in the future we need more complex high contrast mode logic (e.g. changing color tokens)
+  // we'll need to actually dive into theme/utils.ts's Computed.getValue logic at that point.
+  var highContrastModifications = (0, _react2.useMemo)(function () {
+    if (highContrastMode) {
+      return _objectSpread(_objectSpread({}, modifications), {}, {
+        border: {
+          color: system.root.colors[colorMode].fullShade,
+          get thin() {
+            var _modifications$border;
+            var width = ((_modifications$border = modifications.border) === null || _modifications$border === void 0 || (_modifications$border = _modifications$border.width) === null || _modifications$border === void 0 ? void 0 : _modifications$border.thin) || system.root.border.width.thin;
+            return "".concat(width, " solid ").concat(this.color);
+          },
+          get thick() {
+            var _modifications$border2;
+            var width = ((_modifications$border2 = modifications.border) === null || _modifications$border2 === void 0 || (_modifications$border2 = _modifications$border2.width) === null || _modifications$border2 === void 0 ? void 0 : _modifications$border2.thick) || system.root.border.width.thick;
+            return "".concat(width, " solid ").concat(this.color);
+          }
+        }
+      });
+    }
+  }, [highContrastMode, modifications, colorMode, system]);
+  var isParentTheme = (0, _react2.useRef)(prevSystemKey.current === parentSystem.key && colorMode === parentColorMode && highContrastMode === parentHighContrastMode && (0, _isEqual.default)(parentModifications, modifications));
   var _useState7 = (0, _react2.useState)(isParentTheme.current && Object.keys(parentTheme).length ? _objectSpread({}, parentTheme) // Intentionally create a new object to break referential equality
-    : (0, _utils.getComputed)(system, (0, _utils.buildTheme)(modifications, "_".concat(system.key)), colorMode)),
+    : (0, _utils.getComputed)(system, (0, _utils.buildTheme)(highContrastModifications !== null && highContrastModifications !== void 0 ? highContrastModifications : modifications, "_".concat(system.key)), colorMode)),
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
     theme = _useState8[0],
     setTheme = _useState8[1];
@@ -101,10 +129,12 @@ var EuiThemeProvider = exports.EuiThemeProvider = function EuiThemeProvider(_ref
     }
   }, [_colorMode, parentColorMode]);
   (0, _react2.useEffect)(function () {
-    if (!isParentTheme.current) {
-      setTheme((0, _utils.getComputed)(system, (0, _utils.buildTheme)(modifications, "_".concat(system.key)), colorMode));
+    var highContrastModeChanged = prevHighContrastMode.current !== highContrastMode;
+    if (!isParentTheme.current || highContrastModeChanged) {
+      setTheme((0, _utils.getComputed)(system, (0, _utils.buildTheme)(highContrastModifications !== null && highContrastModifications !== void 0 ? highContrastModifications : modifications, "_".concat(system.key)), colorMode));
+      prevHighContrastMode.current = highContrastMode;
     }
-  }, [colorMode, system, modifications]);
+  }, [colorMode, system, modifications, highContrastMode, highContrastModifications]);
   var _useState9 = (0, _react2.useState)(),
     _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
     themeCSSVariables = _useState10[0],
@@ -161,6 +191,8 @@ var EuiThemeProvider = exports.EuiThemeProvider = function EuiThemeProvider(_ref
     }, ";label:EuiThemeProvider;")
   }), (0, _react.jsx)(_context.EuiColorModeContext.Provider, {
     value: colorMode
+  }, (0, _react.jsx)(_context.EuiHighContrastModeContext.Provider, {
+    value: highContrastMode
   }, (0, _react.jsx)(_context.EuiSystemContext.Provider, {
     value: system
   }, (0, _react.jsx)(_context.EuiModificationsContext.Provider, {
@@ -169,5 +201,5 @@ var EuiThemeProvider = exports.EuiThemeProvider = function EuiThemeProvider(_ref
     value: theme
   }, (0, _react.jsx)(_context.EuiNestedThemeContext.Provider, {
     value: nestedThemeContext
-  }, (0, _react.jsx)(_style_memoization.EuiThemeMemoizedStylesProvider, null, (0, _react.jsx)(_emotion2.EuiEmotionThemeProvider, null, (0, _react.jsx)(EuiConditionalBreakpointProvider, null, renderedChildren)))))))));
+  }, (0, _react.jsx)(_style_memoization.EuiThemeMemoizedStylesProvider, null, (0, _react.jsx)(_emotion2.EuiEmotionThemeProvider, null, (0, _react.jsx)(EuiConditionalBreakpointProvider, null, renderedChildren))))))))));
 };

package/test-env/themes/amsterdam/global_styling/mixins/button.js

@@ -7,11 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.useEuiButtonFocusCSS = exports.useEuiButtonColorCSS = exports.euiButtonSizeMap = exports.euiButtonFillColor = exports.euiButtonEmptyColor = exports.euiButtonColor = exports.BUTTON_DISPLAYS = exports.BUTTON_COLORS = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _global_styling = require("../../../../global_styling");
 var _services = require("../../../../services");
 var _templateObject;
-/*
+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
  * or more contributor license agreements. Licensed under the Elastic License
  * 2.0 and the Server Side Public License, v 1; you may not use this file except
@@ -29,17 +31,17 @@ var BUTTON_DISPLAYS = exports.BUTTON_DISPLAYS = ['base', 'fill', 'empty'];
 var euiButtonColor = exports.euiButtonColor = function euiButtonColor(euiThemeContext, color) {
   var euiTheme = euiThemeContext.euiTheme,
     colorMode = euiThemeContext.colorMode;
-  function tintOrShade(color) {
+  var tintOrShade = function tintOrShade(color) {
     return colorMode === 'DARK' ? (0, _services.shade)(color, 0.7) : (0, _services.tint)(color, 0.8);
-  }
+  };
   var foreground;
   var background;
   switch (color) {
     case 'disabled':
-      return {
+      return _objectSpread({
         color: euiTheme.colors.disabledText,
         backgroundColor: (0, _services.transparentize)(euiTheme.colors.lightShade, 0.15)
-      };
+      }, _highContrastBorder(euiThemeContext, euiTheme.colors.disabledText));
     case 'text':
       foreground = euiTheme.colors[color];
       background = colorMode === 'DARK' ? (0, _services.shade)(euiTheme.colors.lightShade, 0.2) : (0, _services.tint)(euiTheme.colors.lightShade, 0.5);
@@ -49,10 +51,10 @@ var euiButtonColor = exports.euiButtonColor = function euiButtonColor(euiThemeCo
       background = tintOrShade(euiTheme.colors[color]);
       break;
   }
-  return {
+  return _objectSpread({
     color: (0, _services.makeHighContrastColor)(foreground)(background),
     backgroundColor: background
-  };
+  }, _highContrastBorder(euiThemeContext, foreground));
 };
 
 /**
@@ -91,10 +93,11 @@ var euiButtonFillColor = exports.euiButtonFillColor = function euiButtonFillColo
       foreground = getForegroundColor(background);
       break;
   }
-  return {
+  return _objectSpread({
     color: foreground,
     backgroundColor: background
-  };
+  }, _highContrastBorder(euiThemeContext, color === 'disabled' ? foreground : background // The border is not visible on Mac, but is necessary for Windows high contrast themes which ignores background-color
+  ));
 };
 
 /**
@@ -209,4 +212,15 @@ var euiButtonSizeMap = exports.euiButtonSizeMap = function euiButtonSizeMap(_ref
       fontScale: 's'
     }
   };
+};
+
+/**
+ * Internal util for high contrast button borders
+ */
+var _highContrastBorder = function _highContrastBorder(_ref3, color) {
+  var highContrastMode = _ref3.highContrastMode,
+    euiTheme = _ref3.euiTheme;
+  return highContrastMode ? {
+    border: "".concat(euiTheme.border.width.thin, " solid ").concat(color)
+  } : {};
 };