@cirthcss/cirth 0.15.0-beta.1 → 0.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/README.md +4 -4
  2. package/dist/cirth.classless.css +315 -254
  3. package/dist/cirth.classless.min.css +1 -1
  4. package/dist/cirth.classless.scoped.css +315 -254
  5. package/dist/cirth.classless.scoped.min.css +1 -1
  6. package/dist/cirth.css +397 -289
  7. package/dist/cirth.min.css +1 -1
  8. package/dist/cirth.print.classless.css +13 -10
  9. package/dist/cirth.print.classless.min.css +1 -1
  10. package/dist/cirth.print.classless.scoped.css +13 -10
  11. package/dist/cirth.print.classless.scoped.min.css +1 -1
  12. package/dist/cirth.print.css +13 -10
  13. package/dist/cirth.print.min.css +1 -1
  14. package/dist/cirth.print.scoped.css +13 -10
  15. package/dist/cirth.print.scoped.min.css +1 -1
  16. package/dist/cirth.scoped.css +397 -289
  17. package/dist/cirth.scoped.min.css +1 -1
  18. package/dist/presets/plain.css +2 -2
  19. package/dist/presets/plain.min.css +1 -1
  20. package/dist/presets/playroom.css +5 -5
  21. package/dist/presets/playroom.min.css +1 -1
  22. package/package.json +6 -4
package/dist/cirth.classless.scoped.css CHANGED
@@ -47,6 +47,10 @@
47
47
  margin-bottom: var(--cirth-block-spacing-vertical);
48
48
  }
49
49
 
50
+ .cirth main > section + section {
51
+ margin-block-start: var(--cirth-space-8);
52
+ }
53
+
50
54
  .cirth b, .cirth strong {
51
55
  font-weight: bolder;
52
56
  }
@@ -159,6 +163,15 @@
159
163
  background-color: var(--cirth-mark-background-color);
160
164
  color: var(--cirth-mark-color);
161
165
  vertical-align: baseline;
166
+ -webkit-box-decoration-break: clone;
167
+ box-decoration-break: clone;
168
+ }
169
+
170
+ @media (forced-colors: active) {
171
+ .cirth mark {
172
+ color: marktext;
173
+ background-color: mark;
174
+ }
162
175
  }
163
176
 
164
177
  .cirth blockquote {
@@ -197,7 +210,7 @@
197
210
  }
198
211
 
199
212
  .cirth :where(a:not([role="button"])), .cirth [role="link"] {
200
- --cirth-color: var(--cirth-primary);
213
+ --cirth-color: var(--cirth-primary-text);
201
214
  --cirth-background-color: transparent;
202
215
  --cirth-underline: var(--cirth-primary-underline);
203
216
  background-color: var(--cirth-background-color);
@@ -211,8 +224,8 @@
211
224
  }
212
225
 
213
226
  .cirth :where(a:not([role="button"])):is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), .cirth [role="link"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
214
- --cirth-color: var(--cirth-primary-hover);
215
- --cirth-underline: var(--cirth-primary-hover-underline);
227
+ --cirth-color: var(--cirth-primary-active);
228
+ --cirth-underline: var(--cirth-primary-underline-active);
216
229
  --cirth-text-decoration: underline;
217
230
  }
218
231
 
@@ -244,9 +257,9 @@
244
257
  }
245
258
 
246
259
  .cirth button, .cirth [type="submit"], .cirth [type="reset"], .cirth [type="button"], .cirth [role="button"] {
247
- --cirth-background-color: var(--cirth-primary-background);
260
+ --cirth-background-color: var(--cirth-primary-surface);
248
261
  --cirth-border-color: var(--cirth-primary-border);
249
- --cirth-color: var(--cirth-primary-inverse);
262
+ --cirth-color: var(--cirth-primary-on-surface);
250
263
  --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 #0000);
251
264
  max-width: 100%;
252
265
  min-block-size: max(2.75rem, var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
@@ -269,9 +282,9 @@
269
282
  }
270
283
 
271
284
  .cirth [type="file"]::file-selector-button {
272
- --cirth-background-color: var(--cirth-primary-background);
285
+ --cirth-background-color: var(--cirth-primary-surface);
273
286
  --cirth-border-color: var(--cirth-primary-border);
274
- --cirth-color: var(--cirth-primary-inverse);
287
+ --cirth-color: var(--cirth-primary-on-surface);
275
288
  --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 #0000);
276
289
  max-width: 100%;
277
290
  min-block-size: max(2.75rem, var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
@@ -294,24 +307,24 @@
294
307
  }
295
308
 
296
309
  .cirth button[aria-current]:not([aria-current="false"]), .cirth button:is(:hover, :active, :focus), .cirth [type="submit"][aria-current]:not([aria-current="false"]), .cirth [type="submit"]:is(:hover, :active, :focus), .cirth [type="reset"][aria-current]:not([aria-current="false"]), .cirth [type="reset"]:is(:hover, :active, :focus), .cirth [type="button"][aria-current]:not([aria-current="false"]), .cirth [type="button"]:is(:hover, :active, :focus), .cirth [role="button"][aria-current]:not([aria-current="false"]), .cirth [role="button"]:is(:hover, :active, :focus) {
297
- --cirth-background-color: var(--cirth-primary-hover-background);
298
- --cirth-border-color: var(--cirth-primary-hover-border);
310
+ --cirth-background-color: var(--cirth-primary-surface-active);
311
+ --cirth-border-color: var(--cirth-primary-border-active);
299
312
  --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000);
300
- --cirth-color: var(--cirth-primary-inverse);
313
+ --cirth-color: var(--cirth-primary-on-surface);
301
314
  }
302
315
 
303
316
  .cirth [type="file"]::file-selector-button:is() {
304
- --cirth-background-color: var(--cirth-primary-hover-background);
305
- --cirth-border-color: var(--cirth-primary-hover-border);
317
+ --cirth-background-color: var(--cirth-primary-surface-active);
318
+ --cirth-border-color: var(--cirth-primary-border-active);
306
319
  --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000);
307
- --cirth-color: var(--cirth-primary-inverse);
320
+ --cirth-color: var(--cirth-primary-on-surface);
308
321
  }
309
322
 
310
323
  .cirth [type="file"]::file-selector-button:is(:hover, :active, :focus) {
311
- --cirth-background-color: var(--cirth-primary-hover-background);
312
- --cirth-border-color: var(--cirth-primary-hover-border);
324
+ --cirth-background-color: var(--cirth-primary-surface-active);
325
+ --cirth-border-color: var(--cirth-primary-border-active);
313
326
  --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000);
314
- --cirth-color: var(--cirth-primary-inverse);
327
+ --cirth-color: var(--cirth-primary-on-surface);
315
328
  }
316
329
 
317
330
  .cirth button:active, .cirth [type="submit"]:active, .cirth [type="reset"]:active, .cirth [type="button"]:active, .cirth [role="button"]:active {
@@ -333,29 +346,29 @@
333
346
  }
334
347
 
335
348
  .cirth [type="reset"] {
336
- --cirth-background-color: var(--cirth-secondary-background);
349
+ --cirth-background-color: var(--cirth-secondary-surface);
337
350
  --cirth-border-color: var(--cirth-secondary-border);
338
- --cirth-color: var(--cirth-secondary-inverse);
351
+ --cirth-color: var(--cirth-secondary-on-surface);
339
352
  cursor: pointer;
340
353
  }
341
354
 
342
355
  .cirth [type="file"]::file-selector-button {
343
- --cirth-background-color: var(--cirth-secondary-background);
356
+ --cirth-background-color: var(--cirth-secondary-surface);
344
357
  --cirth-border-color: var(--cirth-secondary-border);
345
- --cirth-color: var(--cirth-secondary-inverse);
358
+ --cirth-color: var(--cirth-secondary-on-surface);
346
359
  cursor: pointer;
347
360
  }
348
361
 
349
362
  .cirth [type="reset"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
350
- --cirth-background-color: var(--cirth-secondary-hover-background);
351
- --cirth-border-color: var(--cirth-secondary-hover-border);
352
- --cirth-color: var(--cirth-secondary-inverse);
363
+ --cirth-background-color: var(--cirth-secondary-surface-active);
364
+ --cirth-border-color: var(--cirth-secondary-border-active);
365
+ --cirth-color: var(--cirth-secondary-on-surface);
353
366
  }
354
367
 
355
368
  .cirth [type="file"]::file-selector-button:is(:hover, :active, :focus) {
356
- --cirth-background-color: var(--cirth-secondary-hover-background);
357
- --cirth-border-color: var(--cirth-secondary-hover-border);
358
- --cirth-color: var(--cirth-secondary-inverse);
369
+ --cirth-background-color: var(--cirth-secondary-surface-active);
370
+ --cirth-border-color: var(--cirth-secondary-border-active);
371
+ --cirth-color: var(--cirth-secondary-on-surface);
359
372
  }
360
373
 
361
374
  .cirth [type="reset"]:focus-visible {
@@ -381,6 +394,8 @@
381
394
 
382
395
  .cirth caption {
383
396
  color: var(--cirth-muted-color);
397
+ font-size: var(--cirth-font-size-sm);
398
+ line-height: var(--cirth-line-height-normal);
384
399
  text-align: start;
385
400
  padding-block-end: calc(var(--cirth-spacing) * .5);
386
401
  }
@@ -487,6 +502,8 @@
487
502
  .cirth figure figcaption {
488
503
  padding: calc(var(--cirth-spacing) * .5) 0;
489
504
  color: var(--cirth-muted-color);
505
+ font-size: var(--cirth-font-size-sm);
506
+ line-height: var(--cirth-line-height-normal);
490
507
  }
491
508
 
492
509
  .cirth hr {
@@ -596,6 +613,20 @@
596
613
  border-style: dashed;
597
614
  }
598
615
 
616
+ .cirth input[type="number"][readonly] {
617
+ appearance: textfield;
618
+ }
619
+
620
+ .cirth input[type="number"][readonly]::-webkit-inner-spin-button {
621
+ -webkit-appearance: none;
622
+ margin: 0;
623
+ }
624
+
625
+ .cirth input[type="number"][readonly]::-webkit-outer-spin-button {
626
+ -webkit-appearance: none;
627
+ margin: 0;
628
+ }
629
+
599
630
  .cirth input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [readonly]):is(:active, :focus), .cirth :where(select, textarea):not([readonly]):is(:active, :focus) {
600
631
  --cirth-background-color: var(--cirth-form-element-active-background-color);
601
632
  }
@@ -762,7 +793,7 @@
762
793
  }
763
794
 
764
795
  .cirth [type="checkbox"]:checked, .cirth [type="checkbox"]:checked:active, .cirth [type="checkbox"]:checked:focus, .cirth [type="radio"]:checked, .cirth [type="radio"]:checked:active, .cirth [type="radio"]:checked:focus {
765
- --cirth-background-color: var(--cirth-primary-background);
796
+ --cirth-background-color: var(--cirth-primary-surface);
766
797
  --cirth-border-color: var(--cirth-primary-border);
767
798
  }
768
799
 
@@ -777,7 +808,7 @@
777
808
  }
778
809
 
779
810
  .cirth [type="checkbox"]:not([role="switch"]):checked:before, .cirth [type="checkbox"]:not([role="switch"]):indeterminate:before {
780
- background-color: var(--cirth-primary-inverse);
811
+ background-color: var(--cirth-primary-on-surface);
781
812
  content: "";
782
813
  width: 100%;
783
814
  height: 100%;
@@ -798,7 +829,7 @@
798
829
  }
799
830
 
800
831
  .cirth [type="checkbox"]:not([role="switch"]):indeterminate {
801
- --cirth-background-color: var(--cirth-primary-background);
832
+ --cirth-background-color: var(--cirth-primary-surface);
802
833
  --cirth-border-color: var(--cirth-primary-border);
803
834
  }
804
835
 
@@ -811,7 +842,7 @@
811
842
  }
812
843
 
813
844
  .cirth [type="radio"]:checked, .cirth [type="radio"]:checked:active, .cirth [type="radio"]:checked:focus {
814
- --cirth-background-color: var(--cirth-primary-inverse);
845
+ --cirth-background-color: var(--cirth-primary-on-surface);
815
846
  border-width: .42em;
816
847
  }
817
848
 
@@ -975,8 +1006,8 @@
975
1006
  }
976
1007
 
977
1008
  .cirth [type="file"]:is(:hover, :active, :focus)::file-selector-button {
978
- --cirth-background-color: var(--cirth-secondary-hover-background);
979
- --cirth-border-color: var(--cirth-secondary-hover-border);
1009
+ --cirth-background-color: var(--cirth-secondary-surface-active);
1010
+ --cirth-border-color: var(--cirth-secondary-border-active);
980
1011
  }
981
1012
 
982
1013
  .cirth [type="file"]:focus::file-selector-button {
@@ -986,9 +1017,9 @@
986
1017
 
987
1018
  .cirth [type="range"] {
988
1019
  appearance: none;
989
- background: none;
990
1020
  width: 100%;
991
- height: 1.25rem;
1021
+ height: max(2.75rem, var(--cirth-font-size-md) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
1022
+ background: none;
992
1023
  }
993
1024
 
994
1025
  .cirth [type="range"]::-webkit-slider-runnable-track {
@@ -1035,6 +1066,18 @@
1035
1066
  --cirth-range-thumb-color: var(--cirth-range-thumb-active-color);
1036
1067
  }
1037
1068
 
1069
+ @media (hover: hover) and (pointer: fine) {
1070
+ .cirth [type="range"]:hover:not(:active, :focus, :disabled) {
1071
+ --cirth-range-border-color: var(--cirth-range-active-border-color);
1072
+ --cirth-range-thumb-color: var(--cirth-secondary-active);
1073
+ }
1074
+ }
1075
+
1076
+ .cirth [type="range"]:focus-visible {
1077
+ outline: var(--cirth-outline-width) solid var(--cirth-primary-focus);
1078
+ outline-offset: var(--cirth-space-1);
1079
+ }
1080
+
1038
1081
  .cirth [type="range"]:active::-webkit-slider-thumb {
1039
1082
  transform: scale(1.25);
1040
1083
  }
@@ -1306,7 +1349,7 @@
1306
1349
  --cirth-button-box-shadow: 0 0 0 var(--cirth-border-width)
1307
1350
  var(--cirth-primary-border);
1308
1351
  --cirth-button-hover-box-shadow: 0 0 0 var(--cirth-border-width)
1309
- var(--cirth-primary-hover-border);
1352
+ var(--cirth-primary-border-active);
1310
1353
  }
1311
1354
 
1312
1355
  .cirth [role="search"] button:focus, .cirth [role="search"] [type="submit"]:focus, .cirth [role="search"] [type="reset"]:focus, .cirth [role="search"] [type="button"]:focus, .cirth [role="search"] [role="button"]:focus, .cirth [role="group"]:not(fieldset) button:focus, .cirth [role="group"]:not(fieldset) [type="submit"]:focus, .cirth [role="group"]:not(fieldset) [type="reset"]:focus, .cirth [role="group"]:not(fieldset) [type="button"]:focus, .cirth [role="group"]:not(fieldset) [role="button"]:focus {
@@ -1438,7 +1481,7 @@
1438
1481
  @starting-style {
1439
1482
  .cirth dialog[open] > article {
1440
1483
  opacity: 0;
1441
- transform: translateY(-100%);
1484
+ transform: translateY(-.5rem);
1442
1485
  }
1443
1486
  }
1444
1487
 
@@ -1637,11 +1680,11 @@
1637
1680
  .cirth header:not(:is(article, aside, dialog, figure, li, nav, section, td) *) > nav li :where(a:not([role="button"]), [role="link"]):is(:hover, :focus, :active) {
1638
1681
  --cirth-color: color-mix(in oklch,
1639
1682
  var(--cirth-muted-color),
1640
- var(--cirth-contrast));
1683
+ var(--cirth-contrast-text));
1641
1684
  }
1642
1685
 
1643
1686
  .cirth header:not(:is(article, aside, dialog, figure, li, nav, section, td) *) > nav li :where(a:not([role="button"]), [role="link"]):is([aria-current]:not([aria-current="false"]), [aria-selected="true"]) {
1644
- --cirth-color: var(--cirth-contrast);
1687
+ --cirth-color: var(--cirth-contrast-text);
1645
1688
  font-weight: var(--cirth-font-weight-semibold);
1646
1689
  }
1647
1690
 
@@ -1798,6 +1841,7 @@
1798
1841
  scroll-behavior: auto;
1799
1842
  transition-delay: var(--cirth-duration-instant);
1800
1843
  transition-duration: var(--cirth-duration-instant);
1844
+ --cirth-transition: var(--cirth-duration-instant) var(--cirth-ease-out);
1801
1845
  animation-duration: 1ms;
1802
1846
  animation-iteration-count: 1;
1803
1847
  animation-delay: -1ms;
@@ -1925,7 +1969,11 @@
1925
1969
  --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");
1926
1970
  --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");
1927
1971
  --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");
1928
- --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");
1972
+ --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(142, 144, 161)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
1973
+ }
1974
+
1975
+ .cirth :focus-visible {
1976
+ transition-duration: var(--cirth-duration-instant);
1929
1977
  }
1930
1978
 
1931
1979
  .cirth a {
@@ -2054,47 +2102,46 @@
2054
2102
  }
2055
2103
 
2056
2104
  .cirth {
2057
- --cirth-canvas: light-dark(oklch(97.4% .004 69.35), oklch(20.15% .003 264));
2058
- --cirth-ink: light-dark(oklch(35.3% .021 264), oklch(83% .016 264));
2105
+ --cirth-canvas: light-dark(oklch(97.3% .006 44), oklch(20.15% .0225 280));
2106
+ --cirth-ink: light-dark(oklch(35.3% .027 280), oklch(83% .011 280));
2059
2107
  --cirth-color: var(--cirth-ink);
2060
- --cirth-text-selection-color: light-dark(oklch(65.7% .121 69.35 / .25), oklch(70% .129 69.35 / .1875));
2061
- --cirth-muted-color: light-dark(oklch(52.7% .032 264), oklch(65.7% .03 264));
2062
- --cirth-muted-border-color: light-dark(oklch(93.85% .003 264), oklch(26.7% .011 264));
2063
- --cirth-error: light-dark(oklch(44% .151 29.73), oklch(74.3% .133 29.73));
2064
- --cirth-success: light-dark(oklch(52.7% .1 160.59), oklch(65.7% .125 160.59));
2065
- --cirth-warning: light-dark(oklch(48.3% .086 78), oklch(70% .124 78));
2066
- --cirth-primary: light-dark(oklch(52.7% .097 69.35), oklch(70% .129 69.35));
2067
- --cirth-secondary: light-dark(oklch(52.7% .032 264), oklch(70% .028 264));
2068
- --cirth-secondary-underline: light-dark(oklch(52.7% .032 264 / .5), oklch(70% .028 264 / .5));
2069
- --cirth-secondary-hover: light-dark(oklch(44% .028 264), oklch(78.7% .021 264));
2070
- --cirth-secondary-hover-background: light-dark(oklch(44% .028 264), oklch(52.7% .032 264));
2071
- --cirth-secondary-focus: light-dark(oklch(48.3% .03 264 / .7), oklch(70% .028 264 / .7));
2072
- --cirth-contrast: light-dark(oklch(22.3% .006 264), oklch(91.7% .006 264));
2073
- --cirth-contrast-background: light-dark(oklch(22.3% .006 264), oklch(96% 0 264));
2074
- --cirth-contrast-underline: light-dark(oklch(22.3% .006 264 / .5), oklch(91.7% .006 264 / .5));
2075
- --cirth-contrast-hover: light-dark(oklch(0% 0 0), oklch(100% 0 0));
2076
- --cirth-contrast-hover-background: light-dark(oklch(0% 0 0), oklch(100% 0 0));
2077
- --cirth-contrast-focus: light-dark(oklch(48.3% .03 264 / .7), oklch(87.3% .011 264 / .5));
2078
- --cirth-contrast-inverse: light-dark(oklch(100% 0 0), oklch(0% 0 0));
2079
- --cirth-link-visited-color: light-dark(oklch(48.3% 0 264), oklch(65.7% 0 264));
2080
- --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),
2081
- .0145rem .029rem .174rem oklch(9% 0 none / .01698), .0335rem .067rem .402rem oklch(9% 0 none / .024), .0625rem .125rem .75rem oklch(9% 0 none / .03), .1125rem .225rem 1.35rem oklch(9% 0 none / .036), .2085rem .417rem 2.502rem oklch(9% 0 none / .04302), .5rem 1rem 6rem oklch(9% 0 none / .06), 0 0 0 .0625rem oklch(9% 0 none / .015));
2082
- --cirth-h1-color: light-dark(oklch(22.3% .006 264), oklch(96% 0 264));
2083
- --cirth-h2-color: light-dark(oklch(26.7% .011 264), oklch(91.7% .006 264));
2084
- --cirth-h3-color: light-dark(oklch(31% .016 264), oklch(83% .016 264));
2085
- --cirth-h4-color: light-dark(oklch(35.3% .021 264), oklch(78.7% .021 264));
2086
- --cirth-h5-color: light-dark(oklch(39.7% .025 264), oklch(74.3% .025 264));
2087
- --cirth-h6-color: light-dark(oklch(44% .028 264), oklch(65.7% .03 264));
2088
- --cirth-mark-color: light-dark(oklch(18% 0 264), oklch(100% 0 0));
2089
- --cirth-code-color: light-dark(oklch(52.7% .032 264), oklch(65.7% .03 264));
2090
- --cirth-form-element-selected-background-color: light-dark(oklch(91.7% .006 264), oklch(31% .016 264));
2091
- --cirth-form-element-border-color: light-dark(oklch(61.3% .032 264), oklch(52.7% .032 264));
2092
- --cirth-form-element-color: light-dark(oklch(26.7% .011 264), oklch(91.7% .006 264));
2093
- --cirth-switch-background-color: light-dark(oklch(61.3% .032 264), oklch(52.7% .032 264));
2094
- --cirth-range-border-color: light-dark(oklch(91.7% .006 264), oklch(26.7% .011 264));
2095
- --cirth-range-active-border-color: light-dark(oklch(83% .016 264), oklch(31% .016 264));
2096
- --cirth-progress-background-color: light-dark(oklch(91.7% .006 264), oklch(26.7% .011 264));
2097
- --cirth-progress-border-color: light-dark(oklch(61.3% .032 264), oklch(52.7% .032 264));
2108
+ --cirth-muted-color: light-dark(oklch(52.7% .031 280), oklch(65.7% .025 280));
2109
+ --cirth-muted-border-color: light-dark(oklch(93.85% .002 280), oklch(26.7% .025 280));
2110
+ --cirth-error: light-dark(oklch(44% .151 22), oklch(74.3% .133 22));
2111
+ --cirth-success: light-dark(oklch(52.7% .115 153), oklch(65.7% .144 153));
2112
+ --cirth-warning: light-dark(oklch(48.3% .084 89.5), oklch(70% .122 89.5));
2113
+ --cirth-primary: light-dark(oklch(52.7% .107 44), oklch(65.7% .134 44));
2114
+ --cirth-secondary-text: light-dark(oklch(52.7% .031 280), oklch(70% .021 280));
2115
+ --cirth-secondary-underline: light-dark(oklch(52.7% .031 280 / .5), oklch(70% .021 280 / .5));
2116
+ --cirth-secondary-active: light-dark(oklch(44% .029 280), oklch(78.7% .014 280));
2117
+ --cirth-secondary-surface-active: light-dark(oklch(44% .029 280), oklch(52.7% .031 280));
2118
+ --cirth-secondary-focus: light-dark(oklch(48.3% .03 280 / .7), oklch(70% .021 280 / .7));
2119
+ --cirth-contrast-text: light-dark(oklch(22.3% .023 280), oklch(91.7% .004 280));
2120
+ --cirth-contrast-surface: light-dark(oklch(22.3% .023 280), oklch(96% 0 280));
2121
+ --cirth-contrast-underline: light-dark(oklch(22.3% .023 280 / .5), oklch(91.7% .004 280 / .5));
2122
+ --cirth-contrast-active: light-dark(oklch(0% 0 0), oklch(100% 0 0));
2123
+ --cirth-contrast-surface-active: light-dark(oklch(0% 0 0), oklch(100% 0 0));
2124
+ --cirth-contrast-focus: light-dark(oklch(48.3% .03 280 / .7), oklch(87.3% .007 280 / .5));
2125
+ --cirth-contrast-on-surface: light-dark(oklch(100% 0 0), oklch(0% 0 0));
2126
+ --cirth-link-visited-color: light-dark(oklch(48.3% 0 280), oklch(65.7% 0 280));
2127
+ --cirth-box-shadow: light-dark(.0145rem .029rem .174rem oklch(65.7% .025 280 / .01698), .0335rem .067rem .402rem oklch(65.7% .025 280 / .024), .0625rem .125rem .75rem oklch(65.7% .025 280 / .03), .1125rem .225rem 1.35rem oklch(65.7% .025 280 / .036), .2085rem .417rem 2.502rem oklch(65.7% .025 280 / .04302), .5rem 1rem 6rem oklch(65.7% .025 280 / .06), 0 0 0 .0625rem oklch(65.7% .025 280 / .015),
2128
+ .0145rem .029rem .174rem oklch(9% .011 280 / .01698), .0335rem .067rem .402rem oklch(9% .011 280 / .024), .0625rem .125rem .75rem oklch(9% .011 280 / .03), .1125rem .225rem 1.35rem oklch(9% .011 280 / .036), .2085rem .417rem 2.502rem oklch(9% .011 280 / .04302), .5rem 1rem 6rem oklch(9% .011 280 / .06), 0 0 0 .0625rem oklch(9% .011 280 / .015));
2129
+ --cirth-h1-color: light-dark(oklch(22.3% .023 280), oklch(96% 0 280));
2130
+ --cirth-h2-color: light-dark(oklch(26.7% .025 280), oklch(91.7% .004 280));
2131
+ --cirth-h3-color: light-dark(oklch(31% .026 280), oklch(83% .011 280));
2132
+ --cirth-h4-color: light-dark(oklch(35.3% .027 280), oklch(78.7% .014 280));
2133
+ --cirth-h5-color: light-dark(oklch(39.7% .028 280), oklch(74.3% .018 280));
2134
+ --cirth-h6-color: light-dark(oklch(44% .029 280), oklch(65.7% .025 280));
2135
+ --cirth-mark-color: light-dark(oklch(18% .022 280), oklch(100% 0 0));
2136
+ --cirth-code-color: light-dark(oklch(52.7% .031 280), oklch(65.7% .025 280));
2137
+ --cirth-form-element-selected-background-color: light-dark(oklch(91.7% .004 280), oklch(31% .026 280));
2138
+ --cirth-form-element-border-color: light-dark(oklch(61.3% .028 280), oklch(52.7% .031 280));
2139
+ --cirth-form-element-color: light-dark(oklch(26.7% .025 280), oklch(91.7% .004 280));
2140
+ --cirth-switch-background-color: light-dark(oklch(61.3% .028 280), oklch(52.7% .031 280));
2141
+ --cirth-range-border-color: light-dark(oklch(91.7% .004 280), oklch(26.7% .025 280));
2142
+ --cirth-range-active-border-color: light-dark(oklch(83% .011 280), oklch(31% .026 280));
2143
+ --cirth-progress-background-color: light-dark(oklch(91.7% .004 280), oklch(26.7% .025 280));
2144
+ --cirth-progress-border-color: light-dark(oklch(61.3% .028 280), oklch(52.7% .031 280));
2098
2145
  }
2099
2146
 
2100
2147
  .cirth:where([data-theme="light"]), .cirth :where([data-theme="light"]), .cirth:where(:not([data-theme="dark"])) {
@@ -2111,17 +2158,21 @@
2111
2158
  --cirth-warning-border: oklch(from var(--cirth-warning) calc(l * 1.269) calc(c * 1.267) h);
2112
2159
  --cirth-warning-active: oklch(from var(--cirth-warning) calc(l * 1.091) calc(c * 1.081) h);
2113
2160
  --cirth-warning-surface: oklch(from var(--cirth-warning) 93% .05 h);
2114
- --cirth-primary-background: var(--cirth-primary);
2115
- --cirth-primary-border: var(--cirth-primary-background);
2161
+ --cirth-primary-text: var(--cirth-primary);
2162
+ --cirth-primary-surface: var(--cirth-primary);
2163
+ --cirth-primary-border: var(--cirth-primary-surface);
2116
2164
  --cirth-primary-underline: oklch(from var(--cirth-primary) l c h / 50%);
2117
- --cirth-primary-hover: color-mix(in oklch, var(--cirth-primary) 83.5%, black);
2118
- --cirth-primary-hover-background: color-mix(in oklch,
2165
+ --cirth-primary-active: color-mix(in oklch,
2166
+ var(--cirth-primary) 83.5%,
2167
+ black);
2168
+ --cirth-primary-surface-active: color-mix(in oklch,
2119
2169
  var(--cirth-primary) 91.7%,
2120
2170
  black);
2121
- --cirth-primary-hover-border: var(--cirth-primary-hover-background);
2122
- --cirth-primary-hover-underline: var(--cirth-primary-hover);
2171
+ --cirth-primary-border-active: var(--cirth-primary-surface-active);
2172
+ --cirth-primary-underline-active: var(--cirth-primary-active);
2123
2173
  --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 75%);
2124
- --cirth-primary-inverse: oklch(100% 0 0);
2174
+ --cirth-primary-on-surface: oklch(100% 0 0);
2175
+ --cirth-text-selection-color: oklch(from var(--cirth-primary) calc(l * 1.247) c h / 25%);
2125
2176
  --cirth-code-background-color: oklch(from var(--cirth-canvas) calc(l - .019) c h);
2126
2177
  --cirth-card-sectioning-background-color: oklch(from var(--cirth-canvas) calc(l + .009) c h);
2127
2178
  --cirth-form-element-background-color: oklch(from var(--cirth-canvas) calc(l - .008) c h);
@@ -2129,15 +2180,17 @@
2129
2180
  --cirth-form-element-active-background-color: var(--cirth-canvas);
2130
2181
  --cirth-dropdown-background-color: var(--cirth-card-background-color);
2131
2182
  --cirth-popover-background-color: var(--cirth-card-background-color);
2132
- --cirth-secondary-background: oklch(48.3% .03 264);
2133
- --cirth-secondary-border: var(--cirth-secondary-background);
2134
- --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
2135
- --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
2136
- --cirth-secondary-inverse: oklch(100% 0 0);
2137
- --cirth-contrast-border: var(--cirth-contrast-background);
2138
- --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
2139
- --cirth-contrast-hover-underline: var(--cirth-secondary-hover);
2140
- --cirth-mark-background-color: var(--cirth-warning-surface);
2183
+ --cirth-secondary-surface: oklch(48.3% .03 280);
2184
+ --cirth-secondary-border: var(--cirth-secondary-surface);
2185
+ --cirth-secondary-border-active: var(--cirth-secondary-surface-active);
2186
+ --cirth-secondary-underline-active: var(--cirth-secondary-active);
2187
+ --cirth-secondary-on-surface: oklch(100% 0 0);
2188
+ --cirth-contrast-border: var(--cirth-contrast-surface);
2189
+ --cirth-contrast-border-active: var(--cirth-contrast-surface-active);
2190
+ --cirth-contrast-underline-active: var(--cirth-secondary-active);
2191
+ --cirth-mark-background-color: color-mix(in oklab,
2192
+ var(--cirth-primary) 18%,
2193
+ var(--cirth-canvas));
2141
2194
  --cirth-ins-color: var(--cirth-success-text);
2142
2195
  --cirth-del-color: var(--cirth-error-text);
2143
2196
  --cirth-blockquote-border-color: var(--cirth-muted-border-color);
@@ -2145,7 +2198,7 @@
2145
2198
  --cirth-button-box-shadow: 0 0 0 #0000;
2146
2199
  --cirth-button-hover-box-shadow: 0 0 0 #0000;
2147
2200
  --cirth-table-border-color: var(--cirth-card-border-color);
2148
- --cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
2201
+ --cirth-table-row-stripped-background-color: oklch(57% .032 280 / .0375);
2149
2202
  --cirth-code-kbd-background-color: var(--cirth-ink);
2150
2203
  --cirth-code-kbd-color: var(--cirth-background-color);
2151
2204
  --cirth-form-element-placeholder-color: var(--cirth-muted-color);
@@ -2159,28 +2212,28 @@
2159
2212
  --cirth-form-element-valid-active-border-color: var(--cirth-success-active);
2160
2213
  --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
2161
2214
  --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
2162
- --cirth-switch-checked-background-color: var(--cirth-primary-background);
2163
- --cirth-switch-color: var(--cirth-primary-inverse);
2215
+ --cirth-switch-checked-background-color: var(--cirth-primary-surface);
2216
+ --cirth-switch-color: var(--cirth-primary-on-surface);
2164
2217
  --cirth-range-thumb-border-color: var(--cirth-background-color);
2165
- --cirth-range-thumb-color: var(--cirth-secondary-background);
2166
- --cirth-range-thumb-active-color: var(--cirth-primary-background);
2167
- --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
2218
+ --cirth-range-thumb-color: var(--cirth-secondary-text);
2219
+ --cirth-range-thumb-active-color: var(--cirth-primary-surface);
2220
+ --cirth-accordion-active-summary-color: var(--cirth-primary-active);
2168
2221
  --cirth-accordion-close-summary-color: var(--cirth-ink);
2169
2222
  --cirth-accordion-open-summary-color: var(--cirth-ink);
2170
2223
  --cirth-card-border-color: color-mix(in oklab,
2171
2224
  var(--cirth-form-element-border-color) 38%,
2172
- var(--cirth-card-background-color));
2173
- --cirth-modal-overlay-background-color: oklch(93.85% .003 264deg / var(--cirth-opacity-overlay));
2225
+ oklch(from var(--cirth-card-background-color) l 0 h));
2226
+ --cirth-modal-overlay-background-color: oklch(93.85% .002 280deg / var(--cirth-opacity-overlay));
2174
2227
  --cirth-meter-optimum-color: var(--cirth-success);
2175
2228
  --cirth-meter-suboptimum-color: var(--cirth-warning);
2176
2229
  --cirth-meter-even-less-good-color: var(--cirth-error);
2177
- --cirth-progress-color: var(--cirth-primary-background);
2178
- --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");
2179
- --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");
2180
- --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");
2181
- --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");
2182
- --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");
2183
- --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");
2230
+ --cirth-progress-color: var(--cirth-primary-surface);
2231
+ --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(103, 105, 125)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
2232
+ --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(103, 105, 125)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
2233
+ --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(103, 105, 125)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
2234
+ --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(103, 105, 125)' 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");
2235
+ --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, 126, 74)' 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");
2236
+ --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, 44, 56)' 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");
2184
2237
  }
2185
2238
 
2186
2239
  @media only screen and (prefers-color-scheme: dark) {
@@ -2198,19 +2251,21 @@
2198
2251
  --cirth-warning-border: var(--cirth-warning);
2199
2252
  --cirth-warning-active: oklch(from var(--cirth-warning) calc(l * 1.124) calc(c * 1.121) h);
2200
2253
  --cirth-warning-surface: oklch(from var(--cirth-warning) 35.3% .063 h);
2201
- --cirth-primary-background: color-mix(in oklch,
2254
+ --cirth-primary-text: var(--cirth-primary);
2255
+ --cirth-primary-surface: color-mix(in oklch,
2202
2256
  var(--cirth-primary) 75.2%,
2203
2257
  black);
2204
- --cirth-primary-border: var(--cirth-primary-background);
2258
+ --cirth-primary-border: var(--cirth-primary-surface);
2205
2259
  --cirth-primary-underline: oklch(from var(--cirth-primary) l c h / 50%);
2206
- --cirth-primary-hover: oklch(from var(--cirth-primary) calc(l * 1.124) calc(c * 1.132) h);
2207
- --cirth-primary-hover-background: color-mix(in oklch,
2260
+ --cirth-primary-active: oklch(from var(--cirth-primary) calc(l * 1.124) calc(c * 1.132) h);
2261
+ --cirth-primary-surface-active: color-mix(in oklch,
2208
2262
  var(--cirth-primary) 72%,
2209
2263
  black);
2210
- --cirth-primary-hover-border: var(--cirth-primary-hover-background);
2211
- --cirth-primary-hover-underline: var(--cirth-primary-hover);
2212
- --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 70%);
2213
- --cirth-primary-inverse: oklch(100% 0 0);
2264
+ --cirth-primary-border-active: var(--cirth-primary-surface-active);
2265
+ --cirth-primary-underline-active: var(--cirth-primary-active);
2266
+ --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 80%);
2267
+ --cirth-text-selection-color: oklch(from var(--cirth-primary) calc(l * 1.065) c h / 18.75%);
2268
+ --cirth-primary-on-surface: oklch(100% 0 0);
2214
2269
  --cirth-code-background-color: oklch(from var(--cirth-canvas) calc(l - .02) c h);
2215
2270
  --cirth-card-sectioning-background-color: oklch(from var(--cirth-canvas) calc(l + .025) c h);
2216
2271
  --cirth-form-element-background-color: oklch(from var(--cirth-canvas) calc(l - .008) c h);
@@ -2218,15 +2273,17 @@
2218
2273
  --cirth-form-element-active-background-color: var(--cirth-canvas);
2219
2274
  --cirth-dropdown-background-color: var(--cirth-card-background-color);
2220
2275
  --cirth-popover-background-color: var(--cirth-card-background-color);
2221
- --cirth-secondary-background: oklch(48.3% .03 264);
2222
- --cirth-secondary-border: var(--cirth-secondary-background);
2223
- --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
2224
- --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
2225
- --cirth-secondary-inverse: oklch(100% 0 0);
2226
- --cirth-contrast-border: var(--cirth-contrast-background);
2227
- --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
2228
- --cirth-contrast-hover-underline: var(--cirth-contrast-hover);
2229
- --cirth-mark-background-color: var(--cirth-warning-surface);
2276
+ --cirth-secondary-surface: oklch(48.3% .03 280);
2277
+ --cirth-secondary-border: var(--cirth-secondary-surface);
2278
+ --cirth-secondary-border-active: var(--cirth-secondary-surface-active);
2279
+ --cirth-secondary-underline-active: var(--cirth-secondary-active);
2280
+ --cirth-secondary-on-surface: oklch(100% 0 0);
2281
+ --cirth-contrast-border: var(--cirth-contrast-surface);
2282
+ --cirth-contrast-border-active: var(--cirth-contrast-surface-active);
2283
+ --cirth-contrast-underline-active: var(--cirth-contrast-active);
2284
+ --cirth-mark-background-color: color-mix(in oklab,
2285
+ var(--cirth-primary) 24%,
2286
+ var(--cirth-canvas));
2230
2287
  --cirth-ins-color: var(--cirth-success-text);
2231
2288
  --cirth-del-color: var(--cirth-error-text);
2232
2289
  --cirth-blockquote-border-color: var(--cirth-muted-border-color);
@@ -2234,10 +2291,10 @@
2234
2291
  --cirth-button-box-shadow: 0 0 0 #0000;
2235
2292
  --cirth-button-hover-box-shadow: 0 0 0 #0000;
2236
2293
  --cirth-table-border-color: var(--cirth-card-border-color);
2237
- --cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
2294
+ --cirth-table-row-stripped-background-color: oklch(57% .032 280 / .0375);
2238
2295
  --cirth-code-kbd-background-color: var(--cirth-ink);
2239
2296
  --cirth-code-kbd-color: var(--cirth-background-color);
2240
- --cirth-form-element-placeholder-color: oklch(65.7% .03 264);
2297
+ --cirth-form-element-placeholder-color: oklch(65.7% .025 280);
2241
2298
  --cirth-form-element-active-border-color: var(--cirth-primary-border);
2242
2299
  --cirth-form-element-focus-color: var(--cirth-primary-focus);
2243
2300
  --cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
@@ -2248,28 +2305,28 @@
2248
2305
  --cirth-form-element-valid-active-border-color: var(--cirth-success-active);
2249
2306
  --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
2250
2307
  --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
2251
- --cirth-switch-checked-background-color: var(--cirth-primary-background);
2252
- --cirth-switch-color: var(--cirth-primary-inverse);
2308
+ --cirth-switch-checked-background-color: var(--cirth-primary-surface);
2309
+ --cirth-switch-color: var(--cirth-primary-on-surface);
2253
2310
  --cirth-range-thumb-border-color: var(--cirth-background-color);
2254
- --cirth-range-thumb-color: var(--cirth-secondary-background);
2255
- --cirth-range-thumb-active-color: var(--cirth-primary-background);
2256
- --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
2311
+ --cirth-range-thumb-color: var(--cirth-secondary-text);
2312
+ --cirth-range-thumb-active-color: var(--cirth-primary-surface);
2313
+ --cirth-accordion-active-summary-color: var(--cirth-primary-active);
2257
2314
  --cirth-accordion-close-summary-color: var(--cirth-ink);
2258
2315
  --cirth-accordion-open-summary-color: var(--cirth-ink);
2259
2316
  --cirth-card-border-color: color-mix(in oklab,
2260
2317
  var(--cirth-form-element-border-color) 46%,
2261
2318
  var(--cirth-card-background-color));
2262
- --cirth-modal-overlay-background-color: oklch(9% 0 0deg / var(--cirth-opacity-overlay));
2319
+ --cirth-modal-overlay-background-color: oklch(9% .011 280deg / var(--cirth-opacity-overlay));
2263
2320
  --cirth-meter-optimum-color: var(--cirth-success);
2264
2321
  --cirth-meter-suboptimum-color: var(--cirth-warning);
2265
2322
  --cirth-meter-even-less-good-color: var(--cirth-error);
2266
- --cirth-progress-color: var(--cirth-primary);
2267
- --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");
2268
- --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");
2269
- --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");
2270
- --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");
2271
- --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");
2272
- --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");
2323
+ --cirth-progress-color: var(--cirth-primary-text);
2324
+ --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
2325
+ --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
2326
+ --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
2327
+ --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(142, 144, 161)' 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");
2328
+ --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, 216, 131)' 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");
2329
+ --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, 158, 155)' 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");
2273
2330
  }
2274
2331
  }
2275
2332
 
@@ -2287,19 +2344,21 @@
2287
2344
  --cirth-warning-border: var(--cirth-warning);
2288
2345
  --cirth-warning-active: oklch(from var(--cirth-warning) calc(l * 1.124) calc(c * 1.121) h);
2289
2346
  --cirth-warning-surface: oklch(from var(--cirth-warning) 35.3% .063 h);
2290
- --cirth-primary-background: color-mix(in oklch,
2347
+ --cirth-primary-text: var(--cirth-primary);
2348
+ --cirth-primary-surface: color-mix(in oklch,
2291
2349
  var(--cirth-primary) 75.2%,
2292
2350
  black);
2293
- --cirth-primary-border: var(--cirth-primary-background);
2351
+ --cirth-primary-border: var(--cirth-primary-surface);
2294
2352
  --cirth-primary-underline: oklch(from var(--cirth-primary) l c h / 50%);
2295
- --cirth-primary-hover: oklch(from var(--cirth-primary) calc(l * 1.124) calc(c * 1.132) h);
2296
- --cirth-primary-hover-background: color-mix(in oklch,
2353
+ --cirth-primary-active: oklch(from var(--cirth-primary) calc(l * 1.124) calc(c * 1.132) h);
2354
+ --cirth-primary-surface-active: color-mix(in oklch,
2297
2355
  var(--cirth-primary) 72%,
2298
2356
  black);
2299
- --cirth-primary-hover-border: var(--cirth-primary-hover-background);
2300
- --cirth-primary-hover-underline: var(--cirth-primary-hover);
2301
- --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 70%);
2302
- --cirth-primary-inverse: oklch(100% 0 0);
2357
+ --cirth-primary-border-active: var(--cirth-primary-surface-active);
2358
+ --cirth-primary-underline-active: var(--cirth-primary-active);
2359
+ --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 80%);
2360
+ --cirth-text-selection-color: oklch(from var(--cirth-primary) calc(l * 1.065) c h / 18.75%);
2361
+ --cirth-primary-on-surface: oklch(100% 0 0);
2303
2362
  --cirth-code-background-color: oklch(from var(--cirth-canvas) calc(l - .02) c h);
2304
2363
  --cirth-card-sectioning-background-color: oklch(from var(--cirth-canvas) calc(l + .025) c h);
2305
2364
  --cirth-form-element-background-color: oklch(from var(--cirth-canvas) calc(l - .008) c h);
@@ -2307,15 +2366,17 @@
2307
2366
  --cirth-form-element-active-background-color: var(--cirth-canvas);
2308
2367
  --cirth-dropdown-background-color: var(--cirth-card-background-color);
2309
2368
  --cirth-popover-background-color: var(--cirth-card-background-color);
2310
- --cirth-secondary-background: oklch(48.3% .03 264);
2311
- --cirth-secondary-border: var(--cirth-secondary-background);
2312
- --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
2313
- --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
2314
- --cirth-secondary-inverse: oklch(100% 0 0);
2315
- --cirth-contrast-border: var(--cirth-contrast-background);
2316
- --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
2317
- --cirth-contrast-hover-underline: var(--cirth-contrast-hover);
2318
- --cirth-mark-background-color: var(--cirth-warning-surface);
2369
+ --cirth-secondary-surface: oklch(48.3% .03 280);
2370
+ --cirth-secondary-border: var(--cirth-secondary-surface);
2371
+ --cirth-secondary-border-active: var(--cirth-secondary-surface-active);
2372
+ --cirth-secondary-underline-active: var(--cirth-secondary-active);
2373
+ --cirth-secondary-on-surface: oklch(100% 0 0);
2374
+ --cirth-contrast-border: var(--cirth-contrast-surface);
2375
+ --cirth-contrast-border-active: var(--cirth-contrast-surface-active);
2376
+ --cirth-contrast-underline-active: var(--cirth-contrast-active);
2377
+ --cirth-mark-background-color: color-mix(in oklab,
2378
+ var(--cirth-primary) 24%,
2379
+ var(--cirth-canvas));
2319
2380
  --cirth-ins-color: var(--cirth-success-text);
2320
2381
  --cirth-del-color: var(--cirth-error-text);
2321
2382
  --cirth-blockquote-border-color: var(--cirth-muted-border-color);
@@ -2323,10 +2384,10 @@
2323
2384
  --cirth-button-box-shadow: 0 0 0 #0000;
2324
2385
  --cirth-button-hover-box-shadow: 0 0 0 #0000;
2325
2386
  --cirth-table-border-color: var(--cirth-card-border-color);
2326
- --cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
2387
+ --cirth-table-row-stripped-background-color: oklch(57% .032 280 / .0375);
2327
2388
  --cirth-code-kbd-background-color: var(--cirth-ink);
2328
2389
  --cirth-code-kbd-color: var(--cirth-background-color);
2329
- --cirth-form-element-placeholder-color: oklch(65.7% .03 264);
2390
+ --cirth-form-element-placeholder-color: oklch(65.7% .025 280);
2330
2391
  --cirth-form-element-active-border-color: var(--cirth-primary-border);
2331
2392
  --cirth-form-element-focus-color: var(--cirth-primary-focus);
2332
2393
  --cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
@@ -2337,147 +2398,147 @@
2337
2398
  --cirth-form-element-valid-active-border-color: var(--cirth-success-active);
2338
2399
  --cirth-form-element-valid-focus-color: var(--cirth-form-element-valid-active-border-color);
2339
2400
  --cirth-switch-thumb-box-shadow: 0 0 0 #0000;
2340
- --cirth-switch-checked-background-color: var(--cirth-primary-background);
2341
- --cirth-switch-color: var(--cirth-primary-inverse);
2401
+ --cirth-switch-checked-background-color: var(--cirth-primary-surface);
2402
+ --cirth-switch-color: var(--cirth-primary-on-surface);
2342
2403
  --cirth-range-thumb-border-color: var(--cirth-background-color);
2343
- --cirth-range-thumb-color: var(--cirth-secondary-background);
2344
- --cirth-range-thumb-active-color: var(--cirth-primary-background);
2345
- --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
2404
+ --cirth-range-thumb-color: var(--cirth-secondary-text);
2405
+ --cirth-range-thumb-active-color: var(--cirth-primary-surface);
2406
+ --cirth-accordion-active-summary-color: var(--cirth-primary-active);
2346
2407
  --cirth-accordion-close-summary-color: var(--cirth-ink);
2347
2408
  --cirth-accordion-open-summary-color: var(--cirth-ink);
2348
2409
  --cirth-card-border-color: color-mix(in oklab,
2349
2410
  var(--cirth-form-element-border-color) 46%,
2350
2411
  var(--cirth-card-background-color));
2351
- --cirth-modal-overlay-background-color: oklch(9% 0 0deg / var(--cirth-opacity-overlay));
2412
+ --cirth-modal-overlay-background-color: oklch(9% .011 280deg / var(--cirth-opacity-overlay));
2352
2413
  --cirth-meter-optimum-color: var(--cirth-success);
2353
2414
  --cirth-meter-suboptimum-color: var(--cirth-warning);
2354
2415
  --cirth-meter-even-less-good-color: var(--cirth-error);
2355
- --cirth-progress-color: var(--cirth-primary);
2356
- --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");
2357
- --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");
2358
- --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");
2359
- --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");
2360
- --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");
2361
- --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");
2416
+ --cirth-progress-color: var(--cirth-primary-text);
2417
+ --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
2418
+ --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
2419
+ --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
2420
+ --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(142, 144, 161)' 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");
2421
+ --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, 216, 131)' 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");
2422
+ --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, 158, 155)' 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");
2362
2423
  }
2363
2424
 
2364
2425
  .cirth progress, .cirth [type="checkbox"], .cirth [type="radio"], .cirth [type="range"] {
2365
- accent-color: var(--cirth-primary);
2426
+ accent-color: var(--cirth-primary-text);
2366
2427
  }
2367
2428
 
2368
2429
  @media (prefers-contrast: more) {
2369
2430
  .cirth:where([data-theme="light"]), .cirth :where([data-theme="light"]), .cirth:where(:not([data-theme="dark"])) {
2370
- --cirth-ink: oklch(22.3% .006 264);
2431
+ --cirth-ink: oklch(22.3% .023 280);
2371
2432
  --cirth-h1-color: var(--cirth-color);
2372
2433
  --cirth-h2-color: var(--cirth-color);
2373
2434
  --cirth-h3-color: var(--cirth-color);
2374
2435
  --cirth-h4-color: var(--cirth-color);
2375
2436
  --cirth-h5-color: var(--cirth-color);
2376
2437
  --cirth-h6-color: var(--cirth-color);
2377
- --cirth-muted-color: oklch(39.7% .025 264);
2378
- --cirth-secondary: oklch(39.7% .025 264);
2379
- --cirth-code-color: oklch(35.3% .021 264);
2380
- --cirth-link-visited-color: oklch(35.3% .021 264);
2381
- --cirth-muted-border-color: oklch(57% .032 264);
2382
- --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");
2383
- --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");
2384
- --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");
2385
- --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");
2386
- --cirth-form-element-border-color: oklch(39.7% .025 264);
2387
- --cirth-form-element-invalid-border-color: oklch(48.3% .166 29.73);
2388
- --cirth-form-element-valid-border-color: oklch(48.3% .092 160.59);
2389
- --cirth-primary: oklch(39.7% .073 69.35);
2390
- --cirth-primary-hover: oklch(31% .057 69.35);
2438
+ --cirth-muted-color: oklch(39.7% .028 280);
2439
+ --cirth-secondary-text: oklch(39.7% .028 280);
2440
+ --cirth-code-color: oklch(35.3% .027 280);
2441
+ --cirth-link-visited-color: oklch(35.3% .027 280);
2442
+ --cirth-muted-border-color: oklch(57% .032 280);
2443
+ --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(68, 69, 86)' 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");
2444
+ --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(68, 69, 86)' 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");
2445
+ --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(68, 69, 86)' 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");
2446
+ --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(68, 69, 86)' 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");
2447
+ --cirth-form-element-border-color: oklch(39.7% .028 280);
2448
+ --cirth-form-element-invalid-border-color: oklch(48.3% .165 22);
2449
+ --cirth-form-element-valid-border-color: oklch(48.3% .106 153);
2450
+ --cirth-primary: oklch(39.7% .081 44);
2451
+ --cirth-primary-active: oklch(31% .063 44);
2391
2452
  --cirth-primary-underline: var(--cirth-primary);
2392
- --cirth-secondary-underline: var(--cirth-secondary);
2393
- --cirth-contrast-underline: var(--cirth-contrast);
2394
- --cirth-primary-focus: oklch(48.3% .089 69.35);
2395
- --cirth-secondary-focus: oklch(48.3% .03 264);
2396
- --cirth-contrast-focus: oklch(48.3% .03 264);
2397
- --cirth-switch-background-color: oklch(48.3% .03 264);
2398
- --cirth-progress-border-color: oklch(48.3% .03 264);
2399
- --cirth-meter-optimum-color: oklch(44% .084 160.59);
2400
- --cirth-meter-suboptimum-color: oklch(39.7% .07 78);
2401
- --cirth-meter-even-less-good-color: oklch(35.3% .122 29.73);
2453
+ --cirth-secondary-underline: var(--cirth-secondary-text);
2454
+ --cirth-contrast-underline: var(--cirth-contrast-text);
2455
+ --cirth-primary-focus: oklch(48.3% .098 44);
2456
+ --cirth-secondary-focus: oklch(48.3% .03 280);
2457
+ --cirth-contrast-focus: oklch(48.3% .03 280);
2458
+ --cirth-switch-background-color: oklch(48.3% .03 280);
2459
+ --cirth-progress-border-color: oklch(48.3% .03 280);
2460
+ --cirth-meter-optimum-color: oklch(44% .096 153);
2461
+ --cirth-meter-suboptimum-color: oklch(39.7% .069 89.5);
2462
+ --cirth-meter-even-less-good-color: oklch(35.3% .121 22);
2402
2463
  }
2403
2464
  }
2404
2465
 
2405
2466
  @media only screen and (prefers-contrast: more) and (prefers-color-scheme: dark) {
2406
2467
  .cirth:where(:not([data-theme])) {
2407
- --cirth-ink: oklch(96% 0 264);
2468
+ --cirth-ink: oklch(96% 0 280);
2408
2469
  --cirth-h1-color: var(--cirth-color);
2409
2470
  --cirth-h2-color: var(--cirth-color);
2410
2471
  --cirth-h3-color: var(--cirth-color);
2411
2472
  --cirth-h4-color: var(--cirth-color);
2412
2473
  --cirth-h5-color: var(--cirth-color);
2413
2474
  --cirth-h6-color: var(--cirth-color);
2414
- --cirth-muted-color: oklch(78.7% .021 264);
2415
- --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");
2416
- --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");
2417
- --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");
2418
- --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");
2419
- --cirth-secondary: oklch(78.7% .021 264);
2420
- --cirth-code-color: oklch(83% .016 264);
2421
- --cirth-link-visited-color: oklch(78.7% .021 264);
2422
- --cirth-muted-border-color: oklch(57% .032 264);
2475
+ --cirth-muted-color: oklch(78.7% .014 280);
2476
+ --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(183, 185, 195)' 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");
2477
+ --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
2478
+ --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
2479
+ --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
2480
+ --cirth-secondary-text: oklch(78.7% .014 280);
2481
+ --cirth-code-color: oklch(83% .011 280);
2482
+ --cirth-link-visited-color: oklch(78.7% .014 280);
2483
+ --cirth-muted-border-color: oklch(57% .032 280);
2423
2484
  --cirth-card-border-color: var(--cirth-muted-border-color);
2424
- --cirth-form-element-border-color: oklch(70% .028 264);
2425
- --cirth-form-element-invalid-border-color: oklch(78.7% .106 29.73);
2426
- --cirth-form-element-valid-border-color: oklch(78.7% .15 160.59);
2427
- --cirth-primary: oklch(78.7% .146 69.35);
2428
- --cirth-primary-hover: oklch(87.3% .082 69.35);
2429
- --cirth-primary-background: oklch(44% .081 69.35);
2430
- --cirth-primary-hover-background: oklch(39.7% .073 69.35);
2485
+ --cirth-form-element-border-color: oklch(70% .021 280);
2486
+ --cirth-form-element-invalid-border-color: oklch(78.7% .105 22);
2487
+ --cirth-form-element-valid-border-color: oklch(78.7% .172 153);
2488
+ --cirth-primary: oklch(78.7% .092 44);
2489
+ --cirth-primary-active: oklch(87.3% .051 44);
2490
+ --cirth-primary-surface: oklch(44% .09 44);
2491
+ --cirth-primary-surface-active: oklch(39.7% .081 44);
2431
2492
  --cirth-primary-underline: var(--cirth-primary);
2432
- --cirth-secondary-underline: var(--cirth-secondary);
2433
- --cirth-contrast-underline: var(--cirth-contrast);
2434
- --cirth-primary-focus: oklch(70% .129 69.35);
2435
- --cirth-secondary-focus: oklch(70% .028 264);
2436
- --cirth-contrast-focus: oklch(87.3% .011 264);
2437
- --cirth-switch-background-color: oklch(65.7% .03 264);
2438
- --cirth-progress-border-color: oklch(70% .028 264);
2439
- --cirth-meter-optimum-color: oklch(74.3% .142 160.59);
2440
- --cirth-meter-suboptimum-color: oklch(78.7% .139 78);
2441
- --cirth-meter-even-less-good-color: oklch(83% .081 29.73);
2493
+ --cirth-secondary-underline: var(--cirth-secondary-text);
2494
+ --cirth-contrast-underline: var(--cirth-contrast-text);
2495
+ --cirth-primary-focus: oklch(70% .141 44);
2496
+ --cirth-secondary-focus: oklch(70% .021 280);
2497
+ --cirth-contrast-focus: oklch(87.3% .007 280);
2498
+ --cirth-switch-background-color: oklch(65.7% .025 280);
2499
+ --cirth-progress-border-color: oklch(70% .021 280);
2500
+ --cirth-meter-optimum-color: oklch(74.3% .163 153);
2501
+ --cirth-meter-suboptimum-color: oklch(78.7% .137 89.5);
2502
+ --cirth-meter-even-less-good-color: oklch(83% .08 22);
2442
2503
  }
2443
2504
  }
2444
2505
 
2445
2506
  @media (prefers-contrast: more) {
2446
2507
  .cirth:where([data-theme="dark"]), .cirth :where([data-theme="dark"]) {
2447
- --cirth-ink: oklch(96% 0 264);
2508
+ --cirth-ink: oklch(96% 0 280);
2448
2509
  --cirth-h1-color: var(--cirth-color);
2449
2510
  --cirth-h2-color: var(--cirth-color);
2450
2511
  --cirth-h3-color: var(--cirth-color);
2451
2512
  --cirth-h4-color: var(--cirth-color);
2452
2513
  --cirth-h5-color: var(--cirth-color);
2453
2514
  --cirth-h6-color: var(--cirth-color);
2454
- --cirth-muted-color: oklch(78.7% .021 264);
2455
- --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");
2456
- --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");
2457
- --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");
2458
- --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");
2459
- --cirth-secondary: oklch(78.7% .021 264);
2460
- --cirth-code-color: oklch(83% .016 264);
2461
- --cirth-link-visited-color: oklch(78.7% .021 264);
2462
- --cirth-muted-border-color: oklch(57% .032 264);
2515
+ --cirth-muted-color: oklch(78.7% .014 280);
2516
+ --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(183, 185, 195)' 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");
2517
+ --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
2518
+ --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
2519
+ --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
2520
+ --cirth-secondary-text: oklch(78.7% .014 280);
2521
+ --cirth-code-color: oklch(83% .011 280);
2522
+ --cirth-link-visited-color: oklch(78.7% .014 280);
2523
+ --cirth-muted-border-color: oklch(57% .032 280);
2463
2524
  --cirth-card-border-color: var(--cirth-muted-border-color);
2464
- --cirth-form-element-border-color: oklch(70% .028 264);
2465
- --cirth-form-element-invalid-border-color: oklch(78.7% .106 29.73);
2466
- --cirth-form-element-valid-border-color: oklch(78.7% .15 160.59);
2467
- --cirth-primary: oklch(78.7% .146 69.35);
2468
- --cirth-primary-hover: oklch(87.3% .082 69.35);
2469
- --cirth-primary-background: oklch(44% .081 69.35);
2470
- --cirth-primary-hover-background: oklch(39.7% .073 69.35);
2525
+ --cirth-form-element-border-color: oklch(70% .021 280);
2526
+ --cirth-form-element-invalid-border-color: oklch(78.7% .105 22);
2527
+ --cirth-form-element-valid-border-color: oklch(78.7% .172 153);
2528
+ --cirth-primary: oklch(78.7% .092 44);
2529
+ --cirth-primary-active: oklch(87.3% .051 44);
2530
+ --cirth-primary-surface: oklch(44% .09 44);
2531
+ --cirth-primary-surface-active: oklch(39.7% .081 44);
2471
2532
  --cirth-primary-underline: var(--cirth-primary);
2472
- --cirth-secondary-underline: var(--cirth-secondary);
2473
- --cirth-contrast-underline: var(--cirth-contrast);
2474
- --cirth-primary-focus: oklch(70% .129 69.35);
2475
- --cirth-secondary-focus: oklch(70% .028 264);
2476
- --cirth-contrast-focus: oklch(87.3% .011 264);
2477
- --cirth-switch-background-color: oklch(65.7% .03 264);
2478
- --cirth-progress-border-color: oklch(70% .028 264);
2479
- --cirth-meter-optimum-color: oklch(74.3% .142 160.59);
2480
- --cirth-meter-suboptimum-color: oklch(78.7% .139 78);
2481
- --cirth-meter-even-less-good-color: oklch(83% .081 29.73);
2533
+ --cirth-secondary-underline: var(--cirth-secondary-text);
2534
+ --cirth-contrast-underline: var(--cirth-contrast-text);
2535
+ --cirth-primary-focus: oklch(70% .141 44);
2536
+ --cirth-secondary-focus: oklch(70% .021 280);
2537
+ --cirth-contrast-focus: oklch(87.3% .007 280);
2538
+ --cirth-switch-background-color: oklch(65.7% .025 280);
2539
+ --cirth-progress-border-color: oklch(70% .021 280);
2540
+ --cirth-meter-optimum-color: oklch(74.3% .163 153);
2541
+ --cirth-meter-suboptimum-color: oklch(78.7% .137 89.5);
2542
+ --cirth-meter-even-less-good-color: oklch(83% .08 22);
2482
2543
  }
2483
2544
  }