Marketer Indonesia: Pasang CSS Relative Color di Next.js untuk Tema Konsisten

TL;DR: CSS Relative Color Syntax memungkinkan marketer dan developer Next.js menurunkan warna dari token brand utama tanpa menulis ulang nilai HEX. Hasilnya, hover, border, dan dark mode lebih konsisten, jumlah token desain berkurang, dan handover desainer-developer lebih cepat. Artikel ini memandu pasang sintaks tersebut di proyek Next.js modern per Mei 2026.

Saat membangun Atmo LMS dan Vetmo, saya berkali-kali menulis ulang variabel warna untuk hover dan disabled hanya karena desainer mengubah satu nilai brand. Per Mei 2026, CSS Relative Color Syntax sudah cukup matang dukungan browsernya untuk dipakai tanpa polyfill mahal.

Artikel ini bukan promosi fitur, tapi panduan teknis singkat plus pertimbangan trade-off ketika memasangnya di proyek Next.js.

Konteks: Kenapa Token Warna Sering Drift

Drift warna terjadi ketika tim menyimpan banyak token turunan seperti --brand-100 sampai --brand-900. Ketika --brand-500 diubah, turunannya tidak ikut ter-update otomatis. Dengan Relative Color Syntax, turunan dihitung saat render, bukan disimpan. Cukup satu token sumber.

Setup Dasar di Next.js

Anggap proyek pakai App Router dengan globals.css. Tambahkan token brand di :root, lalu definisikan turunan pakai sintaks oklch from.

:root {
  --brand: oklch(0.62 0.18 250);
}

.btn-primary {
  background: var(--brand);
  border: 1px solid oklch(from var(--brand) calc(l - 0.1) c h);
}

.btn-primary:hover {
  background: oklch(from var(--brand) calc(l + 0.06) c h);
}

.btn-primary:disabled {
  background: oklch(from var(--brand) l calc(c * 0.3) h);
}

Token --brand cukup satu nilai. Hover, border, dan disabled diturunkan otomatis.

Skenario Real & Trade-off

Trade-off utamanya: fallback untuk browser lama. Berdasarkan dokumentasi MDN Web Docs, Chrome 119+, Safari 16.4+, dan Firefox 128+ sudah mendukung. Untuk audiens yang masih banyak memakai browser lebih lama, sediakan token eksplisit dahulu lalu override di dalam @supports.

Studi Kasus Singkat: Atmo LMS

Sebelum migrasi, file globals.css di Atmo LMS menyimpan 28 token warna turunan. Setelah refaktor ke Relative Color Syntax, jumlahnya turun ke 9 token utama. Build CSS turun di range 8 sampai 12 persen. Lebih penting, perubahan warna brand dari tim desain tinggal mengubah satu baris. Eksperimen tema musiman jadi lebih cepat di-test.

Pertanyaan Umum

Apakah harus refaktor semua warna sekaligus?

Tidak. Mulai dari komponen yang paling sering berubah, misal tombol dan tag. Kunci yang stabil seperti border netral bisa dibiarkan.

Bagaimana kalau pakai Tailwind v4?

Tailwind v4 sudah mendukung arbitrary value berbasis CSS function. Kamu bisa pakai sintaks ini langsung di class arbitrary atau di custom CSS layer.

Apakah performanya berbeda?

Tidak signifikan untuk komponen biasa. Kalkulasi warna dijalankan di style resolution stage, jauh lebih cepat dari layout dan paint.

Penutup

Relative Color Syntax bukan revolusi visual, tapi penyederhanaan operasional. Untuk marketer yang juga mengurusi sisi tema brand, sintaks ini memangkas waktu iterasi dan menjaga konsistensi tanpa rapat panjang soal nilai HEX. Pasang bertahap, mulai dari komponen yang paling dinamis.