From 1e2feb92d16bdfbb99d8b0766c77b7ffdd89f98e Mon Sep 17 00:00:00 2001 From: Sebastian Malton Date: Fri, 1 Apr 2022 16:07:19 -0400 Subject: [PATCH] Fix build and lint - Get `make` to generate new `theme-vars.css` file when necessary Signed-off-by: Sebastian Malton --- Makefile | 9 +- build/build_theme_vars.ts | 31 ---- build/generate-theme-vars-file.ts | 27 +++ src/renderer/themes/theme-vars.css | 272 ++++++++++++++--------------- 4 files changed, 169 insertions(+), 170 deletions(-) delete mode 100644 build/build_theme_vars.ts create mode 100644 build/generate-theme-vars-file.ts diff --git a/Makefile b/Makefile index 1435ab5004..5b6dced288 100644 --- a/Makefile +++ b/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/ diff --git a/build/build_theme_vars.ts b/build/build_theme_vars.ts deleted file mode 100644 index 44376712a7..0000000000 --- a/build/build_theme_vars.ts +++ /dev/null @@ -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); diff --git a/build/generate-theme-vars-file.ts b/build/generate-theme-vars-file.ts new file mode 100644 index 0000000000..a6571132ee --- /dev/null +++ b/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); diff --git a/src/renderer/themes/theme-vars.css b/src/renderer/themes/theme-vars.css index e0a695b72d..2b323894d5 100644 --- a/src/renderer/themes/theme-vars.css +++ b/src/renderer/themes/theme-vars.css @@ -1,138 +1,138 @@ - -/* - Generated Lens theme CSS-variables, don't edit manually. - To refresh file run $: yarn run ts-node build/build_theme_vars.ts -*/ +/** + * Generated Lens theme CSS-variables, don't edit manually. + */ :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; -} + --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; + --dockTabBorderColor: #43424d; + --dockTabActiveBackground: #3a3e45; + --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: #3d90ce; + --menuSelectedOptionBgc: #36393e; + --canvasBackground: #24292e; + --scrollBarColor: #5f6064; + --settingsBackground: #262b2e; + --settingsColor: #909ba6; + --navSelectedBackground: #262b2e; + --navHoverColor: #dcddde; + --hrColor: #ffffff0f; + --tooltipBackground: #18191c; +} \ No newline at end of file