/* ONYX Prism theme for the MkDocs Material design-doc site. * * Maps the Prism tokens (docs/design/03 §2) onto Material's CSS variables: * dark-only (matching the landing page), "Onyx Blue" accent, zinc-family * neutrals, calm motion. White text is the contract: no light scheme ships. * * Readability: the Prism secondary/muted neutrals (#9aa3b0/#6b7480) are tuned * for large surfaces and read too dim as body text on dark backgrounds, so the * dark scheme lifts them to #cdd6e0/#a8b2bf (≥ 9:1 on #0b0d10 — the same * values as the landing page); the light scheme lifts to #3d4550/#5b6470. */ /* ---- Dark (default) ---------------------------------------------------- */ /* Declared on :root unconditionally, NOT gated behind the scheme attribute: * Material applies the palette at runtime by setting data-md-color-scheme on * (and persists palette choices in localStorage), which can leave the * custom scheme variables applied to one element but not another — rendering * dark-on-dark. Unconditional :root declarations make white-on-dark the * contract no matter what Material's JS or a stored preference does. */ :root { color-scheme: dark; --md-default-bg-color: #0b0d10; --md-default-bg-color--light: rgba(244, 247, 251, 0.54); --md-default-bg-color--lighter: rgba(244, 247, 251, 0.26); --md-default-bg-color--lightest: rgba(244, 247, 251, 0.07); --md-default-fg-color: #f4f7fb; /* body copy — same as landing */ --md-default-fg-color--light: #cdd6e0; /* secondary text — bright, body-copy safe */ --md-default-fg-color--lighter: #a8b2bf; /* muted text — labels, footnotes */ --md-default-fg-color--lightest: #a8b2bf; --md-typeset-color: #f4f7fb; /* explicit: body text is white */ --md-primary-fg-color: #12151a; /* header/tab background */ --md-primary-bg-color: #f4f7fb; /* header/tab TEXT (Material paints it with -bg) */ --md-accent-fg-color: #6cb6ff; --md-typeset-a-color: #3b9dff; --md-typeset-kbd-color: rgba(244, 247, 251, 0.12); --md-typeset-kbd-accent-color: rgba(244, 247, 251, 0.2); --md-typeset-kbd-border-color: #0b0d10; --md-typeset-table-color: rgba(244, 247, 251, 0.12); --md-typeset-table-color--light: rgba(244, 247, 251, 0.035); --md-admonition-fg-color: #f4f7fb; --md-admonition-bg-color: #0b0d10; --md-code-bg-color: #12151a; --md-code-fg-color: #f4f7fb; --md-code-hl-color: #3b9dff; --md-code-hl-color--light: rgba(59, 157, 255, 0.1); --md-footer-bg-color: #0b0d10; --md-footer-fg-color: #cdd6e0; --md-footer-bg-color--dark: #0b0d10; } /* Keep the scheme-scoped alias for anything that matches on the attribute. */ [data-md-color-scheme="onyx"] { --md-default-bg-color: #0b0d10; --md-default-fg-color: #f4f7fb; --md-default-fg-color--light: #cdd6e0; --md-default-fg-color--lighter: #a8b2bf; --md-typeset-color: #f4f7fb; --md-primary-fg-color: #12151a; --md-primary-bg-color: #f4f7fb; --md-accent-fg-color: #6cb6ff; --md-typeset-a-color: #3b9dff; --md-code-bg-color: #12151a; --md-code-fg-color: #f4f7fb; --md-footer-bg-color: #0b0d10; --md-footer-fg-color: #cdd6e0; } [data-md-color-scheme="onyx"] .md-header, [data-md-color-scheme="onyx"] .md-tabs { background: rgba(18, 21, 26, 0.92); } /* ---- Shape & motion (Prism §2.3) ---------------------------------------- */ .md-header__title, .md-nav__item, .md-typeset .md-typeset__table { border-radius: 0; /* keep Material's own rhythm */ } .md-typeset .admonition, .md-typeset details, .md-typeset .tabbed-set { border-radius: 10px; } .md-typeset a { transition: color 150ms cubic-bezier(0.2, 0.8, 0.2, 1); } /* Headlines: tight leading, no decorative display face (Prism §2.2). */ .md-typeset h1, .md-typeset h2, .md-typeset h3 { letter-spacing: -0.01em; } /* Code copy buttons already come from Material; keep tabular numbers in * tables so sizes/stats scan cleanly (Prism §2.2). */ .md-typeset table { font-variant-numeric: tabular-nums; }