[Visual Refresh] Implement shadow token and shadow util updates

packages/eui-theme-borealis/changelogs/upcoming/9088.md

@@ -0,0 +1,11 @@
+- Added new shadow tokens
+  - `shadows.colors.base`
+  - `shadows.xs`
+  - `shadows.s`
+  - `shadows.m`
+  - `shadows.l`
+  - `shadows.xl`
+  - `shadows.flat`
+  - `shadows.hover.base`
+  - `shadows.hover.xl`
+

packages/eui-theme-borealis/src/eui_theme_borealis_dark.json

@@ -136,6 +136,42 @@
   },
   "euiBreakpointKeys": "'xs', 's', 'm', 'l', 'xl'",
   "euiShadowColor": "#000000",
+  "euiShadows": {
+    "xs": {
+      "down": "0px 1px 4px 0px hsla(0,0%,0%,0.4), 0px 2px 8px 0px hsla(0,0%,0%,0.24)",
+      "up": "0px 1px 4px 0px hsla(0,0%,0%,0.4), 0px -2px 8px 0px hsla(0,0%,0%,0.24)"
+    },
+    "s":{
+      "down": "0px 2px 7px 0px hsla(0,0%,0%,0.46), 0px 4px 11px 0px hsla(0,0%,0%,0.26)",
+      "up": "0px 2px 7px 0px hsla(0,0%,0%,0.46), 0px -4px 11px 0px hsla(0,0%,0%,0.26)"
+    },
+    "m": {
+      "down": "0px 3px 10px 0px hsla(0,0%,0%,0.52), 0px 6px 14px 0px hsla(0,0%,0%,0.28)",
+      "up": "0px 3px 10px 0px hsla(0,0%,0%,0.52), 0px -6px 14px 0px hsla(0,0%,0%,0.28)"
+    },
+    "l": {
+      "down": "0px 4px 13px 0px hsla(0,0%,0%,0.58), 0px 8px 17px 0px hsla(0,0%,0%,0.3)",
+      "up": "0px 4px 13px 0px hsla(0,0%,0%,0.58), 0px -8px 17px 0px hsla(0,0%,0%,0.3)"
+    },
+    "xl": {
+      "down": "0px 5px 16px 0px hsla(0,0%,0%,0.64), 0px 10px 20px 0px hsla(0,0%,0%,0.32)",
+      "up": "0px 5px 16px 0px hsla(0,0%,0%,0.64), 0px -10px 20px 0px hsla(0,0%,0%,0.32)"
+    },
+    "hover": {
+      "base": {
+        "down": "0px 2px 7px 0px hsla(0,0%,0%,0.46), 0px 4px 11px 0px hsla(0,0%,0%,0.26)",
+        "up": "0px -2px 7px 0px hsla(0,0%,0%,0.46), 0px -4px 11px 0px hsla(0,0%,0%,0.26)"
+      },
+      "xl": {
+        "down": "0px 6px 19px 0px hsla(0,0%,0%,0.7), 0px 12px 23px 0px hsla(0,0%,0%,0.34)",
+        "up": "0px -6px 19px 0px hsla(0,0%,0%,0.7), 0px -12px 23px 0px hsla(0,0%,0%,0.34)"
+      }
+    },
+    "flat": {
+      "down": "0px 1px 4px 0px hsla(0,0%,0%,0.4), 0px 2px 8px 0px hsla(0,0%,0%,0.24)",
+      "up": "0px 1px 4px 0px hsla(0,0%,0%,0.4), 0px -2px 8px 0px hsla(0,0%,0%,0.24)"
+    }
+  },
   "euiSize": "16px",
   "euiSizeXS": "4px",
   "euiSizeS": "8px",

packages/eui-theme-borealis/src/eui_theme_borealis_dark.json.d.ts

@@ -137,6 +137,42 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_dark.json' {
     };
     euiBreakpointKeys: string;
     euiShadowColor: string;
+    euiShadows: {
+      xs: {
+        down: string;
+        up: string;
+      };
+      s: {
+        down: string;
+        up: string;
+      };
+      m: {
+        down: string;
+        up: string;
+      };
+      l: {
+        down: string;
+        up: string;
+      };
+      xl: {
+        down: string;
+        up: string;
+      };
+      hover: {
+        base: {
+          down: string;
+          up: string;
+        };
+        xl: {
+          down: string;
+          up: string;
+        };
+      };
+      flat: {
+        down: string;
+        up: string;
+      };
+    };
     euiSize: string;
     euiSizeXS: string;
     euiSizeS: string;

packages/eui-theme-borealis/src/eui_theme_borealis_light.json

@@ -135,7 +135,43 @@
     "xl": "1200px"
   },
   "euiBreakpointKeys": "'xs', 's', 'm', 'l', 'xl'",
-  "euiShadowColor": "#000000",
+  "euiShadowColor": "#2B394F",
+  "euiShadows": {
+    "xs": {
+      "down": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px 1px 4px 0px hsl(216.67deg 29.51% 23.92% / 0.06), 0px 2px 8px 0px hsl(216.67deg 29.51% 23.92% / 0.04)",
+      "up": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px -1px 4px 0px hsl(216.67deg 29.51% 23.92% / 0.06), 0px -2px 8px 0px hsl(216.67deg 29.51% 23.92% / 0.04)"
+    },
+    "s": {
+      "down": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px 2px 7px 0px hsl(216.67deg 29.51% 23.92% / 0.08), 0px 4px 11px 0px hsl(216.67deg 29.51% 23.92% / 0.05)",
+      "up": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px -2px 7px 0px hsl(216.67deg 29.51% 23.92% / 0.08), 0px -4px 11px 0px hsl(216.67deg 29.51% 23.92% / 0.05)"
+    },
+    "m": {
+      "down": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px 3px 10px 0px hsl(216.67deg 29.51% 23.92% / 0.1), 0px 6px 14px 0px hsl(216.67deg 29.51% 23.92% / 0.06)",
+      "up": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px -3px 10px 0px hsl(216.67deg 29.51% 23.92% / 0.1), 0px -6px 14px 0px hsl(216.67deg 29.51% 23.92% / 0.06)"
+    },
+    "l": {
+      "down": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px 4px 13px 0px hsl(216.67deg 29.51% 23.92% / 0.12), 0px 8px 17px 0px hsl(216.67deg 29.51% 23.92% / 0.07)",
+      "up": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px -4px 13px 0px hsl(216.67deg 29.51% 23.92% / 0.12), 0px -8px 17px 0px hsl(216.67deg 29.51% 23.92% / 0.07)"
+    },
+    "xl": {
+      "down": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px 5px 16px 0px hsl(216.67deg 29.51% 23.92% / 0.14), 0px 10px 20px 0px hsl(216.67deg 29.51% 23.92% / 0.08)",
+      "up": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px -5px 16px 0px hsl(216.67deg 29.51% 23.92% / 0.14), 0px -10px 20px 0px hsl(216.67deg 29.51% 23.92% / 0.08)"
+    },
+    "hover": {
+      "base": {
+        "down": "0px 0px 2px 0px hsla(216.67,29.51%,23.92%,0.16), 0px 2px 7px 0px hsla(216.67,29.51%,23.92%,0.08), 0px 4px 11px 0px hsla(216.67,29.51%,23.92%,0.05)",
+        "up": "0px 0px 2px 0px hsla(216.67,29.51%,23.92%,0.16), 0px -2px 7px 0px hsla(216.67,29.51%,23.92%,0.08), 0px -4px 11px 0px hsla(216.67,29.51%,23.92%,0.05)"
+      },
+      "xl": {
+        "down": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px 6px 19px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px 12px 23px 0px hsl(216.67deg 29.51% 23.92% / 0.09)",
+        "up": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px -6px 19px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px -12px 23px 0px hsl(216.67deg 29.51% 23.92% / 0.09)"
+      }
+    },
+    "flat": {
+      "down": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px 1px 4px 0px hsl(216.67deg 29.51% 23.92% / 0.06), 0px 2px 8px 0px hsl(216.67deg 29.51% 23.92% / 0.04)",
+      "up": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px -1px 4px 0px hsl(216.67deg 29.51% 23.92% / 0.06), 0px -2px 8px 0px hsl(216.67deg 29.51% 23.92% / 0.04)"
+    }
+  },
   "euiSize": "16px",
   "euiSizeXS": "4px",
   "euiSizeS": "8px",

packages/eui-theme-borealis/src/eui_theme_borealis_light.json.d.ts

@@ -137,6 +137,42 @@ declare module '@elastic/eui-theme-borealis/lib/eui_theme_borealis_light.json' {
     };
     euiBreakpointKeys: string;
     euiShadowColor: string;
+    euiShadows: {
+      xs: {
+        down: string;
+        up: string;
+      };
+      s: {
+        down: string;
+        up: string;
+      };
+      m: {
+        down: string;
+        up: string;
+      };
+      l: {
+        down: string;
+        up: string;
+      };
+      xl: {
+        down: string;
+        up: string;
+      };
+      hover: {
+        base: {
+          down: string;
+          up: string;
+        };
+        xl: {
+          down: string;
+          up: string;
+        };
+      };
+      flat: {
+        down: string;
+        up: string;
+      };
+    };
     euiSize: string;
     euiSizeXS: string;
     euiSizeS: string;

packages/eui-theme-borealis/src/index.ts

@@ -15,6 +15,7 @@ import { base, size } from './variables/_size';
 import { border } from './variables/_borders';
 import { levels } from './variables/_levels';
 import { font } from './variables/_typography';
+import { shadows } from './variables/_shadows';
 import { focus } from './variables/_states';
 import { components } from './variables/_components';
 import { overrides } from './variables/_overrides';
@@ -35,13 +36,15 @@ export const euiThemeBorealis: EuiThemeShape = {
   animation,
   breakpoint,
   levels,
+  shadows,
   focus,
   components,
   flags: {
     hasGlobalFocusColor: true,
     hasVisColorAdjustment: false,
     buttonVariant: 'refresh',
     formVariant: 'refresh',
+    shadowVariant: 'refresh',
   },
   overrides,
 };

packages/eui-theme-borealis/src/mixins/_index.scss

@@ -0,0 +1 @@
+@import 'shadow'

packages/eui-theme-borealis/src/mixins/_shadow.scss

@@ -0,0 +1,131 @@
+@function shadowOpacity($opacity) {
+  @if (lightness($euiColorTextParagraph) < 50) {
+    @return $opacity * 1;
+  } @else {
+    @return $opacity * 2.5;
+  }
+}
+
+@function _colorMode() {
+  @if (lightness($euiColorTextParagraph) < 50) {
+    @return 'light';
+  } @else {
+    @return 'dark';
+  }
+}
+
+// "xs"
+@mixin euiSlightShadow($color: $euiShadowColor) {
+  @if _colorMode() == 'light' {
+    box-shadow:
+      0px 0px 2px 0px hsl(from $euiShadowColor h s l / 0.16),
+      0px 1px 4px 0px hsl(from $euiShadowColor h s l / 0.06),
+      0px 2px 8px 0px hsl(from $euiShadowColor h s l / 0.04);
+  } @else {
+    box-shadow:
+      0px 1px 4px 0px hsl(from $euiShadowColor h s l / 0.4),
+      0px 2px 8px 0px hsl(from $euiShadowColor h s l/ 0.24);
+  }
+}
+
+@mixin euiBottomShadowSmall($color: $euiShadowColor) {
+  @if _colorMode == 'light' {
+    box-shadow:
+      0px 0px 2px 0px hsl(from $euiShadowColor h s l / 0.16),
+      0px 2px 7px 0px hsl(from $euiShadowColor h s l / 0.08),
+      0px 4px 11px 0px hsl(from $euiShadowColor h s l / 0.05);
+  } @else {
+    box-shadow:
+      0px 2px 7px 0px hsl(from $euiShadowColor h s l / 0.46),
+      0px 4px 11px 0px hsl(from $euiShadowColor h s l / 0.26);
+  }
+}
+
+@mixin euiBottomShadowMedium($color: $euiShadowColor) {
+  @if _colorMode == 'light' {
+    box-shadow:
+      0px 0px 2px 0px hsl(from $euiShadowColor h s l / 0.16),
+      0px 3px 10px 0px hsl(from $euiShadowColor h s l / 0.1),
+      0px 6px 14px 0px hsl(from $euiShadowColor h s l / 0.06);
+  } @else {
+    box-shadow:
+      0px 3px 10px 0px hsl(from $euiShadowColor h s l / 0.52),
+      0px 6px 14px 0px hsl(from $euiShadowColor h s l / 0.28);
+  }
+}
+
+@mixin euiBottomShadowFlat($color: $euiShadowColor) {
+  @include euiSlightShadow($color);
+}
+
+@mixin euiBottomShadow($color: $euiShadowColor) {
+  @include euiBottomShadowMedium($color);
+}
+
+@mixin euiBottomShadowLarge(
+  $color: $euiShadowColor,
+  $opacity: 0,
+  $reverse: false
+) {
+  @if ($reverse) {
+    @if _colorMode == 'light' {
+      box-shadow:
+        0px 0px 2px 0px hsl(from $euiShadowColor h s l / 0.16),
+        0px -4px 13px 0px hsl(from $euiShadowColor h s l / 0.12),
+        0px -8px 17px 0px hsl(from $euiShadowColor h s l / 0.07);
+    } @else {
+      box-shadow:
+        0px -4px 13px 0px hsl(from $euiShadowColor h s l / 0.58),
+        0px -8px 17px 0px hsl(from $euiShadowColor h s l / 0.3);
+    }
+  } @else {
+    @if _colorMode == 'light' {
+      box-shadow:
+        0px 0px 2px 0px hsl(from $euiShadowColor h s l / 0.16),
+        0px 4px 13px 0px hsl(from $euiShadowColor h s l / 0.12),
+        0px 8px 17px 0px hsl(from $euiShadowColor h s l / 0.07);
+    } @else {
+      box-shadow:
+        0px 4px 13px 0px hsl(from $euiShadowColor h s l / 0.58),
+        0px 8px 17px 0px hsl(from $euiShadowColor h s l / 0.3);
+    }
+  }
+}
+
+// Not part of the Borealis shadow spec, used in scroll utilities
+
+// 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);
+}

packages/eui-theme-borealis/src/theme_dark.scss

@@ -2,8 +2,10 @@
 // color mode specific variables
 @import './variables/colors/colors_vis_dark';
 @import './variables/colors/colors_dark';
+@import './variables/shadows_dark';
 
 
 // Global styling
 @import './variables/index';
+@import 'mixins/index';
 @import 'node_modules/@elastic/eui-theme-common/src/global_styling/index';

packages/eui-theme-borealis/src/theme_light.scss

@@ -1,8 +1,10 @@
 // color mode specific variables
 @import './variables/colors/colors_vis_light';
 @import './variables/colors/colors_light';
+@import './variables/shadows_light';
 
 
 // Global styling
 @import './variables/index';
+@import 'mixins/index';
 @import 'node_modules/@elastic/eui-theme-common/src/global_styling/index';