Theme

reno-ui ship một theme. Component không bao giờ ghi một mã màu hay một chiều cao cố định — chúng đọc CSS variable, nên đổi màu thương hiệu, bo góc hay mật độ là đổi toàn bộ UI mà không có dòng code component nào thay đổi. Đó là toàn bộ điểm của tầng token.

Cài theme

Theme merge biến CSS thẳng vào globals.css của dự án. Mọi item khác tự kéo theo nó, nên thường không phải cài tay.

npx shadcn@latest add @reno/theme-base

Brand nó thành của bạn

Ghi đè --reno-brand-*, --radius và thang --density-* trong globals.css của dự án. Panel Thương hiệu trên /showcase làm việc đó ngay trên trình duyệt, đo tương phản WCAG tại chỗ, và cho copy đúng khối CSS để dán vào.

Trước đây chỗ này có bốn preset đặt tên theo domain — elearning, admin, ERP, CMS. Chúng đã bỏ: đặt tên theme theo domain của chính mình là mời người đọc chọn một trong số của mình, còn một dự án thì đến với một màu thương hiệu và một ý muốn về khoảng cách. Những gì bốn preset đó mã hoá — một hue, một bo góc, một bậc mật độ — giờ là setting trong panel.

Semantic color

--backgroundVăn bản mẫu Aa

--cardVăn bản mẫu Aa

--mutedVăn bản mẫu Aa

--primaryVăn bản mẫu Aa

--secondaryVăn bản mẫu Aa

--destructiveVăn bản mẫu Aa

--successVăn bản mẫu Aa

--warningVăn bản mẫu Aa

--infoVăn bản mẫu Aa

Brand ramp

Primitive token. Component không bao giờ đọc trực tiếp tầng này — chúng chỉ đọc semantic token ở trên.

100

200

300

400

500

600

700

800

900

950

Density

ERP nén chặt hơn e-learning. Cùng một component, khác giá trị token.

Token	Giá trị hiện tại
--density-control-height
--density-row-height
--density-cell-padding-x
--density-gap
--density-font-size
--radius