Color Select - A color palette plugin for Sanity

Allow users to select pre-determined colours via a color palette in Sanity.

This is a Sanity Studio v3 plugin, the plugin will not work versions 2 and lower.

Installation

``sh
// NPM
npm install @hatchd/sanity-plugin-color-select

// Yarn
yarn add @hatchd/sanity-plugin-color-select
`

Usage

Add it as a plugin in sanity.config.ts (or .js):

`ts
import {defineConfig} from 'sanity'
import {ColorSelect} from '@hatchd/sanity-plugin-color-select'

export default defineConfig({
//...
plugins: [ColorSelect()],
})
`

And create a field in Sanity. It returns the value property of the selected color.

`ts
export const backgroundColors = [
{
title: 'Green',
hex: '#8ac926',
value: 'primary',
},
{
title: 'Blue',
hex: '#57c4e5',
value: 'secondary',
},
{
title: 'Red',
hex: '#d62828',
value: 'tertiary',
},
];

defineField({
name: 'background',
description: 'Controls the background colour for this module',
type: 'colorSelect',
options: {
list: backgroundColors,
labels: false,
},
initialValue: 'primary',
}),
`

Options

| Property | Description |
| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| list (array) | A array of objects containing the properties title, hex and value.
hex is used if the value isn't a color hex code. |
| layout (string) | buttons and dropdown. Default: buttons |
| labels (boolean) | While using the buttons layout, display labels or not. Default: true` |

License

MIT © Grant Deelstra and Hatchd