Variables
Theme Colors
| Key | Default Value |
|---|
| primary | #0078d4 |
| primary-dark | #005ba1 |
| primary-light | #0894ff |
| secondary | #323130 |
| secondary-dark | #181817 |
| secondary-light | #4c4b49 |
Grays
| Key | Default Value |
|---|
| white | #fff |
| gray-100 | #f8f9fa |
| gray-200 | #e9ecef |
| gray-300 | #dee2e6 |
| gray-400 | #ced4da |
| gray-500 | #adb5bd |
| gray-600 | #6c757d |
| gray-700 | #495057 |
| gray-800 | #343a40 |
| gray-900 | #212529 |
| black | #000 |
Spaces
Positions
| Key |
|---|
| left |
| right |
| top |
| bottom |
| vertical |
| horizontal |
Sizes
| Key | Default Value |
|---|
| xxsmall | .3rem |
| xsmall | .5rem |
| small | 1rem |
| medium | 2rem |
| large | 3rem |
| extra | 4rem |
| auto | auto |
Border
Border width
| Key | Default Value |
|---|
| 1 | 1px |
| 2 | 2px |
| 3 | 3px |
| 4 | 4px |
| 5 | 5px |
Border Radius
| Key | Default Value |
|---|
| small | .25rem |
| medium | .2rem |
| large | .3rem |
| pill | 50rem |
Text
Size
| Key | Default Vale |
|---|
| small | 10px |
| normal | 16px |
| medium | 24px |
| large | 32px |
| extra | 42px |
| default | 13.3333px |
Weight
| Key | Default Value |
|---|
| regular | 400 |
| semibold | 600 |
| bold | 700 |