fix dark mode: add missing color overrides for analyze-rules page

Adds missing dark mode overrides to globals.css:

Borders:
- border-red-300 (critical severity badge)
- border-orange-200/300 (high severity badge, form cards)
- border-indigo-200/300 (event_correlation card, expanded rule ring, doc links)
- border-teal-200/300 (esp category badge)

Text:
- text-indigo-700 (enrollment badge, correlation label, doc links)
- text-indigo-600 (action/link text)
- text-purple-700 (identity category badge)
- text-orange-700 (apps category badge)
- text-orange-600 (High count stat)
- text-teal-700/600 (esp category badge)

Hover:
- hover:bg-indigo-100 (related docs link hover)
- hover:bg-indigo-50 (indigo surface hover)

Ring:
- ring-1/2 ring-indigo-200 (expanded rule card outline)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Oliver Kieselbach
2026-02-24 14:06:06 +01:00
parent 6b15aa95d9
commit d9cab13299
@@ -105,6 +105,12 @@ body {
.dark .hover\:bg-gray-100:hover {
background-color: #334155 !important;
}
.dark .hover\:bg-indigo-100:hover {
background-color: #312e81 !important;
}
.dark .hover\:bg-indigo-50:hover {
background-color: #1e1b4b !important;
}
/* -- Input fields -- */
.dark input,
@@ -291,6 +297,12 @@ body {
color: #fde047 !important; /* yellow-300 */
}
/* -- Ring (focus/selection outlines) in dark mode -- */
.dark .ring-1.ring-indigo-200,
.dark .ring-2.ring-indigo-200 {
--tw-ring-color: #312e81 !important;
}
/* -- Colored borders in dark mode -- */
.dark .border-blue-100 {
border-color: #2d5282 !important;
@@ -304,15 +316,30 @@ body {
.dark .border-red-200 {
border-color: #4a2020 !important;
}
.dark .border-red-300 {
border-color: #5a2424 !important;
}
.dark .border-yellow-200 {
border-color: #3d2e0a !important;
}
.dark .border-orange-200,
.dark .border-orange-300 {
border-color: #4a2e0a !important;
}
.dark .border-purple-200 {
border-color: #2d1b4e !important;
}
.dark .border-purple-300 {
border-color: #3b2060 !important;
}
.dark .border-indigo-200,
.dark .border-indigo-300 {
border-color: #312e81 !important;
}
.dark .border-teal-200,
.dark .border-teal-300 {
border-color: #0d3d3d !important;
}
.dark .border-emerald-50,
.dark .border-emerald-100,
.dark .border-emerald-200 {
@@ -368,6 +395,27 @@ html:hover ::-webkit-scrollbar-thumb {
.dark .text-blue-700 {
color: #60a5fa !important; /* blue-400 — step icons etc. on dark surfaces */
}
.dark .text-indigo-700 {
color: #a5b4fc !important; /* indigo-300 — category badge, correlation labels, doc links */
}
.dark .text-indigo-600 {
color: #818cf8 !important; /* indigo-400 — link/action text on dark surfaces */
}
.dark .text-purple-700 {
color: #c4b5fd !important; /* violet-300 — identity category badge */
}
.dark .text-orange-700 {
color: #fb923c !important; /* orange-400 — apps category badge */
}
.dark .text-orange-600 {
color: #f97316 !important; /* orange-500 — High count stat */
}
.dark .text-teal-700 {
color: #2dd4bf !important; /* teal-400 — esp category badge */
}
.dark .text-teal-600 {
color: #14b8a6 !important; /* teal-500 */
}
/* ===== LANDING PAGE DARK MODE =====
Scoped to .landing-page to avoid affecting the authenticated app.