שיעור 1: Design Tokens — מערכים קשיחים למערכת טוקנים
כל מסך יכול לבחור צבע, מרווח וגופן ש'נראים טוב' בעצמו — אבל אחרי עשרות מסכים ההבדלים הקטנים האלה מצטברים: כחול קצת שונה כאן, ריווח קצת אחר שם, עד שהמוצר כולו מרגיש לא עקבי. ואז מגיע הרגע שבו צריך לשנות את צבע המותג, או להוסיף Dark Mode — ומתברר שהצבע כתוב ב-23 קבצים שונים בלי שום מקום אחד לתקן. השיע
טוקן הוא כמו כרטיס מתכון לצבע במעבדה: כותבים פעם אחת 'סגול המותג = החומר הזה', ואז כל מי שצריך את הצבע מבקש את הכרטיס במקום לנחש את התערובת מחדש.
- design token
- החלטת עיצוב בעלת שם — צבע, מרווח או רדיוס — שנשמרת במקום אחד ומקבלת הפניה מכל מקום, במקום ערך קשיח שחוזר על עצמו.
- Tailwind theme
- האובייקט `theme` בתוך `tailwind.config.ts` שבו מגדירים את הטוקנים של הפרויקט — Tailwind מייצר מהם את ה-utility classes.
- צבע סמנטי
- טוקן ששמו מתאר את התפקיד ולא את הגוון — `brand` או `danger` במקום `purple-500` — כך שהחלפת הגוון לא דורשת לשנות שמות בקוד.
- ערך שרירותי
- תחביר של Tailwind כמו `bg-[#6c5ce7]` שעוקף את ה-theme ומזריק ערך קשיח ישירות ב-class — הדרך המהירה שמחזירה אותך לבעיה שטוקנים פותרים.
