@stackoverflow/stacks 3.0.0-beta.6 → 3.0.0-beta.8

package/lib/components/badge/badge.less

@@ -1,82 +1,66 @@
 .s-badge {
     --_ba-as: unset;
-    --_ba-bc: var(--bc-medium);
+    --_ba-bc: transparent;
     --_ba-bg: var(--black-150);
-    --_ba-fc: var(--black-500);
-    --_ba-fs: var(--fs-caption);
-    --_ba-fw: normal;
-    --_ba-g: 0.3em;
-    --_ba-lh: 2;
+    --_ba-fc: var(--black-600);
+    --_ba-fs: var(--fs-caption); //13px
     --_ba-px: var(--su6);
-    --_ba-py: 0;
+    --_ba-py: var(--su4);
     --_ba-tt: unset;
     --_ba-wmn: 0;
+    --_ba-bl: 0;
+    --_ba-fw: unset;
 
-    // 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,
+    // 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);
     }
 
-    &&__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
     }
 
-    &&__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);
     }
 
-    // Badge counts
+    &:has(.s-bling__rep) {
+        --_ba-fw: 600;
+    }
+
+    // TAG BADGES
     &&__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
+    // NUMBER COUNTS
     &&__answered,
     &&__bounty,
     &&__important {
@@ -117,48 +101,36 @@
         --_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 TYPES
+    &&__admin,
+    &&__moderator,
+    &&__staff,
+    &&__ai,
+    &&__bot {
+        --_ba-bl: var(--su4);
     }
 
     &&__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,22 +139,21 @@
     }
 
     &&__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,
@@ -229,7 +200,6 @@
         --_ba-bc: var(--_ba-bg);
         --_ba-bg: var(--purple-100);
         --_ba-fc: var(--purple-400);
-        --_ba-fw: bold;
         --_ba-tt: uppercase;
     }
 
@@ -249,18 +219,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-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/bling/bling.less

@@ -7,11 +7,6 @@
     --_bl-icon-size: var(--su8);
 
     // VARIANTS
-    &&__gold,
-    &&__silver {
-        --_bl-icon-size: calc(var(--su8) + var(--su2));
-    }
-
     &&__activity {
         --_bl-icon-bg: var(--pink-400);
     }
@@ -61,15 +56,30 @@
         }
     }
 
-    // Sizes
-    &&__sm {
-        --_bl-icon-size: var(--su6);
+    // SIZES
+    // Unfilled Sizes
+    &&__sm:not(&__filled) {
+        --_bl-size: var(--su8);
+    }
+    // Filled Sizes
+    &&__sm&__filled {
         --_bl-size: var(--su16);
     }
-
-    &&__lg {
+    &&__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 {

package/lib/components/input-icon/input-icon.less

@@ -1,6 +1,6 @@
 .s-input-icon {
     --_ii-fc: unset;
-    --_ii-r: 0.7em;
+    --_ii-r: calc((var(--su-static8) + var(--su-static2))); // 10px
 
     // MODIFIERS
     .has-error & {
@@ -32,13 +32,13 @@
         --_ii-r: auto;
 
         color: var(--black-400);
-        left: 0.7em;
+        left: calc((var(--su-static8) + var(--su-static2))); // 10px
     }
 
     color: var(--_ii-fc);
     right: var(--_ii-r);
 
-    margin-top: calc((var(--su-static8) + var(--su-static1)) * -1); // -9px - Half the icon's height at 18px for centering;
+    margin-top: calc((var(--su-static8) + var(--su-static2)) * -1); // -10px - Half the icon's height at 20px for centering
     pointer-events: none;
     position: absolute;
     top: 50%;

package/lib/components/modal/modal.less

@@ -3,18 +3,17 @@
     --_mo-bg: fade(.set-black()[600], 50%); // Background remains fixed
     --_mo-hmx: unset;
     --_mo-wmx: unset;
-    --_mo-close-t: var(--su8);
     --_mo-dialog-bg: var(--white);
     --_mo-dialog-pt: var(--su24);
-    --_mo-header-fc: var(--fc-dark);
+    --_mo-dialog-ou: 0;
 
     // CONTEXTUAL STYLES
     .dark-mode({
-        --_mo-dialog-bg: var(--black-225);
+        --_mo-dialog-bg: var(--black-100);
     });
 
-    .highcontrast-dark-mode({
-        --_mo-dialog-bg: var(--black-200);
+    .highcontrast-mode({
+        --_mo-dialog-ou: var(--su2) solid var(--black-500);
     });
 
     &[aria-hidden="false"] {
@@ -46,7 +45,6 @@
     &.has-danger,
     &&__danger {
         --_mo-bg: darken(fade(.set-red()[600], 50%), 18%);
-        --_mo-header-fc: var(--red-500);
     }
 
     // CHILD ELEMENTS
@@ -61,16 +59,17 @@
             margin: 0 !important;
         }
 
-        padding: var(--su12) !important; // [1]
+        padding: var(--su6) !important; // [1]
         position: absolute !important; // [1]
-        right: var(--su8);
-        top: var(--_mo-close-t);
+        right: var(--su16);
+        top: var(--su16);
     }
 
     & &--dialog {
         padding: var(--_mo-dialog-pt) var(--su24) var(--su24);
 
         @scrollbar-styles();
+        position: relative;
         backface-visibility: hidden;
         background-color: var(--_mo-dialog-bg);
         border-radius: var(--br-md);
@@ -83,6 +82,7 @@
         transition: opacity 200ms var(--te-smooth) 0s, z-index 0s 100ms, visibility 0s 100ms, transform 100ms var(--te-smooth) 0s, transform 100ms var(--te-smooth) 0s; // Transition out
         visibility: hidden;
         z-index: var(--zi-hide); // Make sure it's also below everything so we can't interact with it.
+        outline: var(--_mo-dialog-ou);
     }
 
     & &--footer {
@@ -90,7 +90,7 @@
     }
 
     & &--header {
-        color: var(--_mo-header-fc);
+        color: var(--fc-dark);
 
         font-size: var(--fs-headline1);
         font-weight: normal;

package/lib/components/navigation/navigation.less

@@ -69,9 +69,6 @@
             --_na-item-bg-hover: var(--_na-item-selected-bg-hover);
 
             &:before {
-                .highcontrast-mode({
-                    height: 0;
-                });
                 content: "";
                 position: absolute;
                 bottom: 0;
@@ -83,7 +80,6 @@
 
             .highcontrast-mode({
                 --_na-item-fc-hover: var(--white);
-                box-shadow: inset 0 0 0 var(--su-static1) var(--black-500);
             });
 
             font-weight: bold;

package/lib/components/select/select.less

@@ -1,13 +1,13 @@
 .s-select {
-    --_se-arrow-bc: currentColor transparent;
-    --_se-arrow-size: var(--su-static4); // Constant
+    --_se-arrow-fc: currentColor;
     --_se-select-bc: var(--bc-darker);
     --_se-select-bg: var(--white);
     --_se-select-br: var(--br-md);
     --_se-select-fc: var(--black);
     --_se-select-px: 0.7em;
-    --_se-select-py: 0.6em;
+    --_se-select-py: var(--su-static8);
     --_se-select-fs: var(--fs-body1);
+    --_se-select-lh: var(--lh-base);
 
     // CONTEXTUAL STYLES
     @supports (-webkit-overflow-scrolling: touch) {
@@ -23,30 +23,15 @@
 
     .validation-states(se-select);
 
-    .is-disabled & {
-        --_se-arrow-bc: var(--bc-dark) transparent;
-    }
-
     &&__sm {
         .size-styles(sm; se-select; @styles: fs);
-        // --_se-select-fs: var(--fs-caption);
-    }
-
-    &&__md {
-        .size-styles(md; se-select; @styles: br, fs);
-        --_se-select-py: 0.5em;
+        --_se-select-lh: var(--lh-sm);
+        --_se-select-py: calc(var(--su6) - var(--su-static1) / 2);
     }
 
     &&__lg {
-        .size-styles(lg; se-select; @styles: br, fs);
-        --_se-select-px: 0.6em;
-        --_se-select-py: 0.45em;
-    }
-
-    &&__xl {
-        .size-styles(xl; se-select; @styles: br, fs);
-        --_se-select-px: 0.5em;
-        --_se-select-py: 0.4em;
+        .size-styles(md; se-select; @styles: fs);
+        --_se-select-lh: var(--lh-lg);
     }
 
     // CHILD ELEMENTS
@@ -55,26 +40,29 @@
         .webkit-autofill();
     }
 
-    &:before,
-    &:after { // menu arrows
-        border-color: var(--_se-arrow-bc);
-        border-style: solid;
-        border-width: var(--_se-arrow-size);
+    &:after { // Chevron16UpDown icon
+        background-color: currentColor;
         content: "";
+        height: var(--su-static16);
+        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M13.06 10 8 15.06 2.94 10 4 8.94l.53.53L8 12.94l3.47-3.47.53-.53zm0-4L12 7.06l-.53-.53L8 3.06 4.53 6.53 4 7.06 2.94 6 8 .94z'/%3E%3C/svg%3E");
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: contain;
         pointer-events: none;
         position: absolute;
-        right: calc(var(--su-static12) + var(--su-static1));
+        right: calc(var(--su32) - var(--su-static24));
+        top: 50%;
+        transform: translateY(-50%);
+        width: var(--su-static16);
         z-index: var(--zi-selected);
     }
 
-    &:after {
-        border-bottom-width: 0;
-        top: calc(50% + var(--su-static1));
-    }
+    .is-disabled & {
+        --_se-arrow-fc: var(--bc-dark);
 
-    &:before {
-        border-top-width: 0;
-        top: calc(50% - calc(var(--_se-arrow-size) + var(--su-static1)));
+        &:after {
+            background-color: var(--_se-arrow-fc);
+        }
     }
 
     > select { // Menu
@@ -82,7 +70,8 @@
         fieldset[disabled] &,
         &[disabled] {
             cursor: not-allowed;
-            opacity: var(--_o-disabled-static);
+            --_se-select-fc: var(--black-300);
+            --_se-select-bg: var(--black-100);
         }
 
         &[readonly],
@@ -118,7 +107,7 @@
         appearance: none;
         font-family: inherit;
         height: 100%; // Fill the height of its parent
-        line-height: var(--lh-sm);
+        line-height: var(--_se-select-lh);
         outline: 0;
         padding-right: var(--su32);
         position: relative; // This prevents Firefox from requiring a second click to select options

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@stackoverflow/stacks",
     "description": "Stack Overflow’s CSS and Design Pattern Library. Stacks is an atomic CSS library with classes and components for rapidly building Stack Overflow.",
-    "version": "3.0.0-beta.6",
+    "version": "3.0.0-beta.8",
     "files": [
         "dist",
         "lib",