React Design Tokens Table

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

DEMO

| 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>

🚀 Roadmap

Upcoming ideas:

• Testing Framework
• Input form of token's value
• JSON support
• Other design token properties

🐛 Feature request & bugs

Please create an issues in the repository.