@elastic/eui 97.3.0 → 97.3.1-borealis.1

package/lib/themes/amsterdam/global_styling/variables/_forms.js

@@ -0,0 +1,157 @@
+"use strict";
+
+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); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.forms = void 0;
+var _utils = require("../../../../services/theme/utils");
+var _manipulation = require("../../../../services/color/manipulation");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } /*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+var _forms = {
+  background: (0, _utils.computed)(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 1),
+      lightestShade = _ref2[0];
+    return (0, _manipulation.tint)(lightestShade, 0.6);
+  }, ['colors.lightestShade']),
+  backgroundDisabled: (0, _utils.computed)(function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 1),
+      lightestShade = _ref4[0];
+    return (0, _manipulation.darken)(lightestShade, 0.05);
+  }, ['colors.lightestShade']),
+  backgroundReadOnly: (0, _utils.computed)(function (_ref5) {
+    var _ref6 = _slicedToArray(_ref5, 1),
+      emptyShade = _ref6[0];
+    return emptyShade;
+  }, ['colors.emptyShade']),
+  backgroundFocused: (0, _utils.computed)(function (_ref7) {
+    var _ref8 = _slicedToArray(_ref7, 1),
+      emptyShade = _ref8[0];
+    return emptyShade;
+  }, ['colors.emptyShade']),
+  backgroundAutofilled: (0, _utils.computed)(function (_ref9) {
+    var _ref10 = _slicedToArray(_ref9, 1),
+      primary = _ref10[0];
+    var background = (0, _manipulation.tint)(primary, 0.8);
+    return (0, _manipulation.tint)(background, 0.7);
+  }, ['colors.primary']),
+  prependBackground: (0, _utils.computed)(function (_ref11) {
+    var _ref12 = _slicedToArray(_ref11, 1),
+      lightShade = _ref12[0];
+    return (0, _manipulation.tint)(lightShade, 0.5);
+  }, ['colors.lightShade']),
+  border: (0, _utils.computed)(function (_ref13) {
+    var _ref14 = _slicedToArray(_ref13, 1),
+      lightShade = _ref14[0];
+    var color = (0, _manipulation.darken)(lightShade, 4);
+    return (0, _manipulation.transparentize)(color, 0.1);
+  }, ['colors.lightShade']),
+  borderAutofilled: (0, _utils.computed)(function (_ref15) {
+    var _ref16 = _slicedToArray(_ref15, 1),
+      primaryText = _ref16[0];
+    return (0, _manipulation.transparentize)(primaryText, 0.2);
+  }, ['colors.primaryText']),
+  controlBorder: (0, _utils.computed)(function (_ref17) {
+    var _ref18 = _slicedToArray(_ref17, 1),
+      lightestShade = _ref18[0];
+    return (0, _manipulation.shade)(lightestShade, 0.4);
+  }, ['colors.lightestShade']),
+  controlBorderSelected: (0, _utils.computed)(function (_ref19) {
+    var _ref20 = _slicedToArray(_ref19, 1),
+      lightestShade = _ref20[0];
+    return (0, _manipulation.shade)(lightestShade, 0.4);
+  }, ['colors.lightestShade']),
+  controlBorderDisabled: (0, _utils.computed)(function (_ref21) {
+    var _ref22 = _slicedToArray(_ref21, 1),
+      lightestShade = _ref22[0];
+    return (0, _manipulation.shade)(lightestShade, 0.4);
+  }, ['colors.lightestShade']),
+  controlBackgroundUnselected: (0, _utils.computed)(function (_ref23) {
+    var _ref24 = _slicedToArray(_ref23, 1),
+      emptyShade = _ref24[0];
+    return emptyShade;
+  }, ['colors.emptyShade']),
+  controlBackgroundDisabled: (0, _utils.computed)(function (_ref25) {
+    var _ref26 = _slicedToArray(_ref25, 1),
+      lightShade = _ref26[0];
+    return lightShade;
+  }, ['colors.lightShade']),
+  colorHasPlaceholder: (0, _utils.computed)(function (_ref27) {
+    var _ref28 = _slicedToArray(_ref27, 1),
+      subduedText = _ref28[0];
+    return (0, _manipulation.tint)(subduedText, 0.08);
+  }, ['colors.subduedText']),
+  colorDisabled: (0, _utils.computed)(function (_ref29) {
+    var _ref30 = _slicedToArray(_ref29, 1),
+      mediumShade = _ref30[0];
+    return mediumShade;
+  }, ['colors.mediumShade']),
+  iconDisabled: (0, _utils.computed)(function (_ref31) {
+    var _ref32 = _slicedToArray(_ref31, 1),
+      darkShade = _ref32[0];
+    return darkShade;
+  }, ['colors.darkShade'])
+};
+var _dark_forms = _objectSpread(_objectSpread({}, _forms), {}, {
+  background: (0, _utils.computed)(function (_ref33) {
+    var _ref34 = _slicedToArray(_ref33, 1),
+      lightestShade = _ref34[0];
+    return (0, _manipulation.shade)(lightestShade, 0.4);
+  }, ['colors.lightestShade']),
+  backgroundFocused: (0, _utils.computed)(function (_ref35) {
+    var _ref36 = _slicedToArray(_ref35, 1),
+      emptyShade = _ref36[0];
+    return (0, _manipulation.shade)(emptyShade, 0.4);
+  }, ['colors.emptyShade']),
+  backgroundAutofilled: (0, _utils.computed)(function (_ref37) {
+    var _ref38 = _slicedToArray(_ref37, 1),
+      primary = _ref38[0];
+    var background = (0, _manipulation.shade)(primary, 0.7);
+    return (0, _manipulation.shade)(background, 0.5);
+  }, ['colors.primary']),
+  prependBackground: (0, _utils.computed)(function (_ref39) {
+    var _ref40 = _slicedToArray(_ref39, 1),
+      lightShade = _ref40[0];
+    return (0, _manipulation.shade)(lightShade, 0.15);
+  }, ['colors.lightShade']),
+  border: (0, _utils.computed)(function (_ref41) {
+    var _ref42 = _slicedToArray(_ref41, 1),
+      ghost = _ref42[0];
+    return (0, _manipulation.transparentize)(ghost, 0.1);
+  }, ['colors.ghost']),
+  controlBorder: (0, _utils.computed)(function (_ref43) {
+    var _ref44 = _slicedToArray(_ref43, 1),
+      lightestShade = _ref44[0];
+    return (0, _manipulation.tint)(lightestShade, 0.31);
+  }, ['colors.lightestShade']),
+  controlBorderSelected: (0, _utils.computed)(function (_ref45) {
+    var _ref46 = _slicedToArray(_ref45, 1),
+      lightestShade = _ref46[0];
+    return (0, _manipulation.tint)(lightestShade, 0.31);
+  }, ['colors.lightestShade']),
+  controlBorderDisabled: (0, _utils.computed)(function (_ref47) {
+    var _ref48 = _slicedToArray(_ref47, 1),
+      lightestShade = _ref48[0];
+    return (0, _manipulation.tint)(lightestShade, 0.31);
+  }, ['colors.lightestShade'])
+});
+var forms = exports.forms = {
+  LIGHT: _forms,
+  DARK: _dark_forms
+};

package/lib/themes/amsterdam/theme.js

@@ -13,6 +13,7 @@ var _borders = require("./global_styling/variables/_borders");
 var _levels = require("./global_styling/variables/_levels");
 var _typography = require("./global_styling/variables/_typography");
 var _states = require("./global_styling/variables/_states");
+var _components = require("./global_styling/variables/_components");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -31,6 +32,11 @@ var euiThemeAmsterdam = exports.euiThemeAmsterdam = {
   animation: _animation.animation,
   breakpoint: _breakpoint.breakpoint,
   levels: _levels.levels,
-  focus: _states.focus
+  focus: _states.focus,
+  components: _components.components,
+  flags: {
+    hasGlobalFocusColor: false,
+    hasVisColorAdjustment: true
+  }
 };
 var EuiThemeAmsterdam = exports.EuiThemeAmsterdam = (0, _utils.buildTheme)(euiThemeAmsterdam, AMSTERDAM_NAME_KEY);

package/lib/themes/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 var _exportNames = {
   EUI_THEMES: true,
   isDefaultTheme: true,
+  isExperimentalThemeEnabled: true,
   AMSTERDAM_NAME_KEY: true,
   EuiThemeAmsterdam: true
 };
@@ -33,6 +34,12 @@ Object.defineProperty(exports, "isDefaultTheme", {
     return _themes.isDefaultTheme;
   }
 });
+Object.defineProperty(exports, "isExperimentalThemeEnabled", {
+  enumerable: true,
+  get: function get() {
+    return _themes.isExperimentalThemeEnabled;
+  }
+});
 var _themes = require("./themes");
 var _theme = require("./amsterdam/theme");
 var _amsterdam = require("./amsterdam");

package/lib/themes/themes.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isDefaultTheme = exports.EUI_THEMES = void 0;
+exports.isExperimentalThemeEnabled = exports.isDefaultTheme = exports.EUI_THEMES = exports.EUI_EXPERIMENTAL_THEME_ENABLED_KEY = void 0;
 var _theme = require("./amsterdam/theme");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -14,14 +14,17 @@ var _theme = require("./amsterdam/theme");
  */
 
 var EUI_THEMES = exports.EUI_THEMES = [{
-  text: 'Light',
-  value: 'light',
-  provider: _theme.EuiThemeAmsterdam
-}, {
-  text: 'Dark',
-  value: 'dark',
+  text: 'Amsterdam',
+  value: _theme.AMSTERDAM_NAME_KEY,
   provider: _theme.EuiThemeAmsterdam
 }];
 var isDefaultTheme = exports.isDefaultTheme = function isDefaultTheme(name) {
   return name === _theme.AMSTERDAM_NAME_KEY;
+};
+var EUI_EXPERIMENTAL_THEME_ENABLED_KEY = exports.EUI_EXPERIMENTAL_THEME_ENABLED_KEY = 'eui-experimental-theme-enabled';
+var isExperimentalThemeEnabled = exports.isExperimentalThemeEnabled = function isExperimentalThemeEnabled() {
+  if (typeof localStorage !== 'undefined') {
+    return localStorage.getItem(EUI_EXPERIMENTAL_THEME_ENABLED_KEY) === 'true';
+  }
+  return false;
 };

package/optimize/es/components/avatar/avatar.js

@@ -16,12 +16,11 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 
 import React, { useMemo } from 'react';
 import classNames from 'classnames';
-import { isColorDark, hexToRgb, isValidHex } from '../../services/color';
-import { euiPaletteColorBlindBehindText, toInitials, useEuiMemoizedStyles } from '../../services';
+import { isColorDark, hexToRgb, isValidHex, euiPaletteColorBlindBehindText } from '../../services/color';
+import { toInitials, useEuiMemoizedStyles, useEuiTheme } from '../../services';
 import { EuiIcon } from '../icon';
 import { euiAvatarStyles } from './avatar.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var visColors = euiPaletteColorBlindBehindText();
 export var SIZES = ['s', 'm', 'l', 'xl'];
 export var TYPES = ['space', 'user'];
 export var CASING = ['capitalize', 'uppercase', 'lowercase', 'none'];
@@ -53,6 +52,13 @@ export var EuiAvatar = function EuiAvatar(_ref) {
   var _props$casing = props.casing,
     casing = _props$casing === void 0 ? type === 'space' ? 'none' : 'uppercase' : _props$casing,
     rest = _objectWithoutProperties(props, _excluded2);
+  var _useEuiTheme = useEuiTheme(),
+    euiTheme = _useEuiTheme.euiTheme;
+  var visColors = useMemo(function () {
+    return euiPaletteColorBlindBehindText();
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [euiTheme]);
   var isPlain = color === 'plain';
   var isSubdued = color === 'subdued';
   var isNamedColor = isPlain || isSubdued || color === null;
@@ -74,7 +80,7 @@ export var EuiAvatar = function EuiAvatar(_ref) {
         color: textColor
       };
     }
-  }, [imageUrl, color, isNamedColor, name.length]);
+  }, [imageUrl, color, isNamedColor, name.length, visColors]);
   var iconCustomColor = useMemo(function () {
     // `null` allows icons to keep their default color (e.g. app icons)
     if (iconColor === null) return undefined;

package/optimize/es/components/badge/badge.js

@@ -23,7 +23,7 @@ import { getTextColor, getColorContrast, getIsValidColor } from './color_utils';
 import { euiBadgeStyles } from './badge.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var ICON_SIDES = ['left', 'right'];
-export var COLORS = ['default', 'hollow', 'primary', 'success', 'accent', 'warning', 'danger'];
+export var COLORS = ['default', 'hollow', 'primary', 'success', 'accent', 'accentSecondary', 'warning', 'danger'];
 export var EuiBadge = function EuiBadge(_ref) {
   var children = _ref.children,
     _ref$color = _ref.color,

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

@@ -9,7 +9,6 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css } from '@emotion/react';
 import { euiFontSize, euiFocusRing, euiTextTruncate, logicalCSS, logicalShorthandCSS, logicalTextAlignCSS, mathWithUnits } from '../../global_styling';
-import { transparentize } from '../../services';
 import { euiBadgeColors } from './color_utils';
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "1hw5vc4-clickable",
@@ -39,6 +38,7 @@ export var euiBadgeStyles = function euiBadgeStyles(euiThemeContext) {
     hollow: /*#__PURE__*/css(setBadgeColorVars(badgeColors.hollow), " border-color:", badgeColors.hollow.borderColor, ";;label:hollow;"),
     primary: /*#__PURE__*/css(setBadgeColorVars(badgeColors.primary), ";label:primary;"),
     accent: /*#__PURE__*/css(setBadgeColorVars(badgeColors.accent), ";label:accent;"),
+    accentSecondary: /*#__PURE__*/css(setBadgeColorVars(badgeColors.accentSecondary), ";label:accentSecondary;"),
     warning: /*#__PURE__*/css(setBadgeColorVars(badgeColors.warning), ";label:warning;"),
     danger: /*#__PURE__*/css(setBadgeColorVars(badgeColors.danger), ";label:danger;"),
     success: /*#__PURE__*/css(setBadgeColorVars(badgeColors.success), ";label:success;"),
@@ -62,7 +62,7 @@ export var euiBadgeStyles = function euiBadgeStyles(euiThemeContext) {
     },
     // Clickable icons (iconOnClick)
     iconButton: {
-      euiBadge__iconButton: /*#__PURE__*/css("font-size:0;&:focus{background-color:", transparentize(euiTheme.colors.ghost, 0.8), ";color:", euiTheme.colors.ink, ";border-radius:", mathWithUnits(euiTheme.border.radius.small, function (x) {
+      euiBadge__iconButton: /*#__PURE__*/css("font-size:0;&:focus{background-color:", euiTheme.components.badgeIconButtonBackgroundHover, ";color:", euiTheme.colors.ink, ";border-radius:", mathWithUnits(euiTheme.border.radius.small, function (x) {
         return x / 2;
       }), ";}&:disabled{cursor:not-allowed;}.euiBadge__icon{margin:0!important;};label:euiBadge__iconButton;"),
       right: /*#__PURE__*/css(logicalCSS('margin-left', euiTheme.size.xs), ";;label:right;"),

package/optimize/es/components/badge/beta_badge/beta_badge.js

@@ -17,7 +17,7 @@ import { EuiToolTip } from '../../tool_tip';
 import { EuiIcon } from '../../icon';
 import { euiBetaBadgeStyles } from './beta_badge.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var COLORS = ['accent', 'subdued', 'hollow'];
+export var COLORS = ['accent', 'accentSecondary', 'subdued', 'hollow'];
 export var SIZES = ['s', 'm'];
 export var ALIGNMENTS = ['baseline', 'middle'];
 

package/optimize/es/components/badge/beta_badge/beta_badge.styles.js

@@ -44,6 +44,7 @@ export var euiBetaBadgeStyles = function euiBetaBadgeStyles(euiThemeContext) {
     }), ";};label:euiBetaBadge;"),
     // Colors
     accent: /*#__PURE__*/css(badgeColors.accentText, ";label:accent;"),
+    accentSecondary: /*#__PURE__*/css(badgeColors.accentSecondaryText, ";label:accentSecondary;"),
     subdued: /*#__PURE__*/css(badgeColors.subdued, ";label:subdued;"),
     hollow: /*#__PURE__*/css("color:", badgeColors.hollow.color, ";background-color:", badgeColors.hollow.backgroundColor, ";box-shadow:inset 0 0 0 ", euiTheme.border.width.thin, " ", badgeColors.hollow.borderColor, ";;label:hollow;"),
     // Font sizes

package/optimize/es/components/badge/color_utils.js

@@ -11,12 +11,11 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  */
 
 import chroma from 'chroma-js';
-import { isColorDark, tint } from '../../services';
-import { euiButtonColor, euiButtonFillColor } from '../../themes/amsterdam/global_styling/mixins';
+import { isColorDark } from '../../services';
+import { euiButtonColor, euiButtonFillColor } from '../../global_styling/mixins/_button';
 import { chromaValid, parseColor } from '../color_picker/utils';
 export var euiBadgeColors = function euiBadgeColors(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme,
-    colorMode = euiThemeContext.colorMode;
+  var euiTheme = euiThemeContext.euiTheme;
   return {
     // Colors shared between buttons and badges
     primary: euiButtonFillColor(euiThemeContext, 'primary'),
@@ -24,16 +23,18 @@ export var euiBadgeColors = function euiBadgeColors(euiThemeContext) {
     warning: euiButtonFillColor(euiThemeContext, 'warning'),
     danger: euiButtonFillColor(euiThemeContext, 'danger'),
     accent: euiButtonFillColor(euiThemeContext, 'accent'),
+    accentSecondary: euiButtonFillColor(euiThemeContext, 'accentSecondary'),
     disabled: euiButtonColor(euiThemeContext, 'disabled'),
     // Colors unique to badges
     default: getBadgeColors(euiThemeContext, euiTheme.colors.lightShade),
     // Hollow has a border and is used for autocompleters and beta badges
     hollow: _objectSpread(_objectSpread({}, getBadgeColors(euiThemeContext, euiTheme.colors.emptyShade)), {}, {
-      borderColor: colorMode === 'DARK' ? tint(euiTheme.border.color, 0.15) : euiTheme.border.color
+      borderColor: euiTheme.components.badgeBorderColorHollow
     }),
     // Colors used by beta and notification badges
-    subdued: getBadgeColors(euiThemeContext, tint(euiTheme.colors.lightShade, 0.3)),
-    accentText: getBadgeColors(euiThemeContext, euiTheme.colors.accentText)
+    subdued: getBadgeColors(euiThemeContext, euiTheme.components.badgeBackgroundSubdued),
+    accentText: getBadgeColors(euiThemeContext, euiTheme.colors.textAccent),
+    accentSecondaryText: getBadgeColors(euiThemeContext, euiTheme.colors.textAccentSecondary)
   };
 };
 export var getBadgeColors = function getBadgeColors(euiThemeContext, backgroundColor) {

package/optimize/es/components/badge/notification_badge/badge_notification.js

@@ -14,7 +14,7 @@ import classNames from 'classnames';
 import { useEuiMemoizedStyles } from '../../../services';
 import { euiNotificationBadgeStyles } from './badge_notification.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var COLORS = ['accent', 'subdued', 'success'];
+export var COLORS = ['accent', 'accentSecondary', 'subdued', 'success'];
 export var SIZES = ['s', 'm'];
 export var EuiNotificationBadge = function EuiNotificationBadge(_ref) {
   var children = _ref.children,

package/optimize/es/components/badge/notification_badge/badge_notification.styles.js

@@ -23,6 +23,7 @@ export var euiNotificationBadgeStyles = function euiNotificationBadgeStyles(euiT
     })), " ", logicalCSS('min-width', euiTheme.size.l), ";;label:m;"),
     // Colors
     accent: /*#__PURE__*/css(badgeColors.accentText, ";label:accent;"),
+    accentSecondary: /*#__PURE__*/css(badgeColors.accentSecondaryText, ";label:accentSecondary;"),
     success: /*#__PURE__*/css(badgeColors.success, ";label:success;"),
     subdued: /*#__PURE__*/css(badgeColors.subdued, ";label:subdued;")
   };

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

@@ -10,7 +10,6 @@ var _templateObject;
 
 import { css, keyframes } from '@emotion/react';
 import { euiCanAnimate } from '../../global_styling';
-import { shade } from '../../services';
 import { euiShadowFlat } from '../../themes/amsterdam/global_styling/mixins';
 var euiBottomBarAppear = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    transform: translateY(100%);\n    opacity: 0;\n  }\n\n  100% {\n    transform: translateY(0%);\n    opacity: 1;\n  }\n"])));
 export var euiBottomBarStyles = function euiBottomBarStyles(euiThemeContext) {
@@ -18,7 +17,7 @@ export var euiBottomBarStyles = function euiBottomBarStyles(euiThemeContext) {
   return {
     // Base
     // `color` is inherited from the wrapping `EuiThemeProvider colorMode="dark"`
-    euiBottomBar: /*#__PURE__*/css(euiShadowFlat(euiThemeContext), " background:", shade(euiTheme.colors.lightestShade, 0.5), ";", euiCanAnimate, "{animation:", euiBottomBarAppear, " ", euiTheme.animation.slow, " ", euiTheme.animation.resistance, ";};label:euiBottomBar;"),
+    euiBottomBar: /*#__PURE__*/css(euiShadowFlat(euiThemeContext), " background:", euiTheme.components.bottomBarBackground, ";", euiCanAnimate, "{animation:", euiBottomBarAppear, " ", euiTheme.animation.slow, " ", euiTheme.animation.resistance, ";};label:euiBottomBar;"),
     static: /*#__PURE__*/css(";label:static;"),
     // Default
     fixed: /*#__PURE__*/css("position:fixed;z-index:", Number(euiTheme.levels.header) - 2, ";;label:fixed;"),

package/optimize/es/components/breadcrumbs/_breadcrumb_content.styles.js

@@ -7,16 +7,14 @@
  */
 
 import { css } from '@emotion/react';
-import { tintOrShade } from '../../services/color';
 import { euiFontSize, euiTextTruncate, euiFocusRing, logicalCSS, logicalBorderRadiusCSS, mathWithUnits } from '../../global_styling';
-import { euiButtonColor } from '../../themes/amsterdam/global_styling/mixins/button';
+import { euiButtonColor } from '../../global_styling/mixins/_button';
 
 /**
  * Styles cast to inner <a>, <button>, <span> elements
  */
 export var euiBreadcrumbContentStyles = function euiBreadcrumbContentStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme,
-    colorMode = euiThemeContext.colorMode;
+  var euiTheme = euiThemeContext.euiTheme;
 
   // Reuse button colors for `type="application`" clickable breadcrumbs
   var applicationButtonColors = euiButtonColor(euiThemeContext, 'primary');
@@ -24,8 +22,8 @@ export var euiBreadcrumbContentStyles = function euiBreadcrumbContentStyles(euiT
   // Create custom darker gray colors for non-clickable application breadcrumbs
   // The numbers/ratios are fairly specific here to pass WCAG AA contrast minimums
   var applicationTextColors = {
-    backgroundColor: tintOrShade(euiTheme.colors.darkestShade, colorMode === 'DARK' ? 0.7 : 0.85, colorMode),
-    color: tintOrShade(euiTheme.colors.darkestShade, 0.2, colorMode)
+    backgroundColor: euiTheme.components.breadcrumbsApplicationBackground,
+    color: euiTheme.components.breadcrumbsApplicationColor
   };
   return {
     euiBreadcrumb__content: /*#__PURE__*/css("font-weight:", euiTheme.font.weight.regular, ";text-align:center;vertical-align:baseline;&:not(.euiLink){color:", euiTheme.colors.subduedText, ";};label:euiBreadcrumb__content;"),

package/optimize/es/components/button/button.js

@@ -11,7 +11,7 @@ var _excluded = ["className", "buttonRef", "size", "color", "fill"];
 
 import React from 'react';
 import classNames from 'classnames';
-import { BUTTON_COLORS, useEuiButtonColorCSS, useEuiButtonFocusCSS } from '../../themes/amsterdam/global_styling/mixins/button';
+import { BUTTON_COLORS, useEuiButtonColorCSS, useEuiButtonFocusCSS } from '../../global_styling/mixins/_button';
 import { EuiButtonDisplay, isButtonDisabled } from './button_display/_button_display';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var COLORS = BUTTON_COLORS;

package/optimize/es/components/button/button_display/_button_display.styles.js

@@ -8,7 +8,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 import { css } from '@emotion/react';
 import { euiFontSize, logicalCSS, logicalShorthandCSS, logicalTextAlignCSS } from '../../../global_styling';
-import { euiButtonSizeMap } from '../../../themes/amsterdam/global_styling/mixins';
+import { euiButtonSizeMap } from '../../../global_styling/mixins';
 // Provides a solid reset and base for handling sizing layout
 // Does not include any visual styles
 export var euiButtonBaseCSS = function euiButtonBaseCSS() {

package/optimize/es/components/button/button_empty/button_empty.js

@@ -16,7 +16,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { useEuiMemoizedStyles, getSecureRelForTarget } from '../../../services';
 import { EuiButtonDisplayContent } from '../button_display/_button_display_content';
-import { useEuiButtonColorCSS } from '../../../themes/amsterdam/global_styling/mixins/button';
+import { useEuiButtonColorCSS } from '../../../global_styling/mixins/_button';
 import { isButtonDisabled } from '../button_display/_button_display';
 import { euiButtonEmptyStyles } from './button_empty.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";

package/optimize/es/components/button/button_group/button_group_button.js

@@ -16,7 +16,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import classNames from 'classnames';
 import React from 'react';
 import { useEuiMemoizedStyles } from '../../../services';
-import { useEuiButtonColorCSS } from '../../../themes/amsterdam/global_styling/mixins/button';
+import { useEuiButtonColorCSS } from '../../../global_styling/mixins/_button';
 import { useInnerText } from '../../inner_text';
 import { EuiButtonDisplay } from '../button_display/_button_display';
 import { euiButtonGroupButtonStyles, _compressedButtonFocusColors } from './button_group_button.styles';

package/optimize/es/components/button/button_group/button_group_button.styles.js

@@ -12,9 +12,9 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { makeDisabledContrastColor, transparentize } from '../../../services';
+import { makeDisabledContrastColor } from '../../../services';
 import { mathWithUnits, logicalCSS, logicalShorthandCSS, euiTextShift, euiOutline, euiCanAnimate } from '../../../global_styling';
-import { euiButtonFillColor, BUTTON_COLORS } from '../../../themes/amsterdam/global_styling/mixins/button';
+import { euiButtonFillColor, BUTTON_COLORS } from '../../../global_styling/mixins/_button';
 import { euiScreenReaderOnly } from '../../accessibility';
 import { euiFormVariables } from '../../form/form.styles';
 var _ref = process.env.NODE_ENV === "production" ? {
@@ -46,15 +46,15 @@ export var euiButtonGroupButtonStyles = function euiButtonGroupButtonStyles(euiT
   };
   return {
     // Base
-    euiButtonGroupButton: /*#__PURE__*/css(logicalCSS('min-width', 0), " flex-shrink:1;flex-grow:0;", euiCanAnimate, "{transition:background-color ", euiTheme.animation.normal, " ease-in-out,color ", euiTheme.animation.normal, " ease-in-out;};label:euiButtonGroupButton;"),
+    euiButtonGroupButton: /*#__PURE__*/css(logicalCSS('min-width', 0), " flex-shrink:1;flex-grow:0;z-index:0;&:focus-visible{z-index:1;}", euiCanAnimate, "{transition:background-color ", euiTheme.animation.normal, " ease-in-out,color ", euiTheme.animation.normal, " ease-in-out;};label:euiButtonGroupButton;"),
     iconOnly: /*#__PURE__*/css("padding-inline:", euiTheme.size.s, ";;label:iconOnly;"),
     // Sizes
     uncompressed: {
-      uncompressed: /*#__PURE__*/css("&:is(.euiButtonGroupButton-isSelected){font-weight:", euiTheme.font.weight.bold, ";}&:focus-visible{", euiOutline(euiThemeContext, 'inset', euiTheme.colors.fullShade), ";};label:uncompressed;"),
+      uncompressed: /*#__PURE__*/css("&:is(.euiButtonGroupButton-isSelected){font-weight:", euiTheme.font.weight.bold, ";}&:focus-visible{", euiOutline(euiThemeContext, 'inset', euiTheme.components.buttonGroupFocusColor), ";};label:uncompressed;"),
       get borders() {
         var selectors = '.euiButtonGroupButton-isSelected, .euiButtonGroup__tooltipWrapper-isSelected';
-        var selectedColor = transparentize(euiTheme.colors.emptyShade, 0.2);
-        var unselectedColor = transparentize(euiTheme.colors.fullShade, 0.1);
+        var selectedColor = euiTheme.components.buttonGroupBorderColorSelected;
+        var unselectedColor = euiTheme.components.buttonGroupBorderColor;
         var borderWidth = euiTheme.border.width.thin;
 
         // "Borders" between buttons should be present between two of the same colored buttons,

package/optimize/es/components/button/button_icon/button_icon.js

@@ -14,7 +14,7 @@ import classNames from 'classnames';
 import { getSecureRelForTarget, useEuiMemoizedStyles } from '../../../services';
 import { EuiIcon } from '../../icon';
 import { EuiLoadingSpinner } from '../../loading';
-import { useEuiButtonColorCSS, useEuiButtonFocusCSS } from '../../../themes/amsterdam/global_styling/mixins/button';
+import { useEuiButtonColorCSS, useEuiButtonFocusCSS } from '../../../global_styling/mixins/_button';
 import { isButtonDisabled } from '../button_display/_button_display';
 import { euiButtonIconStyles, _emptyHoverStyles } from './button_icon.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";

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

@@ -8,8 +8,8 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { euiPaddingSize, euiSupportsHas, logicalCSS, logicals, logicalTextAlignCSS } from '../../global_styling';
-import { euiButtonColor } from '../../themes/amsterdam/global_styling/mixins';
+import { euiPaddingSize, euiSupportsHas, logicalCSS, logicals, logicalTextAlignCSS, mathWithUnits } from '../../global_styling';
+import { euiButtonColor } from '../../global_styling/mixins';
 var paddingKey = 'm';
 var halfPaddingKey = 's';
 
@@ -61,6 +61,9 @@ var _ref6 = process.env.NODE_ENV === "production" ? {
 export var euiCardStyles = function euiCardStyles(euiThemeContext, paddingSize) {
   var euiTheme = euiThemeContext.euiTheme;
   var paddingAmount = euiPaddingSize(euiThemeContext, paddingSize);
+  var cardPaddingAmount = paddingAmount ? mathWithUnits([paddingAmount, euiTheme.border.width.thin], function (x, y) {
+    return x + y;
+  }) : '0';
   var spacing = euiPaddingSize(euiThemeContext, paddingKey);
   var halfSpacing = euiPaddingSize(euiThemeContext, halfPaddingKey);
   return {
@@ -99,7 +102,7 @@ export var euiCardStyles = function euiCardStyles(euiThemeContext, paddingSize)
       disabled: _ref2
     },
     image: {
-      euiCard__image: /*#__PURE__*/css("position:relative;overflow:hidden;", logicalCSS('width', "calc(100% + (".concat(paddingAmount, " * 2))")), " ", logicalCSS('left', "-".concat(paddingAmount)), " ", logicalCSS('top', "-".concat(paddingAmount)), logicalCSS('margin-bottom', "-".concat(paddingAmount)), logicalCSS('border-top-left-radius', "calc(".concat(euiTheme.border.radius.medium, " - ").concat(euiTheme.border.width.thin, ")")), " ", logicals['border-top-right-radius'], ":calc(", euiTheme.border.radius.medium, " - ", euiTheme.border.width.thin, ");img{", logicalCSS('width', '100%'), ";};label:euiCard__image;"),
+      euiCard__image: /*#__PURE__*/css("position:relative;overflow:hidden;", logicalCSS('width', "calc(100% + (".concat(cardPaddingAmount, " * 2))")), " ", logicalCSS('left', "-".concat(cardPaddingAmount)), " ", logicalCSS('top', "-".concat(cardPaddingAmount)), logicalCSS('margin-bottom', "-".concat(paddingAmount)), logicalCSS('border-top-left-radius', "calc(".concat(euiTheme.border.radius.medium, " - ").concat(euiTheme.border.width.thin, ")")), " ", logicals['border-top-right-radius'], ":calc(", euiTheme.border.radius.medium, " - ", euiTheme.border.width.thin, ");img{", logicalCSS('width', '100%'), ";};label:euiCard__image;"),
       transparent: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.medium, ";;label:transparent;")
     },
     icon: {

package/optimize/es/components/code/code_block_annotations.js

@@ -12,7 +12,7 @@ var _excluded = ["lineNumber", "children"];
 
 import React, { useState } from 'react';
 import { useEuiTheme, useEuiMemoizedStyles } from '../../services';
-import { useEuiButtonFocusCSS } from '../../themes/amsterdam/global_styling/mixins/button';
+import { useEuiButtonFocusCSS } from '../../global_styling/mixins/_button';
 import { useEuiI18n } from '../i18n';
 import { EuiPopover } from '../popover';
 import { EuiIcon } from '../icon';

package/optimize/es/components/code/code_block_line.styles.js

@@ -15,7 +15,6 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/css';
-import { euiBackgroundColor } from '../../global_styling';
 // Note: These styles must be in a separate file due to using `css` from `@emotion/css`
 // (i.e., applying styles in vanilla JS / directly to DOM nodes instead of React)
 
@@ -40,7 +39,7 @@ export var euiCodeBlockLineStyles = function euiCodeBlockLineStyles(euiThemeCont
     }),
     lineText: {
       euiCodeBlock__lineText: /*#__PURE__*/css("flex-grow:1;display:inline-block;padding-inline-start:", euiTheme.size.m, ";border-inline-start:", euiTheme.border.thin, ";user-select:text;;label:euiCodeBlock__lineText;"),
-      isHighlighted: /*#__PURE__*/css("background:", euiBackgroundColor(euiThemeContext, 'primary'), ";border-inline-start:", euiTheme.border.width.thick, " solid ", euiTheme.colors.primary, ";;label:isHighlighted;")
+      isHighlighted: /*#__PURE__*/css("background:", euiTheme.colors.backgroundBasePrimary, ";border-inline-start:", euiTheme.border.width.thick, " solid ", euiTheme.colors.primary, ";;label:isHighlighted;")
     },
     lineNumber: {
       euiCodeBlock__lineNumberWrapper: /*#__PURE__*/css("position:relative;flex-grow:0;flex-shrink:0;user-select:none;padding-inline-end:", euiTheme.size.m, ";box-sizing:content-box;;label:euiCodeBlock__lineNumberWrapper;"),