@stackoverflow/stacks 3.0.0-beta.24 → 3.0.0-beta.26

package/dist/css/stacks.css

@@ -680,7 +680,7 @@ body:not(.theme-highcontrast).theme-system .theme-light__forced .themed {
   --highlight-attribute: hsl(206, 98.5%, 29%);
   --highlight-bg: hsl(0, 0%, 96.5%);
   --highlight-color: var(--black-600);
-  --highlight-comment: hsl(210, 8%, 43.5%);
+  --highlight-comment: var(--black-400);
   --highlight-deletion: var(--red-500);
   --highlight-keyword: hsl(206, 98.5%, 29%);
   --highlight-literal: hsl(27, 99%, 36%);
@@ -820,7 +820,7 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
   --highlight-attribute: var(--blue-400);
   --highlight-bg: hsl(0, 2%, 11%);
   --highlight-color: var(--black);
-  --highlight-comment: hsl(0, 0%, 60%);
+  --highlight-comment: var(--black-400);
   --highlight-deletion: var(--red-500);
   --highlight-keyword: var(--blue-400);
   --highlight-literal: hsl(27, 95%, 65%);
@@ -958,7 +958,7 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
     --highlight-attribute: var(--blue-400);
     --highlight-bg: hsl(0, 2%, 11%);
     --highlight-color: var(--black);
-    --highlight-comment: hsl(0, 0%, 60%);
+    --highlight-comment: var(--black-400);
     --highlight-deletion: var(--red-500);
     --highlight-keyword: var(--blue-400);
     --highlight-literal: hsl(27, 95%, 65%);
@@ -1096,7 +1096,7 @@ body.theme-highcontrast.theme-system .theme-light__forced {
   --highlight-attribute: hsl(215, 100%, 35%);
   --highlight-bg: hsl(0, 0%, 96.5%);
   --highlight-color: var(--black-600);
-  --highlight-comment: hsl(213, 7%, 33%);
+  --highlight-comment: var(--black-400);
   --highlight-deletion: var(--red-400);
   --highlight-keyword: hsl(215, 100%, 35%);
   --highlight-literal: hsl(16, 94%, 31%);
@@ -1216,7 +1216,7 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
   --highlight-attribute: hsl(200, 57%, 85%);
   --highlight-bg: hsl(0, 0%, 10%);
   --highlight-color: hsl(0, 0%, 100%);
-  --highlight-comment: hsl(0, 0%, 99%);
+  --highlight-comment: var(--black-400);
   --highlight-deletion: var(--red-500);
   --highlight-keyword: hsl(200, 57%, 85%);
   --highlight-literal: hsl(36, 96%, 71%);
@@ -1336,7 +1336,7 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
     --highlight-attribute: hsl(200, 57%, 85%);
     --highlight-bg: hsl(0, 0%, 10%);
     --highlight-color: hsl(0, 0%, 100%);
-    --highlight-comment: hsl(0, 0%, 99%);
+    --highlight-comment: var(--black-400);
     --highlight-deletion: var(--red-500);
     --highlight-keyword: hsl(200, 57%, 85%);
     --highlight-literal: hsl(36, 96%, 71%);
@@ -10809,7 +10809,7 @@ p.s-anchors > a[href],
 }
 .s-avatar {
   --_av-size: var(--su16);
-  --_av-bg: var(--_white-static);
+  --_av-bg: var(--white);
   --_av-fs-letter: calc(var(--su12) - var(--su1));
   --_av-scale-badge: 1;
   background-color: var(--_av-bg);
@@ -10895,7 +10895,6 @@ body.theme-highcontrast .s-avatar .s-avatar--letter {
   transform: translate(-50%, 60%);
 }
 .s-badge {
-  --_ba-as: unset;
   --_ba-bc: transparent;
   --_ba-bg: var(--black-100);
   --_ba-fc: var(--black-500);
@@ -10906,48 +10905,83 @@ body.theme-highcontrast .s-avatar .s-avatar--letter {
   --_ba-wmn: 0;
   --_ba-bl: 0;
   --_ba-fw: unset;
+  --_ba-g: unset;
+  --_ba-svg-p: var(--su2);
   --_ba-sq-bg: var(--black-200);
-  --_ba-bx-sh-w: var(--su2);
-  --_ba-gap: unset;
-  --_ba-bx-sh-inset: ;
-  align-self: var(--_ba-as);
   background-color: var(--_ba-bg);
   border-left: var(--_ba-bl) solid var(--_ba-bc);
   color: var(--_ba-fc);
   font-size: var(--_ba-fs);
   font-weight: var(--_ba-fw);
-  gap: var(--_ba-gap, var(--_ba-px));
-  padding: var(--_ba-py) var(--_ba-px);
-  line-height: var(--lh-md);
+  gap: var(--_ba-g, var(--_ba-px));
+  padding: var(--_ba-py) var(--_ba-pr, var(--_ba-px)) var(--_ba-py) var(--_ba-px);
   min-width: var(--_ba-wmn);
   text-transform: var(--_ba-tt);
   align-items: center;
   display: inline-flex;
   justify-content: center;
+  line-height: var(--lh-md);
   text-decoration: none;
   vertical-align: middle;
   white-space: nowrap;
 }
-.s-badge.s-badge__sm {
-  --_ba-wmn: calc(var(--su16) + var(--su2));
-  --_ba-as: flex-start;
-  --_ba-fs: var(--fs-fine);
-  --_ba-px: var(--su4);
-  --_ba-py: var(--su1);
-  --_ba-bx-sh-w: 0px;
-  --_ba-bx-sh-inset: inset;
+body.theme-highcontrast .s-badge {
+  --_ba-bx-sh-w: var(--su1);
 }
-.s-badge.s-badge__lg {
-  --_ba-fs: var(--fs-body1);
-  --_ba-px: var(--su8);
-  --_ba-py: calc(var(--su4) + var(--su1));
+body.theme-highcontrast .s-badge.s-badge__sm {
+  --_ba-bx-sh-w: 0;
+}
+body.theme-highcontrast .s-badge.s-badge__lg {
   --_ba-bx-sh-w: var(--su4);
 }
-.s-badge .s-bling__filled {
-  margin: calc(var(--_ba-py) * -1) 0 calc(var(--_ba-py) * -1) calc(var(--_ba-px) * -1);
+body.theme-highcontrast .s-badge:not(.s-badge__important) > svg {
+  box-shadow: 0 0 0 calc(var(--_ba-bx-sh-w) - var(--su1)) var(--_ba-sq-bg), 0 0 0 max(var(--su1), var(--_ba-bx-sh-w)) currentcolor inset;
 }
-.s-badge svg {
-  margin: calc(var(--_ba-py) * -1) 0 calc(var(--_ba-py) * -1) var(--sun4);
+body.theme-highcontrast .s-badge a[href],
+body.theme-highcontrast .s-badge a[href]:hover {
+  text-decoration: underline !important;
+}
+.s-badge:has(> .s-bling__filled),
+.s-badge.s-badge__squared,
+.s-badge:has(> svg) {
+  --_ba-pr: var(--su6);
+}
+.s-badge:has(> .s-bling__filled),
+.s-badge.s-badge__squared,
+.s-badge:has(> svg),
+.s-badge:has(> .s-bling__filled).s-badge__lg,
+.s-badge.s-badge__squared.s-badge__lg,
+.s-badge:has(> svg).s-badge__lg,
+.s-badge:has(> .s-bling__filled).s-badge__sm,
+.s-badge.s-badge__squared.s-badge__sm,
+.s-badge:has(> svg).s-badge__sm {
+  --_ba-px: 0;
+  --_ba-py: 0;
+}
+.s-badge:has(> .s-bling__filled).s-badge__lg,
+.s-badge.s-badge__squared.s-badge__lg,
+.s-badge:has(> svg).s-badge__lg {
+  --_ba-pr: var(--su8);
+}
+.s-badge:has(> .s-bling__filled).s-badge__sm,
+.s-badge.s-badge__squared.s-badge__sm,
+.s-badge:has(> svg).s-badge__sm {
+  --_ba-pr: var(--su4);
+}
+.s-badge:has(> .s-bling__filled),
+.s-badge.s-badge__squared {
+  --_ba-g: var(--su6);
+}
+.s-badge:has(> .s-bling__filled).s-badge__lg,
+.s-badge.s-badge__squared.s-badge__lg {
+  --_ba-g: var(--su8);
+}
+.s-badge:has(> .s-bling__filled).s-badge__sm,
+.s-badge.s-badge__squared.s-badge__sm {
+  --_ba-g: var(--su4);
+}
+.s-badge:not(.s-badge__squared):has(> svg) {
+  --_ba-g: var(--su2);
 }
 .s-badge:has(.s-bling__rep) {
   --_ba-fw: 600;
@@ -10956,6 +10990,19 @@ body.theme-highcontrast .s-avatar .s-avatar--letter {
 .s-badge:has(.s-bling) {
   --_ba-bg: var(--black-150);
 }
+.s-badge.s-badge__sm {
+  --_ba-fs: var(--fs-fine);
+  --_ba-px: var(--su4);
+  --_ba-py: var(--su1);
+  --_ba-wmn: calc(var(--su16) + var(--su2));
+  --_ba-svg-p: var(--_ba-py);
+}
+.s-badge.s-badge__lg {
+  --_ba-fs: var(--fs-body1);
+  --_ba-px: var(--su8);
+  --_ba-py: calc(var(--su4) + var(--su1));
+  --_ba-svg-p: var(--_ba-py);
+}
 .s-badge.s-badge__gold,
 .s-badge.s-badge__silver,
 .s-badge.s-badge__bronze {
@@ -10991,6 +11038,18 @@ body.theme-highcontrast .s-avatar .s-avatar--letter {
   --_ba-bg: var(--black-150);
   --_ba-fc: var(--black-600);
 }
+.s-badge.s-badge__moderator:before,
+.s-badge.s-badge__new:before {
+  background-color: var(--_ba-bc);
+  height: var(--_ba-before-h);
+  width: var(--_ba-before-w);
+  -webkit-mask: var(--_ba-before-icon) no-repeat center;
+  mask: var(--_ba-before-icon) no-repeat center;
+  content: "";
+  display: inline-block;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+}
 .s-badge.s-badge__moderator {
   --_ba-bc: var(--blue-500);
   --_ba-before-h: calc(var(--su12) + var(--su1));
@@ -11003,16 +11062,7 @@ body.theme-highcontrast .s-avatar .s-avatar--letter {
   --_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");
 }
 .s-badge.s-badge__moderator:before {
-  height: var(--_ba-before-h);
   margin-top: var(--sun1);
-  width: var(--_ba-before-w);
-  content: "";
-  display: inline-block;
-  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-400);
@@ -11032,30 +11082,13 @@ body.theme-highcontrast .s-avatar .s-avatar--letter {
   --_ba-sq-bg: var(--purple-200);
   --_ba-bc: var(--purple-400);
   --_ba-gap: var(--su2);
-  --_ba-before-h: calc(var(--su12) + var(--su4));
-  --_ba-before-w: calc(var(--su12) + var(--su4));
-  --_ba-before-icon: url("data:image/svg+xml;,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.25 7h7.28l-5.89 4.29.68 2.08-2.07-1.5-.04-.12-.33-1.04.88-.64 2.16-1.56h-3.76l-.34-1.04L10 4.94l-.82 2.53-.34 1.04H5.08l2.16 1.56.88.64-.33 1.04-.83 2.54 2.16-1.57.87-.64 5.12 3.72.78 2.41L10 13.93l-5.9 4.28 2.26-6.92L.46 7h7.29L10 .08z' /%3E%3C/svg%3E");
-}
-.s-badge.s-badge__new.s-badge__sm {
   --_ba-before-h: calc(var(--su12) + var(--su2));
   --_ba-before-w: calc(var(--su12) + var(--su2));
-}
-.s-badge.s-badge__new.s-badge__lg {
-  --_ba-before-h: calc(var(--su12) + var(--su6));
-  --_ba-before-w: calc(var(--su12) + var(--su6));
+  --_ba-before-icon: url("data:image/svg+xml;,%3Csvg width='14' height='14' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 1a7 7 0 1 1 0 14A7 7 0 0 1 8 1m0 1.25a5.75 5.75 0 1 0 0 11.5 5.75 5.75 0 0 0 0-11.5m1 10.06H7V10.6h2zM8.14 4c1.78 0 2.77.96 2.77 2.5 0 1.79-2.1 2.2-2.1 3.25h-1.6c0-2 2-2.08 2-3.26 0-.54-.27-.96-1.02-.96-.7 0-1.03.46-1.1 1.23H5.4A2.75 2.75 0 0 1 8.13 4' fill='%23fff'/%3E%3C/svg%3E");
 }
 .s-badge.s-badge__new:before {
-  height: var(--_ba-before-h);
-  margin-top: 0;
   margin-left: var(--sun2);
-  width: var(--_ba-before-w);
-  content: "";
-  display: inline-block;
-  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;
+  margin-top: 0;
 }
 .s-badge.s-badge__info {
   --_ba-bg: var(--blue-100);
@@ -11120,25 +11153,21 @@ body.theme-highcontrast .s-avatar .s-avatar--letter {
   --_ba-bg: var(--purple-400);
   --_ba-sq-bg: var(--purple-500);
 }
-.s-badge.s-badge__squared {
-  --_ba_box-shadow: 0 0 0 var(--_ba-bx-sh-w) var(--_ba-sq-bg);
-}
 .s-badge.s-badge__squared svg {
   background-color: var(--_ba-sq-bg);
-  box-shadow: var(--_ba_box-shadow);
-  margin-right: var(--_ba-bx-sh-w);
-}
-body.theme-highcontrast .s-badge.s-badge__squared:not(.s-badge__important) {
-  --_ba_box-shadow: 0 0 0 calc(var(--_ba-bx-sh-w) - var(--su1)) var(--_ba-sq-bg), 0 0 0 max(var(--su1), var(--_ba-bx-sh-w)) currentcolor var(--_ba-bx-sh-inset);
-}
-.s-badge:not(.s-badge__squared):has(> svg) {
-  --_ba-gap: calc(var(--_ba-px) - var(--su2));
 }
 .s-badge.s-badge__important {
   --_ba-bg: var(--black-400);
-  --_ba-sq-bg: var(--black-500);
-  --_ba-fw: 600;
   --_ba-fc: var(--black-050);
+  --_ba-fw: 600;
+  --_ba-sq-bg: var(--black-500);
+}
+.s-badge svg {
+  aspect-ratio: 1 / 1;
+  box-sizing: content-box;
+  display: block;
+  height: calc(var(--su16) + var(--su4));
+  padding: var(--_ba-svg-p);
 }
 a.s-badge:hover {
   text-decoration: none;
@@ -14454,35 +14483,24 @@ body.theme-highcontrast .s-prose {
     --_pr-spoiler-after-t: calc(var(--su8) + var(--su1));
   }
 }
-.s-prose.s-prose__xs,
-.s-prose.s-prose__sm,
-.s-prose.s-prose__md {
+.s-prose.s-prose__sm {
   --_pr-h1-fs: 1.75em;
   --_pr-h2-fs: 1.375em;
   --_pr-h3-fs: 1.25em;
   --_pr-h4-fs: 1.125em;
   --_pr-h5-fs: 1em;
-}
-.s-prose.s-prose__xs {
   --_pr-fs: var(--fs-caption);
-  --_pr-lh: var(--lh-sm);
-}
-.s-prose.s-prose__sm {
-  --_pr-fs: var(--fs-body1);
   --_pr-lh: var(--lh-md);
-}
-.s-prose.s-prose__md {
-  --_pr-fs: var(--fs-body3);
-  --_pr-lh: var(--lh-xl);
+  --_pr-code-fs: var(--fs-caption);
 }
 .s-prose *:not(.s-code-block) > a code {
   color: var(--theme-link-color, var(--theme-secondary-400));
 }
 .s-prose *:not(.s-code-block) > code {
-  padding: var(--su2) var(--su4);
-  color: var(--black-600);
   background-color: var(--black-200);
-  border-radius: var(--br-md);
+  color: var(--black-600);
+  font-size: 0.875em;
+  padding: 0.1875em 0.375em;
 }
 .s-prose blockquote:last-child,
 .s-prose dl:last-child,
@@ -14807,7 +14825,7 @@ body.theme-highcontrast .s-prose {
   --_pr-img-mb: 0;
   margin-bottom: 1.1em;
 }
-.s-prose p a {
+.s-prose p a:not([class]) {
   text-decoration: underline;
 }
 .s-prose pre {
@@ -14884,7 +14902,7 @@ body.theme-highcontrast .s-prose {
 }
 .s-prose .spoiler > * {
   opacity: var(--_pr-soiler-child-o);
-  transition: opacity 0.1s ease-in-out;
+  transition: var(--_pr-spoiler-transition);
   visibility: var(--_pr-soiler-child-visibility);
 }
 .s-prose .youtube-embed {
@@ -15661,7 +15679,7 @@ body.theme-highcontrast .s-tag:not(body.theme-highcontrast .s-tag__moderator):no
   min-width: var(--su448);
 }
 .s-toggle-switch {
-  --_ts-bg: var(--black-350);
+  --_ts-bg: var(--black-300);
   --_ts-bg-image: url("data:image/svg+xml;,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
   --_ts-bg-ps: left center;
   --_ts-multiple-bg: unset;
@@ -15687,6 +15705,9 @@ fieldset[disabled] .s-toggle-switch label,
 .s-toggle-switch.s-toggle-switch__multiple {
   align-items: stretch;
   display: flex;
+  border: var(--su2) solid var(--black-150);
+  border-radius: var(--br-pill);
+  background-color: var(--black-150);
 }
 .s-toggle-switch.s-toggle-switch__multiple input[type="radio"] {
   left: -999em;
@@ -15694,13 +15715,12 @@ fieldset[disabled] .s-toggle-switch label,
   opacity: 0;
   position: absolute;
 }
-.s-toggle-switch.s-toggle-switch__multiple input[type="radio"]:checked + label.s-toggle-switch--label-off {
-  --_ts-multiple-bg: var(--black-400);
-  --_ts-multiple-fc: var(--white);
+.s-toggle-switch.s-toggle-switch__multiple input[type="radio"]:checked + label {
+  --_ts-multiple-bg: var(--black-050);
+  --_ts-multiple-fc: var(--black);
 }
-.s-toggle-switch.s-toggle-switch__multiple input[type="radio"]:checked + label:not(.s-toggle-switch--label-off) {
-  --_ts-multiple-bg: var(--green-400);
-  --_ts-multiple-fc: var(--white);
+.s-toggle-switch.s-toggle-switch__multiple input[type="radio"]:not(:checked) + label {
+  --_ts-multiple-fc: var(--black-400);
 }
 .s-toggle-switch.s-toggle-switch__multiple input[type="radio"]:focus-visible + label {
   box-shadow: inset 0 0 0 var(--su2) var(--focus-theme), inset 0 0 0 var(--su4) var(--focus-neutral);
@@ -15709,13 +15729,13 @@ fieldset[disabled] .s-toggle-switch label,
 .s-toggle-switch.s-toggle-switch__multiple label {
   background-color: var(--_ts-multiple-bg);
   color: var(--_ts-multiple-fc);
-  border-radius: 1000px;
+  border-radius: var(--br-pill);
   cursor: pointer;
   font-size: var(--fs-body1);
   font-weight: 400;
   line-height: 1;
   margin: 0;
-  padding: 0.5em 0.7em;
+  padding: calc(var(--su4) + var(--su1)) calc(var(--su8) + var(--su2));
   text-align: center;
   white-space: nowrap;
   width: 100%;
@@ -15723,7 +15743,6 @@ fieldset[disabled] .s-toggle-switch label,
   -webkit-user-select: none;
   user-select: none;
 }
-.s-toggle-switch input[type="checkbox"],
 input[type="checkbox"].s-toggle-switch {
   background-color: var(--_ts-bg);
   background-position: var(--_ts-bg-ps);
@@ -15740,17 +15759,14 @@ input[type="checkbox"].s-toggle-switch {
   vertical-align: top;
   width: calc(var(--su48) - var(--su4));
 }
-.s-toggle-switch input[type="checkbox"]:checked,
 input[type="checkbox"].s-toggle-switch:checked {
   --_ts-bg: var(--green-400);
   --_ts-bg-ps: right center;
 }
-.s-toggle-switch input[type="checkbox"]:focus-visible,
 input[type="checkbox"].s-toggle-switch:focus-visible {
   box-shadow: 0 0 0 var(--su2) var(--focus-neutral), 0 0 0 var(--su4) var(--focus-theme);
   outline: var(--su2) solid transparent !important;
 }
-.s-toggle-switch input[type="checkbox"][disabled],
 input[type="checkbox"].s-toggle-switch[disabled] {
   cursor: default;
 }