Live documentation of design tokens and component library, like Storybook

[eliot-akira]

Would be nice to have live documentation that gives an overview of all available design tokens, components, their attributes and values.

Gutenberg project uses Storybook.js to document their UI components with interactive code examples.

On this interactive site you can browse individual components, their controls, options, and settings in isolation. You can also modify controls and arguments and see the changes right away.

https://wordpress.github.io/gutenberg

---

Recently I found Diez, a cross-platform framework for design tokens. It has a feature to generate a nice comprehensive documentation.

I'd like to implement a concept like this in the Design module, so we develop a customizable set of cross-platform design tokens for use in various contexts - like CSS and Sass variables, import/export as JSON, use in plugin admin or frontend styles, and from L&L templates.

So the tokens will be defined and managed as data (JSON). The same data can be used to generate CSS, Sass, L&L tags/attributes; serve as building blocks for component libraries; and generate live documentation of all available properties and values. And I suppose also generate an admin screen with a big form and fields to edit all tokens.