mnfst 0.5.106 → 0.5.108

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 (28) hide show
  1. package/lib/manifest.accordion.css +4 -4
  2. package/lib/manifest.avatar.css +8 -8
  3. package/lib/manifest.button.css +6 -6
  4. package/lib/manifest.checkbox.css +5 -5
  5. package/lib/manifest.code.css +12 -12
  6. package/lib/manifest.code.min.css +1 -1
  7. package/lib/manifest.colorpicker.css +10 -10
  8. package/lib/manifest.css +134 -134
  9. package/lib/manifest.data.js +34 -22
  10. package/lib/manifest.dialog.css +2 -2
  11. package/lib/manifest.divider.css +2 -2
  12. package/lib/manifest.dropdown.css +9 -9
  13. package/lib/manifest.form.css +3 -3
  14. package/lib/manifest.input.css +8 -8
  15. package/lib/manifest.integrity.json +1 -1
  16. package/lib/manifest.min.css +1 -1
  17. package/lib/manifest.radio.css +1 -1
  18. package/lib/manifest.range.css +5 -5
  19. package/lib/manifest.resize.css +1 -1
  20. package/lib/manifest.sidebar.css +2 -2
  21. package/lib/manifest.switch.css +4 -4
  22. package/lib/manifest.table.css +4 -4
  23. package/lib/manifest.theme.css +27 -15
  24. package/lib/manifest.toast.css +7 -7
  25. package/lib/manifest.tooltip.css +2 -2
  26. package/lib/manifest.typography.css +22 -22
  27. package/lib/manifest.utilities.css +27 -27
  28. package/package.json +1 -1
package/lib/manifest.css CHANGED
@@ -174,7 +174,7 @@
174
174
  :where(hr) {
175
175
  height: 1px;
176
176
  color: inherit;
177
- background-color: var(--color-line, color-mix(darkslategray 12%, transparent));
177
+ background-color: var(--color-line, color-mix(oklch(20.5% 0 0) 12%, transparent));
178
178
  border: 0 none
179
179
  }
180
180
 
@@ -405,7 +405,7 @@
405
405
  align-items: center;
406
406
  padding: var(--spacing-field-padding, 0.625rem) 0;
407
407
  font-weight: bold;
408
- color: var(--color-content-stark, darkslategray);
408
+ color: var(--color-content-stark, darkslateoklch(43.9% 0 0));
409
409
  user-select: none;
410
410
  cursor: pointer;
411
411
  transition: var(--transition, all .05s ease-in-out);
@@ -418,11 +418,11 @@
418
418
  }
419
419
 
420
420
  &:hover {
421
- color: color-mix(in oklch, var(--color-surface-1, whitesmoke) 40%, var(--color-content-stark, darkslategray))
421
+ color: color-mix(in oklch, var(--color-surface-1, oklch(97% 0 0)) 40%, var(--color-content-stark, darkslateoklch(43.9% 0 0)))
422
422
  }
423
423
 
424
424
  &:active {
425
- color: color-mix(in oklch, var(--color-surface-1, whitesmoke) 50%, var(--color-content-stark, darkslategray))
425
+ color: color-mix(in oklch, var(--color-surface-1, oklch(97% 0 0)) 50%, var(--color-content-stark, darkslateoklch(43.9% 0 0)))
426
426
  }
427
427
 
428
428
  /* Add custom icon */
@@ -431,7 +431,7 @@
431
431
  order: 1;
432
432
  width: 1rem;
433
433
  height: 1rem;
434
- background-color: color-mix(in oklch, var(--color-field-surface, color-mix(darkslategray 10%, transparent)) 50%, var(--color-field-inverse, darkslategray));
434
+ background-color: color-mix(in oklch, var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent)) 50%, var(--color-field-inverse, darkslateoklch(43.9% 0 0)));
435
435
  -webkit-mask-image: var(--icon-accordion, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 256 256'%3E%3Cpath fill='%23000' d='m184.49 136.49l-80 80a12 12 0 0 1-17-17L159 128L87.51 56.49a12 12 0 1 1 17-17l80 80a12 12 0 0 1-.02 17'/%3E%3C/svg%3E"));
436
436
  mask-image: var(--icon-accordion, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 256 256'%3E%3Cpath fill='%23000' d='m184.49 136.49l-80 80a12 12 0 0 1-17-17L159 128L87.51 56.49a12 12 0 1 1 17-17l80 80a12 12 0 0 1-.02 17'/%3E%3C/svg%3E"));
437
437
  -webkit-mask-repeat: no-repeat;
@@ -473,8 +473,8 @@
473
473
  font-weight: bold;
474
474
  text-align: center;
475
475
  text-transform: uppercase;
476
- color: var(--color-field-inverse, darkslategray);
477
- background-color: var(--color-field-surface, color-mix(darkslategray 10%, transparent));
476
+ color: var(--color-field-inverse, darkslateoklch(43.9% 0 0));
477
+ background-color: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent));
478
478
  background-clip: content-box;
479
479
  background-size: cover;
480
480
  background-position: center;
@@ -482,7 +482,7 @@
482
482
 
483
483
  /* Icon */
484
484
  &[x-icon] {
485
- color: var(--color-content-subtle, darkgray)
485
+ color: var(--color-content-subtle, oklch(55.6% 0 0))
486
486
  }
487
487
 
488
488
  /* Profile pic */
@@ -506,8 +506,8 @@
506
506
  width: 9px;
507
507
  height: 9px;
508
508
  z-index: 1;
509
- background-color: var(--color-field-surface, color-mix(darkslategray 10%, transparent));
510
- border: 1px solid var(--color-page, white);
509
+ background-color: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent));
510
+ border: 1px solid var(--color-page, oklch(98.5% 0 0));
511
511
  border-radius: 50%
512
512
  }
513
513
  }
@@ -518,7 +518,7 @@
518
518
  background-blend-mode: normal;
519
519
 
520
520
  &:hover {
521
- background-color: var(--color-field-surface-hover, color-mix(darkslategray 15%, transparent));
521
+ background-color: var(--color-field-surface-hover, color-mix(oklch(20.5% 0 0) 15%, transparent));
522
522
  background-blend-mode: multiply;
523
523
 
524
524
  & img {
@@ -553,7 +553,7 @@
553
553
  padding-inline-end: 1.5ch;
554
554
 
555
555
  &:hover .avatar {
556
- background-color: var(--color-field-surface-hover, color-mix(darkslategray 15%, transparent));
556
+ background-color: var(--color-field-surface-hover, color-mix(oklch(20.5% 0 0) 15%, transparent));
557
557
  transition: var(--transition, all .05s ease-in-out)
558
558
  }
559
559
  }
@@ -566,7 +566,7 @@
566
566
 
567
567
  :where(.avatar) {
568
568
  margin-inline-end: calc(var(--spacing-field-height, 2.25rem) * -0.3);
569
- box-shadow: 0 0 0 3px var(--color-page, white)
569
+ box-shadow: 0 0 0 3px var(--color-page, oklch(98.5% 0 0))
570
570
  }
571
571
  }
572
572
  }
@@ -590,13 +590,13 @@
590
590
  overflow: hidden;
591
591
  white-space: nowrap;
592
592
  text-overflow: ellipsis;
593
- color: var(--color-field-inverse, darkslategray);
594
- background-color: var(--color-field-surface, color-mix(darkslategray 10%, transparent));
593
+ color: var(--color-field-inverse, darkslateoklch(43.9% 0 0));
594
+ background-color: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent));
595
595
  border-width: 0;
596
596
  border-style: solid;
597
597
  border-color: transparent;
598
598
  border-radius: var(--radius, 0.5rem);
599
- outline-color: var(--color-line, color-mix(darkslategray 10%, transparent));
599
+ outline-color: var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent));
600
600
  cursor: pointer;
601
601
  transition: var(--transition, all .05s ease-in-out);
602
602
  appearance: button;
@@ -625,15 +625,15 @@
625
625
  }
626
626
 
627
627
  &:hover {
628
- background-color: var(--color-field-surface-hover, color-mix(darkslategray 15%, transparent))
628
+ background-color: var(--color-field-surface-hover, color-mix(oklch(20.5% 0 0) 15%, transparent))
629
629
  }
630
630
 
631
631
  &:active {
632
- background-color: var(--color-field-surface-hover, color-mix(darkslategray 15%, transparent))
632
+ background-color: var(--color-field-surface-hover, color-mix(oklch(20.5% 0 0) 15%, transparent))
633
633
  }
634
634
 
635
635
  &:focus-visible {
636
- background-color: var(--color-field-surface, color-mix(darkslategray 10%, transparent))
636
+ background-color: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent))
637
637
  }
638
638
  }
639
639
 
@@ -669,13 +669,13 @@
669
669
  &:checked {
670
670
 
671
671
  &:hover {
672
- background-color: var(--color-field-surface-hover, color-mix(darkslategray 15%, transparent));
673
- border-color: var(--color-field-surface-hover, color-mix(darkslategray 15%, transparent))
672
+ background-color: var(--color-field-surface-hover, color-mix(oklch(20.5% 0 0) 15%, transparent));
673
+ border-color: var(--color-field-surface-hover, color-mix(oklch(20.5% 0 0) 15%, transparent))
674
674
  }
675
675
 
676
676
  &:active {
677
- background-color: var(--color-field-surface-hover, color-mix(darkslategray 15%, transparent));
678
- border-color: var(--color-field-surface-hover, color-mix(darkslategray 15%, transparent))
677
+ background-color: var(--color-field-surface-hover, color-mix(oklch(20.5% 0 0) 15%, transparent));
678
+ border-color: var(--color-field-surface-hover, color-mix(oklch(20.5% 0 0) 15%, transparent))
679
679
  }
680
680
  }
681
681
 
@@ -687,7 +687,7 @@
687
687
  left: 50%;
688
688
  width: 60%;
689
689
  height: 60%;
690
- background-color: var(--color-field-inverse, darkslategray);
690
+ background-color: var(--color-field-inverse, darkslateoklch(43.9% 0 0));
691
691
  -webkit-mask-image: var(--icon-checkbox, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='currentColor' d='m0 11l2-2l5 5L18 3l2 2L7 18z'/%3E%3C/svg%3E"));
692
692
  mask-image: var(--icon-checkbox, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='currentColor' d='m0 11l2-2l5 5L18 3l2 2L7 18z'/%3E%3C/svg%3E"));
693
693
  -webkit-mask-repeat: no-repeat;
@@ -713,7 +713,7 @@
713
713
  /* Manifest Color Picker */
714
714
 
715
715
  :root {
716
- --color-picker-swatch: var(--color-line, color-mix(darkslategray 10%, transparent));
716
+ --color-picker-swatch: var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent));
717
717
  --icon-color-solid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-paint-roller-icon lucide-paint-roller'%3E%3Crect width='16' height='6' x='2' y='2' rx='2'/%3E%3Cpath d='M10 16v-2a2 2 0 0 1 2-2h8a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2'/%3E%3Crect width='4' height='6' x='8' y='16' rx='1'/%3E%3C/svg%3E");
718
718
  --icon-color-gradient: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-blend-icon lucide-blend'%3E%3Ccircle cx='9' cy='9' r='7'/%3E%3Ccircle cx='15' cy='15' r='7'/%3E%3C/svg%3E");
719
719
  --icon-color-library: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-swatch-book-icon lucide-swatch-book'%3E%3Cpath d='M11 17a4 4 0 0 1-8 0V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2Z'/%3E%3Cpath d='M16.7 13H19a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H7'/%3E%3Cpath d='M 7 17h.01'/%3E%3Cpath d='m11 8 2.3-2.3a2.4 2.4 0 0 1 3.404.004L18.6 7.6a2.4 2.4 0 0 1 .026 3.434L9.9 19.8'/%3E%3C/svg%3E");
@@ -795,7 +795,7 @@
795
795
  display: flex;
796
796
  width: 100%;
797
797
  padding: 2px;
798
- border-bottom: 1px solid var(--color-line, color-mix(darkslategray 10%, transparent));
798
+ border-bottom: 1px solid var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent));
799
799
 
800
800
  /* Distribute button widths equally */
801
801
  & button {
@@ -970,7 +970,7 @@
970
970
 
971
971
  /* Gradient layers */
972
972
  & :where(.layer-options-wrapper) {
973
- border-bottom: 1px solid var(--color-line, color-mix(darkslategray 10%, transparent));
973
+ border-bottom: 1px solid var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent));
974
974
 
975
975
  /* Layer options inputs */
976
976
  & :where(.layer-options-inputs) {
@@ -1007,7 +1007,7 @@
1007
1007
  position: absolute;
1008
1008
  top: 0;
1009
1009
  right: 0.25rem;
1010
- color: var(--color-content-neutral, gray)
1010
+ color: var(--color-content-neutral, oklch(43.9% 0 0))
1011
1011
  }
1012
1012
  }
1013
1013
 
@@ -1020,7 +1020,7 @@
1020
1020
  margin-inline-end: 0.5rem;
1021
1021
  border-radius: 1rem;
1022
1022
  cursor: pointer;
1023
- background: var(--color-field-surface, color-mix(darkslategray 10%, transparent));
1023
+ background: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent));
1024
1024
 
1025
1025
  /* Stop handle */
1026
1026
  & :where(.stop-handle) {
@@ -1112,7 +1112,7 @@
1112
1112
 
1113
1113
  /* Only apply border to all except last library-group */
1114
1114
  &:not(:last-child) {
1115
- border-bottom: 1px solid var(--color-line, color-mix(darkslategray 10%, transparent));
1115
+ border-bottom: 1px solid var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent));
1116
1116
  }
1117
1117
 
1118
1118
  /* Palette wrapper */
@@ -1153,7 +1153,7 @@
1153
1153
  padding: 0;
1154
1154
 
1155
1155
  & .tabs-wrapper button {
1156
- border: 1px solid var(--color-popover-surface, white)
1156
+ border: 1px solid var(--color-popover-surface, oklch(98.5% 0 0))
1157
1157
  }
1158
1158
  }
1159
1159
 
@@ -1202,17 +1202,17 @@
1202
1202
  }
1203
1203
 
1204
1204
  .gradient-layer-icon-linear {
1205
- background: linear-gradient(to right, var(--color-content-neutral, gray), color-mix(in oklch, var(--color-content-neutral, gray) 0%, transparent 100%));
1205
+ background: linear-gradient(to right, var(--color-content-neutral, oklch(43.9% 0 0)), color-mix(in oklch, var(--color-content-neutral, oklch(43.9% 0 0)) 0%, transparent 100%));
1206
1206
  border-radius: 50%
1207
1207
  }
1208
1208
 
1209
1209
  .gradient-layer-icon-radial {
1210
- background: radial-gradient(var(--color-content-neutral, gray), color-mix(in oklch, var(--color-content-neutral, gray) 0%, transparent 100%));
1210
+ background: radial-gradient(var(--color-content-neutral, oklch(43.9% 0 0)), color-mix(in oklch, var(--color-content-neutral, oklch(43.9% 0 0)) 0%, transparent 100%));
1211
1211
  border-radius: 50%
1212
1212
  }
1213
1213
 
1214
1214
  .gradient-layer-icon-conic {
1215
- background: conic-gradient(var(--color-content-neutral, gray), color-mix(in oklch, var(--color-content-neutral, gray) 0%, transparent 100%));
1215
+ background: conic-gradient(var(--color-content-neutral, oklch(43.9% 0 0)), color-mix(in oklch, var(--color-content-neutral, oklch(43.9% 0 0)) 0%, transparent 100%));
1216
1216
  border-radius: 50%
1217
1217
  }
1218
1218
  }
@@ -1231,8 +1231,8 @@
1231
1231
  min-height: 200px;
1232
1232
  max-height: 90vh;
1233
1233
  margin: auto;
1234
- color: var(--color-content-stark, darkslategray);
1235
- background-color: var(--color-popover-surface, white);
1234
+ color: var(--color-content-stark, darkslateoklch(43.9% 0 0));
1235
+ background-color: var(--color-popover-surface, oklch(98.5% 0 0));
1236
1236
  border: 0 none;
1237
1237
  border-radius: calc(var(--radius, 0.5rem) * 2);
1238
1238
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
@@ -1333,7 +1333,7 @@
1333
1333
  margin: var(--spacing-field-padding, 0.625rem) 0;
1334
1334
  white-space: nowrap;
1335
1335
  font-size: 0.875rem;
1336
- color: var(--color-content-neutral, gray);
1336
+ color: var(--color-content-neutral, oklch(43.9% 0 0));
1337
1337
 
1338
1338
  /* Lines before and after content */
1339
1339
  &:before,
@@ -1343,7 +1343,7 @@
1343
1343
  flex: 1;
1344
1344
  width: auto;
1345
1345
  height: 1px;
1346
- background-color: var(--color-line, color-mix(darkslategray 10%, transparent))
1346
+ background-color: var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent))
1347
1347
  }
1348
1348
 
1349
1349
  /* Space between lines and content */
@@ -1415,7 +1415,7 @@
1415
1415
  padding: 0.25rem;
1416
1416
  z-index: 50;
1417
1417
  list-style: none;
1418
- background: var(--color-popover-surface, white);
1418
+ background: var(--color-popover-surface, oklch(98.5% 0 0));
1419
1419
  border: 0 none;
1420
1420
  border-radius: var(--radius, 0.5rem);
1421
1421
  box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;
@@ -1433,7 +1433,7 @@
1433
1433
  padding-inline-start: 0.5rem;
1434
1434
  padding-inline-end: 0.5rem;
1435
1435
  font-weight: normal;
1436
- color: var(--color-content-stark, darkslategray);
1436
+ color: var(--color-content-stark, darkslateoklch(43.9% 0 0));
1437
1437
  text-align: start;
1438
1438
  text-decoration: none;
1439
1439
  text-overflow: ellipsis;
@@ -1445,14 +1445,14 @@
1445
1445
  user-select: none;
1446
1446
 
1447
1447
  &:hover {
1448
- color: var(--color-field-inverse, darkslategray);
1448
+ color: var(--color-field-inverse, darkslateoklch(43.9% 0 0));
1449
1449
  text-decoration: inherit;
1450
- background-color: var(--color-field-surface, color-mix(darkslategray 10%, transparent));
1450
+ background-color: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent));
1451
1451
  }
1452
1452
 
1453
1453
  &:active {
1454
- color: var(--color-field-inverse, darkslategray);
1455
- background-color: var(--color-field-surface, color-mix(darkslategray 10%, transparent));
1454
+ color: var(--color-field-inverse, darkslateoklch(43.9% 0 0));
1455
+ background-color: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent));
1456
1456
  }
1457
1457
 
1458
1458
  & span,
@@ -1469,7 +1469,7 @@
1469
1469
  /* Titles */
1470
1470
  & small {
1471
1471
  padding: 0.25rem 0.5rem;
1472
- color: var(--color-content-neutral, gray);
1472
+ color: var(--color-content-neutral, oklch(43.9% 0 0));
1473
1473
  }
1474
1474
 
1475
1475
  /* Horizontal rules (offset to ignore menu padding) */
@@ -1479,7 +1479,7 @@
1479
1479
  margin-inline-start: calc(0.25rem * -1);
1480
1480
  margin-top: 0.25rem;
1481
1481
  margin-bottom: 0.25rem;
1482
- background-color: var(--color-line, color-mix(darkslategray 10%, transparent));
1482
+ background-color: var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent));
1483
1483
  }
1484
1484
 
1485
1485
  /* Labels */
@@ -1516,7 +1516,7 @@
1516
1516
 
1517
1517
  /* Dark theme */
1518
1518
  :where(.dark menu[popover]) :where(li, a, button, label):hover {
1519
- background-color: var(--color-field-surface-hover, color-mix(darkslategray 15%, transparent));
1519
+ background-color: var(--color-field-surface-hover, color-mix(oklch(20.5% 0 0) 15%, transparent));
1520
1520
  }
1521
1521
 
1522
1522
  /* Nested menu alignment */
@@ -1714,14 +1714,14 @@
1714
1714
  :where(fieldset:has(legend)):not(.unstyle) {
1715
1715
  padding: 1ch 1.5ch 1.5ch 1.5ch;
1716
1716
  border-radius: var(--radius, 0.5rem);
1717
- border-color: var(--color-line, color-mix(darkslategray 10%, transparent));
1717
+ border-color: var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent));
1718
1718
  border-style: solid;
1719
1719
  border-width: 1px;
1720
1720
 
1721
1721
  & :where(legend) {
1722
1722
  padding: 0 1.5ch;
1723
1723
  font-size: 0.875rem;
1724
- color: var(--color-content-subtle, darkgray);
1724
+ color: var(--color-content-subtle, oklch(55.6% 0 0));
1725
1725
  }
1726
1726
  }
1727
1727
 
@@ -1790,7 +1790,7 @@
1790
1790
 
1791
1791
  /* Focus state for .label wrapper for search and file inputs */
1792
1792
  & .label:focus-within {
1793
- box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-content-stark, darkslategray) 35%, transparent)
1793
+ box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-content-stark, darkslateoklch(43.9% 0 0)) 35%, transparent)
1794
1794
  }
1795
1795
 
1796
1796
  /* Align textarea label to top */
@@ -1823,8 +1823,8 @@
1823
1823
  :where(input:not([type=range], [type=color]), textarea, label:has([type=search], [type=file]), .label:has([type=search], [type=file])):not(.unstyle) {
1824
1824
  width: 100%;
1825
1825
  max-width: 100%;
1826
- color: var(--color-field-inverse, darkslategray);
1827
- background-color: var(--color-field-surface, color-mix(darkslategray 10%, transparent));
1826
+ color: var(--color-field-inverse, darkslateoklch(43.9% 0 0));
1827
+ background-color: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent));
1828
1828
  border-width: 0;
1829
1829
  border-style: solid;
1830
1830
  border-color: transparent;
@@ -1834,23 +1834,23 @@
1834
1834
  appearance: none;
1835
1835
 
1836
1836
  &:hover {
1837
- background-color: var(--color-field-surface-hover, color-mix(darkslategray 15%, transparent))
1837
+ background-color: var(--color-field-surface-hover, color-mix(oklch(20.5% 0 0) 15%, transparent))
1838
1838
  }
1839
1839
 
1840
1840
  &:active {
1841
- background-color: var(--color-field-surface-hover, color-mix(darkslategray 15%, transparent))
1841
+ background-color: var(--color-field-surface-hover, color-mix(oklch(20.5% 0 0) 15%, transparent))
1842
1842
  }
1843
1843
 
1844
1844
  &:focus-visible {
1845
- background-color: var(--color-field-surface, color-mix(darkslategray 10%, transparent))
1845
+ background-color: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent))
1846
1846
  }
1847
1847
 
1848
1848
  &::placeholder {
1849
- color: color-mix(in oklch, var(--color-field-inverse, darkslategray) 65%, transparent)
1849
+ color: color-mix(in oklch, var(--color-field-inverse, darkslateoklch(43.9% 0 0)) 65%, transparent)
1850
1850
  }
1851
1851
 
1852
1852
  &::selection {
1853
- background-color: color-mix(in oklch, var(--color-field-surface, color-mix(darkslategray 10%, transparent)) 80%, var(--color-field-inverse, darkslategray))
1853
+ background-color: color-mix(in oklch, var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent)) 80%, var(--color-field-inverse, darkslateoklch(43.9% 0 0)))
1854
1854
  }
1855
1855
 
1856
1856
  &[type=file] {
@@ -1926,7 +1926,7 @@
1926
1926
  width: var(--spacing-field-height, 2.25rem);
1927
1927
  height: 100%;
1928
1928
  margin-inline-end: 0;
1929
- color: var(--color-content-subtle, darkgray)
1929
+ color: var(--color-content-subtle, oklch(55.6% 0 0))
1930
1930
  }
1931
1931
  }
1932
1932
 
@@ -2063,7 +2063,7 @@
2063
2063
  left: 50%;
2064
2064
  transform: translateX(-50%);
2065
2065
  background-color: var(--presence-cursor-color, var(--presence-focus-color));
2066
- color: white;
2066
+ color: oklch(98.5% 0 0);
2067
2067
  padding: 2px 6px;
2068
2068
  border-radius: 4px;
2069
2069
  font-size: 12px;
@@ -2099,7 +2099,7 @@
2099
2099
  left: 50%;
2100
2100
  width: 60%;
2101
2101
  height: 60%;
2102
- background-color: var(--color-field-inverse, darkslategray);
2102
+ background-color: var(--color-field-inverse, darkslateoklch(43.9% 0 0));
2103
2103
  border-radius: 50%;
2104
2104
  transform-origin: center;
2105
2105
  transition: var(--transition, all .05s ease-in-out);
@@ -2129,14 +2129,14 @@
2129
2129
 
2130
2130
  &::-webkit-slider-runnable-track {
2131
2131
  height: calc(var(--spacing, 0.25rem) * 2);
2132
- background-color: var(--color-field-surface, color-mix(darkslategray 10%, transparent));
2132
+ background-color: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent));
2133
2133
  border-radius: var(--radius, 0.5rem);
2134
2134
  cursor: pointer;
2135
2135
  transition: var(--transition, all .05s ease-in-out)
2136
2136
  }
2137
2137
 
2138
2138
  &:hover::-webkit-slider-runnable-track {
2139
- background-color: var(--color-field-surface-hover, color-mix(darkslategray 15%, transparent));
2139
+ background-color: var(--color-field-surface-hover, color-mix(oklch(20.5% 0 0) 15%, transparent));
2140
2140
  }
2141
2141
 
2142
2142
  &::-webkit-slider-thumb {
@@ -2146,7 +2146,7 @@
2146
2146
  width: calc(var(--spacing-field-height, 2.25rem) * 0.5);
2147
2147
  height: calc(var(--spacing-field-height, 2.25rem) * 0.5);
2148
2148
  transform: translateY(-50%);
2149
- background-color: color-mix(in oklch, var(--color-field-surface, color-mix(darkslategray 10%, transparent)) 60%, var(--color-field-inverse, darkslategray));
2149
+ background-color: color-mix(in oklch, var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent)) 60%, var(--color-field-inverse, darkslateoklch(43.9% 0 0)));
2150
2150
  border-radius: 200px;
2151
2151
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
2152
2152
  cursor: pointer;
@@ -2154,7 +2154,7 @@
2154
2154
  }
2155
2155
 
2156
2156
  &::-webkit-slider-thumb:hover {
2157
- background-color: color-mix(in oklch, var(--color-field-surface, color-mix(darkslategray 10%, transparent)) 30%, var(--color-field-inverse, darkslategray));
2157
+ background-color: color-mix(in oklch, var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent)) 30%, var(--color-field-inverse, darkslateoklch(43.9% 0 0)));
2158
2158
  }
2159
2159
  }
2160
2160
 
@@ -2169,7 +2169,7 @@
2169
2169
  width: 2ch;
2170
2170
  text-align: center;
2171
2171
  font-size: 0.875rem;
2172
- color: var(--color-content-neutral, gray);
2172
+ color: var(--color-content-neutral, oklch(43.9% 0 0));
2173
2173
  }
2174
2174
  }
2175
2175
 
@@ -2212,7 +2212,7 @@
2212
2212
 
2213
2213
  &:hover::before,
2214
2214
  &:active::before {
2215
- background-color: var(--color-line, color-mix(darkslategray 10%, transparent));
2215
+ background-color: var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent));
2216
2216
  }
2217
2217
  }
2218
2218
 
@@ -2425,7 +2425,7 @@
2425
2425
  height: 100%;
2426
2426
  overflow-y: auto;
2427
2427
  z-index: 200;
2428
- background-color: var(--color-popover-surface, white);
2428
+ background-color: var(--color-popover-surface, oklch(98.5% 0 0));
2429
2429
  transition: opacity .15s ease-in, transform .15s ease-in, display .15s ease-in;
2430
2430
  transition-behavior: allow-discrete;
2431
2431
 
@@ -2481,7 +2481,7 @@
2481
2481
 
2482
2482
  /* Dark mode override */
2483
2483
  .dark :where(nav[popover]) {
2484
- background-color: var(--color-surface-1, whitesmoke)
2484
+ background-color: var(--color-surface-1, oklch(97% 0 0))
2485
2485
  }
2486
2486
  }
2487
2487
 
@@ -2589,23 +2589,23 @@
2589
2589
  width: calc(var(--spacing-field-height, 2.25rem) * 0.65 - 0.125rem * 2);
2590
2590
  height: calc(var(--spacing-field-height, 2.25rem) * 0.65 - 0.125rem * 2);
2591
2591
  border-radius: 50%;
2592
- background-color: color-mix(in oklch, var(--color-field-surface, color-mix(darkslategray 10%, transparent)) 60%, var(--color-field-inverse, darkslategray));
2592
+ background-color: color-mix(in oklch, var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent)) 60%, var(--color-field-inverse, darkslateoklch(43.9% 0 0)));
2593
2593
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
2594
2594
  transition: var(--transition, all .05s ease-in-out)
2595
2595
  }
2596
2596
 
2597
2597
  /* Checked */
2598
2598
  &:checked {
2599
- background-color: var(--color-field-surface, color-mix(darkslategray 10%, transparent));
2599
+ background-color: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent));
2600
2600
 
2601
2601
  /* Marker */
2602
2602
  &::before {
2603
2603
  left: calc(100% - (var(--spacing-field-height, 2.25rem) * 0.65) + 0.125rem);
2604
- background-color: var(--color-field-inverse, darkslategray)
2604
+ background-color: var(--color-field-inverse, darkslateoklch(43.9% 0 0))
2605
2605
  }
2606
2606
 
2607
2607
  &:hover {
2608
- background-color: var(--color-field-surface-hover, color-mix(darkslategray 15%, transparent))
2608
+ background-color: var(--color-field-surface-hover, color-mix(oklch(20.5% 0 0) 15%, transparent))
2609
2609
  }
2610
2610
  }
2611
2611
  }
@@ -2630,8 +2630,8 @@
2630
2630
 
2631
2631
  /* Header row */
2632
2632
  :where(thead, .grid-header > *) {
2633
- background-color: var(--color-surface-1, whitesmoke);
2634
- border-bottom: 1px solid var(--color-line, color-mix(darkslategray 10%, transparent))
2633
+ background-color: var(--color-surface-1, oklch(97% 0 0));
2634
+ border-bottom: 1px solid var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent))
2635
2635
  }
2636
2636
 
2637
2637
  /* Header cell */
@@ -2641,7 +2641,7 @@
2641
2641
 
2642
2642
  /* Row */
2643
2643
  :where(tr, .grid-row > *) {
2644
- border-bottom: 1px solid var(--color-line, color-mix(darkslategray 10%, transparent))
2644
+ border-bottom: 1px solid var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent))
2645
2645
  }
2646
2646
 
2647
2647
  /* Cell */
@@ -2672,7 +2672,7 @@
2672
2672
  /* Striped utility class */
2673
2673
  &.striped {
2674
2674
  :where(tr:nth-child(even), .grid-row:nth-child(even)) {
2675
- background-color: var(--color-surface-1, whitesmoke)
2675
+ background-color: var(--color-surface-1, oklch(97% 0 0))
2676
2676
  }
2677
2677
 
2678
2678
  :where(tr:nth-child(odd), .grid-row:nth-child(odd)) {
@@ -2705,8 +2705,8 @@
2705
2705
  :where(.toast) {
2706
2706
  display: flex;
2707
2707
  max-width: 90vw;
2708
- background-color: var(--color-popover-surface, white);
2709
- border: 1px solid var(--color-line, color-mix(darkslategray 10%, transparent));
2708
+ background-color: var(--color-popover-surface, oklch(98.5% 0 0));
2709
+ border: 1px solid var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent));
2710
2710
  border-radius: calc(var(--radius, 0.5rem) * 2);
2711
2711
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
2712
2712
  overflow: hidden;
@@ -2735,7 +2735,7 @@
2735
2735
  /* Dismiss button */
2736
2736
  :where(.toast-dismiss-button) {
2737
2737
  position: relative;
2738
- border-inline-start: 1px solid color-mix(in oklch, var(--color-content-stark, darkslategray) 20%, transparent);
2738
+ border-inline-start: 1px solid color-mix(in oklch, var(--color-content-stark, darkslateoklch(43.9% 0 0)) 20%, transparent);
2739
2739
  border-radius: 0;
2740
2740
 
2741
2741
  /* Icon */
@@ -2746,7 +2746,7 @@
2746
2746
  left: 50%;
2747
2747
  width: 50%;
2748
2748
  height: 50%;
2749
- background-color: var(--color-field-inverse, darkslategray);
2749
+ background-color: var(--color-field-inverse, darkslateoklch(43.9% 0 0));
2750
2750
  mask-image: var(--icon-toast-dismiss, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E"));
2751
2751
  mask-repeat: no-repeat;
2752
2752
  mask-size: 100% 100%;
@@ -2758,11 +2758,11 @@
2758
2758
 
2759
2759
  /* Brand, accent, positive, negative utility class overrides (see Utilities) */
2760
2760
  :where(.toast.brand, .toast.accent, .toast.positive, .toast.negative) {
2761
- color: var(--color-field-inverse, darkslategray);
2762
- background-color: var(--color-field-surface, color-mix(darkslategray 10%, transparent));
2761
+ color: var(--color-field-inverse, darkslateoklch(43.9% 0 0));
2762
+ background-color: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent));
2763
2763
 
2764
2764
  :where(.toast-dismiss-button) {
2765
- border-inline-start: 1px solid color-mix(in oklch, var(--color-field-inverse, darkslategray) 20%, transparent);
2765
+ border-inline-start: 1px solid color-mix(in oklch, var(--color-field-inverse, darkslateoklch(43.9% 0 0)) 20%, transparent);
2766
2766
  }
2767
2767
  }
2768
2768
 
@@ -2794,8 +2794,8 @@
2794
2794
  margin: var(--spacing-popover-offset, 0.5rem) 0;
2795
2795
  padding: calc(var(--spacing, 0.25rem) * .5) calc(var(--spacing, 0.25rem) * 2);
2796
2796
  font-size: 0.875rem;
2797
- color: var(--color-page, white);
2798
- background-color: var(--color-content-stark, darkslategray);
2797
+ color: var(--color-page, oklch(98.5% 0 0));
2798
+ background-color: var(--color-content-stark, darkslateoklch(43.9% 0 0));
2799
2799
  border: 0 none;
2800
2800
  border-radius: var(--radius, 0.5rem);
2801
2801
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
@@ -2923,7 +2923,7 @@
2923
2923
  .small,
2924
2924
  .caption,
2925
2925
  .label {
2926
- color: var(--color-content-stark, darkslategray);
2926
+ color: var(--color-content-stark, darkslateoklch(43.9% 0 0));
2927
2927
 
2928
2928
  /* Inline links */
2929
2929
  & a:not(.unstyle),
@@ -2983,10 +2983,10 @@
2983
2983
  .h5 {
2984
2984
  font-size: 1rem;
2985
2985
  line-height: 1rem;
2986
- color: var(--color-content-neutral, gray);
2986
+ color: var(--color-content-neutral, oklch(43.9% 0 0));
2987
2987
 
2988
2988
  & a:hover {
2989
- color: var(--color-content-stark, darkslategray)
2989
+ color: var(--color-content-stark, darkslateoklch(43.9% 0 0))
2990
2990
  }
2991
2991
  }
2992
2992
 
@@ -2994,7 +2994,7 @@
2994
2994
  .h6 {
2995
2995
  font-size: 0.8125rem;
2996
2996
  line-height: 1.4;
2997
- color: var(--color-brand-content, goldenrod)
2997
+ color: var(--color-brand-content, oklch(68.1% 0.162 75.834))
2998
2998
  }
2999
2999
 
3000
3000
  /* Paragraphs */
@@ -3008,12 +3008,12 @@
3008
3008
  .link {
3009
3009
  text-align: unset;
3010
3010
  text-decoration: none;
3011
- color: var(--color-content-stark, darkslategray);
3011
+ color: var(--color-content-stark, darkslateoklch(43.9% 0 0));
3012
3012
  cursor: pointer;
3013
3013
  transition: var(--transition, all .05s ease-in-out);
3014
3014
 
3015
3015
  &:hover {
3016
- color: var(--color-content-neutral, gray)
3016
+ color: var(--color-content-neutral, oklch(43.9% 0 0))
3017
3017
  }
3018
3018
 
3019
3019
  &:where(:has([x-icon])) {
@@ -3026,7 +3026,7 @@
3026
3026
  /* Asides */
3027
3027
  :where(aside):not(.unstyle) {
3028
3028
  padding: calc(var(--spacing, 0.25rem) * 4);
3029
- border: 1px solid var(--color-line, color-mix(darkslategray 10%, transparent));
3029
+ border: 1px solid var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent));
3030
3030
  border-radius: var(--radius, 0.5rem)
3031
3031
  }
3032
3032
 
@@ -3042,8 +3042,8 @@
3042
3042
  font-weight: 500;
3043
3043
  font-size: 0.75rem;
3044
3044
  line-height: 1;
3045
- color: var(--color-field-inverse, darkslategray);
3046
- background-color: var(--color-surface-2, gainsboro);
3045
+ color: var(--color-field-inverse, darkslateoklch(43.9% 0 0));
3046
+ background-color: var(--color-surface-2, oklch(92.2% 0 0));
3047
3047
  border-radius: 100px;
3048
3048
 
3049
3049
  /* Solo icons */
@@ -3059,8 +3059,8 @@
3059
3059
  max-width: 100%;
3060
3060
  margin: calc(var(--spacing, 0.25rem) * 4) 0;
3061
3061
  padding: 0 calc(var(--spacing, 0.25rem) * 4);
3062
- color: var(--color-content-stark, darkslategray);
3063
- border-inline-start: 0.25rem solid color-mix(in oklch, var(--color-content-stark, darkslategray) 25%, transparent);
3062
+ color: var(--color-content-stark, darkslateoklch(43.9% 0 0));
3063
+ border-inline-start: 0.25rem solid color-mix(in oklch, var(--color-content-stark, darkslateoklch(43.9% 0 0)) 25%, transparent);
3064
3064
  border-inline-end: none;
3065
3065
 
3066
3066
  & * {
@@ -3077,9 +3077,9 @@
3077
3077
  font-size: 82.5%;
3078
3078
  line-height: 1.4;
3079
3079
  word-wrap: break-word;
3080
- color: var(--color-content-neutral, gray);
3081
- background-color: color-mix(in oklch, var(--color-content-neutral, gray) 10%, transparent);
3082
- border: 1px solid color-mix(in oklch, var(--color-content-subtle, darkgray) 10%, transparent);
3080
+ color: var(--color-content-neutral, oklch(43.9% 0 0));
3081
+ background-color: color-mix(in oklch, var(--color-content-neutral, oklch(43.9% 0 0)) 10%, transparent);
3082
+ border: 1px solid color-mix(in oklch, var(--color-content-subtle, oklch(55.6% 0 0)) 10%, transparent);
3083
3083
  border-radius: var(--radius, 0.5rem);
3084
3084
 
3085
3085
  &[role=button] {
@@ -3091,13 +3091,13 @@
3091
3091
  :where(figcaption):not(.unstyle),
3092
3092
  .caption {
3093
3093
  font-size: 0.8125rem;
3094
- color: var(--color-content-neutral, gray);
3094
+ color: var(--color-content-neutral, oklch(43.9% 0 0));
3095
3095
 
3096
3096
  & a:not([role=button]) {
3097
3097
  color: inherit;
3098
3098
 
3099
3099
  &:hover {
3100
- color: var(--color-content-stark, white)
3100
+ color: var(--color-content-stark, oklch(98.5% 0 0))
3101
3101
  }
3102
3102
  }
3103
3103
  }
@@ -3111,13 +3111,13 @@
3111
3111
  :where(small):not(.unstyle),
3112
3112
  .small {
3113
3113
  font-size: 0.875rem;
3114
- color: var(--color-content-neutral, gray);
3114
+ color: var(--color-content-neutral, oklch(43.9% 0 0));
3115
3115
 
3116
3116
  & a:not([role=button]) {
3117
3117
  color: inherit;
3118
3118
 
3119
3119
  &:hover {
3120
- color: var(--color-content-stark, white)
3120
+ color: var(--color-content-stark, oklch(98.5% 0 0))
3121
3121
  }
3122
3122
  }
3123
3123
  }
@@ -3146,8 +3146,8 @@
3146
3146
  font-weight: 600;
3147
3147
  line-height: 1;
3148
3148
  text-align: center;
3149
- color: var(--color-content-neutral, gray);
3150
- background-color: color-mix(in oklch, var(--color-content-neutral, gray) 10%, transparent);
3149
+ color: var(--color-content-neutral, oklch(43.9% 0 0));
3150
+ background-color: color-mix(in oklch, var(--color-content-neutral, oklch(43.9% 0 0)) 10%, transparent);
3151
3151
  border-radius: calc(var(--radius, 0.5rem) / 1.5);
3152
3152
 
3153
3153
  &:not(:last-of-type) {
@@ -3285,8 +3285,8 @@
3285
3285
  flex-flow: row wrap;
3286
3286
  font-size: 0.8125rem;
3287
3287
  line-height: 1.7;
3288
- background-color: var(--color-page, white);
3289
- border: 1px solid var(--color-line, color-mix(darkslategray 10%, transparent));
3288
+ background-color: var(--color-page, oklch(98.5% 0 0));
3289
+ border: 1px solid var(--color-line, color-mix(oklch(20.5% 0 0) 10%, transparent));
3290
3290
  border-radius: var(--radius, 0.5rem);
3291
3291
  overflow: hidden;
3292
3292
  tab-size: 4;
@@ -3368,7 +3368,7 @@
3368
3368
  background-color: transparent;
3369
3369
 
3370
3370
  &:hover {
3371
- background-color: var(--color-field-surface, color-mix(darkslategray 10%, transparent))
3371
+ background-color: var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent))
3372
3372
  }
3373
3373
  }
3374
3374
 
@@ -3384,21 +3384,21 @@
3384
3384
  :where(.outlined) {
3385
3385
  border-width: 1px;
3386
3386
  border-style: solid;
3387
- border-color: color-mix(in oklch, var(--color-field-surface, color-mix(darkslategray 10%, transparent)) 90%, var(--color-field-inverse, darkslategray))
3387
+ border-color: color-mix(in oklch, var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent)) 90%, var(--color-field-inverse, darkslateoklch(43.9% 0 0)))
3388
3388
  }
3389
3389
 
3390
3390
  /* Dark theme override */
3391
3391
  .dark :where(.outlined) {
3392
- border-color: color-mix(in oklch, var(--color-field-surface, color-mix(darkslategray 10%, transparent)) 80%, var(--color-field-inverse, darkslategray))
3392
+ border-color: color-mix(in oklch, var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent)) 80%, var(--color-field-inverse, darkslateoklch(43.9% 0 0)))
3393
3393
  }
3394
3394
 
3395
3395
  /* Transparent */
3396
3396
  :where(.transparent) {
3397
- color: var(--color-content-neutral, gray);
3397
+ color: var(--color-content-neutral, oklch(43.9% 0 0));
3398
3398
  background-color: transparent !important;
3399
3399
 
3400
3400
  &:hover {
3401
- color: var(--color-content-stark, darkslategray)
3401
+ color: var(--color-content-stark, darkslateoklch(43.9% 0 0))
3402
3402
  }
3403
3403
  }
3404
3404
 
@@ -3522,7 +3522,7 @@
3522
3522
 
3523
3523
  /* Light overlay */
3524
3524
  :where(.overlay-light) {
3525
- color: black !important;
3525
+ color: oklch(14.5% 0 0) !important;
3526
3526
 
3527
3527
  &::after {
3528
3528
  background: oklch(100% 0 0 / 75%)
@@ -3539,9 +3539,9 @@
3539
3539
  margin-top: calc(1rem * 1.4);
3540
3540
  padding: calc(var(--spacing, 0.25rem) * 4);
3541
3541
  border-radius: calc(var(--radius, 0.5rem) * 2);
3542
- color: var(--color-content-stark, darkslategray);
3543
- background-color: color-mix(in oklch, var(--color-field-surface, color-mix(darkslategray 10%, transparent)) 20%, transparent);
3544
- border: 1px solid color-mix(in oklch, var(--color-field-surface, color-mix(darkslategray 10%, transparent)) 15%, transparent);
3542
+ color: var(--color-content-stark, darkslateoklch(43.9% 0 0));
3543
+ background-color: color-mix(in oklch, var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent)) 20%, transparent);
3544
+ border: 1px solid color-mix(in oklch, var(--color-field-surface, color-mix(oklch(20.5% 0 0) 10%, transparent)) 15%, transparent);
3545
3545
 
3546
3546
  /* Auto format asides with icons */
3547
3547
  &:has([x-icon]):not([x-code-group] aside, aside.frame) {
@@ -3560,7 +3560,7 @@
3560
3560
  margin-top: 0;
3561
3561
  padding: calc(var(--spacing, 0.25rem) * 4);
3562
3562
  font-family: var(--font-sans);
3563
- background-color: color-mix(var(--color-surface-1, whitesmoke) 65%, transparent);
3563
+ background-color: color-mix(var(--color-surface-1, oklch(97% 0 0)) 65%, transparent);
3564
3564
  border: 0 none;
3565
3565
  border-radius: 0
3566
3566
  }
@@ -3615,7 +3615,7 @@
3615
3615
  &>h1+p {
3616
3616
  margin-top: 0.625rem;
3617
3617
  font-size: 1.125rem;
3618
- color: var(--color-content-neutral, gray)
3618
+ color: var(--color-content-neutral, oklch(43.9% 0 0))
3619
3619
  }
3620
3620
 
3621
3621
  &>h2 {
@@ -3695,27 +3695,27 @@
3695
3695
  :where(.trailing) {
3696
3696
  display: inline-block;
3697
3697
  margin-inline-start: auto;
3698
- color: var(--color-content-neutral, gray)
3698
+ color: var(--color-content-neutral, oklch(43.9% 0 0))
3699
3699
  }
3700
3700
 
3701
3701
  /* Brand colors */
3702
3702
  :where(.brand) {
3703
- --color-field-surface: var(--color-brand-surface, goldenrod);
3704
- --color-field-surface-hover: var(--color-brand-surface-hover, darkgoldenrod);
3705
- --color-field-inverse: var(--color-brand-inverse, white);
3706
- --color-content-stark: var(--color-brand-content, goldenrod);
3707
- --color-content-neutral: color-mix(in oklch, var(--color-brand-content, goldenrod) 85%, transparent);
3708
- --color-content-subtle: color-mix(in oklch, var(--color-brand-content, goldenrod) 70%, transparent)
3703
+ --color-field-surface: var(--color-brand-surface, oklch(85.2% 0.199 91.936));
3704
+ --color-field-surface-hover: var(--color-brand-surface-hover, oklch(90.5% 0.182 98.111));
3705
+ --color-field-inverse: var(--color-brand-inverse, oklch(98.5% 0 0));
3706
+ --color-content-stark: var(--color-brand-content, oklch(68.1% 0.162 75.834));
3707
+ --color-content-neutral: color-mix(in oklch, var(--color-brand-content, oklch(68.1% 0.162 75.834)) 85%, transparent);
3708
+ --color-content-subtle: color-mix(in oklch, var(--color-brand-content, oklch(68.1% 0.162 75.834)) 70%, transparent)
3709
3709
  }
3710
3710
 
3711
3711
  /* Accent colors */
3712
3712
  :where(.accent) {
3713
- --color-field-surface: var(--color-accent-surface, darkslategray);
3714
- --color-field-surface-hover: var(--color-accent-surface-hover, color-mix(darkslategray 90%, white));
3715
- --color-field-inverse: var(--color-accent-inverse, white);
3716
- --color-content-stark: var(--color-accent-content, darkslategray);
3717
- --color-content-neutral: color-mix(in oklch, var(--color-accent-content, darkslategray) 85%, transparent);
3718
- --color-content-subtle: color-mix(in oklch, var(--color-accent-content, darkslategray) 70%, transparent)
3713
+ --color-field-surface: var(--color-accent-surface, darkslateoklch(43.9% 0 0));
3714
+ --color-field-surface-hover: var(--color-accent-surface-hover, color-mix(oklch(20.5% 0 0) 90%, oklch(98.5% 0 0)));
3715
+ --color-field-inverse: var(--color-accent-inverse, oklch(98.5% 0 0));
3716
+ --color-content-stark: var(--color-accent-content, darkslateoklch(43.9% 0 0));
3717
+ --color-content-neutral: color-mix(in oklch, var(--color-accent-content, darkslateoklch(43.9% 0 0)) 85%, transparent);
3718
+ --color-content-subtle: color-mix(in oklch, var(--color-accent-content, darkslateoklch(43.9% 0 0)) 70%, transparent)
3719
3719
  }
3720
3720
 
3721
3721
  /* Negative colors */
@@ -3740,14 +3740,14 @@
3740
3740
 
3741
3741
  /* Text colors */
3742
3742
  :where(.stark) {
3743
- color: var(--color-content-stark, darkslategray)
3743
+ color: var(--color-content-stark, darkslateoklch(43.9% 0 0))
3744
3744
  }
3745
3745
 
3746
3746
  :where(.neutral) {
3747
- color: var(--color-content-neutral, gray)
3747
+ color: var(--color-content-neutral, oklch(43.9% 0 0))
3748
3748
  }
3749
3749
 
3750
3750
  :where(.subtle) {
3751
- color: var(--color-content-subtle, darkgray)
3751
+ color: var(--color-content-subtle, oklch(55.6% 0 0))
3752
3752
  }
3753
3753
  }