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.
40 lines
1.2 KiB
JavaScript
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)",
|
|
};
|