diff --git a/packages/eui-theme-borealis/changelogs/upcoming/9088.md b/packages/eui-theme-borealis/changelogs/upcoming/9088.md
new file mode 100644
index 00000000000..03afe2ec11d
--- /dev/null
+++ b/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`
+
diff --git a/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json b/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json
index f29e377c785..1a16b4f715f 100644
--- a/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json
+++ b/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",
diff --git a/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json.d.ts b/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json.d.ts
index 67f9282cfaf..446c9fff28a 100644
--- a/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json.d.ts
+++ b/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;
diff --git a/packages/eui-theme-borealis/src/eui_theme_borealis_light.json b/packages/eui-theme-borealis/src/eui_theme_borealis_light.json
index f77f83a10e5..35b8be7d98a 100644
--- a/packages/eui-theme-borealis/src/eui_theme_borealis_light.json
+++ b/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",
diff --git a/packages/eui-theme-borealis/src/eui_theme_borealis_light.json.d.ts b/packages/eui-theme-borealis/src/eui_theme_borealis_light.json.d.ts
index 4ac26aabd31..6e020c89ba2 100644
--- a/packages/eui-theme-borealis/src/eui_theme_borealis_light.json.d.ts
+++ b/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;
diff --git a/packages/eui-theme-borealis/src/index.ts b/packages/eui-theme-borealis/src/index.ts
index 078c739583c..eff55ca8ed7 100644
--- a/packages/eui-theme-borealis/src/index.ts
+++ b/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,6 +36,7 @@ export const euiThemeBorealis: EuiThemeShape = {
   animation,
   breakpoint,
   levels,
+  shadows,
   focus,
   components,
   flags: {
@@ -42,6 +44,7 @@ export const euiThemeBorealis: EuiThemeShape = {
     hasVisColorAdjustment: false,
     buttonVariant: 'refresh',
     formVariant: 'refresh',
+    shadowVariant: 'refresh',
   },
   overrides,
 };
diff --git a/packages/eui-theme-borealis/src/mixins/_index.scss b/packages/eui-theme-borealis/src/mixins/_index.scss
new file mode 100644
index 00000000000..bf9c2914e3a
--- /dev/null
+++ b/packages/eui-theme-borealis/src/mixins/_index.scss
@@ -0,0 +1 @@
+@import 'shadow'
\ No newline at end of file
diff --git a/packages/eui-theme-borealis/src/mixins/_shadow.scss b/packages/eui-theme-borealis/src/mixins/_shadow.scss
new file mode 100644
index 00000000000..36ef6a78463
--- /dev/null
+++ b/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);
+}
\ No newline at end of file
diff --git a/packages/eui-theme-borealis/src/theme_dark.scss b/packages/eui-theme-borealis/src/theme_dark.scss
index 31ca1c308e2..5925c0753c3 100644
--- a/packages/eui-theme-borealis/src/theme_dark.scss
+++ b/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';
\ No newline at end of file
diff --git a/packages/eui-theme-borealis/src/theme_light.scss b/packages/eui-theme-borealis/src/theme_light.scss
index f3dbda60f99..5b665f5bc4c 100644
--- a/packages/eui-theme-borealis/src/theme_light.scss
+++ b/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';
\ No newline at end of file
diff --git a/packages/eui-theme-borealis/src/variables/_shadows.ts b/packages/eui-theme-borealis/src/variables/_shadows.ts
new file mode 100644
index 00000000000..c99de239654
--- /dev/null
+++ b/packages/eui-theme-borealis/src/variables/_shadows.ts
@@ -0,0 +1,488 @@
+/*
+ * 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.
+ */
+
+import {
+  formatMultipleBoxShadow,
+  type _EuiThemeShadows,
+  type _EuiThemeShadowPrimitives,
+} from '@elastic/eui-theme-common';
+import { SEMANTIC_COLORS } from './colors/_semantic_colors';
+import { PRIMITIVE_COLORS } from './colors/_primitive_colors';
+
+/**
+ * This structure holds "primitives" (or actual design tokens as they
+ * would be stored in a design token repository).
+ * Not exposing them in the theme object is intentional.
+ */
+export const shadowPrimitives: _EuiThemeShadowPrimitives = {
+  xs: {
+    light: [
+      {
+        opacity: 0.16,
+        x: 0,
+        y: 0,
+        blur: 2,
+        spread: 0,
+      },
+      {
+        opacity: 0.06,
+        x: 0,
+        y: 1,
+        blur: 4,
+        spread: 0,
+      },
+      {
+        opacity: 0.04,
+        x: 0,
+        y: 2,
+        blur: 8,
+        spread: 0,
+      },
+    ],
+    dark: [
+      {
+        opacity: 1,
+        x: 0,
+        y: 0,
+        blur: 0,
+        spread: 1,
+      },
+      {
+        opacity: 0.4,
+        x: 0,
+        y: 1,
+        blur: 4,
+        spread: 0,
+      },
+      {
+        opacity: 0.24,
+        x: 0,
+        y: 2,
+        blur: 8,
+        spread: 0,
+      },
+    ],
+  },
+  s: {
+    light: [
+      {
+        opacity: 0.16,
+        x: 0,
+        y: 0,
+        blur: 2,
+        spread: 0,
+      },
+      {
+        opacity: 0.08,
+        x: 0,
+        y: 2,
+        blur: 7,
+        spread: 0,
+      },
+      {
+        opacity: 0.05,
+        x: 0,
+        y: 4,
+        blur: 11,
+        spread: 0,
+      },
+    ],
+    dark: [
+      {
+        opacity: 1,
+        x: 0,
+        y: 0,
+        blur: 0,
+        spread: 1,
+      },
+      {
+        opacity: 0.46,
+        x: 0,
+        y: 2,
+        blur: 7,
+        spread: 0,
+      },
+      {
+        opacity: 0.26,
+        x: 0,
+        y: 4,
+        blur: 11,
+        spread: 0,
+      },
+    ],
+  },
+  m: {
+    light: [
+      {
+        opacity: 0.16,
+        x: 0,
+        y: 0,
+        blur: 2,
+        spread: 0,
+      },
+      {
+        opacity: 0.1,
+        x: 0,
+        y: 3,
+        blur: 10,
+        spread: 0,
+      },
+      {
+        opacity: 0.06,
+        x: 0,
+        y: 6,
+        blur: 14,
+        spread: 0,
+      },
+    ],
+    dark: [
+      {
+        opacity: 1,
+        x: 0,
+        y: 0,
+        blur: 0,
+        spread: 1,
+      },
+      {
+        opacity: 0.52,
+        x: 0,
+        y: 3,
+        blur: 10,
+        spread: 0,
+      },
+      {
+        opacity: 0.28,
+        x: 0,
+        y: 6,
+        blur: 14,
+        spread: 0,
+      },
+    ],
+  },
+  l: {
+    light: [
+      {
+        opacity: 0.16,
+        x: 0,
+        y: 0,
+        blur: 2,
+        spread: 0,
+      },
+      {
+        opacity: 0.12,
+        x: 0,
+        y: 4,
+        blur: 13,
+        spread: 0,
+      },
+      {
+        opacity: 0.07,
+        x: 0,
+        y: 8,
+        blur: 17,
+        spread: 0,
+      },
+    ],
+    dark: [
+      {
+        opacity: 1,
+        x: 0,
+        y: 0,
+        blur: 0,
+        spread: 1,
+      },
+      {
+        opacity: 0.58,
+        x: 0,
+        y: 4,
+        blur: 13,
+        spread: 0,
+      },
+      {
+        opacity: 0.3,
+        x: 0,
+        y: 8,
+        blur: 17,
+        spread: 0,
+      },
+    ],
+  },
+  xl: {
+    light: [
+      {
+        opacity: 0.16,
+        x: 0,
+        y: 0,
+        blur: 2,
+        spread: 0,
+      },
+      {
+        opacity: 0.14,
+        x: 0,
+        y: 5,
+        blur: 16,
+        spread: 0,
+      },
+      {
+        opacity: 0.08,
+        x: 0,
+        y: 10,
+        blur: 20,
+        spread: 0,
+      },
+    ],
+    dark: [
+      {
+        opacity: 1,
+        x: 0,
+        y: 0,
+        blur: 0,
+        spread: 1,
+      },
+      {
+        opacity: 0.64,
+        x: 0,
+        y: 5,
+        blur: 16,
+        spread: 0,
+      },
+      {
+        opacity: 0.32,
+        x: 0,
+        y: 10,
+        blur: 20,
+        spread: 0,
+      },
+    ],
+  },
+  xxl: {
+    light: [
+      {
+        opacity: 0.16,
+        x: 0,
+        y: 0,
+        blur: 2,
+        spread: 0,
+      },
+      {
+        opacity: 0.16,
+        x: 0,
+        y: 6,
+        blur: 19,
+        spread: 0,
+      },
+      {
+        opacity: 0.09,
+        x: 0,
+        y: 12,
+        blur: 23,
+        spread: 0,
+      },
+    ],
+    dark: [
+      {
+        opacity: 1,
+        x: 0,
+        y: 0,
+        blur: 0,
+        spread: 1,
+      },
+      {
+        opacity: 0.7,
+        x: 0,
+        y: 6,
+        blur: 19,
+        spread: 0,
+      },
+      {
+        opacity: 0.34,
+        x: 0,
+        y: 12,
+        blur: 23,
+        spread: 0,
+      },
+    ],
+  },
+  flat: {
+    light: [],
+    dark: [],
+  },
+};
+
+const shadowColorsLight = {
+  colors: {
+    base: SEMANTIC_COLORS.shade120,
+  },
+};
+
+const shadowsLight = {
+  ...shadowColorsLight,
+  xs: {
+    down: formatMultipleBoxShadow(shadowPrimitives.xs.light, {
+      color: shadowColorsLight.colors.base,
+    }),
+    up: formatMultipleBoxShadow(shadowPrimitives.xs.light, {
+      direction: 'up',
+      color: shadowColorsLight.colors.base,
+    }),
+  },
+  s: {
+    down: formatMultipleBoxShadow(shadowPrimitives.s.light, {
+      color: shadowColorsLight.colors.base,
+    }),
+    up: formatMultipleBoxShadow(shadowPrimitives.s.light, {
+      direction: 'up',
+      color: shadowColorsLight.colors.base,
+    }),
+  },
+  m: {
+    down: formatMultipleBoxShadow(shadowPrimitives.m.light, {
+      color: shadowColorsLight.colors.base,
+    }),
+    up: formatMultipleBoxShadow(shadowPrimitives.m.light, {
+      direction: 'up',
+      color: shadowColorsLight.colors.base,
+    }),
+  },
+  l: {
+    down: formatMultipleBoxShadow(shadowPrimitives.l.light, {
+      color: shadowColorsLight.colors.base,
+    }),
+    up: formatMultipleBoxShadow(shadowPrimitives.l.light, {
+      direction: 'up',
+      color: shadowColorsLight.colors.base,
+    }),
+  },
+  xl: {
+    down: formatMultipleBoxShadow(shadowPrimitives.xl.light, {
+      color: shadowColorsLight.colors.base,
+    }),
+    up: formatMultipleBoxShadow(shadowPrimitives.xl.light, {
+      direction: 'up',
+      color: shadowColorsLight.colors.base,
+    }),
+  },
+  hover: {
+    base: {
+      down: formatMultipleBoxShadow(shadowPrimitives.s.light, {
+        color: shadowColorsLight.colors.base,
+      }),
+      up: formatMultipleBoxShadow(shadowPrimitives.s.light, {
+        direction: 'up',
+        color: shadowColorsLight.colors.base,
+      }),
+    },
+    xl: {
+      down: formatMultipleBoxShadow(shadowPrimitives.xxl.light, {
+        color: shadowColorsLight.colors.base,
+      }),
+      up: formatMultipleBoxShadow(shadowPrimitives.xxl.light, {
+        direction: 'up',
+        color: shadowColorsLight.colors.base,
+      }),
+    },
+  },
+  flat: {
+    down: formatMultipleBoxShadow(shadowPrimitives.xs.light, {
+      color: shadowColorsLight.colors.base,
+    }),
+    up: formatMultipleBoxShadow(shadowPrimitives.xs.light, {
+      direction: 'up',
+      color: shadowColorsLight.colors.base,
+    }),
+  },
+};
+
+const shadowColorsDark = {
+  colors: {
+    base: PRIMITIVE_COLORS.black,
+  },
+};
+
+const shadowsDark = {
+  ...shadowColorsDark,
+  xs: {
+    down: formatMultipleBoxShadow(shadowPrimitives.xs.dark.slice(1), {
+      color: shadowColorsDark.colors.base,
+    }),
+    up: formatMultipleBoxShadow(shadowPrimitives.xs.dark.slice(1), {
+      direction: 'up',
+      color: shadowColorsDark.colors.base,
+    }),
+  },
+  s: {
+    down: formatMultipleBoxShadow(shadowPrimitives.s.dark.slice(1), {
+      color: shadowColorsDark.colors.base,
+    }),
+    up: formatMultipleBoxShadow(shadowPrimitives.s.dark.slice(1), {
+      direction: 'up',
+      color: shadowColorsDark.colors.base,
+    }),
+  },
+  m: {
+    down: formatMultipleBoxShadow(shadowPrimitives.m.dark.slice(1), {
+      color: shadowColorsDark.colors.base,
+    }),
+    up: formatMultipleBoxShadow(shadowPrimitives.m.dark.slice(1), {
+      direction: 'up',
+      color: shadowColorsDark.colors.base,
+    }),
+  },
+  l: {
+    down: formatMultipleBoxShadow(shadowPrimitives.l.dark.slice(1), {
+      color: shadowColorsDark.colors.base,
+    }),
+    up: formatMultipleBoxShadow(shadowPrimitives.l.dark.slice(1), {
+      direction: 'up',
+      color: shadowColorsDark.colors.base,
+    }),
+  },
+  xl: {
+    down: formatMultipleBoxShadow(shadowPrimitives.xl.dark.slice(1), {
+      color: shadowColorsDark.colors.base,
+    }),
+    up: formatMultipleBoxShadow(shadowPrimitives.xl.dark.slice(1), {
+      direction: 'up',
+      color: shadowColorsDark.colors.base,
+    }),
+  },
+  hover: {
+    base: {
+      down: formatMultipleBoxShadow(shadowPrimitives.s.dark.slice(1), {
+        color: shadowColorsDark.colors.base,
+      }),
+      up: formatMultipleBoxShadow(shadowPrimitives.s.dark.slice(1), {
+        direction: 'up',
+        color: shadowColorsDark.colors.base,
+      }),
+    },
+    xl: {
+      down: formatMultipleBoxShadow(shadowPrimitives.xxl.dark.slice(1), {
+        color: shadowColorsDark.colors.base,
+      }),
+      up: formatMultipleBoxShadow(shadowPrimitives.xxl.dark.slice(1), {
+        direction: 'up',
+        color: shadowColorsDark.colors.base,
+      }),
+    },
+  },
+  flat: {
+    down: formatMultipleBoxShadow(shadowPrimitives.xs.dark.slice(1), {
+      color: shadowColorsDark.colors.base,
+    }),
+    up: formatMultipleBoxShadow(shadowPrimitives.xs.dark.slice(1), {
+      direction: 'up',
+      color: shadowColorsDark.colors.base,
+    }),
+  },
+};
+
+export const shadows: _EuiThemeShadows = {
+  LIGHT: shadowsLight,
+  DARK: shadowsDark,
+};
diff --git a/packages/eui-theme-borealis/src/variables/_shadows_dark.scss b/packages/eui-theme-borealis/src/variables/_shadows_dark.scss
new file mode 100644
index 00000000000..a46fba874e7
--- /dev/null
+++ b/packages/eui-theme-borealis/src/variables/_shadows_dark.scss
@@ -0,0 +1,20 @@
+// Shadows
+$euiShadowColor: $euiColorInk !default;
+
+$euiShadowDownXS: 0px 1px 4px 0px hsla(from $euiShadowColor h s l / 0.4), 0px 2px 8px 0px hsla(from $euiShadowColor h s l / 0.24);
+$euiShadowDownS: 0px 2px 7px 0px hsla(from $euiShadowColor h s l / 0.46), 0px 4px 11px 0px hsla(from $euiShadowColor h s l / 0.26);
+$euiShadowDownM: 0px 3px 10px 0px hsla(from $euiShadowColor h s l / 0.52), 0px 6px 14px 0px hsla(from $euiShadowColor h s l / 0.28);
+$euiShadowDownL: 0px 4px 13px 0px hsla(from $euiShadowColor h s l / 0.58), 0px 8px 17px 0px hsla(from $euiShadowColor h s l / 0.3);
+$euiShadowDownXL: 0px 5px 16px 0px hsla(from $euiShadowColor h s l / 0.64), 0px 10px 20px 0px hsla(from $euiShadowColor h s l / 0.32);
+
+$euiShadowUpXS: 0px 1px 4px 0px hsla(from $euiShadowColor h s l / 0.4), 0px -2px 8px 0px hsla(from $euiShadowColor h s l / 0.24);
+$euiShadowUpS: 0px 2px 7px 0px hsla(from $euiShadowColor h s l / 0.46), 0px -4px 11px 0px hsla(from $euiShadowColor h s l / 0.26);
+$euiShadowUpM: 0px 3px 10px 0px hsla(from $euiShadowColor h s l / 0.52), 0px -6px 14px 0px hsla(from $euiShadowColor h s l / 0.28);
+$euiShadowUpL: 0px 4px 13px 0px hsla(from $euiShadowColor h s l / 0.58), 0px -8px 17px 0px hsla(from $euiShadowColor h s l / 0.3);
+$euiShadowUpXL: 0px 5px 16px 0px hsla(from $euiShadowColor h s l / 0.64), 0px -10px 20px 0px hsla(from $euiShadowColor h s l / 0.32);
+
+$euiShadowHoverDown: 0px 2px 7px 0px hsla(from $euiShadowColor h s l / 0.46), 0px 4px 11px 0px hsla(from $euiShadowColor h s l / 0.26);
+$euiShadowHoverXLDown: 0px 6px 19px 0px hsla(from $euiShadowColor h s l / 0.7), 0px 12px 23px 0px hsla(from $euiShadowColor h s l / 0.34);
+
+$euiShadowHoverUp: 0px -2px 7px 0px hsla(from $euiShadowColor h s l / 0.46), 0px -4px 11px 0px hsla(from $euiShadowColor h s l / 0.26);
+$euiShadowHoverXLUp: 0px -6px 19px 0px hsla(from $euiShadowColor h s l / 0.7), 0px -12px 23px 0px hsla(from $euiShadowColor h s l / 0.34);
diff --git a/packages/eui-theme-borealis/src/variables/_shadows_light.scss b/packages/eui-theme-borealis/src/variables/_shadows_light.scss
new file mode 100644
index 00000000000..2845fab48bb
--- /dev/null
+++ b/packages/eui-theme-borealis/src/variables/_shadows_light.scss
@@ -0,0 +1,20 @@
+// Shadows
+$euiShadowColor: $euiColorShade120 !default;
+
+$euiShadowDownXS: 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);
+$euiShadowDownS: 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);
+$euiShadowDownM: 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);
+$euiShadowDownL: 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);
+$euiShadowDownXL: 0px 0px 2px 0px hsl(from $euiShadowColor h s l / 0.16), 0px 5px 16px 0px hsl(from $euiShadowColor h s l / 0.14), 0px 10px 20px 0px hsl(from $euiShadowColor h s l / 0.08);
+
+$euiShadowUpXS: 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);
+$euiShadowUpS: 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);
+$euiShadowUpM: 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);
+$euiShadowUpL: 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);
+$euiShadowUpXL: 0px 0px 2px 0px hsl(from $euiShadowColor h s l / 0.16), 0px -5px 16px 0px hsl(from $euiShadowColor h s l / 0.14), 0px -10px 20px 0px hsl(from $euiShadowColor h s l / 0.08);
+
+$euiShadowHoverDown: 0px 0px 2px 0px hsla(from $euiShadowColor h s l / 0.16), 0px 2px 7px 0px hsla(from $euiShadowColor h s l / 0.08), 0px 4px 11px 0px hsla(from $euiShadowColor h s l / 0.05);
+$euiShadowHoverXLDown: 0px 0px 2px 0px hsl(from $euiShadowColor h s l/ 0.16), 0px 6px 19px 0px hsl(from $euiShadowColor h s l / 0.16), 0px 12px 23px 0px hsl(from $euiShadowColor h s l / 0.09);
+
+$euiShadowHoverUp: 0px 0px 2px 0px hsla(from $euiShadowColor h s l / 0.16), 0px -2px 7px 0px hsla(from $euiShadowColor h s l / 0.08), 0px -4px 11px 0px hsla(from $euiShadowColor h s l / 0.05);
+$euiShadowHoverXLUp: 0px 0px 2px 0px hsl(from $euiShadowColor h s l/ 0.16), 0px -6px 19px 0px hsl(from $euiShadowColor h s l / 0.16), 0px -12px 23px 0px hsl(from $euiShadowColor h s l / 0.09);
\ No newline at end of file
diff --git a/packages/eui-theme-common/changelogs/upcoming/9088.md b/packages/eui-theme-common/changelogs/upcoming/9088.md
new file mode 100644
index 00000000000..927e3971a8a
--- /dev/null
+++ b/packages/eui-theme-common/changelogs/upcoming/9088.md
@@ -0,0 +1,28 @@
+- Added `shadowVariant` theme flag
+- Added new types shadow types:
+  - `_EuiThemeShadow`
+  - `_EuiThemeShadows`
+  - `_EuiThemeShadowLayer`
+- Added `formatMultipleBoxShadow` theme function to generate box shadows from `_EuiThemeShadowLayer` definitions
+- Updated shadow utility functions to return new tokens
+  - `euiShadow`
+  - `euiShadowXSmall`
+  - `euiShadowSmall`
+  - `euiShadowMedium`
+  - `euiShadowLarge`
+  - `euiShadowXLarge`
+  - `euiShadowFlat`
+  - `euiSlightShadowHover`
+- Added shadow hover utility `euiShadowHover`
+
+**Deprecations**
+
+- Deprecated `euiShadowFlat` and `useEuiShadowFlat` - use `euiShadow`/ `useEuiShadow` (size `xs`) or `euiShadowXSmall` instead
+- Deprecated `euiSlightShadowHover` and `useEuiSlightShadowHover` - use `euiShadowHover` / `useEuiShadowHover` instead
+
+**Breaking changes**
+
+- Removed SCSS shadow variables and mixins (they're available on the themes directly)
+- Updated shadow utility functions (e.g. `euiShadow`) to apply a floating border style in dark mode. This may lead to visual issues with double borders in dark mode when a regular `border` styling is applied. - Use the `options.border` argument on the utils to adjust or remove the floating border as needed.
+
+
diff --git a/packages/eui-theme-common/src/global_styling/functions/shadows.ts b/packages/eui-theme-common/src/global_styling/functions/shadows.ts
index b3dd876d5ea..1cc3bb73dd1 100644
--- a/packages/eui-theme-common/src/global_styling/functions/shadows.ts
+++ b/packages/eui-theme-common/src/global_styling/functions/shadows.ts
@@ -14,7 +14,7 @@ import {
 
 // 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: string,
   opacity: number,
@@ -24,3 +24,46 @@ export const getShadowColor = (
     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: string) => {
+  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: string;
+      let parts: string[];
+      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};`;
+};
diff --git a/packages/eui-theme-common/src/global_styling/mixins/_index.scss b/packages/eui-theme-common/src/global_styling/mixins/_index.scss
index 7d0cba8a92e..b570d0e1607 100644
--- a/packages/eui-theme-common/src/global_styling/mixins/_index.scss
+++ b/packages/eui-theme-common/src/global_styling/mixins/_index.scss
@@ -1,5 +1,4 @@
 @import 'responsive';
-@import 'shadow';
 @import 'size';
 @import 'typography';
 @import 'helpers';
diff --git a/packages/eui-theme-common/src/global_styling/mixins/borders.ts b/packages/eui-theme-common/src/global_styling/mixins/borders.ts
new file mode 100644
index 00000000000..785df3a066d
--- /dev/null
+++ b/packages/eui-theme-common/src/global_styling/mixins/borders.ts
@@ -0,0 +1,88 @@
+/*
+ * 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.
+ */
+
+import { UseEuiTheme } from '../../services/theme/types';
+
+const logicalSide = {
+  left: 'inline-start',
+  right: 'inline-end',
+  top: 'block-start',
+  bottom: 'block-end',
+  horizontal: 'inline',
+  vertical: 'block',
+};
+
+export const getBorderSide = (side: BorderSides) =>
+  side === 'all' ? 'border' : `border-${logicalSide[side]}`;
+
+export type BorderSides =
+  | 'left'
+  | 'right'
+  | 'top'
+  | 'bottom'
+  | 'horizontal'
+  | 'vertical'
+  | 'all';
+
+/**
+ * Defines styles for floating boarders applied in DARK mode via EUI shadow utils
+ */
+export const euiShadowFloatingBorderStyles = (
+  euiThemeContext: UseEuiTheme,
+  options: {
+    side?: BorderSides;
+    borderColor?: string;
+    borderWidth?: string;
+    borderStyle?: string;
+  }
+) => {
+  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: UseEuiTheme,
+  options: {
+    side?: BorderSides;
+    borderColor?: string;
+    borderWidth?: string;
+    borderStyle?: string;
+  }
+) => {
+  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;
+    }
+  `;
+};
diff --git a/packages/eui-theme-common/src/global_styling/mixins/index.ts b/packages/eui-theme-common/src/global_styling/mixins/index.ts
index 2041f2d9aca..be656537cae 100644
--- a/packages/eui-theme-common/src/global_styling/mixins/index.ts
+++ b/packages/eui-theme-common/src/global_styling/mixins/index.ts
@@ -7,3 +7,4 @@
  */
 
 export * from './shadow';
+export * from './borders';
diff --git a/packages/eui-theme-common/src/global_styling/mixins/shadow.ts b/packages/eui-theme-common/src/global_styling/mixins/shadow.ts
index 889eb7bba71..652f704a245 100644
--- a/packages/eui-theme-common/src/global_styling/mixins/shadow.ts
+++ b/packages/eui-theme-common/src/global_styling/mixins/shadow.ts
@@ -7,181 +7,176 @@
  */
 
 import type { UseEuiTheme } from '../../services/theme/types';
-import { getShadowColor } from '../functions';
-import { _EuiThemeShadowSize } from '../variables/shadow';
+import { boxShadowToFilterDropShadow } from '../functions';
+import {
+  _EuiThemeShadowHoverSize,
+  _EuiThemeShadowSize,
+} from '../variables/shadow';
+import { BorderSides, euiShadowFloatingBorderStyles } 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 const euiShadowXSmall = (
-  { euiTheme, colorMode, highContrastMode }: UseEuiTheme,
+  euiThemeContext: UseEuiTheme,
   options?: EuiShadowOptions
 ) => {
+  const { euiTheme, highContrastMode } = euiThemeContext;
+
   if (highContrastMode) {
-    return _highContrastBorder(euiTheme, options);
+    return _highContrastBorder(euiThemeContext, options);
   }
+  const direction = options?.direction ?? 'down';
 
-  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)};
-`;
+  return _shadowStyles(euiThemeContext, euiTheme.shadows.xs[direction], {
+    border: options?.border,
+  });
 };
 
 /**
- * bottomShadowSmall
+ * small shadow
  */
 export const euiShadowSmall = (
-  { euiTheme, colorMode, highContrastMode }: UseEuiTheme,
+  euiThemeContext: UseEuiTheme,
   options?: EuiShadowOptions
 ) => {
+  const { euiTheme, highContrastMode } = euiThemeContext;
+
   if (highContrastMode) {
-    return _highContrastBorder(euiTheme, options);
+    return _highContrastBorder(euiThemeContext, options);
   }
+  const direction = options?.direction ?? 'down';
 
-  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)};
-`;
+  return _shadowStyles(euiThemeContext, euiTheme.shadows.s[direction], {
+    border: options?.border,
+  });
 };
 
 /**
- * bottomShadowMedium
+ * medium shadow
  */
 export const euiShadowMedium = (
-  { euiTheme, colorMode, highContrastMode }: UseEuiTheme,
+  euiThemeContext: UseEuiTheme,
   options?: EuiShadowOptions
 ) => {
+  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 }: UseEuiTheme,
+  euiThemeContext: UseEuiTheme,
   options?: EuiShadowOptions
 ) => {
+  const { euiTheme, highContrastMode } = euiThemeContext;
+
   if (highContrastMode) {
-    return _highContrastBorder(euiTheme, options);
+    return _highContrastBorder(euiThemeContext, options);
   }
+  const direction = options?.direction ?? 'down';
 
-  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)};
-`;
+  return _shadowStyles(euiThemeContext, euiTheme.shadows.l[direction], {
+    border: options?.border,
+  });
 };
 
 /**
- * bottomShadowLarge
+ * x-large shadow
  */
 export interface EuiShadowXLarge extends EuiShadowOptions {
   reverse?: boolean;
 }
 export const euiShadowXLarge = (
-  { euiTheme, colorMode, highContrastMode }: UseEuiTheme,
+  euiThemeContext: UseEuiTheme,
   options?: EuiShadowXLarge
 ) => {
+  const { euiTheme, highContrastMode } = euiThemeContext;
+
   if (highContrastMode) {
-    return _highContrastBorder(euiTheme, options);
+    return _highContrastBorder(euiThemeContext, options);
   }
+  const direction = options?.direction ?? 'down';
 
-  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)};
-`;
+  return _shadowStyles(euiThemeContext, euiTheme.shadows.xl[direction], {
+    border: options?.border,
+  });
 };
 
 /**
- * slightShadowHover
+ * flat shadow
+ * @deprecated - use euiShadowHover instead
  */
 export const euiSlightShadowHover = (
-  { euiTheme, colorMode, highContrastMode }: UseEuiTheme,
+  euiThemeContext: UseEuiTheme,
   options?: EuiShadowOptions
 ) => {
+  const { euiTheme, highContrastMode } = euiThemeContext;
+
   if (highContrastMode) {
-    return _highContrastBorder(euiTheme, options);
+    return _highContrastBorder(euiThemeContext, options);
   }
+  const direction = options?.direction ?? 'down';
 
-  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)};
-`;
+  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 }: UseEuiTheme,
+  euiThemeContext: UseEuiTheme,
   options?: EuiShadowOptions
 ) => {
+  const { euiTheme, highContrastMode } = euiThemeContext;
+
   if (highContrastMode) {
-    return _highContrastBorder(euiTheme, options);
+    return _highContrastBorder(euiThemeContext, options);
   }
+  const direction = options?.direction ?? 'down';
+  const value = euiTheme.shadows.flat?.[direction];
 
-  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)};
-`;
+  return _shadowStyles(euiThemeContext, value, {
+    border: options?.border,
+  });
 };
 
 export const euiShadow = (
@@ -190,7 +185,7 @@ export const euiShadow = (
   options?: EuiShadowOptions
 ) => {
   if (euiThemeContext.highContrastMode) {
-    return _highContrastBorder(euiThemeContext.euiTheme, options);
+    return _highContrastBorder(euiThemeContext, options);
   }
 
   switch (size) {
@@ -204,13 +199,64 @@ export const euiShadow = (
       return euiShadowLarge(euiThemeContext, options);
     case 'xl':
       return euiShadowXLarge(euiThemeContext, options);
+    default:
+      console.warn('Please provide a valid size option to useEuiShadow');
+      return '';
+  }
+};
+
+/** Hover shadows */
+export const euiShadowHover = (
+  euiThemeContext: UseEuiTheme,
+  size: _EuiThemeShadowSize | 'base' = 'base',
+  options?: EuiShadowOptions
+) => {
+  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: UseEuiTheme,
+  size: _EuiThemeShadowHoverSize | 'base' = 'l',
+  options?: EuiShadowOptions
+) => {
+  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,
@@ -218,10 +264,40 @@ export const euiShadow = (
  */
 
 const _highContrastBorder = (
-  { border }: UseEuiTheme['euiTheme'],
-  { borderAllInHighContrastMode }: EuiShadowOptions = {}
+  euiThemeContext: UseEuiTheme,
+  { border = 'all', borderAllInHighContrastMode }: EuiShadowOptions = {}
+) => {
+  const { euiTheme } = euiThemeContext;
+
+  const hasFullBorder =
+    borderAllInHighContrastMode || (border && border !== 'none');
+
+  return hasFullBorder
+    ? `border: ${euiTheme.border.thin};`
+    : `border-block-end: ${euiTheme.border.thin};`;
+};
+
+const _shadowStyles = (
+  euiThemeContext: UseEuiTheme,
+  shadow: string | undefined,
+  options: {
+    border?: EuiShadowOptions['border'];
+    type?: 'box-shadow' | 'filter';
+  }
 ) => {
-  return borderAllInHighContrastMode
-    ? `border: ${border.thin};`
-    : `border-block-end: ${border.thin};`;
+  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};
+  `;
 };
diff --git a/packages/eui-theme-common/src/global_styling/variables/_index.scss b/packages/eui-theme-common/src/global_styling/variables/_index.scss
index 2397647bde9..0224c876d30 100644
--- a/packages/eui-theme-common/src/global_styling/variables/_index.scss
+++ b/packages/eui-theme-common/src/global_styling/variables/_index.scss
@@ -14,7 +14,6 @@
 @import 'typography';
 @import 'borders';
 @import 'responsive';
-@import 'shadows';
 @import 'states';
 @import 'z_index';
 
diff --git a/packages/eui-theme-common/src/global_styling/variables/_shadows.scss b/packages/eui-theme-common/src/global_styling/variables/_shadows.scss
deleted file mode 100644
index 05e445f27a1..00000000000
--- a/packages/eui-theme-common/src/global_styling/variables/_shadows.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-// Shadows
-$euiShadowColor: $euiColorInk !default;
diff --git a/packages/eui-theme-common/src/global_styling/variables/flags.ts b/packages/eui-theme-common/src/global_styling/variables/flags.ts
index 010182812de..b9118c0382f 100644
--- a/packages/eui-theme-common/src/global_styling/variables/flags.ts
+++ b/packages/eui-theme-common/src/global_styling/variables/flags.ts
@@ -9,6 +9,7 @@
 export type EuiThemeVariantFlags = {
   buttonVariant: 'classic' | 'refresh';
   formVariant: 'classic' | 'refresh';
+  shadowVariant: 'classic' | 'refresh';
 };
 
 /**
diff --git a/packages/eui-theme-common/src/global_styling/variables/shadow.ts b/packages/eui-theme-common/src/global_styling/variables/shadow.ts
index e8bd284645b..669a7a77549 100644
--- a/packages/eui-theme-common/src/global_styling/variables/shadow.ts
+++ b/packages/eui-theme-common/src/global_styling/variables/shadow.ts
@@ -6,10 +6,16 @@
  * Side Public License, v 1.
  */
 
-export const EuiThemeShadowSizes = ['xs', 's', 'm', 'l', 'xl'] as const;
+import { CSSProperties } from 'react';
+import { ColorModeSwitch } from '../../services/theme/types';
 
+export const EuiThemeShadowSizes = ['xs', 's', 'm', 'l', 'xl'] as const;
 export type _EuiThemeShadowSize = (typeof EuiThemeShadowSizes)[number];
 
+export const EuiThemeShadowHoverSizes = ['s', 'm', 'l', 'xl', 'xxl'] as const;
+export type _EuiThemeShadowHoverSize =
+  (typeof EuiThemeShadowHoverSizes)[number];
+
 /**
  * Shadow t-shirt sizes descriptions
  */
@@ -27,3 +33,56 @@ export interface _EuiThemeShadowCustomColor {
   property?: 'box-shadow' | 'filter';
   borderAllInHighContrastMode?: boolean;
 }
+
+export type _EuiThemeShadow = {
+  /** Default direction of the shadow */
+  down: CSSProperties['boxShadow'];
+  /** Reverse direction */
+  up: CSSProperties['boxShadow'];
+};
+
+export 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 type _EuiThemeShadowLayer = {
+  opacity: number;
+  x: number;
+  y: number;
+  blur: number;
+  spread: number;
+};
+
+export type _EuiThemeShadowPrimitive = {
+  light: _EuiThemeShadowLayer[];
+  dark: _EuiThemeShadowLayer[];
+};
+
+export type _EuiThemeShadowPrimitives = {
+  xs: _EuiThemeShadowPrimitive;
+  s: _EuiThemeShadowPrimitive;
+  m: _EuiThemeShadowPrimitive;
+  l: _EuiThemeShadowPrimitive;
+  xl: _EuiThemeShadowPrimitive;
+  xxl: _EuiThemeShadowPrimitive;
+  flat: _EuiThemeShadowPrimitive;
+};
diff --git a/packages/eui-theme-common/src/services/theme/types.ts b/packages/eui-theme-common/src/services/theme/types.ts
index 86aca6568a4..f417c1d9b3b 100644
--- a/packages/eui-theme-common/src/services/theme/types.ts
+++ b/packages/eui-theme-common/src/services/theme/types.ts
@@ -20,6 +20,7 @@ import type {
 } 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';
@@ -73,6 +74,7 @@ export type EuiThemeShapeBase = {
   animation: _EuiThemeAnimation;
   breakpoint: _EuiThemeBreakpoints;
   levels: _EuiThemeLevels;
+  shadows: _EuiThemeShadows;
   components: _EuiThemeComponents;
   flags: _EuiThemeFlags;
 };
diff --git a/packages/eui-theme-common/src/utils.test.ts b/packages/eui-theme-common/src/utils.test.ts
index afcc8fe6862..dc375e6f482 100644
--- a/packages/eui-theme-common/src/utils.test.ts
+++ b/packages/eui-theme-common/src/utils.test.ts
@@ -17,6 +17,7 @@ import {
   buildTheme,
   mergeDeep,
   getTokenName,
+  formatMultipleBoxShadow,
 } from './utils';
 
 describe('isInverseColorMode', () => {
@@ -292,3 +293,37 @@ describe('getTokenName', () => {
     );
   });
 });
+
+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');
+  });
+});
diff --git a/packages/eui-theme-common/src/utils.ts b/packages/eui-theme-common/src/utils.ts
index 1745ad6e112..e0a349e2e53 100644
--- a/packages/eui-theme-common/src/utils.ts
+++ b/packages/eui-theme-common/src/utils.ts
@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import chroma from 'chroma-js';
 import {
   EuiThemeColorMode,
   EuiThemeColorModeInverse,
@@ -14,6 +15,7 @@ import {
   EuiThemeSystem,
   EuiThemeShape,
   EuiThemeComputed,
+  _EuiThemeShadowLayer,
   COLOR_MODES_STANDARD,
   COLOR_MODES_INVERSE,
   EuiThemeHighContrastMode,
@@ -466,3 +468,42 @@ export const getTokenName = (
 
   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: _EuiThemeShadowLayer[],
+  options?: {
+    direction?: 'down' | 'up';
+    color: string;
+  }
+) {
+  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(', ');
+}
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiCard_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiCard_Playground.png
index 3b5be307300..e6214c36877 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiCard_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiCard_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiDragDropContext_Within_Flyouts.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiDragDropContext_Within_Flyouts.png
index 781d634718c..bfbb378e703 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiDragDropContext_Within_Flyouts.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiDragDropContext_Within_Flyouts.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiDragDropContext_Within_Modals.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiDragDropContext_Within_Modals.png
index 79c6087661f..111189b2758 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiDragDropContext_Within_Modals.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiDragDropContext_Within_Modals.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiDraggable_Interactive.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiDraggable_Interactive.png
index 73768525ec9..9e317fe10e0 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiDraggable_Interactive.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiDraggable_Interactive.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiDraggable_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiDraggable_Playground.png
index 1516d72f69b..ceaa97339b9 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiDraggable_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiDraggable_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiDroppable_Clone_Draggables.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiDroppable_Clone_Draggables.png
index 7395111b450..936b870c32b 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiDroppable_Clone_Draggables.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiDroppable_Clone_Draggables.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiProgress_Indeterminate.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiProgress_Indeterminate.png
index f97e30be190..fbe36d48fe2 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiProgress_Indeterminate.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiProgress_Indeterminate.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiToast_EuiGlobalToastList_EuiGlobalToastListItem_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiToast_EuiGlobalToastList_EuiGlobalToastListItem_Playground.png
index b899a0acd26..c1175793920 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiToast_EuiGlobalToastList_EuiGlobalToastListItem_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiToast_EuiGlobalToastList_EuiGlobalToastListItem_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiToast_EuiGlobalToastList_EuiGlobalToastList_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiToast_EuiGlobalToastList_EuiGlobalToastList_Playground.png
index 125965664ab..6b2be8146ea 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiToast_EuiGlobalToastList_EuiGlobalToastList_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiToast_EuiGlobalToastList_EuiGlobalToastList_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiToast_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiToast_Playground.png
index c39b0a263f6..5a449f5c2b7 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiToast_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiToast_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_Dark_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_Dark_Mode.png
index 142092e163d..95ef2ccf226 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_Dark_Mode.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_Dark_Mode.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_Playground.png
index 80640d321c9..1f6b58260a6 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiToolTip_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTourStep_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTourStep_Playground.png
index 3081f3e8447..c1b06e0ca75 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTourStep_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTourStep_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTour_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTour_Playground.png
index b85c40ccf21..3a7f7bc884d 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTour_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiTour_EuiTour_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiAutoRefresh_EuiAutoRefresh_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiAutoRefresh_EuiAutoRefresh_Playground.png
index 91cb62ab9db..5a74a7a8bcd 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiAutoRefresh_EuiAutoRefresh_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiAutoRefresh_EuiAutoRefresh_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Appended_Titles.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Appended_Titles.png
index 19715c612e4..bed65d315b8 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Appended_Titles.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Appended_Titles.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPickerSwatch_Color_Label_Tooltip.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPickerSwatch_Color_Label_Tooltip.png
index a6240bc92c7..2b006f6e889 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPickerSwatch_Color_Label_Tooltip.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiColorPicker_EuiColorPickerSwatch_Color_Label_Tooltip.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Groups.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Groups.png
index 17188605c08..3860c7d0ebc 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Groups.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Groups.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Nested_Options_Groups.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Nested_Options_Groups.png
index 17188605c08..3860c7d0ebc 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Nested_Options_Groups.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Nested_Options_Groups.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Row_Height_Auto.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Row_Height_Auto.png
index 4faaa039982..cac723b65be 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Row_Height_Auto.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiComboBox_Row_Height_Auto.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Inline.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Inline.png
index f9506f04648..25cc90f0a87 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Inline.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Inline.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Restricted_Selection.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Restricted_Selection.png
index 080ba6cad42..48f75337d7c 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Restricted_Selection.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Restricted_Selection.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Playground.png
index 96532fb4181..4460ccc3c4c 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Restricted_Day_Select.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Restricted_Day_Select.png
index e557d50beaa..1389b027882 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Restricted_Day_Select.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Restricted_Day_Select.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Time_Select.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Time_Select.png
index 044a42d7a41..d7b0a8925a7 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Time_Select.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Time_Select.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Time_Select_Only.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Time_Select_Only.png
index fd5437cac8f..9c41883337a 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Time_Select_Only.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePicker_Time_Select_Only.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Input_With_Popover.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Input_With_Popover.png
index 55351859adc..6db96e905a1 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Input_With_Popover.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDualRange_Input_With_Popover.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast_Dark_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast_Dark_Mode.png
index 04936313133..f22fb42e0b3 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast_Dark_Mode.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast_Dark_Mode.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Input_With_Popover.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Input_With_Popover.png
index 305792785b8..0323e28d552 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Input_With_Popover.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRange_Input_With_Popover.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png
index ca48b5b11c6..9d4cd04a978 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Quick_Select_Only.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Quick_Select_Only.png
index 2aa2ade8801..d2984d4a0be 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Quick_Select_Only.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Quick_Select_Only.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiBottomBar_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiBottomBar_Playground.png
index ae779cf0906..35476453487 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiBottomBar_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiBottomBar_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiConfirmModal_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiConfirmModal_Playground.png
index 4bf8e18b206..75447817117 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiConfirmModal_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiConfirmModal_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutBody_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutBody_Playground.png
index 1b61a8ab599..e490ccca41c 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutBody_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutBody_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutChild_Main_Size_m_Child_Size_s.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutChild_Main_Size_m_Child_Size_s.png
index 36ad9a4b8ef..edd617b8919 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutChild_Main_Size_m_Child_Size_s.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutChild_Main_Size_m_Child_Size_s.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutChild_Main_Size_s_Child_Size_m.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutChild_Main_Size_s_Child_Size_m.png
index 2dfa345bbdd..3d9eb105b0b 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutChild_Main_Size_s_Child_Size_m.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutChild_Main_Size_s_Child_Size_m.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutChild_Main_Size_s_Child_Size_s.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutChild_Main_Size_s_Child_Size_s.png
index 2dfa345bbdd..3d9eb105b0b 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutChild_Main_Size_s_Child_Size_s.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutChild_Main_Size_s_Child_Size_s.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutFooter_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutFooter_Playground.png
index 811f6e63456..94788a0e5c6 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutFooter_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutFooter_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutHeader_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutHeader_Playground.png
index c9072972a88..997781704cd 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutHeader_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutHeader_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutResizable_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutResizable_Playground.png
index 6453324ad51..d40460c5250 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutResizable_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyoutResizable_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_High_Contrast.png
index 2da631bc2c5..4250bc834aa 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_High_Contrast.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_Manual_Return_Focus.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_Manual_Return_Focus.png
index cf0c323ec4c..2bb1b98926e 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_Manual_Return_Focus.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_Manual_Return_Focus.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_Playground.png
index 1bafddc3b8d..fc20e4156cf 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiFlyout_EuiFlyout_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png
index 4155d208aa6..9f4c320572b 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Multiple_Fixed_Headers.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Multiple_Fixed_Headers.png
index 7623041eeab..d6af8061a5c 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Multiple_Fixed_Headers.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeader_Multiple_Fixed_Headers.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiInputPopover_Anchor_Position.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiInputPopover_Anchor_Position.png
index 261457959df..904e80d55a4 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiInputPopover_Anchor_Position.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiInputPopover_Anchor_Position.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiInputPopover_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiInputPopover_Playground.png
index bed7c274e6d..7caa83d7481 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiInputPopover_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiInputPopover_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModalBody_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModalBody_Playground.png
index aa5db430970..69f1ca080bc 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModalBody_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModalBody_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModalFooter_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModalFooter_Playground.png
index 0a0f9636aca..13b5de4f2fa 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModalFooter_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModalFooter_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModalHeaderTitle_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModalHeaderTitle_Playground.png
index 87eaec1b008..e6830963acb 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModalHeaderTitle_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModalHeaderTitle_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModalHeader_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModalHeader_Playground.png
index f51f03401b5..d1250c35e7e 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModalHeader_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModalHeader_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModal_Initial_Focus.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModal_Initial_Focus.png
index a1e0e3bc331..e12e1f61237 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModal_Initial_Focus.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModal_Initial_Focus.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModal_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModal_Playground.png
index d5531a34e89..e399dd02242 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModal_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModal_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModal_Toggle_Example.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModal_Toggle_Example.png
index 6c0a8dc279b..dbe327fd4b1 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModal_Toggle_Example.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiModal_EuiModal_Toggle_Example.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPage_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPage_Playground.png
index 76a92ad48f2..b9a271e21e2 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPage_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPage_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPage_Restrict_Width.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPage_Restrict_Width.png
index 05f28bc3478..9a9bdc845a5 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPage_Restrict_Width.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPage_Restrict_Width.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPanel_Kitchensink.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPanel_Kitchensink.png
new file mode 100644
index 00000000000..e0a8dffdc5a
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPanel_Kitchensink.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPanel_Kitchensink_Dark.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPanel_Kitchensink_Dark.png
new file mode 100644
index 00000000000..134696c549e
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPanel_Kitchensink_Dark.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPanel_Overlapping_Panels.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPanel_Overlapping_Panels.png
index 7ec4cc91c3f..f65b2e2ced5 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPanel_Overlapping_Panels.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPanel_Overlapping_Panels.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPanel_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPanel_Playground.png
index 3aa8d19ba90..caab6f28f93 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPanel_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPanel_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopoverFooter_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopoverFooter_Playground.png
index 8192ac7e4bd..11283d5711d 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopoverFooter_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopoverFooter_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopoverTitle_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopoverTitle_Playground.png
index b748840837c..2660c4a6590 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopoverTitle_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopoverTitle_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopover_Panel_Padding_Size.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopover_Panel_Padding_Size.png
index 179445ca908..c35b2560eff 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopover_Panel_Padding_Size.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopover_Panel_Padding_Size.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopover_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopover_Playground.png
index 8b9cd4147d4..6fd785b227e 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopover_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPopover_EuiPopover_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_Subcomponents_EuiResizableButton_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_Subcomponents_EuiResizableButton_Playground.png
index 5018fb9a5dd..b8e536d214d 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_Subcomponents_EuiResizableButton_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_Subcomponents_EuiResizableButton_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_Subcomponents_EuiResizableCollapseButton_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_Subcomponents_EuiResizableCollapseButton_Playground.png
index cb20fa67cb8..ed76efa88a0 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_Subcomponents_EuiResizableCollapseButton_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_Subcomponents_EuiResizableCollapseButton_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_Subcomponents_EuiResizableCollapseButton_Production_Usage.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_Subcomponents_EuiResizableCollapseButton_Production_Usage.png
index 4ba8fe31a6e..72e81f9242f 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_Subcomponents_EuiResizableCollapseButton_Production_Usage.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiResizableContainer_Subcomponents_EuiResizableCollapseButton_Production_Usage.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiSplitPanel_Split_Panel_Inner.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiSplitPanel_Split_Panel_Inner.png
index 8b9bc7d9255..960e5525811 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiSplitPanel_Split_Panel_Inner.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiSplitPanel_Split_Panel_Inner.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiSplitPanel_Split_Panel_Inner_Dark.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiSplitPanel_Split_Panel_Inner_Dark.png
new file mode 100644
index 00000000000..1a1be958970
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiSplitPanel_Split_Panel_Inner_Dark.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiSplitPanel_Split_Panel_Outer.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiSplitPanel_Split_Panel_Outer.png
index c3ed2a5f821..67ef075debc 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiSplitPanel_Split_Panel_Outer.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiSplitPanel_Split_Panel_Outer.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiSplitPanel_Split_Panel_Outer_Dark.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiSplitPanel_Split_Panel_Outer_Dark.png
new file mode 100644
index 00000000000..1ec2b49241b
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiSplitPanel_Split_Panel_Outer_Dark.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiWrappingPopover_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiWrappingPopover_Playground.png
index b7312419a59..80f73f495c0 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiWrappingPopover_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiWrappingPopover_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNav_Full_Header_Pattern.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNav_Full_Header_Pattern.png
index 9b06f24394d..1561d4a0d19 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNav_Full_Header_Pattern.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNav_Full_Header_Pattern.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Collapsed_State_In_Local_Storage.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Collapsed_State_In_Local_Storage.png
index 4c1e00e7324..5caaf48248e 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Collapsed_State_In_Local_Storage.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Collapsed_State_In_Local_Storage.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Dark_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Dark_Mode.png
new file mode 100644
index 00000000000..829be0a3bf9
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Dark_Mode.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Flyout_Overlay.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Flyout_Overlay.png
index da2ab3cf54a..8d7d35a8bb6 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Flyout_Overlay.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Flyout_Overlay.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Global_CSS_Variable.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Global_CSS_Variable.png
index 002ba5c6f59..3cbbb4b4063 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Global_CSS_Variable.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Global_CSS_Variable.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Playground.png
index b3e847ed691..50eaeb5d2e8 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavItem_Edge_Case_Testing.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavItem_Edge_Case_Testing.png
index 629471ee446..e589b81b4a8 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavItem_Edge_Case_Testing.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavItem_Edge_Case_Testing.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_KibanaSolution_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_KibanaSolution_Playground.png
index 61db58e3fe0..5e648d264ed 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_KibanaSolution_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_beta_KibanaSolution_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenu_In_Popover.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenu_In_Popover.png
index d5476a81e11..190d9b2b0e0 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenu_In_Popover.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenu_In_Popover.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenu_In_Scrollable_Popover.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenu_In_Scrollable_Popover.png
new file mode 100644
index 00000000000..48c8f65b0ed
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiContextMenu_EuiContextMenu_In_Scrollable_Popover.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png
index 93ba346ba90..18466ccf579 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Column_Actions.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Column_Actions.png
index acde8cc25ef..18741bca449 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Column_Actions.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Column_Actions.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png
index d21c5d5815b..9a6dda44afb 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png
index 16d3e3e85a7..276c625f65e 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png
index 7953c8044f8..c9f6d37bdaf 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png
index d015118b253..81719fff617 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png
index 55ab7b775db..ceb1fe81a27 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Templates_EuiPageTemplate_Dark_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Templates_EuiPageTemplate_Dark_Mode.png
new file mode 100644
index 00000000000..6fee4e9d2b0
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Templates_EuiPageTemplate_Dark_Mode.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Templates_EuiPageTemplate_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Templates_EuiPageTemplate_Playground.png
index e1b36fa9577..5cb8ac2386b 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Templates_EuiPageTemplate_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Templates_EuiPageTemplate_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Templates_EuiSelectableTemplateSitewide_VRT.png b/packages/eui/.loki/reference/chrome_desktop_Templates_EuiSelectableTemplateSitewide_VRT.png
index 2efad745c45..36f822146b9 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Templates_EuiSelectableTemplateSitewide_VRT.png and b/packages/eui/.loki/reference/chrome_desktop_Templates_EuiSelectableTemplateSitewide_VRT.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Theming_EuiProvider_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Theming_EuiProvider_Playground.png
index 99c70150e52..79edec2a7ad 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Theming_EuiProvider_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Theming_EuiProvider_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Theming_EuiProvider_System_Defaults.png b/packages/eui/.loki/reference/chrome_desktop_Theming_EuiProvider_System_Defaults.png
index 0798970ed37..b215324061d 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Theming_EuiProvider_System_Defaults.png and b/packages/eui/.loki/reference/chrome_desktop_Theming_EuiProvider_System_Defaults.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_Dark_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_Dark_Mode.png
index 9c5e443b39b..33b795d1535 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_Dark_Mode.png and b/packages/eui/.loki/reference/chrome_desktop_Theming_EuiThemeProvider_Dark_Mode.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiAutoSizer_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiAutoSizer_Playground.png
index a4ede4cb8b2..f90b7a453f3 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiAutoSizer_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiAutoSizer_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiI18n_Multiple_Token_Interpolation.png b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiI18n_Multiple_Token_Interpolation.png
index 788a43a9e58..76661ea8dfb 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiI18n_Multiple_Token_Interpolation.png and b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiI18n_Multiple_Token_Interpolation.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiI18n_Multiple_Tokens.png b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiI18n_Multiple_Tokens.png
index 3b5be307300..e6214c36877 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiI18n_Multiple_Tokens.png and b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiI18n_Multiple_Tokens.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiMutationObserver_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiMutationObserver_Playground.png
index 296638f25f5..53c56dfd21f 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiMutationObserver_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiMutationObserver_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiResizeObserver_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiResizeObserver_Playground.png
index adcac8330e5..1bd747f258f 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiResizeObserver_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiResizeObserver_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiTextBlockTruncate_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiTextBlockTruncate_Playground.png
index f8982a481eb..2c9e9f53c89 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiTextBlockTruncate_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Utilities_EuiTextBlockTruncate_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiCard_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiCard_Playground.png
index 4ed63f1a256..1eab45096d0 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiCard_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiCard_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiDragDropContext_Within_Flyouts.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiDragDropContext_Within_Flyouts.png
index 86fadd03768..4bf16102157 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiDragDropContext_Within_Flyouts.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiDragDropContext_Within_Flyouts.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiDragDropContext_Within_Modals.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiDragDropContext_Within_Modals.png
index 5237431236f..b85c2d9ea30 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiDragDropContext_Within_Modals.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiDragDropContext_Within_Modals.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiDraggable_Interactive.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiDraggable_Interactive.png
index d07280c8841..08cef3fb8c3 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiDraggable_Interactive.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiDraggable_Interactive.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiDraggable_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiDraggable_Playground.png
index 5dfaba6efbe..1442231afb8 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiDraggable_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiDraggable_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiDroppable_Clone_Draggables.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiDroppable_Clone_Draggables.png
index 65b38e6f299..0f8aec8a21c 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiDroppable_Clone_Draggables.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiDroppable_Clone_Draggables.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiIconTip_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiIconTip_Playground.png
index 6018e8fc170..fa8f5160c98 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiIconTip_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiIconTip_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiProgress_Indeterminate.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiProgress_Indeterminate.png
index 1a041190d3e..fdf8851a1a5 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiProgress_Indeterminate.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiProgress_Indeterminate.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiToast_EuiGlobalToastList_EuiGlobalToastListItem_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiToast_EuiGlobalToastList_EuiGlobalToastListItem_Playground.png
index 59437b6e1d6..562b2e4004d 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiToast_EuiGlobalToastList_EuiGlobalToastListItem_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiToast_EuiGlobalToastList_EuiGlobalToastListItem_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiToast_EuiGlobalToastList_EuiGlobalToastList_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiToast_EuiGlobalToastList_EuiGlobalToastList_Playground.png
index 964911e5839..6f8393b7795 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiToast_EuiGlobalToastList_EuiGlobalToastList_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiToast_EuiGlobalToastList_EuiGlobalToastList_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiToast_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiToast_Playground.png
index 55a59048c4d..3c62b0390f0 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiToast_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiToast_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiToolTip_Dark_Mode.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiToolTip_Dark_Mode.png
index 62476f02d71..e37e4db95da 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiToolTip_Dark_Mode.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiToolTip_Dark_Mode.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiToolTip_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiToolTip_Playground.png
index 1eee9b408a6..5289fee44d3 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiToolTip_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiToolTip_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTourStep_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTourStep_Playground.png
index 8a51821e49f..c2e8cbab125 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTourStep_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTourStep_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTour_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTour_Playground.png
index 89832748b49..7f03445eb17 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTour_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiTour_EuiTour_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiAutoRefresh_EuiAutoRefresh_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiAutoRefresh_EuiAutoRefresh_Playground.png
index 05095313536..d40bc335bb6 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiAutoRefresh_EuiAutoRefresh_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiAutoRefresh_EuiAutoRefresh_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Appended_Titles.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Appended_Titles.png
index d5a3edf28ad..3f2aa23646d 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Appended_Titles.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPalettePicker_EuiColorPalettePicker_Appended_Titles.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPickerSwatch_Color_Label_Tooltip.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPickerSwatch_Color_Label_Tooltip.png
index 4a444b9c1b9..a0ffe289fff 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPickerSwatch_Color_Label_Tooltip.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiColorPicker_EuiColorPickerSwatch_Color_Label_Tooltip.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Groups.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Groups.png
index b99c6398141..d8fdfdfc5e4 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Groups.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Groups.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Nested_Options_Groups.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Nested_Options_Groups.png
index b99c6398141..d8fdfdfc5e4 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Nested_Options_Groups.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Nested_Options_Groups.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Row_Height_Auto.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Row_Height_Auto.png
index 15ee5ad8a42..2f7718b02a8 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Row_Height_Auto.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiComboBox_Row_Height_Auto.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Inline.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Inline.png
index 5ac97ba6cc9..c7e9cde6f24 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Inline.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Inline.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Restricted_Selection.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Restricted_Selection.png
index b70fdee1aab..7b40bd2e8e8 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Restricted_Selection.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Restricted_Selection.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Playground.png
index 9409a40eedc..b0dceb63f27 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Restricted_Day_Select.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Restricted_Day_Select.png
index 203c03d0cca..dcc5f659e49 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Restricted_Day_Select.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Restricted_Day_Select.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Time_Select.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Time_Select.png
index 2622707c002..7e9400f2a95 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Time_Select.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Time_Select.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Time_Select_Only.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Time_Select_Only.png
index 78caa3a8b50..10338d493c4 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Time_Select_Only.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePicker_Time_Select_Only.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Input_With_Popover.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Input_With_Popover.png
index ec0c5e46b9b..1cee07ade38 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Input_With_Popover.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDualRange_Input_With_Popover.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast_Dark_Mode.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast_Dark_Mode.png
index 6dd39da1038..685bec1656d 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast_Dark_Mode.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayoutDelimited_High_Contrast_Dark_Mode.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Input_With_Popover.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Input_With_Popover.png
index 9def9e2a74f..bee47764452 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Input_With_Popover.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRange_Input_With_Popover.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png
index f62b096b43a..33321e3daee 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Quick_Select_Only.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Quick_Select_Only.png
index ccb13b6fae1..4a0009ba5d4 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Quick_Select_Only.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Quick_Select_Only.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiBottomBar_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiBottomBar_Playground.png
index 4cce5bdccee..ff5d7086214 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiBottomBar_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiBottomBar_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiConfirmModal_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiConfirmModal_Playground.png
index 5ba4dd0b291..14bea777a3f 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiConfirmModal_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiConfirmModal_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutBody_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutBody_Playground.png
index 5f5cb680da4..3b351953783 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutBody_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutBody_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutChild_Main_Size_m_Child_Size_s.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutChild_Main_Size_m_Child_Size_s.png
index 492c373a92c..3169335058d 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutChild_Main_Size_m_Child_Size_s.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutChild_Main_Size_m_Child_Size_s.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutChild_Main_Size_s_Child_Size_m.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutChild_Main_Size_s_Child_Size_m.png
index 14e44135119..b75166f55b7 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutChild_Main_Size_s_Child_Size_m.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutChild_Main_Size_s_Child_Size_m.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutChild_Main_Size_s_Child_Size_s.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutChild_Main_Size_s_Child_Size_s.png
index 14e44135119..b75166f55b7 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutChild_Main_Size_s_Child_Size_s.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutChild_Main_Size_s_Child_Size_s.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutFooter_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutFooter_Playground.png
index bada121b7bc..9287631a11f 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutFooter_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutFooter_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutHeader_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutHeader_Playground.png
index 20dd4251842..3655957e98c 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutHeader_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutHeader_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutResizable_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutResizable_Playground.png
index 8f72586e6d7..c9ed5bcb72b 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutResizable_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyoutResizable_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_High_Contrast.png
index a8d64ee7595..4e7c711f027 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_High_Contrast.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_High_Contrast.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_Manual_Return_Focus.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_Manual_Return_Focus.png
index 0b7424eadf7..cc20192d655 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_Manual_Return_Focus.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_Manual_Return_Focus.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_Playground.png
index 99d94289588..71bd331fc60 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiFlyout_EuiFlyout_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLinks_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLinks_Playground.png
index 0d37c35d308..70589e5eddc 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLinks_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLinks_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png
index 80a9520bad8..587551ae6d9 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Multiple_Fixed_Headers.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Multiple_Fixed_Headers.png
index 7f00a4b7528..6312af642ec 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Multiple_Fixed_Headers.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeader_Multiple_Fixed_Headers.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiInputPopover_Anchor_Position.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiInputPopover_Anchor_Position.png
index 29914de9caf..f1fe31a3d7e 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiInputPopover_Anchor_Position.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiInputPopover_Anchor_Position.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiInputPopover_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiInputPopover_Playground.png
index 10d9a239e7d..2ac94492267 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiInputPopover_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiInputPopover_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPage_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPage_Playground.png
index 0d6cea6a490..4ed02466f3f 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPage_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPage_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPage_Restrict_Width.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPage_Restrict_Width.png
index a21cdfb81cb..bf618154896 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPage_Restrict_Width.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPage_Restrict_Width.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPanel_Kitchensink.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPanel_Kitchensink.png
new file mode 100644
index 00000000000..03cc5c1eb48
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPanel_Kitchensink.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPanel_Kitchensink_Dark.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPanel_Kitchensink_Dark.png
new file mode 100644
index 00000000000..7825665e150
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPanel_Kitchensink_Dark.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPanel_Overlapping_Panels.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPanel_Overlapping_Panels.png
index 4a79a9f6641..f5c67c878cc 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPanel_Overlapping_Panels.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPanel_Overlapping_Panels.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPanel_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPanel_Playground.png
index 3d629faad69..20e29301cff 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPanel_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPanel_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopoverFooter_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopoverFooter_Playground.png
index 58da2f11e9e..fd49eac3d1e 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopoverFooter_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopoverFooter_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopoverTitle_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopoverTitle_Playground.png
index a451d2aa682..3e57d38e4f0 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopoverTitle_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopoverTitle_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopover_Panel_Padding_Size.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopover_Panel_Padding_Size.png
index 5b87f613d2a..8e4d9a9c442 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopover_Panel_Padding_Size.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopover_Panel_Padding_Size.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopover_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopover_Playground.png
index 42ee58ad34f..f8780832a8c 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopover_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPopover_EuiPopover_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_Subcomponents_EuiResizableButton_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_Subcomponents_EuiResizableButton_Playground.png
index 474b534c623..091920cf48b 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_Subcomponents_EuiResizableButton_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_Subcomponents_EuiResizableButton_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_Subcomponents_EuiResizableCollapseButton_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_Subcomponents_EuiResizableCollapseButton_Playground.png
index 9c963184b11..002e5df3709 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_Subcomponents_EuiResizableCollapseButton_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_Subcomponents_EuiResizableCollapseButton_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_Subcomponents_EuiResizableCollapseButton_Production_Usage.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_Subcomponents_EuiResizableCollapseButton_Production_Usage.png
index e9ce95fd374..26023c9db42 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_Subcomponents_EuiResizableCollapseButton_Production_Usage.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiResizableContainer_Subcomponents_EuiResizableCollapseButton_Production_Usage.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiSplitPanel_Split_Panel_Inner.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiSplitPanel_Split_Panel_Inner.png
index 46772a1f28e..14aec3b7f9d 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiSplitPanel_Split_Panel_Inner.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiSplitPanel_Split_Panel_Inner.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiSplitPanel_Split_Panel_Inner_Dark.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiSplitPanel_Split_Panel_Inner_Dark.png
new file mode 100644
index 00000000000..fe209d9eb1d
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiSplitPanel_Split_Panel_Inner_Dark.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiSplitPanel_Split_Panel_Outer.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiSplitPanel_Split_Panel_Outer.png
index f951a9130c6..623f2eca11f 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiSplitPanel_Split_Panel_Outer.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiSplitPanel_Split_Panel_Outer.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiSplitPanel_Split_Panel_Outer_Dark.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiSplitPanel_Split_Panel_Outer_Dark.png
new file mode 100644
index 00000000000..54c5700b4be
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiSplitPanel_Split_Panel_Outer_Dark.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiWrappingPopover_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiWrappingPopover_Playground.png
index f7aa4bdcf85..0ddfaf5da44 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiWrappingPopover_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiWrappingPopover_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNav_Full_Header_Pattern.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNav_Full_Header_Pattern.png
index d952492ac22..db2f83f82d7 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNav_Full_Header_Pattern.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_EuiCollapsibleNav_Full_Header_Pattern.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Collapsed_State_In_Local_Storage.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Collapsed_State_In_Local_Storage.png
index 090794a3ee3..8dcbb8dbc8a 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Collapsed_State_In_Local_Storage.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Collapsed_State_In_Local_Storage.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Dark_Mode.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Dark_Mode.png
new file mode 100644
index 00000000000..d763a58e23b
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Dark_Mode.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Flyout_Overlay.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Flyout_Overlay.png
index 74e3e475f2c..ad6c2ed6858 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Flyout_Overlay.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Flyout_Overlay.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Playground.png
index f53d6ac7cca..5ad59db5b23 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_EuiCollapsibleNavBeta_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_KibanaSolution_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_KibanaSolution_Playground.png
index 2fd83d055c5..05c57a5ed8c 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_KibanaSolution_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiCollapsibleNav_beta_KibanaSolution_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiContextMenu_EuiContextMenu_In_Popover.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiContextMenu_EuiContextMenu_In_Popover.png
index f2636e5195d..97fe29dedee 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiContextMenu_EuiContextMenu_In_Popover.png and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiContextMenu_EuiContextMenu_In_Popover.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiContextMenu_EuiContextMenu_In_Scrollable_Popover.png b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiContextMenu_EuiContextMenu_In_Scrollable_Popover.png
new file mode 100644
index 00000000000..918155ac6ca
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Navigation_EuiContextMenu_EuiContextMenu_In_Scrollable_Popover.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Expanded_Nested_Table.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Expanded_Nested_Table.png
index 989cddec675..9a23b4bfbf1 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Expanded_Nested_Table.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Expanded_Nested_Table.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Expanded_Row.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Expanded_Row.png
index 0a6edae9d56..50f87531525 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Expanded_Row.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Expanded_Row.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Marked_Row.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Marked_Row.png
index 37bb61d4a35..49d0b20fe99 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Marked_Row.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Marked_Row.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Playground.png
index e9f36b06da2..820c40fb607 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png
index dbfad8b28ab..47d14abf2e9 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Cell_Expansion_Popover.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Column_Actions.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Column_Actions.png
index 599bcd93c60..e1571c53d1e 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Column_Actions.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_Column_Actions.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png
index b33cd815ebc..02814581622 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png
index 3c23bdf48fc..8bca234909a 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Selector.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png
index 18159fb3e3e..03522131c60 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Column_Sorting.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png
index 28be0d3c096..74c84fe9867 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png
index ebe9665b8e9..01aeb053120 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png
index 9351c55bc87..7a4c43b4ebd 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableBody_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableBody_Playground.png
index 36be42abca1..1b9111fe61a 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableBody_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableBody_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCellCheckbox_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCellCheckbox_Playground.png
index 8ddc9a10910..19f4e6b4e82 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCellCheckbox_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCellCheckbox_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Actions.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Actions.png
index 4ae7de3a4d7..c1e4d6cbd96 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Actions.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Actions.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Expander.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Expander.png
index 014d31a6d57..8492529c2c2 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Expander.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Expander.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Playground.png
index 44a0e1ca3d7..ab249446f41 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRow_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRow_Playground.png
index a3866dbc16a..0a1720a74ea 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRow_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRow_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTable_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTable_Playground.png
index 64b01ebdc4f..035ad43cbe1 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTable_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTable_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Templates_EuiPageTemplate_Dark_Mode.png b/packages/eui/.loki/reference/chrome_mobile_Templates_EuiPageTemplate_Dark_Mode.png
new file mode 100644
index 00000000000..e32192c7a8b
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Templates_EuiPageTemplate_Dark_Mode.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Templates_EuiPageTemplate_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Templates_EuiPageTemplate_Playground.png
index c9b88d77c87..801ae5fb8a3 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Templates_EuiPageTemplate_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Templates_EuiPageTemplate_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Templates_EuiSelectableTemplateSitewide_VRT.png b/packages/eui/.loki/reference/chrome_mobile_Templates_EuiSelectableTemplateSitewide_VRT.png
index 01d254b67ca..90870063454 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Templates_EuiSelectableTemplateSitewide_VRT.png and b/packages/eui/.loki/reference/chrome_mobile_Templates_EuiSelectableTemplateSitewide_VRT.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Theming_EuiProvider_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Theming_EuiProvider_Playground.png
index 9451aa556c4..18dfdf9ba1d 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Theming_EuiProvider_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Theming_EuiProvider_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Theming_EuiProvider_System_Defaults.png b/packages/eui/.loki/reference/chrome_mobile_Theming_EuiProvider_System_Defaults.png
index a4e55b5dae0..32700efbff8 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Theming_EuiProvider_System_Defaults.png and b/packages/eui/.loki/reference/chrome_mobile_Theming_EuiProvider_System_Defaults.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_Dark_Mode.png b/packages/eui/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_Dark_Mode.png
index 8835e18b610..9e4c00ba775 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_Dark_Mode.png and b/packages/eui/.loki/reference/chrome_mobile_Theming_EuiThemeProvider_Dark_Mode.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiAutoSizer_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiAutoSizer_Playground.png
index 510a9a6b05d..8681b35d775 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiAutoSizer_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiAutoSizer_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiI18n_Multiple_Token_Interpolation.png b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiI18n_Multiple_Token_Interpolation.png
index 94ae811fcae..06239cb303d 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiI18n_Multiple_Token_Interpolation.png and b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiI18n_Multiple_Token_Interpolation.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiI18n_Multiple_Tokens.png b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiI18n_Multiple_Tokens.png
index 4ed63f1a256..1eab45096d0 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiI18n_Multiple_Tokens.png and b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiI18n_Multiple_Tokens.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiMutationObserver_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiMutationObserver_Playground.png
index 2e08dd1fdf4..127a46f0723 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiMutationObserver_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiMutationObserver_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiResizeObserver_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiResizeObserver_Playground.png
index 7817add505c..4c9d2bdd4cc 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiResizeObserver_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiResizeObserver_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiTextBlockTruncate_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiTextBlockTruncate_Playground.png
index 0f4d99664a6..5ae5a3d30de 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiTextBlockTruncate_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Utilities_EuiTextBlockTruncate_Playground.png differ
diff --git a/packages/eui/changelogs/upcoming/9088.md b/packages/eui/changelogs/upcoming/9088.md
new file mode 100644
index 00000000000..e2065cc4424
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/9088.md
@@ -0,0 +1,29 @@
+- 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`
+- Updated shadow utility functions to return new tokens
+  - `euiShadow`
+  - `euiShadowXSmall`
+  - `euiShadowSmall`
+  - `euiShadowMedium`
+  - `euiShadowLarge`
+  - `euiShadowXLarge`
+  - `euiShadowFlat`
+  - `euiSlightShadowHover`
+- Added shadow hover utility `euiShadowHover`
+
+**Deprecations**
+
+- Deprecated `euiShadowFlat` and `useEuiShadowFlat` - use `euiShadow`/ `useEuiShadow` (size `xs`) or `euiShadowXSmall` instead
+- Deprecated `euiSlightShadowHover` and `useEuiSlightShadowHover` - use `euiShadowHover` / `useEuiShadowHover` instead
+
+**Breaking changes**
+
+- Updated shadow utility functions (e.g. `euiShadow`) to apply a floating border style in dark mode. This may lead to visual issues with double borders in dark mode when a regular `border` styling is applied. - Use the `options.border` argument on the utils to adjust or remove the floating border as needed.
\ No newline at end of file
diff --git a/packages/eui/src/components/bottom_bar/bottom_bar.styles.ts b/packages/eui/src/components/bottom_bar/bottom_bar.styles.ts
index 7687fc22187..9519379e1ac 100644
--- a/packages/eui/src/components/bottom_bar/bottom_bar.styles.ts
+++ b/packages/eui/src/components/bottom_bar/bottom_bar.styles.ts
@@ -35,8 +35,11 @@ export const euiBottomBarStyles = (euiThemeContext: UseEuiTheme) => {
       background-color: ${euiTheme.components.bottomBarBackground};
       ${logicalCSS('border-top', euiTheme.border.thin)}
       ${highContrastModeStyles(euiThemeContext, {
-        none: euiShadowFlat(euiThemeContext),
+        none: euiShadowFlat(euiThemeContext, { border: 'none' }),
       })}
+      /* prevent shadow from overlapping content in compositions */
+      clip-path: polygon(0 -100vh, 100% -100vh, 100% 100%, 0 100%);
+
       ${euiCanAnimate} {
         animation: ${euiBottomBarAppear} ${euiTheme.animation.slow}
           ${euiTheme.animation.resistance};
diff --git a/packages/eui/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_beta.test.tsx.snap b/packages/eui/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_beta.test.tsx.snap
index ba7b15a27bd..66c0afe68e6 100644
--- a/packages/eui/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_beta.test.tsx.snap
+++ b/packages/eui/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_beta.test.tsx.snap
@@ -36,7 +36,7 @@ exports[`EuiCollapsibleNavBeta renders 1`] = `
     >
       <nav
         aria-label="aria-label"
-        class="euiFlyout euiCollapsibleNav euiCollapsibleNavBeta testClass1 testClass2 emotion-euiFlyout-none-noMaxWidth-push-left-noAnimation-left-euiCollapsibleNavBeta-left-isPush-euiTestCss"
+        class="euiFlyout euiCollapsibleNav euiCollapsibleNavBeta testClass1 testClass2 emotion-euiFlyout-none-noMaxWidth-push-left-noAnimation-left-euiCollapsibleNavBeta-isPush-left-euiTestCss"
         data-test-subj="nav"
         id="generated-id_euiCollapsibleNav"
         style="inline-size: 248px;"
@@ -89,7 +89,7 @@ exports[`EuiCollapsibleNavBeta renders initialIsCollapsed 1`] = `
     >
       <nav
         aria-label="Site menu"
-        class="euiFlyout euiCollapsibleNav euiCollapsibleNavBeta emotion-euiFlyout-none-noMaxWidth-push-left-noAnimation-left-euiCollapsibleNavBeta-left-isPush-isPushCollapsed"
+        class="euiFlyout euiCollapsibleNav euiCollapsibleNavBeta emotion-euiFlyout-none-noMaxWidth-push-left-noAnimation-left-euiCollapsibleNavBeta-isPush-left-isPushCollapsed"
         data-test-subj="nav"
         id="generated-id_euiCollapsibleNav"
         style="inline-size: 48px;"
diff --git a/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx b/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx
index 70fda3a8b0f..d5ec6e6c028 100644
--- a/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx
+++ b/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx
@@ -326,3 +326,9 @@ export const FlyoutOverlay: Story = {
   },
   parameters: hideAllStorybookControls,
 };
+
+export const DarkMode: Story = {
+  ...Playground,
+  tags: ['vrt-only'],
+  globals: { colorMode: 'dark' },
+};
diff --git a/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_beta.styles.ts b/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_beta.styles.ts
index 9104de223de..d0b7eeb5bce 100644
--- a/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_beta.styles.ts
+++ b/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_beta.styles.ts
@@ -39,7 +39,7 @@ export const euiCollapsibleNavBetaStyles = (euiThemeContext: UseEuiTheme) => {
       ${logicalCSS('border-left', euiTheme.border.thin)}
     `,
     isPush: css`
-      ${euiShadowFlat(euiThemeContext)}
+      ${euiShadowFlat(euiThemeContext, { border: 'none' })}
     `,
     isPushCollapsed: css`
       ${hideScrollbars}
diff --git a/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_beta.tsx b/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_beta.tsx
index 600a765fe31..c7256e16fb4 100644
--- a/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_beta.tsx
+++ b/packages/eui/src/components/collapsible_nav_beta/collapsible_nav_beta.tsx
@@ -200,8 +200,8 @@ const _EuiCollapsibleNavBeta: FunctionComponent<EuiCollapsibleNavBetaProps> = ({
   const styles = useEuiMemoizedStyles(euiCollapsibleNavBetaStyles);
   const cssStyles = [
     styles.euiCollapsibleNavBeta,
-    styles[side],
     isPush && styles.isPush,
+    styles[side],
     isPush && isCollapsed && styles.isPushCollapsed,
     isOverlayFullWidth && styles.isOverlayFullWidth,
   ];
diff --git a/packages/eui/src/components/context_menu/context_menu.stories.tsx b/packages/eui/src/components/context_menu/context_menu.stories.tsx
index 90a4e803bd6..bdbd0278bd2 100644
--- a/packages/eui/src/components/context_menu/context_menu.stories.tsx
+++ b/packages/eui/src/components/context_menu/context_menu.stories.tsx
@@ -8,7 +8,10 @@
 
 import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { css } from '@emotion/react';
 
+import { LOKI_SELECTORS } from '../../../.storybook/loki';
+import { logicalCSS, useEuiScrollBar } from '../../global_styling';
 import { EuiPopover } from '../popover';
 import { EuiButton } from '../button';
 import { EuiIcon } from '../icon';
@@ -139,12 +142,17 @@ export const Playground: Story = {
 };
 
 export const InPopover: Story = {
+  parameters: {
+    loki: {
+      chromeSelector: LOKI_SELECTORS.portal,
+    },
+  },
   args: {
     initialPanelId: 0,
     panels,
   },
   render: function Render(args) {
-    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+    const [isPopoverOpen, setIsPopoverOpen] = useState(true);
 
     return (
       <EuiPopover
@@ -165,3 +173,48 @@ export const InPopover: Story = {
     );
   },
 };
+
+export const InScrollablePopover: Story = {
+  parameters: {
+    loki: {
+      chromeSelector: LOKI_SELECTORS.portal,
+    },
+  },
+  globals: {
+    colorMode: 'dark',
+  },
+  args: {
+    initialPanelId: 0,
+    panels,
+  },
+  render: function Render(args) {
+    const [isPopoverOpen, setIsPopoverOpen] = useState(true);
+
+    return (
+      <EuiPopover
+        button={
+          <EuiButton onClick={() => setIsPopoverOpen(!isPopoverOpen)}>
+            Toggle context menu in popover
+          </EuiButton>
+        }
+        isOpen={isPopoverOpen}
+        closePopover={() => {
+          setIsPopoverOpen(false);
+        }}
+        panelPaddingSize="none"
+        anchorPosition="downLeft"
+      >
+        <div
+          css={css`
+            ${logicalCSS('max-height', '250px')}
+            ${useEuiScrollBar()};
+            ${/* eslint-disable-next-line local/css-logical-properties */ ''}
+            overflow-y: auto;
+          `}
+        >
+          <EuiContextMenu {...args} />
+        </div>
+      </EuiPopover>
+    );
+  },
+};
diff --git a/packages/eui/src/components/flyout/flyout.styles.ts b/packages/eui/src/components/flyout/flyout.styles.ts
index 962e9ad10b3..9827a200ed2 100644
--- a/packages/eui/src/components/flyout/flyout.styles.ts
+++ b/packages/eui/src/components/flyout/flyout.styles.ts
@@ -45,7 +45,7 @@ export const euiFlyoutSlideInLeft = keyframes`
 `;
 
 export const euiFlyoutStyles = (euiThemeContext: UseEuiTheme) => {
-  const { euiTheme, colorMode } = euiThemeContext;
+  const { euiTheme } = euiThemeContext;
 
   return {
     euiFlyout: css`
@@ -118,25 +118,21 @@ export const euiFlyoutStyles = (euiThemeContext: UseEuiTheme) => {
     // Type
     overlay: {
       overlay: css`
-        ${euiShadowXLarge(euiThemeContext, {
-          borderAllInHighContrastMode: true,
-        })}
-
         &:has(.euiResizableButton) {
           border-inline: none;
         }
       `,
       left: css`
-        border-inline-end: ${colorMode === 'DARK'
-          ? `${euiTheme.border.width.thin} solid
-          ${euiTheme.colors.borderBaseFloating}`
-          : 'none'};
+        ${euiShadowXLarge(euiThemeContext, {
+          borderAllInHighContrastMode: true,
+          border: 'right',
+        })}
       `,
       right: css`
-        border-inline-start: ${colorMode === 'DARK'
-          ? `${euiTheme.border.width.thin} solid
-          ${euiTheme.colors.borderBaseFloating}`
-          : 'none'};
+        ${euiShadowXLarge(euiThemeContext, {
+          borderAllInHighContrastMode: true,
+          border: 'left',
+        })}
       `,
     },
     push: {
diff --git a/packages/eui/src/components/header/header.styles.ts b/packages/eui/src/components/header/header.styles.ts
index c00146f276d..83321229afa 100644
--- a/packages/eui/src/components/header/header.styles.ts
+++ b/packages/eui/src/components/header/header.styles.ts
@@ -37,7 +37,14 @@ export const euiHeaderStyles = (euiThemeContext: UseEuiTheme) => {
       ${logicalCSS('height', height)}
       ${logicalCSS('padding-horizontal', padding)}
       ${logicalCSS('border-bottom', euiTheme.border.thin)}
-      ${euiShadowXSmall(euiThemeContext)}
+      ${euiShadowXSmall(euiThemeContext, {
+        border: 'none',
+      })}
+
+      /* uses the global class as & might not reference the same due to dynamic classes */
+      & + .euiHeader {
+        clip-path: polygon(0 0, 100% 0, 100% 100vh, 0 100vh);
+      }
     `,
     // Position
     static: css`
diff --git a/packages/eui/src/components/page_template/inner/page_inner.styles.ts b/packages/eui/src/components/page_template/inner/page_inner.styles.ts
index ed6cd40dde9..2db83129f1d 100644
--- a/packages/eui/src/components/page_template/inner/page_inner.styles.ts
+++ b/packages/eui/src/components/page_template/inner/page_inner.styles.ts
@@ -28,7 +28,7 @@ export const euiPageInnerStyles = (euiThemeContext: UseEuiTheme) => {
 
     panelled: css`
       background: ${euiThemeContext.euiTheme.colors.backgroundBasePlain};
-      ${euiShadow(euiThemeContext, 'm')}
+      ${euiShadow(euiThemeContext, 'm', { border: 'none' })};
     `,
 
     border: {
diff --git a/packages/eui/src/components/page_template/page_template.stories.tsx b/packages/eui/src/components/page_template/page_template.stories.tsx
index bedd9a23e44..48e4f6938c8 100644
--- a/packages/eui/src/components/page_template/page_template.stories.tsx
+++ b/packages/eui/src/components/page_template/page_template.stories.tsx
@@ -181,3 +181,9 @@ export const Playground: Story = {
     },
   },
 };
+
+export const DarkMode: Story = {
+  ...Playground,
+  tags: ['vrt-only'],
+  globals: { colorMode: 'dark' },
+};
diff --git a/packages/eui/src/components/panel/panel.stories.tsx b/packages/eui/src/components/panel/panel.stories.tsx
index 164969c5b55..cae0f5a5637 100644
--- a/packages/eui/src/components/panel/panel.stories.tsx
+++ b/packages/eui/src/components/panel/panel.stories.tsx
@@ -8,12 +8,21 @@
 
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { css } from '@emotion/react';
 
 import {
   disableStorybookControls,
   enableFunctionToggleControls,
 } from '../../../.storybook/utils';
+import {
+  euiShadow,
+  highContrastModeStyles,
+  logicalCSS,
+} from '../../global_styling';
+import { useEuiTheme } from '../../services';
 import { EuiPanel, EuiPanelProps } from './panel';
+import { EuiSpacer } from '../spacer';
+import { EuiSplitPanel } from './split_panel';
 
 const meta: Meta<EuiPanelProps> = {
   title: 'Layout/EuiPanel',
@@ -74,3 +83,139 @@ export const OverlappingPanels: Story = {
     );
   },
 };
+
+export const Kitchensink: Story = {
+  tags: ['vrt-only'],
+  parameters: {
+    controls: {
+      include: ['color', 'paddingSize'],
+    },
+  },
+  args: {
+    children: 'Panel content',
+  },
+  render: function Render(args: EuiPanelProps) {
+    const euiThemeContext = useEuiTheme();
+    const { euiTheme } = euiThemeContext;
+
+    return (
+      <>
+        <EuiPanel {...args} hasBorder onClick={undefined} />
+        <EuiSpacer size="s" />
+        <EuiPanel {...args} hasBorder onClick={() => {}} />
+
+        <EuiSpacer size="m" />
+
+        <EuiPanel {...args} hasShadow onClick={undefined} />
+        <EuiSpacer size="s" />
+        <EuiPanel {...args} hasShadow onClick={() => {}} />
+
+        <EuiSpacer size="m" />
+
+        <EuiPanel {...args} hasShadow onClick={undefined}>
+          <div>Content</div>
+          <EuiPanel
+            color="subdued"
+            css={(euiThemeContext) => {
+              const { euiTheme } = euiThemeContext;
+              return css`
+                margin-inline: -${euiTheme.size.base};
+                margin-block-start: ${euiTheme.size.base};
+                margin-block-end: -${euiTheme.size.base};
+                border-start-start-radius: 0;
+                border-start-end-radius: 0;
+
+                ${highContrastModeStyles(euiThemeContext, {
+                  preferred: `
+                    border: none;
+                    ${logicalCSS('border-top', `${euiTheme.border.thin}`)}
+                  `,
+                })}
+              `;
+            }}
+          >
+            Footer
+          </EuiPanel>
+        </EuiPanel>
+
+        <EuiSpacer size="m" />
+
+        <EuiSplitPanel.Outer>
+          <EuiSplitPanel.Inner>Top or left panel</EuiSplitPanel.Inner>
+          <EuiSplitPanel.Inner color="subdued">
+            Bottom or right panel
+          </EuiSplitPanel.Inner>
+        </EuiSplitPanel.Outer>
+
+        <EuiSpacer size="m" />
+
+        <div
+          css={css`
+            padding: ${euiTheme.size.base};
+            background-color: ${euiTheme.colors.backgroundBasePlain};
+            border-radius: ${euiTheme.border.radius.small};
+            ${euiShadow(euiThemeContext)};
+          `}
+        >
+          Custom panel
+        </div>
+      </>
+    );
+  },
+};
+
+export const KitchensinkDark: Story = {
+  tags: ['vrt-only'],
+  globals: { colorMode: 'DARK' },
+  parameters: {
+    controls: {
+      include: ['color', 'paddingSize'],
+    },
+  },
+  args: {
+    children: 'Panel content',
+  },
+  render: function Render(args: EuiPanelProps) {
+    return (
+      <>
+        <EuiPanel {...args} hasBorder onClick={undefined} />
+        <EuiSpacer size="s" />
+        <EuiPanel {...args} hasBorder onClick={() => {}} />
+
+        <EuiSpacer size="m" />
+
+        <EuiPanel {...args} hasShadow onClick={undefined} />
+        <EuiSpacer size="s" />
+        <EuiPanel {...args} hasShadow onClick={() => {}} />
+
+        <EuiSpacer size="m" />
+
+        <EuiPanel {...args} hasShadow onClick={undefined}>
+          <div>Content</div>
+          <EuiPanel
+            color="subdued"
+            css={(euiThemeContext) => {
+              const { euiTheme } = euiThemeContext;
+              return css`
+                margin-inline: -${euiTheme.size.base};
+                margin-block-start: ${euiTheme.size.base};
+                margin-block-end: -${euiTheme.size.base};
+                border-start-start-radius: 0;
+                border-start-end-radius: 0;
+
+                ${highContrastModeStyles(euiThemeContext, {
+                  preferred: `
+                    border: none;
+                    ${logicalCSS('border-top', `${euiTheme.border.thin}`)}
+                  `,
+                })}
+              `;
+            }}
+          >
+            Footer
+          </EuiPanel>
+        </EuiPanel>
+      </>
+    );
+  },
+};
diff --git a/packages/eui/src/components/panel/panel.styles.ts b/packages/eui/src/components/panel/panel.styles.ts
index 82fd4a29481..c5c48de4bd2 100644
--- a/packages/eui/src/components/panel/panel.styles.ts
+++ b/packages/eui/src/components/panel/panel.styles.ts
@@ -7,7 +7,11 @@
  */
 
 import { css } from '@emotion/react';
-import { euiShadow } from '@elastic/eui-theme-common';
+import {
+  euiBorderStyles,
+  euiShadow,
+  euiShadowHover,
+} from '@elastic/eui-theme-common';
 
 import { UseEuiTheme } from '../../services';
 import {
@@ -33,24 +37,15 @@ export const euiPanelBorderStyles = (
 
   return highContrastModeStyles(euiThemeContext, {
     none: `
-      /* Using a pseudo element for the border instead of floating border only 
-      because the transparent border might otherwise be visible with arbitrary 
+      /* Using a pseudo element for the border instead of floating border only
+      because the transparent border might otherwise be visible with arbitrary
       full-width/height content in light mode. */
-      &::after {
-        content: '';
-        position: absolute;
-        /* ensure to keep on top of flush content */
-        z-index: 0;
-        inset: 0;
-        border: ${euiTheme.border.width.thin} solid
-          ${
-            borderColor ?? hasVisibleBorder
-              ? euiTheme.border.color
-              : euiTheme.colors.borderBaseFloating
-          };
-        border-radius: inherit;
-        pointer-events: none;
-      }
+      ${euiBorderStyles(euiThemeContext, {
+        borderColor:
+          borderColor ?? hasVisibleBorder
+            ? euiTheme.border.color
+            : euiTheme.colors.borderBaseFloating,
+      })}
     `,
     preferred: `
       border: ${euiTheme.border.thin};
@@ -74,10 +69,6 @@ export const euiPanelStyles = (euiThemeContext: UseEuiTheme) => {
 
     hasShadow: css`
       ${euiShadow(euiThemeContext, 'm')}
-
-      ${euiPanelBorderStyles(euiThemeContext, {
-        hasFloatingBorder: false,
-      })}
     `,
 
     hasBorder: css`
@@ -113,7 +104,7 @@ export const euiPanelStyles = (euiThemeContext: UseEuiTheme) => {
       &:hover,
       &:focus {
         ${highContrastModeStyles(euiThemeContext, {
-          none: euiShadow(euiThemeContext, 'l'),
+          none: euiShadowHover(euiThemeContext, 'l'),
           // Windows high contrast themes ignore box-shadows - use a filter workaround instead
           preferred: `
             &:not(.euiPanel--transparent) {
diff --git a/packages/eui/src/components/panel/split_panel/split_panel_inner.stories.tsx b/packages/eui/src/components/panel/split_panel/split_panel_inner.stories.tsx
index ca1876382ad..5be19c48116 100644
--- a/packages/eui/src/components/panel/split_panel/split_panel_inner.stories.tsx
+++ b/packages/eui/src/components/panel/split_panel/split_panel_inner.stories.tsx
@@ -44,3 +44,19 @@ export const SplitPanelInner: Story = {
     </EuiSplitPanel.Outer>
   ),
 };
+
+export const SplitPanelInnerDark: Story = {
+  tags: ['vrt-only'],
+  globals: { colorMode: 'dark' },
+  render: ({ ...args }) => (
+    <EuiSplitPanel.Outer css={{ blockSize: '100vh' }}>
+      <EuiSplitPanel.Inner {...args}>Top panel</EuiSplitPanel.Inner>
+      <EuiSplitPanel.Inner {...args} color="subdued" grow>
+        Middle panel (with uncontrollable color and grow for contrast)
+      </EuiSplitPanel.Inner>
+      <EuiSplitPanel.Inner {...args}>
+        Controllable bottom panel
+      </EuiSplitPanel.Inner>
+    </EuiSplitPanel.Outer>
+  ),
+};
diff --git a/packages/eui/src/components/panel/split_panel/split_panel_outer.stories.tsx b/packages/eui/src/components/panel/split_panel/split_panel_outer.stories.tsx
index 5ba082ee390..d9b4483f169 100644
--- a/packages/eui/src/components/panel/split_panel/split_panel_outer.stories.tsx
+++ b/packages/eui/src/components/panel/split_panel/split_panel_outer.stories.tsx
@@ -35,6 +35,19 @@ export const SplitPanelOuter: Story = {
   ),
 };
 
+export const SplitPanelOuterDark: Story = {
+  tags: ['vrt-only'],
+  globals: { colorMode: 'dark' },
+  render: ({ ...args }) => (
+    <EuiSplitPanel.Outer {...args}>
+      <EuiSplitPanel.Inner>Top or left panel</EuiSplitPanel.Inner>
+      <EuiSplitPanel.Inner color="subdued">
+        Bottom or right panel
+      </EuiSplitPanel.Inner>
+    </EuiSplitPanel.Outer>
+  ),
+};
+
 export const HighContrast: Story = {
   tags: ['vrt-only'],
   globals: { highContrastMode: true },
diff --git a/packages/eui/src/global_styling/mixins/_shadow.ts b/packages/eui/src/global_styling/mixins/_shadow.ts
index db6b48dcd13..0c145dd61ee 100644
--- a/packages/eui/src/global_styling/mixins/_shadow.ts
+++ b/packages/eui/src/global_styling/mixins/_shadow.ts
@@ -15,6 +15,7 @@ import {
   euiShadowMedium,
   euiShadowLarge,
   euiShadowXLarge,
+  euiShadowHover,
   type _EuiThemeShadowSize,
   type EuiShadowOptions,
 } from '@elastic/eui-theme-common';
@@ -30,17 +31,21 @@ export {
   euiShadowMedium,
   euiShadowLarge,
   euiShadowXLarge,
+  euiShadowHover,
 };
 
+/** @deprecated */
 export interface EuiShadowCustomColor {
   color?: string;
 }
 
+/** @deprecated use euiShadowHover/useEuiShadowHover instead */
 export const useEuiSlightShadowHover = (options?: EuiShadowOptions) => {
   const euiThemeContext = useEuiTheme();
   return euiSlightShadowHover(euiThemeContext, options);
 };
 
+/** @deprecated - useEuiShadow instead */
 export const useEuiShadowFlat = (options?: EuiShadowOptions) => {
   const euiThemeContext = useEuiTheme();
   return euiShadowFlat(euiThemeContext, options);
@@ -53,3 +58,11 @@ export const useEuiShadow = (
   const euiThemeContext = useEuiTheme();
   return euiShadow(euiThemeContext, size, options);
 };
+
+export const useEuiShadowHover = (
+  size: _EuiThemeShadowSize = 'l',
+  options?: EuiShadowOptions
+) => {
+  const euiThemeContext = useEuiTheme();
+  return euiShadowHover(euiThemeContext, size, options);
+};
diff --git a/packages/eui/src/global_styling/variables/shadow.ts b/packages/eui/src/global_styling/variables/shadow.ts
index 69aeb0d5846..e4dbea37c8e 100644
--- a/packages/eui/src/global_styling/variables/shadow.ts
+++ b/packages/eui/src/global_styling/variables/shadow.ts
@@ -9,6 +9,8 @@
 export {
   EuiThemeShadowSizes,
   _EuiShadowSizesDescriptions,
+  type _EuiThemeShadows,
   type _EuiThemeShadowSize,
+  type _EuiThemeShadowLayer,
   type _EuiThemeShadowCustomColor,
 } from '@elastic/eui-theme-common';
diff --git a/packages/eui/src/themes/amsterdam/global_styling/mixins/_index.scss b/packages/eui/src/themes/amsterdam/global_styling/mixins/_index.scss
index e77211a0abd..d310ff95d5b 100644
--- a/packages/eui/src/themes/amsterdam/global_styling/mixins/_index.scss
+++ b/packages/eui/src/themes/amsterdam/global_styling/mixins/_index.scss
@@ -1,9 +1,9 @@
 // Import base theme first, then override
 @import '../../../../global_styling/mixins/responsive';
-@import '../../../../global_styling/mixins/shadow';
 @import '../../../../global_styling/mixins/size';
 @import '../../../../global_styling/mixins/typography';
 @import 'typography';
+@import 'shadow';
 @import '../../../../global_styling/mixins/helpers';
 @import 'states';
 
diff --git a/packages/eui-theme-common/src/global_styling/mixins/_shadow.scss b/packages/eui/src/themes/amsterdam/global_styling/mixins/_shadow.scss
similarity index 100%
rename from packages/eui-theme-common/src/global_styling/mixins/_shadow.scss
rename to packages/eui/src/themes/amsterdam/global_styling/mixins/_shadow.scss
diff --git a/packages/eui/src/themes/amsterdam/global_styling/variables/_index.scss b/packages/eui/src/themes/amsterdam/global_styling/variables/_index.scss
index 5ed28331a3b..921eec39606 100644
--- a/packages/eui/src/themes/amsterdam/global_styling/variables/_index.scss
+++ b/packages/eui/src/themes/amsterdam/global_styling/variables/_index.scss
@@ -4,4 +4,5 @@
 
 @import 'colors_vis';
 @import 'typography';
+@import 'shadows';
 @import 'forms';
diff --git a/packages/eui/src/themes/amsterdam/global_styling/variables/_shadows.scss b/packages/eui/src/themes/amsterdam/global_styling/variables/_shadows.scss
new file mode 100644
index 00000000000..020b522fe2f
--- /dev/null
+++ b/packages/eui/src/themes/amsterdam/global_styling/variables/_shadows.scss
@@ -0,0 +1,20 @@
+// Shadows
+$euiShadowColor: $euiColorInk !default;
+
+$euiShadowDownXS: 0 0.8px 0.8px 0 hsla(from $euiShadowColor h s l / 0.04), 0 2.3px 2px 0 hsla(from $euiShadowColor h s l / 0.03);
+$euiShadowDownS: 0 0.7px 1.4px 0 hsla(from $euiShadowColor h s l / 0.07), 0 1.9px 4px 0 hsla(from $euiShadowColor h s l / 0.05), 0 4.5px 10 0 hsla(from $euiShadowColor h s l / 0.05);
+$euiShadowDownM: 0 0.9px 4px 0 hsla(from $euiShadowColor h s l / 0.08), 0 2.6px 8px 0 hsla(from $euiShadowColor h s l / 0.06), 0 5.7px 12px 0 hsla(from $euiShadowColor h s l / 0.05), 0 15px 15px 0 hsla(from $euiShadowColor h s l / 0.04);
+$euiShadowDownL: 0 1px 5px 0 hsla(from $euiShadowColor h s l / 0.1), 0 3.6px 13px 0 hsla(from $euiShadowColor h s l / 0.07), 0 8.4px 23px 0 hsla(from $euiShadowColor h s l / 0.06), 0 23px 35px 0 hsla(from $euiShadowColor h s l / 0.05);
+$euiShadowDownXL: 0 2.7px 9px 0 hsla(from $euiShadowColor h s l / 0.13), 0 9.4px 24px 0 hsla(from $euiShadowColor h s l / 0.09), 0 21.8px 43px 0 hsla(from $euiShadowColor h s l / 0.08);
+
+$euiShadowUpXS: 0 0.8px 0.8px 0 hsla(from $euiShadowColor h s l / 0.04), 0 -2.3px 2px 0 hsla(from $euiShadowColor h s l / 0.03);
+$euiShadowUpS: 0 0.7px 1.4px 0 hsla(from $euiShadowColor h s l / 0.07), 0 -1.9px 4px 0 hsla(from $euiShadowColor h s l / 0.05), 0 -4.5px 10 0 hsla(from $euiShadowColor h s l / 0.05);
+$euiShadowUpM: 0 0.9px 4px 0 hsla(from $euiShadowColor h s l / 0.08), 0 -2.6px 8px 0 hsla(from $euiShadowColor h s l / 0.06), 0 -5.7px 12px 0 hsla(from $euiShadowColor h s l / 0.05), 0 -15px 15px 0 hsla(from $euiShadowColor h s l / 0.04);
+$euiShadowUpL: 0 1px 5px 0 hsla(from $euiShadowColor h s l / 0.1), 0 -3.6px 13px 0 hsla(from $euiShadowColor h s l / 0.07), 0 -8.4px 23px 0 hsla(from $euiShadowColor h s l / 0.06), 0 -23px 35px 0 hsla(from $euiShadowColor h s l / 0.05);
+$euiShadowUpXL: 0 2.7px 9px 0 hsla(from $euiShadowColor h s l / 0.13), 0 -9.4px 24px 0 hsla(from $euiShadowColor h s l / 0.09), 0 -21.8px 43px 0 hsla(from $euiShadowColor h s l / 0.08);
+
+$euiShadowHoverDown: 0 1.9px 4px 0 hsla(from $euiShadowColor h s l / 0.05), 0 4.5px 10 0 hsla(from $euiShadowColor h s l / 0.05);
+$euiShadowHoverXLDown: none;
+
+$euiShadowHoverUp: 0 1.9px 4px 0 hsla(from $euiShadowColor h s l / 0.05), 0 -4.5px 10 0 hsla(from $euiShadowColor h s l / 0.05);
+$euiShadowHoverXLUp: none;
\ No newline at end of file
diff --git a/packages/eui/src/themes/amsterdam/global_styling/variables/_shadows.ts b/packages/eui/src/themes/amsterdam/global_styling/variables/_shadows.ts
new file mode 100644
index 00000000000..f88df7cc722
--- /dev/null
+++ b/packages/eui/src/themes/amsterdam/global_styling/variables/_shadows.ts
@@ -0,0 +1,496 @@
+/*
+ * 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.
+ */
+
+import {
+  formatMultipleBoxShadow,
+  _EuiThemeShadows,
+  type _EuiThemeShadowPrimitives,
+} from '@elastic/eui-theme-common';
+
+// in Amsterdam this is `color.shadow`, which computes to `ink` (#000)
+const SHADOW_COLOR = '#000000';
+
+export const shadowPrimitives: _EuiThemeShadowPrimitives = {
+  xs: {
+    light: [
+      {
+        opacity: 0.04 * 1,
+        x: 0,
+        y: 0.8,
+        blur: 0.8,
+        spread: 0,
+      },
+      {
+        opacity: 0.03 * 1,
+        x: 0,
+        y: 2.3,
+        blur: 2,
+        spread: 0,
+      },
+    ],
+    dark: [
+      {
+        opacity: 0.04 * 3.5,
+        x: 0,
+        y: 0.8,
+        blur: 0.8,
+        spread: 0,
+      },
+      {
+        opacity: 0.03 * 3.5,
+        x: 0,
+        y: 2.3,
+        blur: 2,
+        spread: 0,
+      },
+    ],
+  },
+  s: {
+    light: [
+      {
+        opacity: 0.07 * 1,
+        x: 0,
+        y: 0.7,
+        blur: 1.4,
+        spread: 0,
+      },
+      {
+        opacity: 0.05 * 1,
+        x: 0,
+        y: 1.9,
+        blur: 4,
+        spread: 0,
+      },
+      {
+        opacity: 0.05 * 1,
+        x: 0,
+        y: 4.5,
+        blur: 10,
+        spread: 0,
+      },
+    ],
+    dark: [
+      {
+        opacity: 0.07 * 3.5,
+        x: 0,
+        y: 0.7,
+        blur: 1.4,
+        spread: 0,
+      },
+      {
+        opacity: 0.05 * 3.5,
+        x: 0,
+        y: 1.9,
+        blur: 4,
+        spread: 0,
+      },
+      {
+        opacity: 0.05 * 3.5,
+        x: 0,
+        y: 4.5,
+        blur: 10,
+        spread: 0,
+      },
+    ],
+  },
+  m: {
+    light: [
+      {
+        opacity: 0.08 * 1,
+        x: 0,
+        y: 0.9,
+        blur: 4,
+        spread: 0,
+      },
+      {
+        opacity: 0.06 * 1,
+        x: 0,
+        y: 2.6,
+        blur: 8,
+        spread: 0,
+      },
+      {
+        opacity: 0.05 * 1,
+        x: 0,
+        y: 5.7,
+        blur: 12,
+        spread: 0,
+      },
+      {
+        opacity: 0.04 * 1,
+        x: 0,
+        y: 15,
+        blur: 15,
+        spread: 0,
+      },
+    ],
+    dark: [
+      {
+        opacity: 0.08 * 3.5,
+        x: 0,
+        y: 0.9,
+        blur: 4,
+        spread: 0,
+      },
+      {
+        opacity: 0.06 * 3.5,
+        x: 0,
+        y: 2.6,
+        blur: 8,
+        spread: 0,
+      },
+      {
+        opacity: 0.05 * 3.5,
+        x: 0,
+        y: 5.7,
+        blur: 12,
+        spread: 0,
+      },
+      {
+        opacity: 0.04 * 3.5,
+        x: 0,
+        y: 15,
+        blur: 15,
+        spread: 0,
+      },
+    ],
+  },
+  l: {
+    light: [
+      {
+        opacity: 0.1 * 1,
+        x: 0,
+        y: 1,
+        blur: 5,
+        spread: 0,
+      },
+      {
+        opacity: 0.07 * 1,
+        x: 0,
+        y: 3.6,
+        blur: 13,
+        spread: 0,
+      },
+      {
+        opacity: 0.06 * 1,
+        x: 0,
+        y: 8.4,
+        blur: 23,
+        spread: 0,
+      },
+      {
+        opacity: 0.05 * 1,
+        x: 0,
+        y: 23,
+        blur: 35,
+        spread: 0,
+      },
+    ],
+    dark: [
+      {
+        opacity: 0.1 * 3.5,
+        x: 0,
+        y: 1,
+        blur: 5,
+        spread: 0,
+      },
+      {
+        opacity: 0.07 * 3.5,
+        x: 0,
+        y: 3.6,
+        blur: 13,
+        spread: 0,
+      },
+      {
+        opacity: 0.06 * 3.5,
+        x: 0,
+        y: 8.4,
+        blur: 23,
+        spread: 0,
+      },
+      {
+        opacity: 0.05 * 3.5,
+        x: 0,
+        y: 23,
+        blur: 35,
+        spread: 0,
+      },
+    ],
+  },
+  xl: {
+    light: [
+      {
+        opacity: 0.13 * 1,
+        x: 0,
+        y: 2.7,
+        blur: 9,
+        spread: 0,
+      },
+      {
+        opacity: 0.09 * 1,
+        x: 0,
+        y: 9.4,
+        blur: 24,
+        spread: 0,
+      },
+      {
+        opacity: 0.08 * 1,
+        x: 0,
+        y: 21.8,
+        blur: 43,
+        spread: 0,
+      },
+    ],
+    dark: [
+      {
+        opacity: 0.13 * 3.5,
+        x: 0,
+        y: 2.7,
+        blur: 9,
+        spread: 0,
+      },
+      {
+        opacity: 0.09 * 3.5,
+        x: 0,
+        y: 9.4,
+        blur: 24,
+        spread: 0,
+      },
+      {
+        opacity: 0.08 * 3.5,
+        x: 0,
+        y: 21.8,
+        blur: 43,
+        spread: 0,
+      },
+    ],
+  },
+  xxl: {
+    light: [],
+    dark: [],
+  },
+  flat: {
+    light: [
+      {
+        opacity: 0.06 * 1,
+        x: 0,
+        y: 0,
+        blur: 0.8,
+        spread: 0,
+      },
+      {
+        opacity: 0.04 * 1,
+        x: 0,
+        y: 0,
+        blur: 2,
+        spread: 0,
+      },
+      {
+        opacity: 0.04 * 1,
+        x: 0,
+        y: 0,
+        blur: 5,
+        spread: 0,
+      },
+      {
+        opacity: 0.03 * 1,
+        x: 0,
+        y: 0,
+        blur: 17,
+        spread: 0,
+      },
+    ],
+    dark: [
+      {
+        opacity: 0.06 * 3.5,
+        x: 0,
+        y: 0,
+        blur: 0.8,
+        spread: 0,
+      },
+      {
+        opacity: 0.04 * 3.5,
+        x: 0,
+        y: 0,
+        blur: 2,
+        spread: 0,
+      },
+      {
+        opacity: 0.04 * 3.5,
+        x: 0,
+        y: 0,
+        blur: 5,
+        spread: 0,
+      },
+      {
+        opacity: 0.03 * 3.5,
+        x: 0,
+        y: 0,
+        blur: 17,
+        spread: 0,
+      },
+    ],
+  },
+};
+
+const shadowColors = {
+  colors: {
+    base: SHADOW_COLOR,
+  },
+};
+
+const shadowsLight: _EuiThemeShadows = {
+  ...shadowColors,
+  xs: {
+    down: formatMultipleBoxShadow(shadowPrimitives.xs.light, {
+      color: shadowColors.colors.base,
+    }),
+    up: formatMultipleBoxShadow(shadowPrimitives.xs.light, {
+      direction: 'up',
+      color: shadowColors.colors.base,
+    }),
+  },
+  s: {
+    down: formatMultipleBoxShadow(shadowPrimitives.s.light, {
+      color: shadowColors.colors.base,
+    }),
+    up: formatMultipleBoxShadow(shadowPrimitives.s.light, {
+      direction: 'up',
+      color: shadowColors.colors.base,
+    }),
+  },
+  m: {
+    down: formatMultipleBoxShadow(shadowPrimitives.m.light, {
+      color: shadowColors.colors.base,
+    }),
+    up: formatMultipleBoxShadow(shadowPrimitives.m.light, {
+      direction: 'up',
+      color: shadowColors.colors.base,
+    }),
+  },
+  l: {
+    down: formatMultipleBoxShadow(shadowPrimitives.l.light, {
+      color: shadowColors.colors.base,
+    }),
+    up: formatMultipleBoxShadow(shadowPrimitives.l.light, {
+      direction: 'up',
+      color: shadowColors.colors.base,
+    }),
+  },
+  xl: {
+    down: formatMultipleBoxShadow(shadowPrimitives.xl.light, {
+      color: shadowColors.colors.base,
+    }),
+    up: formatMultipleBoxShadow(shadowPrimitives.xl.light, {
+      direction: 'up',
+      color: shadowColors.colors.base,
+    }),
+  },
+  hover: {
+    base: {
+      down: formatMultipleBoxShadow(shadowPrimitives.s.light.slice(1), {
+        color: shadowColors.colors.base,
+      }),
+      up: formatMultipleBoxShadow(shadowPrimitives.s.light.slice(1), {
+        direction: 'up',
+        color: shadowColors.colors.base,
+      }),
+    },
+    xl: {
+      down: 'none',
+      up: 'none',
+    },
+  },
+  flat: {
+    down: formatMultipleBoxShadow(shadowPrimitives.flat.light, {
+      color: shadowColors.colors.base,
+    }),
+    up: formatMultipleBoxShadow(shadowPrimitives.flat.light, {
+      direction: 'up',
+      color: shadowColors.colors.base,
+    }),
+  },
+};
+
+const shadowsDark: _EuiThemeShadows = {
+  ...shadowColors,
+  xs: {
+    down: formatMultipleBoxShadow(shadowPrimitives.xs.dark, {
+      color: shadowColors.colors.base,
+    }),
+    up: formatMultipleBoxShadow(shadowPrimitives.xs.dark, {
+      direction: 'up',
+      color: shadowColors.colors.base,
+    }),
+  },
+  s: {
+    down: formatMultipleBoxShadow(shadowPrimitives.s.dark, {
+      color: shadowColors.colors.base,
+    }),
+    up: formatMultipleBoxShadow(shadowPrimitives.s.dark, {
+      direction: 'up',
+      color: shadowColors.colors.base,
+    }),
+  },
+  m: {
+    down: formatMultipleBoxShadow(shadowPrimitives.m.dark, {
+      color: shadowColors.colors.base,
+    }),
+    up: formatMultipleBoxShadow(shadowPrimitives.m.dark, {
+      direction: 'up',
+      color: shadowColors.colors.base,
+    }),
+  },
+  l: {
+    down: formatMultipleBoxShadow(shadowPrimitives.l.dark, {
+      color: shadowColors.colors.base,
+    }),
+    up: formatMultipleBoxShadow(shadowPrimitives.l.dark, {
+      direction: 'up',
+      color: shadowColors.colors.base,
+    }),
+  },
+  xl: {
+    down: formatMultipleBoxShadow(shadowPrimitives.xl.dark, {
+      color: shadowColors.colors.base,
+    }),
+    up: formatMultipleBoxShadow(shadowPrimitives.xl.dark, {
+      direction: 'up',
+      color: shadowColors.colors.base,
+    }),
+  },
+  hover: {
+    base: {
+      down: formatMultipleBoxShadow(shadowPrimitives.s.dark.slice(1), {
+        color: shadowColors.colors.base,
+      }),
+      up: formatMultipleBoxShadow(shadowPrimitives.s.dark.slice(1), {
+        direction: 'up',
+        color: shadowColors.colors.base,
+      }),
+    },
+    xl: {
+      down: 'none',
+      up: 'none',
+    },
+  },
+  flat: {
+    down: formatMultipleBoxShadow(shadowPrimitives.flat.dark, {
+      color: shadowColors.colors.base,
+    }),
+    up: formatMultipleBoxShadow(shadowPrimitives.flat.dark, {
+      direction: 'up',
+      color: shadowColors.colors.base,
+    }),
+  },
+};
+
+export const shadows: _EuiThemeShadows = {
+  LIGHT: shadowsLight,
+  DARK: shadowsDark,
+};
diff --git a/packages/eui/src/themes/amsterdam/theme.ts b/packages/eui/src/themes/amsterdam/theme.ts
index 96a4eceee00..f658d685b19 100644
--- a/packages/eui/src/themes/amsterdam/theme.ts
+++ b/packages/eui/src/themes/amsterdam/theme.ts
@@ -17,6 +17,7 @@ import { border } from './global_styling/variables/_borders';
 import { levels } from './global_styling/variables/_levels';
 import { font } from './global_styling/variables/_typography';
 import { focus } from './global_styling/variables/_states';
+import { shadows } from './global_styling/variables/_shadows';
 import { components } from './global_styling/variables/_components';
 
 export const AMSTERDAM_NAME_KEY = 'EUI_THEME_AMSTERDAM';
@@ -31,12 +32,14 @@ export const euiThemeAmsterdam: EuiThemeShape = {
   breakpoint,
   levels,
   focus,
+  shadows,
   components,
   flags: {
     hasGlobalFocusColor: false,
     hasVisColorAdjustment: true,
     buttonVariant: 'classic',
     formVariant: 'classic',
+    shadowVariant: 'classic',
   },
 };
 
diff --git a/packages/eui/src/themes/json/eui_theme_amsterdam_dark.json b/packages/eui/src/themes/json/eui_theme_amsterdam_dark.json
index 27c653dfd9f..cc6b31f5e4e 100644
--- a/packages/eui/src/themes/json/eui_theme_amsterdam_dark.json
+++ b/packages/eui/src/themes/json/eui_theme_amsterdam_dark.json
@@ -136,6 +136,42 @@
   },
   "euiBreakpointKeys": "'xs', 's', 'm', 'l', 'xl'",
   "euiShadowColor": "#000000",
+  "euiShadows": {
+    "xs": {
+      "down": "0px 0.8px 0.8px 0px hsla(0,0%,0%,0.14), 0px 2.3px 2px 0px hsla(0,0%,0%,0.105)",
+      "up": "0px 0.8px 0.8px 0px hsla(0,0%,0%,0.14), 0px -2.3px 2px 0px hsla(0,0%,0%,0.105)"
+    },
+    "s": {
+      "down": "0px 0.7px 1.4px 0px hsla(0,0%,0%,0.245), 0px 1.9px 4px 0px hsla(0,0%,0%,0.175), 0px 4.5px 10px 0px hsla(0,0%,0%,0.175)",
+      "up": "0px 0.7px 1.4px 0px hsla(0,0%,0%,0.245), 0px -1.9px 4px 0px hsla(0,0%,0%,0.175), 0px -4.5px 10px 0px hsla(0,0%,0%,0.175)"
+    },
+    "m": {
+      "down": "0px 0.9px 4px 0px hsla(0,0%,0%,0.28), 0px 2.6px 8px 0px hsla(0,0%,0%,0.21), 0px 5.7px 12px 0px hsla(0,0%,0%,0.175), 0px 15px 15px 0px hsla(0,0%,0%,0.14)",
+      "up": "0px 0.9px 4px 0px hsla(0,0%,0%,0.28), 0px -2.6px 8px 0px hsla(0,0%,0%,0.21), 0px -5.7px 12px 0px hsla(0,0%,0%,0.175), 0px -15px 15px 0px hsla(0,0%,0%,0.14)"
+    },
+    "l": {
+      "down": "0px 1px 5px 0px hsla(0,0%,0%,0.350), 0px 3.6px 13px 0px hsla(0,0%,0%,0.245), 0px 8.4px 23px 0px hsla(0,0%,0%,0.21), 0px 23px 35px 0px hsla(0,0%,0%,0.175)",
+      "up": "0px 1px 5px 0px hsla(0,0%,0%,0.350), 0px -3.6px 13px 0px hsla(0,0%,0%,0.245), 0px -8.4px 23px 0px hsla(0,0%,0%,0.21), 0px -23px 35px 0px hsla(0,0%,0%,0.175)"
+    },
+    "xl": {
+      "down": "0px 2.7px 9px 0px hsla(0,0%,0%,0.455), 0px 9.4px 24px 0px hsla(0,0%,0%,0.315), 0px 21.8px 43px 0px hsla(0,0%,0%,0.28)",
+      "up": "0px 2.7px 9px 0px hsla(0,0%,0%,0.455), 0px -9.4px 24px 0px hsla(0,0%,0%,0.315), 0px -21.8px 43px 0px hsla(0,0%,0%,0.28)"
+    },
+    "hover": {
+      "base": {
+        "down": "0px 1.9px 4px 0px hsla(0,0%,0%,0.175), 0px 4.5px 10px 0px hsla(0,0%,0%,0.175)",
+        "up": "0px 1.9px 4px 0px hsla(0,0%,0%,0.175), 0px -4.5px 10px 0px hsla(0,0%,0%,0.175)"
+      },
+      "xl": {
+        "down": "none",
+        "up": "none"
+      }
+    },
+    "flat": {
+      "down": "0px 0px 0.8px 0px hsla(0,0%,0%,0.21), 0px 0px 2px 0px hsla(0,0%,0%,0.14), 0px 0px 5px 0px hsla(0,0%,0%,0.14), 0px 0px 17px 0px hsla(0,0%,0%,0.105)",
+      "up": "0px 0px 0.8px 0px hsla(0,0%,0%,0.21), 0px 0px 2px 0px hsla(0,0%,0%,0.14), 0px 0px 5px 0px hsla(0,0%,0%,0.14), 0px 0px 17px 0px hsla(0,0%,0%,0.105)"
+    }
+  },
   "euiSize": "16px",
   "euiSizeXS": "4px",
   "euiSizeS": "8px",
diff --git a/packages/eui/src/themes/json/eui_theme_amsterdam_dark.json.d.ts b/packages/eui/src/themes/json/eui_theme_amsterdam_dark.json.d.ts
index 95b9f956c56..01f75568e29 100644
--- a/packages/eui/src/themes/json/eui_theme_amsterdam_dark.json.d.ts
+++ b/packages/eui/src/themes/json/eui_theme_amsterdam_dark.json.d.ts
@@ -137,6 +137,42 @@ declare module '@elastic/eui/dist/eui_theme_amsterdam_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;
diff --git a/packages/eui/src/themes/json/eui_theme_amsterdam_light.json b/packages/eui/src/themes/json/eui_theme_amsterdam_light.json
index 57a64b95e23..9ad8808242f 100644
--- a/packages/eui/src/themes/json/eui_theme_amsterdam_light.json
+++ b/packages/eui/src/themes/json/eui_theme_amsterdam_light.json
@@ -136,6 +136,42 @@
   },
   "euiBreakpointKeys": "'xs', 's', 'm', 'l', 'xl'",
   "euiShadowColor": "#000000",
+  "euiShadows": {
+    "xs": {
+      "down": "0px 0.8px 0.8px 0px hsla(0,0%,0%,0.04), 0px 2.3px 2px 0px hsla(0,0%,0%,0.03)",
+      "up": "0px 0.8px 0.8px 0px hsla(0,0%,0%,0.04), 0px -2.3px 2px 0px hsla(0,0%,0%,0.03)"
+    },
+    "s": {
+      "down": "0px 0.7px 1.4px 0px hsla(0,0%,0%,0.07), 0px 1.9px 4px 0px hsla(0,0%,0%,0.05), 0px 4.5px 10px 0px hsla(0,0%,0%,0.05)",
+      "up": "0px 0.7px 1.4px 0px hsla(0,0%,0%,0.07), 0px -1.9px 4px 0px hsla(0,0%,0%,0.05), 0px -4.5px 10px 0px hsla(0,0%,0%,0.05)"
+    },
+    "m": {
+      "down": "0px 0.9px 4px 0px hsla(0,0%,0%,0.08), 0px 2.6px 8px 0px hsla(0,0%,0%,0.06), 0px 5.7px 12px 0px hsla(0,0%,0%,0.05), 0px 15px 15px 0px hsla(0,0%,0%,0.04)",
+      "up": "0px 0.9px 4px 0px hsla(0,0%,0%,0.08), 0px -2.6px 8px 0px hsla(0,0%,0%,0.06), 0px -5.7px 12px 0px hsla(0,0%,0%,0.05), 0px -15px 15px 0px hsla(0,0%,0%,0.04)"
+    },
+    "l": {
+      "down": "0px 1px 5px 0px hsla(0,0%,0%,0.1), 0px 3.6px 13px 0px hsla(0,0%,0%,0.07), 0px 8.4px 23px 0px hsla(0,0%,0%,0.06), 0px 23px 35px 0px hsla(0,0%,0%,0.05)",
+      "up": "0px 1px 5px 0px hsla(0,0%,0%,0.1), 0px -3.6px 13px 0px hsla(0,0%,0%,0.07), 0px -8.4px 23px 0px hsla(0,0%,0%,0.06), 0px -23px 35px 0px hsla(0,0%,0%,0.05)"
+    },
+    "xl": {
+      "down": "0px 2.7px 9px 0px hsla(0,0%,0%,0.13), 0px 9.4px 24px 0px hsla(0,0%,0%,0.09), 0px 21.8px 43px 0px hsla(0,0%,0%,0.08)",
+      "up": "0px 2.7px 9px 0px hsla(0,0%,0%,0.13), 0px -9.4px 24px 0px hsla(0,0%,0%,0.09), 0px -21.8px 43px 0px hsla(0,0%,0%,0.08)"
+   },
+    "hover": {
+      "base": {
+        "down": "0px 1.9px 4px 0px hsla(0,0%,0%,0.05), 0px 4.5px 10px 0px hsla(0,0%,0%,0.05)",
+        "up": "0px 1.9px 4px 0px hsla(0,0%,0%,0.05), 0px -4.5px 10px 0px hsla(0,0%,0%,0.05)"
+      },
+      "xl": {
+        "down": "none",
+        "up": "none"
+      }
+    },
+    "flat": {
+      "down": "0px 0px 0.8px 0px hsla(0,0%,0%,0.06), 0px 0px 2px 0px hsla(0,0%,0%,0.04), 0px 0px 5px 0px hsla(0,0%,0%,0.04), 0px 0px 17px 0px hsla(0,0%,0%,0.03)",
+      "up": "0px 0px 0.8px 0px hsla(0,0%,0%,0.06), 0px 0px 2px 0px hsla(0,0%,0%,0.04), 0px 0px 5px 0px hsla(0,0%,0%,0.04), 0px 0px 17px 0px hsla(0,0%,0%,0.03)"
+    }
+  },
   "euiSize": "16px",
   "euiSizeXS": "4px",
   "euiSizeS": "8px",
diff --git a/packages/eui/src/themes/json/eui_theme_amsterdam_light.json.d.ts b/packages/eui/src/themes/json/eui_theme_amsterdam_light.json.d.ts
index 195c4a02244..69d0ebf777d 100644
--- a/packages/eui/src/themes/json/eui_theme_amsterdam_light.json.d.ts
+++ b/packages/eui/src/themes/json/eui_theme_amsterdam_light.json.d.ts
@@ -137,6 +137,42 @@ declare module '@elastic/eui/dist/eui_theme_amsterdam_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;
diff --git a/packages/eui/src/themes/json/eui_theme_borealis_dark.json b/packages/eui/src/themes/json/eui_theme_borealis_dark.json
index ed01cd7edb3..22b425b828b 100644
--- a/packages/eui/src/themes/json/eui_theme_borealis_dark.json
+++ b/packages/eui/src/themes/json/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",
diff --git a/packages/eui/src/themes/json/eui_theme_borealis_dark.json.d.ts b/packages/eui/src/themes/json/eui_theme_borealis_dark.json.d.ts
index 76518684bcf..1bdbf5ab145 100644
--- a/packages/eui/src/themes/json/eui_theme_borealis_dark.json.d.ts
+++ b/packages/eui/src/themes/json/eui_theme_borealis_dark.json.d.ts
@@ -137,6 +137,42 @@ declare module '@elastic/eui/dist/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;
diff --git a/packages/eui/src/themes/json/eui_theme_borealis_light.json b/packages/eui/src/themes/json/eui_theme_borealis_light.json
index 941b63776a6..c7d2be2e4bf 100644
--- a/packages/eui/src/themes/json/eui_theme_borealis_light.json
+++ b/packages/eui/src/themes/json/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",
diff --git a/packages/eui/src/themes/json/eui_theme_borealis_light.json.d.ts b/packages/eui/src/themes/json/eui_theme_borealis_light.json.d.ts
index 9db35efb731..84127cd03f3 100644
--- a/packages/eui/src/themes/json/eui_theme_borealis_light.json.d.ts
+++ b/packages/eui/src/themes/json/eui_theme_borealis_light.json.d.ts
@@ -137,6 +137,42 @@ declare module '@elastic/eui/dist/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;
diff --git a/packages/website/docs/getting-started/theming/tokens/shadows/index.mdx b/packages/website/docs/getting-started/theming/tokens/shadows/index.mdx
new file mode 100644
index 00000000000..5b66b3cb5c7
--- /dev/null
+++ b/packages/website/docs/getting-started/theming/tokens/shadows/index.mdx
@@ -0,0 +1,22 @@
+---
+sidebar_position: 10
+---
+
+# Shadows
+
+EUI provides 5 shadow sizes (`xs`, `s`, `m`, `l`, `xl`) that can be applied in two directions: `down` (default) and `up`.
+
+:::warning It's not recommended to use shadow tokens directly
+Use the [`euiShadow()` utility](../../utilities/shadows/index.mdx) to apply shadows instead. This utility handles theme tokens and automatically adds required adjustments 
+for dark mode and high contrast mode that ensure expected visibility. [Read more about the shadow utils here](../../utilities/shadows/index.mdx). 
+:::
+
+import { ShadowsTable } from './shadows_table';
+
+### Direction: `down`
+
+<ShadowsTable />
+
+### Direction: `up`
+
+<ShadowsTable direction="up" />
\ No newline at end of file
diff --git a/packages/website/docs/getting-started/theming/tokens/shadows/shadows_table.tsx b/packages/website/docs/getting-started/theming/tokens/shadows/shadows_table.tsx
new file mode 100644
index 00000000000..4105598925a
--- /dev/null
+++ b/packages/website/docs/getting-started/theming/tokens/shadows/shadows_table.tsx
@@ -0,0 +1,48 @@
+import { css } from '@emotion/react';
+import {
+  useEuiTheme,
+  EuiColorPickerSwatch,
+  _EuiThemeShadowSize,
+  EuiThemeAmsterdam,
+} from '@elastic/eui';
+import { ThemeValuesTable } from '../../theme_values_table';
+
+const shadowTypes: _EuiThemeShadowSize[] = ['xs', 's', 'm', 'l', 'xl'];
+
+export const ShadowsTable = ({ direction = 'down' }) => {
+  const { euiTheme } = useEuiTheme();
+  const isAmsterdam = euiTheme.themeName === EuiThemeAmsterdam.key;
+
+  const items = shadowTypes.map((type) => ({
+    id: type,
+    token: `shadows.${type}.${direction}`,
+    value: euiTheme.shadows[type]![direction],
+  }));
+
+  if (isAmsterdam) {
+    items.push({
+      id: 'flat',
+      token: `shadows.flat.${direction}`,
+      value: euiTheme.shadows.flat![direction],
+    });
+  }
+
+  return (
+    <ThemeValuesTable
+      items={items}
+      render={(item) => (
+        <EuiColorPickerSwatch
+          showToolTip={false}
+          color={euiTheme.colors.backgroundBasePlain}
+          css={css`
+            inline-size: 48px;
+            block-size: 48px;
+            border: none;
+            box-shadow: ${item.value};
+          `}
+          disabled
+        />
+      )}
+    />
+  );
+};
diff --git a/packages/website/docs/getting-started/theming/utilities/shadows/index.mdx b/packages/website/docs/getting-started/theming/utilities/shadows/index.mdx
new file mode 100644
index 00000000000..0079e91f45d
--- /dev/null
+++ b/packages/website/docs/getting-started/theming/utilities/shadows/index.mdx
@@ -0,0 +1,315 @@
+---
+sidebar_position: 10
+---
+
+# Shadows
+
+EUI provides 5 shadow sizes (`xs`, `s`, `m`, `l`, `xl`) that can be applied in two directions: `down` (default) and `up`.
+
+The provided EUI shadow utilities handle the following additional style adjustments:
+
+- adds a light, 4-sided `border` style in Dark mode to increase elevated item visibility
+- replaces the `box-shadow` in High Contrast mode with `border` to ensure visibility in high contrast themes
+
+
+import { Example } from '@site/src/components';
+import { EuiSpacer } from '@elastic/eui';
+
+## Usage
+
+<Example.Snippet>
+  ```ts
+  import { euiShadow } from '@elastic/eui';
+
+  const styles = css`
+    ${euiShadow(euiThemeContext, 's')};
+    ${euiShadow(euiThemeContext, 's', { direction: 'up' })};
+  `;  
+  ```
+</Example.Snippet>
+
+
+
+import { ShadowsTable } from './shadows_table';
+
+### Direction: `down`
+
+<ShadowsTable />
+
+### Direction: `up`
+
+<ShadowsTable direction="up" />
+
+### Dark mode floating border customization
+
+By default the shadow utilities add a light, 4-sided `border` style in Dark mode. In some cases where different shadowed elements are being composed together, 
+this might result in duplicate neighboring borders. To adjust this, use the `border` option on the `euiShadow` utility to adjust or remove the border output.
+
+:::info The additional border is only applied and visible in dark mode.
+:::
+
+<Example.Snippet>
+  ```ts
+  import { euiShadow } from '@elastic/eui';
+
+  const styles = css`
+    ${euiShadow(euiThemeContext, 's', { border: 'none'})}
+    ${euiShadow(euiThemeContext, 's', { border: 'all'})}
+    ${euiShadow(euiThemeContext, 's', { border: 'top'})}
+    ${euiShadow(euiThemeContext, 's', { border: 'bottom'})}
+    ${euiShadow(euiThemeContext, 's', { border: 'left'})}
+    ${euiShadow(euiThemeContext, 's', { border: 'right'})}
+    ${euiShadow(euiThemeContext, 's', { border: 'horizontal'})}
+    ${euiShadow(euiThemeContext, 's', { border: 'vertical'})}
+  `;  
+  ```
+</Example.Snippet>
+
+```tsx interactive
+import React, { useState } from 'react';
+import { useEuiTheme, EuiSelect, EuiSpacer, EuiCodeBlock, EuiPanel, EuiThemeProvider } from '@elastic/eui';
+
+type ShadowBorderOption = 'none' | 'all' | 'top' | 'bottom' | 'left' | 'right' | 'horizontal' | 'vertical';
+
+const Example = ({ selectedBorder }: { selectedBorder: ShadowBorderOption }) => {
+  const euiThemeContext = useEuiTheme();
+  const { euiTheme } = euiThemeContext;
+
+  const styles = css`
+    border-radius: ${euiTheme.border.radius.medium};
+    ${euiShadow(euiThemeContext, 'm', { border: selectedBorder })}}
+  `;
+
+  return (
+    <EuiPanel hasShadow={false} color="plain">
+      <EuiCodeBlock css={styles} language="js">
+          {`const styles = css\`
+  \${euiShadow(euiThemeContext, 'm', { border: '${selectedBorder}' })}
+\`}`}
+      </EuiCodeBlock>
+    </EuiPanel>
+  );
+}
+
+export default () => {
+  const [selectedBorder, setSelectedBorder] = useState<ShadowBorderOption>('all');
+  const options = [
+    { value: 'none', text: 'none' },
+    { value: 'all', text: 'all' },
+    { value: 'top' , text: 'top' },
+    { value: 'bottom' , text: 'bottom' },
+    { value: 'left' , text: 'left' },
+    { value: 'right', text: 'right' },
+    { value: 'horizontal', text: 'horizontal' },
+    { value: 'vertical', text: 'vertical' },
+  ];
+
+  return (
+    <>
+      <EuiThemeProvider colorMode="dark">
+        <Example selectedBorder={selectedBorder} />
+      </EuiThemeProvider>
+      <EuiSpacer />
+      <EuiSelect
+        aria-label="Shadow Size" 
+        prepend="Border" 
+        compressed 
+        options={options}
+        value={selectedBorder}
+        onChange={(e) => { setSelectedBorder(e.target.value) }}
+      />
+    </>
+  );
+}
+```
+
+## Scroll behavior
+
+:::warning Do not combine shadow utils and scroll behavior styles on the same element
+:::
+
+Combining EUI shadow utils like `euiShadow()` and scroll behavior (e.g. via `overflow: scroll` or `overflow: auto`) on the same element will cause the floating border 
+in DARK mode to be scrolled. If you want to combine both, separate the styles onto different elements by placing the shadow util on the outer wrapper and the scroll 
+behavior on the inner one.
+
+<Example.Snippet>
+  ```ts
+  import { euiShadow } from '@elastic/eui';
+  import { css } from '@emotion/react';
+
+  const Component = () => {
+    const euiThemeContext = useEuiTheme();
+
+    const shadowStyles = css`
+      ${euiShadow(euiThemeContext, 's')};
+    `;
+    const scrollContainerStyles = css`
+      max-height: 100px;
+      overflow-y: auto;
+      /* specific scroll bar styling */
+      ${useEuiScrollBar()};
+    `;
+
+    return (
+      <div css={shadowStyles}>
+        <div css={scrollContainerStyles}>
+          // scrollable content
+        </div>
+      </div>
+    );
+  }
+  ```
+</Example.Snippet>
+
+```tsx interactive
+import React, { useState } from 'react';
+import {
+  useEuiTheme,
+  EuiPopover,
+  EuiButton,
+  EuiContextMenu,
+  EuiPanel,
+  EuiThemeProvider,
+  logicalCSS,
+  useEuiScrollBar,
+} from '@elastic/eui';
+import { css } from '@emotion/react';
+
+export default () => {
+  const [isPopoverOpen, setPopoverOpen] = useState(false);
+
+  const Example = () => {
+    return (
+      <EuiPanel hasShadow={false} css={css`
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        block-size: 200px;
+      `}>
+        <EuiPopover
+          button={
+            <EuiButton onClick={() => setPopoverOpen(!isPopoverOpen)}>
+              Toggle context menu
+            </EuiButton>
+          }
+          isOpen={isPopoverOpen}
+          closePopover={() => {
+            setPopoverOpen(false);
+          }}
+          panelPaddingSize="none"
+          anchorPosition="rightCenter"
+        >
+          <div
+            css={css`
+              ${logicalCSS('max-height', '100px')}
+              ${useEuiScrollBar()};
+              overflow-y: auto;
+            `}
+          >
+            <EuiContextMenu
+              initialPanelId={0}
+              panels={[
+                {
+                  id: 0,
+                  title: 'This is a context menu',
+                  items: [
+                    {
+                      name: 'Item 1',
+                      icon: 'search',
+                    },
+                    {
+                      name: 'Item 2',
+                      icon: 'user',
+                    },
+                    {
+                      name: 'Item 3',
+                      icon: 'document',
+                    },
+                    {
+                      name: 'Item 5',
+                      icon: 'cheer',
+                    }
+                  ],
+                },
+              ]}
+            />
+          </div>
+        </EuiPopover>
+      </EuiPanel>
+    )
+  }
+
+  return (
+    <EuiThemeProvider colorMode="dark" wrapperProps={{ cloneElement: true }}>
+      <Example />
+    </EuiThemeProvider>
+  );
+};
+```
+
+## Hover states
+
+Each shadowed surface, when interactive, follows the same hover effect rule: it moves up one level. 
+
+- `xs` hovered → `s`
+- `s` hovered → `m`
+- `m` hovered → `l`
+- `l` hovered → `xl`
+- `xl` hovered → `hover.xl`
+
+You don't need to remember this rule though. You can instead use the available `euiShadowHover` utility which 
+applies the expected hover shadow based on the base size.
+
+```tsx interactive
+import React, { useState } from 'react';
+import { useEuiTheme, EuiSelect, EuiSpacer, EuiCodeBlock } from '@elastic/eui';
+
+type ShadowSize = 'xs' | 's' | 'm' | 'l' | 'xl';
+
+export default () => {
+  const euiThemeContext = useEuiTheme();
+  const { euiTheme } = euiThemeContext;
+  const [selectedSize, setSelectedSize] = useState<ShadowSize>('m');
+  const options = [
+    { value: 'xs', text: 'xs' },
+    { value: 's' , text: 's' },
+    { value: 'm' , text: 'm' },
+    { value: 'l' , text: 'l' },
+    { value: 'xl', text: 'xl' },
+  ];
+
+  const styles = css`
+    ${euiShadow(euiThemeContext, selectedSize)}
+    border-radius: ${euiTheme.border.radius.medium};
+    
+    &:hover {
+      ${euiShadowHover(euiThemeContext, selectedSize)}}
+    }
+  `
+  const stylesText = `
+const styles = css\`
+  \${euiShadow(euiThemeContext, '${selectedSize}')}
+  &:hover {
+    \${euiShadowHover(euiThemeContext, '${selectedSize}')}
+  }
+\`
+  `
+
+  return (
+    <>
+      <EuiCodeBlock css={styles} language="js">
+        {stylesText}
+      </EuiCodeBlock>
+      <EuiSpacer />
+      <EuiSelect
+        aria-label="Shadow Size" 
+        prepend="Size" 
+        compressed 
+        options={options}
+        value={selectedSize}
+        onChange={(e) => { setSelectedSize(e.target.value) }}
+      />
+    </>
+  );
+}
+```
\ No newline at end of file
diff --git a/packages/website/docs/getting-started/theming/utilities/shadows/shadows_table.tsx b/packages/website/docs/getting-started/theming/utilities/shadows/shadows_table.tsx
new file mode 100644
index 00000000000..54ac672018c
--- /dev/null
+++ b/packages/website/docs/getting-started/theming/utilities/shadows/shadows_table.tsx
@@ -0,0 +1,63 @@
+import { css } from '@emotion/react';
+import {
+  useEuiTheme,
+  EuiColorPickerSwatch,
+  _EuiThemeShadowSize,
+  euiShadow,
+  euiShadowFlat,
+} from '@elastic/eui';
+import { type EuiShadowOptions } from '@elastic/eui-theme-common';
+import { ThemeValuesTable } from '../../theme_values_table';
+
+const shadowTypes: _EuiThemeShadowSize[] = ['xs', 's', 'm', 'l', 'xl'];
+
+export const ShadowsTable = ({
+  direction = 'down',
+}: {
+  direction: EuiShadowOptions['direction'];
+}) => {
+  const euiThemeContext = useEuiTheme();
+  const { euiTheme } = euiThemeContext;
+
+  const items = shadowTypes.map((type) => ({
+    id: type,
+    token: `euiShadow(euiThemeContext, '${type}', { direction: '${direction}' })`,
+    value: euiShadow(euiThemeContext, type, {
+      direction,
+    })
+      .replaceAll(';;', ';')
+      .replaceAll(' ;', ''),
+  }));
+
+  // deprecated, remove once obsolete
+  items.push({
+    id: 'flat',
+    token: `euiShadowFlat(euiThemeContext, { direction: '${direction}' }))`,
+    value: euiShadowFlat(euiThemeContext, {
+      direction,
+    })
+      .replaceAll(';;', ';')
+      .replaceAll(' ;', ''),
+  });
+
+  return (
+    <ThemeValuesTable
+      items={items}
+      tokenColumnProps={{ name: 'Utility' }}
+      render={(item) => (
+        <EuiColorPickerSwatch
+          showToolTip={false}
+          color={euiTheme.colors.backgroundBasePlain}
+          css={css`
+            inline-size: 48px;
+            block-size: 48px;
+            border: none;
+
+            ${item.value};
+          `}
+          disabled
+        />
+      )}
+    />
+  );
+};