@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/status-card.json ADDED
@@ -0,0 +1,187 @@
1
+ {
2
+ "comp": {
3
+ "status-card": {
4
+ "text": {
5
+ "style": {
6
+ "font-family": {
7
+ "value": "{sys.text.style.caption.font-family}"
8
+ },
9
+ "size": {
10
+ "value": "{sys.text.style.caption.size}"
11
+ },
12
+ "font-weight": {
13
+ "value": "{sys.text.style.caption.weight}"
14
+ },
15
+ "line-height": {
16
+ "value": "{sys.text.style.caption.line-height}"
17
+ }
18
+ },
19
+ "color": {
20
+ "value": "{ref.color.grey.100}"
21
+ }
22
+ },
23
+ "user" : {
24
+ "text": {
25
+ "style": {
26
+ "font-family": {
27
+ "value": "{sys.text.style.captionBold.font-family}"
28
+ },
29
+ "size": {
30
+ "value": "{sys.text.style.captionBold.size}"
31
+ },
32
+ "font-weight": {
33
+ "value": "{sys.text.style.captionBold.weight}"
34
+ },
35
+ "line-height": {
36
+ "value": "{sys.text.style.captionBold.line-height}"
37
+ }
38
+ }
39
+ }
40
+ },
41
+ "caption": {
42
+ "text": {
43
+ "style": {
44
+ "font-family": {
45
+ "value": "{sys.text.style.captionBold.font-family}"
46
+ },
47
+ "size": {
48
+ "value": "{sys.text.style.captionBold.size}"
49
+ },
50
+ "font-weight": {
51
+ "value": "{sys.text.style.captionBold.weight}"
52
+ },
53
+ "line-height": {
54
+ "value": "{sys.text.style.captionBold.line-height}"
55
+ }
56
+ },
57
+ "color": {
58
+ "value": "{ref.color.grey.80}"
59
+ }
60
+ }
61
+ },
62
+ "spacing": {
63
+ "vertical": {
64
+ "value": "{ref.spacing.xxs}"
65
+ },
66
+ "horizontal": {
67
+ "value": "{ref.spacing.xxs}"
68
+ }
69
+ },
70
+ "content": {
71
+ "spacing": {
72
+ "value": "{ref.spacing.xxxs}"
73
+ }
74
+ },
75
+ "padding": {
76
+ "vertical": {
77
+ "value": "{ref.spacing.xs}"
78
+ },
79
+ "horizontal": {
80
+ "value": "{ref.spacing.xxs}"
81
+ }
82
+ },
83
+ "green": {
84
+ "icon": {
85
+ "color": {
86
+ "value": "{ref.color.green.100}"
87
+ }
88
+ },
89
+ "background": {
90
+ "color": {
91
+ "value": "{ref.color.green.10}"
92
+ }
93
+ },
94
+ "border": {
95
+ "color": {
96
+ "value": "{ref.color.green.20}"
97
+ }
98
+ }
99
+ },
100
+ "tag-orange": {
101
+ "icon": {
102
+ "color": {
103
+ "value": "{ref.color.tag-orange.100}"
104
+ }
105
+ },
106
+ "background": {
107
+ "color": {
108
+ "value": "{ref.color.tag-orange.10}"
109
+ }
110
+ },
111
+ "border": {
112
+ "color": {
113
+ "value": "{ref.color.tag-orange.20}"
114
+ }
115
+ }
116
+ },
117
+ "blue": {
118
+ "icon": {
119
+ "color": {
120
+ "value": "{ref.color.electricBlue.100}"
121
+ }
122
+ },
123
+ "background": {
124
+ "color": {
125
+ "value": "{ref.color.electricBlue.10}"
126
+ }
127
+ },
128
+ "border": {
129
+ "color": {
130
+ "value": "{ref.color.electricBlue.20}"
131
+ }
132
+ }
133
+ },
134
+ "red": {
135
+ "icon": {
136
+ "color": {
137
+ "value": "{ref.color.red.100}"
138
+ }
139
+ },
140
+ "background": {
141
+ "color": {
142
+ "value": "{ref.color.red.10}"
143
+ }
144
+ },
145
+ "border": {
146
+ "color": {
147
+ "value": "{ref.color.red.20}"
148
+ }
149
+ }
150
+ },
151
+ "orange": {
152
+ "icon": {
153
+ "color": {
154
+ "value": "{ref.color.orange.100}"
155
+ }
156
+ },
157
+ "background": {
158
+ "color": {
159
+ "value": "{ref.color.orange.10}"
160
+ }
161
+ },
162
+ "border": {
163
+ "color": {
164
+ "value": "{ref.color.orange.20}"
165
+ }
166
+ }
167
+ },
168
+ "grey": {
169
+ "icon": {
170
+ "color": {
171
+ "value": "{ref.color.grey.100}"
172
+ }
173
+ },
174
+ "background": {
175
+ "color": {
176
+ "value": "{ref.color.grey.10}"
177
+ }
178
+ },
179
+ "border": {
180
+ "color": {
181
+ "value": "{ref.color.grey.20}"
182
+ }
183
+ }
184
+ }
185
+ }
186
+ }
187
+ }
package/src/tokens/components/status.json ADDED
@@ -0,0 +1,120 @@
1
+ {
2
+ "comp": {
3
+ "status": {
4
+ "text": {
5
+ "style": {
6
+ "font-family": {
7
+ "value": "{sys.text.style.caption.font-family}"
8
+ },
9
+ "size": {
10
+ "value": "{sys.text.style.caption.size}"
11
+ },
12
+ "font-weight": {
13
+ "value": "{sys.text.style.caption.weight}"
14
+ },
15
+ "line-height": {
16
+ "value": "{sys.text.style.caption.line-height}"
17
+ }
18
+ }
19
+ },
20
+ "padding": {
21
+ "horizontal": {
22
+ "value": "{ref.spacing.xxs}"
23
+ }
24
+ },
25
+ "height": {
26
+ "value": "{ref.spacing.md}"
27
+ },
28
+ "spacing": {
29
+ "value": "{ref.spacing.xxxs}"
30
+ },
31
+ "color": {
32
+ "value": "{ref.color.grey.100}"
33
+ },
34
+ "green": {
35
+ "background": {
36
+ "color": {
37
+ "value": "{ref.color.green.10}"
38
+ }
39
+ },
40
+ "dot": {
41
+ "background": {
42
+ "color": {
43
+ "value": "{ref.color.green.100}"
44
+ }
45
+ }
46
+ }
47
+ },
48
+ "tag-orange": {
49
+ "background": {
50
+ "color": {
51
+ "value": "{ref.color.tag-orange.10}"
52
+ }
53
+ },
54
+ "dot": {
55
+ "background": {
56
+ "color": {
57
+ "value": "{ref.color.tag-orange.150}"
58
+ }
59
+ }
60
+ }
61
+ },
62
+ "red": {
63
+ "background": {
64
+ "color": {
65
+ "value": "{ref.color.red.10}"
66
+ }
67
+ },
68
+ "dot": {
69
+ "background": {
70
+ "color": {
71
+ "value": "{ref.color.red.100}"
72
+ }
73
+ }
74
+ }
75
+ },
76
+ "blue": {
77
+ "background": {
78
+ "color": {
79
+ "value": "{ref.color.electricBlue.10}"
80
+ }
81
+ },
82
+ "dot": {
83
+ "background": {
84
+ "color": {
85
+ "value": "{ref.color.electricBlue.100}"
86
+ }
87
+ }
88
+ }
89
+ },
90
+ "orange": {
91
+ "background": {
92
+ "color": {
93
+ "value": "{ref.color.orange.10}"
94
+ }
95
+ },
96
+ "dot": {
97
+ "background": {
98
+ "color": {
99
+ "value": "{ref.color.orange.100}"
100
+ }
101
+ }
102
+ }
103
+ },
104
+ "grey": {
105
+ "background": {
106
+ "color": {
107
+ "value": "{ref.color.grey.10}"
108
+ }
109
+ },
110
+ "dot": {
111
+ "background": {
112
+ "color": {
113
+ "value": "{ref.color.grey.100}"
114
+ }
115
+ }
116
+ }
117
+ }
118
+ }
119
+ }
120
+ }
package/src/tokens/components/tag.json ADDED
@@ -0,0 +1,194 @@
1
+ {
2
+ "comp": {
3
+ "tag": {
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
+ },
20
+ "border": {
21
+ "radius": {
22
+ "value": "{ref.spacing.xxxs}"
23
+ }
24
+ },
25
+ "spacing": {
26
+ "value": "{ref.spacing.xxxs}"
27
+ },
28
+ "height": {
29
+ "value": "{ref.spacing.md}"
30
+ },
31
+ "padding": {
32
+ "left": {
33
+ "value": "{ref.spacing.xxxs}"
34
+ },
35
+ "right": {
36
+ "value": "{ref.spacing.xxxs}"
37
+ }
38
+ },
39
+ "closable": {
40
+ "padding": {
41
+ "right": {
42
+ "value": "2px"
43
+ }
44
+ }
45
+ },
46
+ "mini": {
47
+ "padding": {
48
+ "left": {
49
+ "value": "2px"
50
+ },
51
+ "right": {
52
+ "value": "2px"
53
+ }
54
+ },
55
+ "height": {
56
+ "value": "18px"
57
+ }
58
+ },
59
+ "blue": {
60
+ "text": {
61
+ "color": {
62
+ "value": "{ref.color.electricBlue.150}"
63
+ }
64
+ },
65
+ "background": {
66
+ "color": {
67
+ "value": "{ref.color.electricBlue.10}"
68
+ }
69
+ },
70
+ "border": {
71
+ "color": {
72
+ "value": "{ref.color.electricBlue.20}"
73
+ }
74
+ },
75
+ "icon": {
76
+ "color": {
77
+ "value": "{ref.color.electricBlue.150}"
78
+ }
79
+ }
80
+ },
81
+ "tag-orange": {
82
+ "text": {
83
+ "color": {
84
+ "value": "{ref.color.tag-orange.150}"
85
+ }
86
+ },
87
+ "background": {
88
+ "color": {
89
+ "value": "{ref.color.tag-orange.10}"
90
+ }
91
+ },
92
+ "border": {
93
+ "color": {
94
+ "value": "{ref.color.tag-orange.20}"
95
+ }
96
+ },
97
+ "icon": {
98
+ "color": {
99
+ "value": "{ref.color.tag-orange.150}"
100
+ }
101
+ }
102
+ },
103
+ "menthol": {
104
+ "text": {
105
+ "color": {
106
+ "value": "{ref.color.menthol.150}"
107
+ }
108
+ },
109
+ "background": {
110
+ "color": {
111
+ "value": "{ref.color.menthol.10}"
112
+ }
113
+ },
114
+ "border": {
115
+ "color": {
116
+ "value": "{ref.color.menthol.20}"
117
+ }
118
+ },
119
+ "icon": {
120
+ "color": {
121
+ "value": "{ref.color.menthol.150}"
122
+ }
123
+ }
124
+ },
125
+ "grey": {
126
+ "text": {
127
+ "color": {
128
+ "value": "{ref.color.grey.100}"
129
+ }
130
+ },
131
+ "background": {
132
+ "color": {
133
+ "value": "{ref.color.grey.10}"
134
+ }
135
+ },
136
+ "border": {
137
+ "color": {
138
+ "value": "{ref.color.grey.20}"
139
+ }
140
+ },
141
+ "icon": {
142
+ "color": {
143
+ "value": "{ref.color.grey.150}"
144
+ }
145
+ }
146
+ },
147
+ "green": {
148
+ "text": {
149
+ "color": {
150
+ "value": "{ref.color.green.150}"
151
+ }
152
+ },
153
+ "background": {
154
+ "color": {
155
+ "value": "{ref.color.green.10}"
156
+ }
157
+ },
158
+ "border": {
159
+ "color": {
160
+ "value": "{ref.color.green.20}"
161
+ }
162
+ },
163
+ "icon": {
164
+ "color": {
165
+ "value": "{ref.color.green.150}"
166
+ }
167
+ }
168
+ },
169
+ "red": {
170
+ "text": {
171
+ "color": {
172
+ "value": "{ref.color.red.150}"
173
+ }
174
+ },
175
+ "background": {
176
+ "color": {
177
+ "value": "{ref.color.red.10}"
178
+ }
179
+ },
180
+ "border": {
181
+ "color": {
182
+ "value": "{ref.color.red.20}"
183
+ }
184
+ },
185
+ "icon": {
186
+ "color": {
187
+ "value": "{ref.color.red.150}"
188
+ }
189
+ }
190
+ }
191
+
192
+ }
193
+ }
194
+ }
package/src/tokens/components/tooltip.json ADDED
@@ -0,0 +1,36 @@
1
+ {
2
+ "comp": {
3
+ "tooltip": {
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
+ "weight": {
13
+ "value": "{sys.text.style.body.weight}"
14
+ },
15
+ "line-height": {
16
+ "value": "{sys.text.style.body.line-height}"
17
+ }
18
+ },
19
+ "default": {
20
+ "color": {
21
+ "value": "{sys.color.accent.default.text}"
22
+ }
23
+ },
24
+ "color": {
25
+ "main": {
26
+ "default": {
27
+ "bg": {
28
+ "value": "{ref.color.grey.100}"
29
+ }
30
+ }
31
+ }
32
+ }
33
+ }
34
+ }
35
+ }
36
+ }
package/src/tokens/reference/animation.json ADDED
@@ -0,0 +1,18 @@
1
+ {
2
+ "ref": {
3
+ "animation": {
4
+ "long" : {
5
+ "value": "400ms"
6
+ },
7
+ "normal" : {
8
+ "value": "250ms"
9
+ },
10
+ "short" : {
11
+ "value": "150ms"
12
+ },
13
+ "xshort" : {
14
+ "value": "75ms"
15
+ }
16
+ }
17
+ }
18
+ }
package/src/tokens/reference/border-radius.json ADDED
@@ -0,0 +1,15 @@
1
+ {
2
+ "ref": {
3
+ "borderRadius": {
4
+ "sm" : {
5
+ "value": "4px"
6
+ },
7
+ "md" : {
8
+ "value": "6px"
9
+ },
10
+ "lg" : {
11
+ "value": "8px"
12
+ }
13
+ }
14
+ }
15
+ }