@aziontech/theme 2.6.0 → 4.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 (251) hide show
  1. package/README.md +73 -66
  2. package/dist/v4/globals.css +799 -79
  3. package/dist/v4/globals.scss +799 -79
  4. package/package.json +6 -23
  5. package/src/scripts/build-tokens.mjs +197 -230
  6. package/src/scripts/compile-primitives.js +79 -79
  7. package/src/scripts/compile-theme.js +70 -63
  8. package/src/scripts/css-vars.d.ts.map +1 -1
  9. package/src/scripts/css-vars.js +20 -16
  10. package/src/scripts/refs.js +2 -2
  11. package/src/scripts/resolve.d.ts.map +1 -1
  12. package/src/scripts/resolve.js +50 -47
  13. package/src/tokens/README.md +53 -74
  14. package/src/tokens/index.js +5 -5
  15. package/src/tokens/primitives/animations/animate.d.ts +10 -0
  16. package/src/tokens/primitives/animations/animate.d.ts.map +1 -1
  17. package/src/tokens/primitives/animations/animate.js +15 -5
  18. package/src/tokens/primitives/animations/ease.d.ts.map +1 -1
  19. package/src/tokens/primitives/animations/ease.js +3 -3
  20. package/src/tokens/primitives/animations/keyframes.d.ts +63 -0
  21. package/src/tokens/primitives/animations/keyframes.d.ts.map +1 -0
  22. package/src/tokens/primitives/animations/keyframes.js +69 -0
  23. package/src/tokens/primitives/border-widths.d.ts.map +1 -1
  24. package/src/tokens/primitives/border-widths.js +3 -3
  25. package/src/tokens/primitives/breakpoints.d.ts.map +1 -1
  26. package/src/tokens/primitives/breakpoints.js +3 -3
  27. package/src/tokens/primitives/colors/alpha.d.ts +80 -80
  28. package/src/tokens/primitives/colors/alpha.js +84 -84
  29. package/src/tokens/primitives/colors/brand.d.ts +22 -22
  30. package/src/tokens/primitives/colors/brand.js +28 -28
  31. package/src/tokens/primitives/colors/colors.d.ts +88 -88
  32. package/src/tokens/primitives/colors/colors.js +107 -107
  33. package/src/tokens/primitives/effects/blur.d.ts.map +1 -1
  34. package/src/tokens/primitives/effects/blur.js +3 -3
  35. package/src/tokens/primitives/effects/drop-shadow.d.ts.map +1 -1
  36. package/src/tokens/primitives/effects/drop-shadow.js +3 -3
  37. package/src/tokens/primitives/effects/inset-shadow.d.ts.map +1 -1
  38. package/src/tokens/primitives/effects/inset-shadow.js +3 -3
  39. package/src/tokens/primitives/effects/opacity.d.ts.map +1 -1
  40. package/src/tokens/primitives/effects/opacity.js +3 -3
  41. package/src/tokens/primitives/effects/perspective.js +3 -3
  42. package/src/tokens/primitives/effects/shadow.d.ts.map +1 -1
  43. package/src/tokens/primitives/effects/shadow.js +3 -3
  44. package/src/{azion/_fonts.scss → tokens/primitives/fonts.css} +19 -4
  45. package/src/tokens/primitives/ring-offset.d.ts.map +1 -1
  46. package/src/tokens/primitives/ring-offset.js +3 -3
  47. package/src/tokens/primitives/shape/aspect-video.d.ts.map +1 -1
  48. package/src/tokens/primitives/shape/aspect-video.js +2 -2
  49. package/src/tokens/primitives/shape/container.d.ts.map +1 -1
  50. package/src/tokens/primitives/shape/container.js +3 -3
  51. package/src/tokens/primitives/shape/height.d.ts.map +1 -1
  52. package/src/tokens/primitives/shape/height.js +3 -3
  53. package/src/tokens/primitives/shape/radius.d.ts.map +1 -1
  54. package/src/tokens/primitives/shape/radius.js +3 -3
  55. package/src/tokens/primitives/shape/size.d.ts.map +1 -1
  56. package/src/tokens/primitives/shape/size.js +3 -3
  57. package/src/tokens/primitives/shape/spacing.d.ts.map +1 -1
  58. package/src/tokens/primitives/shape/spacing.js +3 -3
  59. package/src/tokens/primitives/shape/width.d.ts.map +1 -1
  60. package/src/tokens/primitives/shape/width.js +4 -4
  61. package/src/tokens/primitives/typography/font-size.d.ts.map +1 -1
  62. package/src/tokens/primitives/typography/font-size.js +4 -4
  63. package/src/tokens/primitives/typography/font-weight.js +3 -3
  64. package/src/tokens/primitives/typography/leading.js +3 -3
  65. package/src/tokens/primitives/typography/line-height.d.ts.map +1 -1
  66. package/src/tokens/primitives/typography/line-height.js +3 -3
  67. package/src/tokens/primitives/typography/tracking.js +3 -3
  68. package/src/tokens/semantic/colors.js +17 -17
  69. package/src/tokens/semantic/containers.data.d.ts.map +1 -1
  70. package/src/tokens/semantic/containers.data.js +3 -3
  71. package/src/tokens/semantic/containers.js +25 -25
  72. package/src/tokens/semantic/spacings.data.d.ts.map +1 -1
  73. package/src/tokens/semantic/spacings.data.js +3 -3
  74. package/src/tokens/semantic/texts.data.d.ts +59 -28
  75. package/src/tokens/semantic/texts.data.d.ts.map +1 -1
  76. package/src/tokens/semantic/texts.data.js +90 -56
  77. package/src/tokens/theme/accent.js +6 -6
  78. package/src/tokens/theme/border.js +6 -6
  79. package/src/tokens/theme/code-sintax.d.ts +53 -0
  80. package/src/tokens/theme/code-sintax.d.ts.map +1 -0
  81. package/src/tokens/theme/code-sintax.js +28 -0
  82. package/src/tokens/theme/feedback/danger.js +6 -6
  83. package/src/tokens/theme/feedback/info.js +6 -6
  84. package/src/tokens/theme/feedback/success.js +6 -6
  85. package/src/tokens/theme/feedback/warning.js +6 -6
  86. package/src/tokens/theme/primary.js +6 -6
  87. package/src/tokens/theme/ring.js +6 -6
  88. package/src/tokens/theme/secondary.js +6 -6
  89. package/src/tokens/theme/surfaces.d.ts.map +1 -1
  90. package/src/tokens/theme/surfaces.js +6 -6
  91. package/src/tokens/theme/text.d.ts +6 -0
  92. package/src/tokens/theme/text.js +2 -0
  93. package/src/tokens/theme.d.ts +110 -110
  94. package/src/tokens/theme.js +9 -9
  95. package/default.js +0 -1
  96. package/dist/v3/globals.css +0 -855
  97. package/dist/v3/globals.scss +0 -855
  98. package/dist/v3/tailwind-preset.js +0 -510
  99. package/dist/v3/tailwind.config.js +0 -518
  100. package/src/azion/_custom.scss +0 -3
  101. package/src/azion/_extensions.scss +0 -37
  102. package/src/azion/_variables-widget.scss +0 -400
  103. package/src/azion/_variables.scss +0 -407
  104. package/src/azion/custom/_code.scss +0 -11
  105. package/src/azion/custom/_focus.scss +0 -5
  106. package/src/azion/custom/_scrollbehavior.scss +0 -6
  107. package/src/azion/custom/_selection.scss +0 -4
  108. package/src/azion/custom/_special-button.scss +0 -57
  109. package/src/azion/extended-components/_autocomplete.scss +0 -13
  110. package/src/azion/extended-components/_badge.scss +0 -53
  111. package/src/azion/extended-components/_breadcumb.scss +0 -18
  112. package/src/azion/extended-components/_button.scss +0 -134
  113. package/src/azion/extended-components/_calendar.scss +0 -310
  114. package/src/azion/extended-components/_carousel.scss +0 -9
  115. package/src/azion/extended-components/_checkbox.scss +0 -33
  116. package/src/azion/extended-components/_datatable.scss +0 -130
  117. package/src/azion/extended-components/_dialog.scss +0 -45
  118. package/src/azion/extended-components/_divider.scss +0 -37
  119. package/src/azion/extended-components/_dropdown.scss +0 -10
  120. package/src/azion/extended-components/_dropdownitem.scss +0 -13
  121. package/src/azion/extended-components/_inlinemessage.scss +0 -10
  122. package/src/azion/extended-components/_inputnumber.scss +0 -40
  123. package/src/azion/extended-components/_inputpassword.scss +0 -4
  124. package/src/azion/extended-components/_inputswitch.scss +0 -53
  125. package/src/azion/extended-components/_listbox.scss +0 -35
  126. package/src/azion/extended-components/_markdown.scss +0 -135
  127. package/src/azion/extended-components/_menuitem.scss +0 -22
  128. package/src/azion/extended-components/_multiselect.scss +0 -167
  129. package/src/azion/extended-components/_overlaypanel.scss +0 -18
  130. package/src/azion/extended-components/_picklist.scss +0 -25
  131. package/src/azion/extended-components/_progressbar.scss +0 -6
  132. package/src/azion/extended-components/_radiobutton.scss +0 -63
  133. package/src/azion/extended-components/_selectbutton.scss +0 -36
  134. package/src/azion/extended-components/_sidebar.scss +0 -28
  135. package/src/azion/extended-components/_splitbutton.scss +0 -22
  136. package/src/azion/extended-components/_tabmenu.scss +0 -21
  137. package/src/azion/extended-components/_tabview.scss +0 -41
  138. package/src/azion/extended-components/_tag.scss +0 -47
  139. package/src/azion/extended-components/_toast.scss +0 -9
  140. package/src/azion/extended-components/_tooltip.scss +0 -7
  141. package/src/azion/extended-components/_treeselect.scss +0 -10
  142. package/src/azion/extended-components/jsonform/_inputcheckbox.scss +0 -41
  143. package/src/azion/extended-components/jsonform/_inputtext.scss +0 -26
  144. package/src/azion/extended-components/jsonform/_label.scss +0 -185
  145. package/src/azion/extended-components/jsonform/_select.scss +0 -34
  146. package/src/azion/theme-base/_colors.scss +0 -18
  147. package/src/azion/theme-base/_common.scss +0 -75
  148. package/src/azion/theme-base/_components.scss +0 -103
  149. package/src/azion/theme-base/_mixins.scss +0 -250
  150. package/src/azion/theme-base/components/button/_button.scss +0 -567
  151. package/src/azion/theme-base/components/button/_speeddial.scss +0 -97
  152. package/src/azion/theme-base/components/button/_splitbutton.scss +0 -390
  153. package/src/azion/theme-base/components/data/_carousel.scss +0 -37
  154. package/src/azion/theme-base/components/data/_datatable.scss +0 -347
  155. package/src/azion/theme-base/components/data/_dataview.scss +0 -47
  156. package/src/azion/theme-base/components/data/_filter.scss +0 -138
  157. package/src/azion/theme-base/components/data/_orderlist.scss +0 -70
  158. package/src/azion/theme-base/components/data/_organizationchart.scss +0 -50
  159. package/src/azion/theme-base/components/data/_paginator.scss +0 -92
  160. package/src/azion/theme-base/components/data/_picklist.scss +0 -70
  161. package/src/azion/theme-base/components/data/_timeline.scss +0 -38
  162. package/src/azion/theme-base/components/data/_tree.scss +0 -90
  163. package/src/azion/theme-base/components/data/_treetable.scss +0 -251
  164. package/src/azion/theme-base/components/file/_fileupload.scss +0 -82
  165. package/src/azion/theme-base/components/input/_autocomplete.scss +0 -114
  166. package/src/azion/theme-base/components/input/_calendar.scss +0 -251
  167. package/src/azion/theme-base/components/input/_cascadeselect.scss +0 -106
  168. package/src/azion/theme-base/components/input/_checkbox.scss +0 -86
  169. package/src/azion/theme-base/components/input/_chips.scss +0 -53
  170. package/src/azion/theme-base/components/input/_colorpicker.scss +0 -18
  171. package/src/azion/theme-base/components/input/_dropdown.scss +0 -147
  172. package/src/azion/theme-base/components/input/_editor.scss +0 -122
  173. package/src/azion/theme-base/components/input/_inputgroup.scss +0 -74
  174. package/src/azion/theme-base/components/input/_inputnumber.scss +0 -5
  175. package/src/azion/theme-base/components/input/_inputswitch.scss +0 -62
  176. package/src/azion/theme-base/components/input/_inputtext.scss +0 -100
  177. package/src/azion/theme-base/components/input/_listbox.scss +0 -89
  178. package/src/azion/theme-base/components/input/_multiselect.scss +0 -166
  179. package/src/azion/theme-base/components/input/_password.scss +0 -33
  180. package/src/azion/theme-base/components/input/_radiobutton.scss +0 -78
  181. package/src/azion/theme-base/components/input/_rating.scss +0 -60
  182. package/src/azion/theme-base/components/input/_selectbutton.scss +0 -50
  183. package/src/azion/theme-base/components/input/_slider.scss +0 -49
  184. package/src/azion/theme-base/components/input/_togglebutton.scss +0 -52
  185. package/src/azion/theme-base/components/input/_treeselect.scss +0 -91
  186. package/src/azion/theme-base/components/menu/_breadcrumb.scss +0 -42
  187. package/src/azion/theme-base/components/menu/_contextmenu.scss +0 -39
  188. package/src/azion/theme-base/components/menu/_dock.scss +0 -95
  189. package/src/azion/theme-base/components/menu/_megamenu.scss +0 -55
  190. package/src/azion/theme-base/components/menu/_menu.scss +0 -33
  191. package/src/azion/theme-base/components/menu/_menubar.scss +0 -141
  192. package/src/azion/theme-base/components/menu/_panelmenu.scss +0 -153
  193. package/src/azion/theme-base/components/menu/_steps.scss +0 -56
  194. package/src/azion/theme-base/components/menu/_tabmenu.scss +0 -49
  195. package/src/azion/theme-base/components/menu/_tieredmenu.scss +0 -43
  196. package/src/azion/theme-base/components/messages/_inlinemessage.scss +0 -64
  197. package/src/azion/theme-base/components/messages/_message.scss +0 -100
  198. package/src/azion/theme-base/components/messages/_toast.scss +0 -100
  199. package/src/azion/theme-base/components/misc/_avatar.scss +0 -30
  200. package/src/azion/theme-base/components/misc/_badge.scss +0 -48
  201. package/src/azion/theme-base/components/misc/_blockui.scss +0 -0
  202. package/src/azion/theme-base/components/misc/_chip.scss +0 -39
  203. package/src/azion/theme-base/components/misc/_inplace.scss +0 -17
  204. package/src/azion/theme-base/components/misc/_progressbar.scss +0 -17
  205. package/src/azion/theme-base/components/misc/_progressspinner.scss +0 -49
  206. package/src/azion/theme-base/components/misc/_scrolltop.scss +0 -25
  207. package/src/azion/theme-base/components/misc/_skeleton.scss +0 -8
  208. package/src/azion/theme-base/components/misc/_tag.scss +0 -40
  209. package/src/azion/theme-base/components/misc/_terminal.scss +0 -12
  210. package/src/azion/theme-base/components/multimedia/_galleria.scss +0 -151
  211. package/src/azion/theme-base/components/multimedia/_image.scss +0 -54
  212. package/src/azion/theme-base/components/overlay/_confirmpopup.scss +0 -72
  213. package/src/azion/theme-base/components/overlay/_dialog.scss +0 -64
  214. package/src/azion/theme-base/components/overlay/_overlaypanel.scss +0 -38
  215. package/src/azion/theme-base/components/overlay/_sidebar.scss +0 -23
  216. package/src/azion/theme-base/components/overlay/_tooltip.scss +0 -33
  217. package/src/azion/theme-base/components/panel/_accordion.scss +0 -118
  218. package/src/azion/theme-base/components/panel/_card.scss +0 -30
  219. package/src/azion/theme-base/components/panel/_divider.scss +0 -40
  220. package/src/azion/theme-base/components/panel/_fieldset.scss +0 -51
  221. package/src/azion/theme-base/components/panel/_panel.scss +0 -47
  222. package/src/azion/theme-base/components/panel/_scrollpanel.scss +0 -11
  223. package/src/azion/theme-base/components/panel/_splitter.scss +0 -24
  224. package/src/azion/theme-base/components/panel/_tabview.scss +0 -66
  225. package/src/azion/theme-base/components/panel/_toolbar.scss +0 -11
  226. package/src/azion/theme-widget.scss +0 -9
  227. package/src/azion/theme.scss +0 -9
  228. package/src/azion/variables/_button.scss +0 -438
  229. package/src/azion/variables/_data.scss +0 -346
  230. package/src/azion/variables/_form.scss +0 -570
  231. package/src/azion/variables/_general.scss +0 -149
  232. package/src/azion/variables/_media.scss +0 -231
  233. package/src/azion/variables/_menu.scss +0 -287
  234. package/src/azion/variables/_message.scss +0 -145
  235. package/src/azion/variables/_misc.scss +0 -143
  236. package/src/azion/variables/_overlay.scss +0 -67
  237. package/src/azion/variables/_panel.scss +0 -327
  238. package/src/tests/primitives.html +0 -293
  239. package/src/tests/theme.html +0 -310
  240. package/src/tests/tokens.html +0 -87
  241. package/src/tokens/semantic/animations.d.ts +0 -3
  242. package/src/tokens/semantic/animations.d.ts.map +0 -1
  243. package/src/tokens/semantic/animations.js +0 -80
  244. package/src/tokens/semantic/spacings.d.ts +0 -3
  245. package/src/tokens/semantic/spacings.d.ts.map +0 -1
  246. package/src/tokens/semantic/spacings.js +0 -163
  247. package/src/tokens/semantic/texts.d.ts +0 -3
  248. package/src/tokens/semantic/texts.d.ts.map +0 -1
  249. package/src/tokens/semantic/texts.js +0 -299
  250. package/tokens.js +0 -7
  251. package/widget.js +0 -1
package/src/tests/primitives.html DELETED
@@ -1,293 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <title>Primitives — Compile &amp; Inject Test</title>
6
- <style>
7
- :root { color-scheme: dark; }
8
- body {
9
- font-family: ui-sans-serif, system-ui, sans-serif;
10
- margin: 2rem;
11
- background: #fafafa;
12
- color: #171717;
13
- }
14
- h1 { margin: 0 0 0.25rem; font-size: 1.25rem; }
15
- h2 {
16
- font-size: 0.875rem;
17
- text-transform: uppercase;
18
- letter-spacing: 0.04em;
19
- color: #525252;
20
- margin: 2rem 0 0.75rem;
21
- }
22
- .meta { color: #525252; font-size: 0.875rem; margin-bottom: 1rem; }
23
- .count { color: #16833f; font-weight: 600; }
24
- code {
25
- font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
26
- font-size: 0.8rem;
27
- }
28
- pre {
29
- background: #fff;
30
- border: 1px solid #e5e5e5;
31
- border-radius: 6px;
32
- padding: 1rem;
33
- max-height: 70vh;
34
- overflow: auto;
35
- font-size: 0.75rem;
36
- line-height: 1.5;
37
- white-space: pre;
38
- }
39
-
40
- /* Sections */
41
- .grid {
42
- display: grid;
43
- grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
44
- gap: 0.5rem;
45
- }
46
- .card {
47
- border: 1px solid #e5e5e5;
48
- border-radius: 6px;
49
- overflow: hidden;
50
- background: #fff;
51
- font-size: 0.7rem;
52
- }
53
- .card .swatch { height: 48px; }
54
- .card .label { padding: 4px 6px; font-family: ui-monospace, monospace; }
55
- .card .value { padding: 0 6px 6px; color: #737373; font-family: ui-monospace, monospace; }
56
-
57
- /* Spacing/size demo */
58
- .scale-row { display: flex; align-items: center; gap: 0.75rem; padding: 4px 0; font-size: 0.75rem; }
59
- .scale-row .bar { background: #FE601F; height: 12px; border-radius: 2px; }
60
- .scale-row .name { width: 80px; font-family: ui-monospace, monospace; }
61
- .scale-row .v { color: #737373; font-family: ui-monospace, monospace; }
62
-
63
- /* Radius demo */
64
- .radius-card .swatch { background: #e5e5e5; }
65
-
66
- /* Type demo */
67
- .type-row { display: flex; align-items: baseline; gap: 0.75rem; padding: 6px 0; border-bottom: 1px dashed #e5e5e5; }
68
- .type-row .name { width: 120px; font-family: ui-monospace, monospace; font-size: 0.7rem; color: #525252; }
69
- .type-row .sample { flex: 1; }
70
- .type-row .v { color: #737373; font-family: ui-monospace, monospace; font-size: 0.7rem; }
71
-
72
- /* Blur demo */
73
- .blur-card .swatch {
74
- background: linear-gradient(135deg, #FE601F, #8A84EC);
75
- position: relative;
76
- }
77
- .blur-card .swatch::after {
78
- content: "";
79
- position: absolute;
80
- inset: 0;
81
- backdrop-filter: blur(var(--demo-blur, 0));
82
- }
83
- </style>
84
- </head>
85
- <body>
86
- <h1>Primitives — Compile &amp; Inject Test</h1>
87
- <p class="meta">
88
- <span class="count" id="count">…</span> CSS variables injected via
89
- <code>&lt;style data-azion-primitives&gt;</code>
90
- </p>
91
-
92
- <h2>Colors</h2>
93
- <div class="grid" id="colors"></div>
94
-
95
- <h2>Spacing</h2>
96
- <div id="spacing"></div>
97
-
98
- <h2>Size</h2>
99
- <div id="size"></div>
100
-
101
- <h2>Radius</h2>
102
- <div class="grid" id="radius"></div>
103
-
104
- <h2>Container</h2>
105
- <div id="container"></div>
106
-
107
- <h2>Font Family</h2>
108
- <div id="font-family"></div>
109
-
110
- <h2>Font Size + Line Height</h2>
111
- <div id="typography"></div>
112
-
113
- <h2>Blur</h2>
114
- <div class="grid" id="blur"></div>
115
-
116
- <h2>Opacity</h2>
117
- <div class="grid" id="opacity"></div>
118
-
119
- <h2>Breakpoints / Border / Ring-offset</h2>
120
- <pre id="misc"></pre>
121
-
122
- <h2>Full Generated CSS</h2>
123
- <pre id="css"></pre>
124
-
125
- <script type="module">
126
- import {
127
- compilePrimitivesCss,
128
- compilePrimitivesVars,
129
- injectPrimitivesCss,
130
- } from '../scripts/compile-primitives.js';
131
-
132
- const styleTag = injectPrimitivesCss();
133
- const vars = compilePrimitivesVars();
134
- const css = compilePrimitivesCss();
135
-
136
- document.getElementById('count').textContent = Object.keys(vars).length;
137
- document.getElementById('css').textContent = css;
138
-
139
- const entriesStartingWith = (prefix) =>
140
- Object.entries(vars).filter(([k]) => k.startsWith(prefix));
141
- const entriesMatching = (regex) =>
142
- Object.entries(vars).filter(([k]) => regex.test(k));
143
-
144
- // --- Colors (skip alpha for clarity)
145
- const colorEntries = entriesStartingWith('--color-')
146
- .filter(([k]) => !k.startsWith('--color-alpha-'));
147
- const colorsEl = document.getElementById('colors');
148
- colorEntries.forEach(([name, value]) => {
149
- const el = document.createElement('div');
150
- el.className = 'card';
151
- el.innerHTML = `
152
- <div class="swatch" style="background: var(${name});"></div>
153
- <div class="label">${name.replace('--color-', '')}</div>
154
- <div class="value">${value}</div>
155
- `;
156
- colorsEl.appendChild(el);
157
- });
158
-
159
- // --- Spacing
160
- const spacingEntries = entriesStartingWith('--spacing-');
161
- const spacingEl = document.getElementById('spacing');
162
- spacingEntries.forEach(([name, value]) => {
163
- const row = document.createElement('div');
164
- row.className = 'scale-row';
165
- row.innerHTML = `
166
- <span class="name">${name.replace('--', '')}</span>
167
- <span class="bar" style="width: var(${name});"></span>
168
- <span class="v">${value}</span>
169
- `;
170
- spacingEl.appendChild(row);
171
- });
172
-
173
- // --- Size
174
- const sizeEntries = entriesStartingWith('--size-');
175
- const sizeEl = document.getElementById('size');
176
- sizeEntries.forEach(([name, value]) => {
177
- const row = document.createElement('div');
178
- row.className = 'scale-row';
179
- row.innerHTML = `
180
- <span class="name">${name.replace('--', '')}</span>
181
- <span class="bar" style="width: var(${name});"></span>
182
- <span class="v">${value}</span>
183
- `;
184
- sizeEl.appendChild(row);
185
- });
186
-
187
- // --- Radius
188
- const radiusEntries = entriesStartingWith('--radius-');
189
- const radiusEl = document.getElementById('radius');
190
- radiusEntries.forEach(([name, value]) => {
191
- const el = document.createElement('div');
192
- el.className = 'card radius-card';
193
- el.innerHTML = `
194
- <div class="swatch" style="border-radius: var(${name});"></div>
195
- <div class="label">${name.replace('--', '')}</div>
196
- <div class="value">${value}</div>
197
- `;
198
- radiusEl.appendChild(el);
199
- });
200
-
201
- // --- Container
202
- const containerEntries = entriesStartingWith('--container-');
203
- const containerEl = document.getElementById('container');
204
- containerEntries.forEach(([name, value]) => {
205
- const row = document.createElement('div');
206
- row.className = 'scale-row';
207
- row.innerHTML = `
208
- <span class="name">${name.replace('--', '')}</span>
209
- <span class="bar" style="width: min(var(${name}), 100%);"></span>
210
- <span class="v">${value}</span>
211
- `;
212
- containerEl.appendChild(row);
213
- });
214
-
215
- // --- Font family
216
- const fontFamilyEntries = entriesStartingWith('--font-')
217
- .filter(([name]) => !name.startsWith('--font-weight-'));
218
- const fontFamilyEl = document.getElementById('font-family');
219
- fontFamilyEntries.forEach(([name, value]) => {
220
- const row = document.createElement('div');
221
- row.className = 'type-row';
222
- row.innerHTML = `
223
- <span class="name">${name.replace('--', '')}</span>
224
- <span class="sample" style="font-family: var(${name});">The quick brown fox jumps over the lazy dog</span>
225
- <span class="v">${value}</span>
226
- `;
227
- fontFamilyEl.appendChild(row);
228
- });
229
-
230
- // --- Font size + line height
231
- const fontSizeEntries = entriesStartingWith('--font-size-');
232
- const typographyEl = document.getElementById('typography');
233
- fontSizeEntries.forEach(([name, value]) => {
234
- const row = document.createElement('div');
235
- row.className = 'type-row';
236
- row.innerHTML = `
237
- <span class="name">${name.replace('--', '')}</span>
238
- <span class="sample" style="font-size: var(${name}); line-height: 1.2;">Aa Bb 123</span>
239
- <span class="v">${value}</span>
240
- `;
241
- typographyEl.appendChild(row);
242
- });
243
- const lineHeightEntries = entriesStartingWith('--line-height-');
244
- lineHeightEntries.forEach(([name, value]) => {
245
- const row = document.createElement('div');
246
- row.className = 'type-row';
247
- row.innerHTML = `
248
- <span class="name">${name.replace('--', '')}</span>
249
- <span class="sample" style="line-height: var(${name}); font-size: 14px;">line A<br/>line B</span>
250
- <span class="v">${value}</span>
251
- `;
252
- typographyEl.appendChild(row);
253
- });
254
-
255
- // --- Blur
256
- const blurEntries = entriesStartingWith('--blur-');
257
- const blurEl = document.getElementById('blur');
258
- blurEntries.forEach(([name, value]) => {
259
- const el = document.createElement('div');
260
- el.className = 'card blur-card';
261
- el.innerHTML = `
262
- <div class="swatch" style="--demo-blur: var(${name});"></div>
263
- <div class="label">${name.replace('--', '')}</div>
264
- <div class="value">${value}</div>
265
- `;
266
- blurEl.appendChild(el);
267
- });
268
-
269
- // --- Opacity
270
- const opacityEntries = entriesStartingWith('--opacity-');
271
- const opacityEl = document.getElementById('opacity');
272
- opacityEntries.forEach(([name, value]) => {
273
- const el = document.createElement('div');
274
- el.className = 'card';
275
- el.innerHTML = `
276
- <div class="swatch" style="background: #FE601F; opacity: var(${name});"></div>
277
- <div class="label">${name.replace('--', '')}</div>
278
- <div class="value">${value}</div>
279
- `;
280
- opacityEl.appendChild(el);
281
- });
282
-
283
- // --- Misc (breakpoints, border, ring-offset)
284
- const misc = entriesMatching(/^--(breakpoint|border|ring-offset)/);
285
- document.getElementById('misc').textContent = misc
286
- .map(([k, v]) => `${k}: ${v};`)
287
- .join('\n');
288
-
289
- console.info('[primitives] injected', styleTag);
290
- console.info('[primitives] vars', vars);
291
- </script>
292
- </body>
293
- </html>
package/src/tests/theme.html DELETED
@@ -1,310 +0,0 @@
1
- <!doctype html>
2
- <html lang="en" data-theme="light">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <title>Theme — Light/Dark Toggle Test</title>
6
- <style>
7
- html { color-scheme: light; }
8
- html[data-theme="dark"] { color-scheme: dark; }
9
-
10
- body {
11
- font-family: ui-sans-serif, system-ui, sans-serif;
12
- margin: 0;
13
- padding: 2rem;
14
- background: var(--bg-canvas);
15
- color: var(--text-default);
16
- min-height: 100vh;
17
- transition: background-color 0.2s ease, color 0.2s ease;
18
- }
19
- h1 { margin: 0 0 0.25rem; font-size: 1.25rem; }
20
- h2 {
21
- font-size: 0.875rem;
22
- text-transform: uppercase;
23
- letter-spacing: 0.04em;
24
- color: var(--text-muted);
25
- margin: 2rem 0 0.75rem;
26
- }
27
- .meta { color: var(--text-muted); font-size: 0.875rem; margin: 0 0 1.5rem; }
28
- code {
29
- font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
30
- font-size: 0.8rem;
31
- }
32
-
33
- .topbar {
34
- display: flex;
35
- align-items: center;
36
- gap: 1rem;
37
- margin-bottom: 1rem;
38
- }
39
- .toggle {
40
- background: var(--primary);
41
- color: var(--primary-contrast);
42
- border: 1px solid var(--primary);
43
- padding: 0.5rem 1rem;
44
- border-radius: 6px;
45
- cursor: pointer;
46
- font: inherit;
47
- font-weight: 600;
48
- }
49
- .toggle:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
50
- .toggle:active { background: var(--primary-active); }
51
- .toggle:focus-visible { outline: 2px solid var(--ring-color); outline-offset: 2px; }
52
- .badge {
53
- font-family: ui-monospace, monospace;
54
- font-size: 0.75rem;
55
- padding: 0.2rem 0.5rem;
56
- border-radius: 4px;
57
- background: var(--bg-surface);
58
- border: 1px solid var(--border-default);
59
- color: var(--text-muted);
60
- }
61
-
62
- /* Grids and cards */
63
- .grid {
64
- display: grid;
65
- grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
66
- gap: 0.5rem;
67
- }
68
- .card {
69
- border: 1px solid var(--border-default);
70
- border-radius: 6px;
71
- overflow: hidden;
72
- background: var(--bg-surface);
73
- font-size: 0.7rem;
74
- }
75
- .card .swatch {
76
- height: 60px;
77
- background-image:
78
- linear-gradient(45deg, rgba(0,0,0,.06) 25%, transparent 25%),
79
- linear-gradient(-45deg, rgba(0,0,0,.06) 25%, transparent 25%),
80
- linear-gradient(45deg, transparent 75%, rgba(0,0,0,.06) 75%),
81
- linear-gradient(-45deg, transparent 75%, rgba(0,0,0,.06) 75%);
82
- background-size: 12px 12px;
83
- background-position: 0 0, 0 6px, 6px -6px, -6px 0;
84
- }
85
- .card .swatch-inner {
86
- width: 100%;
87
- height: 100%;
88
- }
89
- .card .label {
90
- padding: 4px 6px;
91
- font-family: ui-monospace, monospace;
92
- color: var(--text-default);
93
- }
94
- .card .value {
95
- padding: 0 6px 6px;
96
- color: var(--text-muted);
97
- font-family: ui-monospace, monospace;
98
- }
99
-
100
- /* Demos */
101
- .demo-row {
102
- display: flex;
103
- flex-wrap: wrap;
104
- gap: 0.5rem;
105
- align-items: center;
106
- margin-bottom: 0.5rem;
107
- }
108
- .btn {
109
- padding: 0.4rem 0.9rem;
110
- border-radius: 6px;
111
- font: inherit;
112
- font-size: 0.85rem;
113
- cursor: pointer;
114
- border: 1px solid transparent;
115
- }
116
- .btn-primary {
117
- background: var(--primary);
118
- color: var(--primary-contrast);
119
- border-color: var(--primary);
120
- }
121
- .btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
122
- .btn-secondary {
123
- background: var(--secondary);
124
- color: var(--secondary-contrast);
125
- border-color: var(--secondary);
126
- }
127
- .btn-secondary:hover { background: var(--secondary-hover); border-color: var(--secondary-hover); }
128
- .btn-accent {
129
- background: var(--accent);
130
- color: var(--accent-contrast);
131
- border-color: var(--accent);
132
- }
133
- .btn-accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
134
-
135
- .alert {
136
- padding: 0.75rem 1rem;
137
- border-radius: 6px;
138
- border: 1px solid;
139
- margin-bottom: 0.5rem;
140
- font-size: 0.875rem;
141
- }
142
- .alert-success { background: var(--success); border-color: var(--success-border); color: var(--success-contrast); }
143
- .alert-warning { background: var(--warning); border-color: var(--warning-border); color: var(--warning-contrast); }
144
- .alert-danger { background: var(--danger); border-color: var(--danger-border); color: var(--danger-contrast); }
145
- .alert-info { background: var(--info); border-color: var(--info-border); color: var(--info-contrast); }
146
-
147
- .surface-stack {
148
- display: flex;
149
- flex-wrap: wrap;
150
- gap: 0.75rem;
151
- }
152
- .surface-tile {
153
- flex: 1 1 200px;
154
- padding: 1rem;
155
- border-radius: 6px;
156
- border: 1px solid var(--border-default);
157
- }
158
- .surface-tile.canvas { background: var(--bg-canvas); }
159
- .surface-tile.surface { background: var(--bg-surface); }
160
- .surface-tile.raised { background: var(--bg-surface-raised); }
161
- .surface-tile.overlay { background: var(--bg-surface-overlay); }
162
- .surface-tile.selected { background: var(--bg-selected); }
163
- .surface-tile.contrast { background: var(--bg-contrast); color: var(--bg-surface); }
164
-
165
- pre {
166
- background: var(--bg-surface);
167
- border: 1px solid var(--border-default);
168
- border-radius: 6px;
169
- padding: 1rem;
170
- max-height: 60vh;
171
- overflow: auto;
172
- font-size: 0.72rem;
173
- line-height: 1.5;
174
- white-space: pre;
175
- color: var(--text-default);
176
- }
177
- </style>
178
- </head>
179
- <body>
180
- <div class="topbar">
181
- <h1 style="flex:1;">Theme — Light/Dark Toggle Test</h1>
182
- <span class="badge" id="theme-label">data-theme=light</span>
183
- <button class="toggle" id="toggle" type="button">Switch to dark</button>
184
- </div>
185
- <p class="meta">
186
- <span id="count">…</span> light + <span id="count-dark">…</span> dark vars injected via
187
- <code>&lt;style data-azion-theme&gt;</code>
188
- </p>
189
-
190
- <h2>Buttons</h2>
191
- <div class="demo-row">
192
- <button class="btn btn-primary">Primary</button>
193
- <button class="btn btn-secondary">Secondary</button>
194
- <button class="btn btn-accent">Accent</button>
195
- </div>
196
-
197
- <h2>Feedback Alerts</h2>
198
- <div class="alert alert-success">Success — operation completed.</div>
199
- <div class="alert alert-warning">Warning — please review the details.</div>
200
- <div class="alert alert-danger">Danger — something went wrong.</div>
201
- <div class="alert alert-info">Info — for your awareness.</div>
202
-
203
- <h2>Backgrounds</h2>
204
- <div class="surface-stack">
205
- <div class="surface-tile canvas">bg-canvas</div>
206
- <div class="surface-tile surface">bg-surface</div>
207
- <div class="surface-tile raised">bg-surface-raised</div>
208
- <div class="surface-tile overlay">bg-surface-overlay</div>
209
- <div class="surface-tile selected">bg-selected</div>
210
- <div class="surface-tile contrast">bg-contrast</div>
211
- </div>
212
-
213
- <h2>Surfaces (semantic alias for grays)</h2>
214
- <div class="grid" id="surfaces"></div>
215
-
216
- <h2>Primary / Secondary / Accent</h2>
217
- <div class="grid" id="brand"></div>
218
-
219
- <h2>Backgrounds (token swatches)</h2>
220
- <div class="grid" id="bg"></div>
221
-
222
- <h2>Borders / Text / Ring</h2>
223
- <div class="grid" id="bw"></div>
224
-
225
- <h2>Feedback (token swatches)</h2>
226
- <div class="grid" id="feedback"></div>
227
-
228
- <h2>Full Generated CSS</h2>
229
- <pre id="css"></pre>
230
-
231
- <script type="module">
232
- import {
233
- compileThemeCss,
234
- compileThemeVars,
235
- injectThemeCss,
236
- } from '../scripts/compile-theme.js';
237
-
238
- const styleTag = injectThemeCss();
239
- const all = compileThemeVars();
240
- const css = compileThemeCss();
241
-
242
- document.getElementById('count').textContent = Object.keys(all.light).length;
243
- document.getElementById('count-dark').textContent = Object.keys(all.dark).length;
244
- document.getElementById('css').textContent = css;
245
-
246
- // Toggle
247
- const toggle = document.getElementById('toggle');
248
- const label = document.getElementById('theme-label');
249
- const applyTheme = (next) => {
250
- document.documentElement.setAttribute('data-theme', next);
251
- label.textContent = `data-theme=${next}`;
252
- toggle.textContent = next === 'dark' ? 'Switch to light' : 'Switch to dark';
253
- };
254
- toggle.addEventListener('click', () => {
255
- const current = document.documentElement.getAttribute('data-theme') || 'light';
256
- applyTheme(current === 'dark' ? 'light' : 'dark');
257
- });
258
- applyTheme('light');
259
-
260
- // Build swatch grids using the current (light) vars for label/value display.
261
- // The actual color rendered is the live var, which switches on toggle.
262
- const mkCard = (name) => {
263
- const card = document.createElement('div');
264
- card.className = 'card';
265
- card.innerHTML = `
266
- <div class="swatch"><div class="swatch-inner" style="background: var(${name});"></div></div>
267
- <div class="label">${name.replace('--', '')}</div>
268
- <div class="value" data-var="${name}"></div>
269
- `;
270
- return card;
271
- };
272
-
273
- const fillGroup = (id, predicate) => {
274
- const el = document.getElementById(id);
275
- Object.keys(all.light)
276
- .filter(predicate)
277
- .forEach((name) => el.appendChild(mkCard(name)));
278
- };
279
-
280
- fillGroup('surfaces', (k) => k.startsWith('--surface-'));
281
- fillGroup('brand', (k) =>
282
- /^--(primary|secondary|accent)(-|$)/.test(k) && !k.startsWith('--accent-')
283
- ? true
284
- : /^--(primary|secondary|accent)(-|$)/.test(k));
285
- fillGroup('bg', (k) => k.startsWith('--bg-'));
286
- fillGroup('bw', (k) =>
287
- k.startsWith('--border-') || k.startsWith('--text-') || k.startsWith('--ring-'));
288
- fillGroup('feedback', (k) =>
289
- /^--(success|warning|danger|info)(-|$)/.test(k));
290
-
291
- // Live-update the value labels and CSS pre when toggling.
292
- const refreshValues = () => {
293
- const theme = document.documentElement.getAttribute('data-theme') || 'light';
294
- const map = all[theme];
295
- document.querySelectorAll('[data-var]').forEach((el) => {
296
- const name = el.getAttribute('data-var');
297
- el.textContent = map[name] ?? '';
298
- });
299
- };
300
- refreshValues();
301
- new MutationObserver(refreshValues).observe(document.documentElement, {
302
- attributes: true,
303
- attributeFilter: ['data-theme'],
304
- });
305
-
306
- console.info('[theme] injected', styleTag);
307
- console.info('[theme] vars', all);
308
- </script>
309
- </body>
310
- </html>
package/src/tests/tokens.html DELETED
@@ -1,87 +0,0 @@
1
- <!doctype html>
2
- <html lang="en" data-theme="light">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1" />
6
- <title>Tokens — Builder Output Test</title>
7
- <link rel="stylesheet" href="../../dist/v3/output.css" />
8
- <style>
9
- body {
10
- margin: 0;
11
- padding: 2rem;
12
- font-family: ui-sans-serif, system-ui, sans-serif;
13
- background: var(--color-base-white);
14
- color: var(--color-gray-900);
15
- }
16
- .swatch { display: inline-block; width: 64px; height: 64px; border-radius: 6px; border: 1px solid var(--color-gray-200); margin-right: 8px; vertical-align: middle; }
17
- .row { display: flex; align-items: center; gap: 12px; margin: 8px 0; }
18
- .label { font-family: ui-monospace, monospace; font-size: 0.8rem; color: var(--color-gray-700); }
19
- section { margin-bottom: 2.5rem; border: 1px dashed var(--color-gray-200); padding: 1rem; border-radius: 8px; }
20
- h1 { margin: 0 0 0.5rem; }
21
- h2 { margin: 0 0 1rem; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-gray-600); }
22
- .vp-tag { position: fixed; top: 8px; right: 8px; font-family: ui-monospace, monospace; font-size: 0.75rem; padding: 4px 8px; border-radius: 4px; background: var(--color-gray-100); color: var(--color-gray-700); }
23
- </style>
24
- </head>
25
- <body>
26
- <div class="vp-tag" id="vp">–</div>
27
-
28
- <h1>Tokens — Builder Output</h1>
29
- <p class="label">Redimensione a janela: 0–639 (_), 640–767 (sm), 768+ (md), 1280+ (xl).</p>
30
-
31
- <section>
32
- <h2>Typography (responsive)</h2>
33
- <p class="text-heading-2xl">heading-2xl — responsive</p>
34
- <p class="text-heading-xl">heading-xl — responsive</p>
35
- <p class="text-heading-lg">heading-lg — responsive</p>
36
- <p class="text-heading-md">heading-md — responsive</p>
37
- <p class="text-heading-sm">heading-sm — responsive</p>
38
- <p class="text-body-lg">body-lg — sm only at md</p>
39
- <p class="text-body-md">body-md — static</p>
40
- <p class="text-body-md">
41
- body-md with <a href="#" class="text-link">inline text-link</a>
42
- </p>
43
- <p class="text-overline-md">overline-md — sm only at sm</p>
44
- </section>
45
-
46
- <section>
47
- <h2>Spacing (gap / padding)</h2>
48
- <div class="gap-spacing-elements-xxl" style="display: flex; background: var(--color-gray-100); padding: 8px;">
49
- <div style="background: var(--color-violet-300); width: 40px; height: 40px;"></div>
50
- <div style="background: var(--color-violet-300); width: 40px; height: 40px;"></div>
51
- <div style="background: var(--color-violet-300); width: 40px; height: 40px;"></div>
52
- </div>
53
- <p class="label">gap-spacing-elements-xxl (gap muda em sm e xl)</p>
54
-
55
- <div class="p-spacing-elements-xl" style="background: var(--color-orange-200); display: inline-block;">
56
- <div style="background: var(--color-orange-500); width: 60px; height: 30px;"></div>
57
- </div>
58
- <p class="label">p-spacing-elements-xl (padding muda em sm e xl)</p>
59
- </section>
60
-
61
- <section>
62
- <h2>Containers</h2>
63
- <div class="px-container py-container max-container-width" style="background: var(--color-yellow-100); margin: 0 auto;">
64
- <p style="margin: 0;">.px-container .py-container .max-container-width — viewport-aware</p>
65
- </div>
66
- </section>
67
-
68
- <section>
69
- <h2>Tailwind utilities via preset (bg-gray-* etc.)</h2>
70
- <div class="row"><span class="swatch bg-gray-100"></span><span class="label">bg-gray-100</span></div>
71
- <div class="row"><span class="swatch bg-violet-500"></span><span class="label">bg-violet-500</span></div>
72
- <div class="row"><span class="swatch bg-orange-500"></span><span class="label">bg-orange-500</span></div>
73
- <div class="row"><span class="swatch bg-primary-500"></span><span class="label">bg-primary-500 (brand)</span></div>
74
- </section>
75
-
76
- <script>
77
- const vp = document.getElementById('vp');
78
- const update = () => {
79
- const w = window.innerWidth;
80
- const bp = w >= 1536 ? '2xl' : w >= 1280 ? 'xl' : w >= 1024 ? 'lg' : w >= 768 ? 'md' : w >= 640 ? 'sm' : '_';
81
- vp.textContent = `${w}px → ${bp}`;
82
- };
83
- window.addEventListener('resize', update);
84
- update();
85
- </script>
86
- </body>
87
- </html>