Change disabled button style (#77)

* Remove background on disabled button

* Change the default disabled opacity

* remove background style for disabled buttons on hover and active, and avoid creating agin the opacity token

* Add code comment

* Update button.styles.ts

---------

Co-authored-by: Frédéric Collonval <fcollonval@users.noreply.github.com>

Author: brichet

packages/components/src/button/button.styles.ts

@@ -661,12 +661,6 @@ export const buttonStyles: (
     appearanceBehavior(
       'stealth',
       css`
-        :host([appearance='stealth'][disabled]),
-        :host([appearance='stealth'][disabled]:hover),
-        :host([appearance='stealth'][disabled]:active) {
-          background: ${neutralFillStealthRest};
-        }
-
         ${StealthButtonStyles}
       `.withBehaviors(
         forcedColorsStylesheetBehavior(css`

packages/components/src/design-tokens.ts

@@ -10,6 +10,7 @@ import {
   accentForegroundHoverDelta,
   accentForegroundRestDelta,
   ColorRecipe,
+  disabledOpacity,
   fillColor,
   InteractiveColorRecipe,
   InteractiveSwatchSet,
@@ -174,6 +175,9 @@ export {
 
 const { create } = DesignToken;
 
+// Changing the default to increase contrast
+disabledOpacity.withDefault(0.4);
+
 /*
  * The error palette is built using the same color algorithm as the accent palette
  * But by copying the algorithm from @microsoft/fast-components at commit 03d711f222bd816834a5e1d60256d3e083b27c27