/* ============================================================================= tokens.css — Stochter tasarım token'ları (Faz 5 / adım 1) ============================================================================= BU DOSYA HİÇBİR KURAL İÇERMEZ. Sadece custom property TANIMLAR. Yüklenmesi davranış-nötrdür: kullanılmayan bir :root değişkeni render'ı etkilemez. Mevcut CSS'lerin var()'a çevrilmesi AYRI bir adımdır (adım 2). TEMA KARARI: KOYU BİRİNCİL. :root → koyu tema (varsayılan) body.theme-light / [data-theme] → açık tema override'ı (opt-in) Neden bu yapı? - Sitenin marka çekirdeği zaten koyu ("gpt" sayfaları: profil, post detay). - Faz 5 / Bölüm 3'te ana sayfa da koyuya çekilecek. O adımda YAPILACAK TEK ŞEY controller'daki body_class'tan `theme-light` sözcüğünü silmek olacak; token dosyasına dokunmak gerekmeyecek. - Açık tema `--lt-*` prefix'li HAM değerler olarak burada yaşamaya devam eder; yani ana sayfa koyuya geçtikten sonra bile geri dönüş mümkün. İSİMLENDİRME (üç katman): 1) Ham palet — `--dk-*`, `--lt-*`, `--brand-*`: TEMADAN BAĞIMSIZ sabitler. Bir kural bilerek "her zaman koyu" olmak istiyorsa doğrudan `var(--dk-card)` yazabilir. 2) Anlamsal — `--bg`, `--card`, `--text`…: TEMAYA GÖRE değişir. Normal kurallar BUNLARI kullanmalı. 3) Ölçekler — tipografi/boşluk/radius/gölge/z-index: temadan bağımsız. ⚠️ Anlamsal token'lar `` üzerinde ve altında çözülür (açık tema override'ı `body.theme-light`'ta). `html`/`::backdrop` seviyesinde anlamsal token kullanmayın; orası her zaman :root'un koyu değerini görür. ⚠️ `assets/pages/profile.css` ve `assets/pages/post-details.css` hâlâ kendi `:root` bloklarını taşıyor. Onlar bu dosyadan SONRA yükleniyor, yani onların değerleri kazanıyor — ama değerler birebir aynı (aşağıdaki "gpt çekirdeği" yorumlarına bakın), bu yüzden fark yok. Adım 2'de o bloklar silinecek. ============================================================================= */ :root { /* =========================================================================== 1. HAM PALET — MARKA --------------------------------------------------------------------------- Envanterde AYNI ROLDE 6 lacivert vardı (DESIGN_SYSTEM §2). Kanonikleştirme: #1a374d (21 kullanım) → --brand-navy [header/footer/başlık: fiili marka] #2e5a77 ( 2 kullanım) → --brand-navy-hover [navy zemin üstü hover; rol farklı, kaldı] #406882 ( 9 kullanım) → --brand-blue [birincil buton / policy gradyan ucu] #508bbd ( 2 kullanım) → --brand-blue-hover #17223B (auth zemini) → KANONİK DEĞİL: Faz 5 AdminLTE sökümünde --brand-navy'ye indirilecek (3. lacivert, tek sayfada) #2962FF (tvticker) → TradingView config'i, palet dışı (dokunulmaz) ========================================================================== */ --brand-navy: #1a374d; --brand-navy-hover: #2e5a77; --brand-blue: #406882; --brand-blue-hover: #508bbd; /* Koyu tema çekirdeği — "gpt" sayfalarından gelir, BİRİNCİL marka rengi budur. (profile.css/post-details.css: --brand / --brand-2 ile birebir aynı değerler) */ --brand: #66e3d0; /* birincil vurgu (mint) */ --accent-sky: #3da7f2; /* ikincil vurgu (link/gradyan ucu) */ --brand-2: var(--accent-sky); /* compat: gpt CSS'lerindeki eski ad */ --on-brand: #08222b; /* gradyan buton üstü metin (mint/sky üzerinde) */ --brand-teal: #31af91; /* hot-quotes trigger + footer share ikonları */ /* =========================================================================== 2. HAM PALET — ANLAMSAL (durum renkleri) --------------------------------------------------------------------------- --link: #0077ff ← #007bff (global `a`) ile BİRLEŞTİRİLDİ; ikisi de "link mavisi" rolündeydi, 1 birim fark ediyorlardı. --success: #27ae60 ← 4 ayrı "olumlu yeşil"in kanoniği: #2ecc71/#27ae60 (like gradyanı), #5cb85c (Bootstrap kopyası .btn-success), #92ba92 (post formu submit), #c7d8c7 (follow butonu), #d0e0d0 (seçili quote). Soluk olanlar (#c7d8c7/#d0e0d0) ayrı bir "seçili/ pasif" rolü; adım 2'de --success-soft'a bakılacak. --danger: #d9534f ← Bootstrap .btn-danger kopyası, tek değer, aynen kaldı. --warning: #e67e22 ← yalnız policy rozetleri/vurguları (9 kullanım). Marka paletine ALINMADI, uyarı rolünde bırakıldı. ========================================================================== */ --link: #0077ff; --link-hover: #0056cc; /* .load-more-btn:hover */ --success: #27ae60; --success-strong: #2ecc71; /* like gradyanının açık ucu */ --danger: #d9534f; --warning: #e67e22; /* =========================================================================== 3. HAM PALET — KOYU TEMA NÖTRLERİ (gpt sayfalarının fiili paleti) --------------------------------------------------------------------------- 4 ayrı "açık mavi metin" TEK değere indirildi: #cfe3ff (8) + #d6e6ff (3) + #e2f2ff (2) + #dff7ff (3) → --dk-text-soft Şeffaf beyaz kenarlıklar rol bazında 3 kademeye indirildi (.06/.08/.12). ========================================================================== */ --dk-bg: #0e141b; /* gövde gradyanının başı (gpt --bg) */ --dk-bg-2: #0c1117; /* gövde gradyanının sonu */ --dk-surface: #101923; /* gpt --surface (tanımlıydı, kullanılmıyordu) */ --dk-card: #162231; /* kart zemini (gpt --card) */ --dk-inset: #0f1822; /* post / yorum / form içi zemin */ --dk-inset-2: #101b26; /* link-preview zemini */ --dk-well: #0c141d; /* youtube-video kutusu */ --dk-avatar: #203043; /* avatar harf-fallback zemini */ --dk-text: #e7eef8; /* birincil metin (gpt --text) */ --dk-text-soft: #cfe3ff; /* ikincil/başlık metni — 4 tonun kanoniği */ --dk-muted: #7f8ea3; /* soluk metin (gpt --muted) */ --dk-border: rgba(255,255,255,.08); /* en sık kullanılan kenarlık */ --dk-border-soft: rgba(255,255,255,.06); /* kart/header kenarlığı */ --dk-border-strong: rgba(255,255,255,.12); /* buton/avatar kenarlığı */ --dk-fill: rgba(255,255,255,.04); /* hafif dolgu (tile, buton) */ --dk-fill-2: rgba(255,255,255,.06); /* rozet/liste dolgusu */ /* =========================================================================== 4. HAM PALET — AÇIK TEMA NÖTRLERİ (ana sayfa + policy; şimdilik korunuyor) --------------------------------------------------------------------------- Gri metin olarak 6 ton vardı (#333/#222/#555/#666/#777/#888): #333 (body) → --lt-text | #222 (input/sonuç) → --lt-text-strong #666/#555/#777/#888 → --lt-text-muted (#666 kanonik) Zeminler #eee/#f5f5f5/#f0f0f0/#fafbfc/#fefefe → 3 role indirildi. Çizgiler #ccc/#ddd/#e5e5e5/#e5e7eb/#d1d5db/#f2f2f2 → 3 role indirildi. ========================================================================== */ --lt-bg: #eeeeee; /* gövde zemini */ --lt-surface: #f5f5f5; /* sütun/panel zemini (.left-col/.main-col) */ --lt-card: #ffffff; /* kart/dropdown zemini */ --lt-inset: #f0f0f0; /* like butonu gibi gömük dolgular */ --lt-text: #333333; --lt-text-strong: #222222; --lt-text-muted: #666666; /* #555/#777/#888 buraya iner */ --lt-text-invert: #ffffff; /* koyu şerit üzerindeki metin */ --lt-text-on-navy: #cccccc; /* header/footer link rengi (13 kullanım) */ --lt-border: #dddddd; --lt-border-soft: #f2f2f2; /* liste ayıracı */ --lt-border-input: #d1d5db; /* form/dropdown kenarı (#e5e7eb buraya iner) */ /* =========================================================================== 5. ANLAMSAL TOKEN'LAR — KOYU (VARSAYILAN) --------------------------------------------------------------------------- Normal kurallar bu adları kullanmalı. `body.theme-light` bunları açık temaya çevirir; ham `--dk-*`/`--lt-*` adları temadan etkilenmez. ⚠️ --bg / --card / --text / --brand / --muted adları gpt CSS'lerindeki adlarla AYNI ve KOYU DEĞERLERİ DE AYNI → o :root blokları silindiğinde bile çıktı değişmez. ========================================================================== */ --bg: var(--dk-bg); --bg-2: var(--dk-bg-2); --surface: var(--dk-surface); --card: var(--dk-card); --inset: var(--dk-inset); --text: var(--dk-text); --text-soft: var(--dk-text-soft); --text-muted: var(--dk-muted); --muted: var(--text-muted); /* compat: gpt CSS'lerindeki eski ad */ --border: var(--dk-border); --border-soft: var(--dk-border-soft); --border-strong: var(--dk-border-strong); --link-color: var(--accent-sky); /* koyu temada link = sky */ /* =========================================================================== 6. TİPOGRAFİ --------------------------------------------------------------------------- Ham yığınlar (mevcut dosyalardan birebir alındı): --font-inter : profil sayfasının gövde yığını (Google Fonts'tan yükleniyor) --font-arial : ana sayfa gövdesi + error_404 --font-serif : main-nav, fancy-post, arama kutusu, post detay gövdesi, ziyaretçi profilindeki .post (7+ kullanım) --font-ui : policy sayfalarının Segoe UI yığını GÖVDE FONTU KARARI: koyu tema birincil olduğu için --font-body varsayılanı Inter; açık temada (ana sayfa) Arial olarak override edilir. Ana sayfa koyuya geçince otomatik Inter'e döner. ⚠️ post detay Inter YÜKLÜYOR ama gövdesi Georgia — bu tutarsızlık adım 2/3'ün konusu, burada karara bağlanmadı. ========================================================================== */ --font-inter: Inter, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji','Segoe UI Emoji', 'Segoe UI Symbol', sans-serif; --font-arial: Arial, sans-serif; --font-serif: 'Georgia', serif; --font-ui: 'Segoe UI', 'Arial', 'Helvetica Neue', sans-serif; --font-body: var(--font-inter); --font-head: var(--font-serif); /* Boyut skalası — 25 dağınık değerden 7 kademe. Kümeler (adet): 12px/.75rem (3) · 13px+.85rem (16) · 14px+.9rem+.95rem (22) 1rem (5) · 1.05+1.1rem (6) · 1.3+1.4+1.5rem (6) · 2.1rem (1) DESIGN_SYSTEM §5'ten iki sapma (gerekçeli): --fs-sm .875rem → .85rem (kodda .875 hiç yok, .85 en sık küçük boy) --fs-lg 1.125rem → 1.1rem (kodda 1.125 hiç yok, 1.05/1.1 kümesi var) ve §5'te olmayan bir kademe eklendi: --fs-md (.9rem) — envanterin EN kalabalık kümesi ona denk geliyordu, aksi halde adım 2'de 22 bildirimin piksel değeri değişecekti. §5'in "--fs-md: 1rem" adı --fs-base'e taşındı. */ --fs-xs: .75rem; /* 12px — meta/caption */ --fs-sm: .85rem; /* ~13.6px */ --fs-md: .9rem; /* ~14.4px — en sık kullanılan küçük boy */ --fs-base: 1rem; /* gövde */ --fs-lg: 1.1rem; /* kart/panel başlığı */ --fs-xl: 1.4rem; /* post başlığı, logo */ --fs-2xl: 2.1rem; /* policy h1 */ --lh-tight: 1.2; --lh-body: 1.55; /* gpt sayfaları */ --lh-loose: 1.7; /* policy metin gövdesi */ /* =========================================================================== 7. BOŞLUK — 4px tabanlı 6 kademe (DESIGN_SYSTEM §5 ile birebir) --------------------------------------------------------------------------- ⚠️ Kodda 6/10/14/15/18/20px de serbestçe kullanılıyor (özellikle koyu tema 10-12-14-18-20'ye yakınsıyor). Bunları hangi kademeye yuvarlayacağımız PİKSEL DEĞİŞTİREN bir karar → adım 2'ye bırakıldı, burada icat edilmedi. ========================================================================== */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; /* =========================================================================== 8. RADIUS — 20 dağınık değerden 6 kademe --------------------------------------------------------------------------- 4-6px → --r-sm (12 kullanım: buton, input, küçük kart) 8px → --r-md (12 kullanım: sütun, dropdown, popup satırı) 10-12px → --r-lg (16 kullanım: post/yorum/link-preview — EN SIK) 14px → --r-xl (gpt --radius: kart/header/modal) 999px → --r-pill (rozet, quote-symbol) 50% → --r-circle(avatar) §5 --r-lg'yi 14px demişti; fiili sayım 10-12px kümesini daha kalabalık gösterdi, bu yüzden 14px ayrı bir kademeye (--r-xl) alındı. */ --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 14px; --r-pill: 999px; --r-circle: 50%; --radius: var(--r-xl); /* compat: gpt CSS'lerindeki eski ad (14px) */ /* =========================================================================== 9. GÖLGE — 21 dağınık bildirimden 3 kademe (DESIGN_SYSTEM §5) --shadow-sm : .fancy-post (0 2px 6px rgba(0,0,0,.05)) --shadow-md : #searchresult, popup (0 4px 16px rgba(0,0,0,.08)) --shadow-lg : gpt --shadow (0 10px 30px rgba(0,0,0,.25)) ========================================================================== */ --shadow-sm: 0 2px 6px rgba(0,0,0,.05); --shadow-md: 0 4px 16px rgba(0,0,0,.08); --shadow-lg: 0 10px 30px rgba(0,0,0,.25); --shadow: var(--shadow-lg); /* compat: gpt CSS'lerindeki eski ad */ /* =========================================================================== 10. Z-INDEX — mevcut fiili katmanlar --------------------------------------------------------------------------- §5 "--z-drawer: 9998 / --z-modal: 9999" diyordu; koda bakınca katmanlar şöyle çıktı, isimler gerçeğe göre düzeltildi: 100 dropdown/submenu, #searchresult 500 sağ-alt ana sayfa butonu (FAB) 940 share popup overlay 950 share popup 970 share toast 9998 hot-quotes drawer overlay 9999 hot-quotes drawer paneli (.left-col) + cookie banner 10000 yorum report modal overlay ========================================================================== */ --z-dropdown: 100; --z-fab: 500; --z-popup-overlay: 940; --z-popup: 950; --z-toast: 970; --z-drawer-overlay: 9998; --z-drawer: 9999; --z-modal: 10000; } /* ============================================================================= AÇIK TEMA OVERRIDE'I (opt-in) ----------------------------------------------------------------------------- Devreye girme yolu: `` — bu class ZATEN mevcut (policy ×3 ve ana sayfa/quote controller'dan `theme-light` alıyor; profil ve post detay `theme-dark` alıyor). [data-theme="light"] ise ileride html/bir kapsayıcı üzerinden tema çevirmek istenirse diye ek bir kanca. Faz 5 / Bölüm 3'te ana sayfa koyuya çekilirken YAPILACAK TEK ŞEY: body_class'tan `theme-light` sözcüğünü silmek. ============================================================================= */ [data-theme="light"], body.theme-light { --bg: var(--lt-bg); --bg-2: var(--lt-bg); --surface: var(--lt-surface); --card: var(--lt-card); --inset: var(--lt-inset); --text: var(--lt-text); --text-soft: var(--lt-text-strong); --text-muted: var(--lt-text-muted); --border: var(--lt-border); --border-soft: var(--lt-border-soft); --border-strong: var(--lt-border-input); --link-color: var(--link); --font-body: var(--font-arial); } /* Koyu temayı AÇIKÇA istemek için (bir açık tema sayfası içinde koyu ada, ya da ileride [data-theme] ile çevirmek için). :root varsayılanıyla birebir aynı. */ [data-theme="dark"], body.theme-dark { --bg: var(--dk-bg); --bg-2: var(--dk-bg-2); --surface: var(--dk-surface); --card: var(--dk-card); --inset: var(--dk-inset); --text: var(--dk-text); --text-soft: var(--dk-text-soft); --text-muted: var(--dk-muted); --border: var(--dk-border); --border-soft: var(--dk-border-soft); --border-strong: var(--dk-border-strong); --link-color: var(--accent-sky); --font-body: var(--font-inter); }