/* Afrandeh Design System — CSS tokens منبع: برند بوک افرنده v2.0 (مهر ۱۴۰۵) — C:\Design Office\Brandbook\14050705 مود روشن: صفحه #EBDDC5 · سطح/کارت/هدر #F5EAD8 · سطح نرم #E6D4BA · حاشیه #D9C7AB · تعاملی مسی #C67139 (متن #9A4F1F) مود تیره: صفحه #12141C · سطح #1A1D24 · سطح نرم #20242C · تعاملی آبی UI #0B6FCB (متن #5AA6EE) Primary blue #03B0F7 | Accent/Danger red #F33B4A | Warning yellow #FAC23A | Success green (derived) توکن‌های اصلی رنگ در design_handoff_afrandeh/tokens/colors.css (پروژه برند) — نسخه‌ی زیر مقادیر همان طیف OKLCH را به hex معادل ترجمه می‌کند تا با ساختار موجود این فایل سازگار بماند. */ :root { /* Brand — پالت "Organic" (docs/handoff_light_theme_colors.md) */ --afr-brand-primary: #c67139; --afr-brand-primary-rgb: 198, 113, 57; --afr-brand-secondary: #7a8a5e; --afr-brand-secondary-rgb: 122, 138, 94; --afr-brand-accent: #f33b4a; --afr-brand-accent-rgb: 243, 59, 74; /* نسخه‌ی تیره‌شده برای حالت روشن — زرد اصلی برند (#fac23a) به‌عنوان متن/بوردر روی پس‌زمینه‌ی کرم/سفید تقریباً ناخوانا است (کنتراست ~1.6:1)؛ این مقدار ~7:1 است. حالت تاریک پایین‌تر زرد اصلی را نگه می‌دارد چون آنجا کنتراست کافی دارد. */ --afr-brand-warning: #9a4f1f; --afr-brand-warning-rgb: 154, 79, 31; /* متن هشدار درون‌فرم (برند بوک ۶.۱) */ --afr-warning-text: #6f310b; /* آبی رابط کاربری — اطلاعیه/لینک (برند بوک ۳)؛ آبی لوگو (#03B0F7) فقط برای خودِ نشان است */ --afr-brand-info: #0b6fcb; --afr-brand-info-rgb: 11, 111, 203; --afr-brand-error: #f33b4a; --afr-brand-error-rgb: 243, 59, 74; --afr-brand-success: #1fa971; --afr-brand-success-rgb: 31, 169, 113; --afr-brand-on-primary: #ffffff; /* Spacing (base 4px) */ --afr-space-1: 4px; --afr-space-2: 8px; --afr-space-3: 12px; --afr-space-4: 16px; --afr-space-5: 20px; --afr-space-6: 24px; --afr-space-8: 32px; --afr-space-10: 40px; --afr-space-12: 48px; --afr-space-16: 64px; /* Radius */ --afr-radius-sm: 6px; --afr-radius-md: 10px; --afr-radius-lg: 14px; --afr-radius-xl: 20px; --afr-radius-pill: 999px; /* Shadow — ملایم */ --afr-shadow-sm: 0 1px 2px rgba(var(--afr-brand-primary-rgb), 0.06); --afr-shadow-md: 0 4px 12px rgba(var(--afr-brand-primary-rgb), 0.08); --afr-shadow-lg: 0 12px 32px rgba(var(--afr-brand-primary-rgb), 0.12); /* Typography */ --afr-font-family: "Vazirmatn", "Inter", "Segoe UI", Tahoma, sans-serif; /* تنظیمات نمایش قابل‌انتخاب کاربر (FontSettingsDialog) — این چهار مقدار، پیش‌فرض‌اند و به‌صورت inline style روی توسط afrandehFont.js بازنویسی می‌شوند (نگاه کنید site.css برای مصرف). */ --afr-font-family-menu: var(--afr-font-family); --afr-font-family-groupkind: var(--afr-font-family); --afr-font-scale: 100%; --afr-digit-font: 'AfrPersianDigits'; --afr-font-size-xs: 0.75rem; --afr-font-size-sm: 0.875rem; --afr-font-size-md: 1rem; --afr-font-size-lg: 1.125rem; --afr-font-size-xl: 1.25rem; --afr-font-size-2xl: 1.5rem; --afr-line-height-tight: 1.35; --afr-line-height-normal: 1.5; /* Layout */ --afr-content-max-width: 1440px; --afr-touch-min: 44px; --afr-breakpoint-mobile: 768px; --afr-appbar-height: 56px; --afr-drawer-width: 220px; /* Surfaces — Light (کرم گرم) */ --afr-bg: #ebddc5; --afr-surface: #f5ead8; --afr-surface-muted: #e6d4ba; --afr-border: #d9c7ab; --afr-text: #201e1d; --afr-text-muted: #645c50; --afr-text-placeholder: #968d7f; /* Grid — برند بوک ۶.۴ */ --afr-grid-header-bg: #e6d4ba; --afr-grid-row-bg: #f5ead8; --afr-grid-row-alt-bg: #efe3ce; /* Components — هم‌راستا با MudTheme (light/dark) */ --afr-toolbar-bg: #efe3ce; --afr-tab-idle-bg: var(--mud-palette-background-gray); --afr-tab-idle-text: var(--mud-palette-text-secondary); --afr-tab-active-bg: rgba(var(--afr-brand-primary-rgb), 0.14); --afr-tab-active-border: var(--afr-brand-primary); --afr-tab-active-text: #9a4f1f; /* Chrome — AppBar / Drawer / Nav / Session (برند بوک ۹: سطوح تخت، بدون شفافیت/شیشه‌ای) */ --afr-chrome-bg: #f5ead8; --afr-chrome-text: var(--afr-brand-primary); --afr-chrome-text-muted: #645c50; --afr-chrome-border: #d9c7ab; --afr-chrome-icon: #474238; --afr-chrome-divider: rgba(var(--afr-brand-primary-rgb), 0.12); --afr-nav-text: #645c50; --afr-nav-icon: #82796a; --afr-nav-hover-bg: #efe3ce; --afr-nav-active-bg: rgba(var(--afr-brand-primary-rgb), 0.14); --afr-nav-active-text: #9a4f1f; --afr-nav-active-border: var(--afr-brand-primary); --afr-nav-group-title: #645c50; --afr-session-pill-bg: color-mix(in srgb, var(--afr-brand-primary) 8%, #f5ead8); --afr-session-pill-border: color-mix(in srgb, var(--afr-brand-primary) 22%, #dcd3c4); --afr-session-label: #645c50; --afr-session-value: var(--afr-brand-primary); --afr-user-name: #201e1d; --afr-user-code: #645c50; --afr-tab-bar-bg: #f5ead8; /* Feedback */ --afr-snackbar-duration: 1000ms; /* Grid — سطر انتخاب/فوکوس‌شده (رنگ از Accounting.razor.css گرفته شده تا در کل پروژه یکسان باشد) */ --afr-row-selected-border: #c67139; --afr-row-selected-bg: rgba(198, 113, 57, 0.14); } .mud-theme-dark, html[data-theme="dark"], html.mud-theme-dark { /* برند بوک ۶.۱: رنگ تعاملی مود تیره آبی رابط کاربری است، نه مسی */ --afr-brand-primary: #0b6fcb; --afr-brand-primary-rgb: 11, 111, 203; --afr-brand-warning: #fac23a; --afr-brand-warning-rgb: 250, 194, 58; --afr-warning-text: #f2f2f4; --afr-brand-info: #5aa6ee; --afr-brand-info-rgb: 90, 166, 238; --afr-bg: #12141c; --afr-surface: #1a1d24; --afr-surface-muted: #20242c; --afr-border: rgba(255, 255, 255, 0.08); --afr-text: #f2f2f4; --afr-text-muted: #9ea3ab; --afr-text-placeholder: #6a6f78; --afr-grid-header-bg: #20242c; --afr-grid-row-bg: #1a1d24; --afr-grid-row-alt-bg: rgba(255, 255, 255, 0.035); --afr-toolbar-bg: #20242c; --afr-tab-idle-bg: rgba(255, 255, 255, 0.06); --afr-tab-idle-text: #9ea3ab; --afr-tab-active-bg: rgba(12, 114, 203, 0.18); --afr-tab-active-border: #0b6fcb; --afr-tab-active-text: #5aa6ee; --afr-chrome-bg: #1a1d24; --afr-chrome-text: #f2f2f4; --afr-chrome-text-muted: #9ea3ab; --afr-chrome-border: rgba(255, 255, 255, 0.08); --afr-chrome-icon: #c9ccd2; --afr-chrome-divider: rgba(255, 255, 255, 0.12); --afr-nav-text: #9ea3ab; --afr-nav-icon: #9ea3ab; --afr-nav-hover-bg: rgba(255, 255, 255, 0.06); --afr-nav-active-bg: rgba(12, 114, 203, 0.18); --afr-nav-active-text: #5aa6ee; --afr-nav-active-border: #5aa6ee; --afr-nav-group-title: #9ea3ab; --afr-session-pill-bg: rgba(11, 111, 203, 0.14); --afr-session-pill-border: rgba(11, 111, 203, 0.30); --afr-session-label: #9ea3ab; --afr-session-value: #5aa6ee; --afr-user-name: #f2f2f4; --afr-user-code: #9ea3ab; --afr-tab-bar-bg: #1a1d24; --afr-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.35); --afr-shadow-md: 0 10px 28px rgba(0, 0, 0, 0.4); --afr-shadow-lg: 0 16px 44px rgba(0, 0, 0, 0.45); --afr-row-selected-border: #5aa6ee; --afr-row-selected-bg: rgba(12, 114, 203, 0.16); } /* ===== لوگو وابسته به تم (برند بوک v2.0 بخش ۲) ===== روی سطح روشن فقط نسخه‌ی روشن (واژه‌نگاره تیره #201E1D)؛ روی سطح تیره نسخه‌ی اصلی (واژه‌نگاره سفید). هر دو در markup هستند و این کلاس‌ها بر اساس html[data-theme] یکی را پنهان می‌کنند. */ .afr-logo--dark-only { display: none !important; } html[data-theme="dark"] .afr-logo--dark-only, html.mud-theme-dark .afr-logo--dark-only { display: inline-block !important; } html[data-theme="dark"] .afr-logo--light-only, html.mud-theme-dark .afr-logo--light-only { display: none !important; } /* مود تیره: آبی #0B6FCB برای دکمه‌ی پر مناسب است اما به‌عنوان متن روی #12141C کنتراست کمی دارد؛ برند بوک ۶.۱/۶.۲ برای متن/آیکون تعاملی تن روشن‌تر #5AA6EE را تعیین کرده است. */ html[data-theme="dark"] .mud-primary-text, html[data-theme="dark"] .mud-button-text.mud-button-text-primary, html[data-theme="dark"] .mud-button-outlined.mud-button-outlined-primary { color: #5aa6ee !important; } html[data-theme="dark"] .mud-button-outlined.mud-button-outlined-primary { border-color: rgba(90, 166, 238, 0.5) !important; } /* Utilities tied to tokens */ .afr-page { color: var(--afr-text); font-family: var(--afr-font-family); } .afr-content-shell { max-width: var(--afr-content-max-width); margin-inline: auto; width: 100%; } @media (max-width: 768px) { .afr-page-padding { padding: var(--afr-space-2); } } @media (min-width: 769px) { .afr-page-padding { padding: var(--afr-space-4); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* سطر انتخاب/فوکوس‌شده‌ی گریدها (MudTable/MudDataGrid/AfrandDataGrid) — سراسری، هم‌راستا با هر دو تم */ .afr-grid-row--selected { background: var(--afr-row-selected-bg) !important; outline: 2px solid var(--afr-row-selected-border); outline-offset: -2px; }