Plan: Verificar y actualizar Button component con estilos de Penpot

Contexto

Se conectó el MCP de Penpot y se exportaron todas las variantes de botones del diseño. El worktree agente-button-ds ya tiene una implementación del componente Button con 9 variantes, pero hay que verificar que los estilos exportados de Penpot coincidan exactamente con lo implementado, y actualizar cualquier discrepancia.

Verificación de estilos Penpot vs Implementación

Colores exactos de Penpot:

Gold: #EABF2D (fill) / stroke #EABF2D
Amber: #D4880F (fill)
Black/Dark: #1A1A2E (fill/text)
Danger: #DE3626 (fill)
White: #FFFFFF
Muted text: #6B6B7B

Tamaños exactos de Penpot:

Primary: 170×40px, rounded 6px, font 12px bold
Outline Gold: 230×40px, rounded 6px, font 12px bold
Outline Dark: 110×40px, rounded 0px, font 11px bold
Outline Light: 140×60px, rounded 0px, font 11px bold
Ghost: 110×40px, rounded 20px, font 11px bold
Circular: 56×56px, rounded 28px, font 20px
Icon Edit: 36×36px, rounded 4px
Icon Delete: 36×36px, rounded 4px
File Upload: 200×36px, rounded 4px

Bordes:

Todos usan stroke-width: 3 en Penpot → border-[1.5px] en Tailwind (mitad del valor visual)
Outline Dark y Ghost tienen stroke #1A1A2E (black)

Hover states:

Outline Dark: hover bg #D4880F (amber), hover text #fff
Ghost: hover bg #D4880F (amber), hover text #fff

Pasos

Verificar que el tailwind.config.js del worktree tenga los colores y tamaños correctos según Penpot
Verificar que Button/index.tsx tenga las clases Tailwind correctas para cada variante
Actualizar cualquier discrepancia encontrada
Commit los cambios en la rama agente-button-ds
Push al remote
Actualizar Docmost con el checkpoint de avance

Archivos a revisar:

.worktrees/agente-button-ds/tailwind.config.js
.worktrees/agente-button-ds/src/components/Button/index.tsx
.worktrees/agente-button-ds/src/components/Button/Button.stories.tsx

Verificación:

npm run build debe pasar sin errores
npm run test debe pasar
Storybook debe mostrar todas las variantes correctamente

2.2 KiB Raw Blame History Unescape Escape