@stackoverflow/stacks 3.0.0-beta.13 → 3.0.0-beta.15

package/lib/base/body.less

@@ -20,7 +20,7 @@ html,
 body {
     color: var(--theme-body-font-color, var(--black-600));
     font-family: var(--theme-body-font-family);
-    font-size: var(--fs-base);
+    font-size: var(--fs-body1);
     line-height: var(--lh-base);
 }
 

package/lib/components/checkbox_radio/checkbox_radio.less

@@ -1,161 +1,243 @@
 .s-checkbox,
 .s-radio {
-    --_ch-baw: var(--su-static1);
-    --_ch-bc: var(--bc-dark);
-    --_ch-bg: var(--white);
-    --_ch-bg-image: unset;
+    --_ch-ai: center;
+    --_ch-fc: unset;
+    --_ch-after-fc: unset;
+    --_ch-cursor: pointer;
+    --_ch-label-fc: var(--_ch-fc);
+    --_ch-gap: var(--su8);
+
+    // inputs
+    --_ch-input-baw: var(--su-static1);
+    --_ch-input-bc: var(--black-350);
+    --_ch-input-bg: var(--white);
+    --_ch-input-bg-image: unset;
+    --_ch-input-br: var(--su-static1);
+    --_ch-input-cursor: pointer;
+    --_ch-input-h: calc(var(--su-static12) + var(--su-static2)); // 14px
+
+    @media (forced-colors: active) { // This is for Windows High Contrast Mode
+        &:checked,
+        &:indeterminate {
+            --_ch-input-bg: ButtonText !important;
+        }
+    }
 
-    // CONTEXTUAL STYLES
     fieldset[disabled] &,
-    &[disabled] {
-        cursor: not-allowed;
-        opacity: var(--_o-disabled-static);
+    &:has(> input[disabled]) {
+        --_ch-fc: var(--black-300);
+        --_ch-input-bc: var(--black-300);
+        --_ch-input-cursor: not-allowed;
     }
 
-    .s-check-control & {
-        &[disabled] + .s-label {
-            &:extend(.is-disabled .s-label);
-        }
+    &:has(> input[disabled]:checked) {
+        --_ch-input-bc: var(--theme-secondary-300);
     }
 
-    .s-check-group & {
-        margin-top: calc(var(--su2) + var(--su1)); // 3px
-    }
+    // MODIFIERS
+    &&__checkmark {
+        --_ch-fc: var(--theme-secondary);
+        --_ch-gap: var(--su4);
+        --_ch-after-fc: unset;      
+
+        // CONTEXTUAL STYLES
+        &:has(> input:focus-visible) {
+            .focus-styles(true, false);
+        }
 
-    input& {
-        flex-shrink: 0;
-    }
+        &:has(> input:checked) {
+            --_ch-after-fc: var(--_ch-fc);
+        }
 
-    // INTERACTION
-    &:focus {
-        .focus-styles();
-    }
+        &:has(> input[disabled]) {
+            --_ch-cursor: not-allowed;
+        }
 
-    background-color: var(--_ch-bg);
-    border: var(--_ch-baw) solid var(--_ch-bc);
-
-    appearance: none;
-    cursor: pointer;
-    font-size: inherit;
-    height: 1em;
-    margin: 0; // A guard against Core's default margins
-    outline: 0;
-    vertical-align: middle;
-    width: 1em;
-}
+        &:has(> input:checked[disabled]) {
+            --_ch-fc: var(--theme-secondary-300);
+        }
 
-.s-checkbox {
-    // 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
+        // CHILD ELEMENTS
+        input,
+        &:after {
+            height: var(--su16);
+            margin-left: 100%;
+            width: var(--su16);
+        }
 
-    // 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-esc}'/%3E%3C/svg%3E");
+        &:after {
+            background-color: var(--_ch-after-fc);
+            content: "";
+            flex-shrink: 0;
+            margin-left: auto;
+            mask-image: 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
+            mask-size: contain;
+            mask-repeat: no-repeat;
         }
-        &: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-esc}'/%3E%3C/svg%3E");
+
+        input {
+            appearance: none;
+            opacity: 0;
+            position: absolute;
+            right: 0;
+            z-index: -1;
         }
-    });
 
-    .highcontrast-dark-mode({
-        &:checked, &:indeterminate {
-            --_ch-bc: var(--black) !important;
-            --_ch-bg: var(--black);
+        .s-description {
+            margin: var(--su2) 0 0;
+            padding: 0;
         }
-    });
 
-    @media (forced-colors: active) {
-        &:checked,
-        &:indeterminate {
-            --_ch-bg: ButtonText !important;
+        .s-label {
+            flex-grow: 1;
         }
-    }
 
-    // STATES
-    &:checked, &:indeterminate {
-        --_ch-bc: var(--theme-secondary) !important;
-        --_ch-bg: var(--theme-secondary);
-    }
+        border-radius: var(--br-md);
+        color: var(--_ch-fc);
+        cursor: var(--_ch-cursor);
 
-    &: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-esc}'/%3E%3C/svg%3E");
+        width: 100%;
     }
 
-    &: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-esc}'/%3E%3C/svg%3E");
+    // CHILD ELEMENTS
+    &:has(> input[disabled]) {
+        .s-label {
+            --_ch-label-fc: var(--black-300);
+        }
     }
 
-    background-image: var(--_ch-bg-image);
+    &:not(> input[disabled]) {
+        &:has(input:checked),
+        &:has(input:indeterminate) {
+            .s-label {
+                --_ch-label-fc: var(--black-600);
+            }
+        }
+    }
 
-    background-position: center center;
-    background-repeat: no-repeat;
-    background-size: contain;
-    border-radius: var(--br-md);
-}
+    &:has(> .s-label .s-description),
+    &:has(> .s-label .s-input-message) {
+        --_ch-ai: flex-start;
 
-.s-radio {
-
-    // CONTEXTUAL STYLES
-    .highcontrast-dark-mode({
-        &:checked {
-            --_ch-bc: var(--black);
-            outline: var(--su-static1) solid var(--black);
+        input {
+            margin-top: var(--su2);
         }
-    });
-
-    // STATES
-    &:checked {
-        --_ch-baw: 0.30769231em;
-        --_ch-bc: var(--theme-secondary);
-        --_ch-bg: var(--white);
     }
 
-    border-radius: var(--br-circle);
-}
+    // Validation states
+    &:has(> input:not(:checked)) {
+        &.has-error {
+            --_ch-input-bc: var(--red-400);
+        }
+        &.has-success {
+            --_ch-input-bc: var(--green-400);
+        }
+        &.has-warning {
+            --_ch-input-bc: var(--yellow-400);
+        }
+    }
 
-.s-checkbox,
-.s-radio:not(:checked) {
-    .validation-states(ch);
-}
+    input {
+        &:focus-visible {
+            .focus-styles();
+        }
 
-.s-check-control { // TODO would _love_ to use .s-check instead, with no class on the input itself
-    --_cc-ai: center;
+        &:not(:checked) {
+            .validation-states(ch-input);
+        }
 
-    // CONTEXTUAL STYLES
-    .s-check-group & {
-        --_cc-ai: flex-start; // manually align the checkboxes and radios to the top of the group
+        appearance: none;
+        background-color: var(--_ch-input-bg);
+        border: var(--_ch-input-baw) solid var(--_ch-input-bc);
+        border-radius: var(--_ch-input-br);
+        cursor: var(--_ch-input-cursor);
+        height: var(--_ch-input-h);
+        
+        aspect-ratio: 1 / 1;
+        flex-shrink: 0;
+        font-size: inherit;
+        margin: 0; // A guard against Core's default margins
+        outline: 0;
+        vertical-align: middle;
     }
 
-    // CHILD ELEMENTS
+
     .s-label {
+        color: var(--_ch-label-fc);
+        font-size: var(--fs-body1);
         font-weight: normal;
     }
 
-    align-items: var(--_cc-ai);
+    align-items: var(--_ch-ai);
     display: flex;
-    gap: var(--su8);
+    gap: var(--_ch-gap);
 }
 
-.s-check-group {
-    --_cg-fd: column;
+.s-checkbox{
+    // 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
 
-    // MODIFIERS
-    &&__horizontal {
-        --_cg-fd: row;
-    }
+    // CONTEXTUAL STYLES
+    .dark-mode({
+        input {
+            &:checked {
+                --_ch-input-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-input-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");
+            }
+        }
+    });
 
     // CHILD ELEMENTS
-    // TODO HACK? <legend> isn't respecting gap...
-    legend.s-label {
-        margin-bottom: var(--su8);
-    }
+    input {
+        fieldset[disabled] &,
+        &[disabled] {
+            &:checked, &:indeterminate {
+                --_ch-input-bc: var(--theme-secondary-300);
+                --_ch-input-bg: var(--theme-secondary-300);
+            }
+        }
 
-    flex-direction: var(--_cg-fd);
+        &:checked, &:indeterminate {
+            --_ch-input-bc: var(--theme-secondary);
+            --_ch-input-bg: var(--theme-secondary);
+        }
 
-    display: flex;
-    gap: var(--su8);
+        &:checked {
+            --_ch-input-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-input-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-input-bg-image);
+
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: contain;
+    }
 }
+
+.s-radio {
+    input {
+        fieldset[disabled] &,
+        &[disabled] {
+            &:checked {
+                --_ch-input-bc: var(--theme-secondary-300);
+            }
+        }
+
+        --_ch-input-br: var(--br-circle);
+
+        &:checked {
+            --_ch-input-baw: calc(var(--_ch-input-h) / 3); // 14px / 3 = ~4.67px
+            --_ch-input-bc: var(--theme-secondary);
+            --_ch-input-bg: var(--white);
+        }
+    }
+}

package/lib/components/description/description.less

@@ -1,9 +1,23 @@
 .s-description {
+    --_de-fc: var(--black-400);
+
     .is-disabled & {
         opacity: var(--_o-disabled-static);
     }
 
-    color: var(--fc-light);
+    .has-error & {
+        --_de-fc: var(--red-400);
+    }
+
+    .has-success & {
+        --_de-fc: var(--green-400);
+    }
+
+    .has-warning & {
+        --_de-fc: var(--yellow-400);
+    }
+
+    color: var(--_de-fc);
     font-size: var(--fs-caption);
     padding: 0 var(--su2); // Helps the label visually line up with inputs
 }

package/lib/components/empty-state/empty-state.less

@@ -1,15 +1,26 @@
 .s-empty-state {
     // CHILD ELEMENTS
     p {
-        strong {
-            color: var(--fc-dark);
-        }
+        color: var(--black-400);
+        margin-bottom: var(--su32);
+    }
+
+    &--title {
+        font-weight: 600;
+        font-size: var(--fs-body3);
+        margin-bottom: var(--su8);
+        color: var(--black-400);
+    }
+
+    .svg-spot {
+        margin-bottom: var(--su24);
+    }
 
-        font-size: var(--fs-body1);
-        margin-bottom: var(--su12);
+    // Remove margin from <p> if there are no buttons
+    &:last-child {
+        margin-bottom: 0;
     }
 
-    color: var(--fc-light);
     text-align: center;
     margin-left: auto;
     margin-right: auto;

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

@@ -0,0 +1,25 @@
+.s-form-group {
+    --_fg-fd: column;
+    --_fg-gap: var(--su8);
+
+    // CONTEXTUAL STYLES
+    &.s-menu {
+        --_fg-gap: 0;
+    }
+
+    // MODIFIERS
+    &&__horizontal {
+        --_fg-fd: row;
+    }
+
+    // CHILD ELEMENTS
+    legend.s-label {
+        margin-bottom: var(--su8);
+    }
+    
+
+    flex-direction: var(--_fg-fd);
+
+    display: flex;
+    gap: var(--_fg-gap);
+}

package/lib/components/input_textarea/input_textarea.less

@@ -2,13 +2,17 @@
 .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-d: unset;
     --_in-fc: var(--black-600);
     --_in-fs: var(--fs-body1);
+    --_in-fw: unset;
+    --_in-g: unset;
     --_in-lh: var(--lh-base);
     --_in-px: calc(var(--su12) - var(--su1)); // 11px
     --_in-py: var(--su8);
@@ -81,11 +85,15 @@
     }
 
     @scrollbar-styles();
+    align-items: var(--_in-ai);
     background-color: var(--_in-bg);
     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);
+    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));
     
@@ -95,15 +103,6 @@
     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);
@@ -116,14 +115,16 @@
         --_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);
-
-        flex-wrap: wrap;
-        gap: var(--su8);
+        --_in-g: var(--su8);
     }
 }
 

package/lib/components/menu/menu.less

@@ -2,7 +2,6 @@
     --_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 {
@@ -21,20 +20,19 @@
             --_me-item-p: 0;
         }
 
-        &.s-check-control {
+        &.s-checkbox,
+        &.s-radio {
             --_me-item-p: var(--su6) var(--su8);
 
-            .s-radio,
-            .s-checkbox {
+            input {
                 margin-top: var(--su4);
             }
 
             align-items: flex-start;
         }
 
-        &:not(.s-check-control) {
-            .s-radio,
-            .s-checkbox {
+        &:not(.s-checkbox):not(.s-radio) {
+            input {
                 height: 0;
                 pointer-events: none;
                 position: absolute;
@@ -73,21 +71,6 @@
             }
         }
 
-        &.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);