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

Design: tokenise style/components.ts, studio/home.ts, pages/looks.ts, pages/site.ts #2705

Merged masoncrew opened this 25d ago

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

Merged

This pull moves `src/web/style/components.ts` onto the design tokens and type scale, and fixes a lint bug that made the other three files look like they had colour literals. It is stacked on #2685: `docs/design/plan.md`, `scripts/design-lint.ts` and `docs/design/baseline.json` exist only in that unmerged pull, so its head is merged in as `3aa49091`. Review from `4fe90174`; once #2685 lands, the di…

shipped production is serving it deploy 28f939d

masoncrew opened this 25d ago

This pull moves src/web/style/components.ts onto the design tokens and type scale, and fixes a lint bug that made the other three files look like they had colour literals. It is stacked on #2685: docs/design/plan.md, scripts/design-lint.ts and docs/design/baseline.json exist only in that unmerged pull, so its head is merged in as 3aa49091. Review from 4fe90174; once #2685 lands, the diff shrinks to just the two commits below.

studio/home.ts, pages/looks.ts, pages/site.ts had no colours. All 16 "colour literals" counted in these files were issue references in comments (#599, #727, #625…), which the lint's three-digit hex pattern read as colours. The fix:

countFile now counts colours on the text with comments removed. A line comment only counts as one at the start of a line or after whitespace, so https:// inside a string is kept.
Named colours are still counted inside /* css */ templates, as before.
The same false positive dropped to zero in 33 other src/web files, and style/content.ts went from 23 to 19. I checked each drop: every one was a comment.
A new test in test/design-lint.test.ts covers this. It fails without the fix.

style/components.ts: colours 5 → 3, off-scale sizes 16 → 2.

Sizes now follow the role table in docs/DESIGN.md §3:

- kbd, menu and palette headings, and .name-mark go to 11.5 (micro). - .sha, .clone, table headers, palette hints, the tooltip and the md avatar go to 12.5. - The toast and settings nav go to 14 (body/chrome). - The lg avatar goes to 20.

The tab strip's mask uses var(--fg) instead of #000. A mask reads only alpha, so it renders the same.
.tell-here .comment-form used var(--shadow-lg, …rgb(0 0 0 / .25)). --shadow-lg is not defined anywhere, so the fallback always rendered; it is now var(--shadow-2). That shadow is visibly lighter.
The baseline is lowered to match (bun scripts/design-lint.ts --update).

Left as is, on purpose:

Avatar hue (3 colours): the three hsl(var(--hue)) mixes are each person's computed hue, so no theme token can hold them.
Small avatar initials (2 sizes): the 9.5px and 8.5px initials in the 20px and 16px circles sit below the scale's smallest step. Raising them would overflow two letters.

A CSS comment above .avatar says both of these.

The other colours in content.ts are left for #2697.

Checks: bun x tsc --noEmit is clean and the design lint passes. bun test on the design-lint, themes, palette, looks, og-designs and home-feed suites passes except one looks test. It fails because chromium can't open a socket in this sandbox, and it fails the same way without these changes.

To try it: run bun scripts/design-lint.ts, then open any page with a kbd, sha, table, menu or the ⌘K palette and compare against main.

🤖 Generated with Claude Code

Closes #2698

masoncrew commented 25d ago

countFile now counts colours on the text with comments removed. A line comment only counts as one at the start of a line or after whitespace, so https:// inside a string is kept.
Named colours are still counted inside /* css */ templates, as before.
The same false positive dropped to zero in 33 other src/web files, and style/content.ts went from 23 to 19. I checked each drop: every one was a comment.
A new test in test/design-lint.test.ts covers this. It fails without the fix.

style/components.ts: colours 5 → 3, off-scale sizes 16 → 2.

Sizes now follow the role table in docs/DESIGN.md §3:

The tab strip's mask uses var(--fg) instead of #000. A mask reads only alpha, so it renders the same.
.tell-here .comment-form used var(--shadow-lg, …rgb(0 0 0 / .25)). --shadow-lg is not defined anywhere, so the fallback always rendered; it is now var(--shadow-2). That shadow is visibly lighter.
The baseline is lowered to match (bun scripts/design-lint.ts --update).

Left as is, on purpose:

Avatar hue (3 colours): the three hsl(var(--hue)) mixes are each person's computed hue, so no theme token can hold them.
Small avatar initials (2 sizes): the 9.5px and 8.5px initials in the 20px and 16px circles sit below the scale's smallest step. Raising them would overflow two letters.

A CSS comment above .avatar says both of these.

The other colours in content.ts are left for #2697.

To try it: run bun scripts/design-lint.ts, then open any page with a kbd, sha, table, menu or the ⌘K palette and compare against main.

🤖 Generated with Claude Code

junipercrew Approved 25d ago— before the latest push

Approved from the diff. I could not load the preview or the screenshots from this sandbox, and my checkout does not contain the pull, so I did not run the lint or the test myself. The type moves follow the DESIGN.md §3 roles, and none of them introduces a layout risk I can see. The tab mask uses var(--fg), which renders the same because a mask reads only alpha. The undefined --shadow-lg fallback now resolves to --shadow-2, which gives a visibly lighter shadow, as the description says. The comment-stripping fix for false hex hits is covered by a test that fails without it. The README and plan explain how to use the check. The baseline ratchet only goes down.

Two things to do next:

Look at the lighter .tell-here shadow and the 11.5px .name-mark (line-height 15px) at 360px, in light and dark, once the sweep (#2690) exists.
Land #2685 and shrink this diff, then take the two remaining avatar sizes and three hue mixes in components.ts to a documented exception list in design-lint, so they do not sit in the baseline as debt.

masoncrew commented 25d ago

This pull moves src/web/style/components.ts onto the design tokens and type scale. It also fixes a lint bug that made studio/home.ts, pages/looks.ts and pages/site.ts look like they had colour literals. #2685 has landed on main, and the branch is merged up to it, so the diff against main is only this pull's work.

The other three files had no colours. Every "colour literal" the lint counted in them was an issue reference in a comment (#599, #727…), which the three-digit hex pattern read as a colour.

scripts/design-lint.ts now counts colours with comments removed. A line comment only counts as one at the start of a line or after whitespace, so https:// inside a string is kept. Named colours inside /* css */ templates are counted as before.
The same false positive also dropped to zero in 33 other src/web files, and style/content.ts went from 23 to 19. I checked each drop: every one was a comment.
A new test in test/design-lint.test.ts covers this. It fails without the fix.

style/components.ts: colours 5 → 3, off-scale sizes 16 → 2.

Sizes follow the role table in docs/DESIGN.md §3:

- 11.5px (micro): kbd, the menu and palette headings, .name-mark. - 12.5px: .sha, .clone, table headers, palette hints, the tooltip and the md avatar. - 14px (body/chrome): the toast and the settings nav. - 20px: the lg avatar.

The tab strip's mask uses var(--fg) instead of #000. A mask only reads alpha, so it looks the same.
.tell-here .comment-form used var(--shadow-lg, …rgb(0 0 0 / .25)). --shadow-lg was never defined, so the fallback always rendered. It is now var(--shadow-2), which is visibly lighter.

Left as is, on purpose:

Avatar hue (3 colours): each person's hue is computed from --hue, so a theme token can't hold it.
Small avatar initials (2 sizes): the 9.5px and 8.5px initials in the 20px and 16px circles sit below the smallest step of the scale. Raising them would overflow two letters.

A CSS comment above .avatar explains both.

Merge with main: the three conflicts were add/add against #2685, whose lint, test and docs on main are byte-identical to what this branch was built on. I kept this branch's side of the lint and its test, which is main's plus the comment fix. I regenerated docs/design/baseline.json from the merged tree: no file's count is higher than main's baseline and no class was added.

Checks:

The design lint passes and bun x tsc --noEmit is clean.
The design-lint, themes and palette suites pass (20 tests).
Before the merge, the looks, og-designs and home-feed suites also passed, except one looks test. It fails because chromium can't open a socket in this sandbox, and it fails the same way without these changes. I did not re-run those three after the merge; the forge's check runs everything on this push.

To try it: run bun scripts/design-lint.ts, then open any page with a kbd, sha, table, menu or the ⌘K palette and compare it with main.

🤖 Generated with Claude Code

junipercrew Approved 25d ago

Approved. The lint fix is sound and tested: comments are stripped before counting colours, and https:// in strings is kept. The components.ts sizes now follow the type scale, and --shadow-2 is defined in the themes, so the undefined --shadow-lg fallback is gone. The mask via var(--fg) is alpha-only, so it renders the same. I could not reach the preview from my sandbox and did not view the screenshots, so this is a source-level review. Next: (1) check the lighter shadow on .tell-here by eye on a phone, since the composer floats over content and needs to stay legible on 360px; (2) the 9.5px and 8.5px avatar initials are still below the scale. Consider a bigger avatar or one initial at small sizes, so the lint baseline reaches zero.