@umkmall/proto 0.1.0-h2febbb98dc2a → 0.1.0-h46b6573ee481

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 +6 -1
  3. package/umkmall-prototype-starter.html +94 -88
  4. package/umkmall-rules.md +5 -5
  5. package/umkmall-starter-app.md +2 -2
  6. package/umkmall-starter.md +92 -91
  7. package/umkmall-tailwind.js +69 -50
  8. package/umkmall-tokens.css +83 -82
  9. package/umkmall-ui.js +17 -12
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-h46b6573ee481",
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)
@@ -52,6 +52,11 @@ Radio (Form)
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
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-h46b6573ee481/umkmall-tailwind.js
22
+ https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h46b6573ee481/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-h46b6573ee481/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)
@@ -83,6 +83,11 @@ Radio (Form)
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
@@ -342,6 +347,7 @@ TRAPS — each of these renders or ignores silently, with no error:
342
347
  --red-r600: 124 0 0;
343
348
  --red-r500: 162 0 0;
344
349
  --red-r400: 231 0 0;
350
+ --red-r450: 219 0 0;
345
351
  --red-r300: 235 43 43;
346
352
  --red-r200: 241 107 107;
347
353
  --red-r100: 245 150 150;
@@ -434,7 +440,7 @@ TRAPS — each of these renders or ignores silently, with no error:
434
440
  --text-default-invert: 255 255 255;
435
441
  --text-default-brand: 0 116 231;
436
442
  --text-default-success: 14 160 110;
437
- --text-default-error: 231 0 0;
443
+ --text-default-error: 219 0 0;
438
444
  --text-default-warning: 245 158 11;
439
445
  --text-hover-primary: 3 32 61;
440
446
  --text-hover-secondary: 97 118 140;
@@ -467,7 +473,7 @@ TRAPS — each of these renders or ignores silently, with no error:
467
473
  --icon-default-invert: 255 255 255;
468
474
  --icon-default-brand: 0 116 231;
469
475
  --icon-default-success: 14 160 110;
470
- --icon-default-error: 231 0 0;
476
+ --icon-default-error: 219 0 0;
471
477
  --icon-default-warning: 245 158 11;
472
478
  --icon-hover-primary: 3 32 61;
473
479
  --icon-hover-secondary: 97 118 140;
@@ -636,86 +642,86 @@ TRAPS — each of these renders or ignores silently, with no error:
636
642
  --callout-neg-border: 231 0 0;
637
643
  --callout-neg-text: 4 38 72;
638
644
  --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';
645
+ --typography-mobile-display-bold: 700 calc(2.25rem * var(--ds-text-scale, 1))/calc(2.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
646
+ --typography-mobile-display-semibold: 600 calc(2.25rem * var(--ds-text-scale, 1))/calc(2.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
647
+ --typography-mobile-h1-bold: 700 calc(1.75rem * var(--ds-text-scale, 1))/calc(2rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
648
+ --typography-mobile-h1-semibold: 600 calc(1.75rem * var(--ds-text-scale, 1))/calc(2rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
649
+ --typography-mobile-h2-bold: 700 calc(1.5rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
650
+ --typography-mobile-h2-semibold: 600 calc(1.5rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
651
+ --typography-mobile-h2-medium: 500 calc(1.5rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
652
+ --typography-mobile-h2-regular: 400 calc(1.5rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
653
+ --typography-mobile-h3-bold: 700 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.625rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
654
+ --typography-mobile-h3-semibold: 600 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.625rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
655
+ --typography-mobile-h3-medium: 500 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.625rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
656
+ --typography-mobile-h3-regular: 400 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.625rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
657
+ --typography-mobile-h4-bold: 700 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.625rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
658
+ --typography-mobile-h4-semibold: 600 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.625rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
659
+ --typography-mobile-h4-medium: 500 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.625rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
660
+ --typography-mobile-h4-regular: 400 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.625rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
661
+ --typography-mobile-h5-bold: 700 calc(1.125rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
662
+ --typography-mobile-h5-semibold: 600 calc(1.125rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
663
+ --typography-mobile-h5-medium: 500 calc(1.125rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
664
+ --typography-mobile-h5-regular: 400 calc(1.125rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
665
+ --typography-mobile-h6-bold: 700 calc(1rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
666
+ --typography-mobile-h6-semibold: 600 calc(1rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
667
+ --typography-mobile-h6-medium: 500 calc(1rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
668
+ --typography-mobile-h6-regular: 400 calc(1rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
669
+ --typography-mobile-paragraph-bold: 700 calc(0.875rem * var(--ds-text-scale, 1))/calc(1.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
670
+ --typography-mobile-paragraph-semibold: 600 calc(0.875rem * var(--ds-text-scale, 1))/calc(1.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
671
+ --typography-mobile-paragraph-medium: 500 calc(0.875rem * var(--ds-text-scale, 1))/calc(1.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
672
+ --typography-mobile-paragraph-regular: 400 calc(0.875rem * var(--ds-text-scale, 1))/calc(1.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
673
+ --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';
674
+ --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';
675
+ --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';
676
+ --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';
677
+ --typography-mobile-body-md-bold: 700 calc(0.625rem * var(--ds-text-scale, 1))/calc(1rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
678
+ --typography-mobile-body-md-semibold: 600 calc(0.625rem * var(--ds-text-scale, 1))/calc(1rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
679
+ --typography-mobile-body-md-medium: 500 calc(0.625rem * var(--ds-text-scale, 1))/calc(1rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
680
+ --typography-mobile-body-md-regular: 400 calc(0.625rem * var(--ds-text-scale, 1))/calc(1rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
681
+ --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';
682
+ --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';
683
+ --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';
684
+ --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';
685
+ --typography-desktop-display-bold: 700 calc(3.5rem * var(--ds-text-scale, 1))/calc(4rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
686
+ --typography-desktop-display-semibold: 600 calc(3.5rem * var(--ds-text-scale, 1))/calc(4rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
687
+ --typography-desktop-h1-bold: 700 calc(2.5rem * var(--ds-text-scale, 1))/calc(3rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
688
+ --typography-desktop-h1-semibold: 600 calc(2.5rem * var(--ds-text-scale, 1))/calc(3rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
689
+ --typography-desktop-h2-bold: 700 calc(2rem * var(--ds-text-scale, 1))/calc(2.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
690
+ --typography-desktop-h2-semibold: 600 calc(2rem * var(--ds-text-scale, 1))/calc(2.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
691
+ --typography-desktop-h2-medium: 500 calc(2rem * var(--ds-text-scale, 1))/calc(2.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
692
+ --typography-desktop-h2-regular: 400 calc(2rem * var(--ds-text-scale, 1))/calc(2.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
693
+ --typography-desktop-h3-bold: 700 calc(1.75rem * var(--ds-text-scale, 1))/calc(2.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
694
+ --typography-desktop-h3-semibold: 600 calc(1.75rem * var(--ds-text-scale, 1))/calc(2.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
695
+ --typography-desktop-h3-medium: 500 calc(1.75rem * var(--ds-text-scale, 1))/calc(2.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
696
+ --typography-desktop-h3-regular: 400 calc(1.75rem * var(--ds-text-scale, 1))/calc(2.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
697
+ --typography-desktop-h4-bold: 700 calc(1.5rem * var(--ds-text-scale, 1))/calc(2rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
698
+ --typography-desktop-h4-semibold: 600 calc(1.5rem * var(--ds-text-scale, 1))/calc(2rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
699
+ --typography-desktop-h4-medium: 500 calc(1.5rem * var(--ds-text-scale, 1))/calc(2rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
700
+ --typography-desktop-h4-regular: 400 calc(1.5rem * var(--ds-text-scale, 1))/calc(2rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
701
+ --typography-desktop-h5-bold: 700 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
702
+ --typography-desktop-h5-semibold: 600 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
703
+ --typography-desktop-h5-medium: 500 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
704
+ --typography-desktop-h5-regular: 400 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
705
+ --typography-desktop-h6-bold: 700 calc(1.125rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
706
+ --typography-desktop-h6-semibold: 600 calc(1.125rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
707
+ --typography-desktop-h6-medium: 500 calc(1.125rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
708
+ --typography-desktop-h6-regular: 400 calc(1.125rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
709
+ --typography-desktop-paragraph-bold: 700 calc(1rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
710
+ --typography-desktop-paragraph-semibold: 600 calc(1rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
711
+ --typography-desktop-paragraph-medium: 500 calc(1rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
712
+ --typography-desktop-paragraph-regular: 400 calc(1rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
713
+ --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';
714
+ --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';
715
+ --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';
716
+ --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';
717
+ --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';
718
+ --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';
719
+ --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';
720
+ --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';
721
+ --typography-desktop-body-sm-bold: 700 calc(0.625rem * var(--ds-text-scale, 1))/calc(1rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
722
+ --typography-desktop-body-sm-semibold: 600 calc(0.625rem * var(--ds-text-scale, 1))/calc(1rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
723
+ --typography-desktop-body-sm-medium: 500 calc(0.625rem * var(--ds-text-scale, 1))/calc(1rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
724
+ --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
725
  --elevation-overlay: 99999;
720
726
  }
721
727
 
@@ -730,8 +736,8 @@ TRAPS — each of these renders or ignores silently, with no error:
730
736
  body { color: rgb(var(--text-default-primary)); }
731
737
  </style>
732
738
  <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>
739
+ <script src="https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h46b6573ee481/umkmall-tailwind.js"></script>
740
+ <script src="https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h46b6573ee481/umkmall-ui.js"></script>
735
741
  <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.26.4/babel.min.js"></script>
736
742
  </head>
737
743
  <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-h46b6573ee481/umkmall-starter.md
33
+ the demo block on its own https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h46b6573ee481/umkmall-starter-app.md
34
+ the component vocabulary https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h46b6573ee481/umkmall-components.md
35
+ the starter as a raw .html file https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h46b6573ee481/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-h46b6573ee481/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-h46b6573ee481/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-h46b6573ee481/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-h2febbb98dc2a/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-h46b6573ee481/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-h2febbb98dc2a/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-h46b6573ee481/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-h2febbb98dc2a/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-h46b6573ee481/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-h2febbb98dc2a/umkmall-tailwind.js
41
- https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2febbb98dc2a/umkmall-ui.js
40
+ https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h46b6573ee481/umkmall-tailwind.js
41
+ https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h46b6573ee481/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-h2febbb98dc2a/umkmall-tokens.css
55
+ https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h46b6573ee481/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-h2febbb98dc2a/umkmall-components.md
62
+ https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h46b6573ee481/umkmall-components.md
63
63
 
64
64
  It carries every component, its axes, and the props it will not render without.
65
65
  -->
@@ -92,6 +92,7 @@ It carries every component, its axes, and the props it will not render without.
92
92
  --red-r600: 124 0 0;
93
93
  --red-r500: 162 0 0;
94
94
  --red-r400: 231 0 0;
95
+ --red-r450: 219 0 0;
95
96
  --red-r300: 235 43 43;
96
97
  --red-r200: 241 107 107;
97
98
  --red-r100: 245 150 150;
@@ -184,7 +185,7 @@ It carries every component, its axes, and the props it will not render without.
184
185
  --text-default-invert: 255 255 255;
185
186
  --text-default-brand: 0 116 231;
186
187
  --text-default-success: 14 160 110;
187
- --text-default-error: 231 0 0;
188
+ --text-default-error: 219 0 0;
188
189
  --text-default-warning: 245 158 11;
189
190
  --text-hover-primary: 3 32 61;
190
191
  --text-hover-secondary: 97 118 140;
@@ -217,7 +218,7 @@ It carries every component, its axes, and the props it will not render without.
217
218
  --icon-default-invert: 255 255 255;
218
219
  --icon-default-brand: 0 116 231;
219
220
  --icon-default-success: 14 160 110;
220
- --icon-default-error: 231 0 0;
221
+ --icon-default-error: 219 0 0;
221
222
  --icon-default-warning: 245 158 11;
222
223
  --icon-hover-primary: 3 32 61;
223
224
  --icon-hover-secondary: 97 118 140;
@@ -386,86 +387,86 @@ It carries every component, its axes, and the props it will not render without.
386
387
  --callout-neg-border: 231 0 0;
387
388
  --callout-neg-text: 4 38 72;
388
389
  --focus-halo: 150 198 245;
389
- --typography-mobile-display-bold: 700 36px/40px 'Be Vietnam Pro';
390
- --typography-mobile-display-semibold: 600 36px/40px 'Be Vietnam Pro';
391
- --typography-mobile-h1-bold: 700 28px/32px 'Be Vietnam Pro';
392
- --typography-mobile-h1-semibold: 600 28px/32px 'Be Vietnam Pro';
393
- --typography-mobile-h2-bold: 700 24px/28px 'Be Vietnam Pro';
394
- --typography-mobile-h2-semibold: 600 24px/28px 'Be Vietnam Pro';
395
- --typography-mobile-h2-medium: 500 24px/28px 'Be Vietnam Pro';
396
- --typography-mobile-h2-regular: 400 24px/28px 'Be Vietnam Pro';
397
- --typography-mobile-h3-bold: 700 20px/26px 'Be Vietnam Pro';
398
- --typography-mobile-h3-semibold: 600 20px/26px 'Be Vietnam Pro';
399
- --typography-mobile-h3-medium: 500 20px/26px 'Be Vietnam Pro';
400
- --typography-mobile-h3-regular: 400 20px/26px 'Be Vietnam Pro';
401
- --typography-mobile-h4-bold: 700 20px/26px 'Be Vietnam Pro';
402
- --typography-mobile-h4-semibold: 600 20px/26px 'Be Vietnam Pro';
403
- --typography-mobile-h4-medium: 500 20px/26px 'Be Vietnam Pro';
404
- --typography-mobile-h4-regular: 400 20px/26px 'Be Vietnam Pro';
405
- --typography-mobile-h5-bold: 700 18px/24px 'Be Vietnam Pro';
406
- --typography-mobile-h5-semibold: 600 18px/24px 'Be Vietnam Pro';
407
- --typography-mobile-h5-medium: 500 18px/24px 'Be Vietnam Pro';
408
- --typography-mobile-h5-regular: 400 18px/24px 'Be Vietnam Pro';
409
- --typography-mobile-h6-bold: 700 16px/24px 'Be Vietnam Pro';
410
- --typography-mobile-h6-semibold: 600 16px/24px 'Be Vietnam Pro';
411
- --typography-mobile-h6-medium: 500 16px/24px 'Be Vietnam Pro';
412
- --typography-mobile-h6-regular: 400 16px/24px 'Be Vietnam Pro';
413
- --typography-mobile-paragraph-bold: 700 14px/20px 'Be Vietnam Pro';
414
- --typography-mobile-paragraph-semibold: 600 14px/20px 'Be Vietnam Pro';
415
- --typography-mobile-paragraph-medium: 500 14px/20px 'Be Vietnam Pro';
416
- --typography-mobile-paragraph-regular: 400 14px/20px 'Be Vietnam Pro';
417
- --typography-mobile-body-lg-bold: 700 12px/18px 'Be Vietnam Pro';
418
- --typography-mobile-body-lg-semibold: 600 12px/18px 'Be Vietnam Pro';
419
- --typography-mobile-body-lg-medium: 500 12px/18px 'Be Vietnam Pro';
420
- --typography-mobile-body-lg-regular: 400 12px/18px 'Be Vietnam Pro';
421
- --typography-mobile-body-md-bold: 700 10px/16px 'Be Vietnam Pro';
422
- --typography-mobile-body-md-semibold: 600 10px/16px 'Be Vietnam Pro';
423
- --typography-mobile-body-md-medium: 500 10px/16px 'Be Vietnam Pro';
424
- --typography-mobile-body-md-regular: 400 10px/16px 'Be Vietnam Pro';
425
- --typography-mobile-body-sm-bold: 700 8px/14px 'Be Vietnam Pro';
426
- --typography-mobile-body-sm-semibold: 600 8px/14px 'Be Vietnam Pro';
427
- --typography-mobile-body-sm-medium: 500 8px/14px 'Be Vietnam Pro';
428
- --typography-mobile-body-sm-regular: 400 8px/14px 'Be Vietnam Pro';
429
- --typography-desktop-display-bold: 700 56px/64px 'Be Vietnam Pro';
430
- --typography-desktop-display-semibold: 600 56px/64px 'Be Vietnam Pro';
431
- --typography-desktop-h1-bold: 700 40px/48px 'Be Vietnam Pro';
432
- --typography-desktop-h1-semibold: 600 40px/48px 'Be Vietnam Pro';
433
- --typography-desktop-h2-bold: 700 32px/40px 'Be Vietnam Pro';
434
- --typography-desktop-h2-semibold: 600 32px/40px 'Be Vietnam Pro';
435
- --typography-desktop-h2-medium: 500 32px/40px 'Be Vietnam Pro';
436
- --typography-desktop-h2-regular: 400 32px/40px 'Be Vietnam Pro';
437
- --typography-desktop-h3-bold: 700 28px/36px 'Be Vietnam Pro';
438
- --typography-desktop-h3-semibold: 600 28px/36px 'Be Vietnam Pro';
439
- --typography-desktop-h3-medium: 500 28px/36px 'Be Vietnam Pro';
440
- --typography-desktop-h3-regular: 400 28px/36px 'Be Vietnam Pro';
441
- --typography-desktop-h4-bold: 700 24px/32px 'Be Vietnam Pro';
442
- --typography-desktop-h4-semibold: 600 24px/32px 'Be Vietnam Pro';
443
- --typography-desktop-h4-medium: 500 24px/32px 'Be Vietnam Pro';
444
- --typography-desktop-h4-regular: 400 24px/32px 'Be Vietnam Pro';
445
- --typography-desktop-h5-bold: 700 20px/28px 'Be Vietnam Pro';
446
- --typography-desktop-h5-semibold: 600 20px/28px 'Be Vietnam Pro';
447
- --typography-desktop-h5-medium: 500 20px/28px 'Be Vietnam Pro';
448
- --typography-desktop-h5-regular: 400 20px/28px 'Be Vietnam Pro';
449
- --typography-desktop-h6-bold: 700 18px/28px 'Be Vietnam Pro';
450
- --typography-desktop-h6-semibold: 600 18px/28px 'Be Vietnam Pro';
451
- --typography-desktop-h6-medium: 500 18px/28px 'Be Vietnam Pro';
452
- --typography-desktop-h6-regular: 400 18px/28px 'Be Vietnam Pro';
453
- --typography-desktop-paragraph-bold: 700 16px/24px 'Be Vietnam Pro';
454
- --typography-desktop-paragraph-semibold: 600 16px/24px 'Be Vietnam Pro';
455
- --typography-desktop-paragraph-medium: 500 16px/24px 'Be Vietnam Pro';
456
- --typography-desktop-paragraph-regular: 400 16px/24px 'Be Vietnam Pro';
457
- --typography-desktop-body-lg-bold: 700 14px/20px 'Be Vietnam Pro';
458
- --typography-desktop-body-lg-semibold: 600 14px/20px 'Be Vietnam Pro';
459
- --typography-desktop-body-lg-medium: 500 14px/20px 'Be Vietnam Pro';
460
- --typography-desktop-body-lg-regular: 400 14px/20px 'Be Vietnam Pro';
461
- --typography-desktop-body-md-bold: 700 12px/18px 'Be Vietnam Pro';
462
- --typography-desktop-body-md-semibold: 600 12px/18px 'Be Vietnam Pro';
463
- --typography-desktop-body-md-medium: 500 12px/18px 'Be Vietnam Pro';
464
- --typography-desktop-body-md-regular: 400 12px/18px 'Be Vietnam Pro';
465
- --typography-desktop-body-sm-bold: 700 10px/16px 'Be Vietnam Pro';
466
- --typography-desktop-body-sm-semibold: 600 10px/16px 'Be Vietnam Pro';
467
- --typography-desktop-body-sm-medium: 500 10px/16px 'Be Vietnam Pro';
468
- --typography-desktop-body-sm-regular: 400 10px/16px 'Be Vietnam Pro';
390
+ --typography-mobile-display-bold: 700 calc(2.25rem * var(--ds-text-scale, 1))/calc(2.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
391
+ --typography-mobile-display-semibold: 600 calc(2.25rem * var(--ds-text-scale, 1))/calc(2.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
392
+ --typography-mobile-h1-bold: 700 calc(1.75rem * var(--ds-text-scale, 1))/calc(2rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
393
+ --typography-mobile-h1-semibold: 600 calc(1.75rem * var(--ds-text-scale, 1))/calc(2rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
394
+ --typography-mobile-h2-bold: 700 calc(1.5rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
395
+ --typography-mobile-h2-semibold: 600 calc(1.5rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
396
+ --typography-mobile-h2-medium: 500 calc(1.5rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
397
+ --typography-mobile-h2-regular: 400 calc(1.5rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
398
+ --typography-mobile-h3-bold: 700 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.625rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
399
+ --typography-mobile-h3-semibold: 600 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.625rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
400
+ --typography-mobile-h3-medium: 500 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.625rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
401
+ --typography-mobile-h3-regular: 400 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.625rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
402
+ --typography-mobile-h4-bold: 700 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.625rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
403
+ --typography-mobile-h4-semibold: 600 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.625rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
404
+ --typography-mobile-h4-medium: 500 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.625rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
405
+ --typography-mobile-h4-regular: 400 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.625rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
406
+ --typography-mobile-h5-bold: 700 calc(1.125rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
407
+ --typography-mobile-h5-semibold: 600 calc(1.125rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
408
+ --typography-mobile-h5-medium: 500 calc(1.125rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
409
+ --typography-mobile-h5-regular: 400 calc(1.125rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
410
+ --typography-mobile-h6-bold: 700 calc(1rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
411
+ --typography-mobile-h6-semibold: 600 calc(1rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
412
+ --typography-mobile-h6-medium: 500 calc(1rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
413
+ --typography-mobile-h6-regular: 400 calc(1rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
414
+ --typography-mobile-paragraph-bold: 700 calc(0.875rem * var(--ds-text-scale, 1))/calc(1.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
415
+ --typography-mobile-paragraph-semibold: 600 calc(0.875rem * var(--ds-text-scale, 1))/calc(1.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
416
+ --typography-mobile-paragraph-medium: 500 calc(0.875rem * var(--ds-text-scale, 1))/calc(1.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
417
+ --typography-mobile-paragraph-regular: 400 calc(0.875rem * var(--ds-text-scale, 1))/calc(1.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
418
+ --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';
419
+ --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';
420
+ --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';
421
+ --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';
422
+ --typography-mobile-body-md-bold: 700 calc(0.625rem * var(--ds-text-scale, 1))/calc(1rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
423
+ --typography-mobile-body-md-semibold: 600 calc(0.625rem * var(--ds-text-scale, 1))/calc(1rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
424
+ --typography-mobile-body-md-medium: 500 calc(0.625rem * var(--ds-text-scale, 1))/calc(1rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
425
+ --typography-mobile-body-md-regular: 400 calc(0.625rem * var(--ds-text-scale, 1))/calc(1rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
426
+ --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';
427
+ --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';
428
+ --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';
429
+ --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';
430
+ --typography-desktop-display-bold: 700 calc(3.5rem * var(--ds-text-scale, 1))/calc(4rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
431
+ --typography-desktop-display-semibold: 600 calc(3.5rem * var(--ds-text-scale, 1))/calc(4rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
432
+ --typography-desktop-h1-bold: 700 calc(2.5rem * var(--ds-text-scale, 1))/calc(3rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
433
+ --typography-desktop-h1-semibold: 600 calc(2.5rem * var(--ds-text-scale, 1))/calc(3rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
434
+ --typography-desktop-h2-bold: 700 calc(2rem * var(--ds-text-scale, 1))/calc(2.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
435
+ --typography-desktop-h2-semibold: 600 calc(2rem * var(--ds-text-scale, 1))/calc(2.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
436
+ --typography-desktop-h2-medium: 500 calc(2rem * var(--ds-text-scale, 1))/calc(2.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
437
+ --typography-desktop-h2-regular: 400 calc(2rem * var(--ds-text-scale, 1))/calc(2.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
438
+ --typography-desktop-h3-bold: 700 calc(1.75rem * var(--ds-text-scale, 1))/calc(2.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
439
+ --typography-desktop-h3-semibold: 600 calc(1.75rem * var(--ds-text-scale, 1))/calc(2.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
440
+ --typography-desktop-h3-medium: 500 calc(1.75rem * var(--ds-text-scale, 1))/calc(2.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
441
+ --typography-desktop-h3-regular: 400 calc(1.75rem * var(--ds-text-scale, 1))/calc(2.25rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
442
+ --typography-desktop-h4-bold: 700 calc(1.5rem * var(--ds-text-scale, 1))/calc(2rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
443
+ --typography-desktop-h4-semibold: 600 calc(1.5rem * var(--ds-text-scale, 1))/calc(2rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
444
+ --typography-desktop-h4-medium: 500 calc(1.5rem * var(--ds-text-scale, 1))/calc(2rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
445
+ --typography-desktop-h4-regular: 400 calc(1.5rem * var(--ds-text-scale, 1))/calc(2rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
446
+ --typography-desktop-h5-bold: 700 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
447
+ --typography-desktop-h5-semibold: 600 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
448
+ --typography-desktop-h5-medium: 500 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
449
+ --typography-desktop-h5-regular: 400 calc(1.25rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
450
+ --typography-desktop-h6-bold: 700 calc(1.125rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
451
+ --typography-desktop-h6-semibold: 600 calc(1.125rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
452
+ --typography-desktop-h6-medium: 500 calc(1.125rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
453
+ --typography-desktop-h6-regular: 400 calc(1.125rem * var(--ds-text-scale, 1))/calc(1.75rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
454
+ --typography-desktop-paragraph-bold: 700 calc(1rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
455
+ --typography-desktop-paragraph-semibold: 600 calc(1rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
456
+ --typography-desktop-paragraph-medium: 500 calc(1rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
457
+ --typography-desktop-paragraph-regular: 400 calc(1rem * var(--ds-text-scale, 1))/calc(1.5rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
458
+ --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';
459
+ --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';
460
+ --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';
461
+ --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';
462
+ --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';
463
+ --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';
464
+ --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';
465
+ --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';
466
+ --typography-desktop-body-sm-bold: 700 calc(0.625rem * var(--ds-text-scale, 1))/calc(1rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
467
+ --typography-desktop-body-sm-semibold: 600 calc(0.625rem * var(--ds-text-scale, 1))/calc(1rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
468
+ --typography-desktop-body-sm-medium: 500 calc(0.625rem * var(--ds-text-scale, 1))/calc(1rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
469
+ --typography-desktop-body-sm-regular: 400 calc(0.625rem * var(--ds-text-scale, 1))/calc(1rem * var(--ds-text-scale, 1)) 'Be Vietnam Pro';
469
470
  --elevation-overlay: 99999;
470
471
  }
471
472
 
@@ -480,8 +481,8 @@ It carries every component, its axes, and the props it will not render without.
480
481
  body { color: rgb(var(--text-default-primary)); }
481
482
  </style>
482
483
  <script src="https://cdn.tailwindcss.com"></script>
483
- <script src="https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2febbb98dc2a/umkmall-tailwind.js"></script>
484
- <script src="https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h2febbb98dc2a/umkmall-ui.js"></script>
484
+ <script src="https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h46b6573ee481/umkmall-tailwind.js"></script>
485
+ <script src="https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-h46b6573ee481/umkmall-ui.js"></script>
485
486
  <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.26.4/babel.min.js"></script>
486
487
  </head>
487
488
  <body class="bg-default-primary text-default-primary">