@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.scoped.css CHANGED
@@ -41,6 +41,10 @@
41
41
  margin-bottom: var(--cirth-block-spacing-vertical);
42
42
  }
43
43
 
44
+ .cirth main > section + section {
45
+ margin-block-start: var(--cirth-space-8);
46
+ }
47
+
44
48
  .cirth .container, .cirth .container-fluid {
45
49
  display: grid;
46
50
  }
@@ -215,6 +219,15 @@
215
219
  background-color: var(--cirth-mark-background-color);
216
220
  color: var(--cirth-mark-color);
217
221
  vertical-align: baseline;
222
+ -webkit-box-decoration-break: clone;
223
+ box-decoration-break: clone;
224
+ }
225
+
226
+ @media (forced-colors: active) {
227
+ .cirth mark {
228
+ color: marktext;
229
+ background-color: mark;
230
+ }
218
231
  }
219
232
 
220
233
  .cirth blockquote {
@@ -253,7 +266,7 @@
253
266
  }
254
267
 
255
268
  .cirth :where(a:not([role="button"])), .cirth [role="link"] {
256
- --cirth-color: var(--cirth-primary);
269
+ --cirth-color: var(--cirth-primary-text);
257
270
  --cirth-background-color: transparent;
258
271
  --cirth-underline: var(--cirth-primary-underline);
259
272
  background-color: var(--cirth-background-color);
@@ -267,8 +280,8 @@
267
280
  }
268
281
 
269
282
  .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) {
270
- --cirth-color: var(--cirth-primary-hover);
271
- --cirth-underline: var(--cirth-primary-hover-underline);
283
+ --cirth-color: var(--cirth-primary-active);
284
+ --cirth-underline: var(--cirth-primary-underline-active);
272
285
  --cirth-text-decoration: underline;
273
286
  }
274
287
 
@@ -278,23 +291,23 @@
278
291
  }
279
292
 
280
293
  .cirth :where(a:not([role="button"])).secondary, .cirth [role="link"].secondary {
281
- --cirth-color: var(--cirth-secondary);
294
+ --cirth-color: var(--cirth-secondary-text);
282
295
  --cirth-underline: var(--cirth-secondary-underline);
283
296
  }
284
297
 
285
298
  .cirth :where(a:not([role="button"])).secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), .cirth [role="link"].secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
286
- --cirth-color: var(--cirth-secondary-hover);
287
- --cirth-underline: var(--cirth-secondary-hover-underline);
299
+ --cirth-color: var(--cirth-secondary-active);
300
+ --cirth-underline: var(--cirth-secondary-underline-active);
288
301
  }
289
302
 
290
303
  .cirth :where(a:not([role="button"])).contrast, .cirth [role="link"].contrast {
291
- --cirth-color: var(--cirth-contrast);
304
+ --cirth-color: var(--cirth-contrast-text);
292
305
  --cirth-underline: var(--cirth-contrast-underline);
293
306
  }
294
307
 
295
308
  .cirth :where(a:not([role="button"])).contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), .cirth [role="link"].contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
296
- --cirth-color: var(--cirth-contrast-hover);
297
- --cirth-underline: var(--cirth-contrast-hover-underline);
309
+ --cirth-color: var(--cirth-contrast-active);
310
+ --cirth-underline: var(--cirth-contrast-underline-active);
298
311
  }
299
312
 
300
313
  .cirth :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)) {
@@ -320,9 +333,9 @@
320
333
  }
321
334
 
322
335
  .cirth button, .cirth [type="submit"], .cirth [type="reset"], .cirth [type="button"], .cirth [role="button"] {
323
- --cirth-background-color: var(--cirth-primary-background);
336
+ --cirth-background-color: var(--cirth-primary-surface);
324
337
  --cirth-border-color: var(--cirth-primary-border);
325
- --cirth-color: var(--cirth-primary-inverse);
338
+ --cirth-color: var(--cirth-primary-on-surface);
326
339
  --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 #0000);
327
340
  max-width: 100%;
328
341
  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);
@@ -345,9 +358,9 @@
345
358
  }
346
359
 
347
360
  .cirth [type="file"]::file-selector-button {
348
- --cirth-background-color: var(--cirth-primary-background);
361
+ --cirth-background-color: var(--cirth-primary-surface);
349
362
  --cirth-border-color: var(--cirth-primary-border);
350
- --cirth-color: var(--cirth-primary-inverse);
363
+ --cirth-color: var(--cirth-primary-on-surface);
351
364
  --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 #0000);
352
365
  max-width: 100%;
353
366
  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);
@@ -370,24 +383,24 @@
370
383
  }
371
384
 
372
385
  .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) {
373
- --cirth-background-color: var(--cirth-primary-hover-background);
374
- --cirth-border-color: var(--cirth-primary-hover-border);
386
+ --cirth-background-color: var(--cirth-primary-surface-active);
387
+ --cirth-border-color: var(--cirth-primary-border-active);
375
388
  --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000);
376
- --cirth-color: var(--cirth-primary-inverse);
389
+ --cirth-color: var(--cirth-primary-on-surface);
377
390
  }
378
391
 
379
392
  .cirth [type="file"]::file-selector-button:is() {
380
- --cirth-background-color: var(--cirth-primary-hover-background);
381
- --cirth-border-color: var(--cirth-primary-hover-border);
393
+ --cirth-background-color: var(--cirth-primary-surface-active);
394
+ --cirth-border-color: var(--cirth-primary-border-active);
382
395
  --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000);
383
- --cirth-color: var(--cirth-primary-inverse);
396
+ --cirth-color: var(--cirth-primary-on-surface);
384
397
  }
385
398
 
386
399
  .cirth [type="file"]::file-selector-button:is(:hover, :active, :focus) {
387
- --cirth-background-color: var(--cirth-primary-hover-background);
388
- --cirth-border-color: var(--cirth-primary-hover-border);
400
+ --cirth-background-color: var(--cirth-primary-surface-active);
401
+ --cirth-border-color: var(--cirth-primary-border-active);
389
402
  --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000);
390
- --cirth-color: var(--cirth-primary-inverse);
403
+ --cirth-color: var(--cirth-primary-on-surface);
391
404
  }
392
405
 
393
406
  .cirth button:active, .cirth [type="submit"]:active, .cirth [type="reset"]:active, .cirth [type="button"]:active, .cirth [role="button"]:active {
@@ -409,29 +422,29 @@
409
422
  }
410
423
 
411
424
  .cirth :is(button, [type="submit"], [type="button"], [role="button"]).secondary, .cirth [type="reset"] {
412
- --cirth-background-color: var(--cirth-secondary-background);
425
+ --cirth-background-color: var(--cirth-secondary-surface);
413
426
  --cirth-border-color: var(--cirth-secondary-border);
414
- --cirth-color: var(--cirth-secondary-inverse);
427
+ --cirth-color: var(--cirth-secondary-on-surface);
415
428
  cursor: pointer;
416
429
  }
417
430
 
418
431
  .cirth [type="file"]::file-selector-button {
419
- --cirth-background-color: var(--cirth-secondary-background);
432
+ --cirth-background-color: var(--cirth-secondary-surface);
420
433
  --cirth-border-color: var(--cirth-secondary-border);
421
- --cirth-color: var(--cirth-secondary-inverse);
434
+ --cirth-color: var(--cirth-secondary-on-surface);
422
435
  cursor: pointer;
423
436
  }
424
437
 
425
438
  .cirth :is(button, [type="submit"], [type="button"], [role="button"]).secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), .cirth [type="reset"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
426
- --cirth-background-color: var(--cirth-secondary-hover-background);
427
- --cirth-border-color: var(--cirth-secondary-hover-border);
428
- --cirth-color: var(--cirth-secondary-inverse);
439
+ --cirth-background-color: var(--cirth-secondary-surface-active);
440
+ --cirth-border-color: var(--cirth-secondary-border-active);
441
+ --cirth-color: var(--cirth-secondary-on-surface);
429
442
  }
430
443
 
431
444
  .cirth [type="file"]::file-selector-button:is(:hover, :active, :focus) {
432
- --cirth-background-color: var(--cirth-secondary-hover-background);
433
- --cirth-border-color: var(--cirth-secondary-hover-border);
434
- --cirth-color: var(--cirth-secondary-inverse);
445
+ --cirth-background-color: var(--cirth-secondary-surface-active);
446
+ --cirth-border-color: var(--cirth-secondary-border-active);
447
+ --cirth-color: var(--cirth-secondary-on-surface);
435
448
  }
436
449
 
437
450
  .cirth :is(button, [type="submit"], [type="button"], [role="button"]).secondary:focus-visible, .cirth :is(button, [type="submit"], [type="button"], [role="button"]).secondary[aria-current]:not([aria-current="false"]):focus-visible, .cirth [type="reset"]:focus-visible, .cirth [type="reset"][aria-current]:not([aria-current="false"]):focus-visible {
@@ -440,15 +453,15 @@
440
453
  }
441
454
 
442
455
  .cirth :is(button, [type="submit"], [type="button"], [role="button"]).contrast {
443
- --cirth-background-color: var(--cirth-contrast-background);
456
+ --cirth-background-color: var(--cirth-contrast-surface);
444
457
  --cirth-border-color: var(--cirth-contrast-border);
445
- --cirth-color: var(--cirth-contrast-inverse);
458
+ --cirth-color: var(--cirth-contrast-on-surface);
446
459
  }
447
460
 
448
461
  .cirth :is(button, [type="submit"], [type="button"], [role="button"]).contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
449
- --cirth-background-color: var(--cirth-contrast-hover-background);
450
- --cirth-border-color: var(--cirth-contrast-hover-border);
451
- --cirth-color: var(--cirth-contrast-inverse);
462
+ --cirth-background-color: var(--cirth-contrast-surface-active);
463
+ --cirth-border-color: var(--cirth-contrast-border-active);
464
+ --cirth-color: var(--cirth-contrast-on-surface);
452
465
  }
453
466
 
454
467
  .cirth :is(button, [type="submit"], [type="button"], [role="button"]).contrast:focus-visible, .cirth :is(button, [type="submit"], [type="button"], [role="button"]).contrast[aria-current]:not([aria-current="false"]):focus-visible {
@@ -456,6 +469,27 @@
456
469
  0 0 0 var(--cirth-outline-width) var(--cirth-contrast-focus);
457
470
  }
458
471
 
472
+ .cirth :is(button, [type="submit"], [type="button"], [role="button"]).danger {
473
+ --cirth-background-color: light-dark(var(--cirth-error), color-mix(in oklch, var(--cirth-error) 55%, black));
474
+ --cirth-border-color: var(--cirth-background-color);
475
+ --cirth-color: var(--cirth-primary-on-surface);
476
+ }
477
+
478
+ .cirth :is(button, [type="submit"], [type="button"], [role="button"]).danger:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
479
+ --cirth-background-color: light-dark(color-mix(in oklch, var(--cirth-error) 85%, black), color-mix(in oklch, var(--cirth-error) 50%, black));
480
+ --cirth-border-color: var(--cirth-background-color);
481
+ --cirth-color: var(--cirth-primary-on-surface);
482
+ }
483
+
484
+ .cirth :is(button, [type="submit"], [type="button"], [role="button"]).danger:focus-visible, .cirth :is(button, [type="submit"], [type="button"], [role="button"]).danger[aria-current]:not([aria-current="false"]):focus-visible {
485
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000),
486
+ 0
487
+ 0
488
+ 0
489
+ var(--cirth-outline-width)
490
+ var(--cirth-form-element-invalid-focus-color);
491
+ }
492
+
459
493
  .cirth :is(button, [type="submit"], [type="button"], [role="button"]).outline, .cirth [type="reset"].outline {
460
494
  --cirth-background-color: var(--cirth-form-element-background-color);
461
495
  }
@@ -465,80 +499,106 @@
465
499
  }
466
500
 
467
501
  .cirth :is(button, [type="submit"], [type="button"], [role="button"]).outline, .cirth [type="reset"].outline {
468
- --cirth-color: var(--cirth-primary);
469
- --cirth-border-color: var(--cirth-primary);
502
+ --cirth-color: var(--cirth-primary-text);
503
+ --cirth-border-color: var(--cirth-primary-text);
470
504
  }
471
505
 
472
506
  .cirth :is(button, [type="submit"], [type="button"], [role="button"]).outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), .cirth [type="reset"].outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
473
507
  --cirth-background-color: color-mix(in oklch,
474
- var(--cirth-primary) 12%,
508
+ var(--cirth-primary-text) 12%,
475
509
  var(--cirth-form-element-background-color));
476
- --cirth-color: var(--cirth-primary-hover);
477
- --cirth-border-color: var(--cirth-primary-hover);
510
+ --cirth-color: var(--cirth-primary-active);
511
+ --cirth-border-color: var(--cirth-primary-active);
478
512
  }
479
513
 
480
514
  .cirth :is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary, .cirth [type="reset"].outline.secondary {
481
- --cirth-color: var(--cirth-secondary);
482
- --cirth-border-color: var(--cirth-secondary);
515
+ --cirth-color: var(--cirth-secondary-text);
516
+ --cirth-border-color: var(--cirth-secondary-text);
483
517
  }
484
518
 
485
519
  .cirth :is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), .cirth [type="reset"].outline.secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
486
520
  --cirth-background-color: color-mix(in oklch,
487
- var(--cirth-secondary) 12%,
521
+ var(--cirth-secondary-text) 12%,
488
522
  var(--cirth-form-element-background-color));
489
- --cirth-color: var(--cirth-secondary-hover);
490
- --cirth-border-color: var(--cirth-secondary-hover);
523
+ --cirth-color: var(--cirth-secondary-active);
524
+ --cirth-border-color: var(--cirth-secondary-active);
491
525
  }
492
526
 
493
527
  .cirth :is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast, .cirth [type="reset"].outline.contrast {
494
- --cirth-color: var(--cirth-contrast);
495
- --cirth-border-color: var(--cirth-contrast);
528
+ --cirth-color: var(--cirth-contrast-text);
529
+ --cirth-border-color: var(--cirth-contrast-text);
496
530
  }
497
531
 
498
532
  .cirth :is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), .cirth [type="reset"].outline.contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
499
533
  --cirth-background-color: color-mix(in oklch,
500
- var(--cirth-contrast) 12%,
534
+ var(--cirth-contrast-text) 12%,
501
535
  var(--cirth-form-element-background-color));
502
- --cirth-color: var(--cirth-contrast-hover);
503
- --cirth-border-color: var(--cirth-contrast-hover);
536
+ --cirth-color: var(--cirth-contrast-active);
537
+ --cirth-border-color: var(--cirth-contrast-active);
504
538
  }
505
539
 
506
540
  .cirth :is(button, [type="submit"], [type="button"], [role="button"]).ghost, .cirth [type="reset"].ghost {
507
- --cirth-color: var(--cirth-primary);
541
+ --cirth-color: var(--cirth-primary-text);
508
542
  --cirth-border-color: transparent;
509
543
  }
510
544
 
511
545
  .cirth :is(button, [type="submit"], [type="button"], [role="button"]).ghost:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), .cirth [type="reset"].ghost:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
512
546
  --cirth-background-color: color-mix(in oklch,
513
- var(--cirth-primary) 12%,
547
+ var(--cirth-primary-text) 12%,
514
548
  transparent);
515
- --cirth-color: var(--cirth-primary-hover);
549
+ --cirth-color: var(--cirth-primary-active);
516
550
  --cirth-border-color: transparent;
517
551
  }
518
552
 
519
553
  .cirth :is(button, [type="submit"], [type="button"], [role="button"]).ghost.secondary, .cirth [type="reset"].ghost.secondary {
520
- --cirth-color: var(--cirth-secondary);
554
+ --cirth-color: var(--cirth-secondary-text);
521
555
  --cirth-border-color: transparent;
522
556
  }
523
557
 
524
558
  .cirth :is(button, [type="submit"], [type="button"], [role="button"]).ghost.secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), .cirth [type="reset"].ghost.secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
525
559
  --cirth-background-color: color-mix(in oklch,
526
- var(--cirth-secondary) 12%,
560
+ var(--cirth-secondary-text) 12%,
527
561
  transparent);
528
- --cirth-color: var(--cirth-secondary-hover);
562
+ --cirth-color: var(--cirth-secondary-active);
529
563
  --cirth-border-color: transparent;
530
564
  }
531
565
 
532
566
  .cirth :is(button, [type="submit"], [type="button"], [role="button"]).ghost.contrast, .cirth [type="reset"].ghost.contrast {
533
- --cirth-color: var(--cirth-contrast);
567
+ --cirth-color: var(--cirth-contrast-text);
534
568
  --cirth-border-color: transparent;
535
569
  }
536
570
 
537
571
  .cirth :is(button, [type="submit"], [type="button"], [role="button"]).ghost.contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), .cirth [type="reset"].ghost.contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
538
572
  --cirth-background-color: color-mix(in oklch,
539
- var(--cirth-contrast) 12%,
573
+ var(--cirth-contrast-text) 12%,
540
574
  transparent);
541
- --cirth-color: var(--cirth-contrast-hover);
575
+ --cirth-color: var(--cirth-contrast-active);
576
+ --cirth-border-color: transparent;
577
+ }
578
+
579
+ .cirth :is(button, [type="submit"], [type="button"], [role="button"]).outline.danger {
580
+ --cirth-background-color: var(--cirth-form-element-background-color);
581
+ --cirth-color: var(--cirth-error-text);
582
+ --cirth-border-color: var(--cirth-error-border);
583
+ }
584
+
585
+ .cirth :is(button, [type="submit"], [type="button"], [role="button"]).outline.danger:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
586
+ --cirth-background-color: var(--cirth-error-surface);
587
+ --cirth-color: var(--cirth-error-text);
588
+ --cirth-border-color: var(--cirth-error-active);
589
+ }
590
+
591
+ .cirth :is(button, [type="submit"], [type="button"], [role="button"]).ghost.danger {
592
+ --cirth-background-color: transparent;
593
+ --cirth-color: var(--cirth-error-text);
594
+ --cirth-border-color: transparent;
595
+ }
596
+
597
+ .cirth :is(button, [type="submit"], [type="button"], [role="button"]).ghost.danger:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
598
+ --cirth-background-color: color-mix(in oklch,
599
+ var(--cirth-error) 12%,
600
+ transparent);
601
+ --cirth-color: var(--cirth-error-text);
542
602
  --cirth-border-color: transparent;
543
603
  }
544
604
 
@@ -560,6 +620,8 @@
560
620
 
561
621
  .cirth caption {
562
622
  color: var(--cirth-muted-color);
623
+ font-size: var(--cirth-font-size-sm);
624
+ line-height: var(--cirth-line-height-normal);
563
625
  text-align: start;
564
626
  padding-block-end: calc(var(--cirth-spacing) * .5);
565
627
  }
@@ -670,6 +732,8 @@
670
732
  .cirth figure figcaption {
671
733
  padding: calc(var(--cirth-spacing) * .5) 0;
672
734
  color: var(--cirth-muted-color);
735
+ font-size: var(--cirth-font-size-sm);
736
+ line-height: var(--cirth-line-height-normal);
673
737
  }
674
738
 
675
739
  .cirth hr {
@@ -779,6 +843,20 @@
779
843
  border-style: dashed;
780
844
  }
781
845
 
846
+ .cirth input[type="number"][readonly] {
847
+ appearance: textfield;
848
+ }
849
+
850
+ .cirth input[type="number"][readonly]::-webkit-inner-spin-button {
851
+ -webkit-appearance: none;
852
+ margin: 0;
853
+ }
854
+
855
+ .cirth input[type="number"][readonly]::-webkit-outer-spin-button {
856
+ -webkit-appearance: none;
857
+ margin: 0;
858
+ }
859
+
782
860
  .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) {
783
861
  --cirth-background-color: var(--cirth-form-element-active-background-color);
784
862
  }
@@ -945,7 +1023,7 @@
945
1023
  }
946
1024
 
947
1025
  .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 {
948
- --cirth-background-color: var(--cirth-primary-background);
1026
+ --cirth-background-color: var(--cirth-primary-surface);
949
1027
  --cirth-border-color: var(--cirth-primary-border);
950
1028
  }
951
1029
 
@@ -960,7 +1038,7 @@
960
1038
  }
961
1039
 
962
1040
  .cirth [type="checkbox"]:not([role="switch"]):checked:before, .cirth [type="checkbox"]:not([role="switch"]):indeterminate:before {
963
- background-color: var(--cirth-primary-inverse);
1041
+ background-color: var(--cirth-primary-on-surface);
964
1042
  content: "";
965
1043
  width: 100%;
966
1044
  height: 100%;
@@ -981,7 +1059,7 @@
981
1059
  }
982
1060
 
983
1061
  .cirth [type="checkbox"]:not([role="switch"]):indeterminate {
984
- --cirth-background-color: var(--cirth-primary-background);
1062
+ --cirth-background-color: var(--cirth-primary-surface);
985
1063
  --cirth-border-color: var(--cirth-primary-border);
986
1064
  }
987
1065
 
@@ -994,7 +1072,7 @@
994
1072
  }
995
1073
 
996
1074
  .cirth [type="radio"]:checked, .cirth [type="radio"]:checked:active, .cirth [type="radio"]:checked:focus {
997
- --cirth-background-color: var(--cirth-primary-inverse);
1075
+ --cirth-background-color: var(--cirth-primary-on-surface);
998
1076
  border-width: .42em;
999
1077
  }
1000
1078
 
@@ -1158,8 +1236,8 @@
1158
1236
  }
1159
1237
 
1160
1238
  .cirth [type="file"]:is(:hover, :active, :focus)::file-selector-button {
1161
- --cirth-background-color: var(--cirth-secondary-hover-background);
1162
- --cirth-border-color: var(--cirth-secondary-hover-border);
1239
+ --cirth-background-color: var(--cirth-secondary-surface-active);
1240
+ --cirth-border-color: var(--cirth-secondary-border-active);
1163
1241
  }
1164
1242
 
1165
1243
  .cirth [type="file"]:focus::file-selector-button {
@@ -1169,9 +1247,9 @@
1169
1247
 
1170
1248
  .cirth [type="range"] {
1171
1249
  appearance: none;
1172
- background: none;
1173
1250
  width: 100%;
1174
- height: 1.25rem;
1251
+ 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);
1252
+ background: none;
1175
1253
  }
1176
1254
 
1177
1255
  .cirth [type="range"]::-webkit-slider-runnable-track {
@@ -1218,6 +1296,18 @@
1218
1296
  --cirth-range-thumb-color: var(--cirth-range-thumb-active-color);
1219
1297
  }
1220
1298
 
1299
+ @media (hover: hover) and (pointer: fine) {
1300
+ .cirth [type="range"]:hover:not(:active, :focus, :disabled) {
1301
+ --cirth-range-border-color: var(--cirth-range-active-border-color);
1302
+ --cirth-range-thumb-color: var(--cirth-secondary-active);
1303
+ }
1304
+ }
1305
+
1306
+ .cirth [type="range"]:focus-visible {
1307
+ outline: var(--cirth-outline-width) solid var(--cirth-primary-focus);
1308
+ outline-offset: var(--cirth-space-1);
1309
+ }
1310
+
1221
1311
  .cirth [type="range"]:active::-webkit-slider-thumb {
1222
1312
  transform: scale(1.25);
1223
1313
  }
@@ -1685,7 +1775,7 @@
1685
1775
  --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1686
1776
  var(--cirth-primary-border);
1687
1777
  --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1688
- var(--cirth-primary-hover-border);
1778
+ var(--cirth-primary-border-active);
1689
1779
  }
1690
1780
 
1691
1781
  .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 .group button:focus, .cirth .group [type="submit"]:focus, .cirth .group [type="reset"]:focus, .cirth .group [type="button"]:focus, .cirth .group [role="button"]:focus {
@@ -1817,7 +1907,7 @@
1817
1907
  @starting-style {
1818
1908
  .cirth dialog[open] > article {
1819
1909
  opacity: 0;
1820
- transform: translateY(-100%);
1910
+ transform: translateY(-.5rem);
1821
1911
  }
1822
1912
  }
1823
1913
 
@@ -2016,11 +2106,11 @@
2016
2106
  .cirth header:not(:is(article, aside, dialog, figure, li, nav, section, td) *) > nav li :where(a:not([role="button"]), [role="link"]):is(:hover, :focus, :active) {
2017
2107
  --cirth-color: color-mix(in oklch,
2018
2108
  var(--cirth-muted-color),
2019
- var(--cirth-contrast));
2109
+ var(--cirth-contrast-text));
2020
2110
  }
2021
2111
 
2022
2112
  .cirth 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"]) {
2023
- --cirth-color: var(--cirth-contrast);
2113
+ --cirth-color: var(--cirth-contrast-text);
2024
2114
  font-weight: var(--cirth-font-weight-semibold);
2025
2115
  }
2026
2116
 
@@ -2182,6 +2272,7 @@
2182
2272
  scroll-behavior: auto;
2183
2273
  transition-delay: var(--cirth-duration-instant);
2184
2274
  transition-duration: var(--cirth-duration-instant);
2275
+ --cirth-transition: var(--cirth-duration-instant) var(--cirth-ease-out);
2185
2276
  animation-duration: 1ms;
2186
2277
  animation-iteration-count: 1;
2187
2278
  animation-delay: -1ms;
@@ -2344,7 +2435,11 @@
2344
2435
  --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");
2345
2436
  --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");
2346
2437
  --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");
2347
- --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");
2438
+ --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");
2439
+ }
2440
+
2441
+ .cirth :focus-visible {
2442
+ transition-duration: var(--cirth-duration-instant);
2348
2443
  }
2349
2444
 
2350
2445
  .cirth a, .cirth a.secondary, .cirth a.contrast {
@@ -2497,47 +2592,46 @@
2497
2592
  }
2498
2593
 
2499
2594
  .cirth {
2500
- --cirth-canvas: light-dark(oklch(97.4% .004 69.35), oklch(20.15% .003 264));
2501
- --cirth-ink: light-dark(oklch(35.3% .021 264), oklch(83% .016 264));
2595
+ --cirth-canvas: light-dark(oklch(97.3% .006 44), oklch(20.15% .0225 280));
2596
+ --cirth-ink: light-dark(oklch(35.3% .027 280), oklch(83% .011 280));
2502
2597
  --cirth-color: var(--cirth-ink);
2503
- --cirth-text-selection-color: light-dark(oklch(65.7% .121 69.35 / .25), oklch(70% .129 69.35 / .1875));
2504
- --cirth-muted-color: light-dark(oklch(52.7% .032 264), oklch(65.7% .03 264));
2505
- --cirth-muted-border-color: light-dark(oklch(93.85% .003 264), oklch(26.7% .011 264));
2506
- --cirth-error: light-dark(oklch(44% .151 29.73), oklch(74.3% .133 29.73));
2507
- --cirth-success: light-dark(oklch(52.7% .1 160.59), oklch(65.7% .125 160.59));
2508
- --cirth-warning: light-dark(oklch(48.3% .086 78), oklch(70% .124 78));
2509
- --cirth-primary: light-dark(oklch(52.7% .097 69.35), oklch(70% .129 69.35));
2510
- --cirth-secondary: light-dark(oklch(52.7% .032 264), oklch(70% .028 264));
2511
- --cirth-secondary-underline: light-dark(oklch(52.7% .032 264 / .5), oklch(70% .028 264 / .5));
2512
- --cirth-secondary-hover: light-dark(oklch(44% .028 264), oklch(78.7% .021 264));
2513
- --cirth-secondary-hover-background: light-dark(oklch(44% .028 264), oklch(52.7% .032 264));
2514
- --cirth-secondary-focus: light-dark(oklch(48.3% .03 264 / .7), oklch(70% .028 264 / .7));
2515
- --cirth-contrast: light-dark(oklch(22.3% .006 264), oklch(91.7% .006 264));
2516
- --cirth-contrast-background: light-dark(oklch(22.3% .006 264), oklch(96% 0 264));
2517
- --cirth-contrast-underline: light-dark(oklch(22.3% .006 264 / .5), oklch(91.7% .006 264 / .5));
2518
- --cirth-contrast-hover: light-dark(oklch(0% 0 0), oklch(100% 0 0));
2519
- --cirth-contrast-hover-background: light-dark(oklch(0% 0 0), oklch(100% 0 0));
2520
- --cirth-contrast-focus: light-dark(oklch(48.3% .03 264 / .7), oklch(87.3% .011 264 / .5));
2521
- --cirth-contrast-inverse: light-dark(oklch(100% 0 0), oklch(0% 0 0));
2522
- --cirth-link-visited-color: light-dark(oklch(48.3% 0 264), oklch(65.7% 0 264));
2523
- --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),
2524
- .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));
2525
- --cirth-h1-color: light-dark(oklch(22.3% .006 264), oklch(96% 0 264));
2526
- --cirth-h2-color: light-dark(oklch(26.7% .011 264), oklch(91.7% .006 264));
2527
- --cirth-h3-color: light-dark(oklch(31% .016 264), oklch(83% .016 264));
2528
- --cirth-h4-color: light-dark(oklch(35.3% .021 264), oklch(78.7% .021 264));
2529
- --cirth-h5-color: light-dark(oklch(39.7% .025 264), oklch(74.3% .025 264));
2530
- --cirth-h6-color: light-dark(oklch(44% .028 264), oklch(65.7% .03 264));
2531
- --cirth-mark-color: light-dark(oklch(18% 0 264), oklch(100% 0 0));
2532
- --cirth-code-color: light-dark(oklch(52.7% .032 264), oklch(65.7% .03 264));
2533
- --cirth-form-element-selected-background-color: light-dark(oklch(91.7% .006 264), oklch(31% .016 264));
2534
- --cirth-form-element-border-color: light-dark(oklch(61.3% .032 264), oklch(52.7% .032 264));
2535
- --cirth-form-element-color: light-dark(oklch(26.7% .011 264), oklch(91.7% .006 264));
2536
- --cirth-switch-background-color: light-dark(oklch(61.3% .032 264), oklch(52.7% .032 264));
2537
- --cirth-range-border-color: light-dark(oklch(91.7% .006 264), oklch(26.7% .011 264));
2538
- --cirth-range-active-border-color: light-dark(oklch(83% .016 264), oklch(31% .016 264));
2539
- --cirth-progress-background-color: light-dark(oklch(91.7% .006 264), oklch(26.7% .011 264));
2540
- --cirth-progress-border-color: light-dark(oklch(61.3% .032 264), oklch(52.7% .032 264));
2598
+ --cirth-muted-color: light-dark(oklch(52.7% .031 280), oklch(65.7% .025 280));
2599
+ --cirth-muted-border-color: light-dark(oklch(93.85% .002 280), oklch(26.7% .025 280));
2600
+ --cirth-error: light-dark(oklch(44% .151 22), oklch(74.3% .133 22));
2601
+ --cirth-success: light-dark(oklch(52.7% .115 153), oklch(65.7% .144 153));
2602
+ --cirth-warning: light-dark(oklch(48.3% .084 89.5), oklch(70% .122 89.5));
2603
+ --cirth-primary: light-dark(oklch(52.7% .107 44), oklch(65.7% .134 44));
2604
+ --cirth-secondary-text: light-dark(oklch(52.7% .031 280), oklch(70% .021 280));
2605
+ --cirth-secondary-underline: light-dark(oklch(52.7% .031 280 / .5), oklch(70% .021 280 / .5));
2606
+ --cirth-secondary-active: light-dark(oklch(44% .029 280), oklch(78.7% .014 280));
2607
+ --cirth-secondary-surface-active: light-dark(oklch(44% .029 280), oklch(52.7% .031 280));
2608
+ --cirth-secondary-focus: light-dark(oklch(48.3% .03 280 / .7), oklch(70% .021 280 / .7));
2609
+ --cirth-contrast-text: light-dark(oklch(22.3% .023 280), oklch(91.7% .004 280));
2610
+ --cirth-contrast-surface: light-dark(oklch(22.3% .023 280), oklch(96% 0 280));
2611
+ --cirth-contrast-underline: light-dark(oklch(22.3% .023 280 / .5), oklch(91.7% .004 280 / .5));
2612
+ --cirth-contrast-active: light-dark(oklch(0% 0 0), oklch(100% 0 0));
2613
+ --cirth-contrast-surface-active: light-dark(oklch(0% 0 0), oklch(100% 0 0));
2614
+ --cirth-contrast-focus: light-dark(oklch(48.3% .03 280 / .7), oklch(87.3% .007 280 / .5));
2615
+ --cirth-contrast-on-surface: light-dark(oklch(100% 0 0), oklch(0% 0 0));
2616
+ --cirth-link-visited-color: light-dark(oklch(48.3% 0 280), oklch(65.7% 0 280));
2617
+ --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),
2618
+ .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));
2619
+ --cirth-h1-color: light-dark(oklch(22.3% .023 280), oklch(96% 0 280));
2620
+ --cirth-h2-color: light-dark(oklch(26.7% .025 280), oklch(91.7% .004 280));
2621
+ --cirth-h3-color: light-dark(oklch(31% .026 280), oklch(83% .011 280));
2622
+ --cirth-h4-color: light-dark(oklch(35.3% .027 280), oklch(78.7% .014 280));
2623
+ --cirth-h5-color: light-dark(oklch(39.7% .028 280), oklch(74.3% .018 280));
2624
+ --cirth-h6-color: light-dark(oklch(44% .029 280), oklch(65.7% .025 280));
2625
+ --cirth-mark-color: light-dark(oklch(18% .022 280), oklch(100% 0 0));
2626
+ --cirth-code-color: light-dark(oklch(52.7% .031 280), oklch(65.7% .025 280));
2627
+ --cirth-form-element-selected-background-color: light-dark(oklch(91.7% .004 280), oklch(31% .026 280));
2628
+ --cirth-form-element-border-color: light-dark(oklch(61.3% .028 280), oklch(52.7% .031 280));
2629
+ --cirth-form-element-color: light-dark(oklch(26.7% .025 280), oklch(91.7% .004 280));
2630
+ --cirth-switch-background-color: light-dark(oklch(61.3% .028 280), oklch(52.7% .031 280));
2631
+ --cirth-range-border-color: light-dark(oklch(91.7% .004 280), oklch(26.7% .025 280));
2632
+ --cirth-range-active-border-color: light-dark(oklch(83% .011 280), oklch(31% .026 280));
2633
+ --cirth-progress-background-color: light-dark(oklch(91.7% .004 280), oklch(26.7% .025 280));
2634
+ --cirth-progress-border-color: light-dark(oklch(61.3% .028 280), oklch(52.7% .031 280));
2541
2635
  }
2542
2636
 
2543
2637
  .cirth:where([data-theme="light"]), .cirth :where([data-theme="light"]), .cirth:where(:not([data-theme="dark"])) {
@@ -2554,17 +2648,21 @@
2554
2648
  --cirth-warning-border: oklch(from var(--cirth-warning) calc(l * 1.269) calc(c * 1.267) h);
2555
2649
  --cirth-warning-active: oklch(from var(--cirth-warning) calc(l * 1.091) calc(c * 1.081) h);
2556
2650
  --cirth-warning-surface: oklch(from var(--cirth-warning) 93% .05 h);
2557
- --cirth-primary-background: var(--cirth-primary);
2558
- --cirth-primary-border: var(--cirth-primary-background);
2651
+ --cirth-primary-text: var(--cirth-primary);
2652
+ --cirth-primary-surface: var(--cirth-primary);
2653
+ --cirth-primary-border: var(--cirth-primary-surface);
2559
2654
  --cirth-primary-underline: oklch(from var(--cirth-primary) l c h / 50%);
2560
- --cirth-primary-hover: color-mix(in oklch, var(--cirth-primary) 83.5%, black);
2561
- --cirth-primary-hover-background: color-mix(in oklch,
2655
+ --cirth-primary-active: color-mix(in oklch,
2656
+ var(--cirth-primary) 83.5%,
2657
+ black);
2658
+ --cirth-primary-surface-active: color-mix(in oklch,
2562
2659
  var(--cirth-primary) 91.7%,
2563
2660
  black);
2564
- --cirth-primary-hover-border: var(--cirth-primary-hover-background);
2565
- --cirth-primary-hover-underline: var(--cirth-primary-hover);
2661
+ --cirth-primary-border-active: var(--cirth-primary-surface-active);
2662
+ --cirth-primary-underline-active: var(--cirth-primary-active);
2566
2663
  --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 75%);
2567
- --cirth-primary-inverse: oklch(100% 0 0);
2664
+ --cirth-primary-on-surface: oklch(100% 0 0);
2665
+ --cirth-text-selection-color: oklch(from var(--cirth-primary) calc(l * 1.247) c h / 25%);
2568
2666
  --cirth-code-background-color: oklch(from var(--cirth-canvas) calc(l - .019) c h);
2569
2667
  --cirth-card-sectioning-background-color: oklch(from var(--cirth-canvas) calc(l + .009) c h);
2570
2668
  --cirth-form-element-background-color: oklch(from var(--cirth-canvas) calc(l - .008) c h);
@@ -2572,15 +2670,17 @@
2572
2670
  --cirth-form-element-active-background-color: var(--cirth-canvas);
2573
2671
  --cirth-dropdown-background-color: var(--cirth-card-background-color);
2574
2672
  --cirth-popover-background-color: var(--cirth-card-background-color);
2575
- --cirth-secondary-background: oklch(48.3% .03 264);
2576
- --cirth-secondary-border: var(--cirth-secondary-background);
2577
- --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
2578
- --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
2579
- --cirth-secondary-inverse: oklch(100% 0 0);
2580
- --cirth-contrast-border: var(--cirth-contrast-background);
2581
- --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
2582
- --cirth-contrast-hover-underline: var(--cirth-secondary-hover);
2583
- --cirth-mark-background-color: var(--cirth-warning-surface);
2673
+ --cirth-secondary-surface: oklch(48.3% .03 280);
2674
+ --cirth-secondary-border: var(--cirth-secondary-surface);
2675
+ --cirth-secondary-border-active: var(--cirth-secondary-surface-active);
2676
+ --cirth-secondary-underline-active: var(--cirth-secondary-active);
2677
+ --cirth-secondary-on-surface: oklch(100% 0 0);
2678
+ --cirth-contrast-border: var(--cirth-contrast-surface);
2679
+ --cirth-contrast-border-active: var(--cirth-contrast-surface-active);
2680
+ --cirth-contrast-underline-active: var(--cirth-secondary-active);
2681
+ --cirth-mark-background-color: color-mix(in oklab,
2682
+ var(--cirth-primary) 18%,
2683
+ var(--cirth-canvas));
2584
2684
  --cirth-ins-color: var(--cirth-success-text);
2585
2685
  --cirth-del-color: var(--cirth-error-text);
2586
2686
  --cirth-blockquote-border-color: var(--cirth-muted-border-color);
@@ -2588,7 +2688,7 @@
2588
2688
  --cirth-button-box-shadow: 0 0 0 #0000;
2589
2689
  --cirth-button-hover-box-shadow: 0 0 0 #0000;
2590
2690
  --cirth-table-border-color: var(--cirth-card-border-color);
2591
- --cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
2691
+ --cirth-table-row-stripped-background-color: oklch(57% .032 280 / .0375);
2592
2692
  --cirth-code-kbd-background-color: var(--cirth-ink);
2593
2693
  --cirth-code-kbd-color: var(--cirth-background-color);
2594
2694
  --cirth-form-element-placeholder-color: var(--cirth-muted-color);
@@ -2602,32 +2702,32 @@
2602
2702
  --cirth-form-element-valid-active-border-color: var(--cirth-success-active);
2603
2703
  --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
2604
2704
  --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
2605
- --cirth-switch-checked-background-color: var(--cirth-primary-background);
2606
- --cirth-switch-color: var(--cirth-primary-inverse);
2705
+ --cirth-switch-checked-background-color: var(--cirth-primary-surface);
2706
+ --cirth-switch-color: var(--cirth-primary-on-surface);
2607
2707
  --cirth-range-thumb-border-color: var(--cirth-background-color);
2608
- --cirth-range-thumb-color: var(--cirth-secondary-background);
2609
- --cirth-range-thumb-active-color: var(--cirth-primary-background);
2610
- --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
2708
+ --cirth-range-thumb-color: var(--cirth-secondary-text);
2709
+ --cirth-range-thumb-active-color: var(--cirth-primary-surface);
2710
+ --cirth-accordion-active-summary-color: var(--cirth-primary-active);
2611
2711
  --cirth-accordion-close-summary-color: var(--cirth-ink);
2612
2712
  --cirth-accordion-open-summary-color: var(--cirth-ink);
2613
2713
  --cirth-card-border-color: color-mix(in oklab,
2614
2714
  var(--cirth-form-element-border-color) 38%,
2615
- var(--cirth-card-background-color));
2715
+ oklch(from var(--cirth-card-background-color) l 0 h));
2616
2716
  --cirth-dropdown-box-shadow: var(--cirth-box-shadow);
2617
2717
  --cirth-dropdown-color: var(--cirth-ink);
2618
2718
  --cirth-dropdown-border-color: var(--cirth-card-border-color);
2619
2719
  --cirth-dropdown-hover-background-color: var(--cirth-card-sectioning-background-color);
2620
- --cirth-modal-overlay-background-color: oklch(93.85% .003 264deg / var(--cirth-opacity-overlay));
2720
+ --cirth-modal-overlay-background-color: oklch(93.85% .002 280deg / var(--cirth-opacity-overlay));
2621
2721
  --cirth-meter-optimum-color: var(--cirth-success);
2622
2722
  --cirth-meter-suboptimum-color: var(--cirth-warning);
2623
2723
  --cirth-meter-even-less-good-color: var(--cirth-error);
2624
- --cirth-progress-color: var(--cirth-primary-background);
2625
- --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");
2626
- --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");
2627
- --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");
2628
- --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");
2629
- --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");
2630
- --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");
2724
+ --cirth-progress-color: var(--cirth-primary-surface);
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(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");
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(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");
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(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");
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(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");
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(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");
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(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");
2631
2731
  }
2632
2732
 
2633
2733
  @media only screen and (prefers-color-scheme: dark) {
@@ -2645,19 +2745,21 @@
2645
2745
  --cirth-warning-border: var(--cirth-warning);
2646
2746
  --cirth-warning-active: oklch(from var(--cirth-warning) calc(l * 1.124) calc(c * 1.121) h);
2647
2747
  --cirth-warning-surface: oklch(from var(--cirth-warning) 35.3% .063 h);
2648
- --cirth-primary-background: color-mix(in oklch,
2748
+ --cirth-primary-text: var(--cirth-primary);
2749
+ --cirth-primary-surface: color-mix(in oklch,
2649
2750
  var(--cirth-primary) 75.2%,
2650
2751
  black);
2651
- --cirth-primary-border: var(--cirth-primary-background);
2752
+ --cirth-primary-border: var(--cirth-primary-surface);
2652
2753
  --cirth-primary-underline: oklch(from var(--cirth-primary) l c h / 50%);
2653
- --cirth-primary-hover: oklch(from var(--cirth-primary) calc(l * 1.124) calc(c * 1.132) h);
2654
- --cirth-primary-hover-background: color-mix(in oklch,
2754
+ --cirth-primary-active: oklch(from var(--cirth-primary) calc(l * 1.124) calc(c * 1.132) h);
2755
+ --cirth-primary-surface-active: color-mix(in oklch,
2655
2756
  var(--cirth-primary) 72%,
2656
2757
  black);
2657
- --cirth-primary-hover-border: var(--cirth-primary-hover-background);
2658
- --cirth-primary-hover-underline: var(--cirth-primary-hover);
2659
- --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 70%);
2660
- --cirth-primary-inverse: oklch(100% 0 0);
2758
+ --cirth-primary-border-active: var(--cirth-primary-surface-active);
2759
+ --cirth-primary-underline-active: var(--cirth-primary-active);
2760
+ --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 80%);
2761
+ --cirth-text-selection-color: oklch(from var(--cirth-primary) calc(l * 1.065) c h / 18.75%);
2762
+ --cirth-primary-on-surface: oklch(100% 0 0);
2661
2763
  --cirth-code-background-color: oklch(from var(--cirth-canvas) calc(l - .02) c h);
2662
2764
  --cirth-card-sectioning-background-color: oklch(from var(--cirth-canvas) calc(l + .025) c h);
2663
2765
  --cirth-form-element-background-color: oklch(from var(--cirth-canvas) calc(l - .008) c h);
@@ -2665,15 +2767,17 @@
2665
2767
  --cirth-form-element-active-background-color: var(--cirth-canvas);
2666
2768
  --cirth-dropdown-background-color: var(--cirth-card-background-color);
2667
2769
  --cirth-popover-background-color: var(--cirth-card-background-color);
2668
- --cirth-secondary-background: oklch(48.3% .03 264);
2669
- --cirth-secondary-border: var(--cirth-secondary-background);
2670
- --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
2671
- --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
2672
- --cirth-secondary-inverse: oklch(100% 0 0);
2673
- --cirth-contrast-border: var(--cirth-contrast-background);
2674
- --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
2675
- --cirth-contrast-hover-underline: var(--cirth-contrast-hover);
2676
- --cirth-mark-background-color: var(--cirth-warning-surface);
2770
+ --cirth-secondary-surface: oklch(48.3% .03 280);
2771
+ --cirth-secondary-border: var(--cirth-secondary-surface);
2772
+ --cirth-secondary-border-active: var(--cirth-secondary-surface-active);
2773
+ --cirth-secondary-underline-active: var(--cirth-secondary-active);
2774
+ --cirth-secondary-on-surface: oklch(100% 0 0);
2775
+ --cirth-contrast-border: var(--cirth-contrast-surface);
2776
+ --cirth-contrast-border-active: var(--cirth-contrast-surface-active);
2777
+ --cirth-contrast-underline-active: var(--cirth-contrast-active);
2778
+ --cirth-mark-background-color: color-mix(in oklab,
2779
+ var(--cirth-primary) 24%,
2780
+ var(--cirth-canvas));
2677
2781
  --cirth-ins-color: var(--cirth-success-text);
2678
2782
  --cirth-del-color: var(--cirth-error-text);
2679
2783
  --cirth-blockquote-border-color: var(--cirth-muted-border-color);
@@ -2681,10 +2785,10 @@
2681
2785
  --cirth-button-box-shadow: 0 0 0 #0000;
2682
2786
  --cirth-button-hover-box-shadow: 0 0 0 #0000;
2683
2787
  --cirth-table-border-color: var(--cirth-card-border-color);
2684
- --cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
2788
+ --cirth-table-row-stripped-background-color: oklch(57% .032 280 / .0375);
2685
2789
  --cirth-code-kbd-background-color: var(--cirth-ink);
2686
2790
  --cirth-code-kbd-color: var(--cirth-background-color);
2687
- --cirth-form-element-placeholder-color: oklch(65.7% .03 264);
2791
+ --cirth-form-element-placeholder-color: oklch(65.7% .025 280);
2688
2792
  --cirth-form-element-active-border-color: var(--cirth-primary-border);
2689
2793
  --cirth-form-element-focus-color: var(--cirth-primary-focus);
2690
2794
  --cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
@@ -2695,12 +2799,12 @@
2695
2799
  --cirth-form-element-valid-active-border-color: var(--cirth-success-active);
2696
2800
  --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
2697
2801
  --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
2698
- --cirth-switch-checked-background-color: var(--cirth-primary-background);
2699
- --cirth-switch-color: var(--cirth-primary-inverse);
2802
+ --cirth-switch-checked-background-color: var(--cirth-primary-surface);
2803
+ --cirth-switch-color: var(--cirth-primary-on-surface);
2700
2804
  --cirth-range-thumb-border-color: var(--cirth-background-color);
2701
- --cirth-range-thumb-color: var(--cirth-secondary-background);
2702
- --cirth-range-thumb-active-color: var(--cirth-primary-background);
2703
- --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
2805
+ --cirth-range-thumb-color: var(--cirth-secondary-text);
2806
+ --cirth-range-thumb-active-color: var(--cirth-primary-surface);
2807
+ --cirth-accordion-active-summary-color: var(--cirth-primary-active);
2704
2808
  --cirth-accordion-close-summary-color: var(--cirth-ink);
2705
2809
  --cirth-accordion-open-summary-color: var(--cirth-ink);
2706
2810
  --cirth-card-border-color: color-mix(in oklab,
@@ -2710,17 +2814,17 @@
2710
2814
  --cirth-dropdown-color: var(--cirth-ink);
2711
2815
  --cirth-dropdown-border-color: var(--cirth-card-border-color);
2712
2816
  --cirth-dropdown-hover-background-color: var(--cirth-card-sectioning-background-color);
2713
- --cirth-modal-overlay-background-color: oklch(9% 0 0deg / var(--cirth-opacity-overlay));
2817
+ --cirth-modal-overlay-background-color: oklch(9% .011 280deg / var(--cirth-opacity-overlay));
2714
2818
  --cirth-meter-optimum-color: var(--cirth-success);
2715
2819
  --cirth-meter-suboptimum-color: var(--cirth-warning);
2716
2820
  --cirth-meter-even-less-good-color: var(--cirth-error);
2717
- --cirth-progress-color: var(--cirth-primary);
2718
- --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");
2719
- --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");
2720
- --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");
2721
- --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");
2722
- --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");
2723
- --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");
2821
+ --cirth-progress-color: var(--cirth-primary-text);
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(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");
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(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");
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(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");
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(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");
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, 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");
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, 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");
2724
2828
  }
2725
2829
 
2726
2830
  .cirth:where(:not([data-theme])) details summary[role="button"].contrast:not(.outline):after, .cirth: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 {
@@ -2742,19 +2846,21 @@
2742
2846
  --cirth-warning-border: var(--cirth-warning);
2743
2847
  --cirth-warning-active: oklch(from var(--cirth-warning) calc(l * 1.124) calc(c * 1.121) h);
2744
2848
  --cirth-warning-surface: oklch(from var(--cirth-warning) 35.3% .063 h);
2745
- --cirth-primary-background: color-mix(in oklch,
2849
+ --cirth-primary-text: var(--cirth-primary);
2850
+ --cirth-primary-surface: color-mix(in oklch,
2746
2851
  var(--cirth-primary) 75.2%,
2747
2852
  black);
2748
- --cirth-primary-border: var(--cirth-primary-background);
2853
+ --cirth-primary-border: var(--cirth-primary-surface);
2749
2854
  --cirth-primary-underline: oklch(from var(--cirth-primary) l c h / 50%);
2750
- --cirth-primary-hover: oklch(from var(--cirth-primary) calc(l * 1.124) calc(c * 1.132) h);
2751
- --cirth-primary-hover-background: color-mix(in oklch,
2855
+ --cirth-primary-active: oklch(from var(--cirth-primary) calc(l * 1.124) calc(c * 1.132) h);
2856
+ --cirth-primary-surface-active: color-mix(in oklch,
2752
2857
  var(--cirth-primary) 72%,
2753
2858
  black);
2754
- --cirth-primary-hover-border: var(--cirth-primary-hover-background);
2755
- --cirth-primary-hover-underline: var(--cirth-primary-hover);
2756
- --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 70%);
2757
- --cirth-primary-inverse: oklch(100% 0 0);
2859
+ --cirth-primary-border-active: var(--cirth-primary-surface-active);
2860
+ --cirth-primary-underline-active: var(--cirth-primary-active);
2861
+ --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 80%);
2862
+ --cirth-text-selection-color: oklch(from var(--cirth-primary) calc(l * 1.065) c h / 18.75%);
2863
+ --cirth-primary-on-surface: oklch(100% 0 0);
2758
2864
  --cirth-code-background-color: oklch(from var(--cirth-canvas) calc(l - .02) c h);
2759
2865
  --cirth-card-sectioning-background-color: oklch(from var(--cirth-canvas) calc(l + .025) c h);
2760
2866
  --cirth-form-element-background-color: oklch(from var(--cirth-canvas) calc(l - .008) c h);
@@ -2762,15 +2868,17 @@
2762
2868
  --cirth-form-element-active-background-color: var(--cirth-canvas);
2763
2869
  --cirth-dropdown-background-color: var(--cirth-card-background-color);
2764
2870
  --cirth-popover-background-color: var(--cirth-card-background-color);
2765
- --cirth-secondary-background: oklch(48.3% .03 264);
2766
- --cirth-secondary-border: var(--cirth-secondary-background);
2767
- --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
2768
- --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
2769
- --cirth-secondary-inverse: oklch(100% 0 0);
2770
- --cirth-contrast-border: var(--cirth-contrast-background);
2771
- --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
2772
- --cirth-contrast-hover-underline: var(--cirth-contrast-hover);
2773
- --cirth-mark-background-color: var(--cirth-warning-surface);
2871
+ --cirth-secondary-surface: oklch(48.3% .03 280);
2872
+ --cirth-secondary-border: var(--cirth-secondary-surface);
2873
+ --cirth-secondary-border-active: var(--cirth-secondary-surface-active);
2874
+ --cirth-secondary-underline-active: var(--cirth-secondary-active);
2875
+ --cirth-secondary-on-surface: oklch(100% 0 0);
2876
+ --cirth-contrast-border: var(--cirth-contrast-surface);
2877
+ --cirth-contrast-border-active: var(--cirth-contrast-surface-active);
2878
+ --cirth-contrast-underline-active: var(--cirth-contrast-active);
2879
+ --cirth-mark-background-color: color-mix(in oklab,
2880
+ var(--cirth-primary) 24%,
2881
+ var(--cirth-canvas));
2774
2882
  --cirth-ins-color: var(--cirth-success-text);
2775
2883
  --cirth-del-color: var(--cirth-error-text);
2776
2884
  --cirth-blockquote-border-color: var(--cirth-muted-border-color);
@@ -2778,10 +2886,10 @@
2778
2886
  --cirth-button-box-shadow: 0 0 0 #0000;
2779
2887
  --cirth-button-hover-box-shadow: 0 0 0 #0000;
2780
2888
  --cirth-table-border-color: var(--cirth-card-border-color);
2781
- --cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
2889
+ --cirth-table-row-stripped-background-color: oklch(57% .032 280 / .0375);
2782
2890
  --cirth-code-kbd-background-color: var(--cirth-ink);
2783
2891
  --cirth-code-kbd-color: var(--cirth-background-color);
2784
- --cirth-form-element-placeholder-color: oklch(65.7% .03 264);
2892
+ --cirth-form-element-placeholder-color: oklch(65.7% .025 280);
2785
2893
  --cirth-form-element-active-border-color: var(--cirth-primary-border);
2786
2894
  --cirth-form-element-focus-color: var(--cirth-primary-focus);
2787
2895
  --cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
@@ -2792,12 +2900,12 @@
2792
2900
  --cirth-form-element-valid-active-border-color: var(--cirth-success-active);
2793
2901
  --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
2794
2902
  --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
2795
- --cirth-switch-checked-background-color: var(--cirth-primary-background);
2796
- --cirth-switch-color: var(--cirth-primary-inverse);
2903
+ --cirth-switch-checked-background-color: var(--cirth-primary-surface);
2904
+ --cirth-switch-color: var(--cirth-primary-on-surface);
2797
2905
  --cirth-range-thumb-border-color: var(--cirth-background-color);
2798
- --cirth-range-thumb-color: var(--cirth-secondary-background);
2799
- --cirth-range-thumb-active-color: var(--cirth-primary-background);
2800
- --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
2906
+ --cirth-range-thumb-color: var(--cirth-secondary-text);
2907
+ --cirth-range-thumb-active-color: var(--cirth-primary-surface);
2908
+ --cirth-accordion-active-summary-color: var(--cirth-primary-active);
2801
2909
  --cirth-accordion-close-summary-color: var(--cirth-ink);
2802
2910
  --cirth-accordion-open-summary-color: var(--cirth-ink);
2803
2911
  --cirth-card-border-color: color-mix(in oklab,
@@ -2807,17 +2915,17 @@
2807
2915
  --cirth-dropdown-color: var(--cirth-ink);
2808
2916
  --cirth-dropdown-border-color: var(--cirth-card-border-color);
2809
2917
  --cirth-dropdown-hover-background-color: var(--cirth-card-sectioning-background-color);
2810
- --cirth-modal-overlay-background-color: oklch(9% 0 0deg / var(--cirth-opacity-overlay));
2918
+ --cirth-modal-overlay-background-color: oklch(9% .011 280deg / var(--cirth-opacity-overlay));
2811
2919
  --cirth-meter-optimum-color: var(--cirth-success);
2812
2920
  --cirth-meter-suboptimum-color: var(--cirth-warning);
2813
2921
  --cirth-meter-even-less-good-color: var(--cirth-error);
2814
- --cirth-progress-color: var(--cirth-primary);
2815
- --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");
2816
- --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");
2817
- --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");
2818
- --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");
2819
- --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");
2820
- --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");
2922
+ --cirth-progress-color: var(--cirth-primary-text);
2923
+ --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");
2924
+ --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");
2925
+ --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");
2926
+ --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");
2927
+ --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");
2928
+ --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");
2821
2929
  }
2822
2930
 
2823
2931
  .cirth:where([data-theme="dark"]) details summary[role="button"].contrast:not(.outline):after, .cirth :where([data-theme="dark"]) details summary[role="button"].contrast:not(.outline):after, .cirth: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, .cirth :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 {
@@ -2825,125 +2933,125 @@
2825
2933
  }
2826
2934
 
2827
2935
  .cirth progress, .cirth [type="checkbox"], .cirth [type="radio"], .cirth [type="range"] {
2828
- accent-color: var(--cirth-primary);
2936
+ accent-color: var(--cirth-primary-text);
2829
2937
  }
2830
2938
 
2831
2939
  @media (prefers-contrast: more) {
2832
2940
  .cirth:where([data-theme="light"]), .cirth :where([data-theme="light"]), .cirth:where(:not([data-theme="dark"])) {
2833
- --cirth-ink: oklch(22.3% .006 264);
2941
+ --cirth-ink: oklch(22.3% .023 280);
2834
2942
  --cirth-h1-color: var(--cirth-color);
2835
2943
  --cirth-h2-color: var(--cirth-color);
2836
2944
  --cirth-h3-color: var(--cirth-color);
2837
2945
  --cirth-h4-color: var(--cirth-color);
2838
2946
  --cirth-h5-color: var(--cirth-color);
2839
2947
  --cirth-h6-color: var(--cirth-color);
2840
- --cirth-muted-color: oklch(39.7% .025 264);
2841
- --cirth-secondary: oklch(39.7% .025 264);
2842
- --cirth-code-color: oklch(35.3% .021 264);
2843
- --cirth-link-visited-color: oklch(35.3% .021 264);
2844
- --cirth-muted-border-color: oklch(57% .032 264);
2845
- --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");
2846
- --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");
2847
- --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");
2848
- --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");
2849
- --cirth-form-element-border-color: oklch(39.7% .025 264);
2850
- --cirth-form-element-invalid-border-color: oklch(48.3% .166 29.73);
2851
- --cirth-form-element-valid-border-color: oklch(48.3% .092 160.59);
2852
- --cirth-primary: oklch(39.7% .073 69.35);
2853
- --cirth-primary-hover: oklch(31% .057 69.35);
2948
+ --cirth-muted-color: oklch(39.7% .028 280);
2949
+ --cirth-secondary-text: oklch(39.7% .028 280);
2950
+ --cirth-code-color: oklch(35.3% .027 280);
2951
+ --cirth-link-visited-color: oklch(35.3% .027 280);
2952
+ --cirth-muted-border-color: oklch(57% .032 280);
2953
+ --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");
2954
+ --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");
2955
+ --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");
2956
+ --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");
2957
+ --cirth-form-element-border-color: oklch(39.7% .028 280);
2958
+ --cirth-form-element-invalid-border-color: oklch(48.3% .165 22);
2959
+ --cirth-form-element-valid-border-color: oklch(48.3% .106 153);
2960
+ --cirth-primary: oklch(39.7% .081 44);
2961
+ --cirth-primary-active: oklch(31% .063 44);
2854
2962
  --cirth-primary-underline: var(--cirth-primary);
2855
- --cirth-secondary-underline: var(--cirth-secondary);
2856
- --cirth-contrast-underline: var(--cirth-contrast);
2857
- --cirth-primary-focus: oklch(48.3% .089 69.35);
2858
- --cirth-secondary-focus: oklch(48.3% .03 264);
2859
- --cirth-contrast-focus: oklch(48.3% .03 264);
2860
- --cirth-switch-background-color: oklch(48.3% .03 264);
2861
- --cirth-progress-border-color: oklch(48.3% .03 264);
2862
- --cirth-meter-optimum-color: oklch(44% .084 160.59);
2863
- --cirth-meter-suboptimum-color: oklch(39.7% .07 78);
2864
- --cirth-meter-even-less-good-color: oklch(35.3% .122 29.73);
2963
+ --cirth-secondary-underline: var(--cirth-secondary-text);
2964
+ --cirth-contrast-underline: var(--cirth-contrast-text);
2965
+ --cirth-primary-focus: oklch(48.3% .098 44);
2966
+ --cirth-secondary-focus: oklch(48.3% .03 280);
2967
+ --cirth-contrast-focus: oklch(48.3% .03 280);
2968
+ --cirth-switch-background-color: oklch(48.3% .03 280);
2969
+ --cirth-progress-border-color: oklch(48.3% .03 280);
2970
+ --cirth-meter-optimum-color: oklch(44% .096 153);
2971
+ --cirth-meter-suboptimum-color: oklch(39.7% .069 89.5);
2972
+ --cirth-meter-even-less-good-color: oklch(35.3% .121 22);
2865
2973
  --cirth-dropdown-border-color: var(--cirth-muted-border-color);
2866
2974
  }
2867
2975
  }
2868
2976
 
2869
2977
  @media only screen and (prefers-contrast: more) and (prefers-color-scheme: dark) {
2870
2978
  .cirth:where(:not([data-theme])) {
2871
- --cirth-ink: oklch(96% 0 264);
2979
+ --cirth-ink: oklch(96% 0 280);
2872
2980
  --cirth-h1-color: var(--cirth-color);
2873
2981
  --cirth-h2-color: var(--cirth-color);
2874
2982
  --cirth-h3-color: var(--cirth-color);
2875
2983
  --cirth-h4-color: var(--cirth-color);
2876
2984
  --cirth-h5-color: var(--cirth-color);
2877
2985
  --cirth-h6-color: var(--cirth-color);
2878
- --cirth-muted-color: oklch(78.7% .021 264);
2879
- --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");
2880
- --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");
2881
- --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");
2882
- --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");
2883
- --cirth-secondary: oklch(78.7% .021 264);
2884
- --cirth-code-color: oklch(83% .016 264);
2885
- --cirth-link-visited-color: oklch(78.7% .021 264);
2886
- --cirth-muted-border-color: oklch(57% .032 264);
2986
+ --cirth-muted-color: oklch(78.7% .014 280);
2987
+ --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");
2988
+ --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");
2989
+ --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");
2990
+ --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");
2991
+ --cirth-secondary-text: oklch(78.7% .014 280);
2992
+ --cirth-code-color: oklch(83% .011 280);
2993
+ --cirth-link-visited-color: oklch(78.7% .014 280);
2994
+ --cirth-muted-border-color: oklch(57% .032 280);
2887
2995
  --cirth-card-border-color: var(--cirth-muted-border-color);
2888
- --cirth-form-element-border-color: oklch(70% .028 264);
2889
- --cirth-form-element-invalid-border-color: oklch(78.7% .106 29.73);
2890
- --cirth-form-element-valid-border-color: oklch(78.7% .15 160.59);
2891
- --cirth-primary: oklch(78.7% .146 69.35);
2892
- --cirth-primary-hover: oklch(87.3% .082 69.35);
2893
- --cirth-primary-background: oklch(44% .081 69.35);
2894
- --cirth-primary-hover-background: oklch(39.7% .073 69.35);
2996
+ --cirth-form-element-border-color: oklch(70% .021 280);
2997
+ --cirth-form-element-invalid-border-color: oklch(78.7% .105 22);
2998
+ --cirth-form-element-valid-border-color: oklch(78.7% .172 153);
2999
+ --cirth-primary: oklch(78.7% .092 44);
3000
+ --cirth-primary-active: oklch(87.3% .051 44);
3001
+ --cirth-primary-surface: oklch(44% .09 44);
3002
+ --cirth-primary-surface-active: oklch(39.7% .081 44);
2895
3003
  --cirth-primary-underline: var(--cirth-primary);
2896
- --cirth-secondary-underline: var(--cirth-secondary);
2897
- --cirth-contrast-underline: var(--cirth-contrast);
2898
- --cirth-primary-focus: oklch(70% .129 69.35);
2899
- --cirth-secondary-focus: oklch(70% .028 264);
2900
- --cirth-contrast-focus: oklch(87.3% .011 264);
2901
- --cirth-switch-background-color: oklch(65.7% .03 264);
2902
- --cirth-progress-border-color: oklch(70% .028 264);
2903
- --cirth-meter-optimum-color: oklch(74.3% .142 160.59);
2904
- --cirth-meter-suboptimum-color: oklch(78.7% .139 78);
2905
- --cirth-meter-even-less-good-color: oklch(83% .081 29.73);
3004
+ --cirth-secondary-underline: var(--cirth-secondary-text);
3005
+ --cirth-contrast-underline: var(--cirth-contrast-text);
3006
+ --cirth-primary-focus: oklch(70% .141 44);
3007
+ --cirth-secondary-focus: oklch(70% .021 280);
3008
+ --cirth-contrast-focus: oklch(87.3% .007 280);
3009
+ --cirth-switch-background-color: oklch(65.7% .025 280);
3010
+ --cirth-progress-border-color: oklch(70% .021 280);
3011
+ --cirth-meter-optimum-color: oklch(74.3% .163 153);
3012
+ --cirth-meter-suboptimum-color: oklch(78.7% .137 89.5);
3013
+ --cirth-meter-even-less-good-color: oklch(83% .08 22);
2906
3014
  --cirth-dropdown-border-color: var(--cirth-muted-border-color);
2907
3015
  }
2908
3016
  }
2909
3017
 
2910
3018
  @media (prefers-contrast: more) {
2911
3019
  .cirth:where([data-theme="dark"]), .cirth :where([data-theme="dark"]) {
2912
- --cirth-ink: oklch(96% 0 264);
3020
+ --cirth-ink: oklch(96% 0 280);
2913
3021
  --cirth-h1-color: var(--cirth-color);
2914
3022
  --cirth-h2-color: var(--cirth-color);
2915
3023
  --cirth-h3-color: var(--cirth-color);
2916
3024
  --cirth-h4-color: var(--cirth-color);
2917
3025
  --cirth-h5-color: var(--cirth-color);
2918
3026
  --cirth-h6-color: var(--cirth-color);
2919
- --cirth-muted-color: oklch(78.7% .021 264);
2920
- --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");
2921
- --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");
2922
- --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");
2923
- --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");
2924
- --cirth-secondary: oklch(78.7% .021 264);
2925
- --cirth-code-color: oklch(83% .016 264);
2926
- --cirth-link-visited-color: oklch(78.7% .021 264);
2927
- --cirth-muted-border-color: oklch(57% .032 264);
3027
+ --cirth-muted-color: oklch(78.7% .014 280);
3028
+ --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");
3029
+ --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");
3030
+ --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");
3031
+ --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");
3032
+ --cirth-secondary-text: oklch(78.7% .014 280);
3033
+ --cirth-code-color: oklch(83% .011 280);
3034
+ --cirth-link-visited-color: oklch(78.7% .014 280);
3035
+ --cirth-muted-border-color: oklch(57% .032 280);
2928
3036
  --cirth-card-border-color: var(--cirth-muted-border-color);
2929
- --cirth-form-element-border-color: oklch(70% .028 264);
2930
- --cirth-form-element-invalid-border-color: oklch(78.7% .106 29.73);
2931
- --cirth-form-element-valid-border-color: oklch(78.7% .15 160.59);
2932
- --cirth-primary: oklch(78.7% .146 69.35);
2933
- --cirth-primary-hover: oklch(87.3% .082 69.35);
2934
- --cirth-primary-background: oklch(44% .081 69.35);
2935
- --cirth-primary-hover-background: oklch(39.7% .073 69.35);
3037
+ --cirth-form-element-border-color: oklch(70% .021 280);
3038
+ --cirth-form-element-invalid-border-color: oklch(78.7% .105 22);
3039
+ --cirth-form-element-valid-border-color: oklch(78.7% .172 153);
3040
+ --cirth-primary: oklch(78.7% .092 44);
3041
+ --cirth-primary-active: oklch(87.3% .051 44);
3042
+ --cirth-primary-surface: oklch(44% .09 44);
3043
+ --cirth-primary-surface-active: oklch(39.7% .081 44);
2936
3044
  --cirth-primary-underline: var(--cirth-primary);
2937
- --cirth-secondary-underline: var(--cirth-secondary);
2938
- --cirth-contrast-underline: var(--cirth-contrast);
2939
- --cirth-primary-focus: oklch(70% .129 69.35);
2940
- --cirth-secondary-focus: oklch(70% .028 264);
2941
- --cirth-contrast-focus: oklch(87.3% .011 264);
2942
- --cirth-switch-background-color: oklch(65.7% .03 264);
2943
- --cirth-progress-border-color: oklch(70% .028 264);
2944
- --cirth-meter-optimum-color: oklch(74.3% .142 160.59);
2945
- --cirth-meter-suboptimum-color: oklch(78.7% .139 78);
2946
- --cirth-meter-even-less-good-color: oklch(83% .081 29.73);
3045
+ --cirth-secondary-underline: var(--cirth-secondary-text);
3046
+ --cirth-contrast-underline: var(--cirth-contrast-text);
3047
+ --cirth-primary-focus: oklch(70% .141 44);
3048
+ --cirth-secondary-focus: oklch(70% .021 280);
3049
+ --cirth-contrast-focus: oklch(87.3% .007 280);
3050
+ --cirth-switch-background-color: oklch(65.7% .025 280);
3051
+ --cirth-progress-border-color: oklch(70% .021 280);
3052
+ --cirth-meter-optimum-color: oklch(74.3% .163 153);
3053
+ --cirth-meter-suboptimum-color: oklch(78.7% .137 89.5);
3054
+ --cirth-meter-even-less-good-color: oklch(83% .08 22);
2947
3055
  --cirth-dropdown-border-color: var(--cirth-muted-border-color);
2948
3056
  }
2949
3057
  }