@stackoverflow/stacks 1.9.4 → 1.10.0

package/lib/components/button/button.less

@@ -2,9 +2,8 @@
     // BASE COMPONENT-SPECIFIC CUSTOM PROPERTIES
     --_bu-baw: var(--su-static1);
     --_bu-bc: transparent;
-    --_bu-bg: transparent;
-    --_bu-br: var(--br-sm);
-    --_bu-bs: none;
+    // --_bu-bg: inherit; // [1]
+    --_bu-br: var(--br-md);
     --_bu-fc: var(--theme-button-color);
     --_bu-focus-ring: 0 0 0 var(--su-static4) var(--focus-ring);
     --_bu-fs: var(--fs-body1);
@@ -18,14 +17,13 @@
     --_bu-fc-hover: var(--theme-button-hover-color);
     --_bu-fc-selected: var(--theme-button-selected-color);
     // Filled
-    --_bu-filled-bc: var(--theme-button-filled-border-color);
-    --_bu-filled-bc-active: var(--theme-button-filled-active-border-color);
+    --_bu-filled-bc: transparent;
+    --_bu-filled-bc-active: transparent;
     --_bu-filled-bg-hover: var(--theme-button-filled-hover-background-color);
-    --_bu-filled-bc-selected: var(--theme-button-filled-selected-border-color);
+    --_bu-filled-bc-selected: transparent;
     --_bu-filled-bg: var(--theme-button-filled-background-color);
     --_bu-filled-bg-active: var(--theme-button-filled-active-background-color);
     --_bu-filled-bg-selected: var(--theme-button-filled-selected-background-color);
-    --_bu-filled-bs: inset 0 var(--su-static1) 0 0 hsla(0, 0, 100%, 0.7);
     --_bu-filled-fc: var(--theme-button-filled-color);
     --_bu-filled-fc-active: var(--theme-button-filled-hover-color); // Note: hover color used here intentionally
     --_bu-filled-fc-hover: var(--theme-button-filled-hover-color);
@@ -43,11 +41,6 @@
     --_bu-number-fc-selected: var(--_bu-number-fc);
 
     // CONTEXTUAL STYLES
-    .dark-mode({
-        --_bu-bs: none;
-        --_bu-filled-bs: var(--_bu-bs);
-    });
-
     .highcontrast-mode({
         --_bu-bc: currentColor;
         --_bu-filled-bc: var(--_bu-bc);
@@ -65,8 +58,6 @@
     fieldset[disabled] &,
     &[disabled],
     &[aria-disabled="true"] {
-        --_bu-bs: none !important;
-        --_bu-filled-bs: var(--_bu-bs);
         opacity: var(--_o-disabled-static);
         pointer-events: none;
         text-decoration: none;
@@ -75,7 +66,7 @@
     button &,
     button[type="submit"] &,
     button[type="reset"] & {
-        -webkit-appearance: button; // [1]
+        -webkit-appearance: button; // [2]
     }
 
     &.grid {
@@ -84,8 +75,8 @@
 
     &.is-loading {
         .svg-icon:first-child {
-            margin-left: -23px;
-            opacity: 0; // [2]
+            margin-left: calc((var(--su-static24) - var(--su-static1)) * -1); // -23px
+            opacity: 0; // [3]
         }
 
         padding-left: 2.2em;
@@ -122,22 +113,16 @@
         }
     }
 
-    &.is-selected:not(:focus),
-    .s-btn-group.s-btn-group--radio &--radio:checked:not(:focus) + & {
-        box-shadow: none;
-    }
-
     // MODIFIERS
     &&__filled {
         border-color: var(--_bu-filled-bc);
         background-color: var(--_bu-filled-bg);
-        box-shadow: var(--_bu-filled-bs);
         color: var(--_bu-filled-fc);
     }
 
     &&__outlined {
         border-color: var(--_bu-outlined-bc);
-        background-color: var(--_bu-outlined-bg);
+        background-color: var(--_bu-outlined-bg, inherit);
     }
 
     // Resets
@@ -152,8 +137,6 @@
     &&__link {
         --_bu-baw: 0;
         --_bu-br: 0;
-        --_bu-bs: none;
-        --_bu-filled-bs: var(--_bu-bs);
         --_bu-focus-ring: none;
         --_bu-p: 0;
 
@@ -185,8 +168,6 @@
             --_bu-baw: 0;
             --_bu-bg: none;
             --_bu-br: 0;
-            --_bu-bs: none;
-            --_bu-filled-bs: var(--_bu-bs);
             --_bu-fc: unset;
             --_bu-focus-ring: none;
             --_bu-p: 0;
@@ -220,8 +201,8 @@
     &&__icon {
         .svg-icon {
             vertical-align: baseline;
-            margin-top: -0.3em; // [3]
-            margin-bottom: -0.3em; // [3]
+            margin-top: -0.3em; // [4]
+            margin-bottom: -0.3em; // [4]
             transition: opacity 200ms var(--te-smooth); // Animate the transition to .is-loading
         }
     }
@@ -265,7 +246,6 @@
         --_bu-filled-bg-active: var(--red-700);
         --_bu-filled-bg-hover: var(--red-600);
         --_bu-filled-bg-selected: var(--red-800);
-        --_bu-filled-bs: inset 0 var(--su-static1) 0 0 hsla(0, 0%, 100%, 0.4);
         --_bu-filled-fc: var(--white);
         --_bu-filled-fc-active: var(--_bu-filled-fc);
         --_bu-filled-fc-hover: var(--_bu-filled-fc);
@@ -297,29 +277,32 @@
         --_bu-bg-active: var(--black-050);
         --_bu-bg-hover: var(--black-025);
         --_bu-bg-selected: var(--black-075);
-        --_bu-fc: var(--black-500);
+        --_bu-fc: var(--black-700);
         --_bu-fc-active: var(--_bu-fc);
-        --_bu-fc-hover: var(--black-600);
+        --_bu-fc-hover: var(--black-700);
         --_bu-fc-selected: var(--black-700);
         --_bu-focus-ring: 0 0 0 var(--su-static4) var(--focus-ring-muted);
+        // The filled modifier on the muted button is deprecated and is to be
+        // removed in Stacks Classic v2
         --_bu-filled-bc: transparent;
         --_bu-filled-bc-selected: var(--_bu-filled-bc);
         --_bu-filled-bg: var(--black-100);
         --_bu-filled-bg-active: var(--black-200);
         --_bu-filled-bg-hover: var(--black-150);
         --_bu-filled-bg-selected: var(--black-350);
-        --_bu-filled-bs: inset 0 var(--su-static1) 0 0 hsla(0, 0%, 100%, 0.4);
         --_bu-filled-fc: var(--black-700);
         --_bu-filled-fc-active: var(--_bu-filled-fc);
         --_bu-filled-fc-hover: var(--_bu-filled-fc);
         --_bu-filled-fc-selected: var(--black-800);
-        --_bu-outlined-bc: var(--black-300);
-        --_bu-outlined-bc-selected: var(--black-400);
+        --_bu-outlined-bc: var(--black-200);
+        --_bu-outlined-bc-selected: var(--black-200);
         --_bu-outlined-bg-selected: var(--_bu-bg-selected);
         --_bu-outlined-fc-selected: var(--_bu-fc-selected);
 
         .highcontrast-mode({
             --_bu-bg-hover: var(--black-100);
+            // The filled modifier on the muted button is deprecated and is to be
+            // removed in Stacks Classic v2
             --_bu-filled-bg: var(--black-400);
             --_bu-filled-bg-active: var(--black-600);
             --_bu-filled-bg-hover: var(--black-500);
@@ -338,7 +321,6 @@
         --_bu-bg-active: var(--theme-button-primary-active-background-color);
         --_bu-bg-hover: var(--theme-button-primary-hover-background-color);
         --_bu-bg-selected: var(--theme-button-primary-selected-background-color);
-        --_bu-bs: inset 0 1px 0 0 hsla(0, 0%, 100%, 0.4);
         --_bu-fc: var(--theme-button-primary-color);
         --_bu-fc-active: var(--theme-button-primary-hover-color);
         --_bu-fc-hover: var(--theme-button-primary-hover-color);
@@ -430,14 +412,14 @@
     &--radio { // This lives alongside a .s-btn element. These styles are the equivelent of `.v-visible-sr`
         border: 0;
         clip-path: inset(50%);
-        clip: rect(1px, 1px, 1px, 1px);
-        height: 1px;
-        margin: -1px;
+        clip: rect(var(--su-static1), var(--su-static1), var(--su-static1), var(--su-static1)); // rect(1px, 1px, 1px, 1px)
+        height: var(--su-static1);
+        margin: calc(var(--su-static1) * -1); // -1px
         overflow-wrap: normal;
         overflow: hidden;
         padding: 0;
         position: absolute;
-        width: 1px;
+        width: var(--su-static1);
     }
 
     // INTERACTION
@@ -479,10 +461,10 @@
         outline: none;
     }
 
-    background-color: var(--_bu-bg);
+    background-color: var(--_bu-bg, inherit); // [1]
     border: var(--_bu-baw) solid var(--_bu-bc);
     border-radius: var(--_bu-br);
-    box-shadow: var(--_bu-bs);
+    box-shadow: none;
     color: var(--_bu-fc);
     font-size: var(--_bu-fs);
     padding: var(--_bu-p);
@@ -499,11 +481,14 @@
     user-select: none;
 }
 
-//  [1] Guard against the difference in configurable resets
+//  [1] Passing `inherit` as a custom property value has no effect, instead we
+//      provide it as a fallback value for when --_bu-bg is not defined
+//      For more info, see https://stackoverflow.com/a/53239881/652353
+//  [2] Guard against the difference in configurable resets
 //      Eric Meyer's reset does not include this, while normalize.css does
 //      Correct the inability to style buttons in iOS and Safari.
-//  [2] If the first thing in the button is an icon, let's hide it on loading
+//  [3] If the first thing in the button is an icon, let's hide it on loading
 //      We only want to modify the visibility, since we still want it to have shape and keep the same layout.
-//  [3] Most svg icons are 18px tall, but the button's line-height is 1 (13px).
+//  [4] Most svg icons are 18px tall, but the button's line-height is 1 (13px).
 //      This means we need to off set the margin y-axis so we don't add
 //      additional height to the button.

package/lib/components/card/card.visual.test.ts

@@ -3,12 +3,13 @@ import { defaultOptions, runComponentTests } from "../../test/test-utils";
 import "../../index";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const cardTemplate = ({ component, testid }: any) => html`<div
-    class="d-inline-flex ai-center jc-center hs2 ws3 p8"
-    data-testid="${testid}"
->
-    ${component}
-</div>`;
+const cardTemplate = ({ component, testid }: any) =>
+    html`<div
+        class="d-inline-flex ai-center jc-center hs2 ws3 p8"
+        data-testid="${testid}"
+    >
+        ${component}
+    </div>`;
 
 const baseChild = `
     <h2 class="fs-body3 lh-sm fc-dark">Base card title</h2>

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

@@ -13,12 +13,12 @@
 
     &.order-first {
         --_if-blw: var(--su-static1);
-        --_if-blr: var(--br-sm);
+        --_if-blr: var(--br-md);
     }
 
     &.order-last {
         --_if-brw: var(--su-static1);
-        --_if-brr: var(--br-sm);
+        --_if-brr: var(--br-md);
     }
 
     background-color: var(--_if-bg);

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

@@ -38,7 +38,7 @@
     color: var(--_ii-fc);
     right: var(--_ii-r);
 
-    margin-top: -9px; // Half the icon's height at 18px for centering;
+    margin-top: calc((var(--su-static8) + var(--su-static1)) * -1); // -9px - Half the icon's height at 18px for centering;
     pointer-events: none;
     position: absolute;
     top: 50%;

package/lib/components/input_textarea/input_textarea.less

@@ -3,7 +3,7 @@
     --_in-bc: var(--bc-darker);
     --_in-bc-focus: var(--theme-secondary-300);
     --_in-bg: var(--white);
-    --_in-br: var(--br-sm);
+    --_in-br: var(--br-md);
     --_in-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring);
     --_in-c: unset;
     --_in-fc: var(--fc-dark);
@@ -69,7 +69,7 @@
 
     &&__md {
         @supports (-webkit-overflow-scrolling: touch) {
-            --_in-fs: 17px;
+            --_in-fs: calc(var(--su-static16) + var(--su-static1)); // 17px
             --_in-py: 0.4em;
         }
 

package/lib/components/link/link.a11y.test.ts

@@ -0,0 +1,36 @@
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+describe("link", () => {
+    // TODO check for visited styling
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-link",
+        modifiers: {
+            primary: [
+                "grayscale",
+                "muted",
+                "danger",
+                "inherit",
+                "underlined",
+                "visited",
+            ],
+            secondary: ["dropdown"],
+        },
+        children: {
+            default: "s-link",
+        },
+        tag: "a",
+        attributes: {
+            href: "#",
+        },
+        skippedTestids: [
+            "s-link-dark", // TODO fix contrast issue
+            "s-link-dark-dropdown", // TODO fix contrast issue
+            "s-link-dark-danger", // TODO fix contrast issue
+            "s-link-dark-danger-dropdown", // TODO fix contrast issue
+            "s-link-dark-underlined", // TODO fix contrast issue
+            "s-link-dark-underlined-dropdown", // TODO fix contrast issue
+        ],
+    });
+});

package/lib/components/link/link.less

@@ -53,6 +53,7 @@ a,
         }
 
         &__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);
             --_li-fc-hover: var(--theme-link-color-hover);
             --_li-fc-visited: var(--theme-link-color-visited);
         }

package/lib/components/link/link.visual.test.ts

@@ -0,0 +1,32 @@
+import { html } from "@open-wc/testing";
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+describe("link", () => {
+    // TODO check for visited styling
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-link",
+        modifiers: {
+            primary: [
+                "grayscale",
+                "muted",
+                "danger",
+                "inherit",
+                "underlined",
+                "visited",
+            ],
+            secondary: ["dropdown"],
+        },
+        children: {
+            default: "s-link",
+        },
+        tag: "a",
+        attributes: {
+            href: "#",
+        },
+        template: ({ component, testid }) => html`
+            <div data-testid="${testid}" class="p4 ws1">${component}</div>
+        `,
+    });
+});

package/lib/components/navigation/navigation.less

@@ -78,7 +78,7 @@
                 pointer-events: none;
                 position: absolute;
                 right: 0.9em;
-                top: calc(50% - 2px);
+                top: calc(50% - var(--su-static2)); // 50% - 2px
                 z-index: var(--zi-active);
             }
 

package/lib/components/notice/notice.less

@@ -197,7 +197,7 @@
 .s-notice {
     .construct-notice-component(s-notice);
 
-    border-radius: var(--br-sm);
+    border-radius: var(--br-md);
     border-width: var(--su-static1);
     padding: var(--su16);
 }

package/lib/components/page-title/page-title.less

@@ -43,7 +43,7 @@
     align-items: var(--_pt-ai);
     flex-direction: var(--_pt-fd);
 
-    border-bottom: 1px solid var(--bc-medium);
+    border-bottom: var(--su-static1) solid var(--bc-medium);
     display: flex;
     justify-content: space-between;
     padding-bottom: var(--su16);

package/lib/components/post-summary/post-summary.less

@@ -274,11 +274,15 @@
         }
 
         &--meta {
-            > *:not(.s-post-summary--meta-tags) > * {
+            > *:not(.s-post-summary--meta-tags):not(.s-user-card) > * {
                 opacity: var(--_ps-o);
             }
 
             .s-user-card {
+                > *:not(.magic-popup) {
+                    opacity: var(--_ps-o);
+                }
+
                 flex-wrap: wrap;
                 justify-content: flex-end;
                 margin-left: auto;

package/lib/components/select/select.less

@@ -5,7 +5,7 @@
     --_se-select-bc-focus: var(--theme-secondary-300);
     --_se-select-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring);
     --_se-select-bg: var(--white);
-    --_se-select-br: var(--br-sm);
+    --_se-select-br: var(--br-md);
     --_se-select-fc: var(--black);
     --_se-select-px: 0.7em;
     --_se-select-py: 0.6em;
@@ -13,7 +13,7 @@
 
     // CONTEXTUAL STYLES
     @supports (-webkit-overflow-scrolling: touch) {
-        --_se-select-fs: 16px; // Increase font size for mobile safari. This keeps our inputs from zooming the page while focused
+        --_se-select-fs: var(--su-static16); // Increase font size for mobile safari. This keeps our inputs from zooming the page while focused
         --_se-select-px: 0.55em; // Compensate for the larger font size so we generally keep the input the same size
         --_se-select-py: 0.4em; // Compensate for the larger font size so we generally keep the input the same size
     }

package/lib/components/sidebar-widget/sidebar-widget.less

@@ -159,9 +159,9 @@
             }
 
             #stacks-internals #bullet-arrow(var(--black-100));
-            background-position: 0 calc((1.2em - 10px) / 2);
+            background-position: 0 calc((1.2em - calc(var(--su-static8) + var(--su-static2))) / 2); // 0 ((1.2em - 10) / 2)
             background-repeat: no-repeat;
-            background-size: auto 10px;
+            background-size: auto calc(var(--su-static8) + var(--su-static2)); // auto 10px
             margin-top: var(--su-static12);
             padding-left: var(--su-static16);
         }
@@ -197,7 +197,7 @@
         clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%); // [3]
         content: '';
         // TODO: this makes no sense. revisit.
-        height: calc(2px + var(--br-sm)); // we need 2px border + 2px border radius to have the correct corner shape
+        height: calc(var(--su-static2) + var(--br-sm)); // we need 2px border + 2px border radius to have the correct corner shape
         left: calc(var(--su-static1) * -1); // -1px
         pointer-events: none; // if the top item is clickable, then we don't want to prevent clicking the top 2 pixels
         position: absolute;

package/lib/components/spinner/spinner.less

@@ -76,7 +76,7 @@
         border-color: transparent;
         border-left-color: currentColor;
         filter: invert(0); // [1]
-        transform-origin: 50% 50% 1px; // [1]
+        transform-origin: 50% 50% var(--su-static1); // [1]
     }
 
     &:before {

package/lib/components/table/table.less

@@ -205,7 +205,7 @@
         }
 
         &.s-table--bulk {
-            --_ta-td-w: calc(var(--su32) - var(--su2)); // 30px;
+            --_ta-td-w: calc(var(--su32) - var(--su2)); // 30px
         }
 
         &.s-table--progress {
@@ -216,7 +216,7 @@
         &.s-table--progress-bar {
             --_ta-td-blw: 0;
             --_ta-td-pl: 0;
-            --_ta-td-w: 120px;
+            --_ta-td-w: calc(var(--su-static12) * 10); // 120px
         }
 
         border: var(--su-static1) solid var(--_ta-td-bc);
@@ -252,7 +252,7 @@
         }
 
         &.s-table--bulk {
-            --_ta-th-w: calc(var(--su32) - var(--su2)); // 30px;
+            --_ta-th-w: calc(var(--su32) - var(--su2)); // 30px
         }
 
         border: var(--su-static1) solid var(--_ta-th-bc);

package/lib/components/toast/toast.test.ts

@@ -6,29 +6,30 @@ import { showToast, hideToast } from "../../controllers";
 
 const user = userEvent.setup();
 
-const testToast = (hidden = true) => html` <button
-        class="js-open-test-toast"
-        data-toggle="s-toast"
-        data-target="#test-toast"
-    >
-        Show test toast
-    </button>
-    <button type="button" aria-label="Dismiss">Close toast</button>
-    <div
-        role="alertdialog"
-        id="test-toast"
-        class="s-toast"
-        aria-hidden="${hidden}"
-        aria-labelledby="toast-message"
-        data-controller="s-toast"
-        data-s-toast-target="toast"
-        data-s-toast-return-element=".js-open-test-toast[data-target='#test-toast']"
-        data-testid="test-toast"
-    >
-        <aside class="s-notice s-notice__success">
-            <div id="notice-message">Test toast</div>
-        </aside>
-    </div>`;
+const testToast = (hidden = true) =>
+    html` <button
+            class="js-open-test-toast"
+            data-toggle="s-toast"
+            data-target="#test-toast"
+        >
+            Show test toast
+        </button>
+        <button type="button" aria-label="Dismiss">Close toast</button>
+        <div
+            role="alertdialog"
+            id="test-toast"
+            class="s-toast"
+            aria-hidden="${hidden}"
+            aria-labelledby="toast-message"
+            data-controller="s-toast"
+            data-s-toast-target="toast"
+            data-s-toast-return-element=".js-open-test-toast[data-target='#test-toast']"
+            data-testid="test-toast"
+        >
+            <aside class="s-notice s-notice__success">
+                <div id="notice-message">Test toast</div>
+            </aside>
+        </div>`;
 
 describe("toast", () => {
     it("trigger should make toast visible", async () => {

package/lib/components/topbar/topbar.less

@@ -89,14 +89,14 @@
                 position: absolute;
                 content: '';
                 left: 0;
-                top: -5px;
+                top: calc(var(--su-static1) - var(--su-static6)); // -5px
                 transition: top, transform;
                 transition-duration: 0.1s;
                 transition-timing-function: ease-in-out;
             }
 
             &:after {
-                top: 5px;
+                top: calc(var(--su-static6) - var(--su-static1)); // 5px
             }
         }
 
@@ -286,7 +286,7 @@
             outline: none;
 
             .s-activity-indicator {
-                top: calc(50% - 18px);
+                top: calc(50% - calc(var(--su16) + var(--su2))); // 50% - 18px
                 box-shadow: 0 0 0 var(--su-static2) var(--theme-topbar-item-background-hover);
             }
         }
@@ -297,8 +297,8 @@
 
         .s-activity-indicator {
             position: absolute;
-            top: calc(50% - 14px);
-            right: 2px;
+            top: calc(50% - calc(var(--su12) + var(--su2))); // 50% - 14px
+            right: var(--su-static2);
             transition: top var(--te-smooth) 0.15s;
             box-shadow: 0 0 0 var(--su-static2)  var(--theme-topbar-background-color);
         }
@@ -385,7 +385,7 @@
         .wmx2;
 
         align-self: stretch;
-        margin-right: -1px;
+        margin-right: calc(var(--su-static1) * -1); //-1px
         color: var(--theme-topbar-select-color);
 
         &:before,