@stackoverflow/stacks 2.0.0-rc.1 → 2.0.0-rc.10

package/lib/components/pagination/pagination.less

@@ -1,10 +1,10 @@
 .s-pagination {
     & &--item {
         --_pa-item-bg: transparent;
-        --_pa-item-bc: var(--bc-medium);
+        --_pa-item-bc: var(--bc-darker);
         --_pa-item-fc: var(--fc-medium);
         --_pa-item-bg-hover: var(--black-225);
-        --_pa-item-bc-hover: var(--bc-dark);
+        --_pa-item-bc-hover: var(--bc-darker);
         --_pa-item-fc-hover: var(--fc-dark);
 
         // CONTEXTUAL STYLES

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

@@ -0,0 +1,26 @@
+import { html } from "@open-wc/testing";
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+describe("pagination", () => {
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-pagination",
+        children: {
+            default: `
+                <a class="s-pagination--item" href="#">Prev</a>
+                <a class="s-pagination--item" href="#">1</a>
+                <span class="s-pagination--item is-selected" aria-current="page">2</span>
+                <a class="s-pagination--item" href="#">3</a>
+                <span class="s-pagination--item s-pagination--item__clear">…</span>
+                <a class="s-pagination--item" href="#">100</a>
+                <a class="s-pagination--item" href="#">Next</a>
+            `,
+        },
+        template: ({ component, testid }) => html`
+            <div class="d-inline-block p8" data-testid="${testid}">
+                ${component}
+            </div>
+        `,
+    });
+});

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

@@ -5,19 +5,19 @@
     --_ps-o: unset;
     // Child components
     --_ps-content-excerpt-fc: var(--_ps-state-fc, var(--fc-medium));
-    --_ps-content-title-a-fc: var(--_ps-state-fc, var(--theme-post-title-color));
-    --_ps-content-title-a-fc-hover: var(--_ps-state-fc, var(--theme-post-title-color-hover));
-    --_ps-content-title-a-fc-visited: var(--_ps-state-fc, var(--theme-post-title-color-visited));
+    --_ps-content-title-a-fc: var(--_ps-state-fc, var(--theme-post-title-color, var(--theme-link-color, var(--theme-secondary-400))));
+    --_ps-content-title-a-fc-hover: var(--_ps-state-fc, var(--theme-post-title-color-hover, var(--theme-link-color-hover, var(--theme-secondary-500))));
+    --_ps-content-title-a-fc-visited: var(--_ps-state-fc, var(--theme-post-title-color-visited, var(--theme-link-color-visited, var(--theme-secondary-600))));
     --_ps-stats-ai: flex-end;
     --_ps-stats-fc: var(--_ps-state-fc, var(--fc-light));
     --_ps-stats-fd: column;
     --_ps-stats-w: calc(var(--su96) + var(--su12));
     // Stats item modifiers
-    --_ps-has-answers-bc: var(--green-500);
+    --_ps-has-answers-bc: var(--green-400);
     --_ps-has-answers-bg: unset;
-    --_ps-has-answers-fc: var(--green-500);
-    --_ps-has-accepted-answers-bc: var(--green-500);
-    --_ps-has-accepted-answers-bg: var(--green-500);
+    --_ps-has-answers-fc: var(--green-400);
+    --_ps-has-accepted-answers-bc: var(--green-400);
+    --_ps-has-accepted-answers-bg: var(--green-400);
     --_ps-has-accepted-answers-fc: var(--white);
     --_ps-stats-item-emphasized-fc: var(--_ps-state-fc, var(--fc-dark));
 
@@ -117,9 +117,9 @@
         &:not(.s-post-summary__deleted):not(.s-post-summary__ignored) {
             --_ps-bg: var(--yellow-200);
             --_ps-stats-fc: var(--black-400);
-            --_ps-content-title-a-fc: var(--theme-post-title-color);
-            --_ps-content-title-a-fc-hover: var(--theme-post-title-color-hover);
-            --_ps-content-title-a-fc-visited: var(--theme-post-title-color-visited);
+            --_ps-content-title-a-fc: var(--theme-post-title-color, var(--theme-link-color, var(--theme-secondary-400)));
+            --_ps-content-title-a-fc-hover: var(--theme-post-title-color-hover, var(--theme-link-color-hover, var(--theme-secondary-500)));
+            --_ps-content-title-a-fc-visited: var(--theme-post-title-color-visited, var(--theme-link-color-visited, var(--theme-secondary-600)));
 
             .s-user-card {
                 a {
@@ -208,7 +208,7 @@
             .break-word;
             .v-truncate2;
             color: var( --_ps-content-excerpt-fc);
-            font-family: var(--theme-post-body-font-family);
+            font-family: var(--theme-post-body-font-family, var(--theme-body-font-family));
             margin-top: calc(var(--su2) * -1);
             margin-bottom: var(--su8);
         }
@@ -240,7 +240,7 @@
 
                 .break-word;
                 color: var(--_ps-content-title-a-fc);
-                font-family: var(--theme-post-title-font-family);
+                font-family: var(--theme-post-title-font-family, var(--theme-body-font-family));
             }
 
             .iconShield {
@@ -380,15 +380,15 @@
 
             // Hotness
             &.is-warm {
-                color: var(--_ps-state-fc, var(--yellow-600));
+                color: var(--_ps-state-fc, var(--yellow-500));
             }
 
             &.is-hot {
-                color: var(--_ps-state-fc, var(--orange-600));
+                color: var(--_ps-state-fc, var(--orange-500));
             }
 
             &.is-supernova {
-                color: var(--_ps-state-fc, var(--red-600));
+                color: var(--_ps-state-fc, var(--red-500));
             }
 
             // Status

package/lib/components/progress-bar/progress-bar.less

@@ -135,7 +135,7 @@
                     }
                 }
 
-                background: var(--black-350);
+                background: var(--black-250);
                 border-radius: 0;
                 height: var(--su-static6);
                 position: absolute;
@@ -203,7 +203,7 @@
                 });
 
                 align-items: center;
-                background: var(--black-350);
+                background: var(--black-250);
                 border-radius: 100%;
                 color: var(--_white-static);
                 display: flex;

package/lib/components/prose/prose.less

@@ -18,7 +18,7 @@
     --_pr-h6-fs: var(--fs-body1);
     --_pr-hr-bg: var(--black-225); // used for both background-color and color properties
     --_pr-img-mb: @pr-spacing;
-    --_pr-kbd-bc: var(--black-350);
+    --_pr-kbd-bc: var(--black-300);
     --_pr-kbd-bs: 0 var(--su-static1) var(--su-static1) hsla(210, 8%, 5%, 0.15), inset 0 1px 0 0 var(--_white-static);
     --_pr-spoiler-cursor: pointer;
     --_pr-spoiler-after-t: 1em;
@@ -74,7 +74,7 @@
     // CHILD ELEMENTS
     *:not(.s-code-block) {
         > a code {
-            color: var(--theme-link-color); // When contained within a link, we want the code to be link-colored
+            color: var(--theme-link-color, var(--theme-secondary-400)); // When contained within a link, we want the code to be link-colored
         }
 
         > code {

package/lib/components/select/select.less

@@ -1,7 +1,7 @@
 .s-select {
     --_se-arrow-bc: currentColor transparent;
     --_se-arrow-size: var(--su-static4); // Constant
-    --_se-select-bc: var(--bc-dark);
+    --_se-select-bc: var(--bc-darker);
     --_se-select-bc-focus: var(--theme-secondary-400);
     --_se-select-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring);
     --_se-select-bg: var(--white);

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

@@ -69,7 +69,7 @@
             &__expanding-control {
                 &:before {
                     border: calc(var(--su-static4) + var(--su-static1)) solid transparent;
-                    border-left-color: var(--bc-dark);
+                    border-left-color: var(--black-400);
                     border-right-width: 0;
                     content: '';
                     float: left;
@@ -228,11 +228,11 @@
         }
 
         .s-sidebarwidget--header {
-            background-color: var(~"--@{name}-300");
+            background-color: var(~"--@{name}-200");
             color: var(--fc-medium);
         }
 
-        background-color: var(~"--@{name}-200");
+        background-color: var(~"--@{name}-100");
         border-color: var(--_sw-bc);
     }
 }

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

@@ -0,0 +1,15 @@
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+describe("spinner", () => {
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-spinner",
+        modifiers: {
+            primary: ["xs", "sm", "md", "lg"],
+        },
+        children: {
+            default: `<div class="v-visible-sr">Loading…</div>`,
+        },
+    });
+});

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

@@ -0,0 +1,43 @@
+import { html } from "@open-wc/testing";
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const template = ({ component, testid }: any) => html`
+    <div class="d-inline-block p8" data-testid="${testid}">${component}</div>
+`;
+describe("spinner", () => {
+    // default, sizes
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-spinner",
+        modifiers: {
+            primary: ["xs", "sm", "md", "lg"],
+        },
+        children: {
+            default: `<div class="v-visible-sr">Loading…</div>`,
+        },
+        template,
+    });
+    // applied font color
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-spinner",
+        modifiers: {
+            global: ["fc-theme-primary"],
+        },
+        children: {
+            default: `<div class="v-visible-sr">Loading…</div>`,
+        },
+        template,
+    });
+    // .is-loading
+    runComponentTests({
+        type: "visual",
+        baseClass: "is-loading",
+        children: {
+            default: `Loading…`,
+        },
+        template,
+    });
+});

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

@@ -0,0 +1,23 @@
+import { IconClearSm } from "@stackoverflow/stacks-icons";
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+const children = {
+    default: `default`,
+    dismiss: `dismiss <span class="s-tag--dismiss">${IconClearSm}</span>`,
+    sponsor: `<img class="s-tag--sponsor" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII" width="16" height="16" alt="sponsor">sponsor`,
+};
+
+describe("tag", () => {
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-tag",
+        variants: ["ignored", "watched", "moderator", "muted", "required"],
+        modifiers: {
+            global: ["is-selected"],
+        },
+        children,
+        // TODO: revisit this after minor tag changes are made
+        skippedTestids: [/s-tag/],
+    });
+});

package/lib/components/tag/tag.less

@@ -1,13 +1,13 @@
 .s-tag {
-    --_ta-bc: var(--theme-tag-border-color);
-    --_ta-bc-hover: var(--theme-tag-hover-border-color);
+    --_ta-bc: var(--theme-tag-border-color, transparent);
+    --_ta-bc-hover: var(--theme-tag-hover-border-color, transparent);
     --_ta-bc-selected: transparent;
-    --_ta-bg: var(--theme-tag-background-color);
-    --_ta-bg-hover: var(--theme-tag-hover-background-color);
+    --_ta-bg: var(--theme-tag-background-color, var(--theme-secondary-100));
+    --_ta-bg-hover: var(--theme-tag-hover-background-color, var(--theme-secondary-200));
     --_ta-bg-selected: var(--theme-secondary-300);
     --_ta-br: var(--br-sm);
-    --_ta-fc: var(--theme-tag-color);
-    --_ta-fc-hover: var(--theme-tag-hover-color);
+    --_ta-fc: var(--theme-tag-color, var(--theme-secondary-500));
+    --_ta-fc-hover: var(--theme-tag-hover-color, var(--theme-secondary-600));
     --_ta-fc-selected: var(--theme-secondary-600);
     --_ta-fs: var(--fs-caption);
     --_ta-lh: 1.846153846;
@@ -99,41 +99,41 @@
 
     // moderator overrides other muted and required, required overrides muted
     &&__moderator {
-        --_ta-bc: var(--red-300);
-        --_ta-bg: var(--red-200);
-        --_ta-fc: var(--red-600);
-        --_ta-bc-hover: var(--red-400);
-        --_ta-bg-hover: var(--red-300);
-        --_ta-fc-hover: var(--red-600);
-        --_ta-bc-selected: var(--red-400);
-        --_ta-bg-selected: var(--red-300);
-        --_ta-fc-selected: var(--red-600);
+        --_ta-bc: transparent;
+        --_ta-bg: var(--orange-100);
+        --_ta-fc: var(--orange-500);
+        --_ta-bc-hover: transparent;
+        --_ta-bg-hover: var(--orange-200);
+        --_ta-fc-hover: var(--orange-600);
+        --_ta-bc-selected: transparent;
+        --_ta-bg-selected: var(--orange-300);
+        --_ta-fc-selected: var(--orange-600); // Currently APCA Lc 49 😔
     }
 
     &&__muted:not(&__moderator):not(&__required) {
         --_ta-bc: transparent;
-        --_ta-bg: var(--black-200);
-        --_ta-fc: var(--black-500);
+        --_ta-bg: var(--black-150);
+        --_ta-fc: var(--black-400);
         --_ta-bc-hover: transparent;
-        --_ta-bg-hover: var(--black-225);
-        --_ta-fc-hover: var(--black-600);
+        --_ta-bg-hover: var(--black-200);
+        --_ta-fc-hover: var(--black-500);
         --_ta-bc-selected: transparent;
-        --_ta-bg-selected: var(--black-300);
+        --_ta-bg-selected: var(--black-225);
         --_ta-fc-selected: var(--black-600);
 
         .highcontrast-mode({ --_ta-bc: currentColor; }); // Specificity has bit us, so we need this override
     }
 
     &&__required:not(&__moderator) {
-        --_ta-bc: var(--bc-dark);
-        --_ta-bg: var(--black-200);
-        --_ta-fc: var(--black-500);
-        --_ta-bc-hover: var(--black-350);
-        --_ta-bg-hover: var(--black-225);
-        --_ta-fc-hover: var(--black-600);
-        --_ta-bc-selected: var(--black-400);
-        --_ta-bg-selected: var(--black-300);
-        --_ta-fc-selected: var(--black-600);
+        --_ta-bc: transparent;
+        --_ta-bg: var(--theme-secondary-500);
+        --_ta-fc: var(--white);
+        --_ta-bc-hover: transparent;
+        --_ta-bg-hover: var(--theme-secondary-400);
+        --_ta-fc-hover: var(--white);
+        --_ta-bc-selected: transparent;
+        --_ta-bg-selected: var(--theme-secondary-600);
+        --_ta-fc-selected: var(--white);
     }
     &__watched, // TODO: remove all single `&` watched styles once core no longer requires them
     &&__watched {

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

@@ -0,0 +1,46 @@
+import { html } from "@open-wc/testing";
+import { IconClearSm } from "@stackoverflow/stacks-icons";
+import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+const children = {
+    default: `default`,
+    dismiss: `dismiss <span class="s-tag--dismiss">${IconClearSm}</span>`,
+    sponsor: `<img class="s-tag--sponsor" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII" width="16" height="16" alt="sponsor">sponsor`,
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const template = ({ component, testid }: any) => html`
+    <div data-testid="${testid}" class="d-inline-block p4">${component}</div>
+`;
+
+describe("tag", () => {
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-tag",
+        variants: ["ignored", "watched", "moderator", "muted", "required"],
+        modifiers: {
+            global: ["is-selected"],
+        },
+        children,
+        template,
+    });
+
+    // Size modifiers
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-tag",
+        modifiers: {
+            primary: ["xs", "sm", "md", "lg"],
+            global: ["is-selected"],
+        },
+        children: {
+            default: `default`,
+        },
+        template,
+        options: {
+            ...defaultOptions,
+            includeNullModifier: false,
+        },
+    });
+});

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

@@ -0,0 +1,30 @@
+import { runComponentTests } from "../../test/test-utils";
+import { html } from "@open-wc/testing";
+import "../../index";
+
+describe("toast > notice", () => {
+    // This is a test of notice component wrapped in a toast component
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-notice", // s-toast is a wrapper around s-notice
+        variants: ["info", "success", "warning", "danger"],
+        modifiers: {
+            primary: ["important"],
+        },
+        children: {
+            toast: `<span id="message">Test toast</span>`,
+        },
+        tag: "aside",
+        template: ({ component, testid }) => html`
+            <div
+                class="s-toast ps-static t0 l0"
+                role="alertdialog"
+                aria-hidden="false"
+                aria-labelledby="message"
+                data-testid="${testid}"
+            >
+                ${component}
+            </div>
+        `,
+    });
+});

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

@@ -11,16 +11,20 @@ describe("toast > notice", () => {
         modifiers: {
             primary: ["important"],
         },
-        attributes: {
-            ariaHidden: "false",
-        },
         children: {
-            toast: "Test toast",
+            toast: `<span id="message">Test toast</span>`,
         },
         tag: "aside",
         template: ({ component, testid }) => html`
-            <div data-testid="${testid}" class="s-toast" aria-hidden="false">
-                ${component}
+            <div class="d-inline-block p8" data-testid="${testid}">
+                <div
+                    class="s-toast ps-static t0 l0"
+                    role="alertdialog"
+                    aria-hidden="false"
+                    aria-labelledby="message"
+                >
+                    ${component}
+                </div>
             </div>
         `,
     });

package/lib/components/toggle-switch/toggle-switch.less

@@ -21,15 +21,11 @@
                     &.s-toggle-switch--label-off {
                         --_ts-multiple-bg: var(--black-400);
                         --_ts-multiple-fc: var(--white);
-
-                        .dark-mode({ --_ts-multiple-bg: var(--black-350); });
                     }
 
                     &:not(.s-toggle-switch--label-off) {
                         --_ts-multiple-bg: var(--green-400);
-                        --_ts-multiple-fc: var(--_white-static);
-
-                        .highcontrast-mode({ --_ts-multiple-fc: var(--white); });
+                        --_ts-multiple-fc: var(--white);
                     }
                 }
 
@@ -102,6 +98,7 @@
         background-repeat: no-repeat;
         border-radius: 1000px;
         cursor: pointer;
+        flex-shrink: 0;
         height: var(--su-static24);
         margin: 0; // guard against production adding 5px of margin to these
         transition: background-position 0.2s ease;