@umkmall/proto 0.1.0-h2e45b3c4dc3a

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 (10) hide show
  1. package/README.md +12 -0
  2. package/package.json +19 -0
  3. package/umkmall-components.md +267 -0
  4. package/umkmall-prototype-starter.html +1079 -0
  5. package/umkmall-rules.md +158 -0
  6. package/umkmall-starter-app.md +365 -0
  7. package/umkmall-starter.md +846 -0
  8. package/umkmall-tailwind.js +580 -0
  9. package/umkmall-tokens.css +408 -0
  10. package/umkmall-ui.js +204 -0
package/umkmall-tokens.css ADDED
@@ -0,0 +1,408 @@
1
+ /* Generated from Ensyra — DS by `npm run tokens:build`. Do not edit by hand. */
2
+ :root {
3
+ --brand-b600: 0 61 121;
4
+ --brand-b500: 0 81 162;
5
+ --brand-b400: 0 116 231;
6
+ --brand-b300: 43 140 235;
7
+ --brand-b200: 107 174 241;
8
+ --brand-b100: 150 198 245;
9
+ --brand-b10: 240 247 255;
10
+ --brand-b10-pct: 0 116 231;
11
+ --neutral-n999: 0 0 0;
12
+ --neutral-n600: 2 22 41;
13
+ --neutral-n500: 3 32 61;
14
+ --neutral-n400: 4 38 72;
15
+ --neutral-n300: 49 77 105;
16
+ --neutral-n200: 97 118 140;
17
+ --neutral-n100: 147 162 176;
18
+ --neutral-n40: 195 203 211;
19
+ --neutral-n30: 240 240 240;
20
+ --neutral-n20: 246 246 246;
21
+ --neutral-n10: 251 251 251;
22
+ --neutral-n0: 255 255 255;
23
+ --red-r600: 124 0 0;
24
+ --red-r500: 162 0 0;
25
+ --red-r400: 231 0 0;
26
+ --red-r300: 235 43 43;
27
+ --red-r200: 241 107 107;
28
+ --red-r100: 245 150 150;
29
+ --red-r10: 255 243 243;
30
+ --red-r10-pct: 231 0 0;
31
+ --green-g600: 0 88 71;
32
+ --green-g500: 8 118 96;
33
+ --green-g400: 14 160 110;
34
+ --green-g300: 28 198 142;
35
+ --green-g200: 110 233 192;
36
+ --green-g100: 153 239 211;
37
+ --green-g10: 236 253 247;
38
+ --green-g10-pct: 14 160 110;
39
+ --yellow-y600: 149 96 7;
40
+ --yellow-y500: 172 111 8;
41
+ --yellow-y400: 245 158 11;
42
+ --yellow-y300: 251 188 4;
43
+ --yellow-y200: 253 216 109;
44
+ --yellow-y100: 253 228 152;
45
+ --yellow-y10: 255 248 230;
46
+ --yellow-y10-pct: 245 158 11;
47
+ --font-size-3xs: 8;
48
+ --font-size-2xs: 10;
49
+ --font-size-xs: 12;
50
+ --font-size-sm: 14;
51
+ --font-size-md: 16;
52
+ --font-size-lg: 18;
53
+ --font-size-xl: 20;
54
+ --font-size-2xl: 22;
55
+ --font-size-3xl: 24;
56
+ --font-size-4xl: 28;
57
+ --font-size-5xl: 32;
58
+ --font-size-6xl: 36;
59
+ --font-size-7xl: 40;
60
+ --font-size-8xl: 56;
61
+ --font-letter-spacing-none: 0;
62
+ --font-letter-spacing-sm: -0.10000000149011612;
63
+ --font-letter-spacing-md: -0.30000001192092896;
64
+ --font-letter-spacing-lg: -1;
65
+ --font-line-height-4xs: 14;
66
+ --font-line-height-3xs: 16;
67
+ --font-line-height-2xs: 18;
68
+ --font-line-height-xs: 20;
69
+ --font-line-height-sm: 22;
70
+ --font-line-height-md: 24;
71
+ --font-line-height-lg: 26;
72
+ --font-line-height-xl: 28;
73
+ --font-line-height-2xl: 32;
74
+ --font-line-height-3xl: 36;
75
+ --font-line-height-4xl: 40;
76
+ --font-line-height-5xl: 48;
77
+ --font-line-height-6xl: 64;
78
+ --font-familiy-brand: Be Vietnam Pro;
79
+ --font-weight-regular: Regular;
80
+ --font-weight-medium: Medium;
81
+ --font-weight-semibold: SemiBold;
82
+ --font-weight-bold: Bold;
83
+ --percentage-0-pct: 0;
84
+ --percentage-10-pct: 10;
85
+ --percentage-60-pct: 60;
86
+ --percentage-100-pct: 100;
87
+ --measurement-0: 0;
88
+ --measurement-1: 16;
89
+ --measurement-2: 32;
90
+ --measurement-3: 48;
91
+ --measurement-4: 64;
92
+ --measurement-5: 80;
93
+ --measurement-0-0625: 1;
94
+ --measurement-0-125: 2;
95
+ --measurement-0-25: 4;
96
+ --measurement-0-375: 6;
97
+ --measurement-0-5: 8;
98
+ --measurement-0-625: 10;
99
+ --measurement-0-75: 12;
100
+ --measurement-1-25: 20;
101
+ --measurement-1-375: 22;
102
+ --measurement-1-5: 24;
103
+ --measurement-1-625: 26;
104
+ --measurement-1-75: 28;
105
+ --measurement-2-25: 36;
106
+ --measurement-2-5: 40;
107
+ --measurement-2-75: 44;
108
+ --measurement-3-5: 56;
109
+ --measurement-4-5: 72;
110
+ --measurement-5-25: 84;
111
+ --measurement-7-5: 120;
112
+ --measurement-full: 360;
113
+ --text-default-primary: 4 38 72;
114
+ --text-default-secondary: 147 162 176;
115
+ --text-default-invert: 255 255 255;
116
+ --text-default-brand: 0 116 231;
117
+ --text-default-success: 14 160 110;
118
+ --text-default-error: 231 0 0;
119
+ --text-default-warning: 245 158 11;
120
+ --text-hover-primary: 3 32 61;
121
+ --text-hover-secondary: 97 118 140;
122
+ --text-hover-invert: 246 246 246;
123
+ --text-hover-brand: 0 81 162;
124
+ --text-hover-success: 8 118 96;
125
+ --text-hover-error: 162 0 0;
126
+ --text-hover-warning: 172 111 8;
127
+ --text-active-primary: 2 22 41;
128
+ --text-active-secondary: 49 77 105;
129
+ --text-active-invert: 240 240 240;
130
+ --text-active-brand: 0 61 121;
131
+ --text-active-success: 0 88 71;
132
+ --text-active-error: 124 0 0;
133
+ --text-active-warning: 149 96 7;
134
+ --text-focus-primary: 4 38 72;
135
+ --text-focus-invert: 255 255 255;
136
+ --text-focus-brand: 0 116 231;
137
+ --text-focus-success: 14 160 110;
138
+ --text-focus-error: 231 0 0;
139
+ --text-focus-warning: 245 158 11;
140
+ --text-disable-primary: 195 203 211;
141
+ --text-disable-brand: 150 198 245;
142
+ --text-disable-success: 153 239 211;
143
+ --text-disable-error: 245 150 150;
144
+ --text-disable-warning: 253 228 152;
145
+ --text-disable-invert: 49 77 105;
146
+ --icon-default-primary: 4 38 72;
147
+ --icon-default-secondary: 147 162 176;
148
+ --icon-default-invert: 255 255 255;
149
+ --icon-default-brand: 0 116 231;
150
+ --icon-default-success: 14 160 110;
151
+ --icon-default-error: 231 0 0;
152
+ --icon-default-warning: 245 158 11;
153
+ --icon-hover-primary: 3 32 61;
154
+ --icon-hover-secondary: 97 118 140;
155
+ --icon-hover-invert: 246 246 246;
156
+ --icon-hover-brand: 0 81 162;
157
+ --icon-hover-success: 8 118 96;
158
+ --icon-hover-error: 162 0 0;
159
+ --icon-hover-warning: 172 111 8;
160
+ --icon-active-primary: 2 22 41;
161
+ --icon-active-secondary: 49 77 105;
162
+ --icon-active-invert: 240 240 240;
163
+ --icon-active-brand: 0 61 121;
164
+ --icon-active-success: 0 88 71;
165
+ --icon-active-error: 124 0 0;
166
+ --icon-active-warning: 149 96 7;
167
+ --icon-focus-primary: 4 38 72;
168
+ --icon-focus-invert: 255 255 255;
169
+ --icon-focus-brand: 0 116 231;
170
+ --icon-focus-success: 14 160 110;
171
+ --icon-focus-error: 231 0 0;
172
+ --icon-focus-warning: 245 158 11;
173
+ --icon-disable-primary: 195 203 211;
174
+ --icon-disable-brand: 150 198 245;
175
+ --icon-disable-success: 153 239 211;
176
+ --icon-disable-error: 245 150 150;
177
+ --icon-disable-warning: 253 228 152;
178
+ --icon-disable-invert: 49 77 105;
179
+ --surface-default-primary: 255 255 255;
180
+ --surface-default-secondary: 246 246 246;
181
+ --surface-default-invert: 0 0 0;
182
+ --surface-default-brand: 0 116 231;
183
+ --surface-default-success: 14 160 110;
184
+ --surface-default-error: 231 0 0;
185
+ --surface-default-warning: 245 158 11;
186
+ --surface-default-overlay: 4 38 72;
187
+ --surface-hover-primary: 240 247 255;
188
+ --surface-hover-secondary: 240 240 240;
189
+ --surface-hover-invert: 2 22 41;
190
+ --surface-hover-brand: 0 81 162;
191
+ --surface-hover-success: 8 118 96;
192
+ --surface-hover-error: 162 0 0;
193
+ --surface-hover-warning: 172 111 8;
194
+ --surface-active-primary: 240 240 240;
195
+ --surface-active-brand: 0 61 121;
196
+ --surface-active-success: 0 88 71;
197
+ --surface-active-error: 124 0 0;
198
+ --surface-active-warning: 149 96 7;
199
+ --surface-focus-brand: 0 116 231;
200
+ --surface-focus-success: 14 160 110;
201
+ --surface-focus-error: 231 0 0;
202
+ --surface-focus-warning: 245 158 11;
203
+ --surface-disable-primary: 240 240 240;
204
+ --surface-disable-brand: 150 198 245;
205
+ --surface-disable-success: 153 239 211;
206
+ --surface-disable-error: 245 150 150;
207
+ --surface-disable-warning: 253 228 152;
208
+ --surface-disable-invert: 3 32 61;
209
+ --surface-weak-brand: 240 247 255;
210
+ --surface-weak-error: 255 243 243;
211
+ --surface-weak-success: 236 253 247;
212
+ --surface-weak-warning: 255 248 230;
213
+ --surface-weak-neutral: 246 246 246;
214
+ --surface-gradient-brand-start: 0 116 231;
215
+ --surface-gradient-brand-end: 0 81 162;
216
+ --surface-gradient-green-start: 14 160 110;
217
+ --surface-gradient-green-end: 8 118 96;
218
+ --surface-gradient-red-start: 231 0 0;
219
+ --surface-gradient-red-end: 162 0 0;
220
+ --surface-gradient-yellow-start: 245 158 11;
221
+ --surface-gradient-yellow-end: 172 111 8;
222
+ --surface-gradient-callout-start: 0 81 162;
223
+ --surface-gradient-callout-end: 8 118 96;
224
+ --surface-hover-neutral: 247 248 250;
225
+ --surface-selected-hover: 227 239 252;
226
+ --border-default-primary: 240 240 240;
227
+ --border-default-invert: 195 203 211;
228
+ --border-default-brand: 0 116 231;
229
+ --border-default-success: 14 160 110;
230
+ --border-default-error: 231 0 0;
231
+ --border-default-warning: 245 158 11;
232
+ --border-default-black: 4 38 72;
233
+ --border-default-light: 255 255 255;
234
+ --border-hover-primary: 195 203 211;
235
+ --border-hover-brand: 0 81 162;
236
+ --border-hover-success: 8 118 96;
237
+ --border-hover-error: 162 0 0;
238
+ --border-hover-warning: 172 111 8;
239
+ --border-hover-invert: 3 32 61;
240
+ --border-hover-light: 246 246 246;
241
+ --border-active-primary: 147 162 176;
242
+ --border-active-brand: 0 61 121;
243
+ --border-active-success: 0 88 71;
244
+ --border-active-error: 124 0 0;
245
+ --border-active-warning: 149 96 7;
246
+ --border-active-invert: 2 22 41;
247
+ --border-active-light: 240 240 240;
248
+ --border-focus-brand: 0 116 231;
249
+ --border-focus-success: 14 160 110;
250
+ --border-focus-error: 231 0 0;
251
+ --border-focus-warning: 245 158 11;
252
+ --border-disable-primary: 195 203 211;
253
+ --border-disable-brand: 150 198 245;
254
+ --border-disable-success: 153 239 211;
255
+ --border-disable-error: 245 150 150;
256
+ --border-disable-warning: 253 228 152;
257
+ --border-disable-invert: 49 77 105;
258
+ --radius-null: 0;
259
+ --radius-xs: 4;
260
+ --radius-sm: 6;
261
+ --radius-md: 8;
262
+ --radius-lg: 12;
263
+ --radius-xl: 16;
264
+ --radius-2xl: 24;
265
+ --radius-3xl: 32;
266
+ --radius-full: 360;
267
+ --spacing-null: 0;
268
+ --spacing-5xs: 2;
269
+ --spacing-4xs: 4;
270
+ --spacing-3xs: 6;
271
+ --spacing-2xs: 8;
272
+ --spacing-xs: 10;
273
+ --spacing-sm: 12;
274
+ --spacing-md: 16;
275
+ --spacing-lg: 20;
276
+ --spacing-xl: 24;
277
+ --spacing-2xl: 32;
278
+ --spacing-3xl-mobile: 48;
279
+ --spacing-4xl: 84;
280
+ --spacing-5xl-desktop: 120;
281
+ --margin-mobile: 16;
282
+ --margin-desktop: 84;
283
+ --shadow-blur-none: 0;
284
+ --shadow-blur-sm: 4;
285
+ --shadow-blur-md: 12;
286
+ --shadow-blur-lg: 16;
287
+ --shadow-blur-xl: 20;
288
+ --shadow-position-none: 0;
289
+ --shadow-position-sm: 2;
290
+ --shadow-position-md: 4;
291
+ --shadow-position-lg: 8;
292
+ --shadow-position-xl: 12;
293
+ --shadow-5-pct: 0 4px 12px 0 #0000000d;
294
+ --shadow-card: 0 2px 8px 0 #0000001a;
295
+ --shadow-10-pct: 0 4px 16px 0 #0000001a;
296
+ --opacity-10: 10;
297
+ --opacity-60: 60;
298
+ --opacity-null: 0;
299
+ --opacity-full: 100;
300
+ --border-width-none: 0;
301
+ --border-width-sm: 1;
302
+ --border-width-md: 2;
303
+ --border-width-l: 4;
304
+ --callout-default-surface: 240 247 255;
305
+ --callout-default-border: 0 116 231;
306
+ --callout-default-text: 0 81 162;
307
+ --callout-coach-surface: 236 253 247;
308
+ --callout-coach-border: 8 118 96;
309
+ --callout-coach-text: 8 118 96;
310
+ --callout-good-surface: 236 253 247;
311
+ --callout-good-border: 8 118 96;
312
+ --callout-good-text: 4 38 72;
313
+ --callout-warn-surface: 255 248 230;
314
+ --callout-warn-border: 172 111 8;
315
+ --callout-warn-text: 4 38 72;
316
+ --callout-neg-surface: 255 243 243;
317
+ --callout-neg-border: 231 0 0;
318
+ --callout-neg-text: 4 38 72;
319
+ --focus-halo: 150 198 245;
320
+ --typography-mobile-display-bold: 700 36px/40px 'Be Vietnam Pro';
321
+ --typography-mobile-display-semibold: 600 36px/40px 'Be Vietnam Pro';
322
+ --typography-mobile-h1-bold: 700 28px/32px 'Be Vietnam Pro';
323
+ --typography-mobile-h1-semibold: 600 28px/32px 'Be Vietnam Pro';
324
+ --typography-mobile-h2-bold: 700 24px/28px 'Be Vietnam Pro';
325
+ --typography-mobile-h2-semibold: 600 24px/28px 'Be Vietnam Pro';
326
+ --typography-mobile-h2-medium: 500 24px/28px 'Be Vietnam Pro';
327
+ --typography-mobile-h2-regular: 400 24px/28px 'Be Vietnam Pro';
328
+ --typography-mobile-h3-bold: 700 20px/26px 'Be Vietnam Pro';
329
+ --typography-mobile-h3-semibold: 600 20px/26px 'Be Vietnam Pro';
330
+ --typography-mobile-h3-medium: 500 20px/26px 'Be Vietnam Pro';
331
+ --typography-mobile-h3-regular: 400 20px/26px 'Be Vietnam Pro';
332
+ --typography-mobile-h4-bold: 700 20px/26px 'Be Vietnam Pro';
333
+ --typography-mobile-h4-semibold: 600 20px/26px 'Be Vietnam Pro';
334
+ --typography-mobile-h4-medium: 500 20px/26px 'Be Vietnam Pro';
335
+ --typography-mobile-h4-regular: 400 20px/26px 'Be Vietnam Pro';
336
+ --typography-mobile-h5-bold: 700 18px/24px 'Be Vietnam Pro';
337
+ --typography-mobile-h5-semibold: 600 18px/24px 'Be Vietnam Pro';
338
+ --typography-mobile-h5-medium: 500 18px/24px 'Be Vietnam Pro';
339
+ --typography-mobile-h5-regular: 400 18px/24px 'Be Vietnam Pro';
340
+ --typography-mobile-h6-bold: 700 16px/24px 'Be Vietnam Pro';
341
+ --typography-mobile-h6-semibold: 600 16px/24px 'Be Vietnam Pro';
342
+ --typography-mobile-h6-medium: 500 16px/24px 'Be Vietnam Pro';
343
+ --typography-mobile-h6-regular: 400 16px/24px 'Be Vietnam Pro';
344
+ --typography-mobile-paragraph-bold: 700 14px/20px 'Be Vietnam Pro';
345
+ --typography-mobile-paragraph-semibold: 600 14px/20px 'Be Vietnam Pro';
346
+ --typography-mobile-paragraph-medium: 500 14px/20px 'Be Vietnam Pro';
347
+ --typography-mobile-paragraph-regular: 400 14px/20px 'Be Vietnam Pro';
348
+ --typography-mobile-body-lg-bold: 700 12px/18px 'Be Vietnam Pro';
349
+ --typography-mobile-body-lg-semibold: 600 12px/18px 'Be Vietnam Pro';
350
+ --typography-mobile-body-lg-medium: 500 12px/18px 'Be Vietnam Pro';
351
+ --typography-mobile-body-lg-regular: 400 12px/18px 'Be Vietnam Pro';
352
+ --typography-mobile-body-md-bold: 700 10px/16px 'Be Vietnam Pro';
353
+ --typography-mobile-body-md-semibold: 600 10px/16px 'Be Vietnam Pro';
354
+ --typography-mobile-body-md-medium: 500 10px/16px 'Be Vietnam Pro';
355
+ --typography-mobile-body-md-regular: 400 10px/16px 'Be Vietnam Pro';
356
+ --typography-mobile-body-sm-bold: 700 8px/14px 'Be Vietnam Pro';
357
+ --typography-mobile-body-sm-semibold: 600 8px/14px 'Be Vietnam Pro';
358
+ --typography-mobile-body-sm-medium: 500 8px/14px 'Be Vietnam Pro';
359
+ --typography-mobile-body-sm-regular: 400 8px/14px 'Be Vietnam Pro';
360
+ --typography-desktop-display-bold: 700 56px/64px 'Be Vietnam Pro';
361
+ --typography-desktop-display-semibold: 600 56px/64px 'Be Vietnam Pro';
362
+ --typography-desktop-h1-bold: 700 40px/48px 'Be Vietnam Pro';
363
+ --typography-desktop-h1-semibold: 600 40px/48px 'Be Vietnam Pro';
364
+ --typography-desktop-h2-bold: 700 32px/40px 'Be Vietnam Pro';
365
+ --typography-desktop-h2-semibold: 600 32px/40px 'Be Vietnam Pro';
366
+ --typography-desktop-h2-medium: 500 32px/40px 'Be Vietnam Pro';
367
+ --typography-desktop-h2-regular: 400 32px/40px 'Be Vietnam Pro';
368
+ --typography-desktop-h3-bold: 700 28px/36px 'Be Vietnam Pro';
369
+ --typography-desktop-h3-semibold: 600 28px/36px 'Be Vietnam Pro';
370
+ --typography-desktop-h3-medium: 500 28px/36px 'Be Vietnam Pro';
371
+ --typography-desktop-h3-regular: 400 28px/36px 'Be Vietnam Pro';
372
+ --typography-desktop-h4-bold: 700 24px/32px 'Be Vietnam Pro';
373
+ --typography-desktop-h4-semibold: 600 24px/32px 'Be Vietnam Pro';
374
+ --typography-desktop-h4-medium: 500 24px/32px 'Be Vietnam Pro';
375
+ --typography-desktop-h4-regular: 400 24px/32px 'Be Vietnam Pro';
376
+ --typography-desktop-h5-bold: 700 20px/28px 'Be Vietnam Pro';
377
+ --typography-desktop-h5-semibold: 600 20px/28px 'Be Vietnam Pro';
378
+ --typography-desktop-h5-medium: 500 20px/28px 'Be Vietnam Pro';
379
+ --typography-desktop-h5-regular: 400 20px/28px 'Be Vietnam Pro';
380
+ --typography-desktop-h6-bold: 700 18px/28px 'Be Vietnam Pro';
381
+ --typography-desktop-h6-semibold: 600 18px/28px 'Be Vietnam Pro';
382
+ --typography-desktop-h6-medium: 500 18px/28px 'Be Vietnam Pro';
383
+ --typography-desktop-h6-regular: 400 18px/28px 'Be Vietnam Pro';
384
+ --typography-desktop-paragraph-bold: 700 16px/24px 'Be Vietnam Pro';
385
+ --typography-desktop-paragraph-semibold: 600 16px/24px 'Be Vietnam Pro';
386
+ --typography-desktop-paragraph-medium: 500 16px/24px 'Be Vietnam Pro';
387
+ --typography-desktop-paragraph-regular: 400 16px/24px 'Be Vietnam Pro';
388
+ --typography-desktop-body-lg-bold: 700 14px/20px 'Be Vietnam Pro';
389
+ --typography-desktop-body-lg-semibold: 600 14px/20px 'Be Vietnam Pro';
390
+ --typography-desktop-body-lg-medium: 500 14px/20px 'Be Vietnam Pro';
391
+ --typography-desktop-body-lg-regular: 400 14px/20px 'Be Vietnam Pro';
392
+ --typography-desktop-body-md-bold: 700 12px/18px 'Be Vietnam Pro';
393
+ --typography-desktop-body-md-semibold: 600 12px/18px 'Be Vietnam Pro';
394
+ --typography-desktop-body-md-medium: 500 12px/18px 'Be Vietnam Pro';
395
+ --typography-desktop-body-md-regular: 400 12px/18px 'Be Vietnam Pro';
396
+ --typography-desktop-body-sm-bold: 700 10px/16px 'Be Vietnam Pro';
397
+ --typography-desktop-body-sm-semibold: 600 10px/16px 'Be Vietnam Pro';
398
+ --typography-desktop-body-sm-medium: 500 10px/16px 'Be Vietnam Pro';
399
+ --typography-desktop-body-sm-regular: 400 10px/16px 'Be Vietnam Pro';
400
+ --elevation-overlay: 99999;
401
+ }
402
+
403
+ /*
404
+ * Required by the preset's font stack — see the note in scripts/proto/build-assets.mjs.
405
+ * An undefined var() invalidates the declaration rather than falling through, so without
406
+ * this the page renders in the browser's default serif with no error anywhere.
407
+ */
408
+ :root { --font-be-vietnam-pro: 'Be Vietnam Pro'; }