/* ⚠ DEVRALINAN DOSYA — KAYNAK: Kuyum Plus ERP `static/management/css/tokens.css` * * Commerce FAZ 0 (2026-09-27) bu dosyayı `static/commerce/css/vendor/` * altına TAŞIDI. İçeriğe tek karakter dokunulmadı; yalnız yeri değişti. * * NEDEN: devralınan 285 MB'lık ERP statik ağacı, içindeki 51 çözümsüz * varlık referansı yüzünden üretim `collectstatic` adımını kırıyordu * (FAZ 12 denetimi, P0-002). Statik hat artık yalnız `static/commerce/` * ağacını taşır; panelin gerçekten kullandığı bu iki token katmanı da * bu yüzden buraya alındı. * * ⚠ ERP tarafında bu dosya güncellenirse buradaki kopya OTOMATİK * GÜNCELLENMEZ; eşitleme elle yapılır (bkz. docs/deploy.md). */ /* ============================================================================ * KUYUM PLUS DESIGN SYSTEM V1.0 — TOKENS.CSS (KATMAN ②) * FAZ 0 (2026-08-08) — SEMANTİK TOKEN SÖZLEŞMESİ * * Referans doküman: context/active/design-system-audit-and-roadmap.md * * SÖZLEŞME: * Şablonlar artık `#64748b` YAZMAZ; `var(--kp-text-secondary)` İSTER. * Ham renk seçmek colors.css'in işidir; ANLAM atamak bu dosyanın işidir. * * BU DOSYA DA HİÇBİR SEÇİCİYİ BOYAMAZ — yalnız custom property tanımlar. * FAZ 0 sonunda bu token'ların TÜKETİCİSİ YOKTUR (bilinçli). Şablon * migrasyonu FAZ 1+ işidir. Bu yüzden dosyanın eklenmesi tek başına * hiçbir ekranda görsel değişiklik üretemez. * * METRONIC İLİŞKİSİ: * Metronic'in `--bs-*` değişkenleri EZİLMEZ. Nerede Metronic'in kendi * semantiği zaten doğruysa, token ona REFERANS verir (`var(--bs-*, fallback)`) * — böylece Metronic tema değiştirdiğinde token da onunla birlikte döner. * Nerede Metronic'in değeri denetimde tespit edilen marka paletinden * sapıyorsa, token colors.css'teki ham değeri kullanır. * * KATMAN SIRASI: * style.bundle.css → colors.css → [tokens.css] → components.css → kp-custom.css * ========================================================================== */ :root { /* ------------------------------------------------------------------------ * MARKA (BRAND) * Anlamı: seçim, vurgu, aktif durum, premium marka öğeleri. * ⚠ UYARI DEĞİLDİR. "Ödeme başarısız" / "Dikkat" için --kp-warning kullanın. * ---------------------------------------------------------------------- */ --kp-brand: var(--kp-gold-500); --kp-brand-hover: var(--kp-gold-600); --kp-brand-active: var(--kp-gold-700); --kp-brand-subtle: var(--kp-gold-50); /* açık zemin dolgusu */ --kp-brand-border: var(--kp-gold-200); /* açık zeminde ince kenarlık */ --kp-brand-ink: var(--kp-gold-700); /* açık zemin ÜSTÜNDE altın METİN (saf altın beyazda ~1.4:1 — okunmaz; bkz. kp-pos-theme.css --kp-gold-ink aynı gerekçe) */ /* ------------------------------------------------------------------------ * YÜZEY (SURFACE) * ---------------------------------------------------------------------- */ --kp-bg-page: var(--kp-neutral-50); --kp-bg-surface: var(--kp-white); --kp-bg-elevated: var(--kp-white); /* modal / dropdown / popover */ --kp-bg-muted: var(--kp-neutral-100); /* tablo başlığı, pasif alan */ /* ------------------------------------------------------------------------ * METİN * NOT: `--kp-text-muted` BİLİNÇLİ OLARAK KULLANILMADI — projede zaten * 3 global tanımı ve 45 tüketicisi var (kp-custom.css:1775 #667085, * kp-pos-theme.css:84 #A9B6C8, :161 #5A6880). Aynı ismi burada yeniden * tanımlamak ya sessizce ezilirdi ya da o 45 kullanımın rengini * değiştirirdi. Üçüncü seviye için --kp-text-tertiary kullanılır. * ---------------------------------------------------------------------- */ --kp-text-primary: var(--kp-neutral-900); --kp-text-secondary: var(--kp-neutral-500); --kp-text-tertiary: var(--kp-neutral-400); --kp-text-inverse: var(--kp-white); /* ------------------------------------------------------------------------ * KENARLIK * ---------------------------------------------------------------------- */ --kp-border: var(--kp-neutral-200); --kp-border-strong: var(--kp-neutral-300); --kp-divider: var(--kp-neutral-100); /* ------------------------------------------------------------------------ * KOYU MARKA YÜZEYİ ÜSTÜ KATMAN (FAZ 1A'da eklendi) * * Bunlar palet rengi DEĞİL, yarı saydam katmandır: koyu lacivert bir * yüzeyin (modal hero başlığı, sidebar) üstünde çip/pill zemini üretmek * için. Düz bir nötr token'a bağlanamaz — altındaki yüzeyin rengini * geçirmesi gerekiyor. Projede bu desen zaten yaygın * (base.html sidebar: rgba(255,255,255,.06/.08/.13)); tek isim altında * toplanması FAZ 1+ için yakınsama noktası verir. * ---------------------------------------------------------------------- */ --kp-overlay-on-dark: rgba(255, 255, 255, .12); --kp-overlay-on-dark-border: rgba(255, 255, 255, .22); /* ------------------------------------------------------------------------ * DURUM (STATUS) — MARKADAN BAĞIMSIZ * `-subtle` varyantları açık zemin dolgusu içindir (rozet arka planı vb.). * ---------------------------------------------------------------------- */ --kp-success: var(--kp-green-500); --kp-success-subtle: var(--kp-green-100); --kp-success-ink: var(--kp-green-700); --kp-danger: var(--kp-red-500); --kp-danger-subtle: var(--kp-red-100); --kp-danger-ink: var(--kp-red-700); --kp-warning: var(--kp-amber-500); --kp-warning-subtle: var(--kp-amber-100); --kp-warning-ink: var(--kp-amber-700); --kp-info: var(--kp-blue-500); --kp-info-subtle: var(--kp-blue-100); --kp-info-ink: var(--kp-blue-700); /* ------------------------------------------------------------------------ * RADIUS — KANONİK ÖLÇEK (px) * * ⚠⚠ NEDEN rem DEĞİL px — FAZ 0'DA ÖLÇÜLEREK DOĞRULANMIŞ TUZAK: * Metronic `style.bundle.css` kök font boyutunu EZİYOR ve bunu * VIEWPORT'A GÖRE DEĞİŞTİRİYOR: * :55592 body, html { font-size: 13px !important } * :55603 @media (max-width: 991.98px) → 12px !important * :55609 @media (max-width: 767.98px) → 12px !important * Yani bu arayüzde 1rem = **13px (≥992px) / 12px (<992px)** — 16px DEĞİL, * ve SABİT de değil. * * Tarayıcıda ölçüldü (gerçek CSS zinciri yüklenerek): `width: 0.875rem` * → **10.5px** (beklenen "14px" değil). Yani rem ile yazılmış bir radius * ölçeği hem yanlış değer üretir hem de ekran daraldığında SESSİZCE * küçülür. Dashboard alias'ında bu doğrudan görsel değişiklik demekti. * * FAZ 1+ KURALI: bu projede yeni ölçü (radius/spacing/boyut) yazarken * rem KULLANMA — px kullan. Mevcut rem değerleri bu fazda değiştirilmedi. * * Değerler UYDURULMADI — denetimdeki gerçek kullanım frekansından alındı * (parantez içi = proje genelindeki kullanım sayısı). * * NOT: projede zaten var olan `--kp-card-radius` (kp-custom.css:1465, * 0.625rem = 8.125px) bu ölçekteki `--kp-radius-md` (8px) ile * YAKINDIR ama BİREBİR DEĞİLDİR. Bilinçli olarak birleştirilmedi: * birleştirmek `.kp-card`/`.kp-badge` görünümünü 0.125px oynatırdı. * FAZ 1+ yakınsama adayı. * ---------------------------------------------------------------------- */ --kp-radius-xs: 4px; /* 63× */ --kp-radius-sm: 6px; /* 157× */ --kp-radius-md: 8px; /* 224× */ --kp-radius-lg: 10px; /* 245× — projedeki EN yaygın radius */ --kp-radius-xl: 12px; /* 190× */ --kp-radius-2xl: 14px; /* 45× — dashboard kart ailesinin gerçek değeri */ --kp-radius-pill: 999px; /* 137× */ /* ------------------------------------------------------------------------ * GÖLGE (SHADOW) * NOT: `--kp-shadow-lg` / `--kp-shadow-xl` BİLİNÇLİ OLARAK KULLANILMADI — * kp-pos-theme.css:97,98,173,174 bu isimleri POS ekranları için zaten * tanımlıyor. Çakışmamak için üst basamak `--kp-shadow-modal` adını alır. * * --kp-shadow-md, dashboard'daki dört kopya token ailesinin * (--gd-/--av-/--sp-shadow) BİREBİR değeridir — bu yüzden o üç dosya * görsel değişiklik olmadan buraya alias edilebildi. * ---------------------------------------------------------------------- */ --kp-shadow-xs: 0 1px 2px rgba(16, 24, 40, .04); --kp-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05); --kp-shadow-md: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 18px rgba(16, 24, 40, .05); --kp-shadow-modal: 0 12px 32px rgba(16, 24, 40, .12); /* ------------------------------------------------------------------------ * SPACING — 8px TEMELLİ ÖLÇEK (px) * Denetimde HİÇBİR dosyada spacing token'ı bulunamadı; 4px ızgarasına * hizalanma en iyi dosyada bile %45'i geçmiyordu. Bu ölçek YENİDİR. * Mevcut component ölçüleri bu fazda MIGRATE EDİLMEDİ. * * px cinsinden — gerekçe yukarıdaki RADIUS bloğunda (1rem = 13px tuzağı). * ---------------------------------------------------------------------- */ --kp-space-1: 4px; --kp-space-2: 8px; --kp-space-3: 12px; --kp-space-4: 16px; --kp-space-5: 24px; --kp-space-6: 32px; --kp-space-8: 48px; } /* ============================================================================ * KOYU TEMA — ALTYAPI HAZIRLIĞI (FAZ 0'DA HİÇBİR EKRANA UYGULANMAZ) * * ⚠ ÖNEMLİ: Bu blok BİLİNÇLİ OLARAK BOŞ BIRAKILDI. * * Denetimde projede İKİ AYRI tema attribute'u olduğu tespit edildi: * `data-theme` → wholesale_index.html'in 1.022 kuralı * `data-kp-theme` → kp-pos-theme.css + transactions_board/base.html * (ayrıca Metronic'in kendi `data-bs-theme` mekanizması) * Bu üçünü birleştirmek FAZ 0'ın kapsamı DIŞINDADIR ve talimatla açıkça * yasaklanmıştır ("Mevcut tema attribute'larını körlemesine birleştirme"). * * Buraya şimdi bir `[data-theme="dark"] { ... }` bloğu yazmak, wholesale * ekranındaki mevcut 1.022 kuralla ETKİLEŞİME GİRERDİ — yani "sıfır görsel * değişiklik" garantisini bozardı. Bu yüzden yalnızca SÖZLEŞME belgelenir: * * Gelecekte (FAZ 2+, tema birleştirme kararı alındıktan sonra) koyu tema * ŞU ŞEKİLDE eklenecek — token'lar yeniden tanımlanır, BİLEŞENLER DEĞİL: * * :root[data-theme="dark"] { * --kp-bg-page: var(--kp-navy-950); * --kp-bg-surface: var(--kp-navy-900); * --kp-text-primary: var(--kp-neutral-50); * --kp-border: var(--kp-navy-700); * --kp-brand-ink: var(--kp-gold-300); * } * * Kural: bileşenler HER ZAMAN token üzerinden stillenir; hiçbir bileşen * kuralı `@media (prefers-color-scheme)` veya `[data-theme]` bloğunun * İÇİNE yazılmaz. Böylece tema eklemek tek noktadan yapılır. * ========================================================================== */