Token & variabel

Satu sumber nilai untuk seluruh kit — cara kerjanya, cara menambahnya, dan daftar lengkapnya.

Cara token bekerja

Nilai warna disimpan sebagai tiga angka HSL mentah tanpa pembungkus, supaya bisa disisipkan ke dalam fungsi apa pun:

/* tokens.css */
--ck-primary: 214 65% 32%;

/* komponen — inilah satu-satunya bentuk yang sah */
.ck-sesuatu { color: hsl(var(--ck-primary)); }
.ck-sesuatu { background-color: hsl(var(--ck-primary) / 0.08); }

/* SALAH — nilai mentah, mode gelap tidak ikut berubah */
.ck-sesuatu { color: #1d4f8c; }

Karena bentuknya triplet, transparansi juga lewat token: hsl(var(--ck-primary) / 0.5).

Tiga berkas, satu kebenaran

Berkas	Peran	Disunting tangan?
tokens/tokens.css	Sumber kebenaran. Semua nilai didefinisikan di sini, mode terang dan gelap	Ya
tokens/tokens.json	Bentuk JSON untuk perkakas dan dokumentasi	Ya, harus sinkron
tokens/tailwind.preset.js	Preset untuk proyek yang masih memakai Tailwind	Ya, harus sinkron

tools/check.py membandingkan ketiganya. Menambah token di satu berkas saja akan ditolak.

Mode gelap

Blok .dark hanya menimpa token yang memang perlu berubah. Token yang tidak ditimpa otomatis mewarisi nilai mode terang.

:root { --ck-primary: 214 65% 32%; }
.dark, [data-theme='dark'] { --ck-primary: 214 65% 55%; }

Tema otomatis mengikuti sistem tersedia lewat data-theme="auto" pada <html>.

Cara menambah token

1
Cari yang sudah ada
Tabel di bawah ini lengkap. Token baru hanya kalau benar-benar belum ada perannya.
2
Tambah di tokens.css
Masukkan ke bagian yang sesuai, dengan komentar singkat. Kalau perlu berbeda di mode gelap, tambahkan penimpaan di blok .dark.
3
Sinkronkan dua turunannya
Tambahkan di tokens.json dan tailwind.preset.js.
4
Jalankan penjaga
python3 tools/check.py — token yang belum sinkron akan ditolak.

Jangan mengarang token

Kalau butuh "biru sedikit lebih muda", kemungkinan besar yang dibutuhkan adalah salah satu dari skala --ck-primary-50…900 yang sudah ada. Lihat tabel di bawah sebelum menambah.

Daftar lengkap token

Dihasilkan langsung dari tokens/tokens.css setiap kali tools/build.py dijalankan, jadi tidak mungkin basi.

122 token.

Warna: permukaan & teks

Token	Nilai	Catatan
--ck-background	`40 20% 98%`	kanvas off-white hangat
--ck-foreground	`220 39% 11%`	teks utama
--ck-card	`0 0% 100%`	permukaan kartu
--ck-card-foreground	`222 47% 11%`
--ck-border	`214 32% 91%`
--ck-input	`214 32% 91%`
--ck-ring	`199 89% 48%`

Primary: "deep ink blue" + skala penuh

Token	Nilai	Catatan
--ck-primary-50	`214 65% 96%`
--ck-primary-100	`214 65% 92%`
--ck-primary-200	`214 65% 84%`
--ck-primary-300	`214 65% 70%`
--ck-primary-400	`214 65% 55%`
--ck-primary-500	`214 65% 40%`
--ck-primary-600	`214 65% 32%`
--ck-primary-700	`214 65% 24%`
--ck-primary-800	`214 65% 18%`
--ck-primary-900	`214 65% 12%`
--ck-primary	`var(--ck-primary-600)`
--ck-primary-foreground	`40 20% 98%`
--ck-primary-hover	`var(--ck-primary-700)`
--ck-primary-subtle	`214 65% 96%`	latar lembut, mis. badge info

Netral sekunder

Token	Nilai	Catatan
--ck-secondary	`210 40% 96%`
--ck-secondary-foreground	`222 47% 11%`
--ck-secondary-hover	`210 40% 92%`
--ck-muted	`210 40% 96%`
--ck-muted-foreground	`215 16% 47%`

Aksen: amber "pensil sekolah"

Token	Nilai	Catatan
--ck-accent	`32 95% 44%`
--ck-accent-foreground	`40 20% 98%`
--ck-accent-hover	`32 95% 36%`
--ck-accent-subtle	`32 95% 95%`

Status

Token	Nilai	Catatan
--ck-destructive	`0 84% 60%`
--ck-destructive-foreground	`0 0% 100%`
--ck-destructive-hover	`0 84% 50%`
--ck-destructive-subtle	`0 86% 97%`
--ck-warning	`38 92% 50%`
--ck-warning-foreground	`0 0% 100%`
--ck-warning-hover	`38 92% 42%`
--ck-warning-subtle	`48 100% 96%`
--ck-success	`160 84% 39%`
--ck-success-foreground	`0 0% 100%`
--ck-success-hover	`160 84% 32%`
--ck-success-subtle	`152 81% 96%`
--ck-info	`199 89% 48%`
--ck-info-foreground	`0 0% 100%`
--ck-info-subtle	`204 94% 96%`

Tipografi

Token	Nilai	Catatan
--ck-font-sans	`'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif`
--ck-font-mono	`'JetBrains Mono', Menlo, monospace`
--ck-weight-normal	`400`
--ck-weight-medium	`500`
--ck-weight-semibold	`600`
--ck-weight-bold	`700`

Radius

Token	Nilai	Catatan
--ck-radius-sm	`0.25rem`
--ck-radius-md	`0.5rem`
--ck-radius-lg	`0.75rem`
--ck-radius-xl	`1rem`
--ck-radius-full	`9999px`

Bayangan

Token	Nilai	Catatan
--ck-shadow-sm	`0 1px 2px 0 hsl(220 39% 11% / 0.05)`
--ck-shadow-md	`0 4px 6px -1px hsl(220 39% 11% / 0.08), 0 2px 4px -2px hsl(220 39% 11% / 0.06)`
--ck-shadow-lg	`0 10px 15px -3px hsl(220 39% 11% / 0.10), 0 4px 6px -4px hsl(220 39% 11% / 0.08)`
--ck-shadow-xl	`0 20px 25px -5px hsl(220 39% 11% / 0.12), 0 8px 10px -6px hsl(220 39% 11% / 0.08)`
--ck-overlay	`0 0% 0% / 0.5`

Gerak

Token	Nilai	Catatan
--ck-dur-fast	`120ms`
--ck-dur	`200ms`
--ck-dur-slow	`500ms`
--ck-ease	`cubic-bezier(0.4, 0, 0.2, 1)`

Tata letak

Token	Nilai	Catatan
--ck-container	`1400px`
--ck-sidebar-w	`16rem`	256px
--ck-sidebar-w-collapsed	`4rem`	64px
--ck-topbar-h	`4rem`	64px
--ck-space-1	`0.25rem`
--ck-space-2	`0.5rem`
--ck-space-3	`0.75rem`
--ck-space-4	`1rem`
--ck-space-5	`1.25rem`
--ck-space-6	`1.5rem`
--ck-space-8	`2rem`
--ck-space-12	`3rem`

Lapisan

Token	Nilai	Catatan
--ck-z-base	`1`
--ck-z-sticky	`20`
--ck-z-topbar	`30`
--ck-z-dropdown	`40`
--ck-z-overlay	`50`
--ck-z-toast	`100`

Palet avatar (warna deterministik dari nama, 8 pilihan)

Token	Nilai	Catatan
--ck-avatar-0	`#0ea5e9`
--ck-avatar-1	`#10b981`
--ck-avatar-2	`#8b5cf6`
--ck-avatar-3	`#f59e0b`
--ck-avatar-4	`#f43f5e`
--ck-avatar-5	`#06b6d4`
--ck-avatar-6	`#6366f1`
--ck-avatar-7	`#f97316`

Gradien mata pelajaran (8 mapel baku + cadangan)

Token	Nilai	Catatan
--ck-subject-matematika	`linear-gradient(135deg, #0ea5e9, #0891b2)`
--ck-subject-bindo	`linear-gradient(135deg, #10b981, #0d9488)`
--ck-subject-bing	`linear-gradient(135deg, #f43f5e, #db2777)`
--ck-subject-fisika	`linear-gradient(135deg, #8b5cf6, #9333ea)`
--ck-subject-kimia	`linear-gradient(135deg, #f59e0b, #ea580c)`
--ck-subject-biologi	`linear-gradient(135deg, #22c55e, #10b981)`
--ck-subject-sejarah	`linear-gradient(135deg, #f97316, #dc2626)`
--ck-subject-geografi	`linear-gradient(135deg, #3b82f6, #4f46e5)`
--ck-subject-default	`linear-gradient(135deg, #1e4f86, #06b6d4)`

Medali peringkat 1-3 (leaderboard)

Token	Nilai	Catatan
--ck-medal-1	`linear-gradient(135deg, #fbbf24, #f59e0b)`
--ck-medal-1-text	`#422006`
--ck-medal-2	`linear-gradient(135deg, #cbd5e1, #94a3b8)`
--ck-medal-2-text	`#1e293b`
--ck-medal-3	`linear-gradient(135deg, #fdba74, #f97316)`
--ck-medal-3-text	`#431407`

Cetak (selalu terang, apa pun modenya)

Token	Nilai	Catatan
--ck-print-bg	`#ffffff`
--ck-print-border	`#cbd5e1`

Teks di atas warna pekat (selalu putih, kedua mode)

Token	Nilai	Catatan
--ck-on-solid	`#ffffff`
--ck-surface-tint	`hsl(var(--ck-primary) / 0.08)`
--ck-cyan-tint	`#06b6d4`
--ck-warning-surface	`38 92% 50% / 0.10`
--ck-warning-surface-strong	`38 92% 50% / 0.12`
--ck-warning-text	`32 95% 30%`
--ck-strength-mid	`48 96% 53%`
--ck-stripe	`rgb(255 255 255 / 0.20)`
--ck-blur-sm	`4px`
--ck-blur-md	`8px`
--ck-dur-stripe	`1s`
--ck-code-surface	`220 39% 11%`
--ck-code-foreground	`40 20% 98%`
--ck-info-tint	`199 89% 96%`

Membaca token dari JavaScript

const gaya = getComputedStyle(document.documentElement);
const primary = gaya.getPropertyValue('--ck-primary').trim();   // "214 65% 32%"
elemen.style.color = `hsl(${primary})`;

Pola ini dipakai classroom.js untuk mewarnai avatar secara deterministik dari nama pengguna.