From 6aa30bfba301f87de5ee3fb371bdc5c4b7bb32fd Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Tue, 1 Aug 2023 13:41:02 -0400
Subject: [PATCH 1/4] Adjust units and style

---
 packages/components/src/snackbar/style.scss | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/components/src/snackbar/style.scss b/packages/components/src/snackbar/style.scss
index 9e9acebb635bf..75d844d659a5d 100644
--- a/packages/components/src/snackbar/style.scss
+++ b/packages/components/src/snackbar/style.scss
@@ -1,11 +1,13 @@
 .components-snackbar {
 	font-family: $default-font;
 	font-size: $default-font-size;
+	background: rgba($black, 0.85);
 	background-color: $gray-900;
+	backdrop-filter: blur($grid-unit-20) saturate(180%);
 	border-radius: $radius-block-ui;
-	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+	box-shadow: $shadow-popover;
 	color: $white;
-	padding: 16px 24px;
+	padding: $grid-unit-15 ($grid-unit-05 * 5);
 	width: 100%;
 	max-width: 600px;
 	box-sizing: border-box;
@@ -20,9 +22,7 @@
 	}
 
 	&:focus {
-		box-shadow:
-			0 0 0 1px $white,
-			0 0 0 3px $components-color-accent;
+		box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
 	}
 
 	&.components-snackbar-explicit-dismiss {
@@ -30,7 +30,7 @@
 	}
 
 	.components-snackbar__content-with-icon {
-		margin-left: 24px;
+		margin-left: $grid-unit-30;
 	}
 
 	.components-snackbar__icon {
@@ -40,7 +40,7 @@
 	}
 
 	.components-snackbar__dismiss-button {
-		margin-left: 32px;
+		margin-left: $grid-unit-30;
 		cursor: pointer;
 	}
 }
@@ -91,5 +91,5 @@
 
 .components-snackbar-list__notice-container {
 	position: relative;
-	padding-top: 8px;
+	padding-top: $grid-unit-10;
 }

From 1e7eec995b04306b69b713d046463a89cb585d45 Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Tue, 1 Aug 2023 13:41:23 -0400
Subject: [PATCH 2/4] Tweak motion

---
 packages/components/src/snackbar/list.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/snackbar/list.tsx b/packages/components/src/snackbar/list.tsx
index ebd1fca2518f5..631cf48d953a2 100644
--- a/packages/components/src/snackbar/list.tsx
+++ b/packages/components/src/snackbar/list.tsx
@@ -29,13 +29,21 @@ const SNACKBAR_VARIANTS = {
 		height: 'auto',
 		opacity: 1,
 		transition: {
-			height: { stiffness: 1000, velocity: -100 },
+			height: { type: 'tween', duration: 0.3, ease: [ 0, 0, 0.2, 1 ] },
+			opacity: {
+				type: 'tween',
+				duration: 0.25,
+				delay: 0.05,
+				ease: [ 0, 0, 0.2, 1 ],
+			},
 		},
 	},
 	exit: {
 		opacity: 0,
 		transition: {
-			duration: 0.5,
+			type: 'tween',
+			duration: 0.1,
+			ease: [ 0, 0, 0.2, 1 ],
 		},
 	},
 };

From 9830c505bdd4abab2f19886b360e4fb9d98d294d Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Tue, 1 Aug 2023 14:01:03 -0400
Subject: [PATCH 3/4] Remove background-color

---
 packages/components/src/snackbar/style.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/components/src/snackbar/style.scss b/packages/components/src/snackbar/style.scss
index 75d844d659a5d..3cae9c8ef65d4 100644
--- a/packages/components/src/snackbar/style.scss
+++ b/packages/components/src/snackbar/style.scss
@@ -1,8 +1,7 @@
 .components-snackbar {
 	font-family: $default-font;
 	font-size: $default-font-size;
-	background: rgba($black, 0.85);
-	background-color: $gray-900;
+	background: rgba($black, 0.85); // Emulates #1e1e1e closely.
 	backdrop-filter: blur($grid-unit-20) saturate(180%);
 	border-radius: $radius-block-ui;
 	box-shadow: $shadow-popover;

From 059fbfebaef27fa7890aa2e1e6a3d3e0340b02fa Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Wed, 9 Aug 2023 16:31:08 -0400
Subject: [PATCH 4/4] Update CHANGELOG.md

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

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 4b482a4b3b4c8..800189e259aac 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -8,6 +8,7 @@
 -   `ProgressBar`: Use the theme system accent for indicator color ([#53347](https://github.com/WordPress/gutenberg/pull/53347)).
 -   `ProgressBar`: Use gray 300 for track color ([#53349](https://github.com/WordPress/gutenberg/pull/53349)).
 -   `Modal`: add `headerActions` prop to render buttons in the header. ([#53328](https://github.com/WordPress/gutenberg/pull/53328)).
+-   `Snackbar`: Snackbar design and motion improvements ([#53248](https://github.com/WordPress/gutenberg/pull/53248))
 
 ### Bug Fix