feat(ui): UI-001 Designsystem-Grundlage - Dark Mode + Readiness-Farbtokens

Epic 20 (UI-Redesign) angelegt, Stufe 1: CSS-Variablen für Dark Mode (System-Präferenz + manueller Schalter via ThemeToggle, localStorage- persistiert) und eigene Farbtokens für Einsatzbereitschaft (ready/ limited/not-ready/unknown), Basis für ReadinessBadge in UI-003. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01CVgbozhYmuEhiEJHffRXCV
2026-09-06 09:57:49 +02:00
parent 01263753bf
commit bccb8d1933
5 changed files with 351 additions and 3 deletions
@@ -21,6 +21,14 @@
  --color-success: #1e7a34;
  --color-success-bg: #e7f5ea;
  --color-muted-bg: #eef0f3;
+  --color-ready: #1e7a34;
+  --color-ready-bg: #e7f5ea;
+  --color-limited: #9a6700;
+  --color-limited-bg: #fff3d6;
+  --color-not-ready: #b3261e;
+  --color-not-ready-bg: #fbeaea;
+  --color-unknown: #55606b;
+  --color-unknown-bg: #e9ebee;
  --radius: 8px;
  --radius-sm: 6px;
  --shadow-sm: none;
@@ -29,6 +37,73 @@
  --font-sans: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
 }

+/* UI-001 (Epic 20): Dark Mode - Systemeinstellung per prefers-color-scheme,
+   manueller Override per [data-theme] auf <html> (ThemeToggle-Komponente,
+   Präferenz in localStorage). Reihenfolge wichtig: System-Media-Query zuerst,
+   [data-theme="dark"] danach, damit der manuelle Schalter in beide Richtungen
+   gewinnt. */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --color-bg: #14171a;
+    --color-surface: #1c2024;
+    --color-surface-sunken: #22262b;
+    --color-border: #333941;
+    --color-border-strong: #454c55;
+    --color-text: #e8eaed;
+    --color-text-muted: #9aa4ae;
+    --color-primary: #5b9bd8;
+    --color-primary-hover: #7bb0e2;
+    --color-primary-soft: #1e2c3a;
+    --color-danger: #e37c76;
+    --color-danger-bg: #3a2224;
+    --color-warning: #e0b34d;
+    --color-warning-bg: #3a3120;
+    --color-success: #6cc386;
+    --color-success-bg: #1f3324;
+    --color-muted-bg: #262b31;
+    --color-ready: #6cc386;
+    --color-ready-bg: #1f3324;
+    --color-limited: #e0b34d;
+    --color-limited-bg: #3a3120;
+    --color-not-ready: #e37c76;
+    --color-not-ready-bg: #3a2224;
+    --color-unknown: #9aa4ae;
+    --color-unknown-bg: #262b31;
+  }
+}
+
+:root[data-theme="dark"] {
+  --color-bg: #14171a;
+  --color-surface: #1c2024;
+  --color-surface-sunken: #22262b;
+  --color-border: #333941;
+  --color-border-strong: #454c55;
+  --color-text: #e8eaed;
+  --color-text-muted: #9aa4ae;
+  --color-primary: #5b9bd8;
+  --color-primary-hover: #7bb0e2;
+  --color-primary-soft: #1e2c3a;
+  --color-danger: #e37c76;
+  --color-danger-bg: #3a2224;
+  --color-warning: #e0b34d;
+  --color-warning-bg: #3a3120;
+  --color-success: #6cc386;
+  --color-success-bg: #1f3324;
+  --color-muted-bg: #262b31;
+  --color-ready: #6cc386;
+  --color-ready-bg: #1f3324;
+  --color-limited: #e0b34d;
+  --color-limited-bg: #3a3120;
+  --color-not-ready: #e37c76;
+  --color-not-ready-bg: #3a2224;
+  --color-unknown: #9aa4ae;
+  --color-unknown-bg: #262b31;
+}
+
+body {
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
 * {
  box-sizing: border-box;
 }
@@ -348,6 +423,45 @@ select.input:focus {
  color: var(--color-danger);
 }

+/* UI-003 (Epic 20): Einsatzbereitschafts-Status - eigene Klassen statt
+   Wiederverwendung von badge-success/warning/danger, weil "unbekannt" fachlich
+   NIE wie "einsatzbereit" aussehen darf (siehe ReadinessBadge-Komponente). */
+.badge-ready {
+  background: var(--color-ready-bg);
+  color: var(--color-ready);
+}
+
+.badge-limited {
+  background: var(--color-limited-bg);
+  color: var(--color-limited);
+}
+
+.badge-not-ready {
+  background: var(--color-not-ready-bg);
+  color: var(--color-not-ready);
+}
+
+.badge-unknown {
+  background: var(--color-unknown-bg);
+  color: var(--color-unknown);
+}
+
+.theme-toggle {
+  background: transparent;
+  border: 1px solid var(--color-border-strong);
+  color: var(--color-text-muted);
+  border-radius: var(--radius-sm);
+  padding: 0.4rem 0.6rem;
+  cursor: pointer;
+  font-size: 0.85rem;
+  line-height: 1;
+}
+
+.theme-toggle:hover {
+  background: var(--color-surface-sunken);
+  color: var(--color-text);
+}
+
 .alert {
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;