60 lines
1.9 KiB
CSS
60 lines
1.9 KiB
CSS
/* Turnstone theme — light (default) and dark override via .dark on <html> */
|
|
|
|
:root {
|
|
--color-surface: #f8fafc;
|
|
--color-surface-raised: #f1f5f9;
|
|
--color-surface-border: #e2e8f0;
|
|
--color-accent: #2563eb;
|
|
--color-accent-muted: #dbeafe;
|
|
--color-text-primary: #0f172a;
|
|
--color-text-muted: #475569;
|
|
--color-text-dim: #6b7280;
|
|
|
|
/* severity text colors */
|
|
--color-sev-debug: #6b7280;
|
|
--color-sev-info: #2563eb;
|
|
--color-sev-warn: #d97706;
|
|
--color-sev-error: #dc2626;
|
|
--color-sev-critical: #b91c1c;
|
|
|
|
/* severity badge — explicit bg + text pairs (no opacity hacks) */
|
|
--badge-low-bg: #f1f5f9; --badge-low-text: #475569;
|
|
--badge-medium-bg: #fef3c7; --badge-medium-text: #b45309;
|
|
--badge-high-bg: #ffedd5; --badge-high-text: #c2410c;
|
|
--badge-critical-bg: #fee2e2; --badge-critical-text: #b91c1c;
|
|
}
|
|
|
|
.dark {
|
|
--color-surface: #0f1117;
|
|
--color-surface-raised: #161b25;
|
|
--color-surface-border: #1e2636;
|
|
--color-accent: #4e9af1;
|
|
--color-accent-muted: #2a4a72;
|
|
--color-text-primary: #e2e8f0;
|
|
--color-text-muted: #94a3b8;
|
|
--color-text-dim: #6b7280;
|
|
|
|
--color-sev-debug: #6b7280;
|
|
--color-sev-info: #60a5fa;
|
|
--color-sev-warn: #fbbf24;
|
|
--color-sev-error: #f87171;
|
|
--color-sev-critical: #ef4444;
|
|
|
|
--badge-low-bg: #1e293b; --badge-low-text: #94a3b8;
|
|
--badge-medium-bg: #451a03; --badge-medium-text: #fbbf24;
|
|
--badge-high-bg: #431407; --badge-high-text: #fb923c;
|
|
--badge-critical-bg: #450a0a; --badge-critical-text: #f87171;
|
|
}
|
|
|
|
/* Smooth theme transitions */
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
*, *::before, *::after {
|
|
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
|
|
}
|
|
}
|
|
|
|
/* Keyboard focus indicator */
|
|
:focus-visible {
|
|
outline: 2px solid var(--color-accent);
|
|
outline-offset: 2px;
|
|
}
|