feat: Adicionar Token de espaço e criar classes modulares #1084
Description
Gostaria que fosse possível utilizar variaveis de espaço presentes no figma.
No figma temos as seguintes váriaveis:
| Variável | Valor |
|---|---|
| 0 | 0 |
| 0.5 | 4 |
| 1 | 8 |
| 2 | 16 |
| 3 | 24 |
| 4 | 32 |
| 5 | 40 |
| 6 | 48 |
| 7 | 56 |
| 8 | 64 |
| 9 | 72 |
| 10 | 80 |
| 11 | 88 |
| 12 | 96 |
Descreva a solução que você gostaria
Preciso poder utilizar essas variaveis de espaço como váriavel no css ou scss, exemplo:
margin-top: var(--space-2)
Além disso, também necessito ter a possibilidade de utilizar como class css, assim como tailwind faz, exemplo:
<div class="m-2 p-2">
Utilize o tailwind como base para a construção das class.
Isso é uma alteração em um componente existente ou criação de um novo?
- Atualização de componente existente
- Criação de token
🛠️ Notas de implementação (para desenvolvedores e agentes de IA) - NÃO REMOVER
- Adicione uma seção no story book referente a spacing, com as opções "padding" e "margin", assim como no exemplo abaixo:
- Utilize como base a documentação do tailwind.
Documentação para margin: https://tailwindcss.com/docs/margin
Documentação para padding: https://tailwindcss.com/docs/padding