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

Design: the class rule checks DESIGN.md section 5, not only the baseline #2707

Merged opened this

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

Merged

The design check's class rule now checks against `docs/DESIGN.md` §5 instead of the 619 classes `docs/design/baseline.json` let through. **This pull is stacked on #2685**, which adds the design check, its baseline and the plan and isn't merged yet. So the diff includes #2685's two commits (merged unchanged at `94def0fe`) until #2685 lands.

shipped production is serving it deploy f36206a

opened this

The design check's class rule now checks against docs/DESIGN.md §5 instead of the 619 classes docs/design/baseline.json let through. This pull is stacked on #2685, which adds the design check, its baseline and the plan and isn't merged yet. So the diff includes #2685's two commits (merged unchanged at 94def0fe) until #2685 lands.

Retired (13 classes). These were defined in the served stylesheet but no markup or client script uses them:

  • src/web/studio/style.ts: the old studio shell and rail (.studio, .studio-main, .studio-preview, .studio-preview-head, .studio-live, .studio-rail, .studio-crew) and the word list (.studio-list, .studio-who). The file's own header comment had flagged them as dead and left the deletion to a separate issue; this is that issue.
  • Four stray rules: .files-head, .agent-brief, .editor-hint, .topbar-asks.

test/studio-phone.test.ts changes: it no longer requires a phone rule for .studio-list li, because nothing renders that list. The baseline also drops studio/style.ts, whose two #c33 colours and one off-scale font size went with those rules.

Documented (505 classes). New DESIGN.md §5d, "Page-local classes", lists them grouped by the file that defines them, with one sentence each on what the group is for. style/content.ts is further split by its own section comments. The section says these are registered, not endorsed: new pages use the §5 components. With the §5 table, every one of the 606 remaining classes is now named.

The check. scripts/design-lint.ts now reads DESIGN.md:

  • A class defined in a /* css */ template fails unless §5 (including 5a–5d) names it. A class named only in another section doesn't count.
  • A §5d entry with no remaining CSS rule also fails, so the list can only shrink.
  • A class is a selector inside a code span, written bare or after an element, as in pre.run-log. Dotted words like ui.ts, codeberg.org or status.reviews are not read as classes.
  • baseline.json now keeps only the colour and font-size counts.

The class assertion in test/design-lint.test.ts changes because the rule it tests changed. New cases cover reading §5, classes named outside it, a stale §5d entry, and the real tree. The README and docs/design/plan.md now describe the new rule.

Left alone:

  • docs/design/audit.md: it's a dated snapshot, so it still says 619.
  • Four names in the §5 table that no stylesheet defines (.editor, .editor-form, .origin-by, .propose). That is existing documentation drift; the check only looks the other way, so it doesn't catch it.
  • No page was restyled: plan items 4–12 retire the §5d entries page by page.

To try it: bun scripts/design-lint.ts passes. Adding .gizmo-new { top: 0; } to any /* css */ template makes it fail and name .gizmo-new (I checked this by hand and reverted it). bun test test/design-lint.test.ts test/studio-phone.test.ts passes, tsc --noEmit is clean, and the other suites that read these stylesheets also pass.

🤖 Generated with Claude Code

Closes #2700

commented

The design check's class rule now checks against docs/DESIGN.md §5 instead of the 619 classes docs/design/baseline.json let through. This pull is stacked on #2685, which adds the design check, its baseline and the plan and isn't merged yet. So the diff includes #2685's two commits (merged unchanged at 94def0fe) until #2685 lands.

Retired (13 classes). These were defined in the served stylesheet but no markup or client script uses them:

  • src/web/studio/style.ts: the old studio shell and rail (.studio, .studio-main, .studio-preview, .studio-preview-head, .studio-live, .studio-rail, .studio-crew) and the word list (.studio-list, .studio-who). The file's own header comment had flagged them as dead and left the deletion to a separate issue; this is that issue.
  • Four stray rules: .files-head, .agent-brief, .editor-hint, .topbar-asks.

test/studio-phone.test.ts changes: it no longer requires a phone rule for .studio-list li, because nothing renders that list. The baseline also drops studio/style.ts, whose two #c33 colours and one off-scale font size went with those rules.

Documented (505 classes). New DESIGN.md §5d, "Page-local classes", lists them grouped by the file that defines them, with one sentence each on what the group is for. style/content.ts is further split by its own section comments. The section says these are registered, not endorsed: new pages use the §5 components. With the §5 table, every one of the 606 remaining classes is now named.

The check. scripts/design-lint.ts now reads DESIGN.md:

  • A class defined in a /* css */ template fails unless §5 (including 5a–5d) names it. A class named only in another section doesn't count.
  • A §5d entry with no remaining CSS rule also fails, so the list can only shrink.
  • A class is a selector inside a code span, written bare or after an element, as in pre.run-log. Dotted words like ui.ts, codeberg.org or status.reviews are not read as classes.
  • baseline.json now keeps only the colour and font-size counts.

The class assertion in test/design-lint.test.ts changes because the rule it tests changed. New cases cover reading §5, classes named outside it, a stale §5d entry, and the real tree. The README and docs/design/plan.md now describe the new rule.

Left alone:

  • docs/design/audit.md: it's a dated snapshot, so it still says 619.
  • Four names in the §5 table that no stylesheet defines (.editor, .editor-form, .origin-by, .propose). That is existing documentation drift; the check only looks the other way, so it doesn't catch it.
  • No page was restyled: plan items 4–12 retire the §5d entries page by page.

To try it: bun scripts/design-lint.ts passes. Adding .gizmo-new { top: 0; } to any /* css */ template makes it fail and name .gizmo-new (I checked this by hand and reverted it). bun test test/design-lint.test.ts test/studio-phone.test.ts passes, tsc --noEmit is clean, and the other suites that read these stylesheets also pass.

🤖 Generated with Claude Code

commented

The design check's class rule now checks against docs/DESIGN.md §5 instead of the 619 classes docs/design/baseline.json let through. This branch now has main merged in. #2685 landed, so the pull no longer carries that pull's commits; the diff against main is this issue's work alone.

The merge. main's design files (scripts/design-lint.ts, its test, the baseline, the plan) were exactly the #2685 head this branch was built on, so this branch's versions stand. The README conflict was the same thing: main's old description of the design check against this branch's rewrite of it. The README section #2686 added merged cleanly and is kept. The type check is clean, and the design-lint, studio-phone and crew-splits tests pass. bun scripts/design-lint.ts passes on the merged tree.

Retired (13 classes). These were defined in the served stylesheet but no markup or client script uses them:

  • src/web/studio/style.ts: the old studio shell and rail (.studio, .studio-main, .studio-preview, .studio-preview-head, .studio-live, .studio-rail, .studio-crew) and the word list (.studio-list, .studio-who). The file's own header comment had flagged them as dead and left the deletion to a separate issue; this is that issue.
  • Four stray rules: .files-head, .agent-brief, .editor-hint, .topbar-asks.

test/studio-phone.test.ts changes: it no longer requires a phone rule for .studio-list li, because nothing renders that list. The baseline also drops studio/style.ts, whose two #c33 colours and one off-scale font size went with those rules.

Documented (505 classes). New DESIGN.md §5d, "Page-local classes", lists them grouped by the file that defines them, with one sentence each on what the group is for. The section says these are registered, not endorsed: new pages use the §5 components. With the §5 table, every one of the 606 remaining classes is now named.

The check. scripts/design-lint.ts now reads DESIGN.md:

  • A class defined in a /* css */ template fails unless §5 (including 5a–5d) names it. A class named only in another section doesn't count.
  • A §5d entry with no remaining CSS rule also fails, so the list can only shrink.
  • A class is a selector inside a code span, written bare or after an element, as in pre.run-log. Dotted words like ui.ts, codeberg.org or status.reviews are not read as classes.
  • baseline.json now keeps only the colour and font-size counts.

The class assertion in test/design-lint.test.ts changes because the rule it tests changed. New cases cover reading §5, classes named outside it, a stale §5d entry, and the real tree. The README and docs/design/plan.md now describe the new rule.

Left alone:

  • docs/design/audit.md: it's a dated snapshot, so it still says 619.
  • Four names in the §5 table that no stylesheet defines (.editor, .editor-form, .origin-by, .propose). That is existing documentation drift; the check only looks the other way, so it doesn't catch it.
  • No page was restyled: plan items 4–12 retire the §5d entries page by page.

To try it: bun scripts/design-lint.ts passes. Adding .gizmo-new { top: 0; } to any /* css */ template makes it fail and name .gizmo-new (I checked this by hand and reverted it). bun test test/design-lint.test.ts test/studio-phone.test.ts passes.

🤖 Generated with Claude Code

Approved — before the latest push

The class rule now reads DESIGN.md §5 instead of a 619-name baseline, and the deletions are safe. Nothing outside the stylesheets references the 13 retired classes, so no served markup changes. design-lint, design-lint.test and studio-phone.test pass here. I could not reach the preview from my sandbox and did not look at the screenshots. No page was restyled, so there is little to see. Two things to do next: (1) The §5d register is a 500-name wall of prose. When plan items 4-12 retire entries, move each page's names next to its component so the list stays reviewable. (2) Add the reverse check for the four §5 names no stylesheet defines (.editor, .editor-form, .origin-by, .propose), so documentation drift fails too.

commented

The design check's class rule now checks against docs/DESIGN.md §5 instead of the 619 classes docs/design/baseline.json let through. main is merged in again.

The merge. The only conflict was docs/design/baseline.json. main's tokenising work (#2704, #2705) lowered the colour and size counts, while this branch removed the class list. I regenerated the baseline from the merged tree with bun scripts/design-lint.ts --update and checked it file by file: no count is above main's. style/content.ts and studio/style.ts now count nothing, so they drop out of the baseline. main's change to the lint (comments are no longer read as colours) merged cleanly and is kept, with its test. The lint passes on the merged tree, so the classes main added are all named and no §5d entry is stale. The type check is clean, and the design-lint, design-audit, themes, studio-phone and surfaces suites pass.

Retired (13 classes). These were defined in the served stylesheet but no markup or client script uses them:

  • src/web/studio/style.ts: the old studio shell and rail (.studio, .studio-main, .studio-preview, .studio-preview-head, .studio-live, .studio-rail, .studio-crew) and the word list (.studio-list, .studio-who). The file's own header comment had flagged them as dead and left the deletion to a separate issue; this is that issue.
  • Four stray rules: .files-head, .agent-brief, .editor-hint, .topbar-asks.

test/studio-phone.test.ts changes: it no longer requires a phone rule for .studio-list li, because nothing renders that list.

Documented (505 classes). New DESIGN.md §5d, "Page-local classes", lists them grouped by the file that defines them, with one sentence each on what the group is for. The section says these are registered, not endorsed: new pages use the §5 components. With the §5 table, every remaining class is now named.

The check. scripts/design-lint.ts now reads DESIGN.md:

  • A class defined in a /* css */ template fails unless §5 (including 5a–5d) names it. A class named only in another section doesn't count.
  • A §5d entry with no remaining CSS rule also fails, so the list can only shrink.
  • A class is a selector inside a code span, written bare or after an element, as in pre.run-log. Dotted words like ui.ts, codeberg.org or status.reviews are not read as classes.
  • baseline.json now keeps only the colour and font-size counts.

The class assertion in test/design-lint.test.ts changes because the rule it tests changed. New cases cover reading §5, classes named outside it, a stale §5d entry, and the real tree. The README and docs/design/plan.md now describe the new rule.

Left alone: four names in the §5 table that no stylesheet defines (.editor, .editor-form, .origin-by, .propose). That is existing documentation drift; the check only looks the other way, so it doesn't catch it. No page was restyled: plan items 4–12 retire the §5d entries page by page.

To try it: bun scripts/design-lint.ts passes. Adding .gizmo-new { top: 0; } to any /* css */ template makes it fail and name .gizmo-new. bun test test/design-lint.test.ts test/studio-phone.test.ts passes.

🤖 Generated with Claude Code

Approved

Approved. The class rule now reads DESIGN.md §5 instead of a 619-name baseline, and stale §5d entries fail, so the register only shrinks. The 13 retired classes are dead CSS, the tests cover each new behaviour, and the README and plan are updated. I could not reach the preview from my sandbox (the proxy refused the host), so this is judged from the diff and the tests, not by eye. The change touches no page markup, so the risk to first paint or the phone layout is low.

Two things I would do next:

  1. Make the check catch drift the other way. The four §5 table names no stylesheet defines (.editor, .editor-form, .origin-by, .propose) are left documented but dead; the lint could flag them once §5d is thin.
  2. Retire §5d entries page by page, as plan items 4-12 say. A 505-name inline list in DESIGN.md is hard to read and diff, so consider moving it to a generated file the lint also reads.
Sign in to join this conversation.

↑↓ navigate ↵ open ⌘↵ its app esc close

Keyboard shortcuts

Docs