@stackoverflow/stacks 3.0.0-beta.6 → 3.0.0-beta.8

package/dist/css/stacks.css

@@ -619,81 +619,76 @@ body.theme-highcontrast .s-avatar .s-avatar--letter {
 }
 .s-badge {
   --_ba-as: unset;
-  --_ba-bc: var(--bc-medium);
+  --_ba-bc: transparent;
   --_ba-bg: var(--black-150);
-  --_ba-fc: var(--black-500);
+  --_ba-fc: var(--black-600);
   --_ba-fs: var(--fs-caption);
-  --_ba-fw: normal;
-  --_ba-g: 0.3em;
-  --_ba-lh: 2;
   --_ba-px: var(--su6);
-  --_ba-py: 0;
+  --_ba-py: var(--su4);
   --_ba-tt: unset;
   --_ba-wmn: 0;
+  --_ba-bl: 0;
+  --_ba-fw: unset;
   align-self: var(--_ba-as);
   background-color: var(--_ba-bg);
-  border: var(--su-static1) solid var(--_ba-bc);
+  border-left: var(--_ba-bl) solid var(--_ba-bc);
   color: var(--_ba-fc);
   font-size: var(--_ba-fs);
-  gap: var(--_ba-g);
   font-weight: var(--_ba-fw);
-  line-height: var(--_ba-lh);
-  min-width: var(--_ba-wmn);
+  gap: var(--_ba-px);
   padding: var(--_ba-py) var(--_ba-px);
+  line-height: var(--lh-md);
+  min-width: var(--_ba-wmn);
   text-transform: var(--_ba-tt);
   align-items: center;
-  border-radius: var(--br-md);
   display: inline-flex;
   justify-content: center;
   text-decoration: none;
   vertical-align: middle;
   white-space: nowrap;
 }
-body.theme-highcontrast .s-badge__gold,
-body.theme-highcontrast .s-badge__silver,
-body.theme-highcontrast .s-badge__bronze,
-body.theme-highcontrast .s-badge__rep,
-body.theme-highcontrast .s-badge__rep-down,
-body.theme-highcontrast .s-badge__votes:not(.s-badge__answered),
-body.theme-highcontrast .s-badge__admin,
-body.theme-highcontrast .s-badge__moderator,
-body.theme-highcontrast .s-badge__staff {
-  --_ba-bc: currentColor;
-}
-body.theme-highcontrast .s-badge__new {
-  --_ba-fc: var(--purple-600);
-}
-.s-badge.s-badge__xs,
 .s-badge.s-badge__sm {
+  --_ba-wmn: calc(var(--su-static16) + var(--su-static2));
   --_ba-as: flex-start;
   --_ba-fs: var(--fs-fine);
+  --_ba-px: var(--su4);
+  --_ba-py: var(--su1);
 }
-.s-badge.s-badge__xs {
-  --_ba-lh: 1.5;
-  --_ba-px: var(--su2);
-  --_ba-wmn: calc(var(--su-static16) + var(--su-static2));
+.s-badge.s-badge__lg {
+  --_ba-fs: var(--fs-body1);
+  --_ba-px: var(--su8);
+  --_ba-py: calc(var(--su4) + var(--su1));
 }
-.s-badge.s-badge__sm {
-  --_ba-lh: 1.8;
-  --_ba-px: var(--su4);
-  --_ba-wmn: calc(var(--su-static16) + var(--su-static2));
+.s-badge .s-bling__filled {
+  margin: calc(var(--_ba-py) * -1) 0 calc(var(--_ba-py) * -1) calc(var(--_ba-px) * -1);
+}
+.s-badge:has(.s-bling__rep) {
+  --_ba-fw: 600;
 }
 .s-badge.s-badge__gold,
 .s-badge.s-badge__silver,
 .s-badge.s-badge__bronze {
-  --_ba-fc: var(--black-500);
+  --_ba-bl: var(--su4);
+}
+.s-badge.s-badge__gold .s-bling__gold,
+.s-badge.s-badge__silver .s-bling__gold,
+.s-badge.s-badge__bronze .s-bling__gold,
+.s-badge.s-badge__gold .s-bling__silver,
+.s-badge.s-badge__silver .s-bling__silver,
+.s-badge.s-badge__bronze .s-bling__silver,
+.s-badge.s-badge__gold .s-bling__bronze,
+.s-badge.s-badge__silver .s-bling__bronze,
+.s-badge.s-badge__bronze .s-bling__bronze {
+  margin-left: -2px;
 }
 .s-badge.s-badge__gold {
   --_ba-bc: var(--yellow-300);
-  --_ba-bg: var(--yellow-100);
 }
 .s-badge.s-badge__silver {
   --_ba-bc: var(--blue-300);
-  --_ba-bg: var(--blue-100);
 }
 .s-badge.s-badge__bronze {
   --_ba-bc: var(--orange-300);
-  --_ba-bg: var(--orange-100);
 }
 .s-badge.s-badge__answered,
 .s-badge.s-badge__bounty,
@@ -727,59 +722,47 @@ body.theme-highcontrast .s-badge__new {
   --_ba-bc: var(--black-250);
   --_ba-fc: var(--black-500);
 }
-.s-badge.s-badge__admin {
-  --_ba-bc: var(--theme-primary-200);
-  --_ba-bg: var(--theme-primary-100);
-  --_ba-fc: var(--theme-primary-500);
+.s-badge.s-badge__admin,
+.s-badge.s-badge__moderator,
+.s-badge.s-badge__staff,
+.s-badge.s-badge__ai,
+.s-badge.s-badge__bot {
+  --_ba-bl: var(--su4);
 }
 .s-badge.s-badge__moderator {
-  --_ba-bc: var(--theme-secondary-300);
-  --_ba-bg: var(--theme-secondary-200);
-  --_ba-fc: var(--theme-secondary-600);
-  --_ba-g: calc(var(--su-static4) - var(--su-static1));
-  --_ba-before-h: calc(var(--su-static16) - var(--su-static2));
-  --_ba-before-icon: url("data:image/svg+xml;,%3Csvg width='12' height='14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.528.746c.257-.329.675-.327.93 0l4.42 5.66c.258.329.257.864 0 1.192l-4.42 5.66c-.256.328-.674.327-.93 0l-4.42-5.66c-.257-.329-.256-.865 0-1.192l4.42-5.66z' fill='%23fff'/%3E%3C/svg%3E");
-  --_ba-before-mt: calc(var(--su-static1) * -1);
-  --_ba-before-w: var(--su-static12);
-}
-.s-badge.s-badge__moderator.s-badge__xs {
-  --_ba-before-h: calc(var(--su-static8) + var(--su-static1));
-  --_ba-before-icon: url("data:image/svg+xml;,%3Csvg width='7' height='9' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 .246c.3-.329.701-.327 1 0L6.776 4c.3.329.298.672 0 1L4 8.75c-.299.329-.702.327-1 0L.224 5c-.284-.324-.285-.675 0-1L3 .246z' fill='%23fff'/%3E%3C/svg%3E");
-  --_ba-before-mt: 0;
-  --_ba-before-w: calc(var(--su-static8) - var(--su-static1));
+  --_ba-bc: var(--blue-500);
+  --_ba-before-h: calc(var(--su12) + var(--su1));
+  --_ba-before-w: calc(var(--su12) - var(--su1));
+  --_ba-before-icon: url("data:image/svg+xml;,%3Csvg width='11' height='13' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.528.746c.257-.329.675-.327.93 0l4.42 5.66c.258.329.257.864 0 1.192l-4.42 5.66c-.256.328-.674.327-.93 0l-4.42-5.66c-.257-.329-.256-.865 0-1.192l4.42-5.66z' fill='%23fff'/%3E%3C/svg%3E");
 }
 .s-badge.s-badge__moderator.s-badge__sm {
-  --_ba-g: var(--su-static2);
-  --_ba-before-h: calc(var(--su-static12) - var(--su-static1));
+  --_ba-before-h: calc(var(--su12) - var(--su1));
+  --_ba-before-w: calc(var(--su8) + var(--su1));
   --_ba-before-icon: url("data:image/svg+xml;,%3Csvg width='9' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.55.246c.257-.329.647-.327.903 0l3.36 4.66c.256.329.256.864 0 1.192L4.45 10.75c-.257.329-.644.327-.9 0L.192 6.098c-.256-.329-.256-.865 0-1.192L3.55.246z' fill='%23fff'/%3E%3C/svg%3E");
-  --_ba-before-mt: 0;
-  --_ba-before-w: calc(var(--su-static8) + var(--su-static1));
 }
 .s-badge.s-badge__moderator:before {
   height: var(--_ba-before-h);
-  margin-top: var(--_ba-before-mt);
+  margin-top: calc(var(--su1) * -1);
   width: var(--_ba-before-w);
   content: "";
   display: inline-block;
-  background-color: currentColor;
+  background-color: var(--_ba-bc);
   -webkit-mask: var(--_ba-before-icon) no-repeat center;
   mask: var(--_ba-before-icon) no-repeat center;
   -webkit-mask-size: contain;
   mask-size: contain;
 }
 .s-badge.s-badge__staff {
-  --_ba-bc: var(--orange-300);
-  --_ba-bg: var(--orange-200);
-  --_ba-fc: var(--orange-600);
+  --_ba-bc: var(--orange-400);
+}
+.s-badge.s-badge__admin {
+  --_ba-bc: var(--theme-primary-500, var(--orange-500));
 }
 .s-badge.s-badge__ai {
-  --_ba-bc: var(--_ba-fc);
-  --_ba-bg: var(--black-050);
-  --_ba-fc: var(--orange-500);
-  --_ba-tt: uppercase;
+  --_ba-bc: var(--purple-400);
 }
 .s-badge.s-badge__bot {
-  --_ba-bc: var(--black-300);
+  --_ba-bc: var(--black-400);
 }
 .s-badge.s-badge__danger.s-badge__filled,
 .s-badge.s-badge__muted.s-badge__filled {
@@ -817,7 +800,6 @@ body.theme-highcontrast .s-badge__new {
   --_ba-bc: var(--_ba-bg);
   --_ba-bg: var(--purple-100);
   --_ba-fc: var(--purple-400);
-  --_ba-fw: bold;
   --_ba-tt: uppercase;
 }
 .s-badge--image,
@@ -1061,10 +1043,6 @@ body.theme-highcontrast .s-banner__warning.s-banner__important {
   display: inline-flex;
   justify-content: center;
 }
-.s-bling.s-bling__gold,
-.s-bling.s-bling__silver {
-  --_bl-icon-size: calc(var(--su8) + var(--su2));
-}
 .s-bling.s-bling__activity {
   --_bl-icon-bg: var(--pink-400);
 }
@@ -1104,13 +1082,26 @@ body.theme-highcontrast .s-banner__warning.s-banner__important {
   --_bl-bg: var(--orange-300);
   --_bl-icon-bg: var(--orange-600);
 }
-.s-bling.s-bling__sm {
-  --_bl-icon-size: var(--su6);
+.s-bling.s-bling__sm:not(.s-bling__filled) {
+  --_bl-size: var(--su8);
+}
+.s-bling.s-bling__sm.s-bling__filled {
   --_bl-size: var(--su16);
 }
-.s-bling.s-bling__lg {
+.s-bling.s-bling__lg.s-bling__filled {
   --_bl-size: calc(var(--su24) + var(--su4));
 }
+.s-bling.s-bling__sm {
+  --_bl-icon-size: var(--su6);
+}
+.s-bling.s-bling__sm.s-bling__gold,
+.s-bling.s-bling__sm.s-bling__silver {
+  --_bl-icon-size: calc(var(--su6) + var(--su1));
+}
+.s-bling.s-bling__gold:not(.s-bling__sm),
+.s-bling.s-bling__silver:not(.s-bling__sm) {
+  --_bl-icon-size: calc(var(--su8) + var(--su1));
+}
 .s-bling:before {
   -webkit-mask: var(--_bl-icon) no-repeat center;
   mask: var(--_bl-icon) no-repeat center;
@@ -2380,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%;
@@ -2410,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;
@@ -2899,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);
@@ -2919,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);
-}
-@media (prefers-color-scheme: dark) {
-  body.theme-highcontrast.theme-system .s-modal {
-    --_mo-dialog-bg: var(--black-200);
-  }
+  --_mo-dialog-bg: var(--black-100);
 }
-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 {
@@ -2963,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;
@@ -2981,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);
@@ -2993,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));
@@ -3015,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);
@@ -3130,12 +3116,8 @@ body.theme-highcontrast .s-navigation {
   height: var(--_na-item-selected-h);
   background-color: var(--_na-item-selected-fc);
 }
-body.theme-highcontrast .s-navigation .s-navigation--item.is-selected:before {
-  height: 0;
-}
 body.theme-highcontrast .s-navigation .s-navigation--item.is-selected {
   --_na-item-fc-hover: var(--white);
-  box-shadow: inset 0 0 0 var(--su-static1) var(--black-500);
 }
 .s-navigation .s-navigation--item__dropdown:after {
   mask-image: var(--_na-after-mask);
@@ -4734,15 +4716,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;
 }
@@ -4774,28 +4756,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 {
@@ -4813,24 +4781,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);
@@ -4842,7 +4813,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;
@@ -4851,7 +4822,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 {