feat(button) - update button base styles for SHINE

.changeset/beige-bats-like.md

@@ -0,0 +1,12 @@
+---
+"@stackoverflow/stacks": minor
+"@stackoverflow/stacks-svelte": minor
+---
+
+Update button to new Shine styles
+
+BREAKING CHANGES:
+
+- The secondary style `outlined` has been removed i.e. `.s-btn__outlined`
+- The variant `Muted` has been removed
+- `s-btn__md` has been removed

MIGRATION_GUIDE.md

@@ -28,6 +28,13 @@
 - The Award Bling component has been renamed to Bling.
 - Bling no longer accepts children elements besides those for screen readers. Please include any visually represented strings (such as counts) as siblings to the bling component.
 
+#### Buttons
+- The secondary style `outlined` has been removed i.e. `.s-btn__outlined`
+- The default button style is `filled`, use `.s-btn__clear` to use a clear style of a button
+- The featured and tonal variant no longer have a clear style
+- The variant `Muted` has been removed, `Tonal` has been added
+- `s-btn__md` has been removed, `s-btn__lg` has been added
+
 #### Menu
 
 The menu component has been updated to use new class names and structure. The following changes are breaking:

packages/stacks-classic/lib/components/button-group/button-group.test.setup.ts

@@ -18,7 +18,7 @@ const getBtn = ({
     isSelected?: boolean;
     hasBadge?: boolean;
 }): string => {
-    const baseClasses = "s-btn s-btn__muted";
+    const baseClasses = "s-btn s-btn__tonal";
     const btnChildren = `
         <span class="s-btn--text" data-text="${name}">${name}</span>
         ${

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

@@ -14,8 +14,8 @@ describe("button", () => {
             /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 muted or featured and/or outlined, and are sm or xs
-            /s-btn-highcontrast-light-(?:muted-|featured-)?(?:outlined-)?(?: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/,
         ],
     });
 });