@stackoverflow/stacks 2.0.0-rc.0 → 2.0.0-rc.2

package/lib/components/notice/notice.less

@@ -1,9 +1,10 @@
 .construct-notice-component(@baseClass) {
-    --_no-bc: var(--bc-medium);
+    --_no-bc: var(--black-225);
     --_no-bg: var(--black-150);
-    --_no-fc: var(--fc-medium);
+    --_no-fc: var(--black-500);
     --_no-btn-bg-focus: var(--black-225);
     --_no-btn-bg-active: var(--black-250);
+    --_no-btn-fc: var(--_no-fc);
 
     // MODIFIERS
     &:not(&__important) {
@@ -26,137 +27,99 @@
         --_no-fc: var(--white);
         --_no-btn-bg-focus: var(--black-600);
         --_no-btn-bg-active: var(--black-600);
-
-        .highcontrast-mode({
-            --_no-bc: var(--_no-bg);
-        });
+        --_no-btn-fc: var(--_no-fc);
+        --_no-code-bg: var(--black-300);
     }
 
     // VARIANTS
     &__danger {
         --_no-bc: var(--red-300);
-        --_no-bg: var(--red-200);
-        --_no-btn-bg-active: var(--red-300);
-        --_no-btn-bg-focus: var(--red-300);
-
-        &:not(.@{baseClass}__important) {
-            .highcontrast-mode({
-                --_no-bg: var(--red-300);
-            });
-        }
+        --_no-bg: var(--red-100);
+        --_no-btn-bg-active: var(--red-200);
+        --_no-btn-bg-focus: var(--red-200);
+        --_no-btn-fc: var(--red-500);
+        --_no-code-bg: var(--red-300);
 
         &.@{baseClass}__important {
             --_no-bc: var(--_no-bg);
             --_no-bg: var(--red-400);
             --_no-btn-bg-active: var(--red-500);
             --_no-btn-bg-focus: var(--red-500);
+            --_no-btn-fc: var(--red-100);
 
-            .dark-mode({
-                --_no-bg: var(--red-400);
-                --_no-fc: var(--black-600);
-            });
-
-            .highcontrast-dark-mode({
-                --_no-bg: var(--red-400);
-                --_no-fc: var(--white);
+            .highcontrast-mode({
+                --_no-bg: var(--red-500);
             });
         }
     }
 
     &__info {
         --_no-bc: var(--theme-secondary-300);
-        --_no-bg: var(--theme-secondary-200);
-        --_no-btn-bg-focus: var(--theme-secondary-300);
-        --_no-btn-bg-active: var(--theme-secondary-300);
+        --_no-bg: var(--theme-secondary-100);
+        --_no-btn-bg-focus: var(--theme-secondary-200);
+        --_no-btn-bg-active: var(--theme-secondary-200);
+        --_no-btn-fc: var(--theme-secondary-500);
         --_no-code-bg: var(--theme-secondary-300);
 
-        &:not(.@{baseClass}__important) {
-            .highcontrast-mode({
-                --_no-bg: var(--theme-secondary-300);
-            });
-
-            .highcontrast-dark-mode({
-                --_no-bg: var(--theme-secondary-300);
-            });
-        }
-
         &.@{baseClass}__important {
             --_no-bc: var(--_no-bg);
             --_no-bg: var(--theme-secondary-400);
             --_no-btn-bg-active: var(--theme-secondary-500);
-            --_no-btn-bg-focus: var(--theme-secondary-400);
+            --_no-btn-bg-focus: var(--theme-secondary-500);
+            --_no-btn-fc: var(--theme-secondary-100);
 
-            .dark-mode({
-                --_no-bg: var(--theme-secondary-400);
-                --_no-fc: var(--black-600);
-            });
-
-            .highcontrast-dark-mode({
-                --_no-bg: var(--theme-secondary-400);
-                --_no-fc: var(--white);
+            .highcontrast-mode({
+                --_no-bg: var(--theme-secondary-500);
             });
         }
     }
 
     &__success {
         --_no-bc: var(--green-300);
-        --_no-bg: var(--green-200);
-        --_no-btn-bg-active: var(--green-300);
-        --_no-btn-bg-focus: var(--green-300);
-
-        &:not(.@{baseClass}__important) {
-            .highcontrast-mode({
-                --_no-bg: var(--green-300);
-            });
-        }
+        --_no-bg: var(--green-100);
+        --_no-btn-bg-active: var(--green-200);
+        --_no-btn-bg-focus: var(--green-200);
+        --_no-btn-fc: var(--green-500);
+        --_no-code-bg: var(--green-300);
 
         &.@{baseClass}__important {
             --_no-bc: var(--_no-bg);
             --_no-bg: var(--green-400);
-            --_no-fc: var(--black-600);
             --_no-btn-bg-active: var(--green-500);
-            --_no-btn-bg-focus: var(--green-400);
-
-            .dark-mode({
-                --_no-bg: var(--green-400);
-                --_no-fc: var(--white);
-            });
+            --_no-btn-bg-focus: var(--green-500);
+            --_no-btn-fc: var(--green-100);
 
             .highcontrast-mode({
-                --_no-bg: var(--green-400);
-                --_no-fc: var(--white);
+                --_no-bg: var(--green-500);
             });
         }
     }
 
     &__warning {
-        --_no-bc: var(--yellow-400);
-        --_no-bg: var(--yellow-200);
-        --_no-btn-bg-active: var(--yellow-400);
-        --_no-btn-bg-focus: var(--yellow-300);
+        --_no-bc: var(--yellow-300);
+        --_no-bg: var(--yellow-100);
+        --_no-btn-bg-active: var(--yellow-200);
+        --_no-btn-bg-focus: var(--yellow-200);
+        --_no-btn-fc: var(--yellow-600);
         --_no-code-bg: var(--yellow-300);
 
-        &:not(.@{baseClass}__important) {
-            .highcontrast-mode({
-                --_no-bg: var(--yellow-300);
-            });
-        }
-
         &.@{baseClass}__important {
             --_no-bc: var(--_no-bg);
             --_no-bg: var(--yellow-400);
-            --_no-fc: var(--black-600);
-            --_no-btn-bg-active: var(--yellow-500);
-            --_no-btn-bg-focus: var(--yellow-400);
+            --_no-fc: var(--black);
+            --_no-btn-fc: var(--_no-fc);
+            --_no-btn-bg-active: var(--yellow-300);
+            --_no-btn-bg-focus: var(--yellow-300);
 
             .dark-mode({
-                --_no-bg: var(--yellow-500);
-                --_no-fc: var(--white);
+                --_no-fc: var(--yellow-200);
             });
 
             .highcontrast-mode({
                 --_no-bg: var(--yellow-500);
                 --_no-fc: var(--white);
+                --_no-btn-bg-active: transparent;
+                --_no-btn-bg-focus: transparent;
             });
         }
     }
@@ -173,15 +136,15 @@
         }
 
         &:active {
-            background: var(--_no-btn-bg-active);
+            background-color: var(--_no-btn-bg-active, inherit) !important;
         }
 
         &:focus,
         &:hover {
-            background: var(--_no-btn-bg-focus);
+            background-color: var(--_no-btn-bg-focus, inherit) !important;
         }
 
-        color: inherit;
+        color: var(--_no-btn-fc, inherit) !important;
         padding: var(--su8);
     }
 

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

@@ -0,0 +1,26 @@
+import { runComponentTests } from "../../test/test-utils";
+import { html } from "@open-wc/testing";
+import "../../index";
+
+describe("notice", () => {
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-notice",
+        variants: ["info", "success", "warning", "danger"],
+        modifiers: {
+            primary: ["important"],
+        },
+        attributes: {
+            ariaHidden: "false",
+        },
+        children: {
+            default: `Test notice`,
+        },
+        tag: "aside",
+        template: ({ component, testid }) => html`
+            <div class="d-inline-block p8" data-testid="${testid}">
+                ${component}
+            </div>
+        `,
+    });
+});

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

@@ -0,0 +1,20 @@
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+describe("pagination", () => {
+    runComponentTests({
+        type: "a11y",
+        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>
+            `,
+        }
+    });
+});

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

@@ -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/sidebar-widget/sidebar-widget.less

@@ -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/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;

package/lib/components/uploader/uploader.less

@@ -10,6 +10,15 @@
     // CONTEXTUAL STYLES
     .highcontrast-mode({
         --_up-bg-bc-hc: var(--black-400);
+        &.has-error {
+            --_up-bg-bc-hc-state: var(--red-500);
+        }
+        &.has-success {
+            --_up-bg-bc-hc-state: var(--green-400);
+        }
+        &.has-warning {
+            --_up-bg-bc-hc-state: var(--yellow-500);
+        }
     });
 
     // STATES
@@ -22,30 +31,27 @@
     }
 
     &.has-error {
-        --_up-bg: var(--red-200);
-        --_up-bg-focus: var(--red-300);
-        --_up-bg-bc: var(--red-400);
-        --_up-bg-bc-hc-state: var(--red-400);
+        --_up-bg: var(--red-100);
+        --_up-bg-focus: var(--red-200);
+        --_up-bg-bc: var(--red-300);
         --_up-focus-ring-color: var(--focus-ring-error);
-        --_up-link-fc: var(--red-600);
+        --_up-link-fc: var(--red-500);
     }
 
     &.has-success {
         --_up-bg: var(--green-100);
         --_up-bg-focus: var(--green-200);
-        --_up-bg-bc: var(--green-400);
-        --_up-bg-bc-hc-state: var(--green-400);
+        --_up-bg-bc: var(--green-300);
         --_up-focus-ring-color: var(--focus-ring-success);
-        --_up-link-fc: var(--green-600);
+        --_up-link-fc: var(--green-400);
     }
 
     &.has-warning {
-        --_up-bg: var(--yellow-200);
-        --_up-bg-focus: var(--yellow-300);
-        --_up-bg-bc: var(--yellow-400);
-        --_up-bg-bc-hc-state: var(--yellow-400);
+        --_up-bg: var(--yellow-100);
+        --_up-bg-focus: var(--yellow-200);
+        --_up-bg-bc: var(--yellow-300);
         --_up-focus-ring-color: var(--focus-ring-warning);
-        --_up-link-fc: var(--yellow-600);
+        --_up-link-fc: var(--yellow-500);
     }
 
     &.is-active {