@wavemaker/foundation-css 11.10.5-next.27872 → 11.10.5-next.27901

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 (79) hide show
  1. package/foundation/foundation.css +1275 -1059
  2. package/foundation/foundation.min.css +1 -1
  3. package/index.d.ts +18 -27
  4. package/index.js +91 -42
  5. package/index.js.map +1 -0
  6. package/npm-shrinkwrap.json +219 -2
  7. package/package-lock.json +219 -2
  8. package/package.json +10 -3
  9. package/tokens/components/accordion/accordion.json +10 -0
  10. package/tokens/components/anchor/anchor.json +86 -0
  11. package/tokens/components/badge/badge.json +52 -0
  12. package/tokens/components/breadcrumb/breadcrumb.json +98 -0
  13. package/tokens/components/button/button.json +710 -0
  14. package/tokens/components/button-group/button-group.json +18 -0
  15. package/tokens/components/calendar/calendar.json +274 -0
  16. package/tokens/components/cards/cards.json +176 -0
  17. package/tokens/components/carousel/carousel.json +46 -0
  18. package/tokens/components/checkbox/checkbox.json +106 -0
  19. package/tokens/components/checkboxset/checkboxset.json +10 -0
  20. package/tokens/components/chips/chips.json +202 -0
  21. package/tokens/components/composite/composite.json +202 -0
  22. package/tokens/components/container/container.json +32 -0
  23. package/tokens/components/currency/currency.json +32 -0
  24. package/tokens/components/data-table/data-table.json +170 -0
  25. package/tokens/components/date/date.json +146 -0
  26. package/tokens/components/dropdown-menu/dropdown-menu.json +116 -0
  27. package/tokens/components/fileupload/fileupload.json +180 -0
  28. package/tokens/components/grid-layout/grid-layout.json +18 -0
  29. package/tokens/components/icon/icon.json +8 -0
  30. package/tokens/components/label/label.json +8 -0
  31. package/tokens/components/list/list.json +72 -0
  32. package/tokens/components/message/message.json +144 -0
  33. package/tokens/components/modal-dialog/modal-dialog.json +176 -0
  34. package/tokens/components/nav/nav.json +222 -0
  35. package/tokens/components/page-layout/page-layout.json +842 -0
  36. package/tokens/components/pagination/pagination.json +250 -0
  37. package/tokens/components/panel/panel.json +218 -0
  38. package/tokens/components/picture/picture.json +42 -0
  39. package/tokens/components/popover/popover.json +102 -0
  40. package/tokens/components/progress-bar/progress-bar.json +122 -0
  41. package/tokens/components/progress-circle/progress-circle.json +64 -0
  42. package/tokens/components/radioset/radioset.json +116 -0
  43. package/tokens/components/rating/rating.json +42 -0
  44. package/tokens/components/richtext-editor/richtext-editor.json +546 -0
  45. package/tokens/components/scrollbar/scrollbar.json +38 -0
  46. package/tokens/components/search/search.json +200 -0
  47. package/tokens/components/spinner/spinner.json +44 -0
  48. package/tokens/components/switch/switch.json +106 -0
  49. package/tokens/components/tabs/tabs.json +136 -0
  50. package/tokens/components/tile/tile.json +186 -0
  51. package/tokens/components/time/time.json +90 -0
  52. package/tokens/components/toast/toast.json +214 -0
  53. package/tokens/components/toggle/toggle.json +98 -0
  54. package/tokens/components/wizard/wizard.json +232 -0
  55. package/tokens/global/border/border.json +96 -0
  56. package/tokens/global/box-shadow/box-shadow.json +9 -0
  57. package/tokens/{primitives → global}/colors/color.dark.json +12 -3
  58. package/tokens/global/colors/color.json +343 -0
  59. package/tokens/{semantics → global}/font/font.json +74 -20
  60. package/tokens/global/gap/gap.json +58 -0
  61. package/tokens/{semantics → global}/icon/icon.json +1 -1
  62. package/tokens/global/margin/margin.json +57 -0
  63. package/tokens/global/radius/radius.json +45 -0
  64. package/tokens/global/shadow/shadow.json +74 -0
  65. package/tokens/global/space/space.json +57 -0
  66. package/tokens/global/spacer/spacer.json +46 -0
  67. package/utils/style-dictionary-utils.d.ts +7 -0
  68. package/utils/style-dictionary-utils.js +65 -0
  69. package/utils/style-dictionary-utils.js.map +1 -0
  70. package/tokens/primitives/border/border.json +0 -10
  71. package/tokens/primitives/colors/color.json +0 -163
  72. package/tokens/primitives/font/font.json +0 -20
  73. package/tokens/primitives/radius/radius.json +0 -14
  74. package/tokens/primitives/space/space.json +0 -57
  75. package/tokens/primitives/spacer/spacer.json +0 -45
  76. package/tokens/semantics/box-shadow/box-shadow.json +0 -8
  77. package/tokens/semantics/colors/color.json +0 -948
  78. /package/tokens/{primitives → global}/colors/color.light.json +0 -0
  79. /package/tokens/{semantics → global}/opacity/opacity.json +0 -0
package/tokens/components/button/button.json ADDED
@@ -0,0 +1,710 @@
1
+ {
2
+ "btn": {
3
+ "font-size": {
4
+ "value": "{label.large.font-size.value}",
5
+ "type": "font"
6
+ },
7
+ "font-family": {
8
+ "value": "{label.large.font-family.value}",
9
+ "type": "font"
10
+ },
11
+ "font-weight": {
12
+ "value": "{label.large.font-weight.value}",
13
+ "type": "font"
14
+ },
15
+ "line-height": {
16
+ "value": "{label.large.line-height.value}",
17
+ "type": "font"
18
+ },
19
+ "letter-spacing": {
20
+ "value": "{label.large.letter-spacing.value}",
21
+ "type": "font"
22
+ },
23
+ "text-transform": {
24
+ "value": "none",
25
+ "type": "radius"
26
+ },
27
+ "color": {
28
+ "value": "{color.on-surface.variant.@.value}",
29
+ "type": "color"
30
+ },
31
+ "background": {
32
+ "value": "none",
33
+ "type": "color"
34
+ },
35
+ "border": {
36
+ "width": {
37
+ "value": "1px",
38
+ "type": "radius"
39
+ },
40
+ "style": {
41
+ "value": "solid",
42
+ "type": "radius"
43
+ },
44
+ "color": {
45
+ "value": "none",
46
+ "type": "color"
47
+ }
48
+ },
49
+ "radius": {
50
+ "value": "{radius.sm.value}",
51
+ "type": "radius"
52
+ },
53
+ "padding": {
54
+ "value": "{space.0.value} {space.6.value}",
55
+ "type": "space"
56
+ },
57
+ "min-width": {
58
+ "value": "auto",
59
+ "type": "space"
60
+ },
61
+ "height": {
62
+ "value": "40px",
63
+ "type": "space"
64
+ },
65
+ "gap": {
66
+ "value": "{space.2.value}",
67
+ "type": "space"
68
+ },
69
+ "shadow": {
70
+ "value": "none",
71
+ "type": "radius"
72
+ },
73
+ "icon-size": {
74
+ "value": "{icon.size.md.value}",
75
+ "type": "space"
76
+ },
77
+ "state": {
78
+ "layer": {
79
+ "color": {
80
+ "value": "{color.on-surface.variant.@.value}",
81
+ "type": "color"
82
+ },
83
+ "opacity": {
84
+ "hover": {
85
+ "value": "{opacity.hover.value}",
86
+ "type": "radius"
87
+ },
88
+ "focus": {
89
+ "value": "{opacity.focus.value}",
90
+ "type": "radius"
91
+ },
92
+ "active": {
93
+ "value": "{opacity.active.value}",
94
+ "type": "radius"
95
+ }
96
+ }
97
+ }
98
+ },
99
+ "disabled": {
100
+ "color": {
101
+ "value": "{color.on-surface.@.value}",
102
+ "type": "color"
103
+ },
104
+ "background": {
105
+ "value": "{color.surface.container.highest.@.value}",
106
+ "type": "color"
107
+ },
108
+ "border-color": {
109
+ "value": "{color.surface.container.highest.@.value}",
110
+ "type": "color"
111
+ },
112
+ "opacity": {
113
+ "value": "0.38",
114
+ "type": "radius"
115
+ }
116
+ },
117
+ "icon": {
118
+ "md": {
119
+ "size": {
120
+ "value": "{icon.size.md.value}",
121
+ "type": "space"
122
+ },
123
+ "width": {
124
+ "value": "40px",
125
+ "type": "space"
126
+ },
127
+ "height": {
128
+ "value": "40px",
129
+ "type": "space"
130
+ },
131
+ "margin": {
132
+ "value": "{space.1.value}",
133
+ "type": "space"
134
+ },
135
+ "padding": {
136
+ "value": "{space.0.value}",
137
+ "type": "space"
138
+ },
139
+ "radius": {
140
+ "value": "{btn.radius.value}",
141
+ "type": "space"
142
+ }
143
+ },
144
+ "xs": {
145
+ "size": {
146
+ "value": "{icon.size.xs.value}",
147
+ "type": "space"
148
+ },
149
+ "width": {
150
+ "value": "24px",
151
+ "type": "space"
152
+ },
153
+ "height": {
154
+ "value": "24px",
155
+ "type": "space"
156
+ }
157
+ },
158
+ "sm": {
159
+ "size": {
160
+ "value": "{icon.size.sm.value}",
161
+ "type": "space"
162
+ },
163
+ "width": {
164
+ "value": "32px",
165
+ "type": "space"
166
+ },
167
+ "height": {
168
+ "value": "32px",
169
+ "type": "space"
170
+ }
171
+ },
172
+ "lg": {
173
+ "size": {
174
+ "value": "{icon.size.lg.value}",
175
+ "type": "space"
176
+ },
177
+ "width": {
178
+ "value": "56px",
179
+ "type": "space"
180
+ },
181
+ "height": {
182
+ "value": "56px",
183
+ "type": "space"
184
+ }
185
+ }
186
+ },
187
+ "default": {
188
+ "background": {
189
+ "value": "{color.surface.@.value}",
190
+ "type": "color"
191
+ },
192
+ "color": {
193
+ "value": "{color.on-surface.@.value}",
194
+ "type": "color"
195
+ },
196
+ "border": {
197
+ "color": {
198
+ "value": "{color.surface.container.highest.@.value}",
199
+ "type": "color"
200
+ }
201
+ },
202
+ "state": {
203
+ "layer": {
204
+ "color": {
205
+ "value": "{color.on-surface.@.value}",
206
+ "type": "color"
207
+ }
208
+ }
209
+ },
210
+ "outlined": {
211
+ "background": {
212
+ "value": "transparent",
213
+ "type": "color"
214
+ },
215
+ "color": {
216
+ "value": "{btn.color.value}",
217
+ "type": "color"
218
+ },
219
+ "border": {
220
+ "color": {
221
+ "value": "{color.surface.container.highest.@.value}",
222
+ "type": "color"
223
+ }
224
+ },
225
+ "state": {
226
+ "layer": {
227
+ "color": {
228
+ "value": "{btn.color.value}",
229
+ "type": "color"
230
+ }
231
+ }
232
+ }
233
+ }
234
+ },
235
+ "primary": {
236
+ "background": {
237
+ "value": "{color.primary.@.value}",
238
+ "type": "color"
239
+ },
240
+ "color": {
241
+ "value": "{color.on-primary.@.value}",
242
+ "type": "color"
243
+ },
244
+ "border": {
245
+ "color": {
246
+ "value": "{color.primary.@.value}",
247
+ "type": "color"
248
+ }
249
+ },
250
+ "state": {
251
+ "layer": {
252
+ "color": {
253
+ "value": "{color.on-primary.@.value}",
254
+ "type": "color"
255
+ }
256
+ }
257
+ },
258
+ "outlined": {
259
+ "background": {
260
+ "value": "transparent",
261
+ "type": "color"
262
+ },
263
+ "color": {
264
+ "value": "{color.primary.@.value}",
265
+ "type": "color"
266
+ },
267
+ "border": {
268
+ "color": {
269
+ "value": "{color.primary.@.value}",
270
+ "type": "color"
271
+ }
272
+ },
273
+ "state": {
274
+ "layer": {
275
+ "color": {
276
+ "value": "{color.primary.@.value}",
277
+ "type": "color"
278
+ }
279
+ }
280
+ }
281
+ }
282
+ },
283
+ "secondary": {
284
+ "background": {
285
+ "value": "{color.secondary.@.value}",
286
+ "type": "color"
287
+ },
288
+ "color": {
289
+ "value": "{color.on-secondary.@.value}",
290
+ "type": "color"
291
+ },
292
+ "border": {
293
+ "color": {
294
+ "value": "{color.secondary.@.value}",
295
+ "type": "color"
296
+ }
297
+ },
298
+ "state": {
299
+ "layer": {
300
+ "color": {
301
+ "value": "{color.on-secondary.@.value}",
302
+ "type": "color"
303
+ }
304
+ }
305
+ },
306
+ "outlined": {
307
+ "background": {
308
+ "value": "transparent",
309
+ "type": "color"
310
+ },
311
+ "color": {
312
+ "value": "{color.secondary.@.value}",
313
+ "type": "color"
314
+ },
315
+ "border": {
316
+ "color": {
317
+ "value": "{color.secondary.@.value}",
318
+ "type": "color"
319
+ }
320
+ },
321
+ "state": {
322
+ "layer": {
323
+ "color": {
324
+ "value": "{color.secondary.@.value}",
325
+ "type": "color"
326
+ }
327
+ }
328
+ }
329
+ }
330
+ },
331
+ "tertiary": {
332
+ "background": {
333
+ "value": "{color.tertiary.@.value}",
334
+ "type": "color"
335
+ },
336
+ "color": {
337
+ "value": "{color.on-tertiary.@.value}",
338
+ "type": "color"
339
+ },
340
+ "border": {
341
+ "color": {
342
+ "value": "{color.tertiary.@.value}",
343
+ "type": "color"
344
+ }
345
+ },
346
+ "state": {
347
+ "layer": {
348
+ "color": {
349
+ "value": "{color.on-tertiary.@.value}",
350
+ "type": "color"
351
+ }
352
+ }
353
+ },
354
+ "outlined": {
355
+ "background": {
356
+ "value": "transparent",
357
+ "type": "color"
358
+ },
359
+ "color": {
360
+ "value": "{color.tertiary.@.value}",
361
+ "type": "color"
362
+ },
363
+ "border": {
364
+ "color": {
365
+ "value": "{color.tertiary.@.value}",
366
+ "type": "color"
367
+ }
368
+ },
369
+ "state": {
370
+ "layer": {
371
+ "color": {
372
+ "value": "{color.tertiary.@.value}",
373
+ "type": "color"
374
+ }
375
+ }
376
+ }
377
+ }
378
+ },
379
+ "success": {
380
+ "background": {
381
+ "value": "{color.primary.@.value}",
382
+ "type": "color"
383
+ },
384
+ "color": {
385
+ "value": "{color.on-primary.@.value}",
386
+ "type": "color"
387
+ },
388
+ "border": {
389
+ "color": {
390
+ "value": "{color.primary.@.value}",
391
+ "type": "color"
392
+ }
393
+ },
394
+ "state": {
395
+ "layer": {
396
+ "color": {
397
+ "value": "{color.on-primary.@.value}",
398
+ "type": "color"
399
+ }
400
+ }
401
+ },
402
+ "outlined": {
403
+ "background": {
404
+ "value": "transparent",
405
+ "type": "color"
406
+ },
407
+ "color": {
408
+ "value": "{color.primary.@.value}",
409
+ "type": "color"
410
+ },
411
+ "border": {
412
+ "color": {
413
+ "value": "{color.primary.@.value}",
414
+ "type": "color"
415
+ }
416
+ },
417
+ "state": {
418
+ "layer": {
419
+ "color": {
420
+ "value": "{color.primary.@.value}",
421
+ "type": "color"
422
+ }
423
+ }
424
+ }
425
+ }
426
+ },
427
+ "info": {
428
+ "background": {
429
+ "value": "{color.info.@.value}",
430
+ "type": "color"
431
+ },
432
+ "color": {
433
+ "value": "{color.on-info.@.value}",
434
+ "type": "color"
435
+ },
436
+ "border": {
437
+ "color": {
438
+ "value": "{color.info.@.value}",
439
+ "type": "color"
440
+ }
441
+ },
442
+ "state": {
443
+ "layer": {
444
+ "color": {
445
+ "value": "{color.on-info.@.value}",
446
+ "type": "color"
447
+ }
448
+ }
449
+ },
450
+ "outlined": {
451
+ "background": {
452
+ "value": "transparent",
453
+ "type": "color"
454
+ },
455
+ "color": {
456
+ "value": "{color.info.@.value}",
457
+ "type": "color"
458
+ },
459
+ "border": {
460
+ "color": {
461
+ "value": "{color.info.@.value}",
462
+ "type": "color"
463
+ }
464
+ },
465
+ "state": {
466
+ "layer": {
467
+ "color": {
468
+ "value": "{color.info.@.value}",
469
+ "type": "color"
470
+ }
471
+ }
472
+ }
473
+ }
474
+ },
475
+ "warning": {
476
+ "background": {
477
+ "value": "{color.warning.@.value}",
478
+ "type": "color"
479
+ },
480
+ "color": {
481
+ "value": "{color.on-warning.@.value}",
482
+ "type": "color"
483
+ },
484
+ "border": {
485
+ "color": {
486
+ "value": "{color.warning.@.value}",
487
+ "type": "color"
488
+ }
489
+ },
490
+ "state": {
491
+ "layer": {
492
+ "color": {
493
+ "value": "{color.on-warning.@.value}",
494
+ "type": "color"
495
+ }
496
+ }
497
+ },
498
+ "outlined": {
499
+ "background": {
500
+ "value": "transparent",
501
+ "type": "color"
502
+ },
503
+ "color": {
504
+ "value": "{color.warning.@.value}",
505
+ "type": "color"
506
+ },
507
+ "border": {
508
+ "color": {
509
+ "value": "{color.warning.@.value}",
510
+ "type": "color"
511
+ }
512
+ },
513
+ "state": {
514
+ "layer": {
515
+ "color": {
516
+ "value": "{color.warning.@.value}",
517
+ "type": "color"
518
+ }
519
+ }
520
+ }
521
+ }
522
+ },
523
+ "danger": {
524
+ "background": {
525
+ "value": "{color.error.@.value}",
526
+ "type": "color"
527
+ },
528
+ "color": {
529
+ "value": "{color.on-error.@.value}",
530
+ "type": "color"
531
+ },
532
+ "border": {
533
+ "color": {
534
+ "value": "{color.error.@.value}",
535
+ "type": "color"
536
+ }
537
+ },
538
+ "state": {
539
+ "layer": {
540
+ "color": {
541
+ "value": "{color.on-error.@.value}",
542
+ "type": "color"
543
+ }
544
+ }
545
+ },
546
+ "outlined": {
547
+ "background": {
548
+ "value": "transparent",
549
+ "type": "color"
550
+ },
551
+ "color": {
552
+ "value": "{color.error.@.value}",
553
+ "type": "color"
554
+ },
555
+ "border": {
556
+ "color": {
557
+ "value": "{color.error.@.value}",
558
+ "type": "color"
559
+ }
560
+ },
561
+ "state": {
562
+ "layer": {
563
+ "color": {
564
+ "value": "{color.error.@.value}",
565
+ "type": "color"
566
+ }
567
+ }
568
+ }
569
+ }
570
+ },
571
+ "xs": {
572
+ "font-size": {
573
+ "value": "{label.small.font-size.value}",
574
+ "type": "font"
575
+ },
576
+ "font-family": {
577
+ "value": "{label.small.font-family.value}",
578
+ "type": "font"
579
+ },
580
+ "font-weight": {
581
+ "value": "{label.small.font-weight.value}",
582
+ "type": "font"
583
+ },
584
+ "line-height": {
585
+ "value": "{label.small.line-height.value}",
586
+ "type": "font"
587
+ },
588
+ "letter-spacing": {
589
+ "value": "{label.small.letter-spacing.value}",
590
+ "type": "font"
591
+ },
592
+ "radius": {
593
+ "value": "{btn.radius.value}",
594
+ "type": "radius"
595
+ },
596
+ "padding": {
597
+ "value": "{space.0.value} {space.4.value}",
598
+ "type": "space"
599
+ },
600
+ "min-width": {
601
+ "value": "auto",
602
+ "type": "space"
603
+ },
604
+ "height": {
605
+ "value": "32px",
606
+ "type": "space"
607
+ },
608
+ "gap": {
609
+ "value": "{space.1.value}",
610
+ "type": "space"
611
+ },
612
+ "icon-size": {
613
+ "value": "{icon.size.xs.value}",
614
+ "type": "space"
615
+ }
616
+ },
617
+ "sm": {
618
+ "font-size": {
619
+ "value": "{label.medium.font-size.value}",
620
+ "type": "font"
621
+ },
622
+ "font-family": {
623
+ "value": "{label.medium.font-family.value}",
624
+ "type": "font"
625
+ },
626
+ "font-weight": {
627
+ "value": "{label.medium.font-weight.value}",
628
+ "type": "font"
629
+ },
630
+ "line-height": {
631
+ "value": "{label.medium.line-height.value}",
632
+ "type": "font"
633
+ },
634
+ "letter-spacing": {
635
+ "value": "{label.medium.letter-spacing.value}",
636
+ "type": "font"
637
+ },
638
+ "radius": {
639
+ "value": "{btn.radius.value}",
640
+ "type": "radius"
641
+ },
642
+ "padding": {
643
+ "value": "{space.1.value} {space.4.value}",
644
+ "type": "space"
645
+ },
646
+ "min-width": {
647
+ "value": "auto",
648
+ "type": "space"
649
+ },
650
+ "height": {
651
+ "value": "36px",
652
+ "type": "space"
653
+ },
654
+ "gap": {
655
+ "value": "{space.1.value}",
656
+ "type": "space"
657
+ },
658
+ "icon-size": {
659
+ "value": "{icon.size.sm.value}",
660
+ "type": "space"
661
+ }
662
+ },
663
+ "lg": {
664
+ "font-size": {
665
+ "value": "{body.large.font-size.value}",
666
+ "type": "font"
667
+ },
668
+ "font-family": {
669
+ "value": "{body.large.font-family.value}",
670
+ "type": "font"
671
+ },
672
+ "font-weight": {
673
+ "value": "{body.large.font-weight.value}",
674
+ "type": "font"
675
+ },
676
+ "line-height": {
677
+ "value": "{body.large.line-height.value}",
678
+ "type": "font"
679
+ },
680
+ "letter-spacing": {
681
+ "value": "{body.large.letter-spacing.value}",
682
+ "type": "font"
683
+ },
684
+ "radius": {
685
+ "value": "{btn.radius.value}",
686
+ "type": "radius"
687
+ },
688
+ "padding": {
689
+ "value": "{space.0.value} {space.8.value}",
690
+ "type": "space"
691
+ },
692
+ "min-width": {
693
+ "value": "auto",
694
+ "type": "space"
695
+ },
696
+ "height": {
697
+ "value": "44px",
698
+ "type": "space"
699
+ },
700
+ "gap": {
701
+ "value": "{space.2.value}",
702
+ "type": "space"
703
+ },
704
+ "icon-size": {
705
+ "value": "{icon.size.lg.value}",
706
+ "type": "space"
707
+ }
708
+ }
709
+ }
710
+ }