Skip to content

Commit

Permalink
fix(): use Platform CDK
Browse files Browse the repository at this point in the history
  • Loading branch information
Enlcxx committed May 22, 2020
1 parent b07bb90 commit 34205fe
Show file tree
Hide file tree
Showing 26 changed files with 173 additions and 112 deletions.
18 changes: 9 additions & 9 deletions src/api/docs/customization/color.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,24 +5,24 @@ <h1 id="color">Color</h1>
<h2 id="supported-values">Supported values</h2>
<pre class="ttb"><code prsm class="ttm"><span class="tt18 tt1j">import</span> <span class="tt18 ttae">&#123;</span> color <span class="tt18 ttae">&#125;</span> <span class="tt18 tt1j">from</span> <span class="tt18 tt3z">'@alyle/ui/color'</span><span class="tt18 ttae">;</span>

<span class="tt18 tt1j">const</span> Yellow <span class="tt18 ttb0">=</span> <style>._7kpmr3b8{background:rgb(255,255,0);opacity:1;}._7kpmr3b8 *{color:#202020 !important;}</style><span class="_7kpmr3b8"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// rgb</span>
<span class="tt18 tt1j">const</span> Black <span class="tt18 ttb0">=</span> <style>._guq33ajb{background:rgb(0,0,0);opacity:1;}._guq33ajb *{color:white !important;}</style><span class="_guq33ajb"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// number</span>
<span class="tt18 tt1j">const</span> White <span class="tt18 ttb0">=</span> <style>._8jrz7ksc{background:rgb(255,255,255);opacity:1;}._8jrz7ksc *{color:#202020 !important;}</style><span class="_8jrz7ksc"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// hex</span>
<span class="tt18 tt1j">const</span> Text <span class="tt18 ttb0">=</span> <style>._fvctu016{background:rgba(0,0,0,0.87);opacity:0.87;}._fvctu016 *{color:white !important;}</style><span class="_fvctu016"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">.87</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// rgba</span>
<span class="tt18 tt1j">const</span> Yellow <span class="tt18 ttb0">=</span> <style>._hjmxmvyd{background:rgb(255,255,0);opacity:1;}._hjmxmvyd *{color:#202020 !important;}</style><span class="_hjmxmvyd"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// rgb</span>
<span class="tt18 tt1j">const</span> Black <span class="tt18 ttb0">=</span> <style>._3k5flr0h{background:rgb(0,0,0);opacity:1;}._3k5flr0h *{color:white !important;}</style><span class="_3k5flr0h"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// number</span>
<span class="tt18 tt1j">const</span> White <span class="tt18 ttb0">=</span> <style>._c4syych9{background:rgb(255,255,255);opacity:1;}._c4syych9 *{color:#202020 !important;}</style><span class="_c4syych9"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// hex</span>
<span class="tt18 tt1j">const</span> Text <span class="tt18 ttb0">=</span> <style>._bz4knf2x{background:rgba(0,0,0,0.87);opacity:0.87;}._bz4knf2x *{color:white !important;}</style><span class="_bz4knf2x"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">.87</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// rgba</span>
</code></pre>
<p>Note that a 6-digit hexadecimal is different from a 3-digit hexadecimal.</p>
<pre class="ttb"><code prsm class="ttm"><style>._estsu00k{background:rgb(255,255,255);opacity:1;}._estsu00k *{color:#202020 !important;}</style><span class="_estsu00k"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">css</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span> <span class="tt18 ttb0">!==</span> <style>._90i8k42i{background:rgb(0,15,255);opacity:1;}._90i8k42i *{color:white !important;}</style><span class="_90i8k42i"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xfff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">css</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// true</span>
<pre class="ttb"><code prsm class="ttm"><style>._3s3iby1h{background:rgb(255,255,255);opacity:1;}._3s3iby1h *{color:#202020 !important;}</style><span class="_3s3iby1h"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">css</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span> <span class="tt18 ttb0">!==</span> <style>._3uor12g2{background:rgb(0,15,255);opacity:1;}._3uor12g2 *{color:white !important;}</style><span class="_3uor12g2"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xfff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">css</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// true</span>
</code></pre>
<h2 id="how-to-use-color">How to use <code class="ttm ttx">color</code></h2>
<p><code class="ttm ttx">color</code> and the previously mentioned methods returns an immutable <code class="ttm ttx">Color</code>.</p>
<pre class="ttb"><code prsm class="ttm"><span class="tt18 tt1j">import</span> <span class="tt18 ttae">&#123;</span> color <span class="tt18 ttae">&#125;</span> <span class="tt18 tt1j">from</span> <span class="tt18 tt3z">'@alyle/ui/color'</span><span class="tt18 ttae">;</span>

<span class="tt18 tt1j">const</span> Yellow <span class="tt18 ttb0">=</span> <style>._8s5klxay{background:rgb(255,255,0);opacity:1;}._8s5klxay *{color:#202020 !important;}</style><span class="_8s5klxay"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>
<span class="tt18 tt1j">const</span> Yellow <span class="tt18 ttb0">=</span> <style>._4ibsctvy{background:rgb(255,255,0);opacity:1;}._4ibsctvy *{color:#202020 !important;}</style><span class="_4ibsctvy"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>
</code></pre>
<p>Using methods:</p>
<pre class="ttb"><code prsm class="ttm"><span class="tt18 tt1j">const</span> Yellow <span class="tt18 ttb0">=</span> <style>._9ct4culi{background:rgb(255,255,0);opacity:1;}._9ct4culi *{color:#202020 !important;}</style><span class="_9ct4culi"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>
<pre class="ttb"><code prsm class="ttm"><span class="tt18 tt1j">const</span> Yellow <span class="tt18 ttb0">=</span> <style>._4p2nd8kk{background:rgb(255,255,0);opacity:1;}._4p2nd8kk *{color:#202020 !important;}</style><span class="_4p2nd8kk"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">255</span><span class="tt18 ttae">,</span> <span class="tt18 ttap">0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">;</span>
Yellow<span class="tt18 ttae">.</span><span class="tt18 tta3">darken</span><span class="tt18 ttae">(</span><span class="tt18 ttap">2</span><span class="tt18 ttae">)</span><span class="tt18 ttae">.</span><span class="tt18 tta3">alpha</span><span class="tt18 ttae">(</span><span class="tt18 ttap">.94</span><span class="tt18 ttae">)</span><span class="tt18 ttae">.</span><span class="tt18 tta3">css</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// --> rgba(145,156,0,0.94)</span>
</code></pre>
<pre class="ttb"><code prsm class="ttm"><style>._9qh09w0q{background:rgb(255,255,255);opacity:1;}._9qh09w0q *{color:#202020 !important;}</style><span class="_9qh09w0q"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">luminance</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// --> 1</span>
<style>._ixucjogo{background:rgb(255,255,255);opacity:1;}._ixucjogo *{color:#202020 !important;}</style><span class="_ixucjogo"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">luminance</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0.5</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// --> rgb(194,194,0)</span>
<pre class="ttb"><code prsm class="ttm"><style>._5czxbsqx{background:rgb(255,255,255);opacity:1;}._5czxbsqx *{color:#202020 !important;}</style><span class="_5czxbsqx"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">luminance</span><span class="tt18 ttae">(</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// --> 1</span>
<style>._d2ej26ur{background:rgb(255,255,255);opacity:1;}._d2ej26ur *{color:#202020 !important;}</style><span class="_d2ej26ur"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">.</span><span class="tt18 tta3">luminance</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0.5</span><span class="tt18 ttae">)</span><span class="tt18 ttae">;</span> <span class="tt18 tt3o">// --> rgb(194,194,0)</span>
</code></pre>
16 changes: 8 additions & 8 deletions src/api/docs/customization/theming.html
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,12 @@ <h2 id="overwriting-the-variables-of-a-theme">Overwriting the variables of a the
<span class="tt18 tt1j">export</span> <span class="tt18 tt1j">class</span> <span class="tt18 ttc8">CustomMinimaLight</span> <span class="tt18 tt1j">implements</span> <span class="tt18 ttc8">PartialThemeVariables</span> <span class="tt18 ttae">&#123;</span>
name <span class="tt18 ttb0">=</span> <span class="tt18 tt3z">'minima-light'</span><span class="tt18 ttae">;</span>
primary <span class="tt18 ttb0">=</span> <span class="tt18 ttae">&#123;</span>
<span class="tt18 tt1j">default</span><span class="tt18 ttb0">:</span> <style>._688gv3mk{background:rgb(33,150,243);opacity:1;}._688gv3mk *{color:white !important;}</style><span class="_688gv3mk"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0x2196f3</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">,</span>
contrast<span class="tt18 ttb0">:</span> <style>._bz288a8d{background:rgb(255,255,255);opacity:1;}._bz288a8d *{color:#202020 !important;}</style><span class="_bz288a8d"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span>
<span class="tt18 tt1j">default</span><span class="tt18 ttb0">:</span> <style>._2pckvpit{background:rgb(33,150,243);opacity:1;}._2pckvpit *{color:white !important;}</style><span class="_2pckvpit"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0x2196f3</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">,</span>
contrast<span class="tt18 ttb0">:</span> <style>._j6bc4z89{background:rgb(255,255,255);opacity:1;}._j6bc4z89 *{color:#202020 !important;}</style><span class="_j6bc4z89"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span>
<span class="tt18 ttae">&#125;</span><span class="tt18 ttae">;</span>
accent <span class="tt18 ttb0">=</span> <span class="tt18 ttae">&#123;</span>
<span class="tt18 tt1j">default</span><span class="tt18 ttb0">:</span> <style>._3em8brx1{background:rgb(233,30,99);opacity:1;}._3em8brx1 *{color:white !important;}</style><span class="_3em8brx1"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xe91e63</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">,</span>
contrast<span class="tt18 ttb0">:</span> <style>._e9w16xfi{background:rgb(255,255,255);opacity:1;}._e9w16xfi *{color:#202020 !important;}</style><span class="_e9w16xfi"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span>
<span class="tt18 tt1j">default</span><span class="tt18 ttb0">:</span> <style>._8q98lv7y{background:rgb(233,30,99);opacity:1;}._8q98lv7y *{color:white !important;}</style><span class="_8q98lv7y"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xe91e63</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">,</span>
contrast<span class="tt18 ttb0">:</span> <style>._b5jrc76a{background:rgb(255,255,255);opacity:1;}._b5jrc76a *{color:#202020 !important;}</style><span class="_b5jrc76a"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span>
<span class="tt18 ttae">&#125;</span><span class="tt18 ttae">;</span>
<span class="tt18 ttae">&#125;</span>

Expand All @@ -41,12 +41,12 @@ <h2 id="overwriting-the-variables-of-a-theme">Overwriting the variables of a the
<span class="tt18 tt1j">export</span> <span class="tt18 tt1j">class</span> <span class="tt18 ttc8">CustomMinimaDark</span> <span class="tt18 tt1j">implements</span> <span class="tt18 ttc8">PartialThemeVariables</span> <span class="tt18 ttae">&#123;</span>
name <span class="tt18 ttb0">=</span> <span class="tt18 tt3z">'minima-dark'</span><span class="tt18 ttae">;</span>
primary <span class="tt18 ttb0">=</span> <span class="tt18 ttae">&#123;</span>
<span class="tt18 tt1j">default</span><span class="tt18 ttb0">:</span> <style>._47n6u44g{background:rgb(156,39,176);opacity:1;}._47n6u44g *{color:white !important;}</style><span class="_47n6u44g"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0x9c27b0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">,</span>
contrast<span class="tt18 ttb0">:</span> <style>._f7b2a19p{background:rgb(255,255,255);opacity:1;}._f7b2a19p *{color:#202020 !important;}</style><span class="_f7b2a19p"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span>
<span class="tt18 tt1j">default</span><span class="tt18 ttb0">:</span> <style>._2u04354c{background:rgb(156,39,176);opacity:1;}._2u04354c *{color:white !important;}</style><span class="_2u04354c"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0x9c27b0</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">,</span>
contrast<span class="tt18 ttb0">:</span> <style>._cndycf0x{background:rgb(255,255,255);opacity:1;}._cndycf0x *{color:#202020 !important;}</style><span class="_cndycf0x"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0xffffff</span><span class="tt18 ttae">)</span></span>
<span class="tt18 ttae">&#125;</span><span class="tt18 ttae">;</span>
accent <span class="tt18 ttb0">=</span> <span class="tt18 ttae">&#123;</span>
<span class="tt18 tt1j">default</span><span class="tt18 ttb0">:</span> <style>._4unjyet{background:rgb(105,240,174);opacity:1;}._4unjyet *{color:#202020 !important;}</style><span class="_4unjyet"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0x69f0ae</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">,</span>
contrast<span class="tt18 ttb0">:</span> <style>._2m0x7bru{background:rgb(32,32,32);opacity:1;}._2m0x7bru *{color:white !important;}</style><span class="_2m0x7bru"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0x202020</span><span class="tt18 ttae">)</span></span>
<span class="tt18 tt1j">default</span><span class="tt18 ttb0">:</span> <style>._bjaggtu9{background:rgb(105,240,174);opacity:1;}._bjaggtu9 *{color:#202020 !important;}</style><span class="_bjaggtu9"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0x69f0ae</span><span class="tt18 ttae">)</span></span><span class="tt18 ttae">,</span>
contrast<span class="tt18 ttb0">:</span> <style>._9ieqw6ia{background:rgb(32,32,32);opacity:1;}._9ieqw6ia *{color:white !important;}</style><span class="_9ieqw6ia"><span class="tt18 tta3">color</span><span class="tt18 ttae">(</span><span class="tt18 ttap">0x202020</span><span class="tt18 ttae">)</span></span>
<span class="tt18 ttae">&#125;</span><span class="tt18 ttae">;</span>
<span class="tt18 ttae">&#125;</span>

Expand Down
Loading

0 comments on commit 34205fe

Please sign in to comment.