@stackoverflow/stacks 2.3.0 → 2.3.1

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 (14) hide show
  1. package/dist/css/stacks.css +216 -100
  2. package/dist/css/stacks.min.css +1 -1
  3. package/lib/components/block-link/block-link.less +6 -2
  4. package/lib/components/button/button.less +7 -8
  5. package/lib/components/button-group/button-group.less +17 -12
  6. package/lib/components/notice/notice.a11y.test.ts +1 -1
  7. package/lib/components/notice/notice.less +105 -76
  8. package/lib/components/notice/notice.visual.test.ts +2 -2
  9. package/lib/components/pagination/pagination.less +5 -1
  10. package/lib/components/post-summary/post-summary.less +2 -1
  11. package/lib/components/select/select.less +5 -1
  12. package/lib/components/topbar/topbar.less +3 -2
  13. package/lib/components/uploader/uploader.less +5 -1
  14. package/package.json +9 -9
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
  }
@@ -6072,7 +6184,7 @@ body.theme-highcontrast.theme-dark .s-topbar.s-topbar__light {
6072
6184
  color: var(--theme-topbar-search-placeholder, var(--black-400));
6073
6185
  font-style: normal;
6074
6186
  }
6075
- .s-topbar .s-topbar--searchbar .s-topbar--searchbar--input-group .s-input:not(:focus-visible) {
6187
+ .s-topbar .s-topbar--searchbar .s-topbar--searchbar--input-group .s-input:not(:focus-visible):not(.focus) {
6076
6188
  box-shadow: var(--theme-topbar-search-shadow);
6077
6189
  }
6078
6190
  .s-topbar .s-topbar--searchbar .s-topbar--searchbar--input-group .s-input-icon {
@@ -6093,7 +6205,8 @@ body.theme-highcontrast.theme-dark .s-topbar.s-topbar__light {
6093
6205
  height: 100%;
6094
6206
  line-height: var(--lh-sm);
6095
6207
  }
6096
- .s-topbar .s-topbar--searchbar .s-select > select:focus-visible {
6208
+ .s-topbar .s-topbar--searchbar .s-select > select:focus-visible,
6209
+ .s-topbar .s-topbar--searchbar .s-select > select.focus {
6097
6210
  z-index: var(--zi-selected);
6098
6211
  }
6099
6212
  .s-topbar .s-topbar--searchbar .s-select + .s-topbar--searchbar--input-group > .s-input {
@@ -6238,10 +6351,13 @@ body.theme-highcontrast .s-uploader.has-warning {
6238
6351
  z-index: var(--zi-selected);
6239
6352
  }
6240
6353
  .s-uploader .s-uploader--input:focus:focus-visible + .s-uploader--container {
6241
- background-color: var(--_up-bg-focus);
6242
6354
  box-shadow: 0 0 0 var(--su-static2) var(--focus-neutral), 0 0 0 var(--su-static4) var(--focus-theme);
6243
6355
  outline: var(--su-static2) solid transparent !important;
6244
6356
  }
6357
+ .s-uploader .s-uploader--input:focus:focus-visible + .s-uploader--container,
6358
+ .s-uploader .s-uploader--input .s-uploader--container.focus {
6359
+ background-color: var(--_up-bg-focus);
6360
+ }
6245
6361
  .s-uploader .s-uploader--preview {
6246
6362
  max-width: 100%;
6247
6363
  pointer-events: none;