PR: Adjust icon colors for increased contrast

[isabela-pf]

Description of Changes

• Wrote at least one-line docstrings (for any new functions)
• Added unit test(s) covering the changes (if testable)

• Included a screenshot or animation (if affecting the UI, see Licecap)

Spyder 5's light and dark mode icons in the toolbars don't all meet WCAG 2.1 contrast standards for non-text elements. While WCAG is a web-focused set of guidelines, contrast is not a web-specific problem so this makes sense in desktop applications as well. This PR is another tiny step for a more accessible Spyder.

Changes made:

• Replace definition of ICON_2 and ICON_3 in both light and dark modes.
• Replace non-font icons that use ICON_2 and ICON_3 in both light and dark modes. These are all SVGs in the images directory.
• Change the disabled button opacity for toolbars to 65% opacity. (I'm still looking for this.) This is no longer a part of this PR.

Issue(s) Resolved

Addresses part of ux-improvements #42. There may be work in this area in the future to see if we can come up with a better solution.

Affirmation

By submitting this Pull Request or typing my (user)name below,
I affirm the Developer Certificate of Origin
with respect to all commits and content included in this PR,
and understand I am releasing the same under Spyder's MIT (Expat) license.

I certify the above statement is true and correct:
isabela-pf

[isabela-pf]

/show binder

[github-actions]

👈 Launch a Binder instance on this branch

[isabela-pf]

I've gotten feedback that the disabled button opacity is inherited from QDarkStyleSheet right now, and that we can either override it within Spyder or put in a PR and request a release of QDarkStyleSheet.

Right now I'm leaning towards overriding it simply because it seems like a small change that is potentially only needed for Spyder. I'm open to feedback on this, though.

[isabela-pf]

Meeting feedback

• Update branch
• Double check that changes still work
• Make 65% opacity for disabled buttons a QDarkStyleSheet PR

[isabela-pf]

I talked with @steff456 because I couldn't find anything that looked to me like a disabled button state for the toolbar buttons in QDarkStyleSheet. This does need to happen in Spyder so I'll be adding it to this PR. Here's why:

• She figured out that this is because QDarkStyleSheet's disabled button styling isn't using the opacity we use in Spyder.
• Notice how the above link shows styling for QToolButton, a widget Spyder does import. The thing is that Spyder uses QToolButton for many button types and changes here might change more buttons that we expect.
• I wanted to try these changes out, and this seems like the place where opacity is applied. I also thinks this is an automatically generated file and changes here will be overridden. I'm now looking for where this is generated from.

[pep8speaks]

Hello @isabela-pf! Thanks for updating this PR. We checked the lines you've touched for PEP 8 issues, and found:

• In the file spyder/utils/color_system.py:

Line 119:20: W292 no newline at end of file

Comment last updated at 2021-07-29 14:16:11 UTC

[ccordoba12]

Thanks @isabela-pf for helping us to improve this! I left an initial review for you.

[ccordoba12]

Hey @isabela-pf, this requires a new release of QtAwesome with support for setting alpha in icon colors. For now I opened PR spyder-ide/qtawesome#166 to add that functionality.

[ccordoba12]

@isabela-pf, I left one last comment for you then this should be ready.

[ccordoba12]

@isabela-pf, I'm sorry but I missed another couple of details that were missing from your revert. I left suggestions for them below.

[ccordoba12]

Thanks a lot @isabela-pf for your help with this!