Fix build and lint

- Get `make` to generate new `theme-vars.css` file when necessary

Signed-off-by: Sebastian Malton <sebastian@malton.name>

Makefile

@@ -29,10 +29,13 @@ compile-dev: node_modules
 	yarn compile:renderer --cache
 
 .PHONY: dev
-dev: binaries/client build-extensions
+dev: binaries/client build-extensions src/renderer/themes/theme-vars.css
 	rm -rf static/build/
 	yarn dev
 
+src/renderer/themes/theme-vars.css: node_modules src/renderer/themes/lens-dark.ts build/generate-theme-vars-file.ts
+	yarn run ts-node build/generate-theme-vars-file
+
 .PHONY: lint
 lint: node_modules
 	yarn lint
@@ -50,7 +53,7 @@ integration: build
 	yarn integration
 
 .PHONY: build
-build: node_modules binaries/client
+build: node_modules binaries/client src/renderer/themes/theme-vars.css
 	yarn run npm:fix-build-version
 	$(MAKE) build-extensions -B
 	yarn run compile
@@ -81,7 +84,7 @@ test-extensions: $(extension_node_modules)
 .PHONY: copy-extension-themes
 copy-extension-themes:
 	mkdir -p src/extensions/npm/extensions/dist/src/renderer/themes/
-	cp $(wildcard src/renderer/themes/*.json) src/extensions/npm/extensions/dist/src/renderer/themes/
+	cp $(wildcard src/renderer/themes/lens-*.ts) src/extensions/npm/extensions/dist/src/renderer/themes/
 
 src/extensions/npm/extensions/__mocks__:
 	cp -r __mocks__ src/extensions/npm/extensions/

build/build_theme_vars.ts

@@ -1,31 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-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);

build/generate-theme-vars-file.ts

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import fs from "fs-extra";
+import path from "path";
+import defaultBaseLensTheme from "../src/renderer/themes/lens-dark";
+
+const outputCssFile = path.resolve("src/renderer/themes/theme-vars.css");
+
+const content = [
+  "/**",
+  " * Generated Lens theme CSS-variables, don't edit manually.",
+  " */",
+  "",
+  ":root {",
+  ...Object.entries(defaultBaseLensTheme.colors)
+    .map(([varName, value]) => `  --${varName}: ${value};`),
+  "}",
+  "",
+].join("\n");
+
+// Run
+console.log("Writing out new generated src/renderer/themes/theme-vars.css file");
+fs.ensureFileSync(outputCssFile);
+fs.writeFile(outputCssFile, content);

src/renderer/themes/theme-vars.css

@@ -1,7 +1,5 @@
-
+/**
-/* 
+ * Generated Lens theme CSS-variables, don't edit manually.
-    Generated Lens theme CSS-variables, don't edit manually.
-    To refresh file run $: yarn run ts-node build/build_theme_vars.ts
  */
 
 :root {
@@ -73,6 +71,8 @@
   --dockEditorComment: #808080;
   --dockEditorActiveLineBackground: #3a3d41;
   --dockBadgeBackground: #36393e;
+  --dockTabBorderColor: #43424d;
+  --dockTabActiveBackground: #3a3e45;
   --logsBackground: #000000;
   --logsForeground: #ffffff;
   --logRowHoverBackground: #35373a;
@@ -125,7 +125,7 @@
   --inputControlHoverBorder: #474a4f;
   --lineProgressBackground: #414448;
   --radioActiveBackground: #36393e;
---menuActiveBackground: #36393e;
+  --menuActiveBackground: #3d90ce;
   --menuSelectedOptionBgc: #36393e;
   --canvasBackground: #24292e;
   --scrollBarColor: #5f6064;