/* Public API reference chrome + Scalar ↔ Ognate design-system bridge. Tokens come from /design-system/ognate.css (published into the docs bucket by scripts/publish.sh). flips the og-* semantic tokens; docs.js mirrors the same state into Scalar (forceDarkModeState), which sets .dark-mode/.light-mode on . The bridge below maps Scalar's theme variables onto og-* tokens once — `body.x-mode` outranks Scalar's own `.x-mode` rules — so both modes follow the design system automatically. */ :root { /* Scalar offsets its sidebar + content by this; the header must match. */ --scalar-custom-header-height: 48px; } body { margin: 0; background: var(--og-bg-base); color: var(--og-text-primary); font-family: var(--og-font-body); } /* ── Scalar theme bridge ─────────────────────────────────── */ body.dark-mode, body.light-mode { --scalar-background-1: var(--og-bg-base); --scalar-background-2: var(--og-bg-surface); --scalar-background-3: var(--og-bg-elevated); --scalar-background-accent: var(--og-accent-soft); --scalar-color-1: var(--og-text-primary); --scalar-color-2: var(--og-text-secondary); --scalar-color-3: var(--og-text-muted); --scalar-color-accent: var(--og-accent); --scalar-border-color: var(--og-border-default); --scalar-font: var(--og-font-body); --scalar-font-code: var(--og-font-mono); --scalar-radius: var(--og-r-sm); --scalar-radius-lg: var(--og-r-md); --scalar-radius-xl: var(--og-r-lg); --scalar-color-green: var(--og-success); --scalar-color-red: var(--og-danger); --scalar-color-yellow: var(--og-warning); --scalar-color-orange: var(--og-warning); --scalar-color-blue: var(--og-info); --scalar-color-purple: var(--og-alt); } body.dark-mode .sidebar, body.light-mode .sidebar { --scalar-sidebar-background-1: var(--og-bg-deep); --scalar-sidebar-border-color: var(--og-border-subtle); --scalar-sidebar-color-1: var(--og-text-primary); --scalar-sidebar-color-2: var(--og-text-secondary); --scalar-sidebar-color-active: var(--og-accent); --scalar-sidebar-item-hover-color: var(--og-text-primary); --scalar-sidebar-item-hover-background: var(--og-bg-surface); --scalar-sidebar-item-active-background: var(--og-accent-soft); --scalar-sidebar-search-background: var(--og-bg-surface); --scalar-sidebar-search-border-color: var(--og-border-default); --scalar-sidebar-search-color: var(--og-text-muted); } /* ── Header ──────────────────────────────────────────────── */ .docs-header { position: sticky; top: 0; z-index: 100; box-sizing: border-box; height: var(--scalar-custom-header-height); display: flex; align-items: center; justify-content: space-between; gap: var(--og-sp-4); padding: 0 var(--og-sp-4); background: var(--og-bg-bar); color: var(--og-text-primary); border-bottom: 1px solid var(--og-border-default); } .docs-header__title { font-family: var(--og-font-display); font-weight: 600; font-size: 0.95rem; } .docs-header__actions { display: flex; align-items: center; gap: var(--og-sp-2); } @media (max-width: 640px) { .docs-header__actions span { display: none; } /* icon-only downloads */ }