Design Tokens

CSS custom properties (--ci-*) ที่ใช้ใน Teacher และ Admin portal สลับ portal เพื่อดูว่า token ไหนเปลี่ยน

Live Preview

component ด้านล่างใช้ CSS variable จริง — สลับ portal ด้านบนเพื่อดูการเปลี่ยนแปลง

school Header Bar border: 3px solid var(--ci-brand)

check_circle active --ci-brand: ...

รายงานสรุป

ความคืบหน้า62%

นักเรียนทั้งหมด

ส่งแล้ว

รอดำเนินการ

Sidebar ใช้ --sb-bg: var(--ci-brand)

Brand

เปลี่ยนค่าตาม portal — Teacher ใช้ purple, Admin ใช้ blue

--ci-brand #4A235A สีหลัก — ปุ่ม, link, active state

--ci-brand-hover #3a1b47 hover ของปุ่มสี brand

--ci-brand-soft #f5eff7 chip / badge / icon background

--ci-brand-tint #eadff0 panel header background

--ci-brand-muted #7a5688 secondary brand — sub-actions, link

--ci-brand-border #c5a0d0 border ที่ใช้สี brand

Ink & Text

สีตัวอักษร

--ci-ink สีตัวอักษรหลัก — body, headings

#2d1736

--ci-text สีตัวอักษรทั่วไป (shared)

#1f2937

--ci-muted สีตัวอักษร secondary / placeholder (shared)

#64748b

Borders

เส้น border และ divider

--ci-line border ทั่วไป

#d9c8de

--ci-line-soft border ที่อ่อนกว่า — card, input

#eee4f1

Backgrounds

พื้นหลังหน้าและ component

--ci-page-bg พื้นหลังทั้งหน้า (shared)

#f7fbff

--ci-header-bg พื้นหลัง header bar (shared)

#f7fbff

--ci-surface พื้นหลัง card / panel / input (shared)

#ffffff

--ci-surface-muted พื้นหลัง surface รอง

#f8fafc

Header Chrome

Teacher = 3px brand border, Admin = 1px grey

--ci-header-border สีเส้นขีดใต้ header

var(--ci-brand)

--ci-header-border-width ความหนาเส้นขีดใต้ header

3px

Teacher

Header

Admin

Header

Semantic / Status

สีสำหรับ success, warning, accent — ส่วนใหญ่เหมือนกันทั้ง 2 portal

--ci-success สีข้อความ / icon สำเร็จ (shared)

#2f8a4f

--ci-success-soft พื้นหลัง badge สำเร็จ

#f3f8f4

--ci-warning accent สีเหลือง (shared)

#c59a17

--ci-cyan accent สีฟ้าเขียว (shared)

#13a3b8

--ci-cyan-soft พื้นหลัง cyan (shared)

#ecfeff

--ci-blue accent สีน้ำเงิน indigo (shared)

#1d4ed8

--ci-blue-soft พื้นหลัง blue (shared)

#eff6ff

Neutral Scale

Slate scale — เหมือนกันทุก portal ไม่มี override

#f8fafc

#f1f5f9

#e2e8f0

#94a3b8

#64748b

#475569

#334155

#020617

50

100

200

400

500

600

700

900

Shadows

ค่าเงาปรับตาม portal (tinted ตามสี brand)

--ci-shadow-soft เงาเบา — ปุ่ม, input

--ci-shadow-card เงาปานกลาง — card, dropdown

--ci-shadow-drawer เงาหนัก — drawer / slide panel

Sidebar Tokens (--sb-*)

component-scoped tokens — defined on .collab-sidebar ใน collab.css เปลี่ยน theme sidebar โดยไม่ต้องแก้ component

--sb-bg var(--ci-brand) พื้นหลัง sidebar

--sb-bg-hover rgba(255,255,255,0.09) hover state ของ nav item

--sb-bg-active rgba(255,255,255,0.15) active state ของ nav item

--sb-text rgba(255,255,255,0.92) สีตัวอักษรหลักใน sidebar

--sb-text-sub rgba(255,255,255,0.52) สีตัวอักษร secondary

--sb-text-label rgba(255,255,255,0.36) สีหัวข้อกลุ่ม section label

--sb-icon-bg rgba(255,255,255,0.10) พื้นหลัง icon ปกติ

--sb-icon-active rgba(255,255,255,0.18) พื้นหลัง icon เมื่อ active

--sb-border rgba(255,255,255,0.12) เส้น divider และ border

--sb-chip-bg rgba(255,255,255,0.07) พื้นหลัง room sub-item chip

แก้ค่า Token

School CI (Collab) open_in_new /prototype/css/tokens.css แก้ .collab-portal { } — inject CI brand ของโรงเรียน ไม่กระทบ core system Admin open_in_new /prototype/css/admin.css แก้ .admin-portal { } — a-chieve core blue brand Sidebar (--sb-*) open_in_new /prototype/css/collab.css แก้ .collab-sidebar { } เพื่อ retheme sidebar component