/* ============================================================ tokens.css — TEK KAYNAK TASARIM DEĞİŞKENLERİ ------------------------------------------------------------ VARSAYILAN OLARAK KAPALI. Hiçbir etkisi yoktur. AÇMAK İÇİN — tek yer, tüm uygulama: shared/js/app-shell.js içinde data-module satırının yanına: document.documentElement.setAttribute('data-tokens','v2'); veya bir sayfayı tek başına denemek için etiketine: KAPATMAK İÇİN: o satırı sil. Anında eski haline döner. ------------------------------------------------------------ NEDEN VAR Şu an aynı değişkenler ÜÇ dosyada birden tanımlı: design-system.css (24) · teachmate-clean.css (13) · app-native.css (29) Hangisinin kazandığı seçici özgüllüğüne bağlı ve modülden modüle değişiyor. Örnek: --accent dashboard'da #0A7AFF, diğer 5 modülde #0a84d6. Bu dosya açıldığında hepsi TEK yerden gelir. Özgüllük: html[data-tokens="v2"]... = (0,3,1) app-native.css'in en güçlü bloğu = (0,2,1) → Yükleme sırası ne olursa olsun bu dosya kazanır. ============================================================ */ /* ── AÇIK TEMA (varsayılan görünüm) ─────────────────────────── */ html[data-tokens="v2"][data-theme="light"]:not(.dark), html[data-tokens="v2"]:not([data-theme]):not(.dark) { /* ── Yüzeyler ── Bu değerler şu an ZATEN altı modülde de aynı (app-native kazanıyor). Buraya taşınmaları görünümü değiştirmez, sadece tek yere toplar. */ --bg0: #EDF1F9; --bg1: #FFFFFF; --bg2: #F4F7FC; --bg3: #E6EBF5; --glass: #FFFFFF; --glass2: #FBFCFE; /* ── Çizgiler ── */ --border: #DCE3EF; --border2: #C7D2E4; /* ── Metin ── */ --text: #0C1424; --text2: #46546B; --text3: #7C8AA0; /* ── Vurgu renkleri ── ⚠️ BURASI GÖRÜNÜMÜ DEĞİŞTİRİR. Aşağıdaki iOS paleti şu an dashboard'da ve alt sekme çubuğunda kullanılıyor. Açtığında diğer 5 modülün vurgu tonu buna uyar. Tersini istersen A/B bloklarını değiştir. */ /* ——— A ŞIKKI: iOS paleti (app-shell tab bar ile uyumlu) ——— */ --accent: #0A7AFF; --accent2: #00C2D7; --accent-glow: rgba(10,122,255,.12); --blue: #0A7AFF; --blue2: #3D97FF; --blue-glow: rgba(10,122,255,.12); --green: #10B569; --green-glow: rgba(16,181,105,.12); --amber: #FF9500; --red: #FF3B30; --purple: #7C5CFC; /* ——— B ŞIKKI: mevcut modül paleti ——— Yukarıdaki 11 satırı yorum yap, bunları aç: --accent: #0a84d6; --accent2: #0fae9e; --accent-glow: rgba(10,132,214,.10); --blue: #0a84d6; --blue2: #2aa0e0; --blue-glow: rgba(10,132,214,.10); --green: #0a9e74; --green-glow: rgba(10,158,116,.08); --amber: #d98a0b; --red: #e0533f; --purple: #5b67e0; */ /* ── Yazı tipi ── Şu an dashboard'da TANIMSIZ, diğer 5 modülde Plus Jakarta Sans. Buradan sonra hepsinde aynı. */ --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* ── Ölçek — yazı boyutu ── Şu an modülden modüle FARKLI (iki ayrı temel yüzünden). Değerler mevcut design-system.css tabanından alındı. */ --fs-xs: .72rem; --fs-sm: .8rem; --fs-base: .85rem; --fs-md: 1rem; --fs-lg: 1.15rem; --fs-xl: 1.3rem; --fs-2xl: 1.8rem; --fs-3xl: 2.2rem; /* ── Ölçek — köşe yuvarlaklığı ── */ --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r: 10px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 24px; --r2: 16px; --r-full: 50%; /* ── Gölge ── */ --shadow-sm: 0 1px 2px rgba(16,24,40,.05); --shadow-md: 0 4px 14px rgba(16,24,40,.08); --shadow-lg: 0 10px 30px rgba(16,24,40,.10); --shadow: var(--shadow-md); } /* ── MODÜL KİMLİK RENGİ ──────────────────────────────────────── app-shell.js zaten html[data-module] set ediyor. Her modülün kendi vurgu rengi burada — modül CSS'ine dağılmasın diye. */ html[data-tokens="v2"][data-module="ogrenciler"] { --m-accent: #0A7AFF; --m-accent-soft: rgba(10,122,255,.10); --m-grad: linear-gradient(135deg,#0A7AFF,#00C2D7); } html[data-tokens="v2"][data-module="maarif"] { --m-accent: #7C5CFC; --m-accent-soft: rgba(124,92,252,.10); --m-grad: linear-gradient(135deg,#7C5CFC,#B14DFF); } html[data-tokens="v2"][data-module="yazili"] { --m-accent: #FF7A1A; --m-accent-soft: rgba(255,122,26,.10); --m-grad: linear-gradient(135deg,#FF7A1A,#FF3D71); } html[data-tokens="v2"][data-module="sinav"] { --m-accent: #00BFA6; --m-accent-soft: rgba(0,191,166,.10); --m-grad: linear-gradient(135deg,#00BFA6,#00C2D7); } html[data-tokens="v2"][data-module="calisma"] { --m-accent: #F59E0B; --m-accent-soft: rgba(245,158,11,.12); --m-grad: linear-gradient(135deg,#F59E0B,#FF7A1A); } html[data-tokens="v2"][data-module="home"] { --m-accent: #0A7AFF; --m-accent-soft: rgba(10,122,255,.10); --m-grad: linear-gradient(135deg,#0A7AFF,#00C2D7); } /* ── KOYU TEMA ───────────────────────────────────────────────── Bilinçli olarak BOŞ. Koyu tema şu an app-native.css'in :root bloğundan geliyor ve bu dosya açık temaya müdahale ettiği için koyu tema hiç etkilenmez. Koyu temayı da tek kaynağa taşımak ayrı bir adım. */