Editor: Standardize reduced motion handling using media queries (#68424)

* Editor: Standardize reduced motion handling using media queries

* Remove redundant mixin

* Editor: Fix Post Publish Panel animation sliding in reduced motion mode

Co-authored-by: himanshupathak95 <abcd95@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>

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;

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 {

packages/editor/src/components/post-featured-image/style.scss

@@ -78,12 +78,14 @@
 
 .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;
 		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%);

packages/editor/src/components/post-publish-panel/style.scss

@@ -210,9 +210,11 @@
 		left: auto;
 		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) {
+			transform: translateX(+100%);
+			animation: editor-post-publish-panel__slide-in-animation 0.1s forwards;
+		}
 
 		body.is-fullscreen-mode & {
 			top: 0;

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;