@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.
@@ -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,7 +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-size-4) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
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);
241
241
  padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
242
242
  border: var(--cirth-border-width) solid var(--cirth-border-color);
243
243
  border-radius: var(--cirth-border-radius);
@@ -262,7 +262,7 @@ button, [type="submit"], [type="reset"], [type="button"], [role="button"] {
262
262
  --cirth-color: var(--cirth-primary-inverse);
263
263
  --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 #0000);
264
264
  max-width: 100%;
265
- min-block-size: calc(var(--cirth-size-4) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
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);
266
266
  padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
267
267
  border: var(--cirth-border-width) solid var(--cirth-border-color);
268
268
  border-radius: var(--cirth-border-radius);
@@ -442,7 +442,9 @@ pre, code, kbd, samp {
442
442
  }
443
443
 
444
444
  code, kbd, samp {
445
+ max-inline-size: 100%;
445
446
  padding: var(--cirth-space-1) var(--cirth-space-2);
447
+ overflow-wrap: anywhere;
446
448
  display: inline-block;
447
449
  }
448
450
 
@@ -516,7 +518,7 @@ legend {
516
518
  }
517
519
 
518
520
  [type="search"] {
519
- -webkit-appearance: textfield;
521
+ appearance: textfield;
520
522
  outline-offset: -2px;
521
523
  }
522
524
 
@@ -525,7 +527,7 @@ legend {
525
527
  }
526
528
 
527
529
  ::file-selector-button {
528
- -webkit-appearance: button;
530
+ appearance: auto;
529
531
  font: inherit;
530
532
  }
531
533
 
@@ -539,11 +541,11 @@ legend {
539
541
  }
540
542
 
541
543
  input:not([type="checkbox"], [type="radio"], [type="range"]) {
542
- height: calc(var(--cirth-size-4) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
544
+ height: calc(var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
543
545
  }
544
546
 
545
547
  select, textarea {
546
- min-block-size: calc(var(--cirth-size-4) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
548
+ 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);
547
549
  }
548
550
 
549
551
  fieldset {
@@ -597,6 +599,12 @@ input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [re
597
599
  --cirth-border-color: var(--cirth-form-element-active-border-color);
598
600
  }
599
601
 
602
+ 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]) {
603
+ --cirth-border-color: color-mix(in oklch,
604
+ var(--cirth-form-element-border-color) 65%,
605
+ var(--cirth-color));
606
+ }
607
+
600
608
  input:not([type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [readonly]):focus, :where(select, textarea):not([readonly]):focus {
601
609
  --cirth-box-shadow: 0 0 0 var(--cirth-outline-width)
602
610
  var(--cirth-form-element-focus-color);
@@ -615,7 +623,7 @@ label[aria-disabled="true"] input[disabled] {
615
623
  :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)) {
616
624
  padding-inline: var(--cirth-form-element-spacing-horizontal) calc(var(--cirth-form-element-spacing-horizontal) + var(--cirth-space-6));
617
625
  background-position: center right var(--cirth-space-3);
618
- background-size: var(--cirth-size-4) auto;
626
+ background-size: var(--cirth-font-size-md) auto;
619
627
  background-repeat: no-repeat;
620
628
  }
621
629
 
@@ -674,7 +682,7 @@ select:not([multiple], [size]) {
674
682
  padding-inline: var(--cirth-form-element-spacing-horizontal) calc(var(--cirth-form-element-spacing-horizontal) + var(--cirth-space-6));
675
683
  background-image: var(--cirth-icon-chevron);
676
684
  background-position: center right var(--cirth-space-3);
677
- background-size: var(--cirth-size-4) auto;
685
+ background-size: var(--cirth-font-size-md) auto;
678
686
  background-repeat: no-repeat;
679
687
  }
680
688
 
@@ -697,11 +705,11 @@ textarea:not([rows]) {
697
705
  }
698
706
 
699
707
  textarea:is([aria-invalid], :user-invalid:not([aria-invalid], [type="range"]):not(select:focus)) {
700
- --cirth-icon-height: calc(var(--cirth-size-4) * var(--cirth-line-height) +
708
+ --cirth-icon-height: calc(var(--cirth-font-size-md) * var(--cirth-line-height) +
701
709
  var(--cirth-form-element-spacing-vertical) * 2 +
702
710
  var(--cirth-border-width) * 2);
703
711
  background-position: top right var(--cirth-space-3);
704
- background-size: var(--cirth-size-4) var(--cirth-icon-height);
712
+ background-size: var(--cirth-font-size-md) var(--cirth-icon-height);
705
713
  }
706
714
 
707
715
  :where(input, select, textarea, fieldset) + small {
@@ -743,10 +751,6 @@ label:has([type="checkbox"], [type="radio"]) {
743
751
  [type="checkbox"]:checked, [type="checkbox"]:checked:active, [type="checkbox"]:checked:focus, [type="radio"]:checked, [type="radio"]:checked:active, [type="radio"]:checked:focus {
744
752
  --cirth-background-color: var(--cirth-primary-background);
745
753
  --cirth-border-color: var(--cirth-primary-border);
746
- background-image: var(--cirth-icon-checkbox);
747
- background-position: center;
748
- background-repeat: no-repeat;
749
- background-size: .9em;
750
754
  }
751
755
 
752
756
  [type="checkbox"] ~ label, [type="radio"] ~ label {
@@ -759,13 +763,34 @@ label:has([type="checkbox"], [type="radio"]) {
759
763
  margin-inline-end: 1em;
760
764
  }
761
765
 
762
- [type="checkbox"]:indeterminate {
766
+ [type="checkbox"]:not([role="switch"]):checked:before, [type="checkbox"]:not([role="switch"]):indeterminate:before {
767
+ background-color: var(--cirth-primary-inverse);
768
+ content: "";
769
+ width: 100%;
770
+ height: 100%;
771
+ display: block;
772
+ mask-position: center;
773
+ mask-size: .9em;
774
+ mask-repeat: no-repeat;
775
+ }
776
+
777
+ @media (forced-colors: active) {
778
+ [type="checkbox"]:not([role="switch"]):checked:before, [type="checkbox"]:not([role="switch"]):indeterminate:before {
779
+ background-color: canvastext;
780
+ }
781
+ }
782
+
783
+ [type="checkbox"]:not([role="switch"]):checked:before {
784
+ mask-image: var(--cirth-icon-checkbox);
785
+ }
786
+
787
+ [type="checkbox"]:not([role="switch"]):indeterminate {
763
788
  --cirth-background-color: var(--cirth-primary-background);
764
789
  --cirth-border-color: var(--cirth-primary-border);
765
- background-image: var(--cirth-icon-minus);
766
- background-position: center;
767
- background-repeat: no-repeat;
768
- background-size: .9em;
790
+ }
791
+
792
+ [type="checkbox"]:not([role="switch"]):indeterminate:before {
793
+ mask-image: var(--cirth-icon-minus);
769
794
  }
770
795
 
771
796
  [type="radio"] {
@@ -774,7 +799,6 @@ label:has([type="checkbox"], [type="radio"]) {
774
799
 
775
800
  [type="radio"]:checked, [type="radio"]:checked:active, [type="radio"]:checked:focus {
776
801
  --cirth-background-color: var(--cirth-primary-inverse);
777
- background-image: none;
778
802
  border-width: .42em;
779
803
  }
780
804
 
@@ -812,7 +836,6 @@ label:has([type="checkbox"], [type="radio"]) {
812
836
  [type="checkbox"][role="switch"]:checked {
813
837
  --cirth-background-color: var(--cirth-switch-checked-background-color);
814
838
  --cirth-border-color: var(--cirth-switch-checked-background-color);
815
- background-image: none;
816
839
  }
817
840
 
818
841
  [type="checkbox"][role="switch"]:checked:before {
@@ -859,7 +882,7 @@ label:has([type="checkbox"], [type="radio"]) {
859
882
 
860
883
  input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]):is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
861
884
  --cirth-icon-position: var(--cirth-space-3);
862
- --cirth-icon-width: var(--cirth-size-4);
885
+ --cirth-icon-width: var(--cirth-font-size-md);
863
886
  min-width: 0;
864
887
  background-image: var(--cirth-icon-date);
865
888
  background-position: center right var(--cirth-icon-position);
@@ -1042,7 +1065,7 @@ details {
1042
1065
  }
1043
1066
 
1044
1067
  details summary {
1045
- line-height: var(--cirth-size-4);
1068
+ line-height: var(--cirth-font-size-md);
1046
1069
  cursor: pointer;
1047
1070
  transition: color var(--cirth-transition);
1048
1071
  list-style-type: none;
@@ -1061,18 +1084,28 @@ details summary::marker {
1061
1084
  }
1062
1085
 
1063
1086
  details summary:after {
1064
- width: var(--cirth-size-4);
1065
- height: var(--cirth-size-4);
1087
+ width: var(--cirth-font-size-md);
1088
+ height: var(--cirth-font-size-md);
1066
1089
  float: right;
1067
- background-image: var(--cirth-icon-chevron);
1068
- background-position: 100%;
1069
- background-size: var(--cirth-size-4) auto;
1070
- content: "";
1071
- transition: transform var(--cirth-transition);
1072
- background-repeat: no-repeat;
1090
+ background-color: var(--cirth-muted-color);
1091
+ mask-image: var(--cirth-icon-chevron);
1092
+ mask-position: 100%;
1093
+ mask-size: var(--cirth-font-size-md) auto;
1073
1094
  margin-inline-start: calc(var(--cirth-spacing, var(--cirth-space-4)) * .5);
1074
1095
  display: block;
1075
1096
  transform: rotate(-90deg);
1097
+ mask-repeat: no-repeat;
1098
+ }
1099
+
1100
+ @media (forced-colors: active) {
1101
+ details summary:after {
1102
+ background-color: canvastext;
1103
+ }
1104
+ }
1105
+
1106
+ details summary:after {
1107
+ content: "";
1108
+ transition: transform var(--cirth-transition);
1076
1109
  }
1077
1110
 
1078
1111
  details summary:focus {
@@ -1095,7 +1128,7 @@ details summary[role="button"] {
1095
1128
  }
1096
1129
 
1097
1130
  details summary[role="button"]:after {
1098
- height: calc(var(--cirth-size-4) * var(--cirth-line-height, var(--cirth-line-height-normal)));
1131
+ height: calc(var(--cirth-font-size-md) * var(--cirth-line-height, var(--cirth-line-height-normal)));
1099
1132
  }
1100
1133
 
1101
1134
  details[open] > summary {
@@ -1193,12 +1226,7 @@ article > footer {
1193
1226
  z-index: 2;
1194
1227
  }
1195
1228
 
1196
- [role="search"] > :has( + small:last-child) {
1197
- border-start-end-radius: var(--cirth-border-radius);
1198
- border-end-end-radius: var(--cirth-border-radius);
1199
- }
1200
-
1201
- [role="group"]:not(fieldset) > :has( + small:last-child) {
1229
+ [role="search"] > :has( + small:last-child), [role="group"]:not(fieldset) > :has( + small:last-child) {
1202
1230
  border-start-end-radius: var(--cirth-border-radius);
1203
1231
  border-end-end-radius: var(--cirth-border-radius);
1204
1232
  }
@@ -1211,98 +1239,27 @@ article > footer {
1211
1239
  width: auto;
1212
1240
  }
1213
1241
 
1214
- @supports selector(:has(*)) {
1215
- [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
1216
- --cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-button);
1217
- }
1218
-
1219
- [role="group"]:not(fieldset):has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
1220
- --cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-button);
1221
- }
1222
-
1223
- [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"], [aria-invalid]) {
1224
- border-color: #0000;
1225
- }
1226
-
1227
- [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select:not([aria-invalid]) {
1228
- border-color: #0000;
1229
- }
1230
-
1231
- [role="group"]:not(fieldset):has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"], [aria-invalid]) {
1232
- border-color: #0000;
1233
- }
1234
-
1235
- [role="group"]:not(fieldset):has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select:not([aria-invalid]) {
1236
- border-color: #0000;
1237
- }
1238
-
1239
- [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) {
1240
- --cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-input);
1241
- }
1242
-
1243
- [role="group"]:not(fieldset):has(input:not([type="submit"], [type="button"]):focus, select:focus) {
1244
- --cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-input);
1245
- }
1246
-
1247
- [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button {
1248
- --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1249
- var(--cirth-primary-border);
1250
- --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1251
- var(--cirth-primary-hover-border);
1252
- }
1253
-
1254
- [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"] {
1255
- --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1256
- var(--cirth-primary-border);
1257
- --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1258
- var(--cirth-primary-hover-border);
1259
- }
1260
-
1261
- [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"] {
1262
- --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1263
- var(--cirth-primary-border);
1264
- --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1265
- var(--cirth-primary-hover-border);
1266
- }
1267
-
1268
- [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"] {
1269
- --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1270
- var(--cirth-primary-border);
1271
- --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1272
- var(--cirth-primary-hover-border);
1273
- }
1274
-
1275
- [role="group"]:not(fieldset):has(input:not([type="submit"], [type="button"]):focus, select:focus) button {
1276
- --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1277
- var(--cirth-primary-border);
1278
- --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1279
- var(--cirth-primary-hover-border);
1280
- }
1242
+ [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) {
1243
+ --cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-button);
1244
+ }
1281
1245
 
1282
- [role="group"]:not(fieldset):has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"] {
1283
- --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1284
- var(--cirth-primary-border);
1285
- --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1286
- var(--cirth-primary-hover-border);
1287
- }
1246
+ [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]) {
1247
+ border-color: #0000;
1248
+ }
1288
1249
 
1289
- [role="group"]:not(fieldset):has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"] {
1290
- --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1291
- var(--cirth-primary-border);
1292
- --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1293
- var(--cirth-primary-hover-border);
1294
- }
1250
+ [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) {
1251
+ --cirth-group-box-shadow: var(--cirth-group-box-shadow-focus-with-input);
1252
+ }
1295
1253
 
1296
- [role="group"]:not(fieldset):has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"] {
1297
- --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1298
- var(--cirth-primary-border);
1299
- --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1300
- var(--cirth-primary-hover-border);
1301
- }
1254
+ [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"] {
1255
+ --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1256
+ var(--cirth-primary-border);
1257
+ --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1258
+ var(--cirth-primary-hover-border);
1259
+ }
1302
1260
 
1303
- [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 {
1304
- box-shadow: none;
1305
- }
1261
+ [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 {
1262
+ box-shadow: none;
1306
1263
  }
1307
1264
 
1308
1265
  [role="search"] > :not([hidden], input[type="hidden"]):nth-child(1 of :not([hidden], input[type="hidden"])) {
@@ -1310,32 +1267,20 @@ article > footer {
1310
1267
  border-end-start-radius: var(--cirth-radius-pill);
1311
1268
  }
1312
1269
 
1313
- [role="search"] > :not([hidden], input[type="hidden"]):nth-last-child(1 of :not([hidden], input[type="hidden"])) {
1270
+ [role="search"] > :not([hidden], input[type="hidden"]):nth-last-child(1 of :not([hidden], input[type="hidden"])), [role="search"] > :has( + small:last-child) {
1314
1271
  border-start-end-radius: var(--cirth-radius-pill);
1315
1272
  border-end-end-radius: var(--cirth-radius-pill);
1316
1273
  }
1317
1274
 
1318
- [role="search"] > :has( + small:last-child) {
1319
- border-start-end-radius: var(--cirth-radius-pill);
1320
- border-end-end-radius: var(--cirth-radius-pill);
1321
- }
1322
-
1323
- [aria-busy="true"]:not(input, select, textarea, html, form) {
1324
- white-space: nowrap;
1325
- }
1326
-
1327
1275
  [aria-busy="true"]:not(input, select, textarea, html, form):before {
1328
1276
  content: "";
1329
1277
  vertical-align: -.125em;
1330
1278
  width: 1em;
1331
1279
  height: 1em;
1332
- -webkit-mask-image: var(--cirth-icon-loading);
1333
1280
  mask-image: var(--cirth-icon-loading);
1334
1281
  background-color: currentColor;
1335
1282
  display: inline-block;
1336
- -webkit-mask-size: 1em;
1337
1283
  mask-size: 1em;
1338
- -webkit-mask-repeat: no-repeat;
1339
1284
  mask-repeat: no-repeat;
1340
1285
  }
1341
1286
 
@@ -1353,10 +1298,6 @@ article > footer {
1353
1298
  text-align: center;
1354
1299
  }
1355
1300
 
1356
- :is(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[aria-busy="true"] {
1357
- white-space: normal;
1358
- }
1359
-
1360
1301
  input:is([type="submit"], [type="button"], [type="reset"])[aria-busy="true"] {
1361
1302
  background-image: var(--cirth-icon-loading);
1362
1303
  background-position: center left var(--cirth-form-element-spacing-horizontal);
@@ -1369,14 +1310,10 @@ input:is([type="submit"], [type="button"], [type="reset"])[aria-busy="true"] {
1369
1310
  background-position: center right var(--cirth-form-element-spacing-horizontal);
1370
1311
  }
1371
1312
 
1372
- button[aria-busy="true"], [type="submit"][aria-busy="true"], [type="button"][aria-busy="true"], [type="reset"][aria-busy="true"], [role="button"][aria-busy="true"], a[aria-busy="true"] {
1373
- pointer-events: none;
1374
- }
1375
-
1376
1313
  meter {
1377
1314
  appearance: none;
1378
1315
  width: 100%;
1379
- height: var(--cirth-size-2);
1316
+ height: var(--cirth-space-2);
1380
1317
  margin-bottom: calc(var(--cirth-spacing) * .5);
1381
1318
  border: var(--cirth-border-width-1) solid var(--cirth-meter-border-color);
1382
1319
  border-radius: var(--cirth-border-radius);
@@ -1480,7 +1417,7 @@ dialog > article > header > * {
1480
1417
  }
1481
1418
 
1482
1419
  dialog > article > header :is(a, button)[rel="prev"] {
1483
- 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);
1420
+ 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);
1484
1421
  float: right;
1485
1422
  margin-inline-start: var(--cirth-spacing);
1486
1423
  padding: 0;
@@ -1499,23 +1436,37 @@ dialog > article > footer button:not(:first-of-type), dialog > article > footer
1499
1436
  }
1500
1437
 
1501
1438
  dialog > article :is(a, button)[rel="prev"] {
1502
- 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);
1503
- 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);
1504
- 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));
1505
- 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);
1506
- 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));
1507
- background-image: var(--cirth-icon-close);
1508
- background-position: center;
1509
- background-size: auto var(--cirth-size-4);
1439
+ 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);
1440
+ 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);
1441
+ 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));
1442
+ 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);
1443
+ 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));
1510
1444
  opacity: .5;
1511
1445
  transition: opacity var(--cirth-transition);
1512
1446
  background-color: #0000;
1513
- background-repeat: no-repeat;
1514
1447
  border: none;
1515
1448
  margin-inline-start: auto;
1516
1449
  display: block;
1517
1450
  }
1518
1451
 
1452
+ dialog > article :is(a, button)[rel="prev"]:before {
1453
+ background-color: var(--cirth-muted-color);
1454
+ content: "";
1455
+ width: 100%;
1456
+ height: 100%;
1457
+ mask-image: var(--cirth-icon-close);
1458
+ mask-position: center;
1459
+ mask-size: auto var(--cirth-font-size-md);
1460
+ display: block;
1461
+ mask-repeat: no-repeat;
1462
+ }
1463
+
1464
+ @media (forced-colors: active) {
1465
+ dialog > article :is(a, button)[rel="prev"]:before {
1466
+ background-color: canvastext;
1467
+ }
1468
+ }
1469
+
1519
1470
  dialog > article :is(a, button)[rel="prev"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
1520
1471
  opacity: 1;
1521
1472
  }
@@ -1585,7 +1536,7 @@ nav li [role="group"]:not(fieldset), nav li [role="search"] {
1585
1536
 
1586
1537
  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 {
1587
1538
  height: auto;
1588
- min-block-size: var(--cirth-size-6);
1539
+ min-block-size: var(--cirth-space-6);
1589
1540
  margin-inline: inherit;
1590
1541
  padding: calc(var(--cirth-nav-link-spacing-vertical) - var(--cirth-border-width) * 2) var(--cirth-nav-link-spacing-horizontal);
1591
1542
  margin-bottom: 0;
@@ -1673,7 +1624,7 @@ progress {
1673
1624
  vertical-align: baseline;
1674
1625
  appearance: none;
1675
1626
  width: 100%;
1676
- height: var(--cirth-size-2);
1627
+ height: var(--cirth-space-2);
1677
1628
  margin-bottom: calc(var(--cirth-spacing) * .5);
1678
1629
  border: var(--cirth-border-width-1) solid var(--cirth-progress-border-color);
1679
1630
  border-radius: var(--cirth-border-radius);
@@ -1759,27 +1710,23 @@ progress::-moz-progress-bar {
1759
1710
  }
1760
1711
 
1761
1712
  :root, :host {
1762
- --cirth-color-black: #000;
1763
- --cirth-color-white: #fff;
1764
- --cirth-color-transparent: transparent;
1765
- --cirth-color-current: currentColor;
1766
1713
  --cirth-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
1767
1714
  --cirth-font-family-sans: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial,
1768
1715
  "Helvetica Neue", sans-serif, var(--cirth-font-family-emoji);
1769
1716
  --cirth-font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif;
1770
1717
  --cirth-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
1771
1718
  monospace, var(--cirth-font-family-emoji);
1772
- --cirth-font-family-display: var(--cirth-font-family-serif);
1773
1719
  --cirth-font-size-xs: .75rem;
1774
1720
  --cirth-font-size-sm: .875rem;
1775
1721
  --cirth-font-size-md: 1rem;
1776
1722
  --cirth-font-size-lg: 1.125rem;
1777
1723
  --cirth-font-size-xl: 1.25rem;
1778
- --cirth-font-size-2xl: 1.425rem;
1779
- --cirth-font-size-3xl: 1.6rem;
1780
- --cirth-font-size-4xl: 1.8rem;
1781
- --cirth-font-size-5xl: 2rem;
1782
- --cirth-font-size-6xl: 2.3rem;
1724
+ --cirth-font-size-2xl: 1.5rem;
1725
+ --cirth-font-size-3xl: 1.75rem;
1726
+ --cirth-font-size-4xl: 2rem;
1727
+ --cirth-font-size-5xl: 2.25rem;
1728
+ --cirth-font-size-6xl: 2.75rem;
1729
+ --cirth-font-size-7xl: 3.5rem;
1783
1730
  --cirth-font-weight-light: 300;
1784
1731
  --cirth-font-weight-regular: 400;
1785
1732
  --cirth-font-weight-medium: 500;
@@ -1806,19 +1753,6 @@ progress::-moz-progress-bar {
1806
1753
  --cirth-space-16: 4rem;
1807
1754
  --cirth-space-20: 5rem;
1808
1755
  --cirth-space-24: 6rem;
1809
- --cirth-size-0: 0;
1810
- --cirth-size-1: .25rem;
1811
- --cirth-size-2: .5rem;
1812
- --cirth-size-3: .75rem;
1813
- --cirth-size-4: 1rem;
1814
- --cirth-size-5: 1.25rem;
1815
- --cirth-size-6: 1.5rem;
1816
- --cirth-size-8: 2rem;
1817
- --cirth-size-10: 2.5rem;
1818
- --cirth-size-12: 3rem;
1819
- --cirth-size-16: 4rem;
1820
- --cirth-size-20: 5rem;
1821
- --cirth-size-24: 6rem;
1822
1756
  --cirth-radius-none: 0;
1823
1757
  --cirth-radius-xs: .125rem;
1824
1758
  --cirth-radius-sm: .25rem;
@@ -1831,9 +1765,6 @@ progress::-moz-progress-bar {
1831
1765
  --cirth-border-width-1: .0625rem;
1832
1766
  --cirth-border-width-2: .125rem;
1833
1767
  --cirth-border-width-4: .25rem;
1834
- --cirth-outline-width-1: .0625rem;
1835
- --cirth-outline-width-2: .125rem;
1836
- --cirth-outline-width-4: .25rem;
1837
1768
  --cirth-duration-instant: 0s;
1838
1769
  --cirth-duration-fast: .1s;
1839
1770
  --cirth-duration-normal: .2s;
@@ -1844,7 +1775,6 @@ progress::-moz-progress-bar {
1844
1775
  --cirth-ease-out: cubic-bezier(0, 0, .2, 1);
1845
1776
  --cirth-ease-in-out: cubic-bezier(.4, 0, .2, 1);
1846
1777
  --cirth-opacity-disabled: .5;
1847
- --cirth-opacity-muted: .72;
1848
1778
  --cirth-opacity-overlay: .75;
1849
1779
  --cirth-z-index-dropdown: 1000;
1850
1780
  --cirth-z-index-sticky: 1020;
@@ -1852,6 +1782,7 @@ progress::-moz-progress-bar {
1852
1782
  --cirth-z-index-modal-backdrop: 1040;
1853
1783
  --cirth-z-index-modal: 1050;
1854
1784
  --cirth-font-family: var(--cirth-font-family-sans);
1785
+ --cirth-font-family-display: var(--cirth-font-family-serif);
1855
1786
  --cirth-line-height: var(--cirth-line-height-normal);
1856
1787
  --cirth-font-weight: var(--cirth-font-weight-regular);
1857
1788
  --cirth-font-size: 100%;
@@ -1863,7 +1794,8 @@ progress::-moz-progress-bar {
1863
1794
  --cirth-code-border-radius: min(var(--cirth-border-radius),
1864
1795
  var(--cirth-radius-sm));
1865
1796
  --cirth-border-width: var(--cirth-border-width-1);
1866
- --cirth-outline-width: var(--cirth-outline-width-2);
1797
+ --cirth-outline-width: var(--cirth-border-width-2);
1798
+ --cirth-background-color: var(--cirth-canvas);
1867
1799
  --cirth-transition: var(--cirth-duration-normal) var(--cirth-ease-out);
1868
1800
  --cirth-spacing: var(--cirth-space-4);
1869
1801
  --cirth-typography-spacing-vertical: var(--cirth-space-4);
@@ -1891,13 +1823,9 @@ progress::-moz-progress-bar {
1891
1823
  --cirth-nav-link-spacing-vertical: var(--cirth-space-2);
1892
1824
  --cirth-nav-link-spacing-horizontal: var(--cirth-space-2);
1893
1825
  --cirth-nav-breadcrumb-divider: ">";
1894
- --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");
1895
- --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");
1896
- --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");
1897
- --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");
1898
- --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");
1899
- --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");
1900
- --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");
1826
+ --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");
1827
+ --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");
1828
+ --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");
1901
1829
  --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");
1902
1830
  }
1903
1831
 
@@ -1919,21 +1847,27 @@ h4, h5, h6 {
1919
1847
  }
1920
1848
 
1921
1849
  h1 {
1922
- --cirth-font-size: clamp(2.25rem, 1.7rem + 2.2vw, 3.5rem);
1850
+ --cirth-font-size: clamp(var(--cirth-font-size-5xl),
1851
+ 1.7rem + 2.2vw,
1852
+ var(--cirth-font-size-7xl));
1923
1853
  --cirth-line-height: var(--cirth-line-height-tight);
1924
1854
  --cirth-letter-spacing: var(--cirth-letter-spacing-tight);
1925
1855
  --cirth-typography-spacing-top: var(--cirth-space-12);
1926
1856
  }
1927
1857
 
1928
1858
  h2 {
1929
- --cirth-font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem);
1859
+ --cirth-font-size: clamp(var(--cirth-font-size-2xl),
1860
+ 1.3rem + 1vw,
1861
+ var(--cirth-font-size-4xl));
1930
1862
  --cirth-line-height: 1.15;
1931
1863
  --cirth-letter-spacing: var(--cirth-letter-spacing-tight);
1932
1864
  --cirth-typography-spacing-top: var(--cirth-space-12);
1933
1865
  }
1934
1866
 
1935
1867
  h3 {
1936
- --cirth-font-size: clamp(1.25rem, 1.15rem + .5vw, 1.5rem);
1868
+ --cirth-font-size: clamp(var(--cirth-font-size-xl),
1869
+ 1.15rem + .5vw,
1870
+ var(--cirth-font-size-2xl));
1937
1871
  --cirth-line-height: 1.2;
1938
1872
  --cirth-letter-spacing: var(--cirth-letter-spacing-snug);
1939
1873
  --cirth-typography-spacing-top: var(--cirth-space-10);
@@ -1981,7 +1915,7 @@ kbd {
1981
1915
  }
1982
1916
 
1983
1917
  input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), :where(select, textarea) {
1984
- --cirth-outline-width: var(--cirth-outline-width-1);
1918
+ --cirth-outline-width: var(--cirth-border-width-1);
1985
1919
  --cirth-line-height: var(--cirth-line-height-relaxed);
1986
1920
  }
1987
1921
 
@@ -2027,107 +1961,131 @@ details summary[role="button"]:after {
2027
1961
  filter: brightness(0) invert();
2028
1962
  }
2029
1963
 
1964
+ :root, :host {
1965
+ --cirth-canvas: light-dark(oklch(97.4% .004 69.35), oklch(20.15% .003 264));
1966
+ --cirth-color: light-dark(oklch(35.3% .021 264), oklch(83% .016 264));
1967
+ --cirth-text-selection-color: light-dark(oklch(65.7% .121 69.35 / .25), oklch(70% .129 69.35 / .1875));
1968
+ --cirth-muted-color: light-dark(oklch(52.7% .032 264), oklch(61.3% .032 264));
1969
+ --cirth-muted-border-color: light-dark(oklch(93.85% .003 264), oklch(26.7% .011 264));
1970
+ --cirth-error: light-dark(oklch(44% .151 29.73), oklch(74.3% .133 29.73));
1971
+ --cirth-success: light-dark(oklch(52.7% .1 160.59), oklch(65.7% .125 160.59));
1972
+ --cirth-warning: light-dark(oklch(48.3% .086 78), oklch(70% .124 78));
1973
+ --cirth-primary: light-dark(oklch(52.7% .097 69.35), oklch(70% .129 69.35));
1974
+ --cirth-secondary: light-dark(oklch(52.7% .032 264), oklch(70% .028 264));
1975
+ --cirth-secondary-underline: light-dark(oklch(52.7% .032 264 / .5), oklch(70% .028 264 / .5));
1976
+ --cirth-secondary-hover: light-dark(oklch(44% .028 264), oklch(78.7% .021 264));
1977
+ --cirth-secondary-hover-background: light-dark(oklch(44% .028 264), oklch(52.7% .032 264));
1978
+ --cirth-secondary-focus: light-dark(oklch(48.3% .03 264 / .7), oklch(70% .028 264 / .7));
1979
+ --cirth-contrast: light-dark(oklch(22.3% .006 264), oklch(91.7% .006 264));
1980
+ --cirth-contrast-background: light-dark(oklch(22.3% .006 264), oklch(96% 0 264));
1981
+ --cirth-contrast-underline: light-dark(oklch(22.3% .006 264 / .5), oklch(91.7% .006 264 / .5));
1982
+ --cirth-contrast-hover: light-dark(oklch(0% 0 0), oklch(100% 0 0));
1983
+ --cirth-contrast-hover-background: light-dark(oklch(0% 0 0), oklch(100% 0 0));
1984
+ --cirth-contrast-focus: light-dark(oklch(48.3% .03 264 / .7), oklch(87.3% .011 264 / .5));
1985
+ --cirth-contrast-inverse: light-dark(oklch(100% 0 0), oklch(0% 0 0));
1986
+ --cirth-link-visited-color: light-dark(oklch(48.3% .03 264), oklch(65.7% .03 264));
1987
+ --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),
1988
+ .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));
1989
+ --cirth-h1-color: light-dark(oklch(22.3% .006 264), oklch(96% 0 264));
1990
+ --cirth-h2-color: light-dark(oklch(26.7% .011 264), oklch(91.7% .006 264));
1991
+ --cirth-h3-color: light-dark(oklch(31% .016 264), oklch(83% .016 264));
1992
+ --cirth-h4-color: light-dark(oklch(35.3% .021 264), oklch(78.7% .021 264));
1993
+ --cirth-h5-color: light-dark(oklch(39.7% .025 264), oklch(74.3% .025 264));
1994
+ --cirth-h6-color: light-dark(oklch(44% .028 264), oklch(65.7% .03 264));
1995
+ --cirth-mark-color: light-dark(oklch(18% 0 264), oklch(100% 0 0));
1996
+ --cirth-code-background-color: light-dark(oklch(97% 0 288), oklch(23.4% .00725 264));
1997
+ --cirth-code-color: light-dark(oklch(52.7% .032 264), oklch(65.7% .03 264));
1998
+ --cirth-form-element-background-color: light-dark(oklch(99% 0 336), oklch(24.5% .0085 264));
1999
+ --cirth-form-element-selected-background-color: light-dark(oklch(91.7% .006 264), oklch(31% .016 264));
2000
+ --cirth-form-element-border-color: light-dark(oklch(61.3% .032 264), oklch(52.7% .032 264));
2001
+ --cirth-form-element-color: light-dark(oklch(26.7% .011 264), oklch(91.7% .006 264));
2002
+ --cirth-form-element-active-background-color: light-dark(oklch(100% 0 0), oklch(23.4% .00725 264));
2003
+ --cirth-switch-background-color: light-dark(oklch(61.3% .032 264), oklch(52.7% .032 264));
2004
+ --cirth-range-border-color: light-dark(oklch(91.7% .006 264), oklch(26.7% .011 264));
2005
+ --cirth-range-active-border-color: light-dark(oklch(83% .016 264), oklch(31% .016 264));
2006
+ --cirth-card-background-color: light-dark(oklch(100% 0 0), oklch(22.3% .006 264));
2007
+ --cirth-card-sectioning-background-color: light-dark(oklch(99% 0 336), oklch(23.4% .00725 264));
2008
+ --cirth-dropdown-background-color: light-dark(oklch(100% 0 0), oklch(22.3% .006 264));
2009
+ --cirth-dropdown-border-color: light-dark(oklch(96% 0 264), oklch(26.7% .011 264));
2010
+ --cirth-dropdown-hover-background-color: light-dark(oklch(96% 0 264), oklch(26.7% .011 264));
2011
+ --cirth-progress-background-color: light-dark(oklch(91.7% .006 264), oklch(26.7% .011 264));
2012
+ --cirth-progress-border-color: light-dark(oklch(61.3% .032 264), oklch(52.7% .032 264));
2013
+ }
2014
+
2030
2015
  :where([data-theme="light"]), :root:where(:not([data-theme="dark"])), :host(:where(:not([data-theme="dark"]))) {
2031
- --lightningcss-light: initial;
2032
- --lightningcss-dark: ;
2033
2016
  color-scheme: light;
2034
- --cirth-background-color: oklch(97.4% .004 69.35);
2035
- --cirth-color: oklch(35.3% .021 264);
2036
- --cirth-text-selection-color: oklch(65.7% .121 69.35 / .25);
2037
- --cirth-muted-color: oklch(52.7% .032 264);
2038
- --cirth-muted-border-color: oklch(93.85% .003 264);
2039
- --cirth-primary: oklch(52.7% .097 69.35);
2040
- --cirth-primary-background: oklch(52.7% .097 69.35);
2017
+ --cirth-error-text: color-mix(in oklch, var(--cirth-error) 80.2%, black);
2018
+ --cirth-error-border: oklch(from var(--cirth-error) calc(l * 1.493) calc(c * 1.298) h);
2019
+ --cirth-error-active: oklch(from var(--cirth-error) calc(l * 1.198) calc(c * 1.199) h);
2020
+ --cirth-error-surface: oklch(from var(--cirth-error) 93% .05 h);
2021
+ --cirth-success-text: color-mix(in oklch, var(--cirth-success) 67%, black);
2022
+ --cirth-success-border: oklch(from var(--cirth-success) calc(l * 1.163) calc(c * 1.17) h);
2023
+ --cirth-success-active: var(--cirth-success);
2024
+ --cirth-success-surface: oklch(from var(--cirth-success) 93% .05 h);
2025
+ --cirth-warning-text: color-mix(in oklch, var(--cirth-warning) 73.1%, black);
2026
+ --cirth-warning-border: oklch(from var(--cirth-warning) calc(l * 1.269) calc(c * 1.267) h);
2027
+ --cirth-warning-active: oklch(from var(--cirth-warning) calc(l * 1.091) calc(c * 1.081) h);
2028
+ --cirth-warning-surface: oklch(from var(--cirth-warning) 93% .05 h);
2029
+ --cirth-primary-background: var(--cirth-primary);
2041
2030
  --cirth-primary-border: var(--cirth-primary-background);
2042
- --cirth-primary-underline: oklch(52.7% .097 69.35 / .5);
2043
- --cirth-primary-hover: oklch(44% .081 69.35);
2044
- --cirth-primary-hover-background: oklch(48.3% .089 69.35);
2031
+ --cirth-primary-underline: oklch(from var(--cirth-primary) l c h / 50%);
2032
+ --cirth-primary-hover: color-mix(in oklch, var(--cirth-primary) 83.5%, black);
2033
+ --cirth-primary-hover-background: color-mix(in oklch,
2034
+ var(--cirth-primary) 91.7%,
2035
+ black);
2045
2036
  --cirth-primary-hover-border: var(--cirth-primary-hover-background);
2046
2037
  --cirth-primary-hover-underline: var(--cirth-primary-hover);
2047
- --cirth-primary-focus: oklch(52.7% .097 69.35 / .75);
2038
+ --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 75%);
2048
2039
  --cirth-primary-inverse: oklch(100% 0 0);
2049
- --cirth-secondary: oklch(52.7% .032 264);
2050
2040
  --cirth-secondary-background: oklch(48.3% .03 264);
2051
2041
  --cirth-secondary-border: var(--cirth-secondary-background);
2052
- --cirth-secondary-underline: oklch(52.7% .032 264 / .5);
2053
- --cirth-secondary-hover: oklch(44% .028 264);
2054
- --cirth-secondary-hover-background: oklch(44% .028 264);
2055
2042
  --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
2056
2043
  --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
2057
- --cirth-secondary-focus: oklch(48.3% .03 264 / .7);
2058
2044
  --cirth-secondary-inverse: oklch(100% 0 0);
2059
- --cirth-contrast: oklch(22.3% .006 264);
2060
- --cirth-contrast-background: oklch(22.3% .006 264);
2061
2045
  --cirth-contrast-border: var(--cirth-contrast-background);
2062
- --cirth-contrast-underline: oklch(22.3% .006 264 / .5);
2063
- --cirth-contrast-hover: oklch(0% 0 0);
2064
- --cirth-contrast-hover-background: oklch(0% 0 0);
2065
2046
  --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
2066
2047
  --cirth-contrast-hover-underline: var(--cirth-secondary-hover);
2067
- --cirth-contrast-focus: oklch(48.3% .03 264 / .7);
2068
- --cirth-contrast-inverse: oklch(100% 0 0);
2069
- --cirth-link-visited-color: oklch(48.3% .03 264);
2070
- --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);
2071
- --cirth-h1-color: oklch(22.3% .006 264);
2072
- --cirth-h2-color: oklch(26.7% .011 264);
2073
- --cirth-h3-color: oklch(31% .016 264);
2074
- --cirth-h4-color: oklch(35.3% .021 264);
2075
- --cirth-h5-color: oklch(39.7% .025 264);
2076
- --cirth-h6-color: oklch(44% .028 264);
2077
- --cirth-mark-background-color: oklch(93% .05 78);
2078
- --cirth-mark-color: oklch(18% 0 264);
2079
- --cirth-ins-color: oklch(35.3% .067 160.59);
2080
- --cirth-del-color: oklch(35.3% .122 29.73);
2048
+ --cirth-mark-background-color: var(--cirth-warning-surface);
2049
+ --cirth-ins-color: var(--cirth-success-text);
2050
+ --cirth-del-color: var(--cirth-error-text);
2081
2051
  --cirth-blockquote-border-color: var(--cirth-muted-border-color);
2082
2052
  --cirth-blockquote-footer-color: var(--cirth-muted-color);
2083
2053
  --cirth-button-box-shadow: 0 0 0 #0000;
2084
2054
  --cirth-button-hover-box-shadow: 0 0 0 #0000;
2085
2055
  --cirth-table-border-color: var(--cirth-muted-border-color);
2086
2056
  --cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
2087
- --cirth-code-background-color: oklch(97% 0 288);
2088
- --cirth-code-color: oklch(52.7% .032 264);
2089
2057
  --cirth-code-kbd-background-color: var(--cirth-color);
2090
2058
  --cirth-code-kbd-color: var(--cirth-background-color);
2091
- --cirth-form-element-background-color: oklch(99% 0 336);
2092
- --cirth-form-element-selected-background-color: oklch(91.7% .006 264);
2093
- --cirth-form-element-border-color: oklch(61.3% .032 264);
2094
- --cirth-form-element-color: oklch(26.7% .011 264);
2095
2059
  --cirth-form-element-placeholder-color: var(--cirth-muted-color);
2096
- --cirth-form-element-active-background-color: oklch(100% 0 0);
2097
2060
  --cirth-form-element-active-border-color: var(--cirth-primary-border);
2098
2061
  --cirth-form-element-focus-color: var(--cirth-primary-border);
2099
2062
  --cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
2100
- --cirth-form-element-invalid-border-color: oklch(65.7% .196 29.73);
2101
- --cirth-form-element-invalid-active-border-color: oklch(52.7% .181 29.73);
2063
+ --cirth-form-element-invalid-border-color: var(--cirth-error-border);
2064
+ --cirth-form-element-invalid-active-border-color: var(--cirth-error-active);
2102
2065
  --cirth-form-element-invalid-focus-color: var(--cirth-form-element-invalid-active-border-color);
2103
- --cirth-form-element-valid-border-color: oklch(61.3% .117 160.59);
2104
- --cirth-form-element-valid-active-border-color: oklch(52.7% .1 160.59);
2066
+ --cirth-form-element-valid-border-color: var(--cirth-success-border);
2067
+ --cirth-form-element-valid-active-border-color: var(--cirth-success-active);
2105
2068
  --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
2106
- --cirth-switch-background-color: oklch(61.3% .032 264);
2069
+ --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
2107
2070
  --cirth-switch-checked-background-color: var(--cirth-primary-background);
2108
2071
  --cirth-switch-color: var(--cirth-primary-inverse);
2109
- --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
2110
- --cirth-range-border-color: oklch(91.7% .006 264);
2111
- --cirth-range-active-border-color: oklch(83% .016 264);
2112
2072
  --cirth-range-thumb-border-color: var(--cirth-background-color);
2113
2073
  --cirth-range-thumb-color: var(--cirth-secondary-background);
2114
2074
  --cirth-range-thumb-active-color: var(--cirth-primary-background);
2115
- --cirth-accordion-border-color: var(--cirth-muted-border-color);
2116
2075
  --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
2117
2076
  --cirth-accordion-close-summary-color: var(--cirth-color);
2118
2077
  --cirth-accordion-open-summary-color: var(--cirth-muted-color);
2119
- --cirth-card-background-color: oklch(100% 0 0);
2120
2078
  --cirth-card-border-color: var(--cirth-muted-border-color);
2121
2079
  --cirth-card-box-shadow: var(--cirth-box-shadow);
2122
- --cirth-card-sectioning-background-color: oklch(99% 0 336);
2123
- --cirth-loading-spinner-opacity: var(--cirth-opacity-disabled);
2124
2080
  --cirth-modal-overlay-background-color: oklch(93.85% .003 264deg / var(--cirth-opacity-overlay));
2125
- --cirth-meter-optimum-color: oklch(52.7% .1 160.59);
2126
- --cirth-meter-suboptimum-color: oklch(48.3% .086 78);
2127
- --cirth-meter-even-less-good-color: oklch(44% .151 29.73);
2128
- --cirth-progress-background-color: oklch(91.7% .006 264);
2129
- --cirth-progress-border-color: oklch(61.3% .032 264);
2081
+ --cirth-meter-optimum-color: var(--cirth-success);
2082
+ --cirth-meter-suboptimum-color: var(--cirth-warning);
2083
+ --cirth-meter-even-less-good-color: var(--cirth-error);
2130
2084
  --cirth-progress-color: var(--cirth-primary-background);
2085
+ --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");
2086
+ --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");
2087
+ --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");
2088
+ --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");
2131
2089
  --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");
2132
2090
  --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");
2133
2091
  }
@@ -2138,106 +2096,81 @@ details summary[role="button"]:after {
2138
2096
 
2139
2097
  @media only screen and (prefers-color-scheme: dark) {
2140
2098
  :root:where(:not([data-theme])), :host(:where(:not([data-theme]))) {
2141
- --lightningcss-light: ;
2142
- --lightningcss-dark: initial;
2143
2099
  color-scheme: dark;
2144
- --cirth-background-color: oklch(20.15% .003 264);
2145
- --cirth-color: oklch(83% .016 264);
2146
- --cirth-text-selection-color: oklch(70% .129 69.35 / .1875);
2147
- --cirth-muted-color: oklch(61.3% .032 264);
2148
- --cirth-muted-border-color: oklch(26.7% .011 264);
2149
- --cirth-primary: oklch(70% .129 69.35);
2150
- --cirth-primary-background: oklch(52.7% .097 69.35);
2100
+ --cirth-error-text: oklch(from var(--cirth-error) calc(l * 1.059) calc(c * .797) h);
2101
+ --cirth-error-border: oklch(from var(--cirth-error) calc(l * .942) calc(c * 1.226) h);
2102
+ --cirth-error-active: oklch(from var(--cirth-error) calc(l * 1.059) calc(c * .797) h);
2103
+ --cirth-error-surface: oklch(from var(--cirth-error) 35.3% .063 h);
2104
+ --cirth-success-text: oklch(from var(--cirth-success) calc(l * 1.198) calc(c * 1.2) h);
2105
+ --cirth-success-border: oklch(from var(--cirth-success) calc(l * 1.065) calc(c * 1.064) h);
2106
+ --cirth-success-active: oklch(from var(--cirth-success) calc(l * 1.198) calc(c * 1.2) h);
2107
+ --cirth-success-surface: oklch(from var(--cirth-success) 35.3% .063 h);
2108
+ --cirth-warning-text: oklch(from var(--cirth-warning) calc(l * 1.124) calc(c * 1.121) h);
2109
+ --cirth-warning-border: var(--cirth-warning);
2110
+ --cirth-warning-active: oklch(from var(--cirth-warning) calc(l * 1.124) calc(c * 1.121) h);
2111
+ --cirth-warning-surface: oklch(from var(--cirth-warning) 35.3% .063 h);
2112
+ --cirth-primary-background: color-mix(in oklch,
2113
+ var(--cirth-primary) 75.2%,
2114
+ black);
2151
2115
  --cirth-primary-border: var(--cirth-primary-background);
2152
- --cirth-primary-underline: oklch(70% .129 69.35 / .5);
2153
- --cirth-primary-hover: oklch(78.7% .146 69.35);
2154
- --cirth-primary-hover-background: oklch(57% .105 69.35);
2116
+ --cirth-primary-underline: oklch(from var(--cirth-primary) l c h / 50%);
2117
+ --cirth-primary-hover: oklch(from var(--cirth-primary) calc(l * 1.124) calc(c * 1.132) h);
2118
+ --cirth-primary-hover-background: color-mix(in oklch,
2119
+ var(--cirth-primary) 81.4%,
2120
+ black);
2155
2121
  --cirth-primary-hover-border: var(--cirth-primary-hover-background);
2156
2122
  --cirth-primary-hover-underline: var(--cirth-primary-hover);
2157
- --cirth-primary-focus: oklch(70% .129 69.35 / .7);
2123
+ --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 70%);
2158
2124
  --cirth-primary-inverse: oklch(100% 0 0);
2159
- --cirth-secondary: oklch(70% .028 264);
2160
2125
  --cirth-secondary-background: oklch(48.3% .03 264);
2161
2126
  --cirth-secondary-border: var(--cirth-secondary-background);
2162
- --cirth-secondary-underline: oklch(70% .028 264 / .5);
2163
- --cirth-secondary-hover: oklch(78.7% .021 264);
2164
- --cirth-secondary-hover-background: oklch(52.7% .032 264);
2165
2127
  --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
2166
2128
  --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
2167
- --cirth-secondary-focus: oklch(70% .028 264 / .7);
2168
2129
  --cirth-secondary-inverse: oklch(100% 0 0);
2169
- --cirth-contrast: oklch(91.7% .006 264);
2170
- --cirth-contrast-background: oklch(96% 0 264);
2171
2130
  --cirth-contrast-border: var(--cirth-contrast-background);
2172
- --cirth-contrast-underline: oklch(91.7% .006 264 / .5);
2173
- --cirth-contrast-hover: oklch(100% 0 0);
2174
- --cirth-contrast-hover-background: oklch(100% 0 0);
2175
2131
  --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
2176
2132
  --cirth-contrast-hover-underline: var(--cirth-contrast-hover);
2177
- --cirth-contrast-focus: oklch(87.3% .011 264 / .5);
2178
- --cirth-contrast-inverse: oklch(0% 0 0);
2179
- --cirth-link-visited-color: oklch(65.7% .03 264);
2180
- --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);
2181
- --cirth-h1-color: oklch(96% 0 264);
2182
- --cirth-h2-color: oklch(91.7% .006 264);
2183
- --cirth-h3-color: oklch(83% .016 264);
2184
- --cirth-h4-color: oklch(78.7% .021 264);
2185
- --cirth-h5-color: oklch(74.3% .025 264);
2186
- --cirth-h6-color: oklch(65.7% .03 264);
2187
- --cirth-mark-background-color: oklch(35.3% .063 78);
2188
- --cirth-mark-color: oklch(100% 0 0);
2189
- --cirth-ins-color: oklch(78.7% .15 160.59);
2190
- --cirth-del-color: oklch(78.7% .106 29.73);
2133
+ --cirth-mark-background-color: var(--cirth-warning-surface);
2134
+ --cirth-ins-color: var(--cirth-success-text);
2135
+ --cirth-del-color: var(--cirth-error-text);
2191
2136
  --cirth-blockquote-border-color: var(--cirth-muted-border-color);
2192
2137
  --cirth-blockquote-footer-color: var(--cirth-muted-color);
2193
2138
  --cirth-button-box-shadow: 0 0 0 #0000;
2194
2139
  --cirth-button-hover-box-shadow: 0 0 0 #0000;
2195
2140
  --cirth-table-border-color: var(--cirth-muted-border-color);
2196
2141
  --cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
2197
- --cirth-code-background-color: oklch(23.4% .00725 264);
2198
- --cirth-code-color: oklch(65.7% .03 264);
2199
2142
  --cirth-code-kbd-background-color: var(--cirth-color);
2200
2143
  --cirth-code-kbd-color: var(--cirth-background-color);
2201
- --cirth-form-element-background-color: oklch(24.5% .0085 264);
2202
- --cirth-form-element-selected-background-color: oklch(31% .016 264);
2203
- --cirth-form-element-border-color: oklch(52.7% .032 264);
2204
- --cirth-form-element-color: oklch(91.7% .006 264);
2205
2144
  --cirth-form-element-placeholder-color: oklch(65.7% .03 264);
2206
- --cirth-form-element-active-background-color: oklch(23.4% .00725 264);
2207
2145
  --cirth-form-element-active-border-color: var(--cirth-primary-border);
2208
2146
  --cirth-form-element-focus-color: var(--cirth-primary-border);
2209
2147
  --cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
2210
- --cirth-form-element-invalid-border-color: oklch(70% .163 29.73);
2211
- --cirth-form-element-invalid-active-border-color: oklch(78.7% .106 29.73);
2148
+ --cirth-form-element-invalid-border-color: var(--cirth-error-border);
2149
+ --cirth-form-element-invalid-active-border-color: var(--cirth-error-active);
2212
2150
  --cirth-form-element-invalid-focus-color: var(--cirth-form-element-invalid-active-border-color);
2213
- --cirth-form-element-valid-border-color: oklch(70% .133 160.59);
2214
- --cirth-form-element-valid-active-border-color: oklch(78.7% .15 160.59);
2151
+ --cirth-form-element-valid-border-color: var(--cirth-success-border);
2152
+ --cirth-form-element-valid-active-border-color: var(--cirth-success-active);
2215
2153
  --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
2216
- --cirth-switch-background-color: oklch(52.7% .032 264);
2154
+ --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
2217
2155
  --cirth-switch-checked-background-color: var(--cirth-primary-background);
2218
2156
  --cirth-switch-color: var(--cirth-primary-inverse);
2219
- --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
2220
- --cirth-range-border-color: oklch(26.7% .011 264);
2221
- --cirth-range-active-border-color: oklch(31% .016 264);
2222
2157
  --cirth-range-thumb-border-color: var(--cirth-background-color);
2223
2158
  --cirth-range-thumb-color: var(--cirth-secondary-background);
2224
2159
  --cirth-range-thumb-active-color: var(--cirth-primary-background);
2225
- --cirth-accordion-border-color: var(--cirth-muted-border-color);
2226
2160
  --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
2227
2161
  --cirth-accordion-close-summary-color: var(--cirth-color);
2228
2162
  --cirth-accordion-open-summary-color: var(--cirth-muted-color);
2229
- --cirth-card-background-color: oklch(22.3% .006 264);
2230
2163
  --cirth-card-border-color: var(--cirth-card-background-color);
2231
2164
  --cirth-card-box-shadow: var(--cirth-box-shadow);
2232
- --cirth-card-sectioning-background-color: oklch(23.4% .00725 264);
2233
- --cirth-loading-spinner-opacity: var(--cirth-opacity-disabled);
2234
2165
  --cirth-modal-overlay-background-color: oklch(9% 0 312deg / var(--cirth-opacity-overlay));
2235
- --cirth-meter-optimum-color: oklch(65.7% .125 160.59);
2236
- --cirth-meter-suboptimum-color: oklch(70% .124 78);
2237
- --cirth-meter-even-less-good-color: oklch(74.3% .133 29.73);
2238
- --cirth-progress-background-color: oklch(26.7% .011 264);
2239
- --cirth-progress-border-color: oklch(52.7% .032 264);
2166
+ --cirth-meter-optimum-color: var(--cirth-success);
2167
+ --cirth-meter-suboptimum-color: var(--cirth-warning);
2168
+ --cirth-meter-even-less-good-color: var(--cirth-error);
2240
2169
  --cirth-progress-color: oklch(61.3% .113 69.35);
2170
+ --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");
2171
+ --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");
2172
+ --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");
2173
+ --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");
2241
2174
  --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");
2242
2175
  --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");
2243
2176
  }
@@ -2248,106 +2181,81 @@ details summary[role="button"]:after {
2248
2181
  }
2249
2182
 
2250
2183
  :where([data-theme="dark"]) {
2251
- --lightningcss-light: ;
2252
- --lightningcss-dark: initial;
2253
2184
  color-scheme: dark;
2254
- --cirth-background-color: oklch(20.15% .003 264);
2255
- --cirth-color: oklch(83% .016 264);
2256
- --cirth-text-selection-color: oklch(70% .129 69.35 / .1875);
2257
- --cirth-muted-color: oklch(61.3% .032 264);
2258
- --cirth-muted-border-color: oklch(26.7% .011 264);
2259
- --cirth-primary: oklch(70% .129 69.35);
2260
- --cirth-primary-background: oklch(52.7% .097 69.35);
2185
+ --cirth-error-text: oklch(from var(--cirth-error) calc(l * 1.059) calc(c * .797) h);
2186
+ --cirth-error-border: oklch(from var(--cirth-error) calc(l * .942) calc(c * 1.226) h);
2187
+ --cirth-error-active: oklch(from var(--cirth-error) calc(l * 1.059) calc(c * .797) h);
2188
+ --cirth-error-surface: oklch(from var(--cirth-error) 35.3% .063 h);
2189
+ --cirth-success-text: oklch(from var(--cirth-success) calc(l * 1.198) calc(c * 1.2) h);
2190
+ --cirth-success-border: oklch(from var(--cirth-success) calc(l * 1.065) calc(c * 1.064) h);
2191
+ --cirth-success-active: oklch(from var(--cirth-success) calc(l * 1.198) calc(c * 1.2) h);
2192
+ --cirth-success-surface: oklch(from var(--cirth-success) 35.3% .063 h);
2193
+ --cirth-warning-text: oklch(from var(--cirth-warning) calc(l * 1.124) calc(c * 1.121) h);
2194
+ --cirth-warning-border: var(--cirth-warning);
2195
+ --cirth-warning-active: oklch(from var(--cirth-warning) calc(l * 1.124) calc(c * 1.121) h);
2196
+ --cirth-warning-surface: oklch(from var(--cirth-warning) 35.3% .063 h);
2197
+ --cirth-primary-background: color-mix(in oklch,
2198
+ var(--cirth-primary) 75.2%,
2199
+ black);
2261
2200
  --cirth-primary-border: var(--cirth-primary-background);
2262
- --cirth-primary-underline: oklch(70% .129 69.35 / .5);
2263
- --cirth-primary-hover: oklch(78.7% .146 69.35);
2264
- --cirth-primary-hover-background: oklch(57% .105 69.35);
2201
+ --cirth-primary-underline: oklch(from var(--cirth-primary) l c h / 50%);
2202
+ --cirth-primary-hover: oklch(from var(--cirth-primary) calc(l * 1.124) calc(c * 1.132) h);
2203
+ --cirth-primary-hover-background: color-mix(in oklch,
2204
+ var(--cirth-primary) 81.4%,
2205
+ black);
2265
2206
  --cirth-primary-hover-border: var(--cirth-primary-hover-background);
2266
2207
  --cirth-primary-hover-underline: var(--cirth-primary-hover);
2267
- --cirth-primary-focus: oklch(70% .129 69.35 / .7);
2208
+ --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 70%);
2268
2209
  --cirth-primary-inverse: oklch(100% 0 0);
2269
- --cirth-secondary: oklch(70% .028 264);
2270
2210
  --cirth-secondary-background: oklch(48.3% .03 264);
2271
2211
  --cirth-secondary-border: var(--cirth-secondary-background);
2272
- --cirth-secondary-underline: oklch(70% .028 264 / .5);
2273
- --cirth-secondary-hover: oklch(78.7% .021 264);
2274
- --cirth-secondary-hover-background: oklch(52.7% .032 264);
2275
2212
  --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
2276
2213
  --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
2277
- --cirth-secondary-focus: oklch(70% .028 264 / .7);
2278
2214
  --cirth-secondary-inverse: oklch(100% 0 0);
2279
- --cirth-contrast: oklch(91.7% .006 264);
2280
- --cirth-contrast-background: oklch(96% 0 264);
2281
2215
  --cirth-contrast-border: var(--cirth-contrast-background);
2282
- --cirth-contrast-underline: oklch(91.7% .006 264 / .5);
2283
- --cirth-contrast-hover: oklch(100% 0 0);
2284
- --cirth-contrast-hover-background: oklch(100% 0 0);
2285
2216
  --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
2286
2217
  --cirth-contrast-hover-underline: var(--cirth-contrast-hover);
2287
- --cirth-contrast-focus: oklch(87.3% .011 264 / .5);
2288
- --cirth-contrast-inverse: oklch(0% 0 0);
2289
- --cirth-link-visited-color: oklch(65.7% .03 264);
2290
- --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);
2291
- --cirth-h1-color: oklch(96% 0 264);
2292
- --cirth-h2-color: oklch(91.7% .006 264);
2293
- --cirth-h3-color: oklch(83% .016 264);
2294
- --cirth-h4-color: oklch(78.7% .021 264);
2295
- --cirth-h5-color: oklch(74.3% .025 264);
2296
- --cirth-h6-color: oklch(65.7% .03 264);
2297
- --cirth-mark-background-color: oklch(35.3% .063 78);
2298
- --cirth-mark-color: oklch(100% 0 0);
2299
- --cirth-ins-color: oklch(78.7% .15 160.59);
2300
- --cirth-del-color: oklch(78.7% .106 29.73);
2218
+ --cirth-mark-background-color: var(--cirth-warning-surface);
2219
+ --cirth-ins-color: var(--cirth-success-text);
2220
+ --cirth-del-color: var(--cirth-error-text);
2301
2221
  --cirth-blockquote-border-color: var(--cirth-muted-border-color);
2302
2222
  --cirth-blockquote-footer-color: var(--cirth-muted-color);
2303
2223
  --cirth-button-box-shadow: 0 0 0 #0000;
2304
2224
  --cirth-button-hover-box-shadow: 0 0 0 #0000;
2305
2225
  --cirth-table-border-color: var(--cirth-muted-border-color);
2306
2226
  --cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
2307
- --cirth-code-background-color: oklch(23.4% .00725 264);
2308
- --cirth-code-color: oklch(65.7% .03 264);
2309
2227
  --cirth-code-kbd-background-color: var(--cirth-color);
2310
2228
  --cirth-code-kbd-color: var(--cirth-background-color);
2311
- --cirth-form-element-background-color: oklch(24.5% .0085 264);
2312
- --cirth-form-element-selected-background-color: oklch(31% .016 264);
2313
- --cirth-form-element-border-color: oklch(52.7% .032 264);
2314
- --cirth-form-element-color: oklch(91.7% .006 264);
2315
2229
  --cirth-form-element-placeholder-color: oklch(65.7% .03 264);
2316
- --cirth-form-element-active-background-color: oklch(23.4% .00725 264);
2317
2230
  --cirth-form-element-active-border-color: var(--cirth-primary-border);
2318
2231
  --cirth-form-element-focus-color: var(--cirth-primary-border);
2319
2232
  --cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
2320
- --cirth-form-element-invalid-border-color: oklch(70% .163 29.73);
2321
- --cirth-form-element-invalid-active-border-color: oklch(78.7% .106 29.73);
2233
+ --cirth-form-element-invalid-border-color: var(--cirth-error-border);
2234
+ --cirth-form-element-invalid-active-border-color: var(--cirth-error-active);
2322
2235
  --cirth-form-element-invalid-focus-color: var(--cirth-form-element-invalid-active-border-color);
2323
- --cirth-form-element-valid-border-color: oklch(70% .133 160.59);
2324
- --cirth-form-element-valid-active-border-color: oklch(78.7% .15 160.59);
2236
+ --cirth-form-element-valid-border-color: var(--cirth-success-border);
2237
+ --cirth-form-element-valid-active-border-color: var(--cirth-success-active);
2325
2238
  --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
2326
- --cirth-switch-background-color: oklch(52.7% .032 264);
2239
+ --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
2327
2240
  --cirth-switch-checked-background-color: var(--cirth-primary-background);
2328
2241
  --cirth-switch-color: var(--cirth-primary-inverse);
2329
- --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
2330
- --cirth-range-border-color: oklch(26.7% .011 264);
2331
- --cirth-range-active-border-color: oklch(31% .016 264);
2332
2242
  --cirth-range-thumb-border-color: var(--cirth-background-color);
2333
2243
  --cirth-range-thumb-color: var(--cirth-secondary-background);
2334
2244
  --cirth-range-thumb-active-color: var(--cirth-primary-background);
2335
- --cirth-accordion-border-color: var(--cirth-muted-border-color);
2336
2245
  --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
2337
2246
  --cirth-accordion-close-summary-color: var(--cirth-color);
2338
2247
  --cirth-accordion-open-summary-color: var(--cirth-muted-color);
2339
- --cirth-card-background-color: oklch(22.3% .006 264);
2340
2248
  --cirth-card-border-color: var(--cirth-card-background-color);
2341
2249
  --cirth-card-box-shadow: var(--cirth-box-shadow);
2342
- --cirth-card-sectioning-background-color: oklch(23.4% .00725 264);
2343
- --cirth-loading-spinner-opacity: var(--cirth-opacity-disabled);
2344
2250
  --cirth-modal-overlay-background-color: oklch(9% 0 312deg / var(--cirth-opacity-overlay));
2345
- --cirth-meter-optimum-color: oklch(65.7% .125 160.59);
2346
- --cirth-meter-suboptimum-color: oklch(70% .124 78);
2347
- --cirth-meter-even-less-good-color: oklch(74.3% .133 29.73);
2348
- --cirth-progress-background-color: oklch(26.7% .011 264);
2349
- --cirth-progress-border-color: oklch(52.7% .032 264);
2251
+ --cirth-meter-optimum-color: var(--cirth-success);
2252
+ --cirth-meter-suboptimum-color: var(--cirth-warning);
2253
+ --cirth-meter-even-less-good-color: var(--cirth-error);
2350
2254
  --cirth-progress-color: oklch(61.3% .113 69.35);
2255
+ --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");
2256
+ --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");
2257
+ --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");
2258
+ --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");
2351
2259
  --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");
2352
2260
  --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");
2353
2261
  }
@@ -2374,6 +2282,10 @@ progress, [type="checkbox"], [type="radio"], [type="range"] {
2374
2282
  --cirth-code-color: oklch(35.3% .021 264);
2375
2283
  --cirth-link-visited-color: oklch(35.3% .021 264);
2376
2284
  --cirth-muted-border-color: oklch(57% .032 264);
2285
+ --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");
2286
+ --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");
2287
+ --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");
2288
+ --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");
2377
2289
  --cirth-form-element-border-color: oklch(39.7% .025 264);
2378
2290
  --cirth-form-element-invalid-border-color: oklch(48.3% .166 29.73);
2379
2291
  --cirth-form-element-valid-border-color: oklch(48.3% .092 160.59);
@@ -2403,6 +2315,10 @@ progress, [type="checkbox"], [type="radio"], [type="range"] {
2403
2315
  --cirth-h5-color: var(--cirth-color);
2404
2316
  --cirth-h6-color: var(--cirth-color);
2405
2317
  --cirth-muted-color: oklch(78.7% .021 264);
2318
+ --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");
2319
+ --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");
2320
+ --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");
2321
+ --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");
2406
2322
  --cirth-secondary: oklch(78.7% .021 264);
2407
2323
  --cirth-code-color: oklch(83% .016 264);
2408
2324
  --cirth-link-visited-color: oklch(78.7% .021 264);
@@ -2413,6 +2329,8 @@ progress, [type="checkbox"], [type="radio"], [type="range"] {
2413
2329
  --cirth-form-element-valid-border-color: oklch(78.7% .15 160.59);
2414
2330
  --cirth-primary: oklch(78.7% .146 69.35);
2415
2331
  --cirth-primary-hover: oklch(87.3% .082 69.35);
2332
+ --cirth-primary-background: oklch(44% .081 69.35);
2333
+ --cirth-primary-hover-background: oklch(39.7% .073 69.35);
2416
2334
  --cirth-primary-underline: var(--cirth-primary);
2417
2335
  --cirth-secondary-underline: var(--cirth-secondary);
2418
2336
  --cirth-contrast-underline: var(--cirth-contrast);
@@ -2437,6 +2355,10 @@ progress, [type="checkbox"], [type="radio"], [type="range"] {
2437
2355
  --cirth-h5-color: var(--cirth-color);
2438
2356
  --cirth-h6-color: var(--cirth-color);
2439
2357
  --cirth-muted-color: oklch(78.7% .021 264);
2358
+ --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");
2359
+ --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");
2360
+ --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");
2361
+ --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");
2440
2362
  --cirth-secondary: oklch(78.7% .021 264);
2441
2363
  --cirth-code-color: oklch(83% .016 264);
2442
2364
  --cirth-link-visited-color: oklch(78.7% .021 264);
@@ -2447,6 +2369,8 @@ progress, [type="checkbox"], [type="radio"], [type="range"] {
2447
2369
  --cirth-form-element-valid-border-color: oklch(78.7% .15 160.59);
2448
2370
  --cirth-primary: oklch(78.7% .146 69.35);
2449
2371
  --cirth-primary-hover: oklch(87.3% .082 69.35);
2372
+ --cirth-primary-background: oklch(44% .081 69.35);
2373
+ --cirth-primary-hover-background: oklch(39.7% .073 69.35);
2450
2374
  --cirth-primary-underline: var(--cirth-primary);
2451
2375
  --cirth-secondary-underline: var(--cirth-secondary);
2452
2376
  --cirth-contrast-underline: var(--cirth-contrast);
@@ -2460,135 +2384,3 @@ progress, [type="checkbox"], [type="radio"], [type="range"] {
2460
2384
  --cirth-meter-even-less-good-color: oklch(83% .081 29.73);
2461
2385
  }
2462
2386
  }
2463
-
2464
- @media print {
2465
- :root, :host {
2466
- --cirth-print-color: oklch(0% 0 0);
2467
- --cirth-print-muted-color: oklch(48.3% .03 264);
2468
- --cirth-print-border-color: oklch(61.3% .032 264);
2469
- }
2470
-
2471
- html {
2472
- --lightningcss-light: initial;
2473
- --lightningcss-dark: ;
2474
- color-scheme: light;
2475
- background: none;
2476
- }
2477
-
2478
- body {
2479
- color: var(--cirth-print-color);
2480
- --lightningcss-light: initial;
2481
- --lightningcss-dark: ;
2482
- color-scheme: light;
2483
- --cirth-color: var(--cirth-print-color);
2484
- --cirth-h1-color: var(--cirth-print-color);
2485
- --cirth-h2-color: var(--cirth-print-color);
2486
- --cirth-h3-color: var(--cirth-print-color);
2487
- --cirth-h4-color: var(--cirth-print-color);
2488
- --cirth-h5-color: var(--cirth-print-color);
2489
- --cirth-h6-color: var(--cirth-print-color);
2490
- --cirth-code-color: var(--cirth-print-color);
2491
- --cirth-code-kbd-color: var(--cirth-print-color);
2492
- --cirth-form-element-color: var(--cirth-print-color);
2493
- --cirth-muted-color: var(--cirth-print-muted-color);
2494
- --cirth-form-element-placeholder-color: var(--cirth-print-muted-color);
2495
- --cirth-primary: var(--cirth-print-color);
2496
- --cirth-primary-hover: var(--cirth-print-color);
2497
- --cirth-primary-underline: var(--cirth-print-color);
2498
- --cirth-secondary: var(--cirth-print-color);
2499
- --cirth-secondary-underline: var(--cirth-print-color);
2500
- --cirth-contrast: var(--cirth-print-color);
2501
- --cirth-contrast-underline: var(--cirth-print-color);
2502
- --cirth-link-visited-color: var(--cirth-print-color);
2503
- --cirth-muted-border-color: var(--cirth-print-border-color);
2504
- --cirth-form-element-border-color: var(--cirth-print-border-color);
2505
- --cirth-box-shadow: none;
2506
- --cirth-card-box-shadow: none;
2507
- --cirth-card-background-color: transparent;
2508
- --cirth-card-sectioning-background-color: transparent;
2509
- --cirth-code-background-color: transparent;
2510
- --cirth-code-kbd-background-color: transparent;
2511
- --cirth-form-element-background-color: transparent;
2512
- --cirth-form-element-active-background-color: transparent;
2513
- --cirth-table-row-stripped-background-color: transparent;
2514
- --cirth-modal-overlay-background-color: transparent;
2515
- --cirth-ins-color: oklch(35.3% .067 160.59);
2516
- --cirth-del-color: oklch(35.3% .122 29.73);
2517
- --cirth-meter-optimum-color: oklch(52.7% .1 160.59);
2518
- --cirth-meter-suboptimum-color: oklch(48.3% .086 78);
2519
- --cirth-meter-even-less-good-color: oklch(44% .151 29.73);
2520
- background: none;
2521
- }
2522
-
2523
- kbd {
2524
- border: var(--cirth-border-width) solid var(--cirth-print-border-color);
2525
- }
2526
-
2527
- :is(button, [type="submit"], [type="reset"], [type="button"], [role="button"]) {
2528
- border-color: var(--cirth-print-border-color);
2529
- box-shadow: none;
2530
- color: var(--cirth-print-color);
2531
- background: none;
2532
- }
2533
-
2534
- [type="file"]::file-selector-button {
2535
- border-color: var(--cirth-print-border-color);
2536
- box-shadow: none;
2537
- color: var(--cirth-print-color);
2538
- background: none;
2539
- }
2540
-
2541
- :is(mark, meter, progress, [type="checkbox"], [type="radio"]) {
2542
- -webkit-print-color-adjust: exact;
2543
- print-color-adjust: exact;
2544
- }
2545
-
2546
- a[href^="http"]:not([role="button"], nav a):after {
2547
- content: " (" attr(href) ")";
2548
- color: var(--cirth-print-muted-color);
2549
- font-size: var(--cirth-font-size-sm);
2550
- word-break: break-all;
2551
- }
2552
-
2553
- thead {
2554
- display: table-header-group;
2555
- }
2556
-
2557
- tfoot {
2558
- display: table-footer-group;
2559
- }
2560
-
2561
- tr {
2562
- break-inside: avoid;
2563
- }
2564
-
2565
- pre {
2566
- white-space: pre-wrap;
2567
- overflow: visible;
2568
- }
2569
-
2570
- dialog {
2571
- backdrop-filter: none;
2572
- min-width: 0;
2573
- min-height: 0;
2574
- position: static;
2575
- }
2576
-
2577
- dialog > article {
2578
- max-height: none;
2579
- overflow: visible;
2580
- }
2581
-
2582
- :is(h1, h2, h3, h4, h5, h6) {
2583
- break-after: avoid;
2584
- }
2585
-
2586
- :is(figure, img) {
2587
- break-inside: avoid;
2588
- }
2589
-
2590
- :is(blockquote, li, p) {
2591
- orphans: 3;
2592
- widows: 3;
2593
- }
2594
- }