@elastic/eui-theme-common 4.0.0 → 6.0.0

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

@@ -5,123 +5,113 @@
  * 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
  *
  * 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 +129,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};
+  `;
 };

package/lib/esm/global_styling/variables/borders.d.ts

@@ -15,7 +15,7 @@ export interface _EuiThemeBorderWidthValues {
 export interface _EuiThemeBorderRadiusValues {
     /**
      * Primary corner radius size
-     * - Default value: 4px (6px in Amsterdam)
+     * - Default value: 4px
      */
     medium: CSSProperties['borderRadius'];
     /**

package/lib/esm/global_styling/variables/components.d.ts

@@ -67,7 +67,6 @@ export declare type _EuiThemeComponentColors = {
     filterSelectItemBackgroundFocusDisabled: ColorModeSwitch;
     flyoutFooterBackground: ColorModeSwitch;
     flyoutCloseButtonInsideBackground: ColorModeSwitch;
-    keyPadMenuItemBackgroundDisabledSelect: ColorModeSwitch;
     listGroupItemBackgroundPrimaryActive: ColorModeSwitch;
     listGroupItemBackgroundSubduedActive: ColorModeSwitch;
     listGroupItemBackgroundHover: ColorModeSwitch;

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

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

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

@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 export const EuiThemeShadowSizes = ['xs', 's', 'm', 'l', 'xl'];
+export const EuiThemeShadowHoverSizes = ['s', 'm', 'l', 'xl', 'xxl'];
 /**
  * Shadow t-shirt sizes descriptions
  */

package/lib/esm/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/esm/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;
 };
@@ -79,3 +81,8 @@ export interface UseEuiTheme<T extends {} = {}> {
     highContrastMode: EuiThemeHighContrastMode;
     modifications: EuiThemeModifications<T>;
 }
+export interface EUI_THEME {
+    text: string;
+    value: string;
+    provider?: EuiThemeSystem;
+}

package/lib/esm/services/vis_color_store.d.ts

@@ -6,28 +6,24 @@ export declare type VisColorStoreEvents = keyof typeof VIS_COLOR_STORE_EVENTS;
 declare type EventId = string;
 export declare type _EuiVisColorStore = {
     visColors: _EuiThemeVisColors;
-    hasVisColorAdjustment: boolean;
-    setVisColors: (colors: _EuiThemeVisColors, hasVisColorAdjustment?: boolean) => void;
+    setVisColors: (colors: _EuiThemeVisColors) => void;
     subscribe: (eventName: VisColorStoreEvents, callback: any) => EventId;
     unsubscribe: (eventName: VisColorStoreEvents, id: EventId) => void;
 };
 declare class EuiVisColorStoreImpl implements _EuiVisColorStore {
     private _visColors;
-    private _hasVisColorAdjustment;
     private events;
     constructor(dependencies: {
         defaultColors: _EuiThemeVisColors;
-        hasVisColorAdjustment: boolean;
     });
     get visColors(): _EuiVisColorStore['visColors'];
-    get hasVisColorAdjustment(): _EuiVisColorStore['hasVisColorAdjustment'];
-    setVisColors: (colors: _EuiThemeVisColors, hasColorAdjustment?: boolean | undefined) => void;
+    setVisColors: (colors: _EuiThemeVisColors) => void;
     subscribe: (eventName: VisColorStoreEvents, callback: NonNullable<any>) => string;
     unsubscribe: (eventName: VisColorStoreEvents, id: EventId) => void;
     private publishUpdate;
 }
 export declare class EuiVisColorStore {
     private static instance;
-    static getInstance(defaultColors: _EuiThemeVisColors, hasVisColorAdjustment: boolean): EuiVisColorStoreImpl;
+    static getInstance(defaultColors: _EuiThemeVisColors): EuiVisColorStoreImpl;
 }
 export {};

package/lib/esm/services/vis_color_store.js

@@ -13,13 +13,9 @@ export const VIS_COLOR_STORE_EVENTS = {
 class EuiVisColorStoreImpl {
     constructor(dependencies) {
         this.events = {};
-        this.setVisColors = (colors, hasColorAdjustment) => {
-            if (!isEqual(this._visColors, colors) ||
-                hasColorAdjustment !== this._hasVisColorAdjustment) {
+        this.setVisColors = (colors) => {
+            if (!isEqual(this._visColors, colors)) {
                 this._visColors = colors;
-                if (hasColorAdjustment != null) {
-                    this._hasVisColorAdjustment = hasColorAdjustment;
-                }
                 this.publishUpdate(VIS_COLOR_STORE_EVENTS.UPDATE, this._visColors);
             }
         };
@@ -46,21 +42,16 @@ class EuiVisColorStoreImpl {
                 });
         };
         this._visColors = dependencies.defaultColors;
-        this._hasVisColorAdjustment = dependencies.hasVisColorAdjustment;
     }
     get visColors() {
         return this._visColors;
     }
-    get hasVisColorAdjustment() {
-        return this._hasVisColorAdjustment;
-    }
 }
 export class EuiVisColorStore {
-    static getInstance(defaultColors, hasVisColorAdjustment) {
+    static getInstance(defaultColors) {
         if (!this.instance) {
             this.instance = new EuiVisColorStoreImpl({
                 defaultColors,
-                hasVisColorAdjustment,
             });
         }
         return this.instance;

package/lib/esm/services/vis_color_store.test.js

@@ -11,7 +11,7 @@ const visColors = {
     euiColorVis0: '#aabbcc',
 };
 describe('EuiVisColorStore', () => {
-    const visColorStore = EuiVisColorStore.getInstance(visColors, false);
+    const visColorStore = EuiVisColorStore.getInstance(visColors);
     let updateFn;
     beforeEach(() => {
         updateFn = jest.fn();
@@ -31,10 +31,6 @@ describe('EuiVisColorStore', () => {
             visColorStore.setVisColors(customColors);
             expect(visColorStore.visColors).toEqual(customColors);
         });
-        it('updates hasVisColorAdjustment', () => {
-            visColorStore.setVisColors(customColors, true);
-            expect(visColorStore.hasVisColorAdjustment).toEqual(true);
-        });
     });
     describe('subcribe and unsubscribe', () => {
         it('subscribes to store updates', () => {

package/lib/esm/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/esm/utils.js

@@ -5,6 +5,7 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+import chroma from 'chroma-js';
 import { COLOR_MODES_STANDARD, COLOR_MODES_INVERSE, EUI_THEME_OVERRIDES_KEY, EUI_THEME_HIGH_CONTRAST_MODE_KEY, } from './global_styling';
 export const DEFAULT_COLOR_MODE = COLOR_MODES_STANDARD.light;
 /**
@@ -331,3 +332,33 @@ export const getTokenName = (prefix, variant, suffix) => {
     const colorName = variant.charAt(0).toUpperCase() + variant.slice(1);
     return `${prefix}${getCapitalized(colorName)}${_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
+ */
+export function formatMultipleBoxShadow(layers, options) {
+    if (layers.length === 0) {
+        return 'none';
+    }
+    const { direction = 'down', color = '#000' } = options ?? {};
+    /* prettier-ignore */
+    const shadowLayers = layers.map((layer, i) => {
+        const y = (direction === 'up' && i > 0) ? -layer.y : layer.y;
+        const shadowColor = chroma(color).alpha(layer.opacity).css('hsl');
+        return `${layer.x}px ${y}px ${layer.blur}px ${layer.spread}px ${shadowColor}`;
+    });
+    return shadowLayers.join(', ');
+}

package/lib/esm/utils.test.js

@@ -5,7 +5,7 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import { isInverseColorMode, getColorMode, getOn, setOn, computed, Computed, getComputed, buildTheme, mergeDeep, getTokenName, } from './utils';
+import { isInverseColorMode, getColorMode, getOn, setOn, computed, Computed, getComputed, buildTheme, mergeDeep, getTokenName, formatMultipleBoxShadow, } from './utils';
 describe('isInverseColorMode', () => {
     it("true only if 'inverse'", () => {
         expect(isInverseColorMode('LIGHT')).toBe(false);
@@ -233,3 +233,24 @@ describe('getTokenName', () => {
         expect(getTokenName('backgroundBase', 'primary', 'hovered')).toEqual('backgroundBasePrimaryHovered');
     });
 });
+describe('formatMultipleBoxShadow', () => {
+    const layers = [
+        { x: 0, y: 4, blur: 8, spread: 0, opacity: 0.1 },
+        { x: 0, y: 2, blur: 4, spread: 0, opacity: 0.05 },
+    ];
+    const options = {
+        color: '#000000',
+    };
+    it('returns a valid CSS box-shadow value', () => {
+        expect(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', () => {
+        expect(formatMultipleBoxShadow([layers[0]], options)).toEqual('0px 4px 8px 0px hsla(0,0%,0%,0.1)');
+    });
+    it('formats the "up" variant', () => {
+        expect(formatMultipleBoxShadow(layers, { ...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', () => {
+        expect(formatMultipleBoxShadow([], options)).toEqual('none');
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elastic/eui-theme-common",
-  "version": "4.0.0",
+  "version": "6.0.0",
   "description": "EUI theme common",
   "license": "SEE LICENSE IN LICENSE.txt",
   "scripts": {

package/src/global_styling/mixins/_index.scss

@@ -1,14 +1,7 @@
 @import 'responsive';
-@import 'shadow';
 @import 'size';
 @import 'typography';
 @import 'helpers';
 @import 'states';
 
-@import 'button';
-@import 'form';
-@import 'loading';
-@import 'link';
-@import 'panel';
-@import 'range';
 @import 'tool_tip';

package/src/global_styling/mixins/_states.scss

@@ -1,4 +1,4 @@
-@mixin euiFocusRing($size: 'small', $amsterdamOnlyProp: null) {
+@mixin euiFocusRing($size: 'small') {
   @if $size == 'large' {
     // It's always OK to use the focus animation. This will take precedence over times we turn it off individually like EuiButtonEmpty
     // stylelint-disable-next-line declaration-no-important

package/src/global_styling/variables/_index.scss

@@ -14,7 +14,6 @@
 @import 'typography';
 @import 'borders';
 @import 'responsive';
-@import 'shadows';
 @import 'states';
 @import 'z_index';