Sanity Color List

Display colors for editors to choose from with this custom input component.

2.0.0 Breaking changes

Starting from 2.0.0 the whole color object is returned and the type has been changed from colors to colorlist.

Installation

1. sanity install color-list
2. In your schema:

...,
{
  title: "Color List",
  description: "Pick a color",
  name: "colors",
  type: "colorlist", // required
  options: {
    list: [
      { title: "Red", value: "#f16d70" },
      { title: "Teal", value: "#88c6db" },
      { title: "Purple", value: "#aca0cc" },
      { title: "Green", value: "#bdcdcb" },
      { title: "White", value: "white" }
    ]
  }
},
...

Done. The component returns the selected list object. If the value key was an object it will return an rgb string instead.

Options

This plugin offers some ways of customization via the options object. If you don't use an off-white theme in your studio the defaults should work well out of the box.

{string} [background="white"] // If you are using a theme with a non-white bg use this to inform the plugin of this non-white background color so that contrasts can be calculated properly
{object} [borderradius]
{string} [borderradius.outer="100%"] // Borderradius for the active decorator
{string} [borderradius.inner="100%"] // Borderradius for the main item
{number} [contrastcutoff=20] // 0-255. When the contrast between the background and the color falls below this level decorate the item with a lighter/darker value for better contrast
{number} [darken=10] // How much darker than the actual color the decoration color will be
{number} [lighten=10] // How much lighter than the actual color the decoration color will be
{bool} [tooltip] // Set to true to show a tooltip with the colors title on hover/focus
{object} list
{string} list.title // Used to display a tooltip if activated
{string || object} list.value // can be an object with keys for r, g and b or a valid color string. 0x formatted hex strings are not supported at the moment.

Contributing

Issues are actively monitored and PRs are welcome. When developing this plugin the easiest setup is:

1. Fork this repo.
2. Install the sanity cli and create a sanity project: npm install -g @sanity/cli && sanity init. Follow the prompts, starting out with the blog template is a good way to go.
3. cd into your project directory, run npm install && npm start - your sanity studio should be running on http://localhost:3333.
4. cd into the plugins director of your project.
5. Fork this repo and clone your fork into the plugins directory inside your project git clone git@github.com:your-fork/sanity-plugin-color-list.git.
6. Open sanity.json, go to the plugins array and add color-list.
7. Re-start the sanity studio server with npm start.
8. Edit schemas/post.js and add follow the plugin documentation to add a colorlist type field.
9. Your studio should reload, and now when you edit the plugin code it should reload the studio, when you're done create a branch, put in a PR and a maintainer will review it. Thank you!

Changelog

See the changelog here.