@elastic/eui 99.2.0-borealis.0 → 99.3.0-borealis.0

package/optimize/es/components/table/table_cells_shared.styles.js

@@ -18,13 +18,13 @@ export var euiTableHeaderFooterCellStyles = function euiTableHeaderFooterCellSty
   // euiFontSize returns an object, so we keep object notation here to merge into css``
   var sharedStyles = _objectSpread(_objectSpread({}, euiFontSize(euiThemeContext, 'xs')), {}, {
     fontWeight: euiTheme.font.weight.semiBold,
-    color: euiTheme.colors.title,
+    color: euiTheme.colors.textHeading,
     verticalAlign: 'middle'
   });
   return {
     euiTableHeaderCell: /*#__PURE__*/css(sharedStyles, ";;label:euiTableHeaderCell;"),
     euiTableHeaderCell__content: /*#__PURE__*/css("gap:", euiTheme.size.xs, ";;label:euiTableHeaderCell__content;"),
-    euiTableHeaderCell__button: /*#__PURE__*/css(logicalCSS('width', '100%'), " font-weight:inherit;line-height:inherit;.euiTableSortIcon--sortable{color:", euiTheme.components.tableCellSortableIconColor, ";}&:hover,&:focus{color:", euiTheme.colors.primaryText, ";text-decoration:underline;.euiTableSortIcon--sortable{color:", euiTheme.colors.primaryText, ";}};label:euiTableHeaderCell__button;"),
+    euiTableHeaderCell__button: /*#__PURE__*/css(logicalCSS('width', '100%'), " font-weight:inherit;line-height:inherit;.euiTableSortIcon--sortable{color:", euiTheme.components.tableCellSortableIconColor, ";}&:hover,&:focus{color:", euiTheme.colors.textPrimary, ";text-decoration:underline;.euiTableSortIcon--sortable{color:", euiTheme.colors.textPrimary, ";}};label:euiTableHeaderCell__button;"),
     euiTableFooterCell: /*#__PURE__*/css(sharedStyles, " background-color:", euiTheme.colors.lightestShade, ";;label:euiTableFooterCell;")
   };
 };

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

@@ -1,6 +1,6 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "align", "onSort", "isSorted", "isSortAscending", "className", "scope", "mobileOptions", "width", "style", "readOnly", "description", "append"];
+import _extends from "@babel/runtime/helpers/extends";
+var _excluded = ["children", "align", "onSort", "isSorted", "isSortAscending", "className", "scope", "mobileOptions", "width", "style", "readOnly", "tooltipProps", "description", "append"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -16,6 +16,7 @@ import { EuiI18n } from '../i18n';
 import { EuiScreenReaderOnly } from '../accessibility';
 import { EuiIcon } from '../icon';
 import { EuiInnerText } from '../inner_text';
+import { EuiIconTip } from '../tool_tip';
 import { resolveWidthAsStyle } from './utils';
 import { useEuiTableIsResponsive } from './mobile/responsive_context';
 import { EuiTableCellContent } from './_table_cell_content';
@@ -24,6 +25,7 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 var CellContents = function CellContents(_ref) {
   var className = _ref.className,
     align = _ref.align,
+    tooltipProps = _ref.tooltipProps,
     description = _ref.description,
     children = _ref.children,
     canSort = _ref.canSort,
@@ -49,7 +51,14 @@ var CellContents = function CellContents(_ref) {
         className: "eui-textTruncate"
       }, children);
     });
-  }), description && ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("span", null, description)), isSorted ? ___EmotionJSX(EuiIcon, {
+  }), description && ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("span", null, description)), tooltipProps && ___EmotionJSX(EuiIconTip, _extends({
+    content: tooltipProps.content,
+    type: tooltipProps.icon || 'questionInCircle',
+    size: "m",
+    color: "subdued",
+    position: "top",
+    iconProps: tooltipProps.iconProps
+  }, tooltipProps.tooltipProps)), isSorted ? ___EmotionJSX(EuiIcon, {
     className: "euiTableSortIcon",
     type: isSortAscending ? 'sortUp' : 'sortDown',
     size: "m"
@@ -73,6 +82,7 @@ export var EuiTableHeaderCell = function EuiTableHeaderCell(_ref2) {
     width = _ref2.width,
     style = _ref2.style,
     readOnly = _ref2.readOnly,
+    tooltipProps = _ref2.tooltipProps,
     description = _ref2.description,
     append = _ref2.append,
     rest = _objectWithoutProperties(_ref2, _excluded);
@@ -96,6 +106,7 @@ export var EuiTableHeaderCell = function EuiTableHeaderCell(_ref2) {
   var cellContentsProps = {
     css: styles.euiTableHeaderCell__content,
     align: align,
+    tooltipProps: tooltipProps,
     description: description,
     canSort: canSort,
     isSorted: isSorted,

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

@@ -9,8 +9,8 @@ var _templateObject;
  */
 
 import { css, keyframes } from '@emotion/react';
+import { euiShadow } from '@elastic/eui-theme-common';
 import { euiCanAnimate, logicalCSS } from '../../global_styling';
-import { euiShadow } from '../../themes/amsterdam/global_styling/mixins';
 import { euiTableVariables } from './table.styles';
 export var euiTableRowStyles = function euiTableRowStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;

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

@@ -20,10 +20,10 @@ var _ref = process.env.NODE_ENV === "production" ? {
 export var euiTabStyles = function euiTabStyles(_ref2) {
   var euiTheme = _ref2.euiTheme;
   return {
-    euiTab: /*#__PURE__*/css("display:flex;cursor:pointer;flex-direction:row;align-items:center;gap:", euiTheme.size.s, ";", logicalCSS('padding-vertical', 0), " ", logicalCSS('padding-horizontal', euiTheme.size.xs), "font-weight:", euiTheme.font.weight.semiBold, ";color:", euiTheme.colors.title, ";&:focus{outline-offset:-", euiTheme.focus.width, ";};label:euiTab;"),
+    euiTab: /*#__PURE__*/css("display:flex;cursor:pointer;flex-direction:row;align-items:center;gap:", euiTheme.size.s, ";", logicalCSS('padding-vertical', 0), " ", logicalCSS('padding-horizontal', euiTheme.size.xs), "font-weight:", euiTheme.font.weight.semiBold, ";color:", euiTheme.colors.textHeading, ";&:focus{outline-offset:-", euiTheme.focus.width, ";};label:euiTab;"),
     // variations
     expanded: _ref,
-    selected: /*#__PURE__*/css("box-shadow:inset 0 -", euiTheme.border.width.thick, " 0 ", euiTheme.colors.primary, ";color:", euiTheme.colors.primaryText, ";;label:selected;"),
+    selected: /*#__PURE__*/css("box-shadow:inset 0 -", euiTheme.border.width.thick, " 0 ", euiTheme.colors.primary, ";color:", euiTheme.colors.textPrimary, ";;label:selected;"),
     disabled: {
       disabled: /*#__PURE__*/css("cursor:not-allowed;color:", euiTheme.colors.disabledText, ";;label:disabled;"),
       selected: /*#__PURE__*/css("box-shadow:inset 0 -", euiTheme.border.width.thick, " 0 ", euiTheme.colors.disabledText, ";;label:selected;")

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

@@ -11,6 +11,6 @@ export var euiTextDiffStyles = function euiTextDiffStyles(_ref) {
   var euiTheme = _ref.euiTheme;
   return {
     // Base
-    euiTextDiff: /*#__PURE__*/css("del{color:", euiTheme.colors.dangerText, ";}ins{color:", euiTheme.colors.successText, ";};label:euiTextDiff;")
+    euiTextDiff: /*#__PURE__*/css("del{color:", euiTheme.colors.textDanger, ";}ins{color:", euiTheme.colors.textSuccess, ";};label:euiTextDiff;")
   };
 };

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

@@ -7,8 +7,8 @@
  */
 
 import { css } from '@emotion/react';
+import { euiShadowLarge } from '@elastic/eui-theme-common';
 import { euiTextBreakWord, logicalCSS } from '../../global_styling';
-import { euiShadowLarge } from '../../themes/amsterdam';
 import { euiTitle } from '../title/title.styles';
 export var euiToastStyles = function euiToastStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;

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

@@ -10,9 +10,9 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css, keyframes } from '@emotion/react';
+import { euiShadow } from '@elastic/eui-theme-common';
 import { logicalCSS, euiFontSize, euiCanAnimate } from '../../global_styling';
 import { _popoverArrowStyles } from '../../services/popover';
-import { euiShadow } from '../../themes/amsterdam';
 export var euiToolTipBackgroundColor = function euiToolTipBackgroundColor(euiTheme) {
   return euiTheme.components.tooltipBackground;
 };

package/optimize/es/global_styling/mixins/_shadow.js

@@ -0,0 +1,31 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { euiShadowFlat, euiShadow, euiSlightShadowHover, euiShadowXSmall, euiShadowSmall, euiShadowMedium, euiShadowLarge, euiShadowXLarge } from '@elastic/eui-theme-common';
+import { useEuiTheme } from '../../services/theme';
+export { euiShadowFlat, euiShadow, euiSlightShadowHover, euiShadowXSmall, euiShadowSmall, euiShadowMedium, euiShadowLarge, euiShadowXLarge };
+export var useEuiSlightShadowHover = function useEuiSlightShadowHover(color) {
+  var euiThemeContext = useEuiTheme();
+  return euiSlightShadowHover(euiThemeContext, {
+    color: color
+  });
+};
+export var useEuiShadowFlat = function useEuiShadowFlat(color) {
+  var euiThemeContext = useEuiTheme();
+  return euiShadowFlat(euiThemeContext, {
+    color: color
+  });
+};
+export var useEuiShadow = function useEuiShadow() {
+  var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'l';
+  var color = arguments.length > 1 ? arguments[1] : undefined;
+  var euiThemeContext = useEuiTheme();
+  return euiShadow(euiThemeContext, size, {
+    color: color
+  });
+};

package/optimize/es/global_styling/mixins/index.js

@@ -12,4 +12,5 @@ export * from './_padding';
 export * from './_states';
 export * from './_typography';
 export * from './_responsive';
-export * from './_button';
+export * from './_button';
+export * from './_shadow';

package/optimize/es/global_styling/reset/global_styles.js

@@ -53,7 +53,7 @@ export var EuiGlobalStyles = function EuiGlobalStyles(_ref) {
    */
   var styles = /*#__PURE__*/css(reset, " html{", scrollbarStyles, " ", fontReset, " text-size-adjust:100%;font-kerning:normal;", logicalCSS('height', '100%'), " background-color:", colors.body, ";color:", colors.text, ";}code,pre,kbd,samp{font-family:", font.familyCode, ";}input,textarea,select{", _objectSpread(_objectSpread({}, fontReset), {}, {
     fontSize: '1rem' // Inherit from html root
-  }), ";}select:disabled{opacity:1;}button{font-family:", font.family, ";}em{font-style:italic;}strong{font-weight:", font.weight.bold, ";}*:focus{", euiFocusRing(euiThemeContext), ";}::selection{background:", transparentize(colors.primary, colorMode === 'LIGHT' ? 0.1 : 0.2), ";}a{color:", colors.primaryText, ";&,&:hover,&:focus{text-decoration:none;}}.euiBody-hasPortalContent{position:relative;};label:styles;");
+  }), ";}select:disabled{opacity:1;}button{font-family:", font.family, ";}em{font-style:italic;}strong{font-weight:", font.weight.bold, ";}*:focus{", euiFocusRing(euiThemeContext), ";}::selection{background:", transparentize(colors.primary, colorMode === 'LIGHT' ? 0.1 : 0.2), ";}a{color:", colors.textPrimary, ";&,&:hover,&:focus{text-decoration:none;}}.euiBody-hasPortalContent{position:relative;};label:styles;");
   return ___EmotionJSX(Global, {
     styles: styles
   });

package/optimize/es/themes/amsterdam/global_styling/functions/shadows.js

@@ -6,13 +6,4 @@
  * Side Public License, v 1.
  */
 
-import chroma from 'chroma-js';
-import { COLOR_MODES_STANDARD } from '../../../../services/theme/types';
-
-// Create a CSS color value using whose opacity is determined based
-// on either a light or dark theme. We use a multiplier
-// of 1 for light themes and 2.5 for dark themes
-export var getShadowColor = function getShadowColor(color, opacity, colorMode) {
-  var themeOpacity = colorMode === COLOR_MODES_STANDARD.dark ? opacity * 3.5 : opacity * 1;
-  return chroma(color).alpha(themeOpacity).css();
-};
+export { getShadowColor } from '@elastic/eui-theme-common';

package/optimize/es/themes/amsterdam/global_styling/mixins/shadow.js

@@ -6,149 +6,4 @@
  * Side Public License, v 1.
  */
 
-import { useEuiTheme } from '../../../../services/theme';
-import { getShadowColor } from '../functions';
-/**
- * euiSlightShadow
- */
-export var euiShadowXSmall = function euiShadowXSmall(_ref) {
-  var euiTheme = _ref.euiTheme,
-    colorMode = _ref.colorMode;
-  var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    _color = _ref2.color;
-  var color = _color || euiTheme.colors.shadow;
-  return "\nbox-shadow:\n  0 .8px .8px ".concat(getShadowColor(color, 0.04, colorMode), ",\n  0 2.3px 2px ").concat(getShadowColor(color, 0.03, colorMode), ";\n");
-};
-
-/**
- * bottomShadowSmall
- */
-export var euiShadowSmall = function euiShadowSmall(_ref3) {
-  var euiTheme = _ref3.euiTheme,
-    colorMode = _ref3.colorMode;
-  var _ref4 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    _color = _ref4.color;
-  var color = _color || euiTheme.colors.shadow;
-  return "\nbox-shadow:\n  0 .7px 1.4px ".concat(getShadowColor(color, 0.07, colorMode), ",\n  0 1.9px 4px ").concat(getShadowColor(color, 0.05, colorMode), ",\n  0 4.5px 10px ").concat(getShadowColor(color, 0.05, colorMode), ";\n");
-};
-
-/**
- * bottomShadowMedium
- */
-export var euiShadowMedium = function euiShadowMedium(_ref5) {
-  var euiTheme = _ref5.euiTheme,
-    colorMode = _ref5.colorMode;
-  var _ref6 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    _color = _ref6.color,
-    property = _ref6.property;
-  var color = _color || euiTheme.colors.shadow;
-  if (property === 'filter') {
-    // Using only one drop-shadow filter instead of multiple is more performant & prevents Safari bugs
-    return "filter: drop-shadow(0 5.7px 9px ".concat(getShadowColor(color, 0.2, colorMode), ");");
-  } else {
-    return "box-shadow:\n      0 .9px 4px ".concat(getShadowColor(color, 0.08, colorMode), ",\n      0 2.6px 8px ").concat(getShadowColor(color, 0.06, colorMode), ",\n      0 5.7px 12px ").concat(getShadowColor(color, 0.05, colorMode), ",\n      0 15px 15px ").concat(getShadowColor(color, 0.04, colorMode), ";");
-  }
-};
-
-/**
- * bottomShadow
- */
-export var euiShadowLarge = function euiShadowLarge(_ref7) {
-  var euiTheme = _ref7.euiTheme,
-    colorMode = _ref7.colorMode;
-  var _ref8 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    _color = _ref8.color;
-  var color = _color || euiTheme.colors.shadow;
-  return "\nbox-shadow:\n  0 1px 5px ".concat(getShadowColor(color, 0.1, colorMode), ",\n  0 3.6px 13px ").concat(getShadowColor(color, 0.07, colorMode), ",\n  0 8.4px 23px ").concat(getShadowColor(color, 0.06, colorMode), ",\n  0 23px 35px ").concat(getShadowColor(color, 0.05, colorMode), ";\n");
-};
-
-/**
- * bottomShadowLarge
- */
-
-export var euiShadowXLarge = function euiShadowXLarge(_ref9) {
-  var euiTheme = _ref9.euiTheme,
-    colorMode = _ref9.colorMode;
-  var _ref10 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    _color = _ref10.color,
-    reverse = _ref10.reverse;
-  var color = _color || euiTheme.colors.shadow;
-  return "\nbox-shadow:\n  0 ".concat(reverse ? '-' : '', "2.7px 9px ").concat(getShadowColor(color, 0.13, colorMode), ",\n  0 ").concat(reverse ? '-' : '', "9.4px 24px ").concat(getShadowColor(color, 0.09, colorMode), ",\n  0 ").concat(reverse ? '-' : '', "21.8px 43px ").concat(getShadowColor(color, 0.08, colorMode), ";\n");
-};
-
-/**
- * slightShadowHover
- */
-export var euiSlightShadowHover = function euiSlightShadowHover(_ref11) {
-  var euiTheme = _ref11.euiTheme,
-    colorMode = _ref11.colorMode;
-  var _ref12 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    _color = _ref12.color;
-  var color = _color || euiTheme.colors.shadow;
-  return "\nbox-shadow:\n  0 1px 5px ".concat(getShadowColor(color, 0.1, colorMode), ",\n  0 3.6px 13px ").concat(getShadowColor(color, 0.07, colorMode), ",\n  0 8.4px 23px ").concat(getShadowColor(color, 0.06, colorMode), ",\n  0 23px 35px ").concat(getShadowColor(color, 0.05, colorMode), ";\n");
-};
-export var useEuiSlightShadowHover = function useEuiSlightShadowHover(color) {
-  var euiThemeContext = useEuiTheme();
-  return euiSlightShadowHover(euiThemeContext, {
-    color: color
-  });
-};
-
-/**
- * bottomShadowFlat
- *
- * Similar to shadow medium but without the bottom depth.
- * Useful for popovers that drop UP rather than DOWN.
- */
-export var euiShadowFlat = function euiShadowFlat(_ref13) {
-  var euiTheme = _ref13.euiTheme,
-    colorMode = _ref13.colorMode;
-  var _ref14 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    _color = _ref14.color;
-  var color = _color || euiTheme.colors.shadow;
-  return "\nbox-shadow:\n  0 0 .8px ".concat(getShadowColor(color, 0.06, colorMode), ",\n  0 0 2px ").concat(getShadowColor(color, 0.04, colorMode), ",\n  0 0 5px ").concat(getShadowColor(color, 0.04, colorMode), ",\n  0 0 17px ").concat(getShadowColor(color, 0.03, colorMode), ";\n");
-};
-export var useEuiShadowFlat = function useEuiShadowFlat(color) {
-  var euiThemeContext = useEuiTheme();
-  return euiShadowFlat(euiThemeContext, {
-    color: color
-  });
-};
-export var euiShadow = function euiShadow(euiThemeContext) {
-  var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'l';
-  var _ref15 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
-    color = _ref15.color;
-  switch (size) {
-    case 'xs':
-      return euiShadowXSmall(euiThemeContext, {
-        color: color
-      });
-    case 's':
-      return euiShadowSmall(euiThemeContext, {
-        color: color
-      });
-    case 'm':
-      return euiShadowMedium(euiThemeContext, {
-        color: color
-      });
-    case 'l':
-      return euiShadowLarge(euiThemeContext, {
-        color: color
-      });
-    case 'xl':
-      return euiShadowXLarge(euiThemeContext, {
-        color: color
-      });
-    default:
-      console.warn('Please provide a valid size option to useEuiShadow');
-      return '';
-  }
-};
-export var useEuiShadow = function useEuiShadow() {
-  var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'l';
-  var color = arguments.length > 1 ? arguments[1] : undefined;
-  var euiThemeContext = useEuiTheme();
-  return euiShadow(euiThemeContext, size, {
-    color: color
-  });
-};
+export * from '../../../../global_styling/mixins/_shadow';

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

@@ -6,10 +6,4 @@
  * Side Public License, v 1.
  */
 
-export var breakpoint = {
-  xl: 1200,
-  l: 992,
-  m: 768,
-  s: 575,
-  xs: 0
-};
+export { breakpoint } from '@elastic/eui-theme-common';