@stackoverflow/stacks 2.0.0-rc.0 → 2.0.0-rc.10

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 (78) hide show
  1. package/README.md +5 -0
  2. package/dist/components/code-block/code-block.fixtures.d.ts +2 -0
  3. package/dist/css/stacks.css +792 -765
  4. package/dist/css/stacks.min.css +1 -1
  5. package/dist/js/stacks.js +265 -110
  6. package/dist/js/stacks.min.js +1 -1
  7. package/lib/atomic/__snapshots__/color.less.test.ts.snap +246 -0
  8. package/lib/atomic/typography.less +4 -0
  9. package/lib/base/body.less +2 -2
  10. package/lib/components/activity-indicator/activity-indicator.a11y.test.ts +1 -1
  11. package/lib/components/activity-indicator/activity-indicator.less +17 -4
  12. package/lib/components/anchor/anchor.less +10 -6
  13. package/lib/components/anchor/anchor.visual.test.ts +0 -4
  14. package/lib/components/avatar/avatar.visual.test.ts +0 -3
  15. package/lib/components/badge/badge.a11y.test.ts +2 -2
  16. package/lib/components/badge/badge.less +21 -29
  17. package/lib/components/banner/banner.less +2 -2
  18. package/lib/components/block-link/block-link.less +5 -4
  19. package/lib/components/button/button.a11y.test.ts +1 -4
  20. package/lib/components/button/button.less +48 -78
  21. package/lib/components/button/button.visual.test.ts +1 -4
  22. package/lib/components/card/card.less +8 -0
  23. package/lib/components/code-block/code-block.a11y.test.ts +30 -0
  24. package/lib/components/code-block/code-block.fixtures.ts +88 -0
  25. package/lib/components/code-block/code-block.visual.test.ts +20 -0
  26. package/lib/components/description/description.a11y.test.ts +1 -0
  27. package/lib/components/description/description.less +1 -1
  28. package/lib/components/expandable/expandable.a11y.test.ts +27 -0
  29. package/lib/components/expandable/expandable.visual.test.ts +27 -0
  30. package/lib/components/input-icon/input-icon.less +1 -1
  31. package/lib/components/input-message/input-message.less +4 -3
  32. package/lib/components/input_textarea/input_textarea.less +1 -1
  33. package/lib/components/label/label.less +4 -14
  34. package/lib/components/link/link.less +12 -12
  35. package/lib/components/link-preview/link-preview.a11y.test.ts +48 -0
  36. package/lib/components/link-preview/link-preview.less +16 -7
  37. package/lib/components/link-preview/link-preview.visual.test.ts +52 -0
  38. package/lib/components/navigation/navigation.a11y.test.ts +80 -0
  39. package/lib/components/navigation/navigation.visual.test.ts +101 -0
  40. package/lib/components/notice/notice.a11y.test.ts +17 -0
  41. package/lib/components/notice/notice.less +45 -82
  42. package/lib/components/notice/notice.visual.test.ts +26 -0
  43. package/lib/components/page-title/page-title.a11y.test.ts +29 -0
  44. package/lib/components/page-title/page-title.less +1 -1
  45. package/lib/components/page-title/page-title.visual.test.ts +59 -0
  46. package/lib/components/pagination/pagination.a11y.test.ts +20 -0
  47. package/lib/components/pagination/pagination.less +2 -2
  48. package/lib/components/pagination/pagination.visual.test.ts +26 -0
  49. package/lib/components/post-summary/post-summary.less +15 -15
  50. package/lib/components/progress-bar/progress-bar.less +2 -2
  51. package/lib/components/prose/prose.less +2 -2
  52. package/lib/components/select/select.less +1 -1
  53. package/lib/components/sidebar-widget/sidebar-widget.less +3 -3
  54. package/lib/components/spinner/spinner.a11y.test.ts +15 -0
  55. package/lib/components/spinner/spinner.visual.test.ts +43 -0
  56. package/lib/components/tag/tag.a11y.test.ts +23 -0
  57. package/lib/components/tag/tag.less +29 -29
  58. package/lib/components/tag/tag.visual.test.ts +46 -0
  59. package/lib/components/toast/toast.a11y.test.ts +30 -0
  60. package/lib/components/toast/toast.visual.test.ts +10 -6
  61. package/lib/components/toggle-switch/toggle-switch.less +2 -5
  62. package/lib/components/topbar/topbar.less +44 -44
  63. package/lib/components/uploader/uploader.less +19 -13
  64. package/lib/components/user-card/user-card.less +1 -1
  65. package/lib/exports/__snapshots__/color-mixins.less.test.ts.snap +17 -10
  66. package/lib/exports/__snapshots__/color.less.test.ts.snap +197 -185
  67. package/lib/exports/color-mixins.less +1 -1
  68. package/lib/exports/color-sets.less +130 -81
  69. package/lib/exports/color.less +14 -6
  70. package/lib/exports/v1/__snapshots__/constants-colors.less.test.ts.snap +3 -3
  71. package/lib/exports/v1/constants-colors.less +2 -2
  72. package/lib/input-utils.less +1 -1
  73. package/lib/test/axe-apca/README.md +19 -0
  74. package/lib/test/axe-apca/src/axe-apca.test.ts +77 -1
  75. package/lib/test/axe-apca/src/axe-apca.ts +16 -8
  76. package/lib/test/test-utils.ts +7 -3
  77. package/package.json +14 -14
  78. package/lib/exports/theme.less +0 -85
package/dist/css/stacks.css CHANGED
@@ -413,7 +413,7 @@ fieldset {
413
413
  .s-activity-indicator {
414
414
  --_ai-focus-ring: var(--focus-ring);
415
415
  --_ai-bg: var(--theme-secondary-400);
416
- --_ai-fc: var(--_white-static);
416
+ --_ai-fc: var(--white);
417
417
  background-color: var(--_ai-bg);
418
418
  box-shadow: 0 0 0 var(--su-static4) var(--_ai-focus-ring);
419
419
  color: var(--_ai-fc);
@@ -428,20 +428,31 @@ fieldset {
428
428
  text-transform: uppercase;
429
429
  }
430
430
  body.theme-highcontrast .s-activity-indicator {
431
- --_ai-fc: var(--white);
431
+ --_ai-bg: var(--theme-secondary-500);
432
432
  }
433
433
  .s-activity-indicator.s-activity-indicator__danger {
434
434
  --_ai-bg: var(--red-400);
435
435
  --_ai-focus-ring: var(--focus-ring-error);
436
436
  }
437
+ body.theme-highcontrast .s-activity-indicator.s-activity-indicator__danger {
438
+ --_ai-bg: var(--red-500);
439
+ }
437
440
  .s-activity-indicator.s-activity-indicator__success {
438
441
  --_ai-bg: var(--green-400);
439
442
  --_ai-focus-ring: var(--focus-ring-success);
440
443
  }
444
+ body.theme-highcontrast .s-activity-indicator.s-activity-indicator__success {
445
+ --_ai-bg: var(--green-500);
446
+ }
441
447
  .s-activity-indicator.s-activity-indicator__warning {
442
- --_ai-bg: var(--yellow-500);
448
+ --_ai-bg: var(--yellow-400);
449
+ --_ai-fc: var(--_black-static);
443
450
  --_ai-focus-ring: var(--focus-ring-warning);
444
451
  }
452
+ body.theme-highcontrast .s-activity-indicator.s-activity-indicator__warning {
453
+ --_ai-bg: var(--yellow-500);
454
+ --_ai-fc: var(--white);
455
+ }
445
456
  .s-anchors {
446
457
  --_an-a-fc-visited: var(--_an-a-fc);
447
458
  }
@@ -451,24 +462,28 @@ body.theme-highcontrast .s-activity-indicator {
451
462
  }
452
463
  .s-anchors.s-anchors__danger {
453
464
  --_an-a-fc: var(--red-400);
454
- --_an-a-fc-hover: var(--red-400);
465
+ --_an-a-fc-hover: var(--red-500);
466
+ --_an-a-fc-visited: var(--red-600);
455
467
  }
456
468
  .s-anchors.s-anchors__default {
457
- --_an-a-fc: var(--theme-link-color);
458
- --_an-a-fc-hover: var(--theme-link-color-hover);
459
- --_an-a-fc-visited: var(--theme-link-color-visited);
469
+ --_an-a-fc: var(--theme-link-color, var(--theme-secondary-400));
470
+ --_an-a-fc-hover: var(--theme-link-color-hover, var(--theme-secondary-500));
471
+ --_an-a-fc-visited: var(--theme-link-color-visited, var(--theme-secondary-600));
460
472
  }
461
473
  .s-anchors.s-anchors__grayscale {
462
- --_an-a-fc: var(--black-500);
474
+ --_an-a-fc: var(--black-400);
463
475
  --_an-a-fc-hover: var(--black-500);
476
+ --_an-a-fc-visited: var(--black-600);
464
477
  }
465
478
  .s-anchors.s-anchors__inherit {
466
479
  --_an-a-fc: inherit;
467
480
  --_an-a-fc-hover: inherit;
481
+ --_an-a-fc-visited: inherit;
468
482
  }
469
483
  .s-anchors.s-anchors__muted {
470
484
  --_an-a-fc: var(--black-400);
471
- --_an-a-fc-hover: var(--black-400);
485
+ --_an-a-fc-hover: var(--black-500);
486
+ --_an-a-fc-visited: var(--black-600);
472
487
  }
473
488
  .s-anchors.s-anchors__danger a:not(.s-link),
474
489
  .s-anchors.s-anchors__default a:not(.s-link),
@@ -708,21 +723,16 @@ body.theme-highcontrast .s-badgebody.theme-highcontrast .s-badge__staff {
708
723
  .s-badge.s-badge__bronze {
709
724
  --_ba-fc: var(--black-500);
710
725
  }
711
- body.theme-highcontrast .s-badge.s-badge__gold,
712
- body.theme-highcontrast .s-badge.s-badge__silver,
713
- body.theme-highcontrast .s-badge.s-badge__bronze {
714
- --_ba-fc: var(--black-600);
715
- }
716
726
  .s-badge.s-badge__gold {
717
- --_ba-bc: var(--gold-400);
727
+ --_ba-bc: var(--gold-300);
718
728
  --_ba-bg: var(--gold-100);
719
729
  }
720
730
  .s-badge.s-badge__silver {
721
- --_ba-bc: var(--silver-400);
731
+ --_ba-bc: var(--silver-300);
722
732
  --_ba-bg: var(--silver-100);
723
733
  }
724
734
  .s-badge.s-badge__bronze {
725
- --_ba-bc: var(--bronze-400);
735
+ --_ba-bc: var(--bronze-300);
726
736
  --_ba-bg: var(--bronze-100);
727
737
  }
728
738
  .s-badge.s-badge__answered,
@@ -740,17 +750,17 @@ body.theme-highcontrast .s-badge.s-badge__bronze {
740
750
  --_ba-bg: var(--green-400);
741
751
  }
742
752
  .s-badge.s-badge__bounty {
743
- --_ba-bg: var(--blue-500);
753
+ --_ba-bg: var(--blue-400);
744
754
  }
745
755
  .s-badge.s-badge__important {
746
- --_ba-bg: var(--red-500);
756
+ --_ba-bg: var(--red-400);
747
757
  }
748
758
  .s-badge.s-badge__rep {
749
- --_ba-bc: var(--green-400);
759
+ --_ba-bc: var(--green-300);
750
760
  --_ba-fc: var(--green-400);
751
761
  }
752
762
  .s-badge.s-badge__rep-down {
753
- --_ba-bc: var(--red-400);
763
+ --_ba-bc: var(--red-300);
754
764
  --_ba-fc: var(--red-400);
755
765
  }
756
766
  .s-badge.s-badge__votes:not(.s-badge__answered) {
@@ -759,8 +769,8 @@ body.theme-highcontrast .s-badge.s-badge__bronze {
759
769
  }
760
770
  .s-badge.s-badge__admin {
761
771
  --_ba-bc: var(--theme-primary-300);
762
- --_ba-bg: var(--theme-primary-200);
763
- --_ba-fc: var(--theme-primary-600);
772
+ --_ba-bg: var(--theme-primary-100);
773
+ --_ba-fc: var(--theme-primary-500);
764
774
  }
765
775
  .s-badge.s-badge__moderator {
766
776
  --_ba-bc: var(--theme-secondary-300);
@@ -798,8 +808,8 @@ body.theme-highcontrast .s-badge.s-badge__bronze {
798
808
  mask-size: contain;
799
809
  }
800
810
  .s-badge.s-badge__staff {
801
- --_ba-bc: var(--orange-400);
802
- --_ba-bg: var(--orange-300);
811
+ --_ba-bc: var(--orange-300);
812
+ --_ba-bg: var(--orange-200);
803
813
  --_ba-fc: var(--orange-600);
804
814
  }
805
815
  .s-badge.s-badge__danger.s-badge__filled,
@@ -807,31 +817,28 @@ body.theme-highcontrast .s-badge.s-badge__bronze {
807
817
  --_ba-bc: transparent;
808
818
  }
809
819
  .s-badge.s-badge__danger {
810
- --_ba-bc: var(--red-500);
811
- --_ba-bg: var(--red-300);
820
+ --_ba-bc: var(--red-300);
821
+ --_ba-bg: var(--red-200);
812
822
  --_ba-fc: var(--red-600);
813
823
  }
814
824
  .s-badge.s-badge__danger.s-badge__filled {
815
825
  --_ba-bg: var(--red-400);
816
- --_ba-fc: var(--_white-static);
817
- }
818
- body.theme-highcontrast .s-badge.s-badge__danger.s-badge__filled {
819
826
  --_ba-fc: var(--white);
820
827
  }
821
828
  .s-badge.s-badge__info {
822
- --_ba-bc: var(--blue-500);
823
- --_ba-bg: var(--blue-300);
829
+ --_ba-bc: var(--blue-300);
830
+ --_ba-bg: var(--blue-200);
824
831
  --_ba-fc: var(--blue-600);
825
832
  }
826
833
  .s-badge.s-badge__warning {
827
- --_ba-bc: var(--yellow-500);
828
- --_ba-bg: var(--yellow-300);
834
+ --_ba-bc: var(--yellow-300);
835
+ --_ba-bg: var(--yellow-200);
829
836
  --_ba-fc: var(--yellow-600);
830
837
  }
831
838
  .s-badge.s-badge__muted {
832
- --_ba-bc: var(--black-500);
833
- --_ba-bg: var(--black-225);
834
- --_ba-fc: var(--black-600);
839
+ --_ba-bc: var(--black-300);
840
+ --_ba-bg: var(--black-200);
841
+ --_ba-fc: var(--black-500);
835
842
  }
836
843
  .s-badge.s-badge__muted.s-badge__filled {
837
844
  --_ba-bg: var(--black-500);
@@ -849,11 +856,12 @@ a.s-badge:hover {
849
856
  }
850
857
  .s-banner {
851
858
  --_no-x-offset: 0;
852
- --_no-bc: var(--bc-medium);
853
- --_no-bg: var(--black-150);
854
- --_no-fc: var(--fc-medium);
859
+ --_no-bc: var(--black-225);
860
+ --_no-bg: var(--black-100);
861
+ --_no-fc: var(--black-500);
855
862
  --_no-btn-bg-focus: var(--black-225);
856
863
  --_no-btn-bg-active: var(--black-250);
864
+ --_no-btn-fc: var(--_no-fc);
857
865
  background: var(--_no-bg);
858
866
  border-color: var(--_no-bc);
859
867
  color: var(--_no-fc);
@@ -863,8 +871,8 @@ a.s-badge:hover {
863
871
  inset: 0 0 auto 0;
864
872
  padding: var(--su12);
865
873
  position: fixed;
866
- -webkit-transform: translate3d(0, calc(var(--theme-topbar-height) * var(--_no-x-offset)), 0);
867
- transform: translate3d(0, calc(var(--theme-topbar-height) * var(--_no-x-offset)), 0);
874
+ -webkit-transform: translate3d(0, calc(var(--theme-topbar-height, calc(var(--su-static48) + var(--su-static8))) * var(--_no-x-offset)), 0);
875
+ transform: translate3d(0, calc(var(--theme-topbar-height, calc(var(--su-static48) + var(--su-static8))) * var(--_no-x-offset)), 0);
868
876
  width: 100%;
869
877
  z-index: calc(var(--zi-navigation-fixed) - 1);
870
878
  }
@@ -895,174 +903,111 @@ body.theme-highcontrast.theme-dark .s-banner:not(.s-banner__important) {
895
903
  --_no-fc: var(--white);
896
904
  --_no-btn-bg-focus: var(--black-600);
897
905
  --_no-btn-bg-active: var(--black-600);
898
- }
899
- body.theme-highcontrast .s-banner__important {
900
- --_no-bc: var(--_no-bg);
906
+ --_no-btn-fc: var(--_no-fc);
907
+ --_no-code-bg: var(--black-300);
901
908
  }
902
909
  .s-banner__danger {
903
910
  --_no-bc: var(--red-300);
904
- --_no-bg: var(--red-200);
905
- --_no-btn-bg-active: var(--red-300);
906
- --_no-btn-bg-focus: var(--red-300);
907
- }
908
- body.theme-highcontrast .s-banner__danger:not(.s-banner__important) {
909
- --_no-bg: var(--red-300);
911
+ --_no-bg: var(--red-100);
912
+ --_no-btn-bg-active: var(--red-200);
913
+ --_no-btn-bg-focus: var(--red-200);
914
+ --_no-btn-fc: var(--red-500);
915
+ --_no-code-bg: var(--red-300);
910
916
  }
911
917
  .s-banner__danger.s-banner__important {
912
918
  --_no-bc: var(--_no-bg);
913
919
  --_no-bg: var(--red-400);
914
920
  --_no-btn-bg-active: var(--red-500);
915
921
  --_no-btn-bg-focus: var(--red-500);
922
+ --_no-btn-fc: var(--red-100);
916
923
  }
917
- @media (prefers-color-scheme: dark) {
918
- body.theme-system .s-banner__danger.s-banner__important {
919
- --_no-bg: var(--red-400);
920
- --_no-fc: var(--black-600);
921
- }
922
- }
923
- body.theme-dark .s-banner__danger.s-banner__important,
924
- .theme-dark__forced .s-banner__danger.s-banner__important,
925
- body.theme-system .theme-dark__forced .s-banner__danger.s-banner__important {
926
- --_no-bg: var(--red-400);
927
- --_no-fc: var(--black-600);
928
- }
929
- @media (prefers-color-scheme: dark) {
930
- body.theme-highcontrast.theme-system .s-banner__danger.s-banner__important {
931
- --_no-bg: var(--red-400);
932
- --_no-fc: var(--white);
933
- }
934
- }
935
- body.theme-highcontrast.theme-dark .s-banner__danger.s-banner__important {
936
- --_no-bg: var(--red-400);
937
- --_no-fc: var(--white);
924
+ body.theme-highcontrast .s-banner__danger.s-banner__important {
925
+ --_no-bg: var(--red-500);
938
926
  }
939
927
  .s-banner__info {
940
928
  --_no-bc: var(--theme-secondary-300);
941
- --_no-bg: var(--theme-secondary-200);
942
- --_no-btn-bg-focus: var(--theme-secondary-300);
943
- --_no-btn-bg-active: var(--theme-secondary-300);
929
+ --_no-bg: var(--theme-secondary-100);
930
+ --_no-btn-bg-focus: var(--theme-secondary-200);
931
+ --_no-btn-bg-active: var(--theme-secondary-200);
932
+ --_no-btn-fc: var(--theme-secondary-500);
944
933
  --_no-code-bg: var(--theme-secondary-300);
945
934
  }
946
- body.theme-highcontrast .s-banner__info:not(.s-banner__important) {
947
- --_no-bg: var(--theme-secondary-300);
948
- }
949
- @media (prefers-color-scheme: dark) {
950
- body.theme-highcontrast.theme-system .s-banner__info:not(.s-banner__important) {
951
- --_no-bg: var(--theme-secondary-300);
952
- }
953
- }
954
- body.theme-highcontrast.theme-dark .s-banner__info:not(.s-banner__important) {
955
- --_no-bg: var(--theme-secondary-300);
956
- }
957
935
  .s-banner__info.s-banner__important {
958
936
  --_no-bc: var(--_no-bg);
959
937
  --_no-bg: var(--theme-secondary-400);
960
938
  --_no-btn-bg-active: var(--theme-secondary-500);
961
- --_no-btn-bg-focus: var(--theme-secondary-400);
962
- }
963
- @media (prefers-color-scheme: dark) {
964
- body.theme-system .s-banner__info.s-banner__important {
965
- --_no-bg: var(--theme-secondary-400);
966
- --_no-fc: var(--black-600);
967
- }
968
- }
969
- body.theme-dark .s-banner__info.s-banner__important,
970
- .theme-dark__forced .s-banner__info.s-banner__important,
971
- body.theme-system .theme-dark__forced .s-banner__info.s-banner__important {
972
- --_no-bg: var(--theme-secondary-400);
973
- --_no-fc: var(--black-600);
939
+ --_no-btn-bg-focus: var(--theme-secondary-500);
940
+ --_no-btn-fc: var(--theme-secondary-100);
974
941
  }
975
- @media (prefers-color-scheme: dark) {
976
- body.theme-highcontrast.theme-system .s-banner__info.s-banner__important {
977
- --_no-bg: var(--theme-secondary-400);
978
- --_no-fc: var(--white);
979
- }
980
- }
981
- body.theme-highcontrast.theme-dark .s-banner__info.s-banner__important {
982
- --_no-bg: var(--theme-secondary-400);
983
- --_no-fc: var(--white);
942
+ body.theme-highcontrast .s-banner__info.s-banner__important {
943
+ --_no-bg: var(--theme-secondary-500);
984
944
  }
985
945
  .s-banner__success {
986
946
  --_no-bc: var(--green-300);
987
- --_no-bg: var(--green-200);
988
- --_no-btn-bg-active: var(--green-300);
989
- --_no-btn-bg-focus: var(--green-300);
990
- }
991
- body.theme-highcontrast .s-banner__success:not(.s-banner__important) {
992
- --_no-bg: var(--green-300);
947
+ --_no-bg: var(--green-100);
948
+ --_no-btn-bg-active: var(--green-200);
949
+ --_no-btn-bg-focus: var(--green-200);
950
+ --_no-btn-fc: var(--green-500);
951
+ --_no-code-bg: var(--green-300);
993
952
  }
994
953
  .s-banner__success.s-banner__important {
995
954
  --_no-bc: var(--_no-bg);
996
955
  --_no-bg: var(--green-400);
997
- --_no-fc: var(--black-600);
998
956
  --_no-btn-bg-active: var(--green-500);
999
- --_no-btn-bg-focus: var(--green-400);
1000
- }
1001
- @media (prefers-color-scheme: dark) {
1002
- body.theme-system .s-banner__success.s-banner__important {
1003
- --_no-bg: var(--green-400);
1004
- --_no-fc: var(--white);
1005
- }
1006
- }
1007
- body.theme-dark .s-banner__success.s-banner__important,
1008
- .theme-dark__forced .s-banner__success.s-banner__important,
1009
- body.theme-system .theme-dark__forced .s-banner__success.s-banner__important {
1010
- --_no-bg: var(--green-400);
1011
- --_no-fc: var(--white);
957
+ --_no-btn-bg-focus: var(--green-500);
958
+ --_no-btn-fc: var(--green-100);
1012
959
  }
1013
960
  body.theme-highcontrast .s-banner__success.s-banner__important {
1014
- --_no-bg: var(--green-400);
1015
- --_no-fc: var(--white);
961
+ --_no-bg: var(--green-500);
1016
962
  }
1017
963
  .s-banner__warning {
1018
- --_no-bc: var(--yellow-400);
1019
- --_no-bg: var(--yellow-200);
1020
- --_no-btn-bg-active: var(--yellow-400);
1021
- --_no-btn-bg-focus: var(--yellow-300);
964
+ --_no-bc: var(--yellow-300);
965
+ --_no-bg: var(--yellow-100);
966
+ --_no-btn-bg-active: var(--yellow-200);
967
+ --_no-btn-bg-focus: var(--yellow-200);
968
+ --_no-btn-fc: var(--yellow-600);
1022
969
  --_no-code-bg: var(--yellow-300);
1023
970
  }
1024
- body.theme-highcontrast .s-banner__warning:not(.s-banner__important) {
1025
- --_no-bg: var(--yellow-300);
1026
- }
1027
971
  .s-banner__warning.s-banner__important {
1028
972
  --_no-bc: var(--_no-bg);
1029
973
  --_no-bg: var(--yellow-400);
1030
- --_no-fc: var(--black-600);
1031
- --_no-btn-bg-active: var(--yellow-500);
1032
- --_no-btn-bg-focus: var(--yellow-400);
974
+ --_no-fc: var(--black);
975
+ --_no-btn-fc: var(--_no-fc);
976
+ --_no-btn-bg-active: var(--yellow-300);
977
+ --_no-btn-bg-focus: var(--yellow-300);
1033
978
  }
1034
979
  @media (prefers-color-scheme: dark) {
1035
980
  body.theme-system .s-banner__warning.s-banner__important {
1036
- --_no-bg: var(--yellow-500);
1037
- --_no-fc: var(--white);
981
+ --_no-fc: var(--yellow-200);
1038
982
  }
1039
983
  }
1040
984
  body.theme-dark .s-banner__warning.s-banner__important,
1041
985
  .theme-dark__forced .s-banner__warning.s-banner__important,
1042
986
  body.theme-system .theme-dark__forced .s-banner__warning.s-banner__important {
1043
- --_no-bg: var(--yellow-500);
1044
- --_no-fc: var(--white);
987
+ --_no-fc: var(--yellow-200);
1045
988
  }
1046
989
  body.theme-highcontrast .s-banner__warning.s-banner__important {
1047
990
  --_no-bg: var(--yellow-500);
1048
991
  --_no-fc: var(--white);
992
+ --_no-btn-bg-active: transparent;
993
+ --_no-btn-bg-focus: transparent;
1049
994
  }
1050
995
  .s-banner code {
1051
996
  background: var(--_no-code-bg, transparent);
1052
997
  }
1053
998
  .s-banner .s-banner--btn {
1054
- color: inherit;
999
+ color: var(--_no-btn-fc, inherit) !important;
1055
1000
  padding: var(--su8);
1056
1001
  }
1057
1002
  .s-banner .s-banner--btn:not(:focus) {
1058
1003
  box-shadow: none;
1059
1004
  }
1060
1005
  .s-banner .s-banner--btn:active {
1061
- background: var(--_no-btn-bg-active);
1006
+ background-color: var(--_no-btn-bg-active, inherit) !important;
1062
1007
  }
1063
1008
  .s-banner .s-banner--btn:focus,
1064
1009
  .s-banner .s-banner--btn:hover {
1065
- background: var(--_no-btn-bg-focus);
1010
+ background-color: var(--_no-btn-bg-focus, inherit) !important;
1066
1011
  }
1067
1012
  .s-banner[aria-hidden="true"] {
1068
1013
  --_no-x-offset: -1;
@@ -1089,6 +1034,7 @@ body.theme-highcontrast .s-banner__warning.s-banner__important {
1089
1034
  }
1090
1035
  a.s-block-link,
1091
1036
  .s-block-link {
1037
+ --_bl-bs-color: var(--theme-primary);
1092
1038
  --_bl-bg: transparent;
1093
1039
  --_bl-fc: var(--black-500);
1094
1040
  --_bl-fc-hover: var(--black-600);
@@ -1133,7 +1079,7 @@ a.s-block-linka.s-block-link__right.is-selected,
1133
1079
  a.s-block-link.s-block-link__right.is-selected,
1134
1080
  .s-block-linka.s-block-link__right.is-selected,
1135
1081
  .s-block-link.s-block-link__right.is-selected {
1136
- box-shadow: inset var(--_li-block-bs-offset-x, 3px) 0 0 var(--theme-primary);
1082
+ box-shadow: inset var(--_li-block-bs-offset-x, 3px) 0 0 var(--_bl-bs-color);
1137
1083
  }
1138
1084
  a.s-block-linka.s-block-link__left.is-selected:focus:not(:focus-visible),
1139
1085
  a.s-block-link.s-block-link__left.is-selected:focus:not(:focus-visible),
@@ -1161,7 +1107,7 @@ a.s-block-linka.s-block-link__right.is-selected:focus-visible,
1161
1107
  a.s-block-link.s-block-link__right.is-selected:focus-visible,
1162
1108
  .s-block-linka.s-block-link__right.is-selected:focus-visible,
1163
1109
  .s-block-link.s-block-link__right.is-selected:focus-visible {
1164
- box-shadow: inset var(--_li-block-bs-offset-x, 3px) 0 0 var(--theme-primary), 0 0 0 var(--su-static4) var(--focus-ring-muted);
1110
+ box-shadow: inset var(--_li-block-bs-offset-x, 3px) 0 0 var(--_bl-bs-color), 0 0 0 var(--su-static4) var(--focus-ring-muted);
1165
1111
  }
1166
1112
  a.s-block-linka.s-block-link__right.is-selected,
1167
1113
  a.s-block-link.s-block-link__right.is-selected,
@@ -1175,6 +1121,7 @@ a.s-block-link.s-block-link__danger,
1175
1121
  .s-block-link.s-block-link__danger {
1176
1122
  --_bl-fc: var(--red-400);
1177
1123
  --_bl-fc-hover: var(--red-500);
1124
+ --_bl-fc-visited: var(--red-500);
1178
1125
  }
1179
1126
  a.s-block-link:active,
1180
1127
  .s-block-link:active,
@@ -1188,7 +1135,7 @@ a.s-block-link:hover:visited,
1188
1135
  }
1189
1136
  a.s-block-link:visited,
1190
1137
  .s-block-link:visited {
1191
- color: var(--_bl-fc-focus);
1138
+ color: var(--_bl-fc-visited);
1192
1139
  }
1193
1140
  a.s-block-link:focus:not(:focus-visible),
1194
1141
  .s-block-link:focus:not(:focus-visible) {
@@ -1238,37 +1185,38 @@ body.theme-highcontrast .s-breadcrumbs .s-breadcrumbs--divider {
1238
1185
  --_bu-baw: var(--su-static1);
1239
1186
  --_bu-bc: transparent;
1240
1187
  --_bu-br: var(--br-md);
1241
- --_bu-fc: var(--theme-button-color);
1188
+ --_bu-fc: var(--theme-button-color, var(--theme-secondary-400));
1242
1189
  --_bu-focus-ring: 0 0 0 var(--su-static4) var(--focus-ring);
1243
1190
  --_bu-fs: var(--fs-body1);
1244
1191
  --_bu-p: 0.8em;
1245
1192
  --_bu-bc-selected: transparent;
1246
- --_bu-bg-active: var(--theme-button-active-background-color);
1247
- --_bu-bg-hover: var(--theme-button-hover-background-color);
1248
- --_bu-bg-selected: var(--theme-button-selected-background-color);
1249
- --_bu-fc-active: var(--theme-button-hover-color);
1250
- --_bu-fc-hover: var(--theme-button-hover-color);
1251
- --_bu-fc-selected: var(--theme-button-selected-color);
1193
+ --_bu-bg-active: var(--theme-button-active-background-color, var(--theme-secondary-300));
1194
+ --_bu-bg-hover: var(--theme-button-hover-background-color, var(--theme-secondary-200));
1195
+ --_bu-bg-selected: var(--theme-button-selected-background-color, var(--theme-secondary-300));
1196
+ --_bu-fc-active: var(--theme-button-hover-color, var(--theme-secondary-500));
1197
+ --_bu-fc-hover: var(--theme-button-hover-color, var(--theme-secondary-500));
1198
+ --_bu-fc-selected: var(--theme-button-selected-color, var(--theme-secondary-600));
1252
1199
  --_bu-filled-bc: transparent;
1253
1200
  --_bu-filled-bc-active: transparent;
1254
- --_bu-filled-bg-hover: var(--theme-button-filled-hover-background-color);
1255
1201
  --_bu-filled-bc-selected: transparent;
1256
- --_bu-filled-bg: var(--theme-button-filled-background-color);
1257
- --_bu-filled-bg-active: var(--theme-button-filled-active-background-color);
1258
- --_bu-filled-bg-selected: var(--theme-button-filled-selected-background-color);
1259
- --_bu-filled-fc: var(--theme-button-filled-color);
1260
- --_bu-filled-fc-active: var(--theme-button-filled-hover-color);
1261
- --_bu-filled-fc-hover: var(--theme-button-filled-hover-color);
1262
- --_bu-filled-fc-selected: var(--theme-button-filled-selected-color);
1263
- --_bu-outlined-bc: var(--theme-button-outlined-border-color);
1202
+ --_bu-filled-bg: var(--theme-button-primary-background-color, var(--theme-secondary-400));
1203
+ --_bu-filled-bg-active: var(--theme-button-primary-active-background-color, var(--theme-secondary-600));
1204
+ --_bu-filled-bg-hover: var(--theme-button-primary-hover-background-color, var(--theme-secondary-500));
1205
+ --_bu-filled-bg-selected: var(--theme-button-primary-selected-background-color, var(--theme-secondary-500));
1206
+ --_bu-filled-fc: var(--theme-button-primary-color, var(--white));
1207
+ --_bu-filled-fc-active: var(--theme-button-primary-hover-color, var(--white));
1208
+ --_bu-filled-fc-hover: var(--theme-button-primary-hover-color, var(--white));
1209
+ --_bu-filled-fc-selected: var(--theme-button-primary-selected-color, var(--white));
1210
+ --_bu-outlined-bc: var(--theme-button-outlined-border-color, var(--theme-secondary-400));
1264
1211
  --_bu-outlined-bg: var(--theme-button-outlined-background-color);
1265
- --_bu-outlined-bc-selected: var(--theme-button-outlined-selected-border-color);
1266
- --_bu-outlined-bg-selected: var(--theme-button-selected-background-color);
1267
- --_bu-outlined-fc-selected: var(--theme-button-selected-color);
1212
+ --_bu-outlined-bc-selected: var(--theme-button-outlined-selected-border-color, var(--theme-secondary-400));
1213
+ --_bu-outlined-bg-selected: var(--theme-button-selected-background-color, var(--theme-secondary-300));
1214
+ --_bu-outlined-fc-selected: var(--theme-button-selected-color, var(--theme-secondary-600));
1268
1215
  --_bu-badge-o: 0.5;
1269
1216
  --_bu-dropdown-bw: var(--su-static4);
1270
1217
  --_bu-number-fc: var(--white);
1271
- --_bu-number-fc-selected: var(--_bu-number-fc);
1218
+ --_bu-number-fc-filled: var(--theme-button-primary-number-color, var(--theme-secondary-600));
1219
+ --_bu-number-fc-selected: var(--white);
1272
1220
  background-color: var(--_bu-bg, inherit);
1273
1221
  border: var(--_bu-baw) solid var(--_bu-bc);
1274
1222
  border-radius: var(--_bu-br);
@@ -1289,14 +1237,12 @@ body.theme-highcontrast .s-breadcrumbs .s-breadcrumbs--divider {
1289
1237
  }
1290
1238
  body.theme-highcontrast .s-btn {
1291
1239
  --_bu-bc: currentColor;
1292
- --_bu-filled-bc: var(--_bu-bc);
1293
1240
  --_bu-outlined-bc: var(--_bu-bc);
1294
1241
  --_bu-bc-selected: var(--_bu-bc);
1242
+ --_bu-fc-selected: var(--white);
1243
+ --_bu-outlined-fc-selected: var(--white);
1295
1244
  --_bu-badge-o: 0.8;
1296
- }
1297
- body.theme-highcontrast .s-btn:not(.s-btn__primary):not(.s-btn__muted):not(.s-btn__danger):not(.is-selected):not(.s-btn__link):not(.s-btn__unset) {
1298
- --_bu-bg-hover: var(--theme-secondary-300);
1299
- --_bu-filled-bg-hover: var(--theme-secondary-400);
1245
+ --_bu-number-fc-selected: var(--theme-button-primary-number-color, var(--theme-secondary-600));
1300
1246
  }
1301
1247
  fieldset[disabled] .s-btn,
1302
1248
  .s-btn[disabled],
@@ -1354,6 +1300,9 @@ body.theme-highcontrast .s-btn-group.s-btn-group--radio .s-btn--radio:checked +
1354
1300
  background-color: var(--_bu-filled-bg);
1355
1301
  color: var(--_bu-filled-fc);
1356
1302
  }
1303
+ .s-btn.s-btn__filled .s-btn--number {
1304
+ color: var(--_bu-number-fc-filled);
1305
+ }
1357
1306
  .s-btn.s-btn__outlined {
1358
1307
  border-color: var(--_bu-outlined-bc);
1359
1308
  background-color: var(--_bu-outlined-bg, inherit);
@@ -1369,9 +1318,9 @@ body.theme-highcontrast .s-btn-group.s-btn-group--radio .s-btn--radio:checked +
1369
1318
  --_bu-br: 0;
1370
1319
  --_bu-focus-ring: none;
1371
1320
  --_bu-p: 0;
1372
- --_li-fc: var(--theme-link-color);
1373
- --_li-fc-hover: var(--theme-link-color-hover);
1374
- --_li-fc-visited: var(--theme-link-color-visited);
1321
+ --_li-fc: var(--theme-link-color, var(--theme-secondary-400));
1322
+ --_li-fc-hover: var(--theme-link-color-hover, var(--theme-secondary-500));
1323
+ --_li-fc-visited: var(--theme-link-color-visited, var(--theme-secondary-600));
1375
1324
  color: var(--_li-fc);
1376
1325
  cursor: pointer;
1377
1326
  text-decoration: none;
@@ -1435,19 +1384,19 @@ body.theme-highcontrast .s-btn.s-btn__link {
1435
1384
  text-decoration: underline !important;
1436
1385
  }
1437
1386
  .s-btn.s-btn__link.s-link__visited {
1438
- --_li-fc: var(--theme-link-color-visited);
1439
- --_li-fc-hover: var(--theme-link-color-hover);
1440
- --_li-fc-visited: var(--theme-link-color-visited);
1387
+ --_li-fc: var(--theme-link-color-visited, var(--theme-secondary-500));
1388
+ --_li-fc-hover: var(--theme-link-color-hover, var(--theme-secondary-400));
1389
+ --_li-fc-visited: var(--theme-link-color-visited, var(--theme-secondary-500));
1441
1390
  }
1442
1391
  .s-btn.s-btn__link.s-link__danger {
1443
1392
  --_li-fc: var(--red-400);
1444
- --_li-fc-hover: var(--red-400);
1445
- --_li-fc-visited: var(--red-500);
1393
+ --_li-fc-hover: var(--red-500);
1394
+ --_li-fc-visited: var(--red-600);
1446
1395
  }
1447
1396
  .s-btn.s-btn__link.s-link__grayscale {
1448
- --_li-fc: var(--black-600);
1449
- --_li-fc-hover: var(--black-600);
1450
- --_li-fc-visited: var(--black-500);
1397
+ --_li-fc: var(--black-500);
1398
+ --_li-fc-hover: var(--black-400);
1399
+ --_li-fc-visited: var(--black-600);
1451
1400
  }
1452
1401
  .s-btn.s-btn__link.s-link__inherit {
1453
1402
  --_li-fc: inherit !important;
@@ -1457,7 +1406,7 @@ body.theme-highcontrast .s-btn.s-btn__link {
1457
1406
  .s-btn.s-btn__link.s-link__muted {
1458
1407
  --_li-fc: var(--black-400);
1459
1408
  --_li-fc-hover: var(--black-500);
1460
- --_li-fc-visited: var(--black-500);
1409
+ --_li-fc-visited: var(--black-600);
1461
1410
  }
1462
1411
  fieldset[disabled] .s-btn.s-btn__link {
1463
1412
  box-shadow: none !important;
@@ -1558,37 +1507,8 @@ body.theme-highcontrast .s-btn.s-btn__muted {
1558
1507
  --_bu-outlined-bc-selected: var(--red-500);
1559
1508
  --_bu-outlined-bg-selected: var(--_bu-bg-selected);
1560
1509
  --_bu-outlined-fc-selected: var(--_bu-fc-selected);
1561
- }
1562
- .s-btn.s-btn__danger.s-btn__filled {
1563
- --_bu-number-fc: var(--black);
1564
- }
1565
- @media (prefers-color-scheme: dark) {
1566
- body.theme-system .s-btn.s-btn__danger.s-btn__filled {
1567
- --_bu-filled-fc: var(--black);
1568
- --_bu-filled-fc-selected: var(--white);
1569
- --_bu-number-fc: var(--white);
1570
- --_bu-number-fc-selected: var(--black);
1571
- }
1572
- }
1573
- body.theme-dark .s-btn.s-btn__danger.s-btn__filled,
1574
- .theme-dark__forced .s-btn.s-btn__danger.s-btn__filled,
1575
- body.theme-system .theme-dark__forced .s-btn.s-btn__danger.s-btn__filled {
1576
- --_bu-filled-fc: var(--black);
1577
- --_bu-filled-fc-selected: var(--white);
1578
1510
  --_bu-number-fc: var(--white);
1579
- --_bu-number-fc-selected: var(--black);
1580
- }
1581
- @media (prefers-color-scheme: dark) {
1582
- body.theme-highcontrast.theme-system .s-btn.s-btn__danger.s-btn__filled {
1583
- --_bu-filled-fc: var(--white);
1584
- --_bu-number-fc: var(--black);
1585
- --_bu-number-fc-selected: var(--black);
1586
- }
1587
- }
1588
- body.theme-highcontrast.theme-dark .s-btn.s-btn__danger.s-btn__filled {
1589
- --_bu-filled-fc: var(--white);
1590
- --_bu-number-fc: var(--black);
1591
- --_bu-number-fc-selected: var(--black);
1511
+ --_bu-number-fc-filled: var(--black);
1592
1512
  }
1593
1513
  .s-btn.s-btn__muted {
1594
1514
  --_bu-bg-active: var(--black-150);
@@ -1613,6 +1533,7 @@ body.theme-highcontrast.theme-dark .s-btn.s-btn__danger.s-btn__filled {
1613
1533
  --_bu-outlined-bc-selected: var(--black-300);
1614
1534
  --_bu-outlined-bg-selected: var(--_bu-bg-selected);
1615
1535
  --_bu-outlined-fc-selected: var(--_bu-fc-selected);
1536
+ --_bu-number-fc-selected: var(--white);
1616
1537
  }
1617
1538
  body.theme-highcontrast .s-btn.s-btn__muted {
1618
1539
  --_bu-bg-hover: var(--black-225);
@@ -1622,66 +1543,26 @@ body.theme-highcontrast .s-btn.s-btn__muted {
1622
1543
  --_bu-filled-bg-selected: var(--black-500);
1623
1544
  --_bu-filled-fc: var(--white);
1624
1545
  --_bu-filled-fc-selected: var(--_bu-filled-fc);
1625
- }
1626
- body.theme-highcontrast .s-btn.s-btn__muted.s-btn__filled {
1627
- --_bu-number-fc: var(--black);
1546
+ --_bu-fc-selected: var(--black);
1547
+ --_bu-number-fc: var(--white);
1548
+ --_bu-number-fc-filled: var(--black);
1549
+ --_bu-number-fc-selected: var(--white);
1628
1550
  }
1629
1551
  .s-btn.s-btn__primary {
1630
- --_bu-bg: var(--theme-button-primary-background-color);
1631
- --_bu-bg-active: var(--theme-button-primary-active-background-color);
1632
- --_bu-bg-hover: var(--theme-button-primary-hover-background-color);
1633
- --_bu-bg-selected: var(--theme-button-primary-selected-background-color);
1634
- --_bu-fc: var(--theme-button-primary-color);
1635
- --_bu-fc-active: var(--theme-button-primary-hover-color);
1636
- --_bu-fc-hover: var(--theme-button-primary-hover-color);
1637
- --_bu-fc-selected: var(--theme-button-primary-selected-color);
1638
- --_bu-number-fc: var(--theme-button-primary-number-color);
1639
- }
1640
- @media (prefers-color-scheme: dark) {
1641
- body.theme-system .s-btn.s-btn__primary {
1642
- --_bu-bg: var(--theme-secondary-400);
1643
- --_bu-bg-active: var(--theme-secondary-400);
1644
- --_bu-bg-hover: var(--theme-secondary-400);
1645
- --_bu-fc: var(--black);
1646
- --_bu-fc-active: var(--_bu-fc);
1647
- --_bu-fc-hover: var(--_bu-fc);
1648
- --_bu-fc-selected: var(--white);
1649
- --_bu-number-fc: var(--white);
1650
- --_bu-number-fc-selected: var(--black);
1651
- }
1652
- }
1653
- body.theme-dark .s-btn.s-btn__primary,
1654
- .theme-dark__forced .s-btn.s-btn__primary,
1655
- body.theme-system .theme-dark__forced .s-btn.s-btn__primary {
1656
- --_bu-bg: var(--theme-secondary-400);
1657
- --_bu-bg-active: var(--theme-secondary-400);
1658
- --_bu-bg-hover: var(--theme-secondary-400);
1659
- --_bu-fc: var(--black);
1660
- --_bu-fc-active: var(--_bu-fc);
1661
- --_bu-fc-hover: var(--_bu-fc);
1662
- --_bu-fc-selected: var(--white);
1663
- --_bu-number-fc: var(--white);
1664
- --_bu-number-fc-selected: var(--black);
1552
+ --_bu-bg: var(--theme-button-primary-background-color, var(--theme-secondary-400));
1553
+ --_bu-bg-active: var(--theme-button-primary-active-background-color, var(--theme-secondary-600));
1554
+ --_bu-bg-hover: var(--theme-button-primary-hover-background-color, var(--theme-secondary-500));
1555
+ --_bu-bg-selected: var(--theme-button-primary-selected-background-color, var(--theme-secondary-500));
1556
+ --_bu-fc: var(--theme-button-primary-color, var(--white));
1557
+ --_bu-fc-active: var(--theme-button-primary-hover-color, var(--white));
1558
+ --_bu-fc-hover: var(--theme-button-primary-hover-color, var(--white));
1559
+ --_bu-fc-selected: var(--theme-button-primary-selected-color, var(--white));
1560
+ --_bu-number-fc: var(--theme-button-primary-number-color, var(--theme-secondary-600));
1561
+ --_bu-number-fc-selected: var(--theme-button-primary-number-color, var(--theme-secondary-600));
1665
1562
  }
1666
1563
  body.theme-highcontrast .s-btn.s-btn__primary {
1667
1564
  --_bu-bc: transparent;
1668
1565
  }
1669
- @media (prefers-color-scheme: dark) {
1670
- body.theme-highcontrast.theme-system .s-btn.s-btn__primary {
1671
- --_bu-bg: var(--theme-secondary-400);
1672
- --_bu-bg-active: var(--theme-secondary-500);
1673
- --_bu-bg-hover: var(--theme-secondary-400);
1674
- --_bu-fc: var(--white);
1675
- --_bu-number-fc: var(--black);
1676
- }
1677
- }
1678
- body.theme-highcontrast.theme-dark .s-btn.s-btn__primary {
1679
- --_bu-bg: var(--theme-secondary-400);
1680
- --_bu-bg-active: var(--theme-secondary-500);
1681
- --_bu-bg-hover: var(--theme-secondary-400);
1682
- --_bu-fc: var(--white);
1683
- --_bu-number-fc: var(--black);
1684
- }
1685
1566
  body.theme-highcontrast .s-btn.s-btn__facebook,
1686
1567
  body.theme-highcontrast .s-btn.s-btn__github {
1687
1568
  --_bu-bc: transparent;
@@ -1846,6 +1727,19 @@ a.s-card {
1846
1727
  .s-card.s-card__muted > * {
1847
1728
  opacity: 0.65;
1848
1729
  }
1730
+ @media (prefers-color-scheme: dark) {
1731
+ body.theme-system .s-card.s-card__muted > * {
1732
+ opacity: 0.7;
1733
+ }
1734
+ }
1735
+ body.theme-dark .s-card.s-card__muted > *,
1736
+ .theme-dark__forced .s-card.s-card__muted > *,
1737
+ body.theme-system .theme-dark__forced .s-card.s-card__muted > * {
1738
+ opacity: 0.7;
1739
+ }
1740
+ body.theme-highcontrast .s-card.s-card__muted > * {
1741
+ opacity: 0.75;
1742
+ }
1849
1743
  .s-card > :last-child {
1850
1744
  margin-bottom: 0;
1851
1745
  }
@@ -1998,7 +1892,7 @@ body.theme-system .theme-dark__forced .s-radio:checked {
1998
1892
  }
1999
1893
  .has-warning .s-checkbox,
2000
1894
  .has-warning .s-radio:not(:checked) {
2001
- --_ch-bc: var(--yellow-600);
1895
+ --_ch-bc: var(--yellow-500);
2002
1896
  --_ch-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-warning);
2003
1897
  }
2004
1898
  .s-check-control {
@@ -2181,7 +2075,7 @@ pre.s-code-block::-webkit-scrollbar-corner {
2181
2075
  border-color: transparent;
2182
2076
  }
2183
2077
  .s-description {
2184
- color: var(--fc-medium);
2078
+ color: var(--fc-light);
2185
2079
  font-size: var(--fs-caption);
2186
2080
  padding: 0 var(--su2);
2187
2081
  }
@@ -2268,7 +2162,7 @@ pre.s-code-block::-webkit-scrollbar-corner {
2268
2162
  }
2269
2163
  .s-input,
2270
2164
  .s-textarea {
2271
- --_in-bc: var(--bc-dark);
2165
+ --_in-bc: var(--bc-darker);
2272
2166
  --_in-bc-focus: var(--theme-secondary-400);
2273
2167
  --_in-bg: var(--white);
2274
2168
  --_in-br: var(--br-md);
@@ -2371,7 +2265,7 @@ body.theme-highcontrast .has-success .s-textarea {
2371
2265
  }
2372
2266
  .has-warning .s-input,
2373
2267
  .has-warning .s-textarea {
2374
- --_in-bc: var(--yellow-600);
2268
+ --_in-bc: var(--yellow-500);
2375
2269
  --_in-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-warning);
2376
2270
  }
2377
2271
  body.theme-highcontrast .has-warning .s-input,
@@ -2562,7 +2456,7 @@ body.theme-highcontrast .s-input:focus-within {
2562
2456
  --_ii-fc: var(--green-400);
2563
2457
  }
2564
2458
  .has-warning .s-input-icon {
2565
- --_ii-fc: var(--yellow-500);
2459
+ --_ii-fc: var(--yellow-400);
2566
2460
  }
2567
2461
  .is-disabled .s-input-icon {
2568
2462
  --_ii-fc: var(--black-400);
@@ -2601,16 +2495,17 @@ fieldset[disabled] .s-input-message {
2601
2495
  .has-error .s-input-message {
2602
2496
  --_im-fc: var(--red-400);
2603
2497
  --_im-a-fc: var(--red-600);
2604
- --_im-a-fc-hover: var(--red-600);
2498
+ --_im-a-fc-hover: var(--red-500);
2605
2499
  }
2606
2500
  .has-success .s-input-message {
2607
2501
  --_im-fc: var(--green-400);
2608
2502
  --_im-a-fc: var(--green-600);
2609
- --_im-a-fc-hover: var(--green-600);
2503
+ --_im-a-fc-hover: var(--green-500);
2610
2504
  }
2611
2505
  .has-warning .s-input-message {
2612
- --_im-fc: var(--yellow-600);
2506
+ --_im-fc: var(--yellow-500);
2613
2507
  --_im-a-fc: var(--yellow-600);
2508
+ --_im-a-fc-hover: var(--yellow-500);
2614
2509
  }
2615
2510
  .s-input-message a {
2616
2511
  color: var(--_im-a-fc);
@@ -2621,7 +2516,7 @@ fieldset[disabled] .s-input-message {
2621
2516
  .s-label {
2622
2517
  --_la-fs: var(--fs-body2);
2623
2518
  font-size: var(--_la-fs);
2624
- color: var(--fc-dark);
2519
+ color: var(--fc-medium);
2625
2520
  font-family: inherit;
2626
2521
  font-weight: 600;
2627
2522
  padding: 0 var(--su2);
@@ -2673,40 +2568,16 @@ body.theme-highcontrast .s-label--status {
2673
2568
  --_la-status-b: var(--su-static1) solid currentColor;
2674
2569
  }
2675
2570
  .s-label--status__beta {
2676
- --_la-status-bg: var(--blue-300);
2571
+ --_la-status-bg: var(--blue-200);
2677
2572
  --_la-status-fc: var(--blue-500);
2678
2573
  }
2679
2574
  .s-label--status__new {
2680
- --_la-status-bg: var(--green-300);
2681
- --_la-status-fc: var(--green-500);
2682
- }
2683
- @media (prefers-color-scheme: dark) {
2684
- body.theme-system .s-label--status__new {
2685
- --_la-status-bg: var(--green-200);
2686
- --_la-status-fc: var(--green-600);
2687
- }
2688
- }
2689
- body.theme-dark .s-label--status__new,
2690
- .theme-dark__forced .s-label--status__new,
2691
- body.theme-system .theme-dark__forced .s-label--status__new {
2692
2575
  --_la-status-bg: var(--green-200);
2693
- --_la-status-fc: var(--green-600);
2576
+ --_la-status-fc: var(--green-500);
2694
2577
  }
2695
2578
  .s-label--status__required {
2696
- --_la-status-bg: var(--red-300);
2697
- --_la-status-fc: var(--red-500);
2698
- }
2699
- @media (prefers-color-scheme: dark) {
2700
- body.theme-system .s-label--status__required {
2701
- --_la-status-bg: var(--red-200);
2702
- --_la-status-fc: var(--red-600);
2703
- }
2704
- }
2705
- body.theme-dark .s-label--status__required,
2706
- .theme-dark__forced .s-label--status__required,
2707
- body.theme-system .theme-dark__forced .s-label--status__required {
2708
2579
  --_la-status-bg: var(--red-200);
2709
- --_la-status-fc: var(--red-600);
2580
+ --_la-status-fc: var(--red-500);
2710
2581
  }
2711
2582
  .s-label .s-description,
2712
2583
  .s-label .s-input-message {
@@ -2717,9 +2588,9 @@ body.theme-system .theme-dark__forced .s-label--status__required {
2717
2588
  }
2718
2589
  a,
2719
2590
  .s-link {
2720
- --_li-fc: var(--theme-link-color);
2721
- --_li-fc-hover: var(--theme-link-color-hover);
2722
- --_li-fc-visited: var(--theme-link-color-visited);
2591
+ --_li-fc: var(--theme-link-color, var(--theme-secondary-400));
2592
+ --_li-fc-hover: var(--theme-link-color-hover, var(--theme-secondary-500));
2593
+ --_li-fc-visited: var(--theme-link-color-visited, var(--theme-secondary-600));
2723
2594
  color: var(--_li-fc);
2724
2595
  cursor: pointer;
2725
2596
  text-decoration: none;
@@ -2788,21 +2659,21 @@ a.s-link__underlined,
2788
2659
  }
2789
2660
  a.s-link__visited,
2790
2661
  .s-link.s-link__visited {
2791
- --_li-fc: var(--theme-link-color-visited);
2792
- --_li-fc-hover: var(--theme-link-color-hover);
2793
- --_li-fc-visited: var(--theme-link-color-visited);
2662
+ --_li-fc: var(--theme-link-color-visited, var(--theme-secondary-500));
2663
+ --_li-fc-hover: var(--theme-link-color-hover, var(--theme-secondary-400));
2664
+ --_li-fc-visited: var(--theme-link-color-visited, var(--theme-secondary-500));
2794
2665
  }
2795
2666
  a.s-link__danger,
2796
2667
  .s-link.s-link__danger {
2797
2668
  --_li-fc: var(--red-400);
2798
- --_li-fc-hover: var(--red-400);
2799
- --_li-fc-visited: var(--red-500);
2669
+ --_li-fc-hover: var(--red-500);
2670
+ --_li-fc-visited: var(--red-600);
2800
2671
  }
2801
2672
  a.s-link__grayscale,
2802
2673
  .s-link.s-link__grayscale {
2803
- --_li-fc: var(--black-600);
2804
- --_li-fc-hover: var(--black-600);
2805
- --_li-fc-visited: var(--black-500);
2674
+ --_li-fc: var(--black-500);
2675
+ --_li-fc-hover: var(--black-400);
2676
+ --_li-fc-visited: var(--black-600);
2806
2677
  }
2807
2678
  a.s-link__inherit,
2808
2679
  .s-link.s-link__inherit {
@@ -2814,7 +2685,7 @@ a.s-link__muted,
2814
2685
  .s-link.s-link__muted {
2815
2686
  --_li-fc: var(--black-400);
2816
2687
  --_li-fc-hover: var(--black-500);
2817
- --_li-fc-visited: var(--black-500);
2688
+ --_li-fc-visited: var(--black-600);
2818
2689
  }
2819
2690
  fieldset[disabled] a,
2820
2691
  fieldset[disabled] .s-link {
@@ -2841,8 +2712,11 @@ button.s-link:focus {
2841
2712
  outline: revert;
2842
2713
  }
2843
2714
  .s-link-preview {
2715
+ --_lp-details-fc: var(--black-400);
2844
2716
  --_lp-details-mt: var(--su2);
2717
+ --_lp-footer-bg: var(--black-100);
2845
2718
  --_lp-footer-fd: unset;
2719
+ --_lp-header-bg: var(--black-100);
2846
2720
  --_lp-misc-pl: var(--su4);
2847
2721
  --_lp-misc-pt: unset;
2848
2722
  border: var(--su-static1) solid var(--bc-medium);
@@ -2858,9 +2732,14 @@ button.s-link:focus {
2858
2732
  --_lp-misc-pt: var(--su2);
2859
2733
  }
2860
2734
  }
2735
+ body.theme-highcontrast .s-link-preview {
2736
+ --_lp-details-fc: var(--black-600);
2737
+ --_lp-footer-bg: var(--black-050);
2738
+ --_lp-header-bg: var(--black-050);
2739
+ }
2861
2740
  .s-link-preview .s-link-preview--details a,
2862
2741
  .s-link-preview .s-link-preview--footer a {
2863
- color: var(--black-400);
2742
+ color: var(--black-600);
2864
2743
  cursor: pointer;
2865
2744
  text-decoration: none;
2866
2745
  }
@@ -2889,13 +2768,13 @@ button.s-link:focus {
2889
2768
  max-height: 400px;
2890
2769
  }
2891
2770
  .s-link-preview .s-link-preview--details {
2771
+ color: var(--_lp-details-fc);
2892
2772
  margin-top: var(--_lp-details-mt);
2893
- color: var(--black-400);
2894
2773
  font-size: var(--fs-caption);
2895
2774
  }
2896
2775
  .s-link-preview .s-link-preview--footer {
2776
+ background: var(--_lp-footer-bg);
2897
2777
  flex-direction: var(--_lp-footer-fd);
2898
- background: var(--black-100);
2899
2778
  border-bottom-left-radius: var(--br-sm);
2900
2779
  border-bottom-right-radius: var(--br-sm);
2901
2780
  border-top: var(--su-static1) solid var(--bc-medium);
@@ -2905,7 +2784,7 @@ button.s-link:focus {
2905
2784
  padding: var(--su12);
2906
2785
  }
2907
2786
  .s-link-preview .s-link-preview--header {
2908
- background: var(--black-100);
2787
+ background: var(--_lp-header-bg);
2909
2788
  border-bottom: var(--su-static1) solid var(--bc-medium);
2910
2789
  border-top-left-radius: var(--br-sm);
2911
2790
  border-top-right-radius: var(--br-sm);
@@ -2927,7 +2806,7 @@ button.s-link:focus {
2927
2806
  font-weight: bold;
2928
2807
  }
2929
2808
  .s-link-preview a.s-link-preview--title {
2930
- color: var(--theme-link-color);
2809
+ color: var(--theme-link-color, var(--theme-secondary-400));
2931
2810
  cursor: pointer;
2932
2811
  text-decoration: none;
2933
2812
  }
@@ -2935,7 +2814,7 @@ button.s-link:focus {
2935
2814
  .s-link-preview a.s-link-preview--title:hover,
2936
2815
  .s-link-preview a.s-link-preview--title:active.s-link__visited,
2937
2816
  .s-link-preview a.s-link-preview--title:hover.s-link__visited {
2938
- color: var(--theme-link-color-hover);
2817
+ color: var(--theme-link-color-hover, var(--theme-secondary-500));
2939
2818
  }
2940
2819
  .s-link-preview a.s-link-preview--title:active,
2941
2820
  .s-link-preview a.s-link-preview--title:hover,
@@ -2952,7 +2831,7 @@ body.theme-highcontrast .s-link-preview a.s-link-preview--title.s-link__visited:
2952
2831
  text-decoration: underline;
2953
2832
  }
2954
2833
  .s-link-preview a.s-link-preview--title.s-link__visited:visited {
2955
- color: var(--theme-link-color);
2834
+ color: var(--theme-link-color, var(--theme-secondary-600));
2956
2835
  }
2957
2836
  .s-link-preview .s-link-preview--url {
2958
2837
  max-width: 100%;
@@ -3257,11 +3136,12 @@ body.theme-highcontrast .s-navigation .s-navigation--item.is-selected {
3257
3136
  --_na-title-mt: 0;
3258
3137
  }
3259
3138
  .s-notice {
3260
- --_no-bc: var(--bc-medium);
3261
- --_no-bg: var(--black-150);
3262
- --_no-fc: var(--fc-medium);
3139
+ --_no-bc: var(--black-225);
3140
+ --_no-bg: var(--black-100);
3141
+ --_no-fc: var(--black-500);
3263
3142
  --_no-btn-bg-focus: var(--black-225);
3264
3143
  --_no-btn-bg-active: var(--black-250);
3144
+ --_no-btn-fc: var(--_no-fc);
3265
3145
  background: var(--_no-bg);
3266
3146
  border-color: var(--_no-bc);
3267
3147
  color: var(--_no-fc);
@@ -3298,174 +3178,111 @@ body.theme-highcontrast.theme-dark .s-notice:not(.s-notice__important) {
3298
3178
  --_no-fc: var(--white);
3299
3179
  --_no-btn-bg-focus: var(--black-600);
3300
3180
  --_no-btn-bg-active: var(--black-600);
3301
- }
3302
- body.theme-highcontrast .s-notice__important {
3303
- --_no-bc: var(--_no-bg);
3181
+ --_no-btn-fc: var(--_no-fc);
3182
+ --_no-code-bg: var(--black-300);
3304
3183
  }
3305
3184
  .s-notice__danger {
3306
3185
  --_no-bc: var(--red-300);
3307
- --_no-bg: var(--red-200);
3308
- --_no-btn-bg-active: var(--red-300);
3309
- --_no-btn-bg-focus: var(--red-300);
3310
- }
3311
- body.theme-highcontrast .s-notice__danger:not(.s-notice__important) {
3312
- --_no-bg: var(--red-300);
3186
+ --_no-bg: var(--red-100);
3187
+ --_no-btn-bg-active: var(--red-200);
3188
+ --_no-btn-bg-focus: var(--red-200);
3189
+ --_no-btn-fc: var(--red-500);
3190
+ --_no-code-bg: var(--red-300);
3313
3191
  }
3314
3192
  .s-notice__danger.s-notice__important {
3315
3193
  --_no-bc: var(--_no-bg);
3316
3194
  --_no-bg: var(--red-400);
3317
3195
  --_no-btn-bg-active: var(--red-500);
3318
3196
  --_no-btn-bg-focus: var(--red-500);
3197
+ --_no-btn-fc: var(--red-100);
3319
3198
  }
3320
- @media (prefers-color-scheme: dark) {
3321
- body.theme-system .s-notice__danger.s-notice__important {
3322
- --_no-bg: var(--red-400);
3323
- --_no-fc: var(--black-600);
3324
- }
3325
- }
3326
- body.theme-dark .s-notice__danger.s-notice__important,
3327
- .theme-dark__forced .s-notice__danger.s-notice__important,
3328
- body.theme-system .theme-dark__forced .s-notice__danger.s-notice__important {
3329
- --_no-bg: var(--red-400);
3330
- --_no-fc: var(--black-600);
3331
- }
3332
- @media (prefers-color-scheme: dark) {
3333
- body.theme-highcontrast.theme-system .s-notice__danger.s-notice__important {
3334
- --_no-bg: var(--red-400);
3335
- --_no-fc: var(--white);
3336
- }
3337
- }
3338
- body.theme-highcontrast.theme-dark .s-notice__danger.s-notice__important {
3339
- --_no-bg: var(--red-400);
3340
- --_no-fc: var(--white);
3199
+ body.theme-highcontrast .s-notice__danger.s-notice__important {
3200
+ --_no-bg: var(--red-500);
3341
3201
  }
3342
3202
  .s-notice__info {
3343
3203
  --_no-bc: var(--theme-secondary-300);
3344
- --_no-bg: var(--theme-secondary-200);
3345
- --_no-btn-bg-focus: var(--theme-secondary-300);
3346
- --_no-btn-bg-active: var(--theme-secondary-300);
3204
+ --_no-bg: var(--theme-secondary-100);
3205
+ --_no-btn-bg-focus: var(--theme-secondary-200);
3206
+ --_no-btn-bg-active: var(--theme-secondary-200);
3207
+ --_no-btn-fc: var(--theme-secondary-500);
3347
3208
  --_no-code-bg: var(--theme-secondary-300);
3348
3209
  }
3349
- body.theme-highcontrast .s-notice__info:not(.s-notice__important) {
3350
- --_no-bg: var(--theme-secondary-300);
3351
- }
3352
- @media (prefers-color-scheme: dark) {
3353
- body.theme-highcontrast.theme-system .s-notice__info:not(.s-notice__important) {
3354
- --_no-bg: var(--theme-secondary-300);
3355
- }
3356
- }
3357
- body.theme-highcontrast.theme-dark .s-notice__info:not(.s-notice__important) {
3358
- --_no-bg: var(--theme-secondary-300);
3359
- }
3360
3210
  .s-notice__info.s-notice__important {
3361
3211
  --_no-bc: var(--_no-bg);
3362
3212
  --_no-bg: var(--theme-secondary-400);
3363
3213
  --_no-btn-bg-active: var(--theme-secondary-500);
3364
- --_no-btn-bg-focus: var(--theme-secondary-400);
3214
+ --_no-btn-bg-focus: var(--theme-secondary-500);
3215
+ --_no-btn-fc: var(--theme-secondary-100);
3365
3216
  }
3366
- @media (prefers-color-scheme: dark) {
3367
- body.theme-system .s-notice__info.s-notice__important {
3368
- --_no-bg: var(--theme-secondary-400);
3369
- --_no-fc: var(--black-600);
3370
- }
3371
- }
3372
- body.theme-dark .s-notice__info.s-notice__important,
3373
- .theme-dark__forced .s-notice__info.s-notice__important,
3374
- body.theme-system .theme-dark__forced .s-notice__info.s-notice__important {
3375
- --_no-bg: var(--theme-secondary-400);
3376
- --_no-fc: var(--black-600);
3377
- }
3378
- @media (prefers-color-scheme: dark) {
3379
- body.theme-highcontrast.theme-system .s-notice__info.s-notice__important {
3380
- --_no-bg: var(--theme-secondary-400);
3381
- --_no-fc: var(--white);
3382
- }
3383
- }
3384
- body.theme-highcontrast.theme-dark .s-notice__info.s-notice__important {
3385
- --_no-bg: var(--theme-secondary-400);
3386
- --_no-fc: var(--white);
3217
+ body.theme-highcontrast .s-notice__info.s-notice__important {
3218
+ --_no-bg: var(--theme-secondary-500);
3387
3219
  }
3388
3220
  .s-notice__success {
3389
3221
  --_no-bc: var(--green-300);
3390
- --_no-bg: var(--green-200);
3391
- --_no-btn-bg-active: var(--green-300);
3392
- --_no-btn-bg-focus: var(--green-300);
3393
- }
3394
- body.theme-highcontrast .s-notice__success:not(.s-notice__important) {
3395
- --_no-bg: var(--green-300);
3222
+ --_no-bg: var(--green-100);
3223
+ --_no-btn-bg-active: var(--green-200);
3224
+ --_no-btn-bg-focus: var(--green-200);
3225
+ --_no-btn-fc: var(--green-500);
3226
+ --_no-code-bg: var(--green-300);
3396
3227
  }
3397
3228
  .s-notice__success.s-notice__important {
3398
3229
  --_no-bc: var(--_no-bg);
3399
3230
  --_no-bg: var(--green-400);
3400
- --_no-fc: var(--black-600);
3401
3231
  --_no-btn-bg-active: var(--green-500);
3402
- --_no-btn-bg-focus: var(--green-400);
3403
- }
3404
- @media (prefers-color-scheme: dark) {
3405
- body.theme-system .s-notice__success.s-notice__important {
3406
- --_no-bg: var(--green-400);
3407
- --_no-fc: var(--white);
3408
- }
3409
- }
3410
- body.theme-dark .s-notice__success.s-notice__important,
3411
- .theme-dark__forced .s-notice__success.s-notice__important,
3412
- body.theme-system .theme-dark__forced .s-notice__success.s-notice__important {
3413
- --_no-bg: var(--green-400);
3414
- --_no-fc: var(--white);
3232
+ --_no-btn-bg-focus: var(--green-500);
3233
+ --_no-btn-fc: var(--green-100);
3415
3234
  }
3416
3235
  body.theme-highcontrast .s-notice__success.s-notice__important {
3417
- --_no-bg: var(--green-400);
3418
- --_no-fc: var(--white);
3236
+ --_no-bg: var(--green-500);
3419
3237
  }
3420
3238
  .s-notice__warning {
3421
- --_no-bc: var(--yellow-400);
3422
- --_no-bg: var(--yellow-200);
3423
- --_no-btn-bg-active: var(--yellow-400);
3424
- --_no-btn-bg-focus: var(--yellow-300);
3239
+ --_no-bc: var(--yellow-300);
3240
+ --_no-bg: var(--yellow-100);
3241
+ --_no-btn-bg-active: var(--yellow-200);
3242
+ --_no-btn-bg-focus: var(--yellow-200);
3243
+ --_no-btn-fc: var(--yellow-600);
3425
3244
  --_no-code-bg: var(--yellow-300);
3426
3245
  }
3427
- body.theme-highcontrast .s-notice__warning:not(.s-notice__important) {
3428
- --_no-bg: var(--yellow-300);
3429
- }
3430
3246
  .s-notice__warning.s-notice__important {
3431
3247
  --_no-bc: var(--_no-bg);
3432
3248
  --_no-bg: var(--yellow-400);
3433
- --_no-fc: var(--black-600);
3434
- --_no-btn-bg-active: var(--yellow-500);
3435
- --_no-btn-bg-focus: var(--yellow-400);
3249
+ --_no-fc: var(--black);
3250
+ --_no-btn-fc: var(--_no-fc);
3251
+ --_no-btn-bg-active: var(--yellow-300);
3252
+ --_no-btn-bg-focus: var(--yellow-300);
3436
3253
  }
3437
3254
  @media (prefers-color-scheme: dark) {
3438
3255
  body.theme-system .s-notice__warning.s-notice__important {
3439
- --_no-bg: var(--yellow-500);
3440
- --_no-fc: var(--white);
3256
+ --_no-fc: var(--yellow-200);
3441
3257
  }
3442
3258
  }
3443
3259
  body.theme-dark .s-notice__warning.s-notice__important,
3444
3260
  .theme-dark__forced .s-notice__warning.s-notice__important,
3445
3261
  body.theme-system .theme-dark__forced .s-notice__warning.s-notice__important {
3446
- --_no-bg: var(--yellow-500);
3447
- --_no-fc: var(--white);
3262
+ --_no-fc: var(--yellow-200);
3448
3263
  }
3449
3264
  body.theme-highcontrast .s-notice__warning.s-notice__important {
3450
3265
  --_no-bg: var(--yellow-500);
3451
3266
  --_no-fc: var(--white);
3267
+ --_no-btn-bg-active: transparent;
3268
+ --_no-btn-bg-focus: transparent;
3452
3269
  }
3453
3270
  .s-notice code {
3454
3271
  background: var(--_no-code-bg, transparent);
3455
3272
  }
3456
3273
  .s-notice .s-notice--btn {
3457
- color: inherit;
3274
+ color: var(--_no-btn-fc, inherit) !important;
3458
3275
  padding: var(--su8);
3459
3276
  }
3460
3277
  .s-notice .s-notice--btn:not(:focus) {
3461
3278
  box-shadow: none;
3462
3279
  }
3463
3280
  .s-notice .s-notice--btn:active {
3464
- background: var(--_no-btn-bg-active);
3281
+ background-color: var(--_no-btn-bg-active, inherit) !important;
3465
3282
  }
3466
3283
  .s-notice .s-notice--btn:focus,
3467
3284
  .s-notice .s-notice--btn:hover {
3468
- background: var(--_no-btn-bg-focus);
3285
+ background-color: var(--_no-btn-bg-focus, inherit) !important;
3469
3286
  }
3470
3287
  .s-page-title {
3471
3288
  --_pt-ai: flex-end;
@@ -3508,7 +3325,7 @@ body.theme-highcontrast .s-notice__warning.s-notice__important {
3508
3325
  .s-page-title .s-page-title--header {
3509
3326
  color: var(--fc-dark);
3510
3327
  font-size: var(--fs-headline1);
3511
- font-weight: normal;
3328
+ font-weight: bold;
3512
3329
  line-height: var(--lh-sm);
3513
3330
  margin: 0;
3514
3331
  margin-bottom: 0;
@@ -3523,10 +3340,10 @@ body.theme-highcontrast .s-notice__warning.s-notice__important {
3523
3340
  }
3524
3341
  .s-pagination .s-pagination--item {
3525
3342
  --_pa-item-bg: transparent;
3526
- --_pa-item-bc: var(--bc-medium);
3343
+ --_pa-item-bc: var(--bc-darker);
3527
3344
  --_pa-item-fc: var(--fc-medium);
3528
3345
  --_pa-item-bg-hover: var(--black-225);
3529
- --_pa-item-bc-hover: var(--bc-dark);
3346
+ --_pa-item-bc-hover: var(--bc-darker);
3530
3347
  --_pa-item-fc-hover: var(--fc-dark);
3531
3348
  background-color: var(--_pa-item-bg);
3532
3349
  border: 1px solid var(--_pa-item-bc);
@@ -3729,18 +3546,18 @@ body.theme-highcontrast .s-popover .s-popover--arrow__lb {
3729
3546
  --_ps-bg: unset;
3730
3547
  --_ps-o: unset;
3731
3548
  --_ps-content-excerpt-fc: var(--_ps-state-fc, var(--fc-medium));
3732
- --_ps-content-title-a-fc: var(--_ps-state-fc, var(--theme-post-title-color));
3733
- --_ps-content-title-a-fc-hover: var(--_ps-state-fc, var(--theme-post-title-color-hover));
3734
- --_ps-content-title-a-fc-visited: var(--_ps-state-fc, var(--theme-post-title-color-visited));
3549
+ --_ps-content-title-a-fc: var(--_ps-state-fc, var(--theme-post-title-color, var(--theme-link-color, var(--theme-secondary-400))));
3550
+ --_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))));
3551
+ --_ps-content-title-a-fc-visited: var(--_ps-state-fc, var(--theme-post-title-color-visited, var(--theme-link-color-visited, var(--theme-secondary-600))));
3735
3552
  --_ps-stats-ai: flex-end;
3736
3553
  --_ps-stats-fc: var(--_ps-state-fc, var(--fc-light));
3737
3554
  --_ps-stats-fd: column;
3738
3555
  --_ps-stats-w: calc(var(--su96) + var(--su12));
3739
- --_ps-has-answers-bc: var(--green-500);
3556
+ --_ps-has-answers-bc: var(--green-400);
3740
3557
  --_ps-has-answers-bg: unset;
3741
- --_ps-has-answers-fc: var(--green-500);
3742
- --_ps-has-accepted-answers-bc: var(--green-500);
3743
- --_ps-has-accepted-answers-bg: var(--green-500);
3558
+ --_ps-has-answers-fc: var(--green-400);
3559
+ --_ps-has-accepted-answers-bc: var(--green-400);
3560
+ --_ps-has-accepted-answers-bg: var(--green-400);
3744
3561
  --_ps-has-accepted-answers-fc: var(--white);
3745
3562
  --_ps-stats-item-emphasized-fc: var(--_ps-state-fc, var(--fc-dark));
3746
3563
  background-color: var(--_ps-bg);
@@ -3882,9 +3699,9 @@ body.theme-system .theme-dark__forced .s-post-summary.s-post-summary__deleted .s
3882
3699
  .s-post-summary.s-post-summary__watched:not(.s-post-summary__deleted):not(.s-post-summary__ignored) {
3883
3700
  --_ps-bg: var(--yellow-200);
3884
3701
  --_ps-stats-fc: var(--black-400);
3885
- --_ps-content-title-a-fc: var(--theme-post-title-color);
3886
- --_ps-content-title-a-fc-hover: var(--theme-post-title-color-hover);
3887
- --_ps-content-title-a-fc-visited: var(--theme-post-title-color-visited);
3702
+ --_ps-content-title-a-fc: var(--theme-post-title-color, var(--theme-link-color, var(--theme-secondary-400)));
3703
+ --_ps-content-title-a-fc-hover: var(--theme-post-title-color-hover, var(--theme-link-color-hover, var(--theme-secondary-500)));
3704
+ --_ps-content-title-a-fc-visited: var(--theme-post-title-color-visited, var(--theme-link-color-visited, var(--theme-secondary-600)));
3888
3705
  }
3889
3706
  .s-post-summary.s-post-summary__watched:not(.s-post-summary__deleted):not(.s-post-summary__ignored) .s-user-card a {
3890
3707
  color: var(--_ps-content-title-a-fc);
@@ -3952,7 +3769,7 @@ body.theme-highcontrast .s-post-summary .s-post-summary--answer:before {
3952
3769
  -webkit-box-orient: vertical;
3953
3770
  overflow: hidden;
3954
3771
  color: var(--_ps-content-excerpt-fc);
3955
- font-family: var(--theme-post-body-font-family);
3772
+ font-family: var(--theme-post-body-font-family, var(--theme-body-font-family));
3956
3773
  margin-top: calc(var(--su2) * -1);
3957
3774
  margin-bottom: var(--su8);
3958
3775
  }
@@ -4009,7 +3826,7 @@ body.theme-highcontrast .s-post-summary .s-post-summary--answer:before {
4009
3826
  -ms-hyphens: auto !important;
4010
3827
  hyphens: auto !important;
4011
3828
  color: var(--_ps-content-title-a-fc);
4012
- font-family: var(--theme-post-title-font-family);
3829
+ font-family: var(--theme-post-title-font-family, var(--theme-body-font-family));
4013
3830
  }
4014
3831
  .s-post-summary .s-post-summary--content-title a:visited {
4015
3832
  color: var(--_ps-content-title-a-fc-visited);
@@ -4123,13 +3940,13 @@ body.theme-highcontrast .s-post-summary .s-post-summary--answer:before {
4123
3940
  color: var(--white);
4124
3941
  }
4125
3942
  .s-post-summary .s-post-summary--stats-item.is-warm {
4126
- color: var(--_ps-state-fc, var(--yellow-600));
3943
+ color: var(--_ps-state-fc, var(--yellow-500));
4127
3944
  }
4128
3945
  .s-post-summary .s-post-summary--stats-item.is-hot {
4129
- color: var(--_ps-state-fc, var(--orange-600));
3946
+ color: var(--_ps-state-fc, var(--orange-500));
4130
3947
  }
4131
3948
  .s-post-summary .s-post-summary--stats-item.is-supernova {
4132
- color: var(--_ps-state-fc, var(--red-600));
3949
+ color: var(--_ps-state-fc, var(--red-500));
4133
3950
  }
4134
3951
  .s-post-summary .s-post-summary--stats-item.is-archived {
4135
3952
  background-color: var(--black-225);
@@ -4270,7 +4087,7 @@ body.theme-highcontrast .s-progress.s-progress__privilege {
4270
4087
  display: flex;
4271
4088
  }
4272
4089
  .s-progress.s-progress__stepped .s-progress--bar {
4273
- background: var(--black-350);
4090
+ background: var(--black-250);
4274
4091
  border-radius: 0;
4275
4092
  height: var(--su-static6);
4276
4093
  position: absolute;
@@ -4326,7 +4143,7 @@ body.theme-highcontrast .s-progress.s-progress__privilege {
4326
4143
  }
4327
4144
  .s-progress.s-progress__stepped .s-progress--stop {
4328
4145
  align-items: center;
4329
- background: var(--black-350);
4146
+ background: var(--black-250);
4330
4147
  border-radius: 100%;
4331
4148
  color: var(--_white-static);
4332
4149
  display: flex;
@@ -4406,7 +4223,7 @@ body.theme-highcontrast .s-progress.s-progress__stepped .s-progress--stop {
4406
4223
  --_pr-h6-fs: var(--fs-body1);
4407
4224
  --_pr-hr-bg: var(--black-225);
4408
4225
  --_pr-img-mb: 1.1em;
4409
- --_pr-kbd-bc: var(--black-350);
4226
+ --_pr-kbd-bc: var(--black-300);
4410
4227
  --_pr-kbd-bs: 0 var(--su-static1) var(--su-static1) hsla(210, 8%, 5%, 0.15), inset 0 1px 0 0 var(--_white-static);
4411
4228
  --_pr-spoiler-cursor: pointer;
4412
4229
  --_pr-spoiler-after-t: 1em;
@@ -4464,7 +4281,7 @@ body.theme-highcontrast .s-prose {
4464
4281
  --_pr-lh: var(--lh-xl);
4465
4282
  }
4466
4283
  .s-prose *:not(.s-code-block) > a code {
4467
- color: var(--theme-link-color);
4284
+ color: var(--theme-link-color, var(--theme-secondary-400));
4468
4285
  }
4469
4286
  .s-prose *:not(.s-code-block) > code {
4470
4287
  padding: var(--su2) var(--su4);
@@ -4874,7 +4691,7 @@ body.theme-highcontrast .s-prose {
4874
4691
  .s-select {
4875
4692
  --_se-arrow-bc: currentColor transparent;
4876
4693
  --_se-arrow-size: var(--su-static4);
4877
- --_se-select-bc: var(--bc-dark);
4694
+ --_se-select-bc: var(--bc-darker);
4878
4695
  --_se-select-bc-focus: var(--theme-secondary-400);
4879
4696
  --_se-select-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring);
4880
4697
  --_se-select-bg: var(--white);
@@ -4914,7 +4731,7 @@ body.theme-highcontrast .s-prose {
4914
4731
  --_se-select-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-success);
4915
4732
  }
4916
4733
  .has-warning .s-select {
4917
- --_se-select-bc: var(--yellow-600);
4734
+ --_se-select-bc: var(--yellow-500);
4918
4735
  --_se-select-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring-warning);
4919
4736
  }
4920
4737
  .is-disabled .s-select {
@@ -5039,7 +4856,7 @@ body.theme-highcontrast .s-select > select:focus {
5039
4856
  }
5040
4857
  .s-sidebarwidget.s-sidebarwidget__blue {
5041
4858
  --_sw-bc: var(--blue-300);
5042
- background-color: var(--blue-200);
4859
+ background-color: var(--blue-100);
5043
4860
  border-color: var(--_sw-bc);
5044
4861
  }
5045
4862
  body.theme-highcontrast .s-sidebarwidget.s-sidebarwidget__blue {
@@ -5051,12 +4868,12 @@ body.theme-highcontrast .s-sidebarwidget.s-sidebarwidget__blue {
5051
4868
  border-color: var(--_sw-bc);
5052
4869
  }
5053
4870
  .s-sidebarwidget.s-sidebarwidget__blue .s-sidebarwidget--header {
5054
- background-color: var(--blue-300);
4871
+ background-color: var(--blue-200);
5055
4872
  color: var(--fc-medium);
5056
4873
  }
5057
4874
  .s-sidebarwidget.s-sidebarwidget__yellow {
5058
4875
  --_sw-bc: var(--yellow-300);
5059
- background-color: var(--yellow-200);
4876
+ background-color: var(--yellow-100);
5060
4877
  border-color: var(--_sw-bc);
5061
4878
  }
5062
4879
  body.theme-highcontrast .s-sidebarwidget.s-sidebarwidget__yellow {
@@ -5068,12 +4885,12 @@ body.theme-highcontrast .s-sidebarwidget.s-sidebarwidget__yellow {
5068
4885
  border-color: var(--_sw-bc);
5069
4886
  }
5070
4887
  .s-sidebarwidget.s-sidebarwidget__yellow .s-sidebarwidget--header {
5071
- background-color: var(--yellow-300);
4888
+ background-color: var(--yellow-200);
5072
4889
  color: var(--fc-medium);
5073
4890
  }
5074
4891
  .s-sidebarwidget.s-sidebarwidget__green {
5075
4892
  --_sw-bc: var(--green-300);
5076
- background-color: var(--green-200);
4893
+ background-color: var(--green-100);
5077
4894
  border-color: var(--_sw-bc);
5078
4895
  }
5079
4896
  body.theme-highcontrast .s-sidebarwidget.s-sidebarwidget__green {
@@ -5085,7 +4902,7 @@ body.theme-highcontrast .s-sidebarwidget.s-sidebarwidget__green {
5085
4902
  border-color: var(--_sw-bc);
5086
4903
  }
5087
4904
  .s-sidebarwidget.s-sidebarwidget__green .s-sidebarwidget--header {
5088
- background-color: var(--green-300);
4905
+ background-color: var(--green-200);
5089
4906
  color: var(--fc-medium);
5090
4907
  }
5091
4908
  .s-sidebarwidget .s-sidebarwidget--action {
@@ -5132,7 +4949,7 @@ body.theme-highcontrast .s-sidebarwidget.s-sidebarwidget__green {
5132
4949
  }
5133
4950
  .s-sidebarwidget .s-sidebarwidget--header.s-sidebarwidget__expanding-control:before {
5134
4951
  border: calc(var(--su-static4) + var(--su-static1)) solid transparent;
5135
- border-left-color: var(--bc-dark);
4952
+ border-left-color: var(--black-400);
5136
4953
  border-right-width: 0;
5137
4954
  content: '';
5138
4955
  float: left;
@@ -5615,15 +5432,15 @@ body.theme-highcontrast .s-sidebarwidget.s-sidebarwidget__green {
5615
5432
  border-color: transparent;
5616
5433
  }
5617
5434
  .s-tag {
5618
- --_ta-bc: var(--theme-tag-border-color);
5619
- --_ta-bc-hover: var(--theme-tag-hover-border-color);
5435
+ --_ta-bc: var(--theme-tag-border-color, transparent);
5436
+ --_ta-bc-hover: var(--theme-tag-hover-border-color, transparent);
5620
5437
  --_ta-bc-selected: transparent;
5621
- --_ta-bg: var(--theme-tag-background-color);
5622
- --_ta-bg-hover: var(--theme-tag-hover-background-color);
5438
+ --_ta-bg: var(--theme-tag-background-color, var(--theme-secondary-100));
5439
+ --_ta-bg-hover: var(--theme-tag-hover-background-color, var(--theme-secondary-200));
5623
5440
  --_ta-bg-selected: var(--theme-secondary-300);
5624
5441
  --_ta-br: var(--br-sm);
5625
- --_ta-fc: var(--theme-tag-color);
5626
- --_ta-fc-hover: var(--theme-tag-hover-color);
5442
+ --_ta-fc: var(--theme-tag-color, var(--theme-secondary-500));
5443
+ --_ta-fc-hover: var(--theme-tag-hover-color, var(--theme-secondary-600));
5627
5444
  --_ta-fc-selected: var(--theme-secondary-600);
5628
5445
  --_ta-fs: var(--fs-caption);
5629
5446
  --_ta-lh: 1.84615385;
@@ -5717,40 +5534,40 @@ body.theme-highcontrast a.s-tag.is-selected:focus {
5717
5534
  --_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");
5718
5535
  }
5719
5536
  .s-tag.s-tag__moderator {
5720
- --_ta-bc: var(--red-300);
5721
- --_ta-bg: var(--red-200);
5722
- --_ta-fc: var(--red-600);
5723
- --_ta-bc-hover: var(--red-400);
5724
- --_ta-bg-hover: var(--red-300);
5725
- --_ta-fc-hover: var(--red-600);
5726
- --_ta-bc-selected: var(--red-400);
5727
- --_ta-bg-selected: var(--red-300);
5728
- --_ta-fc-selected: var(--red-600);
5537
+ --_ta-bc: transparent;
5538
+ --_ta-bg: var(--orange-100);
5539
+ --_ta-fc: var(--orange-500);
5540
+ --_ta-bc-hover: transparent;
5541
+ --_ta-bg-hover: var(--orange-200);
5542
+ --_ta-fc-hover: var(--orange-600);
5543
+ --_ta-bc-selected: transparent;
5544
+ --_ta-bg-selected: var(--orange-300);
5545
+ --_ta-fc-selected: var(--orange-600);
5729
5546
  }
5730
5547
  .s-tag.s-tag__muted:not(.s-tag__moderator):not(.s-tag__required) {
5731
5548
  --_ta-bc: transparent;
5732
- --_ta-bg: var(--black-200);
5733
- --_ta-fc: var(--black-500);
5549
+ --_ta-bg: var(--black-150);
5550
+ --_ta-fc: var(--black-400);
5734
5551
  --_ta-bc-hover: transparent;
5735
- --_ta-bg-hover: var(--black-225);
5736
- --_ta-fc-hover: var(--black-600);
5552
+ --_ta-bg-hover: var(--black-200);
5553
+ --_ta-fc-hover: var(--black-500);
5737
5554
  --_ta-bc-selected: transparent;
5738
- --_ta-bg-selected: var(--black-300);
5555
+ --_ta-bg-selected: var(--black-225);
5739
5556
  --_ta-fc-selected: var(--black-600);
5740
5557
  }
5741
5558
  body.theme-highcontrast .s-tag.s-tag__muted:not(.s-tag__moderator):not(.s-tag__required) {
5742
5559
  --_ta-bc: currentColor;
5743
5560
  }
5744
5561
  .s-tag.s-tag__required:not(.s-tag__moderator) {
5745
- --_ta-bc: var(--bc-dark);
5746
- --_ta-bg: var(--black-200);
5747
- --_ta-fc: var(--black-500);
5748
- --_ta-bc-hover: var(--black-350);
5749
- --_ta-bg-hover: var(--black-225);
5750
- --_ta-fc-hover: var(--black-600);
5751
- --_ta-bc-selected: var(--black-400);
5752
- --_ta-bg-selected: var(--black-300);
5753
- --_ta-fc-selected: var(--black-600);
5562
+ --_ta-bc: transparent;
5563
+ --_ta-bg: var(--theme-secondary-500);
5564
+ --_ta-fc: var(--white);
5565
+ --_ta-bc-hover: transparent;
5566
+ --_ta-bg-hover: var(--theme-secondary-400);
5567
+ --_ta-fc-hover: var(--white);
5568
+ --_ta-bc-selected: transparent;
5569
+ --_ta-bg-selected: var(--theme-secondary-600);
5570
+ --_ta-fc-selected: var(--white);
5754
5571
  }
5755
5572
  .s-tag__watched,
5756
5573
  .s-tag.s-tag__watched {
@@ -5862,21 +5679,8 @@ fieldset[disabled] .s-toggle-switch label,
5862
5679
  --_ts-multiple-bg: var(--black-400);
5863
5680
  --_ts-multiple-fc: var(--white);
5864
5681
  }
5865
- @media (prefers-color-scheme: dark) {
5866
- body.theme-system .s-toggle-switch.s-toggle-switch__multiple input[type="radio"]:checked + label.s-toggle-switch--label-off {
5867
- --_ts-multiple-bg: var(--black-350);
5868
- }
5869
- }
5870
- body.theme-dark .s-toggle-switch.s-toggle-switch__multiple input[type="radio"]:checked + label.s-toggle-switch--label-off,
5871
- .theme-dark__forced .s-toggle-switch.s-toggle-switch__multiple input[type="radio"]:checked + label.s-toggle-switch--label-off,
5872
- body.theme-system .theme-dark__forced .s-toggle-switch.s-toggle-switch__multiple input[type="radio"]:checked + label.s-toggle-switch--label-off {
5873
- --_ts-multiple-bg: var(--black-350);
5874
- }
5875
5682
  .s-toggle-switch.s-toggle-switch__multiple input[type="radio"]:checked + label:not(.s-toggle-switch--label-off) {
5876
5683
  --_ts-multiple-bg: var(--green-400);
5877
- --_ts-multiple-fc: var(--_white-static);
5878
- }
5879
- body.theme-highcontrast .s-toggle-switch.s-toggle-switch__multiple input[type="radio"]:checked + label:not(.s-toggle-switch--label-off) {
5880
5684
  --_ts-multiple-fc: var(--white);
5881
5685
  }
5882
5686
  .s-toggle-switch.s-toggle-switch__multiple input[type="radio"]:checked:focus + label {
@@ -5914,6 +5718,7 @@ input[type="checkbox"].s-toggle-switch {
5914
5718
  background-repeat: no-repeat;
5915
5719
  border-radius: 1000px;
5916
5720
  cursor: pointer;
5721
+ flex-shrink: 0;
5917
5722
  height: var(--su-static24);
5918
5723
  margin: 0;
5919
5724
  transition: background-position 0.2s ease;
@@ -5942,22 +5747,22 @@ input[type="checkbox"].s-toggle-switch[disabled] {
5942
5747
  min-width: auto;
5943
5748
  width: 100%;
5944
5749
  z-index: var(--zi-navigation-fixed);
5945
- background-color: var(--theme-topbar-background-color);
5946
- height: var(--theme-topbar-height);
5750
+ background-color: var(--theme-topbar-background-color, var(--white));
5751
+ height: var(--theme-topbar-height, calc(var(--su-static48) + var(--su-static8)));
5947
5752
  display: flex;
5948
- border-top: var(--theme-topbar-accent-border);
5949
- border-bottom: var(--theme-topbar-bottom-border);
5753
+ border-top: var(--theme-topbar-accent-border, 3px solid var(--theme-primary));
5754
+ border-bottom: var(--theme-topbar-bottom-border, 1px solid var(--black-225));
5950
5755
  position: relative;
5951
5756
  align-items: center;
5952
5757
  }
5953
5758
  body.theme-highcontrast .s-topbar {
5954
- --theme-topbar-search-color: var(--theme-topbar-item-color);
5955
- --theme-topbar-search-background: var(--theme-topbar-background-color);
5956
- --theme-topbar-search-placeholder: var(--theme-topbar-item-color);
5957
- --theme-topbar-search-border: var(--theme-topbar-item-color);
5958
- --theme-topbar-search-border-focus: var(--theme-topbar-item-color);
5959
- --theme-topbar-select-color: var(--theme-topbar-item-color);
5960
- --theme-topbar-select-background: var(--theme-topbar-background-color);
5759
+ --theme-topbar-search-color: var(--theme-topbar-item-color, var(--black-500));
5760
+ --theme-topbar-search-background: var(--theme-topbar-background-color, var(--white));
5761
+ --theme-topbar-search-placeholder: var(--theme-topbar-item-color, var(--black-500));
5762
+ --theme-topbar-search-border: var(--theme-topbar-item-color, var(--black-500));
5763
+ --theme-topbar-search-border-focus: var(--theme-topbar-item-color, var(--black-500));
5764
+ --theme-topbar-select-color: var(--theme-topbar-item-color, var(--black-500));
5765
+ --theme-topbar-select-background: var(--theme-topbar-background-color, var(--white));
5961
5766
  --theme-topbar-item-color: var(--black-600);
5962
5767
  --theme-topbar-item-color-hover: var(--black-600);
5963
5768
  --theme-topbar-item-background-hover: var(--black-300);
@@ -5982,10 +5787,10 @@ body.theme-highcontrast .s-topbar {
5982
5787
  background-color: transparent;
5983
5788
  }
5984
5789
  .s-topbar a.s-topbar--logo:hover {
5985
- background-color: var(--theme-topbar-item-background-hover);
5790
+ background-color: var(--theme-topbar-item-background-hover, var(--black-200));
5986
5791
  }
5987
5792
  .s-topbar a.s-topbar--logo.is-selected {
5988
- background-color: var(--theme-topbar-item-background-hover);
5793
+ background-color: var(--theme-topbar-item-background-hover, var(--black-200));
5989
5794
  }
5990
5795
  .s-topbar .s-topbar--menu-btn {
5991
5796
  display: flex;
@@ -6000,7 +5805,7 @@ body.theme-highcontrast .s-topbar {
6000
5805
  .s-topbar .s-topbar--menu-btn span:after {
6001
5806
  width: var(--su-static16);
6002
5807
  height: var(--su-static2);
6003
- background-color: var(--theme-topbar-item-color);
5808
+ background-color: var(--theme-topbar-item-color, var(--black-500));
6004
5809
  position: relative;
6005
5810
  }
6006
5811
  .s-topbar .s-topbar--menu-btn span:before,
@@ -6017,7 +5822,7 @@ body.theme-highcontrast .s-topbar {
6017
5822
  top: calc(var(--su-static6) - var(--su-static1));
6018
5823
  }
6019
5824
  .s-topbar .s-topbar--menu-btn.is-selected {
6020
- color: var(--theme-topbar-item-color-current);
5825
+ color: var(--theme-topbar-item-color-current, var(--black));
6021
5826
  background-color: var(--theme-topbar-item-background-current);
6022
5827
  }
6023
5828
  .s-topbar .s-topbar--menu-btn.is-selected span {
@@ -6032,27 +5837,27 @@ body.theme-highcontrast .s-topbar {
6032
5837
  transform: rotate(45deg);
6033
5838
  }
6034
5839
  .s-topbar .s-topbar--menu-btn:hover {
6035
- color: var(--theme-topbar-item-color-hover);
6036
- background-color: var(--theme-topbar-item-background-hover);
5840
+ color: var(--theme-topbar-item-color-hover, var(--black-600));
5841
+ background-color: var(--theme-topbar-item-background-hover, var(--black-200));
6037
5842
  }
6038
5843
  .s-topbar .s-navigation .s-navigation--item:focus-visible {
6039
- box-shadow: var(--theme-topbar-search-shadow-focus);
5844
+ box-shadow: var(--theme-topbar-search-shadow-focus, 0 0 0 var(--su-static4) var(--focus-ring));
6040
5845
  }
6041
5846
  .s-topbar .s-navigation .s-navigation--item:not(.is-selected) {
6042
- color: var(--theme-topbar-item-color);
5847
+ color: var(--theme-topbar-item-color, var(--black-500));
6043
5848
  }
6044
5849
  .s-topbar .s-navigation .s-navigation--item:not(.is-selected):hover {
6045
- color: var(--theme-topbar-item-color-hover);
6046
- background-color: var(--theme-topbar-item-background-hover);
5850
+ color: var(--theme-topbar-item-color-hover, var(--black-600));
5851
+ background-color: var(--theme-topbar-item-background-hover, var(--black-200));
6047
5852
  }
6048
5853
  .s-topbar__light {
6049
5854
  --theme-topbar-background-color: var(--_white-static);
6050
5855
  --theme-topbar-bottom-border: 1px solid hsl(210, 8%, 85%);
6051
5856
  --theme-topbar-search-color: hsl(210, 8%, 25%);
6052
5857
  --theme-topbar-search-background: var(--_white-static);
6053
- --theme-topbar-search-placeholder: hsl(210, 8%, 45%);
6054
- --theme-topbar-search-border: hsl(213, 9%, 75%);
6055
- --theme-topbar-search-border-focus: hsl(210, 70%, 48%);
5858
+ --theme-topbar-search-placeholder: hsl(210, 8%, 42%);
5859
+ --theme-topbar-search-border: hsl(210, 9%, 75%);
5860
+ --theme-topbar-search-border-focus: hsl(210, 77%, 46%);
6056
5861
  --theme-topbar-search-shadow-focus: 0 0 0 var(--su-static4) var(--focus-ring);
6057
5862
  --theme-topbar-select-color: hsl(210, 8%, 25%);
6058
5863
  --theme-topbar-select-background: hsl(210, 8%, 95%);
@@ -6060,7 +5865,6 @@ body.theme-highcontrast .s-topbar {
6060
5865
  --theme-topbar-item-color-hover: hsl(210, 8%, 5%);
6061
5866
  --theme-topbar-item-background-hover: hsl(210, 8%, 90%);
6062
5867
  --theme-topbar-item-color-current: var(--_black-static);
6063
- --theme-topbar-item-border-current: var(--theme-primary);
6064
5868
  --scrollbar: hsla(0, 0%, 0%, 0.2);
6065
5869
  }
6066
5870
  body.theme-highcontrast .s-topbar__light {
@@ -6084,7 +5888,6 @@ body.theme-highcontrast .s-topbar__light {
6084
5888
  --theme-topbar-item-color-hover: var(--_white-static);
6085
5889
  --theme-topbar-item-background-hover: hsl(210, 8%, 25%);
6086
5890
  --theme-topbar-item-color-current: var(--_white-static);
6087
- --theme-topbar-item-border-current: var(--theme-primary);
6088
5891
  --theme-topbar-accent-border: none;
6089
5892
  --scrollbar: hsla(0, 0%, 100%, 0.2);
6090
5893
  }
@@ -6152,7 +5955,7 @@ body.theme-highcontrast .s-topbar__dark .s-badge {
6152
5955
  border-color: transparent;
6153
5956
  }
6154
5957
  .s-topbar .s-topbar--content .s-topbar--item:not(.s-topbar--item__unset) {
6155
- color: var(--theme-topbar-item-color);
5958
+ color: var(--theme-topbar-item-color, var(--black-500));
6156
5959
  display: inline-flex;
6157
5960
  align-items: center;
6158
5961
  padding: 0 calc(var(--su12) - var(--su2));
@@ -6165,8 +5968,8 @@ body.theme-highcontrast .s-topbar__dark .s-badge {
6165
5968
  .s-topbar .s-topbar--content .s-topbar--item:not(.s-topbar--item__unset).is-selected,
6166
5969
  .s-topbar .s-topbar--content .s-topbar--item:not(.s-topbar--item__unset).is-selected:hover,
6167
5970
  .s-topbar .s-topbar--content .s-topbar--item:not(.s-topbar--item__unset).is-selected:focus {
6168
- color: var(--theme-topbar-item-color-hover);
6169
- background-color: var(--theme-topbar-item-background-hover);
5971
+ color: var(--theme-topbar-item-color-hover, var(--black-600));
5972
+ background-color: var(--theme-topbar-item-background-hover, var(--black-200));
6170
5973
  text-decoration: none;
6171
5974
  outline: none;
6172
5975
  }
@@ -6176,7 +5979,7 @@ body.theme-highcontrast .s-topbar__dark .s-badge {
6176
5979
  .s-topbar .s-topbar--content .s-topbar--item:not(.s-topbar--item__unset).is-selected:hover .s-activity-indicator,
6177
5980
  .s-topbar .s-topbar--content .s-topbar--item:not(.s-topbar--item__unset).is-selected:focus .s-activity-indicator {
6178
5981
  top: calc(50% - calc(var(--su16) + var(--su2)));
6179
- box-shadow: 0 0 0 var(--su-static2) var(--theme-topbar-item-background-hover);
5982
+ box-shadow: 0 0 0 var(--su-static2) var(--theme-topbar-item-background-hover, var(--black-200));
6180
5983
  }
6181
5984
  .s-topbar .s-topbar--content .s-topbar--item:not(.s-topbar--item__unset) .svg-icon {
6182
5985
  vertical-align: text-top;
@@ -6186,7 +5989,7 @@ body.theme-highcontrast .s-topbar__dark .s-badge {
6186
5989
  top: calc(50% - calc(var(--su12) + var(--su2)));
6187
5990
  right: var(--su-static2);
6188
5991
  transition: top var(--te-smooth) 0.15s;
6189
- box-shadow: 0 0 0 var(--su-static2) var(--theme-topbar-background-color);
5992
+ box-shadow: 0 0 0 var(--su-static2) var(--theme-topbar-background-color, var(--white));
6190
5993
  }
6191
5994
  .s-topbar .s-topbar--content .s-topbar--item__unset {
6192
5995
  align-self: center;
@@ -6202,13 +6005,13 @@ body.theme-highcontrast .s-topbar__dark .s-badge {
6202
6005
  flex-shrink: 0;
6203
6006
  border-color: transparent;
6204
6007
  background-color: transparent;
6205
- color: var(--theme-topbar-item-color);
6008
+ color: var(--theme-topbar-item-color, var(--black-500));
6206
6009
  }
6207
6010
  .s-topbar--notice:hover,
6208
6011
  .s-topbar--notice:focus {
6209
- border-color: var(--theme-topbar-item-background-hover);
6210
- background-color: var(--theme-topbar-item-background-hover);
6211
- color: var(--theme-topbar-item-color-hover);
6012
+ border-color: var(--theme-topbar-item-background-hover, var(--black-200));
6013
+ background-color: var(--theme-topbar-item-background-hover, var(--black-200));
6014
+ color: var(--theme-topbar-item-color-hover, var(--black-600));
6212
6015
  }
6213
6016
  .s-topbar--notice.is-unread {
6214
6017
  border-color: var(--theme-primary);
@@ -6233,29 +6036,29 @@ body.theme-highcontrast .s-topbar__dark .s-badge {
6233
6036
  flex-grow: 1;
6234
6037
  }
6235
6038
  .s-topbar .s-topbar--searchbar .s-topbar--searchbar--input-group .s-input {
6236
- border-color: var(--theme-topbar-search-border);
6237
- background-color: var(--theme-topbar-search-background);
6039
+ border-color: var(--theme-topbar-search-border, var(--black-300));
6040
+ background-color: var(--theme-topbar-search-background, var(--white));
6238
6041
  box-shadow: var(--theme-topbar-search-shadow);
6239
- color: var(--theme-topbar-search-color);
6042
+ color: var(--theme-topbar-search-color, var(--black-500));
6240
6043
  display: block;
6241
6044
  line-height: var(--lh-sm);
6242
6045
  }
6243
6046
  .s-topbar .s-topbar--searchbar .s-topbar--searchbar--input-group .s-input:focus {
6244
- border-color: var(--theme-topbar-search-border-focus);
6245
- box-shadow: var(--theme-topbar-search-shadow-focus);
6047
+ border-color: var(--theme-topbar-search-border-focus, var(--blue-400));
6048
+ box-shadow: var(--theme-topbar-search-shadow-focus, 0 0 0 var(--su-static4) var(--focus-ring));
6246
6049
  }
6247
6050
  .s-topbar .s-topbar--searchbar .s-topbar--searchbar--input-group .s-input::placeholder {
6248
- color: var(--theme-topbar-search-placeholder);
6051
+ color: var(--theme-topbar-search-placeholder, var(--black-400));
6249
6052
  font-style: normal;
6250
6053
  }
6251
6054
  .s-topbar .s-topbar--searchbar .s-topbar--searchbar--input-group .s-input-icon {
6252
- color: var(--theme-topbar-search-placeholder);
6055
+ color: var(--theme-topbar-search-placeholder, var(--black-400));
6253
6056
  }
6254
6057
  .s-topbar .s-topbar--searchbar .s-select {
6255
6058
  max-width: calc(var(--s-step) * 2) !important;
6256
6059
  align-self: stretch;
6257
6060
  margin-right: calc(var(--su-static1) * -1);
6258
- color: var(--theme-topbar-select-color);
6061
+ color: var(--theme-topbar-select-color, var(--black-500));
6259
6062
  }
6260
6063
  .s-topbar .s-topbar--searchbar .s-select:before,
6261
6064
  .s-topbar .s-topbar--searchbar .s-select:after {
@@ -6266,13 +6069,13 @@ body.theme-highcontrast .s-topbar__dark .s-badge {
6266
6069
  border-bottom-right-radius: 0 !important;
6267
6070
  height: 100%;
6268
6071
  line-height: var(--lh-sm);
6269
- border-color: var(--theme-topbar-search-border);
6270
- background-color: var(--theme-topbar-select-background);
6271
- color: var(--theme-topbar-select-color);
6072
+ border-color: var(--theme-topbar-search-border, var(--black-300));
6073
+ background-color: var(--theme-topbar-select-background, var(--black-200));
6074
+ color: var(--theme-topbar-select-color, var(--black-500));
6272
6075
  }
6273
6076
  .s-topbar .s-topbar--searchbar .s-select > select:focus {
6274
- border-color: var(--theme-topbar-search-border-focus);
6275
- box-shadow: var(--theme-topbar-search-shadow-focus);
6077
+ border-color: var(--theme-topbar-search-border-focus, var(--blue-400));
6078
+ box-shadow: var(--theme-topbar-search-shadow-focus, 0 0 0 var(--su-static4) var(--focus-ring));
6276
6079
  z-index: var(--zi-selected);
6277
6080
  }
6278
6081
  .s-topbar .s-topbar--searchbar .s-select + .s-topbar--searchbar--input-group > .s-input {
@@ -6288,7 +6091,7 @@ body.theme-highcontrast .s-topbar__dark .s-badge {
6288
6091
  top: 100%;
6289
6092
  max-width: 100%;
6290
6093
  padding: var(--su8) var(--su12);
6291
- background: var(--theme-topbar-item-background-hover);
6094
+ background: var(--theme-topbar-item-background-hover, var(--black-200));
6292
6095
  }
6293
6096
  .s-topbar .s-topbar--searchbar.s-topbar--searchbar__open {
6294
6097
  display: flex;
@@ -6309,34 +6112,40 @@ body.theme-highcontrast .s-topbar__dark .s-badge {
6309
6112
  body.theme-highcontrast .s-uploader {
6310
6113
  --_up-bg-bc-hc: var(--black-400);
6311
6114
  }
6115
+ body.theme-highcontrast .s-uploader.has-error {
6116
+ --_up-bg-bc-hc-state: var(--red-500);
6117
+ }
6118
+ body.theme-highcontrast .s-uploader.has-success {
6119
+ --_up-bg-bc-hc-state: var(--green-400);
6120
+ }
6121
+ body.theme-highcontrast .s-uploader.has-warning {
6122
+ --_up-bg-bc-hc-state: var(--yellow-500);
6123
+ }
6312
6124
  .s-uploader.has-error .s-link,
6313
6125
  .s-uploader.has-success .s-link,
6314
6126
  .s-uploader.has-warning .s-link {
6315
6127
  color: var(--_up-link-fc);
6316
6128
  }
6317
6129
  .s-uploader.has-error {
6318
- --_up-bg: var(--red-200);
6319
- --_up-bg-focus: var(--red-300);
6320
- --_up-bg-bc: var(--red-400);
6321
- --_up-bg-bc-hc-state: var(--red-400);
6130
+ --_up-bg: var(--red-100);
6131
+ --_up-bg-focus: var(--red-200);
6132
+ --_up-bg-bc: var(--red-300);
6322
6133
  --_up-focus-ring-color: var(--focus-ring-error);
6323
- --_up-link-fc: var(--red-600);
6134
+ --_up-link-fc: var(--red-500);
6324
6135
  }
6325
6136
  .s-uploader.has-success {
6326
6137
  --_up-bg: var(--green-100);
6327
6138
  --_up-bg-focus: var(--green-200);
6328
- --_up-bg-bc: var(--green-400);
6329
- --_up-bg-bc-hc-state: var(--green-400);
6139
+ --_up-bg-bc: var(--green-300);
6330
6140
  --_up-focus-ring-color: var(--focus-ring-success);
6331
- --_up-link-fc: var(--green-600);
6141
+ --_up-link-fc: var(--green-400);
6332
6142
  }
6333
6143
  .s-uploader.has-warning {
6334
- --_up-bg: var(--yellow-200);
6335
- --_up-bg-focus: var(--yellow-300);
6336
- --_up-bg-bc: var(--yellow-400);
6337
- --_up-bg-bc-hc-state: var(--yellow-400);
6144
+ --_up-bg: var(--yellow-100);
6145
+ --_up-bg-focus: var(--yellow-200);
6146
+ --_up-bg-bc: var(--yellow-300);
6338
6147
  --_up-focus-ring-color: var(--focus-ring-warning);
6339
- --_up-link-fc: var(--yellow-600);
6148
+ --_up-link-fc: var(--yellow-500);
6340
6149
  }
6341
6150
  .s-uploader.is-active {
6342
6151
  --_up-bg: var(--black-150);
@@ -6488,7 +6297,7 @@ body.theme-highcontrast .s-uploader .s-uploader--preview-thumbnail {
6488
6297
  --_uc-fc: var(--black-400);
6489
6298
  }
6490
6299
  .s-user-card.s-user-card__highlighted {
6491
- --_uc-bg: var(--theme-secondary-200);
6300
+ --_uc-bg: var(--theme-secondary-100);
6492
6301
  --_uc-bar: var(--br-md);
6493
6302
  --_uc-time-fc: var(--black-500);
6494
6303
  --_uc-type-fc: var(--black-500);
@@ -6815,7 +6624,7 @@ body.theme-system .theme-light__forced,
6815
6624
  body:not(.theme-dark) .themed,
6816
6625
  body.theme-dark .theme-light__forced .themed,
6817
6626
  body.theme-system .theme-light__forced .themed {
6818
- color: var(--theme-body-font-color);
6627
+ color: var(--theme-body-font-color, var(--black-600));
6819
6628
  --theme-primary-color-legacy-h: var(--theme-light-primary-color-legacy-h, var(--theme-base-primary-color-legacy-h));
6820
6629
  --theme-primary-color-legacy-s: var(--theme-light-primary-color-legacy-s, var(--theme-base-primary-color-legacy-s));
6821
6630
  --theme-primary-color-legacy-l: var(--theme-light-primary-color-legacy-l, var(--theme-base-primary-color-legacy-l));
@@ -6968,7 +6777,7 @@ body.theme-dark,
6968
6777
  body:not(.theme-dark) .theme-dark__forced,
6969
6778
  body.theme-dark .themed,
6970
6779
  body:not(.theme-dark) .theme-dark__forced .themed {
6971
- color: var(--theme-body-font-color);
6780
+ color: var(--theme-body-font-color, var(--black-600));
6972
6781
  --theme-primary-color-legacy-h: var(--theme-dark-primary-color-legacy-h, var(--theme-base-primary-color-legacy-h));
6973
6782
  --theme-primary-color-legacy-s: var(--theme-dark-primary-color-legacy-s, var(--theme-base-primary-color-legacy-s));
6974
6783
  --theme-primary-color-legacy-l: var(--theme-dark-primary-color-legacy-l, var(--theme-base-primary-color-legacy-l));
@@ -7119,7 +6928,7 @@ body:not(.theme-dark) .theme-dark__forced .themed {
7119
6928
  }
7120
6929
  body.theme-system,
7121
6930
  body.theme-system .themed {
7122
- color: var(--theme-body-font-color);
6931
+ color: var(--theme-body-font-color, var(--black-600));
7123
6932
  --theme-primary-color-legacy-h: var(--theme-dark-primary-color-legacy-h, var(--theme-base-primary-color-legacy-h));
7124
6933
  --theme-primary-color-legacy-s: var(--theme-dark-primary-color-legacy-s, var(--theme-base-primary-color-legacy-s));
7125
6934
  --theme-primary-color-legacy-l: var(--theme-dark-primary-color-legacy-l, var(--theme-base-primary-color-legacy-l));
@@ -7575,8 +7384,24 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
7575
7384
  body {
7576
7385
  --_o-disabled: 0.5;
7577
7386
  --_o-disabled-static: 0.5;
7578
- --_black-static: hsl(0, 8%, 5%);
7387
+ --_black-static: hsl(0, 0%, 0%);
7579
7388
  --_white-static: hsl(0, 0%, 100%);
7389
+ }
7390
+ body:not(.theme-dark),
7391
+ body.theme-highcontrast:not(.theme-dark),
7392
+ body:not(.theme-highcontrast):not(.theme-dark),
7393
+ body.theme-dark .theme-light__forced,
7394
+ body.theme-highcontrast.theme-dark .theme-light__forced,
7395
+ body:not(.theme-highcontrast).theme-dark .theme-light__forced,
7396
+ body.theme-system .theme-light__forced,
7397
+ body.theme-highcontrast.theme-system .theme-light__forced,
7398
+ body:not(.theme-highcontrast).theme-system .theme-light__forced,
7399
+ body.theme-dark,
7400
+ body.theme-highcontrast.theme-dark,
7401
+ body:not(.theme-highcontrast).theme-dark,
7402
+ body:not(.theme-dark) .theme-dark__forced,
7403
+ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced,
7404
+ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced {
7580
7405
  --bg-error: var(--red-400);
7581
7406
  --bg-danger: var(--red-400);
7582
7407
  --bg-success: var(--green-400);
@@ -7590,73 +7415,29 @@ body {
7590
7415
  --fc-dark: var(--black-600);
7591
7416
  --fc-error: var(--red-400);
7592
7417
  --fc-danger: var(--red-400);
7593
- --fc-success: var(--green-500);
7418
+ --fc-success: var(--green-400);
7594
7419
  --fc-warning: var(--yellow-500);
7595
- --theme-body-font-color: var(--black-600);
7596
- --theme-background-color: var(--white);
7597
- --theme-link-color: var(--theme-secondary-400);
7598
- --theme-link-color-hover: var(--theme-secondary-400);
7599
- --theme-link-color-visited: var(--theme-secondary-500);
7600
- --theme-button-color: var(--theme-secondary-400);
7601
- --theme-button-background-color: transparent;
7602
- --theme-button-hover-color: var(--theme-secondary-400);
7603
- --theme-button-hover-background-color: var(--theme-secondary-200);
7604
- --theme-button-active-background-color: var(--theme-secondary-300);
7605
- --theme-button-selected-color: var(--theme-secondary-600);
7606
- --theme-button-selected-background-color: var(--theme-secondary-300);
7607
- --theme-button-primary-color: var(--white);
7608
- --theme-button-primary-background-color: var(--theme-secondary-400);
7609
- --theme-button-primary-hover-color: var(--white);
7610
- --theme-button-primary-hover-background-color: var(--theme-secondary-400);
7611
- --theme-button-primary-active-background-color: var(--theme-secondary-500);
7612
- --theme-button-primary-selected-color: var(--white);
7613
- --theme-button-primary-selected-background-color: var(--theme-secondary-500);
7614
- --theme-button-primary-number-color: var(--theme-secondary-600);
7615
- --theme-button-filled-color: var(--theme-secondary-500);
7616
- --theme-button-filled-background-color: var(--theme-secondary-200);
7617
- --theme-button-filled-border-color: var(--theme-secondary-400);
7618
- --theme-button-filled-hover-color: var(--theme-secondary-600);
7619
- --theme-button-filled-hover-background-color: var(--theme-secondary-300);
7620
- --theme-button-filled-active-background-color: var(--theme-secondary-300);
7621
- --theme-button-filled-active-border-color: var(--theme-secondary-400);
7622
- --theme-button-filled-selected-color: var(--theme-secondary-600);
7623
- --theme-button-filled-selected-background-color: var(--theme-secondary-400);
7624
- --theme-button-filled-selected-border-color: var(--theme-secondary-400);
7625
- --theme-button-outlined-border-color: var(--theme-secondary-400);
7626
- --theme-button-outlined-selected-border-color: var(--theme-secondary-400);
7627
- --theme-tag-color: var(--theme-secondary-600);
7628
- --theme-tag-background-color: var(--theme-secondary-200);
7629
- --theme-tag-border-color: transparent;
7630
- --theme-tag-hover-color: var(--theme-secondary-600);
7631
- --theme-tag-hover-background-color: var(--theme-secondary-300);
7632
- --theme-tag-hover-border-color: transparent;
7633
- --theme-topbar-height: calc(var(--su-static48) + var(--su-static8));
7634
- --theme-topbar-background-color: var(--white);
7635
- --theme-topbar-search-color: var(--black-500);
7636
- --theme-topbar-search-background: var(--white);
7637
- --theme-topbar-search-placeholder: var(--black-400);
7638
- --theme-topbar-search-border: var(--black-300);
7639
- --theme-topbar-search-border-focus: var(--blue-400);
7640
- --theme-topbar-search-shadow-focus: 0 0 0 var(--su-static4) var(--focus-ring);
7641
- --theme-topbar-select-color: var(--black-500);
7642
- --theme-topbar-select-background: var(--black-200);
7643
- --theme-topbar-item-color: var(--black-500);
7644
- --theme-topbar-item-color-hover: var(--black-600);
7645
- --theme-topbar-item-background-hover: var(--black-200);
7646
- --theme-topbar-item-color-current: var(--black);
7647
- --theme-topbar-item-border-current: var(--theme-primary);
7648
- --theme-topbar-accent-border: 3px solid var(--theme-primary);
7649
- --theme-topbar-bottom-border: 1px solid var(--black-225);
7650
- --theme-post-title-color: var(--theme-link-color);
7651
- --theme-post-title-color-hover: var(--theme-link-color-hover);
7652
- --theme-post-title-color-visited: var(--theme-link-color-visited);
7653
- --theme-post-title-font-family: var(--theme-body-font-family);
7654
- --theme-post-body-font-family: var(--theme-body-font-family);
7655
- }
7656
- body,
7657
- body.themed,
7658
- body .themed {
7659
- color: var(--theme-body-font-color, var(--black-600));
7420
+ }
7421
+ @media (prefers-color-scheme: dark) {
7422
+ body.theme-system,
7423
+ body.theme-highcontrast.theme-system,
7424
+ body:not(.theme-highcontrast).theme-system {
7425
+ --bg-error: var(--red-400);
7426
+ --bg-danger: var(--red-400);
7427
+ --bg-success: var(--green-400);
7428
+ --bg-warning: var(--yellow-500);
7429
+ --bc-error: var(--red-400);
7430
+ --bc-danger: var(--red-400);
7431
+ --bc-success: var(--green-400);
7432
+ --bc-warning: var(--yellow-500);
7433
+ --fc-light: var(--black-400);
7434
+ --fc-medium: var(--black-500);
7435
+ --fc-dark: var(--black-600);
7436
+ --fc-error: var(--red-400);
7437
+ --fc-danger: var(--red-400);
7438
+ --fc-success: var(--green-400);
7439
+ --fc-warning: var(--yellow-500);
7440
+ }
7660
7441
  }
7661
7442
  body:not(.theme-highcontrast):not(.theme-dark),
7662
7443
  body:not(.theme-highcontrast).theme-dark .theme-light__forced,
@@ -7674,23 +7455,23 @@ body:not(.theme-highcontrast).theme-system .theme-light__forced .themed {
7674
7455
  --black-200: hsl(210, 8%, 90%);
7675
7456
  --black-225: hsl(210, 8%, 85%);
7676
7457
  --black-250: hsl(210, 8%, 80%);
7677
- --black-300: hsl(213, 9%, 75%);
7678
- --black-350: hsl(212, 8%, 68%);
7679
- --black-400: hsl(210, 8%, 45%);
7458
+ --black-300: hsl(210, 9%, 75%);
7459
+ --black-350: hsl(210, 8%, 68%);
7460
+ --black-400: hsl(210, 8%, 42%);
7680
7461
  --black-500: hsl(210, 8%, 25%);
7681
7462
  --black-600: hsl(210, 8%, 5%);
7682
- --black: hsl(0, 8%, 5%);
7463
+ --black: hsl(0, 0%, 0%);
7683
7464
  --orange-100: hsl(23, 85%, 97%);
7684
7465
  --orange-200: hsl(27, 85%, 87%);
7685
7466
  --orange-300: hsl(27, 85%, 72%);
7686
- --orange-400: hsl(27, 90%, 55%);
7687
- --orange-500: hsl(27, 88%, 43%);
7467
+ --orange-400: hsl(27, 80%, 52%);
7468
+ --orange-500: hsl(27, 80%, 43%);
7688
7469
  --orange-600: hsl(27, 80%, 29%);
7689
7470
  --blue-100: hsl(210, 80%, 96%);
7690
7471
  --blue-200: hsl(210, 80%, 91%);
7691
7472
  --blue-300: hsl(210, 78%, 76%);
7692
- --blue-400: hsl(210, 70%, 48%);
7693
- --blue-500: hsl(210, 75%, 36%);
7473
+ --blue-400: hsl(210, 77%, 46%);
7474
+ --blue-500: hsl(210, 77%, 36%);
7694
7475
  --blue-600: hsl(210, 80%, 23%);
7695
7476
  --green-100: hsl(148, 35%, 95%);
7696
7477
  --green-200: hsl(148, 35%, 88%);
@@ -7698,7 +7479,7 @@ body:not(.theme-highcontrast).theme-system .theme-light__forced .themed {
7698
7479
  --green-400: hsl(148, 70%, 31%);
7699
7480
  --green-500: hsl(148, 75%, 22%);
7700
7481
  --green-600: hsl(148, 75%, 15%);
7701
- --red-100: hsl(0, 78%, 96%);
7482
+ --red-100: hsl(0, 72%, 96%);
7702
7483
  --red-200: hsl(0, 70%, 93%);
7703
7484
  --red-300: hsl(0, 65%, 76%);
7704
7485
  --red-400: hsl(0, 60%, 49%);
@@ -7710,6 +7491,12 @@ body:not(.theme-highcontrast).theme-system .theme-light__forced .themed {
7710
7491
  --yellow-400: hsl(43, 85%, 50%);
7711
7492
  --yellow-500: hsl(43, 85%, 33%);
7712
7493
  --yellow-600: hsl(43, 84%, 18%);
7494
+ --purple-100: hsl(237, 80%, 96%);
7495
+ --purple-200: hsl(237, 77%, 92%);
7496
+ --purple-300: hsl(237, 60%, 83%);
7497
+ --purple-400: hsl(237, 55%, 57%);
7498
+ --purple-500: hsl(237, 50%, 45%);
7499
+ --purple-600: hsl(237, 50%, 32%);
7713
7500
  --gold-100: hsl(46, 100%, 91%);
7714
7501
  --gold-200: hsl(46, 100%, 74%);
7715
7502
  --gold-300: hsl(45, 100%, 42%);
@@ -7739,7 +7526,7 @@ body:not(.theme-highcontrast).theme-system .theme-light__forced .themed {
7739
7526
  --focus-ring-muted: hsla(210, 8%, 15%, 0.1);
7740
7527
  --highlight-addition: var(--green-500);
7741
7528
  --highlight-attribute: hsl(206, 98.5%, 29%);
7742
- --highlight-bg: var(--black-100);
7529
+ --highlight-bg: hsl(0, 0%, 96.5%);
7743
7530
  --highlight-color: var(--black-600);
7744
7531
  --highlight-comment: hsl(210, 8%, 43.5%);
7745
7532
  --highlight-deletion: var(--red-500);
@@ -7779,6 +7566,7 @@ body:not(.theme-highcontrast).theme-system .theme-light__forced .themed {
7779
7566
  --theme-secondary-custom-600: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(5%, calc(var(--theme-base-secondary-color-l) + -26 * 1%), 40%));
7780
7567
  --theme-secondary-custom: var(--theme-secondary-custom-400);
7781
7568
  --theme-secondary-custom-focus-ring: hsla(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), var(--theme-base-secondary-color-l), 0.15);
7569
+ color: var(--theme-body-font-color, var(--black-600));
7782
7570
  }
7783
7571
  body:not(.theme-highcontrast).theme-dark,
7784
7572
  body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced,
@@ -7786,49 +7574,55 @@ body:not(.theme-highcontrast).theme-dark.themed,
7786
7574
  body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced.themed,
7787
7575
  body:not(.theme-highcontrast).theme-dark .themed,
7788
7576
  body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
7789
- --white: hsl(220, 3%, 15%);
7790
- --black-050: hsl(220, 3%, 15%);
7791
- --black-100: hsl(220, 3%, 18%);
7792
- --black-150: hsl(230, 4%, 21%);
7793
- --black-200: hsl(233, 4%, 27%);
7794
- --black-225: hsl(233, 4%, 30%);
7795
- --black-250: hsl(235, 5%, 36%);
7796
- --black-300: hsl(233, 4%, 47%);
7797
- --black-350: hsl(219, 10%, 60%);
7798
- --black-400: hsl(220, 10%, 74%);
7799
- --black-500: hsl(220, 10%, 83%);
7800
- --black-600: hsl(180, 11%, 98%);
7577
+ --white: hsl(210, 3%, 15%);
7578
+ --black-050: hsl(210, 3%, 15%);
7579
+ --black-100: hsl(210, 3%, 18%);
7580
+ --black-150: hsl(210, 4%, 21%);
7581
+ --black-200: hsl(210, 4%, 27%);
7582
+ --black-225: hsl(210, 4%, 30%);
7583
+ --black-250: hsl(210, 5%, 36%);
7584
+ --black-300: hsl(210, 4%, 47%);
7585
+ --black-350: hsl(210, 8%, 70%);
7586
+ --black-400: hsl(210, 8%, 80%);
7587
+ --black-500: hsl(210, 8%, 90%);
7588
+ --black-600: hsl(210, 11%, 98%);
7801
7589
  --black: hsl(0, 0%, 100%);
7802
7590
  --orange-100: hsl(27, 29%, 19%);
7803
7591
  --orange-200: hsl(27, 43%, 31%);
7804
7592
  --orange-300: hsl(27, 43%, 47%);
7805
- --orange-400: hsl(27, 80%, 64%);
7806
- --orange-500: hsl(27, 80%, 78%);
7807
- --orange-600: hsl(27, 80%, 89%);
7593
+ --orange-400: hsl(27, 80%, 80%);
7594
+ --orange-500: hsl(27, 80%, 88%);
7595
+ --orange-600: hsl(27, 80%, 93%);
7808
7596
  --blue-100: hsl(209, 29%, 19%);
7809
7597
  --blue-200: hsl(210, 29%, 35%);
7810
7598
  --blue-300: hsl(210, 29%, 50%);
7811
- --blue-400: hsl(210, 81%, 72%);
7812
- --blue-500: hsl(210, 80%, 82%);
7813
- --blue-600: hsl(210, 80%, 90%);
7599
+ --blue-400: hsl(210, 80%, 80%);
7600
+ --blue-500: hsl(210, 80%, 88%);
7601
+ --blue-600: hsl(210, 80%, 93%);
7814
7602
  --green-100: hsl(148, 29%, 19%);
7815
7603
  --green-200: hsl(148, 29%, 27%);
7816
7604
  --green-300: hsl(148, 25%, 40%);
7817
- --green-400: hsl(148, 40%, 62%);
7818
- --green-500: hsl(148, 40%, 75%);
7819
- --green-600: hsl(148, 40%, 87%);
7605
+ --green-400: hsl(148, 40%, 75%);
7606
+ --green-500: hsl(148, 40%, 85%);
7607
+ --green-600: hsl(148, 40%, 93%);
7820
7608
  --red-100: hsl(358, 29%, 19%);
7821
7609
  --red-200: hsl(0, 29%, 37%);
7822
7610
  --red-300: hsl(0, 34%, 54%);
7823
- --red-400: hsl(0, 75%, 77%);
7824
- --red-500: hsl(0, 69%, 85%);
7825
- --red-600: hsl(0, 69%, 93%);
7611
+ --red-400: hsl(0, 73%, 85%);
7612
+ --red-500: hsl(0, 73%, 91%);
7613
+ --red-600: hsl(0, 73%, 95%);
7826
7614
  --yellow-100: hsl(43, 29%, 17%);
7827
7615
  --yellow-200: hsl(43, 29%, 25%);
7828
7616
  --yellow-300: hsl(43, 29%, 40%);
7829
- --yellow-400: hsl(43, 59%, 64%);
7830
- --yellow-500: hsl(43, 65%, 70%);
7831
- --yellow-600: hsl(43, 65%, 85%);
7617
+ --yellow-400: hsl(43, 75%, 75%);
7618
+ --yellow-500: hsl(43, 75%, 85%);
7619
+ --yellow-600: hsl(43, 75%, 91%);
7620
+ --purple-100: hsl(237, 25%, 24%);
7621
+ --purple-200: hsl(237, 27%, 38%);
7622
+ --purple-300: hsl(237, 32%, 56%);
7623
+ --purple-400: hsl(237, 58%, 86%);
7624
+ --purple-500: hsl(237, 60%, 91%);
7625
+ --purple-600: hsl(237, 65%, 96%);
7832
7626
  --gold-100: hsl(45, 29%, 24%);
7833
7627
  --gold-200: hsl(45, 47%, 37%);
7834
7628
  --gold-300: hsl(45, 92%, 62%);
@@ -7857,12 +7651,12 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
7857
7651
  --focus-ring-error: hsla(358, 62%, 47%, 0.15);
7858
7652
  --focus-ring-muted: hsla(210, 8%, 15%, 0.1);
7859
7653
  --highlight-addition: var(--green-500);
7860
- --highlight-attribute: hsl(207, 41.5%, 67%);
7654
+ --highlight-attribute: var(--blue-400);
7861
7655
  --highlight-bg: hsl(0, 2%, 11%);
7862
7656
  --highlight-color: var(--black);
7863
7657
  --highlight-comment: hsl(0, 0%, 60%);
7864
7658
  --highlight-deletion: var(--red-500);
7865
- --highlight-keyword: hsl(208, 41.5%, 67%);
7659
+ --highlight-keyword: var(--blue-400);
7866
7660
  --highlight-literal: hsl(27, 85%, 61.5%);
7867
7661
  --highlight-namespace: hsl(27, 85%, 61.5%);
7868
7662
  --highlight-punctuation: hsl(0, 0%, 80%);
@@ -7898,54 +7692,61 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
7898
7692
  --theme-dark-secondary-custom-600: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + 0 * 1%), clamp(85%, calc(var(--theme-dark-secondary-color-l) + 20 * 1%), 95%));
7899
7693
  --theme-dark-secondary-custom: var(--theme-dark-secondary-custom-400);
7900
7694
  --theme-dark-secondary-custom-focus-ring: hsla(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), var(--theme-dark-secondary-color-l), 0.25);
7695
+ color: var(--theme-body-font-color, var(--black-600));
7901
7696
  }
7902
7697
  @media (prefers-color-scheme: dark) {
7903
7698
  body:not(.theme-highcontrast).theme-system,
7904
7699
  body:not(.theme-highcontrast).theme-system.themed,
7905
7700
  body:not(.theme-highcontrast).theme-system .themed {
7906
- --white: hsl(220, 3%, 15%);
7907
- --black-050: hsl(220, 3%, 15%);
7908
- --black-100: hsl(220, 3%, 18%);
7909
- --black-150: hsl(230, 4%, 21%);
7910
- --black-200: hsl(233, 4%, 27%);
7911
- --black-225: hsl(233, 4%, 30%);
7912
- --black-250: hsl(235, 5%, 36%);
7913
- --black-300: hsl(233, 4%, 47%);
7914
- --black-350: hsl(219, 10%, 60%);
7915
- --black-400: hsl(220, 10%, 74%);
7916
- --black-500: hsl(220, 10%, 83%);
7917
- --black-600: hsl(180, 11%, 98%);
7701
+ --white: hsl(210, 3%, 15%);
7702
+ --black-050: hsl(210, 3%, 15%);
7703
+ --black-100: hsl(210, 3%, 18%);
7704
+ --black-150: hsl(210, 4%, 21%);
7705
+ --black-200: hsl(210, 4%, 27%);
7706
+ --black-225: hsl(210, 4%, 30%);
7707
+ --black-250: hsl(210, 5%, 36%);
7708
+ --black-300: hsl(210, 4%, 47%);
7709
+ --black-350: hsl(210, 8%, 70%);
7710
+ --black-400: hsl(210, 8%, 80%);
7711
+ --black-500: hsl(210, 8%, 90%);
7712
+ --black-600: hsl(210, 11%, 98%);
7918
7713
  --black: hsl(0, 0%, 100%);
7919
7714
  --orange-100: hsl(27, 29%, 19%);
7920
7715
  --orange-200: hsl(27, 43%, 31%);
7921
7716
  --orange-300: hsl(27, 43%, 47%);
7922
- --orange-400: hsl(27, 80%, 64%);
7923
- --orange-500: hsl(27, 80%, 78%);
7924
- --orange-600: hsl(27, 80%, 89%);
7717
+ --orange-400: hsl(27, 80%, 80%);
7718
+ --orange-500: hsl(27, 80%, 88%);
7719
+ --orange-600: hsl(27, 80%, 93%);
7925
7720
  --blue-100: hsl(209, 29%, 19%);
7926
7721
  --blue-200: hsl(210, 29%, 35%);
7927
7722
  --blue-300: hsl(210, 29%, 50%);
7928
- --blue-400: hsl(210, 81%, 72%);
7929
- --blue-500: hsl(210, 80%, 82%);
7930
- --blue-600: hsl(210, 80%, 90%);
7723
+ --blue-400: hsl(210, 80%, 80%);
7724
+ --blue-500: hsl(210, 80%, 88%);
7725
+ --blue-600: hsl(210, 80%, 93%);
7931
7726
  --green-100: hsl(148, 29%, 19%);
7932
7727
  --green-200: hsl(148, 29%, 27%);
7933
7728
  --green-300: hsl(148, 25%, 40%);
7934
- --green-400: hsl(148, 40%, 62%);
7935
- --green-500: hsl(148, 40%, 75%);
7936
- --green-600: hsl(148, 40%, 87%);
7729
+ --green-400: hsl(148, 40%, 75%);
7730
+ --green-500: hsl(148, 40%, 85%);
7731
+ --green-600: hsl(148, 40%, 93%);
7937
7732
  --red-100: hsl(358, 29%, 19%);
7938
7733
  --red-200: hsl(0, 29%, 37%);
7939
7734
  --red-300: hsl(0, 34%, 54%);
7940
- --red-400: hsl(0, 75%, 77%);
7941
- --red-500: hsl(0, 69%, 85%);
7942
- --red-600: hsl(0, 69%, 93%);
7735
+ --red-400: hsl(0, 73%, 85%);
7736
+ --red-500: hsl(0, 73%, 91%);
7737
+ --red-600: hsl(0, 73%, 95%);
7943
7738
  --yellow-100: hsl(43, 29%, 17%);
7944
7739
  --yellow-200: hsl(43, 29%, 25%);
7945
7740
  --yellow-300: hsl(43, 29%, 40%);
7946
- --yellow-400: hsl(43, 59%, 64%);
7947
- --yellow-500: hsl(43, 65%, 70%);
7948
- --yellow-600: hsl(43, 65%, 85%);
7741
+ --yellow-400: hsl(43, 75%, 75%);
7742
+ --yellow-500: hsl(43, 75%, 85%);
7743
+ --yellow-600: hsl(43, 75%, 91%);
7744
+ --purple-100: hsl(237, 25%, 24%);
7745
+ --purple-200: hsl(237, 27%, 38%);
7746
+ --purple-300: hsl(237, 32%, 56%);
7747
+ --purple-400: hsl(237, 58%, 86%);
7748
+ --purple-500: hsl(237, 60%, 91%);
7749
+ --purple-600: hsl(237, 65%, 96%);
7949
7750
  --gold-100: hsl(45, 29%, 24%);
7950
7751
  --gold-200: hsl(45, 47%, 37%);
7951
7752
  --gold-300: hsl(45, 92%, 62%);
@@ -7974,12 +7775,12 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
7974
7775
  --focus-ring-error: hsla(358, 62%, 47%, 0.15);
7975
7776
  --focus-ring-muted: hsla(210, 8%, 15%, 0.1);
7976
7777
  --highlight-addition: var(--green-500);
7977
- --highlight-attribute: hsl(207, 41.5%, 67%);
7778
+ --highlight-attribute: var(--blue-400);
7978
7779
  --highlight-bg: hsl(0, 2%, 11%);
7979
7780
  --highlight-color: var(--black);
7980
7781
  --highlight-comment: hsl(0, 0%, 60%);
7981
7782
  --highlight-deletion: var(--red-500);
7982
- --highlight-keyword: hsl(208, 41.5%, 67%);
7783
+ --highlight-keyword: var(--blue-400);
7983
7784
  --highlight-literal: hsl(27, 85%, 61.5%);
7984
7785
  --highlight-namespace: hsl(27, 85%, 61.5%);
7985
7786
  --highlight-punctuation: hsl(0, 0%, 80%);
@@ -8015,6 +7816,7 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
8015
7816
  --theme-dark-secondary-custom-600: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + 0 * 1%), clamp(85%, calc(var(--theme-dark-secondary-color-l) + 20 * 1%), 95%));
8016
7817
  --theme-dark-secondary-custom: var(--theme-dark-secondary-custom-400);
8017
7818
  --theme-dark-secondary-custom-focus-ring: hsla(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), var(--theme-dark-secondary-color-l), 0.25);
7819
+ color: var(--theme-body-font-color, var(--black-600));
8018
7820
  }
8019
7821
  }
8020
7822
  body.theme-highcontrast:not(.theme-dark),
@@ -8027,34 +7829,34 @@ body.theme-highcontrast.theme-system .theme-light__forced {
8027
7829
  --black-200: hsl(210, 8%, 90%);
8028
7830
  --black-225: hsl(210, 8%, 85%);
8029
7831
  --black-250: hsl(210, 8%, 80%);
8030
- --black-300: hsl(213, 9%, 75%);
7832
+ --black-300: hsl(210, 9%, 75%);
8031
7833
  --black-350: hsl(210, 8%, 45%);
8032
- --black-400: hsl(210, 8%, 45%);
7834
+ --black-400: hsl(212, 8%, 35%);
8033
7835
  --black-500: hsl(210, 8%, 25%);
8034
7836
  --black-600: hsl(210, 8%, 5%);
8035
- --black: hsl(0, 8%, 5%);
7837
+ --black: hsl(0, 0%, 0%);
8036
7838
  --orange-100: hsl(22, 85%, 97%);
8037
7839
  --orange-200: hsl(22, 85%, 97%);
8038
7840
  --orange-300: hsl(27, 90%, 55%);
8039
7841
  --orange-400: hsl(27, 90%, 55%);
8040
- --orange-500: hsl(27, 80%, 29%);
8041
- --orange-600: hsl(27, 80%, 29%);
7842
+ --orange-500: hsl(27, 80%, 28%);
7843
+ --orange-600: hsl(27, 80%, 28%);
8042
7844
  --blue-100: hsl(210, 80%, 96%);
8043
7845
  --blue-200: hsl(210, 80%, 96%);
8044
7846
  --blue-300: hsl(210, 70%, 48%);
8045
- --blue-400: hsl(210, 70%, 48%);
7847
+ --blue-400: hsl(210, 77%, 34%);
8046
7848
  --blue-500: hsl(210, 80%, 23%);
8047
7849
  --blue-600: hsl(210, 80%, 23%);
8048
7850
  --green-100: hsl(147, 36%, 95%);
8049
7851
  --green-200: hsl(147, 36%, 95%);
8050
7852
  --green-300: hsl(148, 70%, 31%);
8051
- --green-400: hsl(148, 70%, 31%);
7853
+ --green-400: hsl(148, 75%, 22%);
8052
7854
  --green-500: hsl(147, 74%, 15%);
8053
7855
  --green-600: hsl(147, 74%, 15%);
8054
7856
  --red-100: hsl(0, 79%, 96%);
8055
7857
  --red-200: hsl(0, 79%, 96%);
8056
7858
  --red-300: hsl(0, 60%, 49%);
8057
- --red-400: hsl(0, 60%, 49%);
7859
+ --red-400: hsl(0, 65%, 37%);
8058
7860
  --red-500: hsl(0, 66%, 24%);
8059
7861
  --red-600: hsl(0, 66%, 24%);
8060
7862
  --yellow-100: hsl(41, 80%, 96%);
@@ -8063,12 +7865,18 @@ body.theme-highcontrast.theme-system .theme-light__forced {
8063
7865
  --yellow-400: hsl(43, 85%, 50%);
8064
7866
  --yellow-500: hsl(48, 85%, 18%);
8065
7867
  --yellow-600: hsl(48, 85%, 18%);
7868
+ --purple-100: hsl(237, 80%, 96%);
7869
+ --purple-200: hsl(237, 80%, 96%);
7870
+ --purple-300: hsl(237, 55%, 57%);
7871
+ --purple-400: hsl(237, 55%, 57%);
7872
+ --purple-500: hsl(237, 50%, 32%);
7873
+ --purple-600: hsl(237, 50%, 32%);
8066
7874
  --gold-100: hsl(46, 100%, 91%);
8067
7875
  --gold-200: hsl(46, 100%, 91%);
8068
7876
  --gold-300: hsl(45, 100%, 42%);
8069
7877
  --gold-400: hsl(46, 92%, 26%);
8070
7878
  --silver-100: hsl(0, 0%, 95%);
8071
- --silver-200: hsl(0, 0%, 84%);
7879
+ --silver-200: hsl(0, 0%, 95%);
8072
7880
  --silver-300: hsl(210, 5%, 68%);
8073
7881
  --silver-400: hsl(216, 2%, 40%);
8074
7882
  --bronze-100: hsl(28, 40%, 92%);
@@ -8122,48 +7930,54 @@ body.theme-highcontrast.theme-system .theme-light__forced {
8122
7930
  body.theme-highcontrast.theme-dark,
8123
7931
  body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
8124
7932
  --white: hsl(0, 0%, 0%);
8125
- --black-050: hsl(220, 3%, 15%);
8126
- --black-100: hsl(220, 3%, 18%);
8127
- --black-150: hsl(230, 4%, 21%);
8128
- --black-200: hsl(233, 4%, 27%);
8129
- --black-225: hsl(233, 4%, 30%);
8130
- --black-250: hsl(235, 5%, 36%);
8131
- --black-300: hsl(233, 4%, 47%);
8132
- --black-350: hsl(220, 10%, 74%);
8133
- --black-400: hsl(220, 10%, 74%);
8134
- --black-500: hsl(220, 10%, 83%);
8135
- --black-600: hsl(180, 11%, 98%);
7933
+ --black-050: hsl(210, 3%, 15%);
7934
+ --black-100: hsl(210, 3%, 18%);
7935
+ --black-150: hsl(210, 4%, 21%);
7936
+ --black-200: hsl(210, 4%, 27%);
7937
+ --black-225: hsl(210, 4%, 30%);
7938
+ --black-250: hsl(210, 5%, 36%);
7939
+ --black-300: hsl(210, 4%, 47%);
7940
+ --black-350: hsl(210, 10%, 74%);
7941
+ --black-400: hsl(210, 8%, 80%);
7942
+ --black-500: hsl(210, 8%, 90%);
7943
+ --black-600: hsl(210, 11%, 98%);
8136
7944
  --black: hsl(0, 0%, 100%);
8137
7945
  --orange-100: hsl(27, 29%, 19%);
8138
7946
  --orange-200: hsl(27, 29%, 19%);
8139
7947
  --orange-300: hsl(27, 80%, 64%);
8140
- --orange-400: hsl(27, 80%, 64%);
7948
+ --orange-400: hsl(27, 80%, 80%);
8141
7949
  --orange-500: hsl(27, 79%, 89%);
8142
- --orange-600: hsl(27, 79%, 89%);
7950
+ --orange-600: hsl(27, 80%, 93%);
8143
7951
  --blue-100: hsl(209, 29%, 19%);
8144
7952
  --blue-200: hsl(209, 29%, 19%);
8145
7953
  --blue-300: hsl(210, 80%, 72%);
8146
- --blue-400: hsl(210, 80%, 72%);
7954
+ --blue-400: hsl(210, 80%, 80%);
8147
7955
  --blue-500: hsl(209, 79%, 87%);
8148
- --blue-600: hsl(209, 79%, 87%);
7956
+ --blue-600: hsl(210, 80%, 93%);
8149
7957
  --green-100: hsl(147, 29%, 19%);
8150
7958
  --green-200: hsl(147, 29%, 19%);
8151
7959
  --green-300: hsl(148, 40%, 62%);
8152
- --green-400: hsl(148, 40%, 62%);
7960
+ --green-400: hsl(148, 40%, 75%);
8153
7961
  --green-500: hsl(148, 39%, 87%);
8154
- --green-600: hsl(148, 39%, 87%);
7962
+ --green-600: hsl(148, 40%, 93%);
8155
7963
  --red-100: hsl(358, 29%, 19%);
8156
7964
  --red-200: hsl(358, 29%, 19%);
8157
7965
  --red-300: hsl(0, 75%, 77%);
8158
- --red-400: hsl(0, 75%, 77%);
7966
+ --red-400: hsl(0, 73%, 85%);
8159
7967
  --red-500: hsl(0, 70%, 92%);
8160
- --red-600: hsl(0, 70%, 92%);
7968
+ --red-600: hsl(0, 73%, 95%);
8161
7969
  --yellow-100: hsl(43, 29%, 17%);
8162
7970
  --yellow-200: hsl(43, 29%, 17%);
8163
7971
  --yellow-300: hsl(43, 59%, 64%);
8164
- --yellow-400: hsl(43, 59%, 64%);
7972
+ --yellow-400: hsl(43, 75%, 75%);
8165
7973
  --yellow-500: hsl(48, 74%, 91%);
8166
- --yellow-600: hsl(48, 74%, 91%);
7974
+ --yellow-600: hsl(43, 75%, 91%);
7975
+ --purple-100: hsl(237, 25%, 24%);
7976
+ --purple-200: hsl(237, 25%, 24%);
7977
+ --purple-300: hsl(237, 58%, 86%);
7978
+ --purple-400: hsl(237, 58%, 86%);
7979
+ --purple-500: hsl(237, 65%, 96%);
7980
+ --purple-600: hsl(237, 65%, 96%);
8167
7981
  --gold-100: hsl(45, 22%, 25%);
8168
7982
  --gold-200: hsl(45, 22%, 25%);
8169
7983
  --gold-300: hsl(45, 92%, 62%);
@@ -8223,48 +8037,54 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
8223
8037
  @media (prefers-color-scheme: dark) {
8224
8038
  body.theme-highcontrast.theme-system {
8225
8039
  --white: hsl(0, 0%, 0%);
8226
- --black-050: hsl(220, 3%, 15%);
8227
- --black-100: hsl(220, 3%, 18%);
8228
- --black-150: hsl(230, 4%, 21%);
8229
- --black-200: hsl(233, 4%, 27%);
8230
- --black-225: hsl(233, 4%, 30%);
8231
- --black-250: hsl(235, 5%, 36%);
8232
- --black-300: hsl(233, 4%, 47%);
8233
- --black-350: hsl(220, 10%, 74%);
8234
- --black-400: hsl(220, 10%, 74%);
8235
- --black-500: hsl(220, 10%, 83%);
8236
- --black-600: hsl(180, 11%, 98%);
8040
+ --black-050: hsl(210, 3%, 15%);
8041
+ --black-100: hsl(210, 3%, 18%);
8042
+ --black-150: hsl(210, 4%, 21%);
8043
+ --black-200: hsl(210, 4%, 27%);
8044
+ --black-225: hsl(210, 4%, 30%);
8045
+ --black-250: hsl(210, 5%, 36%);
8046
+ --black-300: hsl(210, 4%, 47%);
8047
+ --black-350: hsl(210, 10%, 74%);
8048
+ --black-400: hsl(210, 8%, 80%);
8049
+ --black-500: hsl(210, 8%, 90%);
8050
+ --black-600: hsl(210, 11%, 98%);
8237
8051
  --black: hsl(0, 0%, 100%);
8238
8052
  --orange-100: hsl(27, 29%, 19%);
8239
8053
  --orange-200: hsl(27, 29%, 19%);
8240
8054
  --orange-300: hsl(27, 80%, 64%);
8241
- --orange-400: hsl(27, 80%, 64%);
8055
+ --orange-400: hsl(27, 80%, 80%);
8242
8056
  --orange-500: hsl(27, 79%, 89%);
8243
- --orange-600: hsl(27, 79%, 89%);
8057
+ --orange-600: hsl(27, 80%, 93%);
8244
8058
  --blue-100: hsl(209, 29%, 19%);
8245
8059
  --blue-200: hsl(209, 29%, 19%);
8246
8060
  --blue-300: hsl(210, 80%, 72%);
8247
- --blue-400: hsl(210, 80%, 72%);
8061
+ --blue-400: hsl(210, 80%, 80%);
8248
8062
  --blue-500: hsl(209, 79%, 87%);
8249
- --blue-600: hsl(209, 79%, 87%);
8063
+ --blue-600: hsl(210, 80%, 93%);
8250
8064
  --green-100: hsl(147, 29%, 19%);
8251
8065
  --green-200: hsl(147, 29%, 19%);
8252
8066
  --green-300: hsl(148, 40%, 62%);
8253
- --green-400: hsl(148, 40%, 62%);
8067
+ --green-400: hsl(148, 40%, 75%);
8254
8068
  --green-500: hsl(148, 39%, 87%);
8255
- --green-600: hsl(148, 39%, 87%);
8069
+ --green-600: hsl(148, 40%, 93%);
8256
8070
  --red-100: hsl(358, 29%, 19%);
8257
8071
  --red-200: hsl(358, 29%, 19%);
8258
8072
  --red-300: hsl(0, 75%, 77%);
8259
- --red-400: hsl(0, 75%, 77%);
8073
+ --red-400: hsl(0, 73%, 85%);
8260
8074
  --red-500: hsl(0, 70%, 92%);
8261
- --red-600: hsl(0, 70%, 92%);
8075
+ --red-600: hsl(0, 73%, 95%);
8262
8076
  --yellow-100: hsl(43, 29%, 17%);
8263
8077
  --yellow-200: hsl(43, 29%, 17%);
8264
8078
  --yellow-300: hsl(43, 59%, 64%);
8265
- --yellow-400: hsl(43, 59%, 64%);
8079
+ --yellow-400: hsl(43, 75%, 75%);
8266
8080
  --yellow-500: hsl(48, 74%, 91%);
8267
- --yellow-600: hsl(48, 74%, 91%);
8081
+ --yellow-600: hsl(43, 75%, 91%);
8082
+ --purple-100: hsl(237, 25%, 24%);
8083
+ --purple-200: hsl(237, 25%, 24%);
8084
+ --purple-300: hsl(237, 58%, 86%);
8085
+ --purple-400: hsl(237, 58%, 86%);
8086
+ --purple-500: hsl(237, 65%, 96%);
8087
+ --purple-600: hsl(237, 65%, 96%);
8268
8088
  --gold-100: hsl(45, 22%, 25%);
8269
8089
  --gold-200: hsl(45, 22%, 25%);
8270
8090
  --gold-300: hsl(45, 92%, 62%);
@@ -13304,6 +13124,114 @@ body.theme-system .theme-dark__forced .d\:bg-theme-secondary-legacy-025 {
13304
13124
  .f\:fc-yellow-600:focus-within {
13305
13125
  color: var(--yellow-600) !important;
13306
13126
  }
13127
+ .bg-purple-100,
13128
+ .h\:bg-purple-100:hover,
13129
+ .f\:bg-purple-100:focus,
13130
+ .f\:bg-purple-100:focus-within {
13131
+ background-color: var(--purple-100) !important;
13132
+ }
13133
+ .bc-purple-100,
13134
+ .h\:bc-purple-100:hover,
13135
+ .f\:bc-purple-100:focus,
13136
+ .f\:bc-purple-100:focus-within {
13137
+ border-color: var(--purple-100) !important;
13138
+ }
13139
+ .fc-purple-100,
13140
+ .h\:fc-purple-100:hover,
13141
+ .f\:fc-purple-100:focus,
13142
+ .f\:fc-purple-100:focus-within {
13143
+ color: var(--purple-100) !important;
13144
+ }
13145
+ .bg-purple-200,
13146
+ .h\:bg-purple-200:hover,
13147
+ .f\:bg-purple-200:focus,
13148
+ .f\:bg-purple-200:focus-within {
13149
+ background-color: var(--purple-200) !important;
13150
+ }
13151
+ .bc-purple-200,
13152
+ .h\:bc-purple-200:hover,
13153
+ .f\:bc-purple-200:focus,
13154
+ .f\:bc-purple-200:focus-within {
13155
+ border-color: var(--purple-200) !important;
13156
+ }
13157
+ .fc-purple-200,
13158
+ .h\:fc-purple-200:hover,
13159
+ .f\:fc-purple-200:focus,
13160
+ .f\:fc-purple-200:focus-within {
13161
+ color: var(--purple-200) !important;
13162
+ }
13163
+ .bg-purple-300,
13164
+ .h\:bg-purple-300:hover,
13165
+ .f\:bg-purple-300:focus,
13166
+ .f\:bg-purple-300:focus-within {
13167
+ background-color: var(--purple-300) !important;
13168
+ }
13169
+ .bc-purple-300,
13170
+ .h\:bc-purple-300:hover,
13171
+ .f\:bc-purple-300:focus,
13172
+ .f\:bc-purple-300:focus-within {
13173
+ border-color: var(--purple-300) !important;
13174
+ }
13175
+ .fc-purple-300,
13176
+ .h\:fc-purple-300:hover,
13177
+ .f\:fc-purple-300:focus,
13178
+ .f\:fc-purple-300:focus-within {
13179
+ color: var(--purple-300) !important;
13180
+ }
13181
+ .bg-purple-400,
13182
+ .h\:bg-purple-400:hover,
13183
+ .f\:bg-purple-400:focus,
13184
+ .f\:bg-purple-400:focus-within {
13185
+ background-color: var(--purple-400) !important;
13186
+ }
13187
+ .bc-purple-400,
13188
+ .h\:bc-purple-400:hover,
13189
+ .f\:bc-purple-400:focus,
13190
+ .f\:bc-purple-400:focus-within {
13191
+ border-color: var(--purple-400) !important;
13192
+ }
13193
+ .fc-purple-400,
13194
+ .h\:fc-purple-400:hover,
13195
+ .f\:fc-purple-400:focus,
13196
+ .f\:fc-purple-400:focus-within {
13197
+ color: var(--purple-400) !important;
13198
+ }
13199
+ .bg-purple-500,
13200
+ .h\:bg-purple-500:hover,
13201
+ .f\:bg-purple-500:focus,
13202
+ .f\:bg-purple-500:focus-within {
13203
+ background-color: var(--purple-500) !important;
13204
+ }
13205
+ .bc-purple-500,
13206
+ .h\:bc-purple-500:hover,
13207
+ .f\:bc-purple-500:focus,
13208
+ .f\:bc-purple-500:focus-within {
13209
+ border-color: var(--purple-500) !important;
13210
+ }
13211
+ .fc-purple-500,
13212
+ .h\:fc-purple-500:hover,
13213
+ .f\:fc-purple-500:focus,
13214
+ .f\:fc-purple-500:focus-within {
13215
+ color: var(--purple-500) !important;
13216
+ }
13217
+ .bg-purple-600,
13218
+ .h\:bg-purple-600:hover,
13219
+ .f\:bg-purple-600:focus,
13220
+ .f\:bg-purple-600:focus-within {
13221
+ background-color: var(--purple-600) !important;
13222
+ }
13223
+ .bc-purple-600,
13224
+ .h\:bc-purple-600:hover,
13225
+ .f\:bc-purple-600:focus,
13226
+ .f\:bc-purple-600:focus-within {
13227
+ border-color: var(--purple-600) !important;
13228
+ }
13229
+ .fc-purple-600,
13230
+ .h\:fc-purple-600:hover,
13231
+ .f\:fc-purple-600:focus,
13232
+ .f\:fc-purple-600:focus-within {
13233
+ color: var(--purple-600) !important;
13234
+ }
13307
13235
  .bg-gold-100,
13308
13236
  .h\:bg-gold-100:hover,
13309
13237
  .f\:bg-gold-100:focus,
@@ -14145,6 +14073,42 @@ body.theme-system .theme-dark__forced .d\:bg-theme-secondary-legacy-025 {
14145
14073
  body.theme-system .d\:fc-yellow-600 {
14146
14074
  color: var(--yellow-600) !important;
14147
14075
  }
14076
+ body.theme-system .d\:bg-purple-100 {
14077
+ background-color: var(--purple-100) !important;
14078
+ }
14079
+ body.theme-system .d\:fc-purple-100 {
14080
+ color: var(--purple-100) !important;
14081
+ }
14082
+ body.theme-system .d\:bg-purple-200 {
14083
+ background-color: var(--purple-200) !important;
14084
+ }
14085
+ body.theme-system .d\:fc-purple-200 {
14086
+ color: var(--purple-200) !important;
14087
+ }
14088
+ body.theme-system .d\:bg-purple-300 {
14089
+ background-color: var(--purple-300) !important;
14090
+ }
14091
+ body.theme-system .d\:fc-purple-300 {
14092
+ color: var(--purple-300) !important;
14093
+ }
14094
+ body.theme-system .d\:bg-purple-400 {
14095
+ background-color: var(--purple-400) !important;
14096
+ }
14097
+ body.theme-system .d\:fc-purple-400 {
14098
+ color: var(--purple-400) !important;
14099
+ }
14100
+ body.theme-system .d\:bg-purple-500 {
14101
+ background-color: var(--purple-500) !important;
14102
+ }
14103
+ body.theme-system .d\:fc-purple-500 {
14104
+ color: var(--purple-500) !important;
14105
+ }
14106
+ body.theme-system .d\:bg-purple-600 {
14107
+ background-color: var(--purple-600) !important;
14108
+ }
14109
+ body.theme-system .d\:fc-purple-600 {
14110
+ color: var(--purple-600) !important;
14111
+ }
14148
14112
  body.theme-system .d\:bg-gold-100 {
14149
14113
  background-color: var(--gold-100) !important;
14150
14114
  }
@@ -14705,6 +14669,66 @@ body.theme-dark .d\:fc-yellow-600,
14705
14669
  body.theme-system .theme-dark__forced .d\:fc-yellow-600 {
14706
14670
  color: var(--yellow-600) !important;
14707
14671
  }
14672
+ body.theme-dark .d\:bg-purple-100,
14673
+ .theme-dark__forced .d\:bg-purple-100,
14674
+ body.theme-system .theme-dark__forced .d\:bg-purple-100 {
14675
+ background-color: var(--purple-100) !important;
14676
+ }
14677
+ body.theme-dark .d\:fc-purple-100,
14678
+ .theme-dark__forced .d\:fc-purple-100,
14679
+ body.theme-system .theme-dark__forced .d\:fc-purple-100 {
14680
+ color: var(--purple-100) !important;
14681
+ }
14682
+ body.theme-dark .d\:bg-purple-200,
14683
+ .theme-dark__forced .d\:bg-purple-200,
14684
+ body.theme-system .theme-dark__forced .d\:bg-purple-200 {
14685
+ background-color: var(--purple-200) !important;
14686
+ }
14687
+ body.theme-dark .d\:fc-purple-200,
14688
+ .theme-dark__forced .d\:fc-purple-200,
14689
+ body.theme-system .theme-dark__forced .d\:fc-purple-200 {
14690
+ color: var(--purple-200) !important;
14691
+ }
14692
+ body.theme-dark .d\:bg-purple-300,
14693
+ .theme-dark__forced .d\:bg-purple-300,
14694
+ body.theme-system .theme-dark__forced .d\:bg-purple-300 {
14695
+ background-color: var(--purple-300) !important;
14696
+ }
14697
+ body.theme-dark .d\:fc-purple-300,
14698
+ .theme-dark__forced .d\:fc-purple-300,
14699
+ body.theme-system .theme-dark__forced .d\:fc-purple-300 {
14700
+ color: var(--purple-300) !important;
14701
+ }
14702
+ body.theme-dark .d\:bg-purple-400,
14703
+ .theme-dark__forced .d\:bg-purple-400,
14704
+ body.theme-system .theme-dark__forced .d\:bg-purple-400 {
14705
+ background-color: var(--purple-400) !important;
14706
+ }
14707
+ body.theme-dark .d\:fc-purple-400,
14708
+ .theme-dark__forced .d\:fc-purple-400,
14709
+ body.theme-system .theme-dark__forced .d\:fc-purple-400 {
14710
+ color: var(--purple-400) !important;
14711
+ }
14712
+ body.theme-dark .d\:bg-purple-500,
14713
+ .theme-dark__forced .d\:bg-purple-500,
14714
+ body.theme-system .theme-dark__forced .d\:bg-purple-500 {
14715
+ background-color: var(--purple-500) !important;
14716
+ }
14717
+ body.theme-dark .d\:fc-purple-500,
14718
+ .theme-dark__forced .d\:fc-purple-500,
14719
+ body.theme-system .theme-dark__forced .d\:fc-purple-500 {
14720
+ color: var(--purple-500) !important;
14721
+ }
14722
+ body.theme-dark .d\:bg-purple-600,
14723
+ .theme-dark__forced .d\:bg-purple-600,
14724
+ body.theme-system .theme-dark__forced .d\:bg-purple-600 {
14725
+ background-color: var(--purple-600) !important;
14726
+ }
14727
+ body.theme-dark .d\:fc-purple-600,
14728
+ .theme-dark__forced .d\:fc-purple-600,
14729
+ body.theme-system .theme-dark__forced .d\:fc-purple-600 {
14730
+ color: var(--purple-600) !important;
14731
+ }
14708
14732
  body.theme-dark .d\:bg-gold-100,
14709
14733
  .theme-dark__forced .d\:bg-gold-100,
14710
14734
  body.theme-system .theme-dark__forced .d\:bg-gold-100 {
@@ -20016,6 +20040,9 @@ p {
20016
20040
  .ow-normal {
20017
20041
  overflow-wrap: normal !important;
20018
20042
  }
20043
+ .ow-anywhere {
20044
+ overflow-wrap: anywhere !important;
20045
+ }
20019
20046
  .ow-break-word {
20020
20047
  overflow-wrap: break-word !important;
20021
20048
  }
@@ -20706,16 +20733,16 @@ ol {
20706
20733
  box-shadow: 0 var(--su-static4) var(--su-static8) hsl(210, 8%, 85%) !important;
20707
20734
  }
20708
20735
  .bs-lg.bs-hover:hover {
20709
- box-shadow: 0 var(--su-static4) var(--su-static12) hsla(212, 8%, 68%, 0.7) !important;
20736
+ box-shadow: 0 var(--su-static4) var(--su-static12) hsla(210, 8%, 68%, 0.7) !important;
20710
20737
  }
20711
20738
  .bs-i-sm.bs-hover:hover {
20712
- box-shadow: inset 0 var(--su-static1) var(--su-static8) 0 hsla(213, 9%, 75%, 0.75) !important;
20739
+ box-shadow: inset 0 var(--su-static1) var(--su-static8) 0 hsla(210, 9%, 75%, 0.75) !important;
20713
20740
  }
20714
20741
  .bs-i-md.bs-hover:hover {
20715
- box-shadow: inset 0 var(--su-static1) var(--su-static8) 0 hsla(212, 8%, 68%, 0.8) !important;
20742
+ box-shadow: inset 0 var(--su-static1) var(--su-static8) 0 hsla(210, 8%, 68%, 0.8) !important;
20716
20743
  }
20717
20744
  .bs-i-lg.bs-hover:hover {
20718
- box-shadow: inset 0 var(--su-static1) var(--su-static12) 0 hsl(212, 8%, 68%) !important;
20745
+ box-shadow: inset 0 var(--su-static1) var(--su-static12) 0 hsl(210, 8%, 68%) !important;
20719
20746
  }
20720
20747
  .t {
20721
20748
  transition-duration: var(--transition-time);
@@ -26150,7 +26177,7 @@ ol {
26150
26177
  /* stylelint-disable */
26151
26178
  html,
26152
26179
  body {
26153
- color: var(--theme-body-font-color);
26180
+ color: var(--theme-body-font-color, var(--black-600));
26154
26181
  font-family: var(--theme-body-font-family);
26155
26182
  font-size: var(--fs-base);
26156
26183
  line-height: var(--lh-base);
@@ -26164,7 +26191,7 @@ body {
26164
26191
  body {
26165
26192
  box-sizing: border-box;
26166
26193
  min-height: 100%;
26167
- background-color: var(--theme-background-color);
26194
+ background-color: var(--theme-background-color, var(--white));
26168
26195
  }
26169
26196
  body *,
26170
26197
  body *:before,