@teseor/css 1.0.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 (298) hide show
  1. package/README.md +102 -0
  2. package/dist/compiled.css +4463 -0
  3. package/dist/index.css +4445 -0
  4. package/fonts/.gitkeep +9 -0
  5. package/package.json +38 -0
  6. package/src/00-config/layers/layers.scss +1 -0
  7. package/src/00-config/mixins/_border.scss +13 -0
  8. package/src/00-config/mixins/index.scss +1 -0
  9. package/src/00-config/tokens/_variables.scss +120 -0
  10. package/src/00-config/tokens/borders/index.scss +6 -0
  11. package/src/00-config/tokens/colors/colors.docs.json +168 -0
  12. package/src/00-config/tokens/colors/index.scss +25 -0
  13. package/src/00-config/tokens/grid/grid.docs.json +54 -0
  14. package/src/00-config/tokens/grid/index.scss +11 -0
  15. package/src/00-config/tokens/index.scss +15 -0
  16. package/src/00-config/tokens/input.scss +14 -0
  17. package/src/00-config/tokens/motion/index.scss +25 -0
  18. package/src/00-config/tokens/radius/index.scss +7 -0
  19. package/src/00-config/tokens/semantic/colors/index.scss +30 -0
  20. package/src/00-config/tokens/semantic/spacing/index.scss +10 -0
  21. package/src/00-config/tokens/shadows/index.scss +5 -0
  22. package/src/00-config/tokens/spacing/index.scss +15 -0
  23. package/src/00-config/tokens/spacing/spacing.docs.json +114 -0
  24. package/src/00-config/tokens/theming.docs.json +77 -0
  25. package/src/00-config/tokens/typography/index.scss +119 -0
  26. package/src/00-config/tokens/zindex/index.scss +14 -0
  27. package/src/01-reset/index.scss +1 -0
  28. package/src/01-reset/reset.scss +8 -0
  29. package/src/02-base/index.scss +2 -0
  30. package/src/02-base/root/root.scss +12 -0
  31. package/src/02-base/typography/typography.docs.json +94 -0
  32. package/src/02-base/typography/typography.scss +145 -0
  33. package/src/03-layout/app-shell/app-shell.api.json +26 -0
  34. package/src/03-layout/app-shell/app-shell.docs.json +119 -0
  35. package/src/03-layout/app-shell/index.scss +5 -0
  36. package/src/03-layout/box/box.api.json +15 -0
  37. package/src/03-layout/box/box.docs.json +57 -0
  38. package/src/03-layout/box/index.scss +34 -0
  39. package/src/03-layout/center/center.api.json +6 -0
  40. package/src/03-layout/center/center.docs.json +24 -0
  41. package/src/03-layout/center/index.scss +11 -0
  42. package/src/03-layout/cluster/cluster.api.json +10 -0
  43. package/src/03-layout/cluster/cluster.docs.json +129 -0
  44. package/src/03-layout/cluster/index.scss +18 -0
  45. package/src/03-layout/container/container.api.json +13 -0
  46. package/src/03-layout/container/index.scss +17 -0
  47. package/src/03-layout/flex/flex.api.json +15 -0
  48. package/src/03-layout/flex/flex.docs.json +56 -0
  49. package/src/03-layout/flex/index.scss +51 -0
  50. package/src/03-layout/grid/grid.api.json +10 -0
  51. package/src/03-layout/grid/grid.docs.json +116 -0
  52. package/src/03-layout/grid/index.scss +15 -0
  53. package/src/03-layout/index.scss +11 -0
  54. package/src/03-layout/main/index.scss +17 -0
  55. package/src/03-layout/main/main.api.json +13 -0
  56. package/src/03-layout/sidebar/index.scss +30 -0
  57. package/src/03-layout/sidebar/sidebar.api.json +13 -0
  58. package/src/03-layout/sidebar-nav/index.scss +209 -0
  59. package/src/03-layout/sidebar-nav/sidebar-nav-all.png +0 -0
  60. package/src/03-layout/sidebar-nav/sidebar-nav.api.json +115 -0
  61. package/src/03-layout/sidebar-nav/sidebar-nav.docs.json +100 -0
  62. package/src/03-layout/sidebar-nav/sidebar-nav.visual.spec.ts +14 -0
  63. package/src/03-layout/stack/index.scss +13 -0
  64. package/src/03-layout/stack/stack.api.json +10 -0
  65. package/src/03-layout/stack/stack.docs.json +131 -0
  66. package/src/04-components/accordion/accordion-visual.png +0 -0
  67. package/src/04-components/accordion/accordion.api.json +19 -0
  68. package/src/04-components/accordion/accordion.docs.json +51 -0
  69. package/src/04-components/accordion/accordion.visual.spec.ts +14 -0
  70. package/src/04-components/accordion/index.scss +78 -0
  71. package/src/04-components/alert/alert-visual.png +0 -0
  72. package/src/04-components/alert/alert.api.json +91 -0
  73. package/src/04-components/alert/alert.docs.json +79 -0
  74. package/src/04-components/alert/alert.visual.spec.ts +14 -0
  75. package/src/04-components/alert/index.scss +108 -0
  76. package/src/04-components/avatar/avatar-visual.png +0 -0
  77. package/src/04-components/avatar/avatar.api.json +70 -0
  78. package/src/04-components/avatar/avatar.docs.json +200 -0
  79. package/src/04-components/avatar/avatar.visual.spec.ts +14 -0
  80. package/src/04-components/avatar/index.scss +104 -0
  81. package/src/04-components/badge/badge-visual.png +0 -0
  82. package/src/04-components/badge/badge.api.json +86 -0
  83. package/src/04-components/badge/badge.docs.json +89 -0
  84. package/src/04-components/badge/badge.visual.spec.ts +14 -0
  85. package/src/04-components/badge/index.scss +64 -0
  86. package/src/04-components/breadcrumb/breadcrumb-visual.png +0 -0
  87. package/src/04-components/breadcrumb/breadcrumb.api.json +31 -0
  88. package/src/04-components/breadcrumb/breadcrumb.docs.json +59 -0
  89. package/src/04-components/breadcrumb/breadcrumb.visual.spec.ts +14 -0
  90. package/src/04-components/breadcrumb/index.scss +77 -0
  91. package/src/04-components/button/button-visual.png +0 -0
  92. package/src/04-components/button/button.api.json +138 -0
  93. package/src/04-components/button/button.docs.json +75 -0
  94. package/src/04-components/button/button.visual.spec.ts +14 -0
  95. package/src/04-components/button/index.scss +222 -0
  96. package/src/04-components/button-group/button-group-visual.png +0 -0
  97. package/src/04-components/button-group/button-group.api.json +11 -0
  98. package/src/04-components/button-group/button-group.docs.json +52 -0
  99. package/src/04-components/button-group/button-group.visual.spec.ts +14 -0
  100. package/src/04-components/button-group/index.scss +78 -0
  101. package/src/04-components/card/card-visual.png +0 -0
  102. package/src/04-components/card/card.api.json +53 -0
  103. package/src/04-components/card/card.docs.json +103 -0
  104. package/src/04-components/card/card.visual.spec.ts +14 -0
  105. package/src/04-components/card/index.scss +41 -0
  106. package/src/04-components/checkbox/checkbox-visual.png +0 -0
  107. package/src/04-components/checkbox/checkbox.api.json +50 -0
  108. package/src/04-components/checkbox/checkbox.docs.json +151 -0
  109. package/src/04-components/checkbox/checkbox.visual.spec.ts +14 -0
  110. package/src/04-components/checkbox/index.scss +104 -0
  111. package/src/04-components/code/code-visual.png +0 -0
  112. package/src/04-components/code/code.api.json +47 -0
  113. package/src/04-components/code/code.docs.json +84 -0
  114. package/src/04-components/code/code.visual.spec.ts +14 -0
  115. package/src/04-components/code/index.scss +64 -0
  116. package/src/04-components/data-list/data-list-visual.png +0 -0
  117. package/src/04-components/data-list/data-list.api.json +23 -0
  118. package/src/04-components/data-list/data-list.docs.json +79 -0
  119. package/src/04-components/data-list/data-list.visual.spec.ts +14 -0
  120. package/src/04-components/data-list/index.scss +98 -0
  121. package/src/04-components/dialog/dialog-visual.png +0 -0
  122. package/src/04-components/dialog/dialog.api.json +23 -0
  123. package/src/04-components/dialog/dialog.docs.json +58 -0
  124. package/src/04-components/dialog/dialog.visual.spec.ts +14 -0
  125. package/src/04-components/dialog/index.scss +74 -0
  126. package/src/04-components/disclosure/disclosure-visual.png +0 -0
  127. package/src/04-components/disclosure/disclosure.api.json +31 -0
  128. package/src/04-components/disclosure/disclosure.docs.json +73 -0
  129. package/src/04-components/disclosure/disclosure.visual.spec.ts +14 -0
  130. package/src/04-components/disclosure/index.scss +111 -0
  131. package/src/04-components/divider/divider-visual.png +0 -0
  132. package/src/04-components/divider/divider.api.json +30 -0
  133. package/src/04-components/divider/divider.docs.json +68 -0
  134. package/src/04-components/divider/divider.visual.spec.ts +14 -0
  135. package/src/04-components/divider/index.scss +115 -0
  136. package/src/04-components/drawer/drawer-visual.png +0 -0
  137. package/src/04-components/drawer/drawer.api.json +39 -0
  138. package/src/04-components/drawer/drawer.docs.json +78 -0
  139. package/src/04-components/drawer/drawer.visual.spec.ts +14 -0
  140. package/src/04-components/drawer/index.scss +251 -0
  141. package/src/04-components/field/field-visual.png +0 -0
  142. package/src/04-components/field/field.api.json +11 -0
  143. package/src/04-components/field/field.docs.json +59 -0
  144. package/src/04-components/field/field.visual.spec.ts +14 -0
  145. package/src/04-components/field/index.scss +44 -0
  146. package/src/04-components/form-error/form-error-visual.png +0 -0
  147. package/src/04-components/form-error/form-error.api.json +19 -0
  148. package/src/04-components/form-error/form-error.docs.json +40 -0
  149. package/src/04-components/form-error/form-error.visual.spec.ts +14 -0
  150. package/src/04-components/form-error/index.scss +31 -0
  151. package/src/04-components/form-helper/form-helper-visual.png +0 -0
  152. package/src/04-components/form-helper/form-helper.api.json +19 -0
  153. package/src/04-components/form-helper/form-helper.docs.json +31 -0
  154. package/src/04-components/form-helper/form-helper.visual.spec.ts +14 -0
  155. package/src/04-components/form-helper/index.scss +24 -0
  156. package/src/04-components/heading/heading-visual.png +0 -0
  157. package/src/04-components/heading/heading.api.json +83 -0
  158. package/src/04-components/heading/heading.docs.json +98 -0
  159. package/src/04-components/heading/heading.visual.spec.ts +14 -0
  160. package/src/04-components/heading/index.scss +61 -0
  161. package/src/04-components/icon/icon-visual.png +0 -0
  162. package/src/04-components/icon/icon.api.json +56 -0
  163. package/src/04-components/icon/icon.docs.json +155 -0
  164. package/src/04-components/icon/icon.visual.spec.ts +14 -0
  165. package/src/04-components/icon/index.scss +79 -0
  166. package/src/04-components/index.scss +41 -0
  167. package/src/04-components/input/index.scss +154 -0
  168. package/src/04-components/input/input-visual.png +0 -0
  169. package/src/04-components/input/input.api.json +85 -0
  170. package/src/04-components/input/input.docs.json +189 -0
  171. package/src/04-components/input/input.visual.spec.ts +14 -0
  172. package/src/04-components/label/index.scss +46 -0
  173. package/src/04-components/label/label-visual.png +0 -0
  174. package/src/04-components/label/label.api.json +27 -0
  175. package/src/04-components/label/label.docs.json +73 -0
  176. package/src/04-components/label/label.visual.spec.ts +14 -0
  177. package/src/04-components/link/index.scss +73 -0
  178. package/src/04-components/link/link-visual.png +0 -0
  179. package/src/04-components/link/link.api.json +39 -0
  180. package/src/04-components/link/link.docs.json +104 -0
  181. package/src/04-components/link/link.visual.spec.ts +14 -0
  182. package/src/04-components/menu/index.scss +145 -0
  183. package/src/04-components/menu/menu-visual.png +0 -0
  184. package/src/04-components/menu/menu.api.json +47 -0
  185. package/src/04-components/menu/menu.docs.json +81 -0
  186. package/src/04-components/menu/menu.visual.spec.ts +14 -0
  187. package/src/04-components/modal/index.scss +93 -0
  188. package/src/04-components/modal/modal-visual.png +0 -0
  189. package/src/04-components/modal/modal.api.json +43 -0
  190. package/src/04-components/modal/modal.docs.json +86 -0
  191. package/src/04-components/modal/modal.visual.spec.ts +14 -0
  192. package/src/04-components/overlay/index.scss +49 -0
  193. package/src/04-components/overlay/overlay-visual.png +0 -0
  194. package/src/04-components/overlay/overlay.api.json +23 -0
  195. package/src/04-components/overlay/overlay.docs.json +63 -0
  196. package/src/04-components/overlay/overlay.visual.spec.ts +14 -0
  197. package/src/04-components/pagination/index.scss +114 -0
  198. package/src/04-components/pagination/pagination-visual.png +0 -0
  199. package/src/04-components/pagination/pagination.api.json +39 -0
  200. package/src/04-components/pagination/pagination.docs.json +88 -0
  201. package/src/04-components/pagination/pagination.visual.spec.ts +14 -0
  202. package/src/04-components/popover/index.scss +114 -0
  203. package/src/04-components/popover/popover-visual.png +0 -0
  204. package/src/04-components/popover/popover.api.json +39 -0
  205. package/src/04-components/popover/popover.docs.json +70 -0
  206. package/src/04-components/popover/popover.visual.spec.ts +14 -0
  207. package/src/04-components/progress/index.scss +102 -0
  208. package/src/04-components/progress/progress-visual.png +0 -0
  209. package/src/04-components/progress/progress.api.json +23 -0
  210. package/src/04-components/progress/progress.docs.json +87 -0
  211. package/src/04-components/progress/progress.visual.spec.ts +14 -0
  212. package/src/04-components/radio/index.scss +96 -0
  213. package/src/04-components/radio/radio-visual.png +0 -0
  214. package/src/04-components/radio/radio.api.json +46 -0
  215. package/src/04-components/radio/radio.docs.json +159 -0
  216. package/src/04-components/radio/radio.visual.spec.ts +14 -0
  217. package/src/04-components/select/index.scss +113 -0
  218. package/src/04-components/select/select-visual.png +0 -0
  219. package/src/04-components/select/select.api.json +85 -0
  220. package/src/04-components/select/select.docs.json +162 -0
  221. package/src/04-components/select/select.visual.spec.ts +14 -0
  222. package/src/04-components/skeleton/index.scss +99 -0
  223. package/src/04-components/skeleton/skeleton-visual.png +0 -0
  224. package/src/04-components/skeleton/skeleton.api.json +19 -0
  225. package/src/04-components/skeleton/skeleton.docs.json +62 -0
  226. package/src/04-components/skeleton/skeleton.visual.spec.ts +14 -0
  227. package/src/04-components/spinner/index.scss +60 -0
  228. package/src/04-components/spinner/spinner-visual.png +0 -0
  229. package/src/04-components/spinner/spinner.api.json +63 -0
  230. package/src/04-components/spinner/spinner.docs.json +88 -0
  231. package/src/04-components/spinner/spinner.visual.spec.ts +15 -0
  232. package/src/04-components/status/index.scss +85 -0
  233. package/src/04-components/status/status-visual.png +0 -0
  234. package/src/04-components/status/status.api.json +19 -0
  235. package/src/04-components/status/status.docs.json +60 -0
  236. package/src/04-components/status/status.visual.spec.ts +14 -0
  237. package/src/04-components/table/index.scss +60 -0
  238. package/src/04-components/table/table-visual.png +0 -0
  239. package/src/04-components/table/table.api.json +27 -0
  240. package/src/04-components/table/table.docs.json +59 -0
  241. package/src/04-components/table/table.visual.spec.ts +14 -0
  242. package/src/04-components/tabs/index.scss +77 -0
  243. package/src/04-components/tabs/tabs-visual.png +0 -0
  244. package/src/04-components/tabs/tabs.api.json +31 -0
  245. package/src/04-components/tabs/tabs.docs.json +61 -0
  246. package/src/04-components/tabs/tabs.visual.spec.ts +14 -0
  247. package/src/04-components/tag/index.scss +98 -0
  248. package/src/04-components/tag/tag-visual.png +0 -0
  249. package/src/04-components/tag/tag.api.json +86 -0
  250. package/src/04-components/tag/tag.docs.json +108 -0
  251. package/src/04-components/tag/tag.visual.spec.ts +14 -0
  252. package/src/04-components/textarea/index.scss +124 -0
  253. package/src/04-components/textarea/textarea-visual.png +0 -0
  254. package/src/04-components/textarea/textarea.api.json +93 -0
  255. package/src/04-components/textarea/textarea.docs.json +191 -0
  256. package/src/04-components/textarea/textarea.visual.spec.ts +14 -0
  257. package/src/04-components/toast/index.scss +180 -0
  258. package/src/04-components/toast/toast-visual.png +0 -0
  259. package/src/04-components/toast/toast.api.json +43 -0
  260. package/src/04-components/toast/toast.docs.json +99 -0
  261. package/src/04-components/toast/toast.visual.spec.ts +14 -0
  262. package/src/04-components/toggle/index.scss +117 -0
  263. package/src/04-components/toggle/toggle-visual.png +0 -0
  264. package/src/04-components/toggle/toggle.api.json +43 -0
  265. package/src/04-components/toggle/toggle.docs.json +92 -0
  266. package/src/04-components/toggle/toggle.visual.spec.ts +14 -0
  267. package/src/04-components/tooltip/index.scss +102 -0
  268. package/src/04-components/tooltip/tooltip-visual.png +0 -0
  269. package/src/04-components/tooltip/tooltip.api.json +39 -0
  270. package/src/04-components/tooltip/tooltip.docs.json +63 -0
  271. package/src/04-components/tooltip/tooltip.visual.spec.ts +14 -0
  272. package/src/05-utilities/border/index.scss +21 -0
  273. package/src/05-utilities/display/display.api.json +6 -0
  274. package/src/05-utilities/display/display.docs.json +28 -0
  275. package/src/05-utilities/display/display.scss +195 -0
  276. package/src/05-utilities/index.scss +6 -0
  277. package/src/05-utilities/spacing/spacing.api.json +6 -0
  278. package/src/05-utilities/spacing/spacing.docs.json +43 -0
  279. package/src/05-utilities/spacing/spacing.scss +399 -0
  280. package/src/05-utilities/text/text.api.json +38 -0
  281. package/src/05-utilities/text/text.docs.json +132 -0
  282. package/src/05-utilities/text/text.scss +246 -0
  283. package/src/05-utilities/view-transition/index.scss +198 -0
  284. package/src/05-utilities/view-transition/view-transition.api.json +21 -0
  285. package/src/05-utilities/view-transition/view-transition.docs.json +63 -0
  286. package/src/05-utilities/visually-hidden/index.scss +38 -0
  287. package/src/05-utilities/visually-hidden/visually-hidden.api.json +8 -0
  288. package/src/05-utilities/visually-hidden/visually-hidden.docs.json +29 -0
  289. package/src/99-debug/grid-overlay.scss +79 -0
  290. package/src/99-debug/index.scss +1 -0
  291. package/src/index.scss +30 -0
  292. package/src/testing/api-types.ts +20 -0
  293. package/src/testing/grid-alignment.spec.ts +92 -0
  294. package/src/testing/html-generator.ts +151 -0
  295. package/src/testing/index.ts +15 -0
  296. package/src/testing/page-setup.ts +131 -0
  297. package/src/testing/rhythm.ts +146 -0
  298. package/src/testing/scaffold.ts +50 -0
package/src/03-layout/app-shell/app-shell.docs.json ADDED
@@ -0,0 +1,119 @@
1
+ {
2
+ "id": "layout",
3
+ "type": "primitive",
4
+ "title": "Layout",
5
+ "description": "Layout primitives for app shells with sidebars and content containers.",
6
+ "api": "app-shell.api.json",
7
+ "sections": [
8
+ {
9
+ "title": "App Shell + Sidebar + Main",
10
+ "description": "This page uses the layout primitives:",
11
+ "examples": [
12
+ {
13
+ "code": "<body class=\"ui-app-shell\">\n <aside class=\"ui-sidebar\">\n <!-- sidebar content -->\n </aside>\n <main class=\"ui-main\">\n <div class=\"ui-container\">\n <!-- page content -->\n </div>\n </main>\n</body>"
14
+ }
15
+ ]
16
+ },
17
+ {
18
+ "title": "Sidebar Widths",
19
+ "examples": [
20
+ {
21
+ "layout": "stack",
22
+ "items": [
23
+ {
24
+ "tag": "div",
25
+ "class": "ui-cluster ui-cluster--sm",
26
+ "children": [
27
+ { "tag": "code", "text": ".ui-sidebar--sm" },
28
+ { "tag": "span", "text": "192px (24 units)" }
29
+ ]
30
+ },
31
+ {
32
+ "tag": "div",
33
+ "class": "ui-cluster ui-cluster--sm",
34
+ "children": [
35
+ { "tag": "code", "text": ".ui-sidebar--md" },
36
+ { "tag": "span", "text": "240px (30 units) - default" }
37
+ ]
38
+ },
39
+ {
40
+ "tag": "div",
41
+ "class": "ui-cluster ui-cluster--sm",
42
+ "children": [
43
+ { "tag": "code", "text": ".ui-sidebar--lg" },
44
+ { "tag": "span", "text": "320px (40 units)" }
45
+ ]
46
+ }
47
+ ]
48
+ }
49
+ ]
50
+ },
51
+ {
52
+ "title": "Sidebar Position",
53
+ "description": "By default, sidebar is on the start (left in LTR). Use .ui-sidebar--end for right-side:",
54
+ "examples": [
55
+ {
56
+ "code": "<aside class=\"ui-sidebar ui-sidebar--end\">...</aside>\n<main class=\"ui-main ui-main--sidebar-end\">...</main>"
57
+ }
58
+ ]
59
+ },
60
+ {
61
+ "title": "Container Widths",
62
+ "examples": [
63
+ {
64
+ "layout": "stack",
65
+ "items": [
66
+ {
67
+ "tag": "div",
68
+ "class": "ui-cluster ui-cluster--sm",
69
+ "children": [
70
+ { "tag": "code", "text": ".ui-container--sm" },
71
+ { "tag": "span", "text": "640px (80 units)" }
72
+ ]
73
+ },
74
+ {
75
+ "tag": "div",
76
+ "class": "ui-cluster ui-cluster--sm",
77
+ "children": [
78
+ { "tag": "code", "text": ".ui-container--md" },
79
+ { "tag": "span", "text": "800px (100 units)" }
80
+ ]
81
+ },
82
+ {
83
+ "tag": "div",
84
+ "class": "ui-cluster ui-cluster--sm",
85
+ "children": [
86
+ { "tag": "code", "text": ".ui-container--lg" },
87
+ { "tag": "span", "text": "960px (120 units) - default" }
88
+ ]
89
+ },
90
+ {
91
+ "tag": "div",
92
+ "class": "ui-cluster ui-cluster--sm",
93
+ "children": [
94
+ { "tag": "code", "text": ".ui-container--xl" },
95
+ { "tag": "span", "text": "1280px (160 units)" }
96
+ ]
97
+ },
98
+ {
99
+ "tag": "div",
100
+ "class": "ui-cluster ui-cluster--sm",
101
+ "children": [
102
+ { "tag": "code", "text": ".ui-container--full" },
103
+ { "tag": "span", "text": "No max width" }
104
+ ]
105
+ }
106
+ ]
107
+ }
108
+ ]
109
+ },
110
+ {
111
+ "title": "Centered Container",
112
+ "examples": [
113
+ {
114
+ "code": "<div class=\"ui-container ui-container--center\">\n <!-- centered content with max-width -->\n</div>"
115
+ }
116
+ ]
117
+ }
118
+ ]
119
+ }
package/src/03-layout/app-shell/index.scss ADDED
@@ -0,0 +1,5 @@
1
+ @layer primitives {
2
+ .app-shell {
3
+ min-block-size: 100vh;
4
+ }
5
+ }
package/src/03-layout/box/box.api.json ADDED
@@ -0,0 +1,15 @@
1
+ {
2
+ "name": "box",
3
+ "element": "div",
4
+ "modifiers": {
5
+ "p-1": { "type": "boolean" },
6
+ "p-2": { "type": "boolean" },
7
+ "p-3": { "type": "boolean" },
8
+ "p-4": { "type": "boolean" },
9
+ "bg-subtle": { "type": "boolean" },
10
+ "bg-muted": { "type": "boolean" },
11
+ "rounded": { "type": "boolean" },
12
+ "rounded-lg": { "type": "boolean" }
13
+ },
14
+ "cssVars": []
15
+ }
package/src/03-layout/box/box.docs.json ADDED
@@ -0,0 +1,57 @@
1
+ {
2
+ "id": "box",
3
+ "type": "primitive",
4
+ "title": "Box",
5
+ "description": "Base container with style props. Foundation for layout primitives.",
6
+ "api": "box.api.json",
7
+ "sections": [
8
+ {
9
+ "title": "Default",
10
+ "examples": [
11
+ {
12
+ "html": "<div class=\"ui-box\">Content</div>",
13
+ "code": "<div class=\"ui-box\">Content</div>"
14
+ }
15
+ ]
16
+ },
17
+ {
18
+ "title": "Padding",
19
+ "examples": [
20
+ {
21
+ "layout": "stack",
22
+ "html": "<div class=\"ui-box ui-box--p-1 ui-box--bg-subtle\">Padding 1</div><div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">Padding 2</div><div class=\"ui-box ui-box--p-3 ui-box--bg-subtle\">Padding 3</div><div class=\"ui-box ui-box--p-4 ui-box--bg-subtle\">Padding 4</div>",
23
+ "code": "<div class=\"ui-box ui-box--p-1\">...</div>\n<div class=\"ui-box ui-box--p-2\">...</div>\n<div class=\"ui-box ui-box--p-3\">...</div>\n<div class=\"ui-box ui-box--p-4\">...</div>"
24
+ }
25
+ ]
26
+ },
27
+ {
28
+ "title": "Background",
29
+ "examples": [
30
+ {
31
+ "layout": "stack",
32
+ "html": "<div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">Subtle background</div><div class=\"ui-box ui-box--p-2 ui-box--bg-muted\">Muted background</div>",
33
+ "code": "<div class=\"ui-box ui-box--bg-subtle\">...</div>\n<div class=\"ui-box ui-box--bg-muted\">...</div>"
34
+ }
35
+ ]
36
+ },
37
+ {
38
+ "title": "Rounded",
39
+ "examples": [
40
+ {
41
+ "layout": "cluster",
42
+ "html": "<div class=\"ui-box ui-box--p-3 ui-box--bg-subtle ui-box--rounded\">Rounded</div><div class=\"ui-box ui-box--p-3 ui-box--bg-subtle ui-box--rounded-lg\">Rounded lg</div>",
43
+ "code": "<div class=\"ui-box ui-box--rounded\">...</div>\n<div class=\"ui-box ui-box--rounded-lg\">...</div>"
44
+ }
45
+ ]
46
+ },
47
+ {
48
+ "title": "Custom via CSS Variables",
49
+ "examples": [
50
+ {
51
+ "html": "<div class=\"ui-box\" style=\"--box-padding: var(--ui-space-3); --box-bg: var(--ui-color-primary); --box-color: white; --box-radius: var(--ui-radius-lg);\">Custom box</div>",
52
+ "code": "<div class=\"ui-box\" style=\"--box-padding: ...; --box-bg: ...;\">...</div>"
53
+ }
54
+ ]
55
+ }
56
+ ]
57
+ }
package/src/03-layout/box/index.scss ADDED
@@ -0,0 +1,34 @@
1
+ @use '../../00-config/tokens/variables' as t;
2
+
3
+ // Box - base container with style props
4
+ // Foundation for other layout primitives
5
+
6
+ @layer primitives {
7
+ .box {
8
+ --_padding: var(--box-padding, 0);
9
+ --_bg: var(--box-bg, transparent);
10
+ --_color: var(--box-color, inherit);
11
+ --_radius: var(--box-radius, 0);
12
+
13
+ padding: var(--_padding);
14
+
15
+ color: var(--_color);
16
+
17
+ background: var(--_bg);
18
+ border-radius: var(--_radius);
19
+ }
20
+
21
+ // Padding modifiers
22
+ .box--p-1 { --_padding: var(--ui-space-1, #{t.$space-1}); }
23
+ .box--p-2 { --_padding: var(--ui-space-2, #{t.$space-2}); }
24
+ .box--p-3 { --_padding: var(--ui-space-3, #{t.$space-3}); }
25
+ .box--p-4 { --_padding: var(--ui-space-4, #{t.$space-4}); }
26
+
27
+ // Background modifiers
28
+ .box--bg-subtle { --_bg: var(--ui-color-bg-subtle, #{t.$color-bg-subtle}); }
29
+ .box--bg-muted { --_bg: var(--ui-color-bg-muted, #{t.$color-bg-muted}); }
30
+
31
+ // Border radius modifiers
32
+ .box--rounded { --_radius: var(--ui-radius-md, #{t.$radius-md}); }
33
+ .box--rounded-lg { --_radius: var(--ui-radius-lg, #{t.$radius-lg}); }
34
+ }
package/src/03-layout/center/center.api.json ADDED
@@ -0,0 +1,6 @@
1
+ {
2
+ "name": "center",
3
+ "element": "div",
4
+ "modifiers": {},
5
+ "cssVars": []
6
+ }
package/src/03-layout/center/center.docs.json ADDED
@@ -0,0 +1,24 @@
1
+ {
2
+ "id": "center",
3
+ "type": "primitive",
4
+ "title": "Center",
5
+ "description": "Centers content horizontally and vertically.",
6
+ "api": "center.api.json",
7
+ "sections": [
8
+ {
9
+ "title": "Basic",
10
+ "examples": [
11
+ {
12
+ "items": [
13
+ {
14
+ "tag": "div",
15
+ "class": "ui-center",
16
+ "style": { "height": "var(--ui-row-4)", "background": "var(--ui-color-bg-muted)" },
17
+ "children": [{ "tag": "span", "text": "Centered content" }]
18
+ }
19
+ ]
20
+ }
21
+ ]
22
+ }
23
+ ]
24
+ }
package/src/03-layout/center/index.scss ADDED
@@ -0,0 +1,11 @@
1
+ @layer primitives {
2
+ .center {
3
+ display: flex;
4
+ align-items: center;
5
+ justify-content: center;
6
+ }
7
+
8
+ .center--column {
9
+ flex-direction: column;
10
+ }
11
+ }
package/src/03-layout/cluster/cluster.api.json ADDED
@@ -0,0 +1,10 @@
1
+ {
2
+ "name": "cluster",
3
+ "element": "div",
4
+ "modifiers": {
5
+ "size": {
6
+ "values": ["xs", "md", "lg"]
7
+ }
8
+ },
9
+ "cssVars": []
10
+ }
package/src/03-layout/cluster/cluster.docs.json ADDED
@@ -0,0 +1,129 @@
1
+ {
2
+ "id": "cluster",
3
+ "type": "primitive",
4
+ "title": "Cluster",
5
+ "description": "Horizontal layout with wrapping.",
6
+ "api": "cluster.api.json",
7
+ "sections": [
8
+ {
9
+ "title": "Basic",
10
+ "examples": [
11
+ {
12
+ "items": [
13
+ {
14
+ "tag": "div",
15
+ "class": "ui-cluster ui-cluster--md",
16
+ "children": [
17
+ {
18
+ "tag": "div",
19
+ "text": "Tag 1",
20
+ "style": {
21
+ "background": "var(--ui-color-bg-muted)",
22
+ "padding": "var(--ui-space-2)"
23
+ }
24
+ },
25
+ {
26
+ "tag": "div",
27
+ "text": "Tag 2",
28
+ "style": {
29
+ "background": "var(--ui-color-bg-muted)",
30
+ "padding": "var(--ui-space-2)"
31
+ }
32
+ },
33
+ {
34
+ "tag": "div",
35
+ "text": "Tag 3",
36
+ "style": {
37
+ "background": "var(--ui-color-bg-muted)",
38
+ "padding": "var(--ui-space-2)"
39
+ }
40
+ },
41
+ {
42
+ "tag": "div",
43
+ "text": "Tag 4",
44
+ "style": {
45
+ "background": "var(--ui-color-bg-muted)",
46
+ "padding": "var(--ui-space-2)"
47
+ }
48
+ }
49
+ ]
50
+ }
51
+ ]
52
+ }
53
+ ]
54
+ },
55
+ {
56
+ "title": "Sizes",
57
+ "examples": [
58
+ {
59
+ "items": [
60
+ {
61
+ "tag": "div",
62
+ "class": "ui-cluster ui-cluster--xs",
63
+ "children": [
64
+ {
65
+ "tag": "div",
66
+ "text": "xs",
67
+ "style": {
68
+ "background": "var(--ui-color-bg-muted)",
69
+ "padding": "var(--ui-space-1)"
70
+ }
71
+ },
72
+ {
73
+ "tag": "div",
74
+ "text": "xs",
75
+ "style": {
76
+ "background": "var(--ui-color-bg-muted)",
77
+ "padding": "var(--ui-space-1)"
78
+ }
79
+ },
80
+ {
81
+ "tag": "div",
82
+ "text": "xs",
83
+ "style": {
84
+ "background": "var(--ui-color-bg-muted)",
85
+ "padding": "var(--ui-space-1)"
86
+ }
87
+ }
88
+ ]
89
+ }
90
+ ]
91
+ },
92
+ {
93
+ "items": [
94
+ {
95
+ "tag": "div",
96
+ "class": "ui-cluster ui-cluster--lg",
97
+ "children": [
98
+ {
99
+ "tag": "div",
100
+ "text": "lg",
101
+ "style": {
102
+ "background": "var(--ui-color-bg-muted)",
103
+ "padding": "var(--ui-space-1)"
104
+ }
105
+ },
106
+ {
107
+ "tag": "div",
108
+ "text": "lg",
109
+ "style": {
110
+ "background": "var(--ui-color-bg-muted)",
111
+ "padding": "var(--ui-space-1)"
112
+ }
113
+ },
114
+ {
115
+ "tag": "div",
116
+ "text": "lg",
117
+ "style": {
118
+ "background": "var(--ui-color-bg-muted)",
119
+ "padding": "var(--ui-space-1)"
120
+ }
121
+ }
122
+ ]
123
+ }
124
+ ]
125
+ }
126
+ ]
127
+ }
128
+ ]
129
+ }
package/src/03-layout/cluster/index.scss ADDED
@@ -0,0 +1,18 @@
1
+ @layer primitives {
2
+ .cluster {
3
+ display: flex;
4
+ flex-wrap: wrap;
5
+ align-items: center;
6
+ gap: var(--cluster-gap, var(--ui-space-2));
7
+ }
8
+
9
+ .cluster--xs { --cluster-gap: var(--ui-space-1); }
10
+ .cluster--sm { --cluster-gap: var(--ui-space-2); }
11
+ .cluster--md { --cluster-gap: var(--ui-space-4); }
12
+ .cluster--lg { --cluster-gap: var(--ui-space-6); }
13
+
14
+ .cluster--start { justify-content: flex-start; }
15
+ .cluster--center { justify-content: center; }
16
+ .cluster--end { justify-content: flex-end; }
17
+ .cluster--between { justify-content: space-between; }
18
+ }
package/src/03-layout/container/container.api.json ADDED
@@ -0,0 +1,13 @@
1
+ {
2
+ "name": "container",
3
+ "element": "div",
4
+ "modifiers": {
5
+ "size": {
6
+ "values": ["sm", "md", "lg", "xl", "full"]
7
+ },
8
+ "center": {
9
+ "type": "boolean"
10
+ }
11
+ },
12
+ "cssVars": []
13
+ }
package/src/03-layout/container/index.scss ADDED
@@ -0,0 +1,17 @@
1
+ @layer primitives {
2
+ .container {
3
+ max-inline-size: var(--container-width, calc(var(--unit) * 120));
4
+ padding-inline: var(--ui-space-4);
5
+ }
6
+
7
+ .container--center {
8
+ margin-inline: auto;
9
+ }
10
+
11
+ /* Size modifiers */
12
+ .container--sm { --container-width: calc(var(--unit) * 80); }
13
+ .container--md { --container-width: calc(var(--unit) * 100); }
14
+ .container--lg { --container-width: calc(var(--unit) * 120); }
15
+ .container--xl { --container-width: calc(var(--unit) * 160); }
16
+ .container--full { max-inline-size: none; }
17
+ }
package/src/03-layout/flex/flex.api.json ADDED
@@ -0,0 +1,15 @@
1
+ {
2
+ "name": "flex",
3
+ "element": "div",
4
+ "modifiers": {
5
+ "row": { "type": "boolean" },
6
+ "col": { "type": "boolean" },
7
+ "wrap": { "type": "boolean" },
8
+ "items-center": { "type": "boolean" },
9
+ "justify-between": { "type": "boolean" },
10
+ "gap-1": { "type": "boolean" },
11
+ "gap-2": { "type": "boolean" },
12
+ "gap-4": { "type": "boolean" }
13
+ },
14
+ "cssVars": []
15
+ }
package/src/03-layout/flex/flex.docs.json ADDED
@@ -0,0 +1,56 @@
1
+ {
2
+ "id": "flex",
3
+ "type": "primitive",
4
+ "title": "Flex",
5
+ "description": "Flexbox layout container with direction, wrap, gap, and alignment controls.",
6
+ "api": "flex.api.json",
7
+ "sections": [
8
+ {
9
+ "title": "Default",
10
+ "examples": [
11
+ {
12
+ "html": "<div class=\"ui-flex\"><div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">A</div><div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">B</div><div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">C</div></div>",
13
+ "code": "<div class=\"ui-flex\">\n <div>A</div>\n <div>B</div>\n <div>C</div>\n</div>"
14
+ }
15
+ ]
16
+ },
17
+ {
18
+ "title": "Direction",
19
+ "examples": [
20
+ {
21
+ "layout": "stack",
22
+ "html": "<div class=\"ui-flex ui-flex--row\"><div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">Row</div><div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">Row</div></div><div class=\"ui-flex ui-flex--col\"><div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">Column</div><div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">Column</div></div>",
23
+ "code": "<div class=\"ui-flex ui-flex--row\">...</div>\n<div class=\"ui-flex ui-flex--col\">...</div>"
24
+ }
25
+ ]
26
+ },
27
+ {
28
+ "title": "Alignment",
29
+ "examples": [
30
+ {
31
+ "html": "<div class=\"ui-flex ui-flex--items-center ui-flex--justify-between\" style=\"min-height: 80px; background: var(--ui-color-bg-subtle);\"><div class=\"ui-box ui-box--p-2 ui-box--bg-muted\">Start</div><div class=\"ui-box ui-box--p-2 ui-box--bg-muted\">Center</div><div class=\"ui-box ui-box--p-2 ui-box--bg-muted\">End</div></div>",
32
+ "code": "<div class=\"ui-flex ui-flex--items-center ui-flex--justify-between\">\n ...\n</div>"
33
+ }
34
+ ]
35
+ },
36
+ {
37
+ "title": "Gap",
38
+ "examples": [
39
+ {
40
+ "layout": "stack",
41
+ "html": "<div class=\"ui-flex ui-flex--gap-1\"><div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">Gap 1</div><div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">Gap 1</div></div><div class=\"ui-flex ui-flex--gap-4\"><div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">Gap 4</div><div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">Gap 4</div></div>",
42
+ "code": "<div class=\"ui-flex ui-flex--gap-1\">...</div>\n<div class=\"ui-flex ui-flex--gap-4\">...</div>"
43
+ }
44
+ ]
45
+ },
46
+ {
47
+ "title": "Wrap",
48
+ "examples": [
49
+ {
50
+ "html": "<div class=\"ui-flex ui-flex--wrap ui-flex--gap-2\" style=\"max-width: 200px;\"><div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">Wrap</div><div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">Wrap</div><div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">Wrap</div><div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">Wrap</div></div>",
51
+ "code": "<div class=\"ui-flex ui-flex--wrap\">...</div>"
52
+ }
53
+ ]
54
+ }
55
+ ]
56
+ }
package/src/03-layout/flex/index.scss ADDED
@@ -0,0 +1,51 @@
1
+ @use '../../00-config/tokens/variables' as t;
2
+
3
+ // Flex - flexbox layout container
4
+ // Generic flexbox with direction, wrap, gap, alignment
5
+
6
+ @layer primitives {
7
+ .flex {
8
+ --_gap: var(--flex-gap, var(--ui-space-2, #{t.$space-2}));
9
+ --_direction: var(--flex-direction, row);
10
+ --_wrap: var(--flex-wrap, nowrap);
11
+ --_align: var(--flex-align, stretch);
12
+ --_justify: var(--flex-justify, flex-start);
13
+
14
+ display: flex;
15
+ flex-direction: var(--_direction);
16
+ flex-wrap: var(--_wrap);
17
+ align-items: var(--_align);
18
+ justify-content: var(--_justify);
19
+ gap: var(--_gap);
20
+ }
21
+
22
+ // Direction modifiers
23
+ .flex--row { --_direction: row; }
24
+ .flex--col { --_direction: column; }
25
+ .flex--row-reverse { --_direction: row-reverse; }
26
+ .flex--col-reverse { --_direction: column-reverse; }
27
+
28
+ // Wrap modifiers
29
+ .flex--wrap { --_wrap: wrap; }
30
+ .flex--nowrap { --_wrap: nowrap; }
31
+
32
+ // Alignment modifiers
33
+ .flex--items-start { --_align: flex-start; }
34
+ .flex--items-center { --_align: center; }
35
+ .flex--items-end { --_align: flex-end; }
36
+ .flex--items-baseline { --_align: baseline; }
37
+
38
+ // Justify modifiers
39
+ .flex--justify-start { --_justify: flex-start; }
40
+ .flex--justify-center { --_justify: center; }
41
+ .flex--justify-end { --_justify: flex-end; }
42
+ .flex--justify-between { --_justify: space-between; }
43
+ .flex--justify-around { --_justify: space-around; }
44
+
45
+ // Gap modifiers
46
+ .flex--gap-0 { --_gap: 0; }
47
+ .flex--gap-1 { --_gap: var(--ui-space-1, #{t.$space-1}); }
48
+ .flex--gap-2 { --_gap: var(--ui-space-2, #{t.$space-2}); }
49
+ .flex--gap-3 { --_gap: var(--ui-space-3, #{t.$space-3}); }
50
+ .flex--gap-4 { --_gap: var(--ui-space-4, #{t.$space-4}); }
51
+ }
package/src/03-layout/grid/grid.api.json ADDED
@@ -0,0 +1,10 @@
1
+ {
2
+ "name": "grid",
3
+ "element": "div",
4
+ "modifiers": {
5
+ "columns": {
6
+ "values": ["2", "3", "4"]
7
+ }
8
+ },
9
+ "cssVars": []
10
+ }