@elastic/eui 97.3.0 → 97.3.1-rc.0

package/optimize/es/components/steps/step_number.js

@@ -14,9 +14,9 @@ import React from 'react';
 import { EuiScreenReaderOnly } from '../accessibility';
 import { EuiIcon } from '../icon';
 import { EuiLoadingSpinner } from '../loading';
-import { useEuiTheme } from '../../services';
+import { useEuiMemoizedStyles } from '../../services';
 import { useI18nCompleteStep, useI18nDisabledStep, useI18nErrorsStep, useI18nIncompleteStep, useI18nStep, useI18nWarningStep, useI18nLoadingStep, useI18nCurrentStep } from './step_strings';
-import { euiStepNumberStyles, euiStepNumberContentStyles } from './step_number.styles';
+import { euiStepNumberStyles, euiStepNumberIconStyles } from './step_number.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var STATUS = ['incomplete', 'disabled', 'loading', 'warning', 'danger', 'complete', 'current'];
 export var EuiStepNumber = function EuiStepNumber(_ref) {
@@ -53,12 +53,11 @@ export var EuiStepNumber = function EuiStepNumber(_ref) {
     })
   };
   var classes = classNames('euiStepNumber', className);
-  var euiTheme = useEuiTheme();
-  var styles = euiStepNumberStyles(euiTheme);
+  var styles = useEuiMemoizedStyles(euiStepNumberStyles);
   var cssStyles = [styles.euiStepNumber, styles[titleSize], status && styles[status]];
-  var contentStyles = euiStepNumberContentStyles(euiTheme);
   var content;
   var screenReaderText;
+  var iconStyles = useEuiMemoizedStyles(euiStepNumberIconStyles);
   switch (status) {
     // Loading spinner
     case 'loading':
@@ -81,10 +80,10 @@ export var 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',
@@ -114,11 +113,9 @@ export var EuiStepNumber = function EuiStepNumber(_ref) {
       if (titleSize === 'none') {
         break;
       }
-      var cssNumberStyles = [contentStyles.euiStepNumber__number, status && contentStyles[status]];
       content = ___EmotionJSX("span", {
         "aria-hidden": "true",
-        className: "euiStepNumber__number",
-        css: cssNumberStyles
+        className: "euiStepNumber__number"
       }, number);
       break;
   }

package/optimize/es/components/steps/step_number.styles.js

@@ -9,8 +9,8 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css } from '@emotion/react';
 import { mathWithUnits, logicalCSS, euiFontSizeFromScale, euiCanAnimate, euiAnimScale, logicalSizeCSS } from '../../global_styling';
-import { euiStepVariables } from './step.styles';
 import { euiButtonFillColor } from '../../themes/amsterdam/global_styling/mixins';
+import { euiStepVariables } from './step.styles';
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "76s2de-loading",
   styles: "background:transparent;label:loading;"
@@ -28,10 +28,12 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 export var euiStepNumberStyles = function euiStepNumberStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   var euiStep = 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(logicalCSS('width', size), ";\n      ").concat(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(logicalCSS('width', size), ";\n      ").concat(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,
@@ -47,27 +49,24 @@ export var euiStepNumberStyles = function euiStepNumberStyles(euiThemeContext) {
     warning: /*#__PURE__*/css(euiButtonFillColor(euiThemeContext, 'warning'), " ", euiCanAnimate, "{animation:", euiAnimScale, " ", euiTheme.animation.fast, " ", euiTheme.animation.bounce, ";};label:warning;"),
     danger: /*#__PURE__*/css(euiButtonFillColor(euiThemeContext, 'danger'), " ", euiCanAnimate, "{animation:", euiAnimScale, " ", euiTheme.animation.fast, " ", euiTheme.animation.bounce, ";};label:danger;"),
     complete: /*#__PURE__*/css(euiButtonFillColor(euiThemeContext, 'success'), " ", euiCanAnimate, "{animation:", euiAnimScale, " ", euiTheme.animation.fast, " ", euiTheme.animation.bounce, ";};label:complete;"),
-    current: /*#__PURE__*/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__*/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(mathWithUnits(euiTheme.border.width.thick, function (x) {
+      return x * 2;
+    }), ";\n          }") : '', ";;label:current;")
   };
 };
-export var euiStepNumberContentStyles = function euiStepNumberContentStyles(_ref3) {
+export var euiStepNumberIconStyles = function euiStepNumberIconStyles(_ref3) {
   var euiTheme = _ref3.euiTheme;
   return {
-    // Statuses with icon content
-    euiStepNumber__icon: /*#__PURE__*/css("vertical-align:middle;position:relative;inset-block-start:-", euiTheme.border.width.thin, ";;label:euiStepNumber__icon;"),
+    euiStepNumber__icon: /*#__PURE__*/css(";label:euiStepNumber__icon;"),
     complete: /*#__PURE__*/css("stroke:currentColor;stroke-width:", mathWithUnits(euiTheme.border.width.thin, function (x) {
       return x / 2;
     }), ";;label:complete;"),
     danger: /*#__PURE__*/css("stroke:currentColor;stroke-width:", mathWithUnits(euiTheme.border.width.thin, function (x) {
       return x / 2;
     }), ";;label:danger;"),
-    warning: /*#__PURE__*/css("inset-block-start:-", euiTheme.border.width.thick, ";;label:warning;"),
-    // Statuses with number content
-    euiStepNumber__number: /*#__PURE__*/css(";label:euiStepNumber__number;"),
-    incomplete: /*#__PURE__*/css("display:unset;position:relative;inset-block-start:-", euiTheme.border.width.thick, ";;label:incomplete;"),
-    loading: /*#__PURE__*/css(";label:loading;"),
-    disabled: /*#__PURE__*/css(";label:disabled;"),
-    current: /*#__PURE__*/css("display:inline-block;transform:translateY(-", euiTheme.border.width.thick, ");;label:current;"),
+    warning: /*#__PURE__*/css("margin-block-start:-", euiTheme.border.width.thick, ";;label:warning;"),
     none: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size.s), ";label:none;")
   };
 };

package/optimize/es/components/steps/sub_steps.styles.js

@@ -8,8 +8,9 @@
 
 import { css } from '@emotion/react';
 export var euiSubStepsStyles = function euiSubStepsStyles(_ref) {
-  var euiTheme = _ref.euiTheme;
+  var euiTheme = _ref.euiTheme,
+    highContrastMode = _ref.highContrastMode;
   return {
-    euiSubSteps: /*#__PURE__*/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__*/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/optimize/es/components/table/table_row.styles.js

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

package/optimize/es/components/tabs/tab.styles.js

@@ -18,15 +18,23 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 export var 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
+    logicalCSS('border-bottom', "".concat(borderWidth, " solid ").concat(color));
+  };
   return {
     euiTab: /*#__PURE__*/css("display:flex;cursor:pointer;flex-direction:row;align-items:center;gap:", euiTheme.size.s, ";", logicalCSS('padding-vertical', 0), " ", 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__*/css("box-shadow:inset 0 -", euiTheme.border.width.thick, " 0 ", euiTheme.colors.primary, ";color:", euiTheme.colors.primaryText, ";;label:selected;"),
+    selected: /*#__PURE__*/css("color:", euiTheme.colors.primaryText, ";", _selectedBorder(euiTheme.colors.primary), ";;label:selected;"),
     disabled: {
       disabled: /*#__PURE__*/css("cursor:not-allowed;color:", euiTheme.colors.disabledText, ";;label:disabled;"),
-      selected: /*#__PURE__*/css("box-shadow:inset 0 -", euiTheme.border.width.thick, " 0 ", euiTheme.colors.disabledText, ";;label:selected;")
+      selected: /*#__PURE__*/css(_selectedBorder(euiTheme.colors.disabledText), ";;label:selected;")
     }
   };
 };

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

@@ -9,10 +9,17 @@
 import { css } from '@emotion/react';
 import { logicalCSS, logicalCSSWithFallback } from '../../global_styling';
 export var euiTabsStyles = function euiTabsStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   return {
     euiTabs: /*#__PURE__*/css("display:flex;", logicalCSS('max-width', '100%'), " ", logicalCSSWithFallback('overflow-x', 'auto'), " ", logicalCSSWithFallback('overflow-y', 'hidden'), " position:relative;flex-shrink:0;;label:euiTabs;"),
-    bottomBorder: /*#__PURE__*/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
+    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
+    css(logicalCSS('border-bottom', euiTheme.border.thin), ";label:bottomBorder;"),
     // sizes
     s: /*#__PURE__*/css("gap:", euiTheme.size.m, ";;label:s;"),
     m: /*#__PURE__*/css("gap:", euiTheme.size.base, ";;label:m;"),

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

@@ -7,9 +7,10 @@
  */
 
 import { css } from '@emotion/react';
-import { logicalCSS, logicalShorthandCSS, logicalTextAlignCSS, euiFontSize, euiBackgroundColor, mathWithUnits } from '../../global_styling';
+import { logicalCSS, logicalShorthandCSS, logicalTextAlignCSS, euiFontSize, mathWithUnits } from '../../global_styling';
 import { euiLinkCSS } from '../link/link.styles';
 import { euiTitle } from '../title/title.styles';
+import { euiCodeTextColors } from '../code/code_syntax.styles';
 
 /**
  * TODO: Make this a global value so it can be set by theme?
@@ -63,9 +64,11 @@ var euiScaleText = function euiScaleText(euiThemeContext, options) {
  * Styles
  */
 export var euiTextStyles = function euiTextStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
+  var codeColors = euiCodeTextColors(euiThemeContext);
   return {
-    euiText: /*#__PURE__*/css(euiText(euiTheme, true), "clear:both;a:not([class]){", 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{", euiTitle(euiThemeContext, 'l'), ";}h2{", euiTitle(euiThemeContext, 'm'), ";}h3{", euiTitle(euiThemeContext, 's'), ";}h4,dt{", euiTitle(euiThemeContext, 'xs'), ";}h5{", euiTitle(euiThemeContext, 'xxs'), ";}h6{", euiTitle(euiThemeContext, 'xxxs'), " text-transform:uppercase;}h1,h2,h3,h4,h5,h6,dt{color:inherit;}pre:not(.euiCodeBlock__pre){white-space:pre-wrap;background:", euiBackgroundColor(euiThemeContext, 'subdued'), ";color:", euiTheme.colors.text, ";}pre:not(.euiCodeBlock__pre),pre:not(.euiCodeBlock__pre) code{display:block;}>:last-child{", logicalCSS('margin-bottom', '0 !important'), ";}kbd{position:relative;display:inline-block;", logicalCSS('padding-vertical', euiTheme.size.xxs), " ", logicalCSS('padding-horizontal', euiTheme.size.xs), " line-height:1;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.text, ";border-radius:", mathWithUnits(euiTheme.border.radius.small, function (x) {
+    euiText: /*#__PURE__*/css(euiText(euiTheme, true), "clear:both;a:not([class]){", 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{", euiTitle(euiThemeContext, 'l'), ";}h2{", euiTitle(euiThemeContext, 'm'), ";}h3{", euiTitle(euiThemeContext, 's'), ";}h4,dt{", euiTitle(euiThemeContext, 'xs'), ";}h5{", euiTitle(euiThemeContext, 'xxs'), ";}h6{", 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{", logicalCSS('margin-bottom', '0 !important'), ";}kbd{position:relative;display:inline-block;vertical-align:bottom;overflow:hidden;", logicalCSS('padding-vertical', euiTheme.size.xxs), " ", logicalCSS('padding-horizontal', euiTheme.size.xs), " line-height:1;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.text, ";border-radius:", mathWithUnits(euiTheme.border.radius.small, function (x) {
       return x / 2;
     }), ";};label:euiText;"),
     constrainedWidth: /*#__PURE__*/css(logicalCSS('max-width', euiTextConstrainedMaxWidth), ";;label:constrainedWidth;"),

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

@@ -26,24 +26,28 @@ export var 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/optimize/es/components/timeline/timeline.styles.js

@@ -14,13 +14,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(logicalCSS('top', 0), ";\n      ").concat(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(logicalCSS('top', '50%'), ";\n    }\n  \n    > [class*='euiTimelineItem-center']:last-child:not(:only-child) > [class*='euiTimelineItemIcon-']::before {\n      ").concat(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(logicalCSS('top', 0), ";\n      ").concat(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(logicalCSS('top', '50%'), ";\n    }\n  \n    > [class*='euiTimelineItem-center']:last-child:not(:only-child) > [class*='euiTimelineItemIcon-']::before {\n      ").concat(logicalCSS('height', '50%'), ";\n    }\n\n    ").concat(highContrastBorder, "\n  ");
 };
-export var euiTimelineStyles = function euiTimelineStyles(_ref) {
-  var euiTheme = _ref.euiTheme;
+export var euiTimelineStyles = function euiTimelineStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiTimeline: /*#__PURE__*/css("display:flex;flex-direction:column;", timelineVerticalLine(euiTheme), ";;label:euiTimeline;"),
+    euiTimeline: /*#__PURE__*/css("display:flex;flex-direction:column;", timelineVerticalLine(euiThemeContext), ";;label:euiTimeline;"),
     m: /*#__PURE__*/css(_gutterSizeAdjustment(euiTheme.size.base), ";label:m;"),
     l: /*#__PURE__*/css(_gutterSizeAdjustment(euiTheme.size.l), ";label:l;"),
     xl: /*#__PURE__*/css(_gutterSizeAdjustment(euiTheme.size.xl), ";label:xl;")

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

@@ -7,21 +7,27 @@
  */
 
 import { css } from '@emotion/react';
-import { euiTextBreakWord, logicalCSS } from '../../global_styling';
+import { euiTextBreakWord, logicalCSS, mathWithUnits } from '../../global_styling';
 import { euiShadowLarge } from '../../themes/amsterdam';
 import { euiTitle } from '../title/title.styles';
 export var euiToastStyles = function euiToastStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
+  var borderWidth = highContrastMode ? mathWithUnits(euiTheme.border.width.thick, function (x) {
+    return x * 2;
+  }) : euiTheme.border.width.thick;
   return {
     // Base
-    euiToast: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.medium, ";", euiShadowLarge(euiThemeContext), " position:relative;", logicalCSS('padding-horizontal', euiTheme.size.base), " ", logicalCSS('padding-vertical', euiTheme.size.base), " background-color:", euiTheme.colors.emptyShade, ";", logicalCSS('width', '100%'), " ", euiTextBreakWord(), "&:hover,&:focus{[class*='euiToast__closeButton']{opacity:1;}};label:euiToast;"),
+    euiToast: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.medium, ";", euiShadowLarge(euiThemeContext, {
+      borderAllInHighContrastMode: true
+    }), " position:relative;", logicalCSS('padding-horizontal', euiTheme.size.base), " ", logicalCSS('padding-vertical', euiTheme.size.base), " background-color:", euiTheme.colors.emptyShade, ";", logicalCSS('width', '100%'), " ", euiTextBreakWord(), "&:hover,&:focus{[class*='euiToast__closeButton']{opacity:1;}};label:euiToast;"),
     // Elements
     euiToast__closeButton: /*#__PURE__*/css("position:absolute;", logicalCSS('top', euiTheme.size.base), " ", logicalCSS('right', euiTheme.size.base), ";;label:euiToast__closeButton;"),
     // Variants
-    primary: /*#__PURE__*/css(logicalCSS('border-top', "2px solid ".concat(euiTheme.colors.primary)), ";;label:primary;"),
-    success: /*#__PURE__*/css(logicalCSS('border-top', "2px solid ".concat(euiTheme.colors.success)), ";;label:success;"),
-    warning: /*#__PURE__*/css(logicalCSS('border-top', "2px solid ".concat(euiTheme.colors.warning)), ";;label:warning;"),
-    danger: /*#__PURE__*/css(logicalCSS('border-top', "2px solid ".concat(euiTheme.colors.danger)), ";;label:danger;")
+    primary: /*#__PURE__*/css(logicalCSS('border-top', "".concat(borderWidth, " solid ").concat(euiTheme.colors.primary)), ";;label:primary;"),
+    success: /*#__PURE__*/css(logicalCSS('border-top', "".concat(borderWidth, " solid ").concat(euiTheme.colors.success)), ";;label:success;"),
+    warning: /*#__PURE__*/css(logicalCSS('border-top', "".concat(borderWidth, " solid ").concat(euiTheme.colors.warning)), ";;label:warning;"),
+    danger: /*#__PURE__*/css(logicalCSS('border-top', "".concat(borderWidth, " solid ").concat(euiTheme.colors.danger)), ";;label:danger;")
   };
 };
 export var euiToastHeaderStyles = function euiToastHeaderStyles(euiThemeContext) {

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

@@ -39,7 +39,9 @@ export var euiToolTipStyles = function euiToolTipStyles(euiThemeContext) {
   });
   return {
     // Base
-    euiToolTip: /*#__PURE__*/css(euiShadow(euiThemeContext), " border-radius:", euiTheme.border.radius.medium, ";background-color:", euiToolTipBackgroundColor(euiTheme, colorMode), ";color:", euiTheme.colors.ghost, ";z-index:", euiTheme.levels.toast, ";", logicalCSS('max-width', '256px'), " overflow-wrap:break-word;padding:", euiTheme.size.s, ";", euiFontSize(euiThemeContext, 's'), " position:absolute;[class*='euiHorizontalRule']{background-color:", euiToolTipBorderColor(euiTheme, colorMode), ";};label:euiToolTip;"),
+    euiToolTip: /*#__PURE__*/css(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, ";", logicalCSS('max-width', '256px'), " overflow-wrap:break-word;padding:", euiTheme.size.s, ";", euiFontSize(euiThemeContext, 's'), " position:absolute;[class*='euiHorizontalRule']{background-color:", euiToolTipBorderColor(euiTheme, colorMode), ";};label:euiToolTip;"),
     // Sizes
     s: /*#__PURE__*/css(euiFontSize(euiThemeContext, 'xs'), ";;label:s;"),
     // Positions
@@ -52,15 +54,22 @@ export var euiToolTipStyles = function euiToolTipStyles(euiThemeContext) {
       return x / 2;
     }), ";background-color:", euiToolTipBackgroundColor(euiTheme, colorMode), ";", logicalSizeCSS(arrowSize, arrowSize), ";;label:euiToolTip__arrow;"),
     arrowPositions: {
-      top: /*#__PURE__*/css("transform:translateY(", arrowPlusSize, ") rotateZ(45deg);;label:top;"),
-      bottom: /*#__PURE__*/css("transform:translateY(", arrowMinusSize, ") rotateZ(45deg);;label:bottom;"),
-      left: /*#__PURE__*/css("transform:translateX(", arrowPlusSize, ") rotateZ(45deg);;label:left;"),
-      right: /*#__PURE__*/css("transform:translateX(", arrowMinusSize, ") rotateZ(45deg);;label:right;")
+      top: /*#__PURE__*/css("transform:translateY(", arrowPlusSize, ") rotateZ(45deg);", _highContrastArrowBorder(euiThemeContext, ['bottom', 'right']), ";;label:top;"),
+      bottom: /*#__PURE__*/css("transform:translateY(", arrowMinusSize, ") rotateZ(45deg);", _highContrastArrowBorder(euiThemeContext, ['top', 'left']), ";;label:bottom;"),
+      left: /*#__PURE__*/css("transform:translateX(", arrowPlusSize, ") rotateZ(45deg);", _highContrastArrowBorder(euiThemeContext, ['top', 'right']), ";;label:left;"),
+      right: /*#__PURE__*/css("transform:translateX(", arrowMinusSize, ") rotateZ(45deg);", _highContrastArrowBorder(euiThemeContext, ['bottom', 'left']), ";;label:right;")
     },
     // Title
     euiToolTip__title: /*#__PURE__*/css("font-weight:", euiTheme.font.weight.bold, ";", logicalCSS('border-bottom', "solid ".concat(euiTheme.border.width.thin, " ").concat(euiToolTipBorderColor(euiTheme, colorMode))), " ", logicalCSS('padding-bottom', euiTheme.size.xs), " ", 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 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/optimize/es/global_styling/mixins/_color.js

@@ -90,16 +90,17 @@ export var useEuiBackgroundColorCSS = function useEuiBackgroundColorCSS() {
 
 export var 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 tintOrShade(euiTheme.colors.warning, 0.4, colorMode);
+      return tintOrShade(euiTheme.colors.warning, highContrastMode ? 0 : 0.4, colorMode);
     default:
-      return tintOrShade(euiTheme.colors[color], 0.6, colorMode);
+      return tintOrShade(euiTheme.colors[color], highContrastMode ? 0 : 0.6, colorMode);
   }
 };
 

package/optimize/es/services/theme/context.js

@@ -12,6 +12,7 @@ import { DEFAULT_COLOR_MODE, getComputed } from './utils';
 export var EuiSystemContext = /*#__PURE__*/createContext(EuiThemeAmsterdam);
 export var EuiModificationsContext = /*#__PURE__*/createContext({});
 export var EuiColorModeContext = /*#__PURE__*/createContext(DEFAULT_COLOR_MODE);
+export var EuiHighContrastModeContext = /*#__PURE__*/createContext(false);
 export var defaultComputedTheme = getComputed(EuiThemeAmsterdam, {}, DEFAULT_COLOR_MODE);
 export var EuiThemeContext = /*#__PURE__*/createContext(defaultComputedTheme);
 export var EuiNestedThemeContext = /*#__PURE__*/createContext({

package/optimize/es/services/theme/hooks.js

@@ -8,7 +8,7 @@ import _extends from "@babel/runtime/helpers/extends";
  */
 
 import React, { forwardRef, useContext, useMemo } from 'react';
-import { EuiThemeContext, EuiModificationsContext, EuiColorModeContext, defaultComputedTheme, EuiNestedThemeContext } from './context';
+import { EuiThemeContext, EuiModificationsContext, EuiColorModeContext, EuiHighContrastModeContext, defaultComputedTheme, EuiNestedThemeContext } from './context';
 import { emitEuiProviderWarning } from './warning';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var providerMessage = "`EuiProvider` is missing which can result in negative effects.\nWrap your component in `EuiProvider`: https://ela.st/euiprovider.";
@@ -20,6 +20,7 @@ var providerMessage = "`EuiProvider` is missing which can result in negative eff
 export var useEuiTheme = function useEuiTheme() {
   var theme = useContext(EuiThemeContext);
   var colorMode = useContext(EuiColorModeContext);
+  var highContrastMode = useContext(EuiHighContrastModeContext);
   var modifications = useContext(EuiModificationsContext);
   var isFallback = theme === defaultComputedTheme;
   if (isFallback) {
@@ -29,9 +30,10 @@ export var useEuiTheme = function useEuiTheme() {
     return {
       euiTheme: theme,
       colorMode: colorMode,
+      highContrastMode: highContrastMode,
       modifications: modifications
     };
-  }, [theme, colorMode, modifications]);
+  }, [theme, colorMode, highContrastMode, modifications]);
   return assembledTheme;
 };
 

package/optimize/es/services/theme/index.js

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-export { EuiSystemContext, EuiThemeContext, EuiNestedThemeContext, EuiModificationsContext, EuiColorModeContext } from './context';
+export { EuiSystemContext, EuiThemeContext, EuiNestedThemeContext, EuiModificationsContext, EuiColorModeContext, EuiHighContrastModeContext } from './context';
 export { useEuiTheme, withEuiTheme, RenderWithEuiTheme, useEuiThemeCSSVariables } from './hooks';
 export { EuiThemeProvider } from './provider';
 export { useEuiMemoizedStyles, withEuiStylesMemoizer, RenderWithEuiStylesMemoizer } from './style_memoization';

package/optimize/es/services/theme/provider.js

@@ -22,7 +22,7 @@ import isEqual from 'lodash/isEqual';
 import { cloneElementWithCss } from '../emotion';
 import { css, cx } from '../emotion/css';
 import { CurrentEuiBreakpointProvider } from '../breakpoint/current_breakpoint';
-import { EuiSystemContext, EuiThemeContext, EuiNestedThemeContext, EuiModificationsContext, EuiColorModeContext } from './context';
+import { EuiSystemContext, EuiThemeContext, EuiNestedThemeContext, EuiModificationsContext, EuiColorModeContext, EuiHighContrastModeContext } from './context';
 import { EuiEmotionThemeProvider } from './emotion';
 import { EuiThemeMemoizedStylesProvider } from './style_memoization';
 import { buildTheme, getColorMode, getComputed, mergeDeep } from './utils';
@@ -30,6 +30,7 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiThemeProvider = function EuiThemeProvider(_ref) {
   var _system = _ref.theme,
     _colorMode = _ref.colorMode,
+    _highContrastMode = _ref.highContrastMode,
     _modifications = _ref.modify,
     children = _ref.children,
     wrapperProps = _ref.wrapperProps;
@@ -41,6 +42,7 @@ export var EuiThemeProvider = function EuiThemeProvider(_ref) {
   var parentSystem = useContext(EuiSystemContext);
   var parentModifications = useContext(EuiModificationsContext);
   var parentColorMode = useContext(EuiColorModeContext);
+  var parentHighContrastMode = useContext(EuiHighContrastModeContext);
   var parentTheme = useContext(EuiThemeContext);
   var _useState = useState(_system || parentSystem),
     _useState2 = _slicedToArray(_useState, 2),
@@ -64,9 +66,35 @@ export var EuiThemeProvider = function EuiThemeProvider(_ref) {
     colorMode = _useState6[0],
     setColorMode = _useState6[1];
   var prevColorMode = useRef(colorMode);
-  var isParentTheme = useRef(prevSystemKey.current === parentSystem.key && colorMode === parentColorMode && isEqual(parentModifications, modifications));
+  var highContrastMode = _highContrastMode !== null && _highContrastMode !== void 0 ? _highContrastMode : parentHighContrastMode;
+  var prevHighContrastMode = 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 = 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 = useRef(prevSystemKey.current === parentSystem.key && colorMode === parentColorMode && highContrastMode === parentHighContrastMode && isEqual(parentModifications, modifications));
   var _useState7 = useState(isParentTheme.current && Object.keys(parentTheme).length ? _objectSpread({}, parentTheme) // Intentionally create a new object to break referential equality
-    : getComputed(system, buildTheme(modifications, "_".concat(system.key)), colorMode)),
+    : getComputed(system, buildTheme(highContrastModifications !== null && highContrastModifications !== void 0 ? highContrastModifications : modifications, "_".concat(system.key)), colorMode)),
     _useState8 = _slicedToArray(_useState7, 2),
     theme = _useState8[0],
     setTheme = _useState8[1];
@@ -95,10 +123,12 @@ export var EuiThemeProvider = function EuiThemeProvider(_ref) {
     }
   }, [_colorMode, parentColorMode]);
   useEffect(function () {
-    if (!isParentTheme.current) {
-      setTheme(getComputed(system, buildTheme(modifications, "_".concat(system.key)), colorMode));
+    var highContrastModeChanged = prevHighContrastMode.current !== highContrastMode;
+    if (!isParentTheme.current || highContrastModeChanged) {
+      setTheme(getComputed(system, 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 = useState(),
     _useState10 = _slicedToArray(_useState9, 2),
     themeCSSVariables = _useState10[0],
@@ -155,6 +185,8 @@ export var EuiThemeProvider = function EuiThemeProvider(_ref) {
     }, ";label:EuiThemeProvider;")
   }), ___EmotionJSX(EuiColorModeContext.Provider, {
     value: colorMode
+  }, ___EmotionJSX(EuiHighContrastModeContext.Provider, {
+    value: highContrastMode
   }, ___EmotionJSX(EuiSystemContext.Provider, {
     value: system
   }, ___EmotionJSX(EuiModificationsContext.Provider, {
@@ -163,5 +195,5 @@ export var EuiThemeProvider = function EuiThemeProvider(_ref) {
     value: theme
   }, ___EmotionJSX(EuiNestedThemeContext.Provider, {
     value: nestedThemeContext
-  }, ___EmotionJSX(EuiThemeMemoizedStylesProvider, null, ___EmotionJSX(EuiEmotionThemeProvider, null, ___EmotionJSX(EuiConditionalBreakpointProvider, null, renderedChildren)))))))));
+  }, ___EmotionJSX(EuiThemeMemoizedStylesProvider, null, ___EmotionJSX(EuiEmotionThemeProvider, null, ___EmotionJSX(EuiConditionalBreakpointProvider, null, renderedChildren))))))))));
 };

package/optimize/es/themes/amsterdam/global_styling/mixins/button.js

@@ -1,6 +1,9 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) { _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; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -23,17 +26,17 @@ export var BUTTON_DISPLAYS = ['base', 'fill', 'empty'];
 export var euiButtonColor = function euiButtonColor(euiThemeContext, color) {
   var euiTheme = euiThemeContext.euiTheme,
     colorMode = euiThemeContext.colorMode;
-  function tintOrShade(color) {
+  var tintOrShade = function tintOrShade(color) {
     return colorMode === 'DARK' ? shade(color, 0.7) : tint(color, 0.8);
-  }
+  };
   var foreground;
   var background;
   switch (color) {
     case 'disabled':
-      return {
+      return _objectSpread({
         color: euiTheme.colors.disabledText,
         backgroundColor: transparentize(euiTheme.colors.lightShade, 0.15)
-      };
+      }, _highContrastBorder(euiThemeContext, euiTheme.colors.disabledText));
     case 'text':
       foreground = euiTheme.colors[color];
       background = colorMode === 'DARK' ? shade(euiTheme.colors.lightShade, 0.2) : tint(euiTheme.colors.lightShade, 0.5);
@@ -43,10 +46,10 @@ export var euiButtonColor = function euiButtonColor(euiThemeContext, color) {
       background = tintOrShade(euiTheme.colors[color]);
       break;
   }
-  return {
+  return _objectSpread({
     color: makeHighContrastColor(foreground)(background),
     backgroundColor: background
-  };
+  }, _highContrastBorder(euiThemeContext, foreground));
 };
 
 /**
@@ -85,10 +88,11 @@ export var euiButtonFillColor = function euiButtonFillColor(euiThemeContext, col
       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
+  ));
 };
 
 /**
@@ -203,4 +207,15 @@ export var euiButtonSizeMap = function euiButtonSizeMap(_ref2) {
       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)
+  } : {};
 };