✓

Decento Design Token System — Implemented!

เมื่อ 28 มิ.ย. 2026 — เพิ่ม 80+ tokens + migrate 100+ hardcoded values → var()

🧬 Token Status: Decento ERP

All 7 categories implemented in dashboard.html (6,353 lines)

หมวดTokensMigratedสถานะ
🎨 Colorsurface, text, accent, status colorsbadges (5), light theme colors (15), error (1)✅ Done
🔤 Typographyfont-size (10 levels), font-weight (4), line-height, letter-spacing33 hardcoded font-size → var()✅ Done
📏 Spacing8px grid (10 levels: 0, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64px)~26 padding + ~5 gap → var(--space-*)✅ Done
🔄 Radiusradius scale (6 levels: none, sm, md, lg, xl, full)9 border-radius → var(--radius-*)✅ Done
⬆️ Elevationelevation scale (low, medium, high)2 box-shadow → var(--elevation-*)✅ Done
✨ Motionduration (fast/normal/slow) + easing7 transition → var(--motion-*)✅ Done
🔣 Iconsicon sizes (xs, sm, base, lg, xl, 2xl)(รอใช้งานใน components)⏸ Available

📦 All Tokens Defined (80+)

--bg-body#0d0d0d / #f4f2ef1x
--bg-card#1a1a1a / #fff19x
--bg-card-alt#222 / #faf9f78x
--bg-input#252525 / #fff228x
--bg-hover#2a2a2a / #f0ede84x
--border#2a2a2a / #e0dcd620x
--border-light#333 / #d0ccc6233x
--text-primary#f5f5f5 / #1c1b18256x
--text-secondary#999 / #7a756e220x
--text-muted#666 / #a09a9275x
--accent#f59e0b / #f59e0c85x
--space-18px9x
--space-1-512px17x
--space-216px7x
--font-size-base13px7x
--font-size-sm12px6x
--font-size-xs10px7x
--radius-md8px4x
--radius-lg12px3x
--radius-xl16px1x
--color-success-*bg + text2x
--color-warning-*bg + text2x
--color-danger-*bg + text2x
--motion-fast150ms4x
--motion-normal250ms5x
--elevation-mediumshadow1x
--elevation-highshadow1x

📋 ขั้นตอนถัดไป — ทำให้เป็นท่ามาตรฐาน

#สิ่งที่ต้องทำรายละเอียด
1✅ Token Definitions ใน dashboard.htmlเสร็จแล้ว — 80+ tokens ใน :root + [data-theme]
2✅ Migrate hardcoded → var()100+ replacements — font-size, padding, radius, shadow, transition, colors
3⏸ สร้าง Token Spec เป็นไฟล์แยกแยก tokens.css สำหรับ reuse ในโปรเจคอื่น
4⏸ Migrate PDF Templatesquotation.html, bn_inv.html, delivery.html, borrow.html
5⏸ ทำเป็น Standard Boilerplatetemplate สำหรับโปรเจค React ใหม่