# Uso de Cores - PharmData Design System

> **Princípio fundamental**: Parcimônia, translucência e refinamento

---

## Filosofia: "Old Money" Color Usage

A estética "Old Money" valoriza **discrição sobre ostentação**. Cores são usadas com moderação, criando interfaces elegantes e atemporais.

### Valores

- **Sobriedade** > Vibrância excessiva
- **Translucência** > Blocos sólidos de cor
- **Contraste por contorno** > Contraste por fundo
- **Menos é mais** > Rainbowização

---

## Regras de Ouro

### 1. Backgrounds Sempre Transparentes ou Quase Transparentes

```css
/* ✅ CORRETO */
.element {
    background: transparent;
    background: rgba(76, 175, 80, 0.05); /* Hover sutil */
}

/* ❌ EVITAR */
.element {
    background: #4CAF50; /* Cor sólida demais */
    background: rgba(76, 175, 80, 0.8); /* Opacidade alta demais */
}
```

**Opacidades recomendadas**:
- Normal state: `transparent` ou `rgba(color, 0.03)`
- Hover state: `rgba(color, 0.05)` até `rgba(color, 0.10)`
- Active/selected: `rgba(color, 0.10)` até `rgba(color, 0.15)`

### 2. Cor no Texto, Não no Fundo

```css
/* ✅ CORRETO: Cor está no texto */
.drop-approved {
    background: transparent;
    color: #4CAF50;
    border: 1px solid rgba(76, 175, 80, 0.3);
}

/* ❌ EVITAR: Cor está no fundo */
.drop-approved {
    background: #4CAF50;
    color: white;
}
```

**Razão**: Texto colorido sobre fundo claro é mais refinado que texto branco sobre fundo colorido.

### 3. Bordas Sutis com Opacidade de 20-30%

```css
/* ✅ CORRETO */
.element {
    border: 1px solid rgba(76, 175, 80, 0.3);
}

/* ❌ EVITAR */
.element {
    border: 1px solid #4CAF50; /* Cor sólida, muito vibrante */
    border: 1px solid rgba(76, 175, 80, 0.8); /* Opacidade alta demais */
}
```

**Opacidades recomendadas para bordas**:
- Bordas sutis: `0.2` até `0.3`
- Bordas de ênfase: `0.5` até `0.7`
- Bordas de foco (acessibilidade): `1.0` (cor sólida)

### 4. Contraste por Contorno, Não por Fundo

Para dar mais destaque, **escureça a borda** em vez de aumentar o fundo:

```css
/* ✅ CORRETO: Ênfase por borda mais escura */
.drop-approved {
    background: transparent;
    color: #4CAF50;
    border: 2px solid #2E7D32; /* Tom 20% mais escuro */
}

/* ❌ EVITAR: Ênfase por fundo colorido */
.drop-approved {
    background: #4CAF50;
    color: white;
    border: none;
}
```

**Como calcular tom mais escuro**:
- HSL: Reduza L (lightness) em 15-20%
- Hex: Use ferramenta como [ColorHexa](https://www.colorhexa.com/)
- Exemplos:
  - #4CAF50 → #2E7D32 (verde aprovado)
  - #FFA726 → #F57C00 (laranja review)
  - #9E9E9E → #757575 (cinza draft)

---

## Aplicações Práticas

### Drops (Tags)

**Status e Qualidade**: Translúcidos, cor no texto

```css
.drop-approved {
    background: transparent;
    color: #4CAF50;
    border: 1px solid rgba(76, 175, 80, 0.3);
}
.drop-approved:hover {
    background: rgba(76, 175, 80, 0.05);
}
```

**Categorias de Dados**: Fundo suave (5%), cor no texto

```css
.drop-sub {
    background: rgba(21, 101, 192, 0.05);
    color: #1565C0;
    border: 1px solid rgba(21, 101, 192, 0.2);
}
```

### Botões

**Primário**: Cor sólida para ações principais

```css
.btn-primary {
    background: var(--teal-intense);
    color: white;
    border: none;
}
.btn-primary:hover {
    background: var(--emerald-abyss);
}
```

**Secundário**: Translúcido

```css
.btn-secondary {
    background: transparent;
    color: var(--graphite-depth);
    border: 1px solid var(--soft-arctic);
}
.btn-secondary:hover {
    background: var(--arctic-mist);
}
```

### Cards

**Default**: Fundo branco, borda sutil

```css
.card {
    background: white;
    border: 1px solid var(--soft-arctic);
}
```

**Hover**: Sombra leve, sem mudança de cor

```css
.card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
```

### Tabelas

**Linhas**: Hover translúcido

```css
.table-row:hover {
    background: var(--cloud); /* #F8F9FA */
}
```

**Zebra striping**: Evitar (adiciona ruído visual)

```css
/* ❌ EVITAR */
.table-row:nth-child(even) {
    background: #f0f0f0;
}
```

### Alerts e Feedback

**Informação**: Borda azul, fundo quase transparente

```css
.alert-info {
    background: rgba(59, 130, 246, 0.05);
    color: #1E40AF;
    border-left: 3px solid #3B82F6;
}
```

**Sucesso, Warning, Error**: Mesmo padrão

```css
.alert-success {
    background: rgba(16, 185, 129, 0.05);
    color: #065F46;
    border-left: 3px solid #10B981;
}

.alert-warning {
    background: rgba(245, 158, 11, 0.05);
    color: #92400E;
    border-left: 3px solid #F59E0B;
}

.alert-error {
    background: rgba(239, 68, 68, 0.05);
    color: #991B1B;
    border-left: 3px solid #EF4444;
}
```

---

## Gradientes

**Evitar gradientes coloridos**. Se necessário, use gradiente de transparência:

```css
/* ✅ CORRETO: Gradiente de opacidade */
.gradient {
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 1),
        rgba(255, 255, 255, 0)
    );
}

/* ❌ EVITAR: Gradiente colorido */
.gradient {
    background: linear-gradient(
        to right,
        #4CAF50,
        #2AA198
    );
}
```

---

## Modo Escuro (Futuro)

Quando implementar dark mode, inverta a lógica mas mantenha a translucência:

```css
/* Light mode */
.drop-approved {
    background: transparent;
    color: #4CAF50;
    border: 1px solid rgba(76, 175, 80, 0.3);
}

/* Dark mode */
[data-theme="dark"] .drop-approved {
    background: transparent;
    color: #81C784; /* Tom mais claro */
    border: 1px solid rgba(129, 199, 132, 0.3);
}
```

---

## Checklist de Implementação

Ao aplicar cores a um componente:

- [ ] Fundo é transparente ou tem opacidade < 15%?
- [ ] Cor está no texto, não no fundo?
- [ ] Borda tem opacidade de 20-30%?
- [ ] Hover tem opacidade de 5-10%?
- [ ] Para ênfase, usei borda mais escura em vez de fundo colorido?
- [ ] O componente ficaria bem em uma revista de design minimalista?

---

## Exemplos de Uso Correto

### Tabela de Substâncias

```html
<div class="table-row" style="background: transparent; border-bottom: 1px solid var(--soft-arctic);">
    <span class="drop drop-sub" style="background: transparent; color: #1565C0; border: 1px solid rgba(21,101,192,0.3);">
        SUB-082615
    </span>
    <span class="drop drop-approved" style="background: transparent; color: #4CAF50; border: 1px solid rgba(76,175,80,0.3);">
        Approved
    </span>
</div>
```

### Formulário com Seções

```html
<section style="background: white; border: 1px solid var(--soft-arctic); border-radius: 8px; padding: 24px;">
    <header style="border-bottom: 2px solid var(--teal-intense); color: var(--graphite-depth);">
        Identificação
    </header>
    <!-- Campos -->
</section>
```

---

## Ferramentas Úteis

- **Calcular opacidades**: [Colorable](https://colorable.jxnblk.com/)
- **Tons mais escuros**: [ColorHexa](https://www.colorhexa.com/)
- **Teste de contraste**: [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)
- **Paletas**: [Coolors](https://coolors.co/)

---

## Exceções

Quando **é permitido** usar cor sólida:

1. **Botões primários** de ações principais
2. **Headers** de navegação principal
3. **Badges** de notificação (contador vermelho)
4. **Progress bars** de loading
5. **Gráficos e visualizações de dados**

---

*Ver também*:
- [colors.css](tokens/colors.css) - Tokens de cores
- [README.md](README.md) - Design System principal
- [ICON_GUIDELINES.md](ICON_GUIDELINES.md) - Diretrizes de ícones