/* Hallmark · genre: modern-minimal (brand override: acrylic) · design-system: design.md * * MIRROR dari web/app/assets/css/tokens.css. Nilainya DISALIN, bukan ditulis ulang — * kalau token di aplikasi berubah, ubah di sana dulu lalu salin ke sini. VitePress * di-deploy terpisah jadi tidak bisa mengimpor file aplikasi secara langsung. * * Sebelumnya custom.css meng-hardcode #10d4aa/#818cf8/#080c16 sendiri, sehingga * palet docs pelan-pelan menyimpang dari aplikasi tanpa ada yang menyadarinya. * * Sekarang penyimpangan itu DIGERBANGI, bukan diandalkan pada ingatan orang: * web/test/tokensDrift.test.ts membandingkan nilai token di kedua file dan gagal * kalau berbeda. Jalan di CI lewat job `web-test`, yang menahan build. * Salinan ini subset — token yang tidak dipakai docs boleh tidak ada di sini. */ :root { /* Warna — tema terang */ --wag-accent: #0a7d66; --wag-accent-dim: rgba(10, 125, 102, 0.12); --wag-accent-2: #5b5bd6; --wag-on-accent: #ffffff; --wag-text: #0f1f1a; --wag-text-dim: rgba(15, 31, 26, 0.75); /* alpha 0.64, bukan 0.58 — nilai lama gagal WCAG AA (4.15:1). Lihat alasan lengkapnya di web/app/assets/css/tokens.css. */ --wag-text-muted: rgba(15, 31, 26, 0.64); --wag-danger: #dc2626; --wag-success: #047857; --wag-warning: #b45309; --wag-body-bg: #f5f8f7; --wag-body-grad-1: rgba(16, 212, 170, 0.14); --wag-body-grad-2: rgba(129, 140, 248, 0.16); --wag-glass-bg-2: rgba(255, 255, 255, 0.55); --wag-glass-hover: rgba(15, 31, 26, 0.05); --wag-glass-border: rgba(15, 31, 26, 0.10); --wag-hairline: rgba(15, 31, 26, 0.08); --wag-header-bg: rgba(245, 248, 247, 0.85); /* Permukaan code OPAQUE — keterbacaan monospace menang atas efek glass. Ini aturan nomor satu untuk docs; lihat design.md §Aturan dokumentasi. */ --wag-code-bg: #eef3f1; --wag-code-border: rgba(15, 31, 26, 0.10); --wag-code-text: #0f1f1a; /* Blok kode sengaja gelap di KEDUA tema — konvensi editor, kontras token sintaks konsisten. Karena itu tidak di-override di .dark. */ --wag-snippet-bg: #1e1e1e; --wag-snippet-text: #e6e6e6; /* Tipografi */ --font-display: 'Space Grotesk', system-ui, 'Segoe UI', sans-serif; --font-body: 'Inter', system-ui, 'Segoe UI', Roboto, Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --tracking-display: -0.03em; --tracking-tight: -0.02em; /* Spacing — skala 4-pt */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 4.5rem; --space-3xl: 7rem; /* Radius — ramp Fluent 2 */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px; /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms; } /* `.dark` dipasang VitePress di . `body.dark-mode` dipasang Scalar di pada /api-docs.html — halaman statis yang memuat token ini lewat symlink public/tokens.css. Digabung di sini supaya tema gelap Scalar memakai nilai yang sama, bukan salinan ketiga. */ .dark, body.dark-mode { --wag-accent: #10d4aa; --wag-accent-dim: rgba(16, 212, 170, 0.18); --wag-accent-2: #818cf8; --wag-on-accent: #030d0b; --wag-text: #e8f4f0; --wag-text-dim: rgba(232, 244, 240, 0.72); --wag-text-muted: rgba(232, 244, 240, 0.55); --wag-danger: #f87171; --wag-success: #34d399; --wag-warning: #fbbf24; --wag-body-bg: #080c16; --wag-body-grad-1: rgba(11, 61, 46, 0.75); --wag-body-grad-2: rgba(30, 15, 50, 0.75); --wag-glass-bg-2: rgba(255, 255, 255, 0.04); --wag-glass-hover: rgba(255, 255, 255, 0.11); --wag-glass-border: rgba(255, 255, 255, 0.10); --wag-hairline: rgba(255, 255, 255, 0.06); --wag-header-bg: rgba(8, 12, 22, 0.85); --wag-code-bg: #0d1420; --wag-code-border: rgba(255, 255, 255, 0.10); --wag-code-text: #e8f4f0; /* Permukaan berlapis khusus docs (sidebar, blok kutip, tab kode). Aplikasi memakai rgba di atas latar; VitePress butuh warna solid karena beberapa panelnya bertumpuk, jadi nilainya opaque dan tinggal di sini. */ --wag-surface-1: #0b1220; --wag-surface-2: #111827; --wag-surface-3: #0e1524; }