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>🚀 Roadmap
Upcoming ideas:
- Testing Framework
- Input form of token's value
-
JSONsupport - Other design token properties
🐛 Feature request & bugs
Please create an issues in the repository.