@almadar/ui 4.57.5 → 5.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 (41) hide show
  1. package/dist/avl/index.cjs +270 -69
  2. package/dist/avl/index.js +270 -69
  3. package/dist/components/index.cjs +101 -68
  4. package/dist/components/index.js +101 -68
  5. package/dist/context/index.cjs +199 -0
  6. package/dist/context/index.js +199 -0
  7. package/dist/context/themeTokens.d.ts +1 -1
  8. package/dist/docs/index.cjs +21 -21
  9. package/dist/docs/index.js +21 -21
  10. package/dist/marketing/index.cjs +18 -18
  11. package/dist/marketing/index.js +18 -18
  12. package/dist/providers/index.cjs +101 -68
  13. package/dist/providers/index.js +101 -68
  14. package/dist/runtime/index.cjs +270 -69
  15. package/dist/runtime/index.js +270 -69
  16. package/package.json +2 -2
  17. package/tailwind-preset.cjs +118 -3
  18. package/themes/_contract.md +198 -0
  19. package/themes/almadar-website.css +212 -0
  20. package/themes/almadar.css +210 -0
  21. package/themes/arctic.css +210 -0
  22. package/themes/atelier.css +427 -0
  23. package/themes/copper.css +210 -0
  24. package/themes/ember.css +210 -0
  25. package/themes/forest.css +210 -0
  26. package/themes/gazette.css +411 -0
  27. package/themes/index.css +7 -0
  28. package/themes/kiosk.css +412 -0
  29. package/themes/lavender.css +210 -0
  30. package/themes/midnight.css +210 -0
  31. package/themes/minimalist.css +210 -0
  32. package/themes/neon.css +210 -0
  33. package/themes/ocean.css +210 -0
  34. package/themes/prism.css +406 -0
  35. package/themes/rose.css +210 -0
  36. package/themes/sand.css +210 -0
  37. package/themes/slate.css +210 -0
  38. package/themes/sunset.css +210 -0
  39. package/themes/terminal.css +422 -0
  40. package/themes/trait-wars.css +210 -0
  41. package/themes/wireframe.css +216 -0
package/themes/trait-wars.css CHANGED
@@ -162,6 +162,111 @@
162
162
  --focus-ring-offset: 2px;
163
163
  --focus-ring-color: #c9a84c;
164
164
 
165
+ /* Layer 1 — backfill (preserves current visual output, see themes/_contract.md) */
166
+ /* Density axis — spacing scale */
167
+ --space-0: 0px;
168
+ --space-1: 4px;
169
+ --space-2: 8px;
170
+ --space-3: 12px;
171
+ --space-4: 16px;
172
+ --space-5: 20px;
173
+ --space-6: 24px;
174
+ --space-7: 28px;
175
+ --space-8: 32px;
176
+ --space-9: 36px;
177
+ --space-10: 40px;
178
+ --space-11: 44px;
179
+ --space-12: 48px;
180
+ /* Density axis — per-element heights */
181
+ --button-height-sm: 28px;
182
+ --button-height-md: 36px;
183
+ --button-height-lg: 44px;
184
+ --input-height-sm: 28px;
185
+ --input-height-md: 36px;
186
+ --input-height-lg: 44px;
187
+ --row-height-compact: 32px;
188
+ --row-height-normal: 40px;
189
+ --row-height-spacious: 48px;
190
+ /* Density axis — per-element padding */
191
+ --card-padding-sm: 12px;
192
+ --card-padding-md: 16px;
193
+ --card-padding-lg: 24px;
194
+ --dialog-padding: 24px;
195
+ --section-gap: 32px;
196
+ /* Type axis — family triplet */
197
+ --font-family-display: var(--font-family);
198
+ --font-family-body: var(--font-family);
199
+ --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
200
+ /* Type axis — size scale */
201
+ --text-xs: 12px;
202
+ --leading-xs: 16px;
203
+ --text-sm: 14px;
204
+ --leading-sm: 20px;
205
+ --text-base: 16px;
206
+ --leading-base: 24px;
207
+ --text-lg: 18px;
208
+ --leading-lg: 28px;
209
+ --text-xl: 20px;
210
+ --leading-xl: 28px;
211
+ --text-2xl: 24px;
212
+ --leading-2xl: 32px;
213
+ --text-3xl: 30px;
214
+ --leading-3xl: 36px;
215
+ --text-4xl: 36px;
216
+ --leading-4xl: 40px;
217
+ --text-display-1: 48px;
218
+ --leading-display-1: 52px;
219
+ --text-display-2: 60px;
220
+ --leading-display-2: 64px;
221
+ /* Type axis — intent mapping */
222
+ --intent-heading-major-size: var(--text-2xl);
223
+ --intent-heading-major-weight: var(--font-weight-bold);
224
+ --intent-heading-major-leading: var(--leading-2xl);
225
+ --intent-heading-minor-size: var(--text-lg);
226
+ --intent-heading-minor-weight: var(--font-weight-bold);
227
+ --intent-heading-minor-leading: var(--leading-lg);
228
+ --intent-body-emphasis-size: var(--text-base);
229
+ --intent-body-emphasis-weight: var(--font-weight-medium);
230
+ --intent-body-emphasis-leading: var(--leading-base);
231
+ --intent-body-default-size: var(--text-sm);
232
+ --intent-body-default-weight: var(--font-weight-normal);
233
+ --intent-body-default-leading: var(--leading-sm);
234
+ --intent-body-quiet-size: var(--text-sm);
235
+ --intent-body-quiet-weight: var(--font-weight-normal);
236
+ --intent-body-quiet-leading: var(--leading-sm);
237
+ --intent-caption-size: var(--text-xs);
238
+ --intent-caption-weight: var(--font-weight-normal);
239
+ --intent-caption-leading: var(--leading-xs);
240
+ --intent-numeric-size: var(--text-sm);
241
+ --intent-numeric-weight: var(--font-weight-medium);
242
+ --intent-numeric-leading: var(--leading-sm);
243
+ /* Motion axis — duration palette */
244
+ --duration-instant: 0ms;
245
+ --duration-fast: var(--transition-fast);
246
+ --duration-normal: var(--transition-normal);
247
+ --duration-slow: var(--transition-slow);
248
+ --duration-dramatic: 600ms;
249
+ /* Motion axis — easing palette */
250
+ --easing-linear: linear;
251
+ --easing-standard: var(--transition-timing);
252
+ --easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
253
+ --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
254
+ /* Iconography axis */
255
+ --icon-family: lucide;
256
+ --icon-default-size: 16px;
257
+ /* Elevation axis — per-layer mapping */
258
+ --elevation-card: var(--shadow-sm);
259
+ --elevation-popover: var(--shadow-main);
260
+ --elevation-dialog: var(--shadow-lg);
261
+ --elevation-toast: var(--shadow-main);
262
+ /* Geometry axis — radius rhythm with intent */
263
+ --radius-container: var(--radius-md);
264
+ --radius-interactive: var(--radius-md);
265
+ --radius-pill: var(--radius-full);
266
+ /* Geometry axis — border-width rhythm */
267
+ --border-hairline: 1px;
268
+ --border-standard: var(--border-width);
269
+ --border-heavy: var(--border-width-thick);
165
270
  }
166
271
 
167
272
  /* ==========================================================================
@@ -318,4 +423,109 @@
318
423
  --focus-ring-offset: 2px;
319
424
  --focus-ring-color: #9e7e1e;
320
425
 
426
+ /* Layer 1 — backfill (preserves current visual output, see themes/_contract.md) */
427
+ /* Density axis — spacing scale */
428
+ --space-0: 0px;
429
+ --space-1: 4px;
430
+ --space-2: 8px;
431
+ --space-3: 12px;
432
+ --space-4: 16px;
433
+ --space-5: 20px;
434
+ --space-6: 24px;
435
+ --space-7: 28px;
436
+ --space-8: 32px;
437
+ --space-9: 36px;
438
+ --space-10: 40px;
439
+ --space-11: 44px;
440
+ --space-12: 48px;
441
+ /* Density axis — per-element heights */
442
+ --button-height-sm: 28px;
443
+ --button-height-md: 36px;
444
+ --button-height-lg: 44px;
445
+ --input-height-sm: 28px;
446
+ --input-height-md: 36px;
447
+ --input-height-lg: 44px;
448
+ --row-height-compact: 32px;
449
+ --row-height-normal: 40px;
450
+ --row-height-spacious: 48px;
451
+ /* Density axis — per-element padding */
452
+ --card-padding-sm: 12px;
453
+ --card-padding-md: 16px;
454
+ --card-padding-lg: 24px;
455
+ --dialog-padding: 24px;
456
+ --section-gap: 32px;
457
+ /* Type axis — family triplet */
458
+ --font-family-display: var(--font-family);
459
+ --font-family-body: var(--font-family);
460
+ --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
461
+ /* Type axis — size scale */
462
+ --text-xs: 12px;
463
+ --leading-xs: 16px;
464
+ --text-sm: 14px;
465
+ --leading-sm: 20px;
466
+ --text-base: 16px;
467
+ --leading-base: 24px;
468
+ --text-lg: 18px;
469
+ --leading-lg: 28px;
470
+ --text-xl: 20px;
471
+ --leading-xl: 28px;
472
+ --text-2xl: 24px;
473
+ --leading-2xl: 32px;
474
+ --text-3xl: 30px;
475
+ --leading-3xl: 36px;
476
+ --text-4xl: 36px;
477
+ --leading-4xl: 40px;
478
+ --text-display-1: 48px;
479
+ --leading-display-1: 52px;
480
+ --text-display-2: 60px;
481
+ --leading-display-2: 64px;
482
+ /* Type axis — intent mapping */
483
+ --intent-heading-major-size: var(--text-2xl);
484
+ --intent-heading-major-weight: var(--font-weight-bold);
485
+ --intent-heading-major-leading: var(--leading-2xl);
486
+ --intent-heading-minor-size: var(--text-lg);
487
+ --intent-heading-minor-weight: var(--font-weight-bold);
488
+ --intent-heading-minor-leading: var(--leading-lg);
489
+ --intent-body-emphasis-size: var(--text-base);
490
+ --intent-body-emphasis-weight: var(--font-weight-medium);
491
+ --intent-body-emphasis-leading: var(--leading-base);
492
+ --intent-body-default-size: var(--text-sm);
493
+ --intent-body-default-weight: var(--font-weight-normal);
494
+ --intent-body-default-leading: var(--leading-sm);
495
+ --intent-body-quiet-size: var(--text-sm);
496
+ --intent-body-quiet-weight: var(--font-weight-normal);
497
+ --intent-body-quiet-leading: var(--leading-sm);
498
+ --intent-caption-size: var(--text-xs);
499
+ --intent-caption-weight: var(--font-weight-normal);
500
+ --intent-caption-leading: var(--leading-xs);
501
+ --intent-numeric-size: var(--text-sm);
502
+ --intent-numeric-weight: var(--font-weight-medium);
503
+ --intent-numeric-leading: var(--leading-sm);
504
+ /* Motion axis — duration palette */
505
+ --duration-instant: 0ms;
506
+ --duration-fast: var(--transition-fast);
507
+ --duration-normal: var(--transition-normal);
508
+ --duration-slow: var(--transition-slow);
509
+ --duration-dramatic: 600ms;
510
+ /* Motion axis — easing palette */
511
+ --easing-linear: linear;
512
+ --easing-standard: var(--transition-timing);
513
+ --easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
514
+ --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
515
+ /* Iconography axis */
516
+ --icon-family: lucide;
517
+ --icon-default-size: 16px;
518
+ /* Elevation axis — per-layer mapping */
519
+ --elevation-card: var(--shadow-sm);
520
+ --elevation-popover: var(--shadow-main);
521
+ --elevation-dialog: var(--shadow-lg);
522
+ --elevation-toast: var(--shadow-main);
523
+ /* Geometry axis — radius rhythm with intent */
524
+ --radius-container: var(--radius-md);
525
+ --radius-interactive: var(--radius-md);
526
+ --radius-pill: var(--radius-full);
527
+ /* Geometry axis — border-width rhythm */
528
+ --border-hairline: 1px;
529
+ --border-standard: var(--border-width);
530
+ --border-heavy: var(--border-width-thick);
321
531
  }
package/themes/wireframe.css CHANGED
@@ -95,6 +95,114 @@
95
95
  --focus-ring-offset: 2px;
96
96
  --focus-ring-color: #000000;
97
97
 
98
+ /* Layer 1 — backfill (preserves current visual output, see themes/_contract.md) */
99
+ /* Density axis — spacing scale */
100
+ --space-0: 0px;
101
+ --space-1: 4px;
102
+ --space-2: 8px;
103
+ --space-3: 12px;
104
+ --space-4: 16px;
105
+ --space-5: 20px;
106
+ --space-6: 24px;
107
+ --space-7: 28px;
108
+ --space-8: 32px;
109
+ --space-9: 36px;
110
+ --space-10: 40px;
111
+ --space-11: 44px;
112
+ --space-12: 48px;
113
+ /* Density axis — per-element heights */
114
+ --button-height-sm: 28px;
115
+ --button-height-md: 36px;
116
+ --button-height-lg: 44px;
117
+ --input-height-sm: 28px;
118
+ --input-height-md: 36px;
119
+ --input-height-lg: 44px;
120
+ --row-height-compact: 32px;
121
+ --row-height-normal: 40px;
122
+ --row-height-spacious: 48px;
123
+ /* Density axis — per-element padding */
124
+ --card-padding-sm: 12px;
125
+ --card-padding-md: 16px;
126
+ --card-padding-lg: 24px;
127
+ --dialog-padding: 24px;
128
+ --section-gap: 32px;
129
+ /* Type axis — family triplet */
130
+ --font-family-display: var(--font-family);
131
+ --font-family-body: var(--font-family);
132
+ --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
133
+ /* Type axis — size scale */
134
+ --text-xs: 12px;
135
+ --leading-xs: 16px;
136
+ --text-sm: 14px;
137
+ --leading-sm: 20px;
138
+ --text-base: 16px;
139
+ --leading-base: 24px;
140
+ --text-lg: 18px;
141
+ --leading-lg: 28px;
142
+ --text-xl: 20px;
143
+ --leading-xl: 28px;
144
+ --text-2xl: 24px;
145
+ --leading-2xl: 32px;
146
+ --text-3xl: 30px;
147
+ --leading-3xl: 36px;
148
+ --text-4xl: 36px;
149
+ --leading-4xl: 40px;
150
+ --text-display-1: 48px;
151
+ --leading-display-1: 52px;
152
+ --text-display-2: 60px;
153
+ --leading-display-2: 64px;
154
+ /* Type axis — intent mapping */
155
+ --intent-heading-major-size: var(--text-2xl);
156
+ --intent-heading-major-weight: var(--font-weight-bold);
157
+ --intent-heading-major-leading: var(--leading-2xl);
158
+ --intent-heading-minor-size: var(--text-lg);
159
+ --intent-heading-minor-weight: var(--font-weight-bold);
160
+ --intent-heading-minor-leading: var(--leading-lg);
161
+ --intent-body-emphasis-size: var(--text-base);
162
+ --intent-body-emphasis-weight: var(--font-weight-medium);
163
+ --intent-body-emphasis-leading: var(--leading-base);
164
+ --intent-body-default-size: var(--text-sm);
165
+ --intent-body-default-weight: var(--font-weight-normal);
166
+ --intent-body-default-leading: var(--leading-sm);
167
+ --intent-body-quiet-size: var(--text-sm);
168
+ --intent-body-quiet-weight: var(--font-weight-normal);
169
+ --intent-body-quiet-leading: var(--leading-sm);
170
+ --intent-caption-size: var(--text-xs);
171
+ --intent-caption-weight: var(--font-weight-normal);
172
+ --intent-caption-leading: var(--leading-xs);
173
+ --intent-numeric-size: var(--text-sm);
174
+ --intent-numeric-weight: var(--font-weight-medium);
175
+ --intent-numeric-leading: var(--leading-sm);
176
+ /* Motion axis — duration palette */
177
+ --duration-instant: 0ms;
178
+ --duration-fast: var(--transition-fast);
179
+ --duration-normal: var(--transition-normal);
180
+ --duration-slow: var(--transition-slow);
181
+ --duration-dramatic: 600ms;
182
+ /* Motion axis — easing palette */
183
+ --easing-linear: linear;
184
+ --easing-standard: var(--transition-timing);
185
+ --easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
186
+ --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
187
+ /* Iconography axis */
188
+ --icon-family: lucide;
189
+ --icon-default-size: 16px;
190
+ /* Elevation axis — per-layer mapping */
191
+ --elevation-card: var(--shadow-sm);
192
+ --elevation-popover: var(--shadow-main);
193
+ --elevation-dialog: var(--shadow-lg);
194
+ --elevation-toast: var(--shadow-main);
195
+ /* Geometry axis — radius rhythm with intent */
196
+ --radius-container: var(--radius-md);
197
+ --radius-interactive: var(--radius-md);
198
+ --radius-pill: var(--radius-full);
199
+ /* Geometry axis — border-width rhythm */
200
+ --border-hairline: 1px;
201
+ --border-standard: var(--border-width);
202
+ --border-heavy: var(--border-width-thick);
203
+ /* wireframe override: mechanical motion has no curve */
204
+ --easing-standard: linear;
205
+ --easing-emphasized: linear;
98
206
  }
99
207
 
100
208
  /* ==========================================================================
@@ -187,4 +295,112 @@
187
295
  --focus-ring-offset: 2px;
188
296
  --focus-ring-color: #ffffff;
189
297
 
298
+ /* Layer 1 — backfill (preserves current visual output, see themes/_contract.md) */
299
+ /* Density axis — spacing scale */
300
+ --space-0: 0px;
301
+ --space-1: 4px;
302
+ --space-2: 8px;
303
+ --space-3: 12px;
304
+ --space-4: 16px;
305
+ --space-5: 20px;
306
+ --space-6: 24px;
307
+ --space-7: 28px;
308
+ --space-8: 32px;
309
+ --space-9: 36px;
310
+ --space-10: 40px;
311
+ --space-11: 44px;
312
+ --space-12: 48px;
313
+ /* Density axis — per-element heights */
314
+ --button-height-sm: 28px;
315
+ --button-height-md: 36px;
316
+ --button-height-lg: 44px;
317
+ --input-height-sm: 28px;
318
+ --input-height-md: 36px;
319
+ --input-height-lg: 44px;
320
+ --row-height-compact: 32px;
321
+ --row-height-normal: 40px;
322
+ --row-height-spacious: 48px;
323
+ /* Density axis — per-element padding */
324
+ --card-padding-sm: 12px;
325
+ --card-padding-md: 16px;
326
+ --card-padding-lg: 24px;
327
+ --dialog-padding: 24px;
328
+ --section-gap: 32px;
329
+ /* Type axis — family triplet */
330
+ --font-family-display: var(--font-family);
331
+ --font-family-body: var(--font-family);
332
+ --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
333
+ /* Type axis — size scale */
334
+ --text-xs: 12px;
335
+ --leading-xs: 16px;
336
+ --text-sm: 14px;
337
+ --leading-sm: 20px;
338
+ --text-base: 16px;
339
+ --leading-base: 24px;
340
+ --text-lg: 18px;
341
+ --leading-lg: 28px;
342
+ --text-xl: 20px;
343
+ --leading-xl: 28px;
344
+ --text-2xl: 24px;
345
+ --leading-2xl: 32px;
346
+ --text-3xl: 30px;
347
+ --leading-3xl: 36px;
348
+ --text-4xl: 36px;
349
+ --leading-4xl: 40px;
350
+ --text-display-1: 48px;
351
+ --leading-display-1: 52px;
352
+ --text-display-2: 60px;
353
+ --leading-display-2: 64px;
354
+ /* Type axis — intent mapping */
355
+ --intent-heading-major-size: var(--text-2xl);
356
+ --intent-heading-major-weight: var(--font-weight-bold);
357
+ --intent-heading-major-leading: var(--leading-2xl);
358
+ --intent-heading-minor-size: var(--text-lg);
359
+ --intent-heading-minor-weight: var(--font-weight-bold);
360
+ --intent-heading-minor-leading: var(--leading-lg);
361
+ --intent-body-emphasis-size: var(--text-base);
362
+ --intent-body-emphasis-weight: var(--font-weight-medium);
363
+ --intent-body-emphasis-leading: var(--leading-base);
364
+ --intent-body-default-size: var(--text-sm);
365
+ --intent-body-default-weight: var(--font-weight-normal);
366
+ --intent-body-default-leading: var(--leading-sm);
367
+ --intent-body-quiet-size: var(--text-sm);
368
+ --intent-body-quiet-weight: var(--font-weight-normal);
369
+ --intent-body-quiet-leading: var(--leading-sm);
370
+ --intent-caption-size: var(--text-xs);
371
+ --intent-caption-weight: var(--font-weight-normal);
372
+ --intent-caption-leading: var(--leading-xs);
373
+ --intent-numeric-size: var(--text-sm);
374
+ --intent-numeric-weight: var(--font-weight-medium);
375
+ --intent-numeric-leading: var(--leading-sm);
376
+ /* Motion axis — duration palette */
377
+ --duration-instant: 0ms;
378
+ --duration-fast: var(--transition-fast);
379
+ --duration-normal: var(--transition-normal);
380
+ --duration-slow: var(--transition-slow);
381
+ --duration-dramatic: 600ms;
382
+ /* Motion axis — easing palette */
383
+ --easing-linear: linear;
384
+ --easing-standard: var(--transition-timing);
385
+ --easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
386
+ --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
387
+ /* Iconography axis */
388
+ --icon-family: lucide;
389
+ --icon-default-size: 16px;
390
+ /* Elevation axis — per-layer mapping */
391
+ --elevation-card: var(--shadow-sm);
392
+ --elevation-popover: var(--shadow-main);
393
+ --elevation-dialog: var(--shadow-lg);
394
+ --elevation-toast: var(--shadow-main);
395
+ /* Geometry axis — radius rhythm with intent */
396
+ --radius-container: var(--radius-md);
397
+ --radius-interactive: var(--radius-md);
398
+ --radius-pill: var(--radius-full);
399
+ /* Geometry axis — border-width rhythm */
400
+ --border-hairline: 1px;
401
+ --border-standard: var(--border-width);
402
+ --border-heavy: var(--border-width-thick);
403
+ /* wireframe override: mechanical motion has no curve */
404
+ --easing-standard: linear;
405
+ --easing-emphasized: linear;
190
406
  }