جفت رنگ متن و پس‌زمینه

سبک درست

کنش‌ها و وضعیت‌ها ته‌رنگ ملایم دارند و متن هم‌خانوادهٔ همان رنگ را نشان می‌دهند. مثل نشان‌های «اصلی»، «خطر»، «هشدار»، «موفقیت» و «اطلاعات»:

پس‌زمینه: ته‌رنگ کم‌پررنگ همان رنگ (، و …)
متن: تیرهٔ همان خانواده (، ، و …)

ممنوع: پرکردن کامل دکمه یا نشان با رنگ (مثلاً سبز یا قرمز) و گذاشتن متن مشکی یا سفید روی آن. این ترکیب هم زشت است هم کنتراست پایدار ندارد.

چرا

اگر پس‌زمینه عوض شود و متن از قاعدهٔ دیگری بماند، جفت ناسازگار می‌شود. مثال: دکمهٔ حذف با پس‌زمینهٔ قرمز و متن مرکب آبی‌سبز کنش اصلی. حل سیستماتیک این است که هر لحن یک جفت ثبت‌شده داشته باشد و هیچ‌کس دستی آن را نسازد.

جدول جفت‌ها

پس‌زمینه (توکن)	متن جفت‌شده (توکن)	کاربرد
· ·		کنش اصلی ( با )، برگهٔ فعال، انتخاب
· ·		کنش مخرب ( با )
		وضعیت موفقیت (نشان، هشدار، اعلان)
		وضعیت هشدار
		وضعیت اطلاع
		وضعیت خطا
·		حالت‌های سطح خنثی (کنش ثانویه)
بدون پس‌زمینه		کنش مخرب ثانویه یا شبح ( با /)

هر متن فقط با پس‌زمینهٔ جفت خودش در جدول استفاده شود. مثلاً روی ته‌رنگ خطر یا روی ته‌رنگ کنش اصلی مجاز نیست.

قانون‌ها

کنش مخرب با . ته‌رنگ خطر فقط با و ساخته شود. () و با همین مسیر را دارند.
هرگز یا دکمه را دستی عوض نکنید. نه با ، نه با ، نه با قاعدهٔ CSS جداگانه. اگر لحن مورد نیاز نیست، یا مناسب را انتخاب کنید.
هرگز برای حالت hover/active نگذارید. حالت‌ها توکن جفت‌شده دارند (، ).
هر قاعدهٔ CSS که پس‌زمینهٔ پرشدهٔ معنایی می‌گذارد، متن را هم‌زمان در همان قاعده تعیین کند. حالت‌های ، و از قاعدهٔ پایه ارث می‌برند و معاف‌اند.
عنصر غیرمتنی (نقطه، نوار، دستگیره، گرهٔ نمودار) با کامنت علامت بخورد. این علامت به گارد می‌گوید متنی وجود ندارد و نیازی به جفت نیست.
رنگ خام و هگز در کد رابط ممنوع است. متن و پس‌زمینه فقط از توکن‌های معنایی بیایند؛ سیاه و سفید خام (، ، ) هم همین حکم را دارد.
جفت جدید اول ثبت، بعد استفاده شود. برای هر ته‌رنگ یا متن تازه: (الف) توکن معنایی در ، (ب) فراداده در ، (پ) جفت در فهرست یا فهرست ته‌رنگ‌ها در ؛ سپس و فقط سپس در کامپوننت استفاده شود.

مثال‌ها

درست:

TSX

<Button tone="danger">حذف کمپین</Button><Button tone="danger" variant="secondary">حذف ایده</Button>

نادرست:

TSX

{/* پس‌زمینه عوض شده و متن جفت نشده */}<Button style={{ background: 'var(--tds-danger-default)' }}>حذف کمپین</Button>

CSS

/* نادرست: پس‌زمینهٔ پرشده بدون color در همان قاعده — گارد check:tokens خطا می‌دهد */[data-part="confirm"][data-tone="danger"] { background: var(--tds-danger-default); }

راستی‌آزمایی

گارد خودکار با این فرمان اجرا می‌شود و پیش از هر انتشار باید سبز باشد:

Shell

pnpm --filter @tokapps/tokens check:tokens

این گارد سه چیز را بررسی می‌کند: کنتراست همهٔ جفت‌های بالا در ۶ تم × روشن/تیره × کنتراست عادی/بالا، وجود متن جفت‌شده در هر قاعدهٔ پس‌زمینهٔ معنایی، و ممنوعیت رنگ خام. بازبینی انسانی هم لازم است: آیا متن و ته‌رنگ هم‌خانواده به نظر می‌رسند؟

مرجع فنی

Button: و ()
AlertDialog:
Dialog:
توکن‌ها: ، ،
نسخهٔ مرجع برای ایجنت‌ها و مخزن: