@webitel/styleguide 1.0.12 → 1.0.17

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 (33) hide show
  1. package/LICENSE +121 -121
  2. package/package.json +15 -15
  3. package/src/auditor/main.scss +1 -1
  4. package/src/auditor/styleguide/_styleguide.scss +5 -5
  5. package/src/client/main.scss +1 -1
  6. package/src/client/styleguide/_styleguide.scss +5 -5
  7. package/src/crm/main.scss +1 -1
  8. package/src/crm/styleguide/_styleguide.scss +5 -5
  9. package/src/history/main.scss +1 -1
  10. package/src/history/styleguide/_styleguide.scss +5 -5
  11. package/src/lib/main.scss +1 -1
  12. package/src/lib/styleguide/_styleguide.scss +7 -7
  13. package/src/lib/styleguide/border-radius/_border-radius.scss +3 -3
  14. package/src/lib/styleguide/colors/_colors.scss +199 -199
  15. package/src/lib/styleguide/colors/_deprecated.scss +151 -151
  16. package/src/lib/styleguide/colors/_palette.scss +358 -358
  17. package/src/lib/styleguide/colors/reusable/_text-field.scss +43 -43
  18. package/src/lib/styleguide/elevations/_elevations.scss +13 -13
  19. package/src/lib/styleguide/fonts/_fonts.scss +125 -125
  20. package/src/lib/styleguide/scroll.scss +44 -44
  21. package/src/lib/styleguide/spacings/_spacings.scss +14 -14
  22. package/src/lib/styleguide/typography/_typography.scss +124 -124
  23. package/src/lib/styleguide/viewport-breakpoints/_viewport-breakpoints.scss +25 -25
  24. package/src/supervisor/main.scss +1 -1
  25. package/src/supervisor/styleguide/_styleguide.scss +5 -5
  26. package/src/workspaces/main.scss +1 -1
  27. package/src/workspaces/styleguide/_styleguide.scss +5 -5
  28. package/src/workspaces/styleguide/colors/_colors.scss +3 -3
  29. package/src/wt-flow-diagram/main.scss +1 -1
  30. package/src/wt-flow-diagram/styleguide/_styleguide.scss +5 -5
  31. package/src/wt-flow-diagram/styleguide/colors/_colors.scss +234 -234
  32. package/src/wt-flow-diagram/styleguide/shadows/_shadows.scss +12 -12
  33. package/src/wt-flow-diagram/styleguide/spacings/_spacing.scss +31 -31
package/src/lib/styleguide/colors/_colors.scss CHANGED
@@ -1,199 +1,199 @@
1
- @import 'deprecated';
2
- @import 'palette';
3
- @import 'reusable/text-field';
4
-
5
- :root {
6
- // dp colors
7
- --dp-24-surface-color: hsl(0, 0%, 100%);
8
- --dp-23-surface-color: hsl(225, 20%, 99%);
9
- --dp-22-surface-color: hsl(225, 20%, 98%);
10
- --dp-21-surface-color: hsl(225, 20%, 97%);
11
- --dp-20-surface-color: hsl(225, 20%, 96%);
12
- --dp-19-surface-color: hsl(225, 20%, 95%);
13
- --dp-18-surface-color: hsl(225, 20%, 94%);
14
- --dp-17-surface-color: hsl(225, 20%, 93%);
15
- --dp-16-surface-color: hsl(225, 20%, 92%);
16
- --dp-15-surface-color: hsl(225, 20%, 91%);
17
- --dp-14-surface-color: hsl(225, 20%, 90%);
18
- --dp-13-surface-color: hsl(225, 20%, 89%);
19
- --dp-12-surface-color: hsl(225, 20%, 88%);
20
- --dp-11-surface-color: hsl(225, 20%, 87%);
21
- --dp-10-surface-color: hsl(225, 20%, 86%);
22
- --dp-9-surface-color: hsl(225, 20%, 85%);
23
- --dp-8-surface-color: hsl(225, 20%, 84%);
24
- --dp-7-surface-color: hsl(225, 20%, 83%);
25
- --dp-6-surface-color: hsl(225, 20%, 82%);
26
- --dp-5-surface-color: hsl(225, 20%, 81%);
27
- --dp-4-surface-color: hsl(225, 20%, 80%);
28
- --dp-3-surface-color: hsl(225, 20%, 79%);
29
- --dp-2-surface-color: hsl(225, 20%, 78%);
30
- --dp-1-surface-color: hsl(225, 20%, 77%);
31
-
32
- // content wrapper
33
- --content-wrapper-color: var(--dp-20-surface-color);
34
-
35
- // success colors
36
- --success-color: var(--green-darken-4);
37
- --success-hover-color: var(--green-darken-3);
38
- --success-light-color: var(--green-lighten-4);
39
- --success-on-color: var(--white);
40
-
41
- // warning colors
42
- --warning-color: var(--orange-accent-2);
43
- --warning-hover-color: var(--orange-accent-1);
44
- --warning-light-color: var(--orange-lighten-4);
45
- --warning-on-color: var(--black);
46
-
47
- // error colors
48
- --error-color: var(--red-accent-2);
49
- --error-hover-color: var(--red-lighten-2);
50
- --error-light-color: var(--red-lighten-4);
51
- --error-on-color: var(--white);
52
-
53
- // info colors
54
- --info-color: var(--blue-darken-1);
55
- --info-hover-color: var(--blue-lighten-1);
56
- --info-light-color: var(--blue-lighten-4);
57
- --info-on-color: var(--black);
58
-
59
- // job colors
60
- --job-color: var(--blue-darken-1);
61
- --job-hover-color: var(--blue-lighten-1);
62
- --job-light-color: var(--blue-lighten-4);
63
- --job-on-color: var(--black);
64
-
65
- // chat colors
66
- --chat-color: var(--indigo-accent-2);
67
- --chat-hover-color: var(--indigo-accent-1);
68
- --chat-light-color: var(--indigo-lighten-4);
69
- --chat-on-color: var(--black);
70
-
71
- // transfer colors
72
- --transfer-color: var(--indigo-lighten-1);
73
- --transfer-hover-color: var(--indigo-lighten-2);
74
- --transfer-light-color: var(--indigo-lighten-4);
75
- --transfer-on-color: var(--white);
76
-
77
- // primary colors
78
- --primary-color: var(--amber-accent-3);
79
- --primary-hover-color: var(--amber-accent-2);
80
- --primary-light-color: var(--amber-lighten-3);
81
- --primary-on-color: var(--black);
82
-
83
- // secondary colors
84
- --secondary-color: var(--dp-10-surface-color);
85
- --secondary-hover-color: var(--dp-14-surface-color);
86
- --secondary-light-color: var(--dp-16-surface-color);
87
- --secondary-on-color: var(--grey-darken-4);
88
-
89
- // email colors
90
- --email-color: var(--blue-darken-3);
91
- --email-hover-color: var(--blue-darken-2);
92
- --email-light-color: var(--blue-lighten-2);
93
- --email-on-color: var(--black);
94
-
95
- // accent colors
96
- --accent-color: var(--purple-lighten-1);
97
- --sub-accent-color: var(--indigo-darken-3);
98
-
99
- // typography colors
100
- --text-main-color: var(--grey-darken-3);
101
- --text-disabled-color: var(--grey-lighten-1);
102
- --text-error-color: var(--error-color);
103
- --text-link-color: var(--info-color);
104
- }
105
-
106
- :root.theme--dark {
107
- // dp colors
108
- --dp-24-surface-color: hsl(225, 20%, 25%);
109
- --dp-23-surface-color: hsl(225, 20%, 24%);
110
- --dp-22-surface-color: hsl(225, 20%, 23%);
111
- --dp-21-surface-color: hsl(225, 20%, 22%);
112
- --dp-20-surface-color: hsl(225, 20%, 21%);
113
- --dp-19-surface-color: hsl(225, 20%, 20%);
114
- --dp-18-surface-color: hsl(225, 20%, 19%);
115
- --dp-17-surface-color: hsl(225, 20%, 18%);
116
- --dp-16-surface-color: hsl(225, 20%, 17%);
117
- --dp-15-surface-color: hsl(225, 20%, 16%);
118
- --dp-14-surface-color: hsl(225, 20%, 15%);
119
- --dp-13-surface-color: hsl(225, 20%, 14%);
120
- --dp-12-surface-color: hsl(225, 20%, 13%);
121
- --dp-11-surface-color: hsl(225, 20%, 12%);
122
- --dp-10-surface-color: hsl(225, 20%, 11%);
123
- --dp-9-surface-color: hsl(225, 20%, 10%);
124
- --dp-8-surface-color: hsl(225, 20%, 9%);
125
- --dp-7-surface-color: hsl(225, 20%, 8%);
126
- --dp-6-surface-color: hsl(225, 20%, 7%);
127
- --dp-5-surface-color: hsl(225, 20%, 6%);
128
- --dp-4-surface-color: hsl(225, 20%, 5%);
129
- --dp-3-surface-color: hsl(225, 20%, 4%);
130
- --dp-2-surface-color: hsl(225, 20%, 3%);
131
- --dp-1-surface-color: hsl(225, 20%, 2%);
132
-
133
- // success colors
134
- --success-color: var(--green-darken-4);
135
- --success-hover-color: var(--green-darken-3);
136
- --success-light-color: var(--green-lighten-3);
137
- --success-on-color: var(--black);
138
-
139
- // warning colors
140
- --warning-color: var(--orange-accent-2);
141
- --warning-hover-color: var(--orange-accent-1);
142
- --warning-light-color: var(--orange-lighten-3);
143
- --warning-on-color: var(--black);
144
-
145
- // error colors
146
- --error-color: var(--red-accent-2);
147
- --error-hover-color: var(--red-lighten-2);
148
- --error-light-color: var(--red-lighten-3);
149
- --error-on-color: var(--black);
150
-
151
- // info colors
152
- --info-color: var(--blue-darken-1);
153
- --info-hover-color: var(--blue-lighten-1);
154
- --info-light-color: var(--blue-lighten-3);
155
- --info-on-color: var(--white);
156
-
157
- // job colors
158
- --job-color: var(--blue-darken-1);
159
- --job-hover-color: var(--blue-lighten-1);
160
- --job-light-color: var(--blue-lighten-3);
161
- --job-on-color: var(--white);
162
-
163
- // chat colors
164
- --chat-color: var(--indigo-accent-2);
165
- --chat-hover-color: var(--indigo-accent-1);
166
- --chat-light-color: var(--indigo-lighten-3);
167
- --chat-on-color: var(--white);
168
-
169
- // transfer colors
170
- --transfer-color: var(--indigo-darken-1);
171
- --transfer-hover-color: var(--indigo-lighten-1);
172
- --transfer-light-color: var(--indigo-lighten-4);
173
- --transfer-on-color: var(--white);
174
-
175
- // primary colors
176
- --primary-color: var(--amber-darken-2);
177
- --primary-hover-color: var(--amber-darken-1);
178
- --primary-light-color: var(--amber-darken-4);
179
- --primary-on-color: var(--black);
180
-
181
- // secondary colors
182
- --secondary-on-color: var(--grey-lighten-4);
183
-
184
- // email colors
185
- --email-color: var(--blue-darken-3);
186
- --email-hover-color: var(--blue-darken-2);
187
- --email-light-color: var(--blue-lighten-1);
188
- --email-on-color: var(--white);
189
-
190
- // accent colors
191
- --accent-color: var(--purple-lighten-1);
192
- --sub-accent-color: var(--indigo-darken-3);
193
-
194
- // typography colors
195
- --text-main-color: var(--grey-lighten-3);
196
- --text-disabled-color: var(--grey-darken-1);
197
- --text-error-color: var(--error-color);
198
- --text-link-color: var(--info-color);
199
- }
1
+ @import 'deprecated';
2
+ @import 'palette';
3
+ @import 'reusable/text-field';
4
+
5
+ :root {
6
+ // dp colors
7
+ --dp-24-surface-color: hsl(0, 0%, 100%);
8
+ --dp-23-surface-color: hsl(225, 20%, 99%);
9
+ --dp-22-surface-color: hsl(225, 20%, 98%);
10
+ --dp-21-surface-color: hsl(225, 20%, 97%);
11
+ --dp-20-surface-color: hsl(225, 20%, 96%);
12
+ --dp-19-surface-color: hsl(225, 20%, 95%);
13
+ --dp-18-surface-color: hsl(225, 20%, 94%);
14
+ --dp-17-surface-color: hsl(225, 20%, 93%);
15
+ --dp-16-surface-color: hsl(225, 20%, 92%);
16
+ --dp-15-surface-color: hsl(225, 20%, 91%);
17
+ --dp-14-surface-color: hsl(225, 20%, 90%);
18
+ --dp-13-surface-color: hsl(225, 20%, 89%);
19
+ --dp-12-surface-color: hsl(225, 20%, 88%);
20
+ --dp-11-surface-color: hsl(225, 20%, 87%);
21
+ --dp-10-surface-color: hsl(225, 20%, 86%);
22
+ --dp-9-surface-color: hsl(225, 20%, 85%);
23
+ --dp-8-surface-color: hsl(225, 20%, 84%);
24
+ --dp-7-surface-color: hsl(225, 20%, 83%);
25
+ --dp-6-surface-color: hsl(225, 20%, 82%);
26
+ --dp-5-surface-color: hsl(225, 20%, 81%);
27
+ --dp-4-surface-color: hsl(225, 20%, 80%);
28
+ --dp-3-surface-color: hsl(225, 20%, 79%);
29
+ --dp-2-surface-color: hsl(225, 20%, 78%);
30
+ --dp-1-surface-color: hsl(225, 20%, 77%);
31
+
32
+ // content wrapper
33
+ --content-wrapper-color: var(--dp-20-surface-color);
34
+
35
+ // success colors
36
+ --success-color: var(--green-darken-4);
37
+ --success-hover-color: var(--green-darken-3);
38
+ --success-light-color: var(--green-lighten-4);
39
+ --success-on-color: var(--white);
40
+
41
+ // warning colors
42
+ --warning-color: var(--orange-accent-2);
43
+ --warning-hover-color: var(--orange-accent-1);
44
+ --warning-light-color: var(--orange-lighten-4);
45
+ --warning-on-color: var(--black);
46
+
47
+ // error colors
48
+ --error-color: var(--red-accent-2);
49
+ --error-hover-color: var(--red-lighten-2);
50
+ --error-light-color: var(--red-lighten-4);
51
+ --error-on-color: var(--white);
52
+
53
+ // info colors
54
+ --info-color: var(--blue-darken-1);
55
+ --info-hover-color: var(--blue-lighten-1);
56
+ --info-light-color: var(--blue-lighten-4);
57
+ --info-on-color: var(--black);
58
+
59
+ // job colors
60
+ --job-color: var(--blue-darken-1);
61
+ --job-hover-color: var(--blue-lighten-1);
62
+ --job-light-color: var(--blue-lighten-4);
63
+ --job-on-color: var(--black);
64
+
65
+ // chat colors
66
+ --chat-color: var(--indigo-accent-2);
67
+ --chat-hover-color: var(--indigo-accent-1);
68
+ --chat-light-color: var(--indigo-lighten-4);
69
+ --chat-on-color: var(--black);
70
+
71
+ // transfer colors
72
+ --transfer-color: var(--indigo-lighten-1);
73
+ --transfer-hover-color: var(--indigo-lighten-2);
74
+ --transfer-light-color: var(--indigo-lighten-4);
75
+ --transfer-on-color: var(--white);
76
+
77
+ // primary colors
78
+ --primary-color: var(--amber-accent-3);
79
+ --primary-hover-color: var(--amber-accent-2);
80
+ --primary-light-color: var(--amber-lighten-3);
81
+ --primary-on-color: var(--black);
82
+
83
+ // secondary colors
84
+ --secondary-color: var(--dp-10-surface-color);
85
+ --secondary-hover-color: var(--dp-14-surface-color);
86
+ --secondary-light-color: var(--dp-16-surface-color);
87
+ --secondary-on-color: var(--grey-darken-4);
88
+
89
+ // email colors
90
+ --email-color: var(--blue-darken-3);
91
+ --email-hover-color: var(--blue-darken-2);
92
+ --email-light-color: var(--blue-lighten-2);
93
+ --email-on-color: var(--black);
94
+
95
+ // accent colors
96
+ --accent-color: var(--purple-lighten-1);
97
+ --sub-accent-color: var(--indigo-darken-3);
98
+
99
+ // typography colors
100
+ --text-main-color: var(--grey-darken-3);
101
+ --text-disabled-color: var(--grey-lighten-1);
102
+ --text-error-color: var(--error-color);
103
+ --text-link-color: var(--info-color);
104
+ }
105
+
106
+ :root.theme--dark {
107
+ // dp colors
108
+ --dp-24-surface-color: hsl(225, 20%, 25%);
109
+ --dp-23-surface-color: hsl(225, 20%, 24%);
110
+ --dp-22-surface-color: hsl(225, 20%, 23%);
111
+ --dp-21-surface-color: hsl(225, 20%, 22%);
112
+ --dp-20-surface-color: hsl(225, 20%, 21%);
113
+ --dp-19-surface-color: hsl(225, 20%, 20%);
114
+ --dp-18-surface-color: hsl(225, 20%, 19%);
115
+ --dp-17-surface-color: hsl(225, 20%, 18%);
116
+ --dp-16-surface-color: hsl(225, 20%, 17%);
117
+ --dp-15-surface-color: hsl(225, 20%, 16%);
118
+ --dp-14-surface-color: hsl(225, 20%, 15%);
119
+ --dp-13-surface-color: hsl(225, 20%, 14%);
120
+ --dp-12-surface-color: hsl(225, 20%, 13%);
121
+ --dp-11-surface-color: hsl(225, 20%, 12%);
122
+ --dp-10-surface-color: hsl(225, 20%, 11%);
123
+ --dp-9-surface-color: hsl(225, 20%, 10%);
124
+ --dp-8-surface-color: hsl(225, 20%, 9%);
125
+ --dp-7-surface-color: hsl(225, 20%, 8%);
126
+ --dp-6-surface-color: hsl(225, 20%, 7%);
127
+ --dp-5-surface-color: hsl(225, 20%, 6%);
128
+ --dp-4-surface-color: hsl(225, 20%, 5%);
129
+ --dp-3-surface-color: hsl(225, 20%, 4%);
130
+ --dp-2-surface-color: hsl(225, 20%, 3%);
131
+ --dp-1-surface-color: hsl(225, 20%, 2%);
132
+
133
+ // success colors
134
+ --success-color: var(--green-darken-4);
135
+ --success-hover-color: var(--green-darken-3);
136
+ --success-light-color: var(--green-lighten-3);
137
+ --success-on-color: var(--black);
138
+
139
+ // warning colors
140
+ --warning-color: var(--orange-accent-2);
141
+ --warning-hover-color: var(--orange-accent-1);
142
+ --warning-light-color: var(--orange-lighten-3);
143
+ --warning-on-color: var(--black);
144
+
145
+ // error colors
146
+ --error-color: var(--red-accent-2);
147
+ --error-hover-color: var(--red-lighten-2);
148
+ --error-light-color: var(--red-lighten-3);
149
+ --error-on-color: var(--black);
150
+
151
+ // info colors
152
+ --info-color: var(--blue-darken-1);
153
+ --info-hover-color: var(--blue-lighten-1);
154
+ --info-light-color: var(--blue-lighten-3);
155
+ --info-on-color: var(--white);
156
+
157
+ // job colors
158
+ --job-color: var(--blue-darken-1);
159
+ --job-hover-color: var(--blue-lighten-1);
160
+ --job-light-color: var(--blue-lighten-3);
161
+ --job-on-color: var(--white);
162
+
163
+ // chat colors
164
+ --chat-color: var(--indigo-accent-2);
165
+ --chat-hover-color: var(--indigo-accent-1);
166
+ --chat-light-color: var(--indigo-lighten-3);
167
+ --chat-on-color: var(--white);
168
+
169
+ // transfer colors
170
+ --transfer-color: var(--indigo-darken-1);
171
+ --transfer-hover-color: var(--indigo-lighten-1);
172
+ --transfer-light-color: var(--indigo-lighten-4);
173
+ --transfer-on-color: var(--white);
174
+
175
+ // primary colors
176
+ --primary-color: var(--amber-darken-2);
177
+ --primary-hover-color: var(--amber-darken-1);
178
+ --primary-light-color: var(--amber-darken-4);
179
+ --primary-on-color: var(--black);
180
+
181
+ // secondary colors
182
+ --secondary-on-color: var(--grey-lighten-4);
183
+
184
+ // email colors
185
+ --email-color: var(--blue-darken-3);
186
+ --email-hover-color: var(--blue-darken-2);
187
+ --email-light-color: var(--blue-lighten-1);
188
+ --email-on-color: var(--white);
189
+
190
+ // accent colors
191
+ --accent-color: var(--purple-lighten-1);
192
+ --sub-accent-color: var(--indigo-darken-3);
193
+
194
+ // typography colors
195
+ --text-main-color: var(--grey-lighten-3);
196
+ --text-disabled-color: var(--grey-darken-1);
197
+ --text-error-color: var(--error-color);
198
+ --text-link-color: var(--info-color);
199
+ }