Needless UI

Pandhuan

Tema

Saben keputusan visual yaiku CSS custom property sing digawe saka design token W3C. Komponen mung nganggo token semantik kayata --nui-color-accent-solid, dadi ngganti siji token bakal ngowahi gaya saben komponen sing nganggo token kasebut.

Padhang lan peteng

Gawane, preferensi sistem operasi sing nemtokake mode. Tetepna mode ing elemen apa wae nganggo data-nui-theme, lan susun tema kanthi 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"

Nimpa token

Token manggon ing @layer nui, dadi CSS biasa ing aplikasi panjenengan bisa nimpa. Setel ing :root kanggo kabeh aplikasi, utawa ing elemen apa wae kanggo sabagean wae.

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 merek

Skala werna digawe kanthi otomatis. Ganti hue ing packages/tokens/scripts/palette.ts lan gawe maneh: script nyetel saben werna supaya pas ing sRGB lan ngecek maneh kontras saben pasangan teks lan latar.

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