پرتوپرتو

رنگ‌ها

سیستم رنگ‌بندی کامل دیزاین سیستم پرتو - از Supabase Design System

سیستم رنگ‌بندی پرتو بر اساس Supabase Design System طراحی شده است و مجموعه‌ای از کلاس‌های کاربردی را ارائه می‌دهد که استفاده از رنگ‌ها را ساده، یکپارچه و قابل دسترس می‌کند.

تغییر تم

برای مشاهده رنگ‌ها در تم‌های مختلف (روشن، تاریک، کلاسیک)، از سوئیچ زیر استفاده کنید:

اصول پایه

هدف سیستم رنگ‌بندی

  1. یکپارچگی: تمام کامپوننت‌ها از یک منبع رنگی استفاده می‌کنند
  2. دسترسی‌پذیری: تمام ترکیب‌های رنگی استانداردهای WCAG را رعایت می‌کنند
  3. قابلیت تم‌بندی: پشتیبانی کامل از تم روشن، تاریک و کلاسیک
  4. سمانتیک: هر رنگ معنای خاصی دارد و برای موارد خاص استفاده می‌شود

بخش اول: استفاده از رنگ

این بخش نحوه استفاده صحیح از کلاس‌های رنگی در کامپوننت‌ها و صفحات را توضیح می‌دهد.

رنگ‌های متن (Text)

از رنگ‌های متن برای ایجاد سلسله‌مراتب بصری در محتوا استفاده کنید. از رنگ‌های تاکیدی (مثل text-destructive، text-warning) به ندرت و فقط در مواقع ضروری استفاده کنید تا از بار بصری بیش از حد جلوگیری شود.

نمونه متنtext
نمونه متنtext-light
نمونه متنtext-lighter
نمونه متنtext-muted
نمونه متنtext-contrast
نمونه متنtext-destructive
نمونه متنtext-warning
نمونه متنtext-brand

سطوح مختلف متن

کلاسکاربردمثال
text-foreground یا textمتن پیش‌فرض برای عناوین و محتوای اصلی<h1 className="text-foreground">عنوان</h1>
text-foreground-light یا text-lightمتن بدنه و توضیحات<p className="text-light">توضیحات</p>
text-foreground-lighter یا text-lighterمتن کم‌رنگ و راهنما<span className="text-lighter">راهنما</span>
text-foreground-muted یا text-mutedمتن غیرفعال<span className="text-muted">غیرفعال</span>
text-destructiveمتن خطا<span className="text-destructive">خطا</span>
text-warningمتن هشدار<span className="text-warning">هشدار</span>
text-brandمتن برند<span className="text-brand">برند</span>

نمونه کد

// عناوین و متن‌های اصلی
<h1 className="text">عنوان اصلی</h1>
<h1 className="text-foreground">عنوان اصلی (معادل)</h1>

// متن‌های بدنه و توضیحات
<p className="text-light">این یک متن توضیحی است</p>
<p className="text-foreground-light">این یک متن توضیحی است (معادل)</p>

// متن‌های ثانویه
<span className="text-lighter">اطلاعات ثانویه</span>

// متن‌های کم‌رنگ
<small className="text-muted">متادیتا یا تاریخ</small>

// متن برجسته (در پس‌زمینه تیره)
<span className="text-contrast">متن با کنتراست بالا</span>

رنگ‌های سمانتیک متن

// برند
<span className="text-brand">پیام برند</span>

// هشدار
<span className="text-warning">این عملیات قابل بازگشت نیست</span>

// خطا و حذف
<span className="text-destructive">خطا: عملیات ناموفق بود</span>

رنگ‌های پس‌زمینه (Background)

bg-200
bg
bg-alternative-200
bg-alternative
bg-selection
bg-control
bg-surface-75
bg-surface-100
bg-surface-200
bg-surface-300
bg-surface-400
bg-overlay
bg-overlay-hover
bg-muted
bg-button
bg-dialog
bg-dash-sidebar
bg-dash-canvas

پس‌زمینه اپلیکیشن

ما از پس‌زمینه به ۲ روش مختلف استفاده می‌کنیم:

/**
 * پس‌زمینه سایت مستندات
 * این پس‌زمینه تیره‌تر است و عمق بیشتری ایجاد می‌کند
 */
<body className="bg">{children}</body>

/**
 * پس‌زمینه استودیو (داشبورد)
 */
<body className="bg-studio">{children}</body>

پس‌زمینه‌ها و سطوح (Surfaces)

سطوح در سایت مستندات و وب‌سایت

ما از سطوح به ۲ روش مختلف استفاده می‌کنیم. در سایت مستندات، ما از پس‌زمینه تیره‌تری استفاده می‌کنیم، بنابراین یک رنگ سطح اضافی داریم:

app backgroundbg
content panelbg-surface-75border-muted
// پس‌زمینه اصلی صفحه
<body className="bg">

// سطح اول - کارت‌ها و پنل‌های اصلی
<div className="bg-surface-75">
  <h2>محتوای اصلی</h2>
</div>

// سطح دوم - کامپوننت‌های برجسته
<div className="bg-surface-100">
  <p>محتوای برجسته</p>
</div>

// سطح سوم - دراپ‌داون‌ها و پاپوورها
<div className="bg-surface-200">
  <ul>لیست آیتم‌ها</ul>
</div>

// سطح چهارم - محتوای تو در تو
<div className="bg-surface-300">
  <span>محتوای عمیق</span>
</div>

// سطح پنجم - محتوای بسیار تو در تو
<div className="bg-surface-400">
  <span>محتوای خیلی عمیق</span>
</div>

</body>

سطوح در داشبورد (Studio)

برای داشبورد ما می‌توانیم از bg-surface-100، bg-surface-200 و bg-surface-300 استفاده کنیم:

app backgroundbg-studio
content panelbg-surface-100border
content panelbg-surface-200border
content panelbg-surface-300border
// پس‌زمینه اصلی داشبورد
<body className="bg-studio">

// کارت‌ها و پنل‌ها
<div className="bg-surface-100">
  <h2>پنل داشبورد</h2>
</div>

// دراپ‌داون‌ها
<div className="bg-surface-200">
  <ul>منوی کشویی</ul>
</div>

</body>

فضای خالی و گرید داده‌ها

گریدهای داده از یک پس‌زمینه جایگزین برای فضای خالی استفاده می‌کنند تا عمق بیشتری به طرح بدهند.

grid headerbg-surface-200border
content rowbg-200border-secondary
content rowbg-200border-secondary
content rowbg-200border-secondary
content rowbg-200border-secondary
empty frame spacebg-alternativeborder-stronger

جدول استفاده از پس‌زمینه

کلاسکاربردمثال
bg یا bg-200پس‌زمینه اصلی اپلیکیشن<body className="bg">
bg-surface-75سطح اولیه (نزدیک به پس‌زمینه)<div className="bg-surface-75">
bg-surface-100سطح پنل‌ها و کارت‌ها<Card className="bg-surface-100">
bg-surface-200سطح dropdown و popover<Popover className="bg-surface-200">
bg-surface-300سطح modal و dialog<Dialog className="bg-surface-300">
bg-surface-400سطح بالاتر<div className="bg-surface-400">
bg-alternativeپس‌زمینه جایگزین (معکوس)<div className="bg-alternative">
bg-selectionپس‌زمینه انتخاب شده<div className="bg-selection">
bg-controlپس‌زمینه کنترل‌ها (input، checkbox)<input className="bg-control">
bg-overlayپس‌زمینه overlay<div className="bg-overlay">
bg-mutedپس‌زمینه خاموش<div className="bg-muted">
bg-buttonپس‌زمینه دکمه<button className="bg-button">
bg-dialogپس‌زمینه dialog<Dialog className="bg-dialog">

Overlay ها

ما از رنگ پس‌زمینه bg-overlay برای overlay استفاده می‌کنیم. این را نباید با Dialog اشتباه گرفت، Dialog ها باید از همان رنگ پس‌زمینه سایت استفاده کنند.

// Overlay - برای dropdown و popover
<div className="bg-overlay border border-overlay">
  محتوای Dropdown
</div>

// Dialog - استفاده از رنگ اصلی اپلیکیشن
<Dialog className="bg-dialog">
  محتوای Dialog
</Dialog>

پس‌زمینه‌های ویژه

// پس‌زمینه انتخاب شده (selection)
<div className="bg-selection">آیتم انتخاب شده</div>

// پس‌زمینه کنترل‌ها (input, select, etc.)
<input className="bg-control" />

// پس‌زمینه overlay و modal
<div className="bg-overlay">محتوای overlay</div>
<div className="bg-overlay-hover">hover state</div>

// پس‌زمینه دیالوگ
<div className="bg-dialog">محتوای دیالوگ</div>

// سایدبار و canvas داشبورد
<aside className="bg-dash-sidebar">منوی کناری</aside>
<main className="bg-dash-canvas">محتوای اصلی</main>

رنگ‌های حاشیه (Border)

border
border-muted
border-secondary
border-overlay
border-control
border-alternative
border-strong
border-stronger
border-button
border-button-hover
کلاسکاربردمثال
border یا border-defaultحاشیه پیش‌فرض<div className="border">
border-mutedحاشیه خاموش<div className="border border-muted">
border-secondaryحاشیه ثانویه<div className="border border-secondary">
border-overlayحاشیه overlay<Popover className="border border-overlay">
border-controlحاشیه کنترل‌ها<input className="border border-control">
border-alternativeحاشیه جایگزین<div className="border border-alternative">
border-strongحاشیه قوی (hover، focus)<div className="border border-strong">
border-strongerحاشیه قوی‌تر (برجسته)<div className="border border-stronger">
border-buttonحاشیه دکمه<button className="border border-button">
border-button-hoverحاشیه دکمه در hover<button className="border border-button-hover">

نمونه کد

// حاشیه پیش‌فرض - برای بیشتر موارد
<div className="border border-default">کارت با حاشیه معمولی</div>

// حاشیه قوی‌تر - برای تاکید بیشتر
<div className="border border-strong">کارت با حاشیه برجسته</div>

// حاشیه خیلی قوی - برای جداسازی واضح
<div className="border border-stronger">کارت با حاشیه پررنگ</div>

// حاشیه overlay - برای مدال‌ها و پاپوورها
<div className="border border-overlay">overlay با حاشیه</div>

// حاشیه کنترل‌ها
<input className="border border-control" />

// حاشیه دکمه
<button className="border border-button">دکمه با حاشیه</button>
<button className="border border-button-hover">حالت hover</button>

رنگ‌های دیگر

این رنگ‌ها شامل brand، warning، destructive و code-block هستند.

bg-destructive-200
bg-destructive-300
bg-destructive-400
bg-destructive-500
bg-destructive-600
bg-destructive
bg-warning-200
bg-warning-300
bg-warning-400
bg-warning-500
bg-warning-600
bg-warning
bg-brand-200
bg-brand-300
bg-brand-400
bg-brand-500
bg-brand-600
bg-brand
bg-brand-link
bg-_secondary-200
bg-_secondary-400
bg-_secondary
bg-code_block-1
bg-code_block-2
bg-code_block-3
bg-code_block-4
bg-code_block-5

نحوه استفاده

// رنگ Brand
<div className="bg-brand text-white">پس‌زمینه برند</div>
<div className="bg-brand-200">برند 200</div>
<div className="bg-brand-600">برند 600</div>

// رنگ Warning
<div className="bg-warning text-white">هشدار</div>
<div className="text-warning">متن هشدار</div>

// رنگ Destructive
<div className="bg-destructive text-white">خطا</div>
<div className="text-destructive">متن خطا</div>

نمونه‌های کاربردی

کارت با سطوح مختلف

<div className="bg-surface-100 p-6 rounded-lg border border-default">
  <h2 className="text-foreground mb-2">عنوان کارت</h2>
  <p className="text-light mb-4">توضیحات کارت</p>
  
  <div className="bg-surface-200 p-4 rounded border border-muted">
    <span className="text-lighter">سطح دوم</span>
  </div>
</div>

فرم با validation

<form>
  {/* Input عادی */}
  <div className="mb-4">
    <label className="text-foreground text-sm mb-1">نام کاربری</label>
    <input 
      className="bg-control border border-control text-foreground rounded px-3 py-2" 
      placeholder="نام کاربری خود را وارد کنید"
    />
  </div>
  
  {/* Input با خطا */}
  <div className="mb-4">
    <label className="text-foreground text-sm mb-1">ایمیل</label>
    <input 
      className="bg-control border border-destructive text-foreground rounded px-3 py-2" 
      placeholder="example@email.com"
    />
    <span className="text-destructive text-xs mt-1">ایمیل نامعتبر است</span>
  </div>
  
  {/* Input با هشدار */}
  <div className="mb-4">
    <label className="text-foreground text-sm mb-1">رمز عبور</label>
    <input 
      type="password"
      className="bg-control border border-warning text-foreground rounded px-3 py-2" 
      placeholder="رمز عبور"
    />
    <span className="text-warning text-xs mt-1">رمز عبور ضعیف است</span>
  </div>
</form>

دکمه‌ها با variant های مختلف

// دکمه اصلی
<button className="bg-brand text-white hover:bg-brand/90 px-4 py-2 rounded">
  ذخیره
</button>

// دکمه ثانویه
<button className="bg-surface-200 text-foreground hover:bg-surface-300 px-4 py-2 rounded">
  انصراف
</button>

// دکمه خطرناک
<button className="bg-destructive text-white hover:bg-destructive/90 px-4 py-2 rounded">
  حذف
</button>

// دکمه ghost
<button className="text-foreground hover:bg-surface-100 px-4 py-2 rounded">
  بیشتر
</button>

// دکمه outline
<button className="border border-default text-foreground hover:bg-surface-100 px-4 py-2 rounded">
  مشاهده
</button>

Modal و Overlay

// Overlay backdrop
<div className="fixed inset-0 bg-overlay/80">
  {/* Dialog */}
  <div className="bg-dialog rounded-lg p-6 border border-overlay">
    <h2 className="text-foreground text-xl mb-4">تایید عملیات</h2>
    <p className="text-light mb-6">آیا مطمئن هستید؟</p>
    
    <div className="flex gap-2 justify-end">
      <button className="bg-surface-100 border border-button hover:bg-surface-200 px-4 py-2 rounded">
        لغو
      </button>
      <button className="bg-brand text-white hover:bg-brand/90 px-4 py-2 rounded">
        تایید
      </button>
    </div>
  </div>
</div>

نوتیفیکیشن و Alert

// اطلاعیه موفقیت
<div className="bg-brand/10 border border-brand rounded-lg p-4">
  <h4 className="text-brand font-medium mb-1">موفقیت</h4>
  <p className="text-light text-sm">عملیات با موفقیت انجام شد</p>
</div>

// هشدار
<div className="bg-warning/10 border border-warning rounded-lg p-4">
  <h4 className="text-warning font-medium mb-1">هشدار</h4>
  <p className="text-light text-sm">این عملیات قابل بازگشت نیست</p>
</div>

// خطا
<div className="bg-destructive/10 border border-destructive rounded-lg p-4">
  <h4 className="text-destructive font-medium mb-1">خطا</h4>
  <p className="text-light text-sm">عملیات با شکست مواجه شد</p>
</div>

بهترین روش‌ها

استفاده از کلاس‌های سمانتیک

همیشه از کلاس‌های سمانتیک استفاده کنید، نه رنگ‌های مستقیم:

// ✅ درست
<span className="text-destructive">خطا</span>

// ❌ غلط
<span className="text-red-500">خطا</span>

رعایت سلسله‌مراتب

از سطوح مختلف متن و پس‌زمینه برای ایجاد سلسله‌مراتب بصری:

// ✅ درست - سلسله‌مراتب واضح
<div>
  <h1 className="text-foreground">عنوان</h1>
  <p className="text-light">توضیحات</p>
  <small className="text-lighter">متادیتا</small>
</div>

استفاده محدود از رنگ‌های تاکیدی

از text-warning و text-destructive فقط برای موارد واقعاً مهم استفاده کنید.

کنتراست مناسب

همیشه مطمئن شوید رنگ متن و پس‌زمینه کنتراست کافی دارند (حداقل 4.5:1 برای متن عادی).

پشتیبانی از شفافیت (Opacity)

تمام رنگ‌ها با استفاده از شفافیت Tailwind تولید می‌شوند. این بدان معناست که می‌توانید از / برای تنظیم شفافیت استفاده کنید:

<div className="flex gap-3 items-center">
  <div className="w-12 h-12 rounded-full bg-surface-300"></div>
  <div className="w-12 h-12 rounded-full bg-surface-300/90"></div>
  <div className="w-12 h-12 rounded-full bg-surface-300/80"></div>
  <div className="w-12 h-12 rounded-full bg-surface-300/75"></div>
  <div className="w-12 h-12 rounded-full bg-surface-300/50"></div>
  <div className="w-12 h-12 rounded-full bg-surface-300/25"></div>
</div>

این برای ایجاد حالت‌های hover، disabled و overlay بسیار مفید است:

// حالت disabled
<button className="bg-brand/50 text-foreground/50" disabled>
  غیرفعال
</button>

// حالت hover
<button className="bg-brand hover:bg-brand/90">
  دکمه
</button>

// Overlay
<div className="fixed inset-0 bg-black/50">
  <Dialog />
</div>

ترکیب رنگ‌ها (Mixing Colors)

یکی از قدرت‌های سیستم رنگ ما این است که می‌توانید هر رنگی را در هر کلاس کاربردی استفاده کنید:

// استفاده از رنگ foreground برای پس‌زمینه
<div className="bg-foreground-light">
  <span className="text-background">متن معکوس</span>
</div>

// استفاده از رنگ surface برای حاشیه
<div className="border-2 border-surface-300">
  محتوا
</div>

// ترکیب‌های خلاقانه
<div className="bg-brand/10 border border-brand/30 text-brand">
  کارت با تم برند
</div>

بخش دوم: پالت‌های رنگی

برای مشاهده تمام رنگ‌های پایه و scale های رنگی موجود در سیستم، به صفحه پالت‌های رنگی مراجعه کنید.

بخش سوم: تم‌ها و تنظیمات پیشرفته

تم‌های مختلف

دیزاین سیستم پرتو از ۳ تم پشتیبانی می‌کند که از سیستم دیزاین Supabase اقتباس شده‌اند:

Light (روشن)

تم روشن استاندارد، مناسب برای استفاده روزانه و محیط‌های با نور کافی.

  • پس‌زمینه: روشن و تمیز
  • متن: تیره برای کنتراست بهتر
  • رنگ‌های برند: روشن و زنده

Dark (تاریک)

تم تاریک مدرن، ایده‌آل برای محیط‌های کم‌نور و استفاده شبانه.

  • پس‌زمینه: تیره با سطوح مختلف
  • متن: روشن برای خوانایی
  • رنگ‌های برند: تیره‌تر با کنتراست بالا

Classic Dark (تاریک کلاسیک)

تم تاریک کلاسیک با کنتراست بالاتر، مناسب برای کاربرانی که تضاد بیشتری می‌خواهند.

  • پس‌زمینه: تیره‌تر از Dark
  • متن: روشن‌تر با کنتراست بیشتر
  • رنگ‌های برند: عینا مثل Dark

نحوه استفاده

تمام رنگ‌ها به صورت خودکار در تم‌های مختلف تغییر می‌کنند و نیازی به تغییر کد نیست:

// این کد در هر ۳ تم به درستی کار می‌کند
<div className="bg-surface-100 text-foreground border border-default">
  محتوا
</div>

تم‌ها از طریق CSS Variables کنترل می‌شوند:

/* Light Theme */
[data-theme='light'] {
  --background-default: 0deg 0% 99.2%;
  --foreground-default: 0deg 0% 9%;
  /* ... */
}

/* Dark Theme */
[data-theme='dark'] {
  --background-default: 0deg 0% 11%;
  --foreground-default: 0deg 0% 92.9%;
  /* ... */
}

/* Classic Dark Theme */
[data-theme='classic-dark'] {
  --background-default: 0deg 0% 9%;
  --foreground-default: 0deg 0% 92.9%;
  /* ... */
}

رنگ‌های Code Block

رنگ‌های مخصوص برای syntax highlighting در code block ها:

رنگکاربردمثال
--code-block-1Keywords و Operatorsfunction, const, =>
--code-block-2Strings و Text"Hello World"
--code-block-3Numbers و Values123, true, false
--code-block-4Functions و Methodsconsole.log()
--code-block-5Comments// توضیح

این رنگ‌ها نیز در هر سه تم به درستی کار می‌کنند و خوانایی کد را تضمین می‌کنند.

// نمونه استفاده - این رنگ‌ها به صورت خودکار اعمال می‌شوند
const greeting = "سلام"; // متغیر با رنگ code-block-2
function sayHello() { // تابع با رنگ code-block-4
  console.log(greeting); // استفاده از رنگ‌های مختلف
}

خلاصه و نکات نهایی

✅ استفاده کنید:

  • کلاس‌های سمانتیک (text-foreground, bg-surface-100, etc.)
  • سطح‌بندی برای ایجاد عمق (surface-75 → surface-400)
  • شفافیت برای حالت‌های مختلف (bg-brand/50)

❌ استفاده نکنید:

  • رنگ‌های مستقیم Tailwind (text-gray-500)
  • بیش از حد رنگ تاکیدی (text-destructive همه جا)
  • ترکیب‌های با کنتراست کم

🎨 یادتان باشد:

  • تمام رنگ‌ها در سه تم کار می‌کنند
  • کنتراست حداقل 4.5:1 برای متن
  • از opacity برای ایجاد variations استفاده کنید
ویرایش در GitHub

نصب و راه‌اندازی

راهنمای نصب دیزاین سیستم پرتو

پالت‌های رنگی

تمام رنگ‌های پایه و scale های رنگی موجود در سیستم - از Supabase Design System

در این صفحه

تغییر تم
اصول پایه
هدف سیستم رنگ‌بندی
بخش اول: استفاده از رنگ
رنگ‌های متن (Text)
سطوح مختلف متن
نمونه کد
رنگ‌های سمانتیک متن
رنگ‌های پس‌زمینه (Background)
پس‌زمینه اپلیکیشن
پس‌زمینه‌ها و سطوح (Surfaces)
سطوح در سایت مستندات و وب‌سایت
سطوح در داشبورد (Studio)
فضای خالی و گرید داده‌ها
جدول استفاده از پس‌زمینه
Overlay ها
پس‌زمینه‌های ویژه
رنگ‌های حاشیه (Border)
نمونه کد
رنگ‌های دیگر
نحوه استفاده
نمونه‌های کاربردی
کارت با سطوح مختلف
فرم با validation
دکمه‌ها با variant های مختلف
Modal و Overlay
نوتیفیکیشن و Alert
بهترین روش‌ها
استفاده از کلاس‌های سمانتیک
رعایت سلسله‌مراتب
استفاده محدود از رنگ‌های تاکیدی
کنتراست مناسب
پشتیبانی از شفافیت (Opacity)
ترکیب رنگ‌ها (Mixing Colors)
بخش دوم: پالت‌های رنگی
بخش سوم: تم‌ها و تنظیمات پیشرفته
تم‌های مختلف
Light (روشن)
Dark (تاریک)
Classic Dark (تاریک کلاسیک)
نحوه استفاده
رنگ‌های Code Block
خلاصه و نکات نهایی