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

package/lib/atomic/__snapshots__/color.less.test.ts.snap

@@ -904,6 +904,132 @@ exports[`atomic: color > should output v2 atomic css classes for colors 1`] = `
     color: var(--yellow-600) !important;
 }
 
+.bg-purple-100,
+.h\\\\:bg-purple-100:hover,
+.f\\\\:bg-purple-100:focus,
+.f\\\\:bg-purple-100:focus-within {
+    background-color: var(--purple-100) !important;
+}
+
+.bc-purple-100,
+.h\\\\:bc-purple-100:hover,
+.f\\\\:bc-purple-100:focus,
+.f\\\\:bc-purple-100:focus-within {
+    border-color: var(--purple-100) !important;
+}
+
+.fc-purple-100,
+.h\\\\:fc-purple-100:hover,
+.f\\\\:fc-purple-100:focus,
+.f\\\\:fc-purple-100:focus-within {
+    color: var(--purple-100) !important;
+}
+
+.bg-purple-200,
+.h\\\\:bg-purple-200:hover,
+.f\\\\:bg-purple-200:focus,
+.f\\\\:bg-purple-200:focus-within {
+    background-color: var(--purple-200) !important;
+}
+
+.bc-purple-200,
+.h\\\\:bc-purple-200:hover,
+.f\\\\:bc-purple-200:focus,
+.f\\\\:bc-purple-200:focus-within {
+    border-color: var(--purple-200) !important;
+}
+
+.fc-purple-200,
+.h\\\\:fc-purple-200:hover,
+.f\\\\:fc-purple-200:focus,
+.f\\\\:fc-purple-200:focus-within {
+    color: var(--purple-200) !important;
+}
+
+.bg-purple-300,
+.h\\\\:bg-purple-300:hover,
+.f\\\\:bg-purple-300:focus,
+.f\\\\:bg-purple-300:focus-within {
+    background-color: var(--purple-300) !important;
+}
+
+.bc-purple-300,
+.h\\\\:bc-purple-300:hover,
+.f\\\\:bc-purple-300:focus,
+.f\\\\:bc-purple-300:focus-within {
+    border-color: var(--purple-300) !important;
+}
+
+.fc-purple-300,
+.h\\\\:fc-purple-300:hover,
+.f\\\\:fc-purple-300:focus,
+.f\\\\:fc-purple-300:focus-within {
+    color: var(--purple-300) !important;
+}
+
+.bg-purple-400,
+.h\\\\:bg-purple-400:hover,
+.f\\\\:bg-purple-400:focus,
+.f\\\\:bg-purple-400:focus-within {
+    background-color: var(--purple-400) !important;
+}
+
+.bc-purple-400,
+.h\\\\:bc-purple-400:hover,
+.f\\\\:bc-purple-400:focus,
+.f\\\\:bc-purple-400:focus-within {
+    border-color: var(--purple-400) !important;
+}
+
+.fc-purple-400,
+.h\\\\:fc-purple-400:hover,
+.f\\\\:fc-purple-400:focus,
+.f\\\\:fc-purple-400:focus-within {
+    color: var(--purple-400) !important;
+}
+
+.bg-purple-500,
+.h\\\\:bg-purple-500:hover,
+.f\\\\:bg-purple-500:focus,
+.f\\\\:bg-purple-500:focus-within {
+    background-color: var(--purple-500) !important;
+}
+
+.bc-purple-500,
+.h\\\\:bc-purple-500:hover,
+.f\\\\:bc-purple-500:focus,
+.f\\\\:bc-purple-500:focus-within {
+    border-color: var(--purple-500) !important;
+}
+
+.fc-purple-500,
+.h\\\\:fc-purple-500:hover,
+.f\\\\:fc-purple-500:focus,
+.f\\\\:fc-purple-500:focus-within {
+    color: var(--purple-500) !important;
+}
+
+.bg-purple-600,
+.h\\\\:bg-purple-600:hover,
+.f\\\\:bg-purple-600:focus,
+.f\\\\:bg-purple-600:focus-within {
+    background-color: var(--purple-600) !important;
+}
+
+.bc-purple-600,
+.h\\\\:bc-purple-600:hover,
+.f\\\\:bc-purple-600:focus,
+.f\\\\:bc-purple-600:focus-within {
+    border-color: var(--purple-600) !important;
+}
+
+.fc-purple-600,
+.h\\\\:fc-purple-600:hover,
+.f\\\\:fc-purple-600:focus,
+.f\\\\:fc-purple-600:focus-within {
+    color: var(--purple-600) !important;
+}
+
 .bg-gold-100,
 .h\\\\:bg-gold-100:hover,
 .f\\\\:bg-gold-100:focus,
@@ -1928,6 +2054,54 @@ exports[`atomic: color > should output v2 atomic css classes for colors 1`] = `
         color: var(--yellow-600) !important;
     }
 
+    body.theme-system  .d\\\\:bg-purple-100 {
+        background-color: var(--purple-100) !important;
+    }
+
+    body.theme-system  .d\\\\:fc-purple-100 {
+        color: var(--purple-100) !important;
+    }
+
+    body.theme-system  .d\\\\:bg-purple-200 {
+        background-color: var(--purple-200) !important;
+    }
+
+    body.theme-system  .d\\\\:fc-purple-200 {
+        color: var(--purple-200) !important;
+    }
+
+    body.theme-system  .d\\\\:bg-purple-300 {
+        background-color: var(--purple-300) !important;
+    }
+
+    body.theme-system  .d\\\\:fc-purple-300 {
+        color: var(--purple-300) !important;
+    }
+
+    body.theme-system  .d\\\\:bg-purple-400 {
+        background-color: var(--purple-400) !important;
+    }
+
+    body.theme-system  .d\\\\:fc-purple-400 {
+        color: var(--purple-400) !important;
+    }
+
+    body.theme-system  .d\\\\:bg-purple-500 {
+        background-color: var(--purple-500) !important;
+    }
+
+    body.theme-system  .d\\\\:fc-purple-500 {
+        color: var(--purple-500) !important;
+    }
+
+    body.theme-system  .d\\\\:bg-purple-600 {
+        background-color: var(--purple-600) !important;
+    }
+
+    body.theme-system  .d\\\\:fc-purple-600 {
+        color: var(--purple-600) !important;
+    }
+
     body.theme-system  .d\\\\:bg-gold-100 {
         background-color: var(--gold-100) !important;
     }
@@ -2613,6 +2787,78 @@ body.theme-system .theme-dark__forced  .d\\\\:fc-yellow-600 {
     color: var(--yellow-600) !important;
 }
 
+body.theme-dark  .d\\\\:bg-purple-100,
+.theme-dark__forced  .d\\\\:bg-purple-100,
+body.theme-system .theme-dark__forced  .d\\\\:bg-purple-100 {
+    background-color: var(--purple-100) !important;
+}
+
+body.theme-dark  .d\\\\:fc-purple-100,
+.theme-dark__forced  .d\\\\:fc-purple-100,
+body.theme-system .theme-dark__forced  .d\\\\:fc-purple-100 {
+    color: var(--purple-100) !important;
+}
+
+body.theme-dark  .d\\\\:bg-purple-200,
+.theme-dark__forced  .d\\\\:bg-purple-200,
+body.theme-system .theme-dark__forced  .d\\\\:bg-purple-200 {
+    background-color: var(--purple-200) !important;
+}
+
+body.theme-dark  .d\\\\:fc-purple-200,
+.theme-dark__forced  .d\\\\:fc-purple-200,
+body.theme-system .theme-dark__forced  .d\\\\:fc-purple-200 {
+    color: var(--purple-200) !important;
+}
+
+body.theme-dark  .d\\\\:bg-purple-300,
+.theme-dark__forced  .d\\\\:bg-purple-300,
+body.theme-system .theme-dark__forced  .d\\\\:bg-purple-300 {
+    background-color: var(--purple-300) !important;
+}
+
+body.theme-dark  .d\\\\:fc-purple-300,
+.theme-dark__forced  .d\\\\:fc-purple-300,
+body.theme-system .theme-dark__forced  .d\\\\:fc-purple-300 {
+    color: var(--purple-300) !important;
+}
+
+body.theme-dark  .d\\\\:bg-purple-400,
+.theme-dark__forced  .d\\\\:bg-purple-400,
+body.theme-system .theme-dark__forced  .d\\\\:bg-purple-400 {
+    background-color: var(--purple-400) !important;
+}
+
+body.theme-dark  .d\\\\:fc-purple-400,
+.theme-dark__forced  .d\\\\:fc-purple-400,
+body.theme-system .theme-dark__forced  .d\\\\:fc-purple-400 {
+    color: var(--purple-400) !important;
+}
+
+body.theme-dark  .d\\\\:bg-purple-500,
+.theme-dark__forced  .d\\\\:bg-purple-500,
+body.theme-system .theme-dark__forced  .d\\\\:bg-purple-500 {
+    background-color: var(--purple-500) !important;
+}
+
+body.theme-dark  .d\\\\:fc-purple-500,
+.theme-dark__forced  .d\\\\:fc-purple-500,
+body.theme-system .theme-dark__forced  .d\\\\:fc-purple-500 {
+    color: var(--purple-500) !important;
+}
+
+body.theme-dark  .d\\\\:bg-purple-600,
+.theme-dark__forced  .d\\\\:bg-purple-600,
+body.theme-system .theme-dark__forced  .d\\\\:bg-purple-600 {
+    background-color: var(--purple-600) !important;
+}
+
+body.theme-dark  .d\\\\:fc-purple-600,
+.theme-dark__forced  .d\\\\:fc-purple-600,
+body.theme-system .theme-dark__forced  .d\\\\:fc-purple-600 {
+    color: var(--purple-600) !important;
+}
+
 body.theme-dark  .d\\\\:bg-gold-100,
 .theme-dark__forced  .d\\\\:bg-gold-100,
 body.theme-system .theme-dark__forced  .d\\\\:bg-gold-100 {

package/lib/atomic/typography.less

@@ -191,6 +191,10 @@ p {
     overflow-wrap: normal !important;
 }
 
+.ow-anywhere {
+    overflow-wrap: anywhere !important;
+}
+
 .ow-break-word {
     overflow-wrap: break-word !important;
 }

package/lib/base/body.less

@@ -18,7 +18,7 @@
 
 html,
 body {
-    color: var(--theme-body-font-color);
+    color: var(--theme-body-font-color, var(--black-600));
     font-family: var(--theme-body-font-family);
     font-size: var(--fs-base);
     line-height: var(--lh-base);
@@ -34,7 +34,7 @@ body {
 body {
     box-sizing: border-box;
     min-height: 100%;
-    background-color: var(--theme-background-color);
+    background-color: var(--theme-background-color, var(--white));
 
     *,
     *:before,

package/lib/components/activity-indicator/activity-indicator.a11y.test.ts

@@ -9,6 +9,6 @@ describe("activity-indicator", () => {
         children: {
             default: `<div class="v-visible-sr">New activity</div>`,
             new: `new<div class="v-visible-sr">New activity</div>`,
-        }
+        },
     });
 });

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

@@ -1,27 +1,40 @@
 .s-activity-indicator {
     --_ai-focus-ring: var(--focus-ring);
     --_ai-bg: var(--theme-secondary-400);
-    --_ai-fc: var(--_white-static);
+    --_ai-fc: var(--white);
 
-    // CONTEXTUAL STYLES
     .highcontrast-mode({
-        --_ai-fc: var(--white);
+        --_ai-bg: var(--theme-secondary-500);
     });
 
     // VARIANTS
     &&__danger {
         --_ai-bg: var(--red-400);
         --_ai-focus-ring: var(--focus-ring-error);
+
+        .highcontrast-mode({
+            --_ai-bg: var(--red-500);
+        });
     }
 
     &&__success {
         --_ai-bg: var(--green-400);
         --_ai-focus-ring: var(--focus-ring-success);
+
+        .highcontrast-mode({
+            --_ai-bg: var(--green-500);
+        });
     }
 
     &&__warning {
-        --_ai-bg: var(--yellow-500);
+        --_ai-bg: var(--yellow-400);
+        --_ai-fc: var(--_black-static);
         --_ai-focus-ring: var(--focus-ring-warning);
+
+        .highcontrast-mode({
+            --_ai-bg: var(--yellow-500); // needs to be here to override default high contrast
+            --_ai-fc: var(--white);
+        });
     }
 
     background-color: var(--_ai-bg);

package/lib/components/anchor/anchor.less

@@ -15,28 +15,32 @@
     // VARIANTS
     &&__danger {
         --_an-a-fc: var(--red-400);
-        --_an-a-fc-hover: var(--red-400);
+        --_an-a-fc-hover: var(--red-500);
+        --_an-a-fc-visited: var(--red-600);
     }
 
     &&__default {
-        --_an-a-fc: var(--theme-link-color);
-        --_an-a-fc-hover: var(--theme-link-color-hover);
-        --_an-a-fc-visited: var(--theme-link-color-visited);
+        --_an-a-fc: var(--theme-link-color, var(--theme-secondary-400));
+        --_an-a-fc-hover: var(--theme-link-color-hover, var(--theme-secondary-500));
+        --_an-a-fc-visited: var(--theme-link-color-visited, var(--theme-secondary-600));
     }
 
     &&__grayscale {
-        --_an-a-fc: var(--black-500);
+        --_an-a-fc: var(--black-400);
         --_an-a-fc-hover: var(--black-500);
+        --_an-a-fc-visited: var(--black-600);
     }
 
     &&__inherit {
         --_an-a-fc: inherit;
         --_an-a-fc-hover: inherit;
+        --_an-a-fc-visited: inherit;
     }
 
     &&__muted {
         --_an-a-fc: var(--black-400);
-        --_an-a-fc-hover: var(--black-400);
+        --_an-a-fc-hover: var(--black-500);
+        --_an-a-fc-visited: var(--black-600);
     }
 
     &&__danger,

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

@@ -45,9 +45,5 @@ describe("anchors", () => {
                 ${testid}: ${component}
             </div>
         `,
-        skippedTestids: [
-            // TODO resolve webkit failures for these. See https://github.com/StackExchange/Stacks/actions/runs/5406068986/jobs/9822478155?pr=1404
-            /s-anchors/,
-        ],
     });
 });

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

@@ -47,8 +47,5 @@ describe("avatar", () => {
                 ${component}
             </div>
         `,
-        skippedTestids: [
-            /-letter/, // TODO: resolve font-family thrashing issues
-        ],
     });
 });

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

@@ -24,7 +24,7 @@ describe("badge", () => {
                     Altruist
                 </span>`,
             },
-            tag: "span"
+            tag: "span",
         });
     });
 
@@ -40,7 +40,7 @@ describe("badge", () => {
             ...defaultOptions,
             includeNullModifier: false,
         },
-        tag: "span"
+        tag: "span",
     });
 
     // Icon badges

package/lib/components/badge/badge.less

@@ -53,24 +53,20 @@
     &&__silver,
     &&__bronze {
         --_ba-fc: var(--black-500);
-
-        .highcontrast-mode({
-            --_ba-fc: var(--black-600);
-        });
     }
 
     &&__gold {
-        --_ba-bc: var(--gold-400);
+        --_ba-bc: var(--gold-300);
         --_ba-bg: var(--gold-100);
     }
 
     &&__silver {
-        --_ba-bc: var(--silver-400);
+        --_ba-bc: var(--silver-300);
         --_ba-bg: var(--silver-100);
     }
 
     &&__bronze {
-        --_ba-bc: var(--bronze-400);
+        --_ba-bc: var(--bronze-300);
         --_ba-bg: var(--bronze-100);
     }
 
@@ -93,20 +89,20 @@
     }
 
     &&__bounty {
-        --_ba-bg: var(--blue-500);
+        --_ba-bg: var(--blue-400);
     }
 
     &&__important {
-        --_ba-bg: var(--red-500);
+        --_ba-bg: var(--red-400);
     }
 
     &&__rep {
-        --_ba-bc: var(--green-400);
+        --_ba-bc: var(--green-300);
         --_ba-fc: var(--green-400);
     }
 
     &&__rep-down {
-        --_ba-bc: var(--red-400);
+        --_ba-bc: var(--red-300);
         --_ba-fc: var(--red-400);
     }
 
@@ -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 {
@@ -166,8 +162,8 @@
 
     &&__staff {
         // Staff badges are always "Stack Overflow Orange"
-        --_ba-bc: var(--orange-400);
-        --_ba-bg: var(--orange-300);
+        --_ba-bc: 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-300);
+        --_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-300);
+        --_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-300);
+        --_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-300);
+        --_ba-bg: var(--black-200);
+        --_ba-fc: var(--black-500);
 
         &.s-badge__filled {
             --_ba-bg: var(--black-500);

package/lib/components/banner/banner.less

@@ -37,8 +37,8 @@
     inset: 0 0 auto 0;
     padding: var(--su12);
     position: fixed;
-    -webkit-transform: translate3d(0, calc(var(--theme-topbar-height) * var(--_no-x-offset)), 0);
-    transform: translate3d(0, calc(var(--theme-topbar-height) * var(--_no-x-offset)), 0);
+    -webkit-transform: translate3d(0, calc(var(--theme-topbar-height, calc(var(--su-static48) + var(--su-static8))) * var(--_no-x-offset)), 0);
+    transform: translate3d(0, calc(var(--theme-topbar-height, calc(var(--su-static48) + var(--su-static8))) * var(--_no-x-offset)), 0);
     width: 100%;
     z-index: calc(var(--zi-navigation-fixed) - 1); // Tuck below topbar
 }

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"]],
@@ -22,8 +22,5 @@ describe("button", () => {
             default: "Ask question",
         },
         tag: "button",
-        excludedTestids: [
-            /primary-outlined/, // This combination is not supported
-        ],
     });
 });