Ogni scelta visiva è una custom property CSS generata dai design token W3C. I componenti usano solo token semantici come --nui-color-accent-solid, quindi cambiare un token cambia lo stile di ogni componente che lo usa.
Chiaro e scuro
Di default la modalità segue la preferenza del sistema operativo. Puoi fissarla su qualsiasi elemento con data-nui-theme e annidare i temi liberamente.
<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"Sovrascrivi i token
I token vivono in @layer nui, quindi il CSS della tua app li sovrascrive. Impostali su :root per tutta l’app o su un elemento per una sola parte.
/* 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);
}Una palette per il tuo brand
Le scale di colore sono generate. Cambia una tonalità in packages/tokens/scripts/palette.ts e rigenera: lo script riadatta ogni colore allo spazio sRGB e ricontrolla il contrasto di ogni coppia di testo e sfondo.
# After changing a hue in packages/tokens/scripts/palette.ts
pnpm --filter @needless-ui/tokens palette
pnpm build:tokens