Mọi quyết định về mặt thị giác đều là một biến CSS được sinh từ design token W3C. Component chỉ dùng token ngữ nghĩa như --nui-color-accent-solid, nên thay đổi một token sẽ đổi style của mọi component dùng token đó.
Sáng và tối
Mặc định, chế độ được chọn theo thiết lập của hệ điều hành. Cố định chế độ trên bất kỳ phần tử nào bằng data-nui-theme, và lồng chúng vào nhau tùy ý.
<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"Ghi đè token
Token nằm trong @layer nui, nên CSS thông thường trong ứng dụng của bạn có thể ghi đè chúng. Đặt token trên :root cho toàn bộ ứng dụng, hoặc trên bất kỳ phần tử nào cho riêng một phần.
/* 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);
}Bảng màu thương hiệu
Các thang màu được sinh tự động. Đổi sắc độ (hue) trong packages/tokens/scripts/palette.ts rồi sinh lại: script sẽ điều chỉnh mọi màu về không gian sRGB và kiểm tra lại độ tương phản của từng cặp chữ và nền.
# After changing a hue in packages/tokens/scripts/palette.ts
pnpm --filter @needless-ui/tokens palette
pnpm build:tokens