فضابندی

اصول فضابندی

پرتو از مقیاس فضابندی پیش‌فرض Tailwind استفاده می‌کند — واحد پایه 4px است (space-1) و هر پله مضربی از همان 4px است، نه صرفاً مضرب 8. این با کاربرد واقعی خودِ Supabase Studio هم‌خوان است: شمارش مستقیم کلاس‌های gap-*/p-* در apps/studio/components/{ui,layouts} نشان می‌دهد gap-2/p-2 (8px) پرکاربردترین مقدار است، اما gap-1/p-1 (4px) و gap-3/p-3 (12px) هم به‌همان اندازه در ردیف اول کاربرد قرار دارند — نه یک استثنای نادر. در عمل، پرتو بین این پله‌ها انتخاب می‌کند:

4px  → space-1
8px  → space-2
12px → space-3
16px → space-4
24px → space-6
32px → space-8
40px → space-10
48px → space-12
64px → space-16

قوانین اجباری

قوانین زیر چکیدهٔ لازم‌الاجرای این صفحه هستند؛ جزئیات و استدلال کامل هر قانون در بخش‌های بعدی همین صفحه آمده است.

// ✅ درست — پلهٔ استاندارد مقیاس 4px
<div className="p-4">بازخورد بسته‌بندی</div>

// ❌ غلط — مقدار دلخواه خارج از مقیاس
<div className="p-[13px]">بازخورد بسته‌بندی</div>

// ✅ درست — RTL-safe؛ در هر دو جهت صفحه درست رندر می‌شود
<div className="ps-4 pe-6">رونمایی محصول جدید</div>

// ❌ غلط — physical؛ در RTL جای start و end برعکس می‌شود
<div className="pl-4 pr-6">رونمایی محصول جدید</div>

// ✅ درست — inline با gap-2، فیلدهای فرم با gap-4، گروه‌های بزرگ‌تر یک کارت با gap-8
<div className="flex gap-2">{/* badge ها */}</div>
<div className="flex flex-col gap-4">{/* فیلدهای فرم */}</div>
<div className="flex flex-col gap-8">{/* گروه‌های محتوای یک کارت */}</div>

// ❌ غلط — سلسله‌مراتب وارونه؛ badge ها پراکنده و گروه‌ها چسبیده
<div className="flex gap-8">{/* badge ها */}</div>
<div className="flex flex-col gap-2">{/* گروه‌های محتوای یک کارت */}</div>

// ✅ درست — padding کارت در محدودهٔ استاندارد p-4 تا p-6
<Card className="p-6">تحلیل گفت‌وگوهای کمپین</Card>

// ❌ غلط — خارج از محدودهٔ استاندارد؛ چگالی صفحه را ناهماهنگ می‌کند
<Card className="p-12">تحلیل گفت‌وگوهای کمپین</Card>

// ✅ درست — یک space-y-4 روی والد، ریتم یکنواخت بین پاراگراف‌ها
<div className="space-y-4">
  <p>خلاصهٔ بازخورد مشتریان دربارهٔ کمپین تخفیف فصلی</p>
  <p>جمع‌بندی نظرات دربارهٔ بسته‌بندی جدید</p>
</div>

// ❌ غلط — margin دستی و متفاوت روی هر پاراگراف
<div>
  <p className="mb-5">خلاصهٔ بازخورد مشتریان دربارهٔ کمپین تخفیف فصلی</p>
  <p className="mb-2">جمع‌بندی نظرات دربارهٔ بسته‌بندی جدید</p>
</div>

نمونه بصری — مقیاس فضابندی

چرا این مقیاس؟

• سازگار با اندازه‌های پیکسلی اکثر صفحه‌نمایش‌ها (1x، 2x، 3x DPI)
• تصمیم‌گیری فضابندی را ساده می‌کند — همیشه از مقیاس استفاده کنید، نه مقدار دلخواه (p-[13px])
• یکنواختی بصری در سراسر محصول — و همان مقیاسی که Supabase Studio در عمل استفاده می‌کند

padding و margin

padding داخلی کامپوننت‌ها

// padding کوچک — برای badge، tag
<span className="px-2 py-1">...</span>

// padding متوسط — برای button، input
<button className="px-4 py-2">...</button>

// padding بزرگ — برای card، section
<div className="p-6">...</div>

حاشیهٔ خود صفحه عدد نیست: PageContainer آن را از توکن --layout-page-inset می‌گیرد (16، 24 و 40 پیکسل). هندسهٔ صفحه را ببینید.

فاصله بین اجزا (gap)

// gap کوچک — بین badge ها و chip ها
<div className="flex gap-2">...</div>

// gap متوسط — بین button ها
<div className="flex gap-3">...</div>

// gap استاندارد — بین form field ها
<div className="flex flex-col gap-4">...</div>

// gap بزرگ — بین گروه‌های یک کارت یا پنل
<div className="flex flex-col gap-8">...</div>

بین بخش‌ها و بلوک‌های صفحه gap نمی‌نویسید: PageSection فاصلهٔ 48 و 24 را از توکن‌ها می‌گیرد.

CSS Logical Properties در فضابندی

چون پرتو RTL-first است، از CSS Logical Properties برای فضابندی جهت‌دار استفاده کنید:

// فضابندی جهت‌دار — RTL-safe
<div className="ps-4 pe-6">     {/* padding-inline-start / end */}
<div className="ms-2 me-4">     {/* margin-inline-start / end */}
<div className="border-s-2">    {/* border-inline-start */}

// نه این
<div className="pl-4 pr-6">    {/* physical — در RTL برعکس می‌شود */}

فضابندی در Layout

چیدمان صفحه (عرض ستون، حاشیهٔ کنار، فاصلهٔ سرِ صفحه تا اولین بلوک، فاصلهٔ بخش‌ها و بلوک‌ها) از توکن‌های --layout-* می‌آید و اجزای صفحه آن را اعمال می‌کنند؛ کد صفحه برای آن‌ها کلاس فاصله نمی‌نویسد. جدول کامل و قواعد: هندسهٔ صفحه.

ساختار صفحه داشبورد

صفحه‌ای داخل ProductFrame یک قالب صفحه است، این‌جا DashboardPage: فاصلهٔ بالای عنوان از قاب، فاصلهٔ سرِ صفحه تا شاخص‌ها، شبکهٔ شاخص‌ها (ستون‌هایی با کمینهٔ --layout-tile-min-width) و فاصلهٔ بخش‌ها و نمودارها را قالب از توکن‌های --layout-* می‌دهد، و صفحه هیچ کلاس فاصله یا شبکه‌ای نمی‌نویسد:

<DashboardPage
  title="داشبورد"
  period={<DateRangePicker value={period} onChange={setPeriod} />}
  kpis={metrics.map((metric) => (
    <MetricCard key={metric.id}>{/* برچسب، مقدار و تغییر شاخص */}</MetricCard>
  ))}
>
  <DashboardSection title="روند گفت‌وگو">
    <DashboardChart title="روند منشن‌ها">{/* نمودار */}</DashboardChart>
  </DashboardSection>
</DashboardPage>

اندازه‌های استاندارد کامپوننت

padding کنترل‌ها از مقیاس اندازه می‌آید، نه از یک جدول توصیه. جدول قبلیِ این بخش برای دکمهٔ sm مقدار px-3 py-1.5 می‌گفت درحالی‌که مقدار واقعی px-3 py-2 است، و «Button default» را px-4 py-2 می‌نامید که در عمل پلهٔ md است نه پیش‌فرض پروژه. مقیاس کامل و به‌روز در اندازه و چگالی.

آنچه به مقیاسِ کنترل مربوط نیست و اینجا می‌ماند — فاصلهٔ داخلی ظرف‌ها:

فضابندی متن

برای خوانایی بهتر متن فارسی:

// line-height مناسب برای فارسی
<p className="leading-relaxed">متن با فاصله خط مناسب</p>

// فاصله بین پاراگراف‌ها
<div className="space-y-4">
  <p>پاراگراف اول</p>
  <p>پاراگراف دوم</p>
</div>

// heading با فاصله مناسب از محتوا
<div>
  <h2 className="text-heading mb-3">عنوان</h2>
  <p className="text-light">محتوا</p>
</div>

خلاصه قوانین