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

Refactor and expand style tokens for rows and badges.

Browse Source 
This commit separates badge and row styles into distinct tokens, improving modularity and theme customization. It also introduces new tokens for section headers and replaces hardcoded values with more consistent styling logic. These changes enhance maintainability and visual consistency across the application.
This commit is contained in:
Sascha Nesterovic
2026-02-06 09:33:09 +01:00
parent a9021fb4f1
commit 6e460b69b4
4 changed files with 74 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -20,10 +20,10 @@ export const THEMES = {
badgeOkBg: "rgba(0,190,80,0.18)",
badgeOkText: "#baf3c9",
rowNoBg: "rgba(255,35,35,0.16)",
rowNoBorder: "rgba(255,35,35,0.55)",
rowNoBg: "rgba(255,35,35,0.18)",
rowNoBorder: "rgba(255,35,35,0.65)",
rowNoText: "#ffb3b3",
badgeNoBg: "rgba(255,35,35,0.18)",
badgeNoBg: "rgba(255,35,35,0.20)",
badgeNoText: "#ffb3b3",
rowMaybeBg: "rgba(140,140,140,0.12)",
@@ -60,17 +60,17 @@ export const THEMES = {
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)",
rowNoBg: "rgba(255,35,35,0.18)",
rowNoBorder: "rgba(255,35,35,0.65)",
rowNoText: "#ffb3b3",
badgeNoBg: "rgba(200, 40, 40, 0.22)",
badgeNoBg: "rgba(255,35,35,0.20)",
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)",
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)",
@@ -100,17 +100,17 @@ export const THEMES = {
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)",
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(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)",
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)",
rowEmptyBorder: "rgba(0,0,0,0)",
@@ -140,17 +140,17 @@ export const THEMES = {
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)",
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(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)",
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)",
rowEmptyBorder: "rgba(0,0,0,0)",
@@ -180,17 +180,17 @@ export const THEMES = {
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)",
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(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)",
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)",
rowEmptyBorder: "rgba(0,0,0,0)",