Bun.color: แปลง design token หลายรูปแบบโดยไม่เขียน parser สีเอง

ไฟล์ design token มักรับสีหลายรูปแบบ ทั้ง #52B788, rgb(...) หรือชื่อสี ถ้าแต่ละสคริปต์เขียน parser ของตัวเอง ผลลัพธ์จะต่างกันตาม edge case ครับ Bun.color อ่านค่าสีแบบ CSS แล้วแปลงเป็น output ที่กำหนด เช่น hex, rgba หรือค่าตัวเลขได้

WHY: normalize ที่ขอบระบบ

การ normalize คือแปลงอินพุตหลายสำเนียงให้เป็นภาษากลาง เหมือนร้านสีรับทั้งรหัสหน้ากระป๋องและตัวอย่างสี แต่ก่อนส่งเข้าเครื่องผสมต้องเปลี่ยนเป็นสูตรเดียวกัน วิธีนี้ทำให้ส่วนถัดไปของ pipeline ไม่ต้องเดาว่า string ที่ได้รับเป็น HEX ตัวใหญ่, RGB ที่มีช่องว่าง หรือชื่อสี

ค่าที่ parse ไม่ได้คืน null จึงต้องตรวจตรงขอบระบบ อย่าปล่อย null ไหลไปจน renderer พังในขั้นตอนท้าย เพราะ error จะชี้ไกลจากต้นเหตุ

HOW: validate แล้วคืนรูปแบบเดียว

function normalizeColor(input: string): string {
  const normalized = Bun.color(input, "hex");
  if (normalized === null) {
    throw new TypeError(`invalid color token: ${input}`);
  }
  return normalized;
}

if (normalizeColor("#52B788") !== "#52b788") {
  throw new Error("hex normalization failed");
}
if (normalizeColor("rgb(14, 159, 98)") !== "#0e9f62") {
  throw new Error("rgb conversion failed");
}
if (Bun.color("definitely-not-a-color", "hex") !== null) {
  throw new Error("invalid input must return null");
}

ตัวอย่างตั้งใจเก็บ output เป็น HEX ตัวพิมพ์เล็ก เพื่อให้ diff ของ token คงที่ ถ้าต้องรักษา alpha ให้เลือก rgba หรือ hexa ตาม contract อย่าแปลงเป็น hex แล้วคาดว่า transparency ยังอยู่ครบ

ขอบเขตที่ไม่ควรปนกัน

Bun.color ช่วย parse และ convert สี ไม่ได้ตรวจ contrast, semantic role หรือความสอดคล้องกับ design system สีที่แปลงได้อาจยังอ่านยากบนพื้นหลังจริง จึงควรแยกขั้นตอนเป็น parse → normalize → policy validation เช่นคำนวณ contrast และจำกัด palette

ความต้องการ	แนวทาง
ทำ snapshot ให้ diff คงที่	normalize เป็น hex/hexa
ส่งเข้า Canvas หรือ CSS ที่ต้องเห็น alpha	ใช้ rgba
เช็ก token ผิดรูป	ตรวจ null และหยุดพร้อมชื่อ token
เช็ก WCAG contrast	ใช้ตัวตรวจ contrast เพิ่ม ไม่ใช่ Bun.color อย่างเดียว

Recap

• normalize สีที่ขอบ pipeline
• ตรวจ null ทันทีเมื่อ parse ไม่ได้
• เลือก output ที่รักษา alpha ตาม contract
• แยกการแปลงสีออกจากกฎ contrast และ semantic token