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

package/lib/components/button/button.less

@@ -1,5 +1,5 @@
 .s-btn {
-    --_bu-baw: var(--su-static1);
+    --_bu-baw: var(--su1);
     --_bu-br: var(--br-pill);
     --_bu-fs: var(--fs-body1);
     --_bu-lh: var(--lh-base);
@@ -9,21 +9,25 @@
     --_bu-badge-fs: var(--fs-caption);
     --_bu-badge-px: var(--su6);
     --_bu-badge-py: var(--su2);
-    --_bu-dropdown-bw: var(--su-static4);
+    --_bu-dropdown-bw: var(--su4);
 
     // VARIANTS
     // Base
     &:not(&__danger):not(&__featured):not(&__tonal):not(&__link):not(&__unset):not(&__facebook):not(&__github):not(&__google) { // Exclude default styles from impacting these variants
         --_bu-bg: var(--theme-button-color, var(--theme-secondary));
-        --_bu-bg-disabled: var(--black-350);
+        --_bu-bg-disabled: var(--theme-secondary-300);
         --_bu-bg-hover: var(--theme-button-hover-background-color, var(--theme-secondary-500));
         --_bu-fc: var(--white);
-        --_bu-fc-disabled: var(--black-050);
+        --_bu-fc-disabled: var(--theme-secondary-100);
         --_bu-fc-hover: var(--theme-button-hover-color, var(--white));
         --_bu-badge-bg: var(--theme-secondary-500);
         --_bu-badge-fc: var(--white);
-        --_bu-badge-bg-disabled: var(--black-250);
-        --_bu-badge-fc-disabled: var(--black-050);
+        --_bu-badge-bg-disabled: var(--theme-secondary-300);
+        --_bu-badge-fc-disabled: var(--theme-secondary-100);
+
+        .highcontrast-mode({
+            --_bu-bg-disabled: var(--theme-secondary-300);
+        });
 
         &.s-btn__clear {
             --_bu-bg: transparent;
@@ -35,11 +39,15 @@
             --_bu-fc-hover: var(--_bu-fc);
             --_bu-badge-bg: var(--theme-secondary-100);
             --_bu-badge-fc: var(--theme-secondary-500);
-            --_bu-badge-bg-disabled: var(--black-100);
-            --_bu-badge-fc-disabled: var(--black-350);
+            --_bu-badge-bg-disabled: var(--theme-secondary-100);
+            --_bu-badge-fc-disabled: var(--theme-secondary-300);
 
             .highcontrast-mode({
-                --_bu-bc: var(--theme-secondary-600);
+                --_bu-bc: var(--theme-secondary-400);
+                --_bu-bc-disabled: var(--theme-secondary-300);
+                --_bu-bg-disabled: var(--white);
+                --_bu-badge-bg-disabled: var(--theme-secondary-100);
+                --_bu-badge-fc-disabled: var(--theme-secondary-300);
             });
         }
     }
@@ -57,6 +65,25 @@
         --_bu-badge-bg-disabled: var(--red-300);
         --_bu-badge-fc-disabled: var(--black-100);
 
+        .dark-mode({
+            --_bu-bg-disabled: var(--red-300);
+            --_bu-badge-fc-disabled: var(--black-050);
+            --_bu-badge-bg-disabled: var(--red-400);
+        });
+
+        .highcontrast-mode({
+            --_bu-fc-disabled: var(--black-300);
+            --_bu-badge-bg-disabled: var(--red-100);
+            --_bu-badge-fc-disabled: var(--black-300);
+        });
+
+        .highcontrast-dark-mode({
+            --_bu-bg-disabled: var(--red-300);
+            --_bu-fc-disabled: var(--black-050);
+            --_bu-badge-fc-disabled: var(--black-050);
+            --_bu-badge-bg-disabled: var(--red-400);
+        });
+
         &.s-btn__clear {
             --_bu-bg: transparent;
             --_bu-bg-disabled: var(--_bu-bg);
@@ -71,9 +98,23 @@
             --_bu-badge-bg-disabled: var(--red-100);
             --_bu-badge-fc-disabled: var(--red-300);
 
+            .dark-mode({
+                --_bu-bg-disabled: var(--_bu-bg);
+                --_bu-fc-disabled: var(--red-300);
+                --_bu-badge-bg-disabled: var(--red-100);
+                --_bu-badge-fc-disabled: var(--red-400);
+            });
+
             .highcontrast-mode({
                 --_bu-bc: var(--red-600);
-                --_bu-bc-disabled: var(--red-300);
+                --_bu-bc-disabled: var(--black-300);
+            });
+
+            .highcontrast-dark-mode({
+                --_bu-bg-disabled: var(--black-050);
+                --_bu-fc-disabled: var(--red-300);
+                --_bu-badge-bg-disabled: var(--red-100);
+                --_bu-badge-fc-disabled: var(--red-300);
             });
         }
     }
@@ -89,6 +130,25 @@
         --_bu-badge-fc: var(--black-050);
         --_bu-badge-bg-disabled: var(--purple-300);
         --_bu-badge-fc-disabled: var(--black-100);
+
+        .dark-mode({
+            --_bu-bg-disabled: var(--purple-100);
+            --_bu-fc-disabled: var(--purple-400);
+            --_bu-badge-fc-disabled: var(--purple-400);
+            --_bu-badge-bg-disabled: var(--purple-200);
+        });
+
+        .highcontrast-mode({
+            --_bu-fc-disabled: var(--black-300);
+            --_bu-badge-fc-disabled: var(--black-300);
+            --_bu-badge-bg-disabled: var(--purple-200);
+        });
+
+        .highcontrast-dark-mode({
+            --_bu-fc-disabled: var(--purple-400);
+            --_bu-badge-bg-disabled: var(--purple-200);
+            --_bu-badge-fc-disabled: var(--purple-400);
+        });
     }
 
     &&__tonal {
@@ -102,10 +162,11 @@
         --_bu-badge-bg: var(--black-200);
         --_bu-badge-fc: var(--black-600);
         --_bu-badge-bg-disabled: var(--black-100);
-        --_bu-badge-fc-disabled: var(--black-350);
+        --_bu-badge-fc-disabled: var(--black-300);
 
         .highcontrast-mode({
-            --_bu-bc: var(--black-300);
+            --_bu-bc: var(--black-400);
+            --_bu-bc-disabled: var(--black-300);
         });
     }
 
@@ -255,14 +316,14 @@
         border: 0;
         clip-path: inset(50%);
         /* stylelint-disable-next-line property-no-deprecated -- clip is kept for older browser compatibility alongside clip-path */
-        clip: rect(var(--su-static1), var(--su-static1), var(--su-static1), var(--su-static1)); // rect(1px, 1px, 1px, 1px)
-        height: var(--su-static1);
+        clip: rect(var(--su1), var(--su1), var(--su1), var(--su1)); // rect(1px, 1px, 1px, 1px)
+        height: var(--su1);
         margin: var(--sun1);
         overflow-wrap: normal;
         overflow: hidden;
         padding: 0;
         position: absolute;
-        width: var(--su-static1);
+        width: var(--su1);
     }
 
     // Sizes
@@ -272,7 +333,7 @@
         --_bu-px: var(--su12);
         --_bu-badge-fs: var(--fs-fine);
         --_bu-badge-py: var(--su1);
-        --_bu-badge-px: calc(var(--su2) + var(--su1)); // 3px
+        --_bu-badge-px: var(--su3);
     }
     &&__xs {
         --_bu-g: var(--su4);
@@ -288,7 +349,7 @@
         --_bu-fs: var(--fs-body2);
         --_bu-px: var(--su24);
         --_bu-py: calc(var(--su12) + var(--su1)); // 13px
-        --_bu-badge-py: calc(var(--su2) + var(--su1)); // 3px
+        --_bu-badge-py: var(--su3); // 3px
     }
 
     // INTERACTION

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

@@ -74,9 +74,9 @@
     }
 
     // STATIC COMPONENT STYLES
-    border: var(--su-static1) solid var(--black-300);
+    border: var(--su1) solid var(--black-300);
     border-radius: var(--br-md);
     display: inline-flex;
     flex-wrap: wrap;
-    padding: calc(var(--su-static4) - var(--su-static1));
+    padding: var(--su3);
 }

package/lib/components/card/card.less

@@ -29,7 +29,7 @@
         margin-bottom: 0;
     }
 
-    border: var(--su-static1) solid var(--_ca-bc);
+    border: var(--su1) solid var(--_ca-bc);
 
     background-color: var(--white);
     border-radius: var(--br-md);

package/lib/components/checkbox_radio/checkbox_radio.less

@@ -8,13 +8,13 @@
     --_ch-gap: var(--su8);
 
     // inputs
-    --_ch-input-baw: var(--su-static1);
+    --_ch-input-baw: var(--su1);
     --_ch-input-bc: var(--black-350);
     --_ch-input-bg: var(--white);
     --_ch-input-bg-image: unset;
-    --_ch-input-br: var(--su-static1);
+    --_ch-input-br: var(--su1);
     --_ch-input-cursor: pointer;
-    --_ch-input-h: calc(var(--su-static12) + var(--su-static2)); // 14px
+    --_ch-input-h: calc(var(--su12) + var(--su2)); // 14px
 
     @media (forced-colors: active) { // This is for Windows High Contrast Mode
         &:checked,

package/lib/components/code-block/code-block.less

@@ -92,7 +92,7 @@
 
             border-color: var(--bc-medium);
             border-style: solid;
-            border-width: 0 var(--su-static1) 0 0;
+            border-width: 0 var(--su1) 0 0;
             color: var(--black-350);
             float: left;
             margin: var(--sun12);
@@ -104,7 +104,6 @@
 
         @scrollbar-styles();
         background-color: var(--highlight-bg);
-        border-radius: var(--br-md);
         color: var(--highlight-color);
         font-family: var(--ff-mono);
         font-size: var(--fs-body1);

package/lib/components/description/description.less

@@ -18,6 +18,7 @@
     }
 
     color: var(--_de-fc);
-    font-size: var(--fs-caption);
+    font-size: var(--fs-body1);
+    margin-bottom: 0;
     padding: 0 var(--su2); // Helps the label visually line up with inputs
 }

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;