@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/reference/color.json ADDED
@@ -0,0 +1,151 @@
1
+ {
2
+ "ref": {
3
+ "color": {
4
+ "white": {
5
+ "value": "#FFFFFF"
6
+ },
7
+ "background": {
8
+ "value": "#F9F9FA"
9
+ },
10
+ "orange": {
11
+ "150" : { "value": "#C83E07" },
12
+ "100" : { "value": "#FF6726" },
13
+ "80" : { "value": "#FF7E46" },
14
+ "60" : { "value": "#FFA47D" },
15
+ "40" : { "value": "#FFC2A8" },
16
+ "20" : { "value": "#FFE1D4" },
17
+ "10" : { "value": "#FFEFE9" }
18
+ },
19
+ "electricBlue": {
20
+ "150" : { "value": "#0E72D6" },
21
+ "100" : { "value": "#178DFE" },
22
+ "80" : { "value": "#3A9EFE" },
23
+ "60" : { "value": "#74BBFE" },
24
+ "40" : { "value": "#A2D1FF" },
25
+ "20" : { "value": "#D1E8FF" },
26
+ "10" : { "value": "#E8F4FF" },
27
+ "05" : { "value": "#F3F9FF" }
28
+ },
29
+ "softBlue": {
30
+ "150" : { "value": "#2873BA" },
31
+ "100" : { "value": "#61A4E4" },
32
+ "80" : { "value": "#78B1E8" },
33
+ "60" : { "value": "#A0C8EF" },
34
+ "40" : { "value": "#C0DBF4" },
35
+ "20" : { "value": "#DFEDFA" },
36
+ "10" : { "value": "#EFF5FC" }
37
+ },
38
+ "grey": {
39
+ "150" : { "value": "#212E44" },
40
+ "100" : { "value": "#344563" },
41
+ "80" : { "value": "#5D6A82" },
42
+ "60" : { "value": "#858FA1" },
43
+ "40" : { "value": "#AEB5C1" },
44
+ "20" : { "value": "#D6DAE0" },
45
+ "10" : { "value": "#EAECEF" },
46
+ "05" : { "value": "#F5F5F7" },
47
+ "bg" : { "value": "#F9F9FA" }
48
+ },
49
+ "green": {
50
+ "150" : { "value": "#0F821D" },
51
+ "100" : { "value": "#45B854" },
52
+ "80" : { "value": "#61C26D" },
53
+ "60" : { "value": "#8FD498" },
54
+ "40" : { "value": "#B5E3BB" },
55
+ "20" : { "value": "#DAF1DD" },
56
+ "10" : { "value": "#ECF7ED" }
57
+ },
58
+ "tag-orange": {
59
+ "150" : { "value": "#A66200" },
60
+ "100" : { "value": "#FBB500" },
61
+ "80" : { "value": "#FCC026" },
62
+ "60" : { "value": "#FDD366" },
63
+ "40" : { "value": "#FDE199" },
64
+ "20" : { "value": "#FEF0CC" },
65
+ "10" : { "value": "#FFF8E6" }
66
+ },
67
+ "yellow": {
68
+ "150" : { "value": "#A56608" },
69
+ "100" : { "value": "#FFE91F" },
70
+ "80" : { "value": "#FFEC41" },
71
+ "60" : { "value": "#FFF279" },
72
+ "40" : { "value": "#FFF6A5" },
73
+ "20" : { "value": "#FFFBD2" },
74
+ "10" : { "value": "#FFFDE9" }
75
+ },
76
+ "red": {
77
+ "150" : { "value": "#D80505" },
78
+ "100" : { "value": "#E81313" },
79
+ "80" : { "value": "#EB3636" },
80
+ "60" : { "value": "#F17171" },
81
+ "40" : { "value": "#F6A1A1" },
82
+ "20" : { "value": "#FAD0D0" },
83
+ "10" : { "value": "#FDE7E7" }
84
+ },
85
+ "purple": {
86
+ "150" : { "value": "#3C2C95" },
87
+ "100" : { "value": "#6554C0" },
88
+ "80" : { "value": "#7C6DC9" },
89
+ "60" : { "value": "#A398D9" },
90
+ "40" : { "value": "#C1BBE6" },
91
+ "20" : { "value": "#E0DDF2" },
92
+ "10" : { "value": "#EFEDF8" },
93
+ "05" : { "value": "#F6F8FF" }
94
+ },
95
+ "menthol": {
96
+ "150" : { "value": "#057E7A" },
97
+ "100" : { "value": "#0FA09B" },
98
+ "80" : { "value": "#1DBEB0" },
99
+ "60" : { "value": "#64C8BC" },
100
+ "40" : { "value": "#9FD9D6" },
101
+ "20" : { "value": "#CFECEA" },
102
+ "10" : { "value": "#F1F9F8" }
103
+ },
104
+ "web": {
105
+ "100" : { "value": "#1F1F1F" }
106
+ },
107
+ "facebook": {
108
+ "100" : { "value": "#0866FF" },
109
+ "10" : { "value": "#e7f1fd" }
110
+ },
111
+ "instagram": {
112
+ "100" : { "value": "#DD2A7B" },
113
+ "10" : { "value": "#fbe9f1" }
114
+ },
115
+ "twitter": {
116
+ "100" : { "value": "#1DA1F2" },
117
+ "10" : { "value": "#e8f5fd" }
118
+ },
119
+ "x": {
120
+ "100" : { "value": "#000000" }
121
+
122
+ },
123
+ "linkedin": {
124
+ "100" : { "value": "#2668B2" },
125
+ "10" : { "value": "#e6eff9" }
126
+ },
127
+ "youtube": {
128
+ "100" : { "value": "#FE0101" },
129
+ "10" : { "value": "#fee5e5" }
130
+ },
131
+ "tiktok": {
132
+ "default": {
133
+ "100" : { "value": "#000000" },
134
+ "10" : { "value": "#e5e5e5" }
135
+ },
136
+ "blue": {
137
+ "100" : { "value": "#25F4EE" },
138
+ "10" : { "value": "#e9fdfd" }
139
+ },
140
+ "red": {
141
+ "100" : { "value": "#FE2C55" },
142
+ "10" : { "value": "#fee9ee" }
143
+ }
144
+ },
145
+ "pinterest": {
146
+ "100" : { "value": "#E60023" },
147
+ "10" : { "value": "#fee5e5" }
148
+ }
149
+ }
150
+ }
151
+ }
package/src/tokens/reference/font.json ADDED
@@ -0,0 +1,69 @@
1
+ {
2
+ "ref": {
3
+ "font": {
4
+ "family": {
5
+ "value": "Averta"
6
+ },
7
+ "size": {
8
+ "xs": {
9
+ "value": "12px"
10
+ },
11
+ "sm": {
12
+ "value": "14px"
13
+ },
14
+ "md": {
15
+ "value": "16px"
16
+ },
17
+ "lg": {
18
+ "value": "18px"
19
+ },
20
+ "xl": {
21
+ "value": "20px"
22
+ },
23
+ "xxl": {
24
+ "value": "24px"
25
+ },
26
+ "xxxl": {
27
+ "value": "28px"
28
+ }
29
+ },
30
+ "weight": {
31
+ "regular": {
32
+ "value": 400
33
+ },
34
+ "bold": {
35
+ "value": 700
36
+ },
37
+ "extraBold": {
38
+ "value": 800
39
+ },
40
+ "black": {
41
+ "value": 900
42
+ }
43
+ },
44
+ "lineHeight": {
45
+ "xxs": {
46
+ "value": "14px"
47
+ },
48
+ "xs": {
49
+ "value": "16px"
50
+ },
51
+ "sm": {
52
+ "value": "18px"
53
+ },
54
+ "md": {
55
+ "value": "20px"
56
+ },
57
+ "lg": {
58
+ "value": "24px"
59
+ },
60
+ "xl": {
61
+ "value": "32px"
62
+ },
63
+ "xxl": {
64
+ "value": "36px"
65
+ }
66
+ }
67
+ }
68
+ }
69
+ }
package/src/tokens/reference/spacing.json ADDED
@@ -0,0 +1,33 @@
1
+ {
2
+ "ref": {
3
+ "spacing": {
4
+ "xxxs" : {
5
+ "value": "4px"
6
+ },
7
+ "xxs" : {
8
+ "value": "8px"
9
+ },
10
+ "xs" : {
11
+ "value": "12px"
12
+ },
13
+ "sm" : {
14
+ "value": "16px"
15
+ },
16
+ "md" : {
17
+ "value": "24px"
18
+ },
19
+ "lg" : {
20
+ "value": "32px"
21
+ },
22
+ "xl" : {
23
+ "value": "40px"
24
+ },
25
+ "xxl" : {
26
+ "value": "48px"
27
+ },
28
+ "xxxl" : {
29
+ "value": "60px"
30
+ }
31
+ }
32
+ }
33
+ }
package/src/tokens/reference/transition.json ADDED
@@ -0,0 +1,9 @@
1
+ {
2
+ "ref": {
3
+ "transition": {
4
+ "duration" : {
5
+ "value": "250ms"
6
+ }
7
+ }
8
+ }
9
+ }
package/src/tokens/system/border.json ADDED
@@ -0,0 +1,28 @@
1
+ {
2
+ "sys": {
3
+ "border": {
4
+ "color": {
5
+ "default": {
6
+ "value": "{ref.color.grey.10}"
7
+ },
8
+ "active": {
9
+ "value": "{ref.color.electricBlue.100}"
10
+ },
11
+ "error": {
12
+ "value": "{ref.color.red.100}"
13
+ }
14
+ },
15
+ "radius": {
16
+ "sm": {
17
+ "value": "{ref.borderRadius.sm}"
18
+ },
19
+ "md": {
20
+ "value": "{ref.borderRadius.sm}"
21
+ },
22
+ "lg": {
23
+ "value": "{ref.borderRadius.lg}"
24
+ }
25
+ }
26
+ }
27
+ }
28
+ }
package/src/tokens/system/color.json ADDED
@@ -0,0 +1,198 @@
1
+ {
2
+ "sys": {
3
+ "color": {
4
+ "main": {
5
+ "default": {
6
+ "bg": {
7
+ "default": {
8
+ "value": "{ref.color.orange.100}"
9
+ },
10
+ "hover": {
11
+ "value": "{ref.color.orange.80}"
12
+ },
13
+ "clicked": {
14
+ "value": "{ref.color.orange.60}"
15
+ },
16
+ "disabled": {
17
+ "value": "{ref.color.orange.20}"
18
+ }
19
+ },
20
+ "text": {
21
+ "value": "{ref.color.white}"
22
+ }
23
+ },
24
+ "light": {
25
+ "bg": {
26
+ "value": "{ref.color.orange.10}"
27
+ },
28
+ "text": {
29
+ "value": "{ref.color.orange.150}"
30
+ }
31
+ },
32
+ "text": {
33
+ "value": "{ref.color.orange.100}"
34
+ }
35
+ },
36
+ "accent": {
37
+ "default": {
38
+ "bg": {
39
+ "default": {
40
+ "value": "{ref.color.electricBlue.100}"
41
+ },
42
+ "hover": {
43
+ "value": "{ref.color.electricBlue.80}"
44
+ },
45
+ "clicked": {
46
+ "value": "{ref.color.electricBlue.60}"
47
+ },
48
+ "disabled": {
49
+ "value": "{ref.color.electricBlue.20}"
50
+ }
51
+ },
52
+ "text": {
53
+ "value": "{ref.color.white}"
54
+ }
55
+ },
56
+ "light": {
57
+ "bg": {
58
+ "value": "{ref.color.electricBlue.05}"
59
+ },
60
+ "text": {
61
+ "value": "{ref.color.electricBlue.150}"
62
+ }
63
+ },
64
+ "text": {
65
+ "value": "{ref.color.electricBlue.100}"
66
+ }
67
+ },
68
+ "error": {
69
+ "default": {
70
+ "bg": {
71
+ "default": {
72
+ "value": "{ref.color.red.100}"
73
+ },
74
+ "hover": {
75
+ "value": "{ref.color.red.80}"
76
+ },
77
+ "clicked": {
78
+ "value": "{ref.color.red.60}"
79
+ },
80
+ "disabled": {
81
+ "value": "{ref.color.red.20}"
82
+ }
83
+ },
84
+ "text": {
85
+ "value": "{ref.color.white}"
86
+ }
87
+ },
88
+ "light": {
89
+ "bg": {
90
+ "value": "{ref.color.red.10}"
91
+ },
92
+ "text": {
93
+ "value": "{ref.color.red.150}"
94
+ }
95
+ },
96
+ "text": {
97
+ "value": "{ref.color.red.100}"
98
+ }
99
+ },
100
+ "warning": {
101
+ "default": {
102
+ "bg": {
103
+ "default": {
104
+ "value": "{ref.color.yellow.100}"
105
+ },
106
+ "hover": {
107
+ "value": "{ref.color.yellow.80}"
108
+ },
109
+ "clicked": {
110
+ "value": "{ref.color.yellow.60}"
111
+ },
112
+ "disabled": {
113
+ "value": "{ref.color.yellow.20}"
114
+ }
115
+ },
116
+ "text": {
117
+ "value": "{ref.color.white}"
118
+ }
119
+ },
120
+ "light": {
121
+ "bg": {
122
+ "value": "{ref.color.yellow.10}"
123
+ },
124
+ "text": {
125
+ "value": "{ref.color.yellow.150}"
126
+ }
127
+ },
128
+ "text": {
129
+ "value": "{ref.color.yellow.100}"
130
+ }
131
+ },
132
+ "success": {
133
+ "default": {
134
+ "bg": {
135
+ "default": {
136
+ "value": "{ref.color.green.100}"
137
+ },
138
+ "hover": {
139
+ "value": "{ref.color.green.80}"
140
+ },
141
+ "clicked": {
142
+ "value": "{ref.color.green.60}"
143
+ },
144
+ "disabled": {
145
+ "value": "{ref.color.green.20}"
146
+ }
147
+ },
148
+ "text": {
149
+ "value": "{ref.color.white}"
150
+ }
151
+ },
152
+ "light": {
153
+ "bg": {
154
+ "value": "{ref.color.green.10}"
155
+ },
156
+ "text": {
157
+ "value": "{ref.color.green.150}"
158
+ }
159
+ },
160
+ "text": {
161
+ "value": "{ref.color.green.100}"
162
+ }
163
+ },
164
+ "featureLock": {
165
+ "default": {
166
+ "bg": {
167
+ "default": {
168
+ "value": "{ref.color.purple.100}"
169
+ },
170
+ "hover": {
171
+ "value": "{ref.color.purple.80}"
172
+ },
173
+ "clicked": {
174
+ "value": "{ref.color.purple.60}"
175
+ },
176
+ "disabled": {
177
+ "value": "{ref.color.purple.20}"
178
+ }
179
+ },
180
+ "text": {
181
+ "value": "{ref.color.white}"
182
+ }
183
+ },
184
+ "light": {
185
+ "bg": {
186
+ "value": "{ref.color.purple.10}"
187
+ },
188
+ "text": {
189
+ "value": "{ref.color.purple.150}"
190
+ }
191
+ },
192
+ "text": {
193
+ "value": "{ref.color.purple.100}"
194
+ }
195
+ }
196
+ }
197
+ }
198
+ }
package/src/tokens/system/desktop/button.json ADDED
@@ -0,0 +1,9 @@
1
+ {
2
+ "sys": {
3
+ "button": {
4
+ "height": {
5
+ "value": "36px"
6
+ }
7
+ }
8
+ }
9
+ }
package/src/tokens/system/desktop/icon-button.json ADDED
@@ -0,0 +1,15 @@
1
+ {
2
+ "sys": {
3
+ "icon-button": {
4
+ "padding": {
5
+ "value": "10px"
6
+ },
7
+ "width": {
8
+ "value": "36px"
9
+ },
10
+ "height": {
11
+ "value": "36px"
12
+ }
13
+ }
14
+ }
15
+ }
package/src/tokens/system/icon.json ADDED
@@ -0,0 +1,12 @@
1
+ {
2
+ "sys": {
3
+ "icon": {
4
+ "sm": {
5
+ "value": "{ref.font.size.sm}"
6
+ },
7
+ "md": {
8
+ "value": "{ref.font.size.md}"
9
+ }
10
+ }
11
+ }
12
+ }
package/src/tokens/system/mobile/button.json ADDED
@@ -0,0 +1,9 @@
1
+ {
2
+ "sys": {
3
+ "button": {
4
+ "height": {
5
+ "value": "40px"
6
+ }
7
+ }
8
+ }
9
+ }
package/src/tokens/system/mobile/icon-button.json ADDED
@@ -0,0 +1,15 @@
1
+ {
2
+ "sys": {
3
+ "icon-button": {
4
+ "padding": {
5
+ "value": "8px"
6
+ },
7
+ "width": {
8
+ "value": "36px"
9
+ },
10
+ "height": {
11
+ "value": "36px"
12
+ }
13
+ }
14
+ }
15
+ }
package/src/tokens/system/radio.json ADDED
@@ -0,0 +1,11 @@
1
+ {
2
+ "sys": {
3
+ "radio": {
4
+ "transition": {
5
+ "duration": {
6
+ "value": "{ref.transition.duration}"
7
+ }
8
+ }
9
+ }
10
+ }
11
+ }