Jede visuelle Entscheidung ist eine CSS Custom Property, generiert aus W3C-Design-Tokens. Komponenten verwenden nur semantische Tokens wie --nui-color-accent-solid: Änderst du ein Token, ändert sich das Aussehen jeder Komponente, die es verwendet.
Hell und dunkel
Standardmäßig bestimmt die Einstellung des Betriebssystems den Modus. Mit data-nui-theme legst du auf jedem Element einen Modus fest, beliebig verschachtelt.
<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"Tokens überschreiben
Die Tokens liegen in @layer nui, daher kann normales CSS deiner App sie überschreiben. Definiere sie auf :root für die ganze App oder auf einem beliebigen Element für einen Teil davon.
/* 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);
}Eine Palette für deine Marke
Die Farbskalen werden generiert. Ändere einen Farbton in packages/tokens/scripts/palette.ts und generiere neu: Das Skript passt jede Farbe an den sRGB-Farbraum an und prüft den Kontrast jedes Text-Hintergrund-Paars erneut.
# After changing a hue in packages/tokens/scripts/palette.ts
pnpm --filter @needless-ui/tokens palette
pnpm build:tokens