Token system

Semua komponen di Lapaktoto UI ngacu ke 3 lapis token:

Color tokens — --background, --foreground, --primary, dll.
Shape tokens — --radius dan turunannya (--radius-sm, --radius-md, --radius-lg).
Typography tokens — --font-sans, --font-mono, --font-heading.

CSS variables

Berikut daftar lengkap variable di globals.css. Semua warna pakai format oklch() supaya gradient color manipulation lebih konsisten:

app/globals.css

:root {
  /* Surface */
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);

  /* Brand */
  --primary: oklch(0.62 0.19 28);
  --primary-foreground: oklch(0.985 0 0);

  /* Semantic */
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.45 0 0);
  --border: oklch(0.92 0 0);
  --destructive: oklch(0.577 0.245 27);

  /* Shape */
  --radius: 0.625rem;
}

Setiap pasangan --x dan --x-foreground dirancang punya contrast ratio >=4.5:1, jadi aman untuk text.

Preset built-in

Cara tercepat ganti tema: pakai preset. Tiap preset ngubah base hue + primary color + radius default.

Default Neutral

Base: neutral

bunx lapaktoto-ui theme set default

Midnight

Base: zinc

bunx lapaktoto-ui theme set midnight

Forest

Base: stone

bunx lapaktoto-ui theme set forest

Ocean

Base: slate

bunx lapaktoto-ui theme set ocean

Sunset

Base: neutral

bunx lapaktoto-ui theme set sunset

Mono

Base: neutral

bunx lapaktoto-ui theme set mono

Custom palette

Mau pakai palet brand sendiri? Override variable di :root dan .dark langsung.

app/globals.css

:root {
  /* Override primary jadi Telkom blue */
  --primary: oklch(0.55 0.18 245);
  --primary-foreground: oklch(0.98 0 0);

  /* Tweak radius lebih sharp */
  --radius: 0.375rem;
}

.dark {
  /* Lighter variant untuk dark mode */
  --primary: oklch(0.65 0.18 245);
}

Tips: konversi hex ke oklch via oklch.com — pertahankan L (lightness) konsisten antar token supaya hierarki tetap terbaca.

Dark mode

Aktifkan via next-themes:

// app/layout.tsx
import { ThemeProvider } from "next-themes"

export default function Layout({ children }) {
  return (
    <html lang="id" suppressHydrationWarning>
      <body>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}

Lalu toggle dengan hook useTheme() di komponen mana pun. Tidak perlu provider tambahan untuk komponen Lapaktoto.

Radius scale

Token	Default	Used by
--radius-sm	0.375rem	Badge, kbd
--radius-md	0.5rem	Button (sm), Input
--radius-lg	0.625rem	Button, Card, Dialog
--radius-xl	0.875rem	Sheet, Toast container

Naikkan/turunkan --radius root saja — yang lain proporsional otomatis karena pakai calc().