@elastic/eui 98.2.1-borealis.2 → 99.0.0

package/lib/themes/amsterdam/theme.js

@@ -13,7 +13,6 @@ 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
@@ -32,11 +31,6 @@ var euiThemeAmsterdam = exports.euiThemeAmsterdam = {
   animation: _animation.animation,
   breakpoint: _breakpoint.breakpoint,
   levels: _levels.levels,
-  focus: _states.focus,
-  components: _components.components,
-  flags: {
-    hasGlobalFocusColor: false,
-    hasVisColorAdjustment: true
-  }
+  focus: _states.focus
 };
 var EuiThemeAmsterdam = exports.EuiThemeAmsterdam = (0, _utils.buildTheme)(euiThemeAmsterdam, AMSTERDAM_NAME_KEY);

package/lib/themes/index.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 var _exportNames = {
   EUI_THEMES: true,
   isDefaultTheme: true,
-  isExperimentalThemeEnabled: true,
   AMSTERDAM_NAME_KEY: true,
   EuiThemeAmsterdam: true
 };
@@ -34,12 +33,6 @@ 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.isExperimentalThemeEnabled = exports.isDefaultTheme = exports.EUI_THEMES = exports.EUI_EXPERIMENTAL_THEME_ENABLED_KEY = void 0;
+exports.isDefaultTheme = exports.EUI_THEMES = void 0;
 var _theme = require("./amsterdam/theme");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -14,17 +14,14 @@ var _theme = require("./amsterdam/theme");
  */
 
 var EUI_THEMES = exports.EUI_THEMES = [{
-  text: 'Amsterdam',
-  value: _theme.AMSTERDAM_NAME_KEY,
+  text: 'Light',
+  value: 'light',
+  provider: _theme.EuiThemeAmsterdam
+}, {
+  text: 'Dark',
+  value: 'dark',
   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,11 +16,12 @@ 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, euiPaletteColorBlindBehindText } from '../../services/color';
-import { toInitials, useEuiMemoizedStyles, useEuiTheme } from '../../services';
+import { isColorDark, hexToRgb, isValidHex } from '../../services/color';
+import { euiPaletteColorBlindBehindText, toInitials, useEuiMemoizedStyles } 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'];
@@ -52,13 +53,6 @@ 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;
@@ -80,7 +74,7 @@ export var EuiAvatar = function EuiAvatar(_ref) {
         color: textColor
       };
     }
-  }, [imageUrl, color, isNamedColor, name.length, visColors]);
+  }, [imageUrl, color, isNamedColor, name.length]);
   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.styles.js

@@ -9,6 +9,7 @@ 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",
@@ -61,7 +62,7 @@ export var euiBadgeStyles = function euiBadgeStyles(euiThemeContext) {
     },
     // Clickable icons (iconOnClick)
     iconButton: {
-      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) {
+      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) {
         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.styles.js

@@ -35,17 +35,15 @@ var _ref3 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 export var euiBetaBadgeStyles = function euiBetaBadgeStyles(euiThemeContext) {
-  var _euiTheme$flags;
   var euiTheme = euiThemeContext.euiTheme,
     colorMode = euiThemeContext.colorMode;
   var badgeColors = euiBadgeColors(euiThemeContext);
-  var hasVisColorAdjustment = (_euiTheme$flags = euiTheme.flags) === null || _euiTheme$flags === void 0 ? void 0 : _euiTheme$flags.hasVisColorAdjustment;
   return {
     euiBetaBadge: /*#__PURE__*/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;", euiTextTruncate(), " &:focus{", euiFocusRing(euiThemeContext, 'outset', {
       color: colorMode === 'DARK' ? euiTheme.colors.ghost : euiTheme.colors.ink
     }), ";};label:euiBetaBadge;"),
     // Colors
-    accent: hasVisColorAdjustment ? /*#__PURE__*/css(badgeColors.accentText, ";label:accent;") : /*#__PURE__*/css(badgeColors.accent, ";label:accent;"),
+    accent: /*#__PURE__*/css(badgeColors.accentText, ";label:accent;"),
     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;"),
     warning: /*#__PURE__*/css(badgeColors.warning, ";label:warning;"),

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

@@ -11,11 +11,12 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  */
 
 import chroma from 'chroma-js';
-import { isColorDark } from '../../services';
-import { euiButtonColor, euiButtonFillColor } from '../../global_styling/mixins/_button';
+import { isColorDark, tint } from '../../services';
+import { euiButtonColor, euiButtonFillColor } from '../../themes/amsterdam/global_styling/mixins';
 import { chromaValid, parseColor } from '../color_picker/utils';
 export var euiBadgeColors = function euiBadgeColors(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    colorMode = euiThemeContext.colorMode;
   return {
     // Colors shared between buttons and badges
     primary: euiButtonFillColor(euiThemeContext, 'primary'),
@@ -23,18 +24,16 @@ 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.components.badgeBackground),
+    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: euiTheme.components.badgeBorderColorHollow
+      borderColor: colorMode === 'DARK' ? tint(euiTheme.border.color, 0.15) : euiTheme.border.color
     }),
     // Colors used by beta and notification badges
-    subdued: getBadgeColors(euiThemeContext, euiTheme.components.badgeBackgroundSubdued),
-    accentText: getBadgeColors(euiThemeContext, euiTheme.colors.textAccent),
-    accentSecondaryText: getBadgeColors(euiThemeContext, euiTheme.colors.textAccentSecondary)
+    subdued: getBadgeColors(euiThemeContext, tint(euiTheme.colors.lightShade, 0.3)),
+    accentText: getBadgeColors(euiThemeContext, euiTheme.colors.accentText)
   };
 };
 export var getBadgeColors = function getBadgeColors(euiThemeContext, backgroundColor) {

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

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

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

@@ -10,6 +10,7 @@ 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) {
@@ -17,7 +18,7 @@ export var euiBottomBarStyles = function euiBottomBarStyles(euiThemeContext) {
   return {
     // Base
     // `color` is inherited from the wrapping `EuiThemeProvider colorMode="dark"`
-    euiBottomBar: /*#__PURE__*/css(euiShadowFlat(euiThemeContext), " background:", euiTheme.components.bottomBarBackground, ";", euiCanAnimate, "{animation:", euiBottomBarAppear, " ", euiTheme.animation.slow, " ", euiTheme.animation.resistance, ";};label:euiBottomBar;"),
+    euiBottomBar: /*#__PURE__*/css(euiShadowFlat(euiThemeContext), " background:", shade(euiTheme.colors.lightestShade, 0.5), ";", 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,14 +7,16 @@
  */
 
 import { css } from '@emotion/react';
+import { tintOrShade } from '../../services/color';
 import { euiFontSize, euiTextTruncate, euiFocusRing, logicalCSS, logicalBorderRadiusCSS, mathWithUnits } from '../../global_styling';
-import { euiButtonColor } from '../../global_styling/mixins/_button';
+import { euiButtonColor } from '../../themes/amsterdam/global_styling/mixins/button';
 
 /**
  * Styles cast to inner <a>, <button>, <span> elements
  */
 export var euiBreadcrumbContentStyles = function euiBreadcrumbContentStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    colorMode = euiThemeContext.colorMode;
 
   // Reuse button colors for `type="application`" clickable breadcrumbs
   var applicationButtonColors = euiButtonColor(euiThemeContext, 'primary');
@@ -22,11 +24,11 @@ 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: euiTheme.components.breadcrumbsApplicationBackground,
-    color: euiTheme.components.breadcrumbsApplicationColor
+    backgroundColor: tintOrShade(euiTheme.colors.darkestShade, colorMode === 'DARK' ? 0.7 : 0.85, colorMode),
+    color: tintOrShade(euiTheme.colors.darkestShade, 0.2, colorMode)
   };
   return {
-    euiBreadcrumb__content: /*#__PURE__*/css("font-weight:", euiTheme.font.weight.regular, ";text-align:center;vertical-align:baseline;&:not(.euiLink){color:", euiTheme.colors.textSubdued, ";};label:euiBreadcrumb__content;"),
+    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;"),
     // Truncation styles
     isTruncated: /*#__PURE__*/css(euiTextTruncate(mathWithUnits(euiTheme.size.base, function (x) {
       return x * 10;

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 '../../global_styling/mixins/_button';
+import { BUTTON_COLORS, useEuiButtonColorCSS, useEuiButtonFocusCSS } from '../../themes/amsterdam/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 '../../../global_styling/mixins';
+import { euiButtonSizeMap } from '../../../themes/amsterdam/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 '../../../global_styling/mixins/_button';
+import { useEuiButtonColorCSS } from '../../../themes/amsterdam/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 '../../../global_styling/mixins/_button';
+import { useEuiButtonColorCSS } from '../../../themes/amsterdam/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 } from '../../../services';
+import { makeDisabledContrastColor, transparentize } from '../../../services';
 import { mathWithUnits, logicalCSS, logicalShorthandCSS, euiTextShift, euiOutline, euiCanAnimate } from '../../../global_styling';
-import { euiButtonFillColor, BUTTON_COLORS } from '../../../global_styling/mixins/_button';
+import { euiButtonFillColor, BUTTON_COLORS } from '../../../themes/amsterdam/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;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;"),
+    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;"),
     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.components.buttonGroupFocusColor), ";};label:uncompressed;"),
+      uncompressed: /*#__PURE__*/css("&:is(.euiButtonGroupButton-isSelected){font-weight:", euiTheme.font.weight.bold, ";}&:focus-visible{", euiOutline(euiThemeContext, 'inset', euiTheme.colors.fullShade), ";};label:uncompressed;"),
       get borders() {
         var selectors = '.euiButtonGroupButton-isSelected, .euiButtonGroup__tooltipWrapper-isSelected';
-        var selectedColor = euiTheme.components.buttonGroupBorderColorSelected;
-        var unselectedColor = euiTheme.components.buttonGroupBorderColor;
+        var selectedColor = transparentize(euiTheme.colors.emptyShade, 0.2);
+        var unselectedColor = transparentize(euiTheme.colors.fullShade, 0.1);
         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 '../../../global_styling/mixins/_button';
+import { useEuiButtonColorCSS, useEuiButtonFocusCSS } from '../../../themes/amsterdam/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, logicalCSS, logicals, logicalTextAlignCSS, mathWithUnits } from '../../global_styling';
-import { euiButtonColor } from '../../global_styling/mixins';
+import { euiPaddingSize, logicalCSS, logicals, logicalTextAlignCSS } from '../../global_styling';
+import { euiButtonColor } from '../../themes/amsterdam/global_styling/mixins';
 var paddingKey = 'm';
 var halfPaddingKey = 's';
 
@@ -61,9 +61,6 @@ 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 {
@@ -102,7 +99,7 @@ export var euiCardStyles = function euiCardStyles(euiThemeContext, paddingSize)
       disabled: _ref2
     },
     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;"),
+      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;"),
       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 '../../global_styling/mixins/_button';
+import { useEuiButtonFocusCSS } from '../../themes/amsterdam/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,6 +15,7 @@ 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)
 
@@ -39,7 +40,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:", euiTheme.colors.backgroundBasePrimary, ";border-inline-start:", euiTheme.border.width.thick, " solid ", euiTheme.colors.primary, ";;label:isHighlighted;")
+      isHighlighted: /*#__PURE__*/css("background:", euiBackgroundColor(euiThemeContext, 'primary'), ";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;"),

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

@@ -6,33 +6,37 @@
  * Side Public License, v 1.
  */
 
+import { makeHighContrastColor, euiPaletteColorBlind } from '../../services';
+var visColors = euiPaletteColorBlind();
+
 // These variables are computationally expensive - do not call them outside `useEuiMemoizedStyles`
 export var euiCodeSyntaxVariables = function euiCodeSyntaxVariables(_ref) {
   var euiTheme = _ref.euiTheme;
+  var backgroundColor = euiTheme.colors.lightestShade;
   return {
-    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,
+    backgroundColor: backgroundColor,
+    color: makeHighContrastColor(euiTheme.colors.text)(backgroundColor),
+    inlineCodeColor: makeHighContrastColor(visColors[3])(backgroundColor),
+    selectedBackgroundColor: 'inherit',
+    commentColor: makeHighContrastColor(euiTheme.colors.subduedText)(backgroundColor),
+    selectorTagColor: 'inherit',
+    stringColor: makeHighContrastColor(visColors[2])(backgroundColor),
+    tagColor: makeHighContrastColor(visColors[1])(backgroundColor),
+    nameColor: makeHighContrastColor(visColors[1])(backgroundColor),
+    numberColor: makeHighContrastColor(visColors[0])(backgroundColor),
+    keywordColor: makeHighContrastColor(visColors[3])(backgroundColor),
+    functionTitleColor: 'inherit',
+    typeColor: makeHighContrastColor(visColors[1])(backgroundColor),
+    attributeColor: 'inherit',
+    symbolColor: makeHighContrastColor(visColors[9])(backgroundColor),
+    paramsColor: 'inherit',
+    metaColor: makeHighContrastColor(euiTheme.colors.subduedText)(backgroundColor),
+    titleColor: makeHighContrastColor(visColors[7])(backgroundColor),
+    sectionColor: makeHighContrastColor(visColors[9])(backgroundColor),
+    additionColor: makeHighContrastColor(visColors[0])(backgroundColor),
+    deletionColor: makeHighContrastColor(euiTheme.colors.danger)(backgroundColor),
+    selectorClassColor: 'inherit',
+    selectorIdColor: 'inherit',
     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  }");
     }

package/optimize/es/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.styles.js

@@ -7,15 +7,17 @@
  */
 
 import { css } from '@emotion/react';
+import { shade } from '../../../services';
 import { logicalCSS } from '../../../global_styling';
 export var euiCollapsibleNavGroupStyles = function euiCollapsibleNavGroupStyles(_ref) {
-  var euiTheme = _ref.euiTheme;
+  var euiTheme = _ref.euiTheme,
+    colorMode = _ref.colorMode;
   return {
     euiCollapsibleNavGroup: /*#__PURE__*/css("&:not(:first-child){", logicalCSS('border-top', euiTheme.border.thin), ";};label:euiCollapsibleNavGroup;"),
     // Background colors
     none: /*#__PURE__*/css(";label:none;"),
-    light: /*#__PURE__*/css("background-color:", euiTheme.components.collapsibleNavGroupBackground, ";;label:light;"),
-    dark: /*#__PURE__*/css("background-color:", euiTheme.components.collapsibleNavGroupBackgroundDark, ";.euiCollapsibleNavGroup__title,.euiCollapsibleNavGroup__heading,.euiAccordion__arrow{color:", euiTheme.colors.ghost, ";};label:dark;"),
+    light: /*#__PURE__*/css("background-color:", euiTheme.colors.body, ";;label:light;"),
+    dark: /*#__PURE__*/css("background-color:", colorMode === 'DARK' ? shade(euiTheme.colors.lightestShade, 0.5) : shade(euiTheme.colors.darkestShade, 0.2), ";.euiCollapsibleNavGroup__title,.euiCollapsibleNavGroup__heading,.euiAccordion__arrow{color:", euiTheme.colors.ghost, ";};label:dark;"),
     // Header padding
     isCollapsible: /*#__PURE__*/css(".euiAccordion__triggerWrapper{padding:", euiTheme.size.base, ";};label:isCollapsible;"),
     notCollapsible: /*#__PURE__*/css(".euiCollapsibleNavGroup__heading{padding:", euiTheme.size.base, ";};label:notCollapsible;"),

package/optimize/es/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.styles.js

@@ -12,7 +12,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css } from '@emotion/react';
 import { logicalCSS, mathWithUnits, euiFontSize } from '../../../global_styling';
-import { euiButtonColor } from '../../../global_styling/mixins/_button';
+import { euiButtonColor } from '../../../themes/amsterdam/global_styling/mixins/button';
 
 /**
  * Style variables shared between accordion, link, and sub items

package/optimize/es/components/color_picker/color_palette_display/color_palette_display.styles.js

@@ -7,12 +7,13 @@
  */
 
 import { css } from '@emotion/react';
+import { transparentize } from '../../../services';
 import { logicalCSS } from '../../../global_styling';
 export var euiColorPaletteDisplayStyles = function euiColorPaletteDisplayStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
 
   // Border is a pseudo element with transparency
-  var border = "".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.borderBaseFormsColorSwatch);
+  var border = "".concat(euiTheme.border.width.thin, " solid ").concat(transparentize(euiTheme.colors.darkestShade, 0.2));
   return {
     euiColorPaletteDisplay: /*#__PURE__*/css("position:relative;display:flex;flex-direction:row;overflow:hidden;&::after{content:'';position:absolute;inset:0;pointer-events:none;border:", border, ";border-radius:inherit;};label:euiColorPaletteDisplay;"),
     // Sizes

package/optimize/es/components/color_picker/color_picker.js

@@ -12,7 +12,7 @@ import _typeof from "@babel/runtime/helpers/typeof";
 import React, { cloneElement, useEffect, useMemo, useRef, useState } from 'react';
 import classNames from 'classnames';
 import chroma from 'chroma-js';
-import { useEuiMemoizedStyles, keys, euiPaletteColorBlind, useEuiTheme } from '../../services';
+import { useEuiMemoizedStyles, VISUALIZATION_COLORS, keys } from '../../services';
 import { EuiFieldText, EuiFormControlLayout, EuiFormRow, EuiRange } from '../form';
 import { useEuiI18n } from '../i18n';
 import { EuiPopover } from '../popover';
@@ -72,7 +72,8 @@ export var EuiColorPicker = function EuiColorPicker(_ref) {
     onFocus = _ref.onFocus,
     _ref$readOnly = _ref.readOnly,
     readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-    _swatches = _ref.swatches,
+    _ref$swatches = _ref.swatches,
+    swatches = _ref$swatches === void 0 ? VISUALIZATION_COLORS : _ref$swatches,
     popoverZIndex = _ref.popoverZIndex,
     prepend = _ref.prepend,
     append = _ref.append,
@@ -94,13 +95,6 @@ export var EuiColorPicker = function EuiColorPicker(_ref) {
     alphaLabel = _useEuiI18n2[4],
     openLabel = _useEuiI18n2[5],
     closeLabel = _useEuiI18n2[6];
-  var _useEuiTheme = useEuiTheme(),
-    euiTheme = _useEuiTheme.euiTheme;
-  var swatches = useMemo(function () {
-    return _swatches !== null && _swatches !== void 0 ? _swatches : euiPaletteColorBlind();
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [_swatches, euiTheme]);
   var preferredFormat = useMemo(function () {
     if (format) return format;
     var parsed = parseColor(color);

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

@@ -7,6 +7,7 @@
  */
 
 import { css } from '@emotion/react';
+import { transparentize } from '../../services';
 import { logicalCSS, mathWithUnits } from '../../global_styling';
 export var euiColorPickerStyles = function euiColorPickerStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
@@ -21,6 +22,6 @@ export var euiColorPickerStyles = function euiColorPickerStyles(euiThemeContext)
     euiColorPicker__alphaRange: /*#__PURE__*/css(".euiRangeInput{", logicalCSS('min-width', 0), ";};label:euiColorPicker__alphaRange;"),
     // Adds a stroke color for the swatchInput icon. Unlike most EuiIcons it has a stroke in the SVG
     // Targets a custom className applied directly to the <svg> icon
-    euiColorPicker__swatchInputIcon: /*#__PURE__*/css(".euiSwatchInput__stroke{fill:none;stroke:", euiTheme.colors.borderBaseFormsColorSwatch, ";};label:euiColorPicker__swatchInputIcon;")
+    euiColorPicker__swatchInputIcon: /*#__PURE__*/css(".euiSwatchInput__stroke{fill:none;stroke:", transparentize(euiTheme.colors.fullShade, 0.2), ";};label:euiColorPicker__swatchInputIcon;")
   };
 };

package/optimize/es/components/color_picker/color_picker_swatch.styles.js

@@ -14,6 +14,6 @@ export var euiColorPickerSwatchStyles = function euiColorPickerSwatchStyles(euiT
   return {
     euiColorPickerSwatch: /*#__PURE__*/css("display:inline-block;", logicalSizeCSS(euiTheme.size.l), " border-radius:", mathWithUnits(euiTheme.border.radius.medium, function (x) {
       return x / 2;
-    }), ";border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.borderBaseFormsColorSwatch, ";box-shadow:inset 0 0 0 ", euiTheme.border.width.thin, " ", transparentize(euiTheme.colors.emptyShade, 0.05), ";cursor:pointer;&:disabled{cursor:default;}&:focus{", euiOutline(euiThemeContext, 'center'), ";};label:euiColorPickerSwatch;")
+    }), ";border:", euiTheme.border.width.thin, " solid ", transparentize(euiTheme.colors.fullShade, 0.1), ";box-shadow:inset 0 0 0 ", euiTheme.border.width.thin, " ", transparentize(euiTheme.colors.emptyShade, 0.05), ";cursor:pointer;&:disabled{cursor:default;}&:focus{", euiOutline(euiThemeContext, 'center'), ";};label:euiColorPickerSwatch;")
   };
 };

package/optimize/es/components/comment_list/comment_event.js

@@ -42,7 +42,7 @@ export var EuiCommentEvent = function EuiCommentEvent(_ref) {
     type = 'custom';
   }
   if (isTypeRegular && !eventColor) {
-    eventColor = 'highlighted';
+    eventColor = 'subdued';
   }
   if (isTypeUpdate && !eventColor) {
     eventColor = 'transparent';
@@ -63,12 +63,11 @@ export var EuiCommentEvent = function EuiCommentEvent(_ref) {
   /**
    * Styles
    */
-  var borderColor = eventColor === 'highlighted' ? 'subdued' : eventColor;
   var borderStyles = useEuiBorderColorCSS();
   var styles = useEuiMemoizedStyles(euiCommentEventStyles);
-  var cssStyles = [styles.euiCommentEvent, showEventBorders && styles.border, showEventBorders && borderStyles[borderColor]];
+  var cssStyles = [styles.euiCommentEvent, showEventBorders && styles.border, showEventBorders && borderStyles[eventColor]];
   var headerStyles = useEuiMemoizedStyles(euiCommentEventHeaderStyles);
-  var cssHeaderStyles = [headerStyles.euiCommentEvent__header, showEventBorders && headerStyles.border, showEventBorders && borderStyles[borderColor]];
+  var cssHeaderStyles = [headerStyles.euiCommentEvent__header, showEventBorders && headerStyles.border, showEventBorders && borderStyles[eventColor]];
   var bodyStyles = useEuiMemoizedStyles(euiCommentEventBodyStyles);
   var cssBodyStyles = [bodyStyles.euiCommentEvent__body, bodyStyles[type]];
   return ___EmotionJSX(Element, {