@cirthcss/cirth 0.15.0-beta.1 → 0.15.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.
Files changed (22) hide show
  1. package/README.md +4 -4
  2. package/dist/cirth.classless.css +315 -254
  3. package/dist/cirth.classless.min.css +1 -1
  4. package/dist/cirth.classless.scoped.css +315 -254
  5. package/dist/cirth.classless.scoped.min.css +1 -1
  6. package/dist/cirth.css +397 -289
  7. package/dist/cirth.min.css +1 -1
  8. package/dist/cirth.print.classless.css +13 -10
  9. package/dist/cirth.print.classless.min.css +1 -1
  10. package/dist/cirth.print.classless.scoped.css +13 -10
  11. package/dist/cirth.print.classless.scoped.min.css +1 -1
  12. package/dist/cirth.print.css +13 -10
  13. package/dist/cirth.print.min.css +1 -1
  14. package/dist/cirth.print.scoped.css +13 -10
  15. package/dist/cirth.print.scoped.min.css +1 -1
  16. package/dist/cirth.scoped.css +397 -289
  17. package/dist/cirth.scoped.min.css +1 -1
  18. package/dist/presets/plain.css +2 -2
  19. package/dist/presets/plain.min.css +1 -1
  20. package/dist/presets/playroom.css +5 -5
  21. package/dist/presets/playroom.min.css +1 -1
  22. package/package.json +6 -4
package/dist/cirth.css CHANGED
@@ -44,6 +44,10 @@ section {
44
44
  margin-bottom: var(--cirth-block-spacing-vertical);
45
45
  }
46
46
 
47
+ main > section + section {
48
+ margin-block-start: var(--cirth-space-8);
49
+ }
50
+
47
51
  .container, .container-fluid {
48
52
  display: grid;
49
53
  }
@@ -218,6 +222,15 @@ mark {
218
222
  background-color: var(--cirth-mark-background-color);
219
223
  color: var(--cirth-mark-color);
220
224
  vertical-align: baseline;
225
+ -webkit-box-decoration-break: clone;
226
+ box-decoration-break: clone;
227
+ }
228
+
229
+ @media (forced-colors: active) {
230
+ mark {
231
+ color: marktext;
232
+ background-color: mark;
233
+ }
221
234
  }
222
235
 
223
236
  blockquote {
@@ -256,7 +269,7 @@ del {
256
269
  }
257
270
 
258
271
  :where(a:not([role="button"])), [role="link"] {
259
- --cirth-color: var(--cirth-primary);
272
+ --cirth-color: var(--cirth-primary-text);
260
273
  --cirth-background-color: transparent;
261
274
  --cirth-underline: var(--cirth-primary-underline);
262
275
  background-color: var(--cirth-background-color);
@@ -270,8 +283,8 @@ del {
270
283
  }
271
284
 
272
285
  :where(a:not([role="button"])):is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), [role="link"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
273
- --cirth-color: var(--cirth-primary-hover);
274
- --cirth-underline: var(--cirth-primary-hover-underline);
286
+ --cirth-color: var(--cirth-primary-active);
287
+ --cirth-underline: var(--cirth-primary-underline-active);
275
288
  --cirth-text-decoration: underline;
276
289
  }
277
290
 
@@ -281,23 +294,23 @@ del {
281
294
  }
282
295
 
283
296
  :where(a:not([role="button"])).secondary, [role="link"].secondary {
284
- --cirth-color: var(--cirth-secondary);
297
+ --cirth-color: var(--cirth-secondary-text);
285
298
  --cirth-underline: var(--cirth-secondary-underline);
286
299
  }
287
300
 
288
301
  :where(a:not([role="button"])).secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), [role="link"].secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
289
- --cirth-color: var(--cirth-secondary-hover);
290
- --cirth-underline: var(--cirth-secondary-hover-underline);
302
+ --cirth-color: var(--cirth-secondary-active);
303
+ --cirth-underline: var(--cirth-secondary-underline-active);
291
304
  }
292
305
 
293
306
  :where(a:not([role="button"])).contrast, [role="link"].contrast {
294
- --cirth-color: var(--cirth-contrast);
307
+ --cirth-color: var(--cirth-contrast-text);
295
308
  --cirth-underline: var(--cirth-contrast-underline);
296
309
  }
297
310
 
298
311
  :where(a:not([role="button"])).contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), [role="link"].contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
299
- --cirth-color: var(--cirth-contrast-hover);
300
- --cirth-underline: var(--cirth-contrast-hover-underline);
312
+ --cirth-color: var(--cirth-contrast-active);
313
+ --cirth-underline: var(--cirth-contrast-underline-active);
301
314
  }
302
315
 
303
316
  :where(a:not([role="button"])):visited:not(.secondary, .contrast, details.dropdown a, [aria-current]:not([aria-current="false"]), :hover, :active, :focus, nav a, :has(article)) {
@@ -323,9 +336,9 @@ button, [type="submit"], [type="reset"], [type="button"] {
323
336
  }
324
337
 
325
338
  button, [type="submit"], [type="reset"], [type="button"], [role="button"] {
326
- --cirth-background-color: var(--cirth-primary-background);
339
+ --cirth-background-color: var(--cirth-primary-surface);
327
340
  --cirth-border-color: var(--cirth-primary-border);
328
- --cirth-color: var(--cirth-primary-inverse);
341
+ --cirth-color: var(--cirth-primary-on-surface);
329
342
  --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 #0000);
330
343
  max-width: 100%;
331
344
  min-block-size: max(2.75rem, var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
@@ -348,9 +361,9 @@ button, [type="submit"], [type="reset"], [type="button"], [role="button"] {
348
361
  }
349
362
 
350
363
  [type="file"]::file-selector-button {
351
- --cirth-background-color: var(--cirth-primary-background);
364
+ --cirth-background-color: var(--cirth-primary-surface);
352
365
  --cirth-border-color: var(--cirth-primary-border);
353
- --cirth-color: var(--cirth-primary-inverse);
366
+ --cirth-color: var(--cirth-primary-on-surface);
354
367
  --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 #0000);
355
368
  max-width: 100%;
356
369
  min-block-size: max(2.75rem, var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
@@ -373,24 +386,24 @@ button, [type="submit"], [type="reset"], [type="button"], [role="button"] {
373
386
  }
374
387
 
375
388
  button[aria-current]:not([aria-current="false"]), button:is(:hover, :active, :focus), [type="submit"][aria-current]:not([aria-current="false"]), [type="submit"]:is(:hover, :active, :focus), [type="reset"][aria-current]:not([aria-current="false"]), [type="reset"]:is(:hover, :active, :focus), [type="button"][aria-current]:not([aria-current="false"]), [type="button"]:is(:hover, :active, :focus), [role="button"][aria-current]:not([aria-current="false"]), [role="button"]:is(:hover, :active, :focus) {
376
- --cirth-background-color: var(--cirth-primary-hover-background);
377
- --cirth-border-color: var(--cirth-primary-hover-border);
389
+ --cirth-background-color: var(--cirth-primary-surface-active);
390
+ --cirth-border-color: var(--cirth-primary-border-active);
378
391
  --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000);
379
- --cirth-color: var(--cirth-primary-inverse);
392
+ --cirth-color: var(--cirth-primary-on-surface);
380
393
  }
381
394
 
382
395
  [type="file"]::file-selector-button:is() {
383
- --cirth-background-color: var(--cirth-primary-hover-background);
384
- --cirth-border-color: var(--cirth-primary-hover-border);
396
+ --cirth-background-color: var(--cirth-primary-surface-active);
397
+ --cirth-border-color: var(--cirth-primary-border-active);
385
398
  --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000);
386
- --cirth-color: var(--cirth-primary-inverse);
399
+ --cirth-color: var(--cirth-primary-on-surface);
387
400
  }
388
401
 
389
402
  [type="file"]::file-selector-button:is(:hover, :active, :focus) {
390
- --cirth-background-color: var(--cirth-primary-hover-background);
391
- --cirth-border-color: var(--cirth-primary-hover-border);
403
+ --cirth-background-color: var(--cirth-primary-surface-active);
404
+ --cirth-border-color: var(--cirth-primary-border-active);
392
405
  --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000);
393
- --cirth-color: var(--cirth-primary-inverse);
406
+ --cirth-color: var(--cirth-primary-on-surface);
394
407
  }
395
408
 
396
409
  button:active, [type="submit"]:active, [type="reset"]:active, [type="button"]:active, [role="button"]:active {
@@ -412,29 +425,29 @@ button:focus-visible, button[aria-current]:not([aria-current="false"]):focus-vis
412
425
  }
413
426
 
414
427
  :is(button, [type="submit"], [type="button"], [role="button"]).secondary, [type="reset"] {
415
- --cirth-background-color: var(--cirth-secondary-background);
428
+ --cirth-background-color: var(--cirth-secondary-surface);
416
429
  --cirth-border-color: var(--cirth-secondary-border);
417
- --cirth-color: var(--cirth-secondary-inverse);
430
+ --cirth-color: var(--cirth-secondary-on-surface);
418
431
  cursor: pointer;
419
432
  }
420
433
 
421
434
  [type="file"]::file-selector-button {
422
- --cirth-background-color: var(--cirth-secondary-background);
435
+ --cirth-background-color: var(--cirth-secondary-surface);
423
436
  --cirth-border-color: var(--cirth-secondary-border);
424
- --cirth-color: var(--cirth-secondary-inverse);
437
+ --cirth-color: var(--cirth-secondary-on-surface);
425
438
  cursor: pointer;
426
439
  }
427
440
 
428
441
  :is(button, [type="submit"], [type="button"], [role="button"]).secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), [type="reset"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
429
- --cirth-background-color: var(--cirth-secondary-hover-background);
430
- --cirth-border-color: var(--cirth-secondary-hover-border);
431
- --cirth-color: var(--cirth-secondary-inverse);
442
+ --cirth-background-color: var(--cirth-secondary-surface-active);
443
+ --cirth-border-color: var(--cirth-secondary-border-active);
444
+ --cirth-color: var(--cirth-secondary-on-surface);
432
445
  }
433
446
 
434
447
  [type="file"]::file-selector-button:is(:hover, :active, :focus) {
435
- --cirth-background-color: var(--cirth-secondary-hover-background);
436
- --cirth-border-color: var(--cirth-secondary-hover-border);
437
- --cirth-color: var(--cirth-secondary-inverse);
448
+ --cirth-background-color: var(--cirth-secondary-surface-active);
449
+ --cirth-border-color: var(--cirth-secondary-border-active);
450
+ --cirth-color: var(--cirth-secondary-on-surface);
438
451
  }
439
452
 
440
453
  :is(button, [type="submit"], [type="button"], [role="button"]).secondary:focus-visible, :is(button, [type="submit"], [type="button"], [role="button"]).secondary[aria-current]:not([aria-current="false"]):focus-visible, [type="reset"]:focus-visible, [type="reset"][aria-current]:not([aria-current="false"]):focus-visible {
@@ -443,15 +456,15 @@ button:focus-visible, button[aria-current]:not([aria-current="false"]):focus-vis
443
456
  }
444
457
 
445
458
  :is(button, [type="submit"], [type="button"], [role="button"]).contrast {
446
- --cirth-background-color: var(--cirth-contrast-background);
459
+ --cirth-background-color: var(--cirth-contrast-surface);
447
460
  --cirth-border-color: var(--cirth-contrast-border);
448
- --cirth-color: var(--cirth-contrast-inverse);
461
+ --cirth-color: var(--cirth-contrast-on-surface);
449
462
  }
450
463
 
451
464
  :is(button, [type="submit"], [type="button"], [role="button"]).contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
452
- --cirth-background-color: var(--cirth-contrast-hover-background);
453
- --cirth-border-color: var(--cirth-contrast-hover-border);
454
- --cirth-color: var(--cirth-contrast-inverse);
465
+ --cirth-background-color: var(--cirth-contrast-surface-active);
466
+ --cirth-border-color: var(--cirth-contrast-border-active);
467
+ --cirth-color: var(--cirth-contrast-on-surface);
455
468
  }
456
469
 
457
470
  :is(button, [type="submit"], [type="button"], [role="button"]).contrast:focus-visible, :is(button, [type="submit"], [type="button"], [role="button"]).contrast[aria-current]:not([aria-current="false"]):focus-visible {
@@ -459,6 +472,27 @@ button:focus-visible, button[aria-current]:not([aria-current="false"]):focus-vis
459
472
  0 0 0 var(--cirth-outline-width) var(--cirth-contrast-focus);
460
473
  }
461
474
 
475
+ :is(button, [type="submit"], [type="button"], [role="button"]).danger {
476
+ --cirth-background-color: light-dark(var(--cirth-error), color-mix(in oklch, var(--cirth-error) 55%, black));
477
+ --cirth-border-color: var(--cirth-background-color);
478
+ --cirth-color: var(--cirth-primary-on-surface);
479
+ }
480
+
481
+ :is(button, [type="submit"], [type="button"], [role="button"]).danger:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
482
+ --cirth-background-color: light-dark(color-mix(in oklch, var(--cirth-error) 85%, black), color-mix(in oklch, var(--cirth-error) 50%, black));
483
+ --cirth-border-color: var(--cirth-background-color);
484
+ --cirth-color: var(--cirth-primary-on-surface);
485
+ }
486
+
487
+ :is(button, [type="submit"], [type="button"], [role="button"]).danger:focus-visible, :is(button, [type="submit"], [type="button"], [role="button"]).danger[aria-current]:not([aria-current="false"]):focus-visible {
488
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000),
489
+ 0
490
+ 0
491
+ 0
492
+ var(--cirth-outline-width)
493
+ var(--cirth-form-element-invalid-focus-color);
494
+ }
495
+
462
496
  :is(button, [type="submit"], [type="button"], [role="button"]).outline, [type="reset"].outline {
463
497
  --cirth-background-color: var(--cirth-form-element-background-color);
464
498
  }
@@ -468,80 +502,106 @@ button:focus-visible, button[aria-current]:not([aria-current="false"]):focus-vis
468
502
  }
469
503
 
470
504
  :is(button, [type="submit"], [type="button"], [role="button"]).outline, [type="reset"].outline {
471
- --cirth-color: var(--cirth-primary);
472
- --cirth-border-color: var(--cirth-primary);
505
+ --cirth-color: var(--cirth-primary-text);
506
+ --cirth-border-color: var(--cirth-primary-text);
473
507
  }
474
508
 
475
509
  :is(button, [type="submit"], [type="button"], [role="button"]).outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), [type="reset"].outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
476
510
  --cirth-background-color: color-mix(in oklch,
477
- var(--cirth-primary) 12%,
511
+ var(--cirth-primary-text) 12%,
478
512
  var(--cirth-form-element-background-color));
479
- --cirth-color: var(--cirth-primary-hover);
480
- --cirth-border-color: var(--cirth-primary-hover);
513
+ --cirth-color: var(--cirth-primary-active);
514
+ --cirth-border-color: var(--cirth-primary-active);
481
515
  }
482
516
 
483
517
  :is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary, [type="reset"].outline.secondary {
484
- --cirth-color: var(--cirth-secondary);
485
- --cirth-border-color: var(--cirth-secondary);
518
+ --cirth-color: var(--cirth-secondary-text);
519
+ --cirth-border-color: var(--cirth-secondary-text);
486
520
  }
487
521
 
488
522
  :is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), [type="reset"].outline.secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
489
523
  --cirth-background-color: color-mix(in oklch,
490
- var(--cirth-secondary) 12%,
524
+ var(--cirth-secondary-text) 12%,
491
525
  var(--cirth-form-element-background-color));
492
- --cirth-color: var(--cirth-secondary-hover);
493
- --cirth-border-color: var(--cirth-secondary-hover);
526
+ --cirth-color: var(--cirth-secondary-active);
527
+ --cirth-border-color: var(--cirth-secondary-active);
494
528
  }
495
529
 
496
530
  :is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast, [type="reset"].outline.contrast {
497
- --cirth-color: var(--cirth-contrast);
498
- --cirth-border-color: var(--cirth-contrast);
531
+ --cirth-color: var(--cirth-contrast-text);
532
+ --cirth-border-color: var(--cirth-contrast-text);
499
533
  }
500
534
 
501
535
  :is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), [type="reset"].outline.contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
502
536
  --cirth-background-color: color-mix(in oklch,
503
- var(--cirth-contrast) 12%,
537
+ var(--cirth-contrast-text) 12%,
504
538
  var(--cirth-form-element-background-color));
505
- --cirth-color: var(--cirth-contrast-hover);
506
- --cirth-border-color: var(--cirth-contrast-hover);
539
+ --cirth-color: var(--cirth-contrast-active);
540
+ --cirth-border-color: var(--cirth-contrast-active);
507
541
  }
508
542
 
509
543
  :is(button, [type="submit"], [type="button"], [role="button"]).ghost, [type="reset"].ghost {
510
- --cirth-color: var(--cirth-primary);
544
+ --cirth-color: var(--cirth-primary-text);
511
545
  --cirth-border-color: transparent;
512
546
  }
513
547
 
514
548
  :is(button, [type="submit"], [type="button"], [role="button"]).ghost:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), [type="reset"].ghost:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
515
549
  --cirth-background-color: color-mix(in oklch,
516
- var(--cirth-primary) 12%,
550
+ var(--cirth-primary-text) 12%,
517
551
  transparent);
518
- --cirth-color: var(--cirth-primary-hover);
552
+ --cirth-color: var(--cirth-primary-active);
519
553
  --cirth-border-color: transparent;
520
554
  }
521
555
 
522
556
  :is(button, [type="submit"], [type="button"], [role="button"]).ghost.secondary, [type="reset"].ghost.secondary {
523
- --cirth-color: var(--cirth-secondary);
557
+ --cirth-color: var(--cirth-secondary-text);
524
558
  --cirth-border-color: transparent;
525
559
  }
526
560
 
527
561
  :is(button, [type="submit"], [type="button"], [role="button"]).ghost.secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), [type="reset"].ghost.secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
528
562
  --cirth-background-color: color-mix(in oklch,
529
- var(--cirth-secondary) 12%,
563
+ var(--cirth-secondary-text) 12%,
530
564
  transparent);
531
- --cirth-color: var(--cirth-secondary-hover);
565
+ --cirth-color: var(--cirth-secondary-active);
532
566
  --cirth-border-color: transparent;
533
567
  }
534
568
 
535
569
  :is(button, [type="submit"], [type="button"], [role="button"]).ghost.contrast, [type="reset"].ghost.contrast {
536
- --cirth-color: var(--cirth-contrast);
570
+ --cirth-color: var(--cirth-contrast-text);
537
571
  --cirth-border-color: transparent;
538
572
  }
539
573
 
540
574
  :is(button, [type="submit"], [type="button"], [role="button"]).ghost.contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), [type="reset"].ghost.contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
541
575
  --cirth-background-color: color-mix(in oklch,
542
- var(--cirth-contrast) 12%,
576
+ var(--cirth-contrast-text) 12%,
543
577
  transparent);
544
- --cirth-color: var(--cirth-contrast-hover);
578
+ --cirth-color: var(--cirth-contrast-active);
579
+ --cirth-border-color: transparent;
580
+ }
581
+
582
+ :is(button, [type="submit"], [type="button"], [role="button"]).outline.danger {
583
+ --cirth-background-color: var(--cirth-form-element-background-color);
584
+ --cirth-color: var(--cirth-error-text);
585
+ --cirth-border-color: var(--cirth-error-border);
586
+ }
587
+
588
+ :is(button, [type="submit"], [type="button"], [role="button"]).outline.danger:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
589
+ --cirth-background-color: var(--cirth-error-surface);
590
+ --cirth-color: var(--cirth-error-text);
591
+ --cirth-border-color: var(--cirth-error-active);
592
+ }
593
+
594
+ :is(button, [type="submit"], [type="button"], [role="button"]).ghost.danger {
595
+ --cirth-background-color: transparent;
596
+ --cirth-color: var(--cirth-error-text);
597
+ --cirth-border-color: transparent;
598
+ }
599
+
600
+ :is(button, [type="submit"], [type="button"], [role="button"]).ghost.danger:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
601
+ --cirth-background-color: color-mix(in oklch,
602
+ var(--cirth-error) 12%,
603
+ transparent);
604
+ --cirth-color: var(--cirth-error-text);
545
605
  --cirth-border-color: transparent;
546
606
  }
547
607
 
@@ -563,6 +623,8 @@ form:has(:user-invalid) :is(button:not([type="button"], [type="reset"]), [type="
563
623
 
564
624
  caption {
565
625
  color: var(--cirth-muted-color);
626
+ font-size: var(--cirth-font-size-sm);
627
+ line-height: var(--cirth-line-height-normal);
566
628
  text-align: start;
567
629
  padding-block-end: calc(var(--cirth-spacing) * .5);
568
630
  }
@@ -673,6 +735,8 @@ figure {
673
735
  figure figcaption {
674
736
  padding: calc(var(--cirth-spacing) * .5) 0;
675
737
  color: var(--cirth-muted-color);
738
+ font-size: var(--cirth-font-size-sm);
739
+ line-height: var(--cirth-line-height-normal);
676
740
  }
677
741
 
678
742
  hr {
@@ -782,6 +846,20 @@ input, select, textarea {
782
846
  border-style: dashed;
783
847
  }
784
848
 
849
+ input[type="number"][readonly] {
850
+ appearance: textfield;
851
+ }
852
+
853
+ input[type="number"][readonly]::-webkit-inner-spin-button {
854
+ -webkit-appearance: none;
855
+ margin: 0;
856
+ }
857
+
858
+ input[type="number"][readonly]::-webkit-outer-spin-button {
859
+ -webkit-appearance: none;
860
+ margin: 0;
861
+ }
862
+
785
863
  input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [readonly]):is(:active, :focus), :where(select, textarea):not([readonly]):is(:active, :focus) {
786
864
  --cirth-background-color: var(--cirth-form-element-active-background-color);
787
865
  }
@@ -948,7 +1026,7 @@ label:has([type="checkbox"], [type="radio"]) {
948
1026
  }
949
1027
 
950
1028
  [type="checkbox"]:checked, [type="checkbox"]:checked:active, [type="checkbox"]:checked:focus, [type="radio"]:checked, [type="radio"]:checked:active, [type="radio"]:checked:focus {
951
- --cirth-background-color: var(--cirth-primary-background);
1029
+ --cirth-background-color: var(--cirth-primary-surface);
952
1030
  --cirth-border-color: var(--cirth-primary-border);
953
1031
  }
954
1032
 
@@ -963,7 +1041,7 @@ label:has([type="checkbox"], [type="radio"]) {
963
1041
  }
964
1042
 
965
1043
  [type="checkbox"]:not([role="switch"]):checked:before, [type="checkbox"]:not([role="switch"]):indeterminate:before {
966
- background-color: var(--cirth-primary-inverse);
1044
+ background-color: var(--cirth-primary-on-surface);
967
1045
  content: "";
968
1046
  width: 100%;
969
1047
  height: 100%;
@@ -984,7 +1062,7 @@ label:has([type="checkbox"], [type="radio"]) {
984
1062
  }
985
1063
 
986
1064
  [type="checkbox"]:not([role="switch"]):indeterminate {
987
- --cirth-background-color: var(--cirth-primary-background);
1065
+ --cirth-background-color: var(--cirth-primary-surface);
988
1066
  --cirth-border-color: var(--cirth-primary-border);
989
1067
  }
990
1068
 
@@ -997,7 +1075,7 @@ label:has([type="checkbox"], [type="radio"]) {
997
1075
  }
998
1076
 
999
1077
  [type="radio"]:checked, [type="radio"]:checked:active, [type="radio"]:checked:focus {
1000
- --cirth-background-color: var(--cirth-primary-inverse);
1078
+ --cirth-background-color: var(--cirth-primary-on-surface);
1001
1079
  border-width: .42em;
1002
1080
  }
1003
1081
 
@@ -1161,8 +1239,8 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
1161
1239
  }
1162
1240
 
1163
1241
  [type="file"]:is(:hover, :active, :focus)::file-selector-button {
1164
- --cirth-background-color: var(--cirth-secondary-hover-background);
1165
- --cirth-border-color: var(--cirth-secondary-hover-border);
1242
+ --cirth-background-color: var(--cirth-secondary-surface-active);
1243
+ --cirth-border-color: var(--cirth-secondary-border-active);
1166
1244
  }
1167
1245
 
1168
1246
  [type="file"]:focus::file-selector-button {
@@ -1172,9 +1250,9 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
1172
1250
 
1173
1251
  [type="range"] {
1174
1252
  appearance: none;
1175
- background: none;
1176
1253
  width: 100%;
1177
- height: 1.25rem;
1254
+ height: max(2.75rem, var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
1255
+ background: none;
1178
1256
  }
1179
1257
 
1180
1258
  [type="range"]::-webkit-slider-runnable-track {
@@ -1221,6 +1299,18 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
1221
1299
  --cirth-range-thumb-color: var(--cirth-range-thumb-active-color);
1222
1300
  }
1223
1301
 
1302
+ @media (hover: hover) and (pointer: fine) {
1303
+ [type="range"]:hover:not(:active, :focus, :disabled) {
1304
+ --cirth-range-border-color: var(--cirth-range-active-border-color);
1305
+ --cirth-range-thumb-color: var(--cirth-secondary-active);
1306
+ }
1307
+ }
1308
+
1309
+ [type="range"]:focus-visible {
1310
+ outline: var(--cirth-outline-width) solid var(--cirth-primary-focus);
1311
+ outline-offset: var(--cirth-space-1);
1312
+ }
1313
+
1224
1314
  [type="range"]:active::-webkit-slider-thumb {
1225
1315
  transform: scale(1.25);
1226
1316
  }
@@ -1688,7 +1778,7 @@ label > details.dropdown {
1688
1778
  --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1689
1779
  var(--cirth-primary-border);
1690
1780
  --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1691
- var(--cirth-primary-hover-border);
1781
+ var(--cirth-primary-border-active);
1692
1782
  }
1693
1783
 
1694
1784
  [role="search"] button:focus, [role="search"] [type="submit"]:focus, [role="search"] [type="reset"]:focus, [role="search"] [type="button"]:focus, [role="search"] [role="button"]:focus, .group button:focus, .group [type="submit"]:focus, .group [type="reset"]:focus, .group [type="button"]:focus, .group [role="button"]:focus {
@@ -1820,7 +1910,7 @@ dialog[open] {
1820
1910
  @starting-style {
1821
1911
  dialog[open] > article {
1822
1912
  opacity: 0;
1823
- transform: translateY(-100%);
1913
+ transform: translateY(-.5rem);
1824
1914
  }
1825
1915
  }
1826
1916
 
@@ -2023,11 +2113,11 @@ header:not(:is(article, aside, dialog, figure, li, nav, section, td) *) > nav li
2023
2113
  header:not(:is(article, aside, dialog, figure, li, nav, section, td) *) > nav li :where(a:not([role="button"]), [role="link"]):is(:hover, :focus, :active) {
2024
2114
  --cirth-color: color-mix(in oklch,
2025
2115
  var(--cirth-muted-color),
2026
- var(--cirth-contrast));
2116
+ var(--cirth-contrast-text));
2027
2117
  }
2028
2118
 
2029
2119
  header:not(:is(article, aside, dialog, figure, li, nav, section, td) *) > nav li :where(a:not([role="button"]), [role="link"]):is([aria-current]:not([aria-current="false"]), [aria-selected="true"]) {
2030
- --cirth-color: var(--cirth-contrast);
2120
+ --cirth-color: var(--cirth-contrast-text);
2031
2121
  font-weight: var(--cirth-font-weight-semibold);
2032
2122
  }
2033
2123
 
@@ -2189,6 +2279,7 @@ progress::-moz-progress-bar {
2189
2279
  scroll-behavior: auto;
2190
2280
  transition-delay: var(--cirth-duration-instant);
2191
2281
  transition-duration: var(--cirth-duration-instant);
2282
+ --cirth-transition: var(--cirth-duration-instant) var(--cirth-ease-out);
2192
2283
  animation-duration: 1ms;
2193
2284
  animation-iteration-count: 1;
2194
2285
  animation-delay: -1ms;
@@ -2351,7 +2442,11 @@ progress::-moz-progress-bar {
2351
2442
  --cirth-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' 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");
2352
2443
  --cirth-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' 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");
2353
2444
  --cirth-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' 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");
2354
- --cirth-icon-loading: url("data:image/svg+xml,%3Csvg fill='none' 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");
2445
+ --cirth-icon-loading: url("data:image/svg+xml,%3Csvg fill='none' 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(142, 144, 161)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
2446
+ }
2447
+
2448
+ :focus-visible {
2449
+ transition-duration: var(--cirth-duration-instant);
2355
2450
  }
2356
2451
 
2357
2452
  a, a.secondary, a.contrast {
@@ -2504,47 +2599,46 @@ details summary[role="button"]:not(.outline):after {
2504
2599
  }
2505
2600
 
2506
2601
  :root, :host {
2507
- --cirth-canvas: light-dark(oklch(97.4% .004 69.35), oklch(20.15% .003 264));
2508
- --cirth-ink: light-dark(oklch(35.3% .021 264), oklch(83% .016 264));
2602
+ --cirth-canvas: light-dark(oklch(97.3% .006 44), oklch(20.15% .0225 280));
2603
+ --cirth-ink: light-dark(oklch(35.3% .027 280), oklch(83% .011 280));
2509
2604
  --cirth-color: var(--cirth-ink);
2510
- --cirth-text-selection-color: light-dark(oklch(65.7% .121 69.35 / .25), oklch(70% .129 69.35 / .1875));
2511
- --cirth-muted-color: light-dark(oklch(52.7% .032 264), oklch(65.7% .03 264));
2512
- --cirth-muted-border-color: light-dark(oklch(93.85% .003 264), oklch(26.7% .011 264));
2513
- --cirth-error: light-dark(oklch(44% .151 29.73), oklch(74.3% .133 29.73));
2514
- --cirth-success: light-dark(oklch(52.7% .1 160.59), oklch(65.7% .125 160.59));
2515
- --cirth-warning: light-dark(oklch(48.3% .086 78), oklch(70% .124 78));
2516
- --cirth-primary: light-dark(oklch(52.7% .097 69.35), oklch(70% .129 69.35));
2517
- --cirth-secondary: light-dark(oklch(52.7% .032 264), oklch(70% .028 264));
2518
- --cirth-secondary-underline: light-dark(oklch(52.7% .032 264 / .5), oklch(70% .028 264 / .5));
2519
- --cirth-secondary-hover: light-dark(oklch(44% .028 264), oklch(78.7% .021 264));
2520
- --cirth-secondary-hover-background: light-dark(oklch(44% .028 264), oklch(52.7% .032 264));
2521
- --cirth-secondary-focus: light-dark(oklch(48.3% .03 264 / .7), oklch(70% .028 264 / .7));
2522
- --cirth-contrast: light-dark(oklch(22.3% .006 264), oklch(91.7% .006 264));
2523
- --cirth-contrast-background: light-dark(oklch(22.3% .006 264), oklch(96% 0 264));
2524
- --cirth-contrast-underline: light-dark(oklch(22.3% .006 264 / .5), oklch(91.7% .006 264 / .5));
2525
- --cirth-contrast-hover: light-dark(oklch(0% 0 0), oklch(100% 0 0));
2526
- --cirth-contrast-hover-background: light-dark(oklch(0% 0 0), oklch(100% 0 0));
2527
- --cirth-contrast-focus: light-dark(oklch(48.3% .03 264 / .7), oklch(87.3% .011 264 / .5));
2528
- --cirth-contrast-inverse: light-dark(oklch(100% 0 0), oklch(0% 0 0));
2529
- --cirth-link-visited-color: light-dark(oklch(48.3% 0 264), oklch(65.7% 0 264));
2530
- --cirth-box-shadow: light-dark(.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),
2531
- .0145rem .029rem .174rem oklch(9% 0 none / .01698), .0335rem .067rem .402rem oklch(9% 0 none / .024), .0625rem .125rem .75rem oklch(9% 0 none / .03), .1125rem .225rem 1.35rem oklch(9% 0 none / .036), .2085rem .417rem 2.502rem oklch(9% 0 none / .04302), .5rem 1rem 6rem oklch(9% 0 none / .06), 0 0 0 .0625rem oklch(9% 0 none / .015));
2532
- --cirth-h1-color: light-dark(oklch(22.3% .006 264), oklch(96% 0 264));
2533
- --cirth-h2-color: light-dark(oklch(26.7% .011 264), oklch(91.7% .006 264));
2534
- --cirth-h3-color: light-dark(oklch(31% .016 264), oklch(83% .016 264));
2535
- --cirth-h4-color: light-dark(oklch(35.3% .021 264), oklch(78.7% .021 264));
2536
- --cirth-h5-color: light-dark(oklch(39.7% .025 264), oklch(74.3% .025 264));
2537
- --cirth-h6-color: light-dark(oklch(44% .028 264), oklch(65.7% .03 264));
2538
- --cirth-mark-color: light-dark(oklch(18% 0 264), oklch(100% 0 0));
2539
- --cirth-code-color: light-dark(oklch(52.7% .032 264), oklch(65.7% .03 264));
2540
- --cirth-form-element-selected-background-color: light-dark(oklch(91.7% .006 264), oklch(31% .016 264));
2541
- --cirth-form-element-border-color: light-dark(oklch(61.3% .032 264), oklch(52.7% .032 264));
2542
- --cirth-form-element-color: light-dark(oklch(26.7% .011 264), oklch(91.7% .006 264));
2543
- --cirth-switch-background-color: light-dark(oklch(61.3% .032 264), oklch(52.7% .032 264));
2544
- --cirth-range-border-color: light-dark(oklch(91.7% .006 264), oklch(26.7% .011 264));
2545
- --cirth-range-active-border-color: light-dark(oklch(83% .016 264), oklch(31% .016 264));
2546
- --cirth-progress-background-color: light-dark(oklch(91.7% .006 264), oklch(26.7% .011 264));
2547
- --cirth-progress-border-color: light-dark(oklch(61.3% .032 264), oklch(52.7% .032 264));
2605
+ --cirth-muted-color: light-dark(oklch(52.7% .031 280), oklch(65.7% .025 280));
2606
+ --cirth-muted-border-color: light-dark(oklch(93.85% .002 280), oklch(26.7% .025 280));
2607
+ --cirth-error: light-dark(oklch(44% .151 22), oklch(74.3% .133 22));
2608
+ --cirth-success: light-dark(oklch(52.7% .115 153), oklch(65.7% .144 153));
2609
+ --cirth-warning: light-dark(oklch(48.3% .084 89.5), oklch(70% .122 89.5));
2610
+ --cirth-primary: light-dark(oklch(52.7% .107 44), oklch(65.7% .134 44));
2611
+ --cirth-secondary-text: light-dark(oklch(52.7% .031 280), oklch(70% .021 280));
2612
+ --cirth-secondary-underline: light-dark(oklch(52.7% .031 280 / .5), oklch(70% .021 280 / .5));
2613
+ --cirth-secondary-active: light-dark(oklch(44% .029 280), oklch(78.7% .014 280));
2614
+ --cirth-secondary-surface-active: light-dark(oklch(44% .029 280), oklch(52.7% .031 280));
2615
+ --cirth-secondary-focus: light-dark(oklch(48.3% .03 280 / .7), oklch(70% .021 280 / .7));
2616
+ --cirth-contrast-text: light-dark(oklch(22.3% .023 280), oklch(91.7% .004 280));
2617
+ --cirth-contrast-surface: light-dark(oklch(22.3% .023 280), oklch(96% 0 280));
2618
+ --cirth-contrast-underline: light-dark(oklch(22.3% .023 280 / .5), oklch(91.7% .004 280 / .5));
2619
+ --cirth-contrast-active: light-dark(oklch(0% 0 0), oklch(100% 0 0));
2620
+ --cirth-contrast-surface-active: light-dark(oklch(0% 0 0), oklch(100% 0 0));
2621
+ --cirth-contrast-focus: light-dark(oklch(48.3% .03 280 / .7), oklch(87.3% .007 280 / .5));
2622
+ --cirth-contrast-on-surface: light-dark(oklch(100% 0 0), oklch(0% 0 0));
2623
+ --cirth-link-visited-color: light-dark(oklch(48.3% 0 280), oklch(65.7% 0 280));
2624
+ --cirth-box-shadow: light-dark(.0145rem .029rem .174rem oklch(65.7% .025 280 / .01698), .0335rem .067rem .402rem oklch(65.7% .025 280 / .024), .0625rem .125rem .75rem oklch(65.7% .025 280 / .03), .1125rem .225rem 1.35rem oklch(65.7% .025 280 / .036), .2085rem .417rem 2.502rem oklch(65.7% .025 280 / .04302), .5rem 1rem 6rem oklch(65.7% .025 280 / .06), 0 0 0 .0625rem oklch(65.7% .025 280 / .015),
2625
+ .0145rem .029rem .174rem oklch(9% .011 280 / .01698), .0335rem .067rem .402rem oklch(9% .011 280 / .024), .0625rem .125rem .75rem oklch(9% .011 280 / .03), .1125rem .225rem 1.35rem oklch(9% .011 280 / .036), .2085rem .417rem 2.502rem oklch(9% .011 280 / .04302), .5rem 1rem 6rem oklch(9% .011 280 / .06), 0 0 0 .0625rem oklch(9% .011 280 / .015));
2626
+ --cirth-h1-color: light-dark(oklch(22.3% .023 280), oklch(96% 0 280));
2627
+ --cirth-h2-color: light-dark(oklch(26.7% .025 280), oklch(91.7% .004 280));
2628
+ --cirth-h3-color: light-dark(oklch(31% .026 280), oklch(83% .011 280));
2629
+ --cirth-h4-color: light-dark(oklch(35.3% .027 280), oklch(78.7% .014 280));
2630
+ --cirth-h5-color: light-dark(oklch(39.7% .028 280), oklch(74.3% .018 280));
2631
+ --cirth-h6-color: light-dark(oklch(44% .029 280), oklch(65.7% .025 280));
2632
+ --cirth-mark-color: light-dark(oklch(18% .022 280), oklch(100% 0 0));
2633
+ --cirth-code-color: light-dark(oklch(52.7% .031 280), oklch(65.7% .025 280));
2634
+ --cirth-form-element-selected-background-color: light-dark(oklch(91.7% .004 280), oklch(31% .026 280));
2635
+ --cirth-form-element-border-color: light-dark(oklch(61.3% .028 280), oklch(52.7% .031 280));
2636
+ --cirth-form-element-color: light-dark(oklch(26.7% .025 280), oklch(91.7% .004 280));
2637
+ --cirth-switch-background-color: light-dark(oklch(61.3% .028 280), oklch(52.7% .031 280));
2638
+ --cirth-range-border-color: light-dark(oklch(91.7% .004 280), oklch(26.7% .025 280));
2639
+ --cirth-range-active-border-color: light-dark(oklch(83% .011 280), oklch(31% .026 280));
2640
+ --cirth-progress-background-color: light-dark(oklch(91.7% .004 280), oklch(26.7% .025 280));
2641
+ --cirth-progress-border-color: light-dark(oklch(61.3% .028 280), oklch(52.7% .031 280));
2548
2642
  }
2549
2643
 
2550
2644
  :where([data-theme="light"]), :root:where(:not([data-theme="dark"])), :host(:where(:not([data-theme="dark"]))) {
@@ -2561,17 +2655,21 @@ details summary[role="button"]:not(.outline):after {
2561
2655
  --cirth-warning-border: oklch(from var(--cirth-warning) calc(l * 1.269) calc(c * 1.267) h);
2562
2656
  --cirth-warning-active: oklch(from var(--cirth-warning) calc(l * 1.091) calc(c * 1.081) h);
2563
2657
  --cirth-warning-surface: oklch(from var(--cirth-warning) 93% .05 h);
2564
- --cirth-primary-background: var(--cirth-primary);
2565
- --cirth-primary-border: var(--cirth-primary-background);
2658
+ --cirth-primary-text: var(--cirth-primary);
2659
+ --cirth-primary-surface: var(--cirth-primary);
2660
+ --cirth-primary-border: var(--cirth-primary-surface);
2566
2661
  --cirth-primary-underline: oklch(from var(--cirth-primary) l c h / 50%);
2567
- --cirth-primary-hover: color-mix(in oklch, var(--cirth-primary) 83.5%, black);
2568
- --cirth-primary-hover-background: color-mix(in oklch,
2662
+ --cirth-primary-active: color-mix(in oklch,
2663
+ var(--cirth-primary) 83.5%,
2664
+ black);
2665
+ --cirth-primary-surface-active: color-mix(in oklch,
2569
2666
  var(--cirth-primary) 91.7%,
2570
2667
  black);
2571
- --cirth-primary-hover-border: var(--cirth-primary-hover-background);
2572
- --cirth-primary-hover-underline: var(--cirth-primary-hover);
2668
+ --cirth-primary-border-active: var(--cirth-primary-surface-active);
2669
+ --cirth-primary-underline-active: var(--cirth-primary-active);
2573
2670
  --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 75%);
2574
- --cirth-primary-inverse: oklch(100% 0 0);
2671
+ --cirth-primary-on-surface: oklch(100% 0 0);
2672
+ --cirth-text-selection-color: oklch(from var(--cirth-primary) calc(l * 1.247) c h / 25%);
2575
2673
  --cirth-code-background-color: oklch(from var(--cirth-canvas) calc(l - .019) c h);
2576
2674
  --cirth-card-sectioning-background-color: oklch(from var(--cirth-canvas) calc(l + .009) c h);
2577
2675
  --cirth-form-element-background-color: oklch(from var(--cirth-canvas) calc(l - .008) c h);
@@ -2579,15 +2677,17 @@ details summary[role="button"]:not(.outline):after {
2579
2677
  --cirth-form-element-active-background-color: var(--cirth-canvas);
2580
2678
  --cirth-dropdown-background-color: var(--cirth-card-background-color);
2581
2679
  --cirth-popover-background-color: var(--cirth-card-background-color);
2582
- --cirth-secondary-background: oklch(48.3% .03 264);
2583
- --cirth-secondary-border: var(--cirth-secondary-background);
2584
- --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
2585
- --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
2586
- --cirth-secondary-inverse: oklch(100% 0 0);
2587
- --cirth-contrast-border: var(--cirth-contrast-background);
2588
- --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
2589
- --cirth-contrast-hover-underline: var(--cirth-secondary-hover);
2590
- --cirth-mark-background-color: var(--cirth-warning-surface);
2680
+ --cirth-secondary-surface: oklch(48.3% .03 280);
2681
+ --cirth-secondary-border: var(--cirth-secondary-surface);
2682
+ --cirth-secondary-border-active: var(--cirth-secondary-surface-active);
2683
+ --cirth-secondary-underline-active: var(--cirth-secondary-active);
2684
+ --cirth-secondary-on-surface: oklch(100% 0 0);
2685
+ --cirth-contrast-border: var(--cirth-contrast-surface);
2686
+ --cirth-contrast-border-active: var(--cirth-contrast-surface-active);
2687
+ --cirth-contrast-underline-active: var(--cirth-secondary-active);
2688
+ --cirth-mark-background-color: color-mix(in oklab,
2689
+ var(--cirth-primary) 18%,
2690
+ var(--cirth-canvas));
2591
2691
  --cirth-ins-color: var(--cirth-success-text);
2592
2692
  --cirth-del-color: var(--cirth-error-text);
2593
2693
  --cirth-blockquote-border-color: var(--cirth-muted-border-color);
@@ -2595,7 +2695,7 @@ details summary[role="button"]:not(.outline):after {
2595
2695
  --cirth-button-box-shadow: 0 0 0 #0000;
2596
2696
  --cirth-button-hover-box-shadow: 0 0 0 #0000;
2597
2697
  --cirth-table-border-color: var(--cirth-card-border-color);
2598
- --cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
2698
+ --cirth-table-row-stripped-background-color: oklch(57% .032 280 / .0375);
2599
2699
  --cirth-code-kbd-background-color: var(--cirth-ink);
2600
2700
  --cirth-code-kbd-color: var(--cirth-background-color);
2601
2701
  --cirth-form-element-placeholder-color: var(--cirth-muted-color);
@@ -2609,32 +2709,32 @@ details summary[role="button"]:not(.outline):after {
2609
2709
  --cirth-form-element-valid-active-border-color: var(--cirth-success-active);
2610
2710
  --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
2611
2711
  --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
2612
- --cirth-switch-checked-background-color: var(--cirth-primary-background);
2613
- --cirth-switch-color: var(--cirth-primary-inverse);
2712
+ --cirth-switch-checked-background-color: var(--cirth-primary-surface);
2713
+ --cirth-switch-color: var(--cirth-primary-on-surface);
2614
2714
  --cirth-range-thumb-border-color: var(--cirth-background-color);
2615
- --cirth-range-thumb-color: var(--cirth-secondary-background);
2616
- --cirth-range-thumb-active-color: var(--cirth-primary-background);
2617
- --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
2715
+ --cirth-range-thumb-color: var(--cirth-secondary-text);
2716
+ --cirth-range-thumb-active-color: var(--cirth-primary-surface);
2717
+ --cirth-accordion-active-summary-color: var(--cirth-primary-active);
2618
2718
  --cirth-accordion-close-summary-color: var(--cirth-ink);
2619
2719
  --cirth-accordion-open-summary-color: var(--cirth-ink);
2620
2720
  --cirth-card-border-color: color-mix(in oklab,
2621
2721
  var(--cirth-form-element-border-color) 38%,
2622
- var(--cirth-card-background-color));
2722
+ oklch(from var(--cirth-card-background-color) l 0 h));
2623
2723
  --cirth-dropdown-box-shadow: var(--cirth-box-shadow);
2624
2724
  --cirth-dropdown-color: var(--cirth-ink);
2625
2725
  --cirth-dropdown-border-color: var(--cirth-card-border-color);
2626
2726
  --cirth-dropdown-hover-background-color: var(--cirth-card-sectioning-background-color);
2627
- --cirth-modal-overlay-background-color: oklch(93.85% .003 264deg / var(--cirth-opacity-overlay));
2727
+ --cirth-modal-overlay-background-color: oklch(93.85% .002 280deg / var(--cirth-opacity-overlay));
2628
2728
  --cirth-meter-optimum-color: var(--cirth-success);
2629
2729
  --cirth-meter-suboptimum-color: var(--cirth-warning);
2630
2730
  --cirth-meter-even-less-good-color: var(--cirth-error);
2631
- --cirth-progress-color: var(--cirth-primary-background);
2632
- --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(98, 107, 126)' 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");
2633
- --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(98, 107, 126)' 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");
2634
- --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(98, 107, 126)' 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");
2635
- --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(98, 107, 126)' 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");
2636
- --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' 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");
2637
- --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' 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");
2731
+ --cirth-progress-color: var(--cirth-primary-surface);
2732
+ --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(103, 105, 125)' 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");
2733
+ --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(103, 105, 125)' 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");
2734
+ --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(103, 105, 125)' 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");
2735
+ --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(103, 105, 125)' 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");
2736
+ --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(40, 126, 74)' 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");
2737
+ --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(189, 44, 56)' 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");
2638
2738
  }
2639
2739
 
2640
2740
  @media only screen and (prefers-color-scheme: dark) {
@@ -2652,19 +2752,21 @@ details summary[role="button"]:not(.outline):after {
2652
2752
  --cirth-warning-border: var(--cirth-warning);
2653
2753
  --cirth-warning-active: oklch(from var(--cirth-warning) calc(l * 1.124) calc(c * 1.121) h);
2654
2754
  --cirth-warning-surface: oklch(from var(--cirth-warning) 35.3% .063 h);
2655
- --cirth-primary-background: color-mix(in oklch,
2755
+ --cirth-primary-text: var(--cirth-primary);
2756
+ --cirth-primary-surface: color-mix(in oklch,
2656
2757
  var(--cirth-primary) 75.2%,
2657
2758
  black);
2658
- --cirth-primary-border: var(--cirth-primary-background);
2759
+ --cirth-primary-border: var(--cirth-primary-surface);
2659
2760
  --cirth-primary-underline: oklch(from var(--cirth-primary) l c h / 50%);
2660
- --cirth-primary-hover: oklch(from var(--cirth-primary) calc(l * 1.124) calc(c * 1.132) h);
2661
- --cirth-primary-hover-background: color-mix(in oklch,
2761
+ --cirth-primary-active: oklch(from var(--cirth-primary) calc(l * 1.124) calc(c * 1.132) h);
2762
+ --cirth-primary-surface-active: color-mix(in oklch,
2662
2763
  var(--cirth-primary) 72%,
2663
2764
  black);
2664
- --cirth-primary-hover-border: var(--cirth-primary-hover-background);
2665
- --cirth-primary-hover-underline: var(--cirth-primary-hover);
2666
- --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 70%);
2667
- --cirth-primary-inverse: oklch(100% 0 0);
2765
+ --cirth-primary-border-active: var(--cirth-primary-surface-active);
2766
+ --cirth-primary-underline-active: var(--cirth-primary-active);
2767
+ --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 80%);
2768
+ --cirth-text-selection-color: oklch(from var(--cirth-primary) calc(l * 1.065) c h / 18.75%);
2769
+ --cirth-primary-on-surface: oklch(100% 0 0);
2668
2770
  --cirth-code-background-color: oklch(from var(--cirth-canvas) calc(l - .02) c h);
2669
2771
  --cirth-card-sectioning-background-color: oklch(from var(--cirth-canvas) calc(l + .025) c h);
2670
2772
  --cirth-form-element-background-color: oklch(from var(--cirth-canvas) calc(l - .008) c h);
@@ -2672,15 +2774,17 @@ details summary[role="button"]:not(.outline):after {
2672
2774
  --cirth-form-element-active-background-color: var(--cirth-canvas);
2673
2775
  --cirth-dropdown-background-color: var(--cirth-card-background-color);
2674
2776
  --cirth-popover-background-color: var(--cirth-card-background-color);
2675
- --cirth-secondary-background: oklch(48.3% .03 264);
2676
- --cirth-secondary-border: var(--cirth-secondary-background);
2677
- --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
2678
- --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
2679
- --cirth-secondary-inverse: oklch(100% 0 0);
2680
- --cirth-contrast-border: var(--cirth-contrast-background);
2681
- --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
2682
- --cirth-contrast-hover-underline: var(--cirth-contrast-hover);
2683
- --cirth-mark-background-color: var(--cirth-warning-surface);
2777
+ --cirth-secondary-surface: oklch(48.3% .03 280);
2778
+ --cirth-secondary-border: var(--cirth-secondary-surface);
2779
+ --cirth-secondary-border-active: var(--cirth-secondary-surface-active);
2780
+ --cirth-secondary-underline-active: var(--cirth-secondary-active);
2781
+ --cirth-secondary-on-surface: oklch(100% 0 0);
2782
+ --cirth-contrast-border: var(--cirth-contrast-surface);
2783
+ --cirth-contrast-border-active: var(--cirth-contrast-surface-active);
2784
+ --cirth-contrast-underline-active: var(--cirth-contrast-active);
2785
+ --cirth-mark-background-color: color-mix(in oklab,
2786
+ var(--cirth-primary) 24%,
2787
+ var(--cirth-canvas));
2684
2788
  --cirth-ins-color: var(--cirth-success-text);
2685
2789
  --cirth-del-color: var(--cirth-error-text);
2686
2790
  --cirth-blockquote-border-color: var(--cirth-muted-border-color);
@@ -2688,10 +2792,10 @@ details summary[role="button"]:not(.outline):after {
2688
2792
  --cirth-button-box-shadow: 0 0 0 #0000;
2689
2793
  --cirth-button-hover-box-shadow: 0 0 0 #0000;
2690
2794
  --cirth-table-border-color: var(--cirth-card-border-color);
2691
- --cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
2795
+ --cirth-table-row-stripped-background-color: oklch(57% .032 280 / .0375);
2692
2796
  --cirth-code-kbd-background-color: var(--cirth-ink);
2693
2797
  --cirth-code-kbd-color: var(--cirth-background-color);
2694
- --cirth-form-element-placeholder-color: oklch(65.7% .03 264);
2798
+ --cirth-form-element-placeholder-color: oklch(65.7% .025 280);
2695
2799
  --cirth-form-element-active-border-color: var(--cirth-primary-border);
2696
2800
  --cirth-form-element-focus-color: var(--cirth-primary-focus);
2697
2801
  --cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
@@ -2702,12 +2806,12 @@ details summary[role="button"]:not(.outline):after {
2702
2806
  --cirth-form-element-valid-active-border-color: var(--cirth-success-active);
2703
2807
  --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
2704
2808
  --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
2705
- --cirth-switch-checked-background-color: var(--cirth-primary-background);
2706
- --cirth-switch-color: var(--cirth-primary-inverse);
2809
+ --cirth-switch-checked-background-color: var(--cirth-primary-surface);
2810
+ --cirth-switch-color: var(--cirth-primary-on-surface);
2707
2811
  --cirth-range-thumb-border-color: var(--cirth-background-color);
2708
- --cirth-range-thumb-color: var(--cirth-secondary-background);
2709
- --cirth-range-thumb-active-color: var(--cirth-primary-background);
2710
- --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
2812
+ --cirth-range-thumb-color: var(--cirth-secondary-text);
2813
+ --cirth-range-thumb-active-color: var(--cirth-primary-surface);
2814
+ --cirth-accordion-active-summary-color: var(--cirth-primary-active);
2711
2815
  --cirth-accordion-close-summary-color: var(--cirth-ink);
2712
2816
  --cirth-accordion-open-summary-color: var(--cirth-ink);
2713
2817
  --cirth-card-border-color: color-mix(in oklab,
@@ -2717,17 +2821,17 @@ details summary[role="button"]:not(.outline):after {
2717
2821
  --cirth-dropdown-color: var(--cirth-ink);
2718
2822
  --cirth-dropdown-border-color: var(--cirth-card-border-color);
2719
2823
  --cirth-dropdown-hover-background-color: var(--cirth-card-sectioning-background-color);
2720
- --cirth-modal-overlay-background-color: oklch(9% 0 0deg / var(--cirth-opacity-overlay));
2824
+ --cirth-modal-overlay-background-color: oklch(9% .011 280deg / var(--cirth-opacity-overlay));
2721
2825
  --cirth-meter-optimum-color: var(--cirth-success);
2722
2826
  --cirth-meter-suboptimum-color: var(--cirth-warning);
2723
2827
  --cirth-meter-even-less-good-color: var(--cirth-error);
2724
- --cirth-progress-color: var(--cirth-primary);
2725
- --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' 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");
2726
- --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' 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");
2727
- --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' 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");
2728
- --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' 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");
2729
- --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' 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");
2730
- --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' 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");
2828
+ --cirth-progress-color: var(--cirth-primary-text);
2829
+ --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' 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");
2830
+ --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' 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");
2831
+ --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' 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");
2832
+ --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' 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");
2833
+ --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(75, 216, 131)' 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");
2834
+ --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(246, 158, 155)' 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");
2731
2835
  }
2732
2836
 
2733
2837
  :root:where(:not([data-theme])) details summary[role="button"].contrast:not(.outline):after, :host(:where(:not([data-theme]))) details summary[role="button"].contrast:not(.outline):after, :root:where(:not([data-theme])) [aria-busy="true"]:not(input, select, textarea).contrast:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline):before, :host(:where(:not([data-theme]))) [aria-busy="true"]:not(input, select, textarea).contrast:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline):before {
@@ -2749,19 +2853,21 @@ details summary[role="button"]:not(.outline):after {
2749
2853
  --cirth-warning-border: var(--cirth-warning);
2750
2854
  --cirth-warning-active: oklch(from var(--cirth-warning) calc(l * 1.124) calc(c * 1.121) h);
2751
2855
  --cirth-warning-surface: oklch(from var(--cirth-warning) 35.3% .063 h);
2752
- --cirth-primary-background: color-mix(in oklch,
2856
+ --cirth-primary-text: var(--cirth-primary);
2857
+ --cirth-primary-surface: color-mix(in oklch,
2753
2858
  var(--cirth-primary) 75.2%,
2754
2859
  black);
2755
- --cirth-primary-border: var(--cirth-primary-background);
2860
+ --cirth-primary-border: var(--cirth-primary-surface);
2756
2861
  --cirth-primary-underline: oklch(from var(--cirth-primary) l c h / 50%);
2757
- --cirth-primary-hover: oklch(from var(--cirth-primary) calc(l * 1.124) calc(c * 1.132) h);
2758
- --cirth-primary-hover-background: color-mix(in oklch,
2862
+ --cirth-primary-active: oklch(from var(--cirth-primary) calc(l * 1.124) calc(c * 1.132) h);
2863
+ --cirth-primary-surface-active: color-mix(in oklch,
2759
2864
  var(--cirth-primary) 72%,
2760
2865
  black);
2761
- --cirth-primary-hover-border: var(--cirth-primary-hover-background);
2762
- --cirth-primary-hover-underline: var(--cirth-primary-hover);
2763
- --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 70%);
2764
- --cirth-primary-inverse: oklch(100% 0 0);
2866
+ --cirth-primary-border-active: var(--cirth-primary-surface-active);
2867
+ --cirth-primary-underline-active: var(--cirth-primary-active);
2868
+ --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 80%);
2869
+ --cirth-text-selection-color: oklch(from var(--cirth-primary) calc(l * 1.065) c h / 18.75%);
2870
+ --cirth-primary-on-surface: oklch(100% 0 0);
2765
2871
  --cirth-code-background-color: oklch(from var(--cirth-canvas) calc(l - .02) c h);
2766
2872
  --cirth-card-sectioning-background-color: oklch(from var(--cirth-canvas) calc(l + .025) c h);
2767
2873
  --cirth-form-element-background-color: oklch(from var(--cirth-canvas) calc(l - .008) c h);
@@ -2769,15 +2875,17 @@ details summary[role="button"]:not(.outline):after {
2769
2875
  --cirth-form-element-active-background-color: var(--cirth-canvas);
2770
2876
  --cirth-dropdown-background-color: var(--cirth-card-background-color);
2771
2877
  --cirth-popover-background-color: var(--cirth-card-background-color);
2772
- --cirth-secondary-background: oklch(48.3% .03 264);
2773
- --cirth-secondary-border: var(--cirth-secondary-background);
2774
- --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
2775
- --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
2776
- --cirth-secondary-inverse: oklch(100% 0 0);
2777
- --cirth-contrast-border: var(--cirth-contrast-background);
2778
- --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
2779
- --cirth-contrast-hover-underline: var(--cirth-contrast-hover);
2780
- --cirth-mark-background-color: var(--cirth-warning-surface);
2878
+ --cirth-secondary-surface: oklch(48.3% .03 280);
2879
+ --cirth-secondary-border: var(--cirth-secondary-surface);
2880
+ --cirth-secondary-border-active: var(--cirth-secondary-surface-active);
2881
+ --cirth-secondary-underline-active: var(--cirth-secondary-active);
2882
+ --cirth-secondary-on-surface: oklch(100% 0 0);
2883
+ --cirth-contrast-border: var(--cirth-contrast-surface);
2884
+ --cirth-contrast-border-active: var(--cirth-contrast-surface-active);
2885
+ --cirth-contrast-underline-active: var(--cirth-contrast-active);
2886
+ --cirth-mark-background-color: color-mix(in oklab,
2887
+ var(--cirth-primary) 24%,
2888
+ var(--cirth-canvas));
2781
2889
  --cirth-ins-color: var(--cirth-success-text);
2782
2890
  --cirth-del-color: var(--cirth-error-text);
2783
2891
  --cirth-blockquote-border-color: var(--cirth-muted-border-color);
@@ -2785,10 +2893,10 @@ details summary[role="button"]:not(.outline):after {
2785
2893
  --cirth-button-box-shadow: 0 0 0 #0000;
2786
2894
  --cirth-button-hover-box-shadow: 0 0 0 #0000;
2787
2895
  --cirth-table-border-color: var(--cirth-card-border-color);
2788
- --cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
2896
+ --cirth-table-row-stripped-background-color: oklch(57% .032 280 / .0375);
2789
2897
  --cirth-code-kbd-background-color: var(--cirth-ink);
2790
2898
  --cirth-code-kbd-color: var(--cirth-background-color);
2791
- --cirth-form-element-placeholder-color: oklch(65.7% .03 264);
2899
+ --cirth-form-element-placeholder-color: oklch(65.7% .025 280);
2792
2900
  --cirth-form-element-active-border-color: var(--cirth-primary-border);
2793
2901
  --cirth-form-element-focus-color: var(--cirth-primary-focus);
2794
2902
  --cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
@@ -2799,12 +2907,12 @@ details summary[role="button"]:not(.outline):after {
2799
2907
  --cirth-form-element-valid-active-border-color: var(--cirth-success-active);
2800
2908
  --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
2801
2909
  --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
2802
- --cirth-switch-checked-background-color: var(--cirth-primary-background);
2803
- --cirth-switch-color: var(--cirth-primary-inverse);
2910
+ --cirth-switch-checked-background-color: var(--cirth-primary-surface);
2911
+ --cirth-switch-color: var(--cirth-primary-on-surface);
2804
2912
  --cirth-range-thumb-border-color: var(--cirth-background-color);
2805
- --cirth-range-thumb-color: var(--cirth-secondary-background);
2806
- --cirth-range-thumb-active-color: var(--cirth-primary-background);
2807
- --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
2913
+ --cirth-range-thumb-color: var(--cirth-secondary-text);
2914
+ --cirth-range-thumb-active-color: var(--cirth-primary-surface);
2915
+ --cirth-accordion-active-summary-color: var(--cirth-primary-active);
2808
2916
  --cirth-accordion-close-summary-color: var(--cirth-ink);
2809
2917
  --cirth-accordion-open-summary-color: var(--cirth-ink);
2810
2918
  --cirth-card-border-color: color-mix(in oklab,
@@ -2814,17 +2922,17 @@ details summary[role="button"]:not(.outline):after {
2814
2922
  --cirth-dropdown-color: var(--cirth-ink);
2815
2923
  --cirth-dropdown-border-color: var(--cirth-card-border-color);
2816
2924
  --cirth-dropdown-hover-background-color: var(--cirth-card-sectioning-background-color);
2817
- --cirth-modal-overlay-background-color: oklch(9% 0 0deg / var(--cirth-opacity-overlay));
2925
+ --cirth-modal-overlay-background-color: oklch(9% .011 280deg / var(--cirth-opacity-overlay));
2818
2926
  --cirth-meter-optimum-color: var(--cirth-success);
2819
2927
  --cirth-meter-suboptimum-color: var(--cirth-warning);
2820
2928
  --cirth-meter-even-less-good-color: var(--cirth-error);
2821
- --cirth-progress-color: var(--cirth-primary);
2822
- --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' 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");
2823
- --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' 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");
2824
- --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' 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");
2825
- --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' 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");
2826
- --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' 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");
2827
- --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' 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");
2929
+ --cirth-progress-color: var(--cirth-primary-text);
2930
+ --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' 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");
2931
+ --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' 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");
2932
+ --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' 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");
2933
+ --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' 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");
2934
+ --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(75, 216, 131)' 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");
2935
+ --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(246, 158, 155)' 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");
2828
2936
  }
2829
2937
 
2830
2938
  :where([data-theme="dark"]) details summary[role="button"].contrast:not(.outline):after, :where([data-theme="dark"]) [aria-busy="true"]:not(input, select, textarea).contrast:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline):before {
@@ -2832,125 +2940,125 @@ details summary[role="button"]:not(.outline):after {
2832
2940
  }
2833
2941
 
2834
2942
  progress, [type="checkbox"], [type="radio"], [type="range"] {
2835
- accent-color: var(--cirth-primary);
2943
+ accent-color: var(--cirth-primary-text);
2836
2944
  }
2837
2945
 
2838
2946
  @media (prefers-contrast: more) {
2839
2947
  :where([data-theme="light"]), :root:where(:not([data-theme="dark"])), :host(:where(:not([data-theme="dark"]))) {
2840
- --cirth-ink: oklch(22.3% .006 264);
2948
+ --cirth-ink: oklch(22.3% .023 280);
2841
2949
  --cirth-h1-color: var(--cirth-color);
2842
2950
  --cirth-h2-color: var(--cirth-color);
2843
2951
  --cirth-h3-color: var(--cirth-color);
2844
2952
  --cirth-h4-color: var(--cirth-color);
2845
2953
  --cirth-h5-color: var(--cirth-color);
2846
2954
  --cirth-h6-color: var(--cirth-color);
2847
- --cirth-muted-color: oklch(39.7% .025 264);
2848
- --cirth-secondary: oklch(39.7% .025 264);
2849
- --cirth-code-color: oklch(35.3% .021 264);
2850
- --cirth-link-visited-color: oklch(35.3% .021 264);
2851
- --cirth-muted-border-color: oklch(57% .032 264);
2852
- --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(64, 71, 85)' 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");
2853
- --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(64, 71, 85)' 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");
2854
- --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(64, 71, 85)' 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");
2855
- --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(64, 71, 85)' 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");
2856
- --cirth-form-element-border-color: oklch(39.7% .025 264);
2857
- --cirth-form-element-invalid-border-color: oklch(48.3% .166 29.73);
2858
- --cirth-form-element-valid-border-color: oklch(48.3% .092 160.59);
2859
- --cirth-primary: oklch(39.7% .073 69.35);
2860
- --cirth-primary-hover: oklch(31% .057 69.35);
2955
+ --cirth-muted-color: oklch(39.7% .028 280);
2956
+ --cirth-secondary-text: oklch(39.7% .028 280);
2957
+ --cirth-code-color: oklch(35.3% .027 280);
2958
+ --cirth-link-visited-color: oklch(35.3% .027 280);
2959
+ --cirth-muted-border-color: oklch(57% .032 280);
2960
+ --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(68, 69, 86)' 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");
2961
+ --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(68, 69, 86)' 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");
2962
+ --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(68, 69, 86)' 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");
2963
+ --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(68, 69, 86)' 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");
2964
+ --cirth-form-element-border-color: oklch(39.7% .028 280);
2965
+ --cirth-form-element-invalid-border-color: oklch(48.3% .165 22);
2966
+ --cirth-form-element-valid-border-color: oklch(48.3% .106 153);
2967
+ --cirth-primary: oklch(39.7% .081 44);
2968
+ --cirth-primary-active: oklch(31% .063 44);
2861
2969
  --cirth-primary-underline: var(--cirth-primary);
2862
- --cirth-secondary-underline: var(--cirth-secondary);
2863
- --cirth-contrast-underline: var(--cirth-contrast);
2864
- --cirth-primary-focus: oklch(48.3% .089 69.35);
2865
- --cirth-secondary-focus: oklch(48.3% .03 264);
2866
- --cirth-contrast-focus: oklch(48.3% .03 264);
2867
- --cirth-switch-background-color: oklch(48.3% .03 264);
2868
- --cirth-progress-border-color: oklch(48.3% .03 264);
2869
- --cirth-meter-optimum-color: oklch(44% .084 160.59);
2870
- --cirth-meter-suboptimum-color: oklch(39.7% .07 78);
2871
- --cirth-meter-even-less-good-color: oklch(35.3% .122 29.73);
2970
+ --cirth-secondary-underline: var(--cirth-secondary-text);
2971
+ --cirth-contrast-underline: var(--cirth-contrast-text);
2972
+ --cirth-primary-focus: oklch(48.3% .098 44);
2973
+ --cirth-secondary-focus: oklch(48.3% .03 280);
2974
+ --cirth-contrast-focus: oklch(48.3% .03 280);
2975
+ --cirth-switch-background-color: oklch(48.3% .03 280);
2976
+ --cirth-progress-border-color: oklch(48.3% .03 280);
2977
+ --cirth-meter-optimum-color: oklch(44% .096 153);
2978
+ --cirth-meter-suboptimum-color: oklch(39.7% .069 89.5);
2979
+ --cirth-meter-even-less-good-color: oklch(35.3% .121 22);
2872
2980
  --cirth-dropdown-border-color: var(--cirth-muted-border-color);
2873
2981
  }
2874
2982
  }
2875
2983
 
2876
2984
  @media only screen and (prefers-contrast: more) and (prefers-color-scheme: dark) {
2877
2985
  :root:where(:not([data-theme])), :host(:where(:not([data-theme]))) {
2878
- --cirth-ink: oklch(96% 0 264);
2986
+ --cirth-ink: oklch(96% 0 280);
2879
2987
  --cirth-h1-color: var(--cirth-color);
2880
2988
  --cirth-h2-color: var(--cirth-color);
2881
2989
  --cirth-h3-color: var(--cirth-color);
2882
2990
  --cirth-h4-color: var(--cirth-color);
2883
2991
  --cirth-h5-color: var(--cirth-color);
2884
2992
  --cirth-h6-color: var(--cirth-color);
2885
- --cirth-muted-color: oklch(78.7% .021 264);
2886
- --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(179, 186, 200)' 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");
2887
- --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(179, 186, 200)' 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");
2888
- --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(179, 186, 200)' 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");
2889
- --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(179, 186, 200)' 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");
2890
- --cirth-secondary: oklch(78.7% .021 264);
2891
- --cirth-code-color: oklch(83% .016 264);
2892
- --cirth-link-visited-color: oklch(78.7% .021 264);
2893
- --cirth-muted-border-color: oklch(57% .032 264);
2993
+ --cirth-muted-color: oklch(78.7% .014 280);
2994
+ --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' 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");
2995
+ --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' 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");
2996
+ --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' 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");
2997
+ --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' 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");
2998
+ --cirth-secondary-text: oklch(78.7% .014 280);
2999
+ --cirth-code-color: oklch(83% .011 280);
3000
+ --cirth-link-visited-color: oklch(78.7% .014 280);
3001
+ --cirth-muted-border-color: oklch(57% .032 280);
2894
3002
  --cirth-card-border-color: var(--cirth-muted-border-color);
2895
- --cirth-form-element-border-color: oklch(70% .028 264);
2896
- --cirth-form-element-invalid-border-color: oklch(78.7% .106 29.73);
2897
- --cirth-form-element-valid-border-color: oklch(78.7% .15 160.59);
2898
- --cirth-primary: oklch(78.7% .146 69.35);
2899
- --cirth-primary-hover: oklch(87.3% .082 69.35);
2900
- --cirth-primary-background: oklch(44% .081 69.35);
2901
- --cirth-primary-hover-background: oklch(39.7% .073 69.35);
3003
+ --cirth-form-element-border-color: oklch(70% .021 280);
3004
+ --cirth-form-element-invalid-border-color: oklch(78.7% .105 22);
3005
+ --cirth-form-element-valid-border-color: oklch(78.7% .172 153);
3006
+ --cirth-primary: oklch(78.7% .092 44);
3007
+ --cirth-primary-active: oklch(87.3% .051 44);
3008
+ --cirth-primary-surface: oklch(44% .09 44);
3009
+ --cirth-primary-surface-active: oklch(39.7% .081 44);
2902
3010
  --cirth-primary-underline: var(--cirth-primary);
2903
- --cirth-secondary-underline: var(--cirth-secondary);
2904
- --cirth-contrast-underline: var(--cirth-contrast);
2905
- --cirth-primary-focus: oklch(70% .129 69.35);
2906
- --cirth-secondary-focus: oklch(70% .028 264);
2907
- --cirth-contrast-focus: oklch(87.3% .011 264);
2908
- --cirth-switch-background-color: oklch(65.7% .03 264);
2909
- --cirth-progress-border-color: oklch(70% .028 264);
2910
- --cirth-meter-optimum-color: oklch(74.3% .142 160.59);
2911
- --cirth-meter-suboptimum-color: oklch(78.7% .139 78);
2912
- --cirth-meter-even-less-good-color: oklch(83% .081 29.73);
3011
+ --cirth-secondary-underline: var(--cirth-secondary-text);
3012
+ --cirth-contrast-underline: var(--cirth-contrast-text);
3013
+ --cirth-primary-focus: oklch(70% .141 44);
3014
+ --cirth-secondary-focus: oklch(70% .021 280);
3015
+ --cirth-contrast-focus: oklch(87.3% .007 280);
3016
+ --cirth-switch-background-color: oklch(65.7% .025 280);
3017
+ --cirth-progress-border-color: oklch(70% .021 280);
3018
+ --cirth-meter-optimum-color: oklch(74.3% .163 153);
3019
+ --cirth-meter-suboptimum-color: oklch(78.7% .137 89.5);
3020
+ --cirth-meter-even-less-good-color: oklch(83% .08 22);
2913
3021
  --cirth-dropdown-border-color: var(--cirth-muted-border-color);
2914
3022
  }
2915
3023
  }
2916
3024
 
2917
3025
  @media (prefers-contrast: more) {
2918
3026
  :where([data-theme="dark"]) {
2919
- --cirth-ink: oklch(96% 0 264);
3027
+ --cirth-ink: oklch(96% 0 280);
2920
3028
  --cirth-h1-color: var(--cirth-color);
2921
3029
  --cirth-h2-color: var(--cirth-color);
2922
3030
  --cirth-h3-color: var(--cirth-color);
2923
3031
  --cirth-h4-color: var(--cirth-color);
2924
3032
  --cirth-h5-color: var(--cirth-color);
2925
3033
  --cirth-h6-color: var(--cirth-color);
2926
- --cirth-muted-color: oklch(78.7% .021 264);
2927
- --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(179, 186, 200)' 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");
2928
- --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(179, 186, 200)' 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");
2929
- --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(179, 186, 200)' 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");
2930
- --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(179, 186, 200)' 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");
2931
- --cirth-secondary: oklch(78.7% .021 264);
2932
- --cirth-code-color: oklch(83% .016 264);
2933
- --cirth-link-visited-color: oklch(78.7% .021 264);
2934
- --cirth-muted-border-color: oklch(57% .032 264);
3034
+ --cirth-muted-color: oklch(78.7% .014 280);
3035
+ --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' 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");
3036
+ --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' 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");
3037
+ --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' 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");
3038
+ --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' 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");
3039
+ --cirth-secondary-text: oklch(78.7% .014 280);
3040
+ --cirth-code-color: oklch(83% .011 280);
3041
+ --cirth-link-visited-color: oklch(78.7% .014 280);
3042
+ --cirth-muted-border-color: oklch(57% .032 280);
2935
3043
  --cirth-card-border-color: var(--cirth-muted-border-color);
2936
- --cirth-form-element-border-color: oklch(70% .028 264);
2937
- --cirth-form-element-invalid-border-color: oklch(78.7% .106 29.73);
2938
- --cirth-form-element-valid-border-color: oklch(78.7% .15 160.59);
2939
- --cirth-primary: oklch(78.7% .146 69.35);
2940
- --cirth-primary-hover: oklch(87.3% .082 69.35);
2941
- --cirth-primary-background: oklch(44% .081 69.35);
2942
- --cirth-primary-hover-background: oklch(39.7% .073 69.35);
3044
+ --cirth-form-element-border-color: oklch(70% .021 280);
3045
+ --cirth-form-element-invalid-border-color: oklch(78.7% .105 22);
3046
+ --cirth-form-element-valid-border-color: oklch(78.7% .172 153);
3047
+ --cirth-primary: oklch(78.7% .092 44);
3048
+ --cirth-primary-active: oklch(87.3% .051 44);
3049
+ --cirth-primary-surface: oklch(44% .09 44);
3050
+ --cirth-primary-surface-active: oklch(39.7% .081 44);
2943
3051
  --cirth-primary-underline: var(--cirth-primary);
2944
- --cirth-secondary-underline: var(--cirth-secondary);
2945
- --cirth-contrast-underline: var(--cirth-contrast);
2946
- --cirth-primary-focus: oklch(70% .129 69.35);
2947
- --cirth-secondary-focus: oklch(70% .028 264);
2948
- --cirth-contrast-focus: oklch(87.3% .011 264);
2949
- --cirth-switch-background-color: oklch(65.7% .03 264);
2950
- --cirth-progress-border-color: oklch(70% .028 264);
2951
- --cirth-meter-optimum-color: oklch(74.3% .142 160.59);
2952
- --cirth-meter-suboptimum-color: oklch(78.7% .139 78);
2953
- --cirth-meter-even-less-good-color: oklch(83% .081 29.73);
3052
+ --cirth-secondary-underline: var(--cirth-secondary-text);
3053
+ --cirth-contrast-underline: var(--cirth-contrast-text);
3054
+ --cirth-primary-focus: oklch(70% .141 44);
3055
+ --cirth-secondary-focus: oklch(70% .021 280);
3056
+ --cirth-contrast-focus: oklch(87.3% .007 280);
3057
+ --cirth-switch-background-color: oklch(65.7% .025 280);
3058
+ --cirth-progress-border-color: oklch(70% .021 280);
3059
+ --cirth-meter-optimum-color: oklch(74.3% .163 153);
3060
+ --cirth-meter-suboptimum-color: oklch(78.7% .137 89.5);
3061
+ --cirth-meter-even-less-good-color: oklch(83% .08 22);
2954
3062
  --cirth-dropdown-border-color: var(--cirth-muted-border-color);
2955
3063
  }
2956
3064
  }