Replacing global themed sass-vars to css-vars (#4322)

* generating css-vars
* convert all global / theme sass vars to css vars with available default theme colors
* added missing colors to dark lens theme

src/renderer/components/table/table-cell.scss

@@ -80,11 +80,11 @@
   }
 
   a {
-    color: $primary;
+    color: var(--primary);
     transition: 150ms color;
 
     &:hover {
-      color: $textColorAccent;
+      color: var(--textColorAccent);
     }
   }
 }

src/renderer/components/table/table-head.scss

@@ -20,13 +20,13 @@
  */
 
 .TableHead {
-  $border: 1px solid $layoutBackground;
+  $border: 1px solid var(--layoutBackground);
 
-  background-color: $tableHeaderBackground;
-  border-bottom-width: $tableHeaderBorderWidth;
+  background-color: var(--tableHeaderBackground);
+  border-bottom-width: var(--tableHeaderBorderWidth);
   border-bottom-style: solid;
-  border-bottom-color: $tableHeaderBorderColor;
-  color: $tableHeaderColor;
+  border-bottom-color: var(--tableHeaderBorderColor);
+  color: var(--tableHeaderColor);
   display: flex;
   flex-shrink: 0;
 

src/renderer/components/table/table.scss

@@ -39,16 +39,16 @@
       cursor: pointer;
 
       &:hover {
-        background-color: $tableBgcSelected !important;
+        background-color: var(--tableBgcSelected) !important;
       }
 
       &.selected {
-        background-color: $tableBgcSelected;
-        color: $tableSelectedRowColor;
+        background-color: var(--tableBgcSelected);
+        color: var(--tableSelectedRowColor);
 
         &:before {
           content: "";
-          background: $primary;
+          background: var(--primary);
           position: absolute;
           left: 0;
           top: 0;
@@ -62,7 +62,7 @@
   &.striped {
     .TableRow {
       &:nth-child(odd) {
-        background-color: $tableBgcStripe;
+        background-color: var(--tableBgcStripe);
       }
     }
   }