@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/date/date.json ADDED
@@ -0,0 +1,146 @@
1
+ {
2
+ "datepicker": {
3
+ "color": {
4
+ "value": "{color.on-surface.@.value}",
5
+ "type": "color"
6
+ },
7
+ "background": {
8
+ "value": "{color.surface.container.high.@.value}",
9
+ "type": "color"
10
+ },
11
+ "border": {
12
+ "radius": {
13
+ "value": "{radius.lg.value}",
14
+ "type": "radius"
15
+ }
16
+ },
17
+ "active": {
18
+ "background": {
19
+ "value": "{color.primary.@.value}",
20
+ "type": "color"
21
+ },
22
+ "color": {
23
+ "value": "{color.on-primary.@.value}",
24
+ "type": "color"
25
+ }
26
+ },
27
+ "previous": {
28
+ "icon": {
29
+ "value": "\"\\f30f\"",
30
+ "type": "radius"
31
+ }
32
+ },
33
+ "next": {
34
+ "icon": {
35
+ "value": "\"\\f310\"",
36
+ "type": "radius"
37
+ }
38
+ },
39
+ "font-family": {
40
+ "value": "{body.medium.font-family.value}",
41
+ "type": "font"
42
+ },
43
+ "font-size": {
44
+ "value": "{body.medium.font-size.value}",
45
+ "type": "font"
46
+ },
47
+ "font-weight": {
48
+ "value": "{body.medium.font-weight.value}",
49
+ "type": "font"
50
+ },
51
+ "line-height": {
52
+ "value": "{body.medium.line-height.value}",
53
+ "type": "font"
54
+ },
55
+ "letter-spacing": {
56
+ "value": "{body.medium.letter-spacing.value}",
57
+ "type": "font"
58
+ },
59
+ "date": {
60
+ "width": {
61
+ "value": "{space.8.value}",
62
+ "type": "space"
63
+ },
64
+ "height": {
65
+ "value": "{space.8.value}",
66
+ "type": "space"
67
+ },
68
+ "color": {
69
+ "value": "{color.on-surface.@.value}",
70
+ "type": "color"
71
+ },
72
+ "background": {
73
+ "value": "{color.surface.container.high.@.value}",
74
+ "type": "color"
75
+ },
76
+ "border": {
77
+ "width": {
78
+ "value": "{border.width.base.value}",
79
+ "type": "space"
80
+ },
81
+ "style": {
82
+ "value": "{border.style.base.value}",
83
+ "type": "radius"
84
+ },
85
+ "color": {
86
+ "value": "{color.surface.container.high.@.value}",
87
+ "type": "color"
88
+ },
89
+ "radius": {
90
+ "value": "{radius.pill.value}",
91
+ "type": "radius"
92
+ }
93
+ },
94
+ "font-family": {
95
+ "value": "{body.medium.font-family.value}",
96
+ "type": "font"
97
+ },
98
+ "font-size": {
99
+ "value": "{body.medium.font-size.value}",
100
+ "type": "font"
101
+ },
102
+ "font-weight": {
103
+ "value": "{body.medium.font-weight.value}",
104
+ "type": "font"
105
+ },
106
+ "line-height": {
107
+ "value": "{body.medium.line-height.value}",
108
+ "type": "font"
109
+ },
110
+ "letter-spacing": {
111
+ "value": "{body.medium.letter-spacing.value}",
112
+ "type": "font"
113
+ },
114
+ "other": {
115
+ "month": {
116
+ "color": {
117
+ "value": "{color.on-surface.variant.@.value}",
118
+ "type": "color"
119
+ }
120
+ }
121
+ },
122
+ "state": {
123
+ "layer": {
124
+ "color": {
125
+ "value": "{color.on-surface.variant.@.value}",
126
+ "type": "color"
127
+ },
128
+ "opacity": {
129
+ "hover": {
130
+ "value": "{opacity.hover.value}",
131
+ "type": "radius"
132
+ },
133
+ "focus": {
134
+ "value": "{opacity.focus.value}",
135
+ "type": "radius"
136
+ },
137
+ "active": {
138
+ "value": "{opacity.active.value}",
139
+ "type": "radius"
140
+ }
141
+ }
142
+ }
143
+ }
144
+ }
145
+ }
146
+ }
package/tokens/components/dropdown-menu/dropdown-menu.json ADDED
@@ -0,0 +1,116 @@
1
+ {
2
+ "dropdown": {
3
+ "menu": {
4
+ "background": {
5
+ "value": "{color.surface.@.value}",
6
+ "type": "color"
7
+ },
8
+ "border": {
9
+ "radius": {
10
+ "value": "{radius.xs.value}",
11
+ "type": "radius"
12
+ }
13
+ },
14
+ "box": {
15
+ "shadow": {
16
+ "value": "{elevation.shadow.2.value}",
17
+ "type": "radius"
18
+ }
19
+ },
20
+ "horizontal": {
21
+ "padding": {
22
+ "value": "{space.0.value} {space.2.value}",
23
+ "type": "space"
24
+ },
25
+ "inline": {
26
+ "submenu": {
27
+ "padding": {
28
+ "value": "{space.0.value}",
29
+ "type": "space"
30
+ }
31
+ }
32
+ }
33
+ },
34
+ "vertical": {
35
+ "padding": {
36
+ "value": "{space.2.value} {space.0.value}",
37
+ "type": "space"
38
+ },
39
+ "inline": {
40
+ "submenu": {
41
+ "padding": {
42
+ "value": "{space.0.value} {space.0.value} {space.0.value} {space.4.value}",
43
+ "type": "space"
44
+ }
45
+ }
46
+ }
47
+ },
48
+ "width": {
49
+ "value": "220px",
50
+ "type": "space"
51
+ },
52
+ "caret": {
53
+ "size": {
54
+ "value": "{icon.size.sm.value}",
55
+ "type": "space"
56
+ }
57
+ },
58
+ "item": {
59
+ "font-family": {
60
+ "value": "{body.large.font-family.value}",
61
+ "type": "font"
62
+ },
63
+ "font-size": {
64
+ "value": "{body.large.font-size.value}",
65
+ "type": "font"
66
+ },
67
+ "font-weight": {
68
+ "value": "{body.large.font-weight.value}",
69
+ "type": "font"
70
+ },
71
+ "line-height": {
72
+ "value": "{body.large.line-height.value}",
73
+ "type": "font"
74
+ },
75
+ "letter-spacing": {
76
+ "value": "{body.large.letter-spacing.value}",
77
+ "type": "font"
78
+ },
79
+ "color": {
80
+ "value": "{color.on-surface.@.value}",
81
+ "type": "color"
82
+ },
83
+ "gap": {
84
+ "value": "{space.3.value}",
85
+ "type": "space"
86
+ },
87
+ "padding": {
88
+ "value": "{space.3.value} {space.4.value}",
89
+ "type": "space"
90
+ },
91
+ "state": {
92
+ "layer": {
93
+ "color": {
94
+ "value": "{color.on-surface.@.value}",
95
+ "type": "color"
96
+ },
97
+ "opacity": {
98
+ "hover": {
99
+ "value": "{opacity.hover.value}",
100
+ "type": "radius"
101
+ },
102
+ "focus": {
103
+ "value": "{opacity.focus.value}",
104
+ "type": "radius"
105
+ },
106
+ "active": {
107
+ "value": "{opacity.active.value}",
108
+ "type": "radius"
109
+ }
110
+ }
111
+ }
112
+ }
113
+ }
114
+ }
115
+ }
116
+ }
package/tokens/components/fileupload/fileupload.json ADDED
@@ -0,0 +1,180 @@
1
+ {
2
+ "file": {
3
+ "upload": {
4
+ "status": {
5
+ "padding": {
6
+ "value": "{space.4.value}",
7
+ "type": "space"
8
+ },
9
+ "border": {
10
+ "color": {
11
+ "value": "{border.color.@.value}",
12
+ "type": "color"
13
+ },
14
+ "width": {
15
+ "value": "{border.width.base.value}",
16
+ "type": "space"
17
+ },
18
+ "style": {
19
+ "value": "{border.style.base.value}",
20
+ "type": "radius"
21
+ }
22
+ },
23
+ "background": {
24
+ "value": "{color.surface.container.low.@.value}",
25
+ "type": "color"
26
+ },
27
+ "radius": {
28
+ "value": "{radius.xs.value}",
29
+ "type": "radius"
30
+ },
31
+ "bottom": {
32
+ "space": {
33
+ "value": "{space.1.value}",
34
+ "type": "radius"
35
+ }
36
+ }
37
+ },
38
+ "bottom": {
39
+ "space": {
40
+ "value": "{space.1.value}",
41
+ "type": "space"
42
+ }
43
+ },
44
+ "title": {
45
+ "color": {
46
+ "value": "{color.black.@.value}",
47
+ "type": "color"
48
+ },
49
+ "font-size": {
50
+ "value": "{body.medium.font-size.value}",
51
+ "type": "font"
52
+ },
53
+ "font-family": {
54
+ "value": "{font.family.brand.value}",
55
+ "type": "font"
56
+ },
57
+ "font-weight": {
58
+ "value": "{font.weight.regular.value}",
59
+ "type": "font"
60
+ },
61
+ "line-height": {
62
+ "value": "{body.medium.line-height.value}",
63
+ "type": "font"
64
+ }
65
+ },
66
+ "size": {
67
+ "color": {
68
+ "value": "{color.black.@.value}",
69
+ "type": "color"
70
+ },
71
+ "font":{
72
+ "size": {
73
+ "value": "{body.small.font-size.value}",
74
+ "type": "font"
75
+ },
76
+ "family": {
77
+ "value": "{font.family.brand.value}",
78
+ "type": "font"
79
+ },
80
+ "weight": {
81
+ "value": "{font.weight.regular.value}",
82
+ "type": "font"
83
+ }
84
+ },
85
+ "line-height": {
86
+ "value": "{body.small.line-height.value}",
87
+ "type": "font"
88
+ }
89
+ },
90
+ "gap": {
91
+ "value": "{space.3.value}",
92
+ "type": "space"
93
+ },
94
+ "drop": {
95
+ "box": {
96
+ "gap": {
97
+ "value": "{space.3.value}",
98
+ "type": "space"
99
+ },
100
+ "bottom": {
101
+ "space": {
102
+ "value": "{space.2.value}",
103
+ "type": "space"
104
+ }
105
+ },
106
+ "background": {
107
+ "value": "{btn.background.value}",
108
+ "type": "color"
109
+ }
110
+ }
111
+ },
112
+ "multi": {
113
+ "file": {
114
+ "radius": {
115
+ "value": "{radius.sm.value}",
116
+ "type": "radius"
117
+ }
118
+ }
119
+ },
120
+ "message": {
121
+ "caption": {
122
+ "color": {
123
+ "value": "{color.black.@.value}",
124
+ "type": "color"
125
+ },
126
+ "font-size": {
127
+ "value": "{body.large.font-size.value}",
128
+ "type": "font"
129
+ },
130
+ "font-family": {
131
+ "value": "{font.family.brand.value}",
132
+ "type": "font"
133
+ },
134
+ "font-weight": {
135
+ "value": "{font.weight.regular.value}",
136
+ "type": "font"
137
+ },
138
+ "line-height": {
139
+ "value": "{body.large.line-height.value}",
140
+ "type": "font"
141
+ }
142
+ },
143
+ "anchor": {
144
+ "color": {
145
+ "value": "{color.black.@.value}",
146
+ "type": "color"
147
+ },
148
+ "font-size": {
149
+ "value": "{body.medium.font-size.value}",
150
+ "type": "font"
151
+ },
152
+ "font-family": {
153
+ "value": "{font.family.brand.value}",
154
+ "type": "font"
155
+ },
156
+ "font-weight": {
157
+ "value": "{font.weight.regular.value}",
158
+ "type": "font"
159
+ },
160
+ "line-height": {
161
+ "value": "{body.medium.line-height.value}",
162
+ "type": "font"
163
+ }
164
+ }
165
+ },
166
+ "media": {
167
+ "icon": {
168
+ "size": {
169
+ "value": "{icon.size.@.value}",
170
+ "type": "space"
171
+ },
172
+ "padding": {
173
+ "value": "{space.1.value}",
174
+ "type": "space"
175
+ }
176
+ }
177
+ }
178
+ }
179
+ }
180
+ }
package/tokens/components/grid-layout/grid-layout.json ADDED
@@ -0,0 +1,18 @@
1
+ {
2
+ "grid": {
3
+ "layout": {
4
+ "row": {
5
+ "gap": {
6
+ "value": "{space.0.value}",
7
+ "type": "space"
8
+ }
9
+ },
10
+ "column": {
11
+ "padding": {
12
+ "value": "{space.2.value}",
13
+ "type": "space"
14
+ }
15
+ }
16
+ }
17
+ }
18
+ }
package/tokens/components/icon/icon.json ADDED
@@ -0,0 +1,8 @@
1
+ {
2
+ "icon": {
3
+ "gap": {
4
+ "value": "{space.1.value}",
5
+ "type": "space"
6
+ }
7
+ }
8
+ }
package/tokens/components/label/label.json ADDED
@@ -0,0 +1,8 @@
1
+ {
2
+ "headings": {
3
+ "color": {
4
+ "value": "{color.on-surface.@.value}",
5
+ "type": "color"
6
+ }
7
+ }
8
+ }
package/tokens/components/list/list.json ADDED
@@ -0,0 +1,72 @@
1
+ {
2
+ "list": {
3
+ "background": {
4
+ "value": "{color.surface.@.value}",
5
+ "type": "color"
6
+ },
7
+ "min": {
8
+ "height": {
9
+ "value": "6rem",
10
+ "type": "space"
11
+ }
12
+ },
13
+ "state": {
14
+ "layer": {
15
+ "color": {
16
+ "value": "{color.on-surface.@.value}",
17
+ "type": "color"
18
+ },
19
+ "opacity": {
20
+ "hover": {
21
+ "value": "{opacity.hover.value}",
22
+ "type": "radius"
23
+ },
24
+ "focus": {
25
+ "value": "{opacity.focus.value}",
26
+ "type": "radius"
27
+ },
28
+ "active": {
29
+ "value": "{opacity.active.value}",
30
+ "type": "radius"
31
+ }
32
+ }
33
+ }
34
+ },
35
+ "item": {
36
+ "background": {
37
+ "@": {
38
+ "value": "{list.background.value}",
39
+ "type": "color"
40
+ },
41
+ "active": {
42
+ "value": "{color.secondary.container.@.value}",
43
+ "type": "color"
44
+ }
45
+ },
46
+ "padding": {
47
+ "value": "{space.3.value} {space.4.value}",
48
+ "type": "space"
49
+ },
50
+ "header": {
51
+ "padding": {
52
+ "value": "{space.3.value} {space.4.value}",
53
+ "type": "space"
54
+ },
55
+ "background": {
56
+ "value": "{color.surface.container.lowest.@.value}",
57
+ "type": "color"
58
+ },
59
+ "color": {
60
+ "value": "{color.on-surface.@.value}",
61
+ "type": "color"
62
+ }
63
+ }
64
+ },
65
+ "disabled": {
66
+ "opacity": {
67
+ "value": "0.38",
68
+ "type": "radius"
69
+ }
70
+ }
71
+ }
72
+ }
package/tokens/components/message/message.json ADDED
@@ -0,0 +1,144 @@
1
+ {
2
+ "message": {
3
+ "container": {
4
+ "shadow": {
5
+ "value": "{elevation.shadow.3.value}",
6
+ "type": "radius"
7
+ },
8
+ "border": {
9
+ "radius": {
10
+ "value": "{radius.xs.value}",
11
+ "type": "radius"
12
+ },
13
+ "width": {
14
+ "value": "{border.width.base.value}",
15
+ "type": "space"
16
+ },
17
+ "style": {
18
+ "value": "{border.style.base.value}",
19
+ "type": "radius"
20
+ },
21
+ "color": {
22
+ "value": "{color.primary.@.value}",
23
+ "type": "color"
24
+ }
25
+ },
26
+ "padding": {
27
+ "value": "{space.3.value} {space.4.value}",
28
+ "type": "space"
29
+ },
30
+ "gap": {
31
+ "value": "{space.3.value}",
32
+ "type": "space"
33
+ },
34
+ "background": {
35
+ "value": "{color.primary.@.value}",
36
+ "type": "color"
37
+ },
38
+ "color": {
39
+ "value": "{color.on-primary.@.value}",
40
+ "type": "color"
41
+ },
42
+ "success": {
43
+ "background": {
44
+ "value": "{color.success.@.value}",
45
+ "type": "color"
46
+ },
47
+ "color": {
48
+ "value": "{color.on-success.@.value}",
49
+ "type": "color"
50
+ },
51
+ "border": {
52
+ "color": {
53
+ "value": "{color.success.@.value}",
54
+ "type": "color"
55
+ }
56
+ }
57
+ },
58
+ "info": {
59
+ "background": {
60
+ "value": "{color.info.@.value}",
61
+ "type": "color"
62
+ },
63
+ "color": {
64
+ "value": "{color.on-info.@.value}",
65
+ "type": "color"
66
+ },
67
+ "border": {
68
+ "color": {
69
+ "value": "{color.info.@.value}",
70
+ "type": "color"
71
+ }
72
+ }
73
+ },
74
+ "warning": {
75
+ "background": {
76
+ "value": "{color.warning.@.value}",
77
+ "type": "color"
78
+ },
79
+ "color": {
80
+ "value": "{color.on-warning.@.value}",
81
+ "type": "color"
82
+ },
83
+ "border": {
84
+ "color": {
85
+ "value": "{color.warning.@.value}",
86
+ "type": "color"
87
+ }
88
+ }
89
+ },
90
+ "danger": {
91
+ "background": {
92
+ "value": "{color.error.@.value}",
93
+ "type": "color"
94
+ },
95
+ "color": {
96
+ "value": "{color.on-error.@.value}",
97
+ "type": "color"
98
+ },
99
+ "border": {
100
+ "color": {
101
+ "value": "{color.error.@.value}",
102
+ "type": "color"
103
+ }
104
+ }
105
+ },
106
+ "loading": {
107
+ "background": {
108
+ "value": "{color.primary.@.value}",
109
+ "type": "color"
110
+ },
111
+ "color": {
112
+ "value": "{color.on-primary.@.value}",
113
+ "type": "color"
114
+ },
115
+ "border": {
116
+ "color": {
117
+ "value": "{color.primary.@.value}",
118
+ "type": "color"
119
+ }
120
+ }
121
+ }
122
+ },
123
+ "font-family": {
124
+ "value": "{label.large.font-family.value}",
125
+ "type": "font"
126
+ },
127
+ "font-weight": {
128
+ "value": "{label.large.font-weight.value}",
129
+ "type": "font"
130
+ },
131
+ "font-size": {
132
+ "value": "{label.large.font-size.value}",
133
+ "type": "font"
134
+ },
135
+ "line-height": {
136
+ "value": "{label.large.line-height.value}",
137
+ "type": "font"
138
+ },
139
+ "letter-spacing": {
140
+ "value": "{label.large.letter-spacing.value}",
141
+ "type": "font"
142
+ }
143
+ }
144
+ }