feat(button) - update button base styles for SHINE (#2008)

* update default and xs

* Update button.less

* Update based on changes

* fix duplicate

* Update button.less

* update docs

* update button svelte files

* add changeset

* update dependent svelte files

* update to theme secondary

* Update accessibility tests

* remove contextual styles

* reintroduce contextual styles

* Update based on figma update and pr comments

* Update badge background color for danger clear variant

* add breaking changes

* Update docs

* correct gradients

* use color instead of opacity

* Update based on comments

* Button styles refactor (#2052)

* Button styles refactor

* minor tweaks

* Styles and such

* update svelte component

* Update migration guide

* fix lint issue

* Fix button prop in Menu story

---------

Co-authored-by: Dan Cormier <[email protected]>
Co-authored-by: Dan Cormier <[email protected]>

Author: ttaylor-stack

.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/,
         ],
     });
 });