@stackoverflow/stacks 3.0.0-beta.20 → 3.0.0-beta.21

package/dist/css/stacks.css

@@ -869,9 +869,10 @@ a.s-badge:hover {
   --_no-code-fc: var(--_no-fc);
   background: var(--_no-bg);
   color: var(--_no-fc);
-  border-width: 0 0 var(--su-static1);
+  display: flex;
+  align-items: center;
+  padding: var(--su16);
   inset: 0 0 auto 0;
-  padding: var(--su12);
   position: fixed;
   transform: translate3d(0, calc(var(--_no-ty) * var(--_no-ty-offset)), 0);
   width: 100%;
@@ -1001,6 +1002,9 @@ body.theme-highcontrast .s-banner__warning.s-banner__important {
   padding-right: var(--su2);
   white-space: nowrap;
 }
+button.s-banner--dismiss {
+  color: var(--_no-fc);
+}
 button.s-banner--dismiss:active {
   background-color: var(--_no-fc);
   color: var(--_no-bg);
@@ -1011,11 +1015,23 @@ button.s-banner--dismiss.focus-inset-bordered {
   background-color: var(--_no-fc);
   color: var(--_no-bg);
 }
-:has( > button.s-banner--dismiss) {
+.s-banner--actions {
+  display: flex;
+  margin-left: auto;
+  align-self: flex-start;
   padding-left: var(--su24);
+  color: var(--_no-fc);
   gap: calc(var(--su24) - var(--su2));
   overflow-wrap: initial !important;
 }
+.s-banner--actions > .s-link:not(.s-banner--dismiss) {
+  color: var(--_no-fc);
+}
+.s-banner--icon {
+  --_no-icon-bg: transparent;
+  margin-right: var(--su8);
+  align-self: flex-start;
+}
 .s-banner[aria-hidden="true"] {
   --_no-ty-offset: -1;
   opacity: 0;
@@ -1033,12 +1049,6 @@ button.s-banner--dismiss.focus-inset-bordered {
 .s-banner__body-pt {
   padding-top: 93px;
 }
-.s-banner .s-banner--container {
-  margin: 0 auto;
-  max-width: var(--su1024);
-  position: relative;
-  width: 100%;
-}
 .s-bling {
   --_bl-bg: unset;
   --_bl-size: calc(var(--su8) + var(--su2));
@@ -1302,6 +1312,9 @@ body.theme-highcontrast .s-breadcrumbs .s-breadcrumbs--divider {
   --_bu-g: var(--su8);
   --_bu-px: var(--su16);
   --_bu-py: calc(var(--su8) + var(--su2));
+  --_bu-badge-fs: var(--fs-caption);
+  --_bu-badge-px: var(--su6);
+  --_bu-badge-py: var(--su2);
   --_bu-dropdown-bw: var(--su-static4);
   background: linear-gradient(0deg, var(--_bu-bg-selected-overlay, var(--_bu-bg)) 50%, var(--_bu-bg) 50%) padding-box, linear-gradient(0deg, var(--_bu-bg-selected-overlay, var(--_bu-bg)) 50%, var(--_bu-bg) 50%) border-box;
   border: var(--_bu-baw) solid var(--_bu-bc, transparent);
@@ -1326,14 +1339,15 @@ body.theme-highcontrast .s-breadcrumbs .s-breadcrumbs--divider {
 }
 .s-btn:not(.s-btn__danger):not(.s-btn__featured):not(.s-btn__tonal):not(.s-btn__link):not(.s-btn__unset):not(.s-btn__facebook):not(.s-btn__github):not(.s-btn__google) {
   --_bu-bg: var(--theme-button-color, var(--theme-secondary));
-  --_bu-bg-disabled: var(--theme-secondary-300);
+  --_bu-bg-disabled: var(--black-350);
   --_bu-bg-hover: var(--theme-button-hover-background-color, var(--theme-secondary-500));
   --_bu-fc: var(--white);
+  --_bu-fc-disabled: var(--black-050);
   --_bu-fc-hover: var(--theme-button-hover-color, var(--white));
-  --_bu-badge-bg: var(--theme-secondary-200);
-  --_bu-badge-fc: var(--theme-secondary-600);
-  --_bu-badge-bg-disabled: var(--theme-secondary-200);
-  --_bu-badge-fc-disabled: var(--theme-secondary-300);
+  --_bu-badge-bg: var(--theme-secondary-500);
+  --_bu-badge-fc: var(--white);
+  --_bu-badge-bg-disabled: var(--black-250);
+  --_bu-badge-fc-disabled: var(--black-050);
 }
 .s-btn:not(.s-btn__danger):not(.s-btn__featured):not(.s-btn__tonal):not(.s-btn__link):not(.s-btn__unset):not(.s-btn__facebook):not(.s-btn__github):not(.s-btn__google).s-btn__clear {
   --_bu-bg: transparent;
@@ -1343,10 +1357,10 @@ body.theme-highcontrast .s-breadcrumbs .s-breadcrumbs--divider {
   --_bu-fc: var(--theme-secondary-600);
   --_bu-fc-disabled: var(--theme-secondary-300);
   --_bu-fc-hover: var(--_bu-fc);
-  --_bu-badge-bg: var(--theme-secondary-500);
-  --_bu-badge-fc: var(--white);
-  --_bu-badge-bg-disabled: var(--theme-secondary-300);
-  --_bu-badge-fc-disabled: var(--white);
+  --_bu-badge-bg: var(--theme-secondary-100);
+  --_bu-badge-fc: var(--theme-secondary-500);
+  --_bu-badge-bg-disabled: var(--black-100);
+  --_bu-badge-fc-disabled: var(--black-350);
 }
 body.theme-highcontrast .s-btn:not(.s-btn__danger):not(.s-btn__featured):not(.s-btn__tonal):not(.s-btn__link):not(.s-btn__unset):not(.s-btn__facebook):not(.s-btn__github):not(.s-btn__google).s-btn__clear {
   --_bu-bc: var(--theme-secondary-600);
@@ -1355,13 +1369,14 @@ body.theme-highcontrast .s-btn:not(.s-btn__danger):not(.s-btn__featured):not(.s-
   --_bu-bg: var(--red-400);
   --_bu-fc: var(--white);
   --_bu-bg-disabled: var(--red-200);
+  --_bu-fc-disabled: var(--black-050);
   --_bu-bg-hover: var(--red-500);
   --_bu-bg-selected: var(--red-500);
   --_bu-fc-selected: var(--_bu-fc);
-  --_bu-badge-bg: var(--red-100);
-  --_bu-badge-fc: var(--red-400);
-  --_bu-badge-bg-disabled: var(--white);
-  --_bu-badge-fc-disabled: var(--red-200);
+  --_bu-badge-bg: var(--red-500);
+  --_bu-badge-fc: var(--black-050);
+  --_bu-badge-bg-disabled: var(--red-300);
+  --_bu-badge-fc-disabled: var(--black-100);
 }
 .s-btn.s-btn__danger.s-btn__clear {
   --_bu-bg: transparent;
@@ -1372,11 +1387,10 @@ body.theme-highcontrast .s-btn:not(.s-btn__danger):not(.s-btn__featured):not(.s-
   --_bu-fc-disabled: var(--red-200);
   --_bu-fc-hover: var(--red-500);
   --_bu-fc-selected: var(--red-500);
-  --_bu-badge-bg: var(--red-400);
-  --_bu-badge-bg-selected: var(--red-400);
-  --_bu-badge-fc: var(--red-100);
-  --_bu-badge-bg-disabled: var(--red-200);
-  --_bu-badge-fc-disabled: var(--white);
+  --_bu-badge-bg: var(--red-100);
+  --_bu-badge-fc: var(--red-500);
+  --_bu-badge-bg-disabled: var(--red-100);
+  --_bu-badge-fc-disabled: var(--red-300);
 }
 body.theme-highcontrast .s-btn.s-btn__danger.s-btn__clear {
   --_bu-bc: var(--red-600);
@@ -1389,10 +1403,10 @@ body.theme-highcontrast .s-btn.s-btn__danger.s-btn__clear {
   --_bu-bg-selected: var(--purple-500);
   --_bu-fc: var(--white);
   --_bu-fc-selected: var(--_bu-fc);
-  --_bu-badge-bg: var(--purple-100);
-  --_bu-badge-fc: var(--purple-400);
-  --_bu-badge-bg-disabled: var(--white);
-  --_bu-badge-fc-disabled: var(--purple-200);
+  --_bu-badge-bg: var(--purple-500);
+  --_bu-badge-fc: var(--black-050);
+  --_bu-badge-bg-disabled: var(--purple-300);
+  --_bu-badge-fc-disabled: var(--black-100);
 }
 .s-btn.s-btn__tonal {
   --_bu-bg: var(--black-150);
@@ -1401,10 +1415,10 @@ body.theme-highcontrast .s-btn.s-btn__danger.s-btn__clear {
   --_bu-fc: var(--black);
   --_bu-fc-disabled: var(--black-300);
   --_bu-fc-selected: var(--_bu-fc);
-  --_bu-badge-bg: var(--black-500);
-  --_bu-badge-fc: var(--white);
-  --_bu-badge-bg-disabled: var(--black-300);
-  --_bu-badge-fc-disabled: var(--white);
+  --_bu-badge-bg: var(--black-200);
+  --_bu-badge-fc: var(--black-600);
+  --_bu-badge-bg-disabled: var(--black-100);
+  --_bu-badge-fc-disabled: var(--black-350);
 }
 body.theme-highcontrast .s-btn.s-btn__tonal {
   --_bu-bc: var(--black-300);
@@ -1612,10 +1626,11 @@ body.theme-system .theme-dark__forced .s-btn--radio:checked + .s-btn {
   background-color: var(--_bu-badge-bg);
   border-radius: var(--br-pill);
   display: inline-block;
-  font-size: var(--fs-caption);
+  font-size: var(--_bu-badge-fs);
   line-height: inherit;
   opacity: var(--_bu-badge-o);
-  padding: var(--su1) var(--su4) 0;
+  padding: var(--_bu-badge-py) var(--_bu-badge-px);
+  margin-block: calc(var(--_bu-badge-py) * -1);
 }
 .s-btn .s-btn--number {
   color: var(--_bu-badge-fc, var(--_bu-fc));
@@ -1637,6 +1652,9 @@ body.theme-system .theme-dark__forced .s-btn--radio:checked + .s-btn {
 .s-btn.s-btn__sm {
   --_bu-lh: var(--lh-sm);
   --_bu-px: var(--su12);
+  --_bu-badge-fs: var(--fs-fine);
+  --_bu-badge-py: var(--su1);
+  --_bu-badge-px: calc(var(--su2) + var(--su1));
 }
 .s-btn.s-btn__xs {
   --_bu-g: var(--su4);
@@ -1652,6 +1670,7 @@ body.theme-system .theme-dark__forced .s-btn--radio:checked + .s-btn {
   --_bu-fs: var(--fs-body2);
   --_bu-px: var(--su24);
   --_bu-py: calc(var(--su12) + var(--su1));
+  --_bu-badge-py: calc(var(--su2) + var(--su1));
 }
 .s-btn:not(.s-btn__link):not(.s-btn__unset):focus-visible,
 .s-btn--radio:focus-visible + .s-btn {
@@ -3351,8 +3370,9 @@ body.theme-highcontrast .s-navigation .s-navigation--item:active {
 /**
  * Generate styles for a notice-based component
  *
- * Usage example:
+ * Usage examples:
  * .construct-notice-component(s-banner);
+ * .construct-notice-component(s-notice);
  *
  * @baseClass - The base class name for the notice component
  */
@@ -3494,6 +3514,9 @@ body.theme-highcontrast .s-notice__warning.s-notice__important {
   padding-right: var(--su2);
   white-space: nowrap;
 }
+button.s-notice--dismiss {
+  color: var(--_no-fc);
+}
 button.s-notice--dismiss:active {
   background-color: var(--_no-fc);
   color: var(--_no-bg);
@@ -3504,19 +3527,24 @@ button.s-notice--dismiss.focus-inset-bordered {
   background-color: var(--_no-fc);
   color: var(--_no-bg);
 }
-:has( > button.s-notice--dismiss) {
+.s-notice--actions {
+  display: flex;
+  margin-left: auto;
+  align-self: flex-start;
   padding-left: var(--su24);
+  color: var(--_no-fc);
   gap: calc(var(--su24) - var(--su2));
   overflow-wrap: initial !important;
 }
+.s-notice--actions > .s-link:not(.s-notice--dismiss) {
+  color: var(--_no-fc);
+}
 .s-notice--icon {
   background: var(--_no-icon-bg);
   border: var(--su1) solid var(--_no-icon-bc, var(--_no-icon-bg));
   padding: var(--_no-pd);
   margin-right: var(--su12);
   align-self: stretch;
-  display: flex;
-  align-items: top;
   margin-top: calc(var(--_no-pd) * -1);
   margin-bottom: calc(var(--_no-pd) * -1);
 }
@@ -5737,6 +5765,9 @@ a.s-tag:active {
   padding-bottom: var(--su8);
   padding-top: var(--su8);
   pointer-events: all;
+  display: flex;
+  align-items: center;
+  min-width: var(--su448);
 }
 .s-toggle-switch {
   --_ts-bg: var(--black-350);