@bookklik/senangstart-css 0.1.0 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (137) hide show
  1. package/.github/workflows/deploy-docs.yml +55 -0
  2. package/dist/senangstart-css.js +503 -0
  3. package/dist/senangstart-css.min.js +375 -0
  4. package/docs/.vitepress/cache/deps/_metadata.json +52 -0
  5. package/docs/.vitepress/cache/deps/chunk-2CLQ7TTZ.js +9719 -0
  6. package/docs/.vitepress/cache/deps/chunk-2CLQ7TTZ.js.map +7 -0
  7. package/docs/.vitepress/cache/deps/chunk-LE5NDSFD.js +12824 -0
  8. package/docs/.vitepress/cache/deps/chunk-LE5NDSFD.js.map +7 -0
  9. package/docs/.vitepress/cache/deps/package.json +3 -0
  10. package/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js +4505 -0
  11. package/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js.map +7 -0
  12. package/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js +583 -0
  13. package/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js.map +7 -0
  14. package/docs/.vitepress/cache/deps/vitepress___@vueuse_integrations_useFocusTrap.js +1333 -0
  15. package/docs/.vitepress/cache/deps/vitepress___@vueuse_integrations_useFocusTrap.js.map +7 -0
  16. package/docs/.vitepress/cache/deps/vitepress___mark__js_src_vanilla__js.js +1665 -0
  17. package/docs/.vitepress/cache/deps/vitepress___mark__js_src_vanilla__js.js.map +7 -0
  18. package/docs/.vitepress/cache/deps/vitepress___minisearch.js +1813 -0
  19. package/docs/.vitepress/cache/deps/vitepress___minisearch.js.map +7 -0
  20. package/docs/.vitepress/cache/deps/vue.js +347 -0
  21. package/docs/.vitepress/cache/deps/vue.js.map +7 -0
  22. package/docs/.vitepress/config.js +108 -0
  23. package/docs/.vitepress/dist/404.html +22 -0
  24. package/docs/.vitepress/dist/assets/app.BTYj1wZj.js +1 -0
  25. package/docs/.vitepress/dist/assets/chunks/@localSearchIndexroot.DmMP4oUp.js +1 -0
  26. package/docs/.vitepress/dist/assets/chunks/VPLocalSearchBox.jxQ0k_uL.js +9 -0
  27. package/docs/.vitepress/dist/assets/chunks/framework.qISVh_QZ.js +19 -0
  28. package/docs/.vitepress/dist/assets/chunks/theme.B9Wtbwgj.js +2 -0
  29. package/docs/.vitepress/dist/assets/examples_cards.md.D4i0phvj.js +84 -0
  30. package/docs/.vitepress/dist/assets/examples_cards.md.D4i0phvj.lean.js +1 -0
  31. package/docs/.vitepress/dist/assets/examples_forms.md.BnsjqHST.js +169 -0
  32. package/docs/.vitepress/dist/assets/examples_forms.md.BnsjqHST.lean.js +1 -0
  33. package/docs/.vitepress/dist/assets/examples_hero.md.CCcb2x8Y.js +118 -0
  34. package/docs/.vitepress/dist/assets/examples_hero.md.CCcb2x8Y.lean.js +1 -0
  35. package/docs/.vitepress/dist/assets/examples_index.md.CcyXbirn.js +52 -0
  36. package/docs/.vitepress/dist/assets/examples_index.md.CcyXbirn.lean.js +1 -0
  37. package/docs/.vitepress/dist/assets/examples_navigation.md.CppyHbnP.js +106 -0
  38. package/docs/.vitepress/dist/assets/examples_navigation.md.CppyHbnP.lean.js +1 -0
  39. package/docs/.vitepress/dist/assets/guide_cdn.md.CANCjnm5.js +30 -0
  40. package/docs/.vitepress/dist/assets/guide_cdn.md.CANCjnm5.lean.js +1 -0
  41. package/docs/.vitepress/dist/assets/guide_cli.md.zXEKk-bu.js +44 -0
  42. package/docs/.vitepress/dist/assets/guide_cli.md.zXEKk-bu.lean.js +1 -0
  43. package/docs/.vitepress/dist/assets/guide_configuration.md.D2JZzhKm.js +79 -0
  44. package/docs/.vitepress/dist/assets/guide_configuration.md.D2JZzhKm.lean.js +1 -0
  45. package/docs/.vitepress/dist/assets/guide_getting-started.md.tO7bvmZd.js +47 -0
  46. package/docs/.vitepress/dist/assets/guide_getting-started.md.tO7bvmZd.lean.js +1 -0
  47. package/docs/.vitepress/dist/assets/guide_index.md.C1xk2lBl.js +3 -0
  48. package/docs/.vitepress/dist/assets/guide_index.md.C1xk2lBl.lean.js +1 -0
  49. package/docs/.vitepress/dist/assets/guide_natural-scale.md.D1oVRN5V.js +22 -0
  50. package/docs/.vitepress/dist/assets/guide_natural-scale.md.D1oVRN5V.lean.js +1 -0
  51. package/docs/.vitepress/dist/assets/guide_philosophy.md.DPyyMH8d.js +7 -0
  52. package/docs/.vitepress/dist/assets/guide_philosophy.md.DPyyMH8d.lean.js +1 -0
  53. package/docs/.vitepress/dist/assets/guide_responsive.md.wksOAMT5.js +57 -0
  54. package/docs/.vitepress/dist/assets/guide_responsive.md.wksOAMT5.lean.js +1 -0
  55. package/docs/.vitepress/dist/assets/guide_states.md.DRjYOZDJ.js +77 -0
  56. package/docs/.vitepress/dist/assets/guide_states.md.DRjYOZDJ.lean.js +1 -0
  57. package/docs/.vitepress/dist/assets/guide_tri-attribute.md.CoFqfmPZ.js +45 -0
  58. package/docs/.vitepress/dist/assets/guide_tri-attribute.md.CoFqfmPZ.lean.js +1 -0
  59. package/docs/.vitepress/dist/assets/index.md.CUZJzNzP.js +7 -0
  60. package/docs/.vitepress/dist/assets/index.md.CUZJzNzP.lean.js +1 -0
  61. package/docs/.vitepress/dist/assets/inter-italic-cyrillic-ext.r48I6akx.woff2 +0 -0
  62. package/docs/.vitepress/dist/assets/inter-italic-cyrillic.By2_1cv3.woff2 +0 -0
  63. package/docs/.vitepress/dist/assets/inter-italic-greek-ext.1u6EdAuj.woff2 +0 -0
  64. package/docs/.vitepress/dist/assets/inter-italic-greek.DJ8dCoTZ.woff2 +0 -0
  65. package/docs/.vitepress/dist/assets/inter-italic-latin-ext.CN1xVJS-.woff2 +0 -0
  66. package/docs/.vitepress/dist/assets/inter-italic-latin.C2AdPX0b.woff2 +0 -0
  67. package/docs/.vitepress/dist/assets/inter-italic-vietnamese.BSbpV94h.woff2 +0 -0
  68. package/docs/.vitepress/dist/assets/inter-roman-cyrillic-ext.BBPuwvHQ.woff2 +0 -0
  69. package/docs/.vitepress/dist/assets/inter-roman-cyrillic.C5lxZ8CY.woff2 +0 -0
  70. package/docs/.vitepress/dist/assets/inter-roman-greek-ext.CqjqNYQ-.woff2 +0 -0
  71. package/docs/.vitepress/dist/assets/inter-roman-greek.BBVDIX6e.woff2 +0 -0
  72. package/docs/.vitepress/dist/assets/inter-roman-latin-ext.4ZJIpNVo.woff2 +0 -0
  73. package/docs/.vitepress/dist/assets/inter-roman-latin.Di8DUHzh.woff2 +0 -0
  74. package/docs/.vitepress/dist/assets/inter-roman-vietnamese.BjW4sHH5.woff2 +0 -0
  75. package/docs/.vitepress/dist/assets/reference_breakpoints.md.BEhuwXBS.js +48 -0
  76. package/docs/.vitepress/dist/assets/reference_breakpoints.md.BEhuwXBS.lean.js +1 -0
  77. package/docs/.vitepress/dist/assets/reference_colors.md.Do4abjs1.js +29 -0
  78. package/docs/.vitepress/dist/assets/reference_colors.md.Do4abjs1.lean.js +1 -0
  79. package/docs/.vitepress/dist/assets/reference_layout.md.DqSoofMZ.js +13 -0
  80. package/docs/.vitepress/dist/assets/reference_layout.md.DqSoofMZ.lean.js +1 -0
  81. package/docs/.vitepress/dist/assets/reference_space.md.luOYAfQg.js +24 -0
  82. package/docs/.vitepress/dist/assets/reference_space.md.luOYAfQg.lean.js +1 -0
  83. package/docs/.vitepress/dist/assets/reference_spacing.md.DdsDhDhS.js +32 -0
  84. package/docs/.vitepress/dist/assets/reference_spacing.md.DdsDhDhS.lean.js +1 -0
  85. package/docs/.vitepress/dist/assets/reference_visual.md.DZFvxgPk.js +22 -0
  86. package/docs/.vitepress/dist/assets/reference_visual.md.DZFvxgPk.lean.js +1 -0
  87. package/docs/.vitepress/dist/assets/style.BuMqNgkb.css +1 -0
  88. package/docs/.vitepress/dist/examples/cards.html +108 -0
  89. package/docs/.vitepress/dist/examples/forms.html +193 -0
  90. package/docs/.vitepress/dist/examples/hero.html +142 -0
  91. package/docs/.vitepress/dist/examples/index.html +76 -0
  92. package/docs/.vitepress/dist/examples/navigation.html +130 -0
  93. package/docs/.vitepress/dist/guide/cdn.html +54 -0
  94. package/docs/.vitepress/dist/guide/cli.html +68 -0
  95. package/docs/.vitepress/dist/guide/configuration.html +103 -0
  96. package/docs/.vitepress/dist/guide/getting-started.html +71 -0
  97. package/docs/.vitepress/dist/guide/index.html +27 -0
  98. package/docs/.vitepress/dist/guide/natural-scale.html +46 -0
  99. package/docs/.vitepress/dist/guide/philosophy.html +31 -0
  100. package/docs/.vitepress/dist/guide/responsive.html +81 -0
  101. package/docs/.vitepress/dist/guide/states.html +101 -0
  102. package/docs/.vitepress/dist/guide/tri-attribute.html +69 -0
  103. package/docs/.vitepress/dist/hashmap.json +1 -0
  104. package/docs/.vitepress/dist/index.html +31 -0
  105. package/docs/.vitepress/dist/reference/breakpoints.html +72 -0
  106. package/docs/.vitepress/dist/reference/colors.html +53 -0
  107. package/docs/.vitepress/dist/reference/layout.html +37 -0
  108. package/docs/.vitepress/dist/reference/space.html +48 -0
  109. package/docs/.vitepress/dist/reference/spacing.html +56 -0
  110. package/docs/.vitepress/dist/reference/visual.html +46 -0
  111. package/docs/.vitepress/dist/vp-icons.css +1 -0
  112. package/docs/.vitepress/theme/custom.css +65 -0
  113. package/docs/.vitepress/theme/index.js +4 -0
  114. package/docs/examples/cards.md +116 -0
  115. package/docs/examples/forms.md +207 -0
  116. package/docs/examples/hero.md +150 -0
  117. package/docs/examples/index.md +87 -0
  118. package/docs/examples/navigation.md +144 -0
  119. package/docs/guide/cdn.md +110 -0
  120. package/docs/guide/cli.md +174 -0
  121. package/docs/guide/configuration.md +152 -0
  122. package/docs/guide/getting-started.md +130 -0
  123. package/docs/guide/index.md +64 -0
  124. package/docs/guide/natural-scale.md +123 -0
  125. package/docs/guide/philosophy.md +103 -0
  126. package/docs/guide/responsive.md +129 -0
  127. package/docs/guide/states.md +162 -0
  128. package/docs/guide/tri-attribute.md +187 -0
  129. package/docs/index.md +64 -0
  130. package/docs/reference/breakpoints.md +131 -0
  131. package/docs/reference/colors.md +106 -0
  132. package/docs/reference/layout.md +115 -0
  133. package/docs/reference/space.md +121 -0
  134. package/docs/reference/spacing.md +74 -0
  135. package/docs/reference/visual.md +160 -0
  136. package/package.json +7 -13
  137. package/scripts/build-dist.js +49 -0
package/docs/.vitepress/dist/assets/guide_states.md.DRjYOZDJ.js ADDED
@@ -0,0 +1,77 @@
1
+ import{_ as i,c as a,o as t,ag as n}from"./chunks/framework.qISVh_QZ.js";const g=JSON.parse('{"title":"Hover & States","description":"","frontmatter":{},"headers":[],"relativePath":"guide/states.md","filePath":"guide/states.md"}'),l={name:"guide/states.md"};function h(e,s,p,k,E,r){return t(),a("div",null,[...s[0]||(s[0]=[n(`<h1 id="hover-states" tabindex="-1">Hover &amp; States <a class="header-anchor" href="#hover-states" aria-label="Permalink to &quot;Hover &amp; States&quot;">​</a></h1><p>Add interactive styles with state prefixes.</p><h2 id="state-prefixes" tabindex="-1">State Prefixes <a class="header-anchor" href="#state-prefixes" aria-label="Permalink to &quot;State Prefixes&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Prefix</th><th>Trigger</th></tr></thead><tbody><tr><td><code>hover:</code></td><td>Mouse over element</td></tr><tr><td><code>focus:</code></td><td>Element has focus</td></tr><tr><td><code>active:</code></td><td>Element is being clicked</td></tr><tr><td><code>disabled:</code></td><td>Element is disabled</td></tr></tbody></table><h2 id="basic-usage" tabindex="-1">Basic Usage <a class="header-anchor" href="#basic-usage" aria-label="Permalink to &quot;Basic Usage&quot;">​</a></h2><h3 id="hover" tabindex="-1">Hover <a class="header-anchor" href="#hover" aria-label="Permalink to &quot;Hover&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;">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] text:white&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
2
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Hover me</span></span>
3
+ <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>
4
+ <span class="line"></span>
5
+ <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>
6
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Link with hover color</span></span>
7
+ <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></code></pre></div><h3 id="focus" tabindex="-1">Focus <a class="header-anchor" href="#focus" aria-label="Permalink to &quot;Focus&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;">input</span></span>
8
+ <span class="line"><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>
9
+ <span class="line"><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:small&quot;</span></span>
10
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">/&gt;</span></span></code></pre></div><h3 id="active" tabindex="-1">Active <a class="header-anchor" href="#active" aria-label="Permalink to &quot;Active&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;">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 active:bg:[#1D4ED8]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
11
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Click me</span></span>
12
+ <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></code></pre></div><h3 id="disabled" tabindex="-1">Disabled <a class="header-anchor" href="#disabled" aria-label="Permalink to &quot;Disabled&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;">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 disabled:bg:grey disabled:opacity:[0.5]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
13
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Submit</span></span>
14
+ <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></code></pre></div><h2 id="common-patterns" tabindex="-1">Common Patterns <a class="header-anchor" href="#common-patterns" aria-label="Permalink to &quot;Common Patterns&quot;">​</a></h2><h3 id="button-with-states" tabindex="-1">Button with States <a class="header-anchor" href="#button-with-states" aria-label="Permalink to &quot;Button with States&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;">button</span></span>
15
+ <span class="line"><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>
16
+ <span class="line"><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;</span></span>
17
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> bg:primary </span></span>
18
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> text:white </span></span>
19
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> rounded:medium</span></span>
20
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> hover:bg:[#2563EB]</span></span>
21
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> active:bg:[#1D4ED8]</span></span>
22
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> disabled:bg:grey</span></span>
23
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> disabled:opacity:[0.5]</span></span>
24
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;</span></span>
25
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
26
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Submit</span></span>
27
+ <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></code></pre></div><h3 id="card-with-hover-effect" tabindex="-1">Card with Hover Effect <a class="header-anchor" href="#card-with-hover-effect" aria-label="Permalink to &quot;Card with Hover Effect&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>
28
+ <span class="line"><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>
29
+ <span class="line"><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>
30
+ <span class="line"><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;</span></span>
31
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> bg:white </span></span>
32
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> rounded:big </span></span>
33
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> shadow:small</span></span>
34
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> hover:shadow:big</span></span>
35
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;</span></span>
36
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
37
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Card Title&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h3</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
38
+ <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:#24292E;--shiki-dark:#E1E4E8;">&gt;Card content that lifts on hover.&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
39
+ <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><h3 id="link-navigation" tabindex="-1">Link Navigation <a class="header-anchor" href="#link-navigation" aria-label="Permalink to &quot;Link Navigation&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;">nav</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:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;g:medium&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
40
+ <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:dark hover:text:primary font:medium&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Home&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
41
+ <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;About&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
42
+ <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;Contact&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">a</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
43
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">nav</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="input-with-focus-ring" tabindex="-1">Input with Focus Ring <a class="header-anchor" href="#input-with-focus-ring" aria-label="Permalink to &quot;Input with Focus Ring&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;">input</span></span>
44
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text&quot;</span></span>
45
+ <span class="line"><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:small w:[100%]&quot;</span></span>
46
+ <span class="line"><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;</span></span>
47
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> border:grey </span></span>
48
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> border-w:[1px]</span></span>
49
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> rounded:small</span></span>
50
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> focus:border:primary</span></span>
51
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;</span></span>
52
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> placeholder</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Enter your email&quot;</span></span>
53
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">/&gt;</span></span></code></pre></div><h3 id="toggle-button" tabindex="-1">Toggle Button <a class="header-anchor" href="#toggle-button" aria-label="Permalink to &quot;Toggle Button&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;">button</span></span>
54
+ <span class="line"><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:small&quot;</span></span>
55
+ <span class="line"><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;</span></span>
56
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> bg:light</span></span>
57
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> text:dark</span></span>
58
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> rounded:medium</span></span>
59
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> hover:bg:grey</span></span>
60
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> active:bg:dark</span></span>
61
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> active:text:white</span></span>
62
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;</span></span>
63
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
64
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Toggle</span></span>
65
+ <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></code></pre></div><h2 id="combining-with-responsive" tabindex="-1">Combining with Responsive <a class="header-anchor" href="#combining-with-responsive" aria-label="Permalink to &quot;Combining with Responsive&quot;">​</a></h2><p>States can be combined with responsive prefixes:</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;</span></span>
66
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> bg:primary</span></span>
67
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> hover:bg:[#2563EB]</span></span>
68
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> tab:hover:shadow:big</span></span>
69
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
70
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Hover shadow only on tablet+</span></span>
71
+ <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></code></pre></div><h2 id="accessibility-note" tabindex="-1">Accessibility Note <a class="header-anchor" href="#accessibility-note" aria-label="Permalink to &quot;Accessibility Note&quot;">​</a></h2><p>Always ensure sufficient color contrast for hover and focus states. The <code>:focus</code> state is especially important for keyboard navigation.</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;</span></span>
72
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> bg:primary</span></span>
73
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> text:white</span></span>
74
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> focus:shadow:[0_0_0_3px_rgba(59,130,246,0.5)]</span></span>
75
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
76
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Accessible focus ring</span></span>
77
+ <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></code></pre></div>`,30)])])}const o=i(l,[["render",h]]);export{g as __pageData,o as default};
package/docs/.vitepress/dist/assets/guide_states.md.DRjYOZDJ.lean.js ADDED
@@ -0,0 +1 @@
1
+ import{_ as i,c as a,o as t,ag as n}from"./chunks/framework.qISVh_QZ.js";const g=JSON.parse('{"title":"Hover & States","description":"","frontmatter":{},"headers":[],"relativePath":"guide/states.md","filePath":"guide/states.md"}'),l={name:"guide/states.md"};function h(e,s,p,k,E,r){return t(),a("div",null,[...s[0]||(s[0]=[n("",30)])])}const o=i(l,[["render",h]]);export{g as __pageData,o as default};
package/docs/.vitepress/dist/assets/guide_tri-attribute.md.CoFqfmPZ.js ADDED
@@ -0,0 +1,45 @@
1
+ import{_ as i,c as a,o as t,ag as h}from"./chunks/framework.qISVh_QZ.js";const g=JSON.parse('{"title":"Tri-Attribute Syntax","description":"","frontmatter":{},"headers":[],"relativePath":"guide/tri-attribute.md","filePath":"guide/tri-attribute.md"}'),l={name:"guide/tri-attribute.md"};function n(e,s,k,p,E,d){return t(),a("div",null,[...s[0]||(s[0]=[h(`<h1 id="tri-attribute-syntax" tabindex="-1">Tri-Attribute Syntax <a class="header-anchor" href="#tri-attribute-syntax" aria-label="Permalink to &quot;Tri-Attribute Syntax&quot;">​</a></h1><p>SenangStart separates styling concerns into three distinct attributes.</p><h2 id="overview" tabindex="-1">Overview <a class="header-anchor" href="#overview" aria-label="Permalink to &quot;Overview&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Attribute</th><th>Purpose</th><th>Example</th></tr></thead><tbody><tr><td><code>layout</code></td><td>Structure &amp; positioning</td><td><code>layout=&quot;flex col center&quot;</code></td></tr><tr><td><code>space</code></td><td>Sizing &amp; spacing</td><td><code>space=&quot;p:medium g:small&quot;</code></td></tr><tr><td><code>visual</code></td><td>Colors &amp; appearance</td><td><code>visual=&quot;bg:white rounded:big&quot;</code></td></tr></tbody></table><h2 id="why-three-attributes" tabindex="-1">Why Three Attributes? <a class="header-anchor" href="#why-three-attributes" aria-label="Permalink to &quot;Why Three Attributes?&quot;">​</a></h2><h3 id="traditional-css-classes-are-chaotic" tabindex="-1">Traditional CSS classes are chaotic: <a class="header-anchor" href="#traditional-css-classes-are-chaotic" aria-label="Permalink to &quot;Traditional CSS classes are chaotic:&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;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex flex-col items-center p-4 gap-2 bg-white rounded-lg shadow-md&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><p>Everything is mixed together. What&#39;s layout? What&#39;s spacing? What&#39;s visual?</p><h3 id="senangstart-is-organized" tabindex="-1">SenangStart is organized: <a class="header-anchor" href="#senangstart-is-organized" aria-label="Permalink to &quot;SenangStart is organized:&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>
2
+ <span class="line"><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 center&quot;</span></span>
3
+ <span class="line"><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 g:small&quot;</span></span>
4
+ <span class="line"><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&quot;</span></span>
5
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><p><strong>Clear separation.</strong> Anyone reading this code instantly knows:</p><ul><li><strong>Structure:</strong> Flexbox column, centered</li><li><strong>Sizing:</strong> Medium padding, small gap</li><li><strong>Appearance:</strong> White, rounded, shadowed</li></ul><h2 id="the-layout-attribute" tabindex="-1">The <code>layout</code> Attribute <a class="header-anchor" href="#the-layout-attribute" aria-label="Permalink to &quot;The \`layout\` Attribute&quot;">​</a></h2><p>Controls <strong>how elements are positioned</strong> and <strong>how they flow</strong>.</p><h3 id="display-types" tabindex="-1">Display Types <a class="header-anchor" href="#display-types" aria-label="Permalink to &quot;Display Types&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;"> 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>
6
+ <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>
7
+ <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;block&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Block element&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
8
+ <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><h3 id="flex-direction" tabindex="-1">Flex Direction <a class="header-anchor" href="#flex-direction" aria-label="Permalink to &quot;Flex Direction&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;"> 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 (default)&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
9
+ <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>
10
+ <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-reverse&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Reversed horizontal&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
11
+ <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-reverse&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Reversed 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><h3 id="alignment" tabindex="-1">Alignment <a class="header-anchor" href="#alignment" aria-label="Permalink to &quot;Alignment&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;"> 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;Center both axes&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
12
+ <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 between&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Space between items&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
13
+ <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 start&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Align to start&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
14
+ <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 end&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Align to end&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="position" tabindex="-1">Position <a class="header-anchor" href="#position" aria-label="Permalink to &quot;Position&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;">nav</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;fixed z:top&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Fixed navigation&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">nav</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
15
+ <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;sticky&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Sticky element&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
16
+ <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;absolute z:high&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Absolute positioned&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
17
+ <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;relative&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Relative positioned&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="the-space-attribute" tabindex="-1">The <code>space</code> Attribute <a class="header-anchor" href="#the-space-attribute" aria-label="Permalink to &quot;The \`space\` Attribute&quot;">​</a></h2><p>Controls <strong>sizing and spacing</strong> using the natural scale.</p><h3 id="syntax" tabindex="-1">Syntax <a class="header-anchor" href="#syntax" aria-label="Permalink to &quot;Syntax&quot;">​</a></h3><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><h3 id="padding" tabindex="-1">Padding <a class="header-anchor" href="#padding" aria-label="Permalink to &quot;Padding&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;"> 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>
18
+ <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 &amp; vertical&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
19
+ <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:small p-b:big&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Top &amp; 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><h3 id="margin" tabindex="-1">Margin <a class="header-anchor" href="#margin" aria-label="Permalink to &quot;Margin&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;"> 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>
20
+ <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 only&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
21
+ <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-x:auto&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Center horizontally&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="gap-flex-grid" tabindex="-1">Gap (Flex/Grid) <a class="header-anchor" href="#gap-flex-grid" aria-label="Permalink to &quot;Gap (Flex/Grid)&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;"> 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:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;g:small&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Small gap&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
22
+ <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:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;g:medium&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Medium gap&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="sizing" tabindex="-1">Sizing <a class="header-anchor" href="#sizing" aria-label="Permalink to &quot;Sizing&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;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;w:[100%] h:[400px]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Explicit size&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
23
+ <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;max-w:[1200px] min-h:[80vh]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Constraints&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-values-escape-hatch" tabindex="-1">Arbitrary Values (Escape Hatch) <a class="header-anchor" href="#arbitrary-values-escape-hatch" aria-label="Permalink to &quot;Arbitrary Values (Escape Hatch)&quot;">​</a></h3><p>Use brackets for specific 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;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;w:[350px]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;350px width&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
24
+ <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:[20px_40px]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;20px top/bottom, 40px left/right&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
25
+ <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-t:[5rem]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;5rem top margin&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="the-visual-attribute" tabindex="-1">The <code>visual</code> Attribute <a class="header-anchor" href="#the-visual-attribute" aria-label="Permalink to &quot;The \`visual\` Attribute&quot;">​</a></h2><p>Controls <strong>colors, textures, and appearance</strong>.</p><h3 id="background" tabindex="-1">Background <a class="header-anchor" href="#background" aria-label="Permalink to &quot;Background&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: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>
26
+ <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>
27
+ <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></code></pre></div><h3 id="text" tabindex="-1">Text <a class="header-anchor" href="#text" aria-label="Permalink to &quot;Text&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: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>
28
+ <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 text-size:small&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Grey, small text&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
29
+ <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;Bold 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="borders-shadows" tabindex="-1">Borders &amp; Shadows <a class="header-anchor" href="#borders-shadows" aria-label="Permalink to &quot;Borders &amp; Shadows&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;rounded:medium shadow:big&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Rounded with shadow&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
30
+ <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:[2px]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Grey 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="combining-properties" tabindex="-1">Combining Properties <a class="header-anchor" href="#combining-properties" aria-label="Permalink to &quot;Combining Properties&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:white rounded:big shadow:medium text:dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
31
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Card with multiple visual properties</span></span>
32
+ <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><h2 id="combining-all-three" tabindex="-1">Combining All Three <a class="header-anchor" href="#combining-all-three" aria-label="Permalink to &quot;Combining All Three&quot;">​</a></h2><p>Here&#39;s a complete example:</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>
33
+ <span class="line"><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>
34
+ <span class="line"><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;w:[320px] p:medium g:small&quot;</span></span>
35
+ <span class="line"><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&quot;</span></span>
36
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
37
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h2</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 text-size:big text:dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Card Title&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
38
+ <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:grey&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Card description goes here.&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
39
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span></span>
40
+ <span class="line"><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>
41
+ <span class="line"><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 text:white rounded:medium&quot;</span></span>
42
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &gt;</span></span>
43
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Action</span></span>
44
+ <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>
45
+ <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><p><strong>Reading this code:</strong></p><ul><li>The container is a vertical flex column, 320px wide, with medium padding, small gap, white background, big rounded corners, and medium shadow</li><li>The title is bold, big text, dark color</li><li>The button has big horizontal padding, small vertical padding, primary background, white text, medium rounded corners</li></ul>`,52)])])}const o=i(l,[["render",n]]);export{g as __pageData,o as default};
package/docs/.vitepress/dist/assets/guide_tri-attribute.md.CoFqfmPZ.lean.js ADDED
@@ -0,0 +1 @@
1
+ import{_ as i,c as a,o as t,ag as h}from"./chunks/framework.qISVh_QZ.js";const g=JSON.parse('{"title":"Tri-Attribute Syntax","description":"","frontmatter":{},"headers":[],"relativePath":"guide/tri-attribute.md","filePath":"guide/tri-attribute.md"}'),l={name:"guide/tri-attribute.md"};function n(e,s,k,p,E,d){return t(),a("div",null,[...s[0]||(s[0]=[h("",52)])])}const o=i(l,[["render",n]]);export{g as __pageData,o as default};
package/docs/.vitepress/dist/assets/index.md.CUZJzNzP.js ADDED
@@ -0,0 +1,7 @@
1
+ import{_ as s,c as t,o as a,ag as e}from"./chunks/framework.qISVh_QZ.js";const c=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"home","hero":{"name":"SenangStart CSS","text":"The Intent-First CSS Engine","tagline":"Speak Human. Compile to Logic.","image":{"src":"https://senangstart.com/img/use_senangstart.svg","alt":"SenangStart CSS"},"actions":[{"theme":"brand","text":"Get Started","link":"/guide/getting-started"},{"theme":"alt","text":"View on GitHub","link":"https://github.com/bookklik-technologies/senangstart-css"}]},"features":[{"icon":"🧠","title":"Natural Language","details":"Use tiny, small, medium, big, giant, vast — words you already know. No more memorizing px-4, px-8, px-16."},{"icon":"🎯","title":"Separation of Concerns","details":"layout for structure, space for sizing, visual for appearance. Clean, semantic, maintainable."},{"icon":"🤖","title":"AI-Friendly","details":"Generates context files for LLMs. Say \\"tighten it up\\" and AI knows to scale down spacing."},{"icon":"⚡","title":"Zero Build Option","details":"Use the CDN JIT runtime for instant styling. No build step required for prototyping."},{"icon":"📱","title":"Responsive by Design","details":"Mobile-first breakpoints with intuitive prefixes like mob:, tab:, lap:, desk:."},{"icon":"🎨","title":"Fully Customizable","details":"Override any scale, add custom colors, extend the theme to match your brand."}]},"headers":[],"relativePath":"index.md","filePath":"index.md"}'),n={name:"index.md"};function l(o,i,r,p,h,d){return a(),t("div",null,[...i[0]||(i[0]=[e(`<h2 id="quick-example" tabindex="-1">Quick Example <a class="header-anchor" href="#quick-example" aria-label="Permalink to &quot;Quick Example&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>
2
+ <span class="line"><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 center&quot;</span></span>
3
+ <span class="line"><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:big&quot;</span></span>
4
+ <span class="line"><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 text:white rounded:big&quot;</span></span>
5
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
6
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Hello SenangStart!</span></span>
7
+ <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><p>This creates a flexbox column, centered, with big padding, primary background, white text, and big rounded corners. <strong>No CSS classes to memorize.</strong></p>`,3)])])}const g=s(n,[["render",l]]);export{c as __pageData,g as default};
package/docs/.vitepress/dist/assets/index.md.CUZJzNzP.lean.js ADDED
@@ -0,0 +1 @@
1
+ import{_ as s,c as t,o as a,ag as e}from"./chunks/framework.qISVh_QZ.js";const c=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"home","hero":{"name":"SenangStart CSS","text":"The Intent-First CSS Engine","tagline":"Speak Human. Compile to Logic.","image":{"src":"https://senangstart.com/img/use_senangstart.svg","alt":"SenangStart CSS"},"actions":[{"theme":"brand","text":"Get Started","link":"/guide/getting-started"},{"theme":"alt","text":"View on GitHub","link":"https://github.com/bookklik-technologies/senangstart-css"}]},"features":[{"icon":"🧠","title":"Natural Language","details":"Use tiny, small, medium, big, giant, vast — words you already know. No more memorizing px-4, px-8, px-16."},{"icon":"🎯","title":"Separation of Concerns","details":"layout for structure, space for sizing, visual for appearance. Clean, semantic, maintainable."},{"icon":"🤖","title":"AI-Friendly","details":"Generates context files for LLMs. Say \\"tighten it up\\" and AI knows to scale down spacing."},{"icon":"⚡","title":"Zero Build Option","details":"Use the CDN JIT runtime for instant styling. No build step required for prototyping."},{"icon":"📱","title":"Responsive by Design","details":"Mobile-first breakpoints with intuitive prefixes like mob:, tab:, lap:, desk:."},{"icon":"🎨","title":"Fully Customizable","details":"Override any scale, add custom colors, extend the theme to match your brand."}]},"headers":[],"relativePath":"index.md","filePath":"index.md"}'),n={name:"index.md"};function l(o,i,r,p,h,d){return a(),t("div",null,[...i[0]||(i[0]=[e("",3)])])}const g=s(n,[["render",l]]);export{c as __pageData,g as default};
package/docs/.vitepress/dist/assets/reference_breakpoints.md.BEhuwXBS.js ADDED
@@ -0,0 +1,48 @@
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(`<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>
2
+ <span class="line"></span>
3
+ <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>
4
+ <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>
5
+ <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;">1024</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;">/* lap: */</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
6
+ <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;">1280</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;">/* desk: */</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span></code></pre></div><h2 id="usage" tabindex="-1">Usage <a class="header-anchor" href="#usage" aria-label="Permalink to &quot;Usage&quot;">​</a></h2><h3 id="responsive-spacing" tabindex="-1">Responsive Spacing <a class="header-anchor" href="#responsive-spacing" aria-label="Permalink to &quot;Responsive Spacing&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;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p:small tab:p:medium lap:p:big&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
7
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Progressive padding</span></span>
8
+ <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><h3 id="responsive-layout" tabindex="-1">Responsive Layout <a class="header-anchor" href="#responsive-layout" aria-label="Permalink to &quot;Responsive Layout&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;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex col tab:row&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
9
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Column on mobile, row on tablet+</span></span>
10
+ <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>
11
+ <span class="line"></span>
12
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">nav</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 tab:flex&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
13
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Hidden on mobile, visible on tablet+</span></span>
14
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">nav</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="responsive-typography" tabindex="-1">Responsive Typography <a class="header-anchor" href="#responsive-typography" aria-label="Permalink to &quot;Responsive Typography&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;">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:big tab:text-size:giant lap:text-size:vast&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
15
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Responsive heading</span></span>
16
+ <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:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="mobile-first-approach" tabindex="-1">Mobile-First Approach <a class="header-anchor" href="#mobile-first-approach" aria-label="Permalink to &quot;Mobile-First Approach&quot;">​</a></h2><p>SenangStart uses mobile-first responsive design:</p><ol><li><strong>Base styles</strong> apply to all screen sizes</li><li><strong>Breakpoint prefixes</strong> apply from that breakpoint UP</li></ol><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:#6A737D;--shiki-dark:#6A737D;">&lt;!-- This means: --&gt;</span></span>
17
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- - Mobile: small padding --&gt;</span></span>
18
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- - Tablet and up: medium padding --&gt;</span></span>
19
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- - Laptop and up: big padding --&gt;</span></span>
20
+ <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:small tab:p:medium lap:p:big&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
21
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Content</span></span>
22
+ <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><h2 id="customization" tabindex="-1">Customization <a class="header-anchor" href="#customization" aria-label="Permalink to &quot;Customization&quot;">​</a></h2><p>Add or modify breakpoints 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>
23
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> theme: {</span></span>
24
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> screens: {</span></span>
25
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;mob&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;480px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
26
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;tab&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;768px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
27
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;lap&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;1024px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
28
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;desk&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;1280px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
29
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;wide&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;1536px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Add wider</span></span>
30
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;ultra&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;1920px&#39;</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Add ultra-wide</span></span>
31
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
32
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
33
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>Use custom breakpoints:</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;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;desk:p:big wide:p:giant ultra:p:vast&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
34
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Extra-large screen padding</span></span>
35
+ <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><h2 id="common-patterns" tabindex="-1">Common Patterns <a class="header-anchor" href="#common-patterns" aria-label="Permalink to &quot;Common Patterns&quot;">​</a></h2><h3 id="show-hide-elements" tabindex="-1">Show/Hide Elements <a class="header-anchor" href="#show-hide-elements" aria-label="Permalink to &quot;Show/Hide Elements&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:#6A737D;--shiki-dark:#6A737D;">&lt;!-- Mobile only --&gt;</span></span>
36
+ <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;block tab:hidden&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Mobile menu&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
37
+ <span class="line"></span>
38
+ <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- Desktop only --&gt;</span></span>
39
+ <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 lap:block&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Desktop sidebar&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="responsive-grid" tabindex="-1">Responsive Grid <a class="header-anchor" href="#responsive-grid" aria-label="Permalink to &quot;Responsive Grid&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:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
40
+ <span class="line"><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>
41
+ <span class="line"><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;g:small tab:g:medium&quot;</span></span>
42
+ <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;grid-template-columns: 1fr; </span></span>
43
+ <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @media (min-width: 768px) { grid-template-columns: repeat(2, 1fr); }&quot;</span></span>
44
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
45
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Cards...</span></span>
46
+ <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><h3 id="responsive-container" tabindex="-1">Responsive Container <a class="header-anchor" href="#responsive-container" aria-label="Permalink to &quot;Responsive Container&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;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p:small tab:p:medium lap:p:big max-w:[1200px] m-x:auto&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
47
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Centered container with responsive padding</span></span>
48
+ <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>`,29)])])}const g=i(e,[["render",l]]);export{o as __pageData,g as default};
package/docs/.vitepress/dist/assets/reference_breakpoints.md.BEhuwXBS.lean.js ADDED
@@ -0,0 +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};
package/docs/.vitepress/dist/assets/reference_colors.md.Do4abjs1.js ADDED
@@ -0,0 +1,29 @@
1
+ import{_ as i,c as a,o as t,ag as n}from"./chunks/framework.qISVh_QZ.js";const o=JSON.parse('{"title":"Colors Reference","description":"","frontmatter":{},"headers":[],"relativePath":"reference/colors.md","filePath":"reference/colors.md"}'),h={name:"reference/colors.md"};function l(e,s,k,p,r,d){return t(),a("div",null,[...s[0]||(s[0]=[n(`<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="default-palette" tabindex="-1">Default Palette <a class="header-anchor" href="#default-palette" aria-label="Permalink to &quot;Default Palette&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="css-variables" tabindex="-1">CSS Variables <a class="header-anchor" href="#css-variables" aria-label="Permalink to &quot;CSS Variables&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:#6F42C1;--shiki-dark:#B392F0;">:root</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
2
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --c-white</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#FFFFFF</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
3
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --c-black</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#000000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
4
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --c-grey</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#6B7280</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
5
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --c-dark</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#3E4A5D</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
6
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --c-light</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#DBEAFE</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
7
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --c-primary</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#2563EB</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
8
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --c-secondary</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#DBEAFE</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
9
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --c-success</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#10B981</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
10
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --c-warning</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#F59E0B</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
11
+ <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --c-danger</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#EF4444</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
12
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></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: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>
13
+ <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 background&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
14
+ <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:dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Dark 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: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>
15
+ <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;Grey text&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
16
+ <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;Primary 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:grey border-w:[1px]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Grey border&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
17
+ <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:primary border-w:[2px]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Primary 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>
18
+ <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>
19
+ <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>
20
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> theme: {</span></span>
21
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> colors: {</span></span>
22
+ <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>
23
+ <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>
24
+ <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>
25
+ <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>
26
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
27
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
28
+ <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>Use your custom colors:</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:brand text:white&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Brand color&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
29
+ <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:accent&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Accent button&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="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>`,23)])])}const g=i(h,[["render",l]]);export{o as __pageData,g as default};
package/docs/.vitepress/dist/assets/reference_colors.md.Do4abjs1.lean.js ADDED
@@ -0,0 +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":"Colors Reference","description":"","frontmatter":{},"headers":[],"relativePath":"reference/colors.md","filePath":"reference/colors.md"}'),h={name:"reference/colors.md"};function l(e,s,k,p,r,d){return t(),a("div",null,[...s[0]||(s[0]=[n("",23)])])}const g=i(h,[["render",l]]);export{o as __pageData,g as default};