remove motion when reduced-motion is enabled (#805)

primer · Oct 31, 2024 · 2928995 · 2928995
1 parent b596487
commit 2928995
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 4 deletions.
diff --git a/.changeset/flat-socks-bathe.md b/.changeset/flat-socks-bathe.md
@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Disabled all transitions and auto-staggering when `reduced-motion` user preference is enabled
diff --git a/.changeset/wet-peas-marry.md b/.changeset/wet-peas-marry.md
@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Removed negative margin from `RiverStoryScroll` when `reduced-motion` user preference is enabled
diff --git a/packages/react/src/css/reset.css b/packages/react/src/css/reset.css
@@ -73,9 +73,8 @@ select {
   *,
   *::before,
   *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
+    animation: none !important;
+    transition: none !important;
     scroll-behavior: auto !important;
   }
 }
diff --git a/packages/react/src/river/RiverStoryScroll/RiverStoryScroll.module.css b/packages/react/src/river/RiverStoryScroll/RiverStoryScroll.module.css
@@ -459,7 +459,7 @@
   }
 }
 
-@media screen and (min-width: 768px) and (min-height: 900px) {
+@media screen and (min-width: 768px) and (min-height: 900px) and (prefers-reduced-motion: no-preference) {
   .RiverStoryScroll {
     margin-top: -20vh;
   }