@elastic/eui 100.0.0 → 101.0.0

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiSwitchStyles = 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.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
@@ -15,17 +16,18 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * Side Public License, v 1.
  */
 var euiSwitchVars = function euiSwitchVars(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   var formVars = (0, _form.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 = {
@@ -84,7 +86,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;"
 } : {
@@ -92,7 +94,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;"
 } : {
@@ -103,10 +105,10 @@ var _ref3 = process.env.NODE_ENV === "production" ? {
 var euiSwitchStyles = exports.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
@@ -129,32 +131,39 @@ var buttonStyles = function buttonStyles(euiThemeContext, switchVars) {
     mini: /*#__PURE__*/(0, _react.css)((0, _global_styling.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__*/(0, _react.css)("label:disabled;background-color:", color, ";", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+      preferred: "border: ".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.borderBaseDisabled, ";")
+    }), ";");
+  };
   return {
-    euiSwitch__body: _ref,
-    on: /*#__PURE__*/(0, _react.css)("background-color:", colors.on, ";;label:on;"),
+    euiSwitch__body: /*#__PURE__*/(0, _react.css)("position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+      forced: "border: ".concat(euiTheme.border.thin, ";")
+    }), ";;label:euiSwitch__body;"),
+    on: /*#__PURE__*/(0, _react.css)((0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+      none: "\n          background-color: ".concat(colors.on, ";\n        "),
+      forced: "\n          background-color: ".concat(euiTheme.border.color, ";\n          ").concat((0, _high_contrast.preventForcedColors)(euiThemeContext), "\n        ")
+    }), ";label:on;"),
     off: /*#__PURE__*/(0, _react.css)("background-color:", colors.off, ";;label:off;"),
     disabled: {
-      uncompressed: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.components.switchUncompressedBackgroundDisabled, ";;label:uncompressed;"),
-      compressed: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.components.switchCompressedBackgroundDisabled, ";;label:compressed;"),
-      mini: /*#__PURE__*/(0, _react.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__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('vertical', 0), " ", (0, _global_styling.logicalCSS)('left', '-50%'), " ", (0, _global_styling.logicalCSS)('width', '200%'), " display:flex;justify-content:space-around;align-items:center;", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), " ", _global_styling.euiCanAnimate, "{transition-property:inset-inline-start;transition-duration:", animation.speed, ";transition-timing-function:", animation.easing, ";};label:euiSwitch__icons;"),
     on: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('left', '-25%'), ";;label:on;"),
@@ -163,8 +172,8 @@ var iconStyles = function iconStyles(_ref6, _ref7) {
     disabled: /*#__PURE__*/(0, _react.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;
@@ -210,9 +219,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/lib/components/header/header.styles.js

@@ -52,7 +52,8 @@ var euiHeaderStyles = exports.euiHeaderStyles = function euiHeaderStyles(euiThem
  */
 
 var euiHeaderDarkStyles = function euiHeaderDarkStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   var _euiFormVariables = (0, _form.euiFormVariables)(euiThemeContext),
     controlPlaceholderText = _euiFormVariables.controlPlaceholderText;
   var backgroundColor = euiTheme.components.headerDarkBackground;
@@ -63,5 +64,5 @@ var euiHeaderDarkStyles = function euiHeaderDarkStyles(euiThemeContext) {
     borderColor: euiTheme.components.headerDarkSearchBorderColor,
     placeholderColor: (0, _services.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((0, _services.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((0, _services.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/lib/components/horizontal_rule/horizontal_rule.styles.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiHorizontalRuleStyles = 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,10 +15,14 @@ var _global_styling = require("../../global_styling");
  * Side Public License, v 1.
  */
 
-var euiHorizontalRuleStyles = exports.euiHorizontalRuleStyles = function euiHorizontalRuleStyles(_ref) {
-  var euiTheme = _ref.euiTheme;
+var euiHorizontalRuleStyles = exports.euiHorizontalRuleStyles = function euiHorizontalRuleStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiHorizontalRule: /*#__PURE__*/(0, _react.css)("border:none;", (0, _global_styling.logicalCSS)('height', euiTheme.border.width.thin), " background-color:", euiTheme.border.color, ";flex-shrink:0;flex-grow:0;;label:euiHorizontalRule;"),
+    euiHorizontalRule: /*#__PURE__*/(0, _react.css)("border:none;", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+      none: "\n          ".concat((0, _global_styling.logicalCSS)('height', euiTheme.border.width.thin), "\n          background-color: ").concat(euiTheme.border.color, ";\n        "),
+      // Windows high contrast themes ignore background colors
+      forced: (0, _global_styling.logicalCSS)('border-bottom', euiTheme.border.thin)
+    }), "flex-shrink:0;flex-grow:0;;label:euiHorizontalRule;"),
     // Sizes
     full: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), ";;label:full;"),
     half: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '50%'), " ", (0, _global_styling.logicalCSS)('margin-horizontal', 'auto'), ";;label:half;"),

package/lib/components/i18n/i18n.js

@@ -53,7 +53,7 @@ function lookupToken(options) {
   }
   var children = (0, _i18n_util.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/lib/components/i18n/i18n_util.js

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

package/lib/components/icon/icon.styles.js

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

package/lib/components/image/image.styles.js

@@ -7,6 +7,7 @@ exports.euiImageStyles = void 0;
 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");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -19,8 +20,12 @@ var euiImageStyles = exports.euiImageStyles = function euiImageStyles(euiThemeCo
   return {
     euiImage: /*#__PURE__*/(0, _react.css)("vertical-align:middle;", (0, _global_styling.logicalCSS)('max-width', '100%'), " &,[class*='euiText'] &{", (0, _global_styling.logicalCSS)('margin-bottom', 0), ";};label:euiImage;"),
     // Variations
-    isFullScreen: /*#__PURE__*/(0, _react.css)("position:relative;", (0, _global_styling.logicalCSS)('max-height', '80vh'), " ", (0, _global_styling.logicalCSS)('max-width', '80vw'), ";;label:isFullScreen;"),
-    hasShadow: /*#__PURE__*/(0, _react.css)((0, _euiThemeCommon.euiShadow)(euiThemeContext, 's'), ";;label:hasShadow;"),
+    isFullScreen: /*#__PURE__*/(0, _react.css)("position:relative;", (0, _global_styling.logicalCSS)('max-height', '80vh'), " ", (0, _global_styling.logicalCSS)('max-width', '80vw'), " ", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+      preferred: "border: ".concat(euiThemeContext.euiTheme.border.thin, ";")
+    }), ";;label:isFullScreen;"),
+    hasShadow: /*#__PURE__*/(0, _react.css)((0, _euiThemeCommon.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/lib/components/image/image_button.styles.js

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

package/lib/components/inline_edit/inline_edit_form.js

@@ -345,7 +345,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.default.shape({
     formRowProps: _propTypes.default.any,

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

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

package/lib/components/inline_edit/inline_edit_text.js

@@ -95,7 +95,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.default.shape({
     formRowProps: _propTypes.default.any,

package/lib/components/inline_edit/inline_edit_title.js

@@ -104,7 +104,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.default.shape({
     formRowProps: _propTypes.default.any,

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

@@ -7,6 +7,7 @@ exports.euiKeyPadMenuItemStyles = exports.euiKeyPadMenuItemChildStyles = void 0;
 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 _accessibility = require("../accessibility");
 var _key_pad_menu = require("./key_pad_menu.styles");
 /*
@@ -26,11 +27,23 @@ var euiKeyPadMenuItemStyles = exports.euiKeyPadMenuItemStyles = function euiKeyP
   var focusTransformStyles = "\n    ".concat((0, _euiThemeCommon.euiShadow)(euiThemeContext, 's'), ";\n\n    ").concat(_global_styling.euiCanAnimate, " {\n      .euiKeyPadMenuItem__icon {\n        transform: translateY(0);\n      }\n    }\n  ");
   return {
     euiKeyPadMenuItem: /*#__PURE__*/(0, _react.css)("display:block;padding:", euiTheme.size.xs, ";", (0, _global_styling.logicalSizeCSS)(euiKeyPadMenuSize), " border-radius:", euiTheme.border.radius.medium, ";color:", euiTheme.colors.textParagraph, ";", _global_styling.euiCanAnimate, "{transition:background-color ", euiTheme.animation.fast, " ease-in,box-shadow ", euiTheme.animation.fast, " ease-in;};label:euiKeyPadMenuItem;"),
-    enabled: /*#__PURE__*/(0, _react.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__*/(0, _react.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__*/(0, _react.css)("&:is(:hover, :focus, :focus-within){cursor:pointer;text-decoration:underline;", (0, _high_contrast.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__*/(0, _react.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 : '', ";", (0, _high_contrast.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__*/(0, _react.css)("cursor:not-allowed;color:", euiTheme.colors.textDisabled, ";.euiKeyPadMenuItem__icon{filter:", hasVisColorAdjustment ? 'grayscale(100%)' : '', ";svg *{fill:", euiTheme.colors.textDisabled, ";}};label:disabled;"),
-      selected: /*#__PURE__*/(0, _react.css)("background-color:", hasVisColorAdjustment ? euiTheme.components.keyPadMenuItemBackgroundDisabledSelect : euiTheme.colors.backgroundBaseDisabled, ";;label:selected;")
+      disabled: /*#__PURE__*/(0, _react.css)("cursor:not-allowed;color:", euiTheme.colors.textDisabled, ";", (0, _high_contrast.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__*/(0, _react.css)("background-color:", hasVisColorAdjustment ? euiTheme.components.keyPadMenuItemBackgroundDisabledSelect : euiTheme.colors.backgroundBaseDisabled, ";", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+        preferred: "\n            &:not(label) {\n              outline: ".concat(euiTheme.border.width.thick, " solid ").concat(euiTheme.colors.textDisabled, ";\n            }\n          ")
+      }), ";;label:selected;")
     }
   };
 };
@@ -42,7 +55,7 @@ var euiKeyPadMenuItemChildStyles = exports.euiKeyPadMenuItemChildStyles = functi
     euiKeyPadMenuItem__icon: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.m), " transform:translateY(2px);", _global_styling.euiCanAnimate, "{transition:transform ", euiTheme.animation.normal, " ", euiTheme.animation.bounce, ";};label:euiKeyPadMenuItem__icon;"),
     euiKeyPadMenuItem__label: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), " font-weight:", euiTheme.font.weight.semiBold, ";text-align:center;;label:euiKeyPadMenuItem__label;"),
     euiKeyPadMenuItem__betaBadge: /*#__PURE__*/(0, _react.css)(topRightChildren, ";;label:euiKeyPadMenuItem__betaBadge;"),
-    euiKeyPadMenuItem__checkableInput: /*#__PURE__*/(0, _react.css)(topRightChildren, " transform:scale(.75);transform-origin:top right;&&{position:absolute;};label:euiKeyPadMenuItem__checkableInput;"),
+    euiKeyPadMenuItem__checkableInput: /*#__PURE__*/(0, _react.css)("position:absolute;", topRightChildren, " transform:scale(.75);transform-origin:top right;;label:euiKeyPadMenuItem__checkableInput;"),
     showCheckableInputOnInteraction: /*#__PURE__*/(0, _react.css)(".euiKeyPadMenuItem:not(:hover, :focus, :focus-within) &{", (0, _accessibility.euiScreenReaderOnly)(), ";};label:showCheckableInputOnInteraction;"),
     hideCheckableInput: /*#__PURE__*/(0, _react.css)((0, _accessibility.euiScreenReaderOnly)(), ";;label:hideCheckableInput;")
   };

package/lib/components/link/link.styles.js

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

package/lib/components/loading/loading_chart.js

@@ -11,7 +11,7 @@ var _services = require("../../services");
 var _loading_strings = require("./_loading_strings");
 var _loading_chart = require("./loading_chart.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["size", "mono", "className", "aria-label"];
+var _excluded = ["size", "className", "aria-label"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -27,8 +27,6 @@ var SIZES = exports.SIZES = ['m', 'l', 'xl'];
 var EuiLoadingChart = exports.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);
@@ -36,7 +34,7 @@ var EuiLoadingChart = exports.EuiLoadingChart = function EuiLoadingChart(_ref) {
   var styles = (0, _services.useEuiMemoizedStyles)(_loading_chart.euiLoadingChartStyles);
   var cssStyles = [styles.euiLoadingChart, styles[size]];
   var barStyles = (0, _services.useEuiMemoizedStyles)(_loading_chart.euiLoadingChartBarStyles);
-  var barCssStyles = [barStyles.euiLoadingChart__bar, mono ? barStyles.mono : barStyles.nonmono, barStyles[size]];
+  var barCssStyles = [barStyles.euiLoadingChart__bar, barStyles[size]];
   var defaultAriaLabel = (0, _loading_strings.useLoadingAriaLabel)();
   return (0, _react2.jsx)("span", _extends({
     className: classes,
@@ -57,6 +55,5 @@ EuiLoadingChart.propTypes = {
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
   css: _propTypes.default.any,
-  size: _propTypes.default.any,
-  mono: _propTypes.default.bool
+  size: _propTypes.default.any
 };

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

@@ -6,14 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiLoadingChartStyles = exports.euiLoadingChartBarStyles = exports.BARS_COUNT = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
+var _high_contrast = require("../../global_styling/functions/high_contrast");
 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
  * or more contributor license agreements. Licensed under the Elastic License
@@ -39,30 +34,20 @@ var euiLoadingChartStyles = exports.euiLoadingChartStyles = function euiLoadingC
   };
 };
 var BARS_COUNT = exports.BARS_COUNT = 4;
-var euiLoadingChartBarStyles = exports.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;
-  }, []);
+var euiLoadingChartBarStyles = exports.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__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', '100%'), " display:inline-block;", _global_styling.euiCanAnimate, "{animation:", barAnimation, " 1s infinite;", outputNthChildCss(function (index) {
-      return "animation-delay: 0.".concat(index, "s;");
+    euiLoadingChart__bar: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', '100%'), " display:inline-block;", (0, _high_contrast.preventForcedColors)(euiThemeContext), " ", _global_styling.euiCanAnimate, "{animation:", barAnimation, " 1s infinite;", outputNthChildCss(function (index) {
+      return "animation-delay: 0.".concat(index, "s");
     }), ";}", _global_styling.euiCantAnimate, "{", outputNthChildCss(function (index) {
-      return "transform: translateY(".concat(22 * index, "%);");
-    }), ";};label:euiLoadingChart__bar;"),
-    nonmono: /*#__PURE__*/(0, _react.css)(outputNthChildCss(function (index) {
-      return "background-color: ".concat(nonMonoColors[index]);
-    }), ";;label:nonmono;"),
-    mono: /*#__PURE__*/(0, _react.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__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', euiTheme.size.xxs), " ", (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.s), ";;label:m;"),
     l: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', euiTheme.size.xs), " ", (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.m), ";;label:l;"),
     xl: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', euiTheme.size.s), " ", (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.base), ";;label:xl;")

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiSpinnerBorderColorsCSS = exports.euiLoadingSpinnerStyles = void 0;
 var _react = require("@emotion/react");
 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
@@ -24,25 +25,33 @@ var spinnerSizes = {
   xxl: 'xxl'
 };
 var euiSpinnerBorderColorsCSS = exports.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);
 };
 var euiLoadingSpinnerStyles = exports.euiLoadingSpinnerStyles = function euiLoadingSpinnerStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
+  var smallerBorderWidth = highContrastMode ? euiTheme.border.width.thick : (0, _global_styling.mathWithUnits)(euiTheme.border.width.thin, function (x) {
+    return x * 1.5;
+  });
+  var largerBorderWidth = highContrastMode ? (0, _global_styling.mathWithUnits)(euiTheme.border.thick, function (x) {
+    return x * 2;
+  }) : euiTheme.border.width.thick;
   return {
-    euiLoadingSpinner: /*#__PURE__*/(0, _react.css)("flex-shrink:0;display:inline-block;border-radius:50%;border:", euiTheme.border.thick, ";", (0, _global_styling.logicalShorthandCSS)('border-color', euiSpinnerBorderColorsCSS(euiThemeContext)), " ", _global_styling.euiCanAnimate, "{animation:", _loadingSpinner, " 0.6s infinite linear;};label:euiLoadingSpinner;"),
+    euiLoadingSpinner: /*#__PURE__*/(0, _react.css)("flex-shrink:0;display:inline-block;border-radius:50%;border:", largerBorderWidth, " solid ", euiTheme.border.color, ";", (0, _global_styling.logicalShorthandCSS)('border-color', euiSpinnerBorderColorsCSS(euiThemeContext)), " ", (0, _high_contrast.preventForcedColors)(euiThemeContext), " ", _global_styling.euiCanAnimate, "{animation:", _loadingSpinner, " 0.6s infinite linear;};label:euiLoadingSpinner;"),
     // Sizes
-    s: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size[spinnerSizes.s], euiTheme.size[spinnerSizes.s]), " border-width:", (0, _global_styling.mathWithUnits)(euiTheme.border.width.thin, function (x) {
-      return x * 1.5;
-    }), ";;label:s;"),
-    m: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size[spinnerSizes.m], euiTheme.size[spinnerSizes.m]), " border-width:", (0, _global_styling.mathWithUnits)(euiTheme.border.width.thin, function (x) {
-      return x * 1.5;
-    }), ";;label:m;"),
+    s: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size[spinnerSizes.s], euiTheme.size[spinnerSizes.s]), " border-width:", smallerBorderWidth, ";;label:s;"),
+    m: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size[spinnerSizes.m], euiTheme.size[spinnerSizes.m]), " border-width:", smallerBorderWidth, ";;label:m;"),
     l: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size[spinnerSizes.l], euiTheme.size[spinnerSizes.l]), ";;label:l;"),
     xl: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size[spinnerSizes.xl], euiTheme.size[spinnerSizes.xl]), ";;label:xl;"),
     xxl: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size[spinnerSizes.xxl], euiTheme.size[spinnerSizes.xxl]), ";;label:xxl;")

package/lib/components/mark/mark.styles.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiMarkStyles = exports.euiMarkScreenReaderStyles = void 0;
 var _react = require("@emotion/react");
+var _high_contrast = require("../../global_styling/functions/high_contrast");
 var _accessibility = require("../accessibility");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -14,10 +15,17 @@ var _accessibility = require("../accessibility");
  * Side Public License, v 1.
  */
 
-var euiMarkStyles = exports.euiMarkStyles = function euiMarkStyles(_ref) {
-  var euiTheme = _ref.euiTheme;
+var euiMarkStyles = exports.euiMarkStyles = function euiMarkStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiMark: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.components.markBackground, ";font-weight:", euiTheme.font.weight.bold, ";color:", euiTheme.colors.text, ";;label:euiMark;")
+    euiMark: /*#__PURE__*/(0, _react.css)((0, _high_contrast.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;")
   };
 };
 var euiMarkScreenReaderStyles = exports.euiMarkScreenReaderStyles = function euiMarkScreenReaderStyles(highlightStart, highlightEnd) {