Giao diện
@tasco/theme
Design token và các hàm suy ra theme antdv, biến CSS --tasco-*, tỉ lệ tương phản. Bảng giá trị token sáng/tối: Màu & tương phản. Cách áp theme trong app: Theme & design token.
Biến
AA_TEXT_CONTRAST
ts
const AA_TEXT_CONTRAST: 4.5 = 4.5;Ngưỡng tương phản WCAG 2.x AA cho chữ cỡ thường.
antdThemeDark
ts
const antdThemeDark: AntdThemeConfig;getAntdTheme('dark') tính sẵn.
antdThemeLight
ts
const antdThemeLight: AntdThemeConfig;getAntdTheme('light') tính sẵn.
contrastPairs
ts
const contrastPairs: readonly ContrastPair[];Cặp chữ/nền đã khoá tương phản AA, xếp theo nhóm màu.
darkTokens
ts
const darkTokens: TascoTokens;Token chế độ tối.
lightTokens
ts
const lightTokens: TascoTokens;Token chế độ sáng.
tokensByMode
ts
const tokensByMode: object;Token theo chế độ — tra bằng ThemeMode.
Khai báo kiểu
| Tên | Kiểu | Mặc định |
|---|---|---|
dark | TascoTokens | darkTokens |
light | TascoTokens | lightTokens |
Hàm
contrastRatioOf()
ts
function contrastRatioOf(foreground, background): number;Tỉ lệ tương phản WCAG 2.x giữa hai màu: 1 (trùng màu) → 21 (đen/trắng); đổi chỗ chữ và nền cho cùng kết quả. Ngưỡng AA: ≥ 4.5 cho chữ thường, ≥ 3 cho chữ lớn và thành phần đồ hoạ. Kết quả không làm tròn vì WCAG không cho làm tròn lên (4.499 là chưa đạt 4.5).
Tham số
| Tham số | Kiểu |
|---|---|
foreground | string |
background | string |
Trả về
number
cssVars()
ts
function cssVars(mode?): Record<string, string>;Map tên biến CSS --tasco-* → giá trị của một chế độ; số đo đã kèm đơn vị px.
Tham số
| Tham số | Kiểu | Mặc định |
|---|---|---|
mode | ThemeMode | 'light' |
Trả về
Record<string, string>
cssVarsText()
ts
function cssVarsText(mode?, selector?): string;Sinh chuỗi CSS để inject vào <head> (vd qua app.head.style trong layer).
Tham số
| Tham số | Kiểu | Mặc định | Mô tả |
|---|---|---|---|
mode | ThemeMode | 'light' | - |
selector | string | ':root' | mặc định :root. |
Trả về
string
getAntdTheme()
ts
function getAntdTheme(mode?): AntdThemeConfig;Cấu hình theme của antdv cho một chế độ. Chưa gồm algorithm — nơi có antdv tự thêm theme.darkAlgorithm/theme.defaultAlgorithm (layer làm trong app.vue).
Tham số
| Tham số | Kiểu | Mặc định |
|---|---|---|
mode | ThemeMode | 'light' |
Trả về
luminanceOf()
ts
function luminanceOf(color): number;Relative luminance theo WCAG 2.x: 0 (đen) → 1 (trắng). Nhận hex #rgb / #rrggbb, không phân biệt hoa thường; chuỗi khác (tên màu, rgb(), hex có alpha) → ném lỗi.
Tham số
| Tham số | Kiểu |
|---|---|
color | string |
Trả về
number
pairContrastOf()
ts
function pairContrastOf(pair, mode): number;Tương phản thấp nhất của một cặp ở một chế độ: nền gradient thì lấy điểm màu tệ nhất. Tên biến không tồn tại → ném lỗi.
Tham số
| Tham số | Kiểu |
|---|---|
pair | ContrastPair |
mode | ThemeMode |
Trả về
number
Interface
AntdThemeConfig
Cấu hình theme cho <a-config-provider> — tương thích cấu trúc với prop theme của antdv.
Thuộc tính
ColorTokens
Bảng màu theo vai trò. Mỗi field phát ra một biến CSS --tasco-color-<tên-kebab> (xem cssVars).
Thuộc tính
ContrastPair
Một cặp màu chữ/nền cần đạt tương phản AA.
Thuộc tính
| Thuộc tính | Kiểu | Mô tả |
|---|---|---|
bg | string | Màu nền, ghi như fg; gradient thì xét mọi điểm màu. |
fg | string | Màu chữ: tên biến CSS bỏ tiền tố --tasco- (vd color-primary) hoặc hex cố định (#fff). |
knownFailures? | Partial<Record<ThemeMode, string>> | Chế độ đang biết là CHƯA đạt ngưỡng → lý do. Test khẳng định cặp vẫn dưới ngưỡng, nên khi sửa đạt rồi test sẽ đỏ nhắc xoá mục này để cặp được khoá như các cặp khác. |
modes? | ThemeMode[] | Chỉ áp dụng ở các chế độ này; bỏ trống = cả hai. |
usedBy | string | Nơi dùng — đổi token là biết component nào bị ảnh hưởng. |
DensityTokens
Mật độ component (px). controlHeight* áp qua global token của antdv; phần còn lại phát ra biến CSS để base.css ghi đè padding/margin, vì antdv 4 bỏ qua theme.components.
Thuộc tính
TascoTokens
Toàn bộ design token của một chế độ (sáng hoặc tối).
Thuộc tính
| Thuộc tính | Kiểu | Mô tả |
|---|---|---|
color | ColorTokens | Bảng màu theo vai trò. |
controlHeight | number | Chiều cao control cơ bản (px) — alias của density.controlHeight. |
density | DensityTokens | Mật độ component (height/padding/margin). |
fontFamily | string | Font chữ thân (Quicksand + font hệ thống dự phòng). |
fontFamilyHeading | string | Font cho tiêu đề/heading (có thể trùng fontFamily). |
fontSize | number | Cỡ chữ cơ bản (px). |
gradientDanger | string | Gradient cho nút danger. |
gradientPrimary | string | Gradient cho nút/hero primary. |
radius | number | Bo góc cơ bản (px). |
radiusLg | number | Bo góc lớn (card, modal) (px). |
shadowCard | string | Shadow card. |
shadowRaised | string | Shadow phần tử nổi (dropdown/modal). |
spacingUnit | number | Đơn vị spacing cơ bản (px). |
Kiểu
ThemeMode
ts
type ThemeMode = "light" | "dark";Chế độ giao diện.