feat: theme system

Author: wkylin

coverage/clover.xml

@@ -23,30 +23,30 @@ <h1>All files</h1>
         <div class='clearfix'>
 
             <div class='fl pad1y space-right2'>
-                <span class="strong">77.07% </span>
+                <span class="strong">100% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>195/253</span>
+                <span class='fraction'>32/32</span>
             </div>
 
 
             <div class='fl pad1y space-right2'>
-                <span class="strong">54.97% </span>
+                <span class="strong">77.27% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>116/211</span>
+                <span class='fraction'>17/22</span>
             </div>
 
 
             <div class='fl pad1y space-right2'>
-                <span class="strong">77.04% </span>
+                <span class="strong">100% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>47/61</span>
+                <span class='fraction'>8/8</span>
             </div>
 
 
             <div class='fl pad1y space-right2'>
-                <span class="strong">77.67% </span>
+                <span class="strong">100% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>174/224</span>
+                <span class='fraction'>29/29</span>
             </div>
 
 
@@ -61,7 +61,7 @@ <h1>All files</h1>
             </div>
         </template>
     </div>
-    <div class='status-line medium'></div>
+    <div class='status-line high'></div>
     <div class="pad1">
 <table class="coverage-summary">
 <thead>
@@ -79,63 +79,18 @@ <h1>All files</h1>
 </tr>
 </thead>
 <tbody><tr>
-	<td class="file high" data-value="jest"><a href="jest/index.html">jest</a></td>
+	<td class="file high" data-value="index.jsx"><a href="index.jsx.html">index.jsx</a></td>
 	<td data-value="100" class="pic high">
 	<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
 	</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="21" class="abs high">21/21</td>
-	<td data-value="72.72" class="pct medium">72.72%</td>
-	<td data-value="11" class="abs medium">8/11</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="5" class="abs high">5/5</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="19" class="abs high">19/19</td>
-	</tr>
-
-<tr>
-	<td class="file medium" data-value="src/components/stateless/OneTimePasscode"><a href="src/components/stateless/OneTimePasscode/index.html">src/components/stateless/OneTimePasscode</a></td>
-	<td data-value="79.28" class="pic medium">
-	<div class="chart"><div class="cover-fill" style="width: 79%"></div><div class="cover-empty" style="width: 21%"></div></div>
-	</td>
-	<td data-value="79.28" class="pct medium">79.28%</td>
-	<td data-value="140" class="abs medium">111/140</td>
-	<td data-value="51.31" class="pct medium">51.31%</td>
-	<td data-value="152" class="abs medium">78/152</td>
-	<td data-value="87.09" class="pct high">87.09%</td>
-	<td data-value="31" class="abs high">27/31</td>
-	<td data-value="81.66" class="pct high">81.66%</td>
-	<td data-value="120" class="abs high">98/120</td>
-	</tr>
-
-<tr>
-	<td class="file high" data-value="src/components/stateless/StickyCard"><a href="src/components/stateless/StickyCard/index.html">src/components/stateless/StickyCard</a></td>
-	<td data-value="100" class="pic high">
-	<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
-	</td>
-	<td data-value="100" class="pct high">100%</td>
-	<td data-value="31" class="abs high">31/31</td>
+	<td data-value="32" class="abs high">32/32</td>
 	<td data-value="77.27" class="pct medium">77.27%</td>
 	<td data-value="22" class="abs medium">17/22</td>
 	<td data-value="100" class="pct high">100%</td>
 	<td data-value="8" class="abs high">8/8</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="28" class="abs high">28/28</td>
-	</tr>
-
-<tr>
-	<td class="file medium" data-value="src/theme"><a href="src/theme/index.html">src/theme</a></td>
-	<td data-value="52.45" class="pic medium">
-	<div class="chart"><div class="cover-fill" style="width: 52%"></div><div class="cover-empty" style="width: 48%"></div></div>
-	</td>
-	<td data-value="52.45" class="pct medium">52.45%</td>
-	<td data-value="61" class="abs medium">32/61</td>
-	<td data-value="50" class="pct medium">50%</td>
-	<td data-value="26" class="abs medium">13/26</td>
-	<td data-value="41.17" class="pct low">41.17%</td>
-	<td data-value="17" class="abs low">7/17</td>
-	<td data-value="50.87" class="pct medium">50.87%</td>
-	<td data-value="57" class="abs medium">29/57</td>
+	<td data-value="29" class="abs high">29/29</td>
 	</tr>
 
 </tbody>
@@ -146,7 +101,7 @@ <h1>All files</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-12-28T01:55:58.738Z
+                at 2026-01-02T05:32:56.204Z
             </div>
         <script src="prettify.js"></script>
         <script>

coverage/coverage-final.json

@@ -25,28 +25,28 @@ <h1><a href="index.html">All files</a> index.jsx</h1>
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>3/3</span>
+                <span class='fraction'>32/32</span>
             </div>
 
 
             <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
+                <span class="strong">77.27% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>2/2</span>
+                <span class='fraction'>17/22</span>
             </div>
 
 
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>2/2</span>
+                <span class='fraction'>8/8</span>
             </div>
 
 
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>3/3</span>
+                <span class='fraction'>29/29</span>
             </div>
 
 
@@ -93,12 +93,26 @@ <h1><a href="index.html">All files</a> index.jsx</h1>
 <a name='L28'></a><a href='#L28'>28</a>
 <a name='L29'></a><a href='#L29'>29</a>
 <a name='L30'></a><a href='#L30'>30</a>
-<a name='L31'></a><a href='#L31'>31</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L31'></a><a href='#L31'>31</a>
+<a name='L32'></a><a href='#L32'>32</a>
+<a name='L33'></a><a href='#L33'>33</a>
+<a name='L34'></a><a href='#L34'>34</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">3x</span>
+<span class="cline-any cline-yes">3x</span>
+<span class="cline-any cline-yes">29x</span>
+<span class="cline-any cline-yes">29x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">3x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -108,50 +122,45 @@ <h1><a href="index.html">All files</a> index.jsx</h1>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import React, { useId } from 'react'
-import clsx from 'clsx'
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span></td><td class="text"><pre class="prettyprint lang-js">import clsx from 'clsx'
+import PropTypes from 'prop-types'
 &nbsp;
 const StickyCard = ({ cards, children }) =&gt; {
   return (
-    &lt;&gt;
-      &lt;section className="flex flex-col gap-4 pt-30 pb-20"&gt;
-        {cards.map((card, index) =&gt; {
-          const animateSlide = index % 2 === 0 ? 'animate-slide-in-left' : 'animate-slide-in-right'
-          return (
-            &lt;div
-              key={card?.id}
-              style={{ top: `calc(50px + ${(index + 1) * 30}px)` }}
-              className={clsx(
-                'sticky z-0 m-auto flex w-[50vw] justify-center overflow-hidden rounded-2xl bg-[#0a192f] px-8 pt-4 after:pointer-events-none after:absolute after:inset-0 after:z-10 after:rounded-2xl after:outline after:-outline-offset-2 after:outline-white/20',
-                animateSlide
-              )}
-            &gt;
-              &lt;div className="animate-wiggle h-[30vh]"&gt;
-                &lt;p className="animate-hue-rotate hue-clip text-gradient text-2xl"&gt;Card Item&lt;/p&gt;
-              &lt;/div&gt;
+    &lt;section className="flex flex-col gap-4 pt-[30px] pb-[20px]"&gt;
+      {cards.map((card, index) =&gt; {
+        const animateSlide = index % 2 === 0 ? 'animate-slide-in-left' : 'animate-slide-in-right'
+        return (
+          &lt;div
+            key={card?.id}
+  <span class="missing-if-branch" title="else path not taken" >E</span>          style={{ position: 'sticky', top: `calc(50px + ${(index + 1) * 30}px)` }}
+            className={clsx(
+      <span class="missing-if-branch" title="else path not taken" >E</span>        'sticky z-10 m-auto flex w-[50vw] justify-center overflow-hidden rounded-2xl bg-[#0a192f] px-8 pt-4 after:pointer-events-none after:absolute after:inset-0 after:z-10 after:rounded-2xl after:outline after:-outline-offset-2 after:outline-white/20',
+              animateSlide
+            )}
+          &gt;
+            &lt;div className="animate-wiggle h-[30vh]"&gt;
+              &lt;p className="animate-hue-rotate hue-clip text-gradient text-2xl"&gt;Card Item&lt;/p&gt;<span class="branch-1 cbranch-no" title="branch not covered" ></span>
             &lt;/div&gt;
-          )
-        })}
-      &lt;/section&gt;
-    &lt;/&gt;
+          &lt;/div&gt;
+        )
+      })}
+    &lt;/section&gt;<span class="branch-1 cbranch-no" title="branch not covered" ></span>
   )
 }
 &nbsp;
+StickyCard.propTypes = {
+  cards: PropTypes.array.isRequired,
+  children: PropTypes.node
+}
+&nbsp;
 export default StickyCard
 &nbsp;</pre></td></tr></table></pre>
 
@@ -160,7 +169,7 @@ <h1><a href="index.html">All files</a> index.jsx</h1>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2025-12-12T07:00:17.261Z
+                at 2026-01-02T05:32:56.204Z
             </div>
         <script src="prettify.js"></script>
         <script>