Skip to content

TEST: exercitar o design-diff #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
argentinaluiz wants to merge 6 commits into from
Closed

TEST: exercitar o design-diff #2

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c9bc599
TEST: design change to exercise design-diff
argentinaluiz Aug 25, 2026
2bdbbe8
Make the drift scan see design-only changes
argentinaluiz Aug 25, 2026
b42f274
Merge main: path filters and scan fix
argentinaluiz Aug 25, 2026
1b58f31
Merge main: rule 10
argentinaluiz Aug 25, 2026
04340a0
Merge main: wider read-only allowlist
argentinaluiz Aug 25, 2026
d6de0fc
Merge main: human summary on the design diff
argentinaluiz Aug 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions design/pendev/youtube-channel.pen
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2022,7 +2022,7 @@
"cornerRadius": "$radius-sm",
"padding": [
0,
"$space-3"
"$space-4"
],
"justifyContent": "center",
"alignItems": "center",
Expand Down Expand Up @@ -5552,7 +5552,7 @@
},
"radius-nav": {
"type": "number",
"value": 10
"value": 12

@claude claude Bot Aug 25, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Regra 7 / §13 — a transcrição deste token ficou para trás

radius-nav passa de 10 para 12 aqui, mas app/globals.css:154 continua com o valor antigo:

/* único radius fora da escala nativa do Tailwind (§6) */
--radius-nav: 10px;

O §13 trata a transcrição como parte da mudança de design, não um passo separado — "Se mudou token, transcreva para app/globals.css" — e o §1 define quem manda: "O .pen é sempre quem vence — se o CSS discorda dele, o CSS está errado."

O token é consumido pelo Sidebar Item (cornerRadius: "$radius-nav", confirmado em components.json), então enquanto o CSS não acompanhar, todo item da sidebar renderiza com 2px de raio a menos do que o design pede. Como app/globals.css não está no diff deste PR, não dá para deixar a sugestão na linha certa; a correção é trocar a linha 154 por --radius-nav: 12px;.

Dois acompanhamentos, já que não cabem em linha nenhuma do diff:

  • Com radius-nav em 12 ele passa a empatar com $radius-md. A tabela do §6 do DESIGN-SYSTEM.md ainda lista | $radius-nav | 10 | e precisa ser atualizada — ou o rounded-nav deixa de se justificar e vira rounded-xl.
  • A outra mudança deste PR (padding do Chip, $space-3 → $space-4) não gera drift hoje: não existe components/chip.tsx no repo, nem diretório components/. Quando o Chip for implementado, o §4 pede px-4 (16px) — não px-3.

@claude claude Bot Aug 25, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Drift: token mudou no .pen, transcrição no CSS ficou para trás (§13, §6)

$radius-nav passou de 10 para 12 aqui, mas app/globals.css:154 continua:

/* único radius fora da escala nativa do Tailwind (§6) */
--radius-nav: 10px;

O §13 ("Quando o design mudar") coloca a transcrição dentro da mesma tarefa: "Se mudou token, transcreva para app/globals.css" — e o §1 fecha a questão: "o .pen é sempre quem vence — se o CSS discorda dele, o CSS está errado."

Como rounded-nav é declarado no @theme a partir desse valor (§6), o erro não aparece em lugar nenhum: compila, renderiza, e fica 2px errado em todo consumidor futuro.

Correção — em app/globals.css:154:

--radius-nav: 12px;

(Não dá para deixar o comentário na linha exata: app/globals.css não faz parte do diff deste PR.)

O outro trecho do diff — Chip, padding de $space-3 → $space-4 (12px → 16px) — não tem drift correspondente: não existe components/chip.tsx, nem componente algum ainda (app/ tem só o scaffold do create-next-app). Quando o Chip for implementado, o padding é px-4, não px-3.

@claude claude Bot Aug 25, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Regra 10 (drift) — token defasado: app/globals.css:154

$radius-nav passou de 10 para 12 aqui, mas a transcrição em CSS continua com o valor antigo:

/* app/globals.css:154 */
--radius-nav: 10px;   /* ← deveria ser 12px */

O §13 ("Quando o design mudar", passo 2) diz que transcrever o token para app/globals.css é parte da mesma tarefa, não um passo separado — e o §1 fecha: "o .pen é sempre quem vence — se o CSS discorda dele, o CSS está errado". Como --radius-nav é exposto via @theme como rounded-nav (§6), todo consumidor futuro do utilitário nasce com 10px.

Correção em app/globals.css:154:

--radius-nav: 12px;

Nota de acompanhamento (não bloqueante): com esse valor, $radius-nav fica idêntico a $radius-md (12), e a tabela do §6 do design/DESIGN-SYSTEM.md ainda lista $radius-nav | 10 — vale atualizar a linha junto para a tabela não continuar autorizando o valor errado.

@claude claude Bot Aug 25, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Regra 10 (drift) — token mudou no .pen e a transcrição em CSS ficou defasada.

$radius-nav passou de 10 para 12 aqui, mas app/globals.css:154 ainda declara o valor antigo:

  /* único radius fora da escala nativa do Tailwind (§6) */
  --radius-nav: 10px;

O .pen é sempre quem vence — se o CSS discorda dele, o CSS está errado (§13). E a transcrição dos tokens é parte da mesma tarefa, não um passo separado (§1). radius-nav é o único radius fora da escala nativa do Tailwind, então ele existe só como token declarado à mão: nada mais no build corrige essa divergência, e rounded-nav continua renderizando 10px em silêncio.

Correção em app/globals.css:154:

  --radius-nav: 12px;

⚠️ Atenção ao efeito colateral: com 12px, $radius-nav passa a valer o mesmo que $radius-md. Isso não autoriza trocar rounded-nav por rounded-xl no JSX — são tokens distintos no .pen (§6), e colapsá-los quebra o rastreio quando um dos dois mudar de novo.

@claude claude Bot Aug 25, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Drift: transcrição do token ficou para trás (regra 10 — componente/valor que diverge do design)

$radius-nav passou de 10 para 12 aqui, mas app/globals.css:154 continua com o valor antigo:

/* app/globals.css:154 */
--radius-nav: 10px;   /* .pen agora diz 12 */

O §13 é explícito sobre a ordem: o .pen muda primeiro e "se mudou token, transcreva para app/globals.css" — a transcrição é parte da tarefa, não um passo separado. E o §1 fecha a questão sobre quem vence: "o .pen é sempre quem vence — se o CSS discorda dele, o CSS está errado."

Correção em app/globals.css:154:

  /* único radius fora da escala nativa do Tailwind (§6) */
  --radius-nav: 12px;

Por que escapa em review: --radius-nav é o único radius que o §6 manda declarar à mão no @theme, e rounded-nav continua compilando com o valor velho — nada quebra, o Sidebar Item (components.json:1307, cornerRadius: "$radius-nav") só renderiza 2px mais quadrado do que o design. Confirmado contra tokens.json:290-293 ("radius-nav": 12).

⚠️ Nota de acompanhamento para quem for implementar: com radius-nav = 12 o valor agora coincide com $radius-md (12), mas os dois tokens seguem distintos no .pen — mantenha rounded-nav no Sidebar Item em vez de trocar por rounded-xl, senão a próxima divergência entre eles volta a passar batido.

},
"radius-md": {
"type": "number",
Expand Down
Loading