@elastic/eui 98.2.0 → 98.2.1-borealis.1

package/optimize/es/global_styling/mixins/_color.js

@@ -10,41 +10,29 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  */
 
 import { css } from '@emotion/react';
-import { shade, tint, tintOrShade, transparentize, useEuiMemoizedStyles } from '../../services';
-export var BACKGROUND_COLORS = ['transparent', 'plain', 'subdued', 'accent', 'primary', 'success', 'warning', 'danger'];
+import { useEuiMemoizedStyles } from '../../services';
+import { getTokenName } from '@elastic/eui-theme-common';
+export var BACKGROUND_COLORS = ['transparent', 'plain', 'subdued', 'highlighted', 'accent', 'accentSecondary', 'primary', 'success', 'warning', 'danger'];
 /**
+ * @deprecated - use background tokens directly
  * @returns A single background color with optional alpha transparency
  */
 export var euiBackgroundColor = function euiBackgroundColor(_ref, color) {
-  var euiTheme = _ref.euiTheme,
-    colorMode = _ref.colorMode;
+  var euiTheme = _ref.euiTheme;
   var _ref2 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
     method = _ref2.method;
   if (color === 'transparent') return 'transparent';
   if (method === 'transparent') {
-    if (color === 'plain') {
-      return transparentize(euiTheme.colors.ghost, 0.2);
-    } else if (color === 'subdued') {
-      return colorMode === 'DARK' ? transparentize(euiTheme.colors.lightShade, 0.4) : transparentize(euiTheme.colors.lightShade, 0.2);
-    } else {
-      return transparentize(euiTheme.colors[color], 0.1);
-    }
+    var tokenName = getTokenName('backgroundTransparent', color);
+    return euiTheme.colors[tokenName];
   } else {
-    var _tintOrShade = function _tintOrShade(color) {
-      return colorMode === 'DARK' ? shade(color, 0.8) : tint(color, 0.9);
-    };
-    switch (color) {
-      case 'plain':
-        return euiTheme.colors.emptyShade;
-      case 'subdued':
-        return euiTheme.colors.body;
-      default:
-        return _tintOrShade(euiTheme.colors[color]);
-    }
+    var _tokenName = getTokenName('backgroundBase', color);
+    return euiTheme.colors[_tokenName];
   }
 };
 
 /**
+ * @deprecated
  * @returns An object map of color keys to color values, categorized by
  * opaque (default) vs transparency (hover/focus states) methods.
  * e.g. {
@@ -64,6 +52,10 @@ var _euiBackgroundColorMap = function _euiBackgroundColorMap(euiThemeContext) {
     }, {})
   };
 };
+
+/**
+ * @deprecated
+ */
 export var useEuiBackgroundColor = function useEuiBackgroundColor(color) {
   var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
     method = _ref3.method;
@@ -77,29 +69,37 @@ export var useEuiBackgroundColor = function useEuiBackgroundColor(color) {
  */
 var _euiBackgroundColors = function _euiBackgroundColors(euiThemeContext) {
   return BACKGROUND_COLORS.reduce(function (acc, color) {
-    return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, color, /*#__PURE__*/css("background-color:", euiBackgroundColor(euiThemeContext, color), ";label:", color, ";")));
+    var tokenName = getTokenName('backgroundBase', color);
+    var backgroundColor = color === 'transparent' ? 'transparent' : euiThemeContext.euiTheme.colors[tokenName];
+    return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, color, /*#__PURE__*/css("background-color:", backgroundColor, ";label:", color, ";")));
   }, {});
 };
+
+/**
+ * Hook to retrieve background style for a background color variant
+ * @returns An object map of color keys to CSS,
+ * e.g. { danger: css``, success: css``, ... }
+ */
 export var useEuiBackgroundColorCSS = function useEuiBackgroundColorCSS() {
   return useEuiMemoizedStyles(_euiBackgroundColors);
 };
 
 /**
  * Border colors
+ * @deprecated - use border tokens directly or use
+ * `useEuiBorderColorCSS()` for composed styles
  */
 
 export var euiBorderColor = function euiBorderColor(_ref4, color) {
-  var euiTheme = _ref4.euiTheme,
-    colorMode = _ref4.colorMode;
+  var euiTheme = _ref4.euiTheme;
   switch (color) {
     case 'transparent':
-    case 'plain':
-    case 'subdued':
       return euiTheme.border.color;
-    case 'warning':
-      return tintOrShade(euiTheme.colors.warning, 0.4, colorMode);
     default:
-      return tintOrShade(euiTheme.colors[color], 0.6, colorMode);
+      {
+        var tokenName = getTokenName('borderBase', color);
+        return euiTheme.colors[tokenName];
+      }
   }
 };
 
@@ -109,9 +109,17 @@ export var euiBorderColor = function euiBorderColor(_ref4, color) {
  */
 var _euiBorderColors = function _euiBorderColors(euiThemeContext) {
   return BACKGROUND_COLORS.reduce(function (acc, color) {
-    return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, color, /*#__PURE__*/css("border-color:", euiBorderColor(euiThemeContext, color), ";label:", color, ";")));
+    var borderToken = getTokenName('borderBase', color);
+    var borderColor = color === 'transparent' ? euiThemeContext.euiTheme.border.color : euiThemeContext.euiTheme.colors[borderToken];
+    return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, color, /*#__PURE__*/css("border-color:", borderColor, ";label:", color, ";")));
   }, {});
 };
+
+/**
+ * Hook to retrieve border style for a border variant
+ * @returns An object map of color keys to CSS,
+ * e.g. { danger: css``, success: css``, ... }
+ */
 export var useEuiBorderColorCSS = function useEuiBorderColorCSS() {
   return useEuiMemoizedStyles(_euiBorderColors);
 };

package/optimize/es/global_styling/mixins/index.js

@@ -11,4 +11,5 @@ export * from './_helpers';
 export * from './_padding';
 export * from './_states';
 export * from './_typography';
-export * from './_responsive';
+export * from './_responsive';
+export * from './_button';

package/optimize/es/global_styling/reset/global_styles.js

@@ -14,7 +14,7 @@ import React from 'react';
 import { Global, css } from '@emotion/react';
 import { euiFocusRing, euiScrollBarStyles } from '../mixins';
 import { logicalCSS } from '../functions';
-import { shade, tint, transparentize } from '../../services/color';
+import { transparentize } from '../../services/color';
 import { useEuiTheme } from '../../services/theme';
 import { resetStyles as reset } from './reset';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -32,7 +32,7 @@ export var EuiGlobalStyles = function EuiGlobalStyles(_ref) {
    * so that it knows to use custom styles. Therefore, we just reuse the same scrollbar mixin with thick size.
    */
   var scrollbarStyles = euiScrollBarStyles(euiThemeContext, {
-    trackColor: colorMode === 'LIGHT' ? shade(colors.body, 0.03) : tint(colors.body, 0.07),
+    trackColor: euiTheme.components.scrollbarTrackColor,
     width: 'auto'
   });
 

package/optimize/es/global_styling/variables/_colors_vis.js

@@ -6,56 +6,4 @@
  * Side Public License, v 1.
  */
 
-/**
- * NOTE: These were quick conversions of their Sass counterparts.
- *       They have yet to be used/tested.
- * TODO: Make the graphic version available from `euiPaletteColorBlind()`
- */
-
-// Maps allow for easier JSON usage
-// Use map_merge(euiColorVisColors, $yourMap) to change individual colors after importing ths file
-// The `behindText` variant is a direct copy of the hex output by the JS euiPaletteColorBlindBehindText() function
-var euiPaletteColorBlind = {
-  euiColorVis0: {
-    graphic: '#54B399'
-  },
-  euiColorVis1: {
-    graphic: '#6092C0'
-  },
-  euiColorVis2: {
-    graphic: '#D36086'
-  },
-  euiColorVis3: {
-    graphic: '#9170B8'
-  },
-  euiColorVis4: {
-    graphic: '#CA8EAE'
-  },
-  euiColorVis5: {
-    graphic: '#D6BF57'
-  },
-  euiColorVis6: {
-    graphic: '#B9A888'
-  },
-  euiColorVis7: {
-    graphic: '#DA8B45'
-  },
-  euiColorVis8: {
-    graphic: '#AA6556'
-  },
-  euiColorVis9: {
-    graphic: '#E7664C'
-  }
-};
-export var colorVis = {
-  euiColorVis0: euiPaletteColorBlind.euiColorVis0.graphic,
-  euiColorVis1: euiPaletteColorBlind.euiColorVis1.graphic,
-  euiColorVis2: euiPaletteColorBlind.euiColorVis2.graphic,
-  euiColorVis3: euiPaletteColorBlind.euiColorVis3.graphic,
-  euiColorVis4: euiPaletteColorBlind.euiColorVis4.graphic,
-  euiColorVis5: euiPaletteColorBlind.euiColorVis5.graphic,
-  euiColorVis6: euiPaletteColorBlind.euiColorVis6.graphic,
-  euiColorVis7: euiPaletteColorBlind.euiColorVis7.graphic,
-  euiColorVis8: euiPaletteColorBlind.euiColorVis8.graphic,
-  euiColorVis9: euiPaletteColorBlind.euiColorVis9.graphic
-};
+export { colorVis } from '../../themes/amsterdam/global_styling/variables/_colors_vis';

package/optimize/es/global_styling/variables/animations.js

@@ -6,25 +6,4 @@
  * Side Public License, v 1.
  */
 
-/**
- * A constant storing the `prefers-reduced-motion` media query
- * so that when it is turned off, animations are not run.
- */
-export var euiCanAnimate = '@media screen and (prefers-reduced-motion: no-preference)';
-
-/**
- * A constant storing the `prefers-reduced-motion` media query that will
- * only apply the content if the setting is off (reduce).
- */
-export var euiCantAnimate = '@media screen and (prefers-reduced-motion: reduce)';
-
-/**
- * Speeds / Durations / Delays
- */
-
-export var EuiThemeAnimationSpeeds = ['extraFast', 'fast', 'normal', 'slow', 'extraSlow'];
-/**
- * Easings / Timing functions
- */
-
-export var EuiThemeAnimationEasings = ['bounce', 'resistance'];
+export { euiCanAnimate, euiCantAnimate, EuiThemeAnimationSpeeds, EuiThemeAnimationEasings } from '@elastic/eui-theme-common';

package/optimize/es/global_styling/variables/breakpoint.js

@@ -6,10 +6,4 @@
  * Side Public License, v 1.
  */
 
-export var EuiThemeBreakpoints = ['xs', 's', 'm', 'l', 'xl'];
-
-// This type cannot be a string enum / must be a generic string
-// in case consumers add custom breakpoint sizes, such as xxl or xxs
-
-// Explicitly list out each key so we can document default values
-// via JSDoc (which is available to devs in IDE via intellisense)
+export { EuiThemeBreakpoints } from '@elastic/eui-theme-common';

package/optimize/es/global_styling/variables/levels.js

@@ -6,20 +6,4 @@
  * Side Public License, v 1.
  */
 
-/**
- * Z-Index
- *
- * Remember that z-index is relative to parent and based on the stacking context.
- * z-indexes only compete against other z-indexes when they exist as children of
- * that shared parent.
- *
- * That means a popover with a settings of 2, will still show above a modal
- * with a setting of 100, if it is within that modal and not besides it.
- *
- * Generally that means it's a good idea to consider things added to this file
- * as competitive only as siblings.
- *
- * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
- */
-
-export var EuiThemeLevels = ['toast', 'modal', 'mask', 'navigation', 'menu', 'header', 'flyout', 'maskBelowHeader', 'content'];
+export { EuiThemeLevels } from '@elastic/eui-theme-common';

package/optimize/es/global_styling/variables/shadow.js

@@ -6,14 +6,4 @@
  * Side Public License, v 1.
  */
 
-export var EuiThemeShadowSizes = ['xs', 's', 'm', 'l', 'xl'];
-/**
- * Shadow t-shirt sizes descriptions
- */
-export var _EuiShadowSizesDescriptions = {
-  xs: 'Very subtle shadow used on small components.',
-  s: 'Adds subtle depth, usually used in conjunction with a border.',
-  m: 'Used on small sized portalled content like popovers.',
-  l: 'Primary shadow used in most cases to add visible depth.',
-  xl: 'Very large shadows used for large portalled style containers like modals and flyouts.'
-};
+export { EuiThemeShadowSizes, _EuiShadowSizesDescriptions } from '@elastic/eui-theme-common';

package/optimize/es/global_styling/variables/size.js

@@ -6,4 +6,4 @@
  * Side Public License, v 1.
  */
 
-export var EuiThemeSizes = ['xxs', 'xs', 's', 'm', 'base', 'l', 'xl', 'xxl', 'xxxl', 'xxxxl'];
+export { EuiThemeSizes } from '@elastic/eui-theme-common';

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

@@ -6,35 +6,4 @@
  * Side Public License, v 1.
  */
 
-/**
- * Font units of measure
- */
-
-export var EuiThemeFontUnits = ['rem', 'px', 'em'];
-/*
- * Font scale
- */
-
-export var EuiThemeFontScales = ['xxxs', 'xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'];
-
-/*
- * Font base settings
- */
-
-/*
- * Font weights
- */
-
-export var EuiThemeFontWeights = ['light', 'regular', 'medium', 'semiBold', 'bold'];
-
-/**
- * Body / Base styles
- */
-
-/**
- * Title styles
- */
-
-/*
- * Font
- */
+export { EuiThemeFontUnits, EuiThemeFontScales, EuiThemeFontWeights } from '@elastic/eui-theme-common';

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

@@ -9,6 +9,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 
 import chroma from 'chroma-js';
 import { colorPalette } from './color_palette';
+import { EUI_VIS_COLOR_STORE } from './vis_color_store';
 var flatten = function flatten(arr) {
   var _ref;
   return (_ref = []).concat.apply(_ref, _toConsumableArray(arr));
@@ -24,6 +25,14 @@ var euiPalette = function euiPalette(colors, steps) {
   }
   return 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.
+ */
 export var euiPaletteColorBlind = function euiPaletteColorBlind() {
   var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
     _ref2$rotations = _ref2.rotations,
@@ -37,26 +46,8 @@ export var euiPaletteColorBlind = function euiPaletteColorBlind() {
     _ref2$sortShift = _ref2.sortShift,
     sortShift = _ref2$sortShift === void 0 ? '-100' : _ref2$sortShift;
   var colors = [];
-  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
-  ];
+  var visColors = 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];
   if (sortBy === 'natural') {
     // Sort the colors based on the color wheel, but shifting the values based on sortShift
     base = _toConsumableArray(base).sort(function (a, b) {
@@ -102,78 +93,156 @@ export var euiPaletteColorBlind = function euiPaletteColorBlind() {
 /**
  * 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.
  */
 export var euiPaletteColorBlindBehindText = function euiPaletteColorBlindBehindText() {
   var paletteProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var hasVisColorAdjustment = 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 chroma(color).brighten(0.5).hex();
   });
   return newPalette;
 };
+var _getVisColorsAsText = function _getVisColorsAsText(visColors, keys) {
+  return keys.reduce(function (colors, curr) {
+    return [].concat(_toConsumableArray(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.
+ */
 export var euiPaletteForLightBackground = function euiPaletteForLightBackground() {
-  return ['#006BB4', '#017D73', '#F5A700', '#BD271E', '#DD0A73'];
+  var visColors = EUI_VIS_COLOR_STORE.visColors;
+  var visColorsAsTextKeys = Object.keys(visColors).filter(function (color) {
+    return color.includes('AsTextLight');
+  });
+  return _getVisColorsAsText(visColors, visColorsAsTextKeys);
 };
+
+/**
+ * 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.
+ */
 export var euiPaletteForDarkBackground = function euiPaletteForDarkBackground() {
-  return ['#1BA9F5', '#7DE2D1', '#F990C0', '#F66', '#FFCE7A'];
+  var visColors = EUI_VIS_COLOR_STORE.visColors;
+  var visColorsAsTextKeys = Object.keys(visColors).filter(function (color) {
+    return color.includes('AsTextDark');
+  });
+  return _getVisColorsAsText(visColors, visColorsAsTextKeys);
 };
-var greenColor = '#209280';
-var redColor = '#CC5642';
-var lightRedColor = euiPaletteColorBlind()[9];
-var coolArray = [euiPaletteColorBlind()[1], '#6092C0'];
-var warmArray = [euiPaletteColorBlind()[7], euiPaletteColorBlind()[9]];
+
+/**
+ * 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.
+ */
 export var euiPaletteForStatus = function euiPaletteForStatus(steps) {
+  var visColors = EUI_VIS_COLOR_STORE.visColors;
   if (steps === 1) {
-    return [greenColor];
+    return [visColors.euiColorVisSuccess0];
   }
   if (steps <= 3) {
-    return euiPalette([greenColor, euiPaletteColorBlind()[5], redColor], steps, true);
+    return euiPalette([visColors.euiColorVisSuccess0, visColors.euiColorVisWarning0, visColors.euiColorVisDanger0], steps, true);
   }
-  return euiPalette([greenColor, euiPaletteColorBlind()[0], euiPaletteColorBlind()[5], lightRedColor, redColor], steps, true);
+  return euiPalette([visColors.euiColorVisSuccess0, visColors.euiColorVisSuccess1, visColors.euiColorVisWarning0, visColors.euiColorVisDanger1, visColors.euiColorVisDanger0], 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.
+ */
 export var euiPaletteForTemperature = function euiPaletteForTemperature(steps) {
-  var cools = colorPalette([].concat(_toConsumableArray(coolArray.slice().reverse()), ['#EBEFF5']), 3);
-  var warms = colorPalette(['#F4F3DB'].concat(warmArray), 3);
+  var hasVisColorAdjustment = EUI_VIS_COLOR_STORE.hasVisColorAdjustment,
+    visColors = EUI_VIS_COLOR_STORE.visColors;
   if (steps === 1) {
-    return [cools[0]];
+    return [visColors.euiColorVisCool2];
   } else if (steps <= 3) {
-    return euiPalette([cools[0], lightRedColor], steps, true);
+    return euiPalette([visColors.euiColorVisCool2, visColors.euiColorVisWarm2], steps, true);
   }
-  return euiPalette([].concat(_toConsumableArray(cools), _toConsumableArray(warms)), steps, true);
+  var cools = colorPalette([visColors.euiColorVisCool2, visColors.euiColorVisCool1, visColors.euiColorVisCool0], 3);
+  var warms = colorPalette([visColors.euiColorVisWarm0, visColors.euiColorVisWarm1, visColors.euiColorVisWarm2], 3);
+  var paletteColors = hasVisColorAdjustment ? [].concat(_toConsumableArray(cools), _toConsumableArray(warms)) : [].concat(_toConsumableArray(cools), [visColors.euiColorVisNeutral0], _toConsumableArray(warms));
+  return euiPalette(paletteColors, 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.
+ */
 export var euiPaletteComplementary = function euiPaletteComplementary(steps) {
+  var hasVisColorAdjustment = EUI_VIS_COLOR_STORE.hasVisColorAdjustment,
+    visColors = EUI_VIS_COLOR_STORE.visColors;
   if (steps === 1) {
-    return [euiPaletteColorBlind()[1]];
+    return [visColors.euiColorVisComplementary0];
   }
-  return euiPalette([euiPaletteColorBlind()[1], euiPaletteColorBlind()[7]], steps, true);
+  var paletteColors = hasVisColorAdjustment ? [visColors.euiColorVisComplementary0, visColors.euiColorVisComplementary1] : [visColors.euiColorVisComplementary0, visColors.euiColorVisNeutral0, visColors.euiColorVisComplementary1];
+  return euiPalette(paletteColors, 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.
+ */
 export var euiPaletteRed = function euiPaletteRed(steps) {
+  var visColors = EUI_VIS_COLOR_STORE.visColors;
   if (steps === 1) {
-    return [lightRedColor];
+    return [visColors.euiColorVisDanger1];
   }
-  return euiPalette(['white', redColor], steps);
+  return euiPalette([visColors.euiColorVisNeutral0, visColors.euiColorVisDanger0], 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.
+ */
 export var euiPaletteGreen = function euiPaletteGreen(steps) {
+  var visColors = EUI_VIS_COLOR_STORE.visColors;
   if (steps === 1) {
-    return [euiPaletteColorBlind()[0]];
+    return [visColors.euiColorVisSuccess1];
   }
-  return euiPalette(['white', greenColor], steps);
+  return euiPalette([visColors.euiColorVisNeutral0, visColors.euiColorVisSuccess0], 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.
+ */
 export var euiPaletteCool = function euiPaletteCool(steps) {
+  var hasVisColorAdjustment = EUI_VIS_COLOR_STORE.hasVisColorAdjustment,
+    visColors = EUI_VIS_COLOR_STORE.visColors;
   if (steps === 1) {
-    return [coolArray[1]];
+    return [visColors.euiColorVisCool1];
   }
-  return euiPalette(['white'].concat(coolArray), steps);
+  return euiPalette([hasVisColorAdjustment ? visColors.euiColorVisNeutral0 : visColors.euiColorVisCool0, visColors.euiColorVisCool1, visColors.euiColorVisCool2], 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.
+ */
 export var euiPaletteWarm = function euiPaletteWarm(steps) {
+  var visColors = EUI_VIS_COLOR_STORE.visColors;
   if (steps === 1) {
-    return [lightRedColor];
+    return [visColors.euiColorVisWarm2];
   }
-  return euiPalette(['#FBFBDC'].concat(warmArray), steps);
+  return euiPalette([visColors.euiColorVisWarm0, visColors.euiColorVisWarm1, visColors.euiColorVisWarm2], 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.
+ */
 export var euiPaletteGray = function euiPaletteGray(steps) {
+  var visColors = EUI_VIS_COLOR_STORE.visColors;
   if (steps === 1) {
-    return ['#98a2b3'];
+    return [visColors.euiColorVisGrey1];
   }
-  return euiPalette(['white', '#d3dae6', '#98a2b3', '#69707d', '#343741'], steps, false);
+  return euiPalette([visColors.euiColorVisNeutral0, visColors.euiColorVisGrey0, visColors.euiColorVisGrey1, visColors.euiColorVisGrey2, visColors.euiColorVisGrey3], steps, false);
 };

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

@@ -16,6 +16,7 @@ export { rgbToHex } from './rgb_to_hex';
 export { rgbToHsv } from './rgb_to_hsv';
 export { calculateContrast, calculateLuminance } from './luminance_and_contrast';
 export { VISUALIZATION_COLORS, DEFAULT_VISUALIZATION_COLOR } from './visualization_colors';
+export { EUI_VIS_COLOR_STORE } from './vis_color_store';
 export { colorPalette } from './color_palette';
 export { euiPaletteForLightBackground, euiPaletteForDarkBackground, euiPaletteColorBlind, euiPaletteColorBlindBehindText, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteComplementary, euiPaletteRed, euiPaletteGreen, euiPaletteCool, euiPaletteWarm, euiPaletteGray } from './eui_palettes';
 export { getSteppedGradient } from './stepped_gradient';

package/optimize/es/services/color/vis_color_store.js

@@ -0,0 +1,13 @@
+/*
+ * 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.
+ */
+
+import { EuiVisColorStore } from '@elastic/eui-theme-common';
+import { colorVis } from '../../global_styling/variables/_colors_vis';
+
+// initialsetup of Vis color storage with default colors
+export var EUI_VIS_COLOR_STORE = EuiVisColorStore.getInstance(colorVis, true);

package/optimize/es/services/index.js

@@ -12,7 +12,7 @@ export { htmlIdGenerator, useGeneratedHtmlId } from './accessibility';
 export { CENTER_ALIGNMENT, LEFT_ALIGNMENT, RIGHT_ALIGNMENT } from './alignment';
 export { CurrentEuiBreakpointContext, CurrentEuiBreakpointProvider, useCurrentEuiBreakpoint, useIsWithinBreakpoints, useIsWithinMaxBreakpoint, useIsWithinMinBreakpoint } from './breakpoint';
 export { CanvasTextUtils } from './canvas';
-export { brighten, calculateContrast, calculateLuminance, colorPalette, darken, DEFAULT_VISUALIZATION_COLOR, desaturate, euiPaletteColorBlind, euiPaletteColorBlindBehindText, euiPaletteComplementary, euiPaletteCool, euiPaletteForDarkBackground, euiPaletteForLightBackground, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteGray, euiPaletteRed, euiPaletteGreen, euiPaletteWarm, getSteppedGradient, hexToHsv, hexToRgb, hsvToHex, hsvToRgb, isColorDark, isValidHex, lightness, makeDisabledContrastColor, makeHighContrastColor, rgbToHex, rgbToHsv, saturate, shade, shadeOrTint, tint, tintOrShade, transparentize, VISUALIZATION_COLORS, wcagContrastMin } from './color';
+export { brighten, calculateContrast, calculateLuminance, colorPalette, darken, DEFAULT_VISUALIZATION_COLOR, desaturate, euiPaletteColorBlind, euiPaletteColorBlindBehindText, euiPaletteComplementary, euiPaletteCool, euiPaletteForDarkBackground, euiPaletteForLightBackground, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteGray, euiPaletteRed, euiPaletteGreen, euiPaletteWarm, getSteppedGradient, hexToHsv, hexToRgb, hsvToHex, hsvToRgb, isColorDark, isValidHex, lightness, makeDisabledContrastColor, makeHighContrastColor, rgbToHex, rgbToHsv, saturate, shade, shadeOrTint, tint, tintOrShade, transparentize, VISUALIZATION_COLORS, EUI_VIS_COLOR_STORE, wcagContrastMin } from './color';
 export { useColorPickerState, useColorStopsState } from './color_picker';
 export * from './console';
 export * from './copy';

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

@@ -7,4 +7,7 @@
  */
 
 export { calculatePopoverPosition } from './calculate_popover_position';
-export { findPopoverPosition, getElementZIndex } from './popover_positioning';
+export { findPopoverPosition, getElementZIndex } from './popover_positioning';
+
+// Not exported as public APIs
+export { _popoverArrowStyles } from './popover_arrow.styles';

package/optimize/es/services/popover/popover_arrow.styles.js

@@ -0,0 +1,31 @@
+/*
+ * 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.
+ */
+
+import { css } from '@emotion/react';
+import { logicalCSS, logicalSizeCSS, mathWithUnits } from '../../global_styling/functions';
+/**
+ * Arrow clipping/transform/positioning CSS shared between EuiPopover and EuiToolTip
+ */
+export var _popoverArrowStyles = function _popoverArrowStyles(_ref, arrowSize) {
+  var euiTheme = _ref.euiTheme;
+  var arrowOffset = mathWithUnits(arrowSize, function (x) {
+    return x / -2;
+  });
+  var arrowBorderRadius = mathWithUnits(euiTheme.border.radius.small, function (x) {
+    return x / 2;
+  });
+  return {
+    _arrowStyles: "\n      position: absolute;\n      ".concat(logicalSizeCSS(arrowSize), "\n      border-radius: ").concat(arrowBorderRadius, ";\n      /* Use clip-path to ensure that arrows don't overlap into popover content */\n      clip-path: polygon(0 0, 100% 100%, 0 100%);\n      transform-origin: center;\n    "),
+    positions: {
+      top: /*#__PURE__*/css(logicalCSS('margin-top', arrowOffset), " transform:rotate(-45deg);;label:top;"),
+      bottom: /*#__PURE__*/css(logicalCSS('bottom', 0), " ", logicalCSS('margin-bottom', arrowOffset), " transform:rotate(135deg);;label:bottom;"),
+      left: /*#__PURE__*/css(logicalCSS('margin-left', arrowOffset), " transform:rotate(-135deg);;label:left;"),
+      right: /*#__PURE__*/css(logicalCSS('right', 0), " ", logicalCSS('margin-right', arrowOffset), " transform:rotate(45deg);;label:right;")
+    }
+  };
+};