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

package/lib/components/button/button.less

@@ -4,54 +4,52 @@
     --_bu-bc: transparent;
     // --_bu-bg: inherit; // [1]
     --_bu-br: var(--br-md);
-    --_bu-fc: var(--theme-button-color);
+    --_bu-fc: var(--theme-button-color, var(--theme-secondary-400));
     --_bu-focus-ring: 0 0 0 var(--su-static4) var(--focus-ring);
     --_bu-fs: var(--fs-body1);
     --_bu-p: 0.8em;
     // STATE AND INTERACTION CUSTOM PROPERTIES
     --_bu-bc-selected: transparent;
-    --_bu-bg-active: var(--theme-button-active-background-color);
-    --_bu-bg-hover: var(--theme-button-hover-background-color);
-    --_bu-bg-selected: var(--theme-button-selected-background-color);
-    --_bu-fc-active: var(--theme-button-hover-color); // Note: hover color used here intentionally
-    --_bu-fc-hover: var(--theme-button-hover-color);
-    --_bu-fc-selected: var(--theme-button-selected-color);
+    --_bu-bg-active: var(--theme-button-active-background-color, var(--theme-secondary-300));
+    --_bu-bg-hover: var(--theme-button-hover-background-color, var(--theme-secondary-200));
+    --_bu-bg-selected: var(--theme-button-selected-background-color, var(--theme-secondary-300));
+    --_bu-fc-active: var(--theme-button-hover-color, var(--theme-secondary-500)); // Note: hover color used here intentionally
+    --_bu-fc-hover: var(--theme-button-hover-color, var(--theme-secondary-500));
+    --_bu-fc-selected: var(--theme-button-selected-color, var(--theme-secondary-600));
     // Filled
     --_bu-filled-bc: transparent;
     --_bu-filled-bc-active: transparent;
-    --_bu-filled-bg-hover: var(--theme-button-filled-hover-background-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-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);
-    --_bu-filled-fc-selected: var(--theme-button-filled-selected-color);
+    --_bu-filled-bg: var(--theme-button-primary-background-color, var(--theme-secondary-400));
+    --_bu-filled-bg-active: var(--theme-button-primary-active-background-color, var(--theme-secondary-600));
+    --_bu-filled-bg-hover: var(--theme-button-primary-hover-background-color, var(--theme-secondary-500));
+    --_bu-filled-bg-selected: var(--theme-button-primary-selected-background-color, var(--theme-secondary-500));
+    --_bu-filled-fc: var(--theme-button-primary-color, var(--white));
+    --_bu-filled-fc-active: var(--theme-button-primary-hover-color, var(--white));
+    --_bu-filled-fc-hover: var(--theme-button-primary-hover-color, var(--white));
+    --_bu-filled-fc-selected: var(--theme-button-primary-selected-color, var(--white));
     // Outlined
-    --_bu-outlined-bc: var(--theme-button-outlined-border-color);
+    --_bu-outlined-bc: var(--theme-button-outlined-border-color, var(--theme-secondary-400));
     --_bu-outlined-bg: var(--theme-button-outlined-background-color);
-    --_bu-outlined-bc-selected: var(--theme-button-outlined-selected-border-color);
-    --_bu-outlined-bg-selected: var(--theme-button-selected-background-color);
-    --_bu-outlined-fc-selected: var(--theme-button-selected-color);
+    --_bu-outlined-bc-selected: var(--theme-button-outlined-selected-border-color, var(--theme-secondary-400));
+    --_bu-outlined-bg-selected: var(--theme-button-selected-background-color, var(--theme-secondary-300));
+    --_bu-outlined-fc-selected: var(--theme-button-selected-color, var(--theme-secondary-600));
     // CHILD COMPONENT CUSTOM PROPERTIES
     --_bu-badge-o: 0.5;
     --_bu-dropdown-bw: var(--su-static4);
     --_bu-number-fc: var(--white);
-    --_bu-number-fc-selected: var(--_bu-number-fc);
+    --_bu-number-fc-filled: var(--theme-button-primary-number-color, var(--theme-secondary-600));
+    --_bu-number-fc-selected: var(--white);
 
     // CONTEXTUAL STYLES
     .highcontrast-mode({
         --_bu-bc: currentColor;
-        --_bu-filled-bc: var(--_bu-bc);
         --_bu-outlined-bc: var(--_bu-bc);
         --_bu-bc-selected: var(--_bu-bc);
+        --_bu-fc-selected: var(--white);
+        --_bu-outlined-fc-selected: var(--white);
         --_bu-badge-o: 0.8;
-
-        &:not(.s-btn__primary):not(.s-btn__muted):not(.s-btn__danger):not(.is-selected):not(.s-btn__link):not(.s-btn__unset) {
-            --_bu-bg-hover: var(--theme-secondary-300);
-            --_bu-filled-bg-hover: var(--theme-secondary-400);
-        }
+        --_bu-number-fc-selected: var(--theme-button-primary-number-color, var(--theme-secondary-600));
     });
 
     // STATES
@@ -115,6 +113,10 @@
 
     // MODIFIERS
     &&__filled {
+        .s-btn--number {
+            color: var(--_bu-number-fc-filled);
+        }
+
         border-color: var(--_bu-filled-bc);
         background-color: var(--_bu-filled-bg);
         color: var(--_bu-filled-fc);
@@ -254,23 +256,8 @@
         --_bu-outlined-bc-selected: var(--red-500);
         --_bu-outlined-bg-selected: var(--_bu-bg-selected);
         --_bu-outlined-fc-selected: var(--_bu-fc-selected);
-
-        &.s-btn__filled {
-            --_bu-number-fc: var(--black);
-
-            .dark-mode({
-                --_bu-filled-fc: var(--black);
-                --_bu-filled-fc-selected: var(--white);
-                --_bu-number-fc: var(--white);
-                --_bu-number-fc-selected: var(--black);
-            });
-
-            .highcontrast-dark-mode({
-                --_bu-filled-fc: var(--white);
-                --_bu-number-fc: var(--black);
-                --_bu-number-fc-selected: var(--black);
-            });
-        }
+        --_bu-number-fc: var(--white);
+        --_bu-number-fc-filled: var(--black);
     }
 
     &&__muted {
@@ -298,58 +285,41 @@
         --_bu-outlined-bc-selected: var(--black-300);
         --_bu-outlined-bg-selected: var(--_bu-bg-selected);
         --_bu-outlined-fc-selected: var(--_bu-fc-selected);
+        --_bu-number-fc-selected: var(--white);
 
         .highcontrast-mode({
             --_bu-bg-hover: var(--black-225);
-            // The filled modifier on the muted button is deprecated and is to be
-            // removed in Stacks Classic v2
+            // // 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-500);
             --_bu-filled-bg-hover: var(--black-400);
             --_bu-filled-bg-selected: var(--black-500);
             --_bu-filled-fc: var(--white);
             --_bu-filled-fc-selected: var(--_bu-filled-fc);
-
-            &.s-btn__filled {
-                --_bu-number-fc: var(--black);
-            }
+            --_bu-fc-selected: var(--black);
+            --_bu-number-fc: var(--white);
+            --_bu-number-fc-filled: var(--black);
+            --_bu-number-fc-selected: var(--white);
         });
     }
 
+    // DEPRECATED - THE PRIMARY BUTTON STYLE IS TO BE REMOVED WITH V1 COLORS
     &&__primary {
-        --_bu-bg: var(--theme-button-primary-background-color);
-        --_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-fc: var(--theme-button-primary-color);
-        --_bu-fc-active: var(--theme-button-primary-hover-color);
-        --_bu-fc-hover: var(--theme-button-primary-hover-color);
-        --_bu-fc-selected: var(--theme-button-primary-selected-color);
-        --_bu-number-fc: var(--theme-button-primary-number-color);
-
-        .dark-mode({
-            --_bu-bg: var(--theme-secondary-400);
-            --_bu-bg-active: var(--theme-secondary-400);
-            --_bu-bg-hover: var(--theme-secondary-400);
-            --_bu-fc: var(--black);
-            --_bu-fc-active: var(--_bu-fc);
-            --_bu-fc-hover: var(--_bu-fc);
-            --_bu-fc-selected: var(--white);
-            --_bu-number-fc: var(--white);
-            --_bu-number-fc-selected: var(--black);
-        });
+        --_bu-bg: var(--theme-button-primary-background-color, var(--theme-secondary-400));
+        --_bu-bg-active: var(--theme-button-primary-active-background-color, var(--theme-secondary-600));
+        --_bu-bg-hover: var(--theme-button-primary-hover-background-color, var(--theme-secondary-500));
+        --_bu-bg-selected: var(--theme-button-primary-selected-background-color, var(--theme-secondary-500));
+        --_bu-fc: var(--theme-button-primary-color, var(--white));
+        --_bu-fc-active: var(--theme-button-primary-hover-color, var(--white));
+        --_bu-fc-hover: var(--theme-button-primary-hover-color, var(--white));
+        --_bu-fc-selected: var(--theme-button-primary-selected-color, var(--white));
+        --_bu-number-fc: var(--theme-button-primary-number-color, var(--theme-secondary-600));
+        --_bu-number-fc-selected: var(--theme-button-primary-number-color, var(--theme-secondary-600));
 
         .highcontrast-mode({
             --_bu-bc: transparent;
         });
-
-        .highcontrast-dark-mode({
-            --_bu-bg: var(--theme-secondary-400);
-            --_bu-bg-active: var(--theme-secondary-500);
-            --_bu-bg-hover: var(--theme-secondary-400);
-            --_bu-fc: var(--white);
-            --_bu-number-fc: var(--black);
-        });
     }
 
     // Social

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

@@ -19,7 +19,7 @@ describe("button", () => {
     runComponentTests({
         type: "visual",
         baseClass: "s-btn",
-        variants: ["danger", "muted", "primary"],
+        variants: ["danger", "muted"],
         modifiers: {
             primary: ["filled", "outlined"],
             secondary: [...["xs", "sm", "md"], ...["dropdown", "icon"]],
@@ -45,8 +45,5 @@ describe("button", () => {
                 ${component}
             </div>
         `,
-        excludedTestids: [
-            /primary-outlined/, // This combination is not supported
-        ],
     });
 });

package/lib/components/card/card.less

@@ -13,6 +13,14 @@
         //  Dim only the first child card content
         > * {
             opacity: 0.65;
+
+            .dark-mode({
+                opacity: 0.7;
+            });
+
+            .highcontrast-mode({
+                opacity: 0.75;
+            });
         }
     }
 

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

@@ -0,0 +1,30 @@
+import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import highlightedFixtures from "./code-block.fixtures";
+import "../../index";
+
+describe("code block", () => {
+    Object.keys(highlightedFixtures).forEach((language) => {
+        runComponentTests({
+            type: "a11y",
+            tag: "pre",
+            baseClass: `s-code-block language-${language}`,
+            children: {
+                default: highlightedFixtures[language],
+            },
+            options: {
+                ...defaultOptions,
+                includeNullModifier: false,
+            },
+            // TODO revisit these skipped test ids
+            skippedTestids: [
+                "s-code-block-language-html-light",
+                "s-code-block-language-html-highcontrast-light",
+                "s-code-block-language-html-highcontrast-dark",
+                "s-code-block-language-html-dark",
+                "s-code-block-language-css-dark",
+                "s-code-block-language-javascript-dark",
+                "s-code-block-language-javascript-highcontrast-light",
+            ],
+        });
+    });
+});

package/lib/components/code-block/code-block.fixtures.ts

@@ -0,0 +1,88 @@
+import type { LanguageFn } from "highlight.js";
+import hljs from "highlight.js/lib/core";
+import hljsJavascript from "highlight.js/lib/languages/javascript";
+import hljsCss from "highlight.js/lib/languages/css";
+import hljsHtml from "highlight.js/lib/languages/xml";
+
+const hljsLanguages: Record<string, LanguageFn> = {
+    javascript: hljsJavascript,
+    css: hljsCss,
+    html: hljsHtml,
+};
+
+const javascriptFixture = `
+import React, { Component } from 'react'
+import { IP } from '../constants/IP'
+import { withAuth0 } from '@auth0/auth0-react';
+
+class AddATournament extends Component {
+    componentDidMount() {
+        this.myNewListOfAllTournamentsWithAuth()
+    }
+}
+
+export default withAuth0(AddATournament);
+`;
+
+const cssFixture = `
+.s-input,
+.s-textarea {
+    -webkit-appearance: none;
+    width: 100%;
+    margin: 0;
+    padding: 0.6em 0.7em;
+    border: 1px solid var(--bc-darker);
+    border-radius: 3px;
+    background-color: var(--white);
+    color: var(--fc-dark);
+    font-size: 13px;
+    font-family: inherit;
+    line-height: 1.15384615;
+    scrollbar-color: var(--scrollbar) transparent;
+}
+@supports (-webkit-overflow-scrolling: touch) {
+    .s-input,
+    .s-textarea {
+        font-size: 16px;
+        padding: 0.36em 0.55em;
+    }
+    .s-input::-webkit-input-placeholder,
+    .s-textarea::-webkit-input-placeholder {
+        line-height: normal !important;
+    }
+}
+`;
+
+const htmlFixture = `
+<form class="d-flex gy4 fd-column">
+    <label class="flex--item s-label" for="question-title">Question title</label>
+    <div class="d-flex ps-relative">
+        <input class="flex--item s-input" type="text" id="question-title" placeholder="e.g. Why doesn’t Stack Overflow use a custom web font?"/>
+    </div>
+</form>
+`;
+
+const fixtures: Record<string, string> = {
+    javascript: javascriptFixture,
+    css: cssFixture,
+    html: htmlFixture,
+};
+
+const highlightFixture = (fixture: string, language: string) => {
+    const hljsLanguage = hljsLanguages[language];
+    hljs.registerLanguage(language, hljsLanguage);
+
+    const highlightedCode = hljs.highlight(fixture, { language }).value;
+
+    return `<code>${highlightedCode}</code>`;
+};
+
+const highlightedFixtures = Object.keys(fixtures).reduce(
+    (acc, language) => {
+        acc[language] = highlightFixture(fixtures[language], language);
+        return acc;
+    },
+    {} as Record<string, string>
+);
+
+export default highlightedFixtures;

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

@@ -0,0 +1,20 @@
+import { defaultOptions, runComponentTests } from "../../test/test-utils";
+import highlightedFixtures from "./code-block.fixtures";
+import "../../index";
+
+describe("code block", () => {
+    Object.keys(highlightedFixtures).forEach((language) => {
+        runComponentTests({
+            type: "visual",
+            tag: "pre",
+            baseClass: `s-code-block language-${language}`,
+            children: {
+                default: highlightedFixtures[language],
+            },
+            options: {
+                ...defaultOptions,
+                includeNullModifier: false,
+            },
+        });
+    });
+});

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

@@ -24,6 +24,7 @@ import "../../index";
                     ${component}
                 </div>
             `,
+            skippedTestids: [/is-disabled/],
         });
     });
 });

package/lib/components/description/description.less

@@ -3,7 +3,7 @@
         opacity: var(--_o-disabled-static);
     }
 
-    color: var(--fc-medium);
+    color: var(--fc-light);
     font-size: var(--fs-caption);
     padding: 0 var(--su2); // Helps the label visually line up with inputs
 }

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

@@ -0,0 +1,27 @@
+import { html } from "@open-wc/testing";
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+describe("expandable", () => {
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-expandable",
+        modifiers: {
+            global: ["is-expanded"],
+        },
+        children: {
+            default: `
+                <div class="s-expandable--content">
+                    <p class="mb8">Expandable: Lorem ipsum dolor sit amet, ex iudicabit necessitatibus usu, cetero laboramus concludaturque mel no, facilisis posidonium cu cum. Pro ex senserit dissentiunt, imperdiet intellegam at sed, ex pri dicit eruditi convenire. Est harum movet gubergren ei, errem dictas evertitur ea sit, at mei oratio eligendi. Ad vis legere possit, vis ne ipsum democritum appellantur. Nullam ancillae iudicabit his ad.</p>
+                </div>
+            `,
+        },
+        template: ({ component, testid }) => html`
+            <div class="ws2 p8" data-testid="${testid}">
+                <div><p>Before expandable content</p></div>
+                ${component}
+                <div><p>After expandable content</p></div>
+            </div>
+        `,
+    });
+});

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

@@ -0,0 +1,27 @@
+import { html } from "@open-wc/testing";
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+describe("expandable", () => {
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-expandable",
+        modifiers: {
+            global: ["is-expanded"],
+        },
+        children: {
+            default: `
+                <div class="s-expandable--content">
+                    <p class="mb8">Expandable: Lorem ipsum dolor sit amet, ex iudicabit necessitatibus usu, cetero laboramus concludaturque mel no, facilisis posidonium cu cum. Pro ex senserit dissentiunt, imperdiet intellegam at sed, ex pri dicit eruditi convenire. Est harum movet gubergren ei, errem dictas evertitur ea sit, at mei oratio eligendi. Ad vis legere possit, vis ne ipsum democritum appellantur. Nullam ancillae iudicabit his ad.</p>
+                </div>
+            `,
+        },
+        template: ({ component, testid }) => html`
+            <div class="ws2 p8" data-testid="${testid}">
+                <div><p>Before expandable content</p></div>
+                ${component}
+                <div><p>After expandable content</p></div>
+            </div>
+        `,
+    });
+});

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

@@ -12,7 +12,7 @@
     }
 
     .has-warning & {
-        --_ii-fc: var(--yellow-500);
+        --_ii-fc: var(--yellow-400);
     }
 
     .is-disabled & {

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

@@ -18,18 +18,19 @@
     .has-error & {
         --_im-fc: var(--red-400);
         --_im-a-fc: var(--red-600);
-        --_im-a-fc-hover: var(--red-600);
+        --_im-a-fc-hover: var(--red-500);
     }
 
     .has-success & {
         --_im-fc: var(--green-400);
         --_im-a-fc: var(--green-600);
-        --_im-a-fc-hover: var(--green-600);
+        --_im-a-fc-hover: var(--green-500);
     }
 
     .has-warning & {
-        --_im-fc: var(--yellow-600);
+        --_im-fc: var(--yellow-500);
         --_im-a-fc: var(--yellow-600);
+        --_im-a-fc-hover: var(--yellow-500);
     }
 
     // CHILD ELEMENTS

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.less

@@ -1,6 +1,6 @@
 .s-input,
 .s-textarea {
-    --_in-bc: var(--bc-dark);
+    --_in-bc: var(--bc-darker);
     --_in-bc-focus: var(--theme-secondary-400);
     --_in-bg: var(--white);
     --_in-br: var(--br-md);