Chaque choix visuel est une propriété personnalisée CSS générée à partir des design tokens du W3C. Les composants n’utilisent que des tokens sémantiques comme --nui-color-accent-solid : modifier un token change le style de tous les composants qui l’utilisent.
Clair et sombre
Par défaut, la préférence du système d’exploitation détermine le mode. Fixez un mode sur n’importe quel élément avec data-nui-theme, et imbriquez les thèmes à volonté.
<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"Surcharger les tokens
Les tokens se trouvent dans @layer nui : le CSS ordinaire de votre application les surcharge. Définissez-les sur :root pour toute l’application, ou sur n’importe quel élément pour une partie seulement.
/* 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);
}Une palette à vos couleurs
Les échelles de couleurs sont générées. Modifiez une teinte dans packages/tokens/scripts/palette.ts et relancez la génération : le script réajuste chaque couleur dans l’espace sRGB et revérifie le contraste de chaque paire texte-fond.
# After changing a hue in packages/tokens/scripts/palette.ts
pnpm --filter @needless-ui/tokens palette
pnpm build:tokens