@cirthcss/cirth 0.3.0 → 0.5.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"]) {
390
- --cirth-background-color: var(--cirth-primary-hover-background);
391
- --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"]) {
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) {
404
306
  --cirth-background-color: var(--cirth-primary-hover-background);
405
307
  --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);
464
- }
465
-
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);
469
- }
470
-
471
- .cirth [type="submit"]:focus {
472
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
473
- 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
474
- }
475
-
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)),
478
- 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
479
- }
480
-
481
- .cirth [type="reset"]:focus {
482
- --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
483
- 0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
484
- }
485
-
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);
326
+ .cirth button:active, .cirth [type="submit"]:active, .cirth [type="reset"]:active, .cirth [type="button"]:active, .cirth [role="button"]:active {
327
+ transform: translateY(.0625rem);
489
328
  }
490
329
 
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);
330
+ .cirth [type="file"]::file-selector-button:active {
331
+ transform: translateY(.0625rem);
494
332
  }
495
333
 
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)),
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),
498
336
  0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
337
+ outline: var(--cirth-outline-width) solid transparent;
499
338
  }
500
339
 
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)),
340
+ .cirth [type="file"]::file-selector-button:focus-visible {
341
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000),
503
342
  0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
343
+ outline: var(--cirth-outline-width) solid transparent;
504
344
  }
505
345
 
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)),
346
+ .cirth [type="file"]::file-selector-button:is():focus-visible {
347
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000),
508
348
  0 0 0 var(--cirth-outline-width) var(--cirth-primary-focus);
349
+ outline: var(--cirth-outline-width) solid transparent;
509
350
  }
510
351
 
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
  }
@@ -588,10 +417,6 @@
588
417
  border-bottom: 0;
589
418
  }
590
419
 
591
- .cirth table.striped tbody tr:nth-child(odd) th, .cirth table.striped tbody tr:nth-child(odd) td {
592
- background-color: var(--cirth-table-row-stripped-background-color);
593
- }
594
-
595
420
  .cirth :where(audio, canvas, iframe, img, svg, video) {
596
421
  vertical-align: middle;
597
422
  }
@@ -619,11 +444,7 @@
619
444
  fill: currentColor;
620
445
  }
621
446
 
622
- .cirth svg:not(:root) {
623
- overflow: hidden;
624
- }
625
-
626
- .cirth svg:not(:host) {
447
+ .cirth svg:not(:root), .cirth svg:not(:host) {
627
448
  overflow: hidden;
628
449
  }
629
450
 
@@ -651,7 +472,7 @@
651
472
  }
652
473
 
653
474
  .cirth code, .cirth kbd, .cirth samp {
654
- padding: .375rem;
475
+ padding: var(--cirth-space-1) var(--cirth-space-2);
655
476
  display: inline-block;
656
477
  }
657
478
 
@@ -728,11 +549,7 @@
728
549
  overflow: auto;
729
550
  }
730
551
 
731
- .cirth [type="checkbox"] {
732
- padding: 0;
733
- }
734
-
735
- .cirth [type="radio"] {
552
+ .cirth [type="checkbox"], .cirth [type="radio"] {
736
553
  padding: 0;
737
554
  }
738
555
 
@@ -775,17 +592,12 @@
775
592
  display: none;
776
593
  }
777
594
 
778
- .cirth [type="file"] {
779
- border-width: 0;
780
- padding: 0;
781
- }
782
-
783
- .cirth [type="range"] {
595
+ .cirth [type="file"], .cirth [type="range"] {
784
596
  border-width: 0;
785
597
  padding: 0;
786
598
  }
787
599
 
788
- .cirth input:not(:is([type="checkbox"], [type="radio"], [type="range"])) {
600
+ .cirth input:not([type="checkbox"], [type="radio"], [type="range"]) {
789
601
  height: calc(var(--cirth-size-4) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
790
602
  }
791
603
 
@@ -798,7 +610,7 @@
798
610
  }
799
611
 
800
612
  .cirth label, .cirth fieldset legend {
801
- margin-bottom: calc(var(--cirth-spacing) * .375);
613
+ margin-bottom: calc(var(--cirth-spacing) * .5);
802
614
  color: var(--cirth-color);
803
615
  font-weight: var(--cirth-form-label-font-weight, var(--cirth-font-weight));
804
616
  display: block;
@@ -808,24 +620,11 @@
808
620
  margin-bottom: calc(var(--cirth-spacing) * .5);
809
621
  }
810
622
 
811
- .cirth select, .cirth textarea {
812
- width: 100%;
813
- }
814
-
815
- .cirth input:not(:is([type="checkbox"], [type="radio"])) {
623
+ .cirth input:not([type="checkbox"], [type="radio"]), .cirth button[type="submit"], .cirth select, .cirth textarea {
816
624
  width: 100%;
817
625
  }
818
626
 
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"])) {
627
+ .cirth input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), .cirth select, .cirth textarea {
829
628
  appearance: none;
830
629
  padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
831
630
  }
@@ -845,43 +644,21 @@
845
644
  outline: none;
846
645
  }
847
646
 
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) {
647
+ .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
648
  --cirth-background-color: var(--cirth-form-element-active-background-color);
854
649
  }
855
650
 
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) {
651
+ .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
652
  --cirth-border-color: var(--cirth-form-element-active-border-color);
862
653
  }
863
654
 
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 {
655
+ .cirth input:not([type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [readonly]):focus, .cirth :where(select, textarea):not([readonly]):focus {
870
656
  --cirth-box-shadow: 0 0 0 var(--cirth-outline-width)
871
657
  var(--cirth-form-element-focus-color);
658
+ outline: var(--cirth-outline-width) solid transparent;
872
659
  }
873
660
 
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) {
661
+ .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
662
  opacity: var(--cirth-form-element-disabled-opacity);
886
663
  pointer-events: none;
887
664
  }
@@ -890,7 +667,7 @@
890
667
  opacity: 1;
891
668
  }
892
669
 
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] {
670
+ .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
671
  padding-right: calc(var(--cirth-form-element-spacing-horizontal) + var(--cirth-space-6));
895
672
  padding-left: var(--cirth-form-element-spacing-horizontal);
896
673
  background-position: center right var(--cirth-space-3);
@@ -900,11 +677,11 @@
900
677
  padding-inline-end: calc(var(--cirth-form-element-spacing-horizontal) + var(--cirth-space-6));
901
678
  }
902
679
 
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) {
680
+ .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
681
  background-image: var(--cirth-icon-valid);
905
682
  }
906
683
 
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) {
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="true"]:not(select) {
908
685
  background-image: var(--cirth-icon-invalid);
909
686
  }
910
687
 
@@ -916,7 +693,7 @@
916
693
  --cirth-border-color: var(--cirth-form-element-valid-active-border-color);
917
694
  }
918
695
 
919
- .cirth :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus):not(:is([type="checkbox"], [type="radio"])) {
696
+ .cirth :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus):not([type="checkbox"], [type="radio"]) {
920
697
  --cirth-box-shadow: 0 0 0 var(--cirth-outline-width)
921
698
  var(--cirth-form-element-valid-focus-color);
922
699
  }
@@ -929,21 +706,16 @@
929
706
  --cirth-border-color: var(--cirth-form-element-invalid-active-border-color);
930
707
  }
931
708
 
932
- .cirth :where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus):not(:is([type="checkbox"], [type="radio"])) {
709
+ .cirth :where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus):not([type="checkbox"], [type="radio"]) {
933
710
  --cirth-box-shadow: 0 0 0 var(--cirth-outline-width)
934
711
  var(--cirth-form-element-invalid-focus-color);
935
712
  }
936
713
 
937
- [dir="rtl"] .cirth :where(input, select, textarea):not(:is([type="checkbox"], [type="radio"])):is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"]) {
714
+ [dir="rtl"] .cirth :where(input, select, textarea):not([type="checkbox"], [type="radio"]):is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"]) {
938
715
  background-position: center left var(--cirth-space-3);
939
716
  }
940
717
 
941
- .cirth select:invalid {
942
- color: var(--cirth-form-element-placeholder-color);
943
- opacity: 1;
944
- }
945
-
946
- .cirth input::placeholder {
718
+ .cirth input::placeholder, .cirth textarea::placeholder, .cirth select:invalid {
947
719
  color: var(--cirth-form-element-placeholder-color);
948
720
  opacity: 1;
949
721
  }
@@ -953,30 +725,21 @@
953
725
  opacity: 1;
954
726
  }
955
727
 
956
- .cirth textarea::placeholder {
957
- color: var(--cirth-form-element-placeholder-color);
958
- opacity: 1;
959
- }
960
-
961
728
  .cirth textarea::-webkit-input-placeholder {
962
729
  color: var(--cirth-form-element-placeholder-color);
963
730
  opacity: 1;
964
731
  }
965
732
 
966
- .cirth select, .cirth textarea {
967
- margin-bottom: var(--cirth-spacing);
968
- }
969
-
970
- .cirth input:not(:is([type="checkbox"], [type="radio"])) {
733
+ .cirth input:not([type="checkbox"], [type="radio"]), .cirth select, .cirth textarea {
971
734
  margin-bottom: var(--cirth-spacing);
972
735
  }
973
736
 
974
737
  .cirth select::-ms-expand {
975
- background-color: rgba(0, 0, 0, 0);
738
+ background-color: #0000;
976
739
  border: 0;
977
740
  }
978
741
 
979
- .cirth select:not(:is([multiple], [size])) {
742
+ .cirth select:not([multiple], [size]) {
980
743
  padding-right: calc(var(--cirth-form-element-spacing-horizontal) + var(--cirth-space-6));
981
744
  padding-left: var(--cirth-form-element-spacing-horizontal);
982
745
  background-image: var(--cirth-icon-chevron);
@@ -992,7 +755,7 @@
992
755
  color: var(--cirth-form-element-color);
993
756
  }
994
757
 
995
- [dir="rtl"] .cirth select:not(:is([multiple], [size])) {
758
+ [dir="rtl"] .cirth select:not([multiple], [size]) {
996
759
  background-position: center left var(--cirth-space-3);
997
760
  }
998
761
 
@@ -1034,25 +797,14 @@
1034
797
  width: fit-content;
1035
798
  }
1036
799
 
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"] {
800
+ .cirth [type="checkbox"], .cirth [type="radio"] {
1049
801
  appearance: none;
1050
802
  margin-top: -.125em;
1051
803
  border-width: var(--cirth-border-width);
1052
804
  vertical-align: middle;
1053
805
  cursor: pointer;
1054
- width: 1.25em;
1055
- height: 1.25em;
806
+ width: 1.5em;
807
+ height: 1.5em;
1056
808
  margin-inline-end: .5em;
1057
809
  }
1058
810
 
@@ -1064,77 +816,22 @@
1064
816
  display: none;
1065
817
  }
1066
818
 
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 {
819
+ .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 {
1086
820
  --cirth-background-color: var(--cirth-primary-background);
1087
821
  --cirth-border-color: var(--cirth-primary-border);
1088
822
  background-image: var(--cirth-icon-checkbox);
1089
823
  background-position: center;
1090
824
  background-repeat: no-repeat;
1091
- background-size: .75em;
825
+ background-size: .9em;
1092
826
  }
1093
827
 
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 {
1104
- --cirth-background-color: var(--cirth-primary-background);
1105
- --cirth-border-color: var(--cirth-primary-border);
1106
- background-image: var(--cirth-icon-checkbox);
1107
- background-position: center;
1108
- background-repeat: no-repeat;
1109
- background-size: .75em;
1110
- }
1111
-
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 {
828
+ .cirth [type="checkbox"] ~ label, .cirth [type="radio"] ~ label {
1128
829
  cursor: pointer;
1129
830
  margin-bottom: 0;
1130
831
  display: inline-block;
1131
832
  }
1132
833
 
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) {
834
+ .cirth [type="checkbox"] ~ label:not(:last-of-type), .cirth [type="radio"] ~ label:not(:last-of-type) {
1138
835
  margin-inline-end: 1em;
1139
836
  }
1140
837
 
@@ -1144,29 +841,17 @@
1144
841
  background-image: var(--cirth-icon-minus);
1145
842
  background-position: center;
1146
843
  background-repeat: no-repeat;
1147
- background-size: .75em;
844
+ background-size: .9em;
1148
845
  }
1149
846
 
1150
847
  .cirth [type="radio"] {
1151
848
  border-radius: 50%;
1152
849
  }
1153
850
 
1154
- .cirth [type="radio"]:checked {
1155
- --cirth-background-color: var(--cirth-primary-inverse);
1156
- 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 {
851
+ .cirth [type="radio"]:checked, .cirth [type="radio"]:checked:active, .cirth [type="radio"]:checked:focus {
1167
852
  --cirth-background-color: var(--cirth-primary-inverse);
1168
853
  background-image: none;
1169
- border-width: .35em;
854
+ border-width: .42em;
1170
855
  }
1171
856
 
1172
857
  .cirth [type="checkbox"][role="switch"] {
@@ -1174,10 +859,10 @@
1174
859
  --cirth-color: var(--cirth-switch-color);
1175
860
  border: var(--cirth-border-width) solid var(--cirth-border-color);
1176
861
  background-color: var(--cirth-background-color);
1177
- border-radius: 1.25em;
1178
- width: 2.25em;
1179
- height: 1.25em;
1180
- line-height: 1.25em;
862
+ border-radius: 1.5em;
863
+ width: 2.7em;
864
+ height: 1.5em;
865
+ line-height: 1.5em;
1181
866
  }
1182
867
 
1183
868
  .cirth [type="checkbox"][role="switch"]:not([aria-invalid]) {
@@ -1189,148 +874,44 @@
1189
874
  background-color: var(--cirth-color);
1190
875
  height: 100%;
1191
876
  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);
877
+ content: "";
878
+ transition: margin var(--cirth-duration-fast) var(--cirth-ease-in-out);
879
+ border-radius: 50%;
880
+ display: block;
1303
881
  }
1304
882
 
1305
- .cirth [type="checkbox"]:checked:active[aria-invalid="true"] {
1306
- --cirth-border-color: var(--cirth-form-element-invalid-border-color);
883
+ .cirth [type="checkbox"][role="switch"]:focus {
884
+ --cirth-background-color: var(--cirth-switch-background-color);
885
+ --cirth-border-color: var(--cirth-switch-background-color);
1307
886
  }
1308
887
 
1309
- .cirth [type="checkbox"]:checked:focus[aria-invalid="true"] {
1310
- --cirth-border-color: var(--cirth-form-element-invalid-border-color);
888
+ .cirth [type="checkbox"][role="switch"]:checked {
889
+ --cirth-background-color: var(--cirth-switch-checked-background-color);
890
+ --cirth-border-color: var(--cirth-switch-checked-background-color);
891
+ background-image: none;
1311
892
  }
1312
893
 
1313
- .cirth [type="radio"]:checked[aria-invalid="true"] {
1314
- --cirth-border-color: var(--cirth-form-element-invalid-border-color);
894
+ .cirth [type="checkbox"][role="switch"]:checked:before {
895
+ margin-inline-start: 1.2em;
1315
896
  }
1316
897
 
1317
- .cirth [type="radio"]:checked:active[aria-invalid="true"] {
1318
- --cirth-border-color: var(--cirth-form-element-invalid-border-color);
898
+ .cirth [type="checkbox"][role="switch"][disabled] {
899
+ --cirth-background-color: var(--cirth-border-color);
1319
900
  }
1320
901
 
1321
- .cirth [type="radio"]:checked:focus[aria-invalid="true"] {
1322
- --cirth-border-color: var(--cirth-form-element-invalid-border-color);
902
+ .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 {
903
+ --cirth-background-color: var(--cirth-form-element-valid-border-color);
1323
904
  }
1324
905
 
1325
- .cirth [type="checkbox"][role="switch"]:checked[aria-invalid="true"] {
1326
- --cirth-border-color: var(--cirth-form-element-invalid-border-color);
906
+ .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"] {
907
+ --cirth-background-color: var(--cirth-form-element-invalid-border-color);
1327
908
  }
1328
909
 
1329
- .cirth [type="checkbox"][role="switch"]:checked:active[aria-invalid="true"] {
1330
- --cirth-border-color: var(--cirth-form-element-invalid-border-color);
910
+ .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 {
911
+ --cirth-border-color: var(--cirth-form-element-valid-border-color);
1331
912
  }
1332
913
 
1333
- .cirth [type="checkbox"][role="switch"]:checked:focus[aria-invalid="true"] {
914
+ .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
915
  --cirth-border-color: var(--cirth-form-element-invalid-border-color);
1335
916
  }
1336
917
 
@@ -1352,7 +933,7 @@
1352
933
  border: 0;
1353
934
  }
1354
935
 
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"]) {
936
+ .cirth input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]):is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
1356
937
  --cirth-icon-position: var(--cirth-space-3);
1357
938
  --cirth-icon-width: var(--cirth-size-4);
1358
939
  padding-right: calc(var(--cirth-icon-width) + var(--cirth-icon-position));
@@ -1362,7 +943,7 @@
1362
943
  background-repeat: no-repeat;
1363
944
  }
1364
945
 
1365
- .cirth input:not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"]))[type="time"] {
946
+ .cirth input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="time"] {
1366
947
  background-image: var(--cirth-icon-time);
1367
948
  }
1368
949
 
@@ -1402,27 +983,7 @@
1402
983
  }
1403
984
 
1404
985
  @-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"] {
986
+ .cirth [type="date"], .cirth [type="datetime-local"], .cirth [type="month"], .cirth [type="time"], .cirth [type="week"] {
1426
987
  padding-right: var(--cirth-form-element-spacing-horizontal);
1427
988
  background-image: none;
1428
989
  }
@@ -1453,7 +1014,7 @@
1453
1014
  }
1454
1015
 
1455
1016
  .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)),
1017
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000),
1457
1018
  0 0 0 var(--cirth-outline-width) var(--cirth-secondary-focus);
1458
1019
  }
1459
1020
 
@@ -1524,12 +1085,7 @@
1524
1085
  margin-top: -.4375rem;
1525
1086
  }
1526
1087
 
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 {
1088
+ .cirth [type="range"]:active, .cirth [type="range"]:focus-within {
1533
1089
  --cirth-range-border-color: var(--cirth-range-active-border-color);
1534
1090
  --cirth-range-thumb-color: var(--cirth-range-thumb-active-color);
1535
1091
  }
@@ -1546,33 +1102,33 @@
1546
1102
  transform: scale(1.25);
1547
1103
  }
1548
1104
 
1549
- .cirth input:not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"]))[type="search"] {
1105
+ .cirth input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"] {
1550
1106
  background-image: var(--cirth-icon-search);
1551
- background-position: center left calc(var(--cirth-form-element-spacing-horizontal) + .125rem);
1107
+ background-position: center left var(--cirth-form-element-spacing-horizontal);
1552
1108
  background-repeat: no-repeat;
1553
1109
  background-size: 1rem;
1554
- padding-inline-start: calc(var(--cirth-form-element-spacing-horizontal) + 1.75rem);
1110
+ padding-inline-start: calc(var(--cirth-form-element-spacing-horizontal) + var(--cirth-space-6));
1555
1111
  }
1556
1112
 
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);
1113
+ .cirth input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid] {
1114
+ background-position: center left var(--cirth-form-element-spacing-horizontal), center right var(--cirth-space-3);
1115
+ padding-inline-start: calc(var(--cirth-form-element-spacing-horizontal) + var(--cirth-space-6));
1560
1116
  }
1561
1117
 
1562
- .cirth input:not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"]))[type="search"][aria-invalid="false"] {
1118
+ .cirth input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid="false"] {
1563
1119
  background-image: var(--cirth-icon-search), var(--cirth-icon-valid);
1564
1120
  }
1565
1121
 
1566
- .cirth input:not(:is([type="checkbox"], [type="radio"], [type="range"], [type="file"]))[type="search"][aria-invalid="true"] {
1122
+ .cirth input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid="true"] {
1567
1123
  background-image: var(--cirth-icon-search), var(--cirth-icon-invalid);
1568
1124
  }
1569
1125
 
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;
1126
+ [dir="rtl"] .cirth :where(input):not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"] {
1127
+ background-position: center right var(--cirth-form-element-spacing-horizontal);
1572
1128
  }
1573
1129
 
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;
1130
+ [dir="rtl"] .cirth :where(input):not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid] {
1131
+ background-position: center right var(--cirth-form-element-spacing-horizontal), center left var(--cirth-space-3);
1576
1132
  }
1577
1133
 
1578
1134
  .cirth details {
@@ -1673,7 +1229,7 @@
1673
1229
  .cirth article > header, .cirth article > footer {
1674
1230
  margin-right: calc(var(--cirth-block-spacing-horizontal) * -1);
1675
1231
  margin-left: calc(var(--cirth-block-spacing-horizontal) * -1);
1676
- padding: calc(var(--cirth-block-spacing-vertical) * .66) var(--cirth-block-spacing-horizontal);
1232
+ padding: calc(var(--cirth-block-spacing-vertical) - var(--cirth-space-2)) var(--cirth-block-spacing-horizontal);
1677
1233
  background-color: var(--cirth-card-sectioning-background-color);
1678
1234
  }
1679
1235
 
@@ -1697,254 +1253,124 @@
1697
1253
  width: 100%;
1698
1254
  margin-bottom: var(--cirth-spacing);
1699
1255
  border-radius: var(--cirth-border-radius);
1700
- box-shadow: var(--cirth-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
1256
+ box-shadow: var(--cirth-group-box-shadow, 0 0 0 #0000);
1701
1257
  vertical-align: middle;
1702
1258
  transition: box-shadow var(--cirth-transition);
1703
1259
  display: inline-flex;
1704
1260
  position: relative;
1705
1261
  }
1706
1262
 
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"])) {
1263
+ .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
1264
  flex: auto;
1721
1265
  margin-bottom: 0;
1722
1266
  position: relative;
1723
1267
  }
1724
1268
 
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) {
1269
+ .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
1270
  border-top-left-radius: 0;
1739
1271
  border-bottom-left-radius: 0;
1740
1272
  margin-left: 0;
1741
1273
  }
1742
1274
 
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) {
1275
+ .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
1276
  border-top-right-radius: 0;
1745
1277
  border-bottom-right-radius: 0;
1746
1278
  }
1747
1279
 
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 {
1280
+ .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
1281
  z-index: 2;
1760
1282
  }
1761
1283
 
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) {
1284
+ .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
1285
  margin-left: calc(var(--cirth-border-width) * -1);
1796
1286
  }
1797
1287
 
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"] {
1288
+ .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
1289
  width: auto;
1832
1290
  }
1833
1291
 
1834
1292
  @supports selector(:has(*)) {
1835
- .cirth [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
1293
+ :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
1294
  --cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-button);
1837
1295
  }
1838
1296
 
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);
1297
+ .cirth [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"]) {
1298
+ border-color: #0000;
1845
1299
  }
1846
1300
 
1847
1301
  .cirth [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select {
1848
- border-color: rgba(0, 0, 0, 0);
1302
+ border-color: #0000;
1849
1303
  }
1850
1304
 
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);
1305
+ .cirth [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"]) {
1306
+ border-color: #0000;
1853
1307
  }
1854
1308
 
1855
1309
  .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);
1310
+ border-color: #0000;
1861
1311
  }
1862
1312
 
1863
- .cirth [role="group"]:has(input:not(:is([type="submit"], [type="button"])):focus, select:focus) {
1313
+ :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
1314
  --cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-input);
1865
1315
  }
1866
1316
 
1867
- .cirth [role="search"]:has(input:not(:is([type="submit"], [type="button"])):focus, select:focus) button {
1317
+ .cirth [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button {
1868
1318
  --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1869
1319
  var(--cirth-primary-border);
1870
1320
  --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1871
1321
  var(--cirth-primary-hover-border);
1872
1322
  }
1873
1323
 
1874
- .cirth [role="search"]:has(input:not(:is([type="submit"], [type="button"])):focus, select:focus) [type="submit"] {
1324
+ .cirth [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"] {
1875
1325
  --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1876
1326
  var(--cirth-primary-border);
1877
1327
  --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1878
1328
  var(--cirth-primary-hover-border);
1879
1329
  }
1880
1330
 
1881
- .cirth [role="search"]:has(input:not(:is([type="submit"], [type="button"])):focus, select:focus) [type="button"] {
1331
+ .cirth [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"] {
1882
1332
  --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1883
1333
  var(--cirth-primary-border);
1884
1334
  --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1885
1335
  var(--cirth-primary-hover-border);
1886
1336
  }
1887
1337
 
1888
- .cirth [role="search"]:has(input:not(:is([type="submit"], [type="button"])):focus, select:focus) [role="button"] {
1338
+ .cirth [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"] {
1889
1339
  --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1890
1340
  var(--cirth-primary-border);
1891
1341
  --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1892
1342
  var(--cirth-primary-hover-border);
1893
1343
  }
1894
1344
 
1895
- .cirth [role="group"]:has(input:not(:is([type="submit"], [type="button"])):focus, select:focus) button {
1345
+ .cirth [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button {
1896
1346
  --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1897
1347
  var(--cirth-primary-border);
1898
1348
  --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1899
1349
  var(--cirth-primary-hover-border);
1900
1350
  }
1901
1351
 
1902
- .cirth [role="group"]:has(input:not(:is([type="submit"], [type="button"])):focus, select:focus) [type="submit"] {
1352
+ .cirth [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"] {
1903
1353
  --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1904
1354
  var(--cirth-primary-border);
1905
1355
  --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1906
1356
  var(--cirth-primary-hover-border);
1907
1357
  }
1908
1358
 
1909
- .cirth [role="group"]:has(input:not(:is([type="submit"], [type="button"])):focus, select:focus) [type="button"] {
1359
+ .cirth [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"] {
1910
1360
  --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1911
1361
  var(--cirth-primary-border);
1912
1362
  --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1913
1363
  var(--cirth-primary-hover-border);
1914
1364
  }
1915
1365
 
1916
- .cirth [role="group"]:has(input:not(:is([type="submit"], [type="button"])):focus, select:focus) [role="button"] {
1366
+ .cirth [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"] {
1917
1367
  --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1918
1368
  var(--cirth-primary-border);
1919
1369
  --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1920
1370
  var(--cirth-primary-hover-border);
1921
1371
  }
1922
1372
 
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 {
1373
+ .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
1374
  box-shadow: none;
1949
1375
  }
1950
1376
  }
@@ -1959,11 +1385,11 @@
1959
1385
  border-bottom-right-radius: var(--cirth-radius-pill);
1960
1386
  }
1961
1387
 
1962
- .cirth [aria-busy="true"]:not(:is(input, select, textarea, html, form)) {
1388
+ .cirth [aria-busy="true"]:not(input, select, textarea, html, form) {
1963
1389
  white-space: nowrap;
1964
1390
  }
1965
1391
 
1966
- .cirth [aria-busy="true"]:not(:is(input, select, textarea, html, form)):before {
1392
+ .cirth [aria-busy="true"]:not(input, select, textarea, html, form):before {
1967
1393
  background-image: var(--cirth-icon-loading);
1968
1394
  content: "";
1969
1395
  vertical-align: -.125em;
@@ -1974,27 +1400,15 @@
1974
1400
  display: inline-block;
1975
1401
  }
1976
1402
 
1977
- .cirth [aria-busy="true"]:not(:is(input, select, textarea, html, form)):not(:empty):before {
1403
+ .cirth [aria-busy="true"]:not(input, select, textarea, html, form):not(:empty):before {
1978
1404
  margin-inline-end: calc(var(--cirth-spacing) * .5);
1979
1405
  }
1980
1406
 
1981
- .cirth [aria-busy="true"]:not(:is(input, select, textarea, html, form)):empty {
1407
+ .cirth [aria-busy="true"]:not(input, select, textarea, html, form):empty {
1982
1408
  text-align: center;
1983
1409
  }
1984
1410
 
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"] {
1411
+ .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
1412
  pointer-events: none;
1999
1413
  }
2000
1414
 
@@ -2028,13 +1442,13 @@
2028
1442
  overflow: auto;
2029
1443
  }
2030
1444
 
2031
- @media (width >= 576px) {
1445
+ @media (min-width: 576px) {
2032
1446
  .cirth dialog > article {
2033
1447
  max-width: 510px;
2034
1448
  }
2035
1449
  }
2036
1450
 
2037
- @media (width >= 768px) {
1451
+ @media (min-width: 768px) {
2038
1452
  .cirth dialog > article {
2039
1453
  max-width: 700px;
2040
1454
  }
@@ -2073,7 +1487,7 @@
2073
1487
  background-size: auto var(--cirth-size-4);
2074
1488
  opacity: .5;
2075
1489
  transition: opacity var(--cirth-transition);
2076
- background-color: rgba(0, 0, 0, 0);
1490
+ background-color: #0000;
2077
1491
  background-repeat: no-repeat;
2078
1492
  border: none;
2079
1493
  margin-left: auto;
@@ -2088,7 +1502,7 @@
2088
1502
  display: none;
2089
1503
  }
2090
1504
 
2091
- :where(nav li):before {
1505
+ .cirth :where(nav li):before {
2092
1506
  float: left;
2093
1507
  content: "​";
2094
1508
  }
@@ -2134,23 +1548,7 @@
2134
1548
  text-decoration: none;
2135
1549
  }
2136
1550
 
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"])) {
1551
+ .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
1552
  height: auto;
2155
1553
  margin-right: inherit;
2156
1554
  margin-bottom: 0;
@@ -2187,7 +1585,7 @@
2187
1585
  .cirth nav[aria-label="breadcrumb"] a[aria-current]:not([aria-current="false"]) {
2188
1586
  color: inherit;
2189
1587
  pointer-events: none;
2190
- background-color: rgba(0, 0, 0, 0);
1588
+ background-color: #0000;
2191
1589
  text-decoration: none;
2192
1590
  }
2193
1591
 
@@ -2217,10 +1615,10 @@
2217
1615
  width: 100%;
2218
1616
  height: var(--cirth-size-2);
2219
1617
  margin-bottom: calc(var(--cirth-spacing) * .5);
1618
+ border: var(--cirth-border-width-1) solid var(--cirth-progress-border-color);
2220
1619
  border-radius: var(--cirth-border-radius);
2221
1620
  background-color: var(--cirth-progress-background-color);
2222
1621
  color: var(--cirth-progress-color);
2223
- border: 0;
2224
1622
  display: inline-block;
2225
1623
  overflow: hidden;
2226
1624
  }
@@ -2246,11 +1644,11 @@
2246
1644
  }
2247
1645
 
2248
1646
  .cirth progress:indeterminate[value]::-webkit-progress-value {
2249
- background-color: rgba(0, 0, 0, 0);
1647
+ background-color: #0000;
2250
1648
  }
2251
1649
 
2252
1650
  .cirth progress:indeterminate::-moz-progress-bar {
2253
- background-color: rgba(0, 0, 0, 0);
1651
+ background-color: #0000;
2254
1652
  }
2255
1653
 
2256
1654
  [dir="rtl"] .cirth progress:indeterminate {
@@ -2272,7 +1670,7 @@
2272
1670
  position: relative;
2273
1671
  }
2274
1672
 
2275
- .cirth [data-tooltip]:not(:is(a, button, input, [role="button"])) {
1673
+ .cirth [data-tooltip]:not(a, button, input, [role="button"]) {
2276
1674
  border-bottom: var(--cirth-border-width-1) dotted;
2277
1675
  cursor: help;
2278
1676
  text-decoration: none;
@@ -2304,10 +1702,10 @@
2304
1702
  .cirth [data-tooltip][data-placement="top"]:after, .cirth [data-tooltip]:after {
2305
1703
  content: "";
2306
1704
  color: var(--cirth-tooltip-background-color);
2307
- background-color: rgba(0, 0, 0, 0);
1705
+ background-color: #0000;
2308
1706
  border-top: .3rem solid;
2309
- border-left: .3rem solid rgba(0, 0, 0, 0);
2310
- border-right: .3rem solid rgba(0, 0, 0, 0);
1707
+ border-left: .3rem solid #0000;
1708
+ border-right: .3rem solid #0000;
2311
1709
  border-radius: 0;
2312
1710
  padding: 0;
2313
1711
  transform: translate(-50%);
@@ -2320,7 +1718,7 @@
2320
1718
  }
2321
1719
 
2322
1720
  .cirth [data-tooltip][data-placement="bottom"]:after {
2323
- border: .3rem solid rgba(0, 0, 0, 0);
1721
+ border: .3rem solid #0000;
2324
1722
  border-bottom-color: currentColor;
2325
1723
  transform: translate(-50%, -.3rem);
2326
1724
  }
@@ -2331,7 +1729,7 @@
2331
1729
  }
2332
1730
 
2333
1731
  .cirth [data-tooltip][data-placement="left"]:after {
2334
- border: .3rem solid rgba(0, 0, 0, 0);
1732
+ border: .3rem solid #0000;
2335
1733
  border-left-color: currentColor;
2336
1734
  transform: translate(.3rem, -50%);
2337
1735
  }
@@ -2342,7 +1740,7 @@
2342
1740
  }
2343
1741
 
2344
1742
  .cirth [data-tooltip][data-placement="right"]:after {
2345
- border: .3rem solid rgba(0, 0, 0, 0);
1743
+ border: .3rem solid #0000;
2346
1744
  border-right-color: currentColor;
2347
1745
  transform: translate(-.3rem, -50%);
2348
1746
  }
@@ -2464,14 +1862,13 @@
2464
1862
  --cirth-color-white: #fff;
2465
1863
  --cirth-color-transparent: transparent;
2466
1864
  --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";
1865
+ --cirth-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
1866
+ --cirth-font-family-sans: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial,
1867
+ "Helvetica Neue", sans-serif, var(--cirth-font-family-emoji);
2471
1868
  --cirth-font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif;
2472
1869
  --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);
1870
+ monospace, var(--cirth-font-family-emoji);
1871
+ --cirth-font-family-display: var(--cirth-font-family-serif);
2475
1872
  --cirth-font-size-xs: .75rem;
2476
1873
  --cirth-font-size-sm: .875rem;
2477
1874
  --cirth-font-size-md: 1rem;
@@ -2487,15 +1884,14 @@
2487
1884
  --cirth-font-weight-medium: 500;
2488
1885
  --cirth-font-weight-semibold: 600;
2489
1886
  --cirth-font-weight-bold: 700;
1887
+ --cirth-letter-spacing-tight: -.02em;
1888
+ --cirth-letter-spacing-snug: -.01em;
2490
1889
  --cirth-line-height-none: 1;
2491
1890
  --cirth-line-height-tight: 1.125;
2492
1891
  --cirth-line-height-snug: 1.25;
2493
1892
  --cirth-line-height-normal: 1.5;
2494
1893
  --cirth-line-height-relaxed: 1.625;
2495
1894
  --cirth-line-height-loose: 2;
2496
- --cirth-letter-spacing-tight: 0;
2497
- --cirth-letter-spacing-normal: 0;
2498
- --cirth-letter-spacing-wide: .025em;
2499
1895
  --cirth-space-0: 0;
2500
1896
  --cirth-space-1: .25rem;
2501
1897
  --cirth-space-2: .5rem;
@@ -2537,17 +1933,6 @@
2537
1933
  --cirth-outline-width-1: .0625rem;
2538
1934
  --cirth-outline-width-2: .125rem;
2539
1935
  --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
1936
  --cirth-duration-instant: 0s;
2552
1937
  --cirth-duration-fast: .1s;
2553
1938
  --cirth-duration-normal: .2s;
@@ -2566,28 +1951,28 @@
2566
1951
  --cirth-z-index-modal-backdrop: 1040;
2567
1952
  --cirth-z-index-modal: 1050;
2568
1953
  --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);
1954
+ --cirth-font-family: var(--cirth-font-family-sans);
2575
1955
  --cirth-line-height: var(--cirth-line-height-normal);
2576
1956
  --cirth-font-weight: var(--cirth-font-weight-regular);
2577
1957
  --cirth-font-size: 100%;
2578
- --cirth-text-underline-offset: .1rem;
2579
- --cirth-border-radius: var(--cirth-radius-sm);
1958
+ --cirth-text-underline-offset: .15em;
1959
+ --cirth-border-radius: var(--cirth-radius-lg);
1960
+ --cirth-card-border-radius: calc(var(--cirth-border-radius) * 1.5);
1961
+ --cirth-checkbox-border-radius: min(var(--cirth-border-radius),
1962
+ var(--cirth-radius-sm));
1963
+ --cirth-code-border-radius: min(var(--cirth-border-radius),
1964
+ var(--cirth-radius-sm));
2580
1965
  --cirth-border-width: var(--cirth-border-width-1);
2581
1966
  --cirth-outline-width: var(--cirth-outline-width-2);
2582
- --cirth-transition: var(--cirth-duration-normal) var(--cirth-ease-in-out);
1967
+ --cirth-transition: var(--cirth-duration-normal) var(--cirth-ease-out);
2583
1968
  --cirth-spacing: var(--cirth-space-4);
2584
1969
  --cirth-typography-spacing-vertical: var(--cirth-space-4);
2585
1970
  --cirth-block-spacing-vertical: var(--cirth-spacing);
2586
1971
  --cirth-block-spacing-horizontal: var(--cirth-spacing);
2587
- --cirth-form-element-spacing-vertical: var(--cirth-space-3);
1972
+ --cirth-form-element-spacing-vertical: var(--cirth-space-2);
2588
1973
  --cirth-form-element-spacing-horizontal: var(--cirth-space-4);
2589
1974
  --cirth-form-label-font-weight: var(--cirth-font-weight);
2590
- --cirth-group-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
1975
+ --cirth-group-box-shadow: 0 0 0 #0000;
2591
1976
  --cirth-group-box-shadow-focus-with-button: 0 0 0 var(--cirth-outline-width)
2592
1977
  var(--cirth-primary-focus);
2593
1978
  --cirth-group-box-shadow-focus-with-input: 0 0 0 var(--cirth-border-width-1)
@@ -2600,42 +1985,12 @@
2600
1985
  --cirth-nav-breadcrumb-divider: ">";
2601
1986
  --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
1987
  --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
- }
1988
+ --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");
1989
+ --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");
1990
+ --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");
1991
+ --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");
1992
+ --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");
1993
+ --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
1994
  }
2640
1995
 
2641
1996
  .cirth a {
@@ -2646,44 +2001,57 @@
2646
2001
  --cirth-font-size: .875em;
2647
2002
  }
2648
2003
 
2649
- .cirth h1, .cirth h2, .cirth h3, .cirth h4, .cirth h5, .cirth h6 {
2004
+ .cirth h1, .cirth h2, .cirth h3 {
2650
2005
  --cirth-font-weight: var(--cirth-font-weight-bold);
2651
2006
  }
2652
2007
 
2008
+ .cirth h4, .cirth h5, .cirth h6 {
2009
+ --cirth-font-weight: var(--cirth-font-weight-semibold);
2010
+ }
2011
+
2653
2012
  .cirth h1 {
2654
- --cirth-font-size: var(--cirth-font-size-5xl);
2013
+ --cirth-font-size: clamp(2.25rem, 1.7rem + 2.2vw, 3.5rem);
2655
2014
  --cirth-line-height: var(--cirth-line-height-tight);
2015
+ --cirth-letter-spacing: var(--cirth-letter-spacing-tight);
2656
2016
  --cirth-typography-spacing-top: var(--cirth-space-12);
2657
2017
  }
2658
2018
 
2659
2019
  .cirth h2 {
2660
- --cirth-font-size: 1.75rem;
2020
+ --cirth-font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem);
2661
2021
  --cirth-line-height: 1.15;
2662
- --cirth-typography-spacing-top: 2.625rem;
2022
+ --cirth-letter-spacing: var(--cirth-letter-spacing-tight);
2023
+ --cirth-typography-spacing-top: var(--cirth-space-12);
2663
2024
  }
2664
2025
 
2665
2026
  .cirth h3 {
2666
- --cirth-font-size: 1.5rem;
2667
- --cirth-line-height: 1.175;
2668
- --cirth-typography-spacing-top: 2.25rem;
2027
+ --cirth-font-size: clamp(1.25rem, 1.15rem + .5vw, 1.5rem);
2028
+ --cirth-line-height: 1.2;
2029
+ --cirth-letter-spacing: var(--cirth-letter-spacing-snug);
2030
+ --cirth-typography-spacing-top: var(--cirth-space-10);
2669
2031
  }
2670
2032
 
2671
2033
  .cirth h4 {
2672
2034
  --cirth-font-size: var(--cirth-font-size-xl);
2673
- --cirth-line-height: 1.2;
2674
- --cirth-typography-spacing-top: 1.874rem;
2035
+ --cirth-line-height: var(--cirth-line-height-snug);
2036
+ --cirth-typography-spacing-top: var(--cirth-space-8);
2675
2037
  }
2676
2038
 
2677
2039
  .cirth h5 {
2678
2040
  --cirth-font-size: var(--cirth-font-size-lg);
2679
- --cirth-line-height: 1.225;
2680
- --cirth-typography-spacing-top: 1.6875rem;
2041
+ --cirth-line-height: var(--cirth-line-height-snug);
2042
+ --cirth-typography-spacing-top: var(--cirth-space-8);
2681
2043
  }
2682
2044
 
2683
2045
  .cirth h6 {
2684
2046
  --cirth-font-size: var(--cirth-font-size-md);
2685
2047
  --cirth-line-height: var(--cirth-line-height-snug);
2686
- --cirth-typography-spacing-top: var(--cirth-space-6);
2048
+ --cirth-typography-spacing-top: var(--cirth-space-8);
2049
+ }
2050
+
2051
+ .cirth article {
2052
+ --cirth-border-radius: var(--cirth-card-border-radius);
2053
+ --cirth-block-spacing-vertical: var(--cirth-space-6);
2054
+ --cirth-block-spacing-horizontal: var(--cirth-space-6);
2687
2055
  }
2688
2056
 
2689
2057
  .cirth thead th, .cirth thead td, .cirth tfoot th, .cirth tfoot td {
@@ -2692,33 +2060,44 @@
2692
2060
  }
2693
2061
 
2694
2062
  .cirth pre, .cirth code, .cirth kbd, .cirth samp {
2695
- --cirth-font-family: var(--cirth-font-family-monospace);
2063
+ --cirth-font-family: var(--cirth-font-family-mono);
2696
2064
  }
2697
2065
 
2698
- .cirth kbd {
2699
- --cirth-font-weight: bolder;
2066
+ .cirth code, .cirth kbd, .cirth samp {
2067
+ --cirth-border-radius: var(--cirth-code-border-radius);
2700
2068
  }
2701
2069
 
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);
2070
+ .cirth kbd {
2071
+ --cirth-font-weight: bolder;
2704
2072
  }
2705
2073
 
2706
- .cirth :where(select, textarea) {
2074
+ .cirth input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), .cirth :where(select, textarea) {
2707
2075
  --cirth-outline-width: var(--cirth-outline-width-1);
2076
+ --cirth-line-height: var(--cirth-line-height-relaxed);
2708
2077
  }
2709
2078
 
2710
2079
  .cirth [type="search"] {
2711
2080
  --cirth-border-radius: var(--cirth-radius-pill);
2712
2081
  }
2713
2082
 
2714
- .cirth [type="checkbox"] {
2715
- --cirth-border-width: var(--cirth-border-width-2);
2083
+ .cirth button, .cirth [type="submit"], .cirth [type="reset"], .cirth [type="button"], .cirth [role="button"] {
2084
+ --cirth-font-weight: var(--cirth-font-weight-semibold);
2085
+ --cirth-line-height: var(--cirth-line-height-relaxed);
2086
+ --cirth-form-element-spacing-horizontal: var(--cirth-space-5);
2716
2087
  }
2717
2088
 
2718
- .cirth [type="radio"] {
2089
+ .cirth [type="file"] {
2090
+ --cirth-line-height: var(--cirth-line-height-relaxed);
2091
+ }
2092
+
2093
+ .cirth [type="checkbox"], .cirth [type="radio"] {
2719
2094
  --cirth-border-width: var(--cirth-border-width-2);
2720
2095
  }
2721
2096
 
2097
+ .cirth [type="checkbox"] {
2098
+ --cirth-border-radius: var(--cirth-checkbox-border-radius);
2099
+ }
2100
+
2722
2101
  .cirth [type="checkbox"][role="switch"] {
2723
2102
  --cirth-border-width: .1875rem;
2724
2103
  }
@@ -2727,31 +2106,11 @@
2727
2106
  --cirth-border-radius: var(--cirth-radius-pill);
2728
2107
  }
2729
2108
 
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"] {
2109
+ .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
2110
  --cirth-form-element-spacing-horizontal: var(--cirth-space-8);
2748
2111
  }
2749
2112
 
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 {
2113
+ .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
2114
  filter: brightness(0) invert();
2756
2115
  }
2757
2116
 
@@ -2759,83 +2118,83 @@
2759
2118
  --lightningcss-light: initial;
2760
2119
  --lightningcss-dark: ;
2761
2120
  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;
2121
+ --cirth-background-color: oklch(97.4% .008 69.35);
2122
+ --cirth-color: oklch(35.3% .021 264);
2123
+ --cirth-text-selection-color: oklch(65.7% .121 69.35 / .25);
2124
+ --cirth-muted-color: oklch(52.7% .032 264);
2125
+ --cirth-muted-border-color: oklch(93.85% .003 264);
2126
+ --cirth-primary: oklch(52.7% .097 69.35);
2127
+ --cirth-primary-background: oklch(52.7% .097 69.35);
2769
2128
  --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;
2129
+ --cirth-primary-underline: oklch(52.7% .097 69.35 / .5);
2130
+ --cirth-primary-hover: oklch(44% .081 69.35);
2131
+ --cirth-primary-hover-background: oklch(48.3% .089 69.35);
2773
2132
  --cirth-primary-hover-border: var(--cirth-primary-hover-background);
2774
2133
  --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;
2134
+ --cirth-primary-focus: oklch(52.7% .097 69.35 / .75);
2135
+ --cirth-primary-inverse: oklch(100% 0 0);
2136
+ --cirth-secondary: oklch(52.7% .032 264);
2137
+ --cirth-secondary-background: oklch(48.3% .03 264);
2779
2138
  --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;
2139
+ --cirth-secondary-underline: oklch(52.7% .032 264 / .5);
2140
+ --cirth-secondary-hover: oklch(44% .028 264);
2141
+ --cirth-secondary-hover-background: oklch(44% .028 264);
2783
2142
  --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
2784
2143
  --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;
2144
+ --cirth-secondary-focus: oklch(48.3% .03 264 / .7);
2145
+ --cirth-secondary-inverse: oklch(100% 0 0);
2146
+ --cirth-contrast: oklch(22.3% .006 264);
2147
+ --cirth-contrast-background: oklch(22.3% .006 264);
2789
2148
  --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;
2149
+ --cirth-contrast-underline: oklch(22.3% .006 264 / .5);
2150
+ --cirth-contrast-hover: oklch(0% 0 0);
2151
+ --cirth-contrast-hover-background: oklch(0% 0 0);
2793
2152
  --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
2794
2153
  --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;
2154
+ --cirth-contrast-focus: oklch(48.3% .03 264 / .7);
2155
+ --cirth-contrast-inverse: oklch(100% 0 0);
2156
+ --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);
2157
+ --cirth-h1-color: oklch(31% .016 264);
2158
+ --cirth-h2-color: oklch(35.3% .021 264);
2159
+ --cirth-h3-color: oklch(39.7% .025 264);
2160
+ --cirth-h4-color: oklch(44% .028 264);
2161
+ --cirth-h5-color: oklch(48.3% .03 264);
2162
+ --cirth-h6-color: oklch(52.7% .032 264);
2163
+ --cirth-mark-background-color: oklch(93% .05 78);
2164
+ --cirth-mark-color: oklch(18% 0 264);
2165
+ --cirth-ins-color: oklch(35.3% .067 160.59);
2166
+ --cirth-del-color: oklch(35.3% .122 29.73);
2808
2167
  --cirth-blockquote-border-color: var(--cirth-muted-border-color);
2809
2168
  --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);
2169
+ --cirth-button-box-shadow: 0 0 0 #0000;
2170
+ --cirth-button-hover-box-shadow: 0 0 0 #0000;
2812
2171
  --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;
2172
+ --cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
2173
+ --cirth-code-background-color: oklch(97% 0 288);
2174
+ --cirth-code-color: oklch(52.7% .032 264);
2816
2175
  --cirth-code-kbd-background-color: var(--cirth-color);
2817
2176
  --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;
2177
+ --cirth-form-element-background-color: oklch(99% 0 336);
2178
+ --cirth-form-element-selected-background-color: oklch(91.7% .006 264);
2179
+ --cirth-form-element-border-color: oklch(61.3% .032 264);
2180
+ --cirth-form-element-color: oklch(26.7% .011 264);
2822
2181
  --cirth-form-element-placeholder-color: var(--cirth-muted-color);
2823
- --cirth-form-element-active-background-color: #fff;
2182
+ --cirth-form-element-active-background-color: oklch(100% 0 0);
2824
2183
  --cirth-form-element-active-border-color: var(--cirth-primary-border);
2825
2184
  --cirth-form-element-focus-color: var(--cirth-primary-border);
2826
2185
  --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;
2186
+ --cirth-form-element-invalid-border-color: oklch(65.7% .196 29.73);
2187
+ --cirth-form-element-invalid-active-border-color: oklch(52.7% .181 29.73);
2829
2188
  --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;
2189
+ --cirth-form-element-valid-border-color: oklch(61.3% .117 160.59);
2190
+ --cirth-form-element-valid-active-border-color: oklch(52.7% .1 160.59);
2832
2191
  --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
2833
- --cirth-switch-background-color: #bfc7d9;
2192
+ --cirth-switch-background-color: oklch(61.3% .032 264);
2834
2193
  --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;
2194
+ --cirth-switch-color: oklch(100% 0 0);
2195
+ --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
2196
+ --cirth-range-border-color: oklch(91.7% .006 264);
2197
+ --cirth-range-active-border-color: oklch(83% .016 264);
2839
2198
  --cirth-range-thumb-border-color: var(--cirth-background-color);
2840
2199
  --cirth-range-thumb-color: var(--cirth-secondary-background);
2841
2200
  --cirth-range-thumb-active-color: var(--cirth-primary-background);
@@ -2843,29 +2202,22 @@
2843
2202
  --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
2844
2203
  --cirth-accordion-close-summary-color: var(--cirth-color);
2845
2204
  --cirth-accordion-open-summary-color: var(--cirth-muted-color);
2846
- --cirth-card-background-color: var(--cirth-background-color);
2205
+ --cirth-card-background-color: oklch(100% 0 0);
2847
2206
  --cirth-card-border-color: var(--cirth-muted-border-color);
2848
2207
  --cirth-card-box-shadow: var(--cirth-box-shadow);
2849
- --cirth-card-sectioning-background-color: #fbfcfc;
2208
+ --cirth-card-sectioning-background-color: oklch(99% 0 336);
2850
2209
  --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;
2210
+ --cirth-modal-overlay-background-color: oklch(93.85% .003 264deg / var(--cirth-opacity-overlay));
2211
+ --cirth-progress-background-color: oklch(91.7% .006 264);
2212
+ --cirth-progress-border-color: oklch(61.3% .032 264);
2853
2213
  --cirth-progress-color: var(--cirth-primary-background);
2854
2214
  --cirth-tooltip-background-color: var(--cirth-contrast-background);
2855
2215
  --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);
2216
+ --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");
2217
+ --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
2218
  }
2863
2219
 
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"]) {
2220
+ .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
2221
  --cirth-form-element-focus-color: var(--cirth-primary-focus);
2870
2222
  }
2871
2223
 
@@ -2874,83 +2226,83 @@
2874
2226
  --lightningcss-light: ;
2875
2227
  --lightningcss-dark: initial;
2876
2228
  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;
2229
+ --cirth-background-color: oklch(20.15% .003 264);
2230
+ --cirth-color: oklch(83% .016 264);
2231
+ --cirth-text-selection-color: oklch(70% .129 69.35 / .1875);
2232
+ --cirth-muted-color: oklch(61.3% .032 264);
2233
+ --cirth-muted-border-color: oklch(26.7% .011 264);
2234
+ --cirth-primary: oklch(70% .129 69.35);
2235
+ --cirth-primary-background: oklch(52.7% .097 69.35);
2884
2236
  --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;
2237
+ --cirth-primary-underline: oklch(70% .129 69.35 / .5);
2238
+ --cirth-primary-hover: oklch(78.7% .146 69.35);
2239
+ --cirth-primary-hover-background: oklch(57% .105 69.35);
2888
2240
  --cirth-primary-hover-border: var(--cirth-primary-hover-background);
2889
2241
  --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;
2242
+ --cirth-primary-focus: oklch(70% .129 69.35 / .7);
2243
+ --cirth-primary-inverse: oklch(100% 0 0);
2244
+ --cirth-secondary: oklch(70% .028 264);
2245
+ --cirth-secondary-background: oklch(48.3% .03 264);
2894
2246
  --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;
2247
+ --cirth-secondary-underline: oklch(70% .028 264 / .5);
2248
+ --cirth-secondary-hover: oklch(78.7% .021 264);
2249
+ --cirth-secondary-hover-background: oklch(52.7% .032 264);
2898
2250
  --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
2899
2251
  --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;
2252
+ --cirth-secondary-focus: oklch(70% .028 264 / .7);
2253
+ --cirth-secondary-inverse: oklch(100% 0 0);
2254
+ --cirth-contrast: oklch(91.7% .006 264);
2255
+ --cirth-contrast-background: oklch(96% 0 264);
2904
2256
  --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;
2257
+ --cirth-contrast-underline: oklch(91.7% .006 264 / .5);
2258
+ --cirth-contrast-hover: oklch(100% 0 0);
2259
+ --cirth-contrast-hover-background: oklch(100% 0 0);
2908
2260
  --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
2909
2261
  --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;
2262
+ --cirth-contrast-focus: oklch(87.3% .011 264 / .5);
2263
+ --cirth-contrast-inverse: oklch(0% 0 0);
2264
+ --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);
2265
+ --cirth-h1-color: oklch(96% 0 264);
2266
+ --cirth-h2-color: oklch(91.7% .006 264);
2267
+ --cirth-h3-color: oklch(83% .016 264);
2268
+ --cirth-h4-color: oklch(78.7% .021 264);
2269
+ --cirth-h5-color: oklch(74.3% .025 264);
2270
+ --cirth-h6-color: oklch(65.7% .03 264);
2271
+ --cirth-mark-background-color: oklch(35.3% .063 78);
2272
+ --cirth-mark-color: oklch(100% 0 0);
2273
+ --cirth-ins-color: oklch(78.7% .15 160.59);
2274
+ --cirth-del-color: oklch(78.7% .106 29.73);
2923
2275
  --cirth-blockquote-border-color: var(--cirth-muted-border-color);
2924
2276
  --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);
2277
+ --cirth-button-box-shadow: 0 0 0 #0000;
2278
+ --cirth-button-hover-box-shadow: 0 0 0 #0000;
2927
2279
  --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;
2280
+ --cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
2281
+ --cirth-code-background-color: oklch(23.4% .00725 264);
2282
+ --cirth-code-color: oklch(65.7% .03 264);
2931
2283
  --cirth-code-kbd-background-color: var(--cirth-color);
2932
2284
  --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;
2285
+ --cirth-form-element-background-color: oklch(24.5% .0085 264);
2286
+ --cirth-form-element-selected-background-color: oklch(31% .016 264);
2287
+ --cirth-form-element-border-color: oklch(52.7% .032 264);
2288
+ --cirth-form-element-color: oklch(91.7% .006 264);
2289
+ --cirth-form-element-placeholder-color: oklch(65.7% .03 264);
2290
+ --cirth-form-element-active-background-color: oklch(23.4% .00725 264);
2939
2291
  --cirth-form-element-active-border-color: var(--cirth-primary-border);
2940
2292
  --cirth-form-element-focus-color: var(--cirth-primary-border);
2941
2293
  --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;
2294
+ --cirth-form-element-invalid-border-color: oklch(70% .163 29.73);
2295
+ --cirth-form-element-invalid-active-border-color: oklch(78.7% .106 29.73);
2944
2296
  --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;
2297
+ --cirth-form-element-valid-border-color: oklch(70% .133 160.59);
2298
+ --cirth-form-element-valid-active-border-color: oklch(78.7% .15 160.59);
2947
2299
  --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
2948
- --cirth-switch-background-color: #333c4e;
2300
+ --cirth-switch-background-color: oklch(52.7% .032 264);
2949
2301
  --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;
2302
+ --cirth-switch-color: oklch(100% 0 0);
2303
+ --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
2304
+ --cirth-range-border-color: oklch(26.7% .011 264);
2305
+ --cirth-range-active-border-color: oklch(31% .016 264);
2954
2306
  --cirth-range-thumb-border-color: var(--cirth-background-color);
2955
2307
  --cirth-range-thumb-color: var(--cirth-secondary-background);
2956
2308
  --cirth-range-thumb-active-color: var(--cirth-primary-background);
@@ -2958,18 +2310,19 @@
2958
2310
  --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
2959
2311
  --cirth-accordion-close-summary-color: var(--cirth-color);
2960
2312
  --cirth-accordion-open-summary-color: var(--cirth-muted-color);
2961
- --cirth-card-background-color: #181c25;
2313
+ --cirth-card-background-color: oklch(22.3% .006 264);
2962
2314
  --cirth-card-border-color: var(--cirth-card-background-color);
2963
2315
  --cirth-card-box-shadow: var(--cirth-box-shadow);
2964
- --cirth-card-sectioning-background-color: #1a1f28;
2316
+ --cirth-card-sectioning-background-color: oklch(23.4% .00725 264);
2965
2317
  --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);
2318
+ --cirth-modal-overlay-background-color: oklch(9% 0 312deg / var(--cirth-opacity-overlay));
2319
+ --cirth-progress-background-color: oklch(26.7% .011 264);
2320
+ --cirth-progress-border-color: oklch(52.7% .032 264);
2321
+ --cirth-progress-color: oklch(61.3% .113 69.35);
2969
2322
  --cirth-tooltip-background-color: var(--cirth-contrast-background);
2970
2323
  --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");
2324
+ --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");
2325
+ --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
2326
  }
2974
2327
 
2975
2328
  .cirth:not([data-theme]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
@@ -2981,83 +2334,83 @@
2981
2334
  --lightningcss-light: ;
2982
2335
  --lightningcss-dark: initial;
2983
2336
  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;
2337
+ --cirth-background-color: oklch(20.15% .003 264);
2338
+ --cirth-color: oklch(83% .016 264);
2339
+ --cirth-text-selection-color: oklch(70% .129 69.35 / .1875);
2340
+ --cirth-muted-color: oklch(61.3% .032 264);
2341
+ --cirth-muted-border-color: oklch(26.7% .011 264);
2342
+ --cirth-primary: oklch(70% .129 69.35);
2343
+ --cirth-primary-background: oklch(52.7% .097 69.35);
2991
2344
  --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;
2345
+ --cirth-primary-underline: oklch(70% .129 69.35 / .5);
2346
+ --cirth-primary-hover: oklch(78.7% .146 69.35);
2347
+ --cirth-primary-hover-background: oklch(57% .105 69.35);
2995
2348
  --cirth-primary-hover-border: var(--cirth-primary-hover-background);
2996
2349
  --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;
2350
+ --cirth-primary-focus: oklch(70% .129 69.35 / .7);
2351
+ --cirth-primary-inverse: oklch(100% 0 0);
2352
+ --cirth-secondary: oklch(70% .028 264);
2353
+ --cirth-secondary-background: oklch(48.3% .03 264);
3001
2354
  --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;
2355
+ --cirth-secondary-underline: oklch(70% .028 264 / .5);
2356
+ --cirth-secondary-hover: oklch(78.7% .021 264);
2357
+ --cirth-secondary-hover-background: oklch(52.7% .032 264);
3005
2358
  --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
3006
2359
  --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;
2360
+ --cirth-secondary-focus: oklch(70% .028 264 / .7);
2361
+ --cirth-secondary-inverse: oklch(100% 0 0);
2362
+ --cirth-contrast: oklch(91.7% .006 264);
2363
+ --cirth-contrast-background: oklch(96% 0 264);
3011
2364
  --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;
2365
+ --cirth-contrast-underline: oklch(91.7% .006 264 / .5);
2366
+ --cirth-contrast-hover: oklch(100% 0 0);
2367
+ --cirth-contrast-hover-background: oklch(100% 0 0);
3015
2368
  --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
3016
2369
  --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;
2370
+ --cirth-contrast-focus: oklch(87.3% .011 264 / .5);
2371
+ --cirth-contrast-inverse: oklch(0% 0 0);
2372
+ --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);
2373
+ --cirth-h1-color: oklch(96% 0 264);
2374
+ --cirth-h2-color: oklch(91.7% .006 264);
2375
+ --cirth-h3-color: oklch(83% .016 264);
2376
+ --cirth-h4-color: oklch(78.7% .021 264);
2377
+ --cirth-h5-color: oklch(74.3% .025 264);
2378
+ --cirth-h6-color: oklch(65.7% .03 264);
2379
+ --cirth-mark-background-color: oklch(35.3% .063 78);
2380
+ --cirth-mark-color: oklch(100% 0 0);
2381
+ --cirth-ins-color: oklch(78.7% .15 160.59);
2382
+ --cirth-del-color: oklch(78.7% .106 29.73);
3030
2383
  --cirth-blockquote-border-color: var(--cirth-muted-border-color);
3031
2384
  --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);
2385
+ --cirth-button-box-shadow: 0 0 0 #0000;
2386
+ --cirth-button-hover-box-shadow: 0 0 0 #0000;
3034
2387
  --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;
2388
+ --cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
2389
+ --cirth-code-background-color: oklch(23.4% .00725 264);
2390
+ --cirth-code-color: oklch(65.7% .03 264);
3038
2391
  --cirth-code-kbd-background-color: var(--cirth-color);
3039
2392
  --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;
2393
+ --cirth-form-element-background-color: oklch(24.5% .0085 264);
2394
+ --cirth-form-element-selected-background-color: oklch(31% .016 264);
2395
+ --cirth-form-element-border-color: oklch(52.7% .032 264);
2396
+ --cirth-form-element-color: oklch(91.7% .006 264);
2397
+ --cirth-form-element-placeholder-color: oklch(65.7% .03 264);
2398
+ --cirth-form-element-active-background-color: oklch(23.4% .00725 264);
3046
2399
  --cirth-form-element-active-border-color: var(--cirth-primary-border);
3047
2400
  --cirth-form-element-focus-color: var(--cirth-primary-border);
3048
2401
  --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;
2402
+ --cirth-form-element-invalid-border-color: oklch(70% .163 29.73);
2403
+ --cirth-form-element-invalid-active-border-color: oklch(78.7% .106 29.73);
3051
2404
  --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;
2405
+ --cirth-form-element-valid-border-color: oklch(70% .133 160.59);
2406
+ --cirth-form-element-valid-active-border-color: oklch(78.7% .15 160.59);
3054
2407
  --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
3055
- --cirth-switch-background-color: #333c4e;
2408
+ --cirth-switch-background-color: oklch(52.7% .032 264);
3056
2409
  --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;
2410
+ --cirth-switch-color: oklch(100% 0 0);
2411
+ --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
2412
+ --cirth-range-border-color: oklch(26.7% .011 264);
2413
+ --cirth-range-active-border-color: oklch(31% .016 264);
3061
2414
  --cirth-range-thumb-border-color: var(--cirth-background-color);
3062
2415
  --cirth-range-thumb-color: var(--cirth-secondary-background);
3063
2416
  --cirth-range-thumb-active-color: var(--cirth-primary-background);
@@ -3065,40 +2418,25 @@
3065
2418
  --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
3066
2419
  --cirth-accordion-close-summary-color: var(--cirth-color);
3067
2420
  --cirth-accordion-open-summary-color: var(--cirth-muted-color);
3068
- --cirth-card-background-color: #181c25;
2421
+ --cirth-card-background-color: oklch(22.3% .006 264);
3069
2422
  --cirth-card-border-color: var(--cirth-card-background-color);
3070
2423
  --cirth-card-box-shadow: var(--cirth-box-shadow);
3071
- --cirth-card-sectioning-background-color: #1a1f28;
2424
+ --cirth-card-sectioning-background-color: oklch(23.4% .00725 264);
3072
2425
  --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);
2426
+ --cirth-modal-overlay-background-color: oklch(9% 0 312deg / var(--cirth-opacity-overlay));
2427
+ --cirth-progress-background-color: oklch(26.7% .011 264);
2428
+ --cirth-progress-border-color: oklch(52.7% .032 264);
2429
+ --cirth-progress-color: oklch(61.3% .113 69.35);
3076
2430
  --cirth-tooltip-background-color: var(--cirth-contrast-background);
3077
2431
  --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");
2432
+ --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");
2433
+ --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
2434
  }
3081
2435
 
3082
- .cirth[data-theme="dark"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
2436
+ .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
2437
  --cirth-form-element-focus-color: var(--cirth-primary-focus);
3084
2438
  }
3085
2439
 
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"] {
2440
+ .cirth progress, .cirth [type="checkbox"], .cirth [type="radio"], .cirth [type="range"] {
3103
2441
  accent-color: var(--cirth-primary);
3104
2442
  }