Theme: Improve .qunit-test.fail and expected/actual diff colors#1803
Merged
Krinkle merged 1 commit intoqunitjs:mainfrom Dec 21, 2024
Merged
Theme: Improve .qunit-test.fail and expected/actual diff colors#1803Krinkle merged 1 commit intoqunitjs:mainfrom
.qunit-test.fail and expected/actual diff colors#1803Krinkle merged 1 commit intoqunitjs:mainfrom
Conversation
Member
Author
|
@IgnaceMaes FYI. Bringing in a few more of your touches from qunit-theme-ember. Plus a few other improvements as well:
Remember IgnaceMaes/qunit-theme-ember#8 as well, to make sure Ember is ready for QUnit 3.0! |
Member
Author
|
I've adjusted the colors a bit further, to improve color contrast not just between foreground and background, but also between the green and red. I noticed that for people with color blindness, the status quo is significantly better in terms of differentiating green/red, and drawing attention to red. Note that the difference is quite small in the "Norm" view, but the others benefit significantly from this tweak to avoid a regression.
#qunit-banner.qunit-fail {
background-image: none;
- background-color: #E84646;
+ background-color: #EC4242;
.qunit-assert-list .pass {
- border-left: 10px solid #41C351;
+ border-left: 10px solid #64CF06;
.qunit-assert-list .fail {
color: #710909;
- border-left: 10px solid #E84646;
+ border-left: 10px solid #EC4242;
.qunit-assert-list .fail .test-actual {
- color: #E84646;
+ color: #EC4242;
} |
* Fix huge color contrast issue with the dark red background behind similarly dark colors, especially in `.counts`. * Remove white padding between test item edge and assert list assertion green/red shading. Instead, add some border-spacing to the assert item table. * Adjust various colors slightly to comply with WCAG guidelines. https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast * Fix broken `.qunit-test.pass .test-expected { color: qunitjs#999; }` override which was only applicable to passing "todo" tests as no other passing tests have failing assertions under them. This was meant to mute the colors of these failures to avoid distraction. However the CSS cascade has changed over time such that these styles no longer applied. This is likely masked by the fact that passing tests (including passing todos) are collapsed by default, so there's very little attention to these anyway. Restore these overrides, and extend them to the "diff" and "source" lines as well. Easy way to identify color usage: ``` $ git grep '#[0-9A-F][0-9A-F]*' src/core/qunit.css | sed 's/^.*\(#[0-9A-F]*\).*/\1/' | sort | uniq -c ``` Ref qunitjs#1774.
004f850 to
b568c2f
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Based on https://qunitjs.com/resources/example-fail.html
Follows-up #1774, to finish up remaining issues with poor color contrast.
Fix huge color contrast issue with the dark red background behind similarly dark colors, especially in
.counts.Remove white padding between test item edge and assert list assertion green/red shading. Instead, add some border-spacing to the assert item table.
Adjust various colors slightly to comply with WCAG guidelines. https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast
Fix broken
.qunit-test.pass .test-expected { color: #999; }override which was only applicable to passing "todo" tests as no other passing tests have failing assertions under them. This was meant to mute the colors of these failures to avoid distraction. However the CSS cascade has changed over time such that these styles no longer applied.This is likely masked by the fact that passing tests (including passing todos) are collapsed by default, so there's very little attention to these anyway.
Restore these overrides, and extend them to cover the assertion "message", "diff", and "source" lines as well.
Easy way to identify color usage: