@umkmall/proto 0.1.0-h2febbb98dc2a → 0.1.0-h33253a2d5919

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 (9) hide show
  1. package/package.json +1 -1
  2. package/umkmall-components.md +22 -10
  3. package/umkmall-prototype-starter.html +171 -99
  4. package/umkmall-rules.md +5 -5
  5. package/umkmall-starter-app.md +2 -2
  6. package/umkmall-starter.md +153 -93
  7. package/umkmall-tailwind.js +138 -55
  8. package/umkmall-tokens.css +144 -84
  9. package/umkmall-ui.js +32 -18
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@umkmall/proto",
3
- "version": "0.1.0-h2febbb98dc2a",
3
+ "version": "0.1.0-h33253a2d5919",
4
4
  "description": "UMKMall design-system assets and prototyping docs, served from jsDelivr. Generated — see README.",
5
5
  "license": "UNLICENSED",
6
6
  "files": [
package/umkmall-components.md CHANGED
@@ -6,7 +6,7 @@ Every component below is published on `window.UmkmallUI` by the browser bundle.
6
6
  axis values listed, and pass every REQUIRED prop an entry names.
7
7
 
8
8
  ```
9
- UMKMall UI — 56 components, and the values each axis accepts.
9
+ UMKMall UI — 57 components, and the values each axis accepts.
10
10
  Generated from packages/ui/src/contract/variants.ts. Do not hand-edit.
11
11
 
12
12
  Button (Foundations)
@@ -36,22 +36,27 @@ Chip (Content)
36
36
  booleans: showIconLeft, showIconRight
37
37
 
38
38
  TextField (Form)
39
- size: large | small
40
- appearance: default | a2ui
39
+ size: large | small | xsmall
40
+ appearance: default | a2ui | bare
41
+ counterPlacement: below | inside
42
+ prefixPlacement: inside | outside
41
43
  booleans: error, disabled
42
- REQUIRED props (not axes): label
43
44
 
44
45
  CheckBox (Form)
45
46
  size: xlarge | large | medium | small
46
47
  appearance: default | native
47
48
  booleans: error, disabled, indeterminate
48
- REQUIRED props (not axes): label
49
49
 
50
50
  Radio (Form)
51
51
  size: large | medium | small
52
52
  booleans: error, disabled
53
53
  REQUIRED props (not axes): label
54
54
 
55
+ SegmentedControl (Form)
56
+ size: medium | small
57
+ booleans: disabled
58
+ REQUIRED props (not axes): options, value, onChange
59
+
55
60
  Switch (Form)
56
61
  size: large | medium | small
57
62
  booleans: disabled, loading
@@ -59,6 +64,7 @@ Switch (Form)
59
64
 
60
65
  Slider (Form)
61
66
  size: large | small
67
+ appearance: default | scrubber
62
68
  booleans: disabled
63
69
 
64
70
  DateTimeInput (Form)
@@ -73,7 +79,7 @@ OtpInput (Form)
73
79
  REQUIRED props (not axes): value, onChange
74
80
 
75
81
  Tabs (Navigation)
76
- size: large | small
82
+ size: large | small | xsmall
77
83
  state: default | active
78
84
  appearance: default | a2ui
79
85
  booleans: showIconLeft, showNotif, showTitle
@@ -120,28 +126,33 @@ ChatComposerInput (Chat)
120
126
  REQUIRED props (not axes): value, onValueChange, label
121
127
 
122
128
  ChatDrawer (Chat)
123
- variant: inherit | neutral | info | warning | danger
129
+ variant: inherit | neutral | info | warning | danger | floating
124
130
  booleans: collapsed
125
131
 
126
132
  ChatAttachment (Chat)
127
- variant: image | file
133
+ variant: image | file | tile
134
+ size: default | large
128
135
  booleans: showSize
129
136
  REQUIRED props (not axes): name
130
137
 
131
138
  ChatToolsButton (Chat)
132
139
  state: default | active
140
+ size: compact | landing
133
141
  REQUIRED props (not axes): label
134
142
 
135
143
  ChatAttachmentButton (Chat)
136
144
  state: default | active
145
+ size: compact | landing
137
146
  REQUIRED props (not axes): label
138
147
 
139
148
  ChatVoiceButton (Chat)
140
149
  state: default | active
150
+ size: compact | landing
141
151
  REQUIRED props (not axes): label
142
152
 
143
153
  ChatSendButton (Chat)
144
154
  state: send | stop | waiting
155
+ size: compact | landing
145
156
  REQUIRED props (not axes): label
146
157
 
147
158
  ChatSoundWave (Chat)
@@ -183,7 +194,7 @@ ChatMessageTTSButton (Chat)
183
194
  Dialog (Overlays)
184
195
  size: small | medium | large | xlarge
185
196
  side: none | left | right
186
- booleans: centered, showCloseButton
197
+ booleans: centered, fullHeight, keyboardAware, showCloseButton, dismissible, dismissOnOutsidePress, closeDisabled
187
198
  REQUIRED props (not axes): open, onOpenChange
188
199
 
189
200
  Menu (Overlays)
@@ -195,7 +206,7 @@ Popover (Overlays)
195
206
  booleans: portal
196
207
 
197
208
  Card (Content)
198
- variant: elevated | outlined | plain
209
+ variant: elevated | outlined | plain | glass
199
210
  padding: none | small | medium | large
200
211
  appearance: default | a2ui | a2ui-hero
201
212
 
@@ -270,6 +281,7 @@ Toaster (Feedback)
270
281
  Label (Form)
271
282
  variant: default | error | success
272
283
  size: sm | md | lg
284
+ look: default | field-large | field-small
273
285
  booleans: required
274
286
 
275
287
  TRAPS — each of these renders or ignores silently, with no error:
package/umkmall-prototype-starter.html CHANGED
@@ -18,8 +18,8 @@ HOW TO USE THIS FILE
18
18
  WHAT THIS FILE NEEDS FROM THE NETWORK
19
19
  Four hosts, every time it is opened — not just the first time:
20
20
 
21
- https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2febbb98dc2a/umkmall-tailwind.js
22
- https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2febbb98dc2a/umkmall-ui.js
21
+ https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h33253a2d5919/umkmall-tailwind.js
22
+ https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h33253a2d5919/umkmall-ui.js
23
23
  https://cdn.jsdelivr.net/npm/@babel/standalone@7.26.4/babel.min.js
24
24
  — all on jsDelivr: the design system's assets (pinned) and the JSX compiler.
25
25
  The token CSS is NOT fetched: it is inlined in the <style> below, because a claude.ai
@@ -33,11 +33,11 @@ WHAT THIS FILE NEEDS FROM THE NETWORK
33
33
 
34
34
  YOU DO NOT HAVE TO START FROM THIS FILE
35
35
  Four tags add UMKMall styling to a page you already have: the token CSS as a <link> to
36
- https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2febbb98dc2a/umkmall-tokens.css
36
+ https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h33253a2d5919/umkmall-tokens.css
37
37
  then the Play CDN, the config and the bundle below. Keep the order — the config must come after
38
38
  the Play CDN script, or the theme arrives too late and every class resolves to nothing.
39
39
 
40
- UMKMall UI — 56 components, and the values each axis accepts.
40
+ UMKMall UI — 57 components, and the values each axis accepts.
41
41
  Generated from packages/ui/src/contract/variants.ts. Do not hand-edit.
42
42
 
43
43
  Button (Foundations)
@@ -67,22 +67,27 @@ Chip (Content)
67
67
  booleans: showIconLeft, showIconRight
68
68
 
69
69
  TextField (Form)
70
- size: large | small
71
- appearance: default | a2ui
70
+ size: large | small | xsmall
71
+ appearance: default | a2ui | bare
72
+ counterPlacement: below | inside
73
+ prefixPlacement: inside | outside
72
74
  booleans: error, disabled
73
- REQUIRED props (not axes): label
74
75
 
75
76
  CheckBox (Form)
76
77
  size: xlarge | large | medium | small
77
78
  appearance: default | native
78
79
  booleans: error, disabled, indeterminate
79
- REQUIRED props (not axes): label
80
80
 
81
81
  Radio (Form)
82
82
  size: large | medium | small
83
83
  booleans: error, disabled
84
84
  REQUIRED props (not axes): label
85
85
 
86
+ SegmentedControl (Form)
87
+ size: medium | small
88
+ booleans: disabled
89
+ REQUIRED props (not axes): options, value, onChange
90
+
86
91
  Switch (Form)
87
92
  size: large | medium | small
88
93
  booleans: disabled, loading
@@ -90,6 +95,7 @@ Switch (Form)
90
95
 
91
96
  Slider (Form)
92
97
  size: large | small
98
+ appearance: default | scrubber
93
99
  booleans: disabled
94
100
 
95
101
  DateTimeInput (Form)
@@ -104,7 +110,7 @@ OtpInput (Form)
104
110
  REQUIRED props (not axes): value, onChange
105
111
 
106
112
  Tabs (Navigation)
107
- size: large | small
113
+ size: large | small | xsmall
108
114
  state: default | active
109
115
  appearance: default | a2ui
110
116
  booleans: showIconLeft, showNotif, showTitle
@@ -151,28 +157,33 @@ ChatComposerInput (Chat)
151
157
  REQUIRED props (not axes): value, onValueChange, label
152
158
 
153
159
  ChatDrawer (Chat)
154
- variant: inherit | neutral | info | warning | danger
160
+ variant: inherit | neutral | info | warning | danger | floating
155
161
  booleans: collapsed
156
162
 
157
163
  ChatAttachment (Chat)
158
- variant: image | file
164
+ variant: image | file | tile
165
+ size: default | large
159
166
  booleans: showSize
160
167
  REQUIRED props (not axes): name
161
168
 
162
169
  ChatToolsButton (Chat)
163
170
  state: default | active
171
+ size: compact | landing
164
172
  REQUIRED props (not axes): label
165
173
 
166
174
  ChatAttachmentButton (Chat)
167
175
  state: default | active
176
+ size: compact | landing
168
177
  REQUIRED props (not axes): label
169
178
 
170
179
  ChatVoiceButton (Chat)
171
180
  state: default | active
181
+ size: compact | landing
172
182
  REQUIRED props (not axes): label
173
183
 
174
184
  ChatSendButton (Chat)
175
185
  state: send | stop | waiting
186
+ size: compact | landing
176
187
  REQUIRED props (not axes): label
177
188
 
178
189
  ChatSoundWave (Chat)
@@ -214,7 +225,7 @@ ChatMessageTTSButton (Chat)
214
225
  Dialog (Overlays)
215
226
  size: small | medium | large | xlarge
216
227
  side: none | left | right
217
- booleans: centered, showCloseButton
228
+ booleans: centered, fullHeight, keyboardAware, showCloseButton, dismissible, dismissOnOutsidePress, closeDisabled
218
229
  REQUIRED props (not axes): open, onOpenChange
219
230
 
220
231
  Menu (Overlays)
@@ -226,7 +237,7 @@ Popover (Overlays)
226
237
  booleans: portal
227
238
 
228
239
  Card (Content)
229
- variant: elevated | outlined | plain
240
+ variant: elevated | outlined | plain | glass
230
241
  padding: none | small | medium | large
231
242
  appearance: default | a2ui | a2ui-hero
232
243
 
@@ -301,6 +312,7 @@ Toaster (Feedback)
301
312
  Label (Form)
302
313
  variant: default | error | success
303
314
  size: sm | md | lg
315
+ look: default | field-large | field-small
304
316
  booleans: required
305
317
 
306
318
  TRAPS — each of these renders or ignores silently, with no error:
@@ -342,6 +354,7 @@ TRAPS — each of these renders or ignores silently, with no error:
342
354
  --red-r600: 124 0 0;
343
355
  --red-r500: 162 0 0;
344
356
  --red-r400: 231 0 0;
357
+ --red-r450: 219 0 0;
345
358
  --red-r300: 235 43 43;
346
359
  --red-r200: 241 107 107;
347
360
  --red-r100: 245 150 150;
@@ -434,8 +447,9 @@ TRAPS — each of these renders or ignores silently, with no error:
434
447
  --text-default-invert: 255 255 255;
435
448
  --text-default-brand: 0 116 231;
436
449
  --text-default-success: 14 160 110;
437
- --text-default-error: 231 0 0;
450
+ --text-default-error: 219 0 0;
438
451
  --text-default-warning: 245 158 11;
452
+ --text-default-muted: 49 77 105;
439
453
  --text-hover-primary: 3 32 61;
440
454
  --text-hover-secondary: 97 118 140;
441
455
  --text-hover-invert: 246 246 246;
@@ -454,7 +468,7 @@ TRAPS — each of these renders or ignores silently, with no error:
454
468
  --text-focus-invert: 255 255 255;
455
469
  --text-focus-brand: 0 116 231;
456
470
  --text-focus-success: 14 160 110;
457
- --text-focus-error: 231 0 0;
471
+ --text-focus-error: 219 0 0;
458
472
  --text-focus-warning: 245 158 11;
459
473
  --text-disable-primary: 195 203 211;
460
474
  --text-disable-brand: 150 198 245;
@@ -462,12 +476,21 @@ TRAPS — each of these renders or ignores silently, with no error:
462
476
  --text-disable-error: 245 150 150;
463
477
  --text-disable-warning: 253 228 152;
464
478
  --text-disable-invert: 49 77 105;
479
+ --text-chip-price: 138 74 0;
480
+ --text-chip-free: 0 88 71;
481
+ --text-tile-blue: 0 116 231;
482
+ --text-tile-green: 14 160 110;
483
+ --text-tile-yellow: 179 116 0;
484
+ --text-tile-red: 219 0 0;
485
+ --text-tile-purple: 91 69 194;
486
+ --text-tile-orange: 201 98 10;
487
+ --text-coin-default: 240 138 28;
465
488
  --icon-default-primary: 4 38 72;
466
489
  --icon-default-secondary: 147 162 176;
467
490
  --icon-default-invert: 255 255 255;
468
491
  --icon-default-brand: 0 116 231;
469
492
  --icon-default-success: 14 160 110;
470
- --icon-default-error: 231 0 0;
493
+ --icon-default-error: 219 0 0;
471
494
  --icon-default-warning: 245 158 11;
472
495
  --icon-hover-primary: 3 32 61;
473
496
  --icon-hover-secondary: 97 118 140;
@@ -487,7 +510,7 @@ TRAPS — each of these renders or ignores silently, with no error:
487
510
  --icon-focus-invert: 255 255 255;
488
511
  --icon-focus-brand: 0 116 231;
489
512
  --icon-focus-success: 14 160 110;
490
- --icon-focus-error: 231 0 0;
513
+ --icon-focus-error: 219 0 0;
491
514
  --icon-focus-warning: 245 158 11;
492
515
  --icon-disable-primary: 195 203 211;
493
516
  --icon-disable-brand: 150 198 245;
@@ -495,6 +518,13 @@ TRAPS — each of these renders or ignores silently, with no error:
495
518
  --icon-disable-error: 245 150 150;
496
519
  --icon-disable-warning: 253 228 152;
497
520
  --icon-disable-invert: 49 77 105;
521
+ --icon-tile-blue: 0 116 231;
522
+ --icon-tile-green: 14 160 110;
523
+ --icon-tile-yellow: 179 116 0;
524
+ --icon-tile-red: 219 0 0;
525
+ --icon-tile-purple: 91 69 194;
526
+ --icon-tile-orange: 201 98 10;
527
+ --icon-coin-default: 240 138 28;
498
528
  --surface-default-primary: 255 255 255;
499
529
  --surface-default-secondary: 246 246 246;
500
530
  --surface-default-invert: 0 0 0;
@@ -540,8 +570,21 @@ TRAPS — each of these renders or ignores silently, with no error:
540
570
  --surface-gradient-yellow-end: 172 111 8;
541
571
  --surface-gradient-callout-start: 0 81 162;
542
572
  --surface-gradient-callout-end: 8 118 96;
573
+ --surface-glass-default: 255 255 255;
574
+ --surface-glass-strong: 255 255 255;
575
+ --surface-page-mesh: 247 250 253;
576
+ --surface-tile-blue: 240 247 255;
577
+ --surface-tile-green: 236 253 247;
578
+ --surface-tile-yellow: 255 248 230;
579
+ --surface-tile-red: 255 243 243;
580
+ --surface-tile-purple: 239 235 252;
581
+ --surface-tile-orange: 255 240 227;
582
+ --surface-chip-price: 255 248 230;
583
+ --surface-chip-free: 236 253 247;
584
+ --surface-badge-promo: 231 0 0;
543
585
  --surface-hover-neutral: 247 248 250;
544
586
  --surface-selected-hover: 227 239 252;
587
+ --surface-default-subtle: 249 250 251;
545
588
  --border-default-primary: 240 240 240;
546
589
  --border-default-invert: 195 203 211;
547
590
  --border-default-brand: 0 116 231;
@@ -574,6 +617,7 @@ TRAPS — each of these renders or ignores silently, with no error:
574
617
  --border-disable-error: 245 150 150;
575
618
  --border-disable-warning: 253 228 152;
576
619
  --border-disable-invert: 49 77 105;
620
+ --border-glass-default: 255 255 255;
577
621
  --radius-null: 0;
578
622
  --radius-xs: 4;
579
623
  --radius-sm: 6;
@@ -609,6 +653,8 @@ TRAPS — each of these renders or ignores silently, with no error:
609
653
  --shadow-position-md: 4;
610
654
  --shadow-position-lg: 8;
611
655
  --shadow-position-xl: 12;
656
+ --shadow-nav: 0 10px 30px 0 #0426481f;
657
+ --shadow-float: 0 20px 50px 0 #04264847;
612
658
  --shadow-5-pct: 0 4px 12px 0 #0000000d;
613
659
  --shadow-card: 0 2px 8px 0 #0000001a;
614
660
  --shadow-10-pct: 0 4px 16px 0 #0000001a;
@@ -620,6 +666,32 @@ TRAPS — each of these renders or ignores silently, with no error:
620
666
  --border-width-sm: 1;
621
667
  --border-width-md: 2;
622
668
  --border-width-l: 4;
669
+ --glow-mesh-blue: 3 114 229;
670
+ --glow-mesh-green: 30 198 141;
671
+ --glow-mesh-sky: 150 198 245;
672
+ --glow-mesh-mint: 28 198 142;
673
+ --blur-glass: 18;
674
+ --motion-duration-press: 120;
675
+ --motion-duration-fast: 180;
676
+ --motion-duration-base: 280;
677
+ --motion-duration-slow: 380;
678
+ --motion-easing-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
679
+ --motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
680
+ --motion-spring-press-damping: 18;
681
+ --motion-spring-press-stiffness: 320;
682
+ --motion-spring-sheet-damping: 22;
683
+ --motion-spring-sheet-stiffness: 220;
684
+ --motion-stagger-step: 40;
685
+ --motion-stagger-max: 8;
686
+ --motion-distance-enter: 12;
687
+ --motion-distance-sidebar: 24;
688
+ --motion-distance-label: 6;
689
+ --motion-delay-label: 100;
690
+ --motion-scale-press-default: 0.97;
691
+ --motion-scale-press-card: 0.98;
692
+ --motion-scale-press-icon: 0.92;
693
+ --motion-scale-pop-squash: 0.82;
694
+ --motion-scale-pop-overshoot: 1.14;
623
695
  --callout-default-surface: 240 247 255;
624
696
  --callout-default-border: 0 116 231;
625
697
  --callout-default-text: 0 81 162;
@@ -636,86 +708,86 @@ TRAPS — each of these renders or ignores silently, with no error:
636
708
  --callout-neg-border: 231 0 0;
637
709
  --callout-neg-text: 4 38 72;
638
710
  --focus-halo: 150 198 245;
639
- --typography-mobile-display-bold: 700 36px/40px 'Be Vietnam Pro';
640
- --typography-mobile-display-semibold: 600 36px/40px 'Be Vietnam Pro';
641
- --typography-mobile-h1-bold: 700 28px/32px 'Be Vietnam Pro';
642
- --typography-mobile-h1-semibold: 600 28px/32px 'Be Vietnam Pro';
643
- --typography-mobile-h2-bold: 700 24px/28px 'Be Vietnam Pro';
644
- --typography-mobile-h2-semibold: 600 24px/28px 'Be Vietnam Pro';
645
- --typography-mobile-h2-medium: 500 24px/28px 'Be Vietnam Pro';
646
- --typography-mobile-h2-regular: 400 24px/28px 'Be Vietnam Pro';
647
- --typography-mobile-h3-bold: 700 20px/26px 'Be Vietnam Pro';
648
- --typography-mobile-h3-semibold: 600 20px/26px 'Be Vietnam Pro';
649
- --typography-mobile-h3-medium: 500 20px/26px 'Be Vietnam Pro';
650
- --typography-mobile-h3-regular: 400 20px/26px 'Be Vietnam Pro';
651
- --typography-mobile-h4-bold: 700 20px/26px 'Be Vietnam Pro';
652
- --typography-mobile-h4-semibold: 600 20px/26px 'Be Vietnam Pro';
653
- --typography-mobile-h4-medium: 500 20px/26px 'Be Vietnam Pro';
654
- --typography-mobile-h4-regular: 400 20px/26px 'Be Vietnam Pro';
655
- --typography-mobile-h5-bold: 700 18px/24px 'Be Vietnam Pro';
656
- --typography-mobile-h5-semibold: 600 18px/24px 'Be Vietnam Pro';
657
- --typography-mobile-h5-medium: 500 18px/24px 'Be Vietnam Pro';
658
- --typography-mobile-h5-regular: 400 18px/24px 'Be Vietnam Pro';
659
- --typography-mobile-h6-bold: 700 16px/24px 'Be Vietnam Pro';
660
- --typography-mobile-h6-semibold: 600 16px/24px 'Be Vietnam Pro';
661
- --typography-mobile-h6-medium: 500 16px/24px 'Be Vietnam Pro';
662
- --typography-mobile-h6-regular: 400 16px/24px 'Be Vietnam Pro';
663
- --typography-mobile-paragraph-bold: 700 14px/20px 'Be Vietnam Pro';
664
- --typography-mobile-paragraph-semibold: 600 14px/20px 'Be Vietnam Pro';
665
- --typography-mobile-paragraph-medium: 500 14px/20px 'Be Vietnam Pro';
666
- --typography-mobile-paragraph-regular: 400 14px/20px 'Be Vietnam Pro';
667
- --typography-mobile-body-lg-bold: 700 12px/18px 'Be Vietnam Pro';
668
- --typography-mobile-body-lg-semibold: 600 12px/18px 'Be Vietnam Pro';
669
- --typography-mobile-body-lg-medium: 500 12px/18px 'Be Vietnam Pro';
670
- --typography-mobile-body-lg-regular: 400 12px/18px 'Be Vietnam Pro';
671
- --typography-mobile-body-md-bold: 700 10px/16px 'Be Vietnam Pro';
672
- --typography-mobile-body-md-semibold: 600 10px/16px 'Be Vietnam Pro';
673
- --typography-mobile-body-md-medium: 500 10px/16px 'Be Vietnam Pro';
674
- --typography-mobile-body-md-regular: 400 10px/16px 'Be Vietnam Pro';
675
- --typography-mobile-body-sm-bold: 700 8px/14px 'Be Vietnam Pro';
676
- --typography-mobile-body-sm-semibold: 600 8px/14px 'Be Vietnam Pro';
677
- --typography-mobile-body-sm-medium: 500 8px/14px 'Be Vietnam Pro';
678
- --typography-mobile-body-sm-regular: 400 8px/14px 'Be Vietnam Pro';
679
- --typography-desktop-display-bold: 700 56px/64px 'Be Vietnam Pro';
680
- --typography-desktop-display-semibold: 600 56px/64px 'Be Vietnam Pro';
681
- --typography-desktop-h1-bold: 700 40px/48px 'Be Vietnam Pro';
682
- --typography-desktop-h1-semibold: 600 40px/48px 'Be Vietnam Pro';
683
- --typography-desktop-h2-bold: 700 32px/40px 'Be Vietnam Pro';
684
- --typography-desktop-h2-semibold: 600 32px/40px 'Be Vietnam Pro';
685
- --typography-desktop-h2-medium: 500 32px/40px 'Be Vietnam Pro';
686
- --typography-desktop-h2-regular: 400 32px/40px 'Be Vietnam Pro';
687
- --typography-desktop-h3-bold: 700 28px/36px 'Be Vietnam Pro';
688
- --typography-desktop-h3-semibold: 600 28px/36px 'Be Vietnam Pro';
689
- --typography-desktop-h3-medium: 500 28px/36px 'Be Vietnam Pro';
690
- --typography-desktop-h3-regular: 400 28px/36px 'Be Vietnam Pro';
691
- --typography-desktop-h4-bold: 700 24px/32px 'Be Vietnam Pro';
692
- --typography-desktop-h4-semibold: 600 24px/32px 'Be Vietnam Pro';
693
- --typography-desktop-h4-medium: 500 24px/32px 'Be Vietnam Pro';
694
- --typography-desktop-h4-regular: 400 24px/32px 'Be Vietnam Pro';
695
- --typography-desktop-h5-bold: 700 20px/28px 'Be Vietnam Pro';
696
- --typography-desktop-h5-semibold: 600 20px/28px 'Be Vietnam Pro';
697
- --typography-desktop-h5-medium: 500 20px/28px 'Be Vietnam Pro';
698
- --typography-desktop-h5-regular: 400 20px/28px 'Be Vietnam Pro';
699
- --typography-desktop-h6-bold: 700 18px/28px 'Be Vietnam Pro';
700
- --typography-desktop-h6-semibold: 600 18px/28px 'Be Vietnam Pro';
701
- --typography-desktop-h6-medium: 500 18px/28px 'Be Vietnam Pro';
702
- --typography-desktop-h6-regular: 400 18px/28px 'Be Vietnam Pro';
703
- --typography-desktop-paragraph-bold: 700 16px/24px 'Be Vietnam Pro';
704
- --typography-desktop-paragraph-semibold: 600 16px/24px 'Be Vietnam Pro';
705
- --typography-desktop-paragraph-medium: 500 16px/24px 'Be Vietnam Pro';
706
- --typography-desktop-paragraph-regular: 400 16px/24px 'Be Vietnam Pro';
707
- --typography-desktop-body-lg-bold: 700 14px/20px 'Be Vietnam Pro';
708
- --typography-desktop-body-lg-semibold: 600 14px/20px 'Be Vietnam Pro';
709
- --typography-desktop-body-lg-medium: 500 14px/20px 'Be Vietnam Pro';
710
- --typography-desktop-body-lg-regular: 400 14px/20px 'Be Vietnam Pro';
711
- --typography-desktop-body-md-bold: 700 12px/18px 'Be Vietnam Pro';
712
- --typography-desktop-body-md-semibold: 600 12px/18px 'Be Vietnam Pro';
713
- --typography-desktop-body-md-medium: 500 12px/18px 'Be Vietnam Pro';
714
- --typography-desktop-body-md-regular: 400 12px/18px 'Be Vietnam Pro';
715
- --typography-desktop-body-sm-bold: 700 10px/16px 'Be Vietnam Pro';
716
- --typography-desktop-body-sm-semibold: 600 10px/16px 'Be Vietnam Pro';
717
- --typography-desktop-body-sm-medium: 500 10px/16px 'Be Vietnam Pro';
718
- --typography-desktop-body-sm-regular: 400 10px/16px 'Be Vietnam Pro';
711
+ --typography-mobile-display-bold: 700 calc(2.25rem * var(--ds-text-scale, 1))/calc(2.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
712
+ --typography-mobile-display-semibold: 600 calc(2.25rem * var(--ds-text-scale, 1))/calc(2.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
713
+ --typography-mobile-h1-bold: 700 calc(1.75rem * var(--ds-text-scale, 1))/calc(2rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
714
+ --typography-mobile-h1-semibold: 600 calc(1.75rem * var(--ds-text-scale, 1))/calc(2rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
715
+ --typography-mobile-h2-bold: 700 calc(1.5rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
716
+ --typography-mobile-h2-semibold: 600 calc(1.5rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
717
+ --typography-mobile-h2-medium: 500 calc(1.5rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
718
+ --typography-mobile-h2-regular: 400 calc(1.5rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
719
+ --typography-mobile-h3-bold: 700 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.625rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
720
+ --typography-mobile-h3-semibold: 600 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.625rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
721
+ --typography-mobile-h3-medium: 500 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.625rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
722
+ --typography-mobile-h3-regular: 400 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.625rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
723
+ --typography-mobile-h4-bold: 700 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.625rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
724
+ --typography-mobile-h4-semibold: 600 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.625rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
725
+ --typography-mobile-h4-medium: 500 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.625rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
726
+ --typography-mobile-h4-regular: 400 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.625rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
727
+ --typography-mobile-h5-bold: 700 calc(1.125rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
728
+ --typography-mobile-h5-semibold: 600 calc(1.125rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
729
+ --typography-mobile-h5-medium: 500 calc(1.125rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
730
+ --typography-mobile-h5-regular: 400 calc(1.125rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
731
+ --typography-mobile-h6-bold: 700 calc(1rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
732
+ --typography-mobile-h6-semibold: 600 calc(1rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
733
+ --typography-mobile-h6-medium: 500 calc(1rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
734
+ --typography-mobile-h6-regular: 400 calc(1rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
735
+ --typography-mobile-paragraph-bold: 700 calc(0.875rem * var(--ds-text-scale, 1))/calc(1.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
736
+ --typography-mobile-paragraph-semibold: 600 calc(0.875rem * var(--ds-text-scale, 1))/calc(1.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
737
+ --typography-mobile-paragraph-medium: 500 calc(0.875rem * var(--ds-text-scale, 1))/calc(1.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
738
+ --typography-mobile-paragraph-regular: 400 calc(0.875rem * var(--ds-text-scale, 1))/calc(1.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
739
+ --typography-mobile-body-lg-bold: 700 calc(0.75rem * var(--ds-text-scale, 1))/calc(1.125rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
740
+ --typography-mobile-body-lg-semibold: 600 calc(0.75rem * var(--ds-text-scale, 1))/calc(1.125rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
741
+ --typography-mobile-body-lg-medium: 500 calc(0.75rem * var(--ds-text-scale, 1))/calc(1.125rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
742
+ --typography-mobile-body-lg-regular: 400 calc(0.75rem * var(--ds-text-scale, 1))/calc(1.125rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
743
+ --typography-mobile-body-md-bold: 700 calc(0.625rem * var(--ds-text-scale, 1))/calc(1rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
744
+ --typography-mobile-body-md-semibold: 600 calc(0.625rem * var(--ds-text-scale, 1))/calc(1rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
745
+ --typography-mobile-body-md-medium: 500 calc(0.625rem * var(--ds-text-scale, 1))/calc(1rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
746
+ --typography-mobile-body-md-regular: 400 calc(0.625rem * var(--ds-text-scale, 1))/calc(1rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
747
+ --typography-mobile-body-sm-bold: 700 calc(0.5rem * var(--ds-text-scale, 1))/calc(0.875rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
748
+ --typography-mobile-body-sm-semibold: 600 calc(0.5rem * var(--ds-text-scale, 1))/calc(0.875rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
749
+ --typography-mobile-body-sm-medium: 500 calc(0.5rem * var(--ds-text-scale, 1))/calc(0.875rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
750
+ --typography-mobile-body-sm-regular: 400 calc(0.5rem * var(--ds-text-scale, 1))/calc(0.875rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
751
+ --typography-desktop-display-bold: 700 calc(3.5rem * var(--ds-text-scale, 1))/calc(4rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
752
+ --typography-desktop-display-semibold: 600 calc(3.5rem * var(--ds-text-scale, 1))/calc(4rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
753
+ --typography-desktop-h1-bold: 700 calc(2.5rem * var(--ds-text-scale, 1))/calc(3rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
754
+ --typography-desktop-h1-semibold: 600 calc(2.5rem * var(--ds-text-scale, 1))/calc(3rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
755
+ --typography-desktop-h2-bold: 700 calc(2rem * var(--ds-text-scale, 1))/calc(2.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
756
+ --typography-desktop-h2-semibold: 600 calc(2rem * var(--ds-text-scale, 1))/calc(2.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
757
+ --typography-desktop-h2-medium: 500 calc(2rem * var(--ds-text-scale, 1))/calc(2.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
758
+ --typography-desktop-h2-regular: 400 calc(2rem * var(--ds-text-scale, 1))/calc(2.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
759
+ --typography-desktop-h3-bold: 700 calc(1.75rem * var(--ds-text-scale, 1))/calc(2.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
760
+ --typography-desktop-h3-semibold: 600 calc(1.75rem * var(--ds-text-scale, 1))/calc(2.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
761
+ --typography-desktop-h3-medium: 500 calc(1.75rem * var(--ds-text-scale, 1))/calc(2.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
762
+ --typography-desktop-h3-regular: 400 calc(1.75rem * var(--ds-text-scale, 1))/calc(2.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
763
+ --typography-desktop-h4-bold: 700 calc(1.5rem * var(--ds-text-scale, 1))/calc(2rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
764
+ --typography-desktop-h4-semibold: 600 calc(1.5rem * var(--ds-text-scale, 1))/calc(2rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
765
+ --typography-desktop-h4-medium: 500 calc(1.5rem * var(--ds-text-scale, 1))/calc(2rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
766
+ --typography-desktop-h4-regular: 400 calc(1.5rem * var(--ds-text-scale, 1))/calc(2rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
767
+ --typography-desktop-h5-bold: 700 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
768
+ --typography-desktop-h5-semibold: 600 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
769
+ --typography-desktop-h5-medium: 500 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
770
+ --typography-desktop-h5-regular: 400 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
771
+ --typography-desktop-h6-bold: 700 calc(1.125rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
772
+ --typography-desktop-h6-semibold: 600 calc(1.125rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
773
+ --typography-desktop-h6-medium: 500 calc(1.125rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
774
+ --typography-desktop-h6-regular: 400 calc(1.125rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
775
+ --typography-desktop-paragraph-bold: 700 calc(1rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
776
+ --typography-desktop-paragraph-semibold: 600 calc(1rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
777
+ --typography-desktop-paragraph-medium: 500 calc(1rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
778
+ --typography-desktop-paragraph-regular: 400 calc(1rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
779
+ --typography-desktop-body-lg-bold: 700 calc(0.875rem * var(--ds-text-scale, 1))/calc(1.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
780
+ --typography-desktop-body-lg-semibold: 600 calc(0.875rem * var(--ds-text-scale, 1))/calc(1.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
781
+ --typography-desktop-body-lg-medium: 500 calc(0.875rem * var(--ds-text-scale, 1))/calc(1.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
782
+ --typography-desktop-body-lg-regular: 400 calc(0.875rem * var(--ds-text-scale, 1))/calc(1.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
783
+ --typography-desktop-body-md-bold: 700 calc(0.75rem * var(--ds-text-scale, 1))/calc(1.125rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
784
+ --typography-desktop-body-md-semibold: 600 calc(0.75rem * var(--ds-text-scale, 1))/calc(1.125rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
785
+ --typography-desktop-body-md-medium: 500 calc(0.75rem * var(--ds-text-scale, 1))/calc(1.125rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
786
+ --typography-desktop-body-md-regular: 400 calc(0.75rem * var(--ds-text-scale, 1))/calc(1.125rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
787
+ --typography-desktop-body-sm-bold: 700 calc(0.625rem * var(--ds-text-scale, 1))/calc(1rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
788
+ --typography-desktop-body-sm-semibold: 600 calc(0.625rem * var(--ds-text-scale, 1))/calc(1rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
789
+ --typography-desktop-body-sm-medium: 500 calc(0.625rem * var(--ds-text-scale, 1))/calc(1rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
790
+ --typography-desktop-body-sm-regular: 400 calc(0.625rem * var(--ds-text-scale, 1))/calc(1rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
719
791
  --elevation-overlay: 99999;
720
792
  }
721
793
 
@@ -730,8 +802,8 @@ TRAPS — each of these renders or ignores silently, with no error:
730
802
  body { color: rgb(var(--text-default-primary)); }
731
803
  </style>
732
804
  <script src="https://cdn.tailwindcss.com"></script>
733
- <script src="https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2febbb98dc2a/umkmall-tailwind.js"></script>
734
- <script src="https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2febbb98dc2a/umkmall-ui.js"></script>
805
+ <script src="https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h33253a2d5919/umkmall-tailwind.js"></script>
806
+ <script src="https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h33253a2d5919/umkmall-ui.js"></script>
735
807
  <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.26.4/babel.min.js"></script>
736
808
  </head>
737
809
  <body class="bg-default-primary text-default-primary">
package/umkmall-rules.md CHANGED
@@ -29,10 +29,10 @@ When I answer, build the whole thing in one file and hand it back.
29
29
  Each of these is plain markdown, published for you rather than for a person.
30
30
  Fetch them if you have web access; they are always current.
31
31
 
32
- the whole starter, in a code block https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2febbb98dc2a/umkmall-starter.md
33
- the demo block on its own https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2febbb98dc2a/umkmall-starter-app.md
34
- the component vocabulary https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2febbb98dc2a/umkmall-components.md
35
- the starter as a raw .html file https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2febbb98dc2a/umkmall-prototype-starter.html
32
+ the whole starter, in a code block https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h33253a2d5919/umkmall-starter.md
33
+ the demo block on its own https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h33253a2d5919/umkmall-starter-app.md
34
+ the component vocabulary https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h33253a2d5919/umkmall-components.md
35
+ the starter as a raw .html file https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h33253a2d5919/umkmall-prototype-starter.html
36
36
 
37
37
  TAKE THE FIRST ONE. It is the entire working file — <head>, mount node and a
38
38
  demo that already renders a chat room — inside a single fenced block, so you
@@ -150,7 +150,7 @@ THE COMPONENT LIST
150
150
  Not written here. It is a published file, always current, and it carries each
151
151
  component's axes AND the props it will not render without:
152
152
 
153
- https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2febbb98dc2a/umkmall-components.md
153
+ https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h33253a2d5919/umkmall-components.md
154
154
 
155
155
  Fetch it, or ask me to paste it. Do not work from memory of another design
156
156
  system — an invented axis value renders unstyled with no error, and a missing
package/umkmall-starter-app.md CHANGED
@@ -1,13 +1,13 @@
1
1
  # UMKMall prototyping starter — the editable block
2
2
 
3
- This is the `<script type="text/babel">` block from [the starter](https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2febbb98dc2a/umkmall-prototype-starter.html), on its own
3
+ This is the `<script type="text/babel">` block from [the starter](https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h33253a2d5919/umkmall-prototype-starter.html), on its own
4
4
  so it can be read or pasted without the surrounding HTML.
5
5
 
6
6
  It renders a working chat room: a header, the journey's progress rail and quota meters, a
7
7
  scrolling transcript and a pinned composer. Edit the part between the `REPLACE THIS` and
8
8
  `end of the part you replace` markers; keep the shell around it.
9
9
 
10
- The `<head>` it needs is in the starter, or in section 3 of [the prompt](https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2febbb98dc2a/umkmall-rules.md).
10
+ The `<head>` it needs is in the starter, or in section 3 of [the prompt](https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h33253a2d5919/umkmall-rules.md).
11
11
 
12
12
  ```jsx
13
13
  /*