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.

frontend/src/styles/theme.js

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