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

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

@@ -17,7 +17,7 @@
     // CHILD ELEMENTS
     form {
         display: flex;
-        margin-right: calc(var(--su-static1) * -1); // -1px
+        margin-right: var(--sun1);
     }
 
     //  --_bu-py values set below to ensure btn-group height matches same-sized button height
@@ -69,6 +69,7 @@
             flex-direction: column;
         }
 
+        font-weight: 400;
         white-space: nowrap; // When the buttons wrap, they get super tall and mess up the whole layout
     }
 

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/code-block/code-block.fixtures.ts

@@ -55,9 +55,9 @@ const cssFixture = `
 
 const htmlFixture = `
 <form class="d-flex gy4 fd-column">
-    <label class="flex--item s-label" for="question-title">Question title</label>
+    <label class="s-label" for="question-title">Question title</label>
     <div class="d-flex ps-relative">
-        <input class="flex--item s-input" type="text" id="question-title" placeholder="e.g. Why doesn’t Stack Overflow use a custom web font?"/>
+        <input class="s-input" type="text" id="question-title" placeholder="e.g. Why doesn’t Stack Overflow use a custom web font?"/>
     </div>
 </form>
 `;

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

@@ -95,7 +95,7 @@
             border-width: 0 var(--su-static1) 0 0;
             color: var(--black-350);
             float: left;
-            margin: calc(var(--su12) * -1);
+            margin: var(--sun12);
             margin-right: var(--su12);
             padding: var(--su12);
             padding-right: var(--su6);

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-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(--sun8) + var(--sun2)); // -10px - Half the icon's height at 20px for centering
     pointer-events: none;
     position: absolute;
     top: 50%;