@wavemaker/foundation-css 11.15.4-rc.250 → 11.15.5-rc.253

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 (29) hide show
  1. package/cjs/foundation-css.cjs +0 -17
  2. package/cjs/src_tokens_mobile_components_dropdown-menu_dropdown-menu_json.foundation-css.cjs +1 -1
  3. package/cjs/src_tokens_mobile_components_form-controls_form-controls_json.foundation-css.cjs +1 -1
  4. package/cjs/src_tokens_mobile_components_form-wrapper_form-wrapper_json.foundation-css.cjs +1 -1
  5. package/cjs/src_tokens_mobile_components_progress-circle_progress-circle_json.foundation-css.cjs +1 -1
  6. package/cjs/src_tokens_mobile_components_select_select_json.foundation-css.cjs +1 -1
  7. package/cjs/src_tokens_mobile_components_slider_slider_json.foundation-css.cjs +1 -1
  8. package/npm-shrinkwrap.json +130 -176
  9. package/package-lock.json +130 -176
  10. package/package.json +1 -1
  11. package/src/styles/mobile/components/basic/progress-circle.less +4 -2
  12. package/src/styles/mobile/components/data/form.less +3 -0
  13. package/src/styles/mobile/components/input/select.less +31 -0
  14. package/src/styles/mobile/components/input/slider.less +11 -3
  15. package/src/styles/mobile/components/navigation/menu.less +15 -0
  16. package/src/styles/mobile/components/tokens.light.css +32 -2
  17. package/src/styles/mobile/components/variables/form-controls.variant.less +84 -0
  18. package/src/styles/mobile/components/variables/select.variant.less +8 -0
  19. package/src/styles/mobile/components/variables/slider.variant.less +18 -0
  20. package/src/styles/mobile/studio/data/form.less +6 -0
  21. package/src/styles/mobile/studio/input/form.less +30 -0
  22. package/src/styles/mobile/studio/input/select.less +16 -2
  23. package/src/styles/mobile/studio/input/slider.less +97 -2
  24. package/src/tokens/mobile/components/dropdown-menu/dropdown-menu.json +66 -0
  25. package/src/tokens/mobile/components/form-controls/form-controls.json +341 -1
  26. package/src/tokens/mobile/components/form-wrapper/form-wrapper.json +8 -0
  27. package/src/tokens/mobile/components/progress-circle/progress-circle.json +16 -14
  28. package/src/tokens/mobile/components/select/select.json +225 -51
  29. package/src/tokens/mobile/components/slider/slider.json +172 -0
package/src/tokens/mobile/components/dropdown-menu/dropdown-menu.json CHANGED
@@ -43,6 +43,14 @@
43
43
  "description": "Controls how thick or bold the dropdown menu trigger text appears. When set to 700, the trigger text appears bold to emphasize the dropdown button.<br>CSS variable: --wm-dropdown-menu-text-font-weight"
44
44
  }
45
45
  },
46
+ "font-size": {
47
+ "type": "font",
48
+ "value": "{body.large.font-size.value}",
49
+ "attributes": {
50
+ "subtype": "font-size",
51
+ "description": "Controls the font size of dropdown menu trigger text.<br>CSS variable: --wm-dropdown-menu-text-font-size"
52
+ }
53
+ },
46
54
  "padding": {
47
55
  "type": "space",
48
56
  "value": "{space.0.value} {space.3.value} {space.0.value} {space.2.value}",
@@ -69,6 +77,30 @@
69
77
  "subtype": "radius",
70
78
  "description": "Controls the corner rounding of dropdown menu content. This makes the dropdown appear with slightly rounded corners for a softer appearance.<br>CSS variable: --wm-dropdown-menu-content-border-radius"
71
79
  }
80
+ },
81
+ "width": {
82
+ "value": "{border.width.0.value}",
83
+ "type": "border",
84
+ "attributes": {
85
+ "subtype": "border-width",
86
+ "description": "Controls the border width of dropdown menu content.<br>CSS variable: --wm-dropdown-menu-content-border-width"
87
+ }
88
+ },
89
+ "style": {
90
+ "value": "{border.style.solid.value}",
91
+ "type": "radius",
92
+ "attributes": {
93
+ "subtype": "border-style",
94
+ "description": "Controls the border style of dropdown menu content.<br>CSS variable: --wm-dropdown-menu-content-border-style"
95
+ }
96
+ },
97
+ "color": {
98
+ "value": "{color.on-surface.variant.@.value}",
99
+ "type": "color",
100
+ "attributes": {
101
+ "subtype": "color",
102
+ "description": "Sets the border color of dropdown menu content.<br>CSS variable: --wm-dropdown-menu-content-border-color"
103
+ }
72
104
  }
73
105
  },
74
106
  "background": {
@@ -139,6 +171,14 @@
139
171
  "description": "Sets the text color of dropdown menu items (individual options in the dropdown list). This determines what color the menu item text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-dropdown-menu-item-color"
140
172
  }
141
173
  },
174
+ "background-color": {
175
+ "value": "transparent",
176
+ "type": "color",
177
+ "attributes": {
178
+ "subtype": "color",
179
+ "description": "Sets the background color of dropdown menu item anchor text.<br>CSS variable: --wm-dropdown-menu-item-background-color"
180
+ }
181
+ },
142
182
  "border": {
143
183
  "style": {
144
184
  "type": "radius",
@@ -156,6 +196,32 @@
156
196
  "subtype": "space",
157
197
  "description": "Controls the padding inside dropdown menu items (top/bottom, left/right). Acceptable units: px.<br>CSS variable: --wm-dropdown-menu-item-padding"
158
198
  }
199
+ },
200
+ "icon": {
201
+ "color": {
202
+ "value": "{color.on-surface.variant.@.value}",
203
+ "type": "color",
204
+ "attributes": {
205
+ "subtype": "color",
206
+ "description": "Sets the color of the dropdown menu item icon glyph (grey).<br>CSS variable: --wm-dropdown-menu-item-icon-color"
207
+ }
208
+ },
209
+ "padding": {
210
+ "value": "{space.0.value}",
211
+ "type": "space",
212
+ "attributes": {
213
+ "subtype": "space",
214
+ "description": "Controls the padding of the dropdown menu item icon glyph.<br>CSS variable: --wm-dropdown-menu-item-icon-padding"
215
+ }
216
+ },
217
+ "font-size": {
218
+ "value": "{body.large.font-size.value}",
219
+ "type": "font",
220
+ "attributes": {
221
+ "subtype": "icon-size",
222
+ "description": "Controls the font size of the dropdown menu item icon glyph (16px).<br>CSS variable: --wm-dropdown-menu-item-icon-font-size"
223
+ }
224
+ }
159
225
  }
160
226
  },
161
227
  "border":{
package/src/tokens/mobile/components/form-controls/form-controls.json CHANGED
@@ -45,6 +45,24 @@
45
45
  "description": "Note: The min-width property does not affect form controls when they are placed inside a <form>. Controls the minimum width of form controls (input fields, text areas, select boxes, and other form elements). This ensures form fields are always wide enough to be easily clickable and readable. Acceptable units: px, em, rem.<br>CSS variable: --wm-form-controls-min-width"
46
46
  }
47
47
  },
48
+ "field": {
49
+ "box-shadow": {
50
+ "value": "{elevation.shadow.none.value}",
51
+ "type": "radius",
52
+ "attributes": {
53
+ "subtype": "elevation",
54
+ "description": "Controls the box shadow (elevation) of form fields (containers that wrap a label and input control). This determines the shadow depth around each form field.<br>CSS variable: --wm-form-controls-field-box-shadow"
55
+ }
56
+ },
57
+ "radius": {
58
+ "value": "{radius.none.value}",
59
+ "type": "radius",
60
+ "attributes": {
61
+ "subtype": "radius",
62
+ "description": "Controls the corner rounding of form fields (containers that wrap a label and input control). A value of 0 removes rounded corners.<br>CSS variable: --wm-form-controls-field-radius"
63
+ }
64
+ }
65
+ },
48
66
  "font": {
49
67
  "size": {
50
68
  "value": "{body.large.font-size.value}",
@@ -400,6 +418,328 @@
400
418
  }
401
419
  }
402
420
  },
403
- "appearances": {}
421
+ "appearances": {
422
+ "standard":{},
423
+ "filled": {
424
+ "mapping": {
425
+ "opacity": {
426
+ "value": "{border.width.1.value}",
427
+ "type": "radius"
428
+ },
429
+ "min-height": {
430
+ "value": "56px",
431
+ "type": "space"
432
+ },
433
+ "min-width": {
434
+ "value": "210px",
435
+ "type": "space"
436
+ },
437
+ "padding": {
438
+ "value": "{space.4.value} {space.4.value} 0 {space.4.value}",
439
+ "type": "space"
440
+ },
441
+ "border": {
442
+ "color": {
443
+ "value": "{color.outline.@.value}",
444
+ "type": "color"
445
+ },
446
+ "radius": {
447
+ "value": "{radius.sm.value} {radius.sm.value} 0 0",
448
+ "type": "space"
449
+ },
450
+ "style": {
451
+ "value": "{border.style.base.value}",
452
+ "type": "style"
453
+ },
454
+ "width": {
455
+ "value": "0 0 {border.width.1.value} 0",
456
+ "type": "space"
457
+ }
458
+ },
459
+ "placeholder": {
460
+ "color": {
461
+ "value": "{color.on-surface.variant.@.value}",
462
+ "type": "color"
463
+ }
464
+ },
465
+ "background": {
466
+ "value": "{color.surface.dim.@.value}",
467
+ "type": "color"
468
+ },
469
+ "color": {
470
+ "value": "{color.black.@.value}",
471
+ "type": "color"
472
+ },
473
+ "floating": {
474
+ "color": {
475
+ "value": "{color.on-surface.variant.@.value}",
476
+ "type": "color"
477
+ },
478
+ "top": {
479
+ "value": "{space.5.value}",
480
+ "type": "space"
481
+ },
482
+ "left": {
483
+ "value": "{space.3.value}",
484
+ "type": "space"
485
+ }
486
+ },
487
+ "label": {
488
+ "color": {
489
+ "value": "{color.on-surface.variant.@.value}",
490
+ "type": "color"
491
+ },
492
+ "background": {
493
+ "value": "{color.transparent.@.value}",
494
+ "type": "color"
495
+ },
496
+ "font": {
497
+ "size": {
498
+ "value": "{label.large.font-size.value}",
499
+ "type": "font"
500
+ },
501
+ "weight": {
502
+ "value": "{label.large.font-weight.value}",
503
+ "type": "font"
504
+ },
505
+ "family": {
506
+ "value": "{label.large.font-family.value}",
507
+ "type": "font"
508
+ }
509
+ },
510
+ "margin": {
511
+ "vertical": {
512
+ "value": "{space.0.value}",
513
+ "type": "space"
514
+ },
515
+ "horizontal": {
516
+ "value": "{space.0.value}",
517
+ "type": "space"
518
+ }
519
+ }
520
+ },
521
+ "states": {
522
+ "focused": {
523
+ "min-height": {
524
+ "value": "56px",
525
+ "type": "space"
526
+ },
527
+ "min-width": {
528
+ "value": "210px",
529
+ "type": "space"
530
+ },
531
+ "border": {
532
+ "width": {
533
+ "value": "0 0 {border.width.2.value} 0",
534
+ "type": "space"
535
+ },
536
+ "style": {
537
+ "value": "{border.style.base.value}",
538
+ "type": "style"
539
+ },
540
+ "radius": {
541
+ "value": "{radius.sm.value} {radius.sm.value} 0 0",
542
+ "type": "space"
543
+ }
544
+ },
545
+ "floating": {
546
+ "color": {
547
+ "value": "{color.outline.@.value}",
548
+ "type": "color"
549
+ },
550
+ "top": {
551
+ "value": "{space.5.value}",
552
+ "type": "space"
553
+ },
554
+ "left": {
555
+ "value": "{space.3.value}",
556
+ "type": "space"
557
+ }
558
+ },
559
+ "label": {
560
+ "color": {
561
+ "value": "{color.outline.@.value}",
562
+ "type": "color"
563
+ }
564
+ },
565
+ "padding": {
566
+ "value": "{space.4.value} {space.4.value} 0 {space.4.value}",
567
+ "type": "space"
568
+ }
569
+ },
570
+ "disabled": {
571
+ "border": {
572
+ "color": {
573
+ "value": "{color.shadow.@.value}",
574
+ "type": "color"
575
+ },
576
+ "width": {
577
+ "value": "0 0 {border.width.1.value} 0",
578
+ "type": "space"
579
+ }
580
+ },
581
+ "background": {
582
+ "value": "{color.surface.dim.@.value}",
583
+ "type": "color"
584
+ },
585
+ "color": {
586
+ "value": "{color.scrim.@.value}",
587
+ "type": "color"
588
+ },
589
+ "opacity": {
590
+ "value": "0.67",
591
+ "type": "radius"
592
+ }
593
+ }
594
+ }
595
+ }
596
+ },
597
+ "outlined": {
598
+ "mapping": {
599
+ "opacity": {
600
+ "value": "1",
601
+ "type": "radius"
602
+ },
603
+ "min-height": {
604
+ "value": "56px",
605
+ "type": "space"
606
+ },
607
+ "min-width": {
608
+ "value": "210px",
609
+ "type": "space"
610
+ },
611
+ "font": {
612
+ "size": {
613
+ "value": "{body.large.font-size.value}",
614
+ "type": "font"
615
+ },
616
+ "weight": {
617
+ "value": "{body.large.font-weight.value}",
618
+ "type": "font"
619
+ },
620
+ "family": {
621
+ "value": "{body.large.font-family.value}",
622
+ "type": "font"
623
+ }
624
+ },
625
+ "padding": {
626
+ "value": "{space.4.value}",
627
+ "type": "space"
628
+ },
629
+ "border": {
630
+ "value": "{border.width.1.value}",
631
+ "type": "border",
632
+ "radius": {
633
+ "value": "{radius.md.value}",
634
+ "type": "radius"
635
+ }
636
+ },
637
+ "placeholder": {
638
+ "color": {
639
+ "value": "{color.on-surface.@.value}",
640
+ "type": "color"
641
+ }
642
+ },
643
+ "background": {
644
+ "value": "{color.white.@.value}",
645
+ "type": "color"
646
+ },
647
+ "color": {
648
+ "value": "{color.black.@.value}",
649
+ "type": "color"
650
+ },
651
+ "label": {
652
+ "color": {
653
+ "value": "{color.on-surface.@.value}",
654
+ "type": "color"
655
+ },
656
+ "background": {
657
+ "value": "{color.transparent.@.value}",
658
+ "type": "color"
659
+ }
660
+ },
661
+ "floating": {
662
+ "color": {
663
+ "value": "{color.surface.dim.@.value}",
664
+ "type": "color"
665
+ },
666
+ "top": {
667
+ "value": "{space.5.value}",
668
+ "type": "space"
669
+ },
670
+ "left": {
671
+ "value": "{space.4.value}",
672
+ "type": "space"
673
+ }
674
+ },
675
+ "states": {
676
+ "focused": {
677
+ "min-height": {
678
+ "value": "56px",
679
+ "type": "space"
680
+ },
681
+ "min-width": {
682
+ "value": "210px",
683
+ "type": "space"
684
+ },
685
+ "border": {
686
+ "color": {
687
+ "value": "{color.secondary.@.value}",
688
+ "type": "color"
689
+ },
690
+ "width": {
691
+ "value": "{border.width.1.value}",
692
+ "type": "space"
693
+ }
694
+ },
695
+ "padding": {
696
+ "value": "{space.4.value}",
697
+ "type": "space"
698
+ },
699
+ "background": {
700
+ "value": "{color.white.@.value}",
701
+ "type": "color"
702
+ },
703
+ "color": {
704
+ "value": "{color.black.@.value}",
705
+ "type": "color"
706
+ },
707
+ "floating": {
708
+ "color": {
709
+ "value": "{color.primary.@.value}",
710
+ "type": "color"
711
+ },
712
+ "top": {
713
+ "value": "{space.5.value}",
714
+ "type": "space"
715
+ },
716
+ "left": {
717
+ "value": "{space.4.value}",
718
+ "type": "space"
719
+ }
720
+ }
721
+ },
722
+ "disabled": {
723
+ "border": {
724
+ "value": "1px solid {color.shadow.@.value}",
725
+ "type": "border"
726
+ },
727
+ "background": {
728
+ "value": "{color.white.@.value}",
729
+ "type": "color"
730
+ },
731
+ "color": {
732
+ "value": "{color.scrim.@.value}",
733
+ "type": "color"
734
+ },
735
+ "opacity": {
736
+ "value": "0.67",
737
+ "type": "radius"
738
+ }
739
+ }
740
+ }
741
+ }
742
+ }
743
+ }
404
744
  }
405
745
  }
package/src/tokens/mobile/components/form-wrapper/form-wrapper.json CHANGED
@@ -61,6 +61,14 @@
61
61
  }
62
62
  }
63
63
  },
64
+ "box-shadow": {
65
+ "value": "{elevation.shadow.none.value}",
66
+ "type": "radius",
67
+ "attributes": {
68
+ "subtype": "elevation",
69
+ "description": "Controls the box shadow (elevation) of form wrapper components (containers that wrap form elements with header, body, and footer sections). This determines the shadow depth around the form container.<br>CSS variable: --wm-form-box-shadow"
70
+ }
71
+ },
64
72
  "header": {
65
73
  "padding": {
66
74
  "vertical": {
package/src/tokens/mobile/components/progress-circle/progress-circle.json CHANGED
@@ -87,20 +87,22 @@
87
87
  }
88
88
  }
89
89
  },
90
- "width":{
91
- "value": "150px",
92
- "type": "space",
93
- "attributes": {
94
- "subtype": "space",
95
- "description": "Controls the width of progress circles (circular visual indicators that show the completion status of a task or process). This determines how wide the progress circle appears. Acceptable units: px.<br>CSS variable: --wm-progress-circle-width"
96
- }
97
- },
98
- "height":{
99
- "value": "150px",
100
- "type": "space",
101
- "attributes": {
102
- "subtype": "space",
103
- "description": "Controls the height of progress circles (circular visual indicators that show the completion status of a task or process). This determines how tall the progress circle appears. Acceptable units: px.<br>CSS variable: --wm-progress-circle-height"
90
+ "progress-value": {
91
+ "width": {
92
+ "value": "16px",
93
+ "type": "space",
94
+ "attributes": {
95
+ "subtype": "space",
96
+ "description": "Controls the width of the progress circle value stroke (the active arc that shows completed progress). Matches studio stroke thickness. Acceptable units: px.<br>CSS variable: --wm-progress-circle-progress-value-width"
97
+ }
98
+ },
99
+ "height": {
100
+ "value": "16px",
101
+ "type": "space",
102
+ "attributes": {
103
+ "subtype": "space",
104
+ "description": "Controls the height of the progress circle value stroke (the active arc that shows completed progress). Default from runtime progressValue.height (16). Acceptable units: px.<br>CSS variable: --wm-progress-circle-progress-value-height"
105
+ }
104
106
  }
105
107
  }
106
108
  },