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

complete oklch migration: zero named palette refs remain

Browse source 
- 01-asw.css: 20 new tokens (14 --syntax-*, 6 utility: print, absolute, high-contrast)
- Layers 02-09: all 30 TODO refs replaced with semantic/syntax tokens
- Zero --gray-N, --green-N, --blue-N, --red-N, --yellow-N in layers 02-09
- Palette-hue knob now controls entire site. Syntax highlighting uses fixed oklch hues.
This commit is contained in:
Vigilio Desto 2026-04-10 20:00:47 +02:00
parent d9641b0485
commit 2df2c67018
Signed by: vigilio
GPG key ID: 159D6AD58C8E55E9
7 changed files with 81 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

46
assets/css/layers/01-asw.css
View file

@ -274,6 +274,36 @@
--wikilink: var(--link);
--redacted: var(--color-11);
/* ══════════════════════════════════════════════════════════════════
SYNTAX HIGHLIGHTING TOKENS
Used by 02-semantic.css (PrismJS) and 07-chroma.css (Hugo Chroma).
Hues are FIXED (like state colors) — not palette-driven.
══════════════════════════════════════════════════════════════════ */
--syntax-comment: var(--color-9); /* muted — same as --text-dim */
--syntax-punctuation: var(--color-9); /* same muted level */
--syntax-string: oklch(75% 0.15 145); /* green — same as --ok */
--syntax-keyword: oklch(72% 0.15 250); /* blue — close to --link-hover */
--syntax-function: oklch(75% 0.15 250); /* blue — close to --info */
--syntax-number: oklch(75% 0.15 80); /* amber — same as --warn */
--syntax-operator: var(--color-5); /* text-2 level */
--syntax-property: oklch(65% 0.15 250); /* blue — same as --link */
--syntax-variable: oklch(75% 0.15 80); /* amber */
--syntax-deleted: oklch(75% 0.15 25); /* red — same as --error */
--syntax-inserted: oklch(75% 0.15 145); /* green — same as --ok */
--syntax-namespace: oklch(75% 0.15 80); /* amber */
--syntax-url: var(--link); /* urls look like links */
--syntax-tag: oklch(75% 0.15 25); /* red for HTML tags */
/* ── Utility tokens ─────────────────────────────────────────────── */
--print-surface: oklch(100% 0 0); /* white for print */
--print-text: oklch(0% 0 0); /* black for print */
--absolute-black: oklch(0% 0 0); /* redaction, forced contrast */
--absolute-white: oklch(100% 0 0); /* forced contrast */
--hc-border: var(--color-10); /* high-contrast border (one step above --border) */
--hc-text: var(--color-1); /* high-contrast text (brightest) */
}
@ -324,6 +354,22 @@
--mark-bg: oklch(92% 0.08 80);
--mark-color: var(--color-15);
--selection: oklch(80% 0.06 250);
/* Syntax — darker shades for light backgrounds */
--syntax-comment: var(--color-8);
--syntax-punctuation: var(--color-10);
--syntax-string: oklch(40% 0.15 145);
--syntax-keyword: oklch(38% 0.15 250);
--syntax-function: oklch(40% 0.15 250);
--syntax-number: oklch(40% 0.15 80);
--syntax-operator: var(--color-11);
--syntax-property: oklch(45% 0.15 250);
--syntax-variable: oklch(40% 0.15 80);
--syntax-deleted: oklch(40% 0.15 25);
--syntax-inserted: oklch(40% 0.15 145);
--syntax-namespace: oklch(40% 0.15 80);
--syntax-url: var(--link);
--syntax-tag: oklch(40% 0.15 25);
}
}