[material-ui][Snackbar] Disabled button are hard to read

[Janpot]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/lively-voice-vvlghg?file=/Demo.tsx

Steps:

1. Open the example
2. Observe the disabled buttons in the snackbar
3. Use the theme switcher to see the issue in light and dark mode

Current behavior 😯

Buttons are very hard to read. I've added disabled buttons in a theme of the opposite mode for comparison.

In dark mode the button even disappears

Expected behavior 🤔

Disabled buttons are readable in a snackbar

Context 🔦

Ran into this while adding a loading button in the Snackbar

Your environment 🌎

https://codesandbox.io/s/lively-voice-vvlghg?file=/Demo.tsx

[gitstart]

@Janpot @danilo-leal we would like to pick this up

[danilo-leal]

@gitstart Go ahead! 🙌

[gitstart]

@danilo-leal @Janpot here is a demo of our proposed solution. Please let us know what you think.

https://www.loom.com/share/3b2c0d40c0f6484e8ac7d34ce8e2be71

[Janpot]

Thank you. To summarize: the proposed solution would be to invert the background color of the Snackbar, which would be a breaking change.

For reference: Material Design 3 specs the colors as inverted. I believe, if we follow spec, the solution would be to invert the colors of disabled state inside of the snackbar as to align them with the inverted background.

[gitstart]

@danilo-leal @Janpot to put this in context:

We have observed a conflict between the snackbar background color and the button's disabled state, particularly when the theme is in dark mode.

In light mode:

• Snackbar background color: rgb(50, 50, 50) (a dark color)
• Disabled button text color: rgba(0, 0, 0, 0.26) (a transparent dark color)

In dark mode:

• Snackbar background color: rgb(250, 250, 250) (a light color)
• Disabled button text color: rgba(255, 255, 255, 0.3) (a light color)

Currently, the button is using a more generic theme configuration styling, which is palette.action.disabled.
We believe the issue could be resolved by reversing the snackbar background color, using a light color in light mode and a dark color in dark mode. However, we acknowledge that this change might be considered a breaking change.

We would like to seek your input on the best way to address this issue. Should we proceed with reversing the snackbar background color, potentially as a breaking change, or do you have alternative suggestions for resolving the conflict?