@elastic/eui 97.3.0 → 97.3.1-rc.0

package/lib/themes/amsterdam/global_styling/mixins/shadow.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useEuiSlightShadowHover = exports.useEuiShadowFlat = exports.useEuiShadow = exports.euiSlightShadowHover = exports.euiShadowXSmall = exports.euiShadowXLarge = exports.euiShadowSmall = exports.euiShadowMedium = exports.euiShadowLarge = exports.euiShadowFlat = exports.euiShadow = void 0;
 var _theme = require("../../../../services/theme");
 var _functions = require("../functions");
+var _global_styling = require("../../../../global_styling");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -17,38 +18,43 @@ var _functions = require("../functions");
 /**
  * euiSlightShadow
  */
-var euiShadowXSmall = exports.euiShadowXSmall = function euiShadowXSmall(_ref) {
+var euiShadowXSmall = exports.euiShadowXSmall = function euiShadowXSmall(_ref, options) {
   var euiTheme = _ref.euiTheme,
-    colorMode = _ref.colorMode;
-  var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    _color = _ref2.color;
-  var color = _color || euiTheme.colors.shadow;
+    colorMode = _ref.colorMode,
+    highContrastMode = _ref.highContrastMode;
+  if (highContrastMode) {
+    return options !== null && options !== void 0 && options.borderAllInHighContrastMode ? _highContrastBorderAll(euiTheme) : _highContrastBorderBottom(euiTheme);
+  }
+  var color = (options === null || options === void 0 ? void 0 : options.color) || euiTheme.colors.shadow;
   return "\nbox-shadow:\n  0 .8px .8px ".concat((0, _functions.getShadowColor)(color, 0.04, colorMode), ",\n  0 2.3px 2px ").concat((0, _functions.getShadowColor)(color, 0.03, colorMode), ";\n");
 };
 
 /**
  * bottomShadowSmall
  */
-var euiShadowSmall = exports.euiShadowSmall = function euiShadowSmall(_ref3) {
-  var euiTheme = _ref3.euiTheme,
-    colorMode = _ref3.colorMode;
-  var _ref4 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    _color = _ref4.color;
-  var color = _color || euiTheme.colors.shadow;
+var euiShadowSmall = exports.euiShadowSmall = function euiShadowSmall(_ref2, options) {
+  var euiTheme = _ref2.euiTheme,
+    colorMode = _ref2.colorMode,
+    highContrastMode = _ref2.highContrastMode;
+  if (highContrastMode) {
+    return options !== null && options !== void 0 && options.borderAllInHighContrastMode ? _highContrastBorderAll(euiTheme) : _highContrastBorderBottom(euiTheme);
+  }
+  var color = (options === null || options === void 0 ? void 0 : options.color) || euiTheme.colors.shadow;
   return "\nbox-shadow:\n  0 .7px 1.4px ".concat((0, _functions.getShadowColor)(color, 0.07, colorMode), ",\n  0 1.9px 4px ").concat((0, _functions.getShadowColor)(color, 0.05, colorMode), ",\n  0 4.5px 10px ").concat((0, _functions.getShadowColor)(color, 0.05, colorMode), ";\n");
 };
 
 /**
  * bottomShadowMedium
  */
-var euiShadowMedium = exports.euiShadowMedium = function euiShadowMedium(_ref5) {
-  var euiTheme = _ref5.euiTheme,
-    colorMode = _ref5.colorMode;
-  var _ref6 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    _color = _ref6.color,
-    property = _ref6.property;
-  var color = _color || euiTheme.colors.shadow;
-  if (property === 'filter') {
+var euiShadowMedium = exports.euiShadowMedium = function euiShadowMedium(_ref3, options) {
+  var euiTheme = _ref3.euiTheme,
+    colorMode = _ref3.colorMode,
+    highContrastMode = _ref3.highContrastMode;
+  if (highContrastMode) {
+    return options !== null && options !== void 0 && options.borderAllInHighContrastMode ? _highContrastBorderAll(euiTheme) : _highContrastBorderBottom(euiTheme);
+  }
+  var color = (options === null || options === void 0 ? void 0 : options.color) || euiTheme.colors.shadow;
+  if ((options === null || options === void 0 ? void 0 : options.property) === 'filter') {
     // Using only one drop-shadow filter instead of multiple is more performant & prevents Safari bugs
     return "filter: drop-shadow(0 5.7px 9px ".concat((0, _functions.getShadowColor)(color, 0.2, colorMode), ");");
   } else {
@@ -59,12 +65,14 @@ var euiShadowMedium = exports.euiShadowMedium = function euiShadowMedium(_ref5)
 /**
  * bottomShadow
  */
-var euiShadowLarge = exports.euiShadowLarge = function euiShadowLarge(_ref7) {
-  var euiTheme = _ref7.euiTheme,
-    colorMode = _ref7.colorMode;
-  var _ref8 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    _color = _ref8.color;
-  var color = _color || euiTheme.colors.shadow;
+var euiShadowLarge = exports.euiShadowLarge = function euiShadowLarge(_ref4, options) {
+  var euiTheme = _ref4.euiTheme,
+    colorMode = _ref4.colorMode,
+    highContrastMode = _ref4.highContrastMode;
+  if (highContrastMode) {
+    return options !== null && options !== void 0 && options.borderAllInHighContrastMode ? _highContrastBorderAll(euiTheme) : _highContrastBorderBottom(euiTheme);
+  }
+  var color = (options === null || options === void 0 ? void 0 : options.color) || euiTheme.colors.shadow;
   return "\nbox-shadow:\n  0 1px 5px ".concat((0, _functions.getShadowColor)(color, 0.1, colorMode), ",\n  0 3.6px 13px ").concat((0, _functions.getShadowColor)(color, 0.07, colorMode), ",\n  0 8.4px 23px ").concat((0, _functions.getShadowColor)(color, 0.06, colorMode), ",\n  0 23px 35px ").concat((0, _functions.getShadowColor)(color, 0.05, colorMode), ";\n");
 };
 
@@ -72,25 +80,30 @@ var euiShadowLarge = exports.euiShadowLarge = function euiShadowLarge(_ref7) {
  * bottomShadowLarge
  */
 
-var euiShadowXLarge = exports.euiShadowXLarge = function euiShadowXLarge(_ref9) {
-  var euiTheme = _ref9.euiTheme,
-    colorMode = _ref9.colorMode;
-  var _ref10 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    _color = _ref10.color,
-    reverse = _ref10.reverse;
-  var color = _color || euiTheme.colors.shadow;
+var euiShadowXLarge = exports.euiShadowXLarge = function euiShadowXLarge(_ref5, options) {
+  var _options$reverse;
+  var euiTheme = _ref5.euiTheme,
+    colorMode = _ref5.colorMode,
+    highContrastMode = _ref5.highContrastMode;
+  if (highContrastMode) {
+    return options !== null && options !== void 0 && options.borderAllInHighContrastMode ? _highContrastBorderAll(euiTheme) : _highContrastBorderBottom(euiTheme);
+  }
+  var color = (options === null || options === void 0 ? void 0 : options.color) || euiTheme.colors.shadow;
+  var reverse = (_options$reverse = options === null || options === void 0 ? void 0 : options.reverse) !== null && _options$reverse !== void 0 ? _options$reverse : false;
   return "\nbox-shadow:\n  0 ".concat(reverse ? '-' : '', "2.7px 9px ").concat((0, _functions.getShadowColor)(color, 0.13, colorMode), ",\n  0 ").concat(reverse ? '-' : '', "9.4px 24px ").concat((0, _functions.getShadowColor)(color, 0.09, colorMode), ",\n  0 ").concat(reverse ? '-' : '', "21.8px 43px ").concat((0, _functions.getShadowColor)(color, 0.08, colorMode), ";\n");
 };
 
 /**
  * slightShadowHover
  */
-var euiSlightShadowHover = exports.euiSlightShadowHover = function euiSlightShadowHover(_ref11) {
-  var euiTheme = _ref11.euiTheme,
-    colorMode = _ref11.colorMode;
-  var _ref12 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    _color = _ref12.color;
-  var color = _color || euiTheme.colors.shadow;
+var euiSlightShadowHover = exports.euiSlightShadowHover = function euiSlightShadowHover(_ref6, options) {
+  var euiTheme = _ref6.euiTheme,
+    colorMode = _ref6.colorMode,
+    highContrastMode = _ref6.highContrastMode;
+  if (highContrastMode) {
+    return options !== null && options !== void 0 && options.borderAllInHighContrastMode ? _highContrastBorderAll(euiTheme) : _highContrastBorderBottom(euiTheme);
+  }
+  var color = (options === null || options === void 0 ? void 0 : options.color) || euiTheme.colors.shadow;
   return "\nbox-shadow:\n  0 1px 5px ".concat((0, _functions.getShadowColor)(color, 0.1, colorMode), ",\n  0 3.6px 13px ").concat((0, _functions.getShadowColor)(color, 0.07, colorMode), ",\n  0 8.4px 23px ").concat((0, _functions.getShadowColor)(color, 0.06, colorMode), ",\n  0 23px 35px ").concat((0, _functions.getShadowColor)(color, 0.05, colorMode), ";\n");
 };
 var useEuiSlightShadowHover = exports.useEuiSlightShadowHover = function useEuiSlightShadowHover(color) {
@@ -106,12 +119,14 @@ var useEuiSlightShadowHover = exports.useEuiSlightShadowHover = function useEuiS
  * Similar to shadow medium but without the bottom depth.
  * Useful for popovers that drop UP rather than DOWN.
  */
-var euiShadowFlat = exports.euiShadowFlat = function euiShadowFlat(_ref13) {
-  var euiTheme = _ref13.euiTheme,
-    colorMode = _ref13.colorMode;
-  var _ref14 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    _color = _ref14.color;
-  var color = _color || euiTheme.colors.shadow;
+var euiShadowFlat = exports.euiShadowFlat = function euiShadowFlat(_ref7, options) {
+  var euiTheme = _ref7.euiTheme,
+    colorMode = _ref7.colorMode,
+    highContrastMode = _ref7.highContrastMode;
+  if (highContrastMode) {
+    return options !== null && options !== void 0 && options.borderAllInHighContrastMode ? _highContrastBorderAll(euiTheme) : _highContrastBorderBottom(euiTheme);
+  }
+  var color = (options === null || options === void 0 ? void 0 : options.color) || euiTheme.colors.shadow;
   return "\nbox-shadow:\n  0 0 .8px ".concat((0, _functions.getShadowColor)(color, 0.06, colorMode), ",\n  0 0 2px ").concat((0, _functions.getShadowColor)(color, 0.04, colorMode), ",\n  0 0 5px ").concat((0, _functions.getShadowColor)(color, 0.04, colorMode), ",\n  0 0 17px ").concat((0, _functions.getShadowColor)(color, 0.03, colorMode), ";\n");
 };
 var useEuiShadowFlat = exports.useEuiShadowFlat = function useEuiShadowFlat(color) {
@@ -122,29 +137,21 @@ var useEuiShadowFlat = exports.useEuiShadowFlat = function useEuiShadowFlat(colo
 };
 var euiShadow = exports.euiShadow = function euiShadow(euiThemeContext) {
   var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'l';
-  var _ref15 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
-    color = _ref15.color;
+  var options = arguments.length > 2 ? arguments[2] : undefined;
+  if (euiThemeContext.highContrastMode) {
+    return options !== null && options !== void 0 && options.borderAllInHighContrastMode ? _highContrastBorderAll(euiThemeContext.euiTheme) : _highContrastBorderBottom(euiThemeContext.euiTheme);
+  }
   switch (size) {
     case 'xs':
-      return euiShadowXSmall(euiThemeContext, {
-        color: color
-      });
+      return euiShadowXSmall(euiThemeContext, options);
     case 's':
-      return euiShadowSmall(euiThemeContext, {
-        color: color
-      });
+      return euiShadowSmall(euiThemeContext, options);
     case 'm':
-      return euiShadowMedium(euiThemeContext, {
-        color: color
-      });
+      return euiShadowMedium(euiThemeContext, options);
     case 'l':
-      return euiShadowLarge(euiThemeContext, {
-        color: color
-      });
+      return euiShadowLarge(euiThemeContext, options);
     case 'xl':
-      return euiShadowXLarge(euiThemeContext, {
-        color: color
-      });
+      return euiShadowXLarge(euiThemeContext, options);
     default:
       console.warn('Please provide a valid size option to useEuiShadow');
       return '';
@@ -157,4 +164,19 @@ var useEuiShadow = exports.useEuiShadow = function useEuiShadow() {
   return euiShadow(euiThemeContext, size, {
     color: color
   });
+};
+
+/**
+ * Internal utilities for replacing shadows with high contrast borders instead.
+ * NOTE: Windows' high contrast themes ignore *all* `box-shadow` CSS,
+ * so we have to use `border` CSS explicitly, not box-shadow
+ */
+
+var _highContrastBorderBottom = function _highContrastBorderBottom(_ref8) {
+  var border = _ref8.border;
+  return (0, _global_styling.logicalCSS)('border-bottom', border.thin);
+};
+var _highContrastBorderAll = function _highContrastBorderAll(_ref9) {
+  var border = _ref9.border;
+  return "border: ".concat(border.thin, ";");
 };

package/lib/themes/themes.js

@@ -14,12 +14,8 @@ var _theme = require("./amsterdam/theme");
  */
 
 var EUI_THEMES = exports.EUI_THEMES = [{
-  text: 'Light',
-  value: 'light',
-  provider: _theme.EuiThemeAmsterdam
-}, {
-  text: 'Dark',
-  value: 'dark',
+  text: 'Amsterdam',
+  value: _theme.AMSTERDAM_NAME_KEY,
   provider: _theme.EuiThemeAmsterdam
 }];
 var isDefaultTheme = exports.isDefaultTheme = function isDefaultTheme(name) {

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

@@ -12,7 +12,7 @@ import { logicalCSS, logicalTextAlignCSS } from '../../global_styling';
 var _avatarSize = function _avatarSize(_ref7) {
   var size = _ref7.size,
     fontSize = _ref7.fontSize;
-  return "\n    ".concat(logicalCSS('width', size), ";\n    ").concat(logicalCSS('height', size), ";\n    line-height: ").concat(size, ";\n    font-size: ").concat(fontSize, ";\n  ");
+  return "\n    ".concat(logicalCSS('width', size), ";\n    ").concat(logicalCSS('height', size), ";\n    font-size: ").concat(fontSize, ";\n  ");
 };
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "4wfy2n-none",
@@ -63,10 +63,11 @@ var _ref6 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 export var euiAvatarStyles = function euiAvatarStyles(_ref8) {
-  var euiTheme = _ref8.euiTheme;
+  var euiTheme = _ref8.euiTheme,
+    highContrastMode = _ref8.highContrastMode;
   return {
     // Base
-    euiAvatar: /*#__PURE__*/css("flex-shrink:0;display:inline-flex;justify-content:center;align-items:center;vertical-align:middle;background-size:cover;background-color:", euiTheme.colors.lightShade, ";", logicalTextAlignCSS('center'), " ", logicalCSS('overflow-x', 'hidden'), "font-weight:", euiTheme.font.weight.medium, ";;label:euiAvatar;"),
+    euiAvatar: /*#__PURE__*/css("flex-shrink:0;display:inline-flex;justify-content:center;align-items:center;vertical-align:middle;background-size:cover;background-color:", euiTheme.colors.lightShade, ";", highContrastMode ? "border: ".concat(euiTheme.border.width.thin, " solid transparent;") : '', " ", logicalTextAlignCSS('center'), " ", logicalCSS('overflow-x', 'hidden'), "font-weight:", euiTheme.font.weight.medium, ";;label:euiAvatar;"),
     // Variants
     plain: /*#__PURE__*/css("background-color:", euiTheme.colors.emptyShade, ";;label:plain;"),
     subdued: /*#__PURE__*/css("background-color:", euiTheme.colors.lightestShade, ";;label:subdued;"),

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

@@ -8,7 +8,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { logicalCSS, euiFocusRing, euiFontSizeFromScale, euiTextTruncate, mathWithUnits } from '../../../global_styling';
+import { logicalCSS, logicalSizeCSS, euiFocusRing, euiFontSizeFromScale, euiTextTruncate, mathWithUnits } from '../../../global_styling';
 import { euiBadgeColors } from '../color_utils';
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "l1nme7-middle",
@@ -38,31 +38,43 @@ export var euiBetaBadgeStyles = function euiBetaBadgeStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
     colorMode = euiThemeContext.colorMode;
   var badgeColors = euiBadgeColors(euiThemeContext);
+  var sizes = {
+    m: {
+      height: euiTheme.size.l,
+      padding: euiTheme.size.base
+    },
+    s: {
+      height: mathWithUnits(euiTheme.size.xs, function (x) {
+        return x + euiTheme.base;
+      }),
+      padding: euiTheme.size.m
+    }
+  };
+  var getLineHeight = function getLineHeight(height) {
+    return mathWithUnits([height, euiTheme.border.width.thin], function (x, y) {
+      return x - y * 2;
+    });
+  };
   return {
-    euiBetaBadge: /*#__PURE__*/css("display:inline-block;border-radius:", euiTheme.size.l, ";cursor:default;font-weight:", euiTheme.font.weight.bold, ";text-transform:uppercase;letter-spacing:0.05em;text-align:center;", euiTextTruncate(), " &:focus{", euiFocusRing(euiThemeContext, 'outset', {
+    euiBetaBadge: /*#__PURE__*/css("display:inline-block;border-radius:", euiTheme.size.l, ";border:", euiTheme.border.width.thin, " solid transparent;cursor:default;font-weight:", euiTheme.font.weight.bold, ";text-transform:uppercase;letter-spacing:0.05em;text-align:center;", euiTextTruncate(), " &:focus{", euiFocusRing(euiThemeContext, 'outset', {
       color: colorMode === 'DARK' ? euiTheme.colors.ghost : euiTheme.colors.ink
     }), ";};label:euiBetaBadge;"),
     // Colors
     accent: /*#__PURE__*/css(badgeColors.accentText, ";label:accent;"),
     subdued: /*#__PURE__*/css(badgeColors.subdued, ";label:subdued;"),
-    hollow: /*#__PURE__*/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__*/css("color:", badgeColors.hollow.color, ";background-color:", badgeColors.hollow.backgroundColor, ";border-color:", badgeColors.hollow.borderColor, ";;label:hollow;"),
     // Font sizes
-    m: /*#__PURE__*/css("font-size:", euiFontSizeFromScale('xs', euiTheme), ";line-height:", euiTheme.size.l, ";;label:m;"),
-    s: /*#__PURE__*/css("font-size:0.625rem;line-height:", mathWithUnits(euiTheme.size.xs, function (x) {
-      return x + euiTheme.base;
-    }), ";;label:s;"),
-    // Padding/width sizes
+    m: /*#__PURE__*/css("font-size:", euiFontSizeFromScale('xs', euiTheme), ";line-height:", getLineHeight(sizes.m.height), ";;label:m;"),
+    s: /*#__PURE__*/css("font-size:0.625rem;line-height:", getLineHeight(sizes.s.height), ";;label:s;"),
     badgeSizes: {
       default: {
-        m: "\n        ".concat(logicalCSS('padding-horizontal', euiTheme.size.base)),
-        s: "\n        ".concat(logicalCSS('padding-horizontal', euiTheme.size.m))
+        m: logicalCSS('padding-horizontal', sizes.m.padding),
+        s: logicalCSS('padding-horizontal', sizes.s.padding)
       },
       // When it's just an icon or a single letter, make the badge a circle
       circle: {
-        m: "\n          ".concat(logicalCSS('width', euiTheme.size.l), "\n        "),
-        s: "\n          ".concat(logicalCSS('width', mathWithUnits(euiTheme.size.xs, function (x) {
-          return x + euiTheme.base;
-        })), "\n        ")
+        m: logicalSizeCSS(sizes.m.height),
+        s: logicalSizeCSS(sizes.s.height)
       }
     },
     euiBetaBadge__icon: _ref3,

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

@@ -12,13 +12,12 @@ import { euiBadgeColors } from '../color_utils';
 export var euiNotificationBadgeStyles = function euiNotificationBadgeStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   var badgeColors = euiBadgeColors(euiThemeContext);
+  var borderWidth = euiTheme.border.width.thin;
   return {
-    euiNotificationBadge: /*#__PURE__*/css("flex-shrink:0;display:inline-block;vertical-align:middle;", logicalCSS('padding-horizontal', euiTheme.size.xs), " border-radius:", euiTheme.border.radius.small, ";cursor:default;font-size:", euiFontSizeFromScale('xs', euiTheme), ";font-weight:", euiTheme.font.weight.medium, ";", euiNumberFormat(euiThemeContext), " text-align:center;", euiCanAnimate, "{transition:all ", euiTheme.animation.fast, " ease-in;};label:euiNotificationBadge;"),
+    euiNotificationBadge: /*#__PURE__*/css("flex-shrink:0;display:inline-flex;justify-content:center;align-items:center;", logicalCSS('padding-horizontal', euiTheme.size.xs), " border-radius:", euiTheme.border.radius.small, ";border:", borderWidth, " solid transparent;overflow:hidden;cursor:default;font-size:", euiFontSizeFromScale('xs', euiTheme), ";font-weight:", euiTheme.font.weight.medium, ";", euiNumberFormat(euiThemeContext), " text-align:center;", euiCanAnimate, "{transition:all ", euiTheme.animation.fast, " ease-in;};label:euiNotificationBadge;"),
     // Sizes
-    s: /*#__PURE__*/css("line-height:", euiTheme.size.base, ";", logicalCSS('height', euiTheme.size.base), " ", logicalCSS('min-width', euiTheme.size.base), ";;label:s;"),
-    m: /*#__PURE__*/css("line-height:", mathWithUnits(euiTheme.size.xs, function (x) {
-      return x + euiTheme.base;
-    }), ";", logicalCSS('height', mathWithUnits(euiTheme.size.xs, function (x) {
+    s: /*#__PURE__*/css(logicalCSS('height', euiTheme.size.base), " ", logicalCSS('min-width', euiTheme.size.base), ";;label:s;"),
+    m: /*#__PURE__*/css(logicalCSS('height', mathWithUnits(euiTheme.size.xs, function (x) {
       return x + euiTheme.base;
     })), " ", logicalCSS('min-width', euiTheme.size.l), ";;label:m;"),
     // Colors

package/optimize/es/components/beacon/beacon.js

@@ -40,5 +40,13 @@ export var EuiBeacon = function EuiBeacon(_ref) {
     className: classes,
     css: cssStyles,
     style: beaconStyle
-  }, rest));
+  }, rest), ___EmotionJSX("svg", {
+    viewBox: "0 0 16 16",
+    role: "img",
+    "aria-hidden": "true"
+  }, ___EmotionJSX("circle", {
+    cx: "8",
+    cy: "8",
+    r: "8"
+  })));
 };

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

@@ -11,7 +11,7 @@ var _templateObject, _templateObject2;
 import { keyframes, css } from '@emotion/react';
 import { euiCanAnimate, logicalCSS, logicalSizeCSS } from '../../global_styling';
 var _colorCSS = function _colorCSS(color) {
-  return "\n    background-color: ".concat(color, ";\n    &:before,\n    &:after {\n      box-shadow: 0 0 1px 1px ").concat(color, ";\n    }\n  ");
+  return "\n    svg {\n      fill: ".concat(color, ";\n    }\n    &:before,\n    &:after {\n      box-shadow: 0 0 1px 1px ").concat(color, ";\n    }\n  ");
 };
 var euiBeaconPulseLarge = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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 = keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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"])));
@@ -19,7 +19,7 @@ export var euiBeaconStyles = function euiBeaconStyles(_ref) {
   var euiTheme = _ref.euiTheme;
   return {
     // Base
-    euiBeacon: /*#__PURE__*/css("position:relative;border-radius:50%;&::before,&::after{position:absolute;content:'';", logicalSizeCSS('100%', '100%'), " ", logicalCSS('left', 0), " ", logicalCSS('top', 0), " background-color:transparent;border-radius:50%;}&::before{transform:scale(1.6);opacity:0.4;}&::after{opacity:0;}", euiCanAnimate, "{&::before{animation:", euiBeaconPulseLarge, " 2.5s infinite ease-out;}&::after{animation:", euiBeaconPulseSmall, " 2.5s infinite ease-out 0.25s;}};label:euiBeacon;"),
+    euiBeacon: /*#__PURE__*/css("position:relative;display:flex;justify-content:center;border-radius:50%;svg{", logicalSizeCSS('100%'), ";}&::before,&::after{position:absolute;content:'';", logicalSizeCSS('100%'), " ", logicalCSS('left', 0), " ", logicalCSS('top', 0), " background-color:transparent;border-radius:50%;}&::before{transform:scale(1.6);opacity:0.4;}&::after{opacity:0;}", euiCanAnimate, "{&::before{animation:", euiBeaconPulseLarge, " 2.5s infinite ease-out;}&::after{animation:", euiBeaconPulseSmall, " 2.5s infinite ease-out 0.25s;}};label:euiBeacon;"),
     subdued: /*#__PURE__*/css(_colorCSS(euiTheme.colors.subduedText), ";label:subdued;"),
     primary: /*#__PURE__*/css(_colorCSS(euiTheme.colors.primary), ";label:primary;"),
     success: /*#__PURE__*/css(_colorCSS(euiTheme.colors.success), ";label:success;"),

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

@@ -9,16 +9,17 @@ var _templateObject;
  */
 
 import { css, keyframes } from '@emotion/react';
-import { euiCanAnimate } from '../../global_styling';
+import { euiCanAnimate, logicalCSS } from '../../global_styling';
 import { shade } from '../../services';
 import { euiShadowFlat } from '../../themes/amsterdam/global_styling/mixins';
 var euiBottomBarAppear = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    transform: translateY(100%);\n    opacity: 0;\n  }\n\n  100% {\n    transform: translateY(0%);\n    opacity: 1;\n  }\n"])));
 export var euiBottomBarStyles = function euiBottomBarStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   return {
     // Base
     // `color` is inherited from the wrapping `EuiThemeProvider colorMode="dark"`
-    euiBottomBar: /*#__PURE__*/css(euiShadowFlat(euiThemeContext), " background:", shade(euiTheme.colors.lightestShade, 0.5), ";", euiCanAnimate, "{animation:", euiBottomBarAppear, " ", euiTheme.animation.slow, " ", euiTheme.animation.resistance, ";};label:euiBottomBar;"),
+    euiBottomBar: /*#__PURE__*/css("background-color:", shade(euiTheme.colors.lightestShade, 0.5), ";", logicalCSS('border-top', euiTheme.border.thin), " ", highContrastMode ? '' : euiShadowFlat(euiThemeContext), " ", euiCanAnimate, "{animation:", euiBottomBarAppear, " ", euiTheme.animation.slow, " ", euiTheme.animation.resistance, ";};label:euiBottomBar;"),
     static: /*#__PURE__*/css(";label:static;"),
     // Default
     fixed: /*#__PURE__*/css("position:fixed;z-index:", Number(euiTheme.levels.header) - 2, ";;label:fixed;"),

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

@@ -38,7 +38,18 @@ export var euiBreadcrumbStyles = function euiBreadcrumbStyles(euiThemeContext) {
     isTruncated: _ref2,
     isCollapsed: _ref,
     // Types
-    page: /*#__PURE__*/css("&:not(:last-of-type){&::after{background:", euiTheme.colors.lightShade, ";content:'';flex-shrink:0;", logicalCSS('margin-top', euiTheme.size.xs), " ", logicalCSS('margin-bottom', 0), " ", logicalCSS('margin-horizontal', euiTheme.size.s), " ", logicalCSS('height', euiTheme.size.base), " ", logicalCSS('width', '1px'), " transform:translateY(-1px) rotate(15deg);}};label:page;"),
-    application: /*#__PURE__*/css("&:not(:last-of-type){", logicalCSS('margin-right', "-".concat(euiTheme.size.xs)), ";};label:application;")
+    page: /*#__PURE__*/css("&:not(:last-of-type){&::after{content:'';flex-shrink:0;", logicalCSS('margin-top', euiTheme.size.xs), " ", logicalCSS('margin-bottom', 0), " ", logicalCSS('margin-horizontal', euiTheme.size.s), " ", logicalCSS('height', euiTheme.size.base), " ", logicalCSS('border-right', euiTheme.border.thin), " transform:translateY(-", euiTheme.border.width.thin, ") rotate(15deg);}};label:page;"),
+    application: /*#__PURE__*/css("&:not(:last-of-type){", logicalCSS('margin-right', "-".concat(euiTheme.size.xs)), ";}", _applicationHighContrastBorders(euiThemeContext), ";;label:application;")
   };
+};
+var _applicationHighContrastBorders = function _applicationHighContrastBorders(_ref3) {
+  var euiTheme = _ref3.euiTheme,
+    highContrastMode = _ref3.highContrastMode;
+  if (!highContrastMode) return '';
+  var borderWidth = euiTheme.border.width.thin;
+  var borderColor = euiTheme.border.color;
+
+  // Windows high contrast themes ignore background-color, which makes application
+  // breadcrumbs hard to distinguish - these border/filter workarounds restore visual affordance
+  return "\n    @media (forced-colors: active) {\n      .euiBreadcrumb__content {\n        border: ".concat(euiTheme.border.thin, ";\n      }\n\n      &:first-child:not(:only-child) {\n        filter: drop-shadow(").concat(borderWidth, " 0 0 ").concat(borderColor, ");\n      }\n      &:last-child:not(:only-child) {\n        filter: drop-shadow(-").concat(borderWidth, " 0 0 ").concat(borderColor, ");\n      }\n      &:not(:only-child, :first-child, :last-child) {\n        filter:\n          drop-shadow(").concat(borderWidth, " 0 0 ").concat(borderColor, ")\n          drop-shadow(-").concat(borderWidth, " 0  0 ").concat(borderColor, ");\n      }\n    }\n  ");
 };

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

@@ -8,7 +8,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { logicalCSS } from '../../../global_styling';
+import { logicalCSS, mathWithUnits } from '../../../global_styling';
 import { euiFormVariables } from '../../form/form.styles';
 export var euiButtonGroupStyles = {
   euiButtonGroup: /*#__PURE__*/css("display:inline-block;", logicalCSS('max-width', '100%'), " position:relative;;label:euiButtonGroup;"),
@@ -22,19 +22,23 @@ export var euiButtonGroupStyles = {
   }
 };
 export var euiButtonGroupButtonsStyles = function euiButtonGroupButtonsStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   var _euiFormVariables = euiFormVariables(euiThemeContext),
     controlCompressedHeight = _euiFormVariables.controlCompressedHeight,
     controlCompressedBorderRadius = _euiFormVariables.controlCompressedBorderRadius,
     backgroundColor = _euiFormVariables.backgroundColor,
     borderColor = _euiFormVariables.borderColor;
+  var _highContrastAffordance = highContrastMode ? "\n      & > .euiButtonGroupButton:not(:first-child),\n      & > .euiButtonGroup__tooltipWrapper:not(:first-child) .euiButtonGroupButton {\n        ".concat(logicalCSS('border-left', 'none'), "\n      }\n\n      /* Target Windows high contrast themes, which ignore background-color\n       * and make selections difficult to distinguish */\n      @media (forced-colors: active) {\n        .euiButtonGroupButton-isSelected {\n          ").concat(logicalCSS('border-bottom-width', mathWithUnits(euiTheme.border.width.thick, function (x) {
+    return x * 1.5;
+  })), "\n        }\n      }\n      ") : '';
   return {
     // Base
     euiButtonGroup__buttons: /*#__PURE__*/css(logicalCSS('max-width', '100%'), " display:flex;;label:euiButtonGroup__buttons;"),
     fullWidth: /*#__PURE__*/css(logicalCSS('width', '100%'), " .euiButtonGroupButton,.euiButtonGroup__tooltipWrapper{flex:1;", logicalCSS('width', '100%'), ";};label:fullWidth;"),
     // Sizes
-    m: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.medium, ";;label:m;"),
-    s: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.small, ";;label:s;"),
+    m: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.medium, ";", _highContrastAffordance, ";;label:m;"),
+    s: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.small, ";", _highContrastAffordance, ";;label:s;"),
     compressed: /*#__PURE__*/css(logicalCSS('height', controlCompressedHeight), " background-color:", backgroundColor, ";border:", euiTheme.border.width.thin, " solid ", borderColor, ";border-radius:", controlCompressedBorderRadius, ";;label:compressed;")
   };
 };

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

@@ -34,7 +34,8 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 export var euiButtonGroupButtonStyles = function euiButtonGroupButtonStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   var _euiFormVariables = euiFormVariables(euiThemeContext),
     controlCompressedHeight = _euiFormVariables.controlCompressedHeight,
     controlCompressedBorderRadius = _euiFormVariables.controlCompressedBorderRadius;
@@ -53,8 +54,8 @@ export var euiButtonGroupButtonStyles = function euiButtonGroupButtonStyles(euiT
       uncompressed: /*#__PURE__*/css("&:is(.euiButtonGroupButton-isSelected){font-weight:", euiTheme.font.weight.bold, ";}&:focus-visible{", euiOutline(euiThemeContext, 'inset', euiTheme.colors.fullShade), ";};label:uncompressed;"),
       get borders() {
         var selectors = '.euiButtonGroupButton-isSelected, .euiButtonGroup__tooltipWrapper-isSelected';
-        var selectedColor = transparentize(euiTheme.colors.emptyShade, 0.2);
-        var unselectedColor = transparentize(euiTheme.colors.fullShade, 0.1);
+        var selectedColor = transparentize(euiTheme.colors.emptyShade, highContrastMode ? 1 : 0.2);
+        var unselectedColor = transparentize(euiTheme.colors.fullShade, highContrastMode ? 1 : 0.1);
         var borderWidth = euiTheme.border.width.thin;
 
         // "Borders" between buttons should be present between two of the same colored buttons,
@@ -73,9 +74,10 @@ export var euiButtonGroupButtonStyles = function euiButtonGroupButtonStyles(euiT
       return x * 2;
     }), ";background-clip:content-box;border-radius:", mathWithUnits([controlCompressedBorderRadius, euiTheme.border.width.thin], function (x, y) {
       return x + y;
-    }), ";font-weight:", euiTheme.font.weight.regular, ";&:is(.euiButtonGroupButton-isSelected){font-weight:", euiTheme.font.weight.semiBold, ";};label:compressed;"),
+    }), ";font-weight:", euiTheme.font.weight.regular, ";&:is(.euiButtonGroupButton-isSelected){font-weight:", euiTheme.font.weight.semiBold, ";}", highContrastMode ? // Mac vs Windows high contrast modes - Mac shows background colors which is sufficient affordance, Windows does not and needs the default button border
+    "@media (forced-colors: none) {\n            border: none;\n          }" : '', ";;label:compressed;"),
     // States
-    disabledAndSelected: /*#__PURE__*/css("color:", makeDisabledContrastColor(euiTheme.colors.disabledText)(euiTheme.colors.disabled), ";background-color:", euiTheme.colors.disabled, ";;label:disabledAndSelected;"),
+    disabledAndSelected: /*#__PURE__*/css("color:", makeDisabledContrastColor(euiTheme.colors.disabledText)(euiTheme.colors.disabled), ";background-color:", euiTheme.colors.disabled, ";", highContrastMode ? "border: ".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.disabled, ";") : '', ";;label:disabledAndSelected;"),
     // Tooltip anchor wrapper
     tooltipWrapper: _ref,
     // Content wrapper

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

@@ -38,9 +38,11 @@ var _ref5 = process.env.NODE_ENV === "production" ? {
 };
 export var euiCodeBlockStyles = function euiCodeBlockStyles(euiThemeContext) {
   var codeSyntaxVariables = euiCodeSyntaxVariables(euiThemeContext);
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
+  var highContrastBorder = "\n    /* EuiPanels always have a border in high contrast mode, no need to double up */\n    /* Border must be on the child <pre> to play nicely with EuiText's <pre> styles */\n    &:not(.euiPanel > *) .euiCodeBlock__pre {\n      border: ".concat(euiTheme.border.thin, ";\n    }");
   return {
-    euiCodeBlock: /*#__PURE__*/css("max-inline-size:100%;display:block;position:relative;background:", codeSyntaxVariables.backgroundColor, ";", codeSyntaxVariables.tokensCss, ";;label:euiCodeBlock;"),
+    euiCodeBlock: /*#__PURE__*/css("max-inline-size:100%;display:block;position:relative;background:", codeSyntaxVariables.backgroundColor, ";", highContrastMode ? highContrastBorder : '', " ", codeSyntaxVariables.tokensCss, ";;label:euiCodeBlock;"),
     // Font size
     s: /*#__PURE__*/css(euiFontSize(euiThemeContext, 'xs'), ";;label:s;"),
     m: /*#__PURE__*/css(euiFontSize(euiThemeContext, 's'), ";;label:m;"),

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

@@ -15,6 +15,8 @@ export var euiCodeBlockAnnotationsStyles = function euiCodeBlockAnnotationsStyle
   });
   return {
     euiCodeBlockAnnotation: /*#__PURE__*/css("position:absolute;", logicalCSS('right', 0), " ", logicalCSS('top', '50%'), " transform:translate(50%, -50%);line-height:1;;label:euiCodeBlockAnnotation;"),
-    euiCodeBlockAnnotation__buttonIcon: /*#__PURE__*/css(logicalSizeCSS(buttonIconSize), " display:flex;align-items:center;justify-content:center;background-color:", euiTheme.colors.primary, ";border-radius:50%;;label:euiCodeBlockAnnotation__buttonIcon;")
+    euiCodeBlockAnnotation__buttonIcon: /*#__PURE__*/css(logicalSizeCSS(buttonIconSize), " display:flex;align-items:center;justify-content:center;border:", mathWithUnits(buttonIconSize, function (x) {
+      return x / 2;
+    }), " solid ", euiTheme.colors.primary, ";border-radius:50%;;label:euiCodeBlockAnnotation__buttonIcon;")
   };
 };

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

@@ -15,12 +15,21 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/css';
-import { euiBackgroundColor } from '../../global_styling';
+import { euiBackgroundColor, mathWithUnits } from '../../global_styling';
 // Note: These styles must be in a separate file due to using `css` from `@emotion/css`
 // (i.e., applying styles in vanilla JS / directly to DOM nodes instead of React)
 
 export var 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;
+  var highlightWidth = highContrastMode ? mathWithUnits(euiTheme.border.width.thick, function (x) {
+    return x * 1.5;
+  }) : euiTheme.border.width.thick;
+  var highlightOffset = mathWithUnits([lineMargins, lineWidth, highlightWidth], function (x, y, z) {
+    return x + y - z;
+  });
   return {
     euiCodeBlock__line: /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
       name: "yn676d-euiCodeBlock__line",
@@ -39,11 +48,11 @@ export var euiCodeBlockLineStyles = function euiCodeBlockLineStyles(euiThemeCont
       toString: _EMOTION_STRINGIFIED_CSS_ERROR__
     }),
     lineText: {
-      euiCodeBlock__lineText: /*#__PURE__*/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__*/css("background:", euiBackgroundColor(euiThemeContext, 'primary'), ";border-inline-start:", euiTheme.border.width.thick, " solid ", euiTheme.colors.primary, ";;label:isHighlighted;")
+      euiCodeBlock__lineText: /*#__PURE__*/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__*/css("background:", euiBackgroundColor(euiThemeContext, 'primary'), ";border-inline-start:", highlightWidth, " solid ", euiTheme.colors.primary, ";padding-inline-start:", highlightOffset, ";;label:isHighlighted;")
     },
     lineNumber: {
-      euiCodeBlock__lineNumberWrapper: /*#__PURE__*/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__lineNumberWrapper: /*#__PURE__*/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__*/css("color:", euiTheme.colors.subduedText, ";text-align:end;display:block;&::before{content:attr(data-line-number);};label:euiCodeBlock__lineNumber;")
     }
   };

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

@@ -8,14 +8,23 @@
 
 import { makeHighContrastColor, euiPaletteColorBlind } from '../../services';
 var visColors = euiPaletteColorBlind();
+export var euiCodeTextColors = function euiCodeTextColors(_ref) {
+  var euiTheme = _ref.euiTheme;
+  return {
+    backgroundColor: euiTheme.colors.lightestShade,
+    color: euiTheme.colors.text
+  };
+};
 
 // These variables are computationally expensive - do not call them outside `useEuiMemoizedStyles`
-export var euiCodeSyntaxVariables = function euiCodeSyntaxVariables(_ref) {
-  var euiTheme = _ref.euiTheme;
-  var backgroundColor = euiTheme.colors.lightestShade;
+export var euiCodeSyntaxVariables = function euiCodeSyntaxVariables(euiThemeContext) {
+  var _euiCodeTextColors = euiCodeTextColors(euiThemeContext),
+    backgroundColor = _euiCodeTextColors.backgroundColor,
+    color = _euiCodeTextColors.color;
+  var euiTheme = euiThemeContext.euiTheme;
   return {
     backgroundColor: backgroundColor,
-    color: makeHighContrastColor(euiTheme.colors.text)(backgroundColor),
+    color: color,
     inlineCodeColor: makeHighContrastColor(visColors[3])(backgroundColor),
     selectedBackgroundColor: 'inherit',
     commentColor: makeHighContrastColor(euiTheme.colors.subduedText)(backgroundColor),

package/optimize/es/components/color_picker/color_palette_display/color_palette_display.styles.js

@@ -10,10 +10,10 @@ import { css } from '@emotion/react';
 import { transparentize } from '../../../services';
 import { logicalCSS } from '../../../global_styling';
 export var euiColorPaletteDisplayStyles = function euiColorPaletteDisplayStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
-
-  // Border is a pseudo element with transparency
-  var border = "".concat(euiTheme.border.width.thin, " solid ").concat(transparentize(euiTheme.colors.darkestShade, 0.2));
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
+  var border = highContrastMode ? euiTheme.border.thin : // Border is a pseudo element with transparency
+  "".concat(euiTheme.border.width.thin, " solid ").concat(transparentize(euiTheme.colors.darkestShade, 0.2));
   return {
     euiColorPaletteDisplay: /*#__PURE__*/css("position:relative;display:flex;flex-direction:row;overflow:hidden;&::after{content:'';position:absolute;inset:0;pointer-events:none;border:", border, ";border-radius:inherit;};label:euiColorPaletteDisplay;"),
     // Sizes