/* ═══════════════════════════════════════════════════════════════════════════ TEMA DJG — SATU-SATUNYA RUMAH NILAI TAMPILAN Dokumentasinya: docs/TEMA.md (keputusan CEO 8 Nov 2026) ⛳ Kenapa berkas ini ada. Pertanyaan CEO: *"agar kedepannya template tema bisa mudah digonta ganti … alih-alih ubah per halaman kamu tinggal ubah per style css yang sudah ada di template itu"*. Diukur sebelum dijawab, dan angkanya membenarkan pertanyaan itu: **174 warna heksa diketik langsung di CSS** dan **2.391 deklarasi gaya diketik di markup**. Mengganti tema hari itu mustahil — satu perubahan warna akan meninggalkan ratusan titik yang tidak ikut berubah, dan tak ada yang memberitahu titik mana. ⛔ DUA LAPIS, dan pemisahannya yang membuat tema bisa ditukar: 1 · PALET — nilai MENTAH. Satu-satunya tempat warna boleh diketik. 2 · PERAN — nama yang dipakai komponen (`--brand`, `--bg`, `--bad`…). Sebuah tema baru TIDAK menulis warna; ia hanya memetakan ulang peran ke palet. Itu sebabnya ia muat dalam satu blok. Pola yang sama dipakai `theme.json` WordPress: preset warna jadi sumber, dan komponen memanggil presetnya — bukan nilainya. ⚠ TAHAP INI MEMINDAHKAN, BUKAN MENGUBAH. Tiap nilai di bawah sama persis dengan yang sebelumnya tertulis di `mockup.css`, supaya tampilannya tidak bergeser sedikit pun dan pergeseran berikutnya terbaca sebagai keputusan. ⚠ DUA SAKLAR, dua pertanyaan yang berbeda — jangan dicampur: `data-theme="light|dark"` — TERANG atau GELAP. Sudah ada, dipakai tombol ◐. `data-tema=""` — KELUARGA tema (pemetaan peran ke palet). Tanpa atribut ini berlaku tema DJG. ═══════════════════════════════════════════════════════════════════════════ */ /* ─────────────────────────────────────────────────────────────────────────── 1 · PALET — nilai mentah. ⛔ Di luar blok ini, warna heksa adalah CACAT (dijaga K367). Nama dibaca "warna-terang…gelap", bukan nama perannya: palet tidak boleh tahu untuk apa ia dipakai. ─────────────────────────────────────────────────────────────────────────── */ :root{ /* biru DJG */ --p-biru-700:#013E74; --p-biru-600:#01549D; --p-biru-400:#3D8FD6; --p-biru-300:#63A9E3; --p-biru-200:#7CB8EA; --p-biru-050:#E8F1FA; --p-biru-950:#0E2A44; /* abu — latar, permukaan, garis, teks */ --p-abu-000:#FFFFFF; --p-abu-050:#F4F7FA; --p-abu-100:#EDF2F7; --p-abu-150:#EEF3F8; --p-abu-200:#D9E2EA; --p-abu-300:#B9C7D3; --p-abu-600:#5C6C7C; --p-abu-900:#182633; /* abu malam */ --p-malam-900:#0D141C; --p-malam-800:#151F2A; --p-malam-700:#1C2936; --p-malam-650:#1D2C3B; --p-malam-600:#263646; --p-malam-500:#37495C; --p-malam-200:#93A6B8; --p-malam-050:#E4EDF5; /* isyarat keadaan */ --p-hijau-600:#1E7F4F; --p-hijau-400:#3FBF7F; --p-hijau-050:#E3F4EA; --p-hijau-950:#11301F; --p-kuning-700:#9A6200; --p-kuning-400:#E1A33C; --p-kuning-050:#FBF0DA; --p-kuning-950:#33260D; --p-merah-600:#B23A2A; --p-merah-400:#E0705E; --p-merah-050:#FAE7E3; --p-merah-950:#361410; /* bayangan — dua nilai mentah, bukan dua aturan */ --p-bayang-terang:0 1px 2px rgba(24,38,51,.06),0 4px 14px rgba(24,38,51,.07); --p-bayang-gelap:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.35); /* ── TAMBAHAN D-526 — lapisan komponen PWA ────────────────────────────── ⛔ TIDAK ada satu pun nilai di atas yang diubah: Kantor memakai tema yang sama, dan menggeser nilai lama berarti menggeser Kantor diam-diam. Yang ada di bawah semuanya BARU, dan hanya dipanggil `komponen.css`. */ --p-biru-500:#1C6CB8; /* rona divisi — satu rona per modul, dipanggil lewat peran `--d-*` */ --p-ungu-600:#6D4AD4; --p-ungu-400:#A78BFA; --p-ungu-050:#F0EBFD; --p-ungu-950:#1E1636; --p-sian-600:#0C7E9E; --p-sian-400:#3FC3E3; --p-sian-050:#E0F5FA; --p-sian-950:#08242D; --p-nila-600:#4353C9; --p-nila-400:#8699F2; --p-nila-050:#EAEEFC; --p-nila-950:#141A34; /* bayangan BERLAPIS — tiga tingkat + satu berwarna merek. Inilah yang membuat elemen terbaca "terangkat" alih-alih bergaris 1px. */ --p-bayang-naik-t:0 2px 4px rgba(19,34,47,.05),0 8px 20px rgba(19,34,47,.07),0 20px 44px -16px rgba(19,34,47,.12); --p-bayang-tinggi-t:0 4px 10px rgba(19,34,47,.07),0 18px 46px -8px rgba(19,34,47,.2); --p-bayang-naik-g:0 2px 6px rgba(0,0,0,.5),0 14px 34px rgba(0,0,0,.45); --p-bayang-tinggi-g:0 6px 14px rgba(0,0,0,.5),0 24px 56px -8px rgba(0,0,0,.6); --p-bayang-biru-t:0 6px 18px -6px rgba(1,84,157,.45),0 2px 6px rgba(1,84,157,.2); --p-bayang-biru-g:0 6px 18px -6px rgba(61,143,214,.5),0 2px 6px rgba(61,143,214,.25); } /* ─────────────────────────────────────────────────────────────────────────── 2 · PERAN — TERANG (bawaan). Inilah yang dipanggil seluruh komponen. ⛔ Sebuah tema baru cukup menyalin blok ini dan memetakan ulang; ia tidak pernah mengetik warna. ─────────────────────────────────────────────────────────────────────────── */ :root{ --brand:var(--p-biru-600); --brand-strong:var(--p-biru-700); --brand-soft:var(--p-biru-050); --brand-text:var(--p-biru-600); --bg:var(--p-abu-050); --surface:var(--p-abu-000); --surface-2:var(--p-abu-100); --text:var(--p-abu-900); --muted:var(--p-abu-600); --border:var(--p-abu-200); --border-strong:var(--p-abu-300); --ok:var(--p-hijau-600); --ok-soft:var(--p-hijau-050); --warn:var(--p-kuning-700); --warn-soft:var(--p-kuning-050); --bad:var(--p-merah-600); --bad-soft:var(--p-merah-050); --chip-mono-bg:var(--p-abu-150); --shadow:var(--p-bayang-terang); /* ── TAMBAHAN D-526 — peran baru (terang). Dipanggil `komponen.css`. ── */ --atas-warna:var(--p-abu-000); /* teks/glif DI ATAS bidang berwarna penuh */ --grad-brand:linear-gradient(135deg,var(--p-biru-500) 0%,var(--p-biru-700) 100%); --shadow-naik:var(--p-bayang-naik-t); --shadow-tinggi:var(--p-bayang-tinggi-t); --shadow-brand:var(--p-bayang-biru-t); --d-produk:var(--p-nila-600); --d-produk-lembut:var(--p-nila-050); --d-gudang:var(--p-hijau-600); --d-gudang-lembut:var(--p-hijau-050); --d-keuangan:var(--p-kuning-700); --d-keuangan-lembut:var(--p-kuning-050); --d-marketing:var(--p-ungu-600); --d-marketing-lembut:var(--p-ungu-050); --d-operasional:var(--p-sian-600); --d-operasional-lembut:var(--p-sian-050); --d-tugas:var(--p-biru-600); --d-tugas-lembut:var(--p-biru-050); } /* ─────────────────────────────────────────────────────────────────────────── 3 · PERAN — GELAP. ⛔ Nilainya TIDAK ditulis dua kali: dulu palet gelap tersalin utuh di blok media DAN di blok atribut, jadi mengubah satu berarti lupa yang lain. Sekarang keduanya memetakan ke palet yang sama. ─────────────────────────────────────────────────────────────────────────── */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --brand:var(--p-biru-400); --brand-strong:var(--p-biru-300); --brand-soft:var(--p-biru-950); --brand-text:var(--p-biru-200); --bg:var(--p-malam-900); --surface:var(--p-malam-800); --surface-2:var(--p-malam-700); --text:var(--p-malam-050); --muted:var(--p-malam-200); --border:var(--p-malam-600); --border-strong:var(--p-malam-500); --ok:var(--p-hijau-400); --ok-soft:var(--p-hijau-950); --warn:var(--p-kuning-400); --warn-soft:var(--p-kuning-950); --bad:var(--p-merah-400); --bad-soft:var(--p-merah-950); --chip-mono-bg:var(--p-malam-650); --shadow:var(--p-bayang-gelap); /* ── TAMBAHAN D-526 — peran baru (gelap). Memetakan, tidak mengetik warna. ── */ --atas-warna:var(--p-abu-000); --grad-brand:linear-gradient(135deg,var(--p-biru-400) 0%,var(--p-biru-600) 100%); --shadow-naik:var(--p-bayang-naik-g); --shadow-tinggi:var(--p-bayang-tinggi-g); --shadow-brand:var(--p-bayang-biru-g); --d-produk:var(--p-nila-400); --d-produk-lembut:var(--p-nila-950); --d-gudang:var(--p-hijau-400); --d-gudang-lembut:var(--p-hijau-950); --d-keuangan:var(--p-kuning-400); --d-keuangan-lembut:var(--p-kuning-950); --d-marketing:var(--p-ungu-400); --d-marketing-lembut:var(--p-ungu-950); --d-operasional:var(--p-sian-400); --d-operasional-lembut:var(--p-sian-950); --d-tugas:var(--p-biru-400); --d-tugas-lembut:var(--p-biru-950); } } :root[data-theme="dark"]{ --brand:var(--p-biru-400); --brand-strong:var(--p-biru-300); --brand-soft:var(--p-biru-950); --brand-text:var(--p-biru-200); --bg:var(--p-malam-900); --surface:var(--p-malam-800); --surface-2:var(--p-malam-700); --text:var(--p-malam-050); --muted:var(--p-malam-200); --border:var(--p-malam-600); --border-strong:var(--p-malam-500); --ok:var(--p-hijau-400); --ok-soft:var(--p-hijau-950); --warn:var(--p-kuning-400); --warn-soft:var(--p-kuning-950); --bad:var(--p-merah-400); --bad-soft:var(--p-merah-950); --chip-mono-bg:var(--p-malam-650); --shadow:var(--p-bayang-gelap); /* ── TAMBAHAN D-526 — peran baru (gelap). Memetakan, tidak mengetik warna. ── */ --atas-warna:var(--p-abu-000); --grad-brand:linear-gradient(135deg,var(--p-biru-400) 0%,var(--p-biru-600) 100%); --shadow-naik:var(--p-bayang-naik-g); --shadow-tinggi:var(--p-bayang-tinggi-g); --shadow-brand:var(--p-bayang-biru-g); --d-produk:var(--p-nila-400); --d-produk-lembut:var(--p-nila-950); --d-gudang:var(--p-hijau-400); --d-gudang-lembut:var(--p-hijau-950); --d-keuangan:var(--p-kuning-400); --d-keuangan-lembut:var(--p-kuning-950); --d-marketing:var(--p-ungu-400); --d-marketing-lembut:var(--p-ungu-950); --d-operasional:var(--p-sian-400); --d-operasional-lembut:var(--p-sian-950); --d-tugas:var(--p-biru-400); --d-tugas-lembut:var(--p-biru-950); } /* ─────────────────────────────────────────────────────────────────────────── 4 · SKALA — ruang, lekuk, huruf, gerak. Tidak berwarna, tetapi sama-sama menentukan "rasa" sebuah tema; menaruhnya di sini membuat tema yang lebih lapang atau lebih padat jadi satu blok, bukan ratusan suntingan. ⚠ Nilainya diambil dari yang SUDAH dipakai aplikasi (V.3), bukan dikarang. ─────────────────────────────────────────────────────────────────────────── */ :root{ --ruang-1:.25rem; --ruang-2:.35rem; --ruang-3:.5rem; --ruang-4:.6rem; --ruang-5:.7rem; --ruang-6:.9rem; --ruang-7:1rem; --lekuk-kecil:8px; --lekuk-kontrol:12px; --lekuk-kartu:16px; --lekuk-bulat:999px; --huruf-dasar:15px; --huruf-kecil:.73rem; --huruf-sub:.78rem; --huruf-isi:.86rem; --huruf-judul:1.02rem; --huruf-besar:1.4rem; --tebal-biasa:500; --tebal-tegas:600; --tebal-judul:700; --garis-tipis:1px; --sentuh-min:40px; /* ADR-032 — tinggi ketuk terkecil */ --gerak-cepat:.09s; --gerak-sedang:.12s; --gerak-halus:.18s; --lengkung:ease-out; } /* ─────────────────────────────────────────────────────────────────────────── 5 · TEMA KEDUA — BUKTI, bukan hiasan. ⛔ Ia ada supaya pernyataan "temanya bisa ditukar" punya bukti yang bisa dijalankan. Tema yang tidak pernah ditukar tidak pernah terbukti bisa ditukar — kelas yang sama dengan pagar yang tidak pernah memerah. Pakai: . Seluruh isinya memetakan ulang PERAN; tidak satu pun warna diketik di sini. ─────────────────────────────────────────────────────────────────────────── */ :root{ --p-rimba-700:#14532D; --p-rimba-600:#166534; --p-rimba-400:#4ADE80; --p-rimba-300:#86EFAC; --p-rimba-050:#E7F7EC; --p-rimba-950:#07251A; } :root[data-tema="rimba"]{ --brand:var(--p-rimba-600); --brand-strong:var(--p-rimba-700); --brand-soft:var(--p-rimba-050); --brand-text:var(--p-rimba-600); } @media (prefers-color-scheme: dark){ :root[data-tema="rimba"]:not([data-theme="light"]){ --brand:var(--p-rimba-400); --brand-strong:var(--p-rimba-300); --brand-soft:var(--p-rimba-950); --brand-text:var(--p-rimba-300); } } :root[data-tema="rimba"][data-theme="dark"]{ --brand:var(--p-rimba-400); --brand-strong:var(--p-rimba-300); --brand-soft:var(--p-rimba-950); --brand-text:var(--p-rimba-300); }