@stackoverflow/stacks 3.0.0-beta.0 → 3.0.0-beta.11

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

@@ -23,7 +23,7 @@
     //  --_bu-py values set below to ensure btn-group height matches same-sized button height
     // See https://github.com/StackEng/StackOverflow/pull/18992#pullrequestreview-1947490680
     .s-btn {
-        --_bu-br: var(--br-sm);
+        --_bu-br: var(--br-md);
         --_bu-bc-hover: transparent;
         --_bu-px: calc(var(--su12) - var(--su1)); // 11px
         --_bu-py: calc(var(--su6) + 0.65px); // 6.65px

package/lib/components/card/card.less

@@ -32,6 +32,6 @@
     border: var(--su-static1) solid var(--_ca-bc);
 
     background-color: var(--white);
-    border-radius: var(--br-sm);
+    border-radius: var(--br-md);
     padding: var(--su12);
 }

package/lib/components/checkbox_radio/checkbox_radio.less

@@ -48,21 +48,23 @@
     // Less variables for check svg fill color
     @ch-bg-image-fill: .set-white()[default];
     @ch-bg-image-fill-dark: .set-white-dark()[default];
+    @ch-bg-image-fill-esc: escape("@{ch-bg-image-fill}"); // color escaped for URL usage
+    @ch-bg-image-fill-dark-esc: escape("@{ch-bg-image-fill-dark}"); // color escaped for URL usage
 
     // CONTEXTUAL STYLES
     .dark-mode({
         &:checked {
-            --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='@{ch-bg-image-fill-dark}'/%3E%3C/svg%3E");
+            --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='@{ch-bg-image-fill-dark-esc}'/%3E%3C/svg%3E");
         }
         &:indeterminate {
-            --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 h7 v2 h-7 z' fill='@{ch-bg-image-fill-dark}'/%3E%3C/svg%3E");
+            --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 h7 v2 h-7 z' fill='@{ch-bg-image-fill-dark-esc}'/%3E%3C/svg%3E");
         }
     });
 
     .highcontrast-dark-mode({
         &:checked, &:indeterminate {
-            --_ch-bc: var(--blue-500) !important;
-            --_ch-bg: var(--blue-400);
+            --_ch-bc: var(--black) !important;
+            --_ch-bg: var(--black);
         }
     });
 
@@ -75,16 +77,16 @@
 
     // STATES
     &:checked, &:indeterminate {
-        --_ch-bc: var(--theme-secondary-400) !important;
-        --_ch-bg: var(--theme-secondary-400);
+        --_ch-bc: var(--theme-secondary) !important;
+        --_ch-bg: var(--theme-secondary);
     }
 
     &:checked {
-        --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='@{ch-bg-image-fill}'/%3E%3C/svg%3E");
+        --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='@{ch-bg-image-fill-esc}'/%3E%3C/svg%3E");
     }
 
     &:indeterminate {
-        --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 h7 v2 h-7 z' fill='@{ch-bg-image-fill}'/%3E%3C/svg%3E");
+        --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 h7 v2 h-7 z' fill='@{ch-bg-image-fill-esc}'/%3E%3C/svg%3E");
     }
 
     background-image: var(--_ch-bg-image);
@@ -92,7 +94,7 @@
     background-position: center center;
     background-repeat: no-repeat;
     background-size: contain;
-    border-radius: var(--br-sm);
+    border-radius: var(--br-md);
 }
 
 .s-radio {
@@ -100,7 +102,7 @@
     // CONTEXTUAL STYLES
     .highcontrast-dark-mode({
         &:checked {
-            --_ch-bc: var(--blue-400);
+            --_ch-bc: var(--black);
             outline: var(--su-static1) solid var(--black);
         }
     });
@@ -108,7 +110,7 @@
     // STATES
     &:checked {
         --_ch-baw: 0.30769231em;
-        --_ch-bc: var(--theme-secondary-400);
+        --_ch-bc: var(--theme-secondary);
         --_ch-bg: var(--white);
     }
 

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

@@ -1,6 +1,6 @@
 .s-input-icon {
     --_ii-fc: unset;
-    --_ii-r: 0.7em;
+    --_ii-r: calc((var(--su-static8) + var(--su-static2))); // 10px
 
     // MODIFIERS
     .has-error & {
@@ -32,13 +32,13 @@
         --_ii-r: auto;
 
         color: var(--black-400);
-        left: 0.7em;
+        left: calc((var(--su-static8) + var(--su-static2))); // 10px
     }
 
     color: var(--_ii-fc);
     right: var(--_ii-r);
 
-    margin-top: calc((var(--su-static8) + var(--su-static1)) * -1); // -9px - Half the icon's height at 18px for centering;
+    margin-top: calc((var(--su-static8) + var(--su-static2)) * -1); // -10px - Half the icon's height at 20px for centering
     pointer-events: none;
     position: absolute;
     top: 50%;

package/lib/components/input_textarea/input_textarea.less

@@ -1,27 +1,23 @@
 .s-input,
-.s-textarea {
-    --_in-bc: var(--bc-darker);
+.s-textarea,
+//The :has selector here allows us to use these vars for sibling icons in textarea components (See .s-textarea -> ~ .s-input-icon)
+:has(> .s-textarea) { 
+    --_in-bc: var(--black-300);
     --_in-bg: var(--white);
     --_in-br: var(--br-md);
+    --_in-bw: var(--su-static1);
     --_in-c: unset;
-    --_in-fc: var(--fc-dark);
+    --_in-fc: var(--black-600);
     --_in-fs: var(--fs-body1);
-    --_in-o: unset;
-    --_in-px: 0.7em;
-    --_in-py: 0.6em;
+    --_in-lh: var(--lh-base);
+    --_in-px: calc(var(--su12) - var(--su1)); // 11px
+    --_in-py: var(--su8);
     --_in-placeholder-fc: var(--black-300);
+}
 
+.s-input,
+.s-textarea {
     // CONTEXTUAL STYLES
-    @supports (-webkit-overflow-scrolling: touch) {
-        --_in-fs: var(--su-static16); // 16px — Increase font size for mobile safari. This keeps our inputs from zooming the page while focused.
-        --_in-px: 0.55em;
-        --_in-py: 0.36em;
-
-        &::-webkit-input-placeholder {
-            line-height: normal !important;
-        }
-    }
-
     .highcontrast-mode({
         --_in-bc: var(--black);
         --_in-placeholder-fc: var(--black-400);
@@ -31,17 +27,16 @@
     fieldset[disabled] &,
     &[disabled] {
         --_in-c: not-allowed;
-        --_in-o: var(--_o-disabled-static);
     }
 
     &[readonly],
     .is-readonly & {
         .highcontrast-mode({
-            --_in-fc: var(--fc-medium);
+            --_in-fc: var(--black-500);
         });
 
         --_in-bg: var(--black-150);
-        --_in-bc: var(--bc-light);
+        --_in-bc: var(--black-200);
         --_in-c: default;
         --_in-fc: var(--black-400);
     }
@@ -55,45 +50,27 @@
 
     // Sizes
     &&__sm {
-        .size-styles(sm; in; @styles: fs);
-    }
-
-    &&__md {
-        @supports (-webkit-overflow-scrolling: touch) {
-            --_in-fs: calc(var(--su-static16) + var(--su-static1)); // 17px
-            --_in-py: 0.4em;
-        }
-
-        .size-styles(md; in; @styles: br, fs);
+        --_in-fs: var(--fs-caption);
+        --_in-lh: var(--lh-sm);
+        --_in-px: calc(var(--su12) - var(--su2)); // 10px
+        --_in-py: calc(var(--su4) + var(--su1)); // 5px
     }
 
     &&__lg {
-        .size-styles(lg; in; @styles: br, fs);
-        --_in-px: 0.6em;
-        --_in-py: 0.45em;
-    }
-
-    &&__xl {
-        .size-styles(xl; in; @styles: br, fs);
-        --_in-px: 0.5em;
-        --_in-py: 0.4em;
+        --_in-fs: var(--fs-body3);
+        --_in-lh: var(--lh-lg);
+        --_in-px: calc(var(--su12) + var(--su1)); // 13px
     }
-
+    
     // CHILD ELEMENTS
-    .webkit-autofill();
-
-    &::placeholder,
-    &::-webkit-input-placeholder {
-        color: var(--_in-placeholder-fc);
-    }
-
     &::placeholder {
+        color: var(--_in-placeholder-fc);
         opacity: 1;
     }
 
     &&__creditcard,
     &&__search {
-        --_in-pl: var(--su-static32);
+        --_in-pl: calc(var(--su-static32) + var(--su-static4)); // 36px
     }
 
     // INTERACTION
@@ -105,27 +82,48 @@
 
     @scrollbar-styles();
     background-color: var(--_in-bg);
-    border: var(--su-static1) solid var(--_in-bc);
-    border-radius: var(--_in-br);
+    border: var(--_in-bw) solid var(--_in-bc);
     color: var(--_in-fc);
     cursor: var(--_in-c);
     font-size: var(--_in-fs);
-    opacity: var(--_in-o);
+    line-height: var(--_in-lh);
     padding: var(--_in-py) var(--_in-px) var(--_in-py) var(--_in-pl, var(--_in-px));
-
-    -webkit-appearance: none; // Removes shadows we don't want in mobile Safari
+    
+    border-radius: var(--br-md);
     font-family: inherit;
     margin: 0; // A guard against Core's default margins
     width: 100%;
 }
 
+//Nested inputs (E.g. Tag selection control) need a flex layout.
+.s-input:has(> input.s-input) {
+    display: flex;
+    align-items: center;
+    input.s-input {
+         flex: 1 1 0;
+    }
+}
+
 .s-input {
     .input-states({
         padding-right: var(--su32);
     });
 
-    &&__md {
-        --_in-py: 0.5em;
+    // Nested Inputs
+    & & {
+        --_in-bg: transparent;
+        --_in-bw: 0;
+        --_in-px: 0;
+
+        box-shadow: none;
+        margin: calc(var(--_in-py) * -1) 0;
+    }
+
+    &:has(&) {
+        --_in-px: var(--_in-py);
+
+        flex-wrap: wrap;
+        gap: var(--su8);
     }
 }
 
@@ -134,12 +132,26 @@
         padding-right: var(--su48);
     });
 
-    &&__md {
-        --_in-py: 0.72em;
+    --_in-py: var(--su8);
+    --_te-hmn: calc(var(--su32) + var(--su4)); // 36px
+    --_te-h: calc(var(--su64) + var(--su6)); // 70px
+
+    &&__sm {
+        --_te-hmn: calc(var(--su32) - var(--su4)); // 28px
+        --_te-h: calc(var(--su48) + var(--su6)); // 54px
     }
 
+    &&__lg {
+        --_te-hmn: calc(var(--su48) - var(--su4)); // 44px
+        --_te-h: calc(var(--su64) + var(--su32)); // 96px
+    }
+
+    min-height: var(--_te-hmn);
+    height: var(--_te-h); //set initial height
+
     ~ .s-input-icon {
-        right: 1.5em;
-        top: 1.5em;
+        right: var(--_in-px);
+        top: var(--_in-py);
+        margin-top: 0;
     }
 }

package/lib/components/link/link.less

@@ -26,7 +26,7 @@ a {
 
 a,
 .s-link {
-    --_li-fc: var(--theme-link-color, var(--theme-secondary-400));
+    --_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));

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

@@ -66,8 +66,8 @@
         background: var(--_lp-footer-bg);
         flex-direction: var(--_lp-footer-fd);
 
-        border-bottom-left-radius: var(--br-sm);
-        border-bottom-right-radius: var(--br-sm);
+        border-bottom-left-radius: var(--br-md);
+        border-bottom-right-radius: var(--br-md);
         border-top: var(--su-static1) solid var(--bc-medium);
         display: flex;
         font-size: var(--fs-caption);
@@ -78,8 +78,8 @@
     & &--header {
         background: var(--_lp-header-bg);
         border-bottom: var(--su-static1) solid var(--bc-medium);
-        border-top-left-radius: var(--br-sm);
-        border-top-right-radius: var(--br-sm);
+        border-top-left-radius: var(--br-md);
+        border-top-right-radius: var(--br-md);
         display: flex;
         padding: var(--su12) var(--su8);
     }
@@ -129,7 +129,7 @@
             color: var(--theme-link-color, var(--purple-500));
         }
 
-        color: var(--theme-link-color, var(--theme-secondary-400));
+        color: var(--theme-link-color, var(--theme-secondary));
         cursor: pointer;
         text-decoration: none;
     }
@@ -142,7 +142,7 @@
     }
 
     border: var(--su-static1) solid var(--bc-medium);
-    border-radius: var(--br-sm);
+    border-radius: var(--br-md);
     box-shadow: var(--bs-sm);
     text-align: left;
 }

package/lib/components/menu/menu.less

@@ -1,39 +1,118 @@
 .s-menu {
-    --_me-divider-bg: var(--bc-light);
-    --_me-label-btc: var(--bc-light);
-    --_me-label-cursor: pointer;
-
-    // CONTEXTUAL STYLES
-    .dark-mode({
-        --_me-divider-bg: var(--bc-light);
-        --_me-label-btc: var(--bc-light);
-    });
+    --_me-action-bg: unset;
+    --_me-action-fc: var(--black-500);
+    --_me-item-p: var(--su8);
+    --_me-after-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m14 3.88-.44.44-7.34 7.35-.44.44-.44-.44-2.9-2.9L2 8.34l.89-.88.44.44 2.45 2.45 6.9-6.9.44-.44z'/%3E%3C/svg%3E"); // check16
 
     // CHILD ELEMENTS
     & &--divider {
-        background-color: var(--_me-divider-bg);
+        background-color: var(--black-200);
         height: var(--su-static1);
         margin: var(--su8) 0;
     }
 
-    & &--label {
-        &.is-disabled {
-            --_me-label-cursor: not-allowed;
+    & &--icon {
+        color: inherit;
+        margin-right: var(--su8);
+    }
+
+    & &--item {
+        &:has(> .s-menu--action){
+            --_me-item-p: 0;
+        }
+
+        &.s-check-control {
+            --_me-item-p: var(--su6) var(--su8);
+
+            .s-radio,
+            .s-checkbox {
+                margin-top: var(--su4);
+            }
+
+            align-items: flex-start;
+        }
+
+        &:not(.s-check-control) {
+            .s-radio,
+            .s-checkbox {
+                height: 0;
+                pointer-events: none;
+                position: absolute;
+                opacity: 0;
+                width: 0;
+            }
+        }
+
+        color: var(--_me-action-fc);
+        padding: var(--_me-item-p);
+
+        align-items: center;
+        display: flex;
+        width: 100%;
+    }
+
+    & &--action {
+        &:focus-visible,
+        &:has(> input:focus-visible) {
+            .focus-styles(true, false);
+        }
+        
+        &:focus-visible,
+        &:has(> input:focus-visible),
+        &:hover {
+            --_me-action-bg: var(--black-150);
+            --_me-action-fc: var(--black-600);
+        }
+
+        &__danger {
+            --_me-action-fc: var(--red-400);
+
+            &:focus-visible,
+            &:hover {
+                --_me-action-fc: var(--red-500);
+            }
         }
 
-        border-top: var(--su-static1) solid var(--_me-label-btc);
-        cursor: var(--_me-label-cursor);
-        padding: var(--su12);
+        &.is-selected,
+        &:has(input:checked) {
+            &:after {
+                background-color: var(--_me-action-fc);
+                content: "";
+                height: var(--su16);
+                margin-left: auto;
+                width: var(--su16);
+                mask-image: var(--_me-after-mask);
+                mask-size: contain;
+                mask-repeat: no-repeat;
+            }
+
+        }
+
+        background-color: var(--_me-action-bg);
+        color: var(--_me-action-fc);
+
+        align-items: center;
+        border-radius: var(--br-md);
+        cursor: pointer;
+        display: flex;
+        padding: var(--su8);
+        width: 100%;
+    }
+
+    & button&--action { // Normalize for when applying to a button
+        border: none;
+        font-family: inherit;
+        line-height: inherit;
+        text-align: left;
     }
 
     & &--title {
-        color: var(--black-500);
-        font-size: var(--fs-fine);
-        padding: var(--su8) var(--su12);
-        text-transform: uppercase;
+        color: var(--black-600);
+        font-weight: 700;
+        padding: var(--su6) var(--su8);
     }
 
-    & li + &--title {
+    & &--item + &--title {
         margin-top: var(--su12);
     }
 

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,19 +59,20 @@
             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-lg);
+        border-radius: var(--br-md);
         box-shadow: var(--bs-lg);
         max-height: 100%;
         max-width: 600px;
@@ -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;