@wavemaker/foundation-css 11.15.4-rc.647493 → 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/select/select.json CHANGED
@@ -1,13 +1,15 @@
1
1
  {
2
2
  "select": {
3
3
  "meta": {
4
- "selector": {
5
- "mobile": ".app-select"
6
- },
7
- "states": {
8
- "active": {
9
- "selector": {
10
- "mobile": "-active-item"
4
+ "mapping": {
5
+ "selector": {
6
+ "mobile": ".app-select"
7
+ },
8
+ "states": {
9
+ "active": {
10
+ "selector": {
11
+ "mobile": "-active-item, .app-select-active-item-text"
12
+ }
11
13
  }
12
14
  }
13
15
  }
@@ -39,56 +41,56 @@
39
41
  "description": "Sets the color of icons (symbols like arrows, hearts, settings, etc.). This determines what color the icon symbols appear in, which should contrast well with the background for visibility.<br>CSS variable: --wm-icon-color"
40
42
  }
41
43
  },
42
- "height": {
43
- "value": "24px",
44
- "type": "space",
45
- "attributes": {
46
- "subtype": "space",
47
- "description": "Controls the height.<br>CSS variable: --wm-selec-icon-height"
48
- }
49
- },
50
- "padding": {
51
- "value": "{space.1.value}",
52
- "type": "space",
53
- "attributes": {
54
- "subtype": "space",
55
- "description": "Controls the padding of arrow button icon This creates breathing room on the arrow button. Acceptable units: px.<br>CSS variable: --wm-select-arrow-button-icon-padding"
56
- }
57
- },
58
- "border": {
59
- "radius": {
60
- "value": "{radius.none.value}",
61
- "type": "radius",
44
+ "height": {
45
+ "value": "24px",
46
+ "type": "space",
62
47
  "attributes": {
63
- "subtype": "radius",
64
- "description": "Controls the corner rounding of select modal content. This makes the select modal content appear with rounded corners for a softer appearance.<br>CSS variable: --wm-select-arrow-button-icon-border-radius"
48
+ "subtype": "space",
49
+ "description": "Controls the height.<br>CSS variable: --wm-selec-icon-height"
65
50
  }
66
51
  },
67
- "width": {
68
- "value": "{border.width.0.value}",
69
- "type": "border",
52
+ "padding": {
53
+ "value": "{space.1.value}",
54
+ "type": "space",
70
55
  "attributes": {
71
- "subtype": "border-width",
72
- "description": "Controls the thickness of the border around select modal content. This determines how thick the outline appears around the select modal content. Acceptable units: px.<br>CSS variable: --wm-select-arrow-button-icon-border-width"
56
+ "subtype": "space",
57
+ "description": "Controls the padding of arrow button icon This creates breathing room on the arrow button. Acceptable units: px.<br>CSS variable: --wm-select-arrow-button-icon-padding"
73
58
  }
74
59
  },
75
- "style": {
76
- "value": "{border.style.base.value}",
77
- "type": "radius",
78
- "attributes": {
79
- "subtype": "border-style",
80
- "description": "Controls the style of the border around select modal content. 'solid' creates a continuous line, 'dashed' creates a dotted line, 'dotted' creates small dots.<br>CSS variable: --wm-select-arrow-button-icon-border-style"
60
+ "border": {
61
+ "radius": {
62
+ "value": "{radius.none.value}",
63
+ "type": "radius",
64
+ "attributes": {
65
+ "subtype": "radius",
66
+ "description": "Controls the corner rounding of select modal content. This makes the select modal content appear with rounded corners for a softer appearance.<br>CSS variable: --wm-select-arrow-button-icon-border-radius"
67
+ }
68
+ },
69
+ "width": {
70
+ "value": "{border.width.0.value}",
71
+ "type": "border",
72
+ "attributes": {
73
+ "subtype": "border-width",
74
+ "description": "Controls the thickness of the border around select modal content. This determines how thick the outline appears around the select modal content. Acceptable units: px.<br>CSS variable: --wm-select-arrow-button-icon-border-width"
75
+ }
76
+ },
77
+ "style": {
78
+ "value": "{border.style.base.value}",
79
+ "type": "radius",
80
+ "attributes": {
81
+ "subtype": "border-style",
82
+ "description": "Controls the style of the border around select modal content. 'solid' creates a continuous line, 'dashed' creates a dotted line, 'dotted' creates small dots.<br>CSS variable: --wm-select-arrow-button-icon-border-style"
83
+ }
84
+ },
85
+ "color": {
86
+ "value": "{color.outline.@.value}",
87
+ "type": "color",
88
+ "attributes": {
89
+ "subtype": "color",
90
+ "description": "Sets the color of the border around select modal content. This determines the color of the outline that defines the select modal content.<br>CSS variable: --wm-select-arrow-button-icon-border-color"
91
+ }
81
92
  }
82
93
  },
83
- "color": {
84
- "value": "{color.outline.@.value}",
85
- "type": "color",
86
- "attributes": {
87
- "subtype": "color",
88
- "description": "Sets the color of the border around select modal content. This determines the color of the outline that defines the select modal content.<br>CSS variable: --wm-select-arrow-button-icon-border-color"
89
- }
90
- }
91
- },
92
94
  "font-size": {
93
95
  "value": "{body.large.font-size.value}",
94
96
  "type": "font",
@@ -175,6 +177,14 @@
175
177
  "description": "Sets the color of the border around select modal content. This determines the color of the outline that defines the select modal content.<br>CSS variable: --wm-select-modal-content-border-color"
176
178
  }
177
179
  }
180
+ },
181
+ "box-shadow": {
182
+ "value": "{elevation.shadow.none.value}",
183
+ "type": "radius",
184
+ "attributes": {
185
+ "subtype": "elevation",
186
+ "description": "Controls the box shadow of select modal content (floating option list panel).<br>CSS variable: --wm-select-modal-content-box-shadow"
187
+ }
178
188
  }
179
189
  },
180
190
  "modal-text": {
@@ -201,16 +211,126 @@
201
211
  "subtype": "color",
202
212
  "description": "Sets the text color of labels (text elements that describe or identify other content). This determines what color the label text appears in, which should contrast well with the background for readability.<br>CSS variable: --wm-label-color"
203
213
  }
214
+ },
215
+ "line-height": {
216
+ "value": "{body.large.line-height.value}",
217
+ "type": "font",
218
+ "attributes": {
219
+ "subtype": "line-height",
220
+ "description": "Controls the line height of the selected select option item text.<br>CSS variable: --wm-select-item-text-line-height"
221
+ }
222
+ },
223
+ "letter-spacing": {
224
+ "value": "{body.large.letter-spacing.value}",
225
+ "type": "font",
226
+ "attributes": {
227
+ "subtype": "letter-spacing",
228
+ "description": "Controls the letter spacing of the selected select option item text.<br>CSS variable: --wm-select-item-text-letter-spacing"
229
+ }
230
+ }
231
+ },
232
+ "item": {
233
+ "border": {
234
+ "width": {
235
+ "value": "{border.width.1.value}",
236
+ "type": "border",
237
+ "attributes": {
238
+ "subtype": "border-width",
239
+ "description": "Controls the border width of each select option item.<br>CSS variable: --wm-select-item-border-width"
240
+ }
241
+ },
242
+ "color": {
243
+ "value": "{color.shadow.@.value}",
244
+ "type": "color",
245
+ "attributes": {
246
+ "subtype": "color",
247
+ "description": "Sets the border color of each select option item (light gray, similar to #dddddd).<br>CSS variable: --wm-select-item-border-color"
248
+ }
249
+ },
250
+ "style": {
251
+ "value": "{border.style.base.value}",
252
+ "type": "radius",
253
+ "attributes": {
254
+ "subtype": "border-style",
255
+ "description": "Controls the border style of each select option item.<br>CSS variable: --wm-select-item-border-style"
256
+ }
257
+ }
258
+ },
259
+ "padding": {
260
+ "value": "{space.2.value} {space.4.value}",
261
+ "type": "space",
262
+ "attributes": {
263
+ "subtype": "space",
264
+ "description": "Controls the padding inside each select option item (top/bottom, left/right). Acceptable units: px.<br>CSS variable: --wm-select-item-padding"
265
+ }
204
266
  }
205
267
  },
206
268
  "check": {
207
269
  "icon": {
270
+ "background-color": {
271
+ "value": "transparent",
272
+ "type": "color",
273
+ "attributes": {
274
+ "subtype": "color",
275
+ "description": "Sets the background color of the select check icon container.<br>CSS variable: --wm-select-check-icon-background-color"
276
+ }
277
+ },
278
+ "height": {
279
+ "value": "24px",
280
+ "type": "space",
281
+ "attributes": {
282
+ "subtype": "space",
283
+ "description": "Controls the height of the select check icon container.<br>CSS variable: --wm-select-check-icon-height"
284
+ }
285
+ },
286
+ "width": {
287
+ "value": "24px",
288
+ "type": "space",
289
+ "attributes": {
290
+ "subtype": "space",
291
+ "description": "Controls the width of the select check icon container.<br>CSS variable: --wm-select-check-icon-width"
292
+ }
293
+ },
294
+ "border": {
295
+ "radius": {
296
+ "value": "1px",
297
+ "type": "radius",
298
+ "attributes": {
299
+ "subtype": "radius",
300
+ "description": "Controls the border radius of the select check icon container.<br>CSS variable: --wm-select-check-icon-border-radius"
301
+ }
302
+ },
303
+ "width": {
304
+ "value": "{border.width.1.value}",
305
+ "type": "border",
306
+ "attributes": {
307
+ "subtype": "border-width",
308
+ "description": "Controls the border width of the select check icon container.<br>CSS variable: --wm-select-check-icon-border-width"
309
+ }
310
+ },
311
+ "color": {
312
+ "value": "transparent",
313
+ "type": "color",
314
+ "attributes": {
315
+ "subtype": "color",
316
+ "description": "Sets the border color of the select check icon container.<br>CSS variable: --wm-select-check-icon-border-color"
317
+ }
318
+ },
319
+ "style": {
320
+ "value": "{border.style.base.value}",
321
+ "type": "radius",
322
+ "attributes": {
323
+ "subtype": "border-style",
324
+ "description": "Controls the border style of the select check icon container.<br>CSS variable: --wm-select-check-icon-border-style"
325
+ }
326
+ }
327
+ },
208
328
  "color": {
209
329
  "value": "{color.on-background.@.value}",
210
330
  "type": "color",
211
331
  "attributes": {
212
332
  "subtype": "color",
213
- "description": "Sets the color of icons (symbols like arrows, hearts, settings, etc.). This determines what color the icon symbols appear in, which should contrast well with the background for visibility.<br>CSS variable: --wm-icon-color"
333
+ "description": "Sets the color of the select check icon glyph.<br>CSS variable: --wm-select-check-icon-color"
214
334
  }
215
335
  },
216
336
  "font-size": {
@@ -218,7 +338,61 @@
218
338
  "type": "font",
219
339
  "attributes": {
220
340
  "subtype": "icon-size",
221
- "description": "Controls how large icon symbols appear (like arrows, hearts, settings, etc.). Larger values make icons more prominent, smaller values make them more subtle.<br>CSS variable: --wm-icon-font-size"
341
+ "description": "Controls the font size of the select check icon glyph.<br>CSS variable: --wm-select-check-icon-font-size"
342
+ }
343
+ },
344
+ "padding": {
345
+ "value": "{space.0.value}",
346
+ "type": "space",
347
+ "attributes": {
348
+ "subtype": "space",
349
+ "description": "Controls the padding of the select check icon glyph.<br>CSS variable: --wm-select-check-icon-padding"
350
+ }
351
+ }
352
+ }
353
+ },
354
+ "states": {
355
+ "active": {
356
+ "modal-text": {
357
+ "color": {
358
+ "value": "{color.primary.@.value}",
359
+ "type": "color",
360
+ "attributes": {
361
+ "subtype": "color",
362
+ "description": "Sets the text color of the selected select option item.<br>CSS variable: --wm-select-item-text-color"
363
+ }
364
+ },
365
+ "font-size": {
366
+ "value": "{body.large.font-size.value}",
367
+ "type": "font",
368
+ "attributes": {
369
+ "subtype": "font-size",
370
+ "description": "Controls the font size of the selected select option item text.<br>CSS variable: --wm-select-item-text-font-size"
371
+ }
372
+ },
373
+ "font-family": {
374
+ "value": "{body.medium.font-family.value}",
375
+ "type": "font",
376
+ "attributes": {
377
+ "subtype": "font-family",
378
+ "description": "Sets the typeface (font style) for label text. This determines whether the label text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-label-font-family"
379
+ }
380
+ },
381
+ "line-height": {
382
+ "value": "{body.large.line-height.value}",
383
+ "type": "font",
384
+ "attributes": {
385
+ "subtype": "line-height",
386
+ "description": "Controls the line height of the selected select option item text.<br>CSS variable: --wm-select-item-text-line-height"
387
+ }
388
+ },
389
+ "letter-spacing": {
390
+ "value": "{body.large.letter-spacing.value}",
391
+ "type": "font",
392
+ "attributes": {
393
+ "subtype": "letter-spacing",
394
+ "description": "Controls the letter spacing of the selected select option item text.<br>CSS variable: --wm-select-item-text-letter-spacing"
395
+ }
222
396
  }
223
397
  }
224
398
  }
package/src/tokens/mobile/components/slider/slider.json CHANGED
@@ -5,6 +5,22 @@
5
5
  "selector": {
6
6
  "mobile": ".app-slider"
7
7
  }
8
+ },
9
+ "appearances": {
10
+ "default": {
11
+ "mapping": {
12
+ "selector": {
13
+ "mobile": ".app-slider"
14
+ }
15
+ }
16
+ },
17
+ "circle-thumb": {
18
+ "mapping": {
19
+ "selector": {
20
+ "mobile": ".slider-circle-thumb"
21
+ }
22
+ }
23
+ }
8
24
  }
9
25
  },
10
26
  "mapping": {
@@ -86,6 +102,40 @@
86
102
  "subtype": "radius",
87
103
  "description": "Controls the border radius (rounded corners) of slider thumbs. This determines how rounded the corners of the thumb appear. Acceptable units: px.<br>CSS variable: --wm-slider-thumb-border-radius"
88
104
  }
105
+ },
106
+ "wrapper": {
107
+ "width": {
108
+ "value": "14px",
109
+ "type": "space",
110
+ "attributes": {
111
+ "subtype": "space",
112
+ "description": "Controls the width of the slider thumb wrapper.<br>CSS variable: --wm-slider-thumb-wrapper-width"
113
+ }
114
+ },
115
+ "height": {
116
+ "value": "54px",
117
+ "type": "space",
118
+ "attributes": {
119
+ "subtype": "space",
120
+ "description": "Controls the height of the slider thumb wrapper.<br>CSS variable: --wm-slider-thumb-wrapper-height"
121
+ }
122
+ },
123
+ "border-radius": {
124
+ "value": "2px",
125
+ "type": "radius",
126
+ "attributes": {
127
+ "subtype": "radius",
128
+ "description": "Controls the border radius of the slider thumb wrapper.<br>CSS variable: --wm-slider-thumb-wrapper-border-radius"
129
+ }
130
+ },
131
+ "background": {
132
+ "value": "#fff",
133
+ "type": "color",
134
+ "attributes": {
135
+ "subtype": "color",
136
+ "description": "Sets the background color of the slider thumb wrapper.<br>CSS variable: --wm-slider-thumb-wrapper-background"
137
+ }
138
+ }
89
139
  }
90
140
  },
91
141
  "tooltip": {
@@ -106,6 +156,128 @@
106
156
  }
107
157
  }
108
158
  }
159
+ },
160
+ "appearances": {
161
+ "default": {
162
+ "mapping":{
163
+ "thumb": {
164
+ "background": {
165
+ "value": "{color.surface.tint.@.value}",
166
+ "type": "color",
167
+ "attributes": {
168
+ "subtype": "color",
169
+ "description": "Sets the background color of slider thumbs (the draggable handle that users interact with to set values). This determines what color the thumb appears in.<br>CSS variable: --wm-slider-thumb-background"
170
+ }
171
+ },
172
+ "height": {
173
+ "value": "{space.8.value}",
174
+ "type": "space",
175
+ "attributes": {
176
+ "subtype": "space",
177
+ "description": "Controls the height of slider thumbs. This determines the vertical size of the thumb. Acceptable units: px.<br>CSS variable: --wm-slider-thumb-height"
178
+ }
179
+ },
180
+ "width": {
181
+ "value": "{space.1.value}",
182
+ "type": "space",
183
+ "attributes": {
184
+ "subtype": "space",
185
+ "description": "Controls the width of slider thumbs. This determines the horizontal size of the thumb. Acceptable units: px.<br>CSS variable: --wm-slider-thumb-width"
186
+ }
187
+ },
188
+ "border-radius": {
189
+ "value": "{radius.xs.value}",
190
+ "type": "radius",
191
+ "attributes": {
192
+ "subtype": "radius",
193
+ "description": "Controls the border radius (rounded corners) of slider thumbs. This determines how rounded the corners of the thumb appear. Acceptable units: px.<br>CSS variable: --wm-slider-thumb-border-radius"
194
+ }
195
+ },
196
+ "wrapper": {
197
+ "width": {
198
+ "value": "14px",
199
+ "type": "space",
200
+ "attributes": {
201
+ "subtype": "space",
202
+ "description": "Controls the width of the slider thumb wrapper.<br>CSS variable: --wm-slider-thumb-wrapper-width"
203
+ }
204
+ },
205
+ "height": {
206
+ "value": "54px",
207
+ "type": "space",
208
+ "attributes": {
209
+ "subtype": "space",
210
+ "description": "Controls the height of the slider thumb wrapper.<br>CSS variable: --wm-slider-thumb-wrapper-height"
211
+ }
212
+ },
213
+ "border-radius": {
214
+ "value": "2px",
215
+ "type": "radius",
216
+ "attributes": {
217
+ "subtype": "radius",
218
+ "description": "Controls the border radius of the slider thumb wrapper.<br>CSS variable: --wm-slider-thumb-wrapper-border-radius"
219
+ }
220
+ },
221
+ "background": {
222
+ "value": "#fff",
223
+ "type": "color",
224
+ "attributes": {
225
+ "subtype": "color",
226
+ "description": "Sets the background color of the slider thumb wrapper.<br>CSS variable: --wm-slider-thumb-wrapper-background"
227
+ }
228
+ }
229
+ }
230
+ }
231
+ }
232
+ },
233
+ "circle-thumb": {
234
+ "mapping": {
235
+ "thumb": {
236
+ "background": {
237
+ "value": "{color.transparent.@.value}",
238
+ "type": "color",
239
+ "attributes": {
240
+ "subtype": "color",
241
+ "description": "Sets the background color of slider thumbs for the circle-thumb variant. The visible thumb is provided by the wrapper.<br>CSS variable: --wm-slider-thumb-background"
242
+ }
243
+ },
244
+ "wrapper": {
245
+ "background": {
246
+ "value": "{color.surface.tint.@.value}",
247
+ "type": "color",
248
+ "attributes": {
249
+ "subtype": "color",
250
+ "description": "Sets the background color of the slider thumb wrapper for the circle-thumb variant.<br>CSS variable: --wm-slider-thumb-wrapper-background"
251
+ }
252
+ },
253
+ "height": {
254
+ "value": "20px",
255
+ "type": "space",
256
+ "attributes": {
257
+ "subtype": "space",
258
+ "description": "Controls the height of the slider thumb wrapper for the circle-thumb variant.<br>CSS variable: --wm-slider-thumb-wrapper-height"
259
+ }
260
+ },
261
+ "width": {
262
+ "value": "20px",
263
+ "type": "space",
264
+ "attributes": {
265
+ "subtype": "space",
266
+ "description": "Controls the width of the slider thumb wrapper for the circle-thumb variant.<br>CSS variable: --wm-slider-thumb-wrapper-width"
267
+ }
268
+ },
269
+ "border-radius": {
270
+ "value": "100px",
271
+ "type": "radius",
272
+ "attributes": {
273
+ "subtype": "radius",
274
+ "description": "Controls the border radius of the slider thumb wrapper for the circle-thumb variant.<br>CSS variable: --wm-slider-thumb-wrapper-border-radius"
275
+ }
276
+ }
277
+ }
278
+ }
279
+ }
280
+ }
109
281
  }
110
282
  }
111
283
  }