design-lint refuses an animation or transition with no reduced-motion answer #12441

bun scripts/design-lint.ts now fails any animation or transition longer than 100 ms that has no reduced-motion answer in its sheet, and prints the selector. The new test, the existing design-lint tests, tsc and bun scripts/gate.ts pass. I did not take the before/after look on an animated page the issue asks for.

What changed

• Lint: the check is in the new src/design/motion.ts and is wired into scripts/design-lint.ts as scanMotion.
• Sheets: it runs per /* css */ template, because each page's template is its own sheet. It is a flat refusal, not a ratchet against the baseline.
• What counts as an answer: a @media (prefers-reduced-motion: reduce) rule that turns it off. That can be a * rule shortening the durations, or the same selector with animation/transition: none. Motion declared inside (prefers-reduced-motion: no-preference) is also accepted, since it only plays when asked.
• Existing sheets: src/web/style/content.ts had three transitions and a pulse animation without an answer. I added the shared , ::before, *::after block to its existing reduced-motion block, and it now passes.
• Tests: test/design-lint-motion.test.ts covers a failing sheet, a passing sheet, a transition not covered by an animation-only answer, the 100 ms boundary, no-preference, and that the whole tree passes.
• Docs: the motion bullet in docs/design/sections/4-space-radius-motion.md now states the rule. I put it there rather than in docs/DESIGN.md, which only links to that section.

Not done

• No src/web/forge.css: it doesn't exist; styles live in src/web/style/*.ts.
• Selector matching is textual: a reduced-motion rule matches by exact selector text or a bare *, not by CSS specificity. Longhands like transition-duration count, but animation-delay is not checked.

Try it: run bun scripts/design-lint.ts, then add transition: color 150ms to a rule in src/web/style/content.ts and run it again.

The gate now passes locally. The check should pass on this push, but I haven't seen the forge's verdict yet.

• Comment lines: I rewrapped the two over-long comments in src/design/motion.ts, at lines 15 and 44.
• Looks: the gate also wanted a before/after look for the src/web/style/content.ts change. I added a Looks: / line to the commit message. I'm not sure / is the page that shows the changed rules, so please check the before/after pictures.

Still unchanged from the earlier push:

• scripts/design-lint.ts fails a transition or animation over 100 ms that has no reduced-motion answer in its sheet, and it names the selector.
• src/web/style/content.ts has the shared reduced-motion block.
• test/design-lint-motion.test.ts passes (7 tests).

design-lint now refuses an animation or transition over 100ms in a sheet unless a reduce rule in that sheet turns it off or it sits inside no-preference. This round fixes two of the three requested items; the before/after look is still missing. I did not take it because this sandbox has no browser.

What changed

• Reduce vs no-preference: src/design/motion.ts now tracks the media mode as "", "reduce" or "no-preference". Only reduce rules go into the list that can answer, and only no-preference rules are exempt. A new test shows .a { transition: opacity 200ms } still fails when the only other rule is .a { transition: none } inside no-preference.
• Infinite animations: the shared reduced-motion block in src/web/style/content.ts now has animation-iteration-count: 1 !important. A test pins it.
• Docs: the sentence in docs/design/sections/4-space-radius-motion.md now reads "refused unless a reduce rule in the sheet turns it off, or it sits inside (prefers-reduced-motion: no-preference)".
• Stray blank line: removed from the end of src/design/motion.ts.
• Slow test: the scanMotion(".") test is gone. A new test runs scanMotion on a temporary fixture tree with one failing and one passing sheet, and checks the output names src/web/a.ts: .x. The whole-tree check is still done by bun scripts/design-lint.ts, which I ran and which is clean.

Checks: bun scripts/gate.ts printed nothing and bun x tsc --noEmit was clean. The motion tests and components-reduced-motion.test.ts pass, 12 tests in all.

Before/after look, not done: to take it, load a page that runs a content.ts transition, such as the .ex-dir chevron or the code-layout split handle. Capture it with and without reduced motion, and without and with the lint, in a browser. The preview is at https://lab--12441--forge-trevato-apps.open-platform.sh. I did not substitute a Looks: line in a commit message, since that is a guess, not a look.

bun scripts/design-lint.ts now refuses any animation or transition over 100ms in a src/web stylesheet, naming its selector, unless a @media (prefers-reduced-motion: reduce) rule in the same sheet turns it off, or the rule sits inside (prefers-reduced-motion: no-preference).

The check lives in src/design/motion.ts and runs as part of design-lint. Rules inside reduce and no-preference blocks are tracked separately: only a reduce rule can turn motion off, and only a no-preference block exempts it. A reduce rule counts if it targets the same selector, or if it is a universal * rule that shortens every duration to 100ms or less.

In src/web/style/content.ts, the shared reduced-motion block now also sets animation-iteration-count: 1 !important, so an infinite animation stops instead of flickering at .01ms.

docs/design/sections/4-space-radius-motion.md states the rule. It also says what the lint does not check: it reads the animation/transition shorthands and their -duration longhands, but not the animation-delay or transition-delay longhands.

Tests are in test/design-lint-motion.test.ts:

• slow motion with no answer fails, in ms or in seconds;
• a shared universal block passes;
• a matching selector answers and a different one does not;
• a no-preference rule cannot answer for a selector;
• scanMotion runs against a small fixture tree, which keeps the test fast;
• the shared block keeps the iteration-count line.

bun scripts/gate.ts, bun x tsc --noEmit, bun scripts/design-lint.ts and these tests pass.

This push re-triggers the preview, which is where the forge takes the phone and desktop looks of / to sit beside main's. The sandbox has no browser, so the forge's looks are the only before/after; none were taken by hand.

To try it: add transition: color 150ms to any rule in src/web/style/content.ts that the shared block does not cover, then run bun scripts/design-lint.ts. It prints that selector.

🤖 Generated with Claude Code