From bfeeb9164cac50ca243eab18b8439f2be30fb316 Mon Sep 17 00:00:00 2001
From: JoryHogeveen <jory.johan.hogeveen@gmail.com>
Date: Mon, 18 Nov 2024 18:39:39 +0100
Subject: [PATCH] Convert row colors to CSS element variables

---
 apps/client/src/styles/table.scss | 27 +++++++++++++++------------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/apps/client/src/styles/table.scss b/apps/client/src/styles/table.scss
index f232cb1af..8c0f5c283 100644
--- a/apps/client/src/styles/table.scss
+++ b/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;
-      }
-    }
   }
 }