DEMO: mais contraste nos chips e grade de vídeos mais compacta

[argentinaluiz]

Demonstração do Design check num PR real. Muda só o design — o código fica como está, para o check ter o que apontar.

• Tokens, só no tema claro: surface-chip de alpha-black-05 para alpha-black-10 e surface-hover de alpha-black-10 para alpha-black-20 (o hover continua mais escuro que o repouso). O tema escuro não muda.
• Composição de Channel — Videos: o gap entre as linhas da Video Grid vai de $space-8 (32px) para $space-6 (24px).

Editado pelo pen interactive com save(). Não é para merge: é para ver o comentário do check.

🤖 Generated with Claude Code

https://claude.ai/code/session_01DaeGveq15N8P4exKh46iaS

[github-actions]

Design check · main ← 32ffd20

3 achado(s): 0 novo(s) em linha do diff, 0 já comentado(s) antes, 3 fora do diff (abaixo).

O que mudou no design

O .pen mudou em três pontos, todos visíveis na tela Channel — Videos:

• Fundo do Chip, tema claro — de preto a 5% de opacidade (#0000000D) para preto a 10% (#0000001A). Os chips de filtro ficam com o dobro de contraste contra a página branca. O tema escuro não mudou: segue branco a 10%.
• Fundo de hover, tema claro — de preto a 10% (#0000001A) para preto a 20% (#00000033). Vale para todos os alvos de hover do sistema. Tema escuro inalterado.
• Espaço vertical do Video Grid — o gap entre as linhas de cards vai de 32px para 24px. O gap horizontal dentro da linha (16px) e o padding superior do grid (24px) não mudaram.

Composição, inventário e estrutura interna dos componentes estão iguais: nenhum componente entrou, saiu ou foi renomeado. Nenhuma tela foi adicionada ou removida, então design/screen-routes.json continua o mesmo. O render de Channel — Home é byte a byte idêntico; só o de Channel — Videos mudou, pelos três itens acima.

Achados fora do diff

Estes arquivos não mudaram nestas linhas, então o GitHub não aceita comentário inline — é código que ficou para trás do design.

• Regra 10 · app/globals.css:47 — fundo do Chip no tema claro: 10% de preto no design, 5% no código
  O design mudou surface-chip (tema claro) de $alpha-black-05 (#0000000D) para $alpha-black-10 (#0000001A). A transcrição em app/globals.css ainda aponta para var(--alpha-black-05), então os chips de filtro renderizam com metade do contraste desenhado. Troque por var(--alpha-black-10). O valor do tema escuro ($alpha-white-10, linhas 74 e 97) não mudou no design e está correto. §13 — a transcrição do .pen para app/globals.css faz parte da mudança de design; §1: o .pen é sempre quem vence.
• Regra 10 · app/globals.css:48 — fundo de hover no tema claro: 20% de preto no design, 10% no código
  O design mudou surface-hover (tema claro) de $alpha-black-10 (#0000001A) para $alpha-black-20 (#00000033). O código ainda aponta para var(--alpha-black-10). Troque por var(--alpha-black-20). Como todos os consumidores usam o token (components/chip.tsx:13, components/sidebar-item.tsx:23-24, components/button/icon.tsx:11, components/button/outline.tsx:16), esta linha é a única correção necessária. O valor do tema escuro ($alpha-white-10, linhas 75 e 98) não mudou no design. §13, §3.
• Regra 10 · app/[handle]/videos/page.tsx:30 — gap vertical do Video Grid: 24px no design, 32px no código
  O Video Grid da tela Channel — Videos mudou de $space-8 para $space-6 — o espaço entre as linhas de cards vai de 32px para 24px. O código ainda tem gap-y-8 (32px): troque por gap-y-6. O gap-x-4 (16px, o gap da Grid Row) e o pt-6 (24px, o padding do Video Grid) não mudaram e estão corretos. O comentário das linhas 9-11 também cita gap-y-8 e fica falso depois da correção. §4 (a escala do .pen é a do Tailwind: $space-6 → gap-6), §13.

Telas

tela	render	no artefato
Channel — Videos	mudou	{base,head}/channel-videos.png

Sem mudança no render: Channel — Home

Comparação numérica

Comparação numérica

medidas: Channel — Videos (/@FullCycle/videos)
não medidas: Channel — Home (não implementada: app/[handle]/page.tsx)
componentes comparados: 12

divergência numérica design <-> código (1)

componente	propriedade	design	código	página
Chip	backgroundColor	rgba(0, 0, 0, 0.1)	rgb(15, 15, 15)	/@FullCycle/videos

Diff exato (tokens, inventário, componentes, composição)

Tokens

@@ -414,7 +414,7 @@
           "theme": {
             "mode": "light"
           },
-          "value": "$alpha-black-05"
+          "value": "$alpha-black-10"
         },
         {
           "theme": {
@@ -431,7 +431,7 @@
           "theme": {
             "mode": "light"
           },
-          "value": "$alpha-black-10"
+          "value": "$alpha-black-20"
         },
         {
           "theme": {

Inventário de componentes

sem mudança

Estrutura dos componentes

sem mudança

Composição — Channel — Videos

@@ -91,7 +91,7 @@
                     "node": "Video Grid",
                     "type": "frame",
                     "layout": "vertical",
-                    "gap": "$space-8",
+                    "gap": "$space-6",
                     "padding": [
                       "$space-6",
                       0,

Renders antes/depois das telas acima: artefato do run

[Copilot]

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.