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

Refactor status-based styles to use theme tokens.

Browse Source 
This change replaces hardcoded status-based styles with theme tokens, improving consistency and maintainability. The update also enables easier customization of styles across different themes by centralizing row and badge colors in theme configurations.
This commit is contained in:
Sascha Nesterovic
2026-02-06 09:25:43 +01:00
parent a08b74ff7a
commit a9021fb4f1
3 changed files with 182 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/src/styles/theme.js
View File

@@ -1,11 +1,39 @@
// frontend/src/styles/theme.js
export const stylesTokens = {
pageBg: "var(--hp-pageBg)",
panelBg: "var(--hp-panelBg)",
panelBorder: "var(--hp-panelBorder)",
pageBg: "var(--hp-pageBg)",
panelBg: "var(--hp-panelBg)",
panelBorder: "var(--hp-panelBorder)",
textMain: "var(--hp-textMain)",
textDim: "var(--hp-textDim)",
textGold: "var(--hp-textGold)",
textMain: "var(--hp-textMain)",
textDim: "var(--hp-textDim)",
textGold: "var(--hp-textGold)",
goldLine: "var(--hp-goldLine)",
};
goldLine: "var(--hp-goldLine)",
// ===== NEW: Row/Table colors so themes affect tables =====
rowDefaultBg: "var(--hp-rowDefaultBg)",
rowOkBg: "var(--hp-rowOkBg)",
rowOkBorder: "var(--hp-rowOkBorder)",
rowOkText: "var(--hp-rowOkText)",
badgeOkBg: "var(--hp-badgeOkBg)",
badgeOkText: "var(--hp-badgeOkText)",
rowNoBg: "var(--hp-rowNoBg)",
rowNoBorder: "var(--hp-rowNoBorder)",
rowNoText: "var(--hp-rowNoText)",
badgeNoBg: "var(--hp-badgeNoBg)",
badgeNoText: "var(--hp-badgeNoText)",
rowMaybeBg: "var(--hp-rowMaybeBg)",
rowMaybeBorder: "var(--hp-rowMaybeBorder)",
rowMaybeText: "var(--hp-rowMaybeText)",
badgeMaybeBg: "var(--hp-badgeMaybeBg)",
badgeMaybeText: "var(--hp-badgeMaybeText)",
rowEmptyBg: "var(--hp-rowEmptyBg)",
rowEmptyBorder: "var(--hp-rowEmptyBorder)",
rowEmptyText: "var(--hp-rowEmptyText)",
badgeEmptyBg: "var(--hp-badgeEmptyBg)",
badgeEmptyText: "var(--hp-badgeEmptyText)",
};

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

@@ -10,8 +10,33 @@ 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)",
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.16)",
rowNoBorder: "rgba(255,35,35,0.55)",
rowNoText: "#ffb3b3",
badgeNoBg: "rgba(255,35,35,0.18)",
badgeNoText: "#ffb3b3",
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.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)",
},
},
@@ -25,8 +50,33 @@ 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)",
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(200, 40, 40, 0.26)",
rowNoBorder: "rgba(200, 40, 40, 0.70)",
rowNoText: "#ffb3b3",
badgeNoBg: "rgba(200, 40, 40, 0.22)",
badgeNoText: "#ffb3b3",
rowMaybeBg: "rgba(255, 210, 140, 0.14)",
rowMaybeBorder: "rgba(255, 210, 140, 0.30)",
rowMaybeText: "rgba(255, 235, 210, 0.88)",
badgeMaybeBg: "rgba(255, 210, 140, 0.16)",
badgeMaybeText: "rgba(255, 235, 210, 0.88)",
rowEmptyBg: "rgba(255,255,255,0.06)",
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)",
},
},
@@ -40,8 +90,33 @@ 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)",
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)",
rowNoBg: "rgba(40, 120, 80, 0.28)",
rowNoBorder: "rgba(40, 120, 80, 0.70)",
rowNoText: "rgba(190, 245, 220, 0.88)",
badgeNoBg: "rgba(40, 120, 80, 0.22)",
badgeNoText: "rgba(190, 245, 220, 0.88)",
rowMaybeBg: "rgba(124, 255, 182, 0.10)",
rowMaybeBorder: "rgba(124, 255, 182, 0.28)",
rowMaybeText: "rgba(200, 255, 230, 0.85)",
badgeMaybeBg: "rgba(124, 255, 182, 0.12)",
badgeMaybeText: "rgba(200, 255, 230, 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)",
},
},
@@ -55,8 +130,33 @@ 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)",
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)",
rowNoBg: "rgba(70, 95, 160, 0.28)",
rowNoBorder: "rgba(70, 95, 160, 0.70)",
rowNoText: "rgba(205, 220, 255, 0.90)",
badgeNoBg: "rgba(70, 95, 160, 0.22)",
badgeNoText: "rgba(205, 220, 255, 0.90)",
rowMaybeBg: "rgba(143, 182, 255, 0.10)",
rowMaybeBorder: "rgba(143, 182, 255, 0.28)",
rowMaybeText: "rgba(210, 225, 255, 0.88)",
badgeMaybeBg: "rgba(143, 182, 255, 0.12)",
badgeMaybeText: "rgba(210, 225, 255, 0.88)",
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)",
},
},
@@ -70,8 +170,33 @@ 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)",
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(160, 120, 40, 0.28)",
rowNoBorder: "rgba(160, 120, 40, 0.70)",
rowNoText: "rgba(255, 230, 170, 0.90)",
badgeNoBg: "rgba(160, 120, 40, 0.22)",
badgeNoText: "rgba(255, 230, 170, 0.90)",
rowMaybeBg: "rgba(255, 226, 122, 0.10)",
rowMaybeBorder: "rgba(255, 226, 122, 0.28)",
rowMaybeText: "rgba(255, 245, 210, 0.88)",
badgeMaybeBg: "rgba(255, 226, 122, 0.12)",
badgeMaybeText: "rgba(255, 245, 210, 0.88)",
rowEmptyBg: "rgba(255,255,255,0.05)",
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)",
},
},
};