@cirthcss/cirth 0.12.0 → 0.14.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 (26) hide show
  1. package/README.md +21 -13
  2. package/dist/cirth.classless.css +307 -515
  3. package/dist/cirth.classless.min.css +1 -1
  4. package/dist/cirth.classless.scoped.css +307 -507
  5. package/dist/cirth.classless.scoped.min.css +1 -1
  6. package/dist/cirth.css +390 -525
  7. package/dist/cirth.min.css +1 -1
  8. package/dist/cirth.print.classless.css +127 -0
  9. package/dist/cirth.print.classless.min.css +1 -0
  10. package/dist/cirth.print.classless.scoped.css +119 -0
  11. package/dist/cirth.print.classless.scoped.min.css +1 -0
  12. package/dist/cirth.print.css +133 -0
  13. package/dist/cirth.print.min.css +1 -0
  14. package/dist/cirth.print.scoped.css +125 -0
  15. package/dist/cirth.print.scoped.min.css +1 -0
  16. package/dist/cirth.scoped.css +390 -517
  17. package/dist/cirth.scoped.min.css +1 -1
  18. package/dist/presets/plain.css +16 -0
  19. package/dist/presets/plain.min.css +1 -0
  20. package/dist/presets/playroom.css +38 -0
  21. package/dist/presets/playroom.min.css +1 -0
  22. package/package.json +7 -4
  23. package/dist/presets/cobalt.css +0 -95
  24. package/dist/presets/cobalt.min.css +0 -1
  25. package/dist/presets/coral.css +0 -103
  26. package/dist/presets/coral.min.css +0 -1
package/dist/cirth.classless.scoped.css CHANGED
@@ -225,7 +225,7 @@
225
225
  }
226
226
 
227
227
  .cirth button, .cirth [type="submit"], .cirth [type="reset"], .cirth [type="button"] {
228
- -webkit-appearance: button;
228
+ appearance: auto;
229
229
  }
230
230
 
231
231
  .cirth button, .cirth [type="submit"], .cirth [type="reset"], .cirth [type="button"], .cirth [role="button"] {
@@ -234,7 +234,7 @@
234
234
  --cirth-color: var(--cirth-primary-inverse);
235
235
  --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 #0000);
236
236
  max-width: 100%;
237
- min-block-size: calc(var(--cirth-size-4) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
237
+ min-block-size: calc(var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
238
238
  padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
239
239
  border: var(--cirth-border-width) solid var(--cirth-border-color);
240
240
  border-radius: var(--cirth-border-radius);
@@ -259,7 +259,7 @@
259
259
  --cirth-color: var(--cirth-primary-inverse);
260
260
  --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 #0000);
261
261
  max-width: 100%;
262
- min-block-size: calc(var(--cirth-size-4) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
262
+ min-block-size: calc(var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
263
263
  padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
264
264
  border: var(--cirth-border-width) solid var(--cirth-border-color);
265
265
  border-radius: var(--cirth-border-radius);
@@ -439,7 +439,9 @@
439
439
  }
440
440
 
441
441
  .cirth code, .cirth kbd, .cirth samp {
442
+ max-inline-size: 100%;
442
443
  padding: var(--cirth-space-1) var(--cirth-space-2);
444
+ overflow-wrap: anywhere;
443
445
  display: inline-block;
444
446
  }
445
447
 
@@ -513,7 +515,7 @@
513
515
  }
514
516
 
515
517
  .cirth [type="search"] {
516
- -webkit-appearance: textfield;
518
+ appearance: textfield;
517
519
  outline-offset: -2px;
518
520
  }
519
521
 
@@ -522,7 +524,7 @@
522
524
  }
523
525
 
524
526
  .cirth ::file-selector-button {
525
- -webkit-appearance: button;
527
+ appearance: auto;
526
528
  font: inherit;
527
529
  }
528
530
 
@@ -536,11 +538,11 @@
536
538
  }
537
539
 
538
540
  .cirth input:not([type="checkbox"], [type="radio"], [type="range"]) {
539
- height: calc(var(--cirth-size-4) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
541
+ height: calc(var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
540
542
  }
541
543
 
542
544
  .cirth select, .cirth textarea {
543
- min-block-size: calc(var(--cirth-size-4) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
545
+ min-block-size: calc(var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
544
546
  }
545
547
 
546
548
  .cirth fieldset {
@@ -594,6 +596,12 @@
594
596
  --cirth-border-color: var(--cirth-form-element-active-border-color);
595
597
  }
596
598
 
599
+ .cirth input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="range"], [type="file"], [readonly]):hover:not(:active, :focus, [disabled], [aria-invalid]), .cirth :where(select, textarea):not([readonly]):hover:not(:active, :focus, [disabled], [aria-invalid]) {
600
+ --cirth-border-color: color-mix(in oklch,
601
+ var(--cirth-form-element-border-color) 65%,
602
+ var(--cirth-color));
603
+ }
604
+
597
605
  .cirth input:not([type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [readonly]):focus, .cirth :where(select, textarea):not([readonly]):focus {
598
606
  --cirth-box-shadow: 0 0 0 var(--cirth-outline-width)
599
607
  var(--cirth-form-element-focus-color);
@@ -612,7 +620,7 @@
612
620
  .cirth :where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"]):is([aria-invalid], :user-invalid:not([aria-invalid], [type="range"]):not(select:focus)) {
613
621
  padding-inline: var(--cirth-form-element-spacing-horizontal) calc(var(--cirth-form-element-spacing-horizontal) + var(--cirth-space-6));
614
622
  background-position: center right var(--cirth-space-3);
615
- background-size: var(--cirth-size-4) auto;
623
+ background-size: var(--cirth-font-size-md) auto;
616
624
  background-repeat: no-repeat;
617
625
  }
618
626
 
@@ -671,7 +679,7 @@
671
679
  padding-inline: var(--cirth-form-element-spacing-horizontal) calc(var(--cirth-form-element-spacing-horizontal) + var(--cirth-space-6));
672
680
  background-image: var(--cirth-icon-chevron);
673
681
  background-position: center right var(--cirth-space-3);
674
- background-size: var(--cirth-size-4) auto;
682
+ background-size: var(--cirth-font-size-md) auto;
675
683
  background-repeat: no-repeat;
676
684
  }
677
685
 
@@ -694,11 +702,11 @@
694
702
  }
695
703
 
696
704
  .cirth textarea:is([aria-invalid], :user-invalid:not([aria-invalid], [type="range"]):not(select:focus)) {
697
- --cirth-icon-height: calc(var(--cirth-size-4) * var(--cirth-line-height) +
705
+ --cirth-icon-height: calc(var(--cirth-font-size-md) * var(--cirth-line-height) +
698
706
  var(--cirth-form-element-spacing-vertical) * 2 +
699
707
  var(--cirth-border-width) * 2);
700
708
  background-position: top right var(--cirth-space-3);
701
- background-size: var(--cirth-size-4) var(--cirth-icon-height);
709
+ background-size: var(--cirth-font-size-md) var(--cirth-icon-height);
702
710
  }
703
711
 
704
712
  .cirth :where(input, select, textarea, fieldset) + small {
@@ -740,10 +748,6 @@
740
748
  .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 {
741
749
  --cirth-background-color: var(--cirth-primary-background);
742
750
  --cirth-border-color: var(--cirth-primary-border);
743
- background-image: var(--cirth-icon-checkbox);
744
- background-position: center;
745
- background-repeat: no-repeat;
746
- background-size: .9em;
747
751
  }
748
752
 
749
753
  .cirth [type="checkbox"] ~ label, .cirth [type="radio"] ~ label {
@@ -756,13 +760,34 @@
756
760
  margin-inline-end: 1em;
757
761
  }
758
762
 
759
- .cirth [type="checkbox"]:indeterminate {
763
+ .cirth [type="checkbox"]:not([role="switch"]):checked:before, .cirth [type="checkbox"]:not([role="switch"]):indeterminate:before {
764
+ background-color: var(--cirth-primary-inverse);
765
+ content: "";
766
+ width: 100%;
767
+ height: 100%;
768
+ display: block;
769
+ mask-position: center;
770
+ mask-size: .9em;
771
+ mask-repeat: no-repeat;
772
+ }
773
+
774
+ @media (forced-colors: active) {
775
+ .cirth [type="checkbox"]:not([role="switch"]):checked:before, .cirth [type="checkbox"]:not([role="switch"]):indeterminate:before {
776
+ background-color: canvastext;
777
+ }
778
+ }
779
+
780
+ .cirth [type="checkbox"]:not([role="switch"]):checked:before {
781
+ mask-image: var(--cirth-icon-checkbox);
782
+ }
783
+
784
+ .cirth [type="checkbox"]:not([role="switch"]):indeterminate {
760
785
  --cirth-background-color: var(--cirth-primary-background);
761
786
  --cirth-border-color: var(--cirth-primary-border);
762
- background-image: var(--cirth-icon-minus);
763
- background-position: center;
764
- background-repeat: no-repeat;
765
- background-size: .9em;
787
+ }
788
+
789
+ .cirth [type="checkbox"]:not([role="switch"]):indeterminate:before {
790
+ mask-image: var(--cirth-icon-minus);
766
791
  }
767
792
 
768
793
  .cirth [type="radio"] {
@@ -771,7 +796,6 @@
771
796
 
772
797
  .cirth [type="radio"]:checked, .cirth [type="radio"]:checked:active, .cirth [type="radio"]:checked:focus {
773
798
  --cirth-background-color: var(--cirth-primary-inverse);
774
- background-image: none;
775
799
  border-width: .42em;
776
800
  }
777
801
 
@@ -809,7 +833,6 @@
809
833
  .cirth [type="checkbox"][role="switch"]:checked {
810
834
  --cirth-background-color: var(--cirth-switch-checked-background-color);
811
835
  --cirth-border-color: var(--cirth-switch-checked-background-color);
812
- background-image: none;
813
836
  }
814
837
 
815
838
  .cirth [type="checkbox"][role="switch"]:checked:before {
@@ -856,7 +879,7 @@
856
879
 
857
880
  .cirth input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]):is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
858
881
  --cirth-icon-position: var(--cirth-space-3);
859
- --cirth-icon-width: var(--cirth-size-4);
882
+ --cirth-icon-width: var(--cirth-font-size-md);
860
883
  min-width: 0;
861
884
  background-image: var(--cirth-icon-date);
862
885
  background-position: center right var(--cirth-icon-position);
@@ -1039,7 +1062,7 @@
1039
1062
  }
1040
1063
 
1041
1064
  .cirth details summary {
1042
- line-height: var(--cirth-size-4);
1065
+ line-height: var(--cirth-font-size-md);
1043
1066
  cursor: pointer;
1044
1067
  transition: color var(--cirth-transition);
1045
1068
  list-style-type: none;
@@ -1058,18 +1081,28 @@
1058
1081
  }
1059
1082
 
1060
1083
  .cirth details summary:after {
1061
- width: var(--cirth-size-4);
1062
- height: var(--cirth-size-4);
1084
+ width: var(--cirth-font-size-md);
1085
+ height: var(--cirth-font-size-md);
1063
1086
  float: right;
1064
- background-image: var(--cirth-icon-chevron);
1065
- background-position: 100%;
1066
- background-size: var(--cirth-size-4) auto;
1067
- content: "";
1068
- transition: transform var(--cirth-transition);
1069
- background-repeat: no-repeat;
1087
+ background-color: var(--cirth-muted-color);
1088
+ mask-image: var(--cirth-icon-chevron);
1089
+ mask-position: 100%;
1090
+ mask-size: var(--cirth-font-size-md) auto;
1070
1091
  margin-inline-start: calc(var(--cirth-spacing, var(--cirth-space-4)) * .5);
1071
1092
  display: block;
1072
1093
  transform: rotate(-90deg);
1094
+ mask-repeat: no-repeat;
1095
+ }
1096
+
1097
+ @media (forced-colors: active) {
1098
+ .cirth details summary:after {
1099
+ background-color: canvastext;
1100
+ }
1101
+ }
1102
+
1103
+ .cirth details summary:after {
1104
+ content: "";
1105
+ transition: transform var(--cirth-transition);
1073
1106
  }
1074
1107
 
1075
1108
  .cirth details summary:focus {
@@ -1092,7 +1125,7 @@
1092
1125
  }
1093
1126
 
1094
1127
  .cirth details summary[role="button"]:after {
1095
- height: calc(var(--cirth-size-4) * var(--cirth-line-height, var(--cirth-line-height-normal)));
1128
+ height: calc(var(--cirth-font-size-md) * var(--cirth-line-height, var(--cirth-line-height-normal)));
1096
1129
  }
1097
1130
 
1098
1131
  .cirth details[open] > summary {
@@ -1190,12 +1223,7 @@
1190
1223
  z-index: 2;
1191
1224
  }
1192
1225
 
1193
- .cirth [role="search"] > :has( + small:last-child) {
1194
- border-start-end-radius: var(--cirth-border-radius);
1195
- border-end-end-radius: var(--cirth-border-radius);
1196
- }
1197
-
1198
- .cirth [role="group"]:not(fieldset) > :has( + small:last-child) {
1226
+ .cirth [role="search"] > :has( + small:last-child), .cirth [role="group"]:not(fieldset) > :has( + small:last-child) {
1199
1227
  border-start-end-radius: var(--cirth-border-radius);
1200
1228
  border-end-end-radius: var(--cirth-border-radius);
1201
1229
  }
@@ -1208,98 +1236,27 @@
1208
1236
  width: auto;
1209
1237
  }
1210
1238
 
1211
- @supports selector(:has(*)) {
1212
- .cirth [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
1213
- --cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-button);
1214
- }
1215
-
1216
- .cirth [role="group"]:not(fieldset):has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
1217
- --cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-button);
1218
- }
1219
-
1220
- .cirth [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"], [aria-invalid]) {
1221
- border-color: #0000;
1222
- }
1223
-
1224
- .cirth [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select:not([aria-invalid]) {
1225
- border-color: #0000;
1226
- }
1227
-
1228
- .cirth [role="group"]:not(fieldset):has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"], [aria-invalid]) {
1229
- border-color: #0000;
1230
- }
1231
-
1232
- .cirth [role="group"]:not(fieldset):has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select:not([aria-invalid]) {
1233
- border-color: #0000;
1234
- }
1235
-
1236
- .cirth [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) {
1237
- --cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-input);
1238
- }
1239
-
1240
- .cirth [role="group"]:not(fieldset):has(input:not([type="submit"], [type="button"]):focus, select:focus) {
1241
- --cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-input);
1242
- }
1243
-
1244
- .cirth [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button {
1245
- --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1246
- var(--cirth-primary-border);
1247
- --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1248
- var(--cirth-primary-hover-border);
1249
- }
1250
-
1251
- .cirth [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"] {
1252
- --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1253
- var(--cirth-primary-border);
1254
- --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1255
- var(--cirth-primary-hover-border);
1256
- }
1257
-
1258
- .cirth [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"] {
1259
- --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1260
- var(--cirth-primary-border);
1261
- --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1262
- var(--cirth-primary-hover-border);
1263
- }
1264
-
1265
- .cirth [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"] {
1266
- --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1267
- var(--cirth-primary-border);
1268
- --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1269
- var(--cirth-primary-hover-border);
1270
- }
1271
-
1272
- .cirth [role="group"]:not(fieldset):has(input:not([type="submit"], [type="button"]):focus, select:focus) button {
1273
- --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1274
- var(--cirth-primary-border);
1275
- --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1276
- var(--cirth-primary-hover-border);
1277
- }
1239
+ .cirth [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus), .cirth [role="group"]:not(fieldset):has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
1240
+ --cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-button);
1241
+ }
1278
1242
 
1279
- .cirth [role="group"]:not(fieldset):has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"] {
1280
- --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1281
- var(--cirth-primary-border);
1282
- --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1283
- var(--cirth-primary-hover-border);
1284
- }
1243
+ .cirth [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"], [aria-invalid]), .cirth [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select:not([aria-invalid]), .cirth [role="group"]:not(fieldset):has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"], [aria-invalid]), .cirth [role="group"]:not(fieldset):has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select:not([aria-invalid]) {
1244
+ border-color: #0000;
1245
+ }
1285
1246
 
1286
- .cirth [role="group"]:not(fieldset):has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"] {
1287
- --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1288
- var(--cirth-primary-border);
1289
- --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1290
- var(--cirth-primary-hover-border);
1291
- }
1247
+ .cirth [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus), .cirth [role="group"]:not(fieldset):has(input:not([type="submit"], [type="button"]):focus, select:focus) {
1248
+ --cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-input);
1249
+ }
1292
1250
 
1293
- .cirth [role="group"]:not(fieldset):has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"] {
1294
- --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1295
- var(--cirth-primary-border);
1296
- --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1297
- var(--cirth-primary-hover-border);
1298
- }
1251
+ .cirth [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button, .cirth [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"], .cirth [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"], .cirth [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"], .cirth [role="group"]:not(fieldset):has(input:not([type="submit"], [type="button"]):focus, select:focus) button, .cirth [role="group"]:not(fieldset):has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"], .cirth [role="group"]:not(fieldset):has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"], .cirth [role="group"]:not(fieldset):has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"] {
1252
+ --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1253
+ var(--cirth-primary-border);
1254
+ --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1255
+ var(--cirth-primary-hover-border);
1256
+ }
1299
1257
 
1300
- .cirth [role="search"] button:focus, .cirth [role="search"] [type="submit"]:focus, .cirth [role="search"] [type="reset"]:focus, .cirth [role="search"] [type="button"]:focus, .cirth [role="search"] [role="button"]:focus, .cirth [role="group"]:not(fieldset) button:focus, .cirth [role="group"]:not(fieldset) [type="submit"]:focus, .cirth [role="group"]:not(fieldset) [type="reset"]:focus, .cirth [role="group"]:not(fieldset) [type="button"]:focus, .cirth [role="group"]:not(fieldset) [role="button"]:focus {
1301
- box-shadow: none;
1302
- }
1258
+ .cirth [role="search"] button:focus, .cirth [role="search"] [type="submit"]:focus, .cirth [role="search"] [type="reset"]:focus, .cirth [role="search"] [type="button"]:focus, .cirth [role="search"] [role="button"]:focus, .cirth [role="group"]:not(fieldset) button:focus, .cirth [role="group"]:not(fieldset) [type="submit"]:focus, .cirth [role="group"]:not(fieldset) [type="reset"]:focus, .cirth [role="group"]:not(fieldset) [type="button"]:focus, .cirth [role="group"]:not(fieldset) [role="button"]:focus {
1259
+ box-shadow: none;
1303
1260
  }
1304
1261
 
1305
1262
  .cirth [role="search"] > :not([hidden], input[type="hidden"]):nth-child(1 of :not([hidden], input[type="hidden"])) {
@@ -1307,32 +1264,20 @@
1307
1264
  border-end-start-radius: var(--cirth-radius-pill);
1308
1265
  }
1309
1266
 
1310
- .cirth [role="search"] > :not([hidden], input[type="hidden"]):nth-last-child(1 of :not([hidden], input[type="hidden"])) {
1267
+ .cirth [role="search"] > :not([hidden], input[type="hidden"]):nth-last-child(1 of :not([hidden], input[type="hidden"])), .cirth [role="search"] > :has( + small:last-child) {
1311
1268
  border-start-end-radius: var(--cirth-radius-pill);
1312
1269
  border-end-end-radius: var(--cirth-radius-pill);
1313
1270
  }
1314
1271
 
1315
- .cirth [role="search"] > :has( + small:last-child) {
1316
- border-start-end-radius: var(--cirth-radius-pill);
1317
- border-end-end-radius: var(--cirth-radius-pill);
1318
- }
1319
-
1320
- .cirth [aria-busy="true"]:not(input, select, textarea, html, form) {
1321
- white-space: nowrap;
1322
- }
1323
-
1324
1272
  .cirth [aria-busy="true"]:not(input, select, textarea, html, form):before {
1325
1273
  content: "";
1326
1274
  vertical-align: -.125em;
1327
1275
  width: 1em;
1328
1276
  height: 1em;
1329
- -webkit-mask-image: var(--cirth-icon-loading);
1330
1277
  mask-image: var(--cirth-icon-loading);
1331
1278
  background-color: currentColor;
1332
1279
  display: inline-block;
1333
- -webkit-mask-size: 1em;
1334
1280
  mask-size: 1em;
1335
- -webkit-mask-repeat: no-repeat;
1336
1281
  mask-repeat: no-repeat;
1337
1282
  }
1338
1283
 
@@ -1350,10 +1295,6 @@
1350
1295
  text-align: center;
1351
1296
  }
1352
1297
 
1353
- .cirth :is(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[aria-busy="true"] {
1354
- white-space: normal;
1355
- }
1356
-
1357
1298
  .cirth input:is([type="submit"], [type="button"], [type="reset"])[aria-busy="true"] {
1358
1299
  background-image: var(--cirth-icon-loading);
1359
1300
  background-position: center left var(--cirth-form-element-spacing-horizontal);
@@ -1366,14 +1307,10 @@
1366
1307
  background-position: center right var(--cirth-form-element-spacing-horizontal);
1367
1308
  }
1368
1309
 
1369
- .cirth button[aria-busy="true"], .cirth [type="submit"][aria-busy="true"], .cirth [type="button"][aria-busy="true"], .cirth [type="reset"][aria-busy="true"], .cirth [role="button"][aria-busy="true"], .cirth a[aria-busy="true"] {
1370
- pointer-events: none;
1371
- }
1372
-
1373
1310
  .cirth meter {
1374
1311
  appearance: none;
1375
1312
  width: 100%;
1376
- height: var(--cirth-size-2);
1313
+ height: var(--cirth-space-2);
1377
1314
  margin-bottom: calc(var(--cirth-spacing) * .5);
1378
1315
  border: var(--cirth-border-width-1) solid var(--cirth-meter-border-color);
1379
1316
  border-radius: var(--cirth-border-radius);
@@ -1477,7 +1414,7 @@
1477
1414
  }
1478
1415
 
1479
1416
  .cirth dialog > article > header :is(a, button)[rel="prev"] {
1480
- margin: calc(calc((var(--cirth-size-4) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2 - var(--cirth-size-4)) / 2) * -1);
1417
+ margin: calc(calc((var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2 - var(--cirth-font-size-md)) / 2) * -1);
1481
1418
  float: right;
1482
1419
  margin-inline-start: var(--cirth-spacing);
1483
1420
  padding: 0;
@@ -1496,23 +1433,37 @@
1496
1433
  }
1497
1434
 
1498
1435
  .cirth dialog > article :is(a, button)[rel="prev"] {
1499
- width: calc(var(--cirth-size-4) + calc((var(--cirth-size-4) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2 - var(--cirth-size-4)) / 2) * 2);
1500
- height: calc(var(--cirth-size-4) + calc((var(--cirth-size-4) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2 - var(--cirth-size-4)) / 2) * 2);
1501
- margin-top: calc(var(--cirth-spacing) * -1 - calc((var(--cirth-size-4) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2 - var(--cirth-size-4)) / 2));
1502
- margin-right: calc(calc((var(--cirth-size-4) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2 - var(--cirth-size-4)) / 2) * -1);
1503
- margin-bottom: calc(var(--cirth-spacing) - calc((var(--cirth-size-4) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2 - var(--cirth-size-4)) / 2));
1504
- background-image: var(--cirth-icon-close);
1505
- background-position: center;
1506
- background-size: auto var(--cirth-size-4);
1436
+ width: calc(var(--cirth-font-size-md) + calc((var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2 - var(--cirth-font-size-md)) / 2) * 2);
1437
+ height: calc(var(--cirth-font-size-md) + calc((var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2 - var(--cirth-font-size-md)) / 2) * 2);
1438
+ margin-top: calc(var(--cirth-spacing) * -1 - calc((var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2 - var(--cirth-font-size-md)) / 2));
1439
+ margin-right: calc(calc((var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2 - var(--cirth-font-size-md)) / 2) * -1);
1440
+ margin-bottom: calc(var(--cirth-spacing) - calc((var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2 - var(--cirth-font-size-md)) / 2));
1507
1441
  opacity: .5;
1508
1442
  transition: opacity var(--cirth-transition);
1509
1443
  background-color: #0000;
1510
- background-repeat: no-repeat;
1511
1444
  border: none;
1512
1445
  margin-inline-start: auto;
1513
1446
  display: block;
1514
1447
  }
1515
1448
 
1449
+ .cirth dialog > article :is(a, button)[rel="prev"]:before {
1450
+ background-color: var(--cirth-muted-color);
1451
+ content: "";
1452
+ width: 100%;
1453
+ height: 100%;
1454
+ mask-image: var(--cirth-icon-close);
1455
+ mask-position: center;
1456
+ mask-size: auto var(--cirth-font-size-md);
1457
+ display: block;
1458
+ mask-repeat: no-repeat;
1459
+ }
1460
+
1461
+ @media (forced-colors: active) {
1462
+ .cirth dialog > article :is(a, button)[rel="prev"]:before {
1463
+ background-color: canvastext;
1464
+ }
1465
+ }
1466
+
1516
1467
  .cirth dialog > article :is(a, button)[rel="prev"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
1517
1468
  opacity: 1;
1518
1469
  }
@@ -1578,7 +1529,7 @@
1578
1529
 
1579
1530
  .cirth nav li button, .cirth nav li [role="button"], .cirth nav li [type="button"], .cirth nav li input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), .cirth nav li select {
1580
1531
  height: auto;
1581
- min-block-size: var(--cirth-size-6);
1532
+ min-block-size: var(--cirth-space-6);
1582
1533
  margin-inline: inherit;
1583
1534
  padding: calc(var(--cirth-nav-link-spacing-vertical) - var(--cirth-border-width) * 2) var(--cirth-nav-link-spacing-horizontal);
1584
1535
  margin-bottom: 0;
@@ -1666,7 +1617,7 @@
1666
1617
  vertical-align: baseline;
1667
1618
  appearance: none;
1668
1619
  width: 100%;
1669
- height: var(--cirth-size-2);
1620
+ height: var(--cirth-space-2);
1670
1621
  margin-bottom: calc(var(--cirth-spacing) * .5);
1671
1622
  border: var(--cirth-border-width-1) solid var(--cirth-progress-border-color);
1672
1623
  border-radius: var(--cirth-border-radius);
@@ -1752,27 +1703,23 @@
1752
1703
  }
1753
1704
 
1754
1705
  .cirth {
1755
- --cirth-color-black: #000;
1756
- --cirth-color-white: #fff;
1757
- --cirth-color-transparent: transparent;
1758
- --cirth-color-current: currentColor;
1759
1706
  --cirth-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
1760
1707
  --cirth-font-family-sans: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial,
1761
1708
  "Helvetica Neue", sans-serif, var(--cirth-font-family-emoji);
1762
1709
  --cirth-font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif;
1763
1710
  --cirth-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
1764
1711
  monospace, var(--cirth-font-family-emoji);
1765
- --cirth-font-family-display: var(--cirth-font-family-serif);
1766
1712
  --cirth-font-size-xs: .75rem;
1767
1713
  --cirth-font-size-sm: .875rem;
1768
1714
  --cirth-font-size-md: 1rem;
1769
1715
  --cirth-font-size-lg: 1.125rem;
1770
1716
  --cirth-font-size-xl: 1.25rem;
1771
- --cirth-font-size-2xl: 1.425rem;
1772
- --cirth-font-size-3xl: 1.6rem;
1773
- --cirth-font-size-4xl: 1.8rem;
1774
- --cirth-font-size-5xl: 2rem;
1775
- --cirth-font-size-6xl: 2.3rem;
1717
+ --cirth-font-size-2xl: 1.5rem;
1718
+ --cirth-font-size-3xl: 1.75rem;
1719
+ --cirth-font-size-4xl: 2rem;
1720
+ --cirth-font-size-5xl: 2.25rem;
1721
+ --cirth-font-size-6xl: 2.75rem;
1722
+ --cirth-font-size-7xl: 3.5rem;
1776
1723
  --cirth-font-weight-light: 300;
1777
1724
  --cirth-font-weight-regular: 400;
1778
1725
  --cirth-font-weight-medium: 500;
@@ -1799,19 +1746,6 @@
1799
1746
  --cirth-space-16: 4rem;
1800
1747
  --cirth-space-20: 5rem;
1801
1748
  --cirth-space-24: 6rem;
1802
- --cirth-size-0: 0;
1803
- --cirth-size-1: .25rem;
1804
- --cirth-size-2: .5rem;
1805
- --cirth-size-3: .75rem;
1806
- --cirth-size-4: 1rem;
1807
- --cirth-size-5: 1.25rem;
1808
- --cirth-size-6: 1.5rem;
1809
- --cirth-size-8: 2rem;
1810
- --cirth-size-10: 2.5rem;
1811
- --cirth-size-12: 3rem;
1812
- --cirth-size-16: 4rem;
1813
- --cirth-size-20: 5rem;
1814
- --cirth-size-24: 6rem;
1815
1749
  --cirth-radius-none: 0;
1816
1750
  --cirth-radius-xs: .125rem;
1817
1751
  --cirth-radius-sm: .25rem;
@@ -1824,9 +1758,6 @@
1824
1758
  --cirth-border-width-1: .0625rem;
1825
1759
  --cirth-border-width-2: .125rem;
1826
1760
  --cirth-border-width-4: .25rem;
1827
- --cirth-outline-width-1: .0625rem;
1828
- --cirth-outline-width-2: .125rem;
1829
- --cirth-outline-width-4: .25rem;
1830
1761
  --cirth-duration-instant: 0s;
1831
1762
  --cirth-duration-fast: .1s;
1832
1763
  --cirth-duration-normal: .2s;
@@ -1837,7 +1768,6 @@
1837
1768
  --cirth-ease-out: cubic-bezier(0, 0, .2, 1);
1838
1769
  --cirth-ease-in-out: cubic-bezier(.4, 0, .2, 1);
1839
1770
  --cirth-opacity-disabled: .5;
1840
- --cirth-opacity-muted: .72;
1841
1771
  --cirth-opacity-overlay: .75;
1842
1772
  --cirth-z-index-dropdown: 1000;
1843
1773
  --cirth-z-index-sticky: 1020;
@@ -1845,6 +1775,7 @@
1845
1775
  --cirth-z-index-modal-backdrop: 1040;
1846
1776
  --cirth-z-index-modal: 1050;
1847
1777
  --cirth-font-family: var(--cirth-font-family-sans);
1778
+ --cirth-font-family-display: var(--cirth-font-family-serif);
1848
1779
  --cirth-line-height: var(--cirth-line-height-normal);
1849
1780
  --cirth-font-weight: var(--cirth-font-weight-regular);
1850
1781
  --cirth-font-size: 100%;
@@ -1856,7 +1787,8 @@
1856
1787
  --cirth-code-border-radius: min(var(--cirth-border-radius),
1857
1788
  var(--cirth-radius-sm));
1858
1789
  --cirth-border-width: var(--cirth-border-width-1);
1859
- --cirth-outline-width: var(--cirth-outline-width-2);
1790
+ --cirth-outline-width: var(--cirth-border-width-2);
1791
+ --cirth-background-color: var(--cirth-canvas);
1860
1792
  --cirth-transition: var(--cirth-duration-normal) var(--cirth-ease-out);
1861
1793
  --cirth-spacing: var(--cirth-space-4);
1862
1794
  --cirth-typography-spacing-vertical: var(--cirth-space-4);
@@ -1884,13 +1816,9 @@
1884
1816
  --cirth-nav-link-spacing-vertical: var(--cirth-space-2);
1885
1817
  --cirth-nav-link-spacing-horizontal: var(--cirth-space-2);
1886
1818
  --cirth-nav-breadcrumb-divider: ">";
1887
- --cirth-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
1888
- --cirth-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
1889
- --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
1890
- --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
1891
- --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
1892
- --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
1893
- --cirth-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
1819
+ --cirth-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
1820
+ --cirth-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
1821
+ --cirth-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
1894
1822
  --cirth-icon-loading: url("data:image/svg+xml,%3Csvg fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(136, 146, 164)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
1895
1823
  }
1896
1824
 
@@ -1912,21 +1840,27 @@
1912
1840
  }
1913
1841
 
1914
1842
  .cirth h1 {
1915
- --cirth-font-size: clamp(2.25rem, 1.7rem + 2.2vw, 3.5rem);
1843
+ --cirth-font-size: clamp(var(--cirth-font-size-5xl),
1844
+ 1.7rem + 2.2vw,
1845
+ var(--cirth-font-size-7xl));
1916
1846
  --cirth-line-height: var(--cirth-line-height-tight);
1917
1847
  --cirth-letter-spacing: var(--cirth-letter-spacing-tight);
1918
1848
  --cirth-typography-spacing-top: var(--cirth-space-12);
1919
1849
  }
1920
1850
 
1921
1851
  .cirth h2 {
1922
- --cirth-font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem);
1852
+ --cirth-font-size: clamp(var(--cirth-font-size-2xl),
1853
+ 1.3rem + 1vw,
1854
+ var(--cirth-font-size-4xl));
1923
1855
  --cirth-line-height: 1.15;
1924
1856
  --cirth-letter-spacing: var(--cirth-letter-spacing-tight);
1925
1857
  --cirth-typography-spacing-top: var(--cirth-space-12);
1926
1858
  }
1927
1859
 
1928
1860
  .cirth h3 {
1929
- --cirth-font-size: clamp(1.25rem, 1.15rem + .5vw, 1.5rem);
1861
+ --cirth-font-size: clamp(var(--cirth-font-size-xl),
1862
+ 1.15rem + .5vw,
1863
+ var(--cirth-font-size-2xl));
1930
1864
  --cirth-line-height: 1.2;
1931
1865
  --cirth-letter-spacing: var(--cirth-letter-spacing-snug);
1932
1866
  --cirth-typography-spacing-top: var(--cirth-space-10);
@@ -1974,7 +1908,7 @@
1974
1908
  }
1975
1909
 
1976
1910
  .cirth input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), .cirth :where(select, textarea) {
1977
- --cirth-outline-width: var(--cirth-outline-width-1);
1911
+ --cirth-outline-width: var(--cirth-border-width-1);
1978
1912
  --cirth-line-height: var(--cirth-line-height-relaxed);
1979
1913
  }
1980
1914
 
@@ -2020,107 +1954,131 @@
2020
1954
  filter: brightness(0) invert();
2021
1955
  }
2022
1956
 
1957
+ .cirth {
1958
+ --cirth-canvas: light-dark(oklch(97.4% .004 69.35), oklch(20.15% .003 264));
1959
+ --cirth-color: light-dark(oklch(35.3% .021 264), oklch(83% .016 264));
1960
+ --cirth-text-selection-color: light-dark(oklch(65.7% .121 69.35 / .25), oklch(70% .129 69.35 / .1875));
1961
+ --cirth-muted-color: light-dark(oklch(52.7% .032 264), oklch(61.3% .032 264));
1962
+ --cirth-muted-border-color: light-dark(oklch(93.85% .003 264), oklch(26.7% .011 264));
1963
+ --cirth-error: light-dark(oklch(44% .151 29.73), oklch(74.3% .133 29.73));
1964
+ --cirth-success: light-dark(oklch(52.7% .1 160.59), oklch(65.7% .125 160.59));
1965
+ --cirth-warning: light-dark(oklch(48.3% .086 78), oklch(70% .124 78));
1966
+ --cirth-primary: light-dark(oklch(52.7% .097 69.35), oklch(70% .129 69.35));
1967
+ --cirth-secondary: light-dark(oklch(52.7% .032 264), oklch(70% .028 264));
1968
+ --cirth-secondary-underline: light-dark(oklch(52.7% .032 264 / .5), oklch(70% .028 264 / .5));
1969
+ --cirth-secondary-hover: light-dark(oklch(44% .028 264), oklch(78.7% .021 264));
1970
+ --cirth-secondary-hover-background: light-dark(oklch(44% .028 264), oklch(52.7% .032 264));
1971
+ --cirth-secondary-focus: light-dark(oklch(48.3% .03 264 / .7), oklch(70% .028 264 / .7));
1972
+ --cirth-contrast: light-dark(oklch(22.3% .006 264), oklch(91.7% .006 264));
1973
+ --cirth-contrast-background: light-dark(oklch(22.3% .006 264), oklch(96% 0 264));
1974
+ --cirth-contrast-underline: light-dark(oklch(22.3% .006 264 / .5), oklch(91.7% .006 264 / .5));
1975
+ --cirth-contrast-hover: light-dark(oklch(0% 0 0), oklch(100% 0 0));
1976
+ --cirth-contrast-hover-background: light-dark(oklch(0% 0 0), oklch(100% 0 0));
1977
+ --cirth-contrast-focus: light-dark(oklch(48.3% .03 264 / .7), oklch(87.3% .011 264 / .5));
1978
+ --cirth-contrast-inverse: light-dark(oklch(100% 0 0), oklch(0% 0 0));
1979
+ --cirth-link-visited-color: light-dark(oklch(48.3% .03 264), oklch(65.7% .03 264));
1980
+ --cirth-box-shadow: light-dark(.0145rem .029rem .174rem oklch(65.7% .03 264 / .01698), .0335rem .067rem .402rem oklch(65.7% .03 264 / .024), .0625rem .125rem .75rem oklch(65.7% .03 264 / .03), .1125rem .225rem 1.35rem oklch(65.7% .03 264 / .036), .2085rem .417rem 2.502rem oklch(65.7% .03 264 / .04302), .5rem 1rem 6rem oklch(65.7% .03 264 / .06), 0 0 0 .0625rem oklch(65.7% .03 264 / .015),
1981
+ .0145rem .029rem .174rem oklch(9% 0 312 / .01698), .0335rem .067rem .402rem oklch(9% 0 312 / .024), .0625rem .125rem .75rem oklch(9% 0 312 / .03), .1125rem .225rem 1.35rem oklch(9% 0 312 / .036), .2085rem .417rem 2.502rem oklch(9% 0 312 / .04302), .5rem 1rem 6rem oklch(9% 0 312 / .06), 0 0 0 .0625rem oklch(9% 0 312 / .015));
1982
+ --cirth-h1-color: light-dark(oklch(22.3% .006 264), oklch(96% 0 264));
1983
+ --cirth-h2-color: light-dark(oklch(26.7% .011 264), oklch(91.7% .006 264));
1984
+ --cirth-h3-color: light-dark(oklch(31% .016 264), oklch(83% .016 264));
1985
+ --cirth-h4-color: light-dark(oklch(35.3% .021 264), oklch(78.7% .021 264));
1986
+ --cirth-h5-color: light-dark(oklch(39.7% .025 264), oklch(74.3% .025 264));
1987
+ --cirth-h6-color: light-dark(oklch(44% .028 264), oklch(65.7% .03 264));
1988
+ --cirth-mark-color: light-dark(oklch(18% 0 264), oklch(100% 0 0));
1989
+ --cirth-code-background-color: light-dark(oklch(97% 0 288), oklch(23.4% .00725 264));
1990
+ --cirth-code-color: light-dark(oklch(52.7% .032 264), oklch(65.7% .03 264));
1991
+ --cirth-form-element-background-color: light-dark(oklch(99% 0 336), oklch(24.5% .0085 264));
1992
+ --cirth-form-element-selected-background-color: light-dark(oklch(91.7% .006 264), oklch(31% .016 264));
1993
+ --cirth-form-element-border-color: light-dark(oklch(61.3% .032 264), oklch(52.7% .032 264));
1994
+ --cirth-form-element-color: light-dark(oklch(26.7% .011 264), oklch(91.7% .006 264));
1995
+ --cirth-form-element-active-background-color: light-dark(oklch(100% 0 0), oklch(23.4% .00725 264));
1996
+ --cirth-switch-background-color: light-dark(oklch(61.3% .032 264), oklch(52.7% .032 264));
1997
+ --cirth-range-border-color: light-dark(oklch(91.7% .006 264), oklch(26.7% .011 264));
1998
+ --cirth-range-active-border-color: light-dark(oklch(83% .016 264), oklch(31% .016 264));
1999
+ --cirth-card-background-color: light-dark(oklch(100% 0 0), oklch(22.3% .006 264));
2000
+ --cirth-card-sectioning-background-color: light-dark(oklch(99% 0 336), oklch(23.4% .00725 264));
2001
+ --cirth-dropdown-background-color: light-dark(oklch(100% 0 0), oklch(22.3% .006 264));
2002
+ --cirth-dropdown-border-color: light-dark(oklch(96% 0 264), oklch(26.7% .011 264));
2003
+ --cirth-dropdown-hover-background-color: light-dark(oklch(96% 0 264), oklch(26.7% .011 264));
2004
+ --cirth-progress-background-color: light-dark(oklch(91.7% .006 264), oklch(26.7% .011 264));
2005
+ --cirth-progress-border-color: light-dark(oklch(61.3% .032 264), oklch(52.7% .032 264));
2006
+ }
2007
+
2023
2008
  .cirth:where([data-theme="light"]), .cirth :where([data-theme="light"]), .cirth:where(:not([data-theme="dark"])) {
2024
- --lightningcss-light: initial;
2025
- --lightningcss-dark: ;
2026
2009
  color-scheme: light;
2027
- --cirth-background-color: oklch(97.4% .004 69.35);
2028
- --cirth-color: oklch(35.3% .021 264);
2029
- --cirth-text-selection-color: oklch(65.7% .121 69.35 / .25);
2030
- --cirth-muted-color: oklch(52.7% .032 264);
2031
- --cirth-muted-border-color: oklch(93.85% .003 264);
2032
- --cirth-primary: oklch(52.7% .097 69.35);
2033
- --cirth-primary-background: oklch(52.7% .097 69.35);
2010
+ --cirth-error-text: color-mix(in oklch, var(--cirth-error) 80.2%, black);
2011
+ --cirth-error-border: oklch(from var(--cirth-error) calc(l * 1.493) calc(c * 1.298) h);
2012
+ --cirth-error-active: oklch(from var(--cirth-error) calc(l * 1.198) calc(c * 1.199) h);
2013
+ --cirth-error-surface: oklch(from var(--cirth-error) 93% .05 h);
2014
+ --cirth-success-text: color-mix(in oklch, var(--cirth-success) 67%, black);
2015
+ --cirth-success-border: oklch(from var(--cirth-success) calc(l * 1.163) calc(c * 1.17) h);
2016
+ --cirth-success-active: var(--cirth-success);
2017
+ --cirth-success-surface: oklch(from var(--cirth-success) 93% .05 h);
2018
+ --cirth-warning-text: color-mix(in oklch, var(--cirth-warning) 73.1%, black);
2019
+ --cirth-warning-border: oklch(from var(--cirth-warning) calc(l * 1.269) calc(c * 1.267) h);
2020
+ --cirth-warning-active: oklch(from var(--cirth-warning) calc(l * 1.091) calc(c * 1.081) h);
2021
+ --cirth-warning-surface: oklch(from var(--cirth-warning) 93% .05 h);
2022
+ --cirth-primary-background: var(--cirth-primary);
2034
2023
  --cirth-primary-border: var(--cirth-primary-background);
2035
- --cirth-primary-underline: oklch(52.7% .097 69.35 / .5);
2036
- --cirth-primary-hover: oklch(44% .081 69.35);
2037
- --cirth-primary-hover-background: oklch(48.3% .089 69.35);
2024
+ --cirth-primary-underline: oklch(from var(--cirth-primary) l c h / 50%);
2025
+ --cirth-primary-hover: color-mix(in oklch, var(--cirth-primary) 83.5%, black);
2026
+ --cirth-primary-hover-background: color-mix(in oklch,
2027
+ var(--cirth-primary) 91.7%,
2028
+ black);
2038
2029
  --cirth-primary-hover-border: var(--cirth-primary-hover-background);
2039
2030
  --cirth-primary-hover-underline: var(--cirth-primary-hover);
2040
- --cirth-primary-focus: oklch(52.7% .097 69.35 / .75);
2031
+ --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 75%);
2041
2032
  --cirth-primary-inverse: oklch(100% 0 0);
2042
- --cirth-secondary: oklch(52.7% .032 264);
2043
2033
  --cirth-secondary-background: oklch(48.3% .03 264);
2044
2034
  --cirth-secondary-border: var(--cirth-secondary-background);
2045
- --cirth-secondary-underline: oklch(52.7% .032 264 / .5);
2046
- --cirth-secondary-hover: oklch(44% .028 264);
2047
- --cirth-secondary-hover-background: oklch(44% .028 264);
2048
2035
  --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
2049
2036
  --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
2050
- --cirth-secondary-focus: oklch(48.3% .03 264 / .7);
2051
2037
  --cirth-secondary-inverse: oklch(100% 0 0);
2052
- --cirth-contrast: oklch(22.3% .006 264);
2053
- --cirth-contrast-background: oklch(22.3% .006 264);
2054
2038
  --cirth-contrast-border: var(--cirth-contrast-background);
2055
- --cirth-contrast-underline: oklch(22.3% .006 264 / .5);
2056
- --cirth-contrast-hover: oklch(0% 0 0);
2057
- --cirth-contrast-hover-background: oklch(0% 0 0);
2058
2039
  --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
2059
2040
  --cirth-contrast-hover-underline: var(--cirth-secondary-hover);
2060
- --cirth-contrast-focus: oklch(48.3% .03 264 / .7);
2061
- --cirth-contrast-inverse: oklch(100% 0 0);
2062
- --cirth-link-visited-color: oklch(48.3% .03 264);
2063
- --cirth-box-shadow: .0145rem .029rem .174rem oklch(65.7% .03 264 / .01698), .0335rem .067rem .402rem oklch(65.7% .03 264 / .024), .0625rem .125rem .75rem oklch(65.7% .03 264 / .03), .1125rem .225rem 1.35rem oklch(65.7% .03 264 / .036), .2085rem .417rem 2.502rem oklch(65.7% .03 264 / .04302), .5rem 1rem 6rem oklch(65.7% .03 264 / .06), 0 0 0 .0625rem oklch(65.7% .03 264 / .015);
2064
- --cirth-h1-color: oklch(22.3% .006 264);
2065
- --cirth-h2-color: oklch(26.7% .011 264);
2066
- --cirth-h3-color: oklch(31% .016 264);
2067
- --cirth-h4-color: oklch(35.3% .021 264);
2068
- --cirth-h5-color: oklch(39.7% .025 264);
2069
- --cirth-h6-color: oklch(44% .028 264);
2070
- --cirth-mark-background-color: oklch(93% .05 78);
2071
- --cirth-mark-color: oklch(18% 0 264);
2072
- --cirth-ins-color: oklch(35.3% .067 160.59);
2073
- --cirth-del-color: oklch(35.3% .122 29.73);
2041
+ --cirth-mark-background-color: var(--cirth-warning-surface);
2042
+ --cirth-ins-color: var(--cirth-success-text);
2043
+ --cirth-del-color: var(--cirth-error-text);
2074
2044
  --cirth-blockquote-border-color: var(--cirth-muted-border-color);
2075
2045
  --cirth-blockquote-footer-color: var(--cirth-muted-color);
2076
2046
  --cirth-button-box-shadow: 0 0 0 #0000;
2077
2047
  --cirth-button-hover-box-shadow: 0 0 0 #0000;
2078
2048
  --cirth-table-border-color: var(--cirth-muted-border-color);
2079
2049
  --cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
2080
- --cirth-code-background-color: oklch(97% 0 288);
2081
- --cirth-code-color: oklch(52.7% .032 264);
2082
2050
  --cirth-code-kbd-background-color: var(--cirth-color);
2083
2051
  --cirth-code-kbd-color: var(--cirth-background-color);
2084
- --cirth-form-element-background-color: oklch(99% 0 336);
2085
- --cirth-form-element-selected-background-color: oklch(91.7% .006 264);
2086
- --cirth-form-element-border-color: oklch(61.3% .032 264);
2087
- --cirth-form-element-color: oklch(26.7% .011 264);
2088
2052
  --cirth-form-element-placeholder-color: var(--cirth-muted-color);
2089
- --cirth-form-element-active-background-color: oklch(100% 0 0);
2090
2053
  --cirth-form-element-active-border-color: var(--cirth-primary-border);
2091
2054
  --cirth-form-element-focus-color: var(--cirth-primary-border);
2092
2055
  --cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
2093
- --cirth-form-element-invalid-border-color: oklch(65.7% .196 29.73);
2094
- --cirth-form-element-invalid-active-border-color: oklch(52.7% .181 29.73);
2056
+ --cirth-form-element-invalid-border-color: var(--cirth-error-border);
2057
+ --cirth-form-element-invalid-active-border-color: var(--cirth-error-active);
2095
2058
  --cirth-form-element-invalid-focus-color: var(--cirth-form-element-invalid-active-border-color);
2096
- --cirth-form-element-valid-border-color: oklch(61.3% .117 160.59);
2097
- --cirth-form-element-valid-active-border-color: oklch(52.7% .1 160.59);
2059
+ --cirth-form-element-valid-border-color: var(--cirth-success-border);
2060
+ --cirth-form-element-valid-active-border-color: var(--cirth-success-active);
2098
2061
  --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
2099
- --cirth-switch-background-color: oklch(61.3% .032 264);
2062
+ --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
2100
2063
  --cirth-switch-checked-background-color: var(--cirth-primary-background);
2101
2064
  --cirth-switch-color: var(--cirth-primary-inverse);
2102
- --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
2103
- --cirth-range-border-color: oklch(91.7% .006 264);
2104
- --cirth-range-active-border-color: oklch(83% .016 264);
2105
2065
  --cirth-range-thumb-border-color: var(--cirth-background-color);
2106
2066
  --cirth-range-thumb-color: var(--cirth-secondary-background);
2107
2067
  --cirth-range-thumb-active-color: var(--cirth-primary-background);
2108
- --cirth-accordion-border-color: var(--cirth-muted-border-color);
2109
2068
  --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
2110
2069
  --cirth-accordion-close-summary-color: var(--cirth-color);
2111
2070
  --cirth-accordion-open-summary-color: var(--cirth-muted-color);
2112
- --cirth-card-background-color: oklch(100% 0 0);
2113
2071
  --cirth-card-border-color: var(--cirth-muted-border-color);
2114
2072
  --cirth-card-box-shadow: var(--cirth-box-shadow);
2115
- --cirth-card-sectioning-background-color: oklch(99% 0 336);
2116
- --cirth-loading-spinner-opacity: var(--cirth-opacity-disabled);
2117
2073
  --cirth-modal-overlay-background-color: oklch(93.85% .003 264deg / var(--cirth-opacity-overlay));
2118
- --cirth-meter-optimum-color: oklch(52.7% .1 160.59);
2119
- --cirth-meter-suboptimum-color: oklch(48.3% .086 78);
2120
- --cirth-meter-even-less-good-color: oklch(44% .151 29.73);
2121
- --cirth-progress-background-color: oklch(91.7% .006 264);
2122
- --cirth-progress-border-color: oklch(61.3% .032 264);
2074
+ --cirth-meter-optimum-color: var(--cirth-success);
2075
+ --cirth-meter-suboptimum-color: var(--cirth-warning);
2076
+ --cirth-meter-even-less-good-color: var(--cirth-error);
2123
2077
  --cirth-progress-color: var(--cirth-primary-background);
2078
+ --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(98, 107, 126)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
2079
+ --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(98, 107, 126)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
2080
+ --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(98, 107, 126)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
2081
+ --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(98, 107, 126)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
2124
2082
  --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(40, 124, 87)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
2125
2083
  --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(189, 47, 33)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
2126
2084
  }
@@ -2131,106 +2089,81 @@
2131
2089
 
2132
2090
  @media only screen and (prefers-color-scheme: dark) {
2133
2091
  .cirth:where(:not([data-theme])) {
2134
- --lightningcss-light: ;
2135
- --lightningcss-dark: initial;
2136
2092
  color-scheme: dark;
2137
- --cirth-background-color: oklch(20.15% .003 264);
2138
- --cirth-color: oklch(83% .016 264);
2139
- --cirth-text-selection-color: oklch(70% .129 69.35 / .1875);
2140
- --cirth-muted-color: oklch(61.3% .032 264);
2141
- --cirth-muted-border-color: oklch(26.7% .011 264);
2142
- --cirth-primary: oklch(70% .129 69.35);
2143
- --cirth-primary-background: oklch(52.7% .097 69.35);
2093
+ --cirth-error-text: oklch(from var(--cirth-error) calc(l * 1.059) calc(c * .797) h);
2094
+ --cirth-error-border: oklch(from var(--cirth-error) calc(l * .942) calc(c * 1.226) h);
2095
+ --cirth-error-active: oklch(from var(--cirth-error) calc(l * 1.059) calc(c * .797) h);
2096
+ --cirth-error-surface: oklch(from var(--cirth-error) 35.3% .063 h);
2097
+ --cirth-success-text: oklch(from var(--cirth-success) calc(l * 1.198) calc(c * 1.2) h);
2098
+ --cirth-success-border: oklch(from var(--cirth-success) calc(l * 1.065) calc(c * 1.064) h);
2099
+ --cirth-success-active: oklch(from var(--cirth-success) calc(l * 1.198) calc(c * 1.2) h);
2100
+ --cirth-success-surface: oklch(from var(--cirth-success) 35.3% .063 h);
2101
+ --cirth-warning-text: oklch(from var(--cirth-warning) calc(l * 1.124) calc(c * 1.121) h);
2102
+ --cirth-warning-border: var(--cirth-warning);
2103
+ --cirth-warning-active: oklch(from var(--cirth-warning) calc(l * 1.124) calc(c * 1.121) h);
2104
+ --cirth-warning-surface: oklch(from var(--cirth-warning) 35.3% .063 h);
2105
+ --cirth-primary-background: color-mix(in oklch,
2106
+ var(--cirth-primary) 75.2%,
2107
+ black);
2144
2108
  --cirth-primary-border: var(--cirth-primary-background);
2145
- --cirth-primary-underline: oklch(70% .129 69.35 / .5);
2146
- --cirth-primary-hover: oklch(78.7% .146 69.35);
2147
- --cirth-primary-hover-background: oklch(57% .105 69.35);
2109
+ --cirth-primary-underline: oklch(from var(--cirth-primary) l c h / 50%);
2110
+ --cirth-primary-hover: oklch(from var(--cirth-primary) calc(l * 1.124) calc(c * 1.132) h);
2111
+ --cirth-primary-hover-background: color-mix(in oklch,
2112
+ var(--cirth-primary) 81.4%,
2113
+ black);
2148
2114
  --cirth-primary-hover-border: var(--cirth-primary-hover-background);
2149
2115
  --cirth-primary-hover-underline: var(--cirth-primary-hover);
2150
- --cirth-primary-focus: oklch(70% .129 69.35 / .7);
2116
+ --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 70%);
2151
2117
  --cirth-primary-inverse: oklch(100% 0 0);
2152
- --cirth-secondary: oklch(70% .028 264);
2153
2118
  --cirth-secondary-background: oklch(48.3% .03 264);
2154
2119
  --cirth-secondary-border: var(--cirth-secondary-background);
2155
- --cirth-secondary-underline: oklch(70% .028 264 / .5);
2156
- --cirth-secondary-hover: oklch(78.7% .021 264);
2157
- --cirth-secondary-hover-background: oklch(52.7% .032 264);
2158
2120
  --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
2159
2121
  --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
2160
- --cirth-secondary-focus: oklch(70% .028 264 / .7);
2161
2122
  --cirth-secondary-inverse: oklch(100% 0 0);
2162
- --cirth-contrast: oklch(91.7% .006 264);
2163
- --cirth-contrast-background: oklch(96% 0 264);
2164
2123
  --cirth-contrast-border: var(--cirth-contrast-background);
2165
- --cirth-contrast-underline: oklch(91.7% .006 264 / .5);
2166
- --cirth-contrast-hover: oklch(100% 0 0);
2167
- --cirth-contrast-hover-background: oklch(100% 0 0);
2168
2124
  --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
2169
2125
  --cirth-contrast-hover-underline: var(--cirth-contrast-hover);
2170
- --cirth-contrast-focus: oklch(87.3% .011 264 / .5);
2171
- --cirth-contrast-inverse: oklch(0% 0 0);
2172
- --cirth-link-visited-color: oklch(65.7% .03 264);
2173
- --cirth-box-shadow: .0145rem .029rem .174rem oklch(9% 0 312 / .01698), .0335rem .067rem .402rem oklch(9% 0 312 / .024), .0625rem .125rem .75rem oklch(9% 0 312 / .03), .1125rem .225rem 1.35rem oklch(9% 0 312 / .036), .2085rem .417rem 2.502rem oklch(9% 0 312 / .04302), .5rem 1rem 6rem oklch(9% 0 312 / .06), 0 0 0 .0625rem oklch(9% 0 312 / .015);
2174
- --cirth-h1-color: oklch(96% 0 264);
2175
- --cirth-h2-color: oklch(91.7% .006 264);
2176
- --cirth-h3-color: oklch(83% .016 264);
2177
- --cirth-h4-color: oklch(78.7% .021 264);
2178
- --cirth-h5-color: oklch(74.3% .025 264);
2179
- --cirth-h6-color: oklch(65.7% .03 264);
2180
- --cirth-mark-background-color: oklch(35.3% .063 78);
2181
- --cirth-mark-color: oklch(100% 0 0);
2182
- --cirth-ins-color: oklch(78.7% .15 160.59);
2183
- --cirth-del-color: oklch(78.7% .106 29.73);
2126
+ --cirth-mark-background-color: var(--cirth-warning-surface);
2127
+ --cirth-ins-color: var(--cirth-success-text);
2128
+ --cirth-del-color: var(--cirth-error-text);
2184
2129
  --cirth-blockquote-border-color: var(--cirth-muted-border-color);
2185
2130
  --cirth-blockquote-footer-color: var(--cirth-muted-color);
2186
2131
  --cirth-button-box-shadow: 0 0 0 #0000;
2187
2132
  --cirth-button-hover-box-shadow: 0 0 0 #0000;
2188
2133
  --cirth-table-border-color: var(--cirth-muted-border-color);
2189
2134
  --cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
2190
- --cirth-code-background-color: oklch(23.4% .00725 264);
2191
- --cirth-code-color: oklch(65.7% .03 264);
2192
2135
  --cirth-code-kbd-background-color: var(--cirth-color);
2193
2136
  --cirth-code-kbd-color: var(--cirth-background-color);
2194
- --cirth-form-element-background-color: oklch(24.5% .0085 264);
2195
- --cirth-form-element-selected-background-color: oklch(31% .016 264);
2196
- --cirth-form-element-border-color: oklch(52.7% .032 264);
2197
- --cirth-form-element-color: oklch(91.7% .006 264);
2198
2137
  --cirth-form-element-placeholder-color: oklch(65.7% .03 264);
2199
- --cirth-form-element-active-background-color: oklch(23.4% .00725 264);
2200
2138
  --cirth-form-element-active-border-color: var(--cirth-primary-border);
2201
2139
  --cirth-form-element-focus-color: var(--cirth-primary-border);
2202
2140
  --cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
2203
- --cirth-form-element-invalid-border-color: oklch(70% .163 29.73);
2204
- --cirth-form-element-invalid-active-border-color: oklch(78.7% .106 29.73);
2141
+ --cirth-form-element-invalid-border-color: var(--cirth-error-border);
2142
+ --cirth-form-element-invalid-active-border-color: var(--cirth-error-active);
2205
2143
  --cirth-form-element-invalid-focus-color: var(--cirth-form-element-invalid-active-border-color);
2206
- --cirth-form-element-valid-border-color: oklch(70% .133 160.59);
2207
- --cirth-form-element-valid-active-border-color: oklch(78.7% .15 160.59);
2144
+ --cirth-form-element-valid-border-color: var(--cirth-success-border);
2145
+ --cirth-form-element-valid-active-border-color: var(--cirth-success-active);
2208
2146
  --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
2209
- --cirth-switch-background-color: oklch(52.7% .032 264);
2147
+ --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
2210
2148
  --cirth-switch-checked-background-color: var(--cirth-primary-background);
2211
2149
  --cirth-switch-color: var(--cirth-primary-inverse);
2212
- --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
2213
- --cirth-range-border-color: oklch(26.7% .011 264);
2214
- --cirth-range-active-border-color: oklch(31% .016 264);
2215
2150
  --cirth-range-thumb-border-color: var(--cirth-background-color);
2216
2151
  --cirth-range-thumb-color: var(--cirth-secondary-background);
2217
2152
  --cirth-range-thumb-active-color: var(--cirth-primary-background);
2218
- --cirth-accordion-border-color: var(--cirth-muted-border-color);
2219
2153
  --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
2220
2154
  --cirth-accordion-close-summary-color: var(--cirth-color);
2221
2155
  --cirth-accordion-open-summary-color: var(--cirth-muted-color);
2222
- --cirth-card-background-color: oklch(22.3% .006 264);
2223
2156
  --cirth-card-border-color: var(--cirth-card-background-color);
2224
2157
  --cirth-card-box-shadow: var(--cirth-box-shadow);
2225
- --cirth-card-sectioning-background-color: oklch(23.4% .00725 264);
2226
- --cirth-loading-spinner-opacity: var(--cirth-opacity-disabled);
2227
2158
  --cirth-modal-overlay-background-color: oklch(9% 0 312deg / var(--cirth-opacity-overlay));
2228
- --cirth-meter-optimum-color: oklch(65.7% .125 160.59);
2229
- --cirth-meter-suboptimum-color: oklch(70% .124 78);
2230
- --cirth-meter-even-less-good-color: oklch(74.3% .133 29.73);
2231
- --cirth-progress-background-color: oklch(26.7% .011 264);
2232
- --cirth-progress-border-color: oklch(52.7% .032 264);
2159
+ --cirth-meter-optimum-color: var(--cirth-success);
2160
+ --cirth-meter-suboptimum-color: var(--cirth-warning);
2161
+ --cirth-meter-even-less-good-color: var(--cirth-error);
2233
2162
  --cirth-progress-color: oklch(61.3% .113 69.35);
2163
+ --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(122, 132, 152)' 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");
2164
+ --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(122, 132, 152)' 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");
2165
+ --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(122, 132, 152)' 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");
2166
+ --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(122, 132, 152)' 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");
2234
2167
  --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(75, 215, 153)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
2235
2168
  --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(246, 160, 145)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
2236
2169
  }
@@ -2241,106 +2174,81 @@
2241
2174
  }
2242
2175
 
2243
2176
  .cirth:where([data-theme="dark"]), .cirth :where([data-theme="dark"]) {
2244
- --lightningcss-light: ;
2245
- --lightningcss-dark: initial;
2246
2177
  color-scheme: dark;
2247
- --cirth-background-color: oklch(20.15% .003 264);
2248
- --cirth-color: oklch(83% .016 264);
2249
- --cirth-text-selection-color: oklch(70% .129 69.35 / .1875);
2250
- --cirth-muted-color: oklch(61.3% .032 264);
2251
- --cirth-muted-border-color: oklch(26.7% .011 264);
2252
- --cirth-primary: oklch(70% .129 69.35);
2253
- --cirth-primary-background: oklch(52.7% .097 69.35);
2178
+ --cirth-error-text: oklch(from var(--cirth-error) calc(l * 1.059) calc(c * .797) h);
2179
+ --cirth-error-border: oklch(from var(--cirth-error) calc(l * .942) calc(c * 1.226) h);
2180
+ --cirth-error-active: oklch(from var(--cirth-error) calc(l * 1.059) calc(c * .797) h);
2181
+ --cirth-error-surface: oklch(from var(--cirth-error) 35.3% .063 h);
2182
+ --cirth-success-text: oklch(from var(--cirth-success) calc(l * 1.198) calc(c * 1.2) h);
2183
+ --cirth-success-border: oklch(from var(--cirth-success) calc(l * 1.065) calc(c * 1.064) h);
2184
+ --cirth-success-active: oklch(from var(--cirth-success) calc(l * 1.198) calc(c * 1.2) h);
2185
+ --cirth-success-surface: oklch(from var(--cirth-success) 35.3% .063 h);
2186
+ --cirth-warning-text: oklch(from var(--cirth-warning) calc(l * 1.124) calc(c * 1.121) h);
2187
+ --cirth-warning-border: var(--cirth-warning);
2188
+ --cirth-warning-active: oklch(from var(--cirth-warning) calc(l * 1.124) calc(c * 1.121) h);
2189
+ --cirth-warning-surface: oklch(from var(--cirth-warning) 35.3% .063 h);
2190
+ --cirth-primary-background: color-mix(in oklch,
2191
+ var(--cirth-primary) 75.2%,
2192
+ black);
2254
2193
  --cirth-primary-border: var(--cirth-primary-background);
2255
- --cirth-primary-underline: oklch(70% .129 69.35 / .5);
2256
- --cirth-primary-hover: oklch(78.7% .146 69.35);
2257
- --cirth-primary-hover-background: oklch(57% .105 69.35);
2194
+ --cirth-primary-underline: oklch(from var(--cirth-primary) l c h / 50%);
2195
+ --cirth-primary-hover: oklch(from var(--cirth-primary) calc(l * 1.124) calc(c * 1.132) h);
2196
+ --cirth-primary-hover-background: color-mix(in oklch,
2197
+ var(--cirth-primary) 81.4%,
2198
+ black);
2258
2199
  --cirth-primary-hover-border: var(--cirth-primary-hover-background);
2259
2200
  --cirth-primary-hover-underline: var(--cirth-primary-hover);
2260
- --cirth-primary-focus: oklch(70% .129 69.35 / .7);
2201
+ --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 70%);
2261
2202
  --cirth-primary-inverse: oklch(100% 0 0);
2262
- --cirth-secondary: oklch(70% .028 264);
2263
2203
  --cirth-secondary-background: oklch(48.3% .03 264);
2264
2204
  --cirth-secondary-border: var(--cirth-secondary-background);
2265
- --cirth-secondary-underline: oklch(70% .028 264 / .5);
2266
- --cirth-secondary-hover: oklch(78.7% .021 264);
2267
- --cirth-secondary-hover-background: oklch(52.7% .032 264);
2268
2205
  --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
2269
2206
  --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
2270
- --cirth-secondary-focus: oklch(70% .028 264 / .7);
2271
2207
  --cirth-secondary-inverse: oklch(100% 0 0);
2272
- --cirth-contrast: oklch(91.7% .006 264);
2273
- --cirth-contrast-background: oklch(96% 0 264);
2274
2208
  --cirth-contrast-border: var(--cirth-contrast-background);
2275
- --cirth-contrast-underline: oklch(91.7% .006 264 / .5);
2276
- --cirth-contrast-hover: oklch(100% 0 0);
2277
- --cirth-contrast-hover-background: oklch(100% 0 0);
2278
2209
  --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
2279
2210
  --cirth-contrast-hover-underline: var(--cirth-contrast-hover);
2280
- --cirth-contrast-focus: oklch(87.3% .011 264 / .5);
2281
- --cirth-contrast-inverse: oklch(0% 0 0);
2282
- --cirth-link-visited-color: oklch(65.7% .03 264);
2283
- --cirth-box-shadow: .0145rem .029rem .174rem oklch(9% 0 312 / .01698), .0335rem .067rem .402rem oklch(9% 0 312 / .024), .0625rem .125rem .75rem oklch(9% 0 312 / .03), .1125rem .225rem 1.35rem oklch(9% 0 312 / .036), .2085rem .417rem 2.502rem oklch(9% 0 312 / .04302), .5rem 1rem 6rem oklch(9% 0 312 / .06), 0 0 0 .0625rem oklch(9% 0 312 / .015);
2284
- --cirth-h1-color: oklch(96% 0 264);
2285
- --cirth-h2-color: oklch(91.7% .006 264);
2286
- --cirth-h3-color: oklch(83% .016 264);
2287
- --cirth-h4-color: oklch(78.7% .021 264);
2288
- --cirth-h5-color: oklch(74.3% .025 264);
2289
- --cirth-h6-color: oklch(65.7% .03 264);
2290
- --cirth-mark-background-color: oklch(35.3% .063 78);
2291
- --cirth-mark-color: oklch(100% 0 0);
2292
- --cirth-ins-color: oklch(78.7% .15 160.59);
2293
- --cirth-del-color: oklch(78.7% .106 29.73);
2211
+ --cirth-mark-background-color: var(--cirth-warning-surface);
2212
+ --cirth-ins-color: var(--cirth-success-text);
2213
+ --cirth-del-color: var(--cirth-error-text);
2294
2214
  --cirth-blockquote-border-color: var(--cirth-muted-border-color);
2295
2215
  --cirth-blockquote-footer-color: var(--cirth-muted-color);
2296
2216
  --cirth-button-box-shadow: 0 0 0 #0000;
2297
2217
  --cirth-button-hover-box-shadow: 0 0 0 #0000;
2298
2218
  --cirth-table-border-color: var(--cirth-muted-border-color);
2299
2219
  --cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
2300
- --cirth-code-background-color: oklch(23.4% .00725 264);
2301
- --cirth-code-color: oklch(65.7% .03 264);
2302
2220
  --cirth-code-kbd-background-color: var(--cirth-color);
2303
2221
  --cirth-code-kbd-color: var(--cirth-background-color);
2304
- --cirth-form-element-background-color: oklch(24.5% .0085 264);
2305
- --cirth-form-element-selected-background-color: oklch(31% .016 264);
2306
- --cirth-form-element-border-color: oklch(52.7% .032 264);
2307
- --cirth-form-element-color: oklch(91.7% .006 264);
2308
2222
  --cirth-form-element-placeholder-color: oklch(65.7% .03 264);
2309
- --cirth-form-element-active-background-color: oklch(23.4% .00725 264);
2310
2223
  --cirth-form-element-active-border-color: var(--cirth-primary-border);
2311
2224
  --cirth-form-element-focus-color: var(--cirth-primary-border);
2312
2225
  --cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
2313
- --cirth-form-element-invalid-border-color: oklch(70% .163 29.73);
2314
- --cirth-form-element-invalid-active-border-color: oklch(78.7% .106 29.73);
2226
+ --cirth-form-element-invalid-border-color: var(--cirth-error-border);
2227
+ --cirth-form-element-invalid-active-border-color: var(--cirth-error-active);
2315
2228
  --cirth-form-element-invalid-focus-color: var(--cirth-form-element-invalid-active-border-color);
2316
- --cirth-form-element-valid-border-color: oklch(70% .133 160.59);
2317
- --cirth-form-element-valid-active-border-color: oklch(78.7% .15 160.59);
2229
+ --cirth-form-element-valid-border-color: var(--cirth-success-border);
2230
+ --cirth-form-element-valid-active-border-color: var(--cirth-success-active);
2318
2231
  --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
2319
- --cirth-switch-background-color: oklch(52.7% .032 264);
2232
+ --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
2320
2233
  --cirth-switch-checked-background-color: var(--cirth-primary-background);
2321
2234
  --cirth-switch-color: var(--cirth-primary-inverse);
2322
- --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
2323
- --cirth-range-border-color: oklch(26.7% .011 264);
2324
- --cirth-range-active-border-color: oklch(31% .016 264);
2325
2235
  --cirth-range-thumb-border-color: var(--cirth-background-color);
2326
2236
  --cirth-range-thumb-color: var(--cirth-secondary-background);
2327
2237
  --cirth-range-thumb-active-color: var(--cirth-primary-background);
2328
- --cirth-accordion-border-color: var(--cirth-muted-border-color);
2329
2238
  --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
2330
2239
  --cirth-accordion-close-summary-color: var(--cirth-color);
2331
2240
  --cirth-accordion-open-summary-color: var(--cirth-muted-color);
2332
- --cirth-card-background-color: oklch(22.3% .006 264);
2333
2241
  --cirth-card-border-color: var(--cirth-card-background-color);
2334
2242
  --cirth-card-box-shadow: var(--cirth-box-shadow);
2335
- --cirth-card-sectioning-background-color: oklch(23.4% .00725 264);
2336
- --cirth-loading-spinner-opacity: var(--cirth-opacity-disabled);
2337
2243
  --cirth-modal-overlay-background-color: oklch(9% 0 312deg / var(--cirth-opacity-overlay));
2338
- --cirth-meter-optimum-color: oklch(65.7% .125 160.59);
2339
- --cirth-meter-suboptimum-color: oklch(70% .124 78);
2340
- --cirth-meter-even-less-good-color: oklch(74.3% .133 29.73);
2341
- --cirth-progress-background-color: oklch(26.7% .011 264);
2342
- --cirth-progress-border-color: oklch(52.7% .032 264);
2244
+ --cirth-meter-optimum-color: var(--cirth-success);
2245
+ --cirth-meter-suboptimum-color: var(--cirth-warning);
2246
+ --cirth-meter-even-less-good-color: var(--cirth-error);
2343
2247
  --cirth-progress-color: oklch(61.3% .113 69.35);
2248
+ --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(122, 132, 152)' 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");
2249
+ --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(122, 132, 152)' 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");
2250
+ --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(122, 132, 152)' 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");
2251
+ --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(122, 132, 152)' 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");
2344
2252
  --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(75, 215, 153)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
2345
2253
  --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(246, 160, 145)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
2346
2254
  }
@@ -2367,6 +2275,10 @@
2367
2275
  --cirth-code-color: oklch(35.3% .021 264);
2368
2276
  --cirth-link-visited-color: oklch(35.3% .021 264);
2369
2277
  --cirth-muted-border-color: oklch(57% .032 264);
2278
+ --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(64, 71, 85)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
2279
+ --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(64, 71, 85)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
2280
+ --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(64, 71, 85)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
2281
+ --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(64, 71, 85)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
2370
2282
  --cirth-form-element-border-color: oklch(39.7% .025 264);
2371
2283
  --cirth-form-element-invalid-border-color: oklch(48.3% .166 29.73);
2372
2284
  --cirth-form-element-valid-border-color: oklch(48.3% .092 160.59);
@@ -2396,6 +2308,10 @@
2396
2308
  --cirth-h5-color: var(--cirth-color);
2397
2309
  --cirth-h6-color: var(--cirth-color);
2398
2310
  --cirth-muted-color: oklch(78.7% .021 264);
2311
+ --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(179, 186, 200)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
2312
+ --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(179, 186, 200)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
2313
+ --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(179, 186, 200)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
2314
+ --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(179, 186, 200)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
2399
2315
  --cirth-secondary: oklch(78.7% .021 264);
2400
2316
  --cirth-code-color: oklch(83% .016 264);
2401
2317
  --cirth-link-visited-color: oklch(78.7% .021 264);
@@ -2406,6 +2322,8 @@
2406
2322
  --cirth-form-element-valid-border-color: oklch(78.7% .15 160.59);
2407
2323
  --cirth-primary: oklch(78.7% .146 69.35);
2408
2324
  --cirth-primary-hover: oklch(87.3% .082 69.35);
2325
+ --cirth-primary-background: oklch(44% .081 69.35);
2326
+ --cirth-primary-hover-background: oklch(39.7% .073 69.35);
2409
2327
  --cirth-primary-underline: var(--cirth-primary);
2410
2328
  --cirth-secondary-underline: var(--cirth-secondary);
2411
2329
  --cirth-contrast-underline: var(--cirth-contrast);
@@ -2430,6 +2348,10 @@
2430
2348
  --cirth-h5-color: var(--cirth-color);
2431
2349
  --cirth-h6-color: var(--cirth-color);
2432
2350
  --cirth-muted-color: oklch(78.7% .021 264);
2351
+ --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(179, 186, 200)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
2352
+ --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(179, 186, 200)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
2353
+ --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(179, 186, 200)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
2354
+ --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(179, 186, 200)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
2433
2355
  --cirth-secondary: oklch(78.7% .021 264);
2434
2356
  --cirth-code-color: oklch(83% .016 264);
2435
2357
  --cirth-link-visited-color: oklch(78.7% .021 264);
@@ -2440,6 +2362,8 @@
2440
2362
  --cirth-form-element-valid-border-color: oklch(78.7% .15 160.59);
2441
2363
  --cirth-primary: oklch(78.7% .146 69.35);
2442
2364
  --cirth-primary-hover: oklch(87.3% .082 69.35);
2365
+ --cirth-primary-background: oklch(44% .081 69.35);
2366
+ --cirth-primary-hover-background: oklch(39.7% .073 69.35);
2443
2367
  --cirth-primary-underline: var(--cirth-primary);
2444
2368
  --cirth-secondary-underline: var(--cirth-secondary);
2445
2369
  --cirth-contrast-underline: var(--cirth-contrast);
@@ -2453,127 +2377,3 @@
2453
2377
  --cirth-meter-even-less-good-color: oklch(83% .081 29.73);
2454
2378
  }
2455
2379
  }
2456
-
2457
- @media print {
2458
- .cirth {
2459
- --cirth-print-color: oklch(0% 0 0);
2460
- --cirth-print-muted-color: oklch(48.3% .03 264);
2461
- --cirth-print-border-color: oklch(61.3% .032 264);
2462
- color: var(--cirth-print-color);
2463
- --lightningcss-light: initial;
2464
- --lightningcss-dark: ;
2465
- --lightningcss-light: initial;
2466
- --lightningcss-dark: ;
2467
- color-scheme: light;
2468
- --cirth-color: var(--cirth-print-color);
2469
- --cirth-h1-color: var(--cirth-print-color);
2470
- --cirth-h2-color: var(--cirth-print-color);
2471
- --cirth-h3-color: var(--cirth-print-color);
2472
- --cirth-h4-color: var(--cirth-print-color);
2473
- --cirth-h5-color: var(--cirth-print-color);
2474
- --cirth-h6-color: var(--cirth-print-color);
2475
- --cirth-code-color: var(--cirth-print-color);
2476
- --cirth-code-kbd-color: var(--cirth-print-color);
2477
- --cirth-form-element-color: var(--cirth-print-color);
2478
- --cirth-muted-color: var(--cirth-print-muted-color);
2479
- --cirth-form-element-placeholder-color: var(--cirth-print-muted-color);
2480
- --cirth-primary: var(--cirth-print-color);
2481
- --cirth-primary-hover: var(--cirth-print-color);
2482
- --cirth-primary-underline: var(--cirth-print-color);
2483
- --cirth-secondary: var(--cirth-print-color);
2484
- --cirth-secondary-underline: var(--cirth-print-color);
2485
- --cirth-contrast: var(--cirth-print-color);
2486
- --cirth-contrast-underline: var(--cirth-print-color);
2487
- --cirth-link-visited-color: var(--cirth-print-color);
2488
- --cirth-muted-border-color: var(--cirth-print-border-color);
2489
- --cirth-form-element-border-color: var(--cirth-print-border-color);
2490
- --cirth-box-shadow: none;
2491
- --cirth-card-box-shadow: none;
2492
- --cirth-card-background-color: transparent;
2493
- --cirth-card-sectioning-background-color: transparent;
2494
- --cirth-code-background-color: transparent;
2495
- --cirth-code-kbd-background-color: transparent;
2496
- --cirth-form-element-background-color: transparent;
2497
- --cirth-form-element-active-background-color: transparent;
2498
- --cirth-table-row-stripped-background-color: transparent;
2499
- --cirth-modal-overlay-background-color: transparent;
2500
- --cirth-ins-color: oklch(35.3% .067 160.59);
2501
- --cirth-del-color: oklch(35.3% .122 29.73);
2502
- --cirth-meter-optimum-color: oklch(52.7% .1 160.59);
2503
- --cirth-meter-suboptimum-color: oklch(48.3% .086 78);
2504
- --cirth-meter-even-less-good-color: oklch(44% .151 29.73);
2505
- background: none;
2506
- }
2507
-
2508
- .cirth kbd {
2509
- border: var(--cirth-border-width) solid var(--cirth-print-border-color);
2510
- }
2511
-
2512
- .cirth :is(button, [type="submit"], [type="reset"], [type="button"], [role="button"]) {
2513
- border-color: var(--cirth-print-border-color);
2514
- box-shadow: none;
2515
- color: var(--cirth-print-color);
2516
- background: none;
2517
- }
2518
-
2519
- .cirth [type="file"]::file-selector-button {
2520
- border-color: var(--cirth-print-border-color);
2521
- box-shadow: none;
2522
- color: var(--cirth-print-color);
2523
- background: none;
2524
- }
2525
-
2526
- .cirth :is(mark, meter, progress, [type="checkbox"], [type="radio"]) {
2527
- -webkit-print-color-adjust: exact;
2528
- print-color-adjust: exact;
2529
- }
2530
-
2531
- .cirth a[href^="http"]:not([role="button"], nav a):after {
2532
- content: " (" attr(href) ")";
2533
- color: var(--cirth-print-muted-color);
2534
- font-size: var(--cirth-font-size-sm);
2535
- word-break: break-all;
2536
- }
2537
-
2538
- .cirth thead {
2539
- display: table-header-group;
2540
- }
2541
-
2542
- .cirth tfoot {
2543
- display: table-footer-group;
2544
- }
2545
-
2546
- .cirth tr {
2547
- break-inside: avoid;
2548
- }
2549
-
2550
- .cirth pre {
2551
- white-space: pre-wrap;
2552
- overflow: visible;
2553
- }
2554
-
2555
- .cirth dialog {
2556
- backdrop-filter: none;
2557
- min-width: 0;
2558
- min-height: 0;
2559
- position: static;
2560
- }
2561
-
2562
- .cirth dialog > article {
2563
- max-height: none;
2564
- overflow: visible;
2565
- }
2566
-
2567
- .cirth :is(h1, h2, h3, h4, h5, h6) {
2568
- break-after: avoid;
2569
- }
2570
-
2571
- .cirth :is(figure, img) {
2572
- break-inside: avoid;
2573
- }
2574
-
2575
- .cirth :is(blockquote, li, p) {
2576
- orphans: 3;
2577
- widows: 3;
2578
- }
2579
- }