/* ═══════════════════════════════════════════════════════════════════════ ek-tokens.css — لایهٔ توکن مشترک اکوکیان ─────────────────────────────────────────────────────────────────────── چرا: صفحهٔ اختیار سهام به‌تنهایی ۷۱ رنگ hex یکتا را ۸۹۰ بار هاردکد کرده بود. نتیجه‌اش این بود که تم روشن غیرممکن باشد و هر تغییر رنگ به find/replace در صدها نقطه تبدیل شود. این فایل همان رنگ‌ها را به نقش معنایی ترجمه می‌کند. ساختار سه‌لایه: ۱) اولیه — پالت خام. هیچ‌جا خارج از این فایل مستقیم استفاده نشود. ۲) معنایی — نقش‌ها (سطح، متن، خط، وضعیت). این‌ها را در CSS صدا بزن. ۳) دامنه‌ای — مفاهیم اختیار معامله (کال/پوت، سود/زیان، وضعیت زنجیره). پیش‌فرض تیره است چون وضعیت فعلی سایت همین است؛ بلوک روشن ساختار را آماده نگه می‌دارد ولی تا وقتی صفحه‌به‌صفحه تست نشده نباید فعالش کرد. قرارداد نام‌گذاری: هر نقش وضعیت سه شکل دارد — --ek-{نقش} رنگ متن/آیکون --ek-{نقش}-bg پس‌زمینهٔ کم‌رنگ --ek-{نقش}-line رنگ خط/حاشیه چون در کد موجود دقیقاً همین سه کاربرد از یک hue دیده می‌شود. ═══════════════════════════════════════════════════════════════════════ */ :root { /* ─── لایهٔ ۱ — اولیه ────────────────────────────────────────────── مقادیر برگرفته از همان پالت slate/emerald/rose تیلویند که کد از قبل استفاده می‌کرد؛ اینجا فقط نام‌دار شده‌اند. */ --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-300: #cbd5e1; --slate-400: #94a3b8; --slate-500: #64748b; --slate-600: #475569; --slate-700: #334155; --slate-800: #1e293b; --slate-900: #0f172a; --slate-950: #020617; /* hueهای وضعیت — پله‌های واقعاً استفاده‌شده در کد. هر hue چند پله دارد چون در طراحی فعلی، متن رنگی روی چیپ رنگی با پلهٔ روشن‌تر و تأکید با پلهٔ تیره‌تر نوشته می‌شود. */ --emerald-50: #ecfdf5; --emerald-200: #a7f3d0; --emerald-300: #6ee7b7; --emerald-400: #34d399; --emerald-500: #10b981; --emerald-600: #059669; --rose-200: #fecdd3; --rose-300: #fda4af; --rose-400: #fb7185; --rose-500: #f43f5e; --red-300: #fca5a5; --red-400: #f87171; --red-500: #ef4444; --blue-100: #dbeafe; --blue-200: #bfdbfe; --blue-300: #93c5fd; --blue-400: #60a5fa; --blue-500: #3b82f6; --amber-100: #fef3c7; --amber-200: #fde68a; --amber-300: #fcd34d; --amber-400: #fbbf24; --amber-500: #f59e0b; --violet-200: #ddd6fe; --violet-300: #c4b5fd; --violet-400: #a78bfa; --violet-500: #8b5cf6; --indigo-200: #c7d2fe; --indigo-300: #a5b4fc; --indigo-400: #818cf8; --indigo-500: #6366f1; --cyan-100: #cffafe; --cyan-200: #a5f3fc; --cyan-300: #67e8f9; --cyan-400: #22d3ee; --sky-300: #7dd3fc; /* پله‌های تیره — فقط تم روشن از این‌ها استفاده می‌کند */ --emerald-700: #047857; --emerald-800: #065f46; --rose-600: #e11d48; --rose-700: #be123c; --red-600: #dc2626; --red-700: #b91c1c; --blue-600: #2563eb; --blue-700: #1d4ed8; --amber-600: #d97706; --amber-700: #b45309; --violet-600: #7c3aed; --violet-700: #6d28d9; --indigo-600: #4f46e5; --indigo-700: #4338ca; --cyan-600: #0891b2; --cyan-700: #0e7490; /* اجزای RGB — برای ساختن alpha بدون تکرار عدد */ --rgb-surface: 15, 23, 42; /* slate-900 */ --rgb-line: 148, 163, 184; /* slate-400 */ --rgb-light: 255, 255, 255; --rgb-positive: 52, 211, 153; --rgb-negative: 251, 113, 133; --rgb-info: 59, 130, 246; --rgb-warning: 251, 191, 36; --rgb-special: 167, 139, 250; --rgb-primary: 99, 102, 241; /* ─── غیررنگی ────────────────────────────────────────────────────── */ --ek-radius-sm: .5rem; --ek-radius: .82rem; --ek-radius-lg: 1.1rem; /* مقیاس متن — کف ۰.۷۵rem عمدی است: فارسی زیر این اندازه خوانا نیست و صفحهٔ فعلی جاهایی تا ۰.۶۲rem پایین رفته بود. */ --ek-text-2xs: .75rem; --ek-text-xs: .8rem; --ek-text-sm: .875rem; --ek-text-md: 1rem; --ek-text-lg: 1.125rem; /* line-height سخاوتمند برای فارسی (ارتفاع x بالا) */ --ek-leading-tight: 1.5; --ek-leading: 1.75; --ek-leading-loose: 1.9; } /* ═══════════════════════════════════════════════════════════════════════ لایهٔ ۲ — معنایی (تیره، پیش‌فرض) ═══════════════════════════════════════════════════════════════════════ */ :root { /* سطوح — چهار پله ارتفاع، همان alphaهایی که در کد تکرار می‌شدند */ --ek-bg: #0a0f1e; --ek-surface-1: rgba(var(--rgb-surface), .45); --ek-surface-2: rgba(var(--rgb-surface), .50); --ek-surface-3: rgba(var(--rgb-surface), .55); --ek-surface-4: rgba(var(--rgb-surface), .85); /* سلسله‌مراتب متن — ۷۵۷ از ۸۹۰ کاربرد رنگ در کد، متن بود. این پنج پله همان چیزی است که عملاً استفاده می‌شد. */ --ek-text-strong: var(--slate-100); --ek-text: var(--slate-200); --ek-text-2: var(--slate-300); --ek-text-muted: var(--slate-400); --ek-text-faint: var(--slate-500); /* خطوط */ --ek-line-subtle: rgba(var(--rgb-line), .10); --ek-line: rgba(var(--rgb-line), .15); --ek-line-strong: rgba(var(--rgb-line), .20); --ek-highlight: rgba(var(--rgb-light), .06); /* نقش‌های وضعیت */ /* چهار پله برای هر وضعیت — از استفادهٔ واقعی کد استخراج شده: -tint ۵۰/۱۰۰ متن روی چیپِ همان رنگ (کنتراست بالا) -soft ۲۰۰ متن روشن، تأکید ملایم (پایه) ۳۰۰ متن استاندارد رنگی -strong ۴۰۰ تأکید -deep ۵۰۰/۶۰۰ پس‌زمینهٔ پررنگ و خط */ --ek-positive-tint: var(--emerald-50); --ek-positive-soft: var(--emerald-200); --ek-positive: var(--emerald-300); --ek-positive-strong: var(--emerald-400); --ek-positive-deep: var(--emerald-500); --ek-positive-deeper: var(--emerald-600); --ek-positive-bg: rgba(var(--rgb-positive), .14); --ek-positive-line: rgba(var(--rgb-positive), .35); --ek-negative-soft: var(--rose-200); --ek-negative: var(--rose-300); --ek-negative-strong: var(--rose-400); --ek-negative-deep: var(--rose-500); --ek-negative-bg: rgba(var(--rgb-negative), .14); --ek-negative-line: rgba(var(--rgb-negative), .35); /* قرمز جدا از رز نگه داشته شده: در طراحی فعلی «خطر/خطا» با قرمز و «افت قیمت» با رز نوشته می‌شود. یکی‌کردنشان تصمیم طراحی است نه بازآرایی، پس اینجا انجام نشد. */ --ek-danger-soft: var(--red-300); --ek-danger: var(--red-400); --ek-danger-deep: var(--red-500); /* متن روی سطح رنگی پررنگ (دکمهٔ اصلی، pill فعال) */ --ek-on-accent: #ffffff; --ek-info-tint: var(--blue-100); --ek-info-soft: var(--blue-200); --ek-info: var(--blue-300); --ek-info-strong: var(--blue-400); --ek-info-deep: var(--blue-500); --ek-info-bg: rgba(var(--rgb-info), .14); --ek-info-line: rgba(var(--rgb-info), .35); --ek-warning-tint: var(--amber-100); --ek-warning-soft: var(--amber-200); --ek-warning: var(--amber-300); --ek-warning-strong:var(--amber-400); --ek-warning-deep: var(--amber-500); --ek-warning-bg: rgba(var(--rgb-warning), .14); --ek-warning-line: rgba(var(--rgb-warning), .35); --ek-special-soft: var(--violet-200); --ek-special: var(--violet-300); --ek-special-strong:var(--violet-400); --ek-special-deep: var(--violet-500); --ek-special-bg: rgba(var(--rgb-special), .14); --ek-special-line: rgba(var(--rgb-special), .35); /* لاجورد — رنگ برند ابزار اختیار (متمایز از آبی «اطلاع») */ --ek-primary-soft: var(--indigo-200); --ek-primary-text: var(--indigo-300); --ek-primary-strong:var(--indigo-400); --ek-primary: var(--indigo-500); --ek-primary-bg: rgba(var(--rgb-primary), .18); --ek-primary-line: rgba(var(--rgb-primary), .40); --ek-ring: rgba(var(--rgb-info), .55); /* فیروزه‌ای — هیو ششم، در کد برای شاخص‌های نوسان و اطلاعات ثانویه */ --ek-accent-tint: var(--cyan-100); --ek-accent-soft: var(--cyan-200); --ek-accent: var(--cyan-300); --ek-accent-strong: var(--cyan-400); --ek-accent-sky: var(--sky-300); /* خنثی‌های اضافی */ --ek-text-bright: var(--slate-50); --ek-text-dim: var(--slate-600); --ek-surface-solid: var(--slate-900); --ek-surface-deep: var(--slate-950); --ek-surface-raised: var(--slate-800); --ek-line-solid: var(--slate-700); } /* ═══════════════════════════════════════════════════════════════════════ لایهٔ ۳ — دامنه‌ای (اختیار معامله) فقط نگاشت روی لایهٔ ۲؛ هیچ رنگ خامی اینجا نیست. اگر روزی تصمیم بگیریم کال آبی باشد نه سبز، فقط همین چند خط عوض می‌شود. ═══════════════════════════════════════════════════════════════════════ */ :root { --ek-call: var(--ek-positive); --ek-call-bg: var(--ek-positive-bg); --ek-call-line: var(--ek-positive-line); --ek-put: var(--ek-negative); --ek-put-bg: var(--ek-negative-bg); --ek-put-line: var(--ek-negative-line); /* وضعیت اعمال */ --ek-itm: var(--ek-positive); --ek-atm: var(--ek-warning); --ek-otm: var(--ek-text-muted); /* سود و زیان */ --ek-profit: var(--ek-positive); --ek-loss: var(--ek-negative); --ek-breakeven: var(--ek-warning); /* وضعیت زنجیره — سقف موقعیت باز */ --ek-chain-open: var(--ek-positive); --ek-chain-near: var(--ek-warning); --ek-chain-halted: var(--ek-negative); --ek-chain-reopen: var(--ek-info); --ek-chain-unknown: var(--ek-text-faint); } /* ═══════════════════════════════════════════════════════════════════════ تم روشن — پارک‌شده (تصمیم ۱۴۰۵/۰۶/۰۱) ─────────────────────────────────────────────────────────────────────── عمداً فعال نمی‌شود و کار بیشتری رویش انجام نشده. دلیل: تم روشن روی یک صفحه بی‌معناست وقتی بقیهٔ سایت ندارد؛ قرار است بعداً یک طراح UI/UX کل سایت را بازطراحی کند و آن موقع تم به‌صورت یکپارچه تصمیم‌گیری شود. فعال‌سازی فقط با ممکن است — عمداً از @media (prefers-color-scheme) استفاده نشده تا تم سیستمِ کاربر هیچ اثری نداشته باشد. هیچ کدی در پروژه این صفت را ست نمی‌کند، پس این بلوک الان کاملاً بی‌اثر است و فقط به‌عنوان نقطهٔ شروع آینده نگه داشته شده. وضعیت واقعی‌اش هنگام پارک شدن: با سنجهٔ WCAG (آستانهٔ ۳:۱ نسبت به زمینهٔ مؤثر) تب زنجیره صفر خطا داشت ولی مجموع صفحه حدود ۱۵۰ خطا — یعنی ناتمام. منبع باقی‌مانده: ~۳۰ رنگ hex دنبالهٔ بلند در CSS، ۶۱ در HTML، و رنگ‌های rgba() نمودارها که توکنیزه نشده‌اند. ═══════════════════════════════════════════════════════════════════════ */ :root[data-theme="light"] { /* سطوح */ --ek-bg: var(--slate-50); --ek-surface-1: #ffffff; --ek-surface-2: var(--slate-50); --ek-surface-3: var(--slate-100); --ek-surface-4: var(--slate-200); --ek-surface-solid: #ffffff; --ek-surface-raised: var(--slate-100); --ek-surface-deep: var(--slate-200); /* متن — ترتیب روشنایی وارونه می‌شود: آنچه در تم تیره روشن‌ترین بود (bright) اینجا باید تیره‌ترین باشد، چون در هر دو تم «برجسته‌ترین» است. */ --ek-text-bright: var(--slate-950); --ek-text-strong: var(--slate-900); --ek-text: var(--slate-800); --ek-text-2: var(--slate-600); --ek-text-muted: var(--slate-500); --ek-text-faint: var(--slate-500); --ek-text-dim: var(--slate-400); /* خطوط */ --ek-line-subtle: rgba(var(--rgb-line), .22); --ek-line: rgba(var(--rgb-line), .34); --ek-line-strong: rgba(var(--rgb-line), .48); --ek-line-solid: var(--slate-300); --ek-highlight: rgba(var(--rgb-surface), .04); /* وضعیت‌ها — همان منطق وارونگی: پلهٔ روشن تم تیره باید اینجا تیره شود، وگرنه روی زمینهٔ سفید کنتراست AA را رد می‌کند. */ --ek-positive-tint: var(--emerald-800); --ek-positive-soft: var(--emerald-700); --ek-positive: var(--emerald-600); --ek-positive-strong: var(--emerald-700); --ek-positive-deep: var(--emerald-700); --ek-positive-deeper: var(--emerald-800); --ek-negative-soft: var(--rose-700); --ek-negative: var(--rose-600); --ek-negative-strong: var(--rose-700); --ek-negative-deep: var(--rose-700); --ek-danger-soft: var(--red-700); --ek-danger: var(--red-600); --ek-danger-deep: var(--red-700); --ek-info-tint: var(--blue-700); --ek-info-soft: var(--blue-700); --ek-info: var(--blue-600); --ek-info-strong: var(--blue-700); --ek-info-deep: var(--blue-700); --ek-warning-tint: var(--amber-700); --ek-warning-soft: var(--amber-700); --ek-warning: var(--amber-600); --ek-warning-strong: var(--amber-700); --ek-warning-deep: var(--amber-700); --ek-special-soft: var(--violet-700); --ek-special: var(--violet-600); --ek-special-strong: var(--violet-700); --ek-special-deep: var(--violet-700); --ek-primary-soft: var(--indigo-700); --ek-primary-text: var(--indigo-600); --ek-primary-strong: var(--indigo-700); --ek-primary: var(--indigo-600); --ek-accent-tint: var(--cyan-700); --ek-accent-soft: var(--cyan-700); --ek-accent: var(--cyan-600); --ek-accent-strong: var(--cyan-700); --ek-accent-sky: var(--blue-600); /* پس‌زمینه‌های کم‌رنگ در تم روشن باید کم‌رنگ‌تر باشند */ --ek-positive-bg: rgba(var(--rgb-positive), .12); --ek-negative-bg: rgba(var(--rgb-negative), .12); --ek-info-bg: rgba(var(--rgb-info), .10); --ek-warning-bg: rgba(var(--rgb-warning), .14); --ek-special-bg: rgba(var(--rgb-special), .12); --ek-primary-bg: rgba(var(--rgb-primary), .10); } /* ═══════════════════════════════════════════════════════════════════════ پل کلاس‌های Tailwind ─────────────────────────────────────────────────────────────────────── markup هنوز جاهایی از utilityهای رنگ Tailwind استفاده می‌کند (text-slate-400 و مانند آن). آن‌ها رنگ ثابت تولید می‌کنند و لایهٔ توکن را دور می‌زنند، پس در تم روشن نامرئی می‌شوند. تا وقتی markup پاک‌سازی نشده، اینجا در تم روشن به نقش معنایی معادلشان نگاشت می‌شوند. تخصص عمداً ۰,۲,۰ است (صفت + کلاس) تا بدون !important بر utility غلبه کند. ═══════════════════════════════════════════════════════════════════════ */ [data-theme="light"] .text-slate-100 { color: var(--ek-text-strong); } [data-theme="light"] .text-slate-200 { color: var(--ek-text); } [data-theme="light"] .text-slate-300 { color: var(--ek-text-2); } [data-theme="light"] .text-slate-400 { color: var(--ek-text-muted); } [data-theme="light"] .text-slate-500 { color: var(--ek-text-faint); } [data-theme="light"] .text-slate-600 { color: var(--ek-text-dim); } [data-theme="light"] .text-gray-100 { color: var(--ek-text-strong); } [data-theme="light"] .text-gray-200 { color: var(--ek-text); } [data-theme="light"] .text-gray-300 { color: var(--ek-text-2); } [data-theme="light"] .text-gray-400 { color: var(--ek-text-muted); } /* text-white روی سطح رنگی می‌نشیند و باید سفید بماند — عمداً نگاشت نشده. */