@stackoverflow/stacks 2.3.1 → 2.3.3

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.
package/README.md CHANGED
@@ -32,14 +32,14 @@ Stacks documentation can be found at https://stackoverflow.design/
32
32
  - [License](#license)
33
33
 
34
34
  ## Using Stacks
35
- Using Stacks is outlined in our [usage guidelines](https://stackoverflow.design/product/guidelines/using-stacks).
35
+ Using Stacks is outlined in our [usage guidelines](https://stackoverflow.design/product/develop/using-stacks).
36
36
 
37
37
  ## Migrating from v1 to v2
38
38
 
39
39
  To migrate from Stacks v1 to v2, see our [migration guide](/MIGRATION_GUIDE.md).
40
40
 
41
41
  ## Building Stacks
42
- To contribute to Stacks documentation or its CSS library, you’ll need to build Stacks locally. View our [building guidelines](https://stackoverflow.design/product/guidelines/building).
42
+ To contribute to Stacks documentation or its CSS library, you’ll need to build Stacks locally. View our [building guidelines](https://stackoverflow.design/product/develop/building).
43
43
 
44
44
  Having trouble getting these steps to work? Open [an issue](https://github.com/StackExchange/Stacks/issues/new) with a `setup` label.
45
45
 
@@ -1881,6 +1881,12 @@ body.theme-highcontrast.theme-dark .s-checkbox:indeterminate {
1881
1881
  --_ch-bc: var(--blue-500) !important;
1882
1882
  --_ch-bg: var(--blue-400);
1883
1883
  }
1884
+ @media (forced-colors: active) {
1885
+ .s-checkbox:checked,
1886
+ .s-checkbox:indeterminate {
1887
+ --_ch-bg: ButtonText !important;
1888
+ }
1889
+ }
1884
1890
  .s-checkbox:checked,
1885
1891
  .s-checkbox:indeterminate {
1886
1892
  --_ch-bc: var(--theme-secondary-400) !important;
@@ -5933,20 +5939,12 @@ body.theme-highcontrast.theme-dark .s-topbar.s-topbar__light {
5933
5939
  --focus-theme: var(--blue-200);
5934
5940
  }
5935
5941
  @media (max-width: 640px) {
5936
- .s-topbar .s-topbar--searchbar {
5942
+ .s-topbar {
5937
5943
  --_tb-searchbar-d: none;
5938
5944
  --_tb-searchbar-p: var(--su8) var(--su12);
5939
5945
  --_tb-searchbar-open-d: flex;
5940
5946
  --_tb-searchbar-open-mxw: none;
5941
- background: var(--theme-topbar-item-background-hover, var(--black-200));
5942
- left: 0;
5943
- max-width: 100%;
5944
- position: absolute;
5945
- right: 0;
5946
- top: 100%;
5947
- }
5948
- .s-topbar .s-topbar--searchbar .s-select {
5949
- width: 25% !important;
5947
+ --_tb-searchbar-select-w: 25%;
5950
5948
  }
5951
5949
  }
5952
5950
  .s-topbar.s-topbar__light {
@@ -6169,6 +6167,16 @@ body.theme-highcontrast.theme-dark .s-topbar.s-topbar__light {
6169
6167
  flex-shrink: 10000;
6170
6168
  padding: var(--_tb-searchbar-p);
6171
6169
  }
6170
+ @media (max-width: 640px) {
6171
+ .s-topbar .s-topbar--searchbar {
6172
+ background: var(--theme-topbar-item-background-hover, var(--black-200));
6173
+ left: 0;
6174
+ max-width: 100%;
6175
+ position: absolute;
6176
+ right: 0;
6177
+ top: 100%;
6178
+ }
6179
+ }
6172
6180
  .s-topbar .s-topbar--searchbar .s-topbar--searchbar--input-group {
6173
6181
  flex-grow: 1;
6174
6182
  position: relative;
@@ -6196,6 +6204,11 @@ body.theme-highcontrast.theme-dark .s-topbar.s-topbar__light {
6196
6204
  margin-right: calc(var(--su-static1) * -1);
6197
6205
  max-width: calc(var(--s-step) * 2) !important;
6198
6206
  }
6207
+ @media (max-width: 640px) {
6208
+ .s-topbar .s-topbar--searchbar .s-select {
6209
+ width: 25% !important;
6210
+ }
6211
+ }
6199
6212
  .s-topbar .s-topbar--searchbar .s-select > select {
6200
6213
  background-color: var(--theme-topbar-select-background, var(--black-200));
6201
6214
  border-bottom-right-radius: 0 !important;
@@ -6217,9 +6230,11 @@ body.theme-highcontrast.theme-dark .s-topbar.s-topbar__light {
6217
6230
  .s-topbar .s-topbar--searchbar .s-select:after {
6218
6231
  z-index: var(--zi-active);
6219
6232
  }
6220
- .s-topbar .s-topbar--searchbar.s-topbar--searchbar__open {
6221
- display: var(--_tb-searchbar-open-d);
6222
- max-width: var(--_tb-searchbar-open-mxw);
6233
+ @media (max-width: 640px) {
6234
+ .s-topbar .s-topbar--searchbar.s-topbar--searchbar__open {
6235
+ display: var(--_tb-searchbar-open-d);
6236
+ max-width: var(--_tb-searchbar-open-mxw);
6237
+ }
6223
6238
  }
6224
6239
  .s-topbar .s-navigation .s-navigation--item:not(.is-selected) {
6225
6240
  color: var(--theme-topbar-item-color, var(--black-400));