fix(button): adjust badge variant

.changeset/quick-buses-tease.md

@@ -0,0 +1,5 @@
+---
+"@stackoverflow/stacks": patch
+---
+
+button: adjust badge variant

packages/stacks-classic/lib/components/button/button.a11y.test.ts

@@ -8,14 +8,5 @@ describe("button", () => {
         excludedTestids: [
             /^s-btn-(?=.*unset).*badge$/, // s-btn with badge and unset variant not supported
         ],
-        skippedTestids: [
-            // TODO resolve btn badge contrast issues
-            // matches tests with a badge in light and dark modes
-            /s-btn-(light|dark).*?badge/,
-            // matches tests with a badge in highcontrast-light modes, excluding filled, danger, github, facebook, sm, or xs
-            /s-btn-highcontrast-light-(?!.*(filled|danger|github|facebook|sm|xs)).*?badge/,
-            // matches tests with a badge in highcontrast-light modes, are tonal or featured, and are sm or xs
-            /s-btn-highcontrast-light-(?:tonal-|featured-)?(?:sm|xs).*?badge/,
-        ],
     });
 });

packages/stacks-classic/lib/components/button/button.less

@@ -6,20 +6,24 @@
     --_bu-g: var(--su8);
     --_bu-px: var(--su16);
     --_bu-py: calc(var(--su8) + var(--su2)); // 10px
+    --_bu-badge-fs: var(--fs-caption);
+    --_bu-badge-px: var(--su6);
+    --_bu-badge-py: var(--su2);
     --_bu-dropdown-bw: var(--su-static4);
 
     // VARIANTS
     // Base
     &:not(&__danger):not(&__featured):not(&__tonal):not(&__link):not(&__unset):not(&__facebook):not(&__github):not(&__google) { // Exclude default styles from impacting these variants
         --_bu-bg: var(--theme-button-color, var(--theme-secondary));
-        --_bu-bg-disabled: var(--theme-secondary-300);
+        --_bu-bg-disabled: var(--black-350);
         --_bu-bg-hover: var(--theme-button-hover-background-color, var(--theme-secondary-500));
         --_bu-fc: var(--white);
+        --_bu-fc-disabled: var(--black-050);
         --_bu-fc-hover: var(--theme-button-hover-color, var(--white));
-        --_bu-badge-bg: var(--theme-secondary-200);
-        --_bu-badge-fc: var(--theme-secondary-600);
-        --_bu-badge-bg-disabled: var(--theme-secondary-200);
-        --_bu-badge-fc-disabled: var(--theme-secondary-300);
+        --_bu-badge-bg: var(--theme-secondary-500);
+        --_bu-badge-fc: var(--white);
+        --_bu-badge-bg-disabled: var(--black-250);
+        --_bu-badge-fc-disabled: var(--black-050);
 
         &.s-btn__clear {
             --_bu-bg: transparent;
@@ -29,10 +33,10 @@
             --_bu-fc: var(--theme-secondary-600);
             --_bu-fc-disabled: var(--theme-secondary-300);
             --_bu-fc-hover: var(--_bu-fc);
-            --_bu-badge-bg: var(--theme-secondary-500);
-            --_bu-badge-fc: var(--white);
-            --_bu-badge-bg-disabled: var(--theme-secondary-300);
-            --_bu-badge-fc-disabled: var(--white);
+            --_bu-badge-bg: var(--theme-secondary-100);
+            --_bu-badge-fc: var(--theme-secondary-500);
+            --_bu-badge-bg-disabled: var(--black-100);
+            --_bu-badge-fc-disabled: var(--black-350);
 
             .highcontrast-mode({
                 --_bu-bc: var(--theme-secondary-600);
@@ -44,13 +48,14 @@
         --_bu-bg: var(--red-400);
         --_bu-fc: var(--white);
         --_bu-bg-disabled: var(--red-200);
+        --_bu-fc-disabled: var(--black-050);
         --_bu-bg-hover: var(--red-500);
         --_bu-bg-selected: var(--red-500);
         --_bu-fc-selected: var(--_bu-fc);
-        --_bu-badge-bg: var(--red-100);
-        --_bu-badge-fc: var(--red-400);
-        --_bu-badge-bg-disabled: var(--white);
-        --_bu-badge-fc-disabled: var(--red-200);
+        --_bu-badge-bg: var(--red-500);
+        --_bu-badge-fc: var(--black-050);
+        --_bu-badge-bg-disabled: var(--red-300);
+        --_bu-badge-fc-disabled: var(--black-100);
 
         &.s-btn__clear {
             --_bu-bg: transparent;
@@ -61,11 +66,10 @@
             --_bu-fc-disabled: var(--red-200);
             --_bu-fc-hover: var(--red-500);
             --_bu-fc-selected: var(--red-500);
-            --_bu-badge-bg: var(--red-400);
-            --_bu-badge-bg-selected: var(--red-400);
-            --_bu-badge-fc: var(--red-100);
-            --_bu-badge-bg-disabled: var(--red-200);
-            --_bu-badge-fc-disabled: var(--white);
+            --_bu-badge-bg: var(--red-100);
+            --_bu-badge-fc: var(--red-500);
+            --_bu-badge-bg-disabled: var(--red-100);
+            --_bu-badge-fc-disabled: var(--red-300);
 
             .highcontrast-mode({
                 --_bu-bc: var(--red-600);
@@ -81,10 +85,10 @@
         --_bu-bg-selected: var(--purple-500);
         --_bu-fc: var(--white);
         --_bu-fc-selected: var(--_bu-fc);
-        --_bu-badge-bg: var(--purple-100);
-        --_bu-badge-fc: var(--purple-400);
-        --_bu-badge-bg-disabled: var(--white);
-        --_bu-badge-fc-disabled: var(--purple-200);
+        --_bu-badge-bg: var(--purple-500);
+        --_bu-badge-fc: var(--black-050);
+        --_bu-badge-bg-disabled: var(--purple-300);
+        --_bu-badge-fc-disabled: var(--black-100);
     }
 
     &&__tonal {
@@ -94,10 +98,10 @@
         --_bu-fc: var(--black);
         --_bu-fc-disabled: var(--black-300);
         --_bu-fc-selected: var(--_bu-fc);
-        --_bu-badge-bg: var(--black-500);
-        --_bu-badge-fc: var(--white);
-        --_bu-badge-bg-disabled: var(--black-300);
-        --_bu-badge-fc-disabled: var(--white);
+        --_bu-badge-bg: var(--black-200);
+        --_bu-badge-fc: var(--black-600);
+        --_bu-badge-bg-disabled: var(--black-100);
+        --_bu-badge-fc-disabled: var(--black-350);
 
         .highcontrast-mode({
             --_bu-bc: var(--black-300);
@@ -229,15 +233,15 @@
     }
 
     // CHILD ELEMENTS
-    // TODO SHINE fine-tune badge styles
     & &--badge {
         background-color: var(--_bu-badge-bg);
         border-radius: var(--br-pill);
         display: inline-block;
-        font-size: var(--fs-caption);
+        font-size: var(--_bu-badge-fs);
         line-height: inherit;
         opacity: var(--_bu-badge-o);
-        padding: var(--su1) var(--su4) 0;
+        padding: var(--_bu-badge-py) var(--_bu-badge-px);
+        margin-block: calc(var(--_bu-badge-py) * -1);
     }
 
     & &--number {
@@ -264,6 +268,9 @@
     &&__sm {
         --_bu-lh: var(--lh-sm);
         --_bu-px: var(--su12);
+        --_bu-badge-fs: var(--fs-fine);
+        --_bu-badge-py: var(--su1);
+        --_bu-badge-px: calc(var(--su2) + var(--su1)); // 3px
     }
     &&__xs {
         --_bu-g: var(--su4);
@@ -279,6 +286,7 @@
         --_bu-fs: var(--fs-body2);
         --_bu-px: var(--su24);
         --_bu-py: calc(var(--su12) + var(--su1)); // 13px
+        --_bu-badge-py: calc(var(--su2) + var(--su1)); // 3px
     }
 
     // INTERACTION