hendrik/lens
1
0 Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Replacing global themed sass-vars to css-vars (#4322)

Browse Source 
* generating css-vars
* convert all global / theme sass vars to css vars with available default theme colors
* added missing colors to dark lens theme
This commit is contained in:
Roman authored and GitHub committed 2021-11-15 17:37:23 +02:00
1 parent 3214d8dfd5
commit 4c83f5becf
89 files changed
+463 -433
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/renderer/themes/lens-dark.json
+2
View File
@@ -23,6 +23,7 @@
"layoutBackground": "#2e3136",
"layoutTabsBackground": "#252729",
"layoutTabsActiveColor": "#ffffff",
"layoutTabsLineColor": "#87909c80",
"sidebarBackground": "#36393e",
"sidebarLogoBackground": "#414448",
"sidebarActiveColor": "#ffffff",
@@ -126,6 +127,7 @@
"radioActiveBackground": "#36393e",
"menuActiveBackground": "#36393e",
"menuSelectedOptionBgc": "#36393e",
"canvasBackground": "#24292e",
"scrollBarColor": "#5f6064",
"settingsBackground": "#262b2e",
"settingsColor": "#909ba6",
src/renderer/themes/lens-light.json
+1 -1
View File
@@ -127,8 +127,8 @@
"radioActiveBackground": "#f1f1f1",
"menuActiveBackground": "#e8e8e8",
"menuSelectedOptionBgc": "#e8e8e8",
"scrollBarColor": "#bbbbbb",
"canvasBackground": "#24292e",
"scrollBarColor": "#bbbbbb",
"settingsBackground": "#ffffff",
"settingsColor": "#555555",
"navSelectedBackground": "#ffffff",
src/renderer/themes/theme-vars.css
+138
View File
@@ -0,0 +1,138 @@
/*
Generated Lens theme CSS-variables, don't edit manually.
To refresh file run $: yarn run ts-node build/build_theme_vars.ts
*/
: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;
}
src/renderer/themes/theme-vars.scss
-156
View File
@@ -1,156 +0,0 @@
/**
* 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.
*/
// Base colors
$lensBlue: var(--blue);
$lensMagenta: var(--magenta);
$golden: var(--golden);
$halfGray: var(--halfGray);
$primary: var(--primary);
$textColorPrimary: var(--textColorPrimary);
$textColorSecondary: var(--textColorSecondary);
$textColorAccent: var(--textColorAccent);
$borderColor: var(--borderColor);
$borderFaintColor: var(--borderFaintColor);
$colorSuccess: var(--colorSuccess);
$colorOk: var(--colorOk);
$colorInfo: var(--colorInfo);
$colorError: var(--colorError);
$colorSoftError: var(--colorSoftError);
$colorWarning: var(--colorWarning);
$colorVague: var(--colorVague);
$colorTerminated: var(--colorTerminated);
// Layout
$mainBackground: var(--mainBackground);
$contentColor: var(--contentColor);
$layoutBackground: var(--layoutBackground);
$layoutTabsBackground: var(--layoutTabsBackground);
$layoutTabsActiveColor: var(--layoutTabsActiveColor);
// Sidebar
$sidebarLogoBackground: var(--sidebarLogoBackground);
$sidebarActiveColor: var(--sidebarActiveColor);
$sidebarSubmenuActiveColor: var(--sidebarSubmenuActiveColor);
$sidebarBackground: var(--sidebarBackground);
// Elements
$buttonPrimaryBackground: var(--buttonPrimaryBackground);
$buttonDefaultBackground: var(--buttonDefaultBackground);
$buttonLightBackground: var(--buttonLightBackground);
$buttonAccentBackground: var(--buttonAccentBackground);
$buttonDisabledBackground: var(--buttonDisabledBackground);
// Tables
$tableBgcStripe: var(--tableBgcStripe);
$tableBgcSelected: var(--tableBgcSelected);
$tableHeaderBackground: var(--tableHeaderBackground);
$tableHeaderBorderWidth: var(--tableHeaderBorderWidth);
$tableHeaderBorderColor: var(--tableHeaderBorderColor);
$tableHeaderColor: var(--tableHeaderColor);
$tableSelectedRowColor: var(--tableSelectedRowColor);
// Helm
$helmLogoBackground: var(--helmLogoBackground);
$helmImgBackground: var(--helmImgBackground);
$helmStableRepo: var(--helmStableRepo);
$helmIncubatorRepo: var(--helmIncubatorRepo);
$helmDescriptionHr: var(--helmDescriptionHr);
$helmDescriptionBlockquoteColor: var(--helmDescriptionBlockquoteColor);
$helmDescriptionBlockquoteBorder: var(--helmDescriptionBlockquoteBorder);
$helmDescriptionBlockquoteBackground: var(--helmDescriptionBlockquoteBackground);
$helmDescriptionHeaders: var(--helmDescriptionHeaders);
$helmDescriptionH6: var(--helmDescriptionH6);
$helmDescriptionTdBorder: var(--helmDescriptionTdBorder);
$helmDescriptionTrBackground: var(--helmDescriptionTrBackground);
$helmDescriptionCodeBackground: var(--helmDescriptionCodeBackground);
$helmDescriptionPreBackground: var(--helmDescriptionPreBackground);
$helmDescriptionPreColor: var(--helmDescriptionPreColor);
// Dock
$dockHeadBackground: var(--dockHeadBackground);
$dockInfoBackground: var(--dockInfoBackground);
$dockInfoBorderColor: var(--dockInfoBorderColor);
$dockBadgeBackground: var(--dockBadgeBackground);
// Terminal
$terminalBackground: var(--terminalBackground);
$terminalForeground: var(--terminalForeground);
$terminalCursor: var(--terminalCursor);
$terminalCursorAccent: var(--terminalCursorAccent);
$terminalSelection: var(--terminalSelection);
$terminalBlack: var(--terminalBlack);
$terminalRed: var(--terminalRed);
$terminalGreen: var(--terminalGreen);
$terminalYellow: var(--terminalYellow);
$terminalBlue: var(--terminalBlue);
$terminalMagenta: var(--terminalMagenta);
$terminalCyan: var(--terminalCyan);
$terminalWhite: var(--terminalWhite);
$terminalBrightBlack: var(--terminalBrightBlack);
$terminalBrightRed: var(--terminalBrightRed);
$terminalBrightGreen: var(--terminalBrightGreen);
$terminalBrightYellow: var(--terminalBrightYellow);
$terminalBrightBlue: var(--terminalBrightBlue);
$terminalBrightMagenta: var(--terminalBrightMagenta);
$terminalBrightCyan: var(--terminalBrightCyan);
$terminalBrightWhite: var(--terminalBrightWhite);
// Logs
$logsBackground: var(--logsBackground);
$logRowHoverBackground: var(--logRowHoverBackground);
// Dialogs
$dialogTextColor: var(--dialogTextColor);
$dialogBackground: var(--dialogBackground);
$dialogHeaderBackground: var(--dialogHeaderBackground);
$dialogFooterBackground: var(--dialogFooterBackground);
// Drawer
$drawerTogglerBackground: var(--drawerTogglerBackground);
$drawerTitleText: var(--drawerTitleText);
$drawerSubtitleBackground: var(--drawerSubtitleBackground);
$drawerItemNameColor: var(--drawerItemNameColor);
$drawerItemValueColor: var(--drawerItemValueColor);
// Charts
$chartLiveBarBackground: var(--chartLiveBarBackground);
$chartStripesColor: var(--chartStripesColor);
$chartCapacityColor: var(--chartCapacityColor);
$pieChartDefaultColor: var(--pieChartDefaultColor);
// Cluster Menu
$clusterMenuBackground: var(--clusterMenuBackground);
$clusterMenuBorderColor: var(--clusterMenuBorderColor);
$clusterSettingsBackground: var(--clusterSettingsBackground);
$addClusterIconColor: var(--addClusterIconColor);
// Misc
$boxShadow: var(--boxShadow);
$iconActiveColor: var(--iconActiveColor);
$iconActiveBackground: var(--iconActiveBackground);
$filterAreaBackground: var(--filterAreaBackground);
$inputOptionHoverColor: var(--inputOptionHoverColor);
$lineProgressBackground: var(--lineProgressBackground);
$radioActiveBackground: var(--radioActiveBackground);
$menuActiveBackground: var(--menuActiveBackground);
$menuSelectedOptionBgc: var(--menuSelectedOptionBgc);