rensatsu/blueberry-css

Not necessarily a problem, it's more of a few small suggestions

SoaringGecko opened this issue · 1 comments

Please note these suggestions all have to do with accessibility/color contrast. Also I look forward to using blueberry-css in my future projects. You've done a really nice job with this especially considering it's just one person working on it.

Dark Theme

In the dark theme instead of using the color #665eba for the .btn text you could use #ac9eff or #867bdb and then switch it to #bbadff or #9387e8 while hovering.

For the hd's #8885ad is perfect, though for the bodies text #b8b5df or #918eb7 could work a little better.

I have also found that putting the background color of ::selection to either #00445b or #00273c also helps a little bit with the contrast between the highlight and text, though I'm not quite so sure on this one do to it's contrast with the background color of the body and .btn elements.

Light Theme

In the light theme using the color #665eba for the .btn text is actually not bad, though if you wanted it to be little better you could use #524da6, then #434098 or #645cb8 can be used while hovering (though what you are currently using also isn't too bad of a color for this one either).

Thank you for suggestions. As of now, my implementation of dark theme is really poor. But for light theme, it is possible to override defaults by using sass/scss styles: you can set variables from _variables.scss in your own sass/scss stylesheet and importing main style (@import "@rensatsu/blueberry-css/scss/blueberry";).

For example:

@charset "utf-8";
$color-background: #fcfcfe;
$font-family-sans: "Public SansVariable";
$font-family-mono: "IBM Plex Mono", monospace;
@import "@rensatsu/blueberry-css/scss/blueberry";