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/layout/sidebar-item.scss

@@ -42,8 +42,8 @@
     }
 
     &.active, &:hover {
-      background: $lensBlue;
-      color: $sidebarActiveColor;
+      background: var(--blue);
+      color: var(--sidebarActiveColor);
     }
 
     .expand-icon {
@@ -56,11 +56,11 @@
     border-left: $borderSize solid transparent;
 
     &.active {
-      border-left-color: $lensBlue;
+      border-left-color: var(--blue);
     }
 
     > .SidebarItem {
-      color: $textColorPrimary;
+      color: var(--textColorPrimary);
       padding-left: 30px + $borderSize;
       line-height: 22px;
 
@@ -74,7 +74,7 @@
         }
 
         &.active, &:hover {
-          color: $sidebarSubmenuActiveColor;
+          color: var(--sidebarSubmenuActiveColor);
           background: none;
         }
       }

src/renderer/components/layout/sub-header.scss

@@ -20,7 +20,7 @@
  */
 
 .SubHeader {
-  color: $textColorAccent;
+  color: var(--textColorAccent);
   font-weight: $font-weight-bold;
   text-align: center;
 
@@ -29,6 +29,6 @@
   }
 
   &.withLine {
-    border-bottom: 1px solid $borderColor;
+    border-bottom: 1px solid var(--borderColor);
   }
 }

src/renderer/components/layout/tab-layout.scss

@@ -26,7 +26,7 @@
   height: 100%;
 
   > .Tabs {
-    background: $layoutTabsBackground;
+    background: var(--layoutTabsBackground);
     min-height: 32px;
   }
 

src/renderer/components/layout/wizard-layout.scss

@@ -38,12 +38,12 @@
   > .head-col {
     position: sticky;
     justify-content: space-between;
-    background-color: $clusterMenuBackground;
+    background-color: var(--clusterMenuBackground);
   }
 
   > .content-col {
     margin-right: $spacing;
-    background-color: $contentColor;
+    background-color: var(--contentColor);
     border-radius: $radius;
 
     > div {
@@ -58,7 +58,7 @@
   }
 
   > .info-col {
-    background-color: $contentColor;
+    background-color: var(--contentColor);
   }
 
   p {
@@ -66,7 +66,7 @@
   }
 
   a {
-    color: $colorInfo;
+    color: var(--colorInfo);
   }
 
   &.centered {