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 <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>
2026-05-22 07:02:13 +02:00
parent 44ed0a90eb
commit 973480d812
16 changed files with 560 additions and 53 deletions
@@ -0,0 +1,88 @@
+import "@testing-library/jest-dom/vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+// The store is a module singleton constructed on first import: it reads
+// localStorage and `matchMedia` in its constructor. Each test therefore
+// stubs `matchMedia` and resets the module registry, then imports a
+// freshly-constructed store via `freshStore`.
+
+const STORAGE_KEY = "galaxy-theme";
+
+function stubMatchMedia(prefersLight: boolean): void {
+	Object.defineProperty(window, "matchMedia", {
+		writable: true,
+		configurable: true,
+		value: (query: string) => ({
+			matches: query.includes("light") ? prefersLight : false,
+			media: query,
+			onchange: null,
+			addListener: () => {},
+			removeListener: () => {},
+			addEventListener: () => {},
+			removeEventListener: () => {},
+			dispatchEvent: () => false,
+		}),
+	});
+}
+
+async function freshStore(
+	prefersLight = false,
+): Promise<typeof import("../src/lib/theme/theme.svelte")> {
+	stubMatchMedia(prefersLight);
+	vi.resetModules();
+	return import("../src/lib/theme/theme.svelte");
+}
+
+describe("theme store", () => {
+	beforeEach(() => {
+		localStorage.clear();
+		delete document.documentElement.dataset.theme;
+	});
+	afterEach(() => {
+		vi.restoreAllMocks();
+	});
+
+	it("defaults to dark and applies it to the document", async () => {
+		const { theme } = await freshStore();
+		expect(theme.choice).toBe("dark");
+		expect(theme.resolved).toBe("dark");
+		expect(document.documentElement.dataset.theme).toBe("dark");
+	});
+
+	it("persists an explicit choice and writes data-theme", async () => {
+		const { theme, THEME_STORAGE_KEY } = await freshStore();
+		expect(THEME_STORAGE_KEY).toBe(STORAGE_KEY);
+
+		theme.setChoice("light");
+		expect(theme.choice).toBe("light");
+		expect(theme.resolved).toBe("light");
+		expect(document.documentElement.dataset.theme).toBe("light");
+		expect(localStorage.getItem(STORAGE_KEY)).toBe("light");
+
+		theme.setChoice("dark");
+		expect(theme.resolved).toBe("dark");
+		expect(document.documentElement.dataset.theme).toBe("dark");
+		expect(localStorage.getItem(STORAGE_KEY)).toBe("dark");
+	});
+
+	it("reads the stored choice on construction", async () => {
+		localStorage.setItem(STORAGE_KEY, "light");
+		const { theme } = await freshStore();
+		expect(theme.choice).toBe("light");
+		expect(theme.resolved).toBe("light");
+	});
+
+	it("resolves system to the OS preference", async () => {
+		const { theme } = await freshStore(true);
+		theme.setChoice("system");
+		expect(theme.choice).toBe("system");
+		expect(theme.resolved).toBe("light");
+		expect(document.documentElement.dataset.theme).toBe("light");
+	});
+
+	it("falls back to dark for an unrecognised stored value", async () => {
+		localStorage.setItem(STORAGE_KEY, "neon");
+		const { theme } = await freshStore();
+		expect(theme.choice).toBe("dark");
+	});
+});