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

package/lib/components/badge/badge.less

@@ -1,164 +1,110 @@
 .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-fs: var(--fs-caption); //13px
     --_ba-px: var(--su6);
-    --_ba-py: 0;
+    --_ba-py: var(--su4);
     --_ba-tt: unset;
     --_ba-wmn: 0;
-
-    // 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;
-        }
-
-        &__new {
-            --_ba-fc: var(--purple-600);
-        }
-    });
-
-    // MODIFIERS
-    // Sizes
-    &&__xs,
+    --_ba-bl: 0;
+    --_ba-fw: unset;
+    --_ba-sq-bg: var(--black-200);
+    --_ba-bx-sh-w: var(--su2);
+    --_ba-gap: unset;
+    --_ba-bx-sh-inset: ~"";
+
+    // SIZES
     &&__sm {
+        --_ba-wmn: calc(var(--su-static16) + var(--su-static2));
         --_ba-as: flex-start;
-        --_ba-fs: var(--fs-fine);
+        --_ba-fs: var(--fs-fine); //12px
+        --_ba-px: var(--su4);
+        --_ba-py: var(--su1);
+        --_ba-bx-sh-w: 0px;
+        --_ba-bx-sh-inset: inset;
     }
 
-    &&__xs {
-        --_ba-lh: 1.5;
-        --_ba-px: var(--su2);
-        --_ba-wmn: calc(var(--su-static16) + var(--su-static2));
+    &&__lg {
+        --_ba-fs: var(--fs-body1); //14px
+        --_ba-px: var(--su8);
+        --_ba-py: calc(var(--su4) + var(--su1)); //5px
+        --_ba-bx-sh-w: var(--su4);
     }
 
-    &&__sm {
-        --_ba-lh: 1.8;
-        --_ba-px: var(--su4);
-        --_ba-wmn: calc(var(--su-static16) + var(--su-static2));
+    // We need negative margin to make up for the positive badge padding
+    & .s-bling__filled {
+        margin: calc(var(--_ba-py) * -1) 0 calc(var(--_ba-py) * -1) calc(var(--_ba-px) * -1);
+    }
+    & svg {
+        margin: calc(var(--_ba-py) * -1) 0 calc(var(--_ba-py) * -1) var(--sun4);
     }
 
-    // Badge counts
+    &:has(.s-bling__rep) {
+        --_ba-fw: 600;
+        --_ba-fc: var(--black-600);
+    }
+    &:has(.s-bling) {
+        --_ba-bg: var(--black-150);
+    }
+
+    // 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);
     }
 
-    &&__rep,
-    &&__rep-down,
-    &&__votes:not(&__answered) {
-        --_ba-bg: var(--white);
-    }
-
-    &&__answered {
-        --_ba-bg: var(--green-400);
-    }
-
-    &&__bounty {
-        --_ba-bg: var(--blue-400);
-    }
-
-    &&__important {
-        --_ba-bg: var(--red-400);
-    }
-
-    &&__rep {
-        --_ba-bc: var(--green-300);
-        --_ba-fc: var(--green-400);
-    }
-
-    &&__rep-down {
-        --_ba-bc: var(--red-300);
-        --_ba-fc: var(--red-400);
-    }
-
-    &&__votes:not(&__answered) {
-        --_ba-bc: var(--black-250);
-        --_ba-fc: var(--black-500);
-    }
-
-    // Users
-    &&__admin {
-        --_ba-bc: var(--theme-primary-200);
-        --_ba-bg: var(--theme-primary-100);
-        --_ba-fc: var(--theme-primary-500);
+    // USER
+    &&__admin,
+    &&__moderator,
+    &&__staff,
+    &&__ai,
+    &&__bot,
+    &&__new {
+        --_ba-bl: var(--su4);
+        --_ba-bg: var(--black-150);
+        --_ba-fc: var(--black-600);
     }
 
     &&__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
-        }
+        --_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");
 
         &.s-badge__sm {
-            --_ba-g: var(--su-static2);
-            --_ba-before-h: calc(var(--su-static12) - var(--su-static1)); // 11px
+            --_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");
-            --_ba-before-mt: 0;
-            --_ba-before-w: calc(var(--su-static8) + var(--su-static1)); // 9px
         }
 
         &:before {
             height: var(--_ba-before-h);
-            margin-top: var(--_ba-before-mt);
+            margin-top: var(--sun1);
             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;
@@ -167,79 +113,140 @@
     }
 
     &&__staff {
-        // Staff badges are always "Stack Overflow Orange"
-        --_ba-bc: var(--orange-300);
-        --_ba-bg: var(--orange-200);
-        --_ba-fc: var(--orange-600);
+        // Staff should always be "StackOverflow orange"
+        --_ba-bc: var(--orange-400);
+    }
+    &&__admin {
+        // Only the admin badge is themeable
+        --_ba-bc: var(--theme-primary-500, var(--orange-500));
     }
-
-    // VARIANTS
     &&__ai {
-        --_ba-bc: var(--_ba-fc);
-        --_ba-bg: var(--black-050);
-        --_ba-fc: var(--orange-500);
-        --_ba-tt: uppercase;
+        --_ba-bc: var(--purple-400);
     }
-
     &&__bot {
-        --_ba-bc: var(--black-300);
+        --_ba-bc: var(--black-400);
     }
 
-    &&__danger,
-    &&__muted {
-        &.s-badge__filled {
-            --_ba-bc: transparent;
+    &&__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); // 2px gap between icon and text
+        --_ba-before-h: calc(var(--su12) + var(--su2)); // 14px
+        --_ba-before-w: calc(var(--su12) + var(--su2)); // 14px
+        --_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: 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;
         }
     }
 
+    // STATES
+    &&__info {
+        --_ba-bg: var(--blue-100);
+        --_ba-fc: var(--blue-500);
+        --_ba-sq-bg: var(--blue-200);
+        &.s-badge__important {
+            --_ba-bg: var(--blue-400);
+            --_ba-sq-bg: var(--blue-500);
+        }
+    }
+    &&__warning {
+        --_ba-bg: var(--yellow-100);
+        --_ba-fc: var(--yellow-500);
+        --_ba-sq-bg: var(--yellow-200);
+        &.s-badge__important {
+            --_ba-bg: var(--yellow-400);
+            --_ba-sq-bg: var(--yellow-500);
+        }
+    }
     &&__danger {
-        --_ba-bc: var(--red-300);
+        --_ba-bg: var(--red-100);
+        --_ba-fc: var(--red-500);
+        --_ba-sq-bg: var(--red-200);
+        &.s-badge__important {
+            --_ba-bg: var(--red-400);
+            --_ba-sq-bg: var(--red-500);
+        }
+    }
+    &&__critical {
         --_ba-bg: var(--red-200);
         --_ba-fc: var(--red-600);
-
-        &.s-badge__filled {
-            --_ba-bg: var(--red-400);
-            --_ba-fc: var(--white);
+        --_ba-sq-bg: var(--red-300);
+        &.s-badge__important {
+            --_ba-bg: var(--red-500);
+            --_ba-sq-bg: var(--red-600);
         }
     }
-    &&__info {
-        --_ba-bc: var(--blue-300);
-        --_ba-bg: var(--blue-200);
-        --_ba-fc: var(--blue-600);
+    &&__tonal {
+        --_ba-bg: var(--black-200);
+        --_ba-fc: var(--black-600);
+        --_ba-sq-bg: var(--black-300);
+        &.s-badge__important {
+            --_ba-bg: var(--black-500);
+            --_ba-sq-bg: var(--black-600);
+        }
     }
-
-    &&__warning {
-        --_ba-bc: var(--yellow-300);
-        --_ba-bg: var(--yellow-200);
-        --_ba-fc: var(--yellow-600);
+    &&__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-500);
+        --_ba-sq-bg: var(--purple-200);
+        &.s-badge__important {
+            --_ba-bg: var(--purple-400);
+            --_ba-sq-bg: var(--purple-500);
+        }
     }
 
-    &&__muted {
-        --_ba-bc: var(--black-300);
-        --_ba-bg: var(--black-200);
-        --_ba-fc: var(--black-500);
-
-        &.s-badge__filled {
-            --_ba-bg: var(--black-500);
-            --_ba-fc: var(--white);
+    // SQUARED
+    &&__squared {
+        --_ba_box-shadow: 0 0 0 var(--_ba-bx-sh-w) var(--_ba-sq-bg);
+        svg {
+            background-color: var(--_ba-sq-bg);
+            box-shadow: var(--_ba_box-shadow);
+            margin-right: var(--_ba-bx-sh-w)
         }
     }
+    &&__squared:not(&__important) {
+        .highcontrast-mode({
+            //Add border around the square in high contrast mode
+            --_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);
+        });
+    }
 
-    &&__new {
-        --_ba-bc: var(--_ba-bg);
-        --_ba-bg: var(--purple-100);
-        --_ba-fc: var(--purple-400);
-        --_ba-fw: bold;
-        --_ba-tt: uppercase;
+    // ICONS
+    &:not(&__squared):has(> svg){
+        //We want a smaller gap for icons that aren't squared
+        --_ba-gap: calc(var(--_ba-px) - var(--su2));
     }
 
-    // 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);
+    // IMPORTANT
+    &&__important {
+        --_ba-bg: var(--black-400);
+        --_ba-sq-bg: var(--black-500);
+        --_ba-fw: 600;
+        --_ba-fc: var(--black-050);
     }
 
     // INTERACTION
@@ -249,18 +256,17 @@
 
     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-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;

package/lib/components/banner/banner.less

@@ -29,7 +29,7 @@
 
     & &--container { // When we want to keep hero content capped
         margin: 0 auto;
-        max-width: calc(var(--s-step) * 10);
+        max-width: var(--su1024);
         position: relative;
         width: 100%;
     }

package/lib/components/bling/bling.less

@@ -0,0 +1,130 @@
+.s-bling {
+    --_bl-bg: unset;
+    --_bl-size: calc(var(--su8) + var(--su2));
+    // Icon
+    --_bl-icon: url("data:image/svg+xml;utf8,<svg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'><circle cx='4' cy='4' r='4'/></svg>");
+    --_bl-icon-bg: var(--black-500);
+    --_bl-icon-size: var(--su8);
+
+    // VARIANTS
+    &&__activity {
+        --_bl-icon-bg: var(--pink-400);
+    }
+    // Metals
+    &&__gold {
+        --_bl-icon-bg: var(--yellow-400);
+        --_bl-icon: url("data:image/svg+xml;,<svg viewBox='0 0 8 9' xmlns='http://www.w3.org/2000/svg'><path d='M3.89709 0L7.79421 2.25V6.75L3.89709 9L-1.95503e-05 6.75V2.25L3.89709 0Z'/></svg>");
+    }
+
+    &&__silver {
+        --_bl-icon-bg: var(--blue-400);
+        --_bl-icon: url("data:image/svg+xml;,<svg viewBox='0 0 9 9' xmlns='http://www.w3.org/2000/svg'><path d='M4.27979 0L8.55954 3.10942L6.92482 8.14058H1.63475L3.09944e-05 3.10942L4.27979 0Z'/></svg>");
+    }
+
+    &&__bronze {
+        --_bl-icon-bg: var(--orange-400);
+        --_bl-icon: url("data:image/svg+xml;,<svg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'><rect width='8' height='8'/></svg>");
+    }
+
+    // MODIFIERS
+    // Filled
+    &&__filled {
+        --_bl-bg: var(--black-225);
+        --_bl-icon-bg: var(--black-600);
+        --_bl-size: var(--su24);
+
+        &.s-bling {
+            &__rep {
+                --_bl-bg: var(--black-300);
+                .highcontrast-dark-mode({
+                    --_bl-icon-bg: var(--black-050);
+                });
+            }
+            &__activity {
+                --_bl-bg: var(--pink-300);
+                --_bl-icon-bg: var(--pink-600);
+                .highcontrast-mode({
+                    --_bl-icon-bg: var(--black-050);
+                });
+                .highcontrast-dark-mode({
+                    --_bl-bg: var(--pink-400);
+                });
+            }
+            &__gold {
+                --_bl-bg: var(--yellow-300);
+                --_bl-icon-bg: var(--yellow-600);
+                .highcontrast-mode({
+                    --_bl-icon-bg: var(--black-050);
+                });
+                .highcontrast-dark-mode({
+                    --_bl-bg: var(--yellow-400);
+                });
+            }
+            &__silver {
+                --_bl-bg: var(--blue-300);
+                --_bl-icon-bg: var(--blue-600);
+                .highcontrast-mode({
+                    --_bl-icon-bg: var(--black-050);
+                });
+                .highcontrast-dark-mode({
+                    --_bl-bg: var(--blue-400);
+                });
+            }
+            &__bronze {
+                --_bl-bg: var(--orange-300);
+                --_bl-icon-bg: var(--orange-600);
+                .highcontrast-mode({
+                    --_bl-icon-bg: var(--black-050);
+                });
+                .highcontrast-dark-mode({
+                    --_bl-bg: var(--orange-400);
+                });
+            }
+        }
+    }
+
+    // SIZES
+    // Unfilled Sizes
+    &&__sm:not(&__filled) {
+        --_bl-size: var(--su8);
+    }
+    // Filled Sizes
+    &&__sm&__filled {
+        --_bl-size: var(--su16);
+    }
+    &&__lg&__filled {
+        --_bl-size: calc(var(--su24) + var(--su4)); // 28px
+    }
+    // Icon Sizes
+    &&__sm {
+        --_bl-icon-size: var(--su6);
+    }
+    &&__sm&__gold,
+    &&__sm&__silver {
+        --_bl-icon-size: calc(var(--su6) + var(--su1)); // 7px
+    }
+    &&__gold:not(&__sm),
+    &&__silver:not(&__sm) {
+        --_bl-icon-size: calc(var(--su8) + var(--su1)); // 9px
+    }
+
+    // CHILD ELEMENTS
+    &:before {
+        -webkit-mask: var(--_bl-icon) no-repeat center;
+        mask: var(--_bl-icon) no-repeat center;
+
+        background-color: var(--_bl-icon-bg);
+        content: "";
+        height: var(--_bl-icon-size);
+        width: var(--_bl-icon-size);
+    }
+
+    background-color: var(--_bl-bg);
+    height: var(--_bl-size);
+    width: var(--_bl-size);
+
+    align-items: center;
+    color: inherit;
+    display: inline-flex;
+    justify-content: center;
+}