@stackoverflow/stacks 3.0.0-beta.0 → 3.0.0-beta.11

package/lib/atomic/typography.less

@@ -37,36 +37,22 @@ p {
 .fs-body3 { font-size: var(--fs-body3) !important; }
 .fs-body2 { font-size: var(--fs-body2) !important; }
 .fs-body1 { font-size: var(--fs-body1) !important; }
-
-.fs-caption,
-.fs-category { font-size: var(--fs-caption) !important; }
+.fs-caption { font-size: var(--fs-caption) !important; }
 .fs-fine { font-size: var(--fs-fine) !important; }
 
 #stacks-internals #screen-sm({
-    .fs-display4 { font-size: 3.8rem !important; }
-    .fs-display3 { font-size: 3.3rem !important; }
-    .fs-display2 { font-size: 3rem !important; }
-    .fs-display1 { font-size: 2.6rem !important; }
-    .fs-headline2 { font-size: 2.3rem !important; }
-    .fs-headline1 { font-size: 2rem !important; }
-    .fs-title { font-size: 1.8rem !important; }
-    .fs-subheading { font-size: 1.6rem !important; }
-    .fs-body3 { font-size: 1.4rem !important; }
-    .fs-body2 { font-size: 1.3rem !important; }
+    .fs-display4 { font-size: calc(var(--fs-display4) * .43) !important; } // 43px
+    .fs-display3 { font-size: calc(var(--fs-display3) * .5139) !important; } // ~37px
+    .fs-display2 { font-size: calc(var(--fs-display2) * .5862) !important; } // ~34px
+    .fs-display1 { font-size: calc(var(--fs-display1) * .6304) !important; }  // ~29px
+    .fs-headline2 { font-size: calc(var(--fs-headline2) * .7224) !important; } // ~26px
+    .fs-headline1 { font-size: calc(var(--fs-headline1) * .8215) !important; } // ~23px
+    .fs-title { font-size: calc(var(--fs-title) * .9094) !important; } // ~20px
+    .fs-subheading { font-size: calc(var(--fs-subheading) * .8998) !important; } // ~18px
+    .fs-body3 { font-size: calc(var(--fs-body3) * .8888) !important; } // ~16px
+    .fs-body2 { font-size: calc(var(--fs-body2) * .9374) !important; } // ~15px
 }, @force-selector: true);
 
-.fs-category {
-    font-weight: 700;
-    text-transform: uppercase;
-
-    // If a top border is desired
-    &.has-border {
-        width: 100%;
-        padding: var(--su4) 0;
-        border-top: var(--su-static1) solid var(--bc-medium);
-    }
-}
-
 //  ============================================================================
 //  $   LINE HEIGHTS
 //  ----------------------------------------------------------------------------
@@ -89,7 +75,8 @@ p {
 
 //  --  Font Weight
 .fw-normal { font-weight: 400 !important; }
-.fw-bold { font-weight: 700 !important; }
+.fw-medium { font-weight: 500 !important; }
+.fw-bold { font-weight: 600 !important; }
 
 //  --  Font Styles
 .fs-normal { font-style: normal !important; }

package/lib/base/body.less

@@ -24,13 +24,6 @@ body {
     line-height: var(--lh-base);
 }
 
-#stacks-internals #screen-sm({
-    &,
-    body {
-        font-size: 11px;
-    }
-}, @force-selector: true);
-
 body {
     box-sizing: border-box;
     min-height: 100%;
@@ -41,4 +34,6 @@ body {
     *:after {
         box-sizing: inherit;
     }
+
+    // TODO SHINE set max width here
 }

package/lib/components/activity-indicator/activity-indicator.less

@@ -1,53 +1,41 @@
 .s-activity-indicator {
-    --_ai-translucent: var(--translucent-secondary);
-    --_ai-bg: var(--theme-secondary-400);
+    --_ai-bg: var(--pink-400);
     --_ai-fc: var(--white);
-
-    .highcontrast-mode({
-        --_ai-bg: var(--theme-secondary-500);
-    });
+    --_ai-min-size: var(--su-static16);
+    --_ai-p: 0 calc(var(--su-static4) - var(--su-static1));
 
     // VARIANTS
     &&__danger {
         --_ai-bg: var(--red-400);
-        --_ai-translucent: var(--translucent-error);
-
-        .highcontrast-mode({
-            --_ai-bg: var(--red-500);
-        });
     }
 
     &&__success {
         --_ai-bg: var(--green-400);
-        --_ai-translucent: var(--translucent-success);
 
-        .highcontrast-mode({
-            --_ai-bg: var(--green-500);
-        });
     }
 
     &&__warning {
         --_ai-bg: var(--yellow-400);
-        --_ai-fc: var(--_black-static);
-        --_ai-translucent: var(--translucent-warning);
+    }
 
-        .highcontrast-mode({
-            --_ai-bg: var(--yellow-500); // needs to be here to override default high contrast
-            --_ai-fc: var(--white);
-        });
+    &&__sm {
+        --_ai-min-size: calc(var(--su-static8) + var(--su-static2));
+        --_ai-p: 0;
     }
 
     background-color: var(--_ai-bg);
-    box-shadow: 0 0 0 var(--su-static4) var(--_ai-translucent);
     color: var(--_ai-fc);
+    min-width: var(--_ai-min-size);
+    min-height: var(--_ai-min-size);
+    padding: var(--_ai-p);
 
-    border-radius: 1000px;
-    display: inline-block;
+    border-radius: var(--br-pill);
+    display: inline-flex;
     font-size: var(--fs-fine);
-    font-weight: 700;
-    line-height: 1.1; // Custom line-height to satisfy 1x screens
-    min-width: var(--su-static12);
-    min-height: var(--su-static12);
-    padding: var(--su2) var(--su4);
+    font-weight: 600;
+    line-height: 1.1;
+    text-align: center;
+    align-items: center;
+    justify-content: center;
     text-transform: uppercase;
 }

package/lib/components/anchor/anchor.less

@@ -28,7 +28,7 @@
     }
 
     &&__default {
-        --_an-a-fc: var(--theme-link-color, var(--theme-secondary-400));
+        --_an-a-fc: var(--theme-link-color, var(--theme-secondary));
         --_an-a-fc-hover: var(--theme-link-color-hover, var(--theme-secondary-500));
         --_an-a-fc-visited: var(--theme-link-color-visited, var(--purple-500));
         --_an-a-fc-hover-visited: var(--theme-link-color-hover, var(--purple-600));

package/lib/components/avatar/avatar.less

@@ -1,7 +1,6 @@
 .s-avatar {
     --_av-size: var(--su-static16);
     --_av-bg: var(--_white-static); // Force a white background color for when we have transparent avatars
-    --_av-br: var(--br-sm);
     --_av-fs-letter: calc(var(--su-static12) - var(--su-static1));
     --_av-scale-badge: 1;
 
@@ -18,14 +17,8 @@
 
     // MODIFIERS
     // Sizes
-    &&__32,
-    &&__48 {
-        --_av-br: var(--br-md);
-    }
-
     &&__96,
     &&__128 {
-        --_av-br: calc(var(--br-lg) + var(--br-sm));
         --_av-scale-badge: 3;
     }
 
@@ -49,7 +42,6 @@
 
     &&__64 {
         --_av-size: var(--su-static64);
-        --_av-br: var(--br-lg);
         --_av-fs-letter: calc(var(--su-static48) - var(--su-static4));
         --_av-scale-badge: 2.4;
     }
@@ -74,7 +66,6 @@
     }
 
     & &--image {
-        border-radius: var(--_av-br);
         display: block;
         height: var(--_av-size);
         width: var(--_av-size);
@@ -95,8 +86,15 @@
         user-select: none;
     }
 
-    background-color: var(--_av-bg); 
-    border-radius: var(--_av-br);
+    & &--indicator {
+        box-shadow: 0 0 0 var(--su-static2) var(--white);
+        bottom: 100%;
+        left: 100%;
+        position: absolute;
+        transform: translate(-50%, 60%);
+    }
+
+    background-color: var(--_av-bg);
     height: var(--_av-size);
     width: var(--_av-size);
 

package/lib/components/badge/badge.less

@@ -1,164 +1,109 @@
 .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-as: flex-start;
-        --_ba-fs: var(--fs-fine);
-    }
-
-    &&__xs {
-        --_ba-lh: 1.5;
-        --_ba-px: var(--su2);
         --_ba-wmn: calc(var(--su-static16) + var(--su-static2));
-    }
-
-    &&__sm {
-        --_ba-lh: 1.8;
+        --_ba-as: flex-start;
+        --_ba-fs: var(--fs-fine); //12px
         --_ba-px: var(--su4);
-        --_ba-wmn: calc(var(--su-static16) + var(--su-static2));
-    }
-
-    // Badge counts
-    &&__gold,
-    &&__silver,
-    &&__bronze {
-        --_ba-fc: var(--black-500);
-    }
-
-    &&__gold {
-        --_ba-bc: var(--gold-300);
-        --_ba-bg: var(--gold-100);
+        --_ba-py: var(--su1);
+        --_ba-bx-sh-w: 0px;
+        --_ba-bx-sh-inset: inset;
     }
 
-    &&__silver {
-        --_ba-bc: var(--silver-300);
-        --_ba-bg: var(--silver-100);
+    &&__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);
     }
 
-    &&__bronze {
-        --_ba-bc: var(--bronze-300);
-        --_ba-bg: var(--bronze-100);
+    // 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);
     }
-
-    // Number counts
-    &&__answered,
-    &&__bounty,
-    &&__important {
-        --_ba-bc: transparent;
-        --_ba-fc: var(--white);
+    & svg {
+        margin: calc(var(--_ba-py) * -1) 0 calc(var(--_ba-py) * -1) calc(var(--su4) * -1);
     }
 
-    &&__rep,
-    &&__rep-down,
-    &&__votes:not(&__answered) {
-        --_ba-bg: var(--white);
+    &:has(.s-bling__rep) {
+        --_ba-fw: 600;
+        --_ba-fc: var(--black-600);
     }
-
-    &&__answered {
-        --_ba-bg: var(--green-400);
+    &:has(.s-bling) {
+        --_ba-bg: var(--black-150);
     }
 
-    &&__bounty {
-        --_ba-bg: var(--blue-400);
-    }
+    // TAG
+    &&__gold,
+    &&__silver,
+    &&__bronze {
+        --_ba-bl: var(--su4);
 
-    &&__important {
-        --_ba-bg: var(--red-400);
+        & .s-bling__gold,
+        & .s-bling__silver,
+        & .s-bling__bronze {
+            margin-left: -2px;
+        }
     }
 
-    &&__rep {
-        --_ba-bc: var(--green-300);
-        --_ba-fc: var(--green-400);
+    &&__gold {
+        --_ba-bc: var(--yellow-300);
     }
-
-    &&__rep-down {
-        --_ba-bc: var(--red-300);
-        --_ba-fc: var(--red-400);
+    &&__silver {
+        --_ba-bc: var(--blue-300);
     }
-
-    &&__votes:not(&__answered) {
-        --_ba-bc: var(--black-250);
-        --_ba-fc: var(--black-500);
+    &&__bronze {
+        --_ba-bc: var(--orange-300);
     }
 
-    // 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 {
+        --_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: 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;
@@ -167,79 +112,114 @@
     }
 
     &&__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;
+    // 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 +229,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-sm);
     display: inline-flex;
     justify-content: center;
     text-decoration: none;