@elastic/eui 100.0.0 → 101.0.0

package/lib/components/steps/step.styles.js

@@ -29,20 +29,18 @@ var euiStepStyles = exports.euiStepStyles = function euiStepStyles(euiThemeConte
 
   // the vertical line is centered on the number, so we need to offset the line
   // by half of the number size & half of the line size to center it
-  var lineStartPosition = (0, _global_styling.mathWithUnits)([euiStep.numberSize, euiTheme.border.width.thick], function (x, y) {
-    return x / 2 - y / 2;
-  });
-  var lineEndPosition = (0, _global_styling.mathWithUnits)([euiStep.numberSize, euiTheme.border.width.thick], function (x, y) {
-    return x / 2 + y / 2;
-  });
-  var lineGradient = "linear-gradient(to right,\n    transparent 0,\n    transparent ".concat(lineStartPosition, ",\n    ").concat(euiTheme.border.color, " ").concat(lineStartPosition, ",\n    ").concat(euiTheme.border.color, " ").concat(lineEndPosition, ",\n    transparent ").concat(lineEndPosition, ",\n    transparent 100%)");
+  var getLeftPosition = function getLeftPosition(numberSize) {
+    return (0, _global_styling.mathWithUnits)([numberSize, euiTheme.border.width.thick], function (x, y) {
+      return x / 2 - y / 2;
+    });
+  };
   return {
-    euiStep: /*#__PURE__*/(0, _react.css)("&:not(:last-of-type){background-image:", lineGradient, ";background-repeat:no-repeat;};label:euiStep;"),
+    euiStep: /*#__PURE__*/(0, _react.css)("position:relative;&:not(:last-of-type)::before{content:'';position:absolute;", (0, _global_styling.logicalCSS)('bottom', 0), " ", (0, _global_styling.logicalCSS)('border-left', euiTheme.border.thick), ";};label:euiStep;"),
     // Sizes
-    m: /*#__PURE__*/(0, _react.css)("&:not(:last-of-type){background-position:left ", euiStep.numberSize, ";};label:m;"),
-    s: /*#__PURE__*/(0, _react.css)("&:not(:last-of-type){background-position:left ", euiStep.numberSize, ";};label:s;"),
-    xs: /*#__PURE__*/(0, _react.css)("&:not(:last-of-type){background-position:-", euiTheme.size.xs, " ", euiStep.numberXSSize, ";};label:xs;"),
-    xxs: /*#__PURE__*/(0, _react.css)("&:not(:last-of-type){background-position:-", euiTheme.size.s, " ", euiStep.numberXXSSize, ";};label:xxs;")
+    m: /*#__PURE__*/(0, _react.css)("&:not(:last-of-type)::before{", (0, _global_styling.logicalCSS)('top', euiStep.numberSize), " ", (0, _global_styling.logicalCSS)('left', getLeftPosition(euiStep.numberSize)), ";};label:m;"),
+    s: /*#__PURE__*/(0, _react.css)("&:not(:last-of-type)::before{", (0, _global_styling.logicalCSS)('top', euiStep.numberSize), " ", (0, _global_styling.logicalCSS)('left', getLeftPosition(euiStep.numberSize)), ";};label:s;"),
+    xs: /*#__PURE__*/(0, _react.css)("&:not(:last-of-type)::before{", (0, _global_styling.logicalCSS)('top', euiStep.numberXSSize), " ", (0, _global_styling.logicalCSS)('left', getLeftPosition(euiStep.numberXSSize)), ";};label:xs;"),
+    xxs: /*#__PURE__*/(0, _react.css)("&:not(:last-of-type)::before{", (0, _global_styling.logicalCSS)('top', euiStep.numberXXSSize), " ", (0, _global_styling.logicalCSS)('left', getLeftPosition(euiStep.numberXXSSize)), ";};label:xxs;")
   };
 };
 var euiStepContentStyles = exports.euiStepContentStyles = function euiStepContentStyles(euiThemeContext) {

package/lib/components/steps/step_horizontal.js

@@ -44,12 +44,11 @@ var EuiStepHorizontal = exports.EuiStepHorizontal = function EuiStepHorizontal(_
     rest = _objectWithoutProperties(_ref, _excluded);
   if (disabled) status = 'disabled';
   var classes = (0, _classnames.default)('euiStepHorizontal', className);
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _step_horizontal.euiStepHorizontalStyles)(euiTheme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_step_horizontal.euiStepHorizontalStyles);
   var cssStyles = [styles.euiStepHorizontal, styles[size], status === 'disabled' ? styles.disabled : styles.enabled];
-  var numberStyles = (0, _step_horizontal.euiStepHorizontalNumberStyles)(euiTheme);
+  var numberStyles = (0, _services.useEuiMemoizedStyles)(_step_horizontal.euiStepHorizontalNumberStyles);
   var cssNumberStyles = [numberStyles.euiStepHorizontal__number];
-  var titleStyles = (0, _step_horizontal.euiStepHorizontalTitleStyles)(euiTheme);
+  var titleStyles = (0, _services.useEuiMemoizedStyles)(_step_horizontal.euiStepHorizontalTitleStyles);
   var cssTitleStyles = [titleStyles.euiStepHorizontal__title, status === 'disabled' && titleStyles.disabled];
   var titleAttrsMap = {
     step: (0, _step_strings.useI18nStep)({

package/lib/components/steps/step_horizontal.styles.js

@@ -25,7 +25,8 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 var euiStepHorizontalStyles = exports.euiStepHorizontalStyles = function euiStepHorizontalStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   var euiStep = (0, _step.euiStepVariables)(euiTheme);
 
   /**
@@ -40,21 +41,23 @@ var euiStepHorizontalStyles = exports.euiStepHorizontalStyles = function euiStep
     }), ";}");
   };
   return {
-    euiStepHorizontal: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalShorthandCSS)('padding', "".concat(euiTheme.size.l, " ").concat(euiTheme.size.base, " ").concat(euiTheme.size.base)), " display:flex;flex-direction:column;align-items:center;justify-content:flex-start;cursor:pointer;position:relative;inline-size:100%;&::before,&::after{content:'';position:absolute;background-color:", euiTheme.border.color, ";block-size:", euiTheme.border.width.thick, ";z-index:", euiTheme.levels.content, ";}&::before{inset-inline-start:0;}&::after{inset-inline-end:0;};label:euiStepHorizontal;"),
+    euiStepHorizontal: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalShorthandCSS)('padding', "".concat(euiTheme.size.l, " ").concat(euiTheme.size.base, " ").concat(euiTheme.size.base)), " display:flex;flex-direction:column;align-items:center;justify-content:flex-start;cursor:pointer;position:relative;inline-size:100%;&::before,&::after{content:'';position:absolute;", (0, _global_styling.logicalCSS)('border-top', euiTheme.border.thick), " z-index:", euiTheme.levels.content, ";}&::before{inset-inline-start:0;}&::after{inset-inline-end:0;};label:euiStepHorizontal;"),
     // Adjust the size of the step number and connecting lines based on size
     m: _generateStepSizeAndInset(euiStep.numberSize),
     s: _generateStepSizeAndInset(euiStep.numberXSSize),
     xs: _generateStepSizeAndInset(euiStep.numberXXSSize),
     // Note: these selectors must be nested because focus/hover state
     // is on the parent container, but affects specific children
-    enabled: /*#__PURE__*/(0, _react.css)("&:focus,&:hover{.euiStepHorizontal__title{text-decoration:underline;}}&:focus{outline:none;.euiStepHorizontal__number{", (0, _global_styling.euiFocusRing)(euiThemeContext), ";}.euiStepHorizontal__number:not(:focus-visible){outline:", euiTheme.focus.width, " solid ", euiTheme.colors.darkestShade, ";}};label:enabled;"),
+    enabled: /*#__PURE__*/(0, _react.css)("&:focus,&:hover{.euiStepHorizontal__title{text-decoration:underline;}}&:focus{outline:none;.euiStepHorizontal__number{", (0, _global_styling.euiOutline)(euiThemeContext, highContrastMode ? 0 : 'center',
+    // Account for border in high contrast mode
+    euiTheme.colors.fullShade), ";}};label:enabled;"),
     disabled: _ref
   };
 };
 var euiStepHorizontalNumberStyles = exports.euiStepHorizontalNumberStyles = function euiStepHorizontalNumberStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiStepHorizontal__number: /*#__PURE__*/(0, _react.css)("position:relative;z-index:", Number(euiTheme.levels.content) + 1, ";", _global_styling.euiCanAnimate, "{transition:all ", euiTheme.animation.fast, " ease-in-out;};label:euiStepHorizontal__number;")
+    euiStepHorizontal__number: /*#__PURE__*/(0, _react.css)("position:relative;z-index:", Number(euiTheme.levels.content) + 1, ";.euiStepNumber__number{margin-block-start:-0.5px;}", _global_styling.euiCanAnimate, "{transition:all ", euiTheme.animation.fast, " ease-in-out;};label:euiStepHorizontal__number;")
   };
 };
 var euiStepHorizontalTitleStyles = exports.euiStepHorizontalTitleStyles = function euiStepHorizontalTitleStyles(euiThemeContext) {

package/lib/components/steps/step_number.js

@@ -61,10 +61,9 @@ var EuiStepNumber = exports.EuiStepNumber = function EuiStepNumber(_ref) {
     })
   };
   var classes = (0, _classnames.default)('euiStepNumber', className);
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _step_number.euiStepNumberStyles)(euiTheme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_step_number.euiStepNumberStyles);
   var cssStyles = [styles.euiStepNumber, styles[titleSize], status && styles[status]];
-  var contentStyles = (0, _step_number.euiStepNumberContentStyles)(euiTheme);
+  var iconStyles = (0, _services.useEuiMemoizedStyles)(_step_number.euiStepNumberContentStyles);
   var content;
   var screenReaderText;
   switch (status) {
@@ -89,10 +88,10 @@ var EuiStepNumber = exports.EuiStepNumber = function EuiStepNumber(_ref) {
     case 'warning':
     case 'complete':
       {
-        var cssIconStyles = [contentStyles.euiStepNumber__icon, contentStyles[status],
+        var cssIconStyles = [iconStyles.euiStepNumber__icon, status === 'warning' ? iconStyles.warning[titleSize] : 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',
@@ -122,11 +121,9 @@ var EuiStepNumber = exports.EuiStepNumber = function EuiStepNumber(_ref) {
       if (titleSize === 'none') {
         break;
       }
-      var cssNumberStyles = [contentStyles.euiStepNumber__number, status && contentStyles[status]];
       content = (0, _react2.jsx)("span", {
         "aria-hidden": "true",
-        className: "euiStepNumber__number",
-        css: cssNumberStyles
+        className: "euiStepNumber__number"
       }, number);
       break;
   }

package/lib/components/steps/step_number.styles.js

@@ -1,13 +1,20 @@
 "use strict";
 
+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); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.euiStepNumberStyles = exports.euiStepNumberContentStyles = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
+var _high_contrast = require("../../global_styling/functions/high_contrast");
 var _step = require("./step.styles");
 var _mixins = require("../../global_styling/mixins");
+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
  * or more contributor license agreements. Licensed under the Elastic License
@@ -16,14 +23,6 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * Side Public License, v 1.
  */
 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;"
 } : {
@@ -35,43 +34,65 @@ var euiStepNumberStyles = exports.euiStepNumberStyles = function euiStepNumberSt
   var euiTheme = euiThemeContext.euiTheme;
   var euiStep = (0, _step.euiStepVariables)(euiTheme);
   var createStepsNumber = function createStepsNumber(size, fontSize) {
-    return "\n      display: inline-block;\n      line-height: ".concat(size, ";\n      border-radius: ").concat(size, ";\n      ").concat((0, _global_styling.logicalCSS)('width', size), ";\n      ").concat((0, _global_styling.logicalCSS)('height', size), ";\n      text-align: center;\n      color: ").concat(euiTheme.colors.emptyShade, ";\n      background-color: ").concat(euiTheme.colors.primary, ";\n      font-size: ").concat(fontSize, ";\n      font-weight: ").concat(euiTheme.font.weight.medium, ";\n    ");
+    return "\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      ".concat((0, _global_styling.logicalCSS)('width', size), ";\n      ").concat((0, _global_styling.logicalCSS)('height', size), ";\n      font-size: ").concat(fontSize, ";\n      font-weight: ").concat(euiTheme.font.weight.medium, ";\n      color: ").concat(euiTheme.colors.emptyShade, ";\n      background-color: ").concat(euiTheme.colors.primary, ";\n      border-radius: 50%;\n      ").concat((0, _high_contrast.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__*/(0, _react.css)(createStepsNumber(euiStep.numberSize, (0, _global_styling.euiFontSizeFromScale)('s', euiTheme)), ";;label:m;"),
     s: /*#__PURE__*/(0, _react.css)(createStepsNumber(euiStep.numberSize, (0, _global_styling.euiFontSizeFromScale)('s', euiTheme)), ";;label:s;"),
     xs: /*#__PURE__*/(0, _react.css)(createStepsNumber(euiStep.numberXSSize, (0, _global_styling.euiFontSizeFromScale)('xs', euiTheme)), ";;label:xs;"),
     none: /*#__PURE__*/(0, _react.css)(createStepsNumber(euiStep.numberXXSSize, (0, _global_styling.euiFontSizeFromScale)('xs', euiTheme)), ";;label:none;"),
     // status
-    incomplete: /*#__PURE__*/(0, _react.css)("background-color:transparent;color:", euiTheme.colors.text, ";border:", euiTheme.border.thick, ";;label:incomplete;"),
-    disabled: /*#__PURE__*/(0, _react.css)((0, _mixins.euiButtonFillColor)(euiThemeContext, 'disabled'), ";;label:disabled;"),
-    loading: _ref,
-    warning: /*#__PURE__*/(0, _react.css)((0, _mixins.euiButtonFillColor)(euiThemeContext, 'warning'), " ", _global_styling.euiCanAnimate, "{animation:", _global_styling.euiAnimScale, " ", euiTheme.animation.fast, " ", euiTheme.animation.bounce, ";};label:warning;"),
-    danger: /*#__PURE__*/(0, _react.css)((0, _mixins.euiButtonFillColor)(euiThemeContext, 'danger'), " ", _global_styling.euiCanAnimate, "{animation:", _global_styling.euiAnimScale, " ", euiTheme.animation.fast, " ", euiTheme.animation.bounce, ";};label:danger;"),
-    complete: /*#__PURE__*/(0, _react.css)((0, _mixins.euiButtonFillColor)(euiThemeContext, 'success'), " ", _global_styling.euiCanAnimate, "{animation:", _global_styling.euiAnimScale, " ", euiTheme.animation.fast, " ", euiTheme.animation.bounce, ";};label:complete;"),
-    current: /*#__PURE__*/(0, _react.css)("border:", euiTheme.border.width.thick, " solid ", euiTheme.colors.body, ";box-shadow:0 0 0 ", euiTheme.border.width.thick, " ", euiTheme.colors.primary, ";;label:current;")
+    incomplete: /*#__PURE__*/(0, _react.css)("background-color:transparent;color:", euiTheme.colors.textParagraph, ";border:", euiTheme.border.thick, ";;label:incomplete;"),
+    disabled: /*#__PURE__*/(0, _react.css)((0, _mixins.euiButtonFillColor)(euiThemeContext, 'disabled'), " ", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+      forced: 'opacity: 0.5;'
+    }), ";;label:disabled;"),
+    loading: /*#__PURE__*/(0, _react.css)("background:transparent;", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+      preferred: 'border: none;'
+    }), ";;label:loading;"),
+    warning: /*#__PURE__*/(0, _react.css)(unsetButtonBorder((0, _mixins.euiButtonFillColor)(euiThemeContext, 'warning')), " ", _global_styling.euiCanAnimate, "{animation:", _global_styling.euiAnimScale, " ", euiTheme.animation.fast, " ", euiTheme.animation.bounce, ";};label:warning;"),
+    danger: /*#__PURE__*/(0, _react.css)(unsetButtonBorder((0, _mixins.euiButtonFillColor)(euiThemeContext, 'danger')), " ", _global_styling.euiCanAnimate, "{animation:", _global_styling.euiAnimScale, " ", euiTheme.animation.fast, " ", euiTheme.animation.bounce, ";};label:danger;"),
+    complete: /*#__PURE__*/(0, _react.css)(unsetButtonBorder((0, _mixins.euiButtonFillColor)(euiThemeContext, 'success')), " ", _global_styling.euiCanAnimate, "{animation:", _global_styling.euiAnimScale, " ", euiTheme.animation.fast, " ", euiTheme.animation.bounce, ";};label:complete;"),
+    current: /*#__PURE__*/(0, _react.css)("transform:scale(1.1);box-shadow:inset 0 0 0 ", euiTheme.border.width.thick, " ", euiTheme.colors.emptyShade, ";", (0, _high_contrast.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((0, _high_contrast.preventForcedColors)(euiThemeContext), "\n        ")
+    }), ";;label:current;")
   };
 };
-var euiStepNumberContentStyles = exports.euiStepNumberContentStyles = function euiStepNumberContentStyles(_ref3) {
-  var euiTheme = _ref3.euiTheme;
+var euiStepNumberContentStyles = exports.euiStepNumberContentStyles = function euiStepNumberContentStyles(_ref2) {
+  var euiTheme = _ref2.euiTheme;
   return {
     // Statuses with icon content
-    euiStepNumber__icon: /*#__PURE__*/(0, _react.css)("vertical-align:middle;position:relative;inset-block-start:-", euiTheme.border.width.thin, ";;label:euiStepNumber__icon;"),
+    euiStepNumber__icon: /*#__PURE__*/(0, _react.css)(";label:euiStepNumber__icon;"),
     complete: /*#__PURE__*/(0, _react.css)("stroke:currentColor;stroke-width:", (0, _global_styling.mathWithUnits)(euiTheme.border.width.thin, function (x) {
       return x / 2;
     }), ";;label:complete;"),
     danger: /*#__PURE__*/(0, _react.css)("stroke:currentColor;stroke-width:", (0, _global_styling.mathWithUnits)(euiTheme.border.width.thin, function (x) {
       return x / 2;
     }), ";;label:danger;"),
-    warning: /*#__PURE__*/(0, _react.css)("inset-block-start:-", euiTheme.border.width.thick, ";;label:warning;"),
-    // Statuses with number content
-    euiStepNumber__number: /*#__PURE__*/(0, _react.css)(";label:euiStepNumber__number;"),
-    incomplete: /*#__PURE__*/(0, _react.css)("display:unset;position:relative;inset-block-start:-", euiTheme.border.width.thick, ";;label:incomplete;"),
-    loading: /*#__PURE__*/(0, _react.css)(";label:loading;"),
-    disabled: /*#__PURE__*/(0, _react.css)(";label:disabled;"),
-    current: /*#__PURE__*/(0, _react.css)("display:inline-block;transform:translateY(-", euiTheme.border.width.thick, ");;label:current;"),
+    warning: {
+      // 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__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size.s), ";label:none;")
   };
 };

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiSubStepsStyles = void 0;
 var _react = require("@emotion/react");
+var _high_contrast = require("../../global_styling/functions/high_contrast");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -13,9 +14,11 @@ var _react = require("@emotion/react");
  * Side Public License, v 1.
  */
 
-var euiSubStepsStyles = exports.euiSubStepsStyles = function euiSubStepsStyles(_ref) {
-  var euiTheme = _ref.euiTheme;
+var euiSubStepsStyles = exports.euiSubStepsStyles = function euiSubStepsStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiSubSteps: /*#__PURE__*/(0, _react.css)("padding:", euiTheme.size.base, ";background-color:", euiTheme.colors.lightestShade, ";margin-block-end:", euiTheme.size.base, ";>*:last-child{margin-block-end:0;}& ol,.euiText & ol{list-style-type:lower-alpha;};label:euiSubSteps;")
+    euiSubSteps: /*#__PURE__*/(0, _react.css)("padding:", euiTheme.size.base, ";background-color:", euiTheme.colors.lightestShade, ";margin-block-end:", euiTheme.size.base, ";", (0, _high_contrast.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/lib/components/table/table_row.styles.js

@@ -37,7 +37,9 @@ var euiTableRowStyles = exports.euiTableRowStyles = function euiTableRowStyles(e
       checkboxOffset: /*#__PURE__*/(0, _react.css)("&>.euiTableRowCell:first-child{", (0, _global_styling.logicalCSS)('padding-left', checkboxSize), ";};label:checkboxOffset;")
     },
     mobile: {
-      mobile: /*#__PURE__*/(0, _react.css)("position:relative;display:flex;flex-wrap:wrap;padding:", cellContentPadding, ";", (0, _global_styling.logicalCSS)('margin-bottom', cellContentPadding), (0, _euiThemeCommon.euiShadow)(euiThemeContext, 's'), " background-color:", euiTheme.colors.backgroundBasePlain, ";border-radius:", euiTheme.border.radius.medium, ";;label:mobile;"),
+      mobile: /*#__PURE__*/(0, _react.css)("position:relative;display:flex;flex-wrap:wrap;padding:", cellContentPadding, ";", (0, _global_styling.logicalCSS)('margin-bottom', cellContentPadding), (0, _euiThemeCommon.euiShadow)(euiThemeContext, 's', {
+        borderAllInHighContrastMode: true
+      }), " background-color:", euiTheme.colors.backgroundBasePlain, ";border-radius:", euiTheme.border.radius.medium, ";&:has(+ .euiTableRow-isExpandedRow){", (0, _global_styling.logicalCSS)('border-bottom-left-radius', 0), " ", (0, _global_styling.logicalCSS)('border-bottom-right-radius', 0), ";};label:mobile;"),
       selected: /*#__PURE__*/(0, _react.css)("&,&+.euiTableRow-isExpandedRow{background-color:", rowColors.selected.color, ";};label:selected;"),
       /**
        * Left column offset (no border)
@@ -48,11 +50,16 @@ var euiTableRowStyles = exports.euiTableRowStyles = function euiTableRowStyles(e
        * Right column styles + border
        * Used for cell actions and row expander arrow
        */
-      hasRightColumn: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-right', mobileSizes.actions.width), " &::after{content:'';position:absolute;", (0, _global_styling.logicalCSS)('vertical', 0), " ", (0, _global_styling.logicalCSS)('right', mobileSizes.actions.width), " ", (0, _global_styling.logicalCSS)('width', euiTheme.border.width.thin), " background-color:", euiTheme.border.color, ";};label:hasRightColumn;"),
+      hasRightColumn: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-right', mobileSizes.actions.width), " &::after{content:'';position:absolute;", (0, _global_styling.logicalCSS)('vertical', 0), " ", (0, _global_styling.logicalCSS)('right', mobileSizes.actions.width), " ", (0, _global_styling.logicalCSS)('border-right', euiTheme.border.thin), ";};label:hasRightColumn;"),
       /**
        * Bottom of card - expanded rows
        */
-      expanded: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-top', "-".concat(mobileSizes.actions.offset)), (0, _global_styling.logicalCSS)('padding-left', cellContentPadding), " ", (0, _global_styling.logicalCSS)('border-top', euiTheme.border.thin), " ", (0, _global_styling.logicalCSS)('border-top-left-radius', 0), " ", (0, _global_styling.logicalCSS)('border-top-right-radius', 0), ">.euiTableRowCell{", (0, _global_styling.logicalCSS)('width', '100%'), ";}", expandedAnimationCss, ";;label:expanded;")
+      expanded: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)(
+      // On mobile, visually move the expanded row to join up with the
+      // preceding table row via negative margins
+      'margin-top', (0, _global_styling.mathWithUnits)([cellContentPadding, euiTheme.border.width.thin], function (x, y) {
+        return (x + y) * -1;
+      })), (0, _global_styling.logicalCSS)('padding-left', cellContentPadding), " ", (0, _global_styling.logicalCSS)('border-top', euiTheme.border.thin), " ", (0, _global_styling.logicalCSS)('border-top-left-radius', 0), " ", (0, _global_styling.logicalCSS)('border-top-right-radius', 0), ">.euiTableRowCell{", (0, _global_styling.logicalCSS)('width', '100%'), ";}", expandedAnimationCss, ";;label:expanded;")
     }
   };
 };

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

@@ -55,7 +55,7 @@ var euiTableRowCellStyles = exports.euiTableRowCellStyles = function euiTableRow
   // Without this, the row height jumps whenever actions are disabled.
   var hasIcons = "line-height: 1;";
   return {
-    euiTableRowCell: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.text, ";;label:euiTableRowCell;"),
+    euiTableRowCell: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textParagraph, ";;label:euiTableRowCell;"),
     rowHeader: /*#__PURE__*/(0, _react.css)("font-weight:", euiTheme.font.weight.regular, ";", (0, _global_styling.logicalTextAlignCSS)('left'), ";;label:rowHeader;"),
     isExpander: /*#__PURE__*/(0, _react.css)(hasIcons, ";;label:isExpander;"),
     hasActions: /*#__PURE__*/(0, _react.css)(hasIcons, ";;label:hasActions;"),
@@ -84,7 +84,7 @@ var euiTableRowCellStyles = exports.euiTableRowCellStyles = function euiTableRow
        * 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__*/(0, _react.css)("&:last-child{", (0, _global_styling.logicalCSS)('width', '100%'), " &::before{content:'';position:absolute;", (0, _global_styling.logicalCSS)('horizontal', 0), " ", (0, _global_styling.logicalCSS)('height', euiTheme.border.width.thin), " background-color:", euiTheme.border.color, ";}.euiTableCellContent{position:relative;", (0, _global_styling.logicalCSS)('top', euiTheme.size.xs), ";}};label:customActions;")
+      customActions: /*#__PURE__*/(0, _react.css)("&:last-child{", (0, _global_styling.logicalCSS)('width', '100%'), " &::before{content:'';position:absolute;", (0, _global_styling.logicalCSS)('horizontal', 0), " ", (0, _global_styling.logicalCSS)('border-top', euiTheme.border.thin), ";}.euiTableCellContent{position:relative;", (0, _global_styling.logicalCSS)('top', euiTheme.size.xs), ";}};label:customActions;")
     },
     euiTableRowCell__mobileHeader: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextTruncate)(), " font-size:", (0, _global_styling.euiFontSize)(euiThemeContext, 's', {
       customScale: 'xxs'

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

@@ -21,16 +21,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__
 };
-var euiTabStyles = exports.euiTabStyles = function euiTabStyles(_ref2) {
-  var euiTheme = _ref2.euiTheme;
+var euiTabStyles = exports.euiTabStyles = function euiTabStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
+  var selectedUnderlineSize = highContrastMode ? (0, _global_styling.mathWithUnits)(euiTheme.border.thick, function (x) {
+    return x * 2;
+  }) : euiTheme.border.width.thick;
   return {
-    euiTab: /*#__PURE__*/(0, _react.css)("display:flex;cursor:pointer;flex-direction:row;align-items:center;gap:", euiTheme.size.s, ";", (0, _global_styling.logicalCSS)('padding-vertical', 0), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), "font-weight:", euiTheme.font.weight.semiBold, ";color:", euiTheme.colors.textHeading, ";&:focus{outline-offset:-", euiTheme.focus.width, ";};label:euiTab;"),
+    euiTab: /*#__PURE__*/(0, _react.css)("position:relative;display:flex;cursor:pointer;flex-direction:row;align-items:center;gap:", euiTheme.size.s, ";", (0, _global_styling.logicalCSS)('padding-vertical', 0), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), "font-weight:", euiTheme.font.weight.semiBold, ";color:", euiTheme.colors.textHeading, ";&:focus{outline-offset:-", euiTheme.focus.width, ";}&::after{position:absolute;", (0, _global_styling.logicalCSS)('bottom', 0), " ", (0, _global_styling.logicalCSS)('horizontal', 0), " ", (0, _global_styling.logicalCSS)('border-bottom-style', 'solid'), " ", (0, _global_styling.logicalCSS)('border-bottom-width', selectedUnderlineSize), " pointer-events:none;};label:euiTab;"),
     // variations
     expanded: _ref,
-    selected: /*#__PURE__*/(0, _react.css)("box-shadow:inset 0 -", euiTheme.border.width.thick, " 0 ", euiTheme.colors.primary, ";color:", euiTheme.colors.textPrimary, ";;label:selected;"),
+    selected: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textPrimary, ";&::after{content:'';border-color:", euiTheme.colors.primary, ";};label:selected;"),
     disabled: {
-      disabled: /*#__PURE__*/(0, _react.css)("cursor:not-allowed;color:", euiTheme.colors.disabledText, ";;label:disabled;"),
-      selected: /*#__PURE__*/(0, _react.css)("box-shadow:inset 0 -", euiTheme.border.width.thick, " 0 ", euiTheme.colors.disabledText, ";;label:selected;")
+      disabled: /*#__PURE__*/(0, _react.css)("cursor:not-allowed;color:", euiTheme.colors.textDisabled, ";;label:disabled;"),
+      selected: /*#__PURE__*/(0, _react.css)("&::after{content:'';border-color:", euiTheme.colors.textDisabled, ";};label:selected;")
     }
   };
 };

package/lib/components/tabs/tabs.styles.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiTabsStyles = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
+var _high_contrast = require("../../global_styling/functions/high_contrast");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -18,7 +19,10 @@ var euiTabsStyles = exports.euiTabsStyles = function euiTabsStyles(euiThemeConte
   var euiTheme = euiThemeContext.euiTheme;
   return {
     euiTabs: /*#__PURE__*/(0, _react.css)("display:flex;", (0, _global_styling.logicalCSS)('max-width', '100%'), " ", (0, _global_styling.logicalCSSWithFallback)('overflow-x', 'auto'), " ", (0, _global_styling.logicalCSSWithFallback)('overflow-y', 'hidden'), " position:relative;flex-shrink:0;;label:euiTabs;"),
-    bottomBorder: /*#__PURE__*/(0, _react.css)("box-shadow:inset 0 -", euiTheme.border.width.thin, " 0 ", euiTheme.border.color, ";;label:bottomBorder;"),
+    bottomBorder: /*#__PURE__*/(0, _react.css)((0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+      none: "box-shadow: inset 0 -".concat(euiTheme.border.width.thin, " 0 ").concat(euiTheme.border.color, ";"),
+      forced: (0, _global_styling.logicalCSS)('border-bottom', euiTheme.border.thin)
+    }), ";;label:bottomBorder;"),
     // sizes
     s: /*#__PURE__*/(0, _react.css)("gap:", euiTheme.size.m, ";;label:s;"),
     m: /*#__PURE__*/(0, _react.css)("gap:", euiTheme.size.base, ";;label:m;"),

package/lib/components/text/text.styles.js

@@ -6,8 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiTextStyles = exports.euiTextConstrainedMaxWidth = exports.euiText = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
+var _high_contrast = require("../../global_styling/functions/high_contrast");
 var _link = require("../link/link.styles");
 var _title = require("../title/title.styles");
+var _code_syntax = require("../code/code_syntax.styles");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -27,7 +29,7 @@ var euiTextConstrainedMaxWidth = exports.euiTextConstrainedMaxWidth = 'max(64ch,
 var euiText = exports.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
   };
 };
@@ -59,9 +61,13 @@ var euiScaleText = function euiScaleText(euiThemeContext, options) {
   var blockQuoteBorderWidth = (0, _global_styling.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((0, _global_styling.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((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.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((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.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((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.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((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.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((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    p,\n    dl,\n    blockquote,\n    pre,\n    > ul,\n    > ol {\n      ").concat((0, _global_styling.logicalCSS)('margin-bottom', lineHeightSize), "\n    }\n\n    ul,\n    ol {\n      ").concat((0, _global_styling.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((0, _global_styling.logicalShorthandCSS)('padding', "0 ".concat(fontSize)), "\n      ").concat((0, _global_styling.logicalCSS)('border-left-width', blockQuoteBorderWidth), "\n      ").concat((0, _global_styling.logicalCSS)('margin-bottom', fontSize), "\n    }\n\n    dd + dt {\n      ").concat((0, _global_styling.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((0, _global_styling.euiFontSize)(euiThemeContext, 'xs', options).fontSize, ";\n      color: ").concat(euiTheme.colors.text, ";\n    }\n\n    small {\n      font-size: ").concat((0, _global_styling.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((0, _global_styling.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((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.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((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.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((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.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((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.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((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    p,\n    dl,\n    blockquote,\n    pre,\n    > ul,\n    > ol {\n      ").concat((0, _global_styling.logicalCSS)('margin-bottom', lineHeightSize), "\n    }\n\n    ul,\n    ol {\n      ").concat((0, _global_styling.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((0, _global_styling.logicalShorthandCSS)('padding', "0 ".concat(fontSize)), "\n      ").concat((0, _global_styling.logicalCSS)('border-left-width', blockQuoteBorderWidth), "\n      ").concat((0, _global_styling.logicalCSS)('margin-bottom', fontSize), "\n    }\n\n    dd + dt {\n      ").concat((0, _global_styling.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((0, _global_styling.euiFontSize)(euiThemeContext, 'xs', options).fontSize, ";\n      color: ").concat(euiTheme.colors.textParagraph, ";\n    }\n\n    small {\n      font-size: ").concat((0, _global_styling.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((0, _high_contrast.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((0, _global_styling.logicalCSS)('margin-bottom', lineHeightSize), "\n\n          pre {\n            ").concat((0, _global_styling.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((0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.xs), "\n      /* Ensures the shape still looks like a square when only one character */\n      ").concat((0, _global_styling.logicalCSS)('min-width', euiTheme.size.l), "\n      ").concat((0, _global_styling.logicalTextAlignCSS)('center'), "\n    }\n    \n    kbd::after {\n      content: '';\n      ").concat((0, _global_styling.logicalCSS)('border-bottom', "".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.text)), "\n      position: absolute;\n      ").concat((0, _global_styling.logicalCSS)('bottom', euiTheme.size.xxs), "\n      ").concat((0, _global_styling.logicalCSS)('left', 0), "\n      ").concat((0, _global_styling.logicalCSS)('width', '100%'), "\n    }") : '', "\n  ");
+  _customScale === 'm' ? "\n    kbd {\n      ".concat((0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.xs), "\n      /* Ensures the shape still looks like a square when only one character */\n      ").concat((0, _global_styling.logicalCSS)('min-width', euiTheme.size.l), "\n      ").concat((0, _global_styling.logicalTextAlignCSS)('center'), "\n    }\n    \n    kbd::after {\n      content: '';\n      ").concat((0, _global_styling.logicalCSS)('border-bottom', "".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.textParagraph)), "\n      position: absolute;\n      ").concat((0, _global_styling.logicalCSS)('bottom', euiTheme.size.xxs), "\n      ").concat((0, _global_styling.logicalCSS)('left', 0), "\n      ").concat((0, _global_styling.logicalCSS)('width', '100%'), "\n    }") : '', "\n  ");
 };
 
 /**
@@ -69,9 +75,15 @@ var euiScaleText = function euiScaleText(euiThemeContext, options) {
  */
 var euiTextStyles = exports.euiTextStyles = function euiTextStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  var codeColors = (0, _code_syntax.euiCodeTextColors)(euiThemeContext);
   return {
-    euiText: /*#__PURE__*/(0, _react.css)(euiText(euiTheme, true), "clear:both;a:not([class]){", (0, _link.euiLinkCSS)(euiThemeContext), ";}ul{list-style:disc;}ol{list-style:decimal;}blockquote{border-inline-start-color:", euiTheme.border.color, ";border-inline-start-style:solid;}blockquote:not(.euiMarkdownFormat__blockquote){color:", euiTheme.colors.subduedText, ";}h1{", (0, _title.euiTitle)(euiThemeContext, 'l'), ";}h2{", (0, _title.euiTitle)(euiThemeContext, 'm'), ";}h3{", (0, _title.euiTitle)(euiThemeContext, 's'), ";}h4,dt{", (0, _title.euiTitle)(euiThemeContext, 'xs'), ";}h5{", (0, _title.euiTitle)(euiThemeContext, 'xxs'), ";}h6{", (0, _title.euiTitle)(euiThemeContext, 'xxxs'), " text-transform:uppercase;}h1,h2,h3,h4,h5,h6,dt{color:inherit;}pre:not(.euiCodeBlock__pre){white-space:pre-wrap;background:", euiTheme.colors.backgroundBaseSubdued, ";color:", euiTheme.colors.text, ";}pre:not(.euiCodeBlock__pre),pre:not(.euiCodeBlock__pre) code{display:block;}>:last-child{", (0, _global_styling.logicalCSS)('margin-bottom', '0 !important'), ";}kbd{position:relative;display:inline-block;", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.xxs), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), " line-height:1;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.text, ";border-radius:", (0, _global_styling.mathWithUnits)(euiTheme.border.radius.small, function (x) {
+    euiText: /*#__PURE__*/(0, _react.css)(euiText(euiTheme, true), "clear:both;a:not([class]){", (0, _link.euiLinkCSS)(euiThemeContext), ";}ul{list-style:disc;}ol{list-style:decimal;}blockquote{border-inline-start-color:", euiTheme.border.color, ";border-inline-start-style:solid;}blockquote:not(.euiMarkdownFormat__blockquote){color:", euiTheme.colors.textSubdued, ";}h1{", (0, _title.euiTitle)(euiThemeContext, 'l'), ";}h2{", (0, _title.euiTitle)(euiThemeContext, 'm'), ";}h3{", (0, _title.euiTitle)(euiThemeContext, 's'), ";}h4,dt{", (0, _title.euiTitle)(euiThemeContext, 'xs'), ";}h5{", (0, _title.euiTitle)(euiThemeContext, 'xxs'), ";}h6{", (0, _title.euiTitle)(euiThemeContext, 'xxxs'), " text-transform:uppercase;}h1,h2,h3,h4,h5,h6,dt{color:inherit;}pre:not(.euiCodeBlock > pre){white-space:pre-wrap;background-color:", codeColors.backgroundColor, ";color:", codeColors.color, ";", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+      preferred: "border: ".concat(euiTheme.border.thin)
+    }), ";}pre:not(.euiCodeBlock__pre),pre:not(.euiCodeBlock__pre) code{display:block;}>:last-child{", (0, _global_styling.logicalCSS)('margin-bottom', '0 !important'), ";}kbd{position:relative;display:inline-block;", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.xxs), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), " line-height:1;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.textParagraph, ";border-radius:", (0, _global_styling.mathWithUnits)(euiTheme.border.radius.small, function (x) {
       return x / 2;
+    }), ";", (0, _high_contrast.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__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-width', euiTextConstrainedMaxWidth), ";;label:constrainedWidth;"),
     // Sizes

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

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

package/lib/components/text_truncate/text_truncate.js

@@ -212,19 +212,20 @@ var EuiTextTruncateWithWidth = function EuiTextTruncateWithWidth(_ref2) {
     return truncatedText;
   }, [ready, width, text, truncation, truncationOffset, truncationPosition, ellipsis, containerEl]);
   var isTruncating = truncatedText !== text;
+  var styles = (0, _services.useEuiMemoizedStyles)(_text_truncate.euiTextTruncateStyles);
   return (0, _react2.jsx)("div", _extends({
     className: (0, _classnames.default)('euiTextTruncate', className),
-    css: _text_truncate.euiTextTruncateStyles.euiTextTruncate,
+    css: styles.euiTextTruncate,
     ref: refs,
     title: isTruncating ? text : undefined
   }, rest), isTruncating ? (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("span", {
     className: "euiTextTruncate__truncatedText",
-    css: _text_truncate.euiTextTruncateStyles.euiTextTruncate__truncatedText,
+    css: styles.euiTextTruncate__truncatedText,
     "aria-hidden": true,
     "data-test-subj": "truncatedText"
   }, children ? children(truncatedText) : truncatedText), (0, _react2.jsx)("span", {
     className: "euiTextTruncate__fullText",
-    css: _text_truncate.euiTextTruncateStyles.euiTextTruncate__fullText,
+    css: styles.euiTextTruncate__fullText,
     "data-test-subj": "fullText"
   }, text)) : (0, _react2.jsx)("span", {
     className: "euiTextTruncate__fullText",

package/lib/components/text_truncate/text_truncate.styles.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiTextTruncateStyles = void 0;
 var _react = require("@emotion/react");
+var _high_contrast = require("../../global_styling/functions/high_contrast");
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -12,42 +13,39 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var euiTextTruncateStyles = exports.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__
-  }
+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__
+};
+var euiTextTruncateStyles = exports.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__*/(0, _react.css)("position:absolute;inset:0;overflow:hidden;color:rgba(0, 0, 0, 0);@supports (-webkit-hyphens: none){text-overflow:ellipsis;}", (0, _high_contrast.preventForcedColors)(euiThemeContext), ";;label:euiTextTruncate__fullText;")
+  };
 };