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

package/lib/components/avatar/avatar.less

@@ -1,7 +1,7 @@
 .s-avatar {
-    --_av-size: var(--su-static16);
-    --_av-bg: var(--_white-static); // Force a white background color for when we have transparent avatars
-    --_av-fs-letter: calc(var(--su-static12) - var(--su-static1));
+    --_av-size: var(--su16);
+    --_av-bg: var(--white); // Use a solid background color to prevent transparent avatars from blending with the background
+    --_av-fs-letter: calc(var(--su12) - var(--su1));
     --_av-scale-badge: 1;
 
     // CONTEXTUAL STYLES
@@ -11,7 +11,7 @@
         }
 
         background-color: var(--black);
-        box-shadow: 0 0 0 var(--su-static1) var(--black);
+        box-shadow: 0 0 0 var(--su1) var(--black);
         color: var(--white);
     });
 
@@ -23,44 +23,44 @@
     }
 
     &&__24 {
-        --_av-size: var(--su-static24);
-        --_av-fs-letter: var(--su-static16);
+        --_av-size: var(--su24);
+        --_av-fs-letter: var(--su16);
         --_av-scale-badge: 1.1;
     }
 
     &&__32 {
-        --_av-size: var(--su-static32);
-        --_av-fs-letter: calc(var(--su-static24) - var(--su-static2));
+        --_av-size: var(--su32);
+        --_av-fs-letter: calc(var(--su24) - var(--su2));
         --_av-scale-badge: 1.3;
     }
 
     &&__48 {
-        --_av-size: var(--su-static48);
-        --_av-fs-letter: calc(var(--su-static32) + var(--su-static2));
+        --_av-size: var(--su48);
+        --_av-fs-letter: calc(var(--su32) + var(--su2));
         --_av-scale-badge: 1.6;
     }
 
     &&__64 {
-        --_av-size: var(--su-static64);
-        --_av-fs-letter: calc(var(--su-static48) - var(--su-static4));
+        --_av-size: var(--su64);
+        --_av-fs-letter: calc(var(--su48) - var(--su4));
         --_av-scale-badge: 2.4;
     }
 
     &&__96 {
-        --_av-size: var(--su-static96);
-        --_av-fs-letter: calc(var(--su-static64) + var(--su-static2));
+        --_av-size: var(--su96);
+        --_av-fs-letter: calc(var(--su64) + var(--su2));
     }
 
     &&__128 {
-        --_av-size: var(--su-static128);
-        --_av-fs-letter: calc(var(--su-static96) - var(--su-static8));
+        --_av-size: var(--su128);
+        --_av-fs-letter: calc(var(--su96) - var(--su8));
     }
 
     // CHILD ELEMENTS
     & &--badge {
-        bottom: calc(var(--su-static4) * -1); // -4px
+        bottom: var(--sun4);
         position: absolute;
-        right: calc(var(--su-static4) * -1); // -4px
+        right: var(--sun4);
         -webkit-transform: scale(var(--_av-scale-badge));
         transform: scale(var(--_av-scale-badge));
     }
@@ -87,7 +87,7 @@
     }
 
     & &--indicator {
-        box-shadow: 0 0 0 var(--su-static2) var(--white);
+        box-shadow: 0 0 0 var(--su2) var(--white);
         bottom: 100%;
         left: 100%;
         position: absolute;
@@ -102,5 +102,6 @@
     background-size: 100%;
     display: inline-block; // Make sure the avatar has structure regardless of the element eg. span vs. div
     position: relative;
+    text-decoration: none;
     vertical-align: bottom; // Make our avatars play more nicely with text next to it.
 }

package/lib/components/badge/badge.less

@@ -1,245 +1,307 @@
 .s-badge {
-    --_ba-as: unset;
-    --_ba-bc: var(--bc-medium);
-    --_ba-bg: var(--black-150);
+    --_ba-bc: transparent;
+    --_ba-bg: var(--black-100);
     --_ba-fc: var(--black-500);
     --_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;
+    --_ba-g: unset;
+    --_ba-svg-p: var(--su2);
+    --_ba-sq-bg: var(--black-200);
+    
     // CONTEXTUAL STYLES
     .highcontrast-mode({
-        // Badge counts
-        &__gold,
-        &__silver,
-        &__bronze,
-        // Number counts
-        &__rep,
-        &__rep-down,
-        &__votes:not(.s-badge__answered),
-        // Users
-        &__admin,
-        &__moderator,
-        &__staff {
-            --_ba-bc: currentColor;
+        --_ba-bx-sh-w: var(--su1);
+
+        &.s-badge__sm {
+            --_ba-bx-sh-w: 0;
+        }
+
+        &.s-badge__lg {
+            --_ba-bx-sh-w: var(--su4);
+        }
+
+        &:not(.s-badge__important) > svg { 
+            //Add border around the square in high contrast mode
+            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;
         }
 
-        &__new {
-            --_ba-fc: var(--purple-600);
+        a[href] {
+            &,
+            &:hover {
+                text-decoration: underline !important;
+            }
         }
     });
 
-    // MODIFIERS
-    // Sizes
-    &&__xs,
-    &&__sm {
-        --_ba-as: flex-start;
-        --_ba-fs: var(--fs-fine);
+    &:has(> .s-bling__filled),
+    &&__squared,
+    &:has(> svg) {
+        &,
+        &.s-badge__lg,
+        &.s-badge__sm {
+            --_ba-px: 0;
+            --_ba-py: 0;
+        }
+
+        &.s-badge__lg {
+            --_ba-pr: var(--su8);
+        }
+
+        &.s-badge__sm {
+            --_ba-pr: var(--su4);
+        }
+
+        --_ba-pr: var(--su6);
     }
 
-    &&__xs {
-        --_ba-lh: 1.5;
-        --_ba-px: var(--su2);
-        --_ba-wmn: calc(var(--su-static16) + var(--su-static2));
+    &:has(> .s-bling__filled),
+    &&__squared {
+        &.s-badge__lg {
+            --_ba-g: var(--su8);
+        }
+
+        &.s-badge__sm {
+            --_ba-g: var(--su4);
+        }
+
+        --_ba-g: var(--su6);
     }
 
+    &:not(&__squared):has(> svg){
+        --_ba-g: var(--su2);
+    }
+
+
+    &:has(.s-bling__rep) {
+        --_ba-fw: 600;
+        --_ba-fc: var(--black-600);
+    }
+
+    &:has(.s-bling) {
+        --_ba-bg: var(--black-150);
+    }
+
+    // SIZES
     &&__sm {
-        --_ba-lh: 1.8;
+        --_ba-fs: var(--fs-fine);
         --_ba-px: var(--su4);
-        --_ba-wmn: calc(var(--su-static16) + var(--su-static2));
+        --_ba-py: var(--su1);
+        --_ba-wmn: calc(var(--su16) + var(--su2));
+        --_ba-svg-p: var(--_ba-py);
     }
 
-    // Badge counts
+    &&__lg {
+        --_ba-fs: var(--fs-body1);
+        --_ba-px: var(--su8);
+        --_ba-py: calc(var(--su4) + var(--su1));
+        --_ba-svg-p: var(--_ba-py);
+    }
+
+    // TAG
     &&__gold,
     &&__silver,
     &&__bronze {
-        --_ba-fc: var(--black-500);
+        --_ba-bl: var(--su4);
+
+        & .s-bling__gold,
+        & .s-bling__silver,
+        & .s-bling__bronze {
+            margin-left: -2px;
+        }
     }
 
     &&__gold {
         --_ba-bc: var(--yellow-300);
-        --_ba-bg: var(--yellow-100);
     }
-
     &&__silver {
         --_ba-bc: var(--blue-300);
-        --_ba-bg: var(--blue-100);
     }
-
     &&__bronze {
         --_ba-bc: var(--orange-300);
-        --_ba-bg: var(--orange-100);
     }
 
-    // Number counts
-    &&__answered,
-    &&__bounty,
-    &&__important {
-        --_ba-bc: transparent;
-        --_ba-fc: var(--white);
+    // USER
+    &&__admin,
+    &&__moderator,
+    &&__staff,
+    &&__ai,
+    &&__bot,
+    &&__new {
+        --_ba-bl: var(--su4);
+        --_ba-bg: var(--black-150);
+        --_ba-fc: var(--black-600);
     }
 
-    &&__rep,
-    &&__rep-down,
-    &&__votes:not(&__answered) {
-        --_ba-bg: var(--white);
+    &&__moderator,
+    &&__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;
+        }
     }
 
-    &&__answered {
-        --_ba-bg: var(--green-400);
-    }
+    &&__moderator {
+        --_ba-bc: var(--blue-500);
+        --_ba-before-h: calc(var(--su12) + var(--su1)); // 13px
+        --_ba-before-w: calc(var(--su12) - var(--su1)); // 11px
+        --_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");
 
-    &&__bounty {
-        --_ba-bg: var(--blue-400);
-    }
+        &.s-badge__sm {
+            --_ba-before-h: calc(var(--su12) - var(--su1)); // 11px
+            --_ba-before-w: calc(var(--su8) + var(--su1)); // 9px
+            --_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");
+        }
 
-    &&__important {
-        --_ba-bg: var(--red-400);
+        &:before {
+            margin-top: var(--sun1);
+        }
     }
 
-    &&__rep {
-        --_ba-bc: var(--green-300);
-        --_ba-fc: var(--green-400);
+    &&__staff {
+        --_ba-bc: var(--orange-400);
     }
 
-    &&__rep-down {
-        --_ba-bc: var(--red-300);
-        --_ba-fc: var(--red-400);
+    &&__admin {
+        --_ba-bc: var(--theme-primary-500, var(--orange-500));
     }
 
-    &&__votes:not(&__answered) {
-        --_ba-bc: var(--black-250);
-        --_ba-fc: var(--black-500);
+    &&__ai {
+        --_ba-bc: var(--purple-400);
     }
 
-    // Users
-    &&__admin {
-        --_ba-bc: var(--theme-primary-200);
-        --_ba-bg: var(--theme-primary-100);
-        --_ba-fc: var(--theme-primary-500);
+    &&__bot {
+        --_ba-bc: var(--black-400);
     }
 
-    &&__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)); // 3px
-        // :before icon
-        --_ba-before-h: calc(var(--su-static16) - var(--su-static2)); // 14px
-        --_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); // -1px
-        --_ba-before-w: var(--su-static12);
-
-        // Sizes
-        &.s-badge__xs {
-            --_ba-before-h: calc(var(--su-static8) + var(--su-static1)); // 9px
-            --_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)); // 7px
-        }
-
-        &.s-badge__sm {
-            --_ba-g: var(--su-static2);
-            --_ba-before-h: calc(var(--su-static12) - var(--su-static1)); // 11px
-            --_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)); // 9px
-        }
+    // TODO reassess if we need this modifier or should rely on embedding an svg (our `__featured` example is the same as this badge)
+    &&__new {
+        --_ba-bg: var(--purple-100);
+        --_ba-fc: var(--purple-500);
+        --_ba-sq-bg: var(--purple-200);
+        --_ba-bc: var(--purple-400);
+        --_ba-gap: var(--su2);
+        --_ba-before-h: calc(var(--su12) + var(--su2));
+        --_ba-before-w: calc(var(--su12) + var(--su2));
+        --_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");
 
         &:before {
-            height: var(--_ba-before-h);
-            margin-top: var(--_ba-before-mt);
-            width: var(--_ba-before-w);
-
-            content: "";
-            display: inline-block;
-            background-color: currentColor;
-            -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-left: var(--sun2);
+            margin-top: 0;
         }
     }
 
-    &&__staff {
-        // Staff badges are always "Stack Overflow Orange"
-        --_ba-bc: var(--orange-300);
-        --_ba-bg: var(--orange-200);
-        --_ba-fc: var(--orange-600);
-    }
+    // STATES
+    &&__info {
+        --_ba-bg: var(--blue-100);
+        --_ba-fc: var(--blue-500);
+        --_ba-sq-bg: var(--blue-200);
 
-    // VARIANTS
-    &&__ai {
-        --_ba-bc: var(--_ba-fc);
-        --_ba-bg: var(--black-050);
-        --_ba-fc: var(--orange-500);
-        --_ba-tt: uppercase;
+        &.s-badge__important {
+            --_ba-bg: var(--blue-400);
+            --_ba-sq-bg: var(--blue-500);
+        }
     }
 
-    &&__bot {
-        --_ba-bc: var(--black-300);
-    }
+    &&__warning {
+        --_ba-bg: var(--yellow-100);
+        --_ba-fc: var(--yellow-500);
+        --_ba-sq-bg: var(--yellow-200);
 
-    &&__danger,
-    &&__muted {
-        &.s-badge__filled {
-            --_ba-bc: transparent;
+        &.s-badge__important {
+            --_ba-bg: var(--yellow-400);
+            --_ba-sq-bg: var(--yellow-500);
         }
     }
 
     &&__danger {
-        --_ba-bc: var(--red-300);
-        --_ba-bg: var(--red-200);
-        --_ba-fc: var(--red-600);
+        --_ba-bg: var(--red-100);
+        --_ba-fc: var(--red-500);
+        --_ba-sq-bg: var(--red-200);
 
-        &.s-badge__filled {
+        &.s-badge__important {
             --_ba-bg: var(--red-400);
-            --_ba-fc: var(--white);
+            --_ba-sq-bg: var(--red-500);
         }
     }
-    &&__info {
-        --_ba-bc: var(--blue-300);
-        --_ba-bg: var(--blue-200);
-        --_ba-fc: var(--blue-600);
-    }
 
-    &&__warning {
-        --_ba-bc: var(--yellow-300);
-        --_ba-bg: var(--yellow-200);
-        --_ba-fc: var(--yellow-600);
+    &&__critical {
+        --_ba-bg: var(--red-200);
+        --_ba-fc: var(--red-600);
+        --_ba-sq-bg: var(--red-300);
+
+        &.s-badge__important {
+            --_ba-bg: var(--red-500);
+            --_ba-sq-bg: var(--red-600);
+        }
     }
 
-    &&__muted {
-        --_ba-bc: var(--black-300);
+    &&__tonal {
         --_ba-bg: var(--black-200);
-        --_ba-fc: var(--black-500);
+        --_ba-fc: var(--black-600);
+        --_ba-sq-bg: var(--black-300);
 
-        &.s-badge__filled {
+        &.s-badge__important {
             --_ba-bg: var(--black-500);
-            --_ba-fc: var(--white);
+            --_ba-sq-bg: var(--black-600);
         }
     }
 
-    &&__new {
-        --_ba-bc: var(--_ba-bg);
+    &&__success {
+        --_ba-bg: var(--green-100);
+        --_ba-fc: var(--green-600);
+        --_ba-sq-bg: var(--green-200);
+
+        &.s-badge__important {
+            --_ba-bg: var(--green-500);
+            --_ba-sq-bg: var(--green-600);
+        }
+    }
+
+    &&__featured {
         --_ba-bg: var(--purple-100);
-        --_ba-fc: var(--purple-400);
-        --_ba-fw: bold;
-        --_ba-tt: uppercase;
+        --_ba-fc: var(--purple-500);
+        --_ba-sq-bg: var(--purple-200);
+
+        &.s-badge__important {
+            --_ba-bg: var(--purple-400);
+            --_ba-sq-bg: var(--purple-500);
+        }
+    }
+
+    // SQUARED
+    &&__squared svg {
+        background-color: var(--_ba-sq-bg);
+    }
+
+    // IMPORTANT
+    &&__important {
+        --_ba-bg: var(--black-400);
+        --_ba-fc: var(--black-050);
+        --_ba-fw: 600;
+        --_ba-sq-bg: var(--black-500);
     }
 
     // CHILD ELEMENTS
-    &--image, // Included with no base class to account for usage in .s-progress__badge
-    & &--image {
-        align-self: center;
-        display: inline-flex;
-        margin-right: var(--su1);
-        margin-left: calc((var(--su4) + var(--su1)) * -1);
+    svg {
+        aspect-ratio: 1 / 1;
+        box-sizing: content-box;
+        display: block;
+        height: calc(var(--su16) + var(--su4));
+        padding: var(--_ba-svg-p);
     }
 
     // INTERACTION
@@ -247,22 +309,20 @@
         text-decoration: none;
     }
 
-    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);
+    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);
-    padding: var(--_ba-py) var(--_ba-px);
     text-transform: var(--_ba-tt);
-
+    
     align-items: center;
-    border-radius: var(--br-md);
     display: inline-flex;
     justify-content: center;
+    line-height: var(--lh-md);
     text-decoration: none;
     vertical-align: middle;
     white-space: nowrap;

package/lib/components/banner/banner.less

@@ -3,8 +3,15 @@
 // This would reduce the amount of CSS we ship to the client and simplify our codebase
 .s-banner {
     --_no-ty-offset: 0;
-    --_no-ty: var(--theme-topbar-height, calc(var(--su-static48) + var(--su-static8)));
+    --_no-ty: var(--theme-topbar-height, calc(var(--su48) + var(--su8)));
     .construct-notice-component(s-banner);
+    
+    &--icon {
+        //Remove the icon backgound color
+        --_no-icon-bg: transparent;
+        margin-right: var(--su8);
+        align-self: flex-start;
+    }
 
     &[aria-hidden="true"] { // If you want to hide and reveal the banner
         --_no-ty-offset: -1;
@@ -27,18 +34,12 @@
         padding-top: 93px;
     }
 
-    & &--container { // When we want to keep hero content capped
-        margin: 0 auto;
-        max-width: calc(var(--s-step) * 10);
-        position: relative;
-        width: 100%;
-    }
-
-    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%;
     z-index: calc(var(--zi-navigation-fixed) - 1); // Tuck below topbar
-}
+}