โทเค็นใน Tailwind, CSS Variables และ CSS-in-JS

เอาต์พุตแพลตฟอร์ม CSS ของสไตล์ดิกชันนารีจะสร้างไฟล์พร็อพเพอร์ตี CSS แบบกำหนดเอง: --color-primary-500: #3b82f6; --spacing-4: 16px; และอื่น ๆ ตัวแปรเหล่านี้กำหนดไว้บน :root จึงพร้อมใช้งานทั่วทั้งระบบ นี่คือรากฐานสำหรับการนำโทเค็นทั้งหมดไปใช้ในแอปพลิเคชัน

นำเข้าไฟล์โทเค็น CSS ที่สร้างขึ้นในสไตล์ชีตส่วนกลางหรือคอมโพเนนต์เค้าโครงราก: @import './tokens/tokens.css' ใน Next.js ให้นำเข้าไฟล์นี้ใน app/layout.tsx หรือ styles/globals.css เมื่อนำเข้าแล้ว กฎ CSS และคอมโพเนนต์ทุกส่วนในแอปพลิเคชันจะสามารถอ้างอิงพร็อพเพอร์ตีแบบกำหนดเองเหล่านี้ได้

อ้างอิงตัวแปร CSS ในสไตล์ชีตของคอมโพเนนต์หรือโมดูล CSS: background-color: var(--color-primary-500); และ padding: var(--spacing-4); หากค่าโทเค็นเปลี่ยนแปลงในแหล่งข้อมูล JSON การสร้างสไตล์ดิกชันนารีใหม่จะอัปเดตไฟล์ CSS และคอมโพเนนต์ทั้งหมดที่ใช้ตัวแปรนั้นจะแสดงค่าใหม่โดยอัตโนมัติ

พร็อพเพอร์ตี CSS แบบกำหนดเองช่วยให้สลับธีมขณะทำงานได้ สำหรับโหมดมืด ให้แทนที่ค่าโทเค็นภายใต้ตัวเลือกธีม: [data-theme="dark"] { --color-background: #1a1a2a; --color-text: #f0f0f0; } การตั้งค่า document.documentElement.setAttribute('data-theme', 'dark') จะสลับค่าโทเค็นทั้งหมดทันทีโดยไม่ต้องโหลดหรือสร้างระบบใหม่

ขยายธีมของเทลวินด์ใน tailwind.config.js เพื่อใช้ค่าโทเค็น: theme: { extend: { colors: { primary: { 500: tokenOutput.color.primary[500] } } } } นำเข้าเอาต์พุต JS จากสไตล์ดิกชันนารีในการกำหนดค่าเทลวินด์ เพื่อให้คลาสเทลวินด์ (bg-primary-500) ใช้ค่าโทเค็นที่เป็นแหล่งอ้างอิงหลักอยู่เสมอ

สำหรับธีมเทลวินด์ที่สลับขณะทำงานได้ ให้กำหนดค่าสีโดยอ้างอิงตัวแปร CSS: 'primary': 'rgb(var(--color-primary-rgb) / <alpha-value>)' ตัวแปร CSS ของคุณต้องเก็บองค์ประกอบ RGB โดยไม่มีตัวครอบ rgb() (--color-primary-rgb: 59 130 246) จากนั้นเทลวินด์จะจัดการเครื่องมือปรับความทึบแสงให้อัตโนมัติ

ไลบรารี CSS ใน JavaScript ใช้ออบเจ็กต์ธีม JavaScript ให้ส่งเอาต์พุต JS จากสไตล์ดิกชันนารีเป็นค่าของตัวให้บริการธีม: <ThemeProvider theme={tokens}> คอมโพเนนต์จะเข้าถึงโทเค็นผ่าน const theme = useTheme() และ theme.color.primary[500] สไตล์ดิกชันนารีจะสร้างออบเจ็กต์โทเค็นที่มีชนิดข้อมูล ส่วนตัวให้บริการธีมจะกระจายออบเจ็กต์นั้น

ปลั๊กอิน stylelint-no-hardcoded-colors และกฎอีเอสลินต์แบบกำหนดเองสามารถบังคับไม่ให้มีค่าสีเลขฐานสิบหกที่กำหนดตายตัวในสไตล์ชีตหรือไฟล์คอมโพเนนต์ หากนักพัฒนาเขียน color: #3b82f6 แทน color: var(--color-primary-500) เครื่องมือตรวจสอบโค้ดจะแจ้งเตือน วิธีนี้ทำให้ระบบโทเค็นเป็นแหล่งที่มาของสีเพียงแห่งเดียว

เมื่อสร้างชื่อคลาสเทลวินด์แบบไดนามิกจากชื่อโทเค็นขณะทำงาน ระบบล้างคลาสของเทลวินด์อาจลบคลาสเหล่านั้น เพราะชื่อดังกล่าวไม่ปรากฏเป็นสตริงแบบคงที่ในแหล่งข้อมูล ให้เพิ่มรูปแบบคลาสแบบไดนามิกลงใน safelist ใน tailwind.config.js: safelist: [{ pattern: /bg-primary-/ }]

ปลั๊กอินโทเค็นของฟิกมาส่งออกค่าโทเค็นจากฟิกมาโดยตรงเป็นรูปแบบข้อมูลเจสันของสไตล์ดิกชันนารี เวิร์กโฟลว์มีดังนี้ นักออกแบบอัปเดตสีในตัวแปรของฟิกมา ส่งออกผ่านปลั๊กอิน บันทึกเจสันที่อัปเดตแล้ว สคริปต์ก่อนสร้างเรียกใช้สไตล์ดิกชันนารี และนำเอาต์พุต CSS กับ JS ที่อัปเดตแล้วไปใช้ในแอปรีแอกต์ การออกแบบและโค้ดจึงสอดคล้องกันอยู่เสมอ

พร็อพเพอร์ตี CSS แบบกำหนดเองจะมีขอบเขตอยู่ที่องค์ประกอบซึ่งกำหนดพร็อพเพอร์ตีและองค์ประกอบลูกหลานของมัน วิธีนี้ช่วยให้แทนที่ธีมในระดับคอมโพเนนต์ได้ เช่น คอมโพเนนต์การ์ดสามารถกำหนด --color-background: var(--color-surface-elevated) บนองค์ประกอบราก แล้วองค์ประกอบลูกหลานทั้งหมดจะใช้สีพื้นผิวยกระดับโดยไม่ต้องส่งพร็อพผ่านหลายระดับ

สไตล์ดิกชันนารีสร้างพร็อพเพอร์ตี CSS แบบกำหนดเองสำหรับการนำเข้าในระดับทั่วทั้งระบบ และสร้างออบเจ็กต์ JS สำหรับการผสานรวมกับเทลวินด์และ CSS ใน JavaScript ตัวแปร CSS ช่วยให้สลับธีมขณะทำงานได้ผ่านการแทนที่ด้วย [data-theme] เทลวินด์ขยายการกำหนดค่าด้วยค่าโทเค็นจากเอาต์พุต JS ส่วนการกำหนดธีมที่รองรับความทึบแสงให้กำหนดค่าเทลวินด์ให้อ้างอิงตัวแปร CSS แบบ RGB กฎตรวจสอบโค้ดช่วยบังคับให้ใช้สีจากโทเค็นเท่านั้น จึงป้องกันไม่ให้มีค่าที่กำหนดตายตัวในโค้ดเบส