This is the repository for betterplace's design system.
The system uses Storybook as a tool for developing a component library, guidelines and documentation, that work across all betterplace platforms.
git clone [email protected]:betterplace/betterplace-design-system.gitcd betterplace-design-systemyarn installyarn storybook
See .tool-versions
| Command | Description |
|---|---|
yarn storybook |
Start and open storybook in the browser. |
yarn build-storybook |
Build static storybook output. |
yarn build-tokens |
Generate all CSS variables from tokens. |
We use Design Tokens exported by Figma Tokens and generate CSS variables from these tokens using Style Dictionary.
The tokens input file is located in config/tokens.json (the exported file from Figma). The generated output is located in the build folder. Each theme is generated into its own file with variables, that would override each other. This is by design, because we only include one of these at a time. For example, theme org would include build/css/themes/org.css. Additionally, a globals.css is generated, which includes only unique global tokens.
To re-generate tokens with style-dictionary, run the following command: yarn build-tokens
Copyright 2022, gut.org gAG