@elastic/eui-theme-common 3.1.0 → 5.0.0

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

@@ -84,7 +84,7 @@ export interface _EuiThemeTitle {
 export declare type _EuiThemeFont = _EuiThemeFontBase & {
     scale: _EuiThemeFontScales;
     /**
-     * See {@link https://eui.elastic.co/#/theming/typography/values%23font-weight | Reference} for more information
+     * See {@link https://eui.elastic.co/docs/getting-started/theming/tokens/typography/font-weight/ | Reference} for more information
      */
     weight: _EuiThemeFontWeights;
     body: _EuiThemeBody;

package/lib/cjs/services/theme/types.d.ts

@@ -7,6 +7,7 @@ import type { _EuiThemeColors } from '../../global_styling/variables/colors';
 import type { _EuiThemeBase, _EuiThemeSizes } from '../../global_styling/variables/size';
 import type { _EuiThemeFont } from '../../global_styling/variables/typography';
 import type { _EuiThemeFocus } from '../../global_styling/variables/states';
+import type { _EuiThemeShadows } from '../../global_styling/variables/shadow';
 import type { _EuiThemeLevels } from '../../global_styling/variables/levels';
 import type { _EuiThemeComponents } from '../../global_styling/variables/components';
 import type { _EuiThemeFlags } from '../../global_styling/variables';
@@ -34,7 +35,7 @@ export declare type EuiThemeShapeBase = {
     /** - Default value: 16 */
     base: _EuiThemeBase;
     /**
-     * See {@link https://eui.elastic.co/#/theming/sizing | Reference} for more information
+     * See {@link https://eui.elastic.co/docs/getting-started/theming/tokens/sizing/ | Reference} for more information
      */
     size: _EuiThemeSizes;
     font: _EuiThemeFont;
@@ -43,6 +44,7 @@ export declare type EuiThemeShapeBase = {
     animation: _EuiThemeAnimation;
     breakpoint: _EuiThemeBreakpoints;
     levels: _EuiThemeLevels;
+    shadows: _EuiThemeShadows;
     components: _EuiThemeComponents;
     flags: _EuiThemeFlags;
 };

package/lib/cjs/utils.d.ts

@@ -1,4 +1,4 @@
-import { EuiThemeColorMode, EuiThemeColorModeStandard, EuiThemeSystem, EuiThemeShape, EuiThemeComputed, EuiThemeHighContrastMode } from './global_styling';
+import { EuiThemeColorMode, EuiThemeColorModeStandard, EuiThemeSystem, EuiThemeShape, EuiThemeComputed, _EuiThemeShadowLayer, EuiThemeHighContrastMode } from './global_styling';
 export declare const DEFAULT_COLOR_MODE: "LIGHT";
 /**
  * Returns whether the provided color mode is `inverse`
@@ -104,3 +104,24 @@ export declare const mergeDeep: (_target: {
  * and additional prefix/suffix
  */
 export declare const getTokenName: (prefix: string, variant?: string | undefined, suffix?: string | undefined) => string;
+/**
+ * Format an array of shadow "objects" into a string for CSS.
+ * The "up" direction is built by making the y offset from layers
+ * two and any subsequent layers, negative.
+ *
+ * It will add `inset` to the first layer when color mode is "DARK"
+ * and `spread` is 1, to ensure the dark mode-only floating border
+ * is rendered inside the container to match the position of the
+ * regular panel border (implemented with a pseudo element).
+ *
+ * @todo add a color space param to replace the hard-coded `hsl`
+ *
+ * @param layers
+ * @param options
+ * @param options.up - Modifies some values in order to get the "up" direction
+ * @returns - A value for the CSS `box-shadow` property
+ */
+export declare function formatMultipleBoxShadow(layers: _EuiThemeShadowLayer[], options?: {
+    direction?: 'down' | 'up';
+    color: string;
+}): string;

package/lib/cjs/utils.js

@@ -5,8 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.buildTheme = exports.DEFAULT_COLOR_MODE = exports.Computed = void 0;
 exports.computed = computed;
+exports.formatMultipleBoxShadow = formatMultipleBoxShadow;
 exports.setOn = exports.mergeDeep = exports.isInverseColorMode = exports.getTokenName = exports.getOn = exports.getComputed = exports.getColorMode = void 0;
+var _chromaJs = _interopRequireDefault(require("chroma-js"));
 var _global_styling = require("./global_styling");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 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; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -357,4 +360,39 @@ var getTokenName = exports.getTokenName = function getTokenName(prefix, variant,
   }
   var colorName = variant.charAt(0).toUpperCase() + variant.slice(1);
   return "".concat(prefix).concat(getCapitalized(colorName)).concat(_suffix);
-};
+};
+
+/**
+ * Format an array of shadow "objects" into a string for CSS.
+ * The "up" direction is built by making the y offset from layers
+ * two and any subsequent layers, negative.
+ *
+ * It will add `inset` to the first layer when color mode is "DARK"
+ * and `spread` is 1, to ensure the dark mode-only floating border
+ * is rendered inside the container to match the position of the
+ * regular panel border (implemented with a pseudo element).
+ *
+ * @todo add a color space param to replace the hard-coded `hsl`
+ *
+ * @param layers
+ * @param options
+ * @param options.up - Modifies some values in order to get the "up" direction
+ * @returns - A value for the CSS `box-shadow` property
+ */
+function formatMultipleBoxShadow(layers, options) {
+  if (layers.length === 0) {
+    return 'none';
+  }
+  var _ref3 = options !== null && options !== void 0 ? options : {},
+    _ref3$direction = _ref3.direction,
+    direction = _ref3$direction === void 0 ? 'down' : _ref3$direction,
+    _ref3$color = _ref3.color,
+    color = _ref3$color === void 0 ? '#000' : _ref3$color;
+  /* prettier-ignore */
+  var shadowLayers = layers.map(function (layer, i) {
+    var y = direction === 'up' && i > 0 ? -layer.y : layer.y;
+    var shadowColor = (0, _chromaJs["default"])(color).alpha(layer.opacity).css('hsl');
+    return "".concat(layer.x, "px ").concat(y, "px ").concat(layer.blur, "px ").concat(layer.spread, "px ").concat(shadowColor);
+  });
+  return shadowLayers.join(', ');
+}

package/lib/cjs/utils.test.js

@@ -1,6 +1,12 @@
 "use strict";
 
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _utils = require("./utils");
+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; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 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; } }
@@ -395,4 +401,36 @@ describe('getTokenName', function () {
     expect((0, _utils.getTokenName)('backgroundBase', 'primary')).toEqual('backgroundBasePrimary');
     expect((0, _utils.getTokenName)('backgroundBase', 'primary', 'hovered')).toEqual('backgroundBasePrimaryHovered');
   });
+});
+describe('formatMultipleBoxShadow', function () {
+  var layers = [{
+    x: 0,
+    y: 4,
+    blur: 8,
+    spread: 0,
+    opacity: 0.1
+  }, {
+    x: 0,
+    y: 2,
+    blur: 4,
+    spread: 0,
+    opacity: 0.05
+  }];
+  var options = {
+    color: '#000000'
+  };
+  it('returns a valid CSS box-shadow value', function () {
+    expect((0, _utils.formatMultipleBoxShadow)(layers, options)).toEqual('0px 4px 8px 0px hsla(0,0%,0%,0.1), 0px 2px 4px 0px hsla(0,0%,0%,0.05)');
+  });
+  it('handles a single layer', function () {
+    expect((0, _utils.formatMultipleBoxShadow)([layers[0]], options)).toEqual('0px 4px 8px 0px hsla(0,0%,0%,0.1)');
+  });
+  it('formats the "up" variant', function () {
+    expect((0, _utils.formatMultipleBoxShadow)(layers, _objectSpread(_objectSpread({}, options), {}, {
+      direction: 'up'
+    }))).toEqual('0px 4px 8px 0px hsla(0,0%,0%,0.1), 0px -2px 4px 0px hsla(0,0%,0%,0.05)');
+  });
+  it('return "none" for no layers', function () {
+    expect((0, _utils.formatMultipleBoxShadow)([], options)).toEqual('none');
+  });
 });

package/lib/esm/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/esm/global_styling/functions/shadows.js

@@ -9,8 +9,47 @@ import chroma from 'chroma-js';
 import { COLOR_MODES_STANDARD, } from '../../services/theme/types';
 // 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
 export const getShadowColor = (color, opacity, colorMode) => {
     const themeOpacity = colorMode === COLOR_MODES_STANDARD.dark ? opacity * 3.5 : opacity * 1;
     return chroma(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.
+ */
+export const boxShadowToFilterDropShadow = (boxShadow) => {
+    const dropShadows = boxShadow
+        .split(/,(?![^(]*\))/) // split by comma, but not inside parentheses
+        .map((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
+        const colorMatch = shadow.match(/(hsl|rgb)a?\(.*\)|#[0-9a-fA-F]{3,8}|[a-zA-Z]+$/);
+        let color;
+        let 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
+        const [x, y, blur] = parts;
+        return `drop-shadow(${x} ${y} ${blur} ${color})`;
+    })
+        .join(' ');
+    return `filter: ${dropShadows};`;
+};

package/lib/esm/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/esm/global_styling/mixins/borders.js

@@ -0,0 +1,50 @@
+/*
+ * 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.
+ */
+const logicalSide = {
+    left: 'inline-start',
+    right: 'inline-end',
+    top: 'block-start',
+    bottom: 'block-end',
+    horizontal: 'inline',
+    vertical: 'block',
+};
+export const getBorderSide = (side) => side === 'all' ? 'border' : `border-${logicalSide[side]}`;
+/**
+ * Defines styles for floating boarders applied in DARK mode via EUI shadow utils
+ */
+export const euiShadowFloatingBorderStyles = (euiThemeContext, options) => {
+    return `
+    /* create a containing block without using \`position\` to prevent CSS specificity issues and unexpected overrides;
+    \`transform: translateZ(0)\` is the least likely to affect other behaviors (overflow, layout) */
+    transform: translateZ(0);
+
+    ${euiBorderStyles(euiThemeContext, options)}
+  `;
+};
+/**
+ * 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 const euiBorderStyles = (euiThemeContext, options) => {
+    const { euiTheme } = euiThemeContext;
+    const { side = 'all', borderColor = euiTheme.border.color, borderWidth = euiTheme.border.width.thin, borderStyle = 'solid', } = options;
+    const borderProperty = getBorderSide(side);
+    return `
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      /* ensure to keep on top of flush content */
+      z-index: 0;
+      ${borderProperty}: ${borderWidth} ${borderStyle} ${borderColor};
+      border-radius: inherit;
+      pointer-events: none;
+    }
+  `;
+};

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

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

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

@@ -6,3 +6,4 @@
  * Side Public License, v 1.
  */
 export * from './shadow';
+export * from './borders';

package/lib/esm/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/esm/global_styling/mixins/shadow.js

@@ -5,123 +5,114 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import { getShadowColor } from '../functions';
+import { boxShadowToFilterDropShadow } from '../functions';
+import { euiShadowFloatingBorderStyles } from './borders';
 /**
- * euiSlightShadow
+ * x-small shadow
  */
-export const euiShadowXSmall = ({ euiTheme, colorMode, highContrastMode }, options) => {
+export const euiShadowXSmall = (euiThemeContext, options) => {
+    const { euiTheme, highContrastMode } = euiThemeContext;
     if (highContrastMode) {
-        return _highContrastBorder(euiTheme, options);
+        return _highContrastBorder(euiThemeContext, options);
     }
-    const color = options?.color || euiTheme.colors.shadow;
-    return `
-box-shadow:
-  0 .8px .8px ${getShadowColor(color, 0.04, colorMode)},
-  0 2.3px 2px ${getShadowColor(color, 0.03, colorMode)};
-`;
+    const direction = options?.direction ?? 'down';
+    return _shadowStyles(euiThemeContext, euiTheme.shadows.xs[direction], {
+        border: options?.border,
+    });
 };
 /**
- * bottomShadowSmall
+ * small shadow
  */
-export const euiShadowSmall = ({ euiTheme, colorMode, highContrastMode }, options) => {
+export const euiShadowSmall = (euiThemeContext, options) => {
+    const { euiTheme, highContrastMode } = euiThemeContext;
     if (highContrastMode) {
-        return _highContrastBorder(euiTheme, options);
+        return _highContrastBorder(euiThemeContext, options);
     }
-    const color = options?.color || euiTheme.colors.shadow;
-    return `
-box-shadow:
-  0 .7px 1.4px ${getShadowColor(color, 0.07, colorMode)},
-  0 1.9px 4px ${getShadowColor(color, 0.05, colorMode)},
-  0 4.5px 10px ${getShadowColor(color, 0.05, colorMode)};
-`;
+    const direction = options?.direction ?? 'down';
+    return _shadowStyles(euiThemeContext, euiTheme.shadows.s[direction], {
+        border: options?.border,
+    });
 };
 /**
- * bottomShadowMedium
+ * medium shadow
  */
-export const euiShadowMedium = ({ euiTheme, colorMode, highContrastMode }, options) => {
+export const euiShadowMedium = (euiThemeContext, options) => {
+    const { euiTheme, highContrastMode } = euiThemeContext;
     if (highContrastMode) {
-        return _highContrastBorder(euiTheme, options);
+        return _highContrastBorder(euiThemeContext, options);
     }
-    const color = options?.color || euiTheme.colors.shadow;
+    const direction = options?.direction ?? 'down';
+    const boxShadow = euiTheme.shadows.m[direction];
     if (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 ${getShadowColor(color, 0.2, colorMode)});`;
-    }
-    else {
-        return `box-shadow:
-      0 .9px 4px ${getShadowColor(color, 0.08, colorMode)},
-      0 2.6px 8px ${getShadowColor(color, 0.06, colorMode)},
-      0 5.7px 12px ${getShadowColor(color, 0.05, colorMode)},
-      0 15px 15px ${getShadowColor(color, 0.04, colorMode)};`;
+        return boxShadow
+            ? _shadowStyles(euiThemeContext, boxShadowToFilterDropShadow(boxShadow), {
+                border: options?.border,
+                type: 'filter',
+            })
+            : '';
     }
+    return _shadowStyles(euiThemeContext, boxShadow, {
+        border: options?.border,
+    });
 };
 /**
- * bottomShadow
+ * large shadow
  */
-export const euiShadowLarge = ({ euiTheme, colorMode, highContrastMode }, options) => {
+export const euiShadowLarge = (euiThemeContext, options) => {
+    const { euiTheme, highContrastMode } = euiThemeContext;
     if (highContrastMode) {
-        return _highContrastBorder(euiTheme, options);
+        return _highContrastBorder(euiThemeContext, options);
     }
-    const color = options?.color || euiTheme.colors.shadow;
-    return `
-box-shadow:
-  0 1px 5px ${getShadowColor(color, 0.1, colorMode)},
-  0 3.6px 13px ${getShadowColor(color, 0.07, colorMode)},
-  0 8.4px 23px ${getShadowColor(color, 0.06, colorMode)},
-  0 23px 35px ${getShadowColor(color, 0.05, colorMode)};
-`;
+    const direction = options?.direction ?? 'down';
+    return _shadowStyles(euiThemeContext, euiTheme.shadows.l[direction], {
+        border: options?.border,
+    });
 };
-export const euiShadowXLarge = ({ euiTheme, colorMode, highContrastMode }, options) => {
+export const euiShadowXLarge = (euiThemeContext, options) => {
+    const { euiTheme, highContrastMode } = euiThemeContext;
     if (highContrastMode) {
-        return _highContrastBorder(euiTheme, options);
+        return _highContrastBorder(euiThemeContext, options);
     }
-    const color = options?.color || euiTheme.colors.shadow;
-    const reverse = options?.reverse ?? false;
-    return `
-box-shadow:
-  0 ${reverse ? '-' : ''}2.7px 9px ${getShadowColor(color, 0.13, colorMode)},
-  0 ${reverse ? '-' : ''}9.4px 24px ${getShadowColor(color, 0.09, colorMode)},
-  0 ${reverse ? '-' : ''}21.8px 43px ${getShadowColor(color, 0.08, colorMode)};
-`;
+    const direction = options?.direction ?? 'down';
+    return _shadowStyles(euiThemeContext, euiTheme.shadows.xl[direction], {
+        border: options?.border,
+    });
 };
 /**
- * slightShadowHover
+ * flat shadow
+ * @deprecated - use euiShadowHover instead
  */
-export const euiSlightShadowHover = ({ euiTheme, colorMode, highContrastMode }, options) => {
+export const euiSlightShadowHover = (euiThemeContext, options) => {
+    const { euiTheme, highContrastMode } = euiThemeContext;
     if (highContrastMode) {
-        return _highContrastBorder(euiTheme, options);
+        return _highContrastBorder(euiThemeContext, options);
     }
-    const color = options?.color || euiTheme.colors.shadow;
-    return `
-box-shadow:
-  0 1px 5px ${getShadowColor(color, 0.1, colorMode)},
-  0 3.6px 13px ${getShadowColor(color, 0.07, colorMode)},
-  0 8.4px 23px ${getShadowColor(color, 0.06, colorMode)},
-  0 23px 35px ${getShadowColor(color, 0.05, colorMode)};
-`;
+    const direction = options?.direction ?? 'down';
+    return _shadowStyles(euiThemeContext, euiTheme.shadows.s[direction], {
+        border: 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.
  */
-export const euiShadowFlat = ({ euiTheme, colorMode, highContrastMode }, options) => {
+export const euiShadowFlat = (euiThemeContext, options) => {
+    const { euiTheme, highContrastMode } = euiThemeContext;
     if (highContrastMode) {
-        return _highContrastBorder(euiTheme, options);
+        return _highContrastBorder(euiThemeContext, options);
     }
-    const color = options?.color || euiTheme.colors.shadow;
-    return `
-box-shadow:
-  0 0 .8px ${getShadowColor(color, 0.06, colorMode)},
-  0 0 2px ${getShadowColor(color, 0.04, colorMode)},
-  0 0 5px ${getShadowColor(color, 0.04, colorMode)},
-  0 0 17px ${getShadowColor(color, 0.03, colorMode)};
-`;
+    const direction = options?.direction ?? 'down';
+    const value = euiTheme.shadows.flat?.[direction];
+    return _shadowStyles(euiThemeContext, value, {
+        border: options?.border,
+    });
 };
 export const euiShadow = (euiThemeContext, size = 'l', options) => {
     if (euiThemeContext.highContrastMode) {
-        return _highContrastBorder(euiThemeContext.euiTheme, options);
+        return _highContrastBorder(euiThemeContext, options);
     }
     switch (size) {
         case 'xs':
@@ -139,13 +130,68 @@ export const euiShadow = (euiThemeContext, size = 'l', options) => {
             return '';
     }
 };
+/** Hover shadows */
+export const euiShadowHover = (euiThemeContext, size = 'base', options) => {
+    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 '';
+    }
+};
+const _euiShadowHover = (euiThemeContext, size = 'l', options) => {
+    const { euiTheme, highContrastMode } = euiThemeContext;
+    if (highContrastMode) {
+        return _highContrastBorder(euiThemeContext, options);
+    }
+    const direction = options?.direction ?? 'down';
+    const 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?.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
  */
-const _highContrastBorder = ({ border }, { borderAllInHighContrastMode } = {}) => {
-    return borderAllInHighContrastMode
-        ? `border: ${border.thin};`
-        : `border-block-end: ${border.thin};`;
+const _highContrastBorder = (euiThemeContext, { border = 'all', borderAllInHighContrastMode } = {}) => {
+    const { euiTheme } = euiThemeContext;
+    const hasFullBorder = borderAllInHighContrastMode || (border && border !== 'none');
+    return hasFullBorder
+        ? `border: ${euiTheme.border.thin};`
+        : `border-block-end: ${euiTheme.border.thin};`;
+};
+const _shadowStyles = (euiThemeContext, shadow, options) => {
+    const { euiTheme } = euiThemeContext;
+    const isRefreshVariant = euiTheme.flags.shadowVariant === 'refresh';
+    const { border = 'all', type = 'box-shadow' } = options;
+    const borderStyle = euiThemeContext.colorMode === 'DARK' && border !== 'none'
+        ? `${euiShadowFloatingBorderStyles(euiThemeContext, {
+            side: border ?? 'all',
+        })}`
+        : '';
+    const shadowStyle = type === 'filter' ? shadow : `box-shadow: ${shadow};`;
+    return `
+    ${shadowStyle};
+    ${isRefreshVariant && borderStyle};
+  `;
 };