@stackoverflow/stacks 3.0.0-beta.7 → 3.0.0-beta.9

package/dist/css/stacks.css

@@ -2371,10 +2371,10 @@ body.theme-highcontrast .has-warning .s-textarea {
 }
 .s-input-icon {
   --_ii-fc: unset;
-  --_ii-r: 0.7em;
+  --_ii-r: calc(var(--su-static8) + var(--su-static2));
   color: var(--_ii-fc);
   right: var(--_ii-r);
-  margin-top: calc((var(--su-static8) + var(--su-static1)) * -1);
+  margin-top: calc((var(--su-static8) + var(--su-static2)) * -1);
   pointer-events: none;
   position: absolute;
   top: 50%;
@@ -2401,7 +2401,7 @@ body.theme-highcontrast .is-readonly .s-input-icon {
 .s-input-icon.s-input-icon__search {
   --_ii-r: auto;
   color: var(--black-400);
-  left: 0.7em;
+  left: calc(var(--su-static8) + var(--su-static2));
 }
 .s-input-message {
   --_im-fc: unset;
@@ -2890,10 +2890,9 @@ body.theme-highcontrast .s-link-preview a.s-link-preview--title.s-link__visited:
   --_mo-bg: rgba(33, 29, 30, 0.5);
   --_mo-hmx: unset;
   --_mo-wmx: unset;
-  --_mo-close-t: var(--su8);
   --_mo-dialog-bg: var(--white);
   --_mo-dialog-pt: var(--su24);
-  --_mo-header-fc: var(--fc-dark);
+  --_mo-dialog-ou: 0;
   background-color: var(--_mo-bg);
   max-height: var(--_mo-hmx);
   max-width: var(--_mo-wmx);
@@ -2910,21 +2909,16 @@ body.theme-highcontrast .s-link-preview a.s-link-preview--title.s-link__visited:
 }
 @media (prefers-color-scheme: dark) {
   body.theme-system .s-modal {
-    --_mo-dialog-bg: var(--black-225);
+    --_mo-dialog-bg: var(--black-100);
   }
 }
 body.theme-dark .s-modal,
 .theme-dark__forced .s-modal,
 body.theme-system .theme-dark__forced .s-modal {
-  --_mo-dialog-bg: var(--black-225);
+  --_mo-dialog-bg: var(--black-100);
 }
-@media (prefers-color-scheme: dark) {
-  body.theme-highcontrast.theme-system .s-modal {
-    --_mo-dialog-bg: var(--black-200);
-  }
-}
-body.theme-highcontrast.theme-dark .s-modal {
-  --_mo-dialog-bg: var(--black-200);
+body.theme-highcontrast .s-modal {
+  --_mo-dialog-ou: var(--su2) solid var(--black-500);
 }
 .s-modal[aria-hidden="false"],
 .s-modal[aria-hidden="false"] .s-modal--dialog {
@@ -2954,17 +2948,16 @@ body.theme-highcontrast.theme-dark .s-modal {
 .s-modal.has-danger,
 .s-modal.s-modal__danger {
   --_mo-bg: rgba(2, 0, 0, 0.5);
-  --_mo-header-fc: var(--red-500);
 }
 .s-modal .s-modal--body {
   color: var(--fc-medium);
   margin-bottom: var(--su24);
 }
 .s-modal .s-modal--close {
-  padding: var(--su12) !important;
+  padding: var(--su6) !important;
   position: absolute !important;
-  right: var(--su8);
-  top: var(--_mo-close-t);
+  right: var(--su16);
+  top: var(--su16);
 }
 .s-modal .s-modal--close .svg-icon {
   margin: 0 !important;
@@ -2972,6 +2965,7 @@ body.theme-highcontrast.theme-dark .s-modal {
 .s-modal .s-modal--dialog {
   padding: var(--_mo-dialog-pt) var(--su24) var(--su24);
   scrollbar-color: var(--scrollbar) transparent;
+  position: relative;
   backface-visibility: hidden;
   background-color: var(--_mo-dialog-bg);
   border-radius: var(--br-md);
@@ -2984,6 +2978,7 @@ body.theme-highcontrast.theme-dark .s-modal {
   transition: opacity 200ms var(--te-smooth) 0s, z-index 0s 100ms, visibility 0s 100ms, transform 100ms var(--te-smooth) 0s, transform 100ms var(--te-smooth) 0s;
   visibility: hidden;
   z-index: var(--zi-hide);
+  outline: var(--_mo-dialog-ou);
 }
 .s-modal .s-modal--dialog::-webkit-scrollbar {
   width: calc(var(--su-static12) - var(--su-static2));
@@ -3006,7 +3001,7 @@ body.theme-highcontrast.theme-dark .s-modal {
   margin-top: var(--su24);
 }
 .s-modal .s-modal--header {
-  color: var(--_mo-header-fc);
+  color: var(--fc-dark);
   font-size: var(--fs-headline1);
   font-weight: normal;
   line-height: var(--lh-sm);
@@ -3023,14 +3018,14 @@ body.theme-highcontrast.theme-dark .s-modal {
   --_na-item-fs: unset;
   --_na-item-p: calc(var(--su12) - var(--su1)) var(--su16);
   --_na-item-ws: nowrap;
-  --_na-item-bg-hover: var(--black-150);
+  --_na-item-bg-hover: var(--black-100);
   --_na-item-fc-hover: var(--_na-item-fc);
   --_na-item-selected-bg: none;
   --_na-item-selected-fc: var(--black-600);
   --_na-item-selected-bg-hover: var(--_na-item-bg-hover);
   --_na-item-selected-h: var(--su-static2);
   --_na-item-text-ta: center;
-  --_na-title-mt: var(--su16);
+  --_na-title-mt: var(--su24);
   --_na-after-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M11.35 4.35 6 9.71.65 4.35l.7-.7L6 8.29l4.65-4.64z'/%3E%3C/svg%3E");
   --_na-after-bg-color: var(--black-400);
   flex-direction: var(--_na-fd);
@@ -3164,11 +3159,14 @@ body.theme-highcontrast .s-navigation .s-navigation--item:active {
   margin-top: var(--_na-title-mt);
   font-size: var(--fs-fine);
   color: var(--black-400);
-  padding: var(--su16) var(--su8);
+  padding: calc(var(--su16) + var(--su2)) var(--su8);
 }
 .s-navigation .s-navigation--title:first-child {
   --_na-title-mt: 0;
 }
+.s-navigation .s-navigation--title .s-btn {
+  color: var(--black-400);
+}
 .s-navigation .s-navigation--icon {
   color: inherit;
   margin-right: var(--su4);
@@ -4721,15 +4719,15 @@ body.theme-highcontrast .s-prose {
   width: 100%;
 }
 .s-select {
-  --_se-arrow-bc: currentColor transparent;
-  --_se-arrow-size: var(--su-static4);
+  --_se-arrow-fc: currentColor;
   --_se-select-bc: var(--bc-darker);
   --_se-select-bg: var(--white);
   --_se-select-br: var(--br-md);
   --_se-select-fc: var(--black);
   --_se-select-px: 0.7em;
-  --_se-select-py: 0.6em;
+  --_se-select-py: var(--su-static8);
   --_se-select-fs: var(--fs-body1);
+  --_se-select-lh: var(--lh-base);
   color: var(--fc-dark);
   position: relative;
 }
@@ -4761,28 +4759,14 @@ body.theme-highcontrast .s-prose {
 .has-warning .s-select {
   --_se-select-bc: var(--yellow-500);
 }
-.is-disabled .s-select {
-  --_se-arrow-bc: var(--bc-dark) transparent;
-}
 .s-select.s-select__sm {
   --_se-select-fs: var(--fs-caption);
-}
-.s-select.s-select__md {
-  --_se-select-fs: var(--fs-body3);
-  --_se-select-br: calc(var(--br-md) + var(--su-static1));
-  --_se-select-py: 0.5em;
+  --_se-select-lh: var(--lh-sm);
+  --_se-select-py: calc(var(--su6) - var(--su-static1) / 2);
 }
 .s-select.s-select__lg {
-  --_se-select-fs: var(--fs-title);
-  --_se-select-br: calc(var(--br-md) + var(--su-static1));
-  --_se-select-px: 0.6em;
-  --_se-select-py: 0.45em;
-}
-.s-select.s-select__xl {
-  --_se-select-fs: var(--fs-headline1);
-  --_se-select-br: var(--br-md);
-  --_se-select-px: 0.5em;
-  --_se-select-py: 0.4em;
+  --_se-select-fs: var(--fs-body3);
+  --_se-select-lh: var(--lh-lg);
 }
 select.s-select:-webkit-autofill,
 .s-select > select:-webkit-autofill {
@@ -4800,24 +4784,27 @@ select.s-select::-webkit-contacts-auto-fill-button,
 .s-select > select::-webkit-contacts-auto-fill-button {
   background-color: var(--black);
 }
-.s-select:before,
 .s-select:after {
-  border-color: var(--_se-arrow-bc);
-  border-style: solid;
-  border-width: var(--_se-arrow-size);
+  background-color: currentColor;
   content: "";
+  height: var(--su-static16);
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M13.06 10 8 15.06 2.94 10 4 8.94l.53.53L8 12.94l3.47-3.47.53-.53zm0-4L12 7.06l-.53-.53L8 3.06 4.53 6.53 4 7.06 2.94 6 8 .94z'/%3E%3C/svg%3E");
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: contain;
   pointer-events: none;
   position: absolute;
-  right: calc(var(--su-static12) + var(--su-static1));
+  right: calc(var(--su32) - var(--su-static24));
+  top: 50%;
+  transform: translateY(-50%);
+  width: var(--su-static16);
   z-index: var(--zi-selected);
 }
-.s-select:after {
-  border-bottom-width: 0;
-  top: calc(50% + var(--su-static1));
+.is-disabled .s-select {
+  --_se-arrow-fc: var(--bc-dark);
 }
-.s-select:before {
-  border-top-width: 0;
-  top: calc(50% - calc(var(--_se-arrow-size) + var(--su-static1)));
+.is-disabled .s-select:after {
+  background-color: var(--_se-arrow-fc);
 }
 .s-select > select {
   background-color: var(--_se-select-bg);
@@ -4829,7 +4816,7 @@ select.s-select::-webkit-contacts-auto-fill-button,
   appearance: none;
   font-family: inherit;
   height: 100%;
-  line-height: var(--lh-sm);
+  line-height: var(--_se-select-lh);
   outline: 0;
   padding-right: var(--su32);
   position: relative;
@@ -4838,7 +4825,8 @@ select.s-select::-webkit-contacts-auto-fill-button,
 fieldset[disabled] .s-select > select,
 .s-select > select[disabled] {
   cursor: not-allowed;
-  opacity: var(--_o-disabled-static);
+  --_se-select-fc: var(--black-300);
+  --_se-select-bg: var(--black-100);
 }
 .s-select > select[readonly],
 .is-readonly .s-select > select {