Design Tokens

ตัวแปร CSS ทั้งหมดที่ใช้ใน StackUI — synced จาก Figma Variables

Design tokens ทั้งหมดของ StackUI ถูก sync มาจาก Figma Variables โดยใช้ script figma-to-css.ts เป็น single source of truth

Source of Truth

Figma Variables → Variables_Figma/*.json → bun run sync:figma → packages/design-tokens/*.css

ทุกครั้งที่แก้ design ใน Figma ให้ export JSON แล้วรัน bun run sync:figma เพื่อ sync CSS

Typography

Font Families

Variable	Font	ใช้กับ
`--stk-font-primary`	Inter	Heading
`--stk-font-secondary`	IBM Plex Sans Thai	Body text
`--stk-font-tertiary`	Sarabun	ข้อความเสริม
`--stk-font-heading`	= `--stk-font-primary`	h1–h6
`--stk-font-body`	= `--stk-font-secondary`	body
`--stk-font-mono`	JetBrains Mono	code

Font Sizes (16 ระดับ)

:root {  --stk-text-10px: 10px;  --stk-text-12px: 12px;  --stk-text-14px: 14px;  --stk-text-16px: 16px;  --stk-text-18px: 18px;  --stk-text-20px: 20px;  --stk-text-22px: 22px;  --stk-text-24px: 24px;  --stk-text-26px: 26px;  --stk-text-32px: 32px;  --stk-text-40px: 40px;  --stk-text-44px: 44px;  --stk-text-48px: 48px;  --stk-text-56px: 56px;  --stk-text-64px: 64px;  --stk-text-72px: 72px;}

Font Weights (9 ระดับ)

Variable	Value	ชื่อ
`--stk-font-thin`	100	Thin
`--stk-font-extra-light`	200	Extra Light
`--stk-font-light`	300	Light
`--stk-font-regular`	400	Regular
`--stk-font-medium`	500	Medium
`--stk-font-semibold`	600	Semibold
`--stk-font-bold`	700	Bold
`--stk-font-extra-bold`	800	Extra Bold
`--stk-font-black`	900	Black

กลุ่มสีที่มี: amber, blue, cyan, emerald, fuchsia, gray, green, indigo, lime, neutral, orange, pink, purple, red, rose, sky, slate, stone, teal, violet, yellow, zinc

Shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950

:root {  --stk-blue-50:  #eff6ff;  --stk-blue-100: #dbeafe;  --stk-blue-200: #bedbff;  --stk-blue-300: #8ec5ff;  --stk-blue-400: #51a2ff;  --stk-blue-500: #2b7fff;  --stk-blue-600: #155dfc;  --stk-blue-700: #1447e6;  --stk-blue-800: #193cb8;  --stk-blue-900: #1c398e;  --stk-blue-950: #162456;}

Semantic Colors

Semantic colors ถูก map จาก palette — brand presets สามารถ override ได้

Variable	Mapped จาก	ใช้กับ
`--stk-primary`	`blue-700`	สีหลักของ brand
`--stk-primary-light`	`blue-500`	สีหลัก (อ่อน)
`--stk-primary-dark`	`blue-900`	สีหลัก (เข้ม)
`--stk-secondary`	`amber-400`	สีรอง
`--stk-secondary-light`	`amber-300`	สีรอง (อ่อน)
`--stk-secondary-dark`	`amber-600`	สีรอง (เข้ม)
`--stk-accent`	`emerald-500`	สีเน้น
`--stk-success`	`emerald-500`	สำเร็จ
`--stk-warning`	`amber-500`	เตือน
`--stk-danger`	`red-500`	อันตราย
`--stk-info`	`blue-500`	ข้อมูล

Background & Text

Variable	ค่า	ใช้กับ
`--stk-bg-primary`	white	พื้นหลังหลัก
`--stk-bg-secondary`	gray-50	พื้นหลังรอง
`--stk-bg-alt`	gray-100	พื้นหลังสลับ
`--stk-bg-dark`	gray-900	พื้นหลังมืด
`--stk-text-primary`	gray-900	ข้อความหลัก
`--stk-text-secondary`	gray-600	ข้อความรอง
`--stk-text-muted`	gray-400	ข้อความจาง
`--stk-text-inverse`	white	ข้อความบนพื้นมืด

Spacing

Spacing Scale (15 ค่า)

:root {  --stk-space-0:  0px;  --stk-space-2:  2px;  --stk-space-4:  4px;  --stk-space-8:  8px;  --stk-space-10: 10px;  --stk-space-12: 12px;  --stk-space-16: 16px;  --stk-space-20: 20px;  --stk-space-24: 24px;  --stk-space-32: 32px;  --stk-space-40: 40px;  --stk-space-48: 48px;  --stk-space-56: 56px;  --stk-space-64: 64px;  --stk-space-72: 72px;  /* Negative */  --stk-space-neg-8:  -8px;  --stk-space-neg-16: -16px;  /* Section */  --stk-section-py:    var(--stk-space-64);  --stk-section-py-sm: var(--stk-space-40);  /* Container */  --stk-container-max: 1200px;  --stk-container-px:  var(--stk-space-24);}

Border Radius (19 ค่า)

:root {  --stk-radius-0:    0px;  --stk-radius-2:    2px;  --stk-radius-4:    4px;  --stk-radius-6:    6px;  --stk-radius-8:    8px;  --stk-radius-10:   10px;  --stk-radius-12:   12px;  --stk-radius-14:   14px;  --stk-radius-16:   16px;  --stk-radius-20:   20px;  --stk-radius-24:   24px;  --stk-radius-32:   32px;  --stk-radius-40:   40px;  --stk-radius-48:   48px;  --stk-radius-56:   56px;  --stk-radius-64:   64px;  --stk-radius-72:   72px;  --stk-radius-full: 999px;}

Border Widths

Variable	Value
`--stk-border-1`	1px
`--stk-border-2`	2px
`--stk-border-4`	4px
`--stk-border-8`	8px
`--stk-border-12`	12px
`--stk-border-16`	16px

Shadows

Variable	ใช้กับ
`--stk-shadow-sm`	เงาเบาๆ (hover state)
`--stk-shadow-md`	card, dropdown
`--stk-shadow-lg`	modal, popover
`--stk-shadow-xl`	floating elements

Utility Classes

/* Section */.stk-section              /* section padding (64px) */.stk-section--sm          /* smaller padding (40px) */.stk-section--dark        /* dark background */.stk-section--gray        /* gray background *//* Text */.stk-heading              /* heading style */.stk-subheading           /* subheading style */.stk-text-primary         /* primary color text */.stk-text-secondary       /* secondary color text */.stk-text-muted           /* muted color text *//* Button */.stk-btn                  /* button base */.stk-btn--primary         /* primary button */.stk-btn--secondary       /* secondary button */.stk-btn--outline         /* outline button *//* Card */.stk-card                 /* card with shadow + hover *//* Misc */.stk-divider              /* horizontal line */.stk-img-cover            /* object-fit: cover */.stk-img-contain          /* object-fit: contain */