R2D2-Holocron/.settings/style/README.md

Style export — R2 / Farsight aesthetic

Everything another app needs to reproduce the look & feel of the STANAG 4817 docs site: the Fumadocs docs theme, the Scalar API-reference GUI + settings, and a general Tailwind sheet you can drop into any Tailwind v4 app.

The aesthetic ("R2 / Farsight"): dark navy (#0a0e1a) surfaces with glassy panels, a teal accent (#2dd4bf), slate text, a teal→blue→violet brand bar across the top, subtle grid texture behind articles, Inter for UI and JetBrains Mono for code.

Stack: Next.js 16 · React 19 · Fumadocs 16.x · Tailwind CSS v4 (CSS-first — there is no tailwind.config.js/ts; theme lives in CSS via @theme + @import) · Scalar API Reference (CDN or self-hosted bundle).

.settings/style/
├── README.md                  ← you are here
├── fumadocs/                  ← the docs-site theme (Fumadocs + Tailwind)
│   ├── global.css             ← THE theme stylesheet (import once from root layout)
│   ├── postcss.config.mjs     ← the entire Tailwind v4 build wiring
│   ├── source.config.ts       ← Fumadocs MDX config (mermaid + KaTeX)
│   ├── next.config.mjs        ← Next.js + fumadocs-mdx + standalone output
│   ├── layout.root.tsx        ← app/layout.tsx (sets `dark` + `r2-theme` classes)
│   ├── layout.docs.tsx        ← app/docs/layout.tsx (DocsLayout shell)
│   ├── layout.home.tsx        ← app/(home)/layout.tsx (HomeLayout shell)
│   ├── layout.shared.tsx      ← lib/layout.shared.tsx (nav title + links)
│   ├── source.ts              ← lib/source.ts (Fumadocs source loader)
│   ├── shared.ts              ← lib/shared.ts (app name / version / routes)
│   ├── cn.ts                  ← lib/cn.ts (tailwind-merge helper)
│   └── package.deps.json      ← exact dependency versions to merge in
├── scalar/                    ← the API-reference GUI
│   ├── scalar.tsx             ← <ScalarReference> component (theme + config)
│   ├── api-reference.page.tsx ← example page that mounts it
│   └── scalar-settings.md     ← every Scalar setting explained (theme + airgap)
└── tailwind/
    └── tailwind.css           ← general, framework-agnostic Tailwind v4 sheet
                                  (R2 palette as `@theme` utilities: bg-r2-*, etc.)

Reproduce the Fumadocs docs theme

1. Copy fumadocs/* into the matching paths of the target app (app/global.css, postcss.config.mjs, source.config.ts, next.config.mjs, app/layout.tsx, app/docs/layout.tsx, app/(home)/layout.tsx, lib/layout.shared.tsx, lib/source.ts, lib/shared.ts, lib/cn.ts). The exported layout files are named layout.<role>.tsx here — rename to layout.tsx in the right folder.
2. Merge fumadocs/package.deps.json into package.json, then install.
3. Critical: the root layout must carry the theme classes, or you get unstyled Fumadocs defaults:

   <html className="dark ..."> <body className="r2-theme ..."> ...
   

   and the root layout must import './global.css'.
4. Edit lib/shared.ts (app name/version) and lib/layout.shared.tsx (nav links).

That's the whole theme. All colors are CSS variables at the top of global.css (--r2-*), and Fumadocs' own --color-fd-* tokens are re-mapped onto them — change the brand by editing the --r2-* values only.

Reproduce the Scalar API reference

1. Copy scalar/scalar.tsx to components/scalar.tsx and use it: <ScalarReference specUrl="/openapi.json" /> (see api-reference.page.tsx).
2. Read scalar/scalar-settings.md — it documents the theme (customCss mirrors the R2 palette into Scalar's own --scalar-* variables) and every behaviour / airgap setting (telemetry off, AI agent disabled, no proxy, blanked service URLs).
3. For airgapped use, vendor the Scalar bundle locally and set NEXT_PUBLIC_SCALAR_JS_URL=/vendor/scalar-api-reference.js.

Use the general Tailwind sheet (any app)

tailwind/tailwind.css is the standalone option — no Fumadocs required. Add @tailwindcss/postcss to your PostCSS config, import the sheet once, and you get the R2 palette as Tailwind utilities: bg-r2-bg, text-r2-accent, border-r2-border, rounded-r2-md, font-r2-mono, shadow-r2-card, etc. Put class="dark" (or r2-theme) on <html> for the navy backdrop + brand bar.

---

Snapshot of web/ as of this export — Fumadocs 16.9.3, Tailwind 4.3.0, Next 16.2.6.