Adicionando Variáveis Globais e Compontente Botão
Este PR implementa a base do nosso design system, alinhado com o Figma:
- Variáveis Globais: Adiciona as variáveis de cores (--color-background, --color-text-brand, etc.) no arquivo .css para garantir usabilidade em todo o código.
- Fontes: Configura a fonte [Manrope] conforme especificado no design.
- Componente Button: Cria o componente que será usado como referência para os AGES I.
Sempre coloco um resuminho de como usar/chamar o componente:
/*
COMO USAR??
Escolha o variant, o size e o texto do botão! Nesse molde:
<Button variant="_VARIANTE_" size="_TAMANHO_">_TEXTO_</Button>
EXEMPLOS:
<Button variant="primary" size="medium">Salvar</Button>
<Button variant="outline" size="large">Cancelar</Button>
<Button variant="secondary" size="small"> Cancelar</Button>
<Button variant="destructive" size="large" >Excluir</Button>
Se quiser desativar o botão, use a prop desactive:
<Button variant="primary" size="large" desactive>
Se precisar, adicione uma função de clique ou outras props de botão:
<Button
onClick={() => alert('Clicou!')}
variant="primary"
size="medium"
>Salvar</Button>
*/Foto dos botões:
Foto das Variáveis implementadas:
