Token & tema

Semua nilai desain ada di satu berkas: tokens/tokens.css. Komponen tidak boleh menulis warna mentah — selalu pakai variabel.

Warna dasar

Permukaan, teks, dan garis. Setiap token punya padanan gelap.

--ck-background

--ck-foreground

--ck-card

--ck-border

Lihat kode

<div class="ck-grid ck-grid-4">
  <div class="ck-card"><div class="ck-card__body ck-p-4">
    <div style="height:3rem;border-radius:var(--ck-radius-md);background:hsl(var(--ck-background));border:1px solid hsl(var(--ck-border))"></div>
    <div class="ck-text-xs ck-mt-2 ck-mono">--ck-background</div></div></div>
  <div class="ck-card"><div class="ck-card__body ck-p-4">
    <div style="height:3rem;border-radius:var(--ck-radius-md);background:hsl(var(--ck-foreground))"></div>
    <div class="ck-text-xs ck-mt-2 ck-mono">--ck-foreground</div></div></div>
  <div class="ck-card"><div class="ck-card__body ck-p-4">
    <div style="height:3rem;border-radius:var(--ck-radius-md);background:hsl(var(--ck-card));border:1px solid hsl(var(--ck-border))"></div>
    <div class="ck-text-xs ck-mt-2 ck-mono">--ck-card</div></div></div>
  <div class="ck-card"><div class="ck-card__body ck-p-4">
    <div style="height:3rem;border-radius:var(--ck-radius-md);background:hsl(var(--ck-border))"></div>
    <div class="ck-text-xs ck-mt-2 ck-mono">--ck-border</div></div></div>
</div>

Primary (deep ink blue) — skala 50→900

Dipakai untuk aksi utama, tautan, dan status aktif. Di mode gelap, --ck-primary otomatis berpindah ke langkah 400 supaya kontras tetap aman.

100

200

300

400

500

600

700

800

900

Lihat kode

<div class="ck-grid ck-grid-4">
  <div><div style="height:2.5rem;border-radius:var(--ck-radius-sm);background:hsl(var(--ck-primary-50))"></div><div class="ck-text-xs ck-mt-2 ck-mono">50</div></div>
  <div><div style="height:2.5rem;border-radius:var(--ck-radius-sm);background:hsl(var(--ck-primary-100))"></div><div class="ck-text-xs ck-mt-2 ck-mono">100</div></div>
  <div><div style="height:2.5rem;border-radius:var(--ck-radius-sm);background:hsl(var(--ck-primary-200))"></div><div class="ck-text-xs ck-mt-2 ck-mono">200</div></div>
  <div><div style="height:2.5rem;border-radius:var(--ck-radius-sm);background:hsl(var(--ck-primary-300))"></div><div class="ck-text-xs ck-mt-2 ck-mono">300</div></div>
  <div><div style="height:2.5rem;border-radius:var(--ck-radius-sm);background:hsl(var(--ck-primary-400))"></div><div class="ck-text-xs ck-mt-2 ck-mono">400</div></div>
  <div><div style="height:2.5rem;border-radius:var(--ck-radius-sm);background:hsl(var(--ck-primary-500))"></div><div class="ck-text-xs ck-mt-2 ck-mono">500</div></div>
  <div><div style="height:2.5rem;border-radius:var(--ck-radius-sm);background:hsl(var(--ck-primary-600))"></div><div class="ck-text-xs ck-mt-2 ck-mono">600</div></div>
  <div><div style="height:2.5rem;border-radius:var(--ck-radius-sm);background:hsl(var(--ck-primary-700))"></div><div class="ck-text-xs ck-mt-2 ck-mono">700</div></div>
  <div><div style="height:2.5rem;border-radius:var(--ck-radius-sm);background:hsl(var(--ck-primary-800))"></div><div class="ck-text-xs ck-mt-2 ck-mono">800</div></div>
  <div><div style="height:2.5rem;border-radius:var(--ck-radius-sm);background:hsl(var(--ck-primary-900))"></div><div class="ck-text-xs ck-mt-2 ck-mono">900</div></div>
</div>

Warna status

Sukses, peringatan, bahaya, info — masing-masing punya versi pekat (ikon/teks) dan versi lembut (latar).

success warning destructive info muted secondary primary outline

Lihat kode

<div class="ck-row ck-row-3 ck-wrap">
  <span class="ck-badge ck-badge--success">success</span>
  <span class="ck-badge ck-badge--warning">warning</span>
  <span class="ck-badge ck-badge--destructive">destructive</span>
  <span class="ck-badge ck-badge--info">info</span>
  <span class="ck-badge ck-badge--muted">muted</span>
  <span class="ck-badge ck-badge--secondary">secondary</span>
  <span class="ck-badge ck-badge--default">primary</span>
  <span class="ck-badge ck-badge--outline">outline</span>
</div>

Radius, bayangan, dan gerak

Tiga skala radius (.25/.5/.75rem), empat tingkat bayangan, dan tiga durasi gerak (120/200/500 ms).

shadow-sm

shadow-md

shadow-lg

shadow-xl

Lihat kode

<div class="ck-row ck-row-4 ck-wrap">
  <div style="width:6rem;height:3rem;background:hsl(var(--ck-muted));border-radius:var(--ck-radius-sm)"></div>
  <div style="width:6rem;height:3rem;background:hsl(var(--ck-muted));border-radius:var(--ck-radius-md)"></div>
  <div style="width:6rem;height:3rem;background:hsl(var(--ck-muted));border-radius:var(--ck-radius-lg)"></div>
  <div style="width:6rem;height:3rem;background:hsl(var(--ck-muted));border-radius:var(--ck-radius-full)"></div>
</div>
<div class="ck-row ck-row-4 ck-wrap ck-mt-4">
  <div class="ck-card ck-p-4" style="box-shadow:var(--ck-shadow-sm)">shadow-sm</div>
  <div class="ck-card ck-p-4" style="box-shadow:var(--ck-shadow-md)">shadow-md</div>
  <div class="ck-card ck-p-4" style="box-shadow:var(--ck-shadow-lg)">shadow-lg</div>
  <div class="ck-card ck-p-4" style="box-shadow:var(--ck-shadow-xl)">shadow-xl</div>
</div>

Cara mengaktifkan mode gelap

Tambahkan kelas dark pada elemen <html>. Untuk mengikuti setelan sistem, pakai data-theme="auto".

Lihat kode

<button class="ck-btn ck-btn--default" type="button" data-ck-theme-toggle>Ganti tema</button>
<button class="ck-btn ck-btn--outline" type="button" onclick="document.documentElement.classList.add('dark')">Paksa gelap</button>
<button class="ck-btn ck-btn--outline" type="button" onclick="document.documentElement.classList.remove('dark')">Paksa terang</button>