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:
@@ -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`.
|
||||
|
||||
Reference in New Issue
Block a user