/* ═══════════════════════════════════════════════════════════════════════════ TASARIM TOKENLERİ — panelin ve kimlik ekranlarının ortak renk/ölçek kaynağı ═══════════════════════════════════════════════════════════════════════════ NEDEN AYRI DOSYA. Bu blok panel.css'in 1. bölümüydü ve yalnızca `body.is-authenticated` altında geçerliydi. Kimlik ekranları (giriş, kayıt, şifre sıfırlama) panelin dışında — `is-public` yüzeyinde — ama aynı renkleri kullanmaları gerekiyor: kullanıcı giriş yapar yapmaz panele geçiyor, iki yüzeyin farklı gri rampalarında olması kapı ile odanın farklı boyanması gibi. Tokenleri kopyalamak iki doğruluk kaynağı yaratırdı; anlam renklerinin üç zemin × iki temada ölçüldüğü bir sistemde bu, ölçümün bir kopyada eskimesi demek. Bu yüzden blok TAŞINDI ve kapsayıcı seçici iki yüzeyi birden sayıyor: `body.is-authenticated` (panel) ve `body.page-auth` (kimlik ekranları). `page-auth` kimlik ekranlarının ORTAK KANCASI. On altı ekran üç ayrı kabukta duruyordu — _Layout+page-login, _Layout+sınıfsız ve `Layout = null` olan yedi sayfa — ve son ikisinin koyu teması hiç yoktu. Kanca hepsine verildi. KAPSAM KASITLI OLARAK DAR: `:root`a konsaydı pazarlama sitesine ve kamuya açık kart sayfasına da sızardı — o iki yüzeyin kendi dili var (krem zemin, geniş yarıçap, dekoratif degradeler) ve orası bu turda ele alınmadı. YÜKLEME SIRASI. site.css → design-tokens.css → auth.css / panel.css → utilities.css. ═══════════════════════════════════════════════════════════════════════════ */ /* ─────────────────────────────────────────────────────────────────────────── 1. TOKEN KATMANI ─────────────────────────────────────────────────────────────────────────── `--accent` BİLEREK yeniden tanımlanmıyor: _Layout kiracının kurumsal rengini satır içi `body { --accent: … }` ile veriyor ve beyaz etiket kurulumlarında panelin o rengi taşıması gerekiyor. Buradaki türev tonlar hep ondan üretilir. ─────────────────────────────────────────────────────────────────────────── */ body.is-authenticated, body.page-auth { /* ── Tipografi ölçeği ─────────────────────────────────────────────────── Eski ölçek panel için iki yerden bozuktu: tabanı 0.98rem gibi keyfi bir değerdi ve 1.38rem'den sonra doğrudan 1.8–2.7rem'e atlıyordu — kart başlığı ile sayfa başlığı arasında kullanılabilir hiçbir basamak yoktu, bu yüzden ekranlar ya çok küçük ya çok büyük başlık kullandı. Yeni ölçek 14px tabanlı ve yoğun arayüz için ~1,15–1,25 oranında ilerliyor. ALT SINIR 12px: bunun altı, gerçek veriyle dolu bir tabloda okunmuyor. */ --fs-xs: 0.75rem; /* 12px — rozet, tablo üst bilgisi, yardımcı not */ --fs-sm: 0.8125rem; /* 13px — ikincil metin, tablo ikinci satırı */ --fs-md: 0.875rem; /* 14px — GÖVDE VARSAYILANI, tablo hücresi, form */ --fs-lg: 1rem; /* 16px — kart başlığı */ --fs-xl: 1.125rem; /* 18px — bölüm başlığı */ --fs-2xl: 1.375rem; /* 22px — sayfa başlığı (H1) */ /* Sayısal gösterim ayrı bir ölçek: metrik kartlarındaki rakamlar metin değil **veri**dir; boyutları başlık hiyerarşisine karışmamalı. */ --fs-metric-sm: 1.25rem; --fs-metric: 1.75rem; --fs-metric-lg: 2.25rem; --lh-tight: 1.25; /* başlıklar ve rakamlar */ --lh-snug: 1.45; /* tablo ve form — 1.6 yoğun arayüzde çok havalı */ --lh-normal: 1.6; /* paragraf uzunluğunda açıklama metni */ --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --tracking-tight: -0.011em; /* büyük punto optik düzeltmesi */ --tracking-wide: 0.04em; /* yalnızca büyük harfli mikro etiketler */ /* ── Aralık: 4px ızgarası ─────────────────────────────────────────────── Eski ölçekte 4px yoktu (8'den başlıyordu), bu yüzden ikon–metin gibi küçük mesafeler ya sıfırlandı ya 8px'e zorlandı. */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 48px; --sp-10: 64px; /* ── Köşe yarıçapı ────────────────────────────────────────────────────── Eski değerler (kart 24px, kabuk 32px) yoğun bir listede kutuları birbirine benzeten, sınırları yumuşatan bir etki yapıyordu. Panelde yarıçap bilgi taşır: küçük kontrol = küçük yarıçap. */ --r-xs: 6px; /* rozet, etiket */ --r-sm: 8px; /* düğme, giriş alanı */ --r-md: 10px; /* iç bloklar */ --r-lg: 12px; /* kart */ --r-xl: 16px; /* panel/bölüm kabuğu */ --r-full: 999px; /* hap biçimi */ /* ── Yükseklik (gölge) ────────────────────────────────────────────────── Eskiden tek bir `0 28px 90px` gölge vardı ve her kutuya uygulanıyordu; her şey aynı yükseklikte durunca yükseklik hiçbir şey ifade etmiyor. Üç basamak: kart neredeyse düz, yalnızca gerçekten üstte duran şey (menü, açılır kutu, kalıcı çubuk) belirgin gölge alır. */ --elev-0: none; --elev-1: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04); --elev-2: 0 2px 4px rgba(0, 0, 0, 0.06), 0 8px 16px rgba(0, 0, 0, 0.08); --elev-3: 0 4px 8px rgba(0, 0, 0, 0.08), 0 16px 32px rgba(0, 0, 0, 0.14); /* ── Hareket ──────────────────────────────────────────────────────────── Tek bir eğri ve üç süre. Panelde hareketin işi süslemek değil, neyin neye dönüştüğünü göstermek; bu yüzden hepsi kısa. */ --ease: cubic-bezier(0.2, 0, 0, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-1: 120ms; /* renk/opaklık — anında hissedilmeli */ --dur-2: 180ms; /* boyut/konum */ --dur-3: 240ms; /* giriş/çıkış */ /* ── Odak ─────────────────────────────────────────────────────────────── Klavye odağı tek bir yerden tanımlanıyor; her bileşen kendi hâlini uydurduğunda bazıları odağı hiç göstermiyordu. */ --focus-ring: 0 0 0 2px var(--pnl-canvas), 0 0 0 4px var(--accent); } /* ── Açık tema yüzey ve metin tokenleri ───────────────────────────────────── Nötr bir gri ramp: eski krem zemin (#f4efe7) ekrandaki tek sıcak yüzeydi ve veri renkleriyle (yeşil/kırmızı durum rozetleri) sürekli çatışıyordu. */ body.is-authenticated, body.page-auth { --pnl-canvas: #f6f7f9; /* sayfanın zemini */ --pnl-surface: #ffffff; /* kart */ --pnl-surface-2: #f1f3f6; /* iç blok, tablo başlığı, hover */ --pnl-surface-3: #ffffff; /* açılır kutu, menü */ --pnl-inset: #eef1f4; /* girinti: kod, boş durum */ --pnl-border: rgba(16, 24, 40, 0.10); --pnl-border-soft: rgba(16, 24, 40, 0.06); --pnl-border-strong: rgba(16, 24, 40, 0.18); /* Metin renkleri WCAG AA'ya göre ÖLÇÜLDÜ (küçük metin için eşik 4.5:1). Üçüncül ton ilk yazdığımda #8b95a5'ti ve beyaz kart üstünde yalnızca 3.03:1, sayfa zemininde 2.82:1 veriyordu — yani zaman damgaları, grup başlıkları ve yardımcı metinlerin tamamı eşiğin altındaydı. Ölçüm yapılmadan seçilmiş bir "açık gri" gözle iyi görünüp testte kalıyor. */ --pnl-text: #101828; /* birincil 16.1:1 */ --pnl-text-2: #475467; /* ikincil — etiket, açıklama 7.69:1 */ /* Üçüncül ton iki kez ölçüldü. İlk ölçüm BEYAZ kart üstündeydi (#667085 = 4,97:1, geçer). Ama gerçek kullanımının bir bölümü kartın değil SAYFA ZEMİNİNİN üstünde: /admin/cards/create formundaki `.form-hint` satırları saydam bir kart içinde, yani #f6f7f9 üstünde duruyor ve orada 4,48:1'e düşüyor. Token en koyu zeminde de geçmeli; #5d6779 zeminde 5,26:1, beyazda 5,70:1 veriyor ve ikincil tondan hâlâ ayırt ediliyor. */ --pnl-text-3: #5d6779; /* üçüncül — zemin 5,26:1 · kart 5,70:1 */ /* ── Anlam renkleri ───────────────────────────────────────────────────── ÖLÇÜM ZEMİNİ `--pnl-surface-2`. Bu kural pahalıya öğrenildi: renkler beyaz kart üstünde ölçülüp AA'yı geçtiği sanılıyordu, ama gerçek kullanımları kendi %10 tint'i + surface-2 zemini. Aynı arıza dört kez çıktı (uyarı 4,40 · üçüncül metin 4,48 · başarı 4,46 · dil rozetleri). Yeni renk eklerken ÜÇ zeminde birden ölçün. Son ölçüm (küçük metin eşiği 4,5:1 — en düşük değer 4,67): açık: yüzey / yüzey2 / zemin koyu: yüzey / yüzey2 / zemin success 6,54 / 5,91 / 6,12 7,13 / 6,57 / 7,77 warning 6,41 / 5,79 / 5,99 7,53 / 6,93 / 8,20 danger 5,57 / 5,03 / 5,21 5,63 / 5,22 / 6,10 info 5,17 / 4,67 / 4,84 5,99 / 5,52 / 6,51 attn 5,70 / 5,15 / 5,33 7,85 / 7,22 / 8,58 ───────────────────────────────────────────────────────────────────── */ /* #067647 surface-2 üstünde 4,46:1. Rozetlerin ve etiketlerin gerçek zemini kendi tint'i + surface-2'dir; beyaz kart üstünde ölçmek dört kez yanlış sonuç verdi. #067647 orada 4,46:1. */ --pnl-success: #05603a; --pnl-success-bg: rgba(5, 96, 58, 0.10); /* #b54708 beyaz üstünde 5,43:1 ile geçiyordu ama gerçek kullanımı kendi %10 tint'i üstünde — orada 4,40:1'e düşüyor, eşiğin altı. Tint'li zemin ölçülmeden seçilen "AA geçen" bir renk bu yüzden yanıltıcı. */ --pnl-warning: #93370d; --pnl-warning-bg: rgba(147, 55, 13, 0.10); --pnl-danger: #b42318; --pnl-danger-bg: rgba(180, 35, 24, 0.10); --pnl-info: #175cd3; --pnl-info-bg: rgba(23, 92, 211, 0.10); /* Vurgunun metin üstünde okunabilir hâli. Marka kırmızısı büyük dolu yüzeylerde beyaz metinle yeterli kontrast verir; küçük metin olarak kullanıldığında koyulaştırılması gerekir. */ --pnl-accent-fg: color-mix(in srgb, var(--accent) 78%, #000); --pnl-accent-bg: color-mix(in srgb, var(--accent) 8%, transparent); --pnl-accent-border: color-mix(in srgb, var(--accent) 28%, transparent); --pnl-on-accent: #ffffff; } html[data-theme="dark"] body.is-authenticated, html[data-theme="dark"] body.page-auth { /* Nötrün bir tık soğuğu: tamamen akromatik siyah ekranda "ölü" görünüyor, maviye kaçan çok hafif bir ton derinlik veriyor ama renk gibi okunmuyor. */ --pnl-canvas: #0b0d11; --pnl-surface: #12151a; --pnl-surface-2: #181c22; --pnl-surface-3: #1c2129; --pnl-inset: #0e1116; --pnl-border: rgba(255, 255, 255, 0.09); --pnl-border-soft: rgba(255, 255, 255, 0.05); --pnl-border-strong: rgba(255, 255, 255, 0.16); /* Koyu temada da ölçüldü: #6b7480 kart üstünde 3.86:1 ile eşiğin altındaydı. */ --pnl-text: #e7eaee; /* birincil 14.6:1 */ --pnl-text-2: #9aa3ae; /* ikincil 7.16:1 */ --pnl-text-3: #8a94a1; /* üçüncül 5.95:1 */ --pnl-success: #3ccb7f; --pnl-success-bg: rgba(60, 203, 127, 0.12); --pnl-warning: #f6a94a; --pnl-warning-bg: rgba(246, 169, 74, 0.12); --pnl-danger: #f87171; --pnl-danger-bg: rgba(248, 113, 113, 0.12); --pnl-info: #60a5fa; --pnl-info-bg: rgba(96, 165, 250, 0.12); /* Koyu zeminde marka kırmızısı metin olarak koyu kalıyor; açılıyor. */ --pnl-accent-fg: color-mix(in srgb, var(--accent) 62%, #ffffff); --pnl-accent-bg: color-mix(in srgb, var(--accent) 12%, transparent); --pnl-accent-border: color-mix(in srgb, var(--accent) 34%, transparent); --pnl-on-accent: #ffffff; /* Koyu zeminde gölge işe yaramaz (siyah üstüne siyah); ayrım kenarlıkla kurulur, gölge yalnızca gerçekten yüzen katmanlarda kalır. */ --elev-1: none; --elev-2: 0 4px 12px rgba(0, 0, 0, 0.4); --elev-3: 0 8px 28px rgba(0, 0, 0, 0.55); }