Refactor header and row styles to use theme tokens.

Replaced hardcoded header colors with theme-based tokens for better maintainability and consistency across themes. Simplified the structure by consolidating row and header-specific design tokens and removing unused badge tokens.

frontend/src/styles/styles.js

@@ -48,9 +48,12 @@ export const styles = {
     fontWeight: 1000,
     fontFamily: '"Cinzel Decorative", "IM Fell English", system-ui',
     letterSpacing: 1.0,
-    color: stylesTokens.sectionHeaderText,
+    color: stylesTokens.textGold,
-    background: `linear-gradient(180deg, ${stylesTokens.sectionHeaderBgTop}, ${stylesTokens.sectionHeaderBgBottom})`,
+
-    borderBottom: `1px solid ${stylesTokens.sectionHeaderBorder}`,
+    // WICHTIG: Header-Farben aus Theme-Tokens, nicht hart codiert
+    background: `linear-gradient(180deg, ${stylesTokens.headerBgTop}, ${stylesTokens.headerBgBottom})`,
+    borderBottom: `1px solid ${stylesTokens.headerBorder}`,
+
     textTransform: "uppercase",
     textShadow: "0 1px 0 rgba(0,0,0,0.6)",
   },

frontend/src/styles/theme.js

@@ -1,4 +1,3 @@
-// frontend/src/styles/theme.js
 export const stylesTokens = {
   pageBg: "var(--hp-pageBg)",
   panelBg: "var(--hp-panelBg)",
@@ -10,41 +9,25 @@ export const stylesTokens = {
 
   goldLine: "var(--hp-goldLine)",
 
-  // ===== Section Header (NEW) =====
+  // Header
-  sectionHeaderBgTop: "var(--hp-sectionHeaderBgTop)",
+  headerBgTop: "var(--hp-headerBgTop)",
-  sectionHeaderBgBottom: "var(--hp-sectionHeaderBgBottom)",
+  headerBgBottom: "var(--hp-headerBgBottom)",
-  sectionHeaderText: "var(--hp-sectionHeaderText)",
+  headerBorder: "var(--hp-headerBorder)",
-  sectionHeaderBorder: "var(--hp-sectionHeaderBorder)",
 
-  // ===== Row/Table colors =====
+  // Rows
-  rowDefaultBg: "var(--hp-rowDefaultBg)",
+  rowNoBg: "var(--hp-rowNoBg)",
+  rowNoText: "var(--hp-rowNoText)",
+  rowNoBorder: "var(--hp-rowNoBorder)",
 
   rowOkBg: "var(--hp-rowOkBg)",
-  rowOkBorder: "var(--hp-rowOkBorder)",
   rowOkText: "var(--hp-rowOkText)",
-
+  rowOkBorder: "var(--hp-rowOkBorder)",
-  rowNoBg: "var(--hp-rowNoBg)",
-  rowNoBorder: "var(--hp-rowNoBorder)",
-  rowNoText: "var(--hp-rowNoText)",
 
   rowMaybeBg: "var(--hp-rowMaybeBg)",
-  rowMaybeBorder: "var(--hp-rowMaybeBorder)",
   rowMaybeText: "var(--hp-rowMaybeText)",
+  rowMaybeBorder: "var(--hp-rowMaybeBorder)",
 
   rowEmptyBg: "var(--hp-rowEmptyBg)",
-  rowEmptyBorder: "var(--hp-rowEmptyBorder)",
   rowEmptyText: "var(--hp-rowEmptyText)",
-
+  rowEmptyBorder: "var(--hp-rowEmptyBorder)",
-  // ===== Badge colors (NEW: getrennt von row*) =====
-  badgeOkBg: "var(--hp-badgeOkBg)",
-  badgeOkText: "var(--hp-badgeOkText)",
-
-  badgeNoBg: "var(--hp-badgeNoBg)",
-  badgeNoText: "var(--hp-badgeNoText)",
-
-  badgeMaybeBg: "var(--hp-badgeMaybeBg)",
-  badgeMaybeText: "var(--hp-badgeMaybeText)",
-
-  badgeEmptyBg: "var(--hp-badgeEmptyBg)",
-  badgeEmptyText: "var(--hp-badgeEmptyText)",
 };

frontend/src/styles/themes.js

@@ -10,33 +10,30 @@ export const THEMES = {
       textMain: "rgba(245, 239, 220, 0.92)",
       textDim: "rgba(233, 216, 166, 0.70)",
       textGold: "#e9d8a6",
+
       goldLine: "rgba(233, 216, 166, 0.18)",
 
-      rowDefaultBg: "rgba(255,255,255,0.06)",
+      // Section header (wie TopBar, aber leicht “tiefer”)
+      headerBgTop: "rgba(32,32,36,0.92)",
+      headerBgBottom: "rgba(14,14,16,0.92)",
+      headerBorder: "rgba(233, 216, 166, 0.18)",
 
-      rowOkBg: "rgba(0,190,80,0.16)",
+      // Row colors (fix falsch bleibt rot in ALLEN themes)
-      rowOkBorder: "rgba(0,190,80,0.55)",
+      rowNoBg: "rgba(255, 35, 35, 0.16)",
-      rowOkText: "#baf3c9",
-      badgeOkBg: "rgba(0,190,80,0.18)",
-      badgeOkText: "#baf3c9",
-
-      rowNoBg: "rgba(255,35,35,0.18)",
-      rowNoBorder: "rgba(255,35,35,0.65)",
       rowNoText: "#ffb3b3",
-      badgeNoBg: "rgba(255,35,35,0.20)",
+      rowNoBorder: "rgba(255,35,35,0.55)",
-      badgeNoText: "#ffb3b3",
 
-      rowMaybeBg: "rgba(140,140,140,0.12)",
+      rowOkBg: "rgba(0, 190, 80, 0.16)",
-      rowMaybeBorder: "rgba(233,216,166,0.22)",
+      rowOkText: "#baf3c9",
+      rowOkBorder: "rgba(0,190,80,0.55)",
+
+      rowMaybeBg: "rgba(140, 140, 140, 0.12)",
       rowMaybeText: "rgba(233,216,166,0.85)",
-      badgeMaybeBg: "rgba(140,140,140,0.14)",
+      rowMaybeBorder: "rgba(233,216,166,0.22)",
-      badgeMaybeText: "rgba(233,216,166,0.85)",
 
       rowEmptyBg: "rgba(255,255,255,0.06)",
-      rowEmptyBorder: "rgba(0,0,0,0)",
       rowEmptyText: "rgba(233,216,166,0.75)",
-      badgeEmptyBg: "rgba(255,255,255,0.08)",
+      rowEmptyBorder: "rgba(0,0,0,0)",
-      badgeEmptyText: "rgba(233,216,166,0.75)",
     },
   },
 
@@ -50,33 +47,28 @@ export const THEMES = {
       textMain: "rgba(245, 239, 220, 0.92)",
       textDim: "rgba(255, 210, 170, 0.70)",
       textGold: "#ffb86b",
+
       goldLine: "rgba(255, 184, 107, 0.18)",
 
-      rowDefaultBg: "rgba(255, 184, 107, 0.08)",
+      headerBgTop: "rgba(42,18,18,0.92)",
+      headerBgBottom: "rgba(18,10,10,0.92)",
+      headerBorder: "rgba(255, 184, 107, 0.22)",
 
-      rowOkBg: "rgba(255, 184, 107, 0.18)",
+      rowNoBg: "rgba(255, 35, 35, 0.16)",
-      rowOkBorder: "rgba(255, 184, 107, 0.55)",
-      rowOkText: "rgba(255, 235, 210, 0.95)",
-      badgeOkBg: "rgba(255, 184, 107, 0.20)",
-      badgeOkText: "rgba(255, 235, 210, 0.95)",
-
-      rowNoBg: "rgba(255,35,35,0.18)",
-      rowNoBorder: "rgba(255,35,35,0.65)",
       rowNoText: "#ffb3b3",
-      badgeNoBg: "rgba(255,35,35,0.20)",
+      rowNoBorder: "rgba(255,35,35,0.55)",
-      badgeNoText: "#ffb3b3",
 
-      rowMaybeBg: "rgba(140,140,140,0.12)",
+      rowOkBg: "rgba(255, 184, 107, 0.16)",
-      rowMaybeBorder: "rgba(233,216,166,0.22)",
+      rowOkText: "#ffd2a8",
-      rowMaybeText: "rgba(233,216,166,0.85)",
+      rowOkBorder: "rgba(255,184,107,0.55)",
-      badgeMaybeBg: "rgba(140,140,140,0.14)",
+
-      badgeMaybeText: "rgba(233,216,166,0.85)",
+      rowMaybeBg: "rgba(140, 140, 140, 0.12)",
+      rowMaybeText: "rgba(255,210,170,0.85)",
+      rowMaybeBorder: "rgba(255,184,107,0.22)",
 
       rowEmptyBg: "rgba(255,255,255,0.06)",
+      rowEmptyText: "rgba(255,210,170,0.75)",
       rowEmptyBorder: "rgba(0,0,0,0)",
-      rowEmptyText: "rgba(255, 230, 190, 0.75)",
-      badgeEmptyBg: "rgba(255,255,255,0.08)",
-      badgeEmptyText: "rgba(255, 230, 190, 0.75)",
     },
   },
 
@@ -90,33 +82,28 @@ export const THEMES = {
       textMain: "rgba(235, 245, 240, 0.92)",
       textDim: "rgba(175, 240, 210, 0.70)",
       textGold: "#7CFFB6",
+
       goldLine: "rgba(124, 255, 182, 0.18)",
 
-      rowDefaultBg: "rgba(124, 255, 182, 0.07)",
+      headerBgTop: "rgba(14,28,22,0.92)",
+      headerBgBottom: "rgba(10,14,12,0.92)",
+      headerBorder: "rgba(124, 255, 182, 0.22)",
+
+      rowNoBg: "rgba(255, 35, 35, 0.16)",
+      rowNoText: "#ffb3b3",
+      rowNoBorder: "rgba(255,35,35,0.55)",
 
       rowOkBg: "rgba(124, 255, 182, 0.16)",
-      rowOkBorder: "rgba(124, 255, 182, 0.55)",
+      rowOkText: "rgba(190,255,220,0.92)",
-      rowOkText: "rgba(210, 255, 235, 0.95)",
+      rowOkBorder: "rgba(124,255,182,0.55)",
-      badgeOkBg: "rgba(124, 255, 182, 0.18)",
-      badgeOkText: "rgba(210, 255, 235, 0.95)",
 
-      rowNoBg: "rgba(255,35,35,0.18)",
+      rowMaybeBg: "rgba(120, 255, 190, 0.10)",
-      rowNoBorder: "rgba(255,35,35,0.65)",
+      rowMaybeText: "rgba(175,240,210,0.85)",
-      rowNoText: "#ffb3b3",
+      rowMaybeBorder: "rgba(120,255,190,0.22)",
-      badgeNoBg: "rgba(255,35,35,0.20)",
-      badgeNoText: "#ffb3b3",
 
-      rowMaybeBg: "rgba(140,140,140,0.12)",
+      rowEmptyBg: "rgba(255,255,255,0.06)",
-      rowMaybeBorder: "rgba(233,216,166,0.22)",
+      rowEmptyText: "rgba(175,240,210,0.75)",
-      rowMaybeText: "rgba(233,216,166,0.85)",
-      badgeMaybeBg: "rgba(140,140,140,0.14)",
-      badgeMaybeText: "rgba(233,216,166,0.85)",
-
-      rowEmptyBg: "rgba(255,255,255,0.05)",
       rowEmptyBorder: "rgba(0,0,0,0)",
-      rowEmptyText: "rgba(180, 240, 210, 0.75)",
-      badgeEmptyBg: "rgba(255,255,255,0.08)",
-      badgeEmptyText: "rgba(180, 240, 210, 0.75)",
     },
   },
 
@@ -130,33 +117,28 @@ export const THEMES = {
       textMain: "rgba(235, 240, 250, 0.92)",
       textDim: "rgba(180, 205, 255, 0.72)",
       textGold: "#8FB6FF",
+
       goldLine: "rgba(143, 182, 255, 0.18)",
 
-      rowDefaultBg: "rgba(143, 182, 255, 0.07)",
+      headerBgTop: "rgba(18,22,40,0.92)",
+      headerBgBottom: "rgba(10,12,20,0.92)",
+      headerBorder: "rgba(143, 182, 255, 0.22)",
+
+      rowNoBg: "rgba(255, 35, 35, 0.16)",
+      rowNoText: "#ffb3b3",
+      rowNoBorder: "rgba(255,35,35,0.55)",
 
       rowOkBg: "rgba(143, 182, 255, 0.16)",
-      rowOkBorder: "rgba(143, 182, 255, 0.55)",
+      rowOkText: "rgba(210,230,255,0.92)",
-      rowOkText: "rgba(225, 235, 255, 0.95)",
+      rowOkBorder: "rgba(143,182,255,0.55)",
-      badgeOkBg: "rgba(143, 182, 255, 0.18)",
-      badgeOkText: "rgba(225, 235, 255, 0.95)",
 
-      rowNoBg: "rgba(255,35,35,0.18)",
+      rowMaybeBg: "rgba(140, 180, 255, 0.10)",
-      rowNoBorder: "rgba(255,35,35,0.65)",
+      rowMaybeText: "rgba(180,205,255,0.85)",
-      rowNoText: "#ffb3b3",
+      rowMaybeBorder: "rgba(143,182,255,0.22)",
-      badgeNoBg: "rgba(255,35,35,0.20)",
-      badgeNoText: "#ffb3b3",
 
-      rowMaybeBg: "rgba(140,140,140,0.12)",
+      rowEmptyBg: "rgba(255,255,255,0.06)",
-      rowMaybeBorder: "rgba(233,216,166,0.22)",
+      rowEmptyText: "rgba(180,205,255,0.78)",
-      rowMaybeText: "rgba(233,216,166,0.85)",
-      badgeMaybeBg: "rgba(140,140,140,0.14)",
-      badgeMaybeText: "rgba(233,216,166,0.85)",
-
-      rowEmptyBg: "rgba(255,255,255,0.05)",
       rowEmptyBorder: "rgba(0,0,0,0)",
-      rowEmptyText: "rgba(180, 205, 255, 0.78)",
-      badgeEmptyBg: "rgba(255,255,255,0.08)",
-      badgeEmptyText: "rgba(180, 205, 255, 0.78)",
     },
   },
 
@@ -170,33 +152,28 @@ export const THEMES = {
       textMain: "rgba(245, 239, 220, 0.92)",
       textDim: "rgba(255, 240, 180, 0.70)",
       textGold: "#FFE27A",
+
       goldLine: "rgba(255, 226, 122, 0.18)",
 
-      rowDefaultBg: "rgba(255, 226, 122, 0.08)",
+      headerBgTop: "rgba(34,30,14,0.92)",
+      headerBgBottom: "rgba(16,14,8,0.92)",
+      headerBorder: "rgba(255, 226, 122, 0.22)",
 
-      rowOkBg: "rgba(255, 226, 122, 0.18)",
+      rowNoBg: "rgba(255, 35, 35, 0.16)",
-      rowOkBorder: "rgba(255, 226, 122, 0.60)",
-      rowOkText: "rgba(255, 245, 210, 0.95)",
-      badgeOkBg: "rgba(255, 226, 122, 0.20)",
-      badgeOkText: "rgba(255, 245, 210, 0.95)",
-
-      rowNoBg: "rgba(255,35,35,0.18)",
-      rowNoBorder: "rgba(255,35,35,0.65)",
       rowNoText: "#ffb3b3",
-      badgeNoBg: "rgba(255,35,35,0.20)",
+      rowNoBorder: "rgba(255,35,35,0.55)",
-      badgeNoText: "#ffb3b3",
 
-      rowMaybeBg: "rgba(140,140,140,0.12)",
+      rowOkBg: "rgba(255, 226, 122, 0.16)",
-      rowMaybeBorder: "rgba(233,216,166,0.22)",
+      rowOkText: "rgba(255,240,190,0.92)",
-      rowMaybeText: "rgba(233,216,166,0.85)",
+      rowOkBorder: "rgba(255,226,122,0.55)",
-      badgeMaybeBg: "rgba(140,140,140,0.14)",
-      badgeMaybeText: "rgba(233,216,166,0.85)",
 
-      rowEmptyBg: "rgba(255,255,255,0.05)",
+      rowMaybeBg: "rgba(255, 226, 122, 0.10)",
+      rowMaybeText: "rgba(255,240,180,0.85)",
+      rowMaybeBorder: "rgba(255,226,122,0.22)",
+
+      rowEmptyBg: "rgba(255,255,255,0.06)",
+      rowEmptyText: "rgba(255,240,180,0.78)",
       rowEmptyBorder: "rgba(0,0,0,0)",
-      rowEmptyText: "rgba(255, 240, 180, 0.78)",
-      badgeEmptyBg: "rgba(255,255,255,0.08)",
-      badgeEmptyText: "rgba(255, 240, 180, 0.78)",
     },
   },
 };