feat: add the light palette, and the module that resolves a theme

The dark tokens re-struck under `[data-theme="light"]`. Nothing sets that
attribute yet, so the app still renders exactly as it did.

Two things could not be tokens. Game hues are data — ours and the
reader's — and every one was picked against a near-black ground, so
`readableHue` darkens them along the same hue until they read on paper,
and returns dark untouched by construction. And the attribute has to be
on the root before React can mount, or a reader who chose light gets a
dark flash on every load, so the shell reads the preference itself.

That leaves the ground colour written in three files that cannot import
each other, which is what the test pins together.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Lucas WintherandClaude Opus 5 committed 2026-08-18 23:30:26 +02:00
1 parent adab688e0e
commit 448c70968d
7 files changed
+487 -17

No files matched your search

+2 -2
View File
@@ -100,7 +100,7 @@ export function EventDetail({
type="button"
aria-label="Close details"
onClick={onClose}
className="absolute inset-0 bg-ground/80 backdrop-blur-sm"
className="absolute inset-0 bg-scrim backdrop-blur-sm"
/>
<div
role="dialog"
@@ -297,7 +297,7 @@ export function EventDetail({
className={`flex-1 rounded-lg border px-4 py-2.5 text-sm font-medium transition-colors ${
completed
? "border-hairline text-muted hover:text-ink"
: "border-transparent bg-ink text-ground hover:bg-white"
: "border-transparent bg-ink text-ground hover:bg-ink-strong"
}`}
>
{completed ? "Mark not done" : "Mark done"}