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

`.hex` leaves the stylesheet: the settings colour value draws from base utilities #5272

Merged masoncrew opened this 22d ago

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

Merged

The `.hex` rule is gone from the stylesheet. The colour value beside a label's picker on the settings Labels page is now `<span class="mono muted" data-hex>` in `src/web/pages/settings.ts:1740`. The old rule set three things: the mono font, 12.5px, and `var(--muted-fg)`. Base's `.mono` sets the first two and `.muted` the third, so the value should look the same.

shipped production is serving it deploy 28f939d

masoncrew opened this 22d ago

The .hex rule is gone from the stylesheet. The colour value beside a label's picker on the settings Labels page is now <span class="mono muted" data-hex> in src/web/pages/settings.ts:1740. The old rule set three things: the mono font, 12.5px, and var(--muted-fg). Base's .mono sets the first two and .muted the third, so the value should look the same.

Stylesheet and docs: the .color-field .hex line is removed from src/web/style/components.ts, and .hex is removed from the style/components.ts list in docs/DESIGN.md §5d.
Picker script: the script that updates the value as the colour changes found it by the .hex class (src/web/client.ts). It now finds it by [data-hex], so it no longer depends on a style class. The issue only listed the stylesheet and DESIGN.md, but without this change the live update would have stopped working.
Tests: the new test/hex-retired.test.ts checks that the stylesheet has no .hex, that .mono and .muted still set those values, and that the picker script looks for [data-hex]. The labels test in test/settings.test.ts now also checks that the page renders the value with mono muted data-hex and no class="hex".

bun scripts/design-lint.ts passes, bun x tsc --noEmit is clean, and the settings, design-lint, design-map, design-audit and palette-focus suites pass along with the new test.

Screenshots: I couldn't take the before and after screenshots at 360px and 1280px that the issue asks for, because this sandbox has no browser. To compare by eye, open /:owner/:repo/settings/labels on production and on this pull's preview, and change a label's colour to check the value updates.

🤖 Generated with Claude Code

Closes #5252

masoncrew commented 22d ago

Stylesheet and docs: the .color-field .hex line is removed from src/web/style/components.ts, and .hex is removed from the style/components.ts list in docs/DESIGN.md §5d.
Picker script: the script that updates the value as the colour changes found it by the .hex class (src/web/client.ts). It now finds it by [data-hex], so it no longer depends on a style class. The issue only listed the stylesheet and DESIGN.md, but without this change the live update would have stopped working.
Tests: the new test/hex-retired.test.ts checks that the stylesheet has no .hex, that .mono and .muted still set those values, and that the picker script looks for [data-hex]. The labels test in test/settings.test.ts now also checks that the page renders the value with mono muted data-hex and no class="hex".

bun scripts/design-lint.ts passes, bun x tsc --noEmit is clean, and the settings, design-lint, design-map, design-audit and palette-focus suites pass along with the new test.

🤖 Generated with Claude Code

junipercrew Approved 22d ago

Approved. The readout keeps its look (base .mono sets the mono font and 12.5px, .muted sets the colour), the picker script finds it by [data-hex], and the no-JS render still shows the value. The tests would fail without the change. Two things I would do next: (1) take the 360px and 1280px before/after screenshots the issue asked for, once a browser is available; (2) give the readout an aria-live=off or associate it with the picker via aria-describedby so a screen reader hears the value change with the colour.