/* * Electric Meadow — Bootstrap 5.3 palette * SalmoDuck brand colors with full semantic role coverage. * * Usage: * Import AFTER bootstrap.css in your wwwroot/css/app.css (or equivalent). * Dark mode activates via [data-bs-theme="dark"] on OR OS preference. * * Manual toggle (Blazor): * await JS.InvokeVoidAsync("document.documentElement.setAttribute", "data-bs-theme", isDark ? "dark" : "light"); */ /* ───────────────────────────────────────────── Brand tokens (reference these in your own CSS) ───────────────────────────────────────────── */ :root { --salmo-blue: #2563EB; --salmo-blue-dark: #1D4ED8; --salmo-blue-light: #3B82F6; /* dark-mode variant */ --salmo-green: #16A34A; --salmo-green-dark: #15803D; --salmo-green-light: #22C55E; /* dark-mode variant */ --salmo-amber: #9E6A03; --salmo-amber-dark: #7A5202; --salmo-amber-light: #C58A18; /* dark-mode variant */ --salmo-orange: #FF7200; --salmo-orange-dark: #D96200; --salmo-orange-light: #FF8A2E; /* dark-mode variant */ /* Form validation states */ --form-valid-color: #26b050; --form-invalid-color: #e50000; /* Reconnect modal */ --modal-button-bg: #6b9ed2; --modal-button-hover-bg: #3b6ea2; --modal-animation-color: #0087ff; --modal-backdrop: rgba(0, 0, 0, 0.4); } /* ───────────────────────────────────────────── Shell chrome tokens — follow the active theme Topbar: slightly elevated surface (tertiary) Nav: base body surface ───────────────────────────────────────────── */ :root { --shell-topbar-bg: var(--bs-tertiary-bg); --shell-nav-bg: var(--bs-body-bg); --shell-border: var(--bs-border-color); --shell-text: var(--bs-secondary-color); --shell-text-active: var(--bs-body-color); --shell-hover-bg: var(--bs-secondary-bg); --shell-active-accent: var(--bs-primary); } /* ───────────────────────────────────────────── Light mode (default) ───────────────────────────────────────────── */ :root, [data-bs-theme="light"] { --bs-primary: #2563EB; --bs-primary-rgb: 37, 99, 235; --bs-success: #16A34A; --bs-success-rgb: 22, 163, 74; --bs-danger: #DC2626; --bs-danger-rgb: 220, 38, 38; --bs-warning: #D97706; --bs-warning-rgb: 217, 119, 6; --bs-info: #0891B2; --bs-info-rgb: 8, 145, 178; --bs-secondary: #64748B; --bs-secondary-rgb: 100, 116, 139; --bs-light: #EFF6FF; --bs-light-rgb: 239, 246, 255; --bs-dark: #1E293B; --bs-dark-rgb: 30, 41, 59; --bs-body-bg: #FFFFFF; --bs-body-color: #1E293B; --bs-link-color: #2563EB; --bs-link-hover-color: #1D4ED8; --bs-border-color: #CBD5E1; --bs-border-color-translucent: rgba(30, 41, 59, 0.175); } /* ───────────────────────────────────────────── Dark mode — explicit attribute ───────────────────────────────────────────── */ [data-bs-theme="dark"] { --bs-primary: #3B82F6; --bs-primary-rgb: 59, 130, 246; --bs-success: #22C55E; --bs-success-rgb: 34, 197, 94; --bs-danger: #F87171; --bs-danger-rgb: 248, 113, 113; --bs-warning: #FBBF24; --bs-warning-rgb: 251, 191, 36; --bs-info: #22D3EE; --bs-info-rgb: 34, 211, 238; --bs-secondary: #94A3B8; --bs-secondary-rgb: 148, 163, 184; --bs-light: #1E293B; --bs-light-rgb: 30, 41, 59; --bs-dark: #F1F5F9; --bs-dark-rgb: 241, 245, 249; --bs-body-bg: #0F172A; --bs-body-color: #F1F5F9; --bs-link-color: #3B82F6; --bs-link-hover-color: #60A5FA; --bs-border-color: #334155; --bs-border-color-translucent: rgba(241, 245, 249, 0.175); --shell-topbar-bg: #1E293B; } /* ───────────────────────────────────────────── Dark mode — OS preference fallback (applies when no data-bs-theme is set on ) ───────────────────────────────────────────── */ @media (prefers-color-scheme: dark) { :root:not([data-bs-theme]) { --bs-primary: #3B82F6; --bs-primary-rgb: 59, 130, 246; --bs-success: #22C55E; --bs-success-rgb: 34, 197, 94; --bs-danger: #F87171; --bs-danger-rgb: 248, 113, 113; --bs-warning: #FBBF24; --bs-warning-rgb: 251, 191, 36; --bs-info: #22D3EE; --bs-info-rgb: 34, 211, 238; --bs-secondary: #94A3B8; --bs-secondary-rgb: 148, 163, 184; --bs-light: #1E293B; --bs-light-rgb: 30, 41, 59; --bs-dark: #F1F5F9; --bs-dark-rgb: 241, 245, 249; --bs-body-bg: #0F172A; --bs-body-color: #F1F5F9; --bs-link-color: #3B82F6; --bs-link-hover-color: #60A5FA; --bs-border-color: #334155; --bs-border-color-translucent: rgba(241, 245, 249, 0.175); --shell-topbar-bg: #1E293B; } } /* ───────────────────────────────────────────── Logo utility classes ───────────────────────────────────────────── */ .salmo-logo-salmo { color: var(--bs-primary); } .salmo-logo-duck { color: var(--bs-success); }