/* ═══════════════════════════════════════════════════════════════════════
Antarmuka Hatoba — rancangan v6, diterapkan.
═══════════════════════════════════════════════════════════════════════
Berkas ini BUKAN tafsiran atas docs/mockup-v6/ui.css. Ia salinannya:
bagian INTI di bawah diambil apa adanya dari sana, dan satu-satunya yang
dibuang adalah perancah halaman peraga (.peraga/.layar/.cap/.bingkai) yang
memang cuma ada untuk memajang 25 layar dalam satu dokumen.
Alasannya sederhana. Setiap kali sebuah rancangan "diterjemahkan" ke kode,
yang tersisa setelah enam bulan adalah kodenya, dan rancangannya jadi
gambar yang tidak lagi cocok dengan apa pun. Dengan menyalin, satu-satunya
cara keduanya berbeda adalah kalau seseorang sengaja mengubah salah satunya.
Susunannya:
1. INTI v6 disalin dari docs/mockup-v6/ui.css
2. JEMBATAN TOKEN nama token lama menunjuk ke nilai v6
3. APLIKASI komponen yang tidak ada di mockup karena mockup
tidak punya peta, dropdown pencarian, atau htmx
SATU ATURAN YANG TIDAK BOLEH DILANGGAR: bagian 3 tidak boleh
mendefinisikan token sama sekali. Saat berkas ini pertama dirakit, satu
blok :root warisan ikut tersalin ke bagian 3 dan menimpa seluruh palet
serta KEDUA huruf v6 — halaman tetap tampak masuk akal, tata letaknya v6,
warnanya v5, dan tidak ada satu pun tanda di layar. Yang menemukannya
pengukuran, bukan mata: document.fonts.check() mengembalikan false.
Perakitnya sekarang menolak blok semacam itu, dan e2e-py/uji_tampilan_v6.py
memeriksa hurufnya benar-benar termuat pada tiap jalan.
Huruf tertanam ada di fonts.css, terpisah supaya bisa di-cache sendiri.
═══════════════════════════════════════════════════════════════════════ */
/* ═══ 1. INTI v6 ═══ */
/* ═══════════════════════════════════════════════════════════════════════
HATOBA UI v6 — token & komponen
═══════════════════════════════════════════════════════════════════════
Rancangan, BUKAN kode produksi. Aplikasi yang berjalan masih v5.
── Gagasan strukturalnya: SATU sistem, TIGA kerapatan ──────────────────
Ketiga aplikasi Hatoba dipakai orang yang berbeda, dalam keadaan yang
berbeda, dan itu bukan selera melainkan fakta yang bisa disebutkan:
web kasir/admin duduk, tetikus, layar 1366x768, berjam-jam
lantai orang gudang & kasir BERDIRI, tangan kotor, kadang gelap
sentuh pelanggan di HP murah, satu ibu jari, kuota terbatas
Yang berbeda hanya SKALA — ukuran huruf, tinggi baris, luas sasaran
sentuh, ketebalan garis. Warna, bentuk, dan bahasa komponennya sama
persis. Karena itu ketiganya terlihat bersaudara tanpa harus dirawat
sebagai tiga sistem terpisah.
Dipasang lewat atribut di atau pembungkus mana pun:
── Yang SENGAJA tidak dilakukan ────────────────────────────────────────
Tidak ada kartu bersudut membulat dengan aksen warna di tepi kiri di
mana-mana. Itu bentuk yang muncul di hampir semua rancangan sekarang,
dan di layar yang isinya tabel angka ia menambah 16 px sisi kiri-kanan
tanpa menambah satu pun informasi.
Sebagai gantinya: GARIS. Nota, struk, dan label — benda yang sistem ini
gantikan — memisahkan bagian dengan garis mendatar, bukan dengan kotak.
Garis tidak makan tempat, tidak butuh bayangan, dan tetap terbaca saat
dicetak hitam-putih.
═══════════════════════════════════════════════════════════════════════ */
/* @import DICABUT.
fonts.css dimuat lewat di layout.html, bukan @import. Keduanya
sempat aktif sekaligus, jadi ketiga @font-face terdaftar dua kali. @import
juga serial: peramban harus mengunduh app.css DULU sebelum tahu ada
fonts.css, sementara berjalan bersamaan. */
/* ── PALET ──────────────────────────────────────────────────────────────
Merah adalah #e30016, nilai dari logo. (Komentar lama di sini pernah
menyatakan merah digeser ke #c4142b — itu keputusan yang dibatalkan.)
Yang lama merah pemadam kebakaran — saturasi penuh, rona 355°. Di layar
toko yang menyala terang sepanjang hari ia menyilaukan, dan pada bidang
lebar (bar atas, tombol besar) ia berdengung. Yang baru lebih dalam dan
sedikit lebih hangat: masih tak salah lagi merah Hatoba, tapi bisa
dipakai pada bidang lebar tanpa membuat mata lelah.
Netralnya SENGAJA condong hangat (rona ~30°, saturasi ~8%), bukan abu
murni. Abu murni terbaca sebagai "belum dipilih"; netral hangat
menyambung ke kertas nota dan kardus — bahan dunia yang dilayani sistem
ini.
Warna semantik (ok/warn/crit) TERPISAH dari merah merek. Kalau keduanya
sama, "ada yang salah" dan "ini tombol utama" jadi satu isyarat. */
:root {
/* Ground & permukaan */
--kertas: #f6f3ef;
--kartu: #ffffff;
--kartu-2: #faf7f3;
--terangkat: #ffffff;
/* Tinta */
--tinta: #1a1512;
--tinta-2: #5c5551;
/* #8b827c hanya 3,40:1 di atas --kertas — cukup untuk hiasan, TIDAK cukup
untuk teks. Dan ia dipakai untuk SKU, tanggal, dan keterangan ubin:
semuanya teks yang benar-benar dibaca orang. Dinaikkan sampai 4,50 pada
latar tergelapnya (--kertas), rona dan saturasinya dipertahankan. */
--tinta-3: #776e69;
/* Garis — tiga ketebalan visual, bukan tiga warna acak:
halus memisahkan baris dalam satu daftar
tegas memisahkan bagian yang berbeda
kuat batas komponen yang bisa disentuh (WCAG 1.4.11: minimal 3:1) */
--garis: #e6ded6;
--garis-2: #d3c8bf;
--garis-3: #857a72;
/* Merek — DIAMBIL DARI LOGO, bukan dikarang.
Nilai ini disampel dari piksel internal/web/static/logo-wordmark.png:
lambangnya merah #e30016, wordmark "hatoba" hijau #009035. Versi
sebelumnya memakai #c4142b — saya sendiri yang menggesernya menjauh
dari logo, dan itu keliru. Hijau bahkan belum pernah dipakai sebagai
warna merek sama sekali, padahal separuh logo memang hijau.
DUA token per warna, karena satu nilai tidak bisa dua pekerjaan:
--merah TEKS/ikon di atas latar halaman
--merah-isi BIDANG, dengan --pada-merah di atasnya
Diukur: #e30016 sebagai teks lolos 4,91 dan 4,60 tapi cuma 4,44 di
latar halaman; #e10016 lolos di ketiganya dan tidak terbedakan mata.
Bidangnya tetap #e30016 persis — di situlah merek benar-benar dilihat. */
--merah: #e10016;
--merah-isi: #e30016;
--merah-tekan: #b30011;
--merah-cuci: #fdecec;
--pada-merah: #ffffff;
/* Hijau merek. Sebagai teks #009035 cuma 3,77–4,17, jadi teksnya sedikit
digelapkan; bidangnya #008932 supaya teks putih di atasnya lolos 4,54.
Keduanya tidak terbedakan dari nilai logo. */
--hijau: #00812f;
--hijau-isi: #008932;
--pada-hijau: #ffffff;
/* Semantik — terpisah dari merek */
/* "Beres/aman" memakai HIJAU MEREK, bukan hijau lain.
Separuh logo Hatoba hijau, dan di perdagangan ini hijau memang berarti
cocok, lunas, cukup. Memakai hijau yang berbeda untuk arti yang sama
membuat warna merek tidak pernah muncul di layar mana pun — dan itulah
yang terjadi di v3, v5, dan v6 sebelum ini.
ok-bg dinaikkan tipis (#e8f4ed -> #eaf5ef) supaya hijau merek lolos
4,50 di atasnya. */
--ok: #00812f; --ok-bg: #ecf6f0; --ok-garis: #a8cdba;
--warn: #8a5200; --warn-bg: #fdf1e0; --warn-garis: #e4c290;
--crit: #a81d1d; --crit-bg: #fbeceb; --crit-garis: #e5b4b1;
--info: #1b5a8a; --info-bg: #e9f2f9; --info-garis: #a9c8de;
/* Huruf */
--sans: "Hatoba Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
--mono: "Hatoba Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
/* Skala jarak — kelipatan 4, dipotong pada nilai yang benar-benar dipakai */
--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
--s5: 24px; --s6: 32px; --s7: 48px;
--lengkung: 6px;
--lengkung-sm: 4px;
/* ── KERAPATAN: web (bawaan) ──
Kasir muda, 1366x768, berjam-jam. Kepadatan di sini BUKAN kelalaian —
makin banyak baris yang muat, makin sedikit menggulung, dan menggulung
adalah pekerjaan yang tidak menghasilkan apa-apa. */
--t-xs: 12.5px;
--t-sm: 12.5px;
--t-dasar:14px;
--t-lg: 16px;
--t-xl: 20px;
--t-2xl: 26px;
--t-3xl: 32px;
--tinggi-baris: 1.45;
--baris-tabel: 34px; /* tinggi satu baris tabel */
--sasaran: 32px; /* sisi terkecil area sentuh */
--tebal-garis: 1px;
--pad-sel: 6px 10px;
}
/* ── KERAPATAN: lantai (Gudang & Kasir) ────────────────────────────────
Dipakai BERDIRI, layar 60-80 cm dari mata, tangan kotor atau berkeringat,
kadang cahaya gudang yang minim, kadang sambil memegang pemindai.
Semua naik: huruf 1,15x, sasaran sentuh dari 32 ke 48 px (WCAG 2.2 SC
2.5.5 menyarankan 44; 48 memberi ruang untuk tangan yang tidak presisi),
garis dari 1 ke 1,5 px supaya batas tetap terlihat di layar redup.
Ini alasan jawaban "desktop sengaja beda": bukan gaya yang berbeda,
melainkan skala yang berbeda dari sistem yang sama. */
[data-rapat="lantai"] {
--t-xs: 13px;
--t-sm: 15px;
--t-dasar:17px;
--t-lg: 20px;
--t-xl: 25px;
--t-2xl: 32px;
--t-3xl: 42px;
--tinggi-baris: 1.5;
--baris-tabel: 52px;
--sasaran: 48px;
--tebal-garis: 1.5px;
--pad-sel: 12px 14px;
--lengkung: 8px;
}
/* ── KERAPATAN: sentuh (pelanggan di HP) ───────────────────────────────
Android kelas bawah, layar 5-6 inci, satu ibu jari, kuota terbatas.
Sasaran 44 px, huruf tidak lebih kecil dari 13 px, dan chrome ditekan
sesedikit mungkin — tiap piksel yang dipakai bingkai adalah piksel yang
tidak dipakai barang dagangan. */
[data-rapat="sentuh"] {
--t-xs: 12px;
--t-sm: 13.5px;
--t-dasar:15px;
--t-lg: 17px;
--t-xl: 21px;
--t-2xl: 26px;
--t-3xl: 30px;
--tinggi-baris: 1.5;
--baris-tabel: 48px;
--sasaran: 44px;
--tebal-garis: 1px;
--pad-sel: 10px 14px;
--lengkung: 8px;
}
/* ── TEMA GELAP ─────────────────────────────────────────────────────────
Hanya DUA tema di v6 (turun dari empat di v5). Dua tema yang matang
lebih baik daripada empat yang setengah — dan tema "kontras" yang dulu
dibuat untuk gudang bercahaya minim sekarang tidak perlu lagi: kerapatan
`lantai` sudah menaikkan ukuran dan ketebalan garisnya.
Gelapnya BUKAN abu kebiruan. Ia hitam kecokelatan, sekeluarga dengan
netral hangat di tema terang, supaya merahnya tidak berubah watak.
Merah dinaikkan kecerahannya di sini: #c4142b di atas hitam hanya 3,4:1,
tidak cukup untuk teks. Yang dipakai #e8536a untuk teks, dan bidang
merah pekat tetap memakai #c4142b dengan teks putih di atasnya. */
@media (prefers-color-scheme: dark) {
:root:not([data-tema="terang"]) {
--kertas: #161211;
--kartu: #1e1917;
--kartu-2: #241e1b;
--terangkat: #292220;
--tinta: #f2ece7;
--tinta-2: #b3a89f;
--tinta-3: #948a81;
--garis: #322a27;
--garis-2: #453b36;
--garis-3: #7d716a;
/* HARUS sama persis dengan blok [data-tema="gelap"] di bawah.
Sebelumnya blok ini ketinggalan: orang yang sistemnya gelap tapi tidak
pernah memilih tema mendapat merah yang BERBEDA dari orang yang
menekan tombol "Gelap", dan hijau merek tidak ada sama sekali. */
--merah: #ff2f44;
--merah-isi: #e30016;
--merah-tekan:#b30011;
--hijau: #009b39;
--hijau-isi: #008932;
--merah-cuci: #2a1518;
--pada-merah: #ffffff;
--ok: #009b39; --ok-bg: #0f2319; --ok-garis: #2d5c43;
--warn: #e0a44e; --warn-bg: #2b1f0d; --warn-garis: #6b4f1e;
--crit: #f0736f; --crit-bg: #2c1615; --crit-garis: #6d3330;
--info: #6fb2df; --info-bg: #0f2130; --info-garis: #2c5674;
}
}
:root[data-tema="gelap"] {
--kertas: #161211;
--kartu: #1e1917;
--kartu-2: #241e1b;
--terangkat: #292220;
--tinta: #f2ece7;
--tinta-2: #b3a89f;
--tinta-3: #948a81;
--garis: #322a27;
--garis-2: #453b36;
--garis-3: #7d716a;
--merah: #ff2f44;
--merah-isi: #e30016;
--merah-tekan:#b30011;
--hijau: #009b39;
--hijau-isi: #008932;
--merah-cuci: #2a1518;
--pada-merah: #ffffff;
--ok: #009b39; --ok-bg: #0f2319; --ok-garis: #2d5c43;
--warn: #e0a44e; --warn-bg: #2b1f0d; --warn-garis: #6b4f1e;
--crit: #f0736f; --crit-bg: #2c1615; --crit-garis: #6d3330;
--info: #6fb2df; --info-bg: #0f2130; --info-garis: #2c5674;
}
/* ═══════════════════════════════════════════════════════════════════════
DASAR
═══════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
/*