Improve Inactive Tab Readability#1533
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
| background: none; | ||
| cursor: pointer; | ||
| background-color: white; | ||
| color: ButtonFace; |
There was a problem hiding this comment.
Addition of color property to .tab button class
|
|
||
| .tab button.active { | ||
| background-color: ButtonFace; | ||
| color: ButtonText; |
There was a problem hiding this comment.
Addition of color property to .tab button.active class
| font-weight: 400; | ||
| font-size: 1.25rem; | ||
| color: rgba(0, 0, 0, 0.73); | ||
| color: ButtonText; |
There was a problem hiding this comment.
Changes color property to variable
|
Thanks, @K8Sewell! What linter did all of the reformatting on this file? I think all of the changes are significant improvements, but I'm wondering if we should try to find a way to automate these changes in future. Ideally, it would be nice to add a tool to automatically validate the formatting, and apply the formatting changes in a separate PR so that this one can more clearly highlight what has actually changed. (I appreciate that you used comments to point this out, but if reviewing Git diffs in future, it might still be a bit obfuscated). I'm not trying to create endless amounts of extra work for you, and I could be pretty easily persuaded to merge this as-is, but if we want to do this "the right way" I think breaking apart the linting from other changes might be a little better. :-) |
|
@K8Sewell, I should also note that your changes appear to have been necessitated by having a "dark mode" setting in your browser. When I look at this in Firefox in "light mode," the unselected bottom tabs are quite hard to see: 
|
No, agreed. The opinions of the linter should be separate. Can absolutely break those out for easier future reading. |
Ah! Thank you for the catch. Will put this back in draft until both dark and light mode are readable. |
|
Looks good to me, thanks @K8Sewell @demiankatz! |
Summary
Inactive tab font colors were difficult to read when in 'Dark Mode'. This PR updates the font colors for the not active tabs for improved accessibility.
Screenshots
Details
Top Tabs
Before
After
Lower Tabs
Before
After