@elastic/eui 99.3.0-classic.0 → 99.4.0

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

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

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),
-      borderBaseSubdued = _ref2[0];
-    return borderBaseSubdued;
-  }, ['colors.borderBaseSubdued']),
+      lightShade = _ref2[0];
+    return lightShade;
+  }, ['colors.lightShade']),
   width: {
     thin: '1px',
     thick: '2px'

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

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