@elastic/eui 99.4.0 → 100.0.0

package/optimize/es/global_styling/functions/math.js

@@ -1,7 +1,3 @@
-import _typeof from "@babel/runtime/helpers/typeof";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _setPrototypeOf from "@babel/runtime/helpers/setPrototypeOf";
-function _wrapRegExp() { _wrapRegExp = function _wrapRegExp(e, r) { return new BabelRegExp(e, void 0, r); }; var e = RegExp.prototype, r = new WeakMap(); function BabelRegExp(e, t, p) { var o = RegExp(e, t); return r.set(o, p || r.get(e)), _setPrototypeOf(o, BabelRegExp.prototype); } function buildGroups(e, t) { var p = r.get(t); return Object.keys(p).reduce(function (r, t) { var o = p[t]; if ("number" == typeof o) r[t] = e[o];else { for (var i = 0; void 0 === e[o[i]] && i + 1 < o.length;) i++; r[t] = e[o[i]]; } return r; }, Object.create(null)); } return _inherits(BabelRegExp, RegExp), BabelRegExp.prototype.exec = function (r) { var t = e.exec.call(this, r); if (t) { t.groups = buildGroups(t, this); var p = t.indices; p && (p.groups = buildGroups(p, this)); } return t; }, BabelRegExp.prototype[Symbol.replace] = function (t, p) { if ("string" == typeof p) { var o = r.get(this); return e[Symbol.replace].call(this, t, p.replace(/\$<([^>]+)>/g, function (e, r) { var t = o[r]; return "$" + (Array.isArray(t) ? t.join("$") : t); })); } if ("function" == typeof p) { var i = this; return e[Symbol.replace].call(this, t, function () { var e = arguments; return "object" != _typeof(e[e.length - 1]) && (e = [].slice.call(e)).push(buildGroups(e, i)), p.apply(this, e); }); } return e[Symbol.replace].call(this, t, p); }, _wrapRegExp.apply(this, arguments); }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -10,48 +6,4 @@ function _wrapRegExp() { _wrapRegExp = function _wrapRegExp(e, r) { return new B
  * Side Public License, v 1.
  */
 
-/**
- * Utility for performing math callbacks on a string with CSS units
- * and returning a string with its unit preserved.
- *
- * Example usage:
- * mathWithUnits('4px', (x) => x / 2) = '2px';
- * mathWithUnits(euiTheme.size.xs, (x) => x + 2) = '6px';
- * mathWithUnits([euiTheme.size.l, euiTheme.size.s], (x, y) => x - y) = '16px';
- */
-// Unfortunately, this is the CSSProperties[] type used for several euiTheme vars
-
-export var mathWithUnits = function mathWithUnits(values, callback) {
-  var unit = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
-  if (!Array.isArray(values)) values = [values];
-  var foundNumericValues = [];
-  var foundUnit = '';
-  values.forEach(function (value) {
-    if (typeof value === 'string') {
-      var _matches$groups, _matches$groups2;
-      var regex = /*#__PURE__*/_wrapRegExp(/(\x2D?[\d.]+)(%|[a-zA-Z]*)/, {
-        value: 1,
-        unit: 2
-      });
-      var matches = regex.exec(value);
-      var numericValue = Number(matches === null || matches === void 0 || (_matches$groups = matches.groups) === null || _matches$groups === void 0 ? void 0 : _matches$groups.value);
-      if (!isNaN(numericValue)) {
-        foundNumericValues.push(numericValue);
-      } else {
-        throw new Error('No valid numeric value found');
-      }
-      if (!unit && matches !== null && matches !== void 0 && (_matches$groups2 = matches.groups) !== null && _matches$groups2 !== void 0 && _matches$groups2.unit) {
-        if (!foundUnit) {
-          foundUnit = matches.groups.unit;
-        } else if (foundUnit !== matches.groups.unit) {
-          throw new Error('Multiple units found. Use `calc()` to mix and math multiple unit types (e.g. `%` & `px`) instead');
-        }
-      }
-    } else if (typeof value === 'number') {
-      foundNumericValues.push(value);
-    } else {
-      throw new Error('Invalid value type - pass a string or number');
-    }
-  });
-  return "".concat(callback.apply(void 0, foundNumericValues)).concat(unit || foundUnit);
-};
+export { mathWithUnits } from '@elastic/eui-theme-common';

package/optimize/es/global_styling/functions/size.js

@@ -1,4 +1,3 @@
-import _typeof from "@babel/runtime/helpers/typeof";
 /*
  * 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 @@ import _typeof from "@babel/runtime/helpers/typeof";
  * 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/optimize/es/global_styling/mixins/_button.js

@@ -0,0 +1,159 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject;
+/*
+ * 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/optimize/es/global_styling/mixins/_color.js

@@ -10,41 +10,29 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  */
 
 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. {
@@ -64,6 +52,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;
@@ -77,29 +69,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];
+      }
   }
 };
 
@@ -109,9 +109,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/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

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

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

@@ -14,7 +14,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";
@@ -32,7 +32,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'
   });
 
@@ -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/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/optimize/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/optimize/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/optimize/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/optimize/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/optimize/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';