@elastic/eui 99.4.0 → 100.0.0

package/lib/components/side_nav/side_nav_item.styles.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiSideNavItemStyles = exports.euiSideNavItemButtonStyles = void 0;
 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; }
@@ -23,14 +22,14 @@ 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;"),
+    emphasized: /*#__PURE__*/(0, _react.css)("background-color:", emphasizedBackgroundColor, ";color:", euiTheme.colors.textHeading, ";box-shadow:100px 0 0 0 ", emphasizedBackgroundColor, ",-100px 0 0 0 ", emphasizedBackgroundColor, ";& &{background-color:transparent;box-shadow:none;};label:emphasized;"),
     // Layout
     root: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.s), " &+&{", (0, _global_styling.logicalCSS)('margin-top', euiTheme.size.s), " ", (0, _global_styling.logicalCSS)('padding-top', euiTheme.size.s), ";};label:root;"),
-    trunk: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.title, ";;label:trunk;"),
-    branch: /*#__PURE__*/(0, _react.css)("position:relative;color:", euiTheme.colors.subduedText, ";&::after{position:absolute;content:'';", (0, _global_styling.logicalCSS)('vertical', 0), " ", (0, _global_styling.logicalCSS)('left', 0), " ", (0, _global_styling.logicalCSS)('width', euiTheme.border.width.thin), " background-color:", euiTheme.border.color, ";}&:last-of-type::after{", (0, _global_styling.logicalCSS)('height', euiTheme.size.m), ";};label:branch;"),
+    trunk: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textHeading, ";;label:trunk;"),
+    branch: /*#__PURE__*/(0, _react.css)("position:relative;color:", euiTheme.colors.textSubdued, ";&::after{position:absolute;content:'';", (0, _global_styling.logicalCSS)('vertical', 0), " ", (0, _global_styling.logicalCSS)('left', 0), " ", (0, _global_styling.logicalCSS)('width', euiTheme.border.width.thin), " background-color:", euiTheme.border.color, ";}&:last-of-type::after{", (0, _global_styling.logicalCSS)('height', euiTheme.size.m), ";};label:branch;"),
     items: {
       euiSideNavItem__items: /*#__PURE__*/(0, _react.css)(";label:euiSideNavItem__items;"),
       rootWithIcon: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-left', euiTheme.size.l), ";;label:rootWithIcon;"),
@@ -56,8 +55,8 @@ var euiSideNavItemButtonStyles = exports.euiSideNavItemButtonStyles = function e
     return x * 2;
   }), ")")), ";\n  ");
   return {
-    euiSideNavItemButton: /*#__PURE__*/(0, _react.css)("display:block;", (0, _global_styling.logicalCSS)('width', '100%'), "padding-block:", euiTheme.size.xxs, ";font-size:", (0, _global_styling.euiFontSize)(euiThemeContext, 's').fontSize, ";line-height:", lineHeightOverride, ";text-align:start;color:inherit;&:is(a, button):not(:disabled){&:hover{cursor:pointer;}&:hover,&:focus{.euiSideNavItemButton__label{text-decoration:underline;}}}&:disabled{cursor:not-allowed;color:", euiTheme.colors.disabledText, ";};label:euiSideNavItemButton;"),
-    selected: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.primaryText, ";font-weight:", euiTheme.font.weight.bold, ";.euiSideNavItemButton__label{text-decoration:underline;};label:selected;"),
+    euiSideNavItemButton: /*#__PURE__*/(0, _react.css)("display:block;", (0, _global_styling.logicalCSS)('width', '100%'), "padding-block:", euiTheme.size.xxs, ";font-size:", (0, _global_styling.euiFontSize)(euiThemeContext, 's').fontSize, ";line-height:", lineHeightOverride, ";text-align:start;color:inherit;&:is(a, button):not(:disabled){&:hover{cursor:pointer;}&:hover,&:focus{.euiSideNavItemButton__label{text-decoration:underline;}}}&:disabled{cursor:not-allowed;color:", euiTheme.colors.textDisabled, ";};label:euiSideNavItemButton;"),
+    selected: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textPrimary, ";font-weight:", euiTheme.font.weight.bold, ";.euiSideNavItemButton__label{text-decoration:underline;};label:selected;"),
     emphasized: /*#__PURE__*/(0, _react.css)("font-weight:", euiTheme.font.weight.bold, ";;label:emphasized;"),
     // Layout
     root: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.xs), " padding-block:0;", paddingMarginOffset, ";;label:root;"),

package/lib/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/lib/components/stat/stat.styles.js

@@ -30,12 +30,12 @@ var euiStatTitleStyles = exports.euiStatTitleStyles = function euiStatTitleStyle
     euiStat__title: /*#__PURE__*/(0, _react.css)(";label:euiStat__title;"),
     // Colors
     default: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.fullShade, ";;label:default;"),
-    subdued: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.subduedText, ";;label:subdued;"),
-    primary: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.primaryText, ";;label:primary;"),
-    success: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.successText, ";;label:success;"),
+    subdued: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textSubdued, ";;label:subdued;"),
+    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.warningText, ";;label:warning;"),
-    danger: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.dangerText, ";;label:danger;"),
-    accent: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.accentText, ";;label:accent;"),
+    danger: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textDanger, ";;label:danger;"),
+    accent: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textAccent, ";;label:accent;"),
     // Loading
     isLoading: /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{animation:", euiStatPulse, " 1.5s infinite ease-in-out;};label:isLoading;")
   };

package/lib/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/lib/components/table/table_cells_shared.styles.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiTableHeaderFooterCellStyles = exports.euiTableCellCheckboxStyles = void 0;
 var _react = require("@emotion/react");
-var _services = require("../../services");
 var _global_styling = require("../../global_styling");
 var _table = require("./table.styles");
 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); }
@@ -21,22 +20,18 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
  * 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')), {}, {
     fontWeight: euiTheme.font.weight.semiBold,
-    color: euiTheme.colors.title,
+    color: euiTheme.colors.textHeading,
     verticalAlign: 'middle'
   });
   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.textPrimary, ";text-decoration:underline;.euiTableSortIcon--sortable{color:", euiTheme.colors.textPrimary, ";}};label:euiTableHeaderCell__button;"),
     euiTableFooterCell: /*#__PURE__*/(0, _react.css)(sharedStyles, " background-color:", euiTheme.colors.lightestShade, ";;label:euiTableFooterCell;")
   };
 };

package/lib/components/table/table_row.styles.js

@@ -5,9 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiTableRowStyles = void 0;
 var _react = require("@emotion/react");
-var _services = require("../../services");
+var _euiThemeCommon = require("@elastic/eui-theme-common");
 var _global_styling = require("../../global_styling");
-var _mixins = require("../../themes/amsterdam/global_styling/mixins");
 var _table = require("./table.styles");
 var _templateObject;
 /*
@@ -38,7 +37,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, _euiThemeCommon.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)
@@ -67,17 +66,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/lib/components/tabs/tab.styles.js

@@ -24,10 +24,10 @@ var _ref = process.env.NODE_ENV === "production" ? {
 var euiTabStyles = exports.euiTabStyles = function euiTabStyles(_ref2) {
   var euiTheme = _ref2.euiTheme;
   return {
-    euiTab: /*#__PURE__*/(0, _react.css)("display:flex;cursor:pointer;flex-direction:row;align-items:center;gap:", euiTheme.size.s, ";", (0, _global_styling.logicalCSS)('padding-vertical', 0), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), "font-weight:", euiTheme.font.weight.semiBold, ";color:", euiTheme.colors.title, ";&:focus{outline-offset:-", euiTheme.focus.width, ";};label:euiTab;"),
+    euiTab: /*#__PURE__*/(0, _react.css)("display:flex;cursor:pointer;flex-direction:row;align-items:center;gap:", euiTheme.size.s, ";", (0, _global_styling.logicalCSS)('padding-vertical', 0), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), "font-weight:", euiTheme.font.weight.semiBold, ";color:", euiTheme.colors.textHeading, ";&:focus{outline-offset:-", euiTheme.focus.width, ";};label:euiTab;"),
     // variations
     expanded: _ref,
-    selected: /*#__PURE__*/(0, _react.css)("box-shadow:inset 0 -", euiTheme.border.width.thick, " 0 ", euiTheme.colors.primary, ";color:", euiTheme.colors.primaryText, ";;label:selected;"),
+    selected: /*#__PURE__*/(0, _react.css)("box-shadow:inset 0 -", euiTheme.border.width.thick, " 0 ", euiTheme.colors.primary, ";color:", euiTheme.colors.textPrimary, ";;label:selected;"),
     disabled: {
       disabled: /*#__PURE__*/(0, _react.css)("cursor:not-allowed;color:", euiTheme.colors.disabledText, ";;label:disabled;"),
       selected: /*#__PURE__*/(0, _react.css)("box-shadow:inset 0 -", euiTheme.border.width.thick, " 0 ", euiTheme.colors.disabledText, ";;label:selected;")

package/lib/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/lib/components/text/text_color.js

@@ -28,7 +28,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
-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/lib/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/lib/components/text_diff/text_diff.styles.js

@@ -17,6 +17,6 @@ var euiTextDiffStyles = exports.euiTextDiffStyles = function euiTextDiffStyles(_
   var euiTheme = _ref.euiTheme;
   return {
     // Base
-    euiTextDiff: /*#__PURE__*/(0, _react.css)("del{color:", euiTheme.colors.dangerText, ";}ins{color:", euiTheme.colors.successText, ";};label:euiTextDiff;")
+    euiTextDiff: /*#__PURE__*/(0, _react.css)("del{color:", euiTheme.colors.textDanger, ";}ins{color:", euiTheme.colors.textSuccess, ";};label:euiTextDiff;")
   };
 };

package/lib/components/toast/toast.styles.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiToastStyles = exports.euiToastHeaderStyles = void 0;
 var _react = require("@emotion/react");
+var _euiThemeCommon = require("@elastic/eui-theme-common");
 var _global_styling = require("../../global_styling");
-var _amsterdam = require("../../themes/amsterdam");
 var _title = require("../title/title.styles");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -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, _euiThemeCommon.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/lib/components/token/token.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiToken = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../services");
 var _icon = require("../icon");
@@ -22,6 +22,8 @@ var _excluded = ["iconType", "color", "fill", "shape", "size", "style", "classNa
  * Side Public License, v 1.
  */
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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 _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 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; }
@@ -63,15 +65,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/lib/components/token/token.styles.js

@@ -8,6 +8,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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -22,16 +23,24 @@ 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 boxShadowColor = isDarkMode ? (0, _services.shade)(iconColor, 0.6) : (0, _services.tint)(iconColor, 0.7);
+  var backgroundLightColor = isDarkMode ? (0, _services.shade)(iconColor, 0.9) : (0, _services.tint)(iconColor, 0.9);
+  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 ? (0, _services.shade)(getIconVisColor(euiTheme, color), 0.3) : iconColor;
+  var boxShadowColor = isDarkMode ? (0, _services.shade)(iconColor, 0.6) : (0, _services.tint)(iconColor, 0.2);
   var darkColor = _services.isColorDark.apply(void 0, _toConsumableArray((0, _chromaJs.default)(backgroundDarkColor).rgb())) ? euiTheme.colors.ghost : euiTheme.colors.ink;
   switch (fill) {
     case 'none':

package/lib/components/token/token_map.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TOKEN_MAP = void 0;
+exports.TOKEN_MAP_BOREALIS = exports.TOKEN_MAP_AMSTERDAM = exports.TOKEN_COLOR_TO_ICON_COLOR_MAP = void 0;
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -18,7 +18,7 @@ exports.TOKEN_MAP = void 0;
  * circle shape for more uncommon token types so they grab attention.
  */
 
-var TOKEN_MAP = exports.TOKEN_MAP = {
+var TOKEN_MAP_AMSTERDAM = exports.TOKEN_MAP_AMSTERDAM = {
   tokenAlias: {
     shape: 'circle',
     color: 'euiColorVis3'
@@ -247,4 +247,246 @@ var TOKEN_MAP = exports.TOKEN_MAP = {
     shape: 'square',
     color: 'euiColorVis1'
   }
+};
+var TOKEN_MAP_BOREALIS = exports.TOKEN_MAP_BOREALIS = {
+  tokenAlias: {
+    shape: 'square',
+    color: 'euiColorVis0'
+  },
+  tokenAnnotation: {
+    shape: 'square',
+    color: 'euiColorVis8'
+  },
+  tokenArray: {
+    shape: 'square',
+    color: 'euiColorVis4'
+  },
+  tokenBinary: {
+    shape: 'square',
+    color: 'euiColorVis6'
+  },
+  tokenBoolean: {
+    shape: 'square',
+    color: 'euiColorVis4'
+  },
+  tokenClass: {
+    shape: 'circle',
+    color: 'euiColorVis2'
+  },
+  tokenCompletionSuggester: {
+    shape: 'square',
+    color: 'euiColorVis2'
+  },
+  tokenConstant: {
+    shape: 'circle',
+    color: 'euiColorVis0'
+  },
+  tokenDate: {
+    shape: 'square',
+    color: 'euiColorVis8'
+  },
+  tokenDimension: {
+    shape: 'square',
+    color: 'euiColorVis2'
+  },
+  tokenElement: {
+    shape: 'square',
+    color: 'euiColorVis0'
+  },
+  tokenEnum: {
+    shape: 'circle',
+    color: 'euiColorVis0'
+  },
+  tokenEnumMember: {
+    shape: 'square',
+    color: 'euiColorVis4'
+  },
+  tokenEvent: {
+    shape: 'circle',
+    color: 'euiColorVis6'
+  },
+  tokenException: {
+    shape: 'circle',
+    color: 'euiColorVis0'
+  },
+  tokenField: {
+    shape: 'circle',
+    color: 'euiColorVis0'
+  },
+  tokenFile: {
+    shape: 'square',
+    color: 'euiColorVis4'
+  },
+  tokenFlattened: {
+    shape: 'square',
+    color: 'euiColorVis4'
+  },
+  tokenFunction: {
+    shape: 'circle',
+    color: 'euiColorVis4'
+  },
+  tokenGeo: {
+    shape: 'square',
+    color: 'euiColorVis8'
+  },
+  tokenHistogram: {
+    shape: 'square',
+    color: 'euiColorVis0'
+  },
+  tokenInterface: {
+    shape: 'circle',
+    color: 'euiColorVis6'
+  },
+  tokenIP: {
+    shape: 'square',
+    color: 'euiColorVis6'
+  },
+  tokenJoin: {
+    shape: 'square',
+    color: 'euiColorVis8'
+  },
+  tokenKey: {
+    shape: 'circle',
+    color: 'euiColorVis8'
+  },
+  tokenKeyword: {
+    shape: 'square',
+    color: 'euiColorVis2'
+  },
+  tokenMethod: {
+    shape: 'square',
+    color: 'euiColorVis4'
+  },
+  tokenMetricCounter: {
+    shape: 'square',
+    color: 'euiColorVis0'
+  },
+  tokenMetricGauge: {
+    shape: 'square',
+    color: 'euiColorVis0'
+  },
+  tokenModule: {
+    shape: 'square',
+    color: 'euiColorVis6'
+  },
+  tokenNamespace: {
+    shape: 'square',
+    color: 'euiColorVis2'
+  },
+  tokenNested: {
+    shape: 'circle',
+    color: 'euiColorVis4'
+  },
+  tokenNull: {
+    shape: 'square',
+    color: 'euiColorVis4'
+  },
+  tokenNumber: {
+    shape: 'square',
+    color: 'euiColorVis0'
+  },
+  tokenObject: {
+    shape: 'circle',
+    color: 'euiColorVis0'
+  },
+  tokenOperator: {
+    shape: 'circle',
+    color: 'euiColorVis6'
+  },
+  tokenPackage: {
+    shape: 'square',
+    color: 'euiColorVis0'
+  },
+  tokenParameter: {
+    shape: 'square',
+    color: 'euiColorVis6'
+  },
+  tokenPercolator: {
+    shape: 'square',
+    color: 'euiColorVis0'
+  },
+  tokenProperty: {
+    shape: 'circle',
+    color: 'euiColorVis4'
+  },
+  tokenRange: {
+    shape: 'circle',
+    color: 'euiColorVis6'
+  },
+  tokenRankFeature: {
+    shape: 'square',
+    color: 'euiColorVis8'
+  },
+  tokenRankFeatures: {
+    shape: 'square',
+    color: 'euiColorVis0'
+  },
+  tokenRepo: {
+    shape: 'square',
+    color: 'euiColorVis2'
+  },
+  tokenSearchType: {
+    shape: 'square',
+    color: 'euiColorVis8'
+  },
+  tokenSemanticText: {
+    shape: 'square',
+    color: 'euiColorVis0'
+  },
+  tokenShape: {
+    shape: 'circle',
+    color: 'euiColorVis8'
+  },
+  tokenString: {
+    shape: 'square',
+    color: 'euiColorVis2'
+  },
+  tokenStruct: {
+    shape: 'square',
+    color: 'euiColorVis0'
+  },
+  tokenSymbol: {
+    shape: 'square',
+    color: 'euiColorVis0'
+  },
+  tokenTag: {
+    shape: 'square',
+    color: 'euiColorVis6'
+  },
+  tokenText: {
+    shape: 'square',
+    color: 'euiColorVis0'
+  },
+  tokenTokenCount: {
+    shape: 'square',
+    color: 'euiColorVis6'
+  },
+  tokenVariable: {
+    shape: 'circle',
+    color: 'euiColorVis4'
+  },
+  tokenVectorDense: {
+    shape: 'square',
+    color: 'euiColorVis8'
+  },
+  tokenDenseVector: {
+    shape: 'square',
+    color: 'euiColorVis8'
+  },
+  tokenVectorSparse: {
+    shape: 'square',
+    color: 'euiColorVis2'
+  }
+};
+var TOKEN_COLOR_TO_ICON_COLOR_MAP = exports.TOKEN_COLOR_TO_ICON_COLOR_MAP = {
+  euiColorVis0: 'euiColorVis0',
+  euiColorVis1: 'euiColorVis0',
+  euiColorVis2: 'euiColorVis2',
+  euiColorVis3: 'euiColorVis2',
+  euiColorVis4: 'euiColorVis4',
+  euiColorVis5: 'euiColorVis4',
+  euiColorVis6: 'euiColorVis6',
+  euiColorVis7: 'euiColorVis6',
+  euiColorVis8: 'euiColorVis8',
+  euiColorVis9: 'euiColorVis8'
 };