feat(field): add required marker

closes #166
A-l-y-l-e · Oct 25, 2021 · 972fa38 · 972fa38
1 parent be2e222
commit 972fa38
Show file tree

Hide file tree

Showing 8 changed files with 185 additions and 105 deletions.
diff --git a/src/api/docs/customization/color.html b/src/api/docs/customization/color.html
@@ -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>._e2duqdsh{background:rgb(255,255,0);opacity:1;}._e2duqdsh *{color:#202020 !important;}</style><span class="_e2duqdsh"><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>._djrbkb8g{background:rgb(0,0,0);opacity:1;}._djrbkb8g *{color:white !important;}</style><span class="_djrbkb8g"><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>._j73jgm6l{background:rgb(255,255,255);opacity:1;}._j73jgm6l *{color:#202020 !important;}</style><span class="_j73jgm6l"><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>._e901use3{background:rgba(0,0,0,0.87);opacity:0.87;}._e901use3 *{color:white !important;}</style><span class="_e901use3"><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>._16f32ilu{background:rgb(255,255,0);opacity:1;}._16f32ilu *{color:#202020 !important;}</style><span class="_16f32ilu"><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>._el8hksqv{background:rgb(0,0,0);opacity:1;}._el8hksqv *{color:white !important;}</style><span class="_el8hksqv"><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>._9fhexv5c{background:rgb(255,255,255);opacity:1;}._9fhexv5c *{color:#202020 !important;}</style><span class="_9fhexv5c"><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>._q806thb{background:rgba(0,0,0,0.87);opacity:0.87;}._q806thb *{color:white !important;}</style><span class="_q806thb"><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>._5gi3ph3m{background:rgb(255,255,255);opacity:1;}._5gi3ph3m *{color:#202020 !important;}</style><span class="_5gi3ph3m"><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>._aeidm3tf{background:rgb(0,15,255);opacity:1;}._aeidm3tf *{color:white !important;}</style><span class="_aeidm3tf"><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>._8k2azem9{background:rgb(255,255,255);opacity:1;}._8k2azem9 *{color:#202020 !important;}</style><span class="_8k2azem9"><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>._2f1kcfge{background:rgb(0,15,255);opacity:1;}._2f1kcfge *{color:white !important;}</style><span class="_2f1kcfge"><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>._7kok22ml{background:rgb(255,255,0);opacity:1;}._7kok22ml *{color:#202020 !important;}</style><span class="_7kok22ml"><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>._26zifkia{background:rgb(255,255,0);opacity:1;}._26zifkia *{color:#202020 !important;}</style><span class="_26zifkia"><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>._1iadgnh9{background:rgb(255,255,0);opacity:1;}._1iadgnh9 *{color:#202020 !important;}</style><span class="_1iadgnh9"><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>._4cieadjw{background:rgb(255,255,0);opacity:1;}._4cieadjw *{color:#202020 !important;}</style><span class="_4cieadjw"><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>._a9zjupw8{background:rgb(255,255,255);opacity:1;}._a9zjupw8 *{color:#202020 !important;}</style><span class="_a9zjupw8"><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>._hhkhkav6{background:rgb(255,255,255);opacity:1;}._hhkhkav6 *{color:#202020 !important;}</style><span class="_hhkhkav6"><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>._98butswr{background:rgb(255,255,255);opacity:1;}._98butswr *{color:#202020 !important;}</style><span class="_98butswr"><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>._hirmqfx7{background:rgb(255,255,255);opacity:1;}._hirmqfx7 *{color:#202020 !important;}</style><span class="_hirmqfx7"><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>
diff --git a/src/api/docs/customization/theming.html b/src/api/docs/customization/theming.html
@@ -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>._kfi4n2je{background:rgb(33,150,243);opacity:1;}._kfi4n2je *{color:white !important;}</style><span class="_kfi4n2je"><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>._5dgjp27{background:rgb(255,255,255);opacity:1;}._5dgjp27 *{color:#202020 !important;}</style><span class="_5dgjp27"><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>._12m405w1{background:rgb(33,150,243);opacity:1;}._12m405w1 *{color:white !important;}</style><span class="_12m405w1"><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>._80ty6c5f{background:rgb(255,255,255);opacity:1;}._80ty6c5f *{color:#202020 !important;}</style><span class="_80ty6c5f"><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>._tro7xn2{background:rgb(233,30,99);opacity:1;}._tro7xn2 *{color:white !important;}</style><span class="_tro7xn2"><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>._8g5zfdiq{background:rgb(255,255,255);opacity:1;}._8g5zfdiq *{color:#202020 !important;}</style><span class="_8g5zfdiq"><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>._idp4pg7t{background:rgb(233,30,99);opacity:1;}._idp4pg7t *{color:white !important;}</style><span class="_idp4pg7t"><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>._iu2ucioh{background:rgb(255,255,255);opacity:1;}._iu2ucioh *{color:#202020 !important;}</style><span class="_iu2ucioh"><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>
 
@@ -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>._1mkrahdc{background:rgb(156,39,176);opacity:1;}._1mkrahdc *{color:white !important;}</style><span class="_1mkrahdc"><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>._hz4qnzh1{background:rgb(255,255,255);opacity:1;}._hz4qnzh1 *{color:#202020 !important;}</style><span class="_hz4qnzh1"><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>._3azij141{background:rgb(156,39,176);opacity:1;}._3azij141 *{color:white !important;}</style><span class="_3azij141"><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>._8kduex7t{background:rgb(255,255,255);opacity:1;}._8kduex7t *{color:#202020 !important;}</style><span class="_8kduex7t"><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>._7hsknm1m{background:rgb(105,240,174);opacity:1;}._7hsknm1m *{color:#202020 !important;}</style><span class="_7hsknm1m"><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>._kf477xin{background:rgb(32,32,32);opacity:1;}._kf477xin *{color:white !important;}</style><span class="_kf477xin"><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>._ftlww1mt{background:rgb(105,240,174);opacity:1;}._ftlww1mt *{color:#202020 !important;}</style><span class="_ftlww1mt"><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>._574zknl8{background:rgb(32,32,32);opacity:1;}._574zknl8 *{color:white !important;}</style><span class="_574zknl8"><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>