Design Tokens
ตัวแปรกลางของ StackUI ใน packages/core/css/stackui-tokens.css
แก้ theme หลักที่ packages/core/css/stackui-tokens.css เพียงจุดเดียว
stackui-bridge.css จะ map token เหล่านี้เข้า Bootstrap components
Brand colors
| Variable | Default |
|---|---|
--stk-primary | #57CC33 |
--stk-primary-light | #6fd94f |
--stk-primary-dark | #3fa322 |
--stk-secondary | #000000 |
--stk-accent | #57CC33 |
ถ้าแก้สี ต้องแก้ค่า RGB ที่สัมพันธ์กันด้วย เช่น
--stk-primary-rgb: 87, 204, 51 เพื่อให้ focus ring และ Bootstrap utilities
ที่ใช้ rgba() แสดงผลถูกต้อง
Typography
:root {
--stk-font-heading: "Noto Sans Thai", sans-serif;
--stk-font-body: "Noto Sans Thai", sans-serif;
--stk-font-mono: "JetBrains Mono", monospace;
--stk-text-xs: 0.75rem;
--stk-text-base: 1rem;
--stk-text-2xl: 1.5rem;
--stk-text-5xl: 3rem;
}Layout and surfaces
:root {
--stk-section-py: 5rem;
--stk-section-py-sm: 3rem;
--stk-container-max: 1200px;
--stk-container-px: 1.5rem;
--stk-border-color: var(--stk-gray-200);
--stk-radius-md: 0.5rem;
--stk-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}Widget อาจมี spacing และ style เฉพาะของตัวเอง แต่สีแบรนด์ต้องอ้าง
var(--stk-primary) และ CSS ทุก rule ต้องอยู่ใต้ scope .stk-<id>