@elastic/eui 98.2.1-borealis.2 → 99.0.0

package/test-env/global_styling/mixins/_color.js

@@ -8,7 +8,6 @@ exports.useEuiBorderColorCSS = exports.useEuiBackgroundColorCSS = exports.useEui
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _services = require("../../services");
-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; } /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -17,27 +16,40 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var BACKGROUND_COLORS = exports.BACKGROUND_COLORS = ['transparent', 'plain', 'subdued', 'highlighted', 'accent', 'accentSecondary', 'primary', 'success', 'warning', 'danger'];
+var BACKGROUND_COLORS = exports.BACKGROUND_COLORS = ['transparent', 'plain', 'subdued', 'accent', 'primary', 'success', 'warning', 'danger'];
 /**
- * @deprecated - use background tokens directly
  * @returns A single background color with optional alpha transparency
  */
 var euiBackgroundColor = exports.euiBackgroundColor = function euiBackgroundColor(_ref, color) {
-  var euiTheme = _ref.euiTheme;
+  var euiTheme = _ref.euiTheme,
+    colorMode = _ref.colorMode;
   var _ref2 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
     method = _ref2.method;
   if (color === 'transparent') return 'transparent';
   if (method === 'transparent') {
-    var tokenName = (0, _euiThemeCommon.getTokenName)('backgroundTransparent', color);
-    return euiTheme.colors[tokenName];
+    if (color === 'plain') {
+      return (0, _services.transparentize)(euiTheme.colors.ghost, 0.2);
+    } else if (color === 'subdued') {
+      return colorMode === 'DARK' ? (0, _services.transparentize)(euiTheme.colors.lightShade, 0.4) : (0, _services.transparentize)(euiTheme.colors.lightShade, 0.2);
+    } else {
+      return (0, _services.transparentize)(euiTheme.colors[color], 0.1);
+    }
   } else {
-    var _tokenName = (0, _euiThemeCommon.getTokenName)('backgroundBase', color);
-    return euiTheme.colors[_tokenName];
+    var _tintOrShade = function _tintOrShade(color) {
+      return colorMode === 'DARK' ? (0, _services.shade)(color, 0.8) : (0, _services.tint)(color, 0.9);
+    };
+    switch (color) {
+      case 'plain':
+        return euiTheme.colors.emptyShade;
+      case 'subdued':
+        return euiTheme.colors.body;
+      default:
+        return _tintOrShade(euiTheme.colors[color]);
+    }
   }
 };
 
 /**
- * @deprecated
  * @returns An object map of color keys to color values, categorized by
  * opaque (default) vs transparency (hover/focus states) methods.
  * e.g. {
@@ -57,10 +69,6 @@ var _euiBackgroundColorMap = function _euiBackgroundColorMap(euiThemeContext) {
     }, {})
   };
 };
-
-/**
- * @deprecated
- */
 var useEuiBackgroundColor = exports.useEuiBackgroundColor = function useEuiBackgroundColor(color) {
   var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
     method = _ref3.method;
@@ -74,37 +82,29 @@ var useEuiBackgroundColor = exports.useEuiBackgroundColor = function useEuiBackg
  */
 var _euiBackgroundColors = function _euiBackgroundColors(euiThemeContext) {
   return BACKGROUND_COLORS.reduce(function (acc, color) {
-    var tokenName = (0, _euiThemeCommon.getTokenName)('backgroundBase', color);
-    var backgroundColor = color === 'transparent' ? 'transparent' : euiThemeContext.euiTheme.colors[tokenName];
-    return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2.default)({}, color, /*#__PURE__*/(0, _react.css)("background-color:", backgroundColor, ";label:", color, ";")));
+    return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2.default)({}, color, /*#__PURE__*/(0, _react.css)("background-color:", euiBackgroundColor(euiThemeContext, color), ";label:", color, ";")));
   }, {});
 };
-
-/**
- * Hook to retrieve background style for a background color variant
- * @returns An object map of color keys to CSS,
- * e.g. { danger: css``, success: css``, ... }
- */
 var useEuiBackgroundColorCSS = exports.useEuiBackgroundColorCSS = function useEuiBackgroundColorCSS() {
   return (0, _services.useEuiMemoizedStyles)(_euiBackgroundColors);
 };
 
 /**
  * Border colors
- * @deprecated - use border tokens directly or use
- * `useEuiBorderColorCSS()` for composed styles
  */
 
 var euiBorderColor = exports.euiBorderColor = function euiBorderColor(_ref4, color) {
-  var euiTheme = _ref4.euiTheme;
+  var euiTheme = _ref4.euiTheme,
+    colorMode = _ref4.colorMode;
   switch (color) {
     case 'transparent':
+    case 'plain':
+    case 'subdued':
       return euiTheme.border.color;
+    case 'warning':
+      return (0, _services.tintOrShade)(euiTheme.colors.warning, 0.4, colorMode);
     default:
-      {
-        var tokenName = (0, _euiThemeCommon.getTokenName)('borderBase', color);
-        return euiTheme.colors[tokenName];
-      }
+      return (0, _services.tintOrShade)(euiTheme.colors[color], 0.6, colorMode);
   }
 };
 
@@ -114,17 +114,9 @@ var euiBorderColor = exports.euiBorderColor = function euiBorderColor(_ref4, col
  */
 var _euiBorderColors = function _euiBorderColors(euiThemeContext) {
   return BACKGROUND_COLORS.reduce(function (acc, color) {
-    var borderToken = (0, _euiThemeCommon.getTokenName)('borderBase', color);
-    var borderColor = color === 'transparent' ? euiThemeContext.euiTheme.border.color : euiThemeContext.euiTheme.colors[borderToken];
-    return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2.default)({}, color, /*#__PURE__*/(0, _react.css)("border-color:", borderColor, ";label:", color, ";")));
+    return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2.default)({}, color, /*#__PURE__*/(0, _react.css)("border-color:", euiBorderColor(euiThemeContext, color), ";label:", color, ";")));
   }, {});
 };
-
-/**
- * Hook to retrieve border style for a border variant
- * @returns An object map of color keys to CSS,
- * e.g. { danger: css``, success: css``, ... }
- */
 var useEuiBorderColorCSS = exports.useEuiBorderColorCSS = function useEuiBorderColorCSS() {
   return (0, _services.useEuiMemoizedStyles)(_euiBorderColors);
 };

package/test-env/global_styling/mixins/index.js

@@ -68,15 +68,4 @@ Object.keys(_responsive).forEach(function (key) {
       return _responsive[key];
     }
   });
-});
-var _button = require("./_button");
-Object.keys(_button).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _button[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _button[key];
-    }
-  });
 });

package/test-env/global_styling/reset/global_styles.js

@@ -36,7 +36,7 @@ var EuiGlobalStyles = exports.EuiGlobalStyles = function EuiGlobalStyles(_ref) {
    * so that it knows to use custom styles. Therefore, we just reuse the same scrollbar mixin with thick size.
    */
   var scrollbarStyles = (0, _mixins.euiScrollBarStyles)(euiThemeContext, {
-    trackColor: euiTheme.components.scrollbarTrackColor,
+    trackColor: colorMode === 'LIGHT' ? (0, _color.shade)(colors.body, 0.03) : (0, _color.tint)(colors.body, 0.07),
     width: 'auto'
   });
 

package/test-env/global_styling/variables/_colors_vis.js

@@ -3,10 +3,65 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "colorVis", {
-  enumerable: true,
-  get: function get() {
-    return _colors_vis.colorVis;
+exports.colorVis = void 0;
+/*
+ * 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.
+ */
+
+/**
+ * NOTE: These were quick conversions of their Sass counterparts.
+ *       They have yet to be used/tested.
+ * TODO: Make the graphic version available from `euiPaletteColorBlind()`
+ */
+
+// Maps allow for easier JSON usage
+// Use map_merge(euiColorVisColors, $yourMap) to change individual colors after importing ths file
+// The `behindText` variant is a direct copy of the hex output by the JS euiPaletteColorBlindBehindText() function
+var euiPaletteColorBlind = {
+  euiColorVis0: {
+    graphic: '#54B399'
+  },
+  euiColorVis1: {
+    graphic: '#6092C0'
+  },
+  euiColorVis2: {
+    graphic: '#D36086'
+  },
+  euiColorVis3: {
+    graphic: '#9170B8'
+  },
+  euiColorVis4: {
+    graphic: '#CA8EAE'
+  },
+  euiColorVis5: {
+    graphic: '#D6BF57'
+  },
+  euiColorVis6: {
+    graphic: '#B9A888'
+  },
+  euiColorVis7: {
+    graphic: '#DA8B45'
+  },
+  euiColorVis8: {
+    graphic: '#AA6556'
+  },
+  euiColorVis9: {
+    graphic: '#E7664C'
   }
-});
-var _colors_vis = require("../../themes/amsterdam/global_styling/variables/_colors_vis");
+};
+var colorVis = exports.colorVis = {
+  euiColorVis0: euiPaletteColorBlind.euiColorVis0.graphic,
+  euiColorVis1: euiPaletteColorBlind.euiColorVis1.graphic,
+  euiColorVis2: euiPaletteColorBlind.euiColorVis2.graphic,
+  euiColorVis3: euiPaletteColorBlind.euiColorVis3.graphic,
+  euiColorVis4: euiPaletteColorBlind.euiColorVis4.graphic,
+  euiColorVis5: euiPaletteColorBlind.euiColorVis5.graphic,
+  euiColorVis6: euiPaletteColorBlind.euiColorVis6.graphic,
+  euiColorVis7: euiPaletteColorBlind.euiColorVis7.graphic,
+  euiColorVis8: euiPaletteColorBlind.euiColorVis8.graphic,
+  euiColorVis9: euiPaletteColorBlind.euiColorVis9.graphic
+};

package/test-env/global_styling/variables/animations.js

@@ -3,28 +3,34 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "EuiThemeAnimationEasings", {
-  enumerable: true,
-  get: function get() {
-    return _euiThemeCommon.EuiThemeAnimationEasings;
-  }
-});
-Object.defineProperty(exports, "EuiThemeAnimationSpeeds", {
-  enumerable: true,
-  get: function get() {
-    return _euiThemeCommon.EuiThemeAnimationSpeeds;
-  }
-});
-Object.defineProperty(exports, "euiCanAnimate", {
-  enumerable: true,
-  get: function get() {
-    return _euiThemeCommon.euiCanAnimate;
-  }
-});
-Object.defineProperty(exports, "euiCantAnimate", {
-  enumerable: true,
-  get: function get() {
-    return _euiThemeCommon.euiCantAnimate;
-  }
-});
-var _euiThemeCommon = require("@elastic/eui-theme-common");
+exports.euiCantAnimate = exports.euiCanAnimate = exports.EuiThemeAnimationSpeeds = exports.EuiThemeAnimationEasings = void 0;
+/*
+ * 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.
+ */
+
+/**
+ * A constant storing the `prefers-reduced-motion` media query
+ * so that when it is turned off, animations are not run.
+ */
+var euiCanAnimate = exports.euiCanAnimate = '@media screen and (prefers-reduced-motion: no-preference)';
+
+/**
+ * A constant storing the `prefers-reduced-motion` media query that will
+ * only apply the content if the setting is off (reduce).
+ */
+var euiCantAnimate = exports.euiCantAnimate = '@media screen and (prefers-reduced-motion: reduce)';
+
+/**
+ * Speeds / Durations / Delays
+ */
+
+var EuiThemeAnimationSpeeds = exports.EuiThemeAnimationSpeeds = ['extraFast', 'fast', 'normal', 'slow', 'extraSlow'];
+/**
+ * Easings / Timing functions
+ */
+
+var EuiThemeAnimationEasings = exports.EuiThemeAnimationEasings = ['bounce', 'resistance'];

package/test-env/global_styling/variables/breakpoint.js

@@ -3,10 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "EuiThemeBreakpoints", {
-  enumerable: true,
-  get: function get() {
-    return _euiThemeCommon.EuiThemeBreakpoints;
-  }
-});
-var _euiThemeCommon = require("@elastic/eui-theme-common");
+exports.EuiThemeBreakpoints = void 0;
+/*
+ * 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 EuiThemeBreakpoints = exports.EuiThemeBreakpoints = ['xs', 's', 'm', 'l', 'xl'];
+
+// This type cannot be a string enum / must be a generic string
+// in case consumers add custom breakpoint sizes, such as xxl or xxs
+
+// Explicitly list out each key so we can document default values
+// via JSDoc (which is available to devs in IDE via intellisense)

package/test-env/global_styling/variables/levels.js

@@ -3,10 +3,29 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "EuiThemeLevels", {
-  enumerable: true,
-  get: function get() {
-    return _euiThemeCommon.EuiThemeLevels;
-  }
-});
-var _euiThemeCommon = require("@elastic/eui-theme-common");
+exports.EuiThemeLevels = void 0;
+/*
+ * 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.
+ */
+
+/**
+ * Z-Index
+ *
+ * Remember that z-index is relative to parent and based on the stacking context.
+ * z-indexes only compete against other z-indexes when they exist as children of
+ * that shared parent.
+ *
+ * That means a popover with a settings of 2, will still show above a modal
+ * with a setting of 100, if it is within that modal and not besides it.
+ *
+ * Generally that means it's a good idea to consider things added to this file
+ * as competitive only as siblings.
+ *
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
+ */
+
+var EuiThemeLevels = exports.EuiThemeLevels = ['toast', 'modal', 'mask', 'navigation', 'menu', 'header', 'flyout', 'maskBelowHeader', 'content'];

package/test-env/global_styling/variables/shadow.js

@@ -3,16 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "EuiThemeShadowSizes", {
-  enumerable: true,
-  get: function get() {
-    return _euiThemeCommon.EuiThemeShadowSizes;
-  }
-});
-Object.defineProperty(exports, "_EuiShadowSizesDescriptions", {
-  enumerable: true,
-  get: function get() {
-    return _euiThemeCommon._EuiShadowSizesDescriptions;
-  }
-});
-var _euiThemeCommon = require("@elastic/eui-theme-common");
+exports._EuiShadowSizesDescriptions = exports.EuiThemeShadowSizes = void 0;
+/*
+ * 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 EuiThemeShadowSizes = exports.EuiThemeShadowSizes = ['xs', 's', 'm', 'l', 'xl'];
+/**
+ * Shadow t-shirt sizes descriptions
+ */
+var _EuiShadowSizesDescriptions = exports._EuiShadowSizesDescriptions = {
+  xs: 'Very subtle shadow used on small components.',
+  s: 'Adds subtle depth, usually used in conjunction with a border.',
+  m: 'Used on small sized portalled content like popovers.',
+  l: 'Primary shadow used in most cases to add visible depth.',
+  xl: 'Very large shadows used for large portalled style containers like modals and flyouts.'
+};

package/test-env/global_styling/variables/size.js

@@ -3,10 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "EuiThemeSizes", {
-  enumerable: true,
-  get: function get() {
-    return _euiThemeCommon.EuiThemeSizes;
-  }
-});
-var _euiThemeCommon = require("@elastic/eui-theme-common");
+exports.EuiThemeSizes = void 0;
+/*
+ * 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 EuiThemeSizes = exports.EuiThemeSizes = ['xxs', 'xs', 's', 'm', 'base', 'l', 'xl', 'xxl', 'xxxl', 'xxxxl'];

package/test-env/global_styling/variables/typography.js

@@ -3,22 +3,44 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "EuiThemeFontScales", {
-  enumerable: true,
-  get: function get() {
-    return _euiThemeCommon.EuiThemeFontScales;
-  }
-});
-Object.defineProperty(exports, "EuiThemeFontUnits", {
-  enumerable: true,
-  get: function get() {
-    return _euiThemeCommon.EuiThemeFontUnits;
-  }
-});
-Object.defineProperty(exports, "EuiThemeFontWeights", {
-  enumerable: true,
-  get: function get() {
-    return _euiThemeCommon.EuiThemeFontWeights;
-  }
-});
-var _euiThemeCommon = require("@elastic/eui-theme-common");
+exports.EuiThemeFontWeights = exports.EuiThemeFontUnits = exports.EuiThemeFontScales = void 0;
+/*
+ * 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.
+ */
+
+/**
+ * Font units of measure
+ */
+
+var EuiThemeFontUnits = exports.EuiThemeFontUnits = ['rem', 'px', 'em'];
+/*
+ * Font scale
+ */
+
+var EuiThemeFontScales = exports.EuiThemeFontScales = ['xxxs', 'xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'];
+
+/*
+ * Font base settings
+ */
+
+/*
+ * Font weights
+ */
+
+var EuiThemeFontWeights = exports.EuiThemeFontWeights = ['light', 'regular', 'medium', 'semiBold', 'bold'];
+
+/**
+ * Body / Base styles
+ */
+
+/**
+ * Title styles
+ */
+
+/*
+ * Font
+ */