generating css-vars -- part 1

Signed-off-by: Roman <ixrock@gmail.com>

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}: var(--${varName}, ${value});`);
+
+const content = `
+${banner}
+
+:root {
+${themeCssVars.join("\n")}
+}
+`;
+
+// Run
+console.info(`"Saving css-variables for Lens theme 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/themes/theme-vars.css

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