System Design
component ทั้งหมดที่ระบบใช้งาน เพื่อให้ทีมพัฒนาใช้สไตล์เดียวกันอย่าง consistency
สีที่ระบบใช้งาน (Color System)
แสดงสีหลักที่กำหนดจาก CSS variables ใน
globals.cssสีหลัก (Base colors)
พื้นหลังหลัก (background)สีพื้นหลังหลักของหน้า
bg-white text-backgroundข้อความหลัก (foreground)สีข้อความหลัก
bg-foregroundPrimaryสีปุ่มหลัก / action หลัก
bg-[#5867dd] text-whiteSecondaryพื้นหลังรอง / กล่องข้อมูล
bg-zinc-100 text-zinc-900Accentสีเน้นรอง เช่น hover, tag
bg-zinc-100 text-zinc-900Mutedพื้นหลัง/ข้อความเบา ๆ
bg-zinc-100 text-zinc-500Destructiveปุ่ม/สถานะลบ, คำเตือนรุนแรง
bg-red-600 text-whiteBorder / Inputเส้นขอบ, เส้นกรอบ input ต่าง ๆ
bg-borderRingสีวง focus state (outline)
bg-ringSidebar
Sidebarพื้นหลังเมนูซ้าย
bg-[color:var(--sidebar)]Sidebar foregroundข้อความบน sidebar
bg-[color:var(--sidebar-foreground)]Sidebar primaryเมนู active หลัก
bg-[color:var(--sidebar-primary)] text-[color:var(--sidebar-primary-foreground)]Sidebar accentเมนู hover / accent
bg-[color:var(--sidebar-accent)] text-[color:var(--sidebar-accent-foreground)]Chart Colors
Chart 1
bg-[color:var(--chart-1)]Chart 2
bg-[color:var(--chart-2)]Chart 3
bg-[color:var(--chart-3)]Chart 4
bg-[color:var(--chart-4)]Chart 5
bg-[color:var(--chart-5)]