رنگ (color)
رنگ‌های دیگ در سه لایه تعریف می‌شوند: پالت پایه، برند، و توکن‌های معنایی. هدف این جداسازی یک چیز است، یک برند تازه باید بتواند رنگ خودش را بیاورد بدون اینکه بتواند دسترسی‌پذیری را خراب کند.
سه لایه
پالت پایه
--dig-*مقدار خام، بدون معنی و بدون برند. عیناً پالت Tailwind v4 در فضای OKLCH.
برند
--brand-*نام مستعارِ یکی از رمپ‌های پایه. تنها لایه‌ای که یک برند تازه بازتعریف می‌کند.
معنایی
--primary, --success, …نقشِ رنگ در رابط. اینجا تصمیم می‌گیریم کدام Shade متن سفید می‌گیرد و کدام متن تیره.
قاعده: هر لایه فقط به لایهٔ بالاتر از خودش نگاه می‌کند. کامپوننت‌ها فقط از لایهٔ ۳ می‌خورند و هیچ‌وقت مستقیم به --dig-* دست نمی‌زنند.
لایهٔ ۱: پالت پایه
مقادیر دقیقاً همان‌هایی هستند که Tailwind v4 می‌دهد و در globals.css پین شده‌اند. دلیل پین‌کردن به‌جای خواندن مستقیم از Tailwind: خروجی رجیستری خودبسنده می‌ماند و ارتقای Tailwind رنگ‌ها را زیر پای پروژه‌های موجود عوض نمی‌کند.
خاکستری پایه --dig-slate-*
سطح‌ها، متن، خط و ورودیخاکستری خالص --dig-neutral-*
پایهٔ Gray Dark: data-dark-theme="gray"ایندیگو --dig-indigo-*
برند اول (فعلی)سایان --dig-cyan-*
برند دوم (فعلی)بنفش --dig-violet-*
رزرو برند / نمودارآبی --dig-blue-*
اطلاع‌رسانی: infoسبز --dig-green-*
موفقیت: successکهربایی --dig-amber-*
هشدار: warningنارنجی --dig-orange-*
رزرو / نمودارقرمز --dig-red-*
خطا: destructiveلایهٔ ۲: برند
دیگ دو رنگ برند دارد. رنگ اول همه‌جا هست (دکمهٔ اصلی، حلقهٔ فوکوس، لینک، سری اول نمودار) و رنگ دوم برای تأکید و تفکیک به کار می‌رود. هر دو نام مستعارند، نه مقدار، برای همین تعویضشان چند سطر است.
برند اول --brand-*
در حال حاضر: ایندیگوبرند دوم --brand-secondary-*
در حال حاضر: سایانلایهٔ ۳: توکن‌های معنایی
نام‌ها یک قرارداد رایج و شناخته‌شده در اکوسیستم کامپوننت‌های Tailwind هستند (background، primary، destructive و مشابه)، تا کامپوننت‌ها و بلوک‌های سازگار با این قرارداد بدون تغییر روی تم دیگ کار کنند. نمونه‌ها مقدار زندهٔ تم فعلی را نشان می‌دهند؛ تم را عوض کنید تا تغییرشان را ببینید.
سطح‌ها
زمینهٔ صفحه و سطوحی که رویش می‌نشینند.
--background--foregroundکنتراست، روشن ۱۷.۸۴ / تیره ۱۸.۴۰
--card--card-foregroundکنتراست، روشن ۱۷.۸۴ / تیره ۱۶.۲۸
--popover--popover-foregroundکنتراست، روشن ۱۷.۸۴ / تیره ۱۶.۲۸
--muted--muted-foregroundکنتراست، روشن ۶.۹۰ / تیره ۵.۵۸
--secondary--secondary-foregroundکنتراست، روشن ۱۶.۲۸ / تیره ۱۳.۳۷
--accent--accent-foregroundکنتراست، روشن ۱۶.۲۸ / تیره ۱۳.۳۷
سطح hover: خنثی، نه برند
برند
--primary--primary-foregroundکنتراست، روشن ۶.۴۴ / تیره ۵.۱۴
--brand-secondary--brand-secondary-foregroundکنتراست، روشن ۵.۲۸ / تیره ۷.۴۰
--primary-subtle--primary-subtle-foregroundکنتراست، روشن ۷.۲۲ / تیره ۱۰.۷۴
--ringحلقهٔ فوکوس: روشن ۶.۴۴ / تیره ۴.۴۱
وضعیت
هر وضعیت دو حالت دارد: توپُر برای تأکید بالا، و کم‌رنگ برای زمینهٔ ملایم Alert و Badge.
--destructive--destructive-foregroundکنتراست، روشن ۴.۷۶ / تیره ۵.۵۸
--success--success-foregroundکنتراست، روشن ۴.۹۶ / تیره ۶.۹۰
--warning--warning-foregroundکنتراست، روشن ۶.۹۹ / تیره ۸.۷۳
--info--info-foregroundکنتراست، روشن ۵.۲۶ / تیره ۵.۵۸
--destructive-subtle--destructive-subtle-foregroundکنتراست، روشن ۵.۸۸ / تیره ۱۱.۱۴
--success-subtle--success-subtle-foregroundکنتراست، روشن ۶.۳۷ / تیره ۱۱.۷۸
--warning-subtle--warning-subtle-foregroundکنتراست، روشن ۴.۸۷ / تیره ۱۲.۰۳
--info-subtle--info-subtle-foregroundکنتراست، روشن ۶.۲۶ / تیره ۱۰.۳۵
خط و ورودی و نمودار
--border--input--chart-1--chart-2--chart-3--chart-4--chart-5چرا سبز و کهربایی متن تیره دارند
رنگ‌های گرم برای اینکه زیر متن سفید به AA برسند باید تا Shade ۷۰۰ تیره شوند و آنجا مات و گِلی می‌شوند. راه بهتر این است که Shade زندهٔ ۵۰۰ را نگه داریم و متن را تیره کنیم:
| توکن | مات: ۷۰۰ با متن سفید | انتخاب دیگ: ۵۰۰ با متن تیره |
|---|---|---|
| success | #146846 ۶.۷۸ | #27a26a ۴.۹۶ |
| warning | #bb4d00 ۵.۰۵ | #fe9a00 ۶.۹۹ |
قرمز برعکس است: در Shade ۶۰۰ با متن سفید ۴.۷۶ می‌دهد، پس همان‌جا می‌ماند. در تم تیره قاعده وارونه می‌شود، رنگ توپُر به Shade ۴۰۰ می‌رود و متن رویش Shade ۹۵۰ همان رمپ می‌شود.
ساخت برند تازه
فقط لایهٔ ۲ را بازتعریف کنید. نه توکن معنایی‌ای لازم است دست بخورد، نه هیچ کامپوننتی:
/* brand.css، بعد از globals.css ایمپورت شود */
:root {
--brand-50: var(--dig-violet-50);
--brand-100: var(--dig-violet-100);
--brand-200: var(--dig-violet-200);
--brand-300: var(--dig-violet-300);
--brand-400: var(--dig-violet-400);
--brand-500: var(--dig-violet-500);
--brand-600: var(--dig-violet-600);
--brand-700: var(--dig-violet-700);
--brand-800: var(--dig-violet-800);
--brand-900: var(--dig-violet-900);
--brand-950: var(--dig-violet-950);
}اگر برند رنگ سازمانی خودش را دارد و در پالت Tailwind نیست، یازده Shade را مستقیم بنویسید. تنها شرط: Shade ۶۰۰ زیر متن سفید حداقل ۴.۵ کنتراست بدهد و Shade ۴۰۰ زیر متن Shade ۹۵۰ همان‌قدر. بقیهٔ نقش‌ها خودشان سر جایشان می‌نشینند.
دو تم تیره: Blue Dark و Gray Dark
تم تیرهٔ پیش‌فرض (Blue Dark) از --dig-slate-* می‌آید که کمی به آبی‌سرمه‌ای می‌زند. یک پرچمِ دومِ کاملاً خنثی هم هست، Gray Dark، بدون هیچ رنگ‌مایه‌ای. هر دو از همان زنجیرهٔ توکنِ معنایی می‌گذرند، پس هیچ کامپوننتی دست‌کاری نمی‌شود؛ فقط لایهٔ آلیاسِ --neutral-* عوض می‌شود.
<!-- روی همان عنصری که next-themes کلاس dark را رویش می‌گذارد -->
<html class="dark" data-dark-theme="gray">بدون این صفت، پیش‌فرض همان Blue Dark است. سوییچرِ گوشهٔ بالای همین سایت («تغییر پوسته») هم دقیقاً همین دو گزینه را نشان می‌دهد.
قواعد استفاده
بکنید
- برای هر رنگ زمینه، جفت
-foregroundخودش را به‌کار ببرید. جفت‌ها اندازه‌گیری شده‌اند. - برای زمینهٔ ملایم از
-subtleاستفاده کنید، نه از شفافیت روی رنگ توپُر. - رنگ برند را از
--primaryبگیرید تا با تعویض برند همراه شود.
نکنید
--accentرا رنگی نکنید؛ سطح hover خنثی است و رنگی‌کردنش هر هاور برنامه را رنگ برند می‌کند.- رنگ برند دوم را روی
--secondaryننشانید؛ آن توکن خاکستری است و واریانت secondary دکمه از آن می‌خورد. - در کامپوننت‌ها مستقیم
--dig-*یا کلاس‌های رنگی Tailwind مثلbg-green-500ننویسید؛ این‌ها با برند عوض نمی‌شوند.