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

32
assets/css/layers/02-semantic.css
View file

@ -407,7 +407,7 @@ pre[class*="language-"] {
.token.prolog,
.token.doctype,
.token.cdata {
color: var(--gray-6); /* TODO: map to semantic token — no alias for gray-6 (between --text-3: gray-5 and --text-dim: gray-7) */
color: var(--syntax-comment);
font-style: italic;
}
@ -417,19 +417,19 @@ pre[class*="language-"] {
.token.tag,
.token.deleted {
color: var(--red-4); /* TODO: map to semantic token — no alias for red-4 (--error=red-7, --callout-error=red-5; syntax highlight needs lighter shade) */
color: var(--syntax-deleted);
}
.token.attr-name,
.token.namespace {
color: var(--yellow-4); /* TODO: map to semantic token — no alias for yellow-4 (--warn=yellow-5 is close but one step darker) */
color: var(--syntax-namespace);
}
.token.string,
.token.attr-value,
.token.char,
.token.inserted {
color: var(--accent-hover); /* strings, values — --accent-hover = var(--green-4) */
color: var(--syntax-string);
}
.token.number,
@ -446,7 +446,7 @@ pre[class*="language-"] {
.token.keyword,
.token.atrule {
color: var(--link-hover); /* keywords, @rules — --link-hover = var(--blue-4) */
color: var(--syntax-keyword);
}
.token.function,
@ -455,7 +455,7 @@ pre[class*="language-"] {
}
.token.property {
color: var(--info); /* object properties — --info = var(--blue-5) */
color: var(--syntax-property);
}
.token.operator,
@ -470,7 +470,7 @@ pre[class*="language-"] {
.token.important,
.token.variable {
color: var(--warn); /* !important, variables — --warn = var(--yellow-5) */
color: var(--syntax-variable);
font-weight: var(--font-weight-5);
}
@ -482,20 +482,20 @@ pre[class*="language-"] {
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata { color: var(--gray-6); /* TODO: map to semantic token — no alias for gray-6 in light mode */ }
.token.cdata { color: var(--syntax-comment); }
.token.punctuation { color: var(--gray-8); /* TODO: map to semantic token — no alias for gray-8 */ }
.token.punctuation { color: var(--syntax-punctuation); }
.token.tag,
.token.deleted { color: var(--red-8); /* TODO: map to semantic token — no alias for red-8 */ }
.token.deleted { color: var(--syntax-deleted); }
.token.attr-name,
.token.namespace { color: var(--yellow-9); /* TODO: map to semantic token — no alias for yellow-9 */ }
.token.namespace { color: var(--syntax-namespace); }
.token.string,
.token.attr-value,
.token.char,
.token.inserted { color: var(--green-8); /* TODO: map to semantic token — no alias for green-8 */ }
.token.inserted { color: var(--syntax-string); }
.token.number,
.token.boolean,
@ -506,21 +506,21 @@ pre[class*="language-"] {
.token.builtin { color: var(--teal-8); }
.token.keyword,
.token.atrule { color: var(--blue-8); /* TODO: map to semantic token — no alias for blue-8 */ }
.token.atrule { color: var(--syntax-keyword); }
.token.function,
.token.class-name { color: var(--cyan-9); }
.token.property { color: var(--blue-9); /* TODO: map to semantic token — no alias for blue-9 */ }
.token.property { color: var(--syntax-property); }
.token.operator,
.token.entity,
.token.url { color: var(--gray-8); /* TODO: map to semantic token — no alias for gray-8 in light mode */ }
.token.url { color: var(--syntax-url); }
.token.regex { color: var(--orange-7); }
.token.important,
.token.variable { color: var(--yellow-9); /* TODO: map to semantic token — no alias for yellow-9 */ }
.token.variable { color: var(--syntax-variable); }
}
/* ── Details / Summary ─────────────────────────────────────────────── */