Tokens de Cores

Sistema de Cores da Aegro

Este guia documenta o sistema de cores consolidado da Aegro. Use sempre as variáveis CSS (custom properties) ao invés de valores hexadecimais fixos.

Referência Rápida

Cores Primárias (Verde Aegro)

A cor verde é a identidade visual da marca Aegro.

Variações com transparência:

• --color-primary-alpha-5 a --color-primary-alpha-50 (5%, 10%, 25%, 30%, 40%, 50%)

Exemplo de uso:

.btn-primary {
  background-color: var(--color-primary-500);
  color: var(--color-text-on-primary);
}

.btn-primary:hover {
  background-color: var(--color-primary-600);
}

.destaque {
  background-color: var(--color-primary-alpha-10);
}

Cores Secundárias (Verde-Água/Teal)

Usadas em seções escuras e para criar contraste.

Variações com transparência:

• --color-secondary-alpha-90 (90% de opacidade)

Cores Neutras (Escalas de Cinza)

Base para textos, fundos e bordas.

Variações de preto com transparência:

• --color-black-alpha-4 até --color-black-alpha-80 (4%, 5%, 6%, 8%, 10%, 12%, 15%, 20%, 25%, 30%, 40%, 60%, 70%, 80%)

Variações de branco com transparência:

• --color-white-alpha-10 até --color-white-alpha-80 (10%, 15%, 20%, 25%, 40%, 80%)

Exemplo de uso:

.card {
  background-color: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-200);
}

.texto-secundario {
  color: var(--color-neutral-500);
}

.overlay {
  background-color: var(--color-black-alpha-50);
}

Cores Semânticas (Status e Feedback)

Cores com propósito específico para comunicar status e feedback ao usuário.

Fundos coloridos (tints):

• --color-success-bg (#e8f5e9) - Fundo verde claro
• --color-error-bg (#fff3e0) - Fundo laranja claro
• --color-info-bg (#e3f2fd) - Fundo azul claro

Variações com transparência:

• --color-success-alpha-5 (5% de opacidade)
• --color-error-alpha-5 (5% de opacidade)

Exemplo de uso:

.alerta-sucesso {
  background-color: var(--color-success-bg);
  border-color: var(--color-success-500);
  color: var(--color-success-500);
}

.btn-deletar {
  background-color: var(--color-error-500);
  color: var(--color-neutral-0);
}

Cores Especiais

Variáveis Semânticas

Use estas variáveis ao invés das cores diretas para garantir consistência semântica.

Cores de Texto

Cores de Fundo

Cores de Borda

Estados Interativos

Gradientes Pré-definidos

Use estes gradientes para efeitos visuais consistentes.

Exemplo de uso:

.card-destaque {
  background: var(--gradient-primary);
}

Boas Práticas

✅ Use Sempre Variáveis

Não faça:

.botao {
  background-color: #00c65e;
  color: #ffffff;
}

Faça:

.botao {
  background-color: var(--color-primary-500);
  color: var(--color-text-on-primary);
}

✅ Use Variáveis Semânticas para Contexto

Não faça:

.titulo {
  color: var(--color-neutral-900);
}

Faça:

.titulo {
  color: var(--color-text-primary);
}

✅ Use Variações Alpha para Transparência

Não faça:

.overlay {
  background-color: rgba(0, 0, 0, 0.5);
}

Faça:

.overlay {
  background-color: var(--color-black-alpha-50);
}

✅ Use Gradientes Pré-definidos

Não faça:

.card {
  background: linear-gradient(135deg, #00c65e 0%, #7ee2aa 100%);
}

Faça:

.card {
  background: var(--gradient-primary);
}

Acessibilidade

Todas as combinações de cores seguem os padrões WCAG AA (contraste mínimo de 4.5:1 para texto normal, 3:1 para texto grande):

• ✅ --color-text-primary em --color-neutral-0 (fundo branco)
• ✅ --color-text-on-primary em --color-primary-500
• ✅ --color-text-light em --color-secondary-500
• ✅ --color-success-500 em --color-success-bg
• ✅ --color-error-500 em --color-error-bg

Indicadores de Foco

Sempre use --color-focus-ring para indicadores de foco:

button:focus {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

Localização do Código

Todas as definições de cores estão centralizadas em:

assets/css/01-settings/_colors.css

Resumo do Sistema

• Total de cores base: 25 definições principais
• Variações alpha: 28 (14 preto, 6 branco, 6 primária, 2 semânticas)
• Atribuições semânticas: 16 (texto, fundo, borda, interativo)
• Gradientes: 4 pré-definidos
• Total de variáveis: 73

Sistema anterior: 83 cores únicas, muitas duplicadas Sistema atual: ~25 cores principais com variações sistemáticas Redução: 70% menos definições de cores Cores hardcoded: Reduzidas de 127 para 13 instâncias (89% de redução)

Suporte de Navegadores

CSS custom properties (variáveis) são suportadas em:

• Chrome 49+
• Firefox 31+
• Safari 9.1+
• Edge 15+
• Todos os navegadores modernos

Fallbacks não são necessários pois o requisito mínimo de suporte é atendido.

Última atualização: Novembro 2025 Versão: 2.1.0

Documentos relacionados:

• Design Tokens Completos: docs/02_architecture/css/DESIGN_TOKENS.md (documentação interna)
• Documentação Detalhada de Cores: docs/02_architecture/css/COLORS.md (documentação interna)