https://github.com/dgraph-io/typhoon-ui
🌀 typhoon-ui: Token-based React component library built using emotion.
https://github.com/dgraph-io/typhoon-ui
Last synced: about 1 year ago
JSON representation
🌀 typhoon-ui: Token-based React component library built using emotion.
- Host: GitHub
- URL: https://github.com/dgraph-io/typhoon-ui
- Owner: dgraph-io
- License: apache-2.0
- Created: 2021-04-13T11:17:16.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2023-07-19T06:31:52.000Z (almost 3 years ago)
- Last Synced: 2025-03-28T17:57:19.376Z (over 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 1.19 MB
- Stars: 14
- Watchers: 11
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🌀 typhoon-ui
[](https://github.com/dgraph-io/typhoon-ui/blob/main/LICENSE) [](https://github.com/dgraph-io/typhoon-ui) [](https://badge.fury.io/js/%40dgraph-io%2Ftyphoon-ui)
[âž¡ View Component Library](https://typhoon-ui.dgraph.io/?path=/story/atoms-avatar--default)
[Note: This is a work in progress, API is subject to change]
## Installation
```
npm i @dgraph-io/typhoon-ui
```
## Design System Concepts
### **Theme**
Theme is just a map of tokens & components
```
{ tokens: { ... }, components: { ... }}
```
Theme can be accessed from `useTheme` hook, which gets access to theme object from the `ThemeContext`. You only need this while creating atoms or molecules.
### **Tokens**
Tokens is a map of values which allow us to build a contraint based design. There is a mapping of CSS properties with the tokens, which can be found in `helpers/constants`. Every component in the design system is able to resolve the styles against these tokens. Lets see some examples -
Example -
1. `marginTop: 1`
Since `marginTop` is mapped to `tokens.space`
This will resolve to `marginTop: tokens.space[1]` => `marginTop: 8px`
2. `background : "pink.light"`
Since `background` is mapped to `tokens.colors`
This will resolve to `background: tokens.colors.pink.light` => `background: #ffc0d6`
Every component in the design system is able to resolve the styles
**Shortcuts**
There are shortcuts configured as well which are defined in `helpers/constants`
Example -
`marginX: ...`
will be resolved to -
```
marginLeft: ... ,
marginRight: ...
```
**Advanced**
We can resolve tokens within a string as well like -
Example-
`border: {{lineThickness.1}} solid {{colors.pink.light}}`
This resolves to
`border: {{lineThickness.1}} solid {{colors.pink.light}}`
Any valid key between `{{ }}` will be resolved against token values.
---