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

Adding more details to styling section

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2020-11-09 13:33:17 +03:00
parent 8e3223d30c
commit 26b225486a
3 changed files with 53 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/extensions/capabilities/images/css-vars-in-devtools.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
docs/extensions/capabilities/images/theme-selector.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 408 KiB

111
docs/extensions/capabilities/styling.md
View File

@ -1,8 +1,8 @@
# Styling # Styling
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. However, it’s always up to the developer whether to use them or provide completely different styles for the 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.
## Styling approach ## Styling approach
Lens heavily uses SCSS preprocessor and it's advised to stick with same approach for extension developers in order to use some of the predefined variables and mixins described below. 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: 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:
``` ```
@ -21,12 +21,10 @@ However, feel free to use any styling technique or framework like [Emotion](http
## Themes ## Themes
Lens using 2 built-in themes located in `src/renderer/themes` folder each for light and dark color schemes. Active theme can be changed in the `Preferences` page. Lens using 2 built-in themes located in `src/renderer/themes` folder each for light and dark color schemes. Active theme can be changed in the `Preferences` page.
![Color Theme](images/theme-selector.png)
[theme selector]
When Lens gets loaded it transforms selected theme `json` file into list of [CSS Custom Properties (CSS Variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) which then gets injected into `:root` element so any of the down-level components can use them. When Lens gets loaded it transforms selected theme `json` file into list of [CSS Custom Properties (CSS Variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) which then gets injected into `:root` element so any of the down-level components can use them.
![CSS vars listed in devtools](images/theme-selector.png)
[css vars listed in devtools]
When user changes a theme, the process is repeated, new css variables appear instead of previous ones. When user changes a theme, the process is repeated, new css variables appear instead of previous ones.
@ -38,67 +36,64 @@ Every extention is affected by list of default global styles defined in `src/ren
Extension may overwrite them if needed. Extension may overwrite them if needed.
## Variables to use ## Variables to use
### Basic styling
### vars.scss There is a list of CSS Variables available for extension to use. Basic variables located inside `:root` selected in `src/renderer/components/app.scss`:
In `src/renderer/components/vars.scss` there are list of predefined variables mostly for dimensions and fonts.
``` ```
// Dimensions --unit: 8px;
$unit: 8px; --padding: var(--unit);
$padding: $unit; --margin: var(--unit);
$margin: $unit; --border-radius: 3px;
$radius: ceil($unit * .3); --font-main: 'Roboto', 'Helvetica', 'Arial', sans-serif;
--font-monospace: Lucida Console, Monaco, Consolas, monospace;
// Fonts --font-size-small: calc(1.5 * var(--unit));
$font-main: 'Roboto', 'Helvetica', 'Arial', sans-serif !default; --font-size: calc(1.75 * var(--unit));
$font-monospace: Lucida Console, Monaco, Consolas, monospace; --font-size-big: calc(2 * var(--unit));
$font-size-small: floor(1.5 * $unit); --font-weight-thin: 300;
$font-size: floor(1.75 * $unit); --font-weight-normal: 400;
$font-size-big: floor(2 * $unit); --font-weight-bold: 500;
$font-weight-thin: 300;
$font-weight-normal: 400;
$font-weight-bold: 500;
...
``` ```
You can use them to set consistent paddings, define font-sizes in your SCSS files e.g. They're intended to set consistent paddings and font-sizes across components, e.g.
``` ```
.status { .status {
padding-left: $padding * 2; padding-left: calc(var(--padding) * 2);
font-size: $font-size-small; font-size: var(--font-size-small);
} }
``` ```
### theme-vars.scss ### Themable colors
In `src/renderer/themes/theme-vars.scss` there are 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. 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.
``` ```
// Base colors "blue": "#3d90ce",
$lensBlue: var(--blue); "magenta": "#c93dce",
$lensMagenta: var(--magenta); "golden": "#ffc63d",
$golden: var(--golden); "halfGray": "#87909c80",
$halfGray: var(--halfGray); "primary": "#3d90ce",
$primary: var(--primary); "textColorPrimary": "#555555",
$textColorPrimary: var(--textColorPrimary); "textColorSecondary": "#51575d",
$textColorSecondary: var(--textColorSecondary); "textColorAccent": "#333333",
$textColorAccent: var(--textColorAccent); "borderColor": "#c9cfd3",
$borderColor: var(--borderColor); "borderFaintColor": "#dfdfdf",
$borderFaintColor: var(--borderFaintColor); "mainBackground": "#f1f1f1",
$colorSuccess: var(--colorSuccess); "contentColor": "#ffffff",
$colorOk: var(--colorOk); "layoutBackground": "#e8e8e8",
$colorInfo: var(--colorInfo); "layoutTabsBackground": "#f8f8f8",
$colorError: var(--colorError); "layoutTabsActiveColor": "#333333",
$colorSoftError: var(--colorSoftError); "layoutTabsLineColor": "#87909c80"
$colorWarning: var(--colorWarning); ...
$colorVague: var(--colorVague);
$colorTerminated: var(--colorTerminated);
// Layout
$mainBackground: var(--mainBackground);
$contentColor: var(--contentColor);
$layoutBackground: var(--layoutBackground);
$layoutTabsBackground: var(--layoutTabsBackground);
... ...
``` ```
**Note**: if you don't use SCSS preprocessor in your extenstion **you can inlcude CSS Variables directly `var(--mainBackground)`**;
### mixins.scss They can be used in form of `var(--magenta)`.
In `src/renderer/components/mixins.scss` there are some useful utylity styles such as theme-aware scrollbar.
A complete list of all themable colors can be found in the [color reference](color-reference).
Colors values are located inside `src/renderer/themes/lens-dark.json` and `src/renderer/themes/lens-light.json` files.
## Using CSS Variables 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)'
}));
```