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

package/lib/components/tag/tag.less

@@ -2,84 +2,87 @@
     // Base
     --_ta-bc: var(--theme-tag-border-color, var(--_ta-bg));
     --_ta-bg: var(--theme-tag-background-color, var(--black-150));
-    --_ta-fc: var(--theme-tag-color, var(--black-500));
+    --_ta-fc: var(--theme-tag-color, var(--black-600));
     // Hover
     --_ta-bc-hover: var(--theme-tag-hover-border-color, var(--_ta-bg-hover));
     --_ta-bg-hover: var(--theme-tag-hover-background-color, var(--black-200));
     --_ta-fc-hover: var(--theme-tag-hover-color, var(--black-600));
     // Other
-    --_ta-br: var(--br-md);
     --_ta-fs: var(--fs-caption);
-    --_ta-lh: 1.846153846;
-    --_ta-pl: var(--_ta-px);
-    --_ta-pr: var(--_ta-px);
-    --_ta-px: var(--su4);
-    --_ta-dismiss-padding: calc(var(--_ta-px) - var(--su-static1));
+    --_ta-pb: calc(var(--_ta-pt) + var(--su1));
+    --_ta-pl: var(--su8);
+    --_ta-pr: var(--su8);
+    --_ta-pt: var(--su4);
 
     // CONTEXTUAL STYLES
     .highcontrast-mode({
         &:not(&__moderator):not(&__required) {
             --_ta-bc: var(--theme-tag-border-color, var(--black-300));
             --_ta-bc-hover: var(--theme-tag-hover-border-color, var(--black-300));
+
+            &.s-tag__ignored {
+                --_ta-fc: var(--black-500);
+            }
         }
     });
 
     // MODIFIERS
     // Sizes
-    &&__xs {
-        .size-styles(xs; ta; @styles: fs);
-        --_ta-lh: 1.4;
-        --_ta-px: var(--su2);
-    }
     &&__sm {
-        .size-styles(sm; ta; @styles: fs);
-        --_ta-lh: 1.5;
-    }
-    &&__md {
-        --_ta-px: var(--su6);
-        --_ta-fs: var(--fs-body2);
-        --_ta-lh: 1.733333333;
+        --_ta-pl: var(--su4);
+        --_ta-pr: var(--su4);
+        --_ta-pt: var(--su1);
     }
     &&__lg {
-        --_ta-br: calc(var(--br-md) + var(--su-static1));
-        --_ta-fs: var(--fs-subheading);
-        --_ta-lh: 1.684210526;
-        --_ta-px: var(--su6);
+        --_ta-fs: var(--fs-body1);
+        --_ta-pt: var(--su4);
     }
 
     // VARIANTS
-    // NOTE: ignored and watched variants are used in core with the .post-tag class (in place of the base tag .s-tag)
-    &__ignored, // TODO: remove all single `&` ignored styles once core no longer requires them
     &&__ignored,
-    &__watched, // TODO: remove all single `&` watched styles once core no longer requires them
     &&__watched {
-        --_ta-pl: calc(var(--su-static24) - var(--su-static2)); // 22px
-        --_ta-before-size: calc(var(--su-static16) - var(--su-static2)); // 14px
-        // --_ta-before-icon defined per variant
-
         &:before {
-            height: var(--_ta-before-size);
-            width: var(--_ta-before-size);
+            // --_ta-before-icon defined per variant
             -webkit-mask: var(--_ta-before-icon) no-repeat center;
             mask: var(--_ta-before-icon) no-repeat center;
 
             background-color: currentColor;
             content: "";
             display: block;
-            left: var(--su-static4);
-            margin-right: var(--su2);
-            position: absolute;
-            top: calc(50% - calc(var(--su-static8) - var(--su-static1)));
+            height: calc(var(--su-static16) - var(--su-static2));
             -webkit-mask-size: contain;
-            mask-size: contain;
+            mask-size: contain;            
+            width: calc(var(--su-static16) - var(--su-static2));
         }
+    }
 
-        position: relative;
+    &&__deleted,
+    &&__ignored {
+        &,
+        &.s-tag__required:not(&__moderator),
+        &.s-tag__moderator {
+            --_ta-bc-hover: var(--_ta-bc);
+            --_ta-bg-hover: var(--_ta-bg);
+            --_ta-fc-hover: var(--_ta-fc);
+        }
+    }
+    
+    // TODO SHINE this is considered inaccessible. Discuss w/ design.
+    &&__deleted {
+        --_ta-fc: var(--black-500);
+
+        &.s-tag__required:not(&__moderator) {
+            --_ta-bc: var(--black-300);
+            --_ta-fc: var(--black-400);
+        }
     }
 
-    &__ignored, // TODO: remove all single `&` ignored styles once core no longer requires them
+    // TODO SHINE this is considered inaccessible. Discuss w/ design.
     &&__ignored {
+        --_ta-bg-hover: var(--_ta-bg);
         --_ta-before-icon: url("data:image/svg+xml;,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3.52 7.38 1.58 9.26A12.38 12.38 0 0 1 0 7s2.63-5.14 7.05-5.14c.66 0 1.28.12 1.86.32L7.44 3.6a3.48 3.48 0 0 0-3.92 3.78ZM5.3 9.99c.5.28 1.1.44 1.71.44 1.94 0 3.5-1.53 3.5-3.43 0-.62-.17-1.21-.47-1.72L8.7 6.6a1.73 1.73 0 0 1-2.08 2.07L5.29 10Zm6.23-6.19A12.7 12.7 0 0 1 14 7s-2.63 5.14-6.95 5.14A6.1 6.1 0 0 1 4 11.3L2.27 13l-1.4-1.36L11.9 1l1.23 1.2-1.6 1.6Z'/%3E%3C/svg%3E");
+        --_ta-fc: var(--black-400);
+        --_ta-fc-hover: var(--black-400);
     }
 
     // moderator overrides other required
@@ -93,51 +96,53 @@
     }
 
     &&__required:not(&__moderator) {
-        --_ta-bc: var(--theme-tag-required-border-color, var(--theme-tag-border-color, var(--black-400)));
-        --_ta-bg: var(--theme-tag-required-background-color, var(--theme-tag-background-color, var(--black-150)));
-        --_ta-fc: var(--theme-tag-required-color, var(--theme-tag-color, var(--black-500)));
+        --_ta-bc: var(--theme-tag-required-border-color, var(--theme-tag-border-color, var(--black-500)));
         --_ta-bc-hover: var(--theme-tag-required-hover-border-color, var(--theme-tag-hover-border-color, var(--black-600)));
-        --_ta-bg-hover: var(--theme-tag-required-hover-background-color, var(--theme-tag-hover-background-color, var(--black-200)));
-        --_ta-fc-hover: var(--theme-tag-required-hover-color, var(--theme-tag-hover-color, var(--black-600)));
     }
 
-    &__watched, // TODO: remove all single `&` watched styles once core no longer requires them
     &&__watched {
-        --_ta-before-icon: url("data:image/svg+xml;,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M7.05 1C2.63 1 0 6.5 0 6.5S2.63 12 7.05 12C11.38 12 14 6.5 14 6.5S11.37 1 7.05 1ZM7 10.17A3.59 3.59 0 0 1 3.5 6.5 3.6 3.6 0 0 1 7 2.83c1.94 0 3.5 1.65 3.5 3.67A3.57 3.57 0 0 1 7 10.17Zm0-1.84c.97 0 1.75-.81 1.75-1.83S7.97 4.67 7 4.67s-1.75.81-1.75 1.83S6.03 8.33 7 8.33Z'/%3E%3C/svg%3E");
+        --_ta-before-icon: url("data:image/svg+xml;,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12'%3E%3Cpath d='M7.05 1C2.63 1 0 6.5 0 6.5S2.63 12 7.05 12C11.38 12 14 6.5 14 6.5S11.37 1 7.05 1ZM7 10.17A3.59 3.59 0 0 1 3.5 6.5 3.6 3.6 0 0 1 7 2.83c1.94 0 3.5 1.65 3.5 3.67A3.57 3.57 0 0 1 7 10.17Zm0-1.84c.97 0 1.75-.81 1.75-1.83S7.97 4.67 7 4.67s-1.75.81-1.75 1.83S6.03 8.33 7 8.33Z'/%3E%3C/svg%3E");
     }
 
     // CHILD ELEMENTS
-    & button&--dismiss:not(.s-btn) {
-        all: unset;
-    }
+    a {
+        &:focus-visible {
+            .focus-styles();
+        }
 
-    & &--dismiss,
-    & button&--dismiss:not(.s-btn) { // Style adjustment to @Svg.ClearSm
+        color: var(--_ta-fc) !important;
+        margin: calc(var(--_ta-pt) * -1) calc(var(--_ta-pr) * -1) calc(var(--_ta-pb) * -1) calc(var(--_ta-pl) * -1);
+        padding: var(--_ta-pt) var(--_ta-pr) var(--_ta-pb) var(--_ta-pl);
+    }
+    // Dismiss
+    &:has(> &--dismiss) {
+        --_ta-pr: var(--su2);
+    }
+    & &--dismiss {
         &:focus-visible {
             .focus-styles();
         }
 
         &:hover {
-            .highcontrast-mode({
-                color: var(--white);
-            });
-
             background-color: var(--_ta-fc);
             color: var(--_ta-bg);
         }
 
+        all: unset;
         align-items: center;
-        align-self: stretch;
         background-color: transparent;
-        border-radius: var(--br-md);
         color: inherit;
         cursor: pointer;
         display: flex;
         justify-content: center;
-        margin: var(--su-static1) calc(var(--_ta-dismiss-padding) * -1) var(--su-static1) var(--_ta-dismiss-padding);
-        padding: var(--_ta-dismiss-padding);
+        margin: calc(var(--_ta-pt) * -1) 0 calc(var(--_ta-pb) * -1);
+        padding: var(--su2);
     }
 
+    // Sponsor
+    &:has(> &--sponsor) {
+        --_ta-pl: var(--su2);
+    }
     & &--sponsor { // The small sponsor favicon displayed within a tag
         img,
         .svg-icon {
@@ -145,11 +150,8 @@
             height: 100%;
         }
 
-        align-self: center;
-        border-radius: calc(var(--br-md) - var(--su-static1));
-        display: inline-flex;
-        margin: calc(var(--su1) * -1) var(--su4) calc(var(--su2) * -1) calc(var(--su2) * -1);
         max-width: calc(var(--su-static16) + var(--su-static2));
+        margin: calc(var(--_ta-pt) * -1) 0 calc(var(--_ta-pb) * -1) 0;
     }
 
     // INTERACTION
@@ -168,19 +170,15 @@
 
     background-color: var(--_ta-bg);
     border: var(--su-static1) solid var(--_ta-bc);
-    border-radius: var(--_ta-br);
     color: var(--_ta-fc);
     font-size: var(--_ta-fs);
-    line-height: var(--_ta-lh);
-    padding-left: var(--_ta-pl);
-    padding-right: var(--_ta-pr);
-
+    padding: var(--_ta-pt) var(--_ta-pr) var(--_ta-pb) var(--_ta-pl);
+    
     align-items: center;
     display: inline-flex;
-    font-weight: 700;
+    gap: var(--su4);
     justify-content: center;
-    min-width: 0;
+    line-height: var(--lh-xs);
     text-decoration: none;
-    vertical-align: middle;
     white-space: nowrap;
 }

package/lib/components/toast/toast.less

@@ -13,11 +13,10 @@
 
     .s-notice {
         box-shadow: var(--bs-sm);
-        max-width: 44rem;
+        max-width: 38.5rem;
         padding-bottom: var(--su8);
         padding-top: var(--su8);
         pointer-events: all;
-        width: 100%;
     }
 
     display: flex;

package/lib/components/topbar/topbar.less

@@ -31,7 +31,7 @@
     --_tb-searchbar-p: 0 var(--su8);
     --_tb-searchbar-open-d: unset;
     --_tb-searchbar-open-mxw: 0;
-    --_tb-searchbar-popover-wmn: calc(var(--s-step) * 4);
+    --_tb-searchbar-popover-wmn: var(--su448);
     --_tb-searchbar-popover-content-mxh: calc(100vh - var(--_tb-h) - var(--su16));
 
     // CONTEXTUAL STYLES
@@ -147,7 +147,7 @@
         height: 100%;
         margin: 0 auto;
         max-width: 100%;
-        width: var(--s-full);
+        width: var(--su-max);
     }
 
     & &--content {
@@ -413,8 +413,8 @@
 
             align-self: stretch;
             color: var(--theme-topbar-select-color, var(--black-500));
-            margin-right: calc(var(--su-static1) * -1); //-1px
-            max-width: calc(var(--s-step) * 2) !important; // wmx2;
+            margin-right: var(--sun1);
+            max-width: var(--su256) !important;
         }
 
         &.s-topbar--searchbar__open {

package/lib/components/user-card/user-card.less

@@ -1,129 +1,155 @@
 .s-user-card {
     --_uc-ai: center;
-    --_uc-bg: unset;
-    --_uc-bar: unset;
-    --_uc-d: grid;
-    --_uc-fc: unset;
-    --_uc-g: var(--su4) var(--su8);
-    --_uc-p: var(--su8);
-    --_uc-info-ai: unset;
-    --_uc-info-fd: column;
-    --_uc-link-fs: var(--fs-caption);
-    --_uc-link-ws: unset;
-    --_uc-rep-fc: unset;
-    --_uc-time-fc: var(--black-400);
-    --_uc-time-ws: unset;
-    --_uc-type-fc: var(--theme-primary-400);
-
-    // MODIFIERS
-    &&__deleted {
-        --_uc-fc: var(--black-400);
-    }
-
-    &&__highlighted {
-        --_uc-bg: var(--theme-secondary-100);
-        --_uc-bar: var(--br-md);
-        --_uc-time-fc: var(--black-500);
-        --_uc-type-fc: var(--black-500);
-    }
+    --_uc-fd: unset;
+    --_uc-column-gap: var(--su6);
+    --_uc-group-gap: var(--su4);
+    --_uc-row-gap: var(--su6);
+    --_uc-username-fs: unset;
+    --_uc-username-p: unset;
+    --_uc-username-bl: unset;
+    --_uc-username-bg: unset;
+    --_uc-username-fc: unset;
+    --_uc-username-d: unset;
+    --_uc-username-ai: unset;
 
     // VARIANTS
-    &&__minimal,
-    &&__small {
-        --_uc-d: flex;
-        --_uc-g: var(--su4);
-        --_uc-p: 0;
-        --_uc-info-ai: center;
-        --_uc-info-fd: row;
-    }
+    // SIZES
+    &&__lg {
+        .s-avatar {
+            margin-right: var(--su6);
+        }
+
+        .s-user-card--username {
+            margin-right: var(--su2);
+        }
+
+        .s-user-card--group:has(> .s-user-card--rep) {
+            margin-top: calc(var(--su2) * -1);
+        }
 
-    &&__full {
         --_uc-ai: flex-start;
-        --_uc-link-fs: var(--fs-body2);
+        --_uc-fd: column;
+        --_uc-username-fs: var(--fs-body3);
     }
 
-    &&__minimal {
-        --_uc-link-ws: nowrap;
-        --_uc-rep-fc: var(--black-500);
-        --_uc-time-ws: nowrap;
+    &&__deleted {
+        --_uc-username-fc: var(--black-400);
     }
 
     // CHILD ELEMENTS
-    & &--location,
-    & &--role {
-        font-size: var(--fs-caption);
+    & &--bio {
+        .truncation(3);
         color: var(--black-400);
     }
 
-    & &--awards {
-        li {
-            font-size: var(--fs-caption);
-        }
+    & &--recognition {
+        --_uc-row-gap: var(--su4);
 
-        .list-reset;
-        align-items: center;
-        display: flex;
-        gap: var(--su6);
+        &,
+        & a {
+            color: var(--theme-primary);
+        }
     }
 
-    & &--info {
-        align-items: var(--_uc-info-ai);
-        flex-direction: var(--_uc-info-fd);
+    & &--recognition-additional-bling {
+        &,
+        & a {
+            color: var(--theme-primary);
+        }
+    }
 
-        display: flex;
-        gap: var(--su4);
+    & &--rep {
+        color: var(--black-600);
+        font-weight: 600;
     }
 
-    & &--link {
-        font-size: var(--_uc-link-fs);
-        white-space: var(--_uc-link-ws);
+    & &--time {
+        color: var(--black-400);
+    }
 
-        align-items: center;
-        flex-wrap: wrap;
-        min-width: 0; // Allow things to wrap
+    & &--username {
+        align-items: var(--_uc-username-ai);
+        background-color: var(--_uc-username-bg);
+        border-left: var(--_uc-username-bl);
+        color: var(--_uc-username-fc);
+        display: var(--_uc-username-d);
+        font-size: var(--_uc-username-fs);
+        font-weight: 500;
+        min-width: 0;
         overflow-wrap: break-word;
+        padding: var(--_uc-username-p);
+        word-break: break-all;
     }
 
-    & &--rep {
-        color: var(--_uc-rep-fc);
-
-        font-weight: 700;
+    &--username__op {
+        --_uc-username-p: calc(var(--su4) - var(--su1)) var(--su4) calc(var(--su4) - var(--su1)) var(--su4);
+        --_uc-username-bg: var(--blue-100);
+        --_uc-username-bl: var(--su4) solid var(--blue-300);
+        --_uc-username-d: flex;
+        --_uc-username-ai: center;
+        .s-user-card__sm & {
+            --_uc-username-p: 0 var(--su4);
+        }
     }
 
-    & &--tags {
-        align-items: center;
-        min-width: 0; // Allow things to wrap
-        flex-wrap: wrap;
+    // Layout specific
+    & &--column {
+        align-items: flex-start;
+        display: flex;
+        flex-direction: column;
+        gap: var(--_uc-column-gap);
     }
 
-    & &--time {
-        color: var(--_uc-time-fc);
-        white-space: var(--_uc-time-ws);
+    & &--group {
+        &:has(> .s-avatar) {
+            --_uc-group-gap: var(--su6);
+        }
 
-        font-size: var(--fs-caption);
-        grid-column: ~"1 / 3";
-        grid-row: ~"1 / 2";
+        &:has(+ .s-user-card--time) {
+            margin-right: var(--su2);
+        }
+
+        align-items: center;
+        display: flex;
+        gap: var(--_uc-group-gap);
     }
 
-    & &--type {
-        a:not(.s-link) {
-            color: inherit !important;
+    & ul&--group {
+        &.s-user-card--group__split {
+            li:not(:last-child) {
+                &:after {
+                    background-color: var(--black-350);
+                    content: "";
+                    display: block;
+                    margin-left: var(--su4);
+                    width: var(--su4);
+                    height: var(--su4);
+                }
+            }
         }
 
-        color: var(--_uc-type-fc);
+        li {
+            align-items: center;
+            display: inline-flex;
+            gap: var(--su2);
+        }
 
-        font-size: var(--fs-caption);
-        grid-column: ~"1 / 3";
+        .list-reset;
+    }
+
+    & &--row {
+        align-items: center;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: var(--_uc-row-gap);
     }
 
     align-items: var(--_uc-ai);
-    background-color: var(--_uc-bg);
-    border-radius: var(--_uc-bar);
-    color: var(--_uc-fc);
-    display: var(--_uc-d);
-    gap: var(--_uc-g);
-
-    grid-template-columns: auto 1fr;
-    line-height: 1;
-    padding: var(--_uc-p);
-}
+    color: var(--black-500);
+    display: flex;
+    flex-direction: var(--_uc-fd);
+    flex-wrap: wrap;
+    font-size: var(--fs-caption);
+    gap: var(--su6);
+}

package/lib/components/vote/vote.less

@@ -0,0 +1,134 @@
+.s-vote {
+    --_vo-fd: column;
+    --_vo-child-bg: var(--black-150);
+    --_vo-child-br: unset;
+    --_vo-child-fd: var(--_vo-fd);
+    --_vo-child-g: calc(var(--su8) + var(--su2)); // 10px
+    --_vo-child-h: unset;
+    --_vo-child-w: calc(var(--su48) + var(--su2)); // 50px
+    --_vo-child-p: unset;
+    
+    // CHILD ELEMENTS
+    &:not(&__horizontal){
+        :first-child {
+            --_vo-child-p: calc(var(--su12) + var(--su2)) 0 calc(var(--su12) - var(--su2)); // 14px 0 10px
+            --_vo-child-br: var(--br-pill) var(--br-pill) 0 0;
+        }
+        
+        :last-child {
+            --_vo-child-p: calc(var(--su12) - var(--su2)) 0 calc(var(--su12) + var(--su2)); // 10px 0 14px
+            --_vo-child-br: 0 0 var(--br-pill) var(--br-pill);
+        }
+
+        :only-child {
+            --_vo-child-br: var(--br-pill);
+            --_vo-child-g: calc(var(--su16) + var(--su4)); // 18px
+            --_vo-child-p: calc(var(--su12) + var(--su2)) 0; // 14px 0
+        }
+    }
+
+    // MODIFIERS
+    &&__expanded {
+        --_vo-child-g: var(--su2);
+        --_vo-child-p: 0;
+
+        .s-vote {
+            &--total {
+                display: none;
+            }
+            &--upvotes,
+            &--downvotes {
+                display: block;
+            }
+        }
+    }
+
+    &&__horizontal {
+        --_vo-fd: row;
+        --_vo-child-h: var(--su32);
+        --_vo-child-p: 0 var(--su4);
+        --_vo-child-w: unset;
+        
+        :first-child {
+            --_vo-child-p: 0 var(--su6) 0 calc(var(--su8) + var(--su2)); // 0 6px 0 10px
+            --_vo-child-br: var(--br-pill) 0 0 var(--br-pill);
+        }
+
+        :last-child {
+            --_vo-child-p: 0 calc(var(--su8) + var(--su2)) 0 var(--su6); // 0 10px 0 6px
+            --_vo-child-br: 0 var(--br-pill) var(--br-pill) 0;
+        }
+
+        .s-vote--votes:last-child:not(:only-child) {
+            --_vo-child-p: 0 calc(var(--su12) + var(--su2)) 0 var(--su4); // 0 14px 0 4px
+        }
+
+        :only-child {
+            --_vo-child-br: var(--br-pill);
+            --_vo-child-g: calc(var(--su8) + var(--su2)); // 10px
+            --_vo-child-p: 0 calc(var(--su12) + var(--su2)) 0 calc(var(--su8) + var(--su2)); // 0 10px
+        }
+    }
+
+    // CHILD ELEMENTS
+    > button {
+        // Reset button styles
+        appearance: none;
+        -webkit-appearance: none;
+        background: none;
+        border: 0;
+        color: inherit;
+        cursor: pointer;
+        font: inherit;
+        margin: 0;
+        padding: 0;
+    }
+
+    & &--btn,
+    & > &--votes {
+        background-color: var(--_vo-child-bg);
+        border-radius: var(--_vo-child-br);
+        flex-direction: var(--_vo-child-fd);
+        gap: var(--_vo-child-g);
+        height: var(--_vo-child-h);
+        padding: var(--_vo-child-p);
+        width: var(--_vo-child-w);
+
+        align-items: center;
+        display: inline-flex;
+        justify-content: center;
+        overflow: hidden;
+        font-weight: 600;
+        text-align: center;
+        white-space: nowrap;
+    }
+
+    & &--upvotes,
+    & &--downvotes {
+        display: none;
+    }
+
+    & &--upvotes {
+        color: var(--green-500);
+    }
+
+    & &--downvotes {
+        color: var(--red-500);
+    }
+
+    // INTERACTION
+    > button,
+    & &--btn {
+        &:focus-visible {
+            .focus-styles(true, false);
+        }
+
+        &:hover {
+            --_vo-child-bg: var(--black-200);
+        }
+    }
+
+    flex-direction: var(--_vo-fd);
+
+    display: flex;
+}