سایه
سایه هم مثل فاصله یک عدد نیست، چهار نقش است. کسی که popover را با shadow-lg تیره میکند فردا مودال را هم با همان کلاس تیره میکند، چون هر دو «اتفاقاً بزرگ» بودند. نام بردن بر اساس ارتفاع، نه اندازه، جلوی این را میگیرد.
چهار پلهٔ ارتفاع
هر پله دو سایه دارد؛ یکی نزدیک و تیز، یکی دور و پخش. همان رسمِ Material و shadcn، تا لبهٔ سطح هم مشخص بماند هم نرم.
shadow-controlحالت استراحتِ دکمه، اینپوت، آیتم لیست — تقریباً نامحسوسshadow-cardکارت و تایلی که کمی از پسزمینه بلند شدهshadow-panelpopover، dropdown-menu، select، date-picker، tooltipshadow-overlaydialog، sheet، drawer، alert-dialog — بالاترین ارتفاعتیرگی جدا برای تم تیره
سیاهِ کمرنگِ تم روشن روی پسزمینهٔ نزدیکبهسیاه دیده نمیشود، پس هر پله در .dark با تیرگیِ بیشتری بازتعریف شده تا لبهٔ سطح از پسزمینه جدا بماند؛ آفست و بلور هر پله ثابت میماند.
تم روشن
تم تیره
استفاده
هر توکن هم بهعنوان یوتیلیتی Tailwind در دسترس است، هم بهصورت متغیر CSS خام برای جایی که کلاس کافی نیست (مثل استایل درونخطی یا یک افکت سفارشی).
Card.tsx
<div className="rounded-lg border bg-card shadow-card">…</div>
<div className="rounded-lg bg-popover shadow-panel">…</div>app/globals.css
box-shadow: var(--shadow-overlay);