مدیر استایل (Style Manager)

Style Manager مرکزی‌ترین مکان در Bricks برای مدیریت design system primitive ها و ابزارهای styling قابل استفاده مجدد است. theme style ها، class ها، variable ها، رنگ‌ها، scale ها و CSS وارداتی را در یک interface واحد داخل سازنده گرد هم می‌آورد.

هدف آن متمرکز کردن تصمیمات styling است تا بتوانید رنگ‌ها، spacing، typography و قوانین layout را در یک جا تغییر دهید بدون اینکه در panel های مختلف بگردید.

محتوای Style Manager

Style Manager در هشت تب سازماندهی شده است:

1. Theme styles
2. Classes
3. Variables
4. Colors
5. Typography
6. Spacing
7. Framework
8. Settings

---

استایل‌های تم (Theme styles)

Theme Styles style های پیش‌فرض global را برای HTML element ها و Bricks element ها تعریف می‌کنند.

موارد استفاده معمول شامل:

• Typography پایه برای heading ها و body text
• style های پیش‌فرض button و form
• رنگ‌ها و spacing global
• پیش‌فرض‌های responsive
• حالت‌های hover و focus global

Theme Styles مبتنی بر condition هستند. می‌توانید آن‌ها را به کل سایت، template های خاص یا صفحات خاص اعمال کنید. از breakpoint و pseudo-class پشتیبانی می‌کنند که آن‌ها را برای تعریف مرکزی رفتار interaction مناسب می‌سازد.

بیشتر: /builder/styling/theme-styles/

کلاس‌ها (Classes)

Class Manager برای ساخت CSS class های قابل استفاده مجدد است که می‌توان به هر المانی اعمال کرد.

از class ها استفاده کنید وقتی:

• یک style در چندین المان مختلف دوباره استفاده می‌شود
• style یک پیش‌فرض global نیست
• می‌خواهید استفاده مجدد یکپارچه به‌جای کپی کردن مقادیر داشته باشید

Class ها را می‌توان در category ها سازماندهی کرد، قفل کرد و بر اساس usage و status فیلتر کرد.

Theme Styles پیش‌فرض‌ها را تعریف می‌کنند. Class ها المان‌ها را وارد رفتار خاص می‌کنند.

بیشتر: /builder/styling/global-class-manager/

Variables

Variable Manager جایی است که CSS custom properties را به‌عنوان design token تعریف می‌کنید.

Variable ها معمولاً برای موارد زیر استفاده می‌شوند:

• رنگ‌ها
• مقادیر spacing
• Font size ها
• ابعاد layout
• مقادیر عددی قابل استفاده مجدد

به‌جای تکرار اعداد، variable ها را با var(--variable-name) ارجاع می‌دهید. به‌روزرسانی یک variable همه جایی که استفاده می‌شود را به‌روز می‌کند.

Variable ها را می‌توان از CSS یا JSON import کرد، در category ها گروه‌بندی کرد و تغییر نام داد.

بیشتر: /builder/styling/global-variables-manager/

Colors

Color Manager سیستم‌های رنگی structured روی CSS variable ها می‌سازد.

هر رنگ به‌عنوان یک variable ذخیره می‌شود و به‌صورت اختیاری می‌تواند:

• مقادیر light و dark mode داشته باشد
• shade و transparency variant تولید کند
• utility class تولید کند

بیشتر: /builder/features/color-manager/

Typography

تب Typography با استفاده از CSS variable ها و clamp() fluid type scale تولید می‌کند.

به‌جای تنظیم دستی font size ها، تعریف می‌کنید:

• یک base size
• یک scale ratio
• عرض‌های مینیمم و ماکزیمم viewport

از این، Bricks مجموعه‌ای از variable ها تولید می‌کند که به‌صورت یکنواخت بین موبایل و دسکتاپ scale می‌شوند.

Typography scale ها وقتی مفیدند که بخواهید:

• hierarchy یکپارچه
• اندازه‌گیری responsive بدون breakpoint دستی
• تصمیمات font-size کمتر و دلبخواهی

می‌توانید از t-shirt sizing، numeric steps یا نام‌های سفارشی استفاده کنید. Variable های تولیدشده می‌توانند مستقیماً یا از طریق utility class استفاده شوند.

حالت Manual اجازه می‌دهد مقادیر محاسبه‌شده را وقتی کنترل دقیق لازم است override کنید.

Spacing

تب Spacing مقادیر fluid spacing برای margin ها، padding ها و gap ها با استفاده از همان سیستم مبتنی بر scale مثل typography تولید می‌کند.

این کمک می‌کند تا layout rhythm یکپارچه‌ای در تمام صفحات ایجاد شود.

می‌توانید utility class هایی مثل gap-m یا p-l تولید کنید، اما فقط آنچه واقعاً استفاده می‌کنید را تولید کنید.

Framework

تب Framework CSS خارجی را import و به Bricks class ها و variable ها تبدیل می‌کند.

می‌تواند:

• قوانین class را parse کند
• variable ها را از :root extract کند
• style ها را بر اساس intent دسته‌بندی کند
• prefix اعمال کند تا از تداخل جلوگیری کند

این اصلاً برای موارد زیر مفید است:

• migration یا import CSS framework ها
• import stylesheet های CSS سفارشی موجود

تمام import ها را می‌توان قبل از اضافه شدن به‌صورت دستی بررسی کرد.

Settings

تب Settings کنترل می‌کند که typography و spacing scale ها چطور تولید می‌شوند و کدام color mode به‌طور پیش‌فرض استفاده می‌شود.

Color mode

• Light: همیشه در light mode شروع کن
• Dark: همیشه در dark mode شروع کن
• Auto: از system preference پیروی کن

Scale configuration

این تنظیمات typography و spacing را تحت تأثیر قرار می‌دهند:

• HTML font-size برای محاسبات rem
• عرض‌های مینیمم و ماکزیمم viewport

---

کنترل‌های interface و preview

header Style Manager شامل یک دکمه full-screen و یک toggle برای نمایش یا مخفی کردن canvas preview per tab است.

canvas preview صفحه در حال ویرایش را نشان می‌دهد و به‌صورت real time با اعمال تغییرات به‌روز می‌شود. به تغییر breakpoint پاسخ می‌دهد و می‌توان اندازه‌اش را تغییر داد.

---

میانبرهای صفحه‌کلید

می‌توانید با استفاده از number keys بر اساس موقعیتشان بین تب‌های Style Manager جابه‌جا شوید.

همچنین می‌توانید Style Manager popup را با موارد زیر باز و بسته کنید:

CMD + . (macOS) CTRL + . (Windows/Linux)