@stackoverflow/stacks 3.0.0-beta.0 → 3.0.0-beta.11

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 (47) hide show
  1. package/dist/css/stacks.css +1579 -1510
  2. package/dist/css/stacks.min.css +1 -1
  3. package/dist/js/stacks.js +0 -14
  4. package/dist/js/stacks.min.js +1 -1
  5. package/lib/atomic/border.less +2 -20
  6. package/lib/atomic/misc.less +1 -1
  7. package/lib/atomic/typography.less +13 -26
  8. package/lib/base/body.less +2 -7
  9. package/lib/components/activity-indicator/activity-indicator.less +17 -29
  10. package/lib/components/anchor/anchor.less +1 -1
  11. package/lib/components/avatar/avatar.less +9 -11
  12. package/lib/components/badge/badge.less +156 -177
  13. package/lib/components/bling/bling.less +130 -0
  14. package/lib/components/block-link/block-link.less +1 -1
  15. package/lib/components/button/button.less +222 -374
  16. package/lib/components/button-group/button-group.less +1 -1
  17. package/lib/components/card/card.less +1 -1
  18. package/lib/components/checkbox_radio/checkbox_radio.less +13 -11
  19. package/lib/components/input-icon/input-icon.less +3 -3
  20. package/lib/components/input_textarea/input_textarea.less +70 -58
  21. package/lib/components/link/link.less +1 -1
  22. package/lib/components/link-preview/link-preview.less +6 -6
  23. package/lib/components/menu/menu.less +100 -21
  24. package/lib/components/modal/modal.less +11 -11
  25. package/lib/components/navigation/navigation.less +61 -37
  26. package/lib/components/notice/notice.less +1 -1
  27. package/lib/components/pagination/pagination.less +44 -43
  28. package/lib/components/popover/popover.less +3 -103
  29. package/lib/components/popover/popover.ts +0 -6
  30. package/lib/components/popover/tooltip.ts +0 -12
  31. package/lib/components/post-summary/post-summary.less +4 -3
  32. package/lib/components/progress-bar/progress-bar.less +13 -12
  33. package/lib/components/prose/prose.less +2 -2
  34. package/lib/components/select/select.less +26 -37
  35. package/lib/components/skeleton/skeleton.less +1 -1
  36. package/lib/components/tag/tag.less +59 -70
  37. package/lib/components/toggle-switch/toggle-switch.less +4 -2
  38. package/lib/components/topbar/topbar.less +3 -3
  39. package/lib/components/uploader/uploader.less +3 -3
  40. package/lib/exports/color-mixins.less +13 -3
  41. package/lib/exports/color-sets.less +256 -216
  42. package/lib/exports/constants-helpers.less +5 -3
  43. package/lib/exports/constants-type.less +25 -25
  44. package/lib/exports/mixins.less +2 -2
  45. package/lib/stacks-static.less +1 -1
  46. package/package.json +1 -1
  47. package/lib/components/award-bling/award-bling.less +0 -31
@@ -411,47 +411,37 @@ fieldset {
411
411
  position: relative;
412
412
  }
413
413
  .s-activity-indicator {
414
- --_ai-translucent: var(--translucent-secondary);
415
- --_ai-bg: var(--theme-secondary-400);
414
+ --_ai-bg: var(--pink-400);
416
415
  --_ai-fc: var(--white);
416
+ --_ai-min-size: var(--su-static16);
417
+ --_ai-p: 0 calc(var(--su-static4) - var(--su-static1));
417
418
  background-color: var(--_ai-bg);
418
- box-shadow: 0 0 0 var(--su-static4) var(--_ai-translucent);
419
419
  color: var(--_ai-fc);
420
- border-radius: 1000px;
421
- display: inline-block;
420
+ min-width: var(--_ai-min-size);
421
+ min-height: var(--_ai-min-size);
422
+ padding: var(--_ai-p);
423
+ border-radius: var(--br-pill);
424
+ display: inline-flex;
422
425
  font-size: var(--fs-fine);
423
- font-weight: 700;
426
+ font-weight: 600;
424
427
  line-height: 1.1;
425
- min-width: var(--su-static12);
426
- min-height: var(--su-static12);
427
- padding: var(--su2) var(--su4);
428
+ text-align: center;
429
+ align-items: center;
430
+ justify-content: center;
428
431
  text-transform: uppercase;
429
432
  }
430
- body.theme-highcontrast .s-activity-indicator {
431
- --_ai-bg: var(--theme-secondary-500);
432
- }
433
433
  .s-activity-indicator.s-activity-indicator__danger {
434
434
  --_ai-bg: var(--red-400);
435
- --_ai-translucent: var(--translucent-error);
436
- }
437
- body.theme-highcontrast .s-activity-indicator.s-activity-indicator__danger {
438
- --_ai-bg: var(--red-500);
439
435
  }
440
436
  .s-activity-indicator.s-activity-indicator__success {
441
437
  --_ai-bg: var(--green-400);
442
- --_ai-translucent: var(--translucent-success);
443
- }
444
- body.theme-highcontrast .s-activity-indicator.s-activity-indicator__success {
445
- --_ai-bg: var(--green-500);
446
438
  }
447
439
  .s-activity-indicator.s-activity-indicator__warning {
448
440
  --_ai-bg: var(--yellow-400);
449
- --_ai-fc: var(--_black-static);
450
- --_ai-translucent: var(--translucent-warning);
451
441
  }
452
- body.theme-highcontrast .s-activity-indicator.s-activity-indicator__warning {
453
- --_ai-bg: var(--yellow-500);
454
- --_ai-fc: var(--white);
442
+ .s-activity-indicator.s-activity-indicator__sm {
443
+ --_ai-min-size: calc(var(--su-static8) + var(--su-static2));
444
+ --_ai-p: 0;
455
445
  }
456
446
  .s-anchors.s-anchors__underlined a:not(.s-link),
457
447
  .s-anchors.s-anchors__underlined .s-btn.s-btn__link {
@@ -469,7 +459,7 @@ body.theme-highcontrast .s-activity-indicator.s-activity-indicator__warning {
469
459
  --_an-a-fc-visited: var(--red-600);
470
460
  }
471
461
  .s-anchors.s-anchors__default {
472
- --_an-a-fc: var(--theme-link-color, var(--theme-secondary-400));
462
+ --_an-a-fc: var(--theme-link-color, var(--theme-secondary));
473
463
  --_an-a-fc-hover: var(--theme-link-color-hover, var(--theme-secondary-500));
474
464
  --_an-a-fc-visited: var(--theme-link-color-visited, var(--purple-500));
475
465
  --_an-a-fc-hover-visited: var(--theme-link-color-hover, var(--purple-600));
@@ -544,11 +534,9 @@ body.theme-highcontrast .s-activity-indicator.s-activity-indicator__warning {
544
534
  .s-avatar {
545
535
  --_av-size: var(--su-static16);
546
536
  --_av-bg: var(--_white-static);
547
- --_av-br: var(--br-sm);
548
537
  --_av-fs-letter: calc(var(--su-static12) - var(--su-static1));
549
538
  --_av-scale-badge: 1;
550
539
  background-color: var(--_av-bg);
551
- border-radius: var(--_av-br);
552
540
  height: var(--_av-size);
553
541
  width: var(--_av-size);
554
542
  background-repeat: no-repeat;
@@ -565,13 +553,8 @@ body.theme-highcontrast .s-avatar {
565
553
  body.theme-highcontrast .s-avatar .s-avatar--letter {
566
554
  color: var(--white);
567
555
  }
568
- .s-avatar.s-avatar__32,
569
- .s-avatar.s-avatar__48 {
570
- --_av-br: var(--br-md);
571
- }
572
556
  .s-avatar.s-avatar__96,
573
557
  .s-avatar.s-avatar__128 {
574
- --_av-br: calc(var(--br-lg) + var(--br-sm));
575
558
  --_av-scale-badge: 3;
576
559
  }
577
560
  .s-avatar.s-avatar__24 {
@@ -591,7 +574,6 @@ body.theme-highcontrast .s-avatar .s-avatar--letter {
591
574
  }
592
575
  .s-avatar.s-avatar__64 {
593
576
  --_av-size: var(--su-static64);
594
- --_av-br: var(--br-lg);
595
577
  --_av-fs-letter: calc(var(--su-static48) - var(--su-static4));
596
578
  --_av-scale-badge: 2.4;
597
579
  }
@@ -611,7 +593,6 @@ body.theme-highcontrast .s-avatar .s-avatar--letter {
611
593
  transform: scale(var(--_av-scale-badge));
612
594
  }
613
595
  .s-avatar .s-avatar--image {
614
- border-radius: var(--_av-br);
615
596
  display: block;
616
597
  height: var(--_av-size);
617
598
  width: var(--_av-size);
@@ -629,238 +610,226 @@ body.theme-highcontrast .s-avatar .s-avatar--letter {
629
610
  -ms-user-select: none;
630
611
  user-select: none;
631
612
  }
632
- .s-award-bling {
633
- --_ab-before-bg: unset;
634
- align-items: center;
635
- color: inherit;
636
- display: flex;
637
- }
638
- .s-award-bling.s-award-bling__gold {
639
- --_ab-before-bg: var(--gold-300);
640
- }
641
- .s-award-bling.s-award-bling__silver {
642
- --_ab-before-bg: var(--silver-300);
643
- }
644
- .s-award-bling.s-award-bling__bronze {
645
- --_ab-before-bg: var(--bronze-300);
646
- }
647
- .s-award-bling:before {
648
- background-color: var(--_ab-before-bg);
649
- border-radius: 100%;
650
- content: "";
651
- margin-right: var(--su4);
652
- height: var(--su8);
653
- width: var(--su8);
613
+ .s-avatar .s-avatar--indicator {
614
+ box-shadow: 0 0 0 var(--su-static2) var(--white);
615
+ bottom: 100%;
616
+ left: 100%;
617
+ position: absolute;
618
+ transform: translate(-50%, 60%);
654
619
  }
655
620
  .s-badge {
656
621
  --_ba-as: unset;
657
- --_ba-bc: var(--bc-medium);
658
- --_ba-bg: var(--black-150);
622
+ --_ba-bc: transparent;
623
+ --_ba-bg: var(--black-100);
659
624
  --_ba-fc: var(--black-500);
660
625
  --_ba-fs: var(--fs-caption);
661
- --_ba-fw: normal;
662
- --_ba-g: 0.3em;
663
- --_ba-lh: 2;
664
626
  --_ba-px: var(--su6);
665
- --_ba-py: 0;
627
+ --_ba-py: var(--su4);
666
628
  --_ba-tt: unset;
667
629
  --_ba-wmn: 0;
630
+ --_ba-bl: 0;
631
+ --_ba-fw: unset;
632
+ --_ba-sq-bg: var(--black-200);
633
+ --_ba-bx-sh-w: var(--su2);
634
+ --_ba-gap: unset;
635
+ --_ba-bx-sh-inset: ;
668
636
  align-self: var(--_ba-as);
669
637
  background-color: var(--_ba-bg);
670
- border: var(--su-static1) solid var(--_ba-bc);
638
+ border-left: var(--_ba-bl) solid var(--_ba-bc);
671
639
  color: var(--_ba-fc);
672
640
  font-size: var(--_ba-fs);
673
- gap: var(--_ba-g);
674
641
  font-weight: var(--_ba-fw);
675
- line-height: var(--_ba-lh);
676
- min-width: var(--_ba-wmn);
642
+ gap: var(--_ba-gap, var(--_ba-px));
677
643
  padding: var(--_ba-py) var(--_ba-px);
644
+ line-height: var(--lh-md);
645
+ min-width: var(--_ba-wmn);
678
646
  text-transform: var(--_ba-tt);
679
647
  align-items: center;
680
- border-radius: var(--br-sm);
681
648
  display: inline-flex;
682
649
  justify-content: center;
683
650
  text-decoration: none;
684
651
  vertical-align: middle;
685
652
  white-space: nowrap;
686
653
  }
687
- body.theme-highcontrast .s-badge__gold,
688
- body.theme-highcontrast .s-badge__silver,
689
- body.theme-highcontrast .s-badge__bronze,
690
- body.theme-highcontrast .s-badge__rep,
691
- body.theme-highcontrast .s-badge__rep-down,
692
- body.theme-highcontrast .s-badge__votes:not(.s-badge__answered),
693
- body.theme-highcontrast .s-badge__admin,
694
- body.theme-highcontrast .s-badge__moderator,
695
- body.theme-highcontrast .s-badge__staff {
696
- --_ba-bc: currentColor;
697
- }
698
- body.theme-highcontrast .s-badge__new {
699
- --_ba-fc: var(--purple-600);
700
- }
701
- .s-badge.s-badge__xs,
702
654
  .s-badge.s-badge__sm {
655
+ --_ba-wmn: calc(var(--su-static16) + var(--su-static2));
703
656
  --_ba-as: flex-start;
704
657
  --_ba-fs: var(--fs-fine);
658
+ --_ba-px: var(--su4);
659
+ --_ba-py: var(--su1);
660
+ --_ba-bx-sh-w: 0px;
661
+ --_ba-bx-sh-inset: inset;
705
662
  }
706
- .s-badge.s-badge__xs {
707
- --_ba-lh: 1.5;
708
- --_ba-px: var(--su2);
709
- --_ba-wmn: calc(var(--su-static16) + var(--su-static2));
663
+ .s-badge.s-badge__lg {
664
+ --_ba-fs: var(--fs-body1);
665
+ --_ba-px: var(--su8);
666
+ --_ba-py: calc(var(--su4) + var(--su1));
667
+ --_ba-bx-sh-w: var(--su4);
710
668
  }
711
- .s-badge.s-badge__sm {
712
- --_ba-lh: 1.8;
713
- --_ba-px: var(--su4);
714
- --_ba-wmn: calc(var(--su-static16) + var(--su-static2));
669
+ .s-badge .s-bling__filled {
670
+ margin: calc(var(--_ba-py) * -1) 0 calc(var(--_ba-py) * -1) calc(var(--_ba-px) * -1);
671
+ }
672
+ .s-badge svg {
673
+ margin: calc(var(--_ba-py) * -1) 0 calc(var(--_ba-py) * -1) calc(var(--su4) * -1);
674
+ }
675
+ .s-badge:has(.s-bling__rep) {
676
+ --_ba-fw: 600;
677
+ --_ba-fc: var(--black-600);
678
+ }
679
+ .s-badge:has(.s-bling) {
680
+ --_ba-bg: var(--black-150);
715
681
  }
716
682
  .s-badge.s-badge__gold,
717
683
  .s-badge.s-badge__silver,
718
684
  .s-badge.s-badge__bronze {
719
- --_ba-fc: var(--black-500);
685
+ --_ba-bl: var(--su4);
686
+ }
687
+ .s-badge.s-badge__gold .s-bling__gold,
688
+ .s-badge.s-badge__silver .s-bling__gold,
689
+ .s-badge.s-badge__bronze .s-bling__gold,
690
+ .s-badge.s-badge__gold .s-bling__silver,
691
+ .s-badge.s-badge__silver .s-bling__silver,
692
+ .s-badge.s-badge__bronze .s-bling__silver,
693
+ .s-badge.s-badge__gold .s-bling__bronze,
694
+ .s-badge.s-badge__silver .s-bling__bronze,
695
+ .s-badge.s-badge__bronze .s-bling__bronze {
696
+ margin-left: -2px;
720
697
  }
721
698
  .s-badge.s-badge__gold {
722
- --_ba-bc: var(--gold-300);
723
- --_ba-bg: var(--gold-100);
699
+ --_ba-bc: var(--yellow-300);
724
700
  }
725
701
  .s-badge.s-badge__silver {
726
- --_ba-bc: var(--silver-300);
727
- --_ba-bg: var(--silver-100);
702
+ --_ba-bc: var(--blue-300);
728
703
  }
729
704
  .s-badge.s-badge__bronze {
730
- --_ba-bc: var(--bronze-300);
731
- --_ba-bg: var(--bronze-100);
732
- }
733
- .s-badge.s-badge__answered,
734
- .s-badge.s-badge__bounty,
735
- .s-badge.s-badge__important {
736
- --_ba-bc: transparent;
737
- --_ba-fc: var(--white);
738
- }
739
- .s-badge.s-badge__rep,
740
- .s-badge.s-badge__rep-down,
741
- .s-badge.s-badge__votes:not(.s-badge__answered) {
742
- --_ba-bg: var(--white);
743
- }
744
- .s-badge.s-badge__answered {
745
- --_ba-bg: var(--green-400);
746
- }
747
- .s-badge.s-badge__bounty {
748
- --_ba-bg: var(--blue-400);
749
- }
750
- .s-badge.s-badge__important {
751
- --_ba-bg: var(--red-400);
752
- }
753
- .s-badge.s-badge__rep {
754
- --_ba-bc: var(--green-300);
755
- --_ba-fc: var(--green-400);
756
- }
757
- .s-badge.s-badge__rep-down {
758
- --_ba-bc: var(--red-300);
759
- --_ba-fc: var(--red-400);
760
- }
761
- .s-badge.s-badge__votes:not(.s-badge__answered) {
762
- --_ba-bc: var(--black-250);
763
- --_ba-fc: var(--black-500);
705
+ --_ba-bc: var(--orange-300);
764
706
  }
765
- .s-badge.s-badge__admin {
766
- --_ba-bc: var(--theme-primary-200);
767
- --_ba-bg: var(--theme-primary-100);
768
- --_ba-fc: var(--theme-primary-500);
707
+ .s-badge.s-badge__admin,
708
+ .s-badge.s-badge__moderator,
709
+ .s-badge.s-badge__staff,
710
+ .s-badge.s-badge__ai,
711
+ .s-badge.s-badge__bot {
712
+ --_ba-bl: var(--su4);
713
+ --_ba-bg: var(--black-150);
714
+ --_ba-fc: var(--black-600);
769
715
  }
770
716
  .s-badge.s-badge__moderator {
771
- --_ba-bc: var(--theme-secondary-300);
772
- --_ba-bg: var(--theme-secondary-200);
773
- --_ba-fc: var(--theme-secondary-600);
774
- --_ba-g: calc(var(--su-static4) - var(--su-static1));
775
- --_ba-before-h: calc(var(--su-static16) - var(--su-static2));
776
- --_ba-before-icon: url("data:image/svg+xml;,%3Csvg width='12' height='14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.528.746c.257-.329.675-.327.93 0l4.42 5.66c.258.329.257.864 0 1.192l-4.42 5.66c-.256.328-.674.327-.93 0l-4.42-5.66c-.257-.329-.256-.865 0-1.192l4.42-5.66z' fill='%23fff'/%3E%3C/svg%3E");
777
- --_ba-before-mt: calc(var(--su-static1) * -1);
778
- --_ba-before-w: var(--su-static12);
779
- }
780
- .s-badge.s-badge__moderator.s-badge__xs {
781
- --_ba-before-h: calc(var(--su-static8) + var(--su-static1));
782
- --_ba-before-icon: url("data:image/svg+xml;,%3Csvg width='7' height='9' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 .246c.3-.329.701-.327 1 0L6.776 4c.3.329.298.672 0 1L4 8.75c-.299.329-.702.327-1 0L.224 5c-.284-.324-.285-.675 0-1L3 .246z' fill='%23fff'/%3E%3C/svg%3E");
783
- --_ba-before-mt: 0;
784
- --_ba-before-w: calc(var(--su-static8) - var(--su-static1));
717
+ --_ba-bc: var(--blue-500);
718
+ --_ba-before-h: calc(var(--su12) + var(--su1));
719
+ --_ba-before-w: calc(var(--su12) - var(--su1));
720
+ --_ba-before-icon: url("data:image/svg+xml;,%3Csvg width='11' height='13' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.528.746c.257-.329.675-.327.93 0l4.42 5.66c.258.329.257.864 0 1.192l-4.42 5.66c-.256.328-.674.327-.93 0l-4.42-5.66c-.257-.329-.256-.865 0-1.192l4.42-5.66z' fill='%23fff'/%3E%3C/svg%3E");
785
721
  }
786
722
  .s-badge.s-badge__moderator.s-badge__sm {
787
- --_ba-g: var(--su-static2);
788
- --_ba-before-h: calc(var(--su-static12) - var(--su-static1));
723
+ --_ba-before-h: calc(var(--su12) - var(--su1));
724
+ --_ba-before-w: calc(var(--su8) + var(--su1));
789
725
  --_ba-before-icon: url("data:image/svg+xml;,%3Csvg width='9' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.55.246c.257-.329.647-.327.903 0l3.36 4.66c.256.329.256.864 0 1.192L4.45 10.75c-.257.329-.644.327-.9 0L.192 6.098c-.256-.329-.256-.865 0-1.192L3.55.246z' fill='%23fff'/%3E%3C/svg%3E");
790
- --_ba-before-mt: 0;
791
- --_ba-before-w: calc(var(--su-static8) + var(--su-static1));
792
726
  }
793
727
  .s-badge.s-badge__moderator:before {
794
728
  height: var(--_ba-before-h);
795
- margin-top: var(--_ba-before-mt);
729
+ margin-top: calc(var(--su1) * -1);
796
730
  width: var(--_ba-before-w);
797
731
  content: "";
798
732
  display: inline-block;
799
- background-color: currentColor;
733
+ background-color: var(--_ba-bc);
800
734
  -webkit-mask: var(--_ba-before-icon) no-repeat center;
801
735
  mask: var(--_ba-before-icon) no-repeat center;
802
736
  -webkit-mask-size: contain;
803
737
  mask-size: contain;
804
738
  }
805
739
  .s-badge.s-badge__staff {
806
- --_ba-bc: var(--orange-300);
807
- --_ba-bg: var(--orange-200);
808
- --_ba-fc: var(--orange-600);
740
+ --_ba-bc: var(--orange-400);
741
+ }
742
+ .s-badge.s-badge__admin {
743
+ --_ba-bc: var(--theme-primary-500, var(--orange-500));
809
744
  }
810
745
  .s-badge.s-badge__ai {
811
- --_ba-bc: var(--_ba-fc);
812
- --_ba-bg: var(--black-050);
813
- --_ba-fc: var(--orange-500);
814
- --_ba-tt: uppercase;
746
+ --_ba-bc: var(--purple-400);
815
747
  }
816
748
  .s-badge.s-badge__bot {
817
- --_ba-bc: var(--black-300);
749
+ --_ba-bc: var(--black-400);
818
750
  }
819
- .s-badge.s-badge__danger.s-badge__filled,
820
- .s-badge.s-badge__muted.s-badge__filled {
821
- --_ba-bc: transparent;
751
+ .s-badge.s-badge__info {
752
+ --_ba-bg: var(--blue-100);
753
+ --_ba-fc: var(--blue-500);
754
+ --_ba-sq-bg: var(--blue-200);
755
+ }
756
+ .s-badge.s-badge__info.s-badge__important {
757
+ --_ba-bg: var(--blue-400);
758
+ --_ba-sq-bg: var(--blue-500);
759
+ }
760
+ .s-badge.s-badge__warning {
761
+ --_ba-bg: var(--yellow-100);
762
+ --_ba-fc: var(--yellow-500);
763
+ --_ba-sq-bg: var(--yellow-200);
764
+ }
765
+ .s-badge.s-badge__warning.s-badge__important {
766
+ --_ba-bg: var(--yellow-400);
767
+ --_ba-sq-bg: var(--yellow-500);
822
768
  }
823
769
  .s-badge.s-badge__danger {
824
- --_ba-bc: var(--red-300);
825
- --_ba-bg: var(--red-200);
826
- --_ba-fc: var(--red-600);
770
+ --_ba-bg: var(--red-100);
771
+ --_ba-fc: var(--red-500);
772
+ --_ba-sq-bg: var(--red-200);
827
773
  }
828
- .s-badge.s-badge__danger.s-badge__filled {
774
+ .s-badge.s-badge__danger.s-badge__important {
829
775
  --_ba-bg: var(--red-400);
830
- --_ba-fc: var(--white);
776
+ --_ba-sq-bg: var(--red-500);
831
777
  }
832
- .s-badge.s-badge__info {
833
- --_ba-bc: var(--blue-300);
834
- --_ba-bg: var(--blue-200);
835
- --_ba-fc: var(--blue-600);
778
+ .s-badge.s-badge__critical {
779
+ --_ba-bg: var(--red-200);
780
+ --_ba-fc: var(--red-600);
781
+ --_ba-sq-bg: var(--red-300);
836
782
  }
837
- .s-badge.s-badge__warning {
838
- --_ba-bc: var(--yellow-300);
839
- --_ba-bg: var(--yellow-200);
840
- --_ba-fc: var(--yellow-600);
783
+ .s-badge.s-badge__critical.s-badge__important {
784
+ --_ba-bg: var(--red-500);
785
+ --_ba-sq-bg: var(--red-600);
841
786
  }
842
- .s-badge.s-badge__muted {
843
- --_ba-bc: var(--black-300);
787
+ .s-badge.s-badge__tonal {
844
788
  --_ba-bg: var(--black-200);
845
- --_ba-fc: var(--black-500);
789
+ --_ba-fc: var(--black-600);
790
+ --_ba-sq-bg: var(--black-300);
846
791
  }
847
- .s-badge.s-badge__muted.s-badge__filled {
792
+ .s-badge.s-badge__tonal.s-badge__important {
848
793
  --_ba-bg: var(--black-500);
849
- --_ba-fc: var(--white);
794
+ --_ba-sq-bg: var(--black-600);
795
+ }
796
+ .s-badge.s-badge__success {
797
+ --_ba-bg: var(--green-100);
798
+ --_ba-fc: var(--green-600);
799
+ --_ba-sq-bg: var(--green-200);
850
800
  }
851
- .s-badge.s-badge__new {
852
- --_ba-bc: var(--_ba-bg);
801
+ .s-badge.s-badge__success.s-badge__important {
802
+ --_ba-bg: var(--green-500);
803
+ --_ba-sq-bg: var(--green-600);
804
+ }
805
+ .s-badge.s-badge__featured {
853
806
  --_ba-bg: var(--purple-100);
854
- --_ba-fc: var(--purple-400);
855
- --_ba-fw: bold;
856
- --_ba-tt: uppercase;
807
+ --_ba-fc: var(--purple-500);
808
+ --_ba-sq-bg: var(--purple-200);
857
809
  }
858
- .s-badge--image,
859
- .s-badge .s-badge--image {
860
- align-self: center;
861
- display: inline-flex;
862
- margin-right: var(--su1);
863
- margin-left: calc((var(--su4) + var(--su1)) * -1);
810
+ .s-badge.s-badge__featured.s-badge__important {
811
+ --_ba-bg: var(--purple-400);
812
+ --_ba-sq-bg: var(--purple-500);
813
+ }
814
+ .s-badge.s-badge__squared {
815
+ --_ba_box-shadow: 0 0 0 var(--_ba-bx-sh-w) var(--_ba-sq-bg);
816
+ }
817
+ .s-badge.s-badge__squared svg {
818
+ background-color: var(--_ba-sq-bg);
819
+ box-shadow: var(--_ba_box-shadow);
820
+ margin-right: var(--_ba-bx-sh-w);
821
+ }
822
+ body.theme-highcontrast .s-badge.s-badge__squared:not(.s-badge__important) {
823
+ --_ba_box-shadow: 0 0 0 calc(var(--_ba-bx-sh-w) - var(--su1)) var(--_ba-sq-bg), 0 0 0 max(var(--su1), var(--_ba-bx-sh-w)) currentcolor var(--_ba-bx-sh-inset);
824
+ }
825
+ .s-badge:not(.s-badge__squared):has(> svg) {
826
+ --_ba-gap: calc(var(--_ba-px) - var(--su2));
827
+ }
828
+ .s-badge.s-badge__important {
829
+ --_ba-bg: var(--black-400);
830
+ --_ba-sq-bg: var(--black-500);
831
+ --_ba-fw: 600;
832
+ --_ba-fc: var(--black-050);
864
833
  }
865
834
  a.s-badge:hover {
866
835
  text-decoration: none;
@@ -1043,7 +1012,7 @@ body.theme-highcontrast .s-banner__warning.s-banner__important {
1043
1012
  background-color: var(--_no-code-bg);
1044
1013
  color: var(--_no-code-fc);
1045
1014
  outline: var(--su-static1) solid var(--_no-code-bc);
1046
- border-radius: var(--br-sm);
1015
+ border-radius: var(--br-md);
1047
1016
  padding-left: var(--su2);
1048
1017
  padding-right: var(--su2);
1049
1018
  }
@@ -1082,6 +1051,139 @@ body.theme-highcontrast .s-banner__warning.s-banner__important {
1082
1051
  position: relative;
1083
1052
  width: 100%;
1084
1053
  }
1054
+ .s-bling {
1055
+ --_bl-bg: unset;
1056
+ --_bl-size: calc(var(--su8) + var(--su2));
1057
+ --_bl-icon: url("data:image/svg+xml;utf8,<svg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'><circle cx='4' cy='4' r='4'/></svg>");
1058
+ --_bl-icon-bg: var(--black-500);
1059
+ --_bl-icon-size: var(--su8);
1060
+ background-color: var(--_bl-bg);
1061
+ height: var(--_bl-size);
1062
+ width: var(--_bl-size);
1063
+ align-items: center;
1064
+ color: inherit;
1065
+ display: inline-flex;
1066
+ justify-content: center;
1067
+ }
1068
+ .s-bling.s-bling__activity {
1069
+ --_bl-icon-bg: var(--pink-400);
1070
+ }
1071
+ .s-bling.s-bling__gold {
1072
+ --_bl-icon-bg: var(--yellow-400);
1073
+ --_bl-icon: url("data:image/svg+xml;,<svg viewBox='0 0 8 9' xmlns='http://www.w3.org/2000/svg'><path d='M3.89709 0L7.79421 2.25V6.75L3.89709 9L-1.95503e-05 6.75V2.25L3.89709 0Z'/></svg>");
1074
+ }
1075
+ .s-bling.s-bling__silver {
1076
+ --_bl-icon-bg: var(--blue-400);
1077
+ --_bl-icon: url("data:image/svg+xml;,<svg viewBox='0 0 9 9' xmlns='http://www.w3.org/2000/svg'><path d='M4.27979 0L8.55954 3.10942L6.92482 8.14058H1.63475L3.09944e-05 3.10942L4.27979 0Z'/></svg>");
1078
+ }
1079
+ .s-bling.s-bling__bronze {
1080
+ --_bl-icon-bg: var(--orange-400);
1081
+ --_bl-icon: url("data:image/svg+xml;,<svg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'><rect width='8' height='8'/></svg>");
1082
+ }
1083
+ .s-bling.s-bling__filled {
1084
+ --_bl-bg: var(--black-225);
1085
+ --_bl-icon-bg: var(--black-600);
1086
+ --_bl-size: var(--su24);
1087
+ }
1088
+ .s-bling.s-bling__filled.s-bling__rep {
1089
+ --_bl-bg: var(--black-300);
1090
+ }
1091
+ @media (prefers-color-scheme: dark) {
1092
+ body.theme-highcontrast.theme-system .s-bling.s-bling__filled.s-bling__rep {
1093
+ --_bl-icon-bg: var(--black-050);
1094
+ }
1095
+ }
1096
+ body.theme-highcontrast.theme-dark .s-bling.s-bling__filled.s-bling__rep {
1097
+ --_bl-icon-bg: var(--black-050);
1098
+ }
1099
+ .s-bling.s-bling__filled.s-bling__activity {
1100
+ --_bl-bg: var(--pink-300);
1101
+ --_bl-icon-bg: var(--pink-600);
1102
+ }
1103
+ body.theme-highcontrast .s-bling.s-bling__filled.s-bling__activity {
1104
+ --_bl-icon-bg: var(--black-050);
1105
+ }
1106
+ @media (prefers-color-scheme: dark) {
1107
+ body.theme-highcontrast.theme-system .s-bling.s-bling__filled.s-bling__activity {
1108
+ --_bl-bg: var(--pink-400);
1109
+ }
1110
+ }
1111
+ body.theme-highcontrast.theme-dark .s-bling.s-bling__filled.s-bling__activity {
1112
+ --_bl-bg: var(--pink-400);
1113
+ }
1114
+ .s-bling.s-bling__filled.s-bling__gold {
1115
+ --_bl-bg: var(--yellow-300);
1116
+ --_bl-icon-bg: var(--yellow-600);
1117
+ }
1118
+ body.theme-highcontrast .s-bling.s-bling__filled.s-bling__gold {
1119
+ --_bl-icon-bg: var(--black-050);
1120
+ }
1121
+ @media (prefers-color-scheme: dark) {
1122
+ body.theme-highcontrast.theme-system .s-bling.s-bling__filled.s-bling__gold {
1123
+ --_bl-bg: var(--yellow-400);
1124
+ }
1125
+ }
1126
+ body.theme-highcontrast.theme-dark .s-bling.s-bling__filled.s-bling__gold {
1127
+ --_bl-bg: var(--yellow-400);
1128
+ }
1129
+ .s-bling.s-bling__filled.s-bling__silver {
1130
+ --_bl-bg: var(--blue-300);
1131
+ --_bl-icon-bg: var(--blue-600);
1132
+ }
1133
+ body.theme-highcontrast .s-bling.s-bling__filled.s-bling__silver {
1134
+ --_bl-icon-bg: var(--black-050);
1135
+ }
1136
+ @media (prefers-color-scheme: dark) {
1137
+ body.theme-highcontrast.theme-system .s-bling.s-bling__filled.s-bling__silver {
1138
+ --_bl-bg: var(--blue-400);
1139
+ }
1140
+ }
1141
+ body.theme-highcontrast.theme-dark .s-bling.s-bling__filled.s-bling__silver {
1142
+ --_bl-bg: var(--blue-400);
1143
+ }
1144
+ .s-bling.s-bling__filled.s-bling__bronze {
1145
+ --_bl-bg: var(--orange-300);
1146
+ --_bl-icon-bg: var(--orange-600);
1147
+ }
1148
+ body.theme-highcontrast .s-bling.s-bling__filled.s-bling__bronze {
1149
+ --_bl-icon-bg: var(--black-050);
1150
+ }
1151
+ @media (prefers-color-scheme: dark) {
1152
+ body.theme-highcontrast.theme-system .s-bling.s-bling__filled.s-bling__bronze {
1153
+ --_bl-bg: var(--orange-400);
1154
+ }
1155
+ }
1156
+ body.theme-highcontrast.theme-dark .s-bling.s-bling__filled.s-bling__bronze {
1157
+ --_bl-bg: var(--orange-400);
1158
+ }
1159
+ .s-bling.s-bling__sm:not(.s-bling__filled) {
1160
+ --_bl-size: var(--su8);
1161
+ }
1162
+ .s-bling.s-bling__sm.s-bling__filled {
1163
+ --_bl-size: var(--su16);
1164
+ }
1165
+ .s-bling.s-bling__lg.s-bling__filled {
1166
+ --_bl-size: calc(var(--su24) + var(--su4));
1167
+ }
1168
+ .s-bling.s-bling__sm {
1169
+ --_bl-icon-size: var(--su6);
1170
+ }
1171
+ .s-bling.s-bling__sm.s-bling__gold,
1172
+ .s-bling.s-bling__sm.s-bling__silver {
1173
+ --_bl-icon-size: calc(var(--su6) + var(--su1));
1174
+ }
1175
+ .s-bling.s-bling__gold:not(.s-bling__sm),
1176
+ .s-bling.s-bling__silver:not(.s-bling__sm) {
1177
+ --_bl-icon-size: calc(var(--su8) + var(--su1));
1178
+ }
1179
+ .s-bling:before {
1180
+ -webkit-mask: var(--_bl-icon) no-repeat center;
1181
+ mask: var(--_bl-icon) no-repeat center;
1182
+ background-color: var(--_bl-icon-bg);
1183
+ content: "";
1184
+ height: var(--_bl-icon-size);
1185
+ width: var(--_bl-icon-size);
1186
+ }
1085
1187
  a.s-block-link,
1086
1188
  .s-block-link {
1087
1189
  --_bl-bs-color: var(--theme-primary);
@@ -1168,7 +1270,7 @@ a.s-block-link:focus-visible,
1168
1270
  .s-block-link:focus-visible,
1169
1271
  a.s-block-link.focus-inset,
1170
1272
  .s-block-link.focus-inset {
1171
- border-radius: var(--br-sm);
1273
+ border-radius: var(--br-md);
1172
1274
  }
1173
1275
  .s-breadcrumbs {
1174
1276
  --_br-divider-px: var(--su4);
@@ -1206,136 +1308,141 @@ body.theme-highcontrast .s-breadcrumbs .s-breadcrumbs--divider {
1206
1308
  }
1207
1309
  .s-btn {
1208
1310
  --_bu-baw: var(--su-static1);
1209
- --_bu-bc: transparent;
1210
- --_bu-br: var(--br-md);
1211
- --_bu-fc: var(--theme-button-color, var(--theme-secondary-400));
1311
+ --_bu-br: var(--br-pill);
1212
1312
  --_bu-fs: var(--fs-body1);
1213
- --_bu-p: 0.8em;
1214
- --_bu-bc-active: var(--_bu-bc);
1215
- --_bu-bg-active: var(--theme-button-active-background-color, var(--theme-secondary-300));
1216
- --_bu-fc-active: var(--theme-button-hover-color, var(--theme-secondary-500));
1217
- --_bu-bc-hover: var(--_bu-bc);
1218
- --_bu-bg-hover: var(--theme-button-hover-background-color, var(--theme-secondary-200));
1219
- --_bu-fc-hover: var(--theme-button-hover-color, var(--theme-secondary-500));
1220
- --_bu-bg-selected: var(--theme-button-selected-background-color, var(--theme-secondary-300));
1221
- --_bu-fc-selected: var(--theme-button-selected-color, var(--theme-secondary-600));
1222
- --_bu-filled-bc: transparent;
1223
- --_bu-filled-bg: var(--theme-button-primary-background-color, var(--theme-secondary-400));
1224
- --_bu-filled-fc: var(--theme-button-primary-color, var(--white));
1225
- --_bu-filled-bc-selected: transparent;
1226
- --_bu-filled-bg-selected: var(--theme-button-primary-selected-background-color, var(--theme-secondary-500));
1227
- --_bu-filled-fc-selected: var(--theme-button-primary-selected-color, var(--white));
1228
- --_bu-filled-bc-active: var(--_bu-filled-bc);
1229
- --_bu-filled-bg-active: var(--theme-button-primary-active-background-color, var(--theme-secondary-600));
1230
- --_bu-filled-fc-active: var(--theme-button-primary-hover-color, var(--white));
1231
- --_bu-filled-bc-hover: var(--_bu-filled-bc);
1232
- --_bu-filled-bg-hover: var(--theme-button-primary-hover-background-color, var(--theme-secondary-500));
1233
- --_bu-filled-fc-hover: var(--theme-button-primary-hover-color, var(--white));
1234
- --_bu-outlined-bc: var(--theme-button-outlined-border-color, var(--theme-secondary-400));
1235
- --_bu-outlined-bg: var(--theme-button-outlined-background-color);
1236
- --_bg-outlined-fc: var(--theme-button-outlined-color, var(--theme-secondary-400));
1237
- --_bu-outlined-bc-selected: var(--theme-button-outlined-selected-border-color, var(--theme-secondary-400));
1238
- --_bu-outlined-bg-selected: var(--theme-button-selected-background-color, var(--theme-secondary-300));
1239
- --_bu-outlined-fc-selected: var(--theme-button-selected-color, var(--theme-secondary-600));
1240
- --_bu-badge-o: 0.5;
1313
+ --_bu-lh: var(--lh-base);
1314
+ --_bu-g: var(--su8);
1315
+ --_bu-px: var(--su16);
1316
+ --_bu-py: calc(var(--su8) + var(--su2));
1241
1317
  --_bu-dropdown-bw: var(--su-static4);
1242
- --_bu-number-fc: var(--white);
1243
- --_bu-number-fc-filled: var(--theme-button-primary-number-color, var(--theme-secondary-600));
1244
- --_bu-number-fc-selected: var(--white);
1245
- background-color: var(--_bu-bg, inherit);
1246
- border: var(--_bu-baw) solid var(--_bu-bc);
1247
- border-radius: var(--_bu-br);
1248
- box-shadow: none;
1318
+ background: linear-gradient(0deg, var(--_bu-bg-selected-overlay, var(--_bu-bg)) 50%, var(--_bu-bg) 50%) padding-box, linear-gradient(0deg, var(--_bu-bg-selected-overlay, var(--_bu-bg)) 50%, var(--_bu-bg) 50%) border-box;
1319
+ border: var(--_bu-baw) solid var(--_bu-bc, transparent);
1249
1320
  color: var(--_bu-fc);
1250
1321
  font-size: var(--_bu-fs);
1251
- padding: var(--_bu-py, var(--_bu-p)) var(--_bu-px, var(--_bu-p));
1322
+ gap: var(--_bu-g);
1323
+ padding: var(--_bu-py) var(--_bu-px);
1324
+ align-items: center;
1325
+ align-self: center;
1326
+ border-radius: var(--_bu-br);
1327
+ border-style: solid;
1252
1328
  cursor: pointer;
1253
- display: inline-block;
1329
+ display: inline-flex;
1254
1330
  font-family: inherit;
1255
- font-weight: normal;
1256
- line-height: var(--lh-sm);
1331
+ font-weight: 600;
1332
+ justify-content: center;
1333
+ line-height: var(--_bu-lh);
1257
1334
  position: relative;
1258
- outline: none;
1259
1335
  text-align: center;
1260
1336
  text-decoration: none;
1261
1337
  user-select: none;
1262
1338
  }
1263
- body.theme-highcontrast .s-btn {
1264
- --_bu-bc: currentColor;
1265
- --_bu-outlined-bc: var(--_bu-bc);
1266
- --_bu-fc-selected: var(--white);
1267
- --_bu-outlined-fc-selected: var(--white);
1268
- --_bu-badge-o: 0.8;
1269
- --_bu-number-fc-selected: var(--theme-button-primary-number-color, var(--theme-secondary-600));
1339
+ .s-btn:not(.s-btn__danger):not(.s-btn__featured):not(.s-btn__tonal):not(.s-btn__link):not(.s-btn__unset):not(.s-btn__facebook):not(.s-btn__github):not(.s-btn__google) {
1340
+ --_bu-bg: var(--theme-button-color, var(--theme-secondary));
1341
+ --_bu-bg-disabled: var(--theme-secondary-300);
1342
+ --_bu-bg-hover: var(--theme-button-hover-background-color, var(--theme-secondary-500));
1343
+ --_bu-fc: var(--white);
1344
+ --_bu-fc-hover: var(--theme-button-hover-color, var(--white));
1345
+ --_bu-badge-bg: var(--theme-secondary-200);
1346
+ --_bu-badge-fc: var(--theme-secondary-600);
1347
+ --_bu-badge-bg-disabled: var(--theme-secondary-200);
1348
+ --_bu-badge-fc-disabled: var(--theme-secondary-300);
1349
+ }
1350
+ .s-btn:not(.s-btn__danger):not(.s-btn__featured):not(.s-btn__tonal):not(.s-btn__link):not(.s-btn__unset):not(.s-btn__facebook):not(.s-btn__github):not(.s-btn__google).s-btn__clear {
1351
+ --_bu-bg: transparent;
1352
+ --_bu-bg-disabled: var(--_bu-bg);
1353
+ --_bu-bg-hover: var(--theme-secondary-100);
1354
+ --_bu-bg-selected: var(--theme-secondary-100);
1355
+ --_bu-fc: var(--theme-secondary-600);
1356
+ --_bu-fc-disabled: var(--theme-secondary-300);
1357
+ --_bu-fc-hover: var(--_bu-fc);
1358
+ --_bu-badge-bg: var(--theme-secondary-500);
1359
+ --_bu-badge-fc: var(--white);
1360
+ --_bu-badge-bg-disabled: var(--theme-secondary-300);
1361
+ --_bu-badge-fc-disabled: var(--white);
1270
1362
  }
1271
- fieldset[disabled] .s-btn,
1272
- .s-btn[disabled],
1273
- .s-btn[aria-disabled="true"] {
1274
- opacity: var(--_o-disabled-static);
1275
- pointer-events: none;
1276
- text-decoration: none;
1363
+ body.theme-highcontrast .s-btn:not(.s-btn__danger):not(.s-btn__featured):not(.s-btn__tonal):not(.s-btn__link):not(.s-btn__unset):not(.s-btn__facebook):not(.s-btn__github):not(.s-btn__google).s-btn__clear {
1364
+ --_bu-bc: var(--theme-secondary-600);
1277
1365
  }
1278
- button .s-btn,
1279
- button[type="submit"] .s-btn,
1280
- button[type="reset"] .s-btn {
1281
- -webkit-appearance: button;
1366
+ .s-btn.s-btn__danger {
1367
+ --_bu-bg: var(--red-400);
1368
+ --_bu-fc: var(--white);
1369
+ --_bu-bg-disabled: var(--red-200);
1370
+ --_bu-bg-hover: var(--red-500);
1371
+ --_bu-bg-selected: var(--red-500);
1372
+ --_bu-fc-selected: var(--_bu-fc);
1373
+ --_bu-badge-bg: var(--red-100);
1374
+ --_bu-badge-fc: var(--red-400);
1375
+ --_bu-badge-bg-disabled: var(--white);
1376
+ --_bu-badge-fc-disabled: var(--red-200);
1377
+ }
1378
+ .s-btn.s-btn__danger.s-btn__clear {
1379
+ --_bu-bg: transparent;
1380
+ --_bu-bg-disabled: var(--_bu-bg);
1381
+ --_bu-bg-hover: var(--red-100);
1382
+ --_bu-bg-selected: var(--red-100);
1383
+ --_bu-fc: var(--red-400);
1384
+ --_bu-fc-disabled: var(--red-200);
1385
+ --_bu-fc-hover: var(--red-500);
1386
+ --_bu-fc-selected: var(--red-500);
1387
+ --_bu-badge-bg: var(--red-400);
1388
+ --_bu-badge-bg-selected: var(--red-400);
1389
+ --_bu-badge-fc: var(--red-100);
1390
+ --_bu-badge-bg-disabled: var(--red-200);
1391
+ --_bu-badge-fc-disabled: var(--white);
1282
1392
  }
1283
- .s-btn.grid {
1284
- display: flex;
1393
+ body.theme-highcontrast .s-btn.s-btn__danger.s-btn__clear {
1394
+ --_bu-bc: var(--red-600);
1395
+ --_bu-bc-disabled: var(--red-300);
1285
1396
  }
1286
- .s-btn.is-loading {
1287
- padding-left: 2.2em;
1397
+ .s-btn.s-btn__featured {
1398
+ --_bu-bg: var(--purple-400);
1399
+ --_bu-bg-disabled: var(--purple-200);
1400
+ --_bu-bg-hover: var(--purple-500);
1401
+ --_bu-bg-selected: var(--purple-500);
1402
+ --_bu-fc: var(--white);
1403
+ --_bu-fc-selected: var(--_bu-fc);
1404
+ --_bu-badge-bg: var(--purple-100);
1405
+ --_bu-badge-fc: var(--purple-400);
1406
+ --_bu-badge-bg-disabled: var(--white);
1407
+ --_bu-badge-fc-disabled: var(--purple-200);
1408
+ }
1409
+ .s-btn.s-btn__tonal {
1410
+ --_bu-bg: var(--black-150);
1411
+ --_bu-bg-disabled: var(--black-100);
1412
+ --_bu-bg-hover: var(--black-200);
1413
+ --_bu-fc: var(--black);
1414
+ --_bu-fc-disabled: var(--black-300);
1415
+ --_bu-fc-selected: var(--_bu-fc);
1416
+ --_bu-badge-bg: var(--black-500);
1417
+ --_bu-badge-fc: var(--white);
1418
+ --_bu-badge-bg-disabled: var(--black-300);
1419
+ --_bu-badge-fc-disabled: var(--white);
1420
+ }
1421
+ body.theme-highcontrast .s-btn.s-btn__tonal {
1422
+ --_bu-bc: var(--black-300);
1288
1423
  }
1289
- .s-btn.is-loading .svg-icon:first-child {
1290
- margin-left: calc((var(--su-static24) - var(--su-static1)) * -1);
1291
- opacity: 0;
1424
+ .s-btn.s-btn__facebook {
1425
+ --_bu-bg: #1877F2;
1426
+ --_bu-bg-hover: #0d6ae4;
1427
+ --_bu-fc: #fff;
1428
+ --_bu-fc-hover: var(--_bu-fc);
1292
1429
  }
1293
- .s-btn.is-selected,
1294
- .s-btn--radio:checked + .s-btn {
1295
- background-color: var(--_bu-bg-selected);
1296
- border-color: var(--_bu-bc-selected, transparent);
1297
- color: var(--_bu-fc-selected);
1298
- }
1299
- .s-btn.is-selected .s-btn--number,
1300
- .s-btn--radio:checked + .s-btn .s-btn--number {
1301
- color: var(--_bu-number-fc-selected);
1302
- }
1303
- .s-btn.is-selected.s-btn__filled,
1304
- .s-btn--radio:checked + .s-btn.s-btn__filled {
1305
- border-color: var(--_bu-filled-bc-selected);
1306
- background-color: var(--_bu-filled-bg-selected);
1307
- color: var(--_bu-filled-fc-selected);
1308
- }
1309
- .s-btn.is-selected.s-btn__outlined,
1310
- .s-btn--radio:checked + .s-btn.s-btn__outlined {
1311
- border-color: var(--_bu-outlined-bc-selected);
1312
- background-color: var(--_bu-outlined-bg-selected);
1313
- color: var(--_bu-outlined-fc-selected);
1314
- }
1315
- body.theme-highcontrast .s-btn.is-selected.s-btn__outlined.s-btn__muted,
1316
- body.theme-highcontrast .s-btn--radio:checked + .s-btn.s-btn__outlined.s-btn__muted {
1317
- --_bu-outlined-bc-selected: var(--_bu-filled-bc-selected);
1318
- --_bu-outlined-bg-selected: var(--_bu-filled-bg-selected);
1319
- --_bu-outlined-fc-selected: var(--_bu-filled-fc-selected);
1320
- --_bu-number-fc-selected: var(--_bu-filled-bg-selected);
1321
- }
1322
- .s-btn.s-btn__filled {
1323
- border-color: var(--_bu-filled-bc);
1324
- background-color: var(--_bu-filled-bg);
1325
- color: var(--_bu-filled-fc);
1326
- }
1327
- .s-btn.s-btn__filled .s-btn--number {
1328
- color: var(--_bu-number-fc-filled);
1329
- }
1330
- .s-btn.s-btn__outlined {
1331
- border-color: var(--_bu-outlined-bc);
1332
- background-color: var(--_bu-outlined-bg, inherit);
1430
+ .s-btn.s-btn__google {
1431
+ --_bu-bg: var(--black-150);
1432
+ --_bu-bg-hover: var(--black-200);
1433
+ --_bu-fc: var(--black-600);
1434
+ }
1435
+ .s-btn.s-btn__github {
1436
+ --_bu-bg: var(--black-600);
1437
+ --_bu-bg-hover: var(--black-500);
1438
+ --_bu-fc: var(--white);
1333
1439
  }
1334
1440
  .s-btn.s-btn__link,
1335
1441
  .s-btn.s-btn__unset {
1336
1442
  --_bu-baw: 0;
1337
1443
  --_bu-br: 0;
1338
- --_bu-p: 0;
1444
+ --_bu-px: 0;
1445
+ --_bu-py: 0;
1339
1446
  }
1340
1447
  .s-btn.s-btn__link:focus,
1341
1448
  .s-btn.s-btn__unset:focus,
@@ -1344,7 +1451,7 @@ body.theme-highcontrast .s-btn--radio:checked + .s-btn.s-btn__outlined.s-btn__mu
1344
1451
  outline-style: auto;
1345
1452
  }
1346
1453
  .s-btn.s-btn__link {
1347
- --_li-fc: var(--theme-link-color, var(--theme-secondary-400));
1454
+ --_li-fc: var(--theme-link-color, var(--theme-secondary));
1348
1455
  --_li-fc-hover: var(--theme-link-color-hover, var(--theme-secondary-500));
1349
1456
  --_li-fc-visited: var(--theme-link-color-visited, var(--purple-500));
1350
1457
  --_li-fc-hover-visited: var(--theme-link-color-visited, var(--purple-600));
@@ -1460,188 +1567,70 @@ p .s-btn.s-btn__link {
1460
1567
  .s-btn.s-btn__unset:hover,
1461
1568
  .s-btn.s-btn__unset:active,
1462
1569
  .s-btn.s-btn__unset:focus {
1570
+ --_bu-baw: 0;
1463
1571
  --_bu-bg: none;
1572
+ --_bu-br: unset;
1464
1573
  --_bu-fc: unset;
1574
+ --_bu-fs: inherit;
1575
+ --_bu-g: unset;
1576
+ --_bu-lh: inherit;
1465
1577
  cursor: default;
1466
1578
  font: unset;
1467
1579
  user-select: auto;
1468
1580
  }
1469
- .s-btn.s-btn__dropdown {
1470
- padding-right: calc(var(--_bu-px, var(--_bu-p)) * 2.5);
1471
- }
1472
1581
  .s-btn.s-btn__dropdown:after {
1473
1582
  border-color: currentColor transparent;
1474
1583
  border-style: solid;
1475
1584
  border-width: var(--_bu-dropdown-bw);
1476
1585
  border-bottom-width: 0;
1477
1586
  content: "";
1478
- pointer-events: none;
1479
- position: absolute;
1480
- right: var(--_bu-px, var(--_bu-p));
1481
- top: calc(50% - var(--su-static2));
1482
- z-index: var(--zi-active);
1483
- }
1484
- .s-btn.s-btn__icon .svg-icon {
1485
- vertical-align: baseline;
1486
- margin-top: -0.3em;
1487
- margin-bottom: -0.3em;
1488
- transition: opacity 200ms var(--te-smooth);
1489
- }
1490
- .s-btn.s-btn__xs {
1491
- --_bu-fs: var(--fs-fine);
1492
- --_bu-dropdown-bw: calc(var(--su-static4) - var(--su-static1));
1493
- --_bu-p: 0.6em;
1494
- }
1495
- .s-btn.s-btn__sm {
1496
- --_bu-fs: var(--fs-caption);
1497
- }
1498
- .s-btn.s-btn__md {
1499
- --_bu-fs: var(--fs-body3);
1500
- --_bu-br: calc(var(--br-sm) + var(--su-static1));
1501
- --_bu-p: 0.7em;
1502
1587
  }
1503
- body.theme-highcontrast .s-btn.s-btn__danger,
1504
- body.theme-highcontrast .s-btn.s-btn__featured,
1505
- body.theme-highcontrast .s-btn.s-btn__muted {
1506
- --_bu-filled-bc: transparent;
1507
- }
1508
- .s-btn.s-btn__danger {
1509
- --_bu-bg-active: var(--red-300);
1510
- --_bu-bg-hover: var(--red-200);
1511
- --_bu-bg-selected: var(--red-300);
1512
- --_bu-fc: var(--red-500);
1513
- --_bu-fc-active: var(--_bu-fc);
1514
- --_bu-fc-hover: var(--red-500);
1515
- --_bu-fc-selected: var(--red-600);
1516
- --_bu-filled-bc: transparent;
1517
- --_bu-filled-bc-selected: var(--_bu-filled-bc);
1518
- --_bu-filled-bg: var(--red-400);
1519
- --_bu-filled-bg-active: var(--red-500);
1520
- --_bu-filled-bg-hover: var(--red-500);
1521
- --_bu-filled-bg-selected: var(--red-600);
1522
- --_bu-filled-fc: var(--white);
1523
- --_bu-filled-fc-active: var(--_bu-filled-fc);
1524
- --_bu-filled-fc-hover: var(--_bu-filled-fc);
1525
- --_bu-filled-fc-selected: var(--_bu-filled-fc);
1526
- --_bu-outlined-bc: var(--red-400);
1527
- --_bu-outlined-bc-selected: var(--red-500);
1528
- --_bu-outlined-bg-selected: var(--_bu-bg-selected);
1529
- --_bu-outlined-fc-selected: var(--_bu-fc-selected);
1530
- --_bu-number-fc: var(--white);
1531
- --_bu-number-fc-filled: var(--black);
1532
- }
1533
- .s-btn.s-btn__featured {
1534
- --_bu-bg-active: var(--purple-300);
1535
- --_bu-bg-hover: var(--purple-200);
1536
- --_bu-bg-selected: var(--purple-300);
1537
- --_bu-fc: var(--purple-500);
1538
- --_bu-fc-active: var(--_bu-fc);
1539
- --_bu-fc-hover: var(--purple-500);
1540
- --_bu-fc-selected: var(--purple-600);
1541
- --_bu-filled-bc: transparent;
1542
- --_bu-filled-bc-selected: var(--_bu-filled-bc);
1543
- --_bu-filled-bg: var(--purple-400);
1544
- --_bu-filled-bg-active: var(--purple-500);
1545
- --_bu-filled-bg-hover: var(--purple-500);
1546
- --_bu-filled-bg-selected: var(--purple-600);
1547
- --_bu-filled-fc: var(--white);
1548
- --_bu-filled-fc-active: var(--_bu-filled-fc);
1549
- --_bu-filled-fc-hover: var(--_bu-filled-fc);
1550
- --_bu-filled-fc-selected: var(--_bu-filled-fc);
1551
- --_bu-outlined-bc: var(--purple-400);
1552
- --_bu-outlined-bc-selected: var(--purple-500);
1553
- --_bu-outlined-bg-selected: var(--_bu-bg-selected);
1554
- --_bu-outlined-fc-selected: var(--_bu-fc-selected);
1555
- --_bu-number-fc: var(--white);
1556
- --_bu-number-fc-filled: var(--black);
1557
- }
1558
- .s-btn.s-btn__muted {
1559
- --_bu-bc-hover: var(--black-300);
1560
- --_bu-bg-active: var(--black-150);
1561
- --_bu-bg-hover: var(--black-100);
1562
- --_bu-bg-selected: var(--black-200);
1563
- --_bu-fc: var(--black-500);
1564
- --_bu-fc-active: var(--_bu-fc);
1565
- --_bu-fc-hover: var(--black-500);
1566
- --_bu-fc-selected: var(--black-500);
1567
- --_bu-filled-bc: transparent;
1568
- --_bu-filled-bc-selected: var(--_bu-filled-bc);
1569
- --_bu-filled-bg: var(--black-225);
1570
- --_bu-filled-bg-active: var(--black-300);
1571
- --_bu-filled-bg-hover: var(--black-250);
1572
- --_bu-filled-bg-selected: var(--black-350);
1573
- --_bu-filled-fc: var(--black-500);
1574
- --_bu-filled-fc-active: var(--_bu-filled-fc);
1575
- --_bu-filled-fc-hover: var(--_bu-filled-fc);
1576
- --_bu-filled-fc-selected: var(--black-600);
1577
- --_bu-outlined-bc: var(--black-300);
1578
- --_bu-outlined-bc-selected: var(--black-300);
1579
- --_bu-outlined-bg-selected: var(--_bu-bg-selected);
1580
- --_bu-outlined-fc-selected: var(--_bu-fc-selected);
1581
- --_bu-number-fc-filled: var(--white);
1582
- --_bu-number-fc-selected: var(--white);
1583
- --_bu-bg-focus: var(--black-400);
1584
- --_bu-fc-focus: var(--white);
1585
- --_bu-number-fc-focus: var(--black-500);
1586
- }
1587
- body.theme-highcontrast .s-btn.s-btn__muted {
1588
- --_bu-bc-hover: currentColor;
1589
- --_bu-bg-hover: var(--black-225);
1590
- --_bu-filled-bg: var(--black-400);
1591
- --_bu-filled-bg-active: var(--black-500);
1592
- --_bu-filled-bg-hover: var(--black-400);
1593
- --_bu-filled-bg-selected: var(--black-500);
1594
- --_bu-filled-fc: var(--white);
1595
- --_bu-filled-fc-selected: var(--_bu-filled-fc);
1596
- --_bu-bc-selected: currentColor;
1597
- --_bu-fc-selected: var(--black);
1598
- --_bu-number-fc: var(--white);
1599
- --_bu-number-fc-filled: var(--black);
1600
- --_bu-number-fc-selected: var(--white);
1601
- }
1602
- body.theme-highcontrast .s-btn.s-btn__facebook,
1603
- body.theme-highcontrast .s-btn.s-btn__github {
1604
- --_bu-bc: transparent;
1605
- }
1606
- .s-btn.s-btn__facebook {
1607
- --_bu-bc: transparent;
1608
- --_bu-bg: #385499;
1609
- --_bu-bg-active: #2a4074;
1610
- --_bu-bg-hover: #314a86;
1611
- --_bu-fc: #fff;
1612
- --_bu-fc-active: var(--_bu-fc);
1613
- --_bu-fc-hover: var(--_bu-fc);
1614
- --_bu-hc-bc: transparent;
1615
- }
1616
- .s-btn.s-btn__google {
1617
- --_bu-bc: var(--bc-medium);
1618
- --_bu-bg: var(--white);
1619
- --_bu-bg-active: var(--black-150);
1620
- --_bu-bg-hover: var(--black-100);
1621
- --_bu-fc: var(--fc-medium);
1622
- --_bu-fc-active: var(--fc-dark);
1623
- --_bu-fc-hover: var(--black-600);
1588
+ .s-btn.is-selected,
1589
+ .s-btn--radio:checked + .s-btn {
1590
+ --_bu-bg-selected-overlay-o: 20%;
1591
+ --_bu-bg-selected-overlay: color-mix(in srgb, var(--_bu-bg-selected, var(--_bu-bg)), var(--white) var(--_bu-bg-selected-overlay-o));
1592
+ --_bu-bg-gradient-top: var(--_bu-bg-selected, var(--_bu-bg));
1593
+ --_bu-bg-gradient-bottom: var(--_bu-bg-selected-overlay, var(--_bu-bg));
1594
+ background: linear-gradient(0deg, var(--_bu-bg-gradient-top) 50%, var(--_bu-bg-gradient-bottom) 50%) padding-box, linear-gradient(0deg, var(--_bu-bg-gradient-top) 50%, var(--_bu-bg-gradient-bottom) 50%) border-box;
1595
+ color: var(--_bu-fc-selected, var(--_bu-fc));
1624
1596
  }
1625
- .s-btn.s-btn__github {
1626
- --_bu-bg: var(--black-600);
1627
- --_bu-bg-active: var(--black);
1628
- --_bu-bg-hover: var(--black-600);
1629
- --_bu-fc: var(--white);
1630
- --_bu-fc-active: var(--white);
1631
- --_bu-fc-hover: var(--white);
1632
- --_bu-hc-bc: transparent;
1597
+ @media (prefers-color-scheme: dark) {
1598
+ body.theme-system .s-btn.is-selected,
1599
+ body.theme-system .s-btn--radio:checked + .s-btn {
1600
+ --_bu-bg-selected-overlay-o: 13%;
1601
+ --_bu-bg-gradient-top: var(--_bu-bg-selected-overlay, var(--_bu-bg));
1602
+ --_bu-bg-gradient-bottom: var(--_bu-bg-selected, var(--_bu-bg));
1603
+ }
1604
+ }
1605
+ body.theme-dark .s-btn.is-selected,
1606
+ body.theme-dark .s-btn--radio:checked + .s-btn,
1607
+ .theme-dark__forced .s-btn.is-selected,
1608
+ .theme-dark__forced .s-btn--radio:checked + .s-btn,
1609
+ body.theme-system .theme-dark__forced .s-btn.is-selected,
1610
+ body.theme-system .theme-dark__forced .s-btn--radio:checked + .s-btn {
1611
+ --_bu-bg-selected-overlay-o: 13%;
1612
+ --_bu-bg-gradient-top: var(--_bu-bg-selected-overlay, var(--_bu-bg));
1613
+ --_bu-bg-gradient-bottom: var(--_bu-bg-selected, var(--_bu-bg));
1614
+ }
1615
+ .s-btn.is-selected .s-btn--badge,
1616
+ .s-btn--radio:checked + .s-btn .s-btn--badge {
1617
+ background-color: var(--_bu-badge-bg);
1618
+ }
1619
+ .s-btn.is-selected .s-btn--badge .s-btn--number,
1620
+ .s-btn--radio:checked + .s-btn .s-btn--badge .s-btn--number {
1621
+ color: var(--_bu-badge-fc, var(--_bu-fc));
1633
1622
  }
1634
1623
  .s-btn .s-btn--badge {
1635
- opacity: var(--_bu-badge-o);
1624
+ background-color: var(--_bu-badge-bg);
1625
+ border-radius: var(--br-pill);
1636
1626
  display: inline-block;
1637
- border-radius: var(--br-sm);
1638
- padding: var(--su2) calc(var(--su4) - var(--su1));
1639
1627
  font-size: var(--fs-caption);
1640
- line-height: var(--lh-xs);
1641
- background-color: currentColor;
1628
+ line-height: inherit;
1629
+ opacity: var(--_bu-badge-o);
1630
+ padding: var(--su1) var(--su4) 0;
1642
1631
  }
1643
1632
  .s-btn .s-btn--number {
1644
- color: var(--_bu-number-fc);
1633
+ color: var(--_bu-badge-fc, var(--_bu-fc));
1645
1634
  }
1646
1635
  .s-btn--radio {
1647
1636
  border: 0;
@@ -1655,52 +1644,66 @@ body.theme-highcontrast .s-btn.s-btn__github {
1655
1644
  position: absolute;
1656
1645
  width: var(--su-static1);
1657
1646
  }
1658
- .s-btn:not(.s-btn__link):not(.s-btn__unset):focus-visible,
1659
- .s-btn--radio:focus-visible + .s-btn {
1660
- border-color: var(--focus-theme) !important;
1661
- box-shadow: inset 0 0 0 var(--su-static1) var(--focus-theme), inset 0 0 0 calc(var(--su-static4) - var(--su-static1)) var(--focus-neutral);
1662
- outline: var(--su-static2) solid transparent !important;
1663
- }
1664
- .s-btn:not(.s-btn--radio:checked + label):not(.s-btn__link):not(.s-btn__unset):not(.s-btn__facebook):not(.s-btn__github):not(.s-btn__google):not(.is-selected):focus-visible,
1665
- .s-btn:not(.s-btn--radio:checked + label):not(.s-btn__link):not(.s-btn__unset):not(.s-btn__facebook):not(.s-btn__github):not(.s-btn__google):not(.is-selected).focus-inset-bordered {
1666
- background-color: var(--_bu-bg-focus, var(--_bu-filled-bg));
1667
- color: var(--_bu-fc-focus, var(--_bu-filled-fc));
1668
- }
1669
- .s-btn:not(.s-btn--radio:checked + label):not(.s-btn__link):not(.s-btn__unset):not(.s-btn__facebook):not(.s-btn__github):not(.s-btn__google):not(.is-selected):focus-visible:not(:hover) .s-btn--number,
1670
- .s-btn:not(.s-btn--radio:checked + label):not(.s-btn__link):not(.s-btn__unset):not(.s-btn__facebook):not(.s-btn__github):not(.s-btn__google):not(.is-selected).focus-inset-bordered:not(:hover) .s-btn--number {
1671
- color: var(--_bu-number-fc-focus, var(--_bu-number-fc-filled));
1647
+ .s-btn.s-btn__xs,
1648
+ .s-btn.s-btn__sm {
1649
+ --_bu-lh: var(--lh-sm);
1650
+ --_bu-px: var(--su12);
1672
1651
  }
1673
- .s-btn:not(.s-btn--radio:checked + label):not(.s-btn__link):not(.s-btn__unset):not(.s-btn__facebook):not(.s-btn__github):not(.s-btn__google):not(.is-selected):hover {
1674
- background-color: var(--_bu-bg-hover);
1675
- color: var(--_bu-fc-hover);
1652
+ .s-btn.s-btn__xs {
1653
+ --_bu-g: var(--su4);
1654
+ --_bu-fs: var(--fs-fine);
1655
+ --_bu-py: var(--su6);
1676
1656
  }
1677
- .s-btn:not(.s-btn--radio:checked + label):not(.s-btn__link):not(.s-btn__unset):not(.s-btn__facebook):not(.s-btn__github):not(.s-btn__google):not(.is-selected):hover.s-btn__filled {
1678
- background-color: var(--_bu-filled-bg-hover);
1679
- border-color: var(--_bu-filled-bc-hover);
1680
- color: var(--_bu-filled-fc-hover);
1657
+ .s-btn.s-btn__sm {
1658
+ --_bu-g: var(--su6);
1659
+ --_bu-fs: var(--fs-caption);
1660
+ --_bu-py: var(--su8);
1681
1661
  }
1682
- .s-btn:not(.s-btn--radio:checked + label):not(.s-btn__link):not(.s-btn__unset):not(.s-btn__facebook):not(.s-btn__github):not(.s-btn__google):not(.is-selected):hover:not(.s-btn__outlined):not(.s-btn__filled) {
1683
- border-color: var(--_bu-bc-hover);
1662
+ .s-btn.s-btn__lg {
1663
+ --_bu-fs: var(--fs-body2);
1664
+ --_bu-px: var(--su24);
1665
+ --_bu-py: calc(var(--su12) + var(--su1));
1684
1666
  }
1685
- .s-btn:not(.s-btn--radio:checked + label):not(.s-btn__link):not(.s-btn__unset):not(.s-btn__facebook):not(.s-btn__github):not(.s-btn__google):not(.is-selected):hover:visited:not(:active):not(:focus):not(.s-btn__outlined) {
1686
- background-color: var(--_bu-bg);
1687
- border-color: var(--_bu-bc);
1688
- color: var(--_bu-fc);
1667
+ .s-btn:not(.s-btn__link):not(.s-btn__unset):focus-visible,
1668
+ .s-btn--radio:focus-visible + .s-btn {
1669
+ border-color: var(--focus-neutral) !important;
1670
+ box-shadow: 0 0 0 var(--su-static1) var(--focus-neutral), 0 0 0 calc(var(--su-static4) - var(--su-static1)) var(--focus-theme);
1671
+ outline: var(--su-static2) solid transparent !important;
1689
1672
  }
1690
- .s-btn:not(.s-btn--radio:checked + label):not(.s-btn__link):not(.s-btn__unset):not(.s-btn__facebook):not(.s-btn__github):not(.s-btn__google):not(.is-selected):hover:visited:not(:active):not(:focus):not(.s-btn__outlined).s-btn__filled {
1691
- background-color: var(--_bu-filled-bg-hover);
1692
- border-color: var(--_bu-filled-bc-hover);
1693
- color: var(--_bu-filled-fc-hover);
1673
+ .s-btn:not(.is-selected):hover {
1674
+ background: linear-gradient(0deg, var(--_bu-bg-selected-overlay, var(--_bu-bg-hover, var(--_bu-bg))) 50%, var(--_bu-bg-hover, var(--_bu-bg-selected, var(--_bu-bg))) 50%) padding-box, linear-gradient(0deg, var(--_bu-bg-selected-overlay, var(--_bu-bg-hover, var(--_bu-bg))) 50%, var(--_bu-bg-hover, var(--_bu-bg-selected, var(--_bu-bg))) 50%) border-box;
1675
+ color: var(--_bu-fc-hover, var(--_bu-fc));
1694
1676
  }
1695
- .s-btn:not(.s-btn--radio:checked + label):not(.s-btn__link):not(.s-btn__unset):not(.s-btn__facebook):not(.s-btn__github):not(.s-btn__google):not(.is-selected):active {
1696
- background-color: var(--_bu-bg-active);
1697
- border-color: var(--_bu-bc-active);
1698
- color: var(--_bu-fc-active);
1677
+ fieldset[disabled] .s-btn,
1678
+ .s-btn[disabled],
1679
+ .s-btn[aria-disabled="true"] {
1680
+ cursor: auto;
1699
1681
  }
1700
- .s-btn:not(.s-btn--radio:checked + label):not(.s-btn__link):not(.s-btn__unset):not(.s-btn__facebook):not(.s-btn__github):not(.s-btn__google):not(.is-selected):active.s-btn__filled {
1701
- background-color: var(--_bu-filled-bg-active);
1702
- border-color: var(--_bu-filled-bc-active);
1703
- color: var(--_bu-filled-fc-active);
1682
+ fieldset[disabled] .s-btn,
1683
+ .s-btn[disabled],
1684
+ .s-btn[aria-disabled="true"],
1685
+ fieldset[disabled] .s-btn:hover,
1686
+ .s-btn[disabled]:hover,
1687
+ .s-btn[aria-disabled="true"]:hover {
1688
+ background: var(--_bu-bg-disabled, var(--theme-secondary-400));
1689
+ border-color: var(--_bu-bc-disabled, var(--_bu-bc, transparent));
1690
+ color: var(--_bu-fc-disabled, var(--_bu-fc));
1691
+ }
1692
+ fieldset[disabled] .s-btn .s-btn--badge,
1693
+ .s-btn[disabled] .s-btn--badge,
1694
+ .s-btn[aria-disabled="true"] .s-btn--badge,
1695
+ fieldset[disabled] .s-btn:hover .s-btn--badge,
1696
+ .s-btn[disabled]:hover .s-btn--badge,
1697
+ .s-btn[aria-disabled="true"]:hover .s-btn--badge {
1698
+ background-color: var(--_bu-badge-bg-disabled);
1699
+ }
1700
+ fieldset[disabled] .s-btn .s-btn--badge .s-btn--number,
1701
+ .s-btn[disabled] .s-btn--badge .s-btn--number,
1702
+ .s-btn[aria-disabled="true"] .s-btn--badge .s-btn--number,
1703
+ fieldset[disabled] .s-btn:hover .s-btn--badge .s-btn--number,
1704
+ .s-btn[disabled]:hover .s-btn--badge .s-btn--number,
1705
+ .s-btn[aria-disabled="true"]:hover .s-btn--badge .s-btn--number {
1706
+ color: var(--_bu-badge-fc-disabled);
1704
1707
  }
1705
1708
  .s-btn-group {
1706
1709
  border: var(--su-static1) solid var(--black-300);
@@ -1725,7 +1728,7 @@ body.theme-highcontrast .s-btn.s-btn__github {
1725
1728
  margin-right: calc(var(--su-static1) * -1);
1726
1729
  }
1727
1730
  .s-btn-group .s-btn {
1728
- --_bu-br: var(--br-sm);
1731
+ --_bu-br: var(--br-md);
1729
1732
  --_bu-bc-hover: transparent;
1730
1733
  --_bu-px: calc(var(--su12) - var(--su1));
1731
1734
  --_bu-py: calc(var(--su6) + 0.65px);
@@ -1768,7 +1771,7 @@ body.theme-highcontrast .s-btn.s-btn__github {
1768
1771
  --_ca-bc: var(--bc-medium);
1769
1772
  border: var(--su-static1) solid var(--_ca-bc);
1770
1773
  background-color: var(--white);
1771
- border-radius: var(--br-sm);
1774
+ border-radius: var(--br-md);
1772
1775
  padding: var(--su12);
1773
1776
  }
1774
1777
  a.s-card {
@@ -1862,37 +1865,37 @@ input.s-radio {
1862
1865
  background-position: center center;
1863
1866
  background-repeat: no-repeat;
1864
1867
  background-size: contain;
1865
- border-radius: var(--br-sm);
1868
+ border-radius: var(--br-md);
1866
1869
  }
1867
1870
  @media (prefers-color-scheme: dark) {
1868
1871
  body.theme-system .s-checkbox:checked {
1869
- --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='hsl(210, 3.0000000000000027%, 15%)'/%3E%3C/svg%3E");
1872
+ --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='%23141414'/%3E%3C/svg%3E");
1870
1873
  }
1871
1874
  body.theme-system .s-checkbox:indeterminate {
1872
- --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 h7 v2 h-7 z' fill='hsl(210, 3.0000000000000027%, 15%)'/%3E%3C/svg%3E");
1875
+ --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 h7 v2 h-7 z' fill='%23141414'/%3E%3C/svg%3E");
1873
1876
  }
1874
1877
  }
1875
1878
  body.theme-dark .s-checkbox:checked,
1876
1879
  .theme-dark__forced .s-checkbox:checked,
1877
1880
  body.theme-system .theme-dark__forced .s-checkbox:checked {
1878
- --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='hsl(210, 3.0000000000000027%, 15%)'/%3E%3C/svg%3E");
1881
+ --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='%23141414'/%3E%3C/svg%3E");
1879
1882
  }
1880
1883
  body.theme-dark .s-checkbox:indeterminate,
1881
1884
  .theme-dark__forced .s-checkbox:indeterminate,
1882
1885
  body.theme-system .theme-dark__forced .s-checkbox:indeterminate {
1883
- --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 h7 v2 h-7 z' fill='hsl(210, 3.0000000000000027%, 15%)'/%3E%3C/svg%3E");
1886
+ --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 h7 v2 h-7 z' fill='%23141414'/%3E%3C/svg%3E");
1884
1887
  }
1885
1888
  @media (prefers-color-scheme: dark) {
1886
1889
  body.theme-highcontrast.theme-system .s-checkbox:checked,
1887
1890
  body.theme-highcontrast.theme-system .s-checkbox:indeterminate {
1888
- --_ch-bc: var(--blue-500) !important;
1889
- --_ch-bg: var(--blue-400);
1891
+ --_ch-bc: var(--black) !important;
1892
+ --_ch-bg: var(--black);
1890
1893
  }
1891
1894
  }
1892
1895
  body.theme-highcontrast.theme-dark .s-checkbox:checked,
1893
1896
  body.theme-highcontrast.theme-dark .s-checkbox:indeterminate {
1894
- --_ch-bc: var(--blue-500) !important;
1895
- --_ch-bg: var(--blue-400);
1897
+ --_ch-bc: var(--black) !important;
1898
+ --_ch-bg: var(--black);
1896
1899
  }
1897
1900
  @media (forced-colors: active) {
1898
1901
  .s-checkbox:checked,
@@ -1902,31 +1905,31 @@ body.theme-highcontrast.theme-dark .s-checkbox:indeterminate {
1902
1905
  }
1903
1906
  .s-checkbox:checked,
1904
1907
  .s-checkbox:indeterminate {
1905
- --_ch-bc: var(--theme-secondary-400) !important;
1906
- --_ch-bg: var(--theme-secondary-400);
1908
+ --_ch-bc: var(--theme-secondary) !important;
1909
+ --_ch-bg: var(--theme-secondary);
1907
1910
  }
1908
1911
  .s-checkbox:checked {
1909
- --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='hsl(0, 0%, 100%)'/%3E%3C/svg%3E");
1912
+ --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='%23ffffff'/%3E%3C/svg%3E");
1910
1913
  }
1911
1914
  .s-checkbox:indeterminate {
1912
- --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 h7 v2 h-7 z' fill='hsl(0, 0%, 100%)'/%3E%3C/svg%3E");
1915
+ --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 h7 v2 h-7 z' fill='%23ffffff'/%3E%3C/svg%3E");
1913
1916
  }
1914
1917
  .s-radio {
1915
1918
  border-radius: var(--br-circle);
1916
1919
  }
1917
1920
  @media (prefers-color-scheme: dark) {
1918
1921
  body.theme-highcontrast.theme-system .s-radio:checked {
1919
- --_ch-bc: var(--blue-400);
1922
+ --_ch-bc: var(--black);
1920
1923
  outline: var(--su-static1) solid var(--black);
1921
1924
  }
1922
1925
  }
1923
1926
  body.theme-highcontrast.theme-dark .s-radio:checked {
1924
- --_ch-bc: var(--blue-400);
1927
+ --_ch-bc: var(--black);
1925
1928
  outline: var(--su-static1) solid var(--black);
1926
1929
  }
1927
1930
  .s-radio:checked {
1928
1931
  --_ch-baw: 0.30769231em;
1929
- --_ch-bc: var(--theme-secondary-400);
1932
+ --_ch-bc: var(--theme-secondary);
1930
1933
  --_ch-bg: var(--white);
1931
1934
  }
1932
1935
  .has-error .s-checkbox,
@@ -2208,43 +2211,35 @@ pre.s-code-block::-webkit-scrollbar-corner {
2208
2211
  transition: var(--_ex-content-transition);
2209
2212
  }
2210
2213
  .s-input,
2211
- .s-textarea {
2212
- --_in-bc: var(--bc-darker);
2214
+ .s-textarea,
2215
+ :has(> .s-textarea) {
2216
+ --_in-bc: var(--black-300);
2213
2217
  --_in-bg: var(--white);
2214
2218
  --_in-br: var(--br-md);
2219
+ --_in-bw: var(--su-static1);
2215
2220
  --_in-c: unset;
2216
- --_in-fc: var(--fc-dark);
2221
+ --_in-fc: var(--black-600);
2217
2222
  --_in-fs: var(--fs-body1);
2218
- --_in-o: unset;
2219
- --_in-px: 0.7em;
2220
- --_in-py: 0.6em;
2223
+ --_in-lh: var(--lh-base);
2224
+ --_in-px: calc(var(--su12) - var(--su1));
2225
+ --_in-py: var(--su8);
2221
2226
  --_in-placeholder-fc: var(--black-300);
2227
+ }
2228
+ .s-input,
2229
+ .s-textarea {
2222
2230
  scrollbar-color: var(--scrollbar) transparent;
2223
2231
  background-color: var(--_in-bg);
2224
- border: var(--su-static1) solid var(--_in-bc);
2225
- border-radius: var(--_in-br);
2232
+ border: var(--_in-bw) solid var(--_in-bc);
2226
2233
  color: var(--_in-fc);
2227
2234
  cursor: var(--_in-c);
2228
2235
  font-size: var(--_in-fs);
2229
- opacity: var(--_in-o);
2236
+ line-height: var(--_in-lh);
2230
2237
  padding: var(--_in-py) var(--_in-px) var(--_in-py) var(--_in-pl, var(--_in-px));
2231
- -webkit-appearance: none;
2238
+ border-radius: var(--br-md);
2232
2239
  font-family: inherit;
2233
2240
  margin: 0;
2234
2241
  width: 100%;
2235
2242
  }
2236
- @supports (-webkit-overflow-scrolling: touch) {
2237
- .s-input,
2238
- .s-textarea {
2239
- --_in-fs: var(--su-static16);
2240
- --_in-px: 0.55em;
2241
- --_in-py: 0.36em;
2242
- }
2243
- .s-input::-webkit-input-placeholder,
2244
- .s-textarea::-webkit-input-placeholder {
2245
- line-height: normal !important;
2246
- }
2247
- }
2248
2243
  body.theme-highcontrast .s-input,
2249
2244
  body.theme-highcontrast .s-textarea {
2250
2245
  --_in-bc: var(--black);
@@ -2255,14 +2250,13 @@ fieldset[disabled] .s-textarea,
2255
2250
  .s-input[disabled],
2256
2251
  .s-textarea[disabled] {
2257
2252
  --_in-c: not-allowed;
2258
- --_in-o: var(--_o-disabled-static);
2259
2253
  }
2260
2254
  .s-input[readonly],
2261
2255
  .s-textarea[readonly],
2262
2256
  .is-readonly .s-input,
2263
2257
  .is-readonly .s-textarea {
2264
2258
  --_in-bg: var(--black-150);
2265
- --_in-bc: var(--bc-light);
2259
+ --_in-bc: var(--black-200);
2266
2260
  --_in-c: default;
2267
2261
  --_in-fc: var(--black-400);
2268
2262
  }
@@ -2270,7 +2264,7 @@ body.theme-highcontrast .s-input[readonly],
2270
2264
  body.theme-highcontrast .s-textarea[readonly],
2271
2265
  body.theme-highcontrast .is-readonly .s-input,
2272
2266
  body.theme-highcontrast .is-readonly .s-textarea {
2273
- --_in-fc: var(--fc-medium);
2267
+ --_in-fc: var(--black-500);
2274
2268
  }
2275
2269
  .has-error .s-input,
2276
2270
  .has-error .s-textarea,
@@ -2307,67 +2301,23 @@ body.theme-highcontrast .has-warning .s-textarea {
2307
2301
  .s-input.s-input__sm,
2308
2302
  .s-input.s-textarea__sm,
2309
2303
  .s-textarea.s-input__sm,
2310
- .s-textarea.s-textarea__sm {
2311
- --_in-fs: var(--fs-caption);
2312
- }
2313
- .s-input.s-input__md,
2314
- .s-input.s-textarea__md,
2315
- .s-textarea.s-input__md,
2316
- .s-textarea.s-textarea__md {
2317
- --_in-fs: var(--fs-body3);
2318
- --_in-br: calc(var(--br-sm) + var(--su-static1));
2319
- }
2320
- @supports (-webkit-overflow-scrolling: touch) {
2321
- .s-input.s-input__md,
2322
- .s-input.s-textarea__md,
2323
- .s-textarea.s-input__md,
2324
- .s-textarea.s-textarea__md {
2325
- --_in-fs: calc(var(--su-static16) + var(--su-static1));
2326
- --_in-py: 0.4em;
2327
- }
2304
+ .s-textarea.s-textarea__sm {
2305
+ --_in-fs: var(--fs-caption);
2306
+ --_in-lh: var(--lh-sm);
2307
+ --_in-px: calc(var(--su12) - var(--su2));
2308
+ --_in-py: calc(var(--su4) + var(--su1));
2328
2309
  }
2329
2310
  .s-input.s-input__lg,
2330
2311
  .s-input.s-textarea__lg,
2331
2312
  .s-textarea.s-input__lg,
2332
2313
  .s-textarea.s-textarea__lg {
2333
- --_in-fs: var(--fs-title);
2334
- --_in-br: calc(var(--br-sm) + var(--su-static1));
2335
- --_in-px: 0.6em;
2336
- --_in-py: 0.45em;
2337
- }
2338
- .s-input.s-input__xl,
2339
- .s-input.s-textarea__xl,
2340
- .s-textarea.s-input__xl,
2341
- .s-textarea.s-textarea__xl {
2342
- --_in-fs: var(--fs-headline1);
2343
- --_in-br: var(--br-md);
2344
- --_in-px: 0.5em;
2345
- --_in-py: 0.4em;
2346
- }
2347
- .s-input:-webkit-autofill,
2348
- .s-textarea:-webkit-autofill {
2349
- -webkit-box-shadow: 0 0 0 1000px var(--theme-secondary-200) inset;
2350
- -webkit-text-fill-color: var(--black);
2351
- border-color: var(--blue-400);
2352
- transition: background-color 0s 50000s;
2353
- }
2354
- .s-input:-webkit-autofill:focus,
2355
- .s-textarea:-webkit-autofill:focus {
2356
- border-color: var(--blue-400);
2357
- -webkit-box-shadow: 0 0 0 1000px var(--blue-200) inset, 0 0 0 var(--su-static4) var(--focus-ring);
2358
- }
2359
- .s-input::-webkit-contacts-auto-fill-button,
2360
- .s-textarea::-webkit-contacts-auto-fill-button {
2361
- background-color: var(--black);
2362
- }
2363
- .s-input::placeholder,
2364
- .s-textarea::placeholder,
2365
- .s-input::-webkit-input-placeholder,
2366
- .s-textarea::-webkit-input-placeholder {
2367
- color: var(--_in-placeholder-fc);
2314
+ --_in-fs: var(--fs-body3);
2315
+ --_in-lh: var(--lh-lg);
2316
+ --_in-px: calc(var(--su12) + var(--su1));
2368
2317
  }
2369
2318
  .s-input::placeholder,
2370
2319
  .s-textarea::placeholder {
2320
+ color: var(--_in-placeholder-fc);
2371
2321
  opacity: 1;
2372
2322
  }
2373
2323
  .s-input.s-input__creditcard,
@@ -2378,7 +2328,7 @@ body.theme-highcontrast .has-warning .s-textarea {
2378
2328
  .s-input.s-textarea__search,
2379
2329
  .s-textarea.s-input__search,
2380
2330
  .s-textarea.s-textarea__search {
2381
- --_in-pl: var(--su-static32);
2331
+ --_in-pl: calc(var(--su-static32) + var(--su-static4));
2382
2332
  }
2383
2333
  .s-input:focus,
2384
2334
  .s-textarea:focus,
@@ -2408,6 +2358,13 @@ body.theme-highcontrast .has-warning .s-textarea {
2408
2358
  background-color: transparent;
2409
2359
  border-color: transparent;
2410
2360
  }
2361
+ .s-input:has(> input.s-input) {
2362
+ display: flex;
2363
+ align-items: center;
2364
+ }
2365
+ .s-input:has(> input.s-input) input.s-input {
2366
+ flex: 1 1 0;
2367
+ }
2411
2368
  .is-disabled .s-input,
2412
2369
  .is-readonly .s-input,
2413
2370
  .has-success .s-input,
@@ -2415,8 +2372,24 @@ body.theme-highcontrast .has-warning .s-textarea {
2415
2372
  .has-warning .s-input {
2416
2373
  padding-right: var(--su32);
2417
2374
  }
2418
- .s-input.s-input__md {
2419
- --_in-py: 0.5em;
2375
+ .s-input .s-input {
2376
+ --_in-bg: transparent;
2377
+ --_in-bw: 0;
2378
+ --_in-px: 0;
2379
+ box-shadow: none;
2380
+ margin: calc(var(--_in-py) * -1) 0;
2381
+ }
2382
+ .s-input:has(.s-input) {
2383
+ --_in-px: var(--_in-py);
2384
+ flex-wrap: wrap;
2385
+ gap: var(--su8);
2386
+ }
2387
+ .s-textarea {
2388
+ --_in-py: var(--su8);
2389
+ --_te-hmn: calc(var(--su32) + var(--su4));
2390
+ --_te-h: calc(var(--su64) + var(--su6));
2391
+ min-height: var(--_te-hmn);
2392
+ height: var(--_te-h);
2420
2393
  }
2421
2394
  .is-disabled .s-textarea,
2422
2395
  .is-readonly .s-textarea,
@@ -2425,12 +2398,18 @@ body.theme-highcontrast .has-warning .s-textarea {
2425
2398
  .has-warning .s-textarea {
2426
2399
  padding-right: var(--su48);
2427
2400
  }
2428
- .s-textarea.s-textarea__md {
2429
- --_in-py: 0.72em;
2401
+ .s-textarea.s-textarea__sm {
2402
+ --_te-hmn: calc(var(--su32) - var(--su4));
2403
+ --_te-h: calc(var(--su48) + var(--su6));
2404
+ }
2405
+ .s-textarea.s-textarea__lg {
2406
+ --_te-hmn: calc(var(--su48) - var(--su4));
2407
+ --_te-h: calc(var(--su64) + var(--su32));
2430
2408
  }
2431
2409
  .s-textarea ~ .s-input-icon {
2432
- right: 1.5em;
2433
- top: 1.5em;
2410
+ right: var(--_in-px);
2411
+ top: var(--_in-py);
2412
+ margin-top: 0;
2434
2413
  }
2435
2414
  .s-input-fill {
2436
2415
  --_if-bc: var(--bc-dark);
@@ -2464,10 +2443,10 @@ body.theme-highcontrast .has-warning .s-textarea {
2464
2443
  }
2465
2444
  .s-input-icon {
2466
2445
  --_ii-fc: unset;
2467
- --_ii-r: 0.7em;
2446
+ --_ii-r: calc(var(--su-static8) + var(--su-static2));
2468
2447
  color: var(--_ii-fc);
2469
2448
  right: var(--_ii-r);
2470
- margin-top: calc((var(--su-static8) + var(--su-static1)) * -1);
2449
+ margin-top: calc((var(--su-static8) + var(--su-static2)) * -1);
2471
2450
  pointer-events: none;
2472
2451
  position: absolute;
2473
2452
  top: 50%;
@@ -2494,7 +2473,7 @@ body.theme-highcontrast .is-readonly .s-input-icon {
2494
2473
  .s-input-icon.s-input-icon__search {
2495
2474
  --_ii-r: auto;
2496
2475
  color: var(--black-400);
2497
- left: 0.7em;
2476
+ left: calc(var(--su-static8) + var(--su-static2));
2498
2477
  }
2499
2478
  .s-input-message {
2500
2479
  --_im-fc: unset;
@@ -2645,7 +2624,7 @@ a.s-user-card--link:hover:visited {
2645
2624
  }
2646
2625
  a,
2647
2626
  .s-link {
2648
- --_li-fc: var(--theme-link-color, var(--theme-secondary-400));
2627
+ --_li-fc: var(--theme-link-color, var(--theme-secondary));
2649
2628
  --_li-fc-hover: var(--theme-link-color-hover, var(--theme-secondary-500));
2650
2629
  --_li-fc-visited: var(--theme-link-color-visited, var(--purple-500));
2651
2630
  --_li-fc-hover-visited: var(--theme-link-color-visited, var(--purple-600));
@@ -2762,7 +2741,7 @@ p .s-link {
2762
2741
  --_lp-misc-pl: var(--su4);
2763
2742
  --_lp-misc-pt: unset;
2764
2743
  border: var(--su-static1) solid var(--bc-medium);
2765
- border-radius: var(--br-sm);
2744
+ border-radius: var(--br-md);
2766
2745
  box-shadow: var(--bs-sm);
2767
2746
  text-align: left;
2768
2747
  }
@@ -2815,8 +2794,8 @@ body.theme-highcontrast .s-link-preview {
2815
2794
  .s-link-preview .s-link-preview--footer {
2816
2795
  background: var(--_lp-footer-bg);
2817
2796
  flex-direction: var(--_lp-footer-fd);
2818
- border-bottom-left-radius: var(--br-sm);
2819
- border-bottom-right-radius: var(--br-sm);
2797
+ border-bottom-left-radius: var(--br-md);
2798
+ border-bottom-right-radius: var(--br-md);
2820
2799
  border-top: var(--su-static1) solid var(--bc-medium);
2821
2800
  display: flex;
2822
2801
  font-size: var(--fs-caption);
@@ -2826,8 +2805,8 @@ body.theme-highcontrast .s-link-preview {
2826
2805
  .s-link-preview .s-link-preview--header {
2827
2806
  background: var(--_lp-header-bg);
2828
2807
  border-bottom: var(--su-static1) solid var(--bc-medium);
2829
- border-top-left-radius: var(--br-sm);
2830
- border-top-right-radius: var(--br-sm);
2808
+ border-top-left-radius: var(--br-md);
2809
+ border-top-right-radius: var(--br-md);
2831
2810
  display: flex;
2832
2811
  padding: var(--su12) var(--su8);
2833
2812
  }
@@ -2846,7 +2825,7 @@ body.theme-highcontrast .s-link-preview {
2846
2825
  font-weight: bold;
2847
2826
  }
2848
2827
  .s-link-preview a.s-link-preview--title {
2849
- color: var(--theme-link-color, var(--theme-secondary-400));
2828
+ color: var(--theme-link-color, var(--theme-secondary));
2850
2829
  cursor: pointer;
2851
2830
  text-decoration: none;
2852
2831
  }
@@ -2883,55 +2862,109 @@ body.theme-highcontrast .s-link-preview a.s-link-preview--title.s-link__visited:
2883
2862
  white-space: nowrap;
2884
2863
  }
2885
2864
  .s-menu {
2886
- --_me-divider-bg: var(--bc-light);
2887
- --_me-label-btc: var(--bc-light);
2888
- --_me-label-cursor: pointer;
2865
+ --_me-action-bg: unset;
2866
+ --_me-action-fc: var(--black-500);
2867
+ --_me-item-p: var(--su8);
2868
+ --_me-after-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m14 3.88-.44.44-7.34 7.35-.44.44-.44-.44-2.9-2.9L2 8.34l.89-.88.44.44 2.45 2.45 6.9-6.9.44-.44z'/%3E%3C/svg%3E");
2889
2869
  list-style: none;
2890
2870
  margin: 0;
2891
2871
  padding: 0;
2892
2872
  }
2893
- @media (prefers-color-scheme: dark) {
2894
- body.theme-system .s-menu {
2895
- --_me-divider-bg: var(--bc-light);
2896
- --_me-label-btc: var(--bc-light);
2897
- }
2898
- }
2899
- body.theme-dark .s-menu,
2900
- .theme-dark__forced .s-menu,
2901
- body.theme-system .theme-dark__forced .s-menu {
2902
- --_me-divider-bg: var(--bc-light);
2903
- --_me-label-btc: var(--bc-light);
2904
- }
2905
2873
  .s-menu .s-menu--divider {
2906
- background-color: var(--_me-divider-bg);
2874
+ background-color: var(--black-200);
2907
2875
  height: var(--su-static1);
2908
2876
  margin: var(--su8) 0;
2909
2877
  }
2910
- .s-menu .s-menu--label {
2911
- border-top: var(--su-static1) solid var(--_me-label-btc);
2912
- cursor: var(--_me-label-cursor);
2913
- padding: var(--su12);
2878
+ .s-menu .s-menu--icon {
2879
+ color: inherit;
2880
+ margin-right: var(--su8);
2881
+ }
2882
+ .s-menu .s-menu--item {
2883
+ color: var(--_me-action-fc);
2884
+ padding: var(--_me-item-p);
2885
+ align-items: center;
2886
+ display: flex;
2887
+ width: 100%;
2888
+ }
2889
+ .s-menu .s-menu--item:has(> .s-menu--action) {
2890
+ --_me-item-p: 0;
2891
+ }
2892
+ .s-menu .s-menu--item.s-check-control {
2893
+ --_me-item-p: var(--su6) var(--su8);
2894
+ align-items: flex-start;
2895
+ }
2896
+ .s-menu .s-menu--item.s-check-control .s-radio,
2897
+ .s-menu .s-menu--item.s-check-control .s-checkbox {
2898
+ margin-top: var(--su4);
2899
+ }
2900
+ .s-menu .s-menu--item:not(.s-check-control) .s-radio,
2901
+ .s-menu .s-menu--item:not(.s-check-control) .s-checkbox {
2902
+ height: 0;
2903
+ pointer-events: none;
2904
+ position: absolute;
2905
+ opacity: 0;
2906
+ width: 0;
2907
+ }
2908
+ .s-menu .s-menu--action {
2909
+ background-color: var(--_me-action-bg);
2910
+ color: var(--_me-action-fc);
2911
+ align-items: center;
2912
+ border-radius: var(--br-md);
2913
+ cursor: pointer;
2914
+ display: flex;
2915
+ padding: var(--su8);
2916
+ width: 100%;
2917
+ }
2918
+ .s-menu .s-menu--action:focus-visible,
2919
+ .s-menu .s-menu--action:has(> input:focus-visible) {
2920
+ box-shadow: inset 0 0 0 var(--su-static2) var(--focus-theme), inset 0 0 0 var(--su-static4) var(--focus-neutral);
2921
+ outline: var(--su-static2) solid transparent !important;
2922
+ }
2923
+ .s-menu .s-menu--action:focus-visible,
2924
+ .s-menu .s-menu--action:has(> input:focus-visible),
2925
+ .s-menu .s-menu--action:hover {
2926
+ --_me-action-bg: var(--black-150);
2927
+ --_me-action-fc: var(--black-600);
2928
+ }
2929
+ .s-menu .s-menu--action__danger {
2930
+ --_me-action-fc: var(--red-400);
2931
+ }
2932
+ .s-menu .s-menu--action__danger:focus-visible,
2933
+ .s-menu .s-menu--action__danger:hover {
2934
+ --_me-action-fc: var(--red-500);
2935
+ }
2936
+ .s-menu .s-menu--action.is-selected:after,
2937
+ .s-menu .s-menu--action:has(input:checked):after {
2938
+ background-color: var(--_me-action-fc);
2939
+ content: "";
2940
+ height: var(--su16);
2941
+ margin-left: auto;
2942
+ width: var(--su16);
2943
+ mask-image: var(--_me-after-mask);
2944
+ mask-size: contain;
2945
+ mask-repeat: no-repeat;
2914
2946
  }
2915
- .s-menu .s-menu--label.is-disabled {
2916
- --_me-label-cursor: not-allowed;
2947
+ .s-menu button.s-menu--action {
2948
+ border: none;
2949
+ font-family: inherit;
2950
+ line-height: inherit;
2951
+ text-align: left;
2917
2952
  }
2918
2953
  .s-menu .s-menu--title {
2919
- color: var(--black-500);
2920
- font-size: var(--fs-fine);
2921
- padding: var(--su8) var(--su12);
2922
- text-transform: uppercase;
2954
+ color: var(--black-600);
2955
+ font-weight: 700;
2956
+ padding: var(--su6) var(--su8);
2923
2957
  }
2924
- .s-menu li + .s-menu--title {
2958
+ .s-menu .s-menu--item + .s-menu--title {
2925
2959
  margin-top: var(--su12);
2926
2960
  }
2927
2961
  .s-modal {
2928
- --_mo-bg: hsla(210, 8%, 5%, 0.5);
2962
+ --_mo-bg: rgba(33, 29, 30, 0.5);
2929
2963
  --_mo-hmx: unset;
2930
2964
  --_mo-wmx: unset;
2931
- --_mo-close-t: var(--su8);
2932
2965
  --_mo-dialog-bg: var(--white);
2933
2966
  --_mo-dialog-pt: var(--su24);
2934
- --_mo-header-fc: var(--fc-dark);
2967
+ --_mo-dialog-ou: 0;
2935
2968
  background-color: var(--_mo-bg);
2936
2969
  max-height: var(--_mo-hmx);
2937
2970
  max-width: var(--_mo-wmx);
@@ -2948,21 +2981,16 @@ body.theme-system .theme-dark__forced .s-menu {
2948
2981
  }
2949
2982
  @media (prefers-color-scheme: dark) {
2950
2983
  body.theme-system .s-modal {
2951
- --_mo-dialog-bg: var(--black-225);
2984
+ --_mo-dialog-bg: var(--black-100);
2952
2985
  }
2953
2986
  }
2954
2987
  body.theme-dark .s-modal,
2955
2988
  .theme-dark__forced .s-modal,
2956
2989
  body.theme-system .theme-dark__forced .s-modal {
2957
- --_mo-dialog-bg: var(--black-225);
2958
- }
2959
- @media (prefers-color-scheme: dark) {
2960
- body.theme-highcontrast.theme-system .s-modal {
2961
- --_mo-dialog-bg: var(--black-200);
2962
- }
2990
+ --_mo-dialog-bg: var(--black-100);
2963
2991
  }
2964
- body.theme-highcontrast.theme-dark .s-modal {
2965
- --_mo-dialog-bg: var(--black-200);
2992
+ body.theme-highcontrast .s-modal {
2993
+ --_mo-dialog-ou: var(--su2) solid var(--black-500);
2966
2994
  }
2967
2995
  .s-modal[aria-hidden="false"],
2968
2996
  .s-modal[aria-hidden="false"] .s-modal--dialog {
@@ -2991,18 +3019,17 @@ body.theme-highcontrast.theme-dark .s-modal {
2991
3019
  }
2992
3020
  .s-modal.has-danger,
2993
3021
  .s-modal.s-modal__danger {
2994
- --_mo-bg: hsla(0, 65%, 4%, 0.5);
2995
- --_mo-header-fc: var(--red-500);
3022
+ --_mo-bg: rgba(1, 0, 0, 0.5);
2996
3023
  }
2997
3024
  .s-modal .s-modal--body {
2998
3025
  color: var(--fc-medium);
2999
3026
  margin-bottom: var(--su24);
3000
3027
  }
3001
3028
  .s-modal .s-modal--close {
3002
- padding: var(--su12) !important;
3029
+ padding: var(--su6) !important;
3003
3030
  position: absolute !important;
3004
- right: var(--su8);
3005
- top: var(--_mo-close-t);
3031
+ right: var(--su16);
3032
+ top: var(--su16);
3006
3033
  }
3007
3034
  .s-modal .s-modal--close .svg-icon {
3008
3035
  margin: 0 !important;
@@ -3010,9 +3037,10 @@ body.theme-highcontrast.theme-dark .s-modal {
3010
3037
  .s-modal .s-modal--dialog {
3011
3038
  padding: var(--_mo-dialog-pt) var(--su24) var(--su24);
3012
3039
  scrollbar-color: var(--scrollbar) transparent;
3040
+ position: relative;
3013
3041
  backface-visibility: hidden;
3014
3042
  background-color: var(--_mo-dialog-bg);
3015
- border-radius: var(--br-lg);
3043
+ border-radius: var(--br-md);
3016
3044
  box-shadow: var(--bs-lg);
3017
3045
  max-height: 100%;
3018
3046
  max-width: 600px;
@@ -3022,6 +3050,7 @@ body.theme-highcontrast.theme-dark .s-modal {
3022
3050
  transition: opacity 200ms var(--te-smooth) 0s, z-index 0s 100ms, visibility 0s 100ms, transform 100ms var(--te-smooth) 0s, transform 100ms var(--te-smooth) 0s;
3023
3051
  visibility: hidden;
3024
3052
  z-index: var(--zi-hide);
3053
+ outline: var(--_mo-dialog-ou);
3025
3054
  }
3026
3055
  .s-modal .s-modal--dialog::-webkit-scrollbar {
3027
3056
  width: calc(var(--su-static12) - var(--su-static2));
@@ -3044,7 +3073,7 @@ body.theme-highcontrast.theme-dark .s-modal {
3044
3073
  margin-top: var(--su24);
3045
3074
  }
3046
3075
  .s-modal .s-modal--header {
3047
- color: var(--_mo-header-fc);
3076
+ color: var(--fc-dark);
3048
3077
  font-size: var(--fs-headline1);
3049
3078
  font-weight: normal;
3050
3079
  line-height: var(--lh-sm);
@@ -3057,18 +3086,20 @@ body.theme-highcontrast.theme-dark .s-modal {
3057
3086
  --_na-p: var(--su2) 0;
3058
3087
  --_na-gap: var(--su4);
3059
3088
  --_na-item-bg: none;
3060
- --_na-item-fc: var(--black-500);
3089
+ --_na-item-fc: var(--black-400);
3061
3090
  --_na-item-fs: unset;
3062
- --_na-item-p: var(--su6) var(--su12);
3063
- --_na-item-py: var(--su12);
3091
+ --_na-item-p: calc(var(--su12) - var(--su1)) var(--su16);
3064
3092
  --_na-item-ws: nowrap;
3065
- --_na-item-bg-hover: var(--black-200);
3093
+ --_na-item-bg-hover: var(--black-100);
3066
3094
  --_na-item-fc-hover: var(--_na-item-fc);
3067
- --_na-item-selected-bg: var(--theme-primary);
3068
- --_na-item-selected-fc: var(--white);
3069
- --_na-item-selected-bg-hover: var(--theme-primary-500);
3095
+ --_na-item-selected-bg: none;
3096
+ --_na-item-selected-fc: var(--black-600);
3097
+ --_na-item-selected-bg-hover: var(--_na-item-bg-hover);
3098
+ --_na-item-selected-h: var(--su-static2);
3070
3099
  --_na-item-text-ta: center;
3071
- --_na-title-mt: var(--su16);
3100
+ --_na-title-mt: var(--su24);
3101
+ --_na-after-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M11.35 4.35 6 9.71.65 4.35l.7-.7L6 8.29l4.65-4.64z'/%3E%3C/svg%3E");
3102
+ --_na-after-bg-color: var(--black-400);
3072
3103
  flex-direction: var(--_na-fd);
3073
3104
  flex-wrap: var(--_na-fw);
3074
3105
  gap: var(--_na-gap);
@@ -3105,7 +3136,7 @@ body.theme-highcontrast .s-navigation {
3105
3136
  }
3106
3137
  .s-navigation.s-navigation__sm {
3107
3138
  --_na-item-fs: var(--fs-caption);
3108
- --_na-item-p: var(--su4) var(--su12);
3139
+ --_na-item-p: var(--su6) var(--su4);
3109
3140
  }
3110
3141
  .s-navigation.s-navigation__vertical {
3111
3142
  --_na-fd: column;
@@ -3113,16 +3144,17 @@ body.theme-highcontrast .s-navigation {
3113
3144
  --_na-p: 0;
3114
3145
  --_na-item-text-ta: unset;
3115
3146
  --_na-item-ws: normal;
3147
+ --_na-item-selected-h: 0;
3148
+ --_na-item-p: var(--su6) var(--su8);
3116
3149
  }
3117
- .s-navigation.s-navigation__muted {
3118
- --_na-item-selected-bg: var(--black-150);
3119
- --_na-item-selected-fc: var(--black-600);
3120
- --_na-item-selected-bg-hover: var(--_na-item-bg);
3150
+ .s-navigation.s-navigation__vertical .s-navigation--item.is-selected {
3151
+ --_na-item-bg: var(--black-150);
3152
+ }
3153
+ .s-navigation.s-navigation__vertical .s-navigation--item:has(.s-navigation--icon) {
3154
+ --_na-item-p: calc(var(--su12) - var(--su1)) var(--su8);
3121
3155
  }
3122
- body.theme-highcontrast .s-navigation.s-navigation__muted {
3123
- --_na-item-selected-bg: var(--black-600);
3124
- --_na-item-selected-fc: var(--black-150);
3125
- --_na-item-selected-bg-hover: var(--black-600);
3156
+ .s-navigation.s-navigation__vertical .s-navigation--item:has(.s-navigation--avatar) {
3157
+ --_na-item-p: var(--su12) var(--su8);
3126
3158
  }
3127
3159
  .s-navigation .s-navigation--item {
3128
3160
  background-color: var(--_na-item-bg);
@@ -3133,7 +3165,7 @@ body.theme-highcontrast .s-navigation.s-navigation__muted {
3133
3165
  white-space: var(--_na-item-ws);
3134
3166
  align-items: center;
3135
3167
  border: none;
3136
- border-radius: 1000px;
3168
+ border-radius: var(--br-md);
3137
3169
  box-shadow: none;
3138
3170
  cursor: pointer;
3139
3171
  display: flex;
@@ -3147,28 +3179,37 @@ body.theme-highcontrast .s-navigation.s-navigation__muted {
3147
3179
  --_na-item-bg-hover: var(--_na-item-selected-bg-hover);
3148
3180
  font-weight: bold;
3149
3181
  }
3150
- body.theme-highcontrast .s-navigation .s-navigation--item.is-selected {
3151
- text-decoration: none;
3182
+ .s-navigation .s-navigation--item.is-selected:before {
3183
+ content: "";
3184
+ position: absolute;
3185
+ bottom: 0;
3186
+ left: 0;
3187
+ right: 0;
3188
+ height: var(--_na-item-selected-h);
3189
+ background-color: var(--_na-item-selected-fc);
3152
3190
  }
3153
- .s-navigation .s-navigation--item__dropdown {
3154
- padding-right: 2em;
3191
+ body.theme-highcontrast .s-navigation .s-navigation--item.is-selected {
3192
+ --_na-item-fc-hover: var(--white);
3155
3193
  }
3156
3194
  .s-navigation .s-navigation--item__dropdown:after {
3157
- border-style: solid;
3158
- border-width: var(--su-static4) var(--su-static4) 0 var(--su-static4);
3159
- border-color: currentColor transparent;
3195
+ mask-image: var(--_na-after-mask);
3196
+ mask-size: contain;
3197
+ mask-repeat: no-repeat;
3198
+ background-color: var(--_na-after-bg-color);
3160
3199
  content: "";
3161
- pointer-events: none;
3162
- position: absolute;
3163
- right: 0.9em;
3164
- top: calc(50% - var(--su-static2));
3165
- z-index: var(--zi-active);
3200
+ height: var(--su12);
3201
+ width: var(--su12);
3202
+ margin-left: var(--su8);
3166
3203
  }
3167
3204
  .s-navigation .s-navigation--item:hover,
3168
3205
  .s-navigation .s-navigation--item:active {
3169
3206
  background-color: var(--_na-item-bg-hover);
3170
3207
  color: var(--_na-item-fc-hover);
3171
3208
  }
3209
+ body.theme-highcontrast .s-navigation .s-navigation--item:hover,
3210
+ body.theme-highcontrast .s-navigation .s-navigation--item:active {
3211
+ --_na-after-bg-color: var(--white);
3212
+ }
3172
3213
  .s-navigation .s-navigation--item:focus-visible {
3173
3214
  box-shadow: inset 0 0 0 var(--su-static2) var(--focus-theme), inset 0 0 0 var(--su-static4) var(--focus-neutral);
3174
3215
  outline: var(--su-static2) solid transparent !important;
@@ -3189,13 +3230,22 @@ body.theme-highcontrast .s-navigation .s-navigation--item.is-selected {
3189
3230
  .s-navigation .s-navigation--title {
3190
3231
  margin-top: var(--_na-title-mt);
3191
3232
  font-size: var(--fs-fine);
3192
- font-weight: bold;
3193
- padding: var(--su6) var(--su12);
3194
- text-transform: uppercase;
3233
+ color: var(--black-400);
3234
+ padding: calc(var(--su16) + var(--su2)) var(--su8);
3195
3235
  }
3196
3236
  .s-navigation .s-navigation--title:first-child {
3197
3237
  --_na-title-mt: 0;
3198
3238
  }
3239
+ .s-navigation .s-navigation--title .s-btn {
3240
+ color: var(--black-400);
3241
+ }
3242
+ .s-navigation .s-navigation--icon {
3243
+ color: inherit;
3244
+ margin-right: var(--su4);
3245
+ }
3246
+ .s-navigation .s-navigation--avatar {
3247
+ margin-right: var(--su8);
3248
+ }
3199
3249
  /**
3200
3250
  * Generate color variables with a given color name
3201
3251
  *
@@ -3385,7 +3435,7 @@ body.theme-highcontrast .s-notice__warning.s-notice__important {
3385
3435
  background-color: var(--_no-code-bg);
3386
3436
  color: var(--_no-code-fc);
3387
3437
  outline: var(--su-static1) solid var(--_no-code-bc);
3388
- border-radius: var(--br-sm);
3438
+ border-radius: var(--br-md);
3389
3439
  padding-left: var(--su2);
3390
3440
  padding-right: var(--su2);
3391
3441
  }
@@ -3457,63 +3507,64 @@ ul.s-pagination {
3457
3507
  padding: 0;
3458
3508
  }
3459
3509
  .s-pagination .s-pagination--item {
3460
- --_pa-item-bg: transparent;
3461
- --_pa-item-bc: var(--bc-darker);
3462
- --_pa-item-fc: var(--fc-medium);
3463
- --_pa-item-bg-focus: var(--black-400);
3464
- --_pa-item-fc-focus: var(--white);
3465
- --_pa-item-bg-hover: var(--black-225);
3466
- --_pa-item-bc-hover: var(--bc-darker);
3467
- --_pa-item-fc-hover: var(--fc-dark);
3510
+ --_pa-item-bg: unset;
3511
+ --_pa-item-br: unset;
3512
+ --_pa-item-fc: var(--black-400);
3513
+ --_pa-item-p: var(--su-static4);
3468
3514
  background-color: var(--_pa-item-bg);
3469
- border: 1px solid var(--_pa-item-bc);
3515
+ border-radius: var(--_pa-item-br);
3470
3516
  color: var(--_pa-item-fc);
3471
- border-radius: var(--br-sm);
3472
- display: inline-block;
3473
- font-size: var(--fs-body1);
3474
- line-height: var(--lh-xl);
3475
- padding: 0 var(--su8);
3476
- }
3477
- body.theme-highcontrast .s-pagination .s-pagination--item {
3478
- text-decoration: none;
3517
+ padding: var(--_pa-item-p);
3518
+ display: inline-flex;
3519
+ align-items: center;
3520
+ justify-content: center;
3521
+ margin: var(--su-static1);
3522
+ position: relative;
3479
3523
  }
3480
3524
  .s-pagination .s-pagination--item.is-selected {
3481
- --_pa-item-bg: var(--theme-primary);
3482
- --_pa-item-bc: transparent;
3483
- --_pa-item-fc: var(--white);
3484
- --_pa-item-bg-focus: var(--theme-primary-400);
3485
- }
3486
- .s-pagination .s-pagination--item.s-pagination--item__clear {
3487
- --_pa-item-bg: transparent;
3488
- --_pa-item-bc: transparent;
3489
- --_pa-item-fc: inherit;
3490
- }
3491
- .s-pagination .s-pagination--item.is-selected,
3492
- .s-pagination .s-pagination--item.s-pagination--item__clear {
3493
- --_pa-item-bc-hover: var(--_pa-item-bc);
3494
- --_pa-item-bg-hover: var(--_pa-item-bg);
3495
- --_pa-item-fc-hover: var(--_pa-item-fc);
3496
- }
3497
- .s-pagination .s-pagination--item:hover {
3498
- background-color: var(--_pa-item-bg-hover);
3499
- border-color: var(--_pa-item-bc-hover);
3500
- color: var(--_pa-item-fc-hover);
3525
+ --_pa-item-fc: var(--black-600);
3526
+ }
3527
+ .s-pagination .s-pagination--item.is-selected:not(:hover):not(:focus-visible):before {
3528
+ background-color: var(--black-600);
3529
+ content: "";
3530
+ height: var(--su-static2);
3531
+ left: 0;
3532
+ position: absolute;
3533
+ right: 0;
3534
+ top: 100%;
3535
+ }
3536
+ .s-pagination .s-pagination--item.s-pagination--item__nav {
3537
+ --_pa-item-bg: var(--black-150);
3538
+ --_pa-item-br: var(--br-circle);
3539
+ --_pa-item-fc: var(--black-600);
3540
+ --_pa-item-p: var(--su-static6);
3541
+ aspect-ratio: 1 / 1;
3542
+ }
3543
+ .s-pagination .s-pagination--item.s-pagination--item__nav:hover {
3544
+ --_pa-item-bg: var(--black-200);
3545
+ }
3546
+ .s-pagination .s-pagination--item[href]:hover:not(.s-pagination .s-pagination--item__nav) {
3547
+ --_pa-item-bg: var(--black-150);
3548
+ --_pa-item-br: var(--br-pill);
3549
+ --_pa-item-fc: var(--black-600);
3501
3550
  }
3502
3551
  .s-pagination .s-pagination--item:focus-visible {
3503
- border-color: var(--focus-theme) !important;
3504
- box-shadow: inset 0 0 0 var(--su-static1) var(--focus-theme), inset 0 0 0 calc(var(--su-static4) - var(--su-static1)) var(--focus-neutral);
3552
+ --_pa-item-bg: var(--black-150);
3553
+ --_pa-item-fc: var(--black-600);
3554
+ border-color: var(--focus-neutral) !important;
3555
+ box-shadow: 0 0 0 var(--su-static1) var(--focus-neutral), 0 0 0 calc(var(--su-static4) - var(--su-static1)) var(--focus-theme);
3505
3556
  outline: var(--su-static2) solid transparent !important;
3506
3557
  }
3507
- .s-pagination .s-pagination--item:focus-visible,
3558
+ .s-pagination .s-pagination--item:focus-visible:not(.s-pagination .s-pagination--item__nav),
3508
3559
  .s-pagination .s-pagination--item.focus-inset-bordered {
3509
- background-color: var(--_pa-item-bg-focus);
3510
- color: var(--_pa-item-fc-focus);
3560
+ --_pa-item-br: var(--br-md);
3511
3561
  }
3512
3562
  .s-pagination,
3513
3563
  .s-pagination ul {
3514
3564
  display: flex;
3565
+ align-items: center;
3515
3566
  flex-wrap: wrap;
3516
- gap: var(--su4);
3567
+ gap: var(--su2);
3517
3568
  }
3518
3569
  .s-popover {
3519
3570
  --_po-bg: var(--white);
@@ -3522,21 +3573,10 @@ body.theme-highcontrast .s-pagination .s-pagination--item {
3522
3573
  --_po-d: none;
3523
3574
  --_po-wmn: 12rem;
3524
3575
  --_po-w: 100%;
3525
- --_po-arrow-fc: var(--white);
3526
- --_po-arrow-b: unset;
3527
- --_po-arrow-l: unset;
3528
- --_po-arrow-r: unset;
3529
- --_po-arrow-t: unset;
3530
- --_po-arrow-ps: calc(var(--su6) * -1);
3531
- --_po-arrow-after-b: unset;
3532
- --_po-arrow-after-l: unset;
3533
- --_po-arrow-after-r: unset;
3534
- --_po-arrow-after-t: unset;
3535
- --_po-arrow-after-bs: unset;
3536
3576
  --_po-topbar-height: var(--theme-topbar-height, calc(var(--su-static48) + var(--su-static8)));
3537
3577
  --_po-content-mxh: calc(100vh - var(--_po-topbar-height) - var(--su48));
3538
3578
  background-color: var(--_po-bg);
3539
- border: 1px solid var(--_po-bc);
3579
+ border: var(--su-static1) solid var(--_po-bc);
3540
3580
  box-shadow: var(--_po-bs);
3541
3581
  display: var(--_po-d);
3542
3582
  min-width: var(--_po-wmn);
@@ -3552,19 +3592,13 @@ body.theme-highcontrast .s-pagination .s-pagination--item {
3552
3592
  }
3553
3593
  @media (prefers-color-scheme: dark) {
3554
3594
  body.theme-system .s-popover {
3555
- --_po-bg: var(--black-200);
3556
- --_po-bc: var(--bc-light);
3557
- --_po-bs: var(--bs-lg);
3558
- --_po-arrow-fc: var(--black-200);
3595
+ --_po-bg: var(--black-100);
3559
3596
  }
3560
3597
  }
3561
3598
  body.theme-dark .s-popover,
3562
3599
  .theme-dark__forced .s-popover,
3563
3600
  body.theme-system .theme-dark__forced .s-popover {
3564
- --_po-bg: var(--black-200);
3565
- --_po-bc: var(--bc-light);
3566
- --_po-bs: var(--bs-lg);
3567
- --_po-arrow-fc: var(--black-200);
3601
+ --_po-bg: var(--black-100);
3568
3602
  }
3569
3603
  .s-popover.is-visible {
3570
3604
  --_po-d: block;
@@ -3573,113 +3607,11 @@ body.theme-system .theme-dark__forced .s-popover {
3573
3607
  --_po-wmn: unset;
3574
3608
  --_po-w: auto;
3575
3609
  }
3576
- .s-popover[data-popper-placement^="top"] > .s-popover--arrow,
3577
- .s-popover .s-popover--arrow__bc,
3578
- .s-popover .s-popover--arrow__bl,
3579
- .s-popover .s-popover--arrow__br {
3580
- --_po-arrow-b: var(--_po-arrow-ps);
3581
- --_po-arrow-after-b: var(--su-static1);
3582
- --_po-arrow-after-bs: 2px 2px 5px 0 hsla(0, 0%, 0%, 0.07), 2px 2px 2px -1px hsla(0, 0%, 0%, 0.1);
3583
- }
3584
- body.theme-highcontrast .s-popover[data-popper-placement^="top"] > .s-popover--arrow,
3585
- body.theme-highcontrast .s-popover .s-popover--arrow__bc,
3586
- body.theme-highcontrast .s-popover .s-popover--arrow__bl,
3587
- body.theme-highcontrast .s-popover .s-popover--arrow__br {
3588
- --_po-arrow-after-bs: 1px 1px 0 0 var(--bc-medium);
3589
- }
3590
- .s-popover[data-popper-placement^="bottom"] > .s-popover--arrow,
3591
- .s-popover .s-popover--arrow__tc,
3592
- .s-popover .s-popover--arrow__tl,
3593
- .s-popover .s-popover--arrow__tr {
3594
- --_po-arrow-t: var(--_po-arrow-ps);
3595
- --_po-arrow-after-t: var(--su-static1);
3596
- --_po-arrow-after-bs: -1px -1px 1px 0 hsla(0, 0%, 0%, 0.12);
3597
- }
3598
- body.theme-highcontrast .s-popover[data-popper-placement^="bottom"] > .s-popover--arrow,
3599
- body.theme-highcontrast .s-popover .s-popover--arrow__tc,
3600
- body.theme-highcontrast .s-popover .s-popover--arrow__tl,
3601
- body.theme-highcontrast .s-popover .s-popover--arrow__tr {
3602
- --_po-arrow-after-bs: -1px -1px 0 0 var(--bc-medium);
3603
- }
3604
- .s-popover[data-popper-placement^="left"] > .s-popover--arrow,
3605
- .s-popover .s-popover--arrow__rc,
3606
- .s-popover .s-popover--arrow__rt,
3607
- .s-popover .s-popover--arrow__rb {
3608
- --_po-arrow-r: var(--_po-arrow-ps);
3609
- --_po-arrow-after-r: var(--su-static1);
3610
- --_po-arrow-after-bs: 2px -2px 5px 0 hsla(0, 0%, 0%, 0.07), 2px -2px 2px -1px hsla(0, 0%, 0%, 0.1);
3611
- }
3612
- body.theme-highcontrast .s-popover[data-popper-placement^="left"] > .s-popover--arrow,
3613
- body.theme-highcontrast .s-popover .s-popover--arrow__rc,
3614
- body.theme-highcontrast .s-popover .s-popover--arrow__rt,
3615
- body.theme-highcontrast .s-popover .s-popover--arrow__rb {
3616
- --_po-arrow-after-bs: 1px -1px 0 0 var(--bc-medium);
3617
- }
3618
- .s-popover[data-popper-placement^="right"] > .s-popover--arrow,
3619
- .s-popover .s-popover--arrow__lc,
3620
- .s-popover .s-popover--arrow__lt,
3621
- .s-popover .s-popover--arrow__lb {
3622
- --_po-arrow-l: var(--_po-arrow-ps);
3623
- --_po-arrow-after-l: var(--su-static1);
3624
- --_po-arrow-after-bs: -2px 2px 5px 0 hsla(0, 0%, 0%, 0.07), -2px 2px 2px -1px hsla(0, 0%, 0%, 0.1);
3625
- }
3626
- body.theme-highcontrast .s-popover[data-popper-placement^="right"] > .s-popover--arrow,
3627
- body.theme-highcontrast .s-popover .s-popover--arrow__lc,
3628
- body.theme-highcontrast .s-popover .s-popover--arrow__lt,
3629
- body.theme-highcontrast .s-popover .s-popover--arrow__lb {
3630
- --_po-arrow-after-bs: -1px 1px 0 0 var(--bc-medium);
3631
- }
3632
- .s-popover .s-popover--arrow__tc,
3633
- .s-popover .s-popover--arrow__bc {
3634
- --_po-arrow-l: calc(50% - var(--su6));
3635
- }
3636
- .s-popover .s-popover--arrow__lc,
3637
- .s-popover .s-popover--arrow__rc {
3638
- --_po-arrow-t: calc(50% - var(--su6));
3639
- }
3640
- .s-popover .s-popover--arrow__tr,
3641
- .s-popover .s-popover--arrow__br {
3642
- --_po-arrow-r: var(--su12);
3643
- }
3644
- .s-popover .s-popover--arrow__rb,
3645
- .s-popover .s-popover--arrow__lb {
3646
- --_po-arrow-b: var(--su12);
3647
- }
3648
- .s-popover .s-popover--arrow {
3649
- bottom: var(--_po-arrow-b);
3650
- color: var(--_po-arrow-fc);
3651
- left: var(--_po-arrow-l);
3652
- right: var(--_po-arrow-r);
3653
- top: var(--_po-arrow-t);
3654
- }
3655
- .s-popover .s-popover--arrow,
3656
- .s-popover .s-popover--arrow:before,
3657
- .s-popover .s-popover--arrow:after {
3658
- display: block;
3659
- height: var(--su12);
3660
- position: absolute;
3661
- width: var(--su12);
3662
- z-index: -1;
3663
- }
3664
- .s-popover .s-popover--arrow:before,
3665
- .s-popover .s-popover--arrow:after {
3666
- content: '';
3667
- transform: rotate(45deg);
3668
- }
3669
- .s-popover .s-popover--arrow:after {
3670
- bottom: var(--_po-arrow-after-b);
3671
- box-shadow: var(--_po-arrow-after-bs);
3672
- left: var(--_po-arrow-after-l);
3673
- right: var(--_po-arrow-after-r);
3674
- top: var(--_po-arrow-after-t);
3675
- background: currentColor;
3676
- border-radius: calc(var(--su-static1) * 1.5);
3677
- }
3678
3610
  .s-popover .s-popover--close {
3679
3611
  float: right;
3680
3612
  top: calc(var(--su8) * -1);
3681
3613
  right: calc(var(--su8) * -1);
3682
- padding: var(--su8) !important;
3614
+ padding: var(--su6) !important;
3683
3615
  }
3684
3616
  .s-popover .s-popover--content {
3685
3617
  max-height: var(--_po-content-mxh);
@@ -3692,7 +3624,7 @@ body.theme-highcontrast .s-popover .s-popover--arrow__lb {
3692
3624
  --_ps-bg: unset;
3693
3625
  --_ps-o: unset;
3694
3626
  --_ps-content-excerpt-fc: var(--_ps-state-fc, var(--fc-medium));
3695
- --_ps-content-title-a-fc: var(--_ps-state-fc, var(--theme-post-title-color, var(--theme-link-color, var(--theme-secondary-400))));
3627
+ --_ps-content-title-a-fc: var(--_ps-state-fc, var(--theme-post-title-color, var(--theme-link-color, var(--theme-secondary))));
3696
3628
  --_ps-content-title-a-fc-hover: var(--_ps-state-fc, var(--theme-post-title-color-hover, var(--theme-link-color-hover, var(--theme-secondary-500))));
3697
3629
  --_ps-content-title-a-fc-visited: var(--_ps-state-fc, var(--theme-post-title-color-visited, var(--theme-link-color-visited, var(--purple-500))));
3698
3630
  --_ps-content-title-a-fc-hover-visited: var(--_ps-state-fc, var(--theme-post-title-color-hover, var(--theme-link-color-hover, var(--purple-600))));
@@ -3778,6 +3710,7 @@ body.theme-highcontrast .s-popover .s-popover--arrow__lb {
3778
3710
  .s-post-summary.s-post-summary__ignored .s-post-summary--meta-tags .s-tag .focus-bordered {
3779
3711
  background-color: var(--_ps-meta-tags-tag-bg);
3780
3712
  color: var(--black-500);
3713
+ border-color: var(--black-300);
3781
3714
  }
3782
3715
  body.theme-highcontrast .s-post-summary.s-post-summary__deleted .s-post-summary--meta-tags a,
3783
3716
  body.theme-highcontrast .s-post-summary.s-post-summary__ignored .s-post-summary--meta-tags a,
@@ -3858,7 +3791,7 @@ body.theme-system .theme-dark__forced .s-post-summary.s-post-summary__deleted .s
3858
3791
  .s-post-summary.s-post-summary__watched:not(.s-post-summary__deleted):not(.s-post-summary__ignored) {
3859
3792
  --_ps-bg: var(--yellow-100);
3860
3793
  --_ps-stats-fc: var(--black-400);
3861
- --_ps-content-title-a-fc: var(--theme-post-title-color, var(--theme-link-color, var(--theme-secondary-400)));
3794
+ --_ps-content-title-a-fc: var(--theme-post-title-color, var(--theme-link-color, var(--theme-secondary)));
3862
3795
  --_ps-content-title-a-fc-hover: var(--theme-post-title-color-hover, var(--theme-link-color-hover, var(--theme-secondary-500)));
3863
3796
  --_ps-content-title-a-fc-visited: var(--theme-post-title-color-visited, var(--theme-link-color-visited, var(--purple-500)));
3864
3797
  --_ps-content-title-a-fc-hover-visited: var(--theme-post-title-color-hover, var(--theme-link-color-hover, var(--purple-600)));
@@ -4091,7 +4024,7 @@ body.theme-highcontrast .s-post-summary .s-post-summary--answer:before {
4091
4024
  .s-post-summary .s-post-summary--stats-item.is-pinned,
4092
4025
  .s-post-summary .s-post-summary--stats-item.is-published,
4093
4026
  .s-post-summary .s-post-summary--stats-item.is-review {
4094
- border-radius: var(--br-sm);
4027
+ border-radius: var(--br-md);
4095
4028
  padding: var(--su2) var(--su4);
4096
4029
  }
4097
4030
  .s-post-summary .s-post-summary--stats-item.has-answers {
@@ -4152,13 +4085,13 @@ body.theme-highcontrast .s-post-summary .s-post-summary--answer:before {
4152
4085
  font-weight: 500;
4153
4086
  }
4154
4087
  .s-progress {
4155
- --_pr-bar: var(--br-sm);
4088
+ --_pr-bar: var(--br-md);
4156
4089
  --_pr-bg: var(--black-300);
4157
4090
  --_pr-h: unset;
4158
4091
  --_pr-size: unset;
4159
4092
  --_pr-w: 100%;
4160
4093
  --_pr-hmn: var(--su-static4);
4161
- --_pr-bar-bar: var(--br-sm);
4094
+ --_pr-bar-bar: var(--br-md);
4162
4095
  --_pr-bar-bg: var(--green-400);
4163
4096
  --_pr-bar-hmn: var(--su-static4);
4164
4097
  --_pr-label-ai: unset;
@@ -4179,19 +4112,19 @@ body.theme-highcontrast .s-post-summary .s-post-summary--answer:before {
4179
4112
  --_pr-bar-bg: var(--orange-400);
4180
4113
  }
4181
4114
  .s-progress.s-progress__bronze {
4182
- --_pr-bar-bg: var(--bronze-100);
4183
- --_pr-label-bc: var(--bronze-400);
4115
+ --_pr-bar-bg: var(--orange-100);
4116
+ --_pr-label-bc: var(--orange-400);
4184
4117
  }
4185
4118
  .s-progress.s-progress__gold {
4186
- --_pr-bar-bg: var(--gold-100);
4187
- --_pr-label-bc: var(--gold-400);
4119
+ --_pr-bar-bg: var(--yellow-100);
4120
+ --_pr-label-bc: var(--yellow-400);
4188
4121
  }
4189
4122
  .s-progress.s-progress__info {
4190
4123
  --_pr-bar-bg: var(--blue-400);
4191
4124
  }
4192
4125
  .s-progress.s-progress__silver {
4193
- --_pr-bar-bg: var(--silver-100);
4194
- --_pr-label-bc: var(--silver-400);
4126
+ --_pr-bar-bg: var(--blue-100);
4127
+ --_pr-label-bc: var(--blue-400);
4195
4128
  }
4196
4129
  .s-progress.s-progress__badge,
4197
4130
  .s-progress.s-progress__privilege {
@@ -4294,18 +4227,18 @@ body.theme-highcontrast .s-progress.s-progress__privilege {
4294
4227
  position: relative;
4295
4228
  }
4296
4229
  .s-progress.s-progress__stepped .s-progress--step.is-active .s-progress--bar.s-progress--bar__left {
4297
- background: var(--theme-secondary-400);
4230
+ background: var(--theme-secondary);
4298
4231
  }
4299
4232
  .s-progress.s-progress__stepped .s-progress--step.is-active .s-progress--label {
4300
4233
  color: var(--fc-dark);
4301
4234
  }
4302
4235
  .s-progress.s-progress__stepped .s-progress--step.is-active .s-progress--stop {
4303
- background: var(--theme-secondary-400);
4236
+ background: var(--theme-secondary);
4304
4237
  box-shadow: 0 0 0 var(--su-static6) var(--translucent-secondary);
4305
4238
  }
4306
4239
  .s-progress.s-progress__stepped .s-progress--step.is-complete .s-progress--bar,
4307
4240
  .s-progress.s-progress__stepped .s-progress--step.is-complete .s-progress--stop {
4308
- background: var(--theme-secondary-400);
4241
+ background: var(--theme-secondary);
4309
4242
  }
4310
4243
  .s-progress.s-progress__stepped .s-progress--step.is-complete .s-progress--label {
4311
4244
  color: var(--fc-dark);
@@ -4456,7 +4389,7 @@ body.theme-highcontrast .s-prose {
4456
4389
  padding: var(--su2) var(--su4);
4457
4390
  color: var(--black-600);
4458
4391
  background-color: var(--black-200);
4459
- border-radius: var(--br-sm);
4392
+ border-radius: var(--br-md);
4460
4393
  }
4461
4394
  .s-prose blockquote:last-child,
4462
4395
  .s-prose dl:last-child,
@@ -4741,7 +4674,7 @@ body.theme-highcontrast .s-prose {
4741
4674
  border-top-color: var(--_pr-kbd-btc, var(--_pr-kbd-bc));
4742
4675
  box-shadow: var(--_pr-kbd-bs);
4743
4676
  background-color: var(--black-200);
4744
- border-radius: var(--br-sm);
4677
+ border-radius: var(--br-md);
4745
4678
  color: var(--black-600);
4746
4679
  display: inline-block;
4747
4680
  font-family: var(--ff-sans);
@@ -4858,15 +4791,15 @@ body.theme-highcontrast .s-prose {
4858
4791
  width: 100%;
4859
4792
  }
4860
4793
  .s-select {
4861
- --_se-arrow-bc: currentColor transparent;
4862
- --_se-arrow-size: var(--su-static4);
4794
+ --_se-arrow-fc: currentColor;
4863
4795
  --_se-select-bc: var(--bc-darker);
4864
4796
  --_se-select-bg: var(--white);
4865
4797
  --_se-select-br: var(--br-md);
4866
4798
  --_se-select-fc: var(--black);
4867
4799
  --_se-select-px: 0.7em;
4868
- --_se-select-py: 0.6em;
4800
+ --_se-select-py: var(--su-static8);
4869
4801
  --_se-select-fs: var(--fs-body1);
4802
+ --_se-select-lh: var(--lh-base);
4870
4803
  color: var(--fc-dark);
4871
4804
  position: relative;
4872
4805
  }
@@ -4898,28 +4831,14 @@ body.theme-highcontrast .s-prose {
4898
4831
  .has-warning .s-select {
4899
4832
  --_se-select-bc: var(--yellow-500);
4900
4833
  }
4901
- .is-disabled .s-select {
4902
- --_se-arrow-bc: var(--bc-dark) transparent;
4903
- }
4904
4834
  .s-select.s-select__sm {
4905
4835
  --_se-select-fs: var(--fs-caption);
4906
- }
4907
- .s-select.s-select__md {
4908
- --_se-select-fs: var(--fs-body3);
4909
- --_se-select-br: calc(var(--br-sm) + var(--su-static1));
4910
- --_se-select-py: 0.5em;
4836
+ --_se-select-lh: var(--lh-sm);
4837
+ --_se-select-py: calc(var(--su6) - var(--su-static1) / 2);
4911
4838
  }
4912
4839
  .s-select.s-select__lg {
4913
- --_se-select-fs: var(--fs-title);
4914
- --_se-select-br: calc(var(--br-sm) + var(--su-static1));
4915
- --_se-select-px: 0.6em;
4916
- --_se-select-py: 0.45em;
4917
- }
4918
- .s-select.s-select__xl {
4919
- --_se-select-fs: var(--fs-headline1);
4920
- --_se-select-br: var(--br-md);
4921
- --_se-select-px: 0.5em;
4922
- --_se-select-py: 0.4em;
4840
+ --_se-select-fs: var(--fs-body3);
4841
+ --_se-select-lh: var(--lh-lg);
4923
4842
  }
4924
4843
  select.s-select:-webkit-autofill,
4925
4844
  .s-select > select:-webkit-autofill {
@@ -4937,24 +4856,27 @@ select.s-select::-webkit-contacts-auto-fill-button,
4937
4856
  .s-select > select::-webkit-contacts-auto-fill-button {
4938
4857
  background-color: var(--black);
4939
4858
  }
4940
- .s-select:before,
4941
4859
  .s-select:after {
4942
- border-color: var(--_se-arrow-bc);
4943
- border-style: solid;
4944
- border-width: var(--_se-arrow-size);
4860
+ background-color: currentColor;
4945
4861
  content: "";
4862
+ height: var(--su-static16);
4863
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M13.06 10 8 15.06 2.94 10 4 8.94l.53.53L8 12.94l3.47-3.47.53-.53zm0-4L12 7.06l-.53-.53L8 3.06 4.53 6.53 4 7.06 2.94 6 8 .94z'/%3E%3C/svg%3E");
4864
+ mask-repeat: no-repeat;
4865
+ mask-position: center;
4866
+ mask-size: contain;
4946
4867
  pointer-events: none;
4947
4868
  position: absolute;
4948
- right: calc(var(--su-static12) + var(--su-static1));
4869
+ right: calc(var(--su32) - var(--su-static24));
4870
+ top: 50%;
4871
+ transform: translateY(-50%);
4872
+ width: var(--su-static16);
4949
4873
  z-index: var(--zi-selected);
4950
4874
  }
4951
- .s-select:after {
4952
- border-bottom-width: 0;
4953
- top: calc(50% + var(--su-static1));
4875
+ .is-disabled .s-select {
4876
+ --_se-arrow-fc: var(--bc-dark);
4954
4877
  }
4955
- .s-select:before {
4956
- border-top-width: 0;
4957
- top: calc(50% - calc(var(--_se-arrow-size) + var(--su-static1)));
4878
+ .is-disabled .s-select:after {
4879
+ background-color: var(--_se-arrow-fc);
4958
4880
  }
4959
4881
  .s-select > select {
4960
4882
  background-color: var(--_se-select-bg);
@@ -4966,7 +4888,7 @@ select.s-select::-webkit-contacts-auto-fill-button,
4966
4888
  appearance: none;
4967
4889
  font-family: inherit;
4968
4890
  height: 100%;
4969
- line-height: var(--lh-sm);
4891
+ line-height: var(--_se-select-lh);
4970
4892
  outline: 0;
4971
4893
  padding-right: var(--su32);
4972
4894
  position: relative;
@@ -4975,7 +4897,8 @@ select.s-select::-webkit-contacts-auto-fill-button,
4975
4897
  fieldset[disabled] .s-select > select,
4976
4898
  .s-select > select[disabled] {
4977
4899
  cursor: not-allowed;
4978
- opacity: var(--_o-disabled-static);
4900
+ --_se-select-fc: var(--black-300);
4901
+ --_se-select-bg: var(--black-100);
4979
4902
  }
4980
4903
  .s-select > select[readonly],
4981
4904
  .is-readonly .s-select > select {
@@ -5231,7 +5154,7 @@ body.theme-highcontrast .s-skeleton {
5231
5154
  .s-skeleton:before {
5232
5155
  background-image: linear-gradient(to right, var(--_sk-bg-1) 8%, var(--_sk-bg-2) 16%, var(--_sk-bg-3) 25%, var(--_sk-bg-1) 42%, var(--_sk-bg-2) 58%, var(--_sk-bg-3) 75%, var(--_sk-bg-1) 83%);
5233
5156
  background-size: 400% 100%;
5234
- border-radius: var(--br-lg);
5157
+ border-radius: var(--br-md);
5235
5158
  display: block;
5236
5159
  height: var(--su16);
5237
5160
  position: relative;
@@ -5631,87 +5554,80 @@ body.theme-highcontrast .s-skeleton {
5631
5554
  .s-tag {
5632
5555
  --_ta-bc: var(--theme-tag-border-color, var(--_ta-bg));
5633
5556
  --_ta-bg: var(--theme-tag-background-color, var(--black-150));
5634
- --_ta-fc: var(--theme-tag-color, var(--black-500));
5557
+ --_ta-fc: var(--theme-tag-color, var(--black-600));
5635
5558
  --_ta-bc-hover: var(--theme-tag-hover-border-color, var(--_ta-bg-hover));
5636
5559
  --_ta-bg-hover: var(--theme-tag-hover-background-color, var(--black-200));
5637
5560
  --_ta-fc-hover: var(--theme-tag-hover-color, var(--black-600));
5638
- --_ta-br: var(--br-sm);
5639
5561
  --_ta-fs: var(--fs-caption);
5640
- --_ta-lh: 1.84615385;
5641
- --_ta-pl: var(--_ta-px);
5642
- --_ta-pr: var(--_ta-px);
5643
- --_ta-px: var(--su4);
5644
- --_ta-dismiss-padding: calc(var(--_ta-px) - var(--su-static1));
5562
+ --_ta-pb: calc(var(--_ta-pt) + var(--su1));
5563
+ --_ta-pl: var(--su8);
5564
+ --_ta-pr: var(--su8);
5565
+ --_ta-pt: var(--su4);
5645
5566
  background-color: var(--_ta-bg);
5646
5567
  border: var(--su-static1) solid var(--_ta-bc);
5647
- border-radius: var(--_ta-br);
5648
5568
  color: var(--_ta-fc);
5649
5569
  font-size: var(--_ta-fs);
5650
- line-height: var(--_ta-lh);
5651
- padding-left: var(--_ta-pl);
5652
- padding-right: var(--_ta-pr);
5570
+ padding: var(--_ta-pt) var(--_ta-pr) var(--_ta-pb) var(--_ta-pl);
5653
5571
  align-items: center;
5654
5572
  display: inline-flex;
5655
- font-weight: 700;
5573
+ gap: var(--su4);
5656
5574
  justify-content: center;
5657
- min-width: 0;
5575
+ line-height: var(--lh-xs);
5658
5576
  text-decoration: none;
5659
- vertical-align: middle;
5660
5577
  white-space: nowrap;
5661
5578
  }
5662
5579
  body.theme-highcontrast .s-tag:not(body.theme-highcontrast .s-tag__moderator):not(body.theme-highcontrast .s-tag__required) {
5663
5580
  --_ta-bc: var(--theme-tag-border-color, var(--black-300));
5664
5581
  --_ta-bc-hover: var(--theme-tag-hover-border-color, var(--black-300));
5665
5582
  }
5666
- .s-tag.s-tag__xs {
5667
- --_ta-fs: var(--fs-fine);
5668
- --_ta-lh: 1.4;
5669
- --_ta-px: var(--su2);
5583
+ body.theme-highcontrast .s-tag:not(body.theme-highcontrast .s-tag__moderator):not(body.theme-highcontrast .s-tag__required).s-tag__ignored {
5584
+ --_ta-fc: var(--black-500);
5670
5585
  }
5671
5586
  .s-tag.s-tag__sm {
5672
- --_ta-fs: var(--fs-caption);
5673
- --_ta-lh: 1.5;
5674
- }
5675
- .s-tag.s-tag__md {
5676
- --_ta-px: var(--su6);
5677
- --_ta-fs: var(--fs-body2);
5678
- --_ta-lh: 1.73333333;
5587
+ --_ta-pl: var(--su4);
5588
+ --_ta-pr: var(--su4);
5589
+ --_ta-pt: var(--su1);
5679
5590
  }
5680
5591
  .s-tag.s-tag__lg {
5681
- --_ta-br: calc(var(--br-sm) + var(--su-static1));
5682
- --_ta-fs: var(--fs-subheading);
5683
- --_ta-lh: 1.68421053;
5684
- --_ta-px: var(--su6);
5685
- }
5686
- .s-tag__ignored,
5687
- .s-tag.s-tag__ignored,
5688
- .s-tag__watched,
5689
- .s-tag.s-tag__watched {
5690
- --_ta-pl: calc(var(--su-static24) - var(--su-static2));
5691
- --_ta-before-size: calc(var(--su-static16) - var(--su-static2));
5692
- position: relative;
5592
+ --_ta-fs: var(--fs-body1);
5593
+ --_ta-pt: var(--su4);
5693
5594
  }
5694
- .s-tag__ignored:before,
5695
5595
  .s-tag.s-tag__ignored:before,
5696
- .s-tag__watched:before,
5697
5596
  .s-tag.s-tag__watched:before {
5698
- height: var(--_ta-before-size);
5699
- width: var(--_ta-before-size);
5700
5597
  -webkit-mask: var(--_ta-before-icon) no-repeat center;
5701
5598
  mask: var(--_ta-before-icon) no-repeat center;
5702
5599
  background-color: currentColor;
5703
5600
  content: "";
5704
5601
  display: block;
5705
- left: var(--su-static4);
5706
- margin-right: var(--su2);
5707
- position: absolute;
5708
- top: calc(50% - calc(var(--su-static8) - var(--su-static1)));
5602
+ height: calc(var(--su-static16) - var(--su-static2));
5709
5603
  -webkit-mask-size: contain;
5710
5604
  mask-size: contain;
5605
+ width: calc(var(--su-static16) - var(--su-static2));
5606
+ }
5607
+ .s-tag.s-tag__deleted,
5608
+ .s-tag.s-tag__ignored,
5609
+ .s-tag.s-tag__deleted.s-tag__required:not(.s-tag.s-tag__deleted__moderator),
5610
+ .s-tag.s-tag__ignored.s-tag__required:not(.s-tag.s-tag__deleted__moderator),
5611
+ .s-tag.s-tag__deleted.s-tag__required:not(.s-tag.s-tag__ignored__moderator),
5612
+ .s-tag.s-tag__ignored.s-tag__required:not(.s-tag.s-tag__ignored__moderator),
5613
+ .s-tag.s-tag__deleted.s-tag__moderator,
5614
+ .s-tag.s-tag__ignored.s-tag__moderator {
5615
+ --_ta-bc-hover: var(--_ta-bc);
5616
+ --_ta-bg-hover: var(--_ta-bg);
5617
+ --_ta-fc-hover: var(--_ta-fc);
5618
+ }
5619
+ .s-tag.s-tag__deleted {
5620
+ --_ta-fc: var(--black-500);
5621
+ }
5622
+ .s-tag.s-tag__deleted.s-tag__required:not(.s-tag.s-tag__deleted__moderator) {
5623
+ --_ta-bc: var(--black-300);
5624
+ --_ta-fc: var(--black-400);
5711
5625
  }
5712
- .s-tag__ignored,
5713
5626
  .s-tag.s-tag__ignored {
5627
+ --_ta-bg-hover: var(--_ta-bg);
5714
5628
  --_ta-before-icon: url("data:image/svg+xml;,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3.52 7.38 1.58 9.26A12.38 12.38 0 0 1 0 7s2.63-5.14 7.05-5.14c.66 0 1.28.12 1.86.32L7.44 3.6a3.48 3.48 0 0 0-3.92 3.78ZM5.3 9.99c.5.28 1.1.44 1.71.44 1.94 0 3.5-1.53 3.5-3.43 0-.62-.17-1.21-.47-1.72L8.7 6.6a1.73 1.73 0 0 1-2.08 2.07L5.29 10Zm6.23-6.19A12.7 12.7 0 0 1 14 7s-2.63 5.14-6.95 5.14A6.1 6.1 0 0 1 4 11.3L2.27 13l-1.4-1.36L11.9 1l1.23 1.2-1.6 1.6Z'/%3E%3C/svg%3E");
5629
+ --_ta-fc: var(--black-400);
5630
+ --_ta-fc-hover: var(--black-400);
5715
5631
  }
5716
5632
  .s-tag.s-tag__moderator {
5717
5633
  --_ta-bc: var(--orange-300);
@@ -5722,53 +5638,40 @@ body.theme-highcontrast .s-tag:not(body.theme-highcontrast .s-tag__moderator):no
5722
5638
  --_ta-fc-hover: var(--orange-600);
5723
5639
  }
5724
5640
  .s-tag.s-tag__required:not(.s-tag__moderator) {
5725
- --_ta-bc: var(--theme-tag-required-border-color, var(--theme-tag-border-color, var(--black-400)));
5726
- --_ta-bg: var(--theme-tag-required-background-color, var(--theme-tag-background-color, var(--black-150)));
5727
- --_ta-fc: var(--theme-tag-required-color, var(--theme-tag-color, var(--black-500)));
5641
+ --_ta-bc: var(--theme-tag-required-border-color, var(--theme-tag-border-color, var(--black-500)));
5728
5642
  --_ta-bc-hover: var(--theme-tag-required-hover-border-color, var(--theme-tag-hover-border-color, var(--black-600)));
5729
- --_ta-bg-hover: var(--theme-tag-required-hover-background-color, var(--theme-tag-hover-background-color, var(--black-200)));
5730
- --_ta-fc-hover: var(--theme-tag-required-hover-color, var(--theme-tag-hover-color, var(--black-600)));
5731
5643
  }
5732
- .s-tag__watched,
5733
5644
  .s-tag.s-tag__watched {
5734
- --_ta-before-icon: url("data:image/svg+xml;,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M7.05 1C2.63 1 0 6.5 0 6.5S2.63 12 7.05 12C11.38 12 14 6.5 14 6.5S11.37 1 7.05 1ZM7 10.17A3.59 3.59 0 0 1 3.5 6.5 3.6 3.6 0 0 1 7 2.83c1.94 0 3.5 1.65 3.5 3.67A3.57 3.57 0 0 1 7 10.17Zm0-1.84c.97 0 1.75-.81 1.75-1.83S7.97 4.67 7 4.67s-1.75.81-1.75 1.83S6.03 8.33 7 8.33Z'/%3E%3C/svg%3E");
5645
+ --_ta-before-icon: url("data:image/svg+xml;,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12'%3E%3Cpath d='M7.05 1C2.63 1 0 6.5 0 6.5S2.63 12 7.05 12C11.38 12 14 6.5 14 6.5S11.37 1 7.05 1ZM7 10.17A3.59 3.59 0 0 1 3.5 6.5 3.6 3.6 0 0 1 7 2.83c1.94 0 3.5 1.65 3.5 3.67A3.57 3.57 0 0 1 7 10.17Zm0-1.84c.97 0 1.75-.81 1.75-1.83S7.97 4.67 7 4.67s-1.75.81-1.75 1.83S6.03 8.33 7 8.33Z'/%3E%3C/svg%3E");
5735
5646
  }
5736
- .s-tag button.s-tag--dismiss:not(.s-btn) {
5737
- all: unset;
5647
+ .s-tag:has( > .s-tag--dismiss) {
5648
+ --_ta-pr: var(--su2);
5738
5649
  }
5739
- .s-tag .s-tag--dismiss,
5740
- .s-tag button.s-tag--dismiss:not(.s-btn) {
5650
+ .s-tag .s-tag--dismiss {
5651
+ all: unset;
5741
5652
  align-items: center;
5742
- align-self: stretch;
5743
5653
  background-color: transparent;
5744
- border-radius: var(--br-sm);
5745
5654
  color: inherit;
5746
5655
  cursor: pointer;
5747
5656
  display: flex;
5748
5657
  justify-content: center;
5749
- margin: var(--su-static1) calc(var(--_ta-dismiss-padding) * -1) var(--su-static1) var(--_ta-dismiss-padding);
5750
- padding: var(--_ta-dismiss-padding);
5658
+ margin: calc(var(--_ta-pt) * -1) 0 calc(var(--_ta-pb) * -1);
5659
+ padding: var(--su2);
5751
5660
  }
5752
- .s-tag .s-tag--dismiss:focus-visible,
5753
- .s-tag button.s-tag--dismiss:not(.s-btn):focus-visible {
5661
+ .s-tag .s-tag--dismiss:focus-visible {
5754
5662
  box-shadow: 0 0 0 var(--su-static2) var(--focus-neutral), 0 0 0 var(--su-static4) var(--focus-theme);
5755
5663
  outline: var(--su-static2) solid transparent !important;
5756
5664
  }
5757
- .s-tag .s-tag--dismiss:hover,
5758
- .s-tag button.s-tag--dismiss:not(.s-btn):hover {
5665
+ .s-tag .s-tag--dismiss:hover {
5759
5666
  background-color: var(--_ta-fc);
5760
5667
  color: var(--_ta-bg);
5761
5668
  }
5762
- body.theme-highcontrast .s-tag .s-tag--dismiss:hover,
5763
- body.theme-highcontrast .s-tag button.s-tag--dismiss:not(.s-btn):hover {
5764
- color: var(--white);
5669
+ .s-tag:has( > .s-tag--sponsor) {
5670
+ --_ta-pl: var(--su2);
5765
5671
  }
5766
5672
  .s-tag .s-tag--sponsor {
5767
- align-self: center;
5768
- border-radius: calc(var(--br-sm) - var(--su-static1));
5769
- display: inline-flex;
5770
- margin: calc(var(--su1) * -1) var(--su4) calc(var(--su2) * -1) calc(var(--su2) * -1);
5771
5673
  max-width: calc(var(--su-static16) + var(--su-static2));
5674
+ margin: calc(var(--_ta-pt) * -1) 0 calc(var(--_ta-pb) * -1) 0;
5772
5675
  }
5773
5676
  .s-tag .s-tag--sponsor img,
5774
5677
  .s-tag .s-tag--sponsor .svg-icon {
@@ -5821,20 +5724,20 @@ a.s-tag:active {
5821
5724
  }
5822
5725
  .s-toggle-switch {
5823
5726
  --_ts-bg: var(--black-350);
5824
- --_ts-bg-image: url("data:image/svg+xml;,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='hsl(0, 0%, 100%)'/%3e%3c/svg%3e");
5727
+ --_ts-bg-image: url("data:image/svg+xml;,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
5825
5728
  --_ts-bg-ps: left center;
5826
5729
  --_ts-multiple-bg: unset;
5827
5730
  --_ts-multiple-fc: var(--black-400);
5828
5731
  }
5829
5732
  @media (prefers-color-scheme: dark) {
5830
5733
  body.theme-system .s-toggle-switch {
5831
- --_ts-bg-image: url("data:image/svg+xml;,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='hsl(210, 3.0000000000000027%, 15%)'/%3e%3c/svg%3e");
5734
+ --_ts-bg-image: url("data:image/svg+xml;,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23141414'/%3e%3c/svg%3e");
5832
5735
  }
5833
5736
  }
5834
5737
  body.theme-dark .s-toggle-switch,
5835
5738
  .theme-dark__forced .s-toggle-switch,
5836
5739
  body.theme-system .theme-dark__forced .s-toggle-switch {
5837
- --_ts-bg-image: url("data:image/svg+xml;,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='hsl(210, 3.0000000000000027%, 15%)'/%3e%3c/svg%3e");
5740
+ --_ts-bg-image: url("data:image/svg+xml;,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23141414'/%3e%3c/svg%3e");
5838
5741
  }
5839
5742
  fieldset[disabled] .s-toggle-switch,
5840
5743
  .s-toggle-switch[disabled],
@@ -5954,13 +5857,13 @@ input[type="checkbox"].s-toggle-switch[disabled] {
5954
5857
  }
5955
5858
  @media (prefers-color-scheme: dark) {
5956
5859
  body.theme-system .s-topbar.s-topbar__light {
5957
- --focus-theme: var(--theme-dark-secondary-custom-200, var(--blue-200));
5860
+ --focus-theme: var(--theme-dark-secondary-custom-200, var(--black-200));
5958
5861
  }
5959
5862
  }
5960
5863
  body.theme-dark .s-topbar.s-topbar__light,
5961
5864
  .theme-dark__forced .s-topbar.s-topbar__light,
5962
5865
  body.theme-system .theme-dark__forced .s-topbar.s-topbar__light {
5963
- --focus-theme: var(--theme-dark-secondary-custom-200, var(--blue-200));
5866
+ --focus-theme: var(--theme-dark-secondary-custom-200, var(--black-200));
5964
5867
  }
5965
5868
  body.theme-highcontrast .s-topbar {
5966
5869
  --_tb-notice-td: underline;
@@ -5977,30 +5880,30 @@ body.theme-highcontrast .s-topbar {
5977
5880
  border-bottom: var(--su-static1) solid currentColor;
5978
5881
  }
5979
5882
  body.theme-highcontrast .s-topbar.s-topbar__dark {
5980
- --focus-theme: hsl(210, 89%, 77%);
5883
+ --focus-theme: #ffffff;
5981
5884
  }
5982
5885
  body.theme-highcontrast .s-topbar__dark {
5983
5886
  --theme-topbar-item-color: var(--_white-static);
5984
5887
  --theme-topbar-item-color-hover: var(--_white-static);
5985
- --theme-topbar-item-background-hover: hsl(210, 8%, 25%);
5888
+ --theme-topbar-item-background-hover: #46484d;
5986
5889
  --theme-topbar-item-color-current: var(--_white-static);
5987
5890
  }
5988
5891
  body.theme-highcontrast .s-topbar__dark .s-badge {
5989
5892
  border-color: currentColor;
5990
5893
  }
5991
5894
  body.theme-highcontrast .s-topbar__light {
5992
- --theme-topbar-item-color: hsl(210, 8%, 5%);
5993
- --theme-topbar-item-color-hover: hsl(210, 8%, 5%);
5994
- --theme-topbar-item-background-hover: hsl(210, 8%, 90%);
5895
+ --theme-topbar-item-color: #211d1e;
5896
+ --theme-topbar-item-color-hover: #211d1e;
5897
+ --theme-topbar-item-background-hover: #dee0e3;
5995
5898
  --theme-topbar-item-color-current: var(--_black-static);
5996
5899
  }
5997
5900
  @media (prefers-color-scheme: dark) {
5998
5901
  body.theme-highcontrast.theme-system .s-topbar.s-topbar__light {
5999
- --focus-theme: var(--blue-200);
5902
+ --focus-theme: var(--black-200);
6000
5903
  }
6001
5904
  }
6002
5905
  body.theme-highcontrast.theme-dark .s-topbar.s-topbar__light {
6003
- --focus-theme: var(--blue-200);
5906
+ --focus-theme: var(--black-200);
6004
5907
  }
6005
5908
  @media (max-width: 640px) {
6006
5909
  .s-topbar {
@@ -6014,11 +5917,11 @@ body.theme-highcontrast.theme-dark .s-topbar.s-topbar__light {
6014
5917
  }
6015
5918
  }
6016
5919
  .s-topbar.s-topbar__light {
6017
- --focus-neutral: hsl(0, 0%, 100%);
5920
+ --focus-neutral: #ffffff;
6018
5921
  }
6019
5922
  .s-topbar.s-topbar__dark {
6020
- --focus-neutral: hsl(210, 8%, 5%);
6021
- --focus-theme: var(--theme-dark-secondary-custom-400, hsl(210, 89%, 77%));
5923
+ --focus-neutral: #211d1e;
5924
+ --focus-theme: var(--theme-dark-secondary-custom-400, #ffffff);
6022
5925
  }
6023
5926
  .s-topbar:has( > .s-topbar--skip-link:focus) {
6024
5927
  border-top: none;
@@ -6081,7 +5984,7 @@ body.theme-highcontrast.theme-dark .s-topbar.s-topbar__light {
6081
5984
  background-color: var(--_tb-item-bg);
6082
5985
  color: var(--_tb-item-fc);
6083
5986
  align-items: center;
6084
- border-radius: var(--br-sm);
5987
+ border-radius: var(--br-md);
6085
5988
  display: inline-flex;
6086
5989
  padding: 0 calc(var(--su12) - var(--su2));
6087
5990
  position: relative;
@@ -6119,7 +6022,7 @@ body.theme-highcontrast.theme-dark .s-topbar.s-topbar__light {
6119
6022
  .s-topbar .s-topbar--logo {
6120
6023
  background-color: var(--_tb-logo-bg);
6121
6024
  align-items: center;
6122
- border-radius: var(--br-sm);
6025
+ border-radius: var(--br-md);
6123
6026
  display: flex;
6124
6027
  height: 100%;
6125
6028
  padding: 0 var(--su8);
@@ -6210,7 +6113,7 @@ body.theme-highcontrast.theme-dark .s-topbar.s-topbar__light {
6210
6113
  border: var(--su-static1) solid var(--_tb-notice-bg);
6211
6114
  color: var(--_tb-notice-fc);
6212
6115
  text-decoration: var(--_tb-notice-td);
6213
- border-radius: var(--br-sm);
6116
+ border-radius: var(--br-md);
6214
6117
  display: inline-flex;
6215
6118
  flex-shrink: 0;
6216
6119
  font-size: var(--fs-fine);
@@ -6344,33 +6247,33 @@ body.theme-highcontrast.theme-dark .s-topbar.s-topbar__light {
6344
6247
  color: var(--black-600);
6345
6248
  }
6346
6249
  .s-topbar__dark {
6347
- --theme-topbar-background-color: hsl(210, 8%, 5%);
6348
- --theme-topbar-bottom-border: var(--su-static1) solid hsl(210, 8%, 5%);
6349
- --theme-topbar-search-color: hsl(0, 0%, 100%);
6350
- --theme-topbar-search-background: hsl(210, 8%, 25%);
6351
- --theme-topbar-search-placeholder: hsl(210, 8%, 85%);
6352
- --theme-topbar-search-border: hsl(210, 8%, 45%);
6353
- --theme-topbar-select-color: hsl(210, 8%, 85%);
6354
- --theme-topbar-select-background: hsl(210, 8%, 35%);
6355
- --theme-topbar-item-color: hsl(210, 8%, 85%);
6250
+ --theme-topbar-background-color: #211d1e;
6251
+ --theme-topbar-bottom-border: var(--su-static1) solid #211d1e;
6252
+ --theme-topbar-search-color: #ffffff;
6253
+ --theme-topbar-search-background: #584c4f;
6254
+ --theme-topbar-search-placeholder: #eceaea;
6255
+ --theme-topbar-search-border: #8d7d81;
6256
+ --theme-topbar-select-color: #eceaea;
6257
+ --theme-topbar-select-background: #736468;
6258
+ --theme-topbar-item-color: #d7d8db;
6356
6259
  --theme-topbar-item-color-hover: var(--_white-static);
6357
- --theme-topbar-item-background-hover: hsl(210, 8%, 25%);
6260
+ --theme-topbar-item-background-hover: #46484d;
6358
6261
  --theme-topbar-item-color-current: var(--_white-static);
6359
6262
  --theme-topbar-accent-border: none;
6360
6263
  --scrollbar: hsla(0, 0%, 100%, 0.2);
6361
6264
  }
6362
6265
  .s-topbar__light {
6363
6266
  --theme-topbar-background-color: var(--_white-static);
6364
- --theme-topbar-bottom-border: var(--su-static1) solid hsl(210, 8%, 85%);
6365
- --theme-topbar-search-color: hsl(210, 8%, 25%);
6267
+ --theme-topbar-bottom-border: var(--su-static1) solid #d7d8db;
6268
+ --theme-topbar-search-color: #46484d;
6366
6269
  --theme-topbar-search-background: var(--_white-static);
6367
- --theme-topbar-search-placeholder: hsl(210, 8%, 42%);
6368
- --theme-topbar-search-border: hsl(210, 9%, 75%);
6369
- --theme-topbar-select-color: hsl(210, 8%, 25%);
6370
- --theme-topbar-select-background: hsl(210, 8%, 90%);
6371
- --theme-topbar-item-color: hsl(210, 8%, 42%);
6372
- --theme-topbar-item-color-hover: hsl(210, 8%, 25%);
6373
- --theme-topbar-item-background-hover: hsl(210, 8%, 90%);
6270
+ --theme-topbar-search-placeholder: #6b6d73;
6271
+ --theme-topbar-search-border: #a7aab0;
6272
+ --theme-topbar-select-color: #46484d;
6273
+ --theme-topbar-select-background: #dee0e3;
6274
+ --theme-topbar-item-color: #6b6d73;
6275
+ --theme-topbar-item-color-hover: #46484d;
6276
+ --theme-topbar-item-background-hover: #dee0e3;
6374
6277
  --theme-topbar-item-color-current: var(--_black-static);
6375
6278
  --scrollbar: hsla(0, 0%, 0%, 0.2);
6376
6279
  }
@@ -6430,7 +6333,7 @@ body.theme-highcontrast .s-uploader.has-warning {
6430
6333
  .s-uploader .s-uploader--container {
6431
6334
  align-items: center;
6432
6335
  background-color: var(--_up-bg);
6433
- border-radius: var(--br-lg);
6336
+ border-radius: var(--br-md);
6434
6337
  display: flex;
6435
6338
  flex-direction: column;
6436
6339
  justify-content: center;
@@ -6443,7 +6346,7 @@ body.theme-highcontrast .s-uploader.has-warning {
6443
6346
  -webkit-mask-image: var(--_up-bg-b-image);
6444
6347
  mask-image: var(--_up-bg-b-image);
6445
6348
  background-color: var(--_up-bg-bc-hc-state, var(--_up-bg-bc-hc, var(--_up-bg-bc)));
6446
- border-radius: var(--br-lg);
6349
+ border-radius: var(--br-md);
6447
6350
  content: '';
6448
6351
  display: block;
6449
6352
  inset: 0;
@@ -6472,7 +6375,7 @@ body.theme-highcontrast .s-uploader.has-warning {
6472
6375
  }
6473
6376
  .s-uploader .s-uploader--preview-thumbnail {
6474
6377
  background-color: var(--white);
6475
- border-radius: var(--br-sm);
6378
+ border-radius: var(--br-md);
6476
6379
  box-shadow: var(--bs-md);
6477
6380
  max-height: var(--su-static128);
6478
6381
  max-width: 100%;
@@ -6706,31 +6609,31 @@ body {
6706
6609
  --ff-serif: Georgia, Cambria, "Times New Roman", Times, serif;
6707
6610
  --ff-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Liberation Mono", Menlo, Monaco, Consolas, monospace;
6708
6611
  --theme-body-font-family: var(--ff-sans);
6709
- --fs-fine: 11px;
6710
- --fs-caption: 12px;
6711
- --fs-body1: 13px;
6712
- --fs-body2: 1.15384615rem;
6713
- --fs-body3: 1.30769231rem;
6714
- --fs-subheading: 1.46153846rem;
6715
- --fs-title: 1.61538462rem;
6716
- --fs-headline1: 2.07692308rem;
6717
- --fs-headline2: 2.61538461rem;
6718
- --fs-display1: 3.30769231rem;
6719
- --fs-display2: 4.23076923rem;
6720
- --fs-display3: 5.30769231rem;
6721
- --fs-display4: 7.61538461rem;
6722
- --fs-body2-relative: 1.15384615em;
6723
- --fs-body3-relative: 1.30769231em;
6724
- --fs-subheading-relative: 1.46153846em;
6725
- --fs-title-relative: 1.61538462em;
6726
- --fs-headline1-relative: 2.07692308em;
6727
- --fs-headline2-relative: 2.61538461em;
6728
- --fs-display1-relative: 3.30769231em;
6729
- --fs-display2-relative: 4.23076923em;
6730
- --fs-display3-relative: 5.30769231em;
6731
- --fs-display4-relative: 7.61538461em;
6732
- --fs-base: 13px;
6733
- --stacks-internals-lh-unit: 13;
6612
+ --fs-fine: 12px;
6613
+ --fs-caption: 13px;
6614
+ --fs-body1: 14px;
6615
+ --fs-body2: 1.143rem;
6616
+ --fs-body3: 1.286rem;
6617
+ --fs-subheading: 1.429rem;
6618
+ --fs-title: 1.571rem;
6619
+ --fs-headline1: 2rem;
6620
+ --fs-headline2: 2.571rem;
6621
+ --fs-display1: 3.286rem;
6622
+ --fs-display2: 4.143rem;
6623
+ --fs-display3: 5.143rem;
6624
+ --fs-display4: 7.143rem;
6625
+ --fs-body2-relative: 1.143rem;
6626
+ --fs-body3-relative: 1.286rem;
6627
+ --fs-subheading-relative: 1.429rem;
6628
+ --fs-title-relative: 1.571rem;
6629
+ --fs-headline1-relative: 2rem;
6630
+ --fs-headline2-relative: 2.571rem;
6631
+ --fs-display1-relative: 3.286rem;
6632
+ --fs-display2-relative: 4.143rem;
6633
+ --fs-display3-relative: 5.143rem;
6634
+ --fs-display4-relative: 7.143rem;
6635
+ --fs-base: 14px;
6636
+ --stacks-internals-lh-unit: 14;
6734
6637
  --lh-xs: 1;
6735
6638
  --lh-sm: calc((var(--stacks-internals-lh-unit) + 2) / var(--stacks-internals-lh-unit));
6736
6639
  --lh-md: calc((var(--stacks-internals-lh-unit) + 4) / var(--stacks-internals-lh-unit));
@@ -6753,10 +6656,11 @@ body {
6753
6656
  --zi-navigation-fixed: 5050;
6754
6657
  --zi-modals-background: 8050;
6755
6658
  --zi-modals: 9000;
6756
- --br-sm: calc(var(--su-static4));
6757
- --br-md: calc(var(--su-static6));
6758
- --br-lg: calc(var(--su-static8));
6659
+ --br-md: calc(var(--su-static4) + var(--su-static6));
6759
6660
  --br-circle: 50%;
6661
+ --br-pill: 1000px;
6662
+ --br-sm: var(--br-md);
6663
+ --br-lg: var(--br-md);
6760
6664
  --te-smooth-slow: cubic-bezier(0.25, 0.46, 0.45, 0.94);
6761
6665
  --te-smooth: cubic-bezier(0.165, 0.84, 0.44, 1);
6762
6666
  --te-smooth-quick: cubic-bezier(0.19, 1, 0.22, 1);
@@ -6773,8 +6677,8 @@ body {
6773
6677
  body {
6774
6678
  --_o-disabled: 0.55;
6775
6679
  --_o-disabled-static: 0.55;
6776
- --_black-static: hsl(0, 0%, 0%);
6777
- --_white-static: hsl(0, 0%, 100%);
6680
+ --_black-static: #000000;
6681
+ --_white-static: #ffffff;
6778
6682
  }
6779
6683
  body:not(.theme-dark),
6780
6684
  body.theme-highcontrast:not(.theme-dark),
@@ -6837,55 +6741,61 @@ body:not(.theme-highcontrast).theme-system .theme-light__forced.themed,
6837
6741
  body:not(.theme-highcontrast):not(.theme-dark) .themed,
6838
6742
  body:not(.theme-highcontrast).theme-dark .theme-light__forced .themed,
6839
6743
  body:not(.theme-highcontrast).theme-system .theme-light__forced .themed {
6840
- --white: hsl(0, 0%, 100%);
6841
- --black-050: hsl(0, 0%, 100%);
6842
- --black-100: hsl(210, 8%, 98%);
6843
- --black-150: hsl(210, 8%, 95%);
6844
- --black-200: hsl(210, 8%, 90%);
6845
- --black-225: hsl(210, 8%, 85%);
6846
- --black-250: hsl(210, 8%, 80%);
6847
- --black-300: hsl(210, 9%, 75%);
6848
- --black-350: hsl(210, 8%, 68%);
6849
- --black-400: hsl(210, 8%, 42%);
6850
- --black-500: hsl(210, 8%, 25%);
6851
- --black-600: hsl(210, 8%, 5%);
6852
- --black: hsl(0, 0%, 0%);
6853
- --orange-100: hsl(23, 87%, 97%);
6854
- --orange-200: hsl(27, 87%, 87%);
6855
- --orange-300: hsl(27, 87%, 72%);
6856
- --orange-400: hsl(27, 89%, 48%);
6857
- --orange-500: hsl(27, 87%, 41%);
6858
- --orange-600: hsl(27, 87%, 27%);
6859
- --blue-100: hsl(210, 80%, 96%);
6860
- --blue-200: hsl(210, 80%, 91%);
6861
- --blue-300: hsl(210, 78%, 76%);
6862
- --blue-400: hsl(210, 77%, 46%);
6863
- --blue-500: hsl(210, 77%, 36%);
6864
- --blue-600: hsl(210, 80%, 23%);
6865
- --green-100: hsl(148, 35%, 95%);
6866
- --green-200: hsl(148, 35%, 88%);
6867
- --green-300: hsl(148, 35%, 69%);
6868
- --green-400: hsl(148, 70%, 31%);
6869
- --green-500: hsl(148, 75%, 22%);
6870
- --green-600: hsl(148, 75%, 15%);
6871
- --red-100: hsl(0, 72%, 96%);
6872
- --red-200: hsl(0, 70%, 93%);
6873
- --red-300: hsl(0, 66%, 80%);
6874
- --red-400: hsl(0, 60%, 49%);
6875
- --red-500: hsl(0, 65%, 37%);
6876
- --red-600: hsl(0, 65%, 22%);
6877
- --yellow-100: hsl(43, 85%, 95%);
6878
- --yellow-200: hsl(43, 85%, 88%);
6879
- --yellow-300: hsl(43, 85%, 72%);
6880
- --yellow-400: hsl(43, 85%, 50%);
6881
- --yellow-500: hsl(43, 85%, 33%);
6882
- --yellow-600: hsl(43, 85%, 18%);
6883
- --purple-100: hsl(237, 83%, 98%);
6884
- --purple-200: hsl(237, 78%, 93%);
6885
- --purple-300: hsl(237, 60%, 83%);
6886
- --purple-400: hsl(237, 55%, 57%);
6887
- --purple-500: hsl(237, 50%, 45%);
6888
- --purple-600: hsl(237, 50%, 32%);
6744
+ --white: #ffffff;
6745
+ --black-050: #ffffff;
6746
+ --black-100: #f7f6f5;
6747
+ --black-150: #f0efed;
6748
+ --black-200: #dee0e3;
6749
+ --black-225: #d7d8db;
6750
+ --black-250: #c9ccd1;
6751
+ --black-300: #a7aab0;
6752
+ --black-350: #84878c;
6753
+ --black-400: #6b6d73;
6754
+ --black-500: #46484d;
6755
+ --black-600: #211d1e;
6756
+ --black: #000000;
6757
+ --orange-100: #fff7f2;
6758
+ --orange-200: #ffd5bd;
6759
+ --orange-300: #f59056;
6760
+ --orange-400: #e86113;
6761
+ --orange-500: #bf4904;
6762
+ --orange-600: #702d06;
6763
+ --blue-100: #f0f4ff;
6764
+ --blue-200: #c8d4fa;
6765
+ --blue-300: #88a2f7;
6766
+ --blue-400: #5076f2;
6767
+ --blue-500: #2445b3;
6768
+ --blue-600: #0f2466;
6769
+ --green-100: #f4faeb;
6770
+ --green-200: #cce6a1;
6771
+ --green-300: #9fbf67;
6772
+ --green-400: #6c991f;
6773
+ --green-500: #4d730b;
6774
+ --green-600: #324d04;
6775
+ --red-100: #fceded;
6776
+ --red-200: #f5b9b8;
6777
+ --red-300: #e67373;
6778
+ --red-400: #bf3030;
6779
+ --red-500: #8c0e0e;
6780
+ --red-600: #590404;
6781
+ --yellow-100: #fcf8e8;
6782
+ --yellow-200: #f5e39d;
6783
+ --yellow-300: #edc10e;
6784
+ --yellow-400: #ab8900;
6785
+ --yellow-500: #806600;
6786
+ --yellow-600: #4d3d00;
6787
+ --purple-100: #f0edfc;
6788
+ --purple-200: #d0c6f7;
6789
+ --purple-300: #a591f2;
6790
+ --purple-400: #6e50e6;
6791
+ --purple-500: #4526bf;
6792
+ --purple-600: #200b73;
6793
+ --pink-100: #fbedfc;
6794
+ --pink-200: #ebb6f2;
6795
+ --pink-300: #e685f2;
6796
+ --pink-400: #d34ae8;
6797
+ --pink-500: #a224b3;
6798
+ --pink-600: #670b73;
6889
6799
  --gold-100: hsl(46, 100%, 91%);
6890
6800
  --gold-200: hsl(46, 100%, 74%);
6891
6801
  --gold-300: hsl(45, 100%, 42%);
@@ -6908,14 +6818,14 @@ body:not(.theme-highcontrast).theme-system .theme-light__forced .themed {
6908
6818
  --bs-md: 0 1px 3px hsla(0, 0%, 0%, 0.06), 0 2px 6px hsla(0, 0%, 0%, 0.06), 0 3px 8px hsla(0, 0%, 0%, 0.09);
6909
6819
  --bs-lg: 0 1px 4px hsla(0, 0%, 0%, 0.09), 0 3px 8px hsla(0, 0%, 0%, 0.09), 0 4px 13px hsla(0, 0%, 0%, 0.13);
6910
6820
  --bs-xl: 0 10px 24px hsla(0, 0%, 0%, 0.05), 0 20px 48px hsla(0, 0%, 0%, 0.05), 0 1px 4px hsla(0, 0%, 0%, 0.1);
6911
- --translucent-secondary: var(--theme-secondary-custom-translucent, hsla(206, 100%, 40%, 0.15));
6821
+ --translucent-secondary: var(--theme-secondary-custom-translucent, rgba(115, 115, 115, 0.15));
6912
6822
  --translucent-success: hsla(140, 40%, 75%, 0.4);
6913
6823
  --translucent-warning: hsla(47, 79%, 58%, 0.4);
6914
6824
  --translucent-error: hsla(358, 62%, 47%, 0.15);
6915
6825
  --translucent-muted: hsla(210, 8%, 15%, 0.1);
6916
6826
  --focus-neutral: var(--white);
6917
- --focus-theme: var(--theme-secondary-400);
6918
- --focus-ring: var(--theme-secondary-custom-focus-ring, hsla(206, 100%, 40%, 0.15));
6827
+ --focus-theme: var(--theme-secondary);
6828
+ --focus-ring: var(--theme-secondary-custom-focus-ring, rgba(115, 115, 115, 0.15));
6919
6829
  --focus-ring-success: hsla(140, 40%, 75%, 0.4);
6920
6830
  --focus-ring-warning: hsla(47, 79%, 58%, 0.4);
6921
6831
  --focus-ring-error: hsla(358, 62%, 47%, 0.15);
@@ -6940,13 +6850,13 @@ body:not(.theme-highcontrast).theme-system .theme-light__forced .themed {
6940
6850
  --theme-primary-400: var(--theme-primary-custom-400, var(--orange-400));
6941
6851
  --theme-primary-500: var(--theme-primary-custom-500, var(--orange-500));
6942
6852
  --theme-primary-600: var(--theme-primary-custom-600, var(--orange-600));
6943
- --theme-secondary: var(--theme-secondary-custom, var(--blue-400));
6944
- --theme-secondary-100: var(--theme-secondary-custom-100, var(--blue-100));
6945
- --theme-secondary-200: var(--theme-secondary-custom-200, var(--blue-200));
6946
- --theme-secondary-300: var(--theme-secondary-custom-300, var(--blue-300));
6947
- --theme-secondary-400: var(--theme-secondary-custom-400, var(--blue-400));
6948
- --theme-secondary-500: var(--theme-secondary-custom-500, var(--blue-500));
6949
- --theme-secondary-600: var(--theme-secondary-custom-600, var(--blue-600));
6853
+ --theme-secondary: var(--theme-secondary-custom, var(--black));
6854
+ --theme-secondary-100: var(--theme-secondary-custom-100, var(--black-100));
6855
+ --theme-secondary-200: var(--theme-secondary-custom-200, var(--black-200));
6856
+ --theme-secondary-300: var(--theme-secondary-custom-300, var(--black-300));
6857
+ --theme-secondary-400: var(--theme-secondary-custom-400, var(--black-400));
6858
+ --theme-secondary-500: var(--theme-secondary-custom-500, var(--black-500));
6859
+ --theme-secondary-600: var(--theme-secondary-custom-600, var(--black-600));
6950
6860
  --theme-primary-custom-100: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), calc(var(--theme-base-primary-color-l) + ((100% - var(--theme-base-primary-color-l)) * .9)));
6951
6861
  --theme-primary-custom-200: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), calc(var(--theme-base-primary-color-l) + ((100% - var(--theme-base-primary-color-l)) * .75)));
6952
6862
  --theme-primary-custom-300: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), calc(var(--theme-base-primary-color-l) + ((100% - var(--theme-base-primary-color-l)) * .5)));
@@ -6971,55 +6881,61 @@ body:not(.theme-highcontrast).theme-dark.themed,
6971
6881
  body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced.themed,
6972
6882
  body:not(.theme-highcontrast).theme-dark .themed,
6973
6883
  body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
6974
- --white: hsl(210, 3%, 15%);
6975
- --black-050: hsl(210, 3%, 15%);
6976
- --black-100: hsl(210, 3%, 18%);
6977
- --black-150: hsl(210, 4%, 21%);
6978
- --black-200: hsl(210, 4%, 27%);
6979
- --black-225: hsl(210, 4%, 30%);
6980
- --black-250: hsl(210, 5%, 36%);
6981
- --black-300: hsl(210, 4%, 47%);
6982
- --black-350: hsl(210, 8%, 70%);
6983
- --black-400: hsl(210, 8%, 80%);
6984
- --black-500: hsl(210, 8%, 90%);
6985
- --black-600: hsl(210, 11%, 98%);
6986
- --black: hsl(0, 0%, 100%);
6987
- --orange-100: hsl(27, 55%, 20%);
6988
- --orange-200: hsl(27, 50%, 33%);
6989
- --orange-300: hsl(27, 50%, 43%);
6990
- --orange-400: hsl(27, 90%, 68%);
6991
- --orange-500: hsl(27, 90%, 80%);
6992
- --orange-600: hsl(27, 90%, 90%);
6993
- --blue-100: hsl(210, 50%, 22%);
6994
- --blue-200: hsl(210, 50%, 36%);
6995
- --blue-300: hsl(210, 50%, 48%);
6996
- --blue-400: hsl(210, 89%, 77%);
6997
- --blue-500: hsl(210, 89%, 84%);
6998
- --blue-600: hsl(210, 89%, 92%);
6999
- --green-100: hsl(149, 51%, 15%);
7000
- --green-200: hsl(149, 51%, 25%);
7001
- --green-300: hsl(149, 51%, 36%);
7002
- --green-400: hsl(149, 50%, 62%);
7003
- --green-500: hsl(149, 50%, 74%);
7004
- --green-600: hsl(149, 50%, 88%);
7005
- --red-100: hsl(0, 43%, 22%);
7006
- --red-200: hsl(0, 43%, 41%);
7007
- --red-300: hsl(0, 43%, 56%);
7008
- --red-400: hsl(0, 90%, 81%);
7009
- --red-500: hsl(0, 90%, 88%);
7010
- --red-600: hsl(0, 90%, 94%);
7011
- --yellow-100: hsl(43, 50%, 17%);
7012
- --yellow-200: hsl(43, 50%, 28%);
7013
- --yellow-300: hsl(43, 50%, 39%);
7014
- --yellow-400: hsl(43, 90%, 75%);
7015
- --yellow-500: hsl(43, 90%, 82%);
7016
- --yellow-600: hsl(43, 90%, 91%);
7017
- --purple-100: hsl(237, 26%, 23%);
7018
- --purple-200: hsl(237, 26%, 44%);
7019
- --purple-300: hsl(237, 26%, 56%);
7020
- --purple-400: hsl(237, 98%, 87%);
7021
- --purple-500: hsl(237, 98%, 92%);
7022
- --purple-600: hsl(237, 98%, 96%);
6884
+ --white: #141414;
6885
+ --black-050: #141414;
6886
+ --black-100: #262626;
6887
+ --black-150: #333333;
6888
+ --black-200: #575757;
6889
+ --black-225: #666666;
6890
+ --black-250: #737373;
6891
+ --black-300: #8c8c8c;
6892
+ --black-350: #a6a6a6;
6893
+ --black-400: #d9d3ce;
6894
+ --black-500: #f2ede9;
6895
+ --black-600: #ffffff;
6896
+ --black: #ffffff;
6897
+ --orange-100: #401f0d;
6898
+ --orange-200: #733c1c;
6899
+ --orange-300: #c78c69;
6900
+ --orange-400: #e6ab8a;
6901
+ --orange-500: #fcccb1;
6902
+ --orange-600: #fadac8;
6903
+ --blue-100: #22304d;
6904
+ --blue-200: #4d6699;
6905
+ --blue-300: #7b9de0;
6906
+ --blue-400: #a6c3ff;
6907
+ --blue-500: #ccddff;
6908
+ --blue-600: #e6eeff;
6909
+ --green-100: #28380b;
6910
+ --green-200: #5c7334;
6911
+ --green-300: #96b364;
6912
+ --green-400: #c4e68a;
6913
+ --green-500: #cce6a1;
6914
+ --green-600: #ecffcc;
6915
+ --red-100: #330f0f;
6916
+ --red-200: #662e2e;
6917
+ --red-300: #b35d5d;
6918
+ --red-400: #faafaf;
6919
+ --red-500: #fccaca;
6920
+ --red-600: #ffe6e6;
6921
+ --yellow-100: #332b0a;
6922
+ --yellow-200: #594c16;
6923
+ --yellow-300: #a6944b;
6924
+ --yellow-400: #e6d17e;
6925
+ --yellow-500: #e3d59f;
6926
+ --yellow-600: #fffae6;
6927
+ --purple-100: #22174d;
6928
+ --purple-200: #3d2d80;
6929
+ --purple-300: #7262b3;
6930
+ --purple-400: #b6a6f7;
6931
+ --purple-500: #d2c8fa;
6932
+ --purple-600: #e8e3fc;
6933
+ --pink-100: #2e0a33;
6934
+ --pink-200: #5e2466;
6935
+ --pink-300: #bf81c7;
6936
+ --pink-400: #f3bbfa;
6937
+ --pink-500: #f7cffc;
6938
+ --pink-600: #fae3fc;
7023
6939
  --gold-100: hsl(45, 29%, 24%);
7024
6940
  --gold-200: hsl(45, 47%, 37%);
7025
6941
  --gold-300: hsl(45, 92%, 62%);
@@ -7042,14 +6958,14 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
7042
6958
  --bs-md: 0 1px 3px hsla(0, 0%, 0%, 0.11), 0 2px 6px hsla(0, 0%, 0%, 0.11), 0 3px 8px hsla(0, 0%, 0%, 0.14);
7043
6959
  --bs-lg: 0 1px 4px hsla(0, 0%, 0%, 0.14), 0 3px 8px hsla(0, 0%, 0%, 0.14), 0 4px 13px hsla(0, 0%, 0%, 0.18);
7044
6960
  --bs-xl: 0 10px 24px hsla(0, 0%, 0%, 0.1), 0 20px 48px hsla(0, 0%, 0%, 0.1), 0 1px 4px hsla(0, 0%, 0%, 0.15);
7045
- --translucent-secondary: var(--theme-dark-secondary-custom-translucent, hsla(206, 100%, 40%, 0.25));
6961
+ --translucent-secondary: var(--theme-dark-secondary-custom-translucent, rgba(217, 211, 206, 0.25));
7046
6962
  --translucent-success: hsla(140, 40%, 75%, 0.4);
7047
6963
  --translucent-warning: hsla(47, 79%, 58%, 0.4);
7048
6964
  --translucent-error: hsla(358, 62%, 47%, 0.15);
7049
6965
  --translucent-muted: hsla(210, 8%, 15%, 0.1);
7050
6966
  --focus-neutral: var(--white);
7051
- --focus-theme: var(--theme-secondary-400);
7052
- --focus-ring: var(--theme-dark-secondary-custom-focus-ring, hsla(206, 100%, 40%, 0.25));
6967
+ --focus-theme: var(--theme-secondary);
6968
+ --focus-ring: var(--theme-dark-secondary-custom-focus-ring, rgba(217, 211, 206, 0.25));
7053
6969
  --focus-ring-success: hsla(140, 40%, 75%, 0.4);
7054
6970
  --focus-ring-warning: hsla(47, 79%, 58%, 0.4);
7055
6971
  --focus-ring-error: hsla(358, 62%, 47%, 0.15);
@@ -7074,13 +6990,13 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
7074
6990
  --theme-primary-400: var(--theme-dark-primary-custom-400, var(--orange-400));
7075
6991
  --theme-primary-500: var(--theme-dark-primary-custom-500, var(--orange-500));
7076
6992
  --theme-primary-600: var(--theme-dark-primary-custom-600, var(--orange-600));
7077
- --theme-secondary: var(--theme-dark-secondary-custom, var(--blue-400));
7078
- --theme-secondary-100: var(--theme-dark-secondary-custom-100, var(--blue-100));
7079
- --theme-secondary-200: var(--theme-dark-secondary-custom-200, var(--blue-200));
7080
- --theme-secondary-300: var(--theme-dark-secondary-custom-300, var(--blue-300));
7081
- --theme-secondary-400: var(--theme-dark-secondary-custom-400, var(--blue-400));
7082
- --theme-secondary-500: var(--theme-dark-secondary-custom-500, var(--blue-500));
7083
- --theme-secondary-600: var(--theme-dark-secondary-custom-600, var(--blue-600));
6993
+ --theme-secondary: var(--theme-dark-secondary-custom, var(--black));
6994
+ --theme-secondary-100: var(--theme-dark-secondary-custom-100, var(--black-100));
6995
+ --theme-secondary-200: var(--theme-dark-secondary-custom-200, var(--black-200));
6996
+ --theme-secondary-300: var(--theme-dark-secondary-custom-300, var(--black-300));
6997
+ --theme-secondary-400: var(--theme-dark-secondary-custom-400, var(--black-400));
6998
+ --theme-secondary-500: var(--theme-dark-secondary-custom-500, var(--black-500));
6999
+ --theme-secondary-600: var(--theme-dark-secondary-custom-600, var(--black-600));
7084
7000
  --theme-dark-primary-custom-100: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + (var(--theme-dark-primary-color-s) * -.6)), calc(var(--theme-dark-primary-color-l) + (var(--theme-dark-primary-color-l) * -.7)));
7085
7001
  --theme-dark-primary-custom-200: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + (var(--theme-dark-primary-color-s) * -.4)), calc(var(--theme-dark-primary-color-l) + (var(--theme-dark-primary-color-l) * -.5)));
7086
7002
  --theme-dark-primary-custom-300: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + (var(--theme-dark-primary-color-s) * -.3)), calc(var(--theme-dark-primary-color-l) + (var(--theme-dark-primary-color-l) * -.2)));
@@ -7103,55 +7019,61 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
7103
7019
  body:not(.theme-highcontrast).theme-system,
7104
7020
  body:not(.theme-highcontrast).theme-system.themed,
7105
7021
  body:not(.theme-highcontrast).theme-system .themed {
7106
- --white: hsl(210, 3%, 15%);
7107
- --black-050: hsl(210, 3%, 15%);
7108
- --black-100: hsl(210, 3%, 18%);
7109
- --black-150: hsl(210, 4%, 21%);
7110
- --black-200: hsl(210, 4%, 27%);
7111
- --black-225: hsl(210, 4%, 30%);
7112
- --black-250: hsl(210, 5%, 36%);
7113
- --black-300: hsl(210, 4%, 47%);
7114
- --black-350: hsl(210, 8%, 70%);
7115
- --black-400: hsl(210, 8%, 80%);
7116
- --black-500: hsl(210, 8%, 90%);
7117
- --black-600: hsl(210, 11%, 98%);
7118
- --black: hsl(0, 0%, 100%);
7119
- --orange-100: hsl(27, 55%, 20%);
7120
- --orange-200: hsl(27, 50%, 33%);
7121
- --orange-300: hsl(27, 50%, 43%);
7122
- --orange-400: hsl(27, 90%, 68%);
7123
- --orange-500: hsl(27, 90%, 80%);
7124
- --orange-600: hsl(27, 90%, 90%);
7125
- --blue-100: hsl(210, 50%, 22%);
7126
- --blue-200: hsl(210, 50%, 36%);
7127
- --blue-300: hsl(210, 50%, 48%);
7128
- --blue-400: hsl(210, 89%, 77%);
7129
- --blue-500: hsl(210, 89%, 84%);
7130
- --blue-600: hsl(210, 89%, 92%);
7131
- --green-100: hsl(149, 51%, 15%);
7132
- --green-200: hsl(149, 51%, 25%);
7133
- --green-300: hsl(149, 51%, 36%);
7134
- --green-400: hsl(149, 50%, 62%);
7135
- --green-500: hsl(149, 50%, 74%);
7136
- --green-600: hsl(149, 50%, 88%);
7137
- --red-100: hsl(0, 43%, 22%);
7138
- --red-200: hsl(0, 43%, 41%);
7139
- --red-300: hsl(0, 43%, 56%);
7140
- --red-400: hsl(0, 90%, 81%);
7141
- --red-500: hsl(0, 90%, 88%);
7142
- --red-600: hsl(0, 90%, 94%);
7143
- --yellow-100: hsl(43, 50%, 17%);
7144
- --yellow-200: hsl(43, 50%, 28%);
7145
- --yellow-300: hsl(43, 50%, 39%);
7146
- --yellow-400: hsl(43, 90%, 75%);
7147
- --yellow-500: hsl(43, 90%, 82%);
7148
- --yellow-600: hsl(43, 90%, 91%);
7149
- --purple-100: hsl(237, 26%, 23%);
7150
- --purple-200: hsl(237, 26%, 44%);
7151
- --purple-300: hsl(237, 26%, 56%);
7152
- --purple-400: hsl(237, 98%, 87%);
7153
- --purple-500: hsl(237, 98%, 92%);
7154
- --purple-600: hsl(237, 98%, 96%);
7022
+ --white: #141414;
7023
+ --black-050: #141414;
7024
+ --black-100: #262626;
7025
+ --black-150: #333333;
7026
+ --black-200: #575757;
7027
+ --black-225: #666666;
7028
+ --black-250: #737373;
7029
+ --black-300: #8c8c8c;
7030
+ --black-350: #a6a6a6;
7031
+ --black-400: #d9d3ce;
7032
+ --black-500: #f2ede9;
7033
+ --black-600: #ffffff;
7034
+ --black: #ffffff;
7035
+ --orange-100: #401f0d;
7036
+ --orange-200: #733c1c;
7037
+ --orange-300: #c78c69;
7038
+ --orange-400: #e6ab8a;
7039
+ --orange-500: #fcccb1;
7040
+ --orange-600: #fadac8;
7041
+ --blue-100: #22304d;
7042
+ --blue-200: #4d6699;
7043
+ --blue-300: #7b9de0;
7044
+ --blue-400: #a6c3ff;
7045
+ --blue-500: #ccddff;
7046
+ --blue-600: #e6eeff;
7047
+ --green-100: #28380b;
7048
+ --green-200: #5c7334;
7049
+ --green-300: #96b364;
7050
+ --green-400: #c4e68a;
7051
+ --green-500: #cce6a1;
7052
+ --green-600: #ecffcc;
7053
+ --red-100: #330f0f;
7054
+ --red-200: #662e2e;
7055
+ --red-300: #b35d5d;
7056
+ --red-400: #faafaf;
7057
+ --red-500: #fccaca;
7058
+ --red-600: #ffe6e6;
7059
+ --yellow-100: #332b0a;
7060
+ --yellow-200: #594c16;
7061
+ --yellow-300: #a6944b;
7062
+ --yellow-400: #e6d17e;
7063
+ --yellow-500: #e3d59f;
7064
+ --yellow-600: #fffae6;
7065
+ --purple-100: #22174d;
7066
+ --purple-200: #3d2d80;
7067
+ --purple-300: #7262b3;
7068
+ --purple-400: #b6a6f7;
7069
+ --purple-500: #d2c8fa;
7070
+ --purple-600: #e8e3fc;
7071
+ --pink-100: #2e0a33;
7072
+ --pink-200: #5e2466;
7073
+ --pink-300: #bf81c7;
7074
+ --pink-400: #f3bbfa;
7075
+ --pink-500: #f7cffc;
7076
+ --pink-600: #fae3fc;
7155
7077
  --gold-100: hsl(45, 29%, 24%);
7156
7078
  --gold-200: hsl(45, 47%, 37%);
7157
7079
  --gold-300: hsl(45, 92%, 62%);
@@ -7174,14 +7096,14 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
7174
7096
  --bs-md: 0 1px 3px hsla(0, 0%, 0%, 0.11), 0 2px 6px hsla(0, 0%, 0%, 0.11), 0 3px 8px hsla(0, 0%, 0%, 0.14);
7175
7097
  --bs-lg: 0 1px 4px hsla(0, 0%, 0%, 0.14), 0 3px 8px hsla(0, 0%, 0%, 0.14), 0 4px 13px hsla(0, 0%, 0%, 0.18);
7176
7098
  --bs-xl: 0 10px 24px hsla(0, 0%, 0%, 0.1), 0 20px 48px hsla(0, 0%, 0%, 0.1), 0 1px 4px hsla(0, 0%, 0%, 0.15);
7177
- --translucent-secondary: var(--theme-dark-secondary-custom-translucent, hsla(206, 100%, 40%, 0.25));
7099
+ --translucent-secondary: var(--theme-dark-secondary-custom-translucent, rgba(217, 211, 206, 0.25));
7178
7100
  --translucent-success: hsla(140, 40%, 75%, 0.4);
7179
7101
  --translucent-warning: hsla(47, 79%, 58%, 0.4);
7180
7102
  --translucent-error: hsla(358, 62%, 47%, 0.15);
7181
7103
  --translucent-muted: hsla(210, 8%, 15%, 0.1);
7182
7104
  --focus-neutral: var(--white);
7183
- --focus-theme: var(--theme-secondary-400);
7184
- --focus-ring: var(--theme-dark-secondary-custom-focus-ring, hsla(206, 100%, 40%, 0.25));
7105
+ --focus-theme: var(--theme-secondary);
7106
+ --focus-ring: var(--theme-dark-secondary-custom-focus-ring, rgba(217, 211, 206, 0.25));
7185
7107
  --focus-ring-success: hsla(140, 40%, 75%, 0.4);
7186
7108
  --focus-ring-warning: hsla(47, 79%, 58%, 0.4);
7187
7109
  --focus-ring-error: hsla(358, 62%, 47%, 0.15);
@@ -7206,13 +7128,13 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
7206
7128
  --theme-primary-400: var(--theme-dark-primary-custom-400, var(--orange-400));
7207
7129
  --theme-primary-500: var(--theme-dark-primary-custom-500, var(--orange-500));
7208
7130
  --theme-primary-600: var(--theme-dark-primary-custom-600, var(--orange-600));
7209
- --theme-secondary: var(--theme-dark-secondary-custom, var(--blue-400));
7210
- --theme-secondary-100: var(--theme-dark-secondary-custom-100, var(--blue-100));
7211
- --theme-secondary-200: var(--theme-dark-secondary-custom-200, var(--blue-200));
7212
- --theme-secondary-300: var(--theme-dark-secondary-custom-300, var(--blue-300));
7213
- --theme-secondary-400: var(--theme-dark-secondary-custom-400, var(--blue-400));
7214
- --theme-secondary-500: var(--theme-dark-secondary-custom-500, var(--blue-500));
7215
- --theme-secondary-600: var(--theme-dark-secondary-custom-600, var(--blue-600));
7131
+ --theme-secondary: var(--theme-dark-secondary-custom, var(--black));
7132
+ --theme-secondary-100: var(--theme-dark-secondary-custom-100, var(--black-100));
7133
+ --theme-secondary-200: var(--theme-dark-secondary-custom-200, var(--black-200));
7134
+ --theme-secondary-300: var(--theme-dark-secondary-custom-300, var(--black-300));
7135
+ --theme-secondary-400: var(--theme-dark-secondary-custom-400, var(--black-400));
7136
+ --theme-secondary-500: var(--theme-dark-secondary-custom-500, var(--black-500));
7137
+ --theme-secondary-600: var(--theme-dark-secondary-custom-600, var(--black-600));
7216
7138
  --theme-dark-primary-custom-100: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + (var(--theme-dark-primary-color-s) * -.6)), calc(var(--theme-dark-primary-color-l) + (var(--theme-dark-primary-color-l) * -.7)));
7217
7139
  --theme-dark-primary-custom-200: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + (var(--theme-dark-primary-color-s) * -.4)), calc(var(--theme-dark-primary-color-l) + (var(--theme-dark-primary-color-l) * -.5)));
7218
7140
  --theme-dark-primary-custom-300: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + (var(--theme-dark-primary-color-s) * -.3)), calc(var(--theme-dark-primary-color-l) + (var(--theme-dark-primary-color-l) * -.2)));
@@ -7235,55 +7157,61 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
7235
7157
  body.theme-highcontrast:not(.theme-dark),
7236
7158
  body.theme-highcontrast.theme-dark .theme-light__forced,
7237
7159
  body.theme-highcontrast.theme-system .theme-light__forced {
7238
- --white: hsl(0, 0%, 100%);
7239
- --black-050: hsl(0, 0%, 100%);
7240
- --black-100: hsl(210, 8%, 98%);
7241
- --black-150: hsl(210, 8%, 95%);
7242
- --black-200: hsl(210, 8%, 90%);
7243
- --black-225: hsl(210, 8%, 85%);
7244
- --black-250: hsl(210, 8%, 80%);
7245
- --black-300: hsl(210, 9%, 75%);
7246
- --black-350: hsl(210, 8%, 45%);
7247
- --black-400: hsl(212, 8%, 35%);
7248
- --black-500: hsl(210, 8%, 25%);
7249
- --black-600: hsl(210, 8%, 5%);
7250
- --black: hsl(0, 0%, 0%);
7251
- --orange-100: hsl(23, 87%, 97%);
7252
- --orange-200: hsl(23, 87%, 97%);
7253
- --orange-300: hsl(27, 89%, 48%);
7254
- --orange-400: hsl(27, 87%, 29%);
7255
- --orange-500: hsl(27, 87%, 21%);
7256
- --orange-600: hsl(27, 87%, 21%);
7257
- --blue-100: hsl(210, 80%, 96%);
7258
- --blue-200: hsl(210, 80%, 96%);
7259
- --blue-300: hsl(210, 70%, 48%);
7260
- --blue-400: hsl(210, 77%, 34%);
7261
- --blue-500: hsl(210, 80%, 23%);
7262
- --blue-600: hsl(210, 80%, 23%);
7263
- --green-100: hsl(147, 36%, 95%);
7264
- --green-200: hsl(147, 36%, 95%);
7265
- --green-300: hsl(148, 70%, 31%);
7266
- --green-400: hsl(148, 75%, 22%);
7267
- --green-500: hsl(146, 74%, 15%);
7268
- --green-600: hsl(146, 74%, 15%);
7269
- --red-100: hsl(0, 80%, 96%);
7270
- --red-200: hsl(0, 80%, 96%);
7271
- --red-300: hsl(0, 60%, 49%);
7272
- --red-400: hsl(0, 65%, 37%);
7273
- --red-500: hsl(0, 65%, 22%);
7274
- --red-600: hsl(0, 65%, 22%);
7275
- --yellow-100: hsl(41, 85%, 95%);
7276
- --yellow-200: hsl(41, 85%, 95%);
7277
- --yellow-300: hsl(43, 85%, 50%);
7278
- --yellow-400: hsl(43, 85%, 50%);
7279
- --yellow-500: hsl(48, 85%, 18%);
7280
- --yellow-600: hsl(48, 85%, 18%);
7281
- --purple-100: hsl(237, 83%, 98%);
7282
- --purple-200: hsl(237, 83%, 98%);
7283
- --purple-300: hsl(237, 55%, 57%);
7284
- --purple-400: hsl(237, 52%, 48%);
7285
- --purple-500: hsl(237, 50%, 32%);
7286
- --purple-600: hsl(237, 50%, 32%);
7160
+ --white: #ffffff;
7161
+ --black-050: #ffffff;
7162
+ --black-100: #f7f6f5;
7163
+ --black-150: #f0efed;
7164
+ --black-200: #dee0e3;
7165
+ --black-225: #d7d8db;
7166
+ --black-250: #c9ccd1;
7167
+ --black-300: #91939c;
7168
+ --black-350: #54585c;
7169
+ --black-400: #545759;
7170
+ --black-500: #46484d;
7171
+ --black-600: #211d1e;
7172
+ --black: #000000;
7173
+ --orange-100: #fff7f2;
7174
+ --orange-200: #fff7f2;
7175
+ --orange-300: #e86113;
7176
+ --orange-400: #963903;
7177
+ --orange-500: #6e2c05;
7178
+ --orange-600: #6e2c05;
7179
+ --blue-100: #f0f4ff;
7180
+ --blue-200: #f0f4ff;
7181
+ --blue-300: #5076f2;
7182
+ --blue-400: #2445b3;
7183
+ --blue-500: #0f2466;
7184
+ --blue-600: #0f2466;
7185
+ --green-100: #f4faeb;
7186
+ --green-200: #f4faeb;
7187
+ --green-300: #72a120;
7188
+ --green-400: #406107;
7189
+ --green-500: #324d04;
7190
+ --green-600: #324d04;
7191
+ --red-100: #fceded;
7192
+ --red-200: #fceded;
7193
+ --red-300: #bf3030;
7194
+ --red-400: #8c0e0e;
7195
+ --red-500: #590404;
7196
+ --red-600: #590404;
7197
+ --yellow-100: #fcf8e8;
7198
+ --yellow-200: #fcf8e8;
7199
+ --yellow-300: #ab8900;
7200
+ --yellow-400: #6b5600;
7201
+ --yellow-500: #4d3d00;
7202
+ --yellow-600: #4d3d00;
7203
+ --purple-100: #f0edfc;
7204
+ --purple-200: #f0edfc;
7205
+ --purple-300: #6e50e6;
7206
+ --purple-400: #4526bf;
7207
+ --purple-500: #200b73;
7208
+ --purple-600: #200b73;
7209
+ --pink-100: #fbedfc;
7210
+ --pink-200: #fbedfc;
7211
+ --pink-300: #d34ae8;
7212
+ --pink-400: #8f209e;
7213
+ --pink-500: #670b73;
7214
+ --pink-600: #670b73;
7287
7215
  --gold-100: hsl(46, 100%, 91%);
7288
7216
  --gold-200: hsl(46, 100%, 91%);
7289
7217
  --gold-300: hsl(45, 100%, 42%);
@@ -7306,14 +7234,14 @@ body.theme-highcontrast.theme-system .theme-light__forced {
7306
7234
  --bs-md: none;
7307
7235
  --bs-lg: none;
7308
7236
  --bs-xl: none;
7309
- --translucent-secondary: hsla(206, 100%, 40%, 0.9);
7237
+ --translucent-secondary: hsla(204, 6%, 35%, 0.9);
7310
7238
  --translucent-success: hsla(140, 40%, 40%, 0.9);
7311
7239
  --translucent-warning: hsla(47, 76%, 46%, 0.9);
7312
7240
  --translucent-error: hsla(358, 62%, 47%, 0.9);
7313
7241
  --translucent-muted: hsla(210, 8%, 55%, 0.95);
7314
7242
  --focus-neutral: var(--white);
7315
- --focus-theme: var(--theme-secondary-400);
7316
- --focus-ring: hsla(206, 100%, 40%, 0.9);
7243
+ --focus-theme: var(--theme-secondary);
7244
+ --focus-ring: rgba(115, 115, 115, 0.9);
7317
7245
  --focus-ring-success: hsla(140, 40%, 40%, 0.9);
7318
7246
  --focus-ring-warning: hsla(47, 76%, 46%, 0.9);
7319
7247
  --focus-ring-error: hsla(358, 62%, 47%, 0.9);
@@ -7338,66 +7266,72 @@ body.theme-highcontrast.theme-system .theme-light__forced {
7338
7266
  --theme-primary-400: var(--orange-400);
7339
7267
  --theme-primary-500: var(--orange-500);
7340
7268
  --theme-primary-600: var(--orange-600);
7341
- --theme-secondary: var(--blue-400);
7342
- --theme-secondary-100: var(--blue-100);
7343
- --theme-secondary-200: var(--blue-200);
7344
- --theme-secondary-300: var(--blue-300);
7345
- --theme-secondary-400: var(--blue-400);
7346
- --theme-secondary-500: var(--blue-500);
7347
- --theme-secondary-600: var(--blue-600);
7269
+ --theme-secondary: var(--black);
7270
+ --theme-secondary-100: var(--black-100);
7271
+ --theme-secondary-200: var(--black-200);
7272
+ --theme-secondary-300: var(--black-300);
7273
+ --theme-secondary-400: var(--black-400);
7274
+ --theme-secondary-500: var(--black-500);
7275
+ --theme-secondary-600: var(--black-600);
7348
7276
  --_o-disabled: 0.8;
7349
7277
  }
7350
7278
  body.theme-highcontrast.theme-dark,
7351
7279
  body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
7352
- --white: hsl(0, 0%, 0%);
7353
- --black-050: hsl(210, 3%, 15%);
7354
- --black-100: hsl(210, 3%, 18%);
7355
- --black-150: hsl(210, 4%, 21%);
7356
- --black-200: hsl(210, 4%, 27%);
7357
- --black-225: hsl(210, 4%, 30%);
7358
- --black-250: hsl(210, 5%, 36%);
7359
- --black-300: hsl(210, 4%, 47%);
7360
- --black-350: hsl(210, 10%, 74%);
7361
- --black-400: hsl(210, 8%, 80%);
7362
- --black-500: hsl(210, 8%, 90%);
7363
- --black-600: hsl(210, 11%, 98%);
7364
- --black: hsl(0, 0%, 100%);
7365
- --orange-100: hsl(27, 30%, 19%);
7366
- --orange-200: hsl(27, 30%, 19%);
7367
- --orange-300: hsl(27, 80%, 72%);
7368
- --orange-400: hsl(27, 80%, 72%);
7369
- --orange-500: hsl(28, 78%, 93%);
7370
- --orange-600: hsl(28, 78%, 93%);
7371
- --blue-100: hsl(209, 30%, 19%);
7372
- --blue-200: hsl(209, 30%, 19%);
7373
- --blue-300: hsl(210, 80%, 72%);
7374
- --blue-400: hsl(210, 80%, 75%);
7375
- --blue-500: hsl(210, 78%, 93%);
7376
- --blue-600: hsl(210, 78%, 93%);
7377
- --green-100: hsl(147, 30%, 19%);
7378
- --green-200: hsl(147, 30%, 19%);
7379
- --green-300: hsl(148, 40%, 62%);
7380
- --green-400: hsl(148, 40%, 68%);
7381
- --green-500: hsl(150, 39%, 93%);
7382
- --green-600: hsl(150, 39%, 93%);
7383
- --red-100: hsl(358, 30%, 19%);
7384
- --red-200: hsl(358, 30%, 19%);
7385
- --red-300: hsl(0, 75%, 77%);
7386
- --red-400: hsl(0, 73%, 80%);
7387
- --red-500: hsl(0, 76%, 95%);
7388
- --red-600: hsl(0, 76%, 95%);
7389
- --yellow-100: hsl(43, 29%, 17%);
7390
- --yellow-200: hsl(43, 29%, 17%);
7391
- --yellow-300: hsl(43, 75%, 75%);
7392
- --yellow-400: hsl(43, 75%, 75%);
7393
- --yellow-500: hsl(48, 74%, 91%);
7394
- --yellow-600: hsl(44, 74%, 91%);
7395
- --purple-100: hsl(237, 26%, 23%);
7396
- --purple-200: hsl(237, 26%, 23%);
7397
- --purple-300: hsl(237, 98%, 87%);
7398
- --purple-400: hsl(237, 98%, 87%);
7399
- --purple-500: hsl(237, 98%, 96%);
7400
- --purple-600: hsl(237, 98%, 96%);
7280
+ --white: #000000;
7281
+ --black-050: #141414;
7282
+ --black-100: #262626;
7283
+ --black-150: #333333;
7284
+ --black-200: #575757;
7285
+ --black-225: #666666;
7286
+ --black-250: #737373;
7287
+ --black-300: #8c8c8c;
7288
+ --black-350: #a6a6a6;
7289
+ --black-400: #d9d3ce;
7290
+ --black-500: #f2ede9;
7291
+ --black-600: #ffffff;
7292
+ --black: #ffffff;
7293
+ --orange-100: #401f0d;
7294
+ --orange-200: #401f0d;
7295
+ --orange-300: #dead90;
7296
+ --orange-400: #fcccb1;
7297
+ --orange-500: #fadac8;
7298
+ --orange-600: #fadac8;
7299
+ --blue-100: #22304d;
7300
+ --blue-200: #22304d;
7301
+ --blue-300: #a6c3ff;
7302
+ --blue-400: #ccddff;
7303
+ --blue-500: #e6eeff;
7304
+ --blue-600: #e6eeff;
7305
+ --green-100: #28380b;
7306
+ --green-200: #28380b;
7307
+ --green-300: #c4e68a;
7308
+ --green-400: #cce6a1;
7309
+ --green-500: #ecffcc;
7310
+ --green-600: #ecffcc;
7311
+ --red-100: #330f0f;
7312
+ --red-200: #330f0f;
7313
+ --red-300: #faafaf;
7314
+ --red-400: #fccaca;
7315
+ --red-500: #ffe6e6;
7316
+ --red-600: #ffe6e6;
7317
+ --yellow-100: #332b0a;
7318
+ --yellow-200: #332b0a;
7319
+ --yellow-300: #e6d17e;
7320
+ --yellow-400: #e3d59f;
7321
+ --yellow-500: #fffae6;
7322
+ --yellow-600: #fffae6;
7323
+ --purple-100: #22174d;
7324
+ --purple-200: #22174d;
7325
+ --purple-300: #b6a6f7;
7326
+ --purple-400: #d2c8fa;
7327
+ --purple-500: #e8e3fc;
7328
+ --purple-600: #e8e3fc;
7329
+ --pink-100: #2e0a33;
7330
+ --pink-200: #2e0a33;
7331
+ --pink-300: #f3bbfa;
7332
+ --pink-400: #f7cffc;
7333
+ --pink-500: #fae3fc;
7334
+ --pink-600: #fae3fc;
7401
7335
  --gold-100: hsl(45, 22%, 25%);
7402
7336
  --gold-200: hsl(45, 22%, 25%);
7403
7337
  --gold-300: hsl(45, 92%, 62%);
@@ -7420,14 +7354,14 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
7420
7354
  --bs-md: none;
7421
7355
  --bs-lg: none;
7422
7356
  --bs-xl: none;
7423
- --translucent-secondary: hsla(206, 100%, 40%, 0.9);
7357
+ --translucent-secondary: hsla(204, 6%, 35%, 0.9);
7424
7358
  --translucent-success: hsla(140, 40%, 40%, 0.9);
7425
7359
  --translucent-warning: hsla(47, 76%, 46%, 0.9);
7426
7360
  --translucent-error: hsla(358, 62%, 47%, 0.9);
7427
7361
  --translucent-muted: hsla(210, 8%, 55%, 0.95);
7428
7362
  --focus-neutral: var(--white);
7429
- --focus-theme: var(--theme-secondary-400);
7430
- --focus-ring: hsla(206, 100%, 40%, 0.9);
7363
+ --focus-theme: var(--theme-secondary);
7364
+ --focus-ring: rgba(115, 115, 115, 0.9);
7431
7365
  --focus-ring-success: hsla(140, 40%, 40%, 0.9);
7432
7366
  --focus-ring-warning: hsla(47, 76%, 46%, 0.9);
7433
7367
  --focus-ring-error: hsla(358, 62%, 47%, 0.9);
@@ -7452,66 +7386,72 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
7452
7386
  --theme-primary-400: var(--orange-400);
7453
7387
  --theme-primary-500: var(--orange-500);
7454
7388
  --theme-primary-600: var(--orange-600);
7455
- --theme-secondary: var(--blue-400);
7456
- --theme-secondary-100: var(--blue-100);
7457
- --theme-secondary-200: var(--blue-200);
7458
- --theme-secondary-300: var(--blue-300);
7459
- --theme-secondary-400: var(--blue-400);
7460
- --theme-secondary-500: var(--blue-500);
7461
- --theme-secondary-600: var(--blue-600);
7389
+ --theme-secondary: var(--black);
7390
+ --theme-secondary-100: var(--black-100);
7391
+ --theme-secondary-200: var(--black-200);
7392
+ --theme-secondary-300: var(--black-300);
7393
+ --theme-secondary-400: var(--black-400);
7394
+ --theme-secondary-500: var(--black-500);
7395
+ --theme-secondary-600: var(--black-600);
7462
7396
  --_o-disabled: 0.8;
7463
7397
  }
7464
7398
  @media (prefers-color-scheme: dark) {
7465
7399
  body.theme-highcontrast.theme-system {
7466
- --white: hsl(0, 0%, 0%);
7467
- --black-050: hsl(210, 3%, 15%);
7468
- --black-100: hsl(210, 3%, 18%);
7469
- --black-150: hsl(210, 4%, 21%);
7470
- --black-200: hsl(210, 4%, 27%);
7471
- --black-225: hsl(210, 4%, 30%);
7472
- --black-250: hsl(210, 5%, 36%);
7473
- --black-300: hsl(210, 4%, 47%);
7474
- --black-350: hsl(210, 10%, 74%);
7475
- --black-400: hsl(210, 8%, 80%);
7476
- --black-500: hsl(210, 8%, 90%);
7477
- --black-600: hsl(210, 11%, 98%);
7478
- --black: hsl(0, 0%, 100%);
7479
- --orange-100: hsl(27, 30%, 19%);
7480
- --orange-200: hsl(27, 30%, 19%);
7481
- --orange-300: hsl(27, 80%, 72%);
7482
- --orange-400: hsl(27, 80%, 72%);
7483
- --orange-500: hsl(28, 78%, 93%);
7484
- --orange-600: hsl(28, 78%, 93%);
7485
- --blue-100: hsl(209, 30%, 19%);
7486
- --blue-200: hsl(209, 30%, 19%);
7487
- --blue-300: hsl(210, 80%, 72%);
7488
- --blue-400: hsl(210, 80%, 75%);
7489
- --blue-500: hsl(210, 78%, 93%);
7490
- --blue-600: hsl(210, 78%, 93%);
7491
- --green-100: hsl(147, 30%, 19%);
7492
- --green-200: hsl(147, 30%, 19%);
7493
- --green-300: hsl(148, 40%, 62%);
7494
- --green-400: hsl(148, 40%, 68%);
7495
- --green-500: hsl(150, 39%, 93%);
7496
- --green-600: hsl(150, 39%, 93%);
7497
- --red-100: hsl(358, 30%, 19%);
7498
- --red-200: hsl(358, 30%, 19%);
7499
- --red-300: hsl(0, 75%, 77%);
7500
- --red-400: hsl(0, 73%, 80%);
7501
- --red-500: hsl(0, 76%, 95%);
7502
- --red-600: hsl(0, 76%, 95%);
7503
- --yellow-100: hsl(43, 29%, 17%);
7504
- --yellow-200: hsl(43, 29%, 17%);
7505
- --yellow-300: hsl(43, 75%, 75%);
7506
- --yellow-400: hsl(43, 75%, 75%);
7507
- --yellow-500: hsl(48, 74%, 91%);
7508
- --yellow-600: hsl(44, 74%, 91%);
7509
- --purple-100: hsl(237, 26%, 23%);
7510
- --purple-200: hsl(237, 26%, 23%);
7511
- --purple-300: hsl(237, 98%, 87%);
7512
- --purple-400: hsl(237, 98%, 87%);
7513
- --purple-500: hsl(237, 98%, 96%);
7514
- --purple-600: hsl(237, 98%, 96%);
7400
+ --white: #000000;
7401
+ --black-050: #141414;
7402
+ --black-100: #262626;
7403
+ --black-150: #333333;
7404
+ --black-200: #575757;
7405
+ --black-225: #666666;
7406
+ --black-250: #737373;
7407
+ --black-300: #8c8c8c;
7408
+ --black-350: #a6a6a6;
7409
+ --black-400: #d9d3ce;
7410
+ --black-500: #f2ede9;
7411
+ --black-600: #ffffff;
7412
+ --black: #ffffff;
7413
+ --orange-100: #401f0d;
7414
+ --orange-200: #401f0d;
7415
+ --orange-300: #dead90;
7416
+ --orange-400: #fcccb1;
7417
+ --orange-500: #fadac8;
7418
+ --orange-600: #fadac8;
7419
+ --blue-100: #22304d;
7420
+ --blue-200: #22304d;
7421
+ --blue-300: #a6c3ff;
7422
+ --blue-400: #ccddff;
7423
+ --blue-500: #e6eeff;
7424
+ --blue-600: #e6eeff;
7425
+ --green-100: #28380b;
7426
+ --green-200: #28380b;
7427
+ --green-300: #c4e68a;
7428
+ --green-400: #cce6a1;
7429
+ --green-500: #ecffcc;
7430
+ --green-600: #ecffcc;
7431
+ --red-100: #330f0f;
7432
+ --red-200: #330f0f;
7433
+ --red-300: #faafaf;
7434
+ --red-400: #fccaca;
7435
+ --red-500: #ffe6e6;
7436
+ --red-600: #ffe6e6;
7437
+ --yellow-100: #332b0a;
7438
+ --yellow-200: #332b0a;
7439
+ --yellow-300: #e6d17e;
7440
+ --yellow-400: #e3d59f;
7441
+ --yellow-500: #fffae6;
7442
+ --yellow-600: #fffae6;
7443
+ --purple-100: #22174d;
7444
+ --purple-200: #22174d;
7445
+ --purple-300: #b6a6f7;
7446
+ --purple-400: #d2c8fa;
7447
+ --purple-500: #e8e3fc;
7448
+ --purple-600: #e8e3fc;
7449
+ --pink-100: #2e0a33;
7450
+ --pink-200: #2e0a33;
7451
+ --pink-300: #f3bbfa;
7452
+ --pink-400: #f7cffc;
7453
+ --pink-500: #fae3fc;
7454
+ --pink-600: #fae3fc;
7515
7455
  --gold-100: hsl(45, 22%, 25%);
7516
7456
  --gold-200: hsl(45, 22%, 25%);
7517
7457
  --gold-300: hsl(45, 92%, 62%);
@@ -7534,14 +7474,14 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
7534
7474
  --bs-md: none;
7535
7475
  --bs-lg: none;
7536
7476
  --bs-xl: none;
7537
- --translucent-secondary: hsla(206, 100%, 40%, 0.9);
7477
+ --translucent-secondary: hsla(204, 6%, 35%, 0.9);
7538
7478
  --translucent-success: hsla(140, 40%, 40%, 0.9);
7539
7479
  --translucent-warning: hsla(47, 76%, 46%, 0.9);
7540
7480
  --translucent-error: hsla(358, 62%, 47%, 0.9);
7541
7481
  --translucent-muted: hsla(210, 8%, 55%, 0.95);
7542
7482
  --focus-neutral: var(--white);
7543
- --focus-theme: var(--theme-secondary-400);
7544
- --focus-ring: hsla(206, 100%, 40%, 0.9);
7483
+ --focus-theme: var(--theme-secondary);
7484
+ --focus-ring: rgba(115, 115, 115, 0.9);
7545
7485
  --focus-ring-success: hsla(140, 40%, 40%, 0.9);
7546
7486
  --focus-ring-warning: hsla(47, 76%, 46%, 0.9);
7547
7487
  --focus-ring-error: hsla(358, 62%, 47%, 0.9);
@@ -7566,13 +7506,13 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
7566
7506
  --theme-primary-400: var(--orange-400);
7567
7507
  --theme-primary-500: var(--orange-500);
7568
7508
  --theme-primary-600: var(--orange-600);
7569
- --theme-secondary: var(--blue-400);
7570
- --theme-secondary-100: var(--blue-100);
7571
- --theme-secondary-200: var(--blue-200);
7572
- --theme-secondary-300: var(--blue-300);
7573
- --theme-secondary-400: var(--blue-400);
7574
- --theme-secondary-500: var(--blue-500);
7575
- --theme-secondary-600: var(--blue-600);
7509
+ --theme-secondary: var(--black);
7510
+ --theme-secondary-100: var(--black-100);
7511
+ --theme-secondary-200: var(--black-200);
7512
+ --theme-secondary-300: var(--black-300);
7513
+ --theme-secondary-400: var(--black-400);
7514
+ --theme-secondary-500: var(--black-500);
7515
+ --theme-secondary-600: var(--black-600);
7576
7516
  --_o-disabled: 0.8;
7577
7517
  }
7578
7518
  }
@@ -7745,133 +7685,71 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
7745
7685
  .bls-dashed {
7746
7686
  border-left-style: dashed !important;
7747
7687
  }
7748
- .bar-sm {
7749
- border-radius: var(--br-sm) !important;
7750
- }
7751
7688
  .bar-md {
7752
7689
  border-radius: var(--br-md) !important;
7753
7690
  }
7754
- .bar-lg {
7755
- border-radius: var(--br-lg) !important;
7756
- }
7757
7691
  .bar-circle {
7758
- border-radius: 100% !important;
7692
+ border-radius: var(--br-circle) !important;
7759
7693
  }
7760
7694
  .bar-pill {
7761
- border-radius: 1000px !important;
7695
+ border-radius: var(--br-pill) !important;
7762
7696
  }
7763
7697
  .btlr0 {
7764
7698
  border-top-left-radius: 0 !important;
7765
7699
  }
7766
- .btlr-sm {
7767
- border-top-left-radius: var(--br-sm) !important;
7768
- }
7769
7700
  .btlr-md {
7770
7701
  border-top-left-radius: var(--br-md) !important;
7771
7702
  }
7772
- .btlr-lg {
7773
- border-top-left-radius: var(--br-lg) !important;
7774
- }
7775
7703
  .btrr0 {
7776
7704
  border-top-right-radius: 0 !important;
7777
7705
  }
7778
- .btrr-sm {
7779
- border-top-right-radius: var(--br-sm) !important;
7780
- }
7781
7706
  .btrr-md {
7782
7707
  border-top-right-radius: var(--br-md) !important;
7783
7708
  }
7784
- .btrr-lg {
7785
- border-top-right-radius: var(--br-lg) !important;
7786
- }
7787
7709
  .bblr0 {
7788
7710
  border-bottom-left-radius: 0 !important;
7789
7711
  }
7790
- .bblr-sm {
7791
- border-bottom-left-radius: var(--br-sm) !important;
7792
- }
7793
7712
  .bblr-md {
7794
7713
  border-bottom-left-radius: var(--br-md) !important;
7795
7714
  }
7796
- .bblr-lg {
7797
- border-bottom-left-radius: var(--br-lg) !important;
7798
- }
7799
7715
  .bbrr0 {
7800
7716
  border-bottom-right-radius: 0 !important;
7801
7717
  }
7802
- .bbrr-sm {
7803
- border-bottom-right-radius: var(--br-sm) !important;
7804
- }
7805
7718
  .bbrr-md {
7806
7719
  border-bottom-right-radius: var(--br-md) !important;
7807
7720
  }
7808
- .bbrr-lg {
7809
- border-bottom-right-radius: var(--br-lg) !important;
7810
- }
7811
7721
  .btr0 {
7812
7722
  border-top-left-radius: 0 !important;
7813
7723
  border-top-right-radius: 0 !important;
7814
7724
  }
7815
- .btr-sm {
7816
- border-top-left-radius: var(--br-sm) !important;
7817
- border-top-right-radius: var(--br-sm) !important;
7818
- }
7819
7725
  .btr-md {
7820
7726
  border-top-left-radius: var(--br-md) !important;
7821
7727
  border-top-right-radius: var(--br-md) !important;
7822
7728
  }
7823
- .btr-lg {
7824
- border-top-left-radius: var(--br-lg) !important;
7825
- border-top-right-radius: var(--br-lg) !important;
7826
- }
7827
7729
  .brr0 {
7828
7730
  border-top-right-radius: 0 !important;
7829
7731
  border-bottom-right-radius: 0 !important;
7830
7732
  }
7831
- .brr-sm {
7832
- border-top-right-radius: var(--br-sm) !important;
7833
- border-bottom-right-radius: var(--br-sm) !important;
7834
- }
7835
7733
  .brr-md {
7836
7734
  border-top-right-radius: var(--br-md) !important;
7837
7735
  border-bottom-right-radius: var(--br-md) !important;
7838
7736
  }
7839
- .brr-lg {
7840
- border-top-right-radius: var(--br-lg) !important;
7841
- border-bottom-right-radius: var(--br-lg) !important;
7842
- }
7843
7737
  .bbr0 {
7844
7738
  border-bottom-left-radius: 0 !important;
7845
7739
  border-bottom-right-radius: 0 !important;
7846
7740
  }
7847
- .bbr-sm {
7848
- border-bottom-left-radius: var(--br-sm) !important;
7849
- border-bottom-right-radius: var(--br-sm) !important;
7850
- }
7851
7741
  .bbr-md {
7852
7742
  border-bottom-left-radius: var(--br-md) !important;
7853
7743
  border-bottom-right-radius: var(--br-md) !important;
7854
7744
  }
7855
- .bbr-lg {
7856
- border-bottom-left-radius: var(--br-lg) !important;
7857
- border-bottom-right-radius: var(--br-lg) !important;
7858
- }
7859
7745
  .blr0 {
7860
7746
  border-top-left-radius: 0 !important;
7861
7747
  border-bottom-left-radius: 0 !important;
7862
7748
  }
7863
- .blr-sm {
7864
- border-top-left-radius: var(--br-sm) !important;
7865
- border-bottom-left-radius: var(--br-sm) !important;
7866
- }
7867
7749
  .blr-md {
7868
7750
  border-top-left-radius: var(--br-md) !important;
7869
7751
  border-bottom-left-radius: var(--br-md) !important;
7870
7752
  }
7871
- .blr-lg {
7872
- border-top-left-radius: var(--br-lg) !important;
7873
- border-bottom-left-radius: var(--br-lg) !important;
7874
- }
7875
7753
  .bar0 {
7876
7754
  border-radius: 0 !important;
7877
7755
  }
@@ -8757,6 +8635,114 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
8757
8635
  .f\:fc-purple-600:focus-within {
8758
8636
  color: var(--purple-600) !important;
8759
8637
  }
8638
+ .bg-pink-100,
8639
+ .h\:bg-pink-100:hover,
8640
+ .f\:bg-pink-100:focus,
8641
+ .f\:bg-pink-100:focus-within {
8642
+ background-color: var(--pink-100) !important;
8643
+ }
8644
+ .bc-pink-100,
8645
+ .h\:bc-pink-100:hover,
8646
+ .f\:bc-pink-100:focus,
8647
+ .f\:bc-pink-100:focus-within {
8648
+ border-color: var(--pink-100) !important;
8649
+ }
8650
+ .fc-pink-100,
8651
+ .h\:fc-pink-100:hover,
8652
+ .f\:fc-pink-100:focus,
8653
+ .f\:fc-pink-100:focus-within {
8654
+ color: var(--pink-100) !important;
8655
+ }
8656
+ .bg-pink-200,
8657
+ .h\:bg-pink-200:hover,
8658
+ .f\:bg-pink-200:focus,
8659
+ .f\:bg-pink-200:focus-within {
8660
+ background-color: var(--pink-200) !important;
8661
+ }
8662
+ .bc-pink-200,
8663
+ .h\:bc-pink-200:hover,
8664
+ .f\:bc-pink-200:focus,
8665
+ .f\:bc-pink-200:focus-within {
8666
+ border-color: var(--pink-200) !important;
8667
+ }
8668
+ .fc-pink-200,
8669
+ .h\:fc-pink-200:hover,
8670
+ .f\:fc-pink-200:focus,
8671
+ .f\:fc-pink-200:focus-within {
8672
+ color: var(--pink-200) !important;
8673
+ }
8674
+ .bg-pink-300,
8675
+ .h\:bg-pink-300:hover,
8676
+ .f\:bg-pink-300:focus,
8677
+ .f\:bg-pink-300:focus-within {
8678
+ background-color: var(--pink-300) !important;
8679
+ }
8680
+ .bc-pink-300,
8681
+ .h\:bc-pink-300:hover,
8682
+ .f\:bc-pink-300:focus,
8683
+ .f\:bc-pink-300:focus-within {
8684
+ border-color: var(--pink-300) !important;
8685
+ }
8686
+ .fc-pink-300,
8687
+ .h\:fc-pink-300:hover,
8688
+ .f\:fc-pink-300:focus,
8689
+ .f\:fc-pink-300:focus-within {
8690
+ color: var(--pink-300) !important;
8691
+ }
8692
+ .bg-pink-400,
8693
+ .h\:bg-pink-400:hover,
8694
+ .f\:bg-pink-400:focus,
8695
+ .f\:bg-pink-400:focus-within {
8696
+ background-color: var(--pink-400) !important;
8697
+ }
8698
+ .bc-pink-400,
8699
+ .h\:bc-pink-400:hover,
8700
+ .f\:bc-pink-400:focus,
8701
+ .f\:bc-pink-400:focus-within {
8702
+ border-color: var(--pink-400) !important;
8703
+ }
8704
+ .fc-pink-400,
8705
+ .h\:fc-pink-400:hover,
8706
+ .f\:fc-pink-400:focus,
8707
+ .f\:fc-pink-400:focus-within {
8708
+ color: var(--pink-400) !important;
8709
+ }
8710
+ .bg-pink-500,
8711
+ .h\:bg-pink-500:hover,
8712
+ .f\:bg-pink-500:focus,
8713
+ .f\:bg-pink-500:focus-within {
8714
+ background-color: var(--pink-500) !important;
8715
+ }
8716
+ .bc-pink-500,
8717
+ .h\:bc-pink-500:hover,
8718
+ .f\:bc-pink-500:focus,
8719
+ .f\:bc-pink-500:focus-within {
8720
+ border-color: var(--pink-500) !important;
8721
+ }
8722
+ .fc-pink-500,
8723
+ .h\:fc-pink-500:hover,
8724
+ .f\:fc-pink-500:focus,
8725
+ .f\:fc-pink-500:focus-within {
8726
+ color: var(--pink-500) !important;
8727
+ }
8728
+ .bg-pink-600,
8729
+ .h\:bg-pink-600:hover,
8730
+ .f\:bg-pink-600:focus,
8731
+ .f\:bg-pink-600:focus-within {
8732
+ background-color: var(--pink-600) !important;
8733
+ }
8734
+ .bc-pink-600,
8735
+ .h\:bc-pink-600:hover,
8736
+ .f\:bc-pink-600:focus,
8737
+ .f\:bc-pink-600:focus-within {
8738
+ border-color: var(--pink-600) !important;
8739
+ }
8740
+ .fc-pink-600,
8741
+ .h\:fc-pink-600:hover,
8742
+ .f\:fc-pink-600:focus,
8743
+ .f\:fc-pink-600:focus-within {
8744
+ color: var(--pink-600) !important;
8745
+ }
8760
8746
  .bg-gold-100,
8761
8747
  .h\:bg-gold-100:hover,
8762
8748
  .f\:bg-gold-100:focus,
@@ -9634,6 +9620,42 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
9634
9620
  body.theme-system .d\:fc-purple-600 {
9635
9621
  color: var(--purple-600) !important;
9636
9622
  }
9623
+ body.theme-system .d\:bg-pink-100 {
9624
+ background-color: var(--pink-100) !important;
9625
+ }
9626
+ body.theme-system .d\:fc-pink-100 {
9627
+ color: var(--pink-100) !important;
9628
+ }
9629
+ body.theme-system .d\:bg-pink-200 {
9630
+ background-color: var(--pink-200) !important;
9631
+ }
9632
+ body.theme-system .d\:fc-pink-200 {
9633
+ color: var(--pink-200) !important;
9634
+ }
9635
+ body.theme-system .d\:bg-pink-300 {
9636
+ background-color: var(--pink-300) !important;
9637
+ }
9638
+ body.theme-system .d\:fc-pink-300 {
9639
+ color: var(--pink-300) !important;
9640
+ }
9641
+ body.theme-system .d\:bg-pink-400 {
9642
+ background-color: var(--pink-400) !important;
9643
+ }
9644
+ body.theme-system .d\:fc-pink-400 {
9645
+ color: var(--pink-400) !important;
9646
+ }
9647
+ body.theme-system .d\:bg-pink-500 {
9648
+ background-color: var(--pink-500) !important;
9649
+ }
9650
+ body.theme-system .d\:fc-pink-500 {
9651
+ color: var(--pink-500) !important;
9652
+ }
9653
+ body.theme-system .d\:bg-pink-600 {
9654
+ background-color: var(--pink-600) !important;
9655
+ }
9656
+ body.theme-system .d\:fc-pink-600 {
9657
+ color: var(--pink-600) !important;
9658
+ }
9637
9659
  body.theme-system .d\:bg-gold-100 {
9638
9660
  background-color: var(--gold-100) !important;
9639
9661
  }
@@ -10254,6 +10276,66 @@ body.theme-dark .d\:fc-purple-600,
10254
10276
  body.theme-system .theme-dark__forced .d\:fc-purple-600 {
10255
10277
  color: var(--purple-600) !important;
10256
10278
  }
10279
+ body.theme-dark .d\:bg-pink-100,
10280
+ .theme-dark__forced .d\:bg-pink-100,
10281
+ body.theme-system .theme-dark__forced .d\:bg-pink-100 {
10282
+ background-color: var(--pink-100) !important;
10283
+ }
10284
+ body.theme-dark .d\:fc-pink-100,
10285
+ .theme-dark__forced .d\:fc-pink-100,
10286
+ body.theme-system .theme-dark__forced .d\:fc-pink-100 {
10287
+ color: var(--pink-100) !important;
10288
+ }
10289
+ body.theme-dark .d\:bg-pink-200,
10290
+ .theme-dark__forced .d\:bg-pink-200,
10291
+ body.theme-system .theme-dark__forced .d\:bg-pink-200 {
10292
+ background-color: var(--pink-200) !important;
10293
+ }
10294
+ body.theme-dark .d\:fc-pink-200,
10295
+ .theme-dark__forced .d\:fc-pink-200,
10296
+ body.theme-system .theme-dark__forced .d\:fc-pink-200 {
10297
+ color: var(--pink-200) !important;
10298
+ }
10299
+ body.theme-dark .d\:bg-pink-300,
10300
+ .theme-dark__forced .d\:bg-pink-300,
10301
+ body.theme-system .theme-dark__forced .d\:bg-pink-300 {
10302
+ background-color: var(--pink-300) !important;
10303
+ }
10304
+ body.theme-dark .d\:fc-pink-300,
10305
+ .theme-dark__forced .d\:fc-pink-300,
10306
+ body.theme-system .theme-dark__forced .d\:fc-pink-300 {
10307
+ color: var(--pink-300) !important;
10308
+ }
10309
+ body.theme-dark .d\:bg-pink-400,
10310
+ .theme-dark__forced .d\:bg-pink-400,
10311
+ body.theme-system .theme-dark__forced .d\:bg-pink-400 {
10312
+ background-color: var(--pink-400) !important;
10313
+ }
10314
+ body.theme-dark .d\:fc-pink-400,
10315
+ .theme-dark__forced .d\:fc-pink-400,
10316
+ body.theme-system .theme-dark__forced .d\:fc-pink-400 {
10317
+ color: var(--pink-400) !important;
10318
+ }
10319
+ body.theme-dark .d\:bg-pink-500,
10320
+ .theme-dark__forced .d\:bg-pink-500,
10321
+ body.theme-system .theme-dark__forced .d\:bg-pink-500 {
10322
+ background-color: var(--pink-500) !important;
10323
+ }
10324
+ body.theme-dark .d\:fc-pink-500,
10325
+ .theme-dark__forced .d\:fc-pink-500,
10326
+ body.theme-system .theme-dark__forced .d\:fc-pink-500 {
10327
+ color: var(--pink-500) !important;
10328
+ }
10329
+ body.theme-dark .d\:bg-pink-600,
10330
+ .theme-dark__forced .d\:bg-pink-600,
10331
+ body.theme-system .theme-dark__forced .d\:bg-pink-600 {
10332
+ background-color: var(--pink-600) !important;
10333
+ }
10334
+ body.theme-dark .d\:fc-pink-600,
10335
+ .theme-dark__forced .d\:fc-pink-600,
10336
+ body.theme-system .theme-dark__forced .d\:fc-pink-600 {
10337
+ color: var(--pink-600) !important;
10338
+ }
10257
10339
  body.theme-dark .d\:bg-gold-100,
10258
10340
  .theme-dark__forced .d\:bg-gold-100,
10259
10341
  body.theme-system .theme-dark__forced .d\:bg-gold-100 {
@@ -15377,8 +15459,7 @@ p {
15377
15459
  .fs-body1 {
15378
15460
  font-size: var(--fs-body1) !important;
15379
15461
  }
15380
- .fs-caption,
15381
- .fs-category {
15462
+ .fs-caption {
15382
15463
  font-size: var(--fs-caption) !important;
15383
15464
  }
15384
15465
  .fs-fine {
@@ -15386,45 +15467,36 @@ p {
15386
15467
  }
15387
15468
  @media (max-width: 640px) {
15388
15469
  html .fs-display4 {
15389
- font-size: 3.8rem !important;
15470
+ font-size: calc(var(--fs-display4) * 0.43) !important;
15390
15471
  }
15391
15472
  html .fs-display3 {
15392
- font-size: 3.3rem !important;
15473
+ font-size: calc(var(--fs-display3) * 0.5139) !important;
15393
15474
  }
15394
15475
  html .fs-display2 {
15395
- font-size: 3rem !important;
15476
+ font-size: calc(var(--fs-display2) * 0.5862) !important;
15396
15477
  }
15397
15478
  html .fs-display1 {
15398
- font-size: 2.6rem !important;
15479
+ font-size: calc(var(--fs-display1) * 0.6304) !important;
15399
15480
  }
15400
15481
  html .fs-headline2 {
15401
- font-size: 2.3rem !important;
15482
+ font-size: calc(var(--fs-headline2) * 0.7224) !important;
15402
15483
  }
15403
15484
  html .fs-headline1 {
15404
- font-size: 2rem !important;
15485
+ font-size: calc(var(--fs-headline1) * 0.8215) !important;
15405
15486
  }
15406
15487
  html .fs-title {
15407
- font-size: 1.8rem !important;
15488
+ font-size: calc(var(--fs-title) * 0.9094) !important;
15408
15489
  }
15409
15490
  html .fs-subheading {
15410
- font-size: 1.6rem !important;
15491
+ font-size: calc(var(--fs-subheading) * 0.8998) !important;
15411
15492
  }
15412
15493
  html .fs-body3 {
15413
- font-size: 1.4rem !important;
15494
+ font-size: calc(var(--fs-body3) * 0.8888) !important;
15414
15495
  }
15415
15496
  html .fs-body2 {
15416
- font-size: 1.3rem !important;
15497
+ font-size: calc(var(--fs-body2) * 0.9374) !important;
15417
15498
  }
15418
15499
  }
15419
- .fs-category {
15420
- font-weight: 700;
15421
- text-transform: uppercase;
15422
- }
15423
- .fs-category.has-border {
15424
- width: 100%;
15425
- padding: var(--su4) 0;
15426
- border-top: var(--su-static1) solid var(--bc-medium);
15427
- }
15428
15500
  .lh-xs {
15429
15501
  line-height: var(--lh-xs) !important;
15430
15502
  }
@@ -15461,8 +15533,11 @@ p {
15461
15533
  .fw-normal {
15462
15534
  font-weight: 400 !important;
15463
15535
  }
15536
+ .fw-medium {
15537
+ font-weight: 500 !important;
15538
+ }
15464
15539
  .fw-bold {
15465
- font-weight: 700 !important;
15540
+ font-weight: 600 !important;
15466
15541
  }
15467
15542
  .fs-normal {
15468
15543
  font-style: normal !important;
@@ -16315,22 +16390,22 @@ ol {
16315
16390
  box-shadow: 0 0 0 var(--su-static4) var(--focus-ring);
16316
16391
  }
16317
16392
  .bs-sm.bs-hover:hover {
16318
- box-shadow: 0 var(--su-static2) var(--su-static8) hsl(210, 8%, 95%) !important;
16393
+ box-shadow: 0 var(--su-static2) var(--su-static8) #f0efed !important;
16319
16394
  }
16320
16395
  .bs-md.bs-hover:hover {
16321
- box-shadow: 0 var(--su-static4) var(--su-static8) hsl(210, 8%, 85%) !important;
16396
+ box-shadow: 0 var(--su-static4) var(--su-static8) #d7d8db !important;
16322
16397
  }
16323
16398
  .bs-lg.bs-hover:hover {
16324
- box-shadow: 0 var(--su-static4) var(--su-static12) hsla(210, 8%, 68%, 0.7) !important;
16399
+ box-shadow: 0 var(--su-static4) var(--su-static12) rgba(132, 135, 140, 0.7) !important;
16325
16400
  }
16326
16401
  .bs-i-sm.bs-hover:hover {
16327
- box-shadow: inset 0 var(--su-static1) var(--su-static8) 0 hsla(210, 9%, 75%, 0.75) !important;
16402
+ box-shadow: inset 0 var(--su-static1) var(--su-static8) 0 rgba(167, 170, 176, 0.75) !important;
16328
16403
  }
16329
16404
  .bs-i-md.bs-hover:hover {
16330
- box-shadow: inset 0 var(--su-static1) var(--su-static8) 0 hsla(210, 8%, 68%, 0.8) !important;
16405
+ box-shadow: inset 0 var(--su-static1) var(--su-static8) 0 rgba(132, 135, 140, 0.8) !important;
16331
16406
  }
16332
16407
  .bs-i-lg.bs-hover:hover {
16333
- box-shadow: inset 0 var(--su-static1) var(--su-static12) 0 hsl(210, 8%, 68%) !important;
16408
+ box-shadow: inset 0 var(--su-static1) var(--su-static12) 0 #84878c !important;
16334
16409
  }
16335
16410
  .t {
16336
16411
  transition-duration: var(--transition-time);
@@ -23132,12 +23207,6 @@ body {
23132
23207
  font-size: var(--fs-base);
23133
23208
  line-height: var(--lh-base);
23134
23209
  }
23135
- @media (max-width: 640px) {
23136
- html ,
23137
- html body {
23138
- font-size: 11px;
23139
- }
23140
- }
23141
23210
  body {
23142
23211
  box-sizing: border-box;
23143
23212
  min-height: 100%;