Cada decisión visual es una propiedad personalizada de CSS generada a partir de tokens de diseño W3C. Los componentes solo usan tokens semánticos como --nui-color-accent-solid, así que cambiar un token cambia el estilo de todos los componentes que lo usan.
Claro y oscuro
Por defecto, el modo lo decide la preferencia del sistema operativo. Fija un modo en cualquier elemento con data-nui-theme y anida temas libremente.
<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"Sobrescribe los tokens
Los tokens viven en @layer nui, así que el CSS normal de tu aplicación los sobrescribe. Defínelos en :root para toda la aplicación o en cualquier elemento para una parte de ella.
/* 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);
}Una paleta para tu marca
Las escalas de color se generan. Cambia un matiz en packages/tokens/scripts/palette.ts y vuelve a generarlas: el script reajusta cada color a sRGB y vuelve a comprobar el contraste de cada par de texto y fondo.
# After changing a hue in packages/tokens/scripts/palette.ts
pnpm --filter @needless-ui/tokens palette
pnpm build:tokens