Convert row colors to CSS element variables

apps/client/src/styles/table.scss

@@ -1,5 +1,10 @@
 @mixin gf-table($darkTheme: false) {
   --mat-table-background-color: var(--light-background);
+  --mat-table-background-color-even: rgba(var(--palette-foreground-base), 0.02);
+  --mat-table-background-color-hover: rgba(
+    var(--palette-foreground-base),
+    0.04
+  );
 
   .mat-footer-row,
   .mat-row {
@@ -21,16 +26,24 @@
 
   .mat-mdc-row {
     &:nth-child(even) {
-      background-color: whitesmoke;
+      background-color: var(--mat-table-background-color-even);
     }
 
     &:hover {
-      background-color: #e6e6e6 !important;
+      background-color: var(--mat-table-background-color-hover) !important;
     }
   }
 
   @if $darkTheme {
     --mat-table-background-color: var(--dark-background);
+    --mat-table-background-color-even: rgba(
+      var(--palette-foreground-base-dark),
+      0.02
+    );
+    --mat-table-background-color-hover: rgba(
+      var(--palette-foreground-base-dark),
+      0.04
+    );
 
     .mat-mdc-footer-row {
       .mat-mdc-footer-cell {
@@ -40,15 +53,5 @@
         );
       }
     }
-
-    .mat-mdc-row {
-      &:nth-child(even) {
-        background-color: #222222;
-      }
-
-      &:hover {
-        background-color: #303030 !important;
-      }
-    }
   }
 }