/* ============================================================================ giderlerim — Design Tokens Django ERP/SaaS app için marketing site'tan adapte edilmiş tasarım sistemi. YÜKLEMESİ: tailadmin.css'ten HEMEN SONRA yüklenmeli. base.html ve base_auth.html içinde sırasıyla. DARK MODE: ile aktive edilir (TailAdmin convention). Tokens.css ayrıca [data-theme="dark"] selector'ünü de destekler ki marketing site'tan port edilen pattern'ler de çalışsın. YAPI: Katman A — TailAdmin token override (mevcut template'ler için) Katman B — Marketing site semantic tokens (yeni component'ler için) Theme transition Semantic type classes Base typography GEÇİCİLİK: Katman A geçicidir. Faz 5'te TailAdmin tamamen kaldırılınca silinir. Katman B kalıcıdır — uzun vadeli token sistemi. ============================================================================ */ /* ============================================================================ KATMAN A — TailAdmin token override TailAdmin'in input.css @theme bloğundaki token isimlerini, marketing site'ın semantic değerleriyle yeniden tanımlar. Bu sayede mevcut template'lerdeki bg-brand-500, text-error-500, shadow-theme-md gibi utility'ler otomatik olarak yeni renkler/değerler alır. ZERO template değişikliği. NOT: Bu liste TailAdmin'in en yaygın kullanılan token'larını kapsar. input.css'in tam listesi (satır 48-193) paylaşılınca genişletilecek. ============================================================================ */ :root { /* --- Brand (TailAdmin: brand-500 = #465fff) → sıcak-kırık violet accent (Faz 4 T-D) --- */ --color-brand-25: #FAF6FE; --color-brand-50: #F4ECFD; --color-brand-100: #E9D8FB; --color-brand-200: #D4B4F6; --color-brand-300: #BE8FF0; --color-brand-400: #A268E6; --color-brand-500: #8540D9; /* primary — warm violet accent */ --color-brand-600: #7232BE; /* hover */ --color-brand-700: #5D2A9B; /* press */ --color-brand-800: #4A2480; --color-brand-900: #3A1D66; --color-brand-950: #25123F; /* --- Error / Success / Warning (sophisticated, not red/green clichés) --- */ --color-error-25: #FFF5F7; --color-error-50: #FFF1F2; --color-error-100: #FFE4E6; --color-error-200: #FECDD3; --color-error-300: #FDA4AF; --color-error-400: #FB7185; --color-error-500: #F43F5E; /* rose-500 — losses, debts, expenses */ --color-error-600: #E11D48; --color-error-700: #BE123C; --color-error-800: #9F1239; --color-error-900: #881337; --color-success-25: #F7FEFF; --color-success-50: #ECFEFF; --color-success-100: #CFFAFE; --color-success-200: #A5F3FC; --color-success-300: #67E8F9; --color-success-400: #22D3EE; --color-success-500: #06B6D4; /* cyan-500 — gains, assets, income */ --color-success-600: #0891B2; --color-success-700: #0E7490; --color-success-800: #155E75; --color-success-900: #164E63; --color-warning-25: #FFFCF5; --color-warning-50: #FFFBEB; --color-warning-100: #FEF3C7; --color-warning-200: #FDE68A; --color-warning-300: #FCD34D; --color-warning-400: #FBBF24; --color-warning-500: #F59E0B; /* amber-500 — alerts */ --color-warning-600: #D97706; --color-warning-700: #B45309; --color-warning-800: #92400E; --color-warning-900: #78350F; /* --- Gray → sıcak-nötr (Faz 4 T-D yol-b) --- TailAdmin'in default gray'i SOĞUK (mavi alt ton, #667085 ailesi); sıcak kırık-beyaz yüzeylerle (--bg #FAFAF7) uyumsuz → "kirli" görünüm. Burada gray skalası tek noktada sıcak-nötr'e kaydırılır (mavi alt ton azaltılır, ton/lightness korunur). Pozisyonel naming + dark dual-class (dark:bg-gray-900) korunur — :root override her iki moda da uygulanır. ⚠ 100-500 spec anchor'larından; 25/50/600-950/gray-dark TÜRETİLDİ (sıcak kaydırma aynı mantıkla) → light+dark görsel teyit gerek (özellikle dark-end + Katman B --bg #0B0B0D etkileşimi). Bkz. AŞAMA C / rapor flag. */ --color-gray-25: #FCFCFA; --color-gray-50: #F8F7F3; --color-gray-100: #F1EFE8; /* spec anchor */ --color-gray-200: #E8E6DF; /* spec anchor */ --color-gray-300: #D3D1C7; /* spec anchor */ --color-gray-400: #9C9A92; /* spec anchor */ --color-gray-500: #6B6A66; /* spec anchor */ --color-gray-600: #4C4B45; /* TÜRETİLDİ */ --color-gray-700: #3A3833; /* TÜRETİLDİ */ --color-gray-800: #242220; /* TÜRETİLDİ — dark yüzey, hafif sıcak */ --color-gray-900: #161512; /* TÜRETİLDİ — dark yüzey, hafif sıcak */ --color-gray-950: #100F0C; /* TÜRETİLDİ */ --color-gray-dark: #1F1D19; /* TÜRETİLDİ */ /* --- TailAdmin themed shadows (barely-there, just enough depth) --- */ --shadow-theme-xs: 0 1px 2px rgba(15, 15, 20, 0.04); --shadow-theme-sm: 0 1px 2px rgba(15, 15, 20, 0.04), 0 1px 3px rgba(15, 15, 20, 0.06); --shadow-theme-md: 0 2px 4px rgba(15, 15, 20, 0.04), 0 4px 12px rgba(15, 15, 20, 0.06); --shadow-theme-lg: 0 4px 8px rgba(15, 15, 20, 0.04), 0 12px 32px rgba(15, 15, 20, 0.08); --shadow-theme-xl: 0 8px 16px rgba(15, 15, 20, 0.06), 0 24px 48px rgba(15, 15, 20, 0.10); /* TODO (input.css gelince): --text-title-*, --text-theme-*, varsa --color-blue-light-*, --color-orange-*, --color-success-*, ek shadow'lar */ } .dark { /* TailAdmin brand — dark mode'da lifted violet (300-700 partial, mevcut desen korundu; brand-500 = --accent dark #9D6BF5; 300 en açık → 700 en koyu, non-inverted) */ --color-brand-300: #C4A5F7; --color-brand-400: #B08AF8; --color-brand-500: #9D6BF5; /* primary (lifted) */ --color-brand-600: #8540D9; --color-brand-700: #7232BE; /* Semantic — dark mode'da kontrastlı tonlar */ --color-error-400: #FDA4AF; --color-error-500: #FB7185; /* rose-400 (lifted) */ --color-error-600: #F43F5E; --color-success-400: #67E8F9; --color-success-500: #22D3EE; /* cyan-400 (lifted) */ --color-success-600: #06B6D4; --color-warning-400: #FCD34D; --color-warning-500: #FBBF24; /* amber-400 (lifted) */ --color-warning-600: #F59E0B; /* --- Gray → SOĞUK-NÖTR (Faz 4 T-D, karar-b) --- Light gray sıcak (krem --bg ile uyumlu, :root'ta); dark mode'da gri tablo/kenar/yüzeyler Katman B dark sistemiyle (--bg #0B0B0D, --bg-elevated #15151A, --bg-sunken #0F0F12, --border #1F1F23, --border-strong #2A2A30, fg #FAFAF7/#C4C4C9/#8A8A92/#5A5A63) BİREBİR hizalanır. Pozisyonel (25 en açık → 950 en koyu) + dual-class korunur: text→fg, border→border, bg→surface. */ --color-gray-25: #FAFAFA; --color-gray-50: #EDEDEF; --color-gray-100: #D9D9DD; --color-gray-200: #C4C4C9; /* = fg2 (secondary text) */ --color-gray-300: #A0A0A8; --color-gray-400: #8A8A92; /* = fg3 (tertiary text) */ --color-gray-500: #6E6E77; --color-gray-600: #5A5A63; /* = fg4 (placeholder/disabled) */ --color-gray-700: #2A2A30; /* = border-strong */ --color-gray-800: #1F1F23; /* = border / card edge */ --color-gray-900: #15151A; /* = bg-elevated (kart) */ --color-gray-950: #0B0B0D; /* = bg (sayfa) */ --color-gray-dark: #15151A; /* Shadows — dark mode'da derin */ --shadow-theme-xs: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-theme-sm: 0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.40); --shadow-theme-md: 0 2px 4px rgba(0, 0, 0, 0.30), 0 4px 16px rgba(0, 0, 0, 0.50); --shadow-theme-lg: 0 4px 8px rgba(0, 0, 0, 0.40), 0 16px 40px rgba(0, 0, 0, 0.55); --shadow-theme-xl: 0 12px 24px rgba(0, 0, 0, 0.50), 0 24px 60px rgba(0, 0, 0, 0.65); } /* ============================================================================ KATMAN B — Marketing site semantic tokens Yeni component'lerin ve refactor edilen template'lerin kullanacağı semantic token sistemi. Marketing site'taki colors_and_type.css ile tam uyumlu — sadece sentaks farkı: [data-theme="dark"] yerine .dark. AYRICA: Django app'e özel ek token'lar (sidebar widths, topbar height, form metrics, avatar palette) sonda. ============================================================================ */ :root { color-scheme: light; /* --- SURFACES --- */ --bg: #FAFAF7; /* page — warm off-white, never pure white */ --bg-elevated: #FFFFFF; /* cards, modals, popovers */ --bg-sunken: #F4F4EF; /* table rows hover, code blocks */ --bg-overlay: rgba(10, 10, 10, 0.40); /* modal scrim */ /* --- FOREGROUNDS (cool-leaning neutrals) --- */ --fg1: #0A0A0A; /* primary text, headings */ --fg2: #3F3F46; /* secondary text */ --fg3: #71717A; /* tertiary, captions, helper text */ --fg4: #A1A1AA; /* placeholder, disabled */ --fg-on-accent: #FFFFFF; /* --- BORDERS --- */ --border: #E8E8E3; /* default 1px hairline */ --border-strong: #D4D4D0; /* hover / focused field */ --border-subtle: #EFEFEA; /* internal table rows */ /* --- ACCENT (sıcak-kırık violet, Faz 4 T-D — #8540D9 üstünde beyaz kontrast ~5:1, AA) --- */ --accent: #8540D9; /* warm violet — primary CTA, links */ --accent-hover: #7232BE; --accent-press: #5D2A9B; --accent-soft: #F4ECFD; /* tinted bg for selections, badges */ --accent-ring: rgba(133, 64, 217, 0.35); /* --- SEMANTIC FINANSAL (gain / loss / warning) --- */ --pos: #06B6D4; /* cyan-500 — gains, assets, income */ --pos-soft: #ECFEFF; --neg: #F43F5E; /* rose-500 — losses, debts, expenses */ --neg-soft: #FFF1F2; --warn: #F59E0B; /* amber-500 — alerts */ --warn-soft: #FFFBEB; /* --- CHART PALETTE (5 hues + neutral, no red/green clichés) --- Bu palet aynı zamanda kategori rengi olarak da kullanılır. Category modelinin chart_token alanı 1-6 değerini bu listeye map eder. */ --chart-1: #8540D9; /* violet — marka serisi (accent) */ --chart-2: #0E7FE0; /* mavi — violet'ten net ayrı */ --chart-3: #06B6D4; /* cyan/teal */ --chart-4: #F59E0B; /* amber */ --chart-5: #EC4899; /* pembe — kırmızıdan ayrı */ --chart-6: #64748B; /* slate (nötr seri) */ /* --- AVATAR PALETTE (8 hues — kullanıcı/üye/kişi initials için) --- Borç-alacak'taki kişiler, Aile üyeleri, Hesaplar'daki banka kısaltmaları. Backend tarafında initials'tan deterministic hash ile bir avatar-N seçilir. */ --avatar-1: #818CF8; /* indigo */ --avatar-2: #A78BFA; /* violet */ --avatar-3: #22D3EE; /* cyan */ --avatar-4: #FB923C; /* orange */ --avatar-5: #F472B6; /* pink */ --avatar-6: #4ADE80; /* green (sadece avatar için — chart'ta yok) */ --avatar-7: #FBBF24; /* amber */ --avatar-8: #94A3B8; /* slate */ /* --- SHADOWS (barely-there, used only for depth) --- */ --shadow-xs: 0 1px 2px rgba(15, 15, 20, 0.04); --shadow-sm: 0 1px 2px rgba(15, 15, 20, 0.04), 0 1px 3px rgba(15, 15, 20, 0.06); --shadow-md: 0 2px 4px rgba(15, 15, 20, 0.04), 0 4px 12px rgba(15, 15, 20, 0.06); --shadow-lg: 0 4px 8px rgba(15, 15, 20, 0.04), 0 12px 32px rgba(15, 15, 20, 0.08); --shadow-focus: 0 0 0 3px var(--accent-ring); /* --- RADII (gently rounded, never pill-shaped) --- */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; /* fields, buttons */ --radius-lg: 10px; /* cards (default) */ --radius-xl: 12px; /* large surfaces */ --radius-2xl: 16px; /* hero, modals */ --radius-pill: 999px; /* badges only */ /* --- SPACING SCALE (4px base) --- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* --- MOTION (calm, never bouncy) --- */ --ease: cubic-bezier(0.32, 0.72, 0, 1); /* Linear-ish ease-out */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 280ms; /* --- TYPOGRAPHY --- */ --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace; /* Tabular numerics — CRITICAL for finance UI */ --num-features: "tnum" 1, "lnum" 1, "ss01" 1, "cv11" 1; /* --- TYPE SCALE --- */ --text-xs: 11px; --lh-xs: 16px; --text-sm: 13px; --lh-sm: 20px; --text-base: 14px; --lh-base: 22px; --text-md: 15px; --lh-md: 24px; --text-lg: 17px; --lh-lg: 26px; --text-xl: 20px; --lh-xl: 28px; --text-2xl: 24px; --lh-2xl: 32px; --text-3xl: 30px; --lh-3xl: 38px; --text-4xl: 38px; --lh-4xl: 46px; --text-5xl: 48px; --lh-5xl: 56px; --text-6xl: 64px; --lh-6xl: 72px; /* --- TRACKING --- */ --track-tight: -0.02em; /* large display headings */ --track-snug: -0.01em; /* h1–h3 */ --track-base: 0em; /* body */ --track-wide: 0.04em; /* eyebrows, labels */ --track-caps: 0.08em; /* uppercase eyebrows */ /* --- NAV SURFACE (sticky header için, marketing site ile aynı) --- */ --nav-bg: rgba(250, 250, 247, 0.78); /* ========================================================================== DJANGO APP'E ÖZEL EKLEMELER Marketing site'ta olmayan, app layout'una özgü metrics ========================================================================== */ /* --- SIDEBAR --- */ --sidebar-width: 240px; /* expanded */ --sidebar-width-collapsed: 64px; /* icon-only collapsed mode */ --sidebar-item-padding-y: 7px; --sidebar-item-padding-x: 9px; --sidebar-group-gap: 16px; /* --- TOP BAR (page header) --- */ --topbar-height: 56px; /* --- FORM METRICS --- */ --input-height: 36px; /* sm */ --input-height-md: 40px; /* default */ --input-height-lg: 44px; --input-padding-x: 12px; --input-padding-y: 8px; --label-gap: 6px; /* label-input arası boşluk */ /* --- SLIDEOVER (Faz 2'nin ilk component'i) --- */ --slideover-width: 480px; --slideover-width-lg: 640px; --slideover-padding: 24px; } .dark, [data-theme="dark"] { color-scheme: dark; /* --- SURFACES --- */ --bg: #0B0B0D; --bg-elevated: #15151A; --bg-sunken: #0F0F12; --bg-overlay: rgba(0, 0, 0, 0.60); /* --- FOREGROUNDS --- */ --fg1: #FAFAF7; --fg2: #C4C4C9; --fg3: #8A8A92; --fg4: #5A5A63; --fg-on-accent: #FFFFFF; /* --- BORDERS --- */ --border: #1F1F23; --border-strong: #2A2A30; --border-subtle: #18181C; /* --- ACCENT (violet-400 lifted — dark mode'da bir ton açık; = brand-500 dark) --- */ --accent: #9D6BF5; --accent-hover: #B08AF8; --accent-press: #C4A5F7; --accent-soft: rgba(157, 107, 245, 0.12); --accent-ring: rgba(157, 107, 245, 0.40); /* --- SEMANTIC FINANSAL --- */ --pos: #22D3EE; --pos-soft: rgba(34, 211, 238, 0.12); --neg: #FB7185; --neg-soft: rgba(251, 113, 133, 0.12); --warn: #FBBF24; --warn-soft: rgba(251, 191, 36, 0.10); /* --- CHART PALETTE (dark mode'da lifted, renk-körü dostu) --- */ --chart-1: #A87BEC; /* violet */ --chart-2: #4BA3F0; /* mavi */ --chart-3: #22D3EE; /* cyan */ --chart-4: #FBBF24; /* amber */ --chart-5: #F472B6; /* pembe */ --chart-6: #94A3B8; /* slate */ /* --- AVATAR PALETTE (dark mode'da hafif lifted) --- */ --avatar-1: #A5B0FF; --avatar-2: #C4B5FD; --avatar-3: #67E8F9; --avatar-4: #FDBA74; --avatar-5: #F9A8D4; --avatar-6: #86EFAC; --avatar-7: #FCD34D; --avatar-8: #CBD5E1; /* --- SHADOWS (dark mode'da daha derin) --- */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.40); --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.30), 0 4px 16px rgba(0, 0, 0, 0.50); --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.40), 0 16px 40px rgba(0, 0, 0, 0.55); /* --- NAV SURFACE --- */ --nav-bg: rgba(11, 11, 13, 0.78); } /* ============================================================================ THEME TRANSITION Sadece explicit toggle sırasında smooth geçiş; initial paint animasyonsuz (theme.js .theme-transitioning class'ını 320ms eklenir-kaldırır). ============================================================================ */ html.theme-transitioning, html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition: background-color 260ms cubic-bezier(0.32, 0.72, 0, 1), border-color 260ms cubic-bezier(0.32, 0.72, 0, 1), color 260ms cubic-bezier(0.32, 0.72, 0, 1), fill 260ms cubic-bezier(0.32, 0.72, 0, 1), stroke 260ms cubic-bezier(0.32, 0.72, 0, 1), box-shadow 260ms cubic-bezier(0.32, 0.72, 0, 1) !important; transition-delay: 0s !important; } /* ============================================================================ SEMANTIC TYPE CLASSES Marketing site'taki tutarlı tipografi class'ları. Yeni template'lerde

şeklinde kullanılır; TailAdmin'in default heading stillerini override eder. ============================================================================ */ .t-display { font-size: var(--text-6xl); line-height: var(--lh-6xl); font-weight: 600; letter-spacing: var(--track-tight); color: var(--fg1); } .t-h1 { font-size: var(--text-4xl); line-height: var(--lh-4xl); font-weight: 600; letter-spacing: var(--track-snug); color: var(--fg1); } .t-h2 { font-size: var(--text-3xl); line-height: var(--lh-3xl); font-weight: 600; letter-spacing: var(--track-snug); color: var(--fg1); } .t-h3 { font-size: var(--text-2xl); line-height: var(--lh-2xl); font-weight: 600; letter-spacing: var(--track-snug); color: var(--fg1); } .t-h4 { font-size: var(--text-xl); line-height: var(--lh-xl); font-weight: 600; letter-spacing: var(--track-snug); color: var(--fg1); } .t-h5 { font-size: var(--text-lg); line-height: var(--lh-lg); font-weight: 600; letter-spacing: 0; color: var(--fg1); } .t-body { font-size: var(--text-base); line-height: var(--lh-base); font-weight: 400; color: var(--fg1); } .t-body-md { font-size: var(--text-md); line-height: var(--lh-md); font-weight: 400; color: var(--fg1); } .t-small { font-size: var(--text-sm); line-height: var(--lh-sm); font-weight: 400; color: var(--fg2); } .t-caption { font-size: var(--text-xs); line-height: var(--lh-xs); font-weight: 500; color: var(--fg3); } .t-eyebrow { font-size: var(--text-xs); line-height: var(--lh-xs); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--fg3); } .t-mono { font-family: var(--font-mono); } /* ============================================================================ NUMERIC UTILITY — finansal sayılar için zorunlu Her tutar gösteren element'e bu class'ı ekle: 138.150,00 ₺ Tabular figures sayısal hizalama sağlar (KPI'lar, tablo kolonları, vb.) ============================================================================ */ .num { font-feature-settings: "tnum" 1, "lnum" 1, "zero" 1; font-variant-numeric: tabular-nums lining-nums slashed-zero; } /* ============================================================================ BASE TYPOGRAPHY OVERRIDE Inter font'u body seviyesinde, tabular numerics smoothing aktif. TailAdmin'in default body font'unu override eder. ============================================================================ */ html, body { font-family: var(--font-sans); font-feature-settings: var(--num-features); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }