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

Add predefined color schemes to Basis #3209

Open
quicksketch opened this Issue Jul 22, 2018 · 12 comments

Comments

Projects
None yet
6 participants
@quicksketch
Copy link
Member

quicksketch commented Jul 22, 2018

Describe your issue or idea

In #3028, we added color support to Basis. But currently, there is only a single pre-defined color scheme (the default Basis-blue). We should include a few out-of-box color schemes for Basis like we do for Bartik.


PR by @oadaeh backdrop/backdrop#2299

@klonos

This comment has been minimized.

Copy link
Member

klonos commented Jul 23, 2018

Thanks for opening this one @quicksketch. I think that this will make Basis a bit more popular 👍

Any suggestions re colors? Should we start by imitating the Bartik ones?

@wesruv? ...this is your baby.

@quicksketch

This comment has been minimized.

Copy link
Member

quicksketch commented Jul 23, 2018

As boring as it may sound, the most likely colors to be popular are blue and gray. Rather than getting crazy, I think a second blue variant, and two gray ones would provide popular options.

I'm also of the opinion if a color scheme doesn't look good we shouldn't include it. Sometimes it can be tempting to get crazy just to show the level of flexibility, but users are pretty good at shooting themselves in the foot with color module as it is.

@klonos

This comment has been minimized.

Copy link
Member

klonos commented Jul 28, 2018

[comment moved to its own issue: #3231]

@Harry-Flatt

This comment has been minimized.

Copy link

Harry-Flatt commented Aug 2, 2018

I made a few here. Due to some default settings and lack of options in the ui, 'light-on-dark' color schemes are basically impossible to make readable. The 'cyber' theme is a good example of this.

cyber
cyber

metro
metro

polar
polar

tropical
tropical

@klonos

This comment has been minimized.

Copy link
Member

klonos commented Aug 3, 2018

Thanks @Harry-Flatt ! 👍 ...way too many things to do over the weekend, but might take a crack at adding these in.

Also worth noting, as mentioned today in the dev meeting, that we could perhaps try to add the color schemes that come with Bartik.

@herbdool

This comment has been minimized.

Copy link

herbdool commented Aug 21, 2018

Thanks for getting the ball rolling on this! I took a look at some of these. I second the lack of options. Seems like there need to be a few more colour options in order to fix edge cases. I noticed that color module will blend colours for some areas and that can be hit or miss. In the following it's definitely a miss
for the tabs when I test out tropical:

screenshot from 2018-08-20 21-10-39

It seems like the link colour for text ends up being the same for the tabs and breadcrumbs which just looks bad. Not to mention the generated brown colour for the tab background.

@oadaeh

This comment has been minimized.

Copy link

oadaeh commented Sep 9, 2018

I created the initial PR to take care this.
It was more challenging than I imagined, because there was a lot of color manipulation that needed to be done to get things looking okay, and that is not my forte. As a result, there might be a few colors that don't go 100% with the palette.
I added the schemes from Bartik, except for Blackdrop and Blue Lagoon, because they both seemed rather close to the default Basis scheme.
I also added the schemes from Harry, except for Cyber (because of the dark on light issue, which I really didn't want to try to fix). Both Metro and Tropical seemed to be lacking some color definition for a couple of the items (as noted by @herbdool), so I had to add a couple in, and they might also not go 100% with the palette.
I'm not sure how much more time I will have over the next week for this to have it ready for release, but I can do my best to make small, quick changes in a timely manner, if people reviewing are specific with changes that should be made.
Anyway, for what it's worth, there it is.

@quicksketch

This comment has been minimized.

Copy link
Member

quicksketch commented Sep 15, 2018

I bumped this to 1.11.1, as today is release day for 1.11.0. I think this could qualify for being in bug fix releases on the grounds of being a UX improvement. If we can get a design eye on this to give an approval, that would also be wonderful.

@oadaeh

This comment has been minimized.

Copy link

oadaeh commented Sep 16, 2018

@quicksketch do you have anyone in mind?

@quicksketch

This comment has been minimized.

Copy link
Member

quicksketch commented Sep 27, 2018

Well @wesruv in particular, since he did the original theme. But any self-described designer would be appreciated. 😄

@jenlampton

This comment has been minimized.

Copy link
Member

jenlampton commented Sep 27, 2018

I gave the colors a once-over and though I like most of them, I'm worried that several would be inaccessible. Can we give these all a pass through https://webaim.org/resources/contrastchecker (or a similar tool)?

@jenlampton jenlampton modified the milestones: 1.11.1, 1.11.2 Oct 10, 2018

@jenlampton jenlampton modified the milestones: 1.11.2, 1.11.3 Oct 18, 2018

@jenlampton jenlampton modified the milestones: 1.11.3, 1.11.4 Dec 13, 2018

@jenlampton jenlampton modified the milestones: 1.12.0, 1.11.4 Jan 3, 2019

@jenlampton

This comment has been minimized.

Copy link
Member

jenlampton commented Jan 3, 2019

In today's design meeting we confirmed this is a task and can be added into any bug-fix release. Adding milestone back.

@jenlampton jenlampton modified the milestones: 1.11.4, 1.12.1 Jan 15, 2019

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