@wavemaker/foundation-css 11.15.6-rc.647667 → 11.16.0-rc.647821

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 (33) hide show
  1. package/cjs/foundation-css.cjs +27 -61
  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/foundation/foundation.css +4 -2
  10. package/foundation/foundation.min.css +1 -1
  11. package/npm-shrinkwrap.json +160 -227
  12. package/package-lock.json +160 -227
  13. package/package.json +2 -2
  14. package/src/styles/mobile/components/basic/icon.less +6 -4
  15. package/src/styles/mobile/components/basic/label.less +46 -4
  16. package/src/styles/mobile/components/container/tabs/tab-header.less +15 -3
  17. package/src/styles/mobile/components/data/form.less +14 -0
  18. package/src/styles/mobile/components/input/chips.less +37 -0
  19. package/src/styles/mobile/components/input/select.less +29 -1
  20. package/src/styles/mobile/components/input/switch.less +4 -4
  21. package/src/styles/mobile/components/navigation/menu.less +1 -0
  22. package/src/styles/mobile/components/tokens.light.css +18 -1
  23. package/src/styles/mobile/components/variables/chips.variant.less +5 -1
  24. package/src/styles/mobile/studio/basic/icon.less +0 -3
  25. package/src/styles/mobile/studio/container/tabs.less +5 -1
  26. package/src/styles/mobile/studio/input/form.less +20 -5
  27. package/src/tokens/mobile/components/chips/chips.json +72 -2
  28. package/src/tokens/mobile/components/dropdown-menu/dropdown-menu.json +8 -0
  29. package/src/tokens/mobile/components/form-controls/form-controls.json +28 -4
  30. package/src/tokens/mobile/components/icon/icon.json +3 -3
  31. package/src/tokens/mobile/components/label/label.json +8 -0
  32. package/src/tokens/mobile/components/switch/switch.json +24 -0
  33. 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.6-rc.647667",
3
+ "version": "11.16.0-rc.647821",
4
4
  "description": "Foundation of CSS used in WaveMaker with custom widgets.",
5
5
  "type": "module",
6
6
  "main": "foundation.css",
@@ -52,6 +52,6 @@
52
52
  "license": "ISC",
53
53
  "dependencies": {
54
54
  "chroma-js": "^3.1.2",
55
- "ajv": "8.17.1"
55
+ "ajv": "8.20.0"
56
56
  }
57
57
  }
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