CremaUIStudio/lib-theme-prism
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

theme: add --info/--destructive-foreground/--text-subtitle; opt-in font-scale
Some checks failed
validate theme / validate (push) Has been cancelled
Details

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
jules
2026-07-04 13:45:33 +10:00
parent 37c7ed3e96
commit 10455e5df7
1 changed files with 19 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
theme.css
View File

@@ -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 <html data-font-scale="lg"> (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; }
}