5.0.0 • Published 1 year ago
Fialho UI - Tokens 🥷🏻
Install
npm install @fialho-ui/tokens
Tokens
Fonts
FontSize
| Name | Rem | Px |
|---|
| xxs | 0.625rem | 10px |
| xs | 0.75rem | 12px |
| sm | 0.875rem | 14px |
| md | 1rem | 16px |
| lg | 1.125rem | 18px |
| xl | 1.25rem | 20px |
| 2xl | 1.5rem | 24px |
| 4xl | 2rem | 32px |
| 5xl | 2.25rem | 36px |
| 6xl | 3rem | 48px |
| 7xl | 4rem | 64px |
| 8xl | 4.5rem | 72px |
| 9xl | 6rem | 96px |
FontWeight
| Name | Weight |
|---|
| regular | 400 |
| medium | 500 |
| bold | 700 |
LineHeight
| Name | Line Height |
|---|
| shorter | 125% |
| short | 140% |
| base | 160% |
| tall | 180% |
Colors
| Name | Hex Color |
|---|
| white | #FFF |
| black | #000 |
| gray100 | #E1E1E6 |
| gray200 | #A9A9B2 |
| gray400 | #7C7C8A |
| gray500 | #505059 |
| gray600 | #323238 |
| gray700 | #29292E |
| gray800 | #202024 |
| gray900 | #121214 |
| fialho300 | #ADE8F4 |
| fialho500 | #48CAE4 |
| fialho700 | #0077B6 |
| fialho900 | #03045E |
Radii
| Name | Value |
|---|
| px | 1px |
| xs | 4px |
| sm | 6px |
| md | 8px |
| lg | 16px |
| full | 99999px |
Space
| Name | Value |
|---|
| 1 | 0.25rem |
| 2 | 0.5rem |
| 3 | 0.75rem |
| 4 | 1rem |
| 5 | 1.25rem |
| 6 | 1.5rem |
| 7 | 1.75rem |
| 8 | 2rem |
| 10 | 2.5rem |
| 12 | 3rem |
| 16 | 4rem |
| 20 | 5rem |
| 40 | 10rem |
| 64 | 16rem |
| 80 | 20rem |