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 <[email protected]>
jupyterlab-contrib · Nov 21, 2023 · 7d078b2 · 7d078b2
1 parent 6cb723a
commit 7d078b2
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 6 deletions.
diff --git a/packages/components/src/button/button.styles.ts b/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`

diff --git a/packages/components/src/design-tokens.ts b/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