Design Tokens
ตัวแปร CSS ทั้งหมดที่ใช้ใน StackUI ขึ้นต้นด้วย --stk-
Colors
| Variable | Default | Description |
|---|---|---|
--stk-primary | #1a3c6e | สีหลัก |
--stk-primary-light | #2a5a9e | สีหลัก (อ่อน) |
--stk-primary-dark | #0f2444 | สีหลัก (เข้ม) |
--stk-secondary | #e8b931 | สีรอง |
--stk-accent | #2ecc71 | สีเน้น |
--stk-gray-50 ~ --stk-gray-900 | — | สีเทา 10 ระดับ |
Typography
:root { --stk-font-heading: "Prompt", sans-serif; --stk-font-body: "Sarabun", sans-serif; /* Font Sizes */ --stk-text-xs: 0.75rem; /* 12px */ --stk-text-sm: 0.875rem; /* 14px */ --stk-text-base: 1rem; /* 16px */ --stk-text-lg: 1.125rem; /* 18px */ --stk-text-xl: 1.25rem; /* 20px */ --stk-text-2xl: 1.5rem; /* 24px */ --stk-text-3xl: 1.875rem; /* 30px */ --stk-text-4xl: 2.25rem; /* 36px */ --stk-text-5xl: 3rem; /* 48px */ /* Font Weights */ --stk-font-light: 300; --stk-font-regular: 400; --stk-font-medium: 500; --stk-font-semibold: 600; --stk-font-bold: 700;}Spacing
:root { --stk-space-1: 0.25rem; /* 4px */ --stk-space-2: 0.5rem; /* 8px */ --stk-space-3: 0.75rem; /* 12px */ --stk-space-4: 1rem; /* 16px */ --stk-space-6: 1.5rem; /* 24px */ --stk-space-8: 2rem; /* 32px */ --stk-space-10: 2.5rem; /* 40px */ --stk-space-12: 3rem; /* 48px */ --stk-space-16: 4rem; /* 64px */ --stk-space-20: 5rem; /* 80px — section padding */ /* Border Radius */ --stk-radius-sm: 0.25rem; --stk-radius-md: 0.5rem; --stk-radius-lg: 0.75rem; --stk-radius-xl: 1rem; --stk-radius-full: 9999px;}Utility Classes
/* Section */.stk-section /* section padding */.stk-section--sm /* smaller padding */.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 */