/* api-theme.css — the branding and palette typedoc's own theme cannot express through options. * * Loaded as `customCss` (typedoc copies it to api/assets/custom.css, last of the three stylesheets), * so plain-specificity rules here beat the default theme without any `!important`. * * Layout, the navigation tree and the search index are still typedoc's. Re-implementing those would * mean re-doing the work on every upgrade; recolouring is a handful of variables that the theme is * already built to take. */ /* ── the site's tokens, redeclared ────────────────────────────────────────────────────────────── * site.css is NOT linked on generated pages, so nothing from it is in scope here. These are copies, * and they have to be kept in step with site.css by hand. */ :root { --fim-sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --fim-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } /* ── palette ──────────────────────────────────────────────────────────────────────────────────── * typedoc resolves every `--color-*` from a `--light-color-*`/`--dark-color-*` pair, choosing * between them in three places: `@media (prefers-color-scheme)` for the default "os" setting, and * `:root[data-theme="light"]` / `[data-theme="dark"]` for its own toolbar switcher. Overriding the * two SOURCE palettes here — in a plain `:root`, with no media query of our own — feeds all three at * once and leaves the switcher working. Redefining `--color-*` directly would break it. * * Tokens typedoc already derives from these (active-menu-item, icon-background, icon-text, * comment-tag, and every ts-* alias) follow automatically and are deliberately not repeated. */ :root { /* dark — site.css :root */ --dark-color-background:#0f1216; /* --bg */ --dark-color-background-secondary:#161b22; /* --panel */ --dark-color-accent:#2b3440; /* --line; typedoc's "accent" is its rule/border grey, not a highlight colour */ --dark-color-text:#e6edf3; /* --fg */ --dark-color-text-aside:#8b949e; /* --dim */ --dark-color-contrast-text:#ffffff; --dark-color-document:#e6edf3; --dark-color-link:#58a6ff; /* --accent */ --dark-color-focus-outline:#58a6ff; --dark-color-background-warning:#d29922; /* --warn */ --dark-color-warning-text:#0f1216; /* light — site.css @media (prefers-color-scheme:light) */ --light-color-background:#ffffff; --light-color-background-secondary:#f6f8fa; --light-color-accent:#d0d7de; --light-color-text:#1f2328; --light-color-text-aside:#59636e; --light-color-contrast-text:#000000; --light-color-document:#1f2328; --light-color-link:#0969da; /* --accent, light */ --light-color-focus-outline:#0969da; --light-color-background-warning:#d29922; --light-color-warning-text:#1f2328; /* The one pair with no site equivalent: the selected-nav-item fill, which has to sit between --panel and --line to read as selected without becoming a second background. */ --dark-color-background-active:#232b36; --light-color-background-active:#e6ebf0; /* Matches site.css's 60px top bar. typedoc computes --dim-header-height and every sticky offset from this one value, so the whole chrome follows. */ --dim-toolbar-contents-height:3.75rem; } /* ── typography ───────────────────────────────────────────────────────────────────────────────── * The default theme's stacks predate ui-sans-serif/ui-monospace; these are site.css's. */ body { font-family:var(--fim-sans); } code, pre, .tsd-signature { font-family:var(--fim-mono); } /* ── chrome: the same top bar and footer as the rest of the site ──────────────────────────────── * * These pages cannot share site.css, so the shared bar is reproduced against typedoc's own markup. * The structure is already close — a sticky bar with a title on the left and links pushed right by * `margin-right:auto`, exactly how .topbar/.wrap behave — so this is a restyle, not a rebuild. The * search field and the mobile menu trigger stay typedoc's; the site has no equivalent to copy. */ /* typedoc's .container is 1700px wide with 2rem gutters; every other page is .wrap at 1400/24px. * Matching it puts the brand, the content and the footer on one left edge across the whole site. * It also narrows the three-column reading measure a little, which is the intended trade. */ .container { max-width: 1400px; padding: 0 24px; } /* → site.css .topbar. The translucent-plus-blur background is what makes content scroll under the bar the way it does elsewhere; typedoc's default is a flat --color-background-secondary fill. */ .tsd-page-toolbar { background: color-mix(in srgb, var(--color-background) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-accent); } .tsd-page-toolbar .tsd-toolbar-contents { gap: 14px; } /* → site.css .topbar .brand. The and are spliced in by rewriteApiChrome() in scripts/build-site.mjs, because typedoc's `name` option takes a plain string only. */ .tsd-page-toolbar a.title { font: 600 15px/1 var(--fim-mono); letter-spacing: -.01em; } .tsd-page-toolbar a.title:hover { text-decoration: none; } .tsd-page-toolbar a.title span { color: var(--color-link); } .tsd-page-toolbar a.title em { font: 500 12px/1 var(--fim-sans); font-style: normal; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-aside); margin-left: 9px; padding-left: 9px; border-left: 1px solid var(--color-accent); } /* → site.css .topbar nav */ #tsd-toolbar-links { gap: 18px; margin-right: 14px; font-size: 14px; } #tsd-toolbar-links a { color: var(--color-text-aside); } #tsd-toolbar-links a:hover { color: var(--color-text); text-decoration: none; } /* ── footer ───────────────────────────────────────────────────────────────────────────────────── * The inner div is injected verbatim by `customFooterHtml` in typedoc.site.json; the