Edit Post and Base Styles: Standardize reduced motion handling using …

…media queries (#68427) Co-authored-by: Infinite-Null <[email protected]> Co-authored-by: t-hamano <[email protected]>
WordPress · Jan 3, 2025 · 19043c9 · 19043c9
1 parent 78e961d
commit 19043c9
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 12 deletions.
diff --git a/packages/base-styles/_animations.scss b/packages/base-styles/_animations.scss
@@ -14,10 +14,10 @@
 		}
 	}
 
-
-	animation: __wp-base-styles-fade-in $speed $easing $delay;
-	animation-fill-mode: forwards;
-	@include reduce-motion("animation");
+	@media not (prefers-reduced-motion) {
+		animation: __wp-base-styles-fade-in $speed $easing $delay;
+		animation-fill-mode: forwards;
+	}
 }
 
 @mixin animation__fade-out($speed: 0.08s, $delay: 0s, $easing: linear) {
@@ -30,10 +30,10 @@
 		}
 	}
 
-
-	animation: __wp-base-styles-fade-out $speed $easing $delay;
-	animation-fill-mode: forwards;
-	@include reduce-motion("animation");
+	@media not (prefers-reduced-motion) {
+		animation: __wp-base-styles-fade-out $speed $easing $delay;
+		animation-fill-mode: forwards;
+	}
 }
 
 // Deprecated

diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
@@ -141,10 +141,13 @@
 // Tabs, Inputs, Square buttons.
 @mixin input-style__neutral() {
 	box-shadow: 0 0 0 transparent;
-	transition: box-shadow 0.1s linear;
+
+	@media not (prefers-reduced-motion) {
+		transition: box-shadow 0.1s linear;
+	}
+
 	border-radius: $radius-small;
 	border: $border-width solid $gray-600;
-	@include reduce-motion("transition");
 }
 
 

diff --git a/packages/edit-widgets/src/components/header/style.scss b/packages/edit-widgets/src/components/header/style.scss
@@ -147,8 +147,9 @@
 	}
 
 	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 {