Fix bug where checkboxes were broken with prefers-reduced-motion (#3152)

primer · Oct 15, 2024 · 3611f9c · 3611f9c
1 parent cc1ce7a
commit 3611f9c
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 8 deletions.
diff --git a/.changeset/tough-actors-wait.md b/.changeset/tough-actors-wait.md
@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Fix bug where checkboxes were broken with prefers-reduced-motion
diff --git a/app/components/primer/alpha/text_field.pcss b/app/components/primer/alpha/text_field.pcss
@@ -609,10 +609,7 @@ input[type='checkbox'].FormControl-checkbox {
     mask-size: 75%;
     mask-repeat: no-repeat;
     mask-position: center;
-
-    @media screen and (prefers-reduced-motion: no-preference) {
-      animation: checkmarkOut 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards; /* slightly snappier animation out */
-    }
+    animation: checkmarkOut 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards; /* slightly snappier animation out */
   }
 
   /* extend touch target */
@@ -637,10 +634,7 @@ input[type='checkbox'].FormControl-checkbox {
     &::before {
       visibility: visible;
       transition: visibility 0s linear 0s;
-
-      @media screen and (prefers-reduced-motion: no-preference) {
-        animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;
-      }
+      animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;
     }
 
     &:disabled {