/* ========================================================================== ARG — DESIGN TOKENS v3.0.0 (Ungu × Kuning × Pink) Menggantikan v2.0.0 (Navy × Biru × Lime). Nilai warna & huruf di bawah datang dari prototipe absensi Revisi 19 lewat berkas `tokens-baru.css` yang dikirim MRI — keputusan MRI: palet SELURUH ARG Suite mengikuti prototipe itu, bukan sebaliknya. LIGHT THEME ONLY. Tidak ada blok dark mode; color-scheme dikunci ke light supaya kontrol form tidak ikut digelapkan browser saat OS pengguna gelap. ── KENAPA BERKAS INI BUKAN SALINAN MENTAH `tokens-baru.css` ────────── Berkas kiriman memuat 24 token; aplikasi ini MEMBACA 26 token lain yang tidak ada di sana. Ditimpa mentah-mentah, `var()` yang tidak terdefinisi menjadikan seluruh deklarasinya TIDAK SAH — dan matinya diam, tanpa satu pun galat: --lapis-* sembilan z-index runtuh jadi `auto`. Persis bug yang catatan --lapis-pemilih di bawah ada untuk mencegah: dropdown di dalam modal benar-benar terbuka, hanya mendarat di bawah latar modal, dan yang terlihat di layar adalah kolom yang "tidak berfungsi". --sidebar/-2 sidebar kehilangan warnanya sama sekali. --fokus/-ring cincin fokus papan ketik hilang — aksesibilitas. --gerak-* semua transisi mati. --hover/tekan umpan balik sentuh hilang di sidebar & tabel. --r-pil pil status berhenti berbentuk pil. --blue-2 dipakai `core/calendar.js` sebagai LATAR berteks putih; tanpa isi, teks putih di atas bidang transparan. --blue-soft-2 belang baris Data Master & hover. --shadow-3, --r-xs, --sidebar-ciut Jadi yang dikerjakan: NILAI dari berkas kiriman dipasang, RANGKA token yang 26 itu dipertahankan. Hasil akhirnya sama dengan yang diminta — seluruh aplikasi berganti palet dari satu berkas — tanpa merusak apa pun. ── ENAM NILAI YANG DITURUNKAN, BUKAN DISALIN ───────────────────────── Prototipe hanya punya SATU ungu dan SATU kuning; aplikasi butuh pasangan terang/gelap untuk keadaan hover & tekan. Yang diturunkan: --blue-hi #A855F7 ← --doc-lpj dari palet kiriman (ungu lebih muda) --blue-2 #6D28D9 ← --doc-po dari palet kiriman (ungu lebih tua) --fokus #6D28D9 ← sama, lihat catatan cincin fokus di bawah --lime-dark #E09B00 ← #FFB703 digelapkan; prototipe menyamakannya dengan --lime, dan tombol kuning yang warnanya tidak berubah saat disentuh tidak memberi tahu apa pun bahwa ia tersentuh --blue-soft-2 #8338EC33 ← satu anak tangga di atas --blue-soft --hover/--tekan ← ungu pada 7% dan 13%, angka yang sama dengan palet lama Empat yang pertama diambil dari palet kiriman sendiri, bukan dikarang. Aturan kontras yang menggantikan "teks di atas lime selalu navy": teks di atas KUNING (--lime) SELALU --on-lime (#111111), tidak pernah putih — kuning #FFB703 dengan teks putih hanya 1,9:1. Teks di atas UNGU (--blue) selalu --on-accent (putih). NAMA TOKEN TIDAK BOLEH BERUBAH. --navy sekarang berisi hitam dan --lime berisi kuning; namanya sengaja dipertahankan supaya tidak ada satu pun dari 14 form yang perlu disunting. ========================================================================== */ /* Montserrat dilayani dari /vendor, BUKAN dari Google Fonts — aturan yang sama dengan jsPDF dan supabase-js: hosting bisa saja tanpa akses keluar, dan huruf yang gagal dimuat membuat seluruh aplikasi jatuh ke Segoe UI tanpa satu pun tanda. Berkas variabel (400–800) jadi satu berkas per subset, bukan lima berat terpisah. */ @font-face{ font-family:'Montserrat'; font-style:normal; font-weight:400 800; font-display:swap; src:url('../vendor/font/montserrat-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215, U+FEFF,U+FFFD; } /* latin-ext dipisah dengan sengaja: 105.609 nama barang hasil impor memuat huruf beraksen, dan tanpa subset ini huruf-huruf itu jatuh ke Segoe UI di tengah kata. 70 KB yang hanya terunduh kalau memang terpakai. */ @font-face{ font-family:'Montserrat'; font-style:normal; font-weight:400 800; font-display:swap; src:url('../vendor/font/montserrat-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF, U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB, U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } :root{ color-scheme: light; /* ── Warna inti ──────────────────────────────────────────────────── */ /* --navy dipakai sebagai warna teks/permukaan paling pekat. Pada palet ini isinya hitam netral, bukan biru tua lagi. */ --navy:#111111; --blue:#8338EC; /* TIDAK lagi sama dengan WARNA_DOK di core/pdf.js — lihat catatan di bawah blok ini */ --blue-hi:#A855F7; /* terang: hover */ --blue-2:#6D28D9; /* tua: tekan/aktif, dan LATAR berteks putih di core/calendar.js — jadi harus tetap gelap */ --blue-soft:#8338EC1C; --blue-soft-2:#8338EC33; --lime:#FFB703; --lime-dark:#E09B00; /* CATATAN YANG TIDAK BOLEH HILANG: sampai v2, --blue sengaja disamakan dengan WARNA_DOK di core/pdf.js supaya kop dokumen dan layar satu warna. Sejak palet ini keduanya BERBEDA — layar ungu, kop PDF masih biru #1669A8. Itu BUKAN kelalaian: mengubah warna kop berarti mengubah rupa dokumen yang sudah dikirim ke klien dan masuk arsip, dan itu keputusan MRI, bukan akibat sampingan pergantian palet layar. Selama belum diputuskan, jangan "menyelaraskannya" diam-diam. */ /* ── Bidang, dari paling belakang ke paling depan ────────────────── */ --page:#8338EC0D; /* latar halaman */ --sunk:#8338EC1F; /* bidang tertanam: area isian, slot foto */ --card-2:#8338EC0A; /* kartu sekunder, baris tabel berselang */ --card:#FFFFFF; /* kartu utama */ --sidebar:#FFFFFF; /* sidebar TERANG — permintaan tegas MRI, tidak ikut berubah bersama palet */ --sidebar-2:#8338EC0D; /* dasar & kepala sidebar */ /* ── Garis ───────────────────────────────────────────────────────── */ --line:#8338EC20; /* pemisah halus */ --line-2:#11111123; /* pembatas kontrol */ --line-in:#11111177; /* garis putus zona unggah */ /* ── Teks ────────────────────────────────────────────────────────── */ --ink:#111111; /* judul & isi utama */ --ink-2:#111111; /* teks pendukung — SAMA dengan --ink pada palet ini. Datang dari prototipe, bukan salah salin; akibatnya tangga tiga tingkat teks tinggal dua, dan yang membedakan teks pendukung tinggal ukuran serta beratnya. Sudah dilaporkan ke MRI. */ --ink-3:#11111192; /* keterangan (hitam ~57% → ±#777 di atas kertas) */ --on-accent:#FFFFFF; --on-lime:#111111; /* ── Keadaan ─────────────────────────────────────────────────────── */ --hover:rgba(131,56,236,.07); --tekan:rgba(131,56,236,.13); --pilih:var(--blue-soft); /* Cincin fokus dipisah dari warna aksen: ia harus tetap terlihat di atas tombol UNGU maupun latar kertas. --blue sendiri tidak dipakai karena cincin seungu tombolnya terbaca sebagai pendar, bukan cincin. Ungu tua #6D28D9 terbaca di keduanya — 8:1 di atas kertas, lebih gelap daripada tombolnya. */ --fokus:#6D28D9; --fokus-ring:0 0 0 3px rgba(109,40,217,.32); /* ── Status. Warna SAJA tidak pernah cukup — tiap status juga punya ikon dan teks; lihat .pil di core/base.css. Ungu menandai yang beres, kuning yang perlu perhatian, pink yang salah. DUA hal yang berubah artinya dan wajib diperiksa: (1) --warn kini HITAM, bukan cokelat — peringatan yang dulu bisa dibedakan dari teks biasa tanpa melihat latarnya sekarang bergantung penuh pada latar kuningnya; (2) --info dan --bad kini WARNA YANG SAMA (#FF4D6D) — keterangan biasa dan pesan kesalahan terlihat identik. Datang dari prototipe; menunggu keputusan MRI. ─────────────────────── */ --ok:#8338EC; --ok-bg:#8338EC1D; --ok-line:#8338EC; --warn:#111111; --warn-bg:#FFB70327; --warn-line:#FFB703; /* PINK DIGELAPKAN dari #FF4D6D kiriman, dan ini satu-satunya nilai warna yang saya ubah sendiri. Alasannya terukur, bukan selera: #FF4D6D di atas kertas hanya mencapai 3,21:1 sedangkan ambang AA untuk teks kecil 4,5:1 — dan di aplikasi ini --bad dipakai sebagai WARNA TEKS di 30 tempat, lawan 10 tempat sebagai latar/garis. Uji 24 menangkapnya pada empat kalimat berukuran 10,5–12px ("Wajib dilengkapi", "Klaim belum bisa diajukan", "Hapus halaman", "Dimulai"). Sebagai LATAR pun ia gagal: tombol pink berteks putih menghasilkan rasio 3,21:1 yang sama persis. #C9184A masih pink yang sama keluarganya, 5,66:1. Pink aslinya TETAP hidup di --bad-bg, --bad-line, dan --doc-retur. Kalau MRI mau pink terangnya kembali sebagai teks, tulisannya memang tidak akan terbaca — itu keputusannya, tapi angkanya ini. */ --bad:#C9184A; --bad-bg:#FF4D6D21; --bad-line:#FF4D6D64; /* --info sengaja DIBIARKAN sewarna --bad, persis seperti berkas kiriman: itu keputusan yang menunggu MRI, bukan kekeliruan yang boleh saya tambal sendiri. Yang saya betulkan hanya keterbacaannya. */ --info:#C9184A; --info-bg:#FF4D6D25; --info-line:#FF4D6D; /* Dipakai `.nota-kepala.nota-warn b` di core/app.css, yang selama ini memanggilnya dengan cadangan heks langsung `var(--warn-ink,#92400E)` — tokennya tidak pernah ada, jadi yang benar-benar tergambar selalu cokelat mentah itu. Sekarang tokennya ada dan cadangannya tak terpakai lagi. */ --warn-ink:#111111; /* ── Bayangan: naik seiring jarak dari kertas ────────────────────── */ --shadow-1:0 4px 14px rgba(17,17,17,.07); --shadow-2:0 10px 28px rgba(17,17,17,.11); --shadow-3:0 18px 40px rgba(17,17,17,.13), 0 32px 64px rgba(17,17,17,.10); --r-xs:6px; --r-sm:10px; --r:14px; --r-lg:22px; --r-pil:999px; /* Satu keluarga huruf untuk semua peran. Tiga token dipertahankan supaya form yang memanggil --font-mono tidak perlu diubah. CATATAN: Montserrat BUKAN huruf monospace. Kolom angka yang selama ini rapi karena JetBrains Mono akan bergoyang lebarnya. Obatnya bukan mengganti hurufnya, melainkan `font-variant-numeric: tabular-nums` — aturannya ada di dasar berkas ini. */ --font-display:"Montserrat","Segoe UI",system-ui,sans-serif; --font-body:"Montserrat","Segoe UI",system-ui,sans-serif; --font-mono:"Montserrat","Segoe UI",system-ui,sans-serif; /* ── Gerak. Cepat, halus, tidak berlebihan. ──────────────────────── */ --gerak-cepat:.12s; --gerak:.18s; --gerak-lambat:.28s; --lengkung:cubic-bezier(.22,.61,.36,1); /* ── Urutan tumpukan. Ditulis di satu tempat supaya tidak ada lagi angka z-index yang ditebak-tebak dan saling menimpa. ─────────── */ --lapis-sidebar:40; --lapis-topbar:30; --lapis-flyout:50; --lapis-laci:55; --lapis-pegangan:60; --lapis-modal:80; --lapis-pratinjau:84; /* ATURAN YANG HARUS DITULIS, bukan diingat: popup yang bisa hidup DI DALAM modal wajib duduk DI ATAS modal. Pemilih dan kalender keduanya begitu — dialog "Project Baru" memuat tiga pemilih dan dua kalender sekaligus. Selama angkanya ditulis lepas (pemilih 120, kalender 500, modal 800) keduanya mendarat DI BAWAH latar modal: dropdown-nya benar-benar terbuka, hanya tidak terlihat, dan yang tampak di layar adalah kolom yang "tidak berfungsi". Tidak ada galat sama sekali. Siapa pun yang menambah popup baru di dalam modal wajib memakai lapis ini. */ --lapis-pemilih:86; /* Menu yang terbuka DI ATAS pemilih maupun kalender — pemilih bulan & tahun di dalam popup kalender. Harus di atas --lapis-pemilih (86) dan di bawah --lapis-toast (90): pesan galat tidak boleh pernah tertutup oleh menu yang kebetulan sedang terbuka. */ --lapis-menu:88; --lapis-toast:90; --lapis-login:95; /* 250px, BUKAN 248px seperti berkas kiriman. Ini bukan angka palet: prototipe absensi adalah halaman HP yang tidak punya sidebar sama sekali, jadi 248 di sana tidak pernah mengukur apa pun. 250 adalah angka ARG Suite sendiri — dikunci uji 24, yang menghitung sisa ruang isi pada lebar HP dari angka itu. Menggesernya 2px tanpa ada yang memintanya berarti mengganti hasil pengukuran dengan bawaan salin. */ --sidebar-w:250px; --sidebar-ciut:66px; --topbar-h:58px; } /* Angka yang berjajar harus tetap berjajar meski hurufnya bukan monospace lagi. Tanpa aturan ini, kolom rupiah dan jam di 14 form akan bergoyang setiap angkanya berubah. */ [class*="mono"], .num, .nominal, .angka, td[align="right"], input[inputmode="numeric"], .jam, .durasi{ font-variant-numeric: tabular-nums; } /* Warna per jenis dokumen. Dipakai pil status dan ikon sidebar — BUKAN untuk kop PDF: seluruh keluaran dokumen memakai satu warna (WARNA_DOK di core/pdf.js), karena tiga belas dokumen dari perusahaan yang sama tidak boleh tampil seperti dari tiga belas tempat berbeda. Diturunkan ke keluarga ungu–pink–kuning, tapi TETAP saling berbeda: tiga belas jenis dokumen yang semuanya ungu sama saja dengan tidak diberi warna. */ :root{ --doc-pengajuan:#8338EC; --doc-po:#6D28D9; --doc-bapb:#A16207; --doc-retur:#FF4D6D; --doc-quotation:#111111; --doc-suratjalan:#7C3AED; --doc-invoice:#B45309; --doc-kwitansi:#FFB703; --doc-kasbon:#9333EA; --doc-lpj:#A855F7; --doc-reimburse:#C026D3; --doc-izin:#DB2777; --doc-lembur:#E11D48; --doc-bap:#5B21B6; } /* Menghormati pengguna yang mematikan animasi di sistemnya. Tanpa ini, gerak yang kita anggap "halus" bisa memicu pusing pada sebagian orang. */ @media (prefers-reduced-motion: reduce){ :root{ --gerak-cepat:0s; --gerak:0s; --gerak-lambat:0s; } *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important } }