docs(design-tokens): Creates docs for design tokens.

[edonehoo]

Closes #1258

[patternfly-build]

Preview: https://patternfly-org-pr-3786-site.surge.sh

[edonehoo]

So, I can't seem to get these pages properly added to the preview site (if anyone can lmk how I'll make that change so that the preview is nice and pretty), but wanted to share my initial structure & writing for design tokens docs

if you have any input at this point pls share!

tagging a variety of ppl whose names I've seen in these convos: @andrew-ronaldson @lboehling @srambach @mcoker @nicolethoen

[mcoker]

About the pages in the sidebar, you'll also want to add an entry for the design tokens page here - https://github.com/edonehoo/patternfly-org/blob/iss1258/packages/documentation-site/patternfly-docs/patternfly-docs.source.js#L13-L18

You'll add:

sourceMD(path.join(contentBase, 'design-tokens/**/*.md'), 'design-tokens');

And add a .md extension to this file - https://github.com/edonehoo/patternfly-org/blob/iss1258/packages/documentation-site/patternfly-docs/content/design-tokens/migrate-to-tokens

[nicolethoen]

this is looking good! I think the contents of the PatternFly Tokens page (the last one in the nav) will be auto generated sort of like the props tables in component docs. That's something on my list to begin tinkering with.

[srambach]

Great start to this!
I intentionally didn't look ahead to where the docs would exist. When I first opened the preview, I first went to Developer resources, global CSS variables. Then I opened Design Foundations thinking it might be mixed with colors, spacers, etc. I do think tokens merit their own section, but we should do some good cross linking and also update the docs where we talk about the old global variables that really aren't going to be used any more.
Thanks for working on this!

[srambach]

Some of our other tokens are quite like existing CSS variables, too, like spacers and status colors. Maybe @lboehling would have some good words for describing the palette layer?

[edonehoo]

@andrew-ronaldson @srambach @jessiehuff @lboehling @nicolethoen @mcoker hi! tokens docs are further along and ready for another look

• I scrapped together some images to show some ideas, but these can definitely be edited/recreated by someone with more visual skills to be better or more accurate!
• I think it would be nice to add some description/context in the all tokens table that @nicolethoen is making - if that's something that it seems like I'd have time to do?

open to all thoughts and ideas :-)

[nicolethoen]

My understanding is that there may come a time that the text descriptions of the tokens might be able to come out of figma? And live in the design tokens repo?

Either way, my auto generated table will live in the design-token repo, so that's where the text would need to be added. Hopefully I can add it to this PR, i'm still getting stuck on a build issue i've got to resolve.

[andrew-ronaldson]

Approved!

[srambach]

Thanks @edonehoo!