@carissa-io/theme-default 0.2.2 → 0.3.1
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.
- package/DESIGN.md +47 -1
- package/README.md +54 -0
- package/dist/index.css +248 -179
- package/package.json +1 -1
- package/scss/_modes.scss +90 -0
- package/scss/_tokens.scss +20 -0
- package/scss/index.scss +198 -196
package/dist/index.css
CHANGED
|
@@ -1,8 +1,77 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--c-background: #fff;
|
|
3
|
+
--c-text: #171717;
|
|
4
|
+
--c-muted: #737373;
|
|
5
|
+
--c-surface: #f5f5f5;
|
|
6
|
+
--c-surface-active: #e5e5e5;
|
|
7
|
+
--c-primary: #000;
|
|
8
|
+
--c-on-primary: #fff;
|
|
9
|
+
--c-primary-hover: #262626;
|
|
10
|
+
--c-primary-active: #404040;
|
|
11
|
+
--c-disabled-text: #a3a3a3;
|
|
12
|
+
--c-disabled-border: #d4d4d4;
|
|
13
|
+
--c-error: #dc3545;
|
|
14
|
+
--c-focus: #000;
|
|
15
|
+
color-scheme: light;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
:root[data-mode=light] {
|
|
19
|
+
--c-background: #fff;
|
|
20
|
+
--c-text: #171717;
|
|
21
|
+
--c-muted: #737373;
|
|
22
|
+
--c-surface: #f5f5f5;
|
|
23
|
+
--c-surface-active: #e5e5e5;
|
|
24
|
+
--c-primary: #000;
|
|
25
|
+
--c-on-primary: #fff;
|
|
26
|
+
--c-primary-hover: #262626;
|
|
27
|
+
--c-primary-active: #404040;
|
|
28
|
+
--c-disabled-text: #a3a3a3;
|
|
29
|
+
--c-disabled-border: #d4d4d4;
|
|
30
|
+
--c-error: #dc3545;
|
|
31
|
+
--c-focus: #000;
|
|
32
|
+
color-scheme: light;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
:root[data-mode=dark] {
|
|
36
|
+
--c-background: #0a0a0a;
|
|
37
|
+
--c-text: #f5f5f5;
|
|
38
|
+
--c-muted: #a3a3a3;
|
|
39
|
+
--c-surface: #171717;
|
|
40
|
+
--c-surface-active: #262626;
|
|
41
|
+
--c-primary: #fff;
|
|
42
|
+
--c-on-primary: #000;
|
|
43
|
+
--c-primary-hover: #e5e5e5;
|
|
44
|
+
--c-primary-active: #d4d4d4;
|
|
45
|
+
--c-disabled-text: #737373;
|
|
46
|
+
--c-disabled-border: #404040;
|
|
47
|
+
--c-error: #f87171;
|
|
48
|
+
--c-focus: #fff;
|
|
49
|
+
color-scheme: dark;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
@media (prefers-color-scheme: dark) {
|
|
53
|
+
:root[data-mode=auto] {
|
|
54
|
+
--c-background: #0a0a0a;
|
|
55
|
+
--c-text: #f5f5f5;
|
|
56
|
+
--c-muted: #a3a3a3;
|
|
57
|
+
--c-surface: #171717;
|
|
58
|
+
--c-surface-active: #262626;
|
|
59
|
+
--c-primary: #fff;
|
|
60
|
+
--c-on-primary: #000;
|
|
61
|
+
--c-primary-hover: #e5e5e5;
|
|
62
|
+
--c-primary-active: #d4d4d4;
|
|
63
|
+
--c-disabled-text: #737373;
|
|
64
|
+
--c-disabled-border: #404040;
|
|
65
|
+
--c-error: #f87171;
|
|
66
|
+
--c-focus: #fff;
|
|
67
|
+
color-scheme: dark;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
1
70
|
.c-input {
|
|
2
71
|
display: block;
|
|
3
72
|
font-family: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
|
|
4
73
|
font-size: 1rem;
|
|
5
|
-
color:
|
|
74
|
+
color: var(--c-text);
|
|
6
75
|
}
|
|
7
76
|
.c-input__box {
|
|
8
77
|
display: flex;
|
|
@@ -10,28 +79,28 @@
|
|
|
10
79
|
gap: 0.25rem;
|
|
11
80
|
min-height: 2.75rem;
|
|
12
81
|
padding: 0.375rem 0.75rem;
|
|
13
|
-
background:
|
|
14
|
-
border: 1px solid
|
|
82
|
+
background: var(--c-background);
|
|
83
|
+
border: 1px solid var(--c-muted);
|
|
15
84
|
border-radius: 0;
|
|
16
85
|
transition: border-color 0.2s ease;
|
|
17
86
|
}
|
|
18
87
|
.c-input__box:hover {
|
|
19
|
-
border-color:
|
|
88
|
+
border-color: var(--c-primary);
|
|
20
89
|
}
|
|
21
90
|
.c-input__box:focus-within {
|
|
22
|
-
border-color:
|
|
23
|
-
box-shadow: 0 0 0 1px
|
|
91
|
+
border-color: var(--c-focus);
|
|
92
|
+
box-shadow: 0 0 0 1px var(--c-focus);
|
|
24
93
|
}
|
|
25
94
|
.c-input__label {
|
|
26
95
|
font-size: 0.6875rem;
|
|
27
96
|
font-weight: 700;
|
|
28
97
|
text-transform: uppercase;
|
|
29
98
|
letter-spacing: 0.1em;
|
|
30
|
-
color:
|
|
99
|
+
color: var(--c-muted);
|
|
31
100
|
}
|
|
32
101
|
.c-input--required .c-input__label::after {
|
|
33
102
|
content: " *";
|
|
34
|
-
color:
|
|
103
|
+
color: var(--c-error);
|
|
35
104
|
}
|
|
36
105
|
.c-input__field {
|
|
37
106
|
display: flex;
|
|
@@ -49,7 +118,7 @@
|
|
|
49
118
|
outline: 0;
|
|
50
119
|
}
|
|
51
120
|
.c-input__control::placeholder {
|
|
52
|
-
color:
|
|
121
|
+
color: var(--c-muted);
|
|
53
122
|
}
|
|
54
123
|
.c-input--multiline .c-input__control {
|
|
55
124
|
display: block;
|
|
@@ -64,7 +133,7 @@
|
|
|
64
133
|
display: inline-flex;
|
|
65
134
|
flex: 0 0 auto;
|
|
66
135
|
align-items: center;
|
|
67
|
-
color:
|
|
136
|
+
color: var(--c-muted);
|
|
68
137
|
}
|
|
69
138
|
.c-input__start {
|
|
70
139
|
padding-inline-end: 0.25rem;
|
|
@@ -80,14 +149,14 @@
|
|
|
80
149
|
width: 2.25rem;
|
|
81
150
|
height: 2.25rem;
|
|
82
151
|
padding: 0;
|
|
83
|
-
color:
|
|
152
|
+
color: var(--c-muted);
|
|
84
153
|
background: transparent;
|
|
85
154
|
border: 0;
|
|
86
155
|
border-radius: 0;
|
|
87
156
|
cursor: pointer;
|
|
88
157
|
}
|
|
89
158
|
.c-input__button:hover:not(:disabled) {
|
|
90
|
-
color:
|
|
159
|
+
color: var(--c-primary);
|
|
91
160
|
background: transparent;
|
|
92
161
|
}
|
|
93
162
|
.c-input__button:disabled {
|
|
@@ -96,17 +165,17 @@
|
|
|
96
165
|
.c-input__error {
|
|
97
166
|
margin: 0.25rem 0 0;
|
|
98
167
|
font-size: 0.8125rem;
|
|
99
|
-
color:
|
|
168
|
+
color: var(--c-error);
|
|
100
169
|
}
|
|
101
170
|
.c-input--invalid .c-input__box {
|
|
102
|
-
border-color:
|
|
171
|
+
border-color: var(--c-error);
|
|
103
172
|
}
|
|
104
173
|
.c-input--invalid .c-input__box:focus-within {
|
|
105
|
-
box-shadow: 0 0 0 1px
|
|
174
|
+
box-shadow: 0 0 0 1px var(--c-error);
|
|
106
175
|
}
|
|
107
176
|
.c-input--disabled .c-input__box {
|
|
108
|
-
background:
|
|
109
|
-
color:
|
|
177
|
+
background: var(--c-surface);
|
|
178
|
+
color: var(--c-disabled-text);
|
|
110
179
|
}
|
|
111
180
|
.c-input {
|
|
112
181
|
padding-top: 0.34375rem;
|
|
@@ -121,11 +190,11 @@
|
|
|
121
190
|
left: 0.5rem;
|
|
122
191
|
padding: 0 0.25rem;
|
|
123
192
|
line-height: 1;
|
|
124
|
-
background:
|
|
193
|
+
background: var(--c-background);
|
|
125
194
|
transform: translateY(-50%);
|
|
126
195
|
}
|
|
127
196
|
.c-input--disabled .c-input__label {
|
|
128
|
-
background:
|
|
197
|
+
background: var(--c-surface);
|
|
129
198
|
}
|
|
130
199
|
|
|
131
200
|
.c-button {
|
|
@@ -149,13 +218,13 @@
|
|
|
149
218
|
transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
|
|
150
219
|
}
|
|
151
220
|
.c-button:focus-visible {
|
|
152
|
-
outline: 1px solid
|
|
221
|
+
outline: 1px solid var(--c-focus);
|
|
153
222
|
outline-offset: 2px;
|
|
154
223
|
}
|
|
155
224
|
.c-button--secondary:focus-visible, .c-button--ghost:focus-visible {
|
|
156
|
-
border-color:
|
|
225
|
+
border-color: var(--c-focus);
|
|
157
226
|
outline: 0;
|
|
158
|
-
box-shadow: inset 0 0 0 1px
|
|
227
|
+
box-shadow: inset 0 0 0 1px var(--c-focus);
|
|
159
228
|
}
|
|
160
229
|
.c-button:disabled {
|
|
161
230
|
cursor: not-allowed;
|
|
@@ -177,62 +246,62 @@
|
|
|
177
246
|
min-width: 0;
|
|
178
247
|
}
|
|
179
248
|
.c-button--primary {
|
|
180
|
-
color:
|
|
181
|
-
background:
|
|
182
|
-
border-color:
|
|
249
|
+
color: var(--c-on-primary);
|
|
250
|
+
background: var(--c-primary);
|
|
251
|
+
border-color: var(--c-primary);
|
|
183
252
|
}
|
|
184
253
|
.c-button--primary:hover:not(:disabled) {
|
|
185
|
-
color:
|
|
186
|
-
background:
|
|
187
|
-
border-color:
|
|
254
|
+
color: var(--c-on-primary);
|
|
255
|
+
background: var(--c-primary-hover);
|
|
256
|
+
border-color: var(--c-primary-hover);
|
|
188
257
|
}
|
|
189
258
|
.c-button--primary:active:not(:disabled) {
|
|
190
|
-
color:
|
|
191
|
-
background:
|
|
192
|
-
border-color:
|
|
259
|
+
color: var(--c-on-primary);
|
|
260
|
+
background: var(--c-primary-active);
|
|
261
|
+
border-color: var(--c-primary-active);
|
|
193
262
|
}
|
|
194
263
|
.c-button--primary:disabled {
|
|
195
|
-
color:
|
|
196
|
-
background:
|
|
197
|
-
border-color:
|
|
264
|
+
color: var(--c-disabled-text);
|
|
265
|
+
background: var(--c-surface);
|
|
266
|
+
border-color: var(--c-surface);
|
|
198
267
|
}
|
|
199
268
|
.c-button--secondary {
|
|
200
|
-
color:
|
|
201
|
-
background:
|
|
202
|
-
border-color:
|
|
269
|
+
color: var(--c-text);
|
|
270
|
+
background: var(--c-background);
|
|
271
|
+
border-color: var(--c-muted);
|
|
203
272
|
}
|
|
204
273
|
.c-button--secondary:hover:not(:disabled) {
|
|
205
|
-
color:
|
|
206
|
-
background:
|
|
207
|
-
border-color:
|
|
274
|
+
color: var(--c-primary);
|
|
275
|
+
background: var(--c-surface-active);
|
|
276
|
+
border-color: var(--c-primary);
|
|
208
277
|
}
|
|
209
278
|
.c-button--secondary:active:not(:disabled) {
|
|
210
|
-
color:
|
|
211
|
-
background:
|
|
212
|
-
border-color:
|
|
279
|
+
color: var(--c-primary);
|
|
280
|
+
background: var(--c-surface-active);
|
|
281
|
+
border-color: var(--c-primary);
|
|
213
282
|
}
|
|
214
283
|
.c-button--secondary:disabled {
|
|
215
|
-
color:
|
|
216
|
-
background:
|
|
217
|
-
border-color:
|
|
284
|
+
color: var(--c-disabled-text);
|
|
285
|
+
background: var(--c-background);
|
|
286
|
+
border-color: var(--c-disabled-border);
|
|
218
287
|
}
|
|
219
288
|
.c-button--ghost {
|
|
220
|
-
color:
|
|
289
|
+
color: var(--c-text);
|
|
221
290
|
background: transparent;
|
|
222
291
|
border-color: transparent;
|
|
223
292
|
}
|
|
224
293
|
.c-button--ghost:hover:not(:disabled) {
|
|
225
|
-
color:
|
|
226
|
-
background:
|
|
294
|
+
color: var(--c-primary);
|
|
295
|
+
background: var(--c-surface);
|
|
227
296
|
border-color: transparent;
|
|
228
297
|
}
|
|
229
298
|
.c-button--ghost:active:not(:disabled) {
|
|
230
|
-
color:
|
|
231
|
-
background:
|
|
299
|
+
color: var(--c-primary);
|
|
300
|
+
background: var(--c-surface-active);
|
|
232
301
|
border-color: transparent;
|
|
233
302
|
}
|
|
234
303
|
.c-button--ghost:disabled {
|
|
235
|
-
color:
|
|
304
|
+
color: var(--c-disabled-text);
|
|
236
305
|
background: transparent;
|
|
237
306
|
border-color: transparent;
|
|
238
307
|
}
|
|
@@ -243,7 +312,7 @@
|
|
|
243
312
|
font-size: 1rem;
|
|
244
313
|
font-weight: 400;
|
|
245
314
|
line-height: 1.5;
|
|
246
|
-
color:
|
|
315
|
+
color: var(--c-text);
|
|
247
316
|
}
|
|
248
317
|
.c-checkbox__row {
|
|
249
318
|
position: relative;
|
|
@@ -274,9 +343,9 @@
|
|
|
274
343
|
box-sizing: border-box;
|
|
275
344
|
width: 1.25rem;
|
|
276
345
|
height: 1.25rem;
|
|
277
|
-
color:
|
|
278
|
-
background:
|
|
279
|
-
border: 1px solid
|
|
346
|
+
color: var(--c-on-primary);
|
|
347
|
+
background: var(--c-background);
|
|
348
|
+
border: 1px solid var(--c-muted);
|
|
280
349
|
border-radius: 0;
|
|
281
350
|
transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
|
|
282
351
|
}
|
|
@@ -297,38 +366,38 @@
|
|
|
297
366
|
.c-checkbox__error {
|
|
298
367
|
margin: 0.25rem 0 0;
|
|
299
368
|
font-size: 0.8125rem;
|
|
300
|
-
color:
|
|
369
|
+
color: var(--c-error);
|
|
301
370
|
}
|
|
302
371
|
:where(.c-checkbox__row:hover) .c-checkbox__control:where(:not(:disabled)) + .c-checkbox__box {
|
|
303
|
-
border-color:
|
|
372
|
+
border-color: var(--c-primary);
|
|
304
373
|
}
|
|
305
374
|
.c-checkbox__control:checked + .c-checkbox__box {
|
|
306
|
-
background:
|
|
307
|
-
border-color:
|
|
375
|
+
background: var(--c-primary);
|
|
376
|
+
border-color: var(--c-primary);
|
|
308
377
|
}
|
|
309
378
|
.c-checkbox__control:checked + .c-checkbox__box .c-checkbox__mark {
|
|
310
379
|
opacity: 1;
|
|
311
380
|
}
|
|
312
381
|
.c-checkbox--invalid .c-checkbox__control + .c-checkbox__box {
|
|
313
|
-
border-color:
|
|
382
|
+
border-color: var(--c-error);
|
|
314
383
|
}
|
|
315
384
|
.c-checkbox__control:disabled + .c-checkbox__box {
|
|
316
|
-
color:
|
|
317
|
-
background:
|
|
318
|
-
border-color:
|
|
385
|
+
color: var(--c-disabled-text);
|
|
386
|
+
background: var(--c-surface);
|
|
387
|
+
border-color: var(--c-disabled-border);
|
|
319
388
|
}
|
|
320
389
|
.c-checkbox--disabled {
|
|
321
|
-
color:
|
|
390
|
+
color: var(--c-disabled-text);
|
|
322
391
|
}
|
|
323
392
|
.c-checkbox--disabled .c-checkbox__row {
|
|
324
393
|
cursor: not-allowed;
|
|
325
394
|
}
|
|
326
395
|
.c-checkbox__control:focus-visible + .c-checkbox__box {
|
|
327
|
-
border-color:
|
|
328
|
-
box-shadow: inset 0 0 0 1px
|
|
396
|
+
border-color: var(--c-focus);
|
|
397
|
+
box-shadow: inset 0 0 0 1px var(--c-focus);
|
|
329
398
|
}
|
|
330
399
|
.c-checkbox__control:checked:focus-visible + .c-checkbox__box {
|
|
331
|
-
outline: 1px solid
|
|
400
|
+
outline: 1px solid var(--c-focus);
|
|
332
401
|
outline-offset: 2px;
|
|
333
402
|
box-shadow: none;
|
|
334
403
|
}
|
|
@@ -336,9 +405,9 @@
|
|
|
336
405
|
.c-switch .c-checkbox__box {
|
|
337
406
|
width: 2.5rem;
|
|
338
407
|
height: 1.25rem;
|
|
339
|
-
background:
|
|
408
|
+
background: var(--c-background);
|
|
340
409
|
border-width: 1px;
|
|
341
|
-
border-color:
|
|
410
|
+
border-color: var(--c-muted);
|
|
342
411
|
border-radius: 0;
|
|
343
412
|
transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
|
|
344
413
|
}
|
|
@@ -349,38 +418,38 @@
|
|
|
349
418
|
left: 0.125rem;
|
|
350
419
|
width: 0.875rem;
|
|
351
420
|
height: 0.875rem;
|
|
352
|
-
background:
|
|
421
|
+
background: var(--c-muted);
|
|
353
422
|
border-radius: 0;
|
|
354
423
|
transform: translateY(-50%);
|
|
355
424
|
transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
|
|
356
425
|
}
|
|
357
426
|
.c-switch :where(.c-checkbox__row:hover) .c-checkbox__control:where(:not(:disabled)) + .c-checkbox__box {
|
|
358
|
-
border-color:
|
|
427
|
+
border-color: var(--c-primary);
|
|
359
428
|
}
|
|
360
429
|
.c-switch .c-checkbox__control:checked + .c-checkbox__box {
|
|
361
|
-
background:
|
|
362
|
-
border-color:
|
|
430
|
+
background: var(--c-primary);
|
|
431
|
+
border-color: var(--c-primary);
|
|
363
432
|
}
|
|
364
433
|
.c-switch .c-checkbox__control:checked + .c-checkbox__box::after {
|
|
365
|
-
background:
|
|
434
|
+
background: var(--c-on-primary);
|
|
366
435
|
transform: translate(calc(2.5rem - 2 * 1px - 0.875rem - 2 * 0.125rem), -50%);
|
|
367
436
|
}
|
|
368
437
|
.c-switch.c-checkbox--invalid .c-checkbox__control + .c-checkbox__box {
|
|
369
|
-
border-color:
|
|
438
|
+
border-color: var(--c-error);
|
|
370
439
|
}
|
|
371
440
|
.c-switch .c-checkbox__control:disabled + .c-checkbox__box {
|
|
372
|
-
background:
|
|
373
|
-
border-color:
|
|
441
|
+
background: var(--c-surface);
|
|
442
|
+
border-color: var(--c-disabled-border);
|
|
374
443
|
}
|
|
375
444
|
.c-switch .c-checkbox__control:disabled + .c-checkbox__box::after {
|
|
376
|
-
background:
|
|
445
|
+
background: var(--c-disabled-text);
|
|
377
446
|
}
|
|
378
447
|
.c-switch .c-checkbox__control:focus-visible + .c-checkbox__box {
|
|
379
|
-
border-color:
|
|
380
|
-
box-shadow: inset 0 0 0 1px
|
|
448
|
+
border-color: var(--c-focus);
|
|
449
|
+
box-shadow: inset 0 0 0 1px var(--c-focus);
|
|
381
450
|
}
|
|
382
451
|
.c-switch .c-checkbox__control:checked:focus-visible + .c-checkbox__box {
|
|
383
|
-
outline: 1px solid
|
|
452
|
+
outline: 1px solid var(--c-focus);
|
|
384
453
|
outline-offset: 2px;
|
|
385
454
|
box-shadow: none;
|
|
386
455
|
}
|
|
@@ -399,7 +468,7 @@
|
|
|
399
468
|
font-size: 0.6875rem;
|
|
400
469
|
line-height: 1rem;
|
|
401
470
|
font-weight: 700;
|
|
402
|
-
color:
|
|
471
|
+
color: var(--c-muted);
|
|
403
472
|
text-transform: uppercase;
|
|
404
473
|
letter-spacing: 0.1em;
|
|
405
474
|
}
|
|
@@ -423,7 +492,7 @@
|
|
|
423
492
|
min-height: 2.75rem;
|
|
424
493
|
font-size: 1rem;
|
|
425
494
|
font-weight: 400;
|
|
426
|
-
color:
|
|
495
|
+
color: var(--c-text);
|
|
427
496
|
cursor: pointer;
|
|
428
497
|
}
|
|
429
498
|
.c-radio-group__control {
|
|
@@ -447,12 +516,12 @@
|
|
|
447
516
|
box-sizing: border-box;
|
|
448
517
|
width: 1.25rem;
|
|
449
518
|
height: 1.25rem;
|
|
450
|
-
background-color:
|
|
451
|
-
background-image: radial-gradient(circle closest-side,
|
|
519
|
+
background-color: var(--c-background);
|
|
520
|
+
background-image: radial-gradient(circle closest-side, var(--c-primary) calc(100% - 0.5px), transparent 100%);
|
|
452
521
|
background-repeat: no-repeat;
|
|
453
522
|
background-position: center;
|
|
454
523
|
background-size: 0 0;
|
|
455
|
-
border: 1px solid
|
|
524
|
+
border: 1px solid var(--c-muted);
|
|
456
525
|
border-radius: 50%;
|
|
457
526
|
transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, background-size 0.2s ease;
|
|
458
527
|
}
|
|
@@ -462,37 +531,37 @@
|
|
|
462
531
|
.c-radio-group__error {
|
|
463
532
|
margin: 0.25rem 0 0;
|
|
464
533
|
font-size: 0.8125rem;
|
|
465
|
-
color:
|
|
534
|
+
color: var(--c-error);
|
|
466
535
|
}
|
|
467
536
|
:where(.c-radio-group__option:hover) .c-radio-group__control:where(:not(:disabled)) + .c-radio-group__dot {
|
|
468
|
-
border-color:
|
|
537
|
+
border-color: var(--c-primary);
|
|
469
538
|
}
|
|
470
539
|
.c-radio-group__control:checked + .c-radio-group__dot {
|
|
471
540
|
background-size: 0.625rem 0.625rem;
|
|
472
|
-
border-color:
|
|
541
|
+
border-color: var(--c-primary);
|
|
473
542
|
}
|
|
474
543
|
.c-radio-group--invalid .c-radio-group__control + .c-radio-group__dot {
|
|
475
|
-
border-color:
|
|
544
|
+
border-color: var(--c-error);
|
|
476
545
|
}
|
|
477
546
|
.c-radio-group__control:disabled + .c-radio-group__dot {
|
|
478
|
-
background-color:
|
|
479
|
-
background-image: radial-gradient(circle closest-side,
|
|
480
|
-
border-color:
|
|
547
|
+
background-color: var(--c-surface);
|
|
548
|
+
background-image: radial-gradient(circle closest-side, var(--c-disabled-text) calc(100% - 0.5px), transparent 100%);
|
|
549
|
+
border-color: var(--c-disabled-border);
|
|
481
550
|
}
|
|
482
551
|
.c-radio-group__option--disabled {
|
|
483
|
-
color:
|
|
552
|
+
color: var(--c-disabled-text);
|
|
484
553
|
cursor: not-allowed;
|
|
485
554
|
}
|
|
486
555
|
.c-radio-group__control:focus-visible + .c-radio-group__dot {
|
|
487
|
-
border-color:
|
|
488
|
-
box-shadow: inset 0 0 0 1px
|
|
556
|
+
border-color: var(--c-focus);
|
|
557
|
+
box-shadow: inset 0 0 0 1px var(--c-focus);
|
|
489
558
|
}
|
|
490
559
|
|
|
491
560
|
.c-slider {
|
|
492
561
|
display: block;
|
|
493
562
|
font-family: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
|
|
494
563
|
font-size: 1rem;
|
|
495
|
-
color:
|
|
564
|
+
color: var(--c-text);
|
|
496
565
|
}
|
|
497
566
|
.c-slider__header {
|
|
498
567
|
display: flex;
|
|
@@ -506,14 +575,14 @@
|
|
|
506
575
|
font-weight: 700;
|
|
507
576
|
text-transform: uppercase;
|
|
508
577
|
letter-spacing: 0.1em;
|
|
509
|
-
color:
|
|
578
|
+
color: var(--c-muted);
|
|
510
579
|
}
|
|
511
580
|
.c-slider__value {
|
|
512
581
|
margin-left: auto;
|
|
513
582
|
font-size: 1rem;
|
|
514
583
|
font-weight: 400;
|
|
515
584
|
font-variant-numeric: tabular-nums;
|
|
516
|
-
color:
|
|
585
|
+
color: var(--c-text);
|
|
517
586
|
}
|
|
518
587
|
.c-slider__control {
|
|
519
588
|
display: block;
|
|
@@ -528,24 +597,24 @@
|
|
|
528
597
|
appearance: none;
|
|
529
598
|
}
|
|
530
599
|
.c-slider__control::-webkit-slider-runnable-track {
|
|
531
|
-
background: linear-gradient(to right,
|
|
600
|
+
background: linear-gradient(to right, var(--c-primary) var(--c-slider-fill, 0%), var(--c-muted) var(--c-slider-fill, 0%));
|
|
532
601
|
}
|
|
533
602
|
.c-slider__control::-moz-range-progress {
|
|
534
603
|
height: 2px;
|
|
535
|
-
background:
|
|
604
|
+
background: var(--c-primary);
|
|
536
605
|
border-radius: 0;
|
|
537
606
|
}
|
|
538
607
|
.c-slider__control::-webkit-slider-runnable-track {
|
|
539
608
|
box-sizing: border-box;
|
|
540
609
|
height: 2px;
|
|
541
|
-
background-color:
|
|
610
|
+
background-color: var(--c-muted);
|
|
542
611
|
border: 0;
|
|
543
612
|
border-radius: 0;
|
|
544
613
|
}
|
|
545
614
|
.c-slider__control::-moz-range-track {
|
|
546
615
|
box-sizing: border-box;
|
|
547
616
|
height: 2px;
|
|
548
|
-
background-color:
|
|
617
|
+
background-color: var(--c-muted);
|
|
549
618
|
border: 0;
|
|
550
619
|
border-radius: 0;
|
|
551
620
|
}
|
|
@@ -553,8 +622,8 @@
|
|
|
553
622
|
box-sizing: border-box;
|
|
554
623
|
width: 1.25rem;
|
|
555
624
|
height: 1.25rem;
|
|
556
|
-
background:
|
|
557
|
-
border: 1px solid
|
|
625
|
+
background: var(--c-primary);
|
|
626
|
+
border: 1px solid var(--c-background);
|
|
558
627
|
border-radius: 0;
|
|
559
628
|
transition: background-color 0.2s ease, border-color 0.2s ease;
|
|
560
629
|
}
|
|
@@ -562,8 +631,8 @@
|
|
|
562
631
|
box-sizing: border-box;
|
|
563
632
|
width: 1.25rem;
|
|
564
633
|
height: 1.25rem;
|
|
565
|
-
background:
|
|
566
|
-
border: 1px solid
|
|
634
|
+
background: var(--c-primary);
|
|
635
|
+
border: 1px solid var(--c-background);
|
|
567
636
|
border-radius: 0;
|
|
568
637
|
transition: background-color 0.2s ease, border-color 0.2s ease;
|
|
569
638
|
}
|
|
@@ -575,45 +644,45 @@
|
|
|
575
644
|
appearance: none;
|
|
576
645
|
}
|
|
577
646
|
.c-slider__control:hover:not(:disabled)::-webkit-slider-thumb {
|
|
578
|
-
background:
|
|
647
|
+
background: var(--c-primary-hover);
|
|
579
648
|
}
|
|
580
649
|
.c-slider__control:hover:not(:disabled)::-moz-range-thumb {
|
|
581
|
-
background:
|
|
650
|
+
background: var(--c-primary-hover);
|
|
582
651
|
}
|
|
583
652
|
.c-slider__control:active:not(:disabled)::-webkit-slider-thumb {
|
|
584
|
-
background:
|
|
653
|
+
background: var(--c-primary-active);
|
|
585
654
|
}
|
|
586
655
|
.c-slider__control:active:not(:disabled)::-moz-range-thumb {
|
|
587
|
-
background:
|
|
656
|
+
background: var(--c-primary-active);
|
|
588
657
|
}
|
|
589
658
|
.c-slider__control:disabled {
|
|
590
659
|
cursor: not-allowed;
|
|
591
660
|
}
|
|
592
661
|
.c-slider__control:disabled::-webkit-slider-runnable-track {
|
|
593
|
-
background: linear-gradient(to right,
|
|
662
|
+
background: linear-gradient(to right, var(--c-disabled-text) var(--c-slider-fill, 0%), var(--c-disabled-border) var(--c-slider-fill, 0%));
|
|
594
663
|
}
|
|
595
664
|
.c-slider__control:disabled::-moz-range-track {
|
|
596
|
-
background:
|
|
665
|
+
background: var(--c-disabled-border);
|
|
597
666
|
}
|
|
598
667
|
.c-slider__control:disabled::-moz-range-progress {
|
|
599
|
-
background:
|
|
668
|
+
background: var(--c-disabled-text);
|
|
600
669
|
}
|
|
601
670
|
.c-slider__control:disabled::-webkit-slider-thumb {
|
|
602
|
-
background:
|
|
671
|
+
background: var(--c-disabled-text);
|
|
603
672
|
}
|
|
604
673
|
.c-slider__control:disabled::-moz-range-thumb {
|
|
605
|
-
background:
|
|
674
|
+
background: var(--c-disabled-text);
|
|
606
675
|
}
|
|
607
676
|
.c-slider__control:focus-visible::-webkit-slider-thumb {
|
|
608
|
-
outline: 1px solid
|
|
677
|
+
outline: 1px solid var(--c-focus);
|
|
609
678
|
outline-offset: 2px;
|
|
610
679
|
}
|
|
611
680
|
.c-slider__control:focus-visible::-moz-range-thumb {
|
|
612
|
-
outline: 1px solid
|
|
681
|
+
outline: 1px solid var(--c-focus);
|
|
613
682
|
outline-offset: 2px;
|
|
614
683
|
}
|
|
615
684
|
.c-slider--disabled .c-slider__label, .c-slider--disabled .c-slider__value {
|
|
616
|
-
color:
|
|
685
|
+
color: var(--c-disabled-text);
|
|
617
686
|
}
|
|
618
687
|
|
|
619
688
|
@keyframes c-popover-in {
|
|
@@ -636,9 +705,9 @@
|
|
|
636
705
|
max-height: none;
|
|
637
706
|
padding: 0;
|
|
638
707
|
overflow-y: auto;
|
|
639
|
-
color:
|
|
640
|
-
background:
|
|
641
|
-
border: 1px solid
|
|
708
|
+
color: var(--c-text);
|
|
709
|
+
background: var(--c-background);
|
|
710
|
+
border: 1px solid var(--c-muted);
|
|
642
711
|
border-radius: 0;
|
|
643
712
|
box-shadow: none;
|
|
644
713
|
animation: c-popover-in 0.2s ease-in-out;
|
|
@@ -674,7 +743,7 @@
|
|
|
674
743
|
align-items: center;
|
|
675
744
|
min-height: 2.75rem;
|
|
676
745
|
padding: 0 0.75rem;
|
|
677
|
-
color:
|
|
746
|
+
color: var(--c-text);
|
|
678
747
|
cursor: pointer;
|
|
679
748
|
user-select: none;
|
|
680
749
|
background: transparent;
|
|
@@ -686,21 +755,21 @@
|
|
|
686
755
|
}
|
|
687
756
|
.c-listbox__option--selected {
|
|
688
757
|
font-weight: 700;
|
|
689
|
-
color:
|
|
690
|
-
border-inline-start-color:
|
|
758
|
+
color: var(--c-text);
|
|
759
|
+
border-inline-start-color: var(--c-primary);
|
|
691
760
|
}
|
|
692
761
|
.c-listbox__option--active {
|
|
693
|
-
color:
|
|
694
|
-
background:
|
|
762
|
+
color: var(--c-text);
|
|
763
|
+
background: var(--c-surface);
|
|
695
764
|
}
|
|
696
765
|
.c-listbox__option--disabled {
|
|
697
|
-
color:
|
|
766
|
+
color: var(--c-disabled-text);
|
|
698
767
|
cursor: not-allowed;
|
|
699
768
|
background: transparent;
|
|
700
769
|
}
|
|
701
770
|
.c-listbox__empty {
|
|
702
771
|
padding: 0.75rem;
|
|
703
|
-
color:
|
|
772
|
+
color: var(--c-muted);
|
|
704
773
|
list-style: none;
|
|
705
774
|
}
|
|
706
775
|
|
|
@@ -724,7 +793,7 @@
|
|
|
724
793
|
padding: 0 calc(1rem + 0.5rem) 0 0;
|
|
725
794
|
overflow: hidden;
|
|
726
795
|
font: inherit;
|
|
727
|
-
color:
|
|
796
|
+
color: var(--c-text);
|
|
728
797
|
text-align: left;
|
|
729
798
|
text-overflow: ellipsis;
|
|
730
799
|
white-space: nowrap;
|
|
@@ -745,7 +814,7 @@
|
|
|
745
814
|
cursor: not-allowed;
|
|
746
815
|
}
|
|
747
816
|
.c-select__placeholder {
|
|
748
|
-
color:
|
|
817
|
+
color: var(--c-muted);
|
|
749
818
|
}
|
|
750
819
|
.c-select__arrow {
|
|
751
820
|
position: absolute;
|
|
@@ -754,7 +823,7 @@
|
|
|
754
823
|
display: inline-flex;
|
|
755
824
|
width: 1rem;
|
|
756
825
|
height: 1rem;
|
|
757
|
-
color:
|
|
826
|
+
color: var(--c-muted);
|
|
758
827
|
pointer-events: none;
|
|
759
828
|
translate: 0 -50%;
|
|
760
829
|
transition: rotate 0.2s ease, color 0.2s ease;
|
|
@@ -764,17 +833,17 @@
|
|
|
764
833
|
height: 100%;
|
|
765
834
|
}
|
|
766
835
|
.c-input__box:hover .c-select__arrow {
|
|
767
|
-
color:
|
|
836
|
+
color: var(--c-primary);
|
|
768
837
|
}
|
|
769
838
|
.c-select--open .c-select__arrow {
|
|
770
|
-
color:
|
|
839
|
+
color: var(--c-primary);
|
|
771
840
|
rotate: 180deg;
|
|
772
841
|
}
|
|
773
842
|
.c-select--open:not(.c-input--invalid) .c-input__box {
|
|
774
|
-
border-color:
|
|
843
|
+
border-color: var(--c-focus);
|
|
775
844
|
}
|
|
776
845
|
.c-select.c-input--disabled .c-select__arrow {
|
|
777
|
-
color:
|
|
846
|
+
color: var(--c-disabled-text);
|
|
778
847
|
}
|
|
779
848
|
|
|
780
849
|
.c-combobox .c-input__box {
|
|
@@ -793,7 +862,7 @@
|
|
|
793
862
|
width: 100%;
|
|
794
863
|
min-height: 1.5em;
|
|
795
864
|
padding: 0 calc(1rem + 0.5rem) 0 0;
|
|
796
|
-
color:
|
|
865
|
+
color: var(--c-text);
|
|
797
866
|
text-overflow: ellipsis;
|
|
798
867
|
}
|
|
799
868
|
.c-combobox__input:disabled {
|
|
@@ -807,7 +876,7 @@
|
|
|
807
876
|
display: inline-flex;
|
|
808
877
|
width: 1rem;
|
|
809
878
|
height: 1rem;
|
|
810
|
-
color:
|
|
879
|
+
color: var(--c-muted);
|
|
811
880
|
pointer-events: none;
|
|
812
881
|
translate: 0 -50%;
|
|
813
882
|
transition: rotate 0.2s ease, color 0.2s ease;
|
|
@@ -817,17 +886,17 @@
|
|
|
817
886
|
height: 100%;
|
|
818
887
|
}
|
|
819
888
|
.c-input__box:hover .c-combobox__arrow {
|
|
820
|
-
color:
|
|
889
|
+
color: var(--c-primary);
|
|
821
890
|
}
|
|
822
891
|
.c-combobox--open .c-combobox__arrow {
|
|
823
|
-
color:
|
|
892
|
+
color: var(--c-primary);
|
|
824
893
|
rotate: 180deg;
|
|
825
894
|
}
|
|
826
895
|
.c-combobox.c-input--disabled .c-input__box {
|
|
827
896
|
cursor: not-allowed;
|
|
828
897
|
}
|
|
829
898
|
.c-combobox.c-input--disabled .c-combobox__arrow {
|
|
830
|
-
color:
|
|
899
|
+
color: var(--c-disabled-text);
|
|
831
900
|
}
|
|
832
901
|
|
|
833
902
|
.c-upload .c-input__box {
|
|
@@ -847,7 +916,7 @@
|
|
|
847
916
|
box-sizing: border-box;
|
|
848
917
|
min-height: 5.5rem;
|
|
849
918
|
padding: 0.75rem 0;
|
|
850
|
-
color:
|
|
919
|
+
color: var(--c-muted);
|
|
851
920
|
text-align: center;
|
|
852
921
|
cursor: pointer;
|
|
853
922
|
transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
|
|
@@ -866,8 +935,8 @@
|
|
|
866
935
|
pointer-events: none;
|
|
867
936
|
}
|
|
868
937
|
.c-upload--dragging .c-input__box {
|
|
869
|
-
background:
|
|
870
|
-
border-color:
|
|
938
|
+
background: var(--c-surface);
|
|
939
|
+
border-color: var(--c-primary);
|
|
871
940
|
}
|
|
872
941
|
.c-upload.c-input--disabled .c-upload__zone {
|
|
873
942
|
color: inherit;
|
|
@@ -889,14 +958,14 @@
|
|
|
889
958
|
box-sizing: border-box;
|
|
890
959
|
min-height: 2.75rem;
|
|
891
960
|
padding: 0;
|
|
892
|
-
border-top: 1px solid
|
|
961
|
+
border-top: 1px solid var(--c-surface-active);
|
|
893
962
|
}
|
|
894
963
|
.c-upload__file-name {
|
|
895
964
|
flex: 1 1 auto;
|
|
896
965
|
min-width: 0;
|
|
897
966
|
overflow: hidden;
|
|
898
967
|
font-size: 1rem;
|
|
899
|
-
color:
|
|
968
|
+
color: var(--c-text);
|
|
900
969
|
text-overflow: ellipsis;
|
|
901
970
|
white-space: nowrap;
|
|
902
971
|
}
|
|
@@ -912,7 +981,7 @@
|
|
|
912
981
|
font: inherit;
|
|
913
982
|
font-size: 1.25rem;
|
|
914
983
|
line-height: 1;
|
|
915
|
-
color:
|
|
984
|
+
color: var(--c-muted);
|
|
916
985
|
cursor: pointer;
|
|
917
986
|
background: transparent;
|
|
918
987
|
border: 0;
|
|
@@ -920,11 +989,11 @@
|
|
|
920
989
|
transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
|
|
921
990
|
}
|
|
922
991
|
.c-upload__remove:hover:not(:disabled) {
|
|
923
|
-
color:
|
|
992
|
+
color: var(--c-primary);
|
|
924
993
|
background: transparent;
|
|
925
994
|
}
|
|
926
995
|
.c-upload__remove:focus-visible {
|
|
927
|
-
outline: 1px solid
|
|
996
|
+
outline: 1px solid var(--c-focus);
|
|
928
997
|
outline-offset: -1px;
|
|
929
998
|
}
|
|
930
999
|
.c-upload__remove:disabled {
|
|
@@ -951,7 +1020,7 @@
|
|
|
951
1020
|
font-weight: 700;
|
|
952
1021
|
text-transform: uppercase;
|
|
953
1022
|
letter-spacing: 0.1em;
|
|
954
|
-
color:
|
|
1023
|
+
color: var(--c-muted);
|
|
955
1024
|
text-align: center;
|
|
956
1025
|
}
|
|
957
1026
|
.c-calendar__nav {
|
|
@@ -966,7 +1035,7 @@
|
|
|
966
1035
|
border: 0;
|
|
967
1036
|
border-radius: 0;
|
|
968
1037
|
background: transparent;
|
|
969
|
-
color:
|
|
1038
|
+
color: var(--c-muted);
|
|
970
1039
|
font: inherit;
|
|
971
1040
|
cursor: pointer;
|
|
972
1041
|
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
|
|
@@ -977,14 +1046,14 @@
|
|
|
977
1046
|
}
|
|
978
1047
|
.c-calendar__nav:hover:not(:disabled) {
|
|
979
1048
|
background: transparent;
|
|
980
|
-
color:
|
|
1049
|
+
color: var(--c-primary);
|
|
981
1050
|
}
|
|
982
1051
|
.c-calendar__nav:disabled {
|
|
983
|
-
color:
|
|
1052
|
+
color: var(--c-disabled-text);
|
|
984
1053
|
cursor: default;
|
|
985
1054
|
}
|
|
986
1055
|
.c-calendar__nav:focus-visible {
|
|
987
|
-
outline: 1px solid
|
|
1056
|
+
outline: 1px solid var(--c-focus);
|
|
988
1057
|
outline-offset: -1px;
|
|
989
1058
|
}
|
|
990
1059
|
.c-calendar__grid {
|
|
@@ -998,7 +1067,7 @@
|
|
|
998
1067
|
font-weight: 700;
|
|
999
1068
|
text-transform: uppercase;
|
|
1000
1069
|
letter-spacing: 0.1em;
|
|
1001
|
-
color:
|
|
1070
|
+
color: var(--c-muted);
|
|
1002
1071
|
text-align: center;
|
|
1003
1072
|
}
|
|
1004
1073
|
.c-calendar__cell {
|
|
@@ -1017,30 +1086,30 @@
|
|
|
1017
1086
|
border: 1px solid transparent;
|
|
1018
1087
|
border-radius: 0;
|
|
1019
1088
|
background: transparent;
|
|
1020
|
-
color:
|
|
1089
|
+
color: var(--c-text);
|
|
1021
1090
|
font: inherit;
|
|
1022
1091
|
font-size: 1rem;
|
|
1023
1092
|
cursor: pointer;
|
|
1024
1093
|
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
|
|
1025
1094
|
}
|
|
1026
1095
|
.c-calendar__day:hover:not(:disabled):not(.c-calendar__day--selected) {
|
|
1027
|
-
background:
|
|
1028
|
-
color:
|
|
1096
|
+
background: var(--c-surface);
|
|
1097
|
+
color: var(--c-text);
|
|
1029
1098
|
}
|
|
1030
1099
|
.c-calendar__day--today {
|
|
1031
|
-
border-color:
|
|
1100
|
+
border-color: var(--c-primary);
|
|
1032
1101
|
}
|
|
1033
1102
|
.c-calendar__day--selected {
|
|
1034
|
-
background:
|
|
1035
|
-
border-color:
|
|
1036
|
-
color:
|
|
1103
|
+
background: var(--c-primary);
|
|
1104
|
+
border-color: var(--c-primary);
|
|
1105
|
+
color: var(--c-on-primary);
|
|
1037
1106
|
}
|
|
1038
1107
|
.c-calendar__day--disabled, .c-calendar__day:disabled {
|
|
1039
|
-
color:
|
|
1108
|
+
color: var(--c-disabled-text);
|
|
1040
1109
|
cursor: not-allowed;
|
|
1041
1110
|
}
|
|
1042
1111
|
.c-calendar__day:focus-visible {
|
|
1043
|
-
outline: 1px solid
|
|
1112
|
+
outline: 1px solid var(--c-focus);
|
|
1044
1113
|
outline-offset: -1px;
|
|
1045
1114
|
}
|
|
1046
1115
|
.c-calendar__day--outside {
|
|
@@ -1067,7 +1136,7 @@
|
|
|
1067
1136
|
padding: 0 calc(1rem + 0.5rem) 0 0;
|
|
1068
1137
|
overflow: hidden;
|
|
1069
1138
|
font: inherit;
|
|
1070
|
-
color:
|
|
1139
|
+
color: var(--c-text);
|
|
1071
1140
|
text-align: left;
|
|
1072
1141
|
text-overflow: ellipsis;
|
|
1073
1142
|
white-space: nowrap;
|
|
@@ -1088,7 +1157,7 @@
|
|
|
1088
1157
|
cursor: not-allowed;
|
|
1089
1158
|
}
|
|
1090
1159
|
.c-date-picker__placeholder {
|
|
1091
|
-
color:
|
|
1160
|
+
color: var(--c-muted);
|
|
1092
1161
|
}
|
|
1093
1162
|
.c-date-picker__panel {
|
|
1094
1163
|
padding: 0.5rem;
|
|
@@ -1100,7 +1169,7 @@
|
|
|
1100
1169
|
display: inline-flex;
|
|
1101
1170
|
width: 1rem;
|
|
1102
1171
|
height: 1rem;
|
|
1103
|
-
color:
|
|
1172
|
+
color: var(--c-muted);
|
|
1104
1173
|
pointer-events: none;
|
|
1105
1174
|
translate: 0 -50%;
|
|
1106
1175
|
transition: color 0.2s ease;
|
|
@@ -1110,16 +1179,16 @@
|
|
|
1110
1179
|
height: 100%;
|
|
1111
1180
|
}
|
|
1112
1181
|
.c-input__box:hover .c-date-picker__icon {
|
|
1113
|
-
color:
|
|
1182
|
+
color: var(--c-primary);
|
|
1114
1183
|
}
|
|
1115
1184
|
.c-date-picker--open .c-date-picker__icon {
|
|
1116
|
-
color:
|
|
1185
|
+
color: var(--c-primary);
|
|
1117
1186
|
}
|
|
1118
1187
|
.c-date-picker--open:not(.c-input--invalid) .c-input__box {
|
|
1119
|
-
border-color:
|
|
1188
|
+
border-color: var(--c-focus);
|
|
1120
1189
|
}
|
|
1121
1190
|
.c-date-picker.c-input--disabled .c-date-picker__icon {
|
|
1122
|
-
color:
|
|
1191
|
+
color: var(--c-disabled-text);
|
|
1123
1192
|
}
|
|
1124
1193
|
|
|
1125
1194
|
.c-search .c-input__control {
|
|
@@ -1132,25 +1201,25 @@
|
|
|
1132
1201
|
.c-search__icon {
|
|
1133
1202
|
display: inline-flex;
|
|
1134
1203
|
font-size: 1.25rem;
|
|
1135
|
-
color:
|
|
1204
|
+
color: var(--c-muted);
|
|
1136
1205
|
transition: color 0.2s ease;
|
|
1137
1206
|
}
|
|
1138
1207
|
.c-input__box:focus-within .c-search__icon {
|
|
1139
|
-
color:
|
|
1208
|
+
color: var(--c-primary);
|
|
1140
1209
|
}
|
|
1141
1210
|
.c-search__clear {
|
|
1142
1211
|
font-size: 1rem;
|
|
1143
|
-
color:
|
|
1212
|
+
color: var(--c-muted);
|
|
1144
1213
|
transition: color 0.2s ease;
|
|
1145
1214
|
}
|
|
1146
1215
|
.c-search__clear:hover:not(:disabled) {
|
|
1147
|
-
color:
|
|
1216
|
+
color: var(--c-primary);
|
|
1148
1217
|
}
|
|
1149
1218
|
|
|
1150
1219
|
.c-heading {
|
|
1151
1220
|
margin: 0;
|
|
1152
1221
|
font-family: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
|
|
1153
|
-
color:
|
|
1222
|
+
color: var(--c-text);
|
|
1154
1223
|
}
|
|
1155
1224
|
|
|
1156
1225
|
.c-heading--display {
|
|
@@ -1212,7 +1281,7 @@
|
|
|
1212
1281
|
.c-text {
|
|
1213
1282
|
margin: 0;
|
|
1214
1283
|
font-family: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
|
|
1215
|
-
color:
|
|
1284
|
+
color: var(--c-text);
|
|
1216
1285
|
}
|
|
1217
1286
|
|
|
1218
1287
|
.c-text--body {
|
|
@@ -1265,5 +1334,5 @@
|
|
|
1265
1334
|
}
|
|
1266
1335
|
|
|
1267
1336
|
.c-text--muted {
|
|
1268
|
-
color:
|
|
1337
|
+
color: var(--c-muted);
|
|
1269
1338
|
}
|