/* ══════════════════════════════════════════════════════════════ tokens.css — lapisan TOKEN bersama untuk IKM / SE / SOSMAP ══════════════════════════════════════════════════════════════ Diturunkan dari design system Ekosistem Management App (`app/lib/ui.css`) — token yang sama, kontrak `--brand` yang sama. KENAPA HANYA TOKEN, BUKAN ui.css UTUH? `ui.css` mendefinisikan komponen (.card, .btn, .badge, .active) dengan nama yang SAMA seperti CSS ketiga app, tapi nilai berbeda — 13 tabrakan di IKM, 14 di SE, 7 di SOSMAP. Memuatnya utuh akan menimpa tata letak di ratusan tempat (mis. .card ui.css berpadding 32px, .card IKM 20px). Adopsi komponen dikerjakan belakangan, per-app, dengan perbandingan visual. Berkas ini hanya membawa TOKEN — nol tabrakan, nol pergeseran tata letak. Font: JANGAN pakai @import Google Fonts seperti ui.css asli — seluruh font sudah di-vendor lokal di `vendor/fonts/fonts.css` (aturan nol-CDN). ── PAGAR PENTING ─────────────────────────────────────────── Berkas ini adalah lapisan CHROME (topbar, tombol, form, nav) — identitas app. Ia BUKAN warna diagram. Warna diagram mengikuti palet peran pilihan peneliti (`VIZ_THEMES`, 11 tema) lewat namespace `--tbl-*` / getChartColors(). Menyeragamkan chart ke --brand akan mematikan 11 tema itu dan mengembalikan bug encoding skala ordinal. Lihat docs/RENCANA_FASE_STANDARDISASI.md §5. ══════════════════════════════════════════════════════════════ */ :root { /* Netral & semantik — sama persis dengan ui.css management */ --g900: #1C2128; --g700: #3D4757; --g500: #6B7585; --g300: #C8CDD6; --g100: #F4F6F9; --white: #fff; --success: #2A7A37; --danger: #DC3545; --warning: #C25B12; --info: #1A6DB5; /* Skala tipografi */ --fs-xs: 11px; --fs-sm: 12.5px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 24px; /* Skala spasi */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; /* Radius */ --r-sm: 8px; --r-md: 10px; --r-lg: 12px; --r-xl: 16px; /* Bayangan */ --shadow: 0 2px 12px rgba(26, 109, 181, .10); --shadow-lg: 0 8px 32px rgba(26, 109, 181, .16); /* Default = biru management (dipakai bila tak ber-data-app) */ --brand: #1A6DB5; --brand-d: #0F4C82; --brand-l: #E8F2FB; } /* ══════════════════════════════════════════════════════════════ AKSEN PER-KAJIAN — dipasang di , BUKAN ══════════════════════════════════════════════════════════════ ⚠ HARUS di . Ini jebakan custom property yang mudah terlewat: IKM & SE mendeklarasikan token internalnya di `:root`, mis. :root { --theme-primary: var(--brand, #0D9488); } `var(--brand)` di situ diselesaikan DI ELEMEN TEMPAT IA DIDEKLARASIKAN — yaitu . Kalau data-app dipasang di (anaknya), override tak terlihat dari , sehingga --theme-primary jatuh ke default :root (biru management) dan SELURUH aksen IKM berubah biru tanpa satu pun error muncul. ui.css management memasangnya di karena app-nya memakai --brand langsung di aturan komponen (diselesaikan di elemen anak, jadi aman). App riset tidak. Selector [data-app] di bawah bekerja pada elemen apa pun — , , maupun kartu di launcher (yang menampilkan 3 kajian sekaligus). Kontrak management: --brand / --brand-d / --brand-l. App riset butuh tangga yang lebih panjang (dark, soft, 50, ring, accent), jadi ditambahkan di sini — tetap satu sumber, satu tempat diubah. Kontras putih-di-atas-brand DIUKUR, bukan ditebak (tombol primer memakai teks putih di atas --brand; ambang WCAG AA teks normal = 4.5:1). Angka di bawah adalah hasil ukur sungguhan. */ /* ── IKM = TEAL ───────────────────────────────────────────── Skala DIGESER SATU TINGKAT LEBIH GELAP (2026-07-12) demi WCAG AA. Sebelumnya --brand = teal-600 (#0D9488). Teks putih di atasnya hanya **3.74:1** — di bawah ambang AA (4.5) — dan teal-600 sebagai TEKS di atas putih juga 3.74:1. Audit di halaman hidup menemukan 14 pelanggaran akibat warna ini (tombol primer, tab program, judul, tombol simpan). Masalahnya lama, tapi kini diperbaiki. Konsekuensi: tampilan IKM sedikit lebih gelap. IKM TIDAK LAGI berfungsi sebagai "kontrol nol-perubahan" — perannya itu berakhir di sini, dengan sengaja. */ [data-app="ikm"] { --brand: #0F766E; /* teal-700 · putih di atasnya = 5.47:1 ✓ (dulu teal-600, 3.74) */ --brand-d: #115E59; /* teal-800 · hover · 7.58:1 */ --brand-dark: #134E4A; /* teal-900 · sidebar · 9.90:1 */ --brand-l: #CCFBF1; /* teal-100 · soft (tak berubah) */ --brand-50: #F0FDFA; /* teal-50 (tak berubah) */ --brand-ring: #5EEAD4; /* teal-300 · fokus (tak berubah) */ --brand-accent:#0D9488; /* teal-600 — dulu teal-500; dipakai sbg AKSEN, bukan latar teks */ } /* ── SE = INDIGO ──────────────────────────────────────────── Menggantikan biru-abu (Mist #6b7f9e) yang lama. Ini REBRAND yang disengaja sesuai dokumen induk (IKM teal · SE indigo · SOSMAP amber). */ [data-app="se"] { --brand: #4F46E5; /* indigo-600 · putih di atasnya = 6.29:1 ✓ */ --brand-d: #4338CA; /* indigo-700 */ --brand-dark: #3730A3; /* indigo-800 */ --brand-l: #E0E7FF; /* indigo-100 */ --brand-50: #EEF2FF; /* indigo-50 */ --brand-ring: #A5B4FC; /* indigo-300 */ --brand-accent:#6366F1; /* indigo-500 */ } /* ── SOSMAP = AMBER ───────────────────────────────────────── Menggantikan teal yang lama. Dipakai amber-700 (#B45309) sebagai --brand, BUKAN amber-600: amber-600 hanya 3.1:1 terhadap putih — gagal WCAG AA untuk teks normal, padahal tombol primer memakai teks putih. */ [data-app="sosmap"] { --brand: #B45309; /* amber-700 · putih di atasnya = 5.02:1 ✓ */ --brand-d: #92400E; /* amber-800 */ --brand-dark: #78350F; /* amber-900 · topbar */ --brand-l: #FEF3C7; /* amber-100 */ --brand-50: #FFFBEB; /* amber-50 */ --brand-ring: #FCD34D; /* amber-300 */ --brand-accent:#D97706; /* amber-600 */ }