Need help with tokens

[edgy pilot]

Hi am new to storybook, and i want to create a design system project where i can define my own styles, typography, colors etc . anyone here to help 🙂

[dusk hound]

Hey @edgy pilot Storybook doesn't really consume design tokens, your components do. You can however, document your design tokens in Storybook. For example, using DocBlocks such as: https://storybook.js.org/docs/react/api/doc-block-colorpalette#page-top

[devout totem]

For design tokens in JSON, such as those from https://tokens.studio (i'm happy to hear of similar products), a nice tool for working with these is https://amzn.github.io/style-dictionary/#/. It can convert your design tokens from common JSON formats into SCSS, CSS, JS, or even Android and iOS property files.

I have not tried this addon, but it looks interesting: https://github.com/UX-and-I/storybook-design-token/tree/v3

But listen to Varun, it is the fastest way. 😄

[sudden ruin]

@valid vessel — Anything to add here?

[edgy pilot]

have tried style dictionary which convert json into css n other formate , but i guess am unable to use it

[valid vessel]

I love style dictionary but it tends to need a bit more experimentation for anyone just looking to get started

the design token addon that @devout totem linked is really really cool too 🙂

[edgy pilot]

agreed

[sudden ruin]

You can also use style-dictionary to transform from JSON to JS, which you can then import within MDX docs in Storybook and document however you wish.

[valid vessel]

Starting with the doc block components is probably the easiest but most manual way to go 🙂

Color palette: https://storybook.js.org/docs/react/api/doc-block-colorpalette
Typography: https://storybook.js.org/docs/react/api/doc-block-typeset
Here's a good example of spacing from Chromatic's design system: https://tetra.chromatic.com/?path=/docs/tokens-spacing--docs

[edgy pilot]

thanks everyone

[valid vessel]

No problem 😄 Let me know how it goes 😄 I'm very curious about the design token work flow

[brittle fiber]

@valid vessel do you have some example on how to "dynamically" generate a list of tokens, e.g. colors? the ColorPalette doc block requires you to specifically type out each color. However, I'd like to iterate over all available colors and generate a token documentation programmatically.