107 lines
6.8 KiB
JSON
107 lines
6.8 KiB
JSON
{
|
|
"$schema": "https://tr.designtokens.org/format/",
|
|
"$description": "DS_e-commerce — 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 của template ba-design — dự án chưa có brand guideline (SAD §7.0: 'không có brand guideline cố định') và chưa chọn design system tham chiếu (OQ-022). KHÔNG coi đây là đề xuất nhận diện đã duyệt — xem DS_e-commerce_v1.0.md §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 — placeholder trung tính, chưa có brand guideline (OQ-022)" },
|
|
"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 — system stack giữ nguyên theo chỉ đạo (không có font brand); ZH/KO/JA cần rà lại fallback font khi có bản dịch (OQ-023)" },
|
|
"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", "$description": "PLACEHOLDER — UICONV §1 chưa chốt max-width thật (OQ-018), giữ giá trị template" }
|
|
},
|
|
"breakpoint": {
|
|
"tablet": { "$type": "dimension", "$value": "768px", "$description": "PLACEHOLDER — UICONV §1 chưa chốt ngưỡng thật (OQ-018), giữ giá trị template" },
|
|
"desktop": { "$type": "dimension", "$value": "1024px", "$description": "PLACEHOLDER — UICONV §1 chưa chốt ngưỡng thật (OQ-018), giữ giá trị template" }
|
|
},
|
|
"$extensions": {
|
|
"ba": {
|
|
"project": "e-commerce",
|
|
"version": "1.0",
|
|
"source": "UICONV_e-commerce_v1.0.md v1.1 §0/§1/§8/§11 (chưa chốt design system — OQ-022; chưa chốt breakpoint/grid — OQ-018) · brand guideline: chưa có (SAD §7.0) — placeholder trung tính của templates/tokens.json",
|
|
"contrastPairs": [
|
|
{ "fg": "color.text.primary", "bg": "color.bg.surface", "min": 4.5, "use": "Chữ thường trên nền card (VD tên sản phẩm C04, biến thể C05)" },
|
|
{ "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": "Hint, tên gian hàng phụ" },
|
|
{ "fg": "color.text.inverse", "bg": "color.brand.primary", "min": 4.5, "use": "Nhãn nút chính (C11 Tiến hành Checkout)" },
|
|
{ "fg": "color.text.inverse", "bg": "color.status.danger", "min": 4.5, "use": "Nhãn nút nguy hiểm (C07 Xoá)" },
|
|
{ "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 (E-CART-0002)" },
|
|
{ "fg": "color.status.danger", "bg": "color.status.danger-subtle", "min": 4.5, "use": "Banner lỗi tải/cập nhật (C12, E-CART-0003/0006)" },
|
|
{ "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 / bộ đếm F01 (WCAG 1.4.11 non-text)" }
|
|
]
|
|
}
|
|
}
|
|
}
|