/* ========================================================================= PLATO ÇİÇEK — DESIGN TOKENS ========================================================================= Bu dosya, projenin TEK doğruluk kaynağı (single source of truth) olan ham tasarım değerlerini (token) tanımlar. Hiçbir component/sayfa stili burada YAZILMAZ — sadece isimlendirilmiş, tekrar kullanılabilir değerler. Namespace: tüm token'lar `--pc-` (Plato Çiçek) öneki taşır, projedeki diğer CSS değişkenleriyle (ör. eski `--color-primary`) çakışmaması için. Katman mimarisi: tokens.css → ham değerler (BU DOSYA, marka nötr/placeholder) typography.css → tokens.css'ten beslenen, isimlendirilmiş tipografi seviyeleri theme.css → tokens.css'ten beslenen, geriye dönük uyumlu legacy değişken isimleri + component stilleri admin.css → theme.css + tokens.css'i miras alan admin layout stilleri Marka logosu/renkleri netleştiğinde SADECE "1. COLOR TOKENS" bölümündeki primitive palet değerleri değiştirilir — semantic/component katmanlarının hiçbiri elle dokunulmaz, çünkü hepsi bu primitive'lere referans verir. ========================================================================= */ :root { /* ===================================================================== 1. COLOR TOKENS ===================================================================== İki katman: (a) primitive skalalar (ham renk, 50→900 ton skalası), (b) semantic roller (primitive'lere referans veren, anlamsal isimler). Component/sayfa kodu SADECE semantic katmanı kullanmalı, primitive'lere doğrudan referans vermemeli — böylece marka rengi değiştiğinde tek nokta güncellemesi yeterli olur. ===================================================================== */ /* --- 1a. Primitive: Green (botanik yeşil — primary aday) --- */ --pc-color-green-50: #eef3f0; --pc-color-green-100: #d7e3db; --pc-color-green-200: #b0c7b7; --pc-color-green-300: #86a892; --pc-color-green-400: #628a71; --pc-color-green-500: #476f57; --pc-color-green-600: #3c5a45; /* mevcut --color-primary ile birebir */ --pc-color-green-700: #2b4232; /* mevcut --color-primary-dark ile birebir */ --pc-color-green-800: #203228; --pc-color-green-900: #16221c; /* --- 1b. Primitive: Rose (bordo/pembe — accent aday) --- */ --pc-color-rose-50: #fbeef1; --pc-color-rose-100: #f3dfe4; /* mevcut --color-accent-light ile birebir */ --pc-color-rose-200: #e8bcc7; --pc-color-rose-300: #d992a3; --pc-color-rose-400: #c06277; --pc-color-rose-500: #a13a52; /* mevcut --color-accent ile birebir */ --pc-color-rose-600: #8a2f44; /* mevcut .btn-accent:hover ile birebir */ --pc-color-rose-700: #6f2537; --pc-color-rose-800: #551c2a; --pc-color-rose-900: #3c141d; /* --- 1c. Primitive: Neutral (sıcak krem/gri — metin/yüzey/kenarlık) --- */ --pc-color-neutral-0: #ffffff; --pc-color-neutral-50: #faf6f0; /* mevcut --color-bg ile birebir */ --pc-color-neutral-100: #f3ede3; /* mevcut admin-table th arka planı */ --pc-color-neutral-200: #e7ddd0; /* mevcut --color-border ile birebir */ --pc-color-neutral-300: #d8cabb; --pc-color-neutral-400: #b8a998; --pc-color-neutral-500: #948577; --pc-color-neutral-600: #6b6560; /* mevcut --color-text-muted ile birebir */ --pc-color-neutral-700: #4a4642; --pc-color-neutral-800: #302d2b; --pc-color-neutral-900: #262322; /* mevcut --color-text ile birebir */ /* --- 1d. Primitive: Semantic hues (durum renkleri — sipariş durumu vb. mevcut kullanımdan sistemleştirildi) --- */ --pc-color-emerald-50: #e4f2e7; /* mevcut success bg / stock-badge.in-stock bg */ --pc-color-emerald-600: #3c7a4e; /* mevcut --color-success */ --pc-color-emerald-700: #2f6b3f; /* mevcut status-delivered text */ --pc-color-red-50: #fbe6e5; /* mevcut danger bg / stock-badge.out-stock bg */ --pc-color-red-300: #f2b8b5; /* mevcut .form-error-summary border */ --pc-color-red-600: #b3261e; /* mevcut --color-danger */ --pc-color-red-600-rgb: 179, 38, 30; /* red-600'ün rgb bileşenleri — rgba() içinde kullanım için */ --pc-color-red-700: #a4302a; /* mevcut status-cancelled text */ --pc-color-amber-50: #fdf1d6; /* mevcut status-pending bg */ --pc-color-amber-700: #92640a; /* mevcut status-pending text */ --pc-color-blue-50: #dceefb; /* mevcut status-confirmed bg */ --pc-color-blue-700: #1d5f8a; /* mevcut status-confirmed text */ --pc-color-violet-50: #eae2f8; /* mevcut status-preparing bg */ --pc-color-violet-700: #6a3fb8; /* mevcut status-preparing text */ --pc-color-orange-50: #ffe8cf; /* mevcut status-out_for_delivery bg */ --pc-color-orange-700: #a15b0e; /* mevcut status-out_for_delivery text */ /* --- 1e. Semantic: Brand roller --- */ --pc-color-primary: var(--pc-color-green-600); --pc-color-primary-hover: var(--pc-color-green-700); --pc-color-primary-active: var(--pc-color-green-800); --pc-color-primary-subtle: var(--pc-color-green-50); --pc-color-accent: var(--pc-color-rose-500); --pc-color-accent-hover: var(--pc-color-rose-600); --pc-color-accent-active: var(--pc-color-rose-700); --pc-color-accent-subtle: var(--pc-color-rose-100); /* --- 1f. Semantic: Yüzey / arka plan --- */ --pc-color-bg-canvas: var(--pc-color-neutral-50); /* sayfa zemini */ --pc-color-bg-surface: var(--pc-color-neutral-0); /* kart/panel zemini */ --pc-color-bg-surface-muted: var(--pc-color-neutral-100); /* tablo başlığı vb. */ --pc-color-bg-inverse: var(--pc-color-green-700); /* header/footer koyu zemin */ /* --- 1g. Semantic: Metin --- */ --pc-color-text-primary: var(--pc-color-neutral-900); --pc-color-text-secondary: var(--pc-color-neutral-600); --pc-color-text-disabled: var(--pc-color-neutral-400); --pc-color-text-inverse: var(--pc-color-neutral-0); --pc-color-text-link: var(--pc-color-primary); --pc-color-text-link-hover: var(--pc-color-accent); /* --- 1h. Semantic: Kenarlık --- */ --pc-color-border-default: var(--pc-color-neutral-200); --pc-color-border-strong: var(--pc-color-neutral-400); --pc-color-border-focus: var(--pc-color-accent); /* --- 1i. Semantic: Durum (feedback) renkleri — bg/text/border üçlüsü --- */ --pc-color-success-bg: var(--pc-color-emerald-50); --pc-color-success-text: var(--pc-color-emerald-600); --pc-color-success-border: #bfe0c8; --pc-color-danger-bg: var(--pc-color-red-50); --pc-color-danger-text: var(--pc-color-red-600); --pc-color-danger-border: var(--pc-color-red-300); --pc-color-warning-bg: var(--pc-color-amber-50); --pc-color-warning-text: var(--pc-color-amber-700); --pc-color-info-bg: var(--pc-color-blue-50); --pc-color-info-text: var(--pc-color-blue-700); /* Sipariş durumu gibi çok-değerli (>4) sayısal olmayan setler için ek roller */ --pc-color-status-preparing-bg: var(--pc-color-violet-50); --pc-color-status-preparing-text: var(--pc-color-violet-700); --pc-color-status-transit-bg: var(--pc-color-orange-50); --pc-color-status-transit-text: var(--pc-color-orange-700); /* ===================================================================== 2. TYPOGRAPHY TOKENS (ham değerler — kompoze seviyeler typography.css'te) ===================================================================== */ --pc-font-family-heading: 'Playfair Display', Georgia, serif; --pc-font-family-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --pc-font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace; /* Font-size skalası — 1.25 (major third) oranına yakın, elle ayarlanmış */ --pc-font-size-2xs: 0.75rem; /* 12px */ --pc-font-size-xs: 0.8125rem; /* 13px */ --pc-font-size-sm: 0.875rem; /* 14px */ --pc-font-size-md: 1rem; /* 16px — body taban */ --pc-font-size-lg: 1.125rem; /* 18px */ --pc-font-size-xl: 1.25rem; /* 20px */ --pc-font-size-2xl: 1.5rem; /* 24px */ --pc-font-size-3xl: 1.875rem; /* 30px */ --pc-font-size-4xl: 2.25rem; /* 36px */ --pc-font-size-5xl: 2.75rem; /* 44px */ --pc-font-size-6xl: 3.5rem; /* 56px */ --pc-font-weight-regular: 400; --pc-font-weight-medium: 500; --pc-font-weight-semibold: 600; --pc-font-weight-bold: 700; --pc-line-height-tight: 1.15; /* display/başlıklar */ --pc-line-height-snug: 1.25; /* h2-h5 */ --pc-line-height-normal: 1.5; /* body */ --pc-line-height-loose: 1.6; /* uzun paragraf metni */ --pc-letter-spacing-tight: -0.02em; /* büyük display başlıklar */ --pc-letter-spacing-normal: 0; --pc-letter-spacing-wide: 0.02em; /* buton/label */ --pc-letter-spacing-wider: 0.03em; /* tablo başlığı */ --pc-letter-spacing-widest: 0.08em; /* overline */ /* ===================================================================== 3. SPACING TOKENS ===================================================================== 4px taban birim üzerine kurulu doğrusal skala. Mevcut --space-1..6 ile birebir aynı değerler + daha ince ihtiyaçlar için 0/px/0.5 eklendi. ===================================================================== */ --pc-space-0: 0px; --pc-space-px: 1px; --pc-space-0-5: 2px; --pc-space-1: 4px; --pc-space-2: 8px; --pc-space-3: 16px; --pc-space-4: 24px; --pc-space-5: 40px; --pc-space-6: 64px; --pc-space-7: 96px; --pc-space-8: 128px; /* ===================================================================== 4. RADIUS TOKENS ===================================================================== */ --pc-radius-none: 0px; --pc-radius-sm: 6px; /* mevcut --radius-sm — buton, input, küçük kart */ --pc-radius-md: 12px; /* mevcut --radius-md — kart, panel */ --pc-radius-lg: 20px; /* mevcut --radius-lg — hero görsel, login kart */ --pc-radius-xl: 28px; /* büyük yüzeyler için (gelecek kullanım) */ --pc-radius-full: 999px; /* rozet, pill, avatar */ /* ===================================================================== 5. SHADOW TOKENS (ham gölge değerleri — Elevation sistemi bunlara referans verir) ===================================================================== */ --pc-shadow-color: 38, 35, 34; /* --pc-color-neutral-900'ün rgb bileşenleri */ --pc-shadow-none: none; --pc-shadow-xs: 0 1px 2px rgba(var(--pc-shadow-color), 0.06); --pc-shadow-sm: 0 1px 3px rgba(var(--pc-shadow-color), 0.08); /* mevcut --shadow-sm */ --pc-shadow-md: 0 8px 24px rgba(var(--pc-shadow-color), 0.10); /* mevcut --shadow-md */ --pc-shadow-lg: 0 16px 40px rgba(var(--pc-shadow-color), 0.14); --pc-shadow-xl: 0 24px 56px rgba(var(--pc-shadow-color), 0.18); /* ===================================================================== 6. ELEVATION TOKENS ===================================================================== Shadow token'larına + (gerekirse) z-index'e referans veren, KULLANIM AMACINA göre isimlendirilmiş semantic seviyeler. Component kodu shadow token'ı değil, elevation seviyesini kullanmalı (bkz. docs/DESIGN_SYSTEM.md "Elevation System" bölümü — her seviyenin ne zaman kullanılacağı yazılı). ===================================================================== */ --pc-elevation-0: var(--pc-shadow-none); /* düz/inline öğeler, aktif olmayan durum */ --pc-elevation-1: var(--pc-shadow-xs); /* dinlenme halindeki kart/input */ --pc-elevation-2: var(--pc-shadow-sm); /* hafif ayrışan yüzey (sticky header) */ --pc-elevation-3: var(--pc-shadow-md); /* hover'daki kart, açık dropdown */ --pc-elevation-4: var(--pc-shadow-lg); /* modal/dialog, popover */ --pc-elevation-5: var(--pc-shadow-xl); /* toast, en yüksek öncelikli overlay */ /* ===================================================================== 7. MOTION TOKENS (ham süre/easing değerleri — kurallar docs'ta "Motion Language") ===================================================================== */ --pc-motion-duration-instant: 100ms; --pc-motion-duration-fast: 150ms; /* mevcut buton/kart hover süresiyle birebir */ --pc-motion-duration-base: 200ms; --pc-motion-duration-slow: 300ms; --pc-motion-duration-slower: 450ms; --pc-motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1); /* genel amaçlı, dengeli */ --pc-motion-easing-decelerate: cubic-bezier(0, 0, 0.2, 1); /* ekrana giren öğeler */ --pc-motion-easing-accelerate: cubic-bezier(0.4, 0, 1, 1); /* ekrandan çıkan öğeler */ --pc-motion-easing-linear: linear; /* loading/spinner */ /* Mevcut hover geçişleri tam olarak "ease" kullanıyordu; birebir görsel eşleşme için ayrı bir legacy-uyumlu token: */ --pc-motion-easing-legacy: ease; /* ===================================================================== 8. OPACITY TOKENS ===================================================================== */ --pc-opacity-0: 0; --pc-opacity-disabled: 0.5; --pc-opacity-muted: 0.7; --pc-opacity-hover-overlay: 0.08; --pc-opacity-press-overlay: 0.16; --pc-opacity-full: 1; /* ===================================================================== 9. Z-INDEX TOKENS ===================================================================== Mevcut kodda tek bir z-index kullanımı var (.site-header: 50) — bu değeri koruyarak tokenize edildi. Diğer seviyeler, henüz var olmayan ama gelecekte eklenecek component'ler (dropdown/modal/toast) için şimdiden ayrılmış bir ölçek sağlar; çakışma riskini baştan önler. ===================================================================== */ --pc-z-base: 0; --pc-z-raised: 10; --pc-z-sticky: 50; /* mevcut .site-header z-index ile birebir */ --pc-z-dropdown: 400; --pc-z-overlay: 900; --pc-z-modal: 1000; --pc-z-toast: 1100; --pc-z-tooltip: 1200; /* ===================================================================== 10. CONTAINER TOKENS ===================================================================== */ --pc-container-max-width: 1200px; /* mevcut --container-width ile birebir */ --pc-container-padding-desktop: var(--pc-space-4); /* 24px */ --pc-container-padding-mobile: var(--pc-space-3); /* 16px, ≤480px'te */ /* ===================================================================== 11. GRID TOKENS ===================================================================== Ürün/kategori grid'lerinin breakpoint başına kolon sayısı — mevcut theme.css @media kurallarındaki değerlerle birebir aynı, artık adlandırılmış token olarak referans alınabilir. ===================================================================== */ --pc-grid-columns-desktop: 4; /* ≥1025px */ --pc-grid-columns-laptop: 3; /* 769–1024px */ --pc-grid-columns-tablet: 2; /* 481–768px */ --pc-grid-columns-mobile: 2; /* ≤480px */ --pc-grid-gap-default: var(--pc-space-4); --pc-grid-gap-tight: var(--pc-space-2); /* ===================================================================== 12. BREAKPOINT TOKENS ===================================================================== ÖNEMLİ: CSS custom property'ler @media koşulları içinde kullanılamaz (CSS Custom Properties spesifikasyonunun bilinen bir kısıtı). Bu token'lar dokümantasyon/JS-tarafı referans amaçlıdır; @media kuralları bu DEĞERLERLE birebir aynı piksel sayılarını elle yazmaya devam eder (mevcut theme.css @media kuralları zaten bu değerlerle uyumludur — bkz. docs/DESIGN_SYSTEM.md). ===================================================================== */ --pc-breakpoint-sm: 480px; --pc-breakpoint-md: 768px; --pc-breakpoint-lg: 1024px; --pc-breakpoint-xl: 1280px; /* ===================================================================== 13. BORDER TOKENS (kalınlık/stil — renk için bkz. Color Tokens §1h) ===================================================================== */ --pc-border-width-hairline: 1px; /* mevcut kart/input/tablo kenarlıkları */ --pc-border-width-medium: 2px; --pc-border-width-thick: 3px; /* mevcut :focus-visible outline ile birebir */ --pc-border-style-default: solid; --pc-border-style-decorative: dashed; /* mevcut .hero-visual placeholder kenarlığı */ /* ===================================================================== 14. TRANSITION TOKENS (motion token'larını CSS `transition` kısayoluna kompoze eder) ===================================================================== */ --pc-transition-fast: var(--pc-motion-duration-fast) var(--pc-motion-easing-legacy); --pc-transition-base: var(--pc-motion-duration-base) var(--pc-motion-easing-standard); --pc-transition-slow: var(--pc-motion-duration-slow) var(--pc-motion-easing-standard); --pc-transition-enter: var(--pc-motion-duration-base) var(--pc-motion-easing-decelerate); --pc-transition-exit: var(--pc-motion-duration-fast) var(--pc-motion-easing-accelerate); /* ========================================================================= 15. SEMANTIC LAYER — Surface / Text / Border / Interactive / Feedback / Focus / Overlay / Disabled / Brand ========================================================================= Bu blok TAMAMEN EKLEMELİDİR (additive) — hiçbir mevcut token/değer değiştirilmedi, hiçbir component/view şu an bu isimleri kullanmıyor, dolayısıyla bu blok sitenin görünümünü SIFIR etkiler. Amaç: gelecekteki component'lerin (ve platformların — mobil/tablet/admin/kampanya) rol bazlı, anlamsal bir kelime dağarcığı kullanmasıdır. §1'deki renk primitive/semantic katmanının üzerine kurulu ÜÇÜNCÜ bir soyutlama seviyesidir: "hangi rol, hangi UI YÜZEYİNDE/DURUMUNDA kullanılır" sorusuna cevap verir (§1 sadece "hangi renk" sorusuna cevap veriyordu). Kullanım tercihi sırası (yeni kod için): SEMANTIC (bu blok) > renk-semantic (§1e-1i) > primitive (§1a-1d). Component kodu asla doğrudan primitive'e referans vermemeli. ========================================================================= */ /* --- 15a. Surface — "bu yüzey nerede oturuyor?" --- */ --pc-surface-primary: var(--pc-color-bg-canvas); /* sayfa zemini — en alt katman */ --pc-surface-secondary: var(--pc-color-bg-surface); /* kart/panel zemini — zeminden 1 kademe ayrışır */ --pc-surface-tertiary: var(--pc-color-bg-surface-muted); /* iç içe/alt bölge (tablo başlığı, kod bloğu) */ --pc-surface-elevated: var(--pc-color-bg-surface); /* secondary ile aynı renk, elevation-2/3 ile eşleştirilir (kart) */ --pc-surface-floating: var(--pc-color-bg-surface); /* secondary ile aynı renk, elevation-4 ile eşleştirilir (modal/popover, henüz component yok) */ --pc-surface-overlay: rgba(var(--pc-shadow-color), 0.5); /* modal/drawer arkası scrim — henüz component yok */ --pc-surface-brand: var(--pc-color-primary); /* marka renginde dolgulu yüzey (hero, CTA banner) */ /* --- 15b. Text — "bu metnin vurgu seviyesi ne?" --- */ --pc-text-primary: var(--pc-color-text-primary); /* başlık, ana gövde metni — en yüksek vurgu */ --pc-text-secondary: var(--pc-color-text-secondary); /* destekleyici metin, açıklama */ --pc-text-tertiary: var(--pc-color-neutral-500); /* en düşük vurgulu metin — SADECE büyük punto/UI etiketinde (≥18px veya bold ≥14px) kullanılabilir, kontrast oranı 3.57:1'dir (küçük gövde metni için AA'yı GEÇMEZ — bkz. docs/design-system/ACCESSIBILITY_LEVEL_2.md) */ --pc-text-disabled: var(--pc-color-text-disabled); /* pasif/devre dışı öğe metni */ --pc-text-inverse: var(--pc-color-text-inverse); /* koyu zemin üzerindeki metin (footer, admin sidebar, hero) */ --pc-text-success: var(--pc-color-success-text); --pc-text-warning: var(--pc-color-warning-text); --pc-text-danger: var(--pc-color-danger-text); /* --- 15c. Border — "bu kenarlığın gücü ne?" --- */ --pc-border-subtle: var(--pc-color-neutral-100); /* neredeyse görünmez ayraç — kart iç bölme çizgisi */ --pc-border-default: var(--pc-color-border-default); /* standart kart/input kenarlığı */ --pc-border-strong: var(--pc-color-border-strong); /* vurgulu kenarlık — seçili/aktif durum çerçevesi */ --pc-border-focus: var(--pc-color-border-focus); /* klavye focus halkası rengi */ /* --- 15d. Interactive — "bu tıklanabilir öğenin durumu ne?" --- Not: interactive-hover/pressed KESİN bir renk DEĞİL, mevcut rengin üzerine bindirilen bir KARARTMA KATMANIDIR (overlay tekniği) — böylece primary/accent/outline gibi farklı temel renkler üzerinde tutarlı, tahmin edilebilir bir "koyulaşma" hissi verir. Uygulama şekli: `background-image: linear-gradient(rgba(...), rgba(...))` veya bir ::after pseudo-element ile taban rengin üstüne bindirilir. */ --pc-interactive-primary: var(--pc-color-primary); --pc-interactive-secondary: var(--pc-color-neutral-700); /* outline/ghost buton metni-kenarlığı */ --pc-interactive-hover: rgba(var(--pc-shadow-color), var(--pc-opacity-hover-overlay)); /* taban rengin üstüne %8 karartma */ --pc-interactive-pressed: rgba(var(--pc-shadow-color), var(--pc-opacity-press-overlay)); /* taban rengin üstüne %16 karartma */ --pc-interactive-disabled: var(--pc-color-neutral-300); /* devre dışı buton zemini */ /* --- 15e. Feedback — durum geri bildirimi (renk üçlüsü zaten §1i'de var, burada tekil-isim kısayolu) --- */ --pc-feedback-success: var(--pc-color-success-text); --pc-feedback-warning: var(--pc-color-warning-text); --pc-feedback-danger: var(--pc-color-danger-text); --pc-feedback-info: var(--pc-color-info-text); /* --- 15f. Focus --- */ --pc-focus-ring: var(--pc-color-border-focus); /* halka rengi */ --pc-focus-outline: var(--pc-border-width-thick) solid var(--pc-color-border-focus); /* hazır outline kısayolu */ /* --- 15g. Overlay (Surface-overlay'den ayrı: her ikisi de "üst katman" ama farklı yoğunlukta) --- */ --pc-overlay-scrim: rgba(var(--pc-shadow-color), 0.5); /* modal/drawer arkası — içeriği tamamen bastırır */ --pc-overlay-subtle: rgba(var(--pc-shadow-color), var(--pc-opacity-press-overlay)); /* görsel üstü hover kararması (ör. ürün galerisi büyütme ikonu zemini) */ /* --- 15h. Disabled (tek bir renk değil, 3 parçalı bir "devre dışı" kompozisyonu) --- */ --pc-disabled-opacity: var(--pc-opacity-disabled); /* 0.5 — ikon/görsel içerikte kullanılır */ --pc-disabled-bg: var(--pc-color-neutral-100); --pc-disabled-text: var(--pc-color-text-disabled); --pc-disabled-border: var(--pc-color-neutral-200); /* --- 15i. Brand --- */ --pc-brand-primary: var(--pc-color-primary); --pc-brand-accent: var(--pc-color-accent); --pc-brand-gradient-hero: linear-gradient(135deg, var(--pc-color-primary) 0%, var(--pc-color-primary-hover) 100%); /* mevcut .hero background'ıyla birebir */ }