From 3c4376ef1962dc3591cc575bc8eedd00a7ded830 Mon Sep 17 00:00:00 2001 From: Roman Date: Wed, 10 Nov 2021 17:57:21 +0200 Subject: [PATCH] generating css-vars -- part 1 Signed-off-by: Roman --- build/build_theme_vars.ts | 47 ++++++++++ package.json | 1 + src/renderer/themes/theme-vars.css | 136 +++++++++++++++++++++++++++++ 3 files changed, 184 insertions(+) create mode 100644 build/build_theme_vars.ts create mode 100644 src/renderer/themes/theme-vars.css diff --git a/build/build_theme_vars.ts b/build/build_theme_vars.ts new file mode 100644 index 0000000000..c69b81936b --- /dev/null +++ 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}: 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); diff --git a/package.json b/package.json index 8ec42160d4..9e030bb8af 100644 --- 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", diff --git a/src/renderer/themes/theme-vars.css b/src/renderer/themes/theme-vars.css new file mode 100644 index 0000000000..ef4d7fdf8f --- /dev/null +++ b/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); +}