پایهها
رنگ، تایپوگرافی، فضابندی، توکنها و تمبندی — زبان بصری و قرارداد مصرف آن
معرفی
همهی ظاهر پرتو از یک لایهی توکن CSS میآید. یک @import کافی است و از آن به بعد هر کلاس Tailwind که به کار میبرید به همان توکنها میرسد:
/* app/globals.css */
@import 'tailwindcss';
@import '@partodata/ui/tailwind.css';تم تاریک پیشفرضِ :root است و تم روشن با data-theme="light" صریحاً فعال میشود. هیچجا رنگ خام نمینویسید.
راهنمای انتخاب
رنگها
سیستم رنگبندی سمانتیک پرتو — رنگهای متن، پسزمینه، حاشیه، و توکنهای دامنه
پالتهای رنگی
مرجع کامل پالتهای رنگی پایه — scale های رنگی و نسبت کنتراست WCAG
تایپوگرافی
سیستم تایپوگرافی پرتو — فونت یکان بخ Variable، مقیاس اندازه، وزن، و راهنمای استفاده
فضابندی
سیستم فضابندی پرتو — مقیاس ۴px پیشفرض Tailwind، spacing tokens، و اصول فاصلهگذاری
اندازه و چگالی
مقیاس پنجپلهای کنترلها، پیشفرض پروژه، و تلهی size="default"
عمق، گوشه و لایهبندی
سایه، شعاع گوشه، نقطهشکست و z-index — و دو تلهای که مقادیرشان امروز تصادفاً یکی است
آیکونها
اصول طراحی و نحوه استفاده از آیکونها در پرتو — با گالری تعاملی
حرکت و انیمیشن
مدت، easing و انیمیشنهای آماده پرتو — و اینکه کدامشان از توکن میخوانند و کدامشان نه
حالتهای تعامل
فوکوس، غیرفعال و hover — ایدیوم واقعی سیستم، و توکنهایی که هیچکس نمیخواندشان
قالببندی عدد و تاریخ
تقویم شمسی، جداکنندهٔ عدد و مقدار مختصر — کدام تابع برای کدام کار، و کدام تلهها واقعیاند
توکنهای طراحی
مرجع کامل CSS variables سیستم طراحی پرتو — رنگها، فضابندی، سایه، و توکنهای دامنه
کلاسهای Tailwind
لیست کامل کلاسهای کاربردی رنگ در دیزاین سیستم پرتو
تمبندی
نحوه سفارشیسازی و ایجاد تمهای سفارشی در دیزاین سیستم پرتو — تیرهاول با دو نشانگر
دادهنمایی
راهنمای استفاده از نمودارها و ویژوالیزیشن داده در پرتو — رنگ، دسترسیپذیری، و الگوها
قرارداد مصرف
پنج محدودیت ترکیببندی که هر اپ مصرفکنندهی پرتو باید رعایت کند، مرور سهپرسشی، و دو گیتی که آنها را اجرا میکنند
دستهبندی
| گروه | چه چیزی را پاسخ میدهد |
|---|---|
| زبان بصری | زبان بصری چه هست — سلسلهمراتب رنگ، مقیاس متن، ریتم فاصلهها، و آیکونها |
| توکنها و مصرف | چطور مصرفش میکنید و گسترشش میدهید — مرجع توکنها، نگاشت کلاسها، تم سفارشی |
نکات مشترک
پنج محدودیت ترکیببندی روی هر صفحهی این بخش حاکماند و در قرارداد مصرف کامل توضیح داده شدهاند. خلاصهشان:
- رنگ فقط از توکن سمانتیک — نه hex، نه پالت خام Tailwind، نه
hsl()دور یک توکن - هر رنگ پسزمینهی برند/وضعیت، جفت
text-on-*خودش را دارد؛text-whiteجواب نیست - اندازهی متن از مقیاس نامدار میآید، نه مقدار دلخواه
- شعاع گوشه و عرض کانتینر از توکن، نه عدد px
- فاصله و جهت با ویژگیهای منطقی —
ms/me/ps/peوstart/end
توکن را در hsl() نپیچید
از نسخهٔ دوم به بعد، توکنها رنگ کامل هستند، نه کانال خام. پس var(--brand-default) درست است و
hsl(var(--brand-default)) یک رنگ نامعتبر میسازد — بیصدا، چون ظاهرش توکنمحور است. برای شفافیت از
modifier خودِ Tailwind (bg-brand/10) یا color-mix() استفاده کنید.