@elastic/eui-theme-common 4.0.0 → 5.0.0

package/lib/cjs/global_styling/functions/shadows.d.ts

@@ -1,2 +1,14 @@
 import { EuiThemeColorModeStandard } from '../../services/theme/types';
 export declare const getShadowColor: (color: string, opacity: number, colorMode: EuiThemeColorModeStandard) => string;
+/**
+ * Converts a `box-shadow` string to a `filter: drop-shadow()` string.
+ *
+ * @todo check whether this is actually needed in +2025, the original code replacing
+ * box-shadow with filter: drop-shadow() had the following comment:
+ * > Using only one drop-shadow filter instead of multiple is more
+ * > performant & prevents Safari bugs
+ *
+ * @param boxShadow The `box-shadow` string to convert.
+ * @returns The converted `filter` string.
+ */
+export declare const boxShadowToFilterDropShadow: (boxShadow: string) => string;

package/lib/cjs/global_styling/functions/shadows.js

@@ -3,22 +3,67 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getShadowColor = void 0;
+exports.getShadowColor = exports.boxShadowToFilterDropShadow = void 0;
 var _chromaJs = _interopRequireDefault(require("chroma-js"));
 var _types = require("../../services/theme/types");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-/*
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } /*
  * 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.
  */
-
 // Create a CSS color value using whose opacity is determined based
 // on either a light or dark theme. We use a multiplier
-// of 1 for light themes and 2.5 for dark themes
+// of 1 for light themes and 3.5 for dark themes
 var getShadowColor = exports.getShadowColor = function getShadowColor(color, opacity, colorMode) {
   var themeOpacity = colorMode === _types.COLOR_MODES_STANDARD.dark ? opacity * 3.5 : opacity * 1;
   return (0, _chromaJs["default"])(color).alpha(themeOpacity).css();
+};
+
+/**
+ * Converts a `box-shadow` string to a `filter: drop-shadow()` string.
+ *
+ * @todo check whether this is actually needed in +2025, the original code replacing
+ * box-shadow with filter: drop-shadow() had the following comment:
+ * > Using only one drop-shadow filter instead of multiple is more
+ * > performant & prevents Safari bugs
+ *
+ * @param boxShadow The `box-shadow` string to convert.
+ * @returns The converted `filter` string.
+ */
+var boxShadowToFilterDropShadow = exports.boxShadowToFilterDropShadow = function boxShadowToFilterDropShadow(boxShadow) {
+  var dropShadows = boxShadow.split(/,(?![^(]*\))/) // split by comma, but not inside parentheses
+  .map(function (shadow) {
+    shadow = shadow.trim();
+    // remove `inset`, not supported by drop-shadow
+    if (shadow.startsWith('inset ')) {
+      shadow = shadow.slice(6);
+    }
+    // can be complex (hsl, rgb, etc.), used AI for this
+    var colorMatch = shadow.match(/(hsl|rgb)a?\(.*\)|#[0-9a-fA-F]{3,8}|[a-zA-Z]+$/);
+    var color;
+    var parts;
+    if (colorMatch) {
+      color = colorMatch[0];
+      parts = shadow.substring(0, colorMatch.index).trim().split(/\s+/);
+    } else {
+      color = '#000'; // fallback to black
+      parts = shadow.trim().split(/\s+/);
+    }
+    // drop-shadow doesn't support spread, so we only take x, y, blur
+    var _parts = parts,
+      _parts2 = _slicedToArray(_parts, 3),
+      x = _parts2[0],
+      y = _parts2[1],
+      blur = _parts2[2];
+    return "drop-shadow(".concat(x, " ").concat(y, " ").concat(blur, " ").concat(color, ")");
+  }).join(' ');
+  return "filter: ".concat(dropShadows, ";");
 };

package/lib/cjs/global_styling/mixins/borders.d.ts

@@ -0,0 +1,23 @@
+import { UseEuiTheme } from '../../services/theme/types';
+export declare const getBorderSide: (side: BorderSides) => string;
+export declare type BorderSides = 'left' | 'right' | 'top' | 'bottom' | 'horizontal' | 'vertical' | 'all';
+/**
+ * Defines styles for floating boarders applied in DARK mode via EUI shadow utils
+ */
+export declare const euiShadowFloatingBorderStyles: (euiThemeContext: UseEuiTheme, options: {
+    side?: BorderSides;
+    borderColor?: string;
+    borderWidth?: string;
+    borderStyle?: string;
+}) => string;
+/**
+ * Shared style for floating borders.
+ * Uses a pseudo element with `border` attribute to prevent both dimension changes due to
+ * the border width as well as visible gaps due to the need of a transparent border in LIGHT mode.
+ */
+export declare const euiBorderStyles: (euiThemeContext: UseEuiTheme, options: {
+    side?: BorderSides;
+    borderColor?: string;
+    borderWidth?: string;
+    borderStyle?: string;
+}) => string;

package/lib/cjs/global_styling/mixins/borders.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getBorderSide = exports.euiShadowFloatingBorderStyles = exports.euiBorderStyles = 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 logicalSide = {
+  left: 'inline-start',
+  right: 'inline-end',
+  top: 'block-start',
+  bottom: 'block-end',
+  horizontal: 'inline',
+  vertical: 'block'
+};
+var getBorderSide = exports.getBorderSide = function getBorderSide(side) {
+  return side === 'all' ? 'border' : "border-".concat(logicalSide[side]);
+};
+/**
+ * Defines styles for floating boarders applied in DARK mode via EUI shadow utils
+ */
+var euiShadowFloatingBorderStyles = exports.euiShadowFloatingBorderStyles = function euiShadowFloatingBorderStyles(euiThemeContext, options) {
+  return "\n    /* create a containing block without using `position` to prevent CSS specificity issues and unexpected overrides;\n    `transform: translateZ(0)` is the least likely to affect other behaviors (overflow, layout) */\n    transform: translateZ(0);\n\n    ".concat(euiBorderStyles(euiThemeContext, options), "\n  ");
+};
+
+/**
+ * Shared style for floating borders.
+ * Uses a pseudo element with `border` attribute to prevent both dimension changes due to
+ * the border width as well as visible gaps due to the need of a transparent border in LIGHT mode.
+ */
+var euiBorderStyles = exports.euiBorderStyles = function euiBorderStyles(euiThemeContext, options) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var _options$side = options.side,
+    side = _options$side === void 0 ? 'all' : _options$side,
+    _options$borderColor = options.borderColor,
+    borderColor = _options$borderColor === void 0 ? euiTheme.border.color : _options$borderColor,
+    _options$borderWidth = options.borderWidth,
+    borderWidth = _options$borderWidth === void 0 ? euiTheme.border.width.thin : _options$borderWidth,
+    _options$borderStyle = options.borderStyle,
+    borderStyle = _options$borderStyle === void 0 ? 'solid' : _options$borderStyle;
+  var borderProperty = getBorderSide(side);
+  return "\n    &::after {\n      content: '';\n      position: absolute;\n      inset: 0;\n      /* ensure to keep on top of flush content */\n      z-index: 0;\n      ".concat(borderProperty, ": ").concat(borderWidth, " ").concat(borderStyle, " ").concat(borderColor, ";\n      border-radius: inherit;\n      pointer-events: none;\n    }\n  ");
+};

package/lib/cjs/global_styling/mixins/index.d.ts

@@ -1 +1,2 @@
 export * from './shadow';
+export * from './borders';

package/lib/cjs/global_styling/mixins/index.js

@@ -13,4 +13,15 @@ Object.keys(_shadow).forEach(function (key) {
       return _shadow[key];
     }
   });
+});
+var _borders = require("./borders");
+Object.keys(_borders).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _borders[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _borders[key];
+    }
+  });
 });

package/lib/cjs/global_styling/mixins/shadow.d.ts

@@ -1,45 +1,54 @@
 import type { UseEuiTheme } from '../../services/theme/types';
 import { _EuiThemeShadowSize } from '../variables/shadow';
+import { BorderSides } from './borders';
 export interface EuiShadowOptions {
+    /** @deprecated */
     color?: string;
+    /** @default `down` */
+    direction?: 'down' | 'up';
     /**
      * Note: not supported by all shadow utilities.
      */
     property?: 'box-shadow' | 'filter';
     borderAllInHighContrastMode?: boolean;
+    border?: BorderSides | 'none';
 }
 /**
- * euiSlightShadow
+ * x-small shadow
  */
-export declare const euiShadowXSmall: ({ euiTheme, colorMode, highContrastMode }: UseEuiTheme, options?: EuiShadowOptions | undefined) => string;
+export declare const euiShadowXSmall: (euiThemeContext: UseEuiTheme, options?: EuiShadowOptions | undefined) => string;
 /**
- * bottomShadowSmall
+ * small shadow
  */
-export declare const euiShadowSmall: ({ euiTheme, colorMode, highContrastMode }: UseEuiTheme, options?: EuiShadowOptions | undefined) => string;
+export declare const euiShadowSmall: (euiThemeContext: UseEuiTheme, options?: EuiShadowOptions | undefined) => string;
 /**
- * bottomShadowMedium
+ * medium shadow
  */
-export declare const euiShadowMedium: ({ euiTheme, colorMode, highContrastMode }: UseEuiTheme, options?: EuiShadowOptions | undefined) => string;
+export declare const euiShadowMedium: (euiThemeContext: UseEuiTheme, options?: EuiShadowOptions | undefined) => string;
 /**
- * bottomShadow
+ * large shadow
  */
-export declare const euiShadowLarge: ({ euiTheme, colorMode, highContrastMode }: UseEuiTheme, options?: EuiShadowOptions | undefined) => string;
+export declare const euiShadowLarge: (euiThemeContext: UseEuiTheme, options?: EuiShadowOptions | undefined) => string;
 /**
- * bottomShadowLarge
+ * x-large shadow
  */
 export interface EuiShadowXLarge extends EuiShadowOptions {
     reverse?: boolean;
 }
-export declare const euiShadowXLarge: ({ euiTheme, colorMode, highContrastMode }: UseEuiTheme, options?: EuiShadowXLarge | undefined) => string;
+export declare const euiShadowXLarge: (euiThemeContext: UseEuiTheme, options?: EuiShadowXLarge | undefined) => string;
 /**
- * slightShadowHover
+ * flat shadow
+ * @deprecated - use euiShadowHover instead
  */
-export declare const euiSlightShadowHover: ({ euiTheme, colorMode, highContrastMode }: UseEuiTheme, options?: EuiShadowOptions | undefined) => string;
+export declare const euiSlightShadowHover: (euiThemeContext: UseEuiTheme, options?: EuiShadowOptions | undefined) => string;
 /**
- * bottomShadowFlat
+ * @deprecated - use euiShadowXSmall instead
  *
+ * Remains for backwards compatibility for the Amsterdam theme.
  * Similar to shadow medium but without the bottom depth.
  * Useful for popovers that drop UP rather than DOWN.
  */
-export declare const euiShadowFlat: ({ euiTheme, colorMode, highContrastMode }: UseEuiTheme, options?: EuiShadowOptions | undefined) => string;
+export declare const euiShadowFlat: (euiThemeContext: UseEuiTheme, options?: EuiShadowOptions | undefined) => string;
 export declare const euiShadow: (euiThemeContext: UseEuiTheme, size?: _EuiThemeShadowSize, options?: EuiShadowOptions | undefined) => string;
+/** Hover shadows */
+export declare const euiShadowHover: (euiThemeContext: UseEuiTheme, size?: _EuiThemeShadowSize | 'base', options?: EuiShadowOptions | undefined) => string;

package/lib/cjs/global_styling/mixins/shadow.js

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiSlightShadowHover = exports.euiShadowXSmall = exports.euiShadowXLarge = exports.euiShadowSmall = exports.euiShadowMedium = exports.euiShadowLarge = exports.euiShadowFlat = exports.euiShadow = void 0;
+exports.euiSlightShadowHover = exports.euiShadowXSmall = exports.euiShadowXLarge = exports.euiShadowSmall = exports.euiShadowMedium = exports.euiShadowLarge = exports.euiShadowHover = exports.euiShadowFlat = exports.euiShadow = void 0;
 var _functions = require("../functions");
+var _borders = require("./borders");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -14,118 +15,135 @@ var _functions = require("../functions");
  */
 
 /**
- * euiSlightShadow
+ * x-small shadow
  */
-var euiShadowXSmall = exports.euiShadowXSmall = function euiShadowXSmall(_ref, options) {
-  var euiTheme = _ref.euiTheme,
-    colorMode = _ref.colorMode,
-    highContrastMode = _ref.highContrastMode;
+var euiShadowXSmall = exports.euiShadowXSmall = function euiShadowXSmall(euiThemeContext, options) {
+  var _options$direction;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   if (highContrastMode) {
-    return _highContrastBorder(euiTheme, options);
+    return _highContrastBorder(euiThemeContext, options);
   }
-  var color = (options === null || options === void 0 ? void 0 : options.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");
+  var direction = (_options$direction = options === null || options === void 0 ? void 0 : options.direction) !== null && _options$direction !== void 0 ? _options$direction : 'down';
+  return _shadowStyles(euiThemeContext, euiTheme.shadows.xs[direction], {
+    border: options === null || options === void 0 ? void 0 : options.border
+  });
 };
 
 /**
- * bottomShadowSmall
+ * small shadow
  */
-var euiShadowSmall = exports.euiShadowSmall = function euiShadowSmall(_ref2, options) {
-  var euiTheme = _ref2.euiTheme,
-    colorMode = _ref2.colorMode,
-    highContrastMode = _ref2.highContrastMode;
+var euiShadowSmall = exports.euiShadowSmall = function euiShadowSmall(euiThemeContext, options) {
+  var _options$direction2;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   if (highContrastMode) {
-    return _highContrastBorder(euiTheme, options);
+    return _highContrastBorder(euiThemeContext, options);
   }
-  var color = (options === null || options === void 0 ? void 0 : options.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");
+  var direction = (_options$direction2 = options === null || options === void 0 ? void 0 : options.direction) !== null && _options$direction2 !== void 0 ? _options$direction2 : 'down';
+  return _shadowStyles(euiThemeContext, euiTheme.shadows.s[direction], {
+    border: options === null || options === void 0 ? void 0 : options.border
+  });
 };
 
 /**
- * bottomShadowMedium
+ * medium shadow
  */
-var euiShadowMedium = exports.euiShadowMedium = function euiShadowMedium(_ref3, options) {
-  var euiTheme = _ref3.euiTheme,
-    colorMode = _ref3.colorMode,
-    highContrastMode = _ref3.highContrastMode;
+var euiShadowMedium = exports.euiShadowMedium = function euiShadowMedium(euiThemeContext, options) {
+  var _options$direction3;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   if (highContrastMode) {
-    return _highContrastBorder(euiTheme, options);
+    return _highContrastBorder(euiThemeContext, options);
   }
-  var color = (options === null || options === void 0 ? void 0 : options.color) || euiTheme.colors.shadow;
+  var direction = (_options$direction3 = options === null || options === void 0 ? void 0 : options.direction) !== null && _options$direction3 !== void 0 ? _options$direction3 : 'down';
+  var boxShadow = euiTheme.shadows.m[direction];
   if ((options === null || options === void 0 ? void 0 : options.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), ";");
+    return boxShadow ? _shadowStyles(euiThemeContext, (0, _functions.boxShadowToFilterDropShadow)(boxShadow), {
+      border: options === null || options === void 0 ? void 0 : options.border,
+      type: 'filter'
+    }) : '';
   }
+  return _shadowStyles(euiThemeContext, boxShadow, {
+    border: options === null || options === void 0 ? void 0 : options.border
+  });
 };
 
 /**
- * bottomShadow
+ * large shadow
  */
-var euiShadowLarge = exports.euiShadowLarge = function euiShadowLarge(_ref4, options) {
-  var euiTheme = _ref4.euiTheme,
-    colorMode = _ref4.colorMode,
-    highContrastMode = _ref4.highContrastMode;
+var euiShadowLarge = exports.euiShadowLarge = function euiShadowLarge(euiThemeContext, options) {
+  var _options$direction4;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   if (highContrastMode) {
-    return _highContrastBorder(euiTheme, options);
+    return _highContrastBorder(euiThemeContext, options);
   }
-  var color = (options === null || options === void 0 ? void 0 : options.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 direction = (_options$direction4 = options === null || options === void 0 ? void 0 : options.direction) !== null && _options$direction4 !== void 0 ? _options$direction4 : 'down';
+  return _shadowStyles(euiThemeContext, euiTheme.shadows.l[direction], {
+    border: options === null || options === void 0 ? void 0 : options.border
+  });
 };
 
 /**
- * bottomShadowLarge
+ * x-large shadow
  */
 
-var euiShadowXLarge = exports.euiShadowXLarge = function euiShadowXLarge(_ref5, options) {
-  var _options$reverse;
-  var euiTheme = _ref5.euiTheme,
-    colorMode = _ref5.colorMode,
-    highContrastMode = _ref5.highContrastMode;
+var euiShadowXLarge = exports.euiShadowXLarge = function euiShadowXLarge(euiThemeContext, options) {
+  var _options$direction5;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   if (highContrastMode) {
-    return _highContrastBorder(euiTheme, options);
+    return _highContrastBorder(euiThemeContext, options);
   }
-  var color = (options === null || options === void 0 ? void 0 : options.color) || euiTheme.colors.shadow;
-  var reverse = (_options$reverse = options === null || options === void 0 ? void 0 : options.reverse) !== null && _options$reverse !== void 0 ? _options$reverse : false;
-  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");
+  var direction = (_options$direction5 = options === null || options === void 0 ? void 0 : options.direction) !== null && _options$direction5 !== void 0 ? _options$direction5 : 'down';
+  return _shadowStyles(euiThemeContext, euiTheme.shadows.xl[direction], {
+    border: options === null || options === void 0 ? void 0 : options.border
+  });
 };
 
 /**
- * slightShadowHover
+ * flat shadow
+ * @deprecated - use euiShadowHover instead
  */
-var euiSlightShadowHover = exports.euiSlightShadowHover = function euiSlightShadowHover(_ref6, options) {
-  var euiTheme = _ref6.euiTheme,
-    colorMode = _ref6.colorMode,
-    highContrastMode = _ref6.highContrastMode;
+var euiSlightShadowHover = exports.euiSlightShadowHover = function euiSlightShadowHover(euiThemeContext, options) {
+  var _options$direction6;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   if (highContrastMode) {
-    return _highContrastBorder(euiTheme, options);
+    return _highContrastBorder(euiThemeContext, options);
   }
-  var color = (options === null || options === void 0 ? void 0 : options.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 direction = (_options$direction6 = options === null || options === void 0 ? void 0 : options.direction) !== null && _options$direction6 !== void 0 ? _options$direction6 : 'down';
+  return _shadowStyles(euiThemeContext, euiTheme.shadows.s[direction], {
+    border: options === null || options === void 0 ? void 0 : options.border
+  });
 };
 
 /**
- * bottomShadowFlat
+ * @deprecated - use euiShadowXSmall instead
  *
+ * Remains for backwards compatibility for the Amsterdam theme.
  * Similar to shadow medium but without the bottom depth.
  * Useful for popovers that drop UP rather than DOWN.
  */
-var euiShadowFlat = exports.euiShadowFlat = function euiShadowFlat(_ref7, options) {
-  var euiTheme = _ref7.euiTheme,
-    colorMode = _ref7.colorMode,
-    highContrastMode = _ref7.highContrastMode;
+var euiShadowFlat = exports.euiShadowFlat = function euiShadowFlat(euiThemeContext, options) {
+  var _options$direction7, _euiTheme$shadows$fla;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   if (highContrastMode) {
-    return _highContrastBorder(euiTheme, options);
+    return _highContrastBorder(euiThemeContext, options);
   }
-  var color = (options === null || options === void 0 ? void 0 : options.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 direction = (_options$direction7 = options === null || options === void 0 ? void 0 : options.direction) !== null && _options$direction7 !== void 0 ? _options$direction7 : 'down';
+  var value = (_euiTheme$shadows$fla = euiTheme.shadows.flat) === null || _euiTheme$shadows$fla === void 0 ? void 0 : _euiTheme$shadows$fla[direction];
+  return _shadowStyles(euiThemeContext, value, {
+    border: options === null || options === void 0 ? void 0 : options.border
+  });
 };
 var euiShadow = exports.euiShadow = function euiShadow(euiThemeContext) {
   var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'l';
   var options = arguments.length > 2 ? arguments[2] : undefined;
   if (euiThemeContext.highContrastMode) {
-    return _highContrastBorder(euiThemeContext.euiTheme, options);
+    return _highContrastBorder(euiThemeContext, options);
   }
   switch (size) {
     case 'xs':
@@ -144,15 +162,72 @@ var euiShadow = exports.euiShadow = function euiShadow(euiThemeContext) {
   }
 };
 
+/** Hover shadows */
+var euiShadowHover = exports.euiShadowHover = function euiShadowHover(euiThemeContext) {
+  var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'base';
+  var options = arguments.length > 2 ? arguments[2] : undefined;
+  if (euiThemeContext.highContrastMode) {
+    return _highContrastBorder(euiThemeContext, options);
+  }
+  switch (size) {
+    case 'base':
+      return _euiShadowHover(euiThemeContext, 'base', options);
+    case 'xs':
+      return _euiShadowHover(euiThemeContext, 's', options);
+    case 's':
+      return _euiShadowHover(euiThemeContext, 'm', options);
+    case 'm':
+      return _euiShadowHover(euiThemeContext, 'l', options);
+    case 'l':
+      return _euiShadowHover(euiThemeContext, 'xl', options);
+    case 'xl':
+      return _euiShadowHover(euiThemeContext, 'xxl', options);
+    default:
+      console.warn('Please provide a valid size option to useEuiShadow');
+      return '';
+  }
+};
+var _euiShadowHover = function _euiShadowHover(euiThemeContext) {
+  var _options$direction8;
+  var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'l';
+  var options = arguments.length > 2 ? arguments[2] : undefined;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
+  if (highContrastMode) {
+    return _highContrastBorder(euiThemeContext, options);
+  }
+  var direction = (_options$direction8 = options === null || options === void 0 ? void 0 : options.direction) !== null && _options$direction8 !== void 0 ? _options$direction8 : 'down';
+  var shadow = size === 'base' ? euiTheme.shadows.hover.base[direction] : size === 'xxl' ? euiTheme.shadows.hover.xl[direction] : euiTheme.shadows[size][direction];
+  return _shadowStyles(euiThemeContext, shadow, {
+    border: options === null || options === void 0 ? void 0 : options.border
+  });
+};
+
 /**
  * Internal utilities for replacing shadows with high contrast borders instead.
  * NOTE: Windows' high contrast themes ignore *all* `box-shadow` CSS,
  * so we use `border` CSS explicitly instead of shadows
  */
 
-var _highContrastBorder = function _highContrastBorder(_ref8) {
-  var border = _ref8.border;
-  var _ref9 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    borderAllInHighContrastMode = _ref9.borderAllInHighContrastMode;
-  return borderAllInHighContrastMode ? "border: ".concat(border.thin, ";") : "border-block-end: ".concat(border.thin, ";");
+var _highContrastBorder = function _highContrastBorder(euiThemeContext) {
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    _ref$border = _ref.border,
+    border = _ref$border === void 0 ? 'all' : _ref$border,
+    borderAllInHighContrastMode = _ref.borderAllInHighContrastMode;
+  var euiTheme = euiThemeContext.euiTheme;
+  var hasFullBorder = borderAllInHighContrastMode || border && border !== 'none';
+  return hasFullBorder ? "border: ".concat(euiTheme.border.thin, ";") : "border-block-end: ".concat(euiTheme.border.thin, ";");
+};
+var _shadowStyles = function _shadowStyles(euiThemeContext, shadow, options) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = euiTheme.flags.shadowVariant === 'refresh';
+  var _options$border = options.border,
+    border = _options$border === void 0 ? 'all' : _options$border,
+    _options$type = options.type,
+    type = _options$type === void 0 ? 'box-shadow' : _options$type;
+  var borderStyle = euiThemeContext.colorMode === 'DARK' && border !== 'none' ? "".concat((0, _borders.euiShadowFloatingBorderStyles)(euiThemeContext, {
+    side: border !== null && border !== void 0 ? border : 'all'
+  })) : '';
+  var shadowStyle = type === 'filter' ? shadow : "box-shadow: ".concat(shadow, ";");
+  return "\n    ".concat(shadowStyle, ";\n    ").concat(isRefreshVariant && borderStyle, ";\n  ");
 };

package/lib/cjs/global_styling/variables/flags.d.ts

@@ -1,6 +1,7 @@
 export declare type EuiThemeVariantFlags = {
     buttonVariant: 'classic' | 'refresh';
     formVariant: 'classic' | 'refresh';
+    shadowVariant: 'classic' | 'refresh';
 };
 /**
  * Theme specific setting flags

package/lib/cjs/global_styling/variables/shadow.d.ts

@@ -1,5 +1,9 @@
+import { CSSProperties } from 'react';
+import { ColorModeSwitch } from '../../services/theme/types';
 export declare const EuiThemeShadowSizes: readonly ["xs", "s", "m", "l", "xl"];
 export declare type _EuiThemeShadowSize = (typeof EuiThemeShadowSizes)[number];
+export declare const EuiThemeShadowHoverSizes: readonly ["s", "m", "l", "xl", "xxl"];
+export declare type _EuiThemeShadowHoverSize = (typeof EuiThemeShadowHoverSizes)[number];
 /**
  * Shadow t-shirt sizes descriptions
  */
@@ -9,3 +13,51 @@ export interface _EuiThemeShadowCustomColor {
     property?: 'box-shadow' | 'filter';
     borderAllInHighContrastMode?: boolean;
 }
+export declare type _EuiThemeShadow = {
+    /** Default direction of the shadow */
+    down: CSSProperties['boxShadow'];
+    /** Reverse direction */
+    up: CSSProperties['boxShadow'];
+};
+export declare type _EuiThemeShadows = ColorModeSwitch<{
+    colors: {
+        base: string;
+    };
+    xs: _EuiThemeShadow;
+    s: _EuiThemeShadow;
+    m: _EuiThemeShadow;
+    l: _EuiThemeShadow;
+    xl: _EuiThemeShadow;
+    hover: {
+        base: _EuiThemeShadow;
+        xl: _EuiThemeShadow;
+    };
+    /** @deprecated - Defined only to support the legacy `euiShadowFlat` mixin;
+     * will be removed in the future
+     */
+    flat: _EuiThemeShadow;
+}>;
+/**
+ * Represents a single shadow
+ * @see https://tr.designtokens.org/format/#shadow
+ */
+export declare type _EuiThemeShadowLayer = {
+    opacity: number;
+    x: number;
+    y: number;
+    blur: number;
+    spread: number;
+};
+export declare type _EuiThemeShadowPrimitive = {
+    light: _EuiThemeShadowLayer[];
+    dark: _EuiThemeShadowLayer[];
+};
+export declare type _EuiThemeShadowPrimitives = {
+    xs: _EuiThemeShadowPrimitive;
+    s: _EuiThemeShadowPrimitive;
+    m: _EuiThemeShadowPrimitive;
+    l: _EuiThemeShadowPrimitive;
+    xl: _EuiThemeShadowPrimitive;
+    xxl: _EuiThemeShadowPrimitive;
+    flat: _EuiThemeShadowPrimitive;
+};

package/lib/cjs/global_styling/variables/shadow.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports._EuiShadowSizesDescriptions = exports.EuiThemeShadowSizes = void 0;
+exports._EuiShadowSizesDescriptions = exports.EuiThemeShadowSizes = exports.EuiThemeShadowHoverSizes = 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
@@ -13,6 +13,7 @@ exports._EuiShadowSizesDescriptions = exports.EuiThemeShadowSizes = void 0;
  */
 
 var EuiThemeShadowSizes = exports.EuiThemeShadowSizes = ['xs', 's', 'm', 'l', 'xl'];
+var EuiThemeShadowHoverSizes = exports.EuiThemeShadowHoverSizes = ['s', 'm', 'l', 'xl', 'xxl'];
 /**
  * Shadow t-shirt sizes descriptions
  */
@@ -22,4 +23,9 @@ var _EuiShadowSizesDescriptions = exports._EuiShadowSizesDescriptions = {
   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.'
-};
+};
+
+/**
+ * Represents a single shadow
+ * @see https://tr.designtokens.org/format/#shadow
+ */