Vigilio Desto
2df2c67018
- 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.
138 lines
4 KiB
CSS
138 lines
4 KiB
CSS
/**
|
|
* 07-chroma.css
|
|
* CSS-only syntax highlighting — maps Hugo/Chroma class names to Open Props
|
|
* color tokens. Requires Hugo markup.highlight.noClasses = false.
|
|
*
|
|
* Generated class reference: hugo gen chromastyles --style=monokai
|
|
* Token palette: Open Props perceptual color scale.
|
|
* Part of: Agentic Semantic Web
|
|
*/
|
|
|
|
/* ── Wrapper ─────────────────────────────────────────────────────────── */
|
|
|
|
.chroma {
|
|
background: var(--surface-2);
|
|
border-radius: var(--radius-2);
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.chroma pre {
|
|
background: var(--surface-2);
|
|
padding: var(--size-3);
|
|
border-radius: var(--radius-2);
|
|
overflow-x: auto;
|
|
margin: 0;
|
|
}
|
|
|
|
/* ── Keywords ────────────────────────────────────────────────────────── */
|
|
/* .k .kc .kd .kn .kp .kr .kt */
|
|
|
|
.chroma .k,
|
|
.chroma .kc,
|
|
.chroma .kd,
|
|
.chroma .kp,
|
|
.chroma .kr,
|
|
.chroma .kt {
|
|
color: var(--violet-4);
|
|
}
|
|
|
|
/* KeywordNamespace — import/from/as — pink accent to distinguish */
|
|
.chroma .kn {
|
|
color: var(--violet-3);
|
|
}
|
|
|
|
/* ── Strings ─────────────────────────────────────────────────────────── */
|
|
/* .s .sa .sb .sc .dl .sd .s2 .se .sh .si .sx .sr .s1 .ss */
|
|
|
|
.chroma .s,
|
|
.chroma .sa,
|
|
.chroma .sb,
|
|
.chroma .sc,
|
|
.chroma .dl,
|
|
.chroma .sd,
|
|
.chroma .s2,
|
|
.chroma .sh,
|
|
.chroma .si,
|
|
.chroma .sx,
|
|
.chroma .sr,
|
|
.chroma .s1,
|
|
.chroma .ss {
|
|
color: var(--syntax-string);
|
|
}
|
|
|
|
/* LiteralStringEscape — \n \t etc — slightly lighter to distinguish */
|
|
.chroma .se {
|
|
color: var(--syntax-string);
|
|
}
|
|
|
|
/* ── Comments ────────────────────────────────────────────────────────── */
|
|
/* .c .c1 .ch .cm .cp .cpf .cs */
|
|
|
|
.chroma .c,
|
|
.chroma .c1,
|
|
.chroma .ch,
|
|
.chroma .cm,
|
|
.chroma .cp,
|
|
.chroma .cpf,
|
|
.chroma .cs {
|
|
color: var(--text-2);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* ── Numbers ─────────────────────────────────────────────────────────── */
|
|
/* .m .mb .mf .mh .mi .mo .mx */
|
|
|
|
.chroma .m,
|
|
.chroma .mb,
|
|
.chroma .mf,
|
|
.chroma .mh,
|
|
.chroma .mi,
|
|
.chroma .il,
|
|
.chroma .mo,
|
|
.chroma .mx {
|
|
color: var(--orange-3);
|
|
}
|
|
|
|
/* ── Names / Functions ───────────────────────────────────────────────── */
|
|
/* .n .na .nb .nc .nd .ne .nf .ni .nl .nn .nx .py */
|
|
|
|
.chroma .na,
|
|
.chroma .nc,
|
|
.chroma .nd,
|
|
.chroma .ne,
|
|
.chroma .nf,
|
|
.chroma .nx,
|
|
.chroma .py {
|
|
color: var(--syntax-keyword);
|
|
}
|
|
|
|
/* ── Operators / Punctuation ─────────────────────────────────────────── */
|
|
/* .o .ow .p */
|
|
|
|
.chroma .o,
|
|
.chroma .ow {
|
|
color: var(--text);
|
|
}
|
|
|
|
/* ── Error ───────────────────────────────────────────────────────────── */
|
|
|
|
.chroma .err {
|
|
color: var(--syntax-deleted);
|
|
background: transparent;
|
|
}
|
|
|
|
/* ── Generic diffs / emphasis ────────────────────────────────────────── */
|
|
|
|
.chroma .gd { color: var(--syntax-deleted); }
|
|
.chroma .gi { color: var(--syntax-inserted); }
|
|
.chroma .ge { font-style: italic; }
|
|
.chroma .gs { font-weight: bold; }
|
|
|
|
/* ── Line number chrome ──────────────────────────────────────────────── */
|
|
|
|
.chroma .ln,
|
|
.chroma .lnt {
|
|
color: var(--text-3);
|
|
user-select: none;
|
|
padding-inline-end: var(--size-3);
|
|
}
|