Skip to content

Commit

Permalink
HTML Reporter: Increase contrast and use richer colors overall
Browse files Browse the repository at this point in the history
Tweak our colors away from the semi-greyish colors we had before,
toward more dark/saturated or bright colors.

Also reduce the overall number of distinct colors, reusing the same
ones more often.

* Change most uses of black (`#000000`) to `#0D3349`, which is the
  very dark blue we already used for the `#qunit-header` background.

* Change the text color for `#qunit-testresult` from `#2B81AF` to
  that same very dark blue `#0D3349`. The text color previously used
  here was a medium blue that we didn't use for any other text.

* Change text in `#qunit .pass` from `#528CE0` to `#2F68DA`,
  this is more saturated and appears darker. I also moved its hue
  slightly from cyan-blue, more toward blue-violet.

* Change the Rerun link from the near-invisible `#C2CCD1` to instead
  inherit the text color of `#qunit .pass` or `#qunit .fail`, e.g.
  `#2F68DA`. Also, to make it still stand out as special, add an
  underline. It retains its liberal padding for easy clickability.

Clean up:

* Remove unused color value for `#qunit-header`. Instead set it to that
  of `#qunit-header a` (it only contains a link), and let the latter
  inherit this color.

* Replace redundant `#qunit-tests .fail .test-name` and
  and `#qunit-tests .fail .module-name ` styles.

Ref qunitjs#1427.
  • Loading branch information
Krinkle committed Apr 10, 2021
1 parent be3a71b commit 756b721
Showing 1 changed file with 26 additions and 23 deletions.
49 changes: 26 additions & 23 deletions src/qunit.css
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
#qunit-header {
padding: 0.5em 0 0.5em 1em;

color: #8699A4;
color: #C2CCD1;
background-color: #0D3349;

font-size: 1.5em;
Expand All @@ -80,7 +80,7 @@

#qunit-header a {
text-decoration: none;
color: #C2CCD1;
color: inherit;
}

#qunit-header a:hover,
Expand Down Expand Up @@ -179,7 +179,7 @@
border: 1px solid #D3D3D3;
border-top: none;
border-radius: 0 0 .25em .25em;
color: #000;
color: #0D3349;
background-color: #F5F5F5;
z-index: 99;
}
Expand All @@ -191,8 +191,8 @@

#qunit-modulefilter-dropdown .clickable.checked {
font-weight: bold;
color: #000;
background-color: #D2E0E6;
color: #0D3349;
background-color: #E2F0F7;
}

#qunit-modulefilter-dropdown .clickable:hover {
Expand Down Expand Up @@ -296,17 +296,12 @@

#qunit-tests li a {
padding: 0.5em;
color: #C2CCD1;
text-decoration: none;
}

#qunit-tests li p a {
padding: 0.25em;
color: #6B6464;
color: inherit;
text-decoration: underline;
}
#qunit-tests li a:hover,
#qunit-tests li a:focus {
color: #000;
color: #0D3349;
}

#qunit-tests li .runtime {
Expand Down Expand Up @@ -366,7 +361,7 @@

/*** Test Counts */

#qunit-tests b.counts { color: #000; }
#qunit-tests b.counts { color: #0D3349; }
#qunit-tests b.passed { color: #5E740B; }
#qunit-tests b.failed { color: #710909; }

Expand All @@ -379,22 +374,34 @@

/*** Passing Styles */


#qunit-tests .pass {
color: #2F68DA;
background-color: #E2F0F7;
}

#qunit-tests .pass .test-name {
color: #366097;
}

#qunit-tests li li.pass {
color: #3C510C;
background-color: #FFF;
border-left: 10px solid #C6E746;
}

#qunit-tests .pass { color: #528CE0; background-color: #D2E0E6; }
#qunit-tests .pass .test-name { color: #366097; }

#qunit-tests .pass .test-actual,
#qunit-tests .pass .test-expected { color: #999; }

#qunit-banner.qunit-pass { background-color: #C6E746; }

/*** Failing Styles */

#qunit-tests .fail {
color: #000;
background-color: #EE5757;
}

#qunit-tests li li.fail {
color: #710909;
background-color: #FFF;
Expand All @@ -406,10 +413,6 @@
border-radius: 0 0 5px 5px;
}

#qunit-tests .fail { color: #000; background-color: #EE5757; }
#qunit-tests .fail .test-name,
#qunit-tests .fail .module-name { color: #000; }

#qunit-tests .fail .test-actual { color: #EE5757; }
#qunit-tests .fail .test-expected { color: #008000; }

Expand Down Expand Up @@ -442,8 +445,8 @@
/** Result */

#qunit-testresult {
color: #2B81AF;
background-color: #D2E0E6;
color: #0D3349;
background-color: #E2F0F7;

border-bottom: 1px solid #FFF;
}
Expand Down

0 comments on commit 756b721

Please sign in to comment.