@elastic/eui 99.3.0 → 99.4.0-classic.0

package/es/services/color/eui_palettes.js

@@ -14,6 +14,7 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 
 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));
@@ -29,6 +30,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,
@@ -40,28 +49,11 @@ export var euiPaletteColorBlind = function euiPaletteColorBlind() {
     _ref2$sortBy = _ref2.sortBy,
     sortBy = _ref2$sortBy === void 0 ? 'default' : _ref2$sortBy,
     _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
-  ];
+    sortShift = _ref2$sortShift === void 0 ? '-100' : _ref2$sortShift,
+    colors = _ref2.colors;
+  var _colors = [];
+  var visColors = colors !== null && colors !== void 0 ? colors : 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) {
@@ -85,100 +77,202 @@ export var euiPaletteColorBlind = function euiPaletteColorBlind() {
       }
     });
     if (order === 'group') {
-      colors = flatten(palettes);
+      _colors = flatten(palettes);
     } else {
       var _loop = function _loop(i) {
-        var _colors;
+        var _colors2;
         var rotation = palettes.map(function (palette) {
           return palette[i];
         });
-        (_colors = colors).push.apply(_colors, _toConsumableArray(rotation));
+        (_colors2 = _colors).push.apply(_colors2, _toConsumableArray(rotation));
       };
       for (var i = 0; i < rotations; i++) {
         _loop(i);
       }
     }
   } else {
-    colors = base;
+    _colors = base;
   }
-  return colors;
+  return _colors;
 };
 
 /**
  * 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 = paletteProps.hasVisColorAdjustment;
+  var _hasVisColorAdjustment = hasVisColorAdjustment !== null && hasVisColorAdjustment !== void 0 ? 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 _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    colors = _ref3.colors;
+  var visColors = colors !== null && colors !== void 0 ? colors : 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 _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    colors = _ref4.colors;
+  var visColors = colors !== null && colors !== void 0 ? colors : 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 _ref5 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    colors = _ref5.colors;
+  var visColors = colors !== null && colors !== void 0 ? colors : 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 _ref6 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    colors = _ref6.colors,
+    hasVisColorAdjustment = _ref6.hasVisColorAdjustment;
+  var visColors = colors !== null && colors !== void 0 ? colors : EUI_VIS_COLOR_STORE.visColors;
+  var _hasVisColorAdjustment = hasVisColorAdjustment !== null && hasVisColorAdjustment !== void 0 ? hasVisColorAdjustment : EUI_VIS_COLOR_STORE.hasVisColorAdjustment;
   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 _ref7 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    colors = _ref7.colors,
+    hasVisColorAdjustment = _ref7.hasVisColorAdjustment;
+  var visColors = colors !== null && colors !== void 0 ? colors : EUI_VIS_COLOR_STORE.visColors;
+  var _hasVisColorAdjustment = hasVisColorAdjustment !== null && hasVisColorAdjustment !== void 0 ? hasVisColorAdjustment : EUI_VIS_COLOR_STORE.hasVisColorAdjustment;
   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 _ref8 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    colors = _ref8.colors;
+  var visColors = colors !== null && colors !== void 0 ? colors : 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 _ref9 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    colors = _ref9.colors;
+  var visColors = colors !== null && colors !== void 0 ? colors : 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 _ref10 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    colors = _ref10.colors,
+    hasVisColorAdjustment = _ref10.hasVisColorAdjustment;
+  var visColors = colors !== null && colors !== void 0 ? colors : EUI_VIS_COLOR_STORE.visColors;
+  var _hasVisColorAdjustment = hasVisColorAdjustment !== null && hasVisColorAdjustment !== void 0 ? hasVisColorAdjustment : EUI_VIS_COLOR_STORE.hasVisColorAdjustment;
   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 _ref11 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    colors = _ref11.colors;
+  var visColors = colors !== null && colors !== void 0 ? colors : 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 _ref12 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    colors = _ref12.colors;
+  var visColors = colors !== null && colors !== void 0 ? colors : 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/es/services/color/eui_palettes_hooks.js

@@ -0,0 +1,74 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/*
+ * 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 { useMemo } from 'react';
+import { useEuiTheme } from '../theme/hooks';
+import { euiPaletteColorBlind, euiPaletteColorBlindBehindText, euiPaletteComplementary, euiPaletteCool, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteGray, euiPaletteGreen, euiPaletteRed, euiPaletteWarm } from './eui_palettes';
+export var useEuiPaletteColorBlind = function useEuiPaletteColorBlind(args) {
+  return _useEuiPaletteFn(euiPaletteColorBlind, args);
+};
+export var useEuiPaletteColorBlindBehindText = function useEuiPaletteColorBlindBehindText(args) {
+  return _useEuiPaletteFn(euiPaletteColorBlindBehindText, args);
+};
+export var useEuiPaletteForStatus = function useEuiPaletteForStatus(steps) {
+  return _useEuiPaletteWithStepsFn(euiPaletteForStatus, steps);
+};
+export var useEuiPaletteForTemperature = function useEuiPaletteForTemperature(steps) {
+  return _useEuiPaletteWithStepsFn(euiPaletteForTemperature, steps);
+};
+export var useEuiPaletteComplementary = function useEuiPaletteComplementary(steps) {
+  return _useEuiPaletteWithStepsFn(euiPaletteComplementary, steps);
+};
+export var useEuiPaletteRed = function useEuiPaletteRed(steps) {
+  return _useEuiPaletteWithStepsFn(euiPaletteRed, steps);
+};
+export var useEuiPaletteGreen = function useEuiPaletteGreen(steps) {
+  return _useEuiPaletteWithStepsFn(euiPaletteGreen, steps);
+};
+export var useEuiPaletteCool = function useEuiPaletteCool(steps) {
+  return _useEuiPaletteWithStepsFn(euiPaletteCool, steps);
+};
+export var useEuiPaletteWarm = function useEuiPaletteWarm(steps) {
+  return _useEuiPaletteWithStepsFn(euiPaletteWarm, steps);
+};
+export var useEuiPaletteGray = function useEuiPaletteGray(steps) {
+  return _useEuiPaletteWithStepsFn(euiPaletteGray, steps);
+};
+
+/* Internal helper utils */
+
+var _useEuiPaletteFn = function _useEuiPaletteFn(palleteFn, args) {
+  var _useEuiTheme = useEuiTheme(),
+    euiTheme = _useEuiTheme.euiTheme;
+  var colors = euiTheme.colors,
+    flags = euiTheme.flags;
+  return useMemo(function () {
+    return palleteFn(_objectSpread(_objectSpread({}, args), {}, {
+      colors: colors.vis,
+      hasVisColorAdjustment: flags.hasVisColorAdjustment
+    }));
+  }, [colors, flags, args, palleteFn]);
+};
+var _useEuiPaletteWithStepsFn = function _useEuiPaletteWithStepsFn(palleteFn, steps) {
+  var _useEuiTheme2 = useEuiTheme(),
+    euiTheme = _useEuiTheme2.euiTheme;
+  var colors = euiTheme.colors,
+    flags = euiTheme.flags;
+  return useMemo(function () {
+    return palleteFn(steps, {
+      colors: colors.vis,
+      hasVisColorAdjustment: flags.hasVisColorAdjustment
+    });
+  }, [colors, flags, steps, palleteFn]);
+};

package/es/services/color/index.js

@@ -16,8 +16,10 @@ 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 * from './eui_palettes_hooks';
 export { getSteppedGradient } from './stepped_gradient';
 export * from './manipulation';
 export * from './contrast';

package/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 '../../themes/amsterdam/global_styling/variables/_colors_vis';
+
+// initialsetup of Vis color storage with default colors
+export var EUI_VIS_COLOR_STORE = EuiVisColorStore.getInstance(colorVis, true);

package/es/services/index.js

@@ -12,7 +12,8 @@ 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 * from './color/eui_palettes_hooks';
 export { useColorPickerState, useColorStopsState } from './color_picker';
 export * from './console';
 export * from './copy';

package/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/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;")
+    }
+  };
+};

package/es/services/popover/popover_positioning.js

@@ -293,11 +293,9 @@ export function getPopoverScreenCoordinates(_ref2) {
       position: position,
       offset: offset,
       popoverBoundingBox: popoverBoundingBox,
-      anchorBoundingBox: anchorBoundingBox,
-      arrowConfig: arrowConfig
+      anchorBoundingBox: anchorBoundingBox
     }),
-    primaryAxisPosition = _getPrimaryAxisPositi.primaryAxisPosition,
-    primaryAxisArrowPosition = _getPrimaryAxisPositi.primaryAxisArrowPosition;
+    primaryAxisPosition = _getPrimaryAxisPositi.primaryAxisPosition;
   var popoverPlacement = _defineProperty(_defineProperty({}, crossAxisFirstSide, crossAxisPosition), primaryAxisPositionName, primaryAxisPosition);
 
   // calculate the fit of the popover in this location
@@ -318,15 +316,12 @@ export function getPopoverScreenCoordinates(_ref2) {
     width: popoverBoundingBox.width,
     height: popoverBoundingBox.height
   }, combinedBoundingBox);
-  var arrow = arrowConfig ? _defineProperty(_defineProperty({}, crossAxisFirstSide, crossAxisArrowPosition - popoverPlacement[crossAxisFirstSide]), primaryAxisPositionName, primaryAxisArrowPosition) : undefined;
+  var arrow = arrowConfig ? _defineProperty(_defineProperty({}, crossAxisFirstSide, crossAxisArrowPosition - popoverPlacement[crossAxisFirstSide] - 1), position, '100%') : undefined;
   return {
     fit: fit,
     top: popoverPlacement.top,
     left: popoverPlacement.left,
-    arrow: arrow ? {
-      left: arrow.left,
-      top: arrow.top
-    } : undefined
+    arrow: arrow
   };
 }
 function getCrossAxisPosition(_ref4) {
@@ -418,8 +413,7 @@ function getPrimaryAxisPosition(_ref5) {
   var position = _ref5.position,
     offset = _ref5.offset,
     popoverBoundingBox = _ref5.popoverBoundingBox,
-    anchorBoundingBox = _ref5.anchorBoundingBox,
-    arrowConfig = _ref5.arrowConfig;
+    anchorBoundingBox = _ref5.anchorBoundingBox;
   // 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,13 +429,8 @@ 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,
-    primaryAxisArrowPosition: primaryAxisArrowPosition
+    primaryAxisPosition: primaryAxisPosition
   };
 }
 

package/es/services/theme/provider.js

@@ -35,6 +35,7 @@ import { EuiSystemContext, EuiThemeContext, EuiNestedThemeContext, EuiModificati
 import { EuiEmotionThemeProvider } from './emotion';
 import { EuiThemeMemoizedStylesProvider } from './style_memoization';
 import { buildTheme, getColorMode, getComputed, mergeDeep } from './utils';
+import { EUI_VIS_COLOR_STORE } from '../color';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiThemeProvider = function EuiThemeProvider(_ref) {
   var _system = _ref.theme,
@@ -74,8 +75,19 @@ export var EuiThemeProvider = function EuiThemeProvider(_ref) {
     setColorMode = _useState6[1];
   var prevColorMode = useRef(colorMode);
   var isParentTheme = useRef(prevSystemKey.current === parentSystem.key && colorMode === parentColorMode && isEqual(parentModifications, modifications));
+  var updateVisColorStore = useCallback(function (theme) {
+    var _theme$flags$hasVisCo, _theme$flags;
+    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 = getComputed(system, buildTheme(modifications, "_".concat(system.key)), colorMode);
+    setTimeout(function () {
+      updateVisColorStore(theme);
+    });
+    return theme;
+  };
   var _useState7 = useState(isParentTheme.current && Object.keys(parentTheme).length ? _objectSpread({}, parentTheme) // Intentionally create a new object to break referential equality
-    : getComputed(system, buildTheme(modifications, "_".concat(system.key)), colorMode)),
+    : getInitialTheme()),
     _useState8 = _slicedToArray(_useState7, 2),
     theme = _useState8[0],
     setTheme = _useState8[1];
@@ -85,8 +97,9 @@ export var EuiThemeProvider = function EuiThemeProvider(_ref) {
       setSystem(newSystem);
       prevSystemKey.current = newSystem.key;
       isParentTheme.current = false;
+      updateVisColorStore(theme);
     }
-  }, [_system, parentSystem]);
+  }, [_system, parentSystem, theme, updateVisColorStore]);
   useEffect(function () {
     var newModifications = mergeDeep(parentModifications, _modifications);
     if (!isEqual(prevModifications.current, newModifications)) {

package/es/services/theme/types.js

@@ -5,9 +5,4 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-
-export var COLOR_MODES_STANDARD = {
-  light: 'LIGHT',
-  dark: 'DARK'
-};
-export var COLOR_MODES_INVERSE = 'INVERSE';
+export { COLOR_MODES_STANDARD, COLOR_MODES_INVERSE } from '@elastic/eui-theme-common';