@elastic/eui-theme-common 3.1.0 → 5.0.0

package/lib/esm/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/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;
 };

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": "3.1.0",
+  "version": "5.0.0",
   "description": "EUI theme common",
   "license": "SEE LICENSE IN LICENSE.txt",
   "scripts": {

package/src/global_styling/mixins/_form.scss

@@ -23,7 +23,6 @@
   // Each prefix must be its own content block
   &::-webkit-input-placeholder { @content; opacity: 1; }
   &::-moz-placeholder { @content; opacity: 1; }
-  &:-ms-input-placeholder { @content; opacity: 1; }
   &:-moz-placeholder { @content; opacity: 1; }
   &::placeholder { @content; opacity: 1; }
 }

package/src/global_styling/mixins/_index.scss

@@ -1,5 +1,4 @@
 @import 'responsive';
-@import 'shadow';
 @import 'size';
 @import 'typography';
 @import 'helpers';

package/src/global_styling/mixins/_range.scss

@@ -19,8 +19,6 @@ The following files still use the Sass version:
 @mixin euiRangeTrackPerBrowser {
   &::-webkit-slider-runnable-track { @content; }
   &::-moz-range-track { @content; }
-  &::-ms-fill-lower { @content; }
-  &::-ms-fill-upper { @content; }
 }
 
 @mixin euiRangeThumbBorder {
@@ -52,7 +50,6 @@ The following files still use the Sass version:
 @mixin euiRangeThumbPerBrowser {
   &::-webkit-slider-thumb { @content; }
   &::-moz-range-thumb { @content; }
-  &::-ms-thumb { @content; }
 }
 
 @mixin euiRangeThumbFocus {

package/src/global_styling/mixins/_typography.scss

@@ -43,7 +43,6 @@
   font-weight: $euiFontWeightRegular;
   letter-spacing: -.005em;
   -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
   font-kerning: normal;
 }
 

package/src/global_styling/variables/_index.scss

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

package/src/global_styling/variables/_typography.scss

@@ -1,75 +1,8 @@
 // Families
-$euiFontFamily: 'Inter', BlinkMacSystemFont, Helvetica, Arial, sans-serif !default;
 $euiCodeFontFamily: 'Roboto Mono', Menlo, Courier, monospace !default;
 
 // Careful using ligatures. Code editors like ACE will often error because of width calculations
 $euiFontFeatureSettings: 'calt' 1, 'kern' 1, 'liga' 1 !default;
 
-// Font sizes -- scale is loosely based on Major Third (1.250)
-$euiTextScale:      2.25, 1.75, 1.25, 1.125, 1, .875, .75 !default;
-
-$euiFontSize:       $euiSize !default; // 5th position in scale
-$euiFontSizeXS:     $euiFontSize * nth($euiTextScale, 7) !default; // 12px
-$euiFontSizeS:      $euiFontSize * nth($euiTextScale, 6) !default; // 14px
-$euiFontSizeM:      $euiFontSize * nth($euiTextScale, 4) !default; // 18px
-$euiFontSizeL:      $euiFontSize * nth($euiTextScale, 3) !default; // 20px
-$euiFontSizeXL:     $euiFontSize * nth($euiTextScale, 2) !default; // 28px
-$euiFontSizeXXL:    $euiFontSize * nth($euiTextScale, 1) !default; // 36px
-
 // Line height
-$euiLineHeight:     1.5 !default;
-$euiBodyLineHeight: 1 !default;
-
-// Normally functions are imported before variables in `_index.scss` files
-// But because they need to consume some typography variables they need to live here
-@function convertToRem($size) {
-  @return #{$size / $euiFontSize}rem;
-}
-
-// Our base gridline is at 1/2 the font-size, ensure line-heights stay on that gridline.
-// EX: A proper line-height for text is 1.5 times the font-size.
-//     If our base font size (euiFontSize) is 16, our baseline is 8 (16*1.5 / 3). To ensure the
-//     text stays on the baseline, we pass a multiplier to calculate a line-height in rems.
-@function lineHeightFromBaseline($multiplier: 3) {
-  @return convertToRem(($euiFontSize / 2) * $multiplier);
-}
-
-// Titles map
-// Lists all the properties per EuiTitle size that then gets looped through to create the selectors.
-// The map allows for tokenization and easier customization per theme, otherwise you'd have to override the selectors themselves
-$euiTitles: (
-  'xxxs': (
-    'font-size': $euiFontSizeXS,
-    'line-height': lineHeightFromBaseline(3),
-    'font-weight': $euiFontWeightBold,
-  ),
-  'xxs': (
-    'font-size': $euiFontSizeS,
-    'line-height': lineHeightFromBaseline(3),
-    'font-weight': $euiFontWeightBold,
-  ),
-  'xs': (
-    'font-size': $euiFontSize,
-    'line-height': lineHeightFromBaseline(3),
-    'font-weight': $euiFontWeightSemiBold,
-    'letter-spacing': -.02em,
-  ),
-  's': (
-    'font-size': $euiFontSizeL,
-    'line-height': lineHeightFromBaseline(4),
-    'font-weight': $euiFontWeightMedium,
-    'letter-spacing': -.025em,
-  ),
-  'm': (
-    'font-size': $euiFontSizeXL,
-    'line-height': lineHeightFromBaseline(5),
-    'font-weight': $euiFontWeightLight,
-    'letter-spacing': -.04em,
-  ),
-  'l': (
-    'font-size': $euiFontSizeXXL,
-    'line-height': lineHeightFromBaseline(6),
-    'font-weight': $euiFontWeightLight,
-    'letter-spacing': -.03em,
-  ),
-) !default;
+$euiLineHeight:     1.5 !default;

package/src/global_styling/mixins/_shadow.scss

@@ -1,100 +0,0 @@
-@function shadowOpacity($opacity) {
-  @if (lightness($euiColorTextParagraph) < 50) {
-    @return $opacity * 1;
-  } @else {
-    @return $opacity * 2.5;
-  }
-}
-
-@mixin euiSlightShadow($color: $euiShadowColor) {
-  box-shadow:
-    0 .8px .8px rgba($color, shadowOpacity(.04)),
-    0 2.3px 2px rgba($color, shadowOpacity(.03));
-}
-
-@mixin euiBottomShadowSmall($color: $euiShadowColor) {
-  box-shadow:
-    0 .7px 1.4px rgba($color, shadowOpacity(.07)),
-    0 1.9px 4px rgba($color, shadowOpacity(.05)),
-    0 4.5px 10px rgba($color, shadowOpacity(.05));
-}
-
-@mixin euiBottomShadowMedium($color: $euiShadowColor) {
-  box-shadow:
-    0 .9px 4px -1px rgba($color, shadowOpacity(.08)),
-    0 2.6px 8px -1px rgba($color, shadowOpacity(.06)),
-    0 5.7px 12px -1px rgba($color, shadowOpacity(.05)),
-    0 15px 15px -1px rgba($color, shadowOpacity(.04));
-}
-
-// Similar to shadow medium but without the bottom depth. Useful for popovers
-// that drop UP rather than DOWN.
-@mixin euiBottomShadowFlat($color: $euiShadowColor) {
-  box-shadow:
-    0 0 .8px rgba($color, shadowOpacity(.06)),
-    0 0 2px rgba($color, shadowOpacity(.04)),
-    0 0 5px rgba($color, shadowOpacity(.04)),
-    0 0 17px rgba($color, shadowOpacity(.03));
-}
-
-@mixin euiBottomShadow($color: $euiShadowColor) {
-  box-shadow:
-    0 1px 5px rgba($color, shadowOpacity(.1)),
-    0 3.6px 13px rgba($color, shadowOpacity(.07)),
-    0 8.4px 23px rgba($color, shadowOpacity(.06)),
-    0 23px 35px rgba($color, shadowOpacity(.05));
-}
-
-@mixin euiBottomShadowLarge(
-  $color: $euiShadowColor,
-  $opacity: 0,
-  $reverse: false
-) {
-  @if ($reverse) {
-    box-shadow:
-      0 -2.7px 9px rgba($color, shadowOpacity(.13)),
-      0 -9.4px 24px rgba($color, shadowOpacity(.09)),
-      0 -21.8px 43px rgba($color, shadowOpacity(.08));
-  } @else {
-    box-shadow:
-      0 2.7px 9px rgba($color, shadowOpacity(.13)),
-      0 9.4px 24px rgba($color, shadowOpacity(.09)),
-      0 21.8px 43px rgba($color, shadowOpacity(.08));
-  }
-}
-
-// stylelint-disable color-named
-@mixin euiOverflowShadow($direction: 'y', $side: 'both') {
-  $hideHeight: $euiScrollBarCornerThin * 1.25;
-  $gradient: null;
-  $gradientStart:
-    transparentize(red, .9) 0%,
-    transparentize(red, 0) $hideHeight;
-  $gradientEnd:
-    transparentize(red, 0) calc(100% - #{$hideHeight}),
-    transparentize(red, .9) 100%;
-  @if ($side == 'both' or $side == 'start' or $side == 'end') {
-    @if ($side == 'both') {
-      $gradient: $gradientStart, $gradientEnd;
-    } @else if ($side == 'start') {
-      $gradient: $gradientStart;
-    } @else {
-      $gradient: $gradientEnd;
-    }
-  } @else {
-    @warn "euiOverflowShadow() expects side to be 'both', 'start' or 'end' but got '#{$side}'";
-  }
-
-  @if ($direction == 'y') {
-    mask-image: linear-gradient(to bottom, #{$gradient});
-  } @else if ($direction == 'x') {
-    mask-image: linear-gradient(to right, #{$gradient});
-  } @else {
-    @warn "euiOverflowShadow() expects direction to be 'y' or 'x' but got '#{$direction}'";
-  }
-
-  // Chrome+Edge has a very bizarre edge case bug where `mask-image` stops working
-  // This workaround forces a stacking context on the scrolling container, which
-  // hopefully addresses the bug. @see https://github.com/elastic/eui/pull/7855
-  transform: translateZ(0);
-}

package/src/global_styling/variables/_shadows.scss

@@ -1,2 +0,0 @@
-// Shadows
-$euiShadowColor: $euiColorInk !default;