From 744c26119123536968f8250d34e5c082ea77656e Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Thu, 10 Aug 2023 15:55:19 -0400
Subject: [PATCH] Snackbar design and motion improvements (#53248)

* Adjust units and style

* Tweak motion

* Remove background-color

* Update CHANGELOG.md
---
 packages/components/CHANGELOG.md            |  1 +
 packages/components/src/snackbar/list.tsx   | 12 ++++++++++--
 packages/components/src/snackbar/style.scss | 17 ++++++++---------
 3 files changed, 19 insertions(+), 11 deletions(-)

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
 
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 ],
 		},
 	},
 };
diff --git a/packages/components/src/snackbar/style.scss b/packages/components/src/snackbar/style.scss
index 9e9acebb635bf..3cae9c8ef65d4 100644
--- a/packages/components/src/snackbar/style.scss
+++ b/packages/components/src/snackbar/style.scss
@@ -1,11 +1,12 @@
 .components-snackbar {
 	font-family: $default-font;
 	font-size: $default-font-size;
-	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: 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 +21,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 +29,7 @@
 	}
 
 	.components-snackbar__content-with-icon {
-		margin-left: 24px;
+		margin-left: $grid-unit-30;
 	}
 
 	.components-snackbar__icon {
@@ -40,7 +39,7 @@
 	}
 
 	.components-snackbar__dismiss-button {
-		margin-left: 32px;
+		margin-left: $grid-unit-30;
 		cursor: pointer;
 	}
 }
@@ -91,5 +90,5 @@
 
 .components-snackbar-list__notice-container {
 	position: relative;
-	padding-top: 8px;
+	padding-top: $grid-unit-10;
 }