@elastic/eui 92.2.0 → 93.0.0

package/i18ntokens.json

@@ -41,14 +41,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 664,
+        "line": 657,
         "column": 10,
-        "index": 17148
+        "index": 16964
       },
       "end": {
-        "line": 668,
+        "line": 661,
         "column": 12,
-        "index": 17351
+        "index": 17167
       }
     },
     "filepath": "src/components/basic_table/basic_table.tsx"
@@ -59,14 +59,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 677,
+        "line": 670,
         "column": 12,
-        "index": 17548
+        "index": 17364
       },
       "end": {
-        "line": 681,
+        "line": 674,
         "column": 14,
-        "index": 17827
+        "index": 17643
       }
     },
     "filepath": "src/components/basic_table/basic_table.tsx"
@@ -77,14 +77,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 685,
+        "line": 678,
         "column": 12,
-        "index": 17899
+        "index": 17715
       },
       "end": {
-        "line": 689,
+        "line": 682,
         "column": 14,
-        "index": 18139
+        "index": 17955
       }
     },
     "filepath": "src/components/basic_table/basic_table.tsx"
@@ -95,14 +95,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 694,
+        "line": 687,
         "column": 10,
-        "index": 18215
+        "index": 18031
       },
       "end": {
-        "line": 698,
+        "line": 691,
         "column": 12,
-        "index": 18399
+        "index": 18215
       }
     },
     "filepath": "src/components/basic_table/basic_table.tsx"
@@ -113,14 +113,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 740,
+        "line": 733,
         "column": 6,
-        "index": 19397
+        "index": 19213
       },
       "end": {
-        "line": 740,
+        "line": 733,
         "column": 77,
-        "index": 19468
+        "index": 19284
       }
     },
     "filepath": "src/components/basic_table/basic_table.tsx"
@@ -131,14 +131,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 1136,
+        "line": 1129,
         "column": 8,
-        "index": 31279
+        "index": 31095
       },
       "end": {
-        "line": 1136,
+        "line": 1129,
         "column": 79,
-        "index": 31350
+        "index": 31166
       }
     },
     "filepath": "src/components/basic_table/basic_table.tsx"
@@ -149,14 +149,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 1361,
+        "line": 1354,
         "column": 8,
-        "index": 37925
+        "index": 37741
       },
       "end": {
-        "line": 1365,
+        "line": 1358,
         "column": 9,
-        "index": 38084
+        "index": 37900
       }
     },
     "filepath": "src/components/basic_table/basic_table.tsx"
@@ -437,14 +437,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 55,
+        "line": 56,
         "column": 49,
-        "index": 1750
+        "index": 1816
       },
       "end": {
-        "line": 61,
+        "line": 62,
         "column": 3,
-        "index": 1905
+        "index": 1971
       }
     },
     "filepath": "src/components/code/code_block_full_screen.tsx"
@@ -455,14 +455,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 55,
+        "line": 56,
         "column": 49,
-        "index": 1750
+        "index": 1816
       },
       "end": {
-        "line": 61,
+        "line": 62,
         "column": 3,
-        "index": 1905
+        "index": 1971
       }
     },
     "filepath": "src/components/code/code_block_full_screen.tsx"
@@ -917,60 +917,6 @@
     },
     "filepath": "src/components/combo_box/combo_box.tsx"
   },
-  {
-    "token": "euiContext.stories.name",
-    "defString": "John Doe",
-    "highlighting": "string",
-    "loc": {
-      "start": {
-        "line": 34,
-        "column": 15,
-        "index": 1005
-      },
-      "end": {
-        "line": 34,
-        "column": 64,
-        "index": 1054
-      }
-    },
-    "filepath": "src/components/context/context.stories.tsx"
-  },
-  {
-    "token": "euiContext.stories.greeting",
-    "defString": "Welcome, {name}!",
-    "highlighting": "string",
-    "loc": {
-      "start": {
-        "line": 39,
-        "column": 10,
-        "index": 1152
-      },
-      "end": {
-        "line": 45,
-        "column": 12,
-        "index": 1342
-      }
-    },
-    "filepath": "src/components/context/context.stories.tsx"
-  },
-  {
-    "token": "euiContext.stories.guestNo",
-    "defString": "You are guest #",
-    "highlighting": "string",
-    "loc": {
-      "start": {
-        "line": 47,
-        "column": 12,
-        "index": 1369
-      },
-      "end": {
-        "line": 50,
-        "column": 14,
-        "index": 1481
-      }
-    },
-    "filepath": "src/components/context/context.stories.tsx"
-  },
   {
     "token": "euiDataGridCellActions.expandButtonTitle",
     "defString": "Click or hit enter to interact with cell content",
@@ -5783,14 +5729,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 695,
+        "line": 682,
         "column": 16,
-        "index": 20476
+        "index": 20150
       },
       "end": {
-        "line": 698,
+        "line": 685,
         "column": 18,
-        "index": 20670
+        "index": 20344
       }
     },
     "filepath": "src/components/popover/popover.tsx"
@@ -6821,6 +6767,60 @@
     },
     "filepath": "src/components/toast/toast.tsx"
   },
+  {
+    "token": "euiTourFooter.endTour",
+    "defString": "End tour",
+    "highlighting": "string",
+    "loc": {
+      "start": {
+        "line": 95,
+        "column": 14,
+        "index": 2888
+      },
+      "end": {
+        "line": 102,
+        "column": 15,
+        "index": 3156
+      }
+    },
+    "filepath": "src/components/tour/_tour_footer.tsx"
+  },
+  {
+    "token": "euiTourFooter.skipTour",
+    "defString": "Skip tour",
+    "highlighting": "string",
+    "loc": {
+      "start": {
+        "line": 95,
+        "column": 14,
+        "index": 2888
+      },
+      "end": {
+        "line": 102,
+        "column": 15,
+        "index": 3156
+      }
+    },
+    "filepath": "src/components/tour/_tour_footer.tsx"
+  },
+  {
+    "token": "euiTourFooter.closeTour",
+    "defString": "Close tour",
+    "highlighting": "string",
+    "loc": {
+      "start": {
+        "line": 95,
+        "column": 14,
+        "index": 2888
+      },
+      "end": {
+        "line": 102,
+        "column": 15,
+        "index": 3156
+      }
+    },
+    "filepath": "src/components/tour/_tour_footer.tsx"
+  },
   {
     "token": "euiTourStepIndicator.isActive",
     "defString": "active",
@@ -6893,60 +6893,6 @@
     },
     "filepath": "src/components/tour/tour_step_indicator.tsx"
   },
-  {
-    "token": "euiTourStep.endTour",
-    "defString": "End tour",
-    "highlighting": "string",
-    "loc": {
-      "start": {
-        "line": 256,
-        "column": 10,
-        "index": 6776
-      },
-      "end": {
-        "line": 263,
-        "column": 11,
-        "index": 7010
-      }
-    },
-    "filepath": "src/components/tour/tour_step.tsx"
-  },
-  {
-    "token": "euiTourStep.skipTour",
-    "defString": "Skip tour",
-    "highlighting": "string",
-    "loc": {
-      "start": {
-        "line": 256,
-        "column": 10,
-        "index": 6776
-      },
-      "end": {
-        "line": 263,
-        "column": 11,
-        "index": 7010
-      }
-    },
-    "filepath": "src/components/tour/tour_step.tsx"
-  },
-  {
-    "token": "euiTourStep.closeTour",
-    "defString": "Close tour",
-    "highlighting": "string",
-    "loc": {
-      "start": {
-        "line": 256,
-        "column": 10,
-        "index": 6776
-      },
-      "end": {
-        "line": 263,
-        "column": 11,
-        "index": 7010
-      }
-    },
-    "filepath": "src/components/tour/tour_step.tsx"
-  },
   {
     "token": "euiTreeView.listNavigationInstructions",
     "defString": "You can quickly navigate this list using arrow keys.",

package/lib/components/basic_table/basic_table.js

@@ -255,15 +255,6 @@ 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/lib/components/basic_table/in_memory_table.js

@@ -132,7 +132,6 @@ 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;
@@ -265,17 +264,9 @@ var EuiInMemoryTable = /*#__PURE__*/function (_Component) {
       allowNeutralSort: allowNeutralSort !== false,
       showPerPageOptions: showPerPageOptions
     };
-    _this.tableRef = /*#__PURE__*/_react.default.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,
@@ -444,7 +435,6 @@ 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
       (0, _react2.jsx)(_basic_table.EuiBasicTable, _extends({
-        ref: this.tableRef,
         items: items,
         itemId: itemId,
         rowProps: rowProps,

package/lib/components/beacon/beacon.js

@@ -5,11 +5,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiBeacon = exports.COLORS = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _beacon = require("./beacon.styles");
+var _global_styling = require("../../global_styling");
 var _services = require("../../services");
+var _beacon = require("./beacon.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["className", "size", "color", "style"];
 /*
@@ -20,6 +21,8 @@ var _excluded = ["className", "size", "color", "style"];
  * Side Public License, v 1.
  */
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -42,10 +45,12 @@ var EuiBeacon = function EuiBeacon(_ref) {
   var classes = (0, _classnames.default)('euiBeacon', className);
   var styles = (0, _beacon.euiBeaconStyles)(euiTheme);
   var cssStyles = [styles.euiBeacon, styles[color]];
-  var beaconStyle = _objectSpread(_objectSpread({}, style), {}, {
-    height: size,
-    width: size
-  });
+  var beaconStyle = (0, _react.useMemo)(function () {
+    return (0, _global_styling.logicalStyles)(_objectSpread(_objectSpread({}, style), {}, {
+      height: size,
+      width: size
+    }));
+  }, [style, size]);
   return (0, _react2.jsx)("div", _extends({
     className: classes,
     css: cssStyles,

package/lib/components/breadcrumbs/breadcrumb.js

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

package/lib/components/code/code.js

@@ -11,6 +11,7 @@ var _refractor = require("refractor");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _utils = require("./utils");
 var _services = require("../../services");
+var _code_syntax = require("./code_syntax.styles");
 var _code = require("./code.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["transparentBackground", "language", "children", "className"];
@@ -48,8 +49,7 @@ var EuiCode = function EuiCode(_ref) {
     return (0, _utils.getHtmlContent)(data, children);
   }, [data, children]);
   var classes = (0, _classnames.default)('euiCode', className);
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _code.euiCodeStyles)(euiTheme);
+  var styles = (0, _code.euiCodeStyles)((0, _services.useEuiTheme)(), (0, _code_syntax.useEuiCodeSyntaxVariables)());
   var cssStyles = [styles.euiCode, transparentBackground && styles.transparentBackground];
   return (0, _react2.jsx)("code", _extends({
     className: classes,

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiCodeStyles = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
-var _code_syntax = require("./code_syntax.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
                                                                                                                                                                                                                                                                                            * or more contributor license agreements. Licensed under the Elastic License
@@ -22,14 +21,13 @@ var _ref = process.env.NODE_ENV === "production" ? {
   styles: "background:transparent;label:transparentBackground;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var euiCodeStyles = function euiCodeStyles(euiThemeContext) {
+var euiCodeStyles = function euiCodeStyles(euiThemeContext, euiCodeSyntaxVariables) {
   var euiTheme = euiThemeContext.euiTheme;
-  var euiCodeSyntax = (0, _code_syntax.euiCodeSyntaxColors)(euiThemeContext);
   return {
     /*
      * 1. Size the code against the text its embedded within.
      */
-    euiCode: /*#__PURE__*/(0, _react.css)("font-family:", euiTheme.font.familyCode, ";font-size:0.9em;", (0, _global_styling.logicalShorthandCSS)('padding', '0.2em 0.5em'), "background:", euiCodeSyntax.backgroundColor, ";border-radius:", euiTheme.border.radius.small, ";font-weight:", euiTheme.font.weight.bold, ";color:", euiCodeSyntax.inlineCodeColor, ";", (0, _code_syntax.euiCodeSyntaxTokens)(euiThemeContext), ";;label:euiCode;"),
+    euiCode: /*#__PURE__*/(0, _react.css)("font-family:", euiTheme.font.familyCode, ";font-size:0.9em;", (0, _global_styling.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/lib/components/code/code_block.js

@@ -15,6 +15,7 @@ var _code_block_full_screen = require("./code_block_full_screen");
 var _code_block_controls = require("./code_block_controls");
 var _code_block_virtualized = require("./code_block_virtualized");
 var _code_block = require("./code_block.styles");
+var _code_syntax = require("./code_syntax.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["language", "transparentBackground", "paddingSize", "fontSize", "isCopyable", "whiteSpace", "children", "className", "overflowHeight", "isVirtualized", "lineNumbers"];
 /*
@@ -75,6 +76,7 @@ var EuiCodeBlock = function EuiCodeBlock(_ref) {
     lineNumbers = _ref$lineNumbers === void 0 ? false : _ref$lineNumbers,
     rest = _objectWithoutProperties(_ref, _excluded);
   var euiTheme = (0, _services.useEuiTheme)();
+  var euiCodeSyntaxVariables = (0, _code_syntax.useEuiCodeSyntaxVariables)();
   var language = (0, _react.useMemo)(function () {
     return (0, _utils.checkSupportedLanguage)(_language);
   }, [_language]);
@@ -126,7 +128,7 @@ var EuiCodeBlock = function EuiCodeBlock(_ref) {
     onKeyDown = _useFullScreen.onKeyDown;
   var hasControls = !!(copyButton || fullScreenButton);
   var hasBothControls = !!(copyButton && fullScreenButton);
-  var styles = (0, _code_block.euiCodeBlockStyles)(euiTheme);
+  var styles = (0, _code_block.euiCodeBlockStyles)(euiTheme, euiCodeSyntaxVariables);
   var cssStyles = [styles.euiCodeBlock, styles[fontSize], transparentBackground && styles.transparentBackground, hasControls && (hasBothControls ? styles.hasBothControls[paddingSize] : styles.hasControls[paddingSize])];
   var _useMemo = (0, _react.useMemo)(function () {
       var isWhiteSpacePre = whiteSpace === 'pre' || isVirtualized;
@@ -151,14 +153,14 @@ var EuiCodeBlock = function EuiCodeBlock(_ref) {
     preProps = _useMemo2[0],
     preFullscreenProps = _useMemo2[1];
   var codeProps = (0, _react.useMemo)(function () {
-    var styles = (0, _code_block.euiCodeBlockCodeStyles)(euiTheme);
+    var styles = (0, _code_block.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 (0, _react2.jsx)("div", {
     css: cssStyles,
     className: (0, _classnames.default)('euiCodeBlock', className),

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

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiCodeBlockStyles = exports.euiCodeBlockPreStyles = exports.euiCodeBlockCodeStyles = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
-var _code_syntax = require("./code_syntax.styles");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -42,11 +41,10 @@ var _ref5 = process.env.NODE_ENV === "production" ? {
   styles: "background:transparent;label:transparentBackground;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var euiCodeBlockStyles = function euiCodeBlockStyles(euiThemeContext) {
+var euiCodeBlockStyles = function euiCodeBlockStyles(euiThemeContext, euiCodeSyntaxVariables) {
   var euiTheme = euiThemeContext.euiTheme;
-  var euiCodeSyntax = (0, _code_syntax.euiCodeSyntaxColors)(euiThemeContext);
   return {
-    euiCodeBlock: /*#__PURE__*/(0, _react.css)("max-inline-size:100%;display:block;position:relative;background:", euiCodeSyntax.backgroundColor, ";", (0, _code_syntax.euiCodeSyntaxTokens)(euiThemeContext), ";;label:euiCodeBlock;"),
+    euiCodeBlock: /*#__PURE__*/(0, _react.css)("max-inline-size:100%;display:block;position:relative;background:", euiCodeSyntaxVariables.backgroundColor, ";", euiCodeSyntaxVariables.tokensCss, ";;label:euiCodeBlock;"),
     // Font size
     s: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), ";;label:s;"),
     m: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 's'), ";;label:m;"),
@@ -120,11 +118,10 @@ var _ref = process.env.NODE_ENV === "production" ? {
   styles: "position:relative;label:isVirtualized;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var euiCodeBlockCodeStyles = function euiCodeBlockCodeStyles(euiThemeContext) {
+var euiCodeBlockCodeStyles = function euiCodeBlockCodeStyles(euiThemeContext, euiCodeSyntaxVariables) {
   var euiTheme = euiThemeContext.euiTheme;
-  var euiCodeSyntax = (0, _code_syntax.euiCodeSyntaxColors)(euiThemeContext);
   return {
-    euiCodeBlock__code: /*#__PURE__*/(0, _react.css)("font-family:", euiTheme.font.familyCode, ";font-size:inherit;color:", euiCodeSyntax.color, ";display:block;;label:euiCodeBlock__code;"),
+    euiCodeBlock__code: /*#__PURE__*/(0, _react.css)("font-family:", euiTheme.font.familyCode, ";font-size:inherit;color:", euiCodeSyntaxVariables.color, ";display:block;;label:euiCodeBlock__code;"),
     isVirtualized: _ref
   };
 };

package/lib/components/code/code_block_controls.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.EuiCodeBlockControls = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _services = require("../../services");
+var _code_syntax = require("./code_syntax.styles");
 var _code_block_controls = require("./code_block_controls.styles");
 var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -22,8 +23,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var EuiCodeBlockControls = function EuiCodeBlockControls(_ref) {
   var paddingSize = _ref.paddingSize,
     controls = _ref.controls;
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _code_block_controls.euiCodeBlockControlsStyles)(euiTheme);
+  var styles = (0, _code_block_controls.euiCodeBlockControlsStyles)((0, _services.useEuiTheme)(), (0, _code_syntax.useEuiCodeSyntaxVariables)());
   var cssStyles = [styles.euiCodeBlock__controls, styles.offset[paddingSize]];
   var hasControls = controls.some(function (control) {
     return !!control;

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiCodeBlockControlsStyles = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
-var _code_syntax = require("./code_syntax.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
                                                                                                                                                                                                                                                                                            * or more contributor license agreements. Licensed under the Elastic License
@@ -28,11 +27,10 @@ var _ref = process.env.NODE_ENV === "production" ? {
   styles: "inset-block-start:0;inset-inline-end:0;label:none;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var euiCodeBlockControlsStyles = function euiCodeBlockControlsStyles(euiThemeContext) {
+var euiCodeBlockControlsStyles = function euiCodeBlockControlsStyles(euiThemeContext, euiCodeSyntaxVariables) {
   var euiTheme = euiThemeContext.euiTheme;
-  var euiCodeSyntax = (0, _code_syntax.euiCodeSyntaxColors)(euiThemeContext);
   return {
-    euiCodeBlock__controls: /*#__PURE__*/(0, _react.css)("position:absolute;display:flex;flex-direction:column;gap:", euiTheme.size.xs, ";background:", euiCodeSyntax.backgroundColor, ";;label:euiCodeBlock__controls;"),
+    euiCodeBlock__controls: /*#__PURE__*/(0, _react.css)("position:absolute;display:flex;flex-direction:column;gap:", euiTheme.size.xs, ";background:", euiCodeSyntaxVariables.backgroundColor, ";;label:euiCodeBlock__controls;"),
     offset: {
       none: _ref,
       s: /*#__PURE__*/(0, _react.css)("inset-block-start:", (0, _global_styling.euiPaddingSize)(euiThemeContext, 's'), ";inset-inline-end:", (0, _global_styling.euiPaddingSize)(euiThemeContext, 's'), ";;label:s;"),