@wavemaker/foundation-css 11.15.5-rc.259 → 11.15.6-1.647697

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 (30) hide show
  1. package/cjs/src_tokens_mobile_components_chips_chips_json.foundation-css.cjs +1 -1
  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_icon_icon_json.foundation-css.cjs +1 -1
  5. package/cjs/src_tokens_mobile_components_label_label_json.foundation-css.cjs +1 -1
  6. package/cjs/src_tokens_mobile_components_switch_switch_json.foundation-css.cjs +1 -1
  7. package/cjs/src_tokens_mobile_components_tabs_tabs_json.foundation-css.cjs +1 -1
  8. package/npm-shrinkwrap.json +77 -80
  9. package/package-lock.json +77 -80
  10. package/package.json +1 -1
  11. package/src/styles/mobile/components/basic/icon.less +4 -6
  12. package/src/styles/mobile/components/basic/label.less +4 -46
  13. package/src/styles/mobile/components/container/tabs/tab-header.less +3 -15
  14. package/src/styles/mobile/components/data/form.less +0 -14
  15. package/src/styles/mobile/components/input/chips.less +0 -37
  16. package/src/styles/mobile/components/input/select.less +1 -29
  17. package/src/styles/mobile/components/input/switch.less +4 -4
  18. package/src/styles/mobile/components/navigation/menu.less +0 -1
  19. package/src/styles/mobile/components/tokens.light.css +1 -18
  20. package/src/styles/mobile/components/variables/chips.variant.less +1 -5
  21. package/src/styles/mobile/studio/basic/icon.less +3 -0
  22. package/src/styles/mobile/studio/container/tabs.less +1 -5
  23. package/src/styles/mobile/studio/input/form.less +5 -20
  24. package/src/tokens/mobile/components/chips/chips.json +2 -72
  25. package/src/tokens/mobile/components/dropdown-menu/dropdown-menu.json +0 -8
  26. package/src/tokens/mobile/components/form-controls/form-controls.json +4 -28
  27. package/src/tokens/mobile/components/icon/icon.json +3 -3
  28. package/src/tokens/mobile/components/label/label.json +0 -8
  29. package/src/tokens/mobile/components/switch/switch.json +0 -24
  30. package/src/tokens/mobile/components/tabs/tabs.json +3 -27
package/src/styles/mobile/components/data/form.less CHANGED
@@ -156,9 +156,6 @@
156
156
  font-size: var(--wm-form-controls-font-size);
157
157
  font-family: var(--wm-form-controls-font-family);
158
158
  font-weight: var(--wm-form-controls-font-weight);
159
- line-height: var(--wm-form-controls-font-line-height);
160
- letter-spacing: var(--wm-form-controls-font-letter-spacing);
161
- text-align: var(--wm-form-controls-text-align);
162
159
  }
163
160
 
164
161
  .app-input-text{
@@ -166,8 +163,6 @@
166
163
  font-size: var(--wm-form-controls-font-size);
167
164
  font-family: var(--wm-form-controls-font-family);
168
165
  font-weight: var(--wm-form-controls-font-weight);
169
- line-height: var(--wm-form-controls-font-line-height);
170
- letter-spacing: var(--wm-form-controls-font-letter-spacing);
171
166
  }
172
167
 
173
168
  .app-input-focused {
@@ -192,9 +187,6 @@
192
187
  font-family: var(--wm-form-controls-font-family);
193
188
  font-weight: var(--wm-form-controls-font-weight);
194
189
  min-width: var(--wm-form-controls-min-width);
195
- line-height: var(--wm-form-controls-font-line-height);
196
- letter-spacing: var(--wm-form-controls-font-letter-spacing);
197
- text-align: var(--wm-form-controls-text-align);
198
190
  }
199
191
 
200
192
  .app-input-disabled {
@@ -215,9 +207,6 @@
215
207
  border-left-color: var(--wm-form-controls-border-color);
216
208
  border-bottom-color: var(--wm-form-controls-border-color);
217
209
  border-right-color: var(--wm-form-controls-border-color);
218
- line-height: var(--wm-form-controls-font-line-height);
219
- letter-spacing: var(--wm-form-controls-font-letter-spacing);
220
- text-align: var(--wm-form-controls-text-align);
221
210
  }
222
211
 
223
212
  .app-select-disabled{
@@ -233,9 +222,6 @@
233
222
  font-family: var(--wm-form-controls-font-family);
234
223
  font-weight: var(--wm-form-controls-font-weight);
235
224
  min-width: var(--wm-form-controls-min-width);
236
- line-height: var(--wm-form-controls-font-line-height);
237
- letter-spacing: var(--wm-form-controls-font-letter-spacing);
238
- text-align: var(--wm-form-controls-text-align);
239
225
  }
240
226
 
241
227
  .app-input.floatingLabel {
package/src/styles/mobile/components/input/chips.less CHANGED
@@ -59,7 +59,6 @@
59
59
  font-size: var(--wm-chips-item-font-size);
60
60
  line-height: var(--wm-chips-item-line-height);
61
61
  letter-spacing: var(--wm-chips-item-letter-spacing);
62
- padding: var(--wm-chips-item-text-padding);
63
62
  }
64
63
 
65
64
  .app-chips-active-item {
@@ -97,39 +96,3 @@
97
96
  height: var(--wm-chips-item-avatar-size);
98
97
  border-radius: var( --wm-chips-item-avatar-radius);
99
98
  }
100
-
101
- .app-chips-left-badge.app-label-text {
102
- color: var(--wm-chips-left-badge-text-color);
103
- }
104
-
105
- .app-chips-active-left-badge.app-label-text {
106
- color: var(--wm-chips-left-badge-text-color);
107
- }
108
-
109
- .app-chips-right-badge.app-label-text {
110
- color: var(--wm-chips-right-badge-text-color);
111
- margin-top: var(--wm-chips-right-badge-text-margin-top);
112
- }
113
-
114
- .app-chips-active-right-badge.app-label-text {
115
- color: var(--wm-chips-right-badge-text-color);
116
- margin-top: var(--wm-chips-right-badge-text-margin-top);
117
- }
118
-
119
- .app-chips-left-icon .app-icon-shape {
120
- color: var(--wm-chips-left-icon-color);
121
- padding: var(--wm-chips-left-icon-padding);
122
- }
123
-
124
- .app-chips-active-left-icon .app-icon-shape {
125
- color: var(--wm-chips-left-icon-color);
126
- padding: var(--wm-chips-left-icon-padding);
127
- }
128
-
129
- .app-chips-right-icon .app-icon-shape {
130
- color: var(--wm-chips-right-icon-color);
131
- }
132
-
133
- .app-chips-active-right-icon .app-icon-shape {
134
- color: var(--wm-chips-right-icon-color);
135
- }
package/src/styles/mobile/components/input/select.less CHANGED
@@ -37,13 +37,6 @@
37
37
  padding: var(--wm-select-item-padding);
38
38
  }
39
39
 
40
- .app-select-last-item{
41
- border-width: var(--wm-select-item-border-width);
42
- border-color: var(--wm-select-item-border-color);
43
- border-style: var(--wm-select-item-border-style);
44
- padding: var(--wm-select-item-padding);
45
- }
46
-
47
40
  .app-select-item-text {
48
41
  font-size: var(--wm-select-modal-text-font-size);
49
42
  color: var(--wm-select-modal-text-color);
@@ -73,28 +66,7 @@
73
66
  align-items: center;
74
67
  }
75
68
 
76
- .app-select-active-item-text {
77
- font-size: var(--wm-select-modal-text-font-size);
78
- color: var(--wm-select-modal-text-color);
79
- font-family: var(--wm-select-modal-text-font-family);
80
- line-height: var(--wm-select-modal-text-line-height);
81
- letter-spacing: var(--wm-select-modal-text-letter-spacing);
82
- }
83
-
84
- .app-select-check-icon.app-icon {
85
- background-color: var(--wm-select-check-icon-background-color);
86
- height: var(--wm-select-check-icon-height);
87
- width: var(--wm-select-check-icon-width);
88
- border-radius: var(--wm-select-check-icon-border-radius);
89
- border-width: var(--wm-select-check-icon-border-width);
90
- border-color: var(--wm-select-check-icon-border-color);
91
- border-style: var(--wm-select-check-icon-border-style);
92
- padding: var(--wm-select-check-icon-padding);
93
- justify-content: center;
94
- align-items: center;
95
- }
96
-
97
- .app-select-check-icon .app-icon-shape {
69
+ .app-select-check-icon.text {
98
70
  font-size: var(--wm-select-check-icon-font-size);
99
71
  color: var(--wm-select-check-icon-color);
100
72
  }
package/src/styles/mobile/components/input/switch.less CHANGED
@@ -1,12 +1,12 @@
1
1
  @import (optional) url('../variables/switch.variant.less');
2
2
  .app-switch-first-btn{
3
- border-radius: var(--wm-switch-first-button-border-radius);
4
- border-width: var(--wm-switch-button-border-width);
3
+ border-top-left-radius: var(--wm-switch-button-border-radius);
4
+ border-bottom-left-radius: var(--wm-switch-button-border-radius);
5
5
  }
6
6
 
7
7
  .app-switch-last-btn{
8
- border-radius: var(--wm-switch-last-button-border-radius);
9
- border-width: var(--wm-switch-button-border-width);
8
+ border-top-right-radius: var(--wm-switch-button-border-radius);
9
+ border-bottom-right-radius: var(--wm-switch-button-border-radius);
10
10
  }
11
11
 
12
12
  .app-switch-btn {
package/src/styles/mobile/components/navigation/menu.less CHANGED
@@ -31,7 +31,6 @@
31
31
  border-color: var(--wm-dropdown-menu-content-border-color);
32
32
  width: var(--wm-dropdown-menu-content-width);
33
33
  padding: var(--wm-dropdown-menu-padding);
34
- box-shadow: var(--wm-dropdown-menu-box-shadow);
35
34
  }
36
35
 
37
36
  .app-menu-item.root {
package/src/styles/mobile/components/tokens.light.css CHANGED
@@ -98,9 +98,7 @@
98
98
  --wm-chips-shadow: none;
99
99
  --wm-chips-list-background-color: transparent;
100
100
  --wm-chips-list-height: 70px;
101
- --wm-chips-item-text-padding: 0px;
102
101
  --wm-chips-item-height: 32px;
103
- --wm-chips-right-badge-text-margin-top: 0px;
104
102
  --wm-container-border-color: transparent;
105
103
  --wm-container-background-color: transparent;
106
104
  --wm-container-box-shadow: none;
@@ -120,7 +118,6 @@
120
118
  --wm-fileupload-ripple-color: transparent;
121
119
  --wm-form-controls-min-height: 48px;
122
120
  --wm-form-controls-min-width: 160px;
123
- --wm-form-controls-text-align: left;
124
121
  --wm-grid-layout-width: 100%;
125
122
  --wm-icon-size: 24px;
126
123
  --wm-icon-size-xs: 12px;
@@ -131,7 +128,6 @@
131
128
  --wm-icon-size-3x: 42px;
132
129
  --wm-icon-size-4x: 48px;
133
130
  --wm-icon-size-5x: 54px;
134
- --wm-label-text-align: left;
135
131
  --wm-label-background-color: none;
136
132
  --wm-label-large-font-size: 14px;
137
133
  --wm-label-large-line-height: 20px;
@@ -222,8 +218,6 @@
222
218
  --wm-switch-button-text-transform: capitalize;
223
219
  --wm-switch-button-border-width: 1px;
224
220
  --wm-switch-button-ripple-color: rgba(255, 255, 255, 0.08);
225
- --wm-switch-first-button-border-radius: 1px 0px 0px 1px;
226
- --wm-switch-last-button-border-radius: 0px 1px 1px 0px;
227
221
  --wm-tabbar-height: 80px;
228
222
  --wm-tabbar-menu-height: 100%;
229
223
  --wm-tabbar-more-menu-width: 100%;
@@ -233,8 +227,6 @@
233
227
  --wm-tabbar-item-background-color: transparent;
234
228
  --wm-tabbar-item-opacity: 1;
235
229
  --wm-tabs-border-color: transparent;
236
- --wm-tabs-item-heading-min-height: 48px;
237
- --wm-tabs-item-heading-indicator-margin-top: -2px;
238
230
  --wm-tabs-item-heading-indicator-height: 3px;
239
231
  --wm-tabs-item-icon-display: inline-flex;
240
232
  --wm-tabs-item-icon-height: 1;
@@ -637,11 +629,6 @@
637
629
  --wm-chips-item-letter-spacing: var(--wm-label-large-letter-spacing);
638
630
  --wm-chips-item-avatar-size: var(--wm-icon-size);
639
631
  --wm-chips-item-avatar-radius: var(--wm-radius-pill);
640
- --wm-chips-left-icon-padding: var(--wm-space-0) 2px var(--wm-space-0) var(--wm-space-0);
641
- --wm-chips-left-icon-color: var(--wm-color-on-surface);
642
- --wm-chips-right-icon-color: var(--wm-color-on-surface);
643
- --wm-chips-left-badge-text-color: var(--wm-color-on-surface);
644
- --wm-chips-right-badge-text-color: var(--wm-color-on-surface);
645
632
  --wm-container-border-width: var(--wm-border-width-0);
646
633
  --wm-container-border-radius: var(--wm-radius-none);
647
634
  --wm-container-padding: var(--wm-space-0);
@@ -700,8 +687,6 @@
700
687
  --wm-form-controls-field-box-shadow: var(--wm-elevation-shadow-none);
701
688
  --wm-form-controls-field-radius: var(--wm-radius-none);
702
689
  --wm-form-controls-font-size: var(--wm-body-large-font-size);
703
- --wm-form-controls-font-line-height: var(--wm-body-large-line-height);
704
- --wm-form-controls-font-letter-spacing: var(--wm-body-large-letter-spacing);
705
690
  --wm-form-controls-padding: var(--wm-space-2);
706
691
  --wm-form-controls-border-color: var(--wm-color-outline);
707
692
  --wm-form-controls-border-radius: var(--wm-radius-sm);
@@ -1104,7 +1089,6 @@
1104
1089
  --wm-tabs-border-radius: var(--wm-radius-sm);
1105
1090
  --wm-tabs-border-width: var(--wm-border-width-1);
1106
1091
  --wm-tabs-heading-background: var(--wm-color-surface);
1107
- --wm-tabs-heading-gap: var(--wm-space-0);
1108
1092
  --wm-tabs-heading-border-radius: var(--wm-radius-sm);
1109
1093
  --wm-tabs-heading-border-color: var(--wm-color-surface);
1110
1094
  --wm-tabs-heading-border-width: var(--wm-border-width-1);
@@ -1112,13 +1096,13 @@
1112
1096
  --wm-tabs-item-heading-border-color: var(--wm-color-surface);
1113
1097
  --wm-tabs-item-heading-border-width: var(--wm-border-width-0);
1114
1098
  --wm-tabs-item-heading-padding: var(--wm-space-2);
1115
- --wm-tabs-item-heading-gap: var(--wm-space-0);
1116
1099
  --wm-tabs-item-heading-font-size: var(--wm-h6-font-size);
1117
1100
  --wm-tabs-item-heading-line-height: var(--wm-h6-line-height);
1118
1101
  --wm-tabs-item-heading-background: var(--wm-color-surface);
1119
1102
  --wm-tabs-item-heading-text-color: var(--wm-color-outline);
1120
1103
  --wm-tabs-item-heading-icon-size: var(--wm-icon-size);
1121
1104
  --wm-tabs-item-heading-icon-color: var(--wm-color-outline);
1105
+ --wm-tabs-item-heading-indicator-margin: var(--wm-space-0);
1122
1106
  --wm-tabs-item-heading-indicator-background: var(--wm-color-primary);
1123
1107
  --wm-tile-background-color: var(--wm-color-surface-container-low);
1124
1108
  --wm-tile-color: var(--wm-color-on-surface-variant);
@@ -1278,7 +1262,6 @@
1278
1262
  --wm-datetime-button-border-style: var(--wm-border-style-base);
1279
1263
  --wm-datetime-text-font-weight: var(--wm-body-medium-font-weight);
1280
1264
  --wm-datetime-selected-text-font-weight: var(--wm-body-medium-font-weight);
1281
- --wm-dropdown-menu-box-shadow: var(--wm-elevation-shadow-2);
1282
1265
  --wm-dropdown-menu-item-font-family: var(--wm-body-large-font-family);
1283
1266
  --wm-dropdown-menu-item-font-weight: var(--wm-body-large-font-weight);
1284
1267
  --wm-form-controls-font-weight: var(--wm-body-large-font-weight);
package/src/styles/mobile/components/variables/chips.variant.less CHANGED
@@ -4,11 +4,7 @@
4
4
  }
5
5
 
6
6
  .app-chips-active-item,
7
- .app-chips-active-item-text,
8
- .app-chips-active-left-badge,
9
- .app-chips-active-right-badge,
10
- .app-chips-active-left-icon,
11
- .app-chips-active-right-icon {
7
+ .app-chips-active-item-text {
12
8
  --wm-chips-color: var(--wm-color-on-surface-variant);
13
9
  --wm-chips-background-color: var(--wm-color-secondary-container);
14
10
  --wm-chips-item-border-color: var(--wm-color-secondary-container);
package/src/styles/mobile/studio/basic/icon.less CHANGED
@@ -14,5 +14,8 @@
14
14
  }
15
15
  .app-icon {
16
16
  font-size: var(--wm-icon-font-size);
17
+ min-width: var(--wm-icon-min-width);
18
+ width: var(--wm-icon-width);
19
+ height: var(--wm-icon-height);
17
20
  }
18
21
 
package/src/styles/mobile/studio/container/tabs.less CHANGED
@@ -16,7 +16,7 @@
16
16
  padding: var(--wm-tabs-border-width, 4px) 0;
17
17
  }
18
18
 
19
- .nav-tabs {
19
+ .nav-tabs {
20
20
  display: flex;
21
21
  align-items: stretch;
22
22
  border-bottom: var(--wm-tabs-border-width) var(--wm-tabs-border-style) var(--wm-tabs-border-color);
@@ -31,9 +31,6 @@
31
31
  border-style: var(--wm-tabs-item-heading-border-style);
32
32
  border-color: var(--wm-tabs-item-heading-border-color);
33
33
  border-radius: var(--wm-tabs-item-heading-border-radius);
34
- gap: var(--wm-tabs-item-heading-gap);
35
- min-height: var(--wm-tabs-item-heading-min-height);
36
-
37
34
  .tab-heading {
38
35
 
39
36
 
@@ -63,7 +60,6 @@
63
60
  background: var(--wm-tabs-item-heading-indicator-background);
64
61
  transform: scale(0);
65
62
  transition: all 0.2s ease-in-out;
66
- margin-top: var(--wm-tabs-item-heading-indicator-margin-top);
67
63
  }
68
64
  }
69
65
 
package/src/styles/mobile/studio/input/form.less CHANGED
@@ -55,14 +55,11 @@
55
55
  border-width: var(--wm-form-controls-border-width);
56
56
  border-color: var(--wm-form-controls-border-color);
57
57
  border-radius: var(--wm-form-controls-border-radius);
58
- background: var(--wm-form-controls-background);
59
- text-align: var(--wm-form-controls-text-align);
58
+ background-color: var(--wm-form-controls-background);
60
59
  color: var(--wm-form-controls-color);
61
60
  font-size: var(--wm-form-controls-font-size);
62
61
  font-family: var(--wm-form-controls-font-family);
63
62
  font-weight: var(--wm-form-controls-font-weight);
64
- line-height: var(--wm-form-controls-font-line-height);
65
- letter-spacing: var(--wm-form-controls-font-letter-spacing);
66
63
  }
67
64
 
68
65
  .wm-app .app-form > .panel-body{
@@ -104,15 +101,12 @@
104
101
  border-width: var(--wm-form-controls-border-width);
105
102
  border-color: var(--wm-form-controls-border-color);
106
103
  border-radius: var(--wm-form-controls-border-radius);
107
- background: var(--wm-form-controls-background);
108
- text-align: var(--wm-form-controls-text-align);
104
+ background-color: var(--wm-form-controls-background);
109
105
  color: var(--wm-form-controls-color);
110
106
  opacity: var(--wm-form-controls-opacity);
111
107
  font-size: var(--wm-form-controls-font-size);
112
108
  font-family: var(--wm-form-controls-font-family);
113
109
  font-weight: var(--wm-form-controls-font-weight);
114
- line-height: var(--wm-form-controls-font-line-height);
115
- letter-spacing: var(--wm-form-controls-font-letter-spacing);
116
110
  width: var(--wm-form-controls-min-width);
117
111
  }
118
112
 
@@ -130,15 +124,12 @@
130
124
  border-width: var(--wm-form-controls-border-width);
131
125
  border-color: var(--wm-form-controls-border-color);
132
126
  border-radius: var(--wm-form-controls-border-radius);
133
- background: var(--wm-form-controls-background);
134
- text-align: var(--wm-form-controls-text-align);
127
+ background-color: var(--wm-form-controls-background);
135
128
  color: var(--wm-form-controls-color);
136
129
  opacity: var(--wm-form-controls-opacity);
137
130
  font-size: var(--wm-form-controls-font-size);
138
131
  font-family: var(--wm-form-controls-font-family);
139
132
  font-weight: var(--wm-form-controls-font-weight);
140
- line-height: var(--wm-form-controls-font-line-height);
141
- letter-spacing: var(--wm-form-controls-font-letter-spacing);
142
133
  width: var(--wm-form-controls-min-width);
143
134
  }
144
135
 
@@ -178,15 +169,12 @@
178
169
  border-width: var(--wm-form-controls-border-width);
179
170
  border-color: var(--wm-form-controls-border-color);
180
171
  border-radius: var(--wm-form-controls-border-radius);
181
- background: var(--wm-form-controls-background);
182
- text-align: var(--wm-form-controls-text-align);
172
+ background-color: var(--wm-form-controls-background);
183
173
  color: var(--wm-form-controls-color);
184
174
  opacity: var(--wm-form-controls-opacity);
185
175
  font-size: var(--wm-form-controls-font-size);
186
176
  font-family: var(--wm-form-controls-font-family);
187
177
  font-weight: var(--wm-form-controls-font-weight);
188
- line-height: var(--wm-form-controls-font-line-height);
189
- letter-spacing: var(--wm-form-controls-font-letter-spacing);
190
178
  width: var(--wm-form-controls-min-width);
191
179
  }
192
180
 
@@ -197,15 +185,12 @@
197
185
  border-width: var(--wm-form-controls-border-width);
198
186
  border-color: var(--wm-form-controls-border-color);
199
187
  border-radius: var(--wm-form-controls-border-radius);
200
- background: var(--wm-form-controls-background);
201
- text-align: var(--wm-form-controls-text-align);
188
+ background-color: var(--wm-form-controls-background);
202
189
  color: var(--wm-form-controls-color);
203
190
  opacity: var(--wm-form-controls-opacity);
204
191
  font-size: var(--wm-form-controls-font-size);
205
192
  font-family: var(--wm-form-controls-font-family);
206
193
  font-weight: var(--wm-form-controls-font-weight);
207
- line-height: var(--wm-form-controls-font-line-height);
208
- letter-spacing: var(--wm-form-controls-font-letter-spacing);
209
194
  width: var(--wm-form-controls-min-width);
210
195
  }
211
196
 
package/src/tokens/mobile/components/chips/chips.json CHANGED
@@ -13,7 +13,7 @@
13
13
  },
14
14
  "active": {
15
15
  "selector": {
16
- "mobile": "-active-item, .app-chips-active-item-text, .app-chips-active-left-badge, .app-chips-active-right-badge, .app-chips-active-left-icon, .app-chips-active-right-icon"
16
+ "mobile": "-active-item, .app-chips-active-item-text"
17
17
  }
18
18
  }
19
19
  }
@@ -114,7 +114,7 @@
114
114
  },
115
115
  "style": {
116
116
  "value": "{border.style.base.value}",
117
- "type": "radius",
117
+ "type": "style",
118
118
  "attributes": {
119
119
  "subtype": "border-style",
120
120
  "description": "Controls the border style of the chips container. Acceptable values: solid (continuous line), dashed (dotted line), dotted (small dots), none (no border).<br>CSS variable: --wm-chips-list-border-style"
@@ -161,16 +161,6 @@
161
161
  }
162
162
  },
163
163
  "item": {
164
- "text": {
165
- "padding": {
166
- "value": "0px",
167
- "type": "space",
168
- "attributes": {
169
- "subtype": "space",
170
- "description": "Controls the padding of chip item label text (.app-chips-item-text).<br>CSS variable: --wm-chips-item-text-padding"
171
- }
172
- }
173
- },
174
164
  "height": {
175
165
  "value": "32px",
176
166
  "type": "space",
@@ -308,66 +298,6 @@
308
298
  }
309
299
  }
310
300
  },
311
- "left-icon": {
312
- "padding": {
313
- "value": "{space.0.value} 2px {space.0.value} {space.0.value}",
314
- "type": "space",
315
- "attributes": {
316
- "subtype": "space",
317
- "description": "Controls the padding of the left icon on chip items (.app-chips-left-icon, .app-chips-active-left-icon).<br>CSS variable: --wm-chips-left-icon-padding"
318
- }
319
- },
320
- "color": {
321
- "value": "{color.on-surface.@.value}",
322
- "type": "color",
323
- "attributes": {
324
- "subtype": "color",
325
- "description": "Sets the color of the left icon on chip items (.app-chips-left-icon, .app-chips-active-left-icon).<br>CSS variable: --wm-chips-left-icon-color"
326
- }
327
- }
328
- },
329
- "right-icon": {
330
- "color": {
331
- "value": "{color.on-surface.@.value}",
332
- "type": "color",
333
- "attributes": {
334
- "subtype": "color",
335
- "description": "Sets the color of the right icon on chip items (.app-chips-right-icon, .app-chips-active-right-icon).<br>CSS variable: --wm-chips-right-icon-color"
336
- }
337
- }
338
- },
339
- "left-badge": {
340
- "text": {
341
- "color": {
342
- "value": "{color.on-surface.@.value}",
343
- "type": "color",
344
- "attributes": {
345
- "subtype": "color",
346
- "description": "Sets the text color of the left badge on chip items (.app-chips-left-badge, .app-chips-active-left-badge).<br>CSS variable: --wm-chips-left-badge-text-color"
347
- }
348
- }
349
- }
350
- },
351
- "right-badge": {
352
- "text": {
353
- "color": {
354
- "value": "{color.on-surface.@.value}",
355
- "type": "color",
356
- "attributes": {
357
- "subtype": "color",
358
- "description": "Sets the text color of the right badge on chip items (.app-chips-right-badge, .app-chips-active-right-badge).<br>CSS variable: --wm-chips-right-badge-text-color"
359
- }
360
- },
361
- "margin-top": {
362
- "value": "0px",
363
- "type": "space",
364
- "attributes": {
365
- "subtype": "space",
366
- "description": "Controls the top margin of the right badge text on chip items (.app-chips-right-badge, .app-chips-active-right-badge).<br>CSS variable: --wm-chips-right-badge-text-margin-top"
367
- }
368
- }
369
- }
370
- },
371
301
  "states": {
372
302
  "disabled": {
373
303
  "opacity": {
package/src/tokens/mobile/components/dropdown-menu/dropdown-menu.json CHANGED
@@ -10,14 +10,6 @@
10
10
  "description": "Sets the background color of dropdown menus (lists of options that appear when users click on a button or link). This is the main background color that appears behind the dropdown menu items.<br>CSS variable: --wm-dropdown-menu-background"
11
11
  }
12
12
  },
13
- "box-shadow": {
14
- "value": "{elevation.shadow.2.value}",
15
- "type": "radius",
16
- "attributes": {
17
- "subtype": "elevation",
18
- "description": "Controls the drop shadow on the floating dropdown menu panel (Material 3 menu surface elevation; uses global elevation shadow level 2).<br>CSS variable: --wm-dropdown-menu-box-shadow"
19
- }
20
- },
21
13
  "padding": {
22
14
  "type": "space",
23
15
  "value": "{space.2.value} {space.0.value}",
package/src/tokens/mobile/components/form-controls/form-controls.json CHANGED
@@ -87,22 +87,6 @@
87
87
  "subtype": "font-family",
88
88
  "description": "Sets the typeface (font style) for form control text (the text that appear next to or above input fields). This determines whether the text appears in Roboto, Times New Roman, or other font styles.<br>CSS variable: --wm-form-controls-font-family"
89
89
  }
90
- },
91
- "line-height": {
92
- "value": "{body.large.line-height.value}",
93
- "type": "font",
94
- "attributes": {
95
- "subtype": "line-height",
96
- "description": "Controls the vertical spacing between lines when form control text wraps to multiple lines. This affects the height of each line of text inside input fields and text areas. Acceptable units: px.<br>CSS variable: --wm-form-controls-font-line-height"
97
- }
98
- },
99
- "letter-spacing": {
100
- "value": "{body.large.letter-spacing.value}",
101
- "type": "font",
102
- "attributes": {
103
- "subtype": "letter-spacing",
104
- "description": "Controls the horizontal spacing between individual characters in form control text. Positive values spread characters apart for increased readability, negative values bring them closer. Acceptable units: px, em.<br>CSS variable: --wm-form-controls-font-letter-spacing"
105
- }
106
90
  }
107
91
  },
108
92
  "padding": {
@@ -132,7 +116,7 @@
132
116
  },
133
117
  "style": {
134
118
  "value": "{border.style.base.value}",
135
- "type": "radius",
119
+ "type": "style",
136
120
  "attributes": {
137
121
  "subtype": "border-style",
138
122
  "description": "Sets the visual style of borders around form controls (input fields, text areas, select boxes, and other form elements). 'solid' creates a continuous line, 'dashed' creates a broken line, 'dotted' creates a dotted line, 'none' removes borders completely.<br>CSS variable: --wm-form-controls-border-style"
@@ -169,15 +153,7 @@
169
153
  "value": "{color.black.@.value}",
170
154
  "type": "color"
171
155
  },
172
- "text-align": {
173
- "value": "left",
174
- "type": "radius",
175
- "attributes": {
176
- "subtype": "text-align",
177
- "description": "Controls the horizontal alignment of text inside form controls (input fields where users enter data). 'left' aligns the text to the left, 'center' centers it, and 'right' aligns it to the right.<br>CSS variable: --wm-form-controls-text-align"
178
- }
179
- },
180
- "label": {
156
+ "label": {
181
157
  "color": {
182
158
  "value": "{color.on-surface.@.value}",
183
159
  "type": "color",
@@ -473,7 +449,7 @@
473
449
  },
474
450
  "style": {
475
451
  "value": "{border.style.base.value}",
476
- "type": "radius"
452
+ "type": "style"
477
453
  },
478
454
  "width": {
479
455
  "value": "0 0 {border.width.1.value} 0",
@@ -559,7 +535,7 @@
559
535
  },
560
536
  "style": {
561
537
  "value": "{border.style.base.value}",
562
- "type": "radius"
538
+ "type": "style"
563
539
  },
564
540
  "radius": {
565
541
  "value": "{radius.sm.value} {radius.sm.value} 0 0",
package/src/tokens/mobile/components/icon/icon.json CHANGED
@@ -80,7 +80,7 @@
80
80
  "type": "space",
81
81
  "attributes": {
82
82
  "subtype": "icon-size",
83
- "description": "Controls the minimum width of the icon when it's rendered as an image (via an icon URL), ensuring it's always wide enough to be visible and clickable. This property applies only to image-based icons and has no effect on icons.<br>CSS variable: --wm-icon-min-width"
83
+ "description": "Controls the minimum width of icon symbols to ensure they're always wide enough to be visible and clickable, even when they contain small symbols.<br>CSS variable: --wm-icon-min-width"
84
84
  }
85
85
  },
86
86
  "width": {
@@ -88,7 +88,7 @@
88
88
  "type": "space",
89
89
  "attributes": {
90
90
  "subtype": "icon-size",
91
- "description": "Controls how wide the icon appears when it's rendered as an image (via an icon URL). This determines the horizontal space the icon image takes up. This property applies only to image-based icons and has no effect on icons.<br>CSS variable: --wm-icon-width"
91
+ "description": "Controls how wide icon symbols appear (like arrows, hearts, settings, etc.). This determines the horizontal space each icon takes up.<br>CSS variable: --wm-icon-width"
92
92
  }
93
93
  },
94
94
  "height": {
@@ -96,7 +96,7 @@
96
96
  "type": "space",
97
97
  "attributes": {
98
98
  "subtype": "icon-size",
99
- "description": "Controls how tall the icon appears when it's rendered as an image (via an icon URL). This determines the vertical space the icon image takes up. This property applies only to image-based icons and has no effect on icons.<br>CSS variable: --wm-icon-height"
99
+ "description": "Controls how tall icon symbols appear (like arrows, hearts, settings, etc.). This determines the vertical space each icon takes up.<br>CSS variable: --wm-icon-height"
100
100
  }
101
101
  },
102
102
  "gap": {
package/src/tokens/mobile/components/label/label.json CHANGED
@@ -177,14 +177,6 @@
177
177
  "description": "Controls the horizontal spacing between individual letters in label text. Positive values spread letters apart, negative values bring them closer together.<br>CSS variable: --wm-label-letter-spacing"
178
178
  }
179
179
  },
180
- "text-align": {
181
- "value": "left",
182
- "type": "radius",
183
- "attributes": {
184
- "subtype": "text-align",
185
- "description": "Controls the horizontal alignment of label text. 'left' aligns the text to the left, 'center' centers it, and 'right' aligns it to the right.<br>CSS variable: --wm-label-text-align"
186
- }
187
- },
188
180
  "asterisk": {
189
181
  "color": {
190
182
  "value": "{color.error.@.value}",
package/src/tokens/mobile/components/switch/switch.json CHANGED
@@ -128,30 +128,6 @@
128
128
  }
129
129
  }
130
130
  },
131
- "first-button": {
132
- "border": {
133
- "radius": {
134
- "value": "1px 0px 0px 1px",
135
- "type": "radius",
136
- "attributes": {
137
- "subtype": "radius",
138
- "description": "Controls the corner rounding of the first switch button (top-left, top-right, bottom-right, bottom-left). The right corners are squared so it joins seamlessly with the next button. Acceptable units: px.<br>CSS variable: --wm-switch-first-button-border-radius"
139
- }
140
- }
141
- }
142
- },
143
- "last-button": {
144
- "border": {
145
- "radius": {
146
- "value": "0px 1px 1px 0px",
147
- "type": "radius",
148
- "attributes": {
149
- "subtype": "radius",
150
- "description": "Controls the corner rounding of the last switch button (top-left, top-right, bottom-right, bottom-left). The left corners are squared so it joins seamlessly with the previous button. Acceptable units: px.<br>CSS variable: --wm-switch-last-button-border-radius"
151
- }
152
- }
153
- }
154
- },
155
131
  "states": {
156
132
  "selected": {
157
133
  "button": {