@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/backdrop-blur.md CHANGED
@@ -25,19 +25,40 @@ visual="backdrop-blur:[value]"
25
25
  <div visual="backdrop-blur:medium bg:[rgba(255,255,255,0.5)]">Frosted glass</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
+ ### Backdrop Blur
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="backdrop-blur:medium"</code> - Creates a frosted glass effect on content behind the element</p>
36
+ <div layout="relative" space="p:medium" visual="rounded:medium" style="background: linear-gradient(135deg, #3b82f6, #8b5cf6); min-height: 100px;">
37
+ <div layout="absolute" style="top: 50%; left: 50%; transform: translate(-50%, -50%); backdrop-filter: blur(8px); background: rgba(255,255,255,0.2); padding: 1rem; border-radius: 0.5rem;">
38
+ <span visual="text:white">Frosted Glass</span>
39
+ </div>
40
+ </div>
41
+ </div>
42
+
43
+ <details>
44
+ <summary>View Code</summary>
31
45
 
32
46
  ```html
33
- <div visual="backdrop:[custom-value]">Custom</div>
47
+ <div layout="relative" space="p:medium" visual="rounded:medium" style="background: linear-gradient(135deg, #3b82f6, #8b5cf6); min-height: 100px;">
48
+ <div layout="absolute" style="top: 50%; left: 50%; transform: translate(-50%, -50%); backdrop-filter: blur(8px); background: rgba(255,255,255,0.2); padding: 1rem; border-radius: 0.5rem;">
49
+ <span visual="text:white">Frosted Glass</span>
50
+ </div>
51
+ </div>
34
52
  ```
35
53
 
36
- ## Responsive
54
+ </details>
37
55
 
38
- ```html
39
- <!-- Responsive example -->
40
- <div visual="mob:... tab:... lap:...">
41
- Responsive content
42
56
  </div>
57
+
58
+ ## Arbitrary Values
59
+
60
+ Supports custom values using bracket syntax:
61
+
62
+ ```html
63
+ <div visual="backdrop:[custom-value]">Custom</div>
43
64
  ```
package/docs/reference/visual/backdrop-brightness.md CHANGED
@@ -23,19 +23,40 @@ visual="backdrop-brightness:[value]"
23
23
  <div visual="backdrop-brightness:dark">Darkened backdrop</div>
24
24
  ```
25
25
 
26
- ## Arbitrary Values
26
+ ## Preview
27
27
 
28
- Supports custom values using bracket syntax:
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
+ ### Backdrop Brightness
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="backdrop-brightness:dark"</code> - Dim or brighten the backdrop behind an overlay</p>
34
+ <div layout="flex" space="g:medium p:medium" visual="rounded:medium" style="background: linear-gradient(135deg, #f97316, #ef4444);">
35
+ <div space="p:small" visual="rounded:small text:white" style="backdrop-filter: brightness(0.5);">dim (50%)</div>
36
+ <div space="p:small" visual="rounded:small text:white" style="backdrop-filter: brightness(1);">normal</div>
37
+ <div space="p:small" visual="rounded:small text:white" style="backdrop-filter: brightness(1.5);">bright (150%)</div>
38
+ </div>
39
+ </div>
40
+
41
+ <details>
42
+ <summary>View Code</summary>
29
43
 
30
44
  ```html
31
- <div visual="backdrop:[custom-value]">Custom</div>
45
+ <div layout="flex" space="g:medium p:medium" visual="rounded:medium" style="background: linear-gradient(135deg, #f97316, #ef4444);">
46
+ <div space="p:small" visual="rounded:small text:white" style="backdrop-filter: brightness(0.5);">dim (50%)</div>
47
+ <div space="p:small" visual="rounded:small text:white" style="backdrop-filter: brightness(1);">normal</div>
48
+ <div space="p:small" visual="rounded:small text:white" style="backdrop-filter: brightness(1.5);">bright (150%)</div>
49
+ </div>
32
50
  ```
33
51
 
34
- ## Responsive
52
+ </details>
35
53
 
36
- ```html
37
- <!-- Responsive example -->
38
- <div visual="mob:... tab:... lap:...">
39
- Responsive content
40
54
  </div>
55
+
56
+ ## Arbitrary Values
57
+
58
+ Supports custom values using bracket syntax:
59
+
60
+ ```html
61
+ <div visual="backdrop:[custom-value]">Custom</div>
41
62
  ```
package/docs/reference/visual/backdrop-contrast.md CHANGED
@@ -23,19 +23,40 @@ visual="backdrop-contrast:[value]"
23
23
  <div visual="backdrop-contrast:high">High contrast backdrop</div>
24
24
  ```
25
25
 
26
- ## Arbitrary Values
26
+ ## Preview
27
27
 
28
- Supports custom values using bracket syntax:
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
+ ### Backdrop Contrast
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="backdrop-contrast:high"</code> - Adjust contrast behind element</p>
34
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
35
+ <div space="p:small" visual="bg:primary text:white rounded:small">low</div>
36
+ <div space="p:small" visual="bg:primary text:white rounded:small">normal</div>
37
+ <div space="p:small" visual="bg:primary text:white rounded:small">high</div>
38
+ </div>
39
+ </div>
40
+
41
+ <details>
42
+ <summary>View Code</summary>
29
43
 
30
44
  ```html
31
- <div visual="backdrop:[custom-value]">Custom</div>
45
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
46
+ <div space="p:small" visual="bg:primary text:white rounded:small">low</div>
47
+ <div space="p:small" visual="bg:primary text:white rounded:small">normal</div>
48
+ <div space="p:small" visual="bg:primary text:white rounded:small">high</div>
49
+ </div>
32
50
  ```
33
51
 
34
- ## Responsive
52
+ </details>
35
53
 
36
- ```html
37
- <!-- Responsive example -->
38
- <div visual="mob:... tab:... lap:...">
39
- Responsive content
40
54
  </div>
55
+
56
+ ## Arbitrary Values
57
+
58
+ Supports custom values using bracket syntax:
59
+
60
+ ```html
61
+ <div visual="backdrop:[custom-value]">Custom</div>
41
62
  ```
package/docs/reference/visual/backdrop-grayscale.md CHANGED
@@ -21,19 +21,38 @@ visual="backdrop-grayscale:[value]"
21
21
  <div visual="backdrop-grayscale:full">Grayscale backdrop</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
+ ### Backdrop Grayscale
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="backdrop-grayscale:full"</code> - Remove color from backdrop, creating a desaturated effect</p>
32
+ <div layout="flex" space="g:medium" visual="rounded:medium">
33
+ <div space="p:small" visual="rounded:small text:white" style="background: linear-gradient(135deg, #3b82f6, #10b981);">Original</div>
34
+ <div space="p:small" visual="rounded:small text:white" style="background: linear-gradient(135deg, #3b82f6, #10b981); filter: grayscale(100%);">Grayscale</div>
35
+ </div>
36
+ </div>
37
+
38
+ <details>
39
+ <summary>View Code</summary>
27
40
 
28
41
  ```html
29
- <div visual="backdrop:[custom-value]">Custom</div>
42
+ <div layout="flex" space="g:medium" visual="rounded:medium">
43
+ <div space="p:small" visual="rounded:small text:white" style="background: linear-gradient(135deg, #3b82f6, #10b981);">Original</div>
44
+ <div space="p:small" visual="rounded:small text:white" style="background: linear-gradient(135deg, #3b82f6, #10b981); filter: grayscale(100%);">Grayscale</div>
45
+ </div>
30
46
  ```
31
47
 
32
- ## Responsive
48
+ </details>
33
49
 
34
- ```html
35
- <!-- Responsive example -->
36
- <div visual="mob:... tab:... lap:...">
37
- Responsive content
38
50
  </div>
51
+
52
+ ## Arbitrary Values
53
+
54
+ Supports custom values using bracket syntax:
55
+
56
+ ```html
57
+ <div visual="backdrop:[custom-value]">Custom</div>
39
58
  ```
package/docs/reference/visual/backdrop-hue-rotate.md CHANGED
@@ -21,19 +21,40 @@ visual="backdrop-hue-rotate:[degrees]"
21
21
  <div visual="backdrop-hue-rotate:90">Rotated hue backdrop</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
+ ### Backdrop Hue Rotate
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="backdrop-hue-rotate:90"</code> - Rotate colors behind element</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">0°</div>
34
+ <div space="p:small" visual="bg:primary text:white rounded:small">90°</div>
35
+ <div space="p:small" visual="bg:primary text:white rounded:small">180°</div>
36
+ </div>
37
+ </div>
38
+
39
+ <details>
40
+ <summary>View Code</summary>
27
41
 
28
42
  ```html
29
- <div visual="backdrop:[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">0°</div>
45
+ <div space="p:small" visual="bg:primary text:white rounded:small">90°</div>
46
+ <div space="p:small" visual="bg:primary text:white rounded:small">180°</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="backdrop:[custom-value]">Custom</div>
39
60
  ```
package/docs/reference/visual/backdrop-invert.md CHANGED
@@ -21,19 +21,38 @@ visual="backdrop-invert:[value]"
21
21
  <div visual="backdrop-invert:full">Inverted backdrop</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
+ ### Backdrop Invert
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="backdrop-invert:full"</code> - Invert colors behind element</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">none</div>
34
+ <div space="p:small" visual="bg:primary text:white rounded:small">full</div>
35
+ </div>
36
+ </div>
37
+
38
+ <details>
39
+ <summary>View Code</summary>
27
40
 
28
41
  ```html
29
- <div visual="backdrop:[custom-value]">Custom</div>
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">none</div>
44
+ <div space="p:small" visual="bg:primary text:white rounded:small">full</div>
45
+ </div>
30
46
  ```
31
47
 
32
- ## Responsive
48
+ </details>
33
49
 
34
- ```html
35
- <!-- Responsive example -->
36
- <div visual="mob:... tab:... lap:...">
37
- Responsive content
38
50
  </div>
51
+
52
+ ## Arbitrary Values
53
+
54
+ Supports custom values using bracket syntax:
55
+
56
+ ```html
57
+ <div visual="backdrop:[custom-value]">Custom</div>
39
58
  ```
package/docs/reference/visual/backdrop-opacity.md CHANGED
@@ -21,19 +21,40 @@ visual="backdrop-opacity:[value]"
21
21
  <div visual="backdrop-opacity:50">Semi-transparent backdrop</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
+ ### Backdrop Opacity
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="backdrop-opacity:50"</code> - Control backdrop transparency</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">0</div>
34
+ <div space="p:small" visual="bg:primary text:white rounded:small">50</div>
35
+ <div space="p:small" visual="bg:primary text:white rounded:small">100</div>
36
+ </div>
37
+ </div>
38
+
39
+ <details>
40
+ <summary>View Code</summary>
27
41
 
28
42
  ```html
29
- <div visual="backdrop:[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">0</div>
45
+ <div space="p:small" visual="bg:primary text:white rounded:small">50</div>
46
+ <div space="p:small" visual="bg:primary text:white rounded:small">100</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="backdrop:[custom-value]">Custom</div>
39
60
  ```
package/docs/reference/visual/backdrop-saturate.md CHANGED
@@ -23,19 +23,40 @@ visual="backdrop-saturate:[value]"
23
23
  <div visual="backdrop-saturate:vivid">Vivid backdrop</div>
24
24
  ```
25
25
 
26
- ## Arbitrary Values
26
+ ## Preview
27
27
 
28
- Supports custom values using bracket syntax:
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
+ ### Backdrop Saturate
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="backdrop-saturate:vivid"</code> - Adjust saturation behind element</p>
34
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
35
+ <div space="p:small" visual="bg:primary text:white rounded:small">none</div>
36
+ <div space="p:small" visual="bg:primary text:white rounded:small">normal</div>
37
+ <div space="p:small" visual="bg:primary text:white rounded:small">vivid</div>
38
+ </div>
39
+ </div>
40
+
41
+ <details>
42
+ <summary>View Code</summary>
29
43
 
30
44
  ```html
31
- <div visual="backdrop:[custom-value]">Custom</div>
45
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
46
+ <div space="p:small" visual="bg:primary text:white rounded:small">none</div>
47
+ <div space="p:small" visual="bg:primary text:white rounded:small">normal</div>
48
+ <div space="p:small" visual="bg:primary text:white rounded:small">vivid</div>
49
+ </div>
32
50
  ```
33
51
 
34
- ## Responsive
52
+ </details>
35
53
 
36
- ```html
37
- <!-- Responsive example -->
38
- <div visual="mob:... tab:... lap:...">
39
- Responsive content
40
54
  </div>
55
+
56
+ ## Arbitrary Values
57
+
58
+ Supports custom values using bracket syntax:
59
+
60
+ ```html
61
+ <div visual="backdrop:[custom-value]">Custom</div>
41
62
  ```
package/docs/reference/visual/backdrop-sepia.md CHANGED
@@ -21,19 +21,38 @@ visual="backdrop-sepia:[value]"
21
21
  <div visual="backdrop-sepia:full">Vintage backdrop</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
+ ### Backdrop Sepia
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="backdrop-sepia:full"</code> - Apply vintage sepia tone to the backdrop</p>
32
+ <div layout="flex" space="g:medium" visual="rounded:medium">
33
+ <div space="p:small" visual="rounded:small text:white" style="background: linear-gradient(135deg, #3b82f6, #10b981);">Original</div>
34
+ <div space="p:small" visual="rounded:small text:white" style="background: linear-gradient(135deg, #3b82f6, #10b981); filter: sepia(100%);">Sepia</div>
35
+ </div>
36
+ </div>
37
+
38
+ <details>
39
+ <summary>View Code</summary>
27
40
 
28
41
  ```html
29
- <div visual="backdrop:[custom-value]">Custom</div>
42
+ <div layout="flex" space="g:medium" visual="rounded:medium">
43
+ <div space="p:small" visual="rounded:small text:white" style="background: linear-gradient(135deg, #3b82f6, #10b981);">Original</div>
44
+ <div space="p:small" visual="rounded:small text:white" style="background: linear-gradient(135deg, #3b82f6, #10b981); filter: sepia(100%);">Sepia</div>
45
+ </div>
30
46
  ```
31
47
 
32
- ## Responsive
48
+ </details>
33
49
 
34
- ```html
35
- <!-- Responsive example -->
36
- <div visual="mob:... tab:... lap:...">
37
- Responsive content
38
50
  </div>
51
+
52
+ ## Arbitrary Values
53
+
54
+ Supports custom values using bracket syntax:
55
+
56
+ ```html
57
+ <div visual="backdrop:[custom-value]">Custom</div>
39
58
  ```
package/docs/reference/visual/background-attachment.md CHANGED
@@ -21,11 +21,30 @@ visual="bg-attachment:[value]"
21
21
  <div visual="bg-attachment:fixed">Parallax effect</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 Attachment
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-attachment:fixed"</code> - Control how background scrolls</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">fixed</div>
34
+ <div space="p:small" visual="bg:primary text:white rounded:small">scroll</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">fixed</div>
44
+ <div space="p:small" visual="bg:primary text:white rounded:small">scroll</div>
30
45
  </div>
31
46
  ```
47
+
48
+ </details>
49
+
50
+ </div>
package/docs/reference/visual/background-blend-mode.md CHANGED
@@ -24,11 +24,32 @@ visual="bg-blend:[value]"
24
24
  <div visual="bg-blend:multiply">Multiplied 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 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="bg-blend:multiply"</code> - Blend backgrounds together</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">multiply</div>
37
+ <div space="p:small" visual="bg:primary text:white rounded:small">screen</div>
38
+ <div space="p:small" visual="bg:primary text:white rounded:small">overlay</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">multiply</div>
48
+ <div space="p:small" visual="bg:primary text:white rounded:small">screen</div>
49
+ <div space="p:small" visual="bg:primary text:white rounded:small">overlay</div>
33
50
  </div>
34
51
  ```
52
+
53
+ </details>
54
+
55
+ </div>
package/docs/reference/visual/background-clip.md CHANGED
@@ -22,11 +22,28 @@ visual="bg-clip:[value]"
22
22
  <div visual="bg-clip:text text:transparent bg:gradient">Gradient text</div>
23
23
  ```
24
24
 
25
- ## Responsive
25
+ ## Preview
26
+
27
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
28
+
29
+ ### Background Clip
30
+
31
+ <div layout="flex col" space="g:medium">
32
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="bg-clip:text"</code> - Clip background to text for gradient text effect</p>
33
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
34
+ <span style="font-size: 1.5rem; font-weight: bold; background: linear-gradient(to right, #3b82f6, #8b5cf6); -webkit-background-clip: text; background-clip: text; color: transparent;">Gradient Text</span>
35
+ </div>
36
+ </div>
37
+
38
+ <details>
39
+ <summary>View Code</summary>
26
40
 
27
41
  ```html
28
- <!-- Responsive example -->
29
- <div visual="mob:... tab:... lap:...">
30
- Responsive content
42
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
43
+ <span style="font-size: 1.5rem; font-weight: bold; background: linear-gradient(to right, #3b82f6, #8b5cf6); -webkit-background-clip: text; background-clip: text; color: transparent;">Gradient Text</span>
31
44
  </div>
32
45
  ```
46
+
47
+ </details>
48
+
49
+ </div>
package/docs/reference/visual/background-color.md CHANGED
@@ -15,19 +15,44 @@ visual="bg:[color]"
15
15
  <div visual="bg:[#FF5733]">Custom color</div>
16
16
  ```
17
17
 
18
- ## Arbitrary Values
18
+ ## Preview
19
19
 
20
- Supports custom values using bracket syntax:
20
+ <div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
21
+
22
+ ### Background Color
23
+
24
+ <div layout="flex col" space="g:medium">
25
+ <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="bg:primary"</code> - Apply solid background colors from theme or palette</p>
26
+ <div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
27
+ <div space="p:small" visual="bg:primary text:white rounded:small">primary</div>
28
+ <div space="p:small" visual="bg:secondary text:white rounded:small">secondary</div>
29
+ <div space="p:small" visual="bg:success text:white rounded:small">success</div>
30
+ <div space="p:small" visual="bg:warning text:black rounded:small">warning</div>
31
+ <div space="p:small" visual="bg:danger text:white rounded:small">danger</div>
32
+ </div>
33
+ </div>
34
+
35
+ <details>
36
+ <summary>View Code</summary>
21
37
 
22
38
  ```html
23
- <div visual="background:[custom-value]">Custom</div>
39
+ <div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
40
+ <div space="p:small" visual="bg:primary text:white rounded:small">primary</div>
41
+ <div space="p:small" visual="bg:secondary text:white rounded:small">secondary</div>
42
+ <div space="p:small" visual="bg:success text:white rounded:small">success</div>
43
+ <div space="p:small" visual="bg:warning text:black rounded:small">warning</div>
44
+ <div space="p:small" visual="bg:danger text:white rounded:small">danger</div>
45
+ </div>
24
46
  ```
25
47
 
26
- ## Responsive
48
+ </details>
27
49
 
28
- ```html
29
- <!-- Responsive example -->
30
- <div visual="mob:... tab:... lap:...">
31
- Responsive content
32
50
  </div>
51
+
52
+ ## Arbitrary Values
53
+
54
+ Supports custom values using bracket syntax:
55
+
56
+ ```html
57
+ <div visual="background:[custom-value]">Custom</div>
33
58
  ```
package/docs/reference/visual/background-image.md CHANGED
@@ -23,19 +23,38 @@ visual="bg-image:[value]"
23
23
  <div visual="bg-image:gradient-to-r">Gradient background</div>
24
24
  ```
25
25
 
26
- ## Arbitrary Values
26
+ ## Preview
27
27
 
28
- Supports custom values using bracket syntax:
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
+ ### Background Gradient
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="bg-image:gradient-to-r"</code> - Apply gradient backgrounds</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="text:white rounded:small" style="background-image: linear-gradient(to right, #3b82f6, #8b5cf6);">gradient-to-r</div>
36
+ <div space="p:medium" visual="text:white rounded:small" style="background-image: linear-gradient(to bottom, #10b981, #3b82f6);">gradient-to-b</div>
37
+ </div>
38
+ </div>
39
+
40
+ <details>
41
+ <summary>View Code</summary>
29
42
 
30
43
  ```html
31
- <div visual="background:[custom-value]">Custom</div>
44
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
45
+ <div space="p:medium" visual="text:white rounded:small" style="background-image: linear-gradient(to right, #3b82f6, #8b5cf6);">gradient-to-r</div>
46
+ <div space="p:medium" visual="text:white rounded:small" style="background-image: linear-gradient(to bottom, #10b981, #3b82f6);">gradient-to-b</div>
47
+ </div>
32
48
  ```
33
49
 
34
- ## Responsive
50
+ </details>
35
51
 
36
- ```html
37
- <!-- Responsive example -->
38
- <div visual="mob:... tab:... lap:...">
39
- Responsive content
40
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>
41
60
  ```