Apply elevation scale to: Modal, Popover, and Snackbar components (#6…

…4655) Co-authored-by: jameskoster <[email protected]> Co-authored-by: ciampo <[email protected]>
WordPress · Aug 21, 2024 · c47491a · c47491a
1 parent e6ecb4d
commit c47491a
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 3 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -57,6 +57,9 @@
 -   `UnitControl`: Adopt radius scale ([#64368](https://github.com/WordPress/gutenberg/pull/64368)).
 -   `Popover`: allow `style` prop usage ([#64489](https://github.com/WordPress/gutenberg/pull/64489)).
 -   `ToolsPanel`: sets column-gap to 16px for ToolsPanel grid ([#64497](https://github.com/WordPress/gutenberg/pull/64497)).
+-   `Modal`: Replace references to deprecated styling variables ([#64655](https://github.com/WordPress/gutenberg/pull/64655)).
+-   `Popover`: Replace references to deprecated styling variables ([#64655](https://github.com/WordPress/gutenberg/pull/64655)).
+-   `Snackbar`: Replace references to deprecated styling variables ([#64655](https://github.com/WordPress/gutenberg/pull/64655)).
 -   `TextareaControl`: Update styles ([#64586](https://github.com/WordPress/gutenberg/pull/64586)).
 
 ### Bug Fixes

diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss
@@ -20,7 +20,7 @@
 	margin: $grid-unit-50 0 0 0;
 	width: 100%;
 	background: $white;
-	box-shadow: $shadow-modal;
+	box-shadow: $elevation-large;
 	border-radius: $radius-large $radius-large 0 0;
 	overflow: hidden;
 	// Have the content element fill the vertical space yet not overflow.

diff --git 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, $shadow-popover;
+	box-shadow: $shadow-popover-border-default, $elevation-x-small;
 	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
@@ -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: $shadow-popover;
+	box-shadow: $elevation-x-small;
 	color: $white;
 	padding: $grid-unit-15 ($grid-unit-05 * 5);
 	width: 100%;