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

build/build_theme_vars.ts

@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import fs from "fs-extra";
+import path from "path";
+import defaultBaseLensTheme from "../src/renderer/themes/lens-dark.json";
+
+const outputCssFile = path.resolve("src/renderer/themes/theme-vars.css");
+
+const banner = `/* 
+    Generated Lens theme CSS-variables, don't edit manually.
+    To refresh file run $: yarn run ts-node build/${path.basename(__filename)}
+*/`;
+
+const themeCssVars = Object.entries(defaultBaseLensTheme.colors)
+  .map(([varName, value]) => `--${varName}: ${value};`);
+
+const content = `
+${banner}
+
+:root {
+${themeCssVars.join("\n")}
+}
+`;
+
+// Run
+console.info(`"Saving default Lens theme css-variables to "${outputCssFile}""`);
+fs.ensureFileSync(outputCssFile);
+fs.writeFile(outputCssFile, content);

package.json

@@ -35,6 +35,7 @@
     "download:kubectl": "yarn run ts-node build/download_kubectl.ts",
     "download:helm": "yarn run ts-node build/download_helm.ts",
     "build:tray-icons": "yarn run ts-node build/build_tray_icon.ts",
+    "build:theme-vars": "yarn run ts-node build/build_theme_vars.ts",
     "lint": "PROD=true yarn run eslint --ext js,ts,tsx --max-warnings=0 .",
     "lint:fix": "yarn run lint --fix",
     "mkdocs-serve-local": "docker build -t mkdocs-serve-local:latest mkdocs/ && docker run --rm -it -p 8000:8000 -v ${PWD}:/docs mkdocs-serve-local:latest",

src/renderer/components/+apps-helm-charts/helm-chart-details.scss

@@ -22,7 +22,7 @@
 .HelmChartDetails {
   .intro-logo {
     margin-right: $margin * 2;
-    background: $helmLogoBackground;
+    background: var(--helmLogoBackground);
     border-radius: $radius;
     max-width: 150px;
     max-height: 100px;
@@ -39,7 +39,7 @@
   .intro-contents {
     .description {
       font-weight: bold;
-      color: $textColorAccent;
+      color: var(--textColorAccent);
       padding-bottom: $padding;
 
       .Button {

src/renderer/components/+apps-helm-charts/helm-charts.scss

@@ -48,7 +48,7 @@
         width: $iconSize;
         height: $iconSize;
         border-radius: 50%;
-        background: $helmImgBackground url(helm-placeholder.svg) center center no-repeat;
+        background: var(--helmImgBackground) url(helm-placeholder.svg) center center no-repeat;
         background-size: 72%; // bg size looks same as image on top of it
         margin: auto;
 
@@ -58,7 +58,7 @@
           height: inherit;
           visibility: hidden;
           border-radius: inherit;
-          background-color: $helmImgBackground;
+          background-color: var(--helmImgBackground);
           padding: $padding * 0.5;
 
           &.visible {
@@ -74,11 +74,11 @@
 
     &.repository {
       &.stable {
-        color: $helmStableRepo;
+        color: var(--helmStableRepo);
       }
 
       &.incubator {
-        color: $helmIncubatorRepo;
+        color: var(--helmIncubatorRepo);
       }
     }
   }

src/renderer/components/+apps-releases/release.mixins.scss

@@ -20,12 +20,12 @@
  */
 
 $release-status-color-list: (
-  deployed: $colorSuccess,
+  deployed: var(--colorSuccess),
-  failed: $colorError,
+  failed: var(--colorError),
-  deleting: $colorWarning,
+  deleting: var(--colorWarning),
-  pendingInstall: $colorInfo,
+  pendingInstall: var(--colorInfo),
-  pendingUpgrade: $colorInfo,
+  pendingUpgrade: var(--colorInfo),
-  pendingRollback: $colorInfo,
+  pendingRollback: var(--colorInfo),
 );
 
 @mixin release-status-bgs {

src/renderer/components/+apps-releases/releases.scss

@@ -32,7 +32,7 @@
         margin-left: $margin;
 
         &.new-version {
-          color: $colorInfo;
+          color: var(--colorInfo);
         }
       }
     }

src/renderer/components/+config-autoscalers/autoscaler.mixins.scss

@@ -20,9 +20,9 @@
  */
 
 $hpa-status-colors: (
-  abletoscale: $colorOk,
+  abletoscale: var(--colorOk),
-  scalingactive: $colorInfo,
+  scalingactive: var(--colorInfo),
-  scalinglimited: $colorSoftError,
+  scalinglimited: var(--colorSoftError),
 );
 
 @mixin hpa-status-bgc {

src/renderer/components/+config-maps/config-map-details.scss

@@ -24,7 +24,7 @@
     margin-bottom: $margin * 2;
 
     .name {
-      color: $textColorSecondary;
+      color: var(--textColorSecondary);
       font-weight: $font-weight-bold;
       padding-bottom: $padding * 0.5;
     }

src/renderer/components/+config-resource-quotas/add-quota-dialog.scss

@@ -33,14 +33,14 @@
 
     .quota {
       --flex-gap: #{$padding};
-      border: 1px solid $halfGray;
+      border: 1px solid var(--halfGray);
       border-radius: $radius;
       margin: $margin * 0.5;
       padding: $padding * 0.5 $padding;
       transition: all 150ms ease;
 
       &:hover {
-        box-shadow: inset 0 0 0 1px $borderColor;
+        box-shadow: inset 0 0 0 1px var(--borderColor);
       }
 
       .name {
@@ -48,7 +48,7 @@
       }
 
       .value {
-        color: $contentColor;
+        color: var(--contentColor);
       }
 
       .Icon:hover {

src/renderer/components/+config-resource-quotas/resource-quota-details.scss

@@ -30,7 +30,7 @@
       .LineProgress {
         margin-top: 3px;
         width: 100%;
-        color: $colorInfo;
+        color: var(--colorInfo);
       }
     }
   }

src/renderer/components/+config-secrets/secret-details.scss

@@ -24,7 +24,7 @@
     margin-bottom: $margin * 2;
 
     .name {
-      color: $textColorSecondary;
+      color: var(--textColorSecondary);
       font-weight: $font-weight-bold;
       padding-bottom: $padding * 0.5;
     }

src/renderer/components/+custom-resources/crd-resource-details.scss

@@ -23,7 +23,7 @@
   .status {
     .ready {
       color: white;
-      background-color: $colorOk;
+      background-color: var(--colorOk);
     }
   }
 }

src/renderer/components/+custom-resources/crd.mixins.scss

@@ -21,11 +21,11 @@
 
 // CRD conditions from here https://github.com/kubernetes/apiextensions-apiserver/blob/master/pkg/apis/apiextensions/types.go
 $crd-condition-colors: (
-  Established: $colorSuccess,
+  Established: var(--colorSuccess),
-  NamesAccepted: $colorOk,
+  NamesAccepted: var(--colorOk),
-  NonStructuralSchema: $colorError,
+  NonStructuralSchema: var(--colorError),
-  Terminating: $colorTerminated,
+  Terminating: var(--colorTerminated),
-  KubernetesAPIApprovalPolicyConformant: $colorWarning
+  KubernetesAPIApprovalPolicyConformant: var(--colorWarning)
 );
 
 @mixin crd-condition-bgc {

src/renderer/components/+events/event-details.scss

@@ -22,7 +22,7 @@
 .EventDetails {
   .type {
     .warning {
-      color: $colorError;
+      color: var(--colorError);
     }
   }
 }

src/renderer/components/+events/events.scss

@@ -26,7 +26,7 @@
         flex-grow: 3;
 
         &.warning {
-          color: $colorError;
+          color: var(--colorError);
         }
       }
 

src/renderer/components/+events/kube-event-details.scss

@@ -34,7 +34,7 @@
       word-break: break-word;
 
       &.warning {
-        color: $colorError;
+        color: var(--colorError);
       }
     }
   }

src/renderer/components/+events/kube-event-icon.scss

@@ -21,7 +21,7 @@
 
 .KubeEventIcon {
   &.warning {
-    color: $golden;
+    color: var(--golden);
   }
 }
 

src/renderer/components/+namespaces/namespaces-mixins.scss

@@ -22,9 +22,9 @@
 
 @mixin namespaceStatus {
   &.active {
-    color: $colorOk;
+    color: var(--colorOk);
   }
   &.terminating {
-    color: $colorError;
+    color: var(--colorError);
   }
 }

src/renderer/components/+network-ingresses/ingress-details.scss

@@ -20,7 +20,7 @@
  */
 
 .IngressDetails {
-  --titles-color: #{$textColorSecondary};
+  --titles-color: var(--textColorSecondary);
 
   .rules {
     margin-bottom: $margin * 2

src/renderer/components/+network-services/service-port-component.scss

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

src/renderer/components/+network/network-mixins.scss

@@ -20,8 +20,8 @@
  */
 
 $service-status-color-list: (
-  active: $colorOk,
+  active: var(--colorOk),
-  pending: $colorWarning
+  pending: var(--colorWarning)
 );
 
 @mixin service-status-colors {
@@ -33,7 +33,7 @@ $service-status-color-list: (
 }
 
 $port-forward-status-color-list: (
-  active: $colorOk,
+  active: var(--colorOk),
 );
 
 @mixin port-forward-status-colors {

src/renderer/components/+nodes/node-details.scss

@@ -20,8 +20,8 @@
  */
 
 .NodeDetails {
-  --status-ready-bg: #{$colorOk};
+  --status-ready-bg: var(--colorOk);
-  --status-default-bg: #{$colorError};
+  --status-default-bg: var(--colorError);
 
   .conditions {
     @include node-status-bgs;

src/renderer/components/+nodes/nodes-mixins.scss

@@ -28,7 +28,7 @@ $node-status-color-list: (
   ready: #4caf50,
   scheduling-disabled: #ff9800,
   invalid-license: #ce3933,
-  cordoned: $colorWarning
+  cordoned: var(--colorWarning)
 );
 
 @mixin node-status-bgs {

src/renderer/components/+nodes/nodes.scss

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

src/renderer/components/+storage/storage-mixins.scss

@@ -20,15 +20,15 @@
  */
 
 // PersistentVolumes
-$pv-bound: $colorOk;
+$pv-bound: var(--colorOk);
-$pv-available: $colorSuccess;
+$pv-available: var(--colorSuccess);
-$pv-released: $colorWarning;
+$pv-released: var(--colorWarning);
-$pv-failed: $colorError;
+$pv-failed: var(--colorError);
 
 // PersistentVolumeClaims
-$pvc-bound: $colorOk;
+$pvc-bound: var(--colorOk);
-$pvc-pending: $colorWarning;
+$pvc-pending: var(--colorWarning);
-$pvc-lost: $colorError;
+$pvc-lost: var(--colorError);
 
 // PersistentVolume Statuses
 $pv-status-color-list: (

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 {

src/renderer/components/+workloads-cronjobs/cronjob-details.scss

@@ -27,7 +27,7 @@
       margin-bottom: $margin;
 
       a {
-        color: $colorInfo;
+        color: var(--colorInfo);
       }
     }
   }

src/renderer/components/+workloads-deployments/deployment-scale-dialog.scss

@@ -56,7 +56,7 @@
     }
 
     .warning {
-      color: $colorSoftError;
+      color: var(--colorSoftError);
       font-size: small;
       display: flex;
       align-items: center;

src/renderer/components/+workloads-overview/overview-statuses.scss

@@ -23,14 +23,14 @@
   position: relative;
   width: 100%;
   min-width: $unit * 75;
-  background: $contentColor;
+  background: var(--contentColor);
 
   > .header {
     position: relative;
     padding: $padding * 2;
 
     h5 {
-      color: $textColorPrimary;
+      color: var(--textColorPrimary);
     }
   }
 
@@ -49,7 +49,7 @@
         text-align: center;
 
         a {
-          color: $colorInfo;
+          color: var(--colorInfo);
         }
       }
     }

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;
+    background: var(--colorVague);
-    color: $textColorSecondary;
+    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);
       }
     }
 

src/renderer/components/+workloads-replicasets/replicaset-scale-dialog.scss

@@ -56,7 +56,7 @@
     }
 
     .warning {
-      color: $colorSoftError;
+      color: var(--colorSoftError);
       font-size: small;
       display: flex;
       align-items: center;

src/renderer/components/+workloads-statefulsets/statefulset-scale-dialog.scss

@@ -56,7 +56,7 @@
     }
 
     .warning {
-      color: $colorSoftError;
+      color: var(--colorSoftError);
       font-size: small;
       display: flex;
       align-items: center;

src/renderer/components/+workloads/workloads-mixins.scss

@@ -20,36 +20,36 @@
  */
 
 // Pods
-$pod-status-running-color: $colorOk;
+$pod-status-running-color: var(--colorOk);
-$pod-status-pending-color: $colorWarning;
+$pod-status-pending-color: var(--colorWarning);
-$pod-status-evicted-color: $colorError;
+$pod-status-evicted-color: var(--colorError);
-$pod-status-succeeded-color: $colorSuccess;
+$pod-status-succeeded-color: var(--colorSuccess);
-$pod-status-failed-color: $colorError;
+$pod-status-failed-color: var(--colorError);
-$pod-status-terminated-color: $colorTerminated;
+$pod-status-terminated-color: var(--colorTerminated);
-$pod-status-terminating-color: $colorTerminated;
+$pod-status-terminating-color: var(--colorTerminated);
-$pod-status-unknown-color: $colorVague;
+$pod-status-unknown-color: var(--colorVague);
-$pod-status-complete-color: $colorSuccess;
+$pod-status-complete-color: var(--colorSuccess);
-$pod-status-crash-loop-color: $colorError;
+$pod-status-crash-loop-color: var(--colorError);
-$pod-scheduled: $colorOk;
+$pod-scheduled: var(--colorOk);
-$pod-ready: $colorOk;
+$pod-ready: var(--colorOk);
-$pod-initialized: $colorOk;
+$pod-initialized: var(--colorOk);
-$pod-unschedulable: $colorError;
+$pod-unschedulable: var(--colorError);
-$pod-containers-ready: $colorInfo;
+$pod-containers-ready: var(--colorInfo);
-$pod-error: $colorError;
+$pod-error: var(--colorError);
-$pod-container-creating: $colorInfo;
+$pod-container-creating: var(--colorInfo);
 
 // Deployments
-$deployment-available: $colorOk;
+$deployment-available: var(--colorOk);
-$deployment-progressing: $colorInfo;
+$deployment-progressing: var(--colorInfo);
-$deployment-replicafailure: $colorError;
+$deployment-replicafailure: var(--colorError);
 
 // Jobs
-$job-complete: $colorSuccess;
+$job-complete: var(--colorSuccess);
-$job-failed: $colorError;
+$job-failed: var(--colorError);
 
 // Cronjob
-$cronjob-scheduled: $colorSuccess;
+$cronjob-scheduled: var(--colorSuccess);
-$cronjob-suspended: $colorTerminated;
+$cronjob-suspended: var(--colorTerminated);
 
 // Pod Statuses
 $pod-status-color-list: (

src/renderer/components/add-remove-buttons/add-remove-buttons.scss

@@ -29,8 +29,8 @@
 
   .Button {
     &.remove-button {
-      background-color: $borderFaintColor;
+      background-color: var(--borderFaintColor);
-      color: $textColorPrimary;
+      color: var(--textColorPrimary);
     }
   }
 }

src/renderer/components/app.scss

@@ -22,6 +22,7 @@
 @import "tailwindcss/utilities";
 @import "~flex.box";
 @import "fonts";
+@import "../themes/theme-vars";
 
 :root {
   --unit: 8px;
@@ -67,18 +68,18 @@
 }
 
 ::selection {
-  background: $primary;
+  background: var(--primary);
   color: white;
 }
 
 *:target {
-  color: $textColorAccent;
+  color: var(--textColorAccent);
 }
 
 html {
   font-size: 62.5%; // 1 rem == 10px
-  color: $textColorPrimary;
+  color: var(--textColorPrimary);
-  background-color: $mainBackground;
+  background-color: var(--mainBackground);
   --flex-gap: #{$padding};
 }
 
@@ -118,7 +119,7 @@ fieldset {
 }
 
 label {
-  color: $textColorSecondary;
+  color: var(--textColorSecondary);
 }
 
 ol, ul {
@@ -127,7 +128,7 @@ ol, ul {
 }
 
 h1 {
-  color: $textColorPrimary;
+  color: var(--textColorPrimary);
   font-size: 28px;
   font-weight: normal;
   letter-spacing: -.010em;
@@ -198,27 +199,27 @@ a {
 
 // colors
 .success {
-  color: $colorSuccess;
+  color: var(--colorSuccess);
 }
 
 .info {
-  color: $colorInfo;
+  color: var(--colorInfo);
 }
 
 .error {
-  color: $colorError;
+  color: var(--colorError);
 }
 
 .warning {
-  color: $colorWarning;
+  color: var(--colorWarning);
 }
 
 .contrast {
-  color: $textColorAccent;
+  color: var(--textColorAccent);
 }
 
 .text-secondary {
-  color: $textColorSecondary;
+  color: var(--textColorSecondary);
 }
 
 .nobr {

src/renderer/components/button/button.scss

@@ -29,7 +29,7 @@
   text-decoration: none;
   cursor: pointer;
   border-radius: $radius;
-  background: $buttonDefaultBackground;
+  background: var(--buttonDefaultBackground);
   padding: round($padding * .9) $padding * 1.5;
   flex-shrink: 0;
   line-height: 1;
@@ -41,15 +41,15 @@
   }
 
   &.primary {
-    background: $buttonPrimaryBackground;
+    background: var(--buttonPrimaryBackground);
   }
 
   &.accent {
-    background: $buttonAccentBackground;
+    background: var(--buttonAccentBackground);
   }
 
   &.light {
-    background-color: $buttonLightBackground;
+    background-color: var(--buttonLightBackground);
     color: #505050;
   }
 
@@ -65,7 +65,7 @@
 
     &.active,
     &:focus:not(:active) {
-      color: $buttonPrimaryBackground;
+      color: var(--buttonPrimaryBackground);
       box-shadow: 0 0 0 1px inset;
     }
   }

src/renderer/components/chart/chart.scss

@@ -35,7 +35,7 @@
       white-space: normal;
 
       &:hover {
-        background: $colorVague;
+        background: var(--colorVague);
         cursor: default;
       }
     }

src/renderer/components/checkbox/checkbox.scss

@@ -21,9 +21,9 @@
 
 
 .Checkbox {
-  --checkbox-color: #{$textColorPrimary}; // tick color [√]
+  --checkbox-color: var(--textColorPrimary); // tick color [√]
-  --checkbox-color-active: #{$contentColor};
+  --checkbox-color-active: var(--contentColor);
-  --checkbox-bgc-active: #{$lensBlue};
+  --checkbox-bgc-active: var(--blue);
 
   flex-shrink: 0;
 
@@ -32,7 +32,7 @@
       // default
     }
     &-light {
-      --checkbox-color-active: #{$lensBlue};
+      --checkbox-color-active: var(--blue);
       --checkbox-bgc-active: none;
     }
   }

src/renderer/components/cluster-manager/cluster-manager.scss

@@ -53,7 +53,7 @@
     right: 0;
     bottom: 0;
     display: flex;
-    background-color: $mainBackground;
+    background-color: var(--mainBackground);
 
     iframe {
       flex: 1;

src/renderer/components/confirm-dialog/confirm-dialog.scss

@@ -25,7 +25,7 @@
 
   &.warning {
     .Button.ok {
-      background: $colorSoftError;
+      background: var(--colorSoftError);
     }
   }
 
@@ -46,7 +46,7 @@
     > .Icon {
       margin-left: inherit;
       margin-right: $margin * 2;
-      color: $colorSoftError;
+      color: var(--colorSoftError);
     }
 
     > :not(.Icon) {

src/renderer/components/dock/dock.scss

@@ -20,10 +20,8 @@
  */
 
 .Dock {
-  $borderColor: $borderColor;
-
   position: relative;
-  background: $dockHeadBackground;
+  background: var(--dockHeadBackground);
   display: flex;
   flex-direction: column;
 
@@ -62,7 +60,7 @@
 
   .tabs-container {
     padding: 0 $padding * 2;
-    border-top: 1px solid $borderColor;
+    border-top: 1px solid var(--borderColor);
     flex-shrink: 0;
 
     .Tabs:empty + .toolbar {
@@ -78,7 +76,7 @@
 
   .tab-content {
     position: relative;
-    background: $terminalBackground;
+    background: var(--terminalBackground);
     flex: 1;
     overflow: hidden;
     transition: flex-basis 25ms ease-in;

src/renderer/components/dock/log-controls.scss

@@ -22,6 +22,6 @@
 .LogControls {
   @include hidden-scrollbar;
 
-  background: $dockInfoBackground;
+  background: var(--dockInfoBackground);
   padding: $padding $padding * 2;
 }

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;
+  background: var(--contentColor);
-  box-shadow: 0 0 $unit * 2 $boxShadow;
+  box-shadow: 0 0 $unit * 2 var(--boxShadow);
   z-index: $zIndex-drawer;
   height: 100%;
 
@@ -67,8 +67,8 @@
   }
 
   .drawer-title {
-    background: $lensBlue;
+    background: var(--blue);
-    color: $drawerTitleText;
+    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);
     }
   }
 

src/renderer/components/editable-list/editable-list.scss

@@ -25,7 +25,7 @@
   .el-contents {
     display: flex;
     background-color: var(--colorVague);
-    color: $textColorSecondary;
+    color: var(--textColorSecondary);
     border-radius: $radius;
     flex-direction: column;
 

src/renderer/components/error-boundary/error-boundary.scss

@@ -38,10 +38,10 @@
 
   code {
     max-height: none;
-    border: 5px solid $borderFaintColor;
+    border: 5px solid var(--borderFaintColor);
     white-space: pre-wrap;
-    background: $contentColor;
+    background: var(--contentColor);
-    color: $textColorSecondary;
+    color: var(--textColorSecondary);
   }
 
   a {

src/renderer/components/hotbar/hotbar-menu.scss

@@ -24,7 +24,7 @@
 
   position: relative;
   text-align: center;
-  background: $clusterMenuBackground;
+  background: var(--clusterMenuBackground);
   padding-top: 1px;
   width: var(--hotbar-width);
   overflow: hidden;

src/renderer/components/icon/icon.scss

@@ -24,9 +24,9 @@
   --small-size: 18px;
   --smallest-size: 16px;
   --big-size: 32px;
-  --color-active: #{$iconActiveColor};
+  --color-active: var(--iconActiveColor);
-  --bgc-active: #{$iconActiveBackground};
+  --bgc-active: var(--iconActiveBackground);
-  --focus-color: var(--icon-focus-color, #{$lensBlue});
+  --focus-color: var(--icon-focus-color, var(--blue));
 
   display: inline-flex;
   flex-shrink: 0;
@@ -119,8 +119,8 @@
   }
 
   &.sticker {
-    background: $colorOk;
+    background: var(--colorOk);
-    color: $textColorAccent;
+    color: var(--textColorAccent);
     border-radius: 50%;
     box-sizing: content-box;
     padding: $padding * 0.5;
@@ -128,8 +128,8 @@
 
   &.active {
     color: var(--color-active);
-    box-shadow: 0 0 0 2px $iconActiveBackground;
+    box-shadow: 0 0 0 2px var(--iconActiveBackground);
-    background-color: $iconActiveBackground;
+    background-color: var(--iconActiveBackground);
   }
 
   &.interactive {
@@ -144,7 +144,7 @@
         box-shadow: none;
 
         &.active {
-          box-shadow: 0 0 0 2px $iconActiveBackground;
+          box-shadow: 0 0 0 2px var(--iconActiveBackground);
         }
       }
     }

src/renderer/components/input/drop-file-input.scss

@@ -21,7 +21,7 @@
 
 .DropFileInput {
   &.droppable {
-    box-shadow: inset 0 0 0 6px $primary;
+    box-shadow: inset 0 0 0 6px var(--primary);
     transition: all 0.3s;
   }
 }

src/renderer/components/input/input.scss

@@ -27,7 +27,7 @@
   &.invalid.dirty:not(.validating) {
     label:after {
       width: 100%;
-      background: $colorError;
+      background: var(--colorError);
     }
   }
 
@@ -48,7 +48,7 @@
     --flex-gap: $padding * 0.6667;
     position: relative;
     padding: $padding * 0.75 0;
-    border-bottom: 1px solid $halfGray;
+    border-bottom: 1px solid var(--halfGray);
     line-height: 1;
 
     &:after {
@@ -59,7 +59,7 @@
       transform: translateX(-50%);
       width: 0;
       height: 2px;
-      background: $primary;
+      background: var(--primary);
     }
   }
 
@@ -115,17 +115,17 @@
     &.round {
       &.invalid.dirty {
         label {
-          border-color: $colorSoftError;
+          border-color: var(--colorSoftError);
         }
       }
       label {
         border-radius: $radius;
-        border: 1px solid $halfGray;
+        border: 1px solid var(--halfGray);
         color: inherit;
         padding: $padding * 0.25 * 3 $padding * 0.25 * 3;
 
         &:focus-within {
-          border-color: $colorInfo;
+          border-color: var(--colorInfo);
         }
 
         &:after {
@@ -145,7 +145,7 @@
           }
 
           &:focus-within {
-            border-color: $colorInfo;
+            border-color: var(--colorInfo);
           }
         }
       }
@@ -154,7 +154,7 @@
 }
 
 .Tooltip.InputTooltipError {
-  --bgc: #{$colorError};
+  --bgc: var(--colorError);
   --border: none;
   --color: white;
 }

src/renderer/components/item-object-list/item-list-layout.scss

@@ -20,7 +20,7 @@
  */
 
 .ItemListLayout {
-  background: $contentColor;
+  background: var(--contentColor);
   height: 100%;
 
   > .header {

src/renderer/components/item-object-list/page-filters-list.scss

@@ -20,12 +20,12 @@
  */
 
 .PageFiltersList {
-  $bgc: $filterAreaBackground;
+  $bgc: var(--filterAreaBackground);
   $spacing: $padding * 1.5;
 
   position: relative;
   top: 1px;
-  border-top: 1px solid $borderFaintColor;
+  border-top: 1px solid var(--borderFaintColor);
   background: $bgc;
   padding: $spacing $padding * 2;
   font-size: $font-size-small;
@@ -36,7 +36,7 @@
   }
 
   &:not(:empty) {
-    border-bottom: 1px solid $borderFaintColor;
+    border-bottom: 1px solid var(--borderFaintColor);
   }
 
   > .header {

src/renderer/components/kube-object-status-icon/kube-object-status-icon.scss

@@ -21,7 +21,7 @@
 
 .KubeObjectStatusIcon {
   &.warning {
-    color: $golden;
+    color: var(--golden);
   }
 }
 
@@ -32,7 +32,7 @@
     padding: 4px;
 
     &:not(:only-child):not(:last-child) {
-      border-bottom: 1px solid $borderFaintColor;
+      border-bottom: 1px solid var(--borderFaintColor);
     }
 
     .title {
@@ -47,7 +47,7 @@
     }
 
     .age {
-      color: $halfGray;
+      color: var(--halfGray);
     }
   }
 }

src/renderer/components/layout/sidebar-item.scss

@@ -42,8 +42,8 @@
     }
 
     &.active, &:hover {
-      background: $lensBlue;
+      background: var(--blue);
-      color: $sidebarActiveColor;
+      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 {

src/renderer/components/line-progress/line-progress.scss

@@ -23,7 +23,7 @@
 .LineProgress {
   position: relative;
   border-radius: 2px;
-  background: $lineProgressBackground;
+  background: var(--lineProgressBackground);
   height: 3px;
 
   // line indicator

src/renderer/components/markdown-viewer/markdown-viewer.scss

@@ -377,15 +377,15 @@
     height: 0.25em;
     padding: 0;
     margin: 24px 0;
-    background-color: $helmDescriptionHr;
+    background-color: var(--helmDescriptionHr);
     border: 0;
   }
 
   blockquote {
     padding: 8px 1em;
-    color: $helmDescriptionBlockquoteColor;
+    color: var(--helmDescriptionBlockquoteColor);
-    border-left: 0.25em solid $helmDescriptionBlockquoteBorder;
+    border-left: 0.25em solid var(--helmDescriptionBlockquoteBorder);
-    background: $helmDescriptionBlockquoteBackground;
+    background: var(--helmDescriptionBlockquoteBackground);
   }
 
   blockquote > :first-child {
@@ -455,20 +455,20 @@
     padding-bottom: 0.3em;
     font-size: 1.8em;
     font-weight: normal;
-    border-bottom: 1px solid $borderFaintColor;
+    border-bottom: 1px solid var(--borderFaintColor);
   }
 
   h2 {
     padding-bottom: 0.3em;
     font-size: 1.3em;
     font-weight: normal;
-    border-bottom: 1px solid $borderFaintColor;
+    border-bottom: 1px solid var(--borderFaintColor);
   }
 
   h3 {
     font-size: 1.1em;
     font-weight: normal;
-    border-bottom: 1px solid $borderFaintColor;
+    border-bottom: 1px solid var(--borderFaintColor);
     padding-bottom: 0.4em;
   }
 
@@ -482,7 +482,7 @@
 
   h6 {
     font-size: 0.85em;
-    color: $helmDescriptionH6;
+    color: var(--helmDescriptionH6);
   }
 
   ul,
@@ -542,7 +542,7 @@
 
   th, td {
     padding: 6px 13px;
-    border: 1px solid $helmDescriptionTdBorder;
+    border: 1px solid var(--helmDescriptionTdBorder);
     text-align: left;
     word-break: break-all;
     hyphens: auto;
@@ -553,29 +553,29 @@
   }
 
   table tr {
-    background-color: $tableBgcStripe;
+    background-color: var(--tableBgcStripe);
   }
 
   table tr:nth-child(2n) {
-    background-color: $tableBgcSelected;
+    background-color: var(--tableBgcSelected);
   }
 
   img {
     max-width: 100%;
     box-sizing: content-box;
-    background-color: $mainBackground;
+    background-color: var(--mainBackground);
   }
 
   code {
     padding: .15em .35em;
     margin: 0;
     font-size: 85%;
-    background-color: $helmDescriptionCodeBackground;
+    background-color: var(--helmDescriptionCodeBackground);
     border-radius: 3px;
     white-space: normal;
     display: inline-block;
     vertical-align: middle;
-    color: $helmDescriptionPreColor;
+    color: var(--helmDescriptionPreColor);
   }
 
   pre > code {
@@ -602,7 +602,7 @@
     padding: 16px;
     font-size: 85%;
     line-height: 1.45;
-    background-color: $helmDescriptionPreBackground;
+    background-color: var(--helmDescriptionPreBackground);
     border-radius: 3px;
     overflow: auto;
   }
@@ -617,7 +617,7 @@
     word-wrap: normal;
     background-color: transparent;
     border: 0;
-    color: $helmDescriptionPreColor;
+    color: var(--helmDescriptionPreColor);
   }
 
   pre code::before,

src/renderer/components/menu/menu-actions.scss

@@ -31,7 +31,7 @@
     margin-right: var(--flex-gap) !important;
 
     .Icon {
-      color: $textColorAccent;
+      color: var(--textColorAccent);
       padding-right: 0;
     }
 

src/renderer/components/menu/menu.scss

@@ -20,14 +20,14 @@
  */
 
 .Menu {
-  --bgc: #{$layoutBackground};
+  --bgc: var(--layoutBackground);
 
   position: absolute;
   display: flex;
   flex-direction: column;
   background: var(--bgc);
   list-style: none;
-  border: 1px solid $borderColor;
+  border: 1px solid var(--borderColor);
   z-index: 101;
   box-shadow: rgba(0,0,0,0.24) 0px 8px 16px 0px;
   border-radius: 4px;
@@ -63,9 +63,9 @@
 }
 
 .MenuItem {
-  --color: #{$textColorPrimary};
+  --color: var(--textColorPrimary);
-  --color-active: #{$textColorAccent};
+  --color-active: var(--textColorAccent);
-  --bgc-active: #{$menuActiveBackground};
+  --bgc-active: var(--menuActiveBackground);
   --spacing: #{$padding};
 
   position: relative;
@@ -85,7 +85,7 @@
   }
 
   &:focus {
-    outline: 2px solid $colorInfo;
+    outline: 2px solid var(--colorInfo);
   }
 
   &.active {
@@ -103,7 +103,7 @@
     padding: 0;
     height: 0;
     overflow: hidden;
-    border-top: 1px solid $contentColor;
+    border-top: 1px solid var(--contentColor);
     pointer-events: none;
   }
 

src/renderer/components/mixins.scss

@@ -50,7 +50,7 @@
   }
 }
 
-@mixin pseudo-link($color: $primary) {
+@mixin pseudo-link($color: var(--primary)) {
   color: $color;
   text-decoration: underline;
   cursor: pointer;

src/renderer/components/notifications/notifications.scss

@@ -56,11 +56,11 @@
       }
     }
 
-    @each $status, $color in (ok: $colorOk, error: $colorError, info: $colorInfo) {
+    @each $status, $color in (ok: var(--colorOk), error: var(--colorError), info: var(--colorInfo)) {
       &.#{$status} {
         background: $color;
         color: $color-white;
-        box-shadow: 0 0 20px $boxShadow;
+        box-shadow: 0 0 20px var(--boxShadow);
       }
     }
 

src/renderer/components/radio/radio.scss

@@ -30,7 +30,7 @@
 
     .Radio {
       display: inline-block;
-      border: 1px solid $borderFaintColor;
+      border: 1px solid var(--borderFaintColor);
       border-radius: $radius;
       text-align: center;
       padding: round($padding * .7) $padding;
@@ -41,21 +41,21 @@
         cursor: pointer;
         &:not(:active):focus {
           position: relative;
-          border-color: $primary;
+          border-color: var(--primary);
-          box-shadow: inset 0 0 0 1px $primary;
+          box-shadow: inset 0 0 0 1px var(--primary);
         }
       }
 
       &.checked {
-        background-color: $radioActiveBackground;
+        background-color: var(--radioActiveBackground);
-        color: $textColorAccent;
+        color: var(--textColorAccent);
         * {
           cursor: default;
         }
       }
 
       &:hover {
-        color: $textColorAccent
+        color: var(--textColorAccent)
       }
 
       + .Radio {
@@ -76,9 +76,9 @@
 .Radio {
   $tickSize: round(1.8 * $unit);
   $tickColor: currentColor;
-  $tickColorActive: $colorInfo;
+  $tickColorActive: var(--colorInfo);
-  $tickColorFocus: $colorInfo;
+  $tickColorFocus: var(--colorInfo);
-  $labelColorActive: $textColorAccent;
+  $labelColorActive: var(--textColorAccent);
 
   input[type="radio"] {
     display: none;

src/renderer/components/select/select.scss

@@ -23,13 +23,13 @@
 // Docs: https://react-select.com/styles
 
 html {
-  $menuBackgroundColor: $contentColor;
+  $menuBackgroundColor: var(--contentColor);
 
   --select-menu-bgc: #{$menuBackgroundColor};
-  --select-menu-border-color: #{$halfGray};
+  --select-menu-border-color: var(--halfGray);
-  --select-option-selected-color: #{$inputOptionHoverColor};
+  --select-option-selected-color: var(--inputOptionHoverColor);
-  --select-option-focused-bgc: #{$colorInfo};
+  --select-option-focused-bgc: var(--colorInfo);
-  --select-option-focused-color: #{$textColorAccent};
+  --select-option-focused-color: var(--textColorAccent);
 
   .Select {
     position: relative;
@@ -50,12 +50,12 @@ html {
       border-radius: $radius;
       background: var(--select-menu-bgc);
       min-height: 0;
-      box-shadow: 0 0 0 1px $halfGray;
+      box-shadow: 0 0 0 1px var(--halfGray);
       cursor: pointer;
       line-height: 1;
 
       &--is-focused {
-        box-shadow: 0 0 0 1px $primary;
+        box-shadow: 0 0 0 1px var(--primary);
       }
     }
 
@@ -110,7 +110,7 @@ html {
       cursor: pointer;
 
       &:active {
-        background: $primary;
+        background: var(--primary);
       }
 
       &--is-selected {
@@ -144,14 +144,14 @@ html {
     }
 
     &__multi-value {
-      background: $layoutBackground;
+      background: var(--layoutBackground);
 
       &__remove {
         background: inherit;
 
         &:hover {
-          background: $colorError;
+          background: var(--colorError);
-          color: $textColorAccent;
+          color: var(--textColorAccent);
         }
       }
     }
@@ -166,12 +166,12 @@ html {
   .Select, .Select__menu {
     &.theme-light {
       --select-menu-bgc: white;
-      --select-option-selected-color: $textColorSecondary;
+      --select-option-selected-color: var(--textColorSecondary);
 
       .Select {
         &__multi-value {
           background: none;
-          box-shadow: 0 0 0 1px $textColorSecondary;
+          box-shadow: 0 0 0 1px var(--textColorSecondary);
         }
 
         &__option {
@@ -196,8 +196,8 @@ html {
 
     &.theme-outlined {
       .Select__control {
-        box-shadow: 0 0 0 1px $colorVague;
+        box-shadow: 0 0 0 1px var(--colorVague);
-        color: $primary;
+        color: var(--primary);
 
         .Select__value-container {
           padding: 0 $padding * 0.5;
@@ -219,7 +219,7 @@ html {
 
       :focus-within {
         &.Select__control {
-          box-shadow: 0 0 0 1px $colorInfo;
+          box-shadow: 0 0 0 1px var(--colorInfo);
         }
       }
 

src/renderer/components/slider/slider.scss

@@ -21,18 +21,18 @@
 
 .Slider {
   .track {
-    background: $lensBlue;
+    background: var(--blue);
   }
 
   .thumb {
-    background: $lensBlue;
+    background: var(--blue);
 
     &.activated, &.jumped, &.focused {
-      box-shadow: 0 0 0 $unit * 2 rgba($lensBlue, 0.16)!important;
+      box-shadow: 0 0 0 #{$unit * 2} var(--blue) !important;
     }
 
     &:hover{
-      box-shadow: 0 0 0 $unit rgba($lensBlue, 0.16);
+      box-shadow: 0 0 0 $unit var(--blue);
     }
   }
 }

src/renderer/components/spinner/spinner.scss

@@ -43,7 +43,7 @@
   }
 
   &.singleColor {
-    @include spinner-color($textColorPrimary);
+    @include spinner-color(var(--textColorPrimary));
     animation: $rotateAnimation;
   }
 

src/renderer/components/status-brick/status-brick.scss

@@ -26,7 +26,7 @@
   width: $brickSize;
   height: $brickSize;
   margin-right: $margin;
-  background: $colorOk;
+  background: var(--colorOk);
   border-radius: 2px;
 
   &:last-child {

src/renderer/components/stepper/stepper.scss

@@ -21,8 +21,8 @@
 
 
 .Stepper {
-  --stepper-color: $contentColor;
+  --stepper-color: var(--contentColor);
-  --stepper-color-text: $textColorPrimary;
+  --stepper-color-text: var(--textColorPrimary);
   --stepper-color-active: var(--color-primary);
   --stepper-color-point: var(--stepper-color);
 
@@ -34,13 +34,13 @@
     text-align: center;
     &.active, &.done {
       .point {
-        color: $textColorAccent;
+        color: var(--textColorAccent);
         background: var(--stepper-color-active);
       }
     }
     &.active {
       .step-title {
-        color: $textColorAccent;
+        color: var(--textColorAccent);
       }
     }
     &.done > .line {

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;
+  background-color: var(--tableHeaderBackground);
-  border-bottom-width: $tableHeaderBorderWidth;
+  border-bottom-width: var(--tableHeaderBorderWidth);
   border-bottom-style: solid;
-  border-bottom-color: $tableHeaderBorderColor;
+  border-bottom-color: var(--tableHeaderBorderColor);
-  color: $tableHeaderColor;
+  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;
+        background-color: var(--tableBgcSelected);
-        color: $tableSelectedRowColor;
+        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);
       }
     }
   }

src/renderer/components/tabs/tabs.scss

@@ -26,7 +26,7 @@
   -moz-user-select: none; /* firefox */
 
   &.withBorder {
-    border-bottom: 1px solid $borderFaintColor;
+    border-bottom: 1px solid var(--borderFaintColor);
   }
 
   &.wrap {
@@ -49,8 +49,8 @@
 }
 
 .Tab {
-  --color-active: #{$layoutTabsActiveColor};
+  --color-active: var(--layoutTabsActiveColor);
-  --line-color-active: #{$primary};
+  --line-color-active: var(--primary);
   --line-color-focus: currentColor;
 
   position: relative;
@@ -74,7 +74,7 @@
       height: $unit * 0.5;
       transition: width 150ms;
       background: currentColor;
-      color: $halfGray
+      color: var(--halfGray)
     }
 
     &:focus {

src/renderer/components/tooltip/tooltip.scss

@@ -21,10 +21,10 @@
 
 
 .Tooltip {
-  --bgc: #{$mainBackground};
+  --bgc: var(--mainBackground);
   --radius: #{$radius};
-  --color: #{$textColorAccent};
+  --color: var(--textColorAccent);
-  --border: 1px solid #{$borderColor};
+  --border: 1px solid var(--borderColor);
 
   // use positioning relative to viewport (window)
   // https://developer.mozilla.org/en-US/docs/Web/CSS/position
@@ -74,7 +74,7 @@
     }
 
     &.warning {
-      color: $colorError;
+      color: var(--colorError);
     }
 
     &.tableView {
@@ -85,12 +85,12 @@
       }
 
       .title {
-        color: $textColorAccent;
+        color: var(--textColorAccent);
         text-align: center;
       }
 
       .name {
-        color: $textColorAccent;
+        color: var(--textColorAccent);
         text-align: right;
         flex: 0 0 35%;
       }

src/renderer/components/vars.scss

@@ -20,7 +20,6 @@
  */
 
 @import "colors", "media";
-@import "../themes/theme-vars";
 
 // Dimensions
 $unit: 8px;

src/renderer/components/wizard/wizard.scss

@@ -25,10 +25,10 @@
   --wizard-content-height: auto;
   --wizard-content-max-height: #{40 * $unit};
   --wizard-spacing: #{$padding * 3};
-  --wizard-step-bgc: #{$dialogBackground};
+  --wizard-step-bgc: var(--dialogBackground);
 
   width: var(--wizard-width);
-  color: $dialogTextColor;
+  color: var(--dialogTextColor);
 
   &.small {
     --wizard-width: #{45 * $unit};
@@ -45,7 +45,7 @@
   > .header {
     text-align: center;
     color: white;
-    background: $dialogHeaderBackground;
+    background: var(--dialogHeaderBackground);
     padding: var(--wizard-spacing);
     border-top-left-radius: $radius;
     border-top-right-radius: $radius;
@@ -95,7 +95,7 @@
     // buttons
     > :last-child {
       padding: var(--wizard-spacing);
-      background: $dialogFooterBackground;
+      background: var(--dialogFooterBackground);
       border-bottom-left-radius: $radius;
       border-bottom-right-radius: $radius;
 

src/renderer/port-forward/port-forward-dialog.scss

@@ -56,7 +56,7 @@
     }
 
     .warning {
-      color: $colorSoftError;
+      color: var(--colorSoftError);
       font-size: small;
       display: flex;
       align-items: center;

src/renderer/theme.store.ts

@@ -91,7 +91,7 @@ export class ThemeStore extends Singleton {
     if (!this.styles) {
       this.styles = document.createElement("style");
       this.styles.id = "lens-theme";
-      document.head.prepend(this.styles);
+      document.head.append(this.styles);
     }
     const cssVars = Object.entries(theme.colors).map(([cssName, color]) => {
       return `--${cssName}: ${color};`;

src/renderer/themes/lens-dark.json

@@ -23,6 +23,7 @@
     "layoutBackground": "#2e3136",
     "layoutTabsBackground": "#252729",
     "layoutTabsActiveColor": "#ffffff",
+    "layoutTabsLineColor": "#87909c80",
     "sidebarBackground": "#36393e",
     "sidebarLogoBackground": "#414448",
     "sidebarActiveColor": "#ffffff",
@@ -126,6 +127,7 @@
     "radioActiveBackground": "#36393e",
     "menuActiveBackground": "#36393e",
     "menuSelectedOptionBgc": "#36393e",
+    "canvasBackground": "#24292e",
     "scrollBarColor": "#5f6064",
     "settingsBackground": "#262b2e",
     "settingsColor": "#909ba6",

src/renderer/themes/lens-light.json

@@ -127,8 +127,8 @@
     "radioActiveBackground": "#f1f1f1",
     "menuActiveBackground": "#e8e8e8",
     "menuSelectedOptionBgc": "#e8e8e8",
-    "scrollBarColor": "#bbbbbb",
     "canvasBackground": "#24292e",
+    "scrollBarColor": "#bbbbbb",
     "settingsBackground": "#ffffff",
     "settingsColor": "#555555",
     "navSelectedBackground": "#ffffff",

src/renderer/themes/theme-vars.css

@@ -0,0 +1,138 @@
+
+/* 
+    Generated Lens theme CSS-variables, don't edit manually.
+    To refresh file run $: yarn run ts-node build/build_theme_vars.ts
+*/
+
+:root {
+--blue: #3d90ce;
+--magenta: #c93dce;
+--golden: #ffc63d;
+--halfGray: #87909c80;
+--primary: #3d90ce;
+--textColorPrimary: #8e9297;
+--textColorSecondary: #a0a0a0;
+--textColorTertiary: #909ba6;
+--textColorAccent: #ffffff;
+--textColorDimmed: #8e92978c;
+--borderColor: #4c5053;
+--borderFaintColor: #373a3e;
+--mainBackground: #1e2124;
+--secondaryBackground: #1e2125;
+--contentColor: #262b2f;
+--layoutBackground: #2e3136;
+--layoutTabsBackground: #252729;
+--layoutTabsActiveColor: #ffffff;
+--layoutTabsLineColor: #87909c80;
+--sidebarBackground: #36393e;
+--sidebarLogoBackground: #414448;
+--sidebarActiveColor: #ffffff;
+--sidebarSubmenuActiveColor: #ffffff;
+--sidebarItemHoverBackground: #3a3e44;
+--buttonPrimaryBackground: #3d90ce;
+--buttonDefaultBackground: #414448;
+--buttonLightBackground: #f1f1f1;
+--buttonAccentBackground: #e85555;
+--buttonDisabledBackground: #808080;
+--tableBgcStripe: #2a2d33;
+--tableBgcSelected: #383c42;
+--tableHeaderBackground: #262b2f;
+--tableHeaderBorderWidth: 1px;
+--tableHeaderBorderColor: #36393e;
+--tableHeaderColor: #ffffff;
+--tableSelectedRowColor: #ffffff;
+--helmLogoBackground: #ffffff;
+--helmImgBackground: #414448;
+--helmStableRepo: #3d90ce;
+--helmIncubatorRepo: #ff7043;
+--helmDescriptionHr: #41474a;
+--helmDescriptionBlockquoteColor: #bbb;
+--helmDescriptionBlockquoteBorder: #8a8f93;
+--helmDescriptionBlockquoteBackground: #3b4348;
+--helmDescriptionHeaders: #3e4147;
+--helmDescriptionH6: #6a737d;
+--helmDescriptionTdBorder: #47494a;
+--helmDescriptionTrBackground: #1c2125;
+--helmDescriptionCodeBackground: #ffffff1a;
+--helmDescriptionPreBackground: #1b1f21;
+--helmDescriptionPreColor: #b4b5b4;
+--colorSuccess: #43a047;
+--colorOk: #4caf50;
+--colorInfo: #3d90ce;
+--colorError: #ce3933;
+--colorSoftError: #e85555;
+--colorWarning: #ff9800;
+--colorVague: #36393e;
+--colorTerminated: #4c5053;
+--dockHeadBackground: #2e3136;
+--dockInfoBackground: #1e2125;
+--dockInfoBorderColor: #303136;
+--dockEditorBackground: #000000;
+--dockEditorTag: #8e97a3;
+--dockEditorKeyword: #ffffff;
+--dockEditorComment: #808080;
+--dockEditorActiveLineBackground: #3a3d41;
+--dockBadgeBackground: #36393e;
+--logsBackground: #000000;
+--logsForeground: #ffffff;
+--logRowHoverBackground: #35373a;
+--terminalBackground: #000000;
+--terminalForeground: #ffffff;
+--terminalCursor: #ffffff;
+--terminalCursorAccent: #000000;
+--terminalSelection: #ffffff77;
+--terminalBlack: #2e3436;
+--terminalRed: #cc0000;
+--terminalGreen: #4e9a06;
+--terminalYellow: #c4a000;
+--terminalBlue: #3465a4;
+--terminalMagenta: #75507b;
+--terminalCyan: #06989a;
+--terminalWhite: #d3d7cf;
+--terminalBrightBlack: #555753;
+--terminalBrightRed: #ef2929;
+--terminalBrightGreen: #8ae234;
+--terminalBrightYellow: #fce94f;
+--terminalBrightBlue: #729fcf;
+--terminalBrightMagenta: #ad7fa8;
+--terminalBrightCyan: #34e2e2;
+--terminalBrightWhite: #eeeeec;
+--dialogTextColor: #87909c;
+--dialogBackground: #ffffff;
+--dialogHeaderBackground: #36393e;
+--dialogFooterBackground: #f4f4f4;
+--drawerTogglerBackground: #2f343a;
+--drawerTitleText: #ffffff;
+--drawerSubtitleBackground: #373a3e;
+--drawerItemNameColor: #87909c;
+--drawerItemValueColor: #a0a0a0;
+--clusterMenuBackground: #252729;
+--clusterMenuBorderColor: #252729;
+--clusterMenuCellBackground: #2e3136;
+--clusterSettingsBackground: #1e2124;
+--addClusterIconColor: #252729;
+--boxShadow: #0000003a;
+--iconActiveColor: #ffffff;
+--iconActiveBackground: #ffffff18;
+--filterAreaBackground: #23272b;
+--chartLiveBarBackground: #00000033;
+--chartStripesColor: #ffffff08;
+--chartCapacityColor: #4c545f;
+--pieChartDefaultColor: #30353a;
+--inputOptionHoverColor: #87909c;
+--inputControlBackground: #1e2125;
+--inputControlBorder: #414448;
+--inputControlHoverBorder: #474a4f;
+--lineProgressBackground: #414448;
+--radioActiveBackground: #36393e;
+--menuActiveBackground: #36393e;
+--menuSelectedOptionBgc: #36393e;
+--canvasBackground: #24292e;
+--scrollBarColor: #5f6064;
+--settingsBackground: #262b2e;
+--settingsColor: #909ba6;
+--navSelectedBackground: #262b2e;
+--navHoverColor: #dcddde;
+--hrColor: #ffffff0f;
+--tooltipBackground: #18191c;
+}

src/renderer/themes/theme-vars.scss

@@ -1,156 +0,0 @@
-/**
- * Copyright (c) 2021 OpenLens Authors
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of
- * this software and associated documentation files (the "Software"), to deal in
- * the Software without restriction, including without limitation the rights to
- * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
- * the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
- * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
- * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
- * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
-// Base colors
-$lensBlue: var(--blue);
-$lensMagenta: var(--magenta);
-$golden: var(--golden);
-$halfGray: var(--halfGray);
-$primary: var(--primary);
-$textColorPrimary: var(--textColorPrimary);
-$textColorSecondary: var(--textColorSecondary);
-$textColorAccent: var(--textColorAccent);
-$borderColor: var(--borderColor);
-$borderFaintColor: var(--borderFaintColor);
-$colorSuccess: var(--colorSuccess);
-$colorOk: var(--colorOk);
-$colorInfo: var(--colorInfo);
-$colorError: var(--colorError);
-$colorSoftError: var(--colorSoftError);
-$colorWarning: var(--colorWarning);
-$colorVague: var(--colorVague);
-$colorTerminated: var(--colorTerminated);
-
-// Layout
-$mainBackground: var(--mainBackground);
-$contentColor: var(--contentColor);
-$layoutBackground: var(--layoutBackground);
-$layoutTabsBackground: var(--layoutTabsBackground);
-$layoutTabsActiveColor: var(--layoutTabsActiveColor);
-
-// Sidebar
-$sidebarLogoBackground: var(--sidebarLogoBackground);
-$sidebarActiveColor: var(--sidebarActiveColor);
-$sidebarSubmenuActiveColor: var(--sidebarSubmenuActiveColor);
-$sidebarBackground: var(--sidebarBackground);
-
-// Elements
-$buttonPrimaryBackground: var(--buttonPrimaryBackground);
-$buttonDefaultBackground: var(--buttonDefaultBackground);
-$buttonLightBackground: var(--buttonLightBackground);
-$buttonAccentBackground: var(--buttonAccentBackground);
-$buttonDisabledBackground: var(--buttonDisabledBackground);
-
-// Tables
-$tableBgcStripe: var(--tableBgcStripe);
-$tableBgcSelected: var(--tableBgcSelected);
-$tableHeaderBackground: var(--tableHeaderBackground);
-$tableHeaderBorderWidth: var(--tableHeaderBorderWidth);
-$tableHeaderBorderColor: var(--tableHeaderBorderColor);
-$tableHeaderColor: var(--tableHeaderColor);
-$tableSelectedRowColor: var(--tableSelectedRowColor);
-
-// Helm
-$helmLogoBackground: var(--helmLogoBackground);
-$helmImgBackground: var(--helmImgBackground);
-$helmStableRepo: var(--helmStableRepo);
-$helmIncubatorRepo: var(--helmIncubatorRepo);
-$helmDescriptionHr: var(--helmDescriptionHr);
-$helmDescriptionBlockquoteColor: var(--helmDescriptionBlockquoteColor);
-$helmDescriptionBlockquoteBorder: var(--helmDescriptionBlockquoteBorder);
-$helmDescriptionBlockquoteBackground: var(--helmDescriptionBlockquoteBackground);
-$helmDescriptionHeaders: var(--helmDescriptionHeaders);
-$helmDescriptionH6: var(--helmDescriptionH6);
-$helmDescriptionTdBorder: var(--helmDescriptionTdBorder);
-$helmDescriptionTrBackground: var(--helmDescriptionTrBackground);
-$helmDescriptionCodeBackground: var(--helmDescriptionCodeBackground);
-$helmDescriptionPreBackground: var(--helmDescriptionPreBackground);
-$helmDescriptionPreColor: var(--helmDescriptionPreColor);
-
-// Dock
-$dockHeadBackground: var(--dockHeadBackground);
-$dockInfoBackground: var(--dockInfoBackground);
-$dockInfoBorderColor: var(--dockInfoBorderColor);
-$dockBadgeBackground: var(--dockBadgeBackground);
-
-// Terminal
-$terminalBackground: var(--terminalBackground);
-$terminalForeground: var(--terminalForeground);
-$terminalCursor: var(--terminalCursor);
-$terminalCursorAccent: var(--terminalCursorAccent);
-$terminalSelection: var(--terminalSelection);
-$terminalBlack: var(--terminalBlack);
-$terminalRed: var(--terminalRed);
-$terminalGreen: var(--terminalGreen);
-$terminalYellow: var(--terminalYellow);
-$terminalBlue: var(--terminalBlue);
-$terminalMagenta: var(--terminalMagenta);
-$terminalCyan: var(--terminalCyan);
-$terminalWhite: var(--terminalWhite);
-$terminalBrightBlack: var(--terminalBrightBlack);
-$terminalBrightRed: var(--terminalBrightRed);
-$terminalBrightGreen: var(--terminalBrightGreen);
-$terminalBrightYellow: var(--terminalBrightYellow);
-$terminalBrightBlue: var(--terminalBrightBlue);
-$terminalBrightMagenta: var(--terminalBrightMagenta);
-$terminalBrightCyan: var(--terminalBrightCyan);
-$terminalBrightWhite: var(--terminalBrightWhite);
-
-// Logs
-$logsBackground: var(--logsBackground);
-$logRowHoverBackground: var(--logRowHoverBackground);
-
-// Dialogs
-$dialogTextColor: var(--dialogTextColor);
-$dialogBackground: var(--dialogBackground);
-$dialogHeaderBackground: var(--dialogHeaderBackground);
-$dialogFooterBackground: var(--dialogFooterBackground);
-
-// Drawer
-$drawerTogglerBackground: var(--drawerTogglerBackground);
-$drawerTitleText: var(--drawerTitleText);
-$drawerSubtitleBackground: var(--drawerSubtitleBackground);
-$drawerItemNameColor: var(--drawerItemNameColor);
-$drawerItemValueColor: var(--drawerItemValueColor);
-
-// Charts
-$chartLiveBarBackground: var(--chartLiveBarBackground);
-$chartStripesColor: var(--chartStripesColor);
-$chartCapacityColor: var(--chartCapacityColor);
-$pieChartDefaultColor: var(--pieChartDefaultColor);
-
-// Cluster Menu
-$clusterMenuBackground: var(--clusterMenuBackground);
-$clusterMenuBorderColor: var(--clusterMenuBorderColor);
-$clusterSettingsBackground: var(--clusterSettingsBackground);
-$addClusterIconColor: var(--addClusterIconColor);
-
-// Misc
-$boxShadow: var(--boxShadow);
-$iconActiveColor: var(--iconActiveColor);
-$iconActiveBackground: var(--iconActiveBackground);
-$filterAreaBackground: var(--filterAreaBackground);
-
-$inputOptionHoverColor: var(--inputOptionHoverColor);
-$lineProgressBackground: var(--lineProgressBackground);
-$radioActiveBackground: var(--radioActiveBackground);
-$menuActiveBackground: var(--menuActiveBackground);
-$menuSelectedOptionBgc: var(--menuSelectedOptionBgc);