Giao diện
Token
Token khai báo trong src/index.css, dưới dạng CSS custom property, và map sang Tailwind v4 qua @theme inline.
Màu nền tảng
| Token | Light | Dark |
|---|---|---|
--background | #ffffff | #0f0e0d |
--foreground | #111111 | #f5f4f2 |
--card | #ffffff | #171614 |
--primary | #cc4e2d | #e2643f |
--muted | #f2f2f2 | #232120 |
--muted-foreground | #666666 | #a3a09b |
--accent | #fff7ed | #2c1a12 |
--border | #e7e5e4 | #302d2b |
--destructive | #dc2626 | #f05252 |
Thang điểm đánh giá
Compass thêm hai dải màu cho điểm 1–5. Đây là ngoại lệ duy nhất của quy tắc "một màu nhấn".
| Dải | Ý nghĩa | Dùng cho |
|---|---|---|
--good-1 → --good-5 | đỏ → xanh, càng cao càng tốt | Health, Maturity |
--severity-1 → --severity-5 | xám → đỏ, càng cao càng gắt | Importance, Priority, Risk |
--score-fg là màu chữ đặt trên các nền đó.
WARNING
Không hard-code mã màu trong component. Luôn dùng var(--...) hoặc class Tailwind ánh xạ từ token, nếu không dark mode sẽ vỡ.
Radius và typography
| Token | Giá trị |
|---|---|
--radius-sm … --radius-xl | 4px, 6px, 8px, 8px |
--font-sans / --font-serif / --font-mono | Arial |
Dark mode
Dark mode bật bằng class dark trên <html>, đặt trước lần paint đầu tiên bằng một script inline trong index.html, nên không có hiện tượng nháy sáng.