/* ═══════════════════════════════════════════════════════════════════ MILAGRON UI - TASARIM TOKENLARI ─────────────────────────────────────────────────────────────────── Panelin tüm renk, yarıçap, gölge ve tipografi değerleri burada tanımlanır. Diğer tema dosyaları sabit renk kullanmaz, yalnızca buradaki değişkenleri okur. Karanlık tema de bu yüzden tek blokla çalışır: değişkenlerin değeri değişir, kurallar aynı kalır. Kullanım: veya data-theme yoksa sistem tercihi (prefers-color-scheme) dikkate alınır. ═══════════════════════════════════════════════════════════════════ */ :root { color-scheme: light; /* ── Nötr basamak ───────────────────────────────────────────── Hafif soğuk gri. Panelin zemini, kenarlıkları ve metin renkleri bu basamaktan türetilir. */ --mg-neutral-0: #ffffff; --mg-neutral-25: #fcfcfd; --mg-neutral-50: #f7f8fa; --mg-neutral-100: #f0f2f5; --mg-neutral-200: #e4e7ec; --mg-neutral-300: #d0d5dd; --mg-neutral-400: #98a2b3; --mg-neutral-500: #667085; --mg-neutral-600: #475467; --mg-neutral-700: #344054; --mg-neutral-800: #1d2939; --mg-neutral-900: #101828; /* ── Birincil eylem ─────────────────────────────────────────── Panelin mevcut kimliği koyu butonlara dayanıyor (uptown #202020). Ton korunuyor, sadece daha temiz bir siyaha çekiliyor. */ --mg-primary: #1a1d23; --mg-primary-hover: #2b2f38; --mg-primary-active: #0f1116; --mg-primary-fg: #ffffff; /* ── Vurgu (bağlantı, odak, seçili durum) ─────────────────── */ --mg-accent-50: #eff6ff; --mg-accent-100: #dbeafe; --mg-accent-200: #bfdbfe; --mg-accent-500: #2563eb; --mg-accent-600: #1d4ed8; --mg-accent-700: #1e40af; --mg-accent: var(--mg-accent-500); --mg-accent-fg: #ffffff; /* ── Anlamsal renkler ───────────────────────────────────────── Her biri üçlü: yumuşak zemin / kenarlık / okunabilir metin. */ --mg-success-bg: #ecfdf3; --mg-success-border: #abefc6; --mg-success-text: #067647; --mg-success-solid: #17a34a; --mg-warning-bg: #fffaeb; --mg-warning-border: #fedf89; --mg-warning-text: #b54708; --mg-warning-solid: #f79009; --mg-danger-bg: #fef3f2; --mg-danger-border: #fecdca; --mg-danger-text: #b42318; --mg-danger-solid: #d92d20; --mg-info-bg: #eff8ff; --mg-info-border: #b2ddff; --mg-info-text: #175cd3; --mg-info-solid: #2e90fa; /* ── Yüzeyler ve metin ────────────────────────────────────── */ --mg-bg: var(--mg-neutral-50); --mg-surface: var(--mg-neutral-0); --mg-surface-2: var(--mg-neutral-25); --mg-surface-3: var(--mg-neutral-100); --mg-surface-hover: var(--mg-neutral-50); --mg-border: var(--mg-neutral-200); --mg-border-strong: var(--mg-neutral-300); --mg-border-subtle: var(--mg-neutral-100); --mg-text: var(--mg-neutral-900); --mg-text-secondary: var(--mg-neutral-700); --mg-text-muted: var(--mg-neutral-500); --mg-text-subtle: var(--mg-neutral-400); --mg-text-inverse: var(--mg-neutral-0); /* ── Yarıçap ────────────────────────────────────────────────── Panel 10px kart yarıçapına alışkın; ölçek onun etrafında. */ --mg-radius-xs: 4px; --mg-radius-sm: 6px; --mg-radius-md: 8px; --mg-radius-lg: 10px; --mg-radius-xl: 14px; --mg-radius-2xl: 18px; --mg-radius-full: 9999px; /* ── Gölgeler ───────────────────────────────────────────────── Eski tema tek ağır gölge kullanıyordu. Burada kenarlık + çok yumuşak gölge birlikte çalışıyor, kartlar daha ferah. */ --mg-shadow-xs: 0 1px 2px rgba(16, 24, 40, .04); --mg-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .05); --mg-shadow-md: 0 2px 4px -2px rgba(16, 24, 40, .06), 0 4px 8px -2px rgba(16, 24, 40, .08); --mg-shadow-lg: 0 4px 6px -2px rgba(16, 24, 40, .03), 0 12px 16px -4px rgba(16, 24, 40, .08); --mg-shadow-xl: 0 8px 8px -4px rgba(16, 24, 40, .03), 0 20px 24px -4px rgba(16, 24, 40, .10); /* ── Odak halkası ───────────────────────────────────────────── Klavye erişilebilirliği için tüm etkileşimli öğelerde aynı. */ --mg-ring: 0 0 0 3px rgba(37, 99, 235, .22); --mg-ring-danger: 0 0 0 3px rgba(217, 45, 32, .20); /* ── Tipografi ──────────────────────────────────────────────── DİKKAT: html font-size %62.5 (1rem = 10px). Panelin tamamı ve sayfa içi stiller bu ölçeğe göre yazılmış, korunuyor. */ --mg-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --mg-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; --mg-text-xs: 1.1rem; --mg-text-sm: 1.2rem; --mg-text-base: 1.3rem; --mg-text-md: 1.4rem; --mg-text-lg: 1.6rem; --mg-text-xl: 1.8rem; --mg-text-2xl: 2.0rem; --mg-text-3xl: 2.4rem; /* ── Geçiş ────────────────────────────────────────────────── */ --mg-ease: cubic-bezier(.4, 0, .2, 1); --mg-transition: 150ms var(--mg-ease); /* ── Uygulama iskeleti ölçüleri ───────────────────────────── */ --mg-sidebar-w: 272px; --mg-sidebar-w-compact: 216px; --mg-topbar-h: 64px; } /* ═══════════════════════════════════════════════════════════════════ KARANLIK TEMA Yalnızca token değerleri değişir. Kural yazılmaz. ═══════════════════════════════════════════════════════════════════ */ :root[data-theme="dark"] { color-scheme: dark; --mg-neutral-0: #0e1117; --mg-neutral-25: #12161e; --mg-neutral-50: #161b24; --mg-neutral-100: #1c222d; --mg-neutral-200: #262d3a; --mg-neutral-300: #333b4a; --mg-neutral-400: #6b7688; --mg-neutral-500: #8d97a8; --mg-neutral-600: #aab3c2; --mg-neutral-700: #c6cdd8; --mg-neutral-800: #dfe4ea; --mg-neutral-900: #f0f3f7; --mg-primary: #f0f3f7; --mg-primary-hover: #ffffff; --mg-primary-active: #dfe4ea; --mg-primary-fg: #0e1117; --mg-accent-50: #17243a; --mg-accent-100: #1c3355; --mg-accent-200: #234673; --mg-accent-500: #4c8dff; --mg-accent-600: #6ea3ff; --mg-accent-700: #8fbaff; --mg-accent: var(--mg-accent-500); --mg-accent-fg: #0e1117; --mg-success-bg: #10251b; --mg-success-border: #1d4634; --mg-success-text: #5cd693; --mg-success-solid: #22a35a; --mg-warning-bg: #2a2010; --mg-warning-border: #4d3a17; --mg-warning-text: #f3b95f; --mg-warning-solid: #d98613; --mg-danger-bg: #2b1517; --mg-danger-border: #542326; --mg-danger-text: #ff8a80; --mg-danger-solid: #e5484d; --mg-info-bg: #12233a; --mg-info-border: #1f3f66; --mg-info-text: #74b3ff; --mg-info-solid: #3b8ef0; --mg-bg: #0b0e14; --mg-surface: #12161e; --mg-surface-2: #161b24; --mg-surface-3: #1c222d; --mg-surface-hover: #1c222d; --mg-shadow-xs: 0 1px 2px rgba(0, 0, 0, .40); --mg-shadow-sm: 0 1px 3px rgba(0, 0, 0, .45); --mg-shadow-md: 0 4px 10px rgba(0, 0, 0, .50); --mg-shadow-lg: 0 12px 20px rgba(0, 0, 0, .55); --mg-shadow-xl: 0 20px 32px rgba(0, 0, 0, .60); --mg-ring: 0 0 0 3px rgba(76, 141, 255, .30); --mg-ring-danger: 0 0 0 3px rgba(229, 72, 77, .30); } /* Sistem tercihi karanlıksa ve kullanıcı açık temayı elle seçmediyse karanlık palet uygulanır. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: dark; --mg-neutral-0: #0e1117; --mg-neutral-25: #12161e; --mg-neutral-50: #161b24; --mg-neutral-100: #1c222d; --mg-neutral-200: #262d3a; --mg-neutral-300: #333b4a; --mg-neutral-400: #6b7688; --mg-neutral-500: #8d97a8; --mg-neutral-600: #aab3c2; --mg-neutral-700: #c6cdd8; --mg-neutral-800: #dfe4ea; --mg-neutral-900: #f0f3f7; --mg-primary: #f0f3f7; --mg-primary-hover: #ffffff; --mg-primary-active: #dfe4ea; --mg-primary-fg: #0e1117; --mg-accent-50: #17243a; --mg-accent-100: #1c3355; --mg-accent-200: #234673; --mg-accent-500: #4c8dff; --mg-accent-600: #6ea3ff; --mg-accent-700: #8fbaff; --mg-accent-fg: #0e1117; --mg-success-bg: #10251b; --mg-success-border: #1d4634; --mg-success-text: #5cd693; --mg-success-solid: #22a35a; --mg-warning-bg: #2a2010; --mg-warning-border: #4d3a17; --mg-warning-text: #f3b95f; --mg-warning-solid: #d98613; --mg-danger-bg: #2b1517; --mg-danger-border: #542326; --mg-danger-text: #ff8a80; --mg-danger-solid: #e5484d; --mg-info-bg: #12233a; --mg-info-border: #1f3f66; --mg-info-text: #74b3ff; --mg-info-solid: #3b8ef0; --mg-bg: #0b0e14; --mg-surface: #12161e; --mg-surface-2: #161b24; --mg-surface-3: #1c222d; --mg-surface-hover: #1c222d; --mg-shadow-xs: 0 1px 2px rgba(0, 0, 0, .40); --mg-shadow-sm: 0 1px 3px rgba(0, 0, 0, .45); --mg-shadow-md: 0 4px 10px rgba(0, 0, 0, .50); --mg-shadow-lg: 0 12px 20px rgba(0, 0, 0, .55); --mg-shadow-xl: 0 20px 32px rgba(0, 0, 0, .60); --mg-ring: 0 0 0 3px rgba(76, 141, 255, .30); --mg-ring-danger: 0 0 0 3px rgba(229, 72, 77, .30); } }