diff --git a/packages/eui-theme-common/package.json b/packages/eui-theme-common/package.json
index 925a58b5f06..d19ef7fdc02 100644
--- a/packages/eui-theme-common/package.json
+++ b/packages/eui-theme-common/package.json
@@ -23,6 +23,7 @@
   },
   "dependencies": {
     "@types/lodash": "^4.14.202",
+    "chroma-js": "^2.4.2",
     "lodash": "^4.17.21"
   },
   "devDependencies": {
@@ -32,6 +33,7 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.5",
     "@emotion/react": "^11.11.0",
+    "@types/chroma-js": "^2.4.0",
     "@types/jest": "^29.5.12",
     "@types/prettier": "2.7.3",
     "@types/react": "^16.9 || ^17.0 || ^18.0",
diff --git a/packages/eui-theme-common/src/global_styling/functions/index.ts b/packages/eui-theme-common/src/global_styling/functions/index.ts
index a16d7cef70e..44d90033c4b 100644
--- a/packages/eui-theme-common/src/global_styling/functions/index.ts
+++ b/packages/eui-theme-common/src/global_styling/functions/index.ts
@@ -8,3 +8,4 @@
 
 export * from './size';
 export * from './math';
+export * from './shadows';
diff --git a/packages/eui-theme-common/src/global_styling/functions/shadows.ts b/packages/eui-theme-common/src/global_styling/functions/shadows.ts
new file mode 100644
index 00000000000..b3dd876d5ea
--- /dev/null
+++ b/packages/eui-theme-common/src/global_styling/functions/shadows.ts
@@ -0,0 +1,26 @@
+/*
+ * 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 chroma from 'chroma-js';
+import {
+  COLOR_MODES_STANDARD,
+  EuiThemeColorModeStandard,
+} from '../../services/theme/types';
+
+// Create a CSS color value using whose opacity is determined based
+// on either a light or dark theme. We use a multiplier
+// of 1 for light themes and 2.5 for dark themes
+export const getShadowColor = (
+  color: string,
+  opacity: number,
+  colorMode: EuiThemeColorModeStandard
+) => {
+  const themeOpacity =
+    colorMode === COLOR_MODES_STANDARD.dark ? opacity * 3.5 : opacity * 1;
+  return chroma(color).alpha(themeOpacity).css();
+};
diff --git a/packages/eui-theme-common/src/global_styling/index.ts b/packages/eui-theme-common/src/global_styling/index.ts
index 47fa2bee007..5d64b1fe0da 100644
--- a/packages/eui-theme-common/src/global_styling/index.ts
+++ b/packages/eui-theme-common/src/global_styling/index.ts
@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
-export * from './types';
+export * from '../services/theme/types';
 export * from './functions';
 export * from './variables';
+export * from './mixins';
diff --git a/packages/eui/src/global_styling/variables/_colors_vis.ts b/packages/eui-theme-common/src/global_styling/mixins/index.ts
similarity index 80%
rename from packages/eui/src/global_styling/variables/_colors_vis.ts
rename to packages/eui-theme-common/src/global_styling/mixins/index.ts
index a4e932e3896..2041f2d9aca 100644
--- a/packages/eui/src/global_styling/variables/_colors_vis.ts
+++ b/packages/eui-theme-common/src/global_styling/mixins/index.ts
@@ -6,4 +6,4 @@
  * Side Public License, v 1.
  */
 
-export { colorVis } from '../../themes/amsterdam/global_styling/variables/_colors_vis';
+export * from './shadow';
diff --git a/packages/eui-theme-common/src/global_styling/mixins/shadow.ts b/packages/eui-theme-common/src/global_styling/mixins/shadow.ts
new file mode 100644
index 00000000000..2cc0d20d64f
--- /dev/null
+++ b/packages/eui-theme-common/src/global_styling/mixins/shadow.ts
@@ -0,0 +1,170 @@
+/*
+ * 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 type { UseEuiTheme } from '../../services/theme/types';
+import { getShadowColor } from '../functions';
+import {
+  _EuiThemeShadowSize,
+  _EuiThemeShadowCustomColor,
+} from '../variables/shadow';
+
+export interface EuiShadowCustomColor {
+  color?: string;
+}
+
+/**
+ * euiSlightShadow
+ */
+export const euiShadowXSmall = (
+  { euiTheme, colorMode }: UseEuiTheme,
+  { color: _color }: _EuiThemeShadowCustomColor = {}
+) => {
+  const color = _color || euiTheme.colors.shadow;
+  return `
+box-shadow:
+  0 .8px .8px ${getShadowColor(color, 0.04, colorMode)},
+  0 2.3px 2px ${getShadowColor(color, 0.03, colorMode)};
+`;
+};
+
+/**
+ * bottomShadowSmall
+ */
+export const euiShadowSmall = (
+  { euiTheme, colorMode }: UseEuiTheme,
+  { color: _color }: _EuiThemeShadowCustomColor = {}
+) => {
+  const color = _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)};
+`;
+};
+
+/**
+ * bottomShadowMedium
+ */
+export const euiShadowMedium = (
+  { euiTheme, colorMode }: UseEuiTheme,
+  { color: _color, property }: _EuiThemeShadowCustomColor = {}
+) => {
+  const color = _color || euiTheme.colors.shadow;
+
+  if (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)};`;
+  }
+};
+
+/**
+ * bottomShadow
+ */
+export const euiShadowLarge = (
+  { euiTheme, colorMode }: UseEuiTheme,
+  { color: _color }: _EuiThemeShadowCustomColor = {}
+) => {
+  const color = _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)};
+`;
+};
+
+/**
+ * bottomShadowLarge
+ */
+export interface EuiShadowXLarge extends _EuiThemeShadowCustomColor {
+  reverse?: boolean;
+}
+export const euiShadowXLarge = (
+  { euiTheme, colorMode }: UseEuiTheme,
+  { color: _color, reverse }: EuiShadowXLarge = {}
+) => {
+  const color = _color || euiTheme.colors.shadow;
+  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)};
+`;
+};
+
+/**
+ * slightShadowHover
+ */
+export const euiSlightShadowHover = (
+  { euiTheme, colorMode }: UseEuiTheme,
+  { color: _color }: _EuiThemeShadowCustomColor = {}
+) => {
+  const color = _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)};
+`;
+};
+
+/**
+ * bottomShadowFlat
+ *
+ * Similar to shadow medium but without the bottom depth.
+ * Useful for popovers that drop UP rather than DOWN.
+ */
+export const euiShadowFlat = (
+  { euiTheme, colorMode }: UseEuiTheme,
+  { color: _color }: _EuiThemeShadowCustomColor = {}
+) => {
+  const color = _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)};
+`;
+};
+
+export const euiShadow = (
+  euiThemeContext: UseEuiTheme,
+  size: _EuiThemeShadowSize = 'l',
+  { color }: _EuiThemeShadowCustomColor = {}
+) => {
+  switch (size) {
+    case 'xs':
+      return euiShadowXSmall(euiThemeContext, { color });
+    case 's':
+      return euiShadowSmall(euiThemeContext, { color });
+    case 'm':
+      return euiShadowMedium(euiThemeContext, { color });
+    case 'l':
+      return euiShadowLarge(euiThemeContext, { color });
+    case 'xl':
+      return euiShadowXLarge(euiThemeContext, { color });
+
+    default:
+      console.warn('Please provide a valid size option to useEuiShadow');
+      return '';
+  }
+};
diff --git a/packages/eui-theme-common/src/global_styling/variables/_breakpoint.ts b/packages/eui-theme-common/src/global_styling/variables/_breakpoint.ts
new file mode 100644
index 00000000000..3284919c1fa
--- /dev/null
+++ b/packages/eui-theme-common/src/global_styling/variables/_breakpoint.ts
@@ -0,0 +1,17 @@
+/*
+ * 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 { _EuiThemeBreakpoints } from './breakpoint';
+
+export const breakpoint: _EuiThemeBreakpoints = {
+  xl: 1200,
+  l: 992,
+  m: 768,
+  s: 575,
+  xs: 0,
+};
diff --git a/packages/eui-theme-common/src/global_styling/variables/borders.ts b/packages/eui-theme-common/src/global_styling/variables/borders.ts
index 3673010aba2..10eda82eb9b 100644
--- a/packages/eui-theme-common/src/global_styling/variables/borders.ts
+++ b/packages/eui-theme-common/src/global_styling/variables/borders.ts
@@ -7,7 +7,7 @@
  */
 
 import { CSSProperties } from 'react';
-import { ColorModeSwitch } from '../types';
+import { ColorModeSwitch } from '../../services/theme/types';
 
 export interface _EuiThemeBorderWidthValues {
   /**
diff --git a/packages/eui-theme-common/src/global_styling/variables/buttons.ts b/packages/eui-theme-common/src/global_styling/variables/buttons.ts
index bb34c178d5b..6ba1f96d4ff 100644
--- a/packages/eui-theme-common/src/global_styling/variables/buttons.ts
+++ b/packages/eui-theme-common/src/global_styling/variables/buttons.ts
@@ -6,7 +6,10 @@
  * Side Public License, v 1.
  */
 
-import { ColorModeSwitch, StrictColorModeSwitch } from '../types';
+import {
+  ColorModeSwitch,
+  StrictColorModeSwitch,
+} from '../../services/theme/types';
 
 export type _EuiThemeButtonColors = {
   backgroundPrimary: ColorModeSwitch;
diff --git a/packages/eui-theme-common/src/global_styling/variables/colors.ts b/packages/eui-theme-common/src/global_styling/variables/colors.ts
index 3e039725656..b84e0fd479d 100644
--- a/packages/eui-theme-common/src/global_styling/variables/colors.ts
+++ b/packages/eui-theme-common/src/global_styling/variables/colors.ts
@@ -6,7 +6,10 @@
  * Side Public License, v 1.
  */
 
-import { ColorModeSwitch, StrictColorModeSwitch } from '../types';
+import {
+  ColorModeSwitch,
+  StrictColorModeSwitch,
+} from '../../services/theme/types';
 
 /**
  * Top 5 colors
diff --git a/packages/eui-theme-common/src/global_styling/variables/components.ts b/packages/eui-theme-common/src/global_styling/variables/components.ts
index b067c0a1213..d95dbbac694 100644
--- a/packages/eui-theme-common/src/global_styling/variables/components.ts
+++ b/packages/eui-theme-common/src/global_styling/variables/components.ts
@@ -6,7 +6,10 @@
  * Side Public License, v 1.
  */
 
-import { ColorModeSwitch, StrictColorModeSwitch } from '../types';
+import {
+  ColorModeSwitch,
+  StrictColorModeSwitch,
+} from '../../services/theme/types';
 import { _EuiThemeButtonColors } from './buttons';
 import { _EuiThemeForm, _EuiThemeFormColors } from './forms';
 
diff --git a/packages/eui-theme-common/src/global_styling/variables/forms.ts b/packages/eui-theme-common/src/global_styling/variables/forms.ts
index 33c8f84b880..844354655b3 100644
--- a/packages/eui-theme-common/src/global_styling/variables/forms.ts
+++ b/packages/eui-theme-common/src/global_styling/variables/forms.ts
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { ColorModeSwitch } from '../types';
+import { ColorModeSwitch } from '../../services/theme/types';
 
 export type _EuiThemeForm = {
   maxWidth: string;
diff --git a/packages/eui-theme-common/src/global_styling/variables/index.ts b/packages/eui-theme-common/src/global_styling/variables/index.ts
index 4050b351e3d..ee3d0142c85 100644
--- a/packages/eui-theme-common/src/global_styling/variables/index.ts
+++ b/packages/eui-theme-common/src/global_styling/variables/index.ts
@@ -9,6 +9,8 @@
 export * from './animations';
 export * from './borders';
 export * from './breakpoint';
+export * from './_breakpoint';
+export * from './breakpoint';
 export * from './colors';
 export * from './levels';
 export * from './size';
diff --git a/packages/eui-theme-common/src/global_styling/variables/states.ts b/packages/eui-theme-common/src/global_styling/variables/states.ts
index 2d0283ac949..81db9407f3a 100644
--- a/packages/eui-theme-common/src/global_styling/variables/states.ts
+++ b/packages/eui-theme-common/src/global_styling/variables/states.ts
@@ -7,7 +7,7 @@
  */
 
 import { CSSProperties } from 'react';
-import { ColorModeSwitch } from '../types';
+import { ColorModeSwitch } from '../../services/theme/types';
 
 export interface _EuiThemeFocus {
   /**
diff --git a/packages/eui-theme-common/src/global_styling/types.ts b/packages/eui-theme-common/src/services/theme/types.ts
similarity index 72%
rename from packages/eui-theme-common/src/global_styling/types.ts
rename to packages/eui-theme-common/src/services/theme/types.ts
index 1e5b826d0e6..01bb7816b2c 100644
--- a/packages/eui-theme-common/src/global_styling/types.ts
+++ b/packages/eui-theme-common/src/services/theme/types.ts
@@ -8,18 +8,21 @@
 
 import type { CSSObject } from '@emotion/react';
 
-import type { RecursivePartial, ValueOf } from '../types';
+import type { RecursivePartial, ValueOf } from '../../types';
 
-import { _EuiThemeAnimation } from './variables/animations';
-import { _EuiThemeBreakpoints } from './variables/breakpoint';
-import { _EuiThemeBorder } from './variables/borders';
-import { _EuiThemeColors } from './variables/colors';
-import { _EuiThemeBase, _EuiThemeSizes } from './variables/size';
-import { _EuiThemeFont } from './variables/typography';
-import { _EuiThemeFocus } from './variables/states';
-import { _EuiThemeLevels } from './variables/levels';
-import { _EuiThemeComponents } from './variables/components';
-import { _EuiThemeFlags } from './variables';
+import { _EuiThemeAnimation } from '../../global_styling/variables/animations';
+import { _EuiThemeBreakpoints } from '../../global_styling/variables/breakpoint';
+import { _EuiThemeBorder } from '../../global_styling/variables/borders';
+import { _EuiThemeColors } from '../../global_styling/variables/colors';
+import {
+  _EuiThemeBase,
+  _EuiThemeSizes,
+} from '../../global_styling/variables/size';
+import { _EuiThemeFont } from '../../global_styling/variables/typography';
+import { _EuiThemeFocus } from '../../global_styling/variables/states';
+import { _EuiThemeLevels } from '../../global_styling/variables/levels';
+import { _EuiThemeComponents } from '../../global_styling/variables/components';
+import { _EuiThemeFlags } from '../../global_styling/variables';
 
 export const COLOR_MODES_STANDARD = {
   light: 'LIGHT',
@@ -108,3 +111,9 @@ export type EuiThemeNested = {
   setNearestThemeCSSVariables: Function;
   themeCSSVariables?: CSSObject;
 };
+
+export interface UseEuiTheme<T extends {} = {}> {
+  euiTheme: EuiThemeComputed<T>;
+  colorMode: EuiThemeColorModeStandard;
+  modifications: EuiThemeModifications<T>;
+}
diff --git a/packages/eui/src-docs/src/views/theme/breakpoints/breakpoint_utilities.tsx b/packages/eui/src-docs/src/views/theme/breakpoints/breakpoint_utilities.tsx
index 041610b9c9c..3ec69060067 100644
--- a/packages/eui/src-docs/src/views/theme/breakpoints/breakpoint_utilities.tsx
+++ b/packages/eui/src-docs/src/views/theme/breakpoints/breakpoint_utilities.tsx
@@ -10,7 +10,7 @@ import {
   keysOf,
 } from '../../../../../src';
 
-import { breakpoint as breakpoints } from '../../../../../src/themes/amsterdam/global_styling/variables/_breakpoint';
+import { breakpoint as breakpoints } from '@elastic/eui-theme-common';
 const breakpointKeys = keysOf(breakpoints);
 
 import { GuideSection } from '../../../components/guide_section/guide_section';
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 2984b503619..8a80deb1b04 100644
--- a/packages/eui/src/components/bottom_bar/bottom_bar.styles.ts
+++ b/packages/eui/src/components/bottom_bar/bottom_bar.styles.ts
@@ -7,9 +7,10 @@
  */
 
 import { css, keyframes } from '@emotion/react';
+import { euiShadowFlat } from '@elastic/eui-theme-common';
+
 import { euiCanAnimate } from '../../global_styling';
 import { UseEuiTheme } from '../../services';
-import { euiShadowFlat } from '../../themes/amsterdam/global_styling/mixins';
 
 const euiBottomBarAppear = keyframes`
   0% {
diff --git a/packages/eui/src/components/button/button_icon/button_icon.styles.ts b/packages/eui/src/components/button/button_icon/button_icon.styles.ts
index a8f38fc73cb..ea70ba73dd5 100644
--- a/packages/eui/src/components/button/button_icon/button_icon.styles.ts
+++ b/packages/eui/src/components/button/button_icon/button_icon.styles.ts
@@ -15,7 +15,7 @@ import {
   _EuiButtonColor,
   euiButtonEmptyColor,
   euiButtonSizeMap,
-} from '../../../themes/amsterdam/global_styling/mixins/button';
+} from '../../../global_styling/mixins/_button';
 
 import { euiButtonBaseCSS } from '../button_display/_button_display.styles';
 
diff --git a/packages/eui/src/components/date_picker/date_picker.styles.ts b/packages/eui/src/components/date_picker/date_picker.styles.ts
index 598a01615b5..8f44745b564 100644
--- a/packages/eui/src/components/date_picker/date_picker.styles.ts
+++ b/packages/eui/src/components/date_picker/date_picker.styles.ts
@@ -7,10 +7,10 @@
  */
 
 import { css } from '@emotion/react';
+import { euiShadowMedium } from '@elastic/eui-theme-common';
 
 import { UseEuiTheme } from '../../services';
 import { logicalCSS } from '../../global_styling';
-import { euiShadowMedium } from '../../themes/amsterdam/global_styling/mixins';
 import {
   euiFormControlDisabledStyles,
   euiFormControlReadOnlyStyles,
diff --git a/packages/eui/src/components/date_picker/date_picker_range.styles.ts b/packages/eui/src/components/date_picker/date_picker_range.styles.ts
index 49aec5e60d0..a8b910527b1 100644
--- a/packages/eui/src/components/date_picker/date_picker_range.styles.ts
+++ b/packages/eui/src/components/date_picker/date_picker_range.styles.ts
@@ -7,8 +7,9 @@
  */
 
 import { css } from '@emotion/react';
+import { euiShadowMedium } from '@elastic/eui-theme-common';
+
 import { logicalCSS } from '../../global_styling';
-import { euiShadowMedium } from '../../themes/amsterdam/global_styling/mixins';
 import { UseEuiTheme } from '../../services';
 
 export const euiDatePickerRangeStyles = {
diff --git a/packages/eui/src/components/date_picker/react_date_picker.styles.ts b/packages/eui/src/components/date_picker/react_date_picker.styles.ts
index 450d8d7e042..473eb27e338 100644
--- a/packages/eui/src/components/date_picker/react_date_picker.styles.ts
+++ b/packages/eui/src/components/date_picker/react_date_picker.styles.ts
@@ -8,6 +8,7 @@
 
 // Needs to use vanilla `css` to pass a className directly to react-datepicker
 import { css } from '@emotion/css';
+import { euiShadowSmall } from '@elastic/eui-theme-common';
 
 import { UseEuiTheme } from '../../services';
 import {
@@ -23,7 +24,6 @@ import {
   euiButtonEmptyColor,
   euiButtonFillColor,
 } from '../../global_styling/mixins';
-import { euiShadowSmall } from '../../themes/amsterdam/global_styling/mixins';
 import {
   euiFormControlStyles,
   euiFormControlText,
diff --git a/packages/eui/src/components/flyout/_flyout_close_button.styles.ts b/packages/eui/src/components/flyout/_flyout_close_button.styles.ts
index f2b4d58edbb..ff5d4f5c838 100644
--- a/packages/eui/src/components/flyout/_flyout_close_button.styles.ts
+++ b/packages/eui/src/components/flyout/_flyout_close_button.styles.ts
@@ -7,13 +7,13 @@
  */
 
 import { css } from '@emotion/react';
+import { euiShadowXLarge } from '@elastic/eui-theme-common';
 
 import {
   euiMaxBreakpoint,
   euiMinBreakpoint,
   logicalCSS,
 } from '../../global_styling';
-import { euiShadowXLarge } from '../../themes/amsterdam/global_styling/mixins';
 import { UseEuiTheme } from '../../services';
 
 import { FLYOUT_BREAKPOINT } from './flyout.styles';
diff --git a/packages/eui/src/components/flyout/flyout.styles.ts b/packages/eui/src/components/flyout/flyout.styles.ts
index b1865307a17..cf974962988 100644
--- a/packages/eui/src/components/flyout/flyout.styles.ts
+++ b/packages/eui/src/components/flyout/flyout.styles.ts
@@ -7,6 +7,8 @@
  */
 
 import { css, keyframes } from '@emotion/react';
+import { euiShadowXLarge } from '@elastic/eui-theme-common';
+
 import { _EuiFlyoutPaddingSize, EuiFlyoutSize } from './flyout';
 import {
   euiCanAnimate,
@@ -16,7 +18,6 @@ import {
   mathWithUnits,
 } from '../../global_styling';
 import { UseEuiTheme } from '../../services';
-import { euiShadowXLarge } from '../../themes/amsterdam/global_styling/mixins';
 import { euiFormMaxWidth } from '../form/form.styles';
 
 export const FLYOUT_BREAKPOINT = 'm' as const;
diff --git a/packages/eui/src/components/header/header.styles.ts b/packages/eui/src/components/header/header.styles.ts
index af0a854a804..4c1f3ed5c91 100644
--- a/packages/eui/src/components/header/header.styles.ts
+++ b/packages/eui/src/components/header/header.styles.ts
@@ -7,8 +7,8 @@
  */
 
 import { css } from '@emotion/react';
+import { euiShadowSmall } from '@elastic/eui-theme-common';
 
-import { euiShadowSmall } from '../../themes/amsterdam/global_styling/mixins';
 import { logicalCSS } from '../../global_styling';
 import { UseEuiTheme, makeHighContrastColor } from '../../services';
 
diff --git a/packages/eui/src/components/image/image.styles.ts b/packages/eui/src/components/image/image.styles.ts
index 0fd1c6e3d2a..58a1388fea5 100644
--- a/packages/eui/src/components/image/image.styles.ts
+++ b/packages/eui/src/components/image/image.styles.ts
@@ -7,9 +7,10 @@
  */
 
 import { css } from '@emotion/react';
+import { euiShadow } from '@elastic/eui-theme-common';
+
 import { logicalCSS } from '../../global_styling';
 import { UseEuiTheme } from '../../services';
-import { euiShadow } from '../../themes/amsterdam/global_styling/mixins';
 
 export const euiImageStyles = (euiThemeContext: UseEuiTheme) => ({
   euiImage: css`
diff --git a/packages/eui/src/components/image/image_button.styles.ts b/packages/eui/src/components/image/image_button.styles.ts
index 39bc625e6a4..bef44f3edd7 100644
--- a/packages/eui/src/components/image/image_button.styles.ts
+++ b/packages/eui/src/components/image/image_button.styles.ts
@@ -7,9 +7,10 @@
  */
 
 import { css } from '@emotion/react';
+import { euiShadow } from '@elastic/eui-theme-common';
+
 import { euiFocusRing, logicalCSS, euiCanAnimate } from '../../global_styling';
 import { UseEuiTheme } from '../../services';
-import { euiShadow } from '../../themes/amsterdam/global_styling/mixins';
 
 export const euiImageButtonStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
diff --git a/packages/eui/src/components/key_pad_menu/key_pad_menu_item.styles.ts b/packages/eui/src/components/key_pad_menu/key_pad_menu_item.styles.ts
index bce5c732d6b..71f2a26d3c2 100644
--- a/packages/eui/src/components/key_pad_menu/key_pad_menu_item.styles.ts
+++ b/packages/eui/src/components/key_pad_menu/key_pad_menu_item.styles.ts
@@ -7,6 +7,7 @@
  */
 
 import { css } from '@emotion/react';
+import { euiShadow } from '@elastic/eui-theme-common';
 
 import { UseEuiTheme } from '../../services';
 import {
@@ -15,7 +16,6 @@ import {
   euiCanAnimate,
   euiFontSize,
 } from '../../global_styling';
-import { euiShadow } from '../../themes/amsterdam/global_styling/mixins';
 import { euiScreenReaderOnly } from '../accessibility';
 
 import { euiKeyPadMenuVariables } from './key_pad_menu.styles';
diff --git a/packages/eui/src/components/modal/modal.styles.ts b/packages/eui/src/components/modal/modal.styles.ts
index fc7cf550a69..de16b51d36f 100644
--- a/packages/eui/src/components/modal/modal.styles.ts
+++ b/packages/eui/src/components/modal/modal.styles.ts
@@ -7,7 +7,8 @@
  */
 
 import { css } from '@emotion/react';
-import { euiShadowXLarge } from '../../themes/amsterdam/global_styling/mixins';
+import { euiShadowXLarge } from '@elastic/eui-theme-common';
+
 import {
   euiCanAnimate,
   euiMaxBreakpoint,
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 21647fcf20d..ed6cd40dde9 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
@@ -7,7 +7,8 @@
  */
 
 import { css } from '@emotion/react';
-import { euiShadow } from '../../../themes/amsterdam/global_styling/mixins';
+import { euiShadow } from '@elastic/eui-theme-common';
+
 import { logicalCSS } from '../../../global_styling';
 import { UseEuiTheme } from '../../../services';
 
diff --git a/packages/eui/src/components/panel/panel.styles.ts b/packages/eui/src/components/panel/panel.styles.ts
index 20825d0cbdc..5ea9d7d714c 100644
--- a/packages/eui/src/components/panel/panel.styles.ts
+++ b/packages/eui/src/components/panel/panel.styles.ts
@@ -7,7 +7,8 @@
  */
 
 import { css } from '@emotion/react';
-import { euiShadow } from '../../themes/amsterdam/global_styling/mixins';
+import { euiShadow } from '@elastic/eui-theme-common';
+
 import { UseEuiTheme } from '../../services';
 import {
   euiCanAnimate,
diff --git a/packages/eui/src/components/popover/popover_panel/_popover_panel.styles.ts b/packages/eui/src/components/popover/popover_panel/_popover_panel.styles.ts
index dff13599962..4fd5440d0d3 100644
--- a/packages/eui/src/components/popover/popover_panel/_popover_panel.styles.ts
+++ b/packages/eui/src/components/popover/popover_panel/_popover_panel.styles.ts
@@ -11,7 +11,8 @@ import {
   euiShadow,
   euiShadowFlat,
   euiShadowMedium,
-} from '../../../themes/amsterdam/global_styling/mixins';
+} from '@elastic/eui-theme-common';
+
 import { UseEuiTheme } from '../../../services';
 import {
   euiCanAnimate,
diff --git a/packages/eui/src/components/resizable_container/resizable_collapse_button.styles.ts b/packages/eui/src/components/resizable_container/resizable_collapse_button.styles.ts
index 4e13c65e6bf..ded187817b8 100644
--- a/packages/eui/src/components/resizable_container/resizable_collapse_button.styles.ts
+++ b/packages/eui/src/components/resizable_container/resizable_collapse_button.styles.ts
@@ -7,10 +7,13 @@
  */
 
 import { css } from '@emotion/react';
+import {
+  euiShadowXSmall,
+  euiSlightShadowHover,
+} from '@elastic/eui-theme-common';
 
 import { UseEuiTheme } from '../../services';
 import { logicalCSS, mathWithUnits } from '../../global_styling';
-import { euiShadowXSmall, euiSlightShadowHover } from '../../themes/amsterdam';
 
 export const euiResizableCollapseButtonStyles = (
   euiThemeContext: UseEuiTheme
diff --git a/packages/eui/src/components/table/table_row.styles.ts b/packages/eui/src/components/table/table_row.styles.ts
index 6160ec4bdc0..fb2fbe69ea1 100644
--- a/packages/eui/src/components/table/table_row.styles.ts
+++ b/packages/eui/src/components/table/table_row.styles.ts
@@ -7,10 +7,10 @@
  */
 
 import { css, keyframes } from '@emotion/react';
+import { euiShadow } from '@elastic/eui-theme-common';
 
 import { UseEuiTheme } from '../../services';
 import { euiCanAnimate, logicalCSS } from '../../global_styling';
-import { euiShadow } from '../../themes/amsterdam/global_styling/mixins';
 
 import { euiTableVariables } from './table.styles';
 
diff --git a/packages/eui/src/components/toast/toast.styles.ts b/packages/eui/src/components/toast/toast.styles.ts
index 2c735082170..55e5cf4dc27 100644
--- a/packages/eui/src/components/toast/toast.styles.ts
+++ b/packages/eui/src/components/toast/toast.styles.ts
@@ -7,9 +7,10 @@
  */
 
 import { css } from '@emotion/react';
+import { euiShadowLarge } from '@elastic/eui-theme-common';
+
 import { euiTextBreakWord, logicalCSS } from '../../global_styling';
 import { UseEuiTheme } from '../../services';
-import { euiShadowLarge } from '../../themes/amsterdam';
 import { euiTitle } from '../title/title.styles';
 
 export const euiToastStyles = (euiThemeContext: UseEuiTheme) => {
diff --git a/packages/eui/src/components/tool_tip/tool_tip.styles.ts b/packages/eui/src/components/tool_tip/tool_tip.styles.ts
index 56a8b2bc06f..95d805984a8 100644
--- a/packages/eui/src/components/tool_tip/tool_tip.styles.ts
+++ b/packages/eui/src/components/tool_tip/tool_tip.styles.ts
@@ -7,10 +7,11 @@
  */
 
 import { css, keyframes } from '@emotion/react';
+import { euiShadow } from '@elastic/eui-theme-common';
+
 import { logicalCSS, euiFontSize, euiCanAnimate } from '../../global_styling';
 import { UseEuiTheme } from '../../services';
 import { _popoverArrowStyles } from '../../services/popover';
-import { euiShadow } from '../../themes/amsterdam';
 
 export const euiToolTipBackgroundColor = (euiTheme: UseEuiTheme['euiTheme']) =>
   euiTheme.components.tooltipBackground;
diff --git a/packages/eui/src/global_styling/mixins/_shadow.ts b/packages/eui/src/global_styling/mixins/_shadow.ts
new file mode 100644
index 00000000000..16066952f6a
--- /dev/null
+++ b/packages/eui/src/global_styling/mixins/_shadow.ts
@@ -0,0 +1,59 @@
+/*
+ * 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 {
+  euiShadowFlat,
+  euiShadow,
+  euiSlightShadowHover,
+  euiShadowXSmall,
+  euiShadowSmall,
+  euiShadowMedium,
+  euiShadowLarge,
+  euiShadowXLarge,
+  type _EuiThemeShadowSize,
+  type _EuiThemeShadowCustomColor,
+} from '@elastic/eui-theme-common';
+
+import { useEuiTheme } from '../../services/theme';
+
+export {
+  euiShadowFlat,
+  euiShadow,
+  euiSlightShadowHover,
+  euiShadowXSmall,
+  euiShadowSmall,
+  euiShadowMedium,
+  euiShadowLarge,
+  euiShadowXLarge,
+};
+
+export interface EuiShadowCustomColor {
+  color?: string;
+}
+
+export const useEuiSlightShadowHover = (
+  color?: _EuiThemeShadowCustomColor['color']
+) => {
+  const euiThemeContext = useEuiTheme();
+  return euiSlightShadowHover(euiThemeContext, { color });
+};
+
+export const useEuiShadowFlat = (
+  color?: _EuiThemeShadowCustomColor['color']
+) => {
+  const euiThemeContext = useEuiTheme();
+  return euiShadowFlat(euiThemeContext, { color });
+};
+
+export const useEuiShadow = (
+  size: _EuiThemeShadowSize = 'l',
+  color?: _EuiThemeShadowCustomColor['color']
+) => {
+  const euiThemeContext = useEuiTheme();
+  return euiShadow(euiThemeContext, size, { color });
+};
diff --git a/packages/eui/src/global_styling/mixins/index.ts b/packages/eui/src/global_styling/mixins/index.ts
index 050ee2324ad..480fafd39f8 100644
--- a/packages/eui/src/global_styling/mixins/index.ts
+++ b/packages/eui/src/global_styling/mixins/index.ts
@@ -13,3 +13,4 @@ export * from './_states';
 export * from './_typography';
 export * from './_responsive';
 export * from './_button';
+export * from './_shadow';
diff --git a/packages/eui/src/global_styling/variables/_colors_vis.scss b/packages/eui/src/global_styling/variables/_colors_vis.scss
deleted file mode 100644
index 8b34cc14038..00000000000
--- a/packages/eui/src/global_styling/variables/_colors_vis.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-// Visualization colors
-
-@import '../../themes/amsterdam/global_styling/variables/colors_vis'
diff --git a/packages/eui/src/global_styling/variables/_index.scss b/packages/eui/src/global_styling/variables/_index.scss
index 993979a78a5..2397647bde9 100644
--- a/packages/eui/src/global_styling/variables/_index.scss
+++ b/packages/eui/src/global_styling/variables/_index.scss
@@ -9,7 +9,6 @@
 // Global colors are established and importer per theme, before this manifest
 // Import order is important. Size, vis colors, ...etc are used in other variables.
 @import 'size';
-@import 'colors_vis';
 @import 'animations';
 @import 'font_weight';
 @import 'typography';
diff --git a/packages/eui/src/services/breakpoint/current_breakpoint_hook.testenv.tsx b/packages/eui/src/services/breakpoint/current_breakpoint_hook.testenv.tsx
index 6d291fd8000..2f5484da9ad 100644
--- a/packages/eui/src/services/breakpoint/current_breakpoint_hook.testenv.tsx
+++ b/packages/eui/src/services/breakpoint/current_breakpoint_hook.testenv.tsx
@@ -7,9 +7,9 @@
  */
 
 import { useContext } from 'react';
+import { breakpoint as breakpoints } from '@elastic/eui-theme-common';
 
 import { keysOf } from '../../components/common';
-import { breakpoint as breakpoints } from '../../themes/amsterdam/global_styling/variables/_breakpoint';
 import { CurrentEuiBreakpointContext } from './current_breakpoint';
 
 /**
diff --git a/packages/eui/src/services/color/eui_palettes.test.ts b/packages/eui/src/services/color/eui_palettes.test.ts
index 4566ec8fc99..5e376a5d8f1 100644
--- a/packages/eui/src/services/color/eui_palettes.test.ts
+++ b/packages/eui/src/services/color/eui_palettes.test.ts
@@ -6,7 +6,8 @@
  * Side Public License, v 1.
  */
 
-import { colorVis } from '../../themes';
+import { renderHook } from '@testing-library/react';
+
 import {
   euiPaletteColorBlind,
   euiPaletteColorBlindBehindText,
@@ -21,6 +22,12 @@ import {
   euiPaletteRed,
   euiPaletteWarm,
 } from './eui_palettes';
+import { useEuiTheme } from '../theme';
+
+const colorVis = renderHook(() => {
+  const { euiTheme } = useEuiTheme();
+  return euiTheme.colors.vis;
+}).result.current;
 
 describe('euiPaletteColorBlind', () => {
   it('should return custom colors', () => {
diff --git a/packages/eui/src/services/theme/hooks.tsx b/packages/eui/src/services/theme/hooks.tsx
index bf87146612e..407f5d04240 100644
--- a/packages/eui/src/services/theme/hooks.tsx
+++ b/packages/eui/src/services/theme/hooks.tsx
@@ -7,6 +7,11 @@
  */
 
 import React, { forwardRef, useContext, useMemo } from 'react';
+import type {
+  EuiThemeColorModeStandard,
+  EuiThemeModifications,
+  EuiThemeComputed,
+} from '@elastic/eui-theme-common';
 
 import {
   EuiThemeContext,
@@ -16,11 +21,6 @@ import {
   EuiNestedThemeContext,
 } from './context';
 import { emitEuiProviderWarning } from './warning';
-import {
-  EuiThemeColorModeStandard,
-  EuiThemeModifications,
-  EuiThemeComputed,
-} from './types';
 
 const providerMessage = `\`EuiProvider\` is missing which can result in negative effects.
 Wrap your component in \`EuiProvider\`: https://ela.st/euiprovider.`;
@@ -28,6 +28,7 @@ Wrap your component in \`EuiProvider\`: https://ela.st/euiprovider.`;
 /**
  * Hook for function components
  */
+
 export interface UseEuiTheme<T extends {} = {}> {
   euiTheme: EuiThemeComputed<T>;
   colorMode: EuiThemeColorModeStandard;
diff --git a/packages/eui/src/themes/amsterdam/global_styling/functions/shadows.ts b/packages/eui/src/themes/amsterdam/global_styling/functions/shadows.ts
index 00349a07209..157ce7f57bd 100644
--- a/packages/eui/src/themes/amsterdam/global_styling/functions/shadows.ts
+++ b/packages/eui/src/themes/amsterdam/global_styling/functions/shadows.ts
@@ -6,21 +6,4 @@
  * Side Public License, v 1.
  */
 
-import chroma from 'chroma-js';
-import {
-  COLOR_MODES_STANDARD,
-  EuiThemeColorModeStandard,
-} from '../../../../services/theme/types';
-
-// Create a CSS color value using whose opacity is determined based
-// on either a light or dark theme. We use a multiplier
-// of 1 for light themes and 2.5 for dark themes
-export const getShadowColor = (
-  color: string,
-  opacity: number,
-  colorMode: EuiThemeColorModeStandard
-) => {
-  const themeOpacity =
-    colorMode === COLOR_MODES_STANDARD.dark ? opacity * 3.5 : opacity * 1;
-  return chroma(color).alpha(themeOpacity).css();
-};
+export { getShadowColor } from '@elastic/eui-theme-common';
diff --git a/packages/eui/src/themes/amsterdam/global_styling/mixins/shadow.ts b/packages/eui/src/themes/amsterdam/global_styling/mixins/shadow.ts
index 21a2360c96e..2f40036f905 100644
--- a/packages/eui/src/themes/amsterdam/global_styling/mixins/shadow.ts
+++ b/packages/eui/src/themes/amsterdam/global_styling/mixins/shadow.ts
@@ -6,185 +6,4 @@
  * Side Public License, v 1.
  */
 
-import { useEuiTheme, UseEuiTheme } from '../../../../services/theme';
-import { getShadowColor } from '../functions';
-import {
-  _EuiThemeShadowSize,
-  _EuiThemeShadowCustomColor,
-} from '../../../../global_styling/variables/shadow';
-
-export interface EuiShadowCustomColor {
-  color?: string;
-}
-
-/**
- * euiSlightShadow
- */
-export const euiShadowXSmall = (
-  { euiTheme, colorMode }: UseEuiTheme,
-  { color: _color }: _EuiThemeShadowCustomColor = {}
-) => {
-  const color = _color || euiTheme.colors.shadow;
-  return `
-box-shadow:
-  0 .8px .8px ${getShadowColor(color, 0.04, colorMode)},
-  0 2.3px 2px ${getShadowColor(color, 0.03, colorMode)};
-`;
-};
-
-/**
- * bottomShadowSmall
- */
-export const euiShadowSmall = (
-  { euiTheme, colorMode }: UseEuiTheme,
-  { color: _color }: _EuiThemeShadowCustomColor = {}
-) => {
-  const color = _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)};
-`;
-};
-
-/**
- * bottomShadowMedium
- */
-export const euiShadowMedium = (
-  { euiTheme, colorMode }: UseEuiTheme,
-  { color: _color, property }: _EuiThemeShadowCustomColor = {}
-) => {
-  const color = _color || euiTheme.colors.shadow;
-
-  if (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)};`;
-  }
-};
-
-/**
- * bottomShadow
- */
-export const euiShadowLarge = (
-  { euiTheme, colorMode }: UseEuiTheme,
-  { color: _color }: _EuiThemeShadowCustomColor = {}
-) => {
-  const color = _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)};
-`;
-};
-
-/**
- * bottomShadowLarge
- */
-export interface EuiShadowXLarge extends _EuiThemeShadowCustomColor {
-  reverse?: boolean;
-}
-export const euiShadowXLarge = (
-  { euiTheme, colorMode }: UseEuiTheme,
-  { color: _color, reverse }: EuiShadowXLarge = {}
-) => {
-  const color = _color || euiTheme.colors.shadow;
-  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)};
-`;
-};
-
-/**
- * slightShadowHover
- */
-export const euiSlightShadowHover = (
-  { euiTheme, colorMode }: UseEuiTheme,
-  { color: _color }: _EuiThemeShadowCustomColor = {}
-) => {
-  const color = _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)};
-`;
-};
-export const useEuiSlightShadowHover = (
-  color?: _EuiThemeShadowCustomColor['color']
-) => {
-  const euiThemeContext = useEuiTheme();
-  return euiSlightShadowHover(euiThemeContext, { color });
-};
-
-/**
- * bottomShadowFlat
- *
- * Similar to shadow medium but without the bottom depth.
- * Useful for popovers that drop UP rather than DOWN.
- */
-export const euiShadowFlat = (
-  { euiTheme, colorMode }: UseEuiTheme,
-  { color: _color }: _EuiThemeShadowCustomColor = {}
-) => {
-  const color = _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)};
-`;
-};
-export const useEuiShadowFlat = (
-  color?: _EuiThemeShadowCustomColor['color']
-) => {
-  const euiThemeContext = useEuiTheme();
-  return euiShadowFlat(euiThemeContext, { color });
-};
-
-export const euiShadow = (
-  euiThemeContext: UseEuiTheme,
-  size: _EuiThemeShadowSize = 'l',
-  { color }: _EuiThemeShadowCustomColor = {}
-) => {
-  switch (size) {
-    case 'xs':
-      return euiShadowXSmall(euiThemeContext, { color });
-    case 's':
-      return euiShadowSmall(euiThemeContext, { color });
-    case 'm':
-      return euiShadowMedium(euiThemeContext, { color });
-    case 'l':
-      return euiShadowLarge(euiThemeContext, { color });
-    case 'xl':
-      return euiShadowXLarge(euiThemeContext, { color });
-
-    default:
-      console.warn('Please provide a valid size option to useEuiShadow');
-      return '';
-  }
-};
-
-export const useEuiShadow = (
-  size: _EuiThemeShadowSize = 'l',
-  color?: _EuiThemeShadowCustomColor['color']
-) => {
-  const euiThemeContext = useEuiTheme();
-  return euiShadow(euiThemeContext, size, { color });
-};
+export * from '../../../../global_styling/mixins/_shadow';
diff --git a/packages/eui/src/themes/amsterdam/global_styling/variables/_breakpoint.ts b/packages/eui/src/themes/amsterdam/global_styling/variables/_breakpoint.ts
index 97d59266d5a..206a40c02bd 100644
--- a/packages/eui/src/themes/amsterdam/global_styling/variables/_breakpoint.ts
+++ b/packages/eui/src/themes/amsterdam/global_styling/variables/_breakpoint.ts
@@ -6,12 +6,4 @@
  * Side Public License, v 1.
  */
 
-import { _EuiThemeBreakpoints } from '../../../../global_styling/variables';
-
-export const breakpoint: _EuiThemeBreakpoints = {
-  xl: 1200,
-  l: 992,
-  m: 768,
-  s: 575,
-  xs: 0,
-};
+export { breakpoint } from '@elastic/eui-theme-common';
diff --git a/yarn.lock b/yarn.lock
index 819ac807fdc..d441c65ecd1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4694,6 +4694,7 @@ __metadata:
     "@babel/preset-react": "npm:^7.18.6"
     "@babel/preset-typescript": "npm:^7.21.5"
     "@emotion/react": "npm:^11.11.0"
+    "@types/chroma-js": "npm:^2.4.0"
     "@types/jest": "npm:^29.5.12"
     "@types/lodash": "npm:^4.14.202"
     "@types/prettier": "npm:2.7.3"
@@ -4701,6 +4702,7 @@ __metadata:
     "@types/react-dom": "npm:^16.9 || ^17.0 || ^18.0"
     "@typescript-eslint/eslint-plugin": "npm:^5.59.7"
     "@typescript-eslint/parser": "npm:^5.59.7"
+    chroma-js: "npm:^2.4.2"
     eslint: "npm:^8.41.0"
     eslint-config-prettier: "npm:^8.8.0"
     eslint-plugin-import: "npm:^2.27.5"