@wavemaker/foundation-css 11.10.5-next.27872 → 11.10.5-next.27901

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 (79) hide show
  1. package/foundation/foundation.css +1275 -1059
  2. package/foundation/foundation.min.css +1 -1
  3. package/index.d.ts +18 -27
  4. package/index.js +91 -42
  5. package/index.js.map +1 -0
  6. package/npm-shrinkwrap.json +219 -2
  7. package/package-lock.json +219 -2
  8. package/package.json +10 -3
  9. package/tokens/components/accordion/accordion.json +10 -0
  10. package/tokens/components/anchor/anchor.json +86 -0
  11. package/tokens/components/badge/badge.json +52 -0
  12. package/tokens/components/breadcrumb/breadcrumb.json +98 -0
  13. package/tokens/components/button/button.json +710 -0
  14. package/tokens/components/button-group/button-group.json +18 -0
  15. package/tokens/components/calendar/calendar.json +274 -0
  16. package/tokens/components/cards/cards.json +176 -0
  17. package/tokens/components/carousel/carousel.json +46 -0
  18. package/tokens/components/checkbox/checkbox.json +106 -0
  19. package/tokens/components/checkboxset/checkboxset.json +10 -0
  20. package/tokens/components/chips/chips.json +202 -0
  21. package/tokens/components/composite/composite.json +202 -0
  22. package/tokens/components/container/container.json +32 -0
  23. package/tokens/components/currency/currency.json +32 -0
  24. package/tokens/components/data-table/data-table.json +170 -0
  25. package/tokens/components/date/date.json +146 -0
  26. package/tokens/components/dropdown-menu/dropdown-menu.json +116 -0
  27. package/tokens/components/fileupload/fileupload.json +180 -0
  28. package/tokens/components/grid-layout/grid-layout.json +18 -0
  29. package/tokens/components/icon/icon.json +8 -0
  30. package/tokens/components/label/label.json +8 -0
  31. package/tokens/components/list/list.json +72 -0
  32. package/tokens/components/message/message.json +144 -0
  33. package/tokens/components/modal-dialog/modal-dialog.json +176 -0
  34. package/tokens/components/nav/nav.json +222 -0
  35. package/tokens/components/page-layout/page-layout.json +842 -0
  36. package/tokens/components/pagination/pagination.json +250 -0
  37. package/tokens/components/panel/panel.json +218 -0
  38. package/tokens/components/picture/picture.json +42 -0
  39. package/tokens/components/popover/popover.json +102 -0
  40. package/tokens/components/progress-bar/progress-bar.json +122 -0
  41. package/tokens/components/progress-circle/progress-circle.json +64 -0
  42. package/tokens/components/radioset/radioset.json +116 -0
  43. package/tokens/components/rating/rating.json +42 -0
  44. package/tokens/components/richtext-editor/richtext-editor.json +546 -0
  45. package/tokens/components/scrollbar/scrollbar.json +38 -0
  46. package/tokens/components/search/search.json +200 -0
  47. package/tokens/components/spinner/spinner.json +44 -0
  48. package/tokens/components/switch/switch.json +106 -0
  49. package/tokens/components/tabs/tabs.json +136 -0
  50. package/tokens/components/tile/tile.json +186 -0
  51. package/tokens/components/time/time.json +90 -0
  52. package/tokens/components/toast/toast.json +214 -0
  53. package/tokens/components/toggle/toggle.json +98 -0
  54. package/tokens/components/wizard/wizard.json +232 -0
  55. package/tokens/global/border/border.json +96 -0
  56. package/tokens/global/box-shadow/box-shadow.json +9 -0
  57. package/tokens/{primitives → global}/colors/color.dark.json +12 -3
  58. package/tokens/global/colors/color.json +343 -0
  59. package/tokens/{semantics → global}/font/font.json +74 -20
  60. package/tokens/global/gap/gap.json +58 -0
  61. package/tokens/{semantics → global}/icon/icon.json +1 -1
  62. package/tokens/global/margin/margin.json +57 -0
  63. package/tokens/global/radius/radius.json +45 -0
  64. package/tokens/global/shadow/shadow.json +74 -0
  65. package/tokens/global/space/space.json +57 -0
  66. package/tokens/global/spacer/spacer.json +46 -0
  67. package/utils/style-dictionary-utils.d.ts +7 -0
  68. package/utils/style-dictionary-utils.js +65 -0
  69. package/utils/style-dictionary-utils.js.map +1 -0
  70. package/tokens/primitives/border/border.json +0 -10
  71. package/tokens/primitives/colors/color.json +0 -163
  72. package/tokens/primitives/font/font.json +0 -20
  73. package/tokens/primitives/radius/radius.json +0 -14
  74. package/tokens/primitives/space/space.json +0 -57
  75. package/tokens/primitives/spacer/spacer.json +0 -45
  76. package/tokens/semantics/box-shadow/box-shadow.json +0 -8
  77. package/tokens/semantics/colors/color.json +0 -948
  78. /package/tokens/{primitives → global}/colors/color.light.json +0 -0
  79. /package/tokens/{semantics → global}/opacity/opacity.json +0 -0
package/tokens/components/button-group/button-group.json ADDED
@@ -0,0 +1,18 @@
1
+ {
2
+ "button": {
3
+ "group": {
4
+ "horizontal": {
5
+ "radius": {
6
+ "value": "{btn.radius.value}",
7
+ "type": "radius"
8
+ }
9
+ },
10
+ "vertical": {
11
+ "radius": {
12
+ "value": "{btn.xs.radius.value}",
13
+ "type": "radius"
14
+ }
15
+ }
16
+ }
17
+ }
18
+ }
package/tokens/components/calendar/calendar.json ADDED
@@ -0,0 +1,274 @@
1
+ {
2
+ "calendar": {
3
+ "view": {
4
+ "shadow": {
5
+ "value": "{elevation.shadow.1.value}",
6
+ "type": "radius"
7
+ },
8
+ "border": {
9
+ "@": {
10
+ "value": "{border.color.translucent.value}",
11
+ "type": "radius"
12
+ },
13
+ "style": {
14
+ "value": "{border.style.base.value}",
15
+ "type": "radius"
16
+ },
17
+ "width": {
18
+ "value": "{border.width.base.value}",
19
+ "type": "space"
20
+ }
21
+ },
22
+ "radius": {
23
+ "value": "{radius.md.value}",
24
+ "type": "radius"
25
+ }
26
+ },
27
+ "fc": {
28
+ "header": {
29
+ "vertical": {
30
+ "padding": {
31
+ "value": "{space.4.value}",
32
+ "type": "space"
33
+ }
34
+ },
35
+ "horizontal": {
36
+ "padding": {
37
+ "value": "{space.5.value}",
38
+ "type": "space"
39
+ }
40
+ },
41
+ "text": {
42
+ "font-weight": {
43
+ "value": "{font.weight.bold.value}",
44
+ "type": "font"
45
+ }
46
+ }
47
+ },
48
+ "time": {
49
+ "text": {
50
+ "font-weight": {
51
+ "value": "{font.weight.bold.value}",
52
+ "type": "font"
53
+ }
54
+ }
55
+ },
56
+ "events": {
57
+ "gap": {
58
+ "value": "{space.1.value}",
59
+ "type": "space"
60
+ }
61
+ },
62
+ "daygrid": {
63
+ "event": {
64
+ "radius": {
65
+ "value": "{radius.xs.value}",
66
+ "type": "radius"
67
+ }
68
+ }
69
+ },
70
+ "v": {
71
+ "event": {
72
+ "main": {
73
+ "color": {
74
+ "value": "{color.primary.@.value}",
75
+ "type": "color"
76
+ }
77
+ }
78
+ }
79
+ },
80
+ "popover": {
81
+ "radius": {
82
+ "value": "{radius.sm.value}",
83
+ "type": "radius"
84
+ },
85
+ "heading": {
86
+ "padding": {
87
+ "value": "{space.2.value}",
88
+ "type": "space"
89
+ }
90
+ },
91
+ "title": {
92
+ "font-size": {
93
+ "value": "{body.medium.font-size.value}",
94
+ "type": "font"
95
+ },
96
+ "font-weight": {
97
+ "value": "{font.weight.bold.value}",
98
+ "type": "font"
99
+ },
100
+ "font-family": {
101
+ "value": "{body.medium.font-family.value}",
102
+ "type": "font"
103
+ },
104
+ "line-height": {
105
+ "value": "{body.medium.line-height.value}",
106
+ "type": "font"
107
+ }
108
+ }
109
+ },
110
+ "event": {
111
+ "background": {
112
+ "value": "{color.primary.fixed.@.value}",
113
+ "type": "color"
114
+ },
115
+ "color": {
116
+ "value": "{color.surface.tint.@.value}",
117
+ "type": "color"
118
+ },
119
+ "dot": {
120
+ "color": {
121
+ "value": "{color.surface.tint.@.value}",
122
+ "type": "color"
123
+ },
124
+ "primary": {
125
+ "value": "{color.primary.@.value}",
126
+ "type": "color"
127
+ },
128
+ "secondary": {
129
+ "value": "{color.secondary.@.value}",
130
+ "type": "color"
131
+ },
132
+ "tertiary": {
133
+ "value": "{color.tertiary.@.value}",
134
+ "type": "color"
135
+ },
136
+ "info": {
137
+ "value": "{color.info.@.value}",
138
+ "type": "color"
139
+ },
140
+ "success": {
141
+ "value": "{color.success.@.value}",
142
+ "type": "color"
143
+ },
144
+ "warning": {
145
+ "value": "{color.warning.@.value}",
146
+ "type": "color"
147
+ },
148
+ "danger": {
149
+ "value": "{color.error.@.value}",
150
+ "type": "color"
151
+ }
152
+ },
153
+ "primary": {
154
+ "background": {
155
+ "value": "{color.primary.container.@.value}",
156
+ "type": "color"
157
+ },
158
+ "color": {
159
+ "value": "{color.primary.@.value}",
160
+ "type": "color"
161
+ }
162
+ },
163
+ "secondary": {
164
+ "background": {
165
+ "value": "{color.secondary.container.@.value}",
166
+ "type": "color"
167
+ },
168
+ "color": {
169
+ "value": "{color.secondary.@.value}",
170
+ "type": "color"
171
+ }
172
+ },
173
+ "tertiary": {
174
+ "background": {
175
+ "value": "{color.tertiary.container.@.value}",
176
+ "type": "color"
177
+ },
178
+ "color": {
179
+ "value": "{color.tertiary.@.value}",
180
+ "type": "color"
181
+ }
182
+ },
183
+ "info": {
184
+ "background": {
185
+ "value": "{color.info.container.@.value}",
186
+ "type": "color"
187
+ },
188
+ "color": {
189
+ "value": "{color.info.@.value}",
190
+ "type": "color"
191
+ }
192
+ },
193
+ "success": {
194
+ "background": {
195
+ "value": "{color.success.container.@.value}",
196
+ "type": "color"
197
+ },
198
+ "color": {
199
+ "value": "{color.success.@.value}",
200
+ "type": "color"
201
+ }
202
+ },
203
+ "warning": {
204
+ "background": {
205
+ "value": "{color.warning.container.@.value}",
206
+ "type": "color"
207
+ },
208
+ "color": {
209
+ "value": "{color.warning.@.value}",
210
+ "type": "color"
211
+ }
212
+ },
213
+ "danger": {
214
+ "background": {
215
+ "value": "{color.error.container.@.value}",
216
+ "type": "color"
217
+ },
218
+ "color": {
219
+ "value": "{color.error.@.value}",
220
+ "type": "color"
221
+ }
222
+ },
223
+ "future": {
224
+ "background": {
225
+ "value": "{color.tertiary.container.@.value}",
226
+ "type": "color"
227
+ },
228
+ "color": {
229
+ "value": "{color.tertiary.@.value}",
230
+ "type": "color"
231
+ },
232
+ "dot": {
233
+ "value": "{color.tertiary.@.value}",
234
+ "type": "color"
235
+ }
236
+ },
237
+ "past": {
238
+ "background": {
239
+ "value": "{color.secondary.container.@.value}",
240
+ "type": "color"
241
+ },
242
+ "color": {
243
+ "value": "{color.secondary.@.value}",
244
+ "type": "color"
245
+ },
246
+ "dot": {
247
+ "value": "{color.secondary.@.value}",
248
+ "type": "color"
249
+ }
250
+ },
251
+ "today": {
252
+ "background": {
253
+ "value": "{color.success.container.@.value}",
254
+ "type": "color"
255
+ },
256
+ "color": {
257
+ "value": "{color.success.@.value}",
258
+ "type": "color"
259
+ },
260
+ "dot": {
261
+ "value": "{color.success.@.value}",
262
+ "type": "color"
263
+ }
264
+ }
265
+ },
266
+ "anchor": {
267
+ "color": {
268
+ "value": "{color.on-background.@.value}",
269
+ "type": "color"
270
+ }
271
+ }
272
+ }
273
+ }
274
+ }
package/tokens/components/cards/cards.json ADDED
@@ -0,0 +1,176 @@
1
+ {
2
+ "card": {
3
+ "list": {
4
+ "gap": {
5
+ "value": "{space.4.value}",
6
+ "type": "space"
7
+ }
8
+ },
9
+ "background": {
10
+ "@": {
11
+ "value": "{color.surface.@.value}",
12
+ "type": "color"
13
+ },
14
+ "active": {
15
+ "value": "{color.secondary.container.@.value}",
16
+ "type": "color"
17
+ }
18
+ },
19
+ "border": {
20
+ "width": {
21
+ "value": "{border.width.base.value}",
22
+ "type": "space"
23
+ },
24
+ "style": {
25
+ "value": "{border.style.base.value}",
26
+ "type": "radius"
27
+ },
28
+ "color": {
29
+ "value": "{color.outline.variant.value}",
30
+ "type": "color"
31
+ },
32
+ "radius": {
33
+ "value": "{radius.md.value}",
34
+ "type": "radius"
35
+ }
36
+ },
37
+ "shadow": {
38
+ "@": {
39
+ "value": "none",
40
+ "type": "radius"
41
+ },
42
+ "hover": {
43
+ "value": "{elevation.shadow.1.value}",
44
+ "type": "radius"
45
+ },
46
+ "focus": {
47
+ "value": "none",
48
+ "type": "radius"
49
+ },
50
+ "active": {
51
+ "value": "none",
52
+ "type": "radius"
53
+ },
54
+ "drag": {
55
+ "value": "{elevation.shadow.3.value}",
56
+ "type": "radius"
57
+ }
58
+ },
59
+ "state": {
60
+ "layer": {
61
+ "color": {
62
+ "value": "{color.on-surface.@.value}",
63
+ "type": "color"
64
+ },
65
+ "opacity": {
66
+ "@": {
67
+ "value": "0",
68
+ "type": "radius"
69
+ },
70
+ "hover": {
71
+ "value": "{opacity.hover.value}",
72
+ "type": "radius"
73
+ },
74
+ "focus": {
75
+ "value": "{opacity.focus.value}",
76
+ "type": "radius"
77
+ },
78
+ "active": {
79
+ "value": "{opacity.active.value}",
80
+ "type": "radius"
81
+ }
82
+ }
83
+ }
84
+ },
85
+ "elevation": {
86
+ "border": {
87
+ "width": {
88
+ "value": "0",
89
+ "type": "space"
90
+ }
91
+ },
92
+ "shadow": {
93
+ "@": {
94
+ "value": "{elevation.shadow.1.value}",
95
+ "type": "radius"
96
+ },
97
+ "hover": {
98
+ "value": "{elevation.shadow.2.value}",
99
+ "type": "radius"
100
+ },
101
+ "focus": {
102
+ "value": "{elevation.shadow.1.value}",
103
+ "type": "radius"
104
+ },
105
+ "active": {
106
+ "value": "{elevation.shadow.1.value}",
107
+ "type": "radius"
108
+ },
109
+ "drag": {
110
+ "value": "{elevation.shadow.4.value}",
111
+ "type": "radius"
112
+ }
113
+ }
114
+ },
115
+ "filled": {
116
+ "border": {
117
+ "width": {
118
+ "value": "0",
119
+ "type": "space"
120
+ }
121
+ },
122
+ "background": {
123
+ "value": "{color.surface.bright.@.value}",
124
+ "type": "color"
125
+ },
126
+ "shadow": {
127
+ "@": {
128
+ "value": "none",
129
+ "type": "radius"
130
+ },
131
+ "hover": {
132
+ "value": "{elevation.shadow.1.value}",
133
+ "type": "radius"
134
+ },
135
+ "focus": {
136
+ "value": "{elevation.shadow.1.value}",
137
+ "type": "radius"
138
+ },
139
+ "active": {
140
+ "value": "{elevation.shadow.1.value}",
141
+ "type": "radius"
142
+ },
143
+ "drag": {
144
+ "value": "{elevation.shadow.3.value}",
145
+ "type": "radius"
146
+ }
147
+ }
148
+ },
149
+ "body": {
150
+ "padding": {
151
+ "value": "{space.3.value}",
152
+ "type": "space"
153
+ }
154
+ },
155
+ "footer": {
156
+ "padding": {
157
+ "value": "{space.3.value}",
158
+ "type": "space"
159
+ },
160
+ "border": {
161
+ "width": {
162
+ "value": "{card.border.width.value}",
163
+ "type": "space"
164
+ },
165
+ "style": {
166
+ "value": "{card.border.style.value}",
167
+ "type": "radius"
168
+ },
169
+ "color": {
170
+ "value": "{card.border.color.value}",
171
+ "type": "color"
172
+ }
173
+ }
174
+ }
175
+ }
176
+ }
package/tokens/components/carousel/carousel.json ADDED
@@ -0,0 +1,46 @@
1
+ {
2
+ "carousel": {
3
+ "indicators": {
4
+ "border": {
5
+ "@": {
6
+ "value": "{color.primary.container.@.value}",
7
+ "type": "color"
8
+ },
9
+ "style": {
10
+ "value": "{border.style.base.value}",
11
+ "type": "radius"
12
+ },
13
+ "width": {
14
+ "value": "{border.width.base.value}",
15
+ "type": "space"
16
+ }
17
+ },
18
+ "radius": {
19
+ "value": "{radius.circle.value}",
20
+ "type": "radius"
21
+ },
22
+ "background": {
23
+ "value": "{color.primary.container.@.value}",
24
+ "type": "color"
25
+ },
26
+ "size": {
27
+ "value": "10px",
28
+ "type": "space"
29
+ },
30
+ "gap": {
31
+ "value": "{space.2.value}",
32
+ "type": "space"
33
+ }
34
+ },
35
+ "control": {
36
+ "icon": {
37
+ "font": {
38
+ "size": {
39
+ "value": "48px",
40
+ "type": "space"
41
+ }
42
+ }
43
+ }
44
+ }
45
+ }
46
+ }
package/tokens/components/checkbox/checkbox.json ADDED
@@ -0,0 +1,106 @@
1
+ {
2
+ "checkbox": {
3
+ "gap": {
4
+ "value": "{space.1.value}",
5
+ "type": "space"
6
+ },
7
+ "caption": {
8
+ "font-size": {
9
+ "value": "{body.large.font-size.value}",
10
+ "type": "font"
11
+ },
12
+ "font-family": {
13
+ "value": "{body.large.font-family.value}",
14
+ "type": "font"
15
+ },
16
+ "font-weight": {
17
+ "value": "{body.large.font-weight.value}",
18
+ "type": "font"
19
+ },
20
+ "line-height": {
21
+ "value": "{body.large.line-height.value}",
22
+ "type": "font"
23
+ },
24
+ "letter-spacing": {
25
+ "value": "{body.large.letter-spacing.value}",
26
+ "type": "font"
27
+ }
28
+ },
29
+ "size": {
30
+ "value": "18px",
31
+ "type": "space"
32
+ },
33
+ "icon": {
34
+ "size": {
35
+ "value": "10px",
36
+ "type": "space"
37
+ },
38
+ "color": {
39
+ "selected": {
40
+ "value": "{color.on-secondary.@.value}",
41
+ "type": "color"
42
+ }
43
+ }
44
+ },
45
+ "background": {
46
+ "@": {
47
+ "value": "transparent",
48
+ "type": "color"
49
+ },
50
+ "selected": {
51
+ "value": "{color.secondary.@.value}",
52
+ "type": "color"
53
+ }
54
+ },
55
+ "border": {
56
+ "width": {
57
+ "value": "2px",
58
+ "type": "space"
59
+ },
60
+ "color": {
61
+ "@": {
62
+ "value": "{color.on-surface.variant.@.value}",
63
+ "type": "color"
64
+ },
65
+ "selected": {
66
+ "value": "{color.secondary.@.value}",
67
+ "type": "color"
68
+ }
69
+ },
70
+ "radius": {
71
+ "value": "{radius.xxs.value}",
72
+ "type": "radius"
73
+ }
74
+ },
75
+ "state": {
76
+ "layer": {
77
+ "size": {
78
+ "value": "40px",
79
+ "type": "space"
80
+ },
81
+ "color": {
82
+ "value": "{color.on-surface.@.value}",
83
+ "type": "color"
84
+ },
85
+ "opacity": {
86
+ "@": {
87
+ "value": "0",
88
+ "type": "color"
89
+ },
90
+ "hover": {
91
+ "value": "{opacity.hover.value}",
92
+ "type": "radius"
93
+ },
94
+ "focus": {
95
+ "value": "{opacity.focus.value}",
96
+ "type": "radius"
97
+ },
98
+ "active": {
99
+ "value": "{opacity.active.value}",
100
+ "type": "radius"
101
+ }
102
+ }
103
+ }
104
+ }
105
+ }
106
+ }
package/tokens/components/checkboxset/checkboxset.json ADDED
@@ -0,0 +1,10 @@
1
+ {
2
+ "checkboxset": {
3
+ "item": {
4
+ "gap": {
5
+ "value": "{space.6.value}",
6
+ "type": "space"
7
+ }
8
+ }
9
+ }
10
+ }