@elastic/eui 97.3.0 → 97.3.1-borealis.1

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

@@ -8,6 +8,7 @@ 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
@@ -16,40 +17,27 @@ 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', 'accent', 'primary', 'success', 'warning', 'danger'];
+var BACKGROUND_COLORS = exports.BACKGROUND_COLORS = ['transparent', 'plain', 'subdued', 'accent', 'accentSecondary', '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,
-    colorMode = _ref.colorMode;
+  var euiTheme = _ref.euiTheme;
   var _ref2 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
     method = _ref2.method;
   if (color === 'transparent') return 'transparent';
   if (method === 'transparent') {
-    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);
-    }
+    var tokenName = (0, _euiThemeCommon.getTokenName)('backgroundTransparent', color);
+    return euiTheme.colors[tokenName];
   } else {
-    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]);
-    }
+    var _tokenName = (0, _euiThemeCommon.getTokenName)('backgroundBase', color);
+    return euiTheme.colors[_tokenName];
   }
 };
 
 /**
+ * @deprecated
  * @returns An object map of color keys to color values, categorized by
  * opaque (default) vs transparency (hover/focus states) methods.
  * e.g. {
@@ -69,6 +57,10 @@ 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;
@@ -77,34 +69,44 @@ var useEuiBackgroundColor = exports.useEuiBackgroundColor = function useEuiBackg
 };
 
 /**
+ * @deprecated
  * @returns An object map of color keys to CSS,
  * e.g. { danger: css``, success: css``, ... }
  */
 var _euiBackgroundColors = function _euiBackgroundColors(euiThemeContext) {
   return BACKGROUND_COLORS.reduce(function (acc, color) {
-    return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2.default)({}, color, /*#__PURE__*/(0, _react.css)("background-color:", euiBackgroundColor(euiThemeContext, color), ";label:", 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, ";")));
   }, {});
 };
+
+/**
+ * @deprecated - use background tokens directly
+ * 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,
-    colorMode = _ref4.colorMode;
+  var euiTheme = _ref4.euiTheme;
   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:
-      return (0, _services.tintOrShade)(euiTheme.colors[color], 0.6, colorMode);
+      {
+        var tokenName = (0, _euiThemeCommon.getTokenName)('borderStrong', color);
+        return euiTheme.colors[tokenName];
+      }
   }
 };
 
@@ -114,9 +116,16 @@ var euiBorderColor = exports.euiBorderColor = function euiBorderColor(_ref4, col
  */
 var _euiBorderColors = function _euiBorderColors(euiThemeContext) {
   return BACKGROUND_COLORS.reduce(function (acc, color) {
-    return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2.default)({}, color, /*#__PURE__*/(0, _react.css)("border-color:", euiBorderColor(euiThemeContext, color), ";label:", color, ";")));
+    var borderToken = (0, _euiThemeCommon.getTokenName)('borderBase', color);
+    return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2.default)({}, color, /*#__PURE__*/(0, _react.css)("border-color:", euiThemeContext.euiTheme.colors[borderToken], ";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,4 +68,15 @@ 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: colorMode === 'LIGHT' ? (0, _color.shade)(colors.body, 0.03) : (0, _color.tint)(colors.body, 0.07),
+    trackColor: euiTheme.components.scrollbarTrackColor,
     width: 'auto'
   });
 

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

@@ -3,65 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-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'
+Object.defineProperty(exports, "colorVis", {
+  enumerable: true,
+  get: function get() {
+    return _colors_vis.colorVis;
   }
-};
-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
-};
+});
+var _colors_vis = require("../../themes/amsterdam/global_styling/variables/_colors_vis");

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

@@ -3,34 +3,28 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-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'];
+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");

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

@@ -3,19 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-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)
+Object.defineProperty(exports, "EuiThemeBreakpoints", {
+  enumerable: true,
+  get: function get() {
+    return _euiThemeCommon.EuiThemeBreakpoints;
+  }
+});
+var _euiThemeCommon = require("@elastic/eui-theme-common");

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

@@ -3,29 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-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'];
+Object.defineProperty(exports, "EuiThemeLevels", {
+  enumerable: true,
+  get: function get() {
+    return _euiThemeCommon.EuiThemeLevels;
+  }
+});
+var _euiThemeCommon = require("@elastic/eui-theme-common");

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

@@ -3,23 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-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.'
-};
+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");

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

@@ -3,13 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-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'];
+Object.defineProperty(exports, "EuiThemeSizes", {
+  enumerable: true,
+  get: function get() {
+    return _euiThemeCommon.EuiThemeSizes;
+  }
+});
+var _euiThemeCommon = require("@elastic/eui-theme-common");

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

@@ -3,44 +3,22 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-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
- */
+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");