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
2025-05-20 05:10:56 +00:00 · 2021-11-15 17:37:23 +02:00 · 2021-11-15 17:37:23 +02:00 · 4c83f5becf
commit 4c83f5becf
parent 3214d8dfd5
89 changed files with 463 additions and 433 deletions
--- a/build/build_theme_vars.ts
+++ b/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);
--- a/package.json
+++ b/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",
--- a/src/renderer/components/+apps-helm-charts/helm-chart-details.scss
+++ b/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 {
--- a/src/renderer/components/+apps-helm-charts/helm-charts.scss
+++ b/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);
      }
    }
  }
--- a/src/renderer/components/+apps-releases/release.mixins.scss
+++ b/src/renderer/components/+apps-releases/release.mixins.scss
@ -20,12 +20,12 @@
 */

 $release-status-color-list: (
-  deployed: $colorSuccess,
-  failed: $colorError,
-  deleting: $colorWarning,
-  pendingInstall: $colorInfo,
-  pendingUpgrade: $colorInfo,
-  pendingRollback: $colorInfo,
+  deployed: var(--colorSuccess),
+  failed: var(--colorError),
+  deleting: var(--colorWarning),
+  pendingInstall: var(--colorInfo),
+  pendingUpgrade: var(--colorInfo),
+  pendingRollback: var(--colorInfo),
 );

@mixin release-status-bgs {
--- a/src/renderer/components/+apps-releases/releases.scss
+++ b/src/renderer/components/+apps-releases/releases.scss
@ -32,7 +32,7 @@
        margin-left: $margin;

        &.new-version {
-          color: $colorInfo;
+          color: var(--colorInfo);
        }
      }
    }
--- a/src/renderer/components/+config-autoscalers/autoscaler.mixins.scss
+++ b/src/renderer/components/+config-autoscalers/autoscaler.mixins.scss
@ -20,9 +20,9 @@
 */

 $hpa-status-colors: (
-  abletoscale: $colorOk,
-  scalingactive: $colorInfo,
-  scalinglimited: $colorSoftError,
+  abletoscale: var(--colorOk),
+  scalingactive: var(--colorInfo),
+  scalinglimited: var(--colorSoftError),
 );

@mixin hpa-status-bgc {
--- a/src/renderer/components/+config-maps/config-map-details.scss
+++ b/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;
    }
--- a/src/renderer/components/+config-resource-quotas/add-quota-dialog.scss
+++ b/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 {
--- a/src/renderer/components/+config-resource-quotas/resource-quota-details.scss
+++ b/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);
      }
    }
  }
--- a/src/renderer/components/+config-secrets/secret-details.scss
+++ b/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;
    }
--- a/src/renderer/components/+custom-resources/crd-resource-details.scss
+++ b/src/renderer/components/+custom-resources/crd-resource-details.scss
@ -23,7 +23,7 @@
  .status {
    .ready {
      color: white;
-      background-color: $colorOk;
+      background-color: var(--colorOk);
    }
  }
 }
--- a/src/renderer/components/+custom-resources/crd.mixins.scss
+++ b/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,
-  NamesAccepted: $colorOk,
-  NonStructuralSchema: $colorError,
-  Terminating: $colorTerminated,
-  KubernetesAPIApprovalPolicyConformant: $colorWarning
+  Established: var(--colorSuccess),
+  NamesAccepted: var(--colorOk),
+  NonStructuralSchema: var(--colorError),
+  Terminating: var(--colorTerminated),
+  KubernetesAPIApprovalPolicyConformant: var(--colorWarning)
 );

@mixin crd-condition-bgc {
--- a/src/renderer/components/+events/event-details.scss
+++ b/src/renderer/components/+events/event-details.scss
@ -22,7 +22,7 @@
 .EventDetails {
  .type {
    .warning {
-      color: $colorError;
+      color: var(--colorError);
    }
  }
 }
--- a/src/renderer/components/+events/events.scss
+++ b/src/renderer/components/+events/events.scss
@ -26,7 +26,7 @@
        flex-grow: 3;

        &.warning {
-          color: $colorError;
+          color: var(--colorError);
        }
      }

--- a/src/renderer/components/+events/kube-event-details.scss
+++ b/src/renderer/components/+events/kube-event-details.scss
@ -34,7 +34,7 @@
      word-break: break-word;

      &.warning {
-        color: $colorError;
+        color: var(--colorError);
      }
    }
  }
--- a/src/renderer/components/+events/kube-event-icon.scss
+++ b/src/renderer/components/+events/kube-event-icon.scss
@ -21,7 +21,7 @@

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

--- a/src/renderer/components/+namespaces/namespaces-mixins.scss
+++ b/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);
  }
 }
--- a/src/renderer/components/+network-ingresses/ingress-details.scss
+++ b/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
--- a/src/renderer/components/+network-services/service-port-component.scss
+++ b/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;
  }
--- a/src/renderer/components/+network/network-mixins.scss
+++ b/src/renderer/components/+network/network-mixins.scss
@ -20,8 +20,8 @@
 */

 $service-status-color-list: (
-  active: $colorOk,
-  pending: $colorWarning
+  active: var(--colorOk),
+  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 {
--- a/src/renderer/components/+nodes/node-details.scss
+++ b/src/renderer/components/+nodes/node-details.scss
@ -20,8 +20,8 @@
 */

 .NodeDetails {
-  --status-ready-bg: #{$colorOk};
-  --status-default-bg: #{$colorError};
+  --status-ready-bg: var(--colorOk);
+  --status-default-bg: var(--colorError);

  .conditions {
    @include node-status-bgs;
--- a/src/renderer/components/+nodes/nodes-mixins.scss
+++ b/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 {
--- a/src/renderer/components/+nodes/nodes.scss
+++ b/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);
      }
    }

--- a/src/renderer/components/+storage/storage-mixins.scss
+++ b/src/renderer/components/+storage/storage-mixins.scss
@ -20,15 +20,15 @@
 */

 // PersistentVolumes
-$pv-bound: $colorOk;
-$pv-available: $colorSuccess;
-$pv-released: $colorWarning;
-$pv-failed: $colorError;
+$pv-bound: var(--colorOk);
+$pv-available: var(--colorSuccess);
+$pv-released: var(--colorWarning);
+$pv-failed: var(--colorError);

 // PersistentVolumeClaims
-$pvc-bound: $colorOk;
-$pvc-pending: $colorWarning;
-$pvc-lost: $colorError;
+$pvc-bound: var(--colorOk);
+$pvc-pending: var(--colorWarning);
+$pvc-lost: var(--colorError);

 // PersistentVolume Statuses
 $pv-status-color-list: (
--- a/src/renderer/components/+user-management/+cluster-roles/details.scss
+++ b/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;
    }
--- a/src/renderer/components/+user-management/+roles/details.scss
+++ b/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;
    }
--- a/src/renderer/components/+user-management/+service-accounts/secret.scss
+++ b/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 {
--- a/src/renderer/components/+workloads-cronjobs/cronjob-details.scss
+++ b/src/renderer/components/+workloads-cronjobs/cronjob-details.scss
@ -27,7 +27,7 @@
      margin-bottom: $margin;

      a {
-        color: $colorInfo;
+        color: var(--colorInfo);
      }
    }
  }
--- a/src/renderer/components/+workloads-deployments/deployment-scale-dialog.scss
+++ b/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;
--- a/src/renderer/components/+workloads-overview/overview-statuses.scss
+++ b/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);
        }
      }
    }
--- a/src/renderer/components/+workloads-pods/pod-container-env.scss
+++ b/src/renderer/components/+workloads-pods/pod-container-env.scss
@ -35,7 +35,7 @@
    }

    .var-name {
-      color: $textColorPrimary
+      color: var(--textColorPrimary)
    }
  }
 }
--- a/src/renderer/components/+workloads-pods/pod-container-port.scss
+++ b/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;
--- a/src/renderer/components/+workloads-pods/pod-details-container.scss
+++ b/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;
  }
--- a/src/renderer/components/+workloads-pods/pod-details-list.scss
+++ b/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);
      }
    }

--- a/src/renderer/components/+workloads-replicasets/replicaset-scale-dialog.scss
+++ b/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;
--- a/src/renderer/components/+workloads-statefulsets/statefulset-scale-dialog.scss
+++ b/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;
--- a/src/renderer/components/+workloads/workloads-mixins.scss
+++ b/src/renderer/components/+workloads/workloads-mixins.scss
@ -20,36 +20,36 @@
 */

 // Pods
-$pod-status-running-color: $colorOk;
-$pod-status-pending-color: $colorWarning;
-$pod-status-evicted-color: $colorError;
-$pod-status-succeeded-color: $colorSuccess;
-$pod-status-failed-color: $colorError;
-$pod-status-terminated-color: $colorTerminated;
-$pod-status-terminating-color: $colorTerminated;
-$pod-status-unknown-color: $colorVague;
-$pod-status-complete-color: $colorSuccess;
-$pod-status-crash-loop-color: $colorError;
-$pod-scheduled: $colorOk;
-$pod-ready: $colorOk;
-$pod-initialized: $colorOk;
-$pod-unschedulable: $colorError;
-$pod-containers-ready: $colorInfo;
-$pod-error: $colorError;
-$pod-container-creating: $colorInfo;
+$pod-status-running-color: var(--colorOk);
+$pod-status-pending-color: var(--colorWarning);
+$pod-status-evicted-color: var(--colorError);
+$pod-status-succeeded-color: var(--colorSuccess);
+$pod-status-failed-color: var(--colorError);
+$pod-status-terminated-color: var(--colorTerminated);
+$pod-status-terminating-color: var(--colorTerminated);
+$pod-status-unknown-color: var(--colorVague);
+$pod-status-complete-color: var(--colorSuccess);
+$pod-status-crash-loop-color: var(--colorError);
+$pod-scheduled: var(--colorOk);
+$pod-ready: var(--colorOk);
+$pod-initialized: var(--colorOk);
+$pod-unschedulable: var(--colorError);
+$pod-containers-ready: var(--colorInfo);
+$pod-error: var(--colorError);
+$pod-container-creating: var(--colorInfo);

 // Deployments
-$deployment-available: $colorOk;
-$deployment-progressing: $colorInfo;
-$deployment-replicafailure: $colorError;
+$deployment-available: var(--colorOk);
+$deployment-progressing: var(--colorInfo);
+$deployment-replicafailure: var(--colorError);

 // Jobs
-$job-complete: $colorSuccess;
-$job-failed: $colorError;
+$job-complete: var(--colorSuccess);
+$job-failed: var(--colorError);

 // Cronjob
-$cronjob-scheduled: $colorSuccess;
-$cronjob-suspended: $colorTerminated;
+$cronjob-scheduled: var(--colorSuccess);
+$cronjob-suspended: var(--colorTerminated);

 // Pod Statuses
 $pod-status-color-list: (
--- a/src/renderer/components/add-remove-buttons/add-remove-buttons.scss
+++ b/src/renderer/components/add-remove-buttons/add-remove-buttons.scss
@ -29,8 +29,8 @@

  .Button {
    &.remove-button {
-      background-color: $borderFaintColor;
-      color: $textColorPrimary;
+      background-color: var(--borderFaintColor);
+      color: var(--textColorPrimary);
    }
  }
 }
--- a/src/renderer/components/app.scss
+++ b/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;
-  background-color: $mainBackground;
+  color: var(--textColorPrimary);
+  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 {
--- a/src/renderer/components/button/button.scss
+++ b/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;
    }
  }
--- a/src/renderer/components/chart/chart.scss
+++ b/src/renderer/components/chart/chart.scss
@ -35,7 +35,7 @@
      white-space: normal;

      &:hover {
-        background: $colorVague;
+        background: var(--colorVague);
        cursor: default;
      }
    }
--- a/src/renderer/components/checkbox/checkbox.scss
+++ b/src/renderer/components/checkbox/checkbox.scss
@ -21,9 +21,9 @@


 .Checkbox {
-  --checkbox-color: #{$textColorPrimary}; // tick color [√]
-  --checkbox-color-active: #{$contentColor};
-  --checkbox-bgc-active: #{$lensBlue};
+  --checkbox-color: var(--textColorPrimary); // tick color [√]
+  --checkbox-color-active: var(--contentColor);
+  --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;
    }
  }
--- a/src/renderer/components/cluster-manager/cluster-manager.scss
+++ b/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;
--- a/src/renderer/components/confirm-dialog/confirm-dialog.scss
+++ b/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) {
--- a/src/renderer/components/dock/dock.scss
+++ b/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;
--- a/src/renderer/components/dock/log-controls.scss
+++ b/src/renderer/components/dock/log-controls.scss
@ -22,6 +22,6 @@
 .LogControls {
  @include hidden-scrollbar;

-  background: $dockInfoBackground;
+  background: var(--dockInfoBackground);
  padding: $padding $padding * 2;
 }
--- a/src/renderer/components/drawer/drawer-item.scss
+++ b/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);
    }
  }

--- a/src/renderer/components/drawer/drawer-param-toggler.scss
+++ b/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;
    }
  }
--- a/src/renderer/components/drawer/drawer-title.scss
+++ b/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);
 }
--- a/src/renderer/components/drawer/drawer.scss
+++ b/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);
    }
  }

--- a/src/renderer/components/editable-list/editable-list.scss
+++ b/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;

--- a/src/renderer/components/error-boundary/error-boundary.scss
+++ b/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;
-    color: $textColorSecondary;
+    background: var(--contentColor);
+    color: var(--textColorSecondary);
  }

  a {
--- a/src/renderer/components/hotbar/hotbar-menu.scss
+++ b/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;
--- a/src/renderer/components/icon/icon.scss
+++ b/src/renderer/components/icon/icon.scss
@ -24,9 +24,9 @@
  --small-size: 18px;
  --smallest-size: 16px;
  --big-size: 32px;
-  --color-active: #{$iconActiveColor};
-  --bgc-active: #{$iconActiveBackground};
-  --focus-color: var(--icon-focus-color, #{$lensBlue});
+  --color-active: var(--iconActiveColor);
+  --bgc-active: var(--iconActiveBackground);
+  --focus-color: var(--icon-focus-color, var(--blue));

  display: inline-flex;
  flex-shrink: 0;
@ -119,8 +119,8 @@
  }

  &.sticker {
-    background: $colorOk;
-    color: $textColorAccent;
+    background: var(--colorOk);
+    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;
-    background-color: $iconActiveBackground;
+    box-shadow: 0 0 0 2px var(--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);
        }
      }
    }
--- a/src/renderer/components/input/drop-file-input.scss
+++ b/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;
  }
 }
--- a/src/renderer/components/input/input.scss
+++ b/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;
 }
--- a/src/renderer/components/item-object-list/item-list-layout.scss
+++ b/src/renderer/components/item-object-list/item-list-layout.scss
@ -20,7 +20,7 @@
 */

 .ItemListLayout {
-  background: $contentColor;
+  background: var(--contentColor);
  height: 100%;

  > .header {
--- a/src/renderer/components/item-object-list/page-filters-list.scss
+++ b/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 {
--- a/src/renderer/components/kube-object-status-icon/kube-object-status-icon.scss
+++ b/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);
    }
  }
 }
--- a/src/renderer/components/layout/sidebar-item.scss
+++ b/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;
        }
      }
--- a/src/renderer/components/layout/sub-header.scss
+++ b/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);
  }
 }
--- a/src/renderer/components/layout/tab-layout.scss
+++ b/src/renderer/components/layout/tab-layout.scss
@ -26,7 +26,7 @@
  height: 100%;

  > .Tabs {
-    background: $layoutTabsBackground;
+    background: var(--layoutTabsBackground);
    min-height: 32px;
  }

--- a/src/renderer/components/layout/wizard-layout.scss
+++ b/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 {
--- a/src/renderer/components/line-progress/line-progress.scss
+++ b/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
--- a/src/renderer/components/markdown-viewer/markdown-viewer.scss
+++ b/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;
-    border-left: 0.25em solid $helmDescriptionBlockquoteBorder;
-    background: $helmDescriptionBlockquoteBackground;
+    color: var(--helmDescriptionBlockquoteColor);
+    border-left: 0.25em solid var(--helmDescriptionBlockquoteBorder);
+    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,
--- a/src/renderer/components/menu/menu-actions.scss
+++ b/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;
    }

--- a/src/renderer/components/menu/menu.scss
+++ b/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-active: #{$textColorAccent};
-  --bgc-active: #{$menuActiveBackground};
+  --color: var(--textColorPrimary);
+  --color-active: var(--textColorAccent);
+  --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;
  }

--- a/src/renderer/components/mixins.scss
+++ b/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;
--- a/src/renderer/components/notifications/notifications.scss
+++ b/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);
      }
    }

--- a/src/renderer/components/radio/radio.scss
+++ b/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;
-          box-shadow: inset 0 0 0 1px $primary;
+          border-color: var(--primary);
+          box-shadow: inset 0 0 0 1px var(--primary);
        }
      }

      &.checked {
-        background-color: $radioActiveBackground;
-        color: $textColorAccent;
+        background-color: var(--radioActiveBackground);
+        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;
-  $tickColorFocus: $colorInfo;
-  $labelColorActive: $textColorAccent;
+  $tickColorActive: var(--colorInfo);
+  $tickColorFocus: var(--colorInfo);
+  $labelColorActive: var(--textColorAccent);

  input[type="radio"] {
    display: none;
--- a/src/renderer/components/select/select.scss
+++ b/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-option-selected-color: #{$inputOptionHoverColor};
-  --select-option-focused-bgc: #{$colorInfo};
-  --select-option-focused-color: #{$textColorAccent};
+  --select-menu-border-color: var(--halfGray);
+  --select-option-selected-color: var(--inputOptionHoverColor);
+  --select-option-focused-bgc: var(--colorInfo);
+  --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;
-          color: $textColorAccent;
+          background: var(--colorError);
+          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;
-        color: $primary;
+        box-shadow: 0 0 0 1px var(--colorVague);
+        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);
        }
      }

--- a/src/renderer/components/slider/slider.scss
+++ b/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);
    }
  }
 }
--- a/src/renderer/components/spinner/spinner.scss
+++ b/src/renderer/components/spinner/spinner.scss
@ -43,7 +43,7 @@
  }

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

--- a/src/renderer/components/status-brick/status-brick.scss
+++ b/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 {
--- a/src/renderer/components/stepper/stepper.scss
+++ b/src/renderer/components/stepper/stepper.scss
@ -21,8 +21,8 @@


 .Stepper {
-  --stepper-color: $contentColor;
-  --stepper-color-text: $textColorPrimary;
+  --stepper-color: var(--contentColor);
+  --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 {
--- a/src/renderer/components/table/table-cell.scss
+++ b/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);
    }
  }
 }
--- a/src/renderer/components/table/table-head.scss
+++ b/src/renderer/components/table/table-head.scss
@ -20,13 +20,13 @@
 */

 .TableHead {
-  $border: 1px solid $layoutBackground;
+  $border: 1px solid var(--layoutBackground);

-  background-color: $tableHeaderBackground;
-  border-bottom-width: $tableHeaderBorderWidth;
+  background-color: var(--tableHeaderBackground);
+  border-bottom-width: var(--tableHeaderBorderWidth);
  border-bottom-style: solid;
-  border-bottom-color: $tableHeaderBorderColor;
-  color: $tableHeaderColor;
+  border-bottom-color: var(--tableHeaderBorderColor);
+  color: var(--tableHeaderColor);
  display: flex;
  flex-shrink: 0;

--- a/src/renderer/components/table/table.scss
+++ b/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;
-        color: $tableSelectedRowColor;
+        background-color: var(--tableBgcSelected);
+        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);
      }
    }
  }
--- a/src/renderer/components/tabs/tabs.scss
+++ b/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};
-  --line-color-active: #{$primary};
+  --color-active: var(--layoutTabsActiveColor);
+  --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 {
--- a/src/renderer/components/tooltip/tooltip.scss
+++ b/src/renderer/components/tooltip/tooltip.scss
@ -21,10 +21,10 @@


 .Tooltip {
-  --bgc: #{$mainBackground};
+  --bgc: var(--mainBackground);
  --radius: #{$radius};
-  --color: #{$textColorAccent};
-  --border: 1px solid #{$borderColor};
+  --color: var(--textColorAccent);
+  --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%;
      }
--- a/src/renderer/components/vars.scss
+++ b/src/renderer/components/vars.scss
@ -20,7 +20,6 @@
 */

@import "colors", "media";
-@import "../themes/theme-vars";

 // Dimensions
 $unit: 8px;
--- a/src/renderer/components/wizard/wizard.scss
+++ b/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;

--- a/src/renderer/port-forward/port-forward-dialog.scss
+++ b/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;
--- a/src/renderer/theme.store.ts
+++ b/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};`;
--- a/src/renderer/themes/lens-dark.json
+++ b/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",
--- a/src/renderer/themes/lens-light.json
+++ b/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",
--- a/src/renderer/themes/theme-vars.css
+++ b/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;
+}
--- a/src/renderer/themes/theme-vars.scss
+++ b/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);