Color type

[custa1200]

It would be handy to add a color Type to the list of widget that could use the native color pickers as a minimum

[tech4him1]

@custa1200 You can always add a custom widget to your CMS, like this: https://www.netlifycms.org/docs/extending/#registerwidget.

[erquhart]

I wouldn't mind this as a core widget either. We're probably going to get rid of the concept of core widgets anyway to some extent after 1.0.

@custa1200 here's a react component that could handle most of the work: https://casesandberg.github.io/react-color/

I'd envision an input sized box that is colored with the selected color, and with the text color value in the middle. Clicking could just trigger one of the popup styles widgets in the linked demo above.

Config options should probably include:

• format (String) (default: 'hex') - one of 'hex', 'rgb', 'rgba', or 'hsla'
• defaultColors (Array) (optional) - array of color values to display for click selection
• allowInput (Boolean) (default: false) - whether to allow a raw value to be manually entered, setting this to true requires that defaultColors be defined

Thoughts?

[custa1200]

Would be nice to have a lookup to a bunch of predefined colours too. Being that I’m trying to use this as a theme creator back end for
Something it would be great to be able to
define a list of colours elsewhere that it could consume.

[tech4him1]

@custa1200 Do you think @erquhart's idea of defaultColors above would be what you are looking for?

[custa1200]

I think that would be a great starting point. My use case would be I’d also like to be able to have a user add a list of theme colours and then be able to choose from that list for other items.

[erquhart]

I mentioned the concept of a third "meta" entry type to complement the collection and singles types we've been discussing. That was for curating a collection of tags for use throughout CMS entries. This would benefit from similar treatment. The idea being that there are low level settings, the stuff in the config, which will eventually be editable for CMS admins through a settings tab, but then there are content level settings that a editors would want access to. They're not really content per se.

For now, this widget is a good start, as @custa1200 said.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[dumptyd]

Are there any plans to add this as a core widget or having a generic input widget that would support most of the input types listed here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#%3Cinput%3E_types?

[erezrokah]

@dumptyd this is a good candidate for contribution.

[felixboet]

Thanks @erezrokah to point me here. Here is the color-picker I created based on react-color. Here is the live example

I would propose to not allow as many color-pickers from react-color, as I do now, because some are not working correctly and it would be some work to fully supportthem all. To keep it simple we could just use the "chrome picker" and keep my custom widget for advanced usecases?

[felixboet]

Here is my proposal for the color widget, suggestions and feedback welcome!

I added two options:

• "enableAlpha" (defaults to false) to show the alpha slider in the color picker
• "allowInput" (defaults to false) so by default you can just use the color picker to prevent input of invalid color strings in the string field.

There is already an (unmaintained) NPM module called "netlify-cms-widget-color" ... any idea what's the best way to solve that? ask the author to transfer ownership?

(All additional styling is done by inline styles, should maybe be changed)

[erezrokah]

Here is my proposal for the color widget, suggestions and feedback welcome!

Do you mind opening a PR? This way it will get more visibility. You can keep it as draft until it's ready.

There is already an (unmaintained) NPM module called "netlify-cms-widget-color" ... any idea what's the best way to solve that? ask the author to transfer ownership?

netlify-cms-widget-color-picker?

[felixboet]

Do you mind opening a PR? This way it will get more visibility. You can keep it as draft until it's ready.

@erezrokah done, anything to do to mark it as a draft?

[erezrokah]

Thanks @felixboet, this is a small link to do it:

I went ahead and clicked it for you 😄