Needless UI

Panduan

Tema

Setiap keputusan visual adalah variabel CSS yang dihasilkan dari design token W3C. Komponen hanya memakai token semantik seperti --nui-color-accent-solid, sehingga mengubah satu token akan mengubah gaya setiap komponen yang memakainya.

Terang dan gelap

Secara default, mode mengikuti preferensi sistem operasi. Tetapkan mode pada elemen mana pun dengan data-nui-theme; mode ini bisa disarangkan dengan bebas.

theme-attribute.html
<html data-nui-theme="dark">
  <!-- Everything here is dark… -->
  <aside data-nui-theme="light">…except this panel.</aside>
</html>
data-nui-theme="light"
data-nui-theme="dark"

Timpa token

Token berada di @layer nui, sehingga CSS biasa di aplikasi Anda bisa menimpanya. Tetapkan di :root untuk seluruh aplikasi, atau di elemen mana pun untuk sebagian saja.

override.css
/* The whole app */
:root {
  --nui-color-accent-solid: oklch(0.52 0.16 150);
  --nui-radius-md: 0.75rem;
}

/* One part of it */
.checkout {
  --nui-color-accent-solid: var(--nui-color-success-solid);
}

Palet brand

Skala warnanya dihasilkan otomatis. Ubah hue di packages/tokens/scripts/palette.ts, lalu hasilkan ulang: skrip akan menyesuaikan setiap warna ke sRGB dan memeriksa ulang kontras setiap pasangan teks dan latar belakang.

palette.sh
# After changing a hue in packages/tokens/scripts/palette.ts
pnpm --filter @needless-ui/tokens palette
pnpm build:tokens