Header Kaca Putih Saya Pakai Token Alfa, Bukan Opacity
Header navy gelap terasa berat di light mode. Solusinya: taruh 92% alpha di dalam token --color-header, biar backdrop-blur bekerja tanpa override per komponen.
Ringkasan
Awalnya gue coba fix header light mode lewat bg-white/60 per komponen, malah ribet karena semua elemen harus di-override. Solusinya ternyata lewat token: bikin --color-header dengan nilai alpha di tokens.css, ditambah backdrop-blur-md buat efek kaca buram. Sekali ubah token, light sama dark mode langsung konsisten semua, cuma konsekuencinya navbar nggak ikut berubah kalau --background diganti total.
Saya buka browser, refresh halaman, dan langsung merasa ada yang berat. Header navigasi yang warnanya navy gelap tiba-tiba muncul di light mode. Rasanya seperti menabrak tembok visual di bagian paling atas layar. Logo wordmark putih yang biasanya keren di dark mode, malah jadi nggak kelihatan jelas atau memaksa background jadi gelap terus.
Reaksi pertama saya? Langsung buka site-header.tsx dan coba ubah background-nya pakai utility Tailwind bg-white/60. Pikir saya, cukup kasih opacity di komponen itu saja, masalah beres. Tapi ternyata ini malah bikin ribet. Tiap elemen di dalam header yang butuh background atau border jadi harus di-override lagi supaya nggak ikut transparan. Tombol yang seharusnya solid malah jadi tembus pandang.
Kenapa Token Alfa Lebih Bersih
Solusi yang benar ternyata ada di level yang lebih fundamental: token. Saya ubah pendekatan dari per-komponen menjadi per-tema. Di file tokens.css, saya definisikan variabel --color-header dengan nilai #F8FAFCEB. Dua karakter terakhir, EB, adalah nilai hex untuk opacity sekitar 92 persen, sementara F8FAFC adalah warna dasar putih keabu-abuan yang lembut. Saya juga tambahkan class backdrop-blur-md pada elemen header.
Kenapa cara ini jauh lebih bersih? Pertama, properti CSS backdrop-filter hanya bisa bekerja kalau elemen atau background-nya memang transparan atau semi-transparan [1]. Kalau pakai warna solid, efek kaca itu nggak akan muncul sama sekali karena nggak ada yang bisa diburamkan di belakangnya. Dengan menaruh nilai alfa langsung di dalam token, setiap elemen yang mengonsumsi variabel ini otomatis mendapat tampilan yang konsisten tanpa perlu ngecek ulang.
Kedua, custom properties atau variabel CSS tunduk pada cascade dan mewarisi nilainya dari parent [2]. Ini artinya bisa punya --color-header yang berbeda untuk light mode dan dark mode dalam satu file yang sama. Di dark mode, saya tetap pakai navy solid yang opaque supaya logo wordmark putih tetap terbaca sempurna. Sementara di light mode, dia berubah jadi kaca putih yang ringan.
Ketiga, class backdrop-blur-md dari Tailwind memetakan ke nilai blur sekitar 12 piksel [3]. Angka ini cukup untuk memberi efek kaca buram yang elegan tanpa bikin browser berat merender efek grafisnya.
Yang Tidak Saya Sentuh Sama Pentingnya
Tinggi navbar, border, dan shadow tetap. Saya tidak mengganti satu properti lewat shorthand yang mereset properti lain — kesalahan yang pernah saya lakukan di proyek lain dan bikin background-clip: text hilang gara-gara background shorthand mereset nilainya.
Yang juga tidak saya sentuh: overlay di hero section. Saya cukup ganti token bg-background/60 menjadi bg-header/85 supaya overlay hero mengikuti tema yang sama. Light mode jadi putih kaca, dark mode tetap navy. Satu perubahan di token, semua permukaan ikut berubah — tanpa perlu menyentuh komponen satu per satu.
Trade-off yang Saya Terima Sadar
Keputusan ini mahal satu hal: navbar light mode tidak lagi ikut tema bila kelak --background diubah total. Saya menerima itu karena dua alasan. Pertama, chrome memang lazimnya stabil, justru kontras dengan konten yang berganti-ganti. Kedua, bila suatu saat theming navbar jadi kebutuhan nyata, jalurnya sudah jelas: bikin token khusus seperti --color-navbar lalu ganti bg-header menjadi bg-navbar, perubahan satu baris.
Token untuk nilai yang berbagi makna, literal untuk rasa yang khas satu komponen, dan tahu kapan berhenti mengabstraksi itu bagian dari pekerjaan.