Pas Saya Bosen Sama Chip Tag Abu-abu di Sidebar Sendiri

Buka dev server blog sendiri, mata saya langsung berhenti di deretan chip tag di sidebar. #nextjs #tailwind #rust semua pakai bg-muted abu flat, teks text-muted-foreground, hover dikit menggelap ke bg-muted/70. Count di dalamnya pakai span terpisah text-muted-foreground/60. Rasanya kayak lihat ubin kamar mandi: rapi, tapi semua tag semelek bobot, nggak ada yang ngajak diklik. Chip aktif doang yang oranye, sisanya netral pasif.

Di commit cf61fd4 repo my-apps (Next.js + Tailwind), file BlogSidebar.tsx, saya mutusin poles itu chip. Bukan ganti warna brand, cuma kasih identitas dikit biar tag terasa bisa diklik.

Tint lembut dan hairline ring

Saya ganti jadi bg-primary/10 buat tint lembut warna primary, teks text-primary/80, plus hairline 1px ring-primary/15 pakai ring-inset. Hover bikin tint mengental ke bg-primary/15 dan teks naik ke text-primary penuh. Chip aktif tetap pakai ACCENT_BG + ACCENT.

// Before: flat gray, every tag the same weight
<Link className={cn(
  "rounded-[6px] px-2.5 py-0.5 text-[11px]",
  "bg-muted text-muted-foreground hover:bg-muted/70 hover:text-foreground",
)}>
  #{tag}
  <span className="ml-1 text-muted-foreground/60">{count}</span>
</Link>

// After: soft primary tint + hairline inset ring, hover deepens
<Link className={cn(
  "rounded-[6px] bg-primary/10 px-2.5 py-0.5 text-[11px] text-primary/80 ring-1 ring-primary/15 ring-inset transition-colors hover:bg-primary/15 hover:text-primary",
  activeTag === tag && `${ACCENT_BG} font-medium ${ACCENT}`,
)}>
  #{tag}
  <span className="ml-1 opacity-60">{count}</span>
</Link>

Kenapa tint 10 persen itu kerja? Dia kasih chip identitas tanpa berisik. Menurut dokumentasi background-color Tailwind, opacity modifier kayak bg-primary/10 ngontrol opasitas warna background. Jadi warna primary kelewat tipis, nyatu sama permukaan, tapi masih kebaca sebagai warna, bukan cuma abu.

Hairline ring pakai ring-1 ring-inset. Di dokumentasi ring-width Tailwind v3, ring-1 itu box-shadow 1px, ring-inset memaksa ring digambar di dalam elemen. Bagus buat elemen di tepi layar, dan nggak ubah layout. Saya pilih inset ketimbang nambah border biasa biar ukuran chip nggak geser.

Yang penting dipahamin: tint ini bukan soal hierarki. Tag-tag itu emang sederajat, nggak ada yang lebih penting dari yang lain. Abu flat itu bikin semua tag keliatan mati sama rata; tint kasih affordance yang sama buat semua tag tanpa bikin ranking. Hairline ring 15 persen juga sengaja tipis, cukup kebaca sebagai tepi di background terang tanpa berteriak. Ditambah transition-colors, hover-nya halus, bukan lompat.

Detail kecil yang bikin rapi: angka count. Tadinya pakai class warna terpisah text-muted-foreground/60. Sekarang saya buang, ganti opacity-60 aja. Dia warisi warna teks chip, jadi pas hover tint mengental dan teks jadi text-primary, count ikut menguat. Konsisten tanpa duplikasi class warna.

Hover juga saya desain cuma mengental tint, bukan ganti warna drastis. Chip tetap di famili warna yang sama, cuma makin jelas.

Catatan Tailwind v4: ring-inset masih sah

Project saya udah pakai tailwindcss versi 4. Di dokumentasi box-shadow Tailwind v4, v4 punya keluarga utility baru inset-ring (inset-ring-1 dan seterusnya) yang memang didesain buat ring di dalam. Tapi upgrade guide v4 di tabel renamed utilities v3 ke v4 nggak mencantumkan ring-inset. Saya cek langsung di package tailwindcss yang terinstal, ring-inset masih terdaftar dan berfungsi.

Jadi dua-duanya sah. Saya pribadi tetap pakai ring-inset di komponen ini karena udah nulis duluan, males migrasi ke inset-ring-1 buat ganti kosmetik. Yang penting kalo mau konsisten, pilih satu, jangan campur di file yang sama.

Chip kecil pun butuh keputusan desain. Abu flat itu default, bukan pilihan. Saya pilih tint ketimbang abu flat karena chip yang mau diklik minimal harus keliatan hidup. Ke depannya kalo ada elemen kecil lain yang masih abu flat, saya bakal nanya dulu: ini sengaja netral, atau cuma belum dikasih pendapat?