Files
cluedo-hp-webapp/frontend/src/styles/theme.js
nessi a9021fb4f1 Refactor status-based styles to use theme tokens.
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.
2026-02-06 09:25:43 +01:00

40 lines
1.2 KiB
JavaScript

// frontend/src/styles/theme.js
export const stylesTokens = {
pageBg: "var(--hp-pageBg)",
panelBg: "var(--hp-panelBg)",
panelBorder: "var(--hp-panelBorder)",
textMain: "var(--hp-textMain)",
textDim: "var(--hp-textDim)",
textGold: "var(--hp-textGold)",
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)",
};