Repository navigation
Closed
Labels
ready-for-agentScoped and ready for an agent to pick upScoped and ready for an agent to pick upui-uxUI/UX polish and consistency workUI/UX polish and consistency work
Description
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/servers.tsx,providers.tsxcomponents/settings-v2/dialog-server-v2.tsx,dialog-server-qr-code.tsxssh-tunnel/dialog-add-server.tsx,tailscale/dialog-add-server.tsx,wsl/dialog-add-server.tsx
Passos:
- Revisar cada componente em light e dark mode usando os tokens
--v2-*depackages/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. - Aplicar refinamento estilo Apple HIG: hierarquia por peso/tamanho (não só cor), 1 CTA primário por tela, transições 150-300ms (
ease-outao entrar /ease-inao 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. - 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).
- 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
Verification
Screenshots antes/depois em light e dark mode desta página/superfície, anexados ao PR.
Metadata
Metadata
Assignees
Labels
ready-for-agentScoped and ready for an agent to pick upScoped and ready for an agent to pick upui-uxUI/UX polish and consistency workUI/UX polish and consistency work
Activity
alltomatos commentedon Sep 9, 2026
Audited `components/settings-v2/servers.tsx`, `providers.tsx`, `dialog-server-v2.tsx`, `dialog-server-qr-code.tsx`, and the SSH-tunnel/Tailscale/WSL "add server" dialogs. Found and fixed: the servers.tsx clear-search aria-label gap (#182), and a hardcoded `fill="#DBDBDB"` on the WSL warning icon that never adapted to dark mode, now using the `--v2-icon-icon-muted` token (#184). Everything else clean.
Closing as verified (fixes in #182 + #184).