@dogsbay/format-astro 0.2.0-beta.15 → 0.2.0-beta.150

package/dist/theme-css.js

@@ -0,0 +1,683 @@
+/**
+ * The stylesheets a generated Astro site starts from: global.css
+ * (generateGlobalCss: element display rules, .docs-prose, the tone safelist)
+ * and theme.css (themeCss: the Tailwind theme mapping plus a preset's tokens).
+ *
+ * Pure (no I/O; it imports only the tone palette) so other packages can use
+ * the same strings: @dogsbay/render-html bundles this module to write its
+ * css/ (packages/render-html/scripts/sources.mjs), which dogsbay-ssg and the
+ * single-page renderer use.
+ */
+import { TONE_CLASSES, CARD_TONE_CLASSES, TAB_VARIANTS, THEME_SCOPES } from "./tone-classes.js";
+// ── CSS generation (ported from import-mkdocs.ts) ───────
+/**
+ * Build the `@source inline("...")` directive that pins the
+ * grid-tone palette into the generated stylesheet.
+ *
+ * Why we need it: tone classes like `bg-primary/10` only appear in
+ * `.astro` pages emitted by Dogsbay's grid-item serializer. When
+ * Tailwind's content scanner doesn't pick them up — because the
+ * page lives outside the default scan globs, or because a class
+ * is composed at the boundary of an interpolation — they get
+ * purged. Result observed in dogsbay-docs-markdown audit: half
+ * the grid demo cells render with no background. Pinning forces
+ * generation regardless of scanner reach.
+ *
+ * Single source of truth: derived from TONE_CLASSES so any new
+ * tone added to the palette is automatically safelisted.
+ */
+export function buildToneSafelist() {
+    const seen = new Set();
+    for (const classes of Object.values(TONE_CLASSES)) {
+        for (const cls of classes.split(/\s+/)) {
+            if (cls)
+                seen.add(cls);
+        }
+    }
+    return [...seen].sort().join(" ");
+}
+/**
+ * The same pin for the variant, tone and theme-scope tables
+ * (plans/dita-variants-themes.md). A line of its own, marked ASTRO-ONLY:
+ * render-html copies this stylesheet, and a renderer that compiles from the
+ * page's own classes (render-html, dogsbay-ssg) needs no safelist — there it
+ * put every variant's classes on every page (scripts/sources.mjs drops it).
+ */
+export function buildVariantSafelist() {
+    const seen = new Set();
+    const sources = [
+        ...Object.values(CARD_TONE_CLASSES),
+        ...Object.values(TAB_VARIANTS).flatMap((v) => [v.list, v.trigger]),
+        ...Object.values(THEME_SCOPES),
+    ];
+    for (const classes of sources)
+        for (const cls of classes.split(/\s+/))
+            if (cls)
+                seen.add(cls);
+    return [...seen].sort().join(" ");
+}
+export function generateGlobalCss() {
+    return `@import "tailwindcss";
+@import "./theme.css";
+
+/* Custom elements have no user-agent style, so an unstyled one is
+   display:inline — on which w-full does nothing and a border paints
+   as detached fragments rather than around the content. @dogsbay/elements
+   injects these same defaults at runtime, which is what reaches EXISTING
+   sites (global.css is scaffolded once and never rewritten). Having them
+   here too means a new site is correct at CSS time, with no flash before
+   the module script runs.
+
+   :where() keeps specificity at zero, so any utility class wins. */
+:where(db-tabs, db-accordion, db-collapsible, db-card, db-steps, db-code-block) {
+  display: block;
+}
+:where(db-link-button) {
+  display: inline-block;
+}
+
+/* Scan @dogsbay packages for Tailwind classes */
+@source "../../node_modules/@dogsbay/ui/src";
+@source "../../node_modules/@dogsbay/docs-layout/src";
+
+/* Pin the grid-tone palette. These classes are emitted into
+   markdown-generated .astro pages by the grid-item serializer
+   (TONE_CLASSES in @dogsbay/format-astro). Without inlining,
+   opacity-modified utilities like bg-primary/10 get purged when
+   Tailwind doesn't see them in the scanned globs, leaving grid
+   demo cells with no visible background. */
+@source inline("${buildToneSafelist()}");
+@source inline("${buildVariantSafelist()}"); /* ASTRO-ONLY: variants, tones, theme scopes */
+
+/* Prose typography for rendered content.
+   Every element rule is guarded with :not(.dba-api *): API-reference
+   regions (ApiLayout root carries the dba-api marker) compose their own
+   typography from utility classes, and unguarded .docs-prose rules would
+   out-specify them. The guard lets mixed prose+endpoint pages (MDX
+   imports) keep full typography outside the cards. */
+.docs-prose {
+  line-height: 1.7;
+
+  /* A heading that is part of a component (a card title: h3.not-prose) keeps the component look */
+  & h1:not(.dba-api *):not(.not-prose) { font-family: var(--font-heading); font-size: 2rem; font-weight: 700; margin-top: 0; margin-bottom: 1rem; line-height: 1.2; letter-spacing: -0.025em; }
+  & h2:not(.dba-api *):not(.not-prose) { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 600; margin-top: 2.5rem; margin-bottom: 0.75rem; line-height: 1.3; border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; letter-spacing: -0.015em; }
+  & h3:not(.dba-api *):not(.not-prose) { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600; margin-top: 2rem; margin-bottom: 0.5rem; line-height: 1.4; }
+  & h4:not(.dba-api *):not(.not-prose) { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.5rem; }
+
+  & p:not(.dba-api *) { margin-top: 0.75rem; margin-bottom: 0.75rem; }
+
+  /* The :not([data-variant]) guard exempts anchors that ARE components. A
+     link-button renders as an <a> carrying bg-primary + text-primary-foreground
+     and a data-variant attribute, and this rule repainted its text with
+     var(--primary) — primary on primary: an unreadable solid block in light
+     mode, a blank one in dark. The secondary variant survived only because its
+     background is light enough to read primary-coloured text, which is why it
+     looked like a colour bug in one button rather than a cascade bug in both.
+     (No backticks in this comment: the whole stylesheet is a template
+     literal.) */
+  /* Not a whole-card link (LinkCard, the video card: \`a.not-prose\`): its underline ran under every line of the card */
+  & a:not(.dba-api *):not([data-variant]):not(.not-prose) { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
+  & a:hover:not(.dba-api *):not([data-variant]):not(.not-prose) { opacity: 0.8; }
+
+  & strong:not(.dba-api *) { font-weight: 600; }
+  & code:not(.dba-api *) { font-size: 0.875em; padding: 0.15em 0.35em; border-radius: 0.25rem; background: var(--muted); font-family: var(--font-code, ui-monospace, monospace); }
+  & pre code:not(.dba-api *) { padding: 0; background: none; font-size: 1em; }
+
+  /* Spacing between consecutive block elements (code blocks, alerts, etc.) */
+  & > * + * { margin-top: 0.75rem; }
+  & li > * + *:not(.dba-api *) { margin-top: 0.75rem; }
+
+  & ul:not(.dba-api *) { list-style: disc; padding-left: 1.5rem; margin: 0.75rem 0; }
+  /* Not a step list, nor a list inside one: Steps.astro draws their numbers as circles, and this
+     rule (one class and an element) outranked its .steps-list { list-style: none }, so each step
+     showed its "2." beside its circle */
+  & ol:not(.dba-api *):not(.steps-list, .sub-steps-list, .steps-list ol) { list-style: decimal; padding-left: 1.5rem; margin: 0.75rem 0; }
+  & li:not(.dba-api *) { margin: 0.25rem 0; }
+  & li > ul:not(.dba-api *), & li > ol:not(.dba-api *) { margin: 0.25rem 0; }
+  /* A file tree draws its own folder and file icons (files/markup.ts): the list rules above gave it bullets too */
+  & [data-component="files"] ul:not(.dba-api *) { list-style: none; padding-left: 0; }
+  & [data-component="files"] li > ul:not(.dba-api *) { padding-left: 1rem; }
+
+  & blockquote:not(.dba-api *) { border-left: 4px solid var(--border); padding-left: 1rem; color: var(--muted-foreground); font-style: italic; margin: 1rem 0; }
+
+  & hr:not(.dba-api *) { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }
+
+  & table:not(.dba-api *) { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.875rem; }
+  & th:not(.dba-api *) { text-align: left; vertical-align: bottom; font-weight: 600; padding: 0.5rem; border-bottom: 2px solid var(--border); }
+  & td:not(.dba-api *) { padding: 0.5rem; vertical-align: top; border-bottom: 1px solid var(--border); }
+  /* A table's caption is its title, above it; the same for Table components and raw HTML tables */
+  & caption:not(.dba-api *) { caption-side: top; text-align: left; font-weight: 500; color: var(--foreground); padding-bottom: 0.5rem; }
+
+    /* Tailwind Preflight sets display: block on every img, which turns an
+       INLINE icon into its own line and splits the sentence around it —
+       AsciiDoc UI macros render mid-step and were breaking every procedure
+       that used one. inline-block restores the flow and leaves a standalone
+       image (the only child of its paragraph) looking exactly as before. */
+    & img:not(.dba-api *) { display: inline-block; max-width: 100%; border-radius: 0.5rem; }
+    /* A standalone image — the only child of its paragraph — keeps block
+       layout, so the vertical rhythm and the absence of baseline descender
+       space are exactly what they were before inline icons were fixed. */
+    & p > img:only-child:not(.dba-api *) { display: block; }
+
+  & .heading-anchor { text-decoration: none; opacity: 0; margin-right: 0.25rem; transition: opacity 0.2s; }
+  & h1:hover .heading-anchor, & h2:hover .heading-anchor, & h3:hover .heading-anchor, & h4:hover .heading-anchor { opacity: 0.4; }
+
+  /* Raw HTML <details> only. CollapsibleAlert (:::details, collapsible
+     callouts) is a <details> too, with its own border and spacing; it
+     carries data-variant, and without the exclusion it got a second border
+     and 1rem of padding around its title bar. */
+  & details:not(.dba-api *):not([data-variant]) { border: 1px solid var(--border); border-radius: 0.5rem; padding: 1rem; margin: 1rem 0; }
+  & summary:not(.dba-api *) { cursor: pointer; font-weight: 600; }
+
+  /* mark is emitted by the highlight directive AND can arrive as raw HTML
+     from an importer. Without a rule here it renders as the browser default
+     yellow, which clashes in light mode and is unreadable on a dark page
+     (nothing declares color-scheme). Token-based so it follows the theme. */
+  & mark:not(.dba-api *) { background: var(--dsb-mark-bg, rgb(254 240 138 / 0.6)); color: inherit; border-radius: 0.125rem; padding: 0 0.125rem; }
+  &:where(.dark *) mark:not(.dba-api *), .dark & mark:not(.dba-api *) { background: var(--dsb-mark-bg-dark, rgb(234 179 8 / 0.3)); }
+
+  & dl:not(.dba-api *) { margin: 1rem 0; }
+  & dt:not(.dba-api *) { font-weight: 600; margin-top: 0.75rem; }
+  & dd:not(.dba-api *) { margin-left: 1.5rem; color: var(--muted-foreground); }
+
+  /* In-cell admonitions. Inside a raw HTML table cell nothing
+     markdown-native works, so the AsciiDoc engine emits a neutral
+     dl.db-admonition shape (DD-010) and this rule renders it as a compact
+     callout box — same contract the Obsidian plugin styles. Per-type
+     accent from theme tokens; overrides the generic dl/dt/dd rules above. */
+  & dl.db-admonition {
+    margin: 0.75rem 0;
+    padding: 0.5rem 0.75rem;
+    border-left: 3px solid var(--info);
+    border-radius: 0.25rem;
+    background: color-mix(in oklab, var(--info) 8%, transparent);
+  }
+  /* The LABEL blends the accent toward the foreground; the border and the
+     tint keep the accent at full strength, so the callout still reads as
+     its colour while the text stays legible.
+  
+     Measured from painted pixels on a real page, light mode, 13px/600 —
+     the accent used raw is a genuine AA failure, not one of axe's oklch
+     misreads:
+  
+       --info        raw 2.18:1   mixed 5.66:1
+       --warning     raw 2.25:1   mixed 5.74:1
+       --destructive raw 5.97:1   mixed 10.98:1
+  
+     Mixed with var(--foreground), not black, on purpose. Black fixes
+     light and BREAKS dark: 70% black measures 5.21:1 light but 3.25:1
+     dark, because the tint it sits on is dark too. --foreground is
+     near-black in light and near-white in dark, so one rule serves both
+     (dark measures 10.96 / 10.87 / 9.79). A fixed colour used in both
+     themes is a bug waiting. */
+  & dl.db-admonition > dt {
+    margin-top: 0;
+    font-weight: 600;
+    font-size: 0.8125rem;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+    color: color-mix(in oklab, var(--info) 60%, var(--foreground));
+  }
+  & dl.db-admonition > dd { margin-left: 0; margin-top: 0.25rem; color: var(--foreground); }
+  & dl.db-admonition-warning, & dl.db-admonition-caution {
+    border-left-color: var(--warning);
+    background: color-mix(in oklab, var(--warning) 8%, transparent);
+  }
+  & dl.db-admonition-warning > dt, & dl.db-admonition-caution > dt { color: color-mix(in oklab, var(--warning) 60%, var(--foreground)); }
+  & dl.db-admonition-important {
+    border-left-color: var(--destructive);
+    background: color-mix(in oklab, var(--destructive) 8%, transparent);
+  }
+  & dl.db-admonition-important > dt { color: color-mix(in oklab, var(--destructive) 60%, var(--foreground)); }
+
+  /* Granularity book-view affordances (plans/granularity-views.md):
+     "Read as single page →" on topics, "Open as page ↗" on book sections.
+     Deliberately subtle/muted — the book has one per section. */
+  & .dsb-read-single-page {
+    display: inline-block;
+    margin: 0 0 1.25rem;
+    font-size: 0.8125rem;
+    color: var(--muted-foreground);
+    text-decoration: none;
+  }
+  & .dsb-read-single-page:hover { color: var(--foreground); text-decoration: underline; }
+  & .dsb-open-as-page { margin: -0.25rem 0 0.5rem; font-size: 0.75rem; }
+  & .dsb-open-as-page a { color: var(--muted-foreground); text-decoration: none; }
+  & .dsb-open-as-page a:hover { color: var(--foreground); text-decoration: underline; }
+
+  /* AsciiDoc block roles ([role="x"] / [.x]) preserved as classes (#384).
+     _abstract marks a module's lead/intro paragraph; .lead/.small are
+     Asciidoctor built-ins; _additional-resources marks the trailing
+     "Additional resources" section heading. */
+  & ._abstract, & .abstract, & .lead {
+    font-size: 1.05rem;
+    line-height: 1.6;
+    color: var(--muted-foreground);
+  }
+  & .small { font-size: 0.875rem; }
+  & h2._additional-resources, & h3._additional-resources {
+    font-size: 1.15rem;
+    margin-top: 2rem;
+  }
+
+  /* Related resources (#384 R3): [role="_additional-resources"] + .Title +
+     list folds to a <section class="related-resources"> (→ DITA related-links). */
+  & .related-resources {
+    margin-top: 2rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--border);
+  }
+  & .related-resources-title {
+    font-weight: 600;
+    margin: 0 0 0.5rem;
+  }
+}
+
+@utility scrollbar-none {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+`;
+}
+// ── Theme presets ───────────────────────────────────────
+const THEME_DEFAULT = {
+    light: `:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0.014 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0.014 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0.014 285.823);
+  --primary: oklch(0.205 0.014 285.823);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.965 0.001 286.375);
+  --secondary-foreground: oklch(0.205 0.014 285.823);
+  --muted: oklch(0.965 0.001 286.375);
+  --muted-foreground: oklch(0.45 0.014 285.938);
+  --accent: oklch(0.965 0.001 286.375);
+  --accent-foreground: oklch(0.205 0.014 285.823);
+  --destructive: oklch(0.45 0.245 27.325);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(0.922 0.004 286.32);
+  --input: oklch(0.922 0.004 286.32);
+  --ring: oklch(0.708 0.014 285.823);
+  --radius: 0.625rem;
+  --note: oklch(0.637 0.174 259.126);
+  --note-foreground: var(--foreground);
+  --abstract: oklch(0.691 0.148 221.723);
+  --info: oklch(0.722 0.128 207.084);
+  --tip: oklch(0.731 0.112 178.627);
+  --success: oklch(0.754 0.175 149.577);
+  --question: oklch(0.809 0.19 126.526);
+  --warning: oklch(0.74 0.175 62.778);
+  --failure: oklch(0.614 0.194 21.602);
+  --danger: oklch(0.577 0.245 16.439);
+  --bug: oklch(0.548 0.258 349.761);
+  --example: oklch(0.534 0.222 286.033);
+  --quote: oklch(0.65 0 0);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0.014 285.823);
+  --sidebar-primary: oklch(0.205 0.014 285.823);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.965 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.205 0.014 285.823);
+  --sidebar-border: oklch(0.922 0.004 286.32);
+  --sidebar-ring: oklch(0.708 0.014 285.823);
+  --code-background: oklch(0.965 0.004 264);
+  --code-foreground: oklch(0.3 0.014 253.833);
+
+  /* API reference — always-dark code panel */
+  --api-panel-bg: oklch(0.145 0.014 253.833);
+  --api-panel-fg: oklch(0.926 0.013 253.833);
+
+  /* API semantic colors — HTTP methods, types, status codes */
+  /* Light mode: darkened for WCAG AA on the 20%/10% tints. See .dark. */
+  --api-get: oklch(0.435 0.095 162);
+  --api-post: oklch(0.45 0.174 259);
+  --api-put: oklch(0.455 0.105 63);
+  --api-patch: oklch(0.455 0.13 45);
+  --api-delete: oklch(0.45 0.179 22);
+  --api-head: oklch(0.47 0.222 286);
+  --api-required: oklch(0.45 0.179 22);
+  --api-deprecated: oklch(0.455 0.105 63);
+  /* A field name in an operation's description (\`id\`, \`name\`): the JSON
+     key colour of the highlighted examples (github-light-default #0550ae). */
+  --api-field: oklch(0.47 0.16 254);
+  --api-type-string: oklch(0.435 0.095 162);
+  --api-type-number: oklch(0.45 0.174 259);
+  --api-type-boolean: oklch(0.455 0.105 63);
+  --api-type-object: oklch(0.47 0.222 286);
+  --api-type-array: oklch(0.455 0.13 45);
+  --api-status-2xx: oklch(0.435 0.095 162);
+  --api-status-3xx: oklch(0.45 0.174 259);
+  --api-status-4xx: oklch(0.455 0.105 63);
+  --api-status-5xx: oklch(0.45 0.179 22);
+
+  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-heading: var(--font-sans);
+  --font-code: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+}`,
+    dark: `.dark {
+  --background: oklch(0.145 0.014 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0.014 285.823);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0.014 285.823);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0.014 285.823);
+  --secondary: oklch(0.269 0.007 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0.007 286.033);
+  --muted-foreground: oklch(0.708 0.014 285.823);
+  --accent: oklch(0.269 0.007 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.145 0.014 285.823);
+  --border: oklch(0.269 0.007 286.033);
+  --input: oklch(0.269 0.007 286.033);
+  --ring: oklch(0.439 0.01 286.375);
+  --note-foreground: var(--foreground);
+  --sidebar: oklch(0.205 0.014 285.823);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0.007 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0.007 286.033);
+  --sidebar-ring: oklch(0.439 0.01 286.375);
+  --code-background: oklch(0.18 0.014 253.833);
+  --code-foreground: oklch(0.926 0.013 253.833);
+
+  /* API semantic colors — lightened for dark mode (AA on 20%/10% tints). */
+  --api-get: oklch(0.720 0.135 162);
+  --api-post: oklch(0.755 0.174 259);
+  --api-put: oklch(0.745 0.15 63);
+  --api-patch: oklch(0.725 0.18 45);
+  --api-delete: oklch(0.805 0.194 22);
+  --api-head: oklch(0.740 0.182 286);
+  --api-required: oklch(0.805 0.194 22);
+  --api-deprecated: oklch(0.745 0.15 63);
+  --api-field: oklch(0.79 0.11 245); /* github-dark-default #79c0ff */
+  --api-type-string: oklch(0.690 0.135 162);
+  --api-type-number: oklch(0.725 0.174 259);
+  --api-type-boolean: oklch(0.720 0.15 63);
+  --api-type-object: oklch(0.740 0.182 286);
+  --api-type-array: oklch(0.725 0.18 45);
+  --api-status-2xx: oklch(0.720 0.135 162);
+  --api-status-3xx: oklch(0.755 0.174 259);
+  --api-status-4xx: oklch(0.770 0.15 63);
+  --api-status-5xx: oklch(0.805 0.194 22);
+}`,
+};
+/**
+ * Mintlify-inspired theme — clean, neutral palette matching modern doc sites.
+ *
+ * Extracted from Claude Code docs (Mintlify):
+ * - White background, near-black text
+ * - Serif display font for H1, sans-serif body
+ * - Soft colored callout backgrounds (blue note, green tip, amber warning)
+ * - Rounded callout borders (16px radius)
+ * - Light gray code background, JetBrains Mono
+ */
+const THEME_MINTLIFY = {
+    light: `:root {
+  --background: oklch(0.993 0.005 95);
+  --foreground: oklch(0.15 0.01 260);
+  --card: oklch(0.993 0.005 95);
+  --card-foreground: oklch(0.15 0.01 260);
+  --popover: oklch(0.993 0.005 95);
+  --popover-foreground: oklch(0.15 0.01 260);
+  --primary: oklch(0.15 0.01 260);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0.002 260);
+  --secondary-foreground: oklch(0.15 0.01 260);
+  --muted: oklch(0.97 0.002 260);
+  --muted-foreground: oklch(0.45 0.01 260);
+  --accent: oklch(0.97 0.002 260);
+  --accent-foreground: oklch(0.15 0.01 260);
+  --destructive: oklch(0.55 0.22 25);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(0.91 0.004 260);
+  --input: oklch(0.91 0.004 260);
+  --ring: oklch(0.7 0.01 260);
+  --radius: 1rem;
+  /* Callout colors — soft pastel backgrounds matching Mintlify */
+  --note: oklch(0.62 0.18 260);
+  --note-foreground: var(--foreground);
+  --abstract: oklch(0.65 0.14 220);
+  --info: oklch(0.65 0.14 230);
+  --tip: oklch(0.65 0.16 155);
+  --success: oklch(0.65 0.16 155);
+  --question: oklch(0.7 0.15 270);
+  --warning: oklch(0.7 0.15 75);
+  --failure: oklch(0.6 0.2 25);
+  --danger: oklch(0.55 0.22 25);
+  --bug: oklch(0.55 0.22 350);
+  --example: oklch(0.55 0.2 285);
+  --quote: oklch(0.55 0 0);
+  /* Sidebar */
+  --sidebar: oklch(0.993 0.005 95);
+  --sidebar-foreground: oklch(0.15 0.01 260);
+  --sidebar-primary: oklch(0.15 0.01 260);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0.002 260);
+  --sidebar-accent-foreground: oklch(0.15 0.01 260);
+  --sidebar-border: oklch(0.93 0.004 260);
+  --sidebar-ring: oklch(0.7 0.01 260);
+  /* Code — light gray background, matching Mintlify's inline code */
+  --code-background: oklch(0.96 0.003 260);
+  --code-foreground: oklch(0.25 0.01 260);
+
+  /* API reference — always-dark code panel */
+  --api-panel-bg: oklch(0.145 0.014 253.833);
+  --api-panel-fg: oklch(0.926 0.013 253.833);
+
+  /* API semantic colors — HTTP methods, types, status codes */
+  /* Light mode: darkened for WCAG AA on the 20%/10% tints. See .dark. */
+  --api-get: oklch(0.435 0.095 162);
+  --api-post: oklch(0.45 0.174 259);
+  --api-put: oklch(0.455 0.105 63);
+  --api-patch: oklch(0.455 0.13 45);
+  --api-delete: oklch(0.45 0.179 22);
+  --api-head: oklch(0.47 0.222 286);
+  --api-required: oklch(0.45 0.179 22);
+  --api-deprecated: oklch(0.455 0.105 63);
+  /* A field name in an operation's description (\`id\`, \`name\`): the JSON
+     key colour of the highlighted examples (github-light-default #0550ae). */
+  --api-field: oklch(0.47 0.16 254);
+  --api-type-string: oklch(0.435 0.095 162);
+  --api-type-number: oklch(0.45 0.174 259);
+  --api-type-boolean: oklch(0.455 0.105 63);
+  --api-type-object: oklch(0.47 0.222 286);
+  --api-type-array: oklch(0.455 0.13 45);
+  --api-status-2xx: oklch(0.435 0.095 162);
+  --api-status-3xx: oklch(0.45 0.174 259);
+  --api-status-4xx: oklch(0.455 0.105 63);
+  --api-status-5xx: oklch(0.45 0.179 22);
+
+  /* Fonts — system sans for body, JetBrains Mono for code */
+  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-heading: var(--font-sans);
+  --font-code: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}`,
+    dark: `.dark {
+  --background: oklch(0.16 0.01 260);
+  --foreground: oklch(0.93 0.005 260);
+  --card: oklch(0.18 0.01 260);
+  --card-foreground: oklch(0.93 0.005 260);
+  --popover: oklch(0.18 0.01 260);
+  --popover-foreground: oklch(0.93 0.005 260);
+  --primary: oklch(0.93 0.005 260);
+  --primary-foreground: oklch(0.16 0.01 260);
+  --secondary: oklch(0.22 0.008 260);
+  --secondary-foreground: oklch(0.93 0.005 260);
+  --muted: oklch(0.22 0.008 260);
+  --muted-foreground: oklch(0.65 0.01 260);
+  --accent: oklch(0.22 0.008 260);
+  --accent-foreground: oklch(0.93 0.005 260);
+  --destructive: oklch(0.65 0.2 25);
+  --destructive-foreground: oklch(0.16 0.01 260);
+  --border: oklch(0.28 0.008 260);
+  --input: oklch(0.28 0.008 260);
+  --ring: oklch(0.45 0.01 260);
+  --note-foreground: var(--foreground);
+  --sidebar: oklch(0.16 0.01 260);
+  --sidebar-foreground: oklch(0.93 0.005 260);
+  --sidebar-primary: oklch(0.55 0.2 260);
+  --sidebar-primary-foreground: oklch(0.93 0.005 260);
+  --sidebar-accent: oklch(0.22 0.008 260);
+  --sidebar-accent-foreground: oklch(0.93 0.005 260);
+  --sidebar-border: oklch(0.28 0.008 260);
+  --sidebar-ring: oklch(0.45 0.01 260);
+  --code-background: oklch(0.2 0.01 260);
+  --code-foreground: oklch(0.9 0.01 260);
+
+  /* API semantic colors — lightened for dark mode (AA on 20%/10% tints). */
+  --api-get: oklch(0.720 0.135 162);
+  --api-post: oklch(0.755 0.174 259);
+  --api-put: oklch(0.745 0.15 63);
+  --api-patch: oklch(0.725 0.18 45);
+  --api-delete: oklch(0.805 0.194 22);
+  --api-head: oklch(0.740 0.182 286);
+  --api-required: oklch(0.805 0.194 22);
+  --api-deprecated: oklch(0.745 0.15 63);
+  --api-field: oklch(0.79 0.11 245); /* github-dark-default #79c0ff */
+  --api-type-string: oklch(0.690 0.135 162);
+  --api-type-number: oklch(0.725 0.174 259);
+  --api-type-boolean: oklch(0.720 0.15 63);
+  --api-type-object: oklch(0.740 0.182 286);
+  --api-type-array: oklch(0.725 0.18 45);
+  --api-status-2xx: oklch(0.720 0.135 162);
+  --api-status-3xx: oklch(0.755 0.174 259);
+  --api-status-4xx: oklch(0.770 0.15 63);
+  --api-status-5xx: oklch(0.805 0.194 22);
+}`,
+};
+/** The theme presets by name. A name not here falls back to "default", as writeThemeFile always did. */
+export const THEMES = { default: THEME_DEFAULT, mintlify: THEME_MINTLIFY };
+/** A site's src/styles/theme.css for a preset: the Tailwind theme mapping plus the preset's tokens. */
+export function themeCss(themeName) {
+    const tokens = themeName === "mintlify" ? THEME_MINTLIFY : THEME_DEFAULT;
+    return `@custom-variant dark (&:where(.dark, .dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  /* Sidebar */
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  /* Admonition colors */
+  --color-note: var(--note);
+  --color-note-foreground: var(--note-foreground);
+  --color-abstract: var(--abstract);
+  --color-info: var(--info);
+  --color-tip: var(--tip);
+  --color-success: var(--success);
+  --color-question: var(--question);
+  --color-warning: var(--warning);
+  --color-failure: var(--failure);
+  --color-danger: var(--danger);
+  --color-bug: var(--bug);
+  --color-example: var(--example);
+  --color-quote: var(--quote);
+
+  /* Code */
+  --color-code-bg: var(--code-background);
+  --color-code-fg: var(--code-foreground);
+
+  /* API reference — HTTP method, type, status, role colors */
+  --color-api-field: var(--api-field);
+  --color-api-get: var(--api-get);
+  --color-api-post: var(--api-post);
+  --color-api-put: var(--api-put);
+  --color-api-patch: var(--api-patch);
+  --color-api-delete: var(--api-delete);
+  --color-api-head: var(--api-head);
+  --color-api-required: var(--api-required);
+  --color-api-deprecated: var(--api-deprecated);
+  --color-api-type-string: var(--api-type-string);
+  --color-api-type-number: var(--api-type-number);
+  --color-api-type-boolean: var(--api-type-boolean);
+  --color-api-type-object: var(--api-type-object);
+  --color-api-type-array: var(--api-type-array);
+  --color-api-status-2xx: var(--api-status-2xx);
+  --color-api-status-3xx: var(--api-status-3xx);
+  --color-api-status-4xx: var(--api-status-4xx);
+  --color-api-status-5xx: var(--api-status-5xx);
+
+  /* Fonts */
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-code);
+  --font-family-code: var(--font-code);
+}
+
+${tokens.light}
+
+${tokens.dark}
+
+@layer base {
+  * { @apply border-border outline-ring/50; }
+  body { @apply bg-background text-foreground font-sans; }
+}
+
+/* Shiki dual-theme: light by default, dark when .dark class is active */
+.shiki,
+.shiki span,
+.astro-code,
+.astro-code span {
+  color: var(--shiki-light) !important;
+}
+.shiki,
+.astro-code {
+  background-color: var(--shiki-light-bg) !important;
+}
+.dark .shiki,
+.dark .shiki span,
+.dark .astro-code,
+.dark .astro-code span {
+  color: var(--shiki-dark) !important;
+}
+.dark .shiki,
+.dark .astro-code {
+  background-color: var(--shiki-dark-bg) !important;
+}
+/* Fix comment color contrast for WCAG AA */
+.shiki span[style*="--shiki-light:#6E7781"],
+.astro-code span[style*="--shiki-light:#6E7781"] {
+  --shiki-light: #576069 !important;
+}
+`;
+}