New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Drop currentColor from button background #3556

Merged
merged 2 commits into from Nov 20, 2017

Conversation

Projects
None yet
3 participants
@jasmussen
Contributor

jasmussen commented Nov 20, 2017

This fixes #3460

Alas, if the theme uses a dark background, then the text will likely be light. That means a light button with white text.

I tried using CSS color inversion. This worked for making the text color be the inverse of the button color:

color: currentColor;
filter: invert( 100% );
mix-blend-mode: color-dodge;

screen shot 2017-11-20 at 10 04 12

Clever right? It not only inverses the text color, but it also increases the contrast with the blend mode.

Alas, the blend mode isn't very widely supported. So I just changed to a dark gray background:

screen shot 2017-11-20 at 10 04 55

Drop currentColor from button background
This fixes #3460

Alas, if the theme uses a dark background, then the text will likely be light. That means a light button with white text.

@jasmussen jasmussen self-assigned this Nov 20, 2017

@jasmussen jasmussen requested a review from youknowriad Nov 20, 2017

@youknowriad

Looks good

@codecov

This comment has been minimized.

Show comment
Hide comment
@codecov

codecov bot Nov 20, 2017

Codecov Report

Merging #3556 into master will decrease coverage by 0.11%.
The diff coverage is n/a.

Impacted file tree graph

@@            Coverage Diff             @@
##           master    #3556      +/-   ##
==========================================
- Coverage   35.05%   34.93%   -0.12%     
==========================================
  Files         263      268       +5     
  Lines        6703     6849     +146     
  Branches     1220     1240      +20     
==========================================
+ Hits         2350     2393      +43     
- Misses       3675     3764      +89     
- Partials      678      692      +14
Impacted Files Coverage Δ
editor/components/word-count/index.js 0% <0%> (ø) ⬆️
editor/modes/text-editor/index.js 0% <0%> (ø) ⬆️
blocks/hooks/index.js 100% <0%> (ø) ⬆️
editor/store-defaults.js 100% <0%> (ø) ⬆️
blocks/api/matchers.js 92.85% <0%> (ø)
editor/post-permalink/index.js 0% <0%> (ø)
blocks/index.js 100% <0%> (ø)
blocks/hooks/matchers.js 42.85% <0%> (ø)
editor/post-title/index.js 0% <0%> (ø)
components/dashicon/index.js 6.08% <0%> (+1.21%) ⬆️
... and 2 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update d6af47f...72a1fa1. Read the comment docs.

codecov bot commented Nov 20, 2017

Codecov Report

Merging #3556 into master will decrease coverage by 0.11%.
The diff coverage is n/a.

Impacted file tree graph

@@            Coverage Diff             @@
##           master    #3556      +/-   ##
==========================================
- Coverage   35.05%   34.93%   -0.12%     
==========================================
  Files         263      268       +5     
  Lines        6703     6849     +146     
  Branches     1220     1240      +20     
==========================================
+ Hits         2350     2393      +43     
- Misses       3675     3764      +89     
- Partials      678      692      +14
Impacted Files Coverage Δ
editor/components/word-count/index.js 0% <0%> (ø) ⬆️
editor/modes/text-editor/index.js 0% <0%> (ø) ⬆️
blocks/hooks/index.js 100% <0%> (ø) ⬆️
editor/store-defaults.js 100% <0%> (ø) ⬆️
blocks/api/matchers.js 92.85% <0%> (ø)
editor/post-permalink/index.js 0% <0%> (ø)
blocks/index.js 100% <0%> (ø)
blocks/hooks/matchers.js 42.85% <0%> (ø)
editor/post-title/index.js 0% <0%> (ø)
components/dashicon/index.js 6.08% <0%> (+1.21%) ⬆️
... and 2 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update d6af47f...72a1fa1. Read the comment docs.

@samikeijonen

This comment has been minimized.

Show comment
Hide comment
@samikeijonen

samikeijonen Nov 20, 2017

Contributor

Can you change it to background-color because that's what it is:)

Contributor

samikeijonen commented Nov 20, 2017

Can you change it to background-color because that's what it is:)

@jasmussen jasmussen merged commit bc46f77 into master Nov 20, 2017

3 checks passed

codecov/project 34.93% (-0.12%) compared to d6af47f
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details

@jasmussen jasmussen deleted the try/inverse-button-color branch Nov 20, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment