feat(ui): design-token foundation + Tailwind theme wiring (LC-190) #236

Merged

nrupard merged 1 commit from feat/lc-190-design-tokens into main

2026-05-27 20:32:47 +02:00

nrupard commented

2026-05-27 20:32:12 +02:00

Owner

Foundation for the UI/UX theming story (LC-189). No visual change - it introduces the token plumbing every other subtask builds on, and blocks LC-191..199.

What lands

Semantic design tokens (server/assets/main.css): CSS custom properties for surfaces (--surface, --surface-elevated, --surface-sunken), text (--content, --content-muted, --content-subtle), lines (--border, --border-strong), --accent (+ --accent-hover/--accent-content, chasing the LC-96 operator brand), state colors (--success/--warning/--danger + foregrounds), and --ring. The :root (light) values are the exact slate/white palette the templates already hardcode, so adding them is a no-op visually. A placeholder marks where LC-191 adds [data-theme="dark"] and LC-192 the high-contrast palettes.
Tailwind wiring (server/tailwind.config.js): darkMode keyed on [data-theme="dark"]; theme.extend.colors maps utilities (bg-surface, text-content, border-border, bg-accent text-accent-content, bg-danger, ...) onto the CSS vars so they recolor automatically when <html data-theme> changes. extend (not override) keeps the raw slate/white palette available for templates not yet migrated (LC-193).
Smoke test (base.html): <body> -> bg-surface text-content (identical light colors). This proves the wiring end-to-end and forces Tailwind to emit the utilities - verified the built CSS contains .bg-surface{background-color:var(--surface)} and .text-content{color:var(--content)}.

Notes

tailwind-built.css is gitignored (regenerated by just build-css), so it is not in the diff.
Token utilities are emitted on demand by Tailwind's JIT as templates reference them (LC-191/193/195), so only the two used here appear in the built CSS today.

Verification

just build-css regenerates cleanly; built CSS maps the utilities to the vars; cargo check clean; no test asserts on the old body class. Light theme is byte-identical to before.

Foundation for the UI/UX theming story (LC-189). **No visual change** - it introduces the token plumbing every other subtask builds on, and blocks LC-191..199. ## What lands - **Semantic design tokens** (`server/assets/main.css`): CSS custom properties for surfaces (`--surface`, `--surface-elevated`, `--surface-sunken`), text (`--content`, `--content-muted`, `--content-subtle`), lines (`--border`, `--border-strong`), `--accent` (+ `--accent-hover`/`--accent-content`, chasing the LC-96 operator brand), state colors (`--success`/`--warning`/`--danger` + foregrounds), and `--ring`. The `:root` (light) values are the exact slate/white palette the templates already hardcode, so adding them is a no-op visually. A placeholder marks where LC-191 adds `[data-theme="dark"]` and LC-192 the high-contrast palettes. - **Tailwind wiring** (`server/tailwind.config.js`): `darkMode` keyed on `[data-theme="dark"]`; `theme.extend.colors` maps utilities (`bg-surface`, `text-content`, `border-border`, `bg-accent text-accent-content`, `bg-danger`, ...) onto the CSS vars so they recolor automatically when `<html data-theme>` changes. `extend` (not override) keeps the raw `slate`/`white` palette available for templates not yet migrated (LC-193). - **Smoke test** (`base.html`): `<body>` -> `bg-surface text-content` (identical light colors). This proves the wiring end-to-end and forces Tailwind to emit the utilities - verified the built CSS contains `.bg-surface{background-color:var(--surface)}` and `.text-content{color:var(--content)}`. ## Notes - `tailwind-built.css` is gitignored (regenerated by `just build-css`), so it is not in the diff. - Token utilities are emitted on demand by Tailwind's JIT as templates reference them (LC-191/193/195), so only the two used here appear in the built CSS today. ## Verification `just build-css` regenerates cleanly; built CSS maps the utilities to the vars; `cargo check` clean; no test asserts on the old body class. Light theme is byte-identical to before.

nrupard added 1 commit

2026-05-27 20:32:12 +02:00

feat(ui): semantic design-token foundation + Tailwind theme wiring (LC-190)

check-secrets / Nosey parker (push) Successful in 3s

Details

check-secrets / Kingfisher (push) Successful in 4s

Details

check-secrets / TruffleHog (push) Successful in 5s

Details

check-secrets / Kingfisher (pull_request) Successful in 4s

Details

check-secrets / Nosey parker (pull_request) Successful in 4s

Details

check-secrets / TruffleHog (pull_request) Successful in 4s

Details

Create release / Create release from merged PR (pull_request) Has been skipped

Details

Check / clippy + fmt + tests (pull_request) Successful in 2m13s

Details

07b3a94b7f

Foundation for the UI/UX theming story (LC-189); no visual change.

- assets/main.css: add a semantic token layer (surface / surface-elevated / surface-sunken, content / content-muted / content-subtle, border / border-strong, accent + accent-content, success/warning/danger + foregrounds, ring) as CSS custom properties layered above the LC-96 brand vars. The :root (light) values are the slate/white palette the templates already hardcode, so the tokens are a visual no-op. Placeholder left for the [data-theme="dark"] / high-contrast palettes (LC-191/LC-192).
- tailwind.config.js: darkMode keyed on [data-theme="dark"]; theme.extend.colors maps utilities (bg-surface, text-content, border-border, bg-accent text-accent-content, ...) onto the CSS vars so they recolor per data-theme. extend (not override) keeps the raw slate/white palette available for templates not yet migrated (LC-193).
- base.html: body -> bg-surface text-content (identical light colors; smoke-tests the wiring and forces Tailwind to emit the token utilities). Verified the built CSS emits e.g. `.bg-surface{background-color:var(--surface)}`.

tailwind-built.css is gitignored (regenerated by just build-css). Server compiles; no test asserts on the old body class.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>