add css variable changing for 'clusters-menu-bgc'

Signed-off-by: Sebastian Malton <smalton@mirantis.com>

src/renderer/components/app.scss

@@ -11,9 +11,6 @@
 }
 
 :root {
-  --mainBackground: #1e2124;
-  --textColorPrimary: #87909c;
-  --clusters-menu-bgc: #252729;
   --main-layout-header: 40px;
 }
 
@@ -80,7 +77,7 @@ hr {
 }
 
 h1 {
-  color: white;
+  color: $textColorAccent;
   font-size: 28px;
   font-weight: 300;
   letter-spacing: -.010em;

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

@@ -5,7 +5,7 @@
   position: relative;
   text-align: center;
   padding: $spacing;
-  background: var(--clusters-menu-bgc);
+  background: $clusters-menu-bgc;
 
   .is-mac & {
     padding-top: $spacing * 2;
@@ -46,7 +46,7 @@
     .Icon {
       border-radius: $radius;
       padding: $padding / 3;
-      color: var(--clusters-menu-bgc) !important;
+      color: $clusters-menu-bgc;
       background: white !important;
       font-weight: bold;
       cursor: pointer;

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

@@ -15,7 +15,6 @@
 
   > .content-col {
     margin-right: $spacing;
-    background-color: var(--clusters-menu-bgc);
     border-radius: $radius;
 
     > .error {

src/renderer/themes/kontena-dark.json

@@ -12,6 +12,7 @@
     "textColorPrimary": "#87909c",
     "textColorSecondary": "#a0a0a0",
     "textColorAccent": "#ffffff",
+    "clusters-menu-bgc": "#252729",
     "borderColor": "#4c5053",
     "borderFaintColor": "#373a3e",
     "mainBackground": "#1e2124",

src/renderer/themes/kontena-light.json

@@ -12,6 +12,7 @@
     "textColorPrimary": "#555555",
     "textColorSecondary": "#51575d",
     "textColorAccent": "#333333",
+    "clusters-menu-bgc": "#afafaf",
     "borderColor": "#c9cfd3",
     "borderFaintColor": "#dfdfdf",
     "mainBackground": "#f1f1f1",

src/renderer/themes/theme-vars.scss

@@ -7,6 +7,7 @@ $primary: var(--primary);
 $textColorPrimary: var(--textColorPrimary);
 $textColorSecondary: var(--textColorSecondary);
 $textColorAccent: var(--textColorAccent);
+$clusters-menu-bgc: var(--clusters-menu-bgc);
 $borderColor: var(--borderColor);
 $borderFaintColor: var(--borderFaintColor);
 $colorSuccess: var(--colorSuccess);