@elastic/eui 98.2.0 → 98.2.1-borealis.1

package/src/themes/amsterdam/_colors_dark.scss

@@ -1,22 +1,24 @@
 // stylelint-disable color-no-hex
 
 // This extra import allows any variables that are created via functions to work when loaded into JS
-@import '../../global_styling/functions/index';
+@import 'node_modules/@elastic/eui-theme-common/src/global_styling/functions/index';
 
-// These colors stay the same no matter the theme
+// Constants
 $euiColorGhost: #FFF !default;
 $euiColorInk: #000 !default;
 
-// Core
+$euiColorPlainLight: $euiColorGhost;
+$euiColorPlainDark: $euiColorInk;
+
+// Brand
 $euiColorPrimary: #36A2EF !default;
 $euiColorAccent: #F68FBE !default;
-
-// Status
+$euiColorAccentSecondary: #7DDED8 !default;
 $euiColorSuccess: #7DDED8 !default;
 $euiColorWarning: #F3D371 !default;
 $euiColorDanger: #F86B63 !default;
 
-// Grays
+// Shades
 $euiColorEmptyShade: #1D1E24 !default;
 $euiColorLightestShade: #25262E !default;
 $euiColorLightShade: #343741 !default;
@@ -29,21 +31,91 @@ $euiColorFullShade: #FFF !default;
 $euiPageBackgroundColor: shade($euiColorLightestShade, 45%) !default;
 $euiColorHighlight: #2E2D25 !default;
 
-// Variations from core
+$euiColorBackgroundBasePrimary: shade($euiColorPrimary, 80%) !default;
+$euiColorBackgroundBaseAccent: shade($euiColorAccent, 80%) !default;
+$euiColorBackgroundBaseAccentSecondary: shade($euiColorAccentSecondary, 80%) !default;
+$euiColorBackgroundBaseSuccess: shade($euiColorSuccess, 80%) !default;
+$euiColorBackgroundBaseWarning: shade($euiColorWarning, 80%) !default;
+$euiColorBackgroundBaseDanger: shade($euiColorDanger, 80%) !default;
+$euiColorBackgroundBaseSubdued: shade($euiPageBackgroundColor, 80%) !default;
+$euiColorBackgroundBaseDisabled: transparentize($euiColorLightShade, 0.15)!default;
+$euiColorBackgroundBasePlain: $euiColorEmptyShade !default;
+$euiColorBackgroundBaseFormsPrepend: shade($euiColorLightShade, 0.15) !default;
+$euiColorBackgroundBaseFormsControlDisabled: $euiColorLightShade !default;
+
+$euiColorBackgroundBaseInteractiveHover: transparentize($euiColorLightShade, 0.2) !default;
+$euiColorBackgroundBaseInteractiveSelect: shade($euiColorPrimary, 0.7) !default;
+$euiColorBackgroundBaseInteractiveOverlay: transparentize($euiColorInk, 0.5) !default;
+$euiColorBackgroundBaseSkeletonEdge: shade($euiColorLightShade, 0.12) !default;
+$euiColorBackgroundBaseSkeletonMiddle: shade($euiColorLightShade, 0.24) !default;
+
+$euiColorBackgroundLightPrimary: shade($euiColorPrimary, 0.7) !default;
+$euiColorBackgroundLightAccent: shade($euiColorAccent, 0.7) !default;
+$euiColorBackgroundLightAccentSecondary: shade($euiColorAccentSecondary, 0.7)  !default;
+$euiColorBackgroundLightSuccess: shade($euiColorSuccess, 0.7)  !default;
+$euiColorBackgroundLightWarning: shade($euiColorWarning, 0.7)  !default;
+$euiColorBackgroundLightDanger: shade($euiColorDanger, 0.7)  !default;
+$euiColorBackgroundLightText: shade($euiColorLightShade, 0.2) !default;
+
+$euiColorBackgroundFilledPrimary: $euiColorPrimary !default;
+$euiColorBackgroundFilledAccent: $euiColorAccent !default;
+$euiColorBackgroundFilledAccentSecondary: $euiColorAccentSecondary !default;
+$euiColorBackgroundFilledSuccess: $euiColorSuccess !default;
+$euiColorBackgroundFilledWarning: $euiColorWarning !default;
+$euiColorBackgroundFilledDanger: $euiColorDanger !default;
+$euiColorBackgroundFilledText:  #DFE5EF !default;
+
+// Texts
 $euiTextColor: #DFE5EF !default;
 $euiTitleColor: $euiTextColor !default;
 $euiTextSubduedColor: makeHighContrastColor($euiColorMediumShade) !default;
 $euiColorDisabled: #515761 !default;
 
-// Contrasty text variants
+$euiColorTextParagraph: $euiTextColor !default;
+$euiColorTextHeading: $euiTitleColor !default;
+$euiColorTextSubdued: $euiTextSubduedColor !default;
+$euiColorTextDisabled: #515761 !default;
+$euiColorTextInverse: $euiColorGhost !default;
+
+// Brand texts
 $euiColorPrimaryText: makeHighContrastColor($euiColorPrimary) !default;
 $euiColorSuccessText: makeHighContrastColor($euiColorSuccess) !default;
 $euiColorAccentText: makeHighContrastColor($euiColorAccent) !default;
 $euiColorWarningText: makeHighContrastColor($euiColorWarning) !default;
 $euiColorDangerText: makeHighContrastColor($euiColorDanger) !default;
 $euiColorDisabledText: makeDisabledContrastColor($euiColorDisabled) !default;
+
+$euiColorTextPrimary: $euiColorPrimaryText !default;
+$euiColorTextAccent: $euiColorAccentText !default;
+$euiColorTextAccentSecondary: $euiColorSuccessText !default;
+$euiColorTextSuccess: $euiColorSuccessText !default;
+$euiColorTextWarning: $euiColorWarningText !default;
+$euiColorTextDanger: $euiColorDangerText !default;
+
 $euiLinkColor: $euiColorPrimaryText !default;
 
+// Borders
+$euiColorBorderBasePrimary: shade($euiColorPrimary, 0.6);
+$euiColorBorderBaseAccent: shade($euiColorAccent, 0.6);
+$euiColorBorderBaseAccentSecondary: shade($euiColorAccentSecondary, 0.6);
+$euiColorBorderBaseSuccess: shade($euiColorSuccess, 0.6);
+$euiColorBorderBaseWarning: shade($euiColorWarning, 0.6);
+$euiColorBorderBaseDanger: shade($euiColorDanger, 0.6);
+
+$euiColorBorderBasePlain: $euiColorLightShade;
+$euiColorBorderBaseSubdued: $euiColorLightShade;
+$euiColorBorderBaseDisabled: transparentize($euiColorGhost, 0.1);
+$euiColorBorderBaseFloating: $euiColorLightShade;
+$euiColorBorderBaseFormsColorSwatch: transparentize($euiColorFullShade, 0.1);
+$euiColorBorderBaseFormsControl: tint($euiColorLightestShade, 0.31);
+
+$euiColorBorderStrongPrimary: $euiColorBorderBasePrimary;
+$euiColorBorderStrongAccent: $euiColorBorderBaseAccent;
+$euiColorBorderStrongAccentSecondary: $euiColorBorderBaseAccentSecondary;
+$euiColorBorderStrongSuccess: $euiColorBorderBaseSuccess;
+$euiColorBorderStrongWarning: $euiColorBorderBaseWarning;
+$euiColorBorderStrongDanger: $euiColorBorderBaseDanger;
+
 // Charts
 $euiColorChartLines: $euiColorLightShade !default;
 $euiColorChartBand: tint($euiColorLightestShade, 2.5%) !default;

package/src/themes/amsterdam/_colors_light.scss

@@ -1,22 +1,24 @@
 // stylelint-disable color-no-hex
 
 // This extra import allows any variables that are created via functions to work when loaded into JS
-@import '../../global_styling/functions/index';
+@import 'node_modules/@elastic/eui-theme-common/src/global_styling/functions/index';
 
-// These colors stay the same no matter the theme
+// Constants
 $euiColorGhost: #FFF !default;
 $euiColorInk: #000 !default;
 
-// Core
+$euiColorPlainLight: $euiColorGhost;
+$euiColorPlainDark: $euiColorInk;
+
+// Brand
 $euiColorPrimary: #07C !default;
 $euiColorAccent: #F04E98 !default;
-
-// Status
+$euiColorAccentSecondary: #00BFB3 !default;
 $euiColorSuccess: #00BFB3 !default;
 $euiColorWarning: #FEC514 !default;
 $euiColorDanger: #BD271E !default;
 
-// Grays
+// Shades
 $euiColorEmptyShade: #FFF !default;
 $euiColorLightestShade: #F5F7FA !default;
 $euiColorLightShade: #D3DAE6 !default;
@@ -29,21 +31,91 @@ $euiColorFullShade: #000 !default;
 $euiPageBackgroundColor: tint($euiColorLightestShade, 50%) !default;
 $euiColorHighlight: tint($euiColorWarning, 90%) !default;
 
-// Every color below must be based mathematically on the set above and in a particular order.
+$euiColorBackgroundBasePrimary: tint($euiColorPrimary, 90%) !default;
+$euiColorBackgroundBaseAccent: tint($euiColorAccent, 90%) !default;
+$euiColorBackgroundBaseAccentSecondary: tint($euiColorAccentSecondary, 90%) !default;
+$euiColorBackgroundBaseSuccess: tint($euiColorSuccess, 90%) !default;
+$euiColorBackgroundBaseWarning: tint($euiColorWarning, 90%) !default;
+$euiColorBackgroundBaseDanger: tint($euiColorDanger, 90%) !default;
+$euiColorBackgroundBaseSubdued: $euiPageBackgroundColor !default;
+$euiColorBackgroundBaseDisabled: transparentize($euiColorLightShade, 0.15) !default;
+$euiColorBackgroundBasePlain: $euiColorEmptyShade !default;
+$euiColorBackgroundBaseFormsPrepend: tint($euiColorLightShade, 0.5) !default;
+$euiColorBackgroundBaseFormsControlDisabled: $euiColorLightShade !default;
+
+$euiColorBackgroundBaseInteractiveHover: transparentize($euiColorLightShade, 0.2) !default;
+$euiColorBackgroundBaseInteractiveSelect: tint($euiColorPrimary, 0.96) !default;
+$euiColorBackgroundBaseInteractiveOverlay: transparentize($euiColorInk, 0.5) !default;
+$euiColorBackgroundBaseSkeletonEdge: tint($euiColorLightShade, 0.65) !default;
+$euiColorBackgroundBaseSkeletonMiddle: tint($euiColorLightShade, 0.8) !default;
+
+$euiColorBackgroundLightPrimary: tint($euiColorPrimary, 0.8) !default;
+$euiColorBackgroundLightAccent: tint($euiColorAccent, 0.8) !default;
+$euiColorBackgroundLightAccentSecondary: tint($euiColorAccentSecondary, 0.8)  !default;
+$euiColorBackgroundLightSuccess: tint($euiColorSuccess, 0.8)  !default;
+$euiColorBackgroundLightWarning: tint($euiColorWarning, 0.8)  !default;
+$euiColorBackgroundLightDanger: tint($euiColorDanger, 0.8)  !default;
+$euiColorBackgroundLightText: tint($euiColorLightShade, 0.5) !default;
+
+$euiColorBackgroundFilledPrimary: $euiColorPrimary !default;
+$euiColorBackgroundFilledAccent: tint($euiColorAccent, 0.3) !default;
+$euiColorBackgroundFilledAccentSecondary: tint($euiColorAccentSecondary, 0.3) !default;
+$euiColorBackgroundFilledSuccess: tint($euiColorSuccess, 0.3) !default;
+$euiColorBackgroundFilledWarning: $euiColorWarning !default;
+$euiColorBackgroundFilledDanger: $euiColorDanger !default;
+$euiColorBackgroundFilledText: $euiColorDarkShade !default;
+
+// Texts
 $euiTextColor: $euiColorDarkestShade !default;
 $euiTitleColor: shade($euiTextColor, 50%) !default;
 $euiTextSubduedColor: $euiColorDarkShade !default;
 $euiColorDisabled: #ABB4C4 !default;
 
-// Contrasty text variants
+$euiColorTextParagraph: $euiTextColor !default;
+$euiColorTextHeading: $euiTitleColor !default;
+$euiColorTextSubdued: $euiTextSubduedColor !default;
+$euiColorTextDisabled: #A2ABBA !default;
+$euiColorTextInverse: $euiColorGhost !default;
+
+// Brand texts
 $euiColorPrimaryText: makeHighContrastColor($euiColorPrimary) !default;
 $euiColorSuccessText: makeHighContrastColor($euiColorSuccess) !default;
 $euiColorAccentText: makeHighContrastColor($euiColorAccent) !default;
 $euiColorWarningText: makeHighContrastColor($euiColorWarning) !default;
 $euiColorDangerText: makeHighContrastColor($euiColorDanger) !default;
 $euiColorDisabledText: makeDisabledContrastColor($euiColorDisabled) !default;
+
+$euiColorTextPrimary: $euiColorPrimaryText !default;
+$euiColorTextAccent: $euiColorAccentText !default;
+$euiColorTextAccentSecondary: $euiColorSuccessText !default;
+$euiColorTextSuccess: $euiColorSuccessText !default;
+$euiColorTextWarning: $euiColorWarningText !default;
+$euiColorTextDanger: $euiColorDangerText !default;
+
 $euiLinkColor: $euiColorPrimaryText !default;
 
+// Borders
+$euiColorBorderBasePrimary: tint($euiColorPrimary, 0.6);
+$euiColorBorderBaseAccent: tint($euiColorAccent, 0.6);
+$euiColorBorderBaseAccentSecondary: tint($euiColorAccentSecondary, 0.6);
+$euiColorBorderBaseSuccess: tint($euiColorSuccess, 0.6);
+$euiColorBorderBaseWarning: tint($euiColorWarning, 0.6);
+$euiColorBorderBaseDanger: tint($euiColorDanger, 0.6);
+
+$euiColorBorderBasePlain: $euiColorLightShade;
+$euiColorBorderBaseSubdued: $euiColorLightShade;
+$euiColorBorderBaseDisabled: transparentize(darken($euiColorLightShade, 40%), 0.1);
+$euiColorBorderBaseFloating: 'transparent';
+$euiColorBorderBaseFormsColorSwatch: transparentize($euiColorFullShade, 0.1);
+$euiColorBorderBaseFormsControl: shade($euiColorLightestShade, 0.4);
+
+$euiColorBorderStrongPrimary: $euiColorBorderBasePrimary;
+$euiColorBorderStrongAccent: $euiColorBorderBaseAccent;
+$euiColorBorderStrongAccentSecondary: $euiColorBorderBaseAccentSecondary;
+$euiColorBorderStrongSuccess: $euiColorBorderBaseSuccess;
+$euiColorBorderStrongWarning: $euiColorBorderBaseWarning;
+$euiColorBorderStrongDanger: $euiColorBorderBaseDanger;
+
 // Charts
 $euiColorChartLines: shade($euiColorLightestShade, 3%) !default;
 $euiColorChartBand: $euiColorLightestShade !default;

package/src/themes/amsterdam/global_styling/variables/_colors_vis.scss

@@ -0,0 +1,72 @@
+// Visualization colors
+// stylelint-disable color-no-hex
+
+// 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
+$euiPaletteColorBlind: (
+  euiColorVis0: (
+    graphic: #54B399,
+    behindText: #6DCCB1,
+  ),
+  euiColorVis1: (
+    graphic: #6092C0,
+    behindText: #79AAD9,
+  ),
+  euiColorVis2: (
+    graphic: #D36086,
+    behindText: #EE789D,
+  ),
+  euiColorVis3: (
+    graphic: #9170B8,
+    behindText: #A987D1,
+  ),
+  euiColorVis4: (
+    graphic: #CA8EAE,
+    behindText: #E4A6C7,
+  ),
+  euiColorVis5: (
+    graphic: #D6BF57,
+    behindText: #F1D86F,
+  ),
+  euiColorVis6: (
+    graphic: #B9A888,
+    behindText: #D2C0A0,
+  ),
+  euiColorVis7: (
+    graphic: #DA8B45,
+    behindText: #F5A35C,
+  ),
+  euiColorVis8: (
+    graphic: #AA6556,
+    behindText: #C47C6C,
+  ),
+  euiColorVis9: (
+    graphic: #E7664C,
+    behindText: #FF7E62,
+  )
+) !default;
+
+$euiPaletteColorBlindKeys: map-keys($euiPaletteColorBlind);
+
+$euiColorVis0: map-get(map-get($euiPaletteColorBlind, 'euiColorVis0'), 'graphic') !default;
+$euiColorVis1: map-get(map-get($euiPaletteColorBlind, 'euiColorVis1'), 'graphic') !default;
+$euiColorVis2: map-get(map-get($euiPaletteColorBlind, 'euiColorVis2'), 'graphic') !default;
+$euiColorVis3: map-get(map-get($euiPaletteColorBlind, 'euiColorVis3'), 'graphic') !default;
+$euiColorVis4: map-get(map-get($euiPaletteColorBlind, 'euiColorVis4'), 'graphic') !default;
+$euiColorVis5: map-get(map-get($euiPaletteColorBlind, 'euiColorVis5'), 'graphic') !default;
+$euiColorVis6: map-get(map-get($euiPaletteColorBlind, 'euiColorVis6'), 'graphic') !default;
+$euiColorVis7: map-get(map-get($euiPaletteColorBlind, 'euiColorVis7'), 'graphic') !default;
+$euiColorVis8: map-get(map-get($euiPaletteColorBlind, 'euiColorVis8'), 'graphic') !default;
+$euiColorVis9: map-get(map-get($euiPaletteColorBlind, 'euiColorVis9'), 'graphic') !default;
+
+$euiColorVis0_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis0'), 'behindText') !default;
+$euiColorVis1_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis1'), 'behindText') !default;
+$euiColorVis2_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis2'), 'behindText') !default;
+$euiColorVis3_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis3'), 'behindText') !default;
+$euiColorVis4_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis4'), 'behindText') !default;
+$euiColorVis5_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis5'), 'behindText') !default;
+$euiColorVis6_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis6'), 'behindText') !default;
+$euiColorVis7_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis7'), 'behindText') !default;
+$euiColorVis8_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis8'), 'behindText') !default;
+$euiColorVis9_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis9'), 'behindText') !default;

package/src/themes/amsterdam/global_styling/variables/_forms.scss

@@ -0,0 +1,12 @@
+// Coloring
+$euiFormBackgroundColor: tintOrShade($euiColorLightestShade, 60%, 40%) !default;
+$euiFormBackgroundDisabledColor: darken($euiColorLightestShade, 2%) !default;
+$euiFormBackgroundReadOnlyColor: $euiColorEmptyShade !default;
+$euiFormBorderOpaqueColor: shadeOrTint(desaturate(adjust-hue($euiColorPrimary, 22), 22.95), 26%, 100%) !default;
+$euiFormBorderColor: transparentize($euiFormBorderOpaqueColor, .9) !default;
+$euiFormBorderDisabledColor: transparentize($euiFormBorderOpaqueColor, .9) !default;
+$euiFormControlDisabledColor: $euiColorMediumShade !default;
+$euiFormControlBoxShadow: 0 0 transparent !default;
+$euiFormControlPlaceholderText: makeHighContrastColor($euiTextSubduedColor, $euiFormBackgroundColor) !default;
+$euiFormInputGroupLabelBackground: tintOrShade($euiColorLightShade, 50%, 15%) !default;
+$euiFormInputGroupBorder: none !default;

package/src/themes/amsterdam/global_styling/variables/_index.scss

@@ -2,4 +2,6 @@
 @import '../../../../global_styling/variables/index';
 @import 'states';
 
+@import 'colors_vis';
 @import 'typography';
+@import 'forms';

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

@@ -31,7 +31,6 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var visColors = (0, _services.euiPaletteColorBlindBehindText)();
 var SIZES = exports.SIZES = ['s', 'm', 'l', 'xl'];
 var TYPES = exports.TYPES = ['space', 'user'];
 var CASING = exports.CASING = ['capitalize', 'uppercase', 'lowercase', 'none'];
@@ -63,6 +62,13 @@ var EuiAvatar = exports.EuiAvatar = function EuiAvatar(_ref) {
   var _props$casing = props.casing,
     casing = _props$casing === void 0 ? type === 'space' ? 'none' : 'uppercase' : _props$casing,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded2);
+  var _useEuiTheme = (0, _services.useEuiTheme)(),
+    euiTheme = _useEuiTheme.euiTheme;
+  var visColors = (0, _react.useMemo)(function () {
+    return (0, _color.euiPaletteColorBlindBehindText)();
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [euiTheme]);
   var isPlain = color === 'plain';
   var isSubdued = color === 'subdued';
   var isNamedColor = isPlain || isSubdued || color === null;
@@ -84,7 +90,7 @@ var EuiAvatar = exports.EuiAvatar = function EuiAvatar(_ref) {
         color: textColor
       };
     }
-  }, [imageUrl, color, isNamedColor, name.length]);
+  }, [imageUrl, color, isNamedColor, name.length, visColors]);
   var iconCustomColor = (0, _react.useMemo)(function () {
     // `null` allows icons to keep their default color (e.g. app icons)
     if (iconColor === null) return undefined;

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiBadgeStyles = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
-var _services = require("../../services");
 var _color_utils = require("./color_utils");
 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
@@ -66,7 +65,7 @@ var euiBadgeStyles = exports.euiBadgeStyles = function euiBadgeStyles(euiThemeCo
     },
     // Clickable icons (iconOnClick)
     iconButton: {
-      euiBadge__iconButton: /*#__PURE__*/(0, _react.css)("font-size:0;&:focus{background-color:", (0, _services.transparentize)(euiTheme.colors.ghost, 0.8), ";color:", euiTheme.colors.ink, ";border-radius:", (0, _global_styling.mathWithUnits)(euiTheme.border.radius.small, function (x) {
+      euiBadge__iconButton: /*#__PURE__*/(0, _react.css)("font-size:0;&:focus{background-color:", euiTheme.components.badgeIconButtonBackgroundHover, ";color:", euiTheme.colors.ink, ";border-radius:", (0, _global_styling.mathWithUnits)(euiTheme.border.radius.small, function (x) {
         return x / 2;
       }), ";}&:disabled{cursor:not-allowed;}.euiBadge__icon{margin:0!important;};label:euiBadge__iconButton;"),
       right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-left', euiTheme.size.xs), ";;label:right;"),

package/test-env/components/badge/beta_badge/beta_badge.styles.js

@@ -39,15 +39,17 @@ var _ref3 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 var euiBetaBadgeStyles = exports.euiBetaBadgeStyles = function euiBetaBadgeStyles(euiThemeContext) {
+  var _euiTheme$flags;
   var euiTheme = euiThemeContext.euiTheme,
     colorMode = euiThemeContext.colorMode;
   var badgeColors = (0, _color_utils.euiBadgeColors)(euiThemeContext);
+  var hasVisColorAdjustment = (_euiTheme$flags = euiTheme.flags) === null || _euiTheme$flags === void 0 ? void 0 : _euiTheme$flags.hasVisColorAdjustment;
   return {
     euiBetaBadge: /*#__PURE__*/(0, _react.css)("display:inline-block;border-radius:", euiTheme.size.l, ";cursor:default;font-weight:", euiTheme.font.weight.bold, ";text-transform:uppercase;letter-spacing:0.05em;text-align:center;", (0, _global_styling.euiTextTruncate)(), " &:focus{", (0, _global_styling.euiFocusRing)(euiThemeContext, 'outset', {
       color: colorMode === 'DARK' ? euiTheme.colors.ghost : euiTheme.colors.ink
     }), ";};label:euiBetaBadge;"),
     // Colors
-    accent: /*#__PURE__*/(0, _react.css)(badgeColors.accentText, ";label:accent;"),
+    accent: hasVisColorAdjustment ? /*#__PURE__*/(0, _react.css)(badgeColors.accentText, ";label:accent;") : /*#__PURE__*/(0, _react.css)(badgeColors.accent, ";label:accent;"),
     subdued: /*#__PURE__*/(0, _react.css)(badgeColors.subdued, ";label:subdued;"),
     hollow: /*#__PURE__*/(0, _react.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;"),
     warning: /*#__PURE__*/(0, _react.css)(badgeColors.warning, ";label:warning;"),

package/test-env/components/badge/color_utils.js

@@ -9,7 +9,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _chromaJs = _interopRequireDefault(require("chroma-js"));
 var _services = require("../../services");
-var _mixins = require("../../themes/amsterdam/global_styling/mixins");
+var _button = require("../../global_styling/mixins/_button");
 var _utils = require("../color_picker/utils");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /*
@@ -20,25 +20,26 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * Side Public License, v 1.
  */
 var euiBadgeColors = exports.euiBadgeColors = function euiBadgeColors(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme,
-    colorMode = euiThemeContext.colorMode;
+  var euiTheme = euiThemeContext.euiTheme;
   return {
     // Colors shared between buttons and badges
-    primary: (0, _mixins.euiButtonFillColor)(euiThemeContext, 'primary'),
-    success: (0, _mixins.euiButtonFillColor)(euiThemeContext, 'success'),
-    warning: (0, _mixins.euiButtonFillColor)(euiThemeContext, 'warning'),
-    danger: (0, _mixins.euiButtonFillColor)(euiThemeContext, 'danger'),
-    accent: (0, _mixins.euiButtonFillColor)(euiThemeContext, 'accent'),
-    disabled: (0, _mixins.euiButtonColor)(euiThemeContext, 'disabled'),
+    primary: (0, _button.euiButtonFillColor)(euiThemeContext, 'primary'),
+    success: (0, _button.euiButtonFillColor)(euiThemeContext, 'success'),
+    warning: (0, _button.euiButtonFillColor)(euiThemeContext, 'warning'),
+    danger: (0, _button.euiButtonFillColor)(euiThemeContext, 'danger'),
+    accent: (0, _button.euiButtonFillColor)(euiThemeContext, 'accent'),
+    accentSecondary: (0, _button.euiButtonFillColor)(euiThemeContext, 'accentSecondary'),
+    disabled: (0, _button.euiButtonColor)(euiThemeContext, 'disabled'),
     // Colors unique to badges
-    default: getBadgeColors(euiThemeContext, euiTheme.colors.lightShade),
+    default: getBadgeColors(euiThemeContext, euiTheme.components.badgeBackground),
     // Hollow has a border and is used for autocompleters and beta badges
     hollow: _objectSpread(_objectSpread({}, getBadgeColors(euiThemeContext, euiTheme.colors.emptyShade)), {}, {
-      borderColor: colorMode === 'DARK' ? (0, _services.tint)(euiTheme.border.color, 0.15) : euiTheme.border.color
+      borderColor: euiTheme.components.badgeBorderColorHollow
     }),
     // Colors used by beta and notification badges
-    subdued: getBadgeColors(euiThemeContext, (0, _services.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)
   };
 };
 var getBadgeColors = exports.getBadgeColors = function getBadgeColors(euiThemeContext, backgroundColor) {

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

@@ -26,9 +26,9 @@ var euiBeaconStyles = exports.euiBeaconStyles = function euiBeaconStyles(_ref) {
   return {
     // Base
     euiBeacon: /*#__PURE__*/(0, _react.css)("position:relative;border-radius:50%;&::before,&::after{position:absolute;content:'';", (0, _global_styling.logicalSizeCSS)('100%', '100%'), " ", (0, _global_styling.logicalCSS)('left', 0), " ", (0, _global_styling.logicalCSS)('top', 0), " background-color:transparent;border-radius:50%;}&::before{transform:scale(1.6);opacity:0.4;}&::after{opacity:0;}", _global_styling.euiCanAnimate, "{&::before{animation:", euiBeaconPulseLarge, " 2.5s infinite ease-out;}&::after{animation:", euiBeaconPulseSmall, " 2.5s infinite ease-out 0.25s;}};label:euiBeacon;"),
-    subdued: /*#__PURE__*/(0, _react.css)(_colorCSS(euiTheme.colors.subduedText), ";label:subdued;"),
+    subdued: /*#__PURE__*/(0, _react.css)(_colorCSS(euiTheme.colors.textSubdued), ";label:subdued;"),
     primary: /*#__PURE__*/(0, _react.css)(_colorCSS(euiTheme.colors.primary), ";label:primary;"),
-    success: /*#__PURE__*/(0, _react.css)(_colorCSS(euiTheme.colors.success), ";label:success;"),
+    success: /*#__PURE__*/(0, _react.css)(_colorCSS(euiTheme.colors.accentSecondary), ";label:success;"),
     warning: /*#__PURE__*/(0, _react.css)(_colorCSS(euiTheme.colors.warning), ";label:warning;"),
     danger: /*#__PURE__*/(0, _react.css)(_colorCSS(euiTheme.colors.danger), ";label:danger;"),
     accent: /*#__PURE__*/(0, _react.css)(_colorCSS(euiTheme.colors.accent), ";label:accent;")

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

@@ -8,7 +8,6 @@ exports.euiBottomBarStyles = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
-var _services = require("../../services");
 var _mixins = require("../../themes/amsterdam/global_styling/mixins");
 var _templateObject;
 /*
@@ -24,7 +23,7 @@ var euiBottomBarStyles = exports.euiBottomBarStyles = function euiBottomBarStyle
   return {
     // Base
     // `color` is inherited from the wrapping `EuiThemeProvider colorMode="dark"`
-    euiBottomBar: /*#__PURE__*/(0, _react.css)((0, _mixins.euiShadowFlat)(euiThemeContext), " background:", (0, _services.shade)(euiTheme.colors.lightestShade, 0.5), ";", _global_styling.euiCanAnimate, "{animation:", euiBottomBarAppear, " ", euiTheme.animation.slow, " ", euiTheme.animation.resistance, ";};label:euiBottomBar;"),
+    euiBottomBar: /*#__PURE__*/(0, _react.css)((0, _mixins.euiShadowFlat)(euiThemeContext), " background:", euiTheme.components.bottomBarBackground, ";", _global_styling.euiCanAnimate, "{animation:", euiBottomBarAppear, " ", euiTheme.animation.slow, " ", euiTheme.animation.resistance, ";};label:euiBottomBar;"),
     static: /*#__PURE__*/(0, _react.css)(";label:static;"),
     // Default
     fixed: /*#__PURE__*/(0, _react.css)("position:fixed;z-index:", Number(euiTheme.levels.header) - 2, ";;label:fixed;"),

package/test-env/components/breadcrumbs/_breadcrumb_content.styles.js

@@ -5,9 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiBreadcrumbPopoverStyles = exports.euiBreadcrumbContentStyles = void 0;
 var _react = require("@emotion/react");
-var _color = require("../../services/color");
 var _global_styling = require("../../global_styling");
-var _button = require("../../themes/amsterdam/global_styling/mixins/button");
+var _button = require("../../global_styling/mixins/_button");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -20,8 +19,7 @@ var _button = require("../../themes/amsterdam/global_styling/mixins/button");
  * Styles cast to inner <a>, <button>, <span> elements
  */
 var euiBreadcrumbContentStyles = exports.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 = (0, _button.euiButtonColor)(euiThemeContext, 'primary');
@@ -29,11 +27,11 @@ var euiBreadcrumbContentStyles = exports.euiBreadcrumbContentStyles = function e
   // 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: (0, _color.tintOrShade)(euiTheme.colors.darkestShade, colorMode === 'DARK' ? 0.7 : 0.85, colorMode),
-    color: (0, _color.tintOrShade)(euiTheme.colors.darkestShade, 0.2, colorMode)
+    backgroundColor: euiTheme.components.breadcrumbsApplicationBackground,
+    color: euiTheme.components.breadcrumbsApplicationColor
   };
   return {
-    euiBreadcrumb__content: /*#__PURE__*/(0, _react.css)("font-weight:", euiTheme.font.weight.regular, ";text-align:center;vertical-align:baseline;&:not(.euiLink){color:", euiTheme.colors.subduedText, ";};label:euiBreadcrumb__content;"),
+    euiBreadcrumb__content: /*#__PURE__*/(0, _react.css)("font-weight:", euiTheme.font.weight.regular, ";text-align:center;vertical-align:baseline;&:not(.euiLink){color:", euiTheme.colors.textSubdued, ";};label:euiBreadcrumb__content;"),
     // Truncation styles
     isTruncated: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextTruncate)((0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
       return x * 10;

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

@@ -10,7 +10,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _button = require("../../themes/amsterdam/global_styling/mixins/button");
+var _button = require("../../global_styling/mixins/_button");
 var _button_display = require("./button_display/_button_display");
 var _react2 = require("@emotion/react");
 var _excluded = ["className", "buttonRef", "size", "color", "fill"];

package/test-env/components/button/button_display/_button_display.styles.js

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

package/test-env/components/button/button_empty/button_empty.js

@@ -13,7 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../../services");
 var _button_display_content = require("../button_display/_button_display_content");
-var _button = require("../../../themes/amsterdam/global_styling/mixins/button");
+var _button = require("../../../global_styling/mixins/_button");
 var _button_display = require("../button_display/_button_display");
 var _button_empty = require("./button_empty.styles");
 var _react2 = require("@emotion/react");

package/test-env/components/button/button_group/button_group_button.js

@@ -13,7 +13,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
 var _services = require("../../../services");
-var _button = require("../../../themes/amsterdam/global_styling/mixins/button");
+var _button = require("../../../global_styling/mixins/_button");
 var _inner_text = require("../../inner_text");
 var _button_display = require("../button_display/_button_display");
 var _button_group_button = require("./button_group_button.styles");

package/test-env/components/button/button_group/button_group_button.styles.js

@@ -10,7 +10,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _react = require("@emotion/react");
 var _services = require("../../../services");
 var _global_styling = require("../../../global_styling");
-var _button = require("../../../themes/amsterdam/global_styling/mixins/button");
+var _button = require("../../../global_styling/mixins/_button");
 var _accessibility = require("../../accessibility");
 var _form = require("../../form/form.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; }
@@ -51,15 +51,15 @@ var euiButtonGroupButtonStyles = exports.euiButtonGroupButtonStyles = function e
   };
   return {
     // Base
-    euiButtonGroupButton: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', 0), " flex-shrink:1;flex-grow:0;", _global_styling.euiCanAnimate, "{transition:background-color ", euiTheme.animation.normal, " ease-in-out,color ", euiTheme.animation.normal, " ease-in-out;};label:euiButtonGroupButton;"),
+    euiButtonGroupButton: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', 0), " flex-shrink:1;flex-grow:0;z-index:0;&:focus-visible{z-index:1;}", _global_styling.euiCanAnimate, "{transition:background-color ", euiTheme.animation.normal, " ease-in-out,color ", euiTheme.animation.normal, " ease-in-out;};label:euiButtonGroupButton;"),
     iconOnly: /*#__PURE__*/(0, _react.css)("padding-inline:", euiTheme.size.s, ";;label:iconOnly;"),
     // Sizes
     uncompressed: {
-      uncompressed: /*#__PURE__*/(0, _react.css)("&:is(.euiButtonGroupButton-isSelected){font-weight:", euiTheme.font.weight.bold, ";}&:focus-visible{", (0, _global_styling.euiOutline)(euiThemeContext, 'inset', euiTheme.colors.fullShade), ";};label:uncompressed;"),
+      uncompressed: /*#__PURE__*/(0, _react.css)("&:is(.euiButtonGroupButton-isSelected){font-weight:", euiTheme.font.weight.bold, ";}&:focus-visible{", (0, _global_styling.euiOutline)(euiThemeContext, 'inset', euiTheme.components.buttonGroupFocusColor), ";};label:uncompressed;"),
       get borders() {
         var selectors = '.euiButtonGroupButton-isSelected, .euiButtonGroup__tooltipWrapper-isSelected';
-        var selectedColor = (0, _services.transparentize)(euiTheme.colors.emptyShade, 0.2);
-        var unselectedColor = (0, _services.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/test-env/components/button/button_icon/button_icon.js

@@ -13,7 +13,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../../services");
 var _icon = require("../../icon");
 var _loading = require("../../loading");
-var _button = require("../../../themes/amsterdam/global_styling/mixins/button");
+var _button = require("../../../global_styling/mixins/_button");
 var _button_display = require("../button_display/_button_display");
 var _button_icon = require("./button_icon.styles");
 var _react2 = require("@emotion/react");

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

@@ -400,7 +400,7 @@ EuiCard.propTypes = {
        * Leave as `undefined` to display as a default panel.
        * Selectable cards will always display as a default panel.
        */
-  display: _propTypes.default.any,
+  display: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf(["highlighted"])]),
   /**
        * Padding applied around the content of the card
        */