From 973480d8120693d7a2ec0365b83a2f50f2383bce Mon Sep 17 00:00:00 2001 From: Ilia Denisov Date: Fri, 22 May 2026 07:02:13 +0200 Subject: [PATCH] feat(ui): design tokens + light/dark theming, migrate in-game chrome (F1a) 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 ). 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) --- ui/docs/README.md | 3 + ui/docs/design-system.md | 103 +++++++++++++ ui/frontend/src/app.html | 20 +++ .../src/lib/header/account-menu.svelte | 62 +++++--- ui/frontend/src/lib/header/header.svelte | 14 +- ui/frontend/src/lib/i18n/locales/en.ts | 3 + ui/frontend/src/lib/i18n/locales/ru.ts | 3 + .../src/lib/sidebar/bottom-tabs.svelte | 28 ++-- ui/frontend/src/lib/sidebar/sidebar.svelte | 8 +- ui/frontend/src/lib/sidebar/tab-bar.svelte | 12 +- ui/frontend/src/lib/theme/base.css | 29 ++++ ui/frontend/src/lib/theme/theme.svelte.ts | 91 ++++++++++++ ui/frontend/src/lib/theme/tokens.css | 139 ++++++++++++++++++ ui/frontend/src/routes/+layout.svelte | 6 +- .../src/routes/games/[id]/+layout.svelte | 4 +- ui/frontend/tests/theme.test.ts | 88 +++++++++++ 16 files changed, 560 insertions(+), 53 deletions(-) create mode 100644 ui/docs/design-system.md create mode 100644 ui/frontend/src/lib/theme/base.css create mode 100644 ui/frontend/src/lib/theme/theme.svelte.ts create mode 100644 ui/frontend/src/lib/theme/tokens.css create mode 100644 ui/frontend/tests/theme.test.ts diff --git a/ui/docs/README.md b/ui/docs/README.md index 55947cc..44c00c4 100644 --- a/ui/docs/README.md +++ b/ui/docs/README.md @@ -9,6 +9,9 @@ lives in [`../PLAN.md`](../PLAN.md), the active web finalization in ## Foundation & platform +- [design-system.md](design-system.md) — the design tokens (colour / + spacing / typography), the light/dark theming mechanism, and the + component migration conventions. - [navigation.md](navigation.md) — routes, the sidebar tabs, and the state-preservation rules across view/tab switches. - [storage.md](storage.md) — the `KeyStore` and `Cache` abstractions and diff --git a/ui/docs/design-system.md b/ui/docs/design-system.md new file mode 100644 index 0000000..30ebe04 --- /dev/null +++ b/ui/docs/design-system.md @@ -0,0 +1,103 @@ +# Design system — tokens & theming + +The client's visual language lives in a single set of CSS custom +properties (design tokens). Components reference the tokens +(`var(--color-…)`, `var(--space-…)`) instead of literal hex/px, so a +palette change is a one-file edit and the light and dark themes stay in +lockstep. + +## Where the tokens live + +- [`src/lib/theme/tokens.css`](../frontend/src/lib/theme/tokens.css) — + every token. Theme-independent scales (spacing, radii, typography) sit + in `:root`; the colour/shadow palette is defined twice, once for dark + (`:root, :root[data-theme="dark"]`) and once for light + (`:root[data-theme="light"]`). +- [`src/lib/theme/base.css`](../frontend/src/lib/theme/base.css) — a + small global baseline (document background, default text/typography, a + token-driven focus ring, selection colour). Everything else stays in + component-scoped ` + %sveltekit.head% diff --git a/ui/frontend/src/lib/header/account-menu.svelte b/ui/frontend/src/lib/header/account-menu.svelte index 80bc601..b5173d4 100644 --- a/ui/frontend/src/lib/header/account-menu.svelte +++ b/ui/frontend/src/lib/header/account-menu.svelte @@ -7,8 +7,20 @@ Sessions and Theme) take over. -->