Cores
O Yampi Prism utiliza uma paleta de cores baseada em HSL com subtom purple, a cor da marca Yampi.
Cores Semânticas
As cores semânticas são usadas para comunicar significado em toda a interface.
| Token | Valor | Uso |
|---|---|---|
--primary | hsl(271 87% 55%) | Ações primárias, links, foco |
--destructive | hsl(0 85% 60%) | Ações destrutivas, erros |
--success | hsl(135 64% 50%) | Confirmações, sucesso |
--warning | hsl(49 87% 59%) | Alertas, atenção |
--info | hsl(217 91% 60%) | Informações, dicas |
Greyscale
A escala de cinza possui um subtom purple que combina com a identidade Yampi.
| Token | Valor HSL | Hex | Uso |
|---|---|---|---|
--black-pure | 262 25% 11% | #1A1523 | Texto principal (light) |
--grey-700 | 253 9% 31% | #4A4755 | Texto secundário |
--grey-600 | 251 5% 45% | #6F6D78 | Texto terciário |
--grey-500 | 252 5% 58% | #908E99 | Placeholders |
--grey-300 | 260 7% 82% | #D0CED4 | Bordas |
--grey-200 | 264 10% 90% | #E5E3E8 | Bordas leves |
--grey-50 | 285 17% 95% | #F4F1F5 | Backgrounds secundários |
--grey-05 | 255 28% 98% | #F9F8FB | Background principal (light) |
Cores Mapeadas
Tokens semânticos mapeados para uso em componentes:
| Token | Light | Dark | Uso |
|---|---|---|---|
--background | Grey 05 | 260 20% 6% | Background da página |
--foreground | Black Pure | Grey 05 | Texto principal |
--card | White | 260 16% 8% | Background de cards |
--border | Grey 200 | 255 10% 16% | Bordas |
--muted | Grey 50 | 255 10% 14% | Backgrounds sutis |
--accent | Grey 50 | 255 10% 14% | Hover states |
Purple (Marca)
| Token | Valor | Hex |
|---|---|---|
--purple-pure | 271 87% 55% | #9028F0 |
--purple-600 | 270 69% 45% | #7424C2 |
--purple-500 | 268 67% 37% | #5D1F9E |
--purple-400 | 270 38% 60% | #9D6BC6 |
--purple-100 | 271 60% 90% | #E8D9F5 |
Uso em CSS
css
/* Usando tokens diretamente */.meu-componente { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border: 1px solid hsl(var(--border));}/* Com opacidade */.overlay { background-color: hsl(var(--primary) / 0.1);}Tema Dark
Alterne para o tema dark com o atributo data-theme:
html
<html data-theme="dark">Todas as cores são automaticamente ajustadas. Os tokens mapeados (--background, --foreground, etc.) mudam de valor enquanto as cores base permanecem as mesmas.