@elastic/eui 98.2.0 → 98.2.1-borealis.1

package/optimize/es/themes/amsterdam/global_styling/variables/_forms.js

@@ -0,0 +1,153 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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; }
+/*
+ * 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.
+ */
+
+import { mathWithUnits } from '@elastic/eui-theme-common';
+import { computed } from '../../../../services/theme/utils';
+import { darken, shade, tint, transparentize } from '../../../../services/color/manipulation';
+var _forms = {
+  background: computed(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 1),
+      lightestShade = _ref2[0];
+    return tint(lightestShade, 0.6);
+  }, ['colors.lightestShade']),
+  backgroundDisabled: computed(function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 1),
+      lightestShade = _ref4[0];
+    return darken(lightestShade, 0.05);
+  }, ['colors.lightestShade']),
+  backgroundReadOnly: computed(function (_ref5) {
+    var _ref6 = _slicedToArray(_ref5, 1),
+      emptyShade = _ref6[0];
+    return emptyShade;
+  }, ['colors.emptyShade']),
+  backgroundFocused: computed(function (_ref7) {
+    var _ref8 = _slicedToArray(_ref7, 1),
+      emptyShade = _ref8[0];
+    return emptyShade;
+  }, ['colors.emptyShade']),
+  backgroundAutofilled: computed(function (_ref9) {
+    var _ref10 = _slicedToArray(_ref9, 1),
+      primary = _ref10[0];
+    var background = tint(primary, 0.8);
+    return tint(background, 0.7);
+  }, ['colors.primary']),
+  prependBackground: computed(function (_ref11) {
+    var _ref12 = _slicedToArray(_ref11, 1),
+      lightShade = _ref12[0];
+    return tint(lightShade, 0.5);
+  }, ['colors.lightShade']),
+  border: computed(function (_ref13) {
+    var _ref14 = _slicedToArray(_ref13, 1),
+      lightShade = _ref14[0];
+    var color = darken(lightShade, 4);
+    return transparentize(color, 0.1);
+  }, ['colors.lightShade']),
+  borderAutofilled: computed(function (_ref15) {
+    var _ref16 = _slicedToArray(_ref15, 1),
+      primaryText = _ref16[0];
+    return transparentize(primaryText, 0.2);
+  }, ['colors.primaryText']),
+  controlBorder: computed(function (_ref17) {
+    var _ref18 = _slicedToArray(_ref17, 1),
+      lightestShade = _ref18[0];
+    return shade(lightestShade, 0.4);
+  }, ['colors.lightestShade']),
+  controlBorderSelected: computed(function (_ref19) {
+    var _ref20 = _slicedToArray(_ref19, 1),
+      lightestShade = _ref20[0];
+    return shade(lightestShade, 0.4);
+  }, ['colors.lightestShade']),
+  controlBorderDisabled: computed(function (_ref21) {
+    var _ref22 = _slicedToArray(_ref21, 1),
+      lightestShade = _ref22[0];
+    return shade(lightestShade, 0.4);
+  }, ['colors.lightestShade']),
+  controlBackgroundUnselected: computed(function (_ref23) {
+    var _ref24 = _slicedToArray(_ref23, 1),
+      emptyShade = _ref24[0];
+    return emptyShade;
+  }, ['colors.emptyShade']),
+  controlBackgroundDisabled: computed(function (_ref25) {
+    var _ref26 = _slicedToArray(_ref25, 1),
+      lightShade = _ref26[0];
+    return lightShade;
+  }, ['colors.lightShade']),
+  colorHasPlaceholder: computed(function (_ref27) {
+    var _ref28 = _slicedToArray(_ref27, 1),
+      subduedText = _ref28[0];
+    return tint(subduedText, 0.08);
+  }, ['colors.subduedText']),
+  colorDisabled: computed(function (_ref29) {
+    var _ref30 = _slicedToArray(_ref29, 1),
+      mediumShade = _ref30[0];
+    return mediumShade;
+  }, ['colors.mediumShade']),
+  iconDisabled: computed(function (_ref31) {
+    var _ref32 = _slicedToArray(_ref31, 1),
+      darkShade = _ref32[0];
+    return darkShade;
+  }, ['colors.darkShade'])
+};
+var _dark_forms = _objectSpread(_objectSpread({}, _forms), {}, {
+  background: computed(function (_ref33) {
+    var _ref34 = _slicedToArray(_ref33, 1),
+      lightestShade = _ref34[0];
+    return shade(lightestShade, 0.4);
+  }, ['colors.lightestShade']),
+  backgroundFocused: computed(function (_ref35) {
+    var _ref36 = _slicedToArray(_ref35, 1),
+      emptyShade = _ref36[0];
+    return shade(emptyShade, 0.4);
+  }, ['colors.emptyShade']),
+  backgroundAutofilled: computed(function (_ref37) {
+    var _ref38 = _slicedToArray(_ref37, 1),
+      primary = _ref38[0];
+    var background = shade(primary, 0.7);
+    return shade(background, 0.5);
+  }, ['colors.primary']),
+  prependBackground: computed(function (_ref39) {
+    var _ref40 = _slicedToArray(_ref39, 1),
+      lightShade = _ref40[0];
+    return shade(lightShade, 0.15);
+  }, ['colors.lightShade']),
+  border: computed(function (_ref41) {
+    var _ref42 = _slicedToArray(_ref41, 1),
+      ghost = _ref42[0];
+    return transparentize(ghost, 0.1);
+  }, ['colors.ghost']),
+  controlBorder: computed(function (_ref43) {
+    var _ref44 = _slicedToArray(_ref43, 1),
+      lightestShade = _ref44[0];
+    return tint(lightestShade, 0.31);
+  }, ['colors.lightestShade']),
+  controlBorderSelected: computed(function (_ref45) {
+    var _ref46 = _slicedToArray(_ref45, 1),
+      lightestShade = _ref46[0];
+    return tint(lightestShade, 0.31);
+  }, ['colors.lightestShade']),
+  controlBorderDisabled: computed(function (_ref47) {
+    var _ref48 = _slicedToArray(_ref47, 1),
+      lightestShade = _ref48[0];
+    return tint(lightestShade, 0.31);
+  }, ['colors.lightestShade'])
+});
+export var forms = {
+  maxWidth: computed(function (_ref49) {
+    var _ref50 = _slicedToArray(_ref49, 1),
+      base = _ref50[0];
+    return mathWithUnits(base, function (x) {
+      return x * 25;
+    });
+  }, ['size.base']),
+  LIGHT: _forms,
+  DARK: _dark_forms
+};

package/optimize/es/themes/amsterdam/theme.js

@@ -15,6 +15,7 @@ import { border } from './global_styling/variables/_borders';
 import { levels } from './global_styling/variables/_levels';
 import { font } from './global_styling/variables/_typography';
 import { focus } from './global_styling/variables/_states';
+import { components } from './global_styling/variables/_components';
 export var AMSTERDAM_NAME_KEY = 'EUI_THEME_AMSTERDAM';
 export var euiThemeAmsterdam = {
   colors: colors,
@@ -25,6 +26,11 @@ export var euiThemeAmsterdam = {
   animation: animation,
   breakpoint: breakpoint,
   levels: levels,
-  focus: focus
+  focus: focus,
+  components: components,
+  flags: {
+    hasGlobalFocusColor: false,
+    hasVisColorAdjustment: true
+  }
 };
 export var EuiThemeAmsterdam = buildTheme(euiThemeAmsterdam, AMSTERDAM_NAME_KEY);

package/optimize/es/themes/index.js

@@ -6,6 +6,6 @@
  * Side Public License, v 1.
  */
 
-export { EUI_THEMES, isDefaultTheme } from './themes';
+export { EUI_THEMES, isDefaultTheme, isExperimentalThemeEnabled } from './themes';
 export { AMSTERDAM_NAME_KEY, EuiThemeAmsterdam } from './amsterdam/theme';
 export * from './amsterdam';

package/optimize/es/themes/themes.js

@@ -8,14 +8,17 @@
 
 import { EuiThemeAmsterdam, AMSTERDAM_NAME_KEY } from './amsterdam/theme';
 export var EUI_THEMES = [{
-  text: 'Light',
-  value: 'light',
-  provider: EuiThemeAmsterdam
-}, {
-  text: 'Dark',
-  value: 'dark',
+  text: 'Amsterdam',
+  value: AMSTERDAM_NAME_KEY,
   provider: EuiThemeAmsterdam
 }];
 export var isDefaultTheme = function isDefaultTheme(name) {
   return name === AMSTERDAM_NAME_KEY;
+};
+export var EUI_EXPERIMENTAL_THEME_ENABLED_KEY = 'eui-experimental-theme-enabled';
+export var isExperimentalThemeEnabled = function isExperimentalThemeEnabled() {
+  if (typeof localStorage !== 'undefined') {
+    return localStorage.getItem(EUI_EXPERIMENTAL_THEME_ENABLED_KEY) === 'true';
+  }
+  return false;
 };

package/optimize/lib/components/avatar/avatar.js

@@ -30,7 +30,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'];
@@ -62,6 +61,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;
@@ -83,7 +89,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/optimize/lib/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/optimize/lib/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/optimize/lib/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/optimize/lib/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/optimize/lib/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/optimize/lib/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/optimize/lib/components/button/button.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 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/optimize/lib/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/optimize/lib/components/button/button_empty/button_empty.js

@@ -12,7 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 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/optimize/lib/components/button/button_group/button_group_button.js

@@ -12,7 +12,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _classnames = _interopRequireDefault(require("classnames"));
 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/optimize/lib/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/optimize/lib/components/button/button_icon/button_icon.js

@@ -12,7 +12,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/optimize/lib/components/card/card.styles.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiCardTextStyles = exports.euiCardStyles = exports.euiCardBetaBadgeStyles = 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
@@ -65,6 +65,9 @@ var _ref6 = process.env.NODE_ENV === "production" ? {
 var euiCardStyles = exports.euiCardStyles = function euiCardStyles(euiThemeContext, paddingSize) {
   var euiTheme = euiThemeContext.euiTheme;
   var paddingAmount = (0, _global_styling.euiPaddingSize)(euiThemeContext, paddingSize);
+  var cardPaddingAmount = paddingAmount ? (0, _global_styling.mathWithUnits)([paddingAmount, euiTheme.border.width.thin], function (x, y) {
+    return x + y;
+  }) : '0';
   var spacing = (0, _global_styling.euiPaddingSize)(euiThemeContext, paddingKey);
   var halfSpacing = (0, _global_styling.euiPaddingSize)(euiThemeContext, halfPaddingKey);
   return {
@@ -103,7 +106,7 @@ var euiCardStyles = exports.euiCardStyles = function euiCardStyles(euiThemeConte
       disabled: _ref2
     },
     image: {
-      euiCard__image: /*#__PURE__*/(0, _react.css)("position:relative;overflow:hidden;", (0, _global_styling.logicalCSS)('width', "calc(100% + (".concat(paddingAmount, " * 2))")), " ", (0, _global_styling.logicalCSS)('left', "-".concat(paddingAmount)), " ", (0, _global_styling.logicalCSS)('top', "-".concat(paddingAmount)), (0, _global_styling.logicalCSS)('margin-bottom', "-".concat(paddingAmount)), (0, _global_styling.logicalCSS)('border-top-left-radius', "calc(".concat(euiTheme.border.radius.medium, " - ").concat(euiTheme.border.width.thin, ")")), " ", _global_styling.logicals['border-top-right-radius'], ":calc(", euiTheme.border.radius.medium, " - ", euiTheme.border.width.thin, ");img{", (0, _global_styling.logicalCSS)('width', '100%'), ";};label:euiCard__image;"),
+      euiCard__image: /*#__PURE__*/(0, _react.css)("position:relative;overflow:hidden;", (0, _global_styling.logicalCSS)('width', "calc(100% + (".concat(cardPaddingAmount, " * 2))")), " ", (0, _global_styling.logicalCSS)('left', "-".concat(cardPaddingAmount)), " ", (0, _global_styling.logicalCSS)('top', "-".concat(cardPaddingAmount)), (0, _global_styling.logicalCSS)('margin-bottom', "-".concat(paddingAmount)), (0, _global_styling.logicalCSS)('border-top-left-radius', "calc(".concat(euiTheme.border.radius.medium, " - ").concat(euiTheme.border.width.thin, ")")), " ", _global_styling.logicals['border-top-right-radius'], ":calc(", euiTheme.border.radius.medium, " - ", euiTheme.border.width.thin, ");img{", (0, _global_styling.logicalCSS)('width', '100%'), ";};label:euiCard__image;"),
       transparent: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";;label:transparent;")
     },
     icon: {

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

@@ -11,7 +11,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _services = require("../../services");
-var _button = require("../../themes/amsterdam/global_styling/mixins/button");
+var _button = require("../../global_styling/mixins/_button");
 var _i18n = require("../i18n");
 var _popover = require("../popover");
 var _icon = require("../icon");

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

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiCodeBlockLineStyles = void 0;
 var _css = require("@emotion/css");
-var _global_styling = require("../../global_styling");
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -43,7 +42,7 @@ var euiCodeBlockLineStyles = exports.euiCodeBlockLineStyles = function euiCodeBl
     }),
     lineText: {
       euiCodeBlock__lineText: /*#__PURE__*/(0, _css.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__*/(0, _css.css)("background:", (0, _global_styling.euiBackgroundColor)(euiThemeContext, 'primary'), ";border-inline-start:", euiTheme.border.width.thick, " solid ", euiTheme.colors.primary, ";;label:isHighlighted;")
+      isHighlighted: /*#__PURE__*/(0, _css.css)("background:", euiTheme.colors.backgroundBasePrimary, ";border-inline-start:", euiTheme.border.width.thick, " solid ", euiTheme.colors.primary, ";;label:isHighlighted;")
     },
     lineNumber: {
       euiCodeBlock__lineNumberWrapper: /*#__PURE__*/(0, _css.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;"),

package/optimize/lib/components/code/code_syntax.styles.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.euiCodeSyntaxVariables = void 0;
-var _services = require("../../services");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -13,36 +12,33 @@ var _services = require("../../services");
  * Side Public License, v 1.
  */
 
-var visColors = (0, _services.euiPaletteColorBlind)();
-
 // These variables are computationally expensive - do not call them outside `useEuiMemoizedStyles`
 var euiCodeSyntaxVariables = exports.euiCodeSyntaxVariables = function euiCodeSyntaxVariables(_ref) {
   var euiTheme = _ref.euiTheme;
-  var backgroundColor = euiTheme.colors.lightestShade;
   return {
-    backgroundColor: backgroundColor,
-    color: (0, _services.makeHighContrastColor)(euiTheme.colors.text)(backgroundColor),
-    inlineCodeColor: (0, _services.makeHighContrastColor)(visColors[3])(backgroundColor),
-    selectedBackgroundColor: 'inherit',
-    commentColor: (0, _services.makeHighContrastColor)(euiTheme.colors.subduedText)(backgroundColor),
-    selectorTagColor: 'inherit',
-    stringColor: (0, _services.makeHighContrastColor)(visColors[2])(backgroundColor),
-    tagColor: (0, _services.makeHighContrastColor)(visColors[1])(backgroundColor),
-    nameColor: (0, _services.makeHighContrastColor)(visColors[1])(backgroundColor),
-    numberColor: (0, _services.makeHighContrastColor)(visColors[0])(backgroundColor),
-    keywordColor: (0, _services.makeHighContrastColor)(visColors[3])(backgroundColor),
-    functionTitleColor: 'inherit',
-    typeColor: (0, _services.makeHighContrastColor)(visColors[1])(backgroundColor),
-    attributeColor: 'inherit',
-    symbolColor: (0, _services.makeHighContrastColor)(visColors[9])(backgroundColor),
-    paramsColor: 'inherit',
-    metaColor: (0, _services.makeHighContrastColor)(euiTheme.colors.subduedText)(backgroundColor),
-    titleColor: (0, _services.makeHighContrastColor)(visColors[7])(backgroundColor),
-    sectionColor: (0, _services.makeHighContrastColor)(visColors[9])(backgroundColor),
-    additionColor: (0, _services.makeHighContrastColor)(visColors[0])(backgroundColor),
-    deletionColor: (0, _services.makeHighContrastColor)(euiTheme.colors.danger)(backgroundColor),
-    selectorClassColor: 'inherit',
-    selectorIdColor: 'inherit',
+    backgroundColor: euiTheme.components.codeBackground,
+    color: euiTheme.components.codeColor,
+    inlineCodeColor: euiTheme.components.codeInlineColor,
+    selectedBackgroundColor: euiTheme.components.codeBackgroundSelected,
+    commentColor: euiTheme.components.codeCommentColor,
+    selectorTagColor: euiTheme.components.codeSelectorColor,
+    stringColor: euiTheme.components.codeStringColor,
+    tagColor: euiTheme.components.codeTagColor,
+    nameColor: euiTheme.components.codeNameColor,
+    numberColor: euiTheme.components.codeNumberColor,
+    keywordColor: euiTheme.components.codeKeywordColor,
+    functionTitleColor: euiTheme.components.codeFunctionTitleColor,
+    typeColor: euiTheme.components.codeTypeColor,
+    attributeColor: euiTheme.components.codeAttributeColor,
+    symbolColor: euiTheme.components.codeSymbolColor,
+    paramsColor: euiTheme.components.codeParamsColor,
+    metaColor: euiTheme.components.codeMetaColor,
+    titleColor: euiTheme.components.codeTitleColor,
+    sectionColor: euiTheme.components.codeSectionColor,
+    additionColor: euiTheme.components.codeAdditionColor,
+    deletionColor: euiTheme.components.codeDeletionColor,
+    selectorClassColor: euiTheme.components.codeSelectorClassColor,
+    selectorIdColor: euiTheme.components.codeSelectorIdColor,
     get tokensCss() {
       return "\n  .token.punctuation:not(.interpolation-punctuation):not([class*='attr-']) {\n    opacity: .7;\n  }\n\n  .token.comment,\n  .token.prolog,\n  .token.doctype,\n  .token.cdata,\n  .token.coord,\n  .token.blockquote {\n    color: ".concat(this.commentColor, ";\n    font-style: italic;\n  }\n\n  .token.selector {\n    color: ").concat(this.selectorTagColor, ";\n  }\n\n  .token.string,\n  .token.interpolation,\n  .token.interpolation-punctuation,\n  .token.doc-comment .token.keyword,\n  .token.attr-value,\n  .token.url .token.content {\n    color: ").concat(this.stringColor, ";\n  }\n\n  .token.number,\n  .token.boolean,\n  .token.keyword.nil,\n  .token.regex,\n  .token.variable,\n  .token.unit,\n  .token.hexcode,\n  .token.attr-name,\n  .token.attr-equals {\n    color: ").concat(this.numberColor, ";\n  }\n\n  .token.atrule .token.rule,\n  .token.keyword {\n    color: ").concat(this.keywordColor, ";\n  }\n\n  .token.function {\n    color: ").concat(this.functionTitleColor, ";\n  }\n\n  .token.tag {\n    color: ").concat(this.tagColor, ";\n  }\n\n  .token.class-name {\n    color: ").concat(this.typeColor, ";\n  }\n\n  .token.property {\n    color: ").concat(this.attributeColor, ";\n  }\n\n  .token.console,\n  .token.list-punctuation,\n  .token.url-reference,\n  .token.url .token.url {\n    color: ").concat(this.symbolColor, ";\n  }\n\n  .token.paramater {\n    color: ").concat(this.paramsColor, ";\n  }\n\n  .token.meta,\n  .token.important {\n    color: ").concat(this.metaColor, ";\n  }\n\n  .token.title {\n    color: ").concat(this.titleColor, ";\n  }\n\n  .token.section {\n    color: ").concat(this.sectionColor, ";\n  }\n\n  .token.prefix.inserted,\n  .token.prefix.deleted {\n    padding-inline-start: -").concat(euiTheme.size.xs, ";\n    margin-inline-start:  -").concat(euiTheme.size.xs, ";\n  }\n\n  .token.prefix.inserted {\n    box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(this.additionColor, ";\n    color: ").concat(this.additionColor, ";\n  }\n\n  .token.prefix.deleted {\n    box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(this.deletionColor, ";\n    color: ").concat(this.deletionColor, ";\n  }\n\n  .token.selector .token.class {\n    color: ").concat(this.selectorClassColor, ";\n  }\n\n  .token.selector .token.id {\n    color: ").concat(this.selectorIdColor, ";\n  }\n\n  .token.italic {\n    font-style: italic;\n  }\n\n  .token.important,\n  .token.bold {\n    font-weight: ").concat(euiTheme.font.weight.bold, ";\n  }\n\n  .token.url-reference,\n  .token.url .token.url {\n    text-decoration: underline;\n  }\n\n  .token.entity {\n    cursor: help;\n  }");
     }