mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Resolved remaining conflicts
Resolved conflicts while rebasing after pulling from remote Exit pipeline if extensions build or tests fail (#1370) Signed-off-by: Lauri Nevala <lauri.nevala@gmail.com> Simplify pages/menus/registry extension api internal implementation (#1364) Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> Co-authored-by: Roman <ixrock@gmail.com> Resolved conflicts in rebase from master Updated docs to sentence case throughout Changed mkdoc.yml nav to sentence case Signed-off-by: Paul Williams <pawilliams@mirantis.com> Changed headings to sentence case throughtout docs Signed-off-by: Paul Williams <pawilliams@mirantis.com> Changed all titles and headings back to title case throughout docs and in mkdocs.yml nav Signed-off-by: Paul Williams <pawilliams@mirantis.com> Updated docs to sentence case throughout Changed mkdoc.yml nav to sentence case Signed-off-by: Paul Williams <pawilliams@mirantis.com> Changed headings to sentence case throughtout docs Signed-off-by: Paul Williams <pawilliams@mirantis.com> Changed all titles and headings back to title case throughout docs and in mkdocs.yml nav Signed-off-by: Paul Williams <pawilliams@mirantis.com>
This commit is contained in:
Lauri NevalaandRoman authored and 
Paul Williams committed
1 parent
0fb859a22a
commit
3e986e4057
13 files changed
+177
-188
No files matched your search
@@ -1,130 +1,130 @@
|
||||
# Theme color reference
|
||||
You can use theme-based CSS Variables to style an extension according to the active theme.
|
||||
# Theme Color Reference
|
||||
You can use CSS variables generated from theme `.json` files to style an extension with respect of active theme.
|
||||
|
||||
## Base colors
|
||||
- `--blue`: blue color.
|
||||
- `--magenta`: magenta color.
|
||||
- `--golden`: gold/yellow color.
|
||||
- `--halfGray`: gray with some apacity applied.
|
||||
- `--primary`: Lens brand (blue) color.
|
||||
- `--colorSuccess`: successfull operations color.
|
||||
- `--colorOk`: successfull operations (bright version) color.
|
||||
- `--colorInfo`: informational, in-progress color.
|
||||
- `--colorError`: critical error color.
|
||||
- `--colorSoftError`: error color.
|
||||
- `--colorWarning`: warning color.
|
||||
- `--colorVague`: soft gray color for notices, hints etc.
|
||||
- `--colorTerminated`: terminated, closed, stale color.
|
||||
- `--boxShadow`: semi-transparent box-shadow color.
|
||||
## Base Colors
|
||||
- `blue`: blue color.
|
||||
- `magenta`: magenta color.
|
||||
- `golden`: gold/yellow color.
|
||||
- `halfGray`: gray with some apacity applied.
|
||||
- `primary`: Lens brand (blue) color.
|
||||
- `colorSuccess`: successfull operations color.
|
||||
- `colorOk`: successfull operations (bright version) color.
|
||||
- `colorInfo`: informational, in-progress color.
|
||||
- `colorError`: critical error color.
|
||||
- `colorSoftError`: error color.
|
||||
- `colorWarning`: warning color.
|
||||
- `colorVague`: soft gray color for notices, hints etc.
|
||||
- `colorTerminated`: terminated, closed, stale color.
|
||||
- `boxShadow`: semi-transparent box-shadow color.
|
||||
|
||||
## Text colors
|
||||
- `--textColorPrimary`: foreground text color.
|
||||
- `--textColorSecondary`: foreground text color for different paragraps, parts of text.
|
||||
- `--textColorAccent`: foreground text color to highlight its parts.
|
||||
## Text Colors
|
||||
- `textColorPrimary`: foreground text color.
|
||||
- `textColorSecondary`: foreground text color for different paragraps, parts of text.
|
||||
- `textColorAccent`: foreground text color to highlight its parts.
|
||||
|
||||
## Border colors
|
||||
- `--borderColor`: border color.
|
||||
- `--borderFaintColor`: fainted (lighter or darker, which depends on the theme) border color.
|
||||
## Border Colors
|
||||
- `borderColor`: border color.
|
||||
- `borderFaintColor`: fainted (lighter or darker, which depends on the theme) border color.
|
||||
|
||||
## Layout colors
|
||||
- `--mainBackground`: main background color for the app.
|
||||
- `--contentColor`: background color for panels contains some data.
|
||||
- `--layoutBackground`: background color for layout parts.
|
||||
- `--layoutTabsBackground`: background color for general tabs.
|
||||
- `--layoutTabsActiveColor`: foreground color for general tabs.
|
||||
- `--layoutTabsLineColor`: background color for lines under general tabs.
|
||||
## Layout Colors
|
||||
- `mainBackground`: main background color for the app.
|
||||
- `contentColor`: background color for panels contains some data.
|
||||
- `layoutBackground`: background color for layout parts.
|
||||
- `layoutTabsBackground`: background color for general tabs.
|
||||
- `layoutTabsActiveColor`: foreground color for general tabs.
|
||||
- `layoutTabsLineColor`: background color for lines under general tabs.
|
||||
|
||||
## Sidebar colors
|
||||
- `--sidebarLogoBackground`: background color behind logo in sidebar.
|
||||
- `--sidebarActiveColor`: foreground color for active menu items in sidebar.
|
||||
- `--sidebarSubmenuActiveColor`: foreground color for active submenu items in sidebar.
|
||||
- `--sidebarBackground`: background color for sidebar.
|
||||
## Sidebar Colors
|
||||
- `sidebarLogoBackground`: background color behind logo in sidebar.
|
||||
- `sidebarActiveColor`: foreground color for active menu items in sidebar.
|
||||
- `sidebarSubmenuActiveColor`: foreground color for active submenu items in sidebar.
|
||||
- `sidebarBackground`: background color for sidebar.
|
||||
|
||||
## Button colors
|
||||
- `--buttonPrimaryBackground`: button background color for primary actions.
|
||||
- `--buttonDefaultBackground`: default button background color.
|
||||
- `--buttonAccentBackground`: accent button background color.
|
||||
- `--buttonDisabledBackground`: disabled button background color.
|
||||
## Button Colors
|
||||
- `buttonPrimaryBackground`: button background color for primary actions.
|
||||
- `buttonDefaultBackground`: default button background color.
|
||||
- `buttonAccentBackground`: accent button background color.
|
||||
- `buttonDisabledBackground`: disabled button background color.
|
||||
|
||||
## Table colors
|
||||
- `--tableBgcStripe`: background color for odd rows in table.
|
||||
- `--tableBgcSelected`: background color for selected row in table.
|
||||
- `--tableHeaderBackground`: background color for table header.
|
||||
- `--tableHeaderBorderWidth`: border width under table header.
|
||||
- `--tableHeaderBorderColor`: border color for line under table header.
|
||||
- `--tableHeaderColor`: foreground color for table header.
|
||||
- `--tableSelectedRowColor`: foreground color for selected row in table.
|
||||
## Table Colors
|
||||
- `tableBgcStripe`: background color for odd rows in table.
|
||||
- `tableBgcSelected`: background color for selected row in table.
|
||||
- `tableHeaderBackground`: background color for table header.
|
||||
- `tableHeaderBorderWidth`: border width under table header.
|
||||
- `tableHeaderBorderColor`: border color for line under table header.
|
||||
- `tableHeaderColor`: foreground color for table header.
|
||||
- `tableSelectedRowColor`: foreground color for selected row in table.
|
||||
|
||||
## Dock colors
|
||||
- `--dockHeadBackground`: background color for dock's header.
|
||||
- `--dockInfoBackground`: background color for dock's info panel.
|
||||
- `--dockInfoBorderColor`: border color for dock's info panel.
|
||||
## Dock Colors
|
||||
- `dockHeadBackground`: background color for dock's header.
|
||||
- `dockInfoBackground`: background color for dock's info panel.
|
||||
- `dockInfoBorderColor`: border color for dock's info panel.
|
||||
|
||||
## Helm chart colors
|
||||
- `--helmLogoBackground`: background color for chart logo.
|
||||
- `--helmImgBackground`: background color for chart image.
|
||||
- `--helmStableRepo`: background color for stable repo.
|
||||
- `--helmIncubatorRepo`: background color for incubator repo.
|
||||
- `--helmDescriptionHr`: Helm chart description separator line color.
|
||||
- `--helmDescriptionBlockqouteColor`: Helm chart description blockquote color.
|
||||
- `--helmDescriptionBlockqouteBorder`: Helm chart description blockquote border color.
|
||||
- `--helmDescriptionBlockquoteBackground`: Helm chart description blockquote background color.
|
||||
- `--helmDescriptionHeaders`: Helm chart description headers color.
|
||||
- `--helmDescriptionH6`: Helm chart description header foreground color.
|
||||
- `--helmDescriptionTdBorder`: Helm chart description table cell border color.
|
||||
- `--helmDescriptionTrBackground`: Helm chart description table row background color.
|
||||
- `--helmDescriptionCodeBackground`: Helm chart description code background color.
|
||||
- `--helmDescriptionPreBackground`: Helm chart description pre background color.
|
||||
- `--helmDescriptionPreColor`: Helm chart description pre foreground color.
|
||||
## Helm Chart Colors
|
||||
- `helmLogoBackground`: background color for chart logo.
|
||||
- `helmImgBackground`: background color for chart image.
|
||||
- `helmStableRepo`: background color for stable repo.
|
||||
- `helmIncubatorRepo`: background color for incubator repo.
|
||||
- `helmDescriptionHr`: Helm chart description separator line color.
|
||||
- `helmDescriptionBlockqouteColor`: Helm chart description blockquote color.
|
||||
- `helmDescriptionBlockqouteBorder`: Helm chart description blockquote border color.
|
||||
- `helmDescriptionBlockquoteBackground`: Helm chart description blockquote background color.
|
||||
- `helmDescriptionHeaders`: Helm chart description headers color.
|
||||
- `helmDescriptionH6`: Helm chart description header foreground color.
|
||||
- `helmDescriptionTdBorder`: Helm chart description table cell border color.
|
||||
- `helmDescriptionTrBackground`: Helm chart description table row background color.
|
||||
- `helmDescriptionCodeBackground`: Helm chart description code background color.
|
||||
- `helmDescriptionPreBackground`: Helm chart description pre background color.
|
||||
- `helmDescriptionPreColor`: Helm chart description pre foreground color.
|
||||
|
||||
## Terminal colors
|
||||
- `--terminalBackground`: Terminal background color.
|
||||
- `--terminalForeground`: Terminal foreground color.
|
||||
- `--terminalCursor`: Terminal cursor color.
|
||||
- `--terminalCursorAccent`: Terminal cursor accent color.
|
||||
- `--terminalSelection`: Terminal selection background color.
|
||||
- `--terminalBlack`: Terminal black color.
|
||||
- `--terminalRed`: Terminal red color.
|
||||
- `--terminalGreen`: Terminal green color.
|
||||
- `--terminalYellow`: Terminal yellow color.
|
||||
- `--terminalBlue`: Terminal blue color.
|
||||
- `--terminalMagenta`: Terminal magenta color.
|
||||
- `--terminalCyan`: Terminal cyan color.
|
||||
- `--terminalWhite`: Terminal white color.
|
||||
- `--terminalBrightBlack`: Terminal bright black color.
|
||||
- `--terminalBrightRed`: Terminal bright red color.
|
||||
- `--terminalBrightGreen`: Terminal bright green color.
|
||||
- `--terminalBrightYellow`: Terminal bright yellow color.
|
||||
- `--terminalBrightBlue`: Terminal bright blue color.
|
||||
- `--terminalBrightMagenta`: Terminal bright magenta color.
|
||||
- `--terminalBrightCyan`: Terminal bright cyan color.
|
||||
- `--terminalBrightWhite`: Terminal bright white color.
|
||||
## Terminal Colors
|
||||
- `terminalBackground`: Terminal background color.
|
||||
- `terminalForeground`: Terminal foreground color.
|
||||
- `terminalCursor`: Terminal cursor color.
|
||||
- `terminalCursorAccent`: Terminal cursor accent color.
|
||||
- `terminalSelection`: Terminal selection background color.
|
||||
- `terminalBlack`: Terminal black color.
|
||||
- `terminalRed`: Terminal red color.
|
||||
- `terminalGreen`: Terminal green color.
|
||||
- `terminalYellow`: Terminal yellow color.
|
||||
- `terminalBlue`: Terminal blue color.
|
||||
- `terminalMagenta`: Terminal magenta color.
|
||||
- `terminalCyan`: Terminal cyan color.
|
||||
- `terminalWhite`: Terminal white color.
|
||||
- `terminalBrightBlack`: Terminal bright black color.
|
||||
- `terminalBrightRed`: Terminal bright red color.
|
||||
- `terminalBrightGreen`: Terminal bright green color.
|
||||
- `terminalBrightYellow`: Terminal bright yellow color.
|
||||
- `terminalBrightBlue`: Terminal bright blue color.
|
||||
- `terminalBrightMagenta`: Terminal bright magenta color.
|
||||
- `terminalBrightCyan`: Terminal bright cyan color.
|
||||
- `terminalBrightWhite`: Terminal bright white color.
|
||||
|
||||
## Dialog colors
|
||||
- `--dialogHeaderBackground`: background color for dialog header.
|
||||
- `--dialogFooterBackground`: background color for dialog footer.
|
||||
## Dialog Colors
|
||||
- `dialogHeaderBackground`: background color for dialog header.
|
||||
- `dialogFooterBackground`: background color for dialog footer.
|
||||
|
||||
## Detail panel (Drawer) colors
|
||||
- `--drawerTitleText`: drawer title foreground color.
|
||||
- `--drawerSubtitleBackground`: drawer subtitle foreground color.
|
||||
- `--drawerItemNameColor`: foreground color for item name in drawer.
|
||||
- `--drawerItemValueColor`: foreground color for item value in drawer.
|
||||
## Detail Panel (Drawer) Colors
|
||||
- `drawerTitleText`: drawer title foreground color.
|
||||
- `drawerSubtitleBackground`: drawer subtitle foreground color.
|
||||
- `drawerItemNameColor`: foreground color for item name in drawer.
|
||||
- `drawerItemValueColor`: foreground color for item value in drawer.
|
||||
|
||||
## Misc colors
|
||||
- `--logsBackground`: background color for pod logs.
|
||||
- `--clusterMenuBackground`: background color for cluster menu.
|
||||
- `--clusterMenuBorderColor`: border color for cluster menu.
|
||||
- `--clusterSettingsBackground`: background color for cluster settings.
|
||||
- `--addClusterIconColor`: add cluster button background color.
|
||||
- `--iconActiveColor`: active cluster icon foreground color.
|
||||
- `--iconActiveBackground`: active cluster icon background color.
|
||||
- `--filterAreaBackground`: page filter area (where selected namespaces are lister) background color.
|
||||
- `--chartStripesColor`: bar chart zebra stripes background color.
|
||||
- `--chartCapacityColor`: background color for capacity values in bar charts.
|
||||
- `--pieChartDefaultColor`: default background color for pie chart values.
|
||||
- `--selectOptionHoveredColor`: foregrond color for selected element in dropdown list.
|
||||
- `--lineProgressBackground`: background color for progress line.
|
||||
- `--radioActiveBackground`: background color for active radio buttons.
|
||||
- `--menuActiveBackground`: background color for active menu items.
|
||||
## Misc Colors
|
||||
- `logsBackground`: background color for pod logs.
|
||||
- `clusterMenuBackground`: background color for cluster menu.
|
||||
- `clusterMenuBorderColor`: border color for cluster menu.
|
||||
- `clusterSettingsBackground`: background color for cluster settings.
|
||||
- `addClusterIconColor`: add cluster button background color.
|
||||
- `iconActiveColor`: active cluster icon foreground color.
|
||||
- `iconActiveBackground`: active cluster icon background color.
|
||||
- `filterAreaBackground`: page filter area (where selected namespaces are lister) background color.
|
||||
- `chartStripesColor`: bar chart zebra stripes background color.
|
||||
- `chartCapacityColor`: background color for capacity values in bar charts.
|
||||
- `pieChartDefaultColor`: default background color for pie chart values.
|
||||
- `selectOptionHoveredColor`: foregrond color for selected element in dropdown list.
|
||||
- `lineProgressBackground`: background color for progress line.
|
||||
- `radioActiveBackground`: background color for active radio buttons.
|
||||
- `menuActiveBackground`: background color for active menu items.
|
||||
|
||||
In most cases you would only need base, text and some of the layout colors.
|
||||
@@ -1,8 +1,8 @@
|
||||
# Styling an extension
|
||||
# Styling an Extension
|
||||
Lens provides a set of global styles and UI components that can be used by any extension to preserve look and feel of the application.
|
||||
|
||||
Lens provides a set of global styles and UI components that can be used by any extension to preserve the look and feel of the application.
|
||||
|
||||
## Layout
|
||||
## Styling Approach
|
||||
Lens heavily uses SCSS preprocessor with a set of predefined variables and mixins.
|
||||
|
||||
For layout tasks Lens is using [flex.box](https://www.npmjs.com/package/flex.box) library which provides helpful class names to specify some of the [flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) properties. For example, `div` with class names:
|
||||
|
||||
@@ -55,7 +55,8 @@ When the user changes the theme, the process is repeated, and new CSS Variables
|
||||
|
||||
If you want to follow a selected theme to keep the 'native' Lens look and feel, respecting the light/dark appearance of your extension, you can use the provided variables and built-in Lens components such as `Button`, `Select`, `Table`, etc.
|
||||
|
||||
There is a set of CSS Variables available for extensions to use for theming. They are all located inside `:root` and are defined in [app.scss](https://github.com/lensapp/lens/blob/master/src/renderer/components/app.scss):
|
||||
## Injected Styles
|
||||
Every extention is affected by list of default global styles defined in `src/renderer/components/app.scss`. These are basic browser resets like setting `box-sizing` property for every element, default text and background colors, default font size, basic headings visualisation etc.
|
||||
|
||||
```css
|
||||
--font-main: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
||||
@@ -70,6 +71,9 @@ There is a set of CSS Variables available for extensions to use for theming. The
|
||||
|
||||
as well as in [the theme modules](https://github.com/lensapp/lens/tree/master/src/renderer/themes):
|
||||
|
||||
## Variables to Use
|
||||
### Basic Styling
|
||||
There is a list of CSS Variables available for extension to use. Basic variables located inside `:root` selected in `src/renderer/components/app.scss`:
|
||||
```
|
||||
--blue: #3d90ce;
|
||||
--magenta: #c93dce;
|
||||
@@ -99,53 +103,38 @@ They can be used in form of `var(--magenta)`, e.g.
|
||||
}
|
||||
```
|
||||
|
||||
A complete list of all themable colors can be found in the [color reference](../color-reference).
|
||||
|
||||
### Theme switching
|
||||
|
||||
When the light theme is active, the `<body>` element gets a "theme-light" class, `<body class="theme-light">`. If the class isn't there, assume the theme is dark. The active theme can be changed in the `Preferences` page:
|
||||
|
||||
|
||||
Currently, there is no prescribed way of detecting changes to the theme in JavaScript. [This issue](https://github.com/lensapp/lens/issues/1336) hopes to improve on this. In the meantime, you can use a [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) to observe the `<body>` element's `class` attribute to see if the "theme-light" class gets added to it:
|
||||
|
||||
```javascript
|
||||
...
|
||||
useEffect(function () {
|
||||
const observer = new MutationObserver(function (mutations: MutationRecord[]) {
|
||||
mutations.forEach((mutation: MutationRecord) => {
|
||||
if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
|
||||
if ((mutation.target as HTMLElement).classList.contains('theme-light')) {
|
||||
// theme is LIGHT
|
||||
} else {
|
||||
// theme is DARK
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
observer.observe(document.body, {
|
||||
attributes: true,
|
||||
attributeFilter: ['class'],
|
||||
});
|
||||
|
||||
return function () {
|
||||
observer.disconnect();
|
||||
};
|
||||
}, []); // run once on mount
|
||||
### Themable Colors
|
||||
After theme file gets parsed it provides list of theme-defined colors. Most of their values are different for light and dark themes. You can use them to preserve consitent view of extension with respect of selected theme.
|
||||
```
|
||||
"blue": "#3d90ce",
|
||||
"magenta": "#c93dce",
|
||||
"golden": "#ffc63d",
|
||||
"halfGray": "#87909c80",
|
||||
"primary": "#3d90ce",
|
||||
"textColorPrimary": "#555555",
|
||||
"textColorSecondary": "#51575d",
|
||||
"textColorAccent": "#333333",
|
||||
"borderColor": "#c9cfd3",
|
||||
"borderFaintColor": "#dfdfdf",
|
||||
"mainBackground": "#f1f1f1",
|
||||
"contentColor": "#ffffff",
|
||||
"layoutBackground": "#e8e8e8",
|
||||
"layoutTabsBackground": "#f8f8f8",
|
||||
"layoutTabsActiveColor": "#333333",
|
||||
"layoutTabsLineColor": "#87909c80"
|
||||
...
|
||||
...
|
||||
```
|
||||
|
||||
## Injected styles
|
||||
## Injected Styles
|
||||
|
||||
Every extension is affected by list of default global styles defined in [app.scss](https://github.com/lensapp/lens/blob/master/src/renderer/components/app.scss). These are basic browser resets and element styles like setting the `box-sizing` property for every element, default text and background colors, default font sizes, basic heading formatting, etc.
|
||||
|
||||
Extension may overwrite these if needed. They have low CSS specificity, so overriding them should be fairly easy.
|
||||
|
||||
## CSS-in-JS
|
||||
|
||||
If an extension uses a system like `Emotion` to work with styles, it can use CSS variables as follows:
|
||||
|
||||
```javascript
|
||||
## Using CSS Cariables Inside CSS-in-JS components
|
||||
If a developer uses an `Emotion` (or similar) framework to work with styles inside an extension, they can use variables in the following form:
|
||||
```
|
||||
const Container = styled.div(() => ({
|
||||
backgroundColor: 'var(--mainBackground)'
|
||||
}));
|
||||
|
||||
Reference in new issue
Block a user