Каждое визуальное решение — это CSS-переменная, сгенерированная из дизайн-токенов W3C. Компоненты используют только семантические токены вроде --nui-color-accent-solid, поэтому изменение одного токена меняет стиль всех компонентов, которые его используют.
Светлая и тёмная темы
По умолчанию режим выбирается по настройке операционной системы. Закрепите режим на любом элементе с помощью data-nui-theme и свободно вкладывайте темы друг в друга.
<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"Переопределение токенов
Токены находятся в @layer nui, поэтому обычный CSS вашего приложения их переопределяет. Задайте их на :root для всего приложения или на любом элементе — для отдельной его части.
/* 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);
}Фирменная палитра
Цветовые шкалы генерируются. Измените цветовой тон в packages/tokens/scripts/palette.ts и сгенерируйте палитру заново: скрипт снова впишет каждый цвет в sRGB и перепроверит контраст каждой пары текста и фона.
# After changing a hue in packages/tokens/scripts/palette.ts
pnpm --filter @needless-ui/tokens palette
pnpm build:tokens