@stackoverflow/stacks 2.0.0-rc.9 → 2.0.0

package/lib/atomic/typography.less

@@ -56,7 +56,7 @@ p {
 }, @force-selector: true);
 
 .fs-category {
-    font-weight: 600;
+    font-weight: 700;
     text-transform: uppercase;
 
     // If a top border is desired
@@ -89,7 +89,7 @@ p {
 
 //  --  Font Weight
 .fw-normal { font-weight: 400 !important; }
-.fw-bold { font-weight: 600 !important; }
+.fw-bold { font-weight: 700 !important; }
 
 //  --  Font Styles
 .fs-normal { font-style: normal !important; }

package/lib/components/activity-indicator/activity-indicator.less

@@ -44,7 +44,7 @@
     border-radius: 1000px;
     display: inline-block;
     font-size: var(--fs-fine);
-    font-weight: 600;
+    font-weight: 700;
     line-height: 1.1; // Custom line-height to satisfy 1x screens
     min-width: var(--su-static12);
     min-height: var(--su-static12);

package/lib/components/badge/badge.less

@@ -13,17 +13,17 @@
     // CONTEXTUAL STYLES
     .highcontrast-mode({
         // Badge counts
-        &&__gold,
-        &&__silver,
-        &&__bronze,
+        &__gold,
+        &__silver,
+        &__bronze,
         // Number counts
-        &&__rep,
-        &&__rep-down,
-        &&__votes:not(&__answered),
+        &__rep,
+        &__rep-down,
+        &__votes:not(.s-badge__answered),
         // Users
-        &&__admin,
-        &&__moderator,
-        &&__staff {
+        &__admin,
+        &__moderator,
+        &__staff {
             --_ba-bc: currentColor;
         }
     });
@@ -113,7 +113,7 @@
 
     // Users
     &&__admin {
-        --_ba-bc: var(--theme-primary-300);
+        --_ba-bc: var(--theme-primary-200);
         --_ba-bg: var(--theme-primary-100);
         --_ba-fc: var(--theme-primary-500);
     }

package/lib/components/checkbox_radio/checkbox_radio.less

@@ -47,8 +47,20 @@
 }
 
 .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];
 
     // 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}'/%3E%3C/svg%3E");
+        }
+        &: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}'/%3E%3C/svg%3E");
+        }
+    });
+
     .highcontrast-dark-mode({
         &:checked, &:indeterminate {
             --_ch-bc: var(--blue-500) !important;
@@ -68,11 +80,11 @@
     }
 
     &: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='%23fff'/%3E%3C/svg%3E");
+        --_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}'/%3E%3C/svg%3E");
     }
 
     &: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='%23fff'/%3E%3C/svg%3E");
+        --_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}'/%3E%3C/svg%3E");
     }
 
     // INTERACTION
@@ -98,12 +110,6 @@
         }
     });
 
-    .dark-mode({
-        &:checked {
-            --_ch-bg: var(--black);
-        }
-    });
-
     // STATES
     &:checked {
         --_ch-baw: 0.30769231em;

package/lib/components/code-block/code-block.a11y.test.ts

@@ -15,7 +15,7 @@ describe("code block", () => {
                 ...defaultOptions,
                 includeNullModifier: false,
             },
-            // TODO new colors should resolve this issue
+            // TODO revisit these skipped test ids
             skippedTestids: [
                 "s-code-block-language-html-light",
                 "s-code-block-language-html-highcontrast-light",

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

@@ -0,0 +1,112 @@
+import { html } from "@open-wc/testing";
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+// TODO note: all accessibility tests here are skipped currently. Revisit in Stacks v2
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const template = ({ component, testid, classes = "", icon }: any) => html`
+    <div data-testid="${testid}" class="p8 ws4 ${classes}">
+        <label for="default-id">Label</label>
+        ${component}${icon}
+    </div>
+`;
+
+const customAttributes = [
+    {
+        placeholder: "Enter your text here",
+    },
+    {
+        readonly: "",
+    },
+    {
+        disabled: "",
+    },
+];
+
+const states = ["has-error", "has-warning", "has-success"];
+const sizes = ["sm", "md", "lg", "xl"];
+const otherModifiers = ["creditcard", "search"];
+
+["input", "textarea"].map((type) => {
+    const children =
+        type === "textarea" ? { default: "Enter your text here" } : undefined;
+
+    describe(type, () => {
+        // Base styles w/ value, modifiers
+        runComponentTests({
+            type: "a11y",
+            baseClass: `s-${type}`,
+            modifiers: {
+                primary: [...sizes, ...otherModifiers],
+            },
+            tag: type,
+            attributes:
+                type === "input"
+                    ? {
+                          type: "text",
+                          value: "Text input value",
+                          id: `default-id`,
+                      }
+                    : {
+                          id: `default-id`,
+                      },
+            children,
+            template,
+        });
+
+        // Base styles w/o value; w/ readonly attr; w/ disabled attr
+        customAttributes.forEach((attributes) => {
+            const attrString = Object.keys(attributes).sort().join("-");
+
+            runComponentTests({
+                type: "a11y",
+                baseClass: `s-${type} ${attrString}`,
+                tag: type,
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                attributes:
+                    type === "input"
+                        ? {
+                              type: "text",
+                              value: attributes.placeholder
+                                  ? null
+                                  : "Text input value",
+                              id: `default-id`,
+                              ...attributes,
+                          }
+                        : {
+                              id: `default-id`,
+                              ...attributes,
+                          },
+                children,
+                template,
+                // TODO revisit these skipped test ids
+                skippedTestids: [/readonly/],
+            });
+        });
+
+        // w/ state classes
+        states.forEach((state) => {
+            runComponentTests({
+                type: "a11y",
+                baseClass: `s-${type} state-${state}`,
+                tag: type,
+                attributes:
+                    type === "input"
+                        ? {
+                              type: "text",
+                              value: "Text input value",
+                              id: `default-id`,
+                          }
+                        : {
+                              id: "default-id",
+                          },
+                children,
+                template: ({ component, testid }) =>
+                    template({ component, testid, classes: state }),
+            });
+        });
+        // TODO interaction (focus) states?
+    });
+});

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

@@ -0,0 +1,98 @@
+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, classes = "", icon }: any) => html`
+    <div data-testid="${testid}" class="p8 ws4 ${classes}">
+        ${component}${icon}
+    </div>
+`;
+
+const customAttributes = [
+    {
+        placeholder: "Enter your text here",
+    },
+    {
+        readonly: "",
+    },
+    {
+        disabled: "",
+    },
+] as Record<string, string>[];
+
+const states = ["has-error", "has-warning", "has-success", "is-readonly"];
+const sizes = ["sm", "md", "lg", "xl"];
+const otherModifiers = ["creditcard", "search"];
+
+["input", "textarea"].map((type) => {
+    const children =
+        type === "textarea" ? { default: "Enter your text here" } : undefined;
+
+    describe(type, () => {
+        // Base styles w/ value, modifiers
+        runComponentTests({
+            type: "visual",
+            baseClass: `s-${type}`,
+            modifiers: {
+                primary: [...sizes, ...otherModifiers],
+            },
+            tag: type,
+            attributes:
+                type === "input"
+                    ? {
+                          type: "text",
+                          value: "Text input value",
+                      }
+                    : {},
+            children,
+            template,
+        });
+
+        // Base styles w/o value; w/ readonly attr; w/ disabled attr
+        customAttributes.forEach((attributes) => {
+            const attrString = Object.keys(attributes).sort().join("-");
+            let attr = attributes;
+            if (type === "input") {
+                attr = {
+                    type: "text",
+                    ...attributes,
+                };
+                if (!attributes.placeholder) {
+                    attr = {
+                        value: "Text input value",
+                        ...attr,
+                    };
+                }
+            }
+            runComponentTests({
+                type: "visual",
+                baseClass: `s-${type} ${attrString}`,
+                tag: type,
+                attributes: attr,
+                children,
+                template,
+            });
+        });
+
+        // w/ state classes; .is-readonly
+        states.forEach((state) => {
+            runComponentTests({
+                type: "visual",
+                baseClass: `s-${type} state-${state}`,
+                tag: type,
+                attributes:
+                    type === "input"
+                        ? {
+                              type: "text",
+                              value: "Text input value",
+                          }
+                        : {},
+                children,
+                template: ({ component, testid }) =>
+                    template({ component, testid, classes: state }),
+            });
+        });
+        // TODO interaction (focus) states?
+    });
+});

package/lib/components/label/label.less

@@ -91,7 +91,7 @@
 
     color: var(--fc-medium);
     font-family: inherit;
-    font-weight: 600;
+    font-weight: 700;
     padding: 0 var(--su2); // Helps the label visually line up with inputs
 }
 

package/lib/components/link-preview/link-preview.less

@@ -109,7 +109,7 @@
         &:hover{
             &,
             &.s-link__visited {
-                color: var(--theme-link-color-hover, var(--theme-secondary-400));
+                color: var(--theme-link-color-hover, var(--theme-secondary-500));
             }
         }
 
@@ -126,7 +126,7 @@
         }
 
         &.s-link__visited:visited {
-            color: var(--theme-link-color, var(--theme-secondary-400));
+            color: var(--theme-link-color, var(--theme-secondary-600));
         }
 
         color: var(--theme-link-color, var(--theme-secondary-400));

package/lib/components/modal/modal.less

@@ -94,6 +94,7 @@
         font-weight: normal;
         line-height: var(--lh-sm);
         margin-bottom: var(--su16);
+        margin-right: var(--su24);
     }
 
     background-color: var(--_mo-bg);

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

@@ -74,7 +74,5 @@ describe("navigation", () => {
                 ${component}
             </nav>
         `,
-        // TODO new colors should resolve the `.is-selected` failures
-        skippedTestids: [/s-navigation/],
     });
 });

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.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/post-summary/post-summary.less

@@ -6,8 +6,8 @@
     // 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, 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-400))));
-    --_ps-content-title-a-fc-visited: var(--_ps-state-fc, var(--theme-post-title-color-visited, var(--theme-link-color-visited, var(--theme-secondary-500))));
+    --_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;
@@ -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, 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-400)));
-            --_ps-content-title-a-fc-visited: var(--theme-post-title-color-visited, var(--theme-link-color-visited, var(--theme-secondary-500)));
+            --_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 {

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
+        ],
+    });
+});

package/lib/components/tag/tag.less

@@ -18,6 +18,7 @@
     // CONTEXTUAL STYLES
     .highcontrast-mode({
         --_ta-bc: currentColor;
+        --_ta-bg-selected: var(--theme-secondary-400);
 
         text-decoration: none;
     });
@@ -30,7 +31,8 @@
         a&:hover,
         a&:focus {
             .highcontrast-mode({
-                border-color: currentColor;
+                --_ta-bc-selected: transparent;
+                --_ta-fc-selected: var(--white);
             });
 
             background-color: var(--_ta-bg-selected);
@@ -99,6 +101,10 @@
 
     // moderator overrides other muted and required, required overrides muted
     &&__moderator {
+        .highcontrast-mode({
+            --_ta-bg-selected: var(--orange-500);
+        });
+
         --_ta-bc: transparent;
         --_ta-bg: var(--orange-100);
         --_ta-fc: var(--orange-500);

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/toggle-switch/toggle-switch.less

@@ -1,10 +1,17 @@
 .s-toggle-switch {
+    @ts-bg-image-fill: .set-white()[default];
+    @ts-bg-image-fill-dark: .set-white-dark()[default];
     --_ts-bg: var(--black-350);
+    --_ts-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='@{ts-bg-image-fill}'/%3e%3c/svg%3e");
     --_ts-bg-ps: left center;
     --_ts-bs-color: transparent;
     --_ts-multiple-bg: unset;
     --_ts-multiple-fc: var(--black-400);
 
+    .dark-mode({
+        --_ts-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='@{ts-bg-image-fill-dark}'/%3e%3c/svg%3e");
+    });
+
     fieldset[disabled] &,
     &[disabled] {
         &,
@@ -93,7 +100,7 @@
         box-shadow: 0 0 0 var(--su-static4) var(--_ts-bs-color);
 
         appearance: none;
-        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); // The white dot within the toggle
+        background-image: var(--_ts-bg-image);
         background-size: contain;
         background-repeat: no-repeat;
         border-radius: 1000px;