Package Exports

storybook-color-picker

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (storybook-color-picker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

storybook-color-picker

Description

An addon for Storybook that allows you to quickly find and copy to clipboard any color from your custom color palette.

Technology

Created with TypeScript, React and Storybook.

Usage

$ npm i storybook-color-picker

In your .storybook folder find main.js file and add this addon like below

  module.exports = {
    ...
    "addons": [
      ...
      "storybook-color-picker"
    ]
  }

In your .storybook folder find preview.js file and add your color palette to parameters like below. Scroll down to find out how your corol palette must look like.

import yourFancyColorPalette from './yourFancyColorPalette.json';

export const parameters = {
  ...
  colorPalette: yourFancyColorPalette,
}

Color palette

as Object

type ColorPaletteAsObjecy = Record<string, Record<string, string> | string>;

Example:

  {
      "light": {
          " 500": "#aaa",
          " 100": "#eee",
          " 400": "#bbb",
          " 200": "#ddd",
          " 300": "#ccc"
      },
      "dark": {
          "0100": "#888",
          "0500": "#000",
          "0400": "#222",
          "0200": "#666",
          "0300": "#444"
      }
  }

Usefull tip: add white spaces or zeros before numerical keys to prevent auto sorting

as Array

  type ColorPaletteAsArray = {
      label: string,
      values: [
        {
          label: string,
          value: string, // valid hex value
        }
      ],
  }

Example:

  [
    {
      "label": "light",
      "values": [
        {
          "label": "100",
          "value": "#fff"
        },
        {
          "label": "200",
          "value": "#aaa"
        }
      ]
    },
    {
      "label": "dark",
      "values": [
        {
          "label": "100",
          "value": "#222"
        },
        {
          "label": "200",
          "value": "#000000"
        }
      ]
    }
  ]