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/+user-management/+cluster-roles/details.scss

@@ -25,12 +25,12 @@
     grid-template-columns: min-content auto;
     gap: $margin;
 
-    border: 1px solid $borderColor;
+    border: 1px solid var(--borderColor);
     border-radius: $radius;
     padding: $padding * 1.5;
 
     > .name {
-      color: $textColorSecondary;
+      color: var(--textColorSecondary);
       text-align: right;
       white-space: nowrap;
     }

src/renderer/components/+user-management/+roles/details.scss

@@ -4,12 +4,12 @@
     grid-template-columns: min-content auto;
     gap: $margin;
 
-    border: 1px solid $borderColor;
+    border: 1px solid var(--borderColor);
     border-radius: $radius;
     padding: $padding * 1.5;
 
     > .name {
-      color: $textColorSecondary;
+      color: var(--textColorSecondary);
       text-align: right;
       white-space: nowrap;
     }

src/renderer/components/+user-management/+service-accounts/secret.scss

@@ -30,7 +30,7 @@
 
   .secret-row {
     display: flex;
-    border-bottom: 1px solid $borderFaintColor;
+    border-bottom: 1px solid var(--borderFaintColor);
     padding: $padding 0;
 
     &:first-child {
@@ -40,12 +40,12 @@
 
   .name {
     flex-basis: 23%;
-    color: $drawerItemNameColor;
+    color: var(--drawerItemNameColor);
   }
 
   .value {
     flex-basis: 76%;
-    color: $drawerItemValueColor;
+    color: var(--drawerItemValueColor);
     word-break: break-all;
 
     &:empty:after {