trentuna/asw
8
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

fix: remap gray-13/14/15 to Open Props range (0-12)

Browse source 
ASW tokens referenced --gray-13, --gray-14, --gray-15 which don't
exist in Open Props (stops at --gray-12). All text and surface
colors resolved to nothing — invisible text in light mode.

Remap: 13→10, 14→11, 15→12.
This commit is contained in:
Vigilio Desto 2026-04-10 17:57:09 +02:00
parent 20f2974cfd
commit 5a8c39c3a0
Signed by: vigilio
GPG key ID: 159D6AD58C8E55E9
2 changed files with 12 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

2
assets/css/asw-built.css
View file

File diff suppressed because one or more lines are too long

22
assets/css/layers/01-tokens.css
View file

@ -41,9 +41,9 @@
/* ── Surfaces ──────────────────────────────────────────────────── */ /* ── Surfaces ──────────────────────────────────────────────────── */
--surface: var(--gray-15); /* deepest background (oklch 10%) */ --surface: var(--gray-12); /* deepest background (oklch 10%) */
--surface-1: var(--gray-14); /* cards, sidebars (oklch 18%) */ --surface-1: var(--gray-11); /* cards, sidebars (oklch 18%) */
--surface-2: var(--gray-13); /* hover, raised elements (oklch 25%) */ --surface-2: var(--gray-10); /* hover, raised elements (oklch 25%) */
--surface-card: var(--surface-1); --surface-card: var(--surface-1);
--surface-hover: var(--surface-2); --surface-hover: var(--surface-2);
@ -58,7 +58,7 @@
--accent: var(--green-5); --accent: var(--green-5);
--accent-hover: var(--green-4); --accent-hover: var(--green-4);
--on-accent: var(--gray-15); --on-accent: var(--gray-12);
--accent-focus: color-mix(in oklch, var(--green-5) 35%, transparent); --accent-focus: color-mix(in oklch, var(--green-5) 35%, transparent);
--accent-subtle: color-mix(in oklch, var(--green-5) 10%, transparent); --accent-subtle: color-mix(in oklch, var(--green-5) 10%, transparent);
--accent-underline: color-mix(in oklch, var(--green-5) 45%, transparent); --accent-underline: color-mix(in oklch, var(--green-5) 45%, transparent);
@ -213,7 +213,7 @@
--kbd-bg: var(--text); --kbd-bg: var(--text);
--kbd-color: var(--surface); --kbd-color: var(--surface);
--code-color: var(--text-2); --code-color: var(--text-2);
--table-stripe: color-mix(in oklch, var(--gray-14) 50%, transparent); --table-stripe: color-mix(in oklch, var(--gray-11) 50%, transparent);
/* ── Form tokens ─────────────────────────────────────────────────── */ /* ── Form tokens ─────────────────────────────────────────────────── */
@ -239,7 +239,7 @@
/* ── Component tokens ─────────────────────────────────────────────── */ /* ── Component tokens ─────────────────────────────────────────────── */
--track-bg: var(--surface-2); /* progress / meter background */ --track-bg: var(--surface-2); /* progress / meter background */
--modal-overlay: color-mix(in oklch, var(--gray-15) 80%, transparent); --modal-overlay: color-mix(in oklch, var(--gray-12) 80%, transparent);
--modal-backdrop: blur(0.375rem); --modal-backdrop: blur(0.375rem);
--accordion-active: var(--accent-hover); --accordion-active: var(--accent-hover);
@ -283,7 +283,7 @@
--surface-card: var(--gray-0); --surface-card: var(--gray-0);
--surface-hover: var(--gray-1); --surface-hover: var(--gray-1);
--text: var(--gray-14); /* 18% — dark but not pure black */ --text: var(--gray-11); /* 18% — dark but not pure black */
--text-2: var(--gray-11); /* 37% */ --text-2: var(--gray-11); /* 37% */
--text-3: var(--gray-8); /* 53% */ --text-3: var(--gray-8); /* 53% */
--text-dim: var(--gray-6); /* 63% */ --text-dim: var(--gray-6); /* 63% */
@ -303,15 +303,15 @@
--link-hover-underline: color-mix(in oklch, var(--blue-8) 55%, transparent); --link-hover-underline: color-mix(in oklch, var(--blue-8) 55%, transparent);
--link-focus: color-mix(in oklch, var(--blue-8) 35%, transparent); --link-focus: color-mix(in oklch, var(--blue-8) 35%, transparent);
--h1-color: var(--gray-15); --h1-color: var(--gray-12);
--h2-color: var(--gray-14); --h2-color: var(--gray-11);
--h3-color: var(--gray-13); --h3-color: var(--gray-10);
--h4-color: var(--gray-12); --h4-color: var(--gray-12);
--h5-color: var(--gray-11); --h5-color: var(--gray-11);
--h6-color: var(--gray-10); --h6-color: var(--gray-10);
--mark-bg: color-mix(in oklch, var(--yellow-6) 15%, var(--surface)); --mark-bg: color-mix(in oklch, var(--yellow-6) 15%, var(--surface));
--mark-color: var(--gray-15); --mark-color: var(--gray-12);
--selection: color-mix(in oklch, var(--blue-8) 20%, transparent); --selection: color-mix(in oklch, var(--blue-8) 20%, transparent);
--code-color: var(--text-3); --code-color: var(--text-3);