Improve push/tool button colors/states

[dpizetta]

I would like to propose to improve button colors taking advantage of @isabela-pf expertise :) And color palette proposed in https://github.com/spyder-ide/ux-improvements/issues/13

We have reduced the palette and named the colors to get things easy to maintain/change. However, I think we need to add one more tone (foreground, background, adding middleground) to improve button states.

    # Color
    COLOR_BACKGROUND_LIGHT = Gray.B50
    COLOR_BACKGROUND_NORMAL = Gray.B30
    COLOR_BACKGROUND_DARK = Gray.B10

   # Add middleground

    COLOR_FOREGROUND_LIGHT = Gray.B120
    COLOR_FOREGROUND_NORMAL = Gray.B80
    COLOR_FOREGROUND_DARK = Gray.B60

    COLOR_SELECTION_LIGHT = Blue.B60
    COLOR_SELECTION_NORMAL = Blue.B40
    COLOR_SELECTION_DARK = Blue.B20

Currently, when buttons are pressed or disabled they are colored as background, what seems like a hole in the toolbars, or they disappear (only text) if on a background color.

No dark theme applied:

Proposed changes:

• Keep disabled buttons with the same color (because they are dimmed automatically);
• Add an intermediate color between toolbar color and background (middleground) for pressed buttons;
• Keep push buttons and tool buttons the same configuration;

@ccordoba12, @juanis2112, @isabela-pf what do you think about it? Tks

[isabela-pf]

Hi @dpizetta, thanks for pointing out this problem! I completely agree that we need more than three options for a lot of the color groups to make sure we have options for areas of the UI with more states (like the buttons) and to help able to keep enough color contrast.

In the last round of spyder-ide/ux-improvements #13, we decided to have four options for most groups, similar to what you’ve proposed here. @juanis2112 and I have been double checking how all these colors work with Spyder as an example application, and have made some changes since the linked post (like more background colors to support all the button states like you have above, for example!). I will follow up with the changes on 13 and this issue when we make sure we aren’t still missing any pieces as we transition, and we are hoping to make this a PR soon.

You can also see how some of these colors can work together spyder-ide/ux-improvements #28 where we were working on buttons and their states for a few different toolbars. Does this seem like a good range of states and colors, or do you have any other feedback? I’m always happy to have more people reviewing this work to make sure it makes sense and can work for other applications too!

[dpizetta]

I appreciate your contribution to this.

I will check proposed changes in spyder-ide/ux-improvements #28 and give you feedback.

I would recommend you test those changes in the QDarkStyle example where we have all the possible QtWidgets together, with no special/hardcoded configuration. To compile and apply the changes, just run the script in the run_ui_css_edition.py.

[dpizetta]

To be more consistent I'm going to apply the same style of push buttons for the tool buttons. So, who needs a transparent background will need to change that.

[dpizetta]

@ccordoba12 @juanis2112 Using the same aspects for both push-button and tool button causes some issues on spyder 5.0.0a7. Screenshots below. You need to add a transparent background for the tool buttons. Note that the plots dock they appear correctly, I think you are using the toolbar there.

Develop branch (generating a new RC soon today)

Using the RC0

[ccordoba12]

@dpizetta, we are aware of that problem, but thanks for mentioning it. We fixed it (along with other issues) in PR https://github.com/spyder-ide/spyder/pull/14933.