Change the design for the state of disabled buttons

[isabela-pf]

Since there are currently multiple different disabled button states in Spyder, I’d like to consolidate them and propose they all have the same UI treatment for a more consistent experience.

For context, here are three different disabled buttons in Spyder now.

They all have the lowered opacity in common, so that’s what I think the new indicator should be. I think 50% opacity works well and will be effective in both dark and light modes. In default dark more, that looks like this:

On a related note, I was looking for icons Spyder currently uses to mock this up, but I couldn’t find any that I recognized. Where in the repo should I be looking for them?

[isabela-pf]

An interesting limit to the 50% opacity approach is that it likely won’t work well for the icons that are not one color or for icons that are not white (in dark mode) or black (in light mode), such as the blue debugging icons in the main toolbar.

Since 50% opacity will work well for a majority of the icons, I still think it is the best choice to create a consistent experience. I think this does bring up questions about icon consistency outside of disabled button states. Should Spyder have all one color icons (as is standard now)? Can Spyder’s more complex icons even be represented accurately in one color? If we do need multi-color icons, then how should we limit the colors.

This is likely suited to be a separate issue to solve, but I’m noting it here since solving this issue will create new issues.

[isabela-pf]

Meeting with @ccordoba12 and @juanis2112 told me that Spyder is still interested in keeping its range of icon colors (at least for now), so the greyed-out 50% opacity approach won’t provide clear enough communication of disabled buttons (they could just look like a another non-white button by accident). Coming up with alternate approaches has been tough since various degrees of greyed-out seem to be the contemporary standard, but here are two more possibilities.

First, Spyder could keep using the darkened background already being used to indicate some of its disabled buttons. While it wouldn’t be new, making it the consistent and only disabled button state throughout Spyder would still be a UX improvement. I personally would recommend against this approach because it breaks the UI up into more small visual pieces and can feel overwhelming in an already tightly-packed UI. It also is a more outdated approach. Some of the colored icons (like the green Run icon) also begin to get very dark and difficult to see. Still, this is a possibility.

The second option is to make all disabled buttons one color and greyed-out while preserving their full color states when enabled. This would require all full color icons now to have one color alternates made and could be confusing to users who are expecting to always see full color icons no matter the state. Out of the current options, this is my preferred approach because it allows Spyder to match contemporary UI standards while allowing for the full color icons to stay in use.

[juanis2112]

Option 2 works!

[juanis2112]

Once the palette is ready, we should include the color for this disabled state.

[juanis2112]

Closing with https://github.com/spyder-ide/spyder/pull/14933