Cores

Instalação

npx @koddaai/ui add tokens

Cores da Marca

Paleta oficial conforme identidade visual kodda. O azul principal transmite confiança e modernidade.

Cor	Hex	Token	Uso
Blue	`#5B5BD6`	`kodda-blue`	Cor primária, CTAs, destaques
Blue Dark	`#4F4FC4`	`kodda-blue-dark`	Hover states, variante escura
Blue Light	`#7C7CE0`	`kodda-blue-light`	Variante clara, backgrounds sutis

Uso com Tailwind

<button class="bg-kodda-blue text-white">Ação principal</button>
<button class="bg-kodda-blue-dark text-white">Hover state</button>
<div class="bg-kodda-blue-light/10">Background sutil</div>

Uso via CSS Variables

.custom-element {
  background-color: var(--color-kodda-blue);
  color: white;
}

.custom-element:hover {
  background-color: var(--color-kodda-blue-dark);
}

Tema Semântico

O tema usa variáveis CSS semânticas que se adaptam automaticamente ao light/dark mode:

<button class="bg-primary text-primary-foreground">Ação principal</button>
<p class="text-muted-foreground">Texto secundário</p>
<div class="bg-muted">Background alternativo</div>

Variáveis disponíveis:

--primary / --primary-foreground
--secondary / --secondary-foreground
--muted / --muted-foreground
--accent / --accent-foreground
--destructive / --destructive-foreground
--background / --foreground
--border, --input, --ring

Status Colors

Cores semânticas para indicar estados. Cada cor tem uma variante de fundo com opacidade.

Token	Uso	Light	Dark
`--color-status-success`	Ativo, concluído	`oklch(0.72 0.19 142)`	`oklch(0.78 0.17 142)`
`--color-status-warning`	Pendente, alerta	`oklch(0.75 0.18 85)`	`oklch(0.8 0.16 85)`
`--color-status-error`	Erro, inativo	`oklch(0.63 0.24 25)`	`oklch(0.7 0.22 25)`
`--color-status-info`	Informativo, processando	`oklch(0.7 0.15 250)`	`oklch(0.76 0.13 250)`

Variantes de background

Cada cor tem uma variante -bg com opacidade (10% light, 15% dark) para uso em badges e backgrounds:

--color-status-success-bg
--color-status-warning-bg
--color-status-error-bg
--color-status-info-bg

.custom-badge {
  color: var(--color-status-success);
  background-color: var(--color-status-success-bg);
}