[Design] Settings — Modelos e Combos #172

Parent

Épico: revisão visual dark-mode / Apple-like do OpenCode Desktop. Depende da fundação de tokens (#164).

What to build

Auditar e ajustar apenas visual/tokens, sem alterar comportamento, os seguintes arquivos:

• components/settings-v2/models.tsx, combos.tsx, dialog-combo-v2.tsx
• components/dialog-select-model*.tsx, dialog-manage-models.tsx

Passos:

1. Revisar cada componente em light e dark mode usando os tokens --v2-* de packages/ui/src/v2/styles/theme.css (já corrigidos por [Design] Dark-mode token contrast pass — packages/ui/src/v2/styles/theme.css #164) — nenhum hex cru, apenas tokens semânticos.
2. Aplicar refinamento estilo Apple HIG: hierarquia por peso/tamanho (não só cor), 1 CTA primário por tela, transições 150-300ms (ease-out ao entrar / ease-in ao sair), cantos e sombras usando a escala --v2-elevation-* existente (sem valores de shadow ad-hoc), focus ring visível em todo elemento interativo, scrim de modal 40-60% preto reservado para contexto de dismissal.
3. Garantir que texto muted/faint, bordas e estados de hover/pressed permanecem legíveis nos dois temas (retestar após [Design] Dark-mode token contrast pass — packages/ui/src/v2/styles/theme.css #164).
4. Verificar botões só-ícone têm aria-label, e que nenhuma informação é passada só por cor.

Acceptance criteria

• Nenhuma mudança de comportamento/UX — apenas visual (cor, espaçamento, tipografia, elevação, motion)
• Sem hex cru — só tokens --v2-* semânticos
• Contraste de texto ≥4.5:1 (corpo) / ≥3:1 (grande, ícones, bordas) confirmado em light e dark
• Estados de foco visíveis via teclado em todos os elementos interativos da página
• Botões ícone-apenas têm aria-label
• Testado manualmente em light e dark antes de abrir o PR

Blocked by

• [Design] Dark-mode token contrast pass — packages/ui/src/v2/styles/theme.css #164

Verification

Screenshots antes/depois em light e dark mode desta página/superfície, anexados ao PR.