@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/fill.md CHANGED
@@ -20,19 +20,40 @@ visual="fill:[color]"
20
20
  <svg visual="fill:primary">...</svg>
21
21
  ```
22
22
 
23
- ## Arbitrary Values
23
+ ## Preview
24
24
 
25
- Supports custom values using bracket syntax:
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
+ ### SVG Fill
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="fill:primary"</code> - Fill SVG elements with color</p>
31
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
32
+ <svg visual="fill:primary" width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
33
+ <svg visual="fill:danger" width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
34
+ <svg visual="fill:success" width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
35
+ </div>
36
+ </div>
37
+
38
+ <details>
39
+ <summary>View Code</summary>
26
40
 
27
41
  ```html
28
- <div visual="fill:[custom-value]">Custom</div>
42
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
43
+ <svg visual="fill:primary" width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
44
+ <svg visual="fill:danger" width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
45
+ <svg visual="fill:success" width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
46
+ </div>
29
47
  ```
30
48
 
31
- ## Responsive
49
+ </details>
32
50
 
33
- ```html
34
- <!-- Responsive example -->
35
- <div visual="mob:... tab:... lap:...">
36
- Responsive content
37
51
  </div>
52
+
53
+ ## Arbitrary Values
54
+
55
+ Supports custom values using bracket syntax:
56
+
57
+ ```html
58
+ <div visual="fill:[custom-value]">Custom</div>
38
59
  ```
package/docs/reference/visual/filter-blur.md CHANGED
@@ -25,19 +25,40 @@ visual="blur:[value]"
25
25
  <div visual="blur:medium">Blurred element</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
+ ### 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="blur:medium"</code> - Apply gaussian blur filter to an element</p>
36
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
37
+ <div space="p:small" visual="bg:primary text:white rounded:small">none</div>
38
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: blur(2px);">small</div>
39
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: blur(4px);">medium</div>
40
+ </div>
41
+ </div>
42
+
43
+ <details>
44
+ <summary>View Code</summary>
31
45
 
32
46
  ```html
33
- <div visual="filter:[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:small" visual="bg:primary text:white rounded:small">none</div>
49
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: blur(2px);">small</div>
50
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: blur(4px);">medium</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="filter:[custom-value]">Custom</div>
43
64
  ```
package/docs/reference/visual/filter-brightness.md CHANGED
@@ -23,19 +23,40 @@ visual="brightness:[value]"
23
23
  <img visual="brightness:bright">Brighter image</img>
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
+ ### Brightness Filter
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="brightness:bright"</code> - Adjust element brightness</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" style="filter: brightness(0.5);">dim</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" style="filter: brightness(1.5);">vivid</div>
38
+ </div>
39
+ </div>
40
+
41
+ <details>
42
+ <summary>View Code</summary>
29
43
 
30
44
  ```html
31
- <div visual="filter:[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" style="filter: brightness(0.5);">dim</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" style="filter: brightness(1.5);">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="filter:[custom-value]">Custom</div>
41
62
  ```
package/docs/reference/visual/filter-contrast.md CHANGED
@@ -23,19 +23,40 @@ visual="contrast:[value]"
23
23
  <img visual="contrast:high">High contrast</img>
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
+ ### Contrast Filter
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="contrast:high"</code> - Adjust element contrast</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" style="filter: contrast(0.5);">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" style="filter: contrast(1.5);">high</div>
38
+ </div>
39
+ </div>
40
+
41
+ <details>
42
+ <summary>View Code</summary>
29
43
 
30
44
  ```html
31
- <div visual="filter:[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" style="filter: contrast(0.5);">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" style="filter: contrast(1.5);">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="filter:[custom-value]">Custom</div>
41
62
  ```
package/docs/reference/visual/filter-drop-shadow.md CHANGED
@@ -24,19 +24,40 @@ visual="drop-shadow:[value]"
24
24
  <img visual="drop-shadow:medium">Shadow on image</img>
25
25
  ```
26
26
 
27
- ## Arbitrary Values
27
+ ## Preview
28
28
 
29
- Supports custom values using bracket syntax:
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
+ ### Drop Shadow
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="drop-shadow:medium"</code> - Add shadow to elements</p>
35
+ <div layout="flex" space="g:medium p:big" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
36
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));">small</div>
37
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));">medium</div>
38
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: drop-shadow(0 10px 15px rgba(0,0,0,0.3));">big</div>
39
+ </div>
40
+ </div>
41
+
42
+ <details>
43
+ <summary>View Code</summary>
30
44
 
31
45
  ```html
32
- <div visual="filter:[custom-value]">Custom</div>
46
+ <div layout="flex" space="g:medium p:big" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
47
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));">small</div>
48
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));">medium</div>
49
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: drop-shadow(0 10px 15px rgba(0,0,0,0.3));">big</div>
50
+ </div>
33
51
  ```
34
52
 
35
- ## Responsive
53
+ </details>
36
54
 
37
- ```html
38
- <!-- Responsive example -->
39
- <div visual="mob:... tab:... lap:...">
40
- Responsive content
41
55
  </div>
56
+
57
+ ## Arbitrary Values
58
+
59
+ Supports custom values using bracket syntax:
60
+
61
+ ```html
62
+ <div visual="filter:[custom-value]">Custom</div>
42
63
  ```
package/docs/reference/visual/filter-grayscale.md CHANGED
@@ -21,19 +21,40 @@ visual="grayscale:[value]"
21
21
  <img visual="grayscale:full">Black and white</img>
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
+ ### Grayscale Filter
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="grayscale:full"</code> - Convert to grayscale</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" style="filter: grayscale(50%);">partial</div>
35
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: grayscale(100%);">full</div>
36
+ </div>
37
+ </div>
38
+
39
+ <details>
40
+ <summary>View Code</summary>
27
41
 
28
42
  ```html
29
- <div visual="filter:[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">none</div>
45
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: grayscale(50%);">partial</div>
46
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: grayscale(100%);">full</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="filter:[custom-value]">Custom</div>
39
60
  ```
package/docs/reference/visual/filter-hue-rotate.md CHANGED
@@ -21,19 +21,40 @@ visual="hue-rotate:[degrees]"
21
21
  <img visual="hue-rotate:90">Shifted hue</img>
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
+ ### Hue Rotate Filter
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="hue-rotate:90"</code> - Rotate color hues</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" style="filter: hue-rotate(90deg);">90°</div>
35
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: hue-rotate(180deg);">180°</div>
36
+ </div>
37
+ </div>
38
+
39
+ <details>
40
+ <summary>View Code</summary>
27
41
 
28
42
  ```html
29
- <div visual="filter:[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" style="filter: hue-rotate(90deg);">90°</div>
46
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: hue-rotate(180deg);">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="filter:[custom-value]">Custom</div>
39
60
  ```
package/docs/reference/visual/filter-invert.md CHANGED
@@ -21,19 +21,38 @@ visual="invert:[value]"
21
21
  <img visual="invert:full">Inverted colors</img>
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
+ ### Invert Filter
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="invert:full"</code> - Invert element colors</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" style="filter: invert(100%);">full</div>
35
+ </div>
36
+ </div>
37
+
38
+ <details>
39
+ <summary>View Code</summary>
27
40
 
28
41
  ```html
29
- <div visual="filter:[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" style="filter: invert(100%);">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="filter:[custom-value]">Custom</div>
39
58
  ```
package/docs/reference/visual/filter-saturate.md CHANGED
@@ -23,19 +23,40 @@ visual="saturate:[value]"
23
23
  <img visual="saturate:vivid">Vivid colors</img>
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
+ ### Saturate Filter
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="saturate:vivid"</code> - Adjust color saturation</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" style="filter: saturate(0);">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" style="filter: saturate(2);">vivid</div>
38
+ </div>
39
+ </div>
40
+
41
+ <details>
42
+ <summary>View Code</summary>
29
43
 
30
44
  ```html
31
- <div visual="filter:[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" style="filter: saturate(0);">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" style="filter: saturate(2);">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="filter:[custom-value]">Custom</div>
41
62
  ```
package/docs/reference/visual/filter-sepia.md CHANGED
@@ -21,19 +21,40 @@ visual="sepia:[value]"
21
21
  <img visual="sepia:full">Vintage look</img>
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
+ ### Sepia Filter
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="sepia:full"</code> - Apply vintage sepia tone</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" style="filter: sepia(50%);">partial</div>
35
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: sepia(100%);">full</div>
36
+ </div>
37
+ </div>
38
+
39
+ <details>
40
+ <summary>View Code</summary>
27
41
 
28
42
  ```html
29
- <div visual="filter:[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">none</div>
45
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: sepia(50%);">partial</div>
46
+ <div space="p:small" visual="bg:primary text:white rounded:small" style="filter: sepia(100%);">full</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="filter:[custom-value]">Custom</div>
39
60
  ```
package/docs/reference/visual/font-family.md CHANGED
@@ -21,11 +21,32 @@ visual="font:[family]"
21
21
  <div visual="font:mono">Monospace text</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
+ ### Font Family
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="font:sans"</code> - Choose between sans, serif, or mono</p>
32
+ <div layout="flex col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
33
+ <span style="font-family: ui-sans-serif, system-ui, sans-serif;">Sans-serif font</span>
34
+ <span style="font-family: ui-serif, Georgia, serif;">Serif font</span>
35
+ <span style="font-family: ui-monospace, monospace;">Monospace font</span>
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 col" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
44
+ <span style="font-family: ui-sans-serif, system-ui, sans-serif;">Sans-serif font</span>
45
+ <span style="font-family: ui-serif, Georgia, serif;">Serif font</span>
46
+ <span style="font-family: ui-monospace, monospace;">Monospace font</span>
30
47
  </div>
31
48
  ```
49
+
50
+ </details>
51
+
52
+ </div>
package/docs/reference/visual/font-smoothing.md CHANGED
@@ -20,11 +20,30 @@ visual="[smoothing-value]"
20
20
  <body visual="antialiased">Smooth fonts</body>
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
+ ### Font Smoothing
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="antialiased"</code> - Control text rendering</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">antialiased</div>
33
+ <div space="p:small" visual="bg:primary text:white rounded:small">subpixel</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">antialiased</div>
43
+ <div space="p:small" visual="bg:primary text:white rounded:small">subpixel</div>
29
44
  </div>
30
45
  ```
46
+
47
+ </details>
48
+
49
+ </div>
package/docs/reference/visual/font-style.md CHANGED
@@ -20,11 +20,30 @@ visual="[style-value]"
20
20
  <em visual="not-italic">Normal style emphasis</em>
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
+ ### Font Style
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="italic"</code> - Italic or normal text</p>
31
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
32
+ <span space="p:small" visual="bg:primary text:white rounded:small" style="font-style: italic;">italic</span>
33
+ <span space="p:small" visual="bg:primary text:white rounded:small">normal</span>
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
+ <span space="p:small" visual="bg:primary text:white rounded:small" style="font-style: italic;">italic</span>
43
+ <span space="p:small" visual="bg:primary text:white rounded:small">normal</span>
29
44
  </div>
30
45
  ```
46
+
47
+ </details>
48
+
49
+ </div>
package/docs/reference/visual/font-variant-numeric.md CHANGED
@@ -25,11 +25,30 @@ visual="[variant-value]"
25
25
  <span visual="tabular-nums">123,456.00</span>
26
26
  ```
27
27
 
28
- ## Responsive
28
+ ## Preview
29
+
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
+ ### Font Variant Numeric
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="tabular-nums"</code> - Control number display</p>
36
+ <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
37
+ <div space="p:small" visual="bg:primary text:white rounded:small">tabular-nums</div>
38
+ <div space="p:small" visual="bg:primary text:white rounded:small">ordinal</div>
39
+ </div>
40
+ </div>
41
+
42
+ <details>
43
+ <summary>View Code</summary>
29
44
 
30
45
  ```html
31
- <!-- Responsive example -->
32
- <div visual="mob:... tab:... lap:...">
33
- 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">tabular-nums</div>
48
+ <div space="p:small" visual="bg:primary text:white rounded:small">ordinal</div>
34
49
  </div>
35
50
  ```
51
+
52
+ </details>
53
+
54
+ </div>