@stackoverflow/stacks 1.10.2 → 2.0.0-rc.0

package/lib/components/badge/badge.less

@@ -1,8 +1,8 @@
 .s-badge {
     --_ba-as: unset;
     --_ba-bc: var(--bc-medium);
-    --_ba-bg: var(--black-050);
-    --_ba-fc: var(--black-700);
+    --_ba-bg: var(--black-150);
+    --_ba-fc: var(--black-500);
     --_ba-fs: var(--fs-caption);
     --_ba-g: 0.3em;
     --_ba-lh: 2;
@@ -52,26 +52,26 @@
     &&__gold,
     &&__silver,
     &&__bronze {
-        --_ba-fc: var(--black-700);
+        --_ba-fc: var(--black-500);
 
         .highcontrast-mode({
-            --_ba-fc: var(--black-900);
+            --_ba-fc: var(--black-600);
         });
     }
 
     &&__gold {
-        --_ba-bc: var(--gold-darker);
-        --_ba-bg: var(--gold-lighter);
+        --_ba-bc: var(--gold-400);
+        --_ba-bg: var(--gold-100);
     }
 
     &&__silver {
-        --_ba-bc: var(--silver-darker);
-        --_ba-bg: var(--silver-lighter);
+        --_ba-bc: var(--silver-400);
+        --_ba-bg: var(--silver-100);
     }
 
     &&__bronze {
-        --_ba-bc: var(--bronze-darker);
-        --_ba-bg: var(--bronze-lighter);
+        --_ba-bc: var(--bronze-400);
+        --_ba-bg: var(--bronze-100);
     }
 
     // Number counts
@@ -93,39 +93,39 @@
     }
 
     &&__bounty {
-        --_ba-bg: var(--blue-600);
+        --_ba-bg: var(--blue-500);
     }
 
     &&__important {
-        --_ba-bg: var(--red-600);
+        --_ba-bg: var(--red-500);
     }
 
     &&__rep {
         --_ba-bc: var(--green-400);
-        --_ba-fc: var(--green-500);
+        --_ba-fc: var(--green-400);
     }
 
     &&__rep-down {
         --_ba-bc: var(--red-400);
-        --_ba-fc: var(--red-500);
+        --_ba-fc: var(--red-400);
     }
 
     &&__votes:not(&__answered) {
-        --_ba-bc: var(--black-150);
-        --_ba-fc: var(--black-700);
+        --_ba-bc: var(--black-250);
+        --_ba-fc: var(--black-500);
     }
 
     // Users
     &&__admin {
-        --_ba-bc: var(--theme-primary-200);
-        --_ba-bg: var(--theme-primary-075);
-        --_ba-fc: var(--theme-primary-800);
+        --_ba-bc: var(--theme-primary-300);
+        --_ba-bg: var(--theme-primary-200);
+        --_ba-fc: var(--theme-primary-600);
     }
 
     &&__moderator {
-        --_ba-bc: var(--theme-secondary-200);
-        --_ba-bg: var(--theme-secondary-075);
-        --_ba-fc: var(--theme-secondary-800);
+        --_ba-bc: var(--theme-secondary-300);
+        --_ba-bg: var(--theme-secondary-200);
+        --_ba-fc: var(--theme-secondary-600);
         --_ba-g:  calc(var(--su-static4) - var(--su-static1)); // 3px
         // :before icon
         --_ba-before-h: calc(var(--su-static16) - var(--su-static2)); // 14px
@@ -166,9 +166,9 @@
 
     &&__staff {
         // Staff badges are always "Stack Overflow Orange"
-        --_ba-bc: var(--orange-300);
-        --_ba-bg: var(--orange-100);
-        --_ba-fc: var(--orange-900);
+        --_ba-bc: var(--orange-400);
+        --_ba-bg: var(--orange-300);
+        --_ba-fc: var(--orange-600);
     }
 
     // VARIANTS
@@ -180,13 +180,13 @@
     }
 
     &&__danger {
-        --_ba-bc: var(--red-600);
-        --_ba-bg: var(--red-100);
-        --_ba-fc: var(--red-900);
+        --_ba-bc: var(--red-500);
+        --_ba-bg: var(--red-300);
+        --_ba-fc: var(--red-600);
 
         &.s-badge__filled {
-            --_ba-bg: var(--red-500);
-            --_ba-fc: @white;
+            --_ba-bg: var(--red-400);
+            --_ba-fc: var(--_white-static);
 
             .highcontrast-mode({
                 --_ba-fc: var(--white);
@@ -194,24 +194,24 @@
         }
     }
     &&__info {
-        --_ba-bc: var(--blue-600);
-        --_ba-bg: var(--blue-100);
-        --_ba-fc: var(--blue-900);
+        --_ba-bc: var(--blue-500);
+        --_ba-bg: var(--blue-300);
+        --_ba-fc: var(--blue-600);
     }
 
     &&__warning {
-        --_ba-bc: var(--yellow-600);
-        --_ba-bg: var(--yellow-100);
-        --_ba-fc: var(--yellow-900);
+        --_ba-bc: var(--yellow-500);
+        --_ba-bg: var(--yellow-300);
+        --_ba-fc: var(--yellow-600);
     }
 
     &&__muted {
-        --_ba-bc: var(--black-600);
-        --_ba-bg: var(--black-100);
-        --_ba-fc: var(--black-900);
+        --_ba-bc: var(--black-500);
+        --_ba-bg: var(--black-225);
+        --_ba-fc: var(--black-600);
 
         &.s-badge__filled {
-            --_ba-bg: var(--black-700);
+            --_ba-bg: var(--black-500);
             --_ba-fc: var(--white);
         }
     }

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

@@ -24,7 +24,18 @@ const template = ({ component, testid }: any) => html`
 `;
 
 describe("badge", () => {
-    // Award badges (Default/badge counts)
+    // Base badge
+    runComponentTests({
+        type: "visual",
+        baseClass: "s-badge",
+        children: {
+            default: `base badge`,
+        },
+        tag: "span",
+        template,
+    });
+
+    // Award badges
     variants.blings.map((bling) => {
         runComponentTests({
             type: "visual",
@@ -32,9 +43,14 @@ describe("badge", () => {
             variants: [bling],
             children: {
                 default: `<span class="s-award-bling s-award-bling__${bling}">
-                    Altruist
+                    with bling
                 </span>`,
             },
+            options: {
+                ...defaultOptions,
+                includeNullVariant: false,
+                includeNullModifier: false,
+            },
             tag: "span",
             template,
         });
@@ -50,6 +66,7 @@ describe("badge", () => {
         },
         options: {
             ...defaultOptions,
+            includeNullVariant: false,
             includeNullModifier: false,
         },
         tag: "span",
@@ -81,9 +98,6 @@ describe("badge", () => {
         type: "visual",
         baseClass: "s-badge",
         variants: variants.states.filled,
-        modifiers: {
-            primary: ["icon"],
-        },
         children: {
             default: "filled",
             //     icon: Icons.IconEyeOffSm,  // TODO fix the icon imports
@@ -108,6 +122,10 @@ describe("badge", () => {
         children: {
             default: "user badge",
         },
+        options: {
+            ...defaultOptions,
+            includeNullVariant: false,
+        },
         tag: "span",
         template,
     });
@@ -122,6 +140,10 @@ describe("badge", () => {
         children: {
             default: "size badge",
         },
+        options: {
+            ...defaultOptions,
+            includeNullModifier: false,
+        },
         tag: "span",
         template,
     });

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

@@ -39,7 +39,6 @@ describe("block-link", () => {
             ...defaultOptions,
             includeNullModifier: false,
         },
-        skippedTestids: ["s-block-link-dark-danger"],
         template: blockLinkTemplate,
     });
 
@@ -58,12 +57,6 @@ describe("block-link", () => {
             ...defaultOptions,
             includeNullVariant: false,
         },
-        skippedTestids: [
-            "s-block-link-dark-left-is-selected-danger",
-            "s-block-link-dark-right-is-selected-danger",
-            "s-block-link-light-left-is-selected-danger",
-            "s-block-link-light-right-is-selected-danger",
-        ],
         template: blockLinkTemplate,
     });
 });

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

@@ -1,22 +1,22 @@
 a.s-block-link,
 .s-block-link {
-    @bl-bs: inset var(--_li-block-bs-offset-x, 3px) 0 0 var(--theme-primary-color);
+    @bl-bs: inset var(--_li-block-bs-offset-x, 3px) 0 0 var(--theme-primary);
     --_bl-bg: transparent;
-    --_bl-fc: var(--black-600);
-    --_bl-fc-hover: var(--black-800);
+    --_bl-fc: var(--black-500);
+    --_bl-fc-hover: var(--black-600);
     --_bl-fc-visited: var(--_bl-fc);
 
     // CONTEXTUAL STYLES
     .dark-mode({
         &.is-selected {
-            --_bl-bg: var(--black-025);
+            --_bl-bg: var(--black-100);
         }
     });
 
     // STATES
     &.is-selected {
-        --_bl-bg: var(--black-050);
-        --_bl-fc: var(--black-800);
+        --_bl-bg: var(--black-150);
+        --_bl-fc: var(--black-600);
 
         font-weight: bold;
     }
@@ -46,8 +46,8 @@ a.s-block-link,
 
     // VARIANTS
     &&__danger {
-        --_bl-fc: var(--red-500);
-        --_bl-fc-hover: var(--red-700);
+        --_bl-fc: var(--red-400);
+        --_bl-fc-hover: var(--red-500);
     }
 
     &:active,

package/lib/components/breadcrumbs/breadcrumbs.less

@@ -34,7 +34,7 @@
     }
 
     align-items: flex-start;
-    color: var(--black-200);
+    color: var(--black-300);
     display: flex;
     flex-wrap: wrap;
     font-size: var(--fs-caption);

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

@@ -25,8 +25,5 @@ describe("button", () => {
         excludedTestids: [
             /primary-outlined/, // This combination is not supported
         ],
-        skippedTestids: [
-            /s-btn-dark/, // TODO remove when contrast bugs are fixed
-        ],
     });
 });

package/lib/components/button/button.less

@@ -49,8 +49,8 @@
         --_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-100);
-            --_bu-filled-bg-hover: var(--theme-secondary-300);
+            --_bu-bg-hover: var(--theme-secondary-300);
+            --_bu-filled-bg-hover: var(--theme-secondary-400);
         }
     });
 
@@ -232,26 +232,26 @@
     }
 
     &&__danger {
-        --_bu-bg-active: var(--red-100);
-        --_bu-bg-hover: var(--red-050);
-        --_bu-bg-selected: var(--red-200);
-        --_bu-fc: var(--red-600);
+        --_bu-bg-active: var(--red-300);
+        --_bu-bg-hover: var(--red-200);
+        --_bu-bg-selected: var(--red-300);
+        --_bu-fc: var(--red-500);
         --_bu-fc-active: var(--_bu-fc);
-        --_bu-fc-hover: var(--red-700);
-        --_bu-fc-selected: var(--red-900);
+        --_bu-fc-hover: var(--red-500);
+        --_bu-fc-selected: var(--red-600);
         --_bu-focus-ring: 0 0 0 var(--su-static4) var(--focus-ring-error);
         --_bu-filled-bc: transparent;
         --_bu-filled-bc-selected: var(--_bu-filled-bc);
-        --_bu-filled-bg: var(--red-500);
-        --_bu-filled-bg-active: var(--red-700);
-        --_bu-filled-bg-hover: var(--red-600);
-        --_bu-filled-bg-selected: var(--red-800);
+        --_bu-filled-bg: var(--red-400);
+        --_bu-filled-bg-active: var(--red-500);
+        --_bu-filled-bg-hover: var(--red-500);
+        --_bu-filled-bg-selected: var(--red-600);
         --_bu-filled-fc: var(--white);
         --_bu-filled-fc-active: var(--_bu-filled-fc);
         --_bu-filled-fc-hover: var(--_bu-filled-fc);
         --_bu-filled-fc-selected: var(--_bu-filled-fc);
-        --_bu-outlined-bc: var(--red-500);
-        --_bu-outlined-bc-selected: var(--red-700);
+        --_bu-outlined-bc: var(--red-400);
+        --_bu-outlined-bc-selected: var(--red-500);
         --_bu-outlined-bg-selected: var(--_bu-bg-selected);
         --_bu-outlined-fc-selected: var(--_bu-fc-selected);
 
@@ -274,39 +274,39 @@
     }
 
     &&__muted {
-        --_bu-bg-active: var(--black-050);
-        --_bu-bg-hover: var(--black-025);
-        --_bu-bg-selected: var(--black-075);
-        --_bu-fc: var(--black-700);
+        --_bu-bg-active: var(--black-150);
+        --_bu-bg-hover: var(--black-100);
+        --_bu-bg-selected: var(--black-200);
+        --_bu-fc: var(--black-500);
         --_bu-fc-active: var(--_bu-fc);
-        --_bu-fc-hover: var(--black-700);
-        --_bu-fc-selected: var(--black-700);
+        --_bu-fc-hover: var(--black-500);
+        --_bu-fc-selected: var(--black-500);
         --_bu-focus-ring: 0 0 0 var(--su-static4) var(--focus-ring-muted);
         // The filled modifier on the muted button is deprecated and is to be
         // removed in Stacks Classic v2
         --_bu-filled-bc: transparent;
         --_bu-filled-bc-selected: var(--_bu-filled-bc);
-        --_bu-filled-bg: var(--black-100);
-        --_bu-filled-bg-active: var(--black-200);
-        --_bu-filled-bg-hover: var(--black-150);
+        --_bu-filled-bg: var(--black-225);
+        --_bu-filled-bg-active: var(--black-300);
+        --_bu-filled-bg-hover: var(--black-250);
         --_bu-filled-bg-selected: var(--black-350);
-        --_bu-filled-fc: var(--black-700);
+        --_bu-filled-fc: var(--black-500);
         --_bu-filled-fc-active: var(--_bu-filled-fc);
         --_bu-filled-fc-hover: var(--_bu-filled-fc);
-        --_bu-filled-fc-selected: var(--black-800);
-        --_bu-outlined-bc: var(--black-200);
-        --_bu-outlined-bc-selected: var(--black-200);
+        --_bu-filled-fc-selected: var(--black-600);
+        --_bu-outlined-bc: var(--black-300);
+        --_bu-outlined-bc-selected: var(--black-300);
         --_bu-outlined-bg-selected: var(--_bu-bg-selected);
         --_bu-outlined-fc-selected: var(--_bu-fc-selected);
 
         .highcontrast-mode({
-            --_bu-bg-hover: var(--black-100);
+            --_bu-bg-hover: var(--black-225);
             // 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-600);
-            --_bu-filled-bg-hover: var(--black-500);
-            --_bu-filled-bg-selected: var(--black-700);
+            --_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);
 
@@ -328,9 +328,9 @@
         --_bu-number-fc: var(--theme-button-primary-number-color);
 
         .dark-mode({
-            --_bu-bg: var(--theme-secondary-300);
+            --_bu-bg: var(--theme-secondary-400);
             --_bu-bg-active: var(--theme-secondary-400);
-            --_bu-bg-hover: var(--theme-secondary-350);
+            --_bu-bg-hover: var(--theme-secondary-400);
             --_bu-fc: var(--black);
             --_bu-fc-active: var(--_bu-fc);
             --_bu-fc-hover: var(--_bu-fc);
@@ -345,8 +345,8 @@
 
         .highcontrast-dark-mode({
             --_bu-bg: var(--theme-secondary-400);
-            --_bu-bg-active: var(--theme-secondary-600);
-            --_bu-bg-hover: var(--theme-secondary-500);
+            --_bu-bg-active: var(--theme-secondary-500);
+            --_bu-bg-hover: var(--theme-secondary-400);
             --_bu-fc: var(--white);
             --_bu-number-fc: var(--black);
         });
@@ -375,18 +375,18 @@
     &&__google {
         --_bu-bc: var(--bc-medium);
         --_bu-bg: var(--white);
-        --_bu-bg-active: var(--black-050);
-        --_bu-bg-hover: var(--black-025);
+        --_bu-bg-active: var(--black-150);
+        --_bu-bg-hover: var(--black-100);
         --_bu-fc: var(--fc-medium);
         --_bu-fc-active: var(--fc-dark);
-        --_bu-fc-hover: var(--black-800);
+        --_bu-fc-hover: var(--black-600);
         --_bu-focus-ring: 0 0 0 var(--su-static4) var(--focus-ring-muted);
     }
 
     &&__github {
-        --_bu-bg: var(--black-750);
+        --_bu-bg: var(--black-600);
         --_bu-bg-active: var(--black);
-        --_bu-bg-hover: var(--black-800);
+        --_bu-bg-hover: var(--black-600);
         --_bu-fc: var(--white);
         --_bu-fc-active: var(--white);
         --_bu-fc-hover: var(--white);

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

@@ -39,7 +39,7 @@ describe("button", () => {
         tag: "button",
         template: ({ component, testid }) => html`
             <div
-                class="bg-black-100 d-inline-flex ai-center jc-center hs1 ws2 p8"
+                class="bg-black-225 d-inline-flex ai-center jc-center hs1 ws2 p8"
                 data-testid="${testid}"
             >
                 ${component}

package/lib/components/check-control/check-control.a11y.test.ts

@@ -29,11 +29,6 @@ import "../../index";
                     ...defaultOptions,
                     testidSuffix: `${state}-${type}`,
                 },
-                // TODO remove when contrast bugs are fixed
-                skippedTestids: [
-                    /^s-check-control-dark-has-error-(checked|unchecked)-(checkbox|radio)$/,
-                    /^s-check-control-light-has-(success|warning)-(checked|unchecked)-(checkbox|radio)$/,
-                ],
             });
         });
     });

package/lib/components/check-control/check-control.visual.test.ts

@@ -12,7 +12,7 @@ import "../../index";
                     global: ["has-warning", "has-error", "has-success"],
                 },
                 attributes: {
-                    class: "bg-black-100 hs1 ws2 p8",
+                    class: "bg-black-225 hs1 ws2 p8",
                 },
                 children: {
                     default: `

package/lib/components/checkbox_radio/checkbox_radio.less

@@ -1,8 +1,8 @@
 .s-checkbox,
 .s-radio {
     --_ch-baw: var(--su-static1);
-    --_ch-bc: var(--bc-darker);
-    --_ch-bc-focus: var(--theme-secondary-300);
+    --_ch-bc: var(--bc-dark);
+    --_ch-bc-focus: var(--theme-secondary-400);
     --_ch-bg: var(--white);
     --_ch-bg-image: unset;
     --_ch-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring);
@@ -51,9 +51,9 @@
     // CONTEXTUAL STYLES
     .highcontrast-dark-mode({
         &:checked, &:indeterminate {
-            --_ch-bc: var(--blue-700) !important;
+            --_ch-bc: var(--blue-500) !important;
             --_ch-bc-focus: var(--_ch-bc);
-            --_ch-bg: var(--blue-300);
+            --_ch-bg: var(--blue-400);
         }
     });
 
@@ -93,7 +93,7 @@
     // CONTEXTUAL STYLES
     .highcontrast-dark-mode({
         &:checked {
-            --_ch-bc: var(--blue-300);
+            --_ch-bc: var(--blue-400);
             outline: var(--su-static1) solid var(--black);
         }
     });

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

@@ -5,7 +5,7 @@ import "../../index";
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const checkboxTemplate = ({ component, testid }: any) =>
     html`<div
-        class="d-inline-flex ai-center jc-center bg-black-100 hs1 ws1 p8"
+        class="d-inline-flex ai-center jc-center bg-black-225 hs1 ws1 p8"
         data-testid="${testid}"
     >
         ${component}

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

@@ -1,9 +1,9 @@
 .s-code-block {
-    --_cb-line-numbers-bg: var(--black-050);
+    --_cb-line-numbers-bg: var(--black-150);
 
     // CONTEXTUAL STYLES
     .dark-mode({
-        --_cb-line-numbers-bg: var(--black-025);
+        --_cb-line-numbers-bg: var(--black-100);
     });
 
     // CHILD COMPONENTS
@@ -93,7 +93,7 @@
             border-color: var(--bc-medium);
             border-style: solid;
             border-width: 0 var(--su-static1) 0 0;
-            color: var(--black-300);
+            color: var(--black-350);
             float: left;
             margin: calc(var(--su12) * -1);
             margin-right: var(--su12);

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

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

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

@@ -18,7 +18,7 @@ import "../../index";
             },
             template: ({ component, testid }) => html`
                 <div
-                    class="bg-black-100 d-inline-flex ai-center jc-center hs1 ws2 p8
+                    class="bg-black-225 d-inline-flex ai-center jc-center hs1 ws2 p8
                     ${isDisabled ? "is-disabled" : ""}"
                     data-testid="${testid}"
                 >

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

@@ -1,6 +1,6 @@
 .s-input-fill {
-    --_if-bc: var(--bc-darker);
-    --_if-bg: var(--black-050);
+    --_if-bc: var(--bc-dark);
+    --_if-bg: var(--black-150);
     --_if-blw: 0;
     --_if-blr: 0;
     --_if-brr: 0;

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

@@ -12,7 +12,7 @@
     }
 
     .has-warning & {
-        --_ii-fc: var(--yellow-600);
+        --_ii-fc: var(--yellow-500);
     }
 
     .is-disabled & {
@@ -20,7 +20,7 @@
     }
 
     .is-readonly & {
-        --_ii-fc: var(--black-200);
+        --_ii-fc: var(--black-300);
 
         .highcontrast-mode({
             --_ii-fc: var(--fc-light);

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

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