@wavemaker/foundation-css 11.15.5-rc.647638 → 11.15.5-rc.647771

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 (31) hide show
  1. package/cjs/foundation-css.cjs +62 -81
  2. package/cjs/src_tokens_mobile_components_chips_chips_json.foundation-css.cjs +1 -1
  3. package/cjs/src_tokens_mobile_components_dropdown-menu_dropdown-menu_json.foundation-css.cjs +1 -1
  4. package/cjs/src_tokens_mobile_components_form-controls_form-controls_json.foundation-css.cjs +1 -1
  5. package/cjs/src_tokens_mobile_components_icon_icon_json.foundation-css.cjs +1 -1
  6. package/cjs/src_tokens_mobile_components_label_label_json.foundation-css.cjs +1 -1
  7. package/cjs/src_tokens_mobile_components_switch_switch_json.foundation-css.cjs +1 -1
  8. package/cjs/src_tokens_mobile_components_tabs_tabs_json.foundation-css.cjs +1 -1
  9. package/npm-shrinkwrap.json +348 -306
  10. package/package-lock.json +348 -306
  11. package/package.json +1 -1
  12. package/src/styles/mobile/components/basic/icon.less +6 -4
  13. package/src/styles/mobile/components/basic/label.less +46 -4
  14. package/src/styles/mobile/components/container/tabs/tab-header.less +15 -3
  15. package/src/styles/mobile/components/data/form.less +14 -0
  16. package/src/styles/mobile/components/input/chips.less +37 -0
  17. package/src/styles/mobile/components/input/select.less +29 -1
  18. package/src/styles/mobile/components/input/switch.less +4 -4
  19. package/src/styles/mobile/components/navigation/menu.less +1 -0
  20. package/src/styles/mobile/components/tokens.light.css +18 -1
  21. package/src/styles/mobile/components/variables/chips.variant.less +5 -1
  22. package/src/styles/mobile/studio/basic/icon.less +0 -3
  23. package/src/styles/mobile/studio/container/tabs.less +5 -1
  24. package/src/styles/mobile/studio/input/form.less +20 -5
  25. package/src/tokens/mobile/components/chips/chips.json +72 -2
  26. package/src/tokens/mobile/components/dropdown-menu/dropdown-menu.json +8 -0
  27. package/src/tokens/mobile/components/form-controls/form-controls.json +28 -4
  28. package/src/tokens/mobile/components/icon/icon.json +3 -3
  29. package/src/tokens/mobile/components/label/label.json +8 -0
  30. package/src/tokens/mobile/components/switch/switch.json +24 -0
  31. package/src/tokens/mobile/components/tabs/tabs.json +27 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wavemaker/foundation-css",
3
- "version": "11.15.5-rc.647638",
3
+ "version": "11.15.5-rc.647771",
4
4
  "description": "Foundation of CSS used in WaveMaker with custom widgets.",
5
5
  "type": "module",
6
6
  "main": "foundation.css",
package/src/styles/mobile/components/basic/icon.less CHANGED
@@ -12,11 +12,13 @@
12
12
 
13
13
  .app-icon-shape {
14
14
  padding: 0;
15
- min-width: var(--wm-icon-min-width);
16
- width: var(--wm-icon-width);
17
- height: var(--wm-icon-height);
18
15
  font-size: var(--wm-icon-font-size);
19
- line-height: var(--wm-icon-font-size);
16
+ }
17
+
18
+ .app-icon-image {
19
+ min-width: var(--wm-icon-min-width);
20
+ width: var(--wm-icon-width);
21
+ height: var(--wm-icon-height);
20
22
  }
21
23
 
22
24
  @import (optional) url('../variables/icon.variant.less');
package/src/styles/mobile/components/basic/label.less CHANGED
@@ -20,6 +20,7 @@
20
20
  font-weight: var(--wm-label-font-weight);
21
21
  font-family: var(--wm-label-font-family);
22
22
  color: var(--wm-label-color);
23
+ text-align: var(--wm-label-text-align);
23
24
  }
24
25
 
25
26
  .app-label-asterisk {
@@ -31,11 +32,15 @@
31
32
  line-height: var(--wm-label-line-height);
32
33
  letter-spacing: var(--wm-label-letter-spacing);
33
34
  color: var(--wm-label-color);
35
+ text-decoration: var(--wm-label-text-decoration);
36
+ text-align: var(--wm-label-text-align);
34
37
  }
35
38
 
36
39
  .media-heading.app-label-text {
37
40
  font-size: var(--wm-label-font-size);
38
41
  color: var(--wm-label-color);
42
+ text-decoration: var(--wm-label-text-decoration);
43
+ text-align: var(--wm-label-text-align);
39
44
  }
40
45
 
41
46
  .h1.app-label-text {
@@ -46,6 +51,8 @@
46
51
  line-height: var(--wm-label-line-height);
47
52
  letter-spacing: var(--wm-label-letter-spacing);
48
53
  margin: var(--wm-space-0);
54
+ text-decoration: var(--wm-label-text-decoration);
55
+ text-align: var(--wm-label-text-align);
49
56
  }
50
57
 
51
58
  .h2.app-label-text {
@@ -56,6 +63,8 @@
56
63
  line-height: var(--wm-label-line-height);
57
64
  letter-spacing: var(--wm-label-letter-spacing);
58
65
  margin: var(--wm-space-0);
66
+ text-decoration: var(--wm-label-text-decoration);
67
+ text-align: var(--wm-label-text-align);
59
68
  }
60
69
 
61
70
  .h3.app-label-text {
@@ -66,6 +75,8 @@
66
75
  line-height: var(--wm-label-line-height);
67
76
  letter-spacing: var(--wm-label-letter-spacing);
68
77
  margin: var(--wm-space-0);
78
+ text-decoration: var(--wm-label-text-decoration);
79
+ text-align: var(--wm-label-text-align);
69
80
  }
70
81
 
71
82
  .h4.app-label-text {
@@ -76,6 +87,8 @@
76
87
  line-height: var(--wm-label-line-height);
77
88
  letter-spacing: var(--wm-label-letter-spacing);
78
89
  margin: var(--wm-space-0);
90
+ text-decoration: var(--wm-label-text-decoration);
91
+ text-align: var(--wm-label-text-align);
79
92
  }
80
93
 
81
94
  .h5.app-label-text {
@@ -86,6 +99,8 @@
86
99
  line-height: var(--wm-label-line-height);
87
100
  letter-spacing: var(--wm-label-letter-spacing);
88
101
  margin: var(--wm-space-0);
102
+ text-decoration: var(--wm-label-text-decoration);
103
+ text-align: var(--wm-label-text-align);
89
104
  }
90
105
 
91
106
  .h6.app-label-text {
@@ -96,6 +111,8 @@
96
111
  line-height: var(--wm-label-line-height);
97
112
  letter-spacing: var(--wm-label-letter-spacing);
98
113
  margin: var(--wm-space-0);
114
+ text-decoration: var(--wm-label-text-decoration);
115
+ text-align: var(--wm-label-text-align);
99
116
  }
100
117
 
101
118
  .text-primary .app-label {
@@ -104,16 +121,15 @@
104
121
  border-width: var(--wm-label-border-width);
105
122
  border-style: var(--wm-label-border-style);
106
123
  border-color: var(--wm-label-border-color);
107
- padding-top: var(--wm-label-padding-top);
108
- padding-bottom: var(--wm-label-padding-bottom);
109
- padding-left: var(--wm-label-padding-left);
110
- padding-right: var(--wm-label-padding-right);
124
+ padding: var(--wm-label-padding);
111
125
  }
112
126
 
113
127
  .text-primary .app-label-text {
114
128
  color: var(--wm-label-color);
115
129
  line-height: var(--wm-label-line-height);
116
130
  letter-spacing: var(--wm-label-letter-spacing);
131
+ text-decoration: var(--wm-label-text-decoration);
132
+ text-align: var(--wm-label-text-align);
117
133
  }
118
134
 
119
135
  .text-secondary .app-label {
@@ -132,6 +148,8 @@
132
148
  color: var(--wm-label-color);
133
149
  line-height: var(--wm-label-line-height);
134
150
  letter-spacing: var(--wm-label-letter-spacing);
151
+ text-decoration: var(--wm-label-text-decoration);
152
+ text-align: var(--wm-label-text-align);
135
153
  }
136
154
 
137
155
  .text-success .app-label {
@@ -150,6 +168,8 @@
150
168
  color: var(--wm-label-color);
151
169
  line-height: var(--wm-label-line-height);
152
170
  letter-spacing: var(--wm-label-letter-spacing);
171
+ text-decoration: var(--wm-label-text-decoration);
172
+ text-align: var(--wm-label-text-align);
153
173
  }
154
174
 
155
175
  .text-warning .app-label {
@@ -168,6 +188,8 @@
168
188
  color: var(--wm-label-color);
169
189
  line-height: var(--wm-label-line-height);
170
190
  letter-spacing: var(--wm-label-letter-spacing);
191
+ text-decoration: var(--wm-label-text-decoration);
192
+ text-align: var(--wm-label-text-align);
171
193
  }
172
194
 
173
195
  .text-danger .app-label {
@@ -186,6 +208,8 @@
186
208
  color: var(--wm-label-color);
187
209
  line-height: var(--wm-label-line-height);
188
210
  letter-spacing: var(--wm-label-letter-spacing);
211
+ text-decoration: var(--wm-label-text-decoration);
212
+ text-align: var(--wm-label-text-align);
189
213
  }
190
214
 
191
215
  .text-info .app-label {
@@ -204,6 +228,8 @@
204
228
  color: var(--wm-label-color);
205
229
  line-height: var(--wm-label-line-height);
206
230
  letter-spacing: var(--wm-label-letter-spacing);
231
+ text-decoration: var(--wm-label-text-decoration);
232
+ text-align: var(--wm-label-text-align);
207
233
  }
208
234
 
209
235
  .text-muted .app-label {
@@ -222,6 +248,8 @@
222
248
  color: var(--wm-label-color);
223
249
  line-height: var(--wm-label-line-height);
224
250
  letter-spacing: var(--wm-label-letter-spacing);
251
+ text-decoration: var(--wm-label-text-decoration);
252
+ text-align: var(--wm-label-text-align);
225
253
  }
226
254
 
227
255
  //no problem
@@ -239,6 +267,8 @@
239
267
  font-weight: var(--wm-label-font-weight);
240
268
  line-height: var(--wm-label-line-height);
241
269
  letter-spacing: var(--wm-label-letter-spacing);
270
+ text-decoration: var(--wm-label-text-decoration);
271
+ text-align: var(--wm-label-text-align);
242
272
  }
243
273
 
244
274
  .label-secondary .app-label {
@@ -255,6 +285,8 @@
255
285
  font-weight: var(--wm-label-font-weight);
256
286
  line-height: var(--wm-label-line-height);
257
287
  letter-spacing: var(--wm-label-letter-spacing);
288
+ text-decoration: var(--wm-label-text-decoration);
289
+ text-align: var(--wm-label-text-align);
258
290
  }
259
291
 
260
292
  .label-success .app-label {
@@ -272,6 +304,8 @@
272
304
  font-weight: var(--wm-label-font-weight);
273
305
  line-height: var(--wm-label-line-height);
274
306
  letter-spacing: var(--wm-label-letter-spacing);
307
+ text-decoration: var(--wm-label-text-decoration);
308
+ text-align: var(--wm-label-text-align);
275
309
  }
276
310
 
277
311
  .label-warning .app-label {
@@ -288,6 +322,8 @@
288
322
  font-weight: var(--wm-label-font-weight);
289
323
  line-height: var(--wm-label-line-height);
290
324
  letter-spacing: var(--wm-label-letter-spacing);
325
+ text-decoration: var(--wm-label-text-decoration);
326
+ text-align: var(--wm-label-text-align);
291
327
  }
292
328
 
293
329
  .label-danger .app-label {
@@ -304,6 +340,8 @@
304
340
  font-weight: var(--wm-label-font-weight);
305
341
  line-height: var(--wm-label-line-height);
306
342
  letter-spacing: var(--wm-label-letter-spacing);
343
+ text-decoration: var(--wm-label-text-decoration);
344
+ text-align: var(--wm-label-text-align);
307
345
  }
308
346
 
309
347
  .label-info .app-label {
@@ -320,6 +358,8 @@
320
358
  font-weight: var(--wm-label-font-weight);
321
359
  line-height: var(--wm-label-line-height);
322
360
  letter-spacing: var(--wm-label-letter-spacing);
361
+ text-decoration: var(--wm-label-text-decoration);
362
+ text-align: var(--wm-label-text-align);
323
363
  }
324
364
 
325
365
  .label-muted .app-label {
@@ -336,6 +376,8 @@
336
376
  font-weight: var(--wm-label-font-weight);
337
377
  line-height: var(--wm-label-line-height);
338
378
  letter-spacing: var(--wm-label-letter-spacing);
379
+ text-decoration: var(--wm-label-text-decoration);
380
+ text-align: var(--wm-label-text-align);
339
381
  }
340
382
 
341
383
  @import (optional) url('../variables/label.variant.less');
package/src/styles/mobile/components/container/tabs/tab-header.less CHANGED
@@ -6,6 +6,7 @@
6
6
  border-style: var(--wm-tabs-heading-border-style);
7
7
  border-width: var(--wm-tabs-heading-border-width);
8
8
  border-color: var(--wm-tabs-heading-border-color);
9
+ gap: var(--wm-tabs-heading-gap);
9
10
  }
10
11
 
11
12
  .app-tabheader-item {
@@ -15,6 +16,8 @@
15
16
  border-color: var(--wm-tabs-item-heading-border-color);
16
17
  border-radius: var(--wm-tabs-item-heading-border-radius);
17
18
  background-color: var(--wm-tabs-item-heading-background);
19
+ min-height: var(--wm-tabs-item-heading-min-height);
20
+ gap: var(--wm-tabs-item-heading-gap);
18
21
  }
19
22
 
20
23
  .app-tabheader-active-item {
@@ -24,7 +27,10 @@
24
27
  border-color: var(--wm-tabs-item-heading-border-color);
25
28
  border-radius: var(--wm-tabs-item-heading-border-radius);
26
29
  background-color: var(--wm-tabs-item-heading-background);
30
+ min-height: var(--wm-tabs-item-heading-min-height);
31
+ gap: var(--wm-tabs-item-heading-gap);
27
32
  }
33
+
28
34
  .app-tabheader-item-text {
29
35
  font-size: var(--wm-tabs-item-heading-font-size);
30
36
  font-weight: var(--wm-tabs-item-heading-font-weight);
@@ -32,6 +38,7 @@
32
38
  line-height: var(--wm-tabs-item-heading-line-height);
33
39
  color: var(--wm-tabs-item-heading-text-color);
34
40
  }
41
+
35
42
  .app-tabheader-active-item-text {
36
43
  font-size: var(--wm-tabs-item-heading-font-size);
37
44
  font-weight: var(--wm-tabs-item-heading-font-weight);
@@ -52,11 +59,16 @@
52
59
  font-size: var(--wm-tabs-item-heading-icon-size);
53
60
  height: var(--wm-tabs-item-heading-icon-height);
54
61
  width: var(--wm-tabs-item-heading-icon-width);
55
-
62
+
56
63
  }
57
64
 
58
- .app-tabheader-active-indicator{
59
- margin: var(--wm-tabs-item-heading-indicator-margin);
65
+ .app-tabheader-active-indicator {
66
+ margin-top: var(--wm-tabs-item-heading-indicator-margin-top);
67
+ border-top-left-radius: var(--wm-tabs-item-heading-indicator-border-top-left-radius);
68
+ border-top-right-radius: var(--wm-tabs-item-heading-indicator-border-top-right-radius);
69
+ background-color: var(--wm-tabs-item-heading-indicator-background);
70
+ border-top-left-radius: var(--wm-tabs-item-heading-indicator-border-top-left-radius);
71
+ border-top-right-radius: var(--wm-tabs-item-heading-indicator-border-top-right-radius);
60
72
  background-color: var(--wm-tabs-item-heading-indicator-background);
61
73
  height: var(--wm-tabs-item-heading-indicator-height);
62
74
  }
package/src/styles/mobile/components/data/form.less CHANGED
@@ -156,6 +156,9 @@
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);
159
162
  }
160
163
 
161
164
  .app-input-text{
@@ -163,6 +166,8 @@
163
166
  font-size: var(--wm-form-controls-font-size);
164
167
  font-family: var(--wm-form-controls-font-family);
165
168
  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);
166
171
  }
167
172
 
168
173
  .app-input-focused {
@@ -187,6 +192,9 @@
187
192
  font-family: var(--wm-form-controls-font-family);
188
193
  font-weight: var(--wm-form-controls-font-weight);
189
194
  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);
190
198
  }
191
199
 
192
200
  .app-input-disabled {
@@ -207,6 +215,9 @@
207
215
  border-left-color: var(--wm-form-controls-border-color);
208
216
  border-bottom-color: var(--wm-form-controls-border-color);
209
217
  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);
210
221
  }
211
222
 
212
223
  .app-select-disabled{
@@ -222,6 +233,9 @@
222
233
  font-family: var(--wm-form-controls-font-family);
223
234
  font-weight: var(--wm-form-controls-font-weight);
224
235
  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);
225
239
  }
226
240
 
227
241
  .app-input.floatingLabel {
package/src/styles/mobile/components/input/chips.less CHANGED
@@ -59,6 +59,7 @@
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);
62
63
  }
63
64
 
64
65
  .app-chips-active-item {
@@ -96,3 +97,39 @@
96
97
  height: var(--wm-chips-item-avatar-size);
97
98
  border-radius: var( --wm-chips-item-avatar-radius);
98
99
  }
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,6 +37,13 @@
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
+
40
47
  .app-select-item-text {
41
48
  font-size: var(--wm-select-modal-text-font-size);
42
49
  color: var(--wm-select-modal-text-color);
@@ -66,7 +73,28 @@
66
73
  align-items: center;
67
74
  }
68
75
 
69
- .app-select-check-icon.text {
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 {
70
98
  font-size: var(--wm-select-check-icon-font-size);
71
99
  color: var(--wm-select-check-icon-color);
72
100
  }
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-top-left-radius: var(--wm-switch-button-border-radius);
4
- border-bottom-left-radius: var(--wm-switch-button-border-radius);
3
+ border-radius: var(--wm-switch-first-button-border-radius);
4
+ border-width: var(--wm-switch-button-border-width);
5
5
  }
6
6
 
7
7
  .app-switch-last-btn{
8
- border-top-right-radius: var(--wm-switch-button-border-radius);
9
- border-bottom-right-radius: var(--wm-switch-button-border-radius);
8
+ border-radius: var(--wm-switch-last-button-border-radius);
9
+ border-width: var(--wm-switch-button-border-width);
10
10
  }
11
11
 
12
12
  .app-switch-btn {
package/src/styles/mobile/components/navigation/menu.less CHANGED
@@ -31,6 +31,7 @@
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);
34
35
  }
35
36
 
36
37
  .app-menu-item.root {
package/src/styles/mobile/components/tokens.light.css CHANGED
@@ -98,7 +98,9 @@
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;
101
102
  --wm-chips-item-height: 32px;
103
+ --wm-chips-right-badge-text-margin-top: 0px;
102
104
  --wm-container-border-color: transparent;
103
105
  --wm-container-background-color: transparent;
104
106
  --wm-container-box-shadow: none;
@@ -118,6 +120,7 @@
118
120
  --wm-fileupload-ripple-color: transparent;
119
121
  --wm-form-controls-min-height: 48px;
120
122
  --wm-form-controls-min-width: 160px;
123
+ --wm-form-controls-text-align: left;
121
124
  --wm-grid-layout-width: 100%;
122
125
  --wm-icon-size: 24px;
123
126
  --wm-icon-size-xs: 12px;
@@ -128,6 +131,7 @@
128
131
  --wm-icon-size-3x: 42px;
129
132
  --wm-icon-size-4x: 48px;
130
133
  --wm-icon-size-5x: 54px;
134
+ --wm-label-text-align: left;
131
135
  --wm-label-background-color: none;
132
136
  --wm-label-large-font-size: 14px;
133
137
  --wm-label-large-line-height: 20px;
@@ -218,6 +222,8 @@
218
222
  --wm-switch-button-text-transform: capitalize;
219
223
  --wm-switch-button-border-width: 1px;
220
224
  --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;
221
227
  --wm-tabbar-height: 80px;
222
228
  --wm-tabbar-menu-height: 100%;
223
229
  --wm-tabbar-more-menu-width: 100%;
@@ -227,6 +233,8 @@
227
233
  --wm-tabbar-item-background-color: transparent;
228
234
  --wm-tabbar-item-opacity: 1;
229
235
  --wm-tabs-border-color: transparent;
236
+ --wm-tabs-item-heading-min-height: 48px;
237
+ --wm-tabs-item-heading-indicator-margin-top: -2px;
230
238
  --wm-tabs-item-heading-indicator-height: 3px;
231
239
  --wm-tabs-item-icon-display: inline-flex;
232
240
  --wm-tabs-item-icon-height: 1;
@@ -629,6 +637,11 @@
629
637
  --wm-chips-item-letter-spacing: var(--wm-label-large-letter-spacing);
630
638
  --wm-chips-item-avatar-size: var(--wm-icon-size);
631
639
  --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);
632
645
  --wm-container-border-width: var(--wm-border-width-0);
633
646
  --wm-container-border-radius: var(--wm-radius-none);
634
647
  --wm-container-padding: var(--wm-space-0);
@@ -687,6 +700,8 @@
687
700
  --wm-form-controls-field-box-shadow: var(--wm-elevation-shadow-none);
688
701
  --wm-form-controls-field-radius: var(--wm-radius-none);
689
702
  --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);
690
705
  --wm-form-controls-padding: var(--wm-space-2);
691
706
  --wm-form-controls-border-color: var(--wm-color-outline);
692
707
  --wm-form-controls-border-radius: var(--wm-radius-sm);
@@ -1089,6 +1104,7 @@
1089
1104
  --wm-tabs-border-radius: var(--wm-radius-sm);
1090
1105
  --wm-tabs-border-width: var(--wm-border-width-1);
1091
1106
  --wm-tabs-heading-background: var(--wm-color-surface);
1107
+ --wm-tabs-heading-gap: var(--wm-space-0);
1092
1108
  --wm-tabs-heading-border-radius: var(--wm-radius-sm);
1093
1109
  --wm-tabs-heading-border-color: var(--wm-color-surface);
1094
1110
  --wm-tabs-heading-border-width: var(--wm-border-width-1);
@@ -1096,13 +1112,13 @@
1096
1112
  --wm-tabs-item-heading-border-color: var(--wm-color-surface);
1097
1113
  --wm-tabs-item-heading-border-width: var(--wm-border-width-0);
1098
1114
  --wm-tabs-item-heading-padding: var(--wm-space-2);
1115
+ --wm-tabs-item-heading-gap: var(--wm-space-0);
1099
1116
  --wm-tabs-item-heading-font-size: var(--wm-h6-font-size);
1100
1117
  --wm-tabs-item-heading-line-height: var(--wm-h6-line-height);
1101
1118
  --wm-tabs-item-heading-background: var(--wm-color-surface);
1102
1119
  --wm-tabs-item-heading-text-color: var(--wm-color-outline);
1103
1120
  --wm-tabs-item-heading-icon-size: var(--wm-icon-size);
1104
1121
  --wm-tabs-item-heading-icon-color: var(--wm-color-outline);
1105
- --wm-tabs-item-heading-indicator-margin: var(--wm-space-0);
1106
1122
  --wm-tabs-item-heading-indicator-background: var(--wm-color-primary);
1107
1123
  --wm-tile-background-color: var(--wm-color-surface-container-low);
1108
1124
  --wm-tile-color: var(--wm-color-on-surface-variant);
@@ -1262,6 +1278,7 @@
1262
1278
  --wm-datetime-button-border-style: var(--wm-border-style-base);
1263
1279
  --wm-datetime-text-font-weight: var(--wm-body-medium-font-weight);
1264
1280
  --wm-datetime-selected-text-font-weight: var(--wm-body-medium-font-weight);
1281
+ --wm-dropdown-menu-box-shadow: var(--wm-elevation-shadow-2);
1265
1282
  --wm-dropdown-menu-item-font-family: var(--wm-body-large-font-family);
1266
1283
  --wm-dropdown-menu-item-font-weight: var(--wm-body-large-font-weight);
1267
1284
  --wm-form-controls-font-weight: var(--wm-body-large-font-weight);
package/src/styles/mobile/components/variables/chips.variant.less CHANGED
@@ -4,7 +4,11 @@
4
4
  }
5
5
 
6
6
  .app-chips-active-item,
7
- .app-chips-active-item-text {
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 {
8
12
  --wm-chips-color: var(--wm-color-on-surface-variant);
9
13
  --wm-chips-background-color: var(--wm-color-secondary-container);
10
14
  --wm-chips-item-border-color: var(--wm-color-secondary-container);
package/src/styles/mobile/studio/basic/icon.less CHANGED
@@ -14,8 +14,5 @@
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);
20
17
  }
21
18
 
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,6 +31,9 @@
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
+
34
37
  .tab-heading {
35
38
 
36
39
 
@@ -60,6 +63,7 @@
60
63
  background: var(--wm-tabs-item-heading-indicator-background);
61
64
  transform: scale(0);
62
65
  transition: all 0.2s ease-in-out;
66
+ margin-top: var(--wm-tabs-item-heading-indicator-margin-top);
63
67
  }
64
68
  }
65
69
 
package/src/styles/mobile/studio/input/form.less CHANGED
@@ -55,11 +55,14 @@
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-color: var(--wm-form-controls-background);
58
+ background: var(--wm-form-controls-background);
59
+ text-align: var(--wm-form-controls-text-align);
59
60
  color: var(--wm-form-controls-color);
60
61
  font-size: var(--wm-form-controls-font-size);
61
62
  font-family: var(--wm-form-controls-font-family);
62
63
  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);
63
66
  }
64
67
 
65
68
  .wm-app .app-form > .panel-body{
@@ -101,12 +104,15 @@
101
104
  border-width: var(--wm-form-controls-border-width);
102
105
  border-color: var(--wm-form-controls-border-color);
103
106
  border-radius: var(--wm-form-controls-border-radius);
104
- background-color: var(--wm-form-controls-background);
107
+ background: var(--wm-form-controls-background);
108
+ text-align: var(--wm-form-controls-text-align);
105
109
  color: var(--wm-form-controls-color);
106
110
  opacity: var(--wm-form-controls-opacity);
107
111
  font-size: var(--wm-form-controls-font-size);
108
112
  font-family: var(--wm-form-controls-font-family);
109
113
  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);
110
116
  width: var(--wm-form-controls-min-width);
111
117
  }
112
118
 
@@ -124,12 +130,15 @@
124
130
  border-width: var(--wm-form-controls-border-width);
125
131
  border-color: var(--wm-form-controls-border-color);
126
132
  border-radius: var(--wm-form-controls-border-radius);
127
- background-color: var(--wm-form-controls-background);
133
+ background: var(--wm-form-controls-background);
134
+ text-align: var(--wm-form-controls-text-align);
128
135
  color: var(--wm-form-controls-color);
129
136
  opacity: var(--wm-form-controls-opacity);
130
137
  font-size: var(--wm-form-controls-font-size);
131
138
  font-family: var(--wm-form-controls-font-family);
132
139
  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);
133
142
  width: var(--wm-form-controls-min-width);
134
143
  }
135
144
 
@@ -169,12 +178,15 @@
169
178
  border-width: var(--wm-form-controls-border-width);
170
179
  border-color: var(--wm-form-controls-border-color);
171
180
  border-radius: var(--wm-form-controls-border-radius);
172
- background-color: var(--wm-form-controls-background);
181
+ background: var(--wm-form-controls-background);
182
+ text-align: var(--wm-form-controls-text-align);
173
183
  color: var(--wm-form-controls-color);
174
184
  opacity: var(--wm-form-controls-opacity);
175
185
  font-size: var(--wm-form-controls-font-size);
176
186
  font-family: var(--wm-form-controls-font-family);
177
187
  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);
178
190
  width: var(--wm-form-controls-min-width);
179
191
  }
180
192
 
@@ -185,12 +197,15 @@
185
197
  border-width: var(--wm-form-controls-border-width);
186
198
  border-color: var(--wm-form-controls-border-color);
187
199
  border-radius: var(--wm-form-controls-border-radius);
188
- background-color: var(--wm-form-controls-background);
200
+ background: var(--wm-form-controls-background);
201
+ text-align: var(--wm-form-controls-text-align);
189
202
  color: var(--wm-form-controls-color);
190
203
  opacity: var(--wm-form-controls-opacity);
191
204
  font-size: var(--wm-form-controls-font-size);
192
205
  font-family: var(--wm-form-controls-font-family);
193
206
  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);
194
209
  width: var(--wm-form-controls-min-width);
195
210
  }
196
211