React-design-tokens-table NPM

React Design Tokens Table

Visualize design tokens. Dynamically insert beautiful tables of design tokens into your storybook.

Color	Spacing

Typography	Border

Shadow	Opacity

🎨 Previewable Design Tokens

Design tokens can be visualized for the following properties. If you want to see all the examples, check out our Storybook DEMO.

Color
Opacity
Box Shadow
BorderWidth
Border Radius
Sizing / Spacing
Font
- Family
- Size
- Weight
Letter Spacing
Line Height
Paragraph Spacing
Typograhy

🚧 Getting Started

1. Install

run: $ npm i react-design-tokens-table

2. Create design tokens `JSON`

ex.) design-token-transformer or Figma Tokens.

FigmaTokens is a useful tool to export json.

3. Convert `JSON` to `JS`

Generate js files with style-dictionary.

run: $ npm i -D style-dictionary

// ./style-dictionary/config.json
{
	"source": ["./.style_dictionary/tokens.json"],
	"platforms": {
		"js": {
			"transformGroup": "js",
			"buildPath": "./stories/tokens/",
			"files": [
				{
					"format": "javascript/module",
					"destination": "tokens.js"
				},
				{
					"format": "typescript/module-declarations",
					"destination": "tokens.d.ts"
				}
			]
		}
	}
}

run: $ npx style-dictionary build If style-dictionary conversion is successful, file like the following is generated.

module.exports = {
	color: {
		brand: {
			primary: {
				value: '#16d4c8',
				type: 'color',
				description: 'This is the main color.',
				filePath: './.style_dictionary/tokens.json',
				isSource: true,
				original: {
					value: '#16D4C8',
					type: 'color',
				},
				name: 'ColorBrandPrimary',
				attributes: {
					category: 'color',
					type: 'brand',
					item: 'primary',
				},
				path: ['color', 'brand', 'primary'],
			},
		},
	},
	/* Other Tokens*/
}

4. Import and use

import { DesignTokensTable } from 'react-design-tokens-table'
import tokens from './tokens'

const Page = () => {
	return {
		<>
			<h1>Colors</h1>
			<DesignTokensTable tokens={tokens.color} />

			<h1>Opacities</h1>
			<DesignTokensTable tokens={tokens.opacity} />
		</>
	}
}

Parse Method

The JSON object passed to the component will be parsed into a table as follows.

color: {
	brand: {
		primary: {
			value: '#16d4c8',
			type: 'color',
			description: 'This is the main color.',
			name: 'ColorBrandPrimary',
			path: ['color', 'brand', 'primary'],
		},
	},
}

Propaty		Table	Result
name	=>	Name	ColorBrandPrimary
description	=>	Description	This is the main color.
path	=>	Variable	`color.brand.promary`
value	=>	Value	`#16d4c8`
type	=>	Preview	Show previews depending on the type of design token.

Component Properties

React Design Tokens Table uses Stitches to assign a Storybook-like style. If you don't like this, you can override the style with css props. If noStyle is specified, you get a plain dom component.

Propaty	Type
tokens*	TokenType	Token object to be reflected in the table
css	@stitches/react/CSS	To override the style.
noStyle	boolean	If true, no style is applied.

📖 Example in Storybook Docs Addon

It is useful to visualize design tokens in a storybook.

// *.stories.mdx

import { Meta, Unstyled } from '@storybook/addon-docs'
import { DesignTokensTable } from 'react-design-tokens-table' //👈
import tokens from './tokens' //👈


<Meta title='ReactDesignTokensTableExample' />

# React Design Tokens Table Example
<Unstyled> // If you want to resolve conflicts with storybook's default styling
	<DesignTokensTable tokens={tokens.color} /> //👈
</Unstyled>