{"repo":"UX-and-I/storybook-design-token","free":true,"listed":false,"github":"https://github.com/UX-and-I/storybook-design-token","clone":"git clone https://github.com/UX-and-I/storybook-design-token.git","description":"Display design token documentation generated from your stylesheets and icon files. Preview design token changes in the browser. Add your design tokens to your Storybook Docs pages using the custom Doc Blocks.","language":"TypeScript","stars":683,"topics":["storybook","storybook-addon","design-system","design-pattern","design-tokens","react","angular","vue","sass","svg"],"license":"MIT","category":"ui-components","readme_excerpt":"⚠️ This is the documentation for v5 which supports Storybook v10 and newer (ESM-only). Please check the v4 branch for Storybook v9, or the v3 branch for Storybook v7 and v8. ⚠️ Storybook Design Token Addon Display design token documentation generated from your stylesheets and icon files. Preview design token changes in the browser. Add your design tokens to your Storybook Docs pages using the custom Doc Blocks. Show me the demo Contents: - Storybook Design Token Addon - Get started - Available presenters - Advanced configuration - Default tab - Visible tabs - Style injection - Disable the addon panel - Token search visibility - Pagination - Specify a custom glob for your token files - Design Token Doc Block - Custom Presenters - Custom filters - Browser support Get started First, install the addon. Add the addon to your storybook addon list inside .storybook/main.js : The last step is to annotate your design tokens with a category name and a presenter. You can do this by adding special comment blocks to your stylesheets. Below is an example of a css stylesheet defining three categories (\"Animations\", \"Colors\", \"Others\"). It works the same way for scss and less files. The presenter controls how your token previews are rendered. See the next section for a complete list of available presenters. You can omit the presenter definition if you don't want to render a preview or no presenter works with your token. By default, a token category ends with the comment block of the next cat","default_branch":null,"files":null,"tree":[],"storefront":"/r/UX-and-I","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/UX-and-I/storybook-design-token/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}