Exemplos Corretos e Incorretos

Referência visual para distinguir uso correto do DS de violações comuns. Use como guia ao revisar código.

Cores

✗ Incorreto
/* Hex hardcoded — PROIBIDO */
.meu-titulo {
  color: #1a1a2e;
}

/* rgb() — PROIBIDO */
.meu-card {
  background-color: rgb(26, 26, 46);
}

Cores hardcoded quebram o sistema de temas.

✓ Correto
/* Token DS — OBRIGATÓRIO */
.meu-titulo {
  color: var(--ds-color-text-primary);
}

/* Token de surface — OBRIGATÓRIO */
.meu-card {
  background-color: var(--ds-color-bg-surface);
}

Tokens garantem que o tema funcione em todos os produtos.

Tipografia

✗ Incorreto
/* Tamanho manual — PROIBIDO */
.titulo {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.3;
}
✓ Correto
/* Tokens de tipografia — OBRIGATÓRIO */
.titulo {
  font-size: var(--ds-font-size-lg);
  font-weight: var(--ds-font-weight-semibold);
  line-height: var(--ds-line-height-tight);
}

Espaçamento

✗ Incorreto
/* Valores arbitrários — PROIBIDO */
.secao {
  padding: 13px 22px;
  margin-bottom: 19px;
  gap: 7px;
}
✓ Correto
/* Escala de espaçamento DS — OBRIGATÓRIO */
.secao {
  padding: var(--ds-space-3) var(--ds-space-5);
  margin-bottom: var(--ds-space-4);
  gap: var(--ds-space-2);
}

Gráficos

✗ Incorreto
/* Chart.js direto — PROIBIDO */
import Chart from 'chart.js';
const ctx = document.getElementById('chart');
new Chart(ctx, {
  type: 'line',
  data: { ... },
  options: {
    color: '#6366f1', // cor hardcoded
    backgroundColor: '#eef2ff'
  }
});

Uso direto do Chart.js ignora o tema e quebra no dark mode.

✓ Correto
/* DSCharts wrapper — OBRIGATÓRIO */
DSCharts.line('meu-chart', {
  labels: ['Jan', 'Fev', 'Mar'],
  datasets: [{
    label: 'Downloads',
    data: [1200, 1900, 1500]
  }]
});
// Cores aplicadas automaticamente pelo tema ativo

DSCharts aplica o tema automaticamente.

Tema

✗ Incorreto
<!-- data-theme errado — PROIBIDO -->
<html data-theme="datarank">

<!-- Sem tema — PROIBIDO -->
<html lang="pt-BR">
✓ Correto
<!-- Atributo correto — OBRIGATÓRIO -->
<html data-ds-theme="datarank" lang="pt-BR">

<!-- Via JS -->
window.DSThemes.set('datarank');
Copiado!