@aziontech/theme 1.13.0 → 2.0.1

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 (76) hide show
  1. package/README.md +1 -1
  2. package/package.json +19 -21
  3. package/src/scripts/build-tokens.mjs +391 -0
  4. package/src/scripts/compile-primitives.js +165 -0
  5. package/src/scripts/compile-theme.js +117 -0
  6. package/src/{tokens/build → scripts}/css-vars.js +10 -9
  7. package/src/{tokens/build → scripts}/resolve.js +2 -0
  8. package/src/tests/primitives.html +293 -0
  9. package/src/tests/theme.html +310 -0
  10. package/src/tests/tokens.html +84 -0
  11. package/src/tokens/README.md +306 -272
  12. package/src/tokens/index.js +4 -12
  13. package/src/tokens/primitives/animations/animate.js +26 -0
  14. package/src/tokens/primitives/animations/ease.js +7 -0
  15. package/src/tokens/primitives/border-widths.js +9 -0
  16. package/src/tokens/primitives/breakpoints.js +9 -0
  17. package/src/tokens/primitives/colors/alpha.js +104 -0
  18. package/src/tokens/primitives/colors/brand.js +40 -0
  19. package/src/tokens/primitives/colors/colors.js +142 -0
  20. package/src/tokens/primitives/effects/blur.js +11 -0
  21. package/src/tokens/primitives/effects/drop-shadow.js +10 -0
  22. package/src/tokens/primitives/effects/inset-shadow.js +7 -0
  23. package/src/tokens/primitives/effects/opacity.js +8 -0
  24. package/src/tokens/primitives/effects/perspective.js +9 -0
  25. package/src/tokens/primitives/effects/shadow.js +11 -0
  26. package/src/tokens/primitives/ring-offset.js +5 -0
  27. package/src/tokens/primitives/shape/aspect-video.js +3 -0
  28. package/src/tokens/primitives/shape/container.js +17 -0
  29. package/src/tokens/primitives/shape/height.js +32 -0
  30. package/src/tokens/primitives/shape/radius.js +13 -0
  31. package/src/tokens/primitives/shape/shape.js +12 -0
  32. package/src/tokens/primitives/shape/size.js +32 -0
  33. package/src/tokens/primitives/shape/spacing.js +33 -0
  34. package/src/tokens/primitives/shape/width.js +19 -0
  35. package/src/tokens/primitives/typography/font-family.js +7 -0
  36. package/src/tokens/primitives/typography/font-size.js +30 -0
  37. package/src/tokens/primitives/typography/font-weight.js +13 -0
  38. package/src/tokens/primitives/typography/leading.js +9 -0
  39. package/src/tokens/primitives/typography/line-height.js +13 -0
  40. package/src/tokens/primitives/typography/tracking.js +10 -0
  41. package/src/{tailwind/semantic-animations-plugin.js → tokens/semantic/animations.js} +19 -21
  42. package/src/tokens/semantic/colors.js +138 -0
  43. package/src/tokens/semantic/containers.data.js +18 -0
  44. package/src/tokens/semantic/containers.js +70 -0
  45. package/src/tokens/semantic/spacings.data.js +18 -0
  46. package/src/tokens/semantic/spacings.js +163 -0
  47. package/src/tokens/semantic/texts.data.js +103 -0
  48. package/src/{tailwind/semantic-texts-plugin.js → tokens/semantic/texts.js} +30 -9
  49. package/src/tokens/theme/accent.js +18 -0
  50. package/src/tokens/theme/background.js +32 -0
  51. package/src/tokens/theme/border.js +18 -0
  52. package/src/tokens/theme/feedback/danger.js +16 -0
  53. package/src/tokens/theme/feedback/info.js +16 -0
  54. package/src/tokens/theme/feedback/success.js +16 -0
  55. package/src/tokens/theme/feedback/warning.js +16 -0
  56. package/src/tokens/theme/primary.js +18 -0
  57. package/src/tokens/theme/ring.js +12 -0
  58. package/src/tokens/theme/secondary.js +18 -0
  59. package/src/tokens/theme/surfaces.js +23 -0
  60. package/src/tokens/theme/text.js +18 -0
  61. package/src/tokens/theme.js +32 -0
  62. package/colors-brand.js +0 -24
  63. package/src/tailwind/semantic-colors-plugin.js +0 -91
  64. package/src/tailwind/semantic-spacing-plugin.js +0 -151
  65. package/src/tailwind/tailwind-theme.js +0 -54
  66. package/src/tokens/build/preset.js +0 -62
  67. package/src/tokens/build/tailwind-flat-colors.js +0 -75
  68. package/src/tokens/build/tailwind-helper.js +0 -12
  69. package/src/tokens/build/tailwind-plugin.js +0 -175
  70. package/src/tokens/colors-brand.js +0 -24
  71. package/src/tokens/primitives/brand.js +0 -69
  72. package/src/tokens/primitives/colors.js +0 -144
  73. package/src/tokens/semantic/backgrounds.js +0 -46
  74. package/src/tokens/semantic/borders.js +0 -44
  75. package/src/tokens/semantic/text.js +0 -48
  76. /package/src/{tokens/build → scripts}/refs.js +0 -0
package/src/tests/theme.html ADDED
@@ -0,0 +1,310 @@
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 ADDED
@@ -0,0 +1,84 @@
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-overline-md">overline-md — sm only at sm</p>
41
+ </section>
42
+
43
+ <section>
44
+ <h2>Spacing (gap / padding)</h2>
45
+ <div class="gap-spacing-elements-xxl" style="display: flex; background: var(--color-gray-100); padding: 8px;">
46
+ <div style="background: var(--color-violet-300); width: 40px; height: 40px;"></div>
47
+ <div style="background: var(--color-violet-300); width: 40px; height: 40px;"></div>
48
+ <div style="background: var(--color-violet-300); width: 40px; height: 40px;"></div>
49
+ </div>
50
+ <p class="label">gap-spacing-elements-xxl (gap muda em sm e xl)</p>
51
+
52
+ <div class="p-spacing-elements-xl" style="background: var(--color-orange-200); display: inline-block;">
53
+ <div style="background: var(--color-orange-500); width: 60px; height: 30px;"></div>
54
+ </div>
55
+ <p class="label">p-spacing-elements-xl (padding muda em sm e xl)</p>
56
+ </section>
57
+
58
+ <section>
59
+ <h2>Containers</h2>
60
+ <div class="px-container py-container max-container-width" style="background: var(--color-yellow-100); margin: 0 auto;">
61
+ <p style="margin: 0;">.px-container .py-container .max-container-width — viewport-aware</p>
62
+ </div>
63
+ </section>
64
+
65
+ <section>
66
+ <h2>Tailwind utilities via preset (bg-gray-* etc.)</h2>
67
+ <div class="row"><span class="swatch bg-gray-100"></span><span class="label">bg-gray-100</span></div>
68
+ <div class="row"><span class="swatch bg-violet-500"></span><span class="label">bg-violet-500</span></div>
69
+ <div class="row"><span class="swatch bg-orange-500"></span><span class="label">bg-orange-500</span></div>
70
+ <div class="row"><span class="swatch bg-primary-500"></span><span class="label">bg-primary-500 (brand)</span></div>
71
+ </section>
72
+
73
+ <script>
74
+ const vp = document.getElementById('vp');
75
+ const update = () => {
76
+ const w = window.innerWidth;
77
+ const bp = w >= 1536 ? '2xl' : w >= 1280 ? 'xl' : w >= 1024 ? 'lg' : w >= 768 ? 'md' : w >= 640 ? 'sm' : '_';
78
+ vp.textContent = `${w}px → ${bp}`;
79
+ };
80
+ window.addEventListener('resize', update);
81
+ update();
82
+ </script>
83
+ </body>
84
+ </html>