Theming

Bagaimana token Company Books dipetakan ke variabel shadcn — dan kenapa pemetaan itu yang membuat fallback bekerja.

Dua lapis token

Sistemnya punya dua kosakata yang berjalan bersamaan.

Lapis GLC — token yang diekstrak dari berkas Figma: --canvas-default, --primary-600, --border-default. Ini sumber kebenaran satu-satunya.
Lapis shadcn — nama semantik yang dikonsumsi komponen shadcn: --color-background, --color-primary, --color-ring.

Berkas theme.css memetakan lapis kedua ke lapis pertama. Bukan menyalin nilainya — mereferensikan-nya.

Jembatannya

Inti seluruh mekanisme, dan alasan tidak ada tooling khusus yang dibutuhkan.

@theme inline {
  /* Never a literal colour — always a reference to the GLC layer. */
  --color-background: var(--canvas-default);
  --color-card:       var(--surface-primary);
  --color-primary:    var(--primary-600);
  --color-border:     var(--border-default);
  --color-ring:       var(--border-focus);
}

Aturan menyunting

Jangan pernah menaruh nilai warna literal di lapis jembatan. Setiap nilai harus berupa var(--glc-token). Menambah variabel shadcn baru? Petakan, jangan mengarang nilainya.

Tema gelap

Kenapa hanya satu lapis yang perlu didefinisikan ulang.

.theme-dark {
  /* Only the GLC layer is redefined. Every shadcn variable above points at
   * these by reference, so they all re-resolve on their own. */
  --canvas-default:  var(--neutral-950);
  --surface-primary: var(--neutral-900);
}

Karena jembatannya berupa referensi var() yang hidup, mendefinisikan ulang lapis GLC saja sudah membuat seluruh variabel shadcn ikut berubah. Tidak ada blok gelap kedua yang perlu dirawat, dan tidak ada kemungkinan keduanya jadi tidak sinkron.

Kelas .theme-dark dan .dark keduanya dideklarasikan, jadi komponen dari hulu yang memancarkan varian dark: ikut berpindah bersama sisanya.

Warna

Dibaca langsung dari token — bukan salinan. Ganti tema untuk melihat lapisan gelap.

background

--canvas-default

card

--surface-primary

primary

--primary-600

secondary

--surface-hover

muted

--surface-secondary

destructive

--error-600

success

--success-600

warning

--warning-600

info

--info-600

border

--border-default

Radius

shadcn menurunkan sm/md/lg/xl dari --radius. Angka turunannya kebetulan persis sama dengan yang ditetapkan berkas Figma, jadi keduanya tidak perlu didamaikan.

sm · 6px

chip

md · 8px

baris nav

lg · 10px

kontrol

xl · 14px

kartu

Menimpa token

Timpa di lapis GLC, jangan di lapis jembatan. Mengubah --primary-600 akan merambat ke setiap komponen — termasuk yang ditarik dari shadcn — karena semuanya menunjuk ke sana.

/* After the theme import, so it wins. */
:root {
  --primary-600: oklch(0.55 0.21 265);
}

Yang tidak boleh dilakukan

Menimpa --color-primary secara langsung. Itu memutus jembatannya: nilainya jadi beku, dan komponen tersebut berhenti ikut berubah saat tema gelap dinyalakan.