fix: change dark grayscale to use have a brighter action-button color (#1881)

The pressed state, such as used for the "Unfollow" button, was effectively
identical to the background, thus making it invisible.

Brighten it up to fix this. The relative differences are kept the same as
before and match the default theme,, e.g. the brightness ranges from
(darkest) Unfollow > Unfollow-hover > Follow > Follow-hover (brightest)

Fixes https://github.com/nolanlawson/pinafore/issues/1880.
This commit is contained in:
Timo Tijhof 2020-11-14 19:35:55 +00:00 committed by GitHub
parent f09e1bd975
commit 9acb3faac8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -14,3 +14,14 @@ $compose-background: lighten($main-theme-color, 52%);
@import "_dark.scss"; @import "_dark.scss";
@import "_dark_navbar.scss"; @import "_dark_navbar.scss";
@import "_dark_scrollbars.scss"; @import "_dark_scrollbars.scss";
:root {
// like base.scss, but with $anchor-color instead of $main-theme-color
// <https://github.com/nolanlawson/pinafore/issues/1880>
--action-button-fill-color: #{lighten($anchor-color, 18%)};
--action-button-fill-color-hover: #{lighten($anchor-color, 22%)};
--action-button-fill-color-active: #{lighten($anchor-color, 5%)};
--action-button-fill-color-pressed: #{darken($anchor-color, 7%)};
--action-button-fill-color-pressed-hover: #{darken($anchor-color, 2%)};
--action-button-fill-color-pressed-active: #{darken($anchor-color, 15%)};
}