Token Architecture

Token ทั้งหมดของ B.Grimm อยู่ในไฟล์เดียว: tokens/bgrimm.tokens.json ที่ root ของ repo ppbgrimm/brand-guideline (ดาวน์โหลดสำเนาได้ที่ bgrimm.tokens.json) — เป็น single source of truth ที่ Figma, Tailwind, MUI, และ CSS variables ดึงค่าไปใช้ทั้งหมด ห้ามพิมพ์ hex/px ซ้ำมือในโค้ดโดยตรง

โครงสร้าง 3 ชั้น

Tier 1: Global   →  Tier 2: Alias (semantic)   →  Tier 3: Component
orange.500           color.primary                 button.bg-primary
   #FF6727        →      = orange.500          →       = color.primary

Tier 1 — Global Token

ค่าดิบ (raw value) ไม่มีความหมายเชิงบทบาท — อ้างอิงจาก Color Palette ตรงๆ

"global": {
  "color": {
    "orange": { "400": "#FF9956", "500": "#FF6727", "700": "#C43400" },
    "grey":   { "100": "#EBECF0", "400": "#989AA5", "600": "#63666F", "900": "#202124" }
  }
}

Tier 2 — Alias Token (Semantic)

ตั้งชื่อตามบทบาทไม่ใช่หน้าตา — ชั้นนี้คือชั้นที่ component ควรอ้างอิงถึงเป็นหลัก เพราะเปลี่ยน dark mode/theme ได้โดยไม่ต้องแก้ component

"alias": {
  "color": {
    "primary": "{global.color.orange.500}",
    "text": "{global.color.grey.600}",
    "muted": "{global.color.grey.400}"
  }
}

Tier 3 — Component Token

ผูกกับ component เฉพาะจุด อ้างอิง alias token อีกที — ใช้เมื่อ component นั้นต้องการ override ที่เจาะจงกว่าระดับ semantic

"component": {
  "button": {
    "bg-primary": "{alias.color.primary}",
    "bg-primary-hover": "{alias.color.primary-hover}"
  }
}

Naming Convention

bgrimm.<category>.<name>.<scale?> เช่น:

• bgrimm.color.primary.500
• bgrimm.space.4
• bgrimm.radius.md

ชื่อต้องตรงกับ path ใน bgrimm.tokens.json เป๊ะ เพื่อให้ script sync (Figma Tokens Studio, Style Dictionary) แปลงชื่อไป-กลับได้โดยไม่ต้อง mapping เพิ่ม

ไฟล์ต้นทาง

brand-guideline/
├── tokens/
│   └── bgrimm.tokens.json   ← source of truth
├── docs/                     ← เนื้อหาเว็บไซต์นี้
└── src/

ดูรายละเอียดแต่ละหมวดที่ Color Tokens, Typography Tokens, Spacing, Radius & Elevation และนโยบายแก้ไขที่ Versioning