design tokens

1thay sử dụng kiến trúc token 3 lớp (tham chiếu → ngữ nghĩa → component). Điều này đảm bảo thay đổi thương hiệu được truyền tải chính xác — code component không bao giờ cần cập nhật khi thương hiệu thay đổi.

cách 3 lớp hoạt động

Lớp	Tiền tố	Ví dụ	Thay đổi?
1. tham chiếu	`--ref-*`	`--ref-blue-600: #064BAE`	không bao giờ — giá trị thô
2. ngữ nghĩa	`--color-`, `--text-`, `--surface-*`	`--text-primary: var(--ref-neutral-900)`	có — ghi đè thương hiệu ở đây
3. component	`--btn-`, `--card-`, `--input-*`	`--btn-primary-bg: var(--color-brand-600)`	không bao giờ — luôn ủy quyền cho lớp 2

cơ chế ghi đè thương hiệu

Bộ chọn thuộc tính CSS ghi đè token ngữ nghĩa lớp 2. Token component (lớp 3) không bao giờ cần quy tắc riêng cho từng thương hiệu.

:root { --color-brand-600: var(--ref-blue-600); }           /* mac dinh */
[data-brand="reputa-premier"] { --color-brand-600: var(--ref-red-600); }
[data-brand="tramnghe"] { --color-brand-600: var(--ref-teal-600); }
[data-brand="1thay"] { --color-brand-600: var(--ref-amber-600); }

/* token component luon uy quyen — khong bao gio can ghi de */
--btn-primary-bg: var(--color-brand-600);  /* hoat dong voi moi thuong hieu */

danh mục token

Danh mục	Tiền tố	Số lượng
màu tham chiếu	`--ref-*`	80+
màu ngữ nghĩa	`--color-*`	40+
kiểu chữ	`--text-`, `--font-`	30+
bề mặt	`--surface-*`	6
khoảng cách	`--space-*`	7
bo góc	`--radius-*`	6
đổ bóng	`--shadow-*`	5
viền	`--border-*`	5
độ mờ	`--opacity-*`	4
kích thước	`--size-*`	10+
z-index	`--z-*`	7

cách thêm token

Định nghĩa tham chiếu — thêm vào phần --ref-* trong tokens.css (chỉ khi cần giá trị thô mới)
Tạo ngữ nghĩa — thêm ánh xạ token lớp 2 đến tham chiếu
Thêm ghi đè thương hiệu — quy tắc [data-brand] cho mỗi biến thể thương hiệu
Tạo token component — token lớp 3 trỏ đến ngữ nghĩa
Xuất sang JS — cập nhật src/tokens/tokens.js
Snapshot — npm run snapshot-tokens
Xác minh — npm run build && npm run build-storybook

sử dụng token trong component

/* luon tham chieu token component lop 3 khi chung ton tai */
.my-component {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  padding: var(--space-sm) var(--space-md);
  font: var(--text-ui);
  border-radius: var(--radius-md);
}

/* khong bao gio hardcode — gia tri se khong phan ung voi thay doi thuong hieu */
/* × color: #064BAE */
/* × padding: 16px 24px */