/* =================================================================== سیستم طراحی آراز — یک فایل، چهار برنامه =================================================================== این فایل در هر ۴ برنامه لود می‌شود (آخر از همه) و چهار کار می‌کند: ۱. فونت Vazirmatn را محلی سرو می‌کند ۲. یک پالت و مقیاس واحد تعریف می‌کند (az-*) — تولیدشده از tokens.json ۳. همان پالت را برای **حالت تیره** دوباره تعریف می‌کند (از همان فایل) ۴. توکن‌های قدیمیِ هر برنامه را روی همان پالت می‌نگارد، تا بدون بازنویسی استایل‌های موجود، همه یک‌شکل شوند منبع رنگ: فایل لوگوی آراز — سرمه‌ای #143f91، قرمز #d71921 ⚠ رنگ، سایه، فاصله، شعاع و مقیاسِ متن این‌جا ویرایش نمی‌شود: منبعشان tokens.json (کنارِ همین فایل؛ همان فایلِ آرتیفکتِ «سیستم طراحی» در claude.ai) است و `node scripts/design-tokens.mjs` بلوکِ بینِ نشانگرهای @generated:palette را می‌سازد؛ `--check` در test:contract هر ویرایشِ دستیِ داخلِ نشانگرها را قرمز می‌کند. بقیهٔ فایل (فونت، حرکت، گرادیان، تراکم، قاعده‌های پایه، نگاشتِ قدیمی، موبایل، چاپ) دستی است. شرح: notes/03-design.md، ۲۷ مهر ۱۴۰۵. ── قاعدهٔ حالتِ تیره ──────────────────────────────────────────────── ⚠ رمپِ `--az-n-*` **معنایی** است، نه توصیفی: `--az-n-0` یعنی «سطح» و `--az-n-900` یعنی «پررنگ‌ترین متن». در حالتِ روشن اولی سفید است و دومی تقریبا مشکی؛ در حالتِ تیره دقیقا برعکس. به همین دلیل کلِ سامانه فقط با بازتعریفِ همین رمپ تیره می‌شود و هیچ قاعدهٔ چیدمانی لازم نیست عوض شود. ⚠ پس **هرگز رنگِ خام ننویسید** — نه `#fff`، نه `#000`، نه یک خاکستریِ دستی. هر رنگِ خامی که در حالتِ روشن درست به‌نظر می‌رسد، در تیره یا نامرئی می‌شود یا مثل یک لکه می‌زند. اگر توکنِ لازم را ندارید، در tokens.json اضافه‌اش کنید و **حتما جفتِ تیره‌اش را هم بنویسید** (`"value": { "light": …, "dark": … }`). =================================================================== */ /* ------------------------------------------------------------ فونت */ /* ⚠ شش فایلِ زیر **ایستا**‌اند (جدولِ fvar ندارند؛ سنجیده ۲۷ مهر ۱۴۰۵): فقط ۴۰۰، ۶۰۰ و ۷۰۰ وجود دارد. هر وزنِ دیگری را مرورگر بی‌صدا به نزدیک‌ترین فایل می‌برد — ۵۰۰ ⇒ ۴۰۰، ۵۵۰ ⇒ ۶۰۰، ۶۵۰ ⇒ ۷۰۰. پس در CSS فقط همین سه وزن نوشته می‌شود (۱۴ تا ۶۵۰ و ۳ تا ۵۵۰ِ shell.css همان روز ۷۰۰ و ۶۰۰ شدند، بی‌تغییرِ ظاهر). وزنِ میانی (۵۵۰/۶۵۰) فقط با Vazirmatnِ متغیر ممکن است: یک فایل برای هر زیرمجموعه با `font-weight: 100 900`، از انتشارِ خودِ فونت، در همین پوشهٔ fonts/ — نه CDN. */ @font-face { font-family:'Vazirmatn'; src:url('fonts/vazirmatn-arabic-400.woff2') format('woff2'); font-weight:400; font-display:swap; unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF,U+200C; } @font-face { font-family:'Vazirmatn'; src:url('fonts/vazirmatn-arabic-600.woff2') format('woff2'); font-weight:600; font-display:swap; unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF,U+200C; } @font-face { font-family:'Vazirmatn'; src:url('fonts/vazirmatn-arabic-700.woff2') format('woff2'); font-weight:700; font-display:swap; unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF,U+200C; } @font-face { font-family:'Vazirmatn'; src:url('fonts/vazirmatn-latin-400.woff2') format('woff2'); font-weight:400; font-display:swap; } @font-face { font-family:'Vazirmatn'; src:url('fonts/vazirmatn-latin-600.woff2') format('woff2'); font-weight:600; font-display:swap; } @font-face { font-family:'Vazirmatn'; src:url('fonts/vazirmatn-latin-700.woff2') format('woff2'); font-weight:700; font-display:swap; } /* «:root:root» عمدی است، نه اشتباه تایپی. در برنامه‌های React، باندلِ Vite بعد از این فایل لود می‌شود و :root خودشان بر ما غالب می‌شد. با تکرار انتخابگر، وزن (specificity) بالاتر می‌رود و نگاشت توکن‌ها مستقل از ترتیب لود برنده می‌شود. */ /* @generated:palette start */ /* ⚠ تولیدشده از frontend/shared-public/tokens.json با scripts/design-tokens.mjs — دستی ویرایش نکنید. رنگ یا اندازه را در tokens.json عوض کنید و `node scripts/design-tokens.mjs` بزنید؛ `--check` در test:contract هر تفاوتِ دستی را قرمز می‌کند. یادداشت‌های فارسی هم از همان فایل می‌آیند (note / rationale). */ :root:root { /* ---------------------------------------------------- پالت سرمه‌ای */ --az-navy-50: #eef3fd; --az-navy-100: #d9e5fa; --az-navy-200: #b4caf3; --az-navy-300: #84a7e7; --az-navy-400: #5182d5; --az-navy-500: #2a5ec1; --az-navy-600: #143f91; /* رنگ اصلی برند */ --az-navy-700: #10327a; --az-navy-800: #0c2760; --az-navy-900: #081a42; /* ------------------------------------------------------- پالت قرمز */ --az-red-50: #fef2f2; --az-red-100: #fde2e3; --az-red-300: #f28d92; --az-red-500: #d71921; /* رنگ تأکید برند */ --az-red-600: #b81219; --az-red-700: #8f0e14; /* -------------------------------------- رمپِ معنایی: سطح ← … ← متن */ /* * ⚠ توصیفی نیست، معنایی است. `n-0` همیشه «سطحِ کارت» است و `n-900` * همیشه «پررنگ‌ترین متن». در حالتِ تیره همین دو سر جابه‌جا می‌شوند. * ته‌رنگِ خیلی کمِ سرمه‌ای عمدی است: خاکستریِ کاملا خنثی کنارِ رنگِ برند * «کثیف» دیده می‌شود. */ --az-n-0: #ffffff; --az-n-25: #fbfcfe; --az-n-50: #f6f8fc; --az-n-100: #eef1f7; --az-n-200: #e1e6f0; --az-n-300: #c9d1e1; /* * ⚠ n-400 فقط تزئینی است: خطِ پررنگِ زیرِ سرستون، لبه، انگشتیِ اسکرول، * شیبِ قابِ عکس. روی سفید ۲٫۵۷ و روی یک‌درمیان ۲٫۳۳ — برای هیچ متنی به کار * نمی‌رود، حتی placeholder، روزِ گذشتهٔ تقویم یا شمارندهٔ کم‌رنگِ پرونده * (۲۷ مهر ۱۴۰۵: هشت متنِ shell.css که از آن می‌خواندند به n-500/n-600 رفتند). * ⚠ پله‌ای بینِ n-400 و n-500 برای متن جا ندارد: روشن‌ترین خاکستری که روی * ردیفِ یک‌درمیان به ۴٫۵ می‌رسد فقط چند واحد از n-500 روشن‌تر است. */ --az-n-400: #97a2b8; /* * ⚠ این یکی با سنجشِ واقعیِ کنتراست انتخاب شده، نه با چشم. مقدارِ اول * (#6b7790) روی سفید دقیقا ۴٫۵ بود ولی روی ردیفِ یک‌درمیان و زمینهٔ * گروه‌شده به ۴٫۰۸ می‌افتاد — یعنی متنِ کم‌رنگِ جدول‌ها (نوعِ محصول، * تاریخ، «مورد یافت نشد») زیرِ حدِ AA بود. مقدارِ دوم (#636e86) روی آن سه * زمینه گذشت ولی روی نوارِ کناری (--az-side-bg) ۴٫۴۴ و روی پُرشدگیِ ورودی * (--az-fill روی کارت) ۴٫۳۷ بود — عنوانِ دسته و کلیدِ میان‌برِ ستون زیرِ * AA (۲۷ مهر ۱۴۰۵). مقدارِ فعلی روی هر شش زمینه بالای ۴٫۵ است: * سفید ۵٫۳۵ · n-25 ۵٫۲۱ · یک‌درمیان ۴٫۸۵ · گروه‌شده ۴٫۹۰ · نوارِ کناری ۴٫۶۴ * · پُرشدگیِ ورودی روی کارت ۴٫۵۶. فقط پُرشدگیِ ورودی روی ردیفِ یک‌درمیان * ۴٫۱۶ می‌ماند؛ برای همین placeholder در shell.css از n-600 می‌خواند. * سنجه: WCAG 2.x، scripts/contrast در یادداشتِ ۲۷ مهرِ notes/03-design.md. */ --az-n-500: #606b83; --az-n-600: #525d74; --az-n-700: #3a4457; --az-n-800: #242c3b; --az-n-900: #141a26; /* -------------------------------------------------- رنگ‌های وضعیتی */ --az-ok: #0f7b3e; --az-ok-bg: #e6f7ed; --az-warn: #a35a06; --az-warn-bg: #fdf3e2; --az-danger: #b3161d; --az-danger-bg: #fdecec; --az-info: var(--az-navy-600); --az-info-bg: var(--az-navy-50); /* ---------------------------------------------- تایپوگرافی و تراکم */ /* * ⚠ مقیاس عمدا از rem به px ثابت رفت. قبلا .9rem بود که با تنظیمِ فونتِ * مرورگرِ کاربر تغییر می‌کرد و چیدمانِ جدول‌های ۱۲ ستونی را می‌شکست. * ⚠ مقیاس عمدا فشرده است. یک‌بار به ۱۵ پیکسل و فاصلهٔ سطرِ ۱٫۷ بزرگ شد و * بازخورد این بود که برنامه «هوا گرفته»: این‌ها جدولِ ۱۲ ستونیِ مالی‌اند، * نه متنِ خواندنی. تراکم اینجا یک ویژگی است نه عیب. * * ⚠⚠ تراکمِ نمایش — سه حالت، انتخاب با کاربر. * «معمولی» **هیچ صفتی روی ریشه نمی‌گذارد**، پس مقادیرِ زیر همان * تراکمِ تاییدشدهٔ سامانه‌اند و اگر روزی این قابلیت برداشته شود ظاهر * دقیقا همین می‌ماند. دو حالتِ دیگر (بلوک‌های `data-az-density` پایین‌تر، * دستی) فقط همین چند توکن را بازتعریف می‌کنند — هیچ قاعدهٔ چیدمانی عوض * نمی‌شود، دقیقا مثلِ حالتِ تیره. * ⚠ چرا اصلا سه حالت: تراکمِ فشرده عمدی است (جدولِ ۱۲ ستونیِ مالی، نه * متنِ خواندنی) و یک‌بار که بازتر شد کاربر گفت بدتر شد. ولی کسی که * هشت ساعت پشتِ همین جدول می‌نشیند نیازِ دیگری دارد. پس پیش‌فرض عوض * نشد و فقط انتخاب اضافه شد. */ --az-row-pad-y: 9px; /* فاصلهٔ عمودیِ سلول */ --az-row-lh: 1.55; /* فاصلهٔ سطر — ۱٫۷ برای پاراگراف است نه جدول */ --az-text-xs: 11.5px; --az-text-sm: 12.5px; --az-text-md: 14px; /* بدنه */ --az-text-lg: 16px; --az-text-xl: 20px; --az-text-2xl: 26px; --az-leading: 1.5; /* ----------------------------------------------------------- فاصله */ --az-sp-1: 4px; --az-sp-2: 8px; --az-sp-3: 12px; --az-sp-4: 16px; --az-sp-5: 20px; --az-sp-6: 24px; --az-sp-8: 32px; --az-sp-10: 40px; /* ------------------------------------------------------ شعاعِ گوشه */ /* * ⚠ پوستهٔ اپلی (۲۷ شهریور ۱۴۰۵): گوشه‌ها یک پله نرم‌تر شدند. تراکم دست * نخورد — فقط شعاع. مرورگری که `corner-shape: squircle` دارد همین‌ها را با * گوشهٔ پیوسته می‌کشد (پایینِ shell.css). */ --az-r-sm: 8px; --az-r-md: 11px; --az-r-lg: 16px; --az-r-xl: 22px; --az-r-full: 999px; --az-r-card: 16px; /* ------------------------------------------------ زمینه و جداکننده */ /* * زمینهٔ «گروه‌شده»: کارت‌های سفید روی یک خاکستریِ بسیار کم‌رنگ می‌نشینند. * سفید روی سفید یعنی هیچ گروهی از گروهِ دیگر جدا نیست. */ --az-bg-grouped: #f3f5fa; --az-sep: #e1e6f0; /* لبهٔ مویی — دورِ کارت‌ها و سطوح */ --az-hairline: rgba(20, 30, 55, 0.09); /* * ⚠ خطوطِ جدول عمدا **پررنگ‌تر** از خط‌موی سطوح‌اند تا سلول‌ها از هم جدا * دیده شوند. در یک بازطراحی این‌ها محو شدند و جدولِ ۱۲ ستونی تبدیل شد به * یک تودهٔ عدد که چشم نمی‌توانست ردیف را در آن دنبال کند. هر سه‌تای زیر * (خط، یک‌درمیان، هاور) باید در نگاهِ اول دیده شوند. */ --az-grid: #d5dbe7; /* خطِ بینِ سلول‌ها */ --az-row-stripe: #f1f4fa; /* یک‌درمیان */ --az-row-hover: #e4ecfb; --az-sep-soft: var(--az-grid); /* ------------------------------------------- جوهر روی سطحِ سرمه‌ای */ /* * رنگِ «جوهر» روی سطحِ سرمه‌ای (نوارِ بالا، دکمهٔ اصلی، ردیفِ فعال). * ⚠ در حالتِ تیره هم روشن می‌ماند — پس با --az-n-0 یکی نیست. */ --az-on-brand: #ffffff; --az-on-brand-dim: rgba(255, 255, 255, 0.74); --az-on-brand-10: rgba(255, 255, 255, 0.10); --az-on-brand-16: rgba(255, 255, 255, 0.16); --az-on-brand-26: rgba(255, 255, 255, 0.26); /* ----------------------------------------------- رنگِ کاشیِ بخش‌ها */ /* * ⚠ این‌ها **رنگِ برند نیستند** و نباید برای دکمه یا وضعیت استفاده شوند. * تنها کارشان این است که بخش‌های ناوبری در یک نگاه از هم جدا شوند — * چشم رنگ را خیلی سریع‌تر از متن تشخیص می‌دهد. */ --az-t-1: #2a5ec1; /* آبی */ --az-t-2: #0f7b3e; /* سبز */ --az-t-3: #a35a06; /* کهربایی */ --az-t-4: #66268f; /* بنفش — ۱ مهر ۱۴۰۵ پررنگ‌تر شد (خواستهٔ صریح) */ /* * ⚠ فیروزه‌ای کمی تیره‌تر از نمونهٔ اولیه است و این عمدی است: با * #0d7f86 عنوانِ بخش روی ته‌رنگِ خودش کنتراستِ ۴٫۲۹ داشت — تنها رنگی از * این هفت‌تا که زیرِ حدِ AA بود. حالا ۴٫۸۴ است. */ --az-t-5: #0c767c; /* فیروزه‌ای */ --az-t-6: #b3161d; /* قرمز */ --az-t-7: #4a5568; /* خاکستریِ سرد */ /* * ⚠⚠ هشتمی عمدا **فقط برای پُرکردن** است، نه برای متن: کنتراستش روی سفید * ۴٫۳ است و از حدِ AA رد نمی‌شود. برای همین `.az-tone-8` هم ساخته نشد — * آن کلاس تُن را به رنگِ **عنوانِ** بخش می‌برد. تنها مصرفش امروز رنگِ * استانِ کارشناسِ اول روی نقشه است (خواستهٔ صریحِ ۳۱ شهریور ۱۴۰۵: * «رنگِ محمدرضا امیدی را نارنجی کن»). اگر روزی جایی متن رویش نشست، * اول تیره‌ترش کنید. */ --az-t-8: #d2600d; /* نارنجی — فقط پُرکننده */ /* ------------------ ته‌رنگِ ملایمِ هر کاشی — زمینهٔ سرصفحهٔ بخش‌ها */ /* * ⚠ این‌ها عمدا خیلی روشن‌اند (نزدیکِ سفید). بازخوردِ کاربر «رنگ و لعابِ * بیشتر» بود، ولی این‌ها زمینهٔ متن‌اند نه تزیین: هر چیزی تیره‌تر از این * کنتراستِ عنوان را می‌خورد و جدولِ زیرش را هم بی‌جهت شلوغ می‌کند. */ --az-t-1-bg: #eaf1fd; --az-t-2-bg: #e6f7ed; --az-t-3-bg: #fdf3e2; --az-t-4-bg: #f5ecfb; --az-t-5-bg: #e5f6f7; --az-t-6-bg: #fdecec; --az-t-7-bg: #eef1f7; --az-t-8-bg: #fdefe0; /* ---------------------------------------- آب (فقط نقشهٔ نمایندگان) */ /* * ⚠ دریای خزر و خلیج فارس روی نقشه با یک **ماسک** کشیده می‌شوند: خودِ * مرزِ ۳۱ استان از آب بریده می‌شود، پس آب هیچ‌وقت روی خشکیِ ایران * نمی‌افتد و ساحل دقیقا همان‌جایی است که مرز می‌گوید. * ⚠ جفتِ تیره لازم است، وگرنه در حالتِ تیره آبی روشن کنارِ استانِ تیره * چشم را می‌زند و برچسبِ دریا ناخوانا می‌شود. */ --az-water: #cfe3f2; --az-water-edge: #9cc2de; --az-water-ink: #2f6c8c; /* ------------------------------------- کروم و رنگِ تعاملی (معنایی) */ /* * ⚠ این‌ها **جدا از رمپِ سرمه‌ای‌اند** و دلیلِ خوبی دارند. * * رمپِ `--az-navy-*` در حالتِ تیره برعکس می‌شود (۶۰۰ از سرمه‌ای تیره به * آبیِ روشن تبدیل می‌شود) تا **متن و لبه**ی آبی روی زمینهٔ تیره خوانا * بماند. ولی نوارِ بالا و دکمهٔ پُر، رنگ را به‌عنوان **زمینه** استفاده * می‌کنند؛ اگر از همان رمپ می‌خواندند، در حالتِ تیره «متنِ سفید روی * آبیِ روشن» می‌شدند — یعنی تقریبا ناخوانا. * * --az-chrome زمینهٔ نوارِ بالا و نوارِ مدیریت (در هر دو حالت تیره) * --az-accent-solid زمینهٔ دکمهٔ اصلی و ردیفِ انتخاب‌شده * --az-on-accent متن روی هر دوی بالا (در هر دو حالت روشن) * --az-badge-solid نشانِ عددیِ قرمز، که همین مشکل را دارد */ --az-chrome: #143f91; --az-chrome-2: #10327a; --az-accent-solid: #143f91; --az-accent-hover: #10327a; --az-on-accent: #ffffff; --az-badge-solid: #d71921; /* --------------------------------------- نقشهٔ گرما (تقویمِ تحویل) */ /* * ⚠ این‌ها هم مثلِ --az-chrome در هر دو حالت **تیره** می‌مانند، چون متنِ * سفید رویشان می‌نشیند. نمی‌شود از رمپِ سرمه‌ای/قرمز خواند: آن رمپ در * حالتِ تیره برعکس می‌شود و سلولِ تقویم آبیِ روشن با متنِ سفید می‌شد. * * ⚠ و کفِ درصدِ ترکیب باید بالا بماند. با کفِ ۲۲٪ (مقدارِ قبلی) روزِ * کم‌کار یک آبیِ خیلی روشن می‌شد و متنِ سفیدش کنتراستِ ۱٫۵ داشت — عملا * نامرئی. با سنجشِ واقعی، کفِ ۶۶٪ روی این پایه ۵٫۲ می‌دهد. */ --az-heat-cool: #0c2760; --az-heat-hot: #8f0e14; /* ------------------------- رتبهٔ کارنامهٔ کارشناسان (داشبورد فروش) */ /* * هشت پله، هر ۵۰ امتیاز یکی: نوآموز · برنز · نقره‌ای · طلایی · پلاتین · * الماس · پرو · لجند (باز — فقط عدد بالا می‌رود). * * ⚠ در ۱۲ شهریور ۱۴۰۵ کلِ نردبان یک پله بالا رفت (کفِ نوآموز ۵۰) و دو * نامِ آخر «استاد/افسانه» شدند «پرو/لجند» — ولی **کلیدها عمدا دست * نخوردند**، چون نامِ همین توکن‌ها از روی کلید ساخته می‌شود * (`--az-tier-master`, `--az-tier-legend`) و کارنامه‌های ثبت‌شده هم * کلید را ذخیره کرده‌اند، نه عنوان را. * * ⚠ این‌ها هم مثلِ --az-chrome از رمپِ معنایی نمی‌خوانند: نشانِ **پُر** * اند و رنگ را به‌عنوان زمینه استفاده می‌کنند. اگر از رمپ می‌آمدند، در * حالتِ تیره وارونه می‌شدند و «مدالِ طلا»ی سرمه‌ای درمی‌آمد. * * ⚠⚠ هر پله **جفتِ متنِ خودش** را دارد (`-on`) و این تزئین نیست: سه * پلهٔ اول تیره‌اند و متنِ سفید می‌خواهند، دو پلهٔ آخر روشن‌اند و متنِ * تیره. با یک متنِ سفیدِ ثابت، «نقره‌ای» و «طلایی» کنتراستِ ۱٫۸ و ۲٫۱ * می‌گرفتند — یعنی ناخوانا، دقیقا همان تلهٔ مستندِ «رنگِ درست به‌نظر * رسیدن با خوانا بودن یکی نیست». * * سنجیده‌شده (نسبتِ کنتراستِ متن روی زمینه): * نوآموز ۶٫۳ · برنز ۴٫۷ · نقره‌ای ۹٫۱ · طلایی ۷٫۷ · پلاتین ۴٫۶ · * الماس ۴٫۷ · پرو ۷٫۲ · لجند ۶٫۹ */ /* * ⚠ ۲۶ شهریور ۱۴۰۵: نوآموز «سفید»، پلاتین «زردِ پررنگ»، و «ایمورتال» بالای لجند * (سفیدِ شیری با متن و کادرِ قرمز). متنِ روی سفید و زرد تیره است. */ --az-tier-novice: #ffffff; --az-tier-novice-on: #1f2937; --az-tier-bronze: #a9631f; --az-tier-bronze-on: #ffffff; /* * ⚠ ۲۶ شهریور ۱۴۰۵ (دورِ دوم): نقره‌ای پررنگ‌تر، الماس آبیِ پررنگ با لکه‌های * سفیدِ پاشیده (در -fill)، ایمورتال سیاه با متنِ سفید و همان کادرِ قرمز. */ --az-tier-silver: #9aa3af; --az-tier-silver-on: #111827; --az-tier-gold: #d8ae33; --az-tier-gold-on: #2a1f00; --az-tier-platinum: #ffc400; --az-tier-platinum-on: #2a1f00; --az-tier-diamond: #1f6fe0; --az-tier-diamond-on: #ffffff; --az-tier-master: #6d3fc4; --az-tier-master-on: #ffffff; --az-tier-legend: #b8232a; --az-tier-legend-on: #ffffff; --az-tier-immortal: #0b0b0f; --az-tier-immortal-on: #ffffff; --az-tier-immortal-edge: #c1121f; /* ------------------------- زمینهٔ پُرِ نشانِ رتبه — پله‌های تک‌رنگ */ /* * شش پلهٔ تک‌رنگ همان رنگِ ساده‌اند. پنج گرادیان (نقره‌ای، الماس، پرو، لجند، * ایمورتال) توکنِ رنگ نیستند و در بلوکِ دستیِ بعد از این بخش‌اند، با شرحِ * کاملِ قاعدهٔ `-fill`. */ --az-tier-novice-fill: var(--az-tier-novice); --az-tier-bronze-fill: var(--az-tier-bronze); --az-tier-gold-fill: var(--az-tier-gold); --az-tier-platinum-fill: var(--az-tier-platinum); /* ---------------- «جنس»: سطحِ شیشه‌ایِ نوارها (با backdrop-filter) */ /* * سه ضخامتِ «جنس» برای سطح‌های **شناور** (۲۷ شهریور ۱۴۰۵، بازطراحیِ اپلی): * thin تراشه و کنترلِ کوچکِ روی محتوا * regular منو، تقویم، فیلترِ بازشو * thick کشو و برگه — سطحِ بزرگ‌تر باید «ضخیم‌تر» خوانده شود * ⚠ فقط روی چیزی که واقعا روی محتوا شناور است. کارت و پنل و جدول سطحِ * **توپر** می‌مانند؛ شیشه روی شیشه خوانایی را می‌کُشد. * ⚠ `--az-mat-filter` توکن است (دستی، بلوکِ بعد) تا با «کاهشِ شفافیت» یک‌جا `none` شود. * ⚠ شفافیت عمدا **کم** است (۸۴٪ و ۹۰٪ پُر). نسخهٔ اول ۷۴٪ بود و با سنجش رد * شد: تقویم روی جدولِ شلوغ باز می‌شود و دکمهٔ سرمه‌ایِ زیرش زمینه را تا * حدی تیره می‌کرد که روزهای کم‌رنگ (n-400) عملا ناپدید می‌شدند. این‌ها * ابزارِ کارند نه تزیین؛ شیشه فقط باید «حس» شود. * `--az-mat-edge` لبهٔ روشنِ بالای شیشه است — نوری که روی جنس می‌افتد. * `--az-chrome-mat` همان سرمه‌ایِ نوارِ بالا، نیمه‌شفاف: محتوا از زیرش * رد می‌شود ولی نوار همچنان سرمه‌ای و پُرهویت می‌ماند. */ --az-mat-bar: rgba(255, 255, 255, 0.72); --az-mat-head: rgba(238, 241, 247, 0.80); --az-mat-thin: rgba(255, 255, 255, 0.58); --az-mat-regular: rgba(252, 253, 255, 0.84); --az-mat-thick: rgba(250, 251, 254, 0.90); --az-mat-edge: rgba(255, 255, 255, 0.75); --az-chrome-mat: rgba(20, 63, 145, 0.84); --az-chrome-mat-2: rgba(16, 50, 122, 0.90); /* ---------------------------------- «پُرکننده»ی خاکستریِ نیمه‌شفاف */ /* * زمینهٔ دکمهٔ ثانویه و ورودی‌ها به سبکِ iOS: به‌جای قابِ خطی، یک سطحِ * فرورفتهٔ بی‌لبه. نیمه‌شفاف است تا روی کارتِ سفید، زمینهٔ گروه‌شده و * نوارِ کناری هر سه درست بنشیند. * ⚠ جفتِ تیره دارد. */ --az-fill: rgba(100, 116, 152, 0.13); --az-fill-hover: rgba(100, 116, 152, 0.20); --az-fill-press: rgba(100, 116, 152, 0.27); --az-side-bg: #eceff6; /* زمینهٔ نوارِ کناری: یک پله تیره‌تر از زمینهٔ صفحه، مثلِ سایدبارِ macOS */ /* ---------------------------------------- کاشیِ پُرِ آیکونِ ناوبری */ /* * به سبکِ تنظیماتِ iOS: مربعِ رنگیِ توپر با نشانِ سفید. ⚠ مثلِ --az-chrome * از رمپ نمی‌خوانند و در تیره هم همین می‌مانند: `--az-t-N` در تیره **روشن** * می‌شود و نشانِ سفید رویش ناخوانا بود. کنتراستِ سفید روی هر هفت‌تا ≥ ۴٫۸. */ --az-ts-1: #2a5ec1; --az-ts-2: #0f7b3e; --az-ts-3: #a35a06; --az-ts-4: #7b3fa0; --az-ts-5: #0c767c; --az-ts-6: #b3161d; --az-ts-7: #4a5568; /* --------------------------------------------------------- سایه‌ها */ /* * ⚠ سایه‌ها **ته‌رنگِ سرمه‌ای** دارند، نه خاکستریِ خنثی. سایهٔ خاکستری کنارِ * یک پالتِ سردْ گِل‌آلود دیده می‌شود؛ همان سایه با ته‌رنگِ رنگِ برند «تمیز» * به‌نظر می‌رسد. این تفاوت کوچک است ولی همه‌جای صفحه تکرار می‌شود. * عمق هنوز عمدتا از لبهٔ مویی می‌آید؛ سایه فقط برای چیزی که واقعا شناور * است (پنجرهٔ بازشو، منو، سرستونِ چسبیده هنگام اسکرول). */ --az-sh-xs: 0 0.5px 1.5px rgba(16, 28, 54, 0.07); --az-sh-sm: 0 0.5px 1.5px rgba(16, 28, 54, 0.06), 0 3px 10px rgba(16, 28, 54, 0.045); --az-sh-md: 0 1px 3px rgba(16, 28, 54, 0.06), 0 8px 22px rgba(16, 28, 54, 0.08); --az-sh-lg: 0 4px 10px rgba(16, 28, 54, 0.08), 0 16px 36px rgba(16, 28, 54, 0.11); --az-sh-xl: 0 8px 20px rgba(16, 28, 54, 0.11), 0 32px 64px rgba(16, 28, 54, 0.19); --az-ring: 0 0 0 3.5px rgba(42, 94, 193, 0.22); /* حلقهٔ فوکوس */ --az-scrim: rgba(14, 22, 44, 0.34); } /* حالتِ تیره — دو بلوک از یک مقدار: زیرِ prefers-color-scheme برای کاربری که چیزی انتخاب نکرده، و زیرِ data-az-theme="dark" برای انتخابِ صریح. فقط توکن‌هایی که مقدارِ تیرهٔ متفاوت دارند؛ بقیه از بلوکِ روشن می‌آیند. */ @media (prefers-color-scheme: dark) { :root:root:not([data-az-theme="light"]) { /* ---------------------------------------------------- پالت سرمه‌ای */ --az-navy-50: #1a2540; --az-navy-100: #1f2e52; --az-navy-200: #274070; --az-navy-300: #3a5da0; --az-navy-400: #5a83cc; --az-navy-500: #6f9ae0; --az-navy-600: #7fa8ea; --az-navy-700: #9bbcf1; --az-navy-800: #b9d1f6; --az-navy-900: #d8e6fb; /* ------------------------------------------------------- پالت قرمز */ --az-red-50: #35181b; --az-red-100: #431c20; --az-red-300: #8c3138; --az-red-500: #f0666d; --az-red-600: #f5858b; --az-red-700: #f8a3a8; /* -------------------------------------- رمپِ معنایی: سطح ← … ← متن */ --az-n-0: #171c27; --az-n-25: #1b202c; --az-n-50: #1f2532; --az-n-100: #262d3c; --az-n-200: #2f3749; --az-n-300: #3f4a61; --az-n-400: #67738d; --az-n-500: #8d98ae; /* ۲۷ مهر ۱۴۰۵: جفتِ تغییرِ روشن — یک واحد روشن‌تر تا روی پُرشدگیِ ورودی هم ≥ ۴٫۵ (۴٫۵۵؛ قبلی ۴٫۴۹) */ --az-n-600: #a7b1c4; --az-n-700: #c2cad9; --az-n-800: #dee3ec; --az-n-900: #eff2f7; /* -------------------------------------------------- رنگ‌های وضعیتی */ --az-ok: #4ade8a; --az-ok-bg: #16301f; --az-warn: #f0b45e; --az-warn-bg: #362817; --az-danger: #f5868c; --az-danger-bg: #38191c; /* ------------------------------------------------ زمینه و جداکننده */ --az-bg-grouped: #10141d; --az-sep: #2b3346; --az-hairline: rgba(150, 172, 214, 0.13); --az-grid: #313a4e; --az-row-stripe: #1c2230; --az-row-hover: #24304a; /* ----------------------------------------------- رنگِ کاشیِ بخش‌ها */ --az-t-1: #7fa8ea; --az-t-2: #58cf90; --az-t-3: #eab35f; --az-t-4: #bd82e3; --az-t-5: #56c2c9; --az-t-6: #f0787e; --az-t-7: #93a0ba; --az-t-8: #f0954a; /* ------------------ ته‌رنگِ ملایمِ هر کاشی — زمینهٔ سرصفحهٔ بخش‌ها */ --az-t-1-bg: #1c2740; --az-t-2-bg: #16301f; --az-t-3-bg: #33261a; --az-t-4-bg: #2a2039; --az-t-5-bg: #142e30; --az-t-6-bg: #351a1d; --az-t-7-bg: #232a38; --az-t-8-bg: #3a2513; /* ---------------------------------------- آب (فقط نقشهٔ نمایندگان) */ --az-water: #14293a; --az-water-edge: #2b4c66; --az-water-ink: #86b6d2; /* ------------------------------------- کروم و رنگِ تعاملی (معنایی) */ /* * کروم و رنگِ تعاملی — توضیحش بالای بلوکِ روشن است. عمدا با * رمپ برعکس نمی‌شوند: زمینهٔ نوار و دکمه باید در هر دو حالت * تیره بماند تا متنِ سفیدِ رویش خوانا باشد. نقشهٔ گرما هم همین‌طور. */ --az-chrome: #101a30; --az-chrome-2: #0a1424; --az-accent-solid: #2f5db0; --az-accent-hover: #3a6bc4; --az-badge-solid: #c8242b; /* --------------------------------------- نقشهٔ گرما (تقویمِ تحویل) */ --az-heat-cool: #1d3a70; --az-heat-hot: #8c2027; /* ------------------------- رتبهٔ کارنامهٔ کارشناسان (داشبورد فروش) */ /* * رتبهٔ کارنامه — دو پلهٔ قهوه‌ای کمی روشن‌تر می‌شوند تا روی کارتِ * تیره گم نشوند؛ نقره‌ای و طلایی کمی کم‌درخشش‌تر تا خیره نکنند. * برنز در هر دو حالت یکی است (روشن‌ترش کنتراستِ متنِ سفید را زیرِ * ۴٫۵ می‌بُرد) و برای همین این‌جا نیامده؛ جفت‌های `-on` هم در هر دو حالت * یکی‌اند. سنجیده‌شده: ۷٫۸ · ۵٫۰ · ۴٫۷ · ۷٫۰ · ۶٫۷ */ --az-tier-novice: #f1f5f9; --az-tier-silver: #a3acb8; --az-tier-gold: #c9a22e; --az-tier-platinum: #f2bb00; --az-tier-diamond: #2a74de; --az-tier-master: #7d52d1; --az-tier-legend: #c8343b; --az-tier-immortal: #050507; --az-tier-immortal-edge: #e0323b; /* ---------------- «جنس»: سطحِ شیشه‌ایِ نوارها (با backdrop-filter) */ --az-mat-bar: rgba(23, 28, 39, 0.74); --az-mat-head: rgba(38, 45, 60, 0.80); --az-mat-thin: rgba(38, 45, 60, 0.55); --az-mat-regular: rgba(30, 36, 49, 0.82); --az-mat-thick: rgba(25, 30, 42, 0.90); --az-mat-edge: rgba(255, 255, 255, 0.09); --az-chrome-mat: rgba(16, 26, 48, 0.80); --az-chrome-mat-2: rgba(10, 20, 36, 0.88); /* ---------------------------------- «پُرکننده»ی خاکستریِ نیمه‌شفاف */ --az-fill: rgba(150, 172, 214, 0.14); --az-fill-hover: rgba(150, 172, 214, 0.21); --az-fill-press: rgba(150, 172, 214, 0.28); --az-side-bg: #0c1018; /* --------------------------------------------------------- سایه‌ها */ /* * ⚠ در تیره سایه دیده نمی‌شود؛ عمق باید از **لبهٔ روشن** بیاید، نه از * سیاهیِ بیشتر. برای همین به هر سایه یک خطِ مویی روشن اضافه شده. */ --az-sh-xs: 0 0 0 1px rgba(150, 172, 214, 0.07); --az-sh-sm: 0 0 0 1px rgba(150, 172, 214, 0.07), 0 1px 3px rgba(0, 0, 0, 0.38); --az-sh-md: 0 0 0 1px rgba(150, 172, 214, 0.08), 0 6px 16px rgba(0, 0, 0, 0.44); --az-sh-lg: 0 0 0 1px rgba(150, 172, 214, 0.10), 0 16px 36px rgba(0, 0, 0, 0.52); --az-sh-xl: 0 0 0 1px rgba(150, 172, 214, 0.12), 0 32px 64px rgba(0, 0, 0, 0.62); --az-ring: 0 0 0 3.5px rgba(127, 168, 234, 0.28); --az-scrim: rgba(3, 6, 14, 0.62); } } :root:root[data-az-theme="dark"] { /* ---------------------------------------------------- پالت سرمه‌ای */ --az-navy-50: #1a2540; --az-navy-100: #1f2e52; --az-navy-200: #274070; --az-navy-300: #3a5da0; --az-navy-400: #5a83cc; --az-navy-500: #6f9ae0; --az-navy-600: #7fa8ea; --az-navy-700: #9bbcf1; --az-navy-800: #b9d1f6; --az-navy-900: #d8e6fb; /* ------------------------------------------------------- پالت قرمز */ --az-red-50: #35181b; --az-red-100: #431c20; --az-red-300: #8c3138; --az-red-500: #f0666d; --az-red-600: #f5858b; --az-red-700: #f8a3a8; /* -------------------------------------- رمپِ معنایی: سطح ← … ← متن */ --az-n-0: #171c27; --az-n-25: #1b202c; --az-n-50: #1f2532; --az-n-100: #262d3c; --az-n-200: #2f3749; --az-n-300: #3f4a61; --az-n-400: #67738d; --az-n-500: #8d98ae; /* ۲۷ مهر ۱۴۰۵: جفتِ تغییرِ روشن — یک واحد روشن‌تر تا روی پُرشدگیِ ورودی هم ≥ ۴٫۵ (۴٫۵۵؛ قبلی ۴٫۴۹) */ --az-n-600: #a7b1c4; --az-n-700: #c2cad9; --az-n-800: #dee3ec; --az-n-900: #eff2f7; /* -------------------------------------------------- رنگ‌های وضعیتی */ --az-ok: #4ade8a; --az-ok-bg: #16301f; --az-warn: #f0b45e; --az-warn-bg: #362817; --az-danger: #f5868c; --az-danger-bg: #38191c; /* ------------------------------------------------ زمینه و جداکننده */ --az-bg-grouped: #10141d; --az-sep: #2b3346; --az-hairline: rgba(150, 172, 214, 0.13); --az-grid: #313a4e; --az-row-stripe: #1c2230; --az-row-hover: #24304a; /* ----------------------------------------------- رنگِ کاشیِ بخش‌ها */ --az-t-1: #7fa8ea; --az-t-2: #58cf90; --az-t-3: #eab35f; --az-t-4: #bd82e3; --az-t-5: #56c2c9; --az-t-6: #f0787e; --az-t-7: #93a0ba; --az-t-8: #f0954a; /* ------------------ ته‌رنگِ ملایمِ هر کاشی — زمینهٔ سرصفحهٔ بخش‌ها */ --az-t-1-bg: #1c2740; --az-t-2-bg: #16301f; --az-t-3-bg: #33261a; --az-t-4-bg: #2a2039; --az-t-5-bg: #142e30; --az-t-6-bg: #351a1d; --az-t-7-bg: #232a38; --az-t-8-bg: #3a2513; /* ---------------------------------------- آب (فقط نقشهٔ نمایندگان) */ --az-water: #14293a; --az-water-edge: #2b4c66; --az-water-ink: #86b6d2; /* ------------------------------------- کروم و رنگِ تعاملی (معنایی) */ /* * کروم و رنگِ تعاملی — توضیحش بالای بلوکِ روشن است. عمدا با * رمپ برعکس نمی‌شوند: زمینهٔ نوار و دکمه باید در هر دو حالت * تیره بماند تا متنِ سفیدِ رویش خوانا باشد. نقشهٔ گرما هم همین‌طور. */ --az-chrome: #101a30; --az-chrome-2: #0a1424; --az-accent-solid: #2f5db0; --az-accent-hover: #3a6bc4; --az-badge-solid: #c8242b; /* --------------------------------------- نقشهٔ گرما (تقویمِ تحویل) */ --az-heat-cool: #1d3a70; --az-heat-hot: #8c2027; /* ------------------------- رتبهٔ کارنامهٔ کارشناسان (داشبورد فروش) */ /* * رتبهٔ کارنامه — دو پلهٔ قهوه‌ای کمی روشن‌تر می‌شوند تا روی کارتِ * تیره گم نشوند؛ نقره‌ای و طلایی کمی کم‌درخشش‌تر تا خیره نکنند. * برنز در هر دو حالت یکی است (روشن‌ترش کنتراستِ متنِ سفید را زیرِ * ۴٫۵ می‌بُرد) و برای همین این‌جا نیامده؛ جفت‌های `-on` هم در هر دو حالت * یکی‌اند. سنجیده‌شده: ۷٫۸ · ۵٫۰ · ۴٫۷ · ۷٫۰ · ۶٫۷ */ --az-tier-novice: #f1f5f9; --az-tier-silver: #a3acb8; --az-tier-gold: #c9a22e; --az-tier-platinum: #f2bb00; --az-tier-diamond: #2a74de; --az-tier-master: #7d52d1; --az-tier-legend: #c8343b; --az-tier-immortal: #050507; --az-tier-immortal-edge: #e0323b; /* ---------------- «جنس»: سطحِ شیشه‌ایِ نوارها (با backdrop-filter) */ --az-mat-bar: rgba(23, 28, 39, 0.74); --az-mat-head: rgba(38, 45, 60, 0.80); --az-mat-thin: rgba(38, 45, 60, 0.55); --az-mat-regular: rgba(30, 36, 49, 0.82); --az-mat-thick: rgba(25, 30, 42, 0.90); --az-mat-edge: rgba(255, 255, 255, 0.09); --az-chrome-mat: rgba(16, 26, 48, 0.80); --az-chrome-mat-2: rgba(10, 20, 36, 0.88); /* ---------------------------------- «پُرکننده»ی خاکستریِ نیمه‌شفاف */ --az-fill: rgba(150, 172, 214, 0.14); --az-fill-hover: rgba(150, 172, 214, 0.21); --az-fill-press: rgba(150, 172, 214, 0.28); --az-side-bg: #0c1018; /* --------------------------------------------------------- سایه‌ها */ /* * ⚠ در تیره سایه دیده نمی‌شود؛ عمق باید از **لبهٔ روشن** بیاید، نه از * سیاهیِ بیشتر. برای همین به هر سایه یک خطِ مویی روشن اضافه شده. */ --az-sh-xs: 0 0 0 1px rgba(150, 172, 214, 0.07); --az-sh-sm: 0 0 0 1px rgba(150, 172, 214, 0.07), 0 1px 3px rgba(0, 0, 0, 0.38); --az-sh-md: 0 0 0 1px rgba(150, 172, 214, 0.08), 0 6px 16px rgba(0, 0, 0, 0.44); --az-sh-lg: 0 0 0 1px rgba(150, 172, 214, 0.10), 0 16px 36px rgba(0, 0, 0, 0.52); --az-sh-xl: 0 0 0 1px rgba(150, 172, 214, 0.12), 0 32px 64px rgba(0, 0, 0, 0.62); --az-ring: 0 0 0 3.5px rgba(127, 168, 234, 0.28); --az-scrim: rgba(3, 6, 14, 0.62); } /* @generated:palette end */ /* ═══════════════════════════════════════════════════════════════════ توکن‌های دستی — در tokens.json نیستند (آرتیفکت برایشان خانواده ندارد) و همین‌جا ویرایش می‌شوند: فونت، گرادیانِ نشانِ رتبه، فیلترِ شیشه، حرکت. ⚠ باید **پیش از** بلوکِ @supports بیایند تا فنرِ linear() برنده شود. ═══════════════════════════════════════════════════════════════════ */ :root:root { /* ------------------------------------------------------------ فونت */ --az-font: 'Vazirmatn','Segoe UI',Tahoma,sans-serif; --az-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* * زمینهٔ **پُرِ** نشانِ رتبه (۲۳ شهریور ۱۴۰۵) — «پرو ترکیبِ بنفش و قرمز، * لجند ترکیبِ همهٔ رنگ‌ها شبیهِ بومرنگ.» * * ⚠ `-fill` جدا از خودِ رنگ است، نه جایگزینش: گرادیان در `color-mix` * نمی‌نشیند، پس لبه، سایه و ته‌رنگِ کارت همچنان از رنگِ ساده می‌خوانند * و فقط «زمینهٔ نشان» از این. شش پلهٔ تک‌رنگ (`--az-tier-*-fill` = همان رنگ) * در بلوکِ تولیدشده‌اند؛ پنج گرادیانِ زیر دستی می‌مانند (توکنِ رنگ نیستند). * ⚠⚠ هر ایستگاهِ رنگینِ لجند با متنِ سفید ≥ ۵ کنتراست دارد (کمترینش * نارنجیِ #b35400 با ۵٫۰۲) — زردِ روشن عمدا نیست، وگرنه «لجند» روی * بخشِ زرد ناخوانا می‌شد. رنگین‌کمانِ «جواهری» است نه پاستلی. * ⚠ ایستگاهِ اول و آخرِ لجند یکی است تا حرکتِ رفت‌وبرگشتیِ نشان * (`sd-tier`، داشبورد فروش) درز نشان ندهد. یک تعریف برای هر دو تم — * گرادیان از رمپ نمی‌خواند و متنِ سفید در هر دو خواناست. */ /* نقره‌ایِ فلزی — تیره‌ترین ایستگاه هنوز ≥ ۵ با متنِ تیره */ --az-tier-silver-fill: linear-gradient(135deg, #8c96a2 0%, #d5dae1 45%, #9aa3af 62%, #87919d 100%); /* لکه‌های سفیدِ پاشیده روی آبی — نقطه‌ها کم‌رنگ و پراکنده‌اند تا متنِ سفید خوانا بماند */ --az-tier-diamond-fill: radial-gradient(circle at 9% 30%, rgb(255 255 255 / 0.85) 0 1.6px, transparent 2.4px), radial-gradient(circle at 21% 78%, rgb(255 255 255 / 0.7) 0 1px, transparent 1.8px), radial-gradient(ellipse 3px 1.6px at 36% 18%, rgb(255 255 255 / 0.75) 0 60%, transparent 100%), radial-gradient(circle at 57% 84%, rgb(255 255 255 / 0.65) 0 1.2px, transparent 2px), radial-gradient(circle at 74% 22%, rgb(255 255 255 / 0.8) 0 1.4px, transparent 2.2px), radial-gradient(circle at 92% 66%, rgb(255 255 255 / 0.85) 0 1.8px, transparent 2.6px), radial-gradient(circle at 86% 12%, rgb(255 255 255 / 0.6) 0 0.8px, transparent 1.5px), var(--az-tier-diamond); --az-tier-master-fill: linear-gradient(120deg, #6d3fc4 0%, #9a2f86 50%, #b8232a 100%); --az-tier-legend-fill: linear-gradient(100deg, #c1121f 0%, #b35400 14%, #8a6500 28%, #1e7a34 43%, #00708a 57%, #1f5fbf 71%, #7b2cbf 86%, #c1121f 100%); --az-tier-immortal-fill: linear-gradient(160deg, #2b2b34 0%, #0b0b0f 55%, #000000 100%); /* فیلترِ شیشه — توکن است تا با «کاهشِ شفافیت» (پایین‌تر) یک‌جا `none` شود */ --az-mat-filter: saturate(180%) blur(22px); /* ---------------------------------------------------------- حرکت * * ⚠ فنرها با **دو پارامترِ اپل** تعریف شده‌اند، نه با مدت: «نسبتِ میرایی» * (۱ = بدونِ پرش) و «پاسخ» (ثانیه). منحنی‌ها از حلِ واقعیِ معادلهٔ فنر * درآمده‌اند و با `linear()` به CSS رفته‌اند؛ مدتِ کنارشان فقط پنجره‌ای * است که فنر در آن به ۹۹٫۹٪ می‌رسد، پس **توکنِ فنر و توکنِ مدتش جفت‌اند**: * * --az-spring میرایی ۱ پاسخ ۰٫۳۵ با --az-dur-spring (پیش‌فرض) * --az-spring-snap میرایی ۱ پاسخ ۰٫۲۲ با --az-dur-snap (فشردن/رهاکردن) * --az-spring-bounce میرایی ۰٫۸ پاسخ ۰٫۳۵ با --az-dur-bounce (فقط بعد از پرتاب) * * ⚠⚠ پرش فقط وقتی که خودِ حرکتِ کاربر تکانه داشته (کشیدن و رهاکردن). * منویی که با یک کلیک باز می‌شود نباید بپرد — `--az-spring` تا این روز * `cubic-bezier(.34,1.36,…)` بود و پنجره و ریلِ نوارِ کناری را می‌پراند. * ⚠ مقدارِ بیرونِ @supports پشتیبانِ مرورگری است که `linear()` ندارد. * ⚠ ورود **و خروج** هر دو `--az-ease-out`: مسیرِ خروج آینهٔ ورود است ولی * منحنی‌اش نه — ease-in لحظهٔ اولِ بستن را کُند می‌کند، یعنی همان لحظه‌ای * که کاربر نگاه می‌کند. `--az-ease-in` فقط برای حرکتی که کاربر نمی‌بیند * شروع شود (هیچ‌جای رابط امروز مصرفش نمی‌کند). */ --az-ease: cubic-bezier(.4,0,.2,1); --az-ease-out: cubic-bezier(.22,.8,.3,1); --az-ease-in: cubic-bezier(.7,0,.78,.2); --az-spring: cubic-bezier(.22,.9,.3,1); --az-spring-snap: cubic-bezier(.22,.9,.3,1); --az-spring-bounce: cubic-bezier(.3,1.25,.5,1); --az-dur-spring: .5s; --az-dur-snap: .32s; --az-dur-bounce: .6s; --az-dur-press: .07s; /* فشردن باید «همان لحظه» باشد؛ رهاکردن فنری است */ --az-dur-exit: .17s; --az-press: .97; /* مقیاسِ عنصرِ فشرده */ --az-fast: .14s; --az-med: .22s; color-scheme: light; } /* ═══════════════════════════════════════════════════════════════════ تراکمِ نمایش ⚠ فقط توکن بازتعریف می‌شود، هیچ قاعدهٔ چیدمانی نه — همان الگویی که حالتِ تیره را ممکن کرد. یعنی هر کامپوننتی که از این توکن‌ها بخواند خودبه‌خود هر سه حالت را می‌گیرد. ⚠ اندازهٔ فونتِ **ورودی‌ها** در هیچ حالتی زیرِ ۱۶ پیکسل نمی‌رود روی موبایل — آن محافظ برای زومِ iOS است و تراکم نباید بشکندش. ═══════════════════════════════════════════════════════════════════ */ :root[data-az-density="compact"] { --az-row-pad-y: 6px; --az-row-lh: 1.42; --az-text-sm: 12px; --az-text-xs: 11px; } :root[data-az-density="roomy"] { --az-row-pad-y: 13px; --az-row-lh: 1.68; --az-text-sm: 13.5px; --az-text-xs: 12.5px; --az-text-md: 15px; } /* فنرِ واقعی — فقط جایی که مرورگر `linear()` را می‌فهمد */ @supports (transition-timing-function: linear(0, 1)) { :root:root { --az-spring: linear(0, 0.0547, 0.1726, 0.309, 0.4408, 0.5577, 0.656, 0.7361, 0.7997, 0.8493, 0.8874, 0.9164, 0.9383, 0.9547, 0.9668, 0.9758, 0.9824, 0.9872, 0.9908, 0.9934, 0.9952, 0.9966, 0.9975, 0.9982, 1); --az-spring-snap: linear(0, 0.0926, 0.2699, 0.4499, 0.6023, 0.7205, 0.8077, 0.8697, 0.9128, 0.9423, 0.9621, 0.9753, 0.984, 0.9897, 0.9934, 0.9958, 0.9973, 0.9983, 1); --az-spring-bounce: linear(0, 0.0531, 0.1749, 0.3235, 0.4728, 0.608, 0.7222, 0.8134, 0.8829, 0.9333, 0.9682, 0.9909, 1.0046, 1.0119, 1.0148, 1.015, 1.0137, 1.0116, 1.0093, 1.0071, 1.0052, 1.0036, 1.0024, 1.0014, 1.0008, 1.0003, 1, 0.9999, 0.9998, 0.9998, 1); } } /* ═══════════════════════════════════════════════════ حالتِ تیره ══ * * دو راهِ فعال‌شدن: * • `data-az-theme="dark"` روی — انتخابِ صریحِ کاربر * • `prefers-color-scheme: dark` — وقتی کاربر چیزی انتخاب نکرده * * ⚠ قاعدهٔ خودکار با `:not([data-az-theme])` محافظت شده، وگرنه کاربری که * صریحا «روشن» را انتخاب کرده، روی سیستمِ تیره باز هم تیره می‌دید و دکمهٔ * تعویضْ بی‌اثر به‌نظر می‌رسید. * * ⚠ اینجا فقط **توکن** بازتعریف می‌شود، هیچ قاعدهٔ چیدمانی نه. اگر برای * تیره مجبور شدید چیدمان را عوض کنید، یعنی جایی رنگِ خام نوشته شده. */ @media (prefers-color-scheme: dark) { :root:root:not([data-az-theme="light"]) { color-scheme: dark; } } /* ⚠ بلوکِ توکن‌های تیره دو بار لازم است (یک انتخابگر را نمی‌توان داخل و بیرونِ @media هم‌زمان نوشت و `@media` با `:is()` هم ترکیب نمی‌شود) — ولی دیگر با دست نوشته نمی‌شود: هر دو بلوک از tokens.json تولید می‌شوند (بالا، بینِ نشانگرهای @generated:palette). این‌جا فقط color-scheme می‌ماند. */ :root:root[data-az-theme="dark"] { /* ⚠ لازم است و تزیینی نیست: اسکرول‌بارِ بومی، کنترل‌های فرم و زمینهٔ پیش‌فرضِ خودِ مرورگر از همین می‌خوانند، نه از توکن‌های ما. بدونِ آن یک اسکرول‌بارِ سفید کنارِ صفحهٔ تیره می‌ماند. */ color-scheme: dark; } /* ================================================================= نگاشت توکن‌های قدیمیِ هر برنامه به پالت بالا (هر برنامه اسم‌های خودش را دارد؛ اینجا یکی می‌شوند) ⚠ بیرونِ بلوکِ پالت است تا هم در روشن و هم در تیره از مقدارِ *جاری* بخواند. اگر داخلِ بلوکِ روشن می‌ماند، در حالتِ تیره به رنگ‌های روشن قفل می‌شد. ================================================================= */ :root:root { /* --- order-list --- */ --brand-navy: var(--az-navy-600); --brand-navy-600: var(--az-navy-500); --brand-navy-800: var(--az-navy-800); --brand-red: var(--az-red-500); --gray-50: var(--az-n-50); --gray-100: var(--az-n-100); --gray-200: var(--az-n-200); --gray-400: var(--az-n-400); --gray-600: var(--az-n-500); --gray-800: var(--az-n-800); --gray-900: var(--az-n-900); --primary: var(--az-navy-600); --primary-hover: var(--az-navy-700); --primary-tint: var(--az-navy-50); --danger: var(--az-danger); --danger-tint: var(--az-danger-bg); --warn-tint: var(--az-warn-bg); --warn-text: var(--az-warn); --ok-tint: var(--az-ok-bg); --ok-text: var(--az-ok); --sp-1: var(--az-sp-1); --sp-2: var(--az-sp-2); --sp-3: var(--az-sp-3); --sp-4: var(--az-sp-4); --sp-5: var(--az-sp-5); --sp-6: var(--az-sp-6); --sp-8: var(--az-sp-8); --r-sm: var(--az-r-sm); --r-md: var(--az-r-md); --r-lg: var(--az-r-lg); --shadow-sm: var(--az-sh-sm); --shadow-md: var(--az-sh-md); --shadow-lg: var(--az-sh-lg); --ring: var(--az-ring); --surface-sunken: var(--az-n-50); --hairline: var(--az-sep); --grid-line: var(--az-sep-soft); --row-stripe: var(--az-row-stripe); --row-hover: var(--az-row-hover); --text-secondary: var(--az-n-600); --text-muted: var(--az-n-400); /* --- monitoring --- */ --brand: var(--az-navy-600); --brand-soft: var(--az-navy-50); --brand-ink: var(--az-navy-800); --accent: var(--az-navy-600); --warn-soft: var(--az-warn-bg); --danger-soft: var(--az-danger-bg); --ok-soft: var(--az-ok-bg); --radius: var(--az-r-md); --shadow: var(--az-sh-sm); --font: var(--az-font); /* --- price-list (Tailwind) --- */ --color-brand-50: var(--az-navy-50); --color-brand-100: var(--az-navy-100); --color-brand-200: var(--az-navy-200); --color-brand-300: var(--az-navy-300); --color-brand-400: var(--az-navy-400); --color-brand-500: var(--az-navy-500); --color-brand-600: var(--az-navy-600); --color-brand-700: var(--az-navy-700); --color-brand-800: var(--az-navy-800); --color-brand-900: var(--az-navy-900); --color-brand-950: var(--az-navy-900); /* --- مشترک بین همه --- */ --bg: var(--az-bg-grouped); --surface: var(--az-n-0); --surface-2: var(--az-n-50); --border: var(--az-sep); --text: var(--az-n-900); --muted: var(--az-n-500); --warn: var(--az-warn); } /* ================================================================ پایه */ html { -webkit-text-size-adjust: 100%; } html, body, button, input, select, textarea, table, .btn { font-family: var(--az-font); } body { font-size: var(--az-text-md); line-height: var(--az-leading); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* ss01 شکلِ بهترِ چند حرفِ فارسی را می‌دهد؛ cv11 ارقام را یکدست می‌کند. */ font-feature-settings: "ss01"; /* ⚠ متنِ فارسی در وزنِ ۴۰۰ روی نمایشگرِ روشن کم‌جان دیده می‌شود؛ رنگِ متن مشکیِ خالص نیست تا کنتراست تند نباشد ولی هنوز کاملا خواناست. */ color: var(--az-n-900); /* ⚠ زمینه صریح است. بدونِ آن، در حالتِ تیره لبه‌های بیرونِ قابِ محتوا سفید می‌ماند و مثلِ یک قابِ نورانی دورِ صفحه دیده می‌شود. */ background-color: var(--az-bg-grouped); } /* * تیترها: فشرده‌تر از متن. تیتر با همان فاصلهٔ سطرِ متن شبیه پاراگراف * می‌شود و سلسله‌مراتب از بین می‌رود. * letter-spacing منفیِ کوچک برای وزن‌های سنگین — همان کاری که فونت‌های * سیستمیِ خوب خودشان در اندازه‌های بزرگ می‌کنند. */ :where(h1, h2, h3, h4) { line-height: 1.35; letter-spacing: -.015em; font-weight: 700; /* ۶۵۰ بود؛ فونتِ ایستا همان ۷۰۰ را می‌کشید (بالا، @font-face) */ text-wrap: balance; } :where(h1) { font-size: var(--az-text-2xl); } :where(h2) { font-size: var(--az-text-xl); } :where(h3) { font-size: var(--az-text-lg); } /* اعداد در جدول‌ها باید هم‌عرض باشند تا ستون‌ها نلرزند */ table, .num, [data-num], td, th { font-variant-numeric: tabular-nums; } ::selection { background: var(--az-navy-200); color: var(--az-navy-900); } /* --------------------------------------------------------- اسکرول‌بار */ * { scrollbar-width: thin; scrollbar-color: var(--az-n-300) transparent; } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--az-n-300); border-radius: var(--az-r-full); border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--az-navy-300); background-clip: content-box; } /* ------------------------------------------------- فوکوس یکسان و واضح */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--az-navy-600); outline-offset: 2px; border-radius: var(--az-r-sm); } /* ------------------------------------------- حرکت‌های یکسان و ظریف */ :where(button, .btn, a.btn, input, select, textarea) { transition: background-color var(--az-fast) var(--az-ease), border-color var(--az-fast) var(--az-ease), box-shadow var(--az-med) var(--az-ease), color var(--az-fast) var(--az-ease), transform var(--az-dur-snap) var(--az-spring-snap); } /* * ⚠ بازخورد روی **فشردن** است، نه رهاکردن: عنصر همان لحظه‌ای که انگشت پایین * می‌رود کوچک می‌شود (۷۰ میلی‌ثانیه) و با رهاکردن فنری برمی‌گردد. منتظرماندن * تا `click` یعنی رابطی که «مُرده» حس می‌شود. `transition-duration` فقط در * حالتِ فشرده کوتاه می‌شود، پس برگشت همان فنرِ قاعدهٔ بالاست — و چون transition * از مقدارِ **جاریِ روی صفحه** شروع می‌کند، وسطِ راه هم می‌شود رهایش کرد. */ :where(button, .btn):not(:disabled):active { transform: scale(var(--az-press)); transition-duration: var(--az-dur-press); } :where(input, select, textarea):focus { box-shadow: var(--az-ring); } /* * ── خاموشیِ یک‌فریمیِ حرکت، هنگام عوض‌کردنِ تم ───────────────────────── * * ⚠ این تزیین نیست، رفعِ یک باگِ واقعی است. * * وقتی `data-az-theme` عوض می‌شود، همهٔ توکن‌ها یک‌جا تغییر می‌کنند. هر * عنصری که `transition` روی `color` یا `background-color` دارد، به‌جای * پریدن به مقدارِ تازه شروع به انیمیت می‌کند — و با اجرای واقعی معلوم شد * که این انیمیشن **تمام نمی‌شود**: نوارِ کناری بعد از تعویضِ تم روی رنگِ * قدیمی گیر می‌کرد و متنِ تیره روی زمینهٔ تیره می‌ماند (کنتراستِ ۱٫۷). * سنجهٔ قطعی این بود: با `transition: none` همان لحظه رنگِ درست می‌آمد. * * پس موقعِ سوییچ، حرکت برای یک فریم کاملا خاموش می‌شود و بعد برمی‌گردد. * ⚠ `!important` لازم است تا بر transitionهای درون‌خطیِ کامپوننت‌ها هم * غالب شود. */ :root.az-theme-switching *, :root.az-theme-switching *::before, :root.az-theme-switching *::after { transition: none !important; animation: none !important; } /* * ── سه تنظیمِ دسترس‌پذیریِ سیستم‌عامل، هر کدام مستقل ────────────────────── * * «کاهشِ حرکت» یعنی حرکتِ **ملایم‌تر**، نه بی‌بازخوردی: جابه‌جایی و مقیاس * خاموش می‌شود ولی محوشدنِ کوتاهِ سطح‌های شناور می‌ماند (shell.css همان‌ها * را با `az-fade` جایگزین می‌کند)، وگرنه پنجره «می‌پرد» روی صفحه. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } :root:root { --az-press: 1; } } /* «کاهشِ شفافیت»: شیشه توپر می‌شود و تاری برداشته می‌شود. فقط توکن. */ /* ⚠ چهار بار `:root` عمدی است: بلوکِ تیره وزنِ (۰٬۳٬۰) دارد و همین توکن‌ها را بازتعریف می‌کند؛ با وزنِ کمتر، این تنظیم فقط در حالتِ روشن اثر می‌کرد. */ @media (prefers-reduced-transparency: reduce) { :root:root:root:root { --az-mat-bar: var(--az-n-0); --az-mat-head: var(--az-n-100); --az-mat-thin: var(--az-n-0); --az-mat-regular: var(--az-n-0); --az-mat-thick: var(--az-n-0); --az-mat-filter: none; --az-chrome-mat: var(--az-chrome); --az-chrome-mat-2: var(--az-chrome-2); } } /* «کنتراستِ بیشتر»: سطحِ توپر و لبهٔ واقعی به‌جای خطِ موییِ محو. */ @media (prefers-contrast: more) { :root:root:root:root { --az-mat-bar: var(--az-n-0); --az-mat-head: var(--az-n-100); --az-mat-thin: var(--az-n-0); --az-mat-regular: var(--az-n-0); --az-mat-thick: var(--az-n-0); --az-mat-filter: none; --az-chrome-mat: var(--az-chrome); --az-chrome-mat-2: var(--az-chrome-2); --az-hairline: var(--az-n-400); --az-sep: var(--az-n-400); --az-grid: var(--az-n-400); } } /* ---------------------------------------------------------- چاپ تمیز */ @media print { .no-print, header, nav, .ws-bar { display: none !important; } /* ⚠ چاپ همیشه روشن است، حتی وقتی کاربر تیره را انتخاب کرده — وگرنه یک برگهٔ تماما سیاه از چاپگر بیرون می‌آید. */ :root:root { color-scheme: light; } body { background: #fff; color: #000; } } /* ================================================================= موبایل ================================================================= */ /* گوشی‌های نوچ‌دار: محتوا نباید زیر نوار وضعیت یا نوار خانهٔ آیفون برود */ body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } @media (max-width: 768px) { /* iOS اگر فونت ورودی کمتر از ۱۶ پیکسل باشد، هنگام تایپ صفحه را زوم می‌کند و دیگر برنمی‌گردد. این تنها راه جلوگیری از آن است. */ input, select, textarea { font-size: 16px; } /* هدف لمسی استاندارد: انگشت حدود ۴۴ پیکسل جا می‌خواهد */ button, .btn, a.btn, input[type="submit"], .ws-tab, nav a { min-height: 44px; } button, .btn, a.btn { padding-block: 11px; } /* جدول‌های عریض: جدول دست‌نخورده می‌ماند و به‌جایش یک قابِ اسکرول‌شونده دورش گذاشته می‌شود (با اسکریپت araz-mobile.js). دست‌کاری خودِ table با display:block چیدمان ستون‌ها را خراب می‌کرد. */ .az-table-scroll { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--az-r-sm); } .az-table-scroll > table { min-width: max-content; margin: 0; } /* سلول‌ها روی گوشی فشرده‌تر تا ستون‌های بیشتری در یک نگاه جا شوند */ th, td { padding: 8px 9px; font-size: .8rem; } /* هیچ چیز نباید باعث اسکرول افقیِ کل صفحه شود */ html, body { overflow-x: hidden; max-width: 100%; } /* ⚠ فقط svgِ دارای width (نمودار با عرضِ ثابت). آیکونی که اندازه‌اش را از CSS می‌گیرد داخلِ دکمه یا ظرفِ grid/flex با `max-width: 100%` عرضِ صفر می‌گرفت: ستاره‌های لانچ‌پد، «به‌روزرسانی»، آیکونِ حالتِ خالیِ کارتابل‌ها — همه دایرهٔ خالی روی گوشی (۱۷ مهر ۱۴۰۵). */ img, video, canvas, svg[width] { max-width: 100%; height: auto; } /* فاصله‌های دسکتاپی روی صفحهٔ کوچک هدر رفتن فضاست */ .card, .panel { padding: 16px; } h1 { font-size: 1.18rem; } h2 { font-size: 1.02rem; } } /* صفحه‌های خیلی کوچک */ @media (max-width: 380px) { body { font-size: 14px; } .card, .panel { padding: 13px; } } /* ================================================================= ناوبری موبایل — یک رفتار، همهٔ برنامه‌ها ================================================================= طرزِ استفاده: روی خودِ