feat(ui): visual design system — tokens + light/dark theming (F1) #26

2026-05-22T05:32:30Z

developer commented

2026-05-22 05:32:30 +00:00

F1 — Visual design system

Replaces ad-hoc per-component colours with a shared design-token system,
adds light/dark theming, and migrates the whole UI onto the tokens.
From ui/PLAN-finalize.md F1.

What changed

Token foundation (ui/frontend/src/lib/theme/): tokens.css
(dark + light palettes; spacing/radii/typography scales), base.css
(document baseline + token focus ring), theme.svelte.ts
(system/light/dark, persisted, applied via data-theme). A pre-paint
guard in app.html prevents a theme flash. The theme picker is wired
into the account menu.
Full migration: every component <style> references tokens — the
chrome (header, sidebar, tabs, shell) and all view bodies (calculator,
order tab, inspectors, tables, report sections, lobby, auth, mail,
battle viewer, toasts, map overlays). The core palette was replaced by
a scripted pass; the semantic/grey tail mapped by role.
Docs: ui/docs/design-system.md (tokens, theming, conventions,
exceptions) + index entry.

Documented literal exceptions (not theme colours)

battle-scene.svelte SVG data-visualisation palette — fixed dark,
like the WebGL map canvas.
Overlay scrims (modal / map-canvas).
Directional or deliberate drop shadows (bottom-sheets, sidebar, toast).

Default theme

Stays dark (the current look); light/system are opt-in via the
picker. Flipping the default to system is a one-line follow-up.

Tests

pnpm check: 0 errors / 0 warnings.
pnpm test: 735 passing (incl. new tests/theme.test.ts).
Diff verified to change only colour values — no markup or logic.

🤖 Generated with Claude Code

## F1 — Visual design system Replaces ad-hoc per-component colours with a shared design-token system, adds light/dark theming, and migrates the whole UI onto the tokens. From `ui/PLAN-finalize.md` F1. ### What changed - **Token foundation** (`ui/frontend/src/lib/theme/`): `tokens.css` (dark + light palettes; spacing/radii/typography scales), `base.css` (document baseline + token focus ring), `theme.svelte.ts` (system/light/dark, persisted, applied via `data-theme`). A pre-paint guard in `app.html` prevents a theme flash. The theme picker is wired into the account menu. - **Full migration**: every component `<style>` references tokens — the chrome (header, sidebar, tabs, shell) and all view bodies (calculator, order tab, inspectors, tables, report sections, lobby, auth, mail, battle viewer, toasts, map overlays). The core palette was replaced by a scripted pass; the semantic/grey tail mapped by role. - **Docs**: `ui/docs/design-system.md` (tokens, theming, conventions, exceptions) + index entry. ### Documented literal exceptions (not theme colours) - `battle-scene.svelte` SVG data-visualisation palette — fixed dark, like the WebGL map canvas. - Overlay scrims (modal / map-canvas). - Directional or deliberate drop shadows (bottom-sheets, sidebar, toast). ### Default theme Stays **dark** (the current look); light/system are opt-in via the picker. Flipping the default to `system` is a one-line follow-up. ### Tests - `pnpm check`: 0 errors / 0 warnings. - `pnpm test`: 735 passing (incl. new `tests/theme.test.ts`). - Diff verified to change only colour values — no markup or logic. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

developer added 2 commits 2026-05-22 05:32:30 +00:00

feat(ui): design tokens + light/dark theming, migrate in-game chrome (F1a)

Tests · UI / test (push) Successful in 2m4s

Details

973480d812

Introduce the shared design-token system under
ui/frontend/src/lib/theme/: tokens.css (dark default + light palette,
plus spacing/radii/typography scales), base.css global baseline
(document background, text, token focus ring, selection), and
theme.svelte.ts (system/light/dark choice, persisted to localStorage,
applied via data-theme on <html>). A pre-paint guard in app.html
resolves the theme before the app boots to avoid a flash, and the theme
picker is wired into the previously-disabled account-menu stub.

Migrate the always-visible in-game chrome to the tokens (header, account
menu, sidebar, tab-bar, bottom-tabs, shell background): dark renders as
before, light comes for free. The default stays dark during the
incremental migration; the remaining view bodies migrate in F1b.

Docs: ui/docs/design-system.md (+ index entry). Test: tests/theme.test.ts.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

feat(ui): migrate all view bodies to design tokens (F1b)

Tests · UI / test (push) Successful in 2m11s

Details

Tests · UI / test (pull_request) Successful in 2m7s

Details

4ad96b0ef7

Tokenize every remaining component <style> — calculator, order tab,
inspectors, tables, report sections, lobby, auth, mail, battle viewer,
toasts, map overlays. A scripted pass handled the unambiguous core
palette (text/bg/surface/border/accent/danger/muted), the rest were
mapped to the semantic/grey tokens by role.

Remaining colour literals are the documented exceptions only: the
battle-scene SVG data-visualisation palette (fixed dark, like the WebGL
map canvas), overlay scrims (modal / map-canvas), and directional or
deliberate drop shadows. The default theme stays dark until light
coherence is signed off across the views.

Updates ui/docs/design-system.md (migration status + exceptions).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

developer merged commit dcc655c7c4 into development

2026-05-22 05:37:11 +00:00

developer deleted branch feature/ui-finalize-f1-tokens

2026-05-22 05:37:11 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: developer/galaxy-game#26