Guard placeholder glow/wave animations behind prefers-reduced-motion

Author: julien-deramond

scss/_placeholder.scss

@@ -1,4 +1,5 @@
 @use "colors" as *;
+@use "config" as *;
 @use "functions" as *;
 @use "mixins/tokens" as *;
 
@@ -49,6 +50,12 @@ $placeholder-tokens: defaults(
   .placeholder-glow {
     .placeholder {
       animation: placeholder-glow 2s ease-in-out infinite;
+
+      @if $enable-reduced-motion {
+        @media (prefers-reduced-motion: reduce) {
+          animation: none;
+        }
+      }
     }
   }
 
@@ -62,6 +69,12 @@ $placeholder-tokens: defaults(
     mask-image: linear-gradient(130deg, $black 55%, rgb(0 0 0 / calc(1 - var(--placeholder-opacity-min))) 75%, $black 95%);
     mask-size: 200% 100%;
     animation: placeholder-wave 2s linear infinite;
+
+    @if $enable-reduced-motion {
+      @media (prefers-reduced-motion: reduce) {
+        animation: none;
+      }
+    }
   }
 
   @keyframes placeholder-wave {