From 4295b139b2a6a3c324bd10c1a6b50960ff144039 Mon Sep 17 00:00:00 2001 From: nessi Date: Fri, 6 Feb 2026 09:39:21 +0100 Subject: [PATCH] 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 | 9 +- frontend/src/styles/theme.js | 39 +++----- frontend/src/styles/themes.js | 171 +++++++++++++++------------------- 3 files changed, 91 insertions(+), 128 deletions(-) diff --git a/frontend/src/styles/styles.js b/frontend/src/styles/styles.js index 96a4f97..6c57952 100644 --- a/frontend/src/styles/styles.js +++ b/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, - background: `linear-gradient(180deg, ${stylesTokens.sectionHeaderBgTop}, ${stylesTokens.sectionHeaderBgBottom})`, - borderBottom: `1px solid ${stylesTokens.sectionHeaderBorder}`, + color: stylesTokens.textGold, + + // 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)", }, diff --git a/frontend/src/styles/theme.js b/frontend/src/styles/theme.js index c900cba..3c21f72 100644 --- a/frontend/src/styles/theme.js +++ b/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) ===== - sectionHeaderBgTop: "var(--hp-sectionHeaderBgTop)", - sectionHeaderBgBottom: "var(--hp-sectionHeaderBgBottom)", - sectionHeaderText: "var(--hp-sectionHeaderText)", - sectionHeaderBorder: "var(--hp-sectionHeaderBorder)", + // Header + headerBgTop: "var(--hp-headerBgTop)", + headerBgBottom: "var(--hp-headerBgBottom)", + headerBorder: "var(--hp-headerBorder)", - // ===== Row/Table colors ===== - rowDefaultBg: "var(--hp-rowDefaultBg)", + // Rows + rowNoBg: "var(--hp-rowNoBg)", + rowNoText: "var(--hp-rowNoText)", + rowNoBorder: "var(--hp-rowNoBorder)", rowOkBg: "var(--hp-rowOkBg)", - rowOkBorder: "var(--hp-rowOkBorder)", rowOkText: "var(--hp-rowOkText)", - - rowNoBg: "var(--hp-rowNoBg)", - rowNoBorder: "var(--hp-rowNoBorder)", - rowNoText: "var(--hp-rowNoText)", + rowOkBorder: "var(--hp-rowOkBorder)", 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)", - - // ===== 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)", + rowEmptyBorder: "var(--hp-rowEmptyBorder)", }; diff --git a/frontend/src/styles/themes.js b/frontend/src/styles/themes.js index 699e9ff..1d79ca5 100644 --- a/frontend/src/styles/themes.js +++ b/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)", - rowOkBorder: "rgba(0,190,80,0.55)", - 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)", + // Row colors (fix falsch bleibt rot in ALLEN themes) + rowNoBg: "rgba(255, 35, 35, 0.16)", rowNoText: "#ffb3b3", - badgeNoBg: "rgba(255,35,35,0.20)", - badgeNoText: "#ffb3b3", + rowNoBorder: "rgba(255,35,35,0.55)", - rowMaybeBg: "rgba(140,140,140,0.12)", - rowMaybeBorder: "rgba(233,216,166,0.22)", + rowOkBg: "rgba(0, 190, 80, 0.16)", + 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)", - badgeMaybeText: "rgba(233,216,166,0.85)", + rowMaybeBorder: "rgba(233,216,166,0.22)", 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)", - badgeEmptyText: "rgba(233,216,166,0.75)", + rowEmptyBorder: "rgba(0,0,0,0)", }, }, @@ -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)", - 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)", + rowNoBg: "rgba(255, 35, 35, 0.16)", rowNoText: "#ffb3b3", - badgeNoBg: "rgba(255,35,35,0.20)", - badgeNoText: "#ffb3b3", + rowNoBorder: "rgba(255,35,35,0.55)", - rowMaybeBg: "rgba(140,140,140,0.12)", - rowMaybeBorder: "rgba(233,216,166,0.22)", - rowMaybeText: "rgba(233,216,166,0.85)", - badgeMaybeBg: "rgba(140,140,140,0.14)", - badgeMaybeText: "rgba(233,216,166,0.85)", + rowOkBg: "rgba(255, 184, 107, 0.16)", + rowOkText: "#ffd2a8", + rowOkBorder: "rgba(255,184,107,0.55)", + + 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(210, 255, 235, 0.95)", - badgeOkBg: "rgba(124, 255, 182, 0.18)", - badgeOkText: "rgba(210, 255, 235, 0.95)", + rowOkText: "rgba(190,255,220,0.92)", + rowOkBorder: "rgba(124,255,182,0.55)", - rowNoBg: "rgba(255,35,35,0.18)", - rowNoBorder: "rgba(255,35,35,0.65)", - rowNoText: "#ffb3b3", - badgeNoBg: "rgba(255,35,35,0.20)", - badgeNoText: "#ffb3b3", + rowMaybeBg: "rgba(120, 255, 190, 0.10)", + rowMaybeText: "rgba(175,240,210,0.85)", + rowMaybeBorder: "rgba(120,255,190,0.22)", - rowMaybeBg: "rgba(140,140,140,0.12)", - rowMaybeBorder: "rgba(233,216,166,0.22)", - 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)", + rowEmptyBg: "rgba(255,255,255,0.06)", + rowEmptyText: "rgba(175,240,210,0.75)", 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(225, 235, 255, 0.95)", - badgeOkBg: "rgba(143, 182, 255, 0.18)", - badgeOkText: "rgba(225, 235, 255, 0.95)", + rowOkText: "rgba(210,230,255,0.92)", + rowOkBorder: "rgba(143,182,255,0.55)", - rowNoBg: "rgba(255,35,35,0.18)", - rowNoBorder: "rgba(255,35,35,0.65)", - rowNoText: "#ffb3b3", - badgeNoBg: "rgba(255,35,35,0.20)", - badgeNoText: "#ffb3b3", + rowMaybeBg: "rgba(140, 180, 255, 0.10)", + rowMaybeText: "rgba(180,205,255,0.85)", + rowMaybeBorder: "rgba(143,182,255,0.22)", - rowMaybeBg: "rgba(140,140,140,0.12)", - rowMaybeBorder: "rgba(233,216,166,0.22)", - 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)", + rowEmptyBg: "rgba(255,255,255,0.06)", + rowEmptyText: "rgba(180,205,255,0.78)", 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)", - 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)", + rowNoBg: "rgba(255, 35, 35, 0.16)", rowNoText: "#ffb3b3", - badgeNoBg: "rgba(255,35,35,0.20)", - badgeNoText: "#ffb3b3", + rowNoBorder: "rgba(255,35,35,0.55)", - rowMaybeBg: "rgba(140,140,140,0.12)", - rowMaybeBorder: "rgba(233,216,166,0.22)", - rowMaybeText: "rgba(233,216,166,0.85)", - badgeMaybeBg: "rgba(140,140,140,0.14)", - badgeMaybeText: "rgba(233,216,166,0.85)", + rowOkBg: "rgba(255, 226, 122, 0.16)", + rowOkText: "rgba(255,240,190,0.92)", + rowOkBorder: "rgba(255,226,122,0.55)", - 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)", }, }, };