عمق، گوشه و لایه‌بندی
سایه، شعاع گوشه، نقطه‌شکست و z-index — و دو تله‌ای که مقادیرشان امروز تصادفاً یکی است
اصل
این چهار مقیاس با هم تعیین می‌کنند که یک المان کجای عمق صفحه می‌نشیند: چقدر بالا آمده (سایه)، چقدر نرم است (گوشه)، در چه عرضی چطور می‌شکند (نقطه‌شکست)، و روی چه چیزی می‌افتد (لایه). هر چهارتا مقیاس‌اند، نه عدد آزاد.
نمونه بصری
عمق
elevation-0
elevation-1
elevation-2
elevation-3
elevation-4
گوشه — دو خانواده، دو منبع
rounded-xs
--borderradius-xs
rounded-sm
calc(--radius - 4px)
rounded-token-sm
--borderradius-sm
rounded-md
calc(--radius - 2px)
rounded-lg
--radius
rounded-token-lg
--borderradius-lg
rounded-xl
--borderradius-xl
`rounded-sm` و `rounded-token-sm` امروز یکسان دیده می‌شوند — و همین است که خطر را نامرئی می‌کند. منبعشان یکی نیست: اولی از --radius مشتق می‌شود و دومی از خانوادهٔ --borderradius-*.
لایه‌بندی
| توکن | مقدار |
|---|---|
| --z-sticky | 100 |
| --z-overlay | 200 |
| --z-modal | 300 |
| --z-dropdown | 400 |
| --z-popover | 400 |
| --z-tooltip | 500 |
مقادیر از globals.css تولید می‌شوند. برابری dropdown و popover عمدی است.
قوانین اجباری
شعاع گوشه: دو خانواده که از دو منبع می‌آیند
مهم‌ترین تله‌ی این صفحه
rounded-sm، rounded-md و rounded-lg از --radius مشتق می‌شوند
(calc(var(--radius) - 4px) و مانند آن)، اما rounded-xs، rounded-xl، rounded-token-sm
و rounded-token-lg از خانوادهٔ --borderradius-* می‌آیند. امروز مقادیرشان تصادفاً یکی
است — هر دو sm برابر 4 پیکسل و هر دو lg برابر 8 پیکسل — پس تفاوت دیده نمی‌شود. ولی اگر
--radius را عوض کنید، نیمی از مقیاس جابه‌جا می‌شود و نیم دیگر سر جایش می‌ماند.
| کلاس | منبع | مقدار امروز |
|---|---|---|
rounded-xs | --borderradius-xs | 2px |
rounded-sm | calc(--radius - 4px) | 4px |
rounded-token-sm | --borderradius-sm | 4px |
rounded-md | calc(--radius - 2px) | 6px |
rounded-lg | --radius | 8px |
rounded-token-lg | --borderradius-lg | 8px |
rounded-xl | --borderradius-xl | 12px |
خانوادهٔ --borderradius-* عمداً md ندارد؛ پلهٔ میانی فقط از --radius می‌آید.
لایه‌بندی: از مقیاس، نه از عدد
// ✅ درست
<div className="z-[var(--z-modal)]">…</div>
// ❌ غلط — عددی که با هیچ‌چیز هماهنگ نیست و روزی زیر یا روی چیز اشتباهی می‌افتد
<div className="z-[9999]">…</div>| توکن | مقدار | چه چیزی |
|---|---|---|
--z-sticky | 100 | سرستون چسبان، نوار ابزار چسبان |
--z-overlay | 200 | پردهٔ تیرهٔ پشت مودال |
--z-modal | 300 | خود مودال و دیالوگ |
--z-dropdown | 400 | منوی بازشو |
--z-popover | 400 | popover |
--z-tooltip | 500 | tooltip، همیشه بالاترین |
برابری 400 عمدی است
--z-dropdown و --z-popover هر دو 400 هستند و این یک اشتباه نیست: هر دو از یک تریگر باز
می‌شوند و هرگز نباید روی هم بیفتند. پیش‌تر dropdown مقدار 50 داشت که زیر sticky و
overlay و modal می‌نشست — یعنی منو پشت مودال گم می‌شد.
نقطه‌شکست
مقیاس تِیلویند است با دو تفاوت: xs در 480 پیکسل اضافه شده (برای موبایل‌های باریک) و
2xl به 1400 پیکسل تغییر کرده.
// ✅ موبایل-اول: پایه بدون واریانت، بعد بزرگ‌تر
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3">…</div>موارد استفاده رایج
سایه: دو مقیاس، دو کاربرد
سایه‌های عمومی تِیلویند (shadow-xs تا shadow-xl) برای المان‌های معمولی‌اند. در کنارشان یک
مقیاس معنایی هست که با تم عوض می‌شود:
| کلاس | توکن |
|---|---|
shadow-elevation-1 | --elevation-1 |
shadow-elevation-2 | --elevation-2 |
shadow-elevation-3 | --elevation-3 |
shadow-elevation-4 | --elevation-4 |
--elevation-0 برابر none است، برای وقتی که می‌خواهید صریحاً سایه را بردارید.
این مقیاس برای شماست، نه برای کامپوننت‌ها
هیچ کامپوننتی در خودِ کتابخانه امروز از shadow-elevation-* استفاده نمی‌کند؛ کامپوننت‌ها
سایه‌های نام‌دار shadow-card، shadow-dropdown و shadow-dialog را به کار می‌برند. مقیاس
elevation برای کد محصول شماست، جایی که سطحی می‌سازید که در کتابخانه معادل ندارد.
چه نکنیم
z-[9999]. همیشه یک نفر بعداًz-[10000]می‌نویسد. از مقیاس استفاده کنید.- مخلوط‌کردن
rounded-lgوrounded-token-lgدر یک کامپوننت. امروز فرقی ندارند، فردا ممکن است داشته باشند. در یک کامپوننت یک خانواده را انتخاب کنید. shadow-2xlیا سایهٔ دستی برای «برجسته‌تر» نشان دادن. عمق در این سیستم معنا دارد؛ سایهٔ دلبخواه آن معنا را می‌شکند.- نقطه‌شکست دلبخواه مثل
min-[733px]. اگر مقیاس کم دارد، مسئلهٔ سیستم است و باید طرح شود.
صفحات مرتبط
- توکن‌های طراحی — خانواده‌های «عمق و سایه»، «گوشه» و «لایه‌بندی» در مرجع تولیدشده
- الگوهای ریسپانسیو — همین نقطه‌شکست‌ها در چیدمان واقعی
- مودالیتی — کِی مودال، کِی drawer، کِی popover