mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Deployed e560baa2d to master with MkDocs 1.1.2 and mike 1.0.0
This commit is contained in:
GitHub Action committed
1 parent
9d9348a4ff
commit
8dd3c37633
266 files changed
+7875
-4052
No files matched your search
@@ -706,6 +706,18 @@
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="../../guides/protocol-handlers/" class="md-nav__link">
|
||||
Protocol Handlers
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
</li>
|
||||
@@ -1001,7 +1013,8 @@
|
||||
<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 the look and feel of the application.</p>
|
||||
<h2 id="layout">Layout<a class="headerlink" href="#layout" title="Permanent link">#</a></h2>
|
||||
<p>For layout tasks, Lens uses the <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, consider the following HTML and its associated CSS properties:</p>
|
||||
<p>For layout tasks, Lens uses the <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, consider the following HTML and its associated CSS properties:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="p"><</span><span class="nt">div</span> <span class="na">className</span><span class="o">=</span><span class="s">"flex column align-center"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
|
||||
</code></pre></div>
|
||||
<div class="highlight"><pre><span></span><code><span class="nt">div</span> <span class="p">{</span>
|
||||
@@ -1012,13 +1025,15 @@
|
||||
</code></pre></div>
|
||||
<p>However, you are free to use any styling technique or framework you like, including <a href="https://github.com/emotion-js/emotion">Emotion</a> or even plain CSS.</p>
|
||||
<h3 id="layout-variables">Layout Variables<a class="headerlink" href="#layout-variables" title="Permanent link">#</a></h3>
|
||||
<p>There is a set of CSS variables available for for basic layout needs. They are located inside <code>:root</code> and are defined in <a href="https://github.com/lensapp/lens/blob/master/src/renderer/components/app.scss">app.scss</a>:</p>
|
||||
<p>There is a set of CSS variables available for for basic layout needs.
|
||||
They are located inside <code>:root</code> and are defined in <a href="https://github.com/lensapp/lens/blob/master/src/renderer/components/app.scss">app.scss</a>:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="nt">--unit</span><span class="o">:</span> <span class="nt">8px</span><span class="o">;</span>
|
||||
<span class="nt">--padding</span><span class="o">:</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--unit</span><span class="o">);</span>
|
||||
<span class="nt">--margin</span><span class="o">:</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--unit</span><span class="o">);</span>
|
||||
<span class="nt">--border-radius</span><span class="o">:</span> <span class="nt">3px</span><span class="o">;</span>
|
||||
</code></pre></div>
|
||||
<p>These variables are intended to set consistent margins and paddings across components. For example:</p>
|
||||
<p>These variables are intended to set consistent margins and paddings across components.
|
||||
For example:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="p">.</span><span class="nc">status</span> <span class="p">{</span>
|
||||
<span class="k">padding-left</span><span class="p">:</span> <span class="nb">calc</span><span class="p">(</span><span class="nf">var</span><span class="p">(</span><span class="nv">--padding</span><span class="p">)</span> <span class="o">*</span> <span class="mi">2</span><span class="p">);</span>
|
||||
<span class="k">border-radius</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="nv">--border-radius</span><span class="p">);</span>
|
||||
@@ -1027,11 +1042,13 @@
|
||||
<h2 id="themes">Themes<a class="headerlink" href="#themes" title="Permanent link">#</a></h2>
|
||||
<p>Lens uses two built-in themes defined in <a href="https://github.com/lensapp/lens/tree/master/src/renderer/themes">the themes directory</a> – one light and one dark.</p>
|
||||
<h3 id="theme-variables">Theme Variables<a class="headerlink" href="#theme-variables" title="Permanent link">#</a></h3>
|
||||
<p>When Lens is loaded, it transforms the selected theme's <code>json</code> file into a list of <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties">CSS Custom Properties (CSS Variables)</a>. This list then gets injected into the <code>:root</code> element so that any of the down-level components can use them.
|
||||
<p>When Lens is loaded, it transforms the selected theme's <code>json</code> file into a list of <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties">CSS Custom Properties (CSS Variables)</a>.
|
||||
This list then gets injected into the <code>:root</code> element so that 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 the user changes the theme, the above process is repeated, and new CSS variables appear, replacing the previous ones.</p>
|
||||
<p>If you want to preserve Lens's native look and feel, with respect to the lightness or darkness of your extension, you can use the provided variables and built-in Lens components such as <code>Button</code>, <code>Select</code>, <code>Table</code>, and so on.</p>
|
||||
<p>There is a set of CSS variables available for extensions to use for theming. They are all located inside <code>:root</code> and are defined in <a href="https://github.com/lensapp/lens/blob/master/src/renderer/components/app.scss">app.scss</a>:</p>
|
||||
<p>There is a set of CSS variables available for extensions to use for theming.
|
||||
They are all located inside <code>:root</code> and are defined in <a href="https://github.com/lensapp/lens/blob/master/src/renderer/components/app.scss">app.scss</a>:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="nt">--font-main</span><span class="o">:</span> <span class="s1">'Roboto'</span><span class="o">,</span> <span class="s1">'Helvetica'</span><span class="o">,</span> <span class="s1">'Arial'</span><span class="o">,</span> <span class="nt">sans-serif</span><span class="o">;</span>
|
||||
<span class="nt">--font-monospace</span><span class="o">:</span> <span class="nt">Lucida</span> <span class="nt">Console</span><span class="o">,</span> <span class="nt">Monaco</span><span class="o">,</span> <span class="nt">Consolas</span><span class="o">,</span> <span class="nt">monospace</span><span class="o">;</span>
|
||||
<span class="nt">--font-size-small</span><span class="o">:</span> <span class="nt">calc</span><span class="o">(</span><span class="nt">1</span><span class="p">.</span><span class="nc">5</span> <span class="o">*</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--unit</span><span class="o">));</span>
|
||||
@@ -1060,15 +1077,17 @@
|
||||
--layoutTabsLineColor: #87909c80;
|
||||
...
|
||||
</code></pre></div>
|
||||
<p>These variables can be used in the following form: <code>var(--magenta)</code>. For example:</p>
|
||||
<p>These variables can be used in the following form: <code>var(--magenta)</code>.
|
||||
For example:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="p">.</span><span class="nc">status</span> <span class="p">{</span>
|
||||
<span class="k">font-size</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="nv">--font-size-small</span><span class="p">);</span>
|
||||
<span class="k">background-color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="nv">--colorSuccess</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>A complete list of themable colors can be found in the <a href="../color-reference">Color Reference</a>.</p>
|
||||
<p>A complete list of theme colors can be found in the <a href="../color-reference">Color Reference</a>.</p>
|
||||
<h3 id="theme-switching">Theme Switching<a class="headerlink" href="#theme-switching" title="Permanent link">#</a></h3>
|
||||
<p>When the light theme is active, the <code><body></code> element gets a "theme-light" class, or: <code><body class="theme-light"></code>. If the class isn't there, the theme defaults to dark. The active theme can be changed in the <strong>Preferences</strong> page:
|
||||
<p>When the light theme is active, the <code><body></code> element gets a "theme-light" class, or: <code><body class="theme-light"></code>.
|
||||
If the class isn't there, the theme defaults to dark. The active theme can be changed in the <strong>Preferences</strong> page:
|
||||
<img alt="Color Theme" src="../images/theme-selector.png" /></p>
|
||||
<p>There is a way of detect active theme and its changes in JS. <a href="https://github.com/mobxjs/mobx-react#observercomponent">MobX observer function/decorator</a> can be used for this purpose.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="nx">React</span> <span class="nx">from</span> <span class="s2">"react"</span>
|
||||
|
||||
Reference in new issue
Block a user