@wavemaker/foundation-css 11.10.5-next.27872 → 11.10.5-rc.207

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 +1278 -1063
  2. package/foundation/foundation.min.css +1 -1
  3. package/index.d.ts +18 -27
  4. package/index.js +92 -42
  5. package/index.js.map +1 -0
  6. package/npm-shrinkwrap.json +225 -8
  7. package/package-lock.json +225 -8
  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/time/time.json ADDED
@@ -0,0 +1,90 @@
1
+ {
2
+ "timepicker": {
3
+ "input": {
4
+ "font-family": {
5
+ "value": "{h3.font-family.value}",
6
+ "type": "font"
7
+ },
8
+ "font-size": {
9
+ "value": "{h3.font-size.value}",
10
+ "type": "font"
11
+ },
12
+ "font-weight": {
13
+ "value": "{h3.font-weight.value}",
14
+ "type": "font"
15
+ },
16
+ "line-height": {
17
+ "value": "{h3.line-height.value}",
18
+ "type": "font"
19
+ },
20
+ "letter-spacing": {
21
+ "value": "{h3.letter-spacing.value}",
22
+ "type": "font"
23
+ },
24
+ "width": {
25
+ "value": "60px",
26
+ "type": "space"
27
+ },
28
+ "padding": {
29
+ "value": "{space.0.value}",
30
+ "type": "space"
31
+ }
32
+ },
33
+ "background": {
34
+ "value": "{color.surface.container.high.@.value}",
35
+ "type": "color"
36
+ },
37
+ "border": {
38
+ "radius": {
39
+ "value": "{radius.lg.value}",
40
+ "type": "radius"
41
+ }
42
+ },
43
+ "padding": {
44
+ "value": "{space.4.value}",
45
+ "type": "space"
46
+ },
47
+ "period": {
48
+ "selector": {
49
+ "border": {
50
+ "@": {
51
+ "value": "{border.width.base.value} {border.style.base.value} {color.outline.@.value}",
52
+ "type": "radius"
53
+ },
54
+ "radius": {
55
+ "value": "{radius.sm.value}",
56
+ "type": "radius"
57
+ }
58
+ },
59
+ "background": {
60
+ "value": "{color.tertiary.container.@.value}",
61
+ "type": "color"
62
+ },
63
+ "color": {
64
+ "value": "{color.on-tertiary.container.@.value}",
65
+ "type": "color"
66
+ },
67
+ "font-family": {
68
+ "value": "{h5.font-family.value}",
69
+ "type": "font"
70
+ },
71
+ "font-size": {
72
+ "value": "{h5.font-size.value}",
73
+ "type": "font"
74
+ },
75
+ "font-weight": {
76
+ "value": "{h5.font-weight.value}",
77
+ "type": "font"
78
+ },
79
+ "line-height": {
80
+ "value": "{h5.line-height.value}",
81
+ "type": "font"
82
+ },
83
+ "letter-spacing": {
84
+ "value": "{h5.letter-spacing.value}",
85
+ "type": "font"
86
+ }
87
+ }
88
+ }
89
+ }
90
+ }
package/tokens/components/toast/toast.json ADDED
@@ -0,0 +1,214 @@
1
+ {
2
+ "toast": {
3
+ "container": {
4
+ "width": {
5
+ "value": "344px",
6
+ "type": "space"
7
+ },
8
+ "shadow": {
9
+ "value": "{elevation.shadow.3.value}",
10
+ "type": "radius"
11
+ },
12
+ "border": {
13
+ "radius": {
14
+ "value": "{radius.xs.value}",
15
+ "type": "radius"
16
+ },
17
+ "width": {
18
+ "value": "{border.width.base.value}",
19
+ "type": "space"
20
+ },
21
+ "style": {
22
+ "value": "{border.style.base.value}",
23
+ "type": "radius"
24
+ },
25
+ "color": {
26
+ "value": "{color.info.@.value}",
27
+ "type": "color"
28
+ }
29
+ },
30
+ "padding": {
31
+ "block":{
32
+ "value": "{space.4.value}",
33
+ "type": "space"
34
+ },
35
+ "inline":{
36
+ "value": "{space.3.value}",
37
+ "type": "space"
38
+ }
39
+ },
40
+ "gap": {
41
+ "value": "{space.1.value}",
42
+ "type": "space"
43
+ },
44
+ "background": {
45
+ "value": "{color.info.@.value}",
46
+ "type": "color"
47
+ },
48
+ "color": {
49
+ "value": "{color.on-info.@.value}",
50
+ "type": "color"
51
+ },
52
+ "success": {
53
+ "background": {
54
+ "value": "{color.success.@.value}",
55
+ "type": "color"
56
+ },
57
+ "color": {
58
+ "value": "{color.on-success.@.value}",
59
+ "type": "color"
60
+ },
61
+ "border": {
62
+ "color": {
63
+ "value": "{color.success.@.value}",
64
+ "type": "color"
65
+ }
66
+ }
67
+ },
68
+ "info": {
69
+ "background": {
70
+ "value": "{color.info.@.value}",
71
+ "type": "color"
72
+ },
73
+ "color": {
74
+ "value": "{color.on-info.@.value}",
75
+ "type": "color"
76
+ },
77
+ "border": {
78
+ "color": {
79
+ "value": "{color.info.@.value}",
80
+ "type": "color"
81
+ }
82
+ }
83
+ },
84
+ "warning": {
85
+ "background": {
86
+ "value": "{color.warning.@.value}",
87
+ "type": "color"
88
+ },
89
+ "color": {
90
+ "value": "{color.on-warning.@.value}",
91
+ "type": "color"
92
+ },
93
+ "border": {
94
+ "color": {
95
+ "value": "{color.warning.@.value}",
96
+ "type": "color"
97
+ }
98
+ }
99
+ },
100
+ "error": {
101
+ "background": {
102
+ "value": "{color.error.@.value}",
103
+ "type": "color"
104
+ },
105
+ "color": {
106
+ "value": "{color.on-error.@.value}",
107
+ "type": "color"
108
+ },
109
+ "border": {
110
+ "color": {
111
+ "value": "{color.error.@.value}",
112
+ "type": "color"
113
+ }
114
+ }
115
+ }
116
+ },
117
+ "title": {
118
+ "font-family": {
119
+ "value": "{label.large.font-family.value}",
120
+ "type": "font"
121
+ },
122
+ "font-weight": {
123
+ "value": "{label.large.font-weight.value}",
124
+ "type": "font"
125
+ },
126
+ "font-size": {
127
+ "value": "{label.large.font-size.value}",
128
+ "type": "font"
129
+ },
130
+ "line-height": {
131
+ "value": "{label.large.line-height.value}",
132
+ "type": "font"
133
+ },
134
+ "letter-spacing": {
135
+ "value": "{label.large.letter-spacing.value}",
136
+ "type": "font"
137
+ }
138
+ },
139
+ "message": {
140
+ "font-family": {
141
+ "value": "{label.large.font-family.value}",
142
+ "type": "font"
143
+ },
144
+ "font-weight": {
145
+ "value": "{label.large.font-weight.value}",
146
+ "type": "font"
147
+ },
148
+ "font-size": {
149
+ "value": "{label.large.font-size.value}",
150
+ "type": "font"
151
+ },
152
+ "line-height": {
153
+ "value": "{label.large.line-height.value}",
154
+ "type": "font"
155
+ },
156
+ "letter-spacing": {
157
+ "value": "{label.large.letter-spacing.value}",
158
+ "type": "font"
159
+ }
160
+ },
161
+ "icon": {
162
+ "@":{
163
+ "value": "\"\\f2ff\"",
164
+ "type": "radius"
165
+ },
166
+ "size":{
167
+ "value": "{icon.size.md.value}",
168
+ "type": "radius"
169
+ }
170
+ },
171
+ "position": {
172
+ "top": {
173
+ "value": "{space.3.value}",
174
+ "type": "space"
175
+ },
176
+ "left": {
177
+ "value": "{space.3.value}",
178
+ "type": "space"
179
+ },
180
+ "right": {
181
+ "value": "{space.3.value}",
182
+ "type": "space"
183
+ },
184
+ "bottom": {
185
+ "value": "{space.3.value}",
186
+ "type": "space"
187
+ }
188
+ },
189
+ "success": {
190
+ "icon": {
191
+ "value": "\"\\f1cf\"",
192
+ "type": "radius"
193
+ }
194
+ },
195
+ "info": {
196
+ "icon": {
197
+ "value": "\"\\f2ff\"",
198
+ "type": "radius"
199
+ }
200
+ },
201
+ "warning": {
202
+ "icon": {
203
+ "value": "\"\\f24c\"",
204
+ "type": "radius"
205
+ }
206
+ },
207
+ "error": {
208
+ "icon": {
209
+ "value": "\"\\f24d\"",
210
+ "type": "radius"
211
+ }
212
+ }
213
+ }
214
+ }
package/tokens/components/toggle/toggle.json ADDED
@@ -0,0 +1,98 @@
1
+ {
2
+ "toggle": {
3
+ "width": {
4
+ "value": "52px",
5
+ "type": "space"
6
+ },
7
+ "height": {
8
+ "value": "32px",
9
+ "type": "space"
10
+ },
11
+ "background": {
12
+ "@": {
13
+ "value": "{color.surface.container.highest.@.value}",
14
+ "type": "color"
15
+ },
16
+ "selected": {
17
+ "value": "{color.secondary.@.value}",
18
+ "type": "color"
19
+ }
20
+ },
21
+ "border": {
22
+ "width": {
23
+ "value": "2px",
24
+ "type": "space"
25
+ },
26
+ "color": {
27
+ "value": "{color.outline.@.value}",
28
+ "type": "color"
29
+ },
30
+ "style": {
31
+ "value": "{border.style.base.value}",
32
+ "type": "radius"
33
+ }
34
+ },
35
+ "radius": {
36
+ "value": "{radius.pill.value}",
37
+ "type": "radius"
38
+ },
39
+ "state": {
40
+ "layer": {
41
+ "size": {
42
+ "value": "40px",
43
+ "type": "space"
44
+ },
45
+ "color": {
46
+ "@": {
47
+ "value": "{color.outline.@.value}",
48
+ "type": "color"
49
+ },
50
+ "selected": {
51
+ "value": "{color.secondary.@.value}",
52
+ "type": "color"
53
+ }
54
+ },
55
+ "opacity": {
56
+ "@": {
57
+ "value": "0",
58
+ "type": "radius"
59
+ },
60
+ "hover": {
61
+ "value": "{opacity.hover.value}",
62
+ "type": "radius"
63
+ },
64
+ "focus": {
65
+ "value": "{opacity.focus.value}",
66
+ "type": "radius"
67
+ },
68
+ "active": {
69
+ "value": "{opacity.active.value}",
70
+ "type": "radius"
71
+ }
72
+ }
73
+ }
74
+ },
75
+ "handle": {
76
+ "size": {
77
+ "@": {
78
+ "value": "16px",
79
+ "type": "space"
80
+ },
81
+ "selected": {
82
+ "value": "24px",
83
+ "type": "space"
84
+ }
85
+ },
86
+ "color": {
87
+ "@": {
88
+ "value": "{color.outline.@.value}",
89
+ "type": "color"
90
+ },
91
+ "selected": {
92
+ "value": "{color.on-secondary.@.value}",
93
+ "type": "color"
94
+ }
95
+ }
96
+ }
97
+ }
98
+ }
package/tokens/components/wizard/wizard.json ADDED
@@ -0,0 +1,232 @@
1
+ {
2
+ "wizard": {
3
+ "background": {
4
+ "value": "{panel.background.@.value}",
5
+ "type": "color"
6
+ },
7
+ "radius": {
8
+ "value": "{panel.radius.value}",
9
+ "type": "radius"
10
+ },
11
+ "shadow": {
12
+ "value": "{panel.shadow.value}",
13
+ "type": "radius"
14
+ },
15
+ "padding": {
16
+ "value": "{space.1.value}",
17
+ "type": "space"
18
+ },
19
+ "gap": {
20
+ "value": "{space.2.value}",
21
+ "type": "color"
22
+ },
23
+ "heading": {
24
+ "background": {
25
+ "value": "{color.surface.bright.@.value}",
26
+ "type": "color"
27
+ },
28
+ "radius": {
29
+ "value": "{wizard.radius.value} {wizard.radius.value} {radius.none.value} {radius.none.value}",
30
+ "type": "radius"
31
+ },
32
+ "padding": {
33
+ "value": "{space.7.value} {space.0.value} {space.7.value} {space.7.value}",
34
+ "type": "space"
35
+ }
36
+ },
37
+ "step": {
38
+ "gap": {
39
+ "value": "{space.2.value}",
40
+ "type": "space"
41
+ },
42
+ "title": {
43
+ "color": {
44
+ "value": "{color.on-surface.@.value}",
45
+ "type": "color"
46
+ },
47
+ "font-family": {
48
+ "value": "{label.large.font-family.value}",
49
+ "type": "font"
50
+ },
51
+ "font-weight": {
52
+ "value": "{font.weight.semibold.value}",
53
+ "type": "font"
54
+ },
55
+ "font-size": {
56
+ "value": "{label.large.font-size.value}",
57
+ "type": "font"
58
+ },
59
+ "line-height": {
60
+ "value": "{label.large.line-height.value}",
61
+ "type": "font"
62
+ },
63
+ "letter-spacing": {
64
+ "value": "{label.large.letter-spacing.value}",
65
+ "type": "font"
66
+ }
67
+ },
68
+ "description": {
69
+ "color": {
70
+ "value": "{color.on-surface.variant.@.value}",
71
+ "type": "color"
72
+ },
73
+ "font-family": {
74
+ "value": "{label.medium.font-family.value}",
75
+ "type": "font"
76
+ },
77
+ "font-weight": {
78
+ "value": "{font.weight.medium.value}",
79
+ "type": "font"
80
+ },
81
+ "font-size": {
82
+ "value": "{label.medium.font-size.value}",
83
+ "type": "font"
84
+ },
85
+ "line-height": {
86
+ "value": "{label.medium.line-height.value}",
87
+ "type": "font"
88
+ },
89
+ "letter-spacing": {
90
+ "value": "{label.medium.letter-spacing.value}",
91
+ "type": "font"
92
+ }
93
+ },
94
+ "indicator": {
95
+ "size": {
96
+ "value": "33px",
97
+ "type": "space"
98
+ },
99
+ "background": {
100
+ "@": {
101
+ "value": "transparent",
102
+ "type": "color"
103
+ },
104
+ "current": {
105
+ "value": "{color.secondary.@.value}",
106
+ "type": "color"
107
+ },
108
+ "active": {
109
+ "value": "{wizard.step.indicator.background.current.value}",
110
+ "type": "color"
111
+ }
112
+ },
113
+ "border": {
114
+ "width": {
115
+ "value": "1.5px",
116
+ "type": "space"
117
+ },
118
+ "style": {
119
+ "value": "solid",
120
+ "type": "radius"
121
+ },
122
+ "color": {
123
+ "value": "{color.outline.@.value}",
124
+ "type": "color"
125
+ }
126
+ },
127
+ "radius": {
128
+ "value": "{radius.circle.value}",
129
+ "type": "radius"
130
+ }
131
+ },
132
+ "count": {
133
+ "color": {
134
+ "@": {
135
+ "value": "{wizard.step.title.color.value}",
136
+ "type": "color"
137
+ },
138
+ "current": {
139
+ "value": "{color.on-secondary.@.value}",
140
+ "type": "color"
141
+ },
142
+ "active": {
143
+ "value": "{wizard.step.count.color.current.value}",
144
+ "type": "color"
145
+ }
146
+ },
147
+ "font-family": {
148
+ "value": "{wizard.step.title.font-family.value}",
149
+ "type": "font"
150
+ },
151
+ "font-weight": {
152
+ "value": "{wizard.step.title.font-weight.value}",
153
+ "type": "font"
154
+ },
155
+ "font-size": {
156
+ "value": "{wizard.step.title.font-size.value}",
157
+ "type": "font"
158
+ },
159
+ "line-height": {
160
+ "value": "{wizard.step.title.line-height.value}",
161
+ "type": "font"
162
+ },
163
+ "letter-spacing": {
164
+ "value": "{wizard.step.title.letter-spacing.value}",
165
+ "type": "font"
166
+ }
167
+ },
168
+ "icon": {
169
+ "color": {
170
+ "@": {
171
+ "value": "{wizard.step.count.color.@.value}",
172
+ "type": "color"
173
+ },
174
+ "current": {
175
+ "value": "{wizard.step.count.color.current.value}",
176
+ "type": "color"
177
+ },
178
+ "active": {
179
+ "value": "{wizard.step.count.color.active.value}",
180
+ "type": "color"
181
+ }
182
+ },
183
+ "size": {
184
+ "value": "{icon.size.sm.value}",
185
+ "type": "space"
186
+ }
187
+ },
188
+ "connector": {
189
+ "width": {
190
+ "value": "1px",
191
+ "type": "space"
192
+ },
193
+ "style": {
194
+ "value": "solid",
195
+ "type": "radius"
196
+ },
197
+ "color": {
198
+ "value": "{color.outline.variant.value}",
199
+ "type": "color"
200
+ }
201
+ },
202
+ "dotted": {
203
+ "size": {
204
+ "value": "8px",
205
+ "type": "space"
206
+ }
207
+ }
208
+ },
209
+ "vertical": {
210
+ "heading": {
211
+ "width": {
212
+ "value": "200px",
213
+ "type": "space"
214
+ },
215
+ "radius": {
216
+ "value": "{wizard.radius.value} {radius.none.value} {radius.none.value} {wizard.radius.value}",
217
+ "type": "radius"
218
+ },
219
+ "padding": {
220
+ "value": "{space.7.value} {space.7.value} {space.0.value} {space.7.value}",
221
+ "type": "space"
222
+ }
223
+ },
224
+ "connector": {
225
+ "height": {
226
+ "value": "100%",
227
+ "type": "space"
228
+ }
229
+ }
230
+ }
231
+ }
232
+ }