@stackoverflow/stacks 3.0.0-beta.3 → 3.0.0-beta.30

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

@@ -1,26 +1,32 @@
-.s-navigation {
+.s-navigation,
+.s-navigation ul {
     --_na-fd: row;
     --_na-fw: wrap;
     --_na-p: var(--su2) 0;
     --_na-gap: var(--su4);
     --_na-item-bg: none;
-    --_na-item-fc: var(--black-500);
+    --_na-item-fc: var(--black-400);
     --_na-item-fs: unset;
-    --_na-item-p: var(--su6) var(--su12);
-    --_na-item-py: var(--su12);
+    --_na-item-p: calc(var(--su12) - var(--su1)) var(--su16);
     --_na-item-ws: nowrap;
-    --_na-item-bg-hover: var(--black-200);
+    --_na-item-bg-hover: var(--black-100);
     --_na-item-fc-hover: var(--_na-item-fc);
-    --_na-item-selected-bg: var(--theme-primary);
-    --_na-item-selected-fc: var(--white);
-    --_na-item-selected-bg-hover: var(--theme-primary-500);
+    --_na-item-selected-bg: none;
+    --_na-item-selected-fc: var(--black-600);
+    --_na-item-selected-bg-hover: var(--_na-item-bg-hover);
+    --_na-item-selected-h: var(--su2);
     --_na-item-text-ta: center;
-    --_na-title-mt: var(--su16);
+    --_na-after-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M11.35 4.35 6 9.71.65 4.35l.7-.7L6 8.29l4.65-4.64z'/%3E%3C/svg%3E");
+    --_na-after-bg-color: var(--black-400);
 
     // CONTEXTUAL STYLES
     .highcontrast-mode({
         --_na-item-bg-hover: var(--black-500);
         --_na-item-fc-hover: var(--black-225);
+
+        a[href].s-navigation--item {
+            text-decoration: underline;
+        }
     });
 
     // MODIFIERS
@@ -33,28 +39,32 @@
 
     &&__sm {
         --_na-item-fs: var(--fs-caption);
-        --_na-item-p: var(--su4) var(--su12);
+        --_na-item-p: var(--su6) var(--su4);
     }
 
-    &&__vertical {
+    &&__vertical,
+    &&__vertical ul {
         --_na-fd: column;
         --_na-gap: 0;
         --_na-p: 0;
         --_na-item-text-ta: unset;
         --_na-item-ws: normal;
-    }
+        --_na-item-selected-h: 0;
+        --_na-item-p: var(--su6) var(--su8);
+        --_na-item-fc: var(--black-600);
+        
+        & .s-navigation--item {
+            &.is-selected {
+                --_na-item-bg: var(--black-150);
+            }
 
-    // VARIANTS
-    &&__muted {
-        --_na-item-selected-bg: var(--black-150);
-        --_na-item-selected-fc: var(--black-600);
-        --_na-item-selected-bg-hover: var(--_na-item-bg);
-
-        .highcontrast-mode({
-            --_na-item-selected-bg: var(--black-600);
-            --_na-item-selected-fc: var(--black-150);
-            --_na-item-selected-bg-hover: var(--black-600);
-        });
+            &:has(.s-navigation--icon) {
+                --_na-item-p: calc(var(--su12) - var(--su1)) var(--su8);
+            }
+            &:has(.s-navigation--avatar) {
+                --_na-item-p: var(--su12) var(--su8);
+            }
+        }
     }
 
     // CHILD ELEMENTS
@@ -65,8 +75,18 @@
             --_na-item-fc-hover: var(--_na-item-fc);
             --_na-item-bg-hover: var(--_na-item-selected-bg-hover);
 
+            &:before {
+                content: "";
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                height: var(--_na-item-selected-h);
+                background-color: var(--_na-item-selected-fc);
+            }
+
             .highcontrast-mode({
-                text-decoration: none;
+                --_na-item-fc-hover: var(--white);
             });
 
             font-weight: bold;
@@ -75,22 +95,22 @@
         // TODO: include child component class (without variant) on selector
         &__dropdown {
             &:after {
-                border-style: solid;
-                border-width: var(--su-static4) var(--su-static4) 0 var(--su-static4);
-                border-color: currentColor transparent;
+                mask-image: var(--_na-after-mask);
+                mask-size: contain;
+                mask-repeat: no-repeat;
+                background-color: var(--_na-after-bg-color);
                 content: "";
-                pointer-events: none;
-                position: absolute;
-                right: 0.9em;
-                top: calc(50% - var(--su-static2)); // 50% - 2px
-                z-index: var(--zi-active);
+                height: var(--su12);
+                width: var(--su12);
+                margin-left: var(--su8);
             }
-
-            padding-right: 2em;
         }
 
         &:hover,
         &:active {
+            .highcontrast-mode({
+                --_na-after-bg-color: var(--white);
+            });
             background-color: var(--_na-item-bg-hover);
             color: var(--_na-item-fc-hover);
         }
@@ -108,11 +128,12 @@
 
         align-items: center;
         border: none; // Reset some things for when the navigation item is also a button
-        border-radius: 1000px;
+        border-radius: var(--br-md);
         box-shadow: none;
         cursor: pointer;
         display: flex;
         position: relative;
+        text-decoration: none;
         user-select: auto;
     }
 
@@ -132,16 +153,30 @@
     }
 
     & &--title {
-        &:first-child {
-            --_na-title-mt: 0;
+        & .s-btn {
+            color: var(--black-400);
         }
 
-        margin-top: var(--_na-title-mt);
-
+        margin-bottom: 0;
         font-size: var(--fs-fine);
-        font-weight: bold;
-        padding: var(--su6) var(--su12);
-        text-transform: uppercase;
+        font-weight: normal;
+        color: var(--black-400);
+        padding: calc(var(--su16) + var(--su2)) var(--su8);
+    }
+
+    //Add top margin to titles except the first one
+    & > li ~ li .s-navigation--title {
+        margin-top: var(--su24);
+    }
+
+    & &--icon {
+        color: inherit;
+        margin-right: var(--su4);
+    }
+
+    & &--avatar {
+        margin-right: var(--su8);
+        background: transparent;
     }
 
     flex-direction: var(--_na-fd);

package/lib/components/notice/notice.less

@@ -9,85 +9,52 @@
  */
 .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)";
-        });
     }
 }
 
 /**
  * Generate styles for a notice-based component
  *
- * Usage example:
+ * Usage examples:
  * .construct-notice-component(s-banner);
+ * .construct-notice-component(s-notice);
  *
  * @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 +70,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 +88,56 @@
         }
     }
 
+    &__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;
             });
         }
     }
@@ -156,42 +146,67 @@
     code {
         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);
+        outline: var(--su1) solid var(--_no-code-bc);
         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-fc);
+    }
+
+    &--actions {
+        display: flex;
+        margin-left: auto;
+        align-self: flex-start;
+        padding-left: var(--su24);
+        color: var(--_no-fc);
+        gap: calc(var(--su24) - var(--su2)); //22px
+        
+        //Fix css issue caused by svelte-sonner-toast in the NoticeAction svelte component
+        overflow-wrap: initial !important;
+    }
 
-        color: var(--_no-btn-fc, inherit) !important;
-        padding: var(--su8);
+    //Fix notice action color for __important variant
+    &--actions > .s-link:not(&--dismiss) {
+        color: var(--_no-fc);
     }
 
     // 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;
+
+        //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,78 @@
     }
 
     & &--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);
+        --_pa-item-bg: unset;
+        --_pa-item-br: unset;
+        --_pa-item-fc: var(--black-400);
+        --_pa-item-p: var(--su4);
 
-        // CONTEXTUAL STYLES
-        .highcontrast-mode({ text-decoration: none; });
+        .highcontrast-mode({
+            &[href] {
+                text-decoration: underline;
+            }
+        });
 
         // 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(--su2);
+                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(--su6);
+
+            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(--su1);
+        position: relative;
+        text-decoration: none;
     }
 
     &,
     ul {
         display: flex;
+        align-items: center;
         flex-wrap: wrap;
-        gap: var(--su4);
+        gap: var(--su2);
     }
 }