@cirthcss/cirth 0.15.0-beta.1 → 0.15.0-beta.2

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 (18) hide show
  1. package/README.md +1 -1
  2. package/dist/cirth.classless.css +194 -152
  3. package/dist/cirth.classless.min.css +1 -1
  4. package/dist/cirth.classless.scoped.css +194 -152
  5. package/dist/cirth.classless.scoped.min.css +1 -1
  6. package/dist/cirth.css +241 -152
  7. package/dist/cirth.min.css +1 -1
  8. package/dist/cirth.print.classless.css +9 -7
  9. package/dist/cirth.print.classless.min.css +1 -1
  10. package/dist/cirth.print.classless.scoped.css +9 -7
  11. package/dist/cirth.print.classless.scoped.min.css +1 -1
  12. package/dist/cirth.print.css +9 -7
  13. package/dist/cirth.print.min.css +1 -1
  14. package/dist/cirth.print.scoped.css +9 -7
  15. package/dist/cirth.print.scoped.min.css +1 -1
  16. package/dist/cirth.scoped.css +241 -152
  17. package/dist/cirth.scoped.min.css +1 -1
  18. package/package.json +6 -4
package/dist/cirth.css CHANGED
@@ -44,6 +44,10 @@ section {
44
44
  margin-bottom: var(--cirth-block-spacing-vertical);
45
45
  }
46
46
 
47
+ main > section + section {
48
+ margin-block-start: var(--cirth-space-8);
49
+ }
50
+
47
51
  .container, .container-fluid {
48
52
  display: grid;
49
53
  }
@@ -218,6 +222,15 @@ mark {
218
222
  background-color: var(--cirth-mark-background-color);
219
223
  color: var(--cirth-mark-color);
220
224
  vertical-align: baseline;
225
+ -webkit-box-decoration-break: clone;
226
+ box-decoration-break: clone;
227
+ }
228
+
229
+ @media (forced-colors: active) {
230
+ mark {
231
+ color: marktext;
232
+ background-color: mark;
233
+ }
221
234
  }
222
235
 
223
236
  blockquote {
@@ -459,6 +472,27 @@ button:focus-visible, button[aria-current]:not([aria-current="false"]):focus-vis
459
472
  0 0 0 var(--cirth-outline-width) var(--cirth-contrast-focus);
460
473
  }
461
474
 
475
+ :is(button, [type="submit"], [type="button"], [role="button"]).danger {
476
+ --cirth-background-color: light-dark(var(--cirth-error), color-mix(in oklch, var(--cirth-error) 55%, black));
477
+ --cirth-border-color: var(--cirth-background-color);
478
+ --cirth-color: var(--cirth-primary-inverse);
479
+ }
480
+
481
+ :is(button, [type="submit"], [type="button"], [role="button"]).danger:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
482
+ --cirth-background-color: light-dark(color-mix(in oklch, var(--cirth-error) 85%, black), color-mix(in oklch, var(--cirth-error) 50%, black));
483
+ --cirth-border-color: var(--cirth-background-color);
484
+ --cirth-color: var(--cirth-primary-inverse);
485
+ }
486
+
487
+ :is(button, [type="submit"], [type="button"], [role="button"]).danger:focus-visible, :is(button, [type="submit"], [type="button"], [role="button"]).danger[aria-current]:not([aria-current="false"]):focus-visible {
488
+ --cirth-box-shadow: var(--cirth-button-hover-box-shadow, 0 0 0 #0000),
489
+ 0
490
+ 0
491
+ 0
492
+ var(--cirth-outline-width)
493
+ var(--cirth-form-element-invalid-focus-color);
494
+ }
495
+
462
496
  :is(button, [type="submit"], [type="button"], [role="button"]).outline, [type="reset"].outline {
463
497
  --cirth-background-color: var(--cirth-form-element-background-color);
464
498
  }
@@ -545,6 +579,32 @@ button:focus-visible, button[aria-current]:not([aria-current="false"]):focus-vis
545
579
  --cirth-border-color: transparent;
546
580
  }
547
581
 
582
+ :is(button, [type="submit"], [type="button"], [role="button"]).outline.danger {
583
+ --cirth-background-color: var(--cirth-form-element-background-color);
584
+ --cirth-color: var(--cirth-error-text);
585
+ --cirth-border-color: var(--cirth-error-border);
586
+ }
587
+
588
+ :is(button, [type="submit"], [type="button"], [role="button"]).outline.danger:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
589
+ --cirth-background-color: var(--cirth-error-surface);
590
+ --cirth-color: var(--cirth-error-text);
591
+ --cirth-border-color: var(--cirth-error-active);
592
+ }
593
+
594
+ :is(button, [type="submit"], [type="button"], [role="button"]).ghost.danger {
595
+ --cirth-background-color: transparent;
596
+ --cirth-color: var(--cirth-error-text);
597
+ --cirth-border-color: transparent;
598
+ }
599
+
600
+ :is(button, [type="submit"], [type="button"], [role="button"]).ghost.danger:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
601
+ --cirth-background-color: color-mix(in oklch,
602
+ var(--cirth-error) 12%,
603
+ transparent);
604
+ --cirth-color: var(--cirth-error-text);
605
+ --cirth-border-color: transparent;
606
+ }
607
+
548
608
  :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled], :where(fieldset[disabled]) :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) {
549
609
  opacity: var(--cirth-opacity-disabled);
550
610
  pointer-events: none;
@@ -563,6 +623,8 @@ form:has(:user-invalid) :is(button:not([type="button"], [type="reset"]), [type="
563
623
 
564
624
  caption {
565
625
  color: var(--cirth-muted-color);
626
+ font-size: var(--cirth-font-size-sm);
627
+ line-height: var(--cirth-line-height-normal);
566
628
  text-align: start;
567
629
  padding-block-end: calc(var(--cirth-spacing) * .5);
568
630
  }
@@ -673,6 +735,8 @@ figure {
673
735
  figure figcaption {
674
736
  padding: calc(var(--cirth-spacing) * .5) 0;
675
737
  color: var(--cirth-muted-color);
738
+ font-size: var(--cirth-font-size-sm);
739
+ line-height: var(--cirth-line-height-normal);
676
740
  }
677
741
 
678
742
  hr {
@@ -1172,9 +1236,9 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
1172
1236
 
1173
1237
  [type="range"] {
1174
1238
  appearance: none;
1175
- background: none;
1176
1239
  width: 100%;
1177
- height: 1.25rem;
1240
+ 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);
1241
+ background: none;
1178
1242
  }
1179
1243
 
1180
1244
  [type="range"]::-webkit-slider-runnable-track {
@@ -1221,6 +1285,18 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
1221
1285
  --cirth-range-thumb-color: var(--cirth-range-thumb-active-color);
1222
1286
  }
1223
1287
 
1288
+ @media (hover: hover) and (pointer: fine) {
1289
+ [type="range"]:hover:not(:active, :focus, :disabled) {
1290
+ --cirth-range-border-color: var(--cirth-range-active-border-color);
1291
+ --cirth-range-thumb-color: var(--cirth-secondary-hover);
1292
+ }
1293
+ }
1294
+
1295
+ [type="range"]:focus-visible {
1296
+ outline: var(--cirth-outline-width) solid var(--cirth-primary-focus);
1297
+ outline-offset: var(--cirth-space-1);
1298
+ }
1299
+
1224
1300
  [type="range"]:active::-webkit-slider-thumb {
1225
1301
  transform: scale(1.25);
1226
1302
  }
@@ -1820,7 +1896,7 @@ dialog[open] {
1820
1896
  @starting-style {
1821
1897
  dialog[open] > article {
1822
1898
  opacity: 0;
1823
- transform: translateY(-100%);
1899
+ transform: translateY(-.5rem);
1824
1900
  }
1825
1901
  }
1826
1902
 
@@ -2189,6 +2265,7 @@ progress::-moz-progress-bar {
2189
2265
  scroll-behavior: auto;
2190
2266
  transition-delay: var(--cirth-duration-instant);
2191
2267
  transition-duration: var(--cirth-duration-instant);
2268
+ --cirth-transition: var(--cirth-duration-instant) var(--cirth-ease-out);
2192
2269
  animation-duration: 1ms;
2193
2270
  animation-iteration-count: 1;
2194
2271
  animation-delay: -1ms;
@@ -2351,7 +2428,11 @@ progress::-moz-progress-bar {
2351
2428
  --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");
2352
2429
  --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");
2353
2430
  --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");
2354
- --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");
2431
+ --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");
2432
+ }
2433
+
2434
+ :focus-visible {
2435
+ transition-duration: var(--cirth-duration-instant);
2355
2436
  }
2356
2437
 
2357
2438
  a, a.secondary, a.contrast {
@@ -2504,47 +2585,46 @@ details summary[role="button"]:not(.outline):after {
2504
2585
  }
2505
2586
 
2506
2587
  :root, :host {
2507
- --cirth-canvas: light-dark(oklch(97.4% .004 69.35), oklch(20.15% .003 264));
2508
- --cirth-ink: light-dark(oklch(35.3% .021 264), oklch(83% .016 264));
2588
+ --cirth-canvas: light-dark(oklch(97.3% .006 44), oklch(20.15% .0225 280));
2589
+ --cirth-ink: light-dark(oklch(35.3% .027 280), oklch(83% .011 280));
2509
2590
  --cirth-color: var(--cirth-ink);
2510
- --cirth-text-selection-color: light-dark(oklch(65.7% .121 69.35 / .25), oklch(70% .129 69.35 / .1875));
2511
- --cirth-muted-color: light-dark(oklch(52.7% .032 264), oklch(65.7% .03 264));
2512
- --cirth-muted-border-color: light-dark(oklch(93.85% .003 264), oklch(26.7% .011 264));
2513
- --cirth-error: light-dark(oklch(44% .151 29.73), oklch(74.3% .133 29.73));
2514
- --cirth-success: light-dark(oklch(52.7% .1 160.59), oklch(65.7% .125 160.59));
2515
- --cirth-warning: light-dark(oklch(48.3% .086 78), oklch(70% .124 78));
2516
- --cirth-primary: light-dark(oklch(52.7% .097 69.35), oklch(70% .129 69.35));
2517
- --cirth-secondary: light-dark(oklch(52.7% .032 264), oklch(70% .028 264));
2518
- --cirth-secondary-underline: light-dark(oklch(52.7% .032 264 / .5), oklch(70% .028 264 / .5));
2519
- --cirth-secondary-hover: light-dark(oklch(44% .028 264), oklch(78.7% .021 264));
2520
- --cirth-secondary-hover-background: light-dark(oklch(44% .028 264), oklch(52.7% .032 264));
2521
- --cirth-secondary-focus: light-dark(oklch(48.3% .03 264 / .7), oklch(70% .028 264 / .7));
2522
- --cirth-contrast: light-dark(oklch(22.3% .006 264), oklch(91.7% .006 264));
2523
- --cirth-contrast-background: light-dark(oklch(22.3% .006 264), oklch(96% 0 264));
2524
- --cirth-contrast-underline: light-dark(oklch(22.3% .006 264 / .5), oklch(91.7% .006 264 / .5));
2591
+ --cirth-muted-color: light-dark(oklch(52.7% .031 280), oklch(65.7% .025 280));
2592
+ --cirth-muted-border-color: light-dark(oklch(93.85% .002 280), oklch(26.7% .025 280));
2593
+ --cirth-error: light-dark(oklch(44% .151 22), oklch(74.3% .133 22));
2594
+ --cirth-success: light-dark(oklch(52.7% .115 153), oklch(65.7% .144 153));
2595
+ --cirth-warning: light-dark(oklch(48.3% .084 89.5), oklch(70% .122 89.5));
2596
+ --cirth-primary: light-dark(oklch(52.7% .107 44), oklch(65.7% .134 44));
2597
+ --cirth-secondary: light-dark(oklch(52.7% .031 280), oklch(70% .021 280));
2598
+ --cirth-secondary-underline: light-dark(oklch(52.7% .031 280 / .5), oklch(70% .021 280 / .5));
2599
+ --cirth-secondary-hover: light-dark(oklch(44% .029 280), oklch(78.7% .014 280));
2600
+ --cirth-secondary-hover-background: light-dark(oklch(44% .029 280), oklch(52.7% .031 280));
2601
+ --cirth-secondary-focus: light-dark(oklch(48.3% .03 280 / .7), oklch(70% .021 280 / .7));
2602
+ --cirth-contrast: light-dark(oklch(22.3% .023 280), oklch(91.7% .004 280));
2603
+ --cirth-contrast-background: light-dark(oklch(22.3% .023 280), oklch(96% 0 280));
2604
+ --cirth-contrast-underline: light-dark(oklch(22.3% .023 280 / .5), oklch(91.7% .004 280 / .5));
2525
2605
  --cirth-contrast-hover: light-dark(oklch(0% 0 0), oklch(100% 0 0));
2526
2606
  --cirth-contrast-hover-background: light-dark(oklch(0% 0 0), oklch(100% 0 0));
2527
- --cirth-contrast-focus: light-dark(oklch(48.3% .03 264 / .7), oklch(87.3% .011 264 / .5));
2607
+ --cirth-contrast-focus: light-dark(oklch(48.3% .03 280 / .7), oklch(87.3% .007 280 / .5));
2528
2608
  --cirth-contrast-inverse: light-dark(oklch(100% 0 0), oklch(0% 0 0));
2529
- --cirth-link-visited-color: light-dark(oklch(48.3% 0 264), oklch(65.7% 0 264));
2530
- --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),
2531
- .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));
2532
- --cirth-h1-color: light-dark(oklch(22.3% .006 264), oklch(96% 0 264));
2533
- --cirth-h2-color: light-dark(oklch(26.7% .011 264), oklch(91.7% .006 264));
2534
- --cirth-h3-color: light-dark(oklch(31% .016 264), oklch(83% .016 264));
2535
- --cirth-h4-color: light-dark(oklch(35.3% .021 264), oklch(78.7% .021 264));
2536
- --cirth-h5-color: light-dark(oklch(39.7% .025 264), oklch(74.3% .025 264));
2537
- --cirth-h6-color: light-dark(oklch(44% .028 264), oklch(65.7% .03 264));
2538
- --cirth-mark-color: light-dark(oklch(18% 0 264), oklch(100% 0 0));
2539
- --cirth-code-color: light-dark(oklch(52.7% .032 264), oklch(65.7% .03 264));
2540
- --cirth-form-element-selected-background-color: light-dark(oklch(91.7% .006 264), oklch(31% .016 264));
2541
- --cirth-form-element-border-color: light-dark(oklch(61.3% .032 264), oklch(52.7% .032 264));
2542
- --cirth-form-element-color: light-dark(oklch(26.7% .011 264), oklch(91.7% .006 264));
2543
- --cirth-switch-background-color: light-dark(oklch(61.3% .032 264), oklch(52.7% .032 264));
2544
- --cirth-range-border-color: light-dark(oklch(91.7% .006 264), oklch(26.7% .011 264));
2545
- --cirth-range-active-border-color: light-dark(oklch(83% .016 264), oklch(31% .016 264));
2546
- --cirth-progress-background-color: light-dark(oklch(91.7% .006 264), oklch(26.7% .011 264));
2547
- --cirth-progress-border-color: light-dark(oklch(61.3% .032 264), oklch(52.7% .032 264));
2609
+ --cirth-link-visited-color: light-dark(oklch(48.3% 0 280), oklch(65.7% 0 280));
2610
+ --cirth-box-shadow: light-dark(.0145rem .029rem .174rem oklch(65.7% .025 280 / .01698), .0335rem .067rem .402rem oklch(65.7% .025 280 / .024), .0625rem .125rem .75rem oklch(65.7% .025 280 / .03), .1125rem .225rem 1.35rem oklch(65.7% .025 280 / .036), .2085rem .417rem 2.502rem oklch(65.7% .025 280 / .04302), .5rem 1rem 6rem oklch(65.7% .025 280 / .06), 0 0 0 .0625rem oklch(65.7% .025 280 / .015),
2611
+ .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));
2612
+ --cirth-h1-color: light-dark(oklch(22.3% .023 280), oklch(96% 0 280));
2613
+ --cirth-h2-color: light-dark(oklch(26.7% .025 280), oklch(91.7% .004 280));
2614
+ --cirth-h3-color: light-dark(oklch(31% .026 280), oklch(83% .011 280));
2615
+ --cirth-h4-color: light-dark(oklch(35.3% .027 280), oklch(78.7% .014 280));
2616
+ --cirth-h5-color: light-dark(oklch(39.7% .028 280), oklch(74.3% .018 280));
2617
+ --cirth-h6-color: light-dark(oklch(44% .029 280), oklch(65.7% .025 280));
2618
+ --cirth-mark-color: light-dark(oklch(18% .022 280), oklch(100% 0 0));
2619
+ --cirth-code-color: light-dark(oklch(52.7% .031 280), oklch(65.7% .025 280));
2620
+ --cirth-form-element-selected-background-color: light-dark(oklch(91.7% .004 280), oklch(31% .026 280));
2621
+ --cirth-form-element-border-color: light-dark(oklch(61.3% .028 280), oklch(52.7% .031 280));
2622
+ --cirth-form-element-color: light-dark(oklch(26.7% .025 280), oklch(91.7% .004 280));
2623
+ --cirth-switch-background-color: light-dark(oklch(61.3% .028 280), oklch(52.7% .031 280));
2624
+ --cirth-range-border-color: light-dark(oklch(91.7% .004 280), oklch(26.7% .025 280));
2625
+ --cirth-range-active-border-color: light-dark(oklch(83% .011 280), oklch(31% .026 280));
2626
+ --cirth-progress-background-color: light-dark(oklch(91.7% .004 280), oklch(26.7% .025 280));
2627
+ --cirth-progress-border-color: light-dark(oklch(61.3% .028 280), oklch(52.7% .031 280));
2548
2628
  }
2549
2629
 
2550
2630
  :where([data-theme="light"]), :root:where(:not([data-theme="dark"])), :host(:where(:not([data-theme="dark"]))) {
@@ -2572,6 +2652,7 @@ details summary[role="button"]:not(.outline):after {
2572
2652
  --cirth-primary-hover-underline: var(--cirth-primary-hover);
2573
2653
  --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 75%);
2574
2654
  --cirth-primary-inverse: oklch(100% 0 0);
2655
+ --cirth-text-selection-color: oklch(from var(--cirth-primary) calc(l * 1.247) c h / 25%);
2575
2656
  --cirth-code-background-color: oklch(from var(--cirth-canvas) calc(l - .019) c h);
2576
2657
  --cirth-card-sectioning-background-color: oklch(from var(--cirth-canvas) calc(l + .009) c h);
2577
2658
  --cirth-form-element-background-color: oklch(from var(--cirth-canvas) calc(l - .008) c h);
@@ -2579,7 +2660,7 @@ details summary[role="button"]:not(.outline):after {
2579
2660
  --cirth-form-element-active-background-color: var(--cirth-canvas);
2580
2661
  --cirth-dropdown-background-color: var(--cirth-card-background-color);
2581
2662
  --cirth-popover-background-color: var(--cirth-card-background-color);
2582
- --cirth-secondary-background: oklch(48.3% .03 264);
2663
+ --cirth-secondary-background: oklch(48.3% .03 280);
2583
2664
  --cirth-secondary-border: var(--cirth-secondary-background);
2584
2665
  --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
2585
2666
  --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
@@ -2587,7 +2668,9 @@ details summary[role="button"]:not(.outline):after {
2587
2668
  --cirth-contrast-border: var(--cirth-contrast-background);
2588
2669
  --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
2589
2670
  --cirth-contrast-hover-underline: var(--cirth-secondary-hover);
2590
- --cirth-mark-background-color: var(--cirth-warning-surface);
2671
+ --cirth-mark-background-color: color-mix(in oklab,
2672
+ var(--cirth-primary) 18%,
2673
+ var(--cirth-canvas));
2591
2674
  --cirth-ins-color: var(--cirth-success-text);
2592
2675
  --cirth-del-color: var(--cirth-error-text);
2593
2676
  --cirth-blockquote-border-color: var(--cirth-muted-border-color);
@@ -2595,7 +2678,7 @@ details summary[role="button"]:not(.outline):after {
2595
2678
  --cirth-button-box-shadow: 0 0 0 #0000;
2596
2679
  --cirth-button-hover-box-shadow: 0 0 0 #0000;
2597
2680
  --cirth-table-border-color: var(--cirth-card-border-color);
2598
- --cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
2681
+ --cirth-table-row-stripped-background-color: oklch(57% .032 280 / .0375);
2599
2682
  --cirth-code-kbd-background-color: var(--cirth-ink);
2600
2683
  --cirth-code-kbd-color: var(--cirth-background-color);
2601
2684
  --cirth-form-element-placeholder-color: var(--cirth-muted-color);
@@ -2612,29 +2695,29 @@ details summary[role="button"]:not(.outline):after {
2612
2695
  --cirth-switch-checked-background-color: var(--cirth-primary-background);
2613
2696
  --cirth-switch-color: var(--cirth-primary-inverse);
2614
2697
  --cirth-range-thumb-border-color: var(--cirth-background-color);
2615
- --cirth-range-thumb-color: var(--cirth-secondary-background);
2698
+ --cirth-range-thumb-color: var(--cirth-secondary);
2616
2699
  --cirth-range-thumb-active-color: var(--cirth-primary-background);
2617
2700
  --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
2618
2701
  --cirth-accordion-close-summary-color: var(--cirth-ink);
2619
2702
  --cirth-accordion-open-summary-color: var(--cirth-ink);
2620
2703
  --cirth-card-border-color: color-mix(in oklab,
2621
2704
  var(--cirth-form-element-border-color) 38%,
2622
- var(--cirth-card-background-color));
2705
+ oklch(from var(--cirth-card-background-color) l 0 h));
2623
2706
  --cirth-dropdown-box-shadow: var(--cirth-box-shadow);
2624
2707
  --cirth-dropdown-color: var(--cirth-ink);
2625
2708
  --cirth-dropdown-border-color: var(--cirth-card-border-color);
2626
2709
  --cirth-dropdown-hover-background-color: var(--cirth-card-sectioning-background-color);
2627
- --cirth-modal-overlay-background-color: oklch(93.85% .003 264deg / var(--cirth-opacity-overlay));
2710
+ --cirth-modal-overlay-background-color: oklch(93.85% .002 280deg / var(--cirth-opacity-overlay));
2628
2711
  --cirth-meter-optimum-color: var(--cirth-success);
2629
2712
  --cirth-meter-suboptimum-color: var(--cirth-warning);
2630
2713
  --cirth-meter-even-less-good-color: var(--cirth-error);
2631
2714
  --cirth-progress-color: var(--cirth-primary-background);
2632
- --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");
2633
- --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");
2634
- --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");
2635
- --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");
2636
- --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");
2637
- --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");
2715
+ --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(103, 105, 125)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
2716
+ --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(103, 105, 125)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
2717
+ --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");
2718
+ --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");
2719
+ --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");
2720
+ --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");
2638
2721
  }
2639
2722
 
2640
2723
  @media only screen and (prefers-color-scheme: dark) {
@@ -2663,7 +2746,8 @@ details summary[role="button"]:not(.outline):after {
2663
2746
  black);
2664
2747
  --cirth-primary-hover-border: var(--cirth-primary-hover-background);
2665
2748
  --cirth-primary-hover-underline: var(--cirth-primary-hover);
2666
- --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 70%);
2749
+ --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 80%);
2750
+ --cirth-text-selection-color: oklch(from var(--cirth-primary) calc(l * 1.065) c h / 18.75%);
2667
2751
  --cirth-primary-inverse: oklch(100% 0 0);
2668
2752
  --cirth-code-background-color: oklch(from var(--cirth-canvas) calc(l - .02) c h);
2669
2753
  --cirth-card-sectioning-background-color: oklch(from var(--cirth-canvas) calc(l + .025) c h);
@@ -2672,7 +2756,7 @@ details summary[role="button"]:not(.outline):after {
2672
2756
  --cirth-form-element-active-background-color: var(--cirth-canvas);
2673
2757
  --cirth-dropdown-background-color: var(--cirth-card-background-color);
2674
2758
  --cirth-popover-background-color: var(--cirth-card-background-color);
2675
- --cirth-secondary-background: oklch(48.3% .03 264);
2759
+ --cirth-secondary-background: oklch(48.3% .03 280);
2676
2760
  --cirth-secondary-border: var(--cirth-secondary-background);
2677
2761
  --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
2678
2762
  --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
@@ -2680,7 +2764,9 @@ details summary[role="button"]:not(.outline):after {
2680
2764
  --cirth-contrast-border: var(--cirth-contrast-background);
2681
2765
  --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
2682
2766
  --cirth-contrast-hover-underline: var(--cirth-contrast-hover);
2683
- --cirth-mark-background-color: var(--cirth-warning-surface);
2767
+ --cirth-mark-background-color: color-mix(in oklab,
2768
+ var(--cirth-primary) 24%,
2769
+ var(--cirth-canvas));
2684
2770
  --cirth-ins-color: var(--cirth-success-text);
2685
2771
  --cirth-del-color: var(--cirth-error-text);
2686
2772
  --cirth-blockquote-border-color: var(--cirth-muted-border-color);
@@ -2688,10 +2774,10 @@ details summary[role="button"]:not(.outline):after {
2688
2774
  --cirth-button-box-shadow: 0 0 0 #0000;
2689
2775
  --cirth-button-hover-box-shadow: 0 0 0 #0000;
2690
2776
  --cirth-table-border-color: var(--cirth-card-border-color);
2691
- --cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
2777
+ --cirth-table-row-stripped-background-color: oklch(57% .032 280 / .0375);
2692
2778
  --cirth-code-kbd-background-color: var(--cirth-ink);
2693
2779
  --cirth-code-kbd-color: var(--cirth-background-color);
2694
- --cirth-form-element-placeholder-color: oklch(65.7% .03 264);
2780
+ --cirth-form-element-placeholder-color: oklch(65.7% .025 280);
2695
2781
  --cirth-form-element-active-border-color: var(--cirth-primary-border);
2696
2782
  --cirth-form-element-focus-color: var(--cirth-primary-focus);
2697
2783
  --cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
@@ -2705,7 +2791,7 @@ details summary[role="button"]:not(.outline):after {
2705
2791
  --cirth-switch-checked-background-color: var(--cirth-primary-background);
2706
2792
  --cirth-switch-color: var(--cirth-primary-inverse);
2707
2793
  --cirth-range-thumb-border-color: var(--cirth-background-color);
2708
- --cirth-range-thumb-color: var(--cirth-secondary-background);
2794
+ --cirth-range-thumb-color: var(--cirth-secondary);
2709
2795
  --cirth-range-thumb-active-color: var(--cirth-primary-background);
2710
2796
  --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
2711
2797
  --cirth-accordion-close-summary-color: var(--cirth-ink);
@@ -2717,17 +2803,17 @@ details summary[role="button"]:not(.outline):after {
2717
2803
  --cirth-dropdown-color: var(--cirth-ink);
2718
2804
  --cirth-dropdown-border-color: var(--cirth-card-border-color);
2719
2805
  --cirth-dropdown-hover-background-color: var(--cirth-card-sectioning-background-color);
2720
- --cirth-modal-overlay-background-color: oklch(9% 0 0deg / var(--cirth-opacity-overlay));
2806
+ --cirth-modal-overlay-background-color: oklch(9% .011 280deg / var(--cirth-opacity-overlay));
2721
2807
  --cirth-meter-optimum-color: var(--cirth-success);
2722
2808
  --cirth-meter-suboptimum-color: var(--cirth-warning);
2723
2809
  --cirth-meter-even-less-good-color: var(--cirth-error);
2724
2810
  --cirth-progress-color: var(--cirth-primary);
2725
- --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");
2726
- --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");
2727
- --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");
2728
- --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");
2729
- --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");
2730
- --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");
2811
+ --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
2812
+ --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
2813
+ --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");
2814
+ --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");
2815
+ --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");
2816
+ --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");
2731
2817
  }
2732
2818
 
2733
2819
  :root:where(:not([data-theme])) details summary[role="button"].contrast:not(.outline):after, :host(:where(:not([data-theme]))) details summary[role="button"].contrast:not(.outline):after, :root:where(:not([data-theme])) [aria-busy="true"]:not(input, select, textarea).contrast:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline):before, :host(:where(:not([data-theme]))) [aria-busy="true"]:not(input, select, textarea).contrast:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline):before {
@@ -2760,7 +2846,8 @@ details summary[role="button"]:not(.outline):after {
2760
2846
  black);
2761
2847
  --cirth-primary-hover-border: var(--cirth-primary-hover-background);
2762
2848
  --cirth-primary-hover-underline: var(--cirth-primary-hover);
2763
- --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 70%);
2849
+ --cirth-primary-focus: oklch(from var(--cirth-primary) l c h / 80%);
2850
+ --cirth-text-selection-color: oklch(from var(--cirth-primary) calc(l * 1.065) c h / 18.75%);
2764
2851
  --cirth-primary-inverse: oklch(100% 0 0);
2765
2852
  --cirth-code-background-color: oklch(from var(--cirth-canvas) calc(l - .02) c h);
2766
2853
  --cirth-card-sectioning-background-color: oklch(from var(--cirth-canvas) calc(l + .025) c h);
@@ -2769,7 +2856,7 @@ details summary[role="button"]:not(.outline):after {
2769
2856
  --cirth-form-element-active-background-color: var(--cirth-canvas);
2770
2857
  --cirth-dropdown-background-color: var(--cirth-card-background-color);
2771
2858
  --cirth-popover-background-color: var(--cirth-card-background-color);
2772
- --cirth-secondary-background: oklch(48.3% .03 264);
2859
+ --cirth-secondary-background: oklch(48.3% .03 280);
2773
2860
  --cirth-secondary-border: var(--cirth-secondary-background);
2774
2861
  --cirth-secondary-hover-border: var(--cirth-secondary-hover-background);
2775
2862
  --cirth-secondary-hover-underline: var(--cirth-secondary-hover);
@@ -2777,7 +2864,9 @@ details summary[role="button"]:not(.outline):after {
2777
2864
  --cirth-contrast-border: var(--cirth-contrast-background);
2778
2865
  --cirth-contrast-hover-border: var(--cirth-contrast-hover-background);
2779
2866
  --cirth-contrast-hover-underline: var(--cirth-contrast-hover);
2780
- --cirth-mark-background-color: var(--cirth-warning-surface);
2867
+ --cirth-mark-background-color: color-mix(in oklab,
2868
+ var(--cirth-primary) 24%,
2869
+ var(--cirth-canvas));
2781
2870
  --cirth-ins-color: var(--cirth-success-text);
2782
2871
  --cirth-del-color: var(--cirth-error-text);
2783
2872
  --cirth-blockquote-border-color: var(--cirth-muted-border-color);
@@ -2785,10 +2874,10 @@ details summary[role="button"]:not(.outline):after {
2785
2874
  --cirth-button-box-shadow: 0 0 0 #0000;
2786
2875
  --cirth-button-hover-box-shadow: 0 0 0 #0000;
2787
2876
  --cirth-table-border-color: var(--cirth-card-border-color);
2788
- --cirth-table-row-stripped-background-color: oklch(57% .032 264 / .0375);
2877
+ --cirth-table-row-stripped-background-color: oklch(57% .032 280 / .0375);
2789
2878
  --cirth-code-kbd-background-color: var(--cirth-ink);
2790
2879
  --cirth-code-kbd-color: var(--cirth-background-color);
2791
- --cirth-form-element-placeholder-color: oklch(65.7% .03 264);
2880
+ --cirth-form-element-placeholder-color: oklch(65.7% .025 280);
2792
2881
  --cirth-form-element-active-border-color: var(--cirth-primary-border);
2793
2882
  --cirth-form-element-focus-color: var(--cirth-primary-focus);
2794
2883
  --cirth-form-element-disabled-opacity: var(--cirth-opacity-disabled);
@@ -2802,7 +2891,7 @@ details summary[role="button"]:not(.outline):after {
2802
2891
  --cirth-switch-checked-background-color: var(--cirth-primary-background);
2803
2892
  --cirth-switch-color: var(--cirth-primary-inverse);
2804
2893
  --cirth-range-thumb-border-color: var(--cirth-background-color);
2805
- --cirth-range-thumb-color: var(--cirth-secondary-background);
2894
+ --cirth-range-thumb-color: var(--cirth-secondary);
2806
2895
  --cirth-range-thumb-active-color: var(--cirth-primary-background);
2807
2896
  --cirth-accordion-active-summary-color: var(--cirth-primary-hover);
2808
2897
  --cirth-accordion-close-summary-color: var(--cirth-ink);
@@ -2814,17 +2903,17 @@ details summary[role="button"]:not(.outline):after {
2814
2903
  --cirth-dropdown-color: var(--cirth-ink);
2815
2904
  --cirth-dropdown-border-color: var(--cirth-card-border-color);
2816
2905
  --cirth-dropdown-hover-background-color: var(--cirth-card-sectioning-background-color);
2817
- --cirth-modal-overlay-background-color: oklch(9% 0 0deg / var(--cirth-opacity-overlay));
2906
+ --cirth-modal-overlay-background-color: oklch(9% .011 280deg / var(--cirth-opacity-overlay));
2818
2907
  --cirth-meter-optimum-color: var(--cirth-success);
2819
2908
  --cirth-meter-suboptimum-color: var(--cirth-warning);
2820
2909
  --cirth-meter-even-less-good-color: var(--cirth-error);
2821
2910
  --cirth-progress-color: var(--cirth-primary);
2822
- --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");
2823
- --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");
2824
- --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");
2825
- --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");
2826
- --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");
2827
- --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");
2911
+ --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
2912
+ --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(142, 144, 161)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
2913
+ --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");
2914
+ --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");
2915
+ --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");
2916
+ --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");
2828
2917
  }
2829
2918
 
2830
2919
  :where([data-theme="dark"]) details summary[role="button"].contrast:not(.outline):after, :where([data-theme="dark"]) [aria-busy="true"]:not(input, select, textarea).contrast:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline):before {
@@ -2837,120 +2926,120 @@ progress, [type="checkbox"], [type="radio"], [type="range"] {
2837
2926
 
2838
2927
  @media (prefers-contrast: more) {
2839
2928
  :where([data-theme="light"]), :root:where(:not([data-theme="dark"])), :host(:where(:not([data-theme="dark"]))) {
2840
- --cirth-ink: oklch(22.3% .006 264);
2929
+ --cirth-ink: oklch(22.3% .023 280);
2841
2930
  --cirth-h1-color: var(--cirth-color);
2842
2931
  --cirth-h2-color: var(--cirth-color);
2843
2932
  --cirth-h3-color: var(--cirth-color);
2844
2933
  --cirth-h4-color: var(--cirth-color);
2845
2934
  --cirth-h5-color: var(--cirth-color);
2846
2935
  --cirth-h6-color: var(--cirth-color);
2847
- --cirth-muted-color: oklch(39.7% .025 264);
2848
- --cirth-secondary: oklch(39.7% .025 264);
2849
- --cirth-code-color: oklch(35.3% .021 264);
2850
- --cirth-link-visited-color: oklch(35.3% .021 264);
2851
- --cirth-muted-border-color: oklch(57% .032 264);
2852
- --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");
2853
- --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");
2854
- --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");
2855
- --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");
2856
- --cirth-form-element-border-color: oklch(39.7% .025 264);
2857
- --cirth-form-element-invalid-border-color: oklch(48.3% .166 29.73);
2858
- --cirth-form-element-valid-border-color: oklch(48.3% .092 160.59);
2859
- --cirth-primary: oklch(39.7% .073 69.35);
2860
- --cirth-primary-hover: oklch(31% .057 69.35);
2936
+ --cirth-muted-color: oklch(39.7% .028 280);
2937
+ --cirth-secondary: oklch(39.7% .028 280);
2938
+ --cirth-code-color: oklch(35.3% .027 280);
2939
+ --cirth-link-visited-color: oklch(35.3% .027 280);
2940
+ --cirth-muted-border-color: oklch(57% .032 280);
2941
+ --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");
2942
+ --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");
2943
+ --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");
2944
+ --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");
2945
+ --cirth-form-element-border-color: oklch(39.7% .028 280);
2946
+ --cirth-form-element-invalid-border-color: oklch(48.3% .165 22);
2947
+ --cirth-form-element-valid-border-color: oklch(48.3% .106 153);
2948
+ --cirth-primary: oklch(39.7% .081 44);
2949
+ --cirth-primary-hover: oklch(31% .063 44);
2861
2950
  --cirth-primary-underline: var(--cirth-primary);
2862
2951
  --cirth-secondary-underline: var(--cirth-secondary);
2863
2952
  --cirth-contrast-underline: var(--cirth-contrast);
2864
- --cirth-primary-focus: oklch(48.3% .089 69.35);
2865
- --cirth-secondary-focus: oklch(48.3% .03 264);
2866
- --cirth-contrast-focus: oklch(48.3% .03 264);
2867
- --cirth-switch-background-color: oklch(48.3% .03 264);
2868
- --cirth-progress-border-color: oklch(48.3% .03 264);
2869
- --cirth-meter-optimum-color: oklch(44% .084 160.59);
2870
- --cirth-meter-suboptimum-color: oklch(39.7% .07 78);
2871
- --cirth-meter-even-less-good-color: oklch(35.3% .122 29.73);
2953
+ --cirth-primary-focus: oklch(48.3% .098 44);
2954
+ --cirth-secondary-focus: oklch(48.3% .03 280);
2955
+ --cirth-contrast-focus: oklch(48.3% .03 280);
2956
+ --cirth-switch-background-color: oklch(48.3% .03 280);
2957
+ --cirth-progress-border-color: oklch(48.3% .03 280);
2958
+ --cirth-meter-optimum-color: oklch(44% .096 153);
2959
+ --cirth-meter-suboptimum-color: oklch(39.7% .069 89.5);
2960
+ --cirth-meter-even-less-good-color: oklch(35.3% .121 22);
2872
2961
  --cirth-dropdown-border-color: var(--cirth-muted-border-color);
2873
2962
  }
2874
2963
  }
2875
2964
 
2876
2965
  @media only screen and (prefers-contrast: more) and (prefers-color-scheme: dark) {
2877
2966
  :root:where(:not([data-theme])), :host(:where(:not([data-theme]))) {
2878
- --cirth-ink: oklch(96% 0 264);
2967
+ --cirth-ink: oklch(96% 0 280);
2879
2968
  --cirth-h1-color: var(--cirth-color);
2880
2969
  --cirth-h2-color: var(--cirth-color);
2881
2970
  --cirth-h3-color: var(--cirth-color);
2882
2971
  --cirth-h4-color: var(--cirth-color);
2883
2972
  --cirth-h5-color: var(--cirth-color);
2884
2973
  --cirth-h6-color: var(--cirth-color);
2885
- --cirth-muted-color: oklch(78.7% .021 264);
2886
- --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");
2887
- --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");
2888
- --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");
2889
- --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");
2890
- --cirth-secondary: oklch(78.7% .021 264);
2891
- --cirth-code-color: oklch(83% .016 264);
2892
- --cirth-link-visited-color: oklch(78.7% .021 264);
2893
- --cirth-muted-border-color: oklch(57% .032 264);
2974
+ --cirth-muted-color: oklch(78.7% .014 280);
2975
+ --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");
2976
+ --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
2977
+ --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
2978
+ --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
2979
+ --cirth-secondary: oklch(78.7% .014 280);
2980
+ --cirth-code-color: oklch(83% .011 280);
2981
+ --cirth-link-visited-color: oklch(78.7% .014 280);
2982
+ --cirth-muted-border-color: oklch(57% .032 280);
2894
2983
  --cirth-card-border-color: var(--cirth-muted-border-color);
2895
- --cirth-form-element-border-color: oklch(70% .028 264);
2896
- --cirth-form-element-invalid-border-color: oklch(78.7% .106 29.73);
2897
- --cirth-form-element-valid-border-color: oklch(78.7% .15 160.59);
2898
- --cirth-primary: oklch(78.7% .146 69.35);
2899
- --cirth-primary-hover: oklch(87.3% .082 69.35);
2900
- --cirth-primary-background: oklch(44% .081 69.35);
2901
- --cirth-primary-hover-background: oklch(39.7% .073 69.35);
2984
+ --cirth-form-element-border-color: oklch(70% .021 280);
2985
+ --cirth-form-element-invalid-border-color: oklch(78.7% .105 22);
2986
+ --cirth-form-element-valid-border-color: oklch(78.7% .172 153);
2987
+ --cirth-primary: oklch(78.7% .092 44);
2988
+ --cirth-primary-hover: oklch(87.3% .051 44);
2989
+ --cirth-primary-background: oklch(44% .09 44);
2990
+ --cirth-primary-hover-background: oklch(39.7% .081 44);
2902
2991
  --cirth-primary-underline: var(--cirth-primary);
2903
2992
  --cirth-secondary-underline: var(--cirth-secondary);
2904
2993
  --cirth-contrast-underline: var(--cirth-contrast);
2905
- --cirth-primary-focus: oklch(70% .129 69.35);
2906
- --cirth-secondary-focus: oklch(70% .028 264);
2907
- --cirth-contrast-focus: oklch(87.3% .011 264);
2908
- --cirth-switch-background-color: oklch(65.7% .03 264);
2909
- --cirth-progress-border-color: oklch(70% .028 264);
2910
- --cirth-meter-optimum-color: oklch(74.3% .142 160.59);
2911
- --cirth-meter-suboptimum-color: oklch(78.7% .139 78);
2912
- --cirth-meter-even-less-good-color: oklch(83% .081 29.73);
2994
+ --cirth-primary-focus: oklch(70% .141 44);
2995
+ --cirth-secondary-focus: oklch(70% .021 280);
2996
+ --cirth-contrast-focus: oklch(87.3% .007 280);
2997
+ --cirth-switch-background-color: oklch(65.7% .025 280);
2998
+ --cirth-progress-border-color: oklch(70% .021 280);
2999
+ --cirth-meter-optimum-color: oklch(74.3% .163 153);
3000
+ --cirth-meter-suboptimum-color: oklch(78.7% .137 89.5);
3001
+ --cirth-meter-even-less-good-color: oklch(83% .08 22);
2913
3002
  --cirth-dropdown-border-color: var(--cirth-muted-border-color);
2914
3003
  }
2915
3004
  }
2916
3005
 
2917
3006
  @media (prefers-contrast: more) {
2918
3007
  :where([data-theme="dark"]) {
2919
- --cirth-ink: oklch(96% 0 264);
3008
+ --cirth-ink: oklch(96% 0 280);
2920
3009
  --cirth-h1-color: var(--cirth-color);
2921
3010
  --cirth-h2-color: var(--cirth-color);
2922
3011
  --cirth-h3-color: var(--cirth-color);
2923
3012
  --cirth-h4-color: var(--cirth-color);
2924
3013
  --cirth-h5-color: var(--cirth-color);
2925
3014
  --cirth-h6-color: var(--cirth-color);
2926
- --cirth-muted-color: oklch(78.7% .021 264);
2927
- --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");
2928
- --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");
2929
- --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");
2930
- --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");
2931
- --cirth-secondary: oklch(78.7% .021 264);
2932
- --cirth-code-color: oklch(83% .016 264);
2933
- --cirth-link-visited-color: oklch(78.7% .021 264);
2934
- --cirth-muted-border-color: oklch(57% .032 264);
3015
+ --cirth-muted-color: oklch(78.7% .014 280);
3016
+ --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");
3017
+ --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
3018
+ --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
3019
+ --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 185, 195)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
3020
+ --cirth-secondary: oklch(78.7% .014 280);
3021
+ --cirth-code-color: oklch(83% .011 280);
3022
+ --cirth-link-visited-color: oklch(78.7% .014 280);
3023
+ --cirth-muted-border-color: oklch(57% .032 280);
2935
3024
  --cirth-card-border-color: var(--cirth-muted-border-color);
2936
- --cirth-form-element-border-color: oklch(70% .028 264);
2937
- --cirth-form-element-invalid-border-color: oklch(78.7% .106 29.73);
2938
- --cirth-form-element-valid-border-color: oklch(78.7% .15 160.59);
2939
- --cirth-primary: oklch(78.7% .146 69.35);
2940
- --cirth-primary-hover: oklch(87.3% .082 69.35);
2941
- --cirth-primary-background: oklch(44% .081 69.35);
2942
- --cirth-primary-hover-background: oklch(39.7% .073 69.35);
3025
+ --cirth-form-element-border-color: oklch(70% .021 280);
3026
+ --cirth-form-element-invalid-border-color: oklch(78.7% .105 22);
3027
+ --cirth-form-element-valid-border-color: oklch(78.7% .172 153);
3028
+ --cirth-primary: oklch(78.7% .092 44);
3029
+ --cirth-primary-hover: oklch(87.3% .051 44);
3030
+ --cirth-primary-background: oklch(44% .09 44);
3031
+ --cirth-primary-hover-background: oklch(39.7% .081 44);
2943
3032
  --cirth-primary-underline: var(--cirth-primary);
2944
3033
  --cirth-secondary-underline: var(--cirth-secondary);
2945
3034
  --cirth-contrast-underline: var(--cirth-contrast);
2946
- --cirth-primary-focus: oklch(70% .129 69.35);
2947
- --cirth-secondary-focus: oklch(70% .028 264);
2948
- --cirth-contrast-focus: oklch(87.3% .011 264);
2949
- --cirth-switch-background-color: oklch(65.7% .03 264);
2950
- --cirth-progress-border-color: oklch(70% .028 264);
2951
- --cirth-meter-optimum-color: oklch(74.3% .142 160.59);
2952
- --cirth-meter-suboptimum-color: oklch(78.7% .139 78);
2953
- --cirth-meter-even-less-good-color: oklch(83% .081 29.73);
3035
+ --cirth-primary-focus: oklch(70% .141 44);
3036
+ --cirth-secondary-focus: oklch(70% .021 280);
3037
+ --cirth-contrast-focus: oklch(87.3% .007 280);
3038
+ --cirth-switch-background-color: oklch(65.7% .025 280);
3039
+ --cirth-progress-border-color: oklch(70% .021 280);
3040
+ --cirth-meter-optimum-color: oklch(74.3% .163 153);
3041
+ --cirth-meter-suboptimum-color: oklch(78.7% .137 89.5);
3042
+ --cirth-meter-even-less-good-color: oklch(83% .08 22);
2954
3043
  --cirth-dropdown-border-color: var(--cirth-muted-border-color);
2955
3044
  }
2956
3045
  }