@elastic/eui 97.3.0-borealis.1 → 97.3.1

package/optimize/es/components/popover/popover_footer.styles.js

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

package/optimize/es/components/popover/popover_panel/_popover_panel.styles.js

@@ -10,6 +10,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 import { css } from '@emotion/react';
 import { euiShadow, euiShadowFlat, euiShadowMedium } from '../../../themes/amsterdam/global_styling/mixins';
 import { getShadowColor } from '../../../themes/amsterdam/global_styling/functions';
+import { tint } from '../../../services';
 import { euiCanAnimate, logicalCSS, mathWithUnits } from '../../../global_styling';
 export var openAnimationTiming = 'slow';
 
@@ -38,11 +39,11 @@ export var euiPopoverPanelStyles = function euiPopoverPanelStyles(euiThemeContex
   }));
   return {
     // Base
-    euiPopover__panel: /*#__PURE__*/css("position:absolute;", logicalCSS('min-width', "".concat(euiTheme.base * 7, "px")), logicalCSS('max-width', "calc(100vw - ".concat(euiTheme.size.xl, ")")), "backface-visibility:hidden;pointer-events:none;opacity:0;background-color:var(--euiPopoverBackgroundColor);", 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;"),
+    euiPopover__panel: /*#__PURE__*/css("position:absolute;", logicalCSS('min-width', "".concat(euiTheme.base * 7, "px")), logicalCSS('max-width', "calc(100vw - ".concat(euiTheme.size.xl, ")")), "backface-visibility:hidden;pointer-events:none;opacity:0;background-color:var(--euiPopoverBackgroundColor);", euiCanAnimate, "{transition:", opacityTransition, ",", transformTransition, ";}&:focus{outline-offset:0;};label:euiPopover__panel;"),
     isOpen: _ref,
     /* 4 */
-    light: /*#__PURE__*/css("--euiPopoverBackgroundColor:", euiTheme.components.popoverPanelBackground, ";;label:light;"),
-    dark: /*#__PURE__*/css("--euiPopoverBackgroundColor:", euiTheme.components.popoverPanelBackground, ";;label:dark;"),
+    light: /*#__PURE__*/css("--euiPopoverBackgroundColor:", euiTheme.colors.emptyShade, ";;label:light;"),
+    dark: /*#__PURE__*/css("--euiPopoverBackgroundColor:", tint(euiTheme.colors.emptyShade, 0.025), ";;label:dark;"),
     // Regular popover with an arrow, a transform animation/transition, and a
     // drop shadow via `filter` (which automatically handles the arrow)
     hasTransform: {

package/optimize/es/components/progress/progress.js

@@ -18,7 +18,7 @@ import { useEuiTheme, makeHighContrastColor } from '../../services';
 import { euiProgressStyles, euiProgressDataStyles, euiProgressLabelStyles, euiProgressValueTextStyles } from './progress.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var SIZES = ['xs', 's', 'm', 'l'];
-export var COLORS = ['primary', 'success', 'warning', 'danger', 'subdued', 'accent', 'accentSecondary', 'vis0', 'vis1', 'vis2', 'vis3', 'vis4', 'vis5', 'vis6', 'vis7', 'vis8', 'vis9'];
+export var COLORS = ['primary', 'success', 'warning', 'danger', 'subdued', 'accent', 'vis0', 'vis1', 'vis2', 'vis3', 'vis4', 'vis5', 'vis6', 'vis7', 'vis8', 'vis9'];
 export var POSITIONS = ['fixed', 'absolute', 'static'];
 export var EuiProgress = function EuiProgress(_ref) {
   var className = _ref.className,

package/optimize/es/components/progress/progress.styles.js

@@ -84,7 +84,6 @@ export var euiProgressStyles = function euiProgressStyles(_ref3, isNative) {
     danger: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.danger, isNative), ";;label:danger;"),
     subdued: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.subduedText, isNative), ";;label:subdued;"),
     accent: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.accent, isNative), ";;label:accent;"),
-    accentSecondary: /*#__PURE__*/css(nativeVsIndeterminateColor(euiTheme.colors.accentSecondary, isNative), ";;label:accentSecondary;"),
     vis0: /*#__PURE__*/css(nativeVsIndeterminateColor(visColors[0], isNative), ";;label:vis0;"),
     vis1: /*#__PURE__*/css(nativeVsIndeterminateColor(visColors[1], isNative), ";;label:vis1;"),
     vis2: /*#__PURE__*/css(nativeVsIndeterminateColor(visColors[2], isNative), ";;label:vis2;"),
@@ -125,13 +124,12 @@ export var euiProgressValueTextStyles = function euiProgressValueTextStyles(_ref
   return {
     euiProgress__valueText: /*#__PURE__*/css("flex-grow:1;flex-shrink:0;font-feature-settings:'tnum' 1;", logicalTextAlignCSS('right'), " ", euiTextTruncate(), ";;label:euiProgress__valueText;"),
     // Colors
-    primary: /*#__PURE__*/css("color:", euiTheme.colors.textPrimary, ";;label:primary;"),
-    success: /*#__PURE__*/css("color:", euiTheme.colors.textSuccess, ";;label:success;"),
-    warning: /*#__PURE__*/css("color:", euiTheme.colors.textWarning, ";;label:warning;"),
-    danger: /*#__PURE__*/css("color:", euiTheme.colors.textDanger, ";;label:danger;"),
-    subdued: /*#__PURE__*/css("color:", euiTheme.colors.textSubdued, ";;label:subdued;"),
-    accent: /*#__PURE__*/css("color:", euiTheme.colors.textAccent, ";;label:accent;"),
-    accentSecondary: /*#__PURE__*/css("color:", euiTheme.colors.textAccentSecondary, ";;label:accentSecondary;"),
+    primary: /*#__PURE__*/css("color:", euiTheme.colors.primaryText, ";;label:primary;"),
+    success: /*#__PURE__*/css("color:", euiTheme.colors.successText, ";;label:success;"),
+    warning: /*#__PURE__*/css("color:", euiTheme.colors.warningText, ";;label:warning;"),
+    danger: /*#__PURE__*/css("color:", euiTheme.colors.dangerText, ";;label:danger;"),
+    subdued: /*#__PURE__*/css("color:", euiTheme.colors.subduedText, ";;label:subdued;"),
+    accent: /*#__PURE__*/css("color:", euiTheme.colors.accentText, ";;label:accent;"),
     vis0: /*#__PURE__*/css("color:", makeHighContrastColor(visColors[0])(euiTheme), ";;label:vis0;"),
     vis1: /*#__PURE__*/css("color:", makeHighContrastColor(visColors[1])(euiTheme), ";;label:vis1;"),
     vis2: /*#__PURE__*/css("color:", makeHighContrastColor(visColors[2])(euiTheme), ";;label:vis2;"),

package/optimize/es/components/selectable/selectable_list/selectable_list_item.styles.js

@@ -8,10 +8,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
+import { transparentize } from '../../../services';
 import { euiFontSize, euiTextTruncate, logicalCSS } from '../../../global_styling';
 export var euiSelectableListItemVariables = function euiSelectableListItemVariables(_ref2) {
   var euiTheme = _ref2.euiTheme;
-  var lighterBorder = euiTheme.components.selectableListItemBorderColor;
+  var lighterBorder = transparentize(euiTheme.border.color, 0.4);
   return {
     border: "".concat(euiTheme.border.width.thin, " solid ").concat(lighterBorder),
     paddingHorizontal: euiTheme.size.m,

package/optimize/es/components/side_nav/side_nav_item.styles.js

@@ -11,11 +11,12 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
+import { transparentize } from '../../services';
 import { euiFontSize, logicalCSS, mathWithUnits } from '../../global_styling';
 import { euiTitle } from '../title/title.styles';
 export var euiSideNavItemStyles = function euiSideNavItemStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var emphasizedBackgroundColor = euiTheme.components.sideNavItemEmphasizedBackground;
+  var emphasizedBackgroundColor = transparentize(euiTheme.colors.lightShade, 0.3);
   return {
     euiSideNavItem: /*#__PURE__*/css(";label:euiSideNavItem;"),
     emphasized: /*#__PURE__*/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/optimize/es/components/skeleton/utils.js

@@ -7,16 +7,18 @@
  */
 
 import { css } from '@emotion/react';
+import { shade, tint } from '../../services';
 import { euiCanAnimate, logicalCSS } from '../../global_styling';
 import { euiAnimSlideX } from '../../global_styling/utility/animations';
 export var euiSkeletonGradientAnimation = function euiSkeletonGradientAnimation(_ref) {
-  var euiTheme = _ref.euiTheme;
+  var euiTheme = _ref.euiTheme,
+    colorMode = _ref.colorMode;
   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 = euiTheme.colors.backgroundBaseSkeletonEdge;
-  var gradientMiddle = euiTheme.colors.backgroundBaseSkeletonMiddle;
+  var gradientStartStop = colorMode === 'DARK' ? shade(euiTheme.colors.lightShade, 0.12) : tint(euiTheme.colors.lightShade, 0.65);
+  var gradientMiddle = colorMode === 'DARK' ? shade(euiTheme.colors.lightShade, 0.24) : tint(euiTheme.colors.lightShade, 0.8);
   return /*#__PURE__*/css("background-color:", gradientStartStop, ";", euiCanAnimate, "{overflow:hidden;isolation:isolate;&::after{content:'';display:block;", logicalCSS('width', gradientSize), " ", logicalCSS('height', '100%'), " background:linear-gradient(\n          137deg,\n          ", gradientStartStop, " 45%,\n          ", gradientMiddle, " 50%,\n          ", gradientStartStop, " 55%\n        );animation:", euiAnimSlideX(slideSize), " 1.5s ", euiTheme.animation.resistance, " infinite;}};label:euiSkeletonGradientAnimation;");
 };

package/optimize/es/components/steps/step_number.styles.js

@@ -10,7 +10,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 import { css } from '@emotion/react';
 import { mathWithUnits, logicalCSS, euiFontSizeFromScale, euiCanAnimate, euiAnimScale, logicalSizeCSS } from '../../global_styling';
 import { euiStepVariables } from './step.styles';
-import { euiButtonFillColor } from '../../global_styling/mixins';
+import { euiButtonFillColor } from '../../themes/amsterdam/global_styling/mixins';
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "76s2de-loading",
   styles: "background:transparent;label:loading;"

package/optimize/es/components/table/table_cells_shared.styles.js

@@ -10,10 +10,12 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  */
 
 import { css } from '@emotion/react';
+import { makeHighContrastColor, tintOrShade } from '../../services';
 import { euiFontSize, logicalCSS, logicalTextAlignCSS } from '../../global_styling';
 import { euiTableVariables } from './table.styles';
 export var euiTableHeaderFooterCellStyles = function euiTableHeaderFooterCellStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    colorMode = euiThemeContext.colorMode;
 
   // euiFontSize returns an object, so we keep object notation here to merge into css``
   var sharedStyles = _objectSpread(_objectSpread({}, euiFontSize(euiThemeContext, 'xs')), {}, {
@@ -24,7 +26,10 @@ export var euiTableHeaderFooterCellStyles = function euiTableHeaderFooterCellSty
   return {
     euiTableHeaderCell: /*#__PURE__*/css(sharedStyles, ";;label:euiTableHeaderCell;"),
     euiTableHeaderCell__content: /*#__PURE__*/css("gap:", euiTheme.size.xs, ";;label:euiTableHeaderCell__content;"),
-    euiTableHeaderCell__button: /*#__PURE__*/css(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;"),
+    euiTableHeaderCell__button: /*#__PURE__*/css(logicalCSS('width', '100%'), " font-weight:inherit;line-height:inherit;.euiTableSortIcon--sortable{color:", makeHighContrastColor(
+    // Tint it arbitrarily high, the contrast util will take care of lowering back down to WCAG
+    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;"),
     euiTableFooterCell: /*#__PURE__*/css(sharedStyles, " background-color:", euiTheme.colors.lightestShade, ";;label:euiTableFooterCell;")
   };
 };

package/optimize/es/components/table/table_row.styles.js

@@ -9,7 +9,8 @@ var _templateObject;
  */
 
 import { css, keyframes } from '@emotion/react';
-import { euiCanAnimate, logicalCSS } from '../../global_styling';
+import { tint, shade, transparentize } from '../../services';
+import { euiCanAnimate, euiBackgroundColor, logicalCSS } from '../../global_styling';
 import { euiShadow } from '../../themes/amsterdam/global_styling/mixins';
 import { euiTableVariables } from './table.styles';
 export var euiTableRowStyles = function euiTableRowStyles(euiThemeContext) {
@@ -32,7 +33,7 @@ export var euiTableRowStyles = function euiTableRowStyles(euiThemeContext) {
       checkboxOffset: /*#__PURE__*/css("&>.euiTableRowCell:first-child{", logicalCSS('padding-left', checkboxSize), ";};label:checkboxOffset;")
     },
     mobile: {
-      mobile: /*#__PURE__*/css("position:relative;display:flex;flex-wrap:wrap;padding:", cellContentPadding, ";", logicalCSS('margin-bottom', cellContentPadding), euiShadow(euiThemeContext, 's'), " background-color:", euiTheme.colors.backgroundBasePlain, ";border-radius:", euiTheme.border.radius.medium, ";;label:mobile;"),
+      mobile: /*#__PURE__*/css("position:relative;display:flex;flex-wrap:wrap;padding:", cellContentPadding, ";", logicalCSS('margin-bottom', cellContentPadding), euiShadow(euiThemeContext, 's'), " background-color:", euiBackgroundColor(euiThemeContext, 'plain'), ";border-radius:", euiTheme.border.radius.medium, ";;label:mobile;"),
       selected: /*#__PURE__*/css("&,&+.euiTableRow-isExpandedRow{background-color:", rowColors.selected.color, ";};label:selected;"),
       /**
        * Left column offset (no border)
@@ -61,16 +62,17 @@ var _expandedRowAnimation = function _expandedRowAnimation(_ref) {
   return /*#__PURE__*/css(euiCanAnimate, "{.euiTableCellContent{animation:", euiTheme.animation.fast, " ", euiTheme.animation.resistance, " 1 normal none ", expandRow, ";}}");
 };
 var _rowColorVariables = function _rowColorVariables(_ref2) {
-  var euiTheme = _ref2.euiTheme;
+  var euiTheme = _ref2.euiTheme,
+    colorMode = _ref2.colorMode;
   return {
-    hover: euiTheme.components.tableRowBackgroundHover,
+    hover: colorMode === 'DARK' ? euiTheme.colors.lightestShade : tint(euiTheme.colors.lightestShade, 0.5),
     selected: {
-      color: euiTheme.components.tableRowBackgroundSelected,
-      hover: euiTheme.components.tableRowBackgroundSelectedHover
+      color: colorMode === 'DARK' ? shade(euiTheme.colors.primary, 0.7) : tint(euiTheme.colors.primary, 0.96),
+      hover: colorMode === 'DARK' ? shade(euiTheme.colors.primary, 0.75) : tint(euiTheme.colors.primary, 0.9)
     },
     clickable: {
-      hover: euiTheme.components.tableRowInteractiveBackgroundHover,
-      focus: euiTheme.components.tableRowInteractiveBackgroundFocus
+      hover: transparentize(euiTheme.colors.primary, 0.05),
+      focus: transparentize(euiTheme.colors.primary, 0.1)
     }
   };
 };

package/optimize/es/components/text/text.styles.js

@@ -7,7 +7,7 @@
  */
 
 import { css } from '@emotion/react';
-import { logicalCSS, logicalShorthandCSS, logicalTextAlignCSS, euiFontSize, mathWithUnits } from '../../global_styling';
+import { logicalCSS, logicalShorthandCSS, logicalTextAlignCSS, euiFontSize, euiBackgroundColor, mathWithUnits } from '../../global_styling';
 import { euiLinkCSS } from '../link/link.styles';
 import { euiTitle } from '../title/title.styles';
 
@@ -65,7 +65,7 @@ var euiScaleText = function euiScaleText(euiThemeContext, options) {
 export var euiTextStyles = function euiTextStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiText: /*#__PURE__*/css(euiText(euiTheme, true), "clear:both;a:not([class]){", 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{", euiTitle(euiThemeContext, 'l'), ";}h2{", euiTitle(euiThemeContext, 'm'), ";}h3{", euiTitle(euiThemeContext, 's'), ";}h4,dt{", euiTitle(euiThemeContext, 'xs'), ";}h5{", euiTitle(euiThemeContext, 'xxs'), ";}h6{", 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{", logicalCSS('margin-bottom', '0 !important'), ";}kbd{position:relative;display:inline-block;", logicalCSS('padding-vertical', euiTheme.size.xxs), " ", logicalCSS('padding-horizontal', euiTheme.size.xs), " line-height:1;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.text, ";border-radius:", mathWithUnits(euiTheme.border.radius.small, function (x) {
+    euiText: /*#__PURE__*/css(euiText(euiTheme, true), "clear:both;a:not([class]){", 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{", euiTitle(euiThemeContext, 'l'), ";}h2{", euiTitle(euiThemeContext, 'm'), ";}h3{", euiTitle(euiThemeContext, 's'), ";}h4,dt{", euiTitle(euiThemeContext, 'xs'), ";}h5{", euiTitle(euiThemeContext, 'xxs'), ";}h6{", euiTitle(euiThemeContext, 'xxxs'), " text-transform:uppercase;}h1,h2,h3,h4,h5,h6,dt{color:inherit;}pre:not(.euiCodeBlock__pre){white-space:pre-wrap;background:", euiBackgroundColor(euiThemeContext, 'subdued'), ";color:", euiTheme.colors.text, ";}pre:not(.euiCodeBlock__pre),pre:not(.euiCodeBlock__pre) code{display:block;}>:last-child{", logicalCSS('margin-bottom', '0 !important'), ";}kbd{position:relative;display:inline-block;", logicalCSS('padding-vertical', euiTheme.size.xxs), " ", logicalCSS('padding-horizontal', euiTheme.size.xs), " line-height:1;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.text, ";border-radius:", mathWithUnits(euiTheme.border.radius.small, function (x) {
       return x / 2;
     }), ";};label:euiText;"),
     constrainedWidth: /*#__PURE__*/css(logicalCSS('max-width', euiTextConstrainedMaxWidth), ";;label:constrainedWidth;"),

package/optimize/es/components/text/text_color.js

@@ -15,7 +15,7 @@ import React, { isValidElement } from 'react';
 import { useEuiMemoizedStyles, cloneElementWithCss } from '../../services';
 import { euiTextColorStyles } from './text_color.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var COLORS = ['default', 'subdued', 'success', 'accent', 'accentSecondary', 'danger', 'warning', 'ghost', 'inherit'];
+export var COLORS = ['default', 'subdued', 'success', 'accent', 'danger', 'warning', 'ghost', 'inherit'];
 export var _isNamedColor = function _isNamedColor(color) {
   return COLORS.includes(color);
 };

package/optimize/es/components/text/text_color.styles.js

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

package/optimize/es/components/tool_tip/tool_tip.styles.js

@@ -11,12 +11,13 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css, keyframes } from '@emotion/react';
 import { logicalCSS, logicalSizeCSS, euiFontSize, euiCanAnimate, mathWithUnits } from '../../global_styling';
+import { COLOR_MODES_STANDARD, tint, shade } from '../../services';
 import { euiShadow } from '../../themes/amsterdam';
-export var euiToolTipBackgroundColor = function euiToolTipBackgroundColor(euiTheme) {
-  return euiTheme.components.tooltipBackground;
+export var euiToolTipBackgroundColor = function euiToolTipBackgroundColor(euiTheme, colorMode) {
+  return colorMode === COLOR_MODES_STANDARD.dark ? shade(euiTheme.colors.emptyShade, 1) : tint(euiTheme.colors.fullShade, 0.25);
 };
-export var euiToolTipBorderColor = function euiToolTipBorderColor(euiTheme) {
-  return euiTheme.components.tooltipBorder;
+export var euiToolTipBorderColor = function euiToolTipBorderColor(euiTheme, colorMode) {
+  return colorMode === COLOR_MODES_STANDARD.dark ? shade(euiTheme.colors.fullShade, 0.8) : tint(euiTheme.colors.fullShade, 0.35);
 };
 var euiToolTipAnimationVertical = function euiToolTipAnimationVertical(size) {
   return keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    0% {\n        opacity: 0;\n        transform: translateY(", ");\n    }\n\n    100% {\n        opacity: 1;\n        transform: translateY(0);\n    }\n"])), size);
@@ -25,7 +26,8 @@ var euiToolTipAnimationHorizontal = function euiToolTipAnimationHorizontal(size)
   return keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    0% {\n        opacity: 0;\n        transform: translateX(", ");\n    }\n\n    100% {\n        opacity: 1;\n        transform: translateX(0);\n    }\n"])), size);
 };
 export var euiToolTipStyles = function euiToolTipStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    colorMode = euiThemeContext.colorMode;
   var animationTiming = "".concat(euiTheme.animation.slow, " ease-out 0s forwards");
   // Shift arrow 1px more than half its size to account for border radius
   var arrowSize = euiTheme.size.m;
@@ -37,7 +39,7 @@ export var euiToolTipStyles = function euiToolTipStyles(euiThemeContext) {
   });
   return {
     // Base
-    euiToolTip: /*#__PURE__*/css(euiShadow(euiThemeContext), " border-radius:", euiTheme.border.radius.medium, ";border:", euiTheme.border.width.thin, " solid ", euiTheme.components.tooltipBorderFloating, ";background-color:", euiToolTipBackgroundColor(euiTheme), ";color:", euiTheme.colors.ghost, ";z-index:", euiTheme.levels.toast, ";", logicalCSS('max-width', '256px'), " overflow-wrap:break-word;padding:", euiTheme.size.s, ";", euiFontSize(euiThemeContext, 's'), " position:absolute;[class*='euiHorizontalRule']{background-color:", euiToolTipBorderColor(euiTheme), ";};label:euiToolTip;"),
+    euiToolTip: /*#__PURE__*/css(euiShadow(euiThemeContext), " border-radius:", euiTheme.border.radius.medium, ";background-color:", euiToolTipBackgroundColor(euiTheme, colorMode), ";color:", euiTheme.colors.ghost, ";z-index:", euiTheme.levels.toast, ";", logicalCSS('max-width', '256px'), " overflow-wrap:break-word;padding:", euiTheme.size.s, ";", euiFontSize(euiThemeContext, 's'), " position:absolute;[class*='euiHorizontalRule']{background-color:", euiToolTipBorderColor(euiTheme, colorMode), ";};label:euiToolTip;"),
     // Sizes
     s: /*#__PURE__*/css(euiFontSize(euiThemeContext, 'xs'), ";;label:s;"),
     // Positions
@@ -48,7 +50,7 @@ export var euiToolTipStyles = function euiToolTipStyles(euiThemeContext) {
     // Arrow
     euiToolTip__arrow: /*#__PURE__*/css("content:'';position:absolute;transform-origin:center;border-radius:", mathWithUnits(euiTheme.border.radius.small, function (x) {
       return x / 2;
-    }), ";background-color:", euiToolTipBackgroundColor(euiTheme), ";", logicalSizeCSS(arrowSize, arrowSize), ";;label:euiToolTip__arrow;"),
+    }), ";background-color:", euiToolTipBackgroundColor(euiTheme, colorMode), ";", logicalSizeCSS(arrowSize, arrowSize), ";;label:euiToolTip__arrow;"),
     arrowPositions: {
       top: /*#__PURE__*/css("transform:translateY(", arrowPlusSize, ") rotateZ(45deg);;label:top;"),
       bottom: /*#__PURE__*/css("transform:translateY(", arrowMinusSize, ") rotateZ(45deg);;label:bottom;"),
@@ -56,7 +58,7 @@ export var euiToolTipStyles = function euiToolTipStyles(euiThemeContext) {
       right: /*#__PURE__*/css("transform:translateX(", arrowMinusSize, ") rotateZ(45deg);;label:right;")
     },
     // Title
-    euiToolTip__title: /*#__PURE__*/css("font-weight:", euiTheme.font.weight.bold, ";", logicalCSS('border-bottom', "solid ".concat(euiTheme.border.width.thin, " ").concat(euiToolTipBorderColor(euiTheme))), " ", logicalCSS('padding-bottom', euiTheme.size.xs), " ", logicalCSS('margin-bottom', euiTheme.size.xs), ";;label:euiToolTip__title;")
+    euiToolTip__title: /*#__PURE__*/css("font-weight:", euiTheme.font.weight.bold, ";", logicalCSS('border-bottom', "solid ".concat(euiTheme.border.width.thin, " ").concat(euiToolTipBorderColor(euiTheme, colorMode))), " ", logicalCSS('padding-bottom', euiTheme.size.xs), " ", logicalCSS('margin-bottom', euiTheme.size.xs), ";;label:euiToolTip__title;")
   };
 };
 var _ref = process.env.NODE_ENV === "production" ? {

package/optimize/es/components/tour/_tour_footer.styles.js

@@ -7,10 +7,12 @@
  */
 
 import { css } from '@emotion/react';
+import { shade, tint } from '../../services';
 import { logicalCSS } from '../../global_styling';
 export var _tourFooterBgColor = function _tourFooterBgColor(_ref) {
-  var euiTheme = _ref.euiTheme;
-  return euiTheme.components.tourFooterBackground;
+  var colorMode = _ref.colorMode,
+    euiTheme = _ref.euiTheme;
+  return colorMode === 'DARK' ? shade(euiTheme.colors.lightestShade, 0.45) : tint(euiTheme.colors.lightestShade, 0.5);
 };
 export var euiTourFooterStyles = function euiTourFooterStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;

package/optimize/es/components/tree_view/tree_view_item.styles.js

@@ -8,6 +8,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
+import { transparentize } from '../../services';
 import { euiFocusRing, logicalCSS, mathWithUnits } from '../../global_styling';
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "22lgun-euiTreeView__node",
@@ -29,7 +30,7 @@ export var euiTreeViewItemStyles = function euiTreeViewItemStyles(euiThemeContex
       expanded: /*#__PURE__*/css(logicalCSS('max-height', '100vh'), ";;label:expanded;")
     },
     button: {
-      euiTreeView__nodeInner: /*#__PURE__*/css(logicalCSS('width', '100%'), " ", logicalCSS('padding-left', euiTheme.size.s), " ", logicalCSS('padding-right', euiTheme.size.xxs), " display:flex;align-items:center;&:focus{", euiFocusRing(euiThemeContext, 'inset'), ";}&:hover,&:active,&:focus{background-color:", euiTheme.components.treeViewItemBackgroundHover, ";};label:euiTreeView__nodeInner;"),
+      euiTreeView__nodeInner: /*#__PURE__*/css(logicalCSS('width', '100%'), " ", logicalCSS('padding-left', euiTheme.size.s), " ", logicalCSS('padding-right', euiTheme.size.xxs), " display:flex;align-items:center;&:focus{", euiFocusRing(euiThemeContext, 'inset'), ";}&:hover,&:active,&:focus{background-color:", transparentize(euiTheme.colors.text, euiTheme.focus.transparency), ";};label:euiTreeView__nodeInner;"),
       default: /*#__PURE__*/css(logicalCSS('height', defaultSize), " gap:", euiTheme.size.s, ";border-radius:", euiTheme.border.radius.medium, ";;label:default;"),
       compressed: /*#__PURE__*/css(logicalCSS('height', compressedSize), " gap:", euiTheme.size.xs, ";border-radius:", euiTheme.border.radius.small, ";;label:compressed;")
     },

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

@@ -1,3 +1,4 @@
+import _typeof from "@babel/runtime/helpers/typeof";
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -6,4 +7,19 @@
  * Side Public License, v 1.
  */
 
-export { sizeToPixel } from '@elastic/eui-theme-common';
+/**
+ * Calculates the `px` value based on a scale multiplier
+ * @param scale - The font scale multiplier
+ * *
+ * @param themeOrBase - Theme base value
+ * *
+ * @returns string - Rem unit aligned to baseline
+ */
+
+export var sizeToPixel = function sizeToPixel() {
+  var scale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+  return function (themeOrBase) {
+    var base = _typeof(themeOrBase) === 'object' ? themeOrBase.base : themeOrBase;
+    return "".concat(base * scale, "px");
+  };
+};

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

@@ -10,29 +10,41 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  */
 
 import { css } from '@emotion/react';
-import { useEuiMemoizedStyles } from '../../services';
-import { getTokenName } from '@elastic/eui-theme-common';
-export var BACKGROUND_COLORS = ['transparent', 'plain', 'subdued', 'accent', 'accentSecondary', 'primary', 'success', 'warning', 'danger'];
+import { shade, tint, tintOrShade, transparentize, useEuiMemoizedStyles } from '../../services';
+export var BACKGROUND_COLORS = ['transparent', 'plain', 'subdued', 'accent', '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;
+  var euiTheme = _ref.euiTheme,
+    colorMode = _ref.colorMode;
   var _ref2 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
     method = _ref2.method;
   if (color === 'transparent') return 'transparent';
   if (method === 'transparent') {
-    var tokenName = getTokenName('backgroundTransparent', color);
-    return euiTheme.colors[tokenName];
+    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);
+    }
   } else {
-    var _tokenName = getTokenName('backgroundBase', color);
-    return euiTheme.colors[_tokenName];
+    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]);
+    }
   }
 };
 
 /**
- * @deprecated
  * @returns An object map of color keys to color values, categorized by
  * opaque (default) vs transparency (hover/focus states) methods.
  * e.g. {
@@ -52,10 +64,6 @@ 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;
@@ -64,44 +72,34 @@ export var useEuiBackgroundColor = function useEuiBackgroundColor(color) {
 };
 
 /**
- * @deprecated
  * @returns An object map of color keys to CSS,
  * e.g. { danger: css``, success: css``, ... }
  */
 var _euiBackgroundColors = function _euiBackgroundColors(euiThemeContext) {
   return BACKGROUND_COLORS.reduce(function (acc, 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, ";")));
+    return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, color, /*#__PURE__*/css("background-color:", euiBackgroundColor(euiThemeContext, color), ";label:", color, ";")));
   }, {});
 };
-
-/**
- * @deprecated - use background tokens directly
- * 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;
+  var euiTheme = _ref4.euiTheme,
+    colorMode = _ref4.colorMode;
   switch (color) {
     case 'transparent':
+    case 'plain':
+    case 'subdued':
       return euiTheme.border.color;
+    case 'warning':
+      return tintOrShade(euiTheme.colors.warning, 0.4, colorMode);
     default:
-      {
-        var tokenName = getTokenName('borderStrong', color);
-        return euiTheme.colors[tokenName];
-      }
+      return tintOrShade(euiTheme.colors[color], 0.6, colorMode);
   }
 };
 
@@ -111,16 +109,9 @@ export var euiBorderColor = function euiBorderColor(_ref4, color) {
  */
 var _euiBorderColors = function _euiBorderColors(euiThemeContext) {
   return BACKGROUND_COLORS.reduce(function (acc, color) {
-    var borderToken = getTokenName('borderBase', color);
-    return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, color, /*#__PURE__*/css("border-color:", euiThemeContext.euiTheme.colors[borderToken], ";label:", color, ";")));
+    return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, color, /*#__PURE__*/css("border-color:", euiBorderColor(euiThemeContext, color), ";label:", color, ";")));
   }, {});
 };
-
-/**
- * Hook to retrieve border style for a border variant
- * @returns An object map of color keys to CSS,
- * e.g. { danger: css``, success: css``, ... }
- */
 export var useEuiBorderColorCSS = function useEuiBorderColorCSS() {
   return useEuiMemoizedStyles(_euiBorderColors);
 };

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

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

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 { transparentize } from '../../services/color';
+import { shade, tint, 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: euiTheme.components.scrollbarTrackColor,
+    trackColor: colorMode === 'LIGHT' ? shade(colors.body, 0.03) : tint(colors.body, 0.07),
     width: 'auto'
   });
 

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

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