@elastic/eui 97.3.0 → 97.3.1-borealis.1

package/test-env/components/page/page_header/page_header_content.styles.js

@@ -87,7 +87,8 @@ var euiPageHeaderContentStyles = exports.euiPageHeaderContentStyles = function e
     },
     euiPageHeaderContent__top: _ref,
     euiPageHeaderContent__leftSideItems: /*#__PURE__*/(0, _react.css)("@container (max-width: ", euiTheme.breakpoint.m, "px){", (0, _global_styling.logicalCSS)('min-width', '50%'), ";};label:euiPageHeaderContent__leftSideItems;"),
-    euiPageHeaderContent__rightSideItems: /*#__PURE__*/(0, _react.css)("flex:0 1 auto;align-content:flex-start;@container (min-width: ", euiTheme.breakpoint.m, "px){", (0, _global_styling.logicalCSS)('max-width', '50%'), " justify-content:flex-end;};label:euiPageHeaderContent__rightSideItems;"),
+    euiPageHeaderContent__rightSideItems: /*#__PURE__*/(0, _react.css)("flex:0 1 auto;align-content:flex-start;", (0, _global_styling.logicalCSS)('max-width', '100%'), "@container (min-width: ", euiTheme.breakpoint.m, "px){", (0, _global_styling.logicalCSS)('max-width', '50%'), " justify-content:flex-end;};label:euiPageHeaderContent__rightSideItems;"),
+    euiPageHeaderContent__rightSideItem: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-width', '100%'), ";;label:euiPageHeaderContent__rightSideItem;"),
     euiPageHeaderContent__titleIcon: /*#__PURE__*/(0, _react.css)("position:relative;", (0, _global_styling.logicalCSS)('top', "-".concat(euiTheme.size.xs)), " ", (0, _global_styling.logicalCSS)('margin-right', euiTheme.size.base), ";;label:euiPageHeaderContent__titleIcon;")
   };
 };

package/test-env/components/page_template/inner/page_inner.styles.js

@@ -19,7 +19,7 @@ var euiPageInnerStyles = exports.euiPageInnerStyles = function euiPageInnerStyle
   var euiTheme = euiThemeContext.euiTheme;
   return {
     euiPageInner: /*#__PURE__*/(0, _react.css)("display:flex;flex-direction:column;align-items:stretch;flex:1 1 100%;", (0, _global_styling.logicalCSS)('max-width', '100%'), " ", (0, _global_styling.logicalCSS)('min-width', '0'), ";;label:euiPageInner;"),
-    panelled: /*#__PURE__*/(0, _react.css)("background:", (0, _global_styling.euiBackgroundColor)(euiThemeContext, 'plain'), ";", (0, _mixins.euiShadow)(euiThemeContext, 'm'), ";;label:panelled;"),
+    panelled: /*#__PURE__*/(0, _react.css)("background:", euiThemeContext.euiTheme.colors.backgroundBasePlain, ";", (0, _mixins.euiShadow)(euiThemeContext, 'm'), ";;label:panelled;"),
     border: {
       top: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', euiTheme.border.thin), ";;label:top;"),
       left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-left', euiTheme.border.thin), ";;label:left;")

package/test-env/components/panel/panel.styles.js

@@ -36,7 +36,7 @@ var euiPanelStyles = exports.euiPanelStyles = function euiPanelStyles(euiThemeCo
     // Base
     euiPanel: _ref2,
     grow: _ref,
-    hasShadow: /*#__PURE__*/(0, _react.css)((0, _mixins.euiShadow)(euiThemeContext, 'm'), ";;label:hasShadow;"),
+    hasShadow: /*#__PURE__*/(0, _react.css)((0, _mixins.euiShadow)(euiThemeContext, 'm'), " border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.borderBaseFloating, ";;label:hasShadow;"),
     hasBorder: /*#__PURE__*/(0, _react.css)("border:", euiTheme.border.thin, ";;label:hasBorder;"),
     radius: {
       none: /*#__PURE__*/(0, _react.css)(";label:none;"),

package/test-env/components/popover/popover_arrow/_popover_arrow.styles.js

@@ -14,18 +14,32 @@ var _global_styling = require("../../../global_styling");
  * Side Public License, v 1.
  */
 
-var popoverArrowSize = exports.popoverArrowSize = 'm';
+var popoverArrowSize = exports.popoverArrowSize = 'base';
 var euiPopoverArrowStyles = exports.euiPopoverArrowStyles = function euiPopoverArrowStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var borderColor = 'var(--euiPopoverBackgroundColor)';
-  var arrowSize = euiTheme.size[popoverArrowSize];
+  var arrowColor = 'var(--euiPopoverBackgroundColor)';
+  var borderColor = euiTheme.colors.borderBaseFloating;
+  var arrowSizeBase = euiTheme.size[popoverArrowSize];
+  var arrowSize = (0, _global_styling.mathWithUnits)(arrowSizeBase, function (x) {
+    return x + 3;
+  }); // calculation to ensure size parity
+
+  var arrowPlusSize = (0, _global_styling.mathWithUnits)(arrowSize, function (x) {
+    return (x / 2 + 1) * -1;
+  });
+  var arrowMinusSize = (0, _global_styling.mathWithUnits)(arrowSize, function (x) {
+    return (x / 2 - 1) * -1;
+  });
+  var adjustedPosition = 'calc(25% - 2px)';
   return {
     // Base
-    euiPopoverArrow: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalSizeCSS)(0, 0), "&::before{content:'';position:absolute;", (0, _global_styling.logicalSizeCSS)(0, 0), ";};label:euiPopoverArrow;"),
+    euiPopoverArrow: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalSizeCSS)(arrowSize, arrowSize), " transform-origin:center;border-radius:", (0, _global_styling.mathWithUnits)(euiTheme.border.radius.small, function (x) {
+      return x / 2;
+    }), ";border:", euiTheme.border.width.thin, " solid transparent;background-color:", arrowColor, ";;label:euiPopoverArrow;"),
     // POSITIONS
-    top: /*#__PURE__*/(0, _react.css)("&::before{", _global_styling.logicals.bottom, ":-", arrowSize, ";", _global_styling.logicals['border-left'], ":", arrowSize, " solid transparent;", _global_styling.logicals['border-right'], ":", arrowSize, " solid transparent;", _global_styling.logicals['border-top'], ":", arrowSize, " solid ", borderColor, ";};label:top;"),
-    bottom: /*#__PURE__*/(0, _react.css)("&::before{", _global_styling.logicals.top, ":-", arrowSize, ";", _global_styling.logicals['border-left'], ":", arrowSize, " solid transparent;", _global_styling.logicals['border-right'], ":", arrowSize, " solid transparent;", _global_styling.logicals['border-bottom'], ":", arrowSize, " solid ", borderColor, ";};label:bottom;"),
-    left: /*#__PURE__*/(0, _react.css)("&::before{", _global_styling.logicals.top, ":50%;", _global_styling.logicals.right, ":-", arrowSize, ";", _global_styling.logicals['border-top'], ":", arrowSize, " solid transparent;", _global_styling.logicals['border-bottom'], ":", arrowSize, " solid transparent;", _global_styling.logicals['border-left'], ":", arrowSize, " solid ", borderColor, ";};label:left;"),
-    right: /*#__PURE__*/(0, _react.css)("&::before{", _global_styling.logicals.top, ":50%;", _global_styling.logicals.left, ":-", arrowSize, ";", _global_styling.logicals['border-top'], ":", arrowSize, " solid transparent;", _global_styling.logicals['border-bottom'], ":", arrowSize, " solid transparent;", _global_styling.logicals['border-right'], ":", arrowSize, " solid ", borderColor, ";};label:right;")
+    top: /*#__PURE__*/(0, _react.css)("border-block-end-color:", borderColor, ";border-inline-end-color:", borderColor, ";transform:translate(", adjustedPosition, ", ", arrowPlusSize, ") rotateZ(45deg);;label:top;"),
+    bottom: /*#__PURE__*/(0, _react.css)("border-block-start-color:", borderColor, ";border-inline-start-color:", borderColor, ";transform:translate(", adjustedPosition, ", ", arrowMinusSize, ") rotateZ(45deg);;label:bottom;"),
+    left: /*#__PURE__*/(0, _react.css)("border-block-start-color:", borderColor, ";border-inline-end-color:", borderColor, ";transform:translate(", arrowPlusSize, ", ", adjustedPosition, ") rotateZ(45deg);;label:left;"),
+    right: /*#__PURE__*/(0, _react.css)("border-block-end-color:", borderColor, ";border-inline-start-color:", borderColor, ";transform:translate(", arrowMinusSize, ", ", adjustedPosition, ") rotateZ(45deg);;label:right;")
   };
 };

package/test-env/components/popover/popover_footer.styles.js

@@ -18,7 +18,7 @@ var euiPopoverFooterStyles = exports.euiPopoverFooterStyles = function euiPopove
   var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
-    euiPopoverFooter: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 's'), " ", (0, _global_styling.logicalCSS)('border-top', euiTheme.border.thin), ";;label:euiPopoverFooter;"),
+    euiPopoverFooter: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 's'), " ", (0, _global_styling.logicalCSS)('border-top', "".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.components.popoverFooterBorderColor)), ";;label:euiPopoverFooter;"),
     // If the popover's containing panel has padding applied,
     // ensure the title expands to cover that padding via negative margins
     panelPaddingSizes: {

package/test-env/components/popover/popover_panel/_popover_panel.styles.js

@@ -7,7 +7,6 @@ exports.openAnimationTiming = exports.euiPopoverPanelStyles = void 0;
 var _react = require("@emotion/react");
 var _mixins = require("../../../themes/amsterdam/global_styling/mixins");
 var _functions = require("../../../themes/amsterdam/global_styling/functions");
-var _services = require("../../../services");
 var _global_styling = require("../../../global_styling");
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -43,11 +42,11 @@ var euiPopoverPanelStyles = exports.euiPopoverPanelStyles = function euiPopoverP
   }));
   return {
     // Base
-    euiPopover__panel: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('min-width', "".concat(euiTheme.base * 7, "px")), (0, _global_styling.logicalCSS)('max-width', "calc(100vw - ".concat(euiTheme.size.xl, ")")), "backface-visibility:hidden;pointer-events:none;opacity:0;background-color:var(--euiPopoverBackgroundColor);", _global_styling.euiCanAnimate, "{transition:", opacityTransition, ",", transformTransition, ";}&:focus{outline-offset:0;};label:euiPopover__panel;"),
+    euiPopover__panel: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('min-width', "".concat(euiTheme.base * 7, "px")), (0, _global_styling.logicalCSS)('max-width', "calc(100vw - ".concat(euiTheme.size.xl, ")")), "backface-visibility:hidden;pointer-events:none;opacity:0;background-color:var(--euiPopoverBackgroundColor);", _global_styling.euiCanAnimate, "{transition:", opacityTransition, ",", transformTransition, ";}&:focus{outline-offset:0;}&::before{content:'';position:absolute;inset:0;border-radius:inherit;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.borderBaseFloating, ";pointer-events:none;};label:euiPopover__panel;"),
     isOpen: _ref,
     /* 4 */
-    light: /*#__PURE__*/(0, _react.css)("--euiPopoverBackgroundColor:", euiTheme.colors.emptyShade, ";;label:light;"),
-    dark: /*#__PURE__*/(0, _react.css)("--euiPopoverBackgroundColor:", (0, _services.tint)(euiTheme.colors.emptyShade, 0.025), ";;label:dark;"),
+    light: /*#__PURE__*/(0, _react.css)("--euiPopoverBackgroundColor:", euiTheme.components.popoverPanelBackground, ";;label:light;"),
+    dark: /*#__PURE__*/(0, _react.css)("--euiPopoverBackgroundColor:", euiTheme.components.popoverPanelBackground, ";;label:dark;"),
     // Regular popover with an arrow, a transform animation/transition, and a
     // drop shadow via `filter` (which automatically handles the arrow)
     hasTransform: {

package/test-env/components/progress/progress.js

@@ -28,7 +28,7 @@ var _excluded = ["className", "color", "size", "position", "max", "valueText", "
 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); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var SIZES = exports.SIZES = ['xs', 's', 'm', 'l'];
-var COLORS = exports.COLORS = ['primary', 'success', 'warning', 'danger', 'subdued', 'accent', 'vis0', 'vis1', 'vis2', 'vis3', 'vis4', 'vis5', 'vis6', 'vis7', 'vis8', 'vis9'];
+var COLORS = exports.COLORS = ['primary', 'success', 'warning', 'danger', 'subdued', 'accent', 'accentSecondary', 'vis0', 'vis1', 'vis2', 'vis3', 'vis4', 'vis5', 'vis6', 'vis7', 'vis8', 'vis9'];
 var POSITIONS = exports.POSITIONS = ['fixed', 'absolute', 'static'];
 var EuiProgress = exports.EuiProgress = function EuiProgress(_ref) {
   var className = _ref.className,

package/test-env/components/progress/progress.styles.js

@@ -31,7 +31,7 @@ var indeterminateProgressValue = function indeterminateProgressValue(cssProperti
 /**
  * Color utilities
  */
-var visColors = (0, _services.euiPaletteColorBlind)();
+
 var nativeVsIndeterminateColor = function nativeVsIndeterminateColor(color, isNative) {
   var selectors = isNative ? crossBrowserProgressValue : indeterminateProgressValue;
   return selectors("background-color: ".concat(color, ";"));
@@ -88,16 +88,17 @@ var euiProgressStyles = exports.euiProgressStyles = function euiProgressStyles(_
     danger: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(euiTheme.colors.danger, isNative), ";;label:danger;"),
     subdued: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(euiTheme.colors.subduedText, isNative), ";;label:subdued;"),
     accent: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(euiTheme.colors.accent, isNative), ";;label:accent;"),
-    vis0: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(visColors[0], isNative), ";;label:vis0;"),
-    vis1: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(visColors[1], isNative), ";;label:vis1;"),
-    vis2: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(visColors[2], isNative), ";;label:vis2;"),
-    vis3: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(visColors[3], isNative), ";;label:vis3;"),
-    vis4: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(visColors[4], isNative), ";;label:vis4;"),
-    vis5: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(visColors[5], isNative), ";;label:vis5;"),
-    vis6: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(visColors[6], isNative), ";;label:vis6;"),
-    vis7: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(visColors[7], isNative), ";;label:vis7;"),
-    vis8: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(visColors[8], isNative), ";;label:vis8;"),
-    vis9: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(visColors[9], isNative), ";;label:vis9;"),
+    accentSecondary: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(euiTheme.colors.accentSecondary, isNative), ";;label:accentSecondary;"),
+    vis0: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis0, isNative), ";;label:vis0;"),
+    vis1: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis1, isNative), ";;label:vis1;"),
+    vis2: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis2, isNative), ";;label:vis2;"),
+    vis3: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis3, isNative), ";;label:vis3;"),
+    vis4: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis4, isNative), ";;label:vis4;"),
+    vis5: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis5, isNative), ";;label:vis5;"),
+    vis6: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis6, isNative), ";;label:vis6;"),
+    vis7: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis7, isNative), ";;label:vis7;"),
+    vis8: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis8, isNative), ";;label:vis8;"),
+    vis9: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor(euiTheme.colors.vis.euiColorVis9, isNative), ";;label:vis9;"),
     customColor: /*#__PURE__*/(0, _react.css)(nativeVsIndeterminateColor('currentColor', isNative), ";;label:customColor;")
   };
 };
@@ -128,22 +129,23 @@ var euiProgressValueTextStyles = exports.euiProgressValueTextStyles = function e
   return {
     euiProgress__valueText: /*#__PURE__*/(0, _react.css)("flex-grow:1;flex-shrink:0;font-feature-settings:'tnum' 1;", (0, _global_styling.logicalTextAlignCSS)('right'), " ", (0, _global_styling.euiTextTruncate)(), ";;label:euiProgress__valueText;"),
     // Colors
-    primary: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.primaryText, ";;label:primary;"),
-    success: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.successText, ";;label:success;"),
-    warning: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.warningText, ";;label:warning;"),
-    danger: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.dangerText, ";;label:danger;"),
-    subdued: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.subduedText, ";;label:subdued;"),
-    accent: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.accentText, ";;label:accent;"),
-    vis0: /*#__PURE__*/(0, _react.css)("color:", (0, _services.makeHighContrastColor)(visColors[0])(euiTheme), ";;label:vis0;"),
-    vis1: /*#__PURE__*/(0, _react.css)("color:", (0, _services.makeHighContrastColor)(visColors[1])(euiTheme), ";;label:vis1;"),
-    vis2: /*#__PURE__*/(0, _react.css)("color:", (0, _services.makeHighContrastColor)(visColors[2])(euiTheme), ";;label:vis2;"),
-    vis3: /*#__PURE__*/(0, _react.css)("color:", (0, _services.makeHighContrastColor)(visColors[3])(euiTheme), ";;label:vis3;"),
-    vis4: /*#__PURE__*/(0, _react.css)("color:", (0, _services.makeHighContrastColor)(visColors[4])(euiTheme), ";;label:vis4;"),
-    vis5: /*#__PURE__*/(0, _react.css)("color:", (0, _services.makeHighContrastColor)(visColors[5])(euiTheme), ";;label:vis5;"),
-    vis6: /*#__PURE__*/(0, _react.css)("color:", (0, _services.makeHighContrastColor)(visColors[6])(euiTheme), ";;label:vis6;"),
-    vis7: /*#__PURE__*/(0, _react.css)("color:", (0, _services.makeHighContrastColor)(visColors[7])(euiTheme), ";;label:vis7;"),
-    vis8: /*#__PURE__*/(0, _react.css)("color:", (0, _services.makeHighContrastColor)(visColors[8])(euiTheme), ";;label:vis8;"),
-    vis9: /*#__PURE__*/(0, _react.css)("color:", (0, _services.makeHighContrastColor)(visColors[9])(euiTheme), ";;label:vis9;"),
+    primary: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textPrimary, ";;label:primary;"),
+    success: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textSuccess, ";;label:success;"),
+    warning: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textWarning, ";;label:warning;"),
+    danger: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textDanger, ";;label:danger;"),
+    subdued: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textSubdued, ";;label:subdued;"),
+    accent: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textAccent, ";;label:accent;"),
+    accentSecondary: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textAccentSecondary, ";;label:accentSecondary;"),
+    vis0: /*#__PURE__*/(0, _react.css)("color:", (0, _services.makeHighContrastColor)(euiTheme.colors.vis.euiColorVis0)(euiTheme), ";;label:vis0;"),
+    vis1: /*#__PURE__*/(0, _react.css)("color:", (0, _services.makeHighContrastColor)(euiTheme.colors.vis.euiColorVis1)(euiTheme), ";;label:vis1;"),
+    vis2: /*#__PURE__*/(0, _react.css)("color:", (0, _services.makeHighContrastColor)(euiTheme.colors.vis.euiColorVis2)(euiTheme), ";;label:vis2;"),
+    vis3: /*#__PURE__*/(0, _react.css)("color:", (0, _services.makeHighContrastColor)(euiTheme.colors.vis.euiColorVis3)(euiTheme), ";;label:vis3;"),
+    vis4: /*#__PURE__*/(0, _react.css)("color:", (0, _services.makeHighContrastColor)(euiTheme.colors.vis.euiColorVis4)(euiTheme), ";;label:vis4;"),
+    vis5: /*#__PURE__*/(0, _react.css)("color:", (0, _services.makeHighContrastColor)(euiTheme.colors.vis.euiColorVis5)(euiTheme), ";;label:vis5;"),
+    vis6: /*#__PURE__*/(0, _react.css)("color:", (0, _services.makeHighContrastColor)(euiTheme.colors.vis.euiColorVis6)(euiTheme), ";;label:vis6;"),
+    vis7: /*#__PURE__*/(0, _react.css)("color:", (0, _services.makeHighContrastColor)(euiTheme.colors.vis.euiColorVis7)(euiTheme), ";;label:vis7;"),
+    vis8: /*#__PURE__*/(0, _react.css)("color:", (0, _services.makeHighContrastColor)(euiTheme.colors.vis.euiColorVis8)(euiTheme), ";;label:vis8;"),
+    vis9: /*#__PURE__*/(0, _react.css)("color:", (0, _services.makeHighContrastColor)(euiTheme.colors.vis.euiColorVis9)(euiTheme), ";;label:vis9;"),
     customColor: _ref
   };
 };

package/test-env/components/selectable/selectable_list/selectable_list_item.styles.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiSelectableListItemVariables = exports.euiSelectableListItemStyles = void 0;
 var _react = require("@emotion/react");
-var _services = require("../../../services");
 var _global_styling = require("../../../global_styling");
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -16,7 +15,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 var euiSelectableListItemVariables = exports.euiSelectableListItemVariables = function euiSelectableListItemVariables(_ref2) {
   var euiTheme = _ref2.euiTheme;
-  var lighterBorder = (0, _services.transparentize)(euiTheme.border.color, 0.4);
+  var lighterBorder = euiTheme.components.selectableListItemBorderColor;
   return {
     border: "".concat(euiTheme.border.width.thin, " solid ").concat(lighterBorder),
     paddingHorizontal: euiTheme.size.m,

package/test-env/components/side_nav/side_nav_item.styles.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiSideNavItemStyles = exports.euiSideNavItemButtonStyles = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
-var _services = require("../../services");
 var _global_styling = require("../../global_styling");
 var _title = require("../title/title.styles");
 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; }
@@ -21,7 +20,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 var euiSideNavItemStyles = exports.euiSideNavItemStyles = function euiSideNavItemStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var emphasizedBackgroundColor = (0, _services.transparentize)(euiTheme.colors.lightShade, 0.3);
+  var emphasizedBackgroundColor = euiTheme.components.sideNavItemEmphasizedBackground;
   return {
     euiSideNavItem: /*#__PURE__*/(0, _react.css)(";label:euiSideNavItem;"),
     emphasized: /*#__PURE__*/(0, _react.css)("background-color:", emphasizedBackgroundColor, ";color:", euiTheme.colors.title, ";box-shadow:100px 0 0 0 ", emphasizedBackgroundColor, ",-100px 0 0 0 ", emphasizedBackgroundColor, ";& &{background-color:transparent;box-shadow:none;};label:emphasized;"),

package/test-env/components/skeleton/utils.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiSkeletonGradientAnimation = void 0;
 var _react = require("@emotion/react");
-var _services = require("../../services");
 var _global_styling = require("../../global_styling");
 var _animations = require("../../global_styling/utility/animations");
 /*
@@ -17,14 +16,13 @@ var _animations = require("../../global_styling/utility/animations");
  */
 
 var euiSkeletonGradientAnimation = exports.euiSkeletonGradientAnimation = function euiSkeletonGradientAnimation(_ref) {
-  var euiTheme = _ref.euiTheme,
-    colorMode = _ref.colorMode;
+  var euiTheme = _ref.euiTheme;
   var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
     _ref2$slideSize = _ref2.slideSize,
     slideSize = _ref2$slideSize === void 0 ? '-53%' : _ref2$slideSize,
     _ref2$gradientSize = _ref2.gradientSize,
     gradientSize = _ref2$gradientSize === void 0 ? '220%' : _ref2$gradientSize;
-  var gradientStartStop = colorMode === 'DARK' ? (0, _services.shade)(euiTheme.colors.lightShade, 0.12) : (0, _services.tint)(euiTheme.colors.lightShade, 0.65);
-  var gradientMiddle = colorMode === 'DARK' ? (0, _services.shade)(euiTheme.colors.lightShade, 0.24) : (0, _services.tint)(euiTheme.colors.lightShade, 0.8);
-  return /*#__PURE__*/(0, _react.css)("background-color:", gradientStartStop, ";", _global_styling.euiCanAnimate, "{overflow:hidden;isolation:isolate;&::after{content:'';display:block;", (0, _global_styling.logicalCSS)('width', gradientSize), " ", (0, _global_styling.logicalCSS)('height', '100%'), " background:linear-gradient(\n          137deg,\n          ", gradientStartStop, " 45%,\n          ", gradientMiddle, " 50%,\n          ", gradientStartStop, " 55%\n        );animation:", (0, _animations.euiAnimSlideX)(slideSize), " 1.5s ", euiTheme.animation.resistance, " infinite;}};label:euiSkeletonGradientAnimation;");
+  var gradientStartStop = euiTheme.colors.backgroundBaseSkeletonEdge;
+  var gradientMiddle = euiTheme.colors.backgroundBaseSkeletonMiddle;
+  return /*#__PURE__*/(0, _react.css)(_global_styling.euiCantAnimate, "{background-color:", gradientStartStop, ";}", _global_styling.euiCanAnimate, "{overflow:hidden;isolation:isolate;&::after{content:'';display:block;", (0, _global_styling.logicalCSS)('width', gradientSize), " ", (0, _global_styling.logicalCSS)('height', '100%'), " background:linear-gradient(\n          137deg,\n          ", gradientStartStop, " 45%,\n          ", gradientMiddle, " 50%,\n          ", gradientStartStop, " 55%\n        );animation:", (0, _animations.euiAnimSlideX)(slideSize), " 1.5s ", euiTheme.animation.resistance, " infinite;}};label:euiSkeletonGradientAnimation;");
 };

package/test-env/components/steps/step_number.styles.js

@@ -7,7 +7,7 @@ exports.euiStepNumberStyles = exports.euiStepNumberContentStyles = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
 var _step = require("./step.styles");
-var _mixins = require("../../themes/amsterdam/global_styling/mixins");
+var _mixins = require("../../global_styling/mixins");
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License

package/test-env/components/table/table_cells_shared.styles.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiTableHeaderFooterCellStyles = exports.euiTableCellCheckboxStyles = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
-var _services = require("../../services");
 var _global_styling = require("../../global_styling");
 var _table = require("./table.styles");
 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; }
@@ -19,8 +18,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * Side Public License, v 1.
  */
 var euiTableHeaderFooterCellStyles = exports.euiTableHeaderFooterCellStyles = function euiTableHeaderFooterCellStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme,
-    colorMode = euiThemeContext.colorMode;
+  var euiTheme = euiThemeContext.euiTheme;
 
   // euiFontSize returns an object, so we keep object notation here to merge into css``
   var sharedStyles = _objectSpread(_objectSpread({}, (0, _global_styling.euiFontSize)(euiThemeContext, 'xs')), {}, {
@@ -31,10 +29,7 @@ var euiTableHeaderFooterCellStyles = exports.euiTableHeaderFooterCellStyles = fu
   return {
     euiTableHeaderCell: /*#__PURE__*/(0, _react.css)(sharedStyles, ";;label:euiTableHeaderCell;"),
     euiTableHeaderCell__content: /*#__PURE__*/(0, _react.css)("gap:", euiTheme.size.xs, ";;label:euiTableHeaderCell__content;"),
-    euiTableHeaderCell__button: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), " font-weight:inherit;line-height:inherit;.euiTableSortIcon--sortable{color:", (0, _services.makeHighContrastColor)(
-    // Tint it arbitrarily high, the contrast util will take care of lowering back down to WCAG
-    (0, _services.tintOrShade)(euiTheme.colors.subduedText, 0.9, colorMode), 3 // 3:1 ratio from https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html
-    )(euiTheme.colors.emptyShade), ";}&:hover,&:focus{color:", euiTheme.colors.primaryText, ";text-decoration:underline;.euiTableSortIcon--sortable{color:", euiTheme.colors.primaryText, ";}};label:euiTableHeaderCell__button;"),
+    euiTableHeaderCell__button: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), " font-weight:inherit;line-height:inherit;.euiTableSortIcon--sortable{color:", euiTheme.components.tableCellSortableIconColor, ";}&:hover,&:focus{color:", euiTheme.colors.primaryText, ";text-decoration:underline;.euiTableSortIcon--sortable{color:", euiTheme.colors.primaryText, ";}};label:euiTableHeaderCell__button;"),
     euiTableFooterCell: /*#__PURE__*/(0, _react.css)(sharedStyles, " background-color:", euiTheme.colors.lightestShade, ";;label:euiTableFooterCell;")
   };
 };

package/test-env/components/table/table_row.styles.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiTableRowStyles = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
-var _services = require("../../services");
 var _global_styling = require("../../global_styling");
 var _mixins = require("../../themes/amsterdam/global_styling/mixins");
 var _table = require("./table.styles");
@@ -39,7 +38,7 @@ var euiTableRowStyles = exports.euiTableRowStyles = function euiTableRowStyles(e
       checkboxOffset: /*#__PURE__*/(0, _react.css)("&>.euiTableRowCell:first-child{", (0, _global_styling.logicalCSS)('padding-left', checkboxSize), ";};label:checkboxOffset;")
     },
     mobile: {
-      mobile: /*#__PURE__*/(0, _react.css)("position:relative;display:flex;flex-wrap:wrap;padding:", cellContentPadding, ";", (0, _global_styling.logicalCSS)('margin-bottom', cellContentPadding), (0, _mixins.euiShadow)(euiThemeContext, 's'), " background-color:", (0, _global_styling.euiBackgroundColor)(euiThemeContext, 'plain'), ";border-radius:", euiTheme.border.radius.medium, ";;label:mobile;"),
+      mobile: /*#__PURE__*/(0, _react.css)("position:relative;display:flex;flex-wrap:wrap;padding:", cellContentPadding, ";", (0, _global_styling.logicalCSS)('margin-bottom', cellContentPadding), (0, _mixins.euiShadow)(euiThemeContext, 's'), " background-color:", euiTheme.colors.backgroundBasePlain, ";border-radius:", euiTheme.border.radius.medium, ";;label:mobile;"),
       selected: /*#__PURE__*/(0, _react.css)("&,&+.euiTableRow-isExpandedRow{background-color:", rowColors.selected.color, ";};label:selected;"),
       /**
        * Left column offset (no border)
@@ -68,17 +67,16 @@ var _expandedRowAnimation = function _expandedRowAnimation(_ref) {
   return /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{.euiTableCellContent{animation:", euiTheme.animation.fast, " ", euiTheme.animation.resistance, " 1 normal none ", expandRow, ";}}");
 };
 var _rowColorVariables = function _rowColorVariables(_ref2) {
-  var euiTheme = _ref2.euiTheme,
-    colorMode = _ref2.colorMode;
+  var euiTheme = _ref2.euiTheme;
   return {
-    hover: colorMode === 'DARK' ? euiTheme.colors.lightestShade : (0, _services.tint)(euiTheme.colors.lightestShade, 0.5),
+    hover: euiTheme.components.tableRowBackgroundHover,
     selected: {
-      color: colorMode === 'DARK' ? (0, _services.shade)(euiTheme.colors.primary, 0.7) : (0, _services.tint)(euiTheme.colors.primary, 0.96),
-      hover: colorMode === 'DARK' ? (0, _services.shade)(euiTheme.colors.primary, 0.75) : (0, _services.tint)(euiTheme.colors.primary, 0.9)
+      color: euiTheme.components.tableRowBackgroundSelected,
+      hover: euiTheme.components.tableRowBackgroundSelectedHover
     },
     clickable: {
-      hover: (0, _services.transparentize)(euiTheme.colors.primary, 0.05),
-      focus: (0, _services.transparentize)(euiTheme.colors.primary, 0.1)
+      hover: euiTheme.components.tableRowInteractiveBackgroundHover,
+      focus: euiTheme.components.tableRowInteractiveBackgroundFocus
     }
   };
 };

package/test-env/components/text/text.styles.js

@@ -70,7 +70,7 @@ var euiScaleText = function euiScaleText(euiThemeContext, options) {
 var euiTextStyles = exports.euiTextStyles = function euiTextStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiText: /*#__PURE__*/(0, _react.css)(euiText(euiTheme, true), "clear:both;a:not([class]){", (0, _link.euiLinkCSS)(euiThemeContext), ";}ul{list-style:disc;}ol{list-style:decimal;}blockquote{border-inline-start-color:", euiTheme.border.color, ";border-inline-start-style:solid;}blockquote:not(.euiMarkdownFormat__blockquote){color:", euiTheme.colors.subduedText, ";}h1{", (0, _title.euiTitle)(euiThemeContext, 'l'), ";}h2{", (0, _title.euiTitle)(euiThemeContext, 'm'), ";}h3{", (0, _title.euiTitle)(euiThemeContext, 's'), ";}h4,dt{", (0, _title.euiTitle)(euiThemeContext, 'xs'), ";}h5{", (0, _title.euiTitle)(euiThemeContext, 'xxs'), ";}h6{", (0, _title.euiTitle)(euiThemeContext, 'xxxs'), " text-transform:uppercase;}h1,h2,h3,h4,h5,h6,dt{color:inherit;}pre:not(.euiCodeBlock__pre){white-space:pre-wrap;background:", (0, _global_styling.euiBackgroundColor)(euiThemeContext, 'subdued'), ";color:", euiTheme.colors.text, ";}pre:not(.euiCodeBlock__pre),pre:not(.euiCodeBlock__pre) code{display:block;}>:last-child{", (0, _global_styling.logicalCSS)('margin-bottom', '0 !important'), ";}kbd{position:relative;display:inline-block;", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.xxs), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), " line-height:1;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.text, ";border-radius:", (0, _global_styling.mathWithUnits)(euiTheme.border.radius.small, function (x) {
+    euiText: /*#__PURE__*/(0, _react.css)(euiText(euiTheme, true), "clear:both;a:not([class]){", (0, _link.euiLinkCSS)(euiThemeContext), ";}ul{list-style:disc;}ol{list-style:decimal;}blockquote{border-inline-start-color:", euiTheme.border.color, ";border-inline-start-style:solid;}blockquote:not(.euiMarkdownFormat__blockquote){color:", euiTheme.colors.subduedText, ";}h1{", (0, _title.euiTitle)(euiThemeContext, 'l'), ";}h2{", (0, _title.euiTitle)(euiThemeContext, 'm'), ";}h3{", (0, _title.euiTitle)(euiThemeContext, 's'), ";}h4,dt{", (0, _title.euiTitle)(euiThemeContext, 'xs'), ";}h5{", (0, _title.euiTitle)(euiThemeContext, 'xxs'), ";}h6{", (0, _title.euiTitle)(euiThemeContext, 'xxxs'), " text-transform:uppercase;}h1,h2,h3,h4,h5,h6,dt{color:inherit;}pre:not(.euiCodeBlock__pre){white-space:pre-wrap;background:", euiTheme.colors.backgroundBaseSubdued, ";color:", euiTheme.colors.text, ";}pre:not(.euiCodeBlock__pre),pre:not(.euiCodeBlock__pre) code{display:block;}>:last-child{", (0, _global_styling.logicalCSS)('margin-bottom', '0 !important'), ";}kbd{position:relative;display:inline-block;", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.xxs), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), " line-height:1;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.text, ";border-radius:", (0, _global_styling.mathWithUnits)(euiTheme.border.radius.small, function (x) {
       return x / 2;
     }), ";};label:euiText;"),
     constrainedWidth: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-width', euiTextConstrainedMaxWidth), ";;label:constrainedWidth;"),

package/test-env/components/text/text_color.js

@@ -25,7 +25,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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) { (0, _defineProperty2.default)(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; }
-var COLORS = exports.COLORS = ['default', 'subdued', 'success', 'accent', 'danger', 'warning', 'ghost', 'inherit'];
+var COLORS = exports.COLORS = ['default', 'subdued', 'success', 'accent', 'accentSecondary', 'danger', 'warning', 'ghost', 'inherit'];
 var _isNamedColor = exports._isNamedColor = function _isNamedColor(color) {
   return COLORS.includes(color);
 };

package/test-env/components/text/text_color.styles.js

@@ -25,11 +25,12 @@ var euiTextColorStyles = exports.euiTextColorStyles = function euiTextColorStyle
   return {
     euiTextColor: /*#__PURE__*/(0, _react.css)(";label:euiTextColor;"),
     default: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.text, ";;label:default;"),
-    subdued: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.subduedText, ";;label:subdued;"),
-    success: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.successText, ";;label:success;"),
-    accent: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.accentText, ";;label:accent;"),
-    danger: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.dangerText, ";;label:danger;"),
-    warning: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.warningText, ";;label:warning;"),
+    subdued: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textSubdued, ";;label:subdued;"),
+    success: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textSuccess, ";;label:success;"),
+    accent: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textAccent, ";;label:accent;"),
+    accentSecondary: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textAccentSecondary, ";;label:accentSecondary;"),
+    danger: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textDanger, ";;label:danger;"),
+    warning: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textWarning, ";;label:warning;"),
     ghost: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.ghost, "!important;;label:ghost;"),
     inherit: _ref,
     customColor: /*#__PURE__*/(0, _react.css)(";label:customColor;") // Handled by `style` tag - this is just here for a className hook

package/test-env/components/toast/toast.styles.js

@@ -20,7 +20,7 @@ var euiToastStyles = exports.euiToastStyles = function euiToastStyles(euiThemeCo
   var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
-    euiToast: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";", (0, _amsterdam.euiShadowLarge)(euiThemeContext), " position:relative;", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.base), " ", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.base), " background-color:", euiTheme.colors.emptyShade, ";", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.euiTextBreakWord)(), "&:hover,&:focus{[class*='euiToast__closeButton']{opacity:1;}};label:euiToast;"),
+    euiToast: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";", (0, _amsterdam.euiShadowLarge)(euiThemeContext), " position:relative;", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.base), " ", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.base), " background-color:", euiTheme.colors.emptyShade, ";", (0, _global_styling.logicalCSS)('width', '100%'), " border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.borderBaseFloating, ";", (0, _global_styling.euiTextBreakWord)(), "&:hover,&:focus{[class*='euiToast__closeButton']{opacity:1;}};label:euiToast;"),
     // Elements
     euiToast__closeButton: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('top', euiTheme.size.base), " ", (0, _global_styling.logicalCSS)('right', euiTheme.size.base), ";;label:euiToast__closeButton;"),
     // Variants

package/test-env/components/token/token.js

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../services");
 var _icon = require("../icon");
@@ -25,6 +26,8 @@ var _excluded = ["iconType", "color", "fill", "shape", "size", "style", "classNa
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+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); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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) { (0, _defineProperty2.default)(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; }
 var isTokenColor = function isTokenColor(color) {
@@ -54,15 +57,21 @@ var EuiToken = exports.EuiToken = function EuiToken(_ref) {
   if (typeof iconType === 'string' && iconType.indexOf('token') === 0 && size === 's') {
     finalSize = 'm';
   }
+  var euiTheme = (0, _services.useEuiTheme)();
+  var hasVisColorAdjustment = euiTheme.euiTheme.flags.hasVisColorAdjustment;
+  var TOKEN_MAP = hasVisColorAdjustment ? _token_map.TOKEN_MAP_AMSTERDAM : _token_map.TOKEN_MAP_BOREALIS;
 
   // If the iconType passed is one of the prefab token types,
   // grab its properties
-  var tokenDefaults = typeof iconType === 'string' && iconType in _token_map.TOKEN_MAP ? _token_map.TOKEN_MAP[iconType] : {};
+  var tokenDefaults = typeof iconType === 'string' && iconType in TOKEN_MAP ? TOKEN_MAP[iconType] : {};
   var finalColor = color || tokenDefaults.color || 'gray';
   var finalShape = shape || tokenDefaults.shape || 'circle';
   var finalFill = fill || 'light';
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _token.euiTokenStyles)(euiTheme, finalFill);
+
+  // memoize styles to reduce executing contained color calculations
+  var styles = (0, _react.useMemo)(function () {
+    return (0, _token.euiTokenStyles)(euiTheme, finalFill);
+  }, [euiTheme, finalFill]);
   var cssStyles = [styles.euiToken, styles[finalShape], styles[finalFill], styles[size]];
   var finalStyle = style;
   if (isTokenColor(finalColor)) {

package/test-env/components/token/token.styles.js

@@ -10,6 +10,7 @@ var _react = require("@emotion/react");
 var _chromaJs = _interopRequireDefault(require("chroma-js"));
 var _global_styling = require("../../global_styling");
 var _services = require("../../services");
+var _token_map = require("./token_map");
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -17,15 +18,23 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var visColors = (0, _services.euiPaletteColorBlind)();
-var visColorsBehindText = (0, _services.euiPaletteColorBlindBehindText)();
 var getTokenColor = function getTokenColor(euiTheme, colorMode, fill, color) {
+  var hasVisColorAdjustment = euiTheme.flags.hasVisColorAdjustment;
+  // use inside function as they are not returning constants,
+  // but internally depend on EUI_VIS_COLOR_STORE to update per theme
+  var visColors = (0, _services.euiPaletteColorBlind)();
+  var visColorsBehindText = (0, _services.euiPaletteColorBlindBehindText)();
   var isVizColor = typeof color === 'number';
   var iconColor = isVizColor ? visColors[color] : euiTheme.colors.darkShade;
   var isDarkMode = colorMode === 'DARK';
   var backgroundDarkColor = isVizColor ? visColorsBehindText[color] : euiTheme.colors.darkShade;
   var backgroundLightColor = isDarkMode ? (0, _services.shade)(iconColor, 0.7) : (0, _services.tint)(iconColor, 0.9);
-  var lightColor = (0, _services.makeHighContrastColor)(iconColor)(backgroundLightColor);
+  var getIconVisColor = function getIconVisColor(euiTheme, color) {
+    var iconColorKey = "euiColorVis".concat(color);
+    var iconColorToken = _token_map.TOKEN_COLOR_TO_ICON_COLOR_MAP[iconColorKey];
+    return euiTheme.colors.vis[iconColorToken];
+  };
+  var lightColor = hasVisColorAdjustment ? (0, _services.makeHighContrastColor)(iconColor)(backgroundLightColor) : isVizColor ? getIconVisColor(euiTheme, color) : iconColor;
   var boxShadowColor = isDarkMode ? (0, _services.shade)(iconColor, 0.6) : (0, _services.tint)(iconColor, 0.7);
   var darkColor = _services.isColorDark.apply(void 0, (0, _toConsumableArray2.default)((0, _chromaJs.default)(backgroundDarkColor).rgb())) ? euiTheme.colors.ghost : euiTheme.colors.ink;
   switch (fill) {