@elastic/eui 92.2.0 → 93.0.0

package/es/components/basic_table/basic_table.js

@@ -247,15 +247,6 @@ export var EuiBasicTable = /*#__PURE__*/function (_Component) {
         });
       }
     }
-
-    /**
-     * @deprecated Use `selection.selected` instead to declaratively control table selection
-     */
-  }, {
-    key: "setSelection",
-    value: function setSelection(newSelection) {
-      this.changeSelection(newSelection);
-    }
   }, {
     key: "buildCriteria",
     value: function buildCriteria(props) {

package/es/components/basic_table/in_memory_table.js

@@ -125,7 +125,6 @@ export var EuiInMemoryTable = /*#__PURE__*/function (_Component) {
     var _this;
     _classCallCheck(this, EuiInMemoryTable);
     _this = _super.call(this, props);
-    _defineProperty(_assertThisInitialized(_this), "tableRef", void 0);
     _defineProperty(_assertThisInitialized(_this), "onTableChange", function (_ref4) {
       var page = _ref4.page,
         sort = _ref4.sort;
@@ -258,17 +257,9 @@ export var EuiInMemoryTable = /*#__PURE__*/function (_Component) {
       allowNeutralSort: allowNeutralSort !== false,
       showPerPageOptions: showPerPageOptions
     };
-    _this.tableRef = /*#__PURE__*/React.createRef();
     return _this;
   }
   _createClass(EuiInMemoryTable, [{
-    key: "setSelection",
-    value: function setSelection(newSelection) {
-      if (this.tableRef.current) {
-        this.tableRef.current.setSelection(newSelection);
-      }
-    }
-  }, {
     key: "renderSearchBar",
     value: function renderSearchBar() {
       var _this$props = this.props,
@@ -437,7 +428,6 @@ export var EuiInMemoryTable = /*#__PURE__*/function (_Component) {
       var table =
       // @ts-ignore complex relationship between pagination's existence and criteria, the code logic ensures this is correctly maintained
       ___EmotionJSX(EuiBasicTable, _extends({
-        ref: this.tableRef,
         items: items,
         itemId: itemId,
         rowProps: rowProps,

package/es/components/beacon/beacon.js

@@ -16,11 +16,12 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { euiBeaconStyles } from './beacon.styles';
+import { logicalStyles } from '../../global_styling';
 import { useEuiTheme } from '../../services';
+import { euiBeaconStyles } from './beacon.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var COLORS = ['subdued', 'primary', 'success', 'accent', 'danger', 'warning'];
 export var EuiBeacon = function EuiBeacon(_ref) {
@@ -35,10 +36,12 @@ export var EuiBeacon = function EuiBeacon(_ref) {
   var classes = classNames('euiBeacon', className);
   var styles = euiBeaconStyles(euiTheme);
   var cssStyles = [styles.euiBeacon, styles[color]];
-  var beaconStyle = _objectSpread(_objectSpread({}, style), {}, {
-    height: size,
-    width: size
-  });
+  var beaconStyle = useMemo(function () {
+    return logicalStyles(_objectSpread(_objectSpread({}, style), {}, {
+      height: size,
+      width: size
+    }));
+  }, [style, size]);
   return ___EmotionJSX("div", _extends({
     className: classes,
     css: cssStyles,

package/es/components/breadcrumbs/breadcrumb.js

@@ -180,12 +180,6 @@ EuiBreadcrumbContent.propTypes = {
        * [EuiPopover](/#/layout/popover) accepts, except for props that control state.
        */
   popoverProps: PropTypes.shape({
-    /**
-       * Class name passed to the direct parent of the button
-       *
-       * @deprecated Use `className` instead
-       */
-    anchorClassName: PropTypes.string,
     /**
        * Alignment of the popover and arrow relative to the button
        */
@@ -195,10 +189,6 @@ EuiBreadcrumbContent.propTypes = {
        * Intended for use with inputs as anchors, e.g. EuiInputPopover
        */
     attachToAnchor: PropTypes.bool,
-    /**
-       * @deprecated Use `popoverRef` instead
-       */
-    buttonRef: PropTypes.any,
     /**
        * Restrict the popover's position within this element
        */

package/es/components/breadcrumbs/breadcrumbs.js

@@ -151,12 +151,6 @@ EuiBreadcrumbs.propTypes = {
          * [EuiPopover](/#/layout/popover) accepts, except for props that control state.
          */
     popoverProps: PropTypes.shape({
-      /**
-         * Class name passed to the direct parent of the button
-         *
-         * @deprecated Use `className` instead
-         */
-      anchorClassName: PropTypes.string,
       /**
          * Alignment of the popover and arrow relative to the button
          */
@@ -166,10 +160,6 @@ EuiBreadcrumbs.propTypes = {
          * Intended for use with inputs as anchors, e.g. EuiInputPopover
          */
       attachToAnchor: PropTypes.bool,
-      /**
-         * @deprecated Use `popoverRef` instead
-         */
-      buttonRef: PropTypes.any,
       /**
          * Restrict the popover's position within this element
          */

package/es/components/code/code.js

@@ -16,6 +16,7 @@ import { highlight } from 'refractor';
 import classNames from 'classnames';
 import { DEFAULT_LANGUAGE, checkSupportedLanguage, getHtmlContent } from './utils';
 import { useEuiTheme } from '../../services';
+import { useEuiCodeSyntaxVariables } from './code_syntax.styles';
 import { euiCodeStyles } from './code.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiCode = function EuiCode(_ref) {
@@ -39,8 +40,7 @@ export var EuiCode = function EuiCode(_ref) {
     return getHtmlContent(data, children);
   }, [data, children]);
   var classes = classNames('euiCode', className);
-  var euiTheme = useEuiTheme();
-  var styles = euiCodeStyles(euiTheme);
+  var styles = euiCodeStyles(useEuiTheme(), useEuiCodeSyntaxVariables());
   var cssStyles = [styles.euiCode, transparentBackground && styles.transparentBackground];
   return ___EmotionJSX("code", _extends({
     className: classes,

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

@@ -9,7 +9,6 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css } from '@emotion/react';
 import { logicalShorthandCSS } from '../../global_styling';
-import { euiCodeSyntaxColors, euiCodeSyntaxTokens } from './code_syntax.styles';
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "gfiv3z-transparentBackground",
   styles: "background:transparent;label:transparentBackground;"
@@ -18,14 +17,13 @@ var _ref = process.env.NODE_ENV === "production" ? {
   styles: "background:transparent;label:transparentBackground;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-export var euiCodeStyles = function euiCodeStyles(euiThemeContext) {
+export var euiCodeStyles = function euiCodeStyles(euiThemeContext, euiCodeSyntaxVariables) {
   var euiTheme = euiThemeContext.euiTheme;
-  var euiCodeSyntax = euiCodeSyntaxColors(euiThemeContext);
   return {
     /*
      * 1. Size the code against the text its embedded within.
      */
-    euiCode: /*#__PURE__*/css("font-family:", euiTheme.font.familyCode, ";font-size:0.9em;", logicalShorthandCSS('padding', '0.2em 0.5em'), "background:", euiCodeSyntax.backgroundColor, ";border-radius:", euiTheme.border.radius.small, ";font-weight:", euiTheme.font.weight.bold, ";color:", euiCodeSyntax.inlineCodeColor, ";", euiCodeSyntaxTokens(euiThemeContext), ";;label:euiCode;"),
+    euiCode: /*#__PURE__*/css("font-family:", euiTheme.font.familyCode, ";font-size:0.9em;", logicalShorthandCSS('padding', '0.2em 0.5em'), "background:", euiCodeSyntaxVariables.backgroundColor, ";border-radius:", euiTheme.border.radius.small, ";font-weight:", euiTheme.font.weight.bold, ";color:", euiCodeSyntaxVariables.inlineCodeColor, ";", euiCodeSyntaxVariables.tokensCss, ";;label:euiCode;"),
     transparentBackground: _ref
   };
 };

package/es/components/code/code_block.js

@@ -33,6 +33,7 @@ import { useFullScreen, EuiCodeBlockFullScreenWrapper } from './code_block_full_
 import { EuiCodeBlockControls } from './code_block_controls';
 import { EuiCodeBlockVirtualized } from './code_block_virtualized';
 import { euiCodeBlockStyles, euiCodeBlockPreStyles, euiCodeBlockCodeStyles } from './code_block.styles';
+import { useEuiCodeSyntaxVariables } from './code_syntax.styles';
 
 // Based on observed line height for non-virtualized code blocks
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -67,6 +68,7 @@ export var EuiCodeBlock = function EuiCodeBlock(_ref) {
     lineNumbers = _ref$lineNumbers === void 0 ? false : _ref$lineNumbers,
     rest = _objectWithoutProperties(_ref, _excluded);
   var euiTheme = useEuiTheme();
+  var euiCodeSyntaxVariables = useEuiCodeSyntaxVariables();
   var language = useMemo(function () {
     return checkSupportedLanguage(_language);
   }, [_language]);
@@ -118,7 +120,7 @@ export var EuiCodeBlock = function EuiCodeBlock(_ref) {
     onKeyDown = _useFullScreen.onKeyDown;
   var hasControls = !!(copyButton || fullScreenButton);
   var hasBothControls = !!(copyButton && fullScreenButton);
-  var styles = euiCodeBlockStyles(euiTheme);
+  var styles = euiCodeBlockStyles(euiTheme, euiCodeSyntaxVariables);
   var cssStyles = [styles.euiCodeBlock, styles[fontSize], transparentBackground && styles.transparentBackground, hasControls && (hasBothControls ? styles.hasBothControls[paddingSize] : styles.hasControls[paddingSize])];
   var _useMemo = useMemo(function () {
       var isWhiteSpacePre = whiteSpace === 'pre' || isVirtualized;
@@ -143,14 +145,14 @@ export var EuiCodeBlock = function EuiCodeBlock(_ref) {
     preProps = _useMemo2[0],
     preFullscreenProps = _useMemo2[1];
   var codeProps = useMemo(function () {
-    var styles = euiCodeBlockCodeStyles(euiTheme);
+    var styles = euiCodeBlockCodeStyles(euiTheme, euiCodeSyntaxVariables);
     var cssStyles = [styles.euiCodeBlock__code, isVirtualized && styles.isVirtualized];
     return _objectSpread({
       className: 'euiCodeBlock__code',
       css: cssStyles,
       'data-code-language': language
     }, rest);
-  }, [language, euiTheme, isVirtualized, rest]);
+  }, [language, euiTheme, euiCodeSyntaxVariables, isVirtualized, rest]);
   return ___EmotionJSX("div", {
     css: cssStyles,
     className: classNames('euiCodeBlock', className),

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

@@ -22,7 +22,6 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css } from '@emotion/react';
 import { euiPaddingSize, euiFontSize, euiScrollBarStyles, mathWithUnits } from '../../global_styling';
-import { euiCodeSyntaxColors, euiCodeSyntaxTokens } from './code_syntax.styles';
 var _ref4 = process.env.NODE_ENV === "production" ? {
   name: "i92zwx-isFullScreen",
   styles: "position:fixed;inset:0;label:isFullScreen;"
@@ -39,11 +38,10 @@ var _ref5 = process.env.NODE_ENV === "production" ? {
   styles: "background:transparent;label:transparentBackground;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-export var euiCodeBlockStyles = function euiCodeBlockStyles(euiThemeContext) {
+export var euiCodeBlockStyles = function euiCodeBlockStyles(euiThemeContext, euiCodeSyntaxVariables) {
   var euiTheme = euiThemeContext.euiTheme;
-  var euiCodeSyntax = euiCodeSyntaxColors(euiThemeContext);
   return {
-    euiCodeBlock: /*#__PURE__*/css("max-inline-size:100%;display:block;position:relative;background:", euiCodeSyntax.backgroundColor, ";", euiCodeSyntaxTokens(euiThemeContext), ";;label:euiCodeBlock;"),
+    euiCodeBlock: /*#__PURE__*/css("max-inline-size:100%;display:block;position:relative;background:", euiCodeSyntaxVariables.backgroundColor, ";", euiCodeSyntaxVariables.tokensCss, ";;label:euiCodeBlock;"),
     // Font size
     s: /*#__PURE__*/css(euiFontSize(euiThemeContext, 'xs'), ";;label:s;"),
     m: /*#__PURE__*/css(euiFontSize(euiThemeContext, 's'), ";;label:m;"),
@@ -115,11 +113,10 @@ var _ref = process.env.NODE_ENV === "production" ? {
   styles: "position:relative;label:isVirtualized;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-export var euiCodeBlockCodeStyles = function euiCodeBlockCodeStyles(euiThemeContext) {
+export var euiCodeBlockCodeStyles = function euiCodeBlockCodeStyles(euiThemeContext, euiCodeSyntaxVariables) {
   var euiTheme = euiThemeContext.euiTheme;
-  var euiCodeSyntax = euiCodeSyntaxColors(euiThemeContext);
   return {
-    euiCodeBlock__code: /*#__PURE__*/css("font-family:", euiTheme.font.familyCode, ";font-size:inherit;color:", euiCodeSyntax.color, ";display:block;;label:euiCodeBlock__code;"),
+    euiCodeBlock__code: /*#__PURE__*/css("font-family:", euiTheme.font.familyCode, ";font-size:inherit;color:", euiCodeSyntaxVariables.color, ";display:block;;label:euiCodeBlock__code;"),
     isVirtualized: _ref
   };
 };

package/es/components/code/code_block_controls.js

@@ -8,13 +8,13 @@
 
 import React, { Fragment } from 'react';
 import { useEuiTheme } from '../../services';
+import { useEuiCodeSyntaxVariables } from './code_syntax.styles';
 import { euiCodeBlockControlsStyles } from './code_block_controls.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiCodeBlockControls = function EuiCodeBlockControls(_ref) {
   var paddingSize = _ref.paddingSize,
     controls = _ref.controls;
-  var euiTheme = useEuiTheme();
-  var styles = euiCodeBlockControlsStyles(euiTheme);
+  var styles = euiCodeBlockControlsStyles(useEuiTheme(), useEuiCodeSyntaxVariables());
   var cssStyles = [styles.euiCodeBlock__controls, styles.offset[paddingSize]];
   var hasControls = controls.some(function (control) {
     return !!control;

package/es/components/code/code_block_controls.styles.js

@@ -16,7 +16,6 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css } from '@emotion/react';
 import { euiPaddingSize } from '../../global_styling';
-import { euiCodeSyntaxColors } from './code_syntax.styles';
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "to86kv-none",
   styles: "inset-block-start:0;inset-inline-end:0;label:none;"
@@ -25,11 +24,10 @@ var _ref = process.env.NODE_ENV === "production" ? {
   styles: "inset-block-start:0;inset-inline-end:0;label:none;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-export var euiCodeBlockControlsStyles = function euiCodeBlockControlsStyles(euiThemeContext) {
+export var euiCodeBlockControlsStyles = function euiCodeBlockControlsStyles(euiThemeContext, euiCodeSyntaxVariables) {
   var euiTheme = euiThemeContext.euiTheme;
-  var euiCodeSyntax = euiCodeSyntaxColors(euiThemeContext);
   return {
-    euiCodeBlock__controls: /*#__PURE__*/css("position:absolute;display:flex;flex-direction:column;gap:", euiTheme.size.xs, ";background:", euiCodeSyntax.backgroundColor, ";;label:euiCodeBlock__controls;"),
+    euiCodeBlock__controls: /*#__PURE__*/css("position:absolute;display:flex;flex-direction:column;gap:", euiTheme.size.xs, ";background:", euiCodeSyntaxVariables.backgroundColor, ";;label:euiCodeBlock__controls;"),
     offset: {
       none: _ref,
       s: /*#__PURE__*/css("inset-block-start:", euiPaddingSize(euiThemeContext, 's'), ";inset-inline-end:", euiPaddingSize(euiThemeContext, 's'), ";;label:s;"),

package/es/components/code/code_block_full_screen.js

@@ -18,6 +18,7 @@ import { useEuiI18n } from '../i18n';
 import { EuiButtonIcon } from '../button';
 import { EuiFocusTrap } from '../focus_trap';
 import { EuiOverlayMask } from '../overlay_mask';
+import { useEuiCodeSyntaxVariables } from './code_syntax.styles';
 import { euiCodeBlockStyles } from './code_block.styles';
 
 /**
@@ -73,8 +74,7 @@ export var useFullScreen = function useFullScreen(_ref) {
  */
 export var EuiCodeBlockFullScreenWrapper = function EuiCodeBlockFullScreenWrapper(_ref2) {
   var children = _ref2.children;
-  var euiThemeContext = useEuiTheme();
-  var styles = euiCodeBlockStyles(euiThemeContext);
+  var styles = euiCodeBlockStyles(useEuiTheme(), useEuiCodeSyntaxVariables());
   var cssStyles = [styles.euiCodeBlock, styles.l,
   // Force fullscreen to use large font
   styles.isFullScreen];

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

@@ -6,39 +6,44 @@
  * Side Public License, v 1.
  */
 
-import { makeHighContrastColor, euiPaletteColorBlind } from '../../services';
+import { useMemo } from 'react';
+import { useEuiTheme, makeHighContrastColor, euiPaletteColorBlind } from '../../services';
 var visColors = euiPaletteColorBlind();
-export var euiCodeSyntaxColors = function euiCodeSyntaxColors(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
-  var backgroundColor = euiTheme.colors.lightestShade;
-  return {
-    backgroundColor: backgroundColor,
-    color: makeHighContrastColor(euiTheme.colors.text)(backgroundColor),
-    inlineCodeColor: makeHighContrastColor(visColors[3])(backgroundColor),
-    selectedBackgroundColor: 'inherit',
-    commentColor: makeHighContrastColor(euiTheme.colors.subduedText)(backgroundColor),
-    selectorTagColor: 'inherit',
-    stringColor: makeHighContrastColor(visColors[2])(backgroundColor),
-    tagColor: makeHighContrastColor(visColors[1])(backgroundColor),
-    nameColor: makeHighContrastColor(visColors[1])(backgroundColor),
-    numberColor: makeHighContrastColor(visColors[0])(backgroundColor),
-    keywordColor: makeHighContrastColor(visColors[3])(backgroundColor),
-    functionTitleColor: 'inherit',
-    typeColor: makeHighContrastColor(visColors[1])(backgroundColor),
-    attributeColor: 'inherit',
-    symbolColor: makeHighContrastColor(visColors[9])(backgroundColor),
-    paramsColor: 'inherit',
-    metaColor: makeHighContrastColor(euiTheme.colors.subduedText)(backgroundColor),
-    titleColor: makeHighContrastColor(visColors[7])(backgroundColor),
-    sectionColor: makeHighContrastColor(visColors[9])(backgroundColor),
-    additionColor: makeHighContrastColor(visColors[0])(backgroundColor),
-    deletionColor: makeHighContrastColor(euiTheme.colors.danger)(backgroundColor),
-    selectorClassColor: 'inherit',
-    selectorIdColor: 'inherit'
-  };
-};
-export var euiCodeSyntaxTokens = function euiCodeSyntaxTokens(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
-  var euiCodeBlock = euiCodeSyntaxColors(euiThemeContext);
-  return "\n    .token.punctuation:not(.interpolation-punctuation):not([class*='attr-']) {\n      opacity: .7;\n    }\n  \n    .token.comment,\n    .token.prolog,\n    .token.doctype,\n    .token.cdata,\n    .token.coord,\n    .token.blockquote {\n      color: ".concat(euiCodeBlock.commentColor, ";\n      font-style: italic;\n    }\n  \n    .token.selector {\n      color: ").concat(euiCodeBlock.selectorTagColor, ";\n    }\n  \n    .token.string,\n    .token.interpolation,\n    .token.interpolation-punctuation,\n    .token.doc-comment .token.keyword,\n    .token.attr-value,\n    .token.url .token.content {\n      color: ").concat(euiCodeBlock.stringColor, ";\n    }\n  \n    .token.number,\n    .token.boolean,\n    .token.keyword.nil,\n    .token.regex,\n    .token.variable,\n    .token.unit,\n    .token.hexcode,\n    .token.attr-name,\n    .token.attr-equals {\n      color: ").concat(euiCodeBlock.numberColor, ";\n    }\n  \n    .token.atrule .token.rule,\n    .token.keyword {\n      color: ").concat(euiCodeBlock.keywordColor, ";\n    }\n  \n    .token.function {\n      color: ").concat(euiCodeBlock.functionTitleColor, ";\n    }\n  \n    .token.tag {\n      color: ").concat(euiCodeBlock.tagColor, ";\n    }\n  \n    .token.class-name {\n      color: ").concat(euiCodeBlock.typeColor, ";\n    }\n  \n    .token.property {\n      color: ").concat(euiCodeBlock.attributeColor, ";\n    }\n  \n    .token.console,\n    .token.list-punctuation,\n    .token.url-reference,\n    .token.url .token.url {\n      color: ").concat(euiCodeBlock.symbolColor, ";\n    }\n  \n    .token.paramater {\n      color: ").concat(euiCodeBlock.paramsColor, ";\n    }\n  \n    .token.meta,\n    .token.important {\n      color: ").concat(euiCodeBlock.metaColor, ";\n    }\n  \n    .token.title {\n      color: ").concat(euiCodeBlock.titleColor, ";\n    }\n  \n    .token.section {\n      color: ").concat(euiCodeBlock.sectionColor, ";\n    }\n  \n    .token.prefix.inserted,\n    .token.prefix.deleted {\n      padding-inline-start: -").concat(euiTheme.size.xs, ";\n      margin-inline-start:  -").concat(euiTheme.size.xs, ";\n    }\n  \n    .token.prefix.inserted {\n      box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(euiCodeBlock.additionColor, ";\n      color: ").concat(euiCodeBlock.additionColor, ";\n    }\n  \n    .token.prefix.deleted {\n      box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(euiCodeBlock.deletionColor, ";\n      color: ").concat(euiCodeBlock.deletionColor, ";\n    }\n  \n    .token.selector .token.class {\n      color: ").concat(euiCodeBlock.selectorClassColor, ";\n    }\n  \n    .token.selector .token.id {\n      color: ").concat(euiCodeBlock.selectorIdColor, ";\n    }\n  \n    .token.italic {\n      font-style: italic;\n    }\n  \n    .token.important,\n    .token.bold {\n      font-weight: ").concat(euiTheme.font.weight.bold, ";\n    }\n  \n    .token.url-reference,\n    .token.url .token.url {\n      text-decoration: underline;\n    }\n  \n    .token.entity {\n      cursor: help;\n    }\n  ");
+
+// These variables are computationally expensive, so it needs
+// to be a hook in order to memoize it per theme
+export var useEuiCodeSyntaxVariables = function useEuiCodeSyntaxVariables() {
+  var _useEuiTheme = useEuiTheme(),
+    euiTheme = _useEuiTheme.euiTheme;
+  return useMemo(function () {
+    var backgroundColor = euiTheme.colors.lightestShade;
+    return {
+      backgroundColor: backgroundColor,
+      color: makeHighContrastColor(euiTheme.colors.text)(backgroundColor),
+      inlineCodeColor: makeHighContrastColor(visColors[3])(backgroundColor),
+      selectedBackgroundColor: 'inherit',
+      commentColor: makeHighContrastColor(euiTheme.colors.subduedText)(backgroundColor),
+      selectorTagColor: 'inherit',
+      stringColor: makeHighContrastColor(visColors[2])(backgroundColor),
+      tagColor: makeHighContrastColor(visColors[1])(backgroundColor),
+      nameColor: makeHighContrastColor(visColors[1])(backgroundColor),
+      numberColor: makeHighContrastColor(visColors[0])(backgroundColor),
+      keywordColor: makeHighContrastColor(visColors[3])(backgroundColor),
+      functionTitleColor: 'inherit',
+      typeColor: makeHighContrastColor(visColors[1])(backgroundColor),
+      attributeColor: 'inherit',
+      symbolColor: makeHighContrastColor(visColors[9])(backgroundColor),
+      paramsColor: 'inherit',
+      metaColor: makeHighContrastColor(euiTheme.colors.subduedText)(backgroundColor),
+      titleColor: makeHighContrastColor(visColors[7])(backgroundColor),
+      sectionColor: makeHighContrastColor(visColors[9])(backgroundColor),
+      additionColor: makeHighContrastColor(visColors[0])(backgroundColor),
+      deletionColor: makeHighContrastColor(euiTheme.colors.danger)(backgroundColor),
+      selectorClassColor: 'inherit',
+      selectorIdColor: 'inherit',
+      get tokensCss() {
+        return "\n  .token.punctuation:not(.interpolation-punctuation):not([class*='attr-']) {\n    opacity: .7;\n  }\n\n  .token.comment,\n  .token.prolog,\n  .token.doctype,\n  .token.cdata,\n  .token.coord,\n  .token.blockquote {\n    color: ".concat(this.commentColor, ";\n    font-style: italic;\n  }\n\n  .token.selector {\n    color: ").concat(this.selectorTagColor, ";\n  }\n\n  .token.string,\n  .token.interpolation,\n  .token.interpolation-punctuation,\n  .token.doc-comment .token.keyword,\n  .token.attr-value,\n  .token.url .token.content {\n    color: ").concat(this.stringColor, ";\n  }\n\n  .token.number,\n  .token.boolean,\n  .token.keyword.nil,\n  .token.regex,\n  .token.variable,\n  .token.unit,\n  .token.hexcode,\n  .token.attr-name,\n  .token.attr-equals {\n    color: ").concat(this.numberColor, ";\n  }\n\n  .token.atrule .token.rule,\n  .token.keyword {\n    color: ").concat(this.keywordColor, ";\n  }\n\n  .token.function {\n    color: ").concat(this.functionTitleColor, ";\n  }\n\n  .token.tag {\n    color: ").concat(this.tagColor, ";\n  }\n\n  .token.class-name {\n    color: ").concat(this.typeColor, ";\n  }\n\n  .token.property {\n    color: ").concat(this.attributeColor, ";\n  }\n\n  .token.console,\n  .token.list-punctuation,\n  .token.url-reference,\n  .token.url .token.url {\n    color: ").concat(this.symbolColor, ";\n  }\n\n  .token.paramater {\n    color: ").concat(this.paramsColor, ";\n  }\n\n  .token.meta,\n  .token.important {\n    color: ").concat(this.metaColor, ";\n  }\n\n  .token.title {\n    color: ").concat(this.titleColor, ";\n  }\n\n  .token.section {\n    color: ").concat(this.sectionColor, ";\n  }\n\n  .token.prefix.inserted,\n  .token.prefix.deleted {\n    padding-inline-start: -").concat(euiTheme.size.xs, ";\n    margin-inline-start:  -").concat(euiTheme.size.xs, ";\n  }\n\n  .token.prefix.inserted {\n    box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(this.additionColor, ";\n    color: ").concat(this.additionColor, ";\n  }\n\n  .token.prefix.deleted {\n    box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(this.deletionColor, ";\n    color: ").concat(this.deletionColor, ";\n  }\n\n  .token.selector .token.class {\n    color: ").concat(this.selectorClassColor, ";\n  }\n\n  .token.selector .token.id {\n    color: ").concat(this.selectorIdColor, ";\n  }\n\n  .token.italic {\n    font-style: italic;\n  }\n\n  .token.important,\n  .token.bold {\n    font-weight: ").concat(euiTheme.font.weight.bold, ";\n  }\n\n  .token.url-reference,\n  .token.url .token.url {\n    text-decoration: underline;\n  }\n\n  .token.entity {\n    cursor: help;\n  }");
+      }
+    };
+  }, [euiTheme]);
 };

package/es/components/comment_list/comment_event.js

@@ -10,9 +10,10 @@ import React, { useMemo } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
 import { useEuiTheme } from '../../services';
+import { useEuiBorderColorCSS } from '../../global_styling';
 import { EuiPanel } from '../panel';
 import { EuiAvatar } from '../avatar';
-import { euiCommentEventBorderColors, euiCommentEventStyles, euiCommentEventHeaderStyles, euiCommentEventBodyStyles } from './comment_event.styles';
+import { euiCommentEventStyles, euiCommentEventHeaderStyles, euiCommentEventBodyStyles } from './comment_event.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiCommentEvent = function EuiCommentEvent(_ref) {
   var children = _ref.children,
@@ -64,7 +65,7 @@ export var EuiCommentEvent = function EuiCommentEvent(_ref) {
    * Styles
    */
   var euiTheme = useEuiTheme();
-  var borderStyles = euiCommentEventBorderColors(euiTheme);
+  var borderStyles = useEuiBorderColorCSS();
   var styles = euiCommentEventStyles(euiTheme);
   var cssStyles = [styles.euiCommentEvent, showEventBorders && styles.border, showEventBorders && borderStyles[eventColor]];
   var headerStyles = euiCommentEventHeaderStyles(euiTheme);

package/es/components/comment_list/comment_event.styles.js

@@ -8,23 +8,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { tintOrShade } from '../../services';
 import { logicalCSS } from '../../global_styling';
-export var euiCommentEventBorderColors = function euiCommentEventBorderColors(_ref3) {
-  var euiTheme = _ref3.euiTheme,
-    colorMode = _ref3.colorMode;
-  var ratio = 0.6;
-  return {
-    warning: /*#__PURE__*/css("border-color:", tintOrShade(euiTheme.colors.warning, 0.4, colorMode), ";;label:warning;"),
-    accent: /*#__PURE__*/css("border-color:", tintOrShade(euiTheme.colors.accent, ratio, colorMode), ";;label:accent;"),
-    primary: /*#__PURE__*/css("border-color:", tintOrShade(euiTheme.colors.primary, ratio, colorMode), ";;label:primary;"),
-    success: /*#__PURE__*/css("border-color:", tintOrShade(euiTheme.colors.success, ratio, colorMode), ";;label:success;"),
-    danger: /*#__PURE__*/css("border-color:", tintOrShade(euiTheme.colors.danger, ratio, colorMode), ";;label:danger;"),
-    subdued: /*#__PURE__*/css("border-color:", euiTheme.border.color, ";;label:subdued;"),
-    transparent: /*#__PURE__*/css("border-color:", euiTheme.border.color, ";;label:transparent;"),
-    plain: /*#__PURE__*/css("border-color:", euiTheme.border.color, ";;label:plain;")
-  };
-};
 var _ref2 = process.env.NODE_ENV === "production" ? {
   name: "yoyozp-euiCommentEvent",
   styles: "overflow:hidden;label:euiCommentEvent;"
@@ -62,8 +46,8 @@ export var euiCommentEventHeaderStyles = function euiCommentEventHeaderStyles(eu
     euiCommentEvent__headerActions: /*#__PURE__*/css("display:flex;flex-wrap:wrap;gap:", euiTheme.size.xs, ";;label:euiCommentEvent__headerActions;")
   };
 };
-export var euiCommentEventBodyStyles = function euiCommentEventBodyStyles(_ref4) {
-  var euiTheme = _ref4.euiTheme;
+export var euiCommentEventBodyStyles = function euiCommentEventBodyStyles(_ref3) {
+  var euiTheme = _ref3.euiTheme;
   return {
     euiCommentEvent__body: /*#__PURE__*/css(";label:euiCommentEvent__body;"),
     // types

package/es/components/context_menu/context_menu.js

@@ -1,5 +1,5 @@
 var _excluded = ["isSeparator", "key"],
-  _excluded2 = ["panel", "name", "key", "icon", "onClick", "toolTipTitle", "toolTipContent"],
+  _excluded2 = ["panel", "name", "key", "icon", "onClick"],
   _excluded3 = ["theme", "panels", "onPanelChange", "className", "initialPanelId", "size"];
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -218,8 +218,6 @@ export var EuiContextMenuClass = /*#__PURE__*/function (_Component) {
           key = item.key,
           icon = item.icon,
           onClick = item.onClick,
-          toolTipTitle = item.toolTipTitle,
-          toolTipContent = item.toolTipContent,
           rest = _objectWithoutProperties(item, _excluded2);
         var onClickHandler = panel ? function (event) {
           if (onClick && event) {
@@ -238,9 +236,7 @@ export var EuiContextMenuClass = /*#__PURE__*/function (_Component) {
           key: key || (typeof name === 'string' ? name : undefined) || index,
           icon: icon,
           onClick: onClickHandler,
-          hasPanel: Boolean(panel),
-          toolTipTitle: toolTipTitle,
-          toolTipContent: toolTipContent
+          hasPanel: Boolean(panel)
         }, rest), name);
       });
     }

package/es/components/context_menu/context_menu_item.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "className", "hasPanel", "icon", "buttonRef", "disabled", "layoutAlign", "toolTipTitle", "toolTipContent", "toolTipPosition", "toolTipProps", "href", "target", "rel", "size"];
+var _excluded = ["children", "className", "hasPanel", "icon", "buttonRef", "disabled", "layoutAlign", "toolTipContent", "toolTipProps", "href", "target", "rel", "size"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -36,10 +36,7 @@ export var EuiContextMenuItem = function EuiContextMenuItem(_ref) {
     _disabled = _ref.disabled,
     _ref$layoutAlign = _ref.layoutAlign,
     layoutAlign = _ref$layoutAlign === void 0 ? 'center' : _ref$layoutAlign,
-    toolTipTitle = _ref.toolTipTitle,
     toolTipContent = _ref.toolTipContent,
-    _ref$toolTipPosition = _ref.toolTipPosition,
-    toolTipPosition = _ref$toolTipPosition === void 0 ? 'right' : _ref$toolTipPosition,
     toolTipProps = _ref.toolTipProps,
     href = _ref.href,
     target = _ref.target,
@@ -110,8 +107,7 @@ export var EuiContextMenuItem = function EuiContextMenuItem(_ref) {
   if (toolTipContent) {
     var anchorClasses = classNames('eui-displayBlock', toolTipProps === null || toolTipProps === void 0 ? void 0 : toolTipProps.anchorClassName);
     return ___EmotionJSX(EuiToolTip, _extends({
-      title: toolTipTitle ? toolTipTitle : null,
-      position: toolTipPosition
+      position: "right"
     }, toolTipProps, {
       anchorClassName: anchorClasses,
       content: toolTipContent
@@ -139,14 +135,6 @@ EuiContextMenuItem.propTypes = {
      * Accepts any prop that EuiToolTip does, except for `content` and `children`.
      */
   toolTipProps: PropTypes.any,
-  /**
-     * @deprecated Use toolTipProps.title instead
-     */
-  toolTipTitle: PropTypes.node,
-  /**
-     * @deprecated Use tooltipProps.position instead
-     */
-  toolTipPosition: PropTypes.oneOf(["top", "right", "bottom", "left"]),
   href: PropTypes.string,
   target: PropTypes.string,
   rel: PropTypes.string,