توکن‌ها

مرور

منبع حقیقت پیوند چند فایل داده است، نه کد و نه فایل طراحی. از همان فایل‌ها هم متغیرهای CSS ساخته می‌شود، هم تایپ‌های تایپ‌اسکریپت، هم فایلی که به ابزار طراحی داده می‌شود. اگر روزی اپ موبایل بسازیم، از همان منبع خروجی می‌گیرد.

سه لایه

1. مرجع (pv.ref) — مقدارهای خام و بی‌معنا: پله‌های پالت، اندازه‌های خام. به‌ندرت عوض می‌شوند.
2. سیستم (pv.sys) — معنا و نقش: «رنگ اصلی»، «فاصله‌ی بین بخش‌ها». تم روشن و تیره اینجا از هم جدا می‌شوند.
3. کامپوننت (pv.comp) — فقط وقتی یک جزء استثنا لازم دارد.

کد همیشه فقط لایه‌ی سیستم را مصرف می‌کند. همین یک قاعده است که تم تیره و تغییر برند در آینده را به یک کار یک‌روزه تبدیل می‌کند.

قاعده‌ها

1. هیچ کامپوننتی مستقیم لایه‌ی مرجع را نمی‌خواند.
2. هیچ مقدار ثابتی در کد نوشته نمی‌شود؛ آزمون خودکار رنگ و اندازه‌ی دستی را رد می‌کند.
3. هر تغییر توکن یک نسخه و یک ثبت در تغییرات دارد.

استفاده

.card {
  background: var(--pv-sys-color-surface-container-low);
  color: var(--pv-sys-color-on-surface);
  border-radius: var(--pv-sys-shape-corner-lg);
  padding: var(--pv-sys-space-5);
}

بکن / نکن

color: var(--pv-sys-color-on-surface);

color: #161c20;

مرتبط

• نقش‌های رنگ
• شروع برای توسعه‌دهندگان