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

package/lib/components/notice/notice.less

@@ -1,9 +1,10 @@
 .construct-notice-component(@baseClass) {
-    --_no-bc: var(--bc-medium);
-    --_no-bg: var(--black-150);
-    --_no-fc: var(--fc-medium);
+    --_no-bc: var(--black-225);
+    --_no-bg: var(--black-100);
+    --_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/page-title/page-title.a11y.test.ts

@@ -0,0 +1,29 @@
+import { html } from "@open-wc/testing";
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+describe("page title", () => {
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-page-title",
+        children: {
+            default: `
+                <div class="s-page-title--text">
+                    <nav class="s-breadcrumbs" aria-label="example-breadcrumbs">…</nav>
+                    <h1 class="s-page-title--header">Page title</h1>
+                    <p class="s-page-title--description">
+                        Optional description de Finibus Bonorum et Malorum
+                    </p>
+                </div>
+                <div class="s-page-title--actions">
+                    <button class="s-btn s-btn__filled" type="button">Action</button>
+                </div>
+            `,
+        },
+        template: ({ component, testid }) => html`
+            <div class="d-block p8 ws6" data-testid="${testid}">
+                ${component}
+            </div>
+        `,
+    });
+});

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

@@ -31,7 +31,7 @@
     & &--header {
         color: var(--fc-dark);
         font-size: var(--fs-headline1);
-        font-weight: normal;
+        font-weight: bold;
         line-height: var(--lh-sm);
         margin: 0;
         margin-bottom: 0; // TODO: investigate why this exists. I assume it's so margin-bottom isn't overridden, but 🤷‍♂️

package/lib/components/page-title/page-title.visual.test.ts

@@ -0,0 +1,59 @@
+import { html } from "@open-wc/testing";
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const postTitleTemplate = ({ component, testid }: any) => html`
+    <div class="d-block p8 ws6" data-testid="${testid}">${component}</div>
+`;
+
+const getChildren = ({
+    showEverything = false,
+}: {
+    showEverything: boolean;
+}) => `
+    <div class="s-page-title--text">
+        ${
+            showEverything
+                ? `
+            <nav class="s-breadcrumbs" aria-label="example-breadcrumbs">
+                <div class="s-breadcrumbs--item">
+                    <a class="s-breadcrumbs--link">Stack Overflow</a>
+                </div>
+            </nav>
+        `
+                : ""
+        }
+        <h1 class="s-page-title--header">Page title</h1>
+        ${
+            showEverything
+                ? `
+            <p class="s-page-title--description">
+                Optional description de Finibus Bonorum et Malorum
+            </p>
+        `
+                : ""
+        }
+    </div>
+    ${
+        showEverything
+            ? `
+        <div class="s-page-title--actions">
+            <button class="s-btn s-btn__filled" type="button">Action</button>
+        </div>
+    `
+            : ""
+    }
+`;
+
+describe("page title", () => {
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-page-title",
+        children: {
+            default: getChildren({ showEverything: false }),
+            complete: getChildren({ showEverything: true }),
+        },
+        template: postTitleTemplate,
+    });
+});

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.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));
 
@@ -115,11 +115,11 @@
 
     &&__watched {
         &:not(.s-post-summary__deleted):not(.s-post-summary__ignored) {
-            --_ps-bg: var(--yellow-200);
+            --_ps-bg: var(--yellow-100);
             --_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,29 @@
+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-highcontrast-light-muted/, // 6.33
+            /s-tag-light-is-selected/, // 58.28Lc
+            /s-tag-light-ignored-is-selected/, // 58.28Lc
+            /s-tag-light-moderator-is-selected/, // 49.14Lc
+            /s-tag-light-watched-is-selected/, // 58.28Lc
+        ],
+    });
+});