@agorapulse/ui-theme 0.0.3 → 1.0.0-SNAPSHOT

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 (66) hide show
  1. package/agorapulse-ui-theme-1.0.0-SNAPSHOT.tgz +0 -0
  2. package/assets/desktop_variables.css +616 -0
  3. package/assets/mobile_variables.css +616 -0
  4. package/assets/style/_colors.scss +84 -78
  5. package/assets/style/_font-face.scss +15 -10
  6. package/assets/style/_helpers.scss +5 -3
  7. package/assets/style/_input.scss +52 -0
  8. package/assets/style/_link.scss +70 -0
  9. package/assets/style/_mat-typography.scss +45 -48
  10. package/assets/style/_select.scss +631 -0
  11. package/assets/style/_tooltip.scss +138 -0
  12. package/assets/style/_variables.scss +11 -12
  13. package/assets/style/components-custom-style/_clickable-text.scss +1 -1
  14. package/assets/style/components-custom-style/_form.scss +17 -18
  15. package/assets/style/components-custom-style/_input.scss +38 -38
  16. package/assets/style/components-custom-style/_mat-button-toggle-group.scss +8 -12
  17. package/assets/style/components-custom-style/_mat-button.scss +243 -49
  18. package/assets/style/components-custom-style/_mat-dialog.scss +6 -5
  19. package/assets/style/components-custom-style/_mat-expansion-panel.scss +8 -9
  20. package/assets/style/components-custom-style/_mat-list.scss +4 -4
  21. package/assets/style/components-custom-style/_mat-menu.scss +44 -33
  22. package/assets/style/components-custom-style/_mat-table.scss +3 -0
  23. package/assets/style/components-custom-style/_ng-select.scss +57 -5
  24. package/assets/style/theme.scss +43 -18
  25. package/package.json +23 -18
  26. package/src/README.md +42 -0
  27. package/src/build.js +6 -0
  28. package/src/desktop_config.js +18 -0
  29. package/src/mobile_config.js +18 -0
  30. package/src/tokens/components/badge.json +53 -0
  31. package/src/tokens/components/button.json +37 -0
  32. package/src/tokens/components/counter.json +108 -0
  33. package/src/tokens/components/dot-stepper.json +52 -0
  34. package/src/tokens/components/icon-button.json +18 -0
  35. package/src/tokens/components/infobox.json +139 -0
  36. package/src/tokens/components/input.json +304 -0
  37. package/src/tokens/components/label.json +56 -0
  38. package/src/tokens/components/link.json +127 -0
  39. package/src/tokens/components/radio.json +11 -0
  40. package/src/tokens/components/select.json +279 -0
  41. package/src/tokens/components/snackbar.json +71 -0
  42. package/src/tokens/components/split-button.json +34 -0
  43. package/src/tokens/components/status-card.json +187 -0
  44. package/src/tokens/components/status.json +120 -0
  45. package/src/tokens/components/tag.json +194 -0
  46. package/src/tokens/components/tooltip.json +36 -0
  47. package/src/tokens/reference/animation.json +18 -0
  48. package/src/tokens/reference/border-radius.json +15 -0
  49. package/src/tokens/reference/color.json +151 -0
  50. package/src/tokens/reference/font.json +69 -0
  51. package/src/tokens/reference/spacing.json +33 -0
  52. package/src/tokens/reference/transition.json +9 -0
  53. package/src/tokens/system/border.json +28 -0
  54. package/src/tokens/system/color.json +198 -0
  55. package/src/tokens/system/desktop/button.json +9 -0
  56. package/src/tokens/system/desktop/icon-button.json +15 -0
  57. package/src/tokens/system/icon.json +12 -0
  58. package/src/tokens/system/mobile/button.json +9 -0
  59. package/src/tokens/system/mobile/icon-button.json +15 -0
  60. package/src/tokens/system/radio.json +11 -0
  61. package/src/tokens/system/text.json +173 -0
  62. package/agorapulse-ui-theme-0.0.3.tgz +0 -0
  63. package/assets/style/_grid.scss +0 -166
  64. package/assets/style/components-custom-style/_mat-checkbox.scss +0 -103
  65. package/assets/style/components-custom-style/_mat-radio-button.scss +0 -86
  66. package/assets/style/components-custom-style/_mat-slide-toggle.scss +0 -45
package/src/tokens/components/counter.json ADDED
@@ -0,0 +1,108 @@
1
+ {
2
+ "comp": {
3
+ "counter": {
4
+ "text": {
5
+ "style": {
6
+ "font-family": {
7
+ "value": "{sys.text.style.captionBold.font-family}"
8
+ },
9
+ "size": {
10
+ "value": "{sys.text.style.captionBold.size}"
11
+ },
12
+ "font-weight": {
13
+ "value": "{sys.text.style.captionBold.weight}"
14
+ },
15
+ "line-height": {
16
+ "value": "{sys.text.style.captionBold.line-height}"
17
+ }
18
+ }
19
+ },
20
+ "big": {
21
+ "text": {
22
+ "style": {
23
+ "font-family": {
24
+ "value": "{sys.text.style.bodyBold.font-family}"
25
+ },
26
+ "size": {
27
+ "value": "{sys.text.style.bodyBold.size}"
28
+ },
29
+ "font-weight": {
30
+ "value": "{sys.text.style.bodyBold.weight}"
31
+ },
32
+ "line-height": {
33
+ "value": "{sys.text.style.bodyBold.line-height}"
34
+ }
35
+ }
36
+ },
37
+ "height": {
38
+ "value": "{ref.font.lineHeight.sm}"
39
+ }
40
+ },
41
+ "height": {
42
+ "value": "{ref.font.lineHeight.xs}"
43
+ },
44
+ "border": {
45
+ "radius": {
46
+ "value": "2px"
47
+ }
48
+ },
49
+ "notif": {
50
+ "border": {
51
+ "radius": {
52
+ "value": "{ref.font.lineHeight.xs}"
53
+ }
54
+ },
55
+ "minWidth": {
56
+ "value": "{ref.font.lineHeight.xs}"
57
+ },
58
+ "color": {
59
+ "value": "{ref.color.white}"
60
+ },
61
+ "background": {
62
+ "color": {
63
+ "value": "{sys.color.main.default.bg.default}"
64
+ }
65
+ }
66
+ },
67
+ "orange": {
68
+ "color": {
69
+ "value": "{ref.color.orange.100}"
70
+ },
71
+ "withBackground": {
72
+ "color": {
73
+ "value": "{ref.color.white}"
74
+ },
75
+ "background": {
76
+ "color": {
77
+ "value": "{sys.color.main.default.bg.default}"
78
+ }
79
+ }
80
+ }
81
+ },
82
+ "blue": {
83
+ "color": {
84
+ "value": "{ref.color.electricBlue.150}"
85
+ },
86
+ "withBackground": {
87
+ "background": {
88
+ "color": {
89
+ "value": "{ref.color.electricBlue.10}"
90
+ }
91
+ }
92
+ }
93
+ },
94
+ "grey": {
95
+ "color": {
96
+ "value": "{ref.color.grey.100}"
97
+ },
98
+ "withBackground": {
99
+ "background": {
100
+ "color": {
101
+ "value": "{ref.color.grey.10}"
102
+ }
103
+ }
104
+ }
105
+ }
106
+ }
107
+ }
108
+ }
package/src/tokens/components/dot-stepper.json ADDED
@@ -0,0 +1,52 @@
1
+ {
2
+ "comp": {
3
+ "dot-stepper": {
4
+ "dot": {
5
+ "size": {
6
+ "value": "12px"
7
+ },
8
+ "active": {
9
+ "background": {
10
+ "color": {
11
+ "value": "{ref.color.electricBlue.150}"
12
+ }
13
+ }
14
+ },
15
+ "inactive": {
16
+ "hovered": {
17
+ "background": {
18
+ "color": {
19
+ "value": "{ref.color.electricBlue.60}"
20
+ }
21
+ }
22
+ },
23
+ "clicked": {
24
+ "background": {
25
+ "color": {
26
+ "value": "{ref.color.electricBlue.100}"
27
+ }
28
+ }
29
+ },
30
+ "focused": {
31
+ "background": {
32
+ "color": {
33
+ "value": "{ref.color.electricBlue.60}"
34
+ }
35
+ }
36
+ },
37
+ "border": {
38
+ "width": {
39
+ "value": "2px"
40
+ },
41
+ "color": {
42
+ "value": "{ref.color.grey.40}"
43
+ }
44
+ }
45
+ }
46
+ },
47
+ "spacing": {
48
+ "value": "{ref.spacing.xxs}"
49
+ }
50
+ }
51
+ }
52
+ }
package/src/tokens/components/icon-button.json ADDED
@@ -0,0 +1,18 @@
1
+ {
2
+ "comp": {
3
+ "iconButton": {
4
+ "padding": {
5
+ "value": "{sys.icon-button.padding}"
6
+ },
7
+ "width": {
8
+ "value": "{sys.icon-button.width}"
9
+ },
10
+ "height": {
11
+ "value": "{sys.icon-button.height}"
12
+ },
13
+ "borderRadius": {
14
+ "value": "{sys.border.radius.lg}"
15
+ }
16
+ }
17
+ }
18
+ }
package/src/tokens/components/infobox.json ADDED
@@ -0,0 +1,139 @@
1
+ {
2
+ "comp": {
3
+ "infobox": {
4
+ "border": {
5
+ "width": {
6
+ "value": "{ref.spacing.xxxs}"
7
+ },
8
+ "radius": {
9
+ "value": "{ref.borderRadius.sm}"
10
+ }
11
+ },
12
+ "text": {
13
+ "title": {
14
+ "size": {
15
+ "value": "{sys.text.style.h3.size}"
16
+ },
17
+ "font-family": {
18
+ "value": "{sys.text.style.h3.font-family}"
19
+ },
20
+ "weight": {
21
+ "value": "{sys.text.style.h3.weight}"
22
+ },
23
+ "lineHeight": {
24
+ "value": "{sys.text.style.h3.line-height}"
25
+ }
26
+ },
27
+ "content": {
28
+ "size": {
29
+ "value": "{sys.text.style.body.size}"
30
+ },
31
+ "font-family": {
32
+ "value": "{sys.text.style.body.font-family}"
33
+ },
34
+ "weight": {
35
+ "value": "{sys.text.style.body.weight}"
36
+ },
37
+ "lineHeight": {
38
+ "value": "{sys.text.style.body.line-height}"
39
+ }
40
+ }
41
+ },
42
+ "padding": {
43
+ "right": {
44
+ "value": "{ref.spacing.xs}"
45
+ },
46
+ "left": {
47
+ "value": "{ref.spacing.sm}"
48
+ },
49
+ "bottom": {
50
+ "value": "{ref.spacing.xs}"
51
+ },
52
+ "top": {
53
+ "value": "{ref.spacing.xs}"
54
+ }
55
+ },
56
+ "button": {
57
+ "margin": {
58
+ "right": {
59
+ "value": "{ref.spacing.xxs}"
60
+ },
61
+ "left": {
62
+ "value": "{ref.spacing.xxs}"
63
+ }
64
+ }
65
+ },
66
+ "gap": {
67
+ "value": "{ref.spacing.xs}"
68
+ },
69
+ "error": {
70
+ "background": {
71
+ "color": {
72
+ "value": "{ref.color.red.20}"
73
+ }
74
+ },
75
+ "borderLeft": {
76
+ "color": {
77
+ "value": "{ref.color.red.150}"
78
+ }
79
+ },
80
+ "icon": {
81
+ "color": {
82
+ "value": "{ref.color.red.150}"
83
+ }
84
+ }
85
+ },
86
+ "warning": {
87
+ "background": {
88
+ "color": {
89
+ "value": "{ref.color.tag-orange.20}"
90
+ }
91
+ },
92
+ "borderLeft": {
93
+ "color": {
94
+ "value": "{ref.color.tag-orange.150}"
95
+ }
96
+ },
97
+ "icon": {
98
+ "color": {
99
+ "value": "{ref.color.tag-orange.150}"
100
+ }
101
+ }
102
+ },
103
+ "info": {
104
+ "background": {
105
+ "color": {
106
+ "value": "{ref.color.electricBlue.20}"
107
+ }
108
+ },
109
+ "borderLeft": {
110
+ "color": {
111
+ "value": "{ref.color.electricBlue.150}"
112
+ }
113
+ },
114
+ "icon": {
115
+ "color": {
116
+ "value": "{ref.color.electricBlue.150}"
117
+ }
118
+ }
119
+ },
120
+ "success": {
121
+ "background": {
122
+ "color": {
123
+ "value": "{ref.color.green.20}"
124
+ }
125
+ },
126
+ "borderLeft": {
127
+ "color": {
128
+ "value": "{ref.color.green.150}"
129
+ }
130
+ },
131
+ "icon": {
132
+ "color": {
133
+ "value": "{ref.color.green.150}"
134
+ }
135
+ }
136
+ }
137
+ }
138
+ }
139
+ }
package/src/tokens/components/input.json ADDED
@@ -0,0 +1,304 @@
1
+ {
2
+ "comp": {
3
+ "input ": {
4
+ "width": {
5
+ "default": {
6
+ "value": "256px"
7
+ }
8
+ },
9
+ "height": {
10
+ "value": "36px"
11
+ },
12
+ "padding": {
13
+ "horizontal": {
14
+ "value": "{ref.spacing.xs}"
15
+ }
16
+ },
17
+ "spacing": {
18
+ "horizontal": {
19
+ "value": "{ref.spacing.xxs}"
20
+ }
21
+ },
22
+ "border": {
23
+ "radius" : {
24
+ "value": "{sys.border.radius.sm}"
25
+ },
26
+ "default": {
27
+ "color": {
28
+ "value": "{ref.color.grey.20}"
29
+ }
30
+ },
31
+ "hover": {
32
+ "color": {
33
+ "value": "{ref.color.grey.40}"
34
+ }
35
+ },
36
+ "focused": {
37
+ "color": {
38
+ "value": "{sys.border.color.active}"
39
+ }
40
+ },
41
+ "error": {
42
+ "color": {
43
+ "value": "{sys.border.color.error}"
44
+ }
45
+ },
46
+ "success": {
47
+ "color": {
48
+ "value": "{ref.color.green.100}"
49
+ }
50
+ },
51
+ "disabled": {
52
+ "color": {
53
+ "value": "{ref.color.grey.20}"
54
+ }
55
+ }
56
+ },
57
+ "fill": {
58
+ "color": {
59
+ "value": "{ref.color.white}"
60
+ },
61
+ "disabled": {
62
+ "color": {
63
+ "value": "{ref.color.grey.20}"
64
+ }
65
+ }
66
+ },
67
+ "icon": {
68
+ "size": {
69
+ "value": "{sys.icon.md}"
70
+ },
71
+ "color": {
72
+ "value": "{ref.color.grey.60}"
73
+ }
74
+ },
75
+ "text": {
76
+ "font-family": {
77
+ "value": "{sys.text.style.body.font-family}"
78
+ },
79
+ "size": {
80
+ "value": "{sys.text.style.body.size}"
81
+ },
82
+ "font-weight": {
83
+ "value": "{sys.text.style.body.weight}"
84
+ },
85
+ "line-height": {
86
+ "value": "{sys.text.style.body.line-height}"
87
+ },
88
+ "default": {
89
+ "color": {
90
+ "value": "{sys.text.color.default}"
91
+ }
92
+ },
93
+ "disabled": {
94
+ "color": {
95
+ "value": "{ref.color.grey.80}"
96
+ }
97
+ },
98
+ "placeholder": {
99
+ "color": {
100
+ "value": "{ref.color.grey.60}"
101
+ }
102
+ }
103
+ }
104
+ },
105
+ "forms": {
106
+ "label": {
107
+ "font-family": {
108
+ "value": "{sys.text.style.body.font-family}"
109
+ },
110
+ "size": {
111
+ "value": "{sys.text.style.body.size}"
112
+ },
113
+ "font-weight": {
114
+ "value": "{sys.text.style.body.weight}"
115
+ },
116
+ "line-height": {
117
+ "value": "{sys.text.style.body.line-height}"
118
+ },
119
+ "text": {
120
+ "color": {
121
+ "value": "{sys.text.color.default}"
122
+ }
123
+ },
124
+ "description": {
125
+ "text": {
126
+ "font-family": {
127
+ "value": "{sys.text.style.caption.font-family}"
128
+ },
129
+ "size": {
130
+ "value": "{sys.text.style.caption.size}"
131
+ },
132
+ "font-weight": {
133
+ "value": "{sys.text.style.caption.weight}"
134
+ },
135
+ "line-height": {
136
+ "value": "{sys.text.style.caption.line-height}"
137
+ },
138
+ "color": {
139
+ "value": "{sys.text.color.light}"
140
+ }
141
+ }
142
+ },
143
+ "spacing": {
144
+ "vertical": {
145
+ "value": "{ref.spacing.xxxs}"
146
+ }
147
+ },
148
+ "padding":{
149
+ "bottom": {
150
+ "value": "{ref.spacing.xxs}"
151
+ }
152
+ }
153
+ },
154
+ "status": {
155
+ "icon": {
156
+ "size": {
157
+ "value": "{sys.icon.md}"
158
+ },
159
+ "error": {
160
+ "color": {
161
+ "value": "{ref.color.red.100}"
162
+ }
163
+ },
164
+ "success": {
165
+ "color": {
166
+ "value": "{ref.color.green.100}"
167
+ }
168
+ }
169
+ },
170
+ "spacing": {
171
+ "vertical": {
172
+ "value": "{ref.spacing.xxxs}"
173
+ }
174
+ },
175
+ "text": {
176
+ "font-family": {
177
+ "value": "{sys.text.style.body.font-family}"
178
+ },
179
+ "size": {
180
+ "value": "{sys.text.style.body.size}"
181
+ },
182
+ "font-weight": {
183
+ "value": "{sys.text.style.body.weight}"
184
+ },
185
+ "line-height": {
186
+ "value": "{sys.text.style.body.line-height}"
187
+ },
188
+ "error": {
189
+ "color": {
190
+ "value": "{sys.color.error.text}"
191
+ }
192
+ },
193
+ "success": {
194
+ "color": {
195
+ "value": "{sys.color.success.light.text}"
196
+ }
197
+ }
198
+ }
199
+ }
200
+ },
201
+ "text-area": {
202
+ "width": {
203
+ "default": {
204
+ "value": "256px"
205
+ }
206
+ },
207
+ "height": {
208
+ "value": "80px"
209
+ },
210
+ "padding": {
211
+ "horizontal": {
212
+ "value": "{ref.spacing.xs}"
213
+ }
214
+ },
215
+ "spacing": {
216
+ "horizontal": {
217
+ "value": "{ref.spacing.xxs}"
218
+ }
219
+ },
220
+ "border": {
221
+ "radius" : {
222
+ "value": "{sys.border.radius.sm}"
223
+ },
224
+ "default": {
225
+ "color": {
226
+ "value": "{ref.color.grey.60}"
227
+ }
228
+ },
229
+ "hover": {
230
+ "color": {
231
+ "value": "{ref.color.grey.80}"
232
+ }
233
+ },
234
+ "focused": {
235
+ "color": {
236
+ "value": "{sys.border.color.active}"
237
+ }
238
+ },
239
+ "error": {
240
+ "color": {
241
+ "value": "{sys.border.color.error}"
242
+ }
243
+ },
244
+ "success": {
245
+ "color": {
246
+ "value": "{ref.color.green.100}"
247
+ }
248
+ },
249
+ "disabled": {
250
+ "color": {
251
+ "value": "{ref.color.grey.20}"
252
+ }
253
+ }
254
+ },
255
+ "fill": {
256
+ "color": {
257
+ "value": "{ref.color.white}"
258
+ },
259
+ "disabled": {
260
+ "color": {
261
+ "value": "{ref.color.grey.20}"
262
+ }
263
+ }
264
+ },
265
+ "icon": {
266
+ "size": {
267
+ "value": "{sys.icon.md}"
268
+ },
269
+ "color": {
270
+ "value": "{ref.color.grey.60}"
271
+ }
272
+ },
273
+ "text": {
274
+ "font-family": {
275
+ "value": "{sys.text.style.body.font-family}"
276
+ },
277
+ "size": {
278
+ "value": "{sys.text.style.body.size}"
279
+ },
280
+ "font-weight": {
281
+ "value": "{sys.text.style.body.weight}"
282
+ },
283
+ "line-height": {
284
+ "value": "{sys.text.style.body.line-height}"
285
+ },
286
+ "default": {
287
+ "color": {
288
+ "value": "{sys.text.color.default}"
289
+ }
290
+ },
291
+ "disabled": {
292
+ "color": {
293
+ "value": "{ref.color.grey.80}"
294
+ }
295
+ },
296
+ "placeholder": {
297
+ "color": {
298
+ "value": "{ref.color.grey.60}"
299
+ }
300
+ }
301
+ }
302
+ }
303
+ }
304
+ }
package/src/tokens/components/label.json ADDED
@@ -0,0 +1,56 @@
1
+ {
2
+ "comp": {
3
+ "label": {
4
+ "text": {
5
+ "style": {
6
+ "font-family": {
7
+ "value": "{sys.text.style.body.font-family}"
8
+ },
9
+ "size": {
10
+ "value": "{sys.text.style.body.size}"
11
+ },
12
+ "font-weight": {
13
+ "value": "{sys.text.style.body.weight}"
14
+ },
15
+ "line-height": {
16
+ "value": "{sys.text.style.body.line-height}"
17
+ }
18
+ },
19
+ "color": {
20
+ "value": "{sys.text.color.default}"
21
+ }
22
+ },
23
+ "border": {
24
+ "radius": {
25
+ "value": "{ref.spacing.md}"
26
+ }
27
+ },
28
+ "background": {
29
+ "color": {
30
+ "value": "{ref.color.electricBlue.20}"
31
+ }
32
+ },
33
+ "height": {
34
+ "value": "{ref.spacing.md}"
35
+ },
36
+ "padding": {
37
+ "left": {
38
+ "value": "{ref.spacing.xxs}"
39
+ },
40
+ "right": {
41
+ "value": "{ref.spacing.xxs}"
42
+ }
43
+ },
44
+ "closable": {
45
+ "spacing": {
46
+ "value": "{ref.spacing.xxxs}"
47
+ },
48
+ "padding": {
49
+ "right": {
50
+ "value": "2px"
51
+ }
52
+ }
53
+ }
54
+ }
55
+ }
56
+ }