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

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
+        overflow-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/pagination/pagination.less

@@ -8,70 +8,71 @@
     }
 
     & &--item {
-        --_pa-item-bg: transparent;
-        --_pa-item-bc: var(--bc-darker);
-        --_pa-item-fc: var(--fc-medium);
-        --_pa-item-bg-focus: var(--black-400);
-        --_pa-item-fc-focus: var(--white);
-        --_pa-item-bg-hover: var(--black-225);
-        --_pa-item-bc-hover: var(--bc-darker);
-        --_pa-item-fc-hover: var(--fc-dark);
-
-        // CONTEXTUAL STYLES
-        .highcontrast-mode({ text-decoration: none; });
+        --_pa-item-bg: unset;
+        --_pa-item-br: unset;
+        --_pa-item-fc: var(--black-400);
+        --_pa-item-p: var(--su-static4);
 
         // MODIFIERS
         &.is-selected {
-            --_pa-item-bg: var(--theme-primary);
-            --_pa-item-bc: transparent;
-            --_pa-item-fc: var(--white);
-            --_pa-item-bg-focus: var(--theme-primary-400);
-        }
-        &.s-pagination--item__clear {
-            --_pa-item-bg: transparent;
-            --_pa-item-bc: transparent;
-            --_pa-item-fc: inherit;
+            --_pa-item-fc: var(--black-600);
+
+            &:not(:hover):not(:focus-visible):before {
+                background-color: var(--black-600);
+                content: "";
+                height: var(--su-static2);
+                left: 0;
+                position: absolute;
+                right: 0;
+                top: 100%;
+            }
         }
-        // override hover styles to match base styles
-        &.is-selected,
-        &.s-pagination--item__clear {
-            --_pa-item-bc-hover: var(--_pa-item-bc);
-            --_pa-item-bg-hover: var(--_pa-item-bg);
-            --_pa-item-fc-hover: var(--_pa-item-fc);
+        &.s-pagination--item__nav {
+            --_pa-item-bg: var(--black-150);
+            --_pa-item-br: var(--br-circle);
+            --_pa-item-fc: var(--black-600);
+            --_pa-item-p: var(--su-static6);
+
+            aspect-ratio: 1 / 1;
+
+            &:hover {
+                --_pa-item-bg: var(--black-200);
+            }
         }
 
         // INTERACTION
-        &:hover {
-            background-color: var(--_pa-item-bg-hover);
-            border-color: var(--_pa-item-bc-hover);
-            color: var(--_pa-item-fc-hover);
+        &[href]:hover:not(&__nav) {
+            --_pa-item-bg: var(--black-150);
+            --_pa-item-br: var(--br-pill);
+            --_pa-item-fc: var(--black-600);
         }
-
         &:focus-visible {
-            .focus-styles(true, true);
+            --_pa-item-bg: var(--black-150);
+            --_pa-item-fc: var(--black-600);
+            .focus-styles(false, true);
         }
-
-        &:focus-visible,
+        &:focus-visible:not(&__nav),
         &.focus-inset-bordered {
-            background-color: var(--_pa-item-bg-focus);
-            color: var(--_pa-item-fc-focus);
+            --_pa-item-br: var(--br-md);
         }
 
         background-color: var(--_pa-item-bg);
-        border: 1px solid var(--_pa-item-bc);
+        border-radius: var(--_pa-item-br);
         color: var(--_pa-item-fc);
+        padding: var(--_pa-item-p);
 
-        border-radius: var(--br-md);
-        display: inline-block;
-        font-size: var(--fs-body1);
-        line-height: var(--lh-xl);
-        padding: 0 var(--su8);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        margin: var(--su-static1);
+        position: relative;
     }
 
     &,
     ul {
         display: flex;
+        align-items: center;
         flex-wrap: wrap;
-        gap: var(--su4);
+        gap: var(--su2);
     }
 }

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
@@ -12,9 +12,7 @@
 
     // CONTEXTUAL STYLES
     .dark-mode({
-        --_po-bg: var(--black-200);
-        --_po-bc: var(--bc-light);
-        --_po-bs: var(--bs-lg);
+        --_po-bg: var(--black-100);
     });
 
     // MODIFIERS
@@ -31,20 +29,20 @@
     // Close btn
     & &--close {
         float: right; // Use floats for title wrapping
-        top: calc(var(--su8) * -1); // Compensate for s-popover's padding
-        right: calc(var(--su8) * -1); // Compensate for s-popover's padding
-        padding: var(--su8) !important;
+        top: var(--sun8); // Compensate for s-popover's padding
+        right: var(--sun8); // Compensate for s-popover's padding
+        padding: var(--su6) !important;
     }
 
     & &--content {
         max-height: var(--_po-content-mxh);
         overflow-y: auto;
-        margin: calc(var(--su12) * -1);
+        margin: var(--sun12);
         padding: var(--su12);
     }
 
     background-color: var(--_po-bg);
-    border: 1px solid var(--_po-bc);
+    border: var(--su-static1) solid var(--_po-bc);
     box-shadow: var(--_po-bs);
     display: var(--_po-d);
     min-width: var(--_po-wmn);
@@ -53,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

@@ -76,6 +76,7 @@
 
                     background-color: var(--_ps-meta-tags-tag-bg);
                     color: var(--black-500);
+                    border-color: var(--black-300);
                 }
             }
         }
@@ -216,7 +217,7 @@
             .v-truncate2;
             color: var( --_ps-content-excerpt-fc);
             font-family: var(--theme-post-body-font-family, var(--theme-body-font-family));
-            margin-top: calc(var(--su2) * -1);
+            margin-top: var(--sun2);
             margin-bottom: var(--su8);
         }
 
@@ -260,7 +261,7 @@
 
             .svg-icon {
                 position: relative;
-                top: calc(var(--su1) * -1);
+                top: var(--sun1);
                 vertical-align: text-bottom; // Optical alignment
             }
 
@@ -269,15 +270,15 @@
             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);
         }
 
         &--content-type {
             .svg-icon {
                 color: var(--fc-light);
-                margin-left: calc(var(--su2) * -1);
+                margin-left: var(--sun2);
             }
 
             color: var(--fc-medium);

package/lib/components/progress-bar/progress-bar.less

@@ -254,7 +254,7 @@
                 content: "";
                 display: block;
                 height: 100%;
-                left: calc(var(--su-static1) * -1); // -1px
+                left: var(--sun1);
                 position: absolute;
                 top: 0;
                 width: var(--su-static4);

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/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/lib/components/sidebar-widget/sidebar-widget.less

@@ -123,8 +123,8 @@
                     content: '';
                     height: calc(100% + var(--su16));
                     left: 0;
-                    margin-left: calc(var(--su16) * -1 - var(--su-static1)); // the orange selection indicator overlaps with the widget border
-                    margin-top: calc(var(--su16) / 2 * -1);
+                    margin-left: var(--sun16); // the orange selection indicator overlaps with the widget border
+                    margin-top: var(--sun8);
                     position: absolute;
                 }
 

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
         }