Design Tokens

Section Design Tokens pada arsitektur CSS sudah menunjukkan cara memberi nama pada keputusan desain dan menyimpannya sebagai kontrak tim. Chapter ini melangkah lebih jauh: token yang baik tidak berhenti pada satu lapis nama, melainkan tersusun sebagai sistem bertingkat. Kita akan membangun tiga tier — nilai primitive sebagai bahan mentah, alias semantik sebagai pemberi peran, dan variabel lokal komponen sebagai konsumen — lalu membuktikan bahwa mengubah satu nilai di tier paling bawah merambat sampai komponen tanpa menyentuh satu pun aturan komponen. Pola inilah fondasi seluruh tema pada section ini.

Tiga Tier: Primitive, Alias, Komponen #

Setiap tier punya tugas yang berbeda dan aturan konsumsi yang tegas:

File token yang dipakai demo chapter ini menerapkan ketiganya:

:root {
  /* Tier 1 — primitive: bahan mentah, tidak dipakai langsung komponen */
  --putih: rgb(255, 255, 255);
  --abu-50: rgb(248, 250, 252);
  --abu-200: rgb(226, 232, 240);
  --abu-800: rgb(30, 41, 59);
  --biru-600: rgb(29, 78, 216);

  /* Tier 2 — alias: memberi peran pada primitive */
  --permukaan: var(--abu-50);
  --garis: var(--abu-200);
  --teks: var(--abu-800);
  --aksi-primer: var(--biru-600);
  --aksi-primer-teks: var(--putih);
}

/* Tier 3 — komponen: konsumsi lewat variabel lokalnya sendiri */
.tombol {
  --tombol-latar: var(--aksi-primer);
  --tombol-teks: var(--aksi-primer-teks);

  background-color: var(--tombol-latar);
  color: var(--tombol-teks);
  padding: 8px 16px;
  border: 0;
  border-radius: 8px;
  font-size: 14px;
}

.kartu {
  --kartu-latar: var(--permukaan);
  --kartu-garis: var(--garis);
  --kartu-teks: var(--teks);

  background-color: var(--kartu-latar);
  border: 1px solid var(--kartu-garis);
  border-radius: 12px;
  color: var(--kartu-teks);
  padding: 16px;
}

Mari kita telaah keputusan pentingnya:

1. Tier 1 (:root, blok pertama): nilai primitive diberi nama berdasarkan skala, bukan peran. Nama --biru-600 tidak mengaku apa pun tentang kegunaannya, sehingga satu primitive boleh melayani banyak peran.
2. Tier 2 (blok kedua di :root): alias merangkai primitive menjadi peran — --aksi-primer: var(--biru-600). Inilah satu-satunya tempat keputusan “warna apa yang menjadi aksi primer” dibuat.
3. Tier 3 (.tombol, .kartu): setiap komponen memetakan alias ke variabel lokalnya (--tombol-latar: var(--aksi-primer)), lalu seluruh properti membaca variabel lokal. Pola dua lapis ini kita kenal dari Chapter CSS Custom Properties ; tambahan di sini hanyalah lapis primitive di bawahnya.

Mengapa Tiga Tier, Bukan Satu #

Dengan satu lapis token semantik saja, rebrand dari biru ke hijau tetap mudah — cukup ubah --aksi-primer. Lapisan primitive justru yang membuat tema dan varian menjadi murah. Ketika brand butuh nada biru yang lebih dalam, kita cukup mengganti nilai --biru-600 dan alias pun ikut berubah; ketika sebuah tema gelap perlu dibuat, tier alias-lah yang ditimpa, sementara primitive tetap menjadi kamus warna yang sama. Karena custom properties diwarisi dan dihitung pada elemen pemakai (perilaku yang dibahas pada Chapter Custom Properties ), rangkaian rujukan var() ini diselesaikan browser pada saat gaya dihitung, tanpa biaya apa pun saat runtime.

Aturan konsumsinya tegas dan layak ditulis di dokumentasi tim:

1. Komponen tidak boleh merujuk primitive secara langsung — background-color: var(--biru-600) pada .tombol melewati kontrak.
2. Komponen tidak boleh menulis nilai mentah — angka atau warna literal di aturan komponen membuat nilai itu terlepas dari sistem.
3. Alias didefinisikan sekali di :root; variasi komponen cukup menimpa variabel lokalnya, seperti .tombol--sukses yang menimpa --tombol-latar.

Demo: Membaca Rangkaian Tiga Tier #

Demo chapter ini memuat tombol dan kartu yang seluruh warnanya berasal dari rangkaian tiga tier di atas. Hasil di Browser:

Tombol tampil berlatar rgb(29, 78, 216) — nilai primitive --biru-600
yang dirujuk alias --aksi-primer lalu variabel lokal --tombol-latar,
dengan teks putih rgb(255, 255, 255) dari --tombol-teks.
Kartu tampil berlatar rgb(248, 250, 252) dari --kartu-latar dan
teks rgb(30, 41, 59) dari --kartu-teks.

Nilai computed background-color dan color pada kedua komponen diverifikasi otomatis oleh harness Course melalui penanda data-expected. Ganti nilai --biru-600 di tier primitive menjadi warna lain, dan tombol ikut berubah tanpa satu pun aturan .tombol yang disentuh — bukti bahwa konsumsi mengalir searah dari tier atas ke bawah. Tier alias juga menjadi titik sambung tema: pada Chapter Theme Switching Overview kita menimpa alias inilah untuk menukar seluruh tampilan halaman.

:root {
  /* Tier 1 — primitive: bahan mentah, tidak dipakai langsung komponen */
  --putih: rgb(255, 255, 255);
  --abu-50: rgb(248, 250, 252);
  --abu-200: rgb(226, 232, 240);
  --abu-800: rgb(30, 41, 59);
  --biru-600: rgb(29, 78, 216);

  /* Tier 2 — alias: memberi peran pada primitive */
  --permukaan: var(--abu-50);
  --garis: var(--abu-200);
  --teks: var(--abu-800);
  --aksi-primer: var(--biru-600);
  --aksi-primer-teks: var(--putih);
}

/* Tier 3 — komponen: konsumsi lewat variabel lokalnya sendiri */
.tombol {
  --tombol-latar: var(--aksi-primer);
  --tombol-teks: var(--aksi-primer-teks);

  background-color: var(--tombol-latar);
  color: var(--tombol-teks);
  padding: 8px 16px;
  border: 0;
  border-radius: 8px;
  font-size: 14px;
}

.kartu {
  --kartu-latar: var(--permukaan);
  --kartu-garis: var(--garis);
  --kartu-teks: var(--teks);

  background-color: var(--kartu-latar);
  border: 1px solid var(--kartu-garis);
  border-radius: 12px;
  color: var(--kartu-teks);
  padding: 16px;
}