@elastic/eui 100.0.0 → 101.0.0

package/es/components/form/switch/switch.styles.js

@@ -9,19 +9,21 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css } from '@emotion/react';
 import { euiCanAnimate, euiFocusRing, euiFontSize, logicalCSS, logicalSizeCSS, mathWithUnits } from '../../../global_styling';
+import { highContrastModeStyles, preventForcedColors } from '../../../global_styling/functions/high_contrast';
 import { euiFormCustomControlVariables } from '../form.styles';
 var euiSwitchVars = function euiSwitchVars(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   var formVars = euiFormCustomControlVariables(euiThemeContext);
   var colors = {
     on: euiTheme.components.switchBackgroundOn,
-    off: euiTheme.components.switchBackgroundOff,
+    off: highContrastMode ? euiTheme.colors.darkShade : euiTheme.components.switchBackgroundOff,
     disabled: formVars.colors.disabled,
     thumb: formVars.colors.selectedIcon,
     thumbDisabled: euiTheme.components.switchThumbBackgroundDisabled,
-    thumbBorder: euiTheme.components.switchThumbBorderOff,
-    thumbBorderOn: euiTheme.components.switchThumbBorderOn,
-    thumbBorderDisabled: formVars.colors.disabledBorder,
+    thumbBorder: highContrastMode ? euiTheme.border.color : euiTheme.components.switchThumbBorderOff,
+    thumbBorderOn: highContrastMode ? euiTheme.border.color : euiTheme.components.switchThumbBorderOn,
+    thumbBorderDisabled: highContrastMode ? euiTheme.colors.borderBaseDisabled : formVars.colors.disabledBorder,
     iconDisabled: euiTheme.components.switchIconDisabled
   };
   var sizes = {
@@ -80,7 +82,7 @@ var euiSwitchVars = function euiSwitchVars(euiThemeContext) {
     label: label
   };
 };
-var _ref2 = process.env.NODE_ENV === "production" ? {
+var _ref = process.env.NODE_ENV === "production" ? {
   name: "b86pnw-disabled",
   styles: "cursor:not-allowed;label:disabled;"
 } : {
@@ -88,7 +90,7 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   styles: "cursor:not-allowed;label:disabled;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var _ref3 = process.env.NODE_ENV === "production" ? {
+var _ref2 = process.env.NODE_ENV === "production" ? {
   name: "eg68pp-euiSwitch",
   styles: "position:relative;display:inline-flex;align-items:flex-start;/* Required for inline-flex CSS to not render an extra 2-3px of strut height\n       * @see https://stackoverflow.com/a/27536461/4294462 */vertical-align:middle;label:euiSwitch;"
 } : {
@@ -99,10 +101,10 @@ var _ref3 = process.env.NODE_ENV === "production" ? {
 export var euiSwitchStyles = function euiSwitchStyles(euiThemeContext) {
   var switchVars = euiSwitchVars(euiThemeContext);
   return {
-    euiSwitch: _ref3,
+    euiSwitch: _ref2,
     // Skip css`` to avoid generating an extra Emotion className
     enabled: "\n      cursor: pointer;\n    ",
-    disabled: _ref2,
+    disabled: _ref,
     button: buttonStyles(euiThemeContext, switchVars),
     // The track body must be separate from the button wrapper, because the
     // icons have their overflow hidden outside the button, but the thumb doesn't
@@ -125,32 +127,39 @@ var buttonStyles = function buttonStyles(euiThemeContext, switchVars) {
     mini: /*#__PURE__*/css(logicalSizeCSS(mini.width, mini.height), " border-radius:", mini.height, ";;label:mini;")
   };
 };
-var _ref = process.env.NODE_ENV === "production" ? {
-  name: "19cwu6v-euiSwitch__body",
-  styles: "position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;label:euiSwitch__body;"
-} : {
-  name: "19cwu6v-euiSwitch__body",
-  styles: "position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;label:euiSwitch__body;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var bodyStyles = function bodyStyles(_ref4, _ref5) {
-  var euiTheme = _ref4.euiTheme;
-  var colors = _ref5.colors;
+var bodyStyles = function bodyStyles(euiThemeContext, _ref3) {
+  var colors = _ref3.colors;
+  var euiTheme = euiThemeContext.euiTheme;
+
+  // This is probably very extra, but the visual weight of the default
+  // disabled custom control feels different in light mode depending
+  // on the size of the switch, so I'm tinting it based on that.
+  // Gotta justify my stupidly expensive art degree!
+  var _disabledStyles = function _disabledStyles(color) {
+    return /*#__PURE__*/css("label:disabled;background-color:", color, ";", highContrastModeStyles(euiThemeContext, {
+      preferred: "border: ".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.borderBaseDisabled, ";")
+    }), ";");
+  };
   return {
-    euiSwitch__body: _ref,
-    on: /*#__PURE__*/css("background-color:", colors.on, ";;label:on;"),
+    euiSwitch__body: /*#__PURE__*/css("position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;", highContrastModeStyles(euiThemeContext, {
+      forced: "border: ".concat(euiTheme.border.thin, ";")
+    }), ";;label:euiSwitch__body;"),
+    on: /*#__PURE__*/css(highContrastModeStyles(euiThemeContext, {
+      none: "\n          background-color: ".concat(colors.on, ";\n        "),
+      forced: "\n          background-color: ".concat(euiTheme.border.color, ";\n          ").concat(preventForcedColors(euiThemeContext), "\n        ")
+    }), ";label:on;"),
     off: /*#__PURE__*/css("background-color:", colors.off, ";;label:off;"),
     disabled: {
-      uncompressed: /*#__PURE__*/css("background-color:", euiTheme.components.switchUncompressedBackgroundDisabled, ";;label:uncompressed;"),
-      compressed: /*#__PURE__*/css("background-color:", euiTheme.components.switchCompressedBackgroundDisabled, ";;label:compressed;"),
-      mini: /*#__PURE__*/css("background-color:", euiTheme.components.switchMiniBackgroundDisabled, ";;label:mini;")
+      uncompressed: _disabledStyles(euiTheme.components.switchUncompressedBackgroundDisabled),
+      compressed: _disabledStyles(euiTheme.components.switchCompressedBackgroundDisabled),
+      mini: _disabledStyles(euiTheme.components.switchMiniBackgroundDisabled)
     }
   };
 };
-var iconStyles = function iconStyles(_ref6, _ref7) {
-  var euiTheme = _ref6.euiTheme;
-  var colors = _ref7.colors,
-    animation = _ref7.animation;
+var iconStyles = function iconStyles(_ref4, _ref5) {
+  var euiTheme = _ref4.euiTheme;
+  var colors = _ref5.colors,
+    animation = _ref5.animation;
   return {
     euiSwitch__icons: /*#__PURE__*/css("position:absolute;", logicalCSS('vertical', 0), " ", logicalCSS('left', '-50%'), " ", logicalCSS('width', '200%'), " display:flex;justify-content:space-around;align-items:center;", logicalCSS('padding-horizontal', euiTheme.size.xs), " ", euiCanAnimate, "{transition-property:inset-inline-start;transition-duration:", animation.speed, ";transition-timing-function:", animation.easing, ";};label:euiSwitch__icons;"),
     on: /*#__PURE__*/css(logicalCSS('left', '-25%'), ";;label:on;"),
@@ -159,8 +168,8 @@ var iconStyles = function iconStyles(_ref6, _ref7) {
     disabled: /*#__PURE__*/css("color:", colors.iconDisabled, ";;label:disabled;")
   };
 };
-var thumbStyles = function thumbStyles(_ref8, switchVars) {
-  var euiTheme = _ref8.euiTheme;
+var thumbStyles = function thumbStyles(_ref6, switchVars) {
+  var euiTheme = _ref6.euiTheme;
   var sizes = switchVars.sizes,
     colors = switchVars.colors,
     animation = switchVars.animation;
@@ -206,9 +215,9 @@ var thumbStyles = function thumbStyles(_ref8, switchVars) {
     }
   };
 };
-var labelStyles = function labelStyles(euiThemeContext, _ref9) {
-  var sizes = _ref9.sizes,
-    label = _ref9.label;
+var labelStyles = function labelStyles(euiThemeContext, _ref7) {
+  var sizes = _ref7.sizes,
+    label = _ref7.label;
   var uncompressed = sizes.uncompressed,
     compressed = sizes.compressed,
     mini = sizes.mini;

package/es/components/header/header.styles.js

@@ -45,7 +45,8 @@ export var euiHeaderStyles = function euiHeaderStyles(euiThemeContext) {
  */
 import { euiFormVariables } from '../form/form.styles';
 var euiHeaderDarkStyles = function euiHeaderDarkStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   var _euiFormVariables = euiFormVariables(euiThemeContext),
     controlPlaceholderText = _euiFormVariables.controlPlaceholderText;
   var backgroundColor = euiTheme.components.headerDarkBackground;
@@ -56,5 +57,5 @@ var euiHeaderDarkStyles = function euiHeaderDarkStyles(euiThemeContext) {
     borderColor: euiTheme.components.headerDarkSearchBorderColor,
     placeholderColor: makeHighContrastColor(controlPlaceholderText, 8)(backgroundColor)
   };
-  return "\n    background-color: ".concat(backgroundColor, ";\n\n    .euiHeaderLogo__text,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      color: ").concat(euiTheme.colors.ghost, ";\n    }\n\n    .euiHeaderLink-isActive {\n      color: ").concat(makeHighContrastColor(euiTheme.colors.primary)(backgroundColor), ";\n    }\n\n    .euiHeaderLogo,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      &:focus {\n        background-color: ").concat(euiTheme.components.headerDarkSectionItemBackgroundFocus, ";\n      }\n    }\n\n    .euiHeaderSectionItemButton__notification--badge {\n      box-shadow: 0 0 0 ").concat(euiTheme.border.width.thin, " ").concat(backgroundColor, ";\n    }\n\n    .euiHeaderSectionItemButton__notification--dot {\n      stroke: ").concat(backgroundColor, ";\n    }\n\n    .euiSelectableTemplateSitewide .euiFormControlLayout {\n      background-color: transparent;\n\n      input {\n        box-shadow: inset 0 0 0 ").concat(euiTheme.border.width.thin, " ").concat(selectableSitewide.borderColor, ";\n      }\n\n      &--group {\n        border-color: ").concat(euiTheme.components.headerDarkSearchBorderColor, ";\n\n        input {\n          box-shadow: none;\n        }\n      }\n\n      &:not(:focus-within) {\n        /* Increase contrast of filled text to be more than placeholder text */\n        color: ").concat(selectableSitewide.color, ";\n\n        input {\n          /* Increase contrast of placeholder text */\n          &::placeholder {\n            color: ").concat(selectableSitewide.placeholderColor, ";\n          }\n\n          /* Inherit color from form control layout */\n          color: inherit;\n          background-color: transparent;\n        }\n\n        .euiFormControlLayout__append,\n        .euiFormControlLayout__prepend {\n          background-color: transparent;\n        }\n\n        .euiFormLabel {\n          color: inherit;\n        }\n      }\n    }\n  ");
+  return "\n    background-color: ".concat(backgroundColor, ";\n\n    .euiHeaderLogo__text,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      color: ").concat(euiTheme.colors.ghost, ";\n    }\n\n    .euiHeaderLink-isActive {\n      color: ").concat(makeHighContrastColor(euiTheme.colors.primary)(backgroundColor), ";\n    }\n\n    .euiHeaderLogo,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      &:focus {\n        background-color: ").concat(euiTheme.components.headerDarkSectionItemBackgroundFocus, ";\n      }\n    }\n\n    .euiHeaderSectionItemButton__notification--badge {\n      box-shadow: 0 0 0 ").concat(euiTheme.border.width.thin, " ").concat(backgroundColor, ";\n    }\n\n    .euiHeaderSectionItemButton__notification--dot {\n      stroke: ").concat(backgroundColor, ";\n    }\n\n    .euiSelectableTemplateSitewide .euiFormControlLayout {\n      background-color: transparent;\n\n      input {\n        box-shadow: inset 0 0 0 ").concat(euiTheme.border.width.thin, " ").concat(selectableSitewide.borderColor, ";\n      }\n\n      &--group {\n        border-color: ").concat(highContrastMode ? euiTheme.border.color : euiTheme.components.headerDarkSearchBorderColor, ";\n\n        input {\n          box-shadow: none;\n        }\n      }\n\n      &:not(:focus-within) {\n        /* Increase contrast of filled text to be more than placeholder text */\n        color: ").concat(selectableSitewide.color, ";\n\n        input {\n          /* Increase contrast of placeholder text */\n          &::placeholder {\n            color: ").concat(selectableSitewide.placeholderColor, ";\n          }\n\n          /* Inherit color from form control layout */\n          color: inherit;\n          background-color: transparent;\n        }\n\n        .euiFormControlLayout__append,\n        .euiFormControlLayout__prepend {\n          background-color: transparent;\n        }\n\n        .euiFormLabel {\n          color: inherit;\n        }\n      }\n    }\n  ");
 };

package/es/components/horizontal_rule/horizontal_rule.styles.js

@@ -8,10 +8,15 @@
 
 import { css } from '@emotion/react';
 import { logicalCSS } from '../../global_styling';
-export var euiHorizontalRuleStyles = function euiHorizontalRuleStyles(_ref) {
-  var euiTheme = _ref.euiTheme;
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
+export var euiHorizontalRuleStyles = function euiHorizontalRuleStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiHorizontalRule: /*#__PURE__*/css("border:none;", logicalCSS('height', euiTheme.border.width.thin), " background-color:", euiTheme.border.color, ";flex-shrink:0;flex-grow:0;;label:euiHorizontalRule;"),
+    euiHorizontalRule: /*#__PURE__*/css("border:none;", highContrastModeStyles(euiThemeContext, {
+      none: "\n          ".concat(logicalCSS('height', euiTheme.border.width.thin), "\n          background-color: ").concat(euiTheme.border.color, ";\n        "),
+      // Windows high contrast themes ignore background colors
+      forced: logicalCSS('border-bottom', euiTheme.border.thin)
+    }), "flex-shrink:0;flex-grow:0;;label:euiHorizontalRule;"),
     // Sizes
     full: /*#__PURE__*/css(logicalCSS('width', '100%'), ";;label:full;"),
     half: /*#__PURE__*/css(logicalCSS('width', '50%'), " ", logicalCSS('margin-horizontal', 'auto'), ";;label:half;"),

package/es/components/i18n/i18n.js

@@ -45,7 +45,7 @@ function lookupToken(options) {
   }
   var children = processStringToChildren(renderable, values, i18nMappingFunc);
   if (typeof children === 'string') {
-    // likewise, `processStringToChildren` returns a string or ReactChild[] depending on
+    // likewise, `processStringToChildren` returns a string or ReactNode[] depending on
     // the type of `values`, so we will make the assumption that the default value is correct.
     return children;
   }

package/es/components/i18n/i18n_util.js

@@ -23,7 +23,7 @@ function hasPropName(child) {
  * @param {string} input
  * @param {RenderableValues} values
  * @param {Function} i18nMappingFunc
- * @returns {string | React.ReactChild[]}
+ * @returns {string | ReactNode[]}
  */
 export function processStringToChildren(input, values, i18nMappingFunc) {
   var children = [];

package/es/components/icon/icon.styles.js

@@ -57,7 +57,7 @@ export var euiIconStyles = function euiIconStyles(_ref3) {
     xxl: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size.xxl), ";label:xxl;"),
     // Variants
     // App icons are two-toned. This provides the base color.
-    app: /*#__PURE__*/css("fill:", euiTheme.colors.text, ";.euiIcon__fillSecondary{fill:", euiTheme.colors.textSuccess, ";};label:app;"),
+    app: /*#__PURE__*/css("fill:", euiTheme.colors.textParagraph, ";.euiIcon__fillSecondary{fill:", euiTheme.colors.textSuccess, ";};label:app;"),
     logo: /*#__PURE__*/css(";label:logo;"),
     // Loading states
     isLoading: /*#__PURE__*/css("opacity:", iconLoadingOpacity, ";background-color:currentColor;border-radius:", euiTheme.border.radius.small, ";;label:isLoading;"),

package/es/components/image/image.styles.js

@@ -9,12 +9,17 @@
 import { css } from '@emotion/react';
 import { euiShadow } from '@elastic/eui-theme-common';
 import { logicalCSS } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 export var euiImageStyles = function euiImageStyles(euiThemeContext) {
   return {
     euiImage: /*#__PURE__*/css("vertical-align:middle;", logicalCSS('max-width', '100%'), " &,[class*='euiText'] &{", logicalCSS('margin-bottom', 0), ";};label:euiImage;"),
     // Variations
-    isFullScreen: /*#__PURE__*/css("position:relative;", logicalCSS('max-height', '80vh'), " ", logicalCSS('max-width', '80vw'), ";;label:isFullScreen;"),
-    hasShadow: /*#__PURE__*/css(euiShadow(euiThemeContext, 's'), ";;label:hasShadow;"),
+    isFullScreen: /*#__PURE__*/css("position:relative;", logicalCSS('max-height', '80vh'), " ", logicalCSS('max-width', '80vw'), " ", highContrastModeStyles(euiThemeContext, {
+      preferred: "border: ".concat(euiThemeContext.euiTheme.border.thin, ";")
+    }), ";;label:isFullScreen;"),
+    hasShadow: /*#__PURE__*/css(euiShadow(euiThemeContext, 's', {
+      borderAllInHighContrastMode: true
+    }), ";;label:hasShadow;"),
     // Sizes
     // These sizes are mostly suggestions. Don't look too hard for meaning in their values.
     // Size is applied to the image, rather than the wrapper figure to work better with floats

package/es/components/image/image_button.styles.js

@@ -16,8 +16,12 @@ export var euiImageButtonStyles = function euiImageButtonStyles(euiThemeContext)
     // Base
     euiImageButton: /*#__PURE__*/css("position:relative;cursor:pointer;text-align:match-parent;line-height:0;&::before{opacity:0;content:'';pointer-events:none;position:absolute;inset:0;", euiCanAnimate, "{transition:opacity ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";}}&:hover,&:focus{&::before{opacity:1;}[class*='euiImageButton__icon']{opacity:1;}}&:focus{", euiFocusRing(euiThemeContext, 'outset'), ";};label:euiImageButton;"),
     fullWidth: /*#__PURE__*/css(logicalCSS('width', '100%'), ";;label:fullWidth;"),
-    shadowHover: /*#__PURE__*/css("&::before{", euiShadow(euiThemeContext, 's'), ";};label:shadowHover;"),
-    hasShadowHover: /*#__PURE__*/css("&::before{", euiShadow(euiThemeContext, 'm'), ";};label:hasShadowHover;")
+    shadowHover: /*#__PURE__*/css("&::before{", euiShadow(euiThemeContext, 's', {
+      borderAllInHighContrastMode: true
+    }), ";};label:shadowHover;"),
+    hasShadowHover: /*#__PURE__*/css("&::before{", euiShadow(euiThemeContext, 'm', {
+      borderAllInHighContrastMode: true
+    }), ";};label:hasShadowHover;")
   };
 };
 var _ref = process.env.NODE_ENV === "production" ? {

package/es/components/inline_edit/inline_edit_form.js

@@ -339,7 +339,7 @@ EuiInlineEditForm.propTypes = {
        * Multiple props objects that can be applied directly to various child components displayed in edit mode.
        * - `formRowProps` will be passed to `EuiFormRow`
        * - `inputProps` will be passed to `EuiFieldText`
-       * - `saveButtonProps` & `cancelButtonProps` will be passed to their respective `EuiIconButton`s
+       * - `saveButtonProps` & `cancelButtonProps` will be passed to their respective `EuiButtonIcon`s
        */
   editModeProps: PropTypes.shape({
     formRowProps: PropTypes.any,

package/es/components/inline_edit/inline_edit_form.styles.js

@@ -12,7 +12,7 @@ export var euiInlineEditReadModeStyles = function euiInlineEditReadModeStyles(_r
   return {
     euiInlineEditReadMode: /*#__PURE__*/css(";label:euiInlineEditReadMode;"),
     // Override the cursor and allow users to highlight text when in the read only state
-    isReadOnly: /*#__PURE__*/css("&:disabled{cursor:text;color:", euiTheme.colors.text, ";user-select:text;};label:isReadOnly;"),
+    isReadOnly: /*#__PURE__*/css("&:disabled{cursor:text;color:", euiTheme.colors.textParagraph, ";user-select:text;};label:isReadOnly;"),
     hasPlaceholder: /*#__PURE__*/css(".euiText,.euiTitle{color:", euiTheme.components.forms.colorHasPlaceholder, ";};label:hasPlaceholder;")
   };
 };

package/es/components/inline_edit/inline_edit_text.js

@@ -87,7 +87,7 @@ EuiInlineEditText.propTypes = {
        * Multiple props objects that can be applied directly to various child components displayed in edit mode.
        * - `formRowProps` will be passed to `EuiFormRow`
        * - `inputProps` will be passed to `EuiFieldText`
-       * - `saveButtonProps` & `cancelButtonProps` will be passed to their respective `EuiIconButton`s
+       * - `saveButtonProps` & `cancelButtonProps` will be passed to their respective `EuiButtonIcon`s
        */
   editModeProps: PropTypes.shape({
     formRowProps: PropTypes.any,

package/es/components/inline_edit/inline_edit_title.js

@@ -96,7 +96,7 @@ EuiInlineEditTitle.propTypes = {
        * Multiple props objects that can be applied directly to various child components displayed in edit mode.
        * - `formRowProps` will be passed to `EuiFormRow`
        * - `inputProps` will be passed to `EuiFieldText`
-       * - `saveButtonProps` & `cancelButtonProps` will be passed to their respective `EuiIconButton`s
+       * - `saveButtonProps` & `cancelButtonProps` will be passed to their respective `EuiButtonIcon`s
        */
   editModeProps: PropTypes.shape({
     formRowProps: PropTypes.any,

package/es/components/key_pad_menu/key_pad_menu_item.styles.js

@@ -9,6 +9,7 @@
 import { css } from '@emotion/react';
 import { euiShadow } from '@elastic/eui-theme-common';
 import { logicalCSS, logicalSizeCSS, euiCanAnimate, euiFontSize } from '../../global_styling';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 import { euiScreenReaderOnly } from '../accessibility';
 import { euiKeyPadMenuVariables } from './key_pad_menu.styles';
 export var euiKeyPadMenuItemStyles = function euiKeyPadMenuItemStyles(euiThemeContext) {
@@ -20,11 +21,23 @@ export var euiKeyPadMenuItemStyles = function euiKeyPadMenuItemStyles(euiThemeCo
   var focusTransformStyles = "\n    ".concat(euiShadow(euiThemeContext, 's'), ";\n\n    ").concat(euiCanAnimate, " {\n      .euiKeyPadMenuItem__icon {\n        transform: translateY(0);\n      }\n    }\n  ");
   return {
     euiKeyPadMenuItem: /*#__PURE__*/css("display:block;padding:", euiTheme.size.xs, ";", logicalSizeCSS(euiKeyPadMenuSize), " border-radius:", euiTheme.border.radius.medium, ";color:", euiTheme.colors.textParagraph, ";", euiCanAnimate, "{transition:background-color ", euiTheme.animation.fast, " ease-in,box-shadow ", euiTheme.animation.fast, " ease-in;};label:euiKeyPadMenuItem;"),
-    enabled: /*#__PURE__*/css("&:hover,&:focus,&:focus-within{cursor:pointer;text-decoration:underline;", hasVisColorAdjustment ? focusTransformStyles : "background-color: ".concat(euiTheme.colors.backgroundBaseInteractiveHover), ";}&:focus{box-shadow:none;background-color:", hasVisColorAdjustment ? euiTheme.focus.backgroundColor : euiTheme.colors.backgroundBaseInteractiveHover, ";};label:enabled;"),
-    selected: /*#__PURE__*/css("color:", euiTheme.colors.textHeading, ";background-color:", hasVisColorAdjustment ? euiTheme.focus.backgroundColor : '', ";&,&:hover,&:focus,&:focus-within{color:", euiTheme.colors.textPrimary, ";background-color:", !hasVisColorAdjustment ? euiTheme.colors.backgroundBaseInteractiveSelect : '', ";};label:selected;"),
+    enabled: /*#__PURE__*/css("&:is(:hover, :focus, :focus-within){cursor:pointer;text-decoration:underline;", highContrastModeStyles(euiThemeContext, {
+      // Use `outline` instead of border to avoid affecting absolutely positioned children
+      preferred: "\n            outline: ".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.primary, ";\n          ")
+    }), " ", hasVisColorAdjustment ? focusTransformStyles : "background-color: ".concat(euiTheme.colors.backgroundBaseInteractiveHover), ";}&:focus{box-shadow:none;background-color:", hasVisColorAdjustment ? euiTheme.focus.backgroundColor : euiTheme.colors.backgroundBaseInteractiveHover, ";};label:enabled;"),
+    selected: /*#__PURE__*/css("color:", euiTheme.colors.textHeading, ";background-color:", hasVisColorAdjustment ? euiTheme.focus.backgroundColor : '', ";&:is(*, :hover, :focus, :focus-within){color:", euiTheme.colors.textPrimary, ";background-color:", !hasVisColorAdjustment ? euiTheme.colors.backgroundBaseInteractiveSelect : '', ";", highContrastModeStyles(euiThemeContext, {
+      // Skip checkable items (which render a <label> instead of <button>/<a>),
+      // as they already have sufficient indication of state (checkbox or radio)
+      preferred: "\n            &:not(label) {\n              outline: ".concat(euiTheme.border.width.thick, " solid ").concat(euiTheme.colors.primary, ";\n              outline-offset: 0;\n            }\n          ")
+    }), ";};label:selected;"),
     disabled: {
-      disabled: /*#__PURE__*/css("cursor:not-allowed;color:", euiTheme.colors.textDisabled, ";.euiKeyPadMenuItem__icon{filter:", hasVisColorAdjustment ? 'grayscale(100%)' : '', ";svg *{fill:", euiTheme.colors.textDisabled, ";}};label:disabled;"),
-      selected: /*#__PURE__*/css("background-color:", hasVisColorAdjustment ? euiTheme.components.keyPadMenuItemBackgroundDisabledSelect : euiTheme.colors.backgroundBaseDisabled, ";;label:selected;")
+      disabled: /*#__PURE__*/css("cursor:not-allowed;color:", euiTheme.colors.textDisabled, ";", highContrastModeStyles(euiThemeContext, {
+        none: "\n            .euiKeyPadMenuItem__icon {\n              filter: ".concat(hasVisColorAdjustment ? 'grayscale(100%)' : '', ";\n\n              svg * {\n                fill: ").concat(euiTheme.colors.textDisabled, ";\n              }\n            }\n          "),
+        forced: 'opacity: 0.5;'
+      }), ";;label:disabled;"),
+      selected: /*#__PURE__*/css("background-color:", hasVisColorAdjustment ? euiTheme.components.keyPadMenuItemBackgroundDisabledSelect : euiTheme.colors.backgroundBaseDisabled, ";", highContrastModeStyles(euiThemeContext, {
+        preferred: "\n            &:not(label) {\n              outline: ".concat(euiTheme.border.width.thick, " solid ").concat(euiTheme.colors.textDisabled, ";\n            }\n          ")
+      }), ";;label:selected;")
     }
   };
 };
@@ -36,7 +49,7 @@ export var euiKeyPadMenuItemChildStyles = function euiKeyPadMenuItemChildStyles(
     euiKeyPadMenuItem__icon: /*#__PURE__*/css(logicalCSS('margin-bottom', euiTheme.size.m), " transform:translateY(2px);", euiCanAnimate, "{transition:transform ", euiTheme.animation.normal, " ", euiTheme.animation.bounce, ";};label:euiKeyPadMenuItem__icon;"),
     euiKeyPadMenuItem__label: /*#__PURE__*/css(euiFontSize(euiThemeContext, 'xs'), " font-weight:", euiTheme.font.weight.semiBold, ";text-align:center;;label:euiKeyPadMenuItem__label;"),
     euiKeyPadMenuItem__betaBadge: /*#__PURE__*/css(topRightChildren, ";;label:euiKeyPadMenuItem__betaBadge;"),
-    euiKeyPadMenuItem__checkableInput: /*#__PURE__*/css(topRightChildren, " transform:scale(.75);transform-origin:top right;&&{position:absolute;};label:euiKeyPadMenuItem__checkableInput;"),
+    euiKeyPadMenuItem__checkableInput: /*#__PURE__*/css("position:absolute;", topRightChildren, " transform:scale(.75);transform-origin:top right;;label:euiKeyPadMenuItem__checkableInput;"),
     showCheckableInputOnInteraction: /*#__PURE__*/css(".euiKeyPadMenuItem:not(:hover, :focus, :focus-within) &{", euiScreenReaderOnly(), ";};label:showCheckableInputOnInteraction;"),
     hideCheckableInput: /*#__PURE__*/css(euiScreenReaderOnly(), ";;label:hideCheckableInput;")
   };

package/es/components/link/link.styles.js

@@ -34,7 +34,7 @@ export var euiLinkStyles = function euiLinkStyles(euiThemeContext) {
     danger: /*#__PURE__*/css(_colorCSS(euiTheme.colors.textDanger), ";label:danger;"),
     warning: /*#__PURE__*/css(_colorCSS(euiTheme.colors.textWarning), ";label:warning;"),
     ghost: /*#__PURE__*/css(_colorCSS(euiTheme.colors.ghost), ";label:ghost;"),
-    text: /*#__PURE__*/css(_colorCSS(euiTheme.colors.text), ";label:text;")
+    text: /*#__PURE__*/css(_colorCSS(euiTheme.colors.textParagraph), ";label:text;")
   };
 };
 var _colorCSS = function _colorCSS(color) {

package/es/components/loading/loading_chart.js

@@ -1,4 +1,4 @@
-var _excluded = ["size", "mono", "className", "aria-label"];
+var _excluded = ["size", "className", "aria-label"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
@@ -21,8 +21,6 @@ export var SIZES = ['m', 'l', 'xl'];
 export var EuiLoadingChart = function EuiLoadingChart(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'm' : _ref$size,
-    _ref$mono = _ref.mono,
-    mono = _ref$mono === void 0 ? false : _ref$mono,
     className = _ref.className,
     ariaLabel = _ref['aria-label'],
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -30,7 +28,7 @@ export var EuiLoadingChart = function EuiLoadingChart(_ref) {
   var styles = useEuiMemoizedStyles(euiLoadingChartStyles);
   var cssStyles = [styles.euiLoadingChart, styles[size]];
   var barStyles = useEuiMemoizedStyles(euiLoadingChartBarStyles);
-  var barCssStyles = [barStyles.euiLoadingChart__bar, mono ? barStyles.mono : barStyles.nonmono, barStyles[size]];
+  var barCssStyles = [barStyles.euiLoadingChart__bar, barStyles[size]];
   var defaultAriaLabel = useLoadingAriaLabel();
   return ___EmotionJSX("span", _extends({
     className: classes,
@@ -51,6 +49,5 @@ EuiLoadingChart.propTypes = {
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
   css: PropTypes.any,
-  size: PropTypes.any,
-  mono: PropTypes.bool
+  size: PropTypes.any
 };

package/es/components/loading/loading_chart.styles.js

@@ -1,11 +1,5 @@
 var _templateObject;
 function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
-function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 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
@@ -17,6 +11,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css, keyframes } from '@emotion/react';
 import { euiCanAnimate, euiCantAnimate, logicalCSS } from '../../global_styling';
+import { preventForcedColors } from '../../global_styling/functions/high_contrast';
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "yovxj7-euiLoadingChart",
   styles: "overflow:hidden;display:inline-flex;label:euiLoadingChart;"
@@ -35,30 +30,20 @@ export var euiLoadingChartStyles = function euiLoadingChartStyles(_ref2) {
   };
 };
 export var BARS_COUNT = 4;
-export var euiLoadingChartBarStyles = function euiLoadingChartBarStyles(_ref3) {
-  var euiTheme = _ref3.euiTheme;
-  var nonMonoColors = Object.keys(euiTheme.colors.vis).reduce(function (colors, cur) {
-    var isVisColor = cur.match(/euiColorVis[0-9]/);
-    if (isVisColor) {
-      var color = euiTheme.colors.vis[cur];
-      return [].concat(_toConsumableArray(colors), [color]);
-    }
-    return colors;
-  }, []);
+export var euiLoadingChartBarStyles = function euiLoadingChartBarStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
+  var backgroundColors = outputNthChildCss(function (index) {
+    var token = "loadingChartMonoBackground".concat(index);
+    var color = euiTheme.components[token];
+    return "background-color: ".concat(highContrastMode === 'forced' ? euiTheme.colors.fullShade : highContrastMode ? euiTheme.colors.darkShade : color);
+  });
   return {
-    euiLoadingChart__bar: /*#__PURE__*/css(logicalCSS('height', '100%'), " display:inline-block;", euiCanAnimate, "{animation:", barAnimation, " 1s infinite;", outputNthChildCss(function (index) {
-      return "animation-delay: 0.".concat(index, "s;");
+    euiLoadingChart__bar: /*#__PURE__*/css(logicalCSS('height', '100%'), " display:inline-block;", preventForcedColors(euiThemeContext), " ", euiCanAnimate, "{animation:", barAnimation, " 1s infinite;", outputNthChildCss(function (index) {
+      return "animation-delay: 0.".concat(index, "s");
     }), ";}", euiCantAnimate, "{", outputNthChildCss(function (index) {
-      return "transform: translateY(".concat(22 * index, "%);");
-    }), ";};label:euiLoadingChart__bar;"),
-    nonmono: /*#__PURE__*/css(outputNthChildCss(function (index) {
-      return "background-color: ".concat(nonMonoColors[index]);
-    }), ";;label:nonmono;"),
-    mono: /*#__PURE__*/css(outputNthChildCss(function (index) {
-      var token = "loadingChartMonoBackground".concat(index);
-      var color = euiTheme.components[token];
-      return "background-color: ".concat(color);
-    }), ";;label:mono;"),
+      return "transform: translateY(".concat(22 * index, "%)");
+    }), ";}", backgroundColors, ";;label:euiLoadingChart__bar;"),
     m: /*#__PURE__*/css(logicalCSS('width', euiTheme.size.xxs), " ", logicalCSS('margin-bottom', euiTheme.size.s), ";;label:m;"),
     l: /*#__PURE__*/css(logicalCSS('width', euiTheme.size.xs), " ", logicalCSS('margin-bottom', euiTheme.size.m), ";;label:l;"),
     xl: /*#__PURE__*/css(logicalCSS('width', euiTheme.size.s), " ", logicalCSS('margin-bottom', euiTheme.size.base), ";;label:xl;")

package/es/components/loading/loading_spinner.styles.js

@@ -9,6 +9,7 @@ function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.fre
  */
 import { css, keyframes } from '@emotion/react';
 import { euiCanAnimate, logicalSizeCSS, logicalShorthandCSS, mathWithUnits } from '../../global_styling';
+import { preventForcedColors } from '../../global_styling/functions/high_contrast';
 var _loadingSpinner = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(359deg);\n  }\n"])));
 var spinnerSizes = {
   s: 'm',
@@ -18,25 +19,33 @@ var spinnerSizes = {
   xxl: 'xxl'
 };
 export var euiSpinnerBorderColorsCSS = function euiSpinnerBorderColorsCSS(_ref) {
-  var euiTheme = _ref.euiTheme;
+  var euiTheme = _ref.euiTheme,
+    highContrastMode = _ref.highContrastMode;
   var colors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var _colors$border = colors.border,
     border = _colors$border === void 0 ? euiTheme.components.loadingSpinnerBorder : _colors$border,
     _colors$highlight = colors.highlight,
     highlight = _colors$highlight === void 0 ? euiTheme.components.loadingSpinnerHighlight : _colors$highlight;
+  if (highContrastMode === 'forced') {
+    border = euiTheme.colors.lightestShade;
+    highlight = euiTheme.colors.fullShade;
+  }
   return "".concat(highlight, " ").concat(border, " ").concat(border, " ").concat(border);
 };
 export var euiLoadingSpinnerStyles = function euiLoadingSpinnerStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
+  var smallerBorderWidth = highContrastMode ? euiTheme.border.width.thick : mathWithUnits(euiTheme.border.width.thin, function (x) {
+    return x * 1.5;
+  });
+  var largerBorderWidth = highContrastMode ? mathWithUnits(euiTheme.border.thick, function (x) {
+    return x * 2;
+  }) : euiTheme.border.width.thick;
   return {
-    euiLoadingSpinner: /*#__PURE__*/css("flex-shrink:0;display:inline-block;border-radius:50%;border:", euiTheme.border.thick, ";", logicalShorthandCSS('border-color', euiSpinnerBorderColorsCSS(euiThemeContext)), " ", euiCanAnimate, "{animation:", _loadingSpinner, " 0.6s infinite linear;};label:euiLoadingSpinner;"),
+    euiLoadingSpinner: /*#__PURE__*/css("flex-shrink:0;display:inline-block;border-radius:50%;border:", largerBorderWidth, " solid ", euiTheme.border.color, ";", logicalShorthandCSS('border-color', euiSpinnerBorderColorsCSS(euiThemeContext)), " ", preventForcedColors(euiThemeContext), " ", euiCanAnimate, "{animation:", _loadingSpinner, " 0.6s infinite linear;};label:euiLoadingSpinner;"),
     // Sizes
-    s: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size[spinnerSizes.s], euiTheme.size[spinnerSizes.s]), " border-width:", mathWithUnits(euiTheme.border.width.thin, function (x) {
-      return x * 1.5;
-    }), ";;label:s;"),
-    m: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size[spinnerSizes.m], euiTheme.size[spinnerSizes.m]), " border-width:", mathWithUnits(euiTheme.border.width.thin, function (x) {
-      return x * 1.5;
-    }), ";;label:m;"),
+    s: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size[spinnerSizes.s], euiTheme.size[spinnerSizes.s]), " border-width:", smallerBorderWidth, ";;label:s;"),
+    m: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size[spinnerSizes.m], euiTheme.size[spinnerSizes.m]), " border-width:", smallerBorderWidth, ";;label:m;"),
     l: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size[spinnerSizes.l], euiTheme.size[spinnerSizes.l]), ";;label:l;"),
     xl: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size[spinnerSizes.xl], euiTheme.size[spinnerSizes.xl]), ";;label:xl;"),
     xxl: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size[spinnerSizes.xxl], euiTheme.size[spinnerSizes.xxl]), ";;label:xxl;")

package/es/components/mark/mark.styles.js

@@ -7,11 +7,19 @@
  */
 
 import { css } from '@emotion/react';
+import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 import { euiScreenReaderOnly } from '../accessibility';
-export var euiMarkStyles = function euiMarkStyles(_ref) {
-  var euiTheme = _ref.euiTheme;
+export var euiMarkStyles = function euiMarkStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiMark: /*#__PURE__*/css("background-color:", euiTheme.components.markBackground, ";font-weight:", euiTheme.font.weight.bold, ";color:", euiTheme.colors.text, ";;label:euiMark;")
+    euiMark: /*#__PURE__*/css(highContrastModeStyles(euiThemeContext, {
+      // Override the browser's black color.
+      // Can't use 'inherit' because the text to background color contrast may not be sufficient
+      none: "\n          color: ".concat(euiTheme.colors.textParagraph, ";\n          background-color: ").concat(euiTheme.components.markBackground, ";\n        "),
+      // `!important` is required here because some marked text links
+      // (e.g. EuiSideNav) will take precedence otherwise
+      preferred: "\n          color: ".concat(euiTheme.colors.emptyShade, " !important;\n          background-color: ").concat(euiTheme.colors.backgroundFilledPrimary, ";\n        ")
+    }), " font-weight:", euiTheme.font.weight.bold, ";;label:euiMark;")
   };
 };
 export var euiMarkScreenReaderStyles = function euiMarkScreenReaderStyles(highlightStart, highlightEnd) {

package/es/components/markdown_editor/markdown_format.styles.js

@@ -37,33 +37,35 @@ var euiMarkdownAdjustBorderColors = function euiMarkdownAdjustBorderColors(_ref,
 /**
  * Styles
  */
-export var euiMarkdownFormatStyles = function euiMarkdownFormatStyles(euiTheme) {
+export var euiMarkdownFormatStyles = function euiMarkdownFormatStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   return {
     euiMarkdownFormat: /*#__PURE__*/css(";label:euiMarkdownFormat;"),
     // Text sizes
-    m: /*#__PURE__*/css(euiScaleMarkdownFormatText(euiTheme, {
+    m: /*#__PURE__*/css(euiScaleMarkdownFormatText(euiThemeContext, {
       customScale: 'm'
     }), ";label:m;"),
-    s: /*#__PURE__*/css(euiScaleMarkdownFormatText(euiTheme, {
+    s: /*#__PURE__*/css(euiScaleMarkdownFormatText(euiThemeContext, {
       customScale: 's'
     }), ";label:s;"),
-    xs: /*#__PURE__*/css(euiScaleMarkdownFormatText(euiTheme, {
+    xs: /*#__PURE__*/css(euiScaleMarkdownFormatText(euiThemeContext, {
       customScale: 'xs'
     }), ";label:xs;"),
-    relative: /*#__PURE__*/css(euiScaleMarkdownFormatText(euiTheme, {
+    relative: /*#__PURE__*/css(euiScaleMarkdownFormatText(euiThemeContext, {
       unit: 'em'
     }), ";label:relative;"),
     colors: {
-      default: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.components.markdownFormatTableBorderColor), ";label:default;"),
-      subdued: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.subduedText), ";label:subdued;"),
-      success: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.success), ";label:success;"),
-      accent: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.accent), ";label:accent;"),
-      accentSecondary: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.accentSecondary), ";label:accentSecondary;"),
-      warning: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.warning), ";label:warning;"),
-      danger: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.danger), ";label:danger;"),
-      ghost: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.ghost), ";label:ghost;"),
-      inherit: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiTheme, 'currentColor'), ";label:inherit;"),
-      custom: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiTheme, 'currentColor'), ";label:custom;")
+      default: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiThemeContext, highContrastMode ? euiTheme.border.color : euiTheme.components.markdownFormatTableBorderColor), ";label:default;"),
+      subdued: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiThemeContext, highContrastMode ? euiTheme.border.color : euiTheme.colors.textSubdued), ";label:subdued;"),
+      success: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiThemeContext, euiTheme.colors.success), ";label:success;"),
+      accent: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiThemeContext, euiTheme.colors.accent), ";label:accent;"),
+      accentSecondary: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiThemeContext, euiTheme.colors.accentSecondary), ";label:accentSecondary;"),
+      warning: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiThemeContext, euiTheme.colors.warning), ";label:warning;"),
+      danger: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiThemeContext, euiTheme.colors.danger), ";label:danger;"),
+      ghost: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiThemeContext, euiTheme.colors.ghost), ";label:ghost;"),
+      inherit: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiThemeContext, 'currentColor'), ";label:inherit;"),
+      custom: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiThemeContext, 'currentColor'), ";label:custom;")
     }
   };
 };