[META] Rework Color Module

[wesruv]

To support a new default theme and a better dev & user experience, I'd like to update the Color Module, which is apparently a giant turd right now.

Whether we do this work in the existing color module, or a new module to eventually replace color, I'm not particular.

On the user experience, I want a site-builder to be able to specify 1 to 3 colors that describe their brand, and I want to be able to extrapolate that into all of the actual colors I need for the theme.

I'd also like to give the ability to expose all of the colors that the theme needs so a user could get into the nitty gritty, or just tweak the auto-created colors that were based on the 1-3 colors.

• [x] #3186 Theme settings: Improve the color settings page
• [x] #1960 Replace the preview with a live preview of the site
• [x] #792 Regenerate css files on config import
• [x] #3153 Remove image and gradient handling from the color module because those things are not needed anymore
• [ ] #2554 Use config for color module settings
• [ ] #1949 [UX] New interface for editing, previewing, and saving theme settings
• [ ] Allow themes to provide config files and remove those config files when the theme is disabled
• [ ] Rework the color shifting code to be easier to use
• [ ] Allow the creation of color groups to have multiple color shift bases
• [x] Get the full list of CSS files from the theme info instead of requiring the themer to list them all out again
• [x] Allow the color module to modify the the base theme colors, when using a sub theme
• [x] #3209 Add predefined color schemes to basis
• [x] #3257 Improve ability to nest color elements on the theme settings form
• [ ] #3328 Kickass Feature: Allow extracting a color scheme from an uploaded image, and apply it to themes supporting color module.
• [ ] #6057 Color Module is intolerant of uppercase Hex Values

[wesruv]

The hardest part for me is figuring out how to output a CSS file from PHP...

CSS aggregation is creating files in the files dir, we could do something like that?

RSS feeds are a common thing that don't have a proper file, but are generated by the server... is there a way to return CSS from a URL that drupal responds to instead of creating a file?

outOfMyDepth

[wesruv]

I'm also wanting to do color functions in the CSS template, like Sass color functions, but these can totally be written in PHP. It shouldn't be overly hard to write color functions (pretty sure I could handle this).

[serundeputy]

@wesruv this is a proof of concept.

It writes out a settings form to a new-color.css file in the files directory.

Website: http://1411.backdrop.backdrop.qa.backdropcms.org Username: admin Password: j7DiFXg7

~Geoff

[wesruv]

From our design meeting today, here's some screenshots from tumblr and squarespace CSS/theme admin.

Squarespace

Color chooser

Font chooser

Tumblr

Color chooser

[wesruv]

Here's an idea for the settings page... going to do some more noodling.

I'm thinking maybe we can load a page with ajax, shove it in a div and do a CSS transform to scale it down? That way we might be able to update colors on the fly? Was thinking an iframe, but we'd have a hard time getting it to update CSS on the fly.

[wesruv]

... actually, on second thought it'd be better to have it in an iframe. If we could periodically check for a new/new version of temp file and reload the page if there is reload the page in the iframe, that might work best?

[klonos]

Looks really cool. Add a dropdown to see how it would look on various layouts and it would be golden!

[wesruv]

@klonos if it's an iframe you'd actually be able to navigate the site as normal. We'd have to have something that told the site to use the temp stylesheet, but I think that might work quite well...

[wesruv]

Here's some thoughts on the 'Customize All Colors' UI. Thinking the site preview would follow you as you scroll.

[klonos]

Huge :+1: ...you could use secondary tabs instead of fieldsets. ...or accordions? That would require less scrolling and less JS magic (for the preview to follow scrolling).

[klonos]

...because the real issue with long pages is not things like keeping the preview within view for example. The real issue is that users need to scroll a lot in order to reach the submit buttons.

[quicksketch]

These look great @wesruv!

This UI makes me think at least the following changes will be needed for Color module:

• Previously, Color module only read a list of colors and allowed you to change them. This form is much more complicated, indicating we will need to let the theme specify it's own form for color settings. Themes can already make forms, but we'd probably need to expand their abilities to get this working.
• I imagine that each of those circles would be the input mechanism for colors (probably via "tooltip-like" UI, as shown your Tublr screenshots). I would love it if Color module were responsible for providing the <input type="color"> element in a compatible manner. Though I see that it is about to be supported on most all browsers: http://caniuse.com/#feat=input-color

if it's an iframe you'd actually be able to navigate the site as normal. We'd have to have something that told the site to use the temp stylesheet, but I think that might work quite well...

This would be super-cool, but I don't think you can shrink down the real site to fit into an iframe can you? I just found http://caniuse.com/#feat=css-zoom, so maybe it's possible?

[dboulet]

This would be super-cool, but I don't think you can shrink down the real site to fit into an iframe can you? I just found http://caniuse.com/#feat=css-zoom, so maybe it's possible?

It should be possible in CSS if you apply something like transform: scale(0.5) to the iframe element.

[wesruv]

This would be super-cool, but I don't think you can shrink down the real site to fit into an iframe can you? I just found http://caniuse.com/#feat=css-zoom, so maybe it's possible?

@dboulet is correct, that's what I was hoping would work, and it does :smile: http://codepen.io/wesruv/pen/pbvjZY

codepen-or-it-didnt-happen

[wesruv]

I imagine that each of those circles would be the input mechanism for colors (probably via "tooltip-like" UI, as shown your Tublr screenshots). I would love it if Color module were responsible for providing the element in a compatible manner. Though I see that it is about to be supported on most all browsers: http://caniuse.com/#feat=input-color

Sounds good to me, I think we'll need to provide a fallback either way, but it doesn't have to be as crazy awesome.

[mikemccaffrey]

Hey folks, sorry that I'm late to the discussion.

I think that the failure of the D7 Color module was in the fact that it was trying to be a one size fits all solution for all themes, when what was really needed was a better framework for each theme to define its own settings and to allow users to easily edit, preview, and apply them.

Why not just allow themes to define their own settings for colors and such, just like they already can do, and just work on creating a new interface to provide a live preview of what happens when theme settings change?

[biolithic]

Mike I like this idea, I just thought everyone needed "The D7 Color Module" and for all themes to work with it. Like, "you can't remove nodes from Drupal/Backdrop, and you can't remove the Color Module." I wish I had more attention to this but it sounds like Wes is working on it.

On Wed, Jun 1, 2016 at 2:48 PM, Mike McCaffrey notifications@github.com wrote:

Hey folks, sorry that I'm late to the discussion.

I think that the failure of the D7 Color module was in the fact that it was trying to be a one size fits all solution for all themes, when what was really needed was a better framework for each theme to define its own settings and to allow users to easily edit, preview, and apply them.

Why not just allow themes to define their own settings for colors and such, just like they already can do, and just work on creating a new interface to provide a live preview of what happens when theme settings change?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/backdrop/backdrop-issues/issues/1905#issuecomment-223104129, or mute the thread https://github.com/notifications/unsubscribe/ABJ8DhYngF4KZDTS4dHm-J0a9deFckGuks5qHeH9gaJpZM4Iipgz .

[wesruv]

I've prioritized responsive drop down menus in core, but have been stewing on this. Feels like it needs some thought.

[wesruv]

Responded for why I'm leaning towards module layer providing functionality for themes to use in that issue: https://github.com/backdrop/backdrop-issues/issues/1949#issuecomment-223156646

[jenlampton]

With 15 days left before feature freeze and no PR here yet I'm not sure this is likely for 1.6. Pushing to 1.7.

[herbdool]

Came across this in my research https://www.drupal.org/node/445990 -- some work went into refactoring color module for Drupal 8 but stalled for now.

[jenlampton]

Removing the core milestone since this issue has missed 2+ core releases. We can always add a milestone back should it become a priority.

[hosef]

I would like to get the ball rolling on this again. I have been making a list of problems that I have run into while working on #3028, and I think we could get some of these in quickly and make a huge improvement to the quality of the module.

Edit: I moved the list of tasks to the top comment

[jenlampton]

These look great @hosef! Would you please copy the checklist into the top/parent issue, and rename this issue so it's a meta? Something like [META] Rework Color Module?

[klonos]

Looking at the issue summary, I see sub-issues related to the generic overhaul of the theme customization UI. These are not color.module-specific. Perhaps we should clean the summary up and move certain sub-issues to a separate META?

[ericfoy]

Color Module is intolerant of upper case hex values.

I used uppercase hex values in my css file, only to learn (after three hours of head-scratching and hair-pulling) that the Color Module is intolerant of upper case letters. It reads #45C690 as #000000, and proceeds from there. So you basically get kind of a dark mode thing going for all your color configurations. Once I replaced my biggie letters with smallies, everything worked great.

[klonos]

Thanks @stpaultim for raising an issue for what @ericfoy reported 🙏🏼 ...you beat me to it 😅