@stackoverflow/stacks 3.0.0-beta.3 → 3.0.0-beta.4

package/dist/css/stacks.css

@@ -2933,45 +2933,100 @@ body.theme-highcontrast .s-link-preview a.s-link-preview--title.s-link__visited:
   white-space: nowrap;
 }
 .s-menu {
-  --_me-divider-bg: var(--bc-light);
-  --_me-label-btc: var(--bc-light);
-  --_me-label-cursor: pointer;
+  --_me-action-bg: unset;
+  --_me-action-fc: var(--black-500);
+  --_me-item-p: var(--su8);
+  --_me-after-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m14 3.88-.44.44-7.34 7.35-.44.44-.44-.44-2.9-2.9L2 8.34l.89-.88.44.44 2.45 2.45 6.9-6.9.44-.44z'/%3E%3C/svg%3E");
   list-style: none;
   margin: 0;
   padding: 0;
 }
-@media (prefers-color-scheme: dark) {
-  body.theme-system .s-menu {
-    --_me-divider-bg: var(--bc-light);
-    --_me-label-btc: var(--bc-light);
-  }
-}
-body.theme-dark .s-menu,
-.theme-dark__forced .s-menu,
-body.theme-system .theme-dark__forced .s-menu {
-  --_me-divider-bg: var(--bc-light);
-  --_me-label-btc: var(--bc-light);
-}
 .s-menu .s-menu--divider {
-  background-color: var(--_me-divider-bg);
+  background-color: var(--black-200);
   height: var(--su-static1);
   margin: var(--su8) 0;
 }
-.s-menu .s-menu--label {
-  border-top: var(--su-static1) solid var(--_me-label-btc);
-  cursor: var(--_me-label-cursor);
-  padding: var(--su12);
+.s-menu .s-menu--icon {
+  color: inherit;
+  margin-right: var(--su8);
+}
+.s-menu .s-menu--item {
+  color: var(--_me-action-fc);
+  padding: var(--_me-item-p);
+  align-items: center;
+  display: flex;
+  width: 100%;
+}
+.s-menu .s-menu--item:has(> .s-menu--action) {
+  --_me-item-p: 0;
+}
+.s-menu .s-menu--item.s-check-control {
+  --_me-item-p: var(--su6) var(--su8);
+  align-items: flex-start;
+}
+.s-menu .s-menu--item.s-check-control .s-radio,
+.s-menu .s-menu--item.s-check-control .s-checkbox {
+  margin-top: var(--su4);
+}
+.s-menu .s-menu--item:not(.s-check-control) .s-radio,
+.s-menu .s-menu--item:not(.s-check-control) .s-checkbox {
+  height: 0;
+  pointer-events: none;
+  position: absolute;
+  opacity: 0;
+  width: 0;
+}
+.s-menu .s-menu--action {
+  background-color: var(--_me-action-bg);
+  color: var(--_me-action-fc);
+  align-items: center;
+  border-radius: var(--br-md);
+  cursor: pointer;
+  display: flex;
+  padding: var(--su8);
+  width: 100%;
+}
+.s-menu .s-menu--action:focus-visible,
+.s-menu .s-menu--action:has(> input:focus-visible) {
+  box-shadow: inset 0 0 0 var(--su-static2) var(--focus-theme), inset 0 0 0 var(--su-static4) var(--focus-neutral);
+  outline: var(--su-static2) solid transparent !important;
+}
+.s-menu .s-menu--action:focus-visible,
+.s-menu .s-menu--action:has(> input:focus-visible),
+.s-menu .s-menu--action:hover {
+  --_me-action-bg: var(--black-150);
+  --_me-action-fc: var(--black-600);
+}
+.s-menu .s-menu--action__danger {
+  --_me-action-fc: var(--red-400);
+}
+.s-menu .s-menu--action__danger:focus-visible,
+.s-menu .s-menu--action__danger:hover {
+  --_me-action-fc: var(--red-500);
+}
+.s-menu .s-menu--action.is-selected:after,
+.s-menu .s-menu--action:has(input:checked):after {
+  background-color: var(--_me-action-fc);
+  content: "";
+  height: var(--su16);
+  margin-left: auto;
+  width: var(--su16);
+  mask-image: var(--_me-after-mask);
+  mask-size: contain;
+  mask-repeat: no-repeat;
 }
-.s-menu .s-menu--label.is-disabled {
-  --_me-label-cursor: not-allowed;
+.s-menu button.s-menu--action {
+  border: none;
+  font-family: inherit;
+  line-height: inherit;
+  text-align: left;
 }
 .s-menu .s-menu--title {
-  color: var(--black-500);
-  font-size: var(--fs-fine);
-  padding: var(--su8) var(--su12);
-  text-transform: uppercase;
+  color: var(--black-600);
+  font-weight: 700;
+  padding: var(--su6) var(--su8);
 }
-.s-menu li + .s-menu--title {
+.s-menu .s-menu--item + .s-menu--title {
   margin-top: var(--su12);
 }
 .s-modal {
@@ -3507,63 +3562,64 @@ ul.s-pagination {
   padding: 0;
 }
 .s-pagination .s-pagination--item {
-  --_pa-item-bg: transparent;
-  --_pa-item-bc: var(--bc-darker);
-  --_pa-item-fc: var(--fc-medium);
-  --_pa-item-bg-focus: var(--black-400);
-  --_pa-item-fc-focus: var(--white);
-  --_pa-item-bg-hover: var(--black-225);
-  --_pa-item-bc-hover: var(--bc-darker);
-  --_pa-item-fc-hover: var(--fc-dark);
+  --_pa-item-bg: unset;
+  --_pa-item-br: unset;
+  --_pa-item-fc: var(--black-400);
+  --_pa-item-p: var(--su-static4);
   background-color: var(--_pa-item-bg);
-  border: 1px solid var(--_pa-item-bc);
+  border-radius: var(--_pa-item-br);
   color: var(--_pa-item-fc);
-  border-radius: var(--br-md);
-  display: inline-block;
-  font-size: var(--fs-body1);
-  line-height: var(--lh-xl);
-  padding: 0 var(--su8);
-}
-body.theme-highcontrast .s-pagination .s-pagination--item {
-  text-decoration: none;
+  padding: var(--_pa-item-p);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: var(--su-static1);
+  position: relative;
 }
 .s-pagination .s-pagination--item.is-selected {
-  --_pa-item-bg: var(--theme-primary);
-  --_pa-item-bc: transparent;
-  --_pa-item-fc: var(--white);
-  --_pa-item-bg-focus: var(--theme-primary-400);
-}
-.s-pagination .s-pagination--item.s-pagination--item__clear {
-  --_pa-item-bg: transparent;
-  --_pa-item-bc: transparent;
-  --_pa-item-fc: inherit;
-}
-.s-pagination .s-pagination--item.is-selected,
-.s-pagination .s-pagination--item.s-pagination--item__clear {
-  --_pa-item-bc-hover: var(--_pa-item-bc);
-  --_pa-item-bg-hover: var(--_pa-item-bg);
-  --_pa-item-fc-hover: var(--_pa-item-fc);
-}
-.s-pagination .s-pagination--item:hover {
-  background-color: var(--_pa-item-bg-hover);
-  border-color: var(--_pa-item-bc-hover);
-  color: var(--_pa-item-fc-hover);
+  --_pa-item-fc: var(--black-600);
+}
+.s-pagination .s-pagination--item.is-selected:not(:hover):not(:focus-visible):before {
+  background-color: var(--black-600);
+  content: "";
+  height: var(--su-static2);
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 100%;
+}
+.s-pagination .s-pagination--item.s-pagination--item__nav {
+  --_pa-item-bg: var(--black-150);
+  --_pa-item-br: var(--br-circle);
+  --_pa-item-fc: var(--black-600);
+  --_pa-item-p: var(--su-static6);
+  aspect-ratio: 1 / 1;
+}
+.s-pagination .s-pagination--item.s-pagination--item__nav:hover {
+  --_pa-item-bg: var(--black-200);
+}
+.s-pagination .s-pagination--item[href]:hover:not(.s-pagination .s-pagination--item__nav) {
+  --_pa-item-bg: var(--black-150);
+  --_pa-item-br: var(--br-pill);
+  --_pa-item-fc: var(--black-600);
 }
 .s-pagination .s-pagination--item:focus-visible {
-  border-color: var(--focus-theme) !important;
-  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);
+  --_pa-item-bg: var(--black-150);
+  --_pa-item-fc: var(--black-600);
+  border-color: var(--focus-neutral) !important;
+  box-shadow: 0 0 0 var(--su-static1) var(--focus-neutral), 0 0 0 calc(var(--su-static4) - var(--su-static1)) var(--focus-theme);
   outline: var(--su-static2) solid transparent !important;
 }
-.s-pagination .s-pagination--item:focus-visible,
+.s-pagination .s-pagination--item:focus-visible:not(.s-pagination .s-pagination--item__nav),
 .s-pagination .s-pagination--item.focus-inset-bordered {
-  background-color: var(--_pa-item-bg-focus);
-  color: var(--_pa-item-fc-focus);
+  --_pa-item-br: var(--br-md);
 }
 .s-pagination,
 .s-pagination ul {
   display: flex;
+  align-items: center;
   flex-wrap: wrap;
-  gap: var(--su4);
+  gap: var(--su2);
 }
 .s-popover {
   --_po-bg: var(--white);
@@ -3575,7 +3631,7 @@ body.theme-highcontrast .s-pagination .s-pagination--item {
   --_po-topbar-height: var(--theme-topbar-height, calc(var(--su-static48) + var(--su-static8)));
   --_po-content-mxh: calc(100vh - var(--_po-topbar-height) - var(--su48));
   background-color: var(--_po-bg);
-  border: 1px solid var(--_po-bc);
+  border: var(--su-static1) solid var(--_po-bc);
   box-shadow: var(--_po-bs);
   display: var(--_po-d);
   min-width: var(--_po-wmn);
@@ -3591,17 +3647,13 @@ body.theme-highcontrast .s-pagination .s-pagination--item {
 }
 @media (prefers-color-scheme: dark) {
   body.theme-system .s-popover {
-    --_po-bg: var(--black-200);
-    --_po-bc: var(--bc-light);
-    --_po-bs: var(--bs-lg);
+    --_po-bg: var(--black-100);
   }
 }
 body.theme-dark .s-popover,
 .theme-dark__forced .s-popover,
 body.theme-system .theme-dark__forced .s-popover {
-  --_po-bg: var(--black-200);
-  --_po-bc: var(--bc-light);
-  --_po-bs: var(--bs-lg);
+  --_po-bg: var(--black-100);
 }
 .s-popover.is-visible {
   --_po-d: block;
@@ -6907,12 +6959,12 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
   --black-500: #f2ede9;
   --black-600: #ffffff;
   --black: #ffffff;
-  --orange-100: hsl(22, 80%, 25%);
-  --orange-200: hsl(22, 75%, 45%);
-  --orange-300: hsl(22, 47%, 78%);
-  --orange-400: hsl(22, 40%, 90%);
-  --orange-500: hsl(22, 30%, 99%);
-  --orange-600: hsl(22, 20%, 98%);
+  --orange-100: #401f0d;
+  --orange-200: #733c1d;
+  --orange-300: #c78c69;
+  --orange-400: #e6ab8a;
+  --orange-500: #fcccb1;
+  --orange-600: #fadac8;
   --blue-100: #22304d;
   --blue-200: #4d6699;
   --blue-300: #7b93e0;
@@ -7045,12 +7097,12 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
     --black-500: #f2ede9;
     --black-600: #ffffff;
     --black: #ffffff;
-    --orange-100: hsl(22, 80%, 25%);
-    --orange-200: hsl(22, 75%, 45%);
-    --orange-300: hsl(22, 47%, 78%);
-    --orange-400: hsl(22, 40%, 90%);
-    --orange-500: hsl(22, 30%, 99%);
-    --orange-600: hsl(22, 20%, 98%);
+    --orange-100: #401f0d;
+    --orange-200: #733c1d;
+    --orange-300: #c78c69;
+    --orange-400: #e6ab8a;
+    --orange-500: #fcccb1;
+    --orange-600: #fadac8;
     --blue-100: #22304d;
     --blue-200: #4d6699;
     --blue-300: #7b93e0;