Skip to content

[Design] Settings — Servidores e Provedores #171

Closed

Description

@alltomatos

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.tsx
  • components/settings-v2/dialog-server-v2.tsx, dialog-server-qr-code.tsx
  • ssh-tunnel/dialog-add-server.tsx, tailscale/dialog-add-server.tsx, wsl/dialog-add-server.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

Verification

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

Activity

  1. added
    ui-uxUI/UX polish and consistency work
    ready-for-agentScoped and ready for an agent to pick up
    on Sep 9, 2026
  2. alltomatos commented on Sep 9, 2026

    @alltomatos
    OwnerAuthor

    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).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    ready-for-agentScoped and ready for an agent to pick upui-uxUI/UX polish and consistency work

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions