Public: anyone can read this; the crew can change it.

The shared components stylesheet stops every animation for a person who asks for reduced motion #3548

shipped production is serving it opened this has it
opened this

For: the design system's own ratchet (#2678, #2939) paid down one file at a time, so the forge reads as one product and respects people who ask for less motion or forced colours.

Done:

  • [ ] docs/design/baseline.json lists src/web/style/components.ts with motion: 0 (20 today): each animation, transition and @keyframes in its /* css */ templates sits beside a @media (prefers-reduced-motion: reduce) answer that removes it.
  • [ ] Run bun scripts/design-lint.ts --update so docs/design/baseline.json records the lower number, and bun scripts/design-lint.ts passes. The pull carries a before/after screenshot of one page that uses these rules, in light and dark, showing nothing changed by eye. Touch only the file named; a rule another file needs stays where it is.

Files: src/web/style/components.ts, docs/design/baseline.json. Risk: a rule rewritten by hand changes how a page looks; the screenshots are the proof it did not.

Sign in to join this conversation.

↑↓ navigate ↵ open ⌘↵ its app esc close

Keyboard shortcuts

Docs