Introduce app-wide CSS design tokens in styles.css (normalized palette) #72

New issue

Closed

opened 2026-07-17 12:37:09 +02:00 by dominik.polakovics · 0 comments

dominik.polakovics commented

2026-07-17 12:37:09 +02:00

Owner

Groundwork PR 1 of 2 for the unified module docheader (see follow-up issue referencing this one).

Goal

web/src/styles.css (~3,200 lines) has zero CSS custom properties — every color, spacing, radius, and font size is a hard-coded literal repeated per rule. Introduce a :root design-token layer and migrate all of styles.css onto it, normalizing near-duplicate values in the same pass.

Decisions (agreed with maintainer)

App-wide, not scoped to any one component family.
Normalize while tokenizing (this PR intentionally changes visuals slightly):
- collapse near-duplicate border grays (#e4e4e7 vs #d4d4d8) into a small border scale,
- collapse text grays (#3f3f46 / #52525b, etc.) into a gray scale,
- normalize radii (today 4/5/6px mixed) onto a scale (e.g. 4/6),
- normalize the 0.75–0.9rem font-size spread onto a small type scale,
- tokenize the accent blues (#60a5fa/#1d4ed8), primary green (#16a34a), state-badge colors (.state-badge--published/--modified/--draft, styles.css ~1819–1842), and the dark chrome (#1c1f26).
Tokens are plain CSS custom properties on :root; no preprocessor, no Tailwind.
CSS-only change: no markup/JSX changes, no class renames.
Verification: manual eyeball click-through of all modules (page, view, media, edit, dialogs, hover/disabled states). Accepted risk — no screenshot infra in this PR.

Dev notes

Toolchains via nix: nix shell nixpkgs#go --command go ...; node likewise. web/dist must be built for go test ./....
Engine-facing scaffold/site/AGENTS.md is unaffected (UI-only change).

Groundwork PR 1 of 2 for the unified module docheader (see follow-up issue referencing this one). ## Goal `web/src/styles.css` (~3,200 lines) has zero CSS custom properties — every color, spacing, radius, and font size is a hard-coded literal repeated per rule. Introduce a `:root` design-token layer and migrate **all** of styles.css onto it, **normalizing near-duplicate values in the same pass**. ## Decisions (agreed with maintainer) - **App-wide**, not scoped to any one component family. - **Normalize while tokenizing** (this PR intentionally changes visuals slightly): - collapse near-duplicate border grays (`#e4e4e7` vs `#d4d4d8`) into a small border scale, - collapse text grays (`#3f3f46` / `#52525b`, etc.) into a gray scale, - normalize radii (today 4/5/6px mixed) onto a scale (e.g. 4/6), - normalize the 0.75–0.9rem font-size spread onto a small type scale, - tokenize the accent blues (`#60a5fa`/`#1d4ed8`), primary green (`#16a34a`), state-badge colors (`.state-badge--published/--modified/--draft`, styles.css ~1819–1842), and the dark chrome (`#1c1f26`). - Tokens are plain CSS custom properties on `:root`; no preprocessor, no Tailwind. - CSS-only change: no markup/JSX changes, no class renames. - **Verification: manual eyeball click-through** of all modules (page, view, media, edit, dialogs, hover/disabled states). Accepted risk — no screenshot infra in this PR. ## Dev notes - Toolchains via nix: `nix shell nixpkgs#go --command go ...`; node likewise. `web/dist` must be built for `go test ./...`. - Engine-facing `scaffold/site/AGENTS.md` is unaffected (UI-only change).

dominik.polakovics added the

ready-for-agent

label

2026-07-17 12:37:09 +02:00

dominik.polakovics referenced this issue

2026-07-17 12:37:32 +02:00

Unified two-row TYPO3-style docheader across page/view/media/edit modules #73

dominik.polakovics referenced this issue

2026-07-17 12:49:14 +02:00

Unified two-row TYPO3-style docheader across page/view/media/edit modules #74

dominik.polakovics referenced this issue

2026-07-17 12:49:21 +02:00