@bookklik/senangstart-css 0.1.4 → 0.1.7

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 (524) hide show
  1. package/.github/workflows/deploy-docs.yml +7 -1
  2. package/dist/senangstart-css.js +1436 -14
  3. package/dist/senangstart-css.min.js +1159 -10
  4. package/docs/.vitepress/config.js +621 -15
  5. package/docs/SYNTAX-REFERENCE.md +1555 -0
  6. package/docs/guide/preflight.md +139 -0
  7. package/docs/ms/guide/preflight.md +139 -0
  8. package/docs/ms/reference/colors.md +45 -45
  9. package/docs/ms/reference/layout/align-content.md +35 -0
  10. package/docs/ms/reference/layout/align-items.md +33 -0
  11. package/docs/ms/reference/layout/align-self.md +34 -0
  12. package/docs/ms/reference/layout/aspect-ratio.md +40 -0
  13. package/docs/ms/reference/layout/border-collapse.md +30 -0
  14. package/docs/ms/reference/layout/border-spacing.md +39 -0
  15. package/docs/ms/reference/layout/box-sizing.md +30 -0
  16. package/docs/ms/reference/layout/caption-side.md +30 -0
  17. package/docs/ms/reference/layout/columns.md +30 -0
  18. package/docs/ms/reference/layout/container.md +29 -0
  19. package/docs/ms/reference/layout/display.md +60 -0
  20. package/docs/ms/reference/layout/flex-basis.md +38 -0
  21. package/docs/ms/reference/layout/flex-direction.md +33 -0
  22. package/docs/ms/reference/layout/flex-items.md +32 -0
  23. package/docs/ms/reference/layout/flex-wrap.md +31 -0
  24. package/docs/ms/reference/layout/flex.md +40 -0
  25. package/docs/ms/reference/layout/float-clear.md +32 -0
  26. package/docs/ms/reference/layout/grid-auto-flow.md +33 -0
  27. package/docs/ms/reference/layout/grid-auto-sizing.md +32 -0
  28. package/docs/ms/reference/layout/grid-column-span.md +31 -0
  29. package/docs/ms/reference/layout/grid-columns.md +32 -0
  30. package/docs/ms/reference/layout/grid-row-span.md +30 -0
  31. package/docs/ms/reference/layout/grid-rows.md +31 -0
  32. package/docs/ms/reference/layout/inset.md +44 -0
  33. package/docs/ms/reference/layout/isolation.md +30 -0
  34. package/docs/ms/reference/layout/justify-content.md +36 -0
  35. package/docs/ms/reference/layout/justify-items.md +32 -0
  36. package/docs/ms/reference/layout/justify-self.md +33 -0
  37. package/docs/ms/reference/layout/object-fit.md +33 -0
  38. package/docs/ms/reference/layout/object-position.md +45 -0
  39. package/docs/ms/reference/layout/order.md +32 -0
  40. package/docs/ms/reference/layout/overflow.md +34 -0
  41. package/docs/ms/reference/layout/overscroll.md +31 -0
  42. package/docs/ms/reference/layout/place-content.md +35 -0
  43. package/docs/ms/reference/layout/place-items.md +32 -0
  44. package/docs/ms/reference/layout/place-self.md +33 -0
  45. package/docs/ms/reference/layout/position.md +34 -0
  46. package/docs/ms/reference/layout/shorthand-alignment.md +34 -0
  47. package/docs/ms/reference/layout/table-layout.md +30 -0
  48. package/docs/ms/reference/layout/visibility.md +30 -0
  49. package/docs/ms/reference/layout/z-index.md +33 -0
  50. package/docs/ms/reference/layout.md +53 -95
  51. package/docs/ms/reference/space/arbitrary-values.md +32 -0
  52. package/docs/ms/reference/space/gap.md +44 -0
  53. package/docs/ms/reference/space/height.md +44 -0
  54. package/docs/ms/reference/space/margin.md +49 -0
  55. package/docs/ms/reference/space/padding.md +49 -0
  56. package/docs/ms/reference/space/scale-reference.md +43 -0
  57. package/docs/ms/reference/space/sizing.md +27 -0
  58. package/docs/ms/reference/space/width.md +45 -0
  59. package/docs/ms/reference/space.md +15 -99
  60. package/docs/ms/reference/spacing.md +22 -8
  61. package/docs/ms/reference/visual/accent-color.md +31 -0
  62. package/docs/ms/reference/visual/animation-builtin.md +41 -0
  63. package/docs/ms/reference/visual/animation-delay.md +41 -0
  64. package/docs/ms/reference/visual/animation-direction.md +32 -0
  65. package/docs/ms/reference/visual/animation-duration.md +43 -0
  66. package/docs/ms/reference/visual/animation-fill.md +32 -0
  67. package/docs/ms/reference/visual/animation-iteration.md +30 -0
  68. package/docs/ms/reference/visual/animation-play.md +30 -0
  69. package/docs/ms/reference/visual/appearance.md +30 -0
  70. package/docs/ms/reference/visual/backdrop-blur.md +43 -0
  71. package/docs/ms/reference/visual/backdrop-brightness.md +41 -0
  72. package/docs/ms/reference/visual/backdrop-contrast.md +41 -0
  73. package/docs/ms/reference/visual/backdrop-grayscale.md +39 -0
  74. package/docs/ms/reference/visual/backdrop-hue-rotate.md +39 -0
  75. package/docs/ms/reference/visual/backdrop-invert.md +39 -0
  76. package/docs/ms/reference/visual/backdrop-opacity.md +39 -0
  77. package/docs/ms/reference/visual/backdrop-saturate.md +41 -0
  78. package/docs/ms/reference/visual/backdrop-sepia.md +39 -0
  79. package/docs/ms/reference/visual/background-attachment.md +31 -0
  80. package/docs/ms/reference/visual/background-blend-mode.md +34 -0
  81. package/docs/ms/reference/visual/background-clip.md +32 -0
  82. package/docs/ms/reference/visual/background-color.md +33 -0
  83. package/docs/ms/reference/visual/background-image.md +41 -0
  84. package/docs/ms/reference/visual/background-origin.md +31 -0
  85. package/docs/ms/reference/visual/background-position.md +45 -0
  86. package/docs/ms/reference/visual/background-repeat.md +34 -0
  87. package/docs/ms/reference/visual/background-size.md +39 -0
  88. package/docs/ms/reference/visual/background.md +13 -0
  89. package/docs/ms/reference/visual/blend-modes.md +34 -0
  90. package/docs/ms/reference/visual/border-radius.md +34 -0
  91. package/docs/ms/reference/visual/border-style.md +33 -0
  92. package/docs/ms/reference/visual/border-width.md +44 -0
  93. package/docs/ms/reference/visual/border.md +43 -0
  94. package/docs/ms/reference/visual/box-shadow.md +33 -0
  95. package/docs/ms/reference/visual/caret-color.md +31 -0
  96. package/docs/ms/reference/visual/color-scheme.md +31 -0
  97. package/docs/ms/reference/visual/cursor.md +37 -0
  98. package/docs/ms/reference/visual/field-sizing.md +30 -0
  99. package/docs/ms/reference/visual/fill.md +38 -0
  100. package/docs/ms/reference/visual/filter-blur.md +43 -0
  101. package/docs/ms/reference/visual/filter-brightness.md +41 -0
  102. package/docs/ms/reference/visual/filter-contrast.md +41 -0
  103. package/docs/ms/reference/visual/filter-drop-shadow.md +42 -0
  104. package/docs/ms/reference/visual/filter-grayscale.md +39 -0
  105. package/docs/ms/reference/visual/filter-hue-rotate.md +39 -0
  106. package/docs/ms/reference/visual/filter-invert.md +39 -0
  107. package/docs/ms/reference/visual/filter-saturate.md +41 -0
  108. package/docs/ms/reference/visual/filter-sepia.md +39 -0
  109. package/docs/ms/reference/visual/font-family.md +31 -0
  110. package/docs/ms/reference/visual/font-smoothing.md +30 -0
  111. package/docs/ms/reference/visual/font-style.md +30 -0
  112. package/docs/ms/reference/visual/font-variant-numeric.md +35 -0
  113. package/docs/ms/reference/visual/font-weight.md +31 -0
  114. package/docs/ms/reference/visual/forced-color-adjust.md +30 -0
  115. package/docs/ms/reference/visual/hyphens.md +31 -0
  116. package/docs/ms/reference/visual/letter-spacing.md +42 -0
  117. package/docs/ms/reference/visual/line-clamp.md +40 -0
  118. package/docs/ms/reference/visual/line-height.md +42 -0
  119. package/docs/ms/reference/visual/list-style.md +34 -0
  120. package/docs/ms/reference/visual/mask.md +39 -0
  121. package/docs/ms/reference/visual/opacity.md +33 -0
  122. package/docs/ms/reference/visual/outline.md +31 -0
  123. package/docs/ms/reference/visual/pointer-events.md +30 -0
  124. package/docs/ms/reference/visual/resize.md +32 -0
  125. package/docs/ms/reference/visual/scroll-behavior.md +30 -0
  126. package/docs/ms/reference/visual/scroll-margin.md +41 -0
  127. package/docs/ms/reference/visual/scroll-padding.md +41 -0
  128. package/docs/ms/reference/visual/scroll-snap-align.md +32 -0
  129. package/docs/ms/reference/visual/scroll-snap-stop.md +30 -0
  130. package/docs/ms/reference/visual/scroll-snap-type.md +34 -0
  131. package/docs/ms/reference/visual/state-prefixes.md +37 -0
  132. package/docs/ms/reference/visual/stroke-width.md +39 -0
  133. package/docs/ms/reference/visual/stroke.md +38 -0
  134. package/docs/ms/reference/visual/text-alignment.md +32 -0
  135. package/docs/ms/reference/visual/text-color.md +41 -0
  136. package/docs/ms/reference/visual/text-decoration.md +32 -0
  137. package/docs/ms/reference/visual/text-indent.md +37 -0
  138. package/docs/ms/reference/visual/text-overflow.md +31 -0
  139. package/docs/ms/reference/visual/text-shadow.md +40 -0
  140. package/docs/ms/reference/visual/text-size.md +32 -0
  141. package/docs/ms/reference/visual/text-transform.md +32 -0
  142. package/docs/ms/reference/visual/text-wrap.md +32 -0
  143. package/docs/ms/reference/visual/touch-action.md +36 -0
  144. package/docs/ms/reference/visual/transform-backface.md +30 -0
  145. package/docs/ms/reference/visual/transform-origin.md +45 -0
  146. package/docs/ms/reference/visual/transform-perspective-origin.md +45 -0
  147. package/docs/ms/reference/visual/transform-perspective.md +43 -0
  148. package/docs/ms/reference/visual/transform-rotate.md +40 -0
  149. package/docs/ms/reference/visual/transform-scale.md +43 -0
  150. package/docs/ms/reference/visual/transform-skew.md +40 -0
  151. package/docs/ms/reference/visual/transform-style.md +30 -0
  152. package/docs/ms/reference/visual/transform-translate.md +39 -0
  153. package/docs/ms/reference/visual/transition-delay.md +41 -0
  154. package/docs/ms/reference/visual/transition-duration.md +43 -0
  155. package/docs/ms/reference/visual/transition-property.md +34 -0
  156. package/docs/ms/reference/visual/transition-timing.md +40 -0
  157. package/docs/ms/reference/visual/typography-keywords.md +81 -0
  158. package/docs/ms/reference/visual/user-select.md +32 -0
  159. package/docs/ms/reference/visual/vertical-align.md +36 -0
  160. package/docs/ms/reference/visual/whitespace.md +34 -0
  161. package/docs/ms/reference/visual/will-change.md +33 -0
  162. package/docs/ms/reference/visual/word-break.md +32 -0
  163. package/docs/ms/reference/visual.md +145 -148
  164. package/docs/public/assets/senangstart-css.min.js +1545 -0
  165. package/docs/reference/layout/align-content.md +35 -0
  166. package/docs/reference/layout/align-items.md +33 -0
  167. package/docs/reference/layout/align-self.md +34 -0
  168. package/docs/reference/layout/aspect-ratio.md +40 -0
  169. package/docs/reference/layout/border-collapse.md +30 -0
  170. package/docs/reference/layout/border-spacing.md +39 -0
  171. package/docs/reference/layout/box-sizing.md +30 -0
  172. package/docs/reference/layout/caption-side.md +30 -0
  173. package/docs/reference/layout/columns.md +30 -0
  174. package/docs/reference/layout/container.md +29 -0
  175. package/docs/reference/layout/display.md +60 -0
  176. package/docs/reference/layout/flex-basis.md +38 -0
  177. package/docs/reference/layout/flex-direction.md +33 -0
  178. package/docs/reference/layout/flex-items.md +32 -0
  179. package/docs/reference/layout/flex-wrap.md +31 -0
  180. package/docs/reference/layout/flex.md +40 -0
  181. package/docs/reference/layout/float-clear.md +32 -0
  182. package/docs/reference/layout/grid-auto-flow.md +33 -0
  183. package/docs/reference/layout/grid-auto-sizing.md +32 -0
  184. package/docs/reference/layout/grid-column-span.md +31 -0
  185. package/docs/reference/layout/grid-columns.md +32 -0
  186. package/docs/reference/layout/grid-row-span.md +30 -0
  187. package/docs/reference/layout/grid-rows.md +31 -0
  188. package/docs/reference/layout/inset.md +44 -0
  189. package/docs/reference/layout/isolation.md +30 -0
  190. package/docs/reference/layout/justify-content.md +36 -0
  191. package/docs/reference/layout/justify-items.md +32 -0
  192. package/docs/reference/layout/justify-self.md +33 -0
  193. package/docs/reference/layout/object-fit.md +33 -0
  194. package/docs/reference/layout/object-position.md +45 -0
  195. package/docs/reference/layout/order.md +32 -0
  196. package/docs/reference/layout/overflow.md +34 -0
  197. package/docs/reference/layout/overscroll.md +31 -0
  198. package/docs/reference/layout/place-content.md +35 -0
  199. package/docs/reference/layout/place-items.md +32 -0
  200. package/docs/reference/layout/place-self.md +33 -0
  201. package/docs/reference/layout/position.md +34 -0
  202. package/docs/reference/layout/shorthand-alignment.md +34 -0
  203. package/docs/reference/layout/table-layout.md +30 -0
  204. package/docs/reference/layout/visibility.md +30 -0
  205. package/docs/reference/layout/z-index.md +33 -0
  206. package/docs/reference/layout.md +60 -102
  207. package/docs/reference/space/arbitrary-values.md +39 -0
  208. package/docs/reference/space/gap.md +44 -0
  209. package/docs/reference/space/height.md +44 -0
  210. package/docs/reference/space/margin.md +49 -0
  211. package/docs/reference/space/padding.md +49 -0
  212. package/docs/reference/space/scale-reference.md +43 -0
  213. package/docs/reference/space/width.md +45 -0
  214. package/docs/reference/space.md +14 -98
  215. package/docs/reference/spacing.md +22 -8
  216. package/docs/reference/visual/accent-color.md +31 -0
  217. package/docs/reference/visual/animation-builtin.md +41 -0
  218. package/docs/reference/visual/animation-delay.md +41 -0
  219. package/docs/reference/visual/animation-direction.md +32 -0
  220. package/docs/reference/visual/animation-duration.md +43 -0
  221. package/docs/reference/visual/animation-fill.md +32 -0
  222. package/docs/reference/visual/animation-iteration.md +30 -0
  223. package/docs/reference/visual/animation-play.md +30 -0
  224. package/docs/reference/visual/appearance.md +30 -0
  225. package/docs/reference/visual/backdrop-blur.md +43 -0
  226. package/docs/reference/visual/backdrop-brightness.md +41 -0
  227. package/docs/reference/visual/backdrop-contrast.md +41 -0
  228. package/docs/reference/visual/backdrop-grayscale.md +39 -0
  229. package/docs/reference/visual/backdrop-hue-rotate.md +39 -0
  230. package/docs/reference/visual/backdrop-invert.md +39 -0
  231. package/docs/reference/visual/backdrop-opacity.md +39 -0
  232. package/docs/reference/visual/backdrop-saturate.md +41 -0
  233. package/docs/reference/visual/backdrop-sepia.md +39 -0
  234. package/docs/reference/visual/background-attachment.md +31 -0
  235. package/docs/reference/visual/background-blend-mode.md +34 -0
  236. package/docs/reference/visual/background-clip.md +32 -0
  237. package/docs/reference/visual/background-color.md +33 -0
  238. package/docs/reference/visual/background-image.md +41 -0
  239. package/docs/reference/visual/background-origin.md +31 -0
  240. package/docs/reference/visual/background-position.md +45 -0
  241. package/docs/reference/visual/background-repeat.md +34 -0
  242. package/docs/reference/visual/background-size.md +39 -0
  243. package/docs/reference/visual/blend-modes.md +34 -0
  244. package/docs/reference/visual/border-radius.md +34 -0
  245. package/docs/reference/visual/border-style.md +33 -0
  246. package/docs/reference/visual/border-width.md +44 -0
  247. package/docs/reference/visual/border.md +43 -0
  248. package/docs/reference/visual/box-shadow.md +33 -0
  249. package/docs/reference/visual/caret-color.md +31 -0
  250. package/docs/reference/visual/color-scheme.md +31 -0
  251. package/docs/reference/visual/cursor.md +37 -0
  252. package/docs/reference/visual/field-sizing.md +30 -0
  253. package/docs/reference/visual/fill.md +38 -0
  254. package/docs/reference/visual/filter-blur.md +43 -0
  255. package/docs/reference/visual/filter-brightness.md +41 -0
  256. package/docs/reference/visual/filter-contrast.md +41 -0
  257. package/docs/reference/visual/filter-drop-shadow.md +42 -0
  258. package/docs/reference/visual/filter-grayscale.md +39 -0
  259. package/docs/reference/visual/filter-hue-rotate.md +39 -0
  260. package/docs/reference/visual/filter-invert.md +39 -0
  261. package/docs/reference/visual/filter-saturate.md +41 -0
  262. package/docs/reference/visual/filter-sepia.md +39 -0
  263. package/docs/reference/visual/font-family.md +31 -0
  264. package/docs/reference/visual/font-smoothing.md +30 -0
  265. package/docs/reference/visual/font-style.md +30 -0
  266. package/docs/reference/visual/font-variant-numeric.md +35 -0
  267. package/docs/reference/visual/font-weight.md +31 -0
  268. package/docs/reference/visual/forced-color-adjust.md +30 -0
  269. package/docs/reference/visual/hyphens.md +31 -0
  270. package/docs/reference/visual/letter-spacing.md +42 -0
  271. package/docs/reference/visual/line-clamp.md +40 -0
  272. package/docs/reference/visual/line-height.md +42 -0
  273. package/docs/reference/visual/list-style.md +34 -0
  274. package/docs/reference/visual/mask.md +39 -0
  275. package/docs/reference/visual/opacity.md +33 -0
  276. package/docs/reference/visual/outline.md +31 -0
  277. package/docs/reference/visual/pointer-events.md +30 -0
  278. package/docs/reference/visual/resize.md +32 -0
  279. package/docs/reference/visual/scroll-behavior.md +30 -0
  280. package/docs/reference/visual/scroll-margin.md +41 -0
  281. package/docs/reference/visual/scroll-padding.md +41 -0
  282. package/docs/reference/visual/scroll-snap-align.md +32 -0
  283. package/docs/reference/visual/scroll-snap-stop.md +30 -0
  284. package/docs/reference/visual/scroll-snap-type.md +34 -0
  285. package/docs/reference/visual/state-prefixes.md +37 -0
  286. package/docs/reference/visual/stroke-width.md +39 -0
  287. package/docs/reference/visual/stroke.md +38 -0
  288. package/docs/reference/visual/text-alignment.md +32 -0
  289. package/docs/reference/visual/text-color.md +41 -0
  290. package/docs/reference/visual/text-decoration.md +32 -0
  291. package/docs/reference/visual/text-indent.md +37 -0
  292. package/docs/reference/visual/text-overflow.md +31 -0
  293. package/docs/reference/visual/text-shadow.md +40 -0
  294. package/docs/reference/visual/text-size.md +32 -0
  295. package/docs/reference/visual/text-transform.md +32 -0
  296. package/docs/reference/visual/text-wrap.md +32 -0
  297. package/docs/reference/visual/touch-action.md +36 -0
  298. package/docs/reference/visual/transform-backface.md +30 -0
  299. package/docs/reference/visual/transform-origin.md +45 -0
  300. package/docs/reference/visual/transform-perspective-origin.md +45 -0
  301. package/docs/reference/visual/transform-perspective.md +43 -0
  302. package/docs/reference/visual/transform-rotate.md +40 -0
  303. package/docs/reference/visual/transform-scale.md +43 -0
  304. package/docs/reference/visual/transform-skew.md +40 -0
  305. package/docs/reference/visual/transform-style.md +30 -0
  306. package/docs/reference/visual/transform-translate.md +39 -0
  307. package/docs/reference/visual/transition-delay.md +41 -0
  308. package/docs/reference/visual/transition-duration.md +43 -0
  309. package/docs/reference/visual/transition-property.md +34 -0
  310. package/docs/reference/visual/transition-timing.md +40 -0
  311. package/docs/reference/visual/typography-keywords.md +81 -0
  312. package/docs/reference/visual/user-select.md +32 -0
  313. package/docs/reference/visual/vertical-align.md +36 -0
  314. package/docs/reference/visual/whitespace.md +34 -0
  315. package/docs/reference/visual/will-change.md +33 -0
  316. package/docs/reference/visual/word-break.md +32 -0
  317. package/docs/reference/visual.md +151 -154
  318. package/docs/syntax-reference.json +1973 -0
  319. package/package.json +10 -2
  320. package/playground/index.html +78 -0
  321. package/playground/jit-test.html +384 -0
  322. package/scripts/extract-syntax.js +152 -0
  323. package/scripts/generate-docs.js +352 -0
  324. package/src/cdn/jit.js +1436 -14
  325. package/src/cli/commands/build.js +5 -0
  326. package/src/cli/index.js +2 -0
  327. package/src/compiler/generators/css.js +1537 -25
  328. package/src/compiler/generators/preflight.js +379 -0
  329. package/src/config/defaults.js +19 -1
  330. package/src/definitions/index.js +153 -0
  331. package/src/definitions/layout-alignment.js +257 -0
  332. package/src/definitions/layout-flex.js +209 -0
  333. package/src/definitions/layout-grid.js +150 -0
  334. package/src/definitions/layout-positioning.js +89 -0
  335. package/src/definitions/layout-table.js +98 -0
  336. package/src/definitions/layout-utilities.js +262 -0
  337. package/src/definitions/layout.js +195 -0
  338. package/src/definitions/space.js +164 -0
  339. package/src/definitions/visual-backgrounds.js +423 -0
  340. package/src/definitions/visual-borders.js +111 -0
  341. package/src/definitions/visual-filters.js +204 -0
  342. package/src/definitions/visual-interactivity.js +292 -0
  343. package/src/definitions/visual-svg.js +80 -0
  344. package/src/definitions/visual-transform3d.js +159 -0
  345. package/src/definitions/visual-transforms.js +142 -0
  346. package/src/definitions/visual-transitions.js +277 -0
  347. package/src/definitions/visual-typography.js +386 -0
  348. package/src/definitions/visual.js +542 -0
  349. package/tests/helpers/test-utils.js +144 -0
  350. package/tests/integration/compiler.test.js +247 -0
  351. package/tests/sync/docs-sync.test.js +364 -0
  352. package/tests/unit/compiler/generators/css.test.js +719 -0
  353. package/tests/unit/compiler/parser.test.js +244 -0
  354. package/tests/unit/compiler/tokenizer.test.js +305 -0
  355. package/tests/unit/config/defaults.test.js +168 -0
  356. package/docs/.vitepress/cache/deps/_metadata.json +0 -31
  357. package/docs/.vitepress/cache/deps/chunk-LE5NDSFD.js +0 -12824
  358. package/docs/.vitepress/cache/deps/chunk-LE5NDSFD.js.map +0 -7
  359. package/docs/.vitepress/cache/deps/package.json +0 -3
  360. package/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js +0 -4505
  361. package/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js.map +0 -7
  362. package/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js +0 -9731
  363. package/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js.map +0 -7
  364. package/docs/.vitepress/cache/deps/vue.js +0 -347
  365. package/docs/.vitepress/cache/deps/vue.js.map +0 -7
  366. package/docs/.vitepress/dist/404.html +0 -22
  367. package/docs/.vitepress/dist/assets/app.DBXoyO4w.js +0 -1
  368. package/docs/.vitepress/dist/assets/chunks/framework.I305HrzY.js +0 -19
  369. package/docs/.vitepress/dist/assets/chunks/theme.CaXH1t3X.js +0 -1
  370. package/docs/.vitepress/dist/assets/examples_cards.md.BCzaqSD6.js +0 -84
  371. package/docs/.vitepress/dist/assets/examples_cards.md.BCzaqSD6.lean.js +0 -1
  372. package/docs/.vitepress/dist/assets/examples_forms.md.DOjr9LrG.js +0 -169
  373. package/docs/.vitepress/dist/assets/examples_forms.md.DOjr9LrG.lean.js +0 -1
  374. package/docs/.vitepress/dist/assets/examples_hero.md.CAorji-Y.js +0 -118
  375. package/docs/.vitepress/dist/assets/examples_hero.md.CAorji-Y.lean.js +0 -1
  376. package/docs/.vitepress/dist/assets/examples_index.md.BjUNsTob.js +0 -52
  377. package/docs/.vitepress/dist/assets/examples_index.md.BjUNsTob.lean.js +0 -1
  378. package/docs/.vitepress/dist/assets/examples_navigation.md.DvL-Yv_5.js +0 -106
  379. package/docs/.vitepress/dist/assets/examples_navigation.md.DvL-Yv_5.lean.js +0 -1
  380. package/docs/.vitepress/dist/assets/guide_cdn.md.Bbb7-icp.js +0 -30
  381. package/docs/.vitepress/dist/assets/guide_cdn.md.Bbb7-icp.lean.js +0 -1
  382. package/docs/.vitepress/dist/assets/guide_cli.md.yLsOZ7NL.js +0 -44
  383. package/docs/.vitepress/dist/assets/guide_cli.md.yLsOZ7NL.lean.js +0 -1
  384. package/docs/.vitepress/dist/assets/guide_configuration.md.DN4FfKw4.js +0 -79
  385. package/docs/.vitepress/dist/assets/guide_configuration.md.DN4FfKw4.lean.js +0 -1
  386. package/docs/.vitepress/dist/assets/guide_dark-mode.md.D6UJvQtM.js +0 -69
  387. package/docs/.vitepress/dist/assets/guide_dark-mode.md.D6UJvQtM.lean.js +0 -1
  388. package/docs/.vitepress/dist/assets/guide_getting-started.md.K5nA8wXY.js +0 -47
  389. package/docs/.vitepress/dist/assets/guide_getting-started.md.K5nA8wXY.lean.js +0 -1
  390. package/docs/.vitepress/dist/assets/guide_index.md.B0lRU150.js +0 -3
  391. package/docs/.vitepress/dist/assets/guide_index.md.B0lRU150.lean.js +0 -1
  392. package/docs/.vitepress/dist/assets/guide_natural-scale.md.vvauT7U1.js +0 -22
  393. package/docs/.vitepress/dist/assets/guide_natural-scale.md.vvauT7U1.lean.js +0 -1
  394. package/docs/.vitepress/dist/assets/guide_philosophy.md.mOb9kp32.js +0 -7
  395. package/docs/.vitepress/dist/assets/guide_philosophy.md.mOb9kp32.lean.js +0 -1
  396. package/docs/.vitepress/dist/assets/guide_responsive.md.C7cF-4cR.js +0 -57
  397. package/docs/.vitepress/dist/assets/guide_responsive.md.C7cF-4cR.lean.js +0 -1
  398. package/docs/.vitepress/dist/assets/guide_states.md.CwtGEGHB.js +0 -77
  399. package/docs/.vitepress/dist/assets/guide_states.md.CwtGEGHB.lean.js +0 -1
  400. package/docs/.vitepress/dist/assets/guide_tri-attribute.md.CpjJLEMP.js +0 -45
  401. package/docs/.vitepress/dist/assets/guide_tri-attribute.md.CpjJLEMP.lean.js +0 -1
  402. package/docs/.vitepress/dist/assets/index.md.mYp6_S5X.js +0 -7
  403. package/docs/.vitepress/dist/assets/index.md.mYp6_S5X.lean.js +0 -1
  404. package/docs/.vitepress/dist/assets/inter-italic-cyrillic-ext.r48I6akx.woff2 +0 -0
  405. package/docs/.vitepress/dist/assets/inter-italic-cyrillic.By2_1cv3.woff2 +0 -0
  406. package/docs/.vitepress/dist/assets/inter-italic-greek-ext.1u6EdAuj.woff2 +0 -0
  407. package/docs/.vitepress/dist/assets/inter-italic-greek.DJ8dCoTZ.woff2 +0 -0
  408. package/docs/.vitepress/dist/assets/inter-italic-latin-ext.CN1xVJS-.woff2 +0 -0
  409. package/docs/.vitepress/dist/assets/inter-italic-latin.C2AdPX0b.woff2 +0 -0
  410. package/docs/.vitepress/dist/assets/inter-italic-vietnamese.BSbpV94h.woff2 +0 -0
  411. package/docs/.vitepress/dist/assets/inter-roman-cyrillic-ext.BBPuwvHQ.woff2 +0 -0
  412. package/docs/.vitepress/dist/assets/inter-roman-cyrillic.C5lxZ8CY.woff2 +0 -0
  413. package/docs/.vitepress/dist/assets/inter-roman-greek-ext.CqjqNYQ-.woff2 +0 -0
  414. package/docs/.vitepress/dist/assets/inter-roman-greek.BBVDIX6e.woff2 +0 -0
  415. package/docs/.vitepress/dist/assets/inter-roman-latin-ext.4ZJIpNVo.woff2 +0 -0
  416. package/docs/.vitepress/dist/assets/inter-roman-latin.Di8DUHzh.woff2 +0 -0
  417. package/docs/.vitepress/dist/assets/inter-roman-vietnamese.BjW4sHH5.woff2 +0 -0
  418. package/docs/.vitepress/dist/assets/ms_examples_cards.md.CaE5JNAs.js +0 -84
  419. package/docs/.vitepress/dist/assets/ms_examples_cards.md.CaE5JNAs.lean.js +0 -1
  420. package/docs/.vitepress/dist/assets/ms_examples_forms.md.VvDzMzxF.js +0 -169
  421. package/docs/.vitepress/dist/assets/ms_examples_forms.md.VvDzMzxF.lean.js +0 -1
  422. package/docs/.vitepress/dist/assets/ms_examples_hero.md.DC4c3kKW.js +0 -118
  423. package/docs/.vitepress/dist/assets/ms_examples_hero.md.DC4c3kKW.lean.js +0 -1
  424. package/docs/.vitepress/dist/assets/ms_examples_index.md.C13ShcjA.js +0 -52
  425. package/docs/.vitepress/dist/assets/ms_examples_index.md.C13ShcjA.lean.js +0 -1
  426. package/docs/.vitepress/dist/assets/ms_examples_navigation.md.BPtVjKbk.js +0 -106
  427. package/docs/.vitepress/dist/assets/ms_examples_navigation.md.BPtVjKbk.lean.js +0 -1
  428. package/docs/.vitepress/dist/assets/ms_guide_cdn.md.tZFpEjTS.js +0 -30
  429. package/docs/.vitepress/dist/assets/ms_guide_cdn.md.tZFpEjTS.lean.js +0 -1
  430. package/docs/.vitepress/dist/assets/ms_guide_cli.md.DBjxv3-o.js +0 -44
  431. package/docs/.vitepress/dist/assets/ms_guide_cli.md.DBjxv3-o.lean.js +0 -1
  432. package/docs/.vitepress/dist/assets/ms_guide_configuration.md.CyYNqREm.js +0 -79
  433. package/docs/.vitepress/dist/assets/ms_guide_configuration.md.CyYNqREm.lean.js +0 -1
  434. package/docs/.vitepress/dist/assets/ms_guide_dark-mode.md.DWDWvzzv.js +0 -69
  435. package/docs/.vitepress/dist/assets/ms_guide_dark-mode.md.DWDWvzzv.lean.js +0 -1
  436. package/docs/.vitepress/dist/assets/ms_guide_getting-started.md.WoQwRhlY.js +0 -47
  437. package/docs/.vitepress/dist/assets/ms_guide_getting-started.md.WoQwRhlY.lean.js +0 -1
  438. package/docs/.vitepress/dist/assets/ms_guide_index.md.pHpXZMmU.js +0 -3
  439. package/docs/.vitepress/dist/assets/ms_guide_index.md.pHpXZMmU.lean.js +0 -1
  440. package/docs/.vitepress/dist/assets/ms_guide_natural-scale.md.BiUfU-TH.js +0 -22
  441. package/docs/.vitepress/dist/assets/ms_guide_natural-scale.md.BiUfU-TH.lean.js +0 -1
  442. package/docs/.vitepress/dist/assets/ms_guide_philosophy.md.hf3SG2Ts.js +0 -7
  443. package/docs/.vitepress/dist/assets/ms_guide_philosophy.md.hf3SG2Ts.lean.js +0 -1
  444. package/docs/.vitepress/dist/assets/ms_guide_responsive.md.C4yS3zzM.js +0 -57
  445. package/docs/.vitepress/dist/assets/ms_guide_responsive.md.C4yS3zzM.lean.js +0 -1
  446. package/docs/.vitepress/dist/assets/ms_guide_states.md.DkDEjPdC.js +0 -77
  447. package/docs/.vitepress/dist/assets/ms_guide_states.md.DkDEjPdC.lean.js +0 -1
  448. package/docs/.vitepress/dist/assets/ms_guide_tri-attribute.md.C3Es_V5J.js +0 -45
  449. package/docs/.vitepress/dist/assets/ms_guide_tri-attribute.md.C3Es_V5J.lean.js +0 -1
  450. package/docs/.vitepress/dist/assets/ms_index.md.Bmo9il08.js +0 -7
  451. package/docs/.vitepress/dist/assets/ms_index.md.Bmo9il08.lean.js +0 -1
  452. package/docs/.vitepress/dist/assets/ms_reference_breakpoints.md.DR7i_--b.js +0 -48
  453. package/docs/.vitepress/dist/assets/ms_reference_breakpoints.md.DR7i_--b.lean.js +0 -1
  454. package/docs/.vitepress/dist/assets/ms_reference_colors.md.06ZYiMcJ.js +0 -17
  455. package/docs/.vitepress/dist/assets/ms_reference_colors.md.06ZYiMcJ.lean.js +0 -1
  456. package/docs/.vitepress/dist/assets/ms_reference_layout.md.NGL6A5SR.js +0 -13
  457. package/docs/.vitepress/dist/assets/ms_reference_layout.md.NGL6A5SR.lean.js +0 -1
  458. package/docs/.vitepress/dist/assets/ms_reference_space.md.BG5YQ-09.js +0 -24
  459. package/docs/.vitepress/dist/assets/ms_reference_space.md.BG5YQ-09.lean.js +0 -1
  460. package/docs/.vitepress/dist/assets/ms_reference_spacing.md.XmXLLPOZ.js +0 -32
  461. package/docs/.vitepress/dist/assets/ms_reference_spacing.md.XmXLLPOZ.lean.js +0 -1
  462. package/docs/.vitepress/dist/assets/ms_reference_visual.md.BVOlkEqc.js +0 -22
  463. package/docs/.vitepress/dist/assets/ms_reference_visual.md.BVOlkEqc.lean.js +0 -1
  464. package/docs/.vitepress/dist/assets/reference_breakpoints.md.BRbG8Fzi.js +0 -48
  465. package/docs/.vitepress/dist/assets/reference_breakpoints.md.BRbG8Fzi.lean.js +0 -1
  466. package/docs/.vitepress/dist/assets/reference_colors.md.C7j7dSO1.js +0 -17
  467. package/docs/.vitepress/dist/assets/reference_colors.md.C7j7dSO1.lean.js +0 -1
  468. package/docs/.vitepress/dist/assets/reference_layout.md.BWJ5NxSp.js +0 -13
  469. package/docs/.vitepress/dist/assets/reference_layout.md.BWJ5NxSp.lean.js +0 -1
  470. package/docs/.vitepress/dist/assets/reference_space.md.DCsqfTWb.js +0 -24
  471. package/docs/.vitepress/dist/assets/reference_space.md.DCsqfTWb.lean.js +0 -1
  472. package/docs/.vitepress/dist/assets/reference_spacing.md.BInFD8gd.js +0 -32
  473. package/docs/.vitepress/dist/assets/reference_spacing.md.BInFD8gd.lean.js +0 -1
  474. package/docs/.vitepress/dist/assets/reference_visual.md.BRK7S9T1.js +0 -22
  475. package/docs/.vitepress/dist/assets/reference_visual.md.BRK7S9T1.lean.js +0 -1
  476. package/docs/.vitepress/dist/assets/style.D82StYDI.css +0 -1
  477. package/docs/.vitepress/dist/examples/cards.html +0 -108
  478. package/docs/.vitepress/dist/examples/forms.html +0 -193
  479. package/docs/.vitepress/dist/examples/hero.html +0 -142
  480. package/docs/.vitepress/dist/examples/index.html +0 -76
  481. package/docs/.vitepress/dist/examples/navigation.html +0 -130
  482. package/docs/.vitepress/dist/guide/cdn.html +0 -54
  483. package/docs/.vitepress/dist/guide/cli.html +0 -68
  484. package/docs/.vitepress/dist/guide/configuration.html +0 -103
  485. package/docs/.vitepress/dist/guide/dark-mode.html +0 -93
  486. package/docs/.vitepress/dist/guide/getting-started.html +0 -71
  487. package/docs/.vitepress/dist/guide/index.html +0 -27
  488. package/docs/.vitepress/dist/guide/natural-scale.html +0 -46
  489. package/docs/.vitepress/dist/guide/philosophy.html +0 -31
  490. package/docs/.vitepress/dist/guide/responsive.html +0 -81
  491. package/docs/.vitepress/dist/guide/states.html +0 -101
  492. package/docs/.vitepress/dist/guide/tri-attribute.html +0 -69
  493. package/docs/.vitepress/dist/hashmap.json +0 -1
  494. package/docs/.vitepress/dist/index.html +0 -31
  495. package/docs/.vitepress/dist/ms/examples/cards.html +0 -108
  496. package/docs/.vitepress/dist/ms/examples/forms.html +0 -193
  497. package/docs/.vitepress/dist/ms/examples/hero.html +0 -142
  498. package/docs/.vitepress/dist/ms/examples/index.html +0 -76
  499. package/docs/.vitepress/dist/ms/examples/navigation.html +0 -130
  500. package/docs/.vitepress/dist/ms/guide/cdn.html +0 -54
  501. package/docs/.vitepress/dist/ms/guide/cli.html +0 -68
  502. package/docs/.vitepress/dist/ms/guide/configuration.html +0 -103
  503. package/docs/.vitepress/dist/ms/guide/dark-mode.html +0 -93
  504. package/docs/.vitepress/dist/ms/guide/getting-started.html +0 -71
  505. package/docs/.vitepress/dist/ms/guide/index.html +0 -27
  506. package/docs/.vitepress/dist/ms/guide/natural-scale.html +0 -46
  507. package/docs/.vitepress/dist/ms/guide/philosophy.html +0 -31
  508. package/docs/.vitepress/dist/ms/guide/responsive.html +0 -81
  509. package/docs/.vitepress/dist/ms/guide/states.html +0 -101
  510. package/docs/.vitepress/dist/ms/guide/tri-attribute.html +0 -69
  511. package/docs/.vitepress/dist/ms/index.html +0 -31
  512. package/docs/.vitepress/dist/ms/reference/breakpoints.html +0 -72
  513. package/docs/.vitepress/dist/ms/reference/colors.html +0 -41
  514. package/docs/.vitepress/dist/ms/reference/layout.html +0 -37
  515. package/docs/.vitepress/dist/ms/reference/space.html +0 -48
  516. package/docs/.vitepress/dist/ms/reference/spacing.html +0 -56
  517. package/docs/.vitepress/dist/ms/reference/visual.html +0 -46
  518. package/docs/.vitepress/dist/reference/breakpoints.html +0 -72
  519. package/docs/.vitepress/dist/reference/colors.html +0 -41
  520. package/docs/.vitepress/dist/reference/layout.html +0 -37
  521. package/docs/.vitepress/dist/reference/space.html +0 -48
  522. package/docs/.vitepress/dist/reference/spacing.html +0 -56
  523. package/docs/.vitepress/dist/reference/visual.html +0 -46
  524. package/docs/.vitepress/dist/vp-icons.css +0 -1
package/docs/.vitepress/dist/guide/dark-mode.html DELETED
@@ -1,93 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en" dir="ltr">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width,initial-scale=1">
6
- <title>Dark Mode | SenangStart CSS</title>
7
- <meta name="description" content="The Intent-First CSS Engine - Speak Human, Compile to Logic">
8
- <meta name="generator" content="VitePress v1.6.4">
9
- <link rel="preload stylesheet" href="/senangstart-css/assets/style.D82StYDI.css" as="style">
10
- <link rel="preload stylesheet" href="/senangstart-css/vp-icons.css" as="style">
11
-
12
- <script type="module" src="/senangstart-css/assets/app.DBXoyO4w.js"></script>
13
- <link rel="preload" href="/senangstart-css/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
14
- <link rel="modulepreload" href="/senangstart-css/assets/chunks/theme.CaXH1t3X.js">
15
- <link rel="modulepreload" href="/senangstart-css/assets/chunks/framework.I305HrzY.js">
16
- <link rel="modulepreload" href="/senangstart-css/assets/guide_dark-mode.md.D6UJvQtM.lean.js">
17
- <link rel="icon" href="https://senangstart.com/img/ss_icon_accent.svg">
18
- <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
19
- </head>
20
- <body>
21
- <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0b0ada53></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0b0ada53>Skip to content</a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar" data-v-ae24b3ad data-v-6aa21345><div class="wrapper" data-v-6aa21345><div class="container" data-v-6aa21345><div class="title" data-v-6aa21345><div class="VPNavBarTitle has-sidebar" data-v-6aa21345 data-v-1168a8e4><a class="title" href="/senangstart-css/" data-v-1168a8e4><!--[--><!--]--><!--[--><img class="VPImage logo" src="https://senangstart.com/img/ss_logo_typo.svg" alt data-v-8426fc1a><!--]--><!----><!--[--><!--]--></a></div></div><div class="content" data-v-6aa21345><div class="content-body" data-v-6aa21345><!--[--><!--]--><div class="VPNavBarSearch search" data-v-6aa21345><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-6aa21345 data-v-dc692963><span id="main-nav-aria-label" class="visually-hidden" data-v-dc692963> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/senangstart-css/guide/getting-started.html" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Guide</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/senangstart-css/reference/layout.html" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Reference</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/senangstart-css/examples/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Examples</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-dc692963 data-v-cf11d7a2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-cf11d7a2><span class="text" data-v-cf11d7a2><!----><span data-v-cf11d7a2>v0.1.4</span><span class="vpi-chevron-down text-icon" data-v-cf11d7a2></span></span></button><div class="menu" data-v-cf11d7a2><div class="VPMenu" data-v-cf11d7a2 data-v-b98bc113><div class="items" data-v-b98bc113><!--[--><!--[--><div class="VPMenuLink" data-v-b98bc113 data-v-35975db6><a class="VPLink link" href="/senangstart-css/changelog.html" data-v-35975db6><!--[--><span data-v-35975db6>Changelog</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-b98bc113 data-v-35975db6><a class="VPLink link vp-external-link-icon" href="https://github.com/bookklik-technologies/senangstart-css" target="_blank" rel="noreferrer" data-v-35975db6><!--[--><span data-v-35975db6>GitHub</span><!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><div class="VPFlyout VPNavBarTranslations translations" data-v-6aa21345 data-v-88af2de4 data-v-cf11d7a2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="Change language" data-v-cf11d7a2><span class="text" data-v-cf11d7a2><span class="vpi-languages option-icon" data-v-cf11d7a2></span><!----><span class="vpi-chevron-down text-icon" data-v-cf11d7a2></span></span></button><div class="menu" data-v-cf11d7a2><div class="VPMenu" data-v-cf11d7a2 data-v-b98bc113><!----><!--[--><!--[--><div class="items" data-v-88af2de4><p class="title" data-v-88af2de4>English</p><!--[--><div class="VPMenuLink" data-v-88af2de4 data-v-35975db6><a class="VPLink link" href="/senangstart-css/ms/guide/dark-mode.html" data-v-35975db6><!--[--><span data-v-35975db6>Bahasa Melayu</span><!--]--></a></div><!--]--></div><!--]--><!--]--></div></div></div><!----><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-6aa21345 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/bookklik-technologies/senangstart-css" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span class="vpi-social-github"></span></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-6aa21345 data-v-bb2aa2f0 data-v-cf11d7a2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-cf11d7a2><span class="vpi-more-horizontal icon" data-v-cf11d7a2></span></button><div class="menu" data-v-cf11d7a2><div class="VPMenu" data-v-cf11d7a2 data-v-b98bc113><!----><!--[--><!--[--><div class="group translations" data-v-bb2aa2f0><p class="trans-title" data-v-bb2aa2f0>English</p><!--[--><div class="VPMenuLink" data-v-bb2aa2f0 data-v-35975db6><a class="VPLink link" href="/senangstart-css/ms/guide/dark-mode.html" data-v-35975db6><!--[--><span data-v-35975db6>Bahasa Melayu</span><!--]--></a></div><!--]--></div><!----><div class="group" data-v-bb2aa2f0><div class="item social-links" data-v-bb2aa2f0><div class="VPSocialLinks social-links-list" data-v-bb2aa2f0 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/bookklik-technologies/senangstart-css" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span class="vpi-social-github"></span></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-6aa21345 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-6aa21345><div class="divider-line" data-v-6aa21345></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-8a42e2b4><button data-v-8a42e2b4>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-319d5ca6><div class="curtain" data-v-319d5ca6></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-319d5ca6><span class="visually-hidden" id="sidebar-aria-label" data-v-319d5ca6> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>Introduction</h2><!----></div><div class="items" data-v-b3fd67f8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/guide/" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>What is SenangStart?</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/guide/getting-started.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Getting Started</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/guide/philosophy.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Why Natural Language?</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 has-active" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>Core Concepts</h2><!----></div><div class="items" data-v-b3fd67f8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/guide/tri-attribute.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Tri-Attribute Syntax</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/guide/natural-scale.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>The Natural Scale</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/guide/responsive.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Responsive Design</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/guide/states.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Hover & States</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/guide/dark-mode.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Dark Mode</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>Usage</h2><!----></div><div class="items" data-v-b3fd67f8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/guide/cdn.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>CDN (Zero Build)</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/guide/cli.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>CLI Build</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/guide/configuration.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Configuration</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-3f215769 data-v-a5bbad30><div class="content" data-v-a5bbad30><div class="outline-marker" data-v-a5bbad30></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-a5bbad30>On this page</div><ul class="VPDocOutlineItem root" data-v-a5bbad30 data-v-b933a997><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _senangstart-css_guide_dark-mode" data-v-39a288b8><div><h1 id="dark-mode" tabindex="-1">Dark Mode <a class="header-anchor" href="#dark-mode" aria-label="Permalink to &quot;Dark Mode&quot;">​</a></h1><p>Add dark mode styling with the <code>dark:</code> prefix, similar to Tailwind CSS.</p><h2 id="configuration" tabindex="-1">Configuration <a class="header-anchor" href="#configuration" aria-label="Permalink to &quot;Configuration&quot;">​</a></h2><p>By default, dark mode uses the <code>media</code> strategy based on system preferences. You can change this in your config:</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</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;">// senangstart.config.js</span></span>
22
- <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:#6A737D;--shiki-dark:#6A737D;"> // Option 1: System preference (default)</span></span>
24
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> darkMode: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;media&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
25
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
26
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Option 2: Class-based toggle</span></span>
27
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> darkMode: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;selector&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Uses .dark class</span></span>
28
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
29
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Option 3: Custom selector</span></span>
30
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> darkMode: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;selector&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;[data-theme=&quot;dark&quot;]&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span></span>
31
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>For CDN usage:</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;">script</span><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;senangstart/config&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</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;"> &quot;darkMode&quot;: &quot;selector&quot;</span></span>
34
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
35
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><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><p>Add dark mode styles using the <code>dark:</code> prefix:</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:white dark:bg:slate-900 text:dark dark:text:white&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
36
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> This adapts to dark mode</span></span>
37
- <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="strategy-comparison" tabindex="-1">Strategy Comparison <a class="header-anchor" href="#strategy-comparison" aria-label="Permalink to &quot;Strategy Comparison&quot;">​</a></h2><h3 id="media-strategy-default" tabindex="-1">Media Strategy (Default) <a class="header-anchor" href="#media-strategy-default" aria-label="Permalink to &quot;Media Strategy (Default)&quot;">​</a></h3><p>Automatically follows the user&#39;s OS preference:</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* Generated CSS */</span></span>
38
- <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@media</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (prefers-color-scheme: dark) {</span></span>
39
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">visual</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">~=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark:bg:slate-900&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">background-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">--c-slate-900</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); }</span></span>
40
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>No JavaScript required. Respects system settings automatically.</p><h3 id="selector-strategy" tabindex="-1">Selector Strategy <a class="header-anchor" href="#selector-strategy" aria-label="Permalink to &quot;Selector Strategy&quot;">​</a></h3><p>Manual control via <code>.dark</code> class:</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* Generated CSS */</span></span>
41
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.dark</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">visual</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">~=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;dark:bg:slate-900&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">] { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">background-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">var</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">--c-slate-900</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">); }</span></span></code></pre></div><p>Toggle with JavaScript:</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</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;">document.documentElement.classList.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">toggle</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;dark&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</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="card-with-dark-mode" tabindex="-1">Card with Dark Mode <a class="header-anchor" href="#card-with-dark-mode" aria-label="Permalink to &quot;Card with Dark Mode&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>
42
- <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>
43
- <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>
44
- <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>
45
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> bg:white dark:bg:slate-800</span></span>
46
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> rounded:big</span></span>
47
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> shadow:medium dark:shadow:none</span></span>
48
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> border:gray-200 dark:border:slate-700</span></span>
49
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> border-w:[1px]</span></span>
50
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;</span></span>
51
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
52
- <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:#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 dark:text:white font:bold&quot;</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>
53
- <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 dark:text:gray-400&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Description text&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
54
- <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="button-with-dark-mode" tabindex="-1">Button with Dark Mode <a class="header-anchor" href="#button-with-dark-mode" aria-label="Permalink to &quot;Button with Dark Mode&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>
55
- <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>
56
- <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>
57
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> bg:primary dark:bg:blue-500</span></span>
58
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> text:white</span></span>
59
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> rounded:medium</span></span>
60
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> hover:bg:blue-700 dark:hover:bg:blue-400</span></span>
61
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &quot;</span></span>
62
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
63
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Submit</span></span>
64
- <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="navigation" tabindex="-1">Navigation <a class="header-anchor" href="#navigation" aria-label="Permalink to &quot;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:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
65
- <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 between&quot;</span></span>
66
- <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>
67
- <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 dark:bg:slate-900&quot;</span></span>
68
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
69
- <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 dark:text:white hover:text:primary&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>
70
- <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 dark:text:gray-400 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>
71
- <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><h2 id="toggle-implementation" tabindex="-1">Toggle Implementation <a class="header-anchor" href="#toggle-implementation" aria-label="Permalink to &quot;Toggle Implementation&quot;">​</a></h2><p>For the selector strategy, implement a toggle:</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;"> onclick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">toggleDarkMode</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">()&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
72
- <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;dark:hidden&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;🌙&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
73
- <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;hidden dark:inline&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;☀️&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
74
- <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>
75
- <span class="line"></span>
76
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
77
- <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> toggleDarkMode</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</span></span>
78
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.documentElement.classList.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">toggle</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;dark&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
79
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Optionally save preference</span></span>
80
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> localStorage.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">setItem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;theme&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span></span>
81
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.documentElement.classList.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">contains</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;dark&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;dark&#39;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;light&#39;</span></span>
82
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> );</span></span>
83
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
84
- <span class="line"></span>
85
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Load saved preference</span></span>
86
- <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (localStorage.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getItem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;theme&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;dark&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
87
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> document.documentElement.classList.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">add</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;dark&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
88
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
89
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="tips" tabindex="-1">Tips <a class="header-anchor" href="#tips" aria-label="Permalink to &quot;Tips&quot;">​</a></h2><ul><li>Use semantic color names like <code>slate</code>, <code>gray</code>, <code>zinc</code> for dark backgrounds</li><li>Dark text on light, light text on dark: <code>text:dark dark:text:white</code></li><li>Reduce shadows in dark mode: <code>shadow:medium dark:shadow:none</code></li><li>Subtle borders often look better in dark mode</li></ul></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-e257564d><span class="visually-hidden" id="doc-footer-aria-label" data-v-e257564d>Pager</span><div class="pager" data-v-e257564d><a class="VPLink link pager-link prev" href="/senangstart-css/guide/states.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Previous page</span><span class="title" data-v-e257564d>Hover & States</span><!--]--></a></div><div class="pager" data-v-e257564d><a class="VPLink link pager-link next" href="/senangstart-css/guide/cdn.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Next page</span><span class="title" data-v-e257564d>CDN (Zero Build)</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>Released under the MIT License.</p><p class="copyright" data-v-e315a0ad>Copyright © 2026 SenangStart</p></div></footer><!--[--><!--]--></div></div>
90
- <script>window.__VP_HASH_MAP__=JSON.parse("{\"examples_cards.md\":\"BCzaqSD6\",\"examples_forms.md\":\"DOjr9LrG\",\"examples_hero.md\":\"CAorji-Y\",\"examples_index.md\":\"BjUNsTob\",\"examples_navigation.md\":\"DvL-Yv_5\",\"guide_cdn.md\":\"Bbb7-icp\",\"guide_cli.md\":\"yLsOZ7NL\",\"guide_configuration.md\":\"DN4FfKw4\",\"guide_dark-mode.md\":\"D6UJvQtM\",\"guide_getting-started.md\":\"K5nA8wXY\",\"guide_index.md\":\"B0lRU150\",\"guide_natural-scale.md\":\"vvauT7U1\",\"guide_philosophy.md\":\"mOb9kp32\",\"guide_responsive.md\":\"C7cF-4cR\",\"guide_states.md\":\"CwtGEGHB\",\"guide_tri-attribute.md\":\"CpjJLEMP\",\"index.md\":\"mYp6_S5X\",\"ms_examples_cards.md\":\"CaE5JNAs\",\"ms_examples_forms.md\":\"VvDzMzxF\",\"ms_examples_hero.md\":\"DC4c3kKW\",\"ms_examples_index.md\":\"C13ShcjA\",\"ms_examples_navigation.md\":\"BPtVjKbk\",\"ms_guide_cdn.md\":\"tZFpEjTS\",\"ms_guide_cli.md\":\"DBjxv3-o\",\"ms_guide_configuration.md\":\"CyYNqREm\",\"ms_guide_dark-mode.md\":\"DWDWvzzv\",\"ms_guide_getting-started.md\":\"WoQwRhlY\",\"ms_guide_index.md\":\"pHpXZMmU\",\"ms_guide_natural-scale.md\":\"BiUfU-TH\",\"ms_guide_philosophy.md\":\"hf3SG2Ts\",\"ms_guide_responsive.md\":\"C4yS3zzM\",\"ms_guide_states.md\":\"DkDEjPdC\",\"ms_guide_tri-attribute.md\":\"C3Es_V5J\",\"ms_index.md\":\"Bmo9il08\",\"ms_reference_breakpoints.md\":\"DR7i_--b\",\"ms_reference_colors.md\":\"06ZYiMcJ\",\"ms_reference_layout.md\":\"NGL6A5SR\",\"ms_reference_space.md\":\"BG5YQ-09\",\"ms_reference_spacing.md\":\"XmXLLPOZ\",\"ms_reference_visual.md\":\"BVOlkEqc\",\"reference_breakpoints.md\":\"BRbG8Fzi\",\"reference_colors.md\":\"C7j7dSO1\",\"reference_layout.md\":\"BWJ5NxSp\",\"reference_space.md\":\"DCsqfTWb\",\"reference_spacing.md\":\"BInFD8gd\",\"reference_visual.md\":\"BRK7S9T1\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"VitePress\",\"description\":\"A VitePress site\",\"base\":\"/senangstart-css/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":false,\"themeConfig\":{},\"locales\":{\"root\":{\"label\":\"English\",\"lang\":\"en\",\"title\":\"SenangStart CSS\",\"description\":\"The Intent-First CSS Engine - Speak Human, Compile to Logic\",\"themeConfig\":{\"logo\":\"https://senangstart.com/img/ss_logo_typo.svg\",\"siteTitle\":false,\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/bookklik-technologies/senangstart-css\"}],\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2026 SenangStart\"},\"search\":{\"provider\":\"local\"},\"nav\":[{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"},{\"text\":\"Reference\",\"link\":\"/reference/layout\"},{\"text\":\"Examples\",\"link\":\"/examples/\"},{\"text\":\"v0.1.4\",\"items\":[{\"text\":\"Changelog\",\"link\":\"/changelog\"},{\"text\":\"GitHub\",\"link\":\"https://github.com/bookklik-technologies/senangstart-css\"}]}],\"sidebar\":{\"/guide/\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"What is SenangStart?\",\"link\":\"/guide/\"},{\"text\":\"Getting Started\",\"link\":\"/guide/getting-started\"},{\"text\":\"Why Natural Language?\",\"link\":\"/guide/philosophy\"}]},{\"text\":\"Core Concepts\",\"items\":[{\"text\":\"Tri-Attribute Syntax\",\"link\":\"/guide/tri-attribute\"},{\"text\":\"The Natural Scale\",\"link\":\"/guide/natural-scale\"},{\"text\":\"Responsive Design\",\"link\":\"/guide/responsive\"},{\"text\":\"Hover & States\",\"link\":\"/guide/states\"},{\"text\":\"Dark Mode\",\"link\":\"/guide/dark-mode\"}]},{\"text\":\"Usage\",\"items\":[{\"text\":\"CDN (Zero Build)\",\"link\":\"/guide/cdn\"},{\"text\":\"CLI Build\",\"link\":\"/guide/cli\"},{\"text\":\"Configuration\",\"link\":\"/guide/configuration\"}]}],\"/reference/\":[{\"text\":\"Attributes\",\"items\":[{\"text\":\"layout\",\"link\":\"/reference/layout\"},{\"text\":\"space\",\"link\":\"/reference/space\"},{\"text\":\"visual\",\"link\":\"/reference/visual\"}]},{\"text\":\"Theme\",\"items\":[{\"text\":\"Spacing\",\"link\":\"/reference/spacing\"},{\"text\":\"Colors\",\"link\":\"/reference/colors\"},{\"text\":\"Breakpoints\",\"link\":\"/reference/breakpoints\"}]}],\"/examples/\":[{\"text\":\"Components\",\"items\":[{\"text\":\"Overview\",\"link\":\"/examples/\"},{\"text\":\"Cards\",\"link\":\"/examples/cards\"},{\"text\":\"Navigation\",\"link\":\"/examples/navigation\"},{\"text\":\"Hero Sections\",\"link\":\"/examples/hero\"},{\"text\":\"Forms\",\"link\":\"/examples/forms\"}]}]}}},\"ms\":{\"label\":\"Bahasa Melayu\",\"lang\":\"ms\",\"title\":\"SenangStart CSS\",\"description\":\"Enjin CSS Intent-First - Cakap Manusia, Kompil ke Logik\",\"themeConfig\":{\"logo\":\"https://senangstart.com/img/ss_logo_typo.svg\",\"siteTitle\":false,\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/bookklik-technologies/senangstart-css\"}],\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2026 SenangStart\"},\"search\":{\"provider\":\"local\"},\"nav\":[{\"text\":\"Panduan\",\"link\":\"/ms/guide/getting-started\"},{\"text\":\"Rujukan\",\"link\":\"/ms/reference/layout\"},{\"text\":\"Contoh\",\"link\":\"/ms/examples/\"},{\"text\":\"v0.1.4\",\"items\":[{\"text\":\"Log Perubahan\",\"link\":\"/ms/changelog\"},{\"text\":\"GitHub\",\"link\":\"https://github.com/bookklik-technologies/senangstart-css\"}]}],\"sidebar\":{\"/ms/guide/\":[{\"text\":\"Pengenalan\",\"items\":[{\"text\":\"Apa itu SenangStart?\",\"link\":\"/ms/guide/\"},{\"text\":\"Bermula\",\"link\":\"/ms/guide/getting-started\"},{\"text\":\"Mengapa Bahasa Semula Jadi?\",\"link\":\"/ms/guide/philosophy\"}]},{\"text\":\"Konsep Teras\",\"items\":[{\"text\":\"Sintaks Tri-Atribut\",\"link\":\"/ms/guide/tri-attribute\"},{\"text\":\"Skala Semula Jadi\",\"link\":\"/ms/guide/natural-scale\"},{\"text\":\"Reka Bentuk Responsif\",\"link\":\"/ms/guide/responsive\"},{\"text\":\"Hover & Keadaan\",\"link\":\"/ms/guide/states\"},{\"text\":\"Mod Gelap\",\"link\":\"/ms/guide/dark-mode\"}]},{\"text\":\"Penggunaan\",\"items\":[{\"text\":\"CDN (Tanpa Bina)\",\"link\":\"/ms/guide/cdn\"},{\"text\":\"Bina CLI\",\"link\":\"/ms/guide/cli\"},{\"text\":\"Konfigurasi\",\"link\":\"/ms/guide/configuration\"}]}],\"/ms/reference/\":[{\"text\":\"Atribut\",\"items\":[{\"text\":\"layout\",\"link\":\"/ms/reference/layout\"},{\"text\":\"space\",\"link\":\"/ms/reference/space\"},{\"text\":\"visual\",\"link\":\"/ms/reference/visual\"}]},{\"text\":\"Tema\",\"items\":[{\"text\":\"Jarak\",\"link\":\"/ms/reference/spacing\"},{\"text\":\"Warna\",\"link\":\"/ms/reference/colors\"},{\"text\":\"Breakpoint\",\"link\":\"/ms/reference/breakpoints\"}]}],\"/ms/examples/\":[{\"text\":\"Komponen\",\"items\":[{\"text\":\"Gambaran Keseluruhan\",\"link\":\"/ms/examples/\"},{\"text\":\"Kad\",\"link\":\"/ms/examples/cards\"},{\"text\":\"Navigasi\",\"link\":\"/ms/examples/navigation\"},{\"text\":\"Bahagian Hero\",\"link\":\"/ms/examples/hero\"},{\"text\":\"Borang\",\"link\":\"/ms/examples/forms\"}]}]}}}},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
91
-
92
- </body>
93
- </html>
package/docs/.vitepress/dist/guide/getting-started.html DELETED
@@ -1,71 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en" dir="ltr">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width,initial-scale=1">
6
- <title>Getting Started | SenangStart CSS</title>
7
- <meta name="description" content="The Intent-First CSS Engine - Speak Human, Compile to Logic">
8
- <meta name="generator" content="VitePress v1.6.4">
9
- <link rel="preload stylesheet" href="/senangstart-css/assets/style.D82StYDI.css" as="style">
10
- <link rel="preload stylesheet" href="/senangstart-css/vp-icons.css" as="style">
11
-
12
- <script type="module" src="/senangstart-css/assets/app.DBXoyO4w.js"></script>
13
- <link rel="preload" href="/senangstart-css/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
14
- <link rel="modulepreload" href="/senangstart-css/assets/chunks/theme.CaXH1t3X.js">
15
- <link rel="modulepreload" href="/senangstart-css/assets/chunks/framework.I305HrzY.js">
16
- <link rel="modulepreload" href="/senangstart-css/assets/guide_getting-started.md.K5nA8wXY.lean.js">
17
- <link rel="icon" href="https://senangstart.com/img/ss_icon_accent.svg">
18
- <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
19
- </head>
20
- <body>
21
- <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0b0ada53></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0b0ada53>Skip to content</a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar" data-v-ae24b3ad data-v-6aa21345><div class="wrapper" data-v-6aa21345><div class="container" data-v-6aa21345><div class="title" data-v-6aa21345><div class="VPNavBarTitle has-sidebar" data-v-6aa21345 data-v-1168a8e4><a class="title" href="/senangstart-css/" data-v-1168a8e4><!--[--><!--]--><!--[--><img class="VPImage logo" src="https://senangstart.com/img/ss_logo_typo.svg" alt data-v-8426fc1a><!--]--><!----><!--[--><!--]--></a></div></div><div class="content" data-v-6aa21345><div class="content-body" data-v-6aa21345><!--[--><!--]--><div class="VPNavBarSearch search" data-v-6aa21345><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-6aa21345 data-v-dc692963><span id="main-nav-aria-label" class="visually-hidden" data-v-dc692963> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/senangstart-css/guide/getting-started.html" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Guide</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/senangstart-css/reference/layout.html" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Reference</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/senangstart-css/examples/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Examples</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-dc692963 data-v-cf11d7a2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-cf11d7a2><span class="text" data-v-cf11d7a2><!----><span data-v-cf11d7a2>v0.1.4</span><span class="vpi-chevron-down text-icon" data-v-cf11d7a2></span></span></button><div class="menu" data-v-cf11d7a2><div class="VPMenu" data-v-cf11d7a2 data-v-b98bc113><div class="items" data-v-b98bc113><!--[--><!--[--><div class="VPMenuLink" data-v-b98bc113 data-v-35975db6><a class="VPLink link" href="/senangstart-css/changelog.html" data-v-35975db6><!--[--><span data-v-35975db6>Changelog</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-b98bc113 data-v-35975db6><a class="VPLink link vp-external-link-icon" href="https://github.com/bookklik-technologies/senangstart-css" target="_blank" rel="noreferrer" data-v-35975db6><!--[--><span data-v-35975db6>GitHub</span><!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><div class="VPFlyout VPNavBarTranslations translations" data-v-6aa21345 data-v-88af2de4 data-v-cf11d7a2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="Change language" data-v-cf11d7a2><span class="text" data-v-cf11d7a2><span class="vpi-languages option-icon" data-v-cf11d7a2></span><!----><span class="vpi-chevron-down text-icon" data-v-cf11d7a2></span></span></button><div class="menu" data-v-cf11d7a2><div class="VPMenu" data-v-cf11d7a2 data-v-b98bc113><!----><!--[--><!--[--><div class="items" data-v-88af2de4><p class="title" data-v-88af2de4>English</p><!--[--><div class="VPMenuLink" data-v-88af2de4 data-v-35975db6><a class="VPLink link" href="/senangstart-css/ms/guide/getting-started.html" data-v-35975db6><!--[--><span data-v-35975db6>Bahasa Melayu</span><!--]--></a></div><!--]--></div><!--]--><!--]--></div></div></div><!----><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-6aa21345 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/bookklik-technologies/senangstart-css" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span class="vpi-social-github"></span></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-6aa21345 data-v-bb2aa2f0 data-v-cf11d7a2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-cf11d7a2><span class="vpi-more-horizontal icon" data-v-cf11d7a2></span></button><div class="menu" data-v-cf11d7a2><div class="VPMenu" data-v-cf11d7a2 data-v-b98bc113><!----><!--[--><!--[--><div class="group translations" data-v-bb2aa2f0><p class="trans-title" data-v-bb2aa2f0>English</p><!--[--><div class="VPMenuLink" data-v-bb2aa2f0 data-v-35975db6><a class="VPLink link" href="/senangstart-css/ms/guide/getting-started.html" data-v-35975db6><!--[--><span data-v-35975db6>Bahasa Melayu</span><!--]--></a></div><!--]--></div><!----><div class="group" data-v-bb2aa2f0><div class="item social-links" data-v-bb2aa2f0><div class="VPSocialLinks social-links-list" data-v-bb2aa2f0 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/bookklik-technologies/senangstart-css" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span class="vpi-social-github"></span></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-6aa21345 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-6aa21345><div class="divider-line" data-v-6aa21345></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-8a42e2b4><button data-v-8a42e2b4>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-319d5ca6><div class="curtain" data-v-319d5ca6></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-319d5ca6><span class="visually-hidden" id="sidebar-aria-label" data-v-319d5ca6> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 has-active" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>Introduction</h2><!----></div><div class="items" data-v-b3fd67f8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/guide/" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>What is SenangStart?</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/guide/getting-started.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Getting Started</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/guide/philosophy.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Why Natural Language?</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>Core Concepts</h2><!----></div><div class="items" data-v-b3fd67f8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/guide/tri-attribute.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Tri-Attribute Syntax</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/guide/natural-scale.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>The Natural Scale</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/guide/responsive.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Responsive Design</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/guide/states.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Hover & States</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/guide/dark-mode.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Dark Mode</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>Usage</h2><!----></div><div class="items" data-v-b3fd67f8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/guide/cdn.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>CDN (Zero Build)</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/guide/cli.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>CLI Build</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/guide/configuration.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Configuration</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-3f215769 data-v-a5bbad30><div class="content" data-v-a5bbad30><div class="outline-marker" data-v-a5bbad30></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-a5bbad30>On this page</div><ul class="VPDocOutlineItem root" data-v-a5bbad30 data-v-b933a997><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _senangstart-css_guide_getting-started" data-v-39a288b8><div><h1 id="getting-started" tabindex="-1">Getting Started <a class="header-anchor" href="#getting-started" aria-label="Permalink to &quot;Getting Started&quot;">​</a></h1><p>Get up and running with SenangStart CSS in minutes.</p><h2 id="cdn-zero-build" tabindex="-1">CDN (Zero Build) <span class="VPBadge tip"><!--[-->Recommended for prototyping<!--]--></span> <a class="header-anchor" href="#cdn-zero-build" aria-label="Permalink to &quot;CDN (Zero Build) &lt;Badge type=&quot;tip&quot; text=&quot;Recommended for prototyping&quot; /&gt;&quot;">​</a></h2><p>The fastest way to try SenangStart — no build step required:</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;">DOCTYPE</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> html</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;">html</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;">head</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;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;My App&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
25
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> &lt;!-- Just add this single script --&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;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;https://unpkg.com/@bookklik/senangstart-css/dist/senangstart-css.min.js&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</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;">head</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;">body</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;">div</span></span>
30
- <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>
31
- <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>
32
- <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>
33
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &gt;</span></span>
34
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h1</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text-size:giant font:bold&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Hello SenangStart!&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
35
- <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;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;m-t:small&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Zero config, instant styling.&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">p</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&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:#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;">body</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;">html</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="how-cdn-jit-works" tabindex="-1">How CDN JIT Works <a class="header-anchor" href="#how-cdn-jit-works" aria-label="Permalink to &quot;How CDN JIT Works&quot;">​</a></h3><ol><li><strong>Scans DOM</strong> — Finds all <code>layout</code>, <code>space</code>, and <code>visual</code> attributes</li><li><strong>Generates CSS</strong> — Compiles styles on-the-fly in the browser</li><li><strong>Injects Styles</strong> — Creates <code>&lt;style&gt;</code> tags with compiled CSS</li><li><strong>Watches Changes</strong> — Uses MutationObserver for dynamic updates</li></ol><h3 id="custom-cdn-config" tabindex="-1">Custom CDN Config <a class="header-anchor" href="#custom-cdn-config" aria-label="Permalink to &quot;Custom CDN Config&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;">script</span><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;senangstart/config&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
39
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
40
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &quot;theme&quot;: {</span></span>
41
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &quot;colors&quot;: {</span></span>
42
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &quot;brand&quot;: &quot;#8B5CF6&quot;,</span></span>
43
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &quot;accent&quot;: &quot;#EC4899&quot;</span></span>
44
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
45
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
46
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
47
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
48
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;https://unpkg.com/@bookklik/senangstart-css/dist/senangstart-css.min.js&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>CDN JIT is perfect for prototyping and learning. For production, use the CLI build for better performance.</p></div><h2 id="cli-production" tabindex="-1">CLI (Production) <span class="VPBadge info"><!--[-->Recommended for production<!--]--></span> <a class="header-anchor" href="#cli-production" aria-label="Permalink to &quot;CLI (Production) &lt;Badge type=&quot;info&quot; text=&quot;Recommended for production&quot; /&gt;&quot;">​</a></h2><h3 id="installation" tabindex="-1">Installation <a class="header-anchor" href="#installation" aria-label="Permalink to &quot;Installation&quot;">​</a></h3><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</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;"># Install globally</span></span>
49
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -g</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @bookklik/senangstart-css</span></span>
50
- <span class="line"></span>
51
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># Or use npx</span></span>
52
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">npx</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @bookklik/senangstart-css</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> init</span></span></code></pre></div><h3 id="initialize-config" tabindex="-1">Initialize Config <a class="header-anchor" href="#initialize-config" aria-label="Permalink to &quot;Initialize Config&quot;">​</a></h3><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</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;">senangstart</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> init</span></span></code></pre></div><p>This creates <code>senangstart.config.js</code> in your project root.</p><h3 id="add-to-html" tabindex="-1">Add to HTML <a class="header-anchor" href="#add-to-html" aria-label="Permalink to &quot;Add to HTML&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;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
53
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">link</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> rel</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;stylesheet&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> href</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;./public/senangstart.css&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
54
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">head</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="start-development" tabindex="-1">Start Development <a class="header-anchor" href="#start-development" aria-label="Permalink to &quot;Start Development&quot;">​</a></h3><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</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;">senangstart</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> dev</span></span></code></pre></div><p>This watches your files and rebuilds on changes.</p><h3 id="build-for-production" tabindex="-1">Build for Production <a class="header-anchor" href="#build-for-production" aria-label="Permalink to &quot;Build for Production&quot;">​</a></h3><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</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;">senangstart</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> build</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --minify</span></span></code></pre></div><h2 id="your-first-component" tabindex="-1">Your First Component <a class="header-anchor" href="#your-first-component" aria-label="Permalink to &quot;Your First Component&quot;">​</a></h2><p>Let&#39;s create a simple card:</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>
55
- <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>
56
- <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&quot;</span></span>
57
- <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>
58
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
59
- <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:#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;</span></span>
60
- <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 text-size:big&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Profile&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
61
- <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;Edit&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
62
- <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>
63
- <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:#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;</span></span>
64
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</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;Username&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">label</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
65
- <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:dark&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;@senang_dev&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
66
- <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>
67
- <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>What&#39;s happening:</strong></p><ul><li><code>layout=&quot;flex col&quot;</code> — Flexbox, vertical direction</li><li><code>space=&quot;w:[320px] p:medium&quot;</code> — 320px width, medium padding</li><li><code>visual=&quot;bg:white rounded:big shadow:medium&quot;</code> — White background, rounded corners, shadow</li></ul><h2 id="next-steps" tabindex="-1">Next Steps <a class="header-anchor" href="#next-steps" aria-label="Permalink to &quot;Next Steps&quot;">​</a></h2><ul><li><a href="/senangstart-css/guide/tri-attribute.html">Tri-Attribute Syntax</a> — Deep dive into layout, space, visual</li><li><a href="/senangstart-css/guide/natural-scale.html">The Natural Scale</a> — Understand spacing philosophy</li><li><a href="/senangstart-css/guide/configuration.html">Configuration</a> — Customize the theme</li></ul></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-e257564d><span class="visually-hidden" id="doc-footer-aria-label" data-v-e257564d>Pager</span><div class="pager" data-v-e257564d><a class="VPLink link pager-link prev" href="/senangstart-css/guide/" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Previous page</span><span class="title" data-v-e257564d>What is SenangStart?</span><!--]--></a></div><div class="pager" data-v-e257564d><a class="VPLink link pager-link next" href="/senangstart-css/guide/philosophy.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Next page</span><span class="title" data-v-e257564d>Why Natural Language?</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>Released under the MIT License.</p><p class="copyright" data-v-e315a0ad>Copyright © 2026 SenangStart</p></div></footer><!--[--><!--]--></div></div>
68
- <script>window.__VP_HASH_MAP__=JSON.parse("{\"examples_cards.md\":\"BCzaqSD6\",\"examples_forms.md\":\"DOjr9LrG\",\"examples_hero.md\":\"CAorji-Y\",\"examples_index.md\":\"BjUNsTob\",\"examples_navigation.md\":\"DvL-Yv_5\",\"guide_cdn.md\":\"Bbb7-icp\",\"guide_cli.md\":\"yLsOZ7NL\",\"guide_configuration.md\":\"DN4FfKw4\",\"guide_dark-mode.md\":\"D6UJvQtM\",\"guide_getting-started.md\":\"K5nA8wXY\",\"guide_index.md\":\"B0lRU150\",\"guide_natural-scale.md\":\"vvauT7U1\",\"guide_philosophy.md\":\"mOb9kp32\",\"guide_responsive.md\":\"C7cF-4cR\",\"guide_states.md\":\"CwtGEGHB\",\"guide_tri-attribute.md\":\"CpjJLEMP\",\"index.md\":\"mYp6_S5X\",\"ms_examples_cards.md\":\"CaE5JNAs\",\"ms_examples_forms.md\":\"VvDzMzxF\",\"ms_examples_hero.md\":\"DC4c3kKW\",\"ms_examples_index.md\":\"C13ShcjA\",\"ms_examples_navigation.md\":\"BPtVjKbk\",\"ms_guide_cdn.md\":\"tZFpEjTS\",\"ms_guide_cli.md\":\"DBjxv3-o\",\"ms_guide_configuration.md\":\"CyYNqREm\",\"ms_guide_dark-mode.md\":\"DWDWvzzv\",\"ms_guide_getting-started.md\":\"WoQwRhlY\",\"ms_guide_index.md\":\"pHpXZMmU\",\"ms_guide_natural-scale.md\":\"BiUfU-TH\",\"ms_guide_philosophy.md\":\"hf3SG2Ts\",\"ms_guide_responsive.md\":\"C4yS3zzM\",\"ms_guide_states.md\":\"DkDEjPdC\",\"ms_guide_tri-attribute.md\":\"C3Es_V5J\",\"ms_index.md\":\"Bmo9il08\",\"ms_reference_breakpoints.md\":\"DR7i_--b\",\"ms_reference_colors.md\":\"06ZYiMcJ\",\"ms_reference_layout.md\":\"NGL6A5SR\",\"ms_reference_space.md\":\"BG5YQ-09\",\"ms_reference_spacing.md\":\"XmXLLPOZ\",\"ms_reference_visual.md\":\"BVOlkEqc\",\"reference_breakpoints.md\":\"BRbG8Fzi\",\"reference_colors.md\":\"C7j7dSO1\",\"reference_layout.md\":\"BWJ5NxSp\",\"reference_space.md\":\"DCsqfTWb\",\"reference_spacing.md\":\"BInFD8gd\",\"reference_visual.md\":\"BRK7S9T1\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"VitePress\",\"description\":\"A VitePress site\",\"base\":\"/senangstart-css/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":false,\"themeConfig\":{},\"locales\":{\"root\":{\"label\":\"English\",\"lang\":\"en\",\"title\":\"SenangStart CSS\",\"description\":\"The Intent-First CSS Engine - Speak Human, Compile to Logic\",\"themeConfig\":{\"logo\":\"https://senangstart.com/img/ss_logo_typo.svg\",\"siteTitle\":false,\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/bookklik-technologies/senangstart-css\"}],\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2026 SenangStart\"},\"search\":{\"provider\":\"local\"},\"nav\":[{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"},{\"text\":\"Reference\",\"link\":\"/reference/layout\"},{\"text\":\"Examples\",\"link\":\"/examples/\"},{\"text\":\"v0.1.4\",\"items\":[{\"text\":\"Changelog\",\"link\":\"/changelog\"},{\"text\":\"GitHub\",\"link\":\"https://github.com/bookklik-technologies/senangstart-css\"}]}],\"sidebar\":{\"/guide/\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"What is SenangStart?\",\"link\":\"/guide/\"},{\"text\":\"Getting Started\",\"link\":\"/guide/getting-started\"},{\"text\":\"Why Natural Language?\",\"link\":\"/guide/philosophy\"}]},{\"text\":\"Core Concepts\",\"items\":[{\"text\":\"Tri-Attribute Syntax\",\"link\":\"/guide/tri-attribute\"},{\"text\":\"The Natural Scale\",\"link\":\"/guide/natural-scale\"},{\"text\":\"Responsive Design\",\"link\":\"/guide/responsive\"},{\"text\":\"Hover & States\",\"link\":\"/guide/states\"},{\"text\":\"Dark Mode\",\"link\":\"/guide/dark-mode\"}]},{\"text\":\"Usage\",\"items\":[{\"text\":\"CDN (Zero Build)\",\"link\":\"/guide/cdn\"},{\"text\":\"CLI Build\",\"link\":\"/guide/cli\"},{\"text\":\"Configuration\",\"link\":\"/guide/configuration\"}]}],\"/reference/\":[{\"text\":\"Attributes\",\"items\":[{\"text\":\"layout\",\"link\":\"/reference/layout\"},{\"text\":\"space\",\"link\":\"/reference/space\"},{\"text\":\"visual\",\"link\":\"/reference/visual\"}]},{\"text\":\"Theme\",\"items\":[{\"text\":\"Spacing\",\"link\":\"/reference/spacing\"},{\"text\":\"Colors\",\"link\":\"/reference/colors\"},{\"text\":\"Breakpoints\",\"link\":\"/reference/breakpoints\"}]}],\"/examples/\":[{\"text\":\"Components\",\"items\":[{\"text\":\"Overview\",\"link\":\"/examples/\"},{\"text\":\"Cards\",\"link\":\"/examples/cards\"},{\"text\":\"Navigation\",\"link\":\"/examples/navigation\"},{\"text\":\"Hero Sections\",\"link\":\"/examples/hero\"},{\"text\":\"Forms\",\"link\":\"/examples/forms\"}]}]}}},\"ms\":{\"label\":\"Bahasa Melayu\",\"lang\":\"ms\",\"title\":\"SenangStart CSS\",\"description\":\"Enjin CSS Intent-First - Cakap Manusia, Kompil ke Logik\",\"themeConfig\":{\"logo\":\"https://senangstart.com/img/ss_logo_typo.svg\",\"siteTitle\":false,\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/bookklik-technologies/senangstart-css\"}],\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2026 SenangStart\"},\"search\":{\"provider\":\"local\"},\"nav\":[{\"text\":\"Panduan\",\"link\":\"/ms/guide/getting-started\"},{\"text\":\"Rujukan\",\"link\":\"/ms/reference/layout\"},{\"text\":\"Contoh\",\"link\":\"/ms/examples/\"},{\"text\":\"v0.1.4\",\"items\":[{\"text\":\"Log Perubahan\",\"link\":\"/ms/changelog\"},{\"text\":\"GitHub\",\"link\":\"https://github.com/bookklik-technologies/senangstart-css\"}]}],\"sidebar\":{\"/ms/guide/\":[{\"text\":\"Pengenalan\",\"items\":[{\"text\":\"Apa itu SenangStart?\",\"link\":\"/ms/guide/\"},{\"text\":\"Bermula\",\"link\":\"/ms/guide/getting-started\"},{\"text\":\"Mengapa Bahasa Semula Jadi?\",\"link\":\"/ms/guide/philosophy\"}]},{\"text\":\"Konsep Teras\",\"items\":[{\"text\":\"Sintaks Tri-Atribut\",\"link\":\"/ms/guide/tri-attribute\"},{\"text\":\"Skala Semula Jadi\",\"link\":\"/ms/guide/natural-scale\"},{\"text\":\"Reka Bentuk Responsif\",\"link\":\"/ms/guide/responsive\"},{\"text\":\"Hover & Keadaan\",\"link\":\"/ms/guide/states\"},{\"text\":\"Mod Gelap\",\"link\":\"/ms/guide/dark-mode\"}]},{\"text\":\"Penggunaan\",\"items\":[{\"text\":\"CDN (Tanpa Bina)\",\"link\":\"/ms/guide/cdn\"},{\"text\":\"Bina CLI\",\"link\":\"/ms/guide/cli\"},{\"text\":\"Konfigurasi\",\"link\":\"/ms/guide/configuration\"}]}],\"/ms/reference/\":[{\"text\":\"Atribut\",\"items\":[{\"text\":\"layout\",\"link\":\"/ms/reference/layout\"},{\"text\":\"space\",\"link\":\"/ms/reference/space\"},{\"text\":\"visual\",\"link\":\"/ms/reference/visual\"}]},{\"text\":\"Tema\",\"items\":[{\"text\":\"Jarak\",\"link\":\"/ms/reference/spacing\"},{\"text\":\"Warna\",\"link\":\"/ms/reference/colors\"},{\"text\":\"Breakpoint\",\"link\":\"/ms/reference/breakpoints\"}]}],\"/ms/examples/\":[{\"text\":\"Komponen\",\"items\":[{\"text\":\"Gambaran Keseluruhan\",\"link\":\"/ms/examples/\"},{\"text\":\"Kad\",\"link\":\"/ms/examples/cards\"},{\"text\":\"Navigasi\",\"link\":\"/ms/examples/navigation\"},{\"text\":\"Bahagian Hero\",\"link\":\"/ms/examples/hero\"},{\"text\":\"Borang\",\"link\":\"/ms/examples/forms\"}]}]}}}},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
69
-
70
- </body>
71
- </html>
package/docs/.vitepress/dist/guide/index.html DELETED
@@ -1,27 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en" dir="ltr">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width,initial-scale=1">
6
- <title>What is SenangStart CSS? | SenangStart CSS</title>
7
- <meta name="description" content="The Intent-First CSS Engine - Speak Human, Compile to Logic">
8
- <meta name="generator" content="VitePress v1.6.4">
9
- <link rel="preload stylesheet" href="/senangstart-css/assets/style.D82StYDI.css" as="style">
10
- <link rel="preload stylesheet" href="/senangstart-css/vp-icons.css" as="style">
11
-
12
- <script type="module" src="/senangstart-css/assets/app.DBXoyO4w.js"></script>
13
- <link rel="preload" href="/senangstart-css/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
14
- <link rel="modulepreload" href="/senangstart-css/assets/chunks/theme.CaXH1t3X.js">
15
- <link rel="modulepreload" href="/senangstart-css/assets/chunks/framework.I305HrzY.js">
16
- <link rel="modulepreload" href="/senangstart-css/assets/guide_index.md.B0lRU150.lean.js">
17
- <link rel="icon" href="https://senangstart.com/img/ss_icon_accent.svg">
18
- <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
19
- </head>
20
- <body>
21
- <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0b0ada53></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0b0ada53>Skip to content</a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar" data-v-ae24b3ad data-v-6aa21345><div class="wrapper" data-v-6aa21345><div class="container" data-v-6aa21345><div class="title" data-v-6aa21345><div class="VPNavBarTitle has-sidebar" data-v-6aa21345 data-v-1168a8e4><a class="title" href="/senangstart-css/" data-v-1168a8e4><!--[--><!--]--><!--[--><img class="VPImage logo" src="https://senangstart.com/img/ss_logo_typo.svg" alt data-v-8426fc1a><!--]--><!----><!--[--><!--]--></a></div></div><div class="content" data-v-6aa21345><div class="content-body" data-v-6aa21345><!--[--><!--]--><div class="VPNavBarSearch search" data-v-6aa21345><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-6aa21345 data-v-dc692963><span id="main-nav-aria-label" class="visually-hidden" data-v-dc692963> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/senangstart-css/guide/getting-started.html" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Guide</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/senangstart-css/reference/layout.html" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Reference</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/senangstart-css/examples/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Examples</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-dc692963 data-v-cf11d7a2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-cf11d7a2><span class="text" data-v-cf11d7a2><!----><span data-v-cf11d7a2>v0.1.4</span><span class="vpi-chevron-down text-icon" data-v-cf11d7a2></span></span></button><div class="menu" data-v-cf11d7a2><div class="VPMenu" data-v-cf11d7a2 data-v-b98bc113><div class="items" data-v-b98bc113><!--[--><!--[--><div class="VPMenuLink" data-v-b98bc113 data-v-35975db6><a class="VPLink link" href="/senangstart-css/changelog.html" data-v-35975db6><!--[--><span data-v-35975db6>Changelog</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-b98bc113 data-v-35975db6><a class="VPLink link vp-external-link-icon" href="https://github.com/bookklik-technologies/senangstart-css" target="_blank" rel="noreferrer" data-v-35975db6><!--[--><span data-v-35975db6>GitHub</span><!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><div class="VPFlyout VPNavBarTranslations translations" data-v-6aa21345 data-v-88af2de4 data-v-cf11d7a2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="Change language" data-v-cf11d7a2><span class="text" data-v-cf11d7a2><span class="vpi-languages option-icon" data-v-cf11d7a2></span><!----><span class="vpi-chevron-down text-icon" data-v-cf11d7a2></span></span></button><div class="menu" data-v-cf11d7a2><div class="VPMenu" data-v-cf11d7a2 data-v-b98bc113><!----><!--[--><!--[--><div class="items" data-v-88af2de4><p class="title" data-v-88af2de4>English</p><!--[--><div class="VPMenuLink" data-v-88af2de4 data-v-35975db6><a class="VPLink link" href="/senangstart-css/ms/guide/" data-v-35975db6><!--[--><span data-v-35975db6>Bahasa Melayu</span><!--]--></a></div><!--]--></div><!--]--><!--]--></div></div></div><!----><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-6aa21345 data-v-0394ad82 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/bookklik-technologies/senangstart-css" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span class="vpi-social-github"></span></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-6aa21345 data-v-bb2aa2f0 data-v-cf11d7a2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-cf11d7a2><span class="vpi-more-horizontal icon" data-v-cf11d7a2></span></button><div class="menu" data-v-cf11d7a2><div class="VPMenu" data-v-cf11d7a2 data-v-b98bc113><!----><!--[--><!--[--><div class="group translations" data-v-bb2aa2f0><p class="trans-title" data-v-bb2aa2f0>English</p><!--[--><div class="VPMenuLink" data-v-bb2aa2f0 data-v-35975db6><a class="VPLink link" href="/senangstart-css/ms/guide/" data-v-35975db6><!--[--><span data-v-35975db6>Bahasa Melayu</span><!--]--></a></div><!--]--></div><!----><div class="group" data-v-bb2aa2f0><div class="item social-links" data-v-bb2aa2f0><div class="VPSocialLinks social-links-list" data-v-bb2aa2f0 data-v-7bc22406><!--[--><a class="VPSocialLink no-icon" href="https://github.com/bookklik-technologies/senangstart-css" aria-label="github" target="_blank" rel="noopener" data-v-7bc22406 data-v-bd121fe5><span class="vpi-social-github"></span></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-6aa21345 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-6aa21345><div class="divider-line" data-v-6aa21345></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-a6f0e41e><span class="vpi-align-left menu-icon" data-v-a6f0e41e></span><span class="menu-text" data-v-a6f0e41e>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-8a42e2b4><button data-v-8a42e2b4>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-5d98c3a5 data-v-319d5ca6><div class="curtain" data-v-319d5ca6></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-319d5ca6><span class="visually-hidden" id="sidebar-aria-label" data-v-319d5ca6> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0 has-active" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>Introduction</h2><!----></div><div class="items" data-v-b3fd67f8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/guide/" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>What is SenangStart?</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/guide/getting-started.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Getting Started</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/guide/philosophy.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Why Natural Language?</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>Core Concepts</h2><!----></div><div class="items" data-v-b3fd67f8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/guide/tri-attribute.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Tri-Attribute Syntax</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/guide/natural-scale.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>The Natural Scale</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/guide/responsive.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Responsive Design</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/guide/states.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Hover & States</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/guide/dark-mode.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Dark Mode</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-c40bc020><section class="VPSidebarItem level-0" data-v-c40bc020 data-v-b3fd67f8><div class="item" role="button" tabindex="0" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><h2 class="text" data-v-b3fd67f8>Usage</h2><!----></div><div class="items" data-v-b3fd67f8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/guide/cdn.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>CDN (Zero Build)</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/guide/cli.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>CLI Build</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b3fd67f8 data-v-b3fd67f8><div class="item" data-v-b3fd67f8><div class="indicator" data-v-b3fd67f8></div><a class="VPLink link link" href="/senangstart-css/guide/configuration.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Configuration</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-sidebar has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-3f215769 data-v-a5bbad30><div class="content" data-v-a5bbad30><div class="outline-marker" data-v-a5bbad30></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-a5bbad30>On this page</div><ul class="VPDocOutlineItem root" data-v-a5bbad30 data-v-b933a997><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _senangstart-css_guide_" data-v-39a288b8><div><h1 id="what-is-senangstart-css" tabindex="-1">What is SenangStart CSS? <a class="header-anchor" href="#what-is-senangstart-css" aria-label="Permalink to &quot;What is SenangStart CSS?&quot;">​</a></h1><p>SenangStart CSS is a utility-first CSS framework that replaces abstract naming conventions with <strong>Natural Adjectives</strong>.</p><h2 id="the-problem" tabindex="-1">The Problem <a class="header-anchor" href="#the-problem" aria-label="Permalink to &quot;The Problem&quot;">​</a></h2><p>Traditional utility frameworks make you memorize arbitrary scales:</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:#6A737D;--shiki-dark:#6A737D;">&lt;!-- What does px-4 even mean? --&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;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;px-4 py-8 mt-16 mb-32&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;...&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>Is <code>px-4</code> pixels? Is <code>mt-16</code> bigger than <code>mb-32</code>? You need to constantly look up the documentation.</p><h2 id="the-solution" tabindex="-1">The Solution <a class="header-anchor" href="#the-solution" aria-label="Permalink to &quot;The Solution&quot;">​</a></h2><p>SenangStart uses words you already understand:</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:#6A737D;--shiki-dark:#6A737D;">&lt;!-- Instantly understandable --&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;p-x:small p-y:medium m-t:big m-b:giant&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;...&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>No mental math. No lookup tables. Just describe what you want.</strong></p><h2 id="core-principles" tabindex="-1">Core Principles <a class="header-anchor" href="#core-principles" aria-label="Permalink to &quot;Core Principles&quot;">​</a></h2><h3 id="_1-natural-language-first" tabindex="-1">1. Natural Language First <a class="header-anchor" href="#_1-natural-language-first" aria-label="Permalink to &quot;1. Natural Language First&quot;">​</a></h3><table tabindex="0"><thead><tr><th>Instead of...</th><th>Use...</th></tr></thead><tbody><tr><td><code>px-4</code></td><td><code>tiny</code></td></tr><tr><td><code>px-8</code></td><td><code>small</code></td></tr><tr><td><code>px-16</code></td><td><code>medium</code></td></tr><tr><td><code>px-32</code></td><td><code>big</code></td></tr><tr><td><code>px-64</code></td><td><code>giant</code></td></tr><tr><td><code>px-128</code></td><td><code>vast</code></td></tr></tbody></table><h3 id="_2-separation-of-concerns" tabindex="-1">2. Separation of Concerns <a class="header-anchor" href="#_2-separation-of-concerns" aria-label="Permalink to &quot;2. Separation of Concerns&quot;">​</a></h3><p>Three attributes, three responsibilities:</p><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; flow</td><td><code>layout=&quot;flex col center&quot;</code></td></tr><tr><td><code>space</code></td><td>Spacing &amp; sizing</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><h3 id="_3-ai-friendly" tabindex="-1">3. AI-Friendly <a class="header-anchor" href="#_3-ai-friendly" aria-label="Permalink to &quot;3. AI-Friendly&quot;">​</a></h3><p>SenangStart generates context files that help AI assistants understand your design system:</p><blockquote><p><strong>When user says:</strong> &quot;tighten it up&quot;<br><strong>AI knows to:</strong> Scale spacing DOWN (medium → small → tiny)</p></blockquote><blockquote><p><strong>When user says:</strong> &quot;give it air&quot;<br><strong>AI knows to:</strong> Scale spacing UP (medium → big → giant)</p></blockquote><h2 id="next-steps" tabindex="-1">Next Steps <a class="header-anchor" href="#next-steps" aria-label="Permalink to &quot;Next Steps&quot;">​</a></h2><ul><li><a href="/senangstart-css/guide/getting-started.html">Getting Started</a> — Install and use SenangStart</li><li><a href="/senangstart-css/guide/natural-scale.html">The Natural Scale</a> — Understand the spacing philosophy</li><li><a href="/senangstart-css/guide/tri-attribute.html">Tri-Attribute Syntax</a> — Learn layout, space, and visual</li></ul></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-e257564d><span class="visually-hidden" id="doc-footer-aria-label" data-v-e257564d>Pager</span><div class="pager" data-v-e257564d><!----></div><div class="pager" data-v-e257564d><a class="VPLink link pager-link next" href="/senangstart-css/guide/getting-started.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Next page</span><span class="title" data-v-e257564d>Getting Started</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad>Released under the MIT License.</p><p class="copyright" data-v-e315a0ad>Copyright © 2026 SenangStart</p></div></footer><!--[--><!--]--></div></div>
24
- <script>window.__VP_HASH_MAP__=JSON.parse("{\"examples_cards.md\":\"BCzaqSD6\",\"examples_forms.md\":\"DOjr9LrG\",\"examples_hero.md\":\"CAorji-Y\",\"examples_index.md\":\"BjUNsTob\",\"examples_navigation.md\":\"DvL-Yv_5\",\"guide_cdn.md\":\"Bbb7-icp\",\"guide_cli.md\":\"yLsOZ7NL\",\"guide_configuration.md\":\"DN4FfKw4\",\"guide_dark-mode.md\":\"D6UJvQtM\",\"guide_getting-started.md\":\"K5nA8wXY\",\"guide_index.md\":\"B0lRU150\",\"guide_natural-scale.md\":\"vvauT7U1\",\"guide_philosophy.md\":\"mOb9kp32\",\"guide_responsive.md\":\"C7cF-4cR\",\"guide_states.md\":\"CwtGEGHB\",\"guide_tri-attribute.md\":\"CpjJLEMP\",\"index.md\":\"mYp6_S5X\",\"ms_examples_cards.md\":\"CaE5JNAs\",\"ms_examples_forms.md\":\"VvDzMzxF\",\"ms_examples_hero.md\":\"DC4c3kKW\",\"ms_examples_index.md\":\"C13ShcjA\",\"ms_examples_navigation.md\":\"BPtVjKbk\",\"ms_guide_cdn.md\":\"tZFpEjTS\",\"ms_guide_cli.md\":\"DBjxv3-o\",\"ms_guide_configuration.md\":\"CyYNqREm\",\"ms_guide_dark-mode.md\":\"DWDWvzzv\",\"ms_guide_getting-started.md\":\"WoQwRhlY\",\"ms_guide_index.md\":\"pHpXZMmU\",\"ms_guide_natural-scale.md\":\"BiUfU-TH\",\"ms_guide_philosophy.md\":\"hf3SG2Ts\",\"ms_guide_responsive.md\":\"C4yS3zzM\",\"ms_guide_states.md\":\"DkDEjPdC\",\"ms_guide_tri-attribute.md\":\"C3Es_V5J\",\"ms_index.md\":\"Bmo9il08\",\"ms_reference_breakpoints.md\":\"DR7i_--b\",\"ms_reference_colors.md\":\"06ZYiMcJ\",\"ms_reference_layout.md\":\"NGL6A5SR\",\"ms_reference_space.md\":\"BG5YQ-09\",\"ms_reference_spacing.md\":\"XmXLLPOZ\",\"ms_reference_visual.md\":\"BVOlkEqc\",\"reference_breakpoints.md\":\"BRbG8Fzi\",\"reference_colors.md\":\"C7j7dSO1\",\"reference_layout.md\":\"BWJ5NxSp\",\"reference_space.md\":\"DCsqfTWb\",\"reference_spacing.md\":\"BInFD8gd\",\"reference_visual.md\":\"BRK7S9T1\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"VitePress\",\"description\":\"A VitePress site\",\"base\":\"/senangstart-css/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":false,\"themeConfig\":{},\"locales\":{\"root\":{\"label\":\"English\",\"lang\":\"en\",\"title\":\"SenangStart CSS\",\"description\":\"The Intent-First CSS Engine - Speak Human, Compile to Logic\",\"themeConfig\":{\"logo\":\"https://senangstart.com/img/ss_logo_typo.svg\",\"siteTitle\":false,\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/bookklik-technologies/senangstart-css\"}],\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2026 SenangStart\"},\"search\":{\"provider\":\"local\"},\"nav\":[{\"text\":\"Guide\",\"link\":\"/guide/getting-started\"},{\"text\":\"Reference\",\"link\":\"/reference/layout\"},{\"text\":\"Examples\",\"link\":\"/examples/\"},{\"text\":\"v0.1.4\",\"items\":[{\"text\":\"Changelog\",\"link\":\"/changelog\"},{\"text\":\"GitHub\",\"link\":\"https://github.com/bookklik-technologies/senangstart-css\"}]}],\"sidebar\":{\"/guide/\":[{\"text\":\"Introduction\",\"items\":[{\"text\":\"What is SenangStart?\",\"link\":\"/guide/\"},{\"text\":\"Getting Started\",\"link\":\"/guide/getting-started\"},{\"text\":\"Why Natural Language?\",\"link\":\"/guide/philosophy\"}]},{\"text\":\"Core Concepts\",\"items\":[{\"text\":\"Tri-Attribute Syntax\",\"link\":\"/guide/tri-attribute\"},{\"text\":\"The Natural Scale\",\"link\":\"/guide/natural-scale\"},{\"text\":\"Responsive Design\",\"link\":\"/guide/responsive\"},{\"text\":\"Hover & States\",\"link\":\"/guide/states\"},{\"text\":\"Dark Mode\",\"link\":\"/guide/dark-mode\"}]},{\"text\":\"Usage\",\"items\":[{\"text\":\"CDN (Zero Build)\",\"link\":\"/guide/cdn\"},{\"text\":\"CLI Build\",\"link\":\"/guide/cli\"},{\"text\":\"Configuration\",\"link\":\"/guide/configuration\"}]}],\"/reference/\":[{\"text\":\"Attributes\",\"items\":[{\"text\":\"layout\",\"link\":\"/reference/layout\"},{\"text\":\"space\",\"link\":\"/reference/space\"},{\"text\":\"visual\",\"link\":\"/reference/visual\"}]},{\"text\":\"Theme\",\"items\":[{\"text\":\"Spacing\",\"link\":\"/reference/spacing\"},{\"text\":\"Colors\",\"link\":\"/reference/colors\"},{\"text\":\"Breakpoints\",\"link\":\"/reference/breakpoints\"}]}],\"/examples/\":[{\"text\":\"Components\",\"items\":[{\"text\":\"Overview\",\"link\":\"/examples/\"},{\"text\":\"Cards\",\"link\":\"/examples/cards\"},{\"text\":\"Navigation\",\"link\":\"/examples/navigation\"},{\"text\":\"Hero Sections\",\"link\":\"/examples/hero\"},{\"text\":\"Forms\",\"link\":\"/examples/forms\"}]}]}}},\"ms\":{\"label\":\"Bahasa Melayu\",\"lang\":\"ms\",\"title\":\"SenangStart CSS\",\"description\":\"Enjin CSS Intent-First - Cakap Manusia, Kompil ke Logik\",\"themeConfig\":{\"logo\":\"https://senangstart.com/img/ss_logo_typo.svg\",\"siteTitle\":false,\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/bookklik-technologies/senangstart-css\"}],\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2026 SenangStart\"},\"search\":{\"provider\":\"local\"},\"nav\":[{\"text\":\"Panduan\",\"link\":\"/ms/guide/getting-started\"},{\"text\":\"Rujukan\",\"link\":\"/ms/reference/layout\"},{\"text\":\"Contoh\",\"link\":\"/ms/examples/\"},{\"text\":\"v0.1.4\",\"items\":[{\"text\":\"Log Perubahan\",\"link\":\"/ms/changelog\"},{\"text\":\"GitHub\",\"link\":\"https://github.com/bookklik-technologies/senangstart-css\"}]}],\"sidebar\":{\"/ms/guide/\":[{\"text\":\"Pengenalan\",\"items\":[{\"text\":\"Apa itu SenangStart?\",\"link\":\"/ms/guide/\"},{\"text\":\"Bermula\",\"link\":\"/ms/guide/getting-started\"},{\"text\":\"Mengapa Bahasa Semula Jadi?\",\"link\":\"/ms/guide/philosophy\"}]},{\"text\":\"Konsep Teras\",\"items\":[{\"text\":\"Sintaks Tri-Atribut\",\"link\":\"/ms/guide/tri-attribute\"},{\"text\":\"Skala Semula Jadi\",\"link\":\"/ms/guide/natural-scale\"},{\"text\":\"Reka Bentuk Responsif\",\"link\":\"/ms/guide/responsive\"},{\"text\":\"Hover & Keadaan\",\"link\":\"/ms/guide/states\"},{\"text\":\"Mod Gelap\",\"link\":\"/ms/guide/dark-mode\"}]},{\"text\":\"Penggunaan\",\"items\":[{\"text\":\"CDN (Tanpa Bina)\",\"link\":\"/ms/guide/cdn\"},{\"text\":\"Bina CLI\",\"link\":\"/ms/guide/cli\"},{\"text\":\"Konfigurasi\",\"link\":\"/ms/guide/configuration\"}]}],\"/ms/reference/\":[{\"text\":\"Atribut\",\"items\":[{\"text\":\"layout\",\"link\":\"/ms/reference/layout\"},{\"text\":\"space\",\"link\":\"/ms/reference/space\"},{\"text\":\"visual\",\"link\":\"/ms/reference/visual\"}]},{\"text\":\"Tema\",\"items\":[{\"text\":\"Jarak\",\"link\":\"/ms/reference/spacing\"},{\"text\":\"Warna\",\"link\":\"/ms/reference/colors\"},{\"text\":\"Breakpoint\",\"link\":\"/ms/reference/breakpoints\"}]}],\"/ms/examples/\":[{\"text\":\"Komponen\",\"items\":[{\"text\":\"Gambaran Keseluruhan\",\"link\":\"/ms/examples/\"},{\"text\":\"Kad\",\"link\":\"/ms/examples/cards\"},{\"text\":\"Navigasi\",\"link\":\"/ms/examples/navigation\"},{\"text\":\"Bahagian Hero\",\"link\":\"/ms/examples/hero\"},{\"text\":\"Borang\",\"link\":\"/ms/examples/forms\"}]}]}}}},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
25
-
26
- </body>
27
- </html>