โครงสร้าง Dynamic Color และ Design Tokens สำหรับนักพัฒนา

-- ===================================================================
-- TIER 1: REFERENCE TOKENS (ค่าสีดิบตาม Palette/HCT Tonal Scale)
-- เก็บค่าสีพื้นฐานที่สุด (เช่น $0-100$ ของสีหลัก)
CREATE TABLE reference_tokens (
    token_name VARCHAR(50) PRIMARY KEY, -- เช่น 'blue-500', 'red-100'
    hex_value VARCHAR(7) NOT NULL,       -- เช่น '#123456'
    tone_level INTEGER NOT NULL          -- ระดับความเข้ม (0-100)
);

COMMENT ON TABLE reference_tokens IS 'ชั้นที่ 1: ค่าสีดิบที่ถูกกำหนดไว้ล่วงหน้า (Raw Palette Values)';

-- ===================================================================
-- TIER 2: SEMANTIC TOKENS (ความหมายและบทบาทตามบริบท UI & Mode)
-- กำหนดว่าค่าสีใดจะใช้แทนบทบาทใด (เช่น 'primary', 'background-surface')
CREATE TABLE semantic_tokens (
    context_key VARCHAR(50) PRIMARY KEY, -- เช่น 'primary', 'surface-background'
    light_mode_token_ref VARCHAR(50) REFERENCES reference_tokens(token_name),
    dark_mode_token_ref VARCHAR(50) REFERENCES reference_tokens(token_name)
);

COMMENT ON TABLE semantic_tokens IS 'ชั้นที่ 2: การแมปความหมายของสีตามโหมด (Light/Dark Mode)';

-- ===================================================================
-- TIER 3: COMPONENT TOKENS (การใช้งานเฉพาะจุด)
-- กำหนดการใช้งานสุดท้ายของส่วนประกอบ UI (เช่น ปุ่ม, แถบนำทาง)
CREATE TABLE component_tokens (
    component_name VARCHAR(50) PRIMARY KEY, -- เช่น 'button-primary', 'nav-active'
    semantic_token_ref VARCHAR(50) REFERENCES semantic_tokens(context_key), -- อ้างอิงจาก Tier 2
    fallback_hex VARCHAR(7)
);

COMMENT ON TABLE component_tokens IS 'ชั้นที่ 3: การกำหนดค่าสีสุดท้ายสำหรับส่วนประกอบ UI ที่เฉพาะเจาะจง';

-- 1. ค้นหา Semantic Token สำหรับ 'primary' ใน Dark Mode
WITH primary_semantic AS (
    SELECT dark_mode_token_ref FROM semantic_tokens WHERE context_key = 'primary'
)
-- 2. ดึงค่าสีดิบ (Hex Value) จาก Token Reference
SELECT
    rt.hex_value AS final_color_hex
FROM
    reference_tokens rt
JOIN
    primary_semantic ps ON rt.token_name = ps.dark_mode_token_ref;

-- ตัวอย่างผลลัพธ์: '#B3E0FF' (ค่าสีที่ถูกต้องสำหรับ Primary Button ใน Dark Mode)