Vigilio Desto
ea51dbd7cf
Dead code removed: - 05-utilities: grid-2/card-grid/stats block (superseded by 08-layout) - 02-semantic: dialog min-width:100% (conflicted with 03-components) - 02-semantic: hgroup p dead font-family, redundant nested list margin - All layers: [ai-disclosure] → [data-ai-disclosure] (bug fix) - table.striped → [data-table="striped"] (classless alignment) Ref cleanup: 12 --gray-N/--green-N/--blue-N replaced with semantic tokens. 24 refs marked TODO (syntax highlighting needs --syntax-* aliases).
138 lines
4.4 KiB
CSS
138 lines
4.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(--accent-hover); /* --accent-hover = var(--green-4) */
|
|
}
|
|
|
|
/* LiteralStringEscape — \n \t etc — slightly lighter to distinguish */
|
|
.chroma .se {
|
|
color: var(--green-3); /* TODO: map to semantic token — no alias for green-3 (--accent-hover=green-4 is one step darker) */
|
|
}
|
|
|
|
/* ── 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(--blue-3); /* TODO: map to semantic token — no alias for blue-3 (--link-hover=blue-4 is one step darker) */
|
|
}
|
|
|
|
/* ── Operators / Punctuation ─────────────────────────────────────────── */
|
|
/* .o .ow .p */
|
|
|
|
.chroma .o,
|
|
.chroma .ow {
|
|
color: var(--text);
|
|
}
|
|
|
|
/* ── Error ───────────────────────────────────────────────────────────── */
|
|
|
|
.chroma .err {
|
|
color: var(--red-4); /* TODO: map to semantic token — no alias for red-4 (--error=red-7 is much darker; syntax error highlight needs lighter shade) */
|
|
background: transparent;
|
|
}
|
|
|
|
/* ── Generic diffs / emphasis ────────────────────────────────────────── */
|
|
|
|
.chroma .gd { color: var(--red-4); /* TODO: map to semantic token — no alias for red-4; see --diff-remove-text=red-2 but that's even lighter */ }
|
|
.chroma .gi { color: var(--accent-hover); /* --accent-hover = var(--green-4) */ }
|
|
.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);
|
|
}
|