Empat Commit Mengejar Satu Garis yang Menghilang

Preview saya refresh, dan yang muncul cuma hamparan abu-abu polos. Empat kartu nilai perusahaan seharusnya duduk di situ, masing-masing dengan garis tipis mengelilingi isinya. Yang terlihat cuma teks dan ikon, melayang tanpa batas. File yang lagi saya perbaiki waktu itu cuma satu, values-teaser.tsx di project company profile.

Yang bikin kesal, class-nya nggak hilang. Di devtools, border masih nempel di elemen. Token warnanya juga kebaca normal. Tapi mata saya nggak bisa nemuin garis itu di atas permukaan abu-abu, kayak dia emang lahir buat nyaru di sana.

Asumsi yang Meleset

Dugaan pertama: typo, atau class ketimpa utility lain. Saya buka panel computed style dan semuanya kelihatan sehat. Class border ada, nilai warnanya masuk. Berarti ini bukan soal kode yang rusak, tapi soal warna yang nggak punya lawan. Sudah kuduga pula class-nya nggak pernah hilang, cuma kalah gaib sama tetangganya yang jadi latar.

Saya sempat buang waktu di tempat yang salah: cari-cari utility yang mungkin menimpa border, ngulik urutan class, sempat curiga ke versi Tailwind-nya juga. Padahal kalau dua warnanya diaduk pelan, keduanya emang kembar.

Dua Warna yang Kembar

Token --color-border di project ini warnanya nyaris kembar dengan latar --color-muted tempat kartu itu duduk. Dua abu-abu muda dengan lightness berdekatan. Kartu dirancang dengan asumsi mendarat di atas latar putih, dan asumsi itu pecah begitu komponennya pindah ke permukaan muted. Pasangan warnanya saya taruh di bawah, silakan cek sendiri bedanya tipis banget.

--color-border: #E2E8F0; /* garis lama, kembar dengan latar */
--color-muted: #E8ECF1;  /* latar section */

/* kartu: sebelum */
border-border
/* kartu: sesudah, commit 4c00fb4 */
border-primary/15 bg-card/40

Perbaikan satu baris itu memakai fitur resmi Tailwind: opacity modifier berlaku untuk warna border [1], pola yang sama dengan background [2]. Lima belas persen warna primary bikin garis hadir tanpa jadi pagar tebal. Tint latar empat puluh persen bikin permukaan kartu beda nahannya dari section, jadi batasnya kebaca dua kali, lewat garis dan lewat perbedaan latar.

Dan ini bukan cuma soal selera. WCAG 2.2 punya kriteria 1.4.11 Non-text Contrast: informasi visual komponen UI butuh kontras minimal 3:1 terhadap warna di sebelahnya [3]. Ada kelonggaran kalo komponen udah punya isi yang mengenalkan dirinya, tapi memberi batas yang kelihatan tetap jadi pilihan yang lebih jujur buat pengguna dengan penglihatan terbatas.

Sisanya Ikut Beres

Kartu ini kebagian perombakan kecil di empat commit yang sama malamnya. Soal ikon dulu: dulu satu ikon buat semua kartu. Sekarang datanya yang bawa nama ikon, komponen tinggal nerjemahin lewat Record bernama ICONS berisi shield-check, zap, target, dan smile. Semua digambar dengan strokeWidth 1.5 biar ketebalannya senipis ikon di bagian lain halaman.

Dua commit terakhir cuma soal arah hadap. text-center dan mx-auto dibuang, isi kartu rata kiri semua. Perubahan sekecil ini dulu sering saya anggap remeh, tapi di grid empat kolom, kartu rata kiri bikin mata nabrak garis imajiner yang nyambung antar kartu. Halaman langsung kerasa lebih tenang.

Pola ini bukan kejadian pertama di project ini, dan mungkin bukan yang terakhir. Kartu layanan, kartu kantor, strip sertifikasi, semuanya pernah dirombak malam yang sama dengan arah yang mirip. Komponen yang tadinya didesain di atas kertas putih pindah ke permukaan abu-abu, dan semua asumsi halus ikut kebawa. Yang beda sekarang cuma satu: saya udah tau harus nengok ke mana lebih dulu.

Pelajaran yang saya bawa cuma satu, dan agak nyebelin karena udah seharusnya saya tau. Token warna itu bukan sekadar warna, dia asumsi. Token border yang tegas di atas putih bisa jadi ilusi di atas muted. Mulai sekarang, komponen yang bakal tayang di lebih dari satu surface saya taruh di semua surface itu dulu, baru bilang selesai.

Sumber

[1] Tailwind CSS — border-color

[2] Tailwind CSS — background-color

[3] W3C WAI — Understanding SC 1.4.11 Non-text Contrast