@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.css CHANGED
@@ -269,7 +269,7 @@ del {
269
269
  }
270
270
 
271
271
  :where(a:not([role="button"])), [role="link"] {
272
- --cirth-color: var(--cirth-primary);
272
+ --cirth-color: var(--cirth-primary-text);
273
273
  --cirth-background-color: transparent;
274
274
  --cirth-underline: var(--cirth-primary-underline);
275
275
  background-color: var(--cirth-background-color);
@@ -283,8 +283,8 @@ del {
283
283
  }
284
284
 
285
285
  :where(a:not([role="button"])):is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), [role="link"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
286
- --cirth-color: var(--cirth-primary-hover);
287
- --cirth-underline: var(--cirth-primary-hover-underline);
286
+ --cirth-color: var(--cirth-primary-active);
287
+ --cirth-underline: var(--cirth-primary-underline-active);
288
288
  --cirth-text-decoration: underline;
289
289
  }
290
290
 
@@ -294,23 +294,23 @@ del {
294
294
  }
295
295
 
296
296
  :where(a:not([role="button"])).secondary, [role="link"].secondary {
297
- --cirth-color: var(--cirth-secondary);
297
+ --cirth-color: var(--cirth-secondary-text);
298
298
  --cirth-underline: var(--cirth-secondary-underline);
299
299
  }
300
300
 
301
301
  :where(a:not([role="button"])).secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), [role="link"].secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
302
- --cirth-color: var(--cirth-secondary-hover);
303
- --cirth-underline: var(--cirth-secondary-hover-underline);
302
+ --cirth-color: var(--cirth-secondary-active);
303
+ --cirth-underline: var(--cirth-secondary-underline-active);
304
304
  }
305
305
 
306
306
  :where(a:not([role="button"])).contrast, [role="link"].contrast {
307
- --cirth-color: var(--cirth-contrast);
307
+ --cirth-color: var(--cirth-contrast-text);
308
308
  --cirth-underline: var(--cirth-contrast-underline);
309
309
  }
310
310
 
311
311
  :where(a:not([role="button"])).contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), [role="link"].contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
312
- --cirth-color: var(--cirth-contrast-hover);
313
- --cirth-underline: var(--cirth-contrast-hover-underline);
312
+ --cirth-color: var(--cirth-contrast-active);
313
+ --cirth-underline: var(--cirth-contrast-underline-active);
314
314
  }
315
315
 
316
316
  :where(a:not([role="button"])):visited:not(.secondary, .contrast, details.dropdown a, [aria-current]:not([aria-current="false"]), :hover, :active, :focus, nav a, :has(article)) {
@@ -336,9 +336,9 @@ button, [type="submit"], [type="reset"], [type="button"] {
336
336
  }
337
337
 
338
338
  button, [type="submit"], [type="reset"], [type="button"], [role="button"] {
339
- --cirth-background-color: var(--cirth-primary-background);
339
+ --cirth-background-color: var(--cirth-primary-surface);
340
340
  --cirth-border-color: var(--cirth-primary-border);
341
- --cirth-color: var(--cirth-primary-inverse);
341
+ --cirth-color: var(--cirth-primary-on-surface);
342
342
  --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 #0000);
343
343
  max-width: 100%;
344
344
  min-block-size: max(2.75rem, var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
@@ -361,9 +361,9 @@ button, [type="submit"], [type="reset"], [type="button"], [role="button"] {
361
361
  }
362
362
 
363
363
  [type="file"]::file-selector-button {
364
- --cirth-background-color: var(--cirth-primary-background);
364
+ --cirth-background-color: var(--cirth-primary-surface);
365
365
  --cirth-border-color: var(--cirth-primary-border);
366
- --cirth-color: var(--cirth-primary-inverse);
366
+ --cirth-color: var(--cirth-primary-on-surface);
367
367
  --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 #0000);
368
368
  max-width: 100%;
369
369
  min-block-size: max(2.75rem, var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
@@ -386,24 +386,24 @@ button, [type="submit"], [type="reset"], [type="button"], [role="button"] {
386
386
  }
387
387
 
388
388
  button[aria-current]:not([aria-current="false"]), button:is(:hover, :active, :focus), [type="submit"][aria-current]:not([aria-current="false"]), [type="submit"]:is(:hover, :active, :focus), [type="reset"][aria-current]:not([aria-current="false"]), [type="reset"]:is(:hover, :active, :focus), [type="button"][aria-current]:not([aria-current="false"]), [type="button"]:is(:hover, :active, :focus), [role="button"][aria-current]:not([aria-current="false"]), [role="button"]:is(:hover, :active, :focus) {
389
- --cirth-background-color: var(--cirth-primary-hover-background);
390
- --cirth-border-color: var(--cirth-primary-hover-border);
389
+ --cirth-background-color: var(--cirth-primary-surface-active);
390
+ --cirth-border-color: var(--cirth-primary-border-active);
391
391
  --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000);
392
- --cirth-color: var(--cirth-primary-inverse);
392
+ --cirth-color: var(--cirth-primary-on-surface);
393
393
  }
394
394
 
395
395
  [type="file"]::file-selector-button:is() {
396
- --cirth-background-color: var(--cirth-primary-hover-background);
397
- --cirth-border-color: var(--cirth-primary-hover-border);
396
+ --cirth-background-color: var(--cirth-primary-surface-active);
397
+ --cirth-border-color: var(--cirth-primary-border-active);
398
398
  --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000);
399
- --cirth-color: var(--cirth-primary-inverse);
399
+ --cirth-color: var(--cirth-primary-on-surface);
400
400
  }
401
401
 
402
402
  [type="file"]::file-selector-button:is(:hover, :active, :focus) {
403
- --cirth-background-color: var(--cirth-primary-hover-background);
404
- --cirth-border-color: var(--cirth-primary-hover-border);
403
+ --cirth-background-color: var(--cirth-primary-surface-active);
404
+ --cirth-border-color: var(--cirth-primary-border-active);
405
405
  --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000);
406
- --cirth-color: var(--cirth-primary-inverse);
406
+ --cirth-color: var(--cirth-primary-on-surface);
407
407
  }
408
408
 
409
409
  button:active, [type="submit"]:active, [type="reset"]:active, [type="button"]:active, [role="button"]:active {
@@ -425,29 +425,29 @@ button:focus-visible, button[aria-current]:not([aria-current="false"]):focus-vis
425
425
  }
426
426
 
427
427
  :is(button, [type="submit"], [type="button"], [role="button"]).secondary, [type="reset"] {
428
- --cirth-background-color: var(--cirth-secondary-background);
428
+ --cirth-background-color: var(--cirth-secondary-surface);
429
429
  --cirth-border-color: var(--cirth-secondary-border);
430
- --cirth-color: var(--cirth-secondary-inverse);
430
+ --cirth-color: var(--cirth-secondary-on-surface);
431
431
  cursor: pointer;
432
432
  }
433
433
 
434
434
  [type="file"]::file-selector-button {
435
- --cirth-background-color: var(--cirth-secondary-background);
435
+ --cirth-background-color: var(--cirth-secondary-surface);
436
436
  --cirth-border-color: var(--cirth-secondary-border);
437
- --cirth-color: var(--cirth-secondary-inverse);
437
+ --cirth-color: var(--cirth-secondary-on-surface);
438
438
  cursor: pointer;
439
439
  }
440
440
 
441
441
  :is(button, [type="submit"], [type="button"], [role="button"]).secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), [type="reset"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
442
- --cirth-background-color: var(--cirth-secondary-hover-background);
443
- --cirth-border-color: var(--cirth-secondary-hover-border);
444
- --cirth-color: var(--cirth-secondary-inverse);
442
+ --cirth-background-color: var(--cirth-secondary-surface-active);
443
+ --cirth-border-color: var(--cirth-secondary-border-active);
444
+ --cirth-color: var(--cirth-secondary-on-surface);
445
445
  }
446
446
 
447
447
  [type="file"]::file-selector-button:is(:hover, :active, :focus) {
448
- --cirth-background-color: var(--cirth-secondary-hover-background);
449
- --cirth-border-color: var(--cirth-secondary-hover-border);
450
- --cirth-color: var(--cirth-secondary-inverse);
448
+ --cirth-background-color: var(--cirth-secondary-surface-active);
449
+ --cirth-border-color: var(--cirth-secondary-border-active);
450
+ --cirth-color: var(--cirth-secondary-on-surface);
451
451
  }
452
452
 
453
453
  :is(button, [type="submit"], [type="button"], [role="button"]).secondary:focus-visible, :is(button, [type="submit"], [type="button"], [role="button"]).secondary[aria-current]:not([aria-current="false"]):focus-visible, [type="reset"]:focus-visible, [type="reset"][aria-current]:not([aria-current="false"]):focus-visible {
@@ -456,15 +456,15 @@ button:focus-visible, button[aria-current]:not([aria-current="false"]):focus-vis
456
456
  }
457
457
 
458
458
  :is(button, [type="submit"], [type="button"], [role="button"]).contrast {
459
- --cirth-background-color: var(--cirth-contrast-background);
459
+ --cirth-background-color: var(--cirth-contrast-surface);
460
460
  --cirth-border-color: var(--cirth-contrast-border);
461
- --cirth-color: var(--cirth-contrast-inverse);
461
+ --cirth-color: var(--cirth-contrast-on-surface);
462
462
  }
463
463
 
464
464
  :is(button, [type="submit"], [type="button"], [role="button"]).contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
465
- --cirth-background-color: var(--cirth-contrast-hover-background);
466
- --cirth-border-color: var(--cirth-contrast-hover-border);
467
- --cirth-color: var(--cirth-contrast-inverse);
465
+ --cirth-background-color: var(--cirth-contrast-surface-active);
466
+ --cirth-border-color: var(--cirth-contrast-border-active);
467
+ --cirth-color: var(--cirth-contrast-on-surface);
468
468
  }
469
469
 
470
470
  :is(button, [type="submit"], [type="button"], [role="button"]).contrast:focus-visible, :is(button, [type="submit"], [type="button"], [role="button"]).contrast[aria-current]:not([aria-current="false"]):focus-visible {
@@ -475,13 +475,13 @@ button:focus-visible, button[aria-current]:not([aria-current="false"]):focus-vis
475
475
  :is(button, [type="submit"], [type="button"], [role="button"]).danger {
476
476
  --cirth-background-color: light-dark(var(--cirth-error), color-mix(in oklch, var(--cirth-error) 55%, black));
477
477
  --cirth-border-color: var(--cirth-background-color);
478
- --cirth-color: var(--cirth-primary-inverse);
478
+ --cirth-color: var(--cirth-primary-on-surface);
479
479
  }
480
480
 
481
481
  :is(button, [type="submit"], [type="button"], [role="button"]).danger:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
482
482
  --cirth-background-color: light-dark(color-mix(in oklch, var(--cirth-error) 85%, black), color-mix(in oklch, var(--cirth-error) 50%, black));
483
483
  --cirth-border-color: var(--cirth-background-color);
484
- --cirth-color: var(--cirth-primary-inverse);
484
+ --cirth-color: var(--cirth-primary-on-surface);
485
485
  }
486
486
 
487
487
  :is(button, [type="submit"], [type="button"], [role="button"]).danger:focus-visible, :is(button, [type="submit"], [type="button"], [role="button"]).danger[aria-current]:not([aria-current="false"]):focus-visible {
@@ -502,80 +502,80 @@ button:focus-visible, button[aria-current]:not([aria-current="false"]):focus-vis
502
502
  }
503
503
 
504
504
  :is(button, [type="submit"], [type="button"], [role="button"]).outline, [type="reset"].outline {
505
- --cirth-color: var(--cirth-primary);
506
- --cirth-border-color: var(--cirth-primary);
505
+ --cirth-color: var(--cirth-primary-text);
506
+ --cirth-border-color: var(--cirth-primary-text);
507
507
  }
508
508
 
509
509
  :is(button, [type="submit"], [type="button"], [role="button"]).outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), [type="reset"].outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
510
510
  --cirth-background-color: color-mix(in oklch,
511
- var(--cirth-primary) 12%,
511
+ var(--cirth-primary-text) 12%,
512
512
  var(--cirth-form-element-background-color));
513
- --cirth-color: var(--cirth-primary-hover);
514
- --cirth-border-color: var(--cirth-primary-hover);
513
+ --cirth-color: var(--cirth-primary-active);
514
+ --cirth-border-color: var(--cirth-primary-active);
515
515
  }
516
516
 
517
517
  :is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary, [type="reset"].outline.secondary {
518
- --cirth-color: var(--cirth-secondary);
519
- --cirth-border-color: var(--cirth-secondary);
518
+ --cirth-color: var(--cirth-secondary-text);
519
+ --cirth-border-color: var(--cirth-secondary-text);
520
520
  }
521
521
 
522
522
  :is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), [type="reset"].outline.secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
523
523
  --cirth-background-color: color-mix(in oklch,
524
- var(--cirth-secondary) 12%,
524
+ var(--cirth-secondary-text) 12%,
525
525
  var(--cirth-form-element-background-color));
526
- --cirth-color: var(--cirth-secondary-hover);
527
- --cirth-border-color: var(--cirth-secondary-hover);
526
+ --cirth-color: var(--cirth-secondary-active);
527
+ --cirth-border-color: var(--cirth-secondary-active);
528
528
  }
529
529
 
530
530
  :is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast, [type="reset"].outline.contrast {
531
- --cirth-color: var(--cirth-contrast);
532
- --cirth-border-color: var(--cirth-contrast);
531
+ --cirth-color: var(--cirth-contrast-text);
532
+ --cirth-border-color: var(--cirth-contrast-text);
533
533
  }
534
534
 
535
535
  :is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), [type="reset"].outline.contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
536
536
  --cirth-background-color: color-mix(in oklch,
537
- var(--cirth-contrast) 12%,
537
+ var(--cirth-contrast-text) 12%,
538
538
  var(--cirth-form-element-background-color));
539
- --cirth-color: var(--cirth-contrast-hover);
540
- --cirth-border-color: var(--cirth-contrast-hover);
539
+ --cirth-color: var(--cirth-contrast-active);
540
+ --cirth-border-color: var(--cirth-contrast-active);
541
541
  }
542
542
 
543
543
  :is(button, [type="submit"], [type="button"], [role="button"]).ghost, [type="reset"].ghost {
544
- --cirth-color: var(--cirth-primary);
544
+ --cirth-color: var(--cirth-primary-text);
545
545
  --cirth-border-color: transparent;
546
546
  }
547
547
 
548
548
  :is(button, [type="submit"], [type="button"], [role="button"]).ghost:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), [type="reset"].ghost:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
549
549
  --cirth-background-color: color-mix(in oklch,
550
- var(--cirth-primary) 12%,
550
+ var(--cirth-primary-text) 12%,
551
551
  transparent);
552
- --cirth-color: var(--cirth-primary-hover);
552
+ --cirth-color: var(--cirth-primary-active);
553
553
  --cirth-border-color: transparent;
554
554
  }
555
555
 
556
556
  :is(button, [type="submit"], [type="button"], [role="button"]).ghost.secondary, [type="reset"].ghost.secondary {
557
- --cirth-color: var(--cirth-secondary);
557
+ --cirth-color: var(--cirth-secondary-text);
558
558
  --cirth-border-color: transparent;
559
559
  }
560
560
 
561
561
  :is(button, [type="submit"], [type="button"], [role="button"]).ghost.secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), [type="reset"].ghost.secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
562
562
  --cirth-background-color: color-mix(in oklch,
563
- var(--cirth-secondary) 12%,
563
+ var(--cirth-secondary-text) 12%,
564
564
  transparent);
565
- --cirth-color: var(--cirth-secondary-hover);
565
+ --cirth-color: var(--cirth-secondary-active);
566
566
  --cirth-border-color: transparent;
567
567
  }
568
568
 
569
569
  :is(button, [type="submit"], [type="button"], [role="button"]).ghost.contrast, [type="reset"].ghost.contrast {
570
- --cirth-color: var(--cirth-contrast);
570
+ --cirth-color: var(--cirth-contrast-text);
571
571
  --cirth-border-color: transparent;
572
572
  }
573
573
 
574
574
  :is(button, [type="submit"], [type="button"], [role="button"]).ghost.contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), [type="reset"].ghost.contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
575
575
  --cirth-background-color: color-mix(in oklch,
576
- var(--cirth-contrast) 12%,
576
+ var(--cirth-contrast-text) 12%,
577
577
  transparent);
578
- --cirth-color: var(--cirth-contrast-hover);
578
+ --cirth-color: var(--cirth-contrast-active);
579
579
  --cirth-border-color: transparent;
580
580
  }
581
581
 
@@ -846,6 +846,20 @@ input, select, textarea {
846
846
  border-style: dashed;
847
847
  }
848
848
 
849
+ input[type="number"][readonly] {
850
+ appearance: textfield;
851
+ }
852
+
853
+ input[type="number"][readonly]::-webkit-inner-spin-button {
854
+ -webkit-appearance: none;
855
+ margin: 0;
856
+ }
857
+
858
+ input[type="number"][readonly]::-webkit-outer-spin-button {
859
+ -webkit-appearance: none;
860
+ margin: 0;
861
+ }
862
+
849
863
  input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [readonly]):is(:active, :focus), :where(select, textarea):not([readonly]):is(:active, :focus) {
850
864
  --cirth-background-color: var(--cirth-form-element-active-background-color);
851
865
  }
@@ -1012,7 +1026,7 @@ label:has([type="checkbox"], [type="radio"]) {
1012
1026
  }
1013
1027
 
1014
1028
  [type="checkbox"]:checked, [type="checkbox"]:checked:active, [type="checkbox"]:checked:focus, [type="radio"]:checked, [type="radio"]:checked:active, [type="radio"]:checked:focus {
1015
- --cirth-background-color: var(--cirth-primary-background);
1029
+ --cirth-background-color: var(--cirth-primary-surface);
1016
1030
  --cirth-border-color: var(--cirth-primary-border);
1017
1031
  }
1018
1032
 
@@ -1027,7 +1041,7 @@ label:has([type="checkbox"], [type="radio"]) {
1027
1041
  }
1028
1042
 
1029
1043
  [type="checkbox"]:not([role="switch"]):checked:before, [type="checkbox"]:not([role="switch"]):indeterminate:before {
1030
- background-color: var(--cirth-primary-inverse);
1044
+ background-color: var(--cirth-primary-on-surface);
1031
1045
  content: "";
1032
1046
  width: 100%;
1033
1047
  height: 100%;
@@ -1048,7 +1062,7 @@ label:has([type="checkbox"], [type="radio"]) {
1048
1062
  }
1049
1063
 
1050
1064
  [type="checkbox"]:not([role="switch"]):indeterminate {
1051
- --cirth-background-color: var(--cirth-primary-background);
1065
+ --cirth-background-color: var(--cirth-primary-surface);
1052
1066
  --cirth-border-color: var(--cirth-primary-border);
1053
1067
  }
1054
1068
 
@@ -1061,7 +1075,7 @@ label:has([type="checkbox"], [type="radio"]) {
1061
1075
  }
1062
1076
 
1063
1077
  [type="radio"]:checked, [type="radio"]:checked:active, [type="radio"]:checked:focus {
1064
- --cirth-background-color: var(--cirth-primary-inverse);
1078
+ --cirth-background-color: var(--cirth-primary-on-surface);
1065
1079
  border-width: .42em;
1066
1080
  }
1067
1081
 
@@ -1225,8 +1239,8 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
1225
1239
  }
1226
1240
 
1227
1241
  [type="file"]:is(:hover, :active, :focus)::file-selector-button {
1228
- --cirth-background-color: var(--cirth-secondary-hover-background);
1229
- --cirth-border-color: var(--cirth-secondary-hover-border);
1242
+ --cirth-background-color: var(--cirth-secondary-surface-active);
1243
+ --cirth-border-color: var(--cirth-secondary-border-active);
1230
1244
  }
1231
1245
 
1232
1246
  [type="file"]:focus::file-selector-button {
@@ -1288,7 +1302,7 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
1288
1302
  @media (hover: hover) and (pointer: fine) {
1289
1303
  [type="range"]:hover:not(:active, :focus, :disabled) {
1290
1304
  --cirth-range-border-color: var(--cirth-range-active-border-color);
1291
- --cirth-range-thumb-color: var(--cirth-secondary-hover);
1305
+ --cirth-range-thumb-color: var(--cirth-secondary-active);
1292
1306
  }
1293
1307
  }
1294
1308
 
@@ -1764,7 +1778,7 @@ label > details.dropdown {
1764
1778
  --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1765
1779
  var(--cirth-primary-border);
1766
1780
  --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1767
- var(--cirth-primary-hover-border);
1781
+ var(--cirth-primary-border-active);
1768
1782
  }
1769
1783
 
1770
1784
  [role="search"] button:focus, [role="search"] [type="submit"]:focus, [role="search"] [type="reset"]:focus, [role="search"] [type="button"]:focus, [role="search"] [role="button"]:focus, .group button:focus, .group [type="submit"]:focus, .group [type="reset"]:focus, .group [type="button"]:focus, .group [role="button"]:focus {
@@ -2099,11 +2113,11 @@ header:not(:is(article, aside, dialog, figure, li, nav, section, td) *) > nav li
2099
2113
  header:not(:is(article, aside, dialog, figure, li, nav, section, td) *) > nav li :where(a:not([role="button"]), [role="link"]):is(:hover, :focus, :active) {
2100
2114
  --cirth-color: color-mix(in oklch,
2101
2115
  var(--cirth-muted-color),
2102
- var(--cirth-contrast));
2116
+ var(--cirth-contrast-text));
2103
2117
  }
2104
2118
 
2105
2119
  header:not(:is(article, aside, dialog, figure, li, nav, section, td) *) > nav li :where(a:not([role="button"]), [role="link"]):is([aria-current]:not([aria-current="false"]), [aria-selected="true"]) {
2106
- --cirth-color: var(--cirth-contrast);
2120
+ --cirth-color: var(--cirth-contrast-text);
2107
2121
  font-weight: var(--cirth-font-weight-semibold);
2108
2122
  }
2109
2123
 
@@ -2594,18 +2608,18 @@ details summary[role="button"]:not(.outline):after {
2594
2608
  --cirth-success: light-dark(oklch(52.7% .115 153), oklch(65.7% .144 153));
2595
2609
  --cirth-warning: light-dark(oklch(48.3% .084 89.5), oklch(70% .122 89.5));
2596
2610
  --cirth-primary: light-dark(oklch(52.7% .107 44), oklch(65.7% .134 44));
2597
- --cirth-secondary: light-dark(oklch(52.7% .031 280), oklch(70% .021 280));
2611
+ --cirth-secondary-text: light-dark(oklch(52.7% .031 280), oklch(70% .021 280));
2598
2612
  --cirth-secondary-underline: light-dark(oklch(52.7% .031 280 / .5), oklch(70% .021 280 / .5));
2599
- --cirth-secondary-hover: light-dark(oklch(44% .029 280), oklch(78.7% .014 280));
2600
- --cirth-secondary-hover-background: light-dark(oklch(44% .029 280), oklch(52.7% .031 280));
2613
+ --cirth-secondary-active: light-dark(oklch(44% .029 280), oklch(78.7% .014 280));
2614
+ --cirth-secondary-surface-active: light-dark(oklch(44% .029 280), oklch(52.7% .031 280));
2601
2615
  --cirth-secondary-focus: light-dark(oklch(48.3% .03 280 / .7), oklch(70% .021 280 / .7));
2602
- --cirth-contrast: light-dark(oklch(22.3% .023 280), oklch(91.7% .004 280));
2603
- --cirth-contrast-background: light-dark(oklch(22.3% .023 280), oklch(96% 0 280));
2616
+ --cirth-contrast-text: light-dark(oklch(22.3% .023 280), oklch(91.7% .004 280));
2617
+ --cirth-contrast-surface: light-dark(oklch(22.3% .023 280), oklch(96% 0 280));
2604
2618
  --cirth-contrast-underline: light-dark(oklch(22.3% .023 280 / .5), oklch(91.7% .004 280 / .5));
2605
- --cirth-contrast-hover: light-dark(oklch(0% 0 0), oklch(100% 0 0));
2606
- --cirth-contrast-hover-background: light-dark(oklch(0% 0 0), oklch(100% 0 0));
2619
+ --cirth-contrast-active: light-dark(oklch(0% 0 0), oklch(100% 0 0));
2620
+ --cirth-contrast-surface-active: light-dark(oklch(0% 0 0), oklch(100% 0 0));
2607
2621
  --cirth-contrast-focus: light-dark(oklch(48.3% .03 280 / .7), oklch(87.3% .007 280 / .5));
2608
- --cirth-contrast-inverse: light-dark(oklch(100% 0 0), oklch(0% 0 0));
2622
+ --cirth-contrast-on-surface: light-dark(oklch(100% 0 0), oklch(0% 0 0));
2609
2623
  --cirth-link-visited-color: light-dark(oklch(48.3% 0 280), oklch(65.7% 0 280));
2610
2624
  --cirth-box-shadow: light-dark(.0145rem .029rem .174rem oklch(65.7% .025 280 / .01698), .0335rem .067rem .402rem oklch(65.7% .025 280 / .024), .0625rem .125rem .75rem oklch(65.7% .025 280 / .03), .1125rem .225rem 1.35rem oklch(65.7% .025 280 / .036), .2085rem .417rem 2.502rem oklch(65.7% .025 280 / .04302), .5rem 1rem 6rem oklch(65.7% .025 280 / .06), 0 0 0 .0625rem oklch(65.7% .025 280 / .015),
2611
2625
  .0145rem .029rem .174rem oklch(9% .011 280 / .01698), .0335rem .067rem .402rem oklch(9% .011 280 / .024), .0625rem .125rem .75rem oklch(9% .011 280 / .03), .1125rem .225rem 1.35rem oklch(9% .011 280 / .036), .2085rem .417rem 2.502rem oklch(9% .011 280 / .04302), .5rem 1rem 6rem oklch(9% .011 280 / .06), 0 0 0 .0625rem oklch(9% .011 280 / .015));
@@ -2641,17 +2655,20 @@ details summary[role="button"]:not(.outline):after {
2641
2655
  --cirth-warning-border: oklch(from var(--cirth-warning) calc(l * 1.269) calc(c * 1.267) h);
2642
2656
  --cirth-warning-active: oklch(from var(--cirth-warning) calc(l * 1.091) calc(c * 1.081) h);
2643
2657
  --cirth-warning-surface: oklch(from var(--cirth-warning) 93% .05 h);
2644
- --cirth-primary-background: var(--cirth-primary);
2645
- --cirth-primary-border: var(--cirth-primary-background);
2658
+ --cirth-primary-text: var(--cirth-primary);
2659
+ --cirth-primary-surface: var(--cirth-primary);
2660
+ --cirth-primary-border: var(--cirth-primary-surface);
2646
2661
  --cirth-primary-underline: oklch(from var(--cirth-primary) l c h / 50%);
2647
- --cirth-primary-hover: color-mix(in oklch, var(--cirth-primary) 83.5%, black);
2648
- --cirth-primary-hover-background: color-mix(in oklch,
2662
+ --cirth-primary-active: color-mix(in oklch,
2663
+ var(--cirth-primary) 83.5%,
2664
+ black);
2665
+ --cirth-primary-surface-active: color-mix(in oklch,
2649
2666
  var(--cirth-primary) 91.7%,
2650
2667
  black);
2651
- --cirth-primary-hover-border: var(--cirth-primary-hover-background);
2652
- --cirth-primary-hover-underline: var(--cirth-primary-hover);
2668
+ --cirth-primary-border-active: var(--cirth-primary-surface-active);
2669
+ --cirth-primary-underline-active: var(--cirth-primary-active);
2653
2670
  --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 75%);
2654
- --cirth-primary-inverse: oklch(100% 0 0);
2671
+ --cirth-primary-on-surface: oklch(100% 0 0);
2655
2672
  --cirth-text-selection-color: oklch(from var(--cirth-primary) calc(l * 1.247) c h / 25%);
2656
2673
  --cirth-code-background-color: oklch(from var(--cirth-canvas) calc(l - .019) c h);
2657
2674
  --cirth-card-sectioning-background-color: oklch(from var(--cirth-canvas) calc(l + .009) c h);
@@ -2660,14 +2677,14 @@ details summary[role="button"]:not(.outline):after {
2660
2677
  --cirth-form-element-active-background-color: var(--cirth-canvas);
2661
2678
  --cirth-dropdown-background-color: var(--cirth-card-background-color);
2662
2679
  --cirth-popover-background-color: var(--cirth-card-background-color);
2663
- --cirth-secondary-background: oklch(48.3% .03 280);
2664
- --cirth-secondary-border: var(--cirth-secondary-background);
2665
- --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
2666
- --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
2667
- --cirth-secondary-inverse: oklch(100% 0 0);
2668
- --cirth-contrast-border: var(--cirth-contrast-background);
2669
- --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
2670
- --cirth-contrast-hover-underline: var(--cirth-secondary-hover);
2680
+ --cirth-secondary-surface: oklch(48.3% .03 280);
2681
+ --cirth-secondary-border: var(--cirth-secondary-surface);
2682
+ --cirth-secondary-border-active: var(--cirth-secondary-surface-active);
2683
+ --cirth-secondary-underline-active: var(--cirth-secondary-active);
2684
+ --cirth-secondary-on-surface: oklch(100% 0 0);
2685
+ --cirth-contrast-border: var(--cirth-contrast-surface);
2686
+ --cirth-contrast-border-active: var(--cirth-contrast-surface-active);
2687
+ --cirth-contrast-underline-active: var(--cirth-secondary-active);
2671
2688
  --cirth-mark-background-color: color-mix(in oklab,
2672
2689
  var(--cirth-primary) 18%,
2673
2690
  var(--cirth-canvas));
@@ -2692,12 +2709,12 @@ details summary[role="button"]:not(.outline):after {
2692
2709
  --cirth-form-element-valid-active-border-color: var(--cirth-success-active);
2693
2710
  --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
2694
2711
  --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
2695
- --cirth-switch-checked-background-color: var(--cirth-primary-background);
2696
- --cirth-switch-color: var(--cirth-primary-inverse);
2712
+ --cirth-switch-checked-background-color: var(--cirth-primary-surface);
2713
+ --cirth-switch-color: var(--cirth-primary-on-surface);
2697
2714
  --cirth-range-thumb-border-color: var(--cirth-background-color);
2698
- --cirth-range-thumb-color: var(--cirth-secondary);
2699
- --cirth-range-thumb-active-color: var(--cirth-primary-background);
2700
- --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
2715
+ --cirth-range-thumb-color: var(--cirth-secondary-text);
2716
+ --cirth-range-thumb-active-color: var(--cirth-primary-surface);
2717
+ --cirth-accordion-active-summary-color: var(--cirth-primary-active);
2701
2718
  --cirth-accordion-close-summary-color: var(--cirth-ink);
2702
2719
  --cirth-accordion-open-summary-color: var(--cirth-ink);
2703
2720
  --cirth-card-border-color: color-mix(in oklab,
@@ -2711,7 +2728,7 @@ details summary[role="button"]:not(.outline):after {
2711
2728
  --cirth-meter-optimum-color: var(--cirth-success);
2712
2729
  --cirth-meter-suboptimum-color: var(--cirth-warning);
2713
2730
  --cirth-meter-even-less-good-color: var(--cirth-error);
2714
- --cirth-progress-color: var(--cirth-primary-background);
2731
+ --cirth-progress-color: var(--cirth-primary-surface);
2715
2732
  --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(103, 105, 125)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
2716
2733
  --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(103, 105, 125)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
2717
2734
  --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(103, 105, 125)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
@@ -2735,20 +2752,21 @@ details summary[role="button"]:not(.outline):after {
2735
2752
  --cirth-warning-border: var(--cirth-warning);
2736
2753
  --cirth-warning-active: oklch(from var(--cirth-warning) calc(l * 1.124) calc(c * 1.121) h);
2737
2754
  --cirth-warning-surface: oklch(from var(--cirth-warning) 35.3% .063 h);
2738
- --cirth-primary-background: color-mix(in oklch,
2755
+ --cirth-primary-text: var(--cirth-primary);
2756
+ --cirth-primary-surface: color-mix(in oklch,
2739
2757
  var(--cirth-primary) 75.2%,
2740
2758
  black);
2741
- --cirth-primary-border: var(--cirth-primary-background);
2759
+ --cirth-primary-border: var(--cirth-primary-surface);
2742
2760
  --cirth-primary-underline: oklch(from var(--cirth-primary) l c h / 50%);
2743
- --cirth-primary-hover: oklch(from var(--cirth-primary) calc(l * 1.124) calc(c * 1.132) h);
2744
- --cirth-primary-hover-background: color-mix(in oklch,
2761
+ --cirth-primary-active: oklch(from var(--cirth-primary) calc(l * 1.124) calc(c * 1.132) h);
2762
+ --cirth-primary-surface-active: color-mix(in oklch,
2745
2763
  var(--cirth-primary) 72%,
2746
2764
  black);
2747
- --cirth-primary-hover-border: var(--cirth-primary-hover-background);
2748
- --cirth-primary-hover-underline: var(--cirth-primary-hover);
2765
+ --cirth-primary-border-active: var(--cirth-primary-surface-active);
2766
+ --cirth-primary-underline-active: var(--cirth-primary-active);
2749
2767
  --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 80%);
2750
2768
  --cirth-text-selection-color: oklch(from var(--cirth-primary) calc(l * 1.065) c h / 18.75%);
2751
- --cirth-primary-inverse: oklch(100% 0 0);
2769
+ --cirth-primary-on-surface: oklch(100% 0 0);
2752
2770
  --cirth-code-background-color: oklch(from var(--cirth-canvas) calc(l - .02) c h);
2753
2771
  --cirth-card-sectioning-background-color: oklch(from var(--cirth-canvas) calc(l + .025) c h);
2754
2772
  --cirth-form-element-background-color: oklch(from var(--cirth-canvas) calc(l - .008) c h);
@@ -2756,14 +2774,14 @@ details summary[role="button"]:not(.outline):after {
2756
2774
  --cirth-form-element-active-background-color: var(--cirth-canvas);
2757
2775
  --cirth-dropdown-background-color: var(--cirth-card-background-color);
2758
2776
  --cirth-popover-background-color: var(--cirth-card-background-color);
2759
- --cirth-secondary-background: oklch(48.3% .03 280);
2760
- --cirth-secondary-border: var(--cirth-secondary-background);
2761
- --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
2762
- --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
2763
- --cirth-secondary-inverse: oklch(100% 0 0);
2764
- --cirth-contrast-border: var(--cirth-contrast-background);
2765
- --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
2766
- --cirth-contrast-hover-underline: var(--cirth-contrast-hover);
2777
+ --cirth-secondary-surface: oklch(48.3% .03 280);
2778
+ --cirth-secondary-border: var(--cirth-secondary-surface);
2779
+ --cirth-secondary-border-active: var(--cirth-secondary-surface-active);
2780
+ --cirth-secondary-underline-active: var(--cirth-secondary-active);
2781
+ --cirth-secondary-on-surface: oklch(100% 0 0);
2782
+ --cirth-contrast-border: var(--cirth-contrast-surface);
2783
+ --cirth-contrast-border-active: var(--cirth-contrast-surface-active);
2784
+ --cirth-contrast-underline-active: var(--cirth-contrast-active);
2767
2785
  --cirth-mark-background-color: color-mix(in oklab,
2768
2786
  var(--cirth-primary) 24%,
2769
2787
  var(--cirth-canvas));
@@ -2788,12 +2806,12 @@ details summary[role="button"]:not(.outline):after {
2788
2806
  --cirth-form-element-valid-active-border-color: var(--cirth-success-active);
2789
2807
  --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
2790
2808
  --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
2791
- --cirth-switch-checked-background-color: var(--cirth-primary-background);
2792
- --cirth-switch-color: var(--cirth-primary-inverse);
2809
+ --cirth-switch-checked-background-color: var(--cirth-primary-surface);
2810
+ --cirth-switch-color: var(--cirth-primary-on-surface);
2793
2811
  --cirth-range-thumb-border-color: var(--cirth-background-color);
2794
- --cirth-range-thumb-color: var(--cirth-secondary);
2795
- --cirth-range-thumb-active-color: var(--cirth-primary-background);
2796
- --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
2812
+ --cirth-range-thumb-color: var(--cirth-secondary-text);
2813
+ --cirth-range-thumb-active-color: var(--cirth-primary-surface);
2814
+ --cirth-accordion-active-summary-color: var(--cirth-primary-active);
2797
2815
  --cirth-accordion-close-summary-color: var(--cirth-ink);
2798
2816
  --cirth-accordion-open-summary-color: var(--cirth-ink);
2799
2817
  --cirth-card-border-color: color-mix(in oklab,
@@ -2807,7 +2825,7 @@ details summary[role="button"]:not(.outline):after {
2807
2825
  --cirth-meter-optimum-color: var(--cirth-success);
2808
2826
  --cirth-meter-suboptimum-color: var(--cirth-warning);
2809
2827
  --cirth-meter-even-less-good-color: var(--cirth-error);
2810
- --cirth-progress-color: var(--cirth-primary);
2828
+ --cirth-progress-color: var(--cirth-primary-text);
2811
2829
  --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
2812
2830
  --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
2813
2831
  --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
@@ -2835,20 +2853,21 @@ details summary[role="button"]:not(.outline):after {
2835
2853
  --cirth-warning-border: var(--cirth-warning);
2836
2854
  --cirth-warning-active: oklch(from var(--cirth-warning) calc(l * 1.124) calc(c * 1.121) h);
2837
2855
  --cirth-warning-surface: oklch(from var(--cirth-warning) 35.3% .063 h);
2838
- --cirth-primary-background: color-mix(in oklch,
2856
+ --cirth-primary-text: var(--cirth-primary);
2857
+ --cirth-primary-surface: color-mix(in oklch,
2839
2858
  var(--cirth-primary) 75.2%,
2840
2859
  black);
2841
- --cirth-primary-border: var(--cirth-primary-background);
2860
+ --cirth-primary-border: var(--cirth-primary-surface);
2842
2861
  --cirth-primary-underline: oklch(from var(--cirth-primary) l c h / 50%);
2843
- --cirth-primary-hover: oklch(from var(--cirth-primary) calc(l * 1.124) calc(c * 1.132) h);
2844
- --cirth-primary-hover-background: color-mix(in oklch,
2862
+ --cirth-primary-active: oklch(from var(--cirth-primary) calc(l * 1.124) calc(c * 1.132) h);
2863
+ --cirth-primary-surface-active: color-mix(in oklch,
2845
2864
  var(--cirth-primary) 72%,
2846
2865
  black);
2847
- --cirth-primary-hover-border: var(--cirth-primary-hover-background);
2848
- --cirth-primary-hover-underline: var(--cirth-primary-hover);
2866
+ --cirth-primary-border-active: var(--cirth-primary-surface-active);
2867
+ --cirth-primary-underline-active: var(--cirth-primary-active);
2849
2868
  --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 80%);
2850
2869
  --cirth-text-selection-color: oklch(from var(--cirth-primary) calc(l * 1.065) c h / 18.75%);
2851
- --cirth-primary-inverse: oklch(100% 0 0);
2870
+ --cirth-primary-on-surface: oklch(100% 0 0);
2852
2871
  --cirth-code-background-color: oklch(from var(--cirth-canvas) calc(l - .02) c h);
2853
2872
  --cirth-card-sectioning-background-color: oklch(from var(--cirth-canvas) calc(l + .025) c h);
2854
2873
  --cirth-form-element-background-color: oklch(from var(--cirth-canvas) calc(l - .008) c h);
@@ -2856,14 +2875,14 @@ details summary[role="button"]:not(.outline):after {
2856
2875
  --cirth-form-element-active-background-color: var(--cirth-canvas);
2857
2876
  --cirth-dropdown-background-color: var(--cirth-card-background-color);
2858
2877
  --cirth-popover-background-color: var(--cirth-card-background-color);
2859
- --cirth-secondary-background: oklch(48.3% .03 280);
2860
- --cirth-secondary-border: var(--cirth-secondary-background);
2861
- --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
2862
- --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
2863
- --cirth-secondary-inverse: oklch(100% 0 0);
2864
- --cirth-contrast-border: var(--cirth-contrast-background);
2865
- --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
2866
- --cirth-contrast-hover-underline: var(--cirth-contrast-hover);
2878
+ --cirth-secondary-surface: oklch(48.3% .03 280);
2879
+ --cirth-secondary-border: var(--cirth-secondary-surface);
2880
+ --cirth-secondary-border-active: var(--cirth-secondary-surface-active);
2881
+ --cirth-secondary-underline-active: var(--cirth-secondary-active);
2882
+ --cirth-secondary-on-surface: oklch(100% 0 0);
2883
+ --cirth-contrast-border: var(--cirth-contrast-surface);
2884
+ --cirth-contrast-border-active: var(--cirth-contrast-surface-active);
2885
+ --cirth-contrast-underline-active: var(--cirth-contrast-active);
2867
2886
  --cirth-mark-background-color: color-mix(in oklab,
2868
2887
  var(--cirth-primary) 24%,
2869
2888
  var(--cirth-canvas));
@@ -2888,12 +2907,12 @@ details summary[role="button"]:not(.outline):after {
2888
2907
  --cirth-form-element-valid-active-border-color: var(--cirth-success-active);
2889
2908
  --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
2890
2909
  --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
2891
- --cirth-switch-checked-background-color: var(--cirth-primary-background);
2892
- --cirth-switch-color: var(--cirth-primary-inverse);
2910
+ --cirth-switch-checked-background-color: var(--cirth-primary-surface);
2911
+ --cirth-switch-color: var(--cirth-primary-on-surface);
2893
2912
  --cirth-range-thumb-border-color: var(--cirth-background-color);
2894
- --cirth-range-thumb-color: var(--cirth-secondary);
2895
- --cirth-range-thumb-active-color: var(--cirth-primary-background);
2896
- --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
2913
+ --cirth-range-thumb-color: var(--cirth-secondary-text);
2914
+ --cirth-range-thumb-active-color: var(--cirth-primary-surface);
2915
+ --cirth-accordion-active-summary-color: var(--cirth-primary-active);
2897
2916
  --cirth-accordion-close-summary-color: var(--cirth-ink);
2898
2917
  --cirth-accordion-open-summary-color: var(--cirth-ink);
2899
2918
  --cirth-card-border-color: color-mix(in oklab,
@@ -2907,7 +2926,7 @@ details summary[role="button"]:not(.outline):after {
2907
2926
  --cirth-meter-optimum-color: var(--cirth-success);
2908
2927
  --cirth-meter-suboptimum-color: var(--cirth-warning);
2909
2928
  --cirth-meter-even-less-good-color: var(--cirth-error);
2910
- --cirth-progress-color: var(--cirth-primary);
2929
+ --cirth-progress-color: var(--cirth-primary-text);
2911
2930
  --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
2912
2931
  --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
2913
2932
  --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
@@ -2921,7 +2940,7 @@ details summary[role="button"]:not(.outline):after {
2921
2940
  }
2922
2941
 
2923
2942
  progress, [type="checkbox"], [type="radio"], [type="range"] {
2924
- accent-color: var(--cirth-primary);
2943
+ accent-color: var(--cirth-primary-text);
2925
2944
  }
2926
2945
 
2927
2946
  @media (prefers-contrast: more) {
@@ -2934,7 +2953,7 @@ progress, [type="checkbox"], [type="radio"], [type="range"] {
2934
2953
  --cirth-h5-color: var(--cirth-color);
2935
2954
  --cirth-h6-color: var(--cirth-color);
2936
2955
  --cirth-muted-color: oklch(39.7% .028 280);
2937
- --cirth-secondary: oklch(39.7% .028 280);
2956
+ --cirth-secondary-text: oklch(39.7% .028 280);
2938
2957
  --cirth-code-color: oklch(35.3% .027 280);
2939
2958
  --cirth-link-visited-color: oklch(35.3% .027 280);
2940
2959
  --cirth-muted-border-color: oklch(57% .032 280);
@@ -2946,10 +2965,10 @@ progress, [type="checkbox"], [type="radio"], [type="range"] {
2946
2965
  --cirth-form-element-invalid-border-color: oklch(48.3% .165 22);
2947
2966
  --cirth-form-element-valid-border-color: oklch(48.3% .106 153);
2948
2967
  --cirth-primary: oklch(39.7% .081 44);
2949
- --cirth-primary-hover: oklch(31% .063 44);
2968
+ --cirth-primary-active: oklch(31% .063 44);
2950
2969
  --cirth-primary-underline: var(--cirth-primary);
2951
- --cirth-secondary-underline: var(--cirth-secondary);
2952
- --cirth-contrast-underline: var(--cirth-contrast);
2970
+ --cirth-secondary-underline: var(--cirth-secondary-text);
2971
+ --cirth-contrast-underline: var(--cirth-contrast-text);
2953
2972
  --cirth-primary-focus: oklch(48.3% .098 44);
2954
2973
  --cirth-secondary-focus: oklch(48.3% .03 280);
2955
2974
  --cirth-contrast-focus: oklch(48.3% .03 280);
@@ -2976,7 +2995,7 @@ progress, [type="checkbox"], [type="radio"], [type="range"] {
2976
2995
  --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
2977
2996
  --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
2978
2997
  --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
2979
- --cirth-secondary: oklch(78.7% .014 280);
2998
+ --cirth-secondary-text: oklch(78.7% .014 280);
2980
2999
  --cirth-code-color: oklch(83% .011 280);
2981
3000
  --cirth-link-visited-color: oklch(78.7% .014 280);
2982
3001
  --cirth-muted-border-color: oklch(57% .032 280);
@@ -2985,12 +3004,12 @@ progress, [type="checkbox"], [type="radio"], [type="range"] {
2985
3004
  --cirth-form-element-invalid-border-color: oklch(78.7% .105 22);
2986
3005
  --cirth-form-element-valid-border-color: oklch(78.7% .172 153);
2987
3006
  --cirth-primary: oklch(78.7% .092 44);
2988
- --cirth-primary-hover: oklch(87.3% .051 44);
2989
- --cirth-primary-background: oklch(44% .09 44);
2990
- --cirth-primary-hover-background: oklch(39.7% .081 44);
3007
+ --cirth-primary-active: oklch(87.3% .051 44);
3008
+ --cirth-primary-surface: oklch(44% .09 44);
3009
+ --cirth-primary-surface-active: oklch(39.7% .081 44);
2991
3010
  --cirth-primary-underline: var(--cirth-primary);
2992
- --cirth-secondary-underline: var(--cirth-secondary);
2993
- --cirth-contrast-underline: var(--cirth-contrast);
3011
+ --cirth-secondary-underline: var(--cirth-secondary-text);
3012
+ --cirth-contrast-underline: var(--cirth-contrast-text);
2994
3013
  --cirth-primary-focus: oklch(70% .141 44);
2995
3014
  --cirth-secondary-focus: oklch(70% .021 280);
2996
3015
  --cirth-contrast-focus: oklch(87.3% .007 280);
@@ -3017,7 +3036,7 @@ progress, [type="checkbox"], [type="radio"], [type="range"] {
3017
3036
  --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
3018
3037
  --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
3019
3038
  --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
3020
- --cirth-secondary: oklch(78.7% .014 280);
3039
+ --cirth-secondary-text: oklch(78.7% .014 280);
3021
3040
  --cirth-code-color: oklch(83% .011 280);
3022
3041
  --cirth-link-visited-color: oklch(78.7% .014 280);
3023
3042
  --cirth-muted-border-color: oklch(57% .032 280);
@@ -3026,12 +3045,12 @@ progress, [type="checkbox"], [type="radio"], [type="range"] {
3026
3045
  --cirth-form-element-invalid-border-color: oklch(78.7% .105 22);
3027
3046
  --cirth-form-element-valid-border-color: oklch(78.7% .172 153);
3028
3047
  --cirth-primary: oklch(78.7% .092 44);
3029
- --cirth-primary-hover: oklch(87.3% .051 44);
3030
- --cirth-primary-background: oklch(44% .09 44);
3031
- --cirth-primary-hover-background: oklch(39.7% .081 44);
3048
+ --cirth-primary-active: oklch(87.3% .051 44);
3049
+ --cirth-primary-surface: oklch(44% .09 44);
3050
+ --cirth-primary-surface-active: oklch(39.7% .081 44);
3032
3051
  --cirth-primary-underline: var(--cirth-primary);
3033
- --cirth-secondary-underline: var(--cirth-secondary);
3034
- --cirth-contrast-underline: var(--cirth-contrast);
3052
+ --cirth-secondary-underline: var(--cirth-secondary-text);
3053
+ --cirth-contrast-underline: var(--cirth-contrast-text);
3035
3054
  --cirth-primary-focus: oklch(70% .141 44);
3036
3055
  --cirth-secondary-focus: oklch(70% .021 280);
3037
3056
  --cirth-contrast-focus: oklch(87.3% .007 280);