Cada decisão visual é uma propriedade personalizada CSS gerada a partir de design tokens W3C. Os componentes usam apenas tokens semânticos como --nui-color-accent-solid, então mudar um token altera o estilo de todos os componentes que o usam.
Claro e escuro
Por padrão, a preferência do sistema operacional define o modo. Fixe um modo em qualquer elemento com data-nui-theme e aninhe temas à vontade.
<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"Sobrescreva os tokens
Os tokens ficam em @layer nui, então o CSS comum da sua aplicação os sobrescreve. Defina-os em :root para a aplicação inteira ou em qualquer elemento para uma parte dela.
/* 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);
}Uma paleta para a sua marca
As escalas de cor são geradas. Altere um matiz em packages/tokens/scripts/palette.ts e gere tudo de novo: o script reajusta cada cor ao sRGB e verifica novamente o contraste de cada par de texto e fundo.
# After changing a hue in packages/tokens/scripts/palette.ts
pnpm --filter @needless-ui/tokens palette
pnpm build:tokens