Giao diện
Màu & tương phản
Bảng màu chia theo vai trò — thiết kế chọn vai trò (nền trang, chữ phụ, trạng thái thành công…), không chọn mã màu. Mọi bảng trên trang này sinh trực tiếp từ @tasco/theme lúc build, nên luôn là giá trị đang chạy trong app.
Vai trò của màu
| Nhóm | Token | Dùng cho |
|---|---|---|
| Thương hiệu | primary, primary-hover, primary-active, primary-soft | Hành động chính, header bảng, mục đang chọn, liên kết đậm |
| Nhấn | accent, accent-soft, accent-text | Mục menu đang chọn, huy hiệu, điểm nhấn phụ |
| Trạng thái | success, warning, error, info kèm -soft (và -text cho success/warning) | Nhãn trạng thái, thông báo, xu hướng tăng giảm |
| Liên kết | link, link-soft | Liên kết trong văn bản |
| Chữ | text, text-secondary, text-muted, text-subtle | Bốn cấp chữ, từ đậm đến nhạt |
| Bề mặt | page, surface, surface-elevated, surface-muted | Nền trang, nền card, nền nổi (modal, dropdown), nền dịu |
| Viền | border, border-strong | Viền mặc định, viền cần nổi bật |
| Sidebar | sidebar-top, sidebar-bottom | Gradient dọc của sidebar |
Tên đầy đủ của biến CSS có tiền tố --tasco-color-, vd --tasco-color-primary-soft.
Bảng màu
Giá trị ở chế độ sáng và tối, kèm tỉ lệ tương phản khi đặt màu đó trên nền surface của cùng chế độ.
| Biến | Sáng | Tối | Tương phản |
|---|---|---|---|
--tasco-color-primary | #203368 | #7090dc | 12.10:1 / 5.21:1 |
--tasco-color-primary-hover | #2f4b8f | #94ade6 | 8.32:1 / 7.28:1 |
--tasco-color-primary-active | #182544 | #35549e | 15.14:1 / 2.26:1 |
--tasco-color-primary-soft | #eef3fb | #1a2740 | 1.11:1 / 1.09:1 |
--tasco-color-accent | #ff9800 | #ffa726 | 2.16:1 / 8.39:1 |
--tasco-color-accent-soft | #fff1d6 | #3a2c12 | 1.12:1 / 1.20:1 |
--tasco-color-accent-text | #9e5d02 | #ffa726 | 5.22:1 / 8.39:1 |
--tasco-color-success | #089b00 | #22c55e | 3.68:1 / 7.15:1 |
--tasco-color-success-soft | #ecfdf5 | #10241a | 1.05:1 / 1.00:1 |
--tasco-color-success-text | #087e02 | #22c55e | 5.26:1 / 7.15:1 |
--tasco-color-warning | #d97706 | #fbbf24 | 3.19:1 / 9.76:1 |
--tasco-color-warning-soft | #fff7ed | #2a2110 | 1.06:1 / 1.03:1 |
--tasco-color-warning-text | #a55904 | #fbbf24 | 5.21:1 / 9.76:1 |
--tasco-color-error | #d71431 | #f87171 | 5.21:1 / 5.89:1 |
--tasco-color-error-soft | #fff1f0 | #2c1416 | 1.10:1 / 1.06:1 |
--tasco-color-info | #0f4c81 | #60a5fa | 8.86:1 / 6.41:1 |
--tasco-color-info-soft | #e8f2ff | #13243d | 1.13:1 / 1.05:1 |
--tasco-color-link | #1068d6 | #60a5fa | 5.29:1 / 6.41:1 |
--tasco-color-link-soft | #e8f2ff | #13243d | 1.13:1 / 1.05:1 |
--tasco-color-text | #10213f | #f8fafc | 16.01:1 / 15.58:1 |
--tasco-color-text-secondary | #4b5563 | #c0cadb | 7.56:1 / 9.87:1 |
--tasco-color-text-muted | #5f6b85 | #9aa6bf | 5.35:1 / 6.66:1 |
--tasco-color-text-subtle | #9ca3af | #6b7689 | 2.54:1 / 3.55:1 |
--tasco-color-surface | #ffffff | #162033 | 1.00:1 / 1.00:1 |
--tasco-color-surface-elevated | #ffffff | #1a2740 | 1.00:1 / 1.09:1 |
--tasco-color-surface-muted | #f6f8fc | #111827 | 1.06:1 / 1.09:1 |
--tasco-color-page | #edf2f8 | #0f1724 | 1.13:1 / 1.10:1 |
--tasco-color-border | #d8deea | #31415f | 1.35:1 / 1.59:1 |
--tasco-color-border-strong | #bcc6da | #4b5f86 | 1.72:1 / 2.55:1 |
--tasco-color-sidebar-top | #213368 | #1c2c52 | 12.08:1 / 1.19:1 |
--tasco-color-sidebar-bottom | #182544 | #0e1a33 | 15.14:1 / 1.06:1 |
Gradient và đổ bóng
| Biến | Sáng | Tối |
|---|---|---|
--tasco-gradient-primary | linear-gradient(135deg, #203368, #2f4b8f) | linear-gradient(135deg, #35549e, #4466b8) |
--tasco-gradient-danger | linear-gradient(135deg, #cf1444, #d71431) | linear-gradient(135deg, #cf1444, #d71431) |
--tasco-shadow-card | 0 12px 28px rgba(16, 33, 63, 0.08) | 0 12px 28px rgba(0, 0, 0, 0.35) |
--tasco-shadow-raised | 0 18px 40px rgba(16, 33, 63, 0.14) | 0 18px 40px rgba(0, 0, 0, 0.5) |
Cặp chữ/nền dùng được
Tương phản tối thiểu cho chữ thường là 4.5:1 (WCAG AA). Các cặp dưới đây là cặp component đang dùng; test của @tasco/theme khoá ngưỡng này nên đổi token làm một cặp tụt dưới ngưỡng thì CI báo lỗi. Cặp đánh dấu "Dưới AA" là ngoại lệ đã biết, chỉ dùng cho chữ không cần đọc (placeholder, trạng thái khoá).
| Chữ / nền | Sáng | Tối | Đang dùng ở |
|---|---|---|---|
--tasco-color-primarytrên --tasco-color-primary-soft | Aa10.86:1 | Aa4.77:1 | CTag primary, CButton ghost, icon CStatistic |
--tasco-color-primary-hovertrên --tasco-color-primary-soft | Aa7.47:1 | Aa6.66:1 | CButton ghost :hover, ::selection theme tối |
--tasco-color-primarytrên --tasco-color-surface | Aa12.10:1 | Aa5.21:1 | CButton secondary/outline/link, mục đang chọn của CTopNav, Pagination, Tabs |
--tasco-color-primary-hovertrên --tasco-color-surface | Aa8.32:1 | Aa7.28:1 | CButton secondary/outline/link :hover |
--tasco-color-primarytrên --tasco-color-surface-elevated | Aa12.10:1 | Aa4.77:1 | CButton trong modal/drawer/popover |
--tasco-color-linktrên --tasco-color-surface | Aa5.29:1 | Aa6.41:1 | CTable "Xoá tất cả" trên thanh lọc |
--tasco-color-linktrên --tasco-color-surface-elevated | Aa5.29:1 | Aa5.87:1 | thẻ <a> trong modal/drawer/popover |
--tasco-color-linktrên --tasco-color-surface-muted | Aa4.97:1 | Aa6.98:1 | thẻ <a> trong hàng sọc CTable |
--tasco-color-linktrên --tasco-color-page | Aa4.70:1 | Aa7.07:1 | thẻ <a> trên nền trang |
#ffftrên --tasco-color-primary | Aa12.10:1 | Không dùng | header bảng, CCard primary, nút primary antdv, ngày đang chọn DatePicker |
#ffftrên --tasco-color-primary-active | Aa15.14:1 | Aa7.21:1 | CChatMessage, cột sort header bảng; theme tối: header bảng, CCard primary, nút antdv, DatePicker |
#ffftrên --tasco-gradient-primary | Aa8.32:1 | Aa5.47:1 | CButton primary, tab đang chọn của drawer Thiết lập CTable |
#ffftrên --tasco-gradient-danger | Aa5.21:1 | Aa5.21:1 | CButton danger, nút primary danger antdv, hover item danger Dropdown theme tối |
#ffftrên --tasco-color-error | Aa5.21:1 | Không dùng | Badge, hover item danger Dropdown antdv |
--tasco-color-sidebar-bottomtrên --tasco-color-accent | Aa7.03:1 | Aa8.90:1 | CSideNav mục :hover/đang chọn |
--tasco-color-texttrên --tasco-color-surface | Aa16.01:1 | Aa15.58:1 | mục chưa chọn của CTopNav, tiêu đề CCard, giá trị CStatistic, nút icon CTable |
--tasco-color-text-mutedtrên --tasco-color-surface-muted | Aa5.03:1 | Aa7.25:1 | CTag default |
--tasco-color-text-mutedtrên --tasco-color-surface | Aa5.35:1 | Aa6.66:1 | nhãn CStatistic, nhãn thanh lọc CTable, footer CAppLayout |
--tasco-color-text-mutedtrên --tasco-color-surface-elevated | Aa5.35:1 | Aa6.09:1 | gợi ý trong drawer Thiết lập CTable |
--tasco-color-text-subtletrên --tasco-color-surface | Aa2.54:1Dưới AA — text-subtle là màu placeholder/disabled của antdv (colorTextQuaternary) | Aa3.55:1Dưới AA — text-subtle là màu placeholder/disabled của antdv (colorTextQuaternary) | mô tả CEmpty |
--tasco-color-accent-texttrên --tasco-color-accent-soft | Aa4.68:1 | Aa6.98:1 | CTag accent, icon CStatistic |
--tasco-color-success-texttrên --tasco-color-success-soft | Aa4.99:1 | Aa7.15:1 | CTag success, icon CStatistic |
--tasco-color-warning-texttrên --tasco-color-warning-soft | Aa4.91:1 | Aa9.51:1 | CTag warning, icon CStatistic |
--tasco-color-errortrên --tasco-color-error-soft | Aa4.73:1 | Aa6.23:1 | CTag error, icon CStatistic |
--tasco-color-infotrên --tasco-color-info-soft | Aa7.83:1 | Aa6.13:1 | CTag info, icon CStatistic |
--tasco-color-accent-texttrên --tasco-color-surface | Aa5.22:1 | Aa8.39:1 | cặp dùng được ở trang Màu & tương phản của docs |
--tasco-color-success-texttrên --tasco-color-surface | Aa5.26:1 | Aa7.15:1 | chữ CStatus hoạt động, trend tăng CStatistic |
--tasco-color-warning-texttrên --tasco-color-surface | Aa5.21:1 | Aa9.76:1 | cặp dùng được ở trang Màu & tương phản của docs |
--tasco-color-errortrên --tasco-color-surface | Aa5.21:1 | Aa5.89:1 | chữ CStatus không hoạt động, trend giảm CStatistic |
--tasco-color-infotrên --tasco-color-surface | Aa8.86:1 | Aa6.41:1 | cặp dùng được ở trang Màu & tương phản của docs |
--tasco-color-errortrên --tasco-color-surface-elevated | Aa5.21:1 | Aa5.39:1 | item danger của Dropdown trong menu thao tác |
--tasco-color-success-texttrên --tasco-color-info-soft | Aa4.65:1 | Aa6.84:1 | chữ CStatus trong hàng đang chọn của bảng |
--tasco-color-errortrên --tasco-color-info-soft | Aa4.61:1 | Aa5.63:1 | chữ CStatus trong hàng đang chọn của bảng |
Quy tắc chọn màu
accent,success,warninglà màu nền. Đặt làm chữ trên nền sáng thì không đủ tương phản — chữ màu đó dùng biến-texttương ứng (--tasco-color-success-text).primary,error,infolàm chữ được ngay trênsurfacevà trên nền-softcủa chính nó.- Chữ trắng chỉ đặt trên
primary-active,gradient-primary,gradient-danger; ở chế độ sáng thêmprimaryvàerror. - Chữ trên nền cam
accentdùng navysidebar-bottom, không dùng chữ trắng. text-subtledưới ngưỡng AA — chỉ cho placeholder và trạng thái khoá, không cho nội dung người dùng cần đọc.- Nền
-softđi với chữ cùng họ:success-softvớisuccess-text,error-softvớierror. Trộn họ (chữerrortrênsuccess-soft) vừa khó đọc vừa sai nghĩa.
Màu trạng thái
Một trạng thái nghiệp vụ luôn đi với cùng một màu trong toàn hệ thống:
| Màu | Nghĩa | Ví dụ |
|---|---|---|
success | Hoàn tất, đang hoạt động, hợp lệ | Đã duyệt, Đã giao, Hoạt động |
warning | Cần chú ý, đang chờ, sắp hết hạn | Chờ duyệt, Sắp hết hạn |
error | Thất bại, bị huỷ, không hoạt động | Từ chối, Đã huỷ, Quá hạn |
info | Đang xử lý, thông tin trung tính | Đang giao, Đang xử lý |
primary | Trạng thái gắn với thương hiệu, mới tạo | Mới |
default | Chưa bắt đầu, nháp, không phân loại | Nháp |
Nhãn trạng thái dùng CTag với color tương ứng; trạng thái bật/tắt dùng CStatus. Màu luôn đi kèm chữ — người dùng không phân biệt được màu vẫn đọc được trạng thái.
Chế độ tối
Người dùng tự bật chế độ tối trên header. Hai chế độ không đối xứng hoàn toàn:
- Ở chế độ tối,
primarylà màu sáng dùng làm chữ; nền có chữ trắng chuyển sangprimary-active. Header bảng, card kiểuprimaryvà nút primary của antdv tự đổi theo quy tắc này. -textcủa accent, success, warning trùng màu gốc vì màu gốc ở chế độ tối đã đủ sáng.- Gradient danger giữ nguyên ở cả hai chế độ.
Thiết kế một màn hình thì kiểm tra cả hai chế độ. Màu tự đặt ngoài token sẽ không đổi theo — nguyên nhân phổ biến nhất của chữ tối trên nền tối.
Cho designer
- Mã màu trong bảng trên dùng để dựng thư viện màu cho file thiết kế; đặt tên màu trong file thiết kế trùng tên token (
primary-soft,text-muted) để dev tra ngược được. - Cần một màu chưa có vai trò nào đáp ứng: đề xuất token mới, kèm cặp chữ/nền dự kiến dùng — xem Đổi design token.
Liên quan
- Viết CSS trong dự án — dùng biến màu trong CSS của app.
- Theme & design token — cách layer áp theme và chế độ tối.
- @tasco/theme —
cssVars,contrastPairs,contrastRatioOf.