@focus4/styling 12.8.0 → 12.10.0

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.
@@ -1,398 +1,365 @@
1
- html {
2
- color: rgb(var(--color-black));
3
- font-size: var(--font-size-small);
4
- line-height: 1.4;
5
- font-family: var(--preferred-font);
6
- }
7
-
8
- body {
9
- margin: 0;
10
- animation-duration: var(--animation-duration);
11
- animation-delay: var(--animation-delay);
12
- animation-timing-function: var(--animation-curve-default);
13
- }
14
-
15
- textarea {
16
- resize: vertical;
17
- }
18
-
19
- h1,
20
- h2,
21
- h3,
22
- h4,
23
- h5,
24
- h6 {
25
- margin: 24px 0;
26
- font-weight: 400;
27
- }
28
-
29
- h1 {
30
- font-size: calc(3.5 * var(--font-size));
31
- line-height: 1.35;
32
- letter-spacing: -0.02em;
33
- }
34
-
35
- h2 {
36
- font-size: calc(2.8 * var(--font-size));
37
- line-height: 48px;
38
- }
39
-
40
- h3 {
41
- font-size: calc(2.2 * var(--font-size));
42
- line-height: 40px;
43
- }
44
-
45
- h4 {
46
- font-size: calc(1.5 * var(--font-size));
47
- line-height: 32px;
48
- }
49
-
50
- h5 {
51
- font-size: calc(1.25 * var(--font-size));
52
- font-weight: var(--font-weight-semi-bold);
53
- line-height: 1;
54
- letter-spacing: 0.02em;
55
- }
56
-
57
- h6 {
58
- font-size: var(--font-size);
59
- line-height: 24px;
60
- letter-spacing: 0.04em;
61
- }
62
-
63
- th {
64
- font-weight: normal;
65
- }
1
+ html {
2
+ color: rgb(var(--color-black));
3
+ font-size: var(--font-size-small);
4
+ line-height: 1.4;
5
+ font-family: var(--preferred-font);
6
+ }
66
7
 
67
- :root {
68
- --color-black: 0, 0, 0;
69
- --color-white: 255, 255, 255;
70
-
71
- --palette-red-50: 255, 235, 238;
72
- --palette-red-100: 255, 205, 210;
73
- --palette-red-200: 239, 154, 154;
74
- --palette-red-300: 229, 115, 115;
75
- --palette-red-400: 239, 83, 80;
76
- --palette-red-500: 244, 67, 54;
77
- --palette-red-600: 229, 57, 53;
78
- --palette-red-700: 211, 47, 47;
79
- --palette-red-800: 198, 40, 40;
80
- --palette-red-900: 183, 28, 28;
81
- --palette-red-a100: 255, 138, 128;
82
- --palette-red-a200: 255, 82, 82;
83
- --palette-red-a400: 255, 23, 68;
84
- --palette-red-a700: 213, 0, 0;
85
-
86
- --palette-pink-50: 252, 228, 236;
87
- --palette-pink-100: 248, 187, 208;
88
- --palette-pink-200: 244, 143, 177;
89
- --palette-pink-300: 240, 98, 146;
90
- --palette-pink-400: 236, 64, 122;
91
- --palette-pink-500: 233, 30, 99;
92
- --palette-pink-600: 216, 27, 96;
93
- --palette-pink-700: 194, 24, 91;
94
- --palette-pink-800: 173, 20, 87;
95
- --palette-pink-900: 136, 14, 79;
96
- --palette-pink-a100: 255, 128, 171;
97
- --palette-pink-a200: 255, 64, 129;
98
- --palette-pink-a400: 245, 0, 87;
99
- --palette-pink-a700: 197, 17, 98;
100
-
101
- --palette-purple-50: 243, 229, 245;
102
- --palette-purple-100: 225, 190, 231;
103
- --palette-purple-200: 206, 147, 216;
104
- --palette-purple-300: 186, 104, 200;
105
- --palette-purple-400: 171, 71, 188;
106
- --palette-purple-500: 156, 39, 176;
107
- --palette-purple-600: 142, 36, 170;
108
- --palette-purple-700: 123, 31, 162;
109
- --palette-purple-800: 106, 27, 154;
110
- --palette-purple-900: 74, 20, 140;
111
- --palette-purple-a100: 234, 128, 252;
112
- --palette-purple-a200: 224, 64, 251;
113
- --palette-purple-a400: 213, 0, 249;
114
- --palette-purple-a700: 170, 0, 255;
115
-
116
- --palette-deep-purple-50: 237, 231, 246;
117
- --palette-deep-purple-100: 209, 196, 233;
118
- --palette-deep-purple-200: 179, 157, 219;
119
- --palette-deep-purple-300: 149, 117, 205;
120
- --palette-deep-purple-400: 126, 87, 194;
121
- --palette-deep-purple-500: 103, 58, 183;
122
- --palette-deep-purple-600: 94, 53, 177;
123
- --palette-deep-purple-700: 81, 45, 168;
124
- --palette-deep-purple-800: 69, 39, 160;
125
- --palette-deep-purple-900: 49, 27, 146;
126
- --palette-deep-purple-a100: 179, 136, 255;
127
- --palette-deep-purple-a200: 124, 77, 255;
128
- --palette-deep-purple-a400: 101, 31, 255;
129
- --palette-deep-purple-a700: 98, 0, 234;
130
-
131
- --palette-indigo-50: 232, 234, 246;
132
- --palette-indigo-100: 197, 202, 233;
133
- --palette-indigo-200: 159, 168, 218;
134
- --palette-indigo-300: 121, 134, 203;
135
- --palette-indigo-400: 92, 107, 192;
136
- --palette-indigo-500: 63, 81, 181;
137
- --palette-indigo-600: 57, 73, 171;
138
- --palette-indigo-700: 48, 63, 159;
139
- --palette-indigo-800: 40, 53, 147;
140
- --palette-indigo-900: 26, 35, 126;
141
- --palette-indigo-a100: 140, 158, 255;
142
- --palette-indigo-a200: 83, 109, 254;
143
- --palette-indigo-a400: 61, 90, 254;
144
- --palette-indigo-a700: 48, 79, 254;
145
-
146
- --palette-blue-50: 227, 242, 253;
147
- --palette-blue-100: 187, 222, 251;
148
- --palette-blue-200: 144, 202, 249;
149
- --palette-blue-300: 100, 181, 246;
150
- --palette-blue-400: 66, 165, 245;
151
- --palette-blue-500: 33, 150, 243;
152
- --palette-blue-600: 30, 136, 229;
153
- --palette-blue-700: 25, 118, 210;
154
- --palette-blue-800: 21, 101, 192;
155
- --palette-blue-900: 13, 71, 161;
156
- --palette-blue-a100: 130, 177, 255;
157
- --palette-blue-a200: 68, 138, 255;
158
- --palette-blue-a400: 41, 121, 255;
159
- --palette-blue-a700: 41, 98, 255;
160
-
161
- --palette-light-blue-50: 225, 245, 254;
162
- --palette-light-blue-100: 179, 229, 252;
163
- --palette-light-blue-200: 129, 212, 250;
164
- --palette-light-blue-300: 79, 195, 247;
165
- --palette-light-blue-400: 41, 182, 246;
166
- --palette-light-blue-500: 3, 169, 244;
167
- --palette-light-blue-600: 3, 155, 229;
168
- --palette-light-blue-700: 2, 136, 209;
169
- --palette-light-blue-800: 2, 119, 189;
170
- --palette-light-blue-900: 1, 87, 155;
171
- --palette-light-blue-a100: 128, 216, 255;
172
- --palette-light-blue-a200: 64, 196, 255;
173
- --palette-light-blue-a400: 0, 176, 255;
174
- --palette-light-blue-a700: 0, 145, 234;
175
-
176
- --palette-cyan-50: 224, 247, 250;
177
- --palette-cyan-100: 178, 235, 242;
178
- --palette-cyan-200: 128, 222, 234;
179
- --palette-cyan-300: 77, 208, 225;
180
- --palette-cyan-400: 38, 198, 218;
181
- --palette-cyan-500: 0, 188, 212;
182
- --palette-cyan-600: 0, 172, 193;
183
- --palette-cyan-700: 0, 151, 167;
184
- --palette-cyan-800: 0, 131, 143;
185
- --palette-cyan-900: 0, 96, 100;
186
- --palette-cyan-a100: 132, 255, 255;
187
- --palette-cyan-a200: 24, 255, 255;
188
- --palette-cyan-a400: 0, 229, 255;
189
- --palette-cyan-a700: 0, 184, 212;
190
-
191
- --palette-teal-50: 224, 242, 241;
192
- --palette-teal-100: 178, 223, 219;
193
- --palette-teal-200: 128, 203, 196;
194
- --palette-teal-300: 77, 182, 172;
195
- --palette-teal-400: 38, 166, 154;
196
- --palette-teal-500: 0, 150, 136;
197
- --palette-teal-600: 0, 137, 123;
198
- --palette-teal-700: 0, 121, 107;
199
- --palette-teal-800: 0, 105, 92;
200
- --palette-teal-900: 0, 77, 64;
201
- --palette-teal-a100: 167, 255, 235;
202
- --palette-teal-a200: 100, 255, 218;
203
- --palette-teal-a400: 29, 233, 182;
204
- --palette-teal-a700: 0, 191, 165;
205
-
206
- --palette-green-50: 232, 245, 233;
207
- --palette-green-100: 200, 230, 201;
208
- --palette-green-200: 165, 214, 167;
209
- --palette-green-300: 129, 199, 132;
210
- --palette-green-400: 102, 187, 106;
211
- --palette-green-500: 76, 175, 80;
212
- --palette-green-600: 67, 160, 71;
213
- --palette-green-700: 56, 142, 60;
214
- --palette-green-800: 46, 125, 50;
215
- --palette-green-900: 27, 94, 32;
216
- --palette-green-a100: 185, 246, 202;
217
- --palette-green-a200: 105, 240, 174;
218
- --palette-green-a400: 0, 230, 118;
219
- --palette-green-a700: 0, 200, 83;
220
-
221
- --palette-light-green-50: 241, 248, 233;
222
- --palette-light-green-100: 220, 237, 200;
223
- --palette-light-green-200: 197, 225, 165;
224
- --palette-light-green-300: 174, 213, 129;
225
- --palette-light-green-400: 156, 204, 101;
226
- --palette-light-green-500: 139, 195, 74;
227
- --palette-light-green-600: 124, 179, 66;
228
- --palette-light-green-700: 104, 159, 56;
229
- --palette-light-green-800: 85, 139, 47;
230
- --palette-light-green-900: 51, 105, 30;
231
- --palette-light-green-a100: 204, 255, 144;
232
- --palette-light-green-a200: 178, 255, 89;
233
- --palette-light-green-a400: 118, 255, 3;
234
- --palette-light-green-a700: 100, 221, 23;
235
-
236
- --palette-lime-50: 249, 251, 231;
237
- --palette-lime-100: 240, 244, 195;
238
- --palette-lime-200: 230, 238, 156;
239
- --palette-lime-300: 220, 231, 117;
240
- --palette-lime-400: 212, 225, 87;
241
- --palette-lime-500: 205, 220, 57;
242
- --palette-lime-600: 192, 202, 51;
243
- --palette-lime-700: 175, 180, 43;
244
- --palette-lime-800: 158, 157, 36;
245
- --palette-lime-900: 130, 119, 23;
246
- --palette-lime-a100: 244, 255, 129;
247
- --palette-lime-a200: 238, 255, 65;
248
- --palette-lime-a400: 198, 255, 0;
249
- --palette-lime-a700: 174, 234, 0;
250
-
251
- --palette-yellow-50: 255, 253, 231;
252
- --palette-yellow-100: 255, 249, 196;
253
- --palette-yellow-200: 255, 245, 157;
254
- --palette-yellow-300: 255, 241, 118;
255
- --palette-yellow-400: 255, 238, 88;
256
- --palette-yellow-500: 255, 235, 59;
257
- --palette-yellow-600: 253, 216, 53;
258
- --palette-yellow-700: 251, 192, 45;
259
- --palette-yellow-800: 249, 168, 37;
260
- --palette-yellow-900: 245, 127, 23;
261
- --palette-yellow-a100: 255, 255, 141;
262
- --palette-yellow-a200: 255, 255, 0;
263
- --palette-yellow-a400: 255, 234, 0;
264
- --palette-yellow-a700: 255, 214, 0;
265
-
266
- --palette-amber-50: 255, 248, 225;
267
- --palette-amber-100: 255, 236, 179;
268
- --palette-amber-200: 255, 224, 130;
269
- --palette-amber-300: 255, 213, 79;
270
- --palette-amber-400: 255, 202, 40;
271
- --palette-amber-500: 255, 193, 7;
272
- --palette-amber-600: 255, 179, 0;
273
- --palette-amber-700: 255, 160, 0;
274
- --palette-amber-800: 255, 143, 0;
275
- --palette-amber-900: 255, 111, 0;
276
- --palette-amber-a100: 255, 229, 127;
277
- --palette-amber-a200: 255, 215, 64;
278
- --palette-amber-a400: 255, 196, 0;
279
- --palette-amber-a700: 255, 171, 0;
280
-
281
- --palette-orange-50: 255, 243, 224;
282
- --palette-orange-100: 255, 224, 178;
283
- --palette-orange-200: 255, 204, 128;
284
- --palette-orange-300: 255, 183, 77;
285
- --palette-orange-400: 255, 167, 38;
286
- --palette-orange-500: 255, 152, 0;
287
- --palette-orange-600: 251, 140, 0;
288
- --palette-orange-700: 245, 124, 0;
289
- --palette-orange-800: 239, 108, 0;
290
- --palette-orange-900: 230, 81, 0;
291
- --palette-orange-a100: 255, 209, 128;
292
- --palette-orange-a200: 255, 171, 64;
293
- --palette-orange-a400: 255, 145, 0;
294
- --palette-orange-a700: 255, 109, 0;
295
-
296
- --palette-deep-orange-50: 251, 233, 231;
297
- --palette-deep-orange-100: 255, 204, 188;
298
- --palette-deep-orange-200: 255, 171, 145;
299
- --palette-deep-orange-300: 255, 138, 101;
300
- --palette-deep-orange-400: 255, 112, 67;
301
- --palette-deep-orange-500: 255, 87, 34;
302
- --palette-deep-orange-600: 244, 81, 30;
303
- --palette-deep-orange-700: 230, 74, 25;
304
- --palette-deep-orange-800: 216, 67, 21;
305
- --palette-deep-orange-900: 191, 54, 12;
306
- --palette-deep-orange-a100: 255, 158, 128;
307
- --palette-deep-orange-a200: 255, 110, 64;
308
- --palette-deep-orange-a400: 255, 61, 0;
309
- --palette-deep-orange-a700: 221, 44, 0;
310
-
311
- --palette-brown-50: 239, 235, 233;
312
- --palette-brown-100: 215, 204, 200;
313
- --palette-brown-200: 188, 170, 164;
314
- --palette-brown-300: 161, 136, 127;
315
- --palette-brown-400: 141, 110, 99;
316
- --palette-brown-500: 121, 85, 72;
317
- --palette-brown-600: 109, 76, 65;
318
- --palette-brown-700: 93, 64, 55;
319
- --palette-brown-800: 78, 52, 46;
320
- --palette-brown-900: 62, 39, 35;
321
-
322
- --palette-grey-50: 250, 250, 250;
323
- --palette-grey-100: 245, 245, 245;
324
- --palette-grey-200: 238, 238, 238;
325
- --palette-grey-300: 224, 224, 224;
326
- --palette-grey-400: 189, 189, 189;
327
- --palette-grey-500: 158, 158, 158;
328
- --palette-grey-600: 117, 117, 117;
329
- --palette-grey-700: 97, 97, 97;
330
- --palette-grey-800: 66, 66, 66;
331
- --palette-grey-900: 33, 33, 33;
332
-
333
- --palette-blue-grey-50: 236, 239, 241;
334
- --palette-blue-grey-100: 207, 216, 220;
335
- --palette-blue-grey-200: 176, 190, 197;
336
- --palette-blue-grey-300: 144, 164, 174;
337
- --palette-blue-grey-400: 120, 144, 156;
338
- --palette-blue-grey-500: 96, 125, 139;
339
- --palette-blue-grey-600: 84, 110, 122;
340
- --palette-blue-grey-700: 69, 90, 100;
341
- --palette-blue-grey-800: 55, 71, 79;
342
- --palette-blue-grey-900: 38, 50, 56;
343
- }
344
-
345
- :root[dark] {
346
- --color-black: 238, 238, 238;
347
- --color-white: 11, 11, 11;
348
-
349
- --palette-grey-50: 22, 22, 22;
350
- --palette-grey-100: 33, 33, 33;
351
- --palette-grey-200: 44, 44, 44;
352
- --palette-grey-300: 66, 66, 66;
353
- --palette-grey-400: 97, 97, 97;
354
- --palette-grey-500: 117, 117, 117;
355
- --palette-grey-600: 158, 158, 158;
356
- --palette-grey-700: 189, 189, 189;
357
- --palette-grey-800: 224, 224, 224;
358
- --palette-grey-900: 238, 238, 238;
359
- }
8
+ body {
9
+ animation-duration: var(--animation-duration);
10
+ animation-delay: var(--animation-delay);
11
+ animation-timing-function: var(--animation-curve-default);
12
+ margin: 0;
13
+ }
360
14
 
361
- :root {
362
- --color-primary: var(--palette-indigo-500);
363
- --color-primary-light: var(--palette-indigo-100);
364
- --color-accent: var(--palette-pink-a200);
365
- --color-divider: var(--palette-grey-300);
366
-
367
- --preferred-font: "Roboto", "Helvetica", "Arial", sans-serif;
368
- --font-size: 16px;
369
- --font-size-small: 14px;
370
- --font-size-big: 18px;
371
- --font-weight-semi-bold: 500;
372
- --font-weight-bold: 700;
373
-
374
- --shadow-2p: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
375
- --shadow-4p: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
376
-
377
- --animation-duration: 0.35s;
378
- --animation-duration-short: 0.2s;
379
- --animation-delay: calc(var(--animation-duration) / 5);
380
-
381
- --animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1);
382
- --animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1);
383
- --animation-curve-focus-ring: cubic-bezier(0.2, 0, 0, 1);
384
- --animation-curve-default: var(--animation-curve-fast-out-slow-in);
385
-
386
- --z-index-highest: 300;
387
- --z-index-higher: 200;
388
- --z-index-high: 100;
389
- --z-index-normal: 1;
390
- }
391
-
392
- :root[dark] {
393
- color-scheme: dark;
394
-
395
- --color-primary: var(--palette-indigo-300);
396
- --color-primary-light: var(--palette-indigo-900);
397
- --color-accent: var(--palette-pink-a100);
398
- }
15
+ textarea {
16
+ resize: vertical;
17
+ }
18
+
19
+ h1, h2, h3, h4, h5, h6 {
20
+ margin: 24px 0;
21
+ font-weight: 400;
22
+ }
23
+
24
+ h1 {
25
+ font-size: calc(3.5 * var(--font-size));
26
+ letter-spacing: -.02em;
27
+ line-height: 1.35;
28
+ }
29
+
30
+ h2 {
31
+ font-size: calc(2.8 * var(--font-size));
32
+ line-height: 48px;
33
+ }
34
+
35
+ h3 {
36
+ font-size: calc(2.2 * var(--font-size));
37
+ line-height: 40px;
38
+ }
39
+
40
+ h4 {
41
+ font-size: calc(1.5 * var(--font-size));
42
+ line-height: 32px;
43
+ }
44
+
45
+ h5 {
46
+ font-size: calc(1.25 * var(--font-size));
47
+ font-weight: var(--font-weight-semi-bold);
48
+ letter-spacing: .02em;
49
+ line-height: 1;
50
+ }
51
+
52
+ h6 {
53
+ font-size: var(--font-size);
54
+ letter-spacing: .04em;
55
+ line-height: 24px;
56
+ }
57
+
58
+ th {
59
+ font-weight: normal;
60
+ }
61
+ :root {
62
+ --color-black: 0, 0, 0;
63
+ --color-white: 255, 255, 255;
64
+ --palette-red-50: 255, 235, 238;
65
+ --palette-red-100: 255, 205, 210;
66
+ --palette-red-200: 239, 154, 154;
67
+ --palette-red-300: 229, 115, 115;
68
+ --palette-red-400: 239, 83, 80;
69
+ --palette-red-500: 244, 67, 54;
70
+ --palette-red-600: 229, 57, 53;
71
+ --palette-red-700: 211, 47, 47;
72
+ --palette-red-800: 198, 40, 40;
73
+ --palette-red-900: 183, 28, 28;
74
+ --palette-red-a100: 255, 138, 128;
75
+ --palette-red-a200: 255, 82, 82;
76
+ --palette-red-a400: 255, 23, 68;
77
+ --palette-red-a700: 213, 0, 0;
78
+ --palette-pink-50: 252, 228, 236;
79
+ --palette-pink-100: 248, 187, 208;
80
+ --palette-pink-200: 244, 143, 177;
81
+ --palette-pink-300: 240, 98, 146;
82
+ --palette-pink-400: 236, 64, 122;
83
+ --palette-pink-500: 233, 30, 99;
84
+ --palette-pink-600: 216, 27, 96;
85
+ --palette-pink-700: 194, 24, 91;
86
+ --palette-pink-800: 173, 20, 87;
87
+ --palette-pink-900: 136, 14, 79;
88
+ --palette-pink-a100: 255, 128, 171;
89
+ --palette-pink-a200: 255, 64, 129;
90
+ --palette-pink-a400: 245, 0, 87;
91
+ --palette-pink-a700: 197, 17, 98;
92
+ --palette-purple-50: 243, 229, 245;
93
+ --palette-purple-100: 225, 190, 231;
94
+ --palette-purple-200: 206, 147, 216;
95
+ --palette-purple-300: 186, 104, 200;
96
+ --palette-purple-400: 171, 71, 188;
97
+ --palette-purple-500: 156, 39, 176;
98
+ --palette-purple-600: 142, 36, 170;
99
+ --palette-purple-700: 123, 31, 162;
100
+ --palette-purple-800: 106, 27, 154;
101
+ --palette-purple-900: 74, 20, 140;
102
+ --palette-purple-a100: 234, 128, 252;
103
+ --palette-purple-a200: 224, 64, 251;
104
+ --palette-purple-a400: 213, 0, 249;
105
+ --palette-purple-a700: 170, 0, 255;
106
+ --palette-deep-purple-50: 237, 231, 246;
107
+ --palette-deep-purple-100: 209, 196, 233;
108
+ --palette-deep-purple-200: 179, 157, 219;
109
+ --palette-deep-purple-300: 149, 117, 205;
110
+ --palette-deep-purple-400: 126, 87, 194;
111
+ --palette-deep-purple-500: 103, 58, 183;
112
+ --palette-deep-purple-600: 94, 53, 177;
113
+ --palette-deep-purple-700: 81, 45, 168;
114
+ --palette-deep-purple-800: 69, 39, 160;
115
+ --palette-deep-purple-900: 49, 27, 146;
116
+ --palette-deep-purple-a100: 179, 136, 255;
117
+ --palette-deep-purple-a200: 124, 77, 255;
118
+ --palette-deep-purple-a400: 101, 31, 255;
119
+ --palette-deep-purple-a700: 98, 0, 234;
120
+ --palette-indigo-50: 232, 234, 246;
121
+ --palette-indigo-100: 197, 202, 233;
122
+ --palette-indigo-200: 159, 168, 218;
123
+ --palette-indigo-300: 121, 134, 203;
124
+ --palette-indigo-400: 92, 107, 192;
125
+ --palette-indigo-500: 63, 81, 181;
126
+ --palette-indigo-600: 57, 73, 171;
127
+ --palette-indigo-700: 48, 63, 159;
128
+ --palette-indigo-800: 40, 53, 147;
129
+ --palette-indigo-900: 26, 35, 126;
130
+ --palette-indigo-a100: 140, 158, 255;
131
+ --palette-indigo-a200: 83, 109, 254;
132
+ --palette-indigo-a400: 61, 90, 254;
133
+ --palette-indigo-a700: 48, 79, 254;
134
+ --palette-blue-50: 227, 242, 253;
135
+ --palette-blue-100: 187, 222, 251;
136
+ --palette-blue-200: 144, 202, 249;
137
+ --palette-blue-300: 100, 181, 246;
138
+ --palette-blue-400: 66, 165, 245;
139
+ --palette-blue-500: 33, 150, 243;
140
+ --palette-blue-600: 30, 136, 229;
141
+ --palette-blue-700: 25, 118, 210;
142
+ --palette-blue-800: 21, 101, 192;
143
+ --palette-blue-900: 13, 71, 161;
144
+ --palette-blue-a100: 130, 177, 255;
145
+ --palette-blue-a200: 68, 138, 255;
146
+ --palette-blue-a400: 41, 121, 255;
147
+ --palette-blue-a700: 41, 98, 255;
148
+ --palette-light-blue-50: 225, 245, 254;
149
+ --palette-light-blue-100: 179, 229, 252;
150
+ --palette-light-blue-200: 129, 212, 250;
151
+ --palette-light-blue-300: 79, 195, 247;
152
+ --palette-light-blue-400: 41, 182, 246;
153
+ --palette-light-blue-500: 3, 169, 244;
154
+ --palette-light-blue-600: 3, 155, 229;
155
+ --palette-light-blue-700: 2, 136, 209;
156
+ --palette-light-blue-800: 2, 119, 189;
157
+ --palette-light-blue-900: 1, 87, 155;
158
+ --palette-light-blue-a100: 128, 216, 255;
159
+ --palette-light-blue-a200: 64, 196, 255;
160
+ --palette-light-blue-a400: 0, 176, 255;
161
+ --palette-light-blue-a700: 0, 145, 234;
162
+ --palette-cyan-50: 224, 247, 250;
163
+ --palette-cyan-100: 178, 235, 242;
164
+ --palette-cyan-200: 128, 222, 234;
165
+ --palette-cyan-300: 77, 208, 225;
166
+ --palette-cyan-400: 38, 198, 218;
167
+ --palette-cyan-500: 0, 188, 212;
168
+ --palette-cyan-600: 0, 172, 193;
169
+ --palette-cyan-700: 0, 151, 167;
170
+ --palette-cyan-800: 0, 131, 143;
171
+ --palette-cyan-900: 0, 96, 100;
172
+ --palette-cyan-a100: 132, 255, 255;
173
+ --palette-cyan-a200: 24, 255, 255;
174
+ --palette-cyan-a400: 0, 229, 255;
175
+ --palette-cyan-a700: 0, 184, 212;
176
+ --palette-teal-50: 224, 242, 241;
177
+ --palette-teal-100: 178, 223, 219;
178
+ --palette-teal-200: 128, 203, 196;
179
+ --palette-teal-300: 77, 182, 172;
180
+ --palette-teal-400: 38, 166, 154;
181
+ --palette-teal-500: 0, 150, 136;
182
+ --palette-teal-600: 0, 137, 123;
183
+ --palette-teal-700: 0, 121, 107;
184
+ --palette-teal-800: 0, 105, 92;
185
+ --palette-teal-900: 0, 77, 64;
186
+ --palette-teal-a100: 167, 255, 235;
187
+ --palette-teal-a200: 100, 255, 218;
188
+ --palette-teal-a400: 29, 233, 182;
189
+ --palette-teal-a700: 0, 191, 165;
190
+ --palette-green-50: 232, 245, 233;
191
+ --palette-green-100: 200, 230, 201;
192
+ --palette-green-200: 165, 214, 167;
193
+ --palette-green-300: 129, 199, 132;
194
+ --palette-green-400: 102, 187, 106;
195
+ --palette-green-500: 76, 175, 80;
196
+ --palette-green-600: 67, 160, 71;
197
+ --palette-green-700: 56, 142, 60;
198
+ --palette-green-800: 46, 125, 50;
199
+ --palette-green-900: 27, 94, 32;
200
+ --palette-green-a100: 185, 246, 202;
201
+ --palette-green-a200: 105, 240, 174;
202
+ --palette-green-a400: 0, 230, 118;
203
+ --palette-green-a700: 0, 200, 83;
204
+ --palette-light-green-50: 241, 248, 233;
205
+ --palette-light-green-100: 220, 237, 200;
206
+ --palette-light-green-200: 197, 225, 165;
207
+ --palette-light-green-300: 174, 213, 129;
208
+ --palette-light-green-400: 156, 204, 101;
209
+ --palette-light-green-500: 139, 195, 74;
210
+ --palette-light-green-600: 124, 179, 66;
211
+ --palette-light-green-700: 104, 159, 56;
212
+ --palette-light-green-800: 85, 139, 47;
213
+ --palette-light-green-900: 51, 105, 30;
214
+ --palette-light-green-a100: 204, 255, 144;
215
+ --palette-light-green-a200: 178, 255, 89;
216
+ --palette-light-green-a400: 118, 255, 3;
217
+ --palette-light-green-a700: 100, 221, 23;
218
+ --palette-lime-50: 249, 251, 231;
219
+ --palette-lime-100: 240, 244, 195;
220
+ --palette-lime-200: 230, 238, 156;
221
+ --palette-lime-300: 220, 231, 117;
222
+ --palette-lime-400: 212, 225, 87;
223
+ --palette-lime-500: 205, 220, 57;
224
+ --palette-lime-600: 192, 202, 51;
225
+ --palette-lime-700: 175, 180, 43;
226
+ --palette-lime-800: 158, 157, 36;
227
+ --palette-lime-900: 130, 119, 23;
228
+ --palette-lime-a100: 244, 255, 129;
229
+ --palette-lime-a200: 238, 255, 65;
230
+ --palette-lime-a400: 198, 255, 0;
231
+ --palette-lime-a700: 174, 234, 0;
232
+ --palette-yellow-50: 255, 253, 231;
233
+ --palette-yellow-100: 255, 249, 196;
234
+ --palette-yellow-200: 255, 245, 157;
235
+ --palette-yellow-300: 255, 241, 118;
236
+ --palette-yellow-400: 255, 238, 88;
237
+ --palette-yellow-500: 255, 235, 59;
238
+ --palette-yellow-600: 253, 216, 53;
239
+ --palette-yellow-700: 251, 192, 45;
240
+ --palette-yellow-800: 249, 168, 37;
241
+ --palette-yellow-900: 245, 127, 23;
242
+ --palette-yellow-a100: 255, 255, 141;
243
+ --palette-yellow-a200: 255, 255, 0;
244
+ --palette-yellow-a400: 255, 234, 0;
245
+ --palette-yellow-a700: 255, 214, 0;
246
+ --palette-amber-50: 255, 248, 225;
247
+ --palette-amber-100: 255, 236, 179;
248
+ --palette-amber-200: 255, 224, 130;
249
+ --palette-amber-300: 255, 213, 79;
250
+ --palette-amber-400: 255, 202, 40;
251
+ --palette-amber-500: 255, 193, 7;
252
+ --palette-amber-600: 255, 179, 0;
253
+ --palette-amber-700: 255, 160, 0;
254
+ --palette-amber-800: 255, 143, 0;
255
+ --palette-amber-900: 255, 111, 0;
256
+ --palette-amber-a100: 255, 229, 127;
257
+ --palette-amber-a200: 255, 215, 64;
258
+ --palette-amber-a400: 255, 196, 0;
259
+ --palette-amber-a700: 255, 171, 0;
260
+ --palette-orange-50: 255, 243, 224;
261
+ --palette-orange-100: 255, 224, 178;
262
+ --palette-orange-200: 255, 204, 128;
263
+ --palette-orange-300: 255, 183, 77;
264
+ --palette-orange-400: 255, 167, 38;
265
+ --palette-orange-500: 255, 152, 0;
266
+ --palette-orange-600: 251, 140, 0;
267
+ --palette-orange-700: 245, 124, 0;
268
+ --palette-orange-800: 239, 108, 0;
269
+ --palette-orange-900: 230, 81, 0;
270
+ --palette-orange-a100: 255, 209, 128;
271
+ --palette-orange-a200: 255, 171, 64;
272
+ --palette-orange-a400: 255, 145, 0;
273
+ --palette-orange-a700: 255, 109, 0;
274
+ --palette-deep-orange-50: 251, 233, 231;
275
+ --palette-deep-orange-100: 255, 204, 188;
276
+ --palette-deep-orange-200: 255, 171, 145;
277
+ --palette-deep-orange-300: 255, 138, 101;
278
+ --palette-deep-orange-400: 255, 112, 67;
279
+ --palette-deep-orange-500: 255, 87, 34;
280
+ --palette-deep-orange-600: 244, 81, 30;
281
+ --palette-deep-orange-700: 230, 74, 25;
282
+ --palette-deep-orange-800: 216, 67, 21;
283
+ --palette-deep-orange-900: 191, 54, 12;
284
+ --palette-deep-orange-a100: 255, 158, 128;
285
+ --palette-deep-orange-a200: 255, 110, 64;
286
+ --palette-deep-orange-a400: 255, 61, 0;
287
+ --palette-deep-orange-a700: 221, 44, 0;
288
+ --palette-brown-50: 239, 235, 233;
289
+ --palette-brown-100: 215, 204, 200;
290
+ --palette-brown-200: 188, 170, 164;
291
+ --palette-brown-300: 161, 136, 127;
292
+ --palette-brown-400: 141, 110, 99;
293
+ --palette-brown-500: 121, 85, 72;
294
+ --palette-brown-600: 109, 76, 65;
295
+ --palette-brown-700: 93, 64, 55;
296
+ --palette-brown-800: 78, 52, 46;
297
+ --palette-brown-900: 62, 39, 35;
298
+ --palette-grey-50: 250, 250, 250;
299
+ --palette-grey-100: 245, 245, 245;
300
+ --palette-grey-200: 238, 238, 238;
301
+ --palette-grey-300: 224, 224, 224;
302
+ --palette-grey-400: 189, 189, 189;
303
+ --palette-grey-500: 158, 158, 158;
304
+ --palette-grey-600: 117, 117, 117;
305
+ --palette-grey-700: 97, 97, 97;
306
+ --palette-grey-800: 66, 66, 66;
307
+ --palette-grey-900: 33, 33, 33;
308
+ --palette-blue-grey-50: 236, 239, 241;
309
+ --palette-blue-grey-100: 207, 216, 220;
310
+ --palette-blue-grey-200: 176, 190, 197;
311
+ --palette-blue-grey-300: 144, 164, 174;
312
+ --palette-blue-grey-400: 120, 144, 156;
313
+ --palette-blue-grey-500: 96, 125, 139;
314
+ --palette-blue-grey-600: 84, 110, 122;
315
+ --palette-blue-grey-700: 69, 90, 100;
316
+ --palette-blue-grey-800: 55, 71, 79;
317
+ --palette-blue-grey-900: 38, 50, 56;
318
+ }
319
+
320
+ :root[dark] {
321
+ --color-black: 238, 238, 238;
322
+ --color-white: 11, 11, 11;
323
+ --palette-grey-50: 22, 22, 22;
324
+ --palette-grey-100: 33, 33, 33;
325
+ --palette-grey-200: 44, 44, 44;
326
+ --palette-grey-300: 66, 66, 66;
327
+ --palette-grey-400: 97, 97, 97;
328
+ --palette-grey-500: 117, 117, 117;
329
+ --palette-grey-600: 158, 158, 158;
330
+ --palette-grey-700: 189, 189, 189;
331
+ --palette-grey-800: 224, 224, 224;
332
+ --palette-grey-900: 238, 238, 238;
333
+ }
334
+ :root {
335
+ --color-primary: var(--palette-indigo-500);
336
+ --color-primary-light: var(--palette-indigo-100);
337
+ --color-accent: var(--palette-pink-a200);
338
+ --color-divider: var(--palette-grey-300);
339
+ --preferred-font: "Roboto", "Helvetica", "Arial", sans-serif;
340
+ --font-size: 16px;
341
+ --font-size-small: 14px;
342
+ --font-size-big: 18px;
343
+ --font-weight-semi-bold: 500;
344
+ --font-weight-bold: 700;
345
+ --shadow-2p: 0 2px 2px 0 #00000024, 0 3px 1px -2px #0003, 0 1px 5px 0 #0000001f;
346
+ --shadow-4p: 0 4px 5px 0 #00000024, 0 1px 10px 0 #0000001f, 0 2px 4px -1px #0003;
347
+ --animation-duration: .35s;
348
+ --animation-duration-short: .2s;
349
+ --animation-delay: calc(var(--animation-duration) / 5);
350
+ --animation-curve-fast-out-slow-in: cubic-bezier(.4, 0, .2, 1);
351
+ --animation-curve-fast-out-linear-in: cubic-bezier(.4, 0, 1, 1);
352
+ --animation-curve-focus-ring: cubic-bezier(.2, 0, 0, 1);
353
+ --animation-curve-default: var(--animation-curve-fast-out-slow-in);
354
+ --z-index-highest: 300;
355
+ --z-index-higher: 200;
356
+ --z-index-high: 100;
357
+ --z-index-normal: 1;
358
+ }
359
+
360
+ :root[dark] {
361
+ color-scheme: dark;
362
+ --color-primary: var(--palette-indigo-300);
363
+ --color-primary-light: var(--palette-indigo-900);
364
+ --color-accent: var(--palette-pink-a100);
365
+ }