@cirthcss/cirth 0.15.0-beta.2 → 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 +3 -3
  2. package/dist/cirth.classless.css +143 -124
  3. package/dist/cirth.classless.min.css +1 -1
  4. package/dist/cirth.classless.scoped.css +143 -124
  5. package/dist/cirth.classless.scoped.min.css +1 -1
  6. package/dist/cirth.css +180 -161
  7. package/dist/cirth.min.css +1 -1
  8. package/dist/cirth.print.classless.css +4 -3
  9. package/dist/cirth.print.classless.min.css +1 -1
  10. package/dist/cirth.print.classless.scoped.css +4 -3
  11. package/dist/cirth.print.classless.scoped.min.css +1 -1
  12. package/dist/cirth.print.css +4 -3
  13. package/dist/cirth.print.min.css +1 -1
  14. package/dist/cirth.print.scoped.css +4 -3
  15. package/dist/cirth.print.scoped.min.css +1 -1
  16. package/dist/cirth.scoped.css +180 -161
  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 +1 -1
package/dist/cirth.scoped.css CHANGED
@@ -266,7 +266,7 @@
266
266
  }
267
267
 
268
268
  .cirth :where(a:not([role="button"])), .cirth [role="link"] {
269
- --cirth-color: var(--cirth-primary);
269
+ --cirth-color: var(--cirth-primary-text);
270
270
  --cirth-background-color: transparent;
271
271
  --cirth-underline: var(--cirth-primary-underline);
272
272
  background-color: var(--cirth-background-color);
@@ -280,8 +280,8 @@
280
280
  }
281
281
 
282
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) {
283
- --cirth-color: var(--cirth-primary-hover);
284
- --cirth-underline: var(--cirth-primary-hover-underline);
283
+ --cirth-color: var(--cirth-primary-active);
284
+ --cirth-underline: var(--cirth-primary-underline-active);
285
285
  --cirth-text-decoration: underline;
286
286
  }
287
287
 
@@ -291,23 +291,23 @@
291
291
  }
292
292
 
293
293
  .cirth :where(a:not([role="button"])).secondary, .cirth [role="link"].secondary {
294
- --cirth-color: var(--cirth-secondary);
294
+ --cirth-color: var(--cirth-secondary-text);
295
295
  --cirth-underline: var(--cirth-secondary-underline);
296
296
  }
297
297
 
298
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) {
299
- --cirth-color: var(--cirth-secondary-hover);
300
- --cirth-underline: var(--cirth-secondary-hover-underline);
299
+ --cirth-color: var(--cirth-secondary-active);
300
+ --cirth-underline: var(--cirth-secondary-underline-active);
301
301
  }
302
302
 
303
303
  .cirth :where(a:not([role="button"])).contrast, .cirth [role="link"].contrast {
304
- --cirth-color: var(--cirth-contrast);
304
+ --cirth-color: var(--cirth-contrast-text);
305
305
  --cirth-underline: var(--cirth-contrast-underline);
306
306
  }
307
307
 
308
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) {
309
- --cirth-color: var(--cirth-contrast-hover);
310
- --cirth-underline: var(--cirth-contrast-hover-underline);
309
+ --cirth-color: var(--cirth-contrast-active);
310
+ --cirth-underline: var(--cirth-contrast-underline-active);
311
311
  }
312
312
 
313
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)) {
@@ -333,9 +333,9 @@
333
333
  }
334
334
 
335
335
  .cirth button, .cirth [type="submit"], .cirth [type="reset"], .cirth [type="button"], .cirth [role="button"] {
336
- --cirth-background-color: var(--cirth-primary-background);
336
+ --cirth-background-color: var(--cirth-primary-surface);
337
337
  --cirth-border-color: var(--cirth-primary-border);
338
- --cirth-color: var(--cirth-primary-inverse);
338
+ --cirth-color: var(--cirth-primary-on-surface);
339
339
  --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 #0000);
340
340
  max-width: 100%;
341
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);
@@ -358,9 +358,9 @@
358
358
  }
359
359
 
360
360
  .cirth [type="file"]::file-selector-button {
361
- --cirth-background-color: var(--cirth-primary-background);
361
+ --cirth-background-color: var(--cirth-primary-surface);
362
362
  --cirth-border-color: var(--cirth-primary-border);
363
- --cirth-color: var(--cirth-primary-inverse);
363
+ --cirth-color: var(--cirth-primary-on-surface);
364
364
  --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 #0000);
365
365
  max-width: 100%;
366
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);
@@ -383,24 +383,24 @@
383
383
  }
384
384
 
385
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) {
386
- --cirth-background-color: var(--cirth-primary-hover-background);
387
- --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);
388
388
  --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000);
389
- --cirth-color: var(--cirth-primary-inverse);
389
+ --cirth-color: var(--cirth-primary-on-surface);
390
390
  }
391
391
 
392
392
  .cirth [type="file"]::file-selector-button:is() {
393
- --cirth-background-color: var(--cirth-primary-hover-background);
394
- --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);
395
395
  --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000);
396
- --cirth-color: var(--cirth-primary-inverse);
396
+ --cirth-color: var(--cirth-primary-on-surface);
397
397
  }
398
398
 
399
399
  .cirth [type="file"]::file-selector-button:is(:hover, :active, :focus) {
400
- --cirth-background-color: var(--cirth-primary-hover-background);
401
- --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);
402
402
  --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000);
403
- --cirth-color: var(--cirth-primary-inverse);
403
+ --cirth-color: var(--cirth-primary-on-surface);
404
404
  }
405
405
 
406
406
  .cirth button:active, .cirth [type="submit"]:active, .cirth [type="reset"]:active, .cirth [type="button"]:active, .cirth [role="button"]:active {
@@ -422,29 +422,29 @@
422
422
  }
423
423
 
424
424
  .cirth :is(button, [type="submit"], [type="button"], [role="button"]).secondary, .cirth [type="reset"] {
425
- --cirth-background-color: var(--cirth-secondary-background);
425
+ --cirth-background-color: var(--cirth-secondary-surface);
426
426
  --cirth-border-color: var(--cirth-secondary-border);
427
- --cirth-color: var(--cirth-secondary-inverse);
427
+ --cirth-color: var(--cirth-secondary-on-surface);
428
428
  cursor: pointer;
429
429
  }
430
430
 
431
431
  .cirth [type="file"]::file-selector-button {
432
- --cirth-background-color: var(--cirth-secondary-background);
432
+ --cirth-background-color: var(--cirth-secondary-surface);
433
433
  --cirth-border-color: var(--cirth-secondary-border);
434
- --cirth-color: var(--cirth-secondary-inverse);
434
+ --cirth-color: var(--cirth-secondary-on-surface);
435
435
  cursor: pointer;
436
436
  }
437
437
 
438
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) {
439
- --cirth-background-color: var(--cirth-secondary-hover-background);
440
- --cirth-border-color: var(--cirth-secondary-hover-border);
441
- --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);
442
442
  }
443
443
 
444
444
  .cirth [type="file"]::file-selector-button:is(:hover, :active, :focus) {
445
- --cirth-background-color: var(--cirth-secondary-hover-background);
446
- --cirth-border-color: var(--cirth-secondary-hover-border);
447
- --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);
448
448
  }
449
449
 
450
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 {
@@ -453,15 +453,15 @@
453
453
  }
454
454
 
455
455
  .cirth :is(button, [type="submit"], [type="button"], [role="button"]).contrast {
456
- --cirth-background-color: var(--cirth-contrast-background);
456
+ --cirth-background-color: var(--cirth-contrast-surface);
457
457
  --cirth-border-color: var(--cirth-contrast-border);
458
- --cirth-color: var(--cirth-contrast-inverse);
458
+ --cirth-color: var(--cirth-contrast-on-surface);
459
459
  }
460
460
 
461
461
  .cirth :is(button, [type="submit"], [type="button"], [role="button"]).contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
462
- --cirth-background-color: var(--cirth-contrast-hover-background);
463
- --cirth-border-color: var(--cirth-contrast-hover-border);
464
- --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);
465
465
  }
466
466
 
467
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 {
@@ -472,13 +472,13 @@
472
472
  .cirth :is(button, [type="submit"], [type="button"], [role="button"]).danger {
473
473
  --cirth-background-color: light-dark(var(--cirth-error), color-mix(in oklch, var(--cirth-error) 55%, black));
474
474
  --cirth-border-color: var(--cirth-background-color);
475
- --cirth-color: var(--cirth-primary-inverse);
475
+ --cirth-color: var(--cirth-primary-on-surface);
476
476
  }
477
477
 
478
478
  .cirth :is(button, [type="submit"], [type="button"], [role="button"]).danger:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
479
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
480
  --cirth-border-color: var(--cirth-background-color);
481
- --cirth-color: var(--cirth-primary-inverse);
481
+ --cirth-color: var(--cirth-primary-on-surface);
482
482
  }
483
483
 
484
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 {
@@ -499,80 +499,80 @@
499
499
  }
500
500
 
501
501
  .cirth :is(button, [type="submit"], [type="button"], [role="button"]).outline, .cirth [type="reset"].outline {
502
- --cirth-color: var(--cirth-primary);
503
- --cirth-border-color: var(--cirth-primary);
502
+ --cirth-color: var(--cirth-primary-text);
503
+ --cirth-border-color: var(--cirth-primary-text);
504
504
  }
505
505
 
506
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) {
507
507
  --cirth-background-color: color-mix(in oklch,
508
- var(--cirth-primary) 12%,
508
+ var(--cirth-primary-text) 12%,
509
509
  var(--cirth-form-element-background-color));
510
- --cirth-color: var(--cirth-primary-hover);
511
- --cirth-border-color: var(--cirth-primary-hover);
510
+ --cirth-color: var(--cirth-primary-active);
511
+ --cirth-border-color: var(--cirth-primary-active);
512
512
  }
513
513
 
514
514
  .cirth :is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary, .cirth [type="reset"].outline.secondary {
515
- --cirth-color: var(--cirth-secondary);
516
- --cirth-border-color: var(--cirth-secondary);
515
+ --cirth-color: var(--cirth-secondary-text);
516
+ --cirth-border-color: var(--cirth-secondary-text);
517
517
  }
518
518
 
519
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) {
520
520
  --cirth-background-color: color-mix(in oklch,
521
- var(--cirth-secondary) 12%,
521
+ var(--cirth-secondary-text) 12%,
522
522
  var(--cirth-form-element-background-color));
523
- --cirth-color: var(--cirth-secondary-hover);
524
- --cirth-border-color: var(--cirth-secondary-hover);
523
+ --cirth-color: var(--cirth-secondary-active);
524
+ --cirth-border-color: var(--cirth-secondary-active);
525
525
  }
526
526
 
527
527
  .cirth :is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast, .cirth [type="reset"].outline.contrast {
528
- --cirth-color: var(--cirth-contrast);
529
- --cirth-border-color: var(--cirth-contrast);
528
+ --cirth-color: var(--cirth-contrast-text);
529
+ --cirth-border-color: var(--cirth-contrast-text);
530
530
  }
531
531
 
532
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) {
533
533
  --cirth-background-color: color-mix(in oklch,
534
- var(--cirth-contrast) 12%,
534
+ var(--cirth-contrast-text) 12%,
535
535
  var(--cirth-form-element-background-color));
536
- --cirth-color: var(--cirth-contrast-hover);
537
- --cirth-border-color: var(--cirth-contrast-hover);
536
+ --cirth-color: var(--cirth-contrast-active);
537
+ --cirth-border-color: var(--cirth-contrast-active);
538
538
  }
539
539
 
540
540
  .cirth :is(button, [type="submit"], [type="button"], [role="button"]).ghost, .cirth [type="reset"].ghost {
541
- --cirth-color: var(--cirth-primary);
541
+ --cirth-color: var(--cirth-primary-text);
542
542
  --cirth-border-color: transparent;
543
543
  }
544
544
 
545
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) {
546
546
  --cirth-background-color: color-mix(in oklch,
547
- var(--cirth-primary) 12%,
547
+ var(--cirth-primary-text) 12%,
548
548
  transparent);
549
- --cirth-color: var(--cirth-primary-hover);
549
+ --cirth-color: var(--cirth-primary-active);
550
550
  --cirth-border-color: transparent;
551
551
  }
552
552
 
553
553
  .cirth :is(button, [type="submit"], [type="button"], [role="button"]).ghost.secondary, .cirth [type="reset"].ghost.secondary {
554
- --cirth-color: var(--cirth-secondary);
554
+ --cirth-color: var(--cirth-secondary-text);
555
555
  --cirth-border-color: transparent;
556
556
  }
557
557
 
558
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) {
559
559
  --cirth-background-color: color-mix(in oklch,
560
- var(--cirth-secondary) 12%,
560
+ var(--cirth-secondary-text) 12%,
561
561
  transparent);
562
- --cirth-color: var(--cirth-secondary-hover);
562
+ --cirth-color: var(--cirth-secondary-active);
563
563
  --cirth-border-color: transparent;
564
564
  }
565
565
 
566
566
  .cirth :is(button, [type="submit"], [type="button"], [role="button"]).ghost.contrast, .cirth [type="reset"].ghost.contrast {
567
- --cirth-color: var(--cirth-contrast);
567
+ --cirth-color: var(--cirth-contrast-text);
568
568
  --cirth-border-color: transparent;
569
569
  }
570
570
 
571
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) {
572
572
  --cirth-background-color: color-mix(in oklch,
573
- var(--cirth-contrast) 12%,
573
+ var(--cirth-contrast-text) 12%,
574
574
  transparent);
575
- --cirth-color: var(--cirth-contrast-hover);
575
+ --cirth-color: var(--cirth-contrast-active);
576
576
  --cirth-border-color: transparent;
577
577
  }
578
578
 
@@ -843,6 +843,20 @@
843
843
  border-style: dashed;
844
844
  }
845
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
+
846
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) {
847
861
  --cirth-background-color: var(--cirth-form-element-active-background-color);
848
862
  }
@@ -1009,7 +1023,7 @@
1009
1023
  }
1010
1024
 
1011
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 {
1012
- --cirth-background-color: var(--cirth-primary-background);
1026
+ --cirth-background-color: var(--cirth-primary-surface);
1013
1027
  --cirth-border-color: var(--cirth-primary-border);
1014
1028
  }
1015
1029
 
@@ -1024,7 +1038,7 @@
1024
1038
  }
1025
1039
 
1026
1040
  .cirth [type="checkbox"]:not([role="switch"]):checked:before, .cirth [type="checkbox"]:not([role="switch"]):indeterminate:before {
1027
- background-color: var(--cirth-primary-inverse);
1041
+ background-color: var(--cirth-primary-on-surface);
1028
1042
  content: "";
1029
1043
  width: 100%;
1030
1044
  height: 100%;
@@ -1045,7 +1059,7 @@
1045
1059
  }
1046
1060
 
1047
1061
  .cirth [type="checkbox"]:not([role="switch"]):indeterminate {
1048
- --cirth-background-color: var(--cirth-primary-background);
1062
+ --cirth-background-color: var(--cirth-primary-surface);
1049
1063
  --cirth-border-color: var(--cirth-primary-border);
1050
1064
  }
1051
1065
 
@@ -1058,7 +1072,7 @@
1058
1072
  }
1059
1073
 
1060
1074
  .cirth [type="radio"]:checked, .cirth [type="radio"]:checked:active, .cirth [type="radio"]:checked:focus {
1061
- --cirth-background-color: var(--cirth-primary-inverse);
1075
+ --cirth-background-color: var(--cirth-primary-on-surface);
1062
1076
  border-width: .42em;
1063
1077
  }
1064
1078
 
@@ -1222,8 +1236,8 @@
1222
1236
  }
1223
1237
 
1224
1238
  .cirth [type="file"]:is(:hover, :active, :focus)::file-selector-button {
1225
- --cirth-background-color: var(--cirth-secondary-hover-background);
1226
- --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);
1227
1241
  }
1228
1242
 
1229
1243
  .cirth [type="file"]:focus::file-selector-button {
@@ -1285,7 +1299,7 @@
1285
1299
  @media (hover: hover) and (pointer: fine) {
1286
1300
  .cirth [type="range"]:hover:not(:active, :focus, :disabled) {
1287
1301
  --cirth-range-border-color: var(--cirth-range-active-border-color);
1288
- --cirth-range-thumb-color: var(--cirth-secondary-hover);
1302
+ --cirth-range-thumb-color: var(--cirth-secondary-active);
1289
1303
  }
1290
1304
  }
1291
1305
 
@@ -1761,7 +1775,7 @@
1761
1775
  --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1762
1776
  var(--cirth-primary-border);
1763
1777
  --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1764
- var(--cirth-primary-hover-border);
1778
+ var(--cirth-primary-border-active);
1765
1779
  }
1766
1780
 
1767
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 {
@@ -2092,11 +2106,11 @@
2092
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) {
2093
2107
  --cirth-color: color-mix(in oklch,
2094
2108
  var(--cirth-muted-color),
2095
- var(--cirth-contrast));
2109
+ var(--cirth-contrast-text));
2096
2110
  }
2097
2111
 
2098
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"]) {
2099
- --cirth-color: var(--cirth-contrast);
2113
+ --cirth-color: var(--cirth-contrast-text);
2100
2114
  font-weight: var(--cirth-font-weight-semibold);
2101
2115
  }
2102
2116
 
@@ -2587,18 +2601,18 @@
2587
2601
  --cirth-success: light-dark(oklch(52.7% .115 153), oklch(65.7% .144 153));
2588
2602
  --cirth-warning: light-dark(oklch(48.3% .084 89.5), oklch(70% .122 89.5));
2589
2603
  --cirth-primary: light-dark(oklch(52.7% .107 44), oklch(65.7% .134 44));
2590
- --cirth-secondary: light-dark(oklch(52.7% .031 280), oklch(70% .021 280));
2604
+ --cirth-secondary-text: light-dark(oklch(52.7% .031 280), oklch(70% .021 280));
2591
2605
  --cirth-secondary-underline: light-dark(oklch(52.7% .031 280 / .5), oklch(70% .021 280 / .5));
2592
- --cirth-secondary-hover: light-dark(oklch(44% .029 280), oklch(78.7% .014 280));
2593
- --cirth-secondary-hover-background: light-dark(oklch(44% .029 280), oklch(52.7% .031 280));
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));
2594
2608
  --cirth-secondary-focus: light-dark(oklch(48.3% .03 280 / .7), oklch(70% .021 280 / .7));
2595
- --cirth-contrast: light-dark(oklch(22.3% .023 280), oklch(91.7% .004 280));
2596
- --cirth-contrast-background: light-dark(oklch(22.3% .023 280), oklch(96% 0 280));
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));
2597
2611
  --cirth-contrast-underline: light-dark(oklch(22.3% .023 280 / .5), oklch(91.7% .004 280 / .5));
2598
- --cirth-contrast-hover: light-dark(oklch(0% 0 0), oklch(100% 0 0));
2599
- --cirth-contrast-hover-background: light-dark(oklch(0% 0 0), oklch(100% 0 0));
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));
2600
2614
  --cirth-contrast-focus: light-dark(oklch(48.3% .03 280 / .7), oklch(87.3% .007 280 / .5));
2601
- --cirth-contrast-inverse: light-dark(oklch(100% 0 0), oklch(0% 0 0));
2615
+ --cirth-contrast-on-surface: light-dark(oklch(100% 0 0), oklch(0% 0 0));
2602
2616
  --cirth-link-visited-color: light-dark(oklch(48.3% 0 280), oklch(65.7% 0 280));
2603
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),
2604
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));
@@ -2634,17 +2648,20 @@
2634
2648
  --cirth-warning-border: oklch(from var(--cirth-warning) calc(l * 1.269) calc(c * 1.267) h);
2635
2649
  --cirth-warning-active: oklch(from var(--cirth-warning) calc(l * 1.091) calc(c * 1.081) h);
2636
2650
  --cirth-warning-surface: oklch(from var(--cirth-warning) 93% .05 h);
2637
- --cirth-primary-background: var(--cirth-primary);
2638
- --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);
2639
2654
  --cirth-primary-underline: oklch(from var(--cirth-primary) l c h / 50%);
2640
- --cirth-primary-hover: color-mix(in oklch, var(--cirth-primary) 83.5%, black);
2641
- --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,
2642
2659
  var(--cirth-primary) 91.7%,
2643
2660
  black);
2644
- --cirth-primary-hover-border: var(--cirth-primary-hover-background);
2645
- --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);
2646
2663
  --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 75%);
2647
- --cirth-primary-inverse: oklch(100% 0 0);
2664
+ --cirth-primary-on-surface: oklch(100% 0 0);
2648
2665
  --cirth-text-selection-color: oklch(from var(--cirth-primary) calc(l * 1.247) c h / 25%);
2649
2666
  --cirth-code-background-color: oklch(from var(--cirth-canvas) calc(l - .019) c h);
2650
2667
  --cirth-card-sectioning-background-color: oklch(from var(--cirth-canvas) calc(l + .009) c h);
@@ -2653,14 +2670,14 @@
2653
2670
  --cirth-form-element-active-background-color: var(--cirth-canvas);
2654
2671
  --cirth-dropdown-background-color: var(--cirth-card-background-color);
2655
2672
  --cirth-popover-background-color: var(--cirth-card-background-color);
2656
- --cirth-secondary-background: oklch(48.3% .03 280);
2657
- --cirth-secondary-border: var(--cirth-secondary-background);
2658
- --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
2659
- --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
2660
- --cirth-secondary-inverse: oklch(100% 0 0);
2661
- --cirth-contrast-border: var(--cirth-contrast-background);
2662
- --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
2663
- --cirth-contrast-hover-underline: var(--cirth-secondary-hover);
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);
2664
2681
  --cirth-mark-background-color: color-mix(in oklab,
2665
2682
  var(--cirth-primary) 18%,
2666
2683
  var(--cirth-canvas));
@@ -2685,12 +2702,12 @@
2685
2702
  --cirth-form-element-valid-active-border-color: var(--cirth-success-active);
2686
2703
  --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
2687
2704
  --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
2688
- --cirth-switch-checked-background-color: var(--cirth-primary-background);
2689
- --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);
2690
2707
  --cirth-range-thumb-border-color: var(--cirth-background-color);
2691
- --cirth-range-thumb-color: var(--cirth-secondary);
2692
- --cirth-range-thumb-active-color: var(--cirth-primary-background);
2693
- --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);
2694
2711
  --cirth-accordion-close-summary-color: var(--cirth-ink);
2695
2712
  --cirth-accordion-open-summary-color: var(--cirth-ink);
2696
2713
  --cirth-card-border-color: color-mix(in oklab,
@@ -2704,7 +2721,7 @@
2704
2721
  --cirth-meter-optimum-color: var(--cirth-success);
2705
2722
  --cirth-meter-suboptimum-color: var(--cirth-warning);
2706
2723
  --cirth-meter-even-less-good-color: var(--cirth-error);
2707
- --cirth-progress-color: var(--cirth-primary-background);
2724
+ --cirth-progress-color: var(--cirth-primary-surface);
2708
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");
2709
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");
2710
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,20 +2745,21 @@
2728
2745
  --cirth-warning-border: var(--cirth-warning);
2729
2746
  --cirth-warning-active: oklch(from var(--cirth-warning) calc(l * 1.124) calc(c * 1.121) h);
2730
2747
  --cirth-warning-surface: oklch(from var(--cirth-warning) 35.3% .063 h);
2731
- --cirth-primary-background: color-mix(in oklch,
2748
+ --cirth-primary-text: var(--cirth-primary);
2749
+ --cirth-primary-surface: color-mix(in oklch,
2732
2750
  var(--cirth-primary) 75.2%,
2733
2751
  black);
2734
- --cirth-primary-border: var(--cirth-primary-background);
2752
+ --cirth-primary-border: var(--cirth-primary-surface);
2735
2753
  --cirth-primary-underline: oklch(from var(--cirth-primary) l c h / 50%);
2736
- --cirth-primary-hover: oklch(from var(--cirth-primary) calc(l * 1.124) calc(c * 1.132) h);
2737
- --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,
2738
2756
  var(--cirth-primary) 72%,
2739
2757
  black);
2740
- --cirth-primary-hover-border: var(--cirth-primary-hover-background);
2741
- --cirth-primary-hover-underline: var(--cirth-primary-hover);
2758
+ --cirth-primary-border-active: var(--cirth-primary-surface-active);
2759
+ --cirth-primary-underline-active: var(--cirth-primary-active);
2742
2760
  --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 80%);
2743
2761
  --cirth-text-selection-color: oklch(from var(--cirth-primary) calc(l * 1.065) c h / 18.75%);
2744
- --cirth-primary-inverse: oklch(100% 0 0);
2762
+ --cirth-primary-on-surface: oklch(100% 0 0);
2745
2763
  --cirth-code-background-color: oklch(from var(--cirth-canvas) calc(l - .02) c h);
2746
2764
  --cirth-card-sectioning-background-color: oklch(from var(--cirth-canvas) calc(l + .025) c h);
2747
2765
  --cirth-form-element-background-color: oklch(from var(--cirth-canvas) calc(l - .008) c h);
@@ -2749,14 +2767,14 @@
2749
2767
  --cirth-form-element-active-background-color: var(--cirth-canvas);
2750
2768
  --cirth-dropdown-background-color: var(--cirth-card-background-color);
2751
2769
  --cirth-popover-background-color: var(--cirth-card-background-color);
2752
- --cirth-secondary-background: oklch(48.3% .03 280);
2753
- --cirth-secondary-border: var(--cirth-secondary-background);
2754
- --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
2755
- --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
2756
- --cirth-secondary-inverse: oklch(100% 0 0);
2757
- --cirth-contrast-border: var(--cirth-contrast-background);
2758
- --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
2759
- --cirth-contrast-hover-underline: var(--cirth-contrast-hover);
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);
2760
2778
  --cirth-mark-background-color: color-mix(in oklab,
2761
2779
  var(--cirth-primary) 24%,
2762
2780
  var(--cirth-canvas));
@@ -2781,12 +2799,12 @@
2781
2799
  --cirth-form-element-valid-active-border-color: var(--cirth-success-active);
2782
2800
  --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
2783
2801
  --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
2784
- --cirth-switch-checked-background-color: var(--cirth-primary-background);
2785
- --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);
2786
2804
  --cirth-range-thumb-border-color: var(--cirth-background-color);
2787
- --cirth-range-thumb-color: var(--cirth-secondary);
2788
- --cirth-range-thumb-active-color: var(--cirth-primary-background);
2789
- --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);
2790
2808
  --cirth-accordion-close-summary-color: var(--cirth-ink);
2791
2809
  --cirth-accordion-open-summary-color: var(--cirth-ink);
2792
2810
  --cirth-card-border-color: color-mix(in oklab,
@@ -2800,7 +2818,7 @@
2800
2818
  --cirth-meter-optimum-color: var(--cirth-success);
2801
2819
  --cirth-meter-suboptimum-color: var(--cirth-warning);
2802
2820
  --cirth-meter-even-less-good-color: var(--cirth-error);
2803
- --cirth-progress-color: var(--cirth-primary);
2821
+ --cirth-progress-color: var(--cirth-primary-text);
2804
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");
2805
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");
2806
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");
@@ -2828,20 +2846,21 @@
2828
2846
  --cirth-warning-border: var(--cirth-warning);
2829
2847
  --cirth-warning-active: oklch(from var(--cirth-warning) calc(l * 1.124) calc(c * 1.121) h);
2830
2848
  --cirth-warning-surface: oklch(from var(--cirth-warning) 35.3% .063 h);
2831
- --cirth-primary-background: color-mix(in oklch,
2849
+ --cirth-primary-text: var(--cirth-primary);
2850
+ --cirth-primary-surface: color-mix(in oklch,
2832
2851
  var(--cirth-primary) 75.2%,
2833
2852
  black);
2834
- --cirth-primary-border: var(--cirth-primary-background);
2853
+ --cirth-primary-border: var(--cirth-primary-surface);
2835
2854
  --cirth-primary-underline: oklch(from var(--cirth-primary) l c h / 50%);
2836
- --cirth-primary-hover: oklch(from var(--cirth-primary) calc(l * 1.124) calc(c * 1.132) h);
2837
- --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,
2838
2857
  var(--cirth-primary) 72%,
2839
2858
  black);
2840
- --cirth-primary-hover-border: var(--cirth-primary-hover-background);
2841
- --cirth-primary-hover-underline: var(--cirth-primary-hover);
2859
+ --cirth-primary-border-active: var(--cirth-primary-surface-active);
2860
+ --cirth-primary-underline-active: var(--cirth-primary-active);
2842
2861
  --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 80%);
2843
2862
  --cirth-text-selection-color: oklch(from var(--cirth-primary) calc(l * 1.065) c h / 18.75%);
2844
- --cirth-primary-inverse: oklch(100% 0 0);
2863
+ --cirth-primary-on-surface: oklch(100% 0 0);
2845
2864
  --cirth-code-background-color: oklch(from var(--cirth-canvas) calc(l - .02) c h);
2846
2865
  --cirth-card-sectioning-background-color: oklch(from var(--cirth-canvas) calc(l + .025) c h);
2847
2866
  --cirth-form-element-background-color: oklch(from var(--cirth-canvas) calc(l - .008) c h);
@@ -2849,14 +2868,14 @@
2849
2868
  --cirth-form-element-active-background-color: var(--cirth-canvas);
2850
2869
  --cirth-dropdown-background-color: var(--cirth-card-background-color);
2851
2870
  --cirth-popover-background-color: var(--cirth-card-background-color);
2852
- --cirth-secondary-background: oklch(48.3% .03 280);
2853
- --cirth-secondary-border: var(--cirth-secondary-background);
2854
- --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
2855
- --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
2856
- --cirth-secondary-inverse: oklch(100% 0 0);
2857
- --cirth-contrast-border: var(--cirth-contrast-background);
2858
- --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
2859
- --cirth-contrast-hover-underline: var(--cirth-contrast-hover);
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);
2860
2879
  --cirth-mark-background-color: color-mix(in oklab,
2861
2880
  var(--cirth-primary) 24%,
2862
2881
  var(--cirth-canvas));
@@ -2881,12 +2900,12 @@
2881
2900
  --cirth-form-element-valid-active-border-color: var(--cirth-success-active);
2882
2901
  --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
2883
2902
  --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
2884
- --cirth-switch-checked-background-color: var(--cirth-primary-background);
2885
- --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);
2886
2905
  --cirth-range-thumb-border-color: var(--cirth-background-color);
2887
- --cirth-range-thumb-color: var(--cirth-secondary);
2888
- --cirth-range-thumb-active-color: var(--cirth-primary-background);
2889
- --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);
2890
2909
  --cirth-accordion-close-summary-color: var(--cirth-ink);
2891
2910
  --cirth-accordion-open-summary-color: var(--cirth-ink);
2892
2911
  --cirth-card-border-color: color-mix(in oklab,
@@ -2900,7 +2919,7 @@
2900
2919
  --cirth-meter-optimum-color: var(--cirth-success);
2901
2920
  --cirth-meter-suboptimum-color: var(--cirth-warning);
2902
2921
  --cirth-meter-even-less-good-color: var(--cirth-error);
2903
- --cirth-progress-color: var(--cirth-primary);
2922
+ --cirth-progress-color: var(--cirth-primary-text);
2904
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");
2905
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");
2906
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");
@@ -2914,7 +2933,7 @@
2914
2933
  }
2915
2934
 
2916
2935
  .cirth progress, .cirth [type="checkbox"], .cirth [type="radio"], .cirth [type="range"] {
2917
- accent-color: var(--cirth-primary);
2936
+ accent-color: var(--cirth-primary-text);
2918
2937
  }
2919
2938
 
2920
2939
  @media (prefers-contrast: more) {
@@ -2927,7 +2946,7 @@
2927
2946
  --cirth-h5-color: var(--cirth-color);
2928
2947
  --cirth-h6-color: var(--cirth-color);
2929
2948
  --cirth-muted-color: oklch(39.7% .028 280);
2930
- --cirth-secondary: oklch(39.7% .028 280);
2949
+ --cirth-secondary-text: oklch(39.7% .028 280);
2931
2950
  --cirth-code-color: oklch(35.3% .027 280);
2932
2951
  --cirth-link-visited-color: oklch(35.3% .027 280);
2933
2952
  --cirth-muted-border-color: oklch(57% .032 280);
@@ -2939,10 +2958,10 @@
2939
2958
  --cirth-form-element-invalid-border-color: oklch(48.3% .165 22);
2940
2959
  --cirth-form-element-valid-border-color: oklch(48.3% .106 153);
2941
2960
  --cirth-primary: oklch(39.7% .081 44);
2942
- --cirth-primary-hover: oklch(31% .063 44);
2961
+ --cirth-primary-active: oklch(31% .063 44);
2943
2962
  --cirth-primary-underline: var(--cirth-primary);
2944
- --cirth-secondary-underline: var(--cirth-secondary);
2945
- --cirth-contrast-underline: var(--cirth-contrast);
2963
+ --cirth-secondary-underline: var(--cirth-secondary-text);
2964
+ --cirth-contrast-underline: var(--cirth-contrast-text);
2946
2965
  --cirth-primary-focus: oklch(48.3% .098 44);
2947
2966
  --cirth-secondary-focus: oklch(48.3% .03 280);
2948
2967
  --cirth-contrast-focus: oklch(48.3% .03 280);
@@ -2969,7 +2988,7 @@
2969
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");
2970
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");
2971
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");
2972
- --cirth-secondary: oklch(78.7% .014 280);
2991
+ --cirth-secondary-text: oklch(78.7% .014 280);
2973
2992
  --cirth-code-color: oklch(83% .011 280);
2974
2993
  --cirth-link-visited-color: oklch(78.7% .014 280);
2975
2994
  --cirth-muted-border-color: oklch(57% .032 280);
@@ -2978,12 +2997,12 @@
2978
2997
  --cirth-form-element-invalid-border-color: oklch(78.7% .105 22);
2979
2998
  --cirth-form-element-valid-border-color: oklch(78.7% .172 153);
2980
2999
  --cirth-primary: oklch(78.7% .092 44);
2981
- --cirth-primary-hover: oklch(87.3% .051 44);
2982
- --cirth-primary-background: oklch(44% .09 44);
2983
- --cirth-primary-hover-background: oklch(39.7% .081 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);
2984
3003
  --cirth-primary-underline: var(--cirth-primary);
2985
- --cirth-secondary-underline: var(--cirth-secondary);
2986
- --cirth-contrast-underline: var(--cirth-contrast);
3004
+ --cirth-secondary-underline: var(--cirth-secondary-text);
3005
+ --cirth-contrast-underline: var(--cirth-contrast-text);
2987
3006
  --cirth-primary-focus: oklch(70% .141 44);
2988
3007
  --cirth-secondary-focus: oklch(70% .021 280);
2989
3008
  --cirth-contrast-focus: oklch(87.3% .007 280);
@@ -3010,7 +3029,7 @@
3010
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");
3011
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");
3012
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");
3013
- --cirth-secondary: oklch(78.7% .014 280);
3032
+ --cirth-secondary-text: oklch(78.7% .014 280);
3014
3033
  --cirth-code-color: oklch(83% .011 280);
3015
3034
  --cirth-link-visited-color: oklch(78.7% .014 280);
3016
3035
  --cirth-muted-border-color: oklch(57% .032 280);
@@ -3019,12 +3038,12 @@
3019
3038
  --cirth-form-element-invalid-border-color: oklch(78.7% .105 22);
3020
3039
  --cirth-form-element-valid-border-color: oklch(78.7% .172 153);
3021
3040
  --cirth-primary: oklch(78.7% .092 44);
3022
- --cirth-primary-hover: oklch(87.3% .051 44);
3023
- --cirth-primary-background: oklch(44% .09 44);
3024
- --cirth-primary-hover-background: oklch(39.7% .081 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);
3025
3044
  --cirth-primary-underline: var(--cirth-primary);
3026
- --cirth-secondary-underline: var(--cirth-secondary);
3027
- --cirth-contrast-underline: var(--cirth-contrast);
3045
+ --cirth-secondary-underline: var(--cirth-secondary-text);
3046
+ --cirth-contrast-underline: var(--cirth-contrast-text);
3028
3047
  --cirth-primary-focus: oklch(70% .141 44);
3029
3048
  --cirth-secondary-focus: oklch(70% .021 280);
3030
3049
  --cirth-contrast-focus: oklch(87.3% .007 280);