/* * AsterConf Design Tokens v1 * ─────────────────────────────────────────────────────────────────────── * Single source of truth for colors, typography, spacing, radius, shadows. * Every new component reads from these — no hardcoded values in *.html. * * Approach: Stripe/Linear-inspired corporate look — clean, big typography, * generous white space. Brand stays orange (#F97316), but used as accent * rather than primary surface color. * * Light/dark dual mode via `[data-theme="dark"]` on . Default = light. * Page templates that prefer dark (existing admin panel) set the attribute. * * Migration: * Old `var(--bg-card)` → still works (backward compat block below) * New code uses `var(--surface-1)` etc. directly */ :root, :root[data-theme="light"] { /* ───── Color palette: base ───── */ --color-white: #ffffff; --color-black: #06080f; --color-gray-50: #f8fafc; --color-gray-100: #f1f5f9; --color-gray-200: #e2e8f0; --color-gray-300: #cbd5e1; --color-gray-400: #94a3b8; --color-gray-500: #64748b; --color-gray-600: #475569; --color-gray-700: #334155; --color-gray-800: #1e293b; --color-gray-900: #0f172a; /* Brand orange (kept from existing identity) */ --color-orange-50: #fff7ed; --color-orange-100: #ffedd5; --color-orange-200: #fed7aa; --color-orange-400: #fb923c; --color-orange-500: #f97316; /* primary brand */ --color-orange-600: #ea580c; --color-orange-700: #c2410c; /* Semantic colors */ --color-red-50: #fef2f2; --color-red-500: #ef4444; --color-red-600: #dc2626; --color-green-50: #f0fdf4; --color-green-500: #10b981; --color-green-600: #059669; --color-blue-50: #eff6ff; --color-blue-500: #3b82f6; --color-blue-600: #2563eb; --color-amber-50: #fffbeb; --color-amber-500: #f59e0b; --color-amber-600: #d97706; /* ───── Semantic surface tokens (use these in components) ───── */ --surface-0: var(--color-white); /* page background */ --surface-1: var(--color-gray-50); /* card background */ --surface-2: var(--color-gray-100); /* hover state */ --surface-3: var(--color-gray-200); /* active / pressed */ --surface-inverse: var(--color-gray-900); /* tooltips, badges */ /* Border tokens */ --border-subtle: var(--color-gray-200); --border-default: var(--color-gray-300); --border-strong: var(--color-gray-400); --border-focus: var(--color-orange-500); /* Text tokens */ --text-strong: var(--color-gray-900); --text-default: var(--color-gray-700); --text-muted: var(--color-gray-500); --text-subtle: var(--color-gray-400); --text-inverse: var(--color-white); --text-brand: var(--color-orange-600); --text-link: var(--color-orange-600); --text-link-hover: var(--color-orange-700); /* Accent tokens (semantic action colors) */ --accent: var(--color-orange-500); --accent-hover: var(--color-orange-600); --accent-soft: var(--color-orange-50); --accent-soft-hover: var(--color-orange-100); --accent-border: var(--color-orange-200); /* Status tokens */ --status-success: var(--color-green-600); --status-success-bg: var(--color-green-50); --status-error: var(--color-red-600); --status-error-bg: var(--color-red-50); --status-warning: var(--color-amber-600); --status-warning-bg: var(--color-amber-50); --status-info: var(--color-blue-600); --status-info-bg: var(--color-blue-50); /* ───── Typography scale (Stripe-style, 1.250 ratio = major third) ───── */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --font-display: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --text-xs: 12px; /* captions, badges */ --text-sm: 14px; /* meta, secondary */ --text-base: 16px; /* body */ --text-lg: 18px; /* lead paragraph */ --text-xl: 20px; /* h4 */ --text-2xl: 24px; /* h3 */ --text-3xl: 30px; /* h2 */ --text-4xl: 36px; /* h1 */ --text-5xl: 48px; /* hero */ --text-6xl: 60px; /* large hero */ --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.5; --leading-relaxed: 1.65; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; /* ───── Spacing scale (4px base) ───── */ --space-0: 0; --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; --space-32: 128px; /* ───── Radius ───── */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; /* ───── Shadows (Stripe-style very subtle) ───── */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04); --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.05); --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 10px 10px -5px rgba(15, 23, 42, 0.04); --shadow-focus: 0 0 0 3px rgba(249, 115, 22, 0.18); --shadow-focus-error: 0 0 0 3px rgba(239, 68, 68, 0.18); /* ───── Transitions ───── */ --transition-fast: 120ms cubic-bezier(0.16, 1, 0.3, 1); --transition-base: 180ms cubic-bezier(0.16, 1, 0.3, 1); --transition-slow: 280ms cubic-bezier(0.16, 1, 0.3, 1); /* ───── Z-index scale ───── */ --z-dropdown: 1000; --z-sticky: 1020; --z-overlay: 1030; --z-modal: 1040; --z-tooltip: 1050; --z-toast: 1060; /* ───── Layout ───── */ --container-max: 1280px; --container-narrow: 880px; --content-max: 720px; --sidebar-width: 264px; --header-height: 64px; } /* ───── Dark theme overrides ───── * Existing admin panel pages can opt-in via ``. * All component classes work in both modes automatically. */ :root[data-theme="dark"] { /* Sidebar (panel.css) #0a0a0a ishlatadi; biz page bg ham shu rang qilamiz — sidebar va main bir-biri bilan mos keladi, faqat content kartochkalar yorqinroq tonda ajraladi. */ --surface-0: #0a0a0a; --surface-1: #14171e; /* card — page'dan oz farqli */ --surface-2: #1d2129; /* hover */ --surface-3: #2a2f3a; /* active */ --surface-inverse: var(--color-gray-50); --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.12); --border-strong: rgba(255, 255, 255, 0.2); --text-strong: #f8fafc; --text-default: #d1d5db; --text-muted: #9ca3af; --text-subtle: #6b7280; --text-inverse: var(--color-gray-900); --text-brand: var(--color-orange-400); --text-link: var(--color-orange-400); --text-link-hover: var(--color-orange-200); --accent-soft: rgba(249, 115, 22, 0.12); --accent-soft-hover: rgba(249, 115, 22, 0.2); --accent-border: rgba(249, 115, 22, 0.3); --status-success-bg: rgba(16, 185, 129, 0.1); --status-error-bg: rgba(239, 68, 68, 0.1); --status-warning-bg: rgba(245, 158, 11, 0.1); --status-info-bg: rgba(59, 130, 246, 0.1); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.35); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.45); } /* ───── Backward-compat aliases ───── * Existing panel.css uses `--bg`, `--bg-card`, etc. — keep them as aliases * so existing pages render unchanged until migrated to v1 tokens. */ :root { --bg: var(--surface-0); --bg-card: var(--surface-1); --bg-card-hi: var(--surface-2); --border: var(--border-default); --border-hi: var(--accent-border); --text: var(--text-default); --text-dim: var(--text-subtle); --orange: var(--accent); --orange-hi: var(--accent-hover); --orange-dim: var(--accent-soft); --red: var(--color-red-500); --green: var(--color-green-500); --blue: var(--color-blue-500); --amber: var(--color-amber-500); --radius: var(--radius-lg); } /* ───── Global resets + base typography ───── */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-default); background: var(--surface-0); margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: 'cv11', 'ss01', 'ss03'; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--text-strong); line-height: var(--leading-tight); font-weight: var(--weight-semibold); letter-spacing: -0.02em; margin: 0; } h1 { font-size: var(--text-4xl); font-weight: var(--weight-bold); } h2 { font-size: var(--text-3xl); } h3 { font-size: var(--text-2xl); } h4 { font-size: var(--text-xl); } h5 { font-size: var(--text-lg); } h6 { font-size: var(--text-base); } p { margin: 0; } p + p { margin-top: var(--space-4); } a { color: var(--text-link); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--text-link-hover); text-decoration: underline; } /* Numeric stability for tables and metrics */ .tabular-nums, .num { font-variant-numeric: tabular-nums; } /* Selection */ ::selection { background: var(--accent-soft); color: var(--text-strong); }