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

@@ -24,18 +24,18 @@
 
   display: grid;
   grid-template-columns: minmax(var(--drawer-item-title-width), min-content) auto;
-  border-bottom: 1px solid $borderFaintColor;
+  border-bottom: 1px solid var(--borderFaintColor);
   padding: $padding 0;
 
   > .name {
     padding-right: $padding;
     overflow: hidden;
     text-overflow: ellipsis;
-    color: $drawerItemNameColor;
+    color: var(--drawerItemNameColor);
   }
 
   > .value {
-    color: $drawerItemValueColor;
+    color: var(--drawerItemValueColor);
     word-break: break-word;
     max-width: 100%;
     min-width: 0;
@@ -53,7 +53,7 @@
     }
 
     a {
-      color: $primary;
+      color: var(--primary);
     }
   }
 

src/renderer/components/drawer/drawer-param-toggler.scss

@@ -28,7 +28,7 @@
     cursor: pointer;
 
     .param-link-text {
-      color: $lensBlue;
+      color: var(--blue);
       text-decoration: underline;
     }
   }

src/renderer/components/drawer/drawer-title.scss

@@ -22,5 +22,5 @@
 .DrawerTitle {
   padding: $padding * 1.5 $padding * 3;
   margin: $margin * 3 (-$margin * 3);
-  background: $drawerSubtitleBackground;
+  background: var(--drawerSubtitleBackground);
 }

src/renderer/components/drawer/drawer.scss

@@ -27,8 +27,8 @@
   --icon-focus-color: white;
 
   position: absolute;
-  background: $contentColor;
-  box-shadow: 0 0 $unit * 2 $boxShadow;
+  background: var(--contentColor);
+  box-shadow: 0 0 $unit * 2 var(--boxShadow);
   z-index: $zIndex-drawer;
   height: 100%;
 
@@ -67,8 +67,8 @@
   }
 
   .drawer-title {
-    background: $lensBlue;
-    color: $drawerTitleText;
+    background: var(--blue);
+    color: var(--drawerTitleText);
     padding: $padding $padding * 2.5;
     word-break: break-all;
     position: relative;
@@ -92,7 +92,7 @@
     }
 
     .MenuActions.toolbar .Icon {
-      color: $drawerTitleText;
+      color: var(--drawerTitleText);
     }
 
     .Menu {
@@ -105,7 +105,7 @@
     padding: var(--spacing);
 
     .Table .TableHead {
-      border-bottom: 1px solid $borderFaintColor;
+      border-bottom: 1px solid var(--borderFaintColor);
     }
   }