Welcome to the magical world of design tokens! This guide will walk you through the process of integrating the Storybook Design Token Addon, a powerful tool that allows you to display your design token documentation generated from your stylesheets and icons. Whether you’re a beginner or a seasoned pro, we’re here to simplify the journey for you!

Getting Started

To kick things off, you will need to install the addon in your project. This can be done using either Yarn or npm.

• Using Yarn:

  $ yarn add --dev storybook-design-token

• Using npm:

  $ npm add --save-dev storybook-design-token

Next, you need to add the addon to your Storybook configuration. Open your .storybook/main.js and insert the following:

module.exports = {
  addons: ['storybook-design-token'],
};

Now you’re almost set! The last step involves annotating your design tokens with a category name and a presenter. You can achieve this by adding special comment blocks to your stylesheets. Here’s how you can define categories (e.g., Animations, Colors, Others) in CSS:

:root {
  /* @tokens Animations */
  /* @presenter Animation */
  --animation-rotate: rotate 1.2s infinite cubic-bezier(0.55, 0, 0.1, 1);
  
  /* @tokens Colors */
  /* @presenter Color */
  --b100: hsl(240, 100%, 90%);
  --b200: hsl(240, 100%, 80%);
  --b300: hsl(240, 100%, 70%);
  
  /* @tokens Others */
  --border-normal: 3px dashed red;
  /* @presenter BorderRadius */
} 
/* @tokens-end */

Understanding Design Tokens with an Analogy

Think of design tokens like the ingredients in a recipe. Just like how you need the right measurements and methods to create a delicious dish, design tokens serve as the essential components of your application’s design. Each token corresponds to a specific design element (like color, spacing, or typography) and provides a consistent way to apply styles across your application. By using the design token addon, you’re creating a well-organized recipe book for your design components, making it easier to maintain and update your application’s appearance.

Troubleshooting

If you encounter any issues while using the Storybook Design Token Addon, here are a few pointers that might help you out:

• Make sure your stylesheets are correctly annotated with token categories and presenters.
• Check if the paths to your stylesheets are correct and that they are being parsed by the addon.
• Ensure that you have the latest version of Storybook and the addon.
• If certain tokens do not appear, verify that your SVG icons have IDs or the appropriate attributes.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Advanced Configuration

For those looking to fine-tune the addon further, here are some advanced configurations:

• Default Tab: You can specify which tab shows by default in the addon panel.
• Visible Tabs: Control which tabs are displayed using specific configurations.
• Style Injection: You can inject necessary styles using the styleInjection parameter.
• Disable the Addon Panel: Hide the addon panel if you only wish to utilize Doc Blocks.
• Token Search Visibility: Optionally hide the search field if not needed.
• Pagination: Configure pagination settings such as page size or disabling it altogether.
• CSS Variables: Enable the preservation of CSS variables for dynamic theming.

Design Token Doc Block

Utilize the custom Storybook Doc Block to effectively display your design token documentation within your documents.

import DesignTokenDocBlock from 'storybook-design-token';

Browser Support

Rest assured, the Storybook Design Token Addon is supported on all modern browsers, with a note that Internet Explorer 11 is not supported.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.

Now that you’re equipped with all this knowledge, dive into the design world and make your applications shine with design tokens!