@elastic/eui 99.3.0 → 99.4.0-classic.0

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/_shadow.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 { euiShadowFlat, euiShadow, euiSlightShadowHover, euiShadowXSmall, euiShadowSmall, euiShadowMedium, euiShadowLarge, euiShadowXLarge } from '@elastic/eui-theme-common';
+import { useEuiTheme } from '../../services/theme';
+export { euiShadowFlat, euiShadow, euiSlightShadowHover, euiShadowXSmall, euiShadowSmall, euiShadowMedium, euiShadowLarge, euiShadowXLarge };
+export var useEuiSlightShadowHover = function useEuiSlightShadowHover(color) {
+  var euiThemeContext = useEuiTheme();
+  return euiSlightShadowHover(euiThemeContext, {
+    color: color
+  });
+};
+export var useEuiShadowFlat = function useEuiShadowFlat(color) {
+  var euiThemeContext = useEuiTheme();
+  return euiShadowFlat(euiThemeContext, {
+    color: color
+  });
+};
+export var useEuiShadow = function useEuiShadow() {
+  var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'l';
+  var color = arguments.length > 1 ? arguments[1] : undefined;
+  var euiThemeContext = useEuiTheme();
+  return euiShadow(euiThemeContext, size, {
+    color: color
+  });
+};

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

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

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'
   });
 
@@ -53,7 +53,7 @@ export var EuiGlobalStyles = function EuiGlobalStyles(_ref) {
    */
   var styles = /*#__PURE__*/css(reset, " html{", scrollbarStyles, " ", fontReset, " text-size-adjust:100%;font-kerning:normal;", logicalCSS('height', '100%'), " background-color:", colors.body, ";color:", colors.text, ";}code,pre,kbd,samp{font-family:", font.familyCode, ";}input,textarea,select{", _objectSpread(_objectSpread({}, fontReset), {}, {
     fontSize: '1rem' // Inherit from html root
-  }), ";}select:disabled{opacity:1;}button{font-family:", font.family, ";}em{font-style:italic;}strong{font-weight:", font.weight.bold, ";}*:focus{", euiFocusRing(euiThemeContext), ";}::selection{background:", transparentize(colors.primary, colorMode === 'LIGHT' ? 0.1 : 0.2), ";}a{color:", colors.primaryText, ";&,&:hover,&:focus{text-decoration:none;}}.euiBody-hasPortalContent{position:relative;};label:styles;");
+  }), ";}select:disabled{opacity:1;}button{font-family:", font.family, ";}em{font-style:italic;}strong{font-weight:", font.weight.bold, ";}*:focus{", euiFocusRing(euiThemeContext), ";}::selection{background:", transparentize(colors.primary, colorMode === 'LIGHT' ? 0.1 : 0.2), ";}a{color:", colors.textPrimary, ";&,&:hover,&:focus{text-decoration:none;}}.euiBody-hasPortalContent{position:relative;};label:styles;");
   return ___EmotionJSX(Global, {
     styles: styles
   });

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,
@@ -35,28 +44,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) {
@@ -80,100 +72,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);
 };