/* ============================================================ SmartFin — DESIGN TOKENS · tema "MaterialM", palet "Navy Ledger" ------------------------------------------------------------ BENTUK diturunkan dari material-m-nextjs-main.vercel.app (referensi pilihan klien). Menggantikan tema "Summit" — nilai berubah total, tapi TIAP NAMA TOKEN dipertahankan supaya 89 view dan 8 CSS halaman ikut berganti rupa tanpa disentuh. Tiga pergeseran besar dari tema sebelumnya: 1. MENGAMBANG, bukan bergaris. Kartu tidak lagi dipisah garis melainkan bayangan lembut abu-kebiruan (145,158,171) di atas halaman #f8fafd. Token --shadow-* yang dulu dipetakan ke `none` sekarang berisi elevasi sungguhan. 2. SERBA PIL. Tombol, lencana, dan chip membulat penuh. 3. WARNA — palet "Navy Ledger" (2026-09-24), menggantikan biru langit/toska/pink/ungu bawaan MaterialM yang terasa seperti aplikasi konsumen. Aturannya untuk aplikasi akuntansi: · SATU warna brand (navy) + netral untuk ±90% layar. · Warna status mengikuti kebiasaan akuntan: HIJAU = lunas/ laba, KUNING = menunggu, MERAH = jatuh tempo/negatif. (Pink & toska dulu terbaca "gaya hidup", dan toska terlalu dekat dengan biru brand.) · Ungu diredam dan hanya jadi warna KATEGORI (sisi Pembelian/ Hutang, akun Ekuitas) — bukan warna sekunder UI. TEMA PER PENGGUNA (2026-09-26): yang bisa dipilih tiap user di Pengaturan → Tampilan hanyalah SKALA BRAND (--brand-50…800). Warna status, ungu kategori, netral, bentuk, dan bayangan sama untuk semua tema — jadi arti warna (hijau lunas, merah jatuh tempo) tidak pernah bergeser antar pengguna. Lihat blok TEMA di akhir berkas dan katalognya di `app/Config/Themes.php`. Urutan muat: tokens.css → smartfin.css → [css halaman] → components.css → materialm.css ============================================================ */ :root { /* ── Warna semantik. Tiap keluarga punya 3 peran: (tanpa akhiran) = hiasan/ikon, -fill = latar + teks putih (≥4,5:1), -50/-100 = tint, -strong = teks di atas tint. Kontras: -fill thd putih / -strong thd -50 sendiri. ─── */ --success: #16a34a; /* hijau "lunas/laba" */ --success-fill: #15803d; /* 5,0:1 */ --success-strong: #166534; /* 6,5:1 di atas -50 */ --success-50: #eaf7ef; --success-100: #bfe6cc; --warning: #f59e0b; /* kuning "menunggu" */ --warning-fill: #b45309; /* 5,0:1 */ --warning-strong: #92400e; /* 6,7:1 di atas -50 */ --warning-50: #fff7e6; --warning-100: #fde4b0; /* --danger sengaja AMAN SEBAGAI TEKS (beda dgn --success/--warning yang hanya ikon): ±12 view memakainya utk teks "Hapus", galat form, dan hover di atas tint merah. 5,7:1 putih · 5,0:1 di atas -50 · 4,6:1 di atas --surface-2. Jangan diterangkan ke #dc2626 (cuma 4,2:1 di atas tint-nya sendiri). */ --danger: #c81e1e; /* merah "jatuh tempo/negatif" */ --danger-fill: #b91c1c; /* 6,5:1 */ --danger-strong: #991b1b; /* 7,3:1 di atas -50 */ --danger-50: #fdecec; --danger-100: #f8c9c9; /* `--info`/`--info-strong` TETAP langkah brand gelap (ia dipakai sebagai warna TEKS di beberapa modul) — keduanya ada di blok TURUNAN BRAND di akhir berkas supaya ikut tema pengguna. Rona biru baja yang lebih terang tersedia sebagai hiasan lewat --info-tone + pastelnya; itu warna semantik, tidak ikut tema. */ --info-tone: #4a90c8; /* hiasan/ikon saja */ --info-50: #eaf3fb; --info-100: #cfe3f4; /* Ungu DIREDAM — warna KATEGORI (sisi Pembelian/Hutang, akun Ekuitas, seri grafik kedua), bukan aksen UI. `--secondary` sengaja dialiaskan ke sini, bukan diberi rona sendiri: dua nama untuk satu peran itulah yang bikin `--info` sempat salah dialias ke biru primary. */ --purple: #7c6bb8; --purple-fill: #5f4fa0; /* 6,8:1 */ --purple-strong: #4a3d82; /* 8,2:1 di atas -50 */ --purple-50: #f2f0f9; --purple-100: #e1dcf1; /* teks/garis di atas bilah ungu pekat */ --purple-200: #c6bde6; --secondary: var(--purple); --secondary-fill: var(--purple-fill); --secondary-50: var(--purple-50); /* Seri grafik KATEGORIKAL (identitas bagian, bukan status) — urutan TETAP, jangan diputar. Divalidasi dataviz validate_palette.js (mode terang, 2026-09-28): semua lolos — CVD ΔE 8,5, normal ΔE 17,2, kontras ≥ 3:1. Sengaja TIDAK ikut tema warna user: warna mengikuti entitas datanya. Dipakai pertama kali di komposisi Neraca. */ --chart-1: #1f4f93; /* navy */ --chart-2: #2f9e8f; /* teal */ --chart-3: #8e7cc3; /* ungu lembut */ /* ── PASTEL. Kartu pastel MaterialM = latar tint + BAYANGAN MATI (`card bg-*-subtle shadow-none`), radius tetap 24px seperti kartu putih. Yang di bawah ini bentuk semi-transparannya — dipakai kalau tint harus menumpang di atas permukaan yang BUKAN putih (menu aktif di sidebar, chip di dalam kartu bertint). Untuk latar kartu, pakai langkah -50 yang sudah pejal supaya tidak menumpuk jadi makin pekat. ────────── */ --purple-tint: rgba(124,107,184,.10); --secondary-tint: var(--purple-tint); --success-tint: rgba(22,163,74,.10); --warning-tint: rgba(245,158,11,.10); --danger-tint: rgba(200,30,30,.10); --info-tint: rgba(74,144,200,.10); /* Aksen — dipakai hemat: sematan, sorotan, CTA kedua */ --accent: var(--warning); --accent-dark: var(--warning-fill); --accent-50: var(--warning-50); --accent-100: var(--warning-100); /* ── Netral & permukaan (biru-keabuan, bukan abu netral) ── */ --dark: #111c2d; /* judul */ --dark-2: #1a2537; --dark-3: #2a3547; /* teks isi */ --muted: #5a6a85; /* teks sekunder DI ATAS PUTIH (5,6) */ --muted-strong: #46536b; /* teks sekunder di atas tint (≥4,5) */ --muted-2: #7b8893; /* HANYA ikon/garis — bukan teks */ --border: #e4ebf0; /* = --bs-border-color */ --border-soft: #eff4fa; /* = gray-200, pemisah di dalam kartu */ --border-strong: #dfe5ef; /* = gray-300, tepi kontrol */ --white: #ffffff; --card: #ffffff; --surface: #eff4fa; /* isian lembut (chip, hover) */ --surface-2: #e0e6eb; --sidebar-bg: #ffffff; /* sidebar PUTIH, tanpa garis kanan */ --bg: #f8fafd; /* halaman: putih kebiruan */ /* ── Layout. Diukur dari kerangka referensi: sidebar 270px, kepala halaman 72px, wadah isi max 1400px dengan sela `py-30 px-6` (30px tegak, 24px datar) dan `gap-30` antar kartu — 30px itu irama khas MaterialM, bukan 24px. ───── */ --sidebar-w: 260px; /* build Bootstrap; build Tailwind 270px */ --sidebar-collapsed-w: 74px; --navbar-h: 72px; --menubar-h: 52px; /* bilah menu — hanya tata letak "Menu Atas" */ /* Tepi atas untuk SEMUA elemen `position: sticky` di isi halaman (bilah aksi detail, bar periode, toolbar). Jangan pakai --navbar-h langsung: di "Menu Atas" kepala halaman setinggi navbar + bilah menu (layouts.css menimpanya), dan elemen yang menempel di --navbar-h jadi tersembunyi di balik bilah menu. */ --sticky-top: var(--navbar-h); --content-max: 1400px; /* ── Bentuk. Diukur dari referensi (rounded-3xl = 24px untuk KARTU, rounded-lg = 8px untuk KONTROL). Jarak dua langkah itu jauh — --radius-md mengisi tengahnya untuk lapisan melayang & petak kecil yang jadi konyol kalau 24px. ─── */ --radius-xs: 6px; --radius-sm: 8px; /* tombol, input, select */ --radius-md: 14px; /* dropdown, alert, petak */ --radius: 24px; /* KARTU — tanda tangan tema */ --radius-lg: 24px; --radius-xl: 28px; /* modal */ --radius-pill: 999px; /* Sudut AKSI (tombol, lencana, chip, tab, nomor halaman). Bawaan MaterialM = pil; gaya "Ringkas" menggantinya jadi --radius-sm. Avatar & titik status tetap --radius-pill: itu lingkaran, bukan gaya. */ --radius-action: var(--radius-pill); /* Tepi KARTU. MaterialM mengambang tanpa garis (bayangan yang memisahkan); gaya "Ringkas" memakai garis & mematikan bayangan. */ --card-border: none; /* ── Ritme spasi ────────────────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --space-page: 30px; /* sela tegak wadah isi (py-30) */ --space-page-x: 24px; /* sela datar wadah isi (px-6) */ --gap-grid: 30px; /* sela antar kartu (gap-30) */ /* ── Tinggi kontrol ─────────────────────────────────────── */ --control-h: 42px; --control-h-sm: 34px; --control-h-lg: 48px; /* ── Elevasi — TANDA TANGAN tema ini: kartu diangkat bayangan, bukan dipisah garis. Nilai diambil dari kartu referensi (`shadow-md`: dua lapis, lembut, tidak menyebar jauh). ─ */ /* Bayangan kartu diambil dari build Bootstrap (--bs-box-shadow): SANGAT tipis dan berona biru-abu, bukan abu netral. Build Tailwind memakai `shadow-md` bawaan Tailwind yang jauh lebih pekat — di halaman penuh kartu seperti ini, yang pekat bikin tiap kartu terlihat seperti dialog melayang. */ --shadow-sm: 0 1px 2px rgba(133,146,173,.12); --shadow: 0 1px 4px rgba(133,146,173,.20); --shadow-card: var(--shadow); --shadow-md: 0 6px 16px rgba(133,146,173,.28); --shadow-pop: 0 20px 25px -5px rgba(0,0,0,.12), 0 8px 10px -6px rgba(0,0,0,.10); --shadow-lg: var(--shadow-pop); /* Sidebar TIDAK memakai bayangan kartu: di referensi ia melebar ke kanan-bawah dan nyaris tak terlihat (`shadow-boxShadow`). */ --shadow-sidebar: 7px 7px 10px rgba(0,0,0,.03); --ring-danger: 0 0 0 3px rgba(200,30,30,.25); --transition: all .16s cubic-bezier(.4,0,.2,1); /* ── Tipografi. MaterialM memakai Inter — sudah di-vendor lokal, jadi tidak ada berkas baru yang perlu diunduh. ─ */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace; /* ── Skala z-index ──────────────────────────────────────── */ --z-sticky: 100; --z-overlay: 999; --z-sidebar: 1000; --z-popover: 1100; --z-modal: 1200; --z-toast: 1300; } /* ============================================================ TEMA PER PENGGUNA — skala brand ------------------------------------------------------------ Dipasang lewat `` oleh layouts/main.php dari pilihan user (`user_settings.theme`). Selektornya sengaja `[data-theme="x"]`, bukan `:root[data-theme="x"]`: dengan begitu ELEMEN APA PUN bisa memakai tema lain untuk dirinya sendiri — kartu pratinjau di halaman Pengaturan memanfaatkannya, jadi tidak ada satu hex pun di view. Menambah tema baru: 1. Tambahkan blok di bawah (9 langkah + dua --*-rgb), cek kontras: putih di atas 500 & 600 ≥4,5; 700 di atas putih, -50, dan --surface-2 ≥4,5. 2. Daftarkan kuncinya di `app/Config/Themes.php`. 3. Bump `?v=` tokens.css di layouts/main.php & auth/login.php. Kelompok PROFESIONAL (lihat Config\Appearance) menghindari rona warna status (hijau ±142°, kuning ±38°, merah ±0°) dan ungu kategori (±253°). Kelompok CERAH boleh berbagi rona dgn status (Zamrud, Jingga) karena dipilih sadar oleh user-nya — tapi tema bawaan harus selalu dari kelompok Profesional. Merah sengaja tak ditawarkan: tombol utama merah terbaca sebagai "Hapus". `--brand-rgb` (= langkah 500) & `--brand-400-rgb` ada karena CSS lama menulis `rgba(47,100,173,.03)` untuk hover tipis — sekarang ditulis `rgba(var(--brand-rgb), .03)` supaya ikut tema. ============================================================ */ /* Navy Ledger — BAWAAN. Skala penuh supaya tiap pemakaian punya langkah dengan kontras yang benar. Kontras terhadap PUTIH (teks butuh 4,5:1): 500 5,9:1 → ikon & aksen (aman juga utk teks) · 600 8,1:1 → isian tombol + teks putih · 700 10,4:1 → teks & tautan. Langkah 500 pun lolos AA, tapi teks tetap pakai 700 supaya aturan penjaga (`DesignGuardTest`) sama untuk semua tema. */ :root, [data-theme="navy"] { --brand-50: #eef3fa; --brand-100: #dbe5f3; --brand-200: #b6cae6; --brand-300: #85a6d3; --brand-400: #5582bf; --brand-500: #2f64ad; /* ikon, aksen, seri grafik utama */ --brand-600: #1f4f93; /* isian tombol (teks putih 8,1:1) */ --brand-700: #193f76; /* teks & tautan di atas putih/tint */ --brand-800: #122e57; --brand-rgb: 47,100,173; --brand-400-rgb: 85,130,191; } /* Samudra — biru cerah, paling dekat dgn rona asli MaterialM. putih/500 5,1 · putih/600 7,0 · 700/putih 9,2 · 700/-50 8,3. */ [data-theme="samudra"] { --brand-50: #eaf5fc; --brand-100: #cfe8f7; --brand-200: #9fd0ee; --brand-300: #62b0e0; --brand-400: #2a8fcc; --brand-500: #0b72b5; /* 5,1:1 */ --brand-600: #085d96; /* 7,0:1 */ --brand-700: #084b79; /* 9,2:1 */ --brand-800: #07385a; --brand-rgb: 11,114,181; --brand-400-rgb: 42,143,204; } /* Petrol — hijau-biru tua. Rona 185° sengaja jauh dari hijau "lunas" (142°) supaya tombol utama tidak terbaca sebagai status. putih/500 5,5 · putih/600 7,5 · 700/putih 9,8 · 700/-50 8,9. */ [data-theme="petrol"] { --brand-50: #ebf6f6; --brand-100: #cfe9ea; --brand-200: #a0d2d4; --brand-300: #64b1b5; --brand-400: #2f8f94; --brand-500: #137479; /* 5,5:1 */ --brand-600: #0e5e63; /* 7,5:1 */ --brand-700: #0c4b4f; /* 9,8:1 */ --brand-800: #08373a; --brand-rgb: 19,116,121; --brand-400-rgb: 47,143,148; } /* Grafit — arang kebiruan, nyaris monokrom. ⚠️ Langkah 700 hampir sama dgn teks isi (--dark-3), jadi tautan di tema ini dibedakan lewat ketebalan/letak, bukan warna — itu memang watak tema ini. putih/500 7,0 · putih/600 9,6 · 700/putih 12,4 · 700/-50 11,3. */ [data-theme="grafit"] { --brand-50: #f1f4f7; --brand-100: #e2e7ed; --brand-200: #c5ced9; --brand-300: #9aa8b8; --brand-400: #6b7a8e; --brand-500: #4a5a6e; /* 7,0:1 */ --brand-600: #37465a; /* 9,6:1 */ --brand-700: #283546; /* 12,4:1 */ --brand-800: #1a2432; --brand-rgb: 74,90,110; --brand-400-rgb: 107,122,142; } /* Zaitun — hijau zaitun kalem (±78°, saturasi rendah): membumi, jauh dari hijau "lunas" yang terang. putih/500 5,4 · putih/600 7,4 · 700/putih 10,0 · 700/-50 9,4. */ [data-theme="zaitun"] { --brand-50: #f7f9f3; --brand-100: #ecf0e3; --brand-200: #d9e0c7; --brand-300: #bdce97; --brand-400: #7a953d; --brand-500: #5d722e; /* 5,4:1 */ --brand-600: #4b5c25; /* 7,4:1 */ --brand-700: #3a471d; /* 10,0:1 */ --brand-800: #2a3415; --brand-rgb: 93,114,46; --brand-400-rgb: 122,149,61; } /* Kopi — cokelat hangat (±24°, saturasi rendah). Lebih pudar dari --warning-strong yang pekat, jadi lencana "menunggu" tetap menonjol. putih/500 5,4 · putih/600 7,4 · 700/putih 10,0 · 700/-50 9,3. */ [data-theme="kopi"] { --brand-50: #f9f6f3; --brand-100: #f0e8e3; --brand-200: #e0d1c7; --brand-300: #c9ae9c; --brand-400: #b18060; --brand-500: #8b6044; /* 5,4:1 */ --brand-600: #714e37; /* 7,4:1 */ --brand-700: #573d2b; /* 10,0:1 */ --brand-800: #3f2c1f; --brand-rgb: 139,96,68; --brand-400-rgb: 177,128,96; } /* Indigo — nila terang (CERAH). Skala Tailwind digeser satu langkah lebih gelap supaya langkah 500 pun lolos AA dgn teks putih. putih/500 6,3 · putih/600 7,9 · 700/putih 9,9 · 700/-50 8,9. */ [data-theme="indigo"] { --brand-50: #eef2ff; --brand-100: #e0e7ff; --brand-200: #c7d2fe; --brand-300: #a5b4fc; --brand-400: #818cf8; --brand-500: #4f46e5; /* 6,3:1 */ --brand-600: #4338ca; /* 7,9:1 */ --brand-700: #3730a3; /* 9,9:1 */ --brand-800: #312e81; --brand-rgb: 79,70,229; --brand-400-rgb: 129,140,248; } /* Fuchsia — magenta berani (CERAH), rona ±295° yang tidak dipakai warna status mana pun. putih/500 6,3 · putih/600 8,2 · 700/putih 10,0 · 700/-50 9,3. */ [data-theme="fuchsia"] { --brand-50: #fdf4ff; --brand-100: #fae8ff; --brand-200: #f5d0fe; --brand-300: #f0abfc; --brand-400: #d946ef; --brand-500: #a21caf; /* 6,3:1 */ --brand-600: #86198f; /* 8,2:1 */ --brand-700: #701a75; /* 10,0:1 */ --brand-800: #4a044e; --brand-rgb: 162,28,175; --brand-400-rgb: 217,70,239; } /* Zamrud — hijau zamrud (CERAH). ⚠️ Serumpun dgn hijau "lunas": tombol utama ikut hijau. Status tetap terbaca karena selalu berupa lencana berlabel — tapi jangan jadikan tema ini bawaan. putih/500 5,5 · putih/600 7,7 · 700/putih 9,7 · 700/-50 9,2. */ [data-theme="zamrud"] { --brand-50: #ecfdf5; --brand-100: #d1fae5; --brand-200: #a7f3d0; --brand-300: #6ee7b7; --brand-400: #10b981; --brand-500: #047857; /* 5,5:1 */ --brand-600: #065f46; /* 7,7:1 */ --brand-700: #064e3b; /* 9,7:1 */ --brand-800: #022c22; --brand-rgb: 4,120,87; --brand-400-rgb: 16,185,129; } /* Jingga — oranye hangat (CERAH). ⚠️ Serumpun dgn kuning "menunggu" & tombol .btn-warning — alasan yang sama dgn Zamrud. putih/500 5,2 · putih/600 7,3 · 700/putih 9,4 · 700/-50 8,8. */ [data-theme="jingga"] { --brand-50: #fff7ed; --brand-100: #ffedd5; --brand-200: #fed7aa; --brand-300: #fdba74; --brand-400: #f97316; --brand-500: #c2410c; /* 5,2:1 */ --brand-600: #9a3412; /* 7,3:1 */ --brand-700: #7c2d12; /* 9,4:1 */ --brand-800: #431407; --brand-rgb: 194,65,12; --brand-400-rgb: 249,115,22; } /* ── Turunan brand. HARUS ikut selektor tema: variabel kustom mewarisi nilai yang SUDAH dihitung, jadi `--primary` yang cuma dideklarasikan di :root akan tetap navy di dalam elemen `[data-theme="petrol"]`. Dengan mendeklarasikannya ulang di tiap elemen bertema, var() dihitung dari skala brand setempat. ───── */ :root, [data-theme] { /* Alias lama — dipertahankan supaya CSS & halaman yang sudah ada tetap jalan tanpa diedit. */ --primary: var(--brand-600); --primary-dark: var(--brand-700); --primary-darker: var(--brand-800); --primary-light: var(--brand-500); --primary-50: var(--brand-50); --primary-100: var(--brand-100); --primary-200: var(--brand-200); --primary-grad: linear-gradient(135deg, var(--brand-500), var(--brand-700)); --info: var(--brand-600); --info-strong: var(--brand-700); --brand-tint: rgba(var(--brand-rgb), .10); --ring: 0 0 0 3px rgba(var(--brand-rgb), .25); } /* ============================================================ GAYA PER PENGGUNA — "Ringkas" (data-style="compact") ------------------------------------------------------------ Dipasang lewat `` dari pilihan user (`user_settings.ui_style`, katalog `app/Config/Appearance.php`). Untuk yang bekerja dengan tabel panjang seharian: kartu BERGARIS tanpa bayangan, sudut kecil, kontrol & sela lebih rapat — lebih banyak baris terlihat per layar. Bentuk yang tak bisa diwakili token ada di `layouts.css` (bagian A). Selektornya sengaja `[data-style=…]` (kekhususan sama dgn :root) dan berkas ini dimuat PALING AWAL: penimpaan `:root` responsif & `pointer: coarse` di smartfin.css tetap menang di ponsel/layar sentuh — target sentuh 44px tidak ikut dirapatkan. ============================================================ */ [data-style="compact"] { --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius: 10px; --radius-lg: 10px; --radius-xl: 14px; --radius-action: var(--radius-sm); --card-border: 1px solid var(--border); --shadow-sm: none; --shadow: none; --shadow-card: none; --shadow-sidebar: none; --control-h: 36px; --control-h-sm: 30px; --control-h-lg: 42px; --space-page: 20px; --space-page-x: 20px; --gap-grid: 16px; --navbar-h: 60px; --menubar-h: 44px; --sidebar-w: 240px; }