nessi/cluedo-hp-webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor header and row styles to use theme tokens.

Browse Source 
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.
This commit is contained in:
Sascha Nesterovic
2026-02-06 09:39:21 +01:00
parent 6e460b69b4
commit 4295b139b2
3 changed files with 91 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
frontend/src/styles/themes.js
View File

@@ -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)",
},
},
};