wip

src/stories/Button.tsx

@@ -36,12 +36,54 @@ export const Button = ({
 }: ButtonProps) => {
   console.log()
   const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+
+  const hasRuleWithMedia = (sheet: CSSStyleSheet): boolean => {
+    const rules = Array.from(sheet?.cssRules);
+    // @ts-expect-error 
+    return rules.some(r => r?.media);
+  }
+
+  const handleClick = () => {
+    const allSheets = Array.from(document.styleSheets);
+    const sheetsWithMedia = allSheets.filter(hasRuleWithMedia);
+
+    // Extract media objects from each stylesheet with media rules
+    const medias: MediaList[] = sheetsWithMedia.flatMap(sheet => {
+      return Array.from(
+        sheet.cssRules,
+        // @ts-expect-error 
+    rule => rule.type === CSSRule.MEDIA_RULE ? rule.media : undefined
+  );
+}).filter(Boolean);
+
+
+    const toggleMotionMedia = () => {
+      const reduced: MediaList[] = [];
+      const safed: MediaList[] = [];
+
+      medias.forEach(m => {
+        if (m.mediaText === '(prefers-reduced-motion: no-preference)') {
+            safed.push(m);
+          } else if (m.mediaText === '(prefers-reduced-motion: reduce)') {
+          reduced.push(m);
+        }
+      });
+
+      safed.forEach(m => {
+        m.mediaText = '(prefers-reduced-motion: reduce)'
+      });
+      reduced.forEach(m => {
+        m.mediaText = '(prefers-reduced-motion: no-preference)'
+      });
+    }
+    toggleMotionMedia();
+  }
   return (
     <button
+      onClick={handleClick}
       type="button"
-      className={['motion-safe:bg-red-600', 'motion-reduce:bg-blue-600', 'storybook-button', `storybook-button--${size}`, mode].join(' ')}
+      className={['motion-safe:animate-pulse', 'storybook-button', `storybook-button--${size}`, mode].join(' ')}
       style={{ backgroundColor }}
-      {...props}
     >
       {label}
     </button>

src/stories/button.css

@@ -44,3 +44,15 @@
   font-size: 16px;
   padding: 12px 24px;
 }
+@media (prefers-reduced-motion: no-preference) {
+  @keyframes pulse {
+    50% {
+      opacity: .5;
+    }
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .motion-safe\:animate-pulse {
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+}