@massimo-cassandro/minimo 1.16.1 → 1.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/README.md +9 -0
  2. package/design-tokens/_src/components/modal-alert.minimo.tokens.mjs +164 -0
  3. package/design-tokens/_src/components/slide-up-down-toggle.minimo.tokens.mjs +9 -0
  4. package/design-tokens/_src/headings.minimo.tokens.mjs +8 -0
  5. package/design-tokens/_src/typography.minimo.tokens.mjs +1 -1
  6. package/design-tokens/tokens/components/modal-alert.minimo.tokens.jsonc +166 -0
  7. package/design-tokens/tokens/components/slide-up-down-toggle.minimo.tokens.jsonc +14 -0
  8. package/design-tokens/tokens/headings.minimo.tokens.jsonc +8 -0
  9. package/design-tokens/utilities/build-tokens-src/formats/css.mjs +1 -1
  10. package/design-tokens/utilities/build-tokens-src/formats/penpot.mjs +1 -1
  11. package/design-tokens/utilities/check-unresolved-custom-props.mjs +11 -12
  12. package/design-tokens/utilities/tokens-config-sample.mjs +1 -1
  13. package/dev-tools/README.md +1 -1
  14. package/dev-tools/starter-kit/webpack.config.mjs +0 -22
  15. package/package.json +2 -1
  16. package/src/components/modal-alert/modal-alert.js +295 -165
  17. package/src/components/modal-alert/modal-alert.module.css +145 -0
  18. package/src/components/modal-alert/svg/confirm.svg +4 -1
  19. package/src/components/modal-alert/svg/danger.svg +4 -0
  20. package/src/components/modal-alert/svg/error.svg +4 -1
  21. package/src/components/modal-alert/svg/info.svg +4 -1
  22. package/src/components/modal-alert/svg/success.svg +4 -1
  23. package/src/components/modal-alert/svg/warning.svg +4 -1
  24. package/src/components/slide-up-down-toggle/slide-up-down-toggle.module.css +2 -2
  25. package/src/css/dimensions.css +3 -0
  26. package/src/css/margin-padding-bootstrap-media.css +1844 -0
  27. package/src/css/margin-padding-bootstrap.css +464 -0
  28. package/src/css/margin-padding-media.css +1843 -0
  29. package/src/css/margin-padding.css +405 -45
  30. package/src/custom-media.css +12 -0
  31. package/src/custom-properties.css +24 -0
  32. package/src/minimo.css +5 -0
  33. package/src/components/modal-alert/TODO modal-alert-demo/demo.css +0 -63
  34. package/src/components/modal-alert/TODO modal-alert-demo/demo.js +0 -155
  35. package/src/components/modal-alert/TODO.md +0 -3
  36. package/src/components/modal-alert/customization-templates/custom-modal-alert.css +0 -46
  37. package/src/components/modal-alert/customization-templates/custom-modal-alert.js +0 -89
  38. package/src/components/modal-alert/defaults.js +0 -58
  39. package/src/components/modal-alert/marks.js +0 -9
  40. package/src/components/modal-alert/modal-alert.css +0 -159
  41. package/src/components/modal-alert/svg/svg-to-js.mjs +0 -26
@@ -0,0 +1,464 @@
1
+ /* stylelint-disable declaration-no-important, selector-class-pattern */
2
+
3
+ /* AUTO-GENERATED FILE — do not edit by hand.
4
+ Generated by `node scripts/build-margin-padding-css.mjs`.
5
+ Edit the `sizes` / `classes` / `media` maps there instead.
6
+
7
+ Same rules as `margin-padding.css`, but using Bootstrap-style class names
8
+ (m/mt/mb/mx/ms/me/p/pt/pb/px/ps/pe...) to ease the transition to 'minimo'.
9
+ Responsive variants live in `margin-padding-bootstrap-media.css`. */
10
+
11
+ .m-0 {
12
+ margin: 0 !important;
13
+ }
14
+ .m-auto {
15
+ margin: auto !important;
16
+ }
17
+ .m-3xl {
18
+ margin: var(--size-3xl) !important;
19
+ }
20
+ .m-2xl {
21
+ margin: var(--size-2xl) !important;
22
+ }
23
+ .m {
24
+ margin: var(--size-base) !important;
25
+ }
26
+ .m-lg {
27
+ margin: var(--size-lg) !important;
28
+ }
29
+ .m-md {
30
+ margin: var(--size-md) !important;
31
+ }
32
+ .m-sm {
33
+ margin: var(--size-sm) !important;
34
+ }
35
+ .m-xl {
36
+ margin: var(--size-xl) !important;
37
+ }
38
+ .m-xs {
39
+ margin: var(--size-xs) !important;
40
+ }
41
+ .m-xxs {
42
+ margin: var(--size-xxs) !important;
43
+ }
44
+
45
+ .my-0 {
46
+ margin-block: 0 !important;
47
+ }
48
+ .my-auto {
49
+ margin-block: auto !important;
50
+ }
51
+ .my-3xl {
52
+ margin-block: var(--size-3xl) !important;
53
+ }
54
+ .my-2xl {
55
+ margin-block: var(--size-2xl) !important;
56
+ }
57
+ .my {
58
+ margin-block: var(--size-base) !important;
59
+ }
60
+ .my-lg {
61
+ margin-block: var(--size-lg) !important;
62
+ }
63
+ .my-md {
64
+ margin-block: var(--size-md) !important;
65
+ }
66
+ .my-sm {
67
+ margin-block: var(--size-sm) !important;
68
+ }
69
+ .my-xl {
70
+ margin-block: var(--size-xl) !important;
71
+ }
72
+ .my-xs {
73
+ margin-block: var(--size-xs) !important;
74
+ }
75
+ .my-xxs {
76
+ margin-block: var(--size-xxs) !important;
77
+ }
78
+
79
+ .mt-0 {
80
+ margin-block-start: 0 !important;
81
+ }
82
+ .mt-auto {
83
+ margin-block-start: auto !important;
84
+ }
85
+ .mt-3xl {
86
+ margin-block-start: var(--size-3xl) !important;
87
+ }
88
+ .mt-2xl {
89
+ margin-block-start: var(--size-2xl) !important;
90
+ }
91
+ .mt {
92
+ margin-block-start: var(--size-base) !important;
93
+ }
94
+ .mt-lg {
95
+ margin-block-start: var(--size-lg) !important;
96
+ }
97
+ .mt-md {
98
+ margin-block-start: var(--size-md) !important;
99
+ }
100
+ .mt-sm {
101
+ margin-block-start: var(--size-sm) !important;
102
+ }
103
+ .mt-xl {
104
+ margin-block-start: var(--size-xl) !important;
105
+ }
106
+ .mt-xs {
107
+ margin-block-start: var(--size-xs) !important;
108
+ }
109
+ .mt-xxs {
110
+ margin-block-start: var(--size-xxs) !important;
111
+ }
112
+
113
+ .mb-0 {
114
+ margin-block-end: 0 !important;
115
+ }
116
+ .mb-auto {
117
+ margin-block-end: auto !important;
118
+ }
119
+ .mb-3xl {
120
+ margin-block-end: var(--size-3xl) !important;
121
+ }
122
+ .mb-2xl {
123
+ margin-block-end: var(--size-2xl) !important;
124
+ }
125
+ .mb {
126
+ margin-block-end: var(--size-base) !important;
127
+ }
128
+ .mb-lg {
129
+ margin-block-end: var(--size-lg) !important;
130
+ }
131
+ .mb-md {
132
+ margin-block-end: var(--size-md) !important;
133
+ }
134
+ .mb-sm {
135
+ margin-block-end: var(--size-sm) !important;
136
+ }
137
+ .mb-xl {
138
+ margin-block-end: var(--size-xl) !important;
139
+ }
140
+ .mb-xs {
141
+ margin-block-end: var(--size-xs) !important;
142
+ }
143
+ .mb-xxs {
144
+ margin-block-end: var(--size-xxs) !important;
145
+ }
146
+
147
+ .mx-0 {
148
+ margin-inline: 0 !important;
149
+ }
150
+ .mx-auto {
151
+ margin-inline: auto !important;
152
+ }
153
+ .mx-3xl {
154
+ margin-inline: var(--size-3xl) !important;
155
+ }
156
+ .mx-2xl {
157
+ margin-inline: var(--size-2xl) !important;
158
+ }
159
+ .mx {
160
+ margin-inline: var(--size-base) !important;
161
+ }
162
+ .mx-lg {
163
+ margin-inline: var(--size-lg) !important;
164
+ }
165
+ .mx-md {
166
+ margin-inline: var(--size-md) !important;
167
+ }
168
+ .mx-sm {
169
+ margin-inline: var(--size-sm) !important;
170
+ }
171
+ .mx-xl {
172
+ margin-inline: var(--size-xl) !important;
173
+ }
174
+ .mx-xs {
175
+ margin-inline: var(--size-xs) !important;
176
+ }
177
+ .mx-xxs {
178
+ margin-inline: var(--size-xxs) !important;
179
+ }
180
+
181
+ .ms-0 {
182
+ margin-inline-start: 0 !important;
183
+ }
184
+ .ms-auto {
185
+ margin-inline-start: auto !important;
186
+ }
187
+ .ms-3xl {
188
+ margin-inline-start: var(--size-3xl) !important;
189
+ }
190
+ .ms-2xl {
191
+ margin-inline-start: var(--size-2xl) !important;
192
+ }
193
+ .ms {
194
+ margin-inline-start: var(--size-base) !important;
195
+ }
196
+ .ms-lg {
197
+ margin-inline-start: var(--size-lg) !important;
198
+ }
199
+ .ms-md {
200
+ margin-inline-start: var(--size-md) !important;
201
+ }
202
+ .ms-sm {
203
+ margin-inline-start: var(--size-sm) !important;
204
+ }
205
+ .ms-xl {
206
+ margin-inline-start: var(--size-xl) !important;
207
+ }
208
+ .ms-xs {
209
+ margin-inline-start: var(--size-xs) !important;
210
+ }
211
+ .ms-xxs {
212
+ margin-inline-start: var(--size-xxs) !important;
213
+ }
214
+
215
+ .me-0 {
216
+ margin-inline-end: 0 !important;
217
+ }
218
+ .me-auto {
219
+ margin-inline-end: auto !important;
220
+ }
221
+ .me-3xl {
222
+ margin-inline-end: var(--size-3xl) !important;
223
+ }
224
+ .me-2xl {
225
+ margin-inline-end: var(--size-2xl) !important;
226
+ }
227
+ .me {
228
+ margin-inline-end: var(--size-base) !important;
229
+ }
230
+ .me-lg {
231
+ margin-inline-end: var(--size-lg) !important;
232
+ }
233
+ .me-md {
234
+ margin-inline-end: var(--size-md) !important;
235
+ }
236
+ .me-sm {
237
+ margin-inline-end: var(--size-sm) !important;
238
+ }
239
+ .me-xl {
240
+ margin-inline-end: var(--size-xl) !important;
241
+ }
242
+ .me-xs {
243
+ margin-inline-end: var(--size-xs) !important;
244
+ }
245
+ .me-xxs {
246
+ margin-inline-end: var(--size-xxs) !important;
247
+ }
248
+
249
+ .p-0 {
250
+ padding: 0 !important;
251
+ }
252
+ .p-3xl {
253
+ padding: var(--size-3xl) !important;
254
+ }
255
+ .p-2xl {
256
+ padding: var(--size-2xl) !important;
257
+ }
258
+ .p {
259
+ padding: var(--size-base) !important;
260
+ }
261
+ .p-lg {
262
+ padding: var(--size-lg) !important;
263
+ }
264
+ .p-md {
265
+ padding: var(--size-md) !important;
266
+ }
267
+ .p-sm {
268
+ padding: var(--size-sm) !important;
269
+ }
270
+ .p-xl {
271
+ padding: var(--size-xl) !important;
272
+ }
273
+ .p-xs {
274
+ padding: var(--size-xs) !important;
275
+ }
276
+ .p-xxs {
277
+ padding: var(--size-xxs) !important;
278
+ }
279
+
280
+ .py-0 {
281
+ padding-block: 0 !important;
282
+ }
283
+ .py-3xl {
284
+ padding-block: var(--size-3xl) !important;
285
+ }
286
+ .py-2xl {
287
+ padding-block: var(--size-2xl) !important;
288
+ }
289
+ .py {
290
+ padding-block: var(--size-base) !important;
291
+ }
292
+ .py-lg {
293
+ padding-block: var(--size-lg) !important;
294
+ }
295
+ .py-md {
296
+ padding-block: var(--size-md) !important;
297
+ }
298
+ .py-sm {
299
+ padding-block: var(--size-sm) !important;
300
+ }
301
+ .py-xl {
302
+ padding-block: var(--size-xl) !important;
303
+ }
304
+ .py-xs {
305
+ padding-block: var(--size-xs) !important;
306
+ }
307
+ .py-xxs {
308
+ padding-block: var(--size-xxs) !important;
309
+ }
310
+
311
+ .pt-0 {
312
+ padding-block-start: 0 !important;
313
+ }
314
+ .pt-3xl {
315
+ padding-block-start: var(--size-3xl) !important;
316
+ }
317
+ .pt-2xl {
318
+ padding-block-start: var(--size-2xl) !important;
319
+ }
320
+ .pt {
321
+ padding-block-start: var(--size-base) !important;
322
+ }
323
+ .pt-lg {
324
+ padding-block-start: var(--size-lg) !important;
325
+ }
326
+ .pt-md {
327
+ padding-block-start: var(--size-md) !important;
328
+ }
329
+ .pt-sm {
330
+ padding-block-start: var(--size-sm) !important;
331
+ }
332
+ .pt-xl {
333
+ padding-block-start: var(--size-xl) !important;
334
+ }
335
+ .pt-xs {
336
+ padding-block-start: var(--size-xs) !important;
337
+ }
338
+ .pt-xxs {
339
+ padding-block-start: var(--size-xxs) !important;
340
+ }
341
+
342
+ .pb-0 {
343
+ padding-block-end: 0 !important;
344
+ }
345
+ .pb-3xl {
346
+ padding-block-end: var(--size-3xl) !important;
347
+ }
348
+ .pb-2xl {
349
+ padding-block-end: var(--size-2xl) !important;
350
+ }
351
+ .pb {
352
+ padding-block-end: var(--size-base) !important;
353
+ }
354
+ .pb-lg {
355
+ padding-block-end: var(--size-lg) !important;
356
+ }
357
+ .pb-md {
358
+ padding-block-end: var(--size-md) !important;
359
+ }
360
+ .pb-sm {
361
+ padding-block-end: var(--size-sm) !important;
362
+ }
363
+ .pb-xl {
364
+ padding-block-end: var(--size-xl) !important;
365
+ }
366
+ .pb-xs {
367
+ padding-block-end: var(--size-xs) !important;
368
+ }
369
+ .pb-xxs {
370
+ padding-block-end: var(--size-xxs) !important;
371
+ }
372
+
373
+ .px-0 {
374
+ padding-inline: 0 !important;
375
+ }
376
+ .px-3xl {
377
+ padding-inline: var(--size-3xl) !important;
378
+ }
379
+ .px-2xl {
380
+ padding-inline: var(--size-2xl) !important;
381
+ }
382
+ .px {
383
+ padding-inline: var(--size-base) !important;
384
+ }
385
+ .px-lg {
386
+ padding-inline: var(--size-lg) !important;
387
+ }
388
+ .px-md {
389
+ padding-inline: var(--size-md) !important;
390
+ }
391
+ .px-sm {
392
+ padding-inline: var(--size-sm) !important;
393
+ }
394
+ .px-xl {
395
+ padding-inline: var(--size-xl) !important;
396
+ }
397
+ .px-xs {
398
+ padding-inline: var(--size-xs) !important;
399
+ }
400
+ .px-xxs {
401
+ padding-inline: var(--size-xxs) !important;
402
+ }
403
+
404
+ .ps-0 {
405
+ padding-inline-start: 0 !important;
406
+ }
407
+ .ps-3xl {
408
+ padding-inline-start: var(--size-3xl) !important;
409
+ }
410
+ .ps-2xl {
411
+ padding-inline-start: var(--size-2xl) !important;
412
+ }
413
+ .ps {
414
+ padding-inline-start: var(--size-base) !important;
415
+ }
416
+ .ps-lg {
417
+ padding-inline-start: var(--size-lg) !important;
418
+ }
419
+ .ps-md {
420
+ padding-inline-start: var(--size-md) !important;
421
+ }
422
+ .ps-sm {
423
+ padding-inline-start: var(--size-sm) !important;
424
+ }
425
+ .ps-xl {
426
+ padding-inline-start: var(--size-xl) !important;
427
+ }
428
+ .ps-xs {
429
+ padding-inline-start: var(--size-xs) !important;
430
+ }
431
+ .ps-xxs {
432
+ padding-inline-start: var(--size-xxs) !important;
433
+ }
434
+
435
+ .pe-0 {
436
+ padding-inline-end: 0 !important;
437
+ }
438
+ .pe-3xl {
439
+ padding-inline-end: var(--size-3xl) !important;
440
+ }
441
+ .pe-2xl {
442
+ padding-inline-end: var(--size-2xl) !important;
443
+ }
444
+ .pe {
445
+ padding-inline-end: var(--size-base) !important;
446
+ }
447
+ .pe-lg {
448
+ padding-inline-end: var(--size-lg) !important;
449
+ }
450
+ .pe-md {
451
+ padding-inline-end: var(--size-md) !important;
452
+ }
453
+ .pe-sm {
454
+ padding-inline-end: var(--size-sm) !important;
455
+ }
456
+ .pe-xl {
457
+ padding-inline-end: var(--size-xl) !important;
458
+ }
459
+ .pe-xs {
460
+ padding-inline-end: var(--size-xs) !important;
461
+ }
462
+ .pe-xxs {
463
+ padding-inline-end: var(--size-xxs) !important;
464
+ }