feat(cli): aura.css becomes the style pin — tokens, component library, CLAUDE.md rule

Second half of the style pin. assets/aura.css now carries (a) the full
:root token palette (Catppuccin-Mocha-derived; --bg deliberately darker
than Mocha base; new --border3 #585b70 completes the border ladder at an
identical computed value), (b) the shell rules migrated color-literal to
var() with identical computed values (font stacks stay literal — the
--mono token's longer fallback chain would change the computed value),
and (c) an opt-in, class-scoped component library distilled from the
milestone demo page (.aura-doc register, .wrap, .badge, .stats, .cards,
.term, .callout, table.res, .pipe) — unused by the runtime pages, which
render pixel-identically. CHART_CSS migrates to the same tokens (it
lands in the same document after the shell <style>, so :root resolves).
CLAUDE.md gains the binding '## HTML surfaces' rule: every HTML surface
embeds this asset; extend, never fork.

Gates: suite 1043/0, clippy -D warnings clean, doc build 0 warnings;
regenerated chart page resolves all 17 used var() names against its
:root. Independent CSS audit passed (two cosmetic notes: --bg3/--orange
currently unused; the pre-existing html,body height:100% also reaches
future .aura-doc pages).

closes #209
This commit is contained in:
2026-07-04 11:24:07 +02:00
parent 652ad34b3f
commit 7604651579
3 changed files with 160 additions and 24 deletions
+6 -4
View File
@@ -67,12 +67,14 @@ const CHART_VIEWER_JS: &str = include_str!("../assets/chart-viewer.js");
/// Chart-page-only styling (the `#xmode-toggle` button) — injected by
/// `render_chart_html` after the vendored uPlot CSS, NOT into the shared `SHELL_HEAD`
/// (the graph page has no toggle and must not inherit its rule).
/// (the graph page has no toggle and must not inherit its rule). Colors are
/// `var(--x)` tokens from `assets/aura.css`; they resolve because this block lands
/// in the same document, after the shell `<style>` that defines `:root`.
const CHART_CSS: &str = r#"
#xmode-toggle { margin-left: auto; background: #1e1e2e; color: #cdd6f4;
border: 1px solid #313244; border-radius: 6px; padding: 4px 10px;
#xmode-toggle { margin-left: auto; background: var(--bg2); color: var(--fg);
border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px;
font-family: ui-monospace, monospace; font-size: 12px; cursor: pointer; }
#xmode-toggle:hover { border-color: #89b4fa; color: #f5e0dc; }
#xmode-toggle:hover { border-color: var(--blue); color: var(--accent); }
"#;
/// Assemble the self-contained interactive graph viewer page for `root`.