مدیر رنگ (Color Manager)

مدیر رنگ (Color Manager) به شما اجازه می‌دهد توکن‌های رنگی برای سایت خود تعریف و نگهداری کنید. هر رنگ به‌صورت یک CSS variable ذخیره می‌شود و به‌صورت اختیاری می‌تواند از حالت تاریک، سایه‌ها، هارمونی‌ها و کلاس‌های utility پشتیبانی کند.

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

شروع به کار

برای دسترسی به مدیر رنگ:

1. سازنده را باز کنید
2. روی آیکون «Gear» در سمت چپ toolbar سازنده کلیک کنید
3. تب «Colors» را باز کنید تا به مدیر رنگ دسترسی داشته باشید

اگر هنوز هیچ palette ندارید، یک prompt برای ساخت اولین palette از ابتدا یا import کردن یک color palette موجود (فایل JSON) نمایش داده می‌شود.

ساخت و مدیریت palette ها

ساخت یک palette جدید

1. روی دکمه Add Palette (آیکون plus) کلیک کنید
2. یک نام برای palette خود وارد کنید (مثلاً «Brand Colors» یا «Website Theme»)
3. روی Create کلیک کنید

جابه‌جایی بین palette ها

از dropdown در بالا برای انتخاب palette های مختلف استفاده کنید

تغییر نام یا حذف palette ها

1. روی دکمه Edit (آیکون مداد) در toolbar کلیک کنید
2. برای تغییر نام: در فیلد نام palette کلیک کنید و یک نام جدید تایپ کنید
3. برای حذف: روی دکمه Delete (آیکون سطل زباله) کلیک کنید و تأیید کنید

افزودن رنگ به palette

افزودن یک رنگ جدید

1. به پایین لیست رنگ اسکرول کنید
2. یک نام variable وارد کنید (مثل «primary» یا «brand-blue»)
3. یک رنگ با color picker انتخاب کنید یا یک مقدار رنگ تایپ کنید
4. روی Add color کلیک کنید

ویرایش رنگ‌های موجود

روی نام یا مقدار هر رنگ کلیک کنید تا آن را ویرایش کنید

استفاده از حالت تاریک (Dark Mode)

حالت تاریک به شما اجازه می‌دهد رنگ‌های مختلفی برای تم‌های روشن و تاریک تعریف کنید:

1. روی آیکون «Edit» روی هر رنگ کلیک کنید
2. تیک «Enable dark mode» را بزنید
3. با استفاده از color picker یک رنگ جداگانه برای حالت تاریک تنظیم کنید
4. نمونه رنگ هر دو نسخه روشن و تاریک را نشان می‌دهد

ساخت سایه‌های رنگ (Color Shades)

Shade ها تغییرات رنگ پایه شما با روشنایی یا شفافیت مختلف هستند:

1. روی آیکون «Edit» روی هر رنگ کلیک کنید

2. نوع shade ای که می‌خواهید بسازید را فعال کنید

3. Light shades: نسخه‌های روشن‌تر رنگ شما

4. Dark shades: نسخه‌های تیره‌تر
5. Transparent shades: نسخه‌های نیمه‌شفاف

تولید هارمونی‌های رنگ (Color Harmonies)

هارمونی‌های رنگ به‌طور خودکار ترکیب‌های رنگی متناسب ایجاد می‌کنند:

1. یک رنگ پایه انتخاب کنید
2. روی دکمه Harmony (آیکون پالت طراحی) کلیک کنید

3. یک نوع هارمونی انتخاب کنید:

4. Analogous: رنگ‌های کنار هم در چرخه رنگ

5. Monochromatic: سایه‌های مختلف همان رنگ
6. Complementary: رنگ‌های مقابل هم در چرخه رنگ
7. Split Complementary: یک رنگ مکمل به دو تقسیم شده
8. Triadic: سه رنگ با فاصله یکسان

9. Tetradic: چهار رنگ در یک الگوی مستطیلی

10. رنگ‌های تولیدشده را پیش‌نمایش کنید

11. روی Generate colors کلیک کنید تا به palette اضافه شوند

راه‌اندازی کلاس‌های utility

کلاس‌های utility به شما اجازه می‌دهند بدون CSS سفارشی، رنگ‌ها را سریعاً به المان‌ها اعمال کنید:

1. یک رنگ را ویرایش کنید
2. به پایین به «Utility classes» اسکرول کنید

3. تیک ویژگی‌هایی که می‌خواهید را بزنید:

4. Background: برای رنگ‌های پس‌زمینه

5. Text: برای رنگ‌های متن
6. Border: برای رنگ‌های border
7. Outline: برای رنگ‌های outline
8. Fill: برای رنگ‌های fill در SVG
9. Stroke: برای رنگ‌های stroke در SVG

پس از فعال‌سازی، کلاس‌هایی مثل bg-primary، text-primary و غیره هنگام ویرایش المان‌ها در دسترس خواهند بود.

Import و Export palette ها

Import کردن palette ها

1. روی دکمه Import (آیکون دانلود) کلیک کنید
2. یک فایل JSON را drag & drop کنید یا روی آن کلیک کنید تا مرور کنید
3. سیستم رنگ‌های شما را اعتبارسنجی و import می‌کند
4. برای هر palette import شده، پیام‌های موفقیت یا خطا نمایش داده می‌شوند

Export کردن palette ها

دو روش برای export کردن رنگ‌های شما وجود دارد:

1. روی دکمه Export (آیکون آپلود) کلیک کنید تا به‌صورت JSON export شود (برای import در سایت‌های Bricks دیگر)
2. روی دکمه «Generated CSS» کلیک کنید تا CSS تولیدشده کپی شود