@cirthcss/cirth 0.3.0 → 0.4.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.
@@ -39,7 +39,7 @@
39
39
  margin-right: auto;
40
40
  }
41
41
 
42
- @media (width >= 576px) {
42
+ @media (min-width: 576px) {
43
43
  .cirth > header, .cirth > main, .cirth > footer {
44
44
  max-width: 510px;
45
45
  padding-left: 0;
@@ -47,25 +47,25 @@
47
47
  }
48
48
  }
49
49
 
50
- @media (width >= 768px) {
50
+ @media (min-width: 768px) {
51
51
  .cirth > header, .cirth > main, .cirth > footer {
52
52
  max-width: 700px;
53
53
  }
54
54
  }
55
55
 
56
- @media (width >= 1024px) {
56
+ @media (min-width: 1024px) {
57
57
  .cirth > header, .cirth > main, .cirth > footer {
58
58
  max-width: 950px;
59
59
  }
60
60
  }
61
61
 
62
- @media (width >= 1280px) {
62
+ @media (min-width: 1280px) {
63
63
  .cirth > header, .cirth > main, .cirth > footer {
64
64
  max-width: 1200px;
65
65
  }
66
66
  }
67
67
 
68
- @media (width >= 1536px) {
68
+ @media (min-width: 1536px) {
69
69
  .cirth > header, .cirth > main, .cirth > footer {
70
70
  max-width: 1450px;
71
71
  }
@@ -102,6 +102,10 @@
102
102
  font-weight: var(--cirth-font-weight);
103
103
  }
104
104
 
105
+ .cirth p {
106
+ text-wrap: pretty;
107
+ }
108
+
105
109
  .cirth h1, .cirth h2, .cirth h3, .cirth h4, .cirth h5, .cirth h6 {
106
110
  margin-top: 0;
107
111
  margin-bottom: var(--cirth-typography-spacing-vertical);
@@ -109,7 +113,9 @@
109
113
  font-weight: var(--cirth-font-weight);
110
114
  font-size: var(--cirth-font-size);
111
115
  line-height: var(--cirth-line-height);
112
- font-family: var(--cirth-font-family);
116
+ font-family: var(--cirth-font-family-display);
117
+ letter-spacing: var(--cirth-letter-spacing, normal);
118
+ text-wrap: balance;
113
119
  }
114
120
 
115
121
  .cirth h1 {
@@ -169,10 +175,10 @@
169
175
  }
170
176
 
171
177
  .cirth mark {
178
+ padding: 0 var(--cirth-space-1);
172
179
  background-color: var(--cirth-mark-background-color);
173
180
  color: var(--cirth-mark-color);
174
181
  vertical-align: baseline;
175
- padding: .125rem .25rem;
176
182
  }
177
183
 
178
184
  .cirth blockquote {
@@ -209,7 +215,7 @@
209
215
  background-color: var(--cirth-text-selection-color);
210
216
  }
211
217
 
212
- .cirth [role="link"] {
218
+ .cirth :where(a:not([role="button"])), .cirth [role="link"] {
213
219
  --cirth-color: var(--cirth-primary);
214
220
  --cirth-background-color: transparent;
215
221
  --cirth-underline: var(--cirth-primary-underline);
@@ -224,39 +230,15 @@
224
230
  outline: none;
225
231
  }
226
232
 
227
- .cirth :where(a:not([role="button"])) {
228
- --cirth-color: var(--cirth-primary);
229
- --cirth-background-color: transparent;
230
- --cirth-underline: var(--cirth-primary-underline);
231
- background-color: var(--cirth-background-color);
232
- color: var(--cirth-color);
233
- -webkit-text-decoration: var(--cirth-text-decoration);
234
- text-decoration: var(--cirth-text-decoration);
235
- -webkit-text-decoration-color: var(--cirth-underline);
236
- text-decoration-color: var(--cirth-underline);
237
- text-underline-offset: .125em;
238
- transition: background-color var(--cirth-transition), color var(--cirth-transition), text-decoration var(--cirth-transition), box-shadow var(--cirth-transition);
239
- outline: none;
240
- }
241
-
242
- .cirth :where(a:not([role="button"])):is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
233
+ .cirth :where(a:not([role="button"])):is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), .cirth [role="link"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
243
234
  --cirth-color: var(--cirth-primary-hover);
244
235
  --cirth-underline: var(--cirth-primary-hover-underline);
245
236
  --cirth-text-decoration: underline;
246
237
  }
247
238
 
248
- .cirth [role="link"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
249
- --cirth-color: var(--cirth-primary-hover);
250
- --cirth-underline: var(--cirth-primary-hover-underline);
251
- --cirth-text-decoration: underline;
252
- }
253
-
254
- .cirth :where(a:not([role="button"])):focus-visible {
255
- box-shadow: 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
256
- }
257
-
258
- .cirth [role="link"]:focus-visible {
239
+ .cirth :where(a:not([role="button"])):focus-visible, .cirth [role="link"]:focus-visible {
259
240
  box-shadow: 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
241
+ outline: var(--cirth-outline-width) solid transparent;
260
242
  }
261
243
 
262
244
  .cirth a[role="button"] {
@@ -265,86 +247,20 @@
265
247
 
266
248
  .cirth button {
267
249
  text-transform: none;
268
- -webkit-appearance: button;
269
250
  margin: 0;
270
251
  font-family: inherit;
271
252
  overflow: visible;
272
253
  }
273
254
 
274
- .cirth button, .cirth [role="button"] {
275
- --cirth-background-color: var(--cirth-primary-background);
276
- --cirth-border-color: var(--cirth-primary-border);
277
- --cirth-color: var(--cirth-primary-inverse);
278
- --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
279
- padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
280
- border: var(--cirth-border-width) solid var(--cirth-border-color);
281
- border-radius: var(--cirth-border-radius);
282
- background-color: var(--cirth-background-color);
283
- box-shadow: var(--cirth-box-shadow);
284
- color: var(--cirth-color);
285
- font-weight: var(--cirth-font-weight);
286
- font-size: var(--cirth-font-size-md);
287
- line-height: var(--cirth-line-height);
288
- text-align: center;
289
- cursor: pointer;
290
- -webkit-user-select: none;
291
- user-select: none;
292
- transition: background-color var(--cirth-transition), border-color var(--cirth-transition), color var(--cirth-transition), box-shadow var(--cirth-transition);
293
- outline: none;
294
- text-decoration: none;
295
- }
296
-
297
- .cirth [type="submit"] {
298
- --cirth-background-color: var(--cirth-primary-background);
299
- --cirth-border-color: var(--cirth-primary-border);
300
- --cirth-color: var(--cirth-primary-inverse);
301
- --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
302
- padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
303
- border: var(--cirth-border-width) solid var(--cirth-border-color);
304
- border-radius: var(--cirth-border-radius);
305
- background-color: var(--cirth-background-color);
306
- box-shadow: var(--cirth-box-shadow);
307
- color: var(--cirth-color);
308
- font-weight: var(--cirth-font-weight);
309
- font-size: var(--cirth-font-size-md);
310
- line-height: var(--cirth-line-height);
311
- text-align: center;
312
- cursor: pointer;
313
- -webkit-user-select: none;
314
- user-select: none;
315
- transition: background-color var(--cirth-transition), border-color var(--cirth-transition), color var(--cirth-transition), box-shadow var(--cirth-transition);
316
- outline: none;
317
- text-decoration: none;
318
- }
319
-
320
- .cirth [type="reset"] {
321
- --cirth-background-color: var(--cirth-primary-background);
322
- --cirth-border-color: var(--cirth-primary-border);
323
- --cirth-color: var(--cirth-primary-inverse);
324
- --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
325
- padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
326
- border: var(--cirth-border-width) solid var(--cirth-border-color);
327
- border-radius: var(--cirth-border-radius);
328
- background-color: var(--cirth-background-color);
329
- box-shadow: var(--cirth-box-shadow);
330
- color: var(--cirth-color);
331
- font-weight: var(--cirth-font-weight);
332
- font-size: var(--cirth-font-size-md);
333
- line-height: var(--cirth-line-height);
334
- text-align: center;
335
- cursor: pointer;
336
- -webkit-user-select: none;
337
- user-select: none;
338
- transition: background-color var(--cirth-transition), border-color var(--cirth-transition), color var(--cirth-transition), box-shadow var(--cirth-transition);
339
- outline: none;
340
- text-decoration: none;
255
+ .cirth button, .cirth [type="submit"], .cirth [type="reset"], .cirth [type="button"] {
256
+ -webkit-appearance: button;
341
257
  }
342
258
 
343
- .cirth [type="button"] {
259
+ .cirth button, .cirth [type="submit"], .cirth [type="reset"], .cirth [type="button"], .cirth [role="button"] {
344
260
  --cirth-background-color: var(--cirth-primary-background);
345
261
  --cirth-border-color: var(--cirth-primary-border);
346
262
  --cirth-color: var(--cirth-primary-inverse);
347
- --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
263
+ --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 #0000);
348
264
  padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
349
265
  border: var(--cirth-border-width) solid var(--cirth-border-color);
350
266
  border-radius: var(--cirth-border-radius);
@@ -367,7 +283,7 @@
367
283
  --cirth-background-color: var(--cirth-primary-background);
368
284
  --cirth-border-color: var(--cirth-primary-border);
369
285
  --cirth-color: var(--cirth-primary-inverse);
370
- --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
286
+ --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 #0000);
371
287
  padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
372
288
  border: var(--cirth-border-width) solid var(--cirth-border-color);
373
289
  border-radius: var(--cirth-border-radius);
@@ -386,137 +302,54 @@
386
302
  text-decoration: none;
387
303
  }
388
304
 
389
- .cirth button[aria-current]:not([aria-current="false"]), .cirth [role="button"][aria-current]:not([aria-current="false"]) {
305
+ .cirth button[aria-current]:not([aria-current="false"]), .cirth button:is(:hover, :active, :focus), .cirth [type="submit"][aria-current]:not([aria-current="false"]), .cirth [type="submit"]:is(:hover, :active, :focus), .cirth [type="reset"][aria-current]:not([aria-current="false"]), .cirth [type="reset"]:is(:hover, :active, :focus), .cirth [type="button"][aria-current]:not([aria-current="false"]), .cirth [type="button"]:is(:hover, :active, :focus), .cirth [role="button"][aria-current]:not([aria-current="false"]), .cirth [role="button"]:is(:hover, :active, :focus) {
390
306
  --cirth-background-color: var(--cirth-primary-hover-background);
391
307
  --cirth-border-color: var(--cirth-primary-hover-border);
392
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
393
- --cirth-color: var(--cirth-primary-inverse);
394
- }
395
-
396
- .cirth button:is(:hover, :active, :focus) {
397
- --cirth-background-color: var(--cirth-primary-hover-background);
398
- --cirth-border-color: var(--cirth-primary-hover-border);
399
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
400
- --cirth-color: var(--cirth-primary-inverse);
401
- }
402
-
403
- .cirth [type="submit"][aria-current]:not([aria-current="false"]) {
404
- --cirth-background-color: var(--cirth-primary-hover-background);
405
- --cirth-border-color: var(--cirth-primary-hover-border);
406
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
407
- --cirth-color: var(--cirth-primary-inverse);
408
- }
409
-
410
- .cirth [type="submit"]:is(:hover, :active, :focus) {
411
- --cirth-background-color: var(--cirth-primary-hover-background);
412
- --cirth-border-color: var(--cirth-primary-hover-border);
413
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
414
- --cirth-color: var(--cirth-primary-inverse);
415
- }
416
-
417
- .cirth [type="reset"][aria-current]:not([aria-current="false"]) {
418
- --cirth-background-color: var(--cirth-primary-hover-background);
419
- --cirth-border-color: var(--cirth-primary-hover-border);
420
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
421
- --cirth-color: var(--cirth-primary-inverse);
422
- }
423
-
424
- .cirth [type="reset"]:is(:hover, :active, :focus) {
425
- --cirth-background-color: var(--cirth-primary-hover-background);
426
- --cirth-border-color: var(--cirth-primary-hover-border);
427
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
428
- --cirth-color: var(--cirth-primary-inverse);
429
- }
430
-
431
- .cirth [type="button"][aria-current]:not([aria-current="false"]) {
432
- --cirth-background-color: var(--cirth-primary-hover-background);
433
- --cirth-border-color: var(--cirth-primary-hover-border);
434
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
435
- --cirth-color: var(--cirth-primary-inverse);
436
- }
437
-
438
- .cirth [type="button"]:is(:hover, :active, :focus) {
439
- --cirth-background-color: var(--cirth-primary-hover-background);
440
- --cirth-border-color: var(--cirth-primary-hover-border);
441
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
308
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000);
442
309
  --cirth-color: var(--cirth-primary-inverse);
443
310
  }
444
311
 
445
312
  .cirth [type="file"]::file-selector-button:is() {
446
313
  --cirth-background-color: var(--cirth-primary-hover-background);
447
314
  --cirth-border-color: var(--cirth-primary-hover-border);
448
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
315
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000);
449
316
  --cirth-color: var(--cirth-primary-inverse);
450
317
  }
451
318
 
452
319
  .cirth [type="file"]::file-selector-button:is(:hover, :active, :focus) {
453
320
  --cirth-background-color: var(--cirth-primary-hover-background);
454
321
  --cirth-border-color: var(--cirth-primary-hover-border);
455
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
322
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000);
456
323
  --cirth-color: var(--cirth-primary-inverse);
457
324
  }
458
325
 
459
- .cirth [role="button"]:is(:hover, :active, :focus) {
460
- --cirth-background-color: var(--cirth-primary-hover-background);
461
- --cirth-border-color: var(--cirth-primary-hover-border);
462
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
463
- --cirth-color: var(--cirth-primary-inverse);
326
+ .cirth button:active, .cirth [type="submit"]:active, .cirth [type="reset"]:active, .cirth [type="button"]:active, .cirth [role="button"]:active {
327
+ transform: translateY(.0625rem);
464
328
  }
465
329
 
466
- .cirth button:focus, .cirth button[aria-current]:not([aria-current="false"]):focus, .cirth [role="button"]:focus, .cirth [role="button"][aria-current]:not([aria-current="false"]):focus {
467
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
468
- 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
330
+ .cirth [type="file"]::file-selector-button:active {
331
+ transform: translateY(.0625rem);
469
332
  }
470
333
 
471
- .cirth [type="submit"]:focus {
472
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
334
+ .cirth button:focus-visible, .cirth button[aria-current]:not([aria-current="false"]):focus-visible, .cirth [type="submit"]:focus-visible, .cirth [type="submit"][aria-current]:not([aria-current="false"]):focus-visible, .cirth [type="reset"]:focus-visible, .cirth [type="reset"][aria-current]:not([aria-current="false"]):focus-visible, .cirth [type="button"]:focus-visible, .cirth [type="button"][aria-current]:not([aria-current="false"]):focus-visible, .cirth [role="button"]:focus-visible, .cirth [role="button"][aria-current]:not([aria-current="false"]):focus-visible {
335
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000),
473
336
  0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
337
+ outline: var(--cirth-outline-width) solid transparent;
474
338
  }
475
339
 
476
- .cirth [type="submit"][aria-current]:not([aria-current="false"]):focus {
477
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
340
+ .cirth [type="file"]::file-selector-button:focus-visible {
341
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000),
478
342
  0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
343
+ outline: var(--cirth-outline-width) solid transparent;
479
344
  }
480
345
 
481
- .cirth [type="reset"]:focus {
482
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
346
+ .cirth [type="file"]::file-selector-button:is():focus-visible {
347
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000),
483
348
  0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
349
+ outline: var(--cirth-outline-width) solid transparent;
484
350
  }
485
351
 
486
- .cirth [type="reset"][aria-current]:not([aria-current="false"]):focus {
487
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
488
- 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
489
- }
490
-
491
- .cirth [type="button"]:focus {
492
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
493
- 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
494
- }
495
-
496
- .cirth [type="button"][aria-current]:not([aria-current="false"]):focus {
497
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
498
- 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
499
- }
500
-
501
- .cirth [type="file"]::file-selector-button:focus {
502
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
503
- 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
504
- }
505
-
506
- .cirth [type="file"]::file-selector-button:is():focus {
507
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
508
- 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
509
- }
510
-
511
- .cirth [type="submit"] {
512
- margin-bottom: var(--cirth-spacing);
513
- }
514
-
515
- .cirth [type="reset"] {
516
- margin-bottom: var(--cirth-spacing);
517
- }
518
-
519
- .cirth [type="button"] {
352
+ .cirth [type="submit"], .cirth [type="reset"], .cirth [type="button"] {
520
353
  margin-bottom: var(--cirth-spacing);
521
354
  }
522
355
 
@@ -546,22 +379,17 @@
546
379
  --cirth-color: var(--cirth-secondary-inverse);
547
380
  }
548
381
 
549
- .cirth [type="reset"]:focus {
550
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
382
+ .cirth [type="reset"]:focus-visible {
383
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000),
551
384
  0 0 0 var(--cirth-outline-width) var(--cirth-secondary-focus);
552
385
  }
553
386
 
554
- .cirth [type="file"]::file-selector-button:focus {
555
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
387
+ .cirth [type="file"]::file-selector-button:focus-visible {
388
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000),
556
389
  0 0 0 var(--cirth-outline-width) var(--cirth-secondary-focus);
557
390
  }
558
391
 
559
- .cirth :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled] {
560
- opacity: var(--cirth-opacity-disabled);
561
- pointer-events: none;
562
- }
563
-
564
- .cirth :where(fieldset[disabled]) :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) {
392
+ .cirth :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled], .cirth :where(fieldset[disabled]) :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) {
565
393
  opacity: var(--cirth-opacity-disabled);
566
394
  pointer-events: none;
567
395
  }
@@ -579,6 +407,7 @@
579
407
  background-color: var(--cirth-background-color);
580
408
  color: var(--cirth-color);
581
409
  font-weight: var(--cirth-font-weight);
410
+ font-variant-numeric: tabular-nums;
582
411
  text-align: left;
583
412
  text-align: start;
584
413
  }
@@ -619,11 +448,7 @@
619
448
  fill: currentColor;
620
449
  }
621
450
 
622
- .cirth svg:not(:root) {
623
- overflow: hidden;
624
- }
625
-
626
- .cirth svg:not(:host) {
451
+ .cirth svg:not(:root), .cirth svg:not(:host) {
627
452
  overflow: hidden;
628
453
  }
629
454
 
@@ -651,7 +476,7 @@
651
476
  }
652
477
 
653
478
  .cirth code, .cirth kbd, .cirth samp {
654
- padding: .375rem;
479
+ padding: var(--cirth-space-1) var(--cirth-space-2);
655
480
  display: inline-block;
656
481
  }
657
482
 
@@ -728,11 +553,7 @@
728
553
  overflow: auto;
729
554
  }
730
555
 
731
- .cirth [type="checkbox"] {
732
- padding: 0;
733
- }
734
-
735
- .cirth [type="radio"] {
556
+ .cirth [type="checkbox"], .cirth [type="radio"] {
736
557
  padding: 0;
737
558
  }
738
559
 
@@ -775,17 +596,12 @@
775
596
  display: none;
776
597
  }
777
598
 
778
- .cirth [type="file"] {
779
- border-width: 0;
780
- padding: 0;
781
- }
782
-
783
- .cirth [type="range"] {
599
+ .cirth [type="file"], .cirth [type="range"] {
784
600
  border-width: 0;
785
601
  padding: 0;
786
602
  }
787
603
 
788
- .cirth input:not(:is([type="checkbox"], [type="radio"], [type="range"])) {
604
+ .cirth input:not([type="checkbox"], [type="radio"], [type="range"]) {
789
605
  height: calc(var(--cirth-size-4) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
790
606
  }
791
607
 
@@ -798,7 +614,7 @@
798
614
  }
799
615
 
800
616
  .cirth label, .cirth fieldset legend {
801
- margin-bottom: calc(var(--cirth-spacing) * .375);
617
+ margin-bottom: calc(var(--cirth-spacing) * .5);
802
618
  color: var(--cirth-color);
803
619
  font-weight: var(--cirth-form-label-font-weight, var(--cirth-font-weight));
804
620
  display: block;
@@ -808,24 +624,11 @@
808
624
  margin-bottom: calc(var(--cirth-spacing) * .5);
809
625
  }
810
626
 
811
- .cirth select, .cirth textarea {
812
- width: 100%;
813
- }
814
-
815
- .cirth input:not(:is([type="checkbox"], [type="radio"])) {
627
+ .cirth input:not([type="checkbox"], [type="radio"]), .cirth button[type="submit"], .cirth select, .cirth textarea {
816
628
  width: 100%;
817
629
  }
818
630
 
819
- .cirth button[type="submit"] {
820
- width: 100%;
821
- }
822
-
823
- .cirth select, .cirth textarea {
824
- appearance: none;
825
- padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
826
- }
827
-
828
- .cirth input:not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"])) {
631
+ .cirth input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), .cirth select, .cirth textarea {
829
632
  appearance: none;
830
633
  padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
831
634
  }
@@ -845,43 +648,21 @@
845
648
  outline: none;
846
649
  }
847
650
 
848
- .cirth input:not(:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [readonly])):is(:active, :focus) {
849
- --cirth-background-color: var(--cirth-form-element-active-background-color);
850
- }
851
-
852
- .cirth :where(select, textarea):not([readonly]):is(:active, :focus) {
651
+ .cirth input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [readonly]):is(:active, :focus), .cirth :where(select, textarea):not([readonly]):is(:active, :focus) {
853
652
  --cirth-background-color: var(--cirth-form-element-active-background-color);
854
653
  }
855
654
 
856
- .cirth input:not(:is([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly])):is(:active, :focus) {
857
- --cirth-border-color: var(--cirth-form-element-active-border-color);
858
- }
859
-
860
- .cirth :where(select, textarea):not([readonly]):is(:active, :focus) {
655
+ .cirth input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]):is(:active, :focus), .cirth :where(select, textarea):not([readonly]):is(:active, :focus) {
861
656
  --cirth-border-color: var(--cirth-form-element-active-border-color);
862
657
  }
863
658
 
864
- .cirth input:not(:is([type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [readonly])):focus {
865
- --cirth-box-shadow: 0 0 0 var(--cirth-outline-width)
866
- var(--cirth-form-element-focus-color);
867
- }
868
-
869
- .cirth :where(select, textarea):not([readonly]):focus {
659
+ .cirth input:not([type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [readonly]):focus, .cirth :where(select, textarea):not([readonly]):focus {
870
660
  --cirth-box-shadow: 0 0 0 var(--cirth-outline-width)
871
661
  var(--cirth-form-element-focus-color);
662
+ outline: var(--cirth-outline-width) solid transparent;
872
663
  }
873
664
 
874
- .cirth select[disabled], .cirth textarea[disabled], .cirth label[aria-disabled="true"] {
875
- opacity: var(--cirth-form-element-disabled-opacity);
876
- pointer-events: none;
877
- }
878
-
879
- .cirth input:not(:is([type="submit"], [type="button"], [type="reset"]))[disabled] {
880
- opacity: var(--cirth-form-element-disabled-opacity);
881
- pointer-events: none;
882
- }
883
-
884
- .cirth :where(fieldset[disabled]) :is(input:not(:is([type="submit"], [type="button"], [type="reset"])), select, textarea) {
665
+ .cirth input:not([type="submit"], [type="button"], [type="reset"])[disabled], .cirth select[disabled], .cirth textarea[disabled], .cirth label[aria-disabled="true"], .cirth :where(fieldset[disabled]) :is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) {
885
666
  opacity: var(--cirth-form-element-disabled-opacity);
886
667
  pointer-events: none;
887
668
  }
@@ -890,7 +671,7 @@
890
671
  opacity: 1;
891
672
  }
892
673
 
893
- .cirth :where(input, select, textarea):not(:is([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"]))[aria-invalid] {
674
+ .cirth :where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"])[aria-invalid] {
894
675
  padding-right: calc(var(--cirth-form-element-spacing-horizontal) + var(--cirth-space-6));
895
676
  padding-left: var(--cirth-form-element-spacing-horizontal);
896
677
  background-position: center right var(--cirth-space-3);
@@ -900,11 +681,11 @@
900
681
  padding-inline-end: calc(var(--cirth-form-element-spacing-horizontal) + var(--cirth-space-6));
901
682
  }
902
683
 
903
- .cirth :where(input, select, textarea):not(:is([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"]))[aria-invalid="false"]:not(select) {
684
+ .cirth :where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"])[aria-invalid="false"]:not(select) {
904
685
  background-image: var(--cirth-icon-valid);
905
686
  }
906
687
 
907
- .cirth :where(input, select, textarea):not(:is([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"]))[aria-invalid="true"]:not(select) {
688
+ .cirth :where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"])[aria-invalid="true"]:not(select) {
908
689
  background-image: var(--cirth-icon-invalid);
909
690
  }
910
691
 
@@ -916,7 +697,7 @@
916
697
  --cirth-border-color: var(--cirth-form-element-valid-active-border-color);
917
698
  }
918
699
 
919
- .cirth :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus):not(:is([type="checkbox"], [type="radio"])) {
700
+ .cirth :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus):not([type="checkbox"], [type="radio"]) {
920
701
  --cirth-box-shadow: 0 0 0 var(--cirth-outline-width)
921
702
  var(--cirth-form-element-valid-focus-color);
922
703
  }
@@ -929,21 +710,16 @@
929
710
  --cirth-border-color: var(--cirth-form-element-invalid-active-border-color);
930
711
  }
931
712
 
932
- .cirth :where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus):not(:is([type="checkbox"], [type="radio"])) {
713
+ .cirth :where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus):not([type="checkbox"], [type="radio"]) {
933
714
  --cirth-box-shadow: 0 0 0 var(--cirth-outline-width)
934
715
  var(--cirth-form-element-invalid-focus-color);
935
716
  }
936
717
 
937
- [dir="rtl"] .cirth :where(input, select, textarea):not(:is([type="checkbox"], [type="radio"])):is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"]) {
718
+ [dir="rtl"] .cirth :where(input, select, textarea):not([type="checkbox"], [type="radio"]):is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"]) {
938
719
  background-position: center left var(--cirth-space-3);
939
720
  }
940
721
 
941
- .cirth select:invalid {
942
- color: var(--cirth-form-element-placeholder-color);
943
- opacity: 1;
944
- }
945
-
946
- .cirth input::placeholder {
722
+ .cirth input::placeholder, .cirth textarea::placeholder, .cirth select:invalid {
947
723
  color: var(--cirth-form-element-placeholder-color);
948
724
  opacity: 1;
949
725
  }
@@ -953,30 +729,21 @@
953
729
  opacity: 1;
954
730
  }
955
731
 
956
- .cirth textarea::placeholder {
957
- color: var(--cirth-form-element-placeholder-color);
958
- opacity: 1;
959
- }
960
-
961
732
  .cirth textarea::-webkit-input-placeholder {
962
733
  color: var(--cirth-form-element-placeholder-color);
963
734
  opacity: 1;
964
735
  }
965
736
 
966
- .cirth select, .cirth textarea {
967
- margin-bottom: var(--cirth-spacing);
968
- }
969
-
970
- .cirth input:not(:is([type="checkbox"], [type="radio"])) {
737
+ .cirth input:not([type="checkbox"], [type="radio"]), .cirth select, .cirth textarea {
971
738
  margin-bottom: var(--cirth-spacing);
972
739
  }
973
740
 
974
741
  .cirth select::-ms-expand {
975
- background-color: rgba(0, 0, 0, 0);
742
+ background-color: #0000;
976
743
  border: 0;
977
744
  }
978
745
 
979
- .cirth select:not(:is([multiple], [size])) {
746
+ .cirth select:not([multiple], [size]) {
980
747
  padding-right: calc(var(--cirth-form-element-spacing-horizontal) + var(--cirth-space-6));
981
748
  padding-left: var(--cirth-form-element-spacing-horizontal);
982
749
  background-image: var(--cirth-icon-chevron);
@@ -992,7 +759,7 @@
992
759
  color: var(--cirth-form-element-color);
993
760
  }
994
761
 
995
- [dir="rtl"] .cirth select:not(:is([multiple], [size])) {
762
+ [dir="rtl"] .cirth select:not([multiple], [size]) {
996
763
  background-position: center left var(--cirth-space-3);
997
764
  }
998
765
 
@@ -1034,25 +801,14 @@
1034
801
  width: fit-content;
1035
802
  }
1036
803
 
1037
- .cirth [type="checkbox"] {
1038
- appearance: none;
1039
- margin-top: -.125em;
1040
- border-width: var(--cirth-border-width);
1041
- vertical-align: middle;
1042
- cursor: pointer;
1043
- width: 1.25em;
1044
- height: 1.25em;
1045
- margin-inline-end: .5em;
1046
- }
1047
-
1048
- .cirth [type="radio"] {
804
+ .cirth [type="checkbox"], .cirth [type="radio"] {
1049
805
  appearance: none;
1050
806
  margin-top: -.125em;
1051
807
  border-width: var(--cirth-border-width);
1052
808
  vertical-align: middle;
1053
809
  cursor: pointer;
1054
- width: 1.25em;
1055
- height: 1.25em;
810
+ width: 1.5em;
811
+ height: 1.5em;
1056
812
  margin-inline-end: .5em;
1057
813
  }
1058
814
 
@@ -1064,77 +820,22 @@
1064
820
  display: none;
1065
821
  }
1066
822
 
1067
- .cirth [type="checkbox"]:checked {
1068
- --cirth-background-color: var(--cirth-primary-background);
1069
- --cirth-border-color: var(--cirth-primary-border);
1070
- background-image: var(--cirth-icon-checkbox);
1071
- background-position: center;
1072
- background-repeat: no-repeat;
1073
- background-size: .75em;
1074
- }
1075
-
1076
- .cirth [type="checkbox"]:checked:active {
1077
- --cirth-background-color: var(--cirth-primary-background);
1078
- --cirth-border-color: var(--cirth-primary-border);
1079
- background-image: var(--cirth-icon-checkbox);
1080
- background-position: center;
1081
- background-repeat: no-repeat;
1082
- background-size: .75em;
1083
- }
1084
-
1085
- .cirth [type="checkbox"]:checked:focus {
1086
- --cirth-background-color: var(--cirth-primary-background);
1087
- --cirth-border-color: var(--cirth-primary-border);
1088
- background-image: var(--cirth-icon-checkbox);
1089
- background-position: center;
1090
- background-repeat: no-repeat;
1091
- background-size: .75em;
1092
- }
1093
-
1094
- .cirth [type="radio"]:checked {
1095
- --cirth-background-color: var(--cirth-primary-background);
1096
- --cirth-border-color: var(--cirth-primary-border);
1097
- background-image: var(--cirth-icon-checkbox);
1098
- background-position: center;
1099
- background-repeat: no-repeat;
1100
- background-size: .75em;
1101
- }
1102
-
1103
- .cirth [type="radio"]:checked:active {
823
+ .cirth [type="checkbox"]:checked, .cirth [type="checkbox"]:checked:active, .cirth [type="checkbox"]:checked:focus, .cirth [type="radio"]:checked, .cirth [type="radio"]:checked:active, .cirth [type="radio"]:checked:focus {
1104
824
  --cirth-background-color: var(--cirth-primary-background);
1105
825
  --cirth-border-color: var(--cirth-primary-border);
1106
826
  background-image: var(--cirth-icon-checkbox);
1107
827
  background-position: center;
1108
828
  background-repeat: no-repeat;
1109
- background-size: .75em;
829
+ background-size: .9em;
1110
830
  }
1111
831
 
1112
- .cirth [type="radio"]:checked:focus {
1113
- --cirth-background-color: var(--cirth-primary-background);
1114
- --cirth-border-color: var(--cirth-primary-border);
1115
- background-image: var(--cirth-icon-checkbox);
1116
- background-position: center;
1117
- background-repeat: no-repeat;
1118
- background-size: .75em;
1119
- }
1120
-
1121
- .cirth [type="checkbox"] ~ label {
1122
- cursor: pointer;
1123
- margin-bottom: 0;
1124
- display: inline-block;
1125
- }
1126
-
1127
- .cirth [type="radio"] ~ label {
832
+ .cirth [type="checkbox"] ~ label, .cirth [type="radio"] ~ label {
1128
833
  cursor: pointer;
1129
834
  margin-bottom: 0;
1130
835
  display: inline-block;
1131
836
  }
1132
837
 
1133
- .cirth [type="checkbox"] ~ label:not(:last-of-type) {
1134
- margin-inline-end: 1em;
1135
- }
1136
-
1137
- .cirth [type="radio"] ~ label:not(:last-of-type) {
838
+ .cirth [type="checkbox"] ~ label:not(:last-of-type), .cirth [type="radio"] ~ label:not(:last-of-type) {
1138
839
  margin-inline-end: 1em;
1139
840
  }
1140
841
 
@@ -1144,29 +845,17 @@
1144
845
  background-image: var(--cirth-icon-minus);
1145
846
  background-position: center;
1146
847
  background-repeat: no-repeat;
1147
- background-size: .75em;
848
+ background-size: .9em;
1148
849
  }
1149
850
 
1150
851
  .cirth [type="radio"] {
1151
852
  border-radius: 50%;
1152
853
  }
1153
854
 
1154
- .cirth [type="radio"]:checked {
855
+ .cirth [type="radio"]:checked, .cirth [type="radio"]:checked:active, .cirth [type="radio"]:checked:focus {
1155
856
  --cirth-background-color: var(--cirth-primary-inverse);
1156
857
  background-image: none;
1157
- border-width: .35em;
1158
- }
1159
-
1160
- .cirth [type="radio"]:checked:active {
1161
- --cirth-background-color: var(--cirth-primary-inverse);
1162
- background-image: none;
1163
- border-width: .35em;
1164
- }
1165
-
1166
- .cirth [type="radio"]:checked:focus {
1167
- --cirth-background-color: var(--cirth-primary-inverse);
1168
- background-image: none;
1169
- border-width: .35em;
858
+ border-width: .42em;
1170
859
  }
1171
860
 
1172
861
  .cirth [type="checkbox"][role="switch"] {
@@ -1174,10 +863,10 @@
1174
863
  --cirth-color: var(--cirth-switch-color);
1175
864
  border: var(--cirth-border-width) solid var(--cirth-border-color);
1176
865
  background-color: var(--cirth-background-color);
1177
- border-radius: 1.25em;
1178
- width: 2.25em;
1179
- height: 1.25em;
1180
- line-height: 1.25em;
866
+ border-radius: 1.5em;
867
+ width: 2.7em;
868
+ height: 1.5em;
869
+ line-height: 1.5em;
1181
870
  }
1182
871
 
1183
872
  .cirth [type="checkbox"][role="switch"]:not([aria-invalid]) {
@@ -1189,148 +878,44 @@
1189
878
  background-color: var(--cirth-color);
1190
879
  height: 100%;
1191
880
  box-shadow: var(--cirth-switch-thumb-box-shadow);
1192
- content: "";
1193
- transition: margin var(--cirth-duration-fast) var(--cirth-ease-in-out);
1194
- border-radius: 50%;
1195
- display: block;
1196
- }
1197
-
1198
- .cirth [type="checkbox"][role="switch"]:focus {
1199
- --cirth-background-color: var(--cirth-switch-background-color);
1200
- --cirth-border-color: var(--cirth-switch-background-color);
1201
- }
1202
-
1203
- .cirth [type="checkbox"][role="switch"]:checked {
1204
- --cirth-background-color: var(--cirth-switch-checked-background-color);
1205
- --cirth-border-color: var(--cirth-switch-checked-background-color);
1206
- background-image: none;
1207
- }
1208
-
1209
- .cirth [type="checkbox"][role="switch"]:checked:before {
1210
- margin-inline-start: 1em;
1211
- }
1212
-
1213
- .cirth [type="checkbox"][role="switch"][disabled] {
1214
- --cirth-background-color: var(--cirth-border-color);
1215
- }
1216
-
1217
- .cirth [type="checkbox"][aria-invalid="false"]:checked {
1218
- --cirth-background-color: var(--cirth-form-element-valid-border-color);
1219
- }
1220
-
1221
- .cirth [type="checkbox"][aria-invalid="false"]:checked:active {
1222
- --cirth-background-color: var(--cirth-form-element-valid-border-color);
1223
- }
1224
-
1225
- .cirth [type="checkbox"][aria-invalid="false"]:checked:focus {
1226
- --cirth-background-color: var(--cirth-form-element-valid-border-color);
1227
- }
1228
-
1229
- .cirth [type="checkbox"][role="switch"][aria-invalid="false"]:checked {
1230
- --cirth-background-color: var(--cirth-form-element-valid-border-color);
1231
- }
1232
-
1233
- .cirth [type="checkbox"][role="switch"][aria-invalid="false"]:checked:active {
1234
- --cirth-background-color: var(--cirth-form-element-valid-border-color);
1235
- }
1236
-
1237
- .cirth [type="checkbox"][role="switch"][aria-invalid="false"]:checked:focus {
1238
- --cirth-background-color: var(--cirth-form-element-valid-border-color);
1239
- }
1240
-
1241
- .cirth [type="checkbox"]:checked[aria-invalid="true"] {
1242
- --cirth-background-color: var(--cirth-form-element-invalid-border-color);
1243
- }
1244
-
1245
- .cirth [type="checkbox"]:checked:active[aria-invalid="true"] {
1246
- --cirth-background-color: var(--cirth-form-element-invalid-border-color);
1247
- }
1248
-
1249
- .cirth [type="checkbox"]:checked:focus[aria-invalid="true"] {
1250
- --cirth-background-color: var(--cirth-form-element-invalid-border-color);
1251
- }
1252
-
1253
- .cirth [type="checkbox"][role="switch"]:checked[aria-invalid="true"] {
1254
- --cirth-background-color: var(--cirth-form-element-invalid-border-color);
1255
- }
1256
-
1257
- .cirth [type="checkbox"][role="switch"]:checked:active[aria-invalid="true"] {
1258
- --cirth-background-color: var(--cirth-form-element-invalid-border-color);
1259
- }
1260
-
1261
- .cirth [type="checkbox"][role="switch"]:checked:focus[aria-invalid="true"] {
1262
- --cirth-background-color: var(--cirth-form-element-invalid-border-color);
1263
- }
1264
-
1265
- .cirth [type="checkbox"][aria-invalid="false"]:checked {
1266
- --cirth-border-color: var(--cirth-form-element-valid-border-color);
1267
- }
1268
-
1269
- .cirth [type="checkbox"][aria-invalid="false"]:checked:active {
1270
- --cirth-border-color: var(--cirth-form-element-valid-border-color);
1271
- }
1272
-
1273
- .cirth [type="checkbox"][aria-invalid="false"]:checked:focus {
1274
- --cirth-border-color: var(--cirth-form-element-valid-border-color);
1275
- }
1276
-
1277
- .cirth [type="radio"][aria-invalid="false"]:checked {
1278
- --cirth-border-color: var(--cirth-form-element-valid-border-color);
1279
- }
1280
-
1281
- .cirth [type="radio"][aria-invalid="false"]:checked:active {
1282
- --cirth-border-color: var(--cirth-form-element-valid-border-color);
1283
- }
1284
-
1285
- .cirth [type="radio"][aria-invalid="false"]:checked:focus {
1286
- --cirth-border-color: var(--cirth-form-element-valid-border-color);
1287
- }
1288
-
1289
- .cirth [type="checkbox"][role="switch"][aria-invalid="false"]:checked {
1290
- --cirth-border-color: var(--cirth-form-element-valid-border-color);
1291
- }
1292
-
1293
- .cirth [type="checkbox"][role="switch"][aria-invalid="false"]:checked:active {
1294
- --cirth-border-color: var(--cirth-form-element-valid-border-color);
1295
- }
1296
-
1297
- .cirth [type="checkbox"][role="switch"][aria-invalid="false"]:checked:focus {
1298
- --cirth-border-color: var(--cirth-form-element-valid-border-color);
1299
- }
1300
-
1301
- .cirth [type="checkbox"]:checked[aria-invalid="true"] {
1302
- --cirth-border-color: var(--cirth-form-element-invalid-border-color);
881
+ content: "";
882
+ transition: margin var(--cirth-duration-fast) var(--cirth-ease-in-out);
883
+ border-radius: 50%;
884
+ display: block;
1303
885
  }
1304
886
 
1305
- .cirth [type="checkbox"]:checked:active[aria-invalid="true"] {
1306
- --cirth-border-color: var(--cirth-form-element-invalid-border-color);
887
+ .cirth [type="checkbox"][role="switch"]:focus {
888
+ --cirth-background-color: var(--cirth-switch-background-color);
889
+ --cirth-border-color: var(--cirth-switch-background-color);
1307
890
  }
1308
891
 
1309
- .cirth [type="checkbox"]:checked:focus[aria-invalid="true"] {
1310
- --cirth-border-color: var(--cirth-form-element-invalid-border-color);
892
+ .cirth [type="checkbox"][role="switch"]:checked {
893
+ --cirth-background-color: var(--cirth-switch-checked-background-color);
894
+ --cirth-border-color: var(--cirth-switch-checked-background-color);
895
+ background-image: none;
1311
896
  }
1312
897
 
1313
- .cirth [type="radio"]:checked[aria-invalid="true"] {
1314
- --cirth-border-color: var(--cirth-form-element-invalid-border-color);
898
+ .cirth [type="checkbox"][role="switch"]:checked:before {
899
+ margin-inline-start: 1.2em;
1315
900
  }
1316
901
 
1317
- .cirth [type="radio"]:checked:active[aria-invalid="true"] {
1318
- --cirth-border-color: var(--cirth-form-element-invalid-border-color);
902
+ .cirth [type="checkbox"][role="switch"][disabled] {
903
+ --cirth-background-color: var(--cirth-border-color);
1319
904
  }
1320
905
 
1321
- .cirth [type="radio"]:checked:focus[aria-invalid="true"] {
1322
- --cirth-border-color: var(--cirth-form-element-invalid-border-color);
906
+ .cirth [type="checkbox"][aria-invalid="false"]:checked, .cirth [type="checkbox"][aria-invalid="false"]:checked:active, .cirth [type="checkbox"][aria-invalid="false"]:checked:focus, .cirth [type="checkbox"][role="switch"][aria-invalid="false"]:checked, .cirth [type="checkbox"][role="switch"][aria-invalid="false"]:checked:active, .cirth [type="checkbox"][role="switch"][aria-invalid="false"]:checked:focus {
907
+ --cirth-background-color: var(--cirth-form-element-valid-border-color);
1323
908
  }
1324
909
 
1325
- .cirth [type="checkbox"][role="switch"]:checked[aria-invalid="true"] {
1326
- --cirth-border-color: var(--cirth-form-element-invalid-border-color);
910
+ .cirth [type="checkbox"]:checked[aria-invalid="true"], .cirth [type="checkbox"]:checked:active[aria-invalid="true"], .cirth [type="checkbox"]:checked:focus[aria-invalid="true"], .cirth [type="checkbox"][role="switch"]:checked[aria-invalid="true"], .cirth [type="checkbox"][role="switch"]:checked:active[aria-invalid="true"], .cirth [type="checkbox"][role="switch"]:checked:focus[aria-invalid="true"] {
911
+ --cirth-background-color: var(--cirth-form-element-invalid-border-color);
1327
912
  }
1328
913
 
1329
- .cirth [type="checkbox"][role="switch"]:checked:active[aria-invalid="true"] {
1330
- --cirth-border-color: var(--cirth-form-element-invalid-border-color);
914
+ .cirth [type="checkbox"][aria-invalid="false"]:checked, .cirth [type="checkbox"][aria-invalid="false"]:checked:active, .cirth [type="checkbox"][aria-invalid="false"]:checked:focus, .cirth [type="radio"][aria-invalid="false"]:checked, .cirth [type="radio"][aria-invalid="false"]:checked:active, .cirth [type="radio"][aria-invalid="false"]:checked:focus, .cirth [type="checkbox"][role="switch"][aria-invalid="false"]:checked, .cirth [type="checkbox"][role="switch"][aria-invalid="false"]:checked:active, .cirth [type="checkbox"][role="switch"][aria-invalid="false"]:checked:focus {
915
+ --cirth-border-color: var(--cirth-form-element-valid-border-color);
1331
916
  }
1332
917
 
1333
- .cirth [type="checkbox"][role="switch"]:checked:focus[aria-invalid="true"] {
918
+ .cirth [type="checkbox"]:checked[aria-invalid="true"], .cirth [type="checkbox"]:checked:active[aria-invalid="true"], .cirth [type="checkbox"]:checked:focus[aria-invalid="true"], .cirth [type="radio"]:checked[aria-invalid="true"], .cirth [type="radio"]:checked:active[aria-invalid="true"], .cirth [type="radio"]:checked:focus[aria-invalid="true"], .cirth [type="checkbox"][role="switch"]:checked[aria-invalid="true"], .cirth [type="checkbox"][role="switch"]:checked:active[aria-invalid="true"], .cirth [type="checkbox"][role="switch"]:checked:focus[aria-invalid="true"] {
1334
919
  --cirth-border-color: var(--cirth-form-element-invalid-border-color);
1335
920
  }
1336
921
 
@@ -1352,7 +937,7 @@
1352
937
  border: 0;
1353
938
  }
1354
939
 
1355
- .cirth input:not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"])):is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
940
+ .cirth input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]):is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
1356
941
  --cirth-icon-position: var(--cirth-space-3);
1357
942
  --cirth-icon-width: var(--cirth-size-4);
1358
943
  padding-right: calc(var(--cirth-icon-width) + var(--cirth-icon-position));
@@ -1362,7 +947,7 @@
1362
947
  background-repeat: no-repeat;
1363
948
  }
1364
949
 
1365
- .cirth input:not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"]))[type="time"] {
950
+ .cirth input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="time"] {
1366
951
  background-image: var(--cirth-icon-time);
1367
952
  }
1368
953
 
@@ -1402,27 +987,7 @@
1402
987
  }
1403
988
 
1404
989
  @-moz-document url-prefix() {
1405
- .cirth [type="date"] {
1406
- padding-right: var(--cirth-form-element-spacing-horizontal);
1407
- background-image: none;
1408
- }
1409
-
1410
- .cirth [type="datetime-local"] {
1411
- padding-right: var(--cirth-form-element-spacing-horizontal);
1412
- background-image: none;
1413
- }
1414
-
1415
- .cirth [type="month"] {
1416
- padding-right: var(--cirth-form-element-spacing-horizontal);
1417
- background-image: none;
1418
- }
1419
-
1420
- .cirth [type="time"] {
1421
- padding-right: var(--cirth-form-element-spacing-horizontal);
1422
- background-image: none;
1423
- }
1424
-
1425
- .cirth [type="week"] {
990
+ .cirth [type="date"], .cirth [type="datetime-local"], .cirth [type="month"], .cirth [type="time"], .cirth [type="week"] {
1426
991
  padding-right: var(--cirth-form-element-spacing-horizontal);
1427
992
  background-image: none;
1428
993
  }
@@ -1453,7 +1018,7 @@
1453
1018
  }
1454
1019
 
1455
1020
  .cirth [type="file"]:focus::file-selector-button {
1456
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
1021
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000),
1457
1022
  0 0 0 var(--cirth-outline-width) var(--cirth-secondary-focus);
1458
1023
  }
1459
1024
 
@@ -1524,12 +1089,7 @@
1524
1089
  margin-top: -.4375rem;
1525
1090
  }
1526
1091
 
1527
- .cirth [type="range"]:active {
1528
- --cirth-range-border-color: var(--cirth-range-active-border-color);
1529
- --cirth-range-thumb-color: var(--cirth-range-thumb-active-color);
1530
- }
1531
-
1532
- .cirth [type="range"]:focus-within {
1092
+ .cirth [type="range"]:active, .cirth [type="range"]:focus-within {
1533
1093
  --cirth-range-border-color: var(--cirth-range-active-border-color);
1534
1094
  --cirth-range-thumb-color: var(--cirth-range-thumb-active-color);
1535
1095
  }
@@ -1546,33 +1106,33 @@
1546
1106
  transform: scale(1.25);
1547
1107
  }
1548
1108
 
1549
- .cirth input:not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"]))[type="search"] {
1109
+ .cirth input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"] {
1550
1110
  background-image: var(--cirth-icon-search);
1551
- background-position: center left calc(var(--cirth-form-element-spacing-horizontal) + .125rem);
1111
+ background-position: center left var(--cirth-form-element-spacing-horizontal);
1552
1112
  background-repeat: no-repeat;
1553
1113
  background-size: 1rem;
1554
- padding-inline-start: calc(var(--cirth-form-element-spacing-horizontal) + 1.75rem);
1114
+ padding-inline-start: calc(var(--cirth-form-element-spacing-horizontal) + var(--cirth-space-6));
1555
1115
  }
1556
1116
 
1557
- .cirth input:not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"]))[type="search"][aria-invalid] {
1558
- background-position: 1.125rem, right .75rem center;
1559
- padding-inline-start: calc(var(--cirth-form-element-spacing-horizontal) + 1.75rem);
1117
+ .cirth input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid] {
1118
+ background-position: center left var(--cirth-form-element-spacing-horizontal), center right var(--cirth-space-3);
1119
+ padding-inline-start: calc(var(--cirth-form-element-spacing-horizontal) + var(--cirth-space-6));
1560
1120
  }
1561
1121
 
1562
- .cirth input:not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"]))[type="search"][aria-invalid="false"] {
1122
+ .cirth input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid="false"] {
1563
1123
  background-image: var(--cirth-icon-search), var(--cirth-icon-valid);
1564
1124
  }
1565
1125
 
1566
- .cirth input:not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"]))[type="search"][aria-invalid="true"] {
1126
+ .cirth input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid="true"] {
1567
1127
  background-image: var(--cirth-icon-search), var(--cirth-icon-invalid);
1568
1128
  }
1569
1129
 
1570
- [dir="rtl"] .cirth :where(input):not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"]))[type="search"] {
1571
- background-position: right 1.125rem center;
1130
+ [dir="rtl"] .cirth :where(input):not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"] {
1131
+ background-position: center right var(--cirth-form-element-spacing-horizontal);
1572
1132
  }
1573
1133
 
1574
- [dir="rtl"] .cirth :where(input):not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"]))[type="search"][aria-invalid] {
1575
- background-position: right 1.125rem center, .75rem;
1134
+ [dir="rtl"] .cirth :where(input):not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid] {
1135
+ background-position: center right var(--cirth-form-element-spacing-horizontal), center left var(--cirth-space-3);
1576
1136
  }
1577
1137
 
1578
1138
  .cirth details {
@@ -1673,7 +1233,7 @@
1673
1233
  .cirth article > header, .cirth article > footer {
1674
1234
  margin-right: calc(var(--cirth-block-spacing-horizontal) * -1);
1675
1235
  margin-left: calc(var(--cirth-block-spacing-horizontal) * -1);
1676
- padding: calc(var(--cirth-block-spacing-vertical) * .66) var(--cirth-block-spacing-horizontal);
1236
+ padding: calc(var(--cirth-block-spacing-vertical) - var(--cirth-space-2)) var(--cirth-block-spacing-horizontal);
1677
1237
  background-color: var(--cirth-card-sectioning-background-color);
1678
1238
  }
1679
1239
 
@@ -1697,254 +1257,124 @@
1697
1257
  width: 100%;
1698
1258
  margin-bottom: var(--cirth-spacing);
1699
1259
  border-radius: var(--cirth-border-radius);
1700
- box-shadow: var(--cirth-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
1260
+ box-shadow: var(--cirth-group-box-shadow, 0 0 0 #0000);
1701
1261
  vertical-align: middle;
1702
1262
  transition: box-shadow var(--cirth-transition);
1703
1263
  display: inline-flex;
1704
1264
  position: relative;
1705
1265
  }
1706
1266
 
1707
- .cirth [role="search"] > *, .cirth [role="search"] select, .cirth [role="group"] > *, .cirth [role="group"] select {
1708
- flex: auto;
1709
- margin-bottom: 0;
1710
- position: relative;
1711
- }
1712
-
1713
- .cirth [role="search"] input:not(:is([type="checkbox"], [type="radio"])) {
1714
- flex: auto;
1715
- margin-bottom: 0;
1716
- position: relative;
1717
- }
1718
-
1719
- .cirth [role="group"] input:not(:is([type="checkbox"], [type="radio"])) {
1267
+ .cirth [role="search"] > *, .cirth [role="search"] input:not([type="checkbox"], [type="radio"]), .cirth [role="search"] select, .cirth [role="group"] > *, .cirth [role="group"] input:not([type="checkbox"], [type="radio"]), .cirth [role="group"] select {
1720
1268
  flex: auto;
1721
1269
  margin-bottom: 0;
1722
1270
  position: relative;
1723
1271
  }
1724
1272
 
1725
- .cirth [role="search"] > :not(:first-child), .cirth [role="search"] select:not(:first-child), .cirth [role="group"] > :not(:first-child), .cirth [role="group"] select:not(:first-child) {
1726
- border-top-left-radius: 0;
1727
- border-bottom-left-radius: 0;
1728
- margin-left: 0;
1729
- }
1730
-
1731
- .cirth [role="search"] input:not(:is([type="checkbox"], [type="radio"])):not(:first-child) {
1732
- border-top-left-radius: 0;
1733
- border-bottom-left-radius: 0;
1734
- margin-left: 0;
1735
- }
1736
-
1737
- .cirth [role="group"] input:not(:is([type="checkbox"], [type="radio"])):not(:first-child) {
1273
+ .cirth [role="search"] > :not(:first-child), .cirth [role="search"] input:not([type="checkbox"], [type="radio"]):not(:first-child), .cirth [role="search"] select:not(:first-child), .cirth [role="group"] > :not(:first-child), .cirth [role="group"] input:not([type="checkbox"], [type="radio"]):not(:first-child), .cirth [role="group"] select:not(:first-child) {
1738
1274
  border-top-left-radius: 0;
1739
1275
  border-bottom-left-radius: 0;
1740
1276
  margin-left: 0;
1741
1277
  }
1742
1278
 
1743
- .cirth [role="search"] > :not(:last-child), .cirth [role="search"] select:not(:last-child), .cirth [role="group"] > :not(:last-child), .cirth [role="group"] select:not(:last-child) {
1279
+ .cirth [role="search"] > :not(:last-child), .cirth [role="search"] input:not([type="checkbox"], [type="radio"]):not(:last-child), .cirth [role="search"] select:not(:last-child), .cirth [role="group"] > :not(:last-child), .cirth [role="group"] input:not([type="checkbox"], [type="radio"]):not(:last-child), .cirth [role="group"] select:not(:last-child) {
1744
1280
  border-top-right-radius: 0;
1745
1281
  border-bottom-right-radius: 0;
1746
1282
  }
1747
1283
 
1748
- .cirth [role="search"] input:not(:is([type="checkbox"], [type="radio"])):not(:last-child) {
1749
- border-top-right-radius: 0;
1750
- border-bottom-right-radius: 0;
1751
- }
1752
-
1753
- .cirth [role="group"] input:not(:is([type="checkbox"], [type="radio"])):not(:last-child) {
1754
- border-top-right-radius: 0;
1755
- border-bottom-right-radius: 0;
1756
- }
1757
-
1758
- .cirth [role="search"] > :focus, .cirth [role="search"] select:focus, .cirth [role="group"] > :focus, .cirth [role="group"] select:focus {
1284
+ .cirth [role="search"] > :focus, .cirth [role="search"] input:not([type="checkbox"], [type="radio"]):focus, .cirth [role="search"] select:focus, .cirth [role="group"] > :focus, .cirth [role="group"] input:not([type="checkbox"], [type="radio"]):focus, .cirth [role="group"] select:focus {
1759
1285
  z-index: 2;
1760
1286
  }
1761
1287
 
1762
- .cirth [role="search"] input:not(:is([type="checkbox"], [type="radio"])):focus {
1763
- z-index: 2;
1764
- }
1765
-
1766
- .cirth [role="group"] input:not(:is([type="checkbox"], [type="radio"])):focus {
1767
- z-index: 2;
1768
- }
1769
-
1770
- .cirth [role="search"] button:not(:first-child), .cirth [role="search"] [role="button"]:not(:first-child), .cirth [role="search"] select:not(:first-child), .cirth [role="group"] button:not(:first-child), .cirth [role="group"] [role="button"]:not(:first-child), .cirth [role="group"] select:not(:first-child) {
1771
- margin-left: calc(var(--cirth-border-width) * -1);
1772
- }
1773
-
1774
- .cirth [role="search"] [type="submit"]:not(:first-child) {
1775
- margin-left: calc(var(--cirth-border-width) * -1);
1776
- }
1777
-
1778
- .cirth [role="search"] [type="reset"]:not(:first-child) {
1779
- margin-left: calc(var(--cirth-border-width) * -1);
1780
- }
1781
-
1782
- .cirth [role="search"] [type="button"]:not(:first-child) {
1783
- margin-left: calc(var(--cirth-border-width) * -1);
1784
- }
1785
-
1786
- .cirth [role="search"] input:not(:is([type="checkbox"], [type="radio"])):not(:first-child) {
1787
- margin-left: calc(var(--cirth-border-width) * -1);
1788
- }
1789
-
1790
- .cirth [role="group"] [type="submit"]:not(:first-child) {
1791
- margin-left: calc(var(--cirth-border-width) * -1);
1792
- }
1793
-
1794
- .cirth [role="group"] [type="reset"]:not(:first-child) {
1288
+ .cirth [role="search"] button:not(:first-child), .cirth [role="search"] [type="submit"]:not(:first-child), .cirth [role="search"] [type="reset"]:not(:first-child), .cirth [role="search"] [type="button"]:not(:first-child), .cirth [role="search"] [role="button"]:not(:first-child), .cirth [role="search"] input:not([type="checkbox"], [type="radio"]):not(:first-child), .cirth [role="search"] select:not(:first-child), .cirth [role="group"] button:not(:first-child), .cirth [role="group"] [type="submit"]:not(:first-child), .cirth [role="group"] [type="reset"]:not(:first-child), .cirth [role="group"] [type="button"]:not(:first-child), .cirth [role="group"] [role="button"]:not(:first-child), .cirth [role="group"] input:not([type="checkbox"], [type="radio"]):not(:first-child), .cirth [role="group"] select:not(:first-child) {
1795
1289
  margin-left: calc(var(--cirth-border-width) * -1);
1796
1290
  }
1797
1291
 
1798
- .cirth [role="group"] [type="button"]:not(:first-child) {
1799
- margin-left: calc(var(--cirth-border-width) * -1);
1800
- }
1801
-
1802
- .cirth [role="group"] input:not(:is([type="checkbox"], [type="radio"])):not(:first-child) {
1803
- margin-left: calc(var(--cirth-border-width) * -1);
1804
- }
1805
-
1806
- .cirth [role="search"] button, .cirth [role="search"] [role="button"], .cirth [role="group"] button, .cirth [role="group"] [role="button"] {
1807
- width: auto;
1808
- }
1809
-
1810
- .cirth [role="search"] [type="submit"] {
1811
- width: auto;
1812
- }
1813
-
1814
- .cirth [role="search"] [type="reset"] {
1815
- width: auto;
1816
- }
1817
-
1818
- .cirth [role="search"] [type="button"] {
1819
- width: auto;
1820
- }
1821
-
1822
- .cirth [role="group"] [type="submit"] {
1823
- width: auto;
1824
- }
1825
-
1826
- .cirth [role="group"] [type="reset"] {
1827
- width: auto;
1828
- }
1829
-
1830
- .cirth [role="group"] [type="button"] {
1292
+ .cirth [role="search"] button, .cirth [role="search"] [type="submit"], .cirth [role="search"] [type="reset"], .cirth [role="search"] [type="button"], .cirth [role="search"] [role="button"], .cirth [role="group"] button, .cirth [role="group"] [type="submit"], .cirth [role="group"] [type="reset"], .cirth [role="group"] [type="button"], .cirth [role="group"] [role="button"] {
1831
1293
  width: auto;
1832
1294
  }
1833
1295
 
1834
1296
  @supports selector(:has(*)) {
1835
- .cirth [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
1297
+ :is(.cirth [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus), .cirth [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus)) {
1836
1298
  --cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-button);
1837
1299
  }
1838
1300
 
1839
- .cirth [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
1840
- --cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-button);
1841
- }
1842
-
1843
- .cirth [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not(:is([type="checkbox"], [type="radio"])) {
1844
- border-color: rgba(0, 0, 0, 0);
1301
+ .cirth [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"]) {
1302
+ border-color: #0000;
1845
1303
  }
1846
1304
 
1847
1305
  .cirth [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select {
1848
- border-color: rgba(0, 0, 0, 0);
1306
+ border-color: #0000;
1849
1307
  }
1850
1308
 
1851
- .cirth [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not(:is([type="checkbox"], [type="radio"])) {
1852
- border-color: rgba(0, 0, 0, 0);
1309
+ .cirth [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"]) {
1310
+ border-color: #0000;
1853
1311
  }
1854
1312
 
1855
1313
  .cirth [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select {
1856
- border-color: rgba(0, 0, 0, 0);
1857
- }
1858
-
1859
- .cirth [role="search"]:has(input:not(:is([type="submit"], [type="button"])):focus, select:focus) {
1860
- --cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-input);
1314
+ border-color: #0000;
1861
1315
  }
1862
1316
 
1863
- .cirth [role="group"]:has(input:not(:is([type="submit"], [type="button"])):focus, select:focus) {
1317
+ :is(.cirth [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus), .cirth [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus)) {
1864
1318
  --cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-input);
1865
1319
  }
1866
1320
 
1867
- .cirth [role="search"]:has(input:not(:is([type="submit"], [type="button"])):focus, select:focus) button {
1321
+ .cirth [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button {
1868
1322
  --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1869
1323
  var(--cirth-primary-border);
1870
1324
  --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1871
1325
  var(--cirth-primary-hover-border);
1872
1326
  }
1873
1327
 
1874
- .cirth [role="search"]:has(input:not(:is([type="submit"], [type="button"])):focus, select:focus) [type="submit"] {
1328
+ .cirth [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"] {
1875
1329
  --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1876
1330
  var(--cirth-primary-border);
1877
1331
  --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1878
1332
  var(--cirth-primary-hover-border);
1879
1333
  }
1880
1334
 
1881
- .cirth [role="search"]:has(input:not(:is([type="submit"], [type="button"])):focus, select:focus) [type="button"] {
1335
+ .cirth [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"] {
1882
1336
  --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1883
1337
  var(--cirth-primary-border);
1884
1338
  --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1885
1339
  var(--cirth-primary-hover-border);
1886
1340
  }
1887
1341
 
1888
- .cirth [role="search"]:has(input:not(:is([type="submit"], [type="button"])):focus, select:focus) [role="button"] {
1342
+ .cirth [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"] {
1889
1343
  --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1890
1344
  var(--cirth-primary-border);
1891
1345
  --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1892
1346
  var(--cirth-primary-hover-border);
1893
1347
  }
1894
1348
 
1895
- .cirth [role="group"]:has(input:not(:is([type="submit"], [type="button"])):focus, select:focus) button {
1349
+ .cirth [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button {
1896
1350
  --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1897
1351
  var(--cirth-primary-border);
1898
1352
  --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1899
1353
  var(--cirth-primary-hover-border);
1900
1354
  }
1901
1355
 
1902
- .cirth [role="group"]:has(input:not(:is([type="submit"], [type="button"])):focus, select:focus) [type="submit"] {
1356
+ .cirth [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"] {
1903
1357
  --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1904
1358
  var(--cirth-primary-border);
1905
1359
  --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1906
1360
  var(--cirth-primary-hover-border);
1907
1361
  }
1908
1362
 
1909
- .cirth [role="group"]:has(input:not(:is([type="submit"], [type="button"])):focus, select:focus) [type="button"] {
1363
+ .cirth [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"] {
1910
1364
  --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1911
1365
  var(--cirth-primary-border);
1912
1366
  --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1913
1367
  var(--cirth-primary-hover-border);
1914
1368
  }
1915
1369
 
1916
- .cirth [role="group"]:has(input:not(:is([type="submit"], [type="button"])):focus, select:focus) [role="button"] {
1370
+ .cirth [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"] {
1917
1371
  --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1918
1372
  var(--cirth-primary-border);
1919
1373
  --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1920
1374
  var(--cirth-primary-hover-border);
1921
1375
  }
1922
1376
 
1923
- .cirth [role="search"] button:focus, .cirth [role="search"] [role="button"]:focus, .cirth [role="group"] button:focus, .cirth [role="group"] [role="button"]:focus {
1924
- box-shadow: none;
1925
- }
1926
-
1927
- .cirth [role="search"] [type="submit"]:focus {
1928
- box-shadow: none;
1929
- }
1930
-
1931
- .cirth [role="search"] [type="reset"]:focus {
1932
- box-shadow: none;
1933
- }
1934
-
1935
- .cirth [role="search"] [type="button"]:focus {
1936
- box-shadow: none;
1937
- }
1938
-
1939
- .cirth [role="group"] [type="submit"]:focus {
1940
- box-shadow: none;
1941
- }
1942
-
1943
- .cirth [role="group"] [type="reset"]:focus {
1944
- box-shadow: none;
1945
- }
1946
-
1947
- .cirth [role="group"] [type="button"]:focus {
1377
+ .cirth [role="search"] button:focus, .cirth [role="search"] [type="submit"]:focus, .cirth [role="search"] [type="reset"]:focus, .cirth [role="search"] [type="button"]:focus, .cirth [role="search"] [role="button"]:focus, .cirth [role="group"] button:focus, .cirth [role="group"] [type="submit"]:focus, .cirth [role="group"] [type="reset"]:focus, .cirth [role="group"] [type="button"]:focus, .cirth [role="group"] [role="button"]:focus {
1948
1378
  box-shadow: none;
1949
1379
  }
1950
1380
  }
@@ -1959,11 +1389,11 @@
1959
1389
  border-bottom-right-radius: var(--cirth-radius-pill);
1960
1390
  }
1961
1391
 
1962
- .cirth [aria-busy="true"]:not(:is(input, select, textarea, html, form)) {
1392
+ .cirth [aria-busy="true"]:not(input, select, textarea, html, form) {
1963
1393
  white-space: nowrap;
1964
1394
  }
1965
1395
 
1966
- .cirth [aria-busy="true"]:not(:is(input, select, textarea, html, form)):before {
1396
+ .cirth [aria-busy="true"]:not(input, select, textarea, html, form):before {
1967
1397
  background-image: var(--cirth-icon-loading);
1968
1398
  content: "";
1969
1399
  vertical-align: -.125em;
@@ -1974,27 +1404,15 @@
1974
1404
  display: inline-block;
1975
1405
  }
1976
1406
 
1977
- .cirth [aria-busy="true"]:not(:is(input, select, textarea, html, form)):not(:empty):before {
1407
+ .cirth [aria-busy="true"]:not(input, select, textarea, html, form):not(:empty):before {
1978
1408
  margin-inline-end: calc(var(--cirth-spacing) * .5);
1979
1409
  }
1980
1410
 
1981
- .cirth [aria-busy="true"]:not(:is(input, select, textarea, html, form)):empty {
1411
+ .cirth [aria-busy="true"]:not(input, select, textarea, html, form):empty {
1982
1412
  text-align: center;
1983
1413
  }
1984
1414
 
1985
- .cirth button[aria-busy="true"], .cirth [role="button"][aria-busy="true"], .cirth a[aria-busy="true"] {
1986
- pointer-events: none;
1987
- }
1988
-
1989
- .cirth [type="submit"][aria-busy="true"] {
1990
- pointer-events: none;
1991
- }
1992
-
1993
- .cirth [type="button"][aria-busy="true"] {
1994
- pointer-events: none;
1995
- }
1996
-
1997
- .cirth [type="reset"][aria-busy="true"] {
1415
+ .cirth button[aria-busy="true"], .cirth [type="submit"][aria-busy="true"], .cirth [type="button"][aria-busy="true"], .cirth [type="reset"][aria-busy="true"], .cirth [role="button"][aria-busy="true"], .cirth a[aria-busy="true"] {
1998
1416
  pointer-events: none;
1999
1417
  }
2000
1418
 
@@ -2028,13 +1446,13 @@
2028
1446
  overflow: auto;
2029
1447
  }
2030
1448
 
2031
- @media (width >= 576px) {
1449
+ @media (min-width: 576px) {
2032
1450
  .cirth dialog > article {
2033
1451
  max-width: 510px;
2034
1452
  }
2035
1453
  }
2036
1454
 
2037
- @media (width >= 768px) {
1455
+ @media (min-width: 768px) {
2038
1456
  .cirth dialog > article {
2039
1457
  max-width: 700px;
2040
1458
  }
@@ -2073,7 +1491,7 @@
2073
1491
  background-size: auto var(--cirth-size-4);
2074
1492
  opacity: .5;
2075
1493
  transition: opacity var(--cirth-transition);
2076
- background-color: rgba(0, 0, 0, 0);
1494
+ background-color: #0000;
2077
1495
  background-repeat: no-repeat;
2078
1496
  border: none;
2079
1497
  margin-left: auto;
@@ -2134,23 +1552,7 @@
2134
1552
  text-decoration: none;
2135
1553
  }
2136
1554
 
2137
- .cirth nav li button, .cirth nav li [role="button"], .cirth nav li select {
2138
- height: auto;
2139
- margin-right: inherit;
2140
- margin-bottom: 0;
2141
- margin-left: inherit;
2142
- padding: calc(var(--cirth-nav-link-spacing-vertical) - var(--cirth-border-width) * 2) var(--cirth-nav-link-spacing-horizontal);
2143
- }
2144
-
2145
- .cirth nav li [type="button"] {
2146
- height: auto;
2147
- margin-right: inherit;
2148
- margin-bottom: 0;
2149
- margin-left: inherit;
2150
- padding: calc(var(--cirth-nav-link-spacing-vertical) - var(--cirth-border-width) * 2) var(--cirth-nav-link-spacing-horizontal);
2151
- }
2152
-
2153
- .cirth nav li input:not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"])) {
1555
+ .cirth nav li button, .cirth nav li [role="button"], .cirth nav li [type="button"], .cirth nav li input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), .cirth nav li select {
2154
1556
  height: auto;
2155
1557
  margin-right: inherit;
2156
1558
  margin-bottom: 0;
@@ -2187,7 +1589,7 @@
2187
1589
  .cirth nav[aria-label="breadcrumb"] a[aria-current]:not([aria-current="false"]) {
2188
1590
  color: inherit;
2189
1591
  pointer-events: none;
2190
- background-color: rgba(0, 0, 0, 0);
1592
+ background-color: #0000;
2191
1593
  text-decoration: none;
2192
1594
  }
2193
1595
 
@@ -2217,10 +1619,10 @@
2217
1619
  width: 100%;
2218
1620
  height: var(--cirth-size-2);
2219
1621
  margin-bottom: calc(var(--cirth-spacing) * .5);
1622
+ border: var(--cirth-border-width-1) solid var(--cirth-progress-border-color);
2220
1623
  border-radius: var(--cirth-border-radius);
2221
1624
  background-color: var(--cirth-progress-background-color);
2222
1625
  color: var(--cirth-progress-color);
2223
- border: 0;
2224
1626
  display: inline-block;
2225
1627
  overflow: hidden;
2226
1628
  }
@@ -2246,11 +1648,11 @@
2246
1648
  }
2247
1649
 
2248
1650
  .cirth progress:indeterminate[value]::-webkit-progress-value {
2249
- background-color: rgba(0, 0, 0, 0);
1651
+ background-color: #0000;
2250
1652
  }
2251
1653
 
2252
1654
  .cirth progress:indeterminate::-moz-progress-bar {
2253
- background-color: rgba(0, 0, 0, 0);
1655
+ background-color: #0000;
2254
1656
  }
2255
1657
 
2256
1658
  [dir="rtl"] .cirth progress:indeterminate {
@@ -2272,7 +1674,7 @@
2272
1674
  position: relative;
2273
1675
  }
2274
1676
 
2275
- .cirth [data-tooltip]:not(:is(a, button, input, [role="button"])) {
1677
+ .cirth [data-tooltip]:not(a, button, input, [role="button"]) {
2276
1678
  border-bottom: var(--cirth-border-width-1) dotted;
2277
1679
  cursor: help;
2278
1680
  text-decoration: none;
@@ -2304,10 +1706,10 @@
2304
1706
  .cirth [data-tooltip][data-placement="top"]:after, .cirth [data-tooltip]:after {
2305
1707
  content: "";
2306
1708
  color: var(--cirth-tooltip-background-color);
2307
- background-color: rgba(0, 0, 0, 0);
1709
+ background-color: #0000;
2308
1710
  border-top: .3rem solid;
2309
- border-left: .3rem solid rgba(0, 0, 0, 0);
2310
- border-right: .3rem solid rgba(0, 0, 0, 0);
1711
+ border-left: .3rem solid #0000;
1712
+ border-right: .3rem solid #0000;
2311
1713
  border-radius: 0;
2312
1714
  padding: 0;
2313
1715
  transform: translate(-50%);
@@ -2320,7 +1722,7 @@
2320
1722
  }
2321
1723
 
2322
1724
  .cirth [data-tooltip][data-placement="bottom"]:after {
2323
- border: .3rem solid rgba(0, 0, 0, 0);
1725
+ border: .3rem solid #0000;
2324
1726
  border-bottom-color: currentColor;
2325
1727
  transform: translate(-50%, -.3rem);
2326
1728
  }
@@ -2331,7 +1733,7 @@
2331
1733
  }
2332
1734
 
2333
1735
  .cirth [data-tooltip][data-placement="left"]:after {
2334
- border: .3rem solid rgba(0, 0, 0, 0);
1736
+ border: .3rem solid #0000;
2335
1737
  border-left-color: currentColor;
2336
1738
  transform: translate(.3rem, -50%);
2337
1739
  }
@@ -2342,7 +1744,7 @@
2342
1744
  }
2343
1745
 
2344
1746
  .cirth [data-tooltip][data-placement="right"]:after {
2345
- border: .3rem solid rgba(0, 0, 0, 0);
1747
+ border: .3rem solid #0000;
2346
1748
  border-right-color: currentColor;
2347
1749
  transform: translate(-.3rem, -50%);
2348
1750
  }
@@ -2464,14 +1866,13 @@
2464
1866
  --cirth-color-white: #fff;
2465
1867
  --cirth-color-transparent: transparent;
2466
1868
  --cirth-color-current: currentColor;
2467
- --cirth-font-family-ui: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial,
2468
- "Helvetica Neue", sans-serif;
2469
- --cirth-font-family-sans: var(--cirth-font-family-ui), "Apple Color Emoji", "Segoe UI Emoji",
2470
- "Segoe UI Symbol", "Noto Color Emoji";
1869
+ --cirth-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
1870
+ --cirth-font-family-sans: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial,
1871
+ "Helvetica Neue", sans-serif, var(--cirth-font-family-emoji);
2471
1872
  --cirth-font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif;
2472
1873
  --cirth-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
2473
- monospace;
2474
- --cirth-font-family-display: var(--cirth-font-family-sans);
1874
+ monospace, var(--cirth-font-family-emoji);
1875
+ --cirth-font-family-display: var(--cirth-font-family-serif);
2475
1876
  --cirth-font-size-xs: .75rem;
2476
1877
  --cirth-font-size-sm: .875rem;
2477
1878
  --cirth-font-size-md: 1rem;
@@ -2487,15 +1888,14 @@
2487
1888
  --cirth-font-weight-medium: 500;
2488
1889
  --cirth-font-weight-semibold: 600;
2489
1890
  --cirth-font-weight-bold: 700;
1891
+ --cirth-letter-spacing-tight: -.02em;
1892
+ --cirth-letter-spacing-snug: -.01em;
2490
1893
  --cirth-line-height-none: 1;
2491
1894
  --cirth-line-height-tight: 1.125;
2492
1895
  --cirth-line-height-snug: 1.25;
2493
1896
  --cirth-line-height-normal: 1.5;
2494
1897
  --cirth-line-height-relaxed: 1.625;
2495
1898
  --cirth-line-height-loose: 2;
2496
- --cirth-letter-spacing-tight: 0;
2497
- --cirth-letter-spacing-normal: 0;
2498
- --cirth-letter-spacing-wide: .025em;
2499
1899
  --cirth-space-0: 0;
2500
1900
  --cirth-space-1: .25rem;
2501
1901
  --cirth-space-2: .5rem;
@@ -2537,17 +1937,6 @@
2537
1937
  --cirth-outline-width-1: .0625rem;
2538
1938
  --cirth-outline-width-2: .125rem;
2539
1939
  --cirth-outline-width-4: .25rem;
2540
- --cirth-shadow-none: none;
2541
- --cirth-shadow-xs: 0 .0625rem .125rem rgba(0, 0, 0, .05);
2542
- --cirth-shadow-sm: 0 .0625rem .1875rem rgba(0, 0, 0, .1),
2543
- 0 .0625rem .125rem rgba(0, 0, 0, .06);
2544
- --cirth-shadow-md: 0 .25rem .375rem rgba(0, 0, 0, .07),
2545
- 0 .125rem .25rem rgba(0, 0, 0, .06);
2546
- --cirth-shadow-lg: 0 .625rem .9375rem rgba(0, 0, 0, .1),
2547
- 0 .25rem .375rem rgba(0, 0, 0, .05);
2548
- --cirth-shadow-xl: 0 1.25rem 1.5625rem rgba(0, 0, 0, .1),
2549
- 0 .625rem .625rem rgba(0, 0, 0, .04);
2550
- --cirth-shadow-inner: inset 0 .125rem .25rem rgba(0, 0, 0, .06);
2551
1940
  --cirth-duration-instant: 0s;
2552
1941
  --cirth-duration-fast: .1s;
2553
1942
  --cirth-duration-normal: .2s;
@@ -2566,28 +1955,28 @@
2566
1955
  --cirth-z-index-modal-backdrop: 1040;
2567
1956
  --cirth-z-index-modal: 1050;
2568
1957
  --cirth-z-index-tooltip: 1070;
2569
- --cirth-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
2570
- --cirth-font-family-sans-serif: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial,
2571
- "Helvetica Neue", sans-serif, var(--cirth-font-family-emoji);
2572
- --cirth-font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
2573
- monospace, var(--cirth-font-family-emoji);
2574
- --cirth-font-family: var(--cirth-font-family-sans-serif);
1958
+ --cirth-font-family: var(--cirth-font-family-sans);
2575
1959
  --cirth-line-height: var(--cirth-line-height-normal);
2576
1960
  --cirth-font-weight: var(--cirth-font-weight-regular);
2577
1961
  --cirth-font-size: 100%;
2578
- --cirth-text-underline-offset: .1rem;
2579
- --cirth-border-radius: var(--cirth-radius-sm);
1962
+ --cirth-text-underline-offset: .15em;
1963
+ --cirth-border-radius: var(--cirth-radius-lg);
1964
+ --cirth-card-border-radius: calc(var(--cirth-border-radius) * 1.5);
1965
+ --cirth-checkbox-border-radius: min(var(--cirth-border-radius),
1966
+ var(--cirth-radius-sm));
1967
+ --cirth-code-border-radius: min(var(--cirth-border-radius),
1968
+ var(--cirth-radius-sm));
2580
1969
  --cirth-border-width: var(--cirth-border-width-1);
2581
1970
  --cirth-outline-width: var(--cirth-outline-width-2);
2582
- --cirth-transition: var(--cirth-duration-normal) var(--cirth-ease-in-out);
1971
+ --cirth-transition: var(--cirth-duration-normal) var(--cirth-ease-out);
2583
1972
  --cirth-spacing: var(--cirth-space-4);
2584
1973
  --cirth-typography-spacing-vertical: var(--cirth-space-4);
2585
1974
  --cirth-block-spacing-vertical: var(--cirth-spacing);
2586
1975
  --cirth-block-spacing-horizontal: var(--cirth-spacing);
2587
- --cirth-form-element-spacing-vertical: var(--cirth-space-3);
1976
+ --cirth-form-element-spacing-vertical: var(--cirth-space-2);
2588
1977
  --cirth-form-element-spacing-horizontal: var(--cirth-space-4);
2589
1978
  --cirth-form-label-font-weight: var(--cirth-font-weight);
2590
- --cirth-group-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
1979
+ --cirth-group-box-shadow: 0 0 0 #0000;
2591
1980
  --cirth-group-box-shadow-focus-with-button: 0 0 0 var(--cirth-outline-width)
2592
1981
  var(--cirth-primary-focus);
2593
1982
  --cirth-group-box-shadow-focus-with-input: 0 0 0 var(--cirth-border-width-1)
@@ -2600,42 +1989,12 @@
2600
1989
  --cirth-nav-breadcrumb-divider: ">";
2601
1990
  --cirth-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
2602
1991
  --cirth-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
2603
- --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
2604
- --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
2605
- --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
2606
- --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
2607
- --cirth-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
2608
- --cirth-icon-loading: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(136, 145, 164)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
2609
- }
2610
-
2611
- @media (width >= 576px) {
2612
- .cirth {
2613
- --cirth-font-size: 106.25%;
2614
- }
2615
- }
2616
-
2617
- @media (width >= 768px) {
2618
- .cirth {
2619
- --cirth-font-size: 112.5%;
2620
- }
2621
- }
2622
-
2623
- @media (width >= 1024px) {
2624
- .cirth {
2625
- --cirth-font-size: 118.75%;
2626
- }
2627
- }
2628
-
2629
- @media (width >= 1280px) {
2630
- .cirth {
2631
- --cirth-font-size: 125%;
2632
- }
2633
- }
2634
-
2635
- @media (width >= 1536px) {
2636
- .cirth {
2637
- --cirth-font-size: 131.25%;
2638
- }
1992
+ --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
1993
+ --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
1994
+ --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
1995
+ --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
1996
+ --cirth-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
1997
+ --cirth-icon-loading: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(136, 146, 164)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
2639
1998
  }
2640
1999
 
2641
2000
  .cirth a {
@@ -2646,44 +2005,57 @@
2646
2005
  --cirth-font-size: .875em;
2647
2006
  }
2648
2007
 
2649
- .cirth h1, .cirth h2, .cirth h3, .cirth h4, .cirth h5, .cirth h6 {
2008
+ .cirth h1, .cirth h2, .cirth h3 {
2650
2009
  --cirth-font-weight: var(--cirth-font-weight-bold);
2651
2010
  }
2652
2011
 
2012
+ .cirth h4, .cirth h5, .cirth h6 {
2013
+ --cirth-font-weight: var(--cirth-font-weight-semibold);
2014
+ }
2015
+
2653
2016
  .cirth h1 {
2654
- --cirth-font-size: var(--cirth-font-size-5xl);
2017
+ --cirth-font-size: clamp(2rem, 1.55rem + 1.8vw, 2.75rem);
2655
2018
  --cirth-line-height: var(--cirth-line-height-tight);
2019
+ --cirth-letter-spacing: var(--cirth-letter-spacing-tight);
2656
2020
  --cirth-typography-spacing-top: var(--cirth-space-12);
2657
2021
  }
2658
2022
 
2659
2023
  .cirth h2 {
2660
- --cirth-font-size: 1.75rem;
2024
+ --cirth-font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem);
2661
2025
  --cirth-line-height: 1.15;
2662
- --cirth-typography-spacing-top: 2.625rem;
2026
+ --cirth-letter-spacing: var(--cirth-letter-spacing-tight);
2027
+ --cirth-typography-spacing-top: var(--cirth-space-12);
2663
2028
  }
2664
2029
 
2665
2030
  .cirth h3 {
2666
- --cirth-font-size: 1.5rem;
2667
- --cirth-line-height: 1.175;
2668
- --cirth-typography-spacing-top: 2.25rem;
2031
+ --cirth-font-size: clamp(1.25rem, 1.15rem + .5vw, 1.5rem);
2032
+ --cirth-line-height: 1.2;
2033
+ --cirth-letter-spacing: var(--cirth-letter-spacing-snug);
2034
+ --cirth-typography-spacing-top: var(--cirth-space-10);
2669
2035
  }
2670
2036
 
2671
2037
  .cirth h4 {
2672
2038
  --cirth-font-size: var(--cirth-font-size-xl);
2673
- --cirth-line-height: 1.2;
2674
- --cirth-typography-spacing-top: 1.874rem;
2039
+ --cirth-line-height: var(--cirth-line-height-snug);
2040
+ --cirth-typography-spacing-top: var(--cirth-space-8);
2675
2041
  }
2676
2042
 
2677
2043
  .cirth h5 {
2678
2044
  --cirth-font-size: var(--cirth-font-size-lg);
2679
- --cirth-line-height: 1.225;
2680
- --cirth-typography-spacing-top: 1.6875rem;
2045
+ --cirth-line-height: var(--cirth-line-height-snug);
2046
+ --cirth-typography-spacing-top: var(--cirth-space-8);
2681
2047
  }
2682
2048
 
2683
2049
  .cirth h6 {
2684
2050
  --cirth-font-size: var(--cirth-font-size-md);
2685
2051
  --cirth-line-height: var(--cirth-line-height-snug);
2686
- --cirth-typography-spacing-top: var(--cirth-space-6);
2052
+ --cirth-typography-spacing-top: var(--cirth-space-8);
2053
+ }
2054
+
2055
+ .cirth article {
2056
+ --cirth-border-radius: var(--cirth-card-border-radius);
2057
+ --cirth-block-spacing-vertical: var(--cirth-space-6);
2058
+ --cirth-block-spacing-horizontal: var(--cirth-space-6);
2687
2059
  }
2688
2060
 
2689
2061
  .cirth thead th, .cirth thead td, .cirth tfoot th, .cirth tfoot td {
@@ -2692,33 +2064,44 @@
2692
2064
  }
2693
2065
 
2694
2066
  .cirth pre, .cirth code, .cirth kbd, .cirth samp {
2695
- --cirth-font-family: var(--cirth-font-family-monospace);
2067
+ --cirth-font-family: var(--cirth-font-family-mono);
2696
2068
  }
2697
2069
 
2698
- .cirth kbd {
2699
- --cirth-font-weight: bolder;
2070
+ .cirth code, .cirth kbd, .cirth samp {
2071
+ --cirth-border-radius: var(--cirth-code-border-radius);
2700
2072
  }
2701
2073
 
2702
- .cirth input:not(:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"])) {
2703
- --cirth-outline-width: var(--cirth-outline-width-1);
2074
+ .cirth kbd {
2075
+ --cirth-font-weight: bolder;
2704
2076
  }
2705
2077
 
2706
- .cirth :where(select, textarea) {
2078
+ .cirth input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), .cirth :where(select, textarea) {
2707
2079
  --cirth-outline-width: var(--cirth-outline-width-1);
2080
+ --cirth-line-height: var(--cirth-line-height-relaxed);
2708
2081
  }
2709
2082
 
2710
2083
  .cirth [type="search"] {
2711
2084
  --cirth-border-radius: var(--cirth-radius-pill);
2712
2085
  }
2713
2086
 
2714
- .cirth [type="checkbox"] {
2715
- --cirth-border-width: var(--cirth-border-width-2);
2087
+ .cirth button, .cirth [type="submit"], .cirth [type="reset"], .cirth [type="button"], .cirth [role="button"] {
2088
+ --cirth-font-weight: var(--cirth-font-weight-semibold);
2089
+ --cirth-line-height: var(--cirth-line-height-relaxed);
2090
+ --cirth-form-element-spacing-horizontal: var(--cirth-space-5);
2716
2091
  }
2717
2092
 
2718
- .cirth [type="radio"] {
2093
+ .cirth [type="file"] {
2094
+ --cirth-line-height: var(--cirth-line-height-relaxed);
2095
+ }
2096
+
2097
+ .cirth [type="checkbox"], .cirth [type="radio"] {
2719
2098
  --cirth-border-width: var(--cirth-border-width-2);
2720
2099
  }
2721
2100
 
2101
+ .cirth [type="checkbox"] {
2102
+ --cirth-border-radius: var(--cirth-checkbox-border-radius);
2103
+ }
2104
+
2722
2105
  .cirth [type="checkbox"][role="switch"] {
2723
2106
  --cirth-border-width: .1875rem;
2724
2107
  }
@@ -2727,31 +2110,11 @@
2727
2110
  --cirth-border-radius: var(--cirth-radius-pill);
2728
2111
  }
2729
2112
 
2730
- .cirth [role="search"] button, .cirth [role="search"] [role="button"], .cirth [role="group"] button, .cirth [role="group"] [role="button"] {
2731
- --cirth-form-element-spacing-horizontal: var(--cirth-space-8);
2732
- }
2733
-
2734
- .cirth [role="search"] [type="submit"] {
2735
- --cirth-form-element-spacing-horizontal: var(--cirth-space-8);
2736
- }
2737
-
2738
- .cirth [role="search"] [type="button"] {
2739
- --cirth-form-element-spacing-horizontal: var(--cirth-space-8);
2740
- }
2741
-
2742
- .cirth [role="group"] [type="submit"] {
2743
- --cirth-form-element-spacing-horizontal: var(--cirth-space-8);
2744
- }
2745
-
2746
- .cirth [role="group"] [type="button"] {
2113
+ .cirth [role="search"] button, .cirth [role="search"] [type="submit"], .cirth [role="search"] [type="button"], .cirth [role="search"] [role="button"], .cirth [role="group"] button, .cirth [role="group"] [type="submit"], .cirth [role="group"] [type="button"], .cirth [role="group"] [role="button"] {
2747
2114
  --cirth-form-element-spacing-horizontal: var(--cirth-space-8);
2748
2115
  }
2749
2116
 
2750
- .cirth details summary[role="button"]:after {
2751
- filter: brightness(0) invert();
2752
- }
2753
-
2754
- .cirth [aria-busy="true"]:not(:is(input, select, textarea)):is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):before {
2117
+ .cirth details summary[role="button"]:after, .cirth [aria-busy="true"]:not(input, select, textarea):is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):before {
2755
2118
  filter: brightness(0) invert();
2756
2119
  }
2757
2120
 
@@ -2759,83 +2122,83 @@
2759
2122
  --lightningcss-light: initial;
2760
2123
  --lightningcss-dark: ;
2761
2124
  color-scheme: light;
2762
- --cirth-background-color: #fff;
2763
- --cirth-color: #373c44;
2764
- --cirth-text-selection-color: rgba(2, 154, 232, .25);
2765
- --cirth-muted-color: #646b79;
2766
- --cirth-muted-border-color: #e7eaf0;
2767
- --cirth-primary: #0172ad;
2768
- --cirth-primary-background: #0172ad;
2125
+ --cirth-background-color: oklch(100% 0 0);
2126
+ --cirth-color: oklch(35.3% .021 264);
2127
+ --cirth-text-selection-color: oklch(65.7% .121 69.35 / .25);
2128
+ --cirth-muted-color: oklch(52.7% .032 264);
2129
+ --cirth-muted-border-color: oklch(93.85% .003 264);
2130
+ --cirth-primary: oklch(52.7% .097 69.35);
2131
+ --cirth-primary-background: oklch(52.7% .097 69.35);
2769
2132
  --cirth-primary-border: var(--cirth-primary-background);
2770
- --cirth-primary-underline: rgba(1, 114, 173, .5);
2771
- --cirth-primary-hover: #015887;
2772
- --cirth-primary-hover-background: #02659a;
2133
+ --cirth-primary-underline: oklch(52.7% .097 69.35 / .5);
2134
+ --cirth-primary-hover: oklch(44% .081 69.35);
2135
+ --cirth-primary-hover-background: oklch(48.3% .089 69.35);
2773
2136
  --cirth-primary-hover-border: var(--cirth-primary-hover-background);
2774
2137
  --cirth-primary-hover-underline: var(--cirth-primary-hover);
2775
- --cirth-primary-focus: rgba(2, 154, 232, .5);
2776
- --cirth-primary-inverse: #fff;
2777
- --cirth-secondary: #5d6b89;
2778
- --cirth-secondary-background: #525f7a;
2138
+ --cirth-primary-focus: oklch(52.7% .097 69.35 / .75);
2139
+ --cirth-primary-inverse: oklch(100% 0 0);
2140
+ --cirth-secondary: oklch(52.7% .032 264);
2141
+ --cirth-secondary-background: oklch(48.3% .03 264);
2779
2142
  --cirth-secondary-border: var(--cirth-secondary-background);
2780
- --cirth-secondary-underline: rgba(93, 107, 137, .5);
2781
- --cirth-secondary-hover: #48536b;
2782
- --cirth-secondary-hover-background: #48536b;
2143
+ --cirth-secondary-underline: oklch(52.7% .032 264 / .5);
2144
+ --cirth-secondary-hover: oklch(44% .028 264);
2145
+ --cirth-secondary-hover-background: oklch(44% .028 264);
2783
2146
  --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
2784
2147
  --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
2785
- --cirth-secondary-focus: rgba(93, 107, 137, .25);
2786
- --cirth-secondary-inverse: #fff;
2787
- --cirth-contrast: #181c25;
2788
- --cirth-contrast-background: #181c25;
2148
+ --cirth-secondary-focus: oklch(48.3% .03 264 / .7);
2149
+ --cirth-secondary-inverse: oklch(100% 0 0);
2150
+ --cirth-contrast: oklch(22.3% .006 264);
2151
+ --cirth-contrast-background: oklch(22.3% .006 264);
2789
2152
  --cirth-contrast-border: var(--cirth-contrast-background);
2790
- --cirth-contrast-underline: rgba(24, 28, 37, .5);
2791
- --cirth-contrast-hover: #000;
2792
- --cirth-contrast-hover-background: #000;
2153
+ --cirth-contrast-underline: oklch(22.3% .006 264 / .5);
2154
+ --cirth-contrast-hover: oklch(0% 0 0);
2155
+ --cirth-contrast-hover-background: oklch(0% 0 0);
2793
2156
  --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
2794
2157
  --cirth-contrast-hover-underline: var(--cirth-secondary-hover);
2795
- --cirth-contrast-focus: rgba(93, 107, 137, .25);
2796
- --cirth-contrast-inverse: #fff;
2797
- --cirth-box-shadow: .0145rem .029rem .174rem rgba(129, 145, 181, .016), .0335rem .067rem .402rem rgba(129, 145, 181, .024), .0625rem .125rem .75rem rgba(129, 145, 181, .03), .1125rem .225rem 1.35rem rgba(129, 145, 181, .035), .2085rem .417rem 2.502rem rgba(129, 145, 181, .043), .5rem 1rem 6rem rgba(129, 145, 181, .06), 0 0 0 .0625rem rgba(129, 145, 181, .016);
2798
- --cirth-h1-color: #2d3138;
2799
- --cirth-h2-color: #373c44;
2800
- --cirth-h3-color: #424751;
2801
- --cirth-h4-color: #4d535e;
2802
- --cirth-h5-color: #5c6370;
2803
- --cirth-h6-color: #646b79;
2804
- --cirth-mark-background-color: #fde7c0;
2805
- --cirth-mark-color: #0f1114;
2806
- --cirth-ins-color: #1d6a54;
2807
- --cirth-del-color: #883935;
2158
+ --cirth-contrast-focus: oklch(48.3% .03 264 / .7);
2159
+ --cirth-contrast-inverse: oklch(100% 0 0);
2160
+ --cirth-box-shadow: .0145rem .029rem .174rem oklch(65.7% .03 264 / .01698), .0335rem .067rem .402rem oklch(65.7% .03 264 / .024), .0625rem .125rem .75rem oklch(65.7% .03 264 / .03), .1125rem .225rem 1.35rem oklch(65.7% .03 264 / .036), .2085rem .417rem 2.502rem oklch(65.7% .03 264 / .04302), .5rem 1rem 6rem oklch(65.7% .03 264 / .06), 0 0 0 .0625rem oklch(65.7% .03 264 / .015);
2161
+ --cirth-h1-color: oklch(31% .016 264);
2162
+ --cirth-h2-color: oklch(35.3% .021 264);
2163
+ --cirth-h3-color: oklch(39.7% .025 264);
2164
+ --cirth-h4-color: oklch(44% .028 264);
2165
+ --cirth-h5-color: oklch(48.3% .03 264);
2166
+ --cirth-h6-color: oklch(52.7% .032 264);
2167
+ --cirth-mark-background-color: oklch(93% .05 78);
2168
+ --cirth-mark-color: oklch(18% 0 264);
2169
+ --cirth-ins-color: oklch(35.3% .067 160.59);
2170
+ --cirth-del-color: oklch(35.3% .122 29.73);
2808
2171
  --cirth-blockquote-border-color: var(--cirth-muted-border-color);
2809
2172
  --cirth-blockquote-footer-color: var(--cirth-muted-color);
2810
- --cirth-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
2811
- --cirth-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
2173
+ --cirth-button-box-shadow: 0 0 0 #0000;
2174
+ --cirth-button-hover-box-shadow: 0 0 0 #0000;
2812
2175
  --cirth-table-border-color: var(--cirth-muted-border-color);
2813
- --cirth-table-row-stripped-background-color: rgba(111, 120, 135, .04);
2814
- --cirth-code-background-color: #f3f5f7;
2815
- --cirth-code-color: #646b79;
2176
+ --cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
2177
+ --cirth-code-background-color: oklch(97% 0 288);
2178
+ --cirth-code-color: oklch(52.7% .032 264);
2816
2179
  --cirth-code-kbd-background-color: var(--cirth-color);
2817
2180
  --cirth-code-kbd-color: var(--cirth-background-color);
2818
- --cirth-form-element-background-color: #fbfcfc;
2819
- --cirth-form-element-selected-background-color: #dfe3eb;
2820
- --cirth-form-element-border-color: #cfd5e2;
2821
- --cirth-form-element-color: #23262c;
2181
+ --cirth-form-element-background-color: oklch(99% 0 336);
2182
+ --cirth-form-element-selected-background-color: oklch(91.7% .006 264);
2183
+ --cirth-form-element-border-color: oklch(65.7% .03 264);
2184
+ --cirth-form-element-color: oklch(26.7% .011 264);
2822
2185
  --cirth-form-element-placeholder-color: var(--cirth-muted-color);
2823
- --cirth-form-element-active-background-color: #fff;
2186
+ --cirth-form-element-active-background-color: oklch(100% 0 0);
2824
2187
  --cirth-form-element-active-border-color: var(--cirth-primary-border);
2825
2188
  --cirth-form-element-focus-color: var(--cirth-primary-border);
2826
2189
  --cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
2827
- --cirth-form-element-invalid-border-color: #b86a6b;
2828
- --cirth-form-element-invalid-active-border-color: #c84f48;
2190
+ --cirth-form-element-invalid-border-color: oklch(65.7% .196 29.73);
2191
+ --cirth-form-element-invalid-active-border-color: oklch(52.7% .181 29.73);
2829
2192
  --cirth-form-element-invalid-focus-color: var(--cirth-form-element-invalid-active-border-color);
2830
- --cirth-form-element-valid-border-color: #4c9b8a;
2831
- --cirth-form-element-valid-active-border-color: #279977;
2193
+ --cirth-form-element-valid-border-color: oklch(61.3% .117 160.59);
2194
+ --cirth-form-element-valid-active-border-color: oklch(52.7% .1 160.59);
2832
2195
  --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
2833
- --cirth-switch-background-color: #bfc7d9;
2196
+ --cirth-switch-background-color: oklch(61.3% .032 264);
2834
2197
  --cirth-switch-checked-background-color: var(--cirth-primary-background);
2835
- --cirth-switch-color: #fff;
2836
- --cirth-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
2837
- --cirth-range-border-color: #dfe3eb;
2838
- --cirth-range-active-border-color: #bfc7d9;
2198
+ --cirth-switch-color: oklch(100% 0 0);
2199
+ --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
2200
+ --cirth-range-border-color: oklch(91.7% .006 264);
2201
+ --cirth-range-active-border-color: oklch(83% .016 264);
2839
2202
  --cirth-range-thumb-border-color: var(--cirth-background-color);
2840
2203
  --cirth-range-thumb-color: var(--cirth-secondary-background);
2841
2204
  --cirth-range-thumb-active-color: var(--cirth-primary-background);
@@ -2846,26 +2209,19 @@
2846
2209
  --cirth-card-background-color: var(--cirth-background-color);
2847
2210
  --cirth-card-border-color: var(--cirth-muted-border-color);
2848
2211
  --cirth-card-box-shadow: var(--cirth-box-shadow);
2849
- --cirth-card-sectioning-background-color: #fbfcfc;
2212
+ --cirth-card-sectioning-background-color: oklch(99% 0 336);
2850
2213
  --cirth-loading-spinner-opacity: var(--cirth-opacity-disabled);
2851
- --cirth-modal-overlay-background-color: rgba(232, 234, 237, var(--cirth-opacity-overlay));
2852
- --cirth-progress-background-color: #dfe3eb;
2214
+ --cirth-modal-overlay-background-color: oklch(93.85% .003 264deg / var(--cirth-opacity-overlay));
2215
+ --cirth-progress-background-color: oklch(91.7% .006 264);
2216
+ --cirth-progress-border-color: oklch(65.7% .03 264);
2853
2217
  --cirth-progress-color: var(--cirth-primary-background);
2854
2218
  --cirth-tooltip-background-color: var(--cirth-contrast-background);
2855
2219
  --cirth-tooltip-color: var(--cirth-contrast-inverse);
2856
- --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
2857
- --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
2858
- }
2859
-
2860
- .cirth[data-theme="light"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
2861
- --cirth-form-element-focus-color: var(--cirth-primary-focus);
2220
+ --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(40, 124, 87)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
2221
+ --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(189, 47, 33)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
2862
2222
  }
2863
2223
 
2864
- .cirth [data-theme="light"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
2865
- --cirth-form-element-focus-color: var(--cirth-primary-focus);
2866
- }
2867
-
2868
- .cirth:not([data-theme="dark"]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
2224
+ .cirth[data-theme="light"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), .cirth [data-theme="light"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), .cirth:not([data-theme="dark"]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
2869
2225
  --cirth-form-element-focus-color: var(--cirth-primary-focus);
2870
2226
  }
2871
2227
 
@@ -2874,83 +2230,83 @@
2874
2230
  --lightningcss-light: ;
2875
2231
  --lightningcss-dark: initial;
2876
2232
  color-scheme: dark;
2877
- --cirth-background-color: #13171f;
2878
- --cirth-color: #c2c7d0;
2879
- --cirth-text-selection-color: rgba(1, 170, 255, .19);
2880
- --cirth-muted-color: #7b8495;
2881
- --cirth-muted-border-color: #202632;
2882
- --cirth-primary: #01aaff;
2883
- --cirth-primary-background: #0172ad;
2233
+ --cirth-background-color: oklch(20.15% .003 264);
2234
+ --cirth-color: oklch(83% .016 264);
2235
+ --cirth-text-selection-color: oklch(70% .129 69.35 / .1875);
2236
+ --cirth-muted-color: oklch(61.3% .032 264);
2237
+ --cirth-muted-border-color: oklch(26.7% .011 264);
2238
+ --cirth-primary: oklch(70% .129 69.35);
2239
+ --cirth-primary-background: oklch(52.7% .097 69.35);
2884
2240
  --cirth-primary-border: var(--cirth-primary-background);
2885
- --cirth-primary-underline: rgba(1, 170, 255, .5);
2886
- --cirth-primary-hover: #79c0ff;
2887
- --cirth-primary-hover-background: #017fc0;
2241
+ --cirth-primary-underline: oklch(70% .129 69.35 / .5);
2242
+ --cirth-primary-hover: oklch(78.7% .146 69.35);
2243
+ --cirth-primary-hover-background: oklch(57% .105 69.35);
2888
2244
  --cirth-primary-hover-border: var(--cirth-primary-hover-background);
2889
2245
  --cirth-primary-hover-underline: var(--cirth-primary-hover);
2890
- --cirth-primary-focus: rgba(1, 170, 255, .376);
2891
- --cirth-primary-inverse: #fff;
2892
- --cirth-secondary: #969eaf;
2893
- --cirth-secondary-background: #525f7a;
2246
+ --cirth-primary-focus: oklch(70% .129 69.35 / .7);
2247
+ --cirth-primary-inverse: oklch(100% 0 0);
2248
+ --cirth-secondary: oklch(70% .028 264);
2249
+ --cirth-secondary-background: oklch(48.3% .03 264);
2894
2250
  --cirth-secondary-border: var(--cirth-secondary-background);
2895
- --cirth-secondary-underline: rgba(150, 158, 175, .5);
2896
- --cirth-secondary-hover: #b3b9c5;
2897
- --cirth-secondary-hover-background: #5d6b89;
2251
+ --cirth-secondary-underline: oklch(70% .028 264 / .5);
2252
+ --cirth-secondary-hover: oklch(78.7% .021 264);
2253
+ --cirth-secondary-hover-background: oklch(52.7% .032 264);
2898
2254
  --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
2899
2255
  --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
2900
- --cirth-secondary-focus: rgba(144, 158, 190, .25);
2901
- --cirth-secondary-inverse: #fff;
2902
- --cirth-contrast: #dfe3eb;
2903
- --cirth-contrast-background: #eff1f4;
2256
+ --cirth-secondary-focus: oklch(70% .028 264 / .7);
2257
+ --cirth-secondary-inverse: oklch(100% 0 0);
2258
+ --cirth-contrast: oklch(91.7% .006 264);
2259
+ --cirth-contrast-background: oklch(96% 0 264);
2904
2260
  --cirth-contrast-border: var(--cirth-contrast-background);
2905
- --cirth-contrast-underline: rgba(223, 227, 235, .5);
2906
- --cirth-contrast-hover: #fff;
2907
- --cirth-contrast-hover-background: #fff;
2261
+ --cirth-contrast-underline: oklch(91.7% .006 264 / .5);
2262
+ --cirth-contrast-hover: oklch(100% 0 0);
2263
+ --cirth-contrast-hover-background: oklch(100% 0 0);
2908
2264
  --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
2909
2265
  --cirth-contrast-hover-underline: var(--cirth-contrast-hover);
2910
- --cirth-contrast-focus: rgba(207, 213, 226, .25);
2911
- --cirth-contrast-inverse: #000;
2912
- --cirth-box-shadow: .0145rem .029rem .174rem rgba(7, 9, 12, .016), .0335rem .067rem .402rem rgba(7, 9, 12, .024), .0625rem .125rem .75rem rgba(7, 9, 12, .03), .1125rem .225rem 1.35rem rgba(7, 9, 12, .035), .2085rem .417rem 2.502rem rgba(7, 9, 12, .043), .5rem 1rem 6rem rgba(7, 9, 12, .06), 0 0 0 .0625rem rgba(7, 9, 12, .016);
2913
- --cirth-h1-color: #f0f1f3;
2914
- --cirth-h2-color: #e0e3e7;
2915
- --cirth-h3-color: #c2c7d0;
2916
- --cirth-h4-color: #b3b9c5;
2917
- --cirth-h5-color: #a4acba;
2918
- --cirth-h6-color: #8891a4;
2919
- --cirth-mark-background-color: #014063;
2920
- --cirth-mark-color: #fff;
2921
- --cirth-ins-color: #62af9a;
2922
- --cirth-del-color: #ce7e7b;
2266
+ --cirth-contrast-focus: oklch(87.3% .011 264 / .5);
2267
+ --cirth-contrast-inverse: oklch(0% 0 0);
2268
+ --cirth-box-shadow: .0145rem .029rem .174rem oklch(9% 0 312 / .01698), .0335rem .067rem .402rem oklch(9% 0 312 / .024), .0625rem .125rem .75rem oklch(9% 0 312 / .03), .1125rem .225rem 1.35rem oklch(9% 0 312 / .036), .2085rem .417rem 2.502rem oklch(9% 0 312 / .04302), .5rem 1rem 6rem oklch(9% 0 312 / .06), 0 0 0 .0625rem oklch(9% 0 312 / .015);
2269
+ --cirth-h1-color: oklch(96% 0 264);
2270
+ --cirth-h2-color: oklch(91.7% .006 264);
2271
+ --cirth-h3-color: oklch(83% .016 264);
2272
+ --cirth-h4-color: oklch(78.7% .021 264);
2273
+ --cirth-h5-color: oklch(74.3% .025 264);
2274
+ --cirth-h6-color: oklch(65.7% .03 264);
2275
+ --cirth-mark-background-color: oklch(35.3% .063 78);
2276
+ --cirth-mark-color: oklch(100% 0 0);
2277
+ --cirth-ins-color: oklch(78.7% .15 160.59);
2278
+ --cirth-del-color: oklch(78.7% .106 29.73);
2923
2279
  --cirth-blockquote-border-color: var(--cirth-muted-border-color);
2924
2280
  --cirth-blockquote-footer-color: var(--cirth-muted-color);
2925
- --cirth-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
2926
- --cirth-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
2281
+ --cirth-button-box-shadow: 0 0 0 #0000;
2282
+ --cirth-button-hover-box-shadow: 0 0 0 #0000;
2927
2283
  --cirth-table-border-color: var(--cirth-muted-border-color);
2928
- --cirth-table-row-stripped-background-color: rgba(111, 120, 135, .04);
2929
- --cirth-code-background-color: #1a1f28;
2930
- --cirth-code-color: #8891a4;
2284
+ --cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
2285
+ --cirth-code-background-color: oklch(23.4% .00725 264);
2286
+ --cirth-code-color: oklch(65.7% .03 264);
2931
2287
  --cirth-code-kbd-background-color: var(--cirth-color);
2932
2288
  --cirth-code-kbd-color: var(--cirth-background-color);
2933
- --cirth-form-element-background-color: #1c212c;
2934
- --cirth-form-element-selected-background-color: #2a3140;
2935
- --cirth-form-element-border-color: #2a3140;
2936
- --cirth-form-element-color: #e0e3e7;
2937
- --cirth-form-element-placeholder-color: #8891a4;
2938
- --cirth-form-element-active-background-color: #1a1f28;
2289
+ --cirth-form-element-background-color: oklch(24.5% .0085 264);
2290
+ --cirth-form-element-selected-background-color: oklch(31% .016 264);
2291
+ --cirth-form-element-border-color: oklch(52.7% .032 264);
2292
+ --cirth-form-element-color: oklch(91.7% .006 264);
2293
+ --cirth-form-element-placeholder-color: oklch(65.7% .03 264);
2294
+ --cirth-form-element-active-background-color: oklch(23.4% .00725 264);
2939
2295
  --cirth-form-element-active-border-color: var(--cirth-primary-border);
2940
2296
  --cirth-form-element-focus-color: var(--cirth-primary-border);
2941
2297
  --cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
2942
- --cirth-form-element-invalid-border-color: #964a50;
2943
- --cirth-form-element-invalid-active-border-color: #b7403b;
2298
+ --cirth-form-element-invalid-border-color: oklch(70% .163 29.73);
2299
+ --cirth-form-element-invalid-active-border-color: oklch(78.7% .106 29.73);
2944
2300
  --cirth-form-element-invalid-focus-color: var(--cirth-form-element-invalid-active-border-color);
2945
- --cirth-form-element-valid-border-color: #2a7b6f;
2946
- --cirth-form-element-valid-active-border-color: #16896a;
2301
+ --cirth-form-element-valid-border-color: oklch(70% .133 160.59);
2302
+ --cirth-form-element-valid-active-border-color: oklch(78.7% .15 160.59);
2947
2303
  --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
2948
- --cirth-switch-background-color: #333c4e;
2304
+ --cirth-switch-background-color: oklch(52.7% .032 264);
2949
2305
  --cirth-switch-checked-background-color: var(--cirth-primary-background);
2950
- --cirth-switch-color: #fff;
2951
- --cirth-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
2952
- --cirth-range-border-color: #202632;
2953
- --cirth-range-active-border-color: #2a3140;
2306
+ --cirth-switch-color: oklch(100% 0 0);
2307
+ --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
2308
+ --cirth-range-border-color: oklch(26.7% .011 264);
2309
+ --cirth-range-active-border-color: oklch(31% .016 264);
2954
2310
  --cirth-range-thumb-border-color: var(--cirth-background-color);
2955
2311
  --cirth-range-thumb-color: var(--cirth-secondary-background);
2956
2312
  --cirth-range-thumb-active-color: var(--cirth-primary-background);
@@ -2958,18 +2314,19 @@
2958
2314
  --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
2959
2315
  --cirth-accordion-close-summary-color: var(--cirth-color);
2960
2316
  --cirth-accordion-open-summary-color: var(--cirth-muted-color);
2961
- --cirth-card-background-color: #181c25;
2317
+ --cirth-card-background-color: oklch(22.3% .006 264);
2962
2318
  --cirth-card-border-color: var(--cirth-card-background-color);
2963
2319
  --cirth-card-box-shadow: var(--cirth-box-shadow);
2964
- --cirth-card-sectioning-background-color: #1a1f28;
2320
+ --cirth-card-sectioning-background-color: oklch(23.4% .00725 264);
2965
2321
  --cirth-loading-spinner-opacity: var(--cirth-opacity-disabled);
2966
- --cirth-modal-overlay-background-color: rgba(7.5, 8.5, 10, var(--cirth-opacity-overlay));
2967
- --cirth-progress-background-color: #202632;
2968
- --cirth-progress-color: var(--cirth-primary-background);
2322
+ --cirth-modal-overlay-background-color: oklch(9% 0 312deg / var(--cirth-opacity-overlay));
2323
+ --cirth-progress-background-color: oklch(26.7% .011 264);
2324
+ --cirth-progress-border-color: oklch(52.7% .032 264);
2325
+ --cirth-progress-color: oklch(61.3% .113 69.35);
2969
2326
  --cirth-tooltip-background-color: var(--cirth-contrast-background);
2970
2327
  --cirth-tooltip-color: var(--cirth-contrast-inverse);
2971
- --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
2972
- --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
2328
+ --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(75, 215, 153)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
2329
+ --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(246, 160, 145)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
2973
2330
  }
2974
2331
 
2975
2332
  .cirth:not([data-theme]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
@@ -2981,83 +2338,83 @@
2981
2338
  --lightningcss-light: ;
2982
2339
  --lightningcss-dark: initial;
2983
2340
  color-scheme: dark;
2984
- --cirth-background-color: #13171f;
2985
- --cirth-color: #c2c7d0;
2986
- --cirth-text-selection-color: rgba(1, 170, 255, .19);
2987
- --cirth-muted-color: #7b8495;
2988
- --cirth-muted-border-color: #202632;
2989
- --cirth-primary: #01aaff;
2990
- --cirth-primary-background: #0172ad;
2341
+ --cirth-background-color: oklch(20.15% .003 264);
2342
+ --cirth-color: oklch(83% .016 264);
2343
+ --cirth-text-selection-color: oklch(70% .129 69.35 / .1875);
2344
+ --cirth-muted-color: oklch(61.3% .032 264);
2345
+ --cirth-muted-border-color: oklch(26.7% .011 264);
2346
+ --cirth-primary: oklch(70% .129 69.35);
2347
+ --cirth-primary-background: oklch(52.7% .097 69.35);
2991
2348
  --cirth-primary-border: var(--cirth-primary-background);
2992
- --cirth-primary-underline: rgba(1, 170, 255, .5);
2993
- --cirth-primary-hover: #79c0ff;
2994
- --cirth-primary-hover-background: #017fc0;
2349
+ --cirth-primary-underline: oklch(70% .129 69.35 / .5);
2350
+ --cirth-primary-hover: oklch(78.7% .146 69.35);
2351
+ --cirth-primary-hover-background: oklch(57% .105 69.35);
2995
2352
  --cirth-primary-hover-border: var(--cirth-primary-hover-background);
2996
2353
  --cirth-primary-hover-underline: var(--cirth-primary-hover);
2997
- --cirth-primary-focus: rgba(1, 170, 255, .376);
2998
- --cirth-primary-inverse: #fff;
2999
- --cirth-secondary: #969eaf;
3000
- --cirth-secondary-background: #525f7a;
2354
+ --cirth-primary-focus: oklch(70% .129 69.35 / .7);
2355
+ --cirth-primary-inverse: oklch(100% 0 0);
2356
+ --cirth-secondary: oklch(70% .028 264);
2357
+ --cirth-secondary-background: oklch(48.3% .03 264);
3001
2358
  --cirth-secondary-border: var(--cirth-secondary-background);
3002
- --cirth-secondary-underline: rgba(150, 158, 175, .5);
3003
- --cirth-secondary-hover: #b3b9c5;
3004
- --cirth-secondary-hover-background: #5d6b89;
2359
+ --cirth-secondary-underline: oklch(70% .028 264 / .5);
2360
+ --cirth-secondary-hover: oklch(78.7% .021 264);
2361
+ --cirth-secondary-hover-background: oklch(52.7% .032 264);
3005
2362
  --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
3006
2363
  --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
3007
- --cirth-secondary-focus: rgba(144, 158, 190, .25);
3008
- --cirth-secondary-inverse: #fff;
3009
- --cirth-contrast: #dfe3eb;
3010
- --cirth-contrast-background: #eff1f4;
2364
+ --cirth-secondary-focus: oklch(70% .028 264 / .7);
2365
+ --cirth-secondary-inverse: oklch(100% 0 0);
2366
+ --cirth-contrast: oklch(91.7% .006 264);
2367
+ --cirth-contrast-background: oklch(96% 0 264);
3011
2368
  --cirth-contrast-border: var(--cirth-contrast-background);
3012
- --cirth-contrast-underline: rgba(223, 227, 235, .5);
3013
- --cirth-contrast-hover: #fff;
3014
- --cirth-contrast-hover-background: #fff;
2369
+ --cirth-contrast-underline: oklch(91.7% .006 264 / .5);
2370
+ --cirth-contrast-hover: oklch(100% 0 0);
2371
+ --cirth-contrast-hover-background: oklch(100% 0 0);
3015
2372
  --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
3016
2373
  --cirth-contrast-hover-underline: var(--cirth-contrast-hover);
3017
- --cirth-contrast-focus: rgba(207, 213, 226, .25);
3018
- --cirth-contrast-inverse: #000;
3019
- --cirth-box-shadow: .0145rem .029rem .174rem rgba(7, 9, 12, .016), .0335rem .067rem .402rem rgba(7, 9, 12, .024), .0625rem .125rem .75rem rgba(7, 9, 12, .03), .1125rem .225rem 1.35rem rgba(7, 9, 12, .035), .2085rem .417rem 2.502rem rgba(7, 9, 12, .043), .5rem 1rem 6rem rgba(7, 9, 12, .06), 0 0 0 .0625rem rgba(7, 9, 12, .016);
3020
- --cirth-h1-color: #f0f1f3;
3021
- --cirth-h2-color: #e0e3e7;
3022
- --cirth-h3-color: #c2c7d0;
3023
- --cirth-h4-color: #b3b9c5;
3024
- --cirth-h5-color: #a4acba;
3025
- --cirth-h6-color: #8891a4;
3026
- --cirth-mark-background-color: #014063;
3027
- --cirth-mark-color: #fff;
3028
- --cirth-ins-color: #62af9a;
3029
- --cirth-del-color: #ce7e7b;
2374
+ --cirth-contrast-focus: oklch(87.3% .011 264 / .5);
2375
+ --cirth-contrast-inverse: oklch(0% 0 0);
2376
+ --cirth-box-shadow: .0145rem .029rem .174rem oklch(9% 0 312 / .01698), .0335rem .067rem .402rem oklch(9% 0 312 / .024), .0625rem .125rem .75rem oklch(9% 0 312 / .03), .1125rem .225rem 1.35rem oklch(9% 0 312 / .036), .2085rem .417rem 2.502rem oklch(9% 0 312 / .04302), .5rem 1rem 6rem oklch(9% 0 312 / .06), 0 0 0 .0625rem oklch(9% 0 312 / .015);
2377
+ --cirth-h1-color: oklch(96% 0 264);
2378
+ --cirth-h2-color: oklch(91.7% .006 264);
2379
+ --cirth-h3-color: oklch(83% .016 264);
2380
+ --cirth-h4-color: oklch(78.7% .021 264);
2381
+ --cirth-h5-color: oklch(74.3% .025 264);
2382
+ --cirth-h6-color: oklch(65.7% .03 264);
2383
+ --cirth-mark-background-color: oklch(35.3% .063 78);
2384
+ --cirth-mark-color: oklch(100% 0 0);
2385
+ --cirth-ins-color: oklch(78.7% .15 160.59);
2386
+ --cirth-del-color: oklch(78.7% .106 29.73);
3030
2387
  --cirth-blockquote-border-color: var(--cirth-muted-border-color);
3031
2388
  --cirth-blockquote-footer-color: var(--cirth-muted-color);
3032
- --cirth-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
3033
- --cirth-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
2389
+ --cirth-button-box-shadow: 0 0 0 #0000;
2390
+ --cirth-button-hover-box-shadow: 0 0 0 #0000;
3034
2391
  --cirth-table-border-color: var(--cirth-muted-border-color);
3035
- --cirth-table-row-stripped-background-color: rgba(111, 120, 135, .04);
3036
- --cirth-code-background-color: #1a1f28;
3037
- --cirth-code-color: #8891a4;
2392
+ --cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
2393
+ --cirth-code-background-color: oklch(23.4% .00725 264);
2394
+ --cirth-code-color: oklch(65.7% .03 264);
3038
2395
  --cirth-code-kbd-background-color: var(--cirth-color);
3039
2396
  --cirth-code-kbd-color: var(--cirth-background-color);
3040
- --cirth-form-element-background-color: #1c212c;
3041
- --cirth-form-element-selected-background-color: #2a3140;
3042
- --cirth-form-element-border-color: #2a3140;
3043
- --cirth-form-element-color: #e0e3e7;
3044
- --cirth-form-element-placeholder-color: #8891a4;
3045
- --cirth-form-element-active-background-color: #1a1f28;
2397
+ --cirth-form-element-background-color: oklch(24.5% .0085 264);
2398
+ --cirth-form-element-selected-background-color: oklch(31% .016 264);
2399
+ --cirth-form-element-border-color: oklch(52.7% .032 264);
2400
+ --cirth-form-element-color: oklch(91.7% .006 264);
2401
+ --cirth-form-element-placeholder-color: oklch(65.7% .03 264);
2402
+ --cirth-form-element-active-background-color: oklch(23.4% .00725 264);
3046
2403
  --cirth-form-element-active-border-color: var(--cirth-primary-border);
3047
2404
  --cirth-form-element-focus-color: var(--cirth-primary-border);
3048
2405
  --cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
3049
- --cirth-form-element-invalid-border-color: #964a50;
3050
- --cirth-form-element-invalid-active-border-color: #b7403b;
2406
+ --cirth-form-element-invalid-border-color: oklch(70% .163 29.73);
2407
+ --cirth-form-element-invalid-active-border-color: oklch(78.7% .106 29.73);
3051
2408
  --cirth-form-element-invalid-focus-color: var(--cirth-form-element-invalid-active-border-color);
3052
- --cirth-form-element-valid-border-color: #2a7b6f;
3053
- --cirth-form-element-valid-active-border-color: #16896a;
2409
+ --cirth-form-element-valid-border-color: oklch(70% .133 160.59);
2410
+ --cirth-form-element-valid-active-border-color: oklch(78.7% .15 160.59);
3054
2411
  --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
3055
- --cirth-switch-background-color: #333c4e;
2412
+ --cirth-switch-background-color: oklch(52.7% .032 264);
3056
2413
  --cirth-switch-checked-background-color: var(--cirth-primary-background);
3057
- --cirth-switch-color: #fff;
3058
- --cirth-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
3059
- --cirth-range-border-color: #202632;
3060
- --cirth-range-active-border-color: #2a3140;
2414
+ --cirth-switch-color: oklch(100% 0 0);
2415
+ --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
2416
+ --cirth-range-border-color: oklch(26.7% .011 264);
2417
+ --cirth-range-active-border-color: oklch(31% .016 264);
3061
2418
  --cirth-range-thumb-border-color: var(--cirth-background-color);
3062
2419
  --cirth-range-thumb-color: var(--cirth-secondary-background);
3063
2420
  --cirth-range-thumb-active-color: var(--cirth-primary-background);
@@ -3065,40 +2422,25 @@
3065
2422
  --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
3066
2423
  --cirth-accordion-close-summary-color: var(--cirth-color);
3067
2424
  --cirth-accordion-open-summary-color: var(--cirth-muted-color);
3068
- --cirth-card-background-color: #181c25;
2425
+ --cirth-card-background-color: oklch(22.3% .006 264);
3069
2426
  --cirth-card-border-color: var(--cirth-card-background-color);
3070
2427
  --cirth-card-box-shadow: var(--cirth-box-shadow);
3071
- --cirth-card-sectioning-background-color: #1a1f28;
2428
+ --cirth-card-sectioning-background-color: oklch(23.4% .00725 264);
3072
2429
  --cirth-loading-spinner-opacity: var(--cirth-opacity-disabled);
3073
- --cirth-modal-overlay-background-color: rgba(7.5, 8.5, 10, var(--cirth-opacity-overlay));
3074
- --cirth-progress-background-color: #202632;
3075
- --cirth-progress-color: var(--cirth-primary-background);
2430
+ --cirth-modal-overlay-background-color: oklch(9% 0 312deg / var(--cirth-opacity-overlay));
2431
+ --cirth-progress-background-color: oklch(26.7% .011 264);
2432
+ --cirth-progress-border-color: oklch(52.7% .032 264);
2433
+ --cirth-progress-color: oklch(61.3% .113 69.35);
3076
2434
  --cirth-tooltip-background-color: var(--cirth-contrast-background);
3077
2435
  --cirth-tooltip-color: var(--cirth-contrast-inverse);
3078
- --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
3079
- --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
2436
+ --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(75, 215, 153)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
2437
+ --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(246, 160, 145)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
3080
2438
  }
3081
2439
 
3082
- .cirth[data-theme="dark"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
2440
+ .cirth[data-theme="dark"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), .cirth [data-theme="dark"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
3083
2441
  --cirth-form-element-focus-color: var(--cirth-primary-focus);
3084
2442
  }
3085
2443
 
3086
- .cirth [data-theme="dark"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
3087
- --cirth-form-element-focus-color: var(--cirth-primary-focus);
3088
- }
3089
-
3090
- .cirth progress {
3091
- accent-color: var(--cirth-primary);
3092
- }
3093
-
3094
- .cirth [type="checkbox"] {
3095
- accent-color: var(--cirth-primary);
3096
- }
3097
-
3098
- .cirth [type="radio"] {
3099
- accent-color: var(--cirth-primary);
3100
- }
3101
-
3102
- .cirth [type="range"] {
2444
+ .cirth progress, .cirth [type="checkbox"], .cirth [type="radio"], .cirth [type="range"] {
3103
2445
  accent-color: var(--cirth-primary);
3104
2446
  }