@umkmall/proto 0.1.0-ha04bbbde2f13 → 0.1.0-ha281120cae90

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 +12 -10
  3. package/umkmall-prototype-starter.html +75 -15
  4. package/umkmall-rules.md +5 -5
  5. package/umkmall-starter-app.md +2 -2
  6. package/umkmall-starter.md +67 -9
  7. package/umkmall-tailwind.js +61 -1
  8. package/umkmall-tokens.css +58 -0
  9. package/umkmall-ui.js +13 -12
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@umkmall/proto",
3
- "version": "0.1.0-ha04bbbde2f13",
3
+ "version": "0.1.0-ha281120cae90",
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
@@ -10,9 +10,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)
13
- type: primary | ghost | text
13
+ type: primary | ghost | outline | text
14
14
  color: primary | light | danger | dark
15
- size: large | medium | small | micro
15
+ size: large | medium | small | micro | compact
16
16
  width: auto | full
17
17
  booleans: disabled, isLoading
18
18
 
@@ -25,18 +25,18 @@ Alert (Feedback)
25
25
 
26
26
  Badge (Content)
27
27
  color: primary | warning | success | danger | light | bestseller | gradient
28
- size: xlarge | medium | small | micro
28
+ size: xlarge | medium | small | micro | compact | compactTight
29
29
  appearance: default | a2ui
30
30
  booleans: showIconLeft, showIconRight
31
31
 
32
32
  Chip (Content)
33
33
  state: default | active
34
- size: huge | xlarge | large | medium | small | micro
34
+ size: huge | xlarge | large | medium | small | micro | compact
35
35
  appearance: default | a2ui
36
36
  booleans: showIconLeft, showIconRight
37
37
 
38
38
  TextField (Form)
39
- size: large | small | xsmall
39
+ size: large | small | xsmall | compact
40
40
  appearance: default | a2ui | bare
41
41
  counterPlacement: below | inside
42
42
  prefixPlacement: inside | outside
@@ -64,6 +64,7 @@ Switch (Form)
64
64
 
65
65
  Slider (Form)
66
66
  size: large | small
67
+ appearance: default | scrubber
67
68
  booleans: disabled
68
69
 
69
70
  DateTimeInput (Form)
@@ -95,11 +96,11 @@ Skeleton (Feedback)
95
96
  Text (Foundations)
96
97
  role: display | h1 | h2 | h3 | h4 | h5 | h6 | paragraph | bodyLg | bodyMd | bodySm
97
98
  weight: bold | semibold | medium | regular
98
- color: primary | secondary | disable | invert | brand | success | error | warning
99
+ color: primary | secondary | disable | invert | brand | success | error | warning | muted
99
100
 
100
101
  Icon (Foundations)
101
102
  size: xs | sm | md | lg | xl
102
- color: primary | secondary | disable | invert | brand | success | error | warning
103
+ color: primary | secondary | disable | invert | brand | success | error | warning | muted
103
104
  REQUIRED props (not axes): name
104
105
 
105
106
  Sidebar (Shell)
@@ -125,7 +126,7 @@ ChatComposerInput (Chat)
125
126
  REQUIRED props (not axes): value, onValueChange, label
126
127
 
127
128
  ChatDrawer (Chat)
128
- variant: inherit | neutral | info | warning | danger
129
+ variant: inherit | neutral | info | warning | danger | floating
129
130
  booleans: collapsed
130
131
 
131
132
  ChatAttachment (Chat)
@@ -193,7 +194,8 @@ ChatMessageTTSButton (Chat)
193
194
  Dialog (Overlays)
194
195
  size: small | medium | large | xlarge
195
196
  side: none | left | right
196
- booleans: centered, showCloseButton, dismissible, closeDisabled
197
+ rounded: default | lg
198
+ booleans: centered, fullHeight, keyboardAware, showCloseButton, dismissible, dismissOnOutsidePress, closeDisabled
197
199
  REQUIRED props (not axes): open, onOpenChange
198
200
 
199
201
  Menu (Overlays)
@@ -205,7 +207,7 @@ Popover (Overlays)
205
207
  booleans: portal
206
208
 
207
209
  Card (Content)
208
- variant: elevated | outlined | plain
210
+ variant: elevated | outlined | plain | glass
209
211
  padding: none | small | medium | large
210
212
  appearance: default | a2ui | a2ui-hero
211
213
 
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-ha04bbbde2f13/umkmall-tailwind.js
22
- https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-ha04bbbde2f13/umkmall-ui.js
21
+ https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-ha281120cae90/umkmall-tailwind.js
22
+ https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-ha281120cae90/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,7 +33,7 @@ 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-ha04bbbde2f13/umkmall-tokens.css
36
+ https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-ha281120cae90/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
 
@@ -41,9 +41,9 @@ 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)
44
- type: primary | ghost | text
44
+ type: primary | ghost | outline | text
45
45
  color: primary | light | danger | dark
46
- size: large | medium | small | micro
46
+ size: large | medium | small | micro | compact
47
47
  width: auto | full
48
48
  booleans: disabled, isLoading
49
49
 
@@ -56,18 +56,18 @@ Alert (Feedback)
56
56
 
57
57
  Badge (Content)
58
58
  color: primary | warning | success | danger | light | bestseller | gradient
59
- size: xlarge | medium | small | micro
59
+ size: xlarge | medium | small | micro | compact | compactTight
60
60
  appearance: default | a2ui
61
61
  booleans: showIconLeft, showIconRight
62
62
 
63
63
  Chip (Content)
64
64
  state: default | active
65
- size: huge | xlarge | large | medium | small | micro
65
+ size: huge | xlarge | large | medium | small | micro | compact
66
66
  appearance: default | a2ui
67
67
  booleans: showIconLeft, showIconRight
68
68
 
69
69
  TextField (Form)
70
- size: large | small | xsmall
70
+ size: large | small | xsmall | compact
71
71
  appearance: default | a2ui | bare
72
72
  counterPlacement: below | inside
73
73
  prefixPlacement: inside | outside
@@ -95,6 +95,7 @@ Switch (Form)
95
95
 
96
96
  Slider (Form)
97
97
  size: large | small
98
+ appearance: default | scrubber
98
99
  booleans: disabled
99
100
 
100
101
  DateTimeInput (Form)
@@ -126,11 +127,11 @@ Skeleton (Feedback)
126
127
  Text (Foundations)
127
128
  role: display | h1 | h2 | h3 | h4 | h5 | h6 | paragraph | bodyLg | bodyMd | bodySm
128
129
  weight: bold | semibold | medium | regular
129
- color: primary | secondary | disable | invert | brand | success | error | warning
130
+ color: primary | secondary | disable | invert | brand | success | error | warning | muted
130
131
 
131
132
  Icon (Foundations)
132
133
  size: xs | sm | md | lg | xl
133
- color: primary | secondary | disable | invert | brand | success | error | warning
134
+ color: primary | secondary | disable | invert | brand | success | error | warning | muted
134
135
  REQUIRED props (not axes): name
135
136
 
136
137
  Sidebar (Shell)
@@ -156,7 +157,7 @@ ChatComposerInput (Chat)
156
157
  REQUIRED props (not axes): value, onValueChange, label
157
158
 
158
159
  ChatDrawer (Chat)
159
- variant: inherit | neutral | info | warning | danger
160
+ variant: inherit | neutral | info | warning | danger | floating
160
161
  booleans: collapsed
161
162
 
162
163
  ChatAttachment (Chat)
@@ -224,7 +225,8 @@ ChatMessageTTSButton (Chat)
224
225
  Dialog (Overlays)
225
226
  size: small | medium | large | xlarge
226
227
  side: none | left | right
227
- booleans: centered, showCloseButton, dismissible, closeDisabled
228
+ rounded: default | lg
229
+ booleans: centered, fullHeight, keyboardAware, showCloseButton, dismissible, dismissOnOutsidePress, closeDisabled
228
230
  REQUIRED props (not axes): open, onOpenChange
229
231
 
230
232
  Menu (Overlays)
@@ -236,7 +238,7 @@ Popover (Overlays)
236
238
  booleans: portal
237
239
 
238
240
  Card (Content)
239
- variant: elevated | outlined | plain
241
+ variant: elevated | outlined | plain | glass
240
242
  padding: none | small | medium | large
241
243
  appearance: default | a2ui | a2ui-hero
242
244
 
@@ -448,6 +450,7 @@ TRAPS — each of these renders or ignores silently, with no error:
448
450
  --text-default-success: 14 160 110;
449
451
  --text-default-error: 219 0 0;
450
452
  --text-default-warning: 245 158 11;
453
+ --text-default-muted: 49 77 105;
451
454
  --text-hover-primary: 3 32 61;
452
455
  --text-hover-secondary: 97 118 140;
453
456
  --text-hover-invert: 246 246 246;
@@ -474,6 +477,15 @@ TRAPS — each of these renders or ignores silently, with no error:
474
477
  --text-disable-error: 245 150 150;
475
478
  --text-disable-warning: 253 228 152;
476
479
  --text-disable-invert: 49 77 105;
480
+ --text-chip-price: 138 74 0;
481
+ --text-chip-free: 0 88 71;
482
+ --text-tile-blue: 0 116 231;
483
+ --text-tile-green: 14 160 110;
484
+ --text-tile-yellow: 179 116 0;
485
+ --text-tile-red: 219 0 0;
486
+ --text-tile-purple: 91 69 194;
487
+ --text-tile-orange: 201 98 10;
488
+ --text-coin-default: 240 138 28;
477
489
  --icon-default-primary: 4 38 72;
478
490
  --icon-default-secondary: 147 162 176;
479
491
  --icon-default-invert: 255 255 255;
@@ -507,6 +519,13 @@ TRAPS — each of these renders or ignores silently, with no error:
507
519
  --icon-disable-error: 245 150 150;
508
520
  --icon-disable-warning: 253 228 152;
509
521
  --icon-disable-invert: 49 77 105;
522
+ --icon-tile-blue: 0 116 231;
523
+ --icon-tile-green: 14 160 110;
524
+ --icon-tile-yellow: 179 116 0;
525
+ --icon-tile-red: 219 0 0;
526
+ --icon-tile-purple: 91 69 194;
527
+ --icon-tile-orange: 201 98 10;
528
+ --icon-coin-default: 240 138 28;
510
529
  --surface-default-primary: 255 255 255;
511
530
  --surface-default-secondary: 246 246 246;
512
531
  --surface-default-invert: 0 0 0;
@@ -552,6 +571,18 @@ TRAPS — each of these renders or ignores silently, with no error:
552
571
  --surface-gradient-yellow-end: 172 111 8;
553
572
  --surface-gradient-callout-start: 0 81 162;
554
573
  --surface-gradient-callout-end: 8 118 96;
574
+ --surface-glass-default: 255 255 255;
575
+ --surface-glass-strong: 255 255 255;
576
+ --surface-page-mesh: 247 250 253;
577
+ --surface-tile-blue: 240 247 255;
578
+ --surface-tile-green: 236 253 247;
579
+ --surface-tile-yellow: 255 248 230;
580
+ --surface-tile-red: 255 243 243;
581
+ --surface-tile-purple: 239 235 252;
582
+ --surface-tile-orange: 255 240 227;
583
+ --surface-chip-price: 255 248 230;
584
+ --surface-chip-free: 236 253 247;
585
+ --surface-badge-promo: 231 0 0;
555
586
  --surface-hover-neutral: 247 248 250;
556
587
  --surface-selected-hover: 227 239 252;
557
588
  --surface-default-subtle: 249 250 251;
@@ -587,6 +618,7 @@ TRAPS — each of these renders or ignores silently, with no error:
587
618
  --border-disable-error: 245 150 150;
588
619
  --border-disable-warning: 253 228 152;
589
620
  --border-disable-invert: 49 77 105;
621
+ --border-glass-default: 255 255 255;
590
622
  --radius-null: 0;
591
623
  --radius-xs: 4;
592
624
  --radius-sm: 6;
@@ -622,6 +654,8 @@ TRAPS — each of these renders or ignores silently, with no error:
622
654
  --shadow-position-md: 4;
623
655
  --shadow-position-lg: 8;
624
656
  --shadow-position-xl: 12;
657
+ --shadow-nav: 0 10px 30px 0 #0426481f;
658
+ --shadow-float: 0 20px 50px 0 #04264847;
625
659
  --shadow-5-pct: 0 4px 12px 0 #0000000d;
626
660
  --shadow-card: 0 2px 8px 0 #0000001a;
627
661
  --shadow-10-pct: 0 4px 16px 0 #0000001a;
@@ -633,6 +667,32 @@ TRAPS — each of these renders or ignores silently, with no error:
633
667
  --border-width-sm: 1;
634
668
  --border-width-md: 2;
635
669
  --border-width-l: 4;
670
+ --glow-mesh-blue: 3 114 229;
671
+ --glow-mesh-green: 30 198 141;
672
+ --glow-mesh-sky: 150 198 245;
673
+ --glow-mesh-mint: 28 198 142;
674
+ --blur-glass: 18;
675
+ --motion-duration-press: 120;
676
+ --motion-duration-fast: 180;
677
+ --motion-duration-base: 280;
678
+ --motion-duration-slow: 380;
679
+ --motion-easing-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
680
+ --motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
681
+ --motion-spring-press-damping: 18;
682
+ --motion-spring-press-stiffness: 320;
683
+ --motion-spring-sheet-damping: 22;
684
+ --motion-spring-sheet-stiffness: 220;
685
+ --motion-stagger-step: 40;
686
+ --motion-stagger-max: 8;
687
+ --motion-distance-enter: 12;
688
+ --motion-distance-sidebar: 24;
689
+ --motion-distance-label: 6;
690
+ --motion-delay-label: 100;
691
+ --motion-scale-press-default: 0.97;
692
+ --motion-scale-press-card: 0.98;
693
+ --motion-scale-press-icon: 0.92;
694
+ --motion-scale-pop-squash: 0.82;
695
+ --motion-scale-pop-overshoot: 1.14;
636
696
  --callout-default-surface: 240 247 255;
637
697
  --callout-default-border: 0 116 231;
638
698
  --callout-default-text: 0 81 162;
@@ -743,8 +803,8 @@ TRAPS — each of these renders or ignores silently, with no error:
743
803
  body { color: rgb(var(--text-default-primary)); }
744
804
  </style>
745
805
  <script src="https://cdn.tailwindcss.com"></script>
746
- <script src="https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-ha04bbbde2f13/umkmall-tailwind.js"></script>
747
- <script src="https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-ha04bbbde2f13/umkmall-ui.js"></script>
806
+ <script src="https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-ha281120cae90/umkmall-tailwind.js"></script>
807
+ <script src="https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-ha281120cae90/umkmall-ui.js"></script>
748
808
  <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.26.4/babel.min.js"></script>
749
809
  </head>
750
810
  <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-ha04bbbde2f13/umkmall-starter.md
33
- the demo block on its own https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-ha04bbbde2f13/umkmall-starter-app.md
34
- the component vocabulary https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-ha04bbbde2f13/umkmall-components.md
35
- the starter as a raw .html file https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-ha04bbbde2f13/umkmall-prototype-starter.html
32
+ the whole starter, in a code block https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-ha281120cae90/umkmall-starter.md
33
+ the demo block on its own https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-ha281120cae90/umkmall-starter-app.md
34
+ the component vocabulary https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-ha281120cae90/umkmall-components.md
35
+ the starter as a raw .html file https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-ha281120cae90/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-ha04bbbde2f13/umkmall-components.md
153
+ https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-ha281120cae90/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-ha04bbbde2f13/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-ha281120cae90/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-ha04bbbde2f13/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-ha281120cae90/umkmall-rules.md).
11
11
 
12
12
  ```jsx
13
13
  /*
package/umkmall-starter.md CHANGED
@@ -3,9 +3,9 @@
3
3
  The starter in a code block, so it can be read without fetching HTML. Save it as `.html` and
4
4
  open it; there is no build step and no install.
5
5
 
6
- It is the same file as [the raw starter](https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-ha04bbbde2f13/umkmall-prototype-starter.html) with one deliberate difference: the
6
+ It is the same file as [the raw starter](https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-ha281120cae90/umkmall-prototype-starter.html) with one deliberate difference: the
7
7
  `.html` carries the whole component list inside a comment in its `<head>`, and here that is
8
- replaced by a link to [the same list](https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-ha04bbbde2f13/umkmall-components.md). Nothing else differs, and nothing the
8
+ replaced by a link to [the same list](https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-ha281120cae90/umkmall-components.md). Nothing else differs, and nothing the
9
9
  page needs to run is in the part that was swapped.
10
10
 
11
11
  **Take the `<head>` exactly as it is.** Its tags load in one order that works: the config
@@ -14,7 +14,7 @@ CDN the global does not exist and after it the theme arrives too late — every
14
14
  class then resolves to nothing, with no error. Edit only the `<script type="text/babel">`
15
15
  block at the bottom.
16
16
 
17
- The component list is not inline here; it is [its own file](https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-ha04bbbde2f13/umkmall-components.md).
17
+ The component list is not inline here; it is [its own file](https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-ha281120cae90/umkmall-components.md).
18
18
 
19
19
  ````html
20
20
  <!doctype html>
@@ -37,8 +37,8 @@ HOW TO USE THIS FILE
37
37
  WHAT THIS FILE NEEDS FROM THE NETWORK
38
38
  Four hosts, every time it is opened — not just the first time:
39
39
 
40
- https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-ha04bbbde2f13/umkmall-tailwind.js
41
- https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-ha04bbbde2f13/umkmall-ui.js
40
+ https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-ha281120cae90/umkmall-tailwind.js
41
+ https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-ha281120cae90/umkmall-ui.js
42
42
  https://cdn.jsdelivr.net/npm/@babel/standalone@7.26.4/babel.min.js
43
43
  — all on jsDelivr: the design system's assets (pinned) and the JSX compiler.
44
44
  The token CSS is NOT fetched: it is inlined in the <style> below, because a claude.ai
@@ -52,14 +52,14 @@ WHAT THIS FILE NEEDS FROM THE NETWORK
52
52
 
53
53
  YOU DO NOT HAVE TO START FROM THIS FILE
54
54
  Four tags add UMKMall styling to a page you already have: the token CSS as a <link> to
55
- https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-ha04bbbde2f13/umkmall-tokens.css
55
+ https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-ha281120cae90/umkmall-tokens.css
56
56
  then the Play CDN, the config and the bundle below. Keep the order — the config must come after
57
57
  the Play CDN script, or the theme arrives too late and every class resolves to nothing.
58
58
 
59
59
  THE COMPONENT LIST IS NOT IN THIS FILE.
60
60
  It is published separately, and it is always current:
61
61
 
62
- https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-ha04bbbde2f13/umkmall-components.md
62
+ https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-ha281120cae90/umkmall-components.md
63
63
 
64
64
  It carries every component, its axes, and the props it will not render without.
65
65
  -->
@@ -187,6 +187,7 @@ It carries every component, its axes, and the props it will not render without.
187
187
  --text-default-success: 14 160 110;
188
188
  --text-default-error: 219 0 0;
189
189
  --text-default-warning: 245 158 11;
190
+ --text-default-muted: 49 77 105;
190
191
  --text-hover-primary: 3 32 61;
191
192
  --text-hover-secondary: 97 118 140;
192
193
  --text-hover-invert: 246 246 246;
@@ -213,6 +214,15 @@ It carries every component, its axes, and the props it will not render without.
213
214
  --text-disable-error: 245 150 150;
214
215
  --text-disable-warning: 253 228 152;
215
216
  --text-disable-invert: 49 77 105;
217
+ --text-chip-price: 138 74 0;
218
+ --text-chip-free: 0 88 71;
219
+ --text-tile-blue: 0 116 231;
220
+ --text-tile-green: 14 160 110;
221
+ --text-tile-yellow: 179 116 0;
222
+ --text-tile-red: 219 0 0;
223
+ --text-tile-purple: 91 69 194;
224
+ --text-tile-orange: 201 98 10;
225
+ --text-coin-default: 240 138 28;
216
226
  --icon-default-primary: 4 38 72;
217
227
  --icon-default-secondary: 147 162 176;
218
228
  --icon-default-invert: 255 255 255;
@@ -246,6 +256,13 @@ It carries every component, its axes, and the props it will not render without.
246
256
  --icon-disable-error: 245 150 150;
247
257
  --icon-disable-warning: 253 228 152;
248
258
  --icon-disable-invert: 49 77 105;
259
+ --icon-tile-blue: 0 116 231;
260
+ --icon-tile-green: 14 160 110;
261
+ --icon-tile-yellow: 179 116 0;
262
+ --icon-tile-red: 219 0 0;
263
+ --icon-tile-purple: 91 69 194;
264
+ --icon-tile-orange: 201 98 10;
265
+ --icon-coin-default: 240 138 28;
249
266
  --surface-default-primary: 255 255 255;
250
267
  --surface-default-secondary: 246 246 246;
251
268
  --surface-default-invert: 0 0 0;
@@ -291,6 +308,18 @@ It carries every component, its axes, and the props it will not render without.
291
308
  --surface-gradient-yellow-end: 172 111 8;
292
309
  --surface-gradient-callout-start: 0 81 162;
293
310
  --surface-gradient-callout-end: 8 118 96;
311
+ --surface-glass-default: 255 255 255;
312
+ --surface-glass-strong: 255 255 255;
313
+ --surface-page-mesh: 247 250 253;
314
+ --surface-tile-blue: 240 247 255;
315
+ --surface-tile-green: 236 253 247;
316
+ --surface-tile-yellow: 255 248 230;
317
+ --surface-tile-red: 255 243 243;
318
+ --surface-tile-purple: 239 235 252;
319
+ --surface-tile-orange: 255 240 227;
320
+ --surface-chip-price: 255 248 230;
321
+ --surface-chip-free: 236 253 247;
322
+ --surface-badge-promo: 231 0 0;
294
323
  --surface-hover-neutral: 247 248 250;
295
324
  --surface-selected-hover: 227 239 252;
296
325
  --surface-default-subtle: 249 250 251;
@@ -326,6 +355,7 @@ It carries every component, its axes, and the props it will not render without.
326
355
  --border-disable-error: 245 150 150;
327
356
  --border-disable-warning: 253 228 152;
328
357
  --border-disable-invert: 49 77 105;
358
+ --border-glass-default: 255 255 255;
329
359
  --radius-null: 0;
330
360
  --radius-xs: 4;
331
361
  --radius-sm: 6;
@@ -361,6 +391,8 @@ It carries every component, its axes, and the props it will not render without.
361
391
  --shadow-position-md: 4;
362
392
  --shadow-position-lg: 8;
363
393
  --shadow-position-xl: 12;
394
+ --shadow-nav: 0 10px 30px 0 #0426481f;
395
+ --shadow-float: 0 20px 50px 0 #04264847;
364
396
  --shadow-5-pct: 0 4px 12px 0 #0000000d;
365
397
  --shadow-card: 0 2px 8px 0 #0000001a;
366
398
  --shadow-10-pct: 0 4px 16px 0 #0000001a;
@@ -372,6 +404,32 @@ It carries every component, its axes, and the props it will not render without.
372
404
  --border-width-sm: 1;
373
405
  --border-width-md: 2;
374
406
  --border-width-l: 4;
407
+ --glow-mesh-blue: 3 114 229;
408
+ --glow-mesh-green: 30 198 141;
409
+ --glow-mesh-sky: 150 198 245;
410
+ --glow-mesh-mint: 28 198 142;
411
+ --blur-glass: 18;
412
+ --motion-duration-press: 120;
413
+ --motion-duration-fast: 180;
414
+ --motion-duration-base: 280;
415
+ --motion-duration-slow: 380;
416
+ --motion-easing-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
417
+ --motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
418
+ --motion-spring-press-damping: 18;
419
+ --motion-spring-press-stiffness: 320;
420
+ --motion-spring-sheet-damping: 22;
421
+ --motion-spring-sheet-stiffness: 220;
422
+ --motion-stagger-step: 40;
423
+ --motion-stagger-max: 8;
424
+ --motion-distance-enter: 12;
425
+ --motion-distance-sidebar: 24;
426
+ --motion-distance-label: 6;
427
+ --motion-delay-label: 100;
428
+ --motion-scale-press-default: 0.97;
429
+ --motion-scale-press-card: 0.98;
430
+ --motion-scale-press-icon: 0.92;
431
+ --motion-scale-pop-squash: 0.82;
432
+ --motion-scale-pop-overshoot: 1.14;
375
433
  --callout-default-surface: 240 247 255;
376
434
  --callout-default-border: 0 116 231;
377
435
  --callout-default-text: 0 81 162;
@@ -482,8 +540,8 @@ It carries every component, its axes, and the props it will not render without.
482
540
  body { color: rgb(var(--text-default-primary)); }
483
541
  </style>
484
542
  <script src="https://cdn.tailwindcss.com"></script>
485
- <script src="https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-ha04bbbde2f13/umkmall-tailwind.js"></script>
486
- <script src="https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-ha04bbbde2f13/umkmall-ui.js"></script>
543
+ <script src="https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-ha281120cae90/umkmall-tailwind.js"></script>
544
+ <script src="https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-ha281120cae90/umkmall-ui.js"></script>
487
545
  <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.26.4/babel.min.js"></script>
488
546
  </head>
489
547
  <body class="bg-default-primary text-default-primary">
package/umkmall-tailwind.js CHANGED
@@ -287,6 +287,7 @@ tailwind.config = {
287
287
  "default-success": "rgb(var(--text-default-success) / <alpha-value>)",
288
288
  "default-error": "rgb(var(--text-default-error) / <alpha-value>)",
289
289
  "default-warning": "rgb(var(--text-default-warning) / <alpha-value>)",
290
+ "default-muted": "rgb(var(--text-default-muted) / <alpha-value>)",
290
291
  "hover-primary": "rgb(var(--text-hover-primary) / <alpha-value>)",
291
292
  "hover-secondary": "rgb(var(--text-hover-secondary) / <alpha-value>)",
292
293
  "hover-invert": "rgb(var(--text-hover-invert) / <alpha-value>)",
@@ -312,7 +313,16 @@ tailwind.config = {
312
313
  "disable-success": "rgb(var(--text-disable-success) / <alpha-value>)",
313
314
  "disable-error": "rgb(var(--text-disable-error) / <alpha-value>)",
314
315
  "disable-warning": "rgb(var(--text-disable-warning) / <alpha-value>)",
315
- "disable-invert": "rgb(var(--text-disable-invert) / <alpha-value>)"
316
+ "disable-invert": "rgb(var(--text-disable-invert) / <alpha-value>)",
317
+ "chip-price": "rgb(var(--text-chip-price) / <alpha-value>)",
318
+ "chip-free": "rgb(var(--text-chip-free) / <alpha-value>)",
319
+ "tile-blue": "rgb(var(--text-tile-blue) / <alpha-value>)",
320
+ "tile-green": "rgb(var(--text-tile-green) / <alpha-value>)",
321
+ "tile-yellow": "rgb(var(--text-tile-yellow) / <alpha-value>)",
322
+ "tile-red": "rgb(var(--text-tile-red) / <alpha-value>)",
323
+ "tile-purple": "rgb(var(--text-tile-purple) / <alpha-value>)",
324
+ "tile-orange": "rgb(var(--text-tile-orange) / <alpha-value>)",
325
+ "coin-default": "rgb(var(--text-coin-default) / <alpha-value>)"
316
326
  },
317
327
  "backgroundColor": {
318
328
  "default-primary": "rgb(var(--surface-default-primary) / <alpha-value>)",
@@ -360,6 +370,18 @@ tailwind.config = {
360
370
  "gradient-yellow-end": "rgb(var(--surface-gradient-yellow-end) / <alpha-value>)",
361
371
  "gradient-callout-start": "rgb(var(--surface-gradient-callout-start) / <alpha-value>)",
362
372
  "gradient-callout-end": "rgb(var(--surface-gradient-callout-end) / <alpha-value>)",
373
+ "glass-default": "rgb(var(--surface-glass-default) / <alpha-value>)",
374
+ "glass-strong": "rgb(var(--surface-glass-strong) / <alpha-value>)",
375
+ "page-mesh": "rgb(var(--surface-page-mesh) / <alpha-value>)",
376
+ "tile-blue": "rgb(var(--surface-tile-blue) / <alpha-value>)",
377
+ "tile-green": "rgb(var(--surface-tile-green) / <alpha-value>)",
378
+ "tile-yellow": "rgb(var(--surface-tile-yellow) / <alpha-value>)",
379
+ "tile-red": "rgb(var(--surface-tile-red) / <alpha-value>)",
380
+ "tile-purple": "rgb(var(--surface-tile-purple) / <alpha-value>)",
381
+ "tile-orange": "rgb(var(--surface-tile-orange) / <alpha-value>)",
382
+ "chip-price": "rgb(var(--surface-chip-price) / <alpha-value>)",
383
+ "chip-free": "rgb(var(--surface-chip-free) / <alpha-value>)",
384
+ "badge-promo": "rgb(var(--surface-badge-promo) / <alpha-value>)",
363
385
  "hover-neutral": "rgb(var(--surface-hover-neutral) / <alpha-value>)",
364
386
  "selected-hover": "rgb(var(--surface-selected-hover) / <alpha-value>)",
365
387
  "default-subtle": "rgb(var(--surface-default-subtle) / <alpha-value>)"
@@ -397,6 +419,7 @@ tailwind.config = {
397
419
  "disable-error": "rgb(var(--border-disable-error) / <alpha-value>)",
398
420
  "disable-warning": "rgb(var(--border-disable-warning) / <alpha-value>)",
399
421
  "disable-invert": "rgb(var(--border-disable-invert) / <alpha-value>)",
422
+ "glass-default": "rgb(var(--border-glass-default) / <alpha-value>)",
400
423
  "halo": "rgb(var(--focus-halo) / <alpha-value>)"
401
424
  },
402
425
  "ringColor": {
@@ -432,6 +455,7 @@ tailwind.config = {
432
455
  "disable-error": "rgb(var(--border-disable-error) / <alpha-value>)",
433
456
  "disable-warning": "rgb(var(--border-disable-warning) / <alpha-value>)",
434
457
  "disable-invert": "rgb(var(--border-disable-invert) / <alpha-value>)",
458
+ "glass-default": "rgb(var(--border-glass-default) / <alpha-value>)",
435
459
  "halo": "rgb(var(--focus-halo) / <alpha-value>)"
436
460
  },
437
461
  "gradientColorStops": {
@@ -480,6 +504,18 @@ tailwind.config = {
480
504
  "gradient-yellow-end": "rgb(var(--surface-gradient-yellow-end) / <alpha-value>)",
481
505
  "gradient-callout-start": "rgb(var(--surface-gradient-callout-start) / <alpha-value>)",
482
506
  "gradient-callout-end": "rgb(var(--surface-gradient-callout-end) / <alpha-value>)",
507
+ "glass-default": "rgb(var(--surface-glass-default) / <alpha-value>)",
508
+ "glass-strong": "rgb(var(--surface-glass-strong) / <alpha-value>)",
509
+ "page-mesh": "rgb(var(--surface-page-mesh) / <alpha-value>)",
510
+ "tile-blue": "rgb(var(--surface-tile-blue) / <alpha-value>)",
511
+ "tile-green": "rgb(var(--surface-tile-green) / <alpha-value>)",
512
+ "tile-yellow": "rgb(var(--surface-tile-yellow) / <alpha-value>)",
513
+ "tile-red": "rgb(var(--surface-tile-red) / <alpha-value>)",
514
+ "tile-purple": "rgb(var(--surface-tile-purple) / <alpha-value>)",
515
+ "tile-orange": "rgb(var(--surface-tile-orange) / <alpha-value>)",
516
+ "chip-price": "rgb(var(--surface-chip-price) / <alpha-value>)",
517
+ "chip-free": "rgb(var(--surface-chip-free) / <alpha-value>)",
518
+ "badge-promo": "rgb(var(--surface-badge-promo) / <alpha-value>)",
483
519
  "hover-neutral": "rgb(var(--surface-hover-neutral) / <alpha-value>)",
484
520
  "selected-hover": "rgb(var(--surface-selected-hover) / <alpha-value>)",
485
521
  "default-subtle": "rgb(var(--surface-default-subtle) / <alpha-value>)"
@@ -530,6 +566,18 @@ tailwind.config = {
530
566
  "gradient-yellow-end": "rgb(var(--surface-gradient-yellow-end) / <alpha-value>)",
531
567
  "gradient-callout-start": "rgb(var(--surface-gradient-callout-start) / <alpha-value>)",
532
568
  "gradient-callout-end": "rgb(var(--surface-gradient-callout-end) / <alpha-value>)",
569
+ "glass-default": "rgb(var(--surface-glass-default) / <alpha-value>)",
570
+ "glass-strong": "rgb(var(--surface-glass-strong) / <alpha-value>)",
571
+ "page-mesh": "rgb(var(--surface-page-mesh) / <alpha-value>)",
572
+ "tile-blue": "rgb(var(--surface-tile-blue) / <alpha-value>)",
573
+ "tile-green": "rgb(var(--surface-tile-green) / <alpha-value>)",
574
+ "tile-yellow": "rgb(var(--surface-tile-yellow) / <alpha-value>)",
575
+ "tile-red": "rgb(var(--surface-tile-red) / <alpha-value>)",
576
+ "tile-purple": "rgb(var(--surface-tile-purple) / <alpha-value>)",
577
+ "tile-orange": "rgb(var(--surface-tile-orange) / <alpha-value>)",
578
+ "chip-price": "rgb(var(--surface-chip-price) / <alpha-value>)",
579
+ "chip-free": "rgb(var(--surface-chip-free) / <alpha-value>)",
580
+ "badge-promo": "rgb(var(--surface-badge-promo) / <alpha-value>)",
533
581
  "hover-neutral": "rgb(var(--surface-hover-neutral) / <alpha-value>)",
534
582
  "selected-hover": "rgb(var(--surface-selected-hover) / <alpha-value>)",
535
583
  "default-subtle": "rgb(var(--surface-default-subtle) / <alpha-value>)"
@@ -580,6 +628,18 @@ tailwind.config = {
580
628
  "gradient-yellow-end": "rgb(var(--surface-gradient-yellow-end) / <alpha-value>)",
581
629
  "gradient-callout-start": "rgb(var(--surface-gradient-callout-start) / <alpha-value>)",
582
630
  "gradient-callout-end": "rgb(var(--surface-gradient-callout-end) / <alpha-value>)",
631
+ "glass-default": "rgb(var(--surface-glass-default) / <alpha-value>)",
632
+ "glass-strong": "rgb(var(--surface-glass-strong) / <alpha-value>)",
633
+ "page-mesh": "rgb(var(--surface-page-mesh) / <alpha-value>)",
634
+ "tile-blue": "rgb(var(--surface-tile-blue) / <alpha-value>)",
635
+ "tile-green": "rgb(var(--surface-tile-green) / <alpha-value>)",
636
+ "tile-yellow": "rgb(var(--surface-tile-yellow) / <alpha-value>)",
637
+ "tile-red": "rgb(var(--surface-tile-red) / <alpha-value>)",
638
+ "tile-purple": "rgb(var(--surface-tile-purple) / <alpha-value>)",
639
+ "tile-orange": "rgb(var(--surface-tile-orange) / <alpha-value>)",
640
+ "chip-price": "rgb(var(--surface-chip-price) / <alpha-value>)",
641
+ "chip-free": "rgb(var(--surface-chip-free) / <alpha-value>)",
642
+ "badge-promo": "rgb(var(--surface-badge-promo) / <alpha-value>)",
583
643
  "hover-neutral": "rgb(var(--surface-hover-neutral) / <alpha-value>)",
584
644
  "selected-hover": "rgb(var(--surface-selected-hover) / <alpha-value>)",
585
645
  "default-subtle": "rgb(var(--surface-default-subtle) / <alpha-value>)"