From 6c3b9ccc0e9e6c0c1e0febd8a821d6ce9279eb69 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Mon, 9 Sep 2024 14:44:07 +0100
Subject: [PATCH 1/8] Apply elevation scale to various components

---
 packages/components/src/custom-select-control-v2/styles.ts | 1 +
 packages/components/src/dropdown-menu-v2/styles.ts         | 2 +-
 packages/components/src/popover/style.scss                 | 2 +-
 packages/components/src/snackbar/style.scss                | 2 +-
 packages/components/src/tooltip/style.scss                 | 1 +
 5 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/custom-select-control-v2/styles.ts b/packages/components/src/custom-select-control-v2/styles.ts
index c82d6eba2e1a7..2b8bdb9946b7c 100644
--- a/packages/components/src/custom-select-control-v2/styles.ts
+++ b/packages/components/src/custom-select-control-v2/styles.ts
@@ -120,6 +120,7 @@ export const SelectPopover = styled( Ariakit.SelectPopover )`
 	background-color: ${ COLORS.theme.background };
 	border-radius: ${ CONFIG.radiusSmall };
 	border: 1px solid ${ COLORS.theme.foreground };
+	box-shadow: ${ CONFIG.elevationMedium };
 
 	/* z-index(".components-popover") */
 	z-index: 1000000;
diff --git a/packages/components/src/dropdown-menu-v2/styles.ts b/packages/components/src/dropdown-menu-v2/styles.ts
index 55020fbcd4135..b25613e9feb52 100644
--- a/packages/components/src/dropdown-menu-v2/styles.ts
+++ b/packages/components/src/dropdown-menu-v2/styles.ts
@@ -37,7 +37,7 @@ const DIVIDER_COLOR = COLORS.theme.gray[ 200 ];
 const LIGHTER_TEXT_COLOR = COLORS.theme.gray[ 700 ];
 const LIGHT_BACKGROUND_COLOR = COLORS.theme.gray[ 100 ];
 const TOOLBAR_VARIANT_BORDER_COLOR = COLORS.theme.foreground;
-const DEFAULT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ DEFAULT_BORDER_COLOR }, ${ CONFIG.elevationXSmall }`;
+const DEFAULT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ DEFAULT_BORDER_COLOR }, ${ CONFIG.elevationMedium }`;
 const TOOLBAR_VARIANT_BOX_SHADOW = `0 0 0 ${ CONFIG.borderWidth } ${ TOOLBAR_VARIANT_BORDER_COLOR }`;
 
 const GRID_TEMPLATE_COLS = 'minmax( 0, max-content ) 1fr';
diff --git a/packages/components/src/popover/style.scss b/packages/components/src/popover/style.scss
index 01b0eb9116142..c079901aa94d4 100644
--- a/packages/components/src/popover/style.scss
+++ b/packages/components/src/popover/style.scss
@@ -22,7 +22,7 @@ $shadow-popover-border-top-only-alternate: 0 #{-$border-width} 0 $gray-900;
 
 .components-popover__content {
 	background: $white;
-	box-shadow: $shadow-popover-border-default, $elevation-x-small;
+	box-shadow: $shadow-popover-border-default, $elevation-medium;
 	border-radius: $radius-medium;
 	box-sizing: border-box;
 	width: min-content;
diff --git a/packages/components/src/snackbar/style.scss b/packages/components/src/snackbar/style.scss
index e7f29267d6f6d..1e76a1666411e 100644
--- a/packages/components/src/snackbar/style.scss
+++ b/packages/components/src/snackbar/style.scss
@@ -4,7 +4,7 @@
 	background: rgba($black, 0.85); // Emulates #1e1e1e closely.
 	backdrop-filter: blur($grid-unit-20) saturate(180%);
 	border-radius: $radius-medium;
-	box-shadow: $elevation-x-small;
+	box-shadow: $elevation-small;
 	color: $white;
 	padding: $grid-unit-15 ($grid-unit-05 * 5);
 	width: 100%;
diff --git a/packages/components/src/tooltip/style.scss b/packages/components/src/tooltip/style.scss
index eaac8b3ad1c7f..e84946e4a9176 100644
--- a/packages/components/src/tooltip/style.scss
+++ b/packages/components/src/tooltip/style.scss
@@ -8,6 +8,7 @@
 	font-size: 12px;
 	padding: $grid-unit-05 $grid-unit-10;
 	z-index: z-index(".components-tooltip");
+	box-shadow: $elevation-small;
 }
 
 .components-tooltip__shortcut {

From 488c9b340b0c17ba7cdbef28e0405b58e37c11db Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Mon, 9 Sep 2024 16:08:37 +0100
Subject: [PATCH 2/8] Handles

---
 packages/components/src/form-toggle/style.scss                  | 1 +
 .../components/src/range-control/styles/range-control-styles.ts | 1 +
 packages/components/src/resizable-box/style.scss                | 2 +-
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/form-toggle/style.scss b/packages/components/src/form-toggle/style.scss
index dd7888403b34d..900874b59004b 100644
--- a/packages/components/src/form-toggle/style.scss
+++ b/packages/components/src/form-toggle/style.scss
@@ -60,6 +60,7 @@ $transition-duration: 0.2s;
 			$transition-duration background-color ease-out;
 		@include reduce-motion("transition");
 		background-color: $gray-900;
+		box-shadow: $elevation-x-small;
 
 		// Transparent border acts as a fill in Windows High Contrast Mode.
 		border: math.div($toggle-thumb-size, 2) solid transparent;
diff --git a/packages/components/src/range-control/styles/range-control-styles.ts b/packages/components/src/range-control/styles/range-control-styles.ts
index e2b651bd317da..dae1d0de3ddb6 100644
--- a/packages/components/src/range-control/styles/range-control-styles.ts
+++ b/packages/components/src/range-control/styles/range-control-styles.ts
@@ -239,6 +239,7 @@ export const Thumb = styled.span< ThumbProps >`
 	position: absolute;
 	user-select: none;
 	width: 100%;
+	box-shadow: ${ CONFIG.elevationXSmall };
 
 	${ thumbColor };
 	${ thumbFocus };
diff --git a/packages/components/src/resizable-box/style.scss b/packages/components/src/resizable-box/style.scss
index 2e709a5bbb382..3c9efd2713646 100644
--- a/packages/components/src/resizable-box/style.scss
+++ b/packages/components/src/resizable-box/style.scss
@@ -35,7 +35,7 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M
 	top: calc(50% - #{ceil($resize-handler-size * 0.5)});
 	right: calc(50% - #{ceil($resize-handler-size * 0.5)});
 
-	box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
+	box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent, $elevation-x-small;
 	// Only visible in Windows High Contrast mode.
 	outline: 2px solid transparent;
 }

From 248f1e6c75fa5e32bec08d1bcc5a5c011eee9c1f Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Tue, 10 Sep 2024 18:30:49 +0100
Subject: [PATCH 3/8] Update elevation styles

---
 packages/base-styles/_variables.scss           | 8 ++++----
 packages/components/src/utils/config-values.js | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
index 0f0c9e6d019ba..88635170ff866 100644
--- a/packages/base-styles/_variables.scss
+++ b/packages/base-styles/_variables.scss
@@ -55,16 +55,16 @@ $radius-round: 50%;     // For circles and ovals.
  */
 
 // For sections and containers that group related content and controls, which may overlap other content. Example: Preview Frame.
-$elevation-x-small: 0 0.7px 1px rgba($black, 0.1), 0 1.2px 1.7px -0.2px rgba($black, 0.1), 0 2.3px 3.3px -0.5px rgba($black, 0.1);
+$elevation-x-small: 0 1px 1px rgba($black, 0.05), 0 2px 2px rgba($black, 0.04), 0 5px 3px rgba($black, 0.03), 0 8px 3px rgba($black, 0.01);
 
 // For components that provide contextual feedback without being intrusive. Generally non-interruptive. Example: Tooltips, Snackbar.
-$elevation-small: 0 0.7px 1px 0 rgba(0, 0, 0, 0.12), 0 2.2px 3.7px -0.2px rgba(0, 0, 0, 0.12), 0 5.3px 7.3px -0.5px rgba(0, 0, 0, 0.12);
+$elevation-small: 0 1px 2px 0 rgba($black, 0.05), 0 4px 4px rgba($black, 0.04), 0 10px 6px rgba($black, 0.03), 0 10px 7px rgba($black, 0.01);
 
 // For components that offer additional actions. Example: Menus, Command Palette
-$elevation-medium: 0 0.7px 1px 0 rgba(0, 0, 0, 0.14), 0 4.2px 5.7px -0.2px rgba(0, 0, 0, 0.14), 0 7.3px 9.3px -0.5px rgba(0, 0, 0, 0.14);
+$elevation-medium: 0 2px 3px 0 rgba($black, 0.1), 0 6px 6px rgba($black, 0.09), 0 14px 8px rgba($black, 0.05), 0 25px 10px rgba($black, 0.01);
 
 // For components that confirm decisions or handle necessary interruptions. Example: Modals.
-$elevation-large: 0 0.7px 1px rgba($black, 0.15), 0 2.7px 3.8px -0.2px rgba($black, 0.15), 0 5.5px 7.8px -0.3px rgba($black, 0.15), 0.1px 11.5px 16.4px -0.5px rgba($black, 0.15);
+$elevation-large: 0 7px 15px rgba($black, 0.1), 0 27px 27px rgba($black, 0.09), 0 61px 36px rgba($black, 0.05), 0 108px 43px rgba($black, 0.01);
 
 /**
  * Dimensions.
diff --git a/packages/components/src/utils/config-values.js b/packages/components/src/utils/config-values.js
index f76c1291a8b31..b3a6da39ea54d 100644
--- a/packages/components/src/utils/config-values.js
+++ b/packages/components/src/utils/config-values.js
@@ -73,10 +73,10 @@ export default Object.assign( {}, CONTROL_PROPS, TOGGLE_GROUP_CONTROL_PROPS, {
 	cardPaddingSmall: `${ space( 4 ) }`,
 	cardPaddingMedium: `${ space( 4 ) } ${ space( 6 ) }`,
 	cardPaddingLarge: `${ space( 6 ) } ${ space( 8 ) }`,
-	elevationXSmall: `0 0.7px 1px rgba(0, 0, 0, 0.1), 0 1.2px 1.7px -0.2px rgba(0, 0, 0, 0.1), 0 2.3px 3.3px -0.5px rgba(0, 0, 0, 0.1)`,
-	elevationSmall: `0 0.7px 1px 0 rgba(0, 0, 0, 0.12), 0 2.2px 3.7px -0.2px rgba(0, 0, 0, 0.12), 0 5.3px 7.3px -0.5px rgba(0, 0, 0, 0.12)`,
-	elevationMedium: `0 0.7px 1px 0 rgba(0, 0, 0, 0.14), 0 4.2px 5.7px -0.2px rgba(0, 0, 0, 0.14), 0 7.3px 9.3px -0.5px rgba(0, 0, 0, 0.14)`,
-	elevationLarge: `0 0.7px 1px rgba(0, 0, 0, 0.15), 0 2.7px 3.8px -0.2px rgba(0, 0, 0, 0.15), 0 5.5px 7.8px -0.3px rgba(0, 0, 0, 0.15), 0.1px 11.5px 16.4px -0.5px rgba(0, 0, 0, 0.15)`,
+	elevationXSmall: `0 1px 1px rgba(0, 0, 0, 0.05), 0 2px 2px rgba(0, 0, 0, 0.04), 0 5px 3px rgba(0, 0, 0, 0.03), 0 8px 3px rgba(0, 0, 0, 0.01)`,
+	elevationSmall: `0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 4px 4px rgba(0, 0, 0, 0.04), 0 10px 6px rgba(0, 0, 0, 0.03), 0 10px 7px rgba(0, 0, 0, 0.01)`,
+	elevationMedium: `0 2px 3px 0 rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.09), 0 14px 8px rgba(0, 0, 0, 0.05), 0 25px 10px rgba(0, 0, 0, 0.01)`,
+	elevationLarge: `0 7px 15px rgba(0, 0, 0, 0.10), 0 27px 27px rgba(0, 0, 0, 0.09), 0 61px 36px rgba(0, 0, 0, 0.05), 0 108px 43px rgba(0, 0, 0, 0.01)`,
 	surfaceBackgroundColor: COLORS.white,
 	surfaceBackgroundSubtleColor: '#F3F3F3',
 	surfaceBackgroundTintColor: '#F5F5F5',

From 2b1e4d070bc821c18d4c6681a94a48c5b2cb19c4 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Thu, 12 Sep 2024 16:41:14 +0100
Subject: [PATCH 4/8] Changelog

---
 packages/components/CHANGELOG.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index a04f7e3f276b9..21e28abba8033 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -19,6 +19,14 @@
 
 -   `Navigator`: warn if a screen's `path` doesn't follow a URL-like scheme ([#65231](https://github.com/WordPress/gutenberg/pull/65231)).
 -   `Modal`: Decrease close button size and remove horizontal offset ([#65131](https://github.com/WordPress/gutenberg/pull/65131)).
+-   `CustomSelectControl V2`: Adopt elevation scale ([#65159](https://github.com/WordPress/gutenberg/pull/65159)).
+-   `DropdownMenu V2`: Adopt elevation scale ([#65159](https://github.com/WordPress/gutenberg/pull/65159)).
+-   `FormToggle`: Adopt elevation scale ([#65159](https://github.com/WordPress/gutenberg/pull/65159)).
+-   `Popover`: Adopt elevation scale ([#65159](https://github.com/WordPress/gutenberg/pull/65159)).
+-   `RangeControl`: Adopt elevation scale ([#65159](https://github.com/WordPress/gutenberg/pull/65159)).
+-   `ResizeableBox`: Adopt elevation scale ([#65159](https://github.com/WordPress/gutenberg/pull/65159)).
+-   `Snackbar`: Adopt elevation scale ([#65159](https://github.com/WordPress/gutenberg/pull/65159)).
+-   `Tooltip`: Adopt elevation scale ([#65159](https://github.com/WordPress/gutenberg/pull/65159)).
 
 ### Bug Fixes
 

From 4843dff1ef34c1623f696e7f8abfd9b69ef7f66d Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Fri, 13 Sep 2024 16:46:50 +0100
Subject: [PATCH 5/8] Adjust shadows

---
 packages/base-styles/_variables.scss           | 8 ++++----
 packages/components/src/utils/config-values.js | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
index 88635170ff866..34ccda4bc5189 100644
--- a/packages/base-styles/_variables.scss
+++ b/packages/base-styles/_variables.scss
@@ -55,16 +55,16 @@ $radius-round: 50%;     // For circles and ovals.
  */
 
 // For sections and containers that group related content and controls, which may overlap other content. Example: Preview Frame.
-$elevation-x-small: 0 1px 1px rgba($black, 0.05), 0 2px 2px rgba($black, 0.04), 0 5px 3px rgba($black, 0.03), 0 8px 3px rgba($black, 0.01);
+$elevation-x-small: 0 1px 1px rgba(0,0,0, 0.03), 0 1px 2px rgba(0,0,0, 0.02), 0 3px 3px rgba(0,0,0, 0.02), 0 4px 4px rgba(0,0,0, 0.01);
 
 // For components that provide contextual feedback without being intrusive. Generally non-interruptive. Example: Tooltips, Snackbar.
-$elevation-small: 0 1px 2px 0 rgba($black, 0.05), 0 4px 4px rgba($black, 0.04), 0 10px 6px rgba($black, 0.03), 0 10px 7px rgba($black, 0.01);
+$elevation-small: 0 1px 2px rgba(0,0,0, 0.05), 0 2px 3px rgba(0,0,0, 0.04), 0 6px 6px rgba(0,0,0, 0.03), 0 8px 8px rgba(0,0,0, 0.02);
 
 // For components that offer additional actions. Example: Menus, Command Palette
-$elevation-medium: 0 2px 3px 0 rgba($black, 0.1), 0 6px 6px rgba($black, 0.09), 0 14px 8px rgba($black, 0.05), 0 25px 10px rgba($black, 0.01);
+$elevation-medium: 0 2px 3px rgba(0,0,0, 0.05), 0 4px 5px rgba(0,0,0, 0.04), 0 12px 12px rgba(0,0,0, 0.03), 0 16px 16px rgba(0,0,0, 0.02);
 
 // For components that confirm decisions or handle necessary interruptions. Example: Modals.
-$elevation-large: 0 7px 15px rgba($black, 0.1), 0 27px 27px rgba($black, 0.09), 0 61px 36px rgba($black, 0.05), 0 108px 43px rgba($black, 0.01);
+$elevation-large: 0 5px 15px rgba(0,0,0, 0.08), 0 15px 27px rgba(0,0,0, 0.07), 0 30px 36px rgba(0,0,0, 0.04), 0 50px 43px rgba(0,0,0, 0.02);
 
 /**
  * Dimensions.
diff --git a/packages/components/src/utils/config-values.js b/packages/components/src/utils/config-values.js
index b3a6da39ea54d..c09e81f96bf9d 100644
--- a/packages/components/src/utils/config-values.js
+++ b/packages/components/src/utils/config-values.js
@@ -73,10 +73,10 @@ export default Object.assign( {}, CONTROL_PROPS, TOGGLE_GROUP_CONTROL_PROPS, {
 	cardPaddingSmall: `${ space( 4 ) }`,
 	cardPaddingMedium: `${ space( 4 ) } ${ space( 6 ) }`,
 	cardPaddingLarge: `${ space( 6 ) } ${ space( 8 ) }`,
-	elevationXSmall: `0 1px 1px rgba(0, 0, 0, 0.05), 0 2px 2px rgba(0, 0, 0, 0.04), 0 5px 3px rgba(0, 0, 0, 0.03), 0 8px 3px rgba(0, 0, 0, 0.01)`,
-	elevationSmall: `0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 4px 4px rgba(0, 0, 0, 0.04), 0 10px 6px rgba(0, 0, 0, 0.03), 0 10px 7px rgba(0, 0, 0, 0.01)`,
-	elevationMedium: `0 2px 3px 0 rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.09), 0 14px 8px rgba(0, 0, 0, 0.05), 0 25px 10px rgba(0, 0, 0, 0.01)`,
-	elevationLarge: `0 7px 15px rgba(0, 0, 0, 0.10), 0 27px 27px rgba(0, 0, 0, 0.09), 0 61px 36px rgba(0, 0, 0, 0.05), 0 108px 43px rgba(0, 0, 0, 0.01)`,
+	elevationXSmall: `0 1px 1px rgba(0,0,0, 0.03), 0 1px 2px rgba(0,0,0, 0.02), 0 3px 3px rgba(0,0,0, 0.02), 0 4px 4px rgba(0,0,0, 0.01)`,
+	elevationSmall: `0 1px 2px rgba(0,0,0, 0.04), 0 2px 3px rgba(0,0,0, 0.03), 0 6px 6px rgba(0,0,0, 0.02), 0 8px 8px rgba(0,0,0, 0.01)`,
+	elevationMedium: `0 2px 3px rgba(0,0,0, 0.05), 0 4px 5px rgba(0,0,0, 0.04), 0 12px 12px rgba(0,0,0, 0.03), 0 16px 16px rgba(0,0,0, 0.02)`,
+	elevationLarge: `0 5px 15px rgba(0,0,0, 0.08), 0 15px 27px rgba(0,0,0, 0.07), 0 30px 36px rgba(0,0,0, 0.04), 0 50px 43px rgba(0,0,0, 0.02)`,
 	surfaceBackgroundColor: COLORS.white,
 	surfaceBackgroundSubtleColor: '#F3F3F3',
 	surfaceBackgroundTintColor: '#F5F5F5',

From a0998a40e6d96a9c95c9fd37d414d242d290cbdf Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Fri, 13 Sep 2024 16:47:33 +0100
Subject: [PATCH 6/8] Sync

---
 packages/components/src/utils/config-values.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/utils/config-values.js b/packages/components/src/utils/config-values.js
index c09e81f96bf9d..f39b7069ba29d 100644
--- a/packages/components/src/utils/config-values.js
+++ b/packages/components/src/utils/config-values.js
@@ -74,7 +74,7 @@ export default Object.assign( {}, CONTROL_PROPS, TOGGLE_GROUP_CONTROL_PROPS, {
 	cardPaddingMedium: `${ space( 4 ) } ${ space( 6 ) }`,
 	cardPaddingLarge: `${ space( 6 ) } ${ space( 8 ) }`,
 	elevationXSmall: `0 1px 1px rgba(0,0,0, 0.03), 0 1px 2px rgba(0,0,0, 0.02), 0 3px 3px rgba(0,0,0, 0.02), 0 4px 4px rgba(0,0,0, 0.01)`,
-	elevationSmall: `0 1px 2px rgba(0,0,0, 0.04), 0 2px 3px rgba(0,0,0, 0.03), 0 6px 6px rgba(0,0,0, 0.02), 0 8px 8px rgba(0,0,0, 0.01)`,
+	elevationSmall: `0 1px 2px rgba(0,0,0, 0.05), 0 2px 3px rgba(0,0,0, 0.04), 0 6px 6px rgba(0,0,0, 0.03), 0 8px 8px rgba(0,0,0, 0.02)`,
 	elevationMedium: `0 2px 3px rgba(0,0,0, 0.05), 0 4px 5px rgba(0,0,0, 0.04), 0 12px 12px rgba(0,0,0, 0.03), 0 16px 16px rgba(0,0,0, 0.02)`,
 	elevationLarge: `0 5px 15px rgba(0,0,0, 0.08), 0 15px 27px rgba(0,0,0, 0.07), 0 30px 36px rgba(0,0,0, 0.04), 0 50px 43px rgba(0,0,0, 0.02)`,
 	surfaceBackgroundColor: COLORS.white,

From 07ac834bc489c019028265a222db375f428137b0 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Mon, 16 Sep 2024 19:59:41 +0100
Subject: [PATCH 7/8] Linting

---
 packages/base-styles/_variables.scss           | 8 ++++----
 packages/components/src/utils/config-values.js | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
index 34ccda4bc5189..abd98cb0d1b95 100644
--- a/packages/base-styles/_variables.scss
+++ b/packages/base-styles/_variables.scss
@@ -55,16 +55,16 @@ $radius-round: 50%;     // For circles and ovals.
  */
 
 // For sections and containers that group related content and controls, which may overlap other content. Example: Preview Frame.
-$elevation-x-small: 0 1px 1px rgba(0,0,0, 0.03), 0 1px 2px rgba(0,0,0, 0.02), 0 3px 3px rgba(0,0,0, 0.02), 0 4px 4px rgba(0,0,0, 0.01);
+$elevation-x-small: 0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01);
 
 // For components that provide contextual feedback without being intrusive. Generally non-interruptive. Example: Tooltips, Snackbar.
-$elevation-small: 0 1px 2px rgba(0,0,0, 0.05), 0 2px 3px rgba(0,0,0, 0.04), 0 6px 6px rgba(0,0,0, 0.03), 0 8px 8px rgba(0,0,0, 0.02);
+$elevation-small: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02);
 
 // For components that offer additional actions. Example: Menus, Command Palette
-$elevation-medium: 0 2px 3px rgba(0,0,0, 0.05), 0 4px 5px rgba(0,0,0, 0.04), 0 12px 12px rgba(0,0,0, 0.03), 0 16px 16px rgba(0,0,0, 0.02);
+$elevation-medium: 0 2px 3px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.04), 0 12px 12px rgba(0, 0, 0, 0.03), 0 16px 16px rgba(0, 0, 0, 0.02);
 
 // For components that confirm decisions or handle necessary interruptions. Example: Modals.
-$elevation-large: 0 5px 15px rgba(0,0,0, 0.08), 0 15px 27px rgba(0,0,0, 0.07), 0 30px 36px rgba(0,0,0, 0.04), 0 50px 43px rgba(0,0,0, 0.02);
+$elevation-large: 0 5px 15px rgba(0, 0, 0, 0.08), 0 15px 27px rgba(0, 0, 0, 0.07), 0 30px 36px rgba(0, 0, 0, 0.04), 0 50px 43px rgba(0, 0, 0, 0.02);
 
 /**
  * Dimensions.
diff --git a/packages/components/src/utils/config-values.js b/packages/components/src/utils/config-values.js
index f39b7069ba29d..dbe13e8ca0649 100644
--- a/packages/components/src/utils/config-values.js
+++ b/packages/components/src/utils/config-values.js
@@ -73,10 +73,10 @@ export default Object.assign( {}, CONTROL_PROPS, TOGGLE_GROUP_CONTROL_PROPS, {
 	cardPaddingSmall: `${ space( 4 ) }`,
 	cardPaddingMedium: `${ space( 4 ) } ${ space( 6 ) }`,
 	cardPaddingLarge: `${ space( 6 ) } ${ space( 8 ) }`,
-	elevationXSmall: `0 1px 1px rgba(0,0,0, 0.03), 0 1px 2px rgba(0,0,0, 0.02), 0 3px 3px rgba(0,0,0, 0.02), 0 4px 4px rgba(0,0,0, 0.01)`,
-	elevationSmall: `0 1px 2px rgba(0,0,0, 0.05), 0 2px 3px rgba(0,0,0, 0.04), 0 6px 6px rgba(0,0,0, 0.03), 0 8px 8px rgba(0,0,0, 0.02)`,
-	elevationMedium: `0 2px 3px rgba(0,0,0, 0.05), 0 4px 5px rgba(0,0,0, 0.04), 0 12px 12px rgba(0,0,0, 0.03), 0 16px 16px rgba(0,0,0, 0.02)`,
-	elevationLarge: `0 5px 15px rgba(0,0,0, 0.08), 0 15px 27px rgba(0,0,0, 0.07), 0 30px 36px rgba(0,0,0, 0.04), 0 50px 43px rgba(0,0,0, 0.02)`,
+	elevationXSmall: `0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01)`,
+	elevationSmall: `0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02)`,
+	elevationMedium: `0 2px 3px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.04), 0 12px 12px rgba(0, 0, 0, 0.03), 0 16px 16px rgba(0, 0, 0, 0.02)`,
+	elevationLarge: `0 5px 15px rgba(0, 0, 0, 0.08), 0 15px 27px rgba(0, 0, 0, 0.07), 0 30px 36px rgba(0, 0, 0, 0.04), 0 50px 43px rgba(0, 0, 0, 0.02)`,
 	surfaceBackgroundColor: COLORS.white,
 	surfaceBackgroundSubtleColor: '#F3F3F3',
 	surfaceBackgroundTintColor: '#F5F5F5',

From a9f097ca86e72dca9f32dd8b7a4910954ad2521d Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Tue, 17 Sep 2024 09:42:56 +0100
Subject: [PATCH 8/8] Use

---
 packages/base-styles/_variables.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
index abd98cb0d1b95..35092033c552b 100644
--- a/packages/base-styles/_variables.scss
+++ b/packages/base-styles/_variables.scss
@@ -55,16 +55,16 @@ $radius-round: 50%;     // For circles and ovals.
  */
 
 // For sections and containers that group related content and controls, which may overlap other content. Example: Preview Frame.
-$elevation-x-small: 0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01);
+$elevation-x-small: 0 1px 1px rgba($black, 0.03), 0 1px 2px rgba($black, 0.02), 0 3px 3px rgba($black, 0.02), 0 4px 4px rgba($black, 0.01);
 
 // For components that provide contextual feedback without being intrusive. Generally non-interruptive. Example: Tooltips, Snackbar.
-$elevation-small: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.04), 0 6px 6px rgba(0, 0, 0, 0.03), 0 8px 8px rgba(0, 0, 0, 0.02);
+$elevation-small: 0 1px 2px rgba($black, 0.05), 0 2px 3px rgba($black, 0.04), 0 6px 6px rgba($black, 0.03), 0 8px 8px rgba($black, 0.02);
 
 // For components that offer additional actions. Example: Menus, Command Palette
-$elevation-medium: 0 2px 3px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.04), 0 12px 12px rgba(0, 0, 0, 0.03), 0 16px 16px rgba(0, 0, 0, 0.02);
+$elevation-medium: 0 2px 3px rgba($black, 0.05), 0 4px 5px rgba($black, 0.04), 0 12px 12px rgba($black, 0.03), 0 16px 16px rgba($black, 0.02);
 
 // For components that confirm decisions or handle necessary interruptions. Example: Modals.
-$elevation-large: 0 5px 15px rgba(0, 0, 0, 0.08), 0 15px 27px rgba(0, 0, 0, 0.07), 0 30px 36px rgba(0, 0, 0, 0.04), 0 50px 43px rgba(0, 0, 0, 0.02);
+$elevation-large: 0 5px 15px rgba($black, 0.08), 0 15px 27px rgba($black, 0.07), 0 30px 36px rgba($black, 0.04), 0 50px 43px rgba($black, 0.02);
 
 /**
  * Dimensions.