@stackoverflow/stacks 3.0.0-beta.23 → 3.0.0-beta.24

package/lib/components/form-group/form-group.less

@@ -7,6 +7,14 @@
         --_fg-gap: 0;
     }
 
+    &:has(.s-input__sm, .s-textarea__sm, .s-select__sm) {
+        --_fg-gap: var(--su6);
+    }
+
+    &:has(.s-input__lg, .s-textarea__lg, .s-select__lg) {
+        --_fg-gap: calc(var(--su8) + var(--su2));
+    }
+
     // MODIFIERS
     &&__horizontal {
         --_fg-fd: row;
@@ -16,7 +24,12 @@
     legend.s-label {
         margin-bottom: var(--su8);
     }
-    
+
+    &:has(.s-input, .s-textarea, .s-select) {
+        .s-label + .s-description {
+            margin-top: var(--sun4);
+        }
+    }
 
     flex-direction: var(--_fg-fd);
 

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

@@ -12,17 +12,17 @@
     }
 
     &.order-first {
-        --_if-blw: var(--su-static1);
+        --_if-blw: var(--su1);
         --_if-blr: var(--br-md);
     }
 
     &.order-last {
-        --_if-brw: var(--su-static1);
+        --_if-brw: var(--su1);
         --_if-brr: var(--br-md);
     }
 
     background-color: var(--_if-bg);
-    border: var(--su-static1) solid var(--_if-bc);
+    border: var(--su1) solid var(--_if-bc);
     border-left-width: var(--_if-blw);
     border-right-width: var(--_if-brw);
     border-radius: var(--_if-blr) var(--_if-brr) var(--_if-brr) var(--_if-blr);

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

@@ -1,6 +1,6 @@
 .s-input-icon {
     --_ii-fc: unset;
-    --_ii-r: calc((var(--su-static8) + var(--su-static2))); // 10px
+    --_ii-r: calc((var(--su8) + var(--su2))); // 10px
 
     // MODIFIERS
     .has-error & {
@@ -32,7 +32,7 @@
         --_ii-r: auto;
 
         color: var(--black-400);
-        left: calc((var(--su-static8) + var(--su-static2))); // 10px
+        left: calc((var(--su8) + var(--su2))); // 10px
     }
 
     color: var(--_ii-fc);

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

@@ -45,5 +45,6 @@
     color: var(--_im-fc);
 
     font-size: var(--fs-caption);
+    margin-bottom: 0;
     padding: var(--su2);
 }

package/lib/components/input_textarea/input_textarea.less

@@ -6,7 +6,7 @@
     --_in-bc: var(--black-300);
     --_in-bg: var(--white);
     --_in-br: var(--br-md);
-    --_in-bw: var(--su-static1);
+    --_in-bw: var(--su1);
     --_in-c: unset;
     --_in-d: unset;
     --_in-fc: var(--black-600);
@@ -74,7 +74,7 @@
 
     &&__creditcard,
     &&__search {
-        --_in-pl: calc(var(--su-static32) + var(--su-static4)); // 36px
+        --_in-pl: calc(var(--su32) + var(--su4)); // 36px
     }
 
     // INTERACTION

package/lib/components/label/label.less

@@ -1,6 +1,6 @@
 .s-label {
     --_la-c: unset;
-    --_la-fs: var(--fs-body2);
+    --_la-fs: var(--fs-body2); // 16
 
     // CONTEXTUAL STYLES
     &[for] {
@@ -28,65 +28,27 @@
     // MODIFIERS
     // Sizes
     &&__sm {
-        .size-styles(sm; la; @styles: fs);
-    }
-
-    &&__md {
-        .size-styles(md; la; @styles: fs);
+        --_la-fs: var(--fs-body1); // 14
     }
 
     &&__lg {
-        .size-styles(lg; la; @styles: fs);
-    }
-
-    &&__xl {
-        .size-styles(xl; la; @styles: fs);
+        --_la-fs: calc(var(--su16) + var(--su6)); // 22
     }
 
     // CHILD ELEMENTS
-    // Label status flag
-    // Is this form item required or optional? Flag the status for users.
-    // Default styling is optional.
-    &--status { // TODO convert to require parent class for styling [1]
-        --_la-status-b: none;
-        --_la-status-bg: var(--black-150);
-        --_la-status-fc: var(--fc-medium);
-
-        .highcontrast-mode({
-            --_la-status-b: var(--su-static1) solid currentColor;
-        });
-
-        // TODO: include child component class (without variant) on selector
-        &__beta {
-            --_la-status-bg: var(--blue-200);
-            --_la-status-fc: var(--blue-500);
-        }
-
-        &__new {
-            --_la-status-bg: var(--green-200);
-            --_la-status-fc: var(--green-500);
-        }
-
-        &__required {
-            --_la-status-bg: var(--red-200);
-            --_la-status-fc: var(--red-500);
-        }
-
-        background-color: var(--_la-status-bg);
-        border: var(--_la-status-b);
-        color: var(--_la-status-fc);
-
-        border-radius: 1000px;
-        font-size: var(--fs-caption);
+    .s-badge {
         font-weight: 400;
-        margin-left: var(--su4);
-        padding: var(--su2) var(--su8);
-        vertical-align: text-bottom;
+        margin-left: var(--su6);
+    }
+    &:has(.s-badge) {
+        display: flex;
+        align-items: center;
     }
 
     // TODO we shouldn't support descriptions and messages within labels
     .s-description,
     .s-input-message {
+        font-size: var(--fs-caption);
         font-weight: normal;
         margin-bottom: 0;
         margin-top: var(--su4);
@@ -95,10 +57,9 @@
 
     cursor: var(--_la-c);
     font-size: var(--_la-fs);
-
-    color: var(--fc-medium);
+    color: var(--black-500);
     font-family: inherit;
-    font-weight: 700;
+    font-weight: 600;
     padding: 0 var(--su2); // Helps the label visually line up with inputs
 }
 
@@ -109,8 +70,3 @@
     line-height: 0;
     text-decoration: none !important;
 }
-
-// [1] In Core, we have *many* instances of `.s-label--status` used without the `.s-label` parent.
-//     While I'd prefer to enforce the requirement of the parent class, it's too much of a lift at this moment.
-//     We'll come back to it, hopefully when we have a pill component to replace the current usage of `.s-label--status`
-//     without the base label class.

package/lib/components/link/link.less

@@ -1,105 +1,51 @@
-// TODO we *really* shouldn't be apply styles directly onto `<a>` like this, but
-// it's tech debt that'll take some doing in consumer's code to pay down.
-a {
-    // We're target these specific selectors to avoid affecting the visited state of stacks components
-    // not specified here. See for https://github.com/StackExchange/Stacks/pull/1740#discussion_r1698389312
-    // TODO remove .post-tag, .badge, .badge-tag reference once core no longer requires them
-    &:not([class*="s-"]):not(.post-tag):not(.badge):not(.badge-tag),
-    &.s-sidebarwidget--action,
-    &.s-user-card--link {
-        // Use --_an-a-* (.s-anchors a) custom properties when they're defined.
-        // Otherwise, use the default link colors.
-        &:active,
-        &:hover {
-            color: var(--_an-a-fc-hover, var(--_li-fc-hover));
-        }    
-
-        &:visited {
-            color: var(--_an-a-fc-visited, var(--_li-fc-visited));
-        }
-
-        &:hover:visited {
-            color: var(--_an-a-fc-hover-visited, var(--_li-fc-hover-visited));
-        }
-    }
-}
-
-a,
 .s-link {
-    --_li-fc: var(--theme-link-color, var(--theme-secondary));
-    --_li-fc-hover: var(--theme-link-color-hover, var(--theme-secondary-500));
-    --_li-fc-visited: var(--theme-link-color-visited, var(--purple-500));
-    --_li-fc-hover-visited: var(--theme-link-color-visited, var(--purple-600));
+    --_li-fc: var(--theme-link-color, var(--black-600));
+    --_li-fc-hover: var(--theme-link-color-hover, var(--blue-400));
+    --_li-fc-visited: var(--theme-link-color-visited, var(--black-400));
 
     // CONTEXTUAL STYLES
     .highcontrast-mode({
         text-decoration: underline;
     });
 
-    // STATES
-    &.s-link {
-        // MODIFIERS
-        &__dropdown {
-            &:after {
-                border-width: var(--su-static4); // this needs to come before any below border modifications
-                border-bottom-width: 0;
-                border-color: currentColor transparent;
-                border-style: solid;
-                border-top-width: var(--su-static4);
-                content: "";
-                pointer-events: none;
-                position: absolute;
-                right: 0;
-                top: calc(50% - var(--su-static2));
-                z-index: var(--zi-active);
-            }
-
-            padding-right: 0.9em;
-            position: relative;
-        }
-
-        &__underlined {
-            text-decoration: underline !important;
+    // MODIFIERS
+    &__dropdown {
+        &:after {
+            border-color: currentColor transparent;
+            border-style: solid;
+            border-width: var(--su4) var(--su4) 0 var(--su4);
+            content: "";
         }
 
-        &__visited { // TODO can we get rid of this? It's only in 3 places in Core and seems to me it doesn't even serve a purpose.
-            --_li-fc: var(--theme-link-color-visited, var(--purple-500));
-            --_li-fc-hover: var(--theme-link-color-hover, var(--purple-600));
-            --_li-fc-visited: var(--theme-link-color-visited, var(--purple-500));
-            --_li-fc-hover-visited: var(--theme-link-color-visited, var(--purple-600));
-        }
+        align-items: center;
+        display: inline-flex;
+        gap: var(--su4);
+    }
 
-        // VARIANTS
-        &__danger,
-        &__grayscale,
-        &__inherit,
-        &__muted {
-            --_li-fc-hover-visited: var(--_li-fc-hover);
-        }
+    &__underlined {
+        text-decoration: underline !important;
+    }
 
-        &__danger {
-            --_li-fc: var(--red-400);
-            --_li-fc-hover: var(--red-500);
-            --_li-fc-visited: var(--red-600);
-        }
+    // VARIANTS
+    &__danger {
+        --_li-fc: var(--red-400);
+        --_li-fc-hover: var(--red-500);
+        --_li-fc-visited: var(--red-600);
+    }
 
-        &__grayscale {
-            --_li-fc: var(--black-500);
-            --_li-fc-hover: var(--black-600);
-            --_li-fc-visited: var(--black-400);
-        }
+    &__grayscale {
+        --_li-fc: var(--black-500);
+        --_li-fc-hover: var(--black-600);
+    }
 
-        &__inherit {
-            --_li-fc: inherit !important;
-            --_li-fc-hover: inherit !important;
-            --_li-fc-visited: inherit !important;
-        }
+    &__inherit {
+        --_li-fc: inherit !important;
+        --_li-fc-hover: inherit !important;
+        --_li-fc-visited: inherit !important;
+    }
 
-        &__muted {
-            --_li-fc: var(--black-400);
-            --_li-fc-hover: var(--black-500);
-            --_li-fc-visited: var(--black-600);
-        }
+    &__muted {
+        --_li-fc: var(--black-400);
     }
 
     // MODIFIERS
@@ -109,13 +55,6 @@ a,
         pointer-events: none;
     }
 
-    color: var(--_li-fc);
-    cursor: pointer;
-    text-decoration: none;
-    user-select: auto;
-}
-
-.s-link {
     button& {
         &:focus {
             outline: revert;
@@ -138,12 +77,19 @@ a,
     &:active,
     &:hover {
         --_li-fc: var(--_li-fc-hover);
+        text-decoration: underline;
     }
+
     &:visited {
+        &:hover {
+            color: var(--_li-fc-hover);
+        }
+
         color: var(--_li-fc-visited);
     }
 
-    &:hover:visited {
-        color: var(--_li-fc-hover-visited);
-    }
+    color: var(--_li-fc);
+    cursor: pointer;
+    text-decoration: none;
+    user-select: auto;
 }

package/lib/components/link-preview/link-preview.less

@@ -68,7 +68,7 @@
 
         border-bottom-left-radius: var(--br-md);
         border-bottom-right-radius: var(--br-md);
-        border-top: var(--su-static1) solid var(--bc-medium);
+        border-top: var(--su1) solid var(--bc-medium);
         display: flex;
         font-size: var(--fs-caption);
         justify-content: space-between;
@@ -77,7 +77,7 @@
 
     & &--header {
         background: var(--_lp-header-bg);
-        border-bottom: var(--su-static1) solid var(--bc-medium);
+        border-bottom: var(--su1) solid var(--bc-medium);
         border-top-left-radius: var(--br-md);
         border-top-right-radius: var(--br-md);
         display: flex;
@@ -105,23 +105,15 @@
     & a&--title {
         &:active,
         &:hover {
-            color: var(--theme-link-color-hover, var(--theme-secondary-500));
-        }
-
-        &:active,
-        &:hover,
-        &.s-link__visited:active,
-        &.s-link__visited:hover,
-        &.s-link__visited:visited {
             .highcontrast-mode({
                 text-decoration: underline;
             });
 
+            color: var(--theme-link-color-hover, var(--theme-secondary-500));
             text-decoration: none;
         }
 
-        &:visited,
-        &.s-link__visited {
+        &:visited {
             &:hover {
                 color: var(--theme-link-color, var(--purple-600));
             }
@@ -141,7 +133,7 @@
         white-space: nowrap;
     }
 
-    border: var(--su-static1) solid var(--bc-medium);
+    border: var(--su1) solid var(--bc-medium);
     border-radius: var(--br-md);
     box-shadow: var(--bs-sm);
     text-align: left;

package/lib/components/menu/menu.less

@@ -3,10 +3,17 @@
     --_me-action-fc: var(--black-500);
     --_me-item-p: var(--su8);
 
+    // CONTEXTUAL STYLES
+    .highcontrast-mode({
+        a[href] {
+            text-decoration: underline;
+        }
+    });
+
     // CHILD ELEMENTS
     & &--divider {
         background-color: var(--black-200);
-        height: var(--su-static1);
+        height: var(--su1);
         margin: var(--su8) 0;
     }
 
@@ -79,6 +86,7 @@
         cursor: pointer;
         display: flex;
         padding: var(--su8);
+        text-decoration: none;
         width: 100%;
     }
 

package/lib/components/navigation/navigation.less

@@ -13,7 +13,7 @@
     --_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(--su-static2);
+    --_na-item-selected-h: var(--su2);
     --_na-item-text-ta: center;
     --_na-title-mt: var(--su24);
     --_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");
@@ -23,6 +23,10 @@
     .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
@@ -46,6 +50,7 @@
         --_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);
@@ -126,6 +131,7 @@
         cursor: pointer;
         display: flex;
         position: relative;
+        text-decoration: none;
         user-select: auto;
     }
 

package/lib/components/notice/notice.less

@@ -146,7 +146,7 @@
     code {
         background-color: var(--_no-code-bg);
         color: var(--_no-code-fc);
-        outline: var(--su-static1) solid var(--_no-code-bc);
+        outline: var(--su1) solid var(--_no-code-bc);
         padding-left: var(--su2);
         padding-right: var(--su2);
         white-space: nowrap;

package/lib/components/page-title/page-title.less

@@ -43,7 +43,7 @@
     align-items: var(--_pt-ai);
     flex-direction: var(--_pt-fd);
 
-    border-bottom: var(--su-static1) solid var(--bc-medium);
+    border-bottom: var(--su1) solid var(--bc-medium);
     display: flex;
     justify-content: space-between;
     padding-bottom: var(--su16);

package/lib/components/pagination/pagination.less

@@ -11,7 +11,13 @@
         --_pa-item-bg: unset;
         --_pa-item-br: unset;
         --_pa-item-fc: var(--black-400);
-        --_pa-item-p: var(--su-static4);
+        --_pa-item-p: var(--su4);
+
+        .highcontrast-mode({
+            &[href] {
+                text-decoration: underline;
+            }
+        });
 
         // MODIFIERS
         &.is-selected {
@@ -20,7 +26,7 @@
             &:not(:hover):not(:focus-visible):before {
                 background-color: var(--black-600);
                 content: "";
-                height: var(--su-static2);
+                height: var(--su2);
                 left: 0;
                 position: absolute;
                 right: 0;
@@ -31,7 +37,7 @@
             --_pa-item-bg: var(--black-150);
             --_pa-item-br: var(--br-circle);
             --_pa-item-fc: var(--black-600);
-            --_pa-item-p: var(--su-static6);
+            --_pa-item-p: var(--su6);
 
             aspect-ratio: 1 / 1;
 
@@ -64,8 +70,9 @@
         display: inline-flex;
         align-items: center;
         justify-content: center;
-        margin: var(--su-static1);
+        margin: var(--su1);
         position: relative;
+        text-decoration: none;
     }
 
     &,

package/lib/components/popover/popover.less

@@ -7,7 +7,7 @@
     --_po-w: 100%;
     // content
     // --_po-topbar-height assumes the topbar height based on topbar styles
-    --_po-topbar-height: var(--theme-topbar-height, calc(var(--su-static48) + var(--su-static8)));
+    --_po-topbar-height: var(--theme-topbar-height, calc(var(--su48) + var(--su8)));
     --_po-content-mxh: calc(100vh - var(--_po-topbar-height) - var(--su48));
 
     // CONTEXTUAL STYLES
@@ -42,7 +42,7 @@
     }
 
     background-color: var(--_po-bg);
-    border: var(--su-static1) solid var(--_po-bc);
+    border: var(--su1) solid var(--_po-bc);
     box-shadow: var(--_po-bs);
     display: var(--_po-d);
     min-width: var(--_po-wmn);

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

@@ -12,6 +12,10 @@
 
     // Conditional styles
     .highcontrast-mode({
+        a[href] {
+            text-decoration: underline !important;
+        }
+
         &__deleted * {
             --_ps-ignored-fc: var(--black-500);
         }
@@ -142,7 +146,7 @@
             --_ps-content-type-fc: var(--black-600);
         }
 
-        border: var(--su-static1) solid var(--_ps-content-type-bc);
+        border: var(--su1) solid var(--_ps-content-type-bc);
         background-color: var(--_ps-content-type-bg);
         color: var(--_ps-content-type-fc);
 
@@ -273,6 +277,7 @@
         font-weight: 600;
         gap: var(--su4);
         margin-top: var(--su2);
+        text-decoration: none;
     }
 
     & &--title-icon {