Design Tokens Validator

Proposito

Garantir que todo codigo de UI use os design tokens do projeto em vez de valores hardcoded.

Arquivo de Referencia

src/theme/tokens.ts - Contém todos os tokens do design system.

Regras de Validacao

1. Cores - SEMPRE usar useThemeColors()

// ❌ ERRADO - cores hardcoded
const styles = {
  backgroundColor: '#FFFFFF',
  color: 'rgba(0, 0, 0, 0.5)',
  borderColor: 'white',
};

// ✅ CORRETO - usar hook de tema
import { useThemeColors } from '@/hooks/useTheme';
const colors = useThemeColors();
const styles = {
  backgroundColor: colors.background.card,
  color: colors.text.secondary,
  borderColor: colors.border.light,
};

2. Spacing - SEMPRE usar Tokens.spacing

// ❌ ERRADO - numeros literais
const styles = {
  padding: 16,
  margin: 24,
  gap: 8,
};

// ✅ CORRETO - usar tokens
import { Tokens } from '@/theme/tokens';
const styles = {
  padding: Tokens.spacing['4'], // 16
  margin: Tokens.spacing['6'], // 24
  gap: Tokens.spacing['2'], // 8
};

3. Border Radius - SEMPRE usar Tokens.radius

// ❌ ERRADO
borderRadius: 12;

// ✅ CORRETO
borderRadius: Tokens.radius.lg; // 12

4. Typography - SEMPRE usar Tokens.typography ou TextStyles

// ❌ ERRADO
fontSize: 16,
fontWeight: '600',

// ✅ CORRETO
import { TextStyles } from '@/theme/tokens';
...TextStyles.bodyLarge

Patterns a Detectar

Usar Grep para buscar estes patterns:

1. Cores hex: #[0-9A-Fa-f]{3,8}
2. rgba/rgb: rgba?\s*\(
3. Cores nomeadas em style: color:\s*['"]?(white|black|red|blue)
4. Numeros em padding/margin: (padding|margin):\s*\d+
5. fontSize hardcoded: fontSize:\s*\d+

Tokens Disponiveis

Spacing (multiplos de 4)

• '0': 0, '1': 4, '2': 8, '3': 12, '4': 16
• '5': 20, '6': 24, '8': 32, '10': 40, '12': 48

Radius

• sm: 4, md: 8, lg: 12, xl: 16, '2xl': 20
• full: 9999 (circular)

Cores do Tema (via useThemeColors)

• background.canvas - fundo principal
• background.card - cards
• text.primary - texto principal
• text.secondary - texto secundario
• primary.main - cor primaria (rosa)
• secondary.main - cor secundaria (roxo)

Comando de Validacao

npm run validate:design

Checklist de Review

• Nenhuma cor hex hardcoded (#FFFFFF, #000000, etc)
• Nenhum rgba() ou rgb() hardcoded
• Nenhum numero literal em padding/margin/gap
• Nenhum fontSize hardcoded
• Todas as cores vem de useThemeColors()
• Todos os espacamentos vem de Tokens.spacing