Kowane zaɓin kamanni CSS custom property ne da aka samar daga design tokens na W3C. Components suna amfani da semantic tokens kawai, kamar --nui-color-accent-solid, don haka canza token ɗaya yana sauya salon kowane component da ke amfani da shi.
Haske da duhu
A asali, zaɓin tsarin aiki na na’urar ne ke zaɓar yanayin. Ku kafa yanayi a kan kowane element da data-nui-theme, kuma ku sa jigo a cikin jigo yadda kuke so.
<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"Sauya tokens
Tokens suna cikin @layer nui, don haka CSS na yau da kullum a manhajarku yana rinjayar su. Ku saita su a kan :root don dukan manhajar, ko a kan kowane element don wani sashe nata kawai.
/* 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 na tambarinku
Ana samar da ma’aunan launuka ne ta atomatik. Ku canza hue a cikin packages/tokens/scripts/palette.ts sannan ku sake samarwa: script ɗin yana daidaita kowane launi zuwa sRGB kuma yana sake duba bambancin launi na kowane haɗin rubutu da bango.
# After changing a hue in packages/tokens/scripts/palette.ts
pnpm --filter @needless-ui/tokens palette
pnpm build:tokens