Skip to content

[Design] Home page + lista de projetos #165

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:

  • pages/home/* (home.tsx, home-projects*.tsx, home-sessions*.tsx, legacy-home.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

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