@stackoverflow/stacks 1.10.3 → 2.0.0-rc.1

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

@@ -24,16 +24,7 @@ describe("badge", () => {
                     Altruist
                 </span>`,
             },
-            tag: "span",
-            // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
-            skippedTestids: [
-                "s-badge-dark",
-                "s-badge-dark-gold",
-                "s-badge-dark",
-                "s-badge-dark-silver",
-                "s-badge-dark",
-                "s-badge-dark-bronze",
-            ],
+            tag: "span"
         });
     });
 
@@ -49,20 +40,7 @@ describe("badge", () => {
             ...defaultOptions,
             includeNullModifier: false,
         },
-        tag: "span",
-        // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
-        skippedTestids: [
-            "s-badge-dark-answered",
-            "s-badge-dark-important",
-            "s-badge-dark-rep-down",
-            "s-badge-light-answered",
-            "s-badge-light-rep",
-            "s-badge-dark",
-            "s-badge-dark-bounty",
-            "s-badge-dark-rep",
-            "s-badge-dark-votes",
-            "s-badge-light-rep-down",
-        ],
+        tag: "span"
     });
 
     // Icon badges
@@ -82,13 +60,6 @@ describe("badge", () => {
             includeNullModifier: false,
         },
         tag: "span",
-        // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
-        skippedTestids: [
-            "s-badge-dark-danger-icon",
-            "s-badge-dark-icon",
-            "s-badge-light-danger-icon",
-            "s-badge-light-warning-icon",
-        ],
     });
 
     // Filled badges
@@ -109,11 +80,6 @@ describe("badge", () => {
             includeNullVariant: false,
         },
         tag: "span",
-        // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
-        skippedTestids: [
-            "s-badge-dark-danger-icon",
-            "s-badge-light-danger-icon",
-        ],
     });
 
     // User badges
@@ -128,19 +94,6 @@ describe("badge", () => {
             default: "user",
         },
         tag: "span",
-        // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
-        skippedTestids: [
-            /^s-badge-dark-admin.*/,
-            "s-badge-dark",
-            "s-badge-dark-sm",
-            "s-badge-dark-xs",
-            "s-badge-light-admin",
-            "s-badge-light-admin-sm",
-            "s-badge-light-admin-xs",
-            "s-badge-light-staff",
-            "s-badge-light-staff-sm",
-            "s-badge-light-staff-xs",
-        ],
     });
 
     // Sizes
@@ -154,7 +107,5 @@ describe("badge", () => {
             default: "size badge",
         },
         tag: "span",
-        // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
-        skippedTestids: ["s-badge-dark", "s-badge-dark-sm", "s-badge-dark-xs"],
     });
 });

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/banner/banner.a11y.test.ts

@@ -33,19 +33,5 @@ describe("banner", () => {
         children: {
             default: bannerChild,
         },
-        // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
-        skippedTestids: [
-            "s-banner-dark",
-            "s-banner-dark-danger",
-            "s-banner-dark-danger-important",
-            "s-banner-dark-important",
-            "s-banner-dark-info",
-            "s-banner-dark-success",
-            "s-banner-dark-success-important",
-            "s-banner-dark-warning",
-            "s-banner-dark-warning-important",
-            "s-banner-light-success-important",
-            "s-banner-light-warning-important",
-        ],
     });
 });

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

@@ -23,8 +23,6 @@ describe("block-link", () => {
             default: `block link`,
         },
         template: blockLinkTemplate,
-        // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
-        skippedTestids: ["s-block-link-dark"],
     });
 
     // Base + danger
@@ -42,11 +40,6 @@ describe("block-link", () => {
             includeNullModifier: false,
         },
         template: blockLinkTemplate,
-        // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
-        skippedTestids: [
-            "s-block-link-dark-danger",
-            "s-block-link-light-danger",
-        ],
     });
 
     // All left and rignt variants
@@ -65,12 +58,5 @@ describe("block-link", () => {
             includeNullVariant: false,
         },
         template: blockLinkTemplate,
-        // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
-        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",
-        ],
     });
 });

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.a11y.test.ts

@@ -33,7 +33,5 @@ describe("breadcrumbs", () => {
                 ${component}
             </div>
         `,
-        // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
-        skippedTestids: ["s-breadcrumbs-dark", "s-breadcrumbs-light"],
     });
 });

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,139 +25,5 @@ describe("button", () => {
         excludedTestids: [
             /primary-outlined/, // This combination is not supported
         ],
-        // TODO: Most of those skipped tests should be fixed by the new Stacks 2.0 palette
-        skippedTestids: [
-            "s-btn-light",
-            "s-btn-light-dropdown",
-            "s-btn-light-dropdown-is-loading",
-            "s-btn-light-icon",
-            "s-btn-light-icon-is-loading",
-            "s-btn-light-is-loading",
-            "s-btn-light-link",
-            "s-btn-light-muted-filled",
-            "s-btn-light-muted-filled-dropdown",
-            "s-btn-light-muted-filled-dropdown-is-loading",
-            "s-btn-light-muted-filled-icon",
-            "s-btn-light-muted-filled-icon-is-loading",
-            "s-btn-light-muted-filled-is-loading",
-            "s-btn-light-muted-filled-sm",
-            "s-btn-light-muted-filled-sm-is-loading",
-            "s-btn-light-muted-filled-xs",
-            "s-btn-light-muted-filled-xs-is-loading",
-            "s-btn-light-outlined",
-            "s-btn-light-outlined-dropdown",
-            "s-btn-light-outlined-dropdown-is-loading",
-            "s-btn-light-outlined-icon",
-            "s-btn-light-outlined-icon-is-loading",
-            "s-btn-light-outlined-is-loading",
-            "s-btn-light-outlined-sm",
-            "s-btn-light-outlined-sm-is-loading",
-            "s-btn-light-outlined-xs",
-            "s-btn-light-outlined-xs-is-loading",
-            "s-btn-light-sm",
-            "s-btn-light-sm-is-loading",
-            "s-btn-light-xs",
-            "s-btn-light-xs-is-loading",
-            "s-btn-dark",
-            "s-btn-dark-danger",
-            "s-btn-dark-danger-dropdown",
-            "s-btn-dark-danger-dropdown-is-loading",
-            "s-btn-dark-danger-icon",
-            "s-btn-dark-danger-icon-is-loading",
-            "s-btn-dark-danger-is-loading",
-            "s-btn-dark-danger-md",
-            "s-btn-dark-danger-md-is-loading",
-            "s-btn-dark-danger-outlined",
-            "s-btn-dark-danger-outlined-dropdown",
-            "s-btn-dark-danger-outlined-dropdown-is-loading",
-            "s-btn-dark-danger-outlined-icon",
-            "s-btn-dark-danger-outlined-icon-is-loading",
-            "s-btn-dark-danger-outlined-is-loading",
-            "s-btn-dark-danger-outlined-md",
-            "s-btn-dark-danger-outlined-md-is-loading",
-            "s-btn-dark-danger-outlined-sm",
-            "s-btn-dark-danger-outlined-sm-is-loading",
-            "s-btn-dark-danger-outlined-xs",
-            "s-btn-dark-danger-outlined-xs-is-loading",
-            "s-btn-dark-danger-sm",
-            "s-btn-dark-danger-sm-is-loading",
-            "s-btn-dark-danger-xs",
-            "s-btn-dark-danger-xs-is-loading",
-            "s-btn-dark-dropdown",
-            "s-btn-dark-dropdown-is-loading",
-            "s-btn-dark-filled",
-            "s-btn-dark-filled-dropdown",
-            "s-btn-dark-filled-dropdown-is-loading",
-            "s-btn-dark-filled-icon",
-            "s-btn-dark-filled-icon-is-loading",
-            "s-btn-dark-filled-is-loading",
-            "s-btn-dark-filled-sm",
-            "s-btn-dark-filled-sm-is-loading",
-            "s-btn-dark-filled-xs",
-            "s-btn-dark-filled-xs-is-loading",
-            "s-btn-dark-google",
-            "s-btn-dark-icon",
-            "s-btn-dark-icon-is-loading",
-            "s-btn-dark-is-loading",
-            "s-btn-dark-link",
-            "s-btn-dark-md",
-            "s-btn-dark-md-is-loading",
-            "s-btn-dark-muted",
-            "s-btn-dark-muted-dropdown",
-            "s-btn-dark-muted-dropdown-is-loading",
-            "s-btn-dark-muted-filled",
-            "s-btn-dark-muted-filled-dropdown",
-            "s-btn-dark-muted-filled-dropdown-is-loading",
-            "s-btn-dark-muted-filled-icon",
-            "s-btn-dark-muted-filled-icon-is-loading",
-            "s-btn-dark-muted-filled-is-loading",
-            "s-btn-dark-muted-filled-sm",
-            "s-btn-dark-muted-filled-sm-is-loading",
-            "s-btn-dark-muted-filled-xs",
-            "s-btn-dark-muted-filled-xs-is-loading",
-            "s-btn-dark-muted-icon",
-            "s-btn-dark-muted-icon-is-loading",
-            "s-btn-dark-muted-is-loading",
-            "s-btn-dark-muted-outlined",
-            "s-btn-dark-muted-outlined-dropdown",
-            "s-btn-dark-muted-outlined-dropdown-is-loading",
-            "s-btn-dark-muted-outlined-icon",
-            "s-btn-dark-muted-outlined-icon-is-loading",
-            "s-btn-dark-muted-outlined-is-loading",
-            "s-btn-dark-muted-outlined-sm",
-            "s-btn-dark-muted-outlined-sm-is-loading",
-            "s-btn-dark-muted-outlined-xs",
-            "s-btn-dark-muted-outlined-xs-is-loading",
-            "s-btn-dark-muted-sm",
-            "s-btn-dark-muted-sm-is-loading",
-            "s-btn-dark-muted-xs",
-            "s-btn-dark-muted-xs-is-loading",
-            "s-btn-dark-outlined",
-            "s-btn-dark-outlined-dropdown",
-            "s-btn-dark-outlined-dropdown-is-loading",
-            "s-btn-dark-outlined-icon",
-            "s-btn-dark-outlined-icon-is-loading",
-            "s-btn-dark-outlined-is-loading",
-            "s-btn-dark-outlined-md",
-            "s-btn-dark-outlined-md-is-loading",
-            "s-btn-dark-outlined-sm",
-            "s-btn-dark-outlined-sm-is-loading",
-            "s-btn-dark-outlined-xs",
-            "s-btn-dark-outlined-xs-is-loading",
-            "s-btn-dark-primary-filled",
-            "s-btn-dark-primary-filled-dropdown",
-            "s-btn-dark-primary-filled-dropdown-is-loading",
-            "s-btn-dark-primary-filled-icon",
-            "s-btn-dark-primary-filled-icon-is-loading",
-            "s-btn-dark-primary-filled-is-loading",
-            "s-btn-dark-primary-filled-sm",
-            "s-btn-dark-primary-filled-sm-is-loading",
-            "s-btn-dark-primary-filled-xs",
-            "s-btn-dark-primary-filled-xs-is-loading",
-            "s-btn-dark-sm",
-            "s-btn-dark-sm-is-loading",
-            "s-btn-dark-xs",
-            "s-btn-dark-xs-is-loading",
-        ],
     });
 });

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}