@elastic/eui 98.2.1-borealis.0 → 98.2.1

package/optimize/lib/global_styling/variables/typography.js

@@ -3,22 +3,44 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "EuiThemeFontScales", {
-  enumerable: true,
-  get: function get() {
-    return _euiThemeCommon.EuiThemeFontScales;
-  }
-});
-Object.defineProperty(exports, "EuiThemeFontUnits", {
-  enumerable: true,
-  get: function get() {
-    return _euiThemeCommon.EuiThemeFontUnits;
-  }
-});
-Object.defineProperty(exports, "EuiThemeFontWeights", {
-  enumerable: true,
-  get: function get() {
-    return _euiThemeCommon.EuiThemeFontWeights;
-  }
-});
-var _euiThemeCommon = require("@elastic/eui-theme-common");
+exports.EuiThemeFontWeights = exports.EuiThemeFontUnits = exports.EuiThemeFontScales = void 0;
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+/**
+ * Font units of measure
+ */
+
+var EuiThemeFontUnits = exports.EuiThemeFontUnits = ['rem', 'px', 'em'];
+/*
+ * Font scale
+ */
+
+var EuiThemeFontScales = exports.EuiThemeFontScales = ['xxxs', 'xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'];
+
+/*
+ * Font base settings
+ */
+
+/*
+ * Font weights
+ */
+
+var EuiThemeFontWeights = exports.EuiThemeFontWeights = ['light', 'regular', 'medium', 'semiBold', 'bold'];
+
+/**
+ * Body / Base styles
+ */
+
+/**
+ * Title styles
+ */
+
+/*
+ * Font
+ */

package/optimize/lib/services/color/eui_palettes.js

@@ -8,7 +8,6 @@ exports.euiPaletteWarm = exports.euiPaletteRed = exports.euiPaletteGreen = expor
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _chromaJs = _interopRequireDefault(require("chroma-js"));
 var _color_palette = require("./color_palette");
-var _vis_color_store = require("./vis_color_store");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -32,14 +31,6 @@ var euiPalette = function euiPalette(colors, steps) {
   }
   return (0, _color_palette.colorPalette)(colors, steps, diverge, categorical);
 };
-/**
- * NOTE: These functions rely on base vis colors of the theme which are provided via a global
- * singleton instance `EUI_VIS_COLOR_STORE` that's updated by the EuiProvider on theme change.
- * Make sure the function is recalled on theme change to retrieve theme-related colors.
- *
- * Outside of a react component you can use the `subscibe()` method on the `EUI_VIS_COLOR_STORE`
- * to subscribe to updates and update your usages to ensure latest colors are loaded.
- */
 var euiPaletteColorBlind = exports.euiPaletteColorBlind = function euiPaletteColorBlind() {
   var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
     _ref2$rotations = _ref2.rotations,
@@ -53,8 +44,26 @@ var euiPaletteColorBlind = exports.euiPaletteColorBlind = function euiPaletteCol
     _ref2$sortShift = _ref2.sortShift,
     sortShift = _ref2$sortShift === void 0 ? '-100' : _ref2$sortShift;
   var colors = [];
-  var visColors = _vis_color_store.EUI_VIS_COLOR_STORE.visColors;
-  var base = [visColors.euiColorVis0, visColors.euiColorVis1, visColors.euiColorVis2, visColors.euiColorVis3, visColors.euiColorVis4, visColors.euiColorVis5, visColors.euiColorVis6, visColors.euiColorVis7, visColors.euiColorVis8, visColors.euiColorVis9];
+  var base = ['#54B399',
+  // 0 green
+  '#6092C0',
+  // 1 blue
+  '#D36086',
+  // 2 dark pink
+  '#9170B8',
+  // 3 purple
+  '#CA8EAE',
+  // 4 light pink
+  '#D6BF57',
+  // 5 yellow
+  '#B9A888',
+  // 6 tan
+  '#DA8B45',
+  // 7 orange
+  '#AA6556',
+  // 8 brown
+  '#E7664C' // 9 red
+  ];
   if (sortBy === 'natural') {
     // Sort the colors based on the color wheel, but shifting the values based on sortShift
     base = (0, _toConsumableArray2.default)(base).sort(function (a, b) {
@@ -100,156 +109,78 @@ var euiPaletteColorBlind = exports.euiPaletteColorBlind = function euiPaletteCol
 /**
  * Color blind palette with text is meant for use when text is applied on top of the color.
  * It increases the brightness of the color to give the text more contrast.
- *
- * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
- * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
  */
 var euiPaletteColorBlindBehindText = exports.euiPaletteColorBlindBehindText = function euiPaletteColorBlindBehindText() {
   var paletteProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var hasVisColorAdjustment = _vis_color_store.EUI_VIS_COLOR_STORE.hasVisColorAdjustment;
   var originalPalette = euiPaletteColorBlind(paletteProps);
-
-  // new theme palette has required contrast, we don't need to adjust them
-  if (!hasVisColorAdjustment) return originalPalette;
   var newPalette = originalPalette.map(function (color) {
     return (0, _chromaJs.default)(color).brighten(0.5).hex();
   });
   return newPalette;
 };
-var _getVisColorsAsText = function _getVisColorsAsText(visColors, keys) {
-  return keys.reduce(function (colors, curr) {
-    return [].concat((0, _toConsumableArray2.default)(colors), [visColors[curr]]);
-  }, []);
-};
-
-/**
- * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
- * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
- */
 var euiPaletteForLightBackground = exports.euiPaletteForLightBackground = function euiPaletteForLightBackground() {
-  var visColors = _vis_color_store.EUI_VIS_COLOR_STORE.visColors;
-  var visColorsAsTextKeys = Object.keys(visColors).filter(function (color) {
-    return color.includes('AsTextLight');
-  });
-  return _getVisColorsAsText(visColors, visColorsAsTextKeys);
+  return ['#006BB4', '#017D73', '#F5A700', '#BD271E', '#DD0A73'];
 };
-
-/**
- * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
- * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
- */
 var euiPaletteForDarkBackground = exports.euiPaletteForDarkBackground = function euiPaletteForDarkBackground() {
-  var visColors = _vis_color_store.EUI_VIS_COLOR_STORE.visColors;
-  var visColorsAsTextKeys = Object.keys(visColors).filter(function (color) {
-    return color.includes('AsTextDark');
-  });
-  return _getVisColorsAsText(visColors, visColorsAsTextKeys);
+  return ['#1BA9F5', '#7DE2D1', '#F990C0', '#F66', '#FFCE7A'];
 };
-
-/**
- * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
- * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
- */
+var greenColor = '#209280';
+var redColor = '#CC5642';
+var lightRedColor = euiPaletteColorBlind()[9];
+var coolArray = [euiPaletteColorBlind()[1], '#6092C0'];
+var warmArray = [euiPaletteColorBlind()[7], euiPaletteColorBlind()[9]];
 var euiPaletteForStatus = exports.euiPaletteForStatus = function euiPaletteForStatus(steps) {
-  var visColors = _vis_color_store.EUI_VIS_COLOR_STORE.visColors;
   if (steps === 1) {
-    return [visColors.euiColorVisSuccess0];
+    return [greenColor];
   }
   if (steps <= 3) {
-    return euiPalette([visColors.euiColorVisSuccess0, visColors.euiColorVisWarning0, visColors.euiColorVisDanger0], steps, true);
+    return euiPalette([greenColor, euiPaletteColorBlind()[5], redColor], steps, true);
   }
-  return euiPalette([visColors.euiColorVisSuccess0, visColors.euiColorVisSuccess1, visColors.euiColorVisWarning0, visColors.euiColorVisDanger1, visColors.euiColorVisDanger0], steps, true);
+  return euiPalette([greenColor, euiPaletteColorBlind()[0], euiPaletteColorBlind()[5], lightRedColor, redColor], steps, true);
 };
-
-/**
- * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
- * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
- */
 var euiPaletteForTemperature = exports.euiPaletteForTemperature = function euiPaletteForTemperature(steps) {
-  var hasVisColorAdjustment = _vis_color_store.EUI_VIS_COLOR_STORE.hasVisColorAdjustment,
-    visColors = _vis_color_store.EUI_VIS_COLOR_STORE.visColors;
+  var cools = (0, _color_palette.colorPalette)([].concat((0, _toConsumableArray2.default)(coolArray.slice().reverse()), ['#EBEFF5']), 3);
+  var warms = (0, _color_palette.colorPalette)(['#F4F3DB'].concat(warmArray), 3);
   if (steps === 1) {
-    return [visColors.euiColorVisCool2];
+    return [cools[0]];
   } else if (steps <= 3) {
-    return euiPalette([visColors.euiColorVisCool2, visColors.euiColorVisWarm2], steps, true);
+    return euiPalette([cools[0], lightRedColor], steps, true);
   }
-  var cools = (0, _color_palette.colorPalette)([visColors.euiColorVisCool2, visColors.euiColorVisCool1, visColors.euiColorVisCool0], 3);
-  var warms = (0, _color_palette.colorPalette)([visColors.euiColorVisWarm0, visColors.euiColorVisWarm1, visColors.euiColorVisWarm2], 3);
-  var paletteColors = hasVisColorAdjustment ? [].concat((0, _toConsumableArray2.default)(cools), (0, _toConsumableArray2.default)(warms)) : [].concat((0, _toConsumableArray2.default)(cools), [visColors.euiColorVisNeutral0], (0, _toConsumableArray2.default)(warms));
-  return euiPalette(paletteColors, steps, true);
+  return euiPalette([].concat((0, _toConsumableArray2.default)(cools), (0, _toConsumableArray2.default)(warms)), steps, true);
 };
-
-/**
- * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
- * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
- */
 var euiPaletteComplementary = exports.euiPaletteComplementary = function euiPaletteComplementary(steps) {
-  var hasVisColorAdjustment = _vis_color_store.EUI_VIS_COLOR_STORE.hasVisColorAdjustment,
-    visColors = _vis_color_store.EUI_VIS_COLOR_STORE.visColors;
   if (steps === 1) {
-    return [visColors.euiColorVisComplementary0];
+    return [euiPaletteColorBlind()[1]];
   }
-  var paletteColors = hasVisColorAdjustment ? [visColors.euiColorVisComplementary0, visColors.euiColorVisComplementary1] : [visColors.euiColorVisComplementary0, visColors.euiColorVisNeutral0, visColors.euiColorVisComplementary1];
-  return euiPalette(paletteColors, steps, true);
+  return euiPalette([euiPaletteColorBlind()[1], euiPaletteColorBlind()[7]], steps, true);
 };
-
-/**
- * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
- * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
- */
 var euiPaletteRed = exports.euiPaletteRed = function euiPaletteRed(steps) {
-  var visColors = _vis_color_store.EUI_VIS_COLOR_STORE.visColors;
   if (steps === 1) {
-    return [visColors.euiColorVisDanger1];
+    return [lightRedColor];
   }
-  return euiPalette([visColors.euiColorVisNeutral0, visColors.euiColorVisDanger0], steps);
+  return euiPalette(['white', redColor], steps);
 };
-
-/**
- * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
- * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
- */
 var euiPaletteGreen = exports.euiPaletteGreen = function euiPaletteGreen(steps) {
-  var visColors = _vis_color_store.EUI_VIS_COLOR_STORE.visColors;
   if (steps === 1) {
-    return [visColors.euiColorVisSuccess1];
+    return [euiPaletteColorBlind()[0]];
   }
-  return euiPalette([visColors.euiColorVisNeutral0, visColors.euiColorVisSuccess0], steps);
+  return euiPalette(['white', greenColor], steps);
 };
-
-/**
- * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
- * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
- */
 var euiPaletteCool = exports.euiPaletteCool = function euiPaletteCool(steps) {
-  var hasVisColorAdjustment = _vis_color_store.EUI_VIS_COLOR_STORE.hasVisColorAdjustment,
-    visColors = _vis_color_store.EUI_VIS_COLOR_STORE.visColors;
   if (steps === 1) {
-    return [visColors.euiColorVisCool1];
+    return [coolArray[1]];
   }
-  return euiPalette([hasVisColorAdjustment ? visColors.euiColorVisNeutral0 : visColors.euiColorVisCool0, visColors.euiColorVisCool1, visColors.euiColorVisCool2], steps);
+  return euiPalette(['white'].concat(coolArray), steps);
 };
-
-/**
- * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
- * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
- */
 var euiPaletteWarm = exports.euiPaletteWarm = function euiPaletteWarm(steps) {
-  var visColors = _vis_color_store.EUI_VIS_COLOR_STORE.visColors;
   if (steps === 1) {
-    return [visColors.euiColorVisWarm2];
+    return [lightRedColor];
   }
-  return euiPalette([visColors.euiColorVisWarm0, visColors.euiColorVisWarm1, visColors.euiColorVisWarm2], steps);
+  return euiPalette(['#FBFBDC'].concat(warmArray), steps);
 };
-
-/**
- * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
- * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
- */
 var euiPaletteGray = exports.euiPaletteGray = function euiPaletteGray(steps) {
-  var visColors = _vis_color_store.EUI_VIS_COLOR_STORE.visColors;
   if (steps === 1) {
-    return [visColors.euiColorVisGrey1];
+    return ['#98a2b3'];
   }
-  return euiPalette([visColors.euiColorVisNeutral0, visColors.euiColorVisGrey0, visColors.euiColorVisGrey1, visColors.euiColorVisGrey2, visColors.euiColorVisGrey3], steps, false);
+  return euiPalette(['white', '#d3dae6', '#98a2b3', '#69707d', '#343741'], steps, false);
 };

package/optimize/lib/services/color/index.js

@@ -16,7 +16,6 @@ var _exportNames = {
   calculateLuminance: true,
   VISUALIZATION_COLORS: true,
   DEFAULT_VISUALIZATION_COLOR: true,
-  EUI_VIS_COLOR_STORE: true,
   colorPalette: true,
   euiPaletteForLightBackground: true,
   euiPaletteForDarkBackground: true,
@@ -38,12 +37,6 @@ Object.defineProperty(exports, "DEFAULT_VISUALIZATION_COLOR", {
     return _visualization_colors.DEFAULT_VISUALIZATION_COLOR;
   }
 });
-Object.defineProperty(exports, "EUI_VIS_COLOR_STORE", {
-  enumerable: true,
-  get: function get() {
-    return _vis_color_store.EUI_VIS_COLOR_STORE;
-  }
-});
 Object.defineProperty(exports, "VISUALIZATION_COLORS", {
   enumerable: true,
   get: function get() {
@@ -204,7 +197,6 @@ var _rgb_to_hex = require("./rgb_to_hex");
 var _rgb_to_hsv = require("./rgb_to_hsv");
 var _luminance_and_contrast = require("./luminance_and_contrast");
 var _visualization_colors = require("./visualization_colors");
-var _vis_color_store = require("./vis_color_store");
 var _color_palette = require("./color_palette");
 var _eui_palettes = require("./eui_palettes");
 var _stepped_gradient = require("./stepped_gradient");

package/optimize/lib/services/index.js

@@ -56,7 +56,6 @@ var _exportNames = {
   tintOrShade: true,
   transparentize: true,
   VISUALIZATION_COLORS: true,
-  EUI_VIS_COLOR_STORE: true,
   wcagContrastMin: true,
   useColorPickerState: true,
   useColorStopsState: true,
@@ -123,12 +122,6 @@ Object.defineProperty(exports, "DEFAULT_VISUALIZATION_COLOR", {
     return _color.DEFAULT_VISUALIZATION_COLOR;
   }
 });
-Object.defineProperty(exports, "EUI_VIS_COLOR_STORE", {
-  enumerable: true,
-  get: function get() {
-    return _color.EUI_VIS_COLOR_STORE;
-  }
-});
 Object.defineProperty(exports, "EuiWindowEvent", {
   enumerable: true,
   get: function get() {

package/optimize/lib/services/popover/index.js

@@ -3,12 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "_popoverArrowStyles", {
-  enumerable: true,
-  get: function get() {
-    return _popover_arrow._popoverArrowStyles;
-  }
-});
 Object.defineProperty(exports, "calculatePopoverPosition", {
   enumerable: true,
   get: function get() {
@@ -28,5 +22,4 @@ Object.defineProperty(exports, "getElementZIndex", {
   }
 });
 var _calculate_popover_position = require("./calculate_popover_position");
-var _popover_positioning = require("./popover_positioning");
-var _popover_arrow = require("./popover_arrow.styles");
+var _popover_positioning = require("./popover_positioning");

package/optimize/lib/services/popover/popover_positioning.js

@@ -299,9 +299,11 @@ function getPopoverScreenCoordinates(_ref2) {
       position: position,
       offset: offset,
       popoverBoundingBox: popoverBoundingBox,
-      anchorBoundingBox: anchorBoundingBox
+      anchorBoundingBox: anchorBoundingBox,
+      arrowConfig: arrowConfig
     }),
-    primaryAxisPosition = _getPrimaryAxisPositi.primaryAxisPosition;
+    primaryAxisPosition = _getPrimaryAxisPositi.primaryAxisPosition,
+    primaryAxisArrowPosition = _getPrimaryAxisPositi.primaryAxisArrowPosition;
   var popoverPlacement = (0, _defineProperty2.default)((0, _defineProperty2.default)({}, crossAxisFirstSide, crossAxisPosition), primaryAxisPositionName, primaryAxisPosition);
 
   // calculate the fit of the popover in this location
@@ -322,12 +324,15 @@ function getPopoverScreenCoordinates(_ref2) {
     width: popoverBoundingBox.width,
     height: popoverBoundingBox.height
   }, combinedBoundingBox);
-  var arrow = arrowConfig ? (0, _defineProperty2.default)((0, _defineProperty2.default)({}, crossAxisFirstSide, crossAxisArrowPosition - popoverPlacement[crossAxisFirstSide] - 1), position, '100%') : undefined;
+  var arrow = arrowConfig ? (0, _defineProperty2.default)((0, _defineProperty2.default)({}, crossAxisFirstSide, crossAxisArrowPosition - popoverPlacement[crossAxisFirstSide]), primaryAxisPositionName, primaryAxisArrowPosition) : undefined;
   return {
     fit: fit,
     top: popoverPlacement.top,
     left: popoverPlacement.left,
-    arrow: arrow
+    arrow: arrow ? {
+      left: arrow.left,
+      top: arrow.top
+    } : undefined
   };
 }
 function getCrossAxisPosition(_ref4) {
@@ -419,7 +424,8 @@ function getPrimaryAxisPosition(_ref5) {
   var position = _ref5.position,
     offset = _ref5.offset,
     popoverBoundingBox = _ref5.popoverBoundingBox,
-    anchorBoundingBox = _ref5.anchorBoundingBox;
+    anchorBoundingBox = _ref5.anchorBoundingBox,
+    arrowConfig = _ref5.arrowConfig;
   // if positioning to the top or left, the target position decreases
   // from the anchor's top or left, otherwise the position adds to the anchor's
   var isOffsetDecreasing = position === 'top' || position === 'left';
@@ -435,8 +441,13 @@ function getPrimaryAxisPosition(_ref5) {
   var primaryAxisOffset = isOffsetDecreasing ? popoverSizeOnPrimaryAxis : anchorSizeOnPrimaryAxis;
   var contentOffset = (offset + primaryAxisOffset) * (isOffsetDecreasing ? -1 : 1);
   var primaryAxisPosition = anchorEdgeOrigin + contentOffset;
+  var primaryAxisArrowPosition;
+  if (arrowConfig) {
+    primaryAxisArrowPosition = isOffsetDecreasing ? popoverSizeOnPrimaryAxis : 0;
+  }
   return {
-    primaryAxisPosition: primaryAxisPosition
+    primaryAxisPosition: primaryAxisPosition,
+    primaryAxisArrowPosition: primaryAxisArrowPosition
   };
 }
 

package/optimize/lib/services/theme/provider.js

@@ -14,7 +14,6 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("@emotion/react");
 var _react2 = _interopRequireWildcard(require("react"));
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
-var _themes = require("../../themes/themes");
 var _emotion = require("../emotion");
 var _css2 = require("../emotion/css");
 var _current_breakpoint = require("../breakpoint/current_breakpoint");
@@ -22,7 +21,6 @@ var _context = require("./context");
 var _emotion2 = require("./emotion");
 var _style_memoization = require("./style_memoization");
 var _utils = require("./utils");
-var _color = require("../color");
 var _excluded = ["cloneElement", "className"];
 var _templateObject;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -73,41 +71,19 @@ var EuiThemeProvider = exports.EuiThemeProvider = function EuiThemeProvider(_ref
     setColorMode = _useState6[1];
   var prevColorMode = (0, _react2.useRef)(colorMode);
   var isParentTheme = (0, _react2.useRef)(prevSystemKey.current === parentSystem.key && colorMode === parentColorMode && (0, _isEqual.default)(parentModifications, modifications));
-  var updateVisColorStore = (0, _react2.useCallback)(function (theme) {
-    var _theme$flags$hasVisCo, _theme$flags;
-    _color.EUI_VIS_COLOR_STORE.setVisColors(theme.colors.vis, (_theme$flags$hasVisCo = (_theme$flags = theme.flags) === null || _theme$flags === void 0 ? void 0 : _theme$flags.hasVisColorAdjustment) !== null && _theme$flags$hasVisCo !== void 0 ? _theme$flags$hasVisCo : true);
-  }, []);
-  var getInitialTheme = function getInitialTheme() {
-    var theme = (0, _utils.getComputed)(system, (0, _utils.buildTheme)(modifications, "_".concat(system.key)), colorMode);
-    setTimeout(function () {
-      updateVisColorStore(theme);
-    });
-    return theme;
-  };
   var _useState7 = (0, _react2.useState)(isParentTheme.current && Object.keys(parentTheme).length ? _objectSpread({}, parentTheme) // Intentionally create a new object to break referential equality
-    : getInitialTheme()),
+    : (0, _utils.getComputed)(system, (0, _utils.buildTheme)(modifications, "_".concat(system.key)), colorMode)),
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
     theme = _useState8[0],
     setTheme = _useState8[1];
-
-  // TODO: temp. testing code only, remove once obsolete
-  (0, _react2.useEffect)(function () {
-    if (process.env.NODE_ENV === 'development') {
-      var isEnabled = localStorage.getItem(_themes.EUI_EXPERIMENTAL_THEME_ENABLED_KEY) != null;
-      if (!isEnabled) {
-        localStorage.setItem(_themes.EUI_EXPERIMENTAL_THEME_ENABLED_KEY, 'true');
-      }
-    }
-  }, []);
   (0, _react2.useEffect)(function () {
     var newSystem = _system || parentSystem;
     if (prevSystemKey.current !== newSystem.key) {
       setSystem(newSystem);
       prevSystemKey.current = newSystem.key;
       isParentTheme.current = false;
-      updateVisColorStore(theme);
     }
-  }, [_system, parentSystem, theme, updateVisColorStore]);
+  }, [_system, parentSystem]);
   (0, _react2.useEffect)(function () {
     var newModifications = (0, _utils.mergeDeep)(parentModifications, _modifications);
     if (!(0, _isEqual.default)(prevModifications.current, newModifications)) {

package/optimize/lib/services/theme/types.js

@@ -3,16 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "COLOR_MODES_INVERSE", {
-  enumerable: true,
-  get: function get() {
-    return _euiThemeCommon.COLOR_MODES_INVERSE;
-  }
-});
-Object.defineProperty(exports, "COLOR_MODES_STANDARD", {
-  enumerable: true,
-  get: function get() {
-    return _euiThemeCommon.COLOR_MODES_STANDARD;
-  }
-});
-var _euiThemeCommon = require("@elastic/eui-theme-common");
+exports.COLOR_MODES_STANDARD = exports.COLOR_MODES_INVERSE = void 0;
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+var COLOR_MODES_STANDARD = exports.COLOR_MODES_STANDARD = {
+  light: 'LIGHT',
+  dark: 'DARK'
+};
+var COLOR_MODES_INVERSE = exports.COLOR_MODES_INVERSE = 'INVERSE';