@bookklik/senangstart-css 0.1.8 → 0.2.0

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 (341) hide show
  1. package/README.md +38 -0
  2. package/dist/senangstart-css.js +2269 -1955
  3. package/dist/senangstart-css.min.js +141 -1479
  4. package/docs/.vitepress/config.js +2 -0
  5. package/docs/guide/responsive.md +25 -0
  6. package/docs/index.md +1 -1
  7. package/docs/ms/guide/responsive.md +25 -0
  8. package/docs/ms/index.md +1 -1
  9. package/docs/ms/reference/breakpoints.md +23 -0
  10. package/docs/ms/reference/layout/align-content.md +57 -4
  11. package/docs/ms/reference/layout/align-items.md +81 -4
  12. package/docs/ms/reference/layout/align-self.md +25 -4
  13. package/docs/ms/reference/layout/aspect-ratio.md +27 -8
  14. package/docs/ms/reference/layout/border-collapse.md +81 -4
  15. package/docs/ms/reference/layout/border-spacing.md +43 -8
  16. package/docs/ms/reference/layout/box-sizing.md +21 -4
  17. package/docs/ms/reference/layout/caption-side.md +69 -4
  18. package/docs/ms/reference/layout/columns.md +21 -4
  19. package/docs/ms/reference/layout/container.md +21 -4
  20. package/docs/ms/reference/layout/display.md +39 -7
  21. package/docs/ms/reference/layout/flex-basis.md +29 -8
  22. package/docs/ms/reference/layout/flex-direction.md +81 -4
  23. package/docs/ms/reference/layout/flex-items.md +51 -4
  24. package/docs/ms/reference/layout/flex-wrap.md +55 -4
  25. package/docs/ms/reference/layout/flex.md +54 -7
  26. package/docs/ms/reference/layout/float-clear.md +23 -4
  27. package/docs/ms/reference/layout/grid-auto-flow.md +57 -4
  28. package/docs/ms/reference/layout/grid-auto-sizing.md +25 -4
  29. package/docs/ms/reference/layout/grid-column-span.md +59 -4
  30. package/docs/ms/reference/layout/grid-columns.md +61 -4
  31. package/docs/ms/reference/layout/grid-row-span.md +29 -4
  32. package/docs/ms/reference/layout/grid-rows.md +31 -4
  33. package/docs/ms/reference/layout/inset.md +56 -7
  34. package/docs/ms/reference/layout/isolation.md +21 -4
  35. package/docs/ms/reference/layout/justify-content.md +81 -4
  36. package/docs/ms/reference/layout/justify-items.md +25 -4
  37. package/docs/ms/reference/layout/justify-self.md +25 -4
  38. package/docs/ms/reference/layout/object-fit.md +57 -4
  39. package/docs/ms/reference/layout/object-position.md +29 -8
  40. package/docs/ms/reference/layout/order.md +53 -4
  41. package/docs/ms/reference/layout/overflow.md +45 -4
  42. package/docs/ms/reference/layout/overscroll.md +21 -4
  43. package/docs/ms/reference/layout/place-content.md +23 -4
  44. package/docs/ms/reference/layout/place-items.md +25 -4
  45. package/docs/ms/reference/layout/place-self.md +25 -4
  46. package/docs/ms/reference/layout/position.md +47 -4
  47. package/docs/ms/reference/layout/shorthand-alignment.md +47 -4
  48. package/docs/ms/reference/layout/table-layout.md +69 -4
  49. package/docs/ms/reference/layout/visibility.md +25 -4
  50. package/docs/ms/reference/layout/z-index.md +27 -4
  51. package/docs/ms/reference/space/gap.md +71 -7
  52. package/docs/ms/reference/space/height.md +61 -7
  53. package/docs/ms/reference/space/margin.md +61 -7
  54. package/docs/ms/reference/space/padding.md +65 -7
  55. package/docs/ms/reference/space/width.md +61 -7
  56. package/docs/ms/reference/visual/accent-color.md +29 -8
  57. package/docs/ms/reference/visual/animation-builtin.md +29 -8
  58. package/docs/ms/reference/visual/animation-delay.md +25 -8
  59. package/docs/ms/reference/visual/animation-direction.md +25 -4
  60. package/docs/ms/reference/visual/animation-duration.md +27 -8
  61. package/docs/ms/reference/visual/animation-fill.md +25 -4
  62. package/docs/ms/reference/visual/animation-iteration.md +23 -4
  63. package/docs/ms/reference/visual/animation-play.md +23 -4
  64. package/docs/ms/reference/visual/appearance.md +23 -4
  65. package/docs/ms/reference/visual/backdrop-blur.md +29 -8
  66. package/docs/ms/reference/visual/backdrop-brightness.md +29 -8
  67. package/docs/ms/reference/visual/backdrop-contrast.md +29 -8
  68. package/docs/ms/reference/visual/backdrop-grayscale.md +27 -8
  69. package/docs/ms/reference/visual/backdrop-hue-rotate.md +29 -8
  70. package/docs/ms/reference/visual/backdrop-invert.md +27 -8
  71. package/docs/ms/reference/visual/backdrop-opacity.md +29 -8
  72. package/docs/ms/reference/visual/backdrop-saturate.md +29 -8
  73. package/docs/ms/reference/visual/backdrop-sepia.md +27 -8
  74. package/docs/ms/reference/visual/background-attachment.md +23 -4
  75. package/docs/ms/reference/visual/background-blend-mode.md +25 -4
  76. package/docs/ms/reference/visual/background-clip.md +21 -4
  77. package/docs/ms/reference/visual/background-color.md +33 -8
  78. package/docs/ms/reference/visual/background-image.md +27 -8
  79. package/docs/ms/reference/visual/background-origin.md +25 -4
  80. package/docs/ms/reference/visual/background-position.md +29 -8
  81. package/docs/ms/reference/visual/background-repeat.md +25 -4
  82. package/docs/ms/reference/visual/background-size.md +29 -8
  83. package/docs/ms/reference/visual/blend-modes.md +23 -4
  84. package/docs/ms/reference/visual/border-radius.md +36 -4
  85. package/docs/ms/reference/visual/border-style.md +25 -4
  86. package/docs/ms/reference/visual/border-width.md +29 -8
  87. package/docs/ms/reference/visual/border.md +56 -7
  88. package/docs/ms/reference/visual/box-shadow.md +34 -4
  89. package/docs/ms/reference/visual/caret-color.md +25 -8
  90. package/docs/ms/reference/visual/color-scheme.md +23 -4
  91. package/docs/ms/reference/visual/cursor.md +25 -4
  92. package/docs/ms/reference/visual/field-sizing.md +23 -4
  93. package/docs/ms/reference/visual/fill.md +29 -8
  94. package/docs/ms/reference/visual/filter-blur.md +29 -8
  95. package/docs/ms/reference/visual/filter-brightness.md +29 -8
  96. package/docs/ms/reference/visual/filter-contrast.md +29 -8
  97. package/docs/ms/reference/visual/filter-drop-shadow.md +29 -8
  98. package/docs/ms/reference/visual/filter-grayscale.md +29 -8
  99. package/docs/ms/reference/visual/filter-hue-rotate.md +29 -8
  100. package/docs/ms/reference/visual/filter-invert.md +27 -8
  101. package/docs/ms/reference/visual/filter-saturate.md +29 -8
  102. package/docs/ms/reference/visual/filter-sepia.md +29 -8
  103. package/docs/ms/reference/visual/font-family.md +25 -4
  104. package/docs/ms/reference/visual/font-smoothing.md +23 -4
  105. package/docs/ms/reference/visual/font-style.md +23 -4
  106. package/docs/ms/reference/visual/font-variant-numeric.md +23 -4
  107. package/docs/ms/reference/visual/font-weight.md +35 -4
  108. package/docs/ms/reference/visual/forced-color-adjust.md +23 -4
  109. package/docs/ms/reference/visual/hyphens.md +25 -4
  110. package/docs/ms/reference/visual/letter-spacing.md +29 -8
  111. package/docs/ms/reference/visual/line-clamp.md +29 -8
  112. package/docs/ms/reference/visual/line-height.md +29 -8
  113. package/docs/ms/reference/visual/list-style.md +25 -4
  114. package/docs/ms/reference/visual/mask.md +25 -8
  115. package/docs/ms/reference/visual/opacity.md +27 -4
  116. package/docs/ms/reference/visual/outline.md +25 -8
  117. package/docs/ms/reference/visual/pointer-events.md +23 -4
  118. package/docs/ms/reference/visual/resize.md +27 -4
  119. package/docs/ms/reference/visual/scroll-behavior.md +23 -4
  120. package/docs/ms/reference/visual/scroll-margin.md +25 -8
  121. package/docs/ms/reference/visual/scroll-padding.md +25 -8
  122. package/docs/ms/reference/visual/scroll-snap-align.md +25 -4
  123. package/docs/ms/reference/visual/scroll-snap-stop.md +23 -4
  124. package/docs/ms/reference/visual/scroll-snap-type.md +25 -4
  125. package/docs/ms/reference/visual/state-prefixes.md +21 -4
  126. package/docs/ms/reference/visual/stroke-width.md +29 -8
  127. package/docs/ms/reference/visual/stroke.md +27 -8
  128. package/docs/ms/reference/visual/text-alignment.md +25 -4
  129. package/docs/ms/reference/visual/text-color.md +31 -8
  130. package/docs/ms/reference/visual/text-decoration.md +23 -4
  131. package/docs/ms/reference/visual/text-indent.md +25 -8
  132. package/docs/ms/reference/visual/text-overflow.md +21 -4
  133. package/docs/ms/reference/visual/text-shadow.md +25 -8
  134. package/docs/ms/reference/visual/text-size.md +41 -7
  135. package/docs/ms/reference/visual/text-transform.md +25 -4
  136. package/docs/ms/reference/visual/text-wrap.md +25 -4
  137. package/docs/ms/reference/visual/touch-action.md +25 -4
  138. package/docs/ms/reference/visual/transform-backface.md +23 -4
  139. package/docs/ms/reference/visual/transform-origin.md +27 -8
  140. package/docs/ms/reference/visual/transform-perspective-origin.md +25 -8
  141. package/docs/ms/reference/visual/transform-perspective.md +25 -8
  142. package/docs/ms/reference/visual/transform-rotate.md +29 -8
  143. package/docs/ms/reference/visual/transform-scale.md +29 -8
  144. package/docs/ms/reference/visual/transform-skew.md +29 -8
  145. package/docs/ms/reference/visual/transform-style.md +23 -4
  146. package/docs/ms/reference/visual/transform-translate.md +29 -8
  147. package/docs/ms/reference/visual/transition-delay.md +25 -8
  148. package/docs/ms/reference/visual/transition-duration.md +27 -8
  149. package/docs/ms/reference/visual/transition-property.md +21 -4
  150. package/docs/ms/reference/visual/transition-timing.md +29 -8
  151. package/docs/ms/reference/visual/typography-keywords.md +27 -4
  152. package/docs/ms/reference/visual/user-select.md +23 -4
  153. package/docs/ms/reference/visual/vertical-align.md +25 -4
  154. package/docs/ms/reference/visual/whitespace.md +25 -4
  155. package/docs/ms/reference/visual/will-change.md +23 -4
  156. package/docs/ms/reference/visual/word-break.md +25 -4
  157. package/docs/public/assets/senangstart-css-logo.svg +1 -0
  158. package/docs/reference/breakpoints.md +23 -0
  159. package/docs/reference/layout/align-content.md +57 -4
  160. package/docs/reference/layout/align-items.md +81 -4
  161. package/docs/reference/layout/align-self.md +25 -4
  162. package/docs/reference/layout/aspect-ratio.md +27 -8
  163. package/docs/reference/layout/border-collapse.md +81 -4
  164. package/docs/reference/layout/border-spacing.md +43 -8
  165. package/docs/reference/layout/box-sizing.md +21 -4
  166. package/docs/reference/layout/caption-side.md +69 -4
  167. package/docs/reference/layout/columns.md +21 -4
  168. package/docs/reference/layout/container.md +21 -4
  169. package/docs/reference/layout/display.md +39 -7
  170. package/docs/reference/layout/flex-basis.md +29 -8
  171. package/docs/reference/layout/flex-direction.md +81 -4
  172. package/docs/reference/layout/flex-items.md +51 -4
  173. package/docs/reference/layout/flex-wrap.md +55 -4
  174. package/docs/reference/layout/flex.md +54 -7
  175. package/docs/reference/layout/float-clear.md +23 -4
  176. package/docs/reference/layout/grid-auto-flow.md +57 -4
  177. package/docs/reference/layout/grid-auto-sizing.md +25 -4
  178. package/docs/reference/layout/grid-column-span.md +59 -4
  179. package/docs/reference/layout/grid-columns.md +61 -4
  180. package/docs/reference/layout/grid-row-span.md +29 -4
  181. package/docs/reference/layout/grid-rows.md +31 -4
  182. package/docs/reference/layout/inset.md +56 -7
  183. package/docs/reference/layout/isolation.md +21 -4
  184. package/docs/reference/layout/justify-content.md +81 -4
  185. package/docs/reference/layout/justify-items.md +25 -4
  186. package/docs/reference/layout/justify-self.md +25 -4
  187. package/docs/reference/layout/object-fit.md +57 -4
  188. package/docs/reference/layout/object-position.md +29 -8
  189. package/docs/reference/layout/order.md +53 -4
  190. package/docs/reference/layout/overflow.md +45 -4
  191. package/docs/reference/layout/overscroll.md +21 -4
  192. package/docs/reference/layout/place-content.md +23 -4
  193. package/docs/reference/layout/place-items.md +25 -4
  194. package/docs/reference/layout/place-self.md +25 -4
  195. package/docs/reference/layout/position.md +47 -4
  196. package/docs/reference/layout/shorthand-alignment.md +47 -4
  197. package/docs/reference/layout/table-layout.md +69 -4
  198. package/docs/reference/layout/visibility.md +25 -4
  199. package/docs/reference/layout/z-index.md +27 -4
  200. package/docs/reference/space/gap.md +71 -7
  201. package/docs/reference/space/height.md +61 -7
  202. package/docs/reference/space/margin.md +61 -7
  203. package/docs/reference/space/padding.md +65 -7
  204. package/docs/reference/space/width.md +61 -7
  205. package/docs/reference/visual/accent-color.md +29 -8
  206. package/docs/reference/visual/animation-builtin.md +29 -8
  207. package/docs/reference/visual/animation-delay.md +25 -8
  208. package/docs/reference/visual/animation-direction.md +25 -4
  209. package/docs/reference/visual/animation-duration.md +27 -8
  210. package/docs/reference/visual/animation-fill.md +25 -4
  211. package/docs/reference/visual/animation-iteration.md +23 -4
  212. package/docs/reference/visual/animation-play.md +23 -4
  213. package/docs/reference/visual/appearance.md +23 -4
  214. package/docs/reference/visual/backdrop-blur.md +29 -8
  215. package/docs/reference/visual/backdrop-brightness.md +29 -8
  216. package/docs/reference/visual/backdrop-contrast.md +29 -8
  217. package/docs/reference/visual/backdrop-grayscale.md +27 -8
  218. package/docs/reference/visual/backdrop-hue-rotate.md +29 -8
  219. package/docs/reference/visual/backdrop-invert.md +27 -8
  220. package/docs/reference/visual/backdrop-opacity.md +29 -8
  221. package/docs/reference/visual/backdrop-saturate.md +29 -8
  222. package/docs/reference/visual/backdrop-sepia.md +27 -8
  223. package/docs/reference/visual/background-attachment.md +23 -4
  224. package/docs/reference/visual/background-blend-mode.md +25 -4
  225. package/docs/reference/visual/background-clip.md +21 -4
  226. package/docs/reference/visual/background-color.md +33 -8
  227. package/docs/reference/visual/background-image.md +27 -8
  228. package/docs/reference/visual/background-origin.md +25 -4
  229. package/docs/reference/visual/background-position.md +29 -8
  230. package/docs/reference/visual/background-repeat.md +25 -4
  231. package/docs/reference/visual/background-size.md +29 -8
  232. package/docs/reference/visual/blend-modes.md +23 -4
  233. package/docs/reference/visual/border-radius.md +36 -4
  234. package/docs/reference/visual/border-style.md +25 -4
  235. package/docs/reference/visual/border-width.md +29 -8
  236. package/docs/reference/visual/border.md +56 -7
  237. package/docs/reference/visual/box-shadow.md +34 -4
  238. package/docs/reference/visual/caret-color.md +25 -8
  239. package/docs/reference/visual/color-scheme.md +23 -4
  240. package/docs/reference/visual/cursor.md +25 -4
  241. package/docs/reference/visual/field-sizing.md +23 -4
  242. package/docs/reference/visual/fill.md +29 -8
  243. package/docs/reference/visual/filter-blur.md +29 -8
  244. package/docs/reference/visual/filter-brightness.md +29 -8
  245. package/docs/reference/visual/filter-contrast.md +29 -8
  246. package/docs/reference/visual/filter-drop-shadow.md +29 -8
  247. package/docs/reference/visual/filter-grayscale.md +29 -8
  248. package/docs/reference/visual/filter-hue-rotate.md +29 -8
  249. package/docs/reference/visual/filter-invert.md +27 -8
  250. package/docs/reference/visual/filter-saturate.md +29 -8
  251. package/docs/reference/visual/filter-sepia.md +29 -8
  252. package/docs/reference/visual/font-family.md +25 -4
  253. package/docs/reference/visual/font-smoothing.md +23 -4
  254. package/docs/reference/visual/font-style.md +23 -4
  255. package/docs/reference/visual/font-variant-numeric.md +23 -4
  256. package/docs/reference/visual/font-weight.md +35 -4
  257. package/docs/reference/visual/forced-color-adjust.md +23 -4
  258. package/docs/reference/visual/hyphens.md +25 -4
  259. package/docs/reference/visual/letter-spacing.md +29 -8
  260. package/docs/reference/visual/line-clamp.md +29 -8
  261. package/docs/reference/visual/line-height.md +29 -8
  262. package/docs/reference/visual/list-style.md +25 -4
  263. package/docs/reference/visual/mask.md +25 -8
  264. package/docs/reference/visual/opacity.md +27 -4
  265. package/docs/reference/visual/outline.md +25 -8
  266. package/docs/reference/visual/pointer-events.md +23 -4
  267. package/docs/reference/visual/resize.md +27 -4
  268. package/docs/reference/visual/scroll-behavior.md +23 -4
  269. package/docs/reference/visual/scroll-margin.md +25 -8
  270. package/docs/reference/visual/scroll-padding.md +25 -8
  271. package/docs/reference/visual/scroll-snap-align.md +25 -4
  272. package/docs/reference/visual/scroll-snap-stop.md +23 -4
  273. package/docs/reference/visual/scroll-snap-type.md +25 -4
  274. package/docs/reference/visual/state-prefixes.md +21 -4
  275. package/docs/reference/visual/stroke-width.md +29 -8
  276. package/docs/reference/visual/stroke.md +27 -8
  277. package/docs/reference/visual/text-alignment.md +25 -4
  278. package/docs/reference/visual/text-color.md +31 -8
  279. package/docs/reference/visual/text-decoration.md +23 -4
  280. package/docs/reference/visual/text-indent.md +25 -8
  281. package/docs/reference/visual/text-overflow.md +21 -4
  282. package/docs/reference/visual/text-shadow.md +25 -8
  283. package/docs/reference/visual/text-size.md +41 -7
  284. package/docs/reference/visual/text-transform.md +25 -4
  285. package/docs/reference/visual/text-wrap.md +25 -4
  286. package/docs/reference/visual/touch-action.md +25 -4
  287. package/docs/reference/visual/transform-backface.md +23 -4
  288. package/docs/reference/visual/transform-origin.md +27 -8
  289. package/docs/reference/visual/transform-perspective-origin.md +25 -8
  290. package/docs/reference/visual/transform-perspective.md +25 -8
  291. package/docs/reference/visual/transform-rotate.md +29 -8
  292. package/docs/reference/visual/transform-scale.md +29 -8
  293. package/docs/reference/visual/transform-skew.md +29 -8
  294. package/docs/reference/visual/transform-style.md +23 -4
  295. package/docs/reference/visual/transform-translate.md +29 -8
  296. package/docs/reference/visual/transition-delay.md +25 -8
  297. package/docs/reference/visual/transition-duration.md +27 -8
  298. package/docs/reference/visual/transition-property.md +21 -4
  299. package/docs/reference/visual/transition-timing.md +29 -8
  300. package/docs/reference/visual/typography-keywords.md +27 -4
  301. package/docs/reference/visual/user-select.md +23 -4
  302. package/docs/reference/visual/vertical-align.md +25 -4
  303. package/docs/reference/visual/whitespace.md +25 -4
  304. package/docs/reference/visual/will-change.md +23 -4
  305. package/docs/reference/visual/word-break.md +25 -4
  306. package/package.json +2 -1
  307. package/playground/jit-tw-mix-test.html +238 -0
  308. package/playground/tw-convertor.html +696 -0
  309. package/scripts/build-dist.js +34 -29
  310. package/scripts/bundle-jit.js +45 -0
  311. package/scripts/convert-tailwind.js +759 -0
  312. package/scripts/generate-docs.js +65 -16
  313. package/src/cdn/jit.js +313 -102
  314. package/src/cli/commands/build.js +14 -6
  315. package/src/cli/commands/dev.js +28 -10
  316. package/src/compiler/generators/css.js +187 -28
  317. package/src/compiler/parser.js +23 -10
  318. package/src/compiler/tokenizer.js +19 -137
  319. package/src/config/defaults.js +45 -18
  320. package/src/core/constants.js +427 -0
  321. package/src/core/tokenizer-core.js +233 -0
  322. package/src/definitions/layout-alignment.js +210 -0
  323. package/src/definitions/layout-flex.js +155 -0
  324. package/src/definitions/layout-grid.js +134 -0
  325. package/src/definitions/layout-positioning.js +64 -0
  326. package/src/definitions/layout-table.js +129 -0
  327. package/src/definitions/layout-utilities.js +164 -0
  328. package/src/definitions/space.js +172 -0
  329. package/src/definitions/visual-backgrounds.js +231 -0
  330. package/src/definitions/visual-borders.js +66 -0
  331. package/src/definitions/visual-filters.js +111 -0
  332. package/src/definitions/visual-interactivity.js +159 -0
  333. package/src/definitions/visual-svg.js +41 -0
  334. package/src/definitions/visual-transform3d.js +74 -0
  335. package/src/definitions/visual-transforms.js +69 -0
  336. package/src/definitions/visual-transitions.js +144 -0
  337. package/src/definitions/visual-typography.js +214 -0
  338. package/src/definitions/visual.js +306 -1
  339. package/tests/integration/compiler.test.js +63 -2
  340. package/tests/unit/convert-tailwind.test.js +324 -0
  341. package/tests/unit/security.test.js +206 -0
package/docs/reference/visual/background-origin.md CHANGED
@@ -21,11 +21,32 @@ visual="bg-origin:[value]"
21
21
  <div visual="bg-origin:content">Content origin</div>
22
22
  ```
23
23
 
24
- ## Responsive
24
+ ## Preview
25
+
26
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
27
+
28
+ ### Background Origin
29
+
30
+ <div layout="flex col" space="g:medium">
31
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="bg-origin:content"</code> - Set background positioning origin</p>
32
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
33
+ <div space="p:small" visual="bg:primary text:white rounded:small">border</div>
34
+ <div space="p:small" visual="bg:primary text:white rounded:small">padding</div>
35
+ <div space="p:small" visual="bg:primary text:white rounded:small">content</div>
36
+ </div>
37
+ </div>
38
+
39
+ <details>
40
+ <summary>View Code</summary>
25
41
 
26
42
  ```html
27
- <!-- Responsive example -->
28
- <div visual="mob:... tab:... lap:...">
29
- Responsive content
43
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
44
+ <div space="p:small" visual="bg:primary text:white rounded:small">border</div>
45
+ <div space="p:small" visual="bg:primary text:white rounded:small">padding</div>
46
+ <div space="p:small" visual="bg:primary text:white rounded:small">content</div>
30
47
  </div>
31
48
  ```
49
+
50
+ </details>
51
+
52
+ </div>
package/docs/reference/visual/background-position.md CHANGED
@@ -27,19 +27,40 @@ visual="bg-pos:[value]"
27
27
  <div visual="bg-pos:center">Centered background</div>
28
28
  ```
29
29
 
30
- ## Arbitrary Values
30
+ ## Preview
31
31
 
32
- Supports custom values using bracket syntax:
32
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
33
+
34
+ ### Background Position
35
+
36
+ <div layout="flex col" space="g:medium">
37
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="bg-pos:center"</code> - Position background image</p>
38
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
39
+ <div space="p:small" visual="bg:primary text:white rounded:small">center</div>
40
+ <div space="p:small" visual="bg:primary text:white rounded:small">top</div>
41
+ <div space="p:small" visual="bg:primary text:white rounded:small">bottom</div>
42
+ </div>
43
+ </div>
44
+
45
+ <details>
46
+ <summary>View Code</summary>
33
47
 
34
48
  ```html
35
- <div visual="background:[custom-value]">Custom</div>
49
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
50
+ <div space="p:small" visual="bg:primary text:white rounded:small">center</div>
51
+ <div space="p:small" visual="bg:primary text:white rounded:small">top</div>
52
+ <div space="p:small" visual="bg:primary text:white rounded:small">bottom</div>
53
+ </div>
36
54
  ```
37
55
 
38
- ## Responsive
56
+ </details>
39
57
 
40
- ```html
41
- <!-- Responsive example -->
42
- <div visual="mob:... tab:... lap:...">
43
- Responsive content
44
58
  </div>
59
+
60
+ ## Arbitrary Values
61
+
62
+ Supports custom values using bracket syntax:
63
+
64
+ ```html
65
+ <div visual="background:[custom-value]">Custom</div>
45
66
  ```
package/docs/reference/visual/background-repeat.md CHANGED
@@ -24,11 +24,32 @@ visual="bg-repeat:[value]"
24
24
  <div visual="bg-repeat:no-repeat">Single background</div>
25
25
  ```
26
26
 
27
- ## Responsive
27
+ ## Preview
28
+
29
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
30
+
31
+ ### Background Repeat
32
+
33
+ <div layout="flex col" space="g:medium">
34
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="bg-repeat:no-repeat"</code> - Control background tiling</p>
35
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
36
+ <div space="p:small" visual="bg:primary text:white rounded:small">repeat</div>
37
+ <div space="p:small" visual="bg:primary text:white rounded:small">no-repeat</div>
38
+ <div space="p:small" visual="bg:primary text:white rounded:small">repeat-x</div>
39
+ </div>
40
+ </div>
41
+
42
+ <details>
43
+ <summary>View Code</summary>
28
44
 
29
45
  ```html
30
- <!-- Responsive example -->
31
- <div visual="mob:... tab:... lap:...">
32
- Responsive content
46
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
47
+ <div space="p:small" visual="bg:primary text:white rounded:small">repeat</div>
48
+ <div space="p:small" visual="bg:primary text:white rounded:small">no-repeat</div>
49
+ <div space="p:small" visual="bg:primary text:white rounded:small">repeat-x</div>
33
50
  </div>
34
51
  ```
52
+
53
+ </details>
54
+
55
+ </div>
package/docs/reference/visual/background-size.md CHANGED
@@ -21,19 +21,40 @@ visual="bg-size:[value]"
21
21
  <div visual="bg-size:cover">Full coverage background</div>
22
22
  ```
23
23
 
24
- ## Arbitrary Values
24
+ ## Preview
25
25
 
26
- Supports custom values using bracket syntax:
26
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
27
+
28
+ ### Background Size
29
+
30
+ <div layout="flex col" space="g:medium">
31
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="bg-size:cover"</code> - Scale background image</p>
32
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
33
+ <div space="p:small" visual="bg:primary text:white rounded:small">auto</div>
34
+ <div space="p:small" visual="bg:primary text:white rounded:small">cover</div>
35
+ <div space="p:small" visual="bg:primary text:white rounded:small">contain</div>
36
+ </div>
37
+ </div>
38
+
39
+ <details>
40
+ <summary>View Code</summary>
27
41
 
28
42
  ```html
29
- <div visual="background:[custom-value]">Custom</div>
43
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
44
+ <div space="p:small" visual="bg:primary text:white rounded:small">auto</div>
45
+ <div space="p:small" visual="bg:primary text:white rounded:small">cover</div>
46
+ <div space="p:small" visual="bg:primary text:white rounded:small">contain</div>
47
+ </div>
30
48
  ```
31
49
 
32
- ## Responsive
50
+ </details>
33
51
 
34
- ```html
35
- <!-- Responsive example -->
36
- <div visual="mob:... tab:... lap:...">
37
- Responsive content
38
52
  </div>
53
+
54
+ ## Arbitrary Values
55
+
56
+ Supports custom values using bracket syntax:
57
+
58
+ ```html
59
+ <div visual="background:[custom-value]">Custom</div>
39
60
  ```
package/docs/reference/visual/blend-modes.md CHANGED
@@ -24,11 +24,30 @@ visual="mix-blend:[value]"
24
24
  <div visual="mix-blend:multiply">Multiply blend</div>
25
25
  ```
26
26
 
27
- ## Responsive
27
+ ## Preview
28
+
29
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
30
+
31
+ ### Mix Blend Mode
32
+
33
+ <div layout="flex col" space="g:medium">
34
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="mix-blend:multiply"</code> - Blend element with content behind it</p>
35
+ <div layout="flex" space="g:medium p:medium" visual="rounded:medium" style="background: linear-gradient(135deg, #ef4444, #f97316);">
36
+ <div space="p:small" visual="text:white rounded:small" style="mix-blend-mode: multiply; background: #3b82f6;">multiply</div>
37
+ <div space="p:small" visual="text:white rounded:small" style="mix-blend-mode: screen; background: #3b82f6;">screen</div>
38
+ </div>
39
+ </div>
40
+
41
+ <details>
42
+ <summary>View Code</summary>
28
43
 
29
44
  ```html
30
- <!-- Responsive example -->
31
- <div visual="mob:... tab:... lap:...">
32
- Responsive content
45
+ <div layout="flex" space="g:medium p:medium" visual="rounded:medium" style="background: linear-gradient(135deg, #ef4444, #f97316);">
46
+ <div space="p:small" visual="text:white rounded:small" style="mix-blend-mode: multiply; background: #3b82f6;">multiply</div>
47
+ <div space="p:small" visual="text:white rounded:small" style="mix-blend-mode: screen; background: #3b82f6;">screen</div>
33
48
  </div>
34
49
  ```
50
+
51
+ </details>
52
+
53
+ </div>
package/docs/reference/visual/border-radius.md CHANGED
@@ -24,11 +24,43 @@ visual="rounded:[value]"
24
24
  <div visual="rounded:round">Pill shape</div>
25
25
  ```
26
26
 
27
- ## Responsive
27
+ ## Preview
28
+
29
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
30
+
31
+ ### Border Radius
32
+
33
+ <div layout="flex col" space="g:medium">
34
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="rounded:medium"</code> - Round element corners from subtle to pill-shaped</p>
35
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
36
+ <div space="p:small" visual="bg:primary text:white" style="border-radius: 0;">none</div>
37
+ <div space="p:small" visual="bg:primary text:white" style="border-radius: 0.25rem;">small</div>
38
+ <div space="p:small" visual="bg:primary text:white" style="border-radius: 0.5rem;">medium</div>
39
+ <div space="p:small" visual="bg:primary text:white" style="border-radius: 9999px;">round</div>
40
+ </div>
41
+ </div>
42
+
43
+ <details>
44
+ <summary>View Code</summary>
28
45
 
29
46
  ```html
30
- <!-- Responsive example -->
31
- <div visual="mob:... tab:... lap:...">
32
- Responsive content
47
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
48
+ <div space="p:small" visual="bg:primary text:white" style="border-radius: 0;">none</div>
49
+ <div space="p:small" visual="bg:primary text:white" style="border-radius: 0.25rem;">small</div>
50
+ <div space="p:small" visual="bg:primary text:white" style="border-radius: 0.5rem;">medium</div>
51
+ <div space="p:small" visual="bg:primary text:white" style="border-radius: 9999px;">round</div>
33
52
  </div>
34
53
  ```
54
+
55
+ </details>
56
+
57
+ </div>
58
+
59
+ ## Notes
60
+
61
+ > [!TIP]
62
+ > **Tailwind Scale Support**
63
+ >
64
+ > Use `tw-` prefix to access Tailwind radius scale: `rounded:tw-lg` (0.5rem), `rounded:tw-2xl` (1rem)
65
+ >
66
+ > [Reference](https://tailwindcss.com/docs/border-radius)
package/docs/reference/visual/border-style.md CHANGED
@@ -23,11 +23,32 @@ visual="border-style:[value]"
23
23
  <div visual="border:gray-300 border-style:dashed">Dashed border</div>
24
24
  ```
25
25
 
26
- ## Responsive
26
+ ## Preview
27
+
28
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
29
+
30
+ ### Border Styles
31
+
32
+ <div layout="flex col" space="g:medium">
33
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="border-style:dashed"</code> - Different border style options</p>
34
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
35
+ <div space="p:medium" visual="border:neutral-500 border-w:regular border-style:solid rounded:small bg:white dark:bg:neutral-800">solid</div>
36
+ <div space="p:medium" visual="border:neutral-500 border-w:regular border-style:dashed rounded:small bg:white dark:bg:neutral-800">dashed</div>
37
+ <div space="p:medium" visual="border:neutral-500 border-w:regular border-style:dotted rounded:small bg:white dark:bg:neutral-800">dotted</div>
38
+ </div>
39
+ </div>
40
+
41
+ <details>
42
+ <summary>View Code</summary>
27
43
 
28
44
  ```html
29
- <!-- Responsive example -->
30
- <div visual="mob:... tab:... lap:...">
31
- Responsive content
45
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
46
+ <div space="p:medium" visual="border:neutral-500 border-w:regular border-style:solid rounded:small bg:white dark:bg:neutral-800">solid</div>
47
+ <div space="p:medium" visual="border:neutral-500 border-w:regular border-style:dashed rounded:small bg:white dark:bg:neutral-800">dashed</div>
48
+ <div space="p:medium" visual="border:neutral-500 border-w:regular border-style:dotted rounded:small bg:white dark:bg:neutral-800">dotted</div>
32
49
  </div>
33
50
  ```
51
+
52
+ </details>
53
+
54
+ </div>
package/docs/reference/visual/border-width.md CHANGED
@@ -26,19 +26,40 @@ visual="border-w:[value]" | visual="border-{t|b|l|r|x|y}-w:[value]"
26
26
  <div visual="border-x:primary border-x-w:thin">Horizontal borders</div>
27
27
  ```
28
28
 
29
- ## Arbitrary Values
29
+ ## Preview
30
30
 
31
- Supports custom values using bracket syntax:
31
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
32
+
33
+ ### Border Widths
34
+
35
+ <div layout="flex col" space="g:medium">
36
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="border-w:regular"</code> - Different border width options</p>
37
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
38
+ <div space="p:medium" visual="border:neutral-500 border-w:thin rounded:small bg:white dark:bg:neutral-800">thin</div>
39
+ <div space="p:medium" visual="border:neutral-500 border-w:regular rounded:small bg:white dark:bg:neutral-800">regular</div>
40
+ <div space="p:medium" visual="border:neutral-500 border-w:thick rounded:small bg:white dark:bg:neutral-800">thick</div>
41
+ </div>
42
+ </div>
43
+
44
+ <details>
45
+ <summary>View Code</summary>
32
46
 
33
47
  ```html
34
- <div visual="border:[custom-value]">Custom</div>
48
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
49
+ <div space="p:medium" visual="border:neutral-500 border-w:thin rounded:small bg:white dark:bg:neutral-800">thin</div>
50
+ <div space="p:medium" visual="border:neutral-500 border-w:regular rounded:small bg:white dark:bg:neutral-800">regular</div>
51
+ <div space="p:medium" visual="border:neutral-500 border-w:thick rounded:small bg:white dark:bg:neutral-800">thick</div>
52
+ </div>
35
53
  ```
36
54
 
37
- ## Responsive
55
+ </details>
38
56
 
39
- ```html
40
- <!-- Responsive example -->
41
- <div visual="mob:... tab:... lap:...">
42
- Responsive content
43
57
  </div>
58
+
59
+ ## Arbitrary Values
60
+
61
+ Supports custom values using bracket syntax:
62
+
63
+ ```html
64
+ <div visual="border:[custom-value]">Custom</div>
44
65
  ```
package/docs/reference/visual/border.md CHANGED
@@ -25,19 +25,68 @@ visual="border:[color]" | visual="border-{t|b|l|r|x|y}:[color]"
25
25
  <div visual="border-y:gray-300 border-y-w:thin">Top & bottom</div>
26
26
  ```
27
27
 
28
- ## Arbitrary Values
28
+ ## Preview
29
29
 
30
- Supports custom values using bracket syntax:
30
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
31
+
32
+ ### Border Colors
33
+
34
+ <div layout="flex col" space="g:medium">
35
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="border:primary"</code> - Apply border with color on all sides</p>
36
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
37
+ <div space="p:medium" visual="border:primary border-w:regular rounded:small">primary</div>
38
+ <div space="p:medium" visual="border:danger border-w:regular rounded:small">danger</div>
39
+ <div space="p:medium" visual="border:neutral-400 border-w:regular rounded:small">neutral</div>
40
+ </div>
41
+ </div>
42
+
43
+ <details>
44
+ <summary>View Code</summary>
31
45
 
32
46
  ```html
33
- <div visual="border:[custom-value]">Custom</div>
47
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
48
+ <div space="p:medium" visual="border:primary border-w:regular rounded:small">primary</div>
49
+ <div space="p:medium" visual="border:danger border-w:regular rounded:small">danger</div>
50
+ <div space="p:medium" visual="border:neutral-400 border-w:regular rounded:small">neutral</div>
51
+ </div>
34
52
  ```
35
53
 
36
- ## Responsive
54
+ </details>
55
+
56
+ </div>
57
+
58
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
59
+
60
+ ### Directional Borders
61
+
62
+ <div layout="flex col" space="g:medium">
63
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="border-t:primary"</code> - Apply borders to specific sides</p>
64
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
65
+ <div space="p:medium" visual="border-t:primary border-t-w:regular bg:white dark:bg:neutral-800 rounded:small">top</div>
66
+ <div space="p:medium" visual="border-b:primary border-b-w:regular bg:white dark:bg:neutral-800 rounded:small">bottom</div>
67
+ <div space="p:medium" visual="border-l:primary border-l-w:regular bg:white dark:bg:neutral-800 rounded:small">left</div>
68
+ </div>
69
+ </div>
70
+
71
+ <details>
72
+ <summary>View Code</summary>
37
73
 
38
74
  ```html
39
- <!-- Responsive example -->
40
- <div visual="mob:... tab:... lap:...">
41
- Responsive content
75
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
76
+ <div space="p:medium" visual="border-t:primary border-t-w:regular bg:white dark:bg:neutral-800 rounded:small">top</div>
77
+ <div space="p:medium" visual="border-b:primary border-b-w:regular bg:white dark:bg:neutral-800 rounded:small">bottom</div>
78
+ <div space="p:medium" visual="border-l:primary border-l-w:regular bg:white dark:bg:neutral-800 rounded:small">left</div>
79
+ </div>
80
+ ```
81
+
82
+ </details>
83
+
42
84
  </div>
85
+
86
+ ## Arbitrary Values
87
+
88
+ Supports custom values using bracket syntax:
89
+
90
+ ```html
91
+ <div visual="border:[custom-value]">Custom</div>
43
92
  ```
package/docs/reference/visual/box-shadow.md CHANGED
@@ -23,11 +23,41 @@ visual="shadow:[value]"
23
23
  <div visual="shadow:medium">Card with shadow</div>
24
24
  ```
25
25
 
26
- ## Responsive
26
+ ## Preview
27
+
28
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
29
+
30
+ ### Box Shadow
31
+
32
+ <div layout="flex col" space="g:medium">
33
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="shadow:medium"</code> - Add elevation with shadows from subtle to dramatic</p>
34
+ <div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
35
+ <div space="p:small" visual="bg:white dark:bg:neutral-800 rounded:small" style="box-shadow: 0 1px 2px rgba(0,0,0,0.1);">small</div>
36
+ <div space="p:small" visual="bg:white dark:bg:neutral-800 rounded:small" style="box-shadow: 0 4px 6px rgba(0,0,0,0.1);">medium</div>
37
+ <div space="p:small" visual="bg:white dark:bg:neutral-800 rounded:small" style="box-shadow: 0 10px 15px rgba(0,0,0,0.15);">big</div>
38
+ </div>
39
+ </div>
40
+
41
+ <details>
42
+ <summary>View Code</summary>
27
43
 
28
44
  ```html
29
- <!-- Responsive example -->
30
- <div visual="mob:... tab:... lap:...">
31
- Responsive content
45
+ <div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
46
+ <div space="p:small" visual="bg:white dark:bg:neutral-800 rounded:small" style="box-shadow: 0 1px 2px rgba(0,0,0,0.1);">small</div>
47
+ <div space="p:small" visual="bg:white dark:bg:neutral-800 rounded:small" style="box-shadow: 0 4px 6px rgba(0,0,0,0.1);">medium</div>
48
+ <div space="p:small" visual="bg:white dark:bg:neutral-800 rounded:small" style="box-shadow: 0 10px 15px rgba(0,0,0,0.15);">big</div>
32
49
  </div>
33
50
  ```
51
+
52
+ </details>
53
+
54
+ </div>
55
+
56
+ ## Notes
57
+
58
+ > [!TIP]
59
+ > **Tailwind Scale Support**
60
+ >
61
+ > Use `tw-` prefix to access Tailwind shadow scale: `shadow:tw-md`, `shadow:tw-lg`, `shadow:tw-xl`
62
+ >
63
+ > [Reference](https://tailwindcss.com/docs/box-shadow)
package/docs/reference/visual/caret-color.md CHANGED
@@ -13,19 +13,36 @@ visual="caret:[color]"
13
13
  <input visual="caret:primary">
14
14
  ```
15
15
 
16
- ## Arbitrary Values
16
+ ## Preview
17
17
 
18
- Supports custom values using bracket syntax:
18
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
19
+
20
+ ### Caret Color
21
+
22
+ <div layout="flex col" space="g:medium">
23
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="caret:primary"</code> - Style the text cursor in input fields</p>
24
+ <div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
25
+ <input type="text" placeholder="Type here..." style="caret-color: #3b82f6; padding: 0.5rem; border: 1px solid #e5e7eb; border-radius: 0.25rem;">
26
+ </div>
27
+ </div>
28
+
29
+ <details>
30
+ <summary>View Code</summary>
19
31
 
20
32
  ```html
21
- <div visual="caret:[custom-value]">Custom</div>
33
+ <div space="p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
34
+ <input type="text" placeholder="Type here..." style="caret-color: #3b82f6; padding: 0.5rem; border: 1px solid #e5e7eb; border-radius: 0.25rem;">
35
+ </div>
22
36
  ```
23
37
 
24
- ## Responsive
38
+ </details>
25
39
 
26
- ```html
27
- <!-- Responsive example -->
28
- <div visual="mob:... tab:... lap:...">
29
- Responsive content
30
40
  </div>
41
+
42
+ ## Arbitrary Values
43
+
44
+ Supports custom values using bracket syntax:
45
+
46
+ ```html
47
+ <div visual="caret:[custom-value]">Custom</div>
31
48
  ```
package/docs/reference/visual/color-scheme.md CHANGED
@@ -21,11 +21,30 @@ visual="color-scheme:[value]"
21
21
  <html visual="color-scheme:dark">Dark mode</html>
22
22
  ```
23
23
 
24
- ## Responsive
24
+ ## Preview
25
+
26
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
27
+
28
+ ### Color Scheme
29
+
30
+ <div layout="flex col" space="g:medium">
31
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="color-scheme:dark"</code> - Set preferred color mode</p>
32
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
33
+ <div space="p:small" visual="bg:primary text:white rounded:small">light</div>
34
+ <div space="p:small" visual="bg:primary text:white rounded:small">dark</div>
35
+ </div>
36
+ </div>
37
+
38
+ <details>
39
+ <summary>View Code</summary>
25
40
 
26
41
  ```html
27
- <!-- Responsive example -->
28
- <div visual="mob:... tab:... lap:...">
29
- Responsive content
42
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
43
+ <div space="p:small" visual="bg:primary text:white rounded:small">light</div>
44
+ <div space="p:small" visual="bg:primary text:white rounded:small">dark</div>
30
45
  </div>
31
46
  ```
47
+
48
+ </details>
49
+
50
+ </div>
package/docs/reference/visual/cursor.md CHANGED
@@ -27,11 +27,32 @@ visual="cursor:[value]"
27
27
  <button visual="cursor:pointer">Clickable</button>
28
28
  ```
29
29
 
30
- ## Responsive
30
+ ## Preview
31
+
32
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
33
+
34
+ ### Cursor
35
+
36
+ <div layout="flex col" space="g:medium">
37
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="cursor:pointer"</code> - Change mouse cursor on hover</p>
38
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
39
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="cursor: pointer;">pointer</div>
40
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="cursor: wait;">wait</div>
41
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="cursor: not-allowed;">not-allowed</div>
42
+ </div>
43
+ </div>
44
+
45
+ <details>
46
+ <summary>View Code</summary>
31
47
 
32
48
  ```html
33
- <!-- Responsive example -->
34
- <div visual="mob:... tab:... lap:...">
35
- Responsive content
49
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
50
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="cursor: pointer;">pointer</div>
51
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="cursor: wait;">wait</div>
52
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="cursor: not-allowed;">not-allowed</div>
36
53
  </div>
37
54
  ```
55
+
56
+ </details>
57
+
58
+ </div>
package/docs/reference/visual/field-sizing.md CHANGED
@@ -20,11 +20,30 @@ visual="field-sizing:[value]"
20
20
  <textarea visual="field-sizing:content">Auto-grow textarea</textarea>
21
21
  ```
22
22
 
23
- ## Responsive
23
+ ## Preview
24
+
25
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
26
+
27
+ ### Field Sizing
28
+
29
+ <div layout="flex col" space="g:medium">
30
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="field-sizing:content"</code> - Grow field with content</p>
31
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
32
+ <div space="p:small" visual="bg:primary text:white rounded:small">fixed</div>
33
+ <div space="p:small" visual="bg:primary text:white rounded:small">content</div>
34
+ </div>
35
+ </div>
36
+
37
+ <details>
38
+ <summary>View Code</summary>
24
39
 
25
40
  ```html
26
- <!-- Responsive example -->
27
- <div visual="mob:... tab:... lap:...">
28
- Responsive content
41
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
42
+ <div space="p:small" visual="bg:primary text:white rounded:small">fixed</div>
43
+ <div space="p:small" visual="bg:primary text:white rounded:small">content</div>
29
44
  </div>
30
45
  ```
46
+
47
+ </details>
48
+
49
+ </div>