/** * MISAC Master Theme — misac.css * * Centralized design tokens for the MISAC component library. * Brand: #2272b5 (primary blue), #ab217f (secondary magenta). * * Usage: * - Include BEFORE all module CSS files. * - Toggle dark theme: * - JS API: MISAC.theme.set('dark') / MISAC.theme.toggle() * * All MISAC modules should reference these --m-* tokens instead of * defining their own hardcoded colors. */ /* ═══════════════════════════════════════════════════════════════════════ LIGHT THEME (default) ═══════════════════════════════════════════════════════════════════════ */ :root { /* ── Brand (constant across themes — logo colors) ───────────── */ --m-brand: #2272b5; --m-brand2: #ab217f; /* ── Accent (adapts per theme) ──────────────────────────────── */ --m-accent: #2272b5; --m-accent-hover: #1b5f99; --m-accent-light: #edf5fb; --m-accent-ring: rgba(34, 114, 181, 0.20); --m-accent-bg: rgba(34, 114, 181, 0.08); --m-accent-text: #2272b5; --m-accent2: #ab217f; --m-accent2-hover: #921c6d; --m-accent2-light: #fbeff7; --m-accent2-ring: rgba(171, 33, 127, 0.18); /* ── Surface / Background ───────────────────────────────────── */ --m-bg: #ffffff; --m-bg-muted: #f8f9fb; --m-bg-subtle: #f1f3f5; --m-surface: #ffffff; --m-surface-raised: #ffffff; /* ── Border ─────────────────────────────────────────────────── */ --m-border: #dfe3e8; --m-border-light: #e9ecef; /* ── Text ───────────────────────────────────────────────────── */ --m-text: #1e293b; --m-text-secondary: #64748b; --m-text-muted: #94a3b8; --m-text-on-accent: #ffffff; /* ── Semantic ───────────────────────────────────────────────── */ --m-danger: #ef4444; --m-danger-hover: #dc2626; --m-danger-light: #fef2f2; --m-danger-ring: rgba(239, 68, 68, 0.15); --m-success: #16a34a; --m-success-hover: #15803d; --m-success-light: #f0fdf4; --m-warning: #f59e0b; --m-warning-hover: #d97706; --m-warning-light: #fffbeb; --m-info: #3b82f6; --m-info-hover: #2563eb; --m-info-light: #eff6ff; /* ── Shadows ────────────────────────────────────────────────── */ --m-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --m-shadow: 0 2px 6px rgba(0, 0, 0, 0.06); --m-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.13); --m-shadow-xl: 0 8px 30px rgba(0, 0, 0, 0.14); /* ── Radius ─────────────────────────────────────────────────── */ --m-radius-sm: 4px; --m-radius: 6px; --m-radius-lg: 8px; /* ── Font ───────────────────────────────────────────────────── */ --m-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* ── Overlay ────────────────────────────────────────────────── */ --m-overlay: rgba(0, 0, 0, 0.35); /* ── Navbar specific ────────────────────────────────────────── */ --m-nav-bg: #1e293b; --m-nav-text: #94a3b8; --m-nav-text-hover: #f1f5f9; --m-nav-active-border: var(--m-accent); /* ── Table specific ─────────────────────────────────────────── */ --m-table-header-bg: #eef4fb; --m-table-row-odd: #f8fafc; --m-table-row-even: #ffffff; --m-table-row-hover: rgba(34, 114, 181, 0.12); --m-table-pinned-bg: #eef4fb; /* ── Form specific ──────────────────────────────────────────── */ --m-input-bg: #ffffff; --m-input-border: #ced4da; --m-input-focus-border: var(--m-accent); --m-input-focus-ring: var(--m-accent-ring); } /* ═══════════════════════════════════════════════════════════════════════ DARK THEME ═══════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] { /* ── Accent (lighter for dark bg readability) ───────────────── */ --m-accent: #60a5fa; --m-accent-hover: #93c5fd; --m-accent-light: rgba(96, 165, 250, 0.12); --m-accent-ring: rgba(96, 165, 250, 0.25); --m-accent-bg: rgba(96, 165, 250, 0.08); --m-accent-text: #60a5fa; --m-accent2: #f0abfc; --m-accent2-hover: #e879f7; --m-accent2-light: rgba(240, 171, 252, 0.12); --m-accent2-ring: rgba(240, 171, 252, 0.18); /* ── Surface / Background ───────────────────────────────────── */ --m-bg: #0f172a; --m-bg-muted: #1e293b; --m-bg-subtle: #334155; --m-surface: #1e293b; --m-surface-raised: #293548; /* ── Border ─────────────────────────────────────────────────── */ --m-border: #334155; --m-border-light: #475569; /* ── Text ───────────────────────────────────────────────────── */ --m-text: #f1f5f9; --m-text-secondary: #94a3b8; --m-text-muted: #64748b; --m-text-on-accent: #0f172a; /* ── Semantic ───────────────────────────────────────────────── */ --m-danger: #f87171; --m-danger-hover: #ef4444; --m-danger-light: rgba(248, 113, 113, 0.12); --m-danger-ring: rgba(248, 113, 113, 0.18); --m-success: #4ade80; --m-success-hover: #22c55e; --m-success-light: rgba(74, 222, 128, 0.12); --m-warning: #fbbf24; --m-warning-hover: #f59e0b; --m-warning-light: rgba(251, 191, 36, 0.12); --m-info: #60a5fa; --m-info-hover: #3b82f6; --m-info-light: rgba(96, 165, 250, 0.12); /* ── Shadows (deeper for dark) ──────────────────────────────── */ --m-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.30); --m-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); --m-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.40); --m-shadow-xl: 0 8px 30px rgba(0, 0, 0, 0.50); /* ── Overlay ────────────────────────────────────────────────── */ --m-overlay: rgba(0, 0, 0, 0.55); /* ── Navbar specific ────────────────────────────────────────── */ --m-nav-bg: #0f172a; --m-nav-text: #64748b; --m-nav-text-hover: #e2e8f0; --m-nav-active-border: #60a5fa; /* ── Table specific ─────────────────────────────────────────── */ --m-table-header-bg: #1e293b; --m-table-row-odd: #1a2332; --m-table-row-even: #0f172a; --m-table-row-hover: rgba(96, 165, 250, 0.10); --m-table-pinned-bg: #1e293b; /* ── Form specific ──────────────────────────────────────────── */ --m-input-bg: #1e293b; --m-input-border: #475569; --m-input-focus-border: #60a5fa; --m-input-focus-ring: rgba(96, 165, 250, 0.25); } /* ═══════════════════════════════════════════════════════════════════════ BASE RESETS (optional — applied when misac.css is loaded) ═══════════════════════════════════════════════════════════════════════ */ /* Smooth theme transition */ html[data-theme-transition], html[data-theme-transition] *, html[data-theme-transition] *::before, html[data-theme-transition] *::after { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important; }