Ang bawat visual na desisyon ay isang CSS custom property na nabuo mula sa mga W3C design token. Semantic token lang ang ginagamit ng mga component, gaya ng --nui-color-accent-solid, kaya kapag pinalitan mo ang isang token, nagbabago ang itsura ng bawat component na gumagamit nito.
Light at dark
Bilang default, ang preference ng operating system ang pumipili ng mode. Mag-pin ng mode sa kahit anong element gamit ang data-nui-theme, at malaya mong i-nest ang mga ito.
<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"I-override ang mga token
Nasa @layer nui ang mga token, kaya nao-override sila ng plain CSS sa app mo. I-set ang mga ito sa :root para sa buong app, o sa kahit anong element para sa isang bahagi lang nito.
/* 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);
}Palette para sa brand mo
Generated ang mga color scale. Palitan ang isang hue sa packages/tokens/scripts/palette.ts at i-regenerate: ire-refit ng script ang bawat kulay sa sRGB at muling susuriin ang contrast ng bawat pares ng text at background.
# After changing a hue in packages/tokens/scripts/palette.ts
pnpm --filter @needless-ui/tokens palette
pnpm build:tokens