/* ========================================================================== SIAP IPDN — TOKEN DESAIN ========================================================================== Satu-satunya tempat nilai warna, jarak, radius, dan ukuran huruf ditulis. Sisa berkas CSS dan seluruh view merujuk ke sini lewat var(). KENAPA BERKAS INI ADA --------------------- Sebelumnya aplikasi ini tidak punya satu pun berkas CSS: seluruh gaya bersama ada sebagai 532 baris inline di layouts/app.blade.php, dan warnanya ditulis tangan sebagai ~2.500 kode hex yang tersebar di 123 dari 136 view. Akibatnya mengganti satu warna aksen berarti menyentuh 172 tempat, dan empat kerangka HTML menduplikasi palet sampai salah satunya menyimpang tanpa disadari (errors/layout memakai #1a3a6b yang tidak ada di palet mana pun). Nilai di bawah TIDAK dikarang. Semuanya diambil dari hex yang paling sering sudah dipakai di view — jumlah kemunculannya dicatat di komentar. Jadi pemindahan ini menyeragamkan, bukan mengubah rupa aplikasi diam-diam. MENAMBAH WARNA BARU ------------------- Jangan tulis hex di view atau di berkas CSS lain. Tambahkan tokennya di sini supaya tetap ada satu sumber. `php artisan ui:lint` akan menandai hex yang ditulis di luar berkas ini. ========================================================================== */ :root { /* ── Netral ──────────────────────────────────────────────────────────── Dasar tampilan. Skala slate — sudah menjadi bahasa de-facto aplikasi ini, hanya belum pernah dibakukan. */ --n-0: #ffffff; --n-50: #f8fafc; /* latar tabel kepala, panel dalam */ --n-75: #f6f8fb; /* latar halaman: satu tingkat ke arah tint dongker IPDN, supaya latar dan tint menu aktif terbaca sebagai satu keluarga ("wajah" yang dipilih dari lembar arahan skill design-taste-frontend) */ --n-100: #f1f5f9; /* 103× — latar halaman */ --n-200: #e2e8f0; /* 76× — garis batas */ --n-300: #cbd5e1; /* garis batas tegas, keadaan mati */ --n-400: #94a3b8; /* 308× — teks sekunder, ikon */ --n-500: #64748b; /* 215× — teks redup */ --n-600: #475569; /* 77× — teks isi tabel */ --n-700: #374151; /* teks isi */ --n-800: #1e293b; /* 105× — judul */ /* ── Aksen IPDN ──────────────────────────────────────────────────────── Diambil dari lambang institusi: cincin biru dongker, tepi & Garuda emas, merah bendera. Dipakai HEMAT — hanya untuk sidebar, tombol tindakan utama, penanda aktif, dan angka utama. Kartu, tabel, dan badge tetap netral kecuali memang menyatakan status. Itulah yang membedakan "netral dengan aksen" dari "serba biru". */ --a-50: #eef3fa; /* 105× — tint latar */ --a-100: #dce7f5; /* juga menyerap #dce6f3 yang beda 2 digit tanpa alasan */ --a-200: #c3d3e8; /* garis batas panel beraksen */ --a-300: #5a86bd; /* aksen redup — ikon di atas latar tint */ --a-400: #2d5c9e; /* antara aksen utama dan redup */ --a-500: #1b4585; /* 172× — aksen utama */ --a-700: #12305e; /* 77× — dongker cincin lambang */ --a-800: #0d2449; /* lebih gelap dari cincin — tombol utama saat disorot */ --a-900: #0a1c3a; /* ujung bawah gradasi sidebar */ --a-emas: #c9922b; /* emas lambang — penanda aktif sidebar */ --a-merah: #c8102e; /* merah bendera pada lambang */ /* ── Status ──────────────────────────────────────────────────────────── Tiga tingkat per status: latar (-50), garis (-200), teks/ikon (-600). Triplet inilah yang sekarang diulang tangan di 72 view untuk badge. */ --ok-50: #f0fdf4; /* 84× */ --ok-100: #dcfce7; /* pita status yang perlu lebih terbaca dari -50 */ --ok-200: #86efac; --ok-500: #22c55e; /* juga menyerap #059669 — dua hijau yang praktis sama */ --ok-600: #16a34a; /* 79× */ --ok-700: #15803d; --ok-800: #166534; --warn-50: #fffbeb; --warn-100: #fef3c7; /* juga menyerap #fef9c3 (kuning vs amber, tak terbedakan) */ --warn-200: #fcd34d; /* juga menyerap #fde68a */ --warn-500: #f59e0b; --warn-600: #d97706; --warn-800: #92400e; /* 76× */ --bad-50: #fef2f2; --bad-100: #fee2e2; --bad-200: #fca5a5; --bad-500: #ef4444; --bad-600: #dc2626; --bad-800: #991b1b; --info-50: #eff6ff; --info-200: #93c5fd; --info-600: #2563eb; --info-800: #1e40af; /* Rona kelima untuk avatar berinisial. Bukan status — hanya pembeda identitas, jadi tidak diberi nama status. */ --ungu-50: #f5f3ff; --ungu-600: #7c3aed; /* ── Peran permukaan ─────────────────────────────────────────────────── Lapis di atas skala netral, supaya view menyebut MAKSUDNYA bukan nomornya: `var(--surface-card)` tetap benar walau nilainya nanti diubah. */ --surface-app: var(--n-75); --surface-card: var(--n-0); --surface-sunken: var(--n-50); --border: var(--n-200); --border-strong: var(--n-300); --border-soft: var(--n-100); /* garis baris & pemisah dalam kartu */ --text: var(--n-800); --text-body: var(--n-700); /* Dua tingkat abu-abu, keduanya ≥4,5:1 di atas putih. --n-400 (2,6:1) dulu dipakai untuk NIP, keterangan, dan kepala tabel — terlalu pucat untuk dibaca, dan alat pemeriksa skill menandainya. */ --text-muted: var(--n-600); --text-faint: var(--n-500); /* ── Radius ──────────────────────────────────────────────────────────── LEMBUT (kartu 16, kendali 10). Penelitian skill design-taste-frontend: radius aplikasi kerja bimodal — ketat 4-8 atau lembut 16-24; nilai tanggung 10-14 untuk KARTU adalah ciri dashboard template. Sempat ketat (8/6), tetapi bersama garis di tiap kartu hasilnya terbaca seperti kisi-kisi kotak yang kaku. Radius bertingkat turun dari luar ke dalam: kartu 16 → kotak di dalamnya 10 → lencana 6. */ --r-sm: 6px; /* lencana, keping */ --r-md: 10px; /* tombol, isian, kotak di dalam kartu */ --r-lg: 16px; /* kartu */ --r-xl: 20px; --r-pill: 99px; /* ── Bayangan ────────────────────────────────────────────────────────── Tetap hemat, tapi kini berpasangan dengan garis yang lebih lembut. Garis abu-abu tegas di setiap kartu membuat halaman terbaca sebagai kisi-kisi formulir; garis tipis + bayangan sangat halus memisahkan bidang yang sama dengan lebih tenang. -1 kartu diam · -2 kartu disorot · -3 yang melayang (dropdown, modal). */ --sh-1: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .04); --sh-2: 0 8px 24px -8px rgba(15, 23, 42, .14), 0 2px 6px rgba(15, 23, 42, .05); --sh-3: 0 16px 40px -12px rgba(15, 23, 42, .22); /* Kartu diam: bayangan saja, TANPA garis (garis atau bayangan, tidak keduanya). Lemah — di bawah 8% hitam — cukup untuk mengangkat kartu putih dari latar tanpa membuat halaman berat. */ --sh-kartu: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 16px -6px rgba(15, 23, 42, .08); --sh-focus: 0 0 0 3px rgba(27, 69, 133, .14); --sh-tombol: 0 1px 2px rgba(13, 36, 73, .18), 0 2px 8px -2px rgba(27, 69, 133, .35); /* ── Gerak ───────────────────────────────────────────────────────────── Satu kurva untuk seluruh transisi supaya semuanya bergerak senada. */ --gerak: .18s cubic-bezier(.2, .7, .3, 1); /* ── Skala huruf ─────────────────────────────────────────────────────── Relatif terhadap html { font-size: 17px } di base.css — sengaja lebih besar dari 16px karena banyak penggunanya dosen senior. Nilai px di komentar dihitung dari 17px itu. ENAM ukuran, bukan delapan. Skala lama punya pasangan yang selisihnya di bawah 1px (.72/.75, .82/.875, .95/1): diukur di 8 layar, aplikasi menampilkan 13 ukuran berbeda — lima di antaranya antara 11 dan 13px. Selisih sekecil itu tidak terbaca sebagai hierarki, melainkan sebagai ketidakrapian. Nama token lama dipertahankan (dipakai ratusan view), tapi yang berdekatan kini menunjuk ke nilai yang sama. keterangan 12,0px lencana, label kecil, judul bagian sidebar sekunder 13,6px NIP/keterangan, label isian, kepala tabel isi 14,9px isi tabel, menu, tombol, isian judul 17,0px judul kartu, nama dalam kartu judul halaman 22,1px angka 30,6px angka statistik */ --t-2xs: .706rem; /* keterangan */ --t-xs: .8rem; /* sekunder — dulu .75, kini disatukan dengan sm */ --t-sm: .8rem; /* sekunder */ --t-base: .875rem; /* isi */ --t-md: 1rem; /* judul — dulu .95, kini disatukan dengan lg */ --t-lg: 1rem; /* judul */ --t-xl: 1.3rem; /* judul halaman */ --t-2xl: 1.8rem; /* angka */ /* TIGA ketebalan. 700 dan 800 (yang dulu dipakai bergantian dengan 600 untuk peran yang sama) disatukan ke 600: pada Inter, 600 sudah cukup tegas untuk judul dan angka, dan satu tingkat "tebal" membuat tulisan tebal di seluruh aplikasi terlihat sama beratnya. */ --fw-normal: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 600; /* ── Jarak ───────────────────────────────────────────────────────────── Skala 4px. Menghapus jarak sembarang seperti 18px/14px/22px yang sekarang bertebaran. */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; /* ── Kerangka ────────────────────────────────────────────────────────── Dipakai juga oleh view lewat var() untuk menghitung offset. */ --sidebar-width: 248px; /* 230-256 pada aplikasi yang diteliti */ --topbar-height: 60px; /* ── Nama lama ───────────────────────────────────────────────────────── Dipertahankan karena masih dirujuk ~16 kali di view dan di beberapa blok @push('styles'). Menghapusnya sekarang akan mematikan gaya di sana tanpa ada yang terlihat rusak sampai halaman itu dibuka. Dihapus setelah sapuan 136 view selesai dan `ui:lint` melaporkan nol pemakaian. */ --primary: var(--a-500); --primary-dark: var(--a-700); --gold: var(--a-emas); --ipdn-merah: var(--a-merah); --sidebar-bg: var(--a-700); --sidebar-hover: var(--a-500); --sidebar-active: var(--a-emas); }