رفتن به محتوا
پیوند
v0.1.0

نقش‌های رنگ

کد هیچ‌وقت یک رنگ را با نامِ رنگ صدا نمی‌زند؛ با نقشش صدا می‌زند. این صفحه فهرست نقش‌هاست و می‌گوید هر کدام کجا به کار می‌رود.

پایداراز نسخه‌ی ۰٫۱٫۰به‌روزرسانی

روی یک خانه بروید تا نام توکن، کد رنگ و کنتراستش را ببینید.

مرور

پیوند واژگان نقش‌های رنگ را از متریال دیزاین ۳ می‌گیرد: هر رنگِ پرکننده یک رنگِ روی خود دارد که با پیشوند on- نامیده می‌شود. یعنی وقتی primary را به‌عنوان زمینه می‌گذارید، متن روی آن حتماً on-primary است و کنتراستش از پیش سنجیده شده.

دو نقش از خودِ پیوند به این واژگان اضافه شده‌اند: brand و action. این‌ها دقیقاً همان دو رنگ برند مؤسسه‌اند و فقط به‌عنوان سطحِ پر به کار می‌روند، هرگز به‌عنوان رنگ متن.

قاعده‌ها

  1. هر پرکننده با on-ی خودش می‌آید. اگر ترکیبی در جدول پایین نیست، ساخته نشده.
  2. brand و action هرگز رنگ متن، خط یا آیکون نیستند.
  3. کهربایی کمیاب است: در هر نما فقط یک اقدام اصلی می‌تواند action بگیرد.
  4. کد فقط لایه‌ی pv.sys را مصرف می‌کند؛ خواندن مستقیم پالت‌ها ممنوع است.
  5. صحنه می‌تواند رنگی باشد، کار باید آرام باشد: سطح‌های پرِ برند فقط بالای صفحه‌ها می‌آیند، نه زیر متن خواندنی.

توکن‌ها

مقدارها از فایل‌های توکن ساخته شده‌اند؛ این جدول دست‌نویس نیست.

توکنروشنتیرهتوضیح
--pv-sys-color-surface #F3FBFF #0E1418سطح
--pv-sys-color-surface-container-low #ECF5FA #161C20ظرف کم
--pv-sys-color-surface-container #E6EFF4 #1A2024ظرف
--pv-sys-color-primary #00658B #77D1FFاصلی
--pv-sys-color-primary-container #C0E8FF #004C69ظرف اصلی
--pv-sys-color-secondary #7D5700 #FDB933دوم
--pv-sys-color-secondary-container #FFDEA9 #5F4100ظرف دوم
--pv-sys-color-error #B3261E #FFB4A8خطا
--pv-sys-color-error-container #FFDAD4 #930003ظرف خطا
--pv-sys-color-outline #687A84 #81939Eخط
--pv-sys-color-brand #29AAE1 #29AAE1برند
--pv-sys-color-action #FDB933 #FDB933اقدام

بکن / نکن

بکن

سطح brand با متن on-brand؛ کنتراست 6.48:1 قبول

چرا (برای همه): متن روی سطح برند باید سنجیده باشد، نه حدسی.

نکن

متن آبی برند روی سطح روشن؛ کنتراست 2.53:1 رد

چرا (برای همه): آبی برند روی سطح روشن برای متن رد می‌شود.

دسترس‌پذیری

هر جفت نقش و on-ی آن در زمان ساخت سنجیده می‌شود و اگر از حد WCAG 2.2 سطح AA پایین‌تر بیفتد، بیلد رد می‌شود. تنها استثنا عمدی است: brand روی سطح روشن، که دقیقاً به همین دلیل هرگز رنگ متن نیست.

رنگ هیچ‌وقت تنها نشانه نیست: وضعیت‌ها با شکل و واژه هم نشان داده می‌شوند، نه فقط با رنگ.