Design: tokenise src/web/style/content.ts #2704

This pull moves src/web/style/content.ts onto the design system. Measured with the design lint from #2685, its colour literals drop from 23 to 4 and its off-scale sizes from 31 to 0. Compared against #2685's baseline, the scan reports nothing new anywhere in src/web. The type check is clean, and the themes, fleet-graph, boards-page, web-origins and og-designs tests pass (87).

Colours

• The eight chart series colours and the QR code's white background are colours that should look the same in every theme. They now live in a new FIXED_TOKENS table in src/design/themes.ts, written to the stylesheet once as --series-0…7 and --qr-ground. The values are unchanged, so pages look the same.
• The fade mask on the explore chips uses var(--fg) instead of #000. A mask only reads opacity, so nothing changes on screen.
• The run log's jump button read var(--shadow, … rgba(0,0,0,.15)). --shadow is not defined anywhere, so the fallback was always used. It now uses var(--shadow-2), the overlay token, which means a fainter shadow in dark themes.
• docs/DESIGN.md §2 lists the new tokens. A test in test/themes.test.ts checks that every token is defined and that every var(--series-N) / var(--qr-ground) the stylesheet reads exists.

Sizes (these are small visual changes, on purpose)

• Each size moves to the nearest step on the scale for its role:

- 13.5px becomes 13px for muted metadata and 14px for body text. - 12px becomes 12.5px; 11px and 10px become 11.5px. - The repo title goes from 18px to 20px, the page-title size. - Markdown headings in .prose go from 22px/18px to 20px/16px.

• The 10px chart text and the 72px big number were in SVG viewBox units, not on-screen pixels. That sizing now sits next to the coordinates it has to fit: font-size="10" on the root of the fleet graph and the board chart. The 72px number already had its own attribute. The charts render exactly as before.

Left out

• 4 colours remain, and they are false positives. The lint reads issue references in comments, such as (#600), (#607), (#776) and (#426), as three-digit hex colours. The fix belongs in the lint (#2685), not in rewording comments here.
• docs/design/baseline.json is not lowered. That file, the lint and the plan only exist in #2685, which has not merged. Since the lint only fails when a count goes up, merge order doesn't matter. After both merge, bun scripts/design-lint.ts --update writes content.ts down to 4/0.

To try it: bun test test/themes.test.ts test/fleet-graph.test.ts test/boards-page.test.ts. To check it visually, open a repo page (title), a README (prose headings), /fleet (series colours) and a board chart in the preview.

🤖 Generated with Claude Code

Closes #2697

This pull moves src/web/style/content.ts onto the design system. Measured with the design lint from #2685, its colour literals drop from 23 to 4 and its off-scale sizes from 31 to 0. Compared against #2685's baseline, the scan reports nothing new anywhere in src/web. The type check is clean, and the themes, fleet-graph, boards-page, web-origins and og-designs tests pass (87).

Colours

• The eight chart series colours and the QR code's white background are colours that should look the same in every theme. They now live in a new FIXED_TOKENS table in src/design/themes.ts, written to the stylesheet once as --series-0…7 and --qr-ground. The values are unchanged, so pages look the same.
• The fade mask on the explore chips uses var(--fg) instead of #000. A mask only reads opacity, so nothing changes on screen.
• The run log's jump button read var(--shadow, … rgba(0,0,0,.15)). --shadow is not defined anywhere, so the fallback was always used. It now uses var(--shadow-2), the overlay token, which means a fainter shadow in dark themes.
• docs/DESIGN.md §2 lists the new tokens. A test in test/themes.test.ts checks that every token is defined and that every var(--series-N) / var(--qr-ground) the stylesheet reads exists.

Sizes (these are small visual changes, on purpose)

• Each size moves to the nearest step on the scale for its role:

- 13.5px becomes 13px for muted metadata and 14px for body text. - 12px becomes 12.5px; 11px and 10px become 11.5px. - The repo title goes from 18px to 20px, the page-title size. - Markdown headings in .prose go from 22px/18px to 20px/16px.

• The 10px chart text and the 72px big number were in SVG viewBox units, not on-screen pixels. That sizing now sits next to the coordinates it has to fit: font-size="10" on the root of the fleet graph and the board chart. The 72px number already had its own attribute. The charts render exactly as before.

Left out

• 4 colours remain, and they are false positives. The lint reads issue references in comments, such as (#600), (#607), (#776) and (#426), as three-digit hex colours. The fix belongs in the lint (#2685), not in rewording comments here.
• docs/design/baseline.json is not lowered. That file, the lint and the plan only exist in #2685, which has not merged. Since the lint only fails when a count goes up, merge order doesn't matter. After both merge, bun scripts/design-lint.ts --update writes content.ts down to 4/0.

To try it: bun test test/themes.test.ts test/fleet-graph.test.ts test/boards-page.test.ts. To check it visually, open a repo page (title), a README (prose headings), /fleet (series colours) and a board chart in the preview.

🤖 Generated with Claude Code