/* * مقیاس طراحی سالن‌تو — پایه‌ی استاندارد * =========================================================================== * * چرا این فایل هست * ---------------- * اندازه‌گیری روی CSS موجود نشان داد رنگ‌ها سالم‌اند (۵۴۰۷ استفاده از توکن * در برابر ۸۴۴ رنگ دستی) ولی *شکل، فاصله و تایپ* سیستمی ندارند: * * border-radius : ۱۳۶ مقدار یکتا * box-shadow : ۲۷۲ مقدار یکتا * font-size : ۲۴۱ مقدار یکتا * * این یعنی هر کامپوننت اندازه‌ی خودش را از نو اختراع کرده. همین است که * صفحه‌ها حس «چند برنامه‌ی مختلف» می‌دهند، حتی وقتی پالت یکی است. * * سه لایه * ------- * پایه (مقدار خام) → معنایی (نقش) → کامپوننت * کامپوننت‌ها هرگز مقدار خام نمی‌بینند؛ فقط نقش را صدا می‌زنند. این * می‌گذارد بعداً یک نقش را عوض کنیم بدون گشتن در ۱٫۴ مگابایت CSS. * * استانداردهایی که اعمال شده * -------------------------- * • WCAG 2.2 §1.4.3 — متن معمولی ۴٫۵:۱ · متن درشت ۳:۱ * • WCAG 2.2 §1.4.11 — عناصر رابط و مرزهای شناسایی‌کننده ۳:۱ * • شبکه‌ی ۴ پیکسلی — نقطه‌ی هم‌گراییِ Material، Tailwind و Apple HIG * • مقیاس پیمانه‌ای ۱٫۱۵ برای تایپ، لنگرانداخته روی ۱۳px * * ⚠ دو انحراف آگاهانه از عرف جهانی، با دلیل: * * ۱. متن پایه ۱۳px است نه ۱۶px. کل برنامه روی ۱۲٫۵–۱۳ ساخته شده و * بردنش به ۱۶ یعنی بازچینشِ هر صفحه. این تصمیمِ محصول است نه * توکن؛ اینجا فقط ثبت می‌شود که آگاهانه است. * * ۲. هدف لمسیِ ۴۴px (Apple HIG) فقط در موبایل تضمین می‌شود. کنترل‌های * دسکتاپ ۳۸px‌اند که برای ماوس قابل قبول است ولی زیر عرف لمسی. * * @package Salonto\DesignSystem * @since 6.50.0 */ :root { /* =========================================================================== لایه ۱ — پایه: مقدارهای خام =========================================================================== هیچ کامپوننتی نباید این‌ها را مستقیم صدا بزند. */ /* ---- فاصله: شبکه‌ی ۴ پیکسلی ---- */ --s-space-0: 0; --s-space-1: 4px; --s-space-2: 8px; --s-space-3: 12px; --s-space-4: 16px; --s-space-5: 20px; --s-space-6: 24px; --s-space-8: 32px; --s-space-10: 40px; /* ---- تایپ: مقیاس پیمانه‌ای ≈۱٫۱۵ روی پایه‌ی ۱۳ ---- عمداً از DNA مودال گرفته شده (۱۱ / ۱۲٫۵ / ۱۳ / ۱۶ / ۲۰) و گرد شده. */ --s-font-2xs: 11px; /* ریزمتن، برچسب بالای عنوان */ --s-font-xs: 12px; /* متادیتا، زیرنویس */ --s-font-sm: 13px; /* متن پایه — لنگرِ مقیاس */ --s-font-md: 15px; /* تأکید، عدد شاخص کوچک */ --s-font-lg: 17px; /* عنوان بخش */ --s-font-xl: 20px; /* عنوان صفحه */ --s-font-2xl: 24px; /* عنوان بزرگ، عدد KPI */ /* ---- وزن ---- * پله‌ها به وزن‌هایی بسته‌اند که یکان‌بخ واقعاً دارد: * 400 Regular · 600 SemiBold · 700 Bold · 800 ExtraBold * * ⚠ این خانواده وزنِ ۵۰۰ (Medium) ندارد. اگر medium را روی ۵۰۰ * می‌گذاشتیم، مرورگر طبق قاعده‌ی تطبیقِ قلم آن را به ۴۰۰ فرومی‌کاست و * پله‌ای می‌داشتیم که هیچ فرقی با normal نمی‌کرد — توکنی که دروغ * می‌گوید. پس medium نامش می‌ماند ولی به ۶۰۰ اشاره می‌کند. */ --s-weight-normal: 400; --s-weight-medium: 600; --s-weight-semibold: 600; --s-weight-bold: 700; --s-weight-heavy: 800; /* ---- ارتفاع خط: بدون واحد تا با اندازه مقیاس بگیرد ---- */ --s-leading-tight: 1.25; /* عنوان */ --s-leading-snug: 1.5; /* برچسب، دکمه */ --s-leading-normal: 1.75; /* متن فارسی — کمی بازتر از لاتین */ --s-leading-loose: 2; /* پاراگراف بلند */ /* ---- شعاع: پنج پله ---- */ --s-radius-xs: 6px; /* نشانگر ریز */ --s-radius-sm: 8px; /* تراشه، جعبه‌ی آیکون */ --s-radius-md: 12px; /* کنترل: دکمه، ورودی */ --s-radius-lg: 16px; /* کارت */ --s-radius-xl: 28px; /* پنل مودال — عینِ مقدارِ مرجع (.snx__p) */ --s-radius-pill: 999px; /* ---- ارتفاع (سایه): چهار پله ---- از مقادیر واقعیِ مودال و پرونده مشتری گرفته شده، نه اختراعِ تازه. */ --s-shadow-0: none; --s-shadow-1: 0 2px 8px rgba(22, 61, 66, .05); /* محیطی — کارت آرام */ --s-shadow-2: 0 5px 16px rgba(21, 82, 91, .12); /* برجسته — کارت فعال */ --s-shadow-3: 0 12px 34px rgba(8, 24, 29, .28); /* شناور — کشو، منو */ --s-shadow-4: 0 30px 90px rgba(15, 44, 49, .28); /* مودال */ /* ---- آیکون: سه اندازه، ضخامتِ *دیده‌شده‌ی* ثابت ---- ⚠ اینجا یک اشتباهِ رایج هست که باید از آن پرهیز کرد: «همه‌ی آیکون‌ها stroke-width یکسان بگیرند» غلط است. stroke-width در واحدِ viewBox است، نه پیکسل. با viewBox 0 0 24 24، ضخامتِ واقعی روی صفحه = stroke × (اندازه ÷ ۲۴). پس یک مقدارِ ثابت، آیکون کوچک را نازک و آیکون بزرگ را کلفت نشان می‌دهد. اندازه‌گیری روی هاب این را ثابت کرد: ضخامتِ رندرشده بین ۱٫۰۳ و ۱٫۶۵ پیکسل نوسان داشت — ۶۰٪ اختلاف بین آیکون‌هایی که باید یکسان دیده شوند. پس هر پله ضخامتِ خودش را دارد، طوری که همه ≈۱٫۲px رندر شوند — همان وزنی که مودالِ مرجع دارد (۱٫۸ روی ۱۶px). */ --s-icon-sm: 14px; --s-icon-sm-stroke: 2.05; /* 2.05 × 14/24 = 1.20px */ --s-icon-md: 16px; --s-icon-md-stroke: 1.8; /* 1.80 × 16/24 = 1.20px */ --s-icon-lg: 20px; --s-icon-lg-stroke: 1.45; /* 1.45 × 20/24 = 1.21px */ /* آیکون‌های تزئینیِ بزرگ (۴۰px+) عمداً بیرون از این مقیاس‌اند؛ ضخامتِ بیشترشان انتخابِ طراحی است نه ناسازگاری. */ /* ---- حرکت ---- */ --s-motion-fast: .14s; --s-motion-base: .2s; --s-ease: cubic-bezier(.2, 0, .2, 1); /* ---- اندازه‌ی کنترل ---- */ --s-control-h: 38px; /* دسکتاپ */ --s-control-h-touch: 44px; /* موبایل — حداقلِ Apple HIG */ /* =========================================================================== لایه ۲ — معنایی: نقش‌ها =========================================================================== کامپوننت‌ها *فقط* این‌ها را صدا می‌زنند. ⚠ مقادیر رنگ اینجا با WCAG سنجیده شده‌اند، نه حدس زده. هر جفتی که استفاده می‌شود آزموده شد و آن‌هایی که رد می‌کردند با کمترین جابه‌جاییِ روشنایی اصلاح شدند — رنگ‌مایه‌ی برند دست‌نخورده است. */ /* ---- سطح‌ها ---- */ --s-bg-page: var(--salonto-background); /* #fbf8f7 */ --s-bg-surface: var(--salonto-surface); /* #ffffff */ --s-bg-muted: var(--salonto-surface-muted); /* #f4f8f7 */ /* ---- متن ---- text و text-deep از قبل عالی بودند (۱۲٫۶ و ۱۳٫۳). */ --s-text-strong: var(--salonto-text-deep); /* عنوان 13.28:1 ✓ */ --s-text-base: var(--salonto-text); /* پایه 12.56:1 ✓ */ --s-text-muted: #667a7f; /* متادیتا 4.16 → 4.51:1 ✓ (بود #6b8085) */ --s-text-subtle: var(--salonto-text-subtle); /* ریزعنوان 5.30:1 ✓ */ --s-text-on-fill: #ffffff; /* ---- برند ---- ⚠ مهم‌ترین اصلاح: متن سفید روی #0b8f87 نسبت ۳٫۹۷:۱ می‌داد و دکمه‌ی اصلیِ کل برنامه استاندارد را رد می‌کرد. #00857e نسبت ۴٫۵۱:۱ می‌دهد با فقط ۳٫۱٪ تیره‌ترشدن — تفاوتش با چشم دیده نمی‌شود. */ --s-brand: #00857e; /* 4.51:1 با سفید ✓ (بود #0b8f87 = 3.97) */ --s-brand-hover: var(--salonto-primary-hover); /* #08766f 5.48:1 ✓ */ --s-brand-soft: var(--salonto-primary-soft); /* #e8f6f3 */ --s-brand-ink: var(--salonto-teal-750); /* متن روی brand-soft 5.64:1 ✓ */ /* ---- وضعیت ---- */ --s-success: var(--salonto-success); /* 5.64:1 ✓ */ --s-success-soft: var(--salonto-primary-soft); /* قرارداد جاافتاده‌ی خانه */ --s-warning: var(--salonto-warning); /* 5.53:1 ✓ */ --s-warning-soft: var(--salonto-warning-soft); --s-warning-ink: var(--salonto-amber-900); /* 7.21:1 ✓ */ /* ---- مرزها ---- ⚠ تفکیک عمدی. WCAG §1.4.11 نسبت ۳:۱ را برای مرزی می‌خواهد که *تنها راه شناسایی* یک کنترل است — نه برای هر خط تزئینی. پس: • divider : جداکننده‌ی تزئینی، ۱٫۲۶:۱ مجاز است • control : مرزِ ورودی و دکمه، باید ۳:۱ باشد */ --s-border-divider: var(--salonto-border); /* #d9e8e5 تزئینی */ --s-border-control: #6f9d98; /* 3.02:1 ✓ (بود #9fcfc9 = 1.72) */ --s-border-strong: var(--salonto-border-strong); /* ---- حلقه‌ی فوکوس ---- جدا از رنگ، چون فوکوس باید در هر پس‌زمینه‌ای دیده شود. */ --s-focus-ring: 0 0 0 3px var(--salonto-primary-soft); --s-focus-outline: 2px solid var(--s-brand); /* =========================================================================== لایه ۳ — کامپوننت =========================================================================== فقط برای کامپوننت‌هایی که در چند ماژول تکرار می‌شوند. */ /* ---- دکمه ---- */ --s-btn-h: var(--s-control-h); --s-btn-px: var(--s-space-4); --s-btn-radius: var(--s-radius-md); --s-btn-font: var(--s-font-sm); --s-btn-weight: var(--s-weight-semibold); --s-btn-primary-bg: var(--s-brand); --s-btn-primary-bg-hover: var(--s-brand-hover); --s-btn-primary-fg: var(--s-text-on-fill); --s-btn-secondary-bg: var(--s-bg-surface); --s-btn-secondary-bg-hover: var(--s-bg-muted); --s-btn-secondary-fg: var(--salonto-slate-700); /* 7.59:1 ✓ */ --s-btn-secondary-border: var(--s-border-control); --s-btn-risk-bg: var(--s-warning-soft); --s-btn-risk-fg: var(--s-warning-ink); --s-btn-risk-border: var(--salonto-amber-300); --s-btn-disabled-bg: var(--s-bg-muted); --s-btn-disabled-fg: var(--s-text-muted); /* ---- کارت ---- */ --s-card-bg: var(--s-bg-surface); --s-card-radius: var(--s-radius-lg); --s-card-border: 1px solid var(--s-border-divider); --s-card-shadow: var(--s-shadow-1); --s-card-pad: var(--s-space-4); /* ---- ورودی ---- مرزِ کنترل، نه تزئینی — چون تنها چیزی است که مرزِ ورودی را نشان می‌دهد. */ --s-input-h: var(--s-control-h); --s-input-bg: var(--s-bg-surface); --s-input-fg: var(--s-text-base); --s-input-border: 1px solid var(--s-border-control); --s-input-radius: var(--s-radius-md); --s-input-px: var(--s-space-3); /* ---- تراشه / برچسب ---- */ --s-chip-h: 26px; --s-chip-px: var(--s-space-3); --s-chip-radius: var(--s-radius-pill); --s-chip-font: var(--s-font-xs); --s-chip-weight: var(--s-weight-semibold); --s-chip-bg: var(--s-bg-muted); --s-chip-fg: var(--s-text-subtle); --s-chip-on-bg: var(--s-brand-soft); --s-chip-on-fg: var(--s-brand-ink); /* ---- جدول ---- */ --s-table-head-bg: var(--s-bg-muted); --s-table-head-font: var(--s-font-xs); --s-table-head-weight: var(--s-weight-bold); --s-table-cell-py: var(--s-space-3); --s-table-cell-px: var(--s-space-4); --s-table-divider: 1px solid var(--s-border-divider); /* ---- مودال — از سیستم مودالِ موجود، که مرجعِ تأییدشده است ---- */ --s-modal-radius: var(--s-radius-xl); --s-modal-shadow: var(--s-shadow-4); --s-modal-scrim: rgba(22, 45, 51, .26); --s-modal-blur: blur(18px) saturate(.82); --s-modal-z: 2147483000; } /* --------------------------------------------------------------------------- هدف لمسی در موبایل — Apple HIG حداقل ۴۴×۴۴ --------------------------------------------------------------------------- */ @media (max-width: 767px) { :root { --s-btn-h: var(--s-control-h-touch); --s-input-h: var(--s-control-h-touch); --s-chip-h: 32px; } } /* --------------------------------------------------------------------------- احترام به ترجیح کاربر --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --s-motion-fast: 0s; --s-motion-base: 0s; } }