@elastic/eui 106.7.0 → 107.0.0

package/optimize/es/components/flyout/flyout.styles.js

@@ -24,9 +24,16 @@ var _ref = process.env.NODE_ENV === "production" ? {
   styles: "animation-duration:0s!important;label:noAnimation;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "rks1ev-overlay",
+  styles: "&:has(.euiResizableButton){border-inline:none;};label:overlay;"
+} : {
+  name: "rks1ev-overlay",
+  styles: "&:has(.euiResizableButton){border-inline:none;};label:overlay;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
 export var euiFlyoutStyles = function euiFlyoutStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme,
-    colorMode = euiThemeContext.colorMode;
+  var euiTheme = euiThemeContext.euiTheme;
   return {
     euiFlyout: /*#__PURE__*/css("position:fixed;", logicalCSS('bottom', 0), " ", logicalCSS('top', 'var(--euiFixedHeadersOffset, 0)'), " ", logicalCSS('height', 'inherit'), " z-index:", euiTheme.levels.flyout, ";background:", euiTheme.colors.emptyShade, ";display:flex;flex-direction:column;align-items:stretch;&:focus{outline:none;}", maxedFlyoutWidth(euiThemeContext), ";;label:euiFlyout;"),
     // Flyout sizes
@@ -41,11 +48,15 @@ export var euiFlyoutStyles = function euiFlyoutStyles(euiThemeContext) {
     left: /*#__PURE__*/css(logicalCSS('left', 0), " clip-path:polygon(0 0, 150% 0, 150% 100%, 0 100%);", euiCanAnimate, "{animation:", euiFlyoutSlideInLeft, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ";};label:left;"),
     // Type
     overlay: {
-      overlay: /*#__PURE__*/css(euiShadowXLarge(euiThemeContext, {
-        borderAllInHighContrastMode: true
-      }), " &:has(.euiResizableButton){border-inline:none;};label:overlay;"),
-      left: /*#__PURE__*/css("border-inline-end:", colorMode === 'DARK' ? "".concat(euiTheme.border.width.thin, " solid\n          ").concat(euiTheme.colors.borderBaseFloating) : 'none', ";;label:left;"),
-      right: /*#__PURE__*/css("border-inline-start:", colorMode === 'DARK' ? "".concat(euiTheme.border.width.thin, " solid\n          ").concat(euiTheme.colors.borderBaseFloating) : 'none', ";;label:right;")
+      overlay: _ref2,
+      left: /*#__PURE__*/css(euiShadowXLarge(euiThemeContext, {
+        borderAllInHighContrastMode: true,
+        border: 'right'
+      }), ";;label:left;"),
+      right: /*#__PURE__*/css(euiShadowXLarge(euiThemeContext, {
+        borderAllInHighContrastMode: true,
+        border: 'left'
+      }), ";;label:right;")
     },
     push: {
       push: /*#__PURE__*/css("clip-path:none;z-index:", Number(euiTheme.levels.flyout) - 1, ";;label:push;"),

package/optimize/es/components/header/header.styles.js

@@ -24,7 +24,9 @@ export var euiHeaderStyles = function euiHeaderStyles(euiThemeContext) {
     height = _euiHeaderVariables.height,
     padding = _euiHeaderVariables.padding;
   return {
-    euiHeader: /*#__PURE__*/css("display:flex;justify-content:space-between;", logicalCSS('height', height), " ", logicalCSS('padding-horizontal', padding), " ", logicalCSS('border-bottom', euiTheme.border.thin), " ", euiShadowXSmall(euiThemeContext), ";;label:euiHeader;"),
+    euiHeader: /*#__PURE__*/css("display:flex;justify-content:space-between;", logicalCSS('height', height), " ", logicalCSS('padding-horizontal', padding), " ", logicalCSS('border-bottom', euiTheme.border.thin), " ", euiShadowXSmall(euiThemeContext, {
+      border: 'none'
+    }), "&+.euiHeader{clip-path:polygon(0 0, 100% 0, 100% 100vh, 0 100vh);};label:euiHeader;"),
     // Position
     static: /*#__PURE__*/css("z-index:", Number(euiTheme.levels.header) - 1, ";position:relative;;label:static;"),
     fixed: /*#__PURE__*/css("z-index:", Number(euiTheme.levels.header) + 1, ";position:fixed;", logicalCSS('top', 0), " ", logicalCSS('horizontal', 0), ";;label:fixed;"),

package/optimize/es/components/page_template/inner/page_inner.styles.js

@@ -13,7 +13,9 @@ export var euiPageInnerStyles = function euiPageInnerStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     euiPageInner: /*#__PURE__*/css("display:flex;flex-direction:column;align-items:stretch;flex:1 1 100%;", logicalCSS('max-width', '100%'), " ", logicalCSS('min-width', '0'), ";;label:euiPageInner;"),
-    panelled: /*#__PURE__*/css("background:", euiThemeContext.euiTheme.colors.backgroundBasePlain, ";", euiShadow(euiThemeContext, 'm'), ";;label:panelled;"),
+    panelled: /*#__PURE__*/css("background:", euiThemeContext.euiTheme.colors.backgroundBasePlain, ";", euiShadow(euiThemeContext, 'm', {
+      border: 'none'
+    }), ";;label:panelled;"),
     border: {
       top: /*#__PURE__*/css(logicalCSS('border-top', euiTheme.border.thin), ";;label:top;"),
       left: /*#__PURE__*/css(logicalCSS('border-left', euiTheme.border.thin), ";;label:left;")

package/optimize/es/components/panel/panel.styles.js

@@ -8,7 +8,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { euiShadow } from '@elastic/eui-theme-common';
+import { euiBorderStyles, euiShadow, euiShadowHover } from '@elastic/eui-theme-common';
 import { euiCanAnimate, logicalCSS, logicalTextAlignCSS } from '../../global_styling';
 import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 export var euiPanelBorderStyles = function euiPanelBorderStyles(euiThemeContext, options) {
@@ -23,7 +23,9 @@ export var euiPanelBorderStyles = function euiPanelBorderStyles(euiThemeContext,
    euiTheme.colors.borderBaseFloating is enough then */
   var hasVisibleBorder = hasFloatingBorder && colorMode === 'DARK';
   return highContrastModeStyles(euiThemeContext, {
-    none: "\n      /* Using a pseudo element for the border instead of floating border only \n      because the transparent border might otherwise be visible with arbitrary \n      full-width/height content in light mode. */\n      &::after {\n        content: '';\n        position: absolute;\n        /* ensure to keep on top of flush content */\n        z-index: 0;\n        inset: 0;\n        border: ".concat(euiTheme.border.width.thin, " solid\n          ").concat((borderColor !== null && borderColor !== void 0 ? borderColor : hasVisibleBorder) ? euiTheme.border.color : euiTheme.colors.borderBaseFloating, ";\n        border-radius: inherit;\n        pointer-events: none;\n      }\n    "),
+    none: "\n      /* Using a pseudo element for the border instead of floating border only\n      because the transparent border might otherwise be visible with arbitrary\n      full-width/height content in light mode. */\n      ".concat(euiBorderStyles(euiThemeContext, {
+      borderColor: (borderColor !== null && borderColor !== void 0 ? borderColor : hasVisibleBorder) ? euiTheme.border.color : euiTheme.colors.borderBaseFloating
+    }), "\n    "),
     preferred: "\n      border: ".concat(euiTheme.border.thin, ";\n    ")
   });
 };
@@ -49,9 +51,7 @@ export var euiPanelStyles = function euiPanelStyles(euiThemeContext) {
     // Base
     euiPanel: _ref2,
     grow: _ref,
-    hasShadow: /*#__PURE__*/css(euiShadow(euiThemeContext, 'm'), " ", euiPanelBorderStyles(euiThemeContext, {
-      hasFloatingBorder: false
-    }), ";;label:hasShadow;"),
+    hasShadow: /*#__PURE__*/css(euiShadow(euiThemeContext, 'm'), ";;label:hasShadow;"),
     hasBorder: /*#__PURE__*/css(euiPanelBorderStyles(euiThemeContext, {
       borderColor: euiTheme.border.color,
       hasFloatingBorder: false
@@ -62,7 +62,7 @@ export var euiPanelStyles = function euiPanelStyles(euiThemeContext) {
     },
     // Setup interactive behavior
     isClickable: /*#__PURE__*/css(euiCanAnimate, "{transition:box-shadow ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ",transform ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";}&:enabled{display:block;", logicalCSS('width', '100%'), " ", logicalTextAlignCSS('left'), ";}&:hover,&:focus{", highContrastModeStyles(euiThemeContext, {
-      none: euiShadow(euiThemeContext, 'l'),
+      none: euiShadowHover(euiThemeContext, 'l'),
       // Windows high contrast themes ignore box-shadows - use a filter workaround instead
       preferred: "\n            &:not(.euiPanel--transparent) {\n              filter: drop-shadow(0 ".concat(euiTheme.border.width.thick, " 0 ").concat(euiTheme.border.color, ");\n            }\n          ")
     }), " transform:translateY(-2px);cursor:pointer;};label:isClickable;")

package/optimize/es/global_styling/mixins/_shadow.js

@@ -6,13 +6,19 @@
  * Side Public License, v 1.
  */
 
-import { euiShadowFlat, euiShadow, euiSlightShadowHover, euiShadowXSmall, euiShadowSmall, euiShadowMedium, euiShadowLarge, euiShadowXLarge } from '@elastic/eui-theme-common';
+import { euiShadowFlat, euiShadow, euiSlightShadowHover, euiShadowXSmall, euiShadowSmall, euiShadowMedium, euiShadowLarge, euiShadowXLarge, euiShadowHover } from '@elastic/eui-theme-common';
 import { useEuiTheme } from '../../services/theme';
-export { euiShadowFlat, euiShadow, euiSlightShadowHover, euiShadowXSmall, euiShadowSmall, euiShadowMedium, euiShadowLarge, euiShadowXLarge };
+export { euiShadowFlat, euiShadow, euiSlightShadowHover, euiShadowXSmall, euiShadowSmall, euiShadowMedium, euiShadowLarge, euiShadowXLarge, euiShadowHover };
+
+/** @deprecated */
+
+/** @deprecated use euiShadowHover/useEuiShadowHover instead */
 export var useEuiSlightShadowHover = function useEuiSlightShadowHover(options) {
   var euiThemeContext = useEuiTheme();
   return euiSlightShadowHover(euiThemeContext, options);
 };
+
+/** @deprecated - useEuiShadow instead */
 export var useEuiShadowFlat = function useEuiShadowFlat(options) {
   var euiThemeContext = useEuiTheme();
   return euiShadowFlat(euiThemeContext, options);
@@ -22,4 +28,10 @@ export var useEuiShadow = function useEuiShadow() {
   var options = arguments.length > 1 ? arguments[1] : undefined;
   var euiThemeContext = useEuiTheme();
   return euiShadow(euiThemeContext, size, options);
+};
+export var useEuiShadowHover = function useEuiShadowHover() {
+  var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'l';
+  var options = arguments.length > 1 ? arguments[1] : undefined;
+  var euiThemeContext = useEuiTheme();
+  return euiShadowHover(euiThemeContext, size, options);
 };

package/optimize/es/themes/amsterdam/global_styling/variables/_shadows.js

@@ -0,0 +1,436 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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
+ * 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 { formatMultipleBoxShadow } from '@elastic/eui-theme-common';
+
+// in Amsterdam this is `color.shadow`, which computes to `ink` (#000)
+var SHADOW_COLOR = '#000000';
+export var shadowPrimitives = {
+  xs: {
+    light: [{
+      opacity: 0.04 * 1,
+      x: 0,
+      y: 0.8,
+      blur: 0.8,
+      spread: 0
+    }, {
+      opacity: 0.03 * 1,
+      x: 0,
+      y: 2.3,
+      blur: 2,
+      spread: 0
+    }],
+    dark: [{
+      opacity: 0.04 * 3.5,
+      x: 0,
+      y: 0.8,
+      blur: 0.8,
+      spread: 0
+    }, {
+      opacity: 0.03 * 3.5,
+      x: 0,
+      y: 2.3,
+      blur: 2,
+      spread: 0
+    }]
+  },
+  s: {
+    light: [{
+      opacity: 0.07 * 1,
+      x: 0,
+      y: 0.7,
+      blur: 1.4,
+      spread: 0
+    }, {
+      opacity: 0.05 * 1,
+      x: 0,
+      y: 1.9,
+      blur: 4,
+      spread: 0
+    }, {
+      opacity: 0.05 * 1,
+      x: 0,
+      y: 4.5,
+      blur: 10,
+      spread: 0
+    }],
+    dark: [{
+      opacity: 0.07 * 3.5,
+      x: 0,
+      y: 0.7,
+      blur: 1.4,
+      spread: 0
+    }, {
+      opacity: 0.05 * 3.5,
+      x: 0,
+      y: 1.9,
+      blur: 4,
+      spread: 0
+    }, {
+      opacity: 0.05 * 3.5,
+      x: 0,
+      y: 4.5,
+      blur: 10,
+      spread: 0
+    }]
+  },
+  m: {
+    light: [{
+      opacity: 0.08 * 1,
+      x: 0,
+      y: 0.9,
+      blur: 4,
+      spread: 0
+    }, {
+      opacity: 0.06 * 1,
+      x: 0,
+      y: 2.6,
+      blur: 8,
+      spread: 0
+    }, {
+      opacity: 0.05 * 1,
+      x: 0,
+      y: 5.7,
+      blur: 12,
+      spread: 0
+    }, {
+      opacity: 0.04 * 1,
+      x: 0,
+      y: 15,
+      blur: 15,
+      spread: 0
+    }],
+    dark: [{
+      opacity: 0.08 * 3.5,
+      x: 0,
+      y: 0.9,
+      blur: 4,
+      spread: 0
+    }, {
+      opacity: 0.06 * 3.5,
+      x: 0,
+      y: 2.6,
+      blur: 8,
+      spread: 0
+    }, {
+      opacity: 0.05 * 3.5,
+      x: 0,
+      y: 5.7,
+      blur: 12,
+      spread: 0
+    }, {
+      opacity: 0.04 * 3.5,
+      x: 0,
+      y: 15,
+      blur: 15,
+      spread: 0
+    }]
+  },
+  l: {
+    light: [{
+      opacity: 0.1 * 1,
+      x: 0,
+      y: 1,
+      blur: 5,
+      spread: 0
+    }, {
+      opacity: 0.07 * 1,
+      x: 0,
+      y: 3.6,
+      blur: 13,
+      spread: 0
+    }, {
+      opacity: 0.06 * 1,
+      x: 0,
+      y: 8.4,
+      blur: 23,
+      spread: 0
+    }, {
+      opacity: 0.05 * 1,
+      x: 0,
+      y: 23,
+      blur: 35,
+      spread: 0
+    }],
+    dark: [{
+      opacity: 0.1 * 3.5,
+      x: 0,
+      y: 1,
+      blur: 5,
+      spread: 0
+    }, {
+      opacity: 0.07 * 3.5,
+      x: 0,
+      y: 3.6,
+      blur: 13,
+      spread: 0
+    }, {
+      opacity: 0.06 * 3.5,
+      x: 0,
+      y: 8.4,
+      blur: 23,
+      spread: 0
+    }, {
+      opacity: 0.05 * 3.5,
+      x: 0,
+      y: 23,
+      blur: 35,
+      spread: 0
+    }]
+  },
+  xl: {
+    light: [{
+      opacity: 0.13 * 1,
+      x: 0,
+      y: 2.7,
+      blur: 9,
+      spread: 0
+    }, {
+      opacity: 0.09 * 1,
+      x: 0,
+      y: 9.4,
+      blur: 24,
+      spread: 0
+    }, {
+      opacity: 0.08 * 1,
+      x: 0,
+      y: 21.8,
+      blur: 43,
+      spread: 0
+    }],
+    dark: [{
+      opacity: 0.13 * 3.5,
+      x: 0,
+      y: 2.7,
+      blur: 9,
+      spread: 0
+    }, {
+      opacity: 0.09 * 3.5,
+      x: 0,
+      y: 9.4,
+      blur: 24,
+      spread: 0
+    }, {
+      opacity: 0.08 * 3.5,
+      x: 0,
+      y: 21.8,
+      blur: 43,
+      spread: 0
+    }]
+  },
+  xxl: {
+    light: [],
+    dark: []
+  },
+  flat: {
+    light: [{
+      opacity: 0.06 * 1,
+      x: 0,
+      y: 0,
+      blur: 0.8,
+      spread: 0
+    }, {
+      opacity: 0.04 * 1,
+      x: 0,
+      y: 0,
+      blur: 2,
+      spread: 0
+    }, {
+      opacity: 0.04 * 1,
+      x: 0,
+      y: 0,
+      blur: 5,
+      spread: 0
+    }, {
+      opacity: 0.03 * 1,
+      x: 0,
+      y: 0,
+      blur: 17,
+      spread: 0
+    }],
+    dark: [{
+      opacity: 0.06 * 3.5,
+      x: 0,
+      y: 0,
+      blur: 0.8,
+      spread: 0
+    }, {
+      opacity: 0.04 * 3.5,
+      x: 0,
+      y: 0,
+      blur: 2,
+      spread: 0
+    }, {
+      opacity: 0.04 * 3.5,
+      x: 0,
+      y: 0,
+      blur: 5,
+      spread: 0
+    }, {
+      opacity: 0.03 * 3.5,
+      x: 0,
+      y: 0,
+      blur: 17,
+      spread: 0
+    }]
+  }
+};
+var shadowColors = {
+  colors: {
+    base: SHADOW_COLOR
+  }
+};
+var shadowsLight = _objectSpread(_objectSpread({}, shadowColors), {}, {
+  xs: {
+    down: formatMultipleBoxShadow(shadowPrimitives.xs.light, {
+      color: shadowColors.colors.base
+    }),
+    up: formatMultipleBoxShadow(shadowPrimitives.xs.light, {
+      direction: 'up',
+      color: shadowColors.colors.base
+    })
+  },
+  s: {
+    down: formatMultipleBoxShadow(shadowPrimitives.s.light, {
+      color: shadowColors.colors.base
+    }),
+    up: formatMultipleBoxShadow(shadowPrimitives.s.light, {
+      direction: 'up',
+      color: shadowColors.colors.base
+    })
+  },
+  m: {
+    down: formatMultipleBoxShadow(shadowPrimitives.m.light, {
+      color: shadowColors.colors.base
+    }),
+    up: formatMultipleBoxShadow(shadowPrimitives.m.light, {
+      direction: 'up',
+      color: shadowColors.colors.base
+    })
+  },
+  l: {
+    down: formatMultipleBoxShadow(shadowPrimitives.l.light, {
+      color: shadowColors.colors.base
+    }),
+    up: formatMultipleBoxShadow(shadowPrimitives.l.light, {
+      direction: 'up',
+      color: shadowColors.colors.base
+    })
+  },
+  xl: {
+    down: formatMultipleBoxShadow(shadowPrimitives.xl.light, {
+      color: shadowColors.colors.base
+    }),
+    up: formatMultipleBoxShadow(shadowPrimitives.xl.light, {
+      direction: 'up',
+      color: shadowColors.colors.base
+    })
+  },
+  hover: {
+    base: {
+      down: formatMultipleBoxShadow(shadowPrimitives.s.light.slice(1), {
+        color: shadowColors.colors.base
+      }),
+      up: formatMultipleBoxShadow(shadowPrimitives.s.light.slice(1), {
+        direction: 'up',
+        color: shadowColors.colors.base
+      })
+    },
+    xl: {
+      down: 'none',
+      up: 'none'
+    }
+  },
+  flat: {
+    down: formatMultipleBoxShadow(shadowPrimitives.flat.light, {
+      color: shadowColors.colors.base
+    }),
+    up: formatMultipleBoxShadow(shadowPrimitives.flat.light, {
+      direction: 'up',
+      color: shadowColors.colors.base
+    })
+  }
+});
+var shadowsDark = _objectSpread(_objectSpread({}, shadowColors), {}, {
+  xs: {
+    down: formatMultipleBoxShadow(shadowPrimitives.xs.dark, {
+      color: shadowColors.colors.base
+    }),
+    up: formatMultipleBoxShadow(shadowPrimitives.xs.dark, {
+      direction: 'up',
+      color: shadowColors.colors.base
+    })
+  },
+  s: {
+    down: formatMultipleBoxShadow(shadowPrimitives.s.dark, {
+      color: shadowColors.colors.base
+    }),
+    up: formatMultipleBoxShadow(shadowPrimitives.s.dark, {
+      direction: 'up',
+      color: shadowColors.colors.base
+    })
+  },
+  m: {
+    down: formatMultipleBoxShadow(shadowPrimitives.m.dark, {
+      color: shadowColors.colors.base
+    }),
+    up: formatMultipleBoxShadow(shadowPrimitives.m.dark, {
+      direction: 'up',
+      color: shadowColors.colors.base
+    })
+  },
+  l: {
+    down: formatMultipleBoxShadow(shadowPrimitives.l.dark, {
+      color: shadowColors.colors.base
+    }),
+    up: formatMultipleBoxShadow(shadowPrimitives.l.dark, {
+      direction: 'up',
+      color: shadowColors.colors.base
+    })
+  },
+  xl: {
+    down: formatMultipleBoxShadow(shadowPrimitives.xl.dark, {
+      color: shadowColors.colors.base
+    }),
+    up: formatMultipleBoxShadow(shadowPrimitives.xl.dark, {
+      direction: 'up',
+      color: shadowColors.colors.base
+    })
+  },
+  hover: {
+    base: {
+      down: formatMultipleBoxShadow(shadowPrimitives.s.dark.slice(1), {
+        color: shadowColors.colors.base
+      }),
+      up: formatMultipleBoxShadow(shadowPrimitives.s.dark.slice(1), {
+        direction: 'up',
+        color: shadowColors.colors.base
+      })
+    },
+    xl: {
+      down: 'none',
+      up: 'none'
+    }
+  },
+  flat: {
+    down: formatMultipleBoxShadow(shadowPrimitives.flat.dark, {
+      color: shadowColors.colors.base
+    }),
+    up: formatMultipleBoxShadow(shadowPrimitives.flat.dark, {
+      direction: 'up',
+      color: shadowColors.colors.base
+    })
+  }
+});
+export var shadows = {
+  LIGHT: shadowsLight,
+  DARK: shadowsDark
+};

package/optimize/es/themes/amsterdam/theme.js

@@ -15,6 +15,7 @@ import { border } from './global_styling/variables/_borders';
 import { levels } from './global_styling/variables/_levels';
 import { font } from './global_styling/variables/_typography';
 import { focus } from './global_styling/variables/_states';
+import { shadows } from './global_styling/variables/_shadows';
 import { components } from './global_styling/variables/_components';
 export var AMSTERDAM_NAME_KEY = 'EUI_THEME_AMSTERDAM';
 export var euiThemeAmsterdam = {
@@ -27,12 +28,14 @@ export var euiThemeAmsterdam = {
   breakpoint: breakpoint,
   levels: levels,
   focus: focus,
+  shadows: shadows,
   components: components,
   flags: {
     hasGlobalFocusColor: false,
     hasVisColorAdjustment: true,
     buttonVariant: 'classic',
-    formVariant: 'classic'
+    formVariant: 'classic',
+    shadowVariant: 'classic'
   }
 };
 export var EuiThemeAmsterdam = buildTheme(euiThemeAmsterdam, AMSTERDAM_NAME_KEY);

package/optimize/es/themes/json/eui_theme_amsterdam_dark.json

@@ -136,6 +136,42 @@
   },
   "euiBreakpointKeys": "'xs', 's', 'm', 'l', 'xl'",
   "euiShadowColor": "#000000",
+  "euiShadows": {
+    "xs": {
+      "down": "0px 0.8px 0.8px 0px hsla(0,0%,0%,0.14), 0px 2.3px 2px 0px hsla(0,0%,0%,0.105)",
+      "up": "0px 0.8px 0.8px 0px hsla(0,0%,0%,0.14), 0px -2.3px 2px 0px hsla(0,0%,0%,0.105)"
+    },
+    "s": {
+      "down": "0px 0.7px 1.4px 0px hsla(0,0%,0%,0.245), 0px 1.9px 4px 0px hsla(0,0%,0%,0.175), 0px 4.5px 10px 0px hsla(0,0%,0%,0.175)",
+      "up": "0px 0.7px 1.4px 0px hsla(0,0%,0%,0.245), 0px -1.9px 4px 0px hsla(0,0%,0%,0.175), 0px -4.5px 10px 0px hsla(0,0%,0%,0.175)"
+    },
+    "m": {
+      "down": "0px 0.9px 4px 0px hsla(0,0%,0%,0.28), 0px 2.6px 8px 0px hsla(0,0%,0%,0.21), 0px 5.7px 12px 0px hsla(0,0%,0%,0.175), 0px 15px 15px 0px hsla(0,0%,0%,0.14)",
+      "up": "0px 0.9px 4px 0px hsla(0,0%,0%,0.28), 0px -2.6px 8px 0px hsla(0,0%,0%,0.21), 0px -5.7px 12px 0px hsla(0,0%,0%,0.175), 0px -15px 15px 0px hsla(0,0%,0%,0.14)"
+    },
+    "l": {
+      "down": "0px 1px 5px 0px hsla(0,0%,0%,0.350), 0px 3.6px 13px 0px hsla(0,0%,0%,0.245), 0px 8.4px 23px 0px hsla(0,0%,0%,0.21), 0px 23px 35px 0px hsla(0,0%,0%,0.175)",
+      "up": "0px 1px 5px 0px hsla(0,0%,0%,0.350), 0px -3.6px 13px 0px hsla(0,0%,0%,0.245), 0px -8.4px 23px 0px hsla(0,0%,0%,0.21), 0px -23px 35px 0px hsla(0,0%,0%,0.175)"
+    },
+    "xl": {
+      "down": "0px 2.7px 9px 0px hsla(0,0%,0%,0.455), 0px 9.4px 24px 0px hsla(0,0%,0%,0.315), 0px 21.8px 43px 0px hsla(0,0%,0%,0.28)",
+      "up": "0px 2.7px 9px 0px hsla(0,0%,0%,0.455), 0px -9.4px 24px 0px hsla(0,0%,0%,0.315), 0px -21.8px 43px 0px hsla(0,0%,0%,0.28)"
+    },
+    "hover": {
+      "base": {
+        "down": "0px 1.9px 4px 0px hsla(0,0%,0%,0.175), 0px 4.5px 10px 0px hsla(0,0%,0%,0.175)",
+        "up": "0px 1.9px 4px 0px hsla(0,0%,0%,0.175), 0px -4.5px 10px 0px hsla(0,0%,0%,0.175)"
+      },
+      "xl": {
+        "down": "none",
+        "up": "none"
+      }
+    },
+    "flat": {
+      "down": "0px 0px 0.8px 0px hsla(0,0%,0%,0.21), 0px 0px 2px 0px hsla(0,0%,0%,0.14), 0px 0px 5px 0px hsla(0,0%,0%,0.14), 0px 0px 17px 0px hsla(0,0%,0%,0.105)",
+      "up": "0px 0px 0.8px 0px hsla(0,0%,0%,0.21), 0px 0px 2px 0px hsla(0,0%,0%,0.14), 0px 0px 5px 0px hsla(0,0%,0%,0.14), 0px 0px 17px 0px hsla(0,0%,0%,0.105)"
+    }
+  },
   "euiSize": "16px",
   "euiSizeXS": "4px",
   "euiSizeS": "8px",

package/optimize/es/themes/json/eui_theme_amsterdam_light.json

@@ -136,6 +136,42 @@
   },
   "euiBreakpointKeys": "'xs', 's', 'm', 'l', 'xl'",
   "euiShadowColor": "#000000",
+  "euiShadows": {
+    "xs": {
+      "down": "0px 0.8px 0.8px 0px hsla(0,0%,0%,0.04), 0px 2.3px 2px 0px hsla(0,0%,0%,0.03)",
+      "up": "0px 0.8px 0.8px 0px hsla(0,0%,0%,0.04), 0px -2.3px 2px 0px hsla(0,0%,0%,0.03)"
+    },
+    "s": {
+      "down": "0px 0.7px 1.4px 0px hsla(0,0%,0%,0.07), 0px 1.9px 4px 0px hsla(0,0%,0%,0.05), 0px 4.5px 10px 0px hsla(0,0%,0%,0.05)",
+      "up": "0px 0.7px 1.4px 0px hsla(0,0%,0%,0.07), 0px -1.9px 4px 0px hsla(0,0%,0%,0.05), 0px -4.5px 10px 0px hsla(0,0%,0%,0.05)"
+    },
+    "m": {
+      "down": "0px 0.9px 4px 0px hsla(0,0%,0%,0.08), 0px 2.6px 8px 0px hsla(0,0%,0%,0.06), 0px 5.7px 12px 0px hsla(0,0%,0%,0.05), 0px 15px 15px 0px hsla(0,0%,0%,0.04)",
+      "up": "0px 0.9px 4px 0px hsla(0,0%,0%,0.08), 0px -2.6px 8px 0px hsla(0,0%,0%,0.06), 0px -5.7px 12px 0px hsla(0,0%,0%,0.05), 0px -15px 15px 0px hsla(0,0%,0%,0.04)"
+    },
+    "l": {
+      "down": "0px 1px 5px 0px hsla(0,0%,0%,0.1), 0px 3.6px 13px 0px hsla(0,0%,0%,0.07), 0px 8.4px 23px 0px hsla(0,0%,0%,0.06), 0px 23px 35px 0px hsla(0,0%,0%,0.05)",
+      "up": "0px 1px 5px 0px hsla(0,0%,0%,0.1), 0px -3.6px 13px 0px hsla(0,0%,0%,0.07), 0px -8.4px 23px 0px hsla(0,0%,0%,0.06), 0px -23px 35px 0px hsla(0,0%,0%,0.05)"
+    },
+    "xl": {
+      "down": "0px 2.7px 9px 0px hsla(0,0%,0%,0.13), 0px 9.4px 24px 0px hsla(0,0%,0%,0.09), 0px 21.8px 43px 0px hsla(0,0%,0%,0.08)",
+      "up": "0px 2.7px 9px 0px hsla(0,0%,0%,0.13), 0px -9.4px 24px 0px hsla(0,0%,0%,0.09), 0px -21.8px 43px 0px hsla(0,0%,0%,0.08)"
+   },
+    "hover": {
+      "base": {
+        "down": "0px 1.9px 4px 0px hsla(0,0%,0%,0.05), 0px 4.5px 10px 0px hsla(0,0%,0%,0.05)",
+        "up": "0px 1.9px 4px 0px hsla(0,0%,0%,0.05), 0px -4.5px 10px 0px hsla(0,0%,0%,0.05)"
+      },
+      "xl": {
+        "down": "none",
+        "up": "none"
+      }
+    },
+    "flat": {
+      "down": "0px 0px 0.8px 0px hsla(0,0%,0%,0.06), 0px 0px 2px 0px hsla(0,0%,0%,0.04), 0px 0px 5px 0px hsla(0,0%,0%,0.04), 0px 0px 17px 0px hsla(0,0%,0%,0.03)",
+      "up": "0px 0px 0.8px 0px hsla(0,0%,0%,0.06), 0px 0px 2px 0px hsla(0,0%,0%,0.04), 0px 0px 5px 0px hsla(0,0%,0%,0.04), 0px 0px 17px 0px hsla(0,0%,0%,0.03)"
+    }
+  },
   "euiSize": "16px",
   "euiSizeXS": "4px",
   "euiSizeS": "8px",