/* ============================================================================ Alexandria: Tema Sistemi ---------------------------------------------------------------------------- İKİ KATMANLI TOKEN YAPISI: Katman 1 (ham palet) : tema bağımsız renk kütüphanesi (--c-*) Katman 2 (anlamsal rol): bileşenlerin kullandığı roller (--bg, --surface…) Bileşenler YALNIZCA Katman 2'yi (ve geçiş dönemi takma adlarını) kullanır. Tema değiştirmek = Katman 2'nin farklı ham renklere bağlanması. AYDINLIK TEMA ("Mürekkep"): Aşama 3'te OKLCH ile türetildi, kontrastı ölçüldü. Değerler elle seçilmedi; /tmp betikleriyle üretildi: · nötr eksen hue 262, algısal açıklık adımlarıyla · aksan hue burulması +18° (sRGB'de mavinin teal'e kaymasını önler) · ders paleti koyu paletin hue sırası korunur, L-0.03 / C×1.25 Hedefler: gövde metni 7:1, ikincil metin ve durum renkleri 4.5:1, form kontrol sınırı 3:1 (WCAG 1.4.11). ========================================================================== */ /* ---------------------------------------------------------------- Katman 1 */ :root{ /* nötr eksen (koyu → açık) */ --c-ink-900:#0B1120; /* en koyu zemin */ --c-ink-800:#151F33; /* yüzey */ --c-ink-700:#1D2A44; /* yükseltilmiş yüzey */ --c-ink-600:#22314F; /* vurgu yüzeyi (tur balonu vb.) */ --c-ink-500:#2B3A57; /* kenarlık */ --c-ink-400:#1a2540; /* ince ayraç */ --c-slate-300:#8B9BB8; /* ikincil metin */ --c-slate-100:#E8EDF7; /* birincil metin */ --c-white:#FFFFFF; /* marka ve durum renkleri */ --c-blue-400:#4CC3FF; --c-blue-950:#082F49; /* aksan üstü metin (koyu) */ --c-green-400:#3EE08A; --c-green-950:#052E16; --c-orange-400:#FFA14E; --c-red-400:#FF6B6B; --c-purple-400:#C08BFF; --c-lesson-ink:#1e293b; /* pastel üstü metin */ } /* ------------------------------------------------- Katman 2: KOYU (varsayılan) */ :root{ color-scheme: dark; /* zeminler ve yüzeyler */ --bg: var(--c-ink-900); --surface: var(--c-ink-800); --surface-2: var(--c-ink-700); --surface-3: var(--c-ink-600); --border: var(--c-ink-500); --border-soft: var(--c-ink-400); /* metin */ --text: var(--c-slate-100); --text-muted: var(--c-slate-300); /* etkileşim */ --accent: var(--c-blue-400); --accent-contrast: var(--c-blue-950); /* aksan zemini üstündeki metin */ /* durum */ --ok: var(--c-green-400); --ok-contrast: var(--c-green-950); --warn: var(--c-orange-400); --err: var(--c-red-400); --info: var(--c-purple-400); /* ÜRÜN DİLİ, üç bant (anlam her temada korunur) */ --band-red: var(--c-red-400); /* kesin yasak */ --band-orange: var(--c-orange-400); /* imkân varsa */ --band-green: var(--c-green-400); /* keyfi istek */ /* perde, gölge, ders paleti */ --overlay: rgba(3, 7, 16, .82); --overlay-soft: rgba(0, 0, 0, .45); --shadow-1: 0 8px 24px rgba(0, 0, 0, .35); --shadow-2: 0 18px 60px rgba(0, 0, 0, .55); --lesson-ink: var(--c-lesson-ink); /* --- ton/kontrast yardımcıları (Aşama 2: sabit renklerin karşılıkları) --- */ --accent-ink: #082F49; /* aksan zemini üstünde metin (uygulama) */ --accent-ink-2: #06283F; /* aynı rol, giriş/tanıtım/sihirbaz sayfaları */ --accent-tint: #16283F; /* seçili çip/aktif kutu zemini */ --accent-border: #245A6E; --ok-ink: #052E16; /* yeşil zemin üstünde metin */ --ok-border: #245A41; --warn-border: #5A4424; --err-border: #4A2530; --info-ink: #2E1065; /* mor zemin üstünde metin */ --pure: #FFFFFF; /* saf beyaz vurgu (fark çerçevesi, buton metni) */ /* liste/alt yüzeyler */ --surface-list: #16213A; /* öğretmen listesi */ --surface-row: #26334A; /* satır ayracı */ --surface-deep: #0F172A; /* boyama ızgarası metni/zemini */ --divider-soft: #16223C; /* tanıtım sayfası ayracı */ --bg-deep: #0A0F1D; /* tanıtım sayfası alt zemin */ --toggle-knob: #94A3B8; /* anahtar topuzu */ /* rozet/etiket zeminleri */ --badge-hard: #7F1D1D; --badge-iter: #1E40AF; --badge-tor: #7C2D12; --badge-adv: #0E7490; --badge-pref: #7C3AED; /* çizgili desenler (kapalı/yasak hücreler) */ --stripe-a: #7F1D1D; --stripe-b: #1E293B; --stripe-c: #B91C1C; --stripe-d: #450A0A; /* saydam tonlar (zemin üstü vurgu) */ --tint-accent-06: rgba(76,195,255,.06); --tint-accent-07: rgba(76,195,255,.07); --tint-accent-08: rgba(76,195,255,.08); --tint-accent-09: rgba(76,195,255,.09); --tint-accent-22: rgba(76,195,255,.22); --tint-accent-28: rgba(76,195,255,.28); --tint-accent-35: rgba(76,195,255,.35); --tint-ok-06: rgba(62,224,138,.06); --tint-ok-12: rgba(62,224,138,.12); --tint-ok-14: rgba(62,224,138,.14); --tint-ok-15: rgba(62,224,138,.15); --tint-ok-18: rgba(62,224,138,.18); --tint-ok-30: rgba(62,224,138,.3); --tint-warn-12: rgba(255,161,78,.12); --tint-warn-20: rgba(255,161,78,.2); --tint-err-10: rgba(248,113,113,.1); --tint-err-12: rgba(255,107,107,.12); --tint-err-18: rgba(255,107,107,.18); --tint-err-20: rgba(255,107,107,.2); --tint-err-45: rgba(255,107,107,.45); --tint-info-10: rgba(192,132,252,.1); --tint-surface-35: rgba(21,31,51,.35); --tint-surface-50: rgba(21,31,51,.5); /* perdeler ve gölge tonları */ --scrim-header: rgba(11,17,32,.85); --scrim-bar: rgba(11,17,32,.95); --scrim-modal: rgba(3,7,16,.7); --shadow-a: rgba(0,0,0,.45); --shadow-b: rgba(0,0,0,.5); --shadow-c: rgba(0,0,0,.55); --shadow-d: rgba(0,0,0,.6); --shadow-e: rgba(0,0,0,.65); /* PDF önizleme çerçevesi (tarayıcı görüntüleyici zemini) */ --pdf-backdrop: #525659; /* DERS PALETİ: JS bunu okur (Aşama 3'te aydınlık için doygunlaştırılacak) */ --lesson-palette: #93c5fd,#fca5a5,#86efac,#fcd34d,#c4b5fd,#f9a8d4,#7dd3fc,#fdba74,#a5f3fc,#d9f99d,#fda4af,#a7f3d0,#e9d5ff,#fde68a; /* Aşama 5, bant renginin DOLGU ve METİN görevleri ayrıldı. Dolgu (şerit, boya, nokta) iki temada da aynı canlı tonda kalır; metin varyantı aydınlıkta okunabilir olacak şekilde koyulaşır. */ --err-fill: #D03F45; /* solid tehlike düğmesi, beyaz metinle AA */ --band-red-ink: var(--band-red); --band-orange-ink: var(--band-orange); --band-green-ink: var(--band-green); /* Aşama 3, çakışan tokenlardan ayrılan roller */ --lesson-ink-2: rgba(0,0,0,.55); /* ders hücresindeki öğretmen adı */ --diff-outline: var(--c-white); /* fark vurgusunun kesikli çerçevesi */ --border-strong: #616C81; /* form kontrol sınırı: WCAG 1.4.11 */ } /* --------------------------------------- Katman 2: AYDINLIK · MÜREKKEP ŞU AN GEÇİCİ: yalnızca yapının yerinde olduğunu göstermek için makul varsayılanlar. Tema anahtarı Aşama 4'te geleceği için bu blok henüz kullanıcıya ulaşmıyor. Aşama 3'te kontrast ölçülerek yeniden tasarlanacak. */ [data-theme="light"]{ /* MÜREKKEP: OKLCH ile türetildi, kontrast ölçüldü (AŞAMA 3) */ color-scheme: light; --bg: #E7EDF8; --surface: #FFFFFF; --surface-2: #F0F5FD; --surface-3: #E1E8F6; --border: #B0BBCE; --border-strong: #8793A8; --border-soft: #D9E0EC; --text: #141E31; --text-muted: #5B6577; --accent: #0069C0; --accent-contrast: #FFFFFF; --ok: #007440; --ok-contrast: #FFFFFF; --warn: #AB5E00; --err: #BE2130; --info: #7730B7; --err-fill: #D03F45; --band-red: #FF6B6B; /* dolgu: koyu temayla aynı */ --band-orange: #FFA14E; --band-green: #3EE08A; --band-red-ink: #BA1C2D; /* metin: ölçülmüş koyu ton */ --band-orange-ink: #A55A00; --band-green-ink: #007943; --overlay: rgba(20,30,49,.45); --overlay-soft: rgba(20,30,49,.25); --shadow-1: 0 6px 18px rgba(20,30,49,.09); --shadow-2: 0 18px 48px rgba(20,30,49,.16); --lesson-ink: #162137; --accent-ink: #FFFFFF; --accent-ink-2: #FFFFFF; --accent-tint: #E0EEFF; --accent-border: #94C2F7; --ok-ink: #FFFFFF; --ok-border: #95D6AB; --warn-border: #F7BD8F; --err-border: #F9ADA9; --info-ink: #FFFFFF; --pure: #FFFFFF; --surface-list: #F3F7FE; --surface-row: #D2D9E7; --surface-deep: #141E31; --divider-soft: #E4EAF3; --bg-deep: #DCE3EF; --toggle-knob: #FFFFFF; --badge-hard: #A91226; --badge-iter: #2F51C1; --badge-tor: #9B5400; --badge-adv: #006F87; --badge-pref: #6E25AD; --stripe-a: #F69B96; --stripe-b: #FFFFFF; --stripe-c: #DA4147; --stripe-d: #FFDFDD; --diff-outline: #141E31; --pdf-backdrop: #525659; --tint-accent-06: #F4FBFF; --tint-accent-07: rgba(0,105,192,.07); --tint-accent-08: rgba(0,105,192,.08); --tint-accent-09: rgba(0,105,192,.09); --tint-accent-22: #D8F2FF; --tint-accent-28: #CDEEFF; --tint-accent-35: #C0EAFF; --tint-ok-06: rgba(0,126,70,.06); --tint-ok-12: #E8FBF1; --tint-ok-14: #E4FBEF; --tint-ok-15: #E2FAED; --tint-ok-18: #DCF9EA; --tint-ok-30: #C5F6DC; --tint-warn-12: #FFF4EA; --tint-warn-20: #FFECDC; --tint-err-10: #FFF0F0; --tint-err-12: #FFEDED; --tint-err-18: #FFE4E4; --tint-err-20: #FFE1E1; --tint-err-45: #FFBCBC; --tint-info-10: #F9F3FF; --tint-surface-35: rgba(225,232,246,.35); --tint-surface-50: rgba(225,232,246,.50); --scrim-header: rgba(231,237,248,.85); --scrim-bar: rgba(231,237,248,.95); --scrim-modal: rgba(20,30,49,.45); --shadow-a: rgba(20,30,49,.35); --shadow-b: rgba(20,30,49,.12); --shadow-c: rgba(20,30,49,.16); --shadow-d: rgba(20,30,49,.55); --shadow-e: rgba(20,30,49,.20); --lesson-ink-2: rgba(20,30,49,.62); --lesson-palette: #7FBCFF, #FE9395, #5CEB97, #F7C800, #BBA8FF, #FA96CE, #57CBFF, #FEAB4C, #87ECF8, #CBF27B, #FF92A1, #8BEDC2, #E2C9FD, #F9DB61; } /* ============================================================================ GEÇİŞ DÖNEMİ TAKMA ADLARI Mevcut altı sayfa üç ayrı isim sözlüğü kullanıyordu (--txt/--text, --mut/--muted, --red/--pr/--err …). Hepsi burada TEK kaynağa bağlanır; böylece Aşama 1'de hiçbir bileşen dosyasına dokunmadan tema merkezîleşir. Aşama 2'de bileşenler anlamsal isimlere geçirilecek, bu blok küçülecek. ========================================================================== */ :root, [data-theme="light"]{ --panel: var(--surface); --panel2: var(--surface-2); --line: var(--border); --txt: var(--text); --mut: var(--text-muted); --muted: var(--text-muted); --acc: var(--accent); --grn: var(--ok); --orn: var(--warn); --red: var(--err); --pur: var(--info); --pg: var(--band-green); --po: var(--band-orange); --pr: var(--band-red); --relax: var(--info); } /* Tema değiştirme düğmesi. Boyut sayfaya göre değişebilsin diye burada; theme.js yalnız davranışı kuruyor. */ #themeBtn{ background: transparent; border: 1px solid var(--border-strong); color: var(--text-muted); border-radius: 8px; width: 30px; height: 30px; line-height: 1; font-size: 15px; cursor: pointer; padding: 0; flex: 0 0 auto; } #themeBtn:hover{ color: var(--text); border-color: var(--accent); }