สถาปัตยกรรมโทเคนหลายธีมและหลายแบรนด์

ธีมจะเปลี่ยนโหมดสีของแบรนด์เดียวกัน (ผลิตภัณฑ์เดียวกันในเวอร์ชันสว่างและมืด) ส่วนแบรนด์คืออัตลักษณ์ด้านภาพที่แตกต่างกัน โดยใช้คอมโพเนนต์จากระบบการออกแบบเดียวกัน แต่แสดงผลด้วยสี รูปแบบตัวอักษร และระยะห่างที่ต่างกันเพื่อรองรับผลิตภัณฑ์หรือลูกค้าที่แตกต่างกัน ทั้งสองแบบใช้สถาปัตยกรรมโทเค็นเดียวกัน แต่ทำงานในระดับนามธรรมที่ต่างกัน

โทเค็นพื้นฐานคือชุดค่าดิบทั้งหมดที่ระบบมีให้ใช้ ซึ่งรวมถึงทุกระดับของสี (color-blue-50 ถึง color-blue-900) หน่วยระยะห่างทุกหน่วย และขนาดตัวอักษรทุกขนาด โทเค็นพื้นฐานจะไม่ถูกใช้โดยตรงในคอมโพเนนต์ แต่จะถูกอ้างอิงโดยโทเค็นเชิงความหมายเท่านั้น ชุดสีถูกกำหนดเพียงครั้งเดียวและใช้ร่วมกันในทุกธีมและทุกแบรนด์

โทเค็นเชิงความหมายแสดงเจตนา เช่น color-background-page, color-text-primary และ color-action-primary โทเค็นเชิงความหมายแต่ละรายการจะอ้างอิงค่าของโทเค็นพื้นฐานที่เหมาะสมกับธีมปัจจุบัน คอมโพเนนต์จะสร้างขึ้นโดยอ้างอิงโทเค็นเชิงความหมายเท่านั้น ชั้นนี้คือจุดที่เกิดการกำหนดธีม

ในธีมสว่าง: color-background-page อ้างอิง color-white, color-text-primary อ้างอิง color-gray-900 และ color-action-primary อ้างอิง color-blue-500 การแมปเหล่านี้กำหนดไว้ในไฟล์โทเค็นเฉพาะธีม ซึ่งแทนที่ชั้นเชิงความหมายสำหรับบริบทสว่าง

ในธีมมืด: color-background-page อ้างอิง color-gray-950, color-text-primary อ้างอิง color-gray-50 และ color-action-primary อ้างอิง color-blue-400 (สว่างขึ้นเล็กน้อยเพื่อให้ตัดกับพื้นหลังมืด) มีเพียงการแมปเชิงความหมายที่เปลี่ยนแปลง ส่วนชุดสีพื้นฐานและคอมโพเนนต์ทั้งหมดไม่เปลี่ยนแปลง

แบรนด์ A ใช้สีฟ้าเป็นสีหลัก (color-action-primary: {color-blue-500}) ส่วนแบรนด์ B ใช้สีเขียว (color-action-primary: {color-green-500}) คอมโพเนนต์ปุ่มอ่านค่า var(--color-action-primary) โดยไม่รับรู้เลยว่าแบรนด์ใดกำลังใช้งานอยู่ การแทนที่สำหรับแบรนด์จะเปลี่ยนเฉพาะการแมปโทเค็นเชิงความหมาย ไม่เคยเปลี่ยนโค้ดคอมโพเนนต์

คุณสมบัติ CSS แบบกำหนดเองทำให้การสลับธีมขณะทำงานเป็นเรื่องง่าย เก็บธีมปัจจุบันไว้ในแอตทริบิวต์ข้อมูลด้วย document.documentElement.setAttribute('data-theme', 'dark') กฎ CSS จะแทนที่โทเค็นเชิงความหมายภายใต้ [data-theme="dark"] เบราว์เซอร์จะประมวลผลการอ้างอิง var() ทั้งหมดให้เป็นค่าใหม่ทันที โดยไม่ต้องเรนเดอร์ใหม่ด้วย JavaScript

สำหรับแบรนด์ต่าง ๆ ที่ให้บริการเป็นการนำไปใช้งานแยกกัน ให้ใช้การกำหนดธีมขณะสร้าง: สร้างไฟล์โทเค็น CSS แยกสำหรับแต่ละแบรนด์ด้วย Style Dictionary แล้วโหลด CSS ของแบรนด์ที่ถูกต้องเมื่อแอปพลิเคชันเริ่มทำงาน แนวทางนี้เหมาะเมื่อกำหนดแบรนด์ในเวลานำไปใช้งาน (โดเมน โดเมนย่อย หรืออินสแตนซ์แบบไวท์เลเบลที่แตกต่างกัน) ไม่ใช่เมื่อผู้ใช้โต้ตอบ

ระบบที่รองรับหลายแบรนด์และหลายธีมต้องใช้เมทริกซ์สองมิติ ได้แก่ แบรนด์ A สว่าง, แบรนด์ A มืด, แบรนด์ B สว่าง และแบรนด์ B มืด คุณสมบัติ CSS แบบกำหนดเองจัดการเรื่องนี้ได้อย่างเหมาะสมด้วยตัวเลือกที่ซ้อนกัน: [data-brand="a"][data-theme="dark"] จะแทนที่โทเค็นเชิงความหมายสำหรับการจับคู่เฉพาะนั้น การจับคู่สี่แบบใช้บล็อก CSS สี่บล็อก ไม่ใช่โค้ดเบสสี่ชุด

เมื่อระบบการออกแบบพัฒนาไป โทเค็นจะถูกเพิ่ม เปลี่ยนชื่อ หรือนำออก ควบคุมเวอร์ชันของโทเค็นในที่เก็บเดียวกับโค้ด เมื่อต้องเลิกใช้โทเค็น ให้คงชื่อเดิมไว้เป็นนามแฝงที่ชี้ไปยังชื่อใหม่เป็นเวลาหนึ่งรอบการเผยแพร่ เพิ่มความคิดเห็นแจ้งการเลิกใช้ และอัปเดตโค้ดที่เรียกใช้ ประสานการเปลี่ยนแปลงโทเค็นระหว่างฝ่ายออกแบบกับฝ่ายวิศวกรรมผ่านบันทึกการเปลี่ยนแปลงที่มีโครงสร้าง

การกำกับดูแลกำหนดว่าใครสามารถเพิ่มหรือเปลี่ยนแปลงโทเค็นได้ และต้องใช้กระบวนการทบทวนแบบใด โทเค็นพื้นฐานต้องได้รับการอนุมัติจากทีมออกแบบ โทเค็นเชิงความหมายต้องผ่านการทบทวนทั้งจากทีมออกแบบและทีมวิศวกรรม ส่วนโทเค็นของคอมโพเนนต์สามารถให้เจ้าของคอมโพเนนต์เป็นผู้จัดการได้ หากไม่มีการกำกับดูแลนี้ โทเค็นที่ซ้ำกันจะเกิดขึ้น และการรับประกันว่าเป็น "แหล่งข้อมูลจริงเพียงแหล่งเดียว" จะไม่เป็นจริงอีกต่อไป

เหตุใดคอมโพเนนต์จึงควรอ้างอิงโทเค็นเชิงความหมายแทนโทเค็นพื้นฐาน

ธีมจะเปลี่ยนโหมดสีภายในแบรนด์ ส่วนแบรนด์คืออัตลักษณ์ทางภาพที่แตกต่างกัน โทเค็นพื้นฐานคือชุดสีดิบ ขณะที่โทเค็นเชิงความหมายสื่อความหมายและช่วยให้กำหนดธีมได้ คอมโพเนนต์จะใช้เฉพาะโทเค็นเชิงความหมายเท่านั้น โหมดมืดและการเขียนทับของแบรนด์จะเปลี่ยนเฉพาะการแมปโทเค็นเชิงความหมาย ส่วนคอมโพเนนต์จะไม่เปลี่ยนแปลง การกำหนดธีมขณะทำงานใช้คุณสมบัติแบบกำหนดเองของ CSS ร่วมกับตัวเลือก [data-theme] ส่วนการกำหนดแบรนด์ขณะสร้างจะสร้าง CSS แยกสำหรับแต่ละแบรนด์ การกำกับดูแลโทเค็นและการจัดการเวอร์ชันช่วยให้ระบบมีความสอดคล้องเมื่อมีการพัฒนา