106 lines
5.8 KiB
JSON
106 lines
5.8 KiB
JSON
{
|
|
"$schema": "https://tr.designtokens.org/format/",
|
|
"$description": "DS_<PROJECT> — design token theo chuẩn W3C DTCG. Nguồn sự thật duy nhất về màu/chữ/khoảng cách; tokens.css và khối :root trong HIFI_*.html phải sinh từ file này (kiểm bằng scripts/design-check.mjs). Giá trị bên dưới là PLACEHOLDER trung tính — thay theo brand guideline; thiếu brand ⇒ giữ và ghi OQ trong DS §0.",
|
|
"color": {
|
|
"bg": {
|
|
"canvas": { "$type": "color", "$value": "#F6F7F9", "$description": "Nền trang" },
|
|
"surface": { "$type": "color", "$value": "#FFFFFF", "$description": "Nền card/bảng/modal" },
|
|
"subtle": { "$type": "color", "$value": "#EEF1F5", "$description": "Header bảng, vùng phụ" }
|
|
},
|
|
"border": {
|
|
"default": { "$type": "color", "$value": "#D5DAE1" },
|
|
"strong": { "$type": "color", "$value": "#767F8C" }
|
|
},
|
|
"text": {
|
|
"primary": { "$type": "color", "$value": "#1B1F24" },
|
|
"secondary": { "$type": "color", "$value": "#5B6472" },
|
|
"disabled": { "$type": "color", "$value": "#9AA3AF", "$description": "Miễn kiểm tương phản (WCAG 1.4.3 loại trừ thành phần vô hiệu)" },
|
|
"inverse": { "$type": "color", "$value": "#FFFFFF" }
|
|
},
|
|
"brand": {
|
|
"primary": { "$type": "color", "$value": "#2456A6", "$description": "Nút chính, liên kết, focus ring" },
|
|
"primary-hover": { "$type": "color", "$value": "#1C468A" },
|
|
"primary-subtle": { "$type": "color", "$value": "#E7EEF9", "$description": "Nền badge/hàng được chọn" }
|
|
},
|
|
"status": {
|
|
"danger": { "$type": "color", "$value": "#B42318" },
|
|
"danger-subtle": { "$type": "color", "$value": "#FDECEA" },
|
|
"success": { "$type": "color", "$value": "#1E7B45" },
|
|
"success-subtle": { "$type": "color", "$value": "#E6F4EC" },
|
|
"warning": { "$type": "color", "$value": "#B7791F" },
|
|
"warning-subtle": { "$type": "color", "$value": "#FFF4DE" }
|
|
},
|
|
"focus": { "ring": { "$type": "color", "$value": "#2456A6" } }
|
|
},
|
|
"font": {
|
|
"family": {
|
|
"base": { "$type": "fontFamily", "$value": ["Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif"], "$description": "PLACEHOLDER — thay bằng font brand; giữ fallback stack" },
|
|
"mono": { "$type": "fontFamily", "$value": ["SFMono-Regular", "Consolas", "Menlo", "monospace"] }
|
|
},
|
|
"size": {
|
|
"xs": { "$type": "dimension", "$value": "12px" },
|
|
"sm": { "$type": "dimension", "$value": "14px" },
|
|
"md": { "$type": "dimension", "$value": "16px" },
|
|
"lg": { "$type": "dimension", "$value": "20px" },
|
|
"xl": { "$type": "dimension", "$value": "24px" },
|
|
"2xl": { "$type": "dimension", "$value": "32px" }
|
|
},
|
|
"weight": {
|
|
"regular": { "$type": "fontWeight", "$value": 400 },
|
|
"semibold": { "$type": "fontWeight", "$value": 600 }
|
|
},
|
|
"line-height": {
|
|
"tight": { "$type": "number", "$value": 1.25 },
|
|
"normal": { "$type": "number", "$value": 1.5 }
|
|
}
|
|
},
|
|
"space": {
|
|
"1": { "$type": "dimension", "$value": "4px" },
|
|
"2": { "$type": "dimension", "$value": "8px" },
|
|
"3": { "$type": "dimension", "$value": "12px" },
|
|
"4": { "$type": "dimension", "$value": "16px" },
|
|
"6": { "$type": "dimension", "$value": "24px" },
|
|
"8": { "$type": "dimension", "$value": "32px" },
|
|
"12": { "$type": "dimension", "$value": "48px" }
|
|
},
|
|
"radius": {
|
|
"sm": { "$type": "dimension", "$value": "4px" },
|
|
"md": { "$type": "dimension", "$value": "8px" },
|
|
"pill": { "$type": "dimension", "$value": "999px" }
|
|
},
|
|
"shadow": {
|
|
"sm": { "$type": "shadow", "$value": { "color": "#1B1F2414", "offsetX": "0px", "offsetY": "1px", "blur": "2px", "spread": "0px" } },
|
|
"md": { "$type": "shadow", "$value": { "color": "#1B1F2426", "offsetX": "0px", "offsetY": "4px", "blur": "12px", "spread": "0px" } }
|
|
},
|
|
"size": {
|
|
"control": {
|
|
"desktop": { "$type": "dimension", "$value": "36px", "$description": "Chiều cao nút/ô nhập desktop" },
|
|
"touch": { "$type": "dimension", "$value": "44px", "$description": "Chiều cao tối thiểu trên mobile (hit target ≥ 44px)" }
|
|
},
|
|
"icon": { "$type": "dimension", "$value": "20px" },
|
|
"content-max": { "$type": "dimension", "$value": "1200px" }
|
|
},
|
|
"breakpoint": {
|
|
"tablet": { "$type": "dimension", "$value": "768px", "$description": "Khớp UICONV §1" },
|
|
"desktop": { "$type": "dimension", "$value": "1024px", "$description": "Khớp UICONV §1" }
|
|
},
|
|
"$extensions": {
|
|
"ba": {
|
|
"project": "<PROJECT>",
|
|
"version": "1.0",
|
|
"source": "UICONV_<PROJECT> v1.0 · brand guideline: <đường dẫn / 'chưa có — OQ-nnn'>",
|
|
"contrastPairs": [
|
|
{ "fg": "color.text.primary", "bg": "color.bg.surface", "min": 4.5, "use": "Chữ thường trên nền card" },
|
|
{ "fg": "color.text.primary", "bg": "color.bg.canvas", "min": 4.5, "use": "Chữ thường trên nền trang" },
|
|
{ "fg": "color.text.secondary", "bg": "color.bg.surface", "min": 4.5, "use": "Chữ phụ, hint" },
|
|
{ "fg": "color.text.inverse", "bg": "color.brand.primary", "min": 4.5, "use": "Nhãn nút chính" },
|
|
{ "fg": "color.text.inverse", "bg": "color.status.danger", "min": 4.5, "use": "Nhãn nút nguy hiểm" },
|
|
{ "fg": "color.brand.primary", "bg": "color.bg.surface", "min": 4.5, "use": "Liên kết" },
|
|
{ "fg": "color.status.danger", "bg": "color.bg.surface", "min": 4.5, "use": "Message lỗi dưới field" },
|
|
{ "fg": "color.text.primary", "bg": "color.brand.primary-subtle", "min": 4.5, "use": "Chữ trên badge/hàng chọn" },
|
|
{ "fg": "color.border.strong", "bg": "color.bg.surface", "min": 3.0, "use": "Viền ô nhập (WCAG 1.4.11 non-text)" }
|
|
]
|
|
}
|
|
}
|
|
}
|