CSS و استایل

لایه‌بندی فایل‌ها

output.css              ابزارهای کمکی Tailwind (از پیش ساخته)
swiper-bundle.min.css   اسلایدر
superium-palettes.css   ← تنها فایلی که رنگ را مقدار می‌دهد
superium.css            ← پایه و همه‌ی کامپوننت‌ها
superium-<گروه>.css     ← فقط همان گروه صفحات

هر صفحه سه فایل اول را می‌گیرد و بعد فایل گروه خودش را: superium-home.css، superium-shop.css، superium-flow.css یا superium-account.css.

توکن‌ها

هیچ رنگی داخل کامپوننت‌ها hard-code نشده. همه از var(--sp-*) می‌آید:

گروه	نمونه توکن‌ها
برند	`--sp-primary`، `--sp-primary-strong`، `--sp-primary-soft`، `--sp-on-primary`، `--sp-accent`
معنایی	`--sp-success`، `--sp-danger`، `--sp-warning`، `--sp-info`
سطح و متن	`--sp-bg`، `--sp-surface`، `--sp-surface-2`، `--sp-text`، `--sp-text-soft`، `--sp-muted`، `--sp-border`
شکل و عمق	`--sp-radius`، `--sp-radius-lg`، `--sp-radius-pill`، `--sp-shadow`، `--sp-shadow-md`
چیدمان	`--sp-container`، `--sp-gutter`، `--sp-section-y`، `--sp-header-h`
تایپ	`--sp-font`، `--sp-font-display`
حرکت	`--sp-ease`، `--sp-dur`

قاعده‌ی راست‌به‌چپ

در استایل‌های قالب هیچ left یا right فیزیکی وجود ندارد. همه‌جا از ویژگی‌های منطقی استفاده شده:

به‌جای	بنویسید
`width` / `height`	`inline-size` / `block-size`
`margin-left` / `margin-right`	`margin-inline-start` / `margin-inline-end`
`padding-top` / `padding-bottom`	`padding-block-start` / `padding-block-end`
`left: 0; right: 0`	`inset-inline: 0`
`border-left`	`border-inline-start`
`text-align: right`	`text-align: start`

به این ترتیب اگر روزی نسخه‌ی چپ‌به‌راست خواستید، فقط dir="ltr" کافی است و هیچ CSS‌ای عوض نمی‌شود.

استثنا فقط جایی است که جهت، ذاتیِ خودِ تصویر باشد - مثل تصویر کامیون در بنر ارسال رایگان که در همان جهتی حرکت می‌کند که دماغه‌اش نشان می‌دهد. این موارد در کد کامنت شده‌اند.

نام‌گذاری کلاس‌ها

پیشوند	یعنی
`sp-`	قالب فروشگاه - همه‌ی صفحات
`d-`	فقط `demo.html`
`docs-`	فقط همین مستندات

با حذف demo.html و superium-demo.css، هیچ چیزی از فروشگاه نمی‌شکند.

کامپوننت‌های اصلی در `superium.css`

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

01 فونت و پایه            07 سبد و منوی کاربر        13 بنرها
02 چیدمان و کانتینر       08 نوار ناوبری و مگامنو    14 بردکرامب
03 دکمه‌ها                09 درور موبایل             15 فوتر
04 فرم‌ها                 10 نمایش دسته‌بندی‌ها       16 FAB و پشتیبانی
05 بج، چیپ، پیل           11 کارت کالا               17 توست، مودال، شیت
06 هدر                    12 ریل‌ها و اسلایدر        18 حالت خالی، اسکلتون
                                                     19 ابزارهای کمکی

بخش «۱۰ - نمایش دسته‌بندی‌ها» چهار گونه دارد که هر صفحه‌ی اصلی یکی را استفاده می‌کند: پیل گرد، برد کارتی، کاشی تک‌رنگ و فهرست شماره‌دار.

افزودن کامپوننت تازه

کلاس را با پیشوند sp- بنویسید.
فقط از var(--sp-*) رنگ بگیرید - هیچ رنگ ثابتی ننویسید.
فقط ویژگی منطقی استفاده کنید.
اگر مخصوص یک گروه صفحه است، در superium-<گروه>.css بگذارید؛ اگر عمومی است در superium.css.

نمونه:

.sp-badge--new {
  padding: 3px 10px;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--sp-on-primary);
  background: var(--sp-primary);
  border-radius: var(--sp-radius-pill);
}

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

روی تصویری که در ستون باریک می‌نشیند هرگز max-inline-size پیکسلی بدون inline-size: 100% نگذارید، و ستون‌های گریدی که تصویر می‌گیرند را با minmax(0, …) تعریف کنید. در غیر این صورت گرید در عرض کم سرریز می‌کند.

حرکت و دسترس‌پذیری

انیمیشن‌ها کوتاه و از توکن --sp-dur و --sp-ease تغذیه می‌شوند، و بخش‌های متحرک با @media (prefers-reduced-motion: reduce) خاموش می‌شوند.