Design system/foundation - #1
Merged
Merged
Conversation
Cria a camada única de tokens que serve de base para a padronização de UI (auditoria de design system, Fase 0/1 concluídas em conversa). - src/styles/_tokens.scss: custom properties centralizando cor, tipografia, espaçamento, border-radius, sombra e duração/easing de transição. Adiciona tokens "on-image" (--dex-white/black/scrim/ icon-on-photo) que hoje vazavam como #fff/#000/rgba() soltos. - src/styles/_breakpoints.scss: breakpoints como variáveis Sass (sm/md/lg = 480/768/1200px) + mixins bp.up()/bp.down(), já que @media não aceita var(). Substitui o outlier 600px de .dex-page. - src/styles.scss: consome os tokens nas classes utilitárias globais (.dex-page, .dex-search, .dex-title, .dex-back, tooltip, snackbar) como demonstração de uso; migração das telas fica para a Fase 4. - src/index.html: corrige o meta theme-color (#CC0000 → #FF0000) para bater com --pokedex-red. - .gitignore: ignora .claude/worktrees/ (isolamento local de agente). Build de produção e desenvolvimento validados; CSS final ficou byte-idêntico em tamanho ao anterior (14.49 kB), confirmando que a extração para tokens não alterou nenhum valor computado. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…se 3) Extrai o padrão de botão-ícone circular que estava reinventado (com pequenas variações de tamanho/cor) em pelo menos 6 arquivos (picker, team, pokemon-detail, pokemon-list, compare, app.scss). Cobre 4 tamanhos (xs/sm/md/lg) e 4 tons (ghost/on-photo/solid-accent/soft-accent) identificados nos usos existentes, documentado via JSDoc no próprio componente. Aplicado nesta rodada apenas em pokemon-picker (pp-close/pp-clear), substituindo os dois botões hand-rolled originais e removendo o CSS morto correspondente — troca mecânica, sem mudança de comportamento (verificado via build). O modal hand-rolled do próprio picker (.pp-overlay/.pp-dialog) fica como exceção documentada por ora: está fundido com a lógica de autocomplete do componente, e separar isso para usar MatDialog/CDK Overlay é refatoração de comportamento (foco, teclado, animação), não extração mecânica — decisão explícita do usuário nesta rodada. Aplicação em app.scss/team/pokemon-detail/pokemon-list/compare fica para confirmação antes de prosseguir (arquivos grandes, mais próximo do escopo da Fase 4).
…one (Fase 3) Aplica o componente compartilhado (commit anterior) nos 4 pontos onde o padrão batia exatamente, eliminando o CSS reinventado correspondente: - app.html: botão de alternar tema (ghost, lg) - pokemon-detail: botão "Voltar" (tom novo `transparent` — sem círculo de fundo, diferente do nav-btn/action-btn; ver nota abaixo) e botão de adicionar/remover do time (on-photo, lg, com estado --active) - team: botão de fechar o painel de análise (ghost, sm) Novo tom `transparent` no IconButtonComponent: ao mapear pdetail__back pro tom on-photo por engano (mesmo tamanho 44px dos vizinhos), pré-build percebi que o CSS original não tinha nenhum background — é só uma área de toque de 44px com ícone branco. Corrigido antes do commit; teria sido uma regressão visual sutil (círculo aparecendo onde nunca existiu). Também incorporado ao componente: outline dourado de :focus-visible que os 5+ botões reinventados repetiam individualmente. Validado com build limpo + checagem visual via Chrome (tema, voltar, adicionar ao time, fechar análise) nas 3 telas afetadas. Deixados de fora deste corte, com motivo: - pdetail__nav-btn (prev/next): é `<a routerLink>`, não `<button>` — semântica de link importa (abrir em nova aba, meio-clique). - team__slot-action-btn (x3): variante compacta de 28px com hover destrutivo próprio; fica pra Fase 4 quando team.component for migrado por completo. - team__confirm-icon: `<span>` decorativo, não é botão. - compare__vs-text: rótulo "VS", não é ícone. - scroll-top-fab: é um FAB de verdade (position fixed + box-shadow + scale no hover/active), categoria visual diferente de botão de toolbar — forçar no componente perderia a elevação/feedback de toque.
…s/breakpoints Completa a adoção do sistema de breakpoints criado na Fase 2 (src/styles/_breakpoints.scss) nos arquivos que ainda usavam @media literal: app.scss, compare, favorites, pokemon-detail, pokemon-list e team. Mapeamento 1:1 com os 3 níveis existentes (sm/md/lg). Mantida 1 exceção literal e documentada em pokemon-list (max-width:480px): o par exato do min-width:480px já era 480px, não 479px, então preservar o valor original evita mudar o comportamento nessa borda específica. Validado: build limpo, sem warnings, e o CSS final gerado é byte-idêntico (mesmo hash de arquivo) ao build desta mesma branch antes desta mudança — confirma que a conversão de @media literal para os mixins bp.up/bp.down é 100% neutra em comportamento. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.