@bookklik/senangstart-css 0.1.4 → 0.1.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (524) hide show
  1. package/.github/workflows/deploy-docs.yml +7 -1
  2. package/dist/senangstart-css.js +1436 -14
  3. package/dist/senangstart-css.min.js +1159 -10
  4. package/docs/.vitepress/config.js +621 -15
  5. package/docs/SYNTAX-REFERENCE.md +1555 -0
  6. package/docs/guide/preflight.md +139 -0
  7. package/docs/ms/guide/preflight.md +139 -0
  8. package/docs/ms/reference/colors.md +45 -45
  9. package/docs/ms/reference/layout/align-content.md +35 -0
  10. package/docs/ms/reference/layout/align-items.md +33 -0
  11. package/docs/ms/reference/layout/align-self.md +34 -0
  12. package/docs/ms/reference/layout/aspect-ratio.md +40 -0
  13. package/docs/ms/reference/layout/border-collapse.md +30 -0
  14. package/docs/ms/reference/layout/border-spacing.md +39 -0
  15. package/docs/ms/reference/layout/box-sizing.md +30 -0
  16. package/docs/ms/reference/layout/caption-side.md +30 -0
  17. package/docs/ms/reference/layout/columns.md +30 -0
  18. package/docs/ms/reference/layout/container.md +29 -0
  19. package/docs/ms/reference/layout/display.md +60 -0
  20. package/docs/ms/reference/layout/flex-basis.md +38 -0
  21. package/docs/ms/reference/layout/flex-direction.md +33 -0
  22. package/docs/ms/reference/layout/flex-items.md +32 -0
  23. package/docs/ms/reference/layout/flex-wrap.md +31 -0
  24. package/docs/ms/reference/layout/flex.md +40 -0
  25. package/docs/ms/reference/layout/float-clear.md +32 -0
  26. package/docs/ms/reference/layout/grid-auto-flow.md +33 -0
  27. package/docs/ms/reference/layout/grid-auto-sizing.md +32 -0
  28. package/docs/ms/reference/layout/grid-column-span.md +31 -0
  29. package/docs/ms/reference/layout/grid-columns.md +32 -0
  30. package/docs/ms/reference/layout/grid-row-span.md +30 -0
  31. package/docs/ms/reference/layout/grid-rows.md +31 -0
  32. package/docs/ms/reference/layout/inset.md +44 -0
  33. package/docs/ms/reference/layout/isolation.md +30 -0
  34. package/docs/ms/reference/layout/justify-content.md +36 -0
  35. package/docs/ms/reference/layout/justify-items.md +32 -0
  36. package/docs/ms/reference/layout/justify-self.md +33 -0
  37. package/docs/ms/reference/layout/object-fit.md +33 -0
  38. package/docs/ms/reference/layout/object-position.md +45 -0
  39. package/docs/ms/reference/layout/order.md +32 -0
  40. package/docs/ms/reference/layout/overflow.md +34 -0
  41. package/docs/ms/reference/layout/overscroll.md +31 -0
  42. package/docs/ms/reference/layout/place-content.md +35 -0
  43. package/docs/ms/reference/layout/place-items.md +32 -0
  44. package/docs/ms/reference/layout/place-self.md +33 -0
  45. package/docs/ms/reference/layout/position.md +34 -0
  46. package/docs/ms/reference/layout/shorthand-alignment.md +34 -0
  47. package/docs/ms/reference/layout/table-layout.md +30 -0
  48. package/docs/ms/reference/layout/visibility.md +30 -0
  49. package/docs/ms/reference/layout/z-index.md +33 -0
  50. package/docs/ms/reference/layout.md +53 -95
  51. package/docs/ms/reference/space/arbitrary-values.md +32 -0
  52. package/docs/ms/reference/space/gap.md +44 -0
  53. package/docs/ms/reference/space/height.md +44 -0
  54. package/docs/ms/reference/space/margin.md +49 -0
  55. package/docs/ms/reference/space/padding.md +49 -0
  56. package/docs/ms/reference/space/scale-reference.md +43 -0
  57. package/docs/ms/reference/space/sizing.md +27 -0
  58. package/docs/ms/reference/space/width.md +45 -0
  59. package/docs/ms/reference/space.md +15 -99
  60. package/docs/ms/reference/spacing.md +22 -8
  61. package/docs/ms/reference/visual/accent-color.md +31 -0
  62. package/docs/ms/reference/visual/animation-builtin.md +41 -0
  63. package/docs/ms/reference/visual/animation-delay.md +41 -0
  64. package/docs/ms/reference/visual/animation-direction.md +32 -0
  65. package/docs/ms/reference/visual/animation-duration.md +43 -0
  66. package/docs/ms/reference/visual/animation-fill.md +32 -0
  67. package/docs/ms/reference/visual/animation-iteration.md +30 -0
  68. package/docs/ms/reference/visual/animation-play.md +30 -0
  69. package/docs/ms/reference/visual/appearance.md +30 -0
  70. package/docs/ms/reference/visual/backdrop-blur.md +43 -0
  71. package/docs/ms/reference/visual/backdrop-brightness.md +41 -0
  72. package/docs/ms/reference/visual/backdrop-contrast.md +41 -0
  73. package/docs/ms/reference/visual/backdrop-grayscale.md +39 -0
  74. package/docs/ms/reference/visual/backdrop-hue-rotate.md +39 -0
  75. package/docs/ms/reference/visual/backdrop-invert.md +39 -0
  76. package/docs/ms/reference/visual/backdrop-opacity.md +39 -0
  77. package/docs/ms/reference/visual/backdrop-saturate.md +41 -0
  78. package/docs/ms/reference/visual/backdrop-sepia.md +39 -0
  79. package/docs/ms/reference/visual/background-attachment.md +31 -0
  80. package/docs/ms/reference/visual/background-blend-mode.md +34 -0
  81. package/docs/ms/reference/visual/background-clip.md +32 -0
  82. package/docs/ms/reference/visual/background-color.md +33 -0
  83. package/docs/ms/reference/visual/background-image.md +41 -0
  84. package/docs/ms/reference/visual/background-origin.md +31 -0
  85. package/docs/ms/reference/visual/background-position.md +45 -0
  86. package/docs/ms/reference/visual/background-repeat.md +34 -0
  87. package/docs/ms/reference/visual/background-size.md +39 -0
  88. package/docs/ms/reference/visual/background.md +13 -0
  89. package/docs/ms/reference/visual/blend-modes.md +34 -0
  90. package/docs/ms/reference/visual/border-radius.md +34 -0
  91. package/docs/ms/reference/visual/border-style.md +33 -0
  92. package/docs/ms/reference/visual/border-width.md +44 -0
  93. package/docs/ms/reference/visual/border.md +43 -0
  94. package/docs/ms/reference/visual/box-shadow.md +33 -0
  95. package/docs/ms/reference/visual/caret-color.md +31 -0
  96. package/docs/ms/reference/visual/color-scheme.md +31 -0
  97. package/docs/ms/reference/visual/cursor.md +37 -0
  98. package/docs/ms/reference/visual/field-sizing.md +30 -0
  99. package/docs/ms/reference/visual/fill.md +38 -0
  100. package/docs/ms/reference/visual/filter-blur.md +43 -0
  101. package/docs/ms/reference/visual/filter-brightness.md +41 -0
  102. package/docs/ms/reference/visual/filter-contrast.md +41 -0
  103. package/docs/ms/reference/visual/filter-drop-shadow.md +42 -0
  104. package/docs/ms/reference/visual/filter-grayscale.md +39 -0
  105. package/docs/ms/reference/visual/filter-hue-rotate.md +39 -0
  106. package/docs/ms/reference/visual/filter-invert.md +39 -0
  107. package/docs/ms/reference/visual/filter-saturate.md +41 -0
  108. package/docs/ms/reference/visual/filter-sepia.md +39 -0
  109. package/docs/ms/reference/visual/font-family.md +31 -0
  110. package/docs/ms/reference/visual/font-smoothing.md +30 -0
  111. package/docs/ms/reference/visual/font-style.md +30 -0
  112. package/docs/ms/reference/visual/font-variant-numeric.md +35 -0
  113. package/docs/ms/reference/visual/font-weight.md +31 -0
  114. package/docs/ms/reference/visual/forced-color-adjust.md +30 -0
  115. package/docs/ms/reference/visual/hyphens.md +31 -0
  116. package/docs/ms/reference/visual/letter-spacing.md +42 -0
  117. package/docs/ms/reference/visual/line-clamp.md +40 -0
  118. package/docs/ms/reference/visual/line-height.md +42 -0
  119. package/docs/ms/reference/visual/list-style.md +34 -0
  120. package/docs/ms/reference/visual/mask.md +39 -0
  121. package/docs/ms/reference/visual/opacity.md +33 -0
  122. package/docs/ms/reference/visual/outline.md +31 -0
  123. package/docs/ms/reference/visual/pointer-events.md +30 -0
  124. package/docs/ms/reference/visual/resize.md +32 -0
  125. package/docs/ms/reference/visual/scroll-behavior.md +30 -0
  126. package/docs/ms/reference/visual/scroll-margin.md +41 -0
  127. package/docs/ms/reference/visual/scroll-padding.md +41 -0
  128. package/docs/ms/reference/visual/scroll-snap-align.md +32 -0
  129. package/docs/ms/reference/visual/scroll-snap-stop.md +30 -0
  130. package/docs/ms/reference/visual/scroll-snap-type.md +34 -0
  131. package/docs/ms/reference/visual/state-prefixes.md +37 -0
  132. package/docs/ms/reference/visual/stroke-width.md +39 -0
  133. package/docs/ms/reference/visual/stroke.md +38 -0
  134. package/docs/ms/reference/visual/text-alignment.md +32 -0
  135. package/docs/ms/reference/visual/text-color.md +41 -0
  136. package/docs/ms/reference/visual/text-decoration.md +32 -0
  137. package/docs/ms/reference/visual/text-indent.md +37 -0
  138. package/docs/ms/reference/visual/text-overflow.md +31 -0
  139. package/docs/ms/reference/visual/text-shadow.md +40 -0
  140. package/docs/ms/reference/visual/text-size.md +32 -0
  141. package/docs/ms/reference/visual/text-transform.md +32 -0
  142. package/docs/ms/reference/visual/text-wrap.md +32 -0
  143. package/docs/ms/reference/visual/touch-action.md +36 -0
  144. package/docs/ms/reference/visual/transform-backface.md +30 -0
  145. package/docs/ms/reference/visual/transform-origin.md +45 -0
  146. package/docs/ms/reference/visual/transform-perspective-origin.md +45 -0
  147. package/docs/ms/reference/visual/transform-perspective.md +43 -0
  148. package/docs/ms/reference/visual/transform-rotate.md +40 -0
  149. package/docs/ms/reference/visual/transform-scale.md +43 -0
  150. package/docs/ms/reference/visual/transform-skew.md +40 -0
  151. package/docs/ms/reference/visual/transform-style.md +30 -0
  152. package/docs/ms/reference/visual/transform-translate.md +39 -0
  153. package/docs/ms/reference/visual/transition-delay.md +41 -0
  154. package/docs/ms/reference/visual/transition-duration.md +43 -0
  155. package/docs/ms/reference/visual/transition-property.md +34 -0
  156. package/docs/ms/reference/visual/transition-timing.md +40 -0
  157. package/docs/ms/reference/visual/typography-keywords.md +81 -0
  158. package/docs/ms/reference/visual/user-select.md +32 -0
  159. package/docs/ms/reference/visual/vertical-align.md +36 -0
  160. package/docs/ms/reference/visual/whitespace.md +34 -0
  161. package/docs/ms/reference/visual/will-change.md +33 -0
  162. package/docs/ms/reference/visual/word-break.md +32 -0
  163. package/docs/ms/reference/visual.md +145 -148
  164. package/docs/public/assets/senangstart-css.min.js +1545 -0
  165. package/docs/reference/layout/align-content.md +35 -0
  166. package/docs/reference/layout/align-items.md +33 -0
  167. package/docs/reference/layout/align-self.md +34 -0
  168. package/docs/reference/layout/aspect-ratio.md +40 -0
  169. package/docs/reference/layout/border-collapse.md +30 -0
  170. package/docs/reference/layout/border-spacing.md +39 -0
  171. package/docs/reference/layout/box-sizing.md +30 -0
  172. package/docs/reference/layout/caption-side.md +30 -0
  173. package/docs/reference/layout/columns.md +30 -0
  174. package/docs/reference/layout/container.md +29 -0
  175. package/docs/reference/layout/display.md +60 -0
  176. package/docs/reference/layout/flex-basis.md +38 -0
  177. package/docs/reference/layout/flex-direction.md +33 -0
  178. package/docs/reference/layout/flex-items.md +32 -0
  179. package/docs/reference/layout/flex-wrap.md +31 -0
  180. package/docs/reference/layout/flex.md +40 -0
  181. package/docs/reference/layout/float-clear.md +32 -0
  182. package/docs/reference/layout/grid-auto-flow.md +33 -0
  183. package/docs/reference/layout/grid-auto-sizing.md +32 -0
  184. package/docs/reference/layout/grid-column-span.md +31 -0
  185. package/docs/reference/layout/grid-columns.md +32 -0
  186. package/docs/reference/layout/grid-row-span.md +30 -0
  187. package/docs/reference/layout/grid-rows.md +31 -0
  188. package/docs/reference/layout/inset.md +44 -0
  189. package/docs/reference/layout/isolation.md +30 -0
  190. package/docs/reference/layout/justify-content.md +36 -0
  191. package/docs/reference/layout/justify-items.md +32 -0
  192. package/docs/reference/layout/justify-self.md +33 -0
  193. package/docs/reference/layout/object-fit.md +33 -0
  194. package/docs/reference/layout/object-position.md +45 -0
  195. package/docs/reference/layout/order.md +32 -0
  196. package/docs/reference/layout/overflow.md +34 -0
  197. package/docs/reference/layout/overscroll.md +31 -0
  198. package/docs/reference/layout/place-content.md +35 -0
  199. package/docs/reference/layout/place-items.md +32 -0
  200. package/docs/reference/layout/place-self.md +33 -0
  201. package/docs/reference/layout/position.md +34 -0
  202. package/docs/reference/layout/shorthand-alignment.md +34 -0
  203. package/docs/reference/layout/table-layout.md +30 -0
  204. package/docs/reference/layout/visibility.md +30 -0
  205. package/docs/reference/layout/z-index.md +33 -0
  206. package/docs/reference/layout.md +60 -102
  207. package/docs/reference/space/arbitrary-values.md +39 -0
  208. package/docs/reference/space/gap.md +44 -0
  209. package/docs/reference/space/height.md +44 -0
  210. package/docs/reference/space/margin.md +49 -0
  211. package/docs/reference/space/padding.md +49 -0
  212. package/docs/reference/space/scale-reference.md +43 -0
  213. package/docs/reference/space/width.md +45 -0
  214. package/docs/reference/space.md +14 -98
  215. package/docs/reference/spacing.md +22 -8
  216. package/docs/reference/visual/accent-color.md +31 -0
  217. package/docs/reference/visual/animation-builtin.md +41 -0
  218. package/docs/reference/visual/animation-delay.md +41 -0
  219. package/docs/reference/visual/animation-direction.md +32 -0
  220. package/docs/reference/visual/animation-duration.md +43 -0
  221. package/docs/reference/visual/animation-fill.md +32 -0
  222. package/docs/reference/visual/animation-iteration.md +30 -0
  223. package/docs/reference/visual/animation-play.md +30 -0
  224. package/docs/reference/visual/appearance.md +30 -0
  225. package/docs/reference/visual/backdrop-blur.md +43 -0
  226. package/docs/reference/visual/backdrop-brightness.md +41 -0
  227. package/docs/reference/visual/backdrop-contrast.md +41 -0
  228. package/docs/reference/visual/backdrop-grayscale.md +39 -0
  229. package/docs/reference/visual/backdrop-hue-rotate.md +39 -0
  230. package/docs/reference/visual/backdrop-invert.md +39 -0
  231. package/docs/reference/visual/backdrop-opacity.md +39 -0
  232. package/docs/reference/visual/backdrop-saturate.md +41 -0
  233. package/docs/reference/visual/backdrop-sepia.md +39 -0
  234. package/docs/reference/visual/background-attachment.md +31 -0
  235. package/docs/reference/visual/background-blend-mode.md +34 -0
  236. package/docs/reference/visual/background-clip.md +32 -0
  237. package/docs/reference/visual/background-color.md +33 -0
  238. package/docs/reference/visual/background-image.md +41 -0
  239. package/docs/reference/visual/background-origin.md +31 -0
  240. package/docs/reference/visual/background-position.md +45 -0
  241. package/docs/reference/visual/background-repeat.md +34 -0
  242. package/docs/reference/visual/background-size.md +39 -0
  243. package/docs/reference/visual/blend-modes.md +34 -0
  244. package/docs/reference/visual/border-radius.md +34 -0
  245. package/docs/reference/visual/border-style.md +33 -0
  246. package/docs/reference/visual/border-width.md +44 -0
  247. package/docs/reference/visual/border.md +43 -0
  248. package/docs/reference/visual/box-shadow.md +33 -0
  249. package/docs/reference/visual/caret-color.md +31 -0
  250. package/docs/reference/visual/color-scheme.md +31 -0
  251. package/docs/reference/visual/cursor.md +37 -0
  252. package/docs/reference/visual/field-sizing.md +30 -0
  253. package/docs/reference/visual/fill.md +38 -0
  254. package/docs/reference/visual/filter-blur.md +43 -0
  255. package/docs/reference/visual/filter-brightness.md +41 -0
  256. package/docs/reference/visual/filter-contrast.md +41 -0
  257. package/docs/reference/visual/filter-drop-shadow.md +42 -0
  258. package/docs/reference/visual/filter-grayscale.md +39 -0
  259. package/docs/reference/visual/filter-hue-rotate.md +39 -0
  260. package/docs/reference/visual/filter-invert.md +39 -0
  261. package/docs/reference/visual/filter-saturate.md +41 -0
  262. package/docs/reference/visual/filter-sepia.md +39 -0
  263. package/docs/reference/visual/font-family.md +31 -0
  264. package/docs/reference/visual/font-smoothing.md +30 -0
  265. package/docs/reference/visual/font-style.md +30 -0
  266. package/docs/reference/visual/font-variant-numeric.md +35 -0
  267. package/docs/reference/visual/font-weight.md +31 -0
  268. package/docs/reference/visual/forced-color-adjust.md +30 -0
  269. package/docs/reference/visual/hyphens.md +31 -0
  270. package/docs/reference/visual/letter-spacing.md +42 -0
  271. package/docs/reference/visual/line-clamp.md +40 -0
  272. package/docs/reference/visual/line-height.md +42 -0
  273. package/docs/reference/visual/list-style.md +34 -0
  274. package/docs/reference/visual/mask.md +39 -0
  275. package/docs/reference/visual/opacity.md +33 -0
  276. package/docs/reference/visual/outline.md +31 -0
  277. package/docs/reference/visual/pointer-events.md +30 -0
  278. package/docs/reference/visual/resize.md +32 -0
  279. package/docs/reference/visual/scroll-behavior.md +30 -0
  280. package/docs/reference/visual/scroll-margin.md +41 -0
  281. package/docs/reference/visual/scroll-padding.md +41 -0
  282. package/docs/reference/visual/scroll-snap-align.md +32 -0
  283. package/docs/reference/visual/scroll-snap-stop.md +30 -0
  284. package/docs/reference/visual/scroll-snap-type.md +34 -0
  285. package/docs/reference/visual/state-prefixes.md +37 -0
  286. package/docs/reference/visual/stroke-width.md +39 -0
  287. package/docs/reference/visual/stroke.md +38 -0
  288. package/docs/reference/visual/text-alignment.md +32 -0
  289. package/docs/reference/visual/text-color.md +41 -0
  290. package/docs/reference/visual/text-decoration.md +32 -0
  291. package/docs/reference/visual/text-indent.md +37 -0
  292. package/docs/reference/visual/text-overflow.md +31 -0
  293. package/docs/reference/visual/text-shadow.md +40 -0
  294. package/docs/reference/visual/text-size.md +32 -0
  295. package/docs/reference/visual/text-transform.md +32 -0
  296. package/docs/reference/visual/text-wrap.md +32 -0
  297. package/docs/reference/visual/touch-action.md +36 -0
  298. package/docs/reference/visual/transform-backface.md +30 -0
  299. package/docs/reference/visual/transform-origin.md +45 -0
  300. package/docs/reference/visual/transform-perspective-origin.md +45 -0
  301. package/docs/reference/visual/transform-perspective.md +43 -0
  302. package/docs/reference/visual/transform-rotate.md +40 -0
  303. package/docs/reference/visual/transform-scale.md +43 -0
  304. package/docs/reference/visual/transform-skew.md +40 -0
  305. package/docs/reference/visual/transform-style.md +30 -0
  306. package/docs/reference/visual/transform-translate.md +39 -0
  307. package/docs/reference/visual/transition-delay.md +41 -0
  308. package/docs/reference/visual/transition-duration.md +43 -0
  309. package/docs/reference/visual/transition-property.md +34 -0
  310. package/docs/reference/visual/transition-timing.md +40 -0
  311. package/docs/reference/visual/typography-keywords.md +81 -0
  312. package/docs/reference/visual/user-select.md +32 -0
  313. package/docs/reference/visual/vertical-align.md +36 -0
  314. package/docs/reference/visual/whitespace.md +34 -0
  315. package/docs/reference/visual/will-change.md +33 -0
  316. package/docs/reference/visual/word-break.md +32 -0
  317. package/docs/reference/visual.md +151 -154
  318. package/docs/syntax-reference.json +1973 -0
  319. package/package.json +10 -2
  320. package/playground/index.html +78 -0
  321. package/playground/jit-test.html +384 -0
  322. package/scripts/extract-syntax.js +152 -0
  323. package/scripts/generate-docs.js +352 -0
  324. package/src/cdn/jit.js +1436 -14
  325. package/src/cli/commands/build.js +5 -0
  326. package/src/cli/index.js +2 -0
  327. package/src/compiler/generators/css.js +1537 -25
  328. package/src/compiler/generators/preflight.js +379 -0
  329. package/src/config/defaults.js +19 -1
  330. package/src/definitions/index.js +153 -0
  331. package/src/definitions/layout-alignment.js +257 -0
  332. package/src/definitions/layout-flex.js +209 -0
  333. package/src/definitions/layout-grid.js +150 -0
  334. package/src/definitions/layout-positioning.js +89 -0
  335. package/src/definitions/layout-table.js +98 -0
  336. package/src/definitions/layout-utilities.js +262 -0
  337. package/src/definitions/layout.js +195 -0
  338. package/src/definitions/space.js +164 -0
  339. package/src/definitions/visual-backgrounds.js +423 -0
  340. package/src/definitions/visual-borders.js +111 -0
  341. package/src/definitions/visual-filters.js +204 -0
  342. package/src/definitions/visual-interactivity.js +292 -0
  343. package/src/definitions/visual-svg.js +80 -0
  344. package/src/definitions/visual-transform3d.js +159 -0
  345. package/src/definitions/visual-transforms.js +142 -0
  346. package/src/definitions/visual-transitions.js +277 -0
  347. package/src/definitions/visual-typography.js +386 -0
  348. package/src/definitions/visual.js +542 -0
  349. package/tests/helpers/test-utils.js +144 -0
  350. package/tests/integration/compiler.test.js +247 -0
  351. package/tests/sync/docs-sync.test.js +364 -0
  352. package/tests/unit/compiler/generators/css.test.js +719 -0
  353. package/tests/unit/compiler/parser.test.js +244 -0
  354. package/tests/unit/compiler/tokenizer.test.js +305 -0
  355. package/tests/unit/config/defaults.test.js +168 -0
  356. package/docs/.vitepress/cache/deps/_metadata.json +0 -31
  357. package/docs/.vitepress/cache/deps/chunk-LE5NDSFD.js +0 -12824
  358. package/docs/.vitepress/cache/deps/chunk-LE5NDSFD.js.map +0 -7
  359. package/docs/.vitepress/cache/deps/package.json +0 -3
  360. package/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js +0 -4505
  361. package/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js.map +0 -7
  362. package/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js +0 -9731
  363. package/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js.map +0 -7
  364. package/docs/.vitepress/cache/deps/vue.js +0 -347
  365. package/docs/.vitepress/cache/deps/vue.js.map +0 -7
  366. package/docs/.vitepress/dist/404.html +0 -22
  367. package/docs/.vitepress/dist/assets/app.DBXoyO4w.js +0 -1
  368. package/docs/.vitepress/dist/assets/chunks/framework.I305HrzY.js +0 -19
  369. package/docs/.vitepress/dist/assets/chunks/theme.CaXH1t3X.js +0 -1
  370. package/docs/.vitepress/dist/assets/examples_cards.md.BCzaqSD6.js +0 -84
  371. package/docs/.vitepress/dist/assets/examples_cards.md.BCzaqSD6.lean.js +0 -1
  372. package/docs/.vitepress/dist/assets/examples_forms.md.DOjr9LrG.js +0 -169
  373. package/docs/.vitepress/dist/assets/examples_forms.md.DOjr9LrG.lean.js +0 -1
  374. package/docs/.vitepress/dist/assets/examples_hero.md.CAorji-Y.js +0 -118
  375. package/docs/.vitepress/dist/assets/examples_hero.md.CAorji-Y.lean.js +0 -1
  376. package/docs/.vitepress/dist/assets/examples_index.md.BjUNsTob.js +0 -52
  377. package/docs/.vitepress/dist/assets/examples_index.md.BjUNsTob.lean.js +0 -1
  378. package/docs/.vitepress/dist/assets/examples_navigation.md.DvL-Yv_5.js +0 -106
  379. package/docs/.vitepress/dist/assets/examples_navigation.md.DvL-Yv_5.lean.js +0 -1
  380. package/docs/.vitepress/dist/assets/guide_cdn.md.Bbb7-icp.js +0 -30
  381. package/docs/.vitepress/dist/assets/guide_cdn.md.Bbb7-icp.lean.js +0 -1
  382. package/docs/.vitepress/dist/assets/guide_cli.md.yLsOZ7NL.js +0 -44
  383. package/docs/.vitepress/dist/assets/guide_cli.md.yLsOZ7NL.lean.js +0 -1
  384. package/docs/.vitepress/dist/assets/guide_configuration.md.DN4FfKw4.js +0 -79
  385. package/docs/.vitepress/dist/assets/guide_configuration.md.DN4FfKw4.lean.js +0 -1
  386. package/docs/.vitepress/dist/assets/guide_dark-mode.md.D6UJvQtM.js +0 -69
  387. package/docs/.vitepress/dist/assets/guide_dark-mode.md.D6UJvQtM.lean.js +0 -1
  388. package/docs/.vitepress/dist/assets/guide_getting-started.md.K5nA8wXY.js +0 -47
  389. package/docs/.vitepress/dist/assets/guide_getting-started.md.K5nA8wXY.lean.js +0 -1
  390. package/docs/.vitepress/dist/assets/guide_index.md.B0lRU150.js +0 -3
  391. package/docs/.vitepress/dist/assets/guide_index.md.B0lRU150.lean.js +0 -1
  392. package/docs/.vitepress/dist/assets/guide_natural-scale.md.vvauT7U1.js +0 -22
  393. package/docs/.vitepress/dist/assets/guide_natural-scale.md.vvauT7U1.lean.js +0 -1
  394. package/docs/.vitepress/dist/assets/guide_philosophy.md.mOb9kp32.js +0 -7
  395. package/docs/.vitepress/dist/assets/guide_philosophy.md.mOb9kp32.lean.js +0 -1
  396. package/docs/.vitepress/dist/assets/guide_responsive.md.C7cF-4cR.js +0 -57
  397. package/docs/.vitepress/dist/assets/guide_responsive.md.C7cF-4cR.lean.js +0 -1
  398. package/docs/.vitepress/dist/assets/guide_states.md.CwtGEGHB.js +0 -77
  399. package/docs/.vitepress/dist/assets/guide_states.md.CwtGEGHB.lean.js +0 -1
  400. package/docs/.vitepress/dist/assets/guide_tri-attribute.md.CpjJLEMP.js +0 -45
  401. package/docs/.vitepress/dist/assets/guide_tri-attribute.md.CpjJLEMP.lean.js +0 -1
  402. package/docs/.vitepress/dist/assets/index.md.mYp6_S5X.js +0 -7
  403. package/docs/.vitepress/dist/assets/index.md.mYp6_S5X.lean.js +0 -1
  404. package/docs/.vitepress/dist/assets/inter-italic-cyrillic-ext.r48I6akx.woff2 +0 -0
  405. package/docs/.vitepress/dist/assets/inter-italic-cyrillic.By2_1cv3.woff2 +0 -0
  406. package/docs/.vitepress/dist/assets/inter-italic-greek-ext.1u6EdAuj.woff2 +0 -0
  407. package/docs/.vitepress/dist/assets/inter-italic-greek.DJ8dCoTZ.woff2 +0 -0
  408. package/docs/.vitepress/dist/assets/inter-italic-latin-ext.CN1xVJS-.woff2 +0 -0
  409. package/docs/.vitepress/dist/assets/inter-italic-latin.C2AdPX0b.woff2 +0 -0
  410. package/docs/.vitepress/dist/assets/inter-italic-vietnamese.BSbpV94h.woff2 +0 -0
  411. package/docs/.vitepress/dist/assets/inter-roman-cyrillic-ext.BBPuwvHQ.woff2 +0 -0
  412. package/docs/.vitepress/dist/assets/inter-roman-cyrillic.C5lxZ8CY.woff2 +0 -0
  413. package/docs/.vitepress/dist/assets/inter-roman-greek-ext.CqjqNYQ-.woff2 +0 -0
  414. package/docs/.vitepress/dist/assets/inter-roman-greek.BBVDIX6e.woff2 +0 -0
  415. package/docs/.vitepress/dist/assets/inter-roman-latin-ext.4ZJIpNVo.woff2 +0 -0
  416. package/docs/.vitepress/dist/assets/inter-roman-latin.Di8DUHzh.woff2 +0 -0
  417. package/docs/.vitepress/dist/assets/inter-roman-vietnamese.BjW4sHH5.woff2 +0 -0
  418. package/docs/.vitepress/dist/assets/ms_examples_cards.md.CaE5JNAs.js +0 -84
  419. package/docs/.vitepress/dist/assets/ms_examples_cards.md.CaE5JNAs.lean.js +0 -1
  420. package/docs/.vitepress/dist/assets/ms_examples_forms.md.VvDzMzxF.js +0 -169
  421. package/docs/.vitepress/dist/assets/ms_examples_forms.md.VvDzMzxF.lean.js +0 -1
  422. package/docs/.vitepress/dist/assets/ms_examples_hero.md.DC4c3kKW.js +0 -118
  423. package/docs/.vitepress/dist/assets/ms_examples_hero.md.DC4c3kKW.lean.js +0 -1
  424. package/docs/.vitepress/dist/assets/ms_examples_index.md.C13ShcjA.js +0 -52
  425. package/docs/.vitepress/dist/assets/ms_examples_index.md.C13ShcjA.lean.js +0 -1
  426. package/docs/.vitepress/dist/assets/ms_examples_navigation.md.BPtVjKbk.js +0 -106
  427. package/docs/.vitepress/dist/assets/ms_examples_navigation.md.BPtVjKbk.lean.js +0 -1
  428. package/docs/.vitepress/dist/assets/ms_guide_cdn.md.tZFpEjTS.js +0 -30
  429. package/docs/.vitepress/dist/assets/ms_guide_cdn.md.tZFpEjTS.lean.js +0 -1
  430. package/docs/.vitepress/dist/assets/ms_guide_cli.md.DBjxv3-o.js +0 -44
  431. package/docs/.vitepress/dist/assets/ms_guide_cli.md.DBjxv3-o.lean.js +0 -1
  432. package/docs/.vitepress/dist/assets/ms_guide_configuration.md.CyYNqREm.js +0 -79
  433. package/docs/.vitepress/dist/assets/ms_guide_configuration.md.CyYNqREm.lean.js +0 -1
  434. package/docs/.vitepress/dist/assets/ms_guide_dark-mode.md.DWDWvzzv.js +0 -69
  435. package/docs/.vitepress/dist/assets/ms_guide_dark-mode.md.DWDWvzzv.lean.js +0 -1
  436. package/docs/.vitepress/dist/assets/ms_guide_getting-started.md.WoQwRhlY.js +0 -47
  437. package/docs/.vitepress/dist/assets/ms_guide_getting-started.md.WoQwRhlY.lean.js +0 -1
  438. package/docs/.vitepress/dist/assets/ms_guide_index.md.pHpXZMmU.js +0 -3
  439. package/docs/.vitepress/dist/assets/ms_guide_index.md.pHpXZMmU.lean.js +0 -1
  440. package/docs/.vitepress/dist/assets/ms_guide_natural-scale.md.BiUfU-TH.js +0 -22
  441. package/docs/.vitepress/dist/assets/ms_guide_natural-scale.md.BiUfU-TH.lean.js +0 -1
  442. package/docs/.vitepress/dist/assets/ms_guide_philosophy.md.hf3SG2Ts.js +0 -7
  443. package/docs/.vitepress/dist/assets/ms_guide_philosophy.md.hf3SG2Ts.lean.js +0 -1
  444. package/docs/.vitepress/dist/assets/ms_guide_responsive.md.C4yS3zzM.js +0 -57
  445. package/docs/.vitepress/dist/assets/ms_guide_responsive.md.C4yS3zzM.lean.js +0 -1
  446. package/docs/.vitepress/dist/assets/ms_guide_states.md.DkDEjPdC.js +0 -77
  447. package/docs/.vitepress/dist/assets/ms_guide_states.md.DkDEjPdC.lean.js +0 -1
  448. package/docs/.vitepress/dist/assets/ms_guide_tri-attribute.md.C3Es_V5J.js +0 -45
  449. package/docs/.vitepress/dist/assets/ms_guide_tri-attribute.md.C3Es_V5J.lean.js +0 -1
  450. package/docs/.vitepress/dist/assets/ms_index.md.Bmo9il08.js +0 -7
  451. package/docs/.vitepress/dist/assets/ms_index.md.Bmo9il08.lean.js +0 -1
  452. package/docs/.vitepress/dist/assets/ms_reference_breakpoints.md.DR7i_--b.js +0 -48
  453. package/docs/.vitepress/dist/assets/ms_reference_breakpoints.md.DR7i_--b.lean.js +0 -1
  454. package/docs/.vitepress/dist/assets/ms_reference_colors.md.06ZYiMcJ.js +0 -17
  455. package/docs/.vitepress/dist/assets/ms_reference_colors.md.06ZYiMcJ.lean.js +0 -1
  456. package/docs/.vitepress/dist/assets/ms_reference_layout.md.NGL6A5SR.js +0 -13
  457. package/docs/.vitepress/dist/assets/ms_reference_layout.md.NGL6A5SR.lean.js +0 -1
  458. package/docs/.vitepress/dist/assets/ms_reference_space.md.BG5YQ-09.js +0 -24
  459. package/docs/.vitepress/dist/assets/ms_reference_space.md.BG5YQ-09.lean.js +0 -1
  460. package/docs/.vitepress/dist/assets/ms_reference_spacing.md.XmXLLPOZ.js +0 -32
  461. package/docs/.vitepress/dist/assets/ms_reference_spacing.md.XmXLLPOZ.lean.js +0 -1
  462. package/docs/.vitepress/dist/assets/ms_reference_visual.md.BVOlkEqc.js +0 -22
  463. package/docs/.vitepress/dist/assets/ms_reference_visual.md.BVOlkEqc.lean.js +0 -1
  464. package/docs/.vitepress/dist/assets/reference_breakpoints.md.BRbG8Fzi.js +0 -48
  465. package/docs/.vitepress/dist/assets/reference_breakpoints.md.BRbG8Fzi.lean.js +0 -1
  466. package/docs/.vitepress/dist/assets/reference_colors.md.C7j7dSO1.js +0 -17
  467. package/docs/.vitepress/dist/assets/reference_colors.md.C7j7dSO1.lean.js +0 -1
  468. package/docs/.vitepress/dist/assets/reference_layout.md.BWJ5NxSp.js +0 -13
  469. package/docs/.vitepress/dist/assets/reference_layout.md.BWJ5NxSp.lean.js +0 -1
  470. package/docs/.vitepress/dist/assets/reference_space.md.DCsqfTWb.js +0 -24
  471. package/docs/.vitepress/dist/assets/reference_space.md.DCsqfTWb.lean.js +0 -1
  472. package/docs/.vitepress/dist/assets/reference_spacing.md.BInFD8gd.js +0 -32
  473. package/docs/.vitepress/dist/assets/reference_spacing.md.BInFD8gd.lean.js +0 -1
  474. package/docs/.vitepress/dist/assets/reference_visual.md.BRK7S9T1.js +0 -22
  475. package/docs/.vitepress/dist/assets/reference_visual.md.BRK7S9T1.lean.js +0 -1
  476. package/docs/.vitepress/dist/assets/style.D82StYDI.css +0 -1
  477. package/docs/.vitepress/dist/examples/cards.html +0 -108
  478. package/docs/.vitepress/dist/examples/forms.html +0 -193
  479. package/docs/.vitepress/dist/examples/hero.html +0 -142
  480. package/docs/.vitepress/dist/examples/index.html +0 -76
  481. package/docs/.vitepress/dist/examples/navigation.html +0 -130
  482. package/docs/.vitepress/dist/guide/cdn.html +0 -54
  483. package/docs/.vitepress/dist/guide/cli.html +0 -68
  484. package/docs/.vitepress/dist/guide/configuration.html +0 -103
  485. package/docs/.vitepress/dist/guide/dark-mode.html +0 -93
  486. package/docs/.vitepress/dist/guide/getting-started.html +0 -71
  487. package/docs/.vitepress/dist/guide/index.html +0 -27
  488. package/docs/.vitepress/dist/guide/natural-scale.html +0 -46
  489. package/docs/.vitepress/dist/guide/philosophy.html +0 -31
  490. package/docs/.vitepress/dist/guide/responsive.html +0 -81
  491. package/docs/.vitepress/dist/guide/states.html +0 -101
  492. package/docs/.vitepress/dist/guide/tri-attribute.html +0 -69
  493. package/docs/.vitepress/dist/hashmap.json +0 -1
  494. package/docs/.vitepress/dist/index.html +0 -31
  495. package/docs/.vitepress/dist/ms/examples/cards.html +0 -108
  496. package/docs/.vitepress/dist/ms/examples/forms.html +0 -193
  497. package/docs/.vitepress/dist/ms/examples/hero.html +0 -142
  498. package/docs/.vitepress/dist/ms/examples/index.html +0 -76
  499. package/docs/.vitepress/dist/ms/examples/navigation.html +0 -130
  500. package/docs/.vitepress/dist/ms/guide/cdn.html +0 -54
  501. package/docs/.vitepress/dist/ms/guide/cli.html +0 -68
  502. package/docs/.vitepress/dist/ms/guide/configuration.html +0 -103
  503. package/docs/.vitepress/dist/ms/guide/dark-mode.html +0 -93
  504. package/docs/.vitepress/dist/ms/guide/getting-started.html +0 -71
  505. package/docs/.vitepress/dist/ms/guide/index.html +0 -27
  506. package/docs/.vitepress/dist/ms/guide/natural-scale.html +0 -46
  507. package/docs/.vitepress/dist/ms/guide/philosophy.html +0 -31
  508. package/docs/.vitepress/dist/ms/guide/responsive.html +0 -81
  509. package/docs/.vitepress/dist/ms/guide/states.html +0 -101
  510. package/docs/.vitepress/dist/ms/guide/tri-attribute.html +0 -69
  511. package/docs/.vitepress/dist/ms/index.html +0 -31
  512. package/docs/.vitepress/dist/ms/reference/breakpoints.html +0 -72
  513. package/docs/.vitepress/dist/ms/reference/colors.html +0 -41
  514. package/docs/.vitepress/dist/ms/reference/layout.html +0 -37
  515. package/docs/.vitepress/dist/ms/reference/space.html +0 -48
  516. package/docs/.vitepress/dist/ms/reference/spacing.html +0 -56
  517. package/docs/.vitepress/dist/ms/reference/visual.html +0 -46
  518. package/docs/.vitepress/dist/reference/breakpoints.html +0 -72
  519. package/docs/.vitepress/dist/reference/colors.html +0 -41
  520. package/docs/.vitepress/dist/reference/layout.html +0 -37
  521. package/docs/.vitepress/dist/reference/space.html +0 -48
  522. package/docs/.vitepress/dist/reference/spacing.html +0 -56
  523. package/docs/.vitepress/dist/reference/visual.html +0 -46
  524. package/docs/.vitepress/dist/vp-icons.css +0 -1
package/docs/.vitepress/dist/assets/ms_index.md.Bmo9il08.lean.js DELETED
@@ -1 +0,0 @@
1
- import{_ as i,c as t,o as s,ae as n}from"./chunks/framework.I305HrzY.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"home","hero":{"name":"SenangStart CSS","text":"Enjin CSS Niat Nan Utama","tagline":"Cakap Manusia. Kompil ke Logik.","image":{"src":"https://senangstart.com/img/use_senangstart.svg","alt":"SenangStart CSS"},"actions":[{"theme":"brand","text":"Bermula","link":"/ms/guide/getting-started"},{"theme":"alt","text":"Lihat di GitHub","link":"https://github.com/bookklik-technologies/senangstart-css"}]},"features":[{"icon":"🧠","title":"Bahasa Semula Jadi","details":"Guna tiny, small, medium, big, giant, vast — perkataan yang anda sudah tahu. Tak perlu hafal px-4, px-8, px-16."},{"icon":"🎯","title":"Pengasingan Tanggungjawab","details":"layout untuk struktur, space untuk saiz, visual untuk penampilan. Bersih, semantik, mudah diselenggara."},{"icon":"🤖","title":"Mesra AI","details":"Menghasilkan fail konteks untuk LLM. Cakap \\"ketatkan\\" dan AI tahu untuk kurangkan jarak."},{"icon":"⚡","title":"Pilihan Tanpa Bina","details":"Guna CDN JIT runtime untuk stail serta-merta. Tiada langkah bina diperlukan untuk prototaip."},{"icon":"📱","title":"Responsif Secara Rekaan","details":"Titik Henti mobile-first dengan prefiks intuitif seperti mob:, tab:, lap:, desk:."},{"icon":"🎨","title":"Boleh Disesuaikan Sepenuhnya","details":"Tindih ganti mana-mana skala, tambah warna tersuai, lanjutkan tema untuk padankan jenama anda."}]},"headers":[],"relativePath":"ms/index.md","filePath":"ms/index.md"}'),e={name:"ms/index.md"};function l(p,a,k,h,r,d){return s(),t("div",null,[...a[0]||(a[0]=[n("",3)])])}const g=i(e,[["render",l]]);export{u as __pageData,g as default};
package/docs/.vitepress/dist/assets/ms_reference_breakpoints.md.DR7i_--b.js DELETED
@@ -1,48 +0,0 @@
1
- import{_ as i,c as a,o as n,ae as t}from"./chunks/framework.I305HrzY.js";const g=JSON.parse('{"title":"Rujukan Titik Henti","description":"","frontmatter":{},"headers":[],"relativePath":"ms/reference/breakpoints.md","filePath":"ms/reference/breakpoints.md"}'),l={name:"ms/reference/breakpoints.md"};function h(p,s,e,k,d,E){return n(),a("div",null,[...s[0]||(s[0]=[t(`<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>
2
- <span class="line"></span>
3
- <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@media</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">min-width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">480</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) { </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* mob: */</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
4
- <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@media</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">min-width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">768</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) { </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* tab: */</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
5
- <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@media</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">min-width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1024</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) { </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* lap: */</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
6
- <span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@media</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">min-width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1280</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) { </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/* desk: */</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span></code></pre></div><h2 id="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>
7
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Padding progresif</span></span>
8
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="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>
9
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Column pada mudah alih, row pada tablet+</span></span>
10
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
11
- <span class="line"></span>
12
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">nav</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;hidden tab:flex&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
13
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Tersembunyi pada mudah alih, kelihatan pada tablet+</span></span>
14
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">nav</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="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>
15
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Tajuk responsif</span></span>
16
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">h1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="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>
17
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- - Mudah alih: small padding --&gt;</span></span>
18
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- - Tablet dan ke atas: medium padding --&gt;</span></span>
19
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- - Laptop dan ke atas: big padding --&gt;</span></span>
20
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p:small tab:p:medium lap:p:big&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
21
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Kandungan</span></span>
22
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="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>
23
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> theme: {</span></span>
24
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> screens: {</span></span>
25
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;mob&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;480px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
26
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;tab&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;768px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
27
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;lap&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;1024px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
28
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;desk&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;1280px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
29
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;wide&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;1536px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Tambah lebih lebar</span></span>
30
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;ultra&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;1920px&#39;</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Tambah ultra-wide</span></span>
31
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
32
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
33
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>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>
34
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Padding skrin besar</span></span>
35
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="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>
36
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;block tab:hidden&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;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>
37
- <span class="line"></span>
38
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- Desktop sahaja --&gt;</span></span>
39
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;hidden lap:block&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;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>
40
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;grid&quot;</span></span>
41
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;g:small tab:g:medium&quot;</span></span>
42
- <span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;grid-template-columns: 1fr; </span></span>
43
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @media (min-width: 768px) { grid-template-columns: repeat(2, 1fr); }&quot;</span></span>
44
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
45
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Kad...</span></span>
46
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="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>
47
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Kontena di tengah dengan padding responsif</span></span>
48
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div>`,29)])])}const o=i(l,[["render",h]]);export{g as __pageData,o as default};
package/docs/.vitepress/dist/assets/ms_reference_breakpoints.md.DR7i_--b.lean.js DELETED
@@ -1 +0,0 @@
1
- import{_ as i,c as a,o as n,ae as t}from"./chunks/framework.I305HrzY.js";const g=JSON.parse('{"title":"Rujukan Titik Henti","description":"","frontmatter":{},"headers":[],"relativePath":"ms/reference/breakpoints.md","filePath":"ms/reference/breakpoints.md"}'),l={name:"ms/reference/breakpoints.md"};function h(p,s,e,k,d,E){return n(),a("div",null,[...s[0]||(s[0]=[t("",29)])])}const o=i(l,[["render",h]]);export{g as __pageData,o as default};
package/docs/.vitepress/dist/assets/ms_reference_colors.md.06ZYiMcJ.js DELETED
@@ -1,17 +0,0 @@
1
- import{_ as a,c as s,o as p,ae as t}from"./chunks/framework.I305HrzY.js";const h=JSON.parse('{"title":"Rujukan Warna","description":"","frontmatter":{},"headers":[],"relativePath":"ms/reference/colors.md","filePath":"ms/reference/colors.md"}'),r={name:"ms/reference/colors.md"};function n(i,d,o,e,l,g){return p(),s("div",null,[...d[0]||(d[0]=[t(`<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>
2
- <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>
3
- <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>
4
- <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>
5
- <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>
6
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> 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>
7
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> 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>
8
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> 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>
9
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> theme: {</span></span>
10
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> colors: {</span></span>
11
- <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>
12
- <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>
13
- <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>
14
- <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>
15
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
16
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
17
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="semantic-usage" tabindex="-1">Semantic Usage <a class="header-anchor" href="#semantic-usage" aria-label="Permalink to &quot;Semantic Usage&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Color</th><th>Recommended Use</th></tr></thead><tbody><tr><td><code>primary</code></td><td>Main actions, links, highlights</td></tr><tr><td><code>success</code></td><td>Positive feedback, confirmations</td></tr><tr><td><code>warning</code></td><td>Cautions, important notices</td></tr><tr><td><code>danger</code></td><td>Errors, destructive actions</td></tr><tr><td><code>grey</code></td><td>Secondary text, borders</td></tr><tr><td><code>dark</code></td><td>Primary text, headings</td></tr><tr><td><code>light</code></td><td>Backgrounds, subtle fills</td></tr></tbody></table>`,25)])])}const k=a(r,[["render",n]]);export{h as __pageData,k as default};
package/docs/.vitepress/dist/assets/ms_reference_colors.md.06ZYiMcJ.lean.js DELETED
@@ -1 +0,0 @@
1
- import{_ as a,c as s,o as p,ae as t}from"./chunks/framework.I305HrzY.js";const h=JSON.parse('{"title":"Rujukan Warna","description":"","frontmatter":{},"headers":[],"relativePath":"ms/reference/colors.md","filePath":"ms/reference/colors.md"}'),r={name:"ms/reference/colors.md"};function n(i,d,o,e,l,g){return p(),s("div",null,[...d[0]||(d[0]=[t("",25)])])}const k=a(r,[["render",n]]);export{h as __pageData,k as default};
package/docs/.vitepress/dist/assets/ms_reference_layout.md.NGL6A5SR.js DELETED
@@ -1,13 +0,0 @@
1
- import{_ as t,c as s,o as a,ae as e}from"./chunks/framework.I305HrzY.js";const E=JSON.parse('{"title":"Rujukan layout","description":"","frontmatter":{},"headers":[],"relativePath":"ms/reference/layout.md","filePath":"ms/reference/layout.md"}'),d={name:"ms/reference/layout.md"};function l(n,i,h,k,p,o){return a(),s("div",null,[...i[0]||(i[0]=[e(`<h1 id="rujukan-layout" tabindex="-1">Rujukan layout <a class="header-anchor" href="#rujukan-layout" aria-label="Permalink to &quot;Rujukan layout&quot;">​</a></h1><p>Atribusi <code>layout</code> mengawal struktur, kedudukan, dan aliran.</p><h2 id="paparan" tabindex="-1">Paparan <a class="header-anchor" href="#paparan" aria-label="Permalink to &quot;Paparan&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Nilai</th><th>Output CSS</th></tr></thead><tbody><tr><td><code>flex</code></td><td><code>display: flex</code></td></tr><tr><td><code>grid</code></td><td><code>display: grid</code></td></tr><tr><td><code>block</code></td><td><code>display: block</code></td></tr><tr><td><code>inline</code></td><td><code>display: inline-block</code></td></tr><tr><td><code>hidden</code></td><td><code>display: none</code></td></tr></tbody></table><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Kontena Flexbox&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
2
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;grid&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Kontena Grid&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
3
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;hidden&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Elemen tersembunyi&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="arah-flex" tabindex="-1">Arah Flex <a class="header-anchor" href="#arah-flex" aria-label="Permalink to &quot;Arah Flex&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Nilai</th><th>Output CSS</th></tr></thead><tbody><tr><td><code>row</code></td><td><code>flex-direction: row</code></td></tr><tr><td><code>col</code></td><td><code>flex-direction: column</code></td></tr><tr><td><code>row-reverse</code></td><td><code>flex-direction: row-reverse</code></td></tr><tr><td><code>col-reverse</code></td><td><code>flex-direction: column-reverse</code></td></tr></tbody></table><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex row&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Horizontal&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
4
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex col&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Menegak&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="penjajaran" tabindex="-1">Penjajaran <a class="header-anchor" href="#penjajaran" aria-label="Permalink to &quot;Penjajaran&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Nilai</th><th>Output CSS</th></tr></thead><tbody><tr><td><code>center</code></td><td><code>justify-content: center; align-items: center</code></td></tr><tr><td><code>start</code></td><td><code>justify-content: flex-start; align-items: flex-start</code></td></tr><tr><td><code>end</code></td><td><code>justify-content: flex-end; align-items: flex-end</code></td></tr><tr><td><code>between</code></td><td><code>justify-content: space-between</code></td></tr><tr><td><code>around</code></td><td><code>justify-content: space-around</code></td></tr><tr><td><code>evenly</code></td><td><code>justify-content: space-evenly</code></td></tr></tbody></table><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex center&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Di tengah&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
5
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex between&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Jarak antara&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="flex-wrap" tabindex="-1">Flex Wrap <a class="header-anchor" href="#flex-wrap" aria-label="Permalink to &quot;Flex Wrap&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Nilai</th><th>Output CSS</th></tr></thead><tbody><tr><td><code>wrap</code></td><td><code>flex-wrap: wrap</code></td></tr><tr><td><code>nowrap</code></td><td><code>flex-wrap: nowrap</code></td></tr></tbody></table><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex wrap&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Flex yang melipat&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="kedudukan" tabindex="-1">Kedudukan <a class="header-anchor" href="#kedudukan" aria-label="Permalink to &quot;Kedudukan&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Nilai</th><th>Output CSS</th></tr></thead><tbody><tr><td><code>relative</code></td><td><code>position: relative</code></td></tr><tr><td><code>absolute</code></td><td><code>position: absolute</code></td></tr><tr><td><code>fixed</code></td><td><code>position: fixed</code></td></tr><tr><td><code>sticky</code></td><td><code>position: sticky</code></td></tr></tbody></table><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">nav</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;fixed&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Nav fixed&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">nav</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
6
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;sticky&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Elemen sticky&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="z-index" tabindex="-1">Z-Index <a class="header-anchor" href="#z-index" aria-label="Permalink to &quot;Z-Index&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Nilai</th><th>Output CSS</th></tr></thead><tbody><tr><td><code>z:base</code></td><td><code>z-index: 0</code></td></tr><tr><td><code>z:low</code></td><td><code>z-index: 10</code></td></tr><tr><td><code>z:mid</code></td><td><code>z-index: 50</code></td></tr><tr><td><code>z:high</code></td><td><code>z-index: 100</code></td></tr><tr><td><code>z:top</code></td><td><code>z-index: 9999</code></td></tr></tbody></table><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">nav</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;fixed z:top&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Sentiasa di atas&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">nav</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
7
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;absolute z:high&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Z-index tinggi&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="overflow" tabindex="-1">Overflow <a class="header-anchor" href="#overflow" aria-label="Permalink to &quot;Overflow&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Nilai</th><th>Output CSS</th></tr></thead><tbody><tr><td><code>overflow:hidden</code></td><td><code>overflow: hidden</code></td></tr><tr><td><code>overflow:auto</code></td><td><code>overflow: auto</code></td></tr><tr><td><code>overflow:scroll</code></td><td><code>overflow: scroll</code></td></tr></tbody></table><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;overflow:hidden&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Kandungan terpotong&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="menggabungkan-nilai" tabindex="-1">Menggabungkan Nilai <a class="header-anchor" href="#menggabungkan-nilai" aria-label="Permalink to &quot;Menggabungkan Nilai&quot;">​</a></h2><p>Gabungkan pelbagai nilai layout dengan ruang:</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;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex col center wrap&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
8
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Flexbox menegak, di tengah, melipat</span></span>
9
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
10
- <span class="line"></span>
11
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">nav</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex between fixed z:top&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
12
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Nav fixed dengan space-between</span></span>
13
- <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>`,26)])])}const c=t(d,[["render",l]]);export{E as __pageData,c as default};
package/docs/.vitepress/dist/assets/ms_reference_layout.md.NGL6A5SR.lean.js DELETED
@@ -1 +0,0 @@
1
- import{_ as t,c as s,o as a,ae as e}from"./chunks/framework.I305HrzY.js";const E=JSON.parse('{"title":"Rujukan layout","description":"","frontmatter":{},"headers":[],"relativePath":"ms/reference/layout.md","filePath":"ms/reference/layout.md"}'),d={name:"ms/reference/layout.md"};function l(n,i,h,k,p,o){return a(),s("div",null,[...i[0]||(i[0]=[e("",26)])])}const c=t(d,[["render",l]]);export{E as __pageData,c as default};
package/docs/.vitepress/dist/assets/ms_reference_space.md.BG5YQ-09.js DELETED
@@ -1,24 +0,0 @@
1
- import{_ as i,c as a,o as t,ae as h}from"./chunks/framework.I305HrzY.js";const o=JSON.parse('{"title":"Rujukan space","description":"","frontmatter":{},"headers":[],"relativePath":"ms/reference/space.md","filePath":"ms/reference/space.md"}'),e={name:"ms/reference/space.md"};function n(d,s,l,p,k,r){return t(),a("div",null,[...s[0]||(s[0]=[h(`<h1 id="rujukan-space" tabindex="-1">Rujukan space <a class="header-anchor" href="#rujukan-space" aria-label="Permalink to &quot;Rujukan space&quot;">​</a></h1><p>Atribusi <code>space</code> mengawal saiz dan jarak.</p><h2 id="sintaksis" tabindex="-1">Sintaksis <a class="header-anchor" href="#sintaksis" aria-label="Permalink to &quot;Sintaksis&quot;">​</a></h2><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>[breakpoint]:[property]:[scale]</span></span></code></pre></div><p><strong>Titik Henti:</strong> <code>mob:</code>, <code>tab:</code>, <code>lap:</code>, <code>desk:</code></p><p><strong>Nilai skala:</strong> <code>none</code>, <code>tiny</code>, <code>small</code>, <code>medium</code>, <code>big</code>, <code>giant</code>, <code>vast</code></p><h2 id="padding" tabindex="-1">Padding <a class="header-anchor" href="#padding" aria-label="Permalink to &quot;Padding&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Property</th><th>Output CSS</th></tr></thead><tbody><tr><td><code>p</code></td><td><code>padding</code> (semua sisi)</td></tr><tr><td><code>p-t</code></td><td><code>padding-top</code></td></tr><tr><td><code>p-r</code></td><td><code>padding-right</code></td></tr><tr><td><code>p-b</code></td><td><code>padding-bottom</code></td></tr><tr><td><code>p-l</code></td><td><code>padding-left</code></td></tr><tr><td><code>p-x</code></td><td><code>padding-left</code> + <code>padding-right</code></td></tr><tr><td><code>p-y</code></td><td><code>padding-top</code> + <code>padding-bottom</code></td></tr></tbody></table><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p:medium&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Semua sisi&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
2
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p-x:big p-y:small&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Horizontal/menegak&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
3
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p-t:tiny p-b:giant&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Atas dan bawah&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="margin" tabindex="-1">Margin <a class="header-anchor" href="#margin" aria-label="Permalink to &quot;Margin&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Property</th><th>Output CSS</th></tr></thead><tbody><tr><td><code>m</code></td><td><code>margin</code> (semua sisi)</td></tr><tr><td><code>m-t</code></td><td><code>margin-top</code></td></tr><tr><td><code>m-r</code></td><td><code>margin-right</code></td></tr><tr><td><code>m-b</code></td><td><code>margin-bottom</code></td></tr><tr><td><code>m-l</code></td><td><code>margin-left</code></td></tr><tr><td><code>m-x</code></td><td><code>margin-left</code> + <code>margin-right</code></td></tr><tr><td><code>m-y</code></td><td><code>margin-top</code> + <code>margin-bottom</code></td></tr></tbody></table><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;m:medium&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Semua sisi&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
4
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;m-b:big&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Margin bawah&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
5
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;m-x:auto&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Tengah secara horizontal&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="gap" tabindex="-1">Gap <a class="header-anchor" href="#gap" aria-label="Permalink to &quot;Gap&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Property</th><th>Output CSS</th></tr></thead><tbody><tr><td><code>g</code></td><td><code>gap</code> (flex/grid)</td></tr><tr><td><code>g-x</code></td><td><code>column-gap</code></td></tr><tr><td><code>g-y</code></td><td><code>row-gap</code></td></tr></tbody></table><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;g:small&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Gap kecil&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
6
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;grid&quot;</span><span style="--shiki-light:#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-x:big g-y:small&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Gap berbeza&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="saiz" tabindex="-1">Saiz <a class="header-anchor" href="#saiz" aria-label="Permalink to &quot;Saiz&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Property</th><th>Output CSS</th></tr></thead><tbody><tr><td><code>w</code></td><td><code>width</code></td></tr><tr><td><code>h</code></td><td><code>height</code></td></tr><tr><td><code>min-w</code></td><td><code>min-width</code></td></tr><tr><td><code>max-w</code></td><td><code>max-width</code></td></tr><tr><td><code>min-h</code></td><td><code>min-height</code></td></tr><tr><td><code>max-h</code></td><td><code>max-height</code></td></tr></tbody></table><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;w:[100%] h:[400px]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Saiz eksplisit&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
7
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;max-w:[1200px]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Kontena max width&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
8
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;min-h:[100vh]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;Tinggi penuh viewport&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="nilai-arbitrari-escape-hatch" tabindex="-1">Nilai Arbitrari (Escape Hatch) <a class="header-anchor" href="#nilai-arbitrari-escape-hatch" aria-label="Permalink to &quot;Nilai Arbitrari (Escape Hatch)&quot;">​</a></h2><p>Guna kurungan <code>[value]</code> untuk nilai spesifik:</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;w:[350px]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;350 piksel&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
9
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;h:[50vh]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;50% tinggi viewport&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
10
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p:[20px_40px]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;20px menegak, 40px horizontal&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
11
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;m-t:[5rem]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;5rem margin atas&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="contoh-responsif" tabindex="-1">Contoh Responsif <a class="header-anchor" href="#contoh-responsif" aria-label="Permalink to &quot;Contoh Responsif&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:#6A737D;--shiki-dark:#6A737D;">&lt;!-- Padding progresif --&gt;</span></span>
12
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">section</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 desk:p:giant&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
13
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Membesar dengan saiz skrin</span></span>
14
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">section</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
15
- <span class="line"></span>
16
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- Lebar responsif --&gt;</span></span>
17
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;w:[100%] tab:w:[50%] lap:w:[33%]&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
18
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Penuh → separuh → satu pertiga</span></span>
19
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
20
- <span class="line"></span>
21
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- Gap responsif --&gt;</span></span>
22
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;g:small tab:g:medium lap:g:big&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
23
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Gap yang membesar</span></span>
24
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="rujukan-skala" tabindex="-1">Rujukan Skala <a class="header-anchor" href="#rujukan-skala" aria-label="Permalink to &quot;Rujukan Skala&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Kata Kunci</th><th>Nilai Lalai</th></tr></thead><tbody><tr><td><code>none</code></td><td>0px</td></tr><tr><td><code>tiny</code></td><td>4px</td></tr><tr><td><code>small</code></td><td>8px</td></tr><tr><td><code>medium</code></td><td>16px</td></tr><tr><td><code>big</code></td><td>32px</td></tr><tr><td><code>giant</code></td><td>64px</td></tr><tr><td><code>vast</code></td><td>128px</td></tr></tbody></table>`,25)])])}const g=i(e,[["render",n]]);export{o as __pageData,g as default};
package/docs/.vitepress/dist/assets/ms_reference_space.md.BG5YQ-09.lean.js DELETED
@@ -1 +0,0 @@
1
- import{_ as i,c as a,o as t,ae as h}from"./chunks/framework.I305HrzY.js";const o=JSON.parse('{"title":"Rujukan space","description":"","frontmatter":{},"headers":[],"relativePath":"ms/reference/space.md","filePath":"ms/reference/space.md"}'),e={name:"ms/reference/space.md"};function n(d,s,l,p,k,r){return t(),a("div",null,[...s[0]||(s[0]=[h("",25)])])}const g=i(e,[["render",n]]);export{o as __pageData,g as default};
package/docs/.vitepress/dist/assets/ms_reference_spacing.md.XmXLLPOZ.js DELETED
@@ -1,32 +0,0 @@
1
- import{_ as a,c as i,o as n,ae as t}from"./chunks/framework.I305HrzY.js";const g=JSON.parse('{"title":"Rujukan Jarak","description":"","frontmatter":{},"headers":[],"relativePath":"ms/reference/spacing.md","filePath":"ms/reference/spacing.md"}'),l={name:"ms/reference/spacing.md"};function p(h,s,k,e,d,E){return n(),i("div",null,[...s[0]||(s[0]=[t(`<h1 id="rujukan-jarak" tabindex="-1">Rujukan Jarak <a class="header-anchor" href="#rujukan-jarak" aria-label="Permalink to &quot;Rujukan Jarak&quot;">​</a></h1><p>Rujukan lengkap untuk skala jarak.</p><h2 id="skala-lalai" tabindex="-1">Skala Lalai <a class="header-anchor" href="#skala-lalai" aria-label="Permalink to &quot;Skala Lalai&quot;">​</a></h2><table tabindex="0"><thead><tr><th>Kata Kunci</th><th>Nilai</th><th>Kes Penggunaan</th></tr></thead><tbody><tr><td><code>none</code></td><td>0px</td><td>Reset jarak</td></tr><tr><td><code>tiny</code></td><td>4px</td><td>Sempadan, offset kecil</td></tr><tr><td><code>small</code></td><td>8px</td><td>Kumpulkan item berkaitan</td></tr><tr><td><code>medium</code></td><td>16px</td><td>Lalai standard</td></tr><tr><td><code>big</code></td><td>32px</td><td>Pisahkan seksyen</td></tr><tr><td><code>giant</code></td><td>64px</td><td>Bahagian layout</td></tr><tr><td><code>vast</code></td><td>128px</td><td>Seksyen hero</td></tr></tbody></table><h2 id="variable-css" tabindex="-1">Variable CSS <a class="header-anchor" href="#variable-css" aria-label="Permalink to &quot;Variable CSS&quot;">​</a></h2><p>Skala jarak menghasilkan variable CSS ini:</p><div class="language-css vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">:root</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
2
- <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --s-none</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
3
- <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --s-tiny</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">4</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
4
- <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --s-small</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">8</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
5
- <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --s-medium</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">16</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
6
- <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --s-big</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">32</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
7
- <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --s-giant</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">64</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
8
- <span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --s-vast</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">128</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
9
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="contoh-penggunaan" tabindex="-1">Contoh Penggunaan <a class="header-anchor" href="#contoh-penggunaan" aria-label="Permalink to &quot;Contoh Penggunaan&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:#6A737D;--shiki-dark:#6A737D;">&lt;!-- Padding --&gt;</span></span>
10
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p:medium&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;16px padding semua sisi&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
11
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;p-x:big&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;32px padding horizontal&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
12
- <span class="line"></span>
13
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- Margin --&gt;</span></span>
14
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;m:small&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;8px margin semua sisi&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
15
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;m-b:giant&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;64px margin bawah&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
16
- <span class="line"></span>
17
- <span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">&lt;!-- Gap --&gt;</span></span>
18
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> layout</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;flex&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> space</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;g:small&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;8px gap antara item&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>Tindih ganti 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>
19
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> theme: {</span></span>
20
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> spacing: {</span></span>
21
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;tiny&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;2px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Tindih ganti sedia ada</span></span>
22
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;huge&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;256px&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// Tambah baru</span></span>
23
- <span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;massive&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;512px&#39;</span><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // Tambah baru</span></span>
24
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
25
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
26
- <span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="panduan-visual" tabindex="-1">Panduan Visual <a class="header-anchor" href="#panduan-visual" aria-label="Permalink to &quot;Panduan Visual&quot;">​</a></h2><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span>none │ (tiada ruang)</span></span>
27
- <span class="line"><span>tiny │▌ 4px</span></span>
28
- <span class="line"><span>small │██ 8px</span></span>
29
- <span class="line"><span>medium │████ 16px</span></span>
30
- <span class="line"><span>big │████████ 32px</span></span>
31
- <span class="line"><span>giant │████████████████ 64px</span></span>
32
- <span class="line"><span>vast │████████████████████████████████ 128px</span></span></code></pre></div>`,14)])])}const c=a(l,[["render",p]]);export{g as __pageData,c as default};
package/docs/.vitepress/dist/assets/ms_reference_spacing.md.XmXLLPOZ.lean.js DELETED
@@ -1 +0,0 @@
1
- import{_ as a,c as i,o as n,ae as t}from"./chunks/framework.I305HrzY.js";const g=JSON.parse('{"title":"Rujukan Jarak","description":"","frontmatter":{},"headers":[],"relativePath":"ms/reference/spacing.md","filePath":"ms/reference/spacing.md"}'),l={name:"ms/reference/spacing.md"};function p(h,s,k,e,d,E){return n(),i("div",null,[...s[0]||(s[0]=[t("",14)])])}const c=a(l,[["render",p]]);export{g as __pageData,c as default};