Disclaimer: I'm not sure whether this is the right place to propose this, and I'm happy to go somewhere more suitable if somebody points me in that direction.

Is it possible to make a simple color palette as part of a style guide in which themers and designers can add the main colours and their purpose in a theme?
The output could be similar to this list of colors for drupal.org: https://drupal.org/node/1051644
The input could be a simple form with name, description and the hex value of the colour.

CommentFileSizeAuthor
#11 styleguide-1547146-11.patch26.45 KBtim.plunkett
#10 styleguide_palette-1547146-11.patch23.18 KBtim.plunkett
#9 Screen Shot 2012-12-04 at 9.23.18 AM.png21.51 KBtim.plunkett
#9 Screen Shot 2012-12-04 at 9.23.12 AM.png38.23 KBtim.plunkett
#6 styleguide_swatch-1547146-6.patch13.43 KBtim.plunkett
#2 palette-settings.png26.68 KBdead_arm

Comments

agentrickard’s picture

agentrickard
he/him
Primary language English
Location Georgia (US)
commented

Seems reasonable to me.

Any ideas what the settings form should look like? Where should the colors be displayed?

dead_arm’s picture

dead_arm
she/her
Primary language English
commented
StatusFileSize
new palette-settings.png26.68 KB

This is a feature that I think would be a pretty great addition to the style guide. I've been given time to work on style guide for an internal project, and came up with some ideas for the color palette. I'm also working on implementing them but thought it would be helpful to share.

The color palette could probably utilize some of the code from the color module in order to add the colors. The settings could come with default items and the option to add more if needed.

palette-settings.png

I think the display that was linked to in the summary is a nice solution for the output. I would personally just want the swatches to be smaller so they could be grouped more cohesively, but that is just more for my particular use case.

agentrickard’s picture

agentrickard
he/him
Primary language English
Location Georgia (US)
commented

Next question: how do we render the swatches?

dead_arm’s picture

dead_arm
she/her
Primary language English
commented

Thinking of using farbtastic in some fashion, but I need to explore how we could use it to render a swatch on the actual style guide and not just in the hex field.

agentrickard’s picture

agentrickard
he/him
Primary language English
Location Georgia (US)
commented

I was thinking of a separate page...

tim.plunkett’s picture

tim.plunkett
he/him
Primary language English
Location Philadelphia
commented
Version: 7.x-1.0 » 7.x-1.x-dev
Status: Active » Needs review
StatusFileSize
new styleguide_swatch-1547146-6.patch13.43 KB

Okay, here's an attempt at this.

Enable the new styleguide_swatch submodule, and go to admin/config/user-interface/styleguide-swatch

This is a first attempt, more to come.

dead_arm’s picture

dead_arm
she/her
Primary language English
commented

Thanks @tim.plunkett!

+++ b/styleguide_swatch/styleguide_swatch.moduleundefined
@@ -0,0 +1,114 @@
+    'view style guides' => array(
+      'title' => t('View theme style guides'),

This is a duplicate from the styleguide.module.

My original thinking was that this collective entity would be called palette, and only the smaller pieces would be called swatches, so changing the path would also entail renaming the whole submodule for naming purity.

@agentrickard, thoughts on styleguide_palette vs styleguide_swatch?

ifrik’s picture

ifrik
she/her
commented

Thanks for taking this up!
About displaying it: I think it's better not to have the hex value written on top of the actual field with the colour simply because it looks much cleaner. But that's a minor detail.
My original idea came from the list of colours on drupal.org http://drupal.org/node/1051644 - and I like clearity of it.
But thanks again - I'll try the patch in the next days.

tim.plunkett’s picture

tim.plunkett
he/him
Primary language English
Location Philadelphia
commented
StatusFileSize
new Screen Shot 2012-12-04 at 9.23.12 AM.png38.23 KB
new Screen Shot 2012-12-04 at 9.23.18 AM.png21.51 KB

@ifrik, this has both.

Screen Shot 2012-12-04 at 9.23.18 AM.png

Screen Shot 2012-12-04 at 9.23.12 AM.png

tim.plunkett’s picture

tim.plunkett
he/him
Primary language English
Location Philadelphia
commented
Assigned: Unassigned » tim.plunkett
StatusFileSize
new styleguide_palette-1547146-11.patch23.18 KB

Renamed the module, and added test coverage.

The last thing I think it needs is a palette per theme.

tim.plunkett’s picture

tim.plunkett
he/him
Primary language English
Location Philadelphia
commented
Assigned: tim.plunkett » Unassigned
StatusFileSize
new styleguide-1547146-11.patch26.45 KB

Okay, palettes per theme!
I think this is feature-complete.
This could use someone actually clicking through it and seeing if its what you all wanted :)

dead_arm’s picture

dead_arm
she/her
Primary language English
commented

I think this is working great!

Note that the way to get to it is under Configuration > User interface > Style guide palette.

tim.plunkett’s picture

tim.plunkett
he/him
Primary language English
Location Philadelphia
commented

It could be moved to admin/appearance/styleguide-palette, but it couldn't be admin/appearance/styleguide/palette because it might conflict with a theme called "palette".

ifrik’s picture

ifrik
she/her
commented
Status: Needs review » Reviewed & tested by the community

Perfect - this works just as I had been wishing for! Thanks a lot.
Just one small issue: Can you remove the black border around the swatches in 'View'?
It makes the colours look that little bit different.
Everything else just works fine, smooth and intuative.

dead_arm’s picture

dead_arm
she/her
Primary language English
commented
Status: Reviewed & tested by the community » Fixed

Since both ifrik and I have tested this out, it should be committed as is, and then a separate issue should handle the CSS. That way tim.plunkett receives fair credit without a re-roll and then we can work out the desired styling and UI further.

Committed color palette:
http://drupalcode.org/project/styleguide.git/commit/d1550cdc48e9a5f28c84e7df1955e1129dcdd3f3

Opened a issue to customize CSS: #1863424: Adjust the CSS of the color palette

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.