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:
1 parent
adab688e0e
commit
448c70968d
7 files changed
+487
-17
No files matched your search
@@ -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"}
|
||||
|
||||
Reference in new issue
Block a user