@elastic/eui 100.0.0 → 101.0.1

package/es/components/steps/step_number.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); }
 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
@@ -9,17 +15,10 @@ 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 { highContrastModeStyles, preventForcedColors } from '../../global_styling/functions/high_contrast';
 import { euiStepVariables } from './step.styles';
 import { euiButtonFillColor } from '../../global_styling/mixins';
 var _ref = process.env.NODE_ENV === "production" ? {
-  name: "76s2de-loading",
-  styles: "background:transparent;label:loading;"
-} : {
-  name: "76s2de-loading",
-  styles: "background:transparent;label:loading;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var _ref2 = process.env.NODE_ENV === "production" ? {
   name: "1ru1jeq-euiStepNumber",
   styles: "flex-shrink:0;label:euiStepNumber;"
 } : {
@@ -31,43 +30,65 @@ export var euiStepNumberStyles = function euiStepNumberStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   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    ");
+    return "\n      display: 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      color: ").concat(euiTheme.colors.emptyShade, ";\n      background-color: ").concat(euiTheme.colors.primary, ";\n      border-radius: 50%;\n      ").concat(highContrastModeStyles(euiThemeContext, {
+      preferred: "border: ".concat(euiTheme.border.thick, ";")
+    }), "\n    ");
+  };
+
+  // euiButtonColor utils add colored borders in high contrast mode, but
+  // we want to set our own standardized border instead
+  var unsetButtonBorder = function unsetButtonBorder(buttonStyles) {
+    return _objectSpread(_objectSpread({}, buttonStyles), {}, {
+      border: undefined
+    });
   };
   return {
-    euiStepNumber: _ref2,
+    euiStepNumber: _ref,
     // sizes
     m: /*#__PURE__*/css(createStepsNumber(euiStep.numberSize, euiFontSizeFromScale('s', euiTheme)), ";;label:m;"),
     s: /*#__PURE__*/css(createStepsNumber(euiStep.numberSize, euiFontSizeFromScale('s', euiTheme)), ";;label:s;"),
     xs: /*#__PURE__*/css(createStepsNumber(euiStep.numberXSSize, euiFontSizeFromScale('xs', euiTheme)), ";;label:xs;"),
     none: /*#__PURE__*/css(createStepsNumber(euiStep.numberXXSSize, euiFontSizeFromScale('xs', euiTheme)), ";;label:none;"),
     // status
-    incomplete: /*#__PURE__*/css("background-color:transparent;color:", euiTheme.colors.text, ";border:", euiTheme.border.thick, ";;label:incomplete;"),
-    disabled: /*#__PURE__*/css(euiButtonFillColor(euiThemeContext, 'disabled'), ";;label:disabled;"),
-    loading: _ref,
-    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;")
+    incomplete: /*#__PURE__*/css("background-color:transparent;color:", euiTheme.colors.textParagraph, ";border:", euiTheme.border.thick, ";;label:incomplete;"),
+    disabled: /*#__PURE__*/css(euiButtonFillColor(euiThemeContext, 'disabled'), " ", highContrastModeStyles(euiThemeContext, {
+      forced: 'opacity: 0.5;'
+    }), ";;label:disabled;"),
+    loading: /*#__PURE__*/css("background:transparent;", highContrastModeStyles(euiThemeContext, {
+      preferred: 'border: none;'
+    }), ";;label:loading;"),
+    warning: /*#__PURE__*/css(unsetButtonBorder(euiButtonFillColor(euiThemeContext, 'warning')), " ", euiCanAnimate, "{animation:", euiAnimScale, " ", euiTheme.animation.fast, " ", euiTheme.animation.bounce, ";};label:warning;"),
+    danger: /*#__PURE__*/css(unsetButtonBorder(euiButtonFillColor(euiThemeContext, 'danger')), " ", euiCanAnimate, "{animation:", euiAnimScale, " ", euiTheme.animation.fast, " ", euiTheme.animation.bounce, ";};label:danger;"),
+    complete: /*#__PURE__*/css(unsetButtonBorder(euiButtonFillColor(euiThemeContext, 'success')), " ", euiCanAnimate, "{animation:", euiAnimScale, " ", euiTheme.animation.fast, " ", euiTheme.animation.bounce, ";};label:complete;"),
+    current: /*#__PURE__*/css("transform:scale(1.1);box-shadow:inset 0 0 0 ", euiTheme.border.width.thick, " ", euiTheme.colors.emptyShade, ";", highContrastModeStyles(euiThemeContext, {
+      none: "\n          border: ".concat(euiTheme.border.width.thick, " solid ").concat(euiTheme.colors.primary, ";\n        "),
+      // !important overrides horizontal steps' euiOutline usage. The extra offset
+      // is here to helps reduce subpixel gaps between the outline and the border
+      preferred: "\n          border-width: ".concat(euiTheme.border.width.thick, ";\n          outline-offset: -").concat(euiTheme.border.width.thin, " !important;\n        "),
+      // For Windows forced color themes, just invert the background/foreground colors
+      forced: "\n          color: ".concat(euiTheme.colors.emptyShade, ";\n          background-color: ").concat(euiTheme.colors.fullShade, ";\n          ").concat(preventForcedColors(euiThemeContext), "\n        ")
+    }), ";;label:current;")
   };
 };
-export var euiStepNumberContentStyles = function euiStepNumberContentStyles(_ref3) {
-  var euiTheme = _ref3.euiTheme;
+export var euiStepNumberContentStyles = function euiStepNumberContentStyles(_ref2) {
+  var euiTheme = _ref2.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: {
+      // Slight extra offset for visual balance. Intentionally uses static px and not tokens
+      m: "margin-block-start: -2px;",
+      s: "margin-block-start: -2px;",
+      xs: "margin-block-start: -1px;",
+      none: "margin-block-start: -0.5px;"
+    },
+    // Title sizes
     none: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size.s), ";label:none;")
   };
 };

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

@@ -7,9 +7,12 @@
  */
 
 import { css } from '@emotion/react';
-export var euiSubStepsStyles = function euiSubStepsStyles(_ref) {
-  var euiTheme = _ref.euiTheme;
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
+export var euiSubStepsStyles = function euiSubStepsStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
   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, ";margin-block-end:", euiTheme.size.base, ";", highContrastModeStyles(euiThemeContext, {
+      preferred: "border: ".concat(euiTheme.border.thin, ";")
+    }), ">*:last-child{margin-block-end:0;}& ol,.euiText & ol{list-style-type:lower-alpha;};label:euiSubSteps;")
   };
 };

package/es/components/table/table_row.styles.js

@@ -10,7 +10,7 @@ function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.fre
 
 import { css, keyframes } from '@emotion/react';
 import { euiShadow } from '@elastic/eui-theme-common';
-import { euiCanAnimate, logicalCSS } from '../../global_styling';
+import { euiCanAnimate, logicalCSS, mathWithUnits } from '../../global_styling';
 import { euiTableVariables } from './table.styles';
 export var euiTableRowStyles = function euiTableRowStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
@@ -32,7 +32,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:", euiTheme.colors.backgroundBasePlain, ";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:", euiTheme.colors.backgroundBasePlain, ";border-radius:", euiTheme.border.radius.medium, ";&:has(+ .euiTableRow-isExpandedRow){", logicalCSS('border-bottom-left-radius', 0), " ", logicalCSS('border-bottom-right-radius', 0), ";};label:mobile;"),
       selected: /*#__PURE__*/css("&,&+.euiTableRow-isExpandedRow{background-color:", rowColors.selected.color, ";};label:selected;"),
       /**
        * Left column offset (no border)
@@ -43,11 +45,16 @@ export var euiTableRowStyles = function euiTableRowStyles(euiThemeContext) {
        * Right column styles + border
        * Used for cell actions and row expander arrow
        */
-      hasRightColumn: /*#__PURE__*/css(logicalCSS('padding-right', mobileSizes.actions.width), " &::after{content:'';position:absolute;", logicalCSS('vertical', 0), " ", logicalCSS('right', mobileSizes.actions.width), " ", logicalCSS('width', euiTheme.border.width.thin), " background-color:", euiTheme.border.color, ";};label:hasRightColumn;"),
+      hasRightColumn: /*#__PURE__*/css(logicalCSS('padding-right', mobileSizes.actions.width), " &::after{content:'';position:absolute;", logicalCSS('vertical', 0), " ", logicalCSS('right', mobileSizes.actions.width), " ", logicalCSS('border-right', euiTheme.border.thin), ";};label:hasRightColumn;"),
       /**
        * Bottom of card - expanded rows
        */
-      expanded: /*#__PURE__*/css(logicalCSS('margin-top', "-".concat(mobileSizes.actions.offset)), logicalCSS('padding-left', cellContentPadding), " ", logicalCSS('border-top', euiTheme.border.thin), " ", logicalCSS('border-top-left-radius', 0), " ", logicalCSS('border-top-right-radius', 0), ">.euiTableRowCell{", logicalCSS('width', '100%'), ";}", expandedAnimationCss, ";;label:expanded;")
+      expanded: /*#__PURE__*/css(logicalCSS(
+      // On mobile, visually move the expanded row to join up with the
+      // preceding table row via negative margins
+      'margin-top', mathWithUnits([cellContentPadding, euiTheme.border.width.thin], function (x, y) {
+        return (x + y) * -1;
+      })), logicalCSS('padding-left', cellContentPadding), " ", logicalCSS('border-top', euiTheme.border.thin), " ", logicalCSS('border-top-left-radius', 0), " ", logicalCSS('border-top-right-radius', 0), ">.euiTableRowCell{", logicalCSS('width', '100%'), ";}", expandedAnimationCss, ";;label:expanded;")
     }
   };
 };

package/es/components/table/table_row_cell.styles.js

@@ -51,7 +51,7 @@ export var euiTableRowCellStyles = function euiTableRowCellStyles(euiThemeContex
   // Without this, the row height jumps whenever actions are disabled.
   var hasIcons = "line-height: 1;";
   return {
-    euiTableRowCell: /*#__PURE__*/css("color:", euiTheme.colors.text, ";;label:euiTableRowCell;"),
+    euiTableRowCell: /*#__PURE__*/css("color:", euiTheme.colors.textParagraph, ";;label:euiTableRowCell;"),
     rowHeader: /*#__PURE__*/css("font-weight:", euiTheme.font.weight.regular, ";", logicalTextAlignCSS('left'), ";;label:rowHeader;"),
     isExpander: /*#__PURE__*/css(hasIcons, ";;label:isExpander;"),
     hasActions: /*#__PURE__*/css(hasIcons, ";;label:hasActions;"),
@@ -80,7 +80,7 @@ export var euiTableRowCellStyles = function euiTableRowCellStyles(euiThemeContex
        * If they're the last cell, we can create a pseudo "row"/"border-top"
        * that mimicks the visual separation that the right column has
        */
-      customActions: /*#__PURE__*/css("&:last-child{", logicalCSS('width', '100%'), " &::before{content:'';position:absolute;", logicalCSS('horizontal', 0), " ", logicalCSS('height', euiTheme.border.width.thin), " background-color:", euiTheme.border.color, ";}.euiTableCellContent{position:relative;", logicalCSS('top', euiTheme.size.xs), ";}};label:customActions;")
+      customActions: /*#__PURE__*/css("&:last-child{", logicalCSS('width', '100%'), " &::before{content:'';position:absolute;", logicalCSS('horizontal', 0), " ", logicalCSS('border-top', euiTheme.border.thin), ";}.euiTableCellContent{position:relative;", logicalCSS('top', euiTheme.size.xs), ";}};label:customActions;")
     },
     euiTableRowCell__mobileHeader: /*#__PURE__*/css(euiTextTruncate(), " font-size:", euiFontSize(euiThemeContext, 's', {
       customScale: 'xxs'

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

@@ -17,16 +17,20 @@ var _ref = process.env.NODE_ENV === "production" ? {
   styles: "flex-basis:0%;flex-grow:1;justify-content:center;label:expanded;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-export var euiTabStyles = function euiTabStyles(_ref2) {
-  var euiTheme = _ref2.euiTheme;
+export var euiTabStyles = function euiTabStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
+  var selectedUnderlineSize = highContrastMode ? mathWithUnits(euiTheme.border.thick, function (x) {
+    return x * 2;
+  }) : euiTheme.border.width.thick;
   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.textHeading, ";&:focus{outline-offset:-", euiTheme.focus.width, ";};label:euiTab;"),
+    euiTab: /*#__PURE__*/css("position:relative;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.textHeading, ";&:focus{outline-offset:-", euiTheme.focus.width, ";}&::after{position:absolute;", logicalCSS('bottom', 0), " ", logicalCSS('horizontal', 0), " ", logicalCSS('border-bottom-style', 'solid'), " ", logicalCSS('border-bottom-width', selectedUnderlineSize), " pointer-events:none;};label:euiTab;"),
     // variations
     expanded: _ref,
-    selected: /*#__PURE__*/css("box-shadow:inset 0 -", euiTheme.border.width.thick, " 0 ", euiTheme.colors.primary, ";color:", euiTheme.colors.textPrimary, ";;label:selected;"),
+    selected: /*#__PURE__*/css("color:", euiTheme.colors.textPrimary, ";&::after{content:'';border-color:", 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;")
+      disabled: /*#__PURE__*/css("cursor:not-allowed;color:", euiTheme.colors.textDisabled, ";;label:disabled;"),
+      selected: /*#__PURE__*/css("&::after{content:'';border-color:", euiTheme.colors.textDisabled, ";};label:selected;")
     }
   };
 };

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

@@ -8,11 +8,15 @@
 
 import { css } from '@emotion/react';
 import { logicalCSS, logicalCSSWithFallback } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 export var euiTabsStyles = function euiTabsStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   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: /*#__PURE__*/css(highContrastModeStyles(euiThemeContext, {
+      none: "box-shadow: inset 0 -".concat(euiTheme.border.width.thin, " 0 ").concat(euiTheme.border.color, ";"),
+      forced: 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/es/components/text/text.styles.js

@@ -8,8 +8,10 @@
 
 import { css } from '@emotion/react';
 import { logicalCSS, logicalShorthandCSS, logicalTextAlignCSS, euiFontSize, mathWithUnits } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 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?
@@ -22,7 +24,7 @@ export var euiTextConstrainedMaxWidth = 'max(64ch, 75%)';
 export var euiText = function euiText(euiTheme) {
   var inheritColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   return {
-    color: inheritColor ? 'inherit' : euiTheme.colors.text,
+    color: inheritColor ? 'inherit' : euiTheme.colors.textParagraph,
     fontWeight: euiTheme.font.weight.regular
   };
 };
@@ -54,9 +56,13 @@ var euiScaleText = function euiScaleText(euiThemeContext, options) {
   var blockQuoteBorderWidth = mathWithUnits(fontSize, function (x) {
     return x / 4;
   });
-  return "\n    font-size: ".concat(fontSize, ";\n    line-height: ").concat(lineHeight, ";\n\n    h1 {\n      font-size: ").concat(headings.h1.fontSize, ";\n      line-height: ").concat(headings.h1.lineHeight, ";\n    }\n    h1:not(:last-child) {\n      ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n    }\n\n    h2 {\n      font-size: ").concat(headings.h2.fontSize, ";\n      line-height: ").concat(headings.h2.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h3 {\n      font-size: ").concat(headings.h3.fontSize, ";\n      line-height: ").concat(headings.h3.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h4 {\n      font-size: ").concat(headings.h4.fontSize, ";\n      line-height: ").concat(headings.h4.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h5 {\n      font-size: ").concat(headings.h5.fontSize, ";\n      line-height: ").concat(headings.h5.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h6 {\n      font-size: ").concat(headings.h6.fontSize, ";\n      line-height: ").concat(headings.h6.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    p,\n    dl,\n    blockquote,\n    pre,\n    > ul,\n    > ol {\n      ").concat(logicalCSS('margin-bottom', lineHeightSize), "\n    }\n\n    ul,\n    ol {\n      ").concat(logicalCSS('margin-left', lineHeightSize), "\n    }\n\n    /* The styles of the nested ordered lists follow the style of GitHub\n       which is commonly used in Markdown or MDX formatting. */\n    ol ol,\n    ul ol {\n      list-style-type: lower-roman;\n    }\n\n    ul ul ol,\n    ul ol ol,\n    ol ul ol,\n    ol ol ol {\n      list-style-type: lower-alpha;\n    }\n  \n    blockquote {\n      font-size: ").concat(fontSize, ";\n      ").concat(logicalShorthandCSS('padding', "0 ".concat(fontSize)), "\n      ").concat(logicalCSS('border-left-width', blockQuoteBorderWidth), "\n      ").concat(logicalCSS('margin-bottom', fontSize), "\n    }\n\n    dd + dt {\n      ").concat(logicalCSS('margin-top', fontSize), "\n    }\n\n    dt,\n    .eui-definitionListReverse dd {\n      font-size: ").concat(fontSize, ";\n      line-height: ").concat(lineHeight, ";\n    }\n\n    .eui-definitionListReverse dt {\n      font-size: ").concat(euiFontSize(euiThemeContext, 'xs', options).fontSize, ";\n      color: ").concat(euiTheme.colors.text, ";\n    }\n\n    small {\n      font-size: ").concat(euiFontSize(euiThemeContext, 's', options).fontSize, ";\n    }\n\n    pre:not(.euiCodeBlock__pre) {\n      padding: ").concat(lineHeightSize, ";\n    }\n\n    code:not(.euiCode):not(.euiCodeBlock__code)  {\n      font-size: .9em; /* 90% of parent font size */\n    }\n    ").concat(
+  return "\n    font-size: ".concat(fontSize, ";\n    line-height: ").concat(lineHeight, ";\n\n    h1 {\n      font-size: ").concat(headings.h1.fontSize, ";\n      line-height: ").concat(headings.h1.lineHeight, ";\n    }\n    h1:not(:last-child) {\n      ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n    }\n\n    h2 {\n      font-size: ").concat(headings.h2.fontSize, ";\n      line-height: ").concat(headings.h2.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h3 {\n      font-size: ").concat(headings.h3.fontSize, ";\n      line-height: ").concat(headings.h3.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h4 {\n      font-size: ").concat(headings.h4.fontSize, ";\n      line-height: ").concat(headings.h4.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h5 {\n      font-size: ").concat(headings.h5.fontSize, ";\n      line-height: ").concat(headings.h5.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h6 {\n      font-size: ").concat(headings.h6.fontSize, ";\n      line-height: ").concat(headings.h6.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    p,\n    dl,\n    blockquote,\n    pre,\n    > ul,\n    > ol {\n      ").concat(logicalCSS('margin-bottom', lineHeightSize), "\n    }\n\n    ul,\n    ol {\n      ").concat(logicalCSS('margin-left', lineHeightSize), "\n    }\n\n    /* The styles of the nested ordered lists follow the style of GitHub\n       which is commonly used in Markdown or MDX formatting. */\n    ol ol,\n    ul ol {\n      list-style-type: lower-roman;\n    }\n\n    ul ul ol,\n    ul ol ol,\n    ol ul ol,\n    ol ol ol {\n      list-style-type: lower-alpha;\n    }\n  \n    blockquote {\n      font-size: ").concat(fontSize, ";\n      ").concat(logicalShorthandCSS('padding', "0 ".concat(fontSize)), "\n      ").concat(logicalCSS('border-left-width', blockQuoteBorderWidth), "\n      ").concat(logicalCSS('margin-bottom', fontSize), "\n    }\n\n    dd + dt {\n      ").concat(logicalCSS('margin-top', fontSize), "\n    }\n\n    dt,\n    .eui-definitionListReverse dd {\n      font-size: ").concat(fontSize, ";\n      line-height: ").concat(lineHeight, ";\n    }\n\n    .eui-definitionListReverse dt {\n      font-size: ").concat(euiFontSize(euiThemeContext, 'xs', options).fontSize, ";\n      color: ").concat(euiTheme.colors.textParagraph, ";\n    }\n\n    small {\n      font-size: ").concat(euiFontSize(euiThemeContext, 's', options).fontSize, ";\n    }\n\n    pre:not(.euiCodeBlock__pre) {\n      padding: ").concat(lineHeightSize, ";\n    }\n\n    code:not(.euiCode):not(.euiCodeBlock__code)  {\n      font-size: .9em; /* 90% of parent font size */\n    }\n    ").concat(highContrastModeStyles(euiThemeContext, {
+    // For EuiCodeBlocks, set the margin on the wrapper instead of on the <pre>
+    // so that high contrast mode borders render as expected
+    preferred: "\n        .euiCodeBlock {\n          ".concat(logicalCSS('margin-bottom', lineHeightSize), "\n\n          pre {\n            ").concat(logicalCSS('margin-bottom', 0), "\n          }\n        }\n      ")
+  }), "\n    ").concat(
   // when textSize is 'm', the 'kbd' element gets a line between the text and the border-bottom
-  _customScale === 'm' ? "\n    kbd {\n      ".concat(logicalCSS('padding-bottom', euiTheme.size.xs), "\n      /* Ensures the shape still looks like a square when only one character */\n      ").concat(logicalCSS('min-width', euiTheme.size.l), "\n      ").concat(logicalTextAlignCSS('center'), "\n    }\n    \n    kbd::after {\n      content: '';\n      ").concat(logicalCSS('border-bottom', "".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.text)), "\n      position: absolute;\n      ").concat(logicalCSS('bottom', euiTheme.size.xxs), "\n      ").concat(logicalCSS('left', 0), "\n      ").concat(logicalCSS('width', '100%'), "\n    }") : '', "\n  ");
+  _customScale === 'm' ? "\n    kbd {\n      ".concat(logicalCSS('padding-bottom', euiTheme.size.xs), "\n      /* Ensures the shape still looks like a square when only one character */\n      ").concat(logicalCSS('min-width', euiTheme.size.l), "\n      ").concat(logicalTextAlignCSS('center'), "\n    }\n    \n    kbd::after {\n      content: '';\n      ").concat(logicalCSS('border-bottom', "".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.textParagraph)), "\n      position: absolute;\n      ").concat(logicalCSS('bottom', euiTheme.size.xxs), "\n      ").concat(logicalCSS('left', 0), "\n      ").concat(logicalCSS('width', '100%'), "\n    }") : '', "\n  ");
 };
 
 /**
@@ -64,9 +70,15 @@ var euiScaleText = function euiScaleText(euiThemeContext, options) {
  */
 export var euiTextStyles = function euiTextStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  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:", euiTheme.colors.backgroundBaseSubdued, ";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.textSubdued, ";}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, ";", highContrastModeStyles(euiThemeContext, {
+      preferred: "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;", logicalCSS('padding-vertical', euiTheme.size.xxs), " ", logicalCSS('padding-horizontal', euiTheme.size.xs), " line-height:1;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.textParagraph, ";border-radius:", mathWithUnits(euiTheme.border.radius.small, function (x) {
       return x / 2;
+    }), ";", highContrastModeStyles(euiThemeContext, {
+      // Fixes an odd border issue in Windows high contrast themes
+      forced: "\n            overflow: hidden;\n            vertical-align: middle;\n          "
     }), ";};label:euiText;"),
     constrainedWidth: /*#__PURE__*/css(logicalCSS('max-width', euiTextConstrainedMaxWidth), ";;label:constrainedWidth;"),
     // Sizes

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

@@ -20,7 +20,7 @@ export var euiTextColorStyles = function euiTextColorStyles(_ref2) {
   var euiTheme = _ref2.euiTheme;
   return {
     euiTextColor: /*#__PURE__*/css(";label:euiTextColor;"),
-    default: /*#__PURE__*/css("color:", euiTheme.colors.text, ";;label:default;"),
+    default: /*#__PURE__*/css("color:", euiTheme.colors.textParagraph, ";;label:default;"),
     subdued: /*#__PURE__*/css("color:", euiTheme.colors.textSubdued, ";;label:subdued;"),
     success: /*#__PURE__*/css("color:", euiTheme.colors.textSuccess, ";;label:success;"),
     accent: /*#__PURE__*/css("color:", euiTheme.colors.textAccent, ";;label:accent;"),

package/es/components/text_truncate/text_truncate.js

@@ -21,10 +21,10 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { useState, useMemo, useCallback, useEffect } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { useCombinedRefs } from '../../services';
+import { useCombinedRefs, useEuiMemoizedStyles } from '../../services';
 import { EuiResizeObserver } from '../observer/resize_observer';
 import { TruncationUtils } from './utils';
-import { euiTextTruncateStyles as styles } from './text_truncate.styles';
+import { euiTextTruncateStyles } from './text_truncate.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var TRUNCATION_TYPES = ['end', 'start', 'startEnd', 'middle'];
 export var EuiTextTruncate = function EuiTextTruncate(_ref) {
@@ -203,6 +203,7 @@ var EuiTextTruncateWithWidth = function EuiTextTruncateWithWidth(_ref2) {
     return truncatedText;
   }, [ready, width, text, truncation, truncationOffset, truncationPosition, ellipsis, containerEl]);
   var isTruncating = truncatedText !== text;
+  var styles = useEuiMemoizedStyles(euiTextTruncateStyles);
   return ___EmotionJSX("div", _extends({
     className: classNames('euiTextTruncate', className),
     css: styles.euiTextTruncate,

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

@@ -8,42 +8,40 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-export var euiTextTruncateStyles = {
-  euiTextTruncate: process.env.NODE_ENV === "production" ? {
-    name: "7o5qnz-euiTextTruncate",
-    styles: "position:relative;overflow:hidden;white-space:nowrap;label:euiTextTruncate;"
-  } : {
-    name: "7o5qnz-euiTextTruncate",
-    styles: "position:relative;overflow:hidden;white-space:nowrap;label:euiTextTruncate;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-  },
-  /**
-   * The below CSS is a hack to get double clicking and selecting the *full* text
-   * instead of the truncated text (useful for copying/pasting, and mimics how
-   * `text-overflow: ellipsis` works).
-   *
-   * Real talk: I'm lowkey amazed it works and it wouldn't surprise me if we ran into
-   * 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 🙏
-   */
-  // 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: "1sjxkb1-euiTextTruncate__truncatedText",
-    styles: "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: "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;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-  }
+import { preventForcedColors } from '../../global_styling/functions/high_contrast';
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1sjxkb1-euiTextTruncate__truncatedText",
+  styles: "user-select:none;pointer-events:none;label:euiTextTruncate__truncatedText;"
+} : {
+  name: "1sjxkb1-euiTextTruncate__truncatedText",
+  styles: "user-select:none;pointer-events:none;label:euiTextTruncate__truncatedText;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "7o5qnz-euiTextTruncate",
+  styles: "position:relative;overflow:hidden;white-space:nowrap;label:euiTextTruncate;"
+} : {
+  name: "7o5qnz-euiTextTruncate",
+  styles: "position:relative;overflow:hidden;white-space:nowrap;label:euiTextTruncate;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var euiTextTruncateStyles = function euiTextTruncateStyles(euiThemeContext) {
+  return {
+    euiTextTruncate: _ref2,
+    /**
+     * The below CSS is a hack to get double clicking and selecting the *full* text
+     * instead of the truncated text (useful for copying/pasting, and mimics how
+     * `text-overflow: ellipsis` works).
+     *
+     * Real talk: I'm lowkey amazed it works and it wouldn't surprise me if we ran into
+     * 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 🙏
+     */
+    // Makes the truncated text unselectable/un-clickable
+    euiTextTruncate__truncatedText: _ref,
+    // 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: /*#__PURE__*/css("position:absolute;inset:0;overflow:hidden;color:rgba(0, 0, 0, 0);@supports (-webkit-hyphens: none){text-overflow:ellipsis;}", preventForcedColors(euiThemeContext), ";;label:euiTextTruncate__fullText;")
+  };
 };

package/es/components/timeline/timeline.styles.js

@@ -14,13 +14,14 @@ 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  ");
-};
-export var euiTimelineStyles = function euiTimelineStyles(_ref) {
+var timelineVerticalLine = function timelineVerticalLine(_ref) {
   var euiTheme = _ref.euiTheme;
+  return "  \n    [class*='euiTimelineItem-'] > [class*='euiTimelineItemIcon-']::before {\n      content: '';\n      position: absolute;\n      ".concat(logicalCSS('top', 0), ";\n      ").concat(logicalCSS('border-left', euiTheme.border.thick), ";\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  ");
+};
+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/es/components/timeline/timeline_item_icon.styles.js

@@ -9,6 +9,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css } from '@emotion/react';
 import { logicalCSS } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "8391db-center",
   styles: "align-items:center;label:center;"
@@ -25,19 +26,13 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   styles: "align-items:flex-start;label:top;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var _ref3 = process.env.NODE_ENV === "production" ? {
-  name: "kuz8oa-euiTimelineItemIcon__content",
-  styles: "display:flex;justify-content:center;align-items:center;position:relative;label:euiTimelineItemIcon__content;"
-} : {
-  name: "kuz8oa-euiTimelineItemIcon__content",
-  styles: "display:flex;justify-content:center;align-items:center;position:relative;label:euiTimelineItemIcon__content;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-export var euiTimelineItemIconStyles = function euiTimelineItemIconStyles(_ref4) {
-  var euiTheme = _ref4.euiTheme;
+export var euiTimelineItemIconStyles = function euiTimelineItemIconStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
   return {
     euiTimelineItemIcon: /*#__PURE__*/css("display:flex;position:relative;flex-grow:0;justify-content:center;", logicalCSS('margin-right', euiTheme.size.base), ";;label:euiTimelineItemIcon;"),
-    euiTimelineItemIcon__content: _ref3,
+    euiTimelineItemIcon__content: /*#__PURE__*/css("display:flex;justify-content:center;align-items:center;position:relative;", highContrastModeStyles(euiThemeContext, {
+      preferred: "\n          & > * {\n            border: ".concat(euiTheme.border.thin, ";\n          }\n        ")
+    }), ";;label:euiTimelineItemIcon__content;"),
     //  Vertical alignments
     top: _ref2,
     center: _ref

package/es/components/title/title.styles.js

@@ -34,7 +34,7 @@ export var euiTitle = function euiTitle(euiThemeContext) {
   };
   return _objectSpread(_objectSpread({}, euiFontSize(euiThemeContext, titleScaleToFontSizeScaleMap[scale], options)), {}, {
     fontWeight: euiTheme.font.weight[euiTheme.font.title.weight],
-    color: euiTheme.colors.title
+    color: euiTheme.colors.textHeading
   });
 };
 

package/es/components/toast/toast.js

@@ -31,7 +31,7 @@ export var EuiToast = function EuiToast(_ref) {
     className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
   var baseStyles = useEuiMemoizedStyles(euiToastStyles);
-  var baseCss = [baseStyles.euiToast, color && baseStyles[color]];
+  var baseCss = [baseStyles.euiToast, color && baseStyles.colors[color]];
   var headerStyles = useEuiMemoizedStyles(euiToastHeaderStyles);
   var headerCss = [headerStyles.euiToastHeader, children && headerStyles.withBody];
   var classes = classNames('euiToast', className);

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

@@ -7,21 +7,55 @@
  */
 
 import { css } from '@emotion/react';
-import { euiShadowLarge } from '@elastic/eui-theme-common';
+import { euiShadowLarge, mathWithUnits } from '@elastic/eui-theme-common';
 import { euiTextBreakWord, logicalCSS } from '../../global_styling';
+import { highContrastModeStyles, preventForcedColors } from '../../global_styling/functions/high_contrast';
 import { euiTitle } from '../title/title.styles';
+import { euiPanelBorderStyles } from '../panel/panel.styles';
 export var euiToastStyles = function euiToastStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
+  var highlightStyles = function highlightStyles(color, width) {
+    return "\n    &:after {\n      content: '';\n      position: absolute;\n      /* ensure highlight border is on top of panel border */\n      z-index: 1;\n      inset: 0;\n      border-radius: inherit;\n      ".concat(logicalCSS('border-top', "".concat(width, " solid ").concat(color)), "\n      pointer-events: none;\n    }\n  ");
+  };
   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%'), " border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.borderBaseFloating, ";", 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(), euiPanelBorderStyles(euiThemeContext, {
+      hasFloatingBorder: false
+    }), " &: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;")
+    colors: {
+      _getStyles: function _getStyles(color) {
+        // Increase color/border thickness for all high contrast modes
+        var borderWidth = highContrastMode ? mathWithUnits(euiTheme.border.width.thick, function (x) {
+          return x * 2;
+        }) : euiTheme.border.width.thick;
+        return highContrastModeStyles(euiThemeContext, {
+          none: highlightStyles(color, borderWidth),
+          preferred: "\n            ".concat(highlightStyles(color, borderWidth), "\n            \n            &::after {\n              ").concat(logicalCSS('width', "calc(100% + ".concat(mathWithUnits(euiTheme.border.width.thin, function (x) {
+            return x * 2;
+          }), ")")), "\n              ").concat(logicalCSS('margin-top', "-".concat(euiTheme.border.width.thin)), "\n              ").concat(logicalCSS('margin-left', "-".concat(euiTheme.border.width.thin)), "\n            }\n          "),
+          // Windows high contrast mode ignores/overrides border colors, which have semantic meaning here. To get around this, we'll use a pseudo element that ignores forced colors
+          forced: "\n            overflow: hidden;\n\n            &::after {\n              content: '';\n              position: absolute;\n              ".concat(logicalCSS('top', 0), "\n              ").concat(logicalCSS('horizontal', 0), "\n              ").concat(logicalCSS('height', borderWidth), "\n              background-color: ").concat(color, ";\n              ").concat(preventForcedColors(euiThemeContext), "\n              pointer-events: none;\n            }\n          ")
+        });
+      },
+      get primary() {
+        return /*#__PURE__*/css(this._getStyles(euiTheme.colors.primary), ";label:primary;");
+      },
+      get success() {
+        return /*#__PURE__*/css(this._getStyles(euiTheme.colors.success), ";label:success;");
+      },
+      get warning() {
+        return /*#__PURE__*/css(this._getStyles(euiTheme.colors.warning), ";label:warning;");
+      },
+      get danger() {
+        return /*#__PURE__*/css(this._getStyles(euiTheme.colors.danger), ";label:danger;");
+      }
+    }
   };
 };
 export var euiToastHeaderStyles = function euiToastHeaderStyles(euiThemeContext) {
@@ -30,7 +64,7 @@ export var euiToastHeaderStyles = function euiToastHeaderStyles(euiThemeContext)
     // Base
     euiToastHeader: /*#__PURE__*/css("display:flex;align-items:baseline;", logicalCSS('padding-right', euiTheme.size.l), ">*+*{", logicalCSS('margin-left', euiTheme.size.s), ";};label:euiToastHeader;"),
     // Elements
-    euiToastHeader__icon: /*#__PURE__*/css("flex:0 0 auto;fill:", euiTheme.colors.title, ";transform:translateY(2px);;label:euiToastHeader__icon;"),
+    euiToastHeader__icon: /*#__PURE__*/css("flex:0 0 auto;fill:", euiTheme.colors.textHeading, ";transform:translateY(2px);;label:euiToastHeader__icon;"),
     euiToastHeader__title: /*#__PURE__*/css(euiTitle(euiThemeContext, 'xs'), " font-weight:", euiTheme.font.weight.bold, ";;label:euiToastHeader__title;"),
     // Variants
     withBody: /*#__PURE__*/css(logicalCSS('margin-bottom', euiTheme.size.s), ";;label:withBody;")