@agorapulse/ui-theme 0.0.4 → 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.4.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/link.json ADDED
@@ -0,0 +1,127 @@
1
+ {
2
+ "comp": {
3
+ "link": {
4
+ "text": {
5
+ "font-family": {
6
+ "value": "{sys.text.style.body.font-family}"
7
+ },
8
+ "size": {
9
+ "value": "{sys.text.style.body.size}"
10
+ },
11
+ "font-weight": {
12
+ "value": "{sys.text.style.body.weight}"
13
+ },
14
+ "line-height": {
15
+ "value": "{sys.text.style.body.line-height}"
16
+ }
17
+ },
18
+ "small": {
19
+ "text": {
20
+ "style": {
21
+ "font-family": {
22
+ "value": "{sys.text.style.caption.font-family}"
23
+ },
24
+ "size": {
25
+ "value": "{sys.text.style.caption.size}"
26
+ },
27
+ "font-weight": {
28
+ "value": "{sys.text.style.caption.weight}"
29
+ },
30
+ "line-height": {
31
+ "value": "{sys.text.style.caption.line-height}"
32
+ }
33
+ }
34
+ }
35
+ },
36
+ "big": {
37
+ "text": {
38
+ "style": {
39
+ "font-family": {
40
+ "value": "{sys.text.style.subtitle.font-family}"
41
+ },
42
+ "size": {
43
+ "value": "{sys.text.style.subtitle.size}"
44
+ },
45
+ "font-weight": {
46
+ "value": "{sys.text.style.subtitle.weight}"
47
+ },
48
+ "line-height": {
49
+ "value": "{sys.text.style.subtitle.line-height}"
50
+ }
51
+ }
52
+ }
53
+ },
54
+ "standalone": {
55
+ "default": {
56
+ "text": {
57
+ "style": {
58
+ "font-family": {
59
+ "value": "{sys.text.style.bodyBold.font-family}"
60
+ },
61
+ "size": {
62
+ "value": "{sys.text.style.bodyBold.size}"
63
+ },
64
+ "font-weight": {
65
+ "value": "{sys.text.style.bodyBold.weight}"
66
+ },
67
+ "line-height": {
68
+ "value": "{sys.text.style.bodyBold.line-height}"
69
+ }
70
+ }
71
+ }
72
+ },
73
+ "small": {
74
+ "text": {
75
+ "style": {
76
+ "font-family": {
77
+ "value": "{sys.text.style.captionBold.font-family}"
78
+ },
79
+ "size": {
80
+ "value": "{sys.text.style.captionBold.size}"
81
+ },
82
+ "font-weight": {
83
+ "value": "{sys.text.style.captionBold.weight}"
84
+ },
85
+ "line-height": {
86
+ "value": "{sys.text.style.captionBold.line-height}"
87
+ }
88
+ }
89
+ }
90
+ }
91
+ },
92
+ "default": {
93
+ "color": {
94
+ "value": "{sys.color.accent.light.text}"
95
+ }
96
+ },
97
+ "hover": {
98
+ "color": {
99
+ "value": "{sys.color.accent.default.bg.hover}"
100
+ }
101
+ },
102
+ "clicked": {
103
+ "color": {
104
+ "value": "{sys.color.accent.light.text}"
105
+ }
106
+ },
107
+ "disabled": {
108
+ "color": {
109
+ "value": "{sys.color.accent.default.bg.disabled}"
110
+ }
111
+ },
112
+ "visited": {
113
+ "color": {
114
+ "value": "{ref.color.purple.150}"
115
+ }
116
+ },
117
+ "spacing": {
118
+ "value": "{ref.spacing.xxxs}"
119
+ },
120
+ "icon": {
121
+ "size": {
122
+ "value": "{sys.icon.md}"
123
+ }
124
+ }
125
+ }
126
+ }
127
+ }
package/src/tokens/components/radio.json ADDED
@@ -0,0 +1,11 @@
1
+ {
2
+ "comp": {
3
+ "radio": {
4
+ "transition": {
5
+ "duration": {
6
+ "value": "{sys.radio.transition.duration}"
7
+ }
8
+ }
9
+ }
10
+ }
11
+ }
package/src/tokens/components/select.json ADDED
@@ -0,0 +1,279 @@
1
+ {
2
+ "comp": {
3
+ "select": {
4
+ "icon": {
5
+ "focused": {
6
+ "color": {
7
+ "value": "{ref.color.electricBlue.100}"
8
+ }
9
+ }
10
+ },
11
+ "inline": {
12
+ "label": {
13
+ "text": {
14
+ "font-family": {
15
+ "value": "{sys.text.style.body.font-family}"
16
+ },
17
+ "size": {
18
+ "value": "{sys.text.style.body.size}"
19
+ },
20
+ "font-weight": {
21
+ "value": "{sys.text.style.body.weight}"
22
+ },
23
+ "line-height": {
24
+ "value": "{sys.text.style.body.line-height}"
25
+ },
26
+ "color": {
27
+ "value": "{sys.text.color.light}"
28
+ }
29
+ }
30
+ },
31
+ "separator": {
32
+ "color": {
33
+ "value": "{ref.color.grey.40}"
34
+ }
35
+ }
36
+
37
+ },
38
+ "one-line": {
39
+ "height": {
40
+ "value": "{ref.spacing.xl}"
41
+ },
42
+ "spacing": {
43
+ "value": "{ref.spacing.xxs}"
44
+ },
45
+ "padding": {
46
+ "horizontal": {
47
+ "value": "{ref.spacing.sm}"
48
+ }
49
+ },
50
+ "background": {
51
+ "color": {
52
+ "value": "{ref.color.white}"
53
+ }
54
+ },
55
+ "text": {
56
+ "font-family": {
57
+ "value": "{sys.text.style.body.font-family}"
58
+ },
59
+ "size": {
60
+ "value": "{sys.text.style.body.size}"
61
+ },
62
+ "font-weight": {
63
+ "value": "{sys.text.style.body.weight}"
64
+ },
65
+ "line-height": {
66
+ "value": "{sys.text.style.body.line-height}"
67
+ },
68
+ "color": {
69
+ "value": "{ref.color.grey.100}"
70
+ }
71
+ },
72
+ "selected": {
73
+ "text": {
74
+ "font-family": {
75
+ "value": "{sys.text.style.bodyBold.font-family}"
76
+ },
77
+ "size": {
78
+ "value": "{sys.text.style.bodyBold.size}"
79
+ },
80
+ "font-weight": {
81
+ "value": "{sys.text.style.bodyBold.weight}"
82
+ },
83
+ "line-height": {
84
+ "value": "{sys.text.style.bodyBold.line-height}"
85
+ }
86
+ }
87
+ },
88
+ "selectable": {
89
+ "selected": {
90
+ "text": {
91
+ "font-family": {
92
+ "value": "{sys.text.style.bodyBold.font-family}"
93
+ },
94
+ "size": {
95
+ "value": "{sys.text.style.bodyBold.size}"
96
+ },
97
+ "font-weight": {
98
+ "value": "{sys.text.style.bodyBold.weight}"
99
+ },
100
+ "line-height": {
101
+ "value": "{sys.text.style.bodyBold.line-height}"
102
+ }
103
+ }
104
+ }
105
+ }
106
+ },
107
+ "two-line": {
108
+ "height": {
109
+ "value": "unset"
110
+ },
111
+ "padding": {
112
+ "vertical": {
113
+ "value": "{ref.spacing.xxs}"
114
+ }
115
+ },
116
+ "title": {
117
+ "text": {
118
+ "font-family": {
119
+ "value": "{sys.text.style.bodyBold.font-family}"
120
+ },
121
+ "size": {
122
+ "value": "{sys.text.style.bodyBold.size}"
123
+ },
124
+ "font-weight": {
125
+ "value": "{sys.text.style.bodyBold.weight}"
126
+ },
127
+ "line-height": {
128
+ "value": "{sys.text.style.bodyBold.line-height}"
129
+ },
130
+ "color": {
131
+ "value": "{ref.color.grey.100}"
132
+ }
133
+ },
134
+ "spacing": {
135
+ "value": "{ref.spacing.xxs}"
136
+ }
137
+ },
138
+ "caption": {
139
+ "text": {
140
+ "font-family": {
141
+ "value": "{sys.text.style.caption.font-family}"
142
+ },
143
+ "size": {
144
+ "value": "{sys.text.style.caption.size}"
145
+ },
146
+ "font-weight": {
147
+ "value": "{sys.text.style.caption.weight}"
148
+ },
149
+ "line-height": {
150
+ "value": "{sys.text.style.caption.line-height}"
151
+ },
152
+ "color": {
153
+ "value": "{ref.color.grey.80}"
154
+ }
155
+ }
156
+ }
157
+ },
158
+ "group": {
159
+ "padding": {
160
+ "horizontal": {
161
+ "value": "{ref.spacing.sm}"
162
+ },
163
+ "vertical": {
164
+ "value": "{ref.spacing.xxs}"
165
+ }
166
+ },
167
+ "border": {
168
+ "top": {
169
+ "color": {
170
+ "value": "{ref.color.grey.10}"
171
+ }
172
+ }
173
+ },
174
+ "background": {
175
+ "color": {
176
+ "value": "{ref.color.grey.bg}"
177
+ }
178
+ },
179
+ "selected": {
180
+ "gap": {
181
+ "value": "{ref.spacing.xxs}"
182
+ }
183
+ },
184
+ "text": {
185
+ "font-family": {
186
+ "value": "{sys.text.style.captionBold.font-family}"
187
+ },
188
+ "size": {
189
+ "value": "{sys.text.style.captionBold.size}"
190
+ },
191
+ "font-weight": {
192
+ "value": "{sys.text.style.captionBold.weight}"
193
+ },
194
+ "line-height": {
195
+ "value": "{sys.text.style.captionBold.line-height}"
196
+ },
197
+ "color": {
198
+ "value": "{ref.color.grey.100}"
199
+ }
200
+ }
201
+ },
202
+ "separator": {
203
+ "padding": {
204
+ "horizontal": {
205
+ "value": "{ref.spacing.xxs}"
206
+ },
207
+ "vertical": {
208
+ "value": "{ref.spacing.xxs}"
209
+ }
210
+ },
211
+ "color": {
212
+ "value": "{ref.color.grey.10}"
213
+ }
214
+ },
215
+ "padding": {
216
+ "vertical": {
217
+ "value": "{ref.spacing.xxs}"
218
+ }
219
+ },
220
+ "background": {
221
+ "color": {
222
+ "value": "{ref.color.white}"
223
+ }
224
+
225
+ },
226
+ "shadow": {
227
+ "value": "0px 4px 6px -2px rgba(52, 69, 99, 0.15), 0px 4px 25px -2px rgba(52, 69, 99, 0.15)"
228
+ },
229
+ "search-bar": {
230
+ "padding": {
231
+ "horizontal": {
232
+ "value": "{ref.spacing.xxs}"
233
+ },
234
+ "bottom": {
235
+ "value": "{ref.spacing.xxs}"
236
+ }
237
+ },
238
+ "margin": {
239
+ "bottom": {
240
+ "value": "{ref.spacing.xxs}"
241
+ }
242
+ },
243
+ "border": {
244
+ "bottom": {
245
+ "color": {
246
+ "value": "{ref.color.grey.10}"
247
+ }
248
+ }
249
+ },
250
+ "bottom-link": {
251
+ "margin": {
252
+ "top": {
253
+ "value": "{ref.spacing.xs}"
254
+ }
255
+ },
256
+ "padding": {
257
+ "horizontal": {
258
+ "value": "{ref.spacing.sm}"
259
+ },
260
+ "top": {
261
+ "value": "{ref.spacing.xs}"
262
+ },
263
+ "bottom": {
264
+ "value": "{ref.spacing.xxxs}"
265
+ }
266
+ },
267
+ "border": {
268
+ "top": {
269
+ "color": {
270
+ "value": "{ref.color.grey.10}"
271
+ }
272
+ }
273
+ }
274
+ }
275
+ }
276
+
277
+ }
278
+ }
279
+ }
package/src/tokens/components/snackbar.json ADDED
@@ -0,0 +1,71 @@
1
+ {
2
+ "comp": {
3
+ "snackbar": {
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": "{ref.color.grey.100}"
21
+ }
22
+ },
23
+ "width": {
24
+ "value": "420px"
25
+ },
26
+ "border": {
27
+ "radius": {
28
+ "value": "{sys.border.radius.lg}"
29
+ }
30
+ },
31
+ "padding": {
32
+ "horizontal": {
33
+ "value": "{ref.spacing.sm}"
34
+ },
35
+ "vertical": {
36
+ "value": "{ref.spacing.xs}"
37
+ }
38
+ },
39
+ "spacing": {
40
+ "value": "{ref.spacing.xs}"
41
+ },
42
+ "success": {
43
+ "background": {
44
+ "color": {
45
+ "value": "{ref.color.green.20}"
46
+ }
47
+ },
48
+ "icon": {
49
+ "color": {
50
+ "value": "{ref.color.green.150}"
51
+ }
52
+ }
53
+ },
54
+ "error": {
55
+ "background": {
56
+ "color": {
57
+ "value": "{ref.color.red.20}"
58
+ }
59
+ },
60
+ "icon": {
61
+ "color": {
62
+ "value": "{ref.color.red.150}"
63
+ }
64
+ }
65
+ },
66
+ "shadow": {
67
+ "value": "0px 7px 50px 0px rgba(0, 0, 0, 0.08)"
68
+ }
69
+ }
70
+ }
71
+ }
package/src/tokens/components/split-button.json ADDED
@@ -0,0 +1,34 @@
1
+ {
2
+ "comp": {
3
+ "split-button": {
4
+ "text": {
5
+ "size": {
6
+ "value": "{sys.text.style.h4.size}"
7
+ },
8
+ "font-family": {
9
+ "value": "{sys.text.style.h4.font-family}"
10
+ },
11
+ "weight": {
12
+ "value": "{sys.text.style.h4.weight}"
13
+ },
14
+ "lineHeight": {
15
+ "value": "{sys.text.style.h4.line-height}"
16
+ }
17
+ },
18
+ "padding": {
19
+ "horizontal": {
20
+ "value": "{ref.spacing.xxs}"
21
+ },
22
+ "vertical": {
23
+ "value": "{ref.spacing.sm}"
24
+ }
25
+ },
26
+ "borderRadius": {
27
+ "value": "{sys.border.radius.md}"
28
+ },
29
+ "spacing": {
30
+ "value": "{ref.spacing.xxs}"
31
+ }
32
+ }
33
+ }
34
+ }