טוקנים סמנטיים מול טוקנים גולמיים
טוקן סמנטי הוא טוקן עיצוב שנקרא על שם התפקיד שהוא ממלא ולא על שם הערך שהוא מחזיק, למשל --color-text-danger במקום --color-red-600. בדרך כלל הוא מפנה לטוקן גולמי, וכך אפשר לשנות את הערך שמאחוריו בלי לשנות שם של אף דבר שמשתמש בו.
שתי השכבות
לרוב מערכות הטוקנים הבשלות יש לפחות שתי שכבות.
טוקנים גולמיים (נקראים גם raw, גלובליים או ליבה) מחזיקים את הערכים עצמם. הם נקראים בשמות תיאוריים:
--red-600: #DC2626;
--blue-500: #2563EB;
--space-4: 16px;טוקנים סמנטיים מחזיקים החלטות לגבי המקום שבו הערכים האלה משמשים. הם נקראים לפי תפקיד:
--color-text-danger: var(--red-600);
--color-action-primary: var(--blue-500);
--space-card-padding: var(--space-4);רכיבים מפנים לשכבה הסמנטית. כמעט שום דבר לא צריך להפנות ישירות לטוקן גולמי.
למה העקיפה משתלמת
מיתוג מחדש מפסיק להיות כתיבה מחדש. משנים לאן --color-action-primary מצביע וכל הכפתורים נגררים אחריו. אילו הרכיבים היו מפנים ל---blue-500, הייתם עורכים כל רכיב בנפרד, ואלה שהשתמשו בכחול מסיבה שאינה קשורה לפעולות היו נשברים.
ערכות נושא הופכות לאפשריות. מצב כהה הוא אותם שמות סמנטיים שמצביעים על טוקנים גולמיים אחרים. בלי השכבה הסמנטית אין למה להפנות מחדש.
הקוד אומר למה הוא מתכוון. --color-text-danger מסביר לקורא למה הערך שם. --red-600 לא אומר לו כלום, וזה משמעותי במיוחד כשמישהו צריך להחליט אם בטוח לשנות אותו.
הטעות הרגילה
צוותים מדלגים על השכבה הסמנטית כי ביום הראשון היא מרגישה כמו בירוקרטיה, כשיש אחד־עשר צבעים וכולם זוכרים למה כל אחד מהם משמש.
המחיר מופיע במיתוג מחדש הראשון, במצב הכהה הראשון או בסבב הנגישות הראשון, ועד אז הטוקנים הגולמיים מופיעים במאות מקומות. הוספת שכבה סמנטית בדיעבד היא עבודה מכנית אך מייגעת שאף אחד לא מתכנן.
שכבה שלישית
מערכות גדולות מוסיפות טוקנים ברמת הרכיב: --button-primary-background שמצביע על --color-action-primary שמצביע על --blue-500.
זה עוזר כשרכיב באמת צריך לסטות, ועולה בעקיפה כשלא. שתי שכבות הן ברירת המחדל הנכונה; הוסיפו את השלישית כשמופיע מקרה אמיתי, לא מראש.
איפה Flash DSM נכנס
מערכות שנוצרות מגיעות עם שתי השכבות מוכנות: סולמות גולמיים, ותפקידים סמנטיים לטקסט, רקע, מסגרת ומצבים שמפנים אליהם, בבהיר ובכהה.