Design Tokens

Tokens là các 'nguyên tử thị giác' của Examdee Design System. Chúng lưu giữ các biến số như màu sắc, khoảng cách và kiểu chữ được đồng bộ giữa các nền tảng.

Tổng quan

Hệ thống token được thiết kế theo cấu trúc Semantic (theo ý nghĩa sử dụng), giúp nhà phát triển không cần quan tâm đến mã màu HEX cụ thể mà chỉ cần quan tâm đến mục đích sử dụng (ví dụ: nền trang, màu chữ chính).

token.json structure

{
  "bg": {
    "surface": {
      "page": { "value": "#ffffff" },
      "card": { "value": "#f9fafb" }
    }
  },
  "text": {
    "primary": { "value": "#101828" },
    "secondary": { "value": "#667085" }
  }
}

Quy trình đồng bộ

Tokens được xuất từ Figma và tự động biên dịch sang Tailwind CSS/Variables.

Xuất dữ liệu

Dùng plugin Variables2JSON để lấy file JSON từ Figma Collections.

Cập nhật Source

Dán nội dung vào packages/ui/src/tokens/token.json.

Chạy Build

Chạy lệnh npm run build:tokens để tạo CSS Variables.

Terminal

npm run build:tokens

Quy tắc đặt tên (Tailwind)

Hệ thống tự động map các biến Semantic sang các class tiện ích của Tailwind CSS.

Backgrounds

semantic.color.bg.*

.bg-surface-page

Borders

semantic.color.border.*

.border-subtle

Text

semantic.color.text.*

.text-secondary

Nguyên tắc sử dụng

✓Nên dùng

•Luôn ưu tiên dùng Semantic Token để đảm bảo tính nhất quán nếu đổi theme
•Chỉ chỉnh sửa token trong file JSON nguồn, không sửa trực tiếp file CSS build
•Sử dụng công cụ CLI để kiểm tra danh sách token khả dụng

✕Không nên dùng

•Không dùng các màu HEX tùy ý trong code
•Không bypass hệ thống token bằng các class Tailwind mặc định (như bg-blue-500)

CLI (Source Code)

Tải trực tiếp mã nguồn TSX về dự án của bạn để dễ dàng tuỳ biến.

npx examdee-cli add tokens