/* ============================================================================ MindAeon WPA — TOKEN MOTORU (tasarım token'ları) ---------------------------------------------------------------------------- Bu dosya SADECE tasarım token'larını (CSS custom properties) ve ince bir temel reset içerir. Bileşen stili YOKTUR (o components.css'in işi). Tema modeli: - - Varsayılan: kurumsal + light (:root'ta tanımlı) - Diğer 5 kombinasyon [data-theme][data-mode] seçicileriyle yalnız DEĞİŞEN token'ları ezer. - Tenant marka rengi: ile override edilir; tanımsızsa --accent, --primary'e düşer (aşağıdaki fallback mantığı). Kimlikler: - kurumsal : Salesforce mavisi (#0B5CAB→#1B96FF), nötr gri-mavi zemin - saha : indigo→mor (#4F46E5→#7C3AED), enerjik - depo : teal→grafit (#0E7490→#1F2937), YÜKSEK KONTRAST (güneş/eldiven) Not: 6 kombinasyonun hepsinde WCAG AA hedeflenmiştir (ink/bg, on-primary/primary). Bileşenler DAİMA bu değişkenlerle renk/ölçü alır — sabit hex GÖMÜLMEZ (tek istisna: --accent tanımsızsa --primary fallback). ============================================================================ */ /* --------------------------------------------------------------------------- :root — kurumsal + light (VARSAYILAN, tam token seti) --------------------------------------------------------------------------- */ :root { /* Zeminler / yüzeyler */ --bg: #EEF2F7; /* nötr gri-mavi sayfa zemini */ --surface: #FFFFFF; /* kart / panel */ --surface-2: #F4F7FB; /* ikincil yüzey (girinti, satır zebrası) */ --surface-3: #E7EDF5; /* üçüncül yüzey (chip, track) */ --line: #D3DCE6; /* kenarlık / ayraç */ /* Metin */ --ink: #16202E; /* ana metin — bg üstünde ~13:1 */ --muted: #5A6B7E; /* ikincil metin — surface üstünde ~4.6:1 */ /* Birincil (marka mavisi) */ --primary: #0B5CAB; --primary-600: #094B8C; /* koyu ton (hover/pressed) */ --primary-100: #E1EDFA; /* açık ton (yumuşak zemin) */ --on-primary: #FFFFFF; /* primary üstündeki metin — ~6.2:1 */ /* Vurgu (tenant markası). Varsayılan primary; inline değeri bu tanımı ezerek tenant rengini geçirir. */ --accent: var(--primary); /* tanımsızsa primary'e düşer */ --accent-600: var(--primary-600); /* Durum renkleri (metin tonu + yumuşak zemin) */ --ok: #1E7B45; --ok-bg: #E4F4EA; --warn: #9A6400; --warn-bg: #FCF1DA; --bad: #B4262A; --bad-bg: #FBE5E5; --info: #0B5CAB; --info-bg: #E1EDFA; /* Gölgeler (yumuşak, kurumsal) */ --shadow-1: 0 1px 2px rgba(16, 32, 46, .08), 0 1px 3px rgba(16, 32, 46, .06); --shadow-2: 0 4px 12px rgba(16, 32, 46, .12), 0 2px 6px rgba(16, 32, 46, .08); /* Overlay perdesi (sheet/modal arka planı) — dark temalarda koyulaşır */ --scrim: rgba(16, 32, 46, .45); /* Yarıçaplar */ --radius: 12px; --radius-lg: 16px; --radius-pill: 999px; /* Boşluk birimi ve dokunma ölçüleri — YOĞUNLUK (density) ile ölçeklenir. Kullanım: calc(var(--space) * .5|1|1.5|2|3). Varsayılanlar aşağıda density bloklarınca (html[data-density]) ezilir; öznitelik yoksa bunlar geçerlidir. */ --space: 7px; /* boşluk birimi */ --tap: 40px; /* düğme/giriş min. dokunma hedefi */ --row: 50px; /* liste/appbar/navbar satır yüksekliği */ /* Tipografi — yalnız sistem yığını (CSP: harici font yok) */ --font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "Cascadia Mono", "Consolas", "SFMono-Regular", "Menlo", monospace; } /* --------------------------------------------------------------------------- YOĞUNLUK (density) — ekranı daha verimli kullanmak için ölçek. Üç kademe: comfortable (ferah) / cozy (orta, VARSAYILAN) / compact (sık). Boşluk + dokunma hedefi + kök yazı boyutu (rem tabanı) birlikte ölçeklenir; böylece tek öznitelikle tüm ekranlarda daha çok/az içerik sığar. --------------------------------------------------------------------------- */ html[data-density="comfortable"] { --space: 8px; --tap: 44px; --row: 56px; font-size: 16px; } html[data-density="cozy"] { --space: 7px; --tap: 40px; --row: 50px; font-size: 15px; } html[data-density="compact"] { --space: 6px; --tap: 36px; --row: 44px; font-size: 13.5px; } /* --------------------------------------------------------------------------- kurumsal + dark Koyu gri-mavi zemin, parlak mavi vurgu; ink açık, on-primary koyu-üstü-beyaz. --------------------------------------------------------------------------- */ [data-theme="kurumsal"][data-mode="dark"] { --bg: #0C131C; --surface: #131E2B; --surface-2: #1A2635; --surface-3: #223243; --line: #2C3E52; --ink: #E8EEF5; /* bg üstünde ~14:1 */ --muted: #9BAABC; /* surface üstünde ~5.4:1 */ --scrim: rgba(0, 0, 0, .6); --primary: #2C8CF0; /* dark'ta daha parlak mavi */ --primary-600: #1B96FF; /* hover'da aydınlanır */ --primary-100: #16324B; /* koyu yumuşak zemin */ --on-primary: #04121F; /* parlak mavi üstünde koyu metin — ~7:1 */ --ok: #4FCB84; --ok-bg: #10321F; --warn: #E6B14D; --warn-bg: #3A2C0F; --bad: #F0787B; --bad-bg: #3A1315; --info: #4FA6F5; --info-bg: #10283F; --shadow-1: 0 1px 2px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .4); --shadow-2: 0 4px 14px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .45); } /* --------------------------------------------------------------------------- saha + light — indigo→mor, enerjik --------------------------------------------------------------------------- */ [data-theme="saha"][data-mode="light"] { --bg: #F3F2FC; --surface: #FFFFFF; --surface-2: #F5F3FE; --surface-3: #EBE7FB; --line: #DAD3F1; --ink: #1E1A33; /* bg üstünde ~13:1 */ --muted: #61587E; /* surface üstünde ~5:1 */ --primary: #4F46E5; --primary-600: #3F35C7; --primary-100: #E7E4FC; --on-primary: #FFFFFF; /* indigo üstünde ~5.6:1 */ --accent: #7C3AED; /* mor — saha kimliğinin ikinci rengi */ --accent-600: #6926C9; --ok: #1E7B45; --ok-bg: #E4F4EA; --warn: #9A6400; --warn-bg: #FCF1DA; --bad: #B4262A; --bad-bg: #FBE5E5; --info: #4F46E5; --info-bg: #E7E4FC; --shadow-1: 0 1px 2px rgba(30, 20, 70, .10), 0 1px 3px rgba(30, 20, 70, .07); --shadow-2: 0 4px 14px rgba(30, 20, 70, .16), 0 2px 6px rgba(30, 20, 70, .10); } /* --------------------------------------------------------------------------- saha + dark — koyu indigo zemin, parlak indigo/mor vurgu --------------------------------------------------------------------------- */ [data-theme="saha"][data-mode="dark"] { --bg: #100E1D; --surface: #191634; --surface-2: #211D42; --surface-3: #2B2555; --line: #372F63; --ink: #ECEAFB; /* bg üstünde ~15:1 */ --muted: #A79FD0; /* surface üstünde ~5.6:1 */ --scrim: rgba(0, 0, 0, .6); --primary: #8B82F5; /* dark'ta aydınlatılmış indigo */ --primary-600: #A79EFF; --primary-100: #241F52; --on-primary: #0B0820; /* açık indigo üstünde koyu metin — ~8:1 */ --accent: #B98BF6; /* aydınlatılmış mor */ --accent-600: #CBA6FF; --ok: #4FCB84; --ok-bg: #12321F; --warn: #E6B14D; --warn-bg: #3A2C0F; --bad: #F0787B; --bad-bg: #3A1518; --info: #8B82F5; --info-bg: #221D4A; --shadow-1: 0 1px 2px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .4); --shadow-2: 0 4px 14px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .45); } /* --------------------------------------------------------------------------- depo + light — teal→grafit, YÜKSEK KONTRAST (güneş altında/eldivenle) --------------------------------------------------------------------------- */ [data-theme="depo"][data-mode="light"] { --bg: #F2F5F6; --surface: #FFFFFF; --surface-2: #EDF2F3; --surface-3: #DCE6E8; --line: #B9C7CB; /* kalın/net ayraç — yüksek kontrast */ --ink: #0C1418; /* neredeyse siyah — bg üstünde ~16:1 */ --muted: #45565C; /* surface üstünde ~6.5:1 (yüksek kontrast) */ --primary: #0E6E82; /* koyulaştırılmış teal — beyaz metin AA */ --primary-600: #0A5567; --primary-100: #D6EAEF; --on-primary: #FFFFFF; /* teal üstünde ~5.1:1 */ --accent: #1F2937; /* grafit — depo kimliğinin ikinci rengi */ --accent-600: #111823; --ok: #16713C; --ok-bg: #DDF1E4; /* koyu/net durumlar */ --warn: #8A5A00; --warn-bg: #F9ECD0; --bad: #A31E22; --bad-bg: #F8DEDE; --info: #0E6E82; --info-bg: #D6EAEF; --shadow-1: 0 1px 2px rgba(12, 20, 24, .14), 0 1px 3px rgba(12, 20, 24, .10); --shadow-2: 0 4px 14px rgba(12, 20, 24, .20), 0 2px 6px rgba(12, 20, 24, .14); } /* --------------------------------------------------------------------------- depo + dark — grafit zemin, parlak teal vurgu, MAKSİMUM KONTRAST --------------------------------------------------------------------------- */ [data-theme="depo"][data-mode="dark"] { --bg: #0A0F12; --surface: #141C21; --surface-2: #1C262C; --surface-3: #26333A; --line: #3A4A52; /* net ayraç */ --ink: #F2F7F9; /* bg üstünde ~17:1 */ --muted: #A7B7BE; /* surface üstünde ~7:1 (yüksek kontrast) */ --scrim: rgba(0, 0, 0, .66); --primary: #24B8D4; /* parlak teal */ --primary-600: #45C8E0; --primary-100: #0E3A44; --on-primary: #041216; /* parlak teal üstünde koyu metin — ~8.5:1 */ --accent: #7C93A6; /* aydınlatılmış grafit-gri (dark'ta görünür vurgu) */ --accent-600: #96AABA; --ok: #4FD48C; --ok-bg: #0E3020; --warn: #EDBB55; --warn-bg: #3A2C0E; --bad: #F5817F; --bad-bg: #3C1516; --info: #24B8D4; --info-bg: #0E3540; --shadow-1: 0 1px 2px rgba(0, 0, 0, .6), 0 1px 3px rgba(0, 0, 0, .5); --shadow-2: 0 4px 14px rgba(0, 0, 0, .65), 0 2px 6px rgba(0, 0, 0, .5); } /* ============================================================================ İNCE TEMEL RESET (yalnız kabuk-geneli davranış; bileşen stili DEĞİL) ============================================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); /* Dokunmada mavi vurgu kutusu kapalı (PWA hissi) */ -webkit-tap-highlight-color: transparent; /* Kaydırma zincirleme/pull-to-refresh taşmasını sınırla */ overscroll-behavior-y: contain; } body { min-height: 100vh; line-height: 1.45; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Klavye ile gezinti için görünür odak — accent halkası */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Yalnız işaretçiyle etkileşimde odak halkasını gösterme */ :focus:not(:focus-visible) { outline: none; } ::selection { background: var(--primary-100); color: var(--ink); } /* Not: .ic (ikon) stili components.css'te tek kaynaktan tanımlıdır (24px + bağlam ölçüleri). Token katmanında yinelenmez — çakışma önlenir. */ /* Hareketi azalt tercihi: animasyon/geçişleri kıs (erişilebilirlik) */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }