/* GENERATED — do not edit. Copied from scripts/docs-assets/site-docs.css — edit that file, not this one. Rebuild: pnpm build:docs */ /* ============================================================ sparrow docs — shell + palette reconciliation ------------------------------------------------------------ Loaded THIRD on every /docs page: 1. /docs/sparrow-docs.css the app's compiled CSS. Styles the `.doc` body (.doc*, .terminal*) and declares the --sparrow-* palette. Its Tailwind half lives in @layer, so any UNLAYERED rule here outranks it regardless of specificity. 2. /style.css the marketing site: design tokens (--bg, --ink, --accent …) plus the header/footer/button chrome this shell reuses verbatim. 3. /docs/site-docs.css this file — maps the app palette onto the site palette, undoes the app's app-shell assumptions, and lays out the docs page. Theme model is the app's: localStorage['sparrow:theme'] = auto|light|dark, where `auto` sets NO data-theme attribute and both stylesheets fall through to prefers-color-scheme. An inline snippet in applies it pre-paint. ============================================================ */ /* ---------- 1 · site tokens under an explicit theme override ---------- style.css only flips its palette inside @media (prefers-color-scheme: dark), so the toggle would otherwise move the .doc body but not the shell. Restate both palettes keyed on data-theme; (0,2,0) beats style.css's bare :root. */ :root[data-theme='light'] { color-scheme: light; --bg: #fbf9f4; --bg-tint: #f5f1e8; --surface: #ffffff; --surface-2: #fbf8f2; --ink: #1b1a24; --ink-2: #4a4757; --muted: #6c6879; --line: #e9e3d6; --line-2: #ddd5c4; --accent: #d1592a; --accent-ink: #b8481f; --code-bg: #1a1a24; --code-ink: #e7e3d8; --ring: #e8703a55; --shadow: 0 1px 2px #1b1a2408, 0 12px 32px -12px #1b1a241f; --shadow-lg: 0 2px 4px #1b1a240a, 0 30px 60px -20px #1b1a2426; --grad-soft: linear-gradient(120deg, #f2c14e22, #e8703a1a 52%, #c8456b22); } :root[data-theme='dark'] { color-scheme: dark; --bg: #0f0f16; --bg-tint: #14141f; --surface: #17171f; --surface-2: #1c1c27; --ink: #f3f1ea; --ink-2: #c8c5d2; --muted: #918da0; --line: #262433; --line-2: #322f42; --accent: #f2884f; --accent-ink: #f6a06f; --code-bg: #0b0b12; --code-ink: #e7e3d8; --ring: #f2884f66; --shadow: 0 1px 2px #0006, 0 12px 32px -12px #0009; --shadow-lg: 0 2px 4px #0007, 0 40px 80px -24px #000b; --grad-soft: linear-gradient(120deg, #f2c14e1f, #e8703a17 52%, #c8456b26); } /* ---------- 2 · map the app palette onto the site palette ---------- One accent, one paper, one ink across the whole page: the docs body picks up the site's vermilion instead of the app's amber. Written as var() aliases so a single block covers every theme — but at (0,2,0) so it outranks the app's own `:root:not([data-theme])` media-query palette. */ :root:not([data-theme]), :root[data-theme] { --sparrow-bg: var(--bg); --sparrow-panel: var(--surface); --sparrow-panel-2: var(--bg-tint); --sparrow-border: var(--line); --sparrow-border-strong: var(--line-2); --sparrow-text: var(--ink); --sparrow-muted: var(--ink-2); --sparrow-faint: var(--muted); --sparrow-accent: var(--accent); --sparrow-accent-2: var(--accent-ink); --sparrow-accent-soft: color-mix(in srgb, var(--accent) 12%, transparent); --sparrow-accent-glow: color-mix(in srgb, var(--accent) 22%, transparent); } /* ---------- 3 · undo the app's app-shell assumptions ---------- The app CSS is written for a full-height flex app inside #root; a document page needs the site's own body. style.css already restates background/color/ font, these are the leftovers. */ html, body { height: auto; } body.docs-body { min-height: 100%; } /* Tailwind preflight zeroes list markers app-wide; the footer/site lists want the site's own look, and .doc lists restore their own bullets already. */ .docs-body .footer ul, .docs-body .docs-nav, .docs-body .docs-toc-list { list-style: none; } /* ---------- 4 · layout ---------- The docs need a wider measure than the marketing pages, so the shared header and footer widen to match — otherwise the brand sits 80px inboard of the sidebar it is supposed to align with. */ .docs-body .site-header .wrap, .docs-body .footer .wrap { max-width: 1320px; } /* ---------- 4 · layout ---------- */ .docs-layout { display: grid; align-items: start; gap: 0 44px; grid-template-columns: 236px minmax(0, 1fr) 220px; width: 100%; max-width: 1320px; margin-inline: auto; padding: 34px 24px 88px; } .docs-side { grid-column: 1; grid-row: 1; } .docs-main { grid-column: 2; grid-row: 1; min-width: 0; } .docs-toc { grid-column: 3; grid-row: 1; } @media (min-width: 901px) { .docs-side, .docs-toc { position: sticky; top: 82px; max-height: calc(100vh - 106px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } } /* 901–1180: no room for three columns — the rail becomes a panel above the doc. */ @media (max-width: 1180px) { .docs-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 0 36px; } .docs-side { grid-row: 1 / span 2; } .docs-toc { grid-column: 2; grid-row: 1; position: static; max-height: none; margin-bottom: 26px; } .docs-main { grid-column: 2; grid-row: 2; } .docs-toc .docs-disc-body { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 14px 18px; } .docs-toc .docs-toc-list { border-left: 0; columns: 2; column-gap: 26px; } .docs-toc .docs-toc-list a { border-left: 0; padding-left: 0; } .docs-toc .docs-toc-list a.is-current { padding-left: 0; } } /* ---------- 5 · disclosures (mobile) ---------- Above 900px both nav blocks render open with no summary; below, they are real
the reader can fold away. ::details-content keeps that CSS-only in modern engines; docs.js sets `open` as a fallback for older ones. */ .docs-disc > summary { display: flex; align-items: center; gap: 10px; padding: 12px 15px; margin-bottom: 14px; cursor: pointer; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); font-size: .93rem; font-weight: 650; color: var(--ink); list-style: none; } .docs-disc > summary::-webkit-details-marker { display: none; } .docs-disc > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; flex: none; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s; } .docs-disc[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); } .docs-disc-hint { margin-left: auto; font-weight: 500; font-size: .86rem; color: var(--accent-ink); } .docs-disc[open] .docs-disc-hint { display: none; } .docs-disc > summary + * { padding-bottom: 8px; } @media (min-width: 901px) { .docs-disc > summary { display: none; } /* keep the panel visible whether or not `open` is set */ .docs-disc::details-content { content-visibility: visible; block-size: auto; overflow: visible; } } .docs-side-head { margin: 0 0 12px; padding-left: 12px; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } @media (max-width: 900px) { .docs-side-head { display: none; } } /* ---------- 6 · sidebar ---------- */ .docs-nav { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .docs-nav-link { display: block; padding: 8px 12px; border-radius: 9px; font-size: .95rem; font-weight: 550; color: var(--ink-2); transition: color .18s, background .18s; } .docs-nav-link:hover { color: var(--ink); background: var(--bg-tint); } .docs-nav-link.is-current { color: var(--accent-ink); font-weight: 650; background: var(--grad-soft); box-shadow: inset 0 0 0 1px var(--ring); } /* ---------- 7 · on this page ---------- */ .docs-toc-list { margin: 0; padding: 0; border-left: 1px solid var(--line); } .docs-toc-list a { display: block; padding: 5px 12px; margin-left: -1px; border-left: 2px solid transparent; font-size: .87rem; line-height: 1.4; color: var(--muted); transition: color .18s, border-color .18s; } .docs-toc-list .lvl-3 a { padding-left: 26px; font-size: .84rem; } .docs-toc-list a:hover { color: var(--ink); } .docs-toc-list a.is-current { color: var(--accent-ink); border-left-color: var(--accent); font-weight: 600; } /* ---------- 8 · doc column ---------- */ .docs-eyebrow { margin-bottom: 14px; } .doc { font-size: 16px; line-height: 1.65; } /* Prose gets a readable measure (~78 chars); terminals and tables keep the full column, so a wide command line fits instead of scrolling. */ .doc > p, .doc > ul, .doc > ol, .doc > blockquote { max-width: 40rem; } /* the app sizes its headings against a 14px body; hold the same proportions at 16px */ .doc h1 { font-size: 2.17rem; margin-bottom: 1rem; } .doc h2 { font-size: 1.43rem; margin-top: 2.6rem; } .doc h3 { font-size: 1.14rem; margin-top: 1.9rem; } .doc h2[id], .doc h3[id] { scroll-margin-top: 92px; } .doc > p:first-of-type { font-size: 1.06rem; color: var(--ink-2); } /* inline code: the site's treatment, not the app's panel chip */ .doc code { background: var(--bg-tint); border: 1px solid var(--line); color: var(--accent-ink); border-radius: 6px; padding: 1px 6px; font-size: .84em; } .doc a { text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); } /* code blocks read as the site's dark `.code` cards in BOTH themes — the same move the homepage makes, so a light-mode reader sees one consistent terminal */ .doc .terminal { background: var(--code-bg); border-color: var(--line-2); border-radius: 14px; box-shadow: var(--shadow); margin: 1.15rem 0; } .doc .terminal-bar { background: #ffffff08; border-bottom-color: #ffffff12; } .doc .terminal-bar .mono { color: #ffffff8c; } .doc .terminal-body { color: var(--code-ink); padding: 16px 18px; font-size: 12.8px; } .doc .terminal-body code { color: inherit; } .doc .terminal button { background: #ffffff14; border-color: #ffffff2b; color: #ffffffb8; font-weight: 600; cursor: pointer; } .doc .terminal button:hover { background: #ffffff26; border-color: #ffffff40; color: #fff; } .doc .terminal button.is-copied { color: #7fd18b; border-color: #7fd18b55; background: #7fd18b1f; } .doc-table-wrap { border-radius: 12px; border-color: var(--line); background: var(--surface); } .doc thead th { background: var(--bg-tint); } /* ---------- 9 · pager ---------- */ .docs-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--line); } .docs-pager-link { display: flex; flex-direction: column; gap: 3px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); transition: border-color .2s, transform .2s, box-shadow .2s; } .docs-pager-link:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .docs-pager-link:last-child { text-align: right; } .docs-pager-dir { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .docs-pager-title { font-weight: 650; color: var(--ink); } /* ---------- 10 · theme toggle ---------- */ .theme-toggle { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); color: var(--ink-2); cursor: pointer; transition: color .18s, border-color .18s, background .18s; } .theme-toggle:hover { color: var(--accent-ink); border-color: var(--accent); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .ico-sun { display: none; } :root[data-theme='dark'] .theme-toggle .ico-sun { display: block; } :root[data-theme='dark'] .theme-toggle .ico-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .theme-toggle .ico-sun { display: block; } :root:not([data-theme='light']) .theme-toggle .ico-moon { display: none; } } /* ---------- 11 · responsive ---------- */ @media (max-width: 900px) { .docs-layout { grid-template-columns: minmax(0, 1fr); padding: 22px 20px 64px; } .docs-side, .docs-main, .docs-toc { grid-column: 1; grid-row: auto; } .docs-toc { margin-bottom: 4px; } .docs-toc .docs-disc-body { border: 0; background: none; padding: 0; } .docs-toc .docs-toc-list { columns: 1; border-left: 1px solid var(--line); } .docs-toc .docs-toc-list a { border-left: 2px solid transparent; padding-left: 12px; } .docs-toc .docs-toc-list .lvl-3 a { padding-left: 26px; } .doc > p, .doc > ul, .doc > ol, .doc > blockquote { max-width: none; } .doc h1 { font-size: 1.95rem; } .doc h2 { font-size: 1.3rem; } .docs-pager { grid-template-columns: 1fr; } .docs-pager-link:last-child { text-align: left; } } @media (max-width: 640px) { .docs-layout { padding-inline: 16px; } .doc { font-size: 15.5px; } .doc .terminal-body { font-size: 12px; padding: 13px 14px; } /* the header hides .nav-links here; keep the toggle reachable */ .nav-right .theme-toggle { display: grid; } }