refactor(web): app-wide CSS design tokens in styles.css (normalized palette) #75

Merged

dominik.polakovics merged 1 commit from afk/72 into main

2026-07-17 13:27:41 +02:00

dominik.polakovics commented

2026-07-17 13:10:05 +02:00

Owner

Introduces the :root design-token layer agreed in #72 and migrates all of web/src/styles.css (~3,200 lines) onto it, normalizing near-duplicate values in the same pass. Groundwork PR 1 of 2 for the unified module docheader.

What's in the token layer

Primitive scales: gray (zinc ramp), blue, red, green, amber, indigo/violet/cyan, slate (kept distinct so the draft badge stays distinguishable from published), --ink (#1c1f26 — the near-black that is both default text and the dark chrome), alpha tints, scrim + 4 shadows, radii (4/6/8/999px), and a 9-step type scale (0.65–1.3rem).
Semantic layer: --color-text/-muted/-faint, --color-heading, --color-border/-subtle, --color-accent/-strong, --color-focus, --color-danger/-strong, --color-primary/-strong, dark-chrome tokens (--chrome-bg/-deep/-raised, menu/hover/selected fills), and the six --state-* badge tokens the docheader rework will reuse.

Normalizations (intentional visual changes)

Grays: #52525b→#3f3f46, #27272a→#18181b, #fcfcfd→#fafafa
Radii: 3px/5px→4px, 10px→8px
Type: 0.6→0.65, 0.68/0.72→0.7, 0.78/0.82→0.8, 0.88/0.95→0.9, 1.05→1.1 (rem)
Alpha tints: chrome hover fills 0.06/0.1→0.08 white; selected fills 0.18→0.22 blue; faint blue tints 0.08→0.12; focus rings 0.45→0.5; slate chip fills 0.18→0.16 (checked that no collapsed pair is a state pair on the same element — hover/selected feedback is preserved everywhere)

Verification

Mechanical equivalence proof: a checker script expanded every var() back to literals and diffed against the pre-migration file — exactly 75 changed declaration lines, every one on the sanctioned list above; zero unsanctioned value changes, zero undefined tokens, no structural drift.
Zero raw hex/rgba/font-size/radius literals remain below :root (only border-radius: 50%/0 idioms).
npm run build ✓, npm test 726/726 ✓, go vet ✓, go test ./... all packages ✓, go build ./cmd/harness ✓.
CSS-only: one file changed, no selectors/class names/markup touched; scaffold/site/AGENTS.md unaffected (UI-only, per issue).
The agreed manual eyeball click-through of all modules remains yours on review (accepted risk in #72 — no screenshot infra in this PR).

Closes #72

🤖 Generated with Claude Code

Introduces the `:root` design-token layer agreed in #72 and migrates all of `web/src/styles.css` (~3,200 lines) onto it, normalizing near-duplicate values in the same pass. Groundwork PR 1 of 2 for the unified module docheader. ## What's in the token layer - **Primitive scales**: gray (zinc ramp), blue, red, green, amber, indigo/violet/cyan, slate (kept distinct so the draft badge stays distinguishable from published), `--ink` (#1c1f26 — the near-black that is both default text and the dark chrome), alpha tints, scrim + 4 shadows, radii (4/6/8/999px), and a 9-step type scale (0.65–1.3rem). - **Semantic layer**: `--color-text/-muted/-faint`, `--color-heading`, `--color-border/-subtle`, `--color-accent/-strong`, `--color-focus`, `--color-danger/-strong`, `--color-primary/-strong`, dark-chrome tokens (`--chrome-bg/-deep/-raised`, menu/hover/selected fills), and the six `--state-*` badge tokens the docheader rework will reuse. ## Normalizations (intentional visual changes) - Grays: `#52525b`→`#3f3f46`, `#27272a`→`#18181b`, `#fcfcfd`→`#fafafa` - Radii: 3px/5px→4px, 10px→8px - Type: 0.6→0.65, 0.68/0.72→0.7, 0.78/0.82→0.8, 0.88/0.95→0.9, 1.05→1.1 (rem) - Alpha tints: chrome hover fills 0.06/0.1→0.08 white; selected fills 0.18→0.22 blue; faint blue tints 0.08→0.12; focus rings 0.45→0.5; slate chip fills 0.18→0.16 (checked that no collapsed pair is a state pair on the same element — hover/selected feedback is preserved everywhere) ## Verification - **Mechanical equivalence proof**: a checker script expanded every `var()` back to literals and diffed against the pre-migration file — exactly 75 changed declaration lines, every one on the sanctioned list above; zero unsanctioned value changes, zero undefined tokens, no structural drift. - Zero raw hex/rgba/font-size/radius literals remain below `:root` (only `border-radius: 50%`/`0` idioms). - `npm run build` ✓, `npm test` 726/726 ✓, `go vet` ✓, `go test ./...` all packages ✓, `go build ./cmd/harness` ✓. - CSS-only: one file changed, no selectors/class names/markup touched; `scaffold/site/AGENTS.md` unaffected (UI-only, per issue). - The agreed manual eyeball click-through of all modules remains yours on review (accepted risk in #72 — no screenshot infra in this PR). Closes #72 🤖 Generated with [Claude Code](https://claude.com/claude-code)

dominik.polakovics added 1 commit

2026-07-17 13:10:05 +02:00

refactor(web): introduce app-wide CSS design tokens (normalized palette)

ci / build-and-test (pull_request) Successful in 5m7s

Details

0a0e67e839

styles.css gains a :root design-token layer — primitive color scales
(gray/blue/red/green/amber/indigo/slate + ink), alpha tints, shadows,
radii, and a type scale — plus a small semantic layer (text, borders,
accent, danger, primary, dark chrome, state badges). Every color,
border-radius, and font-size literal below :root now goes through a
token.

Near-duplicate values were normalized in the same pass (intentional
slight visual changes): border/text grays collapsed onto the gray ramp,
radii onto 4/6/8px, the 0.6-1.3rem font-size spread onto a 9-step type
scale, and a handful of near-identical alpha tints unified. CSS-only:
no selectors, class names, or markup changed.

Closes #72

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

dominik.polakovics commented

2026-07-17 13:16:24 +02:00

Author

Owner

This was generated by AI while landing a PR.

Validation verdict: PASS

CI (relied-on signal, not re-run): ci / build-and-test ✓ success (5m7s, run #65) — covers npm run build, npm test, go vet, go test ./..., go build.
Conventional Commits title: ✓ refactor(web): …
AFK contract: ✓ Closes #72 present and valid.
Scope: ✓ exactly one file changed (web/src/styles.css, +674/−532), matching issue #72 (CSS-only, app-wide token layer).
No markup/class churn: ✓ the selector set is byte-identical between main and the PR — only declaration values changed (literals → var()).
No literal leakage: ✓ zero raw hex/rgba below :root (only the sanctioned border-radius: 50%/0 idioms).
Mergeable: ✓ merges cleanly into main, single commit, no conflicts.

Accepted risk (per #72): the normalizations intentionally shift some values slightly and there is no screenshot infra in this PR, so the visual eyeball click-through of all modules remains a human review step — outside the lander's scope.

> *This was generated by AI while landing a PR.* **Validation verdict: PASS** - **CI (relied-on signal, not re-run):** `ci / build-and-test` ✓ success (5m7s, run #65) — covers `npm run build`, `npm test`, `go vet`, `go test ./...`, `go build`. - **Conventional Commits title:** ✓ `refactor(web): …` - **AFK contract:** ✓ `Closes #72` present and valid. - **Scope:** ✓ exactly one file changed (`web/src/styles.css`, +674/−532), matching issue #72 (CSS-only, app-wide token layer). - **No markup/class churn:** ✓ the selector set is byte-identical between `main` and the PR — only declaration values changed (literals → `var()`). - **No literal leakage:** ✓ zero raw hex/rgba below `:root` (only the sanctioned `border-radius: 50%`/`0` idioms). - **Mergeable:** ✓ merges cleanly into `main`, single commit, no conflicts. **Accepted risk (per #72):** the normalizations intentionally shift some values slightly and there is no screenshot infra in this PR, so the visual eyeball click-through of all modules remains a human review step — outside the lander's scope.

dominik.polakovics merged commit 1ec828a58b into main

2026-07-17 13:27:41 +02:00

dominik.polakovics referenced this pull request from a commit

2026-07-17 13:27:42 +02:00

Merge pull request 'refactor(web): app-wide CSS design tokens in styles.css (normalized palette)' (#75) from afk/72 into main

dominik.polakovics referenced this pull request

2026-07-18 01:10:06 +02:00

feat: page field type with shared page-tree picker; news-list section becomes a picked page reference #86