Green Data

یک لایه انتزاعی‌تر از متغیرها: مدیریت Design Tokens

در درس‌های قبل این فصل، با Custom Properties، سازمان‌دهی سراسری/محلی، و تم‌بندی آشنا شدیم. حالا، در آخرین درس این فصل، وقتشه یک مفهوم بزرگ‌تر و مفهومی‌تر رو ببینیم: Design Tokens؛ ایده‌ای که فراتر از خود CSS می‌ره و به یک زبان مشترک بین طراحی و کد، برای مدیریت تمام تصمیمات بصری یک پروژه، تبدیل می‌شه.

Design Token چیست؟

Design Token (نشانه طراحی)، به کوچک‌ترین واحد قابل‌نام‌گذاری از یک تصمیم طراحی گفته می‌شه؛ مثل یک رنگ خاص، یک اندازه فاصله، یک شعاع گردی، یا یک مقدار زمان انیمیشن. تفاوت مفهومی Design Token با یک Custom Property معمولی اینه که Token، یک مفهوم مستقل از CSS‌ه؛ CSS Custom Properties، فقط یکی از راه‌های پیاده‌سازی این Tokenها در مرورگره، نه خود مفهوم Token.

چرا این تمایز مهم است؟

:root {
  --color-primary: #1a73e8;
  --spacing-md: 16px;
}

در یک پروژه بزرگ، همین دو مقدار (color-primary و spacing-md)، ممکنه نه‌فقط در CSS، بلکه در یک اپلیکیشن موبایل (که با زبان‌های دیگه‌ای مثل Swift یا Kotlin نوشته شده)، یا در فایل‌های طراحی (مثل Figma)، هم استفاده بشن. اگه این مقادیر رو، فقط داخل CSS تعریف کنیم، هماهنگ نگه داشتن‌شون بین این پلتفرم‌های مختلف، عملاً سخت یا غیرممکن می‌شه. مفهوم Design Tokens، دقیقاً برای حل همین مشکل شکل گرفته: تعریف این مقادیر، در یک منبع مرکزی و مستقل از پلتفرم (اغلب یک فایل JSON)، و بعد، تولید خودکار نسخه‌های مخصوص هر پلتفرم (از جمله CSS Custom Properties) از روی همون منبع واحد.

یک نمونه ساده از تعریف Token در قالب JSON

/* این یک فایل JSON فرضی است، نه CSS واقعی:
{
  "color": {
    "primary": { "value": "#1a73e8" },
    "text": { "value": "#202124" }
  },
  "spacing": {
    "md": { "value": "16px" }
  }
}
*/

در ابزارهای واقعی مدیریت Token (مثل Style Dictionary یا Tokens Studio)، این مقادیر، در یک فایل ساختاریافته (معمولاً JSON) تعریف می‌شن؛ و ابزار، خودش، از روی همین فایل، خروجی‌های مختلفی (فایل CSS با Custom Properties، فایل SCSS با متغیر، یا حتی فایل کد برای iOS/Android) تولید می‌کنه.

نقش CSS Custom Properties در این سیستم

/* خروجی تولیدشده از همان منبع Token */
:root {
  --color-primary: #1a73e8;
  --color-text: #202124;
  --spacing-md: 16px;
}

از دید یک توسعه‌دهنده وب، در نهایت، خروجی این سیستم، دقیقاً همون چیزیه که در طول این فصل، از پایه تا تم‌بندی، بررسی کردیم: مجموعه‌ای از CSS Custom Properties روی :root. یعنی، حتی اگه مستقیماً با ابزارهای Token Management کار نکنیم، همون اصولی که در این فصل یاد گرفتیم (نام‌گذاری معنایی، سازمان‌دهی Global/Component، تم‌بندی)، دقیقاً همون بنیادیه که یک سیستم Design Token واقعی، روش ساخته می‌شه.

دسته‌بندی رایج Tokenها

دسته	مثال
رنگ (Color)	color-primary، color-background
فاصله‌گذاری (Spacing)	spacing-sm، spacing-lg
تایپوگرافی (Typography)	font-size-h1، line-height-body
سایه (Shadow)	shadow-card، shadow-modal
زمان‌بندی (Motion)	duration-fast، easing-standard

Tokenهای سطح دوم (Semantic Tokens): پلی که در درس ۱۶-۵ هم دیدیم

:root {
  /* سطح اول: Token خام (Primitive) */
  --blue-500: #1a73e8;
  --gray-900: #202124;

  /* سطح دوم: Token معنایی (Semantic) */
  --color-primary: var(--blue-500);
  --color-text: var(--gray-900);
}

یکی از الگوهای پیشرفته‌تر در سیستم‌های Design Token، تفکیک بین Primitive Tokens (مقادیر خام، مثل یک رنگ دقیق در یک پالت) و Semantic Tokens (نام‌های نقش‌محور، مثل «رنگ اصلی» یا «رنگ متن»، که در درس قبل دیدیم). این ساختار دو سطحی، دقیقاً همون الگوی Global/Component که در درس ۱۶-۴ دیدیم رو، یک قدم جلوتر می‌بره: حالا حتی خود مقادیر «سراسری» (Semantic)، به یک لایه پایه‌ای‌تر (Primitive) وابسته‌ان؛ این یعنی، اگه بخوایم کل پالت رنگی رو تغییر بدیم، فقط لایه Primitive رو ویرایش می‌کنیم، و لایه Semantic (که بقیه پروژه بهش وابسته‌ست)، دست‌نخورده باقی می‌مونه.

ارتباط این مفهوم با آنچه در کل فصل دیدیم

اگه بخوایم این فصل رو در یک مسیر واحد ببینیم: در درس ۱۶-۱، یاد گرفتیم چطور یک متغیر تعریف کنیم؛ در ۱۶-۲، یاد گرفتیم چطور در برابر نبودش محافظت کنیم؛ در ۱۶-۳، فهمیدیم دقیقاً کجا در دسترسه؛ در ۱۶-۴، یاد گرفتیم چطور بین سراسری و محلی تمایز بذاریم؛ در ۱۶-۵، از این ساختار، برای ساخت تم‌های قابل‌تعویض استفاده کردیم؛ و حالا، در همین درس، دیدیم که همه این تکنیک‌ها، در واقع، پیاده‌سازی عملی یک مفهوم بزرگ‌تر و صنعتی به اسم Design Tokens هستن.

نکات مهم

Design Token، یک مفهوم مستقل از CSS است؛ CSS Custom Properties، فقط یکی از راه‌های پیاده‌سازی آن در مرورگر است.
در سیستم‌های حرفه‌ای، Tokenها اغلب در یک منبع مرکزی (مثل JSON) تعریف می‌شوند و به‌طور خودکار، به خروجی‌های مخصوص هر پلتفرم (از جمله CSS) تبدیل می‌شوند.
تفکیک Primitive Tokens (مقادیر خام) از Semantic Tokens (نام‌های نقش‌محور)، یک لایه انعطاف‌پذیری بیشتر، فراتر از ساختار ساده Global/Component، اضافه می‌کند.

اشتباهات رایج

تصور اینکه Design Token و CSS Custom Property دقیقاً یک مفهوم یکسان هستند؛ در حالی که اولی مفهومی و مستقل از پلتفرم است، دومی فقط یکی از پیاده‌سازی‌های ممکن آن.
ارجاع مستقیم Semantic Tokens به مقادیر خام، به‌جای Primitive Tokens، که هماهنگی بین پالت پایه و نام‌های نقش‌محور را دشوارتر می‌کند.

جمع‌بندی

Design Tokens، مفهومی فراتر از خود CSS هستند که کوچک‌ترین واحدهای تصمیمات طراحی (رنگ، فاصله، تایپوگرافی و مشابه‌ها) را، در یک منبع مرکزی و مستقل از پلتفرم، تعریف می‌کنند؛ CSS Custom Properties، یکی از خروجی‌های رایج این سیستم برای وب هستند. ساختار دو سطحی Primitive و Semantic Tokens، دقیقاً همان اصولی است که در این فصل، از تعریف پایه متغیرها تا سازمان‌دهی Global/Component و تم‌بندی، قدم‌به‌قدم دیدیم؛ و با این جمع‌بندی، فصل شانزدهم دوره را به پایان می‌رسانیم.

مدیریت Design Tokens