@elastic/eui 103.1.0 → 104.0.0

package/lib/themes/index.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 var _exportNames = {
   colorVis: true,
+  colorVisLight: true,
+  colorVisDark: true,
   AMSTERDAM_NAME_KEY: true,
   EuiThemeAmsterdam: true
 };
@@ -23,10 +25,23 @@ Object.defineProperty(exports, "EuiThemeAmsterdam", {
 Object.defineProperty(exports, "colorVis", {
   enumerable: true,
   get: function get() {
-    return _colors_vis.colorVis;
+    return _colors_vis_light.colorVisLight;
   }
 });
-var _colors_vis = require("./amsterdam/global_styling/variables/_colors_vis");
+Object.defineProperty(exports, "colorVisDark", {
+  enumerable: true,
+  get: function get() {
+    return _colors_vis_dark.colorVisDark;
+  }
+});
+Object.defineProperty(exports, "colorVisLight", {
+  enumerable: true,
+  get: function get() {
+    return _colors_vis_light.colorVisLight;
+  }
+});
+var _colors_vis_light = require("./amsterdam/global_styling/variables/_colors_vis_light");
+var _colors_vis_dark = require("./amsterdam/global_styling/variables/_colors_vis_dark");
 var _theme = require("./amsterdam/theme");
 var _amsterdam = require("./amsterdam");
 Object.keys(_amsterdam).forEach(function (key) {

package/lib/themes/json/eui_theme_amsterdam_dark.json

@@ -282,20 +282,16 @@
   "euiColorVis7_behindText": "#F5A35C",
   "euiColorVis8_behindText": "#C47C6C",
   "euiColorVis9_behindText": "#FF7E62",
-  "euiColorVisAsTextLight0": "#006BB4",
-  "euiColorVisAsTextLight1": "#017D73",
-  "euiColorVisAsTextLight2": "#F5A700",
-  "euiColorVisAsTextLight3": "#BD271E",
-  "euiColorVisAsTextLight4": "#DD0A73",
-  "euiColorVisAsTextLight5": "#006BB4",
-  "euiColorVisAsTextLight6": "#017D73",
-  "euiColorVisAsTextDark0": "#1BA9F5",
-  "euiColorVisAsTextDark1": "#7DE2D1",
-  "euiColorVisAsTextDark2": "#F990C0",
-  "euiColorVisAsTextDark3": "#F66",
-  "euiColorVisAsTextDark4": "#FFCE7A",
-  "euiColorVisAsTextDark5": "#1BA9F5",
-  "euiColorVisAsTextDark6": "#7DE2D1",
+  "euiColorVisText0": "#7DE2D1",
+  "euiColorVisText1": "#1BA9F5",
+  "euiColorVisText2": "#F990C0",
+  "euiColorVisText3": "#BA9FDA",
+  "euiColorVisText4": "#E9B8D2",
+  "euiColorVisText5": "#F4E08C",
+  "euiColorVisText6": "#DBCDB3",
+  "euiColorVisText7": "#FFCE7A",
+  "euiColorVisText8": "#D09689",
+  "euiColorVisText9": "#F66",
   "euiColorVisSuccess0": "#209280",
   "euiColorVisSuccess1": "#54B399",
   "euiColorVisWarning0": "#D6BF57",
@@ -381,6 +377,7 @@
   "euiColorBackgroundBaseFormsControlDisabled": "#535966",
   "euiColorBackgroundBaseInteractiveHover": "rgba(52,55,65,0.2)",
   "euiColorBackgroundBaseInteractiveSelect": "#103148",
+  "euiColorBackgroundBaseInteractiveSelectHover": "#164160",
   "euiColorBackgroundBaseInteractiveOverlay": "rgba(0,0,0,0.5)",
   "euiColorBackgroundBaseSkeletonEdge": "#2e3039",
   "euiColorBackgroundBaseSkeletonMiddle": "#282a31",
@@ -423,5 +420,6 @@
   "euiColorBorderStrongSuccess": "#7DDED8",
   "euiColorBorderStrongWarning": "#F3D371",
   "euiColorBorderStrongRisk": "#E1A26A",
-  "euiColorBorderStrongDanger": "#F86B63"
+  "euiColorBorderStrongDanger": "#F86B63",
+  "euiColorBorderStrongText": "#98A2B3"
 }

package/lib/themes/json/eui_theme_amsterdam_light.json

@@ -282,20 +282,16 @@
   "euiColorVis7_behindText": "#F5A35C",
   "euiColorVis8_behindText": "#C47C6C",
   "euiColorVis9_behindText": "#FF7E62",
-  "euiColorVisAsTextLight0": "#006BB4",
-  "euiColorVisAsTextLight1": "#017D73",
-  "euiColorVisAsTextLight2": "#F5A700",
-  "euiColorVisAsTextLight3": "#BD271E",
-  "euiColorVisAsTextLight4": "#DD0A73",
-  "euiColorVisAsTextLight5": "#006BB4",
-  "euiColorVisAsTextLight6": "#017D73",
-  "euiColorVisAsTextDark0": "#1BA9F5",
-  "euiColorVisAsTextDark1": "#7DE2D1",
-  "euiColorVisAsTextDark2": "#F990C0",
-  "euiColorVisAsTextDark3": "#F66",
-  "euiColorVisAsTextDark4": "#FFCE7A",
-  "euiColorVisAsTextDark5": "#1BA9F5",
-  "euiColorVisAsTextDark6": "#7DE2D1",
+  "euiColorVisText0": "#017D73",
+  "euiColorVisText1": "#006BB4",
+  "euiColorVisText2": "#DD0A73",
+  "euiColorVisText3": "#745A93",
+  "euiColorVisText4": "#A2728B",
+  "euiColorVisText5": "#AB9946",
+  "euiColorVisText6": "#94866D",
+  "euiColorVisText7": "#F5A700",
+  "euiColorVisText8": "#885145",
+  "euiColorVisText9": "#BD271E",
   "euiColorVisSuccess0": "#209280",
   "euiColorVisSuccess1": "#54B399",
   "euiColorVisWarning0": "#D6BF57",
@@ -380,7 +376,8 @@
   "euiColorBackgroundBaseFormsPrepend": "#e9edf3",
   "euiColorBackgroundBaseFormsControlDisabled": "#98A2B3",
   "euiColorBackgroundBaseInteractiveHover": "rgba(211,218,230,0.2)",
-  "euiColorBackgroundBaseInteractiveSelect": "#f5fafd",
+  "euiColorBackgroundBaseInteractiveSelect": "#f7fbfe",
+  "euiColorBackgroundBaseInteractiveSelectHover": "#d7ecfc",
   "euiColorBackgroundBaseInteractiveOverlay": "rgba(0,0,0,0.5)",
   "euiColorBackgroundBaseSkeletonEdge": "#f0f2f6",
   "euiColorBackgroundBaseSkeletonMiddle": "#f6f8fa",
@@ -423,5 +420,6 @@
   "euiColorBorderStrongSuccess": "#00BFB3",
   "euiColorBorderStrongWarning": "#FEC514",
   "euiColorBorderStrongRisk": "#DA8B45",
-  "euiColorBorderStrongDanger": "#BD271E"
+  "euiColorBorderStrongDanger": "#BD271E",
+  "euiColorBorderStrongText": "#69707D"
 }

package/lib/themes/json/eui_theme_borealis_dark.json

@@ -282,20 +282,16 @@
   "euiColorVis7_behindText": "#FFC9C2",
   "euiColorVis8_behindText": "#EAAE01",
   "euiColorVis9_behindText": "#FCD883",
-  "euiColorVisAsTextLight0": "#047471",
-  "euiColorVisAsTextLight1": "#1750BA",
-  "euiColorVisAsTextLight2": "#A11262",
-  "euiColorVisAsTextLight3": "#A71627",
-  "euiColorVisAsTextLight4": "#825803",
-  "euiColorVisAsTextLight5": "#09724D",
-  "euiColorVisAsTextLight6": "#6B3C9F",
-  "euiColorVisAsTextDark0": "#16C5C0",
-  "euiColorVisAsTextDark1": "#61A2FF",
-  "euiColorVisAsTextDark2": "#EE72A6",
-  "euiColorVisAsTextDark3": "#F6726A",
-  "euiColorVisAsTextDark4": "#EAAE01",
-  "euiColorVisAsTextDark5": "#24C292",
-  "euiColorVisAsTextDark6": "#B084F5",
+  "euiColorVisText0": "#16C5C0",
+  "euiColorVisText1": "#A6EDEA",
+  "euiColorVisText2": "#61A2FF",
+  "euiColorVisText3": "#BFDBFF",
+  "euiColorVisText4": "#EE72A6",
+  "euiColorVisText5": "#FFC7DB",
+  "euiColorVisText6": "#F6726A",
+  "euiColorVisText7": "#FFC9C2",
+  "euiColorVisText8": "#EAAE01",
+  "euiColorVisText9": "#FCD883",
   "euiColorVisSuccess0": "#24C292",
   "euiColorVisSuccess1": "#AEE8D2",
   "euiColorVisWarning0": "#FCD883",

package/lib/themes/json/eui_theme_borealis_light.json

@@ -282,20 +282,16 @@
   "euiColorVis7_behindText": "#FFC9C2",
   "euiColorVis8_behindText": "#EAAE01",
   "euiColorVis9_behindText": "#FCD883",
-  "euiColorVisAsTextLight0": "#047471",
-  "euiColorVisAsTextLight1": "#1750BA",
-  "euiColorVisAsTextLight2": "#A11262",
-  "euiColorVisAsTextLight3": "#A71627",
-  "euiColorVisAsTextLight4": "#825803",
-  "euiColorVisAsTextLight5": "#09724D",
-  "euiColorVisAsTextLight6": "#6B3C9F",
-  "euiColorVisAsTextDark0": "#16C5C0",
-  "euiColorVisAsTextDark1": "#61A2FF",
-  "euiColorVisAsTextDark2": "#EE72A6",
-  "euiColorVisAsTextDark3": "#F6726A",
-  "euiColorVisAsTextDark4": "#EAAE01",
-  "euiColorVisAsTextDark5": "#24C292",
-  "euiColorVisAsTextDark6": "#B084F5",
+  "euiColorVisText0": "#065B58",
+  "euiColorVisText1": "#047471",
+  "euiColorVisText2": "#154399",
+  "euiColorVisText3": "#0B64DD",
+  "euiColorVisText4": "#A11262",
+  "euiColorVisText5": "#D13680",
+  "euiColorVisText6": "#A71627",
+  "euiColorVisText7": "#DA3737",
+  "euiColorVisText8": "#6A4906",
+  "euiColorVisText9": "#966B03",
   "euiColorVisSuccess0": "#24C292",
   "euiColorVisSuccess1": "#AEE8D2",
   "euiColorVisWarning0": "#FCD883",

package/optimize/es/components/copy/copy.js

@@ -1,12 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["children", "textToCopy", "beforeMessage", "afterMessage"];
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /*
@@ -50,17 +48,14 @@ export var EuiCopy = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this$props = this.props,
         children = _this$props.children,
-        textToCopy = _this$props.textToCopy,
-        beforeMessage = _this$props.beforeMessage,
-        afterMessage = _this$props.afterMessage,
-        rest = _objectWithoutProperties(_this$props, _excluded);
+        tooltipProps = _this$props.tooltipProps;
       return (
         // See `src/components/tool_tip/tool_tip.js` for explanation of below eslint-disable
         // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
         ___EmotionJSX(EuiToolTip, _extends({
           content: this.state.tooltipText,
           onMouseOut: this.resetTooltipText
-        }, rest), children(this.copy))
+        }, tooltipProps), children(this.copy))
       );
     }
   }]);

package/optimize/es/components/datagrid/body/cell/data_grid_cell.styles.js

@@ -11,8 +11,8 @@ import { css } from '@emotion/react';
 import { logicalCSS, logicalTextAlignCSS, mathWithUnits } from '../../../../global_styling';
 export var euiDataGridCellOutlineStyles = function euiDataGridCellOutlineStyles(_ref2) {
   var euiTheme = _ref2.euiTheme;
-  var focusColor = euiTheme.colors.primary;
-  var hoverColor = euiTheme.colors.darkShade;
+  var focusColor = euiTheme.colors.borderStrongPrimary;
+  var hoverColor = euiTheme.colors.borderStrongText;
   var outlineWidth = euiTheme.border.width.thick;
   var borderRadius = mathWithUnits(euiTheme.border.radius.medium, function (x) {
     return x / 2;

package/optimize/es/components/datagrid/data_grid.styles.js

@@ -49,7 +49,7 @@ export var euiDataGridStyles = function euiDataGridStyles(euiThemeContext) {
   };
   var border = "".concat(euiTheme.border.width.thin, " solid ").concat(borderColors.default);
   return {
-    euiDataGrid: /*#__PURE__*/css("display:flex;flex-direction:column;align-items:stretch;", 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__*/css("display:flex;flex-direction:column;align-items:stretch;", logicalCSS('height', '100%'), " overflow:hidden;*:where(& .euiDataGridRow){background-color:", euiTheme.components.dataGridRowBackground, ";}*:where(&.euiDataGrid--rowHoverHighlight .euiDataGridRow:hover){background-color:", euiTheme.components.dataGridRowBackgroundHover, ";}*:where(& .euiDataGridRow--selected){background-color:", euiTheme.components.dataGridRowBackgroundSelect, ";}*:where(\n          &.euiDataGrid--rowHoverHighlight .euiDataGridRow--selected:hover\n        ){background-color:", euiTheme.components.dataGridRowBackgroundSelectHover, ";}*:where(&.euiDataGrid--stripes .euiDataGridRow){background-color:", euiTheme.components.dataGridRowStripesBackground, ";}*:where(&.euiDataGrid--stripes .euiDataGridRow--striped){background-color:", euiTheme.components.dataGridRowStripesBackgroundStriped, ";}*:where(\n          &.euiDataGrid--stripes.euiDataGrid--rowHoverHighlight\n            .euiDataGridRow:hover\n        ){background-color:", euiTheme.components.dataGridRowStripesBackgroundHover, ";}*:where(\n          &.euiDataGrid--stripes.euiDataGrid--rowHoverHighlight\n            .euiDataGridRow--striped:hover\n        ){background-color:", euiTheme.components.dataGridRowStripesBackgroundStripedHover, ";}*:where(&.euiDataGrid--stripes .euiDataGridRow--selected){background-color:", euiTheme.components.dataGridRowStripesBackgroundSelect, ";}*:where(\n          &.euiDataGrid--stripes.euiDataGrid--rowHoverHighlight\n            .euiDataGridRow--selected:hover\n        ){background-color:", euiTheme.components.dataGridRowStripesBackgroundSelectHover, ";}*:where(&.euiDataGrid--rowHoverHighlight .euiDataGridRow)::before{content:'';position:absolute;z-index:-1;pointer-events:none;inset:0;background-color:", euiTheme.components.dataGridRowBackground, ";};label:euiDataGrid;"),
     cellPadding: {
       cellPadding: function cellPadding(size) {
         return /*#__PURE__*/css(".euiDataGridHeaderCell,.euiDataGridRowCell__content{padding:", _cellPadding[size], ";}.euiDataGridRowCell__content--lineCountHeight,.euiDataGridRowCell__content--autoBelowLineCountHeight{", highContrastModeStyles(euiThemeContext, {

package/optimize/es/components/page/page_header/page_header_content.js

@@ -123,7 +123,6 @@ export var EuiPageHeaderContent = function EuiPageHeaderContent(_ref) {
   var tabsNode;
   if (tabs) {
     var _tabs$find;
-    var tabsSize = pageTitle ? 'l' : 'xl';
     var renderTabs = function renderTabs() {
       return tabs.map(function (tab, index) {
         var label = tab.label,
@@ -140,7 +139,7 @@ export var EuiPageHeaderContent = function EuiPageHeaderContent(_ref) {
     })) === null || _tabs$find === void 0 ? void 0 : _tabs$find.label));
     tabsNode = ___EmotionJSX(React.Fragment, null, pageTitleNode && ___EmotionJSX(EuiSpacer, null), screenReaderPageTitle, ___EmotionJSX(EuiTabs, _extends({}, tabsProps, {
       bottomBorder: false,
-      size: tabsSize
+      size: "l"
     }), renderTabs()));
   }
   var childrenNode = children && ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiSpacer, null), children);

package/optimize/es/components/table/table_row.js

@@ -28,7 +28,7 @@ export var EuiTableRow = function EuiTableRow(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   var isResponsive = useEuiTableIsResponsive();
   var styles = useEuiMemoizedStyles(euiTableRowStyles);
-  var cssStyles = isResponsive ? [styles.euiTableRow, styles.mobile.mobile, isSelected && styles.mobile.selected, isExpandedRow && styles.mobile.expanded, (hasActions === true || isExpandable || isExpandedRow) && styles.mobile.hasRightColumn, hasSelection && styles.mobile.hasLeftColumn] : [styles.euiTableRow, styles.desktop.desktop, isSelected && styles.desktop.selected, isExpandedRow && styles.desktop.expanded, onClick && styles.desktop.clickable, isExpandedRow && hasSelection && styles.desktop.checkboxOffset];
+  var cssStyles = isResponsive ? [styles.euiTableRow, styles.mobile.mobile, isSelected && styles.mobile.selected, isExpandedRow && styles.mobile.expanded, (hasActions === true || isExpandable || isExpandedRow) && styles.mobile.hasRightColumn, hasSelection && styles.mobile.hasLeftColumn] : [styles.euiTableRow, styles.desktop.desktop, onClick && styles.desktop.clickable, isSelected && styles.desktop.selected, isExpandedRow && styles.desktop.expanded, isExpandedRow && hasSelection && styles.desktop.checkboxOffset];
   var classes = classNames('euiTableRow', className, {
     'euiTableRow-isSelectable': isSelectable,
     'euiTableRow-isSelected': isSelected,

package/optimize/es/components/tabs/tab.styles.js

@@ -43,9 +43,6 @@ export var euiTabContentStyles = function euiTabContentStyles(euiThemeContext) {
     m: /*#__PURE__*/css("font-size:", euiFontSize(euiThemeContext, 's').fontSize, ";line-height:", euiTheme.size.xxl, ";;label:m;"),
     l: /*#__PURE__*/css("font-size:", euiFontSize(euiThemeContext, 'm').fontSize, ";line-height:", mathWithUnits([euiTheme.size.xl, euiTheme.size.s], function (x, y) {
       return x + y;
-    }), ";;label:l;"),
-    xl: /*#__PURE__*/css("font-size:", euiFontSize(euiThemeContext, 'l').fontSize, ";line-height:", mathWithUnits([euiTheme.size.xxxl, euiTheme.size.s], function (x, y) {
-      return x + y;
-    }), ";;label:xl;")
+    }), ";;label:l;")
   };
 };

package/optimize/es/components/tabs/tabs.js

@@ -15,7 +15,7 @@ import { keys, useEuiMemoizedStyles } from '../../services';
 import { euiTabsStyles } from './tabs.styles';
 import { EuiTabsContext } from './tabs_context';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var SIZES = ['s', 'm', 'l', 'xl'];
+export var SIZES = ['s', 'm', 'l'];
 export var EuiTabs = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,

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

@@ -20,7 +20,6 @@ export var euiTabsStyles = function euiTabsStyles(euiThemeContext) {
     // sizes
     s: /*#__PURE__*/css("gap:", euiTheme.size.m, ";;label:s;"),
     m: /*#__PURE__*/css("gap:", euiTheme.size.base, ";;label:m;"),
-    l: /*#__PURE__*/css("gap:", euiTheme.size.l, ";;label:l;"),
-    xl: /*#__PURE__*/css("gap:", euiTheme.size.xl, ";;label:xl;")
+    l: /*#__PURE__*/css("gap:", euiTheme.size.l, ";;label:l;")
   };
 };

package/optimize/es/services/color/eui_palettes.js

@@ -118,6 +118,8 @@ var _getVisColorsAsText = function _getVisColorsAsText(visColors, keys) {
 };
 
 /**
+ * @deprecated - use `euiColorVisText{NUMBER}` tokens directly
+ *
  * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
  * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
  */
@@ -126,12 +128,14 @@ export var euiPaletteForLightBackground = function euiPaletteForLightBackground(
     colors = _ref3.colors;
   var visColors = colors !== null && colors !== void 0 ? colors : EUI_VIS_COLOR_STORE.visColors;
   var visColorsAsTextKeys = Object.keys(visColors).filter(function (color) {
-    return color.includes('AsTextLight');
+    return color.includes('euiColorVisText');
   });
   return _getVisColorsAsText(visColors, visColorsAsTextKeys);
 };
 
 /**
+ * @deprecated - use `euiColorVisText{NUMBER}` tokens directly
+ *
  * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
  * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
  */
@@ -140,7 +144,7 @@ export var euiPaletteForDarkBackground = function euiPaletteForDarkBackground()
     colors = _ref4.colors;
   var visColors = colors !== null && colors !== void 0 ? colors : EUI_VIS_COLOR_STORE.visColors;
   var visColorsAsTextKeys = Object.keys(visColors).filter(function (color) {
-    return color.includes('AsTextDark');
+    return color.includes('euiColorVisText');
   });
   return _getVisColorsAsText(visColors, visColorsAsTextKeys);
 };