@almadar/ui 6.29.0 → 6.31.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 (52) hide show
  1. package/dist/{EntityBindingContext-UyeCfEBS.d.cts → EntityBindingContext-ChCONv2W.d.cts} +1 -50
  2. package/dist/{EntityBindingContext-UyeCfEBS.d.ts → EntityBindingContext-ChCONv2W.d.ts} +1 -50
  3. package/dist/avl/index.cjs +5 -6
  4. package/dist/avl/index.js +5 -6
  5. package/dist/components/index.cjs +4 -5
  6. package/dist/components/index.js +4 -5
  7. package/dist/context/index.cjs +135 -105
  8. package/dist/context/index.d.cts +2 -60
  9. package/dist/context/index.d.ts +2 -60
  10. package/dist/context/index.js +135 -105
  11. package/dist/lib/index.cjs +455 -0
  12. package/dist/lib/index.d.cts +42 -1
  13. package/dist/lib/index.d.ts +42 -1
  14. package/dist/lib/index.js +438 -1
  15. package/dist/marketing/index.cjs +4 -5
  16. package/dist/marketing/index.js +4 -5
  17. package/dist/providers/index.cjs +143 -116
  18. package/dist/providers/index.d.cts +1 -1
  19. package/dist/providers/index.d.ts +1 -1
  20. package/dist/providers/index.js +143 -116
  21. package/dist/runtime/index.cjs +5 -6
  22. package/dist/runtime/index.d.cts +2 -2
  23. package/dist/runtime/index.d.ts +2 -2
  24. package/dist/runtime/index.js +5 -6
  25. package/dist/themeTokens-DVRwufw8.d.cts +112 -0
  26. package/dist/themeTokens-DVRwufw8.d.ts +112 -0
  27. package/package.json +6 -5
  28. package/scripts/audit-tailwind-safelist.ts +4 -0
  29. package/tailwind-preset.cjs +155 -28
  30. package/themes/almadar-website.css +37 -107
  31. package/themes/almadar.css +37 -108
  32. package/themes/atelier.css +145 -240
  33. package/themes/bloomberg-dense.css +145 -252
  34. package/themes/clay.css +39 -137
  35. package/themes/comic.css +39 -145
  36. package/themes/corporate.css +39 -131
  37. package/themes/game-adventure.css +22 -87
  38. package/themes/game-rpg.css +22 -84
  39. package/themes/game-sci-fi.css +22 -88
  40. package/themes/game-ui-pack.css +22 -85
  41. package/themes/gazette.css +43 -135
  42. package/themes/glass.css +39 -148
  43. package/themes/kiosk.css +51 -146
  44. package/themes/linear-clean.css +145 -215
  45. package/themes/minimalist.css +39 -125
  46. package/themes/neon.css +39 -132
  47. package/themes/notion-editorial.css +145 -215
  48. package/themes/prism.css +37 -100
  49. package/themes/retro.css +39 -130
  50. package/themes/terminal.css +61 -152
  51. package/themes/trait-wars.css +121 -285
  52. package/themes/wireframe.css +41 -128
package/themes/comic.css CHANGED
@@ -1,60 +1,20 @@
1
1
  /**
2
- * Comic Theme — "Comic Studio"
3
- *
4
- * Fun, light, cartoonish comic-book-art skin for the game-studio editor:
5
- * bold black-ink outlines, hard offset drop shadows (no blur, like
6
- * screen-printed panel borders), chunky rounded corners, a bright sunny
7
- * paper palette with a subtle halftone-dot texture, and snappy springy
8
- * transitions. Dark mode ("night ink") inverts the ink onto a deep indigo
9
- * page while keeping the same accent hues, brightened.
10
- *
11
- * Halftone texture: applied to `body` (descendant of the themed root, which
12
- * carries [data-theme] on <html>) rather than baked into --color-background,
13
- * because --color-background must stay a flat parseable color for
14
- * scripts/theme-contrast-audit.mjs.
2
+ * GENERATED — do not edit by hand.
3
+ * Source: packages/almadar-core/themes/comic.json
4
+ * Regenerate: node tools/almadar-pattern-sync/dist/index.js themes (or `almadar-sync themes`)
15
5
  */
16
6
 
17
- /* ==========================================================================
18
- * LIGHT MODE — sunny paper + ink
19
- * ========================================================================== */
20
7
  [data-theme="comic-light"] {
21
- /* Shadows - Hard offset ink silhouette, no blur */
22
- --shadow-main: 4px 4px 0 0 #1c1c28;
23
- --shadow-sm: 2px 2px 0 0 #1c1c28;
24
- --shadow-lg: 6px 6px 0 0 #1c1c28;
25
- --shadow-inner: inset 2px 2px 0 0 rgba(28, 28, 40, 0.15);
26
- --shadow-none: none;
27
- --shadow-hover: 6px 6px 0 0 #1c1c28;
28
- --shadow-active: 1px 1px 0 0 #1c1c28;
29
-
30
- /* Border radius - Chunky, friendly, rounded-panel corners */
31
- --radius-none: 0px;
32
- --radius-sm: 8px;
33
- --radius-md: 14px;
34
- --radius-lg: 20px;
35
- --radius-xl: 28px;
36
- --radius-full: 9999px;
37
-
38
- /* Border width - Bold inked outline */
39
- --border-width: 3px;
40
- --border-width-thin: 2px;
41
- --border-width-thick: 4px;
42
-
43
- /* Colors - Sunny cream paper, comic red-orange primary, mint + yellow pop */
44
8
  --color-primary: #c2301b;
45
9
  --color-primary-hover: #a92814;
46
10
  --color-primary-foreground: #fff8e7;
47
-
48
11
  --color-secondary: #a9e8d3;
49
12
  --color-secondary-hover: #8fdcc1;
50
13
  --color-secondary-foreground: #0f3d2c;
51
-
52
14
  --color-accent: #8f6300;
53
15
  --color-accent-foreground: #fff8e7;
54
-
55
16
  --color-muted: #f5e9c9;
56
17
  --color-muted-foreground: #6b5a34;
57
-
58
18
  --color-background: #fff8e7;
59
19
  --color-foreground: #1c1c28;
60
20
  --color-card: #ffffff;
@@ -63,15 +23,12 @@
63
23
  --color-border: #1c1c28;
64
24
  --color-input: #2b2b3d;
65
25
  --color-ring: #2f6fed;
66
-
67
26
  --color-table-header: #fff1d6;
68
27
  --color-table-border: #1c1c28;
69
28
  --color-table-row-hover: #fff8e7;
70
29
  --color-surface-hover: #ffe9bc;
71
30
  --color-border-hover: #c2301b;
72
31
  --color-placeholder: #8a7a54;
73
-
74
- /* Semantic colors */
75
32
  --color-error: #e0293b;
76
33
  --color-error-foreground: #ffffff;
77
34
  --color-success: #12874f;
@@ -80,39 +37,41 @@
80
37
  --color-warning-foreground: #2a1a00;
81
38
  --color-info: #2f6fed;
82
39
  --color-info-foreground: #ffffff;
83
-
84
- /* Typography - Rounded friendly display + body, generous line-height */
85
- --font-family:
86
- "Fredoka", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
40
+ --radius-none: 0px;
41
+ --radius-sm: 8px;
42
+ --radius-md: 14px;
43
+ --radius-lg: 20px;
44
+ --radius-xl: 28px;
45
+ --radius-full: 9999px;
46
+ --border-width: 3px;
47
+ --border-width-thin: 2px;
48
+ --border-width-thick: 4px;
49
+ --font-family: "Fredoka", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
87
50
  --font-weight-normal: 400;
88
51
  --font-weight-medium: 500;
89
52
  --font-weight-bold: 700;
90
53
  --letter-spacing: 0em;
91
54
  --line-height: 1.55;
92
-
93
- /* Icon styling - Thick cartoon strokes */
94
- --icon-stroke-width: 2.5;
95
55
  --icon-color: #c2301b;
96
-
97
- /* Transitions - Snappy + springy, bouncy overshoot */
98
56
  --transition-fast: 120ms;
99
57
  --transition-normal: 200ms;
100
58
  --transition-slow: 320ms;
101
59
  --transition-timing: cubic-bezier(0.34, 1.56, 0.64, 1);
102
-
103
- /* Hover/Active transforms - Peel-off-the-page lift / press-into-page */
104
60
  --hover-scale: 1.03;
105
61
  --hover-translate-y: -2px;
106
62
  --hover-translate-x: -1px;
107
63
  --active-scale: 0.97;
108
64
  --active-translate-y: 1px;
109
-
110
- /* Focus ring - Electric blue pop */
111
65
  --focus-ring-width: 3px;
112
66
  --focus-ring-offset: 2px;
113
67
  --focus-ring-color: #2f6fed;
114
-
115
- /* Layer 1 — Density axis (spacing scale) */
68
+ --shadow-main: 4px 4px 0 0 #1c1c28;
69
+ --shadow-sm: 2px 2px 0 0 #1c1c28;
70
+ --shadow-lg: 6px 6px 0 0 #1c1c28;
71
+ --shadow-inner: inset 2px 2px 0 0 rgba(28, 28, 40, 0.15);
72
+ --shadow-none: none;
73
+ --shadow-hover: 6px 6px 0 0 #1c1c28;
74
+ --shadow-active: 1px 1px 0 0 #1c1c28;
116
75
  --space-0: 0px;
117
76
  --space-1: 4px;
118
77
  --space-2: 8px;
@@ -126,7 +85,6 @@
126
85
  --space-10: 40px;
127
86
  --space-11: 44px;
128
87
  --space-12: 48px;
129
- /* Density axis — per-element heights */
130
88
  --button-height-sm: 30px;
131
89
  --button-height-md: 40px;
132
90
  --button-height-lg: 48px;
@@ -136,17 +94,14 @@
136
94
  --row-height-compact: 32px;
137
95
  --row-height-normal: 40px;
138
96
  --row-height-spacious: 48px;
139
- /* Density axis — per-element padding */
140
97
  --card-padding-sm: 12px;
141
98
  --card-padding-md: 18px;
142
99
  --card-padding-lg: 24px;
143
100
  --dialog-padding: 24px;
144
101
  --section-gap: 32px;
145
- /* Type axis — family triplet */
146
102
  --font-family-display: "Fredoka", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
147
103
  --font-family-body: var(--font-family);
148
104
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
149
- /* Type axis — size scale */
150
105
  --text-xs: 12px;
151
106
  --leading-xs: 16px;
152
107
  --text-sm: 14px;
@@ -167,7 +122,6 @@
167
122
  --leading-display-1: 52px;
168
123
  --text-display-2: 60px;
169
124
  --leading-display-2: 64px;
170
- /* Type axis — intent mapping */
171
125
  --intent-heading-major-size: var(--text-2xl);
172
126
  --intent-heading-major-weight: var(--font-weight-bold);
173
127
  --intent-heading-major-leading: var(--leading-2xl);
@@ -189,83 +143,41 @@
189
143
  --intent-numeric-size: var(--text-sm);
190
144
  --intent-numeric-weight: var(--font-weight-medium);
191
145
  --intent-numeric-leading: var(--leading-sm);
192
- /* Motion axis — duration palette */
193
146
  --duration-instant: 0ms;
194
147
  --duration-fast: var(--transition-fast);
195
148
  --duration-normal: var(--transition-normal);
196
149
  --duration-slow: var(--transition-slow);
197
150
  --duration-dramatic: 600ms;
198
- /* Motion axis — easing palette */
199
151
  --easing-linear: linear;
200
152
  --easing-standard: var(--transition-timing);
201
153
  --easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
202
154
  --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
203
- /* Iconography axis */
204
155
  --icon-family: lucide;
156
+ --icon-stroke-width: 2.5;
205
157
  --icon-default-size: 16px;
206
- /* Elevation axis — per-layer mapping */
207
158
  --elevation-card: var(--shadow-sm);
208
159
  --elevation-popover: var(--shadow-main);
209
160
  --elevation-dialog: var(--shadow-lg);
210
161
  --elevation-toast: var(--shadow-main);
211
- /* Geometry axis — radius rhythm with intent */
212
162
  --radius-container: var(--radius-md);
213
163
  --radius-interactive: var(--radius-md);
214
164
  --radius-pill: var(--radius-full);
215
- /* Geometry axis — border-width rhythm */
216
165
  --border-hairline: 1px;
217
166
  --border-standard: var(--border-width);
218
167
  --border-heavy: var(--border-width-thick);
219
168
  }
220
169
 
221
- /* Halftone-dot paper texture — subtle, doesn't fight card/panel contrast. */
222
- [data-theme="comic-light"] body {
223
- background-color: var(--color-background);
224
- background-image: radial-gradient(circle at 1px 1px, rgba(28, 28, 40, 0.07) 1.2px, transparent 0);
225
- background-size: 14px 14px;
226
- }
227
-
228
- /* ==========================================================================
229
- * DARK MODE — "Night Ink": deep indigo paper, cream ink outlines
230
- * ========================================================================== */
231
170
  [data-theme="comic-dark"] {
232
- /* Shadows - Hard offset cream-ink silhouette, no blur */
233
- --shadow-main: 4px 4px 0 0 #f0e9d8;
234
- --shadow-sm: 2px 2px 0 0 #f0e9d8;
235
- --shadow-lg: 6px 6px 0 0 #f0e9d8;
236
- --shadow-inner: inset 2px 2px 0 0 rgba(240, 233, 216, 0.15);
237
- --shadow-none: none;
238
- --shadow-hover: 6px 6px 0 0 #f0e9d8;
239
- --shadow-active: 1px 1px 0 0 #f0e9d8;
240
-
241
- /* Border radius - Chunky, friendly, rounded-panel corners */
242
- --radius-none: 0px;
243
- --radius-sm: 8px;
244
- --radius-md: 14px;
245
- --radius-lg: 20px;
246
- --radius-xl: 28px;
247
- --radius-full: 9999px;
248
-
249
- /* Border width - Bold inked outline */
250
- --border-width: 3px;
251
- --border-width-thin: 2px;
252
- --border-width-thick: 4px;
253
-
254
- /* Colors - Deep indigo night paper, brightened comic accents */
255
171
  --color-primary: #ff7a5c;
256
172
  --color-primary-hover: #ff9174;
257
173
  --color-primary-foreground: #180a05;
258
-
259
174
  --color-secondary: #6fe3c4;
260
175
  --color-secondary-hover: #8ceccf;
261
176
  --color-secondary-foreground: #062a1e;
262
-
263
177
  --color-accent: #ffdd57;
264
178
  --color-accent-foreground: #2a1e00;
265
-
266
179
  --color-muted: #262a4d;
267
180
  --color-muted-foreground: #b7bbe3;
268
-
269
181
  --color-background: #14162c;
270
182
  --color-foreground: #f5efe0;
271
183
  --color-card: #1d2044;
@@ -274,15 +186,12 @@
274
186
  --color-border: #f0e9d8;
275
187
  --color-input: #c9c2a9;
276
188
  --color-ring: #6fa8ff;
277
-
278
189
  --color-table-header: #1a1d3c;
279
190
  --color-table-border: #f0e9d8;
280
191
  --color-table-row-hover: #20244a;
281
192
  --color-surface-hover: #262a52;
282
193
  --color-border-hover: #ff7a5c;
283
194
  --color-placeholder: #8e92c0;
284
-
285
- /* Semantic colors - Brightened for dark ground */
286
195
  --color-error: #ff6b6b;
287
196
  --color-error-foreground: #180505;
288
197
  --color-success: #4ede93;
@@ -291,39 +200,41 @@
291
200
  --color-warning-foreground: #2a1a00;
292
201
  --color-info: #6fa8ff;
293
202
  --color-info-foreground: #071b3d;
294
-
295
- /* Typography - Rounded friendly display + body, generous line-height */
296
- --font-family:
297
- "Fredoka", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
203
+ --radius-none: 0px;
204
+ --radius-sm: 8px;
205
+ --radius-md: 14px;
206
+ --radius-lg: 20px;
207
+ --radius-xl: 28px;
208
+ --radius-full: 9999px;
209
+ --border-width: 3px;
210
+ --border-width-thin: 2px;
211
+ --border-width-thick: 4px;
212
+ --font-family: "Fredoka", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
298
213
  --font-weight-normal: 400;
299
214
  --font-weight-medium: 500;
300
215
  --font-weight-bold: 700;
301
216
  --letter-spacing: 0em;
302
217
  --line-height: 1.55;
303
-
304
- /* Icon styling - Thick cartoon strokes */
305
- --icon-stroke-width: 2.5;
306
218
  --icon-color: #ff7a5c;
307
-
308
- /* Transitions - Snappy + springy, bouncy overshoot */
309
219
  --transition-fast: 120ms;
310
220
  --transition-normal: 200ms;
311
221
  --transition-slow: 320ms;
312
222
  --transition-timing: cubic-bezier(0.34, 1.56, 0.64, 1);
313
-
314
- /* Hover/Active transforms - Peel-off-the-page lift / press-into-page */
315
223
  --hover-scale: 1.03;
316
224
  --hover-translate-y: -2px;
317
225
  --hover-translate-x: -1px;
318
226
  --active-scale: 0.97;
319
227
  --active-translate-y: 1px;
320
-
321
- /* Focus ring - Electric blue pop */
322
228
  --focus-ring-width: 3px;
323
229
  --focus-ring-offset: 2px;
324
230
  --focus-ring-color: #6fa8ff;
325
-
326
- /* Layer 1 — Density axis (spacing scale) */
231
+ --shadow-main: 4px 4px 0 0 #f0e9d8;
232
+ --shadow-sm: 2px 2px 0 0 #f0e9d8;
233
+ --shadow-lg: 6px 6px 0 0 #f0e9d8;
234
+ --shadow-inner: inset 2px 2px 0 0 rgba(240, 233, 216, 0.15);
235
+ --shadow-none: none;
236
+ --shadow-hover: 6px 6px 0 0 #f0e9d8;
237
+ --shadow-active: 1px 1px 0 0 #f0e9d8;
327
238
  --space-0: 0px;
328
239
  --space-1: 4px;
329
240
  --space-2: 8px;
@@ -337,7 +248,6 @@
337
248
  --space-10: 40px;
338
249
  --space-11: 44px;
339
250
  --space-12: 48px;
340
- /* Density axis — per-element heights */
341
251
  --button-height-sm: 30px;
342
252
  --button-height-md: 40px;
343
253
  --button-height-lg: 48px;
@@ -347,17 +257,14 @@
347
257
  --row-height-compact: 32px;
348
258
  --row-height-normal: 40px;
349
259
  --row-height-spacious: 48px;
350
- /* Density axis — per-element padding */
351
260
  --card-padding-sm: 12px;
352
261
  --card-padding-md: 18px;
353
262
  --card-padding-lg: 24px;
354
263
  --dialog-padding: 24px;
355
264
  --section-gap: 32px;
356
- /* Type axis — family triplet */
357
265
  --font-family-display: "Fredoka", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
358
266
  --font-family-body: var(--font-family);
359
267
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
360
- /* Type axis — size scale */
361
268
  --text-xs: 12px;
362
269
  --leading-xs: 16px;
363
270
  --text-sm: 14px;
@@ -378,7 +285,6 @@
378
285
  --leading-display-1: 52px;
379
286
  --text-display-2: 60px;
380
287
  --leading-display-2: 64px;
381
- /* Type axis — intent mapping */
382
288
  --intent-heading-major-size: var(--text-2xl);
383
289
  --intent-heading-major-weight: var(--font-weight-bold);
384
290
  --intent-heading-major-leading: var(--leading-2xl);
@@ -400,38 +306,26 @@
400
306
  --intent-numeric-size: var(--text-sm);
401
307
  --intent-numeric-weight: var(--font-weight-medium);
402
308
  --intent-numeric-leading: var(--leading-sm);
403
- /* Motion axis — duration palette */
404
309
  --duration-instant: 0ms;
405
310
  --duration-fast: var(--transition-fast);
406
311
  --duration-normal: var(--transition-normal);
407
312
  --duration-slow: var(--transition-slow);
408
313
  --duration-dramatic: 600ms;
409
- /* Motion axis — easing palette */
410
314
  --easing-linear: linear;
411
315
  --easing-standard: var(--transition-timing);
412
316
  --easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
413
317
  --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
414
- /* Iconography axis */
415
318
  --icon-family: lucide;
319
+ --icon-stroke-width: 2.5;
416
320
  --icon-default-size: 16px;
417
- /* Elevation axis — per-layer mapping */
418
321
  --elevation-card: var(--shadow-sm);
419
322
  --elevation-popover: var(--shadow-main);
420
323
  --elevation-dialog: var(--shadow-lg);
421
324
  --elevation-toast: var(--shadow-main);
422
- /* Geometry axis — radius rhythm with intent */
423
325
  --radius-container: var(--radius-md);
424
326
  --radius-interactive: var(--radius-md);
425
327
  --radius-pill: var(--radius-full);
426
- /* Geometry axis — border-width rhythm */
427
328
  --border-hairline: 1px;
428
329
  --border-standard: var(--border-width);
429
330
  --border-heavy: var(--border-width-thick);
430
331
  }
431
-
432
- /* Halftone-dot paper texture — subtle, doesn't fight card/panel contrast. */
433
- [data-theme="comic-dark"] body {
434
- background-color: var(--color-background);
435
- background-image: radial-gradient(circle at 1px 1px, rgba(240, 233, 216, 0.05) 1.2px, transparent 0);
436
- background-size: 14px 14px;
437
- }