DOL Design System Template

Search tip: nếu workspace search làm README.md khó tìm, mở file DOL_Design_System_Template_Overview.md ở root của repo. File README.md này vẫn là canonical hub để giữ nguyên convention và toolchain hiện tại.

Purpose

Giữ các file adapter để dán nhanh vào các công cụ AI-assisted builder như Figma Make, Google AI Studio, hoặc các playground dùng Tailwind/theme CSS.

Các file trong folder này không thay thế full token export của DOL-DS-token. Chúng đóng vai trò:

• bridge giữa DOL Design System canon và generic app theme roles
• quick-start theme bootstrap cho AI
• reusable template để giảm việc map tay lại từ đầu ở mỗi project mới

Current Files

• DOL_General_AI_Theme_Adapter.css

Usage Rule

• Ưu tiên dùng các biến --ds-* khi muốn bám đúng canon của DOL Design System.
• Dùng các biến generic như --background, --primary, --radius-* khi tool bắt buộc cần một app theme kiểu phổ thông.
• Nếu tool không hiểu full design system, adapter này là lớp translate tối thiểu an toàn.
• Ưu tiên --ds-shadow-neutral-* cho elevation mặc định; chỉ dùng colored shadow aliases khi surface thật sự cần accent.
• Paint styles chuyên biệt như AI, DOL PRO, Ranking, Social, Img lib không được serialize hết vào adapter này; chúng vẫn được quản lý ở guideline/report để tránh AI lạm dụng gradient hoặc image fills như token semantic.

Boundary

• Chỉ đặt template dùng chung cho DOL Design System tổng.
• KID-specific templates phải nằm ở lane DOL Kid Design System.
• Nếu sau này có template so sánh hay interoperability giữa nhiều system, đặt ở Cross-System Design System.

Notes

• Dark mode trong adapter này là pragmatic mapping cho external tools, không phải full semantic dark contract của toàn bộ hệ.
• Khi DOL-DS-token thay đổi đáng kể ở color/radius/layout, cần sync lại file template tương ứng.
• Khi effect style canon thay đổi, phải sync lại các alias --ds-shadow-* và --ds-focus-ring.
• Rule dùng variable/effect/paint được chốt ở ../../ds-guideline/shadow.md.
• Adapter này giữ backward-compatible aliases cho các theme runtime cũ như --font-size, --switch-background, --chart-*, --radius-card, và --radius-badge để giảm rủi ro vỡ UI khi sync ngược vào theme.css.
• --chart-* trong adapter là compatibility roles cho app runtime, không phải lớp token chuyên biệt canon của DS tổng.