@elastic/eui 99.4.0 → 100.0.0

package/test-env/components/code/code_block_annotations.js

@@ -12,7 +12,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 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/test-env/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/test-env/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,37 +12,34 @@ 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),
-    inlineCodeKeywordColor: (0, _services.makeHighContrastColor)(visColors[6])(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,
+    inlineCodeKeywordColor: euiTheme.components.codeInlineCodeKeywordColor,
+    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  }");
     }

package/test-env/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.styles.js

@@ -5,7 +5,6 @@ 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
@@ -16,14 +15,13 @@ var _global_styling = require("../../../global_styling");
  */
 
 var euiCollapsibleNavGroupStyles = exports.euiCollapsibleNavGroupStyles = function euiCollapsibleNavGroupStyles(_ref) {
-  var euiTheme = _ref.euiTheme,
-    colorMode = _ref.colorMode;
+  var euiTheme = _ref.euiTheme;
   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.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;"),
+    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;"),
     // 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/test-env/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.styles.js

@@ -8,7 +8,7 @@ exports.euiCollapsibleNavTopItemStyles = exports.euiCollapsibleNavSubItemsStyles
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _global_styling = require("../../../global_styling");
-var _button = require("../../../themes/amsterdam/global_styling/mixins/button");
+var _button = require("../../../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) { (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; }
 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)."; } /*

package/test-env/components/color_picker/color_palette_display/color_palette_display.styles.js

@@ -5,7 +5,6 @@ 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
@@ -19,7 +18,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((0, _services.transparentize)(euiTheme.colors.darkestShade, 0.2));
+  var border = "".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.borderBaseFormsColorSwatch);
   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/test-env/components/color_picker/color_picker.js

@@ -83,8 +83,7 @@ var EuiColorPicker = exports.EuiColorPicker = function EuiColorPicker(_ref) {
     onFocus = _ref.onFocus,
     _ref$readOnly = _ref.readOnly,
     readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-    _ref$swatches = _ref.swatches,
-    swatches = _ref$swatches === void 0 ? _services.VISUALIZATION_COLORS : _ref$swatches,
+    _swatches = _ref.swatches,
     popoverZIndex = _ref.popoverZIndex,
     prepend = _ref.prepend,
     append = _ref.append,
@@ -106,6 +105,8 @@ var EuiColorPicker = exports.EuiColorPicker = function EuiColorPicker(_ref) {
     alphaLabel = _useEuiI18n2[4],
     openLabel = _useEuiI18n2[5],
     closeLabel = _useEuiI18n2[6];
+  var defaultSwatches = (0, _services.useEuiPaletteColorBlind)();
+  var swatches = _swatches !== null && _swatches !== void 0 ? _swatches : defaultSwatches;
   var preferredFormat = (0, _react.useMemo)(function () {
     if (format) return format;
     var parsed = (0, _utils.parseColor)(color);

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

@@ -5,7 +5,6 @@ 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
@@ -28,6 +27,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:", (0, _services.transparentize)(euiTheme.colors.fullShade, 0.2), ";};label:euiColorPicker__swatchInputIcon;")
+    euiColorPicker__swatchInputIcon: /*#__PURE__*/(0, _react.css)(".euiSwatchInput__stroke{fill:none;stroke:", euiTheme.colors.borderBaseFormsColorSwatch, ";};label:euiColorPicker__swatchInputIcon;")
   };
 };

package/test-env/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 ", (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;")
+    }), ";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;")
   };
 };

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

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.EuiComboBox = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
@@ -246,7 +247,11 @@ var EuiComboBox = exports.EuiComboBox = /*#__PURE__*/function (_Component) {
       var searchValue = _this.state.searchValue;
       var delimiter = _this.props.delimiter;
       if (delimiter) {
-        searchValue.split(delimiter).forEach(function (option) {
+        var trimmed = searchValue.split(delimiter).map(function (value) {
+          return value.trim();
+        });
+        var values = (0, _toConsumableArray2.default)(new Set((0, _toConsumableArray2.default)(trimmed)));
+        values.forEach(function (option) {
           if (option.length > 0) _this.addCustomOption(isContainerBlur, option);
         });
       } else {

package/test-env/components/comment_list/comment.js

@@ -89,7 +89,7 @@ EuiComment.propTypes = {
   /**
      * Background color for the comment's header.
      */
-  eventColor: _propTypes.default.any,
+  eventColor: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf(["highlighted"])]),
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,

package/test-env/components/comment_list/comment_event.js

@@ -53,7 +53,7 @@ var EuiCommentEvent = exports.EuiCommentEvent = function EuiCommentEvent(_ref) {
     type = 'custom';
   }
   if (isTypeRegular && !eventColor) {
-    eventColor = 'subdued';
+    eventColor = 'highlighted';
   }
   if (isTypeUpdate && !eventColor) {
     eventColor = 'transparent';
@@ -74,11 +74,12 @@ var EuiCommentEvent = exports.EuiCommentEvent = function EuiCommentEvent(_ref) {
   /**
    * Styles
    */
+  var borderColor = eventColor === 'highlighted' ? 'subdued' : eventColor;
   var borderStyles = (0, _global_styling.useEuiBorderColorCSS)();
   var styles = (0, _services.useEuiMemoizedStyles)(_comment_event.euiCommentEventStyles);
-  var cssStyles = [styles.euiCommentEvent, showEventBorders && styles.border, showEventBorders && borderStyles[eventColor]];
+  var cssStyles = [styles.euiCommentEvent, showEventBorders && styles.border, showEventBorders && borderStyles[borderColor]];
   var headerStyles = (0, _services.useEuiMemoizedStyles)(_comment_event.euiCommentEventHeaderStyles);
-  var cssHeaderStyles = [headerStyles.euiCommentEvent__header, showEventBorders && headerStyles.border, showEventBorders && borderStyles[eventColor]];
+  var cssHeaderStyles = [headerStyles.euiCommentEvent__header, showEventBorders && headerStyles.border, showEventBorders && borderStyles[borderColor]];
   var bodyStyles = (0, _services.useEuiMemoizedStyles)(_comment_event.euiCommentEventBodyStyles);
   var cssBodyStyles = [bodyStyles.euiCommentEvent__body, bodyStyles[type]];
   return (0, _react2.jsx)(Element, {
@@ -151,7 +152,7 @@ EuiCommentEvent.propTypes = {
   /**
      * Background color for the comment's header.
      */
-  eventColor: _propTypes.default.any,
+  eventColor: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf(["highlighted"])]),
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,

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

@@ -83,7 +83,7 @@ EuiCommentList.propTypes = {
     /**
        * Background color for the comment's header.
        */
-    eventColor: _propTypes.default.any,
+    eventColor: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf(["highlighted"])]),
     className: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.string]),
     "aria-label": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.string]),
     "data-test-subj": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.string]),

package/test-env/components/common.js

@@ -35,12 +35,6 @@ 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
@@ -133,26 +127,4 @@ 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/test-env/components/datagrid/data_grid.styles.js

@@ -5,7 +5,6 @@ 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
@@ -43,14 +42,14 @@ var euiDataGridVariables = exports.euiDataGridVariables = function euiDataGridVa
   };
 };
 var euiDataGridStyles = exports.euiDataGridStyles = function euiDataGridStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme,
-    colorMode = euiThemeContext.colorMode;
+  var euiTheme = euiThemeContext.euiTheme;
   var _euiDataGridVariables = euiDataGridVariables(euiThemeContext),
     _cellPadding = _euiDataGridVariables.cellPadding,
     lineHeight = _euiDataGridVariables.lineHeight,
     _fontSize = _euiDataGridVariables.fontSize;
+  var border = "".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.components.dataGridBorderColor);
   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.colors.lightestShade, ";}*:where(&.euiDataGrid--rowHoverHighlight .euiDataGridRow:hover){background-color:", euiTheme.colors.highlight, ";};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.components.dataGridRowBackgroundStriped, ";}*:where(&.euiDataGrid--rowHoverHighlight .euiDataGridRow:hover){background-color:", euiTheme.components.dataGridRowBackgroundHover, ";};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,9 +81,9 @@ var euiDataGridStyles = exports.euiDataGridStyles = function euiDataGridStyles(e
     },
     borders: {
       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((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;")
+      horizontal: /*#__PURE__*/(0, _react.css)("label:borders;.euiDataGridRowCell:not(.euiDataGridFooterCell),.euiDataGridFooter,&:not(.euiDataGrid--headerUnderline) .euiDataGridHeader{", (0, _global_styling.logicalCSS)('border-bottom', border), ";}&:not(.euiDataGrid--footerOverline) .euiDataGridFooter{", (0, _global_styling.logicalCSS)('border-top', border), " ", (0, _global_styling.logicalCSS)('margin-top', "-".concat(euiTheme.border.width.thin)), ";}.euiDataGridHeader{", (0, _global_styling.logicalCSS)('border-top', border), ";};label:horizontal;"),
+      all: /*#__PURE__*/(0, _react.css)("label:borders;.euiDataGridRowCell{&:not(.euiDataGridFooterCell){", (0, _global_styling.logicalCSS)('border-bottom', border), " ", (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', border), ";}&--lastColumn{", (0, _global_styling.logicalCSS)('border-right-color', euiTheme.components.dataGridBorderColor), ";}}.euiDataGridFooterCell,.euiDataGridHeaderCell{", (0, _global_styling.logicalCSS)('border-right', border), " &:first-of-type{", (0, _global_styling.logicalCSS)('border-left', border), ";}}.euiDataGridFooter{", (0, _global_styling.logicalCSS)('border-bottom', border), ";}&:not(.euiDataGrid--footerOverline) .euiDataGridFooter{", (0, _global_styling.logicalCSS)('border-top', border), " ", (0, _global_styling.logicalCSS)('margin-top', "-".concat(euiTheme.border.width.thin)), ";}&:not(.euiDataGrid--headerUnderline) .euiDataGridHeader{", (0, _global_styling.logicalCSS)('border-bottom', border), ";}&:is(.euiDataGrid--noControls) .euiDataGridHeader{", (0, _global_styling.logicalCSS)('border-top', border), ";}.euiDataGrid__controls{border:", border, ";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;font-feature-settings:'tnum' 1;;label:euiDataGrid__content;"),

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

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiDatePickerStyles = void 0;
 var _react = require("@emotion/react");
+var _euiThemeCommon = require("@elastic/eui-theme-common");
 var _global_styling = require("../../global_styling");
-var _mixins = require("../../themes/amsterdam/global_styling/mixins");
 var _form = require("../form/form.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
@@ -31,7 +31,7 @@ var euiDatePickerStyles = exports.euiDatePickerStyles = function euiDatePickerSt
       inline: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout{", (0, _global_styling.logicalCSS)('height', 'auto'), " ", (0, _global_styling.logicalCSS)('width', 'fit-content'), " border:none;padding:0;}.euiFormControlLayout__childrenWrapper{flex-direction:column;}.euiFormControlLayoutIcons{justify-content:center;", (0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.s), ";};label:inline;"),
       // Skip css`` to avoid generating an Emotion className
       noShadow: "\n        .euiFormControlLayout {\n          background-color: transparent;\n        }\n      ",
-      shadow: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout{background-color:", euiTheme.colors.emptyShade, ";", (0, _mixins.euiShadowMedium)(euiThemeContext), ";};label:shadow;"),
+      shadow: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout{background-color:", euiTheme.colors.emptyShade, ";", (0, _euiThemeCommon.euiShadowMedium)(euiThemeContext), ";};label:shadow;"),
       // Needs to come before shadow CSS so that it doesn't override their background-colors
       invalid: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout{", (0, _form.euiFormControlDefaultShadow)(euiThemeContext, {
         withBorder: false

package/test-env/components/date_picker/date_picker_range.styles.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiDatePickerRangeStyles = exports.euiDatePickerRangeInlineStyles = void 0;
 var _react = require("@emotion/react");
+var _euiThemeCommon = require("@elastic/eui-theme-common");
 var _global_styling = require("../../global_styling");
-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
@@ -39,7 +39,7 @@ var euiDatePickerRangeInlineStyles = exports.euiDatePickerRangeInlineStyles = fu
     euiDatePickerRangeInline: /*#__PURE__*/(0, _react.css)(".euiFormControlLayoutDelimited{", (0, _global_styling.logicalCSS)('height', 'auto'), " ", (0, _global_styling.logicalCSS)('width', 'fit-content'), " ", (0, _global_styling.logicalCSS)('max-width', '100%'), " border:none;padding:0;.euiFormControlLayout__childrenWrapper{display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto;align-items:stretch;background-color:transparent;}.euiFormControlLayoutIcons{justify-content:center;grid-column:1/span 3;", (0, _global_styling.logicalCSS)('height', 'auto'), " ", (0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.s), ";}}.react-datepicker{position:relative;};label:euiDatePickerRangeInline;"),
     responsive: /*#__PURE__*/(0, _react.css)(containerQuery(268), ";;label:responsive;"),
     responsiveWithTimeSelect: /*#__PURE__*/(0, _react.css)(containerQuery(374), ";;label:responsiveWithTimeSelect;"),
-    shadow: /*#__PURE__*/(0, _react.css)(".euiFormControlLayoutDelimited{", (0, _mixins.euiShadowMedium)(euiThemeContext), ";};label:shadow;"),
+    shadow: /*#__PURE__*/(0, _react.css)(".euiFormControlLayoutDelimited{", (0, _euiThemeCommon.euiShadowMedium)(euiThemeContext), ";};label:shadow;"),
     // Applied directly to EuiFormControlLayout so we can check if `disabled`
     // and allow the disabled background-color to take precedence
     formLayout: {

package/test-env/components/date_picker/react_date_picker.styles.js

@@ -5,8 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiReactDatePickerStyles = exports.euiDatePickerVariables = exports._timeSelectStyles = exports._monthYearDropdowns = exports._dayCalendarStyles = void 0;
 var _css = require("@emotion/css");
+var _euiThemeCommon = require("@elastic/eui-theme-common");
 var _global_styling = require("../../global_styling");
-var _mixins = require("../../themes/amsterdam/global_styling/mixins");
+var _mixins = require("../../global_styling/mixins");
 var _form = require("../form/form.styles");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -54,7 +55,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, _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;}}");
+  }), " ", (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, _euiThemeCommon.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/test-env/components/date_picker/super_date_picker/super_date_picker.styles.js

@@ -24,8 +24,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 var euiSuperDatePickerStyles = exports.euiSuperDatePickerStyles = function euiSuperDatePickerStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme,
-    colorMode = euiThemeContext.colorMode;
+  var euiTheme = euiThemeContext.euiTheme;
   var forms = (0, _form.euiFormVariables)(euiThemeContext);
   var inputWidth = euiTheme.base * 30;
   var buttonWidth = euiTheme.base * 7; // @see _button_display.styles.ts
@@ -43,7 +42,7 @@ var euiSuperDatePickerStyles = exports.euiSuperDatePickerStyles = function euiSu
   });
 
   // Needs updating colors
-  var needsUpdatingBackgroundColor = colorMode === 'DARK' ? (0, _services.shade)(euiTheme.colors.success, 0.7) : (0, _services.tint)(euiTheme.colors.success, 0.9);
+  var needsUpdatingBackgroundColor = euiTheme.components.superDatePickerBackgroundSuccees;
   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;"),
@@ -75,7 +74,7 @@ var euiSuperDatePickerStyles = exports.euiSuperDatePickerStyles = function euiSu
       euiSuperDatePicker__formControlLayout: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{", (0, _form.euiFormControlDefaultShadow)(euiThemeContext), " box-shadow:none;};label:euiSuperDatePicker__formControlLayout;"),
       default: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{color:", forms.textColor, ";background-color:", forms.backgroundColor, ";}.euiDatePopoverButton{", (0, _form.euiFormControlDefaultShadow)(euiThemeContext), " box-shadow:none;}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{--euiFormControlStateColor:", euiTheme.colors.primary, ";background-size:100% 100%;};label:default;"),
       disabled: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{", (0, _form.euiFormControlDisabledStyles)(euiThemeContext), ";};label:disabled;"),
-      invalid: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{color:", euiTheme.colors.dangerText, ";background-color:", forms.backgroundColor, ";", (0, _form.euiFormControlInvalidStyles)(euiThemeContext), ";};label:invalid;"),
+      invalid: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{color:", euiTheme.colors.textDanger, ";background-color:", forms.backgroundColor, ";", (0, _form.euiFormControlInvalidStyles)(euiThemeContext), ";};label:invalid;"),
       needsUpdating: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{color:", needsUpdatingTextColor, ";background-color:", needsUpdatingBackgroundColor, ";}.euiFormControlLayoutDelimited__delimiter{color:inherit;}.euiDatePopoverButton{", (0, _form.euiFormControlDefaultShadow)(euiThemeContext), " background-color:inherit;box-shadow:none;}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{--euiFormControlStateColor:", euiTheme.colors.success, ";background-size:100% 100%;};label:needsUpdating;")
     }
   };

package/test-env/components/drag_and_drop/droppable.styles.js

@@ -5,7 +5,6 @@ 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
@@ -32,11 +31,10 @@ 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:", (0, _services.transparentize)(droppableColor, 0.1), ";;label:isDragging;"),
-    isDraggingOver: /*#__PURE__*/(0, _react.css)("background-color:", (0, _services.transparentize)(droppableColor, 0.25), ";;label:isDraggingOver;"),
+    isDragging: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.components.dragDropDraggingBackground, ";;label:isDragging;"),
+    isDraggingOver: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.components.dragDropDraggingOverBackground, ";;label:isDraggingOver;"),
     grow: _ref2,
     noGrow: _ref,
     spacing: sharedSpacingPadding(euiThemeContext)

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

@@ -143,7 +143,7 @@ EuiEmptyPrompt.propTypes = {
      * Background color of the panel;
      * Usually a lightened form of the brand colors
      */
-  color: _propTypes.default.any,
+  color: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf(["highlighted"])]),
   /*
        * Accepts any [EuiIcon.type](#/display/icons)
        */

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

@@ -8,6 +8,7 @@ exports.euiEmptyPromptStyles = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
+var _euiThemeCommon = require("@elastic/eui-theme-common");
 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; }
 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)."; } /*
@@ -72,7 +73,8 @@ var euiEmptyPromptStyles = exports.euiEmptyPromptStyles = function euiEmptyPromp
     };
   };
   var generateFooterBorder = function generateFooterBorder(color) {
-    return "".concat(euiTheme.border.width.thin, " solid ").concat((0, _global_styling.euiBorderColor)(euiThemeContext, color));
+    var borderToken = (0, _euiThemeCommon.getTokenName)(['plain', 'subdued'].includes(color) ? 'borderBase' : 'borderStrong', color);
+    return "".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors[borderToken]);
   };
   return {
     euiEmptyPrompt: /*#__PURE__*/(0, _react.css)("text-align:center;margin:auto;", (0, _global_styling.euiMinBreakpoint)(euiThemeContext, 'l'), "{", (0, _global_styling.logicalCSS)('max-width', 'max-content'), ";};label:euiEmptyPrompt;"),
@@ -107,8 +109,10 @@ var euiEmptyPromptStyles = exports.euiEmptyPromptStyles = function euiEmptyPromp
       transparent: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.body, ";;label:transparent;"),
       plain: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.body, ";;label:plain;"),
       subdued: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', generateFooterBorder('subdued')), ";;label:subdued;"),
+      highlighted: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', generateFooterBorder('plain')), ";;label:highlighted;"),
       primary: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', generateFooterBorder('primary')), ";;label:primary;"),
       accent: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', generateFooterBorder('accent')), ";;label:accent;"),
+      accentSecondary: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', generateFooterBorder('accentSecondary')), ";;label:accentSecondary;"),
       danger: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', generateFooterBorder('danger')), ";;label:danger;"),
       warning: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', generateFooterBorder('warning')), ";;label:warning;"),
       success: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', generateFooterBorder('success')), ";;label:success;")

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

@@ -32,19 +32,19 @@ var euiExpressionStyles = exports.euiExpressionStyles = function euiExpressionSt
     isClickable: /*#__PURE__*/(0, _react.css)("cursor:pointer;", (0, _global_styling.logicalCSS)('border-bottom', euiTheme.border.editable), " &[class*='-columns']{background-color:", euiTheme.colors.lightestShade, ";&:focus,&:hover:not(:disabled){[class*='euiExpression__description'],[class*='euiExpression__value']{text-decoration:underline;}}};label:isClickable;"),
     isActive: {
       base: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-bottom-style', 'solid'), ";;label:base;"),
-      subdued: /*#__PURE__*/(0, _react.css)("border-color:", euiTheme.colors.subduedText, ";;label:subdued;"),
+      subdued: /*#__PURE__*/(0, _react.css)("border-color:", euiTheme.colors.textSubdued, ";;label:subdued;"),
       primary: /*#__PURE__*/(0, _react.css)("border-color:", euiTheme.colors.primary, ";;label:primary;"),
       success: /*#__PURE__*/(0, _react.css)("border-color:", euiTheme.colors.success, ";;label:success;"),
       warning: /*#__PURE__*/(0, _react.css)("border-color:", euiTheme.colors.warning, ";;label:warning;"),
       danger: /*#__PURE__*/(0, _react.css)("border-color:", euiTheme.colors.danger, ";;label:danger;"),
       accent: /*#__PURE__*/(0, _react.css)("border-color:", euiTheme.colors.accent, ";;label:accent;")
     },
-    subdued: /*#__PURE__*/(0, _react.css)(_colorCSS(euiTheme.colors.subduedText), ";label:subdued;"),
-    primary: /*#__PURE__*/(0, _react.css)(_colorCSS(euiTheme.colors.primaryText), ";label:primary;"),
-    success: /*#__PURE__*/(0, _react.css)(_colorCSS(euiTheme.colors.successText), ";label:success;"),
-    warning: /*#__PURE__*/(0, _react.css)(_colorCSS(euiTheme.colors.warningText), ";label:warning;"),
-    danger: /*#__PURE__*/(0, _react.css)(_colorCSS(euiTheme.colors.dangerText), ";label:danger;"),
-    accent: /*#__PURE__*/(0, _react.css)(_colorCSS(euiTheme.colors.accentText), ";label:accent;")
+    subdued: /*#__PURE__*/(0, _react.css)(_colorCSS(euiTheme.colors.textSubdued), ";label:subdued;"),
+    primary: /*#__PURE__*/(0, _react.css)(_colorCSS(euiTheme.colors.textPrimary), ";label:primary;"),
+    success: /*#__PURE__*/(0, _react.css)(_colorCSS(euiTheme.colors.textSuccess), ";label:success;"),
+    warning: /*#__PURE__*/(0, _react.css)(_colorCSS(euiTheme.colors.textWarning), ";label:warning;"),
+    danger: /*#__PURE__*/(0, _react.css)(_colorCSS(euiTheme.colors.textDanger), ";label:danger;"),
+    accent: /*#__PURE__*/(0, _react.css)(_colorCSS(euiTheme.colors.textAccent), ";label:accent;")
   };
 };
 var _ref2 = process.env.NODE_ENV === "production" ? {
@@ -60,12 +60,12 @@ var euiExpressionDescriptionStyles = exports.euiExpressionDescriptionStyles = fu
   return {
     euiExpression__description: /*#__PURE__*/(0, _react.css)(";label:euiExpression__description;"),
     truncate: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextTruncate)(), " display:inline-block;vertical-align:bottom;;label:truncate;"),
-    subdued: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.subduedText, ";;label:subdued;"),
-    primary: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.primaryText, ";;label:primary;"),
-    success: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.successText, ";;label:success;"),
-    warning: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.warningText, ";;label:warning;"),
-    danger: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.dangerText, ";;label:danger;"),
-    accent: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.accentText, ";;label:accent;"),
+    subdued: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textSubdued, ";;label:subdued;"),
+    primary: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textPrimary, ";;label:primary;"),
+    success: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textSuccess, ";;label:success;"),
+    warning: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textWarning, ";;label:warning;"),
+    danger: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textDanger, ";;label:danger;"),
+    accent: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textAccent, ";;label:accent;"),
     isUppercase: _ref2,
     columns: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('right'), " ", (0, _global_styling.logicalCSS)('margin-right', euiTheme.size.s), " flex-shrink:0;;label:columns;")
   };