54 lines
2.2 KiB
Markdown
54 lines
2.2 KiB
Markdown
# 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
|
||
|
||
1. **Verificar** que el `tailwind.config.js` del worktree tenga los colores y tamaños correctos según Penpot
|
||
2. **Verificar** que `Button/index.tsx` tenga las clases Tailwind correctas para cada variante
|
||
3. **Actualizar** cualquier discrepancia encontrada
|
||
4. **Commit** los cambios en la rama `agente-button-ds`
|
||
5. **Push** al remote
|
||
6. **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
|