From ed909ddd00a481a797091d0d55c2e48eb8e4f180 Mon Sep 17 00:00:00 2001
From: himanshupathak95 <himanshu.pathak@rtcamp.com>
Date: Tue, 31 Dec 2024 09:58:24 +0530
Subject: [PATCH 1/2] Editor: Standardize reduced motion handling using media
 queries

---
 packages/editor/src/components/document-bar/style.scss      | 6 ++++--
 packages/editor/src/components/document-tools/style.scss    | 5 +++--
 .../editor/src/components/post-featured-image/style.scss    | 5 ++++-
 .../editor/src/components/post-publish-panel/style.scss     | 6 ++++--
 packages/editor/src/components/post-text-editor/style.scss  | 6 ++++--
 5 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/packages/editor/src/components/document-bar/style.scss b/packages/editor/src/components/document-bar/style.scss
index 749da6ec8c983..4b84d8b44d39f 100644
--- a/packages/editor/src/components/document-bar/style.scss
+++ b/packages/editor/src/components/document-bar/style.scss
@@ -18,8 +18,10 @@
 
 	.components-button {
 		border-radius: $grid-unit-05;
-		transition: all 0.1s ease-out;
-		@include reduce-motion("transition");
+
+		@media not (prefers-reduced-motion) {
+			transition: all 0.1s ease-out;
+		}
 
 		&:hover {
 			background: $gray-200;
diff --git a/packages/editor/src/components/document-tools/style.scss b/packages/editor/src/components/document-tools/style.scss
index dfafff2126d66..7f70d02a6eaca 100644
--- a/packages/editor/src/components/document-tools/style.scss
+++ b/packages/editor/src/components/document-tools/style.scss
@@ -16,8 +16,9 @@
 		display: inline-flex;
 
 		svg {
-			transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
-			@include reduce-motion("transition");
+			@media not (prefers-reduced-motion) {
+				transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
+			}
 		}
 
 		&.is-pressed {
diff --git a/packages/editor/src/components/post-featured-image/style.scss b/packages/editor/src/components/post-featured-image/style.scss
index bf9433faa662d..423c535d07ad0 100644
--- a/packages/editor/src/components/post-featured-image/style.scss
+++ b/packages/editor/src/components/post-featured-image/style.scss
@@ -83,7 +83,10 @@
 		opacity: 0; // Use opacity instead of visibility so that the buttons remain in the tab order.
 		padding: $grid-unit-10;
 		position: absolute;
-		transition: opacity 50ms ease-out;
+
+		@media not (prefers-reduced-motion) {
+			transition: opacity 50ms ease-out;
+		}
 
 		.editor-post-featured-image__action {
 			backdrop-filter: blur(16px) saturate(180%);
diff --git a/packages/editor/src/components/post-publish-panel/style.scss b/packages/editor/src/components/post-publish-panel/style.scss
index 7b07571765178..36e6fa16dfe00 100644
--- a/packages/editor/src/components/post-publish-panel/style.scss
+++ b/packages/editor/src/components/post-publish-panel/style.scss
@@ -211,8 +211,10 @@
 		width: $sidebar-width + $border-width;
 		border-left: $border-width solid $gray-300;
 		transform: translateX(+100%);
-		animation: editor-post-publish-panel__slide-in-animation 0.1s forwards;
-		@include reduce-motion("animation");
+
+		@media not (prefers-reduced-motion) {
+			animation: editor-post-publish-panel__slide-in-animation 0.1s forwards;
+		}
 
 		body.is-fullscreen-mode & {
 			top: 0;
diff --git a/packages/editor/src/components/post-text-editor/style.scss b/packages/editor/src/components/post-text-editor/style.scss
index f3b9b65007df7..5391588d906d8 100644
--- a/packages/editor/src/components/post-text-editor/style.scss
+++ b/packages/editor/src/components/post-text-editor/style.scss
@@ -10,8 +10,10 @@ textarea.editor-post-text-editor {
 	font-family: $editor-html-font;
 	line-height: 2.4;
 	min-height: 200px;
-	transition: border 0.1s ease-out, box-shadow 0.1s linear;
-	@include reduce-motion("transition");
+
+	@media not (prefers-reduced-motion) {
+		transition: border 0.1s ease-out, box-shadow 0.1s linear;
+	}
 
 	// Same padding as title.
 	padding: $grid-unit-20;

From 55d06fa79b6b6496f88aa07af6a7a58d3dd4a380 Mon Sep 17 00:00:00 2001
From: himanshupathak95 <himanshu.pathak@rtcamp.com>
Date: Tue, 14 Jan 2025 15:13:12 +0530
Subject: [PATCH 2/2] Remove redundant mixin

---
 packages/editor/src/components/post-featured-image/style.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/editor/src/components/post-featured-image/style.scss b/packages/editor/src/components/post-featured-image/style.scss
index 423c535d07ad0..cca45c61adaf8 100644
--- a/packages/editor/src/components/post-featured-image/style.scss
+++ b/packages/editor/src/components/post-featured-image/style.scss
@@ -78,7 +78,6 @@
 
 .editor-post-featured-image__actions {
 	&:not(.editor-post-featured-image__actions-missing-image) {
-		@include reduce-motion("transition");
 		bottom: 0;
 		opacity: 0; // Use opacity instead of visibility so that the buttons remain in the tab order.
 		padding: $grid-unit-10;