@cirthcss/cirth 0.11.0 → 0.13.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 +316 -499
  3. package/dist/cirth.classless.min.css +1 -1
  4. package/dist/cirth.classless.scoped.css +315 -490
  5. package/dist/cirth.classless.scoped.min.css +1 -1
  6. package/dist/cirth.css +399 -507
  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 +398 -498
  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.css CHANGED
@@ -228,7 +228,7 @@ button {
228
228
  }
229
229
 
230
230
  button, [type="submit"], [type="reset"], [type="button"] {
231
- -webkit-appearance: button;
231
+ appearance: auto;
232
232
  }
233
233
 
234
234
  button, [type="submit"], [type="reset"], [type="button"], [role="button"] {
@@ -237,6 +237,7 @@ button, [type="submit"], [type="reset"], [type="button"], [role="button"] {
237
237
  --cirth-color: var(--cirth-primary-inverse);
238
238
  --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 #0000);
239
239
  max-width: 100%;
240
+ 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);
240
241
  padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
241
242
  border: var(--cirth-border-width) solid var(--cirth-border-color);
242
243
  border-radius: var(--cirth-border-radius);
@@ -261,6 +262,7 @@ button, [type="submit"], [type="reset"], [type="button"], [role="button"] {
261
262
  --cirth-color: var(--cirth-primary-inverse);
262
263
  --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 #0000);
263
264
  max-width: 100%;
265
+ 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);
264
266
  padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
265
267
  border: var(--cirth-border-width) solid var(--cirth-border-color);
266
268
  border-radius: var(--cirth-border-radius);
@@ -514,7 +516,7 @@ legend {
514
516
  }
515
517
 
516
518
  [type="search"] {
517
- -webkit-appearance: textfield;
519
+ appearance: textfield;
518
520
  outline-offset: -2px;
519
521
  }
520
522
 
@@ -523,7 +525,7 @@ legend {
523
525
  }
524
526
 
525
527
  ::file-selector-button {
526
- -webkit-appearance: button;
528
+ appearance: auto;
527
529
  font: inherit;
528
530
  }
529
531
 
@@ -537,7 +539,11 @@ legend {
537
539
  }
538
540
 
539
541
  input:not([type="checkbox"], [type="radio"], [type="range"]) {
540
- height: calc(var(--cirth-size-4) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
542
+ height: calc(var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
543
+ }
544
+
545
+ select, textarea {
546
+ 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);
541
547
  }
542
548
 
543
549
  fieldset {
@@ -591,6 +597,12 @@ input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [re
591
597
  --cirth-border-color: var(--cirth-form-element-active-border-color);
592
598
  }
593
599
 
600
+ input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="range"], [type="file"], [readonly]):hover:not(:active, :focus, [disabled], [aria-invalid]), :where(select, textarea):not([readonly]):hover:not(:active, :focus, [disabled], [aria-invalid]) {
601
+ --cirth-border-color: color-mix(in oklch,
602
+ var(--cirth-form-element-border-color) 65%,
603
+ var(--cirth-color));
604
+ }
605
+
594
606
  input:not([type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [readonly]):focus, :where(select, textarea):not([readonly]):focus {
595
607
  --cirth-box-shadow: 0 0 0 var(--cirth-outline-width)
596
608
  var(--cirth-form-element-focus-color);
@@ -609,7 +621,7 @@ label[aria-disabled="true"] input[disabled] {
609
621
  :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)) {
610
622
  padding-inline: var(--cirth-form-element-spacing-horizontal) calc(var(--cirth-form-element-spacing-horizontal) + var(--cirth-space-6));
611
623
  background-position: center right var(--cirth-space-3);
612
- background-size: var(--cirth-size-4) auto;
624
+ background-size: var(--cirth-font-size-md) auto;
613
625
  background-repeat: no-repeat;
614
626
  }
615
627
 
@@ -668,7 +680,7 @@ select:not([multiple], [size]) {
668
680
  padding-inline: var(--cirth-form-element-spacing-horizontal) calc(var(--cirth-form-element-spacing-horizontal) + var(--cirth-space-6));
669
681
  background-image: var(--cirth-icon-chevron);
670
682
  background-position: center right var(--cirth-space-3);
671
- background-size: var(--cirth-size-4) auto;
683
+ background-size: var(--cirth-font-size-md) auto;
672
684
  background-repeat: no-repeat;
673
685
  }
674
686
 
@@ -686,12 +698,16 @@ textarea {
686
698
  display: block;
687
699
  }
688
700
 
701
+ textarea:not([rows]) {
702
+ min-block-size: calc(4lh + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
703
+ }
704
+
689
705
  textarea:is([aria-invalid], :user-invalid:not([aria-invalid], [type="range"]):not(select:focus)) {
690
- --cirth-icon-height: calc(var(--cirth-size-4) * var(--cirth-line-height) +
706
+ --cirth-icon-height: calc(var(--cirth-font-size-md) * var(--cirth-line-height) +
691
707
  var(--cirth-form-element-spacing-vertical) * 2 +
692
708
  var(--cirth-border-width) * 2);
693
709
  background-position: top right var(--cirth-space-3);
694
- background-size: var(--cirth-size-4) var(--cirth-icon-height);
710
+ background-size: var(--cirth-font-size-md) var(--cirth-icon-height);
695
711
  }
696
712
 
697
713
  :where(input, select, textarea, fieldset) + small {
@@ -733,10 +749,6 @@ label:has([type="checkbox"], [type="radio"]) {
733
749
  [type="checkbox"]:checked, [type="checkbox"]:checked:active, [type="checkbox"]:checked:focus, [type="radio"]:checked, [type="radio"]:checked:active, [type="radio"]:checked:focus {
734
750
  --cirth-background-color: var(--cirth-primary-background);
735
751
  --cirth-border-color: var(--cirth-primary-border);
736
- background-image: var(--cirth-icon-checkbox);
737
- background-position: center;
738
- background-repeat: no-repeat;
739
- background-size: .9em;
740
752
  }
741
753
 
742
754
  [type="checkbox"] ~ label, [type="radio"] ~ label {
@@ -749,13 +761,34 @@ label:has([type="checkbox"], [type="radio"]) {
749
761
  margin-inline-end: 1em;
750
762
  }
751
763
 
752
- [type="checkbox"]:indeterminate {
764
+ [type="checkbox"]:not([role="switch"]):checked:before, [type="checkbox"]:not([role="switch"]):indeterminate:before {
765
+ background-color: var(--cirth-primary-inverse);
766
+ content: "";
767
+ width: 100%;
768
+ height: 100%;
769
+ display: block;
770
+ mask-position: center;
771
+ mask-size: .9em;
772
+ mask-repeat: no-repeat;
773
+ }
774
+
775
+ @media (forced-colors: active) {
776
+ [type="checkbox"]:not([role="switch"]):checked:before, [type="checkbox"]:not([role="switch"]):indeterminate:before {
777
+ background-color: canvastext;
778
+ }
779
+ }
780
+
781
+ [type="checkbox"]:not([role="switch"]):checked:before {
782
+ mask-image: var(--cirth-icon-checkbox);
783
+ }
784
+
785
+ [type="checkbox"]:not([role="switch"]):indeterminate {
753
786
  --cirth-background-color: var(--cirth-primary-background);
754
787
  --cirth-border-color: var(--cirth-primary-border);
755
- background-image: var(--cirth-icon-minus);
756
- background-position: center;
757
- background-repeat: no-repeat;
758
- background-size: .9em;
788
+ }
789
+
790
+ [type="checkbox"]:not([role="switch"]):indeterminate:before {
791
+ mask-image: var(--cirth-icon-minus);
759
792
  }
760
793
 
761
794
  [type="radio"] {
@@ -764,7 +797,6 @@ label:has([type="checkbox"], [type="radio"]) {
764
797
 
765
798
  [type="radio"]:checked, [type="radio"]:checked:active, [type="radio"]:checked:focus {
766
799
  --cirth-background-color: var(--cirth-primary-inverse);
767
- background-image: none;
768
800
  border-width: .42em;
769
801
  }
770
802
 
@@ -802,7 +834,6 @@ label:has([type="checkbox"], [type="radio"]) {
802
834
  [type="checkbox"][role="switch"]:checked {
803
835
  --cirth-background-color: var(--cirth-switch-checked-background-color);
804
836
  --cirth-border-color: var(--cirth-switch-checked-background-color);
805
- background-image: none;
806
837
  }
807
838
 
808
839
  [type="checkbox"][role="switch"]:checked:before {
@@ -849,7 +880,7 @@ label:has([type="checkbox"], [type="radio"]) {
849
880
 
850
881
  input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]):is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
851
882
  --cirth-icon-position: var(--cirth-space-3);
852
- --cirth-icon-width: var(--cirth-size-4);
883
+ --cirth-icon-width: var(--cirth-font-size-md);
853
884
  min-width: 0;
854
885
  background-image: var(--cirth-icon-date);
855
886
  background-position: center right var(--cirth-icon-position);
@@ -923,6 +954,7 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
923
954
  }
924
955
 
925
956
  [type="file"]::file-selector-button {
957
+ min-block-size: 0;
926
958
  padding: calc(var(--cirth-form-element-spacing-vertical) * .5) var(--cirth-form-element-spacing-horizontal);
927
959
  margin-inline-end: calc(var(--cirth-spacing) / 2);
928
960
  }
@@ -1031,7 +1063,7 @@ details {
1031
1063
  }
1032
1064
 
1033
1065
  details summary {
1034
- line-height: var(--cirth-size-4);
1066
+ line-height: var(--cirth-font-size-md);
1035
1067
  cursor: pointer;
1036
1068
  transition: color var(--cirth-transition);
1037
1069
  list-style-type: none;
@@ -1050,18 +1082,28 @@ details summary::marker {
1050
1082
  }
1051
1083
 
1052
1084
  details summary:after {
1053
- width: var(--cirth-size-4);
1054
- height: var(--cirth-size-4);
1085
+ width: var(--cirth-font-size-md);
1086
+ height: var(--cirth-font-size-md);
1055
1087
  float: right;
1056
- background-image: var(--cirth-icon-chevron);
1057
- background-position: 100%;
1058
- background-size: var(--cirth-size-4) auto;
1059
- content: "";
1060
- transition: transform var(--cirth-transition);
1061
- background-repeat: no-repeat;
1088
+ background-color: var(--cirth-muted-color);
1089
+ mask-image: var(--cirth-icon-chevron);
1090
+ mask-position: 100%;
1091
+ mask-size: var(--cirth-font-size-md) auto;
1062
1092
  margin-inline-start: calc(var(--cirth-spacing, var(--cirth-space-4)) * .5);
1063
1093
  display: block;
1064
1094
  transform: rotate(-90deg);
1095
+ mask-repeat: no-repeat;
1096
+ }
1097
+
1098
+ @media (forced-colors: active) {
1099
+ details summary:after {
1100
+ background-color: canvastext;
1101
+ }
1102
+ }
1103
+
1104
+ details summary:after {
1105
+ content: "";
1106
+ transition: transform var(--cirth-transition);
1065
1107
  }
1066
1108
 
1067
1109
  details summary:focus {
@@ -1084,7 +1126,7 @@ details summary[role="button"] {
1084
1126
  }
1085
1127
 
1086
1128
  details summary[role="button"]:after {
1087
- height: calc(var(--cirth-size-4) * var(--cirth-line-height, var(--cirth-line-height-normal)));
1129
+ height: calc(var(--cirth-font-size-md) * var(--cirth-line-height, var(--cirth-line-height-normal)));
1088
1130
  }
1089
1131
 
1090
1132
  details[open] > summary {
@@ -1182,12 +1224,7 @@ article > footer {
1182
1224
  z-index: 2;
1183
1225
  }
1184
1226
 
1185
- [role="search"] > :has( + small:last-child) {
1186
- border-start-end-radius: var(--cirth-border-radius);
1187
- border-end-end-radius: var(--cirth-border-radius);
1188
- }
1189
-
1190
- [role="group"]:not(fieldset) > :has( + small:last-child) {
1227
+ [role="search"] > :has( + small:last-child), [role="group"]:not(fieldset) > :has( + small:last-child) {
1191
1228
  border-start-end-radius: var(--cirth-border-radius);
1192
1229
  border-end-end-radius: var(--cirth-border-radius);
1193
1230
  }
@@ -1200,98 +1237,27 @@ article > footer {
1200
1237
  width: auto;
1201
1238
  }
1202
1239
 
1203
- @supports selector(:has(*)) {
1204
- [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
1205
- --cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-button);
1206
- }
1207
-
1208
- [role="group"]:not(fieldset):has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
1209
- --cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-button);
1210
- }
1211
-
1212
- [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"], [aria-invalid]) {
1213
- border-color: #0000;
1214
- }
1215
-
1216
- [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select:not([aria-invalid]) {
1217
- border-color: #0000;
1218
- }
1219
-
1220
- [role="group"]:not(fieldset):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
- [role="group"]:not(fieldset):has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select:not([aria-invalid]) {
1225
- border-color: #0000;
1226
- }
1227
-
1228
- [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) {
1229
- --cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-input);
1230
- }
1231
-
1232
- [role="group"]:not(fieldset):has(input:not([type="submit"], [type="button"]):focus, select:focus) {
1233
- --cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-input);
1234
- }
1235
-
1236
- [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button {
1237
- --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1238
- var(--cirth-primary-border);
1239
- --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1240
- var(--cirth-primary-hover-border);
1241
- }
1242
-
1243
- [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"] {
1244
- --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1245
- var(--cirth-primary-border);
1246
- --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1247
- var(--cirth-primary-hover-border);
1248
- }
1249
-
1250
- [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"] {
1251
- --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1252
- var(--cirth-primary-border);
1253
- --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1254
- var(--cirth-primary-hover-border);
1255
- }
1256
-
1257
- [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"] {
1258
- --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1259
- var(--cirth-primary-border);
1260
- --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1261
- var(--cirth-primary-hover-border);
1262
- }
1263
-
1264
- [role="group"]:not(fieldset):has(input:not([type="submit"], [type="button"]):focus, select:focus) button {
1265
- --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1266
- var(--cirth-primary-border);
1267
- --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1268
- var(--cirth-primary-hover-border);
1269
- }
1240
+ [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus), [role="group"]:not(fieldset):has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
1241
+ --cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-button);
1242
+ }
1270
1243
 
1271
- [role="group"]:not(fieldset):has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"] {
1272
- --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1273
- var(--cirth-primary-border);
1274
- --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1275
- var(--cirth-primary-hover-border);
1276
- }
1244
+ [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"], [aria-invalid]), [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select:not([aria-invalid]), [role="group"]:not(fieldset):has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"], [aria-invalid]), [role="group"]:not(fieldset):has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select:not([aria-invalid]) {
1245
+ border-color: #0000;
1246
+ }
1277
1247
 
1278
- [role="group"]:not(fieldset):has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"] {
1279
- --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1280
- var(--cirth-primary-border);
1281
- --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1282
- var(--cirth-primary-hover-border);
1283
- }
1248
+ [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus), [role="group"]:not(fieldset):has(input:not([type="submit"], [type="button"]):focus, select:focus) {
1249
+ --cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-input);
1250
+ }
1284
1251
 
1285
- [role="group"]:not(fieldset):has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"] {
1286
- --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1287
- var(--cirth-primary-border);
1288
- --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1289
- var(--cirth-primary-hover-border);
1290
- }
1252
+ [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button, [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"], [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"], [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"], [role="group"]:not(fieldset):has(input:not([type="submit"], [type="button"]):focus, select:focus) button, [role="group"]:not(fieldset):has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"], [role="group"]:not(fieldset):has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"], [role="group"]:not(fieldset):has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"] {
1253
+ --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1254
+ var(--cirth-primary-border);
1255
+ --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1256
+ var(--cirth-primary-hover-border);
1257
+ }
1291
1258
 
1292
- [role="search"] button:focus, [role="search"] [type="submit"]:focus, [role="search"] [type="reset"]:focus, [role="search"] [type="button"]:focus, [role="search"] [role="button"]:focus, [role="group"]:not(fieldset) button:focus, [role="group"]:not(fieldset) [type="submit"]:focus, [role="group"]:not(fieldset) [type="reset"]:focus, [role="group"]:not(fieldset) [type="button"]:focus, [role="group"]:not(fieldset) [role="button"]:focus {
1293
- box-shadow: none;
1294
- }
1259
+ [role="search"] button:focus, [role="search"] [type="submit"]:focus, [role="search"] [type="reset"]:focus, [role="search"] [type="button"]:focus, [role="search"] [role="button"]:focus, [role="group"]:not(fieldset) button:focus, [role="group"]:not(fieldset) [type="submit"]:focus, [role="group"]:not(fieldset) [type="reset"]:focus, [role="group"]:not(fieldset) [type="button"]:focus, [role="group"]:not(fieldset) [role="button"]:focus {
1260
+ box-shadow: none;
1295
1261
  }
1296
1262
 
1297
1263
  [role="search"] > :not([hidden], input[type="hidden"]):nth-child(1 of :not([hidden], input[type="hidden"])) {
@@ -1299,12 +1265,7 @@ article > footer {
1299
1265
  border-end-start-radius: var(--cirth-radius-pill);
1300
1266
  }
1301
1267
 
1302
- [role="search"] > :not([hidden], input[type="hidden"]):nth-last-child(1 of :not([hidden], input[type="hidden"])) {
1303
- border-start-end-radius: var(--cirth-radius-pill);
1304
- border-end-end-radius: var(--cirth-radius-pill);
1305
- }
1306
-
1307
- [role="search"] > :has( + small:last-child) {
1268
+ [role="search"] > :not([hidden], input[type="hidden"]):nth-last-child(1 of :not([hidden], input[type="hidden"])), [role="search"] > :has( + small:last-child) {
1308
1269
  border-start-end-radius: var(--cirth-radius-pill);
1309
1270
  border-end-end-radius: var(--cirth-radius-pill);
1310
1271
  }
@@ -1318,13 +1279,10 @@ article > footer {
1318
1279
  vertical-align: -.125em;
1319
1280
  width: 1em;
1320
1281
  height: 1em;
1321
- -webkit-mask-image: var(--cirth-icon-loading);
1322
1282
  mask-image: var(--cirth-icon-loading);
1323
1283
  background-color: currentColor;
1324
1284
  display: inline-block;
1325
- -webkit-mask-size: 1em;
1326
1285
  mask-size: 1em;
1327
- -webkit-mask-repeat: no-repeat;
1328
1286
  mask-repeat: no-repeat;
1329
1287
  }
1330
1288
 
@@ -1365,7 +1323,7 @@ button[aria-busy="true"], [type="submit"][aria-busy="true"], [type="button"][ari
1365
1323
  meter {
1366
1324
  appearance: none;
1367
1325
  width: 100%;
1368
- height: var(--cirth-size-2);
1326
+ height: var(--cirth-space-2);
1369
1327
  margin-bottom: calc(var(--cirth-spacing) * .5);
1370
1328
  border: var(--cirth-border-width-1) solid var(--cirth-meter-border-color);
1371
1329
  border-radius: var(--cirth-border-radius);
@@ -1469,7 +1427,7 @@ dialog > article > header > * {
1469
1427
  }
1470
1428
 
1471
1429
  dialog > article > header :is(a, button)[rel="prev"] {
1472
- margin: 0;
1430
+ 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);
1473
1431
  float: right;
1474
1432
  margin-inline-start: var(--cirth-spacing);
1475
1433
  padding: 0;
@@ -1488,22 +1446,37 @@ dialog > article > footer button:not(:first-of-type), dialog > article > footer
1488
1446
  }
1489
1447
 
1490
1448
  dialog > article :is(a, button)[rel="prev"] {
1491
- width: var(--cirth-size-4);
1492
- height: var(--cirth-size-4);
1493
- margin-top: calc(var(--cirth-spacing) * -1);
1494
- margin-bottom: var(--cirth-spacing);
1495
- background-image: var(--cirth-icon-close);
1496
- background-position: center;
1497
- background-size: auto var(--cirth-size-4);
1449
+ 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);
1450
+ 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);
1451
+ 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));
1452
+ 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);
1453
+ 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));
1498
1454
  opacity: .5;
1499
1455
  transition: opacity var(--cirth-transition);
1500
1456
  background-color: #0000;
1501
- background-repeat: no-repeat;
1502
1457
  border: none;
1503
1458
  margin-inline-start: auto;
1504
1459
  display: block;
1505
1460
  }
1506
1461
 
1462
+ dialog > article :is(a, button)[rel="prev"]:before {
1463
+ background-color: var(--cirth-muted-color);
1464
+ content: "";
1465
+ width: 100%;
1466
+ height: 100%;
1467
+ mask-image: var(--cirth-icon-close);
1468
+ mask-position: center;
1469
+ mask-size: auto var(--cirth-font-size-md);
1470
+ display: block;
1471
+ mask-repeat: no-repeat;
1472
+ }
1473
+
1474
+ @media (forced-colors: active) {
1475
+ dialog > article :is(a, button)[rel="prev"]:before {
1476
+ background-color: canvastext;
1477
+ }
1478
+ }
1479
+
1507
1480
  dialog > article :is(a, button)[rel="prev"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
1508
1481
  opacity: 1;
1509
1482
  }
@@ -1516,7 +1489,7 @@ dialog:not([open]), dialog[open="false"] {
1516
1489
  float: left;
1517
1490
  }
1518
1491
 
1519
- html:has(dialog[open]) {
1492
+ html:has(dialog:modal) {
1520
1493
  overflow: hidden;
1521
1494
  }
1522
1495
 
@@ -1573,6 +1546,7 @@ nav li [role="group"]:not(fieldset), nav li [role="search"] {
1573
1546
 
1574
1547
  nav li button, nav li [role="button"], nav li [type="button"], nav li input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), nav li select {
1575
1548
  height: auto;
1549
+ min-block-size: var(--cirth-space-6);
1576
1550
  margin-inline: inherit;
1577
1551
  padding: calc(var(--cirth-nav-link-spacing-vertical) - var(--cirth-border-width) * 2) var(--cirth-nav-link-spacing-horizontal);
1578
1552
  margin-bottom: 0;
@@ -1642,6 +1616,8 @@ aside li [role="button"] {
1642
1616
  box-shadow: var(--cirth-popover-box-shadow);
1643
1617
  color: var(--cirth-popover-color);
1644
1618
  transition: opacity var(--cirth-transition), display var(--cirth-transition) allow-discrete, overlay var(--cirth-transition) allow-discrete;
1619
+ margin: auto;
1620
+ inset: 0;
1645
1621
  }
1646
1622
 
1647
1623
  @starting-style {
@@ -1658,7 +1634,7 @@ progress {
1658
1634
  vertical-align: baseline;
1659
1635
  appearance: none;
1660
1636
  width: 100%;
1661
- height: var(--cirth-size-2);
1637
+ height: var(--cirth-space-2);
1662
1638
  margin-bottom: calc(var(--cirth-spacing) * .5);
1663
1639
  border: var(--cirth-border-width-1) solid var(--cirth-progress-border-color);
1664
1640
  border-radius: var(--cirth-border-radius);
@@ -1744,27 +1720,23 @@ progress::-moz-progress-bar {
1744
1720
  }
1745
1721
 
1746
1722
  :root, :host {
1747
- --cirth-color-black: #000;
1748
- --cirth-color-white: #fff;
1749
- --cirth-color-transparent: transparent;
1750
- --cirth-color-current: currentColor;
1751
1723
  --cirth-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
1752
1724
  --cirth-font-family-sans: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial,
1753
1725
  "Helvetica Neue", sans-serif, var(--cirth-font-family-emoji);
1754
1726
  --cirth-font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif;
1755
1727
  --cirth-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
1756
1728
  monospace, var(--cirth-font-family-emoji);
1757
- --cirth-font-family-display: var(--cirth-font-family-serif);
1758
1729
  --cirth-font-size-xs: .75rem;
1759
1730
  --cirth-font-size-sm: .875rem;
1760
1731
  --cirth-font-size-md: 1rem;
1761
1732
  --cirth-font-size-lg: 1.125rem;
1762
1733
  --cirth-font-size-xl: 1.25rem;
1763
- --cirth-font-size-2xl: 1.425rem;
1764
- --cirth-font-size-3xl: 1.6rem;
1765
- --cirth-font-size-4xl: 1.8rem;
1766
- --cirth-font-size-5xl: 2rem;
1767
- --cirth-font-size-6xl: 2.3rem;
1734
+ --cirth-font-size-2xl: 1.5rem;
1735
+ --cirth-font-size-3xl: 1.75rem;
1736
+ --cirth-font-size-4xl: 2rem;
1737
+ --cirth-font-size-5xl: 2.25rem;
1738
+ --cirth-font-size-6xl: 2.75rem;
1739
+ --cirth-font-size-7xl: 3.5rem;
1768
1740
  --cirth-font-weight-light: 300;
1769
1741
  --cirth-font-weight-regular: 400;
1770
1742
  --cirth-font-weight-medium: 500;
@@ -1791,19 +1763,6 @@ progress::-moz-progress-bar {
1791
1763
  --cirth-space-16: 4rem;
1792
1764
  --cirth-space-20: 5rem;
1793
1765
  --cirth-space-24: 6rem;
1794
- --cirth-size-0: 0;
1795
- --cirth-size-1: .25rem;
1796
- --cirth-size-2: .5rem;
1797
- --cirth-size-3: .75rem;
1798
- --cirth-size-4: 1rem;
1799
- --cirth-size-5: 1.25rem;
1800
- --cirth-size-6: 1.5rem;
1801
- --cirth-size-8: 2rem;
1802
- --cirth-size-10: 2.5rem;
1803
- --cirth-size-12: 3rem;
1804
- --cirth-size-16: 4rem;
1805
- --cirth-size-20: 5rem;
1806
- --cirth-size-24: 6rem;
1807
1766
  --cirth-radius-none: 0;
1808
1767
  --cirth-radius-xs: .125rem;
1809
1768
  --cirth-radius-sm: .25rem;
@@ -1816,9 +1775,6 @@ progress::-moz-progress-bar {
1816
1775
  --cirth-border-width-1: .0625rem;
1817
1776
  --cirth-border-width-2: .125rem;
1818
1777
  --cirth-border-width-4: .25rem;
1819
- --cirth-outline-width-1: .0625rem;
1820
- --cirth-outline-width-2: .125rem;
1821
- --cirth-outline-width-4: .25rem;
1822
1778
  --cirth-duration-instant: 0s;
1823
1779
  --cirth-duration-fast: .1s;
1824
1780
  --cirth-duration-normal: .2s;
@@ -1829,7 +1785,6 @@ progress::-moz-progress-bar {
1829
1785
  --cirth-ease-out: cubic-bezier(0, 0, .2, 1);
1830
1786
  --cirth-ease-in-out: cubic-bezier(.4, 0, .2, 1);
1831
1787
  --cirth-opacity-disabled: .5;
1832
- --cirth-opacity-muted: .72;
1833
1788
  --cirth-opacity-overlay: .75;
1834
1789
  --cirth-z-index-dropdown: 1000;
1835
1790
  --cirth-z-index-sticky: 1020;
@@ -1837,6 +1792,7 @@ progress::-moz-progress-bar {
1837
1792
  --cirth-z-index-modal-backdrop: 1040;
1838
1793
  --cirth-z-index-modal: 1050;
1839
1794
  --cirth-font-family: var(--cirth-font-family-sans);
1795
+ --cirth-font-family-display: var(--cirth-font-family-serif);
1840
1796
  --cirth-line-height: var(--cirth-line-height-normal);
1841
1797
  --cirth-font-weight: var(--cirth-font-weight-regular);
1842
1798
  --cirth-font-size: 100%;
@@ -1848,7 +1804,8 @@ progress::-moz-progress-bar {
1848
1804
  --cirth-code-border-radius: min(var(--cirth-border-radius),
1849
1805
  var(--cirth-radius-sm));
1850
1806
  --cirth-border-width: var(--cirth-border-width-1);
1851
- --cirth-outline-width: var(--cirth-outline-width-2);
1807
+ --cirth-outline-width: var(--cirth-border-width-2);
1808
+ --cirth-background-color: var(--cirth-canvas);
1852
1809
  --cirth-transition: var(--cirth-duration-normal) var(--cirth-ease-out);
1853
1810
  --cirth-spacing: var(--cirth-space-4);
1854
1811
  --cirth-typography-spacing-vertical: var(--cirth-space-4);
@@ -1876,13 +1833,9 @@ progress::-moz-progress-bar {
1876
1833
  --cirth-nav-link-spacing-vertical: var(--cirth-space-2);
1877
1834
  --cirth-nav-link-spacing-horizontal: var(--cirth-space-2);
1878
1835
  --cirth-nav-breadcrumb-divider: ">";
1879
- --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");
1880
- --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");
1881
- --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");
1882
- --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");
1883
- --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");
1884
- --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");
1885
- --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");
1836
+ --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");
1837
+ --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");
1838
+ --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");
1886
1839
  --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");
1887
1840
  }
1888
1841
 
@@ -1904,21 +1857,27 @@ h4, h5, h6 {
1904
1857
  }
1905
1858
 
1906
1859
  h1 {
1907
- --cirth-font-size: clamp(2.25rem, 1.7rem + 2.2vw, 3.5rem);
1860
+ --cirth-font-size: clamp(var(--cirth-font-size-5xl),
1861
+ 1.7rem + 2.2vw,
1862
+ var(--cirth-font-size-7xl));
1908
1863
  --cirth-line-height: var(--cirth-line-height-tight);
1909
1864
  --cirth-letter-spacing: var(--cirth-letter-spacing-tight);
1910
1865
  --cirth-typography-spacing-top: var(--cirth-space-12);
1911
1866
  }
1912
1867
 
1913
1868
  h2 {
1914
- --cirth-font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem);
1869
+ --cirth-font-size: clamp(var(--cirth-font-size-2xl),
1870
+ 1.3rem + 1vw,
1871
+ var(--cirth-font-size-4xl));
1915
1872
  --cirth-line-height: 1.15;
1916
1873
  --cirth-letter-spacing: var(--cirth-letter-spacing-tight);
1917
1874
  --cirth-typography-spacing-top: var(--cirth-space-12);
1918
1875
  }
1919
1876
 
1920
1877
  h3 {
1921
- --cirth-font-size: clamp(1.25rem, 1.15rem + .5vw, 1.5rem);
1878
+ --cirth-font-size: clamp(var(--cirth-font-size-xl),
1879
+ 1.15rem + .5vw,
1880
+ var(--cirth-font-size-2xl));
1922
1881
  --cirth-line-height: 1.2;
1923
1882
  --cirth-letter-spacing: var(--cirth-letter-spacing-snug);
1924
1883
  --cirth-typography-spacing-top: var(--cirth-space-10);
@@ -1966,7 +1925,7 @@ kbd {
1966
1925
  }
1967
1926
 
1968
1927
  input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), :where(select, textarea) {
1969
- --cirth-outline-width: var(--cirth-outline-width-1);
1928
+ --cirth-outline-width: var(--cirth-border-width-1);
1970
1929
  --cirth-line-height: var(--cirth-line-height-relaxed);
1971
1930
  }
1972
1931
 
@@ -2012,107 +1971,131 @@ details summary[role="button"]:after {
2012
1971
  filter: brightness(0) invert();
2013
1972
  }
2014
1973
 
1974
+ :root, :host {
1975
+ --cirth-canvas: light-dark(oklch(97.4% .004 69.35), oklch(20.15% .003 264));
1976
+ --cirth-color: light-dark(oklch(35.3% .021 264), oklch(83% .016 264));
1977
+ --cirth-text-selection-color: light-dark(oklch(65.7% .121 69.35 / .25), oklch(70% .129 69.35 / .1875));
1978
+ --cirth-muted-color: light-dark(oklch(52.7% .032 264), oklch(61.3% .032 264));
1979
+ --cirth-muted-border-color: light-dark(oklch(93.85% .003 264), oklch(26.7% .011 264));
1980
+ --cirth-error: light-dark(oklch(44% .151 29.73), oklch(74.3% .133 29.73));
1981
+ --cirth-success: light-dark(oklch(52.7% .1 160.59), oklch(65.7% .125 160.59));
1982
+ --cirth-warning: light-dark(oklch(48.3% .086 78), oklch(70% .124 78));
1983
+ --cirth-primary: light-dark(oklch(52.7% .097 69.35), oklch(70% .129 69.35));
1984
+ --cirth-secondary: light-dark(oklch(52.7% .032 264), oklch(70% .028 264));
1985
+ --cirth-secondary-underline: light-dark(oklch(52.7% .032 264 / .5), oklch(70% .028 264 / .5));
1986
+ --cirth-secondary-hover: light-dark(oklch(44% .028 264), oklch(78.7% .021 264));
1987
+ --cirth-secondary-hover-background: light-dark(oklch(44% .028 264), oklch(52.7% .032 264));
1988
+ --cirth-secondary-focus: light-dark(oklch(48.3% .03 264 / .7), oklch(70% .028 264 / .7));
1989
+ --cirth-contrast: light-dark(oklch(22.3% .006 264), oklch(91.7% .006 264));
1990
+ --cirth-contrast-background: light-dark(oklch(22.3% .006 264), oklch(96% 0 264));
1991
+ --cirth-contrast-underline: light-dark(oklch(22.3% .006 264 / .5), oklch(91.7% .006 264 / .5));
1992
+ --cirth-contrast-hover: light-dark(oklch(0% 0 0), oklch(100% 0 0));
1993
+ --cirth-contrast-hover-background: light-dark(oklch(0% 0 0), oklch(100% 0 0));
1994
+ --cirth-contrast-focus: light-dark(oklch(48.3% .03 264 / .7), oklch(87.3% .011 264 / .5));
1995
+ --cirth-contrast-inverse: light-dark(oklch(100% 0 0), oklch(0% 0 0));
1996
+ --cirth-link-visited-color: light-dark(oklch(48.3% .03 264), oklch(65.7% .03 264));
1997
+ --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),
1998
+ .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));
1999
+ --cirth-h1-color: light-dark(oklch(22.3% .006 264), oklch(96% 0 264));
2000
+ --cirth-h2-color: light-dark(oklch(26.7% .011 264), oklch(91.7% .006 264));
2001
+ --cirth-h3-color: light-dark(oklch(31% .016 264), oklch(83% .016 264));
2002
+ --cirth-h4-color: light-dark(oklch(35.3% .021 264), oklch(78.7% .021 264));
2003
+ --cirth-h5-color: light-dark(oklch(39.7% .025 264), oklch(74.3% .025 264));
2004
+ --cirth-h6-color: light-dark(oklch(44% .028 264), oklch(65.7% .03 264));
2005
+ --cirth-mark-color: light-dark(oklch(18% 0 264), oklch(100% 0 0));
2006
+ --cirth-code-background-color: light-dark(oklch(97% 0 288), oklch(23.4% .00725 264));
2007
+ --cirth-code-color: light-dark(oklch(52.7% .032 264), oklch(65.7% .03 264));
2008
+ --cirth-form-element-background-color: light-dark(oklch(99% 0 336), oklch(24.5% .0085 264));
2009
+ --cirth-form-element-selected-background-color: light-dark(oklch(91.7% .006 264), oklch(31% .016 264));
2010
+ --cirth-form-element-border-color: light-dark(oklch(61.3% .032 264), oklch(52.7% .032 264));
2011
+ --cirth-form-element-color: light-dark(oklch(26.7% .011 264), oklch(91.7% .006 264));
2012
+ --cirth-form-element-active-background-color: light-dark(oklch(100% 0 0), oklch(23.4% .00725 264));
2013
+ --cirth-switch-background-color: light-dark(oklch(61.3% .032 264), oklch(52.7% .032 264));
2014
+ --cirth-range-border-color: light-dark(oklch(91.7% .006 264), oklch(26.7% .011 264));
2015
+ --cirth-range-active-border-color: light-dark(oklch(83% .016 264), oklch(31% .016 264));
2016
+ --cirth-card-background-color: light-dark(oklch(100% 0 0), oklch(22.3% .006 264));
2017
+ --cirth-card-sectioning-background-color: light-dark(oklch(99% 0 336), oklch(23.4% .00725 264));
2018
+ --cirth-dropdown-background-color: light-dark(oklch(100% 0 0), oklch(22.3% .006 264));
2019
+ --cirth-dropdown-border-color: light-dark(oklch(96% 0 264), oklch(26.7% .011 264));
2020
+ --cirth-dropdown-hover-background-color: light-dark(oklch(96% 0 264), oklch(26.7% .011 264));
2021
+ --cirth-progress-background-color: light-dark(oklch(91.7% .006 264), oklch(26.7% .011 264));
2022
+ --cirth-progress-border-color: light-dark(oklch(61.3% .032 264), oklch(52.7% .032 264));
2023
+ }
2024
+
2015
2025
  :where([data-theme="light"]), :root:where(:not([data-theme="dark"])), :host(:where(:not([data-theme="dark"]))) {
2016
- --lightningcss-light: initial;
2017
- --lightningcss-dark: ;
2018
2026
  color-scheme: light;
2019
- --cirth-background-color: oklch(97.4% .004 69.35);
2020
- --cirth-color: oklch(35.3% .021 264);
2021
- --cirth-text-selection-color: oklch(65.7% .121 69.35 / .25);
2022
- --cirth-muted-color: oklch(52.7% .032 264);
2023
- --cirth-muted-border-color: oklch(93.85% .003 264);
2024
- --cirth-primary: oklch(52.7% .097 69.35);
2025
- --cirth-primary-background: oklch(52.7% .097 69.35);
2027
+ --cirth-error-text: color-mix(in oklch, var(--cirth-error) 80.2%, black);
2028
+ --cirth-error-border: oklch(from var(--cirth-error) calc(l * 1.493) calc(c * 1.298) h);
2029
+ --cirth-error-active: oklch(from var(--cirth-error) calc(l * 1.198) calc(c * 1.199) h);
2030
+ --cirth-error-surface: oklch(from var(--cirth-error) 93% .05 h);
2031
+ --cirth-success-text: color-mix(in oklch, var(--cirth-success) 67%, black);
2032
+ --cirth-success-border: oklch(from var(--cirth-success) calc(l * 1.163) calc(c * 1.17) h);
2033
+ --cirth-success-active: var(--cirth-success);
2034
+ --cirth-success-surface: oklch(from var(--cirth-success) 93% .05 h);
2035
+ --cirth-warning-text: color-mix(in oklch, var(--cirth-warning) 73.1%, black);
2036
+ --cirth-warning-border: oklch(from var(--cirth-warning) calc(l * 1.269) calc(c * 1.267) h);
2037
+ --cirth-warning-active: oklch(from var(--cirth-warning) calc(l * 1.091) calc(c * 1.081) h);
2038
+ --cirth-warning-surface: oklch(from var(--cirth-warning) 93% .05 h);
2039
+ --cirth-primary-background: var(--cirth-primary);
2026
2040
  --cirth-primary-border: var(--cirth-primary-background);
2027
- --cirth-primary-underline: oklch(52.7% .097 69.35 / .5);
2028
- --cirth-primary-hover: oklch(44% .081 69.35);
2029
- --cirth-primary-hover-background: oklch(48.3% .089 69.35);
2041
+ --cirth-primary-underline: oklch(from var(--cirth-primary) l c h / 50%);
2042
+ --cirth-primary-hover: color-mix(in oklch, var(--cirth-primary) 83.5%, black);
2043
+ --cirth-primary-hover-background: color-mix(in oklch,
2044
+ var(--cirth-primary) 91.7%,
2045
+ black);
2030
2046
  --cirth-primary-hover-border: var(--cirth-primary-hover-background);
2031
2047
  --cirth-primary-hover-underline: var(--cirth-primary-hover);
2032
- --cirth-primary-focus: oklch(52.7% .097 69.35 / .75);
2048
+ --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 75%);
2033
2049
  --cirth-primary-inverse: oklch(100% 0 0);
2034
- --cirth-secondary: oklch(52.7% .032 264);
2035
2050
  --cirth-secondary-background: oklch(48.3% .03 264);
2036
2051
  --cirth-secondary-border: var(--cirth-secondary-background);
2037
- --cirth-secondary-underline: oklch(52.7% .032 264 / .5);
2038
- --cirth-secondary-hover: oklch(44% .028 264);
2039
- --cirth-secondary-hover-background: oklch(44% .028 264);
2040
2052
  --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
2041
2053
  --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
2042
- --cirth-secondary-focus: oklch(48.3% .03 264 / .7);
2043
2054
  --cirth-secondary-inverse: oklch(100% 0 0);
2044
- --cirth-contrast: oklch(22.3% .006 264);
2045
- --cirth-contrast-background: oklch(22.3% .006 264);
2046
2055
  --cirth-contrast-border: var(--cirth-contrast-background);
2047
- --cirth-contrast-underline: oklch(22.3% .006 264 / .5);
2048
- --cirth-contrast-hover: oklch(0% 0 0);
2049
- --cirth-contrast-hover-background: oklch(0% 0 0);
2050
2056
  --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
2051
2057
  --cirth-contrast-hover-underline: var(--cirth-secondary-hover);
2052
- --cirth-contrast-focus: oklch(48.3% .03 264 / .7);
2053
- --cirth-contrast-inverse: oklch(100% 0 0);
2054
- --cirth-link-visited-color: oklch(48.3% .03 264);
2055
- --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);
2056
- --cirth-h1-color: oklch(22.3% .006 264);
2057
- --cirth-h2-color: oklch(26.7% .011 264);
2058
- --cirth-h3-color: oklch(31% .016 264);
2059
- --cirth-h4-color: oklch(35.3% .021 264);
2060
- --cirth-h5-color: oklch(39.7% .025 264);
2061
- --cirth-h6-color: oklch(44% .028 264);
2062
- --cirth-mark-background-color: oklch(93% .05 78);
2063
- --cirth-mark-color: oklch(18% 0 264);
2064
- --cirth-ins-color: oklch(35.3% .067 160.59);
2065
- --cirth-del-color: oklch(35.3% .122 29.73);
2058
+ --cirth-mark-background-color: var(--cirth-warning-surface);
2059
+ --cirth-ins-color: var(--cirth-success-text);
2060
+ --cirth-del-color: var(--cirth-error-text);
2066
2061
  --cirth-blockquote-border-color: var(--cirth-muted-border-color);
2067
2062
  --cirth-blockquote-footer-color: var(--cirth-muted-color);
2068
2063
  --cirth-button-box-shadow: 0 0 0 #0000;
2069
2064
  --cirth-button-hover-box-shadow: 0 0 0 #0000;
2070
2065
  --cirth-table-border-color: var(--cirth-muted-border-color);
2071
2066
  --cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
2072
- --cirth-code-background-color: oklch(97% 0 288);
2073
- --cirth-code-color: oklch(52.7% .032 264);
2074
2067
  --cirth-code-kbd-background-color: var(--cirth-color);
2075
2068
  --cirth-code-kbd-color: var(--cirth-background-color);
2076
- --cirth-form-element-background-color: oklch(99% 0 336);
2077
- --cirth-form-element-selected-background-color: oklch(91.7% .006 264);
2078
- --cirth-form-element-border-color: oklch(61.3% .032 264);
2079
- --cirth-form-element-color: oklch(26.7% .011 264);
2080
2069
  --cirth-form-element-placeholder-color: var(--cirth-muted-color);
2081
- --cirth-form-element-active-background-color: oklch(100% 0 0);
2082
2070
  --cirth-form-element-active-border-color: var(--cirth-primary-border);
2083
2071
  --cirth-form-element-focus-color: var(--cirth-primary-border);
2084
2072
  --cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
2085
- --cirth-form-element-invalid-border-color: oklch(65.7% .196 29.73);
2086
- --cirth-form-element-invalid-active-border-color: oklch(52.7% .181 29.73);
2073
+ --cirth-form-element-invalid-border-color: var(--cirth-error-border);
2074
+ --cirth-form-element-invalid-active-border-color: var(--cirth-error-active);
2087
2075
  --cirth-form-element-invalid-focus-color: var(--cirth-form-element-invalid-active-border-color);
2088
- --cirth-form-element-valid-border-color: oklch(61.3% .117 160.59);
2089
- --cirth-form-element-valid-active-border-color: oklch(52.7% .1 160.59);
2076
+ --cirth-form-element-valid-border-color: var(--cirth-success-border);
2077
+ --cirth-form-element-valid-active-border-color: var(--cirth-success-active);
2090
2078
  --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
2091
- --cirth-switch-background-color: oklch(61.3% .032 264);
2079
+ --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
2092
2080
  --cirth-switch-checked-background-color: var(--cirth-primary-background);
2093
2081
  --cirth-switch-color: var(--cirth-primary-inverse);
2094
- --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
2095
- --cirth-range-border-color: oklch(91.7% .006 264);
2096
- --cirth-range-active-border-color: oklch(83% .016 264);
2097
2082
  --cirth-range-thumb-border-color: var(--cirth-background-color);
2098
2083
  --cirth-range-thumb-color: var(--cirth-secondary-background);
2099
2084
  --cirth-range-thumb-active-color: var(--cirth-primary-background);
2100
- --cirth-accordion-border-color: var(--cirth-muted-border-color);
2101
2085
  --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
2102
2086
  --cirth-accordion-close-summary-color: var(--cirth-color);
2103
2087
  --cirth-accordion-open-summary-color: var(--cirth-muted-color);
2104
- --cirth-card-background-color: oklch(100% 0 0);
2105
2088
  --cirth-card-border-color: var(--cirth-muted-border-color);
2106
2089
  --cirth-card-box-shadow: var(--cirth-box-shadow);
2107
- --cirth-card-sectioning-background-color: oklch(99% 0 336);
2108
- --cirth-loading-spinner-opacity: var(--cirth-opacity-disabled);
2109
2090
  --cirth-modal-overlay-background-color: oklch(93.85% .003 264deg / var(--cirth-opacity-overlay));
2110
- --cirth-meter-optimum-color: oklch(52.7% .1 160.59);
2111
- --cirth-meter-suboptimum-color: oklch(48.3% .086 78);
2112
- --cirth-meter-even-less-good-color: oklch(44% .151 29.73);
2113
- --cirth-progress-background-color: oklch(91.7% .006 264);
2114
- --cirth-progress-border-color: oklch(61.3% .032 264);
2091
+ --cirth-meter-optimum-color: var(--cirth-success);
2092
+ --cirth-meter-suboptimum-color: var(--cirth-warning);
2093
+ --cirth-meter-even-less-good-color: var(--cirth-error);
2115
2094
  --cirth-progress-color: var(--cirth-primary-background);
2095
+ --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");
2096
+ --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");
2097
+ --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");
2098
+ --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");
2116
2099
  --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");
2117
2100
  --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");
2118
2101
  }
@@ -2123,106 +2106,81 @@ details summary[role="button"]:after {
2123
2106
 
2124
2107
  @media only screen and (prefers-color-scheme: dark) {
2125
2108
  :root:where(:not([data-theme])), :host(:where(:not([data-theme]))) {
2126
- --lightningcss-light: ;
2127
- --lightningcss-dark: initial;
2128
2109
  color-scheme: dark;
2129
- --cirth-background-color: oklch(20.15% .003 264);
2130
- --cirth-color: oklch(83% .016 264);
2131
- --cirth-text-selection-color: oklch(70% .129 69.35 / .1875);
2132
- --cirth-muted-color: oklch(61.3% .032 264);
2133
- --cirth-muted-border-color: oklch(26.7% .011 264);
2134
- --cirth-primary: oklch(70% .129 69.35);
2135
- --cirth-primary-background: oklch(52.7% .097 69.35);
2110
+ --cirth-error-text: oklch(from var(--cirth-error) calc(l * 1.059) calc(c * .797) h);
2111
+ --cirth-error-border: oklch(from var(--cirth-error) calc(l * .942) calc(c * 1.226) h);
2112
+ --cirth-error-active: oklch(from var(--cirth-error) calc(l * 1.059) calc(c * .797) h);
2113
+ --cirth-error-surface: oklch(from var(--cirth-error) 35.3% .063 h);
2114
+ --cirth-success-text: oklch(from var(--cirth-success) calc(l * 1.198) calc(c * 1.2) h);
2115
+ --cirth-success-border: oklch(from var(--cirth-success) calc(l * 1.065) calc(c * 1.064) h);
2116
+ --cirth-success-active: oklch(from var(--cirth-success) calc(l * 1.198) calc(c * 1.2) h);
2117
+ --cirth-success-surface: oklch(from var(--cirth-success) 35.3% .063 h);
2118
+ --cirth-warning-text: oklch(from var(--cirth-warning) calc(l * 1.124) calc(c * 1.121) h);
2119
+ --cirth-warning-border: var(--cirth-warning);
2120
+ --cirth-warning-active: oklch(from var(--cirth-warning) calc(l * 1.124) calc(c * 1.121) h);
2121
+ --cirth-warning-surface: oklch(from var(--cirth-warning) 35.3% .063 h);
2122
+ --cirth-primary-background: color-mix(in oklch,
2123
+ var(--cirth-primary) 75.2%,
2124
+ black);
2136
2125
  --cirth-primary-border: var(--cirth-primary-background);
2137
- --cirth-primary-underline: oklch(70% .129 69.35 / .5);
2138
- --cirth-primary-hover: oklch(78.7% .146 69.35);
2139
- --cirth-primary-hover-background: oklch(57% .105 69.35);
2126
+ --cirth-primary-underline: oklch(from var(--cirth-primary) l c h / 50%);
2127
+ --cirth-primary-hover: oklch(from var(--cirth-primary) calc(l * 1.124) calc(c * 1.132) h);
2128
+ --cirth-primary-hover-background: color-mix(in oklch,
2129
+ var(--cirth-primary) 81.4%,
2130
+ black);
2140
2131
  --cirth-primary-hover-border: var(--cirth-primary-hover-background);
2141
2132
  --cirth-primary-hover-underline: var(--cirth-primary-hover);
2142
- --cirth-primary-focus: oklch(70% .129 69.35 / .7);
2133
+ --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 70%);
2143
2134
  --cirth-primary-inverse: oklch(100% 0 0);
2144
- --cirth-secondary: oklch(70% .028 264);
2145
2135
  --cirth-secondary-background: oklch(48.3% .03 264);
2146
2136
  --cirth-secondary-border: var(--cirth-secondary-background);
2147
- --cirth-secondary-underline: oklch(70% .028 264 / .5);
2148
- --cirth-secondary-hover: oklch(78.7% .021 264);
2149
- --cirth-secondary-hover-background: oklch(52.7% .032 264);
2150
2137
  --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
2151
2138
  --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
2152
- --cirth-secondary-focus: oklch(70% .028 264 / .7);
2153
2139
  --cirth-secondary-inverse: oklch(100% 0 0);
2154
- --cirth-contrast: oklch(91.7% .006 264);
2155
- --cirth-contrast-background: oklch(96% 0 264);
2156
2140
  --cirth-contrast-border: var(--cirth-contrast-background);
2157
- --cirth-contrast-underline: oklch(91.7% .006 264 / .5);
2158
- --cirth-contrast-hover: oklch(100% 0 0);
2159
- --cirth-contrast-hover-background: oklch(100% 0 0);
2160
2141
  --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
2161
2142
  --cirth-contrast-hover-underline: var(--cirth-contrast-hover);
2162
- --cirth-contrast-focus: oklch(87.3% .011 264 / .5);
2163
- --cirth-contrast-inverse: oklch(0% 0 0);
2164
- --cirth-link-visited-color: oklch(65.7% .03 264);
2165
- --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);
2166
- --cirth-h1-color: oklch(96% 0 264);
2167
- --cirth-h2-color: oklch(91.7% .006 264);
2168
- --cirth-h3-color: oklch(83% .016 264);
2169
- --cirth-h4-color: oklch(78.7% .021 264);
2170
- --cirth-h5-color: oklch(74.3% .025 264);
2171
- --cirth-h6-color: oklch(65.7% .03 264);
2172
- --cirth-mark-background-color: oklch(35.3% .063 78);
2173
- --cirth-mark-color: oklch(100% 0 0);
2174
- --cirth-ins-color: oklch(78.7% .15 160.59);
2175
- --cirth-del-color: oklch(78.7% .106 29.73);
2143
+ --cirth-mark-background-color: var(--cirth-warning-surface);
2144
+ --cirth-ins-color: var(--cirth-success-text);
2145
+ --cirth-del-color: var(--cirth-error-text);
2176
2146
  --cirth-blockquote-border-color: var(--cirth-muted-border-color);
2177
2147
  --cirth-blockquote-footer-color: var(--cirth-muted-color);
2178
2148
  --cirth-button-box-shadow: 0 0 0 #0000;
2179
2149
  --cirth-button-hover-box-shadow: 0 0 0 #0000;
2180
2150
  --cirth-table-border-color: var(--cirth-muted-border-color);
2181
2151
  --cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
2182
- --cirth-code-background-color: oklch(23.4% .00725 264);
2183
- --cirth-code-color: oklch(65.7% .03 264);
2184
2152
  --cirth-code-kbd-background-color: var(--cirth-color);
2185
2153
  --cirth-code-kbd-color: var(--cirth-background-color);
2186
- --cirth-form-element-background-color: oklch(24.5% .0085 264);
2187
- --cirth-form-element-selected-background-color: oklch(31% .016 264);
2188
- --cirth-form-element-border-color: oklch(52.7% .032 264);
2189
- --cirth-form-element-color: oklch(91.7% .006 264);
2190
2154
  --cirth-form-element-placeholder-color: oklch(65.7% .03 264);
2191
- --cirth-form-element-active-background-color: oklch(23.4% .00725 264);
2192
2155
  --cirth-form-element-active-border-color: var(--cirth-primary-border);
2193
2156
  --cirth-form-element-focus-color: var(--cirth-primary-border);
2194
2157
  --cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
2195
- --cirth-form-element-invalid-border-color: oklch(70% .163 29.73);
2196
- --cirth-form-element-invalid-active-border-color: oklch(78.7% .106 29.73);
2158
+ --cirth-form-element-invalid-border-color: var(--cirth-error-border);
2159
+ --cirth-form-element-invalid-active-border-color: var(--cirth-error-active);
2197
2160
  --cirth-form-element-invalid-focus-color: var(--cirth-form-element-invalid-active-border-color);
2198
- --cirth-form-element-valid-border-color: oklch(70% .133 160.59);
2199
- --cirth-form-element-valid-active-border-color: oklch(78.7% .15 160.59);
2161
+ --cirth-form-element-valid-border-color: var(--cirth-success-border);
2162
+ --cirth-form-element-valid-active-border-color: var(--cirth-success-active);
2200
2163
  --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
2201
- --cirth-switch-background-color: oklch(52.7% .032 264);
2164
+ --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
2202
2165
  --cirth-switch-checked-background-color: var(--cirth-primary-background);
2203
2166
  --cirth-switch-color: var(--cirth-primary-inverse);
2204
- --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
2205
- --cirth-range-border-color: oklch(26.7% .011 264);
2206
- --cirth-range-active-border-color: oklch(31% .016 264);
2207
2167
  --cirth-range-thumb-border-color: var(--cirth-background-color);
2208
2168
  --cirth-range-thumb-color: var(--cirth-secondary-background);
2209
2169
  --cirth-range-thumb-active-color: var(--cirth-primary-background);
2210
- --cirth-accordion-border-color: var(--cirth-muted-border-color);
2211
2170
  --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
2212
2171
  --cirth-accordion-close-summary-color: var(--cirth-color);
2213
2172
  --cirth-accordion-open-summary-color: var(--cirth-muted-color);
2214
- --cirth-card-background-color: oklch(22.3% .006 264);
2215
2173
  --cirth-card-border-color: var(--cirth-card-background-color);
2216
2174
  --cirth-card-box-shadow: var(--cirth-box-shadow);
2217
- --cirth-card-sectioning-background-color: oklch(23.4% .00725 264);
2218
- --cirth-loading-spinner-opacity: var(--cirth-opacity-disabled);
2219
2175
  --cirth-modal-overlay-background-color: oklch(9% 0 312deg / var(--cirth-opacity-overlay));
2220
- --cirth-meter-optimum-color: oklch(65.7% .125 160.59);
2221
- --cirth-meter-suboptimum-color: oklch(70% .124 78);
2222
- --cirth-meter-even-less-good-color: oklch(74.3% .133 29.73);
2223
- --cirth-progress-background-color: oklch(26.7% .011 264);
2224
- --cirth-progress-border-color: oklch(52.7% .032 264);
2176
+ --cirth-meter-optimum-color: var(--cirth-success);
2177
+ --cirth-meter-suboptimum-color: var(--cirth-warning);
2178
+ --cirth-meter-even-less-good-color: var(--cirth-error);
2225
2179
  --cirth-progress-color: oklch(61.3% .113 69.35);
2180
+ --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");
2181
+ --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");
2182
+ --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");
2183
+ --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");
2226
2184
  --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");
2227
2185
  --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");
2228
2186
  }
@@ -2233,106 +2191,81 @@ details summary[role="button"]:after {
2233
2191
  }
2234
2192
 
2235
2193
  :where([data-theme="dark"]) {
2236
- --lightningcss-light: ;
2237
- --lightningcss-dark: initial;
2238
2194
  color-scheme: dark;
2239
- --cirth-background-color: oklch(20.15% .003 264);
2240
- --cirth-color: oklch(83% .016 264);
2241
- --cirth-text-selection-color: oklch(70% .129 69.35 / .1875);
2242
- --cirth-muted-color: oklch(61.3% .032 264);
2243
- --cirth-muted-border-color: oklch(26.7% .011 264);
2244
- --cirth-primary: oklch(70% .129 69.35);
2245
- --cirth-primary-background: oklch(52.7% .097 69.35);
2195
+ --cirth-error-text: oklch(from var(--cirth-error) calc(l * 1.059) calc(c * .797) h);
2196
+ --cirth-error-border: oklch(from var(--cirth-error) calc(l * .942) calc(c * 1.226) h);
2197
+ --cirth-error-active: oklch(from var(--cirth-error) calc(l * 1.059) calc(c * .797) h);
2198
+ --cirth-error-surface: oklch(from var(--cirth-error) 35.3% .063 h);
2199
+ --cirth-success-text: oklch(from var(--cirth-success) calc(l * 1.198) calc(c * 1.2) h);
2200
+ --cirth-success-border: oklch(from var(--cirth-success) calc(l * 1.065) calc(c * 1.064) h);
2201
+ --cirth-success-active: oklch(from var(--cirth-success) calc(l * 1.198) calc(c * 1.2) h);
2202
+ --cirth-success-surface: oklch(from var(--cirth-success) 35.3% .063 h);
2203
+ --cirth-warning-text: oklch(from var(--cirth-warning) calc(l * 1.124) calc(c * 1.121) h);
2204
+ --cirth-warning-border: var(--cirth-warning);
2205
+ --cirth-warning-active: oklch(from var(--cirth-warning) calc(l * 1.124) calc(c * 1.121) h);
2206
+ --cirth-warning-surface: oklch(from var(--cirth-warning) 35.3% .063 h);
2207
+ --cirth-primary-background: color-mix(in oklch,
2208
+ var(--cirth-primary) 75.2%,
2209
+ black);
2246
2210
  --cirth-primary-border: var(--cirth-primary-background);
2247
- --cirth-primary-underline: oklch(70% .129 69.35 / .5);
2248
- --cirth-primary-hover: oklch(78.7% .146 69.35);
2249
- --cirth-primary-hover-background: oklch(57% .105 69.35);
2211
+ --cirth-primary-underline: oklch(from var(--cirth-primary) l c h / 50%);
2212
+ --cirth-primary-hover: oklch(from var(--cirth-primary) calc(l * 1.124) calc(c * 1.132) h);
2213
+ --cirth-primary-hover-background: color-mix(in oklch,
2214
+ var(--cirth-primary) 81.4%,
2215
+ black);
2250
2216
  --cirth-primary-hover-border: var(--cirth-primary-hover-background);
2251
2217
  --cirth-primary-hover-underline: var(--cirth-primary-hover);
2252
- --cirth-primary-focus: oklch(70% .129 69.35 / .7);
2218
+ --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 70%);
2253
2219
  --cirth-primary-inverse: oklch(100% 0 0);
2254
- --cirth-secondary: oklch(70% .028 264);
2255
2220
  --cirth-secondary-background: oklch(48.3% .03 264);
2256
2221
  --cirth-secondary-border: var(--cirth-secondary-background);
2257
- --cirth-secondary-underline: oklch(70% .028 264 / .5);
2258
- --cirth-secondary-hover: oklch(78.7% .021 264);
2259
- --cirth-secondary-hover-background: oklch(52.7% .032 264);
2260
2222
  --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
2261
2223
  --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
2262
- --cirth-secondary-focus: oklch(70% .028 264 / .7);
2263
2224
  --cirth-secondary-inverse: oklch(100% 0 0);
2264
- --cirth-contrast: oklch(91.7% .006 264);
2265
- --cirth-contrast-background: oklch(96% 0 264);
2266
2225
  --cirth-contrast-border: var(--cirth-contrast-background);
2267
- --cirth-contrast-underline: oklch(91.7% .006 264 / .5);
2268
- --cirth-contrast-hover: oklch(100% 0 0);
2269
- --cirth-contrast-hover-background: oklch(100% 0 0);
2270
2226
  --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
2271
2227
  --cirth-contrast-hover-underline: var(--cirth-contrast-hover);
2272
- --cirth-contrast-focus: oklch(87.3% .011 264 / .5);
2273
- --cirth-contrast-inverse: oklch(0% 0 0);
2274
- --cirth-link-visited-color: oklch(65.7% .03 264);
2275
- --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);
2276
- --cirth-h1-color: oklch(96% 0 264);
2277
- --cirth-h2-color: oklch(91.7% .006 264);
2278
- --cirth-h3-color: oklch(83% .016 264);
2279
- --cirth-h4-color: oklch(78.7% .021 264);
2280
- --cirth-h5-color: oklch(74.3% .025 264);
2281
- --cirth-h6-color: oklch(65.7% .03 264);
2282
- --cirth-mark-background-color: oklch(35.3% .063 78);
2283
- --cirth-mark-color: oklch(100% 0 0);
2284
- --cirth-ins-color: oklch(78.7% .15 160.59);
2285
- --cirth-del-color: oklch(78.7% .106 29.73);
2228
+ --cirth-mark-background-color: var(--cirth-warning-surface);
2229
+ --cirth-ins-color: var(--cirth-success-text);
2230
+ --cirth-del-color: var(--cirth-error-text);
2286
2231
  --cirth-blockquote-border-color: var(--cirth-muted-border-color);
2287
2232
  --cirth-blockquote-footer-color: var(--cirth-muted-color);
2288
2233
  --cirth-button-box-shadow: 0 0 0 #0000;
2289
2234
  --cirth-button-hover-box-shadow: 0 0 0 #0000;
2290
2235
  --cirth-table-border-color: var(--cirth-muted-border-color);
2291
2236
  --cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
2292
- --cirth-code-background-color: oklch(23.4% .00725 264);
2293
- --cirth-code-color: oklch(65.7% .03 264);
2294
2237
  --cirth-code-kbd-background-color: var(--cirth-color);
2295
2238
  --cirth-code-kbd-color: var(--cirth-background-color);
2296
- --cirth-form-element-background-color: oklch(24.5% .0085 264);
2297
- --cirth-form-element-selected-background-color: oklch(31% .016 264);
2298
- --cirth-form-element-border-color: oklch(52.7% .032 264);
2299
- --cirth-form-element-color: oklch(91.7% .006 264);
2300
2239
  --cirth-form-element-placeholder-color: oklch(65.7% .03 264);
2301
- --cirth-form-element-active-background-color: oklch(23.4% .00725 264);
2302
2240
  --cirth-form-element-active-border-color: var(--cirth-primary-border);
2303
2241
  --cirth-form-element-focus-color: var(--cirth-primary-border);
2304
2242
  --cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
2305
- --cirth-form-element-invalid-border-color: oklch(70% .163 29.73);
2306
- --cirth-form-element-invalid-active-border-color: oklch(78.7% .106 29.73);
2243
+ --cirth-form-element-invalid-border-color: var(--cirth-error-border);
2244
+ --cirth-form-element-invalid-active-border-color: var(--cirth-error-active);
2307
2245
  --cirth-form-element-invalid-focus-color: var(--cirth-form-element-invalid-active-border-color);
2308
- --cirth-form-element-valid-border-color: oklch(70% .133 160.59);
2309
- --cirth-form-element-valid-active-border-color: oklch(78.7% .15 160.59);
2246
+ --cirth-form-element-valid-border-color: var(--cirth-success-border);
2247
+ --cirth-form-element-valid-active-border-color: var(--cirth-success-active);
2310
2248
  --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
2311
- --cirth-switch-background-color: oklch(52.7% .032 264);
2249
+ --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
2312
2250
  --cirth-switch-checked-background-color: var(--cirth-primary-background);
2313
2251
  --cirth-switch-color: var(--cirth-primary-inverse);
2314
- --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
2315
- --cirth-range-border-color: oklch(26.7% .011 264);
2316
- --cirth-range-active-border-color: oklch(31% .016 264);
2317
2252
  --cirth-range-thumb-border-color: var(--cirth-background-color);
2318
2253
  --cirth-range-thumb-color: var(--cirth-secondary-background);
2319
2254
  --cirth-range-thumb-active-color: var(--cirth-primary-background);
2320
- --cirth-accordion-border-color: var(--cirth-muted-border-color);
2321
2255
  --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
2322
2256
  --cirth-accordion-close-summary-color: var(--cirth-color);
2323
2257
  --cirth-accordion-open-summary-color: var(--cirth-muted-color);
2324
- --cirth-card-background-color: oklch(22.3% .006 264);
2325
2258
  --cirth-card-border-color: var(--cirth-card-background-color);
2326
2259
  --cirth-card-box-shadow: var(--cirth-box-shadow);
2327
- --cirth-card-sectioning-background-color: oklch(23.4% .00725 264);
2328
- --cirth-loading-spinner-opacity: var(--cirth-opacity-disabled);
2329
2260
  --cirth-modal-overlay-background-color: oklch(9% 0 312deg / var(--cirth-opacity-overlay));
2330
- --cirth-meter-optimum-color: oklch(65.7% .125 160.59);
2331
- --cirth-meter-suboptimum-color: oklch(70% .124 78);
2332
- --cirth-meter-even-less-good-color: oklch(74.3% .133 29.73);
2333
- --cirth-progress-background-color: oklch(26.7% .011 264);
2334
- --cirth-progress-border-color: oklch(52.7% .032 264);
2261
+ --cirth-meter-optimum-color: var(--cirth-success);
2262
+ --cirth-meter-suboptimum-color: var(--cirth-warning);
2263
+ --cirth-meter-even-less-good-color: var(--cirth-error);
2335
2264
  --cirth-progress-color: oklch(61.3% .113 69.35);
2265
+ --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");
2266
+ --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");
2267
+ --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");
2268
+ --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");
2336
2269
  --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");
2337
2270
  --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");
2338
2271
  }
@@ -2359,6 +2292,10 @@ progress, [type="checkbox"], [type="radio"], [type="range"] {
2359
2292
  --cirth-code-color: oklch(35.3% .021 264);
2360
2293
  --cirth-link-visited-color: oklch(35.3% .021 264);
2361
2294
  --cirth-muted-border-color: oklch(57% .032 264);
2295
+ --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");
2296
+ --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");
2297
+ --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");
2298
+ --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");
2362
2299
  --cirth-form-element-border-color: oklch(39.7% .025 264);
2363
2300
  --cirth-form-element-invalid-border-color: oklch(48.3% .166 29.73);
2364
2301
  --cirth-form-element-valid-border-color: oklch(48.3% .092 160.59);
@@ -2388,6 +2325,10 @@ progress, [type="checkbox"], [type="radio"], [type="range"] {
2388
2325
  --cirth-h5-color: var(--cirth-color);
2389
2326
  --cirth-h6-color: var(--cirth-color);
2390
2327
  --cirth-muted-color: oklch(78.7% .021 264);
2328
+ --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");
2329
+ --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");
2330
+ --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");
2331
+ --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");
2391
2332
  --cirth-secondary: oklch(78.7% .021 264);
2392
2333
  --cirth-code-color: oklch(83% .016 264);
2393
2334
  --cirth-link-visited-color: oklch(78.7% .021 264);
@@ -2398,6 +2339,8 @@ progress, [type="checkbox"], [type="radio"], [type="range"] {
2398
2339
  --cirth-form-element-valid-border-color: oklch(78.7% .15 160.59);
2399
2340
  --cirth-primary: oklch(78.7% .146 69.35);
2400
2341
  --cirth-primary-hover: oklch(87.3% .082 69.35);
2342
+ --cirth-primary-background: oklch(44% .081 69.35);
2343
+ --cirth-primary-hover-background: oklch(39.7% .073 69.35);
2401
2344
  --cirth-primary-underline: var(--cirth-primary);
2402
2345
  --cirth-secondary-underline: var(--cirth-secondary);
2403
2346
  --cirth-contrast-underline: var(--cirth-contrast);
@@ -2422,6 +2365,10 @@ progress, [type="checkbox"], [type="radio"], [type="range"] {
2422
2365
  --cirth-h5-color: var(--cirth-color);
2423
2366
  --cirth-h6-color: var(--cirth-color);
2424
2367
  --cirth-muted-color: oklch(78.7% .021 264);
2368
+ --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");
2369
+ --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");
2370
+ --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");
2371
+ --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");
2425
2372
  --cirth-secondary: oklch(78.7% .021 264);
2426
2373
  --cirth-code-color: oklch(83% .016 264);
2427
2374
  --cirth-link-visited-color: oklch(78.7% .021 264);
@@ -2432,6 +2379,8 @@ progress, [type="checkbox"], [type="radio"], [type="range"] {
2432
2379
  --cirth-form-element-valid-border-color: oklch(78.7% .15 160.59);
2433
2380
  --cirth-primary: oklch(78.7% .146 69.35);
2434
2381
  --cirth-primary-hover: oklch(87.3% .082 69.35);
2382
+ --cirth-primary-background: oklch(44% .081 69.35);
2383
+ --cirth-primary-hover-background: oklch(39.7% .073 69.35);
2435
2384
  --cirth-primary-underline: var(--cirth-primary);
2436
2385
  --cirth-secondary-underline: var(--cirth-secondary);
2437
2386
  --cirth-contrast-underline: var(--cirth-contrast);
@@ -2445,135 +2394,3 @@ progress, [type="checkbox"], [type="radio"], [type="range"] {
2445
2394
  --cirth-meter-even-less-good-color: oklch(83% .081 29.73);
2446
2395
  }
2447
2396
  }
2448
-
2449
- @media print {
2450
- :root, :host {
2451
- --cirth-print-color: oklch(0% 0 0);
2452
- --cirth-print-muted-color: oklch(48.3% .03 264);
2453
- --cirth-print-border-color: oklch(61.3% .032 264);
2454
- }
2455
-
2456
- html {
2457
- --lightningcss-light: initial;
2458
- --lightningcss-dark: ;
2459
- color-scheme: light;
2460
- background: none;
2461
- }
2462
-
2463
- body {
2464
- color: var(--cirth-print-color);
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
- kbd {
2509
- border: var(--cirth-border-width) solid var(--cirth-print-border-color);
2510
- }
2511
-
2512
- :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
- [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
- :is(mark, meter, progress, [type="checkbox"], [type="radio"]) {
2527
- -webkit-print-color-adjust: exact;
2528
- print-color-adjust: exact;
2529
- }
2530
-
2531
- 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
- thead {
2539
- display: table-header-group;
2540
- }
2541
-
2542
- tfoot {
2543
- display: table-footer-group;
2544
- }
2545
-
2546
- tr {
2547
- break-inside: avoid;
2548
- }
2549
-
2550
- pre {
2551
- white-space: pre-wrap;
2552
- overflow: visible;
2553
- }
2554
-
2555
- dialog {
2556
- backdrop-filter: none;
2557
- min-width: 0;
2558
- min-height: 0;
2559
- position: static;
2560
- }
2561
-
2562
- dialog > article {
2563
- max-height: none;
2564
- overflow: visible;
2565
- }
2566
-
2567
- :is(h1, h2, h3, h4, h5, h6) {
2568
- break-after: avoid;
2569
- }
2570
-
2571
- :is(figure, img) {
2572
- break-inside: avoid;
2573
- }
2574
-
2575
- :is(blockquote, li, p) {
2576
- orphans: 3;
2577
- widows: 3;
2578
- }
2579
- }