-
Notifications
You must be signed in to change notification settings - Fork 0
/
md3-colors.css
478 lines (407 loc) · 25.3 KB
/
md3-colors.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
/*
Author: Kianoush
Github: @thisiskianoush
This file contains all colors introduced by Material Design v3
*/
:root {
--md3-color-white: #ffffff;
--md3-color-black: #000000;
/* Light Mode Colors */
--md3-color-sys-light-primary: #6750A4;
--md3-color-sys-light-on-primary:#FFFFFF;
--md3-color-sys-light-primary-container: #EADDFF;
--md3-color-sys-light-on-primary-container: #21005D;
--md3-color-sys-light-secondary: #625B71;
--md3-color-sys-light-on-secondary: #FFFFFF;
--md3-color-sys-light-secondary-container: #E8DEF8;
--md3-color-sys-light-on-secondary-container: #1D192B;
--md3-color-sys-light-tertiary: #7D5260;
--md3-color-sys-light-on-tertiary: #ffffff;
--md3-color-sys-light-tertiary-container: #FFD8E4;
--md3-color-sys-light-on-tertiary-container: #31111D;
--md3-color-sys-light-error: #B3261E;
--md3-color-sys-light-error-container: #F9DEDC;
--md3-color-sys-light-on-error: #ffffff;
--md3-color-sys-light-on-error-container: #410E0B;
--md3-color-sys-light-background: #FFFBFE;
--md3-color-sys-light-on-background: #1C1B1F;
--md3-color-sys-light-surface: #FFFBFE;
--md3-color-sys-light-on-surface: #1C1B1F;
--md3-color-sys-light-surface-variant: #E7E0EC;
--md3-color-sys-light-on-surface-variant: #49454F;
--md3-color-sys-light-outline: #79747E;
--md3-color-sys-light-inverse-on-surface: #F4EFF4;
--md3-color-sys-light-inverse-surface: #313033;
--md3-color-sys-light-surface-tint: #6750A4;
--md3-color-sys-light-surface-tint-color: #6750A4;
--md3-color-sys-light-shadow: #000000;
--md3-color-sys-light-inverse-primary: #D0BCFF;
/* Dark Mode Colors */
--md3-color-sys-dark-primary: #D0BCFF;
--md3-color-sys-dark-on-primary:#381E72;
--md3-color-sys-dark-primary-container: #4F378B;
--md3-color-sys-dark-on-primary-container: #EADDFF;
--md3-color-sys-dark-secondary: #CCC2DC;
--md3-color-sys-dark-on-secondary: #332D41;
--md3-color-sys-dark-secondary-container: #4A4458;
--md3-color-sys-dark-on-secondary-container: #E8DEF8;
--md3-color-sys-dark-tertiary: #EFB8C8;
--md3-color-sys-dark-on-tertiary: #492532;
--md3-color-sys-dark-tertiary-container: #633B48;
--md3-color-sys-dark-on-tertiary-container: #FFD8E4;
--md3-color-sys-dark-error: #F2B8B5;
--md3-color-sys-dark-error-container: #8C1D18;
--md3-color-sys-dark-on-error: #601410;
--md3-color-sys-dark-on-error-container: #F2B8B5;
--md3-color-sys-dark-background: #1C1B1F;
--md3-color-sys-dark-on-background: #E6E1E5;
--md3-color-sys-dark-surface: #1C1B1F;
--md3-color-sys-dark-on-surface: #E6E1E5;
--md3-color-sys-dark-surface-variant: #49454F;
--md3-color-sys-dark-on-surface-variant: #CAC4D0;
--md3-color-sys-dark-outline: #938F99;
--md3-color-sys-dark-inverse-on-surface: #313033;
--md3-color-sys-dark-inverse-surface: #E6E1E5;
--md3-color-sys-dark-surface-tint: #D0BCFF;
--md3-color-sys-dark-surface-tint-color: #D0BCFF;
--md3-color-sys-dark-shadow: #000000;
--md3-color-sys-dark-inverse-primary: #6750A4;
/* Ref Colors */
/* Primary Ref Colors */
--md3-color-ref-primary-100: #ffffff;
--md3-color-ref-primary-99: #FFFBFE;
--md3-color-ref-primary-95: #F6EDFF;
--md3-color-ref-primary-90: #EADDFF;
--md3-color-ref-primary-80: #D0BCFF;
--md3-color-ref-primary-70: #B69DF8;
--md3-color-ref-primary-60: #9A82DB;
--md3-color-ref-primary-50: #7F67BE;
--md3-color-ref-primary-40: #6750A4;
--md3-color-ref-primary-30: #4F378B;
--md3-color-ref-primary-20: #381E72;
--md3-color-ref-primary-10: #21005D;
--md3-color-ref-primary-0: #000000;
/* Secondary Ref Colors */
--md3-color-ref-secondary-100: #FFFFFF;
--md3-color-ref-secondary-99: #FFFBFE;
--md3-color-ref-secondary-95: #F6EDFF;
--md3-color-ref-secondary-90: #E8DEF8;
--md3-color-ref-secondary-80: #CCC2DC;
--md3-color-ref-secondary-70: #B0A7C0;
--md3-color-ref-secondary-60: #958DA5;
--md3-color-ref-secondary-50: #7A7289;
--md3-color-ref-secondary-40: #625B71;
--md3-color-ref-secondary-30: #4A4458;
--md3-color-ref-secondary-20: #332D41;
--md3-color-ref-secondary-10: #1D192B;
--md3-color-ref-secondary-0: #000000;
/* Tertiary Ref Colors */
--md3-color-ref-tertiary-100: #FFFFFF;
--md3-color-ref-tertiary-99: #FFFBFA;
--md3-color-ref-tertiary-95: #FFECF1;
--md3-color-ref-tertiary-90: #FFD8E4;
--md3-color-ref-tertiary-80: #EFB8C8;
--md3-color-ref-tertiary-70: #D29DAC;
--md3-color-ref-tertiary-60: #B58392;
--md3-color-ref-tertiary-50: #986977;
--md3-color-ref-tertiary-40: #7D5260;
--md3-color-ref-tertiary-30: #633B48;
--md3-color-ref-tertiary-20: #492532;
--md3-color-ref-tertiary-10: #31111D;
--md3-color-ref-tertiary-0: #000000;
/* Neutral Ref Colors */
--md3-color-ref-neutral-100: #FFFFFF;
--md3-color-ref-neutral-99: #FFFBFE;
--md3-color-ref-neutral-95: #F4EFF4;
--md3-color-ref-neutral-90: #E6E1E5;
--md3-color-ref-neutral-80: #C9C5CA;
--md3-color-ref-neutral-70: #AEAAAE;
--md3-color-ref-neutral-60: #939094;
--md3-color-ref-neutral-50: #787579;
--md3-color-ref-neutral-40: #605D62;
--md3-color-ref-neutral-30: #484649;
--md3-color-ref-neutral-20: #313033;
--md3-color-ref-neutral-10: #1C1B1F;
--md3-color-ref-neutral-0: #000000;
/* Neutral-Variant Ref Colors */
--md3-color-ref-neutral-variant-100: #FFFFFF;
--md3-color-ref-neutral-variant-99: #FFFBFE;
--md3-color-ref-neutral-variant-95: #F5EEFA;
--md3-color-ref-neutral-variant-90: #E7E0EC;
--md3-color-ref-neutral-variant-80: #CAC4D0;
--md3-color-ref-neutral-variant-70: #AEA9B4;
--md3-color-ref-neutral-variant-60: #938F99;
--md3-color-ref-neutral-variant-50: #79747E;
--md3-color-ref-neutral-variant-40: #605D66;
--md3-color-ref-neutral-variant-30: #49454F;
--md3-color-ref-neutral-variant-20: #322F37;
--md3-color-ref-neutral-variant-10: #1D1A22;
--md3-color-ref-neutral-variant-0: #000000;
/* Error Ref Colors */
--md3-color-ref-error-100: #FFFFFF;
--md3-color-ref-error-99: #FFFBF9;
--md3-color-ref-error-95: #FCEEEE;
--md3-color-ref-error-90: #F9DEDC;
--md3-color-ref-error-80: #F2B8B5;
--md3-color-ref-error-70: #EC928E;
--md3-color-ref-error-60: #E46962;
--md3-color-ref-error-50: #DC362E;
--md3-color-ref-error-40: #B3261E;
--md3-color-ref-error-30: #8C1D18;
--md3-color-ref-error-20: #601410;
--md3-color-ref-error-10: #410E0B;
--md3-color-ref-error-0: #000000;
/* Source Colors */
--md3-color-source-seed: #6750A4;
--md3-color-source-primary: #6750A4;
--md3-color-source-secondary: #625B71;
--md3-color-source-tertiary: #7D5260;
--md3-color-source-neutral: #605D62;
--md3-color-source-neutral-variant: #605D66;
--md3-color-source-error: #B3261E;
/* Surface Light Colors */
--md3-color-surface-light-1: linear-gradient(0deg, rgba(103, 80, 164, 0.05), rgba(103, 80, 164, 0.05)), #FFFBFE;
--md3-color-surface-light-2: linear-gradient(0deg, rgba(103, 80, 164, 0.08), rgba(103, 80, 164, 0.08)), #FFFBFE;
--md3-color-surface-light-3: linear-gradient(0deg, rgba(103, 80, 164, 0.11), rgba(103, 80, 164, 0.11)), #FFFBFE;
--md3-color-surface-light-4: linear-gradient(0deg, rgba(103, 80, 164, 0.12), rgba(103, 80, 164, 0.12)), #FFFBFE;
--md3-color-surface-light-5: linear-gradient(0deg, rgba(103, 80, 164, 0.14), rgba(103, 80, 164, 0.14)), #FFFBFE;
/* Surface Dark Colors */
--md3-color-surface-dark-1: #1C1B1F;
--md3-color-surface-dark-2: linear-gradient(0deg, rgba(208, 188, 255, 0.08), rgba(208, 188, 255, 0.08)), #1C1B1F;
--md3-color-surface-dark-3: linear-gradient(0deg, rgba(208, 188, 255, 0.11), rgba(208, 188, 255, 0.11)), #1C1B1F;
--md3-color-surface-dark-4: linear-gradient(0deg, rgba(208, 188, 255, 0.12), rgba(208, 188, 255, 0.12)), #1C1B1F;
--md3-color-surface-dark-5: linear-gradient(0deg, rgba(208, 188, 255, 0.14), rgba(208, 188, 255, 0.14)), #1C1B1F;
/* Key Colors Colors */
--md3-color-key-color-primary: #6750A4;
--md3-color-key-color-secondary: #625B71;
--md3-color-key-color-tertiary: #7D5260;
--md3-color-key-color-error: #B3261E;
--md3-color-key-color-neutral: #605D62;
--md3-color-key-color-neutral-variant: #605D66;
/* State Layers Light Colors */
--md3-color-state-layer-light-surface-tint-hover: rgba(103, 80, 164, 0.08);
--md3-color-state-layer-light-surface-tint-focus: rgba(103, 80, 164, 0.12);
--md3-color-state-layer-light-surface-tint-press: rgba(103, 80, 164, 0.12);
--md3-color-state-layer-light-surface-tint-drag: rgba(103, 80, 164, 0.16);
--md3-color-state-layer-light-on-error-container-hover: rgba(65, 14, 11, 0.08);
--md3-color-state-layer-light-on-error-container-focus: rgba(65, 14, 11, 0.12);
--md3-color-state-layer-light-on-error-container-press: rgba(65, 14, 11, 0.12);
--md3-color-state-layer-light-on-error-container-drag: rgba(65, 14, 11, 0.16);
--md3-color-state-layer-light-on-error-hover-hover: rgba(255, 255, 255, 0.08);
--md3-color-state-layer-light-on-error-hover-focus: rgba(255, 255, 255, 0.12);
--md3-color-state-layer-light-on-error-hover-press: rgba(255, 255, 255, 0.12);
--md3-color-state-layer-light-on-error-hover-drag: rgba(255, 255, 255, 0.16);
--md3-color-state-layer-light-error-container-hover: rgba(249, 222, 220, 0.08);
--md3-color-state-layer-light-error-container-focus: rgba(249, 222, 220, 0.12);
--md3-color-state-layer-light-error-container-press: rgba(249, 222, 220, 0.12);
--md3-color-state-layer-light-error-container-drag: rgba(249, 222, 220, 0.16);
--md3-color-state-layer-light-on-tertiary-container-hover: rgba(49, 17, 29, 0.08);
--md3-color-state-layer-light-on-tertiary-container-focus: rgba(49, 17, 29, 0.12);
--md3-color-state-layer-light-on-tertiary-container-press: rgba(49, 17, 29, 0.12);
--md3-color-state-layer-light-on-tertiary-container-drag: rgba(49, 17, 29, 0.16);
--md3-color-state-layer-light-on-tertiary-hover: rgba(255, 255, 255, 0.08);
--md3-color-state-layer-light-on-tertiary-focus: rgba(255, 255, 255, 0.12);
--md3-color-state-layer-light-on-tertiary-press: rgba(255, 255, 255, 0.12);
--md3-color-state-layer-light-on-tertiary-drag: rgba(255, 255, 255, 0.16);
--md3-color-state-layer-light-tertiary-container-hover: rgba(255, 216, 228, 0.08);
--md3-color-state-layer-light-tertiary-container-focus: rgba(255, 216, 228, 0.12);
--md3-color-state-layer-light-tertiary-container-press: rgba(255, 216, 228, 0.12);
--md3-color-state-layer-light-tertiary-container-drag: rgba(255, 216, 228, 0.16);
--md3-color-state-layer-light-tertiary-hover-hover: rgba(125, 82, 96, 0.08);
--md3-color-state-layer-light-tertiary-hover-focus: rgba(125, 82, 96, 0.12);
--md3-color-state-layer-light-tertiary-hover-press: rgba(125, 82, 96, 0.12);
--md3-color-state-layer-light-tertiary-hover-drag: rgba(125, 82, 96, 0.16);
--md3-color-state-layer-light-shadow-hover: rgba(0, 0, 0, 0.08);
--md3-color-state-layer-light-shadow-focus: rgba(0, 0, 0, 0.08);
--md3-color-state-layer-light-shadow-press: rgba(0, 0, 0, 0.08);
--md3-color-state-layer-light-shadow-drag: rgba(0, 0, 0, 0.08);
--md3-color-state-layer-light-error-hover: rgba(179, 38, 30, 0.08);
--md3-color-state-layer-light-error-focus: rgba(179, 38, 30, 0.12);
--md3-color-state-layer-light-error-press: rgba(179, 38, 30, 0.12);
--md3-color-state-layer-light-error-drag: rgba(179, 38, 30, 0.16);
--md3-color-state-layer-light-outline-hover: rgba(121, 116, 126, 0.08);
--md3-color-state-layer-light-outline-focus: rgba(121, 116, 126, 0.12);
--md3-color-state-layer-light-outline-press: rgba(121, 116, 126, 0.12);
--md3-color-state-layer-light-outline-drag: rgba(121, 116, 126, 0.16);
--md3-color-state-layer-light-on-background-hover: rgba(28, 27, 31, 0.08);
--md3-color-state-layer-light-on-background-focus: rgba(28, 27, 31, 0.12);
--md3-color-state-layer-light-on-background-press: rgba(28, 27, 31, 0.12);
--md3-color-state-layer-light-on-background-drag: rgba(28, 27, 31, 0.16);
--md3-color-state-layer-light-background-hover: rgba(255, 251, 254, 0.08);
--md3-color-state-layer-light-background-focus: rgba(255, 251, 254, 0.12);
--md3-color-state-layer-light-background-press: rgba(255, 251, 254, 0.12);
--md3-color-state-layer-light-background-drag: rgba(255, 251, 254, 0.16);
--md3-color-state-layer-light-inverse-on-surface-hover: rgba(244, 239, 244, 0.08);
--md3-color-state-layer-light-inverse-on-surface-focus: rgba(244, 239, 244, 0.12);
--md3-color-state-layer-light-inverse-on-surface-press: rgba(244, 239, 244, 0.12);
--md3-color-state-layer-light-inverse-on-surface-drag: rgba(244, 239, 244, 0.16);
--md3-color-state-layer-light-inverse-surface-hover: rgba(49, 48, 51, 0.08);
--md3-color-state-layer-light-inverse-surface-focus: rgba(49, 48, 51, 0.12);
--md3-color-state-layer-light-inverse-surface-press: rgba(49, 48, 51, 0.12);
--md3-color-state-layer-light-inverse-surface-drag: rgba(49, 48, 51, 0.16);
--md3-color-state-layer-light-on-surface-variant-hover: rgba(73, 69, 79, 0.08);
--md3-color-state-layer-light-on-surface-variant-focus: rgba(73, 69, 79, 0.12);
--md3-color-state-layer-light-on-surface-variant-press: rgba(73, 69, 79, 0.12);
--md3-color-state-layer-light-on-surface-variant-drag: rgba(73, 69, 79, 0.16);
--md3-color-state-layer-light-on-surface-hover: rgba(28, 27, 31, 0.08);
--md3-color-state-layer-light-on-surface-focus: rgba(28, 27, 31, 0.12);
--md3-color-state-layer-light-on-surface-press: rgba(28, 27, 31, 0.12);
--md3-color-state-layer-light-on-surface-drag: rgba(28, 27, 31, 0.16);
--md3-color-state-layer-light-surface-variant-hover: rgba(231, 224, 236, 0.08);
--md3-color-state-layer-light-surface-variant-focus: rgba(231, 224, 236, 0.12);
--md3-color-state-layer-light-surface-variant-press: rgba(231, 224, 236, 0.12);
--md3-color-state-layer-light-surface-variant-drag: rgba(231, 224, 236, 0.16);
--md3-color-state-layer-light-surface-hover: rgba(255, 251, 254, 0.08);
--md3-color-state-layer-light-surface-focus: rgba(255, 251, 254, 0.12);
--md3-color-state-layer-light-surface-press: rgba(255, 251, 254, 0.12);
--md3-color-state-layer-light-surface-drag: rgba(255, 251, 254, 0.16);
--md3-color-state-layer-light-on-secondary-container-hover: rgba(29, 25, 43, 0.08);
--md3-color-state-layer-light-on-secondary-container-focus: rgba(29, 25, 43, 0.12);
--md3-color-state-layer-light-on-secondary-container-press: rgba(29, 25, 43, 0.12);
--md3-color-state-layer-light-on-secondary-container-drag: rgba(29, 25, 43, 0.16);
--md3-color-state-layer-light-on-secondary-hover: rgba(255, 255, 255, 0.08);
--md3-color-state-layer-light-on-secondary-focus: rgba(255, 255, 255, 0.12);
--md3-color-state-layer-light-on-secondary-press: rgba(255, 255, 255, 0.12);
--md3-color-state-layer-light-on-secondary-drag: rgba(255, 255, 255, 0.16);
--md3-color-state-layer-light-secondary-container-hover: rgba(232, 222, 248, 0.08);
--md3-color-state-layer-light-secondary-container-focus: rgba(232, 222, 248, 0.08);
--md3-color-state-layer-light-secondary-container-press: rgba(232, 222, 248, 0.08);
--md3-color-state-layer-light-secondary-container-drag: rgba(232, 222, 248, 0.08);
--md3-color-state-layer-light-secondary-hover: rgba(98, 91, 113, 0.08);
--md3-color-state-layer-light-secondary-focus: rgba(98, 91, 113, 0.12);
--md3-color-state-layer-light-secondary-press: rgba(98, 91, 113, 0.12);
--md3-color-state-layer-light-secondary-drag: rgba(98, 91, 113, 0.16);
--md3-color-state-layer-light-inverse-primary-hover: rgba(208, 188, 255, 0.08);
--md3-color-state-layer-light-inverse-primary-focus: rgba(208, 188, 255, 0.12);
--md3-color-state-layer-light-inverse-primary-press: rgba(208, 188, 255, 0.12);
--md3-color-state-layer-light-inverse-primary-drag: rgba(208, 188, 255, 0.16);
--md3-color-state-layer-light-on-primary-container-hover: rgba(33, 0, 93, 0.08);
--md3-color-state-layer-light-on-primary-container-focus: rgba(33, 0, 93, 0.12);
--md3-color-state-layer-light-on-primary-container-press: rgba(33, 0, 93, 0.12);
--md3-color-state-layer-light-on-primary-container-drag: rgba(33, 0, 93, 0.16);
--md3-color-state-layer-light-on-primary-hover: rgba(255, 255, 255, 0.08);
--md3-color-state-layer-light-on-primary-focus: rgba(255, 255, 255, 0.12);
--md3-color-state-layer-light-on-primary-press: rgba(255, 255, 255, 0.12);
--md3-color-state-layer-light-on-primary-drag: rgba(255, 255, 255, 0.16);
--md3-color-state-layer-light-primary-container-hover: rgba(234, 221, 255, 0.08);
--md3-color-state-layer-light-primary-container-focus: rgba(234, 221, 255, 0.12);
--md3-color-state-layer-light-primary-container-press: rgba(234, 221, 255, 0.12);
--md3-color-state-layer-light-primary-container-drag: rgba(234, 221, 255, 0.16);
--md3-color-state-layer-light-primary-hover: rgba(103, 80, 164, 0.08);
--md3-color-state-layer-light-primary-focus: rgba(103, 80, 164, 0.12);
--md3-color-state-layer-light-primary-press: rgba(103, 80, 164, 0.12);
--md3-color-state-layer-light-primary-drag: rgba(103, 80, 164, 0.16);
/* State Layers Dark Colors */
--md3-color-state-layer-dark-surface-tint-hover: rgba(208, 188, 255, 0.08);
--md3-color-state-layer-dark-surface-tint-focus: rgba(208, 188, 255, 0.12);
--md3-color-state-layer-dark-surface-tint-press: rgba(208, 188, 255, 0.12);
--md3-color-state-layer-dark-surface-tint-drag: rgba(208, 188, 255, 0.16);
--md3-color-state-layer-dark-on-error-container-hover: rgba(242, 184, 181, 0.08);
--md3-color-state-layer-dark-on-error-container-focus: rgba(242, 184, 181, 0.12);
--md3-color-state-layer-dark-on-error-container-press: rgba(242, 184, 181, 0.12);
--md3-color-state-layer-dark-on-error-container-drag: rgba(242, 184, 181, 0.16);
--md3-color-state-layer-dark-on-error-hover-hover: rgba(96, 20, 16, 0.08);
--md3-color-state-layer-dark-on-error-hover-focus: rgba(96, 20, 16, 0.12);
--md3-color-state-layer-dark-on-error-hover-press: rgba(96, 20, 16, 0.12);
--md3-color-state-layer-dark-on-error-hover-drag: rgba(96, 20, 16, 0.16);
--md3-color-state-layer-dark-error-container-hover: rgba(140, 29, 24, 0.08);
--md3-color-state-layer-dark-error-container-focus: rgba(140, 29, 24, 0.12);
--md3-color-state-layer-dark-error-container-press: rgba(140, 29, 24, 0.12);
--md3-color-state-layer-dark-error-container-drag: rgba(140, 29, 24, 0.16);
--md3-color-state-layer-dark-on-tertiary-container-hover: rgba(255, 216, 228, 0.08);
--md3-color-state-layer-dark-on-tertiary-container-focus: rgba(255, 216, 228, 0.12);
--md3-color-state-layer-dark-on-tertiary-container-press: rgba(255, 216, 228, 0.12);
--md3-color-state-layer-dark-on-tertiary-container-drag: rgba(255, 216, 228, 0.16);
--md3-color-state-layer-dark-on-tertiary-hover: rgba(73, 37, 50, 0.08);
--md3-color-state-layer-dark-on-tertiary-focus: rgba(73, 37, 50, 0.12);
--md3-color-state-layer-dark-on-tertiary-press: rgba(73, 37, 50, 0.12);
--md3-color-state-layer-dark-on-tertiary-drag: rgba(73, 37, 50, 0.16);
--md3-color-state-layer-dark-tertiary-container-hover: rgba(99, 59, 72, 0.08);
--md3-color-state-layer-dark-tertiary-container-focus: rgba(99, 59, 72, 0.12);
--md3-color-state-layer-dark-tertiary-container-press: rgba(99, 59, 72, 0.12);
--md3-color-state-layer-dark-tertiary-container-drag: rgba(99, 59, 72, 0.16);
--md3-color-state-layer-dark-tertiary-hover-hover: rgba(239, 184, 200, 0.08);
--md3-color-state-layer-dark-tertiary-hover-focus: rgba(239, 184, 200, 0.12);
--md3-color-state-layer-dark-tertiary-hover-press: rgba(239, 184, 200, 0.12);
--md3-color-state-layer-dark-tertiary-hover-drag: rgba(239, 184, 200, 0.16);
--md3-color-state-layer-dark-shadow-hover: rgba(0, 0, 0, 0.08);
--md3-color-state-layer-dark-shadow-focus: rgba(0, 0, 0, 0.08);
--md3-color-state-layer-dark-shadow-press: rgba(0, 0, 0, 0.08);
--md3-color-state-layer-dark-shadow-drag: rgba(0, 0, 0, 0.08);
--md3-color-state-layer-dark-error-hover: rgba(242, 184, 181, 0.08);
--md3-color-state-layer-dark-error-focus: rgba(242, 184, 181, 0.12);
--md3-color-state-layer-dark-error-press: rgba(242, 184, 181, 0.12);
--md3-color-state-layer-dark-error-drag: rgba(242, 184, 181, 0.16);
--md3-color-state-layer-dark-outline-hover: rgba(147, 143, 153, 0.08);
--md3-color-state-layer-dark-outline-focus: rgba(147, 143, 153, 0.12);
--md3-color-state-layer-dark-outline-press: rgba(147, 143, 153, 0.12);
--md3-color-state-layer-dark-outline-drag: rgba(147, 143, 153, 0.16);
--md3-color-state-layer-dark-on-background-hover: rgba(230, 225, 229, 0.08);
--md3-color-state-layer-dark-on-background-focus: rgba(230, 225, 229, 0.12);
--md3-color-state-layer-dark-on-background-press: rgba(230, 225, 229, 0.12);
--md3-color-state-layer-dark-on-background-drag: rgba(230, 225, 229, 0.16);
--md3-color-state-layer-dark-background-hover: rgba(28, 27, 31, 0.08);
--md3-color-state-layer-dark-background-focus: rgba(28, 27, 31, 0.12);
--md3-color-state-layer-dark-background-press: rgba(28, 27, 31, 0.12);
--md3-color-state-layer-dark-background-drag: rgba(28, 27, 31, 0.16);
--md3-color-state-layer-dark-inverse-on-surface-hover: rgba(49, 48, 51, 0.08);
--md3-color-state-layer-dark-inverse-on-surface-focus: rgba(49, 48, 51, 0.12);
--md3-color-state-layer-dark-inverse-on-surface-press: rgba(49, 48, 51, 0.12);
--md3-color-state-layer-dark-inverse-on-surface-drag: rgba(49, 48, 51, 0.16);
--md3-color-state-layer-dark-inverse-surface-hover: rgba(230, 225, 229, 0.08);
--md3-color-state-layer-dark-inverse-surface-focus: rgba(230, 225, 229, 0.12);
--md3-color-state-layer-dark-inverse-surface-press: rgba(230, 225, 229, 0.12);
--md3-color-state-layer-dark-inverse-surface-drag: rgba(230, 225, 229, 0.16);
--md3-color-state-layer-dark-on-surface-variant-hover: rgba(202, 196, 208, 0.08);
--md3-color-state-layer-dark-on-surface-variant-focus: rgba(202, 196, 208, 0.12);
--md3-color-state-layer-dark-on-surface-variant-press: rgba(202, 196, 208, 0.12);
--md3-color-state-layer-dark-on-surface-variant-drag: rgba(202, 196, 208, 0.16);
--md3-color-state-layer-dark-on-surface-hover: rgba(230, 225, 229, 0.08);
--md3-color-state-layer-dark-on-surface-focus: rgba(230, 225, 229, 0.12);
--md3-color-state-layer-dark-on-surface-press: rgba(230, 225, 229, 0.12);
--md3-color-state-layer-dark-on-surface-drag: rgba(230, 225, 229, 0.16);
--md3-color-state-layer-dark-surface-variant-hover: rgba(73, 69, 79, 0.08);
--md3-color-state-layer-dark-surface-variant-focus: rgba(73, 69, 79, 0.12);
--md3-color-state-layer-dark-surface-variant-press: rgba(73, 69, 79, 0.12);
--md3-color-state-layer-dark-surface-variant-drag: rgba(73, 69, 79, 0.16);
--md3-color-state-layer-dark-surface-hover: rgba(28, 27, 31, 0.08);
--md3-color-state-layer-dark-surface-focus: rgba(28, 27, 31, 0.12);
--md3-color-state-layer-dark-surface-press: rgba(28, 27, 31, 0.12);
--md3-color-state-layer-dark-surface-drag: rgba(28, 27, 31, 0.16);
--md3-color-state-layer-dark-on-secondary-container-hover: rgba(232, 222, 248, 0.08);
--md3-color-state-layer-dark-on-secondary-container-focus: rgba(232, 222, 248, 0.12);
--md3-color-state-layer-dark-on-secondary-container-press: rgba(232, 222, 248, 0.12);
--md3-color-state-layer-dark-on-secondary-container-drag: rgba(232, 222, 248, 0.16);
--md3-color-state-layer-dark-on-secondary-hover: rgba(51, 45, 65, 0.08);
--md3-color-state-layer-dark-on-secondary-focus: rgba(51, 45, 65, 0.12);
--md3-color-state-layer-dark-on-secondary-press: rgba(51, 45, 65, 0.12);
--md3-color-state-layer-dark-on-secondary-drag: rgba(51, 45, 65, 0.16);
--md3-color-state-layer-dark-secondary-container-hover: rgba(74, 68, 88, 0.08);
--md3-color-state-layer-dark-secondary-container-focus: rgba(74, 68, 88, 0.08);
--md3-color-state-layer-dark-secondary-container-press: rgba(74, 68, 88, 0.08);
--md3-color-state-layer-dark-secondary-container-drag: rgba(74, 68, 88, 0.08);
--md3-color-state-layer-dark-secondary-hover: rgba(204, 194, 220, 0.08);
--md3-color-state-layer-dark-secondary-focus: rgba(204, 194, 220, 0.12);
--md3-color-state-layer-dark-secondary-press: rgba(204, 194, 220, 0.12);
--md3-color-state-layer-dark-secondary-drag: rgba(204, 194, 220, 0.16);
--md3-color-state-layer-dark-inverse-primary-hover: rgba(103, 80, 164, 0.08);
--md3-color-state-layer-dark-inverse-primary-focus: rgba(103, 80, 164, 0.12);
--md3-color-state-layer-dark-inverse-primary-press: rgba(103, 80, 164, 0.12);
--md3-color-state-layer-dark-inverse-primary-drag: rgba(103, 80, 164, 0.16);
--md3-color-state-layer-dark-on-primary-container-hover: rgba(234, 221, 255, 0.08);
--md3-color-state-layer-dark-on-primary-container-focus: rgba(234, 221, 255, 0.12);
--md3-color-state-layer-dark-on-primary-container-press: rgba(234, 221, 255, 0.12);
--md3-color-state-layer-dark-on-primary-container-drag: rgba(234, 221, 255, 0.16);
--md3-color-state-layer-dark-on-primary-hover: rgba(56, 30, 114, 0.08);
--md3-color-state-layer-dark-on-primary-focus: rgba(56, 30, 114, 0.12);
--md3-color-state-layer-dark-on-primary-press: rgba(56, 30, 114, 0.12);
--md3-color-state-layer-dark-on-primary-drag: rgba(56, 30, 114, 0.16);
--md3-color-state-layer-dark-primary-container-hover: rgba(79, 55, 139, 0.08);
--md3-color-state-layer-dark-primary-container-focus: rgba(79, 55, 139, 0.12);
--md3-color-state-layer-dark-primary-container-press: rgba(79, 55, 139, 0.12);
--md3-color-state-layer-dark-primary-container-drag: rgba(79, 55, 139, 0.16);
--md3-color-state-layer-dark-primary-hover: rgba(208, 188, 255, 0.08);
--md3-color-state-layer-dark-primary-focus: rgba(208, 188, 255, 0.12);
--md3-color-state-layer-dark-primary-press: rgba(208, 188, 255, 0.12);
--md3-color-state-layer-dark-primary-drag: rgba(208, 188, 255, 0.16);
}