Tokens de Design
Lista de variáveis de design utilizadas nos temas light e dark.
Visão Geral
Os tokens de design são variáveis CSS utilizadas para padronizar espaçamento, cores, fontes, bordas e outras propriedades visuais no sistema da Convert. Eles são definidos no globals.css e utilizados via classes Tailwind extendidas na configuração do Tailwind.
Border radius
| Token | Exemplo |
|---|---|
| --radius-smBorder radius pequeno para elementos como badges. | |
| --radius-mdBorder radius médio, usado em botões e inputs. | |
| --radius-lgBorder radius grande usado amplamente em cards e componentes maiores. | |
| --radius-xlBorder radius extra largo para elementos com visual mais suave. |
Cores Principais
| Token | Exemplo |
|---|---|
| --color-backgroundCor de fundo base do sistema. | |
| --color-foregroundCor base de texto para títulos e elementos de contraste. | Aa |
| --color-muted-foregroundCor de texto secundário, usada para descrições e textos menos importantes. | Aa |
| --color-primaryCor primária do tema, usada para botões e destaques. | |
| --color-primary-foregroundCor de texto para elementos primários. | Aa |
| --color-primary-contrastCor de texto primário com maior contraste com o fundo. | Aa |
| --color-secondaryCor secundária do tema, usada para cards, ou fundos sutis. | |
| --color-mutedCor auxiliar para elementos menos destacados. Utilize com um modificador de opacidade. A classe bg-muted é aplicada com 15% de opacidade. | |
| --color-borderCor de borda padrão. | |
| --color-cardCor de fundo para cards e elementos semelhantes. | |
| --color-popoverCor de fundo para tooltips | |
| --color-popover-foregroundCor de texto para tooltips | Aa |
| --color-ringCor da borda que vai ao redor de elementos com foco (Input, Button, etc...). |
Cores de Feedback
| Token | Exemplo |
|---|---|
| --color-successCor de fundo para mensagens de sucesso. | |
| --color-success-foregroundCor de texto para mensagens de sucesso. | Aa |
| --color-warningCor para alertas e mensagens de aviso. | |
| --color-warning-foregroundCor de texto para mensagens de aviso. | Aa |
| --color-dangerCor para mensagens de erro ou perigo. | |
| --color-danger-foregroundCor de texto para mensagens de erro. | Aa |
| --color-infoCor para mensagens informativas. | |
| --color-info-foregroundCor de texto para mensagens informativas. | Aa |
Cores do Vertt
| Token | Exemplo |
|---|---|
| --color-vertt-mutedTom sutil para planos de fundo relacionados à marca. | |
| --color-vertt-lighterVariação mais clara da cor Vertt. | |
| --color-vertt-lightVariação clara da cor Vertt. | |
| --color-verttCor principal da marca Vertt. | |
| --color-vertt-darkVariação escura da cor Vertt. | |
| --color-vertt-darkerVariação mais escura da cor Vertt. |
Cores de componentes
| Token | Exemplo |
|---|---|
| --color-audio-waveCor de fundo para as ondas de áudio. | |
| --color-message-sent-backgroundCor de fundo para mensagens enviadas. | |
| --color-message-sent-foregroundCor de texto para mensagens enviadas. | Aa |
| --color-message-received-backgroundCor de fundo para mensagens recebidas. | |
| --color-message-received-foregroundCor de texto para mensagens recebidas. | Aa |
Modos de Tema
Os tokens são automaticamente alterados quando o modo escuro (.dark) é ativado:
:root { --color-background: 255, 255, 255; }
.dark { --color-background: 05, 08, 11; }
Utilização
Você pode usar esses tokens através das classes Tailwind personalizadas, como por exemplo:
<div className="bg-background text-foreground border-border" />
Essas classes estão configuradas via theme.extend.colors no tailwind.config.ts.
Considerações Finais
- Tokens permitem mudar temas com consistência.
- Fácil de sobrescrever no futuro (ex: branding).
- Mantém a coesão visual entre componentes e projetos.