React Vue.js Storybook design-system design-pattern Angular TypeScript
Need help with storybook-design-token?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.
UX-and-I

Description

The Storybook Design Token Addon allows you to generate design token documentation from your stylesheets.

209 Stars 14 Forks MIT License 123 Commits 15 Opened issues

Services available

Need anything else?

Storybook Design Token Addon

Netlify Status

The Storybook Design Token Addon allows you to generate design token documentation from your stylesheets. Read more about the motivation for this addon here: https://dev.to/psqrrl/managing-design-tokens-using-storybook-5975

DEMO

Contents:

Some Features

  • Automatically generates design token descriptions from your annotated stylesheets and icon files
  • Parses CSS, SCSS/SASS, Less and SVG files
  • Provides various presenters to render examples of your design tokens
  • Automatically detects aliases of your css, sass or less variables
  • Preview changes to tokens directly in your browser (only for CSS variables)
  • Displays property values that match token values, so you can easily recognize hard coded values in your stylesheets

Installation

First, install the package using your package manager of choice.

npm install --save-dev storybook-design-token

or

yarn add --dev storybook-design-token

Configure for Storybook 5.3 and later

Skip to the next section if you are using Storybook 5.2 or older. For Storybook 5.2 and older add the addon to your

main.js
config file in the .storybook directory:
// main.js
module.exports = {
  stories: ['../**/*.stories.js'],
  addons: ['storybook-design-token']
};

Then add neccessary parameters to your

preview.js
in your .storybook directory:
import { addParameters } from '@storybook/react';

const cssReq = require.context('!!raw-loader!../src', true, /..css$/); const cssTokenFiles = cssReq .keys() .map((filename) => ({ filename, content: cssReq(filename).default }));

const scssReq = require.context('!!raw-loader!../src', true, /..scss$/); const scssTokenFiles = scssReq .keys() .map((filename) => ({ filename, content: scssReq(filename).default }));

const lessReq = require.context('!!raw-loader!../src', true, /..less$/); const lessTokenFiles = lessReq .keys() .map((filename) => ({ filename, content: lessReq(filename).default }));

const svgIconsReq = require.context('!!raw-loader!../src', true, /..svg$/); const svgIconTokenFiles = svgIconsReq .keys() .map((filename) => ({ filename, content: svgIconsReq(filename).default }));

addParameters({ designToken: { files: { css: cssTokenFiles, scss: scssTokenFiles, less: lessTokenFiles, svgIcons: svgIconTokenFiles }, options: { hideMatchingHardCodedValues: false } } });

Configure for Storybook prior to version 5.3

Create a file called

addons.js
in your .storybook directory and import the plugin:
// addon.js
import 'storybook-design-token/register';

In your

config.js
in your .storybook directory: tell the plugin what files to parse. Important: Call
addParameters
before making the
configure
call.
// config.js
import { configure, addParameters } from '@storybook/react';

// [...]

const cssReq = require.context('!!raw-loader!../src', true, /..css$/); const cssTokenFiles = cssReq .keys() .map((filename) => ({ filename, content: cssReq(filename).default }));

const scssReq = require.context('!!raw-loader!../src', true, /..scss$/); const scssTokenFiles = scssReq .keys() .map((filename) => ({ filename, content: scssReq(filename).default }));

const lessReq = require.context('!!raw-loader!../src', true, /..less$/); const lessTokenFiles = lessReq .keys() .map((filename) => ({ filename, content: lessReq(filename).default }));

const svgIconsReq = require.context('!!raw-loader!../src', true, /..svg$/); const svgIconTokenFiles = svgIconsReq .keys() .map((filename) => ({ filename, content: svgIconsReq(filename).default }));

addParameters({ designToken: { files: { css: cssTokenFiles, scss: scssTokenFiles, less: lessTokenFiles, svgIcons: svgIconTokenFiles }, options: { hideMatchingHardCodedValues: false } } });

// [...]

configure(loadStories, module);

Make sure to specify the right path after

!!raw-loader!
. The path has to be relative to your config file location.

Usage

The plugin tries to organize your tokens into token groups. You can annotate token groups by adding specific comment blocks to your stylesheets. Only annotated tokens will be listed by the plugin. The specified presenter is used to render examples of your tokens. See Presenters for further information.

CSS example:

/**
 * @tokens Colors
 * @presenter Color
 */

:root { --n0: #fff; /* Token Description */ --n100: #fbfbfb; --n200: #edeeef; --n300: #e4e5e7; --primary: var(--n300); }

/**

  • @tokens Border Radius
  • @presenter BorderRadius
  • /

:root { --border-radius-m: 4px; --border-radius-l: 8px; }

SCSS example:

/**
 * @tokens Colors
 * @presenter Color
 */

$n0: #fff; /* Token Description */ $n100: #fbfbfb; $n200: #edeeef; $n300: #e4e5e7; $primary: $n300;

/**

  • @tokens Border Radius
  • @presenter BorderRadius
  • /

$border-radius-m: 4px; $border-radius-l: 8px;

SVG example:

  

Make sure to specify the

data-token-name
attribute.

Presenters

Presenters are used to render examples for your design tokens. The following presenters are available:

  • Animation
  • BorderRadius
  • Border
  • Color
  • Easing
  • FontFamily
  • FontSize
  • FontWeight
  • Gradient
  • LineHeight
  • Opacity
  • Shadow
  • Spacing
  • Svg

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.