@elastic/eui 97.3.0-borealis.1 → 97.3.1

package/i18ntokens.json

@@ -995,14 +995,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 791,
+        "line": 794,
         "column": 8,
-        "index": 23154
+        "index": 23332
       },
       "end": {
-        "line": 794,
+        "line": 797,
         "column": 9,
-        "index": 23273
+        "index": 23451
       }
     },
     "filepath": "src/components/combo_box/combo_box.tsx"

package/lib/components/badge/badge.js

@@ -41,7 +41,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
 var ICON_SIDES = exports.ICON_SIDES = ['left', 'right'];
-var COLORS = exports.COLORS = ['default', 'hollow', 'primary', 'success', 'accent', 'accentSecondary', 'warning', 'danger'];
+var COLORS = exports.COLORS = ['default', 'hollow', 'primary', 'success', 'accent', 'warning', 'danger'];
 var EuiBadge = exports.EuiBadge = function EuiBadge(_ref) {
   var children = _ref.children,
     _ref$color = _ref.color,

package/lib/components/badge/badge.styles.js

@@ -6,6 +6,7 @@ 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
@@ -42,7 +43,6 @@ var euiBadgeStyles = exports.euiBadgeStyles = function euiBadgeStyles(euiThemeCo
     hollow: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.hollow), " border-color:", badgeColors.hollow.borderColor, ";;label:hollow;"),
     primary: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.primary), ";label:primary;"),
     accent: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.accent), ";label:accent;"),
-    accentSecondary: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.accentSecondary), ";label:accentSecondary;"),
     warning: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.warning), ";label:warning;"),
     danger: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.danger), ";label:danger;"),
     success: /*#__PURE__*/(0, _react.css)(setBadgeColorVars(badgeColors.success), ";label:success;"),
@@ -66,7 +66,7 @@ var euiBadgeStyles = exports.euiBadgeStyles = function euiBadgeStyles(euiThemeCo
     },
     // Clickable icons (iconOnClick)
     iconButton: {
-      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) {
+      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) {
         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/lib/components/badge/beta_badge/beta_badge.js

@@ -25,7 +25,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
-var COLORS = exports.COLORS = ['accent', 'accentSecondary', 'subdued', 'hollow'];
+var COLORS = exports.COLORS = ['accent', 'subdued', 'hollow'];
 var SIZES = exports.SIZES = ['s', 'm'];
 var ALIGNMENTS = exports.ALIGNMENTS = ['baseline', 'middle'];
 

package/lib/components/badge/beta_badge/beta_badge.styles.js

@@ -48,7 +48,6 @@ var euiBetaBadgeStyles = exports.euiBetaBadgeStyles = function euiBetaBadgeStyle
     }), ";};label:euiBetaBadge;"),
     // Colors
     accent: /*#__PURE__*/(0, _react.css)(badgeColors.accentText, ";label:accent;"),
-    accentSecondary: /*#__PURE__*/(0, _react.css)(badgeColors.accentSecondaryText, ";label:accentSecondary;"),
     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;"),
     // Font sizes

package/lib/components/badge/color_utils.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getTextColor = exports.getIsValidColor = exports.getColorContrast = exports.getBadgeColors = exports.euiBadgeColors = void 0;
 var _chromaJs = _interopRequireDefault(require("chroma-js"));
 var _services = require("../../services");
-var _button = require("../../global_styling/mixins/_button");
+var _mixins = require("../../themes/amsterdam/global_styling/mixins");
 var _utils = require("../color_picker/utils");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
@@ -28,26 +28,25 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
  * Side Public License, v 1.
  */
 var euiBadgeColors = exports.euiBadgeColors = function euiBadgeColors(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    colorMode = euiThemeContext.colorMode;
   return {
     // Colors shared between buttons and badges
-    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'),
+    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'),
     // Colors unique to badges
     default: getBadgeColors(euiThemeContext, euiTheme.colors.lightShade),
     // Hollow has a border and is used for autocompleters and beta badges
     hollow: _objectSpread(_objectSpread({}, getBadgeColors(euiThemeContext, euiTheme.colors.emptyShade)), {}, {
-      borderColor: euiTheme.components.badgeBorderColorHollow
+      borderColor: colorMode === 'DARK' ? (0, _services.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, (0, _services.tint)(euiTheme.colors.lightShade, 0.3)),
+    accentText: getBadgeColors(euiThemeContext, euiTheme.colors.accentText)
   };
 };
 var getBadgeColors = exports.getBadgeColors = function getBadgeColors(euiThemeContext, backgroundColor) {

package/lib/components/badge/notification_badge/badge_notification.js

@@ -22,7 +22,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
-var COLORS = exports.COLORS = ['accent', 'accentSecondary', 'subdued', 'success'];
+var COLORS = exports.COLORS = ['accent', 'subdued', 'success'];
 var SIZES = exports.SIZES = ['s', 'm'];
 var EuiNotificationBadge = exports.EuiNotificationBadge = function EuiNotificationBadge(_ref) {
   var children = _ref.children,

package/lib/components/badge/notification_badge/badge_notification.styles.js

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

package/lib/components/bottom_bar/bottom_bar.styles.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiBottomBarStyles = void 0;
 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;
 /*
@@ -22,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:", euiTheme.components.bottomBarBackground, ";", _global_styling.euiCanAnimate, "{animation:", euiBottomBarAppear, " ", euiTheme.animation.slow, " ", euiTheme.animation.resistance, ";};label:euiBottomBar;"),
+    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;"),
     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/lib/components/breadcrumbs/_breadcrumb_content.styles.js

@@ -5,8 +5,9 @@ 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("../../global_styling/mixins/_button");
+var _button = require("../../themes/amsterdam/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
@@ -19,7 +20,8 @@ var _button = require("../../global_styling/mixins/_button");
  * Styles cast to inner <a>, <button>, <span> elements
  */
 var euiBreadcrumbContentStyles = exports.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 = (0, _button.euiButtonColor)(euiThemeContext, 'primary');
@@ -27,8 +29,8 @@ 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: euiTheme.components.breadcrumbsApplicationBackground,
-    color: euiTheme.components.breadcrumbsApplicationColor
+    backgroundColor: (0, _color.tintOrShade)(euiTheme.colors.darkestShade, colorMode === 'DARK' ? 0.7 : 0.85, colorMode),
+    color: (0, _color.tintOrShade)(euiTheme.colors.darkestShade, 0.2, colorMode)
   };
   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;"),

package/lib/components/button/button.js

@@ -7,7 +7,7 @@ exports.SIZES = exports.EuiButton = exports.COLORS = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _button = require("../../global_styling/mixins/_button");
+var _button = require("../../themes/amsterdam/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/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("../../../global_styling/mixins");
+var _mixins = require("../../../themes/amsterdam/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/lib/components/button/button_empty/button_empty.js

@@ -10,7 +10,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("../../../global_styling/mixins/_button");
+var _button = require("../../../themes/amsterdam/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/lib/components/button/button_group/button_group_button.js

@@ -9,7 +9,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
 var _services = require("../../../services");
-var _button = require("../../../global_styling/mixins/_button");
+var _button = require("../../../themes/amsterdam/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/lib/components/button/button_group/button_group_button.styles.js

@@ -8,7 +8,7 @@ exports.euiButtonGroupButtonStyles = exports._compressedButtonFocusColors = void
 var _react = require("@emotion/react");
 var _services = require("../../../services");
 var _global_styling = require("../../../global_styling");
-var _button = require("../../../global_styling/mixins/_button");
+var _button = require("../../../themes/amsterdam/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; }
@@ -65,8 +65,8 @@ var euiButtonGroupButtonStyles = exports.euiButtonGroupButtonStyles = function e
       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;"),
       get borders() {
         var selectors = '.euiButtonGroupButton-isSelected, .euiButtonGroup__tooltipWrapper-isSelected';
-        var selectedColor = euiTheme.components.buttonGroupBorderColorSelected;
-        var unselectedColor = euiTheme.components.buttonGroupBorderColor;
+        var selectedColor = (0, _services.transparentize)(euiTheme.colors.emptyShade, 0.2);
+        var unselectedColor = (0, _services.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/lib/components/button/button_icon/button_icon.js

@@ -10,7 +10,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../../services");
 var _icon = require("../../icon");
 var _loading = require("../../loading");
-var _button = require("../../../global_styling/mixins/_button");
+var _button = require("../../../themes/amsterdam/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/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("../../global_styling/mixins");
+var _mixins = require("../../themes/amsterdam/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/lib/components/code/code_block_annotations.js

@@ -8,7 +8,7 @@ exports.EuiCodeBlockAnnotation = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _services = require("../../services");
-var _button = require("../../global_styling/mixins/_button");
+var _button = require("../../themes/amsterdam/global_styling/mixins/button");
 var _i18n = require("../i18n");
 var _popover = require("../popover");
 var _icon = require("../icon");

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

@@ -5,6 +5,7 @@ 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
@@ -42,7 +43,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:", euiTheme.colors.backgroundBasePrimary, ";border-inline-start:", euiTheme.border.width.thick, " solid ", euiTheme.colors.primary, ";;label:isHighlighted;")
+      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;")
     },
     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/lib/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.styles.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiCollapsibleNavGroupStyles = void 0;
 var _react = require("@emotion/react");
+var _services = require("../../../services");
 var _global_styling = require("../../../global_styling");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -15,13 +16,14 @@ var _global_styling = require("../../../global_styling");
  */
 
 var euiCollapsibleNavGroupStyles = exports.euiCollapsibleNavGroupStyles = function euiCollapsibleNavGroupStyles(_ref) {
-  var euiTheme = _ref.euiTheme;
+  var euiTheme = _ref.euiTheme,
+    colorMode = _ref.colorMode;
   return {
     euiCollapsibleNavGroup: /*#__PURE__*/(0, _react.css)("&:not(:first-child){", (0, _global_styling.logicalCSS)('border-top', euiTheme.border.thin), ";};label:euiCollapsibleNavGroup;"),
     // Background colors
     none: /*#__PURE__*/(0, _react.css)(";label:none;"),
-    light: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.components.collapsibleNavGroupBackground, ";;label:light;"),
-    dark: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.components.collapsibleNavGroupBackgroundDark, ";.euiCollapsibleNavGroup__title,.euiCollapsibleNavGroup__heading,.euiAccordion__arrow{color:", euiTheme.colors.ghost, ";};label:dark;"),
+    light: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.body, ";;label:light;"),
+    dark: /*#__PURE__*/(0, _react.css)("background-color:", colorMode === 'DARK' ? (0, _services.shade)(euiTheme.colors.lightestShade, 0.5) : (0, _services.shade)(euiTheme.colors.darkestShade, 0.2), ";.euiCollapsibleNavGroup__title,.euiCollapsibleNavGroup__heading,.euiAccordion__arrow{color:", euiTheme.colors.ghost, ";};label:dark;"),
     // Header padding
     isCollapsible: /*#__PURE__*/(0, _react.css)(".euiAccordion__triggerWrapper{padding:", euiTheme.size.base, ";};label:isCollapsible;"),
     notCollapsible: /*#__PURE__*/(0, _react.css)(".euiCollapsibleNavGroup__heading{padding:", euiTheme.size.base, ";};label:notCollapsible;"),

package/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.styles.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiCollapsibleNavTopItemStyles = exports.euiCollapsibleNavSubItemsStyles = exports.euiCollapsibleNavItemVariables = exports.euiCollapsibleNavItemTitleStyles = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../../global_styling");
-var _button = require("../../../global_styling/mixins/_button");
+var _button = require("../../../themes/amsterdam/global_styling/mixins/button");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }

package/lib/components/color_picker/color_palette_display/color_palette_display.styles.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiColorPaletteDisplayStyles = void 0;
 var _react = require("@emotion/react");
+var _services = require("../../../services");
 var _global_styling = require("../../../global_styling");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -18,7 +19,7 @@ var euiColorPaletteDisplayStyles = exports.euiColorPaletteDisplayStyles = functi
   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((0, _services.transparentize)(euiTheme.colors.darkestShade, 0.2));
   return {
     euiColorPaletteDisplay: /*#__PURE__*/(0, _react.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/lib/components/color_picker/color_picker.styles.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiColorPickerStyles = void 0;
 var _react = require("@emotion/react");
+var _services = require("../../services");
 var _global_styling = require("../../global_styling");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -27,6 +28,6 @@ var euiColorPickerStyles = exports.euiColorPickerStyles = function euiColorPicke
     euiColorPicker__alphaRange: /*#__PURE__*/(0, _react.css)(".euiRangeInput{", (0, _global_styling.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__*/(0, _react.css)(".euiSwatchInput__stroke{fill:none;stroke:", euiTheme.colors.borderBaseFormsColorSwatch, ";};label:euiColorPicker__swatchInputIcon;")
+    euiColorPicker__swatchInputIcon: /*#__PURE__*/(0, _react.css)(".euiSwatchInput__stroke{fill:none;stroke:", (0, _services.transparentize)(euiTheme.colors.fullShade, 0.2), ";};label:euiColorPicker__swatchInputIcon;")
   };
 };

package/lib/components/color_picker/color_picker_swatch.styles.js

@@ -20,6 +20,6 @@ var euiColorPickerSwatchStyles = exports.euiColorPickerSwatchStyles = function e
   return {
     euiColorPickerSwatch: /*#__PURE__*/(0, _react.css)("display:inline-block;", (0, _global_styling.logicalSizeCSS)(euiTheme.size.l), " border-radius:", (0, _global_styling.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, " ", (0, _services.transparentize)(euiTheme.colors.emptyShade, 0.05), ";cursor:pointer;&:disabled{cursor:default;}&:focus{", (0, _global_styling.euiOutline)(euiThemeContext, 'center'), ";};label:euiColorPickerSwatch;")
+    }), ";border:", euiTheme.border.width.thin, " solid ", (0, _services.transparentize)(euiTheme.colors.fullShade, 0.1), ";box-shadow:inset 0 0 0 ", euiTheme.border.width.thin, " ", (0, _services.transparentize)(euiTheme.colors.emptyShade, 0.05), ";cursor:pointer;&:disabled{cursor:default;}&:focus{", (0, _global_styling.euiOutline)(euiThemeContext, 'center'), ";};label:euiColorPickerSwatch;")
   };
 };

package/lib/components/common.js

@@ -35,6 +35,12 @@ function keysOf(obj) {
   return Object.keys(obj);
 }
 
+/**
+ * Like `keyof typeof`, but for getting values instead of keys
+ * ValueOf<typeof {key1: 'value1', key2: 'value2'}>
+ * Results in `'value1' | 'value2'`
+ */
+
 // Returns the props of a given HTML element
 
 // Utility methods for ApplyClassComponentDefaults
@@ -127,4 +133,26 @@ React.FunctionComponent<ExclusiveUnion<Spanlike, Buttonlike>>
  * type ButtonLike = PropsForButton<BaseProps>
  * type ComponentProps = ExclusiveUnion<AnchorLike, ButtonLike>
  * const Component: FunctionComponent<ComponentProps> ...
+ */
+
+/**
+ * Replaces all properties on any type as optional, includes nested types
+ *
+ * @example
+ * ```ts
+ * interface Person {
+ *  name: string;
+ *  age?: number;
+ *  spouse: Person;
+ *  children: Person[];
+ * }
+ * type PartialPerson = RecursivePartial<Person>;
+ * // results in
+ * interface PartialPerson {
+ *  name?: string;
+ *  age?: number;
+ *  spouse?: RecursivePartial<Person>;
+ *  children?: RecursivePartial<Person>[]
+ * }
+ * ```
  */

package/lib/components/datagrid/data_grid.styles.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiDataGridVariables = exports.euiDataGridStyles = void 0;
 var _react = require("@emotion/react");
+var _services = require("../../services");
 var _global_styling = require("../../global_styling");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -42,13 +43,14 @@ var euiDataGridVariables = exports.euiDataGridVariables = function euiDataGridVa
   };
 };
 var euiDataGridStyles = exports.euiDataGridStyles = function euiDataGridStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    colorMode = euiThemeContext.colorMode;
   var _euiDataGridVariables = euiDataGridVariables(euiThemeContext),
     _cellPadding = _euiDataGridVariables.cellPadding,
     lineHeight = _euiDataGridVariables.lineHeight,
     _fontSize = _euiDataGridVariables.fontSize;
   return {
-    euiDataGrid: /*#__PURE__*/(0, _react.css)("display:flex;flex-direction:column;align-items:stretch;", (0, _global_styling.logicalCSS)('height', '100%'), " overflow:hidden;*:where(& .euiDataGridRow){background-color:", euiTheme.colors.emptyShade, ";}*:where(&.euiDataGrid--stripes .euiDataGridRow--striped){background-color:", euiTheme.components.dataGridRowBackgroundStriped, ";}*:where(&.euiDataGrid--rowHoverHighlight .euiDataGridRow:hover){background-color:", euiTheme.components.dataGridRowBackgroundHover, ";};label:euiDataGrid;"),
+    euiDataGrid: /*#__PURE__*/(0, _react.css)("display:flex;flex-direction:column;align-items:stretch;", (0, _global_styling.logicalCSS)('height', '100%'), " overflow:hidden;*:where(& .euiDataGridRow){background-color:", euiTheme.colors.emptyShade, ";}*:where(&.euiDataGrid--stripes .euiDataGridRow--striped){background-color:", euiTheme.colors.lightestShade, ";}*:where(&.euiDataGrid--rowHoverHighlight .euiDataGridRow:hover){background-color:", euiTheme.colors.highlight, ";};label:euiDataGrid;"),
     cellPadding: {
       cellPadding: function cellPadding(size) {
         return /*#__PURE__*/(0, _react.css)(".euiDataGridHeaderCell,.euiDataGridRowCell__content{padding:", _cellPadding[size], ";}/* Workaround to trim line-clamp and padding - @see https://github.com/elastic/eui/issues/7780 */.euiDataGridRowCell__content--lineCountHeight,.euiDataGridRowCell__content--autoBelowLineCountHeight{", (0, _global_styling.logicalCSS)('padding-bottom', 0), " ", (0, _global_styling.logicalCSS)('border-bottom', "".concat(_cellPadding[size], " solid transparent")), ";}.euiDataGridHeaderCell__button{margin-block:-", _cellPadding[size], ";};label:cellPadding;");
@@ -82,7 +84,7 @@ var euiDataGridStyles = exports.euiDataGridStyles = function euiDataGridStyles(e
       none: null,
       horizontal: /*#__PURE__*/(0, _react.css)("label:borders;.euiDataGridRowCell:not(.euiDataGridFooterCell),.euiDataGridFooter,&:not(.euiDataGrid--headerUnderline) .euiDataGridHeader{", (0, _global_styling.logicalCSS)('border-bottom', euiTheme.border.thin), ";}&:not(.euiDataGrid--footerOverline) .euiDataGridFooter{", (0, _global_styling.logicalCSS)('border-top', euiTheme.border.thin), " ", (0, _global_styling.logicalCSS)('margin-top', "-".concat(euiTheme.border.width.thin)), ";}.euiDataGridHeader{", (0, _global_styling.logicalCSS)('border-top', euiTheme.border.thin), ";};label:horizontal;"),
       all: /*#__PURE__*/(0, _react.css)("label:borders;.euiDataGridRowCell{&:not(.euiDataGridFooterCell){", (0, _global_styling.logicalCSS)('border-bottom', euiTheme.border.thin), " ", (0, _global_styling.logicalCSS)('border-right', // Visually lighten vertical borders
-      "".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.components.dataGridVerticalLineBorderColor)), ";}&--firstColumn{", (0, _global_styling.logicalCSS)('border-left', euiTheme.border.thin), ";}&--lastColumn{", (0, _global_styling.logicalCSS)('border-right-color', euiTheme.border.color), ";}}.euiDataGridFooterCell,.euiDataGridHeaderCell{", (0, _global_styling.logicalCSS)('border-right', euiTheme.border.thin), " &:first-of-type{", (0, _global_styling.logicalCSS)('border-left', euiTheme.border.thin), ";}}.euiDataGridFooter{", (0, _global_styling.logicalCSS)('border-bottom', euiTheme.border.thin), ";}&:not(.euiDataGrid--footerOverline) .euiDataGridFooter{", (0, _global_styling.logicalCSS)('border-top', euiTheme.border.thin), " ", (0, _global_styling.logicalCSS)('margin-top', "-".concat(euiTheme.border.width.thin)), ";}&:not(.euiDataGrid--headerUnderline) .euiDataGridHeader{", (0, _global_styling.logicalCSS)('border-bottom', euiTheme.border.thin), ";}&:is(.euiDataGrid--noControls) .euiDataGridHeader{", (0, _global_styling.logicalCSS)('border-top', euiTheme.border.thin), ";}.euiDataGrid__controls{border:", euiTheme.border.thin, ";background-color:", euiTheme.colors.body, ";};label:all;")
+      "".concat(euiTheme.border.width.thin, " solid ").concat((0, _services.tintOrShade)(euiTheme.border.color, 0.3, colorMode))), ";}&--firstColumn{", (0, _global_styling.logicalCSS)('border-left', euiTheme.border.thin), ";}&--lastColumn{", (0, _global_styling.logicalCSS)('border-right-color', euiTheme.border.color), ";}}.euiDataGridFooterCell,.euiDataGridHeaderCell{", (0, _global_styling.logicalCSS)('border-right', euiTheme.border.thin), " &:first-of-type{", (0, _global_styling.logicalCSS)('border-left', euiTheme.border.thin), ";}}.euiDataGridFooter{", (0, _global_styling.logicalCSS)('border-bottom', euiTheme.border.thin), ";}&:not(.euiDataGrid--footerOverline) .euiDataGridFooter{", (0, _global_styling.logicalCSS)('border-top', euiTheme.border.thin), " ", (0, _global_styling.logicalCSS)('margin-top', "-".concat(euiTheme.border.width.thin)), ";}&:not(.euiDataGrid--headerUnderline) .euiDataGridHeader{", (0, _global_styling.logicalCSS)('border-bottom', euiTheme.border.thin), ";}&:is(.euiDataGrid--noControls) .euiDataGridHeader{", (0, _global_styling.logicalCSS)('border-top', euiTheme.border.thin), ";}.euiDataGrid__controls{border:", euiTheme.border.thin, ";background-color:", euiTheme.colors.body, ";};label:all;")
     },
     // Sits below the controls above it and pagination below it
     euiDataGrid__content: /*#__PURE__*/(0, _react.css)("z-index:1;position:relative;flex-grow:1;", (0, _global_styling.logicalSizeCSS)('100%'), " ", (0, _global_styling.logicalCSS)('max-width', '100%'), " overflow:hidden;background-color:", euiTheme.colors.body, ";font-feature-settings:'tnum' 1;;label:euiDataGrid__content;"),

package/lib/components/date_picker/react_date_picker.styles.js

@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiReactDatePickerStyles = exports.euiDatePickerVariables = exports._timeSelectStyles = exports._monthYearDropdowns = exports._dayCalendarStyles = void 0;
 var _css = require("@emotion/css");
 var _global_styling = require("../../global_styling");
-var _mixins = require("../../global_styling/mixins");
-var _mixins2 = require("../../themes/amsterdam/global_styling/mixins");
+var _mixins = require("../../themes/amsterdam/global_styling/mixins");
 var _form = require("../form/form.styles");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -55,7 +54,7 @@ var _monthYearDropdowns = exports._monthYearDropdowns = function _monthYearDropd
   var formStyles = (0, _form.euiFormControlStyles)(euiThemeContext);
   return /*#__PURE__*/(0, _css.css)(".react-datepicker__year-read-view,.react-datepicker__month-read-view,.react-datepicker__month-year-read-view{display:flex;justify-content:space-between;align-items:center;", formStyles.compressed, " ", (0, _form.euiFormControlText)(euiThemeContext), " font-weight:", euiTheme.font.weight.medium, ";", (0, _form.euiFormControlDefaultShadow)(euiThemeContext), " &:hover{cursor:pointer;text-decoration:underline;}}.react-datepicker__year-dropdown-container{position:relative;flex-grow:1;}.react-datepicker__month-dropdown-container{position:relative;flex-grow:2;}.react-datepicker__year-dropdown,.react-datepicker__month-dropdown{z-index:1;position:absolute;", (0, _global_styling.euiYScroll)(euiThemeContext, {
     height: 'auto'
-  }), " ", (0, _global_styling.logicalCSS)('max-height', '250px'), " ", (0, _global_styling.logicalCSS)('width', '100%'), " padding:", euiTheme.size.xs, ";background-color:", euiTheme.colors.emptyShade, ";border-radius:", euiTheme.border.radius.medium, ";", (0, _mixins2.euiShadowSmall)(euiThemeContext), ";}.react-datepicker__year-dropdown{", (0, _global_styling.logicalCSS)('min-width', '100px'), ";}.react-datepicker__month-dropdown{", (0, _global_styling.logicalCSS)('min-width', '140px'), ";}.react-datepicker__year-option,.react-datepicker__month-option,.react-datepicker__month-year-option{", (0, _global_styling.logicalCSS)('margin-vertical', euiTheme.size.xs), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.s), " ", (0, _global_styling.logicalCSS)('height', euiTheme.size.l), " line-height:", euiTheme.size.l, ";font-size:", (0, _global_styling.euiFontSize)(euiThemeContext, 's').fontSize, ";border-radius:", euiTheme.border.radius.small, ";cursor:pointer;&:hover{text-decoration:underline;}&--preselected{background-color:", euiTheme.focus.backgroundColor, ";}&--selected_year,&--selected_month{", (0, _mixins.euiButtonFillColor)(euiThemeContext, 'primary'), ";}&--selected{display:none;}}");
+  }), " ", (0, _global_styling.logicalCSS)('max-height', '250px'), " ", (0, _global_styling.logicalCSS)('width', '100%'), " padding:", euiTheme.size.xs, ";background-color:", euiTheme.colors.emptyShade, ";border-radius:", euiTheme.border.radius.medium, ";", (0, _mixins.euiShadowSmall)(euiThemeContext), ";}.react-datepicker__year-dropdown{", (0, _global_styling.logicalCSS)('min-width', '100px'), ";}.react-datepicker__month-dropdown{", (0, _global_styling.logicalCSS)('min-width', '140px'), ";}.react-datepicker__year-option,.react-datepicker__month-option,.react-datepicker__month-year-option{", (0, _global_styling.logicalCSS)('margin-vertical', euiTheme.size.xs), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.s), " ", (0, _global_styling.logicalCSS)('height', euiTheme.size.l), " line-height:", euiTheme.size.l, ";font-size:", (0, _global_styling.euiFontSize)(euiThemeContext, 's').fontSize, ";border-radius:", euiTheme.border.radius.small, ";cursor:pointer;&:hover{text-decoration:underline;}&--preselected{background-color:", euiTheme.focus.backgroundColor, ";}&--selected_year,&--selected_month{", (0, _mixins.euiButtonFillColor)(euiThemeContext, 'primary'), ";}&--selected{display:none;}}");
 };
 var _dayCalendarStyles = exports._dayCalendarStyles = function _dayCalendarStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;

package/lib/components/date_picker/super_date_picker/date_popover/date_popover_button.js

@@ -92,7 +92,9 @@ var EuiDatePopoverButton = exports.EuiDatePopoverButton = function EuiDatePopove
     anchorPosition: position === 'start' ? 'downLeft' : 'downRight',
     display: "block",
     panelPaddingSize: "none"
-  }, rest), (0, _react2.jsx)(_date_popover_content.EuiDatePopoverContent, {
+  }, rest, {
+    css: value === 'now' && styles.now
+  }), (0, _react2.jsx)(_date_popover_content.EuiDatePopoverContent, {
     value: value,
     roundUp: roundUp,
     canRoundRelativeUnits: canRoundRelativeUnits,

package/lib/components/date_picker/super_date_picker/date_popover/date_popover_button.styles.js

@@ -6,16 +6,24 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiDatePopoverButtonStyles = void 0;
 var _react = require("@emotion/react");
 var _super_date_picker = require("../super_date_picker.styles");
-/*
+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
  * 2.0 and the Server Side Public License, v 1; you may not use this file except
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "170kc3d-now",
+  styles: "flex-grow:0.5!important;label:now;"
+} : {
+  name: "170kc3d-now",
+  styles: "flex-grow:0.5!important;label:now;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
 var euiDatePopoverButtonStyles = exports.euiDatePopoverButtonStyles = function euiDatePopoverButtonStyles(euiThemeContext) {
   return {
-    euiDatePopoverButton: /*#__PURE__*/(0, _react.css)((0, _super_date_picker._buttonStyles)(euiThemeContext), ";;label:euiDatePopoverButton;")
+    euiDatePopoverButton: /*#__PURE__*/(0, _react.css)((0, _super_date_picker._buttonStyles)(euiThemeContext), ";;label:euiDatePopoverButton;"),
+    now: _ref
   };
 };

package/lib/components/date_picker/super_date_picker/super_date_picker.styles.js

@@ -24,7 +24,8 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 var euiSuperDatePickerStyles = exports.euiSuperDatePickerStyles = function euiSuperDatePickerStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    colorMode = euiThemeContext.colorMode;
   var forms = (0, _form.euiFormVariables)(euiThemeContext);
   var inputWidth = euiTheme.base * 30;
   var buttonWidth = euiTheme.base * 7; // @see _button_display.styles.ts
@@ -42,7 +43,7 @@ var euiSuperDatePickerStyles = exports.euiSuperDatePickerStyles = function euiSu
   });
 
   // Needs updating colors
-  var needsUpdatingBackgroundColor = euiTheme.components.superDatePickerBackgroundSuccees;
+  var needsUpdatingBackgroundColor = colorMode === 'DARK' ? (0, _services.shade)(euiTheme.colors.success, 0.7) : (0, _services.tint)(euiTheme.colors.success, 0.9);
   var needsUpdatingTextColor = (0, _services.makeHighContrastColor)(euiTheme.colors.success)(needsUpdatingBackgroundColor);
   return {
     euiSuperDatePicker: /*#__PURE__*/(0, _react.css)("display:flex;gap:", gap, ";", (0, _global_styling.logicalCSS)('max-width', '100%'), " ", (0, _global_styling.euiMaxBreakpoint)(euiThemeContext, 'm'), "{", (0, _global_styling.logicalCSS)('width', '100%'), ";};label:euiSuperDatePicker;"),
@@ -67,7 +68,7 @@ var euiSuperDatePickerStyles = exports.euiSuperDatePickerStyles = function euiSu
     // isQuickSelectOnly forces `width` to be `auto`
     isQuickSelectOnly: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', 0), ".euiFormControlLayout__prepend{", (0, _global_styling.logicalCSS)('max-width', 'none'), ";};label:isQuickSelectOnly;"),
     euiSuperDatePicker__range: _ref,
-    euiSuperDatePicker__rangeInput: /*#__PURE__*/(0, _react.css)("flex-grow:1;", (0, _global_styling.logicalCSS)('width', 'auto'), ";;label:euiSuperDatePicker__rangeInput;"),
+    euiSuperDatePicker__rangeInput: /*#__PURE__*/(0, _react.css)("flex-grow:1;", (0, _global_styling.logicalCSS)('width', 'auto'), " overflow:hidden;;label:euiSuperDatePicker__rangeInput;"),
     euiSuperDatePicker__prettyFormat: /*#__PURE__*/(0, _react.css)(_buttonStyles(euiThemeContext), " text-align:start;;label:euiSuperDatePicker__prettyFormat;"),
     // Form states
     states: {

package/lib/components/drag_and_drop/droppable.styles.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.sharedSpacingPadding = exports.euiDroppableStyles = void 0;
 var _react = require("@emotion/react");
+var _services = require("../../services");
 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
@@ -31,10 +32,11 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
 };
 var euiDroppableStyles = exports.euiDroppableStyles = function euiDroppableStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  var droppableColor = euiTheme.colors.success;
   return {
     euiDroppable: /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{transition:background-color ", euiTheme.animation.slow, " ease;};label:euiDroppable;"),
-    isDragging: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.components.dragDropDraggingBackground, ";;label:isDragging;"),
-    isDraggingOver: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.components.dragDropDraggingOverBackground, ";;label:isDraggingOver;"),
+    isDragging: /*#__PURE__*/(0, _react.css)("background-color:", (0, _services.transparentize)(droppableColor, 0.1), ";;label:isDragging;"),
+    isDraggingOver: /*#__PURE__*/(0, _react.css)("background-color:", (0, _services.transparentize)(droppableColor, 0.25), ";;label:isDraggingOver;"),
     grow: _ref2,
     noGrow: _ref,
     spacing: sharedSpacingPadding(euiThemeContext)