System Design

component ทั้งหมดที่ระบบใช้งาน เพื่อให้ทีมพัฒนาใช้สไตล์เดียวกันอย่าง consistency

สีที่ระบบใช้งาน (Color System)

แสดงสีหลักที่กำหนดจาก CSS variables ใน globals.css

สีหลัก (Base colors)

พื้นหลังหลัก (background)สีพื้นหลังหลักของหน้าbg-white text-background

ข้อความหลัก (foreground)สีข้อความหลักbg-foreground

Primaryสีปุ่มหลัก / action หลักbg-[#5867dd] text-white

Secondaryพื้นหลังรอง / กล่องข้อมูลbg-zinc-100 text-zinc-900

Accentสีเน้นรอง เช่น hover, tagbg-zinc-100 text-zinc-900

Mutedพื้นหลัง/ข้อความเบา ๆbg-zinc-100 text-zinc-500

Destructiveปุ่ม/สถานะลบ, คำเตือนรุนแรงbg-red-600 text-white

Border / Inputเส้นขอบ, เส้นกรอบ input ต่าง ๆbg-border

Ringสีวง focus state (outline)bg-ring

Sidebar

Sidebarพื้นหลังเมนูซ้ายbg-[color:var(--sidebar)]

Sidebar foregroundข้อความบน sidebarbg-[color:var(--sidebar-foreground)]

Sidebar primaryเมนู active หลักbg-[color:var(--sidebar-primary)] text-[color:var(--sidebar-primary-foreground)]

Sidebar accentเมนู hover / accentbg-[color:var(--sidebar-accent)] text-[color:var(--sidebar-accent-foreground)]

Chart Colors

Chart 1bg-[color:var(--chart-1)]

Chart 2bg-[color:var(--chart-2)]

Chart 3bg-[color:var(--chart-3)]

Chart 4bg-[color:var(--chart-4)]

Chart 5bg-[color:var(--chart-5)]