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

package/lib/components/badge/badge.less

@@ -53,10 +53,6 @@
     &&__silver,
     &&__bronze {
         --_ba-fc: var(--black-500);
-
-        .highcontrast-mode({
-            --_ba-fc: var(--black-600);
-        });
     }
 
     &&__gold {
@@ -93,11 +89,11 @@
     }
 
     &&__bounty {
-        --_ba-bg: var(--blue-500);
+        --_ba-bg: var(--blue-400);
     }
 
     &&__important {
-        --_ba-bg: var(--red-500);
+        --_ba-bg: var(--red-400);
     }
 
     &&__rep {
@@ -118,8 +114,8 @@
     // Users
     &&__admin {
         --_ba-bc: var(--theme-primary-300);
-        --_ba-bg: var(--theme-primary-200);
-        --_ba-fc: var(--theme-primary-600);
+        --_ba-bg: var(--theme-primary-100);
+        --_ba-fc: var(--theme-primary-500);
     }
 
     &&__moderator {
@@ -167,7 +163,7 @@
     &&__staff {
         // Staff badges are always "Stack Overflow Orange"
         --_ba-bc: var(--orange-400);
-        --_ba-bg: var(--orange-300);
+        --_ba-bg: var(--orange-200);
         --_ba-fc: var(--orange-600);
     }
 
@@ -180,35 +176,31 @@
     }
 
     &&__danger {
-        --_ba-bc: var(--red-500);
-        --_ba-bg: var(--red-300);
+        --_ba-bc: var(--red-400);
+        --_ba-bg: var(--red-200);
         --_ba-fc: var(--red-600);
 
         &.s-badge__filled {
             --_ba-bg: var(--red-400);
-            --_ba-fc: var(--_white-static);
-
-            .highcontrast-mode({
-                --_ba-fc: var(--white);
-            });
+            --_ba-fc: var(--white);
         }
     }
     &&__info {
-        --_ba-bc: var(--blue-500);
-        --_ba-bg: var(--blue-300);
+        --_ba-bc: var(--blue-400);
+        --_ba-bg: var(--blue-200);
         --_ba-fc: var(--blue-600);
     }
 
     &&__warning {
-        --_ba-bc: var(--yellow-500);
-        --_ba-bg: var(--yellow-300);
+        --_ba-bc: var(--yellow-400);
+        --_ba-bg: var(--yellow-200);
         --_ba-fc: var(--yellow-600);
     }
 
     &&__muted {
-        --_ba-bc: var(--black-500);
-        --_ba-bg: var(--black-225);
-        --_ba-fc: var(--black-600);
+        --_ba-bc: var(--black-400);
+        --_ba-bg: var(--black-200);
+        --_ba-fc: var(--black-500);
 
         &.s-badge__filled {
             --_ba-bg: var(--black-500);

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

@@ -1,6 +1,6 @@
 a.s-block-link,
 .s-block-link {
-    @bl-bs: inset var(--_li-block-bs-offset-x, 3px) 0 0 var(--theme-primary);
+    --_bl-bs-color: var(--theme-primary);
     --_bl-bg: transparent;
     --_bl-fc: var(--black-500);
     --_bl-fc-hover: var(--black-600);
@@ -31,10 +31,10 @@ a.s-block-link,
             }
 
             &:focus-visible {
-                box-shadow: @bl-bs, 0 0 0 var(--su-static4) var(--focus-ring-muted);
+                box-shadow: inset var(--_li-block-bs-offset-x, 3px) 0 0 var(--_bl-bs-color), 0 0 0 var(--su-static4) var(--focus-ring-muted);
             }
 
-            box-shadow: @bl-bs;
+            box-shadow: inset var(--_li-block-bs-offset-x, 3px) 0 0 var(--_bl-bs-color);
         }
     }
 
@@ -48,6 +48,7 @@ a.s-block-link,
     &&__danger {
         --_bl-fc: var(--red-400);
         --_bl-fc-hover: var(--red-500);
+        --_bl-fc-visited: var(--red-500);
     }
 
     &:active,
@@ -59,7 +60,7 @@ a.s-block-link,
     }
 
     &:visited {
-        color: var(--_bl-fc-focus);
+        color: var(--_bl-fc-visited);
     }
 
     @focus-styles();

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

@@ -5,7 +5,7 @@ describe("button", () => {
     runComponentTests({
         type: "a11y",
         baseClass: "s-btn",
-        variants: ["danger", "muted", "primary"],
+        variants: ["danger", "muted"],
         modifiers: {
             primary: ["filled", "outlined"],
             secondary: [...["xs", "sm", "md"], ...["dropdown", "icon"]],
@@ -21,9 +21,6 @@ describe("button", () => {
         children: {
             default: "Ask question",
         },
-        tag: "button",
-        excludedTestids: [
-            /primary-outlined/, // This combination is not supported
-        ],
+        tag: "button"
     });
 });

package/lib/components/button/button.less

@@ -19,15 +19,15 @@
     // 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);
+    --_bu-filled-bg-active: var(--theme-button-primary-active-background-color);
+    --_bu-filled-bg-hover: var(--theme-button-primary-hover-background-color);
+    --_bu-filled-bg-selected: var(--theme-button-primary-selected-background-color);
+    --_bu-filled-fc: var(--theme-button-primary-color);
+    --_bu-filled-fc-active: var(--theme-button-primary-hover-color);
+    --_bu-filled-fc-hover: var(--theme-button-primary-hover-color);
+    --_bu-filled-fc-selected: var(--theme-button-primary-selected-color);
     // Outlined
     --_bu-outlined-bc: var(--theme-button-outlined-border-color);
     --_bu-outlined-bg: var(--theme-button-outlined-background-color);
@@ -38,20 +38,18 @@
     --_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);
+    --_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);
     });
 
     // 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,24 +285,26 @@
         --_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);
@@ -326,30 +315,11 @@
         --_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-number-fc-selected: var(--theme-button-primary-number-color);
 
         .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"]],
@@ -44,9 +44,6 @@ 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/description/description.a11y.test.ts

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

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

@@ -53,28 +53,18 @@
 
         // TODO: include child component class (without variant) on selector
         &__beta {
-            --_la-status-bg: var(--blue-300);
+            --_la-status-bg: var(--blue-200);
             --_la-status-fc: var(--blue-500);
         }
 
         &__new {
-            --_la-status-bg: var(--green-300);
+            --_la-status-bg: var(--green-200);
             --_la-status-fc: var(--green-500);
-
-            .dark-mode({
-                --_la-status-bg: var(--green-200);
-                --_la-status-fc: var(--green-600);
-            });
         }
 
         &__required {
-            --_la-status-bg: var(--red-300);
+            --_la-status-bg: var(--red-200);
             --_la-status-fc: var(--red-500);
-
-            .dark-mode({
-                --_la-status-bg: var(--red-200);
-                --_la-status-fc: var(--red-600);
-            });
         }
 
         background-color: var(--_la-status-bg);

package/lib/components/link-preview/link-preview.a11y.test.ts

@@ -0,0 +1,48 @@
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+const getChild = (child?: string): string => {
+    return `
+        <div class="s-link-preview--header">
+            <div class="s-link-preview--icon">👋</div>
+            <div>
+                <a href="#" class="s-link-preview--title">
+                    Using hooks for a simple fetch request and breaking the rules of hooks, unsure how?
+                </a>
+                <div class="s-link-preview--details">
+                    Issue submitted by Ricky Otero on <relative-time datetime="2019-08-12T04:05:22Z" title="Aug 12, 2019, 12:05 AM EDT">Aug 12, 2019</relative-time> • <strong>RESOLVED</strong>
+                </div>
+            </div>
+        </div>
+        ${
+            child
+                ? child
+                : `
+            <div class="s-link-preview--body">
+                <p>I'm trying to create a simple fetch with hooks from an AWS database. At the moment it errors out and the only reason I can see is because it breaks the rules of hooks but I'm not sure how. It's at the top level of this functional component and it's not called inside an event handler.</p>
+                <p>The result of this call (an array of user data), needs to be exported as a function and called in another file.</p>
+                <p>If anyone can spot something I have missed and can highlighted how I'm breaking the rules of hooks I'd be grateful!</p>
+                <p>Thanks!</p>
+            </div>
+        `
+        }
+        <div class="s-link-preview--footer">
+            <a href="#" class="s-link-preview--url">https://stackoverflow.atlassian.net/projects/SREREQ/queues/custom/1</a>
+            <a href="#" class="s-link-preview--misc">Privacy notice</a>
+        </div>
+    `;
+};
+describe("link preview", () => {
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-link-preview",
+        children: {
+            default: getChild(),
+            code: getChild(`
+                <div class="s-link-preview--code">
+                    <pre class="language-js s-code-block" tabindex="0"><code class="language-js s-code-block"><span class="hljs-meta">'use strict'</span>;</code></pre>
+                </div>
+            `),
+        },
+    });
+});

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

@@ -1,6 +1,9 @@
 .s-link-preview {
+    --_lp-details-fc: var(--black-400);
     --_lp-details-mt: var(--su2);
+    --_lp-footer-bg: var(--black-100);
     --_lp-footer-fd: unset;
+    --_lp-header-bg: var(--black-100);
     --_lp-misc-pl: var(--su4);
     --_lp-misc-pt: unset;
 
@@ -12,6 +15,12 @@
         --_lp-misc-pt: var(--su2);
     });
 
+    .highcontrast-mode({
+        --_lp-details-fc: var(--black-600);
+        --_lp-footer-bg: var(--black-050);
+        --_lp-header-bg: var(--black-050);
+    });
+
     // CHILD ELEMENTS
     & &--details,
     & &--footer {
@@ -25,7 +34,7 @@
                 color: var(--black-500);
             }
 
-            color: var(--black-400);
+            color: var(--black-600);
             cursor: pointer;
             text-decoration: none;
         }
@@ -49,16 +58,16 @@
     }
 
     & &--details {
+        color: var(--_lp-details-fc);
         margin-top: var(--_lp-details-mt);
 
-        color: var(--black-400);
         font-size: var(--fs-caption);
     }
 
     & &--footer {
+        background: var(--_lp-footer-bg);
         flex-direction: var(--_lp-footer-fd);
 
-        background: var(--black-100);
         border-bottom-left-radius: var(--br-sm);
         border-bottom-right-radius: var(--br-sm);
         border-top: var(--su-static1) solid var(--bc-medium);
@@ -69,7 +78,7 @@
     }
 
     & &--header {
-        background: var(--black-100);
+        background: var(--_lp-header-bg);
         border-bottom: var(--su-static1) solid var(--bc-medium);
         border-top-left-radius: var(--br-sm);
         border-top-right-radius: var(--br-sm);

package/lib/components/link-preview/link-preview.visual.test.ts

@@ -0,0 +1,52 @@
+import { html } from "@open-wc/testing";
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+const getChild = (child?: string): string => {
+    return `
+        <div class="s-link-preview--header">
+            <div class="s-link-preview--icon">👋</div>
+            <div>
+                <a href="#" class="s-link-preview--title">
+                    Using hooks for a simple fetch request and breaking the rules of hooks, unsure how?
+                </a>
+                <div class="s-link-preview--details">
+                    Issue submitted by Ricky Otero on <relative-time datetime="2019-08-12T04:05:22Z" title="Aug 12, 2019, 12:05 AM EDT">Aug 12, 2019</relative-time> • <strong>RESOLVED</strong>
+                </div>
+            </div>
+        </div>
+        ${
+            child
+                ? child
+                : `
+            <div class="s-link-preview--body">
+                <p>I'm trying to create a simple fetch with hooks from an AWS database. At the moment it errors out and the only reason I can see is because it breaks the rules of hooks but I'm not sure how. It's at the top level of this functional component and it's not called inside an event handler.</p>
+                <p>The result of this call (an array of user data), needs to be exported as a function and called in another file.</p>
+                <p>If anyone can spot something I have missed and can highlighted how I'm breaking the rules of hooks I'd be grateful!</p>
+                <p>Thanks!</p>
+            </div>
+        `
+        }
+        <div class="s-link-preview--footer">
+            <a href="#" class="s-link-preview--url">https://stackoverflow.atlassian.net/projects/SREREQ/queues/custom/1</a>
+            <a href="#" class="s-link-preview--misc">Privacy notice</a>
+        </div>
+    `;
+};
+describe("link preview", () => {
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-link-preview",
+        children: {
+            default: getChild(),
+            code: getChild(`
+                <div class="s-link-preview--code">
+                    <pre class="language-js s-code-block" tabindex="0"><code class="language-js s-code-block"><span class="hljs-meta">'use strict'</span>;</code></pre>
+                </div>
+            `),
+        },
+        template: ({ component, testid }) => html`
+            <div class="ws8 p8" data-testid="${testid}">${component}</div>
+        `,
+    });
+});

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

@@ -0,0 +1,17 @@
+import { runComponentTests } from "../../test/test-utils";
+import "../../index";
+
+describe("notice", () => {
+    runComponentTests({
+        type: "a11y",
+        baseClass: "s-notice",
+        variants: ["info", "success", "warning", "danger"],
+        modifiers: {
+            primary: ["important"],
+        },
+        children: {
+            default: `Test notice`,
+        },
+        tag: "aside"
+    });
+});