/* * Design System - Color Tokens * * Mission Control Design System v2 * Based on the Mission Control design mockups with full dark mode support. * * Color palette includes: * - Primary: Sky blue (#13a4ec) for actions and emphasis * - Slate: Neutral grays for backgrounds, text, borders * - Status colors: Success (emerald), Warning (amber), Error (red) * * Dark mode: Uses .dark class on element */ :root { /* ======================================== * PRIMARY COLORS * Main brand color for primary actions, links, and focus states * Sky blue palette * ======================================== */ --color-primary-50: #f0f9ff; --color-primary-100: #e0f2fe; --color-primary-200: #bae6fd; --color-primary-300: #7dd3fc; --color-primary-400: #38bdf8; --color-primary-500: #13a4ec; /* Base primary - main brand color */ --color-primary-600: #0284c7; /* Primary hover state */ --color-primary-700: #0369a1; --color-primary-800: #075985; --color-primary-900: #0c4a6e; /* ======================================== * SLATE COLORS (Secondary/Neutral) * Used for backgrounds, text, borders, and UI elements * ======================================== */ --color-slate-50: #f8fafc; --color-slate-100: #f1f5f9; --color-slate-200: #e2e8f0; --color-slate-300: #cbd5e1; --color-slate-400: #94a3b8; --color-slate-500: #64748b; --color-slate-600: #475569; --color-slate-700: #334155; --color-slate-800: #1e293b; --color-slate-900: #0f172a; /* ======================================== * SURFACE COLORS * Specific background colors from mockups * ======================================== */ --color-bg-light: #f6f7f8; --color-bg-dark: #0d1117; --color-surface-dark: #161b22; --color-border-dark: #30363d; --color-row-hover: #161b22; /* ======================================== * SUCCESS COLORS (Emerald) * Positive states, confirmations, and success messages * ======================================== */ --color-success-50: #ecfdf5; --color-success-100: #d1fae5; --color-success-200: #a7f3d0; --color-success-300: #6ee7b7; --color-success-400: #34d399; --color-success-500: #10b981; /* Base success */ --color-success-600: #059669; --color-success-700: #047857; --color-success-800: #065f46; --color-success-900: #064e3b; /* ======================================== * WARNING COLORS (Amber/Orange) * Alerts, cautions, and attention-needed states * ======================================== */ --color-warning-50: #fffbeb; --color-warning-100: #fef3c7; --color-warning-200: #fde68a; --color-warning-300: #fcd34d; --color-warning-400: #fbbf24; --color-warning-500: #f59e0b; /* Base warning (amber) */ --color-warning-600: #d97706; --color-warning-700: #b45309; --color-warning-800: #92400e; --color-warning-900: #78350f; /* Orange variant for priority indicators */ --color-orange-500: #f97316; /* ======================================== * ERROR COLORS (Red) * Error states, destructive actions, and critical alerts * ======================================== */ --color-error-50: #fef2f2; --color-error-100: #fee2e2; --color-error-200: #fecaca; --color-error-300: #fca5a5; --color-error-400: #f87171; --color-error-500: #ef4444; /* Base error */ --color-error-600: #dc2626; --color-error-700: #b91c1c; --color-error-800: #991b1b; --color-error-900: #7f1d1d; /* ======================================== * ADDITIONAL ACCENT COLORS * For labels, badges, and visual variety * ======================================== */ --color-blue-500: #3b82f6; --color-blue-50: rgba(59, 130, 246, 0.1); --color-purple-500: #a855f7; --color-purple-50: rgba(168, 85, 247, 0.1); --color-indigo-500: #5e6ad2; /* Blue with purple hint - Linear Done color */ --color-indigo-50: rgba(94, 106, 210, 0.1); --color-amber-500: #f59e0b; --color-amber-400: #fbbf24; --color-amber-50: rgba(245, 158, 11, 0.1); --color-emerald-500: #10b981; --color-emerald-50: rgba(16, 185, 129, 0.1); /* ======================================== * NEUTRAL COLORS (Legacy compatibility) * ======================================== */ --color-neutral-50: var(--color-slate-50); --color-neutral-100: var(--color-slate-100); --color-neutral-200: var(--color-slate-200); --color-neutral-300: var(--color-slate-300); --color-neutral-400: var(--color-slate-400); --color-neutral-500: var(--color-slate-500); --color-neutral-600: var(--color-slate-600); --color-neutral-700: var(--color-slate-700); --color-neutral-800: var(--color-slate-800); --color-neutral-900: var(--color-slate-900); --color-neutral-white: #ffffff; --color-neutral-black: #000000; /* ======================================== * SEMANTIC ALIASES - LIGHT MODE * ======================================== */ /* Background colors */ --color-bg-primary: var(--color-bg-light); --color-bg-secondary: var(--color-neutral-white); --color-bg-tertiary: var(--color-slate-100); --color-bg-inverse: var(--color-slate-900); --color-bg-hover: var(--color-slate-100); /* Text colors */ --color-text-primary: var(--color-slate-900); --color-text-secondary: var(--color-slate-600); --color-text-tertiary: var(--color-slate-500); --color-text-muted: var(--color-slate-400); --color-text-inverse: var(--color-neutral-white); --color-text-link: var(--color-primary-500); --color-text-link-hover: var(--color-primary-600); /* Border colors */ --color-border-primary: var(--color-slate-200); --color-border-secondary: var(--color-slate-300); --color-border-focus: var(--color-primary-500); /* Interactive states */ --color-interactive-primary: var(--color-primary-500); --color-interactive-primary-hover: var(--color-primary-600); --color-interactive-primary-active: var(--color-primary-700); --color-interactive-secondary: var(--color-slate-100); --color-interactive-secondary-hover: var(--color-slate-200); /* Status colors (for badges, indicators) */ --color-status-success-bg: var(--color-success-50); --color-status-success-text: var(--color-success-800); --color-status-success-border: var(--color-success-200); --color-status-warning-bg: var(--color-warning-50); --color-status-warning-text: var(--color-warning-700); --color-status-warning-border: var(--color-warning-200); --color-status-error-bg: var(--color-error-50); --color-status-error-text: var(--color-error-800); --color-status-error-border: var(--color-error-200); --color-status-info-bg: var(--color-primary-50); --color-status-info-text: var(--color-primary-800); --color-status-info-border: var(--color-primary-200); /* ======================================== * FOCUS & ACCESSIBILITY * ======================================== */ --color-focus-ring: var(--color-primary-500); --color-focus-ring-offset: var(--color-neutral-white); /* ======================================== * SHADOWS * ======================================== */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /* ======================================== * TYPOGRAPHY * ======================================== */ --font-family-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-family-sans: var(--font-family-display); --font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; /* ======================================== * BORDER RADIUS * ======================================== */ --radius-sm: 0.25rem; --radius-default: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-full: 9999px; /* ======================================== * SIDEBAR DIMENSIONS * ======================================== */ --sidebar-width: 16rem; /* 256px */ --header-height: 3.5rem; /* 56px */ } /* ======================================== * DARK MODE OVERRIDES * Applied when .dark class is on element * ======================================== */ .dark { /* Background colors */ --color-bg-primary: var(--color-bg-dark); --color-bg-secondary: var(--color-surface-dark); --color-bg-tertiary: var(--color-slate-800); --color-bg-inverse: var(--color-neutral-white); --color-bg-hover: var(--color-row-hover); /* Text colors */ --color-text-primary: var(--color-slate-100); --color-text-secondary: var(--color-slate-400); --color-text-tertiary: var(--color-slate-500); --color-text-muted: var(--color-slate-600); --color-text-inverse: var(--color-slate-900); /* Border colors */ --color-border-primary: var(--color-slate-800); --color-border-secondary: var(--color-slate-700); /* Interactive states */ --color-interactive-secondary: var(--color-slate-800); --color-interactive-secondary-hover: var(--color-slate-700); /* Focus */ --color-focus-ring-offset: var(--color-bg-dark); /* Status colors (adjusted for dark backgrounds) */ --color-status-success-bg: rgba(16, 185, 129, 0.1); --color-status-success-text: var(--color-success-500); --color-status-success-border: rgba(16, 185, 129, 0.2); --color-status-warning-bg: rgba(245, 158, 11, 0.1); --color-status-warning-text: var(--color-warning-500); --color-status-warning-border: rgba(245, 158, 11, 0.2); --color-status-error-bg: rgba(239, 68, 68, 0.1); --color-status-error-text: var(--color-error-500); --color-status-error-border: rgba(239, 68, 68, 0.2); --color-status-info-bg: rgba(19, 164, 236, 0.1); --color-status-info-text: var(--color-primary-500); --color-status-info-border: rgba(19, 164, 236, 0.2); /* Shadows (more subtle in dark mode) */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4); }