Storybook / Demo page SD example for documenting tokens

[kellettemma]

Hi,

Is there a way to generate a style guide listing all the tokens and how they look? e.g.

https://raw.githubusercontent.com/salesforce-ux/theo/master/assets/doc_example.png

Thanks, Emma

[dbanksdesign]

Looks like we used to have one a while ago, but when we transitioned from 'templates' to 'formats' we didn't include it. You can take a look at the template here: https://github.com/amzn/style-dictionary/blob/main/lib/common/templates/static-style-guide/index.html.template

You can use that template in a custom format like this:

const fs = require('fs');
const styleDictionary = require('style-dictionary').extend('config.json');
const _ = require('lodash');

const template = _.template( fs.readFileSync('templates/myFormat.template') );

styleDictionary.registerFormat({
  name: 'my/format',
  formatter: template
});

where templates/myFormat.template is the path to that template. I haven't tested this so I'm not sure of exactly what it would look like, but hopefully it is a start.

[chazzmoney]

Also, if anyone wants to provide/update a generic style guide generator, we would be love to merge that in to the codebase

[chazzmoney]

@didoo @elliotdickison @davixyz @tonyjwalt @7studio @jreichenberg

Quick question for some of our biggest contributors:

Do you have a favorite example style guide that you would love to see included in SD as a template?

Bonus points for any of the following:

1. Beautiful
2. Open source
3. Includes tools for navigating the guide
4. Easily templatable
5. Any other "value add" for a style guide

Thanks so much for your thoughts...

[nhoizey]

Hi, I'm not (yet?) one of your biggest contributors, but I was planning to work this week on a template to generate Storybook stories for my tokens.

I'm currently using storybook-design-token to show Design Tokens based on the Sass files generated with Style Dictionary, but it currently shows tokens in a panel in each component, not in their own space.

I plan to generate MDX stories with code like that:

<ColorPalette>
  <ColorItem
    title="theme.color.greyscale"
    subtitle="Some of the greys"
    colors={['#FFFFFF', '#F8F8F8', '#F3F3F3']}
  />
</ColorPalette>

ColorPalette comes from https://github.com/storybookjs/storybook/blob/6.0-docs/lib/components/src/blocks/ColorPalette.stories.tsx

[nhoizey]

Here's how this simple example look like:

[elliotdickison]

+1 to something like a storybook plugin. Maybe not the most beautiful thing ever but capitalizing on a really popular tool like that would be a great start.

[chazzmoney]

@nhoizey how is your template going? I would love to see what you've built!

[nhoizey]

@chazzmoney I just shared something in a related Storybook issue: https://github.com/storybookjs/storybook/issues/7671#issuecomment-797064663

[cssinate]

Something I would want/need to see here is somehow including some metadata... Using CTI, I often have color-background-inverse (like a dark background on a light theme) and then color-foreground-inverse (the foreground color for the inverse background). The tool would need to know that I want this foreground color to have that background color when it's displayed.

[jorenbroekema]

https://github.com/amzn/style-dictionary/pull/1353 is related but does not cover this issue entirely, changing this issue to "enhancement", I definitely think a storybook example would be great. Style Dictionary definitely could output tokens to CSF stories files to get an overview of the tokens.

PRs welcome for adding it, see https://github.com/amzn/style-dictionary/pull/1344 as a good example