@stackoverflow/stacks 2.3.0 → 2.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/README.md +2 -2
  2. package/dist/css/stacks.css +238 -113
  3. package/dist/css/stacks.min.css +1 -1
  4. package/lib/components/block-link/block-link.less +6 -2
  5. package/lib/components/button/button.less +7 -8
  6. package/lib/components/button-group/button-group.less +17 -12
  7. package/lib/components/notice/notice.a11y.test.ts +1 -1
  8. package/lib/components/notice/notice.less +105 -76
  9. package/lib/components/notice/notice.visual.test.ts +2 -2
  10. package/lib/components/pagination/pagination.less +5 -1
  11. package/lib/components/post-summary/post-summary.less +2 -1
  12. package/lib/components/post-summary/post-summary.test.setup.ts +1 -1
  13. package/lib/components/select/select.less +5 -1
  14. package/lib/components/topbar/topbar.less +25 -21
  15. package/lib/components/uploader/uploader.less +5 -1
  16. package/lib/test/a11y-test-utils.ts +1 -1
  17. package/package.json +12 -12
package/dist/css/stacks.css CHANGED
@@ -872,9 +872,12 @@ a.s-badge:hover {
872
872
  --_no-bc: var(--black-225);
873
873
  --_no-bg: var(--black-100);
874
874
  --_no-fc: var(--black-500);
875
- --_no-btn-bg-focus: var(--black-225);
876
875
  --_no-btn-bg-active: var(--black-250);
876
+ --_no-btn-bg-focus: var(--black-225);
877
877
  --_no-btn-fc: var(--_no-fc);
878
+ --_no-code-bc: var(--black-300);
879
+ --_no-code-bg: var(--black-200);
880
+ --_no-code-fc: var(--_no-fc);
878
881
  background: var(--_no-bg);
879
882
  border-color: var(--_no-bc);
880
883
  color: var(--_no-fc);
@@ -889,96 +892,118 @@ a.s-badge:hover {
889
892
  z-index: calc(var(--zi-navigation-fixed) - 1);
890
893
  }
891
894
  @media (prefers-color-scheme: dark) {
892
- body.theme-system .s-banner:not(.s-banner__important) {
895
+ body.theme-system .s-banner {
893
896
  --_no-bc: var(--_no-bg);
894
897
  }
895
898
  }
896
- body.theme-dark .s-banner:not(.s-banner__important),
897
- .theme-dark__forced .s-banner:not(.s-banner__important),
898
- body.theme-system .theme-dark__forced .s-banner:not(.s-banner__important) {
899
+ body.theme-dark .s-banner,
900
+ .theme-dark__forced .s-banner,
901
+ body.theme-system .theme-dark__forced .s-banner {
899
902
  --_no-bc: var(--_no-bg);
900
903
  }
901
- body.theme-highcontrast .s-banner:not(.s-banner__important) {
902
- --_no-bc: currentColor;
903
- }
904
- @media (prefers-color-scheme: dark) {
905
- body.theme-highcontrast.theme-system .s-banner:not(.s-banner__important) {
906
- --_no-bc: currentColor;
907
- }
908
- }
909
- body.theme-highcontrast.theme-dark .s-banner:not(.s-banner__important) {
910
- --_no-bc: currentColor;
911
- }
912
- .s-banner__important {
904
+ body.theme-highcontrast .s-banner,
905
+ body.theme-highcontrast .s-banner.s-banner__danger,
906
+ body.theme-highcontrast .s-banner.s-banner__info,
907
+ body.theme-highcontrast .s-banner.s-banner__success,
908
+ body.theme-highcontrast .s-banner.s-banner__warning {
909
+ --_no-code-bc: var(--black-400);
910
+ --_no-code-bg: var(--white);
911
+ --_no-code-fc: var(--black);
912
+ }
913
+ body.theme-highcontrast .s-banner.s-banner__important,
914
+ body.theme-highcontrast .s-banner.s-banner__danger.s-banner__important,
915
+ body.theme-highcontrast .s-banner.s-banner__info.s-banner__important,
916
+ body.theme-highcontrast .s-banner.s-banner__success.s-banner__important,
917
+ body.theme-highcontrast .s-banner.s-banner__warning.s-banner__important {
918
+ --_no-code-bc: var(--black-200);
919
+ --_no-code-bg: var(--black);
920
+ --_no-code-fc: var(--white);
921
+ }
922
+ .s-banner__important:not(.s-banner__danger):not(.s-banner__info):not(.s-banner__success):not(.s-banner__warning) {
913
923
  --_no-bc: var(--_no-bg);
914
924
  --_no-bg: var(--black-500);
915
925
  --_no-fc: var(--white);
916
926
  --_no-btn-bg-focus: var(--black-600);
917
927
  --_no-btn-bg-active: var(--black-600);
918
928
  --_no-btn-fc: var(--_no-fc);
919
- --_no-code-bg: var(--black-300);
929
+ --_no-code-bc: var(--black-300);
930
+ --_no-code-bg: var(--black-600);
920
931
  }
921
- .s-banner__danger {
932
+ .s-banner__danger:not(.s-banner__important) {
922
933
  --_no-bc: var(--red-300);
923
934
  --_no-bg: var(--red-100);
924
935
  --_no-btn-bg-active: var(--red-200);
925
936
  --_no-btn-bg-focus: var(--red-200);
926
937
  --_no-btn-fc: var(--red-500);
927
- --_no-code-bg: var(--red-300);
938
+ --_no-code-bc: var(--red-300);
939
+ --_no-code-bg: var(--red-200);
928
940
  }
929
941
  .s-banner__danger.s-banner__important {
930
942
  --_no-bc: var(--_no-bg);
931
943
  --_no-bg: var(--red-400);
944
+ --_no-fc: var(--white);
932
945
  --_no-btn-bg-active: var(--red-500);
933
946
  --_no-btn-bg-focus: var(--red-500);
934
947
  --_no-btn-fc: var(--red-100);
948
+ --_no-code-bc: var(--red-300);
949
+ --_no-code-bg: var(--red-500);
935
950
  }
936
951
  body.theme-highcontrast .s-banner__danger.s-banner__important {
937
952
  --_no-bg: var(--red-500);
938
953
  }
939
- .s-banner__info {
954
+ .s-banner__info:not(.s-banner__important) {
940
955
  --_no-bc: var(--theme-secondary-300);
941
956
  --_no-bg: var(--theme-secondary-100);
942
- --_no-btn-bg-focus: var(--theme-secondary-200);
943
957
  --_no-btn-bg-active: var(--theme-secondary-200);
958
+ --_no-btn-bg-focus: var(--theme-secondary-200);
944
959
  --_no-btn-fc: var(--theme-secondary-500);
945
- --_no-code-bg: var(--theme-secondary-300);
960
+ --_no-code-bc: var(--theme-secondary-300);
961
+ --_no-code-bg: var(--theme-secondary-200);
946
962
  }
947
963
  .s-banner__info.s-banner__important {
948
964
  --_no-bc: var(--_no-bg);
949
965
  --_no-bg: var(--theme-secondary-400);
966
+ --_no-fc: var(--white);
950
967
  --_no-btn-bg-active: var(--theme-secondary-500);
951
968
  --_no-btn-bg-focus: var(--theme-secondary-500);
952
969
  --_no-btn-fc: var(--theme-secondary-100);
970
+ --_no-code-bc: var(--theme-secondary-300);
971
+ --_no-code-bg: var(--theme-secondary-500);
953
972
  }
954
973
  body.theme-highcontrast .s-banner__info.s-banner__important {
955
974
  --_no-bg: var(--theme-secondary-500);
956
975
  }
957
- .s-banner__success {
976
+ .s-banner__success:not(.s-banner__important) {
958
977
  --_no-bc: var(--green-300);
959
978
  --_no-bg: var(--green-100);
960
979
  --_no-btn-bg-active: var(--green-200);
961
980
  --_no-btn-bg-focus: var(--green-200);
962
981
  --_no-btn-fc: var(--green-500);
963
- --_no-code-bg: var(--green-300);
982
+ --_no-code-bc: var(--green-300);
983
+ --_no-code-bg: var(--green-200);
964
984
  }
965
985
  .s-banner__success.s-banner__important {
966
986
  --_no-bc: var(--_no-bg);
967
987
  --_no-bg: var(--green-400);
988
+ --_no-fc: var(--white);
968
989
  --_no-btn-bg-active: var(--green-500);
969
990
  --_no-btn-bg-focus: var(--green-500);
970
991
  --_no-btn-fc: var(--green-100);
992
+ --_no-code-bc: var(--green-300);
993
+ --_no-code-bg: var(--green-500);
971
994
  }
972
995
  body.theme-highcontrast .s-banner__success.s-banner__important {
973
996
  --_no-bg: var(--green-500);
974
997
  }
975
- .s-banner__warning {
998
+ .s-banner__warning:not(.s-banner__important) {
976
999
  --_no-bc: var(--yellow-300);
977
1000
  --_no-bg: var(--yellow-100);
978
1001
  --_no-btn-bg-active: var(--yellow-200);
979
1002
  --_no-btn-bg-focus: var(--yellow-200);
1003
+ --_no-btn-fc: var(--yellow-500);
1004
+ --_no-code-bc: var(--yellow-300);
1005
+ --_no-code-bg: var(--yellow-200);
980
1006
  --_no-btn-fc: var(--yellow-600);
981
- --_no-code-bg: var(--yellow-300);
982
1007
  }
983
1008
  .s-banner__warning.s-banner__important {
984
1009
  --_no-bc: var(--_no-bg);
@@ -987,16 +1012,22 @@ body.theme-highcontrast .s-banner__success.s-banner__important {
987
1012
  --_no-btn-fc: var(--_no-fc);
988
1013
  --_no-btn-bg-active: var(--yellow-300);
989
1014
  --_no-btn-bg-focus: var(--yellow-300);
1015
+ --_no-code-bc: var(--yellow-500);
1016
+ --_no-code-bg: var(--yellow-300);
990
1017
  }
991
1018
  @media (prefers-color-scheme: dark) {
992
1019
  body.theme-system .s-banner__warning.s-banner__important {
993
- --_no-fc: var(--yellow-200);
1020
+ --_no-fc: var(--white);
1021
+ --_no-code-bc: var(--yellow-300);
1022
+ --_no-code-bg: var(--yellow-500);
994
1023
  }
995
1024
  }
996
1025
  body.theme-dark .s-banner__warning.s-banner__important,
997
1026
  .theme-dark__forced .s-banner__warning.s-banner__important,
998
1027
  body.theme-system .theme-dark__forced .s-banner__warning.s-banner__important {
999
- --_no-fc: var(--yellow-200);
1028
+ --_no-fc: var(--white);
1029
+ --_no-code-bc: var(--yellow-300);
1030
+ --_no-code-bg: var(--yellow-500);
1000
1031
  }
1001
1032
  body.theme-highcontrast .s-banner__warning.s-banner__important {
1002
1033
  --_no-bg: var(--yellow-500);
@@ -1005,20 +1036,23 @@ body.theme-highcontrast .s-banner__warning.s-banner__important {
1005
1036
  --_no-btn-bg-focus: transparent;
1006
1037
  }
1007
1038
  .s-banner code {
1008
- background: var(--_no-code-bg, transparent);
1039
+ background-color: var(--_no-code-bg);
1040
+ color: var(--_no-code-fc);
1041
+ outline: var(--su-static1) solid var(--_no-code-bc);
1042
+ border-radius: var(--br-sm);
1043
+ padding-left: var(--su2);
1044
+ padding-right: var(--su2);
1009
1045
  }
1010
1046
  .s-banner .s-banner--btn {
1011
1047
  color: var(--_no-btn-fc, inherit) !important;
1012
1048
  padding: var(--su8);
1013
1049
  }
1014
- .s-banner .s-banner--btn:not(:focus) {
1015
- box-shadow: none;
1016
- }
1017
1050
  .s-banner .s-banner--btn:active {
1018
1051
  background-color: var(--_no-btn-bg-active, inherit) !important;
1019
1052
  }
1020
- .s-banner .s-banner--btn:focus,
1021
- .s-banner .s-banner--btn:hover {
1053
+ .s-banner .s-banner--btn:focus-visible,
1054
+ .s-banner .s-banner--btn:hover,
1055
+ .s-banner .s-banner--btn.focus-inset-bordered {
1022
1056
  background-color: var(--_no-btn-bg-focus, inherit) !important;
1023
1057
  }
1024
1058
  .s-banner[aria-hidden="true"] {
@@ -1083,14 +1117,14 @@ a.s-block-link.is-selected,
1083
1117
  --_bl-fc: var(--black-600);
1084
1118
  font-weight: bold;
1085
1119
  }
1086
- a.s-block-linka.s-block-link__left.is-selected:not(:focus-visible),
1087
- a.s-block-link.s-block-link__left.is-selected:not(:focus-visible),
1088
- .s-block-linka.s-block-link__left.is-selected:not(:focus-visible),
1089
- .s-block-link.s-block-link__left.is-selected:not(:focus-visible),
1090
- a.s-block-linka.s-block-link__right.is-selected:not(:focus-visible),
1091
- a.s-block-link.s-block-link__right.is-selected:not(:focus-visible),
1092
- .s-block-linka.s-block-link__right.is-selected:not(:focus-visible),
1093
- .s-block-link.s-block-link__right.is-selected:not(:focus-visible) {
1120
+ a.s-block-linka.s-block-link__left.is-selected:not(:focus-visible):not(.focus-inset),
1121
+ a.s-block-link.s-block-link__left.is-selected:not(:focus-visible):not(.focus-inset),
1122
+ .s-block-linka.s-block-link__left.is-selected:not(:focus-visible):not(.focus-inset),
1123
+ .s-block-link.s-block-link__left.is-selected:not(:focus-visible):not(.focus-inset),
1124
+ a.s-block-linka.s-block-link__right.is-selected:not(:focus-visible):not(.focus-inset),
1125
+ a.s-block-link.s-block-link__right.is-selected:not(:focus-visible):not(.focus-inset),
1126
+ .s-block-linka.s-block-link__right.is-selected:not(:focus-visible):not(.focus-inset),
1127
+ .s-block-link.s-block-link__right.is-selected:not(:focus-visible):not(.focus-inset) {
1094
1128
  box-shadow: inset var(--_li-block-bs-offset-x, 3px) 0 0 var(--_bl-bs-color);
1095
1129
  }
1096
1130
  a.s-block-linka.s-block-link__right.is-selected,
@@ -1123,10 +1157,15 @@ a.s-block-link:visited,
1123
1157
  }
1124
1158
  a.s-block-link:focus-visible,
1125
1159
  .s-block-link:focus-visible {
1126
- border-radius: var(--br-sm);
1127
1160
  box-shadow: inset 0 0 0 var(--su-static2) var(--focus-theme), inset 0 0 0 var(--su-static4) var(--focus-neutral);
1128
1161
  outline: var(--su-static2) solid transparent !important;
1129
1162
  }
1163
+ a.s-block-link:focus-visible,
1164
+ .s-block-link:focus-visible,
1165
+ a.s-block-link.focus-inset,
1166
+ .s-block-link.focus-inset {
1167
+ border-radius: var(--br-sm);
1168
+ }
1130
1169
  .s-breadcrumbs {
1131
1170
  --_br-divider-px: var(--su4);
1132
1171
  --_br-link-fc: var(--fc-light);
@@ -1608,11 +1647,13 @@ body.theme-highcontrast .s-btn.s-btn__github {
1608
1647
  box-shadow: inset 0 0 0 var(--su-static1) var(--focus-theme), inset 0 0 0 calc(var(--su-static4) - var(--su-static1)) var(--focus-neutral);
1609
1648
  outline: var(--su-static2) solid transparent !important;
1610
1649
  }
1611
- .s-btn:not(.s-btn--radio:checked + label):not(.s-btn__link):not(.s-btn__unset):not(.s-btn__facebook):not(.s-btn__github):not(.s-btn__google):not(.is-selected):focus-visible.s-btn__filled {
1650
+ .s-btn:not(.s-btn--radio:checked + label):not(.s-btn__link):not(.s-btn__unset):not(.s-btn__facebook):not(.s-btn__github):not(.s-btn__google):not(.is-selected):focus-visible,
1651
+ .s-btn:not(.s-btn--radio:checked + label):not(.s-btn__link):not(.s-btn__unset):not(.s-btn__facebook):not(.s-btn__github):not(.s-btn__google):not(.is-selected).focus-inset-bordered {
1612
1652
  background-color: var(--_bu-bg-focus, var(--_bu-filled-bg));
1613
1653
  color: var(--_bu-fc-focus, var(--_bu-filled-fc));
1614
1654
  }
1615
- .s-btn:not(.s-btn--radio:checked + label):not(.s-btn__link):not(.s-btn__unset):not(.s-btn__facebook):not(.s-btn__github):not(.s-btn__google):not(.is-selected):focus-visible.s-btn__filled:not(:hover) .s-btn--number {
1655
+ .s-btn:not(.s-btn--radio:checked + label):not(.s-btn__link):not(.s-btn__unset):not(.s-btn__facebook):not(.s-btn__github):not(.s-btn__google):not(.is-selected):focus-visible:not(:hover) .s-btn--number,
1656
+ .s-btn:not(.s-btn--radio:checked + label):not(.s-btn__link):not(.s-btn__unset):not(.s-btn__facebook):not(.s-btn__github):not(.s-btn__google):not(.is-selected).focus-inset-bordered:not(:hover) .s-btn--number {
1616
1657
  color: var(--_bu-number-fc-focus, var(--_bu-number-fc-filled));
1617
1658
  }
1618
1659
  .s-btn:not(.s-btn--radio:checked + label):not(.s-btn__link):not(.s-btn__unset):not(.s-btn__facebook):not(.s-btn__github):not(.s-btn__google):not(.is-selected):hover {
@@ -1652,7 +1693,6 @@ body.theme-highcontrast .s-btn.s-btn__github {
1652
1693
  border-radius: var(--br-md);
1653
1694
  display: inline-flex;
1654
1695
  flex-wrap: wrap;
1655
- margin-bottom: var(--su-static1);
1656
1696
  padding: calc(var(--su-static4) - var(--su-static1));
1657
1697
  }
1658
1698
  @media (max-width: 640px) {
@@ -1673,26 +1713,29 @@ body.theme-highcontrast .s-btn.s-btn__github {
1673
1713
  .s-btn-group .s-btn {
1674
1714
  --_bu-br: var(--br-sm);
1675
1715
  --_bu-bc-hover: transparent;
1716
+ --_bu-px: calc(var(--su12) - var(--su1));
1717
+ --_bu-py: calc(var(--su6) + 0.65px);
1676
1718
  white-space: nowrap;
1677
1719
  }
1678
- .s-btn-group .s-btn,
1679
- .s-btn-group .s-btn.s-btn__md {
1680
- --_bu-px: var(--su12);
1681
- --_bu-py: var(--su8);
1720
+ .s-btn-group .s-btn.s-btn__xs {
1721
+ --_bu-px: calc(var(--su8) - var(--su1));
1722
+ --_bu-py: calc(var(--su2) + 0.9px);
1682
1723
  }
1683
- .s-btn-group .s-btn.s-btn___xs {
1684
- --_bu-px: var(--su8);
1685
- --_bu-py: var(--su4);
1724
+ .s-btn-group .s-btn.s-btn__sm {
1725
+ --_bu-px: calc(var(--su8) + var(--su1));
1726
+ --_bu-py: calc(var(--su4) + (var(--su2) - 0.15px));
1686
1727
  }
1687
- .s-btn-group .s-btn.s-btn___sm {
1688
- --_bu-px: calc(var(--su8) + var(--su2));
1689
- --_bu-py: var(--su6);
1728
+ .s-btn-group .s-btn.s-btn__md {
1729
+ --_bu-px: var(--su12);
1730
+ --_bu-py: calc(var(--su8) + 0.15px);
1690
1731
  }
1691
1732
  .s-btn-group .s-btn.is-selected,
1692
1733
  .s-btn-group .s-btn--radio:checked + .s-btn {
1693
1734
  font-weight: bold;
1694
1735
  }
1695
1736
  .s-btn-group .s-btn .s-btn--badge {
1737
+ margin-bottom: -100%;
1738
+ margin-top: -100%;
1696
1739
  font-weight: normal;
1697
1740
  }
1698
1741
  .s-btn-group .s-btn .s-btn--text {
@@ -3115,13 +3158,33 @@ body.theme-highcontrast .s-navigation .s-navigation--item.is-selected {
3115
3158
  .s-navigation .s-navigation--title:first-child {
3116
3159
  --_na-title-mt: 0;
3117
3160
  }
3161
+ /**
3162
+ * Generate color variables with a given color name
3163
+ *
3164
+ * Usage example:
3165
+ * .generate-variant-variables(purple, important);
3166
+ *
3167
+ * @colorName - The name of the color to use to construct variables values
3168
+ * @modifier - Modifier name to determine variable values for that modifier
3169
+ */
3170
+ /**
3171
+ * Generate styles for a notice-based component
3172
+ *
3173
+ * Usage example:
3174
+ * .construct-notice-component(s-banner);
3175
+ *
3176
+ * @baseClass - The base class name for the notice component
3177
+ */
3118
3178
  .s-notice {
3119
3179
  --_no-bc: var(--black-225);
3120
3180
  --_no-bg: var(--black-100);
3121
3181
  --_no-fc: var(--black-500);
3122
- --_no-btn-bg-focus: var(--black-225);
3123
3182
  --_no-btn-bg-active: var(--black-250);
3183
+ --_no-btn-bg-focus: var(--black-225);
3124
3184
  --_no-btn-fc: var(--_no-fc);
3185
+ --_no-code-bc: var(--black-300);
3186
+ --_no-code-bg: var(--black-200);
3187
+ --_no-code-fc: var(--_no-fc);
3125
3188
  background: var(--_no-bg);
3126
3189
  border-color: var(--_no-bc);
3127
3190
  color: var(--_no-fc);
@@ -3132,96 +3195,118 @@ body.theme-highcontrast .s-navigation .s-navigation--item.is-selected {
3132
3195
  padding: var(--su16);
3133
3196
  }
3134
3197
  @media (prefers-color-scheme: dark) {
3135
- body.theme-system .s-notice:not(.s-notice__important) {
3198
+ body.theme-system .s-notice {
3136
3199
  --_no-bc: var(--_no-bg);
3137
3200
  }
3138
3201
  }
3139
- body.theme-dark .s-notice:not(.s-notice__important),
3140
- .theme-dark__forced .s-notice:not(.s-notice__important),
3141
- body.theme-system .theme-dark__forced .s-notice:not(.s-notice__important) {
3202
+ body.theme-dark .s-notice,
3203
+ .theme-dark__forced .s-notice,
3204
+ body.theme-system .theme-dark__forced .s-notice {
3142
3205
  --_no-bc: var(--_no-bg);
3143
3206
  }
3144
- body.theme-highcontrast .s-notice:not(.s-notice__important) {
3145
- --_no-bc: currentColor;
3146
- }
3147
- @media (prefers-color-scheme: dark) {
3148
- body.theme-highcontrast.theme-system .s-notice:not(.s-notice__important) {
3149
- --_no-bc: currentColor;
3150
- }
3151
- }
3152
- body.theme-highcontrast.theme-dark .s-notice:not(.s-notice__important) {
3153
- --_no-bc: currentColor;
3154
- }
3155
- .s-notice__important {
3207
+ body.theme-highcontrast .s-notice,
3208
+ body.theme-highcontrast .s-notice.s-notice__danger,
3209
+ body.theme-highcontrast .s-notice.s-notice__info,
3210
+ body.theme-highcontrast .s-notice.s-notice__success,
3211
+ body.theme-highcontrast .s-notice.s-notice__warning {
3212
+ --_no-code-bc: var(--black-400);
3213
+ --_no-code-bg: var(--white);
3214
+ --_no-code-fc: var(--black);
3215
+ }
3216
+ body.theme-highcontrast .s-notice.s-notice__important,
3217
+ body.theme-highcontrast .s-notice.s-notice__danger.s-notice__important,
3218
+ body.theme-highcontrast .s-notice.s-notice__info.s-notice__important,
3219
+ body.theme-highcontrast .s-notice.s-notice__success.s-notice__important,
3220
+ body.theme-highcontrast .s-notice.s-notice__warning.s-notice__important {
3221
+ --_no-code-bc: var(--black-200);
3222
+ --_no-code-bg: var(--black);
3223
+ --_no-code-fc: var(--white);
3224
+ }
3225
+ .s-notice__important:not(.s-notice__danger):not(.s-notice__info):not(.s-notice__success):not(.s-notice__warning) {
3156
3226
  --_no-bc: var(--_no-bg);
3157
3227
  --_no-bg: var(--black-500);
3158
3228
  --_no-fc: var(--white);
3159
3229
  --_no-btn-bg-focus: var(--black-600);
3160
3230
  --_no-btn-bg-active: var(--black-600);
3161
3231
  --_no-btn-fc: var(--_no-fc);
3162
- --_no-code-bg: var(--black-300);
3232
+ --_no-code-bc: var(--black-300);
3233
+ --_no-code-bg: var(--black-600);
3163
3234
  }
3164
- .s-notice__danger {
3235
+ .s-notice__danger:not(.s-notice__important) {
3165
3236
  --_no-bc: var(--red-300);
3166
3237
  --_no-bg: var(--red-100);
3167
3238
  --_no-btn-bg-active: var(--red-200);
3168
3239
  --_no-btn-bg-focus: var(--red-200);
3169
3240
  --_no-btn-fc: var(--red-500);
3170
- --_no-code-bg: var(--red-300);
3241
+ --_no-code-bc: var(--red-300);
3242
+ --_no-code-bg: var(--red-200);
3171
3243
  }
3172
3244
  .s-notice__danger.s-notice__important {
3173
3245
  --_no-bc: var(--_no-bg);
3174
3246
  --_no-bg: var(--red-400);
3247
+ --_no-fc: var(--white);
3175
3248
  --_no-btn-bg-active: var(--red-500);
3176
3249
  --_no-btn-bg-focus: var(--red-500);
3177
3250
  --_no-btn-fc: var(--red-100);
3251
+ --_no-code-bc: var(--red-300);
3252
+ --_no-code-bg: var(--red-500);
3178
3253
  }
3179
3254
  body.theme-highcontrast .s-notice__danger.s-notice__important {
3180
3255
  --_no-bg: var(--red-500);
3181
3256
  }
3182
- .s-notice__info {
3257
+ .s-notice__info:not(.s-notice__important) {
3183
3258
  --_no-bc: var(--theme-secondary-300);
3184
3259
  --_no-bg: var(--theme-secondary-100);
3185
- --_no-btn-bg-focus: var(--theme-secondary-200);
3186
3260
  --_no-btn-bg-active: var(--theme-secondary-200);
3261
+ --_no-btn-bg-focus: var(--theme-secondary-200);
3187
3262
  --_no-btn-fc: var(--theme-secondary-500);
3188
- --_no-code-bg: var(--theme-secondary-300);
3263
+ --_no-code-bc: var(--theme-secondary-300);
3264
+ --_no-code-bg: var(--theme-secondary-200);
3189
3265
  }
3190
3266
  .s-notice__info.s-notice__important {
3191
3267
  --_no-bc: var(--_no-bg);
3192
3268
  --_no-bg: var(--theme-secondary-400);
3269
+ --_no-fc: var(--white);
3193
3270
  --_no-btn-bg-active: var(--theme-secondary-500);
3194
3271
  --_no-btn-bg-focus: var(--theme-secondary-500);
3195
3272
  --_no-btn-fc: var(--theme-secondary-100);
3273
+ --_no-code-bc: var(--theme-secondary-300);
3274
+ --_no-code-bg: var(--theme-secondary-500);
3196
3275
  }
3197
3276
  body.theme-highcontrast .s-notice__info.s-notice__important {
3198
3277
  --_no-bg: var(--theme-secondary-500);
3199
3278
  }
3200
- .s-notice__success {
3279
+ .s-notice__success:not(.s-notice__important) {
3201
3280
  --_no-bc: var(--green-300);
3202
3281
  --_no-bg: var(--green-100);
3203
3282
  --_no-btn-bg-active: var(--green-200);
3204
3283
  --_no-btn-bg-focus: var(--green-200);
3205
3284
  --_no-btn-fc: var(--green-500);
3206
- --_no-code-bg: var(--green-300);
3285
+ --_no-code-bc: var(--green-300);
3286
+ --_no-code-bg: var(--green-200);
3207
3287
  }
3208
3288
  .s-notice__success.s-notice__important {
3209
3289
  --_no-bc: var(--_no-bg);
3210
3290
  --_no-bg: var(--green-400);
3291
+ --_no-fc: var(--white);
3211
3292
  --_no-btn-bg-active: var(--green-500);
3212
3293
  --_no-btn-bg-focus: var(--green-500);
3213
3294
  --_no-btn-fc: var(--green-100);
3295
+ --_no-code-bc: var(--green-300);
3296
+ --_no-code-bg: var(--green-500);
3214
3297
  }
3215
3298
  body.theme-highcontrast .s-notice__success.s-notice__important {
3216
3299
  --_no-bg: var(--green-500);
3217
3300
  }
3218
- .s-notice__warning {
3301
+ .s-notice__warning:not(.s-notice__important) {
3219
3302
  --_no-bc: var(--yellow-300);
3220
3303
  --_no-bg: var(--yellow-100);
3221
3304
  --_no-btn-bg-active: var(--yellow-200);
3222
3305
  --_no-btn-bg-focus: var(--yellow-200);
3306
+ --_no-btn-fc: var(--yellow-500);
3307
+ --_no-code-bc: var(--yellow-300);
3308
+ --_no-code-bg: var(--yellow-200);
3223
3309
  --_no-btn-fc: var(--yellow-600);
3224
- --_no-code-bg: var(--yellow-300);
3225
3310
  }
3226
3311
  .s-notice__warning.s-notice__important {
3227
3312
  --_no-bc: var(--_no-bg);
@@ -3230,16 +3315,22 @@ body.theme-highcontrast .s-notice__success.s-notice__important {
3230
3315
  --_no-btn-fc: var(--_no-fc);
3231
3316
  --_no-btn-bg-active: var(--yellow-300);
3232
3317
  --_no-btn-bg-focus: var(--yellow-300);
3318
+ --_no-code-bc: var(--yellow-500);
3319
+ --_no-code-bg: var(--yellow-300);
3233
3320
  }
3234
3321
  @media (prefers-color-scheme: dark) {
3235
3322
  body.theme-system .s-notice__warning.s-notice__important {
3236
- --_no-fc: var(--yellow-200);
3323
+ --_no-fc: var(--white);
3324
+ --_no-code-bc: var(--yellow-300);
3325
+ --_no-code-bg: var(--yellow-500);
3237
3326
  }
3238
3327
  }
3239
3328
  body.theme-dark .s-notice__warning.s-notice__important,
3240
3329
  .theme-dark__forced .s-notice__warning.s-notice__important,
3241
3330
  body.theme-system .theme-dark__forced .s-notice__warning.s-notice__important {
3242
- --_no-fc: var(--yellow-200);
3331
+ --_no-fc: var(--white);
3332
+ --_no-code-bc: var(--yellow-300);
3333
+ --_no-code-bg: var(--yellow-500);
3243
3334
  }
3244
3335
  body.theme-highcontrast .s-notice__warning.s-notice__important {
3245
3336
  --_no-bg: var(--yellow-500);
@@ -3248,20 +3339,23 @@ body.theme-highcontrast .s-notice__warning.s-notice__important {
3248
3339
  --_no-btn-bg-focus: transparent;
3249
3340
  }
3250
3341
  .s-notice code {
3251
- background: var(--_no-code-bg, transparent);
3342
+ background-color: var(--_no-code-bg);
3343
+ color: var(--_no-code-fc);
3344
+ outline: var(--su-static1) solid var(--_no-code-bc);
3345
+ border-radius: var(--br-sm);
3346
+ padding-left: var(--su2);
3347
+ padding-right: var(--su2);
3252
3348
  }
3253
3349
  .s-notice .s-notice--btn {
3254
3350
  color: var(--_no-btn-fc, inherit) !important;
3255
3351
  padding: var(--su8);
3256
3352
  }
3257
- .s-notice .s-notice--btn:not(:focus) {
3258
- box-shadow: none;
3259
- }
3260
3353
  .s-notice .s-notice--btn:active {
3261
3354
  background-color: var(--_no-btn-bg-active, inherit) !important;
3262
3355
  }
3263
- .s-notice .s-notice--btn:focus,
3264
- .s-notice .s-notice--btn:hover {
3356
+ .s-notice .s-notice--btn:focus-visible,
3357
+ .s-notice .s-notice--btn:hover,
3358
+ .s-notice .s-notice--btn.focus-inset-bordered {
3265
3359
  background-color: var(--_no-btn-bg-focus, inherit) !important;
3266
3360
  }
3267
3361
  .s-page-title {
@@ -3361,12 +3455,15 @@ body.theme-highcontrast .s-pagination .s-pagination--item {
3361
3455
  color: var(--_pa-item-fc-hover);
3362
3456
  }
3363
3457
  .s-pagination .s-pagination--item:focus-visible {
3364
- background-color: var(--_pa-item-bg-focus);
3365
- color: var(--_pa-item-fc-focus);
3366
3458
  border-color: var(--focus-theme) !important;
3367
3459
  box-shadow: inset 0 0 0 var(--su-static1) var(--focus-theme), inset 0 0 0 calc(var(--su-static4) - var(--su-static1)) var(--focus-neutral);
3368
3460
  outline: var(--su-static2) solid transparent !important;
3369
3461
  }
3462
+ .s-pagination .s-pagination--item:focus-visible,
3463
+ .s-pagination .s-pagination--item.focus-inset-bordered {
3464
+ background-color: var(--_pa-item-bg-focus);
3465
+ color: var(--_pa-item-fc-focus);
3466
+ }
3370
3467
  .s-popover {
3371
3468
  --_po-bg: var(--white);
3372
3469
  --_po-bc: var(--bc-medium);
@@ -3612,7 +3709,13 @@ body.theme-highcontrast .s-popover .s-popover--arrow__lb {
3612
3709
  .s-post-summary.s-post-summary__deleted .s-post-summary--meta-tags .post-tag:focus,
3613
3710
  .s-post-summary.s-post-summary__ignored .s-post-summary--meta-tags .post-tag:focus,
3614
3711
  .s-post-summary.s-post-summary__deleted .s-post-summary--meta-tags .s-tag:focus,
3615
- .s-post-summary.s-post-summary__ignored .s-post-summary--meta-tags .s-tag:focus {
3712
+ .s-post-summary.s-post-summary__ignored .s-post-summary--meta-tags .s-tag:focus,
3713
+ .s-post-summary.s-post-summary__deleted .s-post-summary--meta-tags a .focus-bordered,
3714
+ .s-post-summary.s-post-summary__ignored .s-post-summary--meta-tags a .focus-bordered,
3715
+ .s-post-summary.s-post-summary__deleted .s-post-summary--meta-tags .post-tag .focus-bordered,
3716
+ .s-post-summary.s-post-summary__ignored .s-post-summary--meta-tags .post-tag .focus-bordered,
3717
+ .s-post-summary.s-post-summary__deleted .s-post-summary--meta-tags .s-tag .focus-bordered,
3718
+ .s-post-summary.s-post-summary__ignored .s-post-summary--meta-tags .s-tag .focus-bordered {
3616
3719
  background-color: var(--_ps-meta-tags-tag-bg);
3617
3720
  color: var(--black-500);
3618
3721
  }
@@ -3639,7 +3742,13 @@ body.theme-highcontrast .s-post-summary.s-post-summary__ignored .s-post-summary-
3639
3742
  body.theme-highcontrast .s-post-summary.s-post-summary__deleted .s-post-summary--meta-tags .post-tag:focus,
3640
3743
  body.theme-highcontrast .s-post-summary.s-post-summary__ignored .s-post-summary--meta-tags .post-tag:focus,
3641
3744
  body.theme-highcontrast .s-post-summary.s-post-summary__deleted .s-post-summary--meta-tags .s-tag:focus,
3642
- body.theme-highcontrast .s-post-summary.s-post-summary__ignored .s-post-summary--meta-tags .s-tag:focus {
3745
+ body.theme-highcontrast .s-post-summary.s-post-summary__ignored .s-post-summary--meta-tags .s-tag:focus,
3746
+ body.theme-highcontrast .s-post-summary.s-post-summary__deleted .s-post-summary--meta-tags a .focus-bordered,
3747
+ body.theme-highcontrast .s-post-summary.s-post-summary__ignored .s-post-summary--meta-tags a .focus-bordered,
3748
+ body.theme-highcontrast .s-post-summary.s-post-summary__deleted .s-post-summary--meta-tags .post-tag .focus-bordered,
3749
+ body.theme-highcontrast .s-post-summary.s-post-summary__ignored .s-post-summary--meta-tags .post-tag .focus-bordered,
3750
+ body.theme-highcontrast .s-post-summary.s-post-summary__deleted .s-post-summary--meta-tags .s-tag .focus-bordered,
3751
+ body.theme-highcontrast .s-post-summary.s-post-summary__ignored .s-post-summary--meta-tags .s-tag .focus-bordered {
3643
3752
  border-color: currentColor;
3644
3753
  }
3645
3754
  .s-post-summary.s-post-summary__deleted .s-user-card a,
@@ -4810,10 +4919,13 @@ body.theme-highcontrast .is-readonly .s-select > select {
4810
4919
  --_se-select-fc: var(--fc-light);
4811
4920
  }
4812
4921
  .s-select > select:focus {
4813
- color: var(--black);
4814
4922
  box-shadow: 0 0 0 var(--su-static2) var(--focus-neutral), 0 0 0 var(--su-static4) var(--focus-theme);
4815
4923
  outline: var(--su-static2) solid transparent !important;
4816
4924
  }
4925
+ .s-select > select:focus,
4926
+ .s-select > select.focus {
4927
+ color: var(--black);
4928
+ }
4817
4929
  .s-select .s-input-icon {
4818
4930
  right: var(--su32);
4819
4931
  }
@@ -5821,20 +5933,12 @@ body.theme-highcontrast.theme-dark .s-topbar.s-topbar__light {
5821
5933
  --focus-theme: var(--blue-200);
5822
5934
  }
5823
5935
  @media (max-width: 640px) {
5824
- .s-topbar .s-topbar--searchbar {
5936
+ .s-topbar {
5825
5937
  --_tb-searchbar-d: none;
5826
5938
  --_tb-searchbar-p: var(--su8) var(--su12);
5827
5939
  --_tb-searchbar-open-d: flex;
5828
5940
  --_tb-searchbar-open-mxw: none;
5829
- background: var(--theme-topbar-item-background-hover, var(--black-200));
5830
- left: 0;
5831
- max-width: 100%;
5832
- position: absolute;
5833
- right: 0;
5834
- top: 100%;
5835
- }
5836
- .s-topbar .s-topbar--searchbar .s-select {
5837
- width: 25% !important;
5941
+ --_tb-searchbar-select-w: 25%;
5838
5942
  }
5839
5943
  }
5840
5944
  .s-topbar.s-topbar__light {
@@ -6057,6 +6161,16 @@ body.theme-highcontrast.theme-dark .s-topbar.s-topbar__light {
6057
6161
  flex-shrink: 10000;
6058
6162
  padding: var(--_tb-searchbar-p);
6059
6163
  }
6164
+ @media (max-width: 640px) {
6165
+ .s-topbar .s-topbar--searchbar {
6166
+ background: var(--theme-topbar-item-background-hover, var(--black-200));
6167
+ left: 0;
6168
+ max-width: 100%;
6169
+ position: absolute;
6170
+ right: 0;
6171
+ top: 100%;
6172
+ }
6173
+ }
6060
6174
  .s-topbar .s-topbar--searchbar .s-topbar--searchbar--input-group {
6061
6175
  flex-grow: 1;
6062
6176
  position: relative;
@@ -6072,7 +6186,7 @@ body.theme-highcontrast.theme-dark .s-topbar.s-topbar__light {
6072
6186
  color: var(--theme-topbar-search-placeholder, var(--black-400));
6073
6187
  font-style: normal;
6074
6188
  }
6075
- .s-topbar .s-topbar--searchbar .s-topbar--searchbar--input-group .s-input:not(:focus-visible) {
6189
+ .s-topbar .s-topbar--searchbar .s-topbar--searchbar--input-group .s-input:not(:focus-visible):not(.focus) {
6076
6190
  box-shadow: var(--theme-topbar-search-shadow);
6077
6191
  }
6078
6192
  .s-topbar .s-topbar--searchbar .s-topbar--searchbar--input-group .s-input-icon {
@@ -6084,6 +6198,11 @@ body.theme-highcontrast.theme-dark .s-topbar.s-topbar__light {
6084
6198
  margin-right: calc(var(--su-static1) * -1);
6085
6199
  max-width: calc(var(--s-step) * 2) !important;
6086
6200
  }
6201
+ @media (max-width: 640px) {
6202
+ .s-topbar .s-topbar--searchbar .s-select {
6203
+ width: 25% !important;
6204
+ }
6205
+ }
6087
6206
  .s-topbar .s-topbar--searchbar .s-select > select {
6088
6207
  background-color: var(--theme-topbar-select-background, var(--black-200));
6089
6208
  border-bottom-right-radius: 0 !important;
@@ -6093,7 +6212,8 @@ body.theme-highcontrast.theme-dark .s-topbar.s-topbar__light {
6093
6212
  height: 100%;
6094
6213
  line-height: var(--lh-sm);
6095
6214
  }
6096
- .s-topbar .s-topbar--searchbar .s-select > select:focus-visible {
6215
+ .s-topbar .s-topbar--searchbar .s-select > select:focus-visible,
6216
+ .s-topbar .s-topbar--searchbar .s-select > select.focus {
6097
6217
  z-index: var(--zi-selected);
6098
6218
  }
6099
6219
  .s-topbar .s-topbar--searchbar .s-select + .s-topbar--searchbar--input-group > .s-input {
@@ -6104,9 +6224,11 @@ body.theme-highcontrast.theme-dark .s-topbar.s-topbar__light {
6104
6224
  .s-topbar .s-topbar--searchbar .s-select:after {
6105
6225
  z-index: var(--zi-active);
6106
6226
  }
6107
- .s-topbar .s-topbar--searchbar.s-topbar--searchbar__open {
6108
- display: var(--_tb-searchbar-open-d);
6109
- max-width: var(--_tb-searchbar-open-mxw);
6227
+ @media (max-width: 640px) {
6228
+ .s-topbar .s-topbar--searchbar.s-topbar--searchbar__open {
6229
+ display: var(--_tb-searchbar-open-d);
6230
+ max-width: var(--_tb-searchbar-open-mxw);
6231
+ }
6110
6232
  }
6111
6233
  .s-topbar .s-navigation .s-navigation--item:not(.is-selected) {
6112
6234
  color: var(--theme-topbar-item-color, var(--black-400));
@@ -6238,10 +6360,13 @@ body.theme-highcontrast .s-uploader.has-warning {
6238
6360
  z-index: var(--zi-selected);
6239
6361
  }
6240
6362
  .s-uploader .s-uploader--input:focus:focus-visible + .s-uploader--container {
6241
- background-color: var(--_up-bg-focus);
6242
6363
  box-shadow: 0 0 0 var(--su-static2) var(--focus-neutral), 0 0 0 var(--su-static4) var(--focus-theme);
6243
6364
  outline: var(--su-static2) solid transparent !important;
6244
6365
  }
6366
+ .s-uploader .s-uploader--input:focus:focus-visible + .s-uploader--container,
6367
+ .s-uploader .s-uploader--input .s-uploader--container.focus {
6368
+ background-color: var(--_up-bg-focus);
6369
+ }
6245
6370
  .s-uploader .s-uploader--preview {
6246
6371
  max-width: 100%;
6247
6372
  pointer-events: none;