@stackoverflow/stacks 3.0.0-beta.13 → 3.0.0-beta.15

package/lib/components/notice/notice.less

@@ -9,32 +9,18 @@
  */
 .generate-variant-variables(@colorName: "", @modifier: "") {
     & when (@modifier = "") {
-        --_no-bc: ~"var(--@{colorName}-300)";
         --_no-bg: ~"var(--@{colorName}-100)";
-        --_no-btn-bg-active: ~"var(--@{colorName}-200)";
-        --_no-btn-bg-focus: ~"var(--@{colorName}-200)";
-        --_no-btn-fc: ~"var(--@{colorName}-500)";
+        --_no-icon-bg: ~"var(--@{colorName}-200)";
         --_no-code-bc: ~"var(--@{colorName}-300)";
         --_no-code-bg: ~"var(--@{colorName}-200)";
-
-        .highcontrast-mode({
-            --_no-bc: ~"var(--@{colorName}-400)";
-        });
     }
 
     & when (@modifier = important) {
-        --_no-bc: var(--_no-bg);
         --_no-bg: ~"var(--@{colorName}-400)";
+        --_no-icon-bg: ~"var(--@{colorName}-500)";
         --_no-fc: var(--white);
-        --_no-btn-bg-active: ~"var(--@{colorName}-500)";
-        --_no-btn-bg-focus: ~"var(--@{colorName}-500)";
-        --_no-btn-fc: ~"var(--@{colorName}-100)";
         --_no-code-bc: ~"var(--@{colorName}-300)";
         --_no-code-bg: ~"var(--@{colorName}-500)";
-
-        .highcontrast-mode({
-            --_no-bg: ~"var(--@{colorName}-500)";
-        });
     }
 }
 
@@ -47,47 +33,27 @@
  * @baseClass - The base class name for the notice component
  */
 .construct-notice-component(@baseClass) {
-    --_no-bc: var(--black-225);
-    --_no-bg: var(--black-100);
-    --_no-fc: var(--black-500);
-    --_no-btn-bg-active: var(--black-250);
-    --_no-btn-bg-focus: var(--black-225);
-    --_no-btn-fc: var(--_no-fc);
+    --_no-bg: var(--black-150);
+    --_no-icon-bg: var(--black-200);
+    --_no-fc: var(--black-600);
     --_no-code-bc: var(--black-300);
     --_no-code-bg: var(--black-200);
     --_no-code-fc: var(--_no-fc);
 
     // CONTEXTUAL STYLES
     .highcontrast-mode({
-        &,
-        &.@{baseClass}__danger,
-        &.@{baseClass}__info,
-        &.@{baseClass}__success,
-        &.@{baseClass}__warning {
-            --_no-code-bc: var(--black-400);
-            --_no-code-bg: var(--white);
-            --_no-code-fc: var(--black);
-
-            &.@{baseClass}__important {
-                --_no-code-bc: var(--black-200);
-                --_no-code-bg: var(--black);
-                --_no-code-fc: var(--white);
-            }
+        &:not(&__important) {
+            --_no-icon-bc: var(--_no-code-bc);
         }
-
-        --_no-bc: var(--black-400);
     });
 
     // MODIFIERS
-    &__important:not(.@{baseClass}__danger):not(.@{baseClass}__info):not(.@{baseClass}__success):not(.@{baseClass}__warning) {
-        --_no-bc: var(--_no-bg);
-        --_no-bg: var(--black-500);
+    &__important {
+        --_no-bg: var(--black-400);
+        --_no-icon-bg: var(--black-500);
         --_no-fc: var(--white);
-        --_no-btn-bg-focus: var(--black-600);
-        --_no-btn-bg-active: var(--black-600);
-        --_no-btn-fc: var(--_no-fc);
         --_no-code-bc: var(--black-300);
-        --_no-code-bg: var(--black-600);
+        --_no-code-bg: var(--black-500);
     }
 
     // VARIANTS
@@ -103,11 +69,11 @@
 
     &__info {
         &:not(.@{baseClass}__important) {
-            .generate-variant-variables(theme-secondary);
+            .generate-variant-variables(blue);
         }
 
         &.@{baseClass}__important {
-            .generate-variant-variables(theme-secondary, important);
+            .generate-variant-variables(blue, important);
         }
     }
 
@@ -121,33 +87,57 @@
         }
     }
 
+    &__featured {
+        &:not(.@{baseClass}__important) {
+            .generate-variant-variables(purple);
+        }
+
+        &.@{baseClass}__important {
+            .generate-variant-variables(purple, important);
+        }
+    }
+
+    &__activity {
+        &:not(.@{baseClass}__important) {
+            .generate-variant-variables(pink);
+        }
+
+        &.@{baseClass}__important {
+            .generate-variant-variables(pink, important);
+        }
+    }
+
     &__warning {
         &:not(.@{baseClass}__important) {
             .generate-variant-variables(yellow);
-            --_no-btn-fc: var(--yellow-600);
+            
         }
 
         &.@{baseClass}__important {
-            --_no-bc: var(--_no-bg);
-            --_no-bg: var(--yellow-400);
+            --_no-bg: var(--yellow-300);
+            --_no-icon-bg: var(--yellow-400);
             --_no-fc: var(--black);
-            --_no-btn-fc: var(--_no-fc);
-            --_no-btn-bg-active: var(--yellow-300);
-            --_no-btn-bg-focus: var(--yellow-300);
-            --_no-code-bc: var(--yellow-500);
-            --_no-code-bg: var(--yellow-300);
+            --_no-code-bc: var(--yellow-400);
+            --_no-code-bg: var(--yellow-200);
+
+            .s-notice--icon {
+                color: var(--white);
+            }
 
             .dark-mode({
                 --_no-fc: var(--white);
                 --_no-code-bc: var(--yellow-300);
                 --_no-code-bg: var(--yellow-500);
+                --_no-bg: var(--yellow-400);
+                --_no-icon-bg: var(--yellow-500);
             });
 
             .highcontrast-mode({
-                --_no-bg: var(--yellow-500);
+                --_no-bg: var(--yellow-400);
+                --_no-icon-bg: var(--yellow-500);
+                --_no-code-bc: var(--yellow-300);
+                --_no-code-bg: var(--yellow-500);
                 --_no-fc: var(--white);
-                --_no-btn-bg-active: transparent;
-                --_no-btn-bg-focus: transparent;
             });
         }
     }
@@ -157,41 +147,60 @@
         background-color: var(--_no-code-bg);
         color: var(--_no-code-fc);
         outline: var(--su-static1) solid var(--_no-code-bc);
-
-        border-radius: var(--br-md);
         padding-left: var(--su2);
         padding-right: var(--su2);
+        white-space: nowrap;
     }
 
-    & &--btn {
-        // TODO: decouple .s-notice--btn from .s-btn
+    button&--dismiss {
         &:active {
-            background-color: var(--_no-btn-bg-active, inherit) !important;
+            background-color: var(--_no-fc);
+            color: var(--_no-bg);
         }
 
         &:focus-visible,
         &:hover,
         &.focus-inset-bordered {
-            background-color: var(--_no-btn-bg-focus, inherit) !important;
+            background-color: var(--_no-fc);
+            color: var(--_no-bg);
         }
+    }
 
-        color: var(--_no-btn-fc, inherit) !important;
-        padding: var(--su8);
+    :has(>button&--dismiss) {
+        padding-left: var(--su24);
+        //Add spacing between multiple notice actions
+        gap: calc(var(--su24) - var(--su2)); //22px
+        //Fix css issue caused by svelte-sonner-toast in the NoticeAction svelte component
+        word-wrap: initial !important;
     }
 
     // STYLES MODIFIED BY COMPONENT-SPECIFIC CUSTOM PROPERTIES
     background: var(--_no-bg);
-    border-color: var(--_no-bc);
     color: var(--_no-fc);
-
-    border-style: solid;
-    font-size: var(--fs-body1);
 }
 
 .s-notice {
     .construct-notice-component(s-notice);
 
-    border-radius: var(--br-md);
-    border-width: var(--su-static1);
-    padding: var(--su16);
+    display: flex;
+    align-items: center;
+
+    --_no-pd: var(--su8);
+    padding: var(--_no-pd) var(--su12) var(--_no-pd) 0;
+
+    &--icon {
+        background: var(--_no-icon-bg);
+        border: var(--su1) solid var(--_no-icon-bc, var(--_no-icon-bg));
+        padding: var(--_no-pd);
+        margin-right: var(--su12);
+        align-self: stretch;
+
+        //Position the svg icon
+        display: flex;
+        align-items: top;
+
+        //Negative margin to make up for s-notice's padding
+        margin-top: calc(var(--_no-pd) * -1);
+        margin-bottom: calc(var(--_no-pd) * -1);
+    }
 }

package/lib/components/popover/popover.less

@@ -3,7 +3,7 @@
     --_po-bc: var(--bc-medium);
     --_po-bs: var(--bs-md);
     --_po-d: none;
-    --_po-wmn: 12rem;
+    --_po-wmn: 10.5rem;
     --_po-w: 100%;
     // content
     // --_po-topbar-height assumes the topbar height based on topbar styles
@@ -51,7 +51,7 @@
     border-radius: var(--br-md);
     color: var(--fc-dark);
     font-size: var(--fs-body1);
-    max-width: 24rem;
+    max-width: 21rem;
     padding: var(--su12);
     position: absolute;
     white-space: normal; // Guard against popovers being in a container with white-space: nowrap. Without this, the content pops *out* of the popover.

package/lib/components/post-summary/post-summary.less

@@ -270,8 +270,8 @@
             font-size: var(--fs-body3);
             font-weight: normal;
             line-height: var(--lh-md);
-            margin-bottom: 0.3846rem;
-            margin-top: -0.15rem; // Optical alignment to compensate for title's containing block
+            margin-bottom: 0.3365rem;
+            margin-top: -0.125rem; // Optical alignment to compensate for title's containing block
             padding-right: var(--su24);
         }
 

package/lib/components/prose/prose.less

@@ -49,11 +49,11 @@
     &&__xs,
     &&__sm,
     &&__md {
-        --_pr-h1-fs: var(--fs-headline1-relative);
-        --_pr-h2-fs: var(--fs-title-relative);
-        --_pr-h3-fs: var(--fs-subheading-relative);
-        --_pr-h4-fs: var(--fs-body3-relative);
-        --_pr-h5-fs: var(--fs-body2-relative);
+        --_pr-h1-fs: 1.75em;
+        --_pr-h2-fs: 1.375em;
+        --_pr-h3-fs: 1.25em;
+        --_pr-h4-fs: 1.125em;
+        --_pr-h5-fs: 1em;
     }
 
     &&__xs {

package/lib/components/table/table.less

@@ -202,10 +202,6 @@
     }
 
     td {
-        .s-checkbox {
-            display: block;
-        }
-
         &.s-table--bulk {
             --_ta-td-w: calc(var(--su32) - var(--su2)); // 30px
         }
@@ -249,10 +245,6 @@
     }
 
     th {
-        .s-checkbox {
-            display: block;
-        }
-
         &.s-table--bulk {
             --_ta-th-w: calc(var(--su32) - var(--su2)); // 30px
         }

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/user-card/user-card.less

@@ -1,129 +1,121 @@
 .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;
 
     // 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);
+        }
 
-    &&__full {
-        --_uc-ai: flex-start;
-        --_uc-link-fs: var(--fs-body2);
-    }
+        .s-user-card--username {
+            margin-right: var(--su2);
+        }
 
-    &&__minimal {
-        --_uc-link-ws: nowrap;
-        --_uc-rep-fc: var(--black-500);
-        --_uc-time-ws: nowrap;
+        .s-user-card--group:has(> .s-user-card--rep) {
+            margin-top: calc(var(--su2) * -1);
+        }
+
+        --_uc-ai: flex-start;
+        --_uc-fd: column;
+        --_uc-username-fs: var(--fs-body3);
     }
 
     // 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);
-
-        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 {
+        font-size: var(--_uc-username-fs);
+        font-weight: 500;
+        min-width: 0;
         overflow-wrap: break-word;
+        word-break: break-all;
     }
 
-    & &--rep {
-        color: var(--_uc-rep-fc);
-
-        font-weight: 700;
+    // Layout specific
+    & &--column {
+        align-items: flex-start;
+        display: flex;
+        flex-direction: column;
+        gap: var(--_uc-column-gap);
     }
 
-    & &--tags {
-        align-items: center;
-        min-width: 0; // Allow things to wrap
-        flex-wrap: wrap;
-    }
+    & &--group {
+        &:has(> .s-avatar) {
+            --_uc-group-gap: var(--su6);
+        }
 
-    & &--time {
-        color: var(--_uc-time-fc);
-        white-space: var(--_uc-time-ws);
+        &:has(+ .s-user-card--time) {
+            margin-right: var(--su2);
+        }
 
-        font-size: var(--fs-caption);
-        grid-column: ~"1 / 3";
-        grid-row: ~"1 / 2";
+        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;
+}