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/+workloads-pods/pod-container-env.scss

@@ -35,7 +35,7 @@
     }
 
     .var-name {
-      color: $textColorPrimary
+      color: var(--textColorPrimary)
     }
   }
 }

src/renderer/components/+workloads-pods/pod-container-port.scss

@@ -31,7 +31,7 @@
 
   span {
     cursor: pointer;
-    color: $primary;
+    color: var(--primary);
     text-decoration: underline;
     position: relative;
     padding-right: 1em;

src/renderer/components/+workloads-pods/pod-details-container.scss

@@ -30,8 +30,8 @@
     display: block;
     font-family: $font-monospace;
     font-size: 90%;
-    background: $colorVague;
-    color: $textColorSecondary;
+    background: var(--colorVague);
+    color: var(--textColorSecondary);
     border-radius: $radius;
     padding: .2em .4em;
     margin-top: $margin;
@@ -42,7 +42,7 @@
     margin-bottom: $margin;
 
     .StatusBrick {
-      background: $colorTerminated;
+      background: var(--colorTerminated);
       margin-right: $margin;
 
       @include pod-status-bgs;
@@ -54,7 +54,7 @@
   }
 
   .status {
-    color: $colorTerminated;
+    color: var(--colorTerminated);
 
     @include pod-status-colors;
   }

src/renderer/components/+workloads-pods/pod-details-list.scss

@@ -55,7 +55,7 @@
       align-self: center;
 
       .LineProgress {
-        color: $lensBlue;
+        color: var(--blue);
       }
     }
 
@@ -63,7 +63,7 @@
       align-self: center;
 
       .LineProgress {
-        color: $lensMagenta;
+        color: var(--magenta);
       }
     }