@elastic/eui 100.0.0 → 101.0.0

package/optimize/lib/components/avatar/avatar.js

@@ -61,10 +61,14 @@ var EuiAvatar = exports.EuiAvatar = function EuiAvatar(_ref) {
   var _props$casing = props.casing,
     casing = _props$casing === void 0 ? type === 'space' ? 'none' : 'uppercase' : _props$casing,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded2);
+  var _useEuiTheme = (0, _services.useEuiTheme)(),
+    highContrastMode = _useEuiTheme.highContrastMode,
+    euiTheme = _useEuiTheme.euiTheme;
   var visColors = (0, _color.useEuiPaletteColorBlindBehindText)();
   var isPlain = color === 'plain';
   var isSubdued = color === 'subdued';
   var isNamedColor = isPlain || isSubdued || color === null;
+  var isForcedColors = highContrastMode === 'forced';
   var classes = (0, _classnames.default)('euiAvatar', (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "euiAvatar--".concat(size), size), "euiAvatar--".concat(type), type), 'euiAvatar-isDisabled', isDisabled), className);
   var styles = (0, _services.useEuiMemoizedStyles)(_avatar.euiAvatarStyles);
   var cssStyles = [styles.euiAvatar, styles[type], styles[size], styles[casing], isPlain && styles.plain, isSubdued && styles.subdued, isDisabled && styles.isDisabled];
@@ -84,18 +88,27 @@ var EuiAvatar = exports.EuiAvatar = function EuiAvatar(_ref) {
       };
     }
   }, [imageUrl, color, isNamedColor, name.length, visColors]);
+  var highContrastBorder = (0, _react.useMemo)(
+  // Render a border since background-colors are ignored in Windows forced contrast themes
+  function () {
+    return isForcedColors ? {
+      border: euiTheme.border.thin
+    } : undefined;
+  }, [isForcedColors, euiTheme]);
   var iconCustomColor = (0, _react.useMemo)(function () {
+    // Force icons to single colors in forced high contrast mode
+    if (isForcedColors) return euiTheme.colors.fullShade;
     // `null` allows icons to keep their default color (e.g. app icons)
     if (iconColor === null) return undefined;
     // Otherwise continue to pass on `iconColor`
     if (iconColor) return iconColor;
     // Fall back to the adjusted text color if it exists
     return avatarStyle === null || avatarStyle === void 0 ? void 0 : avatarStyle.color;
-  }, [iconColor, avatarStyle === null || avatarStyle === void 0 ? void 0 : avatarStyle.color]);
+  }, [iconColor, avatarStyle === null || avatarStyle === void 0 ? void 0 : avatarStyle.color, isForcedColors, euiTheme]);
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     css: cssStyles,
     className: classes,
-    style: _objectSpread(_objectSpread({}, style), avatarStyle),
+    style: _objectSpread(_objectSpread(_objectSpread({}, style), avatarStyle), highContrastBorder),
     "aria-label": isDisabled ? undefined : name,
     role: isDisabled ? 'presentation' : 'img',
     title: name

package/optimize/lib/components/avatar/avatar.styles.js

@@ -16,7 +16,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 var _avatarSize = function _avatarSize(_ref7) {
   var size = _ref7.size,
     fontSize = _ref7.fontSize;
-  return "\n    ".concat((0, _global_styling.logicalCSS)('width', size), ";\n    ").concat((0, _global_styling.logicalCSS)('height', size), ";\n    line-height: ").concat(size, ";\n    font-size: ").concat(fontSize, ";\n  ");
+  return "\n    ".concat((0, _global_styling.logicalSizeCSS)(size), ";\n    font-size: ").concat(fontSize, ";\n  ");
 };
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "4wfy2n-none",
@@ -70,7 +70,7 @@ var euiAvatarStyles = exports.euiAvatarStyles = function euiAvatarStyles(_ref8)
   var euiTheme = _ref8.euiTheme;
   return {
     // Base
-    euiAvatar: /*#__PURE__*/(0, _react.css)("flex-shrink:0;display:inline-flex;justify-content:center;align-items:center;vertical-align:middle;background-size:cover;background-color:", euiTheme.colors.lightShade, ";", (0, _global_styling.logicalTextAlignCSS)('center'), " ", (0, _global_styling.logicalCSS)('overflow-x', 'hidden'), "font-weight:", euiTheme.font.weight.medium, ";;label:euiAvatar;"),
+    euiAvatar: /*#__PURE__*/(0, _react.css)("flex-shrink:0;display:inline-flex;justify-content:center;align-items:center;vertical-align:middle;background-size:cover;background-color:", euiTheme.colors.lightShade, ";overflow:hidden;font-weight:", euiTheme.font.weight.medium, ";;label:euiAvatar;"),
     // Variants
     plain: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.emptyShade, ";;label:plain;"),
     subdued: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.lightestShade, ";;label:subdued;"),
@@ -85,15 +85,21 @@ var euiAvatarStyles = exports.euiAvatarStyles = function euiAvatarStyles(_ref8)
     }), ";label:s;"),
     m: /*#__PURE__*/(0, _react.css)(_avatarSize({
       size: euiTheme.size.xl,
-      fontSize: "calc(".concat(euiTheme.size.base, " * 0.9)")
+      fontSize: (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
+        return x * 0.9;
+      })
     }), ";label:m;"),
     l: /*#__PURE__*/(0, _react.css)(_avatarSize({
       size: euiTheme.size.xxl,
-      fontSize: "calc(".concat(euiTheme.size.l, " * 0.8)")
+      fontSize: (0, _global_styling.mathWithUnits)(euiTheme.size.l, function (x) {
+        return x * 0.8;
+      })
     }), ";label:l;"),
     xl: /*#__PURE__*/(0, _react.css)(_avatarSize({
-      size: "calc(".concat(euiTheme.size.base, " * 4)"),
-      fontSize: "calc(".concat(euiTheme.size.xl, " * 0.8)")
+      size: euiTheme.size.xxxxl,
+      fontSize: (0, _global_styling.mathWithUnits)(euiTheme.size.xl, function (x) {
+        return x * 0.8;
+      })
     }), ";label:xl;"),
     // Casing
     capitalize: _ref4,

package/optimize/lib/components/badge/beta_badge/beta_badge.styles.js

@@ -51,18 +51,17 @@ var euiBetaBadgeStyles = exports.euiBetaBadgeStyles = function euiBetaBadgeStyle
   };
   var hasVisColorAdjustment = (_euiTheme$flags = euiTheme.flags) === null || _euiTheme$flags === void 0 ? void 0 : _euiTheme$flags.hasVisColorAdjustment;
   return {
-    euiBetaBadge: /*#__PURE__*/(0, _react.css)("display:inline-block;border-radius:", euiTheme.size.l, ";cursor:default;font-weight:", euiTheme.font.weight.semiBold, ";text-transform:uppercase;letter-spacing:0.05em;text-align:center;", (0, _global_styling.euiTextTruncate)(), " &:focus{", (0, _global_styling.euiFocusRing)(euiThemeContext, 'outset', {
+    euiBetaBadge: /*#__PURE__*/(0, _react.css)("display:inline-block;border-radius:", euiTheme.size.l, ";border:", euiTheme.border.width.thin, " solid transparent;cursor:default;font-weight:", euiTheme.font.weight.semiBold, ";text-transform:uppercase;letter-spacing:0.05em;text-align:center;", (0, _global_styling.euiTextTruncate)(), " &:focus{", (0, _global_styling.euiFocusRing)(euiThemeContext, 'outset', {
       color: colorMode === 'DARK' ? euiTheme.colors.ghost : euiTheme.colors.ink
     }), ";};label:euiBetaBadge;"),
     // Colors
     accent: hasVisColorAdjustment ? /*#__PURE__*/(0, _react.css)(badgeColors.accentText, ";label:accent;") : /*#__PURE__*/(0, _react.css)(badgeColors.accent, ";label:accent;"),
     subdued: /*#__PURE__*/(0, _react.css)(badgeColors.subdued, ";label:subdued;"),
-    hollow: /*#__PURE__*/(0, _react.css)("color:", badgeColors.hollow.color, ";background-color:", badgeColors.hollow.backgroundColor, ";box-shadow:inset 0 0 0 ", euiTheme.border.width.thin, " ", badgeColors.hollow.borderColor, ";;label:hollow;"),
+    hollow: /*#__PURE__*/(0, _react.css)("color:", badgeColors.hollow.color, ";background-color:", badgeColors.hollow.backgroundColor, ";border-color:", badgeColors.hollow.borderColor, ";;label:hollow;"),
     warning: /*#__PURE__*/(0, _react.css)(badgeColors.warning, ";label:warning;"),
     // Font sizes
     m: /*#__PURE__*/(0, _react.css)("font-size:", (0, _global_styling.euiFontSizeFromScale)('xs', euiTheme), ";line-height:", badgeSizes.m, ";;label:m;"),
     s: /*#__PURE__*/(0, _react.css)("font-size:0.7rem;line-height:", badgeSizes.s, ";;label:s;"),
-    // Padding/width sizes
     badgeSizes: {
       default: {
         m: "\n        ".concat((0, _global_styling.logicalCSS)('height', badgeSizes.m), "\n        ").concat((0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.base), "\n        "),
@@ -70,10 +69,8 @@ var euiBetaBadgeStyles = exports.euiBetaBadgeStyles = function euiBetaBadgeStyle
       },
       // When it's just an icon or a single letter, make the badge a circle
       circle: {
-        m: "\n          ".concat((0, _global_styling.logicalCSS)('width', euiTheme.size.l), "\n        "),
-        s: "\n          ".concat((0, _global_styling.logicalCSS)('width', (0, _global_styling.mathWithUnits)(euiTheme.size.xs, function (x) {
-          return x + euiTheme.base;
-        })), "\n        ")
+        m: (0, _global_styling.logicalSizeCSS)(badgeSizes.m),
+        s: (0, _global_styling.logicalSizeCSS)(badgeSizes.s)
       }
     },
     euiBetaBadge__icon: _ref3,

package/optimize/lib/components/badge/notification_badge/badge_notification.styles.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiNotificationBadgeStyles = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../../global_styling");
+var _high_contrast = require("../../../global_styling/functions/high_contrast");
 var _color_utils = require("../color_utils");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -19,12 +20,12 @@ var euiNotificationBadgeStyles = exports.euiNotificationBadgeStyles = function e
   var euiTheme = euiThemeContext.euiTheme;
   var badgeColors = (0, _color_utils.euiBadgeColors)(euiThemeContext);
   return {
-    euiNotificationBadge: /*#__PURE__*/(0, _react.css)("flex-shrink:0;display:inline-block;vertical-align:middle;", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), " border-radius:", euiTheme.border.radius.small, ";cursor:default;font-size:", (0, _global_styling.euiFontSizeFromScale)('xs', euiTheme), ";font-weight:", euiTheme.font.weight.medium, ";", (0, _global_styling.euiNumberFormat)(euiThemeContext), " text-align:center;", _global_styling.euiCanAnimate, "{transition:all ", euiTheme.animation.fast, " ease-in;};label:euiNotificationBadge;"),
+    euiNotificationBadge: /*#__PURE__*/(0, _react.css)("flex-shrink:0;display:inline-flex;justify-content:center;align-items:center;vertical-align:middle;", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), " border-radius:", euiTheme.border.radius.small, ";", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+      forced: "\n          border: ".concat(euiTheme.border.thin, ";\n          overflow: hidden; /* Fix text clipping */\n        ")
+    }), " cursor:default;font-size:", (0, _global_styling.euiFontSizeFromScale)('xs', euiTheme), ";font-weight:", euiTheme.font.weight.medium, ";", (0, _global_styling.euiNumberFormat)(euiThemeContext), " text-align:center;", _global_styling.euiCanAnimate, "{transition:all ", euiTheme.animation.fast, " ease-in;};label:euiNotificationBadge;"),
     // Sizes
-    s: /*#__PURE__*/(0, _react.css)("line-height:", euiTheme.size.base, ";", (0, _global_styling.logicalCSS)('height', euiTheme.size.base), " ", (0, _global_styling.logicalCSS)('min-width', euiTheme.size.base), ";;label:s;"),
-    m: /*#__PURE__*/(0, _react.css)("line-height:", (0, _global_styling.mathWithUnits)(euiTheme.size.xs, function (x) {
-      return x + euiTheme.base;
-    }), ";", (0, _global_styling.logicalCSS)('height', (0, _global_styling.mathWithUnits)(euiTheme.size.xs, function (x) {
+    s: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', euiTheme.size.base), " ", (0, _global_styling.logicalCSS)('min-width', euiTheme.size.base), ";;label:s;"),
+    m: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', (0, _global_styling.mathWithUnits)(euiTheme.size.xs, function (x) {
       return x + euiTheme.base;
     })), " ", (0, _global_styling.logicalCSS)('min-width', euiTheme.size.l), ";;label:m;"),
     // Colors

package/optimize/lib/components/beacon/beacon.styles.js

@@ -8,6 +8,7 @@ exports.euiBeaconStyles = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
+var _high_contrast = require("../../global_styling/functions/high_contrast");
 var _templateObject, _templateObject2;
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -21,11 +22,11 @@ var _colorCSS = function _colorCSS(color) {
 };
 var euiBeaconPulseLarge = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n 0% {\n    transform: scale(.1);\n    opacity: 1;\n  }\n\n  70% {\n    transform: scale(3);\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 0;\n  }\n"])));
 var euiBeaconPulseSmall = (0, _react.keyframes)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n   0% {\n    transform: scale(.1);\n    opacity: 1;\n  }\n\n  70% {\n    transform: scale(2);\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 0;\n  }\n"])));
-var euiBeaconStyles = exports.euiBeaconStyles = function euiBeaconStyles(_ref) {
-  var euiTheme = _ref.euiTheme;
+var euiBeaconStyles = exports.euiBeaconStyles = function euiBeaconStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
-    euiBeacon: /*#__PURE__*/(0, _react.css)("position:relative;border-radius:50%;&::before,&::after{position:absolute;content:'';", (0, _global_styling.logicalSizeCSS)('100%', '100%'), " ", (0, _global_styling.logicalCSS)('left', 0), " ", (0, _global_styling.logicalCSS)('top', 0), " background-color:transparent;border-radius:50%;}&::before{transform:scale(1.6);opacity:0.4;}&::after{opacity:0;}", _global_styling.euiCanAnimate, "{&::before{animation:", euiBeaconPulseLarge, " 2.5s infinite ease-out;}&::after{animation:", euiBeaconPulseSmall, " 2.5s infinite ease-out 0.25s;}};label:euiBeacon;"),
+    euiBeacon: /*#__PURE__*/(0, _react.css)("position:relative;display:flex;justify-content:center;border-radius:50%;", (0, _high_contrast.preventForcedColors)(euiThemeContext), " svg{", (0, _global_styling.logicalSizeCSS)('100%'), ";}&::before,&::after{position:absolute;content:'';", (0, _global_styling.logicalSizeCSS)('100%'), " ", (0, _global_styling.logicalCSS)('left', 0), " ", (0, _global_styling.logicalCSS)('top', 0), " background-color:transparent;border-radius:50%;}&::before{transform:scale(1.6);opacity:0.4;}&::after{opacity:0;}", _global_styling.euiCanAnimate, "{&::before{animation:", euiBeaconPulseLarge, " 2.5s infinite ease-out;}&::after{animation:", euiBeaconPulseSmall, " 2.5s infinite ease-out 0.25s;}};label:euiBeacon;"),
     subdued: /*#__PURE__*/(0, _react.css)(_colorCSS(euiTheme.colors.textSubdued), ";label:subdued;"),
     primary: /*#__PURE__*/(0, _react.css)(_colorCSS(euiTheme.colors.primary), ";label:primary;"),
     success: /*#__PURE__*/(0, _react.css)(_colorCSS(euiTheme.colors.accentSecondary), ";label:success;"),

package/optimize/lib/components/bottom_bar/bottom_bar.styles.js

@@ -9,6 +9,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = require("@emotion/react");
 var _euiThemeCommon = require("@elastic/eui-theme-common");
 var _global_styling = require("../../global_styling");
+var _high_contrast = require("../../global_styling/functions/high_contrast");
 var _templateObject;
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -23,7 +24,9 @@ var euiBottomBarStyles = exports.euiBottomBarStyles = function euiBottomBarStyle
   return {
     // Base
     // `color` is inherited from the wrapping `EuiThemeProvider colorMode="dark"`
-    euiBottomBar: /*#__PURE__*/(0, _react.css)((0, _euiThemeCommon.euiShadowFlat)(euiThemeContext), " background:", euiTheme.components.bottomBarBackground, ";", _global_styling.euiCanAnimate, "{animation:", euiBottomBarAppear, " ", euiTheme.animation.slow, " ", euiTheme.animation.resistance, ";};label:euiBottomBar;"),
+    euiBottomBar: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.components.bottomBarBackground, ";", (0, _global_styling.logicalCSS)('border-top', euiTheme.border.thin), " ", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+      none: (0, _euiThemeCommon.euiShadowFlat)(euiThemeContext)
+    }), " ", _global_styling.euiCanAnimate, "{animation:", euiBottomBarAppear, " ", euiTheme.animation.slow, " ", euiTheme.animation.resistance, ";};label:euiBottomBar;"),
     static: /*#__PURE__*/(0, _react.css)(";label:static;"),
     // Default
     fixed: /*#__PURE__*/(0, _react.css)("position:fixed;z-index:", Number(euiTheme.levels.header) - 2, ";;label:fixed;"),

package/optimize/lib/components/breadcrumbs/_breadcrumb_content.js

@@ -60,6 +60,8 @@ var EuiBreadcrumbContent = exports.EuiBreadcrumbContent = function EuiBreadcrumb
       cssStyles.push(styles.applicationStyles.firstChild);
     } else if (isLastBreadcrumb) {
       cssStyles.push(styles.applicationStyles.lastChild);
+    } else {
+      cssStyles.push(styles.applicationStyles.intermediateChild);
     }
   }
   var truncationStyles = [truncate && !truncateLastBreadcrumb && styles.isTruncated, truncateLastBreadcrumb && styles.isTruncatedLast];

package/optimize/lib/components/breadcrumbs/_breadcrumb_content.styles.js

@@ -6,7 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiBreadcrumbPopoverStyles = exports.euiBreadcrumbContentStyles = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
-var _button = require("../../global_styling/mixins/_button");
+var _high_contrast = require("../../global_styling/functions/high_contrast");
+var _button = require("../../themes/amsterdam/global_styling/mixins/button");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -19,7 +20,8 @@ var _button = require("../../global_styling/mixins/_button");
  * Styles cast to inner <a>, <button>, <span> elements
  */
 var euiBreadcrumbContentStyles = exports.euiBreadcrumbContentStyles = function euiBreadcrumbContentStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
 
   // Reuse button colors for `type="application`" clickable breadcrumbs
   var applicationButtonColors = (0, _button.euiButtonColor)(euiThemeContext, 'primary');
@@ -30,6 +32,16 @@ var euiBreadcrumbContentStyles = exports.euiBreadcrumbContentStyles = function e
     backgroundColor: euiTheme.components.breadcrumbsApplicationBackground,
     color: euiTheme.components.breadcrumbsApplicationColor
   };
+
+  // Create an arrow "border" in high contrast modes. We have to use a
+  // filter/drop-shadow workaround to get a border working with clip-path.
+  // Note: the filter must be on the parent wrapper, not on the clipped element
+  var dropShadow = function dropShadow(borderColor) {
+    return "filter: drop-shadow(".concat(euiTheme.border.width.thin, " 0 0 ").concat(highContrastMode === 'forced' ? euiTheme.border.color : borderColor, ");");
+  };
+  var applicationHighContrastArrow = (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+    preferred: "\n      &:is(a, button) {\n        .euiBreadcrumb:has(&) {\n          ".concat(dropShadow(applicationButtonColors.color), "\n        }\n      }\n      &:not(a, button) {\n        .euiBreadcrumb:has(&) {\n          ").concat(dropShadow(applicationTextColors.color), "\n        }\n      }\n    ")
+  });
   return {
     euiBreadcrumb__content: /*#__PURE__*/(0, _react.css)("font-weight:", euiTheme.font.weight.regular, ";text-align:center;vertical-align:baseline;&:not(.euiLink){color:", euiTheme.colors.textSubdued, ";};label:euiBreadcrumb__content;"),
     // Truncation styles
@@ -37,13 +49,18 @@ var euiBreadcrumbContentStyles = exports.euiBreadcrumbContentStyles = function e
       return x * 10;
     })), ";;label:isTruncated;"),
     isTruncatedLast: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextTruncate)('none'), ";;label:isTruncatedLast;"),
-    isInteractive: /*#__PURE__*/(0, _react.css)("&:not(:disabled){text-decoration:underline;&[class*='euiLink-subdued']{&:hover,&:focus{color:", euiTheme.colors.text, ";}}};label:isInteractive;"),
+    isInteractive: /*#__PURE__*/(0, _react.css)("&:not(:disabled){text-decoration:underline;&[class*='euiLink-subdued']{&:hover,&:focus{color:", euiTheme.colors.textParagraph, ";}}};label:isInteractive;"),
     // Types
     page: /*#__PURE__*/(0, _react.css)("&:is(a):focus{", (0, _global_styling.euiFocusRing)(euiThemeContext, 'inset'), ";}&:is(button):focus{", (0, _global_styling.euiFocusRing)(euiThemeContext, 'center'), ";};label:page;"),
-    application: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), " font-weight:", euiTheme.font.weight.medium, ";background-color:", applicationTextColors.backgroundColor, ";clip-path:polygon(\n        0 0,\n        calc(100% - ", euiTheme.size.s, ") 0,\n        100% 50%,\n        calc(100% - ", euiTheme.size.s, ") 100%,\n        0 100%,\n        ", euiTheme.size.s, " 50%\n      );color:", applicationTextColors.color, ";line-height:", euiTheme.size.base, ";", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.xs), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.base), " &:is(a),&:is(button){background-color:", applicationButtonColors.backgroundColor, ";color:", applicationButtonColors.color, ";:focus{", (0, _global_styling.euiFocusRing)(euiThemeContext, 'inset'), " :focus-visible{border-radius:", euiTheme.border.radius.medium, ";clip-path:none;}}};label:application;"),
+    application: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), " font-weight:", euiTheme.font.weight.medium, ";background-color:", applicationTextColors.backgroundColor, ";", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+      preferred: "border: ".concat(euiTheme.border.width.thin, " solid currentColor;")
+    }), " color:", applicationTextColors.color, ";line-height:", euiTheme.size.base, ";", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.xs), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.base), " &:is(a, button){background-color:", applicationButtonColors.backgroundColor, ";color:", applicationButtonColors.color, ";}&:focus{", (0, _global_styling.euiFocusRing)(euiThemeContext, 'inset'), ";}&:focus-visible{border-radius:", euiTheme.border.radius.medium, ";clip-path:none;.euiBreadcrumb:has(&){z-index:2;", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+      preferred: 'filter: none;'
+    }), ";}};label:application;"),
     applicationStyles: {
-      onlyChild: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";clip-path:none;", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.m), ";;label:onlyChild;"),
-      firstChild: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalBorderRadiusCSS)("".concat(euiTheme.border.radius.medium, " 0 0 ").concat(euiTheme.border.radius.medium), true), " clip-path:polygon(\n          0 0,\n          calc(100% - ", euiTheme.size.s, ") 0,\n          100% 50%,\n          calc(100% - ", euiTheme.size.s, ") 100%,\n          0 100%\n        );", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.m), ";;label:firstChild;"),
+      onlyChild: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.m), ";;label:onlyChild;"),
+      firstChild: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalBorderRadiusCSS)("".concat(euiTheme.border.radius.medium, " 0 0 ").concat(euiTheme.border.radius.medium), true), " clip-path:polygon(\n          0 0,\n          calc(100% - ", euiTheme.size.s, ") 0,\n          100% 50%,\n          calc(100% - ", euiTheme.size.s, ") 100%,\n          0 100%\n        );", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.m), " ", applicationHighContrastArrow, ";;label:firstChild;"),
+      intermediateChild: "\n        clip-path: polygon(\n          0 0,\n          calc(100% - ".concat(euiTheme.size.s, ") 0,\n          100% 50%,\n          calc(100% - ").concat(euiTheme.size.s, ") 100%,\n          0 100%,\n          ").concat(euiTheme.size.s, " 50%\n        );\n        ").concat(applicationHighContrastArrow, "\n      "),
       lastChild: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalBorderRadiusCSS)("0 ".concat(euiTheme.border.radius.medium, " ").concat(euiTheme.border.radius.medium, " 0"), true), " clip-path:polygon(\n          0 0,\n          100% 0,\n          100% 100%,\n          0 100%,\n          ", euiTheme.size.s, " 50%\n        );", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.m), ";;label:lastChild;")
     }
   };

package/optimize/lib/components/breadcrumbs/breadcrumb.styles.js

@@ -32,16 +32,22 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   styles: "overflow:hidden;label:isTruncated;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
+var _ref3 = process.env.NODE_ENV === "production" ? {
+  name: "c4wfaq-euiBreadcrumb",
+  styles: "align-items:center;display:flex;label:euiBreadcrumb;"
+} : {
+  name: "c4wfaq-euiBreadcrumb",
+  styles: "align-items:center;display:flex;label:euiBreadcrumb;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
 var euiBreadcrumbStyles = exports.euiBreadcrumbStyles = function euiBreadcrumbStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiBreadcrumb: /*#__PURE__*/(0, _react.css)("align-items:center;display:flex;", (0, _global_styling.logicalCSS)(
-    // See .euiBreadcrumbs__list's negative margin-bottom
-    'margin-bottom', euiTheme.size.xs), ";;label:euiBreadcrumb;"),
+    euiBreadcrumb: _ref3,
     isTruncated: _ref2,
     isCollapsed: _ref,
     // Types
-    page: /*#__PURE__*/(0, _react.css)("&:not(:last-of-type){&::after{background:", euiTheme.colors.lightShade, ";content:'';flex-shrink:0;", (0, _global_styling.logicalCSS)('margin-top', euiTheme.size.xs), " ", (0, _global_styling.logicalCSS)('margin-bottom', 0), " ", (0, _global_styling.logicalCSS)('margin-horizontal', euiTheme.size.s), " ", (0, _global_styling.logicalCSS)('height', euiTheme.size.base), " ", (0, _global_styling.logicalCSS)('width', '1px'), " transform:translateY(-1px) rotate(15deg);}};label:page;"),
+    page: /*#__PURE__*/(0, _react.css)("&:not(:last-of-type){&::after{content:'';flex-shrink:0;", (0, _global_styling.logicalCSS)('margin-top', euiTheme.size.xs), " ", (0, _global_styling.logicalCSS)('margin-bottom', 0), " ", (0, _global_styling.logicalCSS)('margin-horizontal', euiTheme.size.s), " ", (0, _global_styling.logicalCSS)('height', euiTheme.size.base), " ", (0, _global_styling.logicalCSS)('border-right', euiTheme.border.thin), " transform:translateY(-", euiTheme.border.width.thin, ") rotate(15deg);}};label:page;"),
     application: /*#__PURE__*/(0, _react.css)("&:not(:last-of-type){", (0, _global_styling.logicalCSS)('margin-right', "-".concat(euiTheme.size.xs)), ";};label:application;")
   };
 };

package/optimize/lib/components/breadcrumbs/breadcrumbs.styles.js

@@ -25,9 +25,7 @@ var euiBreadcrumbsListStyles = exports.euiBreadcrumbsListStyles = function euiBr
   // Styles cast to the <ol> element
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiBreadcrumbs__list: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 's'), " align-items:center;display:flex;flex-wrap:wrap;line-height:", euiTheme.size.l, ";", (0, _global_styling.logicalCSS)(
-    // Add vertical space between breadcrumbs, but make sure the whole breadcrumb set doesn't add space below itself
-    'margin-bottom', "-".concat(euiTheme.size.xs)), " ", (0, _global_styling.logicalCSS)(
+    euiBreadcrumbs__list: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 's'), " align-items:center;display:flex;flex-wrap:wrap;line-height:", euiTheme.size.l, ";row-gap:", euiTheme.size.xs, ";", (0, _global_styling.logicalCSS)(
     // Ensure it shrinks if the window is narrow
     'min-width', 0), ";;label:euiBreadcrumbs__list;"),
     isTruncated: _ref

package/optimize/lib/components/button/button_group/button_group.styles.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiButtonGroupStyles = exports.euiButtonGroupButtonsStyles = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../../global_styling");
+var _high_contrast = require("../../../global_styling/functions/high_contrast");
 var _form = require("../../form/form.styles");
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -37,8 +38,23 @@ var euiButtonGroupButtonsStyles = exports.euiButtonGroupButtonsStyles = function
     euiButtonGroup__buttons: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-width', '100%'), " display:flex;;label:euiButtonGroup__buttons;"),
     fullWidth: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), " .euiButtonGroupButton,.euiButtonGroup__tooltipWrapper{flex:1;", (0, _global_styling.logicalCSS)('width', '100%'), ";};label:fullWidth;"),
     // Sizes
-    m: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";;label:m;"),
-    s: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.small, ";;label:s;"),
-    compressed: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', controlCompressedHeight), " background-color:", backgroundColor, ";border:", euiTheme.border.width.thin, " solid ", borderColor, ";border-radius:", controlCompressedBorderRadius, ";;label:compressed;")
+    m: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";", _highContrastStyles(euiThemeContext), ";;label:m;"),
+    s: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.small, ";", _highContrastStyles(euiThemeContext), ";;label:s;"),
+    compressed: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', controlCompressedHeight), " background-color:", backgroundColor, ";border:", euiTheme.border.width.thin, " solid ", borderColor, ";border-radius:", controlCompressedBorderRadius, ";", _highContrastStyles(euiThemeContext, true), ";;label:compressed;")
   };
+};
+var _highContrastStyles = function _highContrastStyles(euiThemeContext, compressed) {
+  var euiTheme = euiThemeContext.euiTheme;
+
+  // Account for buttons within tooltip wrappers in selectors
+  var getButtonChildSelectors = function getButtonChildSelectors(selector) {
+    return "\n    & > .euiButtonGroupButton".concat(selector, ",\n    & > .euiButtonGroup__tooltipWrapper").concat(selector, " .euiButtonGroupButton");
+  };
+  return (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+    preferred: compressed ? "\n        .euiButtonGroupButton {\n          border: none;\n        }\n      " : // Conditionally unset the high contrast borders passed by `euiButtonColor` -
+    // faux borders between selected/unselected buttons are rendered by pseudo elements,
+    // and can flip colors depending on selected/unselected siblings
+    "\n        ".concat(getButtonChildSelectors(':not(:first-child, :last-child)'), " {\n          ").concat((0, _global_styling.logicalCSS)('border-horizontal', 'none'), "\n        }\n        ").concat(getButtonChildSelectors(':first-child'), " {\n          ").concat((0, _global_styling.logicalCSS)('border-right', 'none'), "\n        }\n        ").concat(getButtonChildSelectors(':last-child'), " {\n          ").concat((0, _global_styling.logicalCSS)('border-left', 'none'), "\n        }\n      "),
+    forced: "\n      .euiButtonGroupButton-isSelected {\n        ".concat((0, _high_contrast.preventForcedColors)(euiThemeContext), "\n        color: ").concat(euiTheme.colors.emptyShade, ";\n        background-color: ").concat(euiTheme.colors.fullShade, ";\n      }\n\n      .euiButtonGroupButton[disabled] {\n        opacity: 0.5;\n      }\n    ")
+  });
 };

package/optimize/lib/components/button/button_group/button_group_button.styles.js

@@ -39,7 +39,8 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 var euiButtonGroupButtonStyles = exports.euiButtonGroupButtonStyles = function euiButtonGroupButtonStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   var _euiFormVariables = (0, _form.euiFormVariables)(euiThemeContext),
     controlCompressedHeight = _euiFormVariables.controlCompressedHeight,
     controlCompressedBorderRadius = _euiFormVariables.controlCompressedBorderRadius;
@@ -57,14 +58,15 @@ var euiButtonGroupButtonStyles = exports.euiButtonGroupButtonStyles = function e
     uncompressed: {
       uncompressed: /*#__PURE__*/(0, _react.css)("&:is(.euiButtonGroupButton-isSelected){font-weight:", euiTheme.font.weight.bold, ";}&:focus-visible{", (0, _global_styling.euiOutline)(euiThemeContext, 'inset', euiTheme.components.buttonGroupFocusColor), ";};label:uncompressed;"),
       get borders() {
+        // We use pseudo elements to avoid affecing button width, and to allow
+        // inheriting high contrast border colors
         var selectors = '.euiButtonGroupButton-isSelected, .euiButtonGroup__tooltipWrapper-isSelected';
-        var selectedColor = euiTheme.components.buttonGroupBorderColorSelected;
-        var unselectedColor = euiTheme.components.buttonGroupBorderColor;
-        var borderWidth = euiTheme.border.width.thin;
+        var selectedColor = highContrastMode ? euiTheme.colors.emptyShade : euiTheme.components.buttonGroupBorderColorSelected;
+        var unselectedColor = highContrastMode ? 'inherit' : euiTheme.components.buttonGroupBorderColor;
 
         // "Borders" between buttons should be present between two of the same colored buttons,
         // and absent between selected vs non-selected buttons (different colors)
-        return "\n          &:not(".concat(selectors, ") + *:not(").concat(selectors, ") {\n            box-shadow: -").concat(borderWidth, " 0 0 0 ").concat(unselectedColor, ";\n          }\n          &:is(").concat(selectors, ") + *:is(").concat(selectors, ") {\n            box-shadow: -").concat(borderWidth, " 0 0 0 ").concat(selectedColor, ";\n          }\n        ");
+        return "\n          position: relative;\n\n          &::before {\n            position: absolute;\n            ".concat((0, _global_styling.logicalCSS)('left', 0), "\n            ").concat((0, _global_styling.logicalCSS)('vertical', highContrastMode ? "-".concat(euiTheme.border.width.thin) : 0), "\n            ").concat((0, _global_styling.logicalCSS)('border-left-style', 'solid'), "\n            ").concat((0, _global_styling.logicalCSS)('border-left-width', euiTheme.border.width.thin), "\n            pointer-events: none;\n          }\n        \n          &:not(").concat(selectors, ") + *:not(").concat(selectors, ") {\n            &::before {\n              content: '';\n              border-color: ").concat(unselectedColor, ";\n            }\n          }\n\n          &:is(").concat(selectors, ") + *:is(").concat(selectors, ") {\n            &::before {\n              content: '';\n              border-color: ").concat(selectedColor, ";\n            }\n          }\n        ");
       },
       get s() {
         return /*#__PURE__*/(0, _react.css)(this.borders, " ", uncompressedBorderRadii(euiTheme.border.radius.small), ";;label:s;");
@@ -80,7 +82,7 @@ var euiButtonGroupButtonStyles = exports.euiButtonGroupButtonStyles = function e
       return x + y;
     }), ";font-weight:", euiTheme.font.weight.regular, ";&:is(.euiButtonGroupButton-isSelected){font-weight:", euiTheme.font.weight.semiBold, ";};label:compressed;"),
     // States
-    disabledAndSelected: /*#__PURE__*/(0, _react.css)("color:", (0, _services.makeDisabledContrastColor)(euiTheme.colors.disabledText)(euiTheme.colors.disabled), ";background-color:", euiTheme.colors.disabled, ";;label:disabledAndSelected;"),
+    disabledAndSelected: /*#__PURE__*/(0, _react.css)("color:", (0, _services.makeDisabledContrastColor)(euiTheme.colors.textDisabled)(euiTheme.components.buttonGroupBackgroundDisabledSelected), ";background-color:", euiTheme.components.buttonGroupBackgroundDisabledSelected, ";border:", highContrastMode && "".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.components.buttonGroupBackgroundDisabledSelected), ";;label:disabledAndSelected;"),
     // Tooltip anchor wrapper
     tooltipWrapper: _ref,
     // Content wrapper

package/optimize/lib/components/call_out/call_out.styles.js

@@ -58,7 +58,7 @@ var euiCallOutHeaderStyles = exports.euiCallOutHeaderStyles = function euiCallOu
     success: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textSuccess, ";;label:success;"),
     warning: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textWarning, ";;label:warning;"),
     danger: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textDanger, ";;label:danger;"),
-    accent: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.accentText, ";;label:accent;"),
+    accent: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textAccent, ";;label:accent;"),
     euiCallOut__icon: /*#__PURE__*/(0, _react.css)("position:relative;", (0, _global_styling.logicalCSS)('top', '-1px'), " ", (0, _global_styling.logicalCSS)('margin-right', euiTheme.size.s), ";;label:euiCallOut__icon;")
   };
 };

package/optimize/lib/components/card/card.styles.js

@@ -65,9 +65,6 @@ var _ref6 = process.env.NODE_ENV === "production" ? {
 var euiCardStyles = exports.euiCardStyles = function euiCardStyles(euiThemeContext, paddingSize) {
   var euiTheme = euiThemeContext.euiTheme;
   var paddingAmount = (0, _global_styling.euiPaddingSize)(euiThemeContext, paddingSize);
-  var cardPaddingAmount = paddingAmount ? (0, _global_styling.mathWithUnits)([paddingAmount, euiTheme.border.width.thin], function (x, y) {
-    return x + y;
-  }) : '0';
   var spacing = (0, _global_styling.euiPaddingSize)(euiThemeContext, paddingKey);
   var halfSpacing = (0, _global_styling.euiPaddingSize)(euiThemeContext, halfPaddingKey);
   return {
@@ -78,7 +75,7 @@ var euiCardStyles = exports.euiCardStyles = function euiCardStyles(euiThemeConte
         left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('left'), " align-items:flex-start;;label:left;"),
         right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('right'), " align-items:flex-end;;label:right;")
       },
-      disabled: /*#__PURE__*/(0, _react.css)("cursor:not-allowed;background-color:", (0, _mixins.euiButtonColor)(euiThemeContext, 'disabled'), ";color:", euiTheme.colors.disabledText, ";;label:disabled;")
+      disabled: /*#__PURE__*/(0, _react.css)("cursor:not-allowed;", (0, _mixins.euiButtonColor)(euiThemeContext, 'disabled'), ";;label:disabled;")
     },
     main: {
       euiCard__main: _ref6,
@@ -106,7 +103,7 @@ var euiCardStyles = exports.euiCardStyles = function euiCardStyles(euiThemeConte
       disabled: _ref2
     },
     image: {
-      euiCard__image: /*#__PURE__*/(0, _react.css)("position:relative;overflow:hidden;", (0, _global_styling.logicalCSS)('width', "calc(100% + (".concat(cardPaddingAmount, " * 2))")), " ", (0, _global_styling.logicalCSS)('left', "-".concat(cardPaddingAmount)), " ", (0, _global_styling.logicalCSS)('top', "-".concat(cardPaddingAmount)), (0, _global_styling.logicalCSS)('margin-bottom', "-".concat(paddingAmount)), (0, _global_styling.logicalCSS)('border-top-left-radius', "calc(".concat(euiTheme.border.radius.medium, " - ").concat(euiTheme.border.width.thin, ")")), " ", _global_styling.logicals['border-top-right-radius'], ":calc(", euiTheme.border.radius.medium, " - ", euiTheme.border.width.thin, ");img{", (0, _global_styling.logicalCSS)('width', '100%'), ";};label:euiCard__image;"),
+      euiCard__image: /*#__PURE__*/(0, _react.css)("position:relative;overflow:hidden;", (0, _global_styling.logicalCSS)('width', "calc(100% + (".concat(paddingAmount, " * 2))")), " ", (0, _global_styling.logicalCSS)('left', "-".concat(paddingAmount)), " ", (0, _global_styling.logicalCSS)('top', "-".concat(paddingAmount)), (0, _global_styling.logicalCSS)('margin-bottom', "-".concat(paddingAmount)), (0, _global_styling.logicalCSS)('border-top-left-radius', "calc(".concat(euiTheme.border.radius.medium, " - ").concat(euiTheme.border.width.thin, ")")), " ", _global_styling.logicals['border-top-right-radius'], ":calc(", euiTheme.border.radius.medium, " - ", euiTheme.border.width.thin, ");img{", (0, _global_styling.logicalCSS)('width', '100%'), ";};label:euiCard__image;"),
       transparent: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";;label:transparent;")
     },
     icon: {

package/optimize/lib/components/code/code_block.styles.js

@@ -8,6 +8,7 @@ exports.euiCodeBlockStyles = exports.euiCodeBlockPreStyles = exports.euiCodeBloc
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
+var _high_contrast = require("../../global_styling/functions/high_contrast");
 var _code_syntax = require("./code_syntax.styles");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -38,7 +39,11 @@ var euiCodeBlockStyles = exports.euiCodeBlockStyles = function euiCodeBlockStyle
   var codeSyntaxVariables = (0, _code_syntax.euiCodeSyntaxVariables)(euiThemeContext);
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiCodeBlock: /*#__PURE__*/(0, _react.css)("max-inline-size:100%;display:block;position:relative;background:", codeSyntaxVariables.backgroundColor, ";", codeSyntaxVariables.tokensCss, ";;label:euiCodeBlock;"),
+    euiCodeBlock: /*#__PURE__*/(0, _react.css)("max-inline-size:100%;display:block;position:relative;background:", codeSyntaxVariables.backgroundColor, ";", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+      preferred: "border: ".concat(euiTheme.border.thin, ";"),
+      // Fix scrolling text occluding the border in Windows high contrast mode
+      forced: 'overflow: hidden;'
+    }), " ", codeSyntaxVariables.tokensCss, ";;label:euiCodeBlock;"),
     // Font size
     s: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), ";;label:s;"),
     m: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 's'), ";;label:m;"),
@@ -113,7 +118,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
 var euiCodeBlockCodeStyles = exports.euiCodeBlockCodeStyles = function euiCodeBlockCodeStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiCodeBlock__code: /*#__PURE__*/(0, _react.css)("font-family:", euiTheme.font.familyCode, ";font-size:inherit;color:", euiTheme.colors.text, ";display:block;;label:euiCodeBlock__code;"),
+    euiCodeBlock__code: /*#__PURE__*/(0, _react.css)("font-family:", euiTheme.font.familyCode, ";font-size:inherit;color:", euiTheme.colors.textParagraph, ";display:block;;label:euiCodeBlock__code;"),
     isVirtualized: _ref
   };
 };

package/optimize/lib/components/code/code_block_annotations.style.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiCodeBlockAnnotationsStyles = 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
@@ -14,13 +15,19 @@ var _global_styling = require("../../global_styling");
  * Side Public License, v 1.
  */
 
-var euiCodeBlockAnnotationsStyles = exports.euiCodeBlockAnnotationsStyles = function euiCodeBlockAnnotationsStyles(_ref) {
-  var euiTheme = _ref.euiTheme;
+var euiCodeBlockAnnotationsStyles = exports.euiCodeBlockAnnotationsStyles = function euiCodeBlockAnnotationsStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
   var buttonIconSize = (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
     return x - 1.5;
   });
   return {
     euiCodeBlockAnnotation: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('right', 0), " ", (0, _global_styling.logicalCSS)('top', '50%'), " transform:translate(50%, -50%);line-height:1;;label:euiCodeBlockAnnotation;"),
-    euiCodeBlockAnnotation__buttonIcon: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(buttonIconSize), " display:flex;align-items:center;justify-content:center;background-color:", euiTheme.colors.primary, ";border-radius:50%;;label:euiCodeBlockAnnotation__buttonIcon;")
+    euiCodeBlockAnnotation__buttonIcon: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(buttonIconSize), " display:flex;align-items:center;justify-content:center;border-radius:50%;", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+      none: "background-color: ".concat(euiTheme.colors.primary, ";"),
+      // Windows high contrast themes ignore background-color
+      forced: "\n          border: ".concat((0, _global_styling.mathWithUnits)(buttonIconSize, function (x) {
+        return x / 2;
+      }), " solid ").concat(euiTheme.colors.primary, ";")
+    }), ";;label:euiCodeBlockAnnotation__buttonIcon;")
   };
 };

package/optimize/lib/components/code/code_block_line.styles.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiCodeBlockLineStyles = void 0;
 var _css = require("@emotion/css");
+var _global_styling = require("../../global_styling");
 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
@@ -22,7 +23,18 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 // (i.e., applying styles in vanilla JS / directly to DOM nodes instead of React)
 
 var euiCodeBlockLineStyles = exports.euiCodeBlockLineStyles = function euiCodeBlockLineStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
+  var lineMargins = euiTheme.size.m;
+  var lineWidth = euiTheme.border.width.thin;
+
+  // Increase highlight border width in high contrast modes
+  var highlightWidth = highContrastMode ? (0, _global_styling.mathWithUnits)(euiTheme.border.width.thick, function (x) {
+    return x * 1.5;
+  }) : euiTheme.border.width.thick;
+  var highlightOffset = (0, _global_styling.mathWithUnits)([lineMargins, lineWidth, highlightWidth], function (x, y, z) {
+    return x + y - z;
+  });
   return {
     euiCodeBlock__line: /*#__PURE__*/(0, _css.css)(process.env.NODE_ENV === "production" ? {
       name: "yn676d-euiCodeBlock__line",
@@ -41,12 +53,12 @@ var euiCodeBlockLineStyles = exports.euiCodeBlockLineStyles = function euiCodeBl
       toString: _EMOTION_STRINGIFIED_CSS_ERROR__
     }),
     lineText: {
-      euiCodeBlock__lineText: /*#__PURE__*/(0, _css.css)("flex-grow:1;display:inline-block;padding-inline-start:", euiTheme.size.m, ";border-inline-start:", euiTheme.border.thin, ";user-select:text;;label:euiCodeBlock__lineText;"),
-      isHighlighted: /*#__PURE__*/(0, _css.css)("background:", euiTheme.colors.backgroundBasePrimary, ";border-inline-start:", euiTheme.border.width.thick, " solid ", euiTheme.colors.primary, ";;label:isHighlighted;")
+      euiCodeBlock__lineText: /*#__PURE__*/(0, _css.css)("flex-grow:1;display:inline-block;padding-inline-start:", lineMargins, ";border-inline-start:", lineWidth, " solid ", euiTheme.border.color, ";user-select:text;;label:euiCodeBlock__lineText;"),
+      isHighlighted: /*#__PURE__*/(0, _css.css)("background:", euiTheme.colors.backgroundBasePrimary, ";border-inline-start:", highlightWidth, " solid ", euiTheme.colors.primary, ";padding-inline-start:", highlightOffset, ";;label:isHighlighted;")
     },
     lineNumber: {
-      euiCodeBlock__lineNumberWrapper: /*#__PURE__*/(0, _css.css)("position:relative;flex-grow:0;flex-shrink:0;user-select:none;padding-inline-end:", euiTheme.size.m, ";box-sizing:content-box;;label:euiCodeBlock__lineNumberWrapper;"),
-      euiCodeBlock__lineNumber: /*#__PURE__*/(0, _css.css)("color:", euiTheme.colors.subduedText, ";text-align:end;display:block;&::before{content:attr(data-line-number);};label:euiCodeBlock__lineNumber;")
+      euiCodeBlock__lineNumberWrapper: /*#__PURE__*/(0, _css.css)("position:relative;flex-grow:0;flex-shrink:0;user-select:none;padding-inline-end:", lineMargins, ";box-sizing:content-box;;label:euiCodeBlock__lineNumberWrapper;"),
+      euiCodeBlock__lineNumber: /*#__PURE__*/(0, _css.css)("color:", euiTheme.colors.textSubdued, ";text-align:end;display:block;&::before{content:attr(data-line-number);};label:euiCodeBlock__lineNumber;")
     }
   };
 };

package/optimize/lib/components/code/code_syntax.styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiCodeSyntaxVariables = void 0;
+exports.euiCodeTextColors = exports.euiCodeSyntaxVariables = void 0;
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -12,12 +12,23 @@ exports.euiCodeSyntaxVariables = void 0;
  * Side Public License, v 1.
  */
 
-// These variables are computationally expensive - do not call them outside `useEuiMemoizedStyles`
-var euiCodeSyntaxVariables = exports.euiCodeSyntaxVariables = function euiCodeSyntaxVariables(_ref) {
+var euiCodeTextColors = exports.euiCodeTextColors = function euiCodeTextColors(_ref) {
   var euiTheme = _ref.euiTheme;
   return {
     backgroundColor: euiTheme.components.codeBackground,
-    color: euiTheme.components.codeColor,
+    color: euiTheme.components.codeColor
+  };
+};
+
+// These variables are computationally expensive - do not call them outside `useEuiMemoizedStyles`
+var euiCodeSyntaxVariables = exports.euiCodeSyntaxVariables = function euiCodeSyntaxVariables(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var _euiCodeTextColors = euiCodeTextColors(euiThemeContext),
+    backgroundColor = _euiCodeTextColors.backgroundColor,
+    color = _euiCodeTextColors.color;
+  return {
+    backgroundColor: backgroundColor,
+    color: color,
     inlineCodeColor: euiTheme.components.codeInlineColor,
     selectedBackgroundColor: euiTheme.components.codeBackgroundSelected,
     commentColor: euiTheme.components.codeCommentColor,