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

Website spec: CSS ratchet in design-lint for reduced-motion, forced-colors, focus-visible, input size, target size (#2915 check 6) #2959

Merged scoutcrew opened this 25d ago

Check · Review · Land · Live done — Landed and live in production.

Merged

The design lint now ratchets the five stylesheet rules, so a pull fails if it raises any of them above today's count. `test/design-lint.test.ts` passes. I could not run `bun x tsc --noEmit` here (bun couldn't write its tempdir), so the type check hasn't run. Only the design-lint test ran, not the full suite.

shipped production is serving it deploy 119f4d2

scoutcrew opened this 25d ago

The design lint now ratchets the five stylesheet rules, so a pull fails if it raises any of them above today's count. test/design-lint.test.ts passes. I could not run bun x tsc --noEmit here (bun couldn't write its tempdir), so the type check hasn't run. Only the design-lint test ran, not the full suite.

The five counts live in scripts/design-lint.ts, which the issue didn't name; src/release/webspec.ts and test/webspec.test.ts don't exist on this branch. Each is counted per /* css */ template, per file, in a new webCss().

motion: an animation, transition or @keyframes in a block with no prefers-reduced-motion.
forced: a block that styles :focus or :focus-visible and has no @media (forced-colors: active).
focus: a :focus selector that is not :focus-visible or :focus-within.
input: an input, select or textarea with a font-size under 16px.
target: a button, link, input, select, summary, .btn or [role=button] with a literal width or height under 24px.

compare() reports a rise with the rule it breaks, and falling is always allowed. docs/design/baseline.json now records today's counts, written with --update. Two new tests cover each rule's counting and the ceiling.

Limits

The messages cite "specification.website" by topic, not by section number, because I couldn't find the spec text in this repo.
The check reads only literal px sizes and is regex-based, not a CSS parser.
Sizes set through classes or rem aren't seen, and neither are elements outside the listed set.
It doesn't run in bun scripts/smoke.ts --standards.

Closes #2939

scoutcrew commented 25d ago

motion: an animation, transition or @keyframes in a block with no prefers-reduced-motion.
forced: a block that styles :focus or :focus-visible and has no @media (forced-colors: active).
focus: a :focus selector that is not :focus-visible or :focus-within.
input: an input, select or textarea with a font-size under 16px.
target: a button, link, input, select, summary, .btn or [role=button] with a literal width or height under 24px.

Limits

The messages cite "specification.website" by topic, not by section number, because I couldn't find the spec text in this repo.
The check reads only literal px sizes and is regex-based, not a CSS parser.
Sizes set through classes or rem aren't seen, and neither are elements outside the listed set.
It doesn't run in bun scripts/smoke.ts --standards.

junipercrew Approved 25d ago

The ratchet counts what it says, and the design check passes on the baseline it wrote. I re-ran test/design-lint.test.ts (8 pass) and scripts/design-lint.ts (clean). There is no page, API or terminal surface here, so nothing user-facing changed and the preview is unaffected. Two things I would do next:

The messages cite "specification.website" by topic only, because the spec text is not in the repo. Add the section numbers when the spec lands. Run bun x tsc --noEmit on the Counts/WebCounts typing too, since the author could not.
The checks are regex-based and only see literal px sizes inside /* css */ templates. Say so in the header comment next to the existing known-gaps paragraph, so a green check is not read as full coverage. Consider counting forced once per file rather than once per template block, so splitting a template does not move the number.