/* ============================================================================ jo-tokens.css — SUMBER KEBENARAN warna JO: NAVY + GOLD (parity dgn login). Di-load PALING AKHIR (sesudah jo-v6.css) → override token v6 yg sebelumnya HIJAU. Tidak menghapus apa pun: cuma men-set ulang CSS variable, jadi semua komponen yg pakai var(--jo-*) / var(--v6-*) otomatis jadi navy. REVERSIBEL: hapus 1 baris ini → balik seperti semula. Dibuat 2026-06-07 (Fase 1 redesign web). Lihat memory web-redesign-2026-06-07. ========================================================================== */ :root { /* ---- Palette dasar v6 (dipakai LANGSUNG ±55x di komponen) → navy + gold ---- */ --v6-green: #1E40AF; /* dulu #047857 hijau → navy primary */ --v6-green-mid: #3B82F6; /* navy mid */ --v6-green-soft: #EEF3FF; /* navy soft bg */ --v6-green-deep: #14306E; --v6-green-darker: #0A1A3F; --v6-gold: #F59E0B; /* dulu #D97706 → brand gold deep */ --v6-gold-bright: #FBBF24; /* brand gold */ --v6-gold-soft: #FFFBEB; --v6-gold-deep: #B45309; --v6-cream: #F4F7FC; /* dulu cream hangat → bg sejuk navy */ --v6-cream-2: #F1F5F9; --v6-paper: #FFFFFF; --v6-ink: #0F172A; /* slate (dulu cokelat hangat) */ --v6-ink-soft: #475569; --v6-ink-mute: #94A3B8; --v6-line: #E2E8F0; /* garis sejuk (dulu oranye muda) */ --v6-line-2: #E5EAF2; --v6-line-3: #EEF2F6; /* ---- Token aplikasi --jo-* → navy (eksplisit, pasti menang) ---- */ --jo-primary: #1E40AF; --jo-primary-bright: #3B82F6; --jo-primary-soft: rgba(30, 64, 175, 0.10); --jo-primary-soft-hover: rgba(30, 64, 175, 0.16); --jo-primary-strong: #14306E; --jo-bg: #F4F7FC; --jo-surface: #FFFFFF; --jo-surface-2: #F1F5F9; --jo-surface-hover: #EEF3FF; --jo-border: #E5EAF2; --jo-border-strong: #CBD5E1; --jo-sidebar-width: 256px; /* match mockup (dulu 240) */ --jo-text: #0F172A; --jo-text-muted: #475569; --jo-text-subtle: #94A3B8; --jo-text-on-primary: #FFFFFF; /* Semantik — DECOUPLE dari brand: success TETAP hijau, bukan ikut navy */ --jo-success: #059669; --jo-warning: #F59E0B; --jo-danger: #DC2626; --jo-info: #3B82F6; --jo-glass-bg: rgba(248, 250, 253, 0.92); --jo-glass-border: rgba(15, 23, 42, 0.08); /* ---- Token brand tambahan (dipakai app-shell L1 nanti) ---- */ --jo-navy: #1E40AF; --jo-navy-deep: #14306E; --jo-navy-darker: #0A1A3F; --jo-navy-night: #06122E; --jo-navy-mid: #3B82F6; --jo-gold: #FBBF24; --jo-gold-deep: #F59E0B; } /* ============================================================================ DARK THEME (Fase tema gelap, 2026-06-08) — flip token --jo-* + --v6-* + --bs-* kritikal Metronic. Aktif saat . Redesign dibangun di atas --jo-*/--v6-*, jadi flip token = mayoritas komponen ikut gelap otomatis. Metronic component (btn-light/badge dll) di-harmoniskan lewat override --bs-* di sini (jo-tokens load SESUDAH style.bundle → menang). Spot-fix hardcoded hex menyusul per-iterasi. ========================================================================== */ [data-bs-theme="dark"] { /* ---- Palette dasar v6 (dipakai langsung ±55x) → versi gelap ---- */ --v6-green: #3B82F6; /* navy di-cerahkan biar terbaca di gelap */ --v6-green-mid: #60A5FA; --v6-green-soft: #18233D; /* soft bg gelap */ --v6-green-deep: #1E3A6E; --v6-green-darker: #2B4A8A; --v6-gold: #FBBF24; --v6-gold-bright: #FCD34D; --v6-gold-soft: #2A2416; --v6-gold-deep: #D9A116; --v6-cream: #0E1320; /* page bg gelap */ --v6-cream-2: #161D2E; --v6-paper: #161D2E; /* surface kartu */ --v6-ink: #E8ECF4; /* teks utama terang */ --v6-ink-soft: #A6B0C3; --v6-ink-mute: #6F7B91; --v6-line: #28324A; --v6-line-2: #2A3550; --v6-line-3: #222C42; /* ---- Token aplikasi --jo-* → gelap ---- */ --jo-primary: #3B82F6; --jo-primary-bright: #60A5FA; --jo-primary-soft: rgba(59, 130, 246, 0.16); --jo-primary-soft-hover: rgba(59, 130, 246, 0.24); --jo-primary-strong: #2563EB; --jo-bg: #0E1320; --jo-surface: #161D2E; --jo-surface-2: #1E2740; --jo-surface-hover: #243054; --jo-border: #28324A; --jo-border-strong: #3A4660; --jo-text: #E8ECF4; --jo-text-muted: #A6B0C3; --jo-text-subtle: #6F7B91; --jo-text-on-primary: #FFFFFF; /* Semantik — sedikit dicerahkan utk gelap */ --jo-success: #10B981; --jo-warning: #FBBF24; --jo-danger: #F87171; --jo-info: #60A5FA; --jo-glass-bg: rgba(14, 19, 32, 0.82); --jo-glass-border: rgba(255, 255, 255, 0.08); --jo-navy: #3B82F6; --jo-navy-mid: #60A5FA; /* ---- Harmoniskan Metronic --bs-* (jo-tokens load sesudah style.bundle) ---- */ --bs-body-bg: #0E1320; --bs-body-color: #E8ECF4; --bs-light: #1E2740; /* btn-light/badge-light bg → surface-2 gelap */ --bs-light-inverse: #E8ECF4; /* teks di atas light → terang */ --bs-border-color: #28324A; --bs-secondary-bg: #161D2E; --bs-secondary-color: #A6B0C3; }