@bookklik/senangstart-css 0.1.4 → 0.1.8

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 (527) 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 +624 -18
  5. package/docs/.vitepress/theme/custom.css +0 -1
  6. package/docs/SYNTAX-REFERENCE.md +1555 -0
  7. package/docs/guide/preflight.md +139 -0
  8. package/docs/index.md +8 -20
  9. package/docs/ms/guide/preflight.md +139 -0
  10. package/docs/ms/index.md +8 -20
  11. package/docs/ms/reference/colors.md +45 -45
  12. package/docs/ms/reference/layout/align-content.md +35 -0
  13. package/docs/ms/reference/layout/align-items.md +33 -0
  14. package/docs/ms/reference/layout/align-self.md +34 -0
  15. package/docs/ms/reference/layout/aspect-ratio.md +40 -0
  16. package/docs/ms/reference/layout/border-collapse.md +30 -0
  17. package/docs/ms/reference/layout/border-spacing.md +39 -0
  18. package/docs/ms/reference/layout/box-sizing.md +30 -0
  19. package/docs/ms/reference/layout/caption-side.md +30 -0
  20. package/docs/ms/reference/layout/columns.md +30 -0
  21. package/docs/ms/reference/layout/container.md +29 -0
  22. package/docs/ms/reference/layout/display.md +60 -0
  23. package/docs/ms/reference/layout/flex-basis.md +38 -0
  24. package/docs/ms/reference/layout/flex-direction.md +33 -0
  25. package/docs/ms/reference/layout/flex-items.md +32 -0
  26. package/docs/ms/reference/layout/flex-wrap.md +31 -0
  27. package/docs/ms/reference/layout/flex.md +40 -0
  28. package/docs/ms/reference/layout/float-clear.md +32 -0
  29. package/docs/ms/reference/layout/grid-auto-flow.md +33 -0
  30. package/docs/ms/reference/layout/grid-auto-sizing.md +32 -0
  31. package/docs/ms/reference/layout/grid-column-span.md +31 -0
  32. package/docs/ms/reference/layout/grid-columns.md +32 -0
  33. package/docs/ms/reference/layout/grid-row-span.md +30 -0
  34. package/docs/ms/reference/layout/grid-rows.md +31 -0
  35. package/docs/ms/reference/layout/inset.md +44 -0
  36. package/docs/ms/reference/layout/isolation.md +30 -0
  37. package/docs/ms/reference/layout/justify-content.md +36 -0
  38. package/docs/ms/reference/layout/justify-items.md +32 -0
  39. package/docs/ms/reference/layout/justify-self.md +33 -0
  40. package/docs/ms/reference/layout/object-fit.md +33 -0
  41. package/docs/ms/reference/layout/object-position.md +45 -0
  42. package/docs/ms/reference/layout/order.md +32 -0
  43. package/docs/ms/reference/layout/overflow.md +34 -0
  44. package/docs/ms/reference/layout/overscroll.md +31 -0
  45. package/docs/ms/reference/layout/place-content.md +35 -0
  46. package/docs/ms/reference/layout/place-items.md +32 -0
  47. package/docs/ms/reference/layout/place-self.md +33 -0
  48. package/docs/ms/reference/layout/position.md +34 -0
  49. package/docs/ms/reference/layout/shorthand-alignment.md +34 -0
  50. package/docs/ms/reference/layout/table-layout.md +30 -0
  51. package/docs/ms/reference/layout/visibility.md +30 -0
  52. package/docs/ms/reference/layout/z-index.md +33 -0
  53. package/docs/ms/reference/layout.md +53 -95
  54. package/docs/ms/reference/space/arbitrary-values.md +32 -0
  55. package/docs/ms/reference/space/gap.md +44 -0
  56. package/docs/ms/reference/space/height.md +44 -0
  57. package/docs/ms/reference/space/margin.md +49 -0
  58. package/docs/ms/reference/space/padding.md +49 -0
  59. package/docs/ms/reference/space/scale-reference.md +43 -0
  60. package/docs/ms/reference/space/sizing.md +27 -0
  61. package/docs/ms/reference/space/width.md +45 -0
  62. package/docs/ms/reference/space.md +15 -99
  63. package/docs/ms/reference/spacing.md +22 -8
  64. package/docs/ms/reference/visual/accent-color.md +31 -0
  65. package/docs/ms/reference/visual/animation-builtin.md +41 -0
  66. package/docs/ms/reference/visual/animation-delay.md +41 -0
  67. package/docs/ms/reference/visual/animation-direction.md +32 -0
  68. package/docs/ms/reference/visual/animation-duration.md +43 -0
  69. package/docs/ms/reference/visual/animation-fill.md +32 -0
  70. package/docs/ms/reference/visual/animation-iteration.md +30 -0
  71. package/docs/ms/reference/visual/animation-play.md +30 -0
  72. package/docs/ms/reference/visual/appearance.md +30 -0
  73. package/docs/ms/reference/visual/backdrop-blur.md +43 -0
  74. package/docs/ms/reference/visual/backdrop-brightness.md +41 -0
  75. package/docs/ms/reference/visual/backdrop-contrast.md +41 -0
  76. package/docs/ms/reference/visual/backdrop-grayscale.md +39 -0
  77. package/docs/ms/reference/visual/backdrop-hue-rotate.md +39 -0
  78. package/docs/ms/reference/visual/backdrop-invert.md +39 -0
  79. package/docs/ms/reference/visual/backdrop-opacity.md +39 -0
  80. package/docs/ms/reference/visual/backdrop-saturate.md +41 -0
  81. package/docs/ms/reference/visual/backdrop-sepia.md +39 -0
  82. package/docs/ms/reference/visual/background-attachment.md +31 -0
  83. package/docs/ms/reference/visual/background-blend-mode.md +34 -0
  84. package/docs/ms/reference/visual/background-clip.md +32 -0
  85. package/docs/ms/reference/visual/background-color.md +33 -0
  86. package/docs/ms/reference/visual/background-image.md +41 -0
  87. package/docs/ms/reference/visual/background-origin.md +31 -0
  88. package/docs/ms/reference/visual/background-position.md +45 -0
  89. package/docs/ms/reference/visual/background-repeat.md +34 -0
  90. package/docs/ms/reference/visual/background-size.md +39 -0
  91. package/docs/ms/reference/visual/background.md +13 -0
  92. package/docs/ms/reference/visual/blend-modes.md +34 -0
  93. package/docs/ms/reference/visual/border-radius.md +34 -0
  94. package/docs/ms/reference/visual/border-style.md +33 -0
  95. package/docs/ms/reference/visual/border-width.md +44 -0
  96. package/docs/ms/reference/visual/border.md +43 -0
  97. package/docs/ms/reference/visual/box-shadow.md +33 -0
  98. package/docs/ms/reference/visual/caret-color.md +31 -0
  99. package/docs/ms/reference/visual/color-scheme.md +31 -0
  100. package/docs/ms/reference/visual/cursor.md +37 -0
  101. package/docs/ms/reference/visual/field-sizing.md +30 -0
  102. package/docs/ms/reference/visual/fill.md +38 -0
  103. package/docs/ms/reference/visual/filter-blur.md +43 -0
  104. package/docs/ms/reference/visual/filter-brightness.md +41 -0
  105. package/docs/ms/reference/visual/filter-contrast.md +41 -0
  106. package/docs/ms/reference/visual/filter-drop-shadow.md +42 -0
  107. package/docs/ms/reference/visual/filter-grayscale.md +39 -0
  108. package/docs/ms/reference/visual/filter-hue-rotate.md +39 -0
  109. package/docs/ms/reference/visual/filter-invert.md +39 -0
  110. package/docs/ms/reference/visual/filter-saturate.md +41 -0
  111. package/docs/ms/reference/visual/filter-sepia.md +39 -0
  112. package/docs/ms/reference/visual/font-family.md +31 -0
  113. package/docs/ms/reference/visual/font-smoothing.md +30 -0
  114. package/docs/ms/reference/visual/font-style.md +30 -0
  115. package/docs/ms/reference/visual/font-variant-numeric.md +35 -0
  116. package/docs/ms/reference/visual/font-weight.md +31 -0
  117. package/docs/ms/reference/visual/forced-color-adjust.md +30 -0
  118. package/docs/ms/reference/visual/hyphens.md +31 -0
  119. package/docs/ms/reference/visual/letter-spacing.md +42 -0
  120. package/docs/ms/reference/visual/line-clamp.md +40 -0
  121. package/docs/ms/reference/visual/line-height.md +42 -0
  122. package/docs/ms/reference/visual/list-style.md +34 -0
  123. package/docs/ms/reference/visual/mask.md +39 -0
  124. package/docs/ms/reference/visual/opacity.md +33 -0
  125. package/docs/ms/reference/visual/outline.md +31 -0
  126. package/docs/ms/reference/visual/pointer-events.md +30 -0
  127. package/docs/ms/reference/visual/resize.md +32 -0
  128. package/docs/ms/reference/visual/scroll-behavior.md +30 -0
  129. package/docs/ms/reference/visual/scroll-margin.md +41 -0
  130. package/docs/ms/reference/visual/scroll-padding.md +41 -0
  131. package/docs/ms/reference/visual/scroll-snap-align.md +32 -0
  132. package/docs/ms/reference/visual/scroll-snap-stop.md +30 -0
  133. package/docs/ms/reference/visual/scroll-snap-type.md +34 -0
  134. package/docs/ms/reference/visual/state-prefixes.md +37 -0
  135. package/docs/ms/reference/visual/stroke-width.md +39 -0
  136. package/docs/ms/reference/visual/stroke.md +38 -0
  137. package/docs/ms/reference/visual/text-alignment.md +32 -0
  138. package/docs/ms/reference/visual/text-color.md +41 -0
  139. package/docs/ms/reference/visual/text-decoration.md +32 -0
  140. package/docs/ms/reference/visual/text-indent.md +37 -0
  141. package/docs/ms/reference/visual/text-overflow.md +31 -0
  142. package/docs/ms/reference/visual/text-shadow.md +40 -0
  143. package/docs/ms/reference/visual/text-size.md +32 -0
  144. package/docs/ms/reference/visual/text-transform.md +32 -0
  145. package/docs/ms/reference/visual/text-wrap.md +32 -0
  146. package/docs/ms/reference/visual/touch-action.md +36 -0
  147. package/docs/ms/reference/visual/transform-backface.md +30 -0
  148. package/docs/ms/reference/visual/transform-origin.md +45 -0
  149. package/docs/ms/reference/visual/transform-perspective-origin.md +45 -0
  150. package/docs/ms/reference/visual/transform-perspective.md +43 -0
  151. package/docs/ms/reference/visual/transform-rotate.md +40 -0
  152. package/docs/ms/reference/visual/transform-scale.md +43 -0
  153. package/docs/ms/reference/visual/transform-skew.md +40 -0
  154. package/docs/ms/reference/visual/transform-style.md +30 -0
  155. package/docs/ms/reference/visual/transform-translate.md +39 -0
  156. package/docs/ms/reference/visual/transition-delay.md +41 -0
  157. package/docs/ms/reference/visual/transition-duration.md +43 -0
  158. package/docs/ms/reference/visual/transition-property.md +34 -0
  159. package/docs/ms/reference/visual/transition-timing.md +40 -0
  160. package/docs/ms/reference/visual/typography-keywords.md +81 -0
  161. package/docs/ms/reference/visual/user-select.md +32 -0
  162. package/docs/ms/reference/visual/vertical-align.md +36 -0
  163. package/docs/ms/reference/visual/whitespace.md +34 -0
  164. package/docs/ms/reference/visual/will-change.md +33 -0
  165. package/docs/ms/reference/visual/word-break.md +32 -0
  166. package/docs/ms/reference/visual.md +145 -148
  167. package/docs/public/assets/senangstart-css.min.js +1545 -0
  168. package/docs/reference/layout/align-content.md +35 -0
  169. package/docs/reference/layout/align-items.md +33 -0
  170. package/docs/reference/layout/align-self.md +34 -0
  171. package/docs/reference/layout/aspect-ratio.md +40 -0
  172. package/docs/reference/layout/border-collapse.md +30 -0
  173. package/docs/reference/layout/border-spacing.md +39 -0
  174. package/docs/reference/layout/box-sizing.md +30 -0
  175. package/docs/reference/layout/caption-side.md +30 -0
  176. package/docs/reference/layout/columns.md +30 -0
  177. package/docs/reference/layout/container.md +29 -0
  178. package/docs/reference/layout/display.md +60 -0
  179. package/docs/reference/layout/flex-basis.md +38 -0
  180. package/docs/reference/layout/flex-direction.md +33 -0
  181. package/docs/reference/layout/flex-items.md +32 -0
  182. package/docs/reference/layout/flex-wrap.md +31 -0
  183. package/docs/reference/layout/flex.md +40 -0
  184. package/docs/reference/layout/float-clear.md +32 -0
  185. package/docs/reference/layout/grid-auto-flow.md +33 -0
  186. package/docs/reference/layout/grid-auto-sizing.md +32 -0
  187. package/docs/reference/layout/grid-column-span.md +31 -0
  188. package/docs/reference/layout/grid-columns.md +32 -0
  189. package/docs/reference/layout/grid-row-span.md +30 -0
  190. package/docs/reference/layout/grid-rows.md +31 -0
  191. package/docs/reference/layout/inset.md +44 -0
  192. package/docs/reference/layout/isolation.md +30 -0
  193. package/docs/reference/layout/justify-content.md +36 -0
  194. package/docs/reference/layout/justify-items.md +32 -0
  195. package/docs/reference/layout/justify-self.md +33 -0
  196. package/docs/reference/layout/object-fit.md +33 -0
  197. package/docs/reference/layout/object-position.md +45 -0
  198. package/docs/reference/layout/order.md +32 -0
  199. package/docs/reference/layout/overflow.md +34 -0
  200. package/docs/reference/layout/overscroll.md +31 -0
  201. package/docs/reference/layout/place-content.md +35 -0
  202. package/docs/reference/layout/place-items.md +32 -0
  203. package/docs/reference/layout/place-self.md +33 -0
  204. package/docs/reference/layout/position.md +34 -0
  205. package/docs/reference/layout/shorthand-alignment.md +34 -0
  206. package/docs/reference/layout/table-layout.md +30 -0
  207. package/docs/reference/layout/visibility.md +30 -0
  208. package/docs/reference/layout/z-index.md +33 -0
  209. package/docs/reference/layout.md +60 -102
  210. package/docs/reference/space/arbitrary-values.md +39 -0
  211. package/docs/reference/space/gap.md +44 -0
  212. package/docs/reference/space/height.md +44 -0
  213. package/docs/reference/space/margin.md +49 -0
  214. package/docs/reference/space/padding.md +49 -0
  215. package/docs/reference/space/scale-reference.md +43 -0
  216. package/docs/reference/space/width.md +45 -0
  217. package/docs/reference/space.md +14 -98
  218. package/docs/reference/spacing.md +22 -8
  219. package/docs/reference/visual/accent-color.md +31 -0
  220. package/docs/reference/visual/animation-builtin.md +41 -0
  221. package/docs/reference/visual/animation-delay.md +41 -0
  222. package/docs/reference/visual/animation-direction.md +32 -0
  223. package/docs/reference/visual/animation-duration.md +43 -0
  224. package/docs/reference/visual/animation-fill.md +32 -0
  225. package/docs/reference/visual/animation-iteration.md +30 -0
  226. package/docs/reference/visual/animation-play.md +30 -0
  227. package/docs/reference/visual/appearance.md +30 -0
  228. package/docs/reference/visual/backdrop-blur.md +43 -0
  229. package/docs/reference/visual/backdrop-brightness.md +41 -0
  230. package/docs/reference/visual/backdrop-contrast.md +41 -0
  231. package/docs/reference/visual/backdrop-grayscale.md +39 -0
  232. package/docs/reference/visual/backdrop-hue-rotate.md +39 -0
  233. package/docs/reference/visual/backdrop-invert.md +39 -0
  234. package/docs/reference/visual/backdrop-opacity.md +39 -0
  235. package/docs/reference/visual/backdrop-saturate.md +41 -0
  236. package/docs/reference/visual/backdrop-sepia.md +39 -0
  237. package/docs/reference/visual/background-attachment.md +31 -0
  238. package/docs/reference/visual/background-blend-mode.md +34 -0
  239. package/docs/reference/visual/background-clip.md +32 -0
  240. package/docs/reference/visual/background-color.md +33 -0
  241. package/docs/reference/visual/background-image.md +41 -0
  242. package/docs/reference/visual/background-origin.md +31 -0
  243. package/docs/reference/visual/background-position.md +45 -0
  244. package/docs/reference/visual/background-repeat.md +34 -0
  245. package/docs/reference/visual/background-size.md +39 -0
  246. package/docs/reference/visual/blend-modes.md +34 -0
  247. package/docs/reference/visual/border-radius.md +34 -0
  248. package/docs/reference/visual/border-style.md +33 -0
  249. package/docs/reference/visual/border-width.md +44 -0
  250. package/docs/reference/visual/border.md +43 -0
  251. package/docs/reference/visual/box-shadow.md +33 -0
  252. package/docs/reference/visual/caret-color.md +31 -0
  253. package/docs/reference/visual/color-scheme.md +31 -0
  254. package/docs/reference/visual/cursor.md +37 -0
  255. package/docs/reference/visual/field-sizing.md +30 -0
  256. package/docs/reference/visual/fill.md +38 -0
  257. package/docs/reference/visual/filter-blur.md +43 -0
  258. package/docs/reference/visual/filter-brightness.md +41 -0
  259. package/docs/reference/visual/filter-contrast.md +41 -0
  260. package/docs/reference/visual/filter-drop-shadow.md +42 -0
  261. package/docs/reference/visual/filter-grayscale.md +39 -0
  262. package/docs/reference/visual/filter-hue-rotate.md +39 -0
  263. package/docs/reference/visual/filter-invert.md +39 -0
  264. package/docs/reference/visual/filter-saturate.md +41 -0
  265. package/docs/reference/visual/filter-sepia.md +39 -0
  266. package/docs/reference/visual/font-family.md +31 -0
  267. package/docs/reference/visual/font-smoothing.md +30 -0
  268. package/docs/reference/visual/font-style.md +30 -0
  269. package/docs/reference/visual/font-variant-numeric.md +35 -0
  270. package/docs/reference/visual/font-weight.md +31 -0
  271. package/docs/reference/visual/forced-color-adjust.md +30 -0
  272. package/docs/reference/visual/hyphens.md +31 -0
  273. package/docs/reference/visual/letter-spacing.md +42 -0
  274. package/docs/reference/visual/line-clamp.md +40 -0
  275. package/docs/reference/visual/line-height.md +42 -0
  276. package/docs/reference/visual/list-style.md +34 -0
  277. package/docs/reference/visual/mask.md +39 -0
  278. package/docs/reference/visual/opacity.md +33 -0
  279. package/docs/reference/visual/outline.md +31 -0
  280. package/docs/reference/visual/pointer-events.md +30 -0
  281. package/docs/reference/visual/resize.md +32 -0
  282. package/docs/reference/visual/scroll-behavior.md +30 -0
  283. package/docs/reference/visual/scroll-margin.md +41 -0
  284. package/docs/reference/visual/scroll-padding.md +41 -0
  285. package/docs/reference/visual/scroll-snap-align.md +32 -0
  286. package/docs/reference/visual/scroll-snap-stop.md +30 -0
  287. package/docs/reference/visual/scroll-snap-type.md +34 -0
  288. package/docs/reference/visual/state-prefixes.md +37 -0
  289. package/docs/reference/visual/stroke-width.md +39 -0
  290. package/docs/reference/visual/stroke.md +38 -0
  291. package/docs/reference/visual/text-alignment.md +32 -0
  292. package/docs/reference/visual/text-color.md +41 -0
  293. package/docs/reference/visual/text-decoration.md +32 -0
  294. package/docs/reference/visual/text-indent.md +37 -0
  295. package/docs/reference/visual/text-overflow.md +31 -0
  296. package/docs/reference/visual/text-shadow.md +40 -0
  297. package/docs/reference/visual/text-size.md +32 -0
  298. package/docs/reference/visual/text-transform.md +32 -0
  299. package/docs/reference/visual/text-wrap.md +32 -0
  300. package/docs/reference/visual/touch-action.md +36 -0
  301. package/docs/reference/visual/transform-backface.md +30 -0
  302. package/docs/reference/visual/transform-origin.md +45 -0
  303. package/docs/reference/visual/transform-perspective-origin.md +45 -0
  304. package/docs/reference/visual/transform-perspective.md +43 -0
  305. package/docs/reference/visual/transform-rotate.md +40 -0
  306. package/docs/reference/visual/transform-scale.md +43 -0
  307. package/docs/reference/visual/transform-skew.md +40 -0
  308. package/docs/reference/visual/transform-style.md +30 -0
  309. package/docs/reference/visual/transform-translate.md +39 -0
  310. package/docs/reference/visual/transition-delay.md +41 -0
  311. package/docs/reference/visual/transition-duration.md +43 -0
  312. package/docs/reference/visual/transition-property.md +34 -0
  313. package/docs/reference/visual/transition-timing.md +40 -0
  314. package/docs/reference/visual/typography-keywords.md +81 -0
  315. package/docs/reference/visual/user-select.md +32 -0
  316. package/docs/reference/visual/vertical-align.md +36 -0
  317. package/docs/reference/visual/whitespace.md +34 -0
  318. package/docs/reference/visual/will-change.md +33 -0
  319. package/docs/reference/visual/word-break.md +32 -0
  320. package/docs/reference/visual.md +151 -154
  321. package/docs/syntax-reference.json +1973 -0
  322. package/package.json +12 -4
  323. package/playground/index.html +78 -0
  324. package/playground/jit-test.html +384 -0
  325. package/scripts/extract-syntax.js +152 -0
  326. package/scripts/generate-docs.js +352 -0
  327. package/src/cdn/jit.js +1436 -14
  328. package/src/cli/commands/build.js +5 -0
  329. package/src/cli/index.js +2 -0
  330. package/src/compiler/generators/css.js +1537 -25
  331. package/src/compiler/generators/preflight.js +379 -0
  332. package/src/config/defaults.js +19 -1
  333. package/src/definitions/index.js +153 -0
  334. package/src/definitions/layout-alignment.js +257 -0
  335. package/src/definitions/layout-flex.js +209 -0
  336. package/src/definitions/layout-grid.js +150 -0
  337. package/src/definitions/layout-positioning.js +89 -0
  338. package/src/definitions/layout-table.js +98 -0
  339. package/src/definitions/layout-utilities.js +262 -0
  340. package/src/definitions/layout.js +195 -0
  341. package/src/definitions/space.js +164 -0
  342. package/src/definitions/visual-backgrounds.js +423 -0
  343. package/src/definitions/visual-borders.js +111 -0
  344. package/src/definitions/visual-filters.js +204 -0
  345. package/src/definitions/visual-interactivity.js +292 -0
  346. package/src/definitions/visual-svg.js +80 -0
  347. package/src/definitions/visual-transform3d.js +159 -0
  348. package/src/definitions/visual-transforms.js +142 -0
  349. package/src/definitions/visual-transitions.js +277 -0
  350. package/src/definitions/visual-typography.js +386 -0
  351. package/src/definitions/visual.js +542 -0
  352. package/tests/helpers/test-utils.js +144 -0
  353. package/tests/integration/compiler.test.js +247 -0
  354. package/tests/sync/docs-sync.test.js +364 -0
  355. package/tests/unit/compiler/generators/css.test.js +719 -0
  356. package/tests/unit/compiler/parser.test.js +244 -0
  357. package/tests/unit/compiler/tokenizer.test.js +305 -0
  358. package/tests/unit/config/defaults.test.js +168 -0
  359. package/docs/.vitepress/cache/deps/_metadata.json +0 -31
  360. package/docs/.vitepress/cache/deps/chunk-LE5NDSFD.js +0 -12824
  361. package/docs/.vitepress/cache/deps/chunk-LE5NDSFD.js.map +0 -7
  362. package/docs/.vitepress/cache/deps/package.json +0 -3
  363. package/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js +0 -4505
  364. package/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js.map +0 -7
  365. package/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js +0 -9731
  366. package/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js.map +0 -7
  367. package/docs/.vitepress/cache/deps/vue.js +0 -347
  368. package/docs/.vitepress/cache/deps/vue.js.map +0 -7
  369. package/docs/.vitepress/dist/404.html +0 -22
  370. package/docs/.vitepress/dist/assets/app.DBXoyO4w.js +0 -1
  371. package/docs/.vitepress/dist/assets/chunks/framework.I305HrzY.js +0 -19
  372. package/docs/.vitepress/dist/assets/chunks/theme.CaXH1t3X.js +0 -1
  373. package/docs/.vitepress/dist/assets/examples_cards.md.BCzaqSD6.js +0 -84
  374. package/docs/.vitepress/dist/assets/examples_cards.md.BCzaqSD6.lean.js +0 -1
  375. package/docs/.vitepress/dist/assets/examples_forms.md.DOjr9LrG.js +0 -169
  376. package/docs/.vitepress/dist/assets/examples_forms.md.DOjr9LrG.lean.js +0 -1
  377. package/docs/.vitepress/dist/assets/examples_hero.md.CAorji-Y.js +0 -118
  378. package/docs/.vitepress/dist/assets/examples_hero.md.CAorji-Y.lean.js +0 -1
  379. package/docs/.vitepress/dist/assets/examples_index.md.BjUNsTob.js +0 -52
  380. package/docs/.vitepress/dist/assets/examples_index.md.BjUNsTob.lean.js +0 -1
  381. package/docs/.vitepress/dist/assets/examples_navigation.md.DvL-Yv_5.js +0 -106
  382. package/docs/.vitepress/dist/assets/examples_navigation.md.DvL-Yv_5.lean.js +0 -1
  383. package/docs/.vitepress/dist/assets/guide_cdn.md.Bbb7-icp.js +0 -30
  384. package/docs/.vitepress/dist/assets/guide_cdn.md.Bbb7-icp.lean.js +0 -1
  385. package/docs/.vitepress/dist/assets/guide_cli.md.yLsOZ7NL.js +0 -44
  386. package/docs/.vitepress/dist/assets/guide_cli.md.yLsOZ7NL.lean.js +0 -1
  387. package/docs/.vitepress/dist/assets/guide_configuration.md.DN4FfKw4.js +0 -79
  388. package/docs/.vitepress/dist/assets/guide_configuration.md.DN4FfKw4.lean.js +0 -1
  389. package/docs/.vitepress/dist/assets/guide_dark-mode.md.D6UJvQtM.js +0 -69
  390. package/docs/.vitepress/dist/assets/guide_dark-mode.md.D6UJvQtM.lean.js +0 -1
  391. package/docs/.vitepress/dist/assets/guide_getting-started.md.K5nA8wXY.js +0 -47
  392. package/docs/.vitepress/dist/assets/guide_getting-started.md.K5nA8wXY.lean.js +0 -1
  393. package/docs/.vitepress/dist/assets/guide_index.md.B0lRU150.js +0 -3
  394. package/docs/.vitepress/dist/assets/guide_index.md.B0lRU150.lean.js +0 -1
  395. package/docs/.vitepress/dist/assets/guide_natural-scale.md.vvauT7U1.js +0 -22
  396. package/docs/.vitepress/dist/assets/guide_natural-scale.md.vvauT7U1.lean.js +0 -1
  397. package/docs/.vitepress/dist/assets/guide_philosophy.md.mOb9kp32.js +0 -7
  398. package/docs/.vitepress/dist/assets/guide_philosophy.md.mOb9kp32.lean.js +0 -1
  399. package/docs/.vitepress/dist/assets/guide_responsive.md.C7cF-4cR.js +0 -57
  400. package/docs/.vitepress/dist/assets/guide_responsive.md.C7cF-4cR.lean.js +0 -1
  401. package/docs/.vitepress/dist/assets/guide_states.md.CwtGEGHB.js +0 -77
  402. package/docs/.vitepress/dist/assets/guide_states.md.CwtGEGHB.lean.js +0 -1
  403. package/docs/.vitepress/dist/assets/guide_tri-attribute.md.CpjJLEMP.js +0 -45
  404. package/docs/.vitepress/dist/assets/guide_tri-attribute.md.CpjJLEMP.lean.js +0 -1
  405. package/docs/.vitepress/dist/assets/index.md.mYp6_S5X.js +0 -7
  406. package/docs/.vitepress/dist/assets/index.md.mYp6_S5X.lean.js +0 -1
  407. package/docs/.vitepress/dist/assets/inter-italic-cyrillic-ext.r48I6akx.woff2 +0 -0
  408. package/docs/.vitepress/dist/assets/inter-italic-cyrillic.By2_1cv3.woff2 +0 -0
  409. package/docs/.vitepress/dist/assets/inter-italic-greek-ext.1u6EdAuj.woff2 +0 -0
  410. package/docs/.vitepress/dist/assets/inter-italic-greek.DJ8dCoTZ.woff2 +0 -0
  411. package/docs/.vitepress/dist/assets/inter-italic-latin-ext.CN1xVJS-.woff2 +0 -0
  412. package/docs/.vitepress/dist/assets/inter-italic-latin.C2AdPX0b.woff2 +0 -0
  413. package/docs/.vitepress/dist/assets/inter-italic-vietnamese.BSbpV94h.woff2 +0 -0
  414. package/docs/.vitepress/dist/assets/inter-roman-cyrillic-ext.BBPuwvHQ.woff2 +0 -0
  415. package/docs/.vitepress/dist/assets/inter-roman-cyrillic.C5lxZ8CY.woff2 +0 -0
  416. package/docs/.vitepress/dist/assets/inter-roman-greek-ext.CqjqNYQ-.woff2 +0 -0
  417. package/docs/.vitepress/dist/assets/inter-roman-greek.BBVDIX6e.woff2 +0 -0
  418. package/docs/.vitepress/dist/assets/inter-roman-latin-ext.4ZJIpNVo.woff2 +0 -0
  419. package/docs/.vitepress/dist/assets/inter-roman-latin.Di8DUHzh.woff2 +0 -0
  420. package/docs/.vitepress/dist/assets/inter-roman-vietnamese.BjW4sHH5.woff2 +0 -0
  421. package/docs/.vitepress/dist/assets/ms_examples_cards.md.CaE5JNAs.js +0 -84
  422. package/docs/.vitepress/dist/assets/ms_examples_cards.md.CaE5JNAs.lean.js +0 -1
  423. package/docs/.vitepress/dist/assets/ms_examples_forms.md.VvDzMzxF.js +0 -169
  424. package/docs/.vitepress/dist/assets/ms_examples_forms.md.VvDzMzxF.lean.js +0 -1
  425. package/docs/.vitepress/dist/assets/ms_examples_hero.md.DC4c3kKW.js +0 -118
  426. package/docs/.vitepress/dist/assets/ms_examples_hero.md.DC4c3kKW.lean.js +0 -1
  427. package/docs/.vitepress/dist/assets/ms_examples_index.md.C13ShcjA.js +0 -52
  428. package/docs/.vitepress/dist/assets/ms_examples_index.md.C13ShcjA.lean.js +0 -1
  429. package/docs/.vitepress/dist/assets/ms_examples_navigation.md.BPtVjKbk.js +0 -106
  430. package/docs/.vitepress/dist/assets/ms_examples_navigation.md.BPtVjKbk.lean.js +0 -1
  431. package/docs/.vitepress/dist/assets/ms_guide_cdn.md.tZFpEjTS.js +0 -30
  432. package/docs/.vitepress/dist/assets/ms_guide_cdn.md.tZFpEjTS.lean.js +0 -1
  433. package/docs/.vitepress/dist/assets/ms_guide_cli.md.DBjxv3-o.js +0 -44
  434. package/docs/.vitepress/dist/assets/ms_guide_cli.md.DBjxv3-o.lean.js +0 -1
  435. package/docs/.vitepress/dist/assets/ms_guide_configuration.md.CyYNqREm.js +0 -79
  436. package/docs/.vitepress/dist/assets/ms_guide_configuration.md.CyYNqREm.lean.js +0 -1
  437. package/docs/.vitepress/dist/assets/ms_guide_dark-mode.md.DWDWvzzv.js +0 -69
  438. package/docs/.vitepress/dist/assets/ms_guide_dark-mode.md.DWDWvzzv.lean.js +0 -1
  439. package/docs/.vitepress/dist/assets/ms_guide_getting-started.md.WoQwRhlY.js +0 -47
  440. package/docs/.vitepress/dist/assets/ms_guide_getting-started.md.WoQwRhlY.lean.js +0 -1
  441. package/docs/.vitepress/dist/assets/ms_guide_index.md.pHpXZMmU.js +0 -3
  442. package/docs/.vitepress/dist/assets/ms_guide_index.md.pHpXZMmU.lean.js +0 -1
  443. package/docs/.vitepress/dist/assets/ms_guide_natural-scale.md.BiUfU-TH.js +0 -22
  444. package/docs/.vitepress/dist/assets/ms_guide_natural-scale.md.BiUfU-TH.lean.js +0 -1
  445. package/docs/.vitepress/dist/assets/ms_guide_philosophy.md.hf3SG2Ts.js +0 -7
  446. package/docs/.vitepress/dist/assets/ms_guide_philosophy.md.hf3SG2Ts.lean.js +0 -1
  447. package/docs/.vitepress/dist/assets/ms_guide_responsive.md.C4yS3zzM.js +0 -57
  448. package/docs/.vitepress/dist/assets/ms_guide_responsive.md.C4yS3zzM.lean.js +0 -1
  449. package/docs/.vitepress/dist/assets/ms_guide_states.md.DkDEjPdC.js +0 -77
  450. package/docs/.vitepress/dist/assets/ms_guide_states.md.DkDEjPdC.lean.js +0 -1
  451. package/docs/.vitepress/dist/assets/ms_guide_tri-attribute.md.C3Es_V5J.js +0 -45
  452. package/docs/.vitepress/dist/assets/ms_guide_tri-attribute.md.C3Es_V5J.lean.js +0 -1
  453. package/docs/.vitepress/dist/assets/ms_index.md.Bmo9il08.js +0 -7
  454. package/docs/.vitepress/dist/assets/ms_index.md.Bmo9il08.lean.js +0 -1
  455. package/docs/.vitepress/dist/assets/ms_reference_breakpoints.md.DR7i_--b.js +0 -48
  456. package/docs/.vitepress/dist/assets/ms_reference_breakpoints.md.DR7i_--b.lean.js +0 -1
  457. package/docs/.vitepress/dist/assets/ms_reference_colors.md.06ZYiMcJ.js +0 -17
  458. package/docs/.vitepress/dist/assets/ms_reference_colors.md.06ZYiMcJ.lean.js +0 -1
  459. package/docs/.vitepress/dist/assets/ms_reference_layout.md.NGL6A5SR.js +0 -13
  460. package/docs/.vitepress/dist/assets/ms_reference_layout.md.NGL6A5SR.lean.js +0 -1
  461. package/docs/.vitepress/dist/assets/ms_reference_space.md.BG5YQ-09.js +0 -24
  462. package/docs/.vitepress/dist/assets/ms_reference_space.md.BG5YQ-09.lean.js +0 -1
  463. package/docs/.vitepress/dist/assets/ms_reference_spacing.md.XmXLLPOZ.js +0 -32
  464. package/docs/.vitepress/dist/assets/ms_reference_spacing.md.XmXLLPOZ.lean.js +0 -1
  465. package/docs/.vitepress/dist/assets/ms_reference_visual.md.BVOlkEqc.js +0 -22
  466. package/docs/.vitepress/dist/assets/ms_reference_visual.md.BVOlkEqc.lean.js +0 -1
  467. package/docs/.vitepress/dist/assets/reference_breakpoints.md.BRbG8Fzi.js +0 -48
  468. package/docs/.vitepress/dist/assets/reference_breakpoints.md.BRbG8Fzi.lean.js +0 -1
  469. package/docs/.vitepress/dist/assets/reference_colors.md.C7j7dSO1.js +0 -17
  470. package/docs/.vitepress/dist/assets/reference_colors.md.C7j7dSO1.lean.js +0 -1
  471. package/docs/.vitepress/dist/assets/reference_layout.md.BWJ5NxSp.js +0 -13
  472. package/docs/.vitepress/dist/assets/reference_layout.md.BWJ5NxSp.lean.js +0 -1
  473. package/docs/.vitepress/dist/assets/reference_space.md.DCsqfTWb.js +0 -24
  474. package/docs/.vitepress/dist/assets/reference_space.md.DCsqfTWb.lean.js +0 -1
  475. package/docs/.vitepress/dist/assets/reference_spacing.md.BInFD8gd.js +0 -32
  476. package/docs/.vitepress/dist/assets/reference_spacing.md.BInFD8gd.lean.js +0 -1
  477. package/docs/.vitepress/dist/assets/reference_visual.md.BRK7S9T1.js +0 -22
  478. package/docs/.vitepress/dist/assets/reference_visual.md.BRK7S9T1.lean.js +0 -1
  479. package/docs/.vitepress/dist/assets/style.D82StYDI.css +0 -1
  480. package/docs/.vitepress/dist/examples/cards.html +0 -108
  481. package/docs/.vitepress/dist/examples/forms.html +0 -193
  482. package/docs/.vitepress/dist/examples/hero.html +0 -142
  483. package/docs/.vitepress/dist/examples/index.html +0 -76
  484. package/docs/.vitepress/dist/examples/navigation.html +0 -130
  485. package/docs/.vitepress/dist/guide/cdn.html +0 -54
  486. package/docs/.vitepress/dist/guide/cli.html +0 -68
  487. package/docs/.vitepress/dist/guide/configuration.html +0 -103
  488. package/docs/.vitepress/dist/guide/dark-mode.html +0 -93
  489. package/docs/.vitepress/dist/guide/getting-started.html +0 -71
  490. package/docs/.vitepress/dist/guide/index.html +0 -27
  491. package/docs/.vitepress/dist/guide/natural-scale.html +0 -46
  492. package/docs/.vitepress/dist/guide/philosophy.html +0 -31
  493. package/docs/.vitepress/dist/guide/responsive.html +0 -81
  494. package/docs/.vitepress/dist/guide/states.html +0 -101
  495. package/docs/.vitepress/dist/guide/tri-attribute.html +0 -69
  496. package/docs/.vitepress/dist/hashmap.json +0 -1
  497. package/docs/.vitepress/dist/index.html +0 -31
  498. package/docs/.vitepress/dist/ms/examples/cards.html +0 -108
  499. package/docs/.vitepress/dist/ms/examples/forms.html +0 -193
  500. package/docs/.vitepress/dist/ms/examples/hero.html +0 -142
  501. package/docs/.vitepress/dist/ms/examples/index.html +0 -76
  502. package/docs/.vitepress/dist/ms/examples/navigation.html +0 -130
  503. package/docs/.vitepress/dist/ms/guide/cdn.html +0 -54
  504. package/docs/.vitepress/dist/ms/guide/cli.html +0 -68
  505. package/docs/.vitepress/dist/ms/guide/configuration.html +0 -103
  506. package/docs/.vitepress/dist/ms/guide/dark-mode.html +0 -93
  507. package/docs/.vitepress/dist/ms/guide/getting-started.html +0 -71
  508. package/docs/.vitepress/dist/ms/guide/index.html +0 -27
  509. package/docs/.vitepress/dist/ms/guide/natural-scale.html +0 -46
  510. package/docs/.vitepress/dist/ms/guide/philosophy.html +0 -31
  511. package/docs/.vitepress/dist/ms/guide/responsive.html +0 -81
  512. package/docs/.vitepress/dist/ms/guide/states.html +0 -101
  513. package/docs/.vitepress/dist/ms/guide/tri-attribute.html +0 -69
  514. package/docs/.vitepress/dist/ms/index.html +0 -31
  515. package/docs/.vitepress/dist/ms/reference/breakpoints.html +0 -72
  516. package/docs/.vitepress/dist/ms/reference/colors.html +0 -41
  517. package/docs/.vitepress/dist/ms/reference/layout.html +0 -37
  518. package/docs/.vitepress/dist/ms/reference/space.html +0 -48
  519. package/docs/.vitepress/dist/ms/reference/spacing.html +0 -56
  520. package/docs/.vitepress/dist/ms/reference/visual.html +0 -46
  521. package/docs/.vitepress/dist/reference/breakpoints.html +0 -72
  522. package/docs/.vitepress/dist/reference/colors.html +0 -41
  523. package/docs/.vitepress/dist/reference/layout.html +0 -37
  524. package/docs/.vitepress/dist/reference/space.html +0 -48
  525. package/docs/.vitepress/dist/reference/spacing.html +0 -56
  526. package/docs/.vitepress/dist/reference/visual.html +0 -46
  527. package/docs/.vitepress/dist/vp-icons.css +0 -1
package/docs/.vitepress/dist/ms/index.html DELETED
@@ -1,31 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="ms" dir="ltr">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width,initial-scale=1">
6
- <title>SenangStart CSS</title>
7
- <meta name="description" content="Enjin CSS Intent-First - Cakap Manusia, Kompil ke Logik">
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/ms_index.md.Bmo9il08.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" data-v-6aa21345 data-v-1168a8e4><a class="title" href="/senangstart-css/ms/" 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/ms/guide/getting-started.html" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Panduan</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/senangstart-css/ms/reference/layout.html" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Rujukan</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/senangstart-css/ms/examples/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Contoh</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/ms/changelog.html" data-v-35975db6><!--[--><span data-v-35975db6>Log Perubahan</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>Bahasa Melayu</p><!--[--><div class="VPMenuLink" data-v-88af2de4 data-v-35975db6><a class="VPLink link" href="/senangstart-css/" data-v-35975db6><!--[--><span data-v-35975db6>English</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>Bahasa Melayu</p><!--[--><div class="VPMenuLink" data-v-bb2aa2f0 data-v-35975db6><a class="VPLink link" href="/senangstart-css/" data-v-35975db6><!--[--><span data-v-35975db6>English</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="VPContent is-home" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPHome" data-v-1428d186 data-v-8b561e3d><!--[--><!--]--><div class="VPHero has-image VPHomeHero" data-v-8b561e3d data-v-4f9c455b><div class="container" data-v-4f9c455b><div class="main" data-v-4f9c455b><!--[--><!--]--><!--[--><h1 class="heading" data-v-4f9c455b><span class="name clip" data-v-4f9c455b>SenangStart CSS</span><span class="text" data-v-4f9c455b>Enjin CSS Niat Nan Utama</span></h1><p class="tagline" data-v-4f9c455b>Cakap Manusia. Kompil ke Logik.</p><!--]--><!--[--><!--]--><div class="actions" data-v-4f9c455b><!--[--><div class="action" data-v-4f9c455b><a class="VPButton medium brand" href="/senangstart-css/ms/guide/getting-started.html" data-v-4f9c455b data-v-fa7799d5>Bermula</a></div><div class="action" data-v-4f9c455b><a class="VPButton medium alt" href="https://github.com/bookklik-technologies/senangstart-css" target="_blank" rel="noreferrer" data-v-4f9c455b data-v-fa7799d5>Lihat di GitHub</a></div><!--]--></div><!--[--><!--]--></div><div class="image" data-v-4f9c455b><div class="image-container" data-v-4f9c455b><div class="image-bg" data-v-4f9c455b></div><!--[--><!--[--><img class="VPImage image-src" src="https://senangstart.com/img/use_senangstart.svg" alt="SenangStart CSS" data-v-8426fc1a><!--]--><!--]--></div></div></div></div><!--[--><!--]--><!--[--><!--]--><div class="VPFeatures VPHomeFeatures" data-v-8b561e3d data-v-a6181336><div class="container" data-v-a6181336><div class="items" data-v-a6181336><!--[--><div class="grid-6 item" data-v-a6181336><div class="VPLink no-icon VPFeature" data-v-a6181336 data-v-a3976bdc><!--[--><article class="box" data-v-a3976bdc><div class="icon" data-v-a3976bdc>🧠</div><h2 class="title" data-v-a3976bdc>Bahasa Semula Jadi</h2><p class="details" data-v-a3976bdc>Guna tiny, small, medium, big, giant, vast — perkataan yang anda sudah tahu. Tak perlu hafal px-4, px-8, px-16.</p><!----></article><!--]--></div></div><div class="grid-6 item" data-v-a6181336><div class="VPLink no-icon VPFeature" data-v-a6181336 data-v-a3976bdc><!--[--><article class="box" data-v-a3976bdc><div class="icon" data-v-a3976bdc>🎯</div><h2 class="title" data-v-a3976bdc>Pengasingan Tanggungjawab</h2><p class="details" data-v-a3976bdc>layout untuk struktur, space untuk saiz, visual untuk penampilan. Bersih, semantik, mudah diselenggara.</p><!----></article><!--]--></div></div><div class="grid-6 item" data-v-a6181336><div class="VPLink no-icon VPFeature" data-v-a6181336 data-v-a3976bdc><!--[--><article class="box" data-v-a3976bdc><div class="icon" data-v-a3976bdc>🤖</div><h2 class="title" data-v-a3976bdc>Mesra AI</h2><p class="details" data-v-a3976bdc>Menghasilkan fail konteks untuk LLM. Cakap "ketatkan" dan AI tahu untuk kurangkan jarak.</p><!----></article><!--]--></div></div><div class="grid-6 item" data-v-a6181336><div class="VPLink no-icon VPFeature" data-v-a6181336 data-v-a3976bdc><!--[--><article class="box" data-v-a3976bdc><div class="icon" data-v-a3976bdc>⚡</div><h2 class="title" data-v-a3976bdc>Pilihan Tanpa Bina</h2><p class="details" data-v-a3976bdc>Guna CDN JIT runtime untuk stail serta-merta. Tiada langkah bina diperlukan untuk prototaip.</p><!----></article><!--]--></div></div><div class="grid-6 item" data-v-a6181336><div class="VPLink no-icon VPFeature" data-v-a6181336 data-v-a3976bdc><!--[--><article class="box" data-v-a3976bdc><div class="icon" data-v-a3976bdc>📱</div><h2 class="title" data-v-a3976bdc>Responsif Secara Rekaan</h2><p class="details" data-v-a3976bdc>Titik Henti mobile-first dengan prefiks intuitif seperti mob:, tab:, lap:, desk:.</p><!----></article><!--]--></div></div><div class="grid-6 item" data-v-a6181336><div class="VPLink no-icon VPFeature" data-v-a6181336 data-v-a3976bdc><!--[--><article class="box" data-v-a3976bdc><div class="icon" data-v-a3976bdc>🎨</div><h2 class="title" data-v-a3976bdc>Boleh Disesuaikan Sepenuhnya</h2><p class="details" data-v-a3976bdc>Tindih ganti mana-mana skala, tambah warna tersuai, lanjutkan tema untuk padankan jenama anda.</p><!----></article><!--]--></div></div><!--]--></div></div></div><!--[--><!--]--><div class="vp-doc container" style="" data-v-8b561e3d data-v-8e2d4988><!--[--><div style="position:relative;" data-v-8b561e3d><div><h2 id="contoh-pantas" tabindex="-1">Contoh Pantas <a class="header-anchor" href="#contoh-pantas" aria-label="Permalink to &quot;Contoh Pantas&quot;">​</a></h2><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span></span>
22
- <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>
23
- <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>
24
- <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>
25
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
26
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Hello SenangStart!</span></span>
27
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><p>Ini mencipta flexbox column, di tengah, dengan padding big, latar belakang primary, teks putih, dan sudut bulat big. <strong>Tiada kelas CSS untuk dihafal.</strong></p></div></div><!--]--></div></div></div><footer class="VPFooter" 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>
28
- <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>
29
-
30
- </body>
31
- </html>
package/docs/.vitepress/dist/ms/reference/breakpoints.html DELETED
@@ -1,72 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="ms" dir="ltr">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width,initial-scale=1">
6
- <title>Rujukan Titik Henti | SenangStart CSS</title>
7
- <meta name="description" content="Enjin CSS Intent-First - Cakap Manusia, Kompil ke Logik">
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/ms_reference_breakpoints.md.DR7i_--b.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/ms/" 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/ms/guide/getting-started.html" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Panduan</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/senangstart-css/ms/reference/layout.html" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Rujukan</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/senangstart-css/ms/examples/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Contoh</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/ms/changelog.html" data-v-35975db6><!--[--><span data-v-35975db6>Log Perubahan</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>Bahasa Melayu</p><!--[--><div class="VPMenuLink" data-v-88af2de4 data-v-35975db6><a class="VPLink link" href="/senangstart-css/reference/breakpoints.html" data-v-35975db6><!--[--><span data-v-35975db6>English</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>Bahasa Melayu</p><!--[--><div class="VPMenuLink" data-v-bb2aa2f0 data-v-35975db6><a class="VPLink link" href="/senangstart-css/reference/breakpoints.html" data-v-35975db6><!--[--><span data-v-35975db6>English</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>Atribut</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/ms/reference/layout.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>layout</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/ms/reference/space.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>space</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/ms/reference/visual.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>visual</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>Tema</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/ms/reference/spacing.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Jarak</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/ms/reference/colors.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Warna</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/ms/reference/breakpoints.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Breakpoint</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_ms_reference_breakpoints" data-v-39a288b8><div><h1 id="rujukan-titik-henti" tabindex="-1">Rujukan Titik Henti <a class="header-anchor" href="#rujukan-titik-henti" aria-label="Permalink to &quot;Rujukan Titik Henti&quot;">​</a></h1><p>Rujukan lengkap untuk breakpoint responsif.</p><h2 id="titik-henti-lalai" tabindex="-1">Titik Henti Lalai <a class="header-anchor" href="#titik-henti-lalai" aria-label="Permalink to &quot;Titik Henti Lalai&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Prefiks</th><th>Min-Width</th><th>Sasaran Peranti</th></tr></thead><tbody><tr><td>(tiada)</td><td>0px</td><td>Mudah alih (lalai)</td></tr><tr><td><code>mob:</code></td><td>480px</td><td>Mudah alih besar</td></tr><tr><td><code>tab:</code></td><td>768px</td><td>Tablet</td></tr><tr><td><code>lap:</code></td><td>1024px</td><td>Komputer riba</td></tr><tr><td><code>desk:</code></td><td>1280px</td><td>Desktop</td></tr></tbody></table><h2 id="media-query-css" tabindex="-1">Media Query CSS <a class="header-anchor" href="#media-query-css" aria-label="Permalink to &quot;Media Query CSS&quot;">​</a></h2><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* Mobile first - tiada prefiks diperlukan */</span></span>
22
- <span class="line"></span>
23
- <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@media</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">min-width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">480</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) { </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* mob: */</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
24
- <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@media</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">min-width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">768</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) { </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* tab: */</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
25
- <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@media</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">min-width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1024</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) { </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* lap: */</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
26
- <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@media</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">min-width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1280</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) { </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* desk: */</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span></code></pre></div><h2 id="penggunaan" tabindex="-1">Penggunaan <a class="header-anchor" href="#penggunaan" aria-label="Permalink to &quot;Penggunaan&quot;">​</a></h2><h3 id="jarak-responsif" tabindex="-1">Jarak Responsif <a class="header-anchor" href="#jarak-responsif" aria-label="Permalink to &quot;Jarak Responsif&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p:small tab:p:medium lap:p:big&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
27
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Padding progresif</span></span>
28
- <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="layout-responsif" tabindex="-1">Layout Responsif <a class="header-anchor" href="#layout-responsif" aria-label="Permalink to &quot;Layout Responsif&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex col tab:row&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
29
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Column pada mudah alih, row pada tablet+</span></span>
30
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
31
- <span class="line"></span>
32
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">nav</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;hidden tab:flex&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
33
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Tersembunyi pada mudah alih, kelihatan pada tablet+</span></span>
34
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">nav</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="tipografi-responsif" tabindex="-1">Tipografi Responsif <a class="header-anchor" href="#tipografi-responsif" aria-label="Permalink to &quot;Tipografi Responsif&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h1</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text-size:big tab:text-size:giant lap:text-size:vast&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
35
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Tajuk responsif</span></span>
36
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="pendekatan-mobile-first" tabindex="-1">Pendekatan Mobile-First <a class="header-anchor" href="#pendekatan-mobile-first" aria-label="Permalink to &quot;Pendekatan Mobile-First&quot;">​</a></h2><p>SenangStart menggunakan reka bentuk responsif mobile-first:</p><ol><li><strong>Gaya asas</strong> digunakan untuk semua saiz skrin</li><li><strong>Prefiks breakpoint</strong> digunakan dari breakpoint itu KE ATAS</li></ol><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- Ini bermaksud: --&gt;</span></span>
37
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- - Mudah alih: small padding --&gt;</span></span>
38
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- - Tablet dan ke atas: medium padding --&gt;</span></span>
39
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- - Laptop dan ke atas: big padding --&gt;</span></span>
40
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p:small tab:p:medium lap:p:big&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
41
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Kandungan</span></span>
42
- <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="penyesuaian" tabindex="-1">Penyesuaian <a class="header-anchor" href="#penyesuaian" aria-label="Permalink to &quot;Penyesuaian&quot;">​</a></h2><p>Tambah atau ubah breakpoint dalam <code>senangstart.config.js</code>:</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
43
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> theme: {</span></span>
44
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> screens: {</span></span>
45
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;mob&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;480px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
46
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;tab&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;768px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
47
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;lap&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;1024px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
48
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;desk&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;1280px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
49
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;wide&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;1536px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Tambah lebih lebar</span></span>
50
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;ultra&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;1920px&#39;</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Tambah ultra-wide</span></span>
51
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
52
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
53
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>Guna breakpoint tersuai:</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;desk:p:big wide:p:giant ultra:p:vast&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
54
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Padding skrin besar</span></span>
55
- <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="corak-biasa" tabindex="-1">Corak Biasa <a class="header-anchor" href="#corak-biasa" aria-label="Permalink to &quot;Corak Biasa&quot;">​</a></h2><h3 id="tunjuk-sembunyi-elemen" tabindex="-1">Tunjuk/Sembunyi Elemen <a class="header-anchor" href="#tunjuk-sembunyi-elemen" aria-label="Permalink to &quot;Tunjuk/Sembunyi Elemen&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- Mudah alih sahaja --&gt;</span></span>
56
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;block tab:hidden&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Menu mudah alih&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
57
- <span class="line"></span>
58
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- Desktop sahaja --&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;hidden lap:block&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Sidebar desktop&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="grid-responsif" tabindex="-1">Grid Responsif <a class="header-anchor" href="#grid-responsif" aria-label="Permalink to &quot;Grid Responsif&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> </span></span>
60
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;grid&quot;</span></span>
61
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;g:small tab:g:medium&quot;</span></span>
62
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;grid-template-columns: 1fr; </span></span>
63
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @media (min-width: 768px) { grid-template-columns: repeat(2, 1fr); }&quot;</span></span>
64
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
65
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Kad...</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></code></pre></div><h3 id="kontena-responsif" tabindex="-1">Kontena Responsif <a class="header-anchor" href="#kontena-responsif" aria-label="Permalink to &quot;Kontena Responsif&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p:small tab:p:medium lap:p:big max-w:[1200px] m-x:auto&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
67
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Kontena di tengah dengan padding responsif</span></span>
68
- <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></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/ms/reference/colors.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Previous page</span><span class="title" data-v-e257564d>Warna</span><!--]--></a></div><div class="pager" data-v-e257564d><!----></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>
69
- <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>
70
-
71
- </body>
72
- </html>
package/docs/.vitepress/dist/ms/reference/colors.html DELETED
@@ -1,41 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="ms" dir="ltr">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width,initial-scale=1">
6
- <title>Rujukan Warna | SenangStart CSS</title>
7
- <meta name="description" content="Enjin CSS Intent-First - Cakap Manusia, Kompil ke Logik">
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/ms_reference_colors.md.06ZYiMcJ.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/ms/" 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/ms/guide/getting-started.html" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Panduan</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/senangstart-css/ms/reference/layout.html" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Rujukan</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/senangstart-css/ms/examples/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>Contoh</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/ms/changelog.html" data-v-35975db6><!--[--><span data-v-35975db6>Log Perubahan</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>Bahasa Melayu</p><!--[--><div class="VPMenuLink" data-v-88af2de4 data-v-35975db6><a class="VPLink link" href="/senangstart-css/reference/colors.html" data-v-35975db6><!--[--><span data-v-35975db6>English</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>Bahasa Melayu</p><!--[--><div class="VPMenuLink" data-v-bb2aa2f0 data-v-35975db6><a class="VPLink link" href="/senangstart-css/reference/colors.html" data-v-35975db6><!--[--><span data-v-35975db6>English</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>Atribut</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/ms/reference/layout.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>layout</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/ms/reference/space.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>space</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/ms/reference/visual.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>visual</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>Tema</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/ms/reference/spacing.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Jarak</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/ms/reference/colors.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Warna</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/ms/reference/breakpoints.html" data-v-b3fd67f8><!--[--><p class="text" data-v-b3fd67f8>Breakpoint</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_ms_reference_colors" data-v-39a288b8><div><h1 id="rujukan-warna" tabindex="-1">Rujukan Warna <a class="header-anchor" href="#rujukan-warna" aria-label="Permalink to &quot;Rujukan Warna&quot;">​</a></h1><p>Rujukan lengkap untuk palet warna.</p><h2 id="warna-semantik" tabindex="-1">Warna Semantik <a class="header-anchor" href="#warna-semantik" aria-label="Permalink to &quot;Warna Semantik&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Key</th><th>Value</th><th>Description</th></tr></thead><tbody><tr><td><code>white</code></td><td>#FFFFFF</td><td>Pure white</td></tr><tr><td><code>black</code></td><td>#000000</td><td>Pure black</td></tr><tr><td><code>grey</code></td><td>#6B7280</td><td>Neutral grey</td></tr><tr><td><code>dark</code></td><td>#3E4A5D</td><td><strong>Brand dark</strong></td></tr><tr><td><code>light</code></td><td>#DBEAFE</td><td><strong>Brand light</strong></td></tr><tr><td><code>primary</code></td><td>#2563EB</td><td><strong>Brand primary</strong></td></tr><tr><td><code>secondary</code></td><td>#DBEAFE</td><td><strong>Brand secondary</strong></td></tr><tr><td><code>success</code></td><td>#10B981</td><td>Positive feedback</td></tr><tr><td><code>warning</code></td><td>#F59E0B</td><td>Cautions</td></tr><tr><td><code>danger</code></td><td>#EF4444</td><td>Errors</td></tr></tbody></table><h2 id="color-palette" tabindex="-1">Color Palette <a class="header-anchor" href="#color-palette" aria-label="Permalink to &quot;Color Palette&quot;">​</a></h2><p>All colors are available in 11 shades: <strong>50</strong>, <strong>100</strong>, <strong>200</strong>, <strong>300</strong>, <strong>400</strong>, <strong>500</strong>, <strong>600</strong>, <strong>700</strong>, <strong>800</strong>, <strong>900</strong>, <strong>950</strong></p><h3 id="chromatic-colors" tabindex="-1">Chromatic Colors <a class="header-anchor" href="#chromatic-colors" aria-label="Permalink to &quot;Chromatic Colors&quot;">​</a></h3><div class="color-grid"><table tabindex="0"><thead><tr><th>Color</th><th>50</th><th>100</th><th>200</th><th>300</th><th>400</th><th>500</th><th>600</th><th>700</th><th>800</th><th>900</th><th>950</th></tr></thead><tbody><tr><td><strong>Red</strong></td><td><span style="background:#FEF2F2;padding:2px 8px;border-radius:4px;">#FEF2F2</span></td><td><span style="background:#FEE2E2;padding:2px 8px;border-radius:4px;">#FEE2E2</span></td><td><span style="background:#FECACA;padding:2px 8px;border-radius:4px;">#FECACA</span></td><td><span style="background:#FCA5A5;padding:2px 8px;border-radius:4px;">#FCA5A5</span></td><td><span style="background:#F87171;padding:2px 8px;border-radius:4px;">#F87171</span></td><td><span style="background:#EF4444;padding:2px 8px;border-radius:4px;color:white;">#EF4444</span></td><td><span style="background:#DC2626;padding:2px 8px;border-radius:4px;color:white;">#DC2626</span></td><td><span style="background:#B91C1C;padding:2px 8px;border-radius:4px;color:white;">#B91C1C</span></td><td><span style="background:#991B1B;padding:2px 8px;border-radius:4px;color:white;">#991B1B</span></td><td><span style="background:#7F1D1D;padding:2px 8px;border-radius:4px;color:white;">#7F1D1D</span></td><td><span style="background:#450A0A;padding:2px 8px;border-radius:4px;color:white;">#450A0A</span></td></tr><tr><td><strong>Orange</strong></td><td><span style="background:#FFF7ED;padding:2px 8px;border-radius:4px;">#FFF7ED</span></td><td><span style="background:#FFEDD5;padding:2px 8px;border-radius:4px;">#FFEDD5</span></td><td><span style="background:#FED7AA;padding:2px 8px;border-radius:4px;">#FED7AA</span></td><td><span style="background:#FDBA74;padding:2px 8px;border-radius:4px;">#FDBA74</span></td><td><span style="background:#FB923C;padding:2px 8px;border-radius:4px;">#FB923C</span></td><td><span style="background:#F97316;padding:2px 8px;border-radius:4px;color:white;">#F97316</span></td><td><span style="background:#EA580C;padding:2px 8px;border-radius:4px;color:white;">#EA580C</span></td><td><span style="background:#C2410C;padding:2px 8px;border-radius:4px;color:white;">#C2410C</span></td><td><span style="background:#9A3412;padding:2px 8px;border-radius:4px;color:white;">#9A3412</span></td><td><span style="background:#7C2D12;padding:2px 8px;border-radius:4px;color:white;">#7C2D12</span></td><td><span style="background:#431407;padding:2px 8px;border-radius:4px;color:white;">#431407</span></td></tr><tr><td><strong>Amber</strong></td><td><span style="background:#FFFBEB;padding:2px 8px;border-radius:4px;">#FFFBEB</span></td><td><span style="background:#FEF3C7;padding:2px 8px;border-radius:4px;">#FEF3C7</span></td><td><span style="background:#FDE68A;padding:2px 8px;border-radius:4px;">#FDE68A</span></td><td><span style="background:#FCD34D;padding:2px 8px;border-radius:4px;">#FCD34D</span></td><td><span style="background:#FBBF24;padding:2px 8px;border-radius:4px;">#FBBF24</span></td><td><span style="background:#F59E0B;padding:2px 8px;border-radius:4px;">#F59E0B</span></td><td><span style="background:#D97706;padding:2px 8px;border-radius:4px;color:white;">#D97706</span></td><td><span style="background:#B45309;padding:2px 8px;border-radius:4px;color:white;">#B45309</span></td><td><span style="background:#92400E;padding:2px 8px;border-radius:4px;color:white;">#92400E</span></td><td><span style="background:#78350F;padding:2px 8px;border-radius:4px;color:white;">#78350F</span></td><td><span style="background:#451A03;padding:2px 8px;border-radius:4px;color:white;">#451A03</span></td></tr><tr><td><strong>Yellow</strong></td><td><span style="background:#FEFCE8;padding:2px 8px;border-radius:4px;">#FEFCE8</span></td><td><span style="background:#FEF9C3;padding:2px 8px;border-radius:4px;">#FEF9C3</span></td><td><span style="background:#FEF08A;padding:2px 8px;border-radius:4px;">#FEF08A</span></td><td><span style="background:#FDE047;padding:2px 8px;border-radius:4px;">#FDE047</span></td><td><span style="background:#FACC15;padding:2px 8px;border-radius:4px;">#FACC15</span></td><td><span style="background:#EAB308;padding:2px 8px;border-radius:4px;">#EAB308</span></td><td><span style="background:#CA8A04;padding:2px 8px;border-radius:4px;color:white;">#CA8A04</span></td><td><span style="background:#A16207;padding:2px 8px;border-radius:4px;color:white;">#A16207</span></td><td><span style="background:#854D0E;padding:2px 8px;border-radius:4px;color:white;">#854D0E</span></td><td><span style="background:#713F12;padding:2px 8px;border-radius:4px;color:white;">#713F12</span></td><td><span style="background:#422006;padding:2px 8px;border-radius:4px;color:white;">#422006</span></td></tr><tr><td><strong>Lime</strong></td><td><span style="background:#F7FEE7;padding:2px 8px;border-radius:4px;">#F7FEE7</span></td><td><span style="background:#ECFCCB;padding:2px 8px;border-radius:4px;">#ECFCCB</span></td><td><span style="background:#D9F99D;padding:2px 8px;border-radius:4px;">#D9F99D</span></td><td><span style="background:#BEF264;padding:2px 8px;border-radius:4px;">#BEF264</span></td><td><span style="background:#A3E635;padding:2px 8px;border-radius:4px;">#A3E635</span></td><td><span style="background:#84CC16;padding:2px 8px;border-radius:4px;">#84CC16</span></td><td><span style="background:#65A30D;padding:2px 8px;border-radius:4px;color:white;">#65A30D</span></td><td><span style="background:#4D7C0F;padding:2px 8px;border-radius:4px;color:white;">#4D7C0F</span></td><td><span style="background:#3F6212;padding:2px 8px;border-radius:4px;color:white;">#3F6212</span></td><td><span style="background:#365314;padding:2px 8px;border-radius:4px;color:white;">#365314</span></td><td><span style="background:#1A2E05;padding:2px 8px;border-radius:4px;color:white;">#1A2E05</span></td></tr><tr><td><strong>Green</strong></td><td><span style="background:#F0FDF4;padding:2px 8px;border-radius:4px;">#F0FDF4</span></td><td><span style="background:#DCFCE7;padding:2px 8px;border-radius:4px;">#DCFCE7</span></td><td><span style="background:#BBF7D0;padding:2px 8px;border-radius:4px;">#BBF7D0</span></td><td><span style="background:#86EFAC;padding:2px 8px;border-radius:4px;">#86EFAC</span></td><td><span style="background:#4ADE80;padding:2px 8px;border-radius:4px;">#4ADE80</span></td><td><span style="background:#22C55E;padding:2px 8px;border-radius:4px;">#22C55E</span></td><td><span style="background:#16A34A;padding:2px 8px;border-radius:4px;color:white;">#16A34A</span></td><td><span style="background:#15803D;padding:2px 8px;border-radius:4px;color:white;">#15803D</span></td><td><span style="background:#166534;padding:2px 8px;border-radius:4px;color:white;">#166534</span></td><td><span style="background:#14532D;padding:2px 8px;border-radius:4px;color:white;">#14532D</span></td><td><span style="background:#052E16;padding:2px 8px;border-radius:4px;color:white;">#052E16</span></td></tr><tr><td><strong>Emerald</strong></td><td><span style="background:#ECFDF5;padding:2px 8px;border-radius:4px;">#ECFDF5</span></td><td><span style="background:#D1FAE5;padding:2px 8px;border-radius:4px;">#D1FAE5</span></td><td><span style="background:#A7F3D0;padding:2px 8px;border-radius:4px;">#A7F3D0</span></td><td><span style="background:#6EE7B7;padding:2px 8px;border-radius:4px;">#6EE7B7</span></td><td><span style="background:#34D399;padding:2px 8px;border-radius:4px;">#34D399</span></td><td><span style="background:#10B981;padding:2px 8px;border-radius:4px;">#10B981</span></td><td><span style="background:#059669;padding:2px 8px;border-radius:4px;color:white;">#059669</span></td><td><span style="background:#047857;padding:2px 8px;border-radius:4px;color:white;">#047857</span></td><td><span style="background:#065F46;padding:2px 8px;border-radius:4px;color:white;">#065F46</span></td><td><span style="background:#064E3B;padding:2px 8px;border-radius:4px;color:white;">#064E3B</span></td><td><span style="background:#022C22;padding:2px 8px;border-radius:4px;color:white;">#022C22</span></td></tr><tr><td><strong>Teal</strong></td><td><span style="background:#F0FDFA;padding:2px 8px;border-radius:4px;">#F0FDFA</span></td><td><span style="background:#CCFBF1;padding:2px 8px;border-radius:4px;">#CCFBF1</span></td><td><span style="background:#99F6E4;padding:2px 8px;border-radius:4px;">#99F6E4</span></td><td><span style="background:#5EEAD4;padding:2px 8px;border-radius:4px;">#5EEAD4</span></td><td><span style="background:#2DD4BF;padding:2px 8px;border-radius:4px;">#2DD4BF</span></td><td><span style="background:#14B8A6;padding:2px 8px;border-radius:4px;">#14B8A6</span></td><td><span style="background:#0D9488;padding:2px 8px;border-radius:4px;color:white;">#0D9488</span></td><td><span style="background:#0F766E;padding:2px 8px;border-radius:4px;color:white;">#0F766E</span></td><td><span style="background:#115E59;padding:2px 8px;border-radius:4px;color:white;">#115E59</span></td><td><span style="background:#134E4A;padding:2px 8px;border-radius:4px;color:white;">#134E4A</span></td><td><span style="background:#042F2E;padding:2px 8px;border-radius:4px;color:white;">#042F2E</span></td></tr><tr><td><strong>Cyan</strong></td><td><span style="background:#ECFEFF;padding:2px 8px;border-radius:4px;">#ECFEFF</span></td><td><span style="background:#CFFAFE;padding:2px 8px;border-radius:4px;">#CFFAFE</span></td><td><span style="background:#A5F3FC;padding:2px 8px;border-radius:4px;">#A5F3FC</span></td><td><span style="background:#67E8F9;padding:2px 8px;border-radius:4px;">#67E8F9</span></td><td><span style="background:#22D3EE;padding:2px 8px;border-radius:4px;">#22D3EE</span></td><td><span style="background:#06B6D4;padding:2px 8px;border-radius:4px;">#06B6D4</span></td><td><span style="background:#0891B2;padding:2px 8px;border-radius:4px;color:white;">#0891B2</span></td><td><span style="background:#0E7490;padding:2px 8px;border-radius:4px;color:white;">#0E7490</span></td><td><span style="background:#155E75;padding:2px 8px;border-radius:4px;color:white;">#155E75</span></td><td><span style="background:#164E63;padding:2px 8px;border-radius:4px;color:white;">#164E63</span></td><td><span style="background:#083344;padding:2px 8px;border-radius:4px;color:white;">#083344</span></td></tr><tr><td><strong>Sky</strong></td><td><span style="background:#F0F9FF;padding:2px 8px;border-radius:4px;">#F0F9FF</span></td><td><span style="background:#E0F2FE;padding:2px 8px;border-radius:4px;">#E0F2FE</span></td><td><span style="background:#BAE6FD;padding:2px 8px;border-radius:4px;">#BAE6FD</span></td><td><span style="background:#7DD3FC;padding:2px 8px;border-radius:4px;">#7DD3FC</span></td><td><span style="background:#38BDF8;padding:2px 8px;border-radius:4px;">#38BDF8</span></td><td><span style="background:#0EA5E9;padding:2px 8px;border-radius:4px;">#0EA5E9</span></td><td><span style="background:#0284C7;padding:2px 8px;border-radius:4px;color:white;">#0284C7</span></td><td><span style="background:#0369A1;padding:2px 8px;border-radius:4px;color:white;">#0369A1</span></td><td><span style="background:#075985;padding:2px 8px;border-radius:4px;color:white;">#075985</span></td><td><span style="background:#0C4A6E;padding:2px 8px;border-radius:4px;color:white;">#0C4A6E</span></td><td><span style="background:#082F49;padding:2px 8px;border-radius:4px;color:white;">#082F49</span></td></tr><tr><td><strong>Blue</strong></td><td><span style="background:#EFF6FF;padding:2px 8px;border-radius:4px;">#EFF6FF</span></td><td><span style="background:#DBEAFE;padding:2px 8px;border-radius:4px;">#DBEAFE</span></td><td><span style="background:#BFDBFE;padding:2px 8px;border-radius:4px;">#BFDBFE</span></td><td><span style="background:#93C5FD;padding:2px 8px;border-radius:4px;">#93C5FD</span></td><td><span style="background:#60A5FA;padding:2px 8px;border-radius:4px;">#60A5FA</span></td><td><span style="background:#3B82F6;padding:2px 8px;border-radius:4px;color:white;">#3B82F6</span></td><td><span style="background:#2563EB;padding:2px 8px;border-radius:4px;color:white;">#2563EB</span></td><td><span style="background:#1D4ED8;padding:2px 8px;border-radius:4px;color:white;">#1D4ED8</span></td><td><span style="background:#1E40AF;padding:2px 8px;border-radius:4px;color:white;">#1E40AF</span></td><td><span style="background:#1E3A8A;padding:2px 8px;border-radius:4px;color:white;">#1E3A8A</span></td><td><span style="background:#172554;padding:2px 8px;border-radius:4px;color:white;">#172554</span></td></tr><tr><td><strong>Indigo</strong></td><td><span style="background:#EEF2FF;padding:2px 8px;border-radius:4px;">#EEF2FF</span></td><td><span style="background:#E0E7FF;padding:2px 8px;border-radius:4px;">#E0E7FF</span></td><td><span style="background:#C7D2FE;padding:2px 8px;border-radius:4px;">#C7D2FE</span></td><td><span style="background:#A5B4FC;padding:2px 8px;border-radius:4px;">#A5B4FC</span></td><td><span style="background:#818CF8;padding:2px 8px;border-radius:4px;">#818CF8</span></td><td><span style="background:#6366F1;padding:2px 8px;border-radius:4px;color:white;">#6366F1</span></td><td><span style="background:#4F46E5;padding:2px 8px;border-radius:4px;color:white;">#4F46E5</span></td><td><span style="background:#4338CA;padding:2px 8px;border-radius:4px;color:white;">#4338CA</span></td><td><span style="background:#3730A3;padding:2px 8px;border-radius:4px;color:white;">#3730A3</span></td><td><span style="background:#312E81;padding:2px 8px;border-radius:4px;color:white;">#312E81</span></td><td><span style="background:#1E1B4B;padding:2px 8px;border-radius:4px;color:white;">#1E1B4B</span></td></tr><tr><td><strong>Violet</strong></td><td><span style="background:#F5F3FF;padding:2px 8px;border-radius:4px;">#F5F3FF</span></td><td><span style="background:#EDE9FE;padding:2px 8px;border-radius:4px;">#EDE9FE</span></td><td><span style="background:#DDD6FE;padding:2px 8px;border-radius:4px;">#DDD6FE</span></td><td><span style="background:#C4B5FD;padding:2px 8px;border-radius:4px;">#C4B5FD</span></td><td><span style="background:#A78BFA;padding:2px 8px;border-radius:4px;">#A78BFA</span></td><td><span style="background:#8B5CF6;padding:2px 8px;border-radius:4px;color:white;">#8B5CF6</span></td><td><span style="background:#7C3AED;padding:2px 8px;border-radius:4px;color:white;">#7C3AED</span></td><td><span style="background:#6D28D9;padding:2px 8px;border-radius:4px;color:white;">#6D28D9</span></td><td><span style="background:#5B21B6;padding:2px 8px;border-radius:4px;color:white;">#5B21B6</span></td><td><span style="background:#4C1D95;padding:2px 8px;border-radius:4px;color:white;">#4C1D95</span></td><td><span style="background:#2E1065;padding:2px 8px;border-radius:4px;color:white;">#2E1065</span></td></tr><tr><td><strong>Purple</strong></td><td><span style="background:#FAF5FF;padding:2px 8px;border-radius:4px;">#FAF5FF</span></td><td><span style="background:#F3E8FF;padding:2px 8px;border-radius:4px;">#F3E8FF</span></td><td><span style="background:#E9D5FF;padding:2px 8px;border-radius:4px;">#E9D5FF</span></td><td><span style="background:#D8B4FE;padding:2px 8px;border-radius:4px;">#D8B4FE</span></td><td><span style="background:#C084FC;padding:2px 8px;border-radius:4px;">#C084FC</span></td><td><span style="background:#A855F7;padding:2px 8px;border-radius:4px;color:white;">#A855F7</span></td><td><span style="background:#9333EA;padding:2px 8px;border-radius:4px;color:white;">#9333EA</span></td><td><span style="background:#7E22CE;padding:2px 8px;border-radius:4px;color:white;">#7E22CE</span></td><td><span style="background:#6B21A8;padding:2px 8px;border-radius:4px;color:white;">#6B21A8</span></td><td><span style="background:#581C87;padding:2px 8px;border-radius:4px;color:white;">#581C87</span></td><td><span style="background:#3B0764;padding:2px 8px;border-radius:4px;color:white;">#3B0764</span></td></tr><tr><td><strong>Fuchsia</strong></td><td><span style="background:#FDF4FF;padding:2px 8px;border-radius:4px;">#FDF4FF</span></td><td><span style="background:#FAE8FF;padding:2px 8px;border-radius:4px;">#FAE8FF</span></td><td><span style="background:#F5D0FE;padding:2px 8px;border-radius:4px;">#F5D0FE</span></td><td><span style="background:#F0ABFC;padding:2px 8px;border-radius:4px;">#F0ABFC</span></td><td><span style="background:#E879F9;padding:2px 8px;border-radius:4px;">#E879F9</span></td><td><span style="background:#D946EF;padding:2px 8px;border-radius:4px;color:white;">#D946EF</span></td><td><span style="background:#C026D3;padding:2px 8px;border-radius:4px;color:white;">#C026D3</span></td><td><span style="background:#A21CAF;padding:2px 8px;border-radius:4px;color:white;">#A21CAF</span></td><td><span style="background:#86198F;padding:2px 8px;border-radius:4px;color:white;">#86198F</span></td><td><span style="background:#701A75;padding:2px 8px;border-radius:4px;color:white;">#701A75</span></td><td><span style="background:#4A044E;padding:2px 8px;border-radius:4px;color:white;">#4A044E</span></td></tr><tr><td><strong>Pink</strong></td><td><span style="background:#FDF2F8;padding:2px 8px;border-radius:4px;">#FDF2F8</span></td><td><span style="background:#FCE7F3;padding:2px 8px;border-radius:4px;">#FCE7F3</span></td><td><span style="background:#FBCFE8;padding:2px 8px;border-radius:4px;">#FBCFE8</span></td><td><span style="background:#F9A8D4;padding:2px 8px;border-radius:4px;">#F9A8D4</span></td><td><span style="background:#F472B6;padding:2px 8px;border-radius:4px;">#F472B6</span></td><td><span style="background:#EC4899;padding:2px 8px;border-radius:4px;color:white;">#EC4899</span></td><td><span style="background:#DB2777;padding:2px 8px;border-radius:4px;color:white;">#DB2777</span></td><td><span style="background:#BE185D;padding:2px 8px;border-radius:4px;color:white;">#BE185D</span></td><td><span style="background:#9D174D;padding:2px 8px;border-radius:4px;color:white;">#9D174D</span></td><td><span style="background:#831843;padding:2px 8px;border-radius:4px;color:white;">#831843</span></td><td><span style="background:#500724;padding:2px 8px;border-radius:4px;color:white;">#500724</span></td></tr><tr><td><strong>Rose</strong></td><td><span style="background:#FFF1F2;padding:2px 8px;border-radius:4px;">#FFF1F2</span></td><td><span style="background:#FFE4E6;padding:2px 8px;border-radius:4px;">#FFE4E6</span></td><td><span style="background:#FECDD3;padding:2px 8px;border-radius:4px;">#FECDD3</span></td><td><span style="background:#FDA4AF;padding:2px 8px;border-radius:4px;">#FDA4AF</span></td><td><span style="background:#FB7185;padding:2px 8px;border-radius:4px;">#FB7185</span></td><td><span style="background:#F43F5E;padding:2px 8px;border-radius:4px;color:white;">#F43F5E</span></td><td><span style="background:#E11D48;padding:2px 8px;border-radius:4px;color:white;">#E11D48</span></td><td><span style="background:#BE123C;padding:2px 8px;border-radius:4px;color:white;">#BE123C</span></td><td><span style="background:#9F1239;padding:2px 8px;border-radius:4px;color:white;">#9F1239</span></td><td><span style="background:#881337;padding:2px 8px;border-radius:4px;color:white;">#881337</span></td><td><span style="background:#4C0519;padding:2px 8px;border-radius:4px;color:white;">#4C0519</span></td></tr></tbody></table></div><h3 id="neutral-colors" tabindex="-1">Neutral Colors <a class="header-anchor" href="#neutral-colors" aria-label="Permalink to &quot;Neutral Colors&quot;">​</a></h3><div class="color-grid"><table tabindex="0"><thead><tr><th>Color</th><th>50</th><th>100</th><th>200</th><th>300</th><th>400</th><th>500</th><th>600</th><th>700</th><th>800</th><th>900</th><th>950</th></tr></thead><tbody><tr><td><strong>Slate</strong></td><td><span style="background:#F8FAFC;padding:2px 8px;border-radius:4px;">#F8FAFC</span></td><td><span style="background:#F1F5F9;padding:2px 8px;border-radius:4px;">#F1F5F9</span></td><td><span style="background:#E2E8F0;padding:2px 8px;border-radius:4px;">#E2E8F0</span></td><td><span style="background:#CBD5E1;padding:2px 8px;border-radius:4px;">#CBD5E1</span></td><td><span style="background:#94A3B8;padding:2px 8px;border-radius:4px;">#94A3B8</span></td><td><span style="background:#64748B;padding:2px 8px;border-radius:4px;color:white;">#64748B</span></td><td><span style="background:#475569;padding:2px 8px;border-radius:4px;color:white;">#475569</span></td><td><span style="background:#334155;padding:2px 8px;border-radius:4px;color:white;">#334155</span></td><td><span style="background:#1E293B;padding:2px 8px;border-radius:4px;color:white;">#1E293B</span></td><td><span style="background:#0F172A;padding:2px 8px;border-radius:4px;color:white;">#0F172A</span></td><td><span style="background:#020617;padding:2px 8px;border-radius:4px;color:white;">#020617</span></td></tr><tr><td><strong>Gray</strong></td><td><span style="background:#F9FAFB;padding:2px 8px;border-radius:4px;">#F9FAFB</span></td><td><span style="background:#F3F4F6;padding:2px 8px;border-radius:4px;">#F3F4F6</span></td><td><span style="background:#E5E7EB;padding:2px 8px;border-radius:4px;">#E5E7EB</span></td><td><span style="background:#D1D5DB;padding:2px 8px;border-radius:4px;">#D1D5DB</span></td><td><span style="background:#9CA3AF;padding:2px 8px;border-radius:4px;">#9CA3AF</span></td><td><span style="background:#6B7280;padding:2px 8px;border-radius:4px;color:white;">#6B7280</span></td><td><span style="background:#4B5563;padding:2px 8px;border-radius:4px;color:white;">#4B5563</span></td><td><span style="background:#374151;padding:2px 8px;border-radius:4px;color:white;">#374151</span></td><td><span style="background:#1F2937;padding:2px 8px;border-radius:4px;color:white;">#1F2937</span></td><td><span style="background:#111827;padding:2px 8px;border-radius:4px;color:white;">#111827</span></td><td><span style="background:#030712;padding:2px 8px;border-radius:4px;color:white;">#030712</span></td></tr><tr><td><strong>Zinc</strong></td><td><span style="background:#FAFAFA;padding:2px 8px;border-radius:4px;">#FAFAFA</span></td><td><span style="background:#F4F4F5;padding:2px 8px;border-radius:4px;">#F4F4F5</span></td><td><span style="background:#E4E4E7;padding:2px 8px;border-radius:4px;">#E4E4E7</span></td><td><span style="background:#D4D4D8;padding:2px 8px;border-radius:4px;">#D4D4D8</span></td><td><span style="background:#A1A1AA;padding:2px 8px;border-radius:4px;">#A1A1AA</span></td><td><span style="background:#71717A;padding:2px 8px;border-radius:4px;color:white;">#71717A</span></td><td><span style="background:#52525B;padding:2px 8px;border-radius:4px;color:white;">#52525B</span></td><td><span style="background:#3F3F46;padding:2px 8px;border-radius:4px;color:white;">#3F3F46</span></td><td><span style="background:#27272A;padding:2px 8px;border-radius:4px;color:white;">#27272A</span></td><td><span style="background:#18181B;padding:2px 8px;border-radius:4px;color:white;">#18181B</span></td><td><span style="background:#09090B;padding:2px 8px;border-radius:4px;color:white;">#09090B</span></td></tr><tr><td><strong>Neutral</strong></td><td><span style="background:#FAFAFA;padding:2px 8px;border-radius:4px;">#FAFAFA</span></td><td><span style="background:#F5F5F5;padding:2px 8px;border-radius:4px;">#F5F5F5</span></td><td><span style="background:#E5E5E5;padding:2px 8px;border-radius:4px;">#E5E5E5</span></td><td><span style="background:#D4D4D4;padding:2px 8px;border-radius:4px;">#D4D4D4</span></td><td><span style="background:#A3A3A3;padding:2px 8px;border-radius:4px;">#A3A3A3</span></td><td><span style="background:#737373;padding:2px 8px;border-radius:4px;color:white;">#737373</span></td><td><span style="background:#525252;padding:2px 8px;border-radius:4px;color:white;">#525252</span></td><td><span style="background:#404040;padding:2px 8px;border-radius:4px;color:white;">#404040</span></td><td><span style="background:#262626;padding:2px 8px;border-radius:4px;color:white;">#262626</span></td><td><span style="background:#171717;padding:2px 8px;border-radius:4px;color:white;">#171717</span></td><td><span style="background:#0A0A0A;padding:2px 8px;border-radius:4px;color:white;">#0A0A0A</span></td></tr><tr><td><strong>Stone</strong></td><td><span style="background:#FAFAF9;padding:2px 8px;border-radius:4px;">#FAFAF9</span></td><td><span style="background:#F5F5F4;padding:2px 8px;border-radius:4px;">#F5F5F4</span></td><td><span style="background:#E7E5E4;padding:2px 8px;border-radius:4px;">#E7E5E4</span></td><td><span style="background:#D6D3D1;padding:2px 8px;border-radius:4px;">#D6D3D1</span></td><td><span style="background:#A8A29E;padding:2px 8px;border-radius:4px;">#A8A29E</span></td><td><span style="background:#78716C;padding:2px 8px;border-radius:4px;color:white;">#78716C</span></td><td><span style="background:#57534E;padding:2px 8px;border-radius:4px;color:white;">#57534E</span></td><td><span style="background:#44403C;padding:2px 8px;border-radius:4px;color:white;">#44403C</span></td><td><span style="background:#292524;padding:2px 8px;border-radius:4px;color:white;">#292524</span></td><td><span style="background:#1C1917;padding:2px 8px;border-radius:4px;color:white;">#1C1917</span></td><td><span style="background:#0C0A09;padding:2px 8px;border-radius:4px;color:white;">#0C0A09</span></td></tr></tbody></table></div><h2 id="usage" tabindex="-1">Usage <a class="header-anchor" href="#usage" aria-label="Permalink to &quot;Usage&quot;">​</a></h2><h3 id="background-colors" tabindex="-1">Background Colors <a class="header-anchor" href="#background-colors" aria-label="Permalink to &quot;Background Colors&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:blue-500&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Blue 500 background&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
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;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:slate-100&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Light slate background&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
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;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:emerald-600&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Emerald 600 background&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="text-colors" tabindex="-1">Text Colors <a class="header-anchor" href="#text-colors" aria-label="Permalink to &quot;Text Colors&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:gray-900&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Dark text&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
24
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:blue-600&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Blue link&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
25
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:red-500&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Error text&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="border-colors" tabindex="-1">Border Colors <a class="header-anchor" href="#border-colors" aria-label="Permalink to &quot;Border Colors&quot;">​</a></h3><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;border:gray-300 border-w:[1px]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Light border&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
26
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;border:blue-500 border-w:[2px]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Blue border&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="arbitrary-colors" tabindex="-1">Arbitrary Colors <a class="header-anchor" href="#arbitrary-colors" aria-label="Permalink to &quot;Arbitrary Colors&quot;">​</a></h3><p>Use brackets for custom hex values:</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:[#8B5CF6]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Custom purple&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
27
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text:[#EC4899]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Custom pink text&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
28
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> visual</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bg:[rgba(0,0,0,0.5)]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Semi-transparent&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="customization" tabindex="-1">Customization <a class="header-anchor" href="#customization" aria-label="Permalink to &quot;Customization&quot;">​</a></h2><p>Add custom colors in <code>senangstart.config.js</code>:</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
29
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> theme: {</span></span>
30
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> colors: {</span></span>
31
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;brand&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#8B5CF6&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
32
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;accent&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#EC4899&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
33
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;muted&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#9CA3AF&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
34
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;surface&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;#F9FAFB&#39;</span></span>
35
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
36
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
37
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="semantic-usage" tabindex="-1">Semantic Usage <a class="header-anchor" href="#semantic-usage" aria-label="Permalink to &quot;Semantic Usage&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Color</th><th>Recommended Use</th></tr></thead><tbody><tr><td><code>primary</code></td><td>Main actions, links, highlights</td></tr><tr><td><code>success</code></td><td>Positive feedback, confirmations</td></tr><tr><td><code>warning</code></td><td>Cautions, important notices</td></tr><tr><td><code>danger</code></td><td>Errors, destructive actions</td></tr><tr><td><code>grey</code></td><td>Secondary text, borders</td></tr><tr><td><code>dark</code></td><td>Primary text, headings</td></tr><tr><td><code>light</code></td><td>Backgrounds, subtle fills</td></tr></tbody></table></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/ms/reference/spacing.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Previous page</span><span class="title" data-v-e257564d>Jarak</span><!--]--></a></div><div class="pager" data-v-e257564d><a class="VPLink link pager-link next" href="/senangstart-css/ms/reference/breakpoints.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Next page</span><span class="title" data-v-e257564d>Breakpoint</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>
38
- <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>
39
-
40
- </body>
41
- </html>