/* Hallmark · genre: modern-minimal (brand override: acrylic) · design-system: design.md * * Memetakan token WagWay (tokens.css) ke variabel tema Scalar, seperti custom.css * melakukannya untuk VitePress. TIDAK ADA nilai warna atau font mentah di file ini — * semuanya lewat var(--wag-*) / var(--font-*) / var(--radius-*). * * Kenapa file terpisah, bukan ikut custom.css: /api-docs.html adalah dokumen statis di * public/, tidak diproses Vite dan tidak memuat theme VitePress. Ia harus membawa * token dan font-nya sendiri. * * SPESIFISITAS PENTING. Scalar menyuntikkan `.light-mode{...}` / `.dark-mode{...}` ke * saat runtime — jadi SETELAH statis ini. Selector di bawah memakai * `body.light-mode` (0,1,1) yang mengalahkan `.light-mode` (0,1,0) terlepas dari urutan * sumber. Menulisnya di `:root` justru KALAH: Scalar mendeklarasikan variabelnya * langsung di , dan deklarasi langsung menang atas nilai warisan dari :root. */ /* ── Font — self-hosted ──────────────────────────────────────────────── Default Scalar menarik Inter & JetBrains Mono dari fonts.scalar.com. Halaman ini memuat API key asli user di form "Try it"; bundle-nya sudah sengaja di-vendor lokal demi alasan itu, jadi menyisakan permintaan font ke pihak ketiga tidak konsisten. Dimatikan lewat `withDefaultFonts: false` di api-docs.html, diganti berkas di bawah. Salinan subset latin dari @fontsource 5.3.0 — paket yang sama dengan yang dipakai VitePress di theme/index.ts. Hanya weight yang benar-benar dipakai yang ikut. Cara update: `cp docs/node_modules/@fontsource//files/.woff2 docs/public/fonts/`. */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 400; src: url(/fonts/inter-latin-400-normal.woff2) format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 500; src: url(/fonts/inter-latin-500-normal.woff2) format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 600; src: url(/fonts/inter-latin-600-normal.woff2) format('woff2'); } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-display: swap; font-weight: 500; src: url(/fonts/space-grotesk-latin-500-normal.woff2) format('woff2'); } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-display: swap; font-weight: 600; src: url(/fonts/space-grotesk-latin-600-normal.woff2) format('woff2'); } @font-face { font-family: 'Space Grotesk'; font-style: normal; font-display: swap; font-weight: 700; src: url(/fonts/space-grotesk-latin-700-normal.woff2) format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-display: swap; font-weight: 400; src: url(/fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-display: swap; font-weight: 500; src: url(/fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2'); } /* ── Token WagWay → variabel Scalar ──────────────────────────────────── Satu blok untuk KEDUA tema. Yang berganti saat tema di-switch adalah nilai --wag-* itu sendiri (tokens.css menetapkannya ulang di `body.dark-mode`), jadi pemetaannya tidak perlu diduplikasi terang/gelap. Menduplikasinya justru membuka pintu drift antar-tema. */ body.light-mode, body.dark-mode { --scalar-font: var(--font-body); --scalar-font-code: var(--font-mono); /* Ramp permukaan. Scalar menumpuk kartu di atas halaman, sementara token aplikasi untuk lapisan (--wag-glass-*) translusen — di belakang teks kode itu selalu menurunkan kontras. Karena itu lapisannya diturunkan dari --wag-body-bg dengan color-mix ke arah warna teks: gelap di tema terang, terang di tema gelap, dan selalu opaque. Pola yang sama sudah dipakai custom.css untuk --vp-c-bg-alt. */ --scalar-background-1: var(--wag-body-bg); --scalar-background-2: color-mix(in srgb, var(--wag-body-bg) 94%, var(--wag-text)); --scalar-background-3: color-mix(in srgb, var(--wag-body-bg) 88%, var(--wag-text)); --scalar-color-1: var(--wag-text); --scalar-color-2: var(--wag-text-dim); --scalar-color-3: var(--wag-text-muted); --scalar-color-accent: var(--wag-accent); --scalar-background-accent: var(--wag-accent-dim); --scalar-border-color: var(--wag-glass-border); --scalar-link-color: var(--wag-accent); --scalar-link-color-hover: var(--wag-accent); --scalar-button-1: var(--wag-accent); --scalar-button-1-hover: var(--wag-accent); --scalar-button-1-color: var(--wag-on-accent); /* Radius Scalar default 3px — di luar ramp Fluent 2 yang dipakai seluruh produk. */ --scalar-radius: var(--radius-xs); --scalar-radius-lg: var(--radius-lg); --scalar-radius-xl: var(--radius-xl); } /* Di tema gelap, pakai permukaan opaque yang sudah dikalibrasi untuk docs alih-alih hasil color-mix — supaya panel Scalar mendarat di warna yang sama persis dengan sidebar dan blok kutip VitePress, bukan sekadar mirip. */ body.dark-mode { --scalar-background-2: var(--wag-surface-1); --scalar-background-3: var(--wag-surface-2); } /* ── Kartu contoh request/response ───────────────────────────────────── Scalar memasang kelas `.dark-mode` BERSARANG di kartu ini — selalu gelap, juga saat halaman bertema terang. Karena bukan , blok di atas tidak menjangkaunya dan kartunya jatuh ke palet stok Scalar (#0f0f0f / #a4a4a4): satu-satunya bagian halaman yang bukan WagWay, dan justru bagian yang paling lama dipandang pembaca. Token snippet docs memang dibuat untuk kasus ini — sengaja gelap di kedua tema (konvensi editor), jadi tidak perlu varian terang. Turunan lainnya dibuat dengan color-mix dari pasangan yang sama supaya kontrasnya ikut benar kalau tokennya berubah. Spesifisitas 0,2,0 di sini mengalahkan `.dark-mode` (0,1,0) milik Scalar. */ .scalar-app .dark-mode { --scalar-background-1: var(--wag-snippet-bg); --scalar-background-2: var(--wag-snippet-bg); --scalar-background-3: color-mix(in srgb, var(--wag-snippet-bg) 88%, var(--wag-snippet-text)); --scalar-color-1: var(--wag-snippet-text); --scalar-color-2: color-mix(in srgb, transparent 22%, var(--wag-snippet-text)); --scalar-color-3: color-mix(in srgb, transparent 45%, var(--wag-snippet-text)); --scalar-border-color: color-mix(in srgb, transparent 88%, var(--wag-snippet-text)); } /* ── Aturan yang tidak bisa lewat variabel ───────────────────────────── Memakai `body .scalar-app` agar menang atas gaya Scalar yang disuntikkan belakangan. Kalau Scalar mengubah struktur DOM-nya, aturan ini diam saja dan tampilannya kembali ke default — degradasi yang aman, bukan halaman rusak. Warna teks kode SENGAJA tidak diatur di sini. Godaannya memaksa `.hljs` ke --wag-code-text, tapi Scalar punya `.scalar-app code.hljs` dengan spesifisitas sama persis, jadi perlu menaikkan spesifisitas untuk menang — dan itu justru merusak: di kartu bersarang di atas, --wag-code-text masih bernilai TERANG (kartunya bukan body.dark-mode), sehingga teks gelap mendarat di latar gelap. Membiarkannya mengikuti --scalar-color-2 memberi hasil yang benar di kedua konteks, dan keduanya sudah melewati WCAG AA: 7,3:1 di prosa terang, 8,6:1 di kartu gelap. */ /* Scalar merender heading dengan face body. Docs memakai display face, dan perbedaan ini yang paling cepat terbaca sebagai "halaman produk lain". */ body .scalar-app h1, body .scalar-app h2, body .scalar-app h3 { font-family: var(--font-display); letter-spacing: var(--tracking-tight); } /* Cincin fokus sama dengan docs & aplikasi. */ body .scalar-app :focus-visible { outline: 2px solid var(--wag-accent); outline-offset: 2px; border-radius: var(--radius-xs); } @media (prefers-reduced-motion: reduce) { body .scalar-app *, body .scalar-app *::before, body .scalar-app *::after { animation-duration: 150ms !important; animation-iteration-count: 1 !important; transition-duration: 150ms !important; scroll-behavior: auto !important; } }