@elastic/eui 99.4.0 → 100.0.0

package/optimize/lib/themes/amsterdam/global_styling/mixins/button.js

@@ -1,212 +1,54 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useEuiButtonFocusCSS = exports.useEuiButtonColorCSS = exports.euiButtonSizeMap = exports.euiButtonFillColor = exports.euiButtonEmptyColor = exports.euiButtonColor = exports.BUTTON_DISPLAYS = exports.BUTTON_COLORS = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _react = require("@emotion/react");
-var _global_styling = require("../../../../global_styling");
-var _services = require("../../../../services");
-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.
- */
-var BUTTON_COLORS = exports.BUTTON_COLORS = ['text', 'accent', 'primary', 'success', 'warning', 'danger'];
-var BUTTON_DISPLAYS = exports.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 }`
- */
-var euiButtonColor = exports.euiButtonColor = function euiButtonColor(euiThemeContext, color) {
-  var euiTheme = euiThemeContext.euiTheme,
-    colorMode = euiThemeContext.colorMode;
-  function tintOrShade(color) {
-    return colorMode === 'DARK' ? (0, _services.shade)(color, 0.7) : (0, _services.tint)(color, 0.8);
+Object.defineProperty(exports, "BUTTON_COLORS", {
+  enumerable: true,
+  get: function get() {
+    return _button.BUTTON_COLORS;
   }
-  var foreground;
-  var background;
-  switch (color) {
-    case 'disabled':
-      return {
-        color: euiTheme.colors.disabledText,
-        backgroundColor: (0, _services.transparentize)(euiTheme.colors.lightShade, 0.15)
-      };
-    case 'text':
-      foreground = euiTheme.colors[color];
-      background = colorMode === 'DARK' ? (0, _services.shade)(euiTheme.colors.lightShade, 0.2) : (0, _services.tint)(euiTheme.colors.lightShade, 0.5);
-      break;
-    default:
-      foreground = euiTheme.colors["".concat(color, "Text")];
-      background = tintOrShade(euiTheme.colors[color]);
-      break;
+});
+Object.defineProperty(exports, "BUTTON_DISPLAYS", {
+  enumerable: true,
+  get: function get() {
+    return _button.BUTTON_DISPLAYS;
   }
-  return {
-    color: (0, _services.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 }`
- */
-var euiButtonFillColor = exports.euiButtonFillColor = function euiButtonFillColor(euiThemeContext, color) {
-  var euiTheme = euiThemeContext.euiTheme,
-    colorMode = euiThemeContext.colorMode;
-  var getForegroundColor = function getForegroundColor(background) {
-    return _services.isColorDark.apply(void 0, (0, _toConsumableArray2.default)((0, _services.hexToRgb)(background))) ? euiTheme.colors.ghost : euiTheme.colors.ink;
-  };
-  var background;
-  var foreground;
-  switch (color) {
-    case 'disabled':
-      background = euiButtonColor(euiThemeContext, color).backgroundColor;
-      foreground = euiButtonColor(euiThemeContext, color).color;
-      break;
-    case 'text':
-      background = colorMode === 'DARK' ? euiTheme.colors.text : euiTheme.colors.darkShade;
-      foreground = getForegroundColor(background);
-      break;
-    case 'success':
-    case 'accent':
-      // Success / accent fills are hard to read on light mode even though they pass color contrast ratios
-      // TODO: If WCAG 3 gets adopted (which would calculates luminosity & would allow us to use white text instead),
-      // we can get rid of this case (https://blog.datawrapper.de/color-contrast-check-data-vis-wcag-apca/)
-      background = colorMode === 'LIGHT' ? (0, _services.tint)(euiTheme.colors[color], 0.3) : euiTheme.colors[color];
-      foreground = getForegroundColor(background);
-      break;
-    default:
-      background = euiTheme.colors[color];
-      foreground = getForegroundColor(background);
-      break;
+});
+Object.defineProperty(exports, "euiButtonColor", {
+  enumerable: true,
+  get: function get() {
+    return _button.euiButtonColor;
   }
-  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
- */
-var euiButtonEmptyColor = exports.euiButtonEmptyColor = function euiButtonEmptyColor(euiThemeContext, color) {
-  var foreground;
-  var background;
-  switch (color) {
-    case 'disabled':
-      foreground = euiButtonColor(euiThemeContext, color).color;
-      background = 'transparent';
-      break;
-    case 'text':
-      foreground = euiButtonColor(euiThemeContext, color).color;
-      background = (0, _global_styling.euiBackgroundColor)(euiThemeContext, 'subdued', {
-        method: 'transparent'
-      });
-      break;
-    default:
-      foreground = euiButtonColor(euiThemeContext, color).color;
-      background = (0, _global_styling.euiBackgroundColor)(euiThemeContext, color, {
-        method: 'transparent'
-      });
-      break;
+});
+Object.defineProperty(exports, "euiButtonEmptyColor", {
+  enumerable: true,
+  get: function get() {
+    return _button.euiButtonEmptyColor;
   }
-  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`
- */
-var useEuiButtonColorCSS = exports.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 = (0, _services.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__*/(0, _react.css)(euiButtonColor(euiThemeContext, color), ";;label:displaysColorsMap-display-color;");
-          break;
-        case 'fill':
-          displaysColorsMap[display][color] = /*#__PURE__*/(0, _react.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__*/(0, _react.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
- */
-var useEuiButtonFocusCSS = exports.useEuiButtonFocusCSS = function useEuiButtonFocusCSS() {
-  return (0, _services.useEuiMemoizedStyles)(euiButtonFocusCSS);
-};
-var euiButtonFocusAnimation = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  50% {\n    transform: translateY(1px);\n  }\n"])));
-var euiButtonFocusCSS = function euiButtonFocusCSS(_ref) {
-  var euiTheme = _ref.euiTheme;
-  var focusCSS = /*#__PURE__*/(0, _react.css)(_global_styling.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
- */
-var euiButtonSizeMap = exports.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'
-    }
-  };
-};
+});
+Object.defineProperty(exports, "euiButtonFillColor", {
+  enumerable: true,
+  get: function get() {
+    return _button.euiButtonFillColor;
+  }
+});
+Object.defineProperty(exports, "euiButtonSizeMap", {
+  enumerable: true,
+  get: function get() {
+    return _button.euiButtonSizeMap;
+  }
+});
+Object.defineProperty(exports, "useEuiButtonColorCSS", {
+  enumerable: true,
+  get: function get() {
+    return _button.useEuiButtonColorCSS;
+  }
+});
+Object.defineProperty(exports, "useEuiButtonFocusCSS", {
+  enumerable: true,
+  get: function get() {
+    return _button.useEuiButtonFocusCSS;
+  }
+});
+var _button = require("../../../../global_styling/mixins/_button");

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

@@ -3,158 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useEuiSlightShadowHover = exports.useEuiShadowFlat = exports.useEuiShadow = exports.euiSlightShadowHover = exports.euiShadowXSmall = exports.euiShadowXLarge = exports.euiShadowSmall = exports.euiShadowMedium = exports.euiShadowLarge = exports.euiShadowFlat = exports.euiShadow = void 0;
-var _theme = require("../../../../services/theme");
-var _functions = require("../functions");
-/*
- * 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.
- */
-
-/**
- * euiSlightShadow
- */
-var euiShadowXSmall = exports.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((0, _functions.getShadowColor)(color, 0.04, colorMode), ",\n  0 2.3px 2px ").concat((0, _functions.getShadowColor)(color, 0.03, colorMode), ";\n");
-};
-
-/**
- * bottomShadowSmall
- */
-var euiShadowSmall = exports.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((0, _functions.getShadowColor)(color, 0.07, colorMode), ",\n  0 1.9px 4px ").concat((0, _functions.getShadowColor)(color, 0.05, colorMode), ",\n  0 4.5px 10px ").concat((0, _functions.getShadowColor)(color, 0.05, colorMode), ";\n");
-};
-
-/**
- * bottomShadowMedium
- */
-var euiShadowMedium = exports.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((0, _functions.getShadowColor)(color, 0.2, colorMode), ");");
-  } else {
-    return "box-shadow:\n      0 .9px 4px ".concat((0, _functions.getShadowColor)(color, 0.08, colorMode), ",\n      0 2.6px 8px ").concat((0, _functions.getShadowColor)(color, 0.06, colorMode), ",\n      0 5.7px 12px ").concat((0, _functions.getShadowColor)(color, 0.05, colorMode), ",\n      0 15px 15px ").concat((0, _functions.getShadowColor)(color, 0.04, colorMode), ";");
-  }
-};
-
-/**
- * bottomShadow
- */
-var euiShadowLarge = exports.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((0, _functions.getShadowColor)(color, 0.1, colorMode), ",\n  0 3.6px 13px ").concat((0, _functions.getShadowColor)(color, 0.07, colorMode), ",\n  0 8.4px 23px ").concat((0, _functions.getShadowColor)(color, 0.06, colorMode), ",\n  0 23px 35px ").concat((0, _functions.getShadowColor)(color, 0.05, colorMode), ";\n");
-};
-
-/**
- * bottomShadowLarge
- */
-
-var euiShadowXLarge = exports.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((0, _functions.getShadowColor)(color, 0.13, colorMode), ",\n  0 ").concat(reverse ? '-' : '', "9.4px 24px ").concat((0, _functions.getShadowColor)(color, 0.09, colorMode), ",\n  0 ").concat(reverse ? '-' : '', "21.8px 43px ").concat((0, _functions.getShadowColor)(color, 0.08, colorMode), ";\n");
-};
-
-/**
- * slightShadowHover
- */
-var euiSlightShadowHover = exports.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((0, _functions.getShadowColor)(color, 0.1, colorMode), ",\n  0 3.6px 13px ").concat((0, _functions.getShadowColor)(color, 0.07, colorMode), ",\n  0 8.4px 23px ").concat((0, _functions.getShadowColor)(color, 0.06, colorMode), ",\n  0 23px 35px ").concat((0, _functions.getShadowColor)(color, 0.05, colorMode), ";\n");
-};
-var useEuiSlightShadowHover = exports.useEuiSlightShadowHover = function useEuiSlightShadowHover(color) {
-  var euiThemeContext = (0, _theme.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.
- */
-var euiShadowFlat = exports.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((0, _functions.getShadowColor)(color, 0.06, colorMode), ",\n  0 0 2px ").concat((0, _functions.getShadowColor)(color, 0.04, colorMode), ",\n  0 0 5px ").concat((0, _functions.getShadowColor)(color, 0.04, colorMode), ",\n  0 0 17px ").concat((0, _functions.getShadowColor)(color, 0.03, colorMode), ";\n");
-};
-var useEuiShadowFlat = exports.useEuiShadowFlat = function useEuiShadowFlat(color) {
-  var euiThemeContext = (0, _theme.useEuiTheme)();
-  return euiShadowFlat(euiThemeContext, {
-    color: color
-  });
-};
-var euiShadow = exports.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 '';
-  }
-};
-var useEuiShadow = exports.useEuiShadow = function useEuiShadow() {
-  var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'l';
-  var color = arguments.length > 1 ? arguments[1] : undefined;
-  var euiThemeContext = (0, _theme.useEuiTheme)();
-  return euiShadow(euiThemeContext, size, {
-    color: color
+var _shadow = require("../../../../global_styling/mixins/_shadow");
+Object.keys(_shadow).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _shadow[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _shadow[key];
+    }
   });
-};
+});

package/optimize/lib/themes/amsterdam/global_styling/variables/_borders.js

@@ -19,9 +19,9 @@ var _utils = require("../../../../services/theme/utils");
 var border = exports.border = {
   color: (0, _utils.computed)(function (_ref) {
     var _ref2 = (0, _slicedToArray2.default)(_ref, 1),
-      lightShade = _ref2[0];
-    return lightShade;
-  }, ['colors.lightShade']),
+      borderBaseSubdued = _ref2[0];
+    return borderBaseSubdued;
+  }, ['colors.borderBaseSubdued']),
   width: {
     thin: '1px',
     thick: '2px'

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

@@ -3,19 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.breakpoint = 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 breakpoint = exports.breakpoint = {
-  xl: 1200,
-  l: 992,
-  m: 768,
-  s: 575,
-  xs: 0
-};
+Object.defineProperty(exports, "breakpoint", {
+  enumerable: true,
+  get: function get() {
+    return _euiThemeCommon.breakpoint;
+  }
+});
+var _euiThemeCommon = require("@elastic/eui-theme-common");