/* ========================================================================== Kontur Design Tokens -------------------------------------------------------------------------- Bütün rənglər `wwwroot/assets/images/login.png` (rəsmi loqo mockup-ı) üzərindən piksel analizi ilə çıxarılıb — bax `docs/design/01-brand-color.md`. Bu fayl YALNIZ dəyər elan edir. Heç bir selektor yazma. Komponent stilləri üçün: `kontur/theme.css`. ========================================================================== */ :root { /* ---------------------------------------------------------------------- 1. BRAND — Kontur Navy (loqodakı mavi şevron) 700 = ölçülmüş nüvə dəyəri. Digərləri ondan törədilib. ---------------------------------------------------------------------- */ --k-navy-50: #F0F2F9; --k-navy-100: #DDE1F0; --k-navy-200: #ACACD6; /* ölçülmüş */ --k-navy-300: #858FBF; /* ölçülmüş */ --k-navy-400: #6670A5; /* ölçülmüş */ --k-navy-500: #3A47A3; --k-navy-600: #2F3A8C; --k-navy-700: #252D72; /* ölçülmüş — BRAND */ --k-navy-800: #1B2259; --k-navy-900: #141A46; --k-navy-950: #0D1030; /* ---------------------------------------------------------------------- 2. BRAND — Kontur Red (loqodakı qırmızı "R") 500 = düz (flat) marka qırmızısı. 400 = mockup-dakı işıqlı üz. ---------------------------------------------------------------------- */ --k-red-50: #FDEBEE; --k-red-100: #FECBD3; /* ölçülmüş */ --k-red-200: #F8A1AC; /* ölçülmüş */ --k-red-300: #FE7681; /* ölçülmüş */ --k-red-400: #E43344; /* ölçülmüş */ --k-red-500: #D42032; /* BRAND */ --k-red-600: #B41526; /* ölçülmüş */ --k-red-700: #A01121; /* ölçülmüş */ --k-red-800: #7A0C16; --k-red-900: #4D030B; /* ölçülmüş */ /* ---------------------------------------------------------------------- 3. NEUTRAL — soyuq, navy-yə çalan. Təmiz boz İSTİFADƏ ETMƏ. ---------------------------------------------------------------------- */ --k-n-0: #FFFFFF; --k-n-50: #F4F6FB; /* Paper — səhifə fonu */ --k-n-100: #EDEFF5; --k-n-200: #DFE3EC; --k-n-300: #C2C8D6; --k-n-400: #9199AC; /* YALNIZ sərhəd/ikon — mətn üçün AA keçmir (2.85) */ --k-n-500: #697085; /* ən açıq icazəli mətn tonu — 4.56 : 1 */ --k-n-600: #4A5169; /* Slate — əsas mətn */ --k-n-700: #343B57; --k-n-800: #242A42; --k-n-900: #161A2B; /* ---------------------------------------------------------------------- 4. SEMANTIC Qeyd: success qəsdən TEAL-dır — marka qırmızısı və mavisi ilə rəqabət aparmasın deyə. Bootstrap yaşılı istifadə etmə. ---------------------------------------------------------------------- */ /* Hər dəyər həm ağ fonda, həm öz -bg fonunda ≥ 4.5:1 olacaq şəkildə hesablanıb — bax `docs/design/01-brand-color.md#kontrast`. Açıqlaşdırma. */ --k-success: #107C60; --k-success-hover: #0C6650; --k-success-bg: #E6F4F0; --k-success-border: #9FD4C6; --k-warning: #996416; --k-warning-hover: #7D5211; --k-warning-bg: #FCF3E3; --k-warning-border: #EBC98A; --k-danger: var(--k-red-500); --k-danger-bg: var(--k-red-50); --k-danger-border: #F5B5BD; /* navy-400 deyil: navy-400 (#6670A5) öz fonunda 4.17 verirdi. */ --k-info: #616A9D; --k-info-bg: #EEF0F8; --k-info-border: #C3C9E2; /* ---------------------------------------------------------------------- 5. ROLE TOKENS — komponentlər YALNIZ bunlara istinad etsin. Palitra dəyişəndə tək yerdən dəyişir. ---------------------------------------------------------------------- */ --k-bg-page: var(--k-n-50); --k-bg-surface: var(--k-n-0); --k-bg-sunken: var(--k-n-100); --k-bg-inverse: var(--k-navy-900); --k-text: var(--k-n-600); --k-text-strong: var(--k-n-900); --k-text-muted: var(--k-n-500); /* Qəsdən n-500-ə bərabərdir. n-400 mətn kimi AA keçmir, ona görə "daha açıq dördüncü pillə" yoxdur. Mətn ierarxiyasını rənglə deyil, ölçü və çəki ilə qur. */ --k-text-faint: var(--k-n-500); --k-text-on-dark: #E8EBF5; --k-text-on-brand:#FFFFFF; --k-border: var(--k-n-200); --k-border-strong:var(--k-n-300); --k-border-focus: var(--k-navy-500); /* Tünd səth (sidebar) üzərində örtük. Rəng deyil, şəffaflıqdır — altındakı navy tonu nə olursa olsun düzgün işləyir. */ --k-overlay-line: rgba(255, 255, 255, .06); --k-overlay-hover: rgba(255, 255, 255, .05); --k-overlay-active: rgba(255, 255, 255, .04); --k-primary: var(--k-navy-700); --k-primary-hover: var(--k-navy-800); --k-primary-active: var(--k-navy-900); --k-primary-soft: var(--k-navy-50); /* Tünd səthdə birincili hərəkət. navy-700 tünd fonda "yox olur", ona görə bir pillə açıq. Ağ mətnlə 8.2:1 verir. */ --k-primary-on-dark: var(--k-navy-500); --k-primary-on-dark-hover: var(--k-navy-600); --k-accent: var(--k-red-500); --k-accent-hover: var(--k-red-600); --k-accent-soft: var(--k-red-50); --k-link: var(--k-navy-600); --k-link-hover: var(--k-navy-800); /* ---------------------------------------------------------------------- 6. WORKFLOW LANE — sifariş statusuna bağlı rəng. Bu dəyərlər `docs/design/04-patterns.md`-dəki cədvəllə eynidir. ---------------------------------------------------------------------- */ --k-lane-request: var(--k-navy-400); /* Sorğu */ --k-lane-accounting:var(--k-warning); /* Mühasibat */ --k-lane-factory: var(--k-navy-700); /* İstehsalat */ --k-lane-completed: var(--k-success); /* Tamamlandı */ --k-lane-cancelled: var(--k-red-500); /* Ləğv */ /* ---------------------------------------------------------------------- 6b. CHART — kateqorial seriya rəngləri Bu cüt gözlə seçilməyib: dataviz validator-unun altı yoxlamasından keçib (işıqlıq zolağı, xroma, CVD ayrılığı ΔE 20.0 protan / 34.9 tritan, normal görmə ΔE 32.0, səth kontrastı ≥ 3:1). Marka navy-si (#252D72) işıqlıq zolağından kənarda qalırdı — ona görə diaqramda bir pillə açıq navy-500 işlədilir. Sıra SABİTDİR — seriya sayı dəyişəndə rənglər sürüşməməlidir. ---------------------------------------------------------------------- */ --k-chart-1: var(--k-navy-500); /* Gəlir */ --k-chart-2: var(--k-red-500); /* Xərc */ --k-chart-1-soft: rgba(58, 71, 163, .14); --k-chart-2-soft: rgba(212, 32, 50, .12); --k-chart-grid: var(--k-n-200); --k-chart-axis: var(--k-n-300); --k-chart-label: var(--k-text-muted); --k-chart-zero: var(--k-n-400); /* ---------------------------------------------------------------------- 7. TYPOGRAPHY Şrift yüklənmir — sistem stack-i. Ofis maşınlarında Segoe UI, Azərbaycan diakritikləri (ə ğ ı ö ş ü ç) tam örtülür, FOUT yoxdur. Inter istəyirsənsə `/assets/fonts/inter/` altına self-host et — stack-in başında olduğu üçün avtomatik götürüləcək. ---------------------------------------------------------------------- */ --k-font-ui: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --k-font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, "Courier New", monospace; --k-fs-display: 28px; --k-fs-h1: 22px; --k-fs-h2: 17px; --k-fs-h3: 14px; --k-fs-body: 14px; --k-fs-sm: 12.5px; --k-fs-micro: 11px; --k-fs-code: 13px; --k-lh-tight: 1.22; --k-lh-snug: 1.35; --k-lh-body: 1.55; --k-fw-regular: 400; --k-fw-medium: 500; --k-fw-semi: 600; --k-fw-bold: 700; --k-fw-black: 800; --k-ls-display: -0.02em; --k-ls-tight: -0.01em; --k-ls-eyebrow: 0.08em; --k-ls-label: 0.06em; /* ---------------------------------------------------------------------- 8. SPACE — 4px şəbəkə. Aralarında dəyər uydurma. ---------------------------------------------------------------------- */ --k-sp-1: 4px; --k-sp-2: 8px; --k-sp-3: 12px; --k-sp-4: 16px; --k-sp-5: 20px; --k-sp-6: 24px; --k-sp-8: 32px; --k-sp-10: 40px; --k-sp-12: 48px; --k-sp-16: 64px; /* ---------------------------------------------------------------------- 9. RADIUS — mitre (şevron kəsimi) yalnız kvadrat həndəsə ilə oxunur, ona görə accent rail HƏMİŞƏ radius 0-dır. ---------------------------------------------------------------------- */ --k-r-none: 0; --k-r-sm: 3px; --k-r-md: 6px; --k-r-lg: 10px; --k-r-pill: 999px; /* -------------------------------------------------------------------- 10. ELEVATION — kölgələr navy çalarlı, neytral qara deyil. -------------------------------------------------------------------- */ --k-sh-1: 0 1px 2px rgba(20, 26, 70, .06); --k-sh-2: 0 2px 8px rgba(20, 26, 70, .08); --k-sh-3: 0 12px 32px rgba(20, 26, 70, .14); --k-sh-focus: 0 0 0 3px rgba(58, 71, 163, .28); /* -------------------------------------------------------------------- 11. MOTION — sürətli və az. ERP-də animasiya gecikdirmə deməkdir. -------------------------------------------------------------------- */ --k-dur-fast: 120ms; --k-dur-base: 180ms; --k-ease: cubic-bezier(.2, .6, .3, 1); /* -------------------------------------------------------------------- 12. LAYOUT -------------------------------------------------------------------- */ --k-sidebar-w: 250px; --k-rail-w: 4px; /* accent rail eni */ --k-mitre: 8px; /* şevron kəsim dərinliyi */ --k-row-h: 44px; /* standart cədvəl sətri */ --k-row-h-dense:34px; /* .k-table--dense */ --k-control-h: 38px; /* input / select / button */ } /* Hərəkət azaldılması — istifadəçi sistem səviyyəsində istəyibsə hörmət et. */ @media (prefers-reduced-motion: reduce) { :root { --k-dur-fast: 0ms; --k-dur-base: 0ms; } }