@elastic/eui-theme-common 4.0.0 → 6.0.0

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
+ */

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;
 };
@@ -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/cjs/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/cjs/services/vis_color_store.js

@@ -28,14 +28,10 @@ var EuiVisColorStoreImpl = /*#__PURE__*/function () {
     var _this = this;
     _classCallCheck(this, EuiVisColorStoreImpl);
     _defineProperty(this, "_visColors", void 0);
-    _defineProperty(this, "_hasVisColorAdjustment", void 0);
     _defineProperty(this, "events", {});
-    _defineProperty(this, "setVisColors", function (colors, hasColorAdjustment) {
-      if (!(0, _isEqual["default"])(_this._visColors, colors) || hasColorAdjustment !== _this._hasVisColorAdjustment) {
+    _defineProperty(this, "setVisColors", function (colors) {
+      if (!(0, _isEqual["default"])(_this._visColors, colors)) {
         _this._visColors = colors;
-        if (hasColorAdjustment != null) {
-          _this._hasVisColorAdjustment = hasColorAdjustment;
-        }
         _this.publishUpdate(VIS_COLOR_STORE_EVENTS.UPDATE, _this._visColors);
       }
     });
@@ -61,18 +57,12 @@ var EuiVisColorStoreImpl = /*#__PURE__*/function () {
       });
     });
     this._visColors = dependencies.defaultColors;
-    this._hasVisColorAdjustment = dependencies.hasVisColorAdjustment;
   }
   return _createClass(EuiVisColorStoreImpl, [{
     key: "visColors",
     get: function get() {
       return this._visColors;
     }
-  }, {
-    key: "hasVisColorAdjustment",
-    get: function get() {
-      return this._hasVisColorAdjustment;
-    }
   }]);
 }();
 var EuiVisColorStore = exports.EuiVisColorStore = /*#__PURE__*/function () {
@@ -81,11 +71,10 @@ var EuiVisColorStore = exports.EuiVisColorStore = /*#__PURE__*/function () {
   }
   return _createClass(EuiVisColorStore, null, [{
     key: "getInstance",
-    value: function getInstance(defaultColors, hasVisColorAdjustment) {
+    value: function getInstance(defaultColors) {
       if (!this.instance) {
         this.instance = new EuiVisColorStoreImpl({
-          defaultColors: defaultColors,
-          hasVisColorAdjustment: hasVisColorAdjustment
+          defaultColors: defaultColors
         });
       }
       return this.instance;

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

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

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,53 @@
 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
  *
  * 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;