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

package/lib/components/input_textarea/input_textarea.less

@@ -1,27 +1,27 @@
 .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-ai: unset;
+    --_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-d: unset;
+    --_in-fc: var(--black-600);
     --_in-fs: var(--fs-body1);
-    --_in-o: unset;
-    --_in-px: 0.7em;
-    --_in-py: 0.6em;
+    --_in-fw: unset;
+    --_in-g: unset;
+    --_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 +31,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 +54,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
@@ -104,16 +85,19 @@
     }
 
     @scrollbar-styles();
+    align-items: var(--_in-ai);
     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);
+    display: var(--_in-d);
+    flex-wrap: var(--_in-fw);
     font-size: var(--_in-fs);
-    opacity: var(--_in-o);
+    gap: var(--_in-g);
+    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%;
@@ -124,8 +108,23 @@
         padding-right: var(--su32);
     });
 
-    &&__md {
-        --_in-py: 0.5em;
+    // Nested Inputs
+    & & {
+        --_in-bg: transparent;
+        --_in-bw: 0;
+        --_in-px: 0;
+
+        box-shadow: none;
+        flex: 1 1 0;
+        margin: calc(var(--_in-py) * -1) 0;
+    }
+
+    &:has(&) {
+        --_in-ai: center;
+        --_in-d: flex;
+        --_in-fw: nowrap;
+        --_in-px: var(--_in-py);
+        --_in-g: var(--su8);
     }
 }
 
@@ -134,12 +133,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/menu/menu.less

@@ -1,39 +1,101 @@
 .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);
 
     // 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;
         }
 
-        border-top: var(--su-static1) solid var(--_me-label-btc);
-        cursor: var(--_me-label-cursor);
-        padding: var(--su12);
+        &.s-checkbox,
+        &.s-radio {
+            --_me-item-p: var(--su6) var(--su8);
+
+            input {
+                margin-top: var(--su4);
+            }
+
+            align-items: flex-start;
+        }
+
+        &:not(.s-checkbox):not(.s-radio) {
+            input {
+                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);
+            }
+        }
+
+        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,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

@@ -4,18 +4,20 @@
     --_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(--su-static2);
     --_na-item-text-ta: center;
-    --_na-title-mt: var(--su16);
+    --_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");
+    --_na-after-bg-color: var(--black-400);
 
     // CONTEXTUAL STYLES
     .highcontrast-mode({
@@ -33,7 +35,7 @@
 
     &&__sm {
         --_na-item-fs: var(--fs-caption);
-        --_na-item-p: var(--su4) var(--su12);
+        --_na-item-p: var(--su6) var(--su4);
     }
 
     &&__vertical {
@@ -42,19 +44,20 @@
         --_na-p: 0;
         --_na-item-text-ta: unset;
         --_na-item-ws: normal;
-    }
+        --_na-item-selected-h: 0;
+        --_na-item-p: var(--su6) var(--su8);
+        & .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 +68,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 +88,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,7 +121,7 @@
 
         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;
@@ -136,12 +149,24 @@
             --_na-title-mt: 0;
         }
 
-        margin-top: var(--_na-title-mt);
+        & .s-btn {
+            color: var(--black-400);
+        }
 
+        margin-top: var(--_na-title-mt);
         font-size: var(--fs-fine);
-        font-weight: bold;
-        padding: var(--su6) var(--su12);
-        text-transform: uppercase;
+        color: var(--black-400);
+        padding: calc(var(--su16) + var(--su2)) var(--su8);
+    }
+
+    & &--icon {
+        color: inherit;
+        margin-right: var(--su4);
+    }
+
+    & &--avatar {
+        margin-right: var(--su8);
+        background: transparent;
     }
 
     flex-direction: var(--_na-fd);