@elastic/eui 98.2.0 → 98.2.1-borealis.1

package/es/global_styling/functions/size.js

@@ -1,4 +1,3 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -7,19 +6,4 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
  * Side Public License, v 1.
  */
 
-/**
- * Calculates the `px` value based on a scale multiplier
- * @param scale - The font scale multiplier
- * *
- * @param themeOrBase - Theme base value
- * *
- * @returns string - Rem unit aligned to baseline
- */
-
-export var sizeToPixel = function sizeToPixel() {
-  var scale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
-  return function (themeOrBase) {
-    var base = _typeof(themeOrBase) === 'object' ? themeOrBase.base : themeOrBase;
-    return "".concat(base * scale, "px");
-  };
-};
+export { sizeToPixel } from '@elastic/eui-theme-common';

package/es/global_styling/mixins/_button.js

@@ -0,0 +1,159 @@
+var _templateObject;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+/*
+ * 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 { css, keyframes } from '@emotion/react';
+import { getTokenName, euiCanAnimate } from '@elastic/eui-theme-common';
+import { makeHighContrastColor, useEuiMemoizedStyles } from '../../services';
+export var BUTTON_COLORS = ['text', 'accent', 'accentSecondary', 'primary', 'success', 'warning', 'danger'];
+export var BUTTON_DISPLAYS = ['base', 'fill', 'empty'];
+/**
+ * Creates the `base` version of button styles with proper text contrast.
+ * @param euiThemeContext
+ * @param color One of the named button colors or 'disabled'
+ * @returns Style object `{ backgroundColor, color }`
+ */
+export var euiButtonColor = function euiButtonColor(euiThemeContext, color) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var backgroundTokenName = getTokenName('background', color);
+  var textTokenName = getTokenName('textColor', color);
+  var foreground = euiTheme.components.buttons[textTokenName];
+  var background = euiTheme.components.buttons[backgroundTokenName];
+  return {
+    color: background === 'transparent' || color === 'disabled' ? foreground : makeHighContrastColor(foreground)(background),
+    backgroundColor: background
+  };
+};
+
+/**
+ * Creates the `fill` version of buttons styles with proper text contrast.
+ * @param euiThemeContext
+ * @param color One of the named button colors or 'disabled'
+ * @returns Style object `{ backgroundColor, color }`
+ */
+export var euiButtonFillColor = function euiButtonFillColor(euiThemeContext, color) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var backgroundTokenName = getTokenName('backgroundFilled', color);
+  var textColorTokenName = getTokenName('textColorFilled', color);
+  var foreground = euiTheme.components.buttons[textColorTokenName];
+  var background = euiTheme.components.buttons[backgroundTokenName];
+  return {
+    color: foreground,
+    backgroundColor: background
+  };
+};
+
+/**
+ * Creates the `empty` version of button styles using the text-variant and adding interactive styles.
+ * @param euiThemeContext
+ * @param color One of the named button colors or 'disabled'
+ * @returns Style object `{ backgroundColor, color }` where `background` is typically used for interactive states
+ */
+export var euiButtonEmptyColor = function euiButtonEmptyColor(euiThemeContext, color) {
+  var foreground;
+  var background;
+  switch (color) {
+    case 'disabled':
+      foreground = euiButtonColor(euiThemeContext, color).color;
+      background = 'transparent';
+      break;
+    default:
+      {
+        var backgroundToken = getTokenName('backgroundEmpty', color, 'hover');
+        foreground = euiButtonColor(euiThemeContext, color).color;
+        background = euiThemeContext.euiTheme.components.buttons[backgroundToken];
+        break;
+      }
+  }
+  return {
+    color: foreground,
+    backgroundColor: background
+  };
+};
+
+/**
+ * Given the button display type, returns the Emotion based color keys.
+ * @param options Button display type
+ * @returns An object of `_EuiButtonColor` keys including `disabled`
+ */
+export var useEuiButtonColorCSS = function useEuiButtonColorCSS() {
+  var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _options$display = options.display,
+    display = _options$display === void 0 ? 'base' : _options$display;
+  var colorsDisplaysMap = useEuiMemoizedStyles(euiButtonDisplaysColors);
+  return colorsDisplaysMap[display];
+};
+var euiButtonDisplaysColors = function euiButtonDisplaysColors(euiThemeContext) {
+  var COLORS = [].concat(BUTTON_COLORS, ['disabled']);
+  var displaysColorsMap = {};
+  BUTTON_DISPLAYS.forEach(function (display) {
+    displaysColorsMap[display] = {};
+    COLORS.forEach(function (color) {
+      switch (display) {
+        case 'base':
+          displaysColorsMap[display][color] = /*#__PURE__*/css(euiButtonColor(euiThemeContext, color), ";;label:displaysColorsMap-display-color;");
+          break;
+        case 'fill':
+          displaysColorsMap[display][color] = /*#__PURE__*/css(euiButtonFillColor(euiThemeContext, color), "outline-color:", euiThemeContext.colorMode === 'DARK' && color === 'text' ? 'currentColor' : euiThemeContext.euiTheme.colors.fullShade, ";;label:displaysColorsMap-display-color;");
+          break;
+        case 'empty':
+          displaysColorsMap[display][color] = /*#__PURE__*/css("color:", euiButtonEmptyColor(euiThemeContext, color).color, ";&:focus,&:active{background-color:", euiButtonEmptyColor(euiThemeContext, color).backgroundColor, ";};label:displaysColorsMap-display-color;");
+          break;
+      }
+
+      // Tweak auto-generated Emotion label/className output
+      var emotionOutput = displaysColorsMap[display][color];
+      emotionOutput.styles = emotionOutput.styles.replace('label:displaysColorsMap-display-color;', "label:".concat(display, "-").concat(color, ";"));
+    });
+  });
+  return displaysColorsMap;
+};
+
+/**
+ * Creates the translate animation when button is in focus.
+ * @returns string
+ */
+export var useEuiButtonFocusCSS = function useEuiButtonFocusCSS() {
+  return useEuiMemoizedStyles(euiButtonFocusCSS);
+};
+var euiButtonFocusAnimation = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  50% {\n    transform: translateY(1px);\n  }\n"])));
+var euiButtonFocusCSS = function euiButtonFocusCSS(_ref) {
+  var euiTheme = _ref.euiTheme;
+  var focusCSS = /*#__PURE__*/css(euiCanAnimate, "{transition:transform ", euiTheme.animation.normal, " ease-in-out,background-color ", euiTheme.animation.normal, " ease-in-out;&:hover:not(:disabled){transform:translateY(-1px);}&:focus{animation:", euiButtonFocusAnimation, " ", euiTheme.animation.normal, " ", euiTheme.animation.bounce, ";}&:active:not(:disabled){transform:translateY(1px);}};label:focusCSS;");
+  // Remove the auto-generated label.
+  // We could typically avoid a label by using a plain string `` instead of css``,
+  // but we need css`` for keyframes`` to work for the focus animation
+  focusCSS.styles = focusCSS.styles.replace('label:focusCSS;', '');
+  return focusCSS;
+};
+
+/**
+ * Map of `size` props to various sizings/scales
+ * that should remain consistent across all buttons
+ */
+export var euiButtonSizeMap = function euiButtonSizeMap(_ref2) {
+  var euiTheme = _ref2.euiTheme;
+  return {
+    xs: {
+      height: euiTheme.size.l,
+      radius: euiTheme.border.radius.small,
+      fontScale: 'xs'
+    },
+    s: {
+      height: euiTheme.size.xl,
+      radius: euiTheme.border.radius.small,
+      fontScale: 's'
+    },
+    m: {
+      height: euiTheme.size.xxl,
+      radius: euiTheme.border.radius.medium,
+      fontScale: 's'
+    }
+  };
+};

package/es/global_styling/mixins/_color.js

@@ -13,41 +13,29 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
  */
 
 import { css } from '@emotion/react';
-import { shade, tint, tintOrShade, transparentize, useEuiMemoizedStyles } from '../../services';
-export var BACKGROUND_COLORS = ['transparent', 'plain', 'subdued', 'accent', 'primary', 'success', 'warning', 'danger'];
+import { useEuiMemoizedStyles } from '../../services';
+import { getTokenName } from '@elastic/eui-theme-common';
+export var BACKGROUND_COLORS = ['transparent', 'plain', 'subdued', 'highlighted', 'accent', 'accentSecondary', 'primary', 'success', 'warning', 'danger'];
 /**
+ * @deprecated - use background tokens directly
  * @returns A single background color with optional alpha transparency
  */
 export var 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 transparentize(euiTheme.colors.ghost, 0.2);
-    } else if (color === 'subdued') {
-      return colorMode === 'DARK' ? transparentize(euiTheme.colors.lightShade, 0.4) : transparentize(euiTheme.colors.lightShade, 0.2);
-    } else {
-      return transparentize(euiTheme.colors[color], 0.1);
-    }
+    var tokenName = getTokenName('backgroundTransparent', color);
+    return euiTheme.colors[tokenName];
   } else {
-    var _tintOrShade = function _tintOrShade(color) {
-      return colorMode === 'DARK' ? shade(color, 0.8) : 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 = 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. {
@@ -67,6 +55,10 @@ var _euiBackgroundColorMap = function _euiBackgroundColorMap(euiThemeContext) {
     }, {})
   };
 };
+
+/**
+ * @deprecated
+ */
 export var useEuiBackgroundColor = function useEuiBackgroundColor(color) {
   var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
     method = _ref3.method;
@@ -80,29 +72,37 @@ export var useEuiBackgroundColor = function useEuiBackgroundColor(color) {
  */
 var _euiBackgroundColors = function _euiBackgroundColors(euiThemeContext) {
   return BACKGROUND_COLORS.reduce(function (acc, color) {
-    return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, color, /*#__PURE__*/css("background-color:", euiBackgroundColor(euiThemeContext, color), ";label:", color, ";")));
+    var tokenName = getTokenName('backgroundBase', color);
+    var backgroundColor = color === 'transparent' ? 'transparent' : euiThemeContext.euiTheme.colors[tokenName];
+    return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, color, /*#__PURE__*/css("background-color:", backgroundColor, ";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``, ... }
+ */
 export var useEuiBackgroundColorCSS = function useEuiBackgroundColorCSS() {
   return useEuiMemoizedStyles(_euiBackgroundColors);
 };
 
 /**
  * Border colors
+ * @deprecated - use border tokens directly or use
+ * `useEuiBorderColorCSS()` for composed styles
  */
 
 export var 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 tintOrShade(euiTheme.colors.warning, 0.4, colorMode);
     default:
-      return tintOrShade(euiTheme.colors[color], 0.6, colorMode);
+      {
+        var tokenName = getTokenName('borderBase', color);
+        return euiTheme.colors[tokenName];
+      }
   }
 };
 
@@ -112,9 +112,17 @@ export var euiBorderColor = function euiBorderColor(_ref4, color) {
  */
 var _euiBorderColors = function _euiBorderColors(euiThemeContext) {
   return BACKGROUND_COLORS.reduce(function (acc, color) {
-    return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, color, /*#__PURE__*/css("border-color:", euiBorderColor(euiThemeContext, color), ";label:", color, ";")));
+    var borderToken = getTokenName('borderBase', color);
+    var borderColor = color === 'transparent' ? euiThemeContext.euiTheme.border.color : euiThemeContext.euiTheme.colors[borderToken];
+    return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, color, /*#__PURE__*/css("border-color:", borderColor, ";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``, ... }
+ */
 export var useEuiBorderColorCSS = function useEuiBorderColorCSS() {
   return useEuiMemoizedStyles(_euiBorderColors);
 };

package/es/global_styling/mixins/index.js

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

package/es/global_styling/reset/global_styles.js

@@ -17,7 +17,7 @@ import React from 'react';
 import { Global, css } from '@emotion/react';
 import { euiFocusRing, euiScrollBarStyles } from '../mixins';
 import { logicalCSS } from '../functions';
-import { shade, tint, transparentize } from '../../services/color';
+import { transparentize } from '../../services/color';
 import { useEuiTheme } from '../../services/theme';
 import { resetStyles as reset } from './reset';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -35,7 +35,7 @@ export var 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 = euiScrollBarStyles(euiThemeContext, {
-    trackColor: colorMode === 'LIGHT' ? shade(colors.body, 0.03) : tint(colors.body, 0.07),
+    trackColor: euiTheme.components.scrollbarTrackColor,
     width: 'auto'
   });
 

package/es/global_styling/variables/_colors_vis.js

@@ -6,56 +6,4 @@
  * 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'
-  }
-};
-export var 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
-};
+export { colorVis } from '../../themes/amsterdam/global_styling/variables/_colors_vis';

package/es/global_styling/variables/animations.js

@@ -6,25 +6,4 @@
  * 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.
- */
-export var 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).
- */
-export var euiCantAnimate = '@media screen and (prefers-reduced-motion: reduce)';
-
-/**
- * Speeds / Durations / Delays
- */
-
-export var EuiThemeAnimationSpeeds = ['extraFast', 'fast', 'normal', 'slow', 'extraSlow'];
-/**
- * Easings / Timing functions
- */
-
-export var EuiThemeAnimationEasings = ['bounce', 'resistance'];
+export { euiCanAnimate, euiCantAnimate, EuiThemeAnimationSpeeds, EuiThemeAnimationEasings } from '@elastic/eui-theme-common';

package/es/global_styling/variables/breakpoint.js

@@ -6,10 +6,4 @@
  * Side Public License, v 1.
  */
 
-export var 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)
+export { EuiThemeBreakpoints } from '@elastic/eui-theme-common';

package/es/global_styling/variables/levels.js

@@ -6,20 +6,4 @@
  * 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
- */
-
-export var EuiThemeLevels = ['toast', 'modal', 'mask', 'navigation', 'menu', 'header', 'flyout', 'maskBelowHeader', 'content'];
+export { EuiThemeLevels } from '@elastic/eui-theme-common';

package/es/global_styling/variables/shadow.js

@@ -6,14 +6,4 @@
  * Side Public License, v 1.
  */
 
-export var EuiThemeShadowSizes = ['xs', 's', 'm', 'l', 'xl'];
-/**
- * Shadow t-shirt sizes descriptions
- */
-export var _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.'
-};
+export { EuiThemeShadowSizes, _EuiShadowSizesDescriptions } from '@elastic/eui-theme-common';

package/es/global_styling/variables/size.js

@@ -6,4 +6,4 @@
  * Side Public License, v 1.
  */
 
-export var EuiThemeSizes = ['xxs', 'xs', 's', 'm', 'base', 'l', 'xl', 'xxl', 'xxxl', 'xxxxl'];
+export { EuiThemeSizes } from '@elastic/eui-theme-common';

package/es/global_styling/variables/typography.js

@@ -6,35 +6,4 @@
  * Side Public License, v 1.
  */
 
-/**
- * Font units of measure
- */
-
-export var EuiThemeFontUnits = ['rem', 'px', 'em'];
-/*
- * Font scale
- */
-
-export var EuiThemeFontScales = ['xxxs', 'xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'];
-
-/*
- * Font base settings
- */
-
-/*
- * Font weights
- */
-
-export var EuiThemeFontWeights = ['light', 'regular', 'medium', 'semiBold', 'bold'];
-
-/**
- * Body / Base styles
- */
-
-/**
- * Title styles
- */
-
-/*
- * Font
- */
+export { EuiThemeFontUnits, EuiThemeFontScales, EuiThemeFontWeights } from '@elastic/eui-theme-common';