# sanity-plugin-color-list

> A custom input component for displaying an array of color to pick from.

Latest version **2.0.3** (published 2022-06-15) · ISC license · 0 weekly downloads

## Install

```sh
npm install sanity-plugin-color-list
pnpm add sanity-plugin-color-list
yarn add sanity-plugin-color-list
bun add sanity-plugin-color-list
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.3 |
| Published | 2022-06-15 |
| First published | 2019-11-20 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 47.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 26 |
| Author | Kim Björkman |
| Maintainers | kimbjorkman |
| Keywords | sanity, sanityio, sanity.io, sanity-plugin, cms, color, color-list, colorpicker |

## Links

- npm: https://www.npmjs.com/package/sanity-plugin-color-list
- Repository: https://github.com/KimPaow/sanity-color-list
- Homepage: https://github.com/KimPaow/sanity-color-list#readme
- Issues: https://github.com/KimPaow/sanity-color-list/issues
- npm.io page: https://npm.io/package/sanity-plugin-color-list

## Dependencies (5)

- [lodash](https://npm.io/package/lodash.md) ^4.17.20
- [@sanity/ui](https://npm.io/package/@sanity/ui.md) ^0.34.4
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.17.9
- [@ctrl/tinycolor](https://npm.io/package/@ctrl/tinycolor.md) ^2.5.4

## Alternatives

- [postcss-color-hex-alpha](https://npm.io/package/postcss-color-hex-alpha.md) — 6.4M weekly downloads
- [randomcolor](https://npm.io/package/randomcolor.md) — 348.0K weekly downloads
- [bows](https://npm.io/package/bows.md) — 1.3K weekly downloads
- [ep_prefer_color_scheme](https://npm.io/package/ep_prefer_color_scheme.md) — 260 weekly downloads
- [coc-yank](https://npm.io/package/coc-yank.md) — 61 weekly downloads

## Recent versions

- 2.0.3 (latest) — 2022-06-15
- 2.0.3-beta.2 (beta) — 2022-06-15
- 2.0.3-beta.0 — 2022-04-09
- 2.0.2 — 2021-06-26
- 2.0.1 — 2020-12-26
- 2.0.0 — 2020-12-21
- 2.0.0-beta.1 — 2020-12-20
- 1.2.1 — 2019-12-08
- 1.2.0 — 2019-12-08
- 1.1.2 — 2019-12-03
- 1.1.11 — 2019-12-02
- 1.1.1 — 2019-11-30
- 1.0.15 — 2019-11-21
- 1.0.14 — 2019-11-20
- 1.0.13 — 2019-11-20
- … 6 more at https://npm.io/package/sanity-plugin-color-list/versions

## README

![npm](https://img.shields.io/npm/dw/sanity-plugin-color-list?color=%235E6AD2&style=for-the-badge)

# Sanity Color List

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

![preview image](https://github.com/KimPaow/sanity-color-picker/raw/master/src/images/preview.png)

## 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:

```js
...,
{
  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.

```js 
{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.
1. 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.
1. `cd` into your project directory, run `npm install && npm start` - your sanity studio should be running on http://localhost:3333.
1. `cd` into the `plugins` director of your project.
1. 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`.
1. Open `sanity.json`, go to the `plugins` array and add `color-list`.
1. Re-start the sanity studio server with `npm start`.
1. Edit `schemas/post.js` and add follow the plugin documentation to add a `colorlist` type field.
1. 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.](https://github.com/KimPaow/sanity-color-picker/raw/master/CHANGELOG.md)

---
_Source: https://npm.io/package/sanity-plugin-color-list · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._