@bookklik/senangstart-css 0.1.2 → 0.1.4

package/docs/.vitepress/dist/assets/ms_reference_visual.md.BVOlkEqc.js

@@ -0,0 +1,22 @@
+import{_ as i,c as a,o as t,ae as e}from"./chunks/framework.I305HrzY.js";const E=JSON.parse('{"title":"Rujukan visual","description":"","frontmatter":{},"headers":[],"relativePath":"ms/reference/visual.md","filePath":"ms/reference/visual.md"}'),h={name:"ms/reference/visual.md"};function d(n,s,l,k,p,r){return t(),a("div",null,[...s[0]||(s[0]=[e(`<h1 id="rujukan-visual" tabindex="-1">Rujukan visual <a class="header-anchor" href="#rujukan-visual" aria-label="Permalink to &quot;Rujukan visual&quot;">​</a></h1><p>Atribusi <code>visual</code> mengawal warna, tekstur, dan penampilan.</p><h2 id="latar-belakang" tabindex="-1">Latar Belakang <a class="header-anchor" href="#latar-belakang" aria-label="Permalink to &quot;Latar Belakang&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Property</th><th>Output CSS</th></tr></thead><tbody><tr><td><code>bg:white</code></td><td><code>background-color: var(--c-white)</code></td></tr><tr><td><code>bg:primary</code></td><td><code>background-color: var(--c-primary)</code></td></tr><tr><td><code>bg:[#hex]</code></td><td><code>background-color: #hex</code></td></tr></tbody></table><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:white&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Latar belakang putih&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:primary&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Warna primary&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:[#FF5733]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Hex tersuai&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:[rgba(0,0,0,0.5)]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Separa lutsinar&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="warna-teks" tabindex="-1">Warna Teks <a class="header-anchor" href="#warna-teks" aria-label="Permalink to &quot;Warna Teks&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Property</th><th>Output CSS</th></tr></thead><tbody><tr><td><code>text:dark</code></td><td><code>color: var(--c-dark)</code></td></tr><tr><td><code>text:grey</code></td><td><code>color: var(--c-grey)</code></td></tr><tr><td><code>text:primary</code></td><td><code>color: var(--c-primary)</code></td></tr></tbody></table><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Teks gelap&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:grey&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Teks kelabu&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:primary&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Teks primary&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="saiz-teks" tabindex="-1">Saiz Teks <a class="header-anchor" href="#saiz-teks" aria-label="Permalink to &quot;Saiz Teks&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Property</th><th>Output CSS</th></tr></thead><tbody><tr><td><code>text-size:tiny</code></td><td><code>font-size: 12px</code></td></tr><tr><td><code>text-size:small</code></td><td><code>font-size: 14px</code></td></tr><tr><td><code>text-size:medium</code></td><td><code>font-size: 16px</code></td></tr><tr><td><code>text-size:big</code></td><td><code>font-size: 20px</code></td></tr><tr><td><code>text-size:giant</code></td><td><code>font-size: 32px</code></td></tr><tr><td><code>text-size:vast</code></td><td><code>font-size: 48px</code></td></tr></tbody></table><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text-size:small&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Teks kecil&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h1</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text-size:giant&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Tajuk giant&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="berat-fon" tabindex="-1">Berat Fon <a class="header-anchor" href="#berat-fon" aria-label="Permalink to &quot;Berat Fon&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Property</th><th>Output CSS</th></tr></thead><tbody><tr><td><code>font:normal</code></td><td><code>font-weight: 400</code></td></tr><tr><td><code>font:medium</code></td><td><code>font-weight: 500</code></td></tr><tr><td><code>font:bold</code></td><td><code>font-weight: 700</code></td></tr></tbody></table><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;font:normal&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Berat normal&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;font:bold&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Teks tebal&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="penjajaran-teks" tabindex="-1">Penjajaran Teks <a class="header-anchor" href="#penjajaran-teks" aria-label="Permalink to &quot;Penjajaran Teks&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Property</th><th>Output CSS</th></tr></thead><tbody><tr><td><code>text:left</code></td><td><code>text-align: left</code></td></tr><tr><td><code>text:center</code></td><td><code>text-align: center</code></td></tr><tr><td><code>text:right</code></td><td><code>text-align: right</code></td></tr></tbody></table><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:center&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Teks di tengah&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="radius-sempadan" tabindex="-1">Radius Sempadan <a class="header-anchor" href="#radius-sempadan" aria-label="Permalink to &quot;Radius Sempadan&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Property</th><th>Output CSS</th></tr></thead><tbody><tr><td><code>rounded:none</code></td><td><code>border-radius: 0</code></td></tr><tr><td><code>rounded:small</code></td><td><code>border-radius: 4px</code></td></tr><tr><td><code>rounded:medium</code></td><td><code>border-radius: 8px</code></td></tr><tr><td><code>rounded:big</code></td><td><code>border-radius: 16px</code></td></tr><tr><td><code>rounded:round</code></td><td><code>border-radius: 9999px</code></td></tr></tbody></table><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rounded:small&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Pembulatan halus&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rounded:big&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Pembulatan jelas&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rounded:round&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Butang pill&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="bayang-kotak" tabindex="-1">Bayang Kotak <a class="header-anchor" href="#bayang-kotak" aria-label="Permalink to &quot;Bayang Kotak&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Property</th><th>Output CSS</th></tr></thead><tbody><tr><td><code>shadow:none</code></td><td><code>box-shadow: none</code></td></tr><tr><td><code>shadow:small</code></td><td><code>box-shadow: 0 1px 2px rgba(0,0,0,0.05)</code></td></tr><tr><td><code>shadow:medium</code></td><td><code>box-shadow: 0 4px 6px rgba(0,0,0,0.1)</code></td></tr><tr><td><code>shadow:big</code></td><td><code>box-shadow: 0 10px 15px rgba(0,0,0,0.15)</code></td></tr><tr><td><code>shadow:giant</code></td><td><code>box-shadow: 0 25px 50px rgba(0,0,0,0.25)</code></td></tr></tbody></table><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;shadow:small&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Bayang halus&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;shadow:big&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Bayang ketara&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="sempadan" tabindex="-1">Sempadan <a class="header-anchor" href="#sempadan" aria-label="Permalink to &quot;Sempadan&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Property</th><th>Output CSS</th></tr></thead><tbody><tr><td><code>border:grey</code></td><td><code>border-color: var(--c-grey); border-style: solid</code></td></tr><tr><td><code>border-w:[2px]</code></td><td><code>border-width: 2px; border-style: solid</code></td></tr></tbody></table><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;border:grey border-w:[1px]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Elemen bersempadan&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="kelegapan" tabindex="-1">Kelegapan <a class="header-anchor" href="#kelegapan" aria-label="Permalink to &quot;Kelegapan&quot;">​</a></h2><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;opacity:[0.5]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;50% kelegapan&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;opacity:[0.8]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;80% kelegapan&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="palet-warna" tabindex="-1">Palet Warna <a class="header-anchor" href="#palet-warna" aria-label="Permalink to &quot;Palet Warna&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Kunci</th><th>Nilai Lalai</th></tr></thead><tbody><tr><td><code>white</code></td><td>#FFFFFF</td></tr><tr><td><code>black</code></td><td>#000000</td></tr><tr><td><code>grey</code></td><td>#6B7280</td></tr><tr><td><code>dark</code></td><td>#1F2937</td></tr><tr><td><code>light</code></td><td>#F3F4F6</td></tr><tr><td><code>primary</code></td><td>#3B82F6</td></tr><tr><td><code>success</code></td><td>#10B981</td></tr><tr><td><code>warning</code></td><td>#F59E0B</td></tr><tr><td><code>danger</code></td><td>#EF4444</td></tr></tbody></table><h2 id="prefiks-keadaan" tabindex="-1">Prefiks Keadaan <a class="header-anchor" href="#prefiks-keadaan" aria-label="Permalink to &quot;Prefiks Keadaan&quot;">​</a></h2><p>Gabungkan dengan <code>hover:</code>, <code>focus:</code>, <code>active:</code>, <code>disabled:</code>:</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:primary hover:bg:[#2563EB]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  Kesan hover</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:grey hover:text:primary&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  Hover pautan</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">input</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;border:grey focus:border:primary&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span></code></pre></div><h2 id="menggabungkan-sari-diri" tabindex="-1">Menggabungkan Sari Diri <a class="header-anchor" href="#menggabungkan-sari-diri" aria-label="Permalink to &quot;Menggabungkan Sari Diri&quot;">​</a></h2><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:white rounded:big shadow:medium text:dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  Kad dengan pelbagai visual properties</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div>`,35)])])}const g=i(h,[["render",d]]);export{E as __pageData,g as default};

package/docs/.vitepress/dist/assets/ms_reference_visual.md.BVOlkEqc.lean.js

@@ -0,0 +1 @@
+import{_ as i,c as a,o as t,ae as e}from"./chunks/framework.I305HrzY.js";const E=JSON.parse('{"title":"Rujukan visual","description":"","frontmatter":{},"headers":[],"relativePath":"ms/reference/visual.md","filePath":"ms/reference/visual.md"}'),h={name:"ms/reference/visual.md"};function d(n,s,l,k,p,r){return t(),a("div",null,[...s[0]||(s[0]=[e("",35)])])}const g=i(h,[["render",d]]);export{E as __pageData,g as default};

package/docs/.vitepress/dist/assets/{reference_breakpoints.md.BEhuwXBS.js → reference_breakpoints.md.BRbG8Fzi.js}

@@ -1,4 +1,4 @@
-import{_ as i,c as a,o as t,ag as n}from"./chunks/framework.qISVh_QZ.js";const o=JSON.parse('{"title":"Breakpoints Reference","description":"","frontmatter":{},"headers":[],"relativePath":"reference/breakpoints.md","filePath":"reference/breakpoints.md"}'),e={name:"reference/breakpoints.md"};function l(h,s,p,k,d,r){return t(),a("div",null,[...s[0]||(s[0]=[n(`<h1 id="breakpoints-reference" tabindex="-1">Breakpoints Reference <a class="header-anchor" href="#breakpoints-reference" aria-label="Permalink to &quot;Breakpoints Reference&quot;">​</a></h1><p>Complete reference for responsive breakpoints.</p><h2 id="default-breakpoints" tabindex="-1">Default Breakpoints <a class="header-anchor" href="#default-breakpoints" aria-label="Permalink to &quot;Default Breakpoints&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Prefix</th><th>Min-Width</th><th>Device Target</th></tr></thead><tbody><tr><td>(none)</td><td>0px</td><td>Mobile (default)</td></tr><tr><td><code>mob:</code></td><td>480px</td><td>Large mobile</td></tr><tr><td><code>tab:</code></td><td>768px</td><td>Tablet</td></tr><tr><td><code>lap:</code></td><td>1024px</td><td>Laptop</td></tr><tr><td><code>desk:</code></td><td>1280px</td><td>Desktop</td></tr></tbody></table><h2 id="css-media-queries" tabindex="-1">CSS Media Queries <a class="header-anchor" href="#css-media-queries" aria-label="Permalink to &quot;CSS Media Queries&quot;">​</a></h2><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* Mobile first - no prefix needed */</span></span>
+import{_ as i,c as a,o as t,ae as n}from"./chunks/framework.I305HrzY.js";const o=JSON.parse('{"title":"Breakpoints Reference","description":"","frontmatter":{},"headers":[],"relativePath":"reference/breakpoints.md","filePath":"reference/breakpoints.md"}'),e={name:"reference/breakpoints.md"};function l(h,s,p,k,d,r){return t(),a("div",null,[...s[0]||(s[0]=[n(`<h1 id="breakpoints-reference" tabindex="-1">Breakpoints Reference <a class="header-anchor" href="#breakpoints-reference" aria-label="Permalink to &quot;Breakpoints Reference&quot;">​</a></h1><p>Complete reference for responsive breakpoints.</p><h2 id="default-breakpoints" tabindex="-1">Default Breakpoints <a class="header-anchor" href="#default-breakpoints" aria-label="Permalink to &quot;Default Breakpoints&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Prefix</th><th>Min-Width</th><th>Device Target</th></tr></thead><tbody><tr><td>(none)</td><td>0px</td><td>Mobile (default)</td></tr><tr><td><code>mob:</code></td><td>480px</td><td>Large mobile</td></tr><tr><td><code>tab:</code></td><td>768px</td><td>Tablet</td></tr><tr><td><code>lap:</code></td><td>1024px</td><td>Laptop</td></tr><tr><td><code>desk:</code></td><td>1280px</td><td>Desktop</td></tr></tbody></table><h2 id="css-media-queries" tabindex="-1">CSS Media Queries <a class="header-anchor" href="#css-media-queries" aria-label="Permalink to &quot;CSS Media Queries&quot;">​</a></h2><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* Mobile first - no prefix needed */</span></span>
 <span class="line"></span>
 <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@media</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">min-width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">480</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) { </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* mob: */</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
 <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@media</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">min-width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">768</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) { </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* tab: */</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>

package/docs/.vitepress/dist/assets/{reference_breakpoints.md.BEhuwXBS.lean.js → reference_breakpoints.md.BRbG8Fzi.lean.js}

@@ -1 +1 @@
-import{_ as i,c as a,o as t,ag as n}from"./chunks/framework.qISVh_QZ.js";const o=JSON.parse('{"title":"Breakpoints Reference","description":"","frontmatter":{},"headers":[],"relativePath":"reference/breakpoints.md","filePath":"reference/breakpoints.md"}'),e={name:"reference/breakpoints.md"};function l(h,s,p,k,d,r){return t(),a("div",null,[...s[0]||(s[0]=[n("",29)])])}const g=i(e,[["render",l]]);export{o as __pageData,g as default};
+import{_ as i,c as a,o as t,ae as n}from"./chunks/framework.I305HrzY.js";const o=JSON.parse('{"title":"Breakpoints Reference","description":"","frontmatter":{},"headers":[],"relativePath":"reference/breakpoints.md","filePath":"reference/breakpoints.md"}'),e={name:"reference/breakpoints.md"};function l(h,s,p,k,d,r){return t(),a("div",null,[...s[0]||(s[0]=[n("",29)])])}const g=i(e,[["render",l]]);export{o as __pageData,g as default};

package/docs/.vitepress/dist/assets/reference_colors.md.C7j7dSO1.js

@@ -0,0 +1,17 @@
+import{_ as a,c as s,o as p,ae as t}from"./chunks/framework.I305HrzY.js";const h=JSON.parse('{"title":"Colors Reference","description":"","frontmatter":{},"headers":[],"relativePath":"reference/colors.md","filePath":"reference/colors.md"}'),r={name:"reference/colors.md"};function n(i,d,o,e,l,g){return p(),s("div",null,[...d[0]||(d[0]=[t(`<h1 id="colors-reference" tabindex="-1">Colors Reference <a class="header-anchor" href="#colors-reference" aria-label="Permalink to &quot;Colors Reference&quot;">​</a></h1><p>Complete reference for the color palette.</p><h2 id="semantic-colors" tabindex="-1">Semantic Colors <a class="header-anchor" href="#semantic-colors" aria-label="Permalink to &quot;Semantic Colors&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Key</th><th>Value</th><th>Description</th></tr></thead><tbody><tr><td><code>white</code></td><td>#FFFFFF</td><td>Pure white</td></tr><tr><td><code>black</code></td><td>#000000</td><td>Pure black</td></tr><tr><td><code>grey</code></td><td>#6B7280</td><td>Neutral grey</td></tr><tr><td><code>dark</code></td><td>#3E4A5D</td><td><strong>Brand dark</strong></td></tr><tr><td><code>light</code></td><td>#DBEAFE</td><td><strong>Brand light</strong></td></tr><tr><td><code>primary</code></td><td>#2563EB</td><td><strong>Brand primary</strong></td></tr><tr><td><code>secondary</code></td><td>#DBEAFE</td><td><strong>Brand secondary</strong></td></tr><tr><td><code>success</code></td><td>#10B981</td><td>Positive feedback</td></tr><tr><td><code>warning</code></td><td>#F59E0B</td><td>Cautions</td></tr><tr><td><code>danger</code></td><td>#EF4444</td><td>Errors</td></tr></tbody></table><h2 id="color-palette" tabindex="-1">Color Palette <a class="header-anchor" href="#color-palette" aria-label="Permalink to &quot;Color Palette&quot;">​</a></h2><p>All colors are available in 11 shades: <strong>50</strong>, <strong>100</strong>, <strong>200</strong>, <strong>300</strong>, <strong>400</strong>, <strong>500</strong>, <strong>600</strong>, <strong>700</strong>, <strong>800</strong>, <strong>900</strong>, <strong>950</strong></p><h3 id="chromatic-colors" tabindex="-1">Chromatic Colors <a class="header-anchor" href="#chromatic-colors" aria-label="Permalink to &quot;Chromatic Colors&quot;">​</a></h3><div class="color-grid"><table tabindex="0"><thead><tr><th>Color</th><th>50</th><th>100</th><th>200</th><th>300</th><th>400</th><th>500</th><th>600</th><th>700</th><th>800</th><th>900</th><th>950</th></tr></thead><tbody><tr><td><strong>Red</strong></td><td><span style="background:#FEF2F2;padding:2px 8px;border-radius:4px;">#FEF2F2</span></td><td><span style="background:#FEE2E2;padding:2px 8px;border-radius:4px;">#FEE2E2</span></td><td><span style="background:#FECACA;padding:2px 8px;border-radius:4px;">#FECACA</span></td><td><span style="background:#FCA5A5;padding:2px 8px;border-radius:4px;">#FCA5A5</span></td><td><span style="background:#F87171;padding:2px 8px;border-radius:4px;">#F87171</span></td><td><span style="background:#EF4444;padding:2px 8px;border-radius:4px;color:white;">#EF4444</span></td><td><span style="background:#DC2626;padding:2px 8px;border-radius:4px;color:white;">#DC2626</span></td><td><span style="background:#B91C1C;padding:2px 8px;border-radius:4px;color:white;">#B91C1C</span></td><td><span style="background:#991B1B;padding:2px 8px;border-radius:4px;color:white;">#991B1B</span></td><td><span style="background:#7F1D1D;padding:2px 8px;border-radius:4px;color:white;">#7F1D1D</span></td><td><span style="background:#450A0A;padding:2px 8px;border-radius:4px;color:white;">#450A0A</span></td></tr><tr><td><strong>Orange</strong></td><td><span style="background:#FFF7ED;padding:2px 8px;border-radius:4px;">#FFF7ED</span></td><td><span style="background:#FFEDD5;padding:2px 8px;border-radius:4px;">#FFEDD5</span></td><td><span style="background:#FED7AA;padding:2px 8px;border-radius:4px;">#FED7AA</span></td><td><span style="background:#FDBA74;padding:2px 8px;border-radius:4px;">#FDBA74</span></td><td><span style="background:#FB923C;padding:2px 8px;border-radius:4px;">#FB923C</span></td><td><span style="background:#F97316;padding:2px 8px;border-radius:4px;color:white;">#F97316</span></td><td><span style="background:#EA580C;padding:2px 8px;border-radius:4px;color:white;">#EA580C</span></td><td><span style="background:#C2410C;padding:2px 8px;border-radius:4px;color:white;">#C2410C</span></td><td><span style="background:#9A3412;padding:2px 8px;border-radius:4px;color:white;">#9A3412</span></td><td><span style="background:#7C2D12;padding:2px 8px;border-radius:4px;color:white;">#7C2D12</span></td><td><span style="background:#431407;padding:2px 8px;border-radius:4px;color:white;">#431407</span></td></tr><tr><td><strong>Amber</strong></td><td><span style="background:#FFFBEB;padding:2px 8px;border-radius:4px;">#FFFBEB</span></td><td><span style="background:#FEF3C7;padding:2px 8px;border-radius:4px;">#FEF3C7</span></td><td><span style="background:#FDE68A;padding:2px 8px;border-radius:4px;">#FDE68A</span></td><td><span style="background:#FCD34D;padding:2px 8px;border-radius:4px;">#FCD34D</span></td><td><span style="background:#FBBF24;padding:2px 8px;border-radius:4px;">#FBBF24</span></td><td><span style="background:#F59E0B;padding:2px 8px;border-radius:4px;">#F59E0B</span></td><td><span style="background:#D97706;padding:2px 8px;border-radius:4px;color:white;">#D97706</span></td><td><span style="background:#B45309;padding:2px 8px;border-radius:4px;color:white;">#B45309</span></td><td><span style="background:#92400E;padding:2px 8px;border-radius:4px;color:white;">#92400E</span></td><td><span style="background:#78350F;padding:2px 8px;border-radius:4px;color:white;">#78350F</span></td><td><span style="background:#451A03;padding:2px 8px;border-radius:4px;color:white;">#451A03</span></td></tr><tr><td><strong>Yellow</strong></td><td><span style="background:#FEFCE8;padding:2px 8px;border-radius:4px;">#FEFCE8</span></td><td><span style="background:#FEF9C3;padding:2px 8px;border-radius:4px;">#FEF9C3</span></td><td><span style="background:#FEF08A;padding:2px 8px;border-radius:4px;">#FEF08A</span></td><td><span style="background:#FDE047;padding:2px 8px;border-radius:4px;">#FDE047</span></td><td><span style="background:#FACC15;padding:2px 8px;border-radius:4px;">#FACC15</span></td><td><span style="background:#EAB308;padding:2px 8px;border-radius:4px;">#EAB308</span></td><td><span style="background:#CA8A04;padding:2px 8px;border-radius:4px;color:white;">#CA8A04</span></td><td><span style="background:#A16207;padding:2px 8px;border-radius:4px;color:white;">#A16207</span></td><td><span style="background:#854D0E;padding:2px 8px;border-radius:4px;color:white;">#854D0E</span></td><td><span style="background:#713F12;padding:2px 8px;border-radius:4px;color:white;">#713F12</span></td><td><span style="background:#422006;padding:2px 8px;border-radius:4px;color:white;">#422006</span></td></tr><tr><td><strong>Lime</strong></td><td><span style="background:#F7FEE7;padding:2px 8px;border-radius:4px;">#F7FEE7</span></td><td><span style="background:#ECFCCB;padding:2px 8px;border-radius:4px;">#ECFCCB</span></td><td><span style="background:#D9F99D;padding:2px 8px;border-radius:4px;">#D9F99D</span></td><td><span style="background:#BEF264;padding:2px 8px;border-radius:4px;">#BEF264</span></td><td><span style="background:#A3E635;padding:2px 8px;border-radius:4px;">#A3E635</span></td><td><span style="background:#84CC16;padding:2px 8px;border-radius:4px;">#84CC16</span></td><td><span style="background:#65A30D;padding:2px 8px;border-radius:4px;color:white;">#65A30D</span></td><td><span style="background:#4D7C0F;padding:2px 8px;border-radius:4px;color:white;">#4D7C0F</span></td><td><span style="background:#3F6212;padding:2px 8px;border-radius:4px;color:white;">#3F6212</span></td><td><span style="background:#365314;padding:2px 8px;border-radius:4px;color:white;">#365314</span></td><td><span style="background:#1A2E05;padding:2px 8px;border-radius:4px;color:white;">#1A2E05</span></td></tr><tr><td><strong>Green</strong></td><td><span style="background:#F0FDF4;padding:2px 8px;border-radius:4px;">#F0FDF4</span></td><td><span style="background:#DCFCE7;padding:2px 8px;border-radius:4px;">#DCFCE7</span></td><td><span style="background:#BBF7D0;padding:2px 8px;border-radius:4px;">#BBF7D0</span></td><td><span style="background:#86EFAC;padding:2px 8px;border-radius:4px;">#86EFAC</span></td><td><span style="background:#4ADE80;padding:2px 8px;border-radius:4px;">#4ADE80</span></td><td><span style="background:#22C55E;padding:2px 8px;border-radius:4px;">#22C55E</span></td><td><span style="background:#16A34A;padding:2px 8px;border-radius:4px;color:white;">#16A34A</span></td><td><span style="background:#15803D;padding:2px 8px;border-radius:4px;color:white;">#15803D</span></td><td><span style="background:#166534;padding:2px 8px;border-radius:4px;color:white;">#166534</span></td><td><span style="background:#14532D;padding:2px 8px;border-radius:4px;color:white;">#14532D</span></td><td><span style="background:#052E16;padding:2px 8px;border-radius:4px;color:white;">#052E16</span></td></tr><tr><td><strong>Emerald</strong></td><td><span style="background:#ECFDF5;padding:2px 8px;border-radius:4px;">#ECFDF5</span></td><td><span style="background:#D1FAE5;padding:2px 8px;border-radius:4px;">#D1FAE5</span></td><td><span style="background:#A7F3D0;padding:2px 8px;border-radius:4px;">#A7F3D0</span></td><td><span style="background:#6EE7B7;padding:2px 8px;border-radius:4px;">#6EE7B7</span></td><td><span style="background:#34D399;padding:2px 8px;border-radius:4px;">#34D399</span></td><td><span style="background:#10B981;padding:2px 8px;border-radius:4px;">#10B981</span></td><td><span style="background:#059669;padding:2px 8px;border-radius:4px;color:white;">#059669</span></td><td><span style="background:#047857;padding:2px 8px;border-radius:4px;color:white;">#047857</span></td><td><span style="background:#065F46;padding:2px 8px;border-radius:4px;color:white;">#065F46</span></td><td><span style="background:#064E3B;padding:2px 8px;border-radius:4px;color:white;">#064E3B</span></td><td><span style="background:#022C22;padding:2px 8px;border-radius:4px;color:white;">#022C22</span></td></tr><tr><td><strong>Teal</strong></td><td><span style="background:#F0FDFA;padding:2px 8px;border-radius:4px;">#F0FDFA</span></td><td><span style="background:#CCFBF1;padding:2px 8px;border-radius:4px;">#CCFBF1</span></td><td><span style="background:#99F6E4;padding:2px 8px;border-radius:4px;">#99F6E4</span></td><td><span style="background:#5EEAD4;padding:2px 8px;border-radius:4px;">#5EEAD4</span></td><td><span style="background:#2DD4BF;padding:2px 8px;border-radius:4px;">#2DD4BF</span></td><td><span style="background:#14B8A6;padding:2px 8px;border-radius:4px;">#14B8A6</span></td><td><span style="background:#0D9488;padding:2px 8px;border-radius:4px;color:white;">#0D9488</span></td><td><span style="background:#0F766E;padding:2px 8px;border-radius:4px;color:white;">#0F766E</span></td><td><span style="background:#115E59;padding:2px 8px;border-radius:4px;color:white;">#115E59</span></td><td><span style="background:#134E4A;padding:2px 8px;border-radius:4px;color:white;">#134E4A</span></td><td><span style="background:#042F2E;padding:2px 8px;border-radius:4px;color:white;">#042F2E</span></td></tr><tr><td><strong>Cyan</strong></td><td><span style="background:#ECFEFF;padding:2px 8px;border-radius:4px;">#ECFEFF</span></td><td><span style="background:#CFFAFE;padding:2px 8px;border-radius:4px;">#CFFAFE</span></td><td><span style="background:#A5F3FC;padding:2px 8px;border-radius:4px;">#A5F3FC</span></td><td><span style="background:#67E8F9;padding:2px 8px;border-radius:4px;">#67E8F9</span></td><td><span style="background:#22D3EE;padding:2px 8px;border-radius:4px;">#22D3EE</span></td><td><span style="background:#06B6D4;padding:2px 8px;border-radius:4px;">#06B6D4</span></td><td><span style="background:#0891B2;padding:2px 8px;border-radius:4px;color:white;">#0891B2</span></td><td><span style="background:#0E7490;padding:2px 8px;border-radius:4px;color:white;">#0E7490</span></td><td><span style="background:#155E75;padding:2px 8px;border-radius:4px;color:white;">#155E75</span></td><td><span style="background:#164E63;padding:2px 8px;border-radius:4px;color:white;">#164E63</span></td><td><span style="background:#083344;padding:2px 8px;border-radius:4px;color:white;">#083344</span></td></tr><tr><td><strong>Sky</strong></td><td><span style="background:#F0F9FF;padding:2px 8px;border-radius:4px;">#F0F9FF</span></td><td><span style="background:#E0F2FE;padding:2px 8px;border-radius:4px;">#E0F2FE</span></td><td><span style="background:#BAE6FD;padding:2px 8px;border-radius:4px;">#BAE6FD</span></td><td><span style="background:#7DD3FC;padding:2px 8px;border-radius:4px;">#7DD3FC</span></td><td><span style="background:#38BDF8;padding:2px 8px;border-radius:4px;">#38BDF8</span></td><td><span style="background:#0EA5E9;padding:2px 8px;border-radius:4px;">#0EA5E9</span></td><td><span style="background:#0284C7;padding:2px 8px;border-radius:4px;color:white;">#0284C7</span></td><td><span style="background:#0369A1;padding:2px 8px;border-radius:4px;color:white;">#0369A1</span></td><td><span style="background:#075985;padding:2px 8px;border-radius:4px;color:white;">#075985</span></td><td><span style="background:#0C4A6E;padding:2px 8px;border-radius:4px;color:white;">#0C4A6E</span></td><td><span style="background:#082F49;padding:2px 8px;border-radius:4px;color:white;">#082F49</span></td></tr><tr><td><strong>Blue</strong></td><td><span style="background:#EFF6FF;padding:2px 8px;border-radius:4px;">#EFF6FF</span></td><td><span style="background:#DBEAFE;padding:2px 8px;border-radius:4px;">#DBEAFE</span></td><td><span style="background:#BFDBFE;padding:2px 8px;border-radius:4px;">#BFDBFE</span></td><td><span style="background:#93C5FD;padding:2px 8px;border-radius:4px;">#93C5FD</span></td><td><span style="background:#60A5FA;padding:2px 8px;border-radius:4px;">#60A5FA</span></td><td><span style="background:#3B82F6;padding:2px 8px;border-radius:4px;color:white;">#3B82F6</span></td><td><span style="background:#2563EB;padding:2px 8px;border-radius:4px;color:white;">#2563EB</span></td><td><span style="background:#1D4ED8;padding:2px 8px;border-radius:4px;color:white;">#1D4ED8</span></td><td><span style="background:#1E40AF;padding:2px 8px;border-radius:4px;color:white;">#1E40AF</span></td><td><span style="background:#1E3A8A;padding:2px 8px;border-radius:4px;color:white;">#1E3A8A</span></td><td><span style="background:#172554;padding:2px 8px;border-radius:4px;color:white;">#172554</span></td></tr><tr><td><strong>Indigo</strong></td><td><span style="background:#EEF2FF;padding:2px 8px;border-radius:4px;">#EEF2FF</span></td><td><span style="background:#E0E7FF;padding:2px 8px;border-radius:4px;">#E0E7FF</span></td><td><span style="background:#C7D2FE;padding:2px 8px;border-radius:4px;">#C7D2FE</span></td><td><span style="background:#A5B4FC;padding:2px 8px;border-radius:4px;">#A5B4FC</span></td><td><span style="background:#818CF8;padding:2px 8px;border-radius:4px;">#818CF8</span></td><td><span style="background:#6366F1;padding:2px 8px;border-radius:4px;color:white;">#6366F1</span></td><td><span style="background:#4F46E5;padding:2px 8px;border-radius:4px;color:white;">#4F46E5</span></td><td><span style="background:#4338CA;padding:2px 8px;border-radius:4px;color:white;">#4338CA</span></td><td><span style="background:#3730A3;padding:2px 8px;border-radius:4px;color:white;">#3730A3</span></td><td><span style="background:#312E81;padding:2px 8px;border-radius:4px;color:white;">#312E81</span></td><td><span style="background:#1E1B4B;padding:2px 8px;border-radius:4px;color:white;">#1E1B4B</span></td></tr><tr><td><strong>Violet</strong></td><td><span style="background:#F5F3FF;padding:2px 8px;border-radius:4px;">#F5F3FF</span></td><td><span style="background:#EDE9FE;padding:2px 8px;border-radius:4px;">#EDE9FE</span></td><td><span style="background:#DDD6FE;padding:2px 8px;border-radius:4px;">#DDD6FE</span></td><td><span style="background:#C4B5FD;padding:2px 8px;border-radius:4px;">#C4B5FD</span></td><td><span style="background:#A78BFA;padding:2px 8px;border-radius:4px;">#A78BFA</span></td><td><span style="background:#8B5CF6;padding:2px 8px;border-radius:4px;color:white;">#8B5CF6</span></td><td><span style="background:#7C3AED;padding:2px 8px;border-radius:4px;color:white;">#7C3AED</span></td><td><span style="background:#6D28D9;padding:2px 8px;border-radius:4px;color:white;">#6D28D9</span></td><td><span style="background:#5B21B6;padding:2px 8px;border-radius:4px;color:white;">#5B21B6</span></td><td><span style="background:#4C1D95;padding:2px 8px;border-radius:4px;color:white;">#4C1D95</span></td><td><span style="background:#2E1065;padding:2px 8px;border-radius:4px;color:white;">#2E1065</span></td></tr><tr><td><strong>Purple</strong></td><td><span style="background:#FAF5FF;padding:2px 8px;border-radius:4px;">#FAF5FF</span></td><td><span style="background:#F3E8FF;padding:2px 8px;border-radius:4px;">#F3E8FF</span></td><td><span style="background:#E9D5FF;padding:2px 8px;border-radius:4px;">#E9D5FF</span></td><td><span style="background:#D8B4FE;padding:2px 8px;border-radius:4px;">#D8B4FE</span></td><td><span style="background:#C084FC;padding:2px 8px;border-radius:4px;">#C084FC</span></td><td><span style="background:#A855F7;padding:2px 8px;border-radius:4px;color:white;">#A855F7</span></td><td><span style="background:#9333EA;padding:2px 8px;border-radius:4px;color:white;">#9333EA</span></td><td><span style="background:#7E22CE;padding:2px 8px;border-radius:4px;color:white;">#7E22CE</span></td><td><span style="background:#6B21A8;padding:2px 8px;border-radius:4px;color:white;">#6B21A8</span></td><td><span style="background:#581C87;padding:2px 8px;border-radius:4px;color:white;">#581C87</span></td><td><span style="background:#3B0764;padding:2px 8px;border-radius:4px;color:white;">#3B0764</span></td></tr><tr><td><strong>Fuchsia</strong></td><td><span style="background:#FDF4FF;padding:2px 8px;border-radius:4px;">#FDF4FF</span></td><td><span style="background:#FAE8FF;padding:2px 8px;border-radius:4px;">#FAE8FF</span></td><td><span style="background:#F5D0FE;padding:2px 8px;border-radius:4px;">#F5D0FE</span></td><td><span style="background:#F0ABFC;padding:2px 8px;border-radius:4px;">#F0ABFC</span></td><td><span style="background:#E879F9;padding:2px 8px;border-radius:4px;">#E879F9</span></td><td><span style="background:#D946EF;padding:2px 8px;border-radius:4px;color:white;">#D946EF</span></td><td><span style="background:#C026D3;padding:2px 8px;border-radius:4px;color:white;">#C026D3</span></td><td><span style="background:#A21CAF;padding:2px 8px;border-radius:4px;color:white;">#A21CAF</span></td><td><span style="background:#86198F;padding:2px 8px;border-radius:4px;color:white;">#86198F</span></td><td><span style="background:#701A75;padding:2px 8px;border-radius:4px;color:white;">#701A75</span></td><td><span style="background:#4A044E;padding:2px 8px;border-radius:4px;color:white;">#4A044E</span></td></tr><tr><td><strong>Pink</strong></td><td><span style="background:#FDF2F8;padding:2px 8px;border-radius:4px;">#FDF2F8</span></td><td><span style="background:#FCE7F3;padding:2px 8px;border-radius:4px;">#FCE7F3</span></td><td><span style="background:#FBCFE8;padding:2px 8px;border-radius:4px;">#FBCFE8</span></td><td><span style="background:#F9A8D4;padding:2px 8px;border-radius:4px;">#F9A8D4</span></td><td><span style="background:#F472B6;padding:2px 8px;border-radius:4px;">#F472B6</span></td><td><span style="background:#EC4899;padding:2px 8px;border-radius:4px;color:white;">#EC4899</span></td><td><span style="background:#DB2777;padding:2px 8px;border-radius:4px;color:white;">#DB2777</span></td><td><span style="background:#BE185D;padding:2px 8px;border-radius:4px;color:white;">#BE185D</span></td><td><span style="background:#9D174D;padding:2px 8px;border-radius:4px;color:white;">#9D174D</span></td><td><span style="background:#831843;padding:2px 8px;border-radius:4px;color:white;">#831843</span></td><td><span style="background:#500724;padding:2px 8px;border-radius:4px;color:white;">#500724</span></td></tr><tr><td><strong>Rose</strong></td><td><span style="background:#FFF1F2;padding:2px 8px;border-radius:4px;">#FFF1F2</span></td><td><span style="background:#FFE4E6;padding:2px 8px;border-radius:4px;">#FFE4E6</span></td><td><span style="background:#FECDD3;padding:2px 8px;border-radius:4px;">#FECDD3</span></td><td><span style="background:#FDA4AF;padding:2px 8px;border-radius:4px;">#FDA4AF</span></td><td><span style="background:#FB7185;padding:2px 8px;border-radius:4px;">#FB7185</span></td><td><span style="background:#F43F5E;padding:2px 8px;border-radius:4px;color:white;">#F43F5E</span></td><td><span style="background:#E11D48;padding:2px 8px;border-radius:4px;color:white;">#E11D48</span></td><td><span style="background:#BE123C;padding:2px 8px;border-radius:4px;color:white;">#BE123C</span></td><td><span style="background:#9F1239;padding:2px 8px;border-radius:4px;color:white;">#9F1239</span></td><td><span style="background:#881337;padding:2px 8px;border-radius:4px;color:white;">#881337</span></td><td><span style="background:#4C0519;padding:2px 8px;border-radius:4px;color:white;">#4C0519</span></td></tr></tbody></table></div><h3 id="neutral-colors" tabindex="-1">Neutral Colors <a class="header-anchor" href="#neutral-colors" aria-label="Permalink to &quot;Neutral Colors&quot;">​</a></h3><div class="color-grid"><table tabindex="0"><thead><tr><th>Color</th><th>50</th><th>100</th><th>200</th><th>300</th><th>400</th><th>500</th><th>600</th><th>700</th><th>800</th><th>900</th><th>950</th></tr></thead><tbody><tr><td><strong>Slate</strong></td><td><span style="background:#F8FAFC;padding:2px 8px;border-radius:4px;">#F8FAFC</span></td><td><span style="background:#F1F5F9;padding:2px 8px;border-radius:4px;">#F1F5F9</span></td><td><span style="background:#E2E8F0;padding:2px 8px;border-radius:4px;">#E2E8F0</span></td><td><span style="background:#CBD5E1;padding:2px 8px;border-radius:4px;">#CBD5E1</span></td><td><span style="background:#94A3B8;padding:2px 8px;border-radius:4px;">#94A3B8</span></td><td><span style="background:#64748B;padding:2px 8px;border-radius:4px;color:white;">#64748B</span></td><td><span style="background:#475569;padding:2px 8px;border-radius:4px;color:white;">#475569</span></td><td><span style="background:#334155;padding:2px 8px;border-radius:4px;color:white;">#334155</span></td><td><span style="background:#1E293B;padding:2px 8px;border-radius:4px;color:white;">#1E293B</span></td><td><span style="background:#0F172A;padding:2px 8px;border-radius:4px;color:white;">#0F172A</span></td><td><span style="background:#020617;padding:2px 8px;border-radius:4px;color:white;">#020617</span></td></tr><tr><td><strong>Gray</strong></td><td><span style="background:#F9FAFB;padding:2px 8px;border-radius:4px;">#F9FAFB</span></td><td><span style="background:#F3F4F6;padding:2px 8px;border-radius:4px;">#F3F4F6</span></td><td><span style="background:#E5E7EB;padding:2px 8px;border-radius:4px;">#E5E7EB</span></td><td><span style="background:#D1D5DB;padding:2px 8px;border-radius:4px;">#D1D5DB</span></td><td><span style="background:#9CA3AF;padding:2px 8px;border-radius:4px;">#9CA3AF</span></td><td><span style="background:#6B7280;padding:2px 8px;border-radius:4px;color:white;">#6B7280</span></td><td><span style="background:#4B5563;padding:2px 8px;border-radius:4px;color:white;">#4B5563</span></td><td><span style="background:#374151;padding:2px 8px;border-radius:4px;color:white;">#374151</span></td><td><span style="background:#1F2937;padding:2px 8px;border-radius:4px;color:white;">#1F2937</span></td><td><span style="background:#111827;padding:2px 8px;border-radius:4px;color:white;">#111827</span></td><td><span style="background:#030712;padding:2px 8px;border-radius:4px;color:white;">#030712</span></td></tr><tr><td><strong>Zinc</strong></td><td><span style="background:#FAFAFA;padding:2px 8px;border-radius:4px;">#FAFAFA</span></td><td><span style="background:#F4F4F5;padding:2px 8px;border-radius:4px;">#F4F4F5</span></td><td><span style="background:#E4E4E7;padding:2px 8px;border-radius:4px;">#E4E4E7</span></td><td><span style="background:#D4D4D8;padding:2px 8px;border-radius:4px;">#D4D4D8</span></td><td><span style="background:#A1A1AA;padding:2px 8px;border-radius:4px;">#A1A1AA</span></td><td><span style="background:#71717A;padding:2px 8px;border-radius:4px;color:white;">#71717A</span></td><td><span style="background:#52525B;padding:2px 8px;border-radius:4px;color:white;">#52525B</span></td><td><span style="background:#3F3F46;padding:2px 8px;border-radius:4px;color:white;">#3F3F46</span></td><td><span style="background:#27272A;padding:2px 8px;border-radius:4px;color:white;">#27272A</span></td><td><span style="background:#18181B;padding:2px 8px;border-radius:4px;color:white;">#18181B</span></td><td><span style="background:#09090B;padding:2px 8px;border-radius:4px;color:white;">#09090B</span></td></tr><tr><td><strong>Neutral</strong></td><td><span style="background:#FAFAFA;padding:2px 8px;border-radius:4px;">#FAFAFA</span></td><td><span style="background:#F5F5F5;padding:2px 8px;border-radius:4px;">#F5F5F5</span></td><td><span style="background:#E5E5E5;padding:2px 8px;border-radius:4px;">#E5E5E5</span></td><td><span style="background:#D4D4D4;padding:2px 8px;border-radius:4px;">#D4D4D4</span></td><td><span style="background:#A3A3A3;padding:2px 8px;border-radius:4px;">#A3A3A3</span></td><td><span style="background:#737373;padding:2px 8px;border-radius:4px;color:white;">#737373</span></td><td><span style="background:#525252;padding:2px 8px;border-radius:4px;color:white;">#525252</span></td><td><span style="background:#404040;padding:2px 8px;border-radius:4px;color:white;">#404040</span></td><td><span style="background:#262626;padding:2px 8px;border-radius:4px;color:white;">#262626</span></td><td><span style="background:#171717;padding:2px 8px;border-radius:4px;color:white;">#171717</span></td><td><span style="background:#0A0A0A;padding:2px 8px;border-radius:4px;color:white;">#0A0A0A</span></td></tr><tr><td><strong>Stone</strong></td><td><span style="background:#FAFAF9;padding:2px 8px;border-radius:4px;">#FAFAF9</span></td><td><span style="background:#F5F5F4;padding:2px 8px;border-radius:4px;">#F5F5F4</span></td><td><span style="background:#E7E5E4;padding:2px 8px;border-radius:4px;">#E7E5E4</span></td><td><span style="background:#D6D3D1;padding:2px 8px;border-radius:4px;">#D6D3D1</span></td><td><span style="background:#A8A29E;padding:2px 8px;border-radius:4px;">#A8A29E</span></td><td><span style="background:#78716C;padding:2px 8px;border-radius:4px;color:white;">#78716C</span></td><td><span style="background:#57534E;padding:2px 8px;border-radius:4px;color:white;">#57534E</span></td><td><span style="background:#44403C;padding:2px 8px;border-radius:4px;color:white;">#44403C</span></td><td><span style="background:#292524;padding:2px 8px;border-radius:4px;color:white;">#292524</span></td><td><span style="background:#1C1917;padding:2px 8px;border-radius:4px;color:white;">#1C1917</span></td><td><span style="background:#0C0A09;padding:2px 8px;border-radius:4px;color:white;">#0C0A09</span></td></tr></tbody></table></div><h2 id="usage" tabindex="-1">Usage <a class="header-anchor" href="#usage" aria-label="Permalink to &quot;Usage&quot;">​</a></h2><h3 id="background-colors" tabindex="-1">Background Colors <a class="header-anchor" href="#background-colors" aria-label="Permalink to &quot;Background Colors&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:blue-500&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Blue 500 background&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:slate-100&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Light slate background&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:emerald-600&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Emerald 600 background&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="text-colors" tabindex="-1">Text Colors <a class="header-anchor" href="#text-colors" aria-label="Permalink to &quot;Text Colors&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:gray-900&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Dark text&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:blue-600&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Blue link&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:red-500&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Error text&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="border-colors" tabindex="-1">Border Colors <a class="header-anchor" href="#border-colors" aria-label="Permalink to &quot;Border Colors&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;border:gray-300 border-w:[1px]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Light border&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;border:blue-500 border-w:[2px]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Blue border&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="arbitrary-colors" tabindex="-1">Arbitrary Colors <a class="header-anchor" href="#arbitrary-colors" aria-label="Permalink to &quot;Arbitrary Colors&quot;">​</a></h3><p>Use brackets for custom hex values:</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:[#8B5CF6]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Custom purple&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:[#EC4899]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Custom pink text&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:[rgba(0,0,0,0.5)]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Semi-transparent&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="customization" tabindex="-1">Customization <a class="header-anchor" href="#customization" aria-label="Permalink to &quot;Customization&quot;">​</a></h2><p>Add custom colors in <code>senangstart.config.js</code>:</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  theme: {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    colors: {</span></span>
+<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">      &#39;brand&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#8B5CF6&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">      &#39;accent&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#EC4899&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">      &#39;muted&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#9CA3AF&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">      &#39;surface&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#F9FAFB&#39;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="semantic-usage" tabindex="-1">Semantic Usage <a class="header-anchor" href="#semantic-usage" aria-label="Permalink to &quot;Semantic Usage&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Color</th><th>Recommended Use</th></tr></thead><tbody><tr><td><code>primary</code></td><td>Main actions, links, highlights</td></tr><tr><td><code>success</code></td><td>Positive feedback, confirmations</td></tr><tr><td><code>warning</code></td><td>Cautions, important notices</td></tr><tr><td><code>danger</code></td><td>Errors, destructive actions</td></tr><tr><td><code>grey</code></td><td>Secondary text, borders</td></tr><tr><td><code>dark</code></td><td>Primary text, headings</td></tr><tr><td><code>light</code></td><td>Backgrounds, subtle fills</td></tr></tbody></table>`,25)])])}const k=a(r,[["render",n]]);export{h as __pageData,k as default};

package/docs/.vitepress/dist/assets/reference_colors.md.C7j7dSO1.lean.js

@@ -0,0 +1 @@
+import{_ as a,c as s,o as p,ae as t}from"./chunks/framework.I305HrzY.js";const h=JSON.parse('{"title":"Colors Reference","description":"","frontmatter":{},"headers":[],"relativePath":"reference/colors.md","filePath":"reference/colors.md"}'),r={name:"reference/colors.md"};function n(i,d,o,e,l,g){return p(),s("div",null,[...d[0]||(d[0]=[t("",25)])])}const k=a(r,[["render",n]]);export{h as __pageData,k as default};

package/docs/.vitepress/dist/assets/{reference_layout.md.DqSoofMZ.js → reference_layout.md.BWJ5NxSp.js}

@@ -1,4 +1,4 @@
-import{_ as t,c as s,o as a,ag as e}from"./chunks/framework.qISVh_QZ.js";const E=JSON.parse('{"title":"layout Reference","description":"","frontmatter":{},"headers":[],"relativePath":"reference/layout.md","filePath":"reference/layout.md"}'),l={name:"reference/layout.md"};function d(n,i,h,p,k,o){return a(),s("div",null,[...i[0]||(i[0]=[e(`<h1 id="layout-reference" tabindex="-1">layout Reference <a class="header-anchor" href="#layout-reference" aria-label="Permalink to &quot;layout Reference&quot;">​</a></h1><p>The <code>layout</code> attribute controls structure, positioning, and flow.</p><h2 id="display" tabindex="-1">Display <a class="header-anchor" href="#display" aria-label="Permalink to &quot;Display&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Value</th><th>CSS Output</th></tr></thead><tbody><tr><td><code>flex</code></td><td><code>display: flex</code></td></tr><tr><td><code>grid</code></td><td><code>display: grid</code></td></tr><tr><td><code>block</code></td><td><code>display: block</code></td></tr><tr><td><code>inline</code></td><td><code>display: inline-block</code></td></tr><tr><td><code>hidden</code></td><td><code>display: none</code></td></tr></tbody></table><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Flexbox container&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+import{_ as t,c as s,o as a,ae as e}from"./chunks/framework.I305HrzY.js";const E=JSON.parse('{"title":"layout Reference","description":"","frontmatter":{},"headers":[],"relativePath":"reference/layout.md","filePath":"reference/layout.md"}'),l={name:"reference/layout.md"};function d(n,i,h,p,k,o){return a(),s("div",null,[...i[0]||(i[0]=[e(`<h1 id="layout-reference" tabindex="-1">layout Reference <a class="header-anchor" href="#layout-reference" aria-label="Permalink to &quot;layout Reference&quot;">​</a></h1><p>The <code>layout</code> attribute controls structure, positioning, and flow.</p><h2 id="display" tabindex="-1">Display <a class="header-anchor" href="#display" aria-label="Permalink to &quot;Display&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Value</th><th>CSS Output</th></tr></thead><tbody><tr><td><code>flex</code></td><td><code>display: flex</code></td></tr><tr><td><code>grid</code></td><td><code>display: grid</code></td></tr><tr><td><code>block</code></td><td><code>display: block</code></td></tr><tr><td><code>inline</code></td><td><code>display: inline-block</code></td></tr><tr><td><code>hidden</code></td><td><code>display: none</code></td></tr></tbody></table><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Flexbox container&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;grid&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Grid container&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;hidden&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Hidden element&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="flex-direction" tabindex="-1">Flex Direction <a class="header-anchor" href="#flex-direction" aria-label="Permalink to &quot;Flex Direction&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Value</th><th>CSS Output</th></tr></thead><tbody><tr><td><code>row</code></td><td><code>flex-direction: row</code></td></tr><tr><td><code>col</code></td><td><code>flex-direction: column</code></td></tr><tr><td><code>row-reverse</code></td><td><code>flex-direction: row-reverse</code></td></tr><tr><td><code>col-reverse</code></td><td><code>flex-direction: column-reverse</code></td></tr></tbody></table><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex row&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Horizontal&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex col&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Vertical&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="alignment" tabindex="-1">Alignment <a class="header-anchor" href="#alignment" aria-label="Permalink to &quot;Alignment&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Value</th><th>CSS Output</th></tr></thead><tbody><tr><td><code>center</code></td><td><code>justify-content: center; align-items: center</code></td></tr><tr><td><code>start</code></td><td><code>justify-content: flex-start; align-items: flex-start</code></td></tr><tr><td><code>end</code></td><td><code>justify-content: flex-end; align-items: flex-end</code></td></tr><tr><td><code>between</code></td><td><code>justify-content: space-between</code></td></tr><tr><td><code>around</code></td><td><code>justify-content: space-around</code></td></tr><tr><td><code>evenly</code></td><td><code>justify-content: space-evenly</code></td></tr></tbody></table><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex center&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Centered&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>

package/docs/.vitepress/dist/assets/{reference_layout.md.DqSoofMZ.lean.js → reference_layout.md.BWJ5NxSp.lean.js}

@@ -1 +1 @@
-import{_ as t,c as s,o as a,ag as e}from"./chunks/framework.qISVh_QZ.js";const E=JSON.parse('{"title":"layout Reference","description":"","frontmatter":{},"headers":[],"relativePath":"reference/layout.md","filePath":"reference/layout.md"}'),l={name:"reference/layout.md"};function d(n,i,h,p,k,o){return a(),s("div",null,[...i[0]||(i[0]=[e("",26)])])}const c=t(l,[["render",d]]);export{E as __pageData,c as default};
+import{_ as t,c as s,o as a,ae as e}from"./chunks/framework.I305HrzY.js";const E=JSON.parse('{"title":"layout Reference","description":"","frontmatter":{},"headers":[],"relativePath":"reference/layout.md","filePath":"reference/layout.md"}'),l={name:"reference/layout.md"};function d(n,i,h,p,k,o){return a(),s("div",null,[...i[0]||(i[0]=[e("",26)])])}const c=t(l,[["render",d]]);export{E as __pageData,c as default};

package/docs/.vitepress/dist/assets/{reference_space.md.luOYAfQg.js → reference_space.md.DCsqfTWb.js}

@@ -1,4 +1,4 @@
-import{_ as i,c as t,o as a,ag as e}from"./chunks/framework.qISVh_QZ.js";const o=JSON.parse('{"title":"space Reference","description":"","frontmatter":{},"headers":[],"relativePath":"reference/space.md","filePath":"reference/space.md"}'),h={name:"reference/space.md"};function d(n,s,l,p,k,r){return a(),t("div",null,[...s[0]||(s[0]=[e(`<h1 id="space-reference" tabindex="-1">space Reference <a class="header-anchor" href="#space-reference" aria-label="Permalink to &quot;space Reference&quot;">​</a></h1><p>The <code>space</code> attribute controls sizing and spacing.</p><h2 id="syntax" tabindex="-1">Syntax <a class="header-anchor" href="#syntax" aria-label="Permalink to &quot;Syntax&quot;">​</a></h2><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>[breakpoint]:[property]:[scale]</span></span></code></pre></div><p><strong>Breakpoints:</strong> <code>mob:</code>, <code>tab:</code>, <code>lap:</code>, <code>desk:</code></p><p><strong>Scale values:</strong> <code>none</code>, <code>tiny</code>, <code>small</code>, <code>medium</code>, <code>big</code>, <code>giant</code>, <code>vast</code></p><h2 id="padding" tabindex="-1">Padding <a class="header-anchor" href="#padding" aria-label="Permalink to &quot;Padding&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Property</th><th>CSS Output</th></tr></thead><tbody><tr><td><code>p</code></td><td><code>padding</code> (all sides)</td></tr><tr><td><code>p-t</code></td><td><code>padding-top</code></td></tr><tr><td><code>p-r</code></td><td><code>padding-right</code></td></tr><tr><td><code>p-b</code></td><td><code>padding-bottom</code></td></tr><tr><td><code>p-l</code></td><td><code>padding-left</code></td></tr><tr><td><code>p-x</code></td><td><code>padding-left</code> + <code>padding-right</code></td></tr><tr><td><code>p-y</code></td><td><code>padding-top</code> + <code>padding-bottom</code></td></tr></tbody></table><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p:medium&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;All sides&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+import{_ as i,c as t,o as a,ae as e}from"./chunks/framework.I305HrzY.js";const o=JSON.parse('{"title":"space Reference","description":"","frontmatter":{},"headers":[],"relativePath":"reference/space.md","filePath":"reference/space.md"}'),h={name:"reference/space.md"};function d(n,s,l,p,k,r){return a(),t("div",null,[...s[0]||(s[0]=[e(`<h1 id="space-reference" tabindex="-1">space Reference <a class="header-anchor" href="#space-reference" aria-label="Permalink to &quot;space Reference&quot;">​</a></h1><p>The <code>space</code> attribute controls sizing and spacing.</p><h2 id="syntax" tabindex="-1">Syntax <a class="header-anchor" href="#syntax" aria-label="Permalink to &quot;Syntax&quot;">​</a></h2><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>[breakpoint]:[property]:[scale]</span></span></code></pre></div><p><strong>Breakpoints:</strong> <code>mob:</code>, <code>tab:</code>, <code>lap:</code>, <code>desk:</code></p><p><strong>Scale values:</strong> <code>none</code>, <code>tiny</code>, <code>small</code>, <code>medium</code>, <code>big</code>, <code>giant</code>, <code>vast</code></p><h2 id="padding" tabindex="-1">Padding <a class="header-anchor" href="#padding" aria-label="Permalink to &quot;Padding&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Property</th><th>CSS Output</th></tr></thead><tbody><tr><td><code>p</code></td><td><code>padding</code> (all sides)</td></tr><tr><td><code>p-t</code></td><td><code>padding-top</code></td></tr><tr><td><code>p-r</code></td><td><code>padding-right</code></td></tr><tr><td><code>p-b</code></td><td><code>padding-bottom</code></td></tr><tr><td><code>p-l</code></td><td><code>padding-left</code></td></tr><tr><td><code>p-x</code></td><td><code>padding-left</code> + <code>padding-right</code></td></tr><tr><td><code>p-y</code></td><td><code>padding-top</code> + <code>padding-bottom</code></td></tr></tbody></table><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p:medium&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;All sides&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p-x:big p-y:small&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Horizontal/vertical&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p-t:tiny p-b:giant&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Top and bottom&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="margin" tabindex="-1">Margin <a class="header-anchor" href="#margin" aria-label="Permalink to &quot;Margin&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Property</th><th>CSS Output</th></tr></thead><tbody><tr><td><code>m</code></td><td><code>margin</code> (all sides)</td></tr><tr><td><code>m-t</code></td><td><code>margin-top</code></td></tr><tr><td><code>m-r</code></td><td><code>margin-right</code></td></tr><tr><td><code>m-b</code></td><td><code>margin-bottom</code></td></tr><tr><td><code>m-l</code></td><td><code>margin-left</code></td></tr><tr><td><code>m-x</code></td><td><code>margin-left</code> + <code>margin-right</code></td></tr><tr><td><code>m-y</code></td><td><code>margin-top</code> + <code>margin-bottom</code></td></tr></tbody></table><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;m:medium&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;All sides&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;m-b:big&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Bottom margin&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>

package/docs/.vitepress/dist/assets/{reference_space.md.luOYAfQg.lean.js → reference_space.md.DCsqfTWb.lean.js}

@@ -1 +1 @@
-import{_ as i,c as t,o as a,ag as e}from"./chunks/framework.qISVh_QZ.js";const o=JSON.parse('{"title":"space Reference","description":"","frontmatter":{},"headers":[],"relativePath":"reference/space.md","filePath":"reference/space.md"}'),h={name:"reference/space.md"};function d(n,s,l,p,k,r){return a(),t("div",null,[...s[0]||(s[0]=[e("",25)])])}const g=i(h,[["render",d]]);export{o as __pageData,g as default};
+import{_ as i,c as t,o as a,ae as e}from"./chunks/framework.I305HrzY.js";const o=JSON.parse('{"title":"space Reference","description":"","frontmatter":{},"headers":[],"relativePath":"reference/space.md","filePath":"reference/space.md"}'),h={name:"reference/space.md"};function d(n,s,l,p,k,r){return a(),t("div",null,[...s[0]||(s[0]=[e("",25)])])}const g=i(h,[["render",d]]);export{o as __pageData,g as default};

package/docs/.vitepress/dist/assets/{reference_spacing.md.DdsDhDhS.js → reference_spacing.md.BInFD8gd.js}

@@ -1,4 +1,4 @@
-import{_ as i,c as a,o as n,ag as t}from"./chunks/framework.qISVh_QZ.js";const g=JSON.parse('{"title":"Spacing Reference","description":"","frontmatter":{},"headers":[],"relativePath":"reference/spacing.md","filePath":"reference/spacing.md"}'),p={name:"reference/spacing.md"};function l(e,s,h,k,d,r){return n(),a("div",null,[...s[0]||(s[0]=[t(`<h1 id="spacing-reference" tabindex="-1">Spacing Reference <a class="header-anchor" href="#spacing-reference" aria-label="Permalink to &quot;Spacing Reference&quot;">​</a></h1><p>Complete reference for the spacing scale.</p><h2 id="default-scale" tabindex="-1">Default Scale <a class="header-anchor" href="#default-scale" aria-label="Permalink to &quot;Default Scale&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Keyword</th><th>Value</th><th>Use Case</th></tr></thead><tbody><tr><td><code>none</code></td><td>0px</td><td>Reset spacing</td></tr><tr><td><code>tiny</code></td><td>4px</td><td>Borders, small offsets</td></tr><tr><td><code>small</code></td><td>8px</td><td>Group related items</td></tr><tr><td><code>medium</code></td><td>16px</td><td>Standard default</td></tr><tr><td><code>big</code></td><td>32px</td><td>Separate sections</td></tr><tr><td><code>giant</code></td><td>64px</td><td>Layout divisions</td></tr><tr><td><code>vast</code></td><td>128px</td><td>Hero sections</td></tr></tbody></table><h2 id="css-variables" tabindex="-1">CSS Variables <a class="header-anchor" href="#css-variables" aria-label="Permalink to &quot;CSS Variables&quot;">​</a></h2><p>The spacing scale generates these CSS variables:</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">:root</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+import{_ as i,c as a,o as n,ae as t}from"./chunks/framework.I305HrzY.js";const g=JSON.parse('{"title":"Spacing Reference","description":"","frontmatter":{},"headers":[],"relativePath":"reference/spacing.md","filePath":"reference/spacing.md"}'),p={name:"reference/spacing.md"};function l(e,s,h,k,d,r){return n(),a("div",null,[...s[0]||(s[0]=[t(`<h1 id="spacing-reference" tabindex="-1">Spacing Reference <a class="header-anchor" href="#spacing-reference" aria-label="Permalink to &quot;Spacing Reference&quot;">​</a></h1><p>Complete reference for the spacing scale.</p><h2 id="default-scale" tabindex="-1">Default Scale <a class="header-anchor" href="#default-scale" aria-label="Permalink to &quot;Default Scale&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Keyword</th><th>Value</th><th>Use Case</th></tr></thead><tbody><tr><td><code>none</code></td><td>0px</td><td>Reset spacing</td></tr><tr><td><code>tiny</code></td><td>4px</td><td>Borders, small offsets</td></tr><tr><td><code>small</code></td><td>8px</td><td>Group related items</td></tr><tr><td><code>medium</code></td><td>16px</td><td>Standard default</td></tr><tr><td><code>big</code></td><td>32px</td><td>Separate sections</td></tr><tr><td><code>giant</code></td><td>64px</td><td>Layout divisions</td></tr><tr><td><code>vast</code></td><td>128px</td><td>Hero sections</td></tr></tbody></table><h2 id="css-variables" tabindex="-1">CSS Variables <a class="header-anchor" href="#css-variables" aria-label="Permalink to &quot;CSS Variables&quot;">​</a></h2><p>The spacing scale generates these CSS variables:</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">:root</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
 <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">  --s-none</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
 <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">  --s-tiny</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">4</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
 <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">  --s-small</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">8</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>

package/docs/.vitepress/dist/assets/{reference_spacing.md.DdsDhDhS.lean.js → reference_spacing.md.BInFD8gd.lean.js}

@@ -1 +1 @@
-import{_ as i,c as a,o as n,ag as t}from"./chunks/framework.qISVh_QZ.js";const g=JSON.parse('{"title":"Spacing Reference","description":"","frontmatter":{},"headers":[],"relativePath":"reference/spacing.md","filePath":"reference/spacing.md"}'),p={name:"reference/spacing.md"};function l(e,s,h,k,d,r){return n(),a("div",null,[...s[0]||(s[0]=[t("",14)])])}const c=i(p,[["render",l]]);export{g as __pageData,c as default};
+import{_ as i,c as a,o as n,ae as t}from"./chunks/framework.I305HrzY.js";const g=JSON.parse('{"title":"Spacing Reference","description":"","frontmatter":{},"headers":[],"relativePath":"reference/spacing.md","filePath":"reference/spacing.md"}'),p={name:"reference/spacing.md"};function l(e,s,h,k,d,r){return n(),a("div",null,[...s[0]||(s[0]=[t("",14)])])}const c=i(p,[["render",l]]);export{g as __pageData,c as default};

package/docs/.vitepress/dist/assets/{reference_visual.md.DZFvxgPk.js → reference_visual.md.BRK7S9T1.js}

@@ -1,4 +1,4 @@
-import{_ as i,c as t,o as a,ag as e}from"./chunks/framework.qISVh_QZ.js";const E=JSON.parse('{"title":"visual Reference","description":"","frontmatter":{},"headers":[],"relativePath":"reference/visual.md","filePath":"reference/visual.md"}'),h={name:"reference/visual.md"};function d(l,s,n,p,k,r){return a(),t("div",null,[...s[0]||(s[0]=[e(`<h1 id="visual-reference" tabindex="-1">visual Reference <a class="header-anchor" href="#visual-reference" aria-label="Permalink to &quot;visual Reference&quot;">​</a></h1><p>The <code>visual</code> attribute controls colors, textures, and appearance.</p><h2 id="background" tabindex="-1">Background <a class="header-anchor" href="#background" aria-label="Permalink to &quot;Background&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Property</th><th>CSS Output</th></tr></thead><tbody><tr><td><code>bg:white</code></td><td><code>background-color: var(--c-white)</code></td></tr><tr><td><code>bg:primary</code></td><td><code>background-color: var(--c-primary)</code></td></tr><tr><td><code>bg:[#hex]</code></td><td><code>background-color: #hex</code></td></tr></tbody></table><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:white&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;White background&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+import{_ as i,c as t,o as a,ae as e}from"./chunks/framework.I305HrzY.js";const E=JSON.parse('{"title":"visual Reference","description":"","frontmatter":{},"headers":[],"relativePath":"reference/visual.md","filePath":"reference/visual.md"}'),h={name:"reference/visual.md"};function d(l,s,n,p,k,r){return a(),t("div",null,[...s[0]||(s[0]=[e(`<h1 id="visual-reference" tabindex="-1">visual Reference <a class="header-anchor" href="#visual-reference" aria-label="Permalink to &quot;visual Reference&quot;">​</a></h1><p>The <code>visual</code> attribute controls colors, textures, and appearance.</p><h2 id="background" tabindex="-1">Background <a class="header-anchor" href="#background" aria-label="Permalink to &quot;Background&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Property</th><th>CSS Output</th></tr></thead><tbody><tr><td><code>bg:white</code></td><td><code>background-color: var(--c-white)</code></td></tr><tr><td><code>bg:primary</code></td><td><code>background-color: var(--c-primary)</code></td></tr><tr><td><code>bg:[#hex]</code></td><td><code>background-color: #hex</code></td></tr></tbody></table><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:white&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;White background&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:primary&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Primary color&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:[#FF5733]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Custom hex&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
 <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:[rgba(0,0,0,0.5)]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Semi-transparent&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="text-color" tabindex="-1">Text Color <a class="header-anchor" href="#text-color" aria-label="Permalink to &quot;Text Color&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Property</th><th>CSS Output</th></tr></thead><tbody><tr><td><code>text:dark</code></td><td><code>color: var(--c-dark)</code></td></tr><tr><td><code>text:grey</code></td><td><code>color: var(--c-grey)</code></td></tr><tr><td><code>text:primary</code></td><td><code>color: var(--c-primary)</code></td></tr></tbody></table><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Dark text&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>

package/docs/.vitepress/dist/assets/{reference_visual.md.DZFvxgPk.lean.js → reference_visual.md.BRK7S9T1.lean.js}

@@ -1 +1 @@
-import{_ as i,c as t,o as a,ag as e}from"./chunks/framework.qISVh_QZ.js";const E=JSON.parse('{"title":"visual Reference","description":"","frontmatter":{},"headers":[],"relativePath":"reference/visual.md","filePath":"reference/visual.md"}'),h={name:"reference/visual.md"};function d(l,s,n,p,k,r){return a(),t("div",null,[...s[0]||(s[0]=[e("",35)])])}const g=i(h,[["render",d]]);export{E as __pageData,g as default};
+import{_ as i,c as t,o as a,ae as e}from"./chunks/framework.I305HrzY.js";const E=JSON.parse('{"title":"visual Reference","description":"","frontmatter":{},"headers":[],"relativePath":"reference/visual.md","filePath":"reference/visual.md"}'),h={name:"reference/visual.md"};function d(l,s,n,p,k,r){return a(),t("div",null,[...s[0]||(s[0]=[e("",35)])])}const g=i(h,[["render",d]]);export{E as __pageData,g as default};