Using design tokens with styled-components in Javascript Storybook

22 Sep 2023

Design tokens are a set of values that define the visual properties of an interface. They act as the building blocks for consistent and scalable design systems. With the rise of component-driven development, it is essential to integrate design tokens seamlessly with popular styling libraries like styled-components.

In this tutorial, we will explore how to use design tokens with styled-components in JavaScript Storybook, a popular tool for developing UI components in isolation. This will allow us to create reusable and consistent styles across different components while also providing a centralized place to manage and update our design tokens.

Prerequisites

Basic knowledge of styled-components
Familiarity with JavaScript and CSS

Step 1: Setting Up Storybook

Before we start integrating design tokens, let’s set up JavaScript Storybook in our project (if not already configured). Follow the Storybook documentation to get started.

Step 2: Creating the Design Tokens

Design tokens typically consist of key-value pairs defining various properties like colors, typography, spacing, etc. Create a new file, tokens.js, to hold our design tokens:

// tokens.js

export const colors = {
  primary: '#007bff',
  secondary: '#6c757d',
  // ...
};

export const typography = {
  fontFamily: 'Arial, sans-serif',
  fontSize: {
    small: '12px',
    medium: '16px',
    large: '20px',
  },
  // ...
};

export const spacing = {
  small: '8px',
  medium: '16px',
  large: '24px',
  // ...
};

Feel free to add more tokens based on your project’s requirements.

Step 3: Creating the Styled Components

Now, let’s create a styled component using the design tokens we defined. In a new file, Button.js, add the following code:

// Button.js
import styled from 'styled-components';
import { colors, typography, spacing } from './tokens';

const Button = styled.button`
  color: ${colors.primary};
  font-family: ${typography.fontFamily};
  font-size: ${typography.fontSize.medium};
  padding: ${spacing.small} ${spacing.medium};
  border-radius: 4px;
  border: none;
  // ...
`;

export default Button;

Here, we are using the colors, typography, and spacing tokens to style our button component. By referencing the design tokens, we create a consistent look and feel across our UI.

Step 4: Using the Styled Component in Storybook

Now that we have our Button component, let’s use it in a Storybook story to see the results. In a new file, Button.stories.js, add the following code:

// Button.stories.js
import React from 'react';
import Button from './Button';

export default {
  title: 'Components/Button',
  component: Button,
};

export const Primary = () => <Button>Primary Button</Button>;
export const Secondary = () => <Button secondary>Secondary Button</Button>;

Here, we import our Button component and define two stories - one for the primary button and another for the secondary button. By passing properties to the Button component, we can further customize its appearance.

Step 5: Viewing the Styled Component in Storybook

Start Storybook by running the appropriate command in your terminal. Once Storybook is up and running, navigate to the Button section to see the rendered components.

You should notice that the Button component is styled using the design tokens we defined earlier. By modifying the design tokens, we can easily update the styles of multiple components throughout our application.

Conclusion

In this tutorial, we have learned how to integrate design tokens with styled-components in JavaScript Storybook. This allows us to create reusable and consistent styles across different components while maintaining a centralized place to manage and update our design tokens. By leveraging design tokens, we can easily create scalable and consistent design systems for our UI components.

#UI #DesignTokens