From 10455e5df707929677b03e0701ce60abdb6db620 Mon Sep 17 00:00:00 2001 From: jules Date: Sat, 4 Jul 2026 13:45:33 +1000 Subject: [PATCH] theme: add --info/--destructive-foreground/--text-subtitle; opt-in font-scale Root font-size 18px moved behind html[data-font-scale=lg] so theme switches are restyle-only. Conforms to the v1 token contract. Co-Authored-By: Claude Fable 5 --- theme.css | 27 +++++++++++++++++++-------- 1 file changed, 19 insertions(+), 8 deletions(-) diff --git a/theme.css b/theme.css index 8349ea1..32ef3e8 100644 --- a/theme.css +++ b/theme.css @@ -61,10 +61,14 @@ --accent-foreground: oklch(0.25 0.05 295); --destructive: oklch(0.6 0.24 25); + --destructive-foreground: oklch(0.13 0.04 25); --success: oklch(0.5 0.18 150); --success-foreground: oklch(1 0 0); --warning: oklch(0.7 0.18 75); --warning-foreground: oklch(0.18 0.04 75); + /* Info — blue-cyan, drawn from the chart-2 (230) hue family. */ + --info: oklch(0.52 0.19 230); + --info-foreground: oklch(1 0 0); --border: oklch(0 0 0 / 0.09); --input: oklch(0 0 0 / 0.09); @@ -136,6 +140,8 @@ --text-headline-lh: 2.375rem; --text-title-size: 1.5rem; --text-title-lh: 1.875rem; + --text-subtitle-size: 1.1875rem; + --text-subtitle-lh: 1.75rem; --text-body-size: 1.0625rem; --text-body-lh: 1.625rem; --text-label-size: 0.9375rem; @@ -203,10 +209,13 @@ --accent-foreground: oklch(0.95 0.04 295); --destructive: oklch(0.7 0.22 25); + --destructive-foreground: oklch(0.15 0.04 25); --success: oklch(0.74 0.16 150); --success-foreground: oklch(0.12 0.02 150); --warning: oklch(0.78 0.16 75); --warning-foreground: oklch(0.16 0.04 75); + --info: oklch(0.72 0.16 230); + --info-foreground: oklch(0.15 0.04 230); --border: oklch(1 0 0 / 0.1); --input: oklch(1 0 0 / 0.1); @@ -787,13 +796,15 @@ } /* ── Root size & font-scale ── - * 18px root by default. Body lands ~19px once the --text-body-size - * 1.0625rem multiplier applies. The data-font-scale hook lets the - * consuming app expose a user-facing size toggle. */ + * The root font-size stays at the browser default (16px) — layout metrics + * belong to the app, not the theme, so the theme never sets font-size on a + * bare html/:root selector. Prism's roomier reading size is opt-in: an app + * that wants it renders (18px root → body lands + * ~19px once the --text-body-size 1.0625rem multiplier applies), and can + * surface sm/md/lg/xl as a user-facing size toggle. */ @layer base { - html { font-size: 18px; } - html[data-font-scale="sm"] { font-size: 16px; } - html[data-font-scale="md"] { font-size: 18px; } - html[data-font-scale="lg"] { font-size: 20px; } - html[data-font-scale="xl"] { font-size: 22px; } + html[data-font-scale="sm"] { font-size: 15px; } + html[data-font-scale="md"] { font-size: 16px; } + html[data-font-scale="lg"] { font-size: 18px; } + html[data-font-scale="xl"] { font-size: 20px; } }