mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Deployed 8d1c29a to latest with MkDocs 1.1.2 and mike 0.5.5
This commit is contained in:
GitHub Action committed
1 parent
ba3b18837d
commit
34a5dbdda5
686 files changed
+3976
-723877
No files matched your search
File diff suppressed because it is too large.
Load diff
@@ -632,8 +632,20 @@
|
||||
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../theming/" class="md-nav__link">
|
||||
Theming
|
||||
<a href="../styling/" class="md-nav__link">
|
||||
Styling
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../color-reference/" class="md-nav__link">
|
||||
Color reference
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@@ -761,7 +773,7 @@
|
||||
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../../api/modules/_src_extensions_extension_api_/" class="md-nav__link">
|
||||
<a href="../../api/" class="md-nav__link">
|
||||
API Reference
|
||||
</a>
|
||||
</li>
|
||||
@@ -777,12 +789,86 @@
|
||||
|
||||
|
||||
|
||||
<li class="md-nav__item md-nav__item--nested">
|
||||
|
||||
<input class="md-nav__toggle md-toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
|
||||
|
||||
<label class="md-nav__link" for="nav-8">
|
||||
Contributing
|
||||
<span class="md-nav__icon md-icon"></span>
|
||||
</label>
|
||||
<nav class="md-nav" aria-label="Contributing" data-md-level="1">
|
||||
<label class="md-nav__title" for="nav-8">
|
||||
<span class="md-nav__icon md-icon"></span>
|
||||
Contributing
|
||||
</label>
|
||||
<ul class="md-nav__list" data-md-scrollfix>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../../../contributing/" class="md-nav__link">
|
||||
Contributing
|
||||
Overview
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../../../contributing/development/" class="md-nav__link">
|
||||
Development
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../../../contributing/documentation/" class="md-nav__link">
|
||||
Documentation
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../../../contributing/maintainers/" class="md-nav__link">
|
||||
Maintainers
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../../../contributing/promotion/" class="md-nav__link">
|
||||
Promotion
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1194,13 +1280,13 @@
|
||||
</a>
|
||||
|
||||
|
||||
<a href="../theming/" class="md-footer-nav__link md-footer-nav__link--next" rel="next">
|
||||
<a href="../styling/" class="md-footer-nav__link md-footer-nav__link--next" rel="next">
|
||||
<div class="md-footer-nav__title">
|
||||
<div class="md-ellipsis">
|
||||
<span class="md-footer-nav__direction">
|
||||
Next
|
||||
</span>
|
||||
Theming
|
||||
Styling
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-footer-nav__button md-icon">
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 408 KiB |
@@ -493,8 +493,20 @@
|
||||
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="theming/" class="md-nav__link">
|
||||
Theming
|
||||
<a href="styling/" class="md-nav__link">
|
||||
Styling
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="color-reference/" class="md-nav__link">
|
||||
Color reference
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@@ -622,7 +634,7 @@
|
||||
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../api/modules/_src_extensions_extension_api_/" class="md-nav__link">
|
||||
<a href="../api/" class="md-nav__link">
|
||||
API Reference
|
||||
</a>
|
||||
</li>
|
||||
@@ -638,12 +650,86 @@
|
||||
|
||||
|
||||
|
||||
<li class="md-nav__item md-nav__item--nested">
|
||||
|
||||
<input class="md-nav__toggle md-toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
|
||||
|
||||
<label class="md-nav__link" for="nav-8">
|
||||
Contributing
|
||||
<span class="md-nav__icon md-icon"></span>
|
||||
</label>
|
||||
<nav class="md-nav" aria-label="Contributing" data-md-level="1">
|
||||
<label class="md-nav__title" for="nav-8">
|
||||
<span class="md-nav__icon md-icon"></span>
|
||||
Contributing
|
||||
</label>
|
||||
<ul class="md-nav__list" data-md-scrollfix>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../../contributing/" class="md-nav__link">
|
||||
Contributing
|
||||
Overview
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../../contributing/development/" class="md-nav__link">
|
||||
Development
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../../contributing/documentation/" class="md-nav__link">
|
||||
Documentation
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../../contributing/maintainers/" class="md-nav__link">
|
||||
Maintainers
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../../contributing/promotion/" class="md-nav__link">
|
||||
Promotion
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
+339
-11
@@ -9,7 +9,7 @@
|
||||
<meta name="description" content="Documentation for Lens IDE. The only system you’ll ever need to take control of your Kubernetes clusters. It's open source and free. Download it today!">
|
||||
|
||||
|
||||
<link rel="canonical" href="https://docs.k8slens.dev/extensions/capabilities/theming/">
|
||||
<link rel="canonical" href="https://docs.k8slens.dev/extensions/capabilities/styling/">
|
||||
|
||||
|
||||
<meta name="author" content="Mirantis, Inc.">
|
||||
@@ -19,7 +19,7 @@
|
||||
|
||||
|
||||
|
||||
<title>Theming - Lens Documentation</title>
|
||||
<title>Styling - Lens Documentation</title>
|
||||
|
||||
|
||||
|
||||
@@ -74,6 +74,11 @@
|
||||
<label class="md-overlay" for="__drawer"></label>
|
||||
<div data-md-component="skip">
|
||||
|
||||
|
||||
<a href="#styling-an-extension" class="md-skip">
|
||||
Skip to content
|
||||
</a>
|
||||
|
||||
</div>
|
||||
<div data-md-component="announce">
|
||||
|
||||
@@ -101,7 +106,7 @@
|
||||
<div class="md-header-nav__topic">
|
||||
<span class="md-ellipsis">
|
||||
|
||||
Theming
|
||||
Styling
|
||||
|
||||
</span>
|
||||
</div>
|
||||
@@ -491,11 +496,102 @@
|
||||
|
||||
<input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
|
||||
|
||||
|
||||
|
||||
|
||||
<label class="md-nav__link md-nav__link--active" for="__toc">
|
||||
Styling
|
||||
<span class="md-nav__icon md-icon"></span>
|
||||
</label>
|
||||
|
||||
<a href="./" class="md-nav__link md-nav__link--active">
|
||||
Theming
|
||||
Styling
|
||||
</a>
|
||||
|
||||
|
||||
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<label class="md-nav__title" for="__toc">
|
||||
<span class="md-nav__icon md-icon"></span>
|
||||
Table of contents
|
||||
</label>
|
||||
<ul class="md-nav__list" data-md-scrollfix>
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#styling-approach" class="md-nav__link">
|
||||
Styling approach
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#themes" class="md-nav__link">
|
||||
Themes
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#injected-styles" class="md-nav__link">
|
||||
Injected styles
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#variables-to-use" class="md-nav__link">
|
||||
Variables to use
|
||||
</a>
|
||||
|
||||
<nav class="md-nav" aria-label="Variables to use">
|
||||
<ul class="md-nav__list">
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#basic-styling" class="md-nav__link">
|
||||
Basic styling
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#themable-colors" class="md-nav__link">
|
||||
Themable colors
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#using-css-variables-inside-css-in-js-components" class="md-nav__link">
|
||||
Using CSS Variables inside CSS-in-JS components
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../color-reference/" class="md-nav__link">
|
||||
Color reference
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
@@ -622,7 +718,7 @@
|
||||
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../../api/modules/_src_extensions_extension_api_/" class="md-nav__link">
|
||||
<a href="../../api/" class="md-nav__link">
|
||||
API Reference
|
||||
</a>
|
||||
</li>
|
||||
@@ -638,12 +734,86 @@
|
||||
|
||||
|
||||
|
||||
<li class="md-nav__item md-nav__item--nested">
|
||||
|
||||
<input class="md-nav__toggle md-toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
|
||||
|
||||
<label class="md-nav__link" for="nav-8">
|
||||
Contributing
|
||||
<span class="md-nav__icon md-icon"></span>
|
||||
</label>
|
||||
<nav class="md-nav" aria-label="Contributing" data-md-level="1">
|
||||
<label class="md-nav__title" for="nav-8">
|
||||
<span class="md-nav__icon md-icon"></span>
|
||||
Contributing
|
||||
</label>
|
||||
<ul class="md-nav__list" data-md-scrollfix>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../../../contributing/" class="md-nav__link">
|
||||
Contributing
|
||||
Overview
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../../../contributing/development/" class="md-nav__link">
|
||||
Development
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../../../contributing/documentation/" class="md-nav__link">
|
||||
Documentation
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../../../contributing/maintainers/" class="md-nav__link">
|
||||
Maintainers
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../../../contributing/promotion/" class="md-nav__link">
|
||||
Promotion
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -664,15 +834,173 @@
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="md-sidebar md-sidebar--secondary" data-md-component="toc">
|
||||
<div class="md-sidebar__scrollwrap">
|
||||
<div class="md-sidebar__inner">
|
||||
|
||||
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<label class="md-nav__title" for="__toc">
|
||||
<span class="md-nav__icon md-icon"></span>
|
||||
Table of contents
|
||||
</label>
|
||||
<ul class="md-nav__list" data-md-scrollfix>
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#styling-approach" class="md-nav__link">
|
||||
Styling approach
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#themes" class="md-nav__link">
|
||||
Themes
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#injected-styles" class="md-nav__link">
|
||||
Injected styles
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#variables-to-use" class="md-nav__link">
|
||||
Variables to use
|
||||
</a>
|
||||
|
||||
<nav class="md-nav" aria-label="Variables to use">
|
||||
<ul class="md-nav__list">
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#basic-styling" class="md-nav__link">
|
||||
Basic styling
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#themable-colors" class="md-nav__link">
|
||||
Themable colors
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#using-css-variables-inside-css-in-js-components" class="md-nav__link">
|
||||
Using CSS Variables inside CSS-in-JS components
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="md-content">
|
||||
<article class="md-content__inner md-typeset">
|
||||
|
||||
|
||||
|
||||
<h1>Theming</h1>
|
||||
|
||||
|
||||
<h1 id="styling-an-extension">Styling an extension<a class="headerlink" href="#styling-an-extension" title="Permanent link">#</a></h1>
|
||||
<p>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.</p>
|
||||
<h2 id="styling-approach">Styling approach<a class="headerlink" href="#styling-approach" title="Permanent link">#</a></h2>
|
||||
<p>Lens heavily uses SCSS preprocessor with a set of predefined variables and mixins.</p>
|
||||
<p>For layout tasks Lens is using <a href="https://www.npmjs.com/package/flex.box">flex.box</a> library which provides helpful class names to specify some of the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">flexbox</a> properties. For example, <code>div</code> with class names:
|
||||
<div class="highlight"><pre><span></span><code><div className="flex column align-center"></div>
|
||||
</code></pre></div>
|
||||
at the end will have following css properties:
|
||||
<div class="highlight"><pre><span></span><code>div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
</code></pre></div></p>
|
||||
<p>However, feel free to use any styling technique or framework like <a href="https://github.com/emotion-js/emotion">Emotion</a> or just plain CSS if you prefer.</p>
|
||||
<h2 id="themes">Themes<a class="headerlink" href="#themes" title="Permanent link">#</a></h2>
|
||||
<p>Lens using 2 built-in themes located in <code>src/renderer/themes</code> folder each for light and dark color schemes. Active theme can be changed in the <code>Preferences</code> page.
|
||||
<img alt="Color Theme" src="../images/theme-selector.png" /></p>
|
||||
<p>When Lens gets loaded it transforms selected theme <code>json</code> file into list of <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties">CSS Custom Properties (CSS Variables)</a> which then gets injected into <code>:root</code> element so any of the down-level components can use them.
|
||||
<img alt="CSS vars listed in devtools" src="../images/css-vars-in-devtools.png" /></p>
|
||||
<p>When user changes a theme, the process is repeated, new css variables appear instead of previous ones.</p>
|
||||
<p>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 provided variables and build-in lens components such as buttons, dropdowns, checkboxes etc.</p>
|
||||
<h2 id="injected-styles">Injected styles<a class="headerlink" href="#injected-styles" title="Permanent link">#</a></h2>
|
||||
<p>Every extention is affected by list of default global styles defined in <code>src/renderer/components/app.scss</code>. These are basic browser resets like setting <code>box-sizing</code> property for every element, default text and background colors, default font size, basic headings visualisation etc.</p>
|
||||
<p>Extension may overwrite them if needed.</p>
|
||||
<h2 id="variables-to-use">Variables to use<a class="headerlink" href="#variables-to-use" title="Permanent link">#</a></h2>
|
||||
<h3 id="basic-styling">Basic styling<a class="headerlink" href="#basic-styling" title="Permanent link">#</a></h3>
|
||||
<p>There is a list of CSS Variables available for extension to use. Basic variables located inside <code>:root</code> selected in <code>src/renderer/components/app.scss</code>:
|
||||
<div class="highlight"><pre><span></span><code> --unit: 8px;
|
||||
--padding: var(--unit);
|
||||
--margin: var(--unit);
|
||||
--border-radius: 3px;
|
||||
--font-main: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
||||
--font-monospace: Lucida Console, Monaco, Consolas, monospace;
|
||||
--font-size-small: calc(1.5 * var(--unit));
|
||||
--font-size: calc(1.75 * var(--unit));
|
||||
--font-size-big: calc(2 * var(--unit));
|
||||
--font-weight-thin: 300;
|
||||
--font-weight-normal: 400;
|
||||
--font-weight-bold: 500;
|
||||
</code></pre></div></p>
|
||||
<p>They're intended to set consistent paddings and font-sizes across components, e.g.
|
||||
<div class="highlight"><pre><span></span><code>.status {
|
||||
padding-left: calc(var(--padding) * 2);
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
</code></pre></div></p>
|
||||
<h3 id="themable-colors">Themable colors<a class="headerlink" href="#themable-colors" title="Permanent link">#</a></h3>
|
||||
<p>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.
|
||||
<div class="highlight"><pre><span></span><code> "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"
|
||||
...
|
||||
...
|
||||
</code></pre></div></p>
|
||||
<p>They can be used in form of <code>var(--magenta)</code>.</p>
|
||||
<p>A complete list of all themable colors can be found in the <a href="../color-reference">color reference</a>.</p>
|
||||
<p>Colors values are located inside <code>src/renderer/themes/lens-dark.json</code> and <code>src/renderer/themes/lens-light.json</code> files.</p>
|
||||
<h2 id="using-css-variables-inside-css-in-js-components">Using CSS Variables inside CSS-in-JS components<a class="headerlink" href="#using-css-variables-inside-css-in-js-components" title="Permanent link">#</a></h2>
|
||||
<p>If a developer uses an <code>Emotion</code> (or similar) framework to work with styles inside an extension, they can use variables in the following form:
|
||||
<div class="highlight"><pre><span></span><code>const Container = styled.div(() => ({
|
||||
backgroundColor: 'var(--mainBackground)'
|
||||
}));
|
||||
</code></pre></div></p>
|
||||
|
||||
|
||||
|
||||
@@ -719,13 +1047,13 @@
|
||||
</a>
|
||||
|
||||
|
||||
<a href="../../guides/" class="md-footer-nav__link md-footer-nav__link--next" rel="next">
|
||||
<a href="../color-reference/" class="md-footer-nav__link md-footer-nav__link--next" rel="next">
|
||||
<div class="md-footer-nav__title">
|
||||
<div class="md-ellipsis">
|
||||
<span class="md-footer-nav__direction">
|
||||
Next
|
||||
</span>
|
||||
Overview
|
||||
Color reference
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-footer-nav__button md-icon">
|
||||
Reference in new issue
Block a user