0f6387ab46
- renombrar openspec/ a _openspec/ (carpeta auxiliar) - mover specs de features a changes/ - crear specs base: arquitectura-limpia, estandares-codigo, nomenclatura - migrar _planificacion/ con design-system y roi-theme-template - agregar especificacion recaptcha anti-spam (proposal, tasks, spec) - corregir rutas y referencias en todas las specs Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
137 lines
4.0 KiB
Markdown
137 lines
4.0 KiB
Markdown
# 🎨 ADMIN COMPONENTS - DESIGN SYSTEM (MODULARIZADO)
|
|
|
|
**Manual de Diseño para Componentes de Administración**
|
|
Versión 1.0 | APU México
|
|
|
|
---
|
|
|
|
## 📑 ÍNDICE DE DOCUMENTACIÓN
|
|
|
|
Este design system ha sido modularizado en archivos independientes para facilitar su consulta y mantenimiento.
|
|
|
|
### 📐 FUNDAMENTOS DEL SISTEMA
|
|
|
|
- [**01-ESPECIFICACIONES-DEL-SISTEMA.md**](01-ESPECIFICACIONES-DEL-SISTEMA.md)
|
|
- Requerimientos generales
|
|
- Stack tecnológico
|
|
- Estructura de archivos
|
|
|
|
- [**02-FILOSOFIA-DE-DISENO.md**](02-FILOSOFIA-DE-DISENO.md)
|
|
- Principios clave
|
|
- Características comunes
|
|
|
|
### 🎨 SISTEMA DE DISEÑO VISUAL
|
|
|
|
- [**03-PALETA-DE-COLORES.md**](03-PALETA-DE-COLORES.md)
|
|
- Colores principales (Navy, Orange, Neutral)
|
|
- Uso de colores por elemento
|
|
|
|
- [**04-TIPOGRAFIA.md**](04-TIPOGRAFIA.md)
|
|
- Font stack (Poppins)
|
|
- Pesos y tamaños
|
|
- Jerarquía visual
|
|
|
|
- [**05-SISTEMA-GRID-ESPACIADO.md**](05-SISTEMA-GRID-ESPACIADO.md)
|
|
- Grid de Bootstrap
|
|
- Breakpoints responsive
|
|
- Sistema de espaciado (margin/padding)
|
|
|
|
### 🏗️ ESTRUCTURA Y COMPONENTES
|
|
|
|
- [**06-ESTRUCTURA-LAYOUT.md**](06-ESTRUCTURA-LAYOUT.md)
|
|
- Container principal
|
|
- Header del tab (obligatorio)
|
|
- Sistema de grid 2 columnas
|
|
|
|
- [**07-COMPONENTES-REUTILIZABLES.md**](07-COMPONENTES-REUTILIZABLES.md)
|
|
- Botones (primario, secundario, reset)
|
|
- Inputs (text, color, textarea, select)
|
|
- Cards (estándar, vista previa)
|
|
|
|
- [**08-PATRONES-FORMULARIOS.md**](08-PATRONES-FORMULARIOS.md)
|
|
- Form switches
|
|
- Color pickers
|
|
- Text inputs con contador
|
|
- Badges y links de ayuda
|
|
|
|
### 🔄 FUNCIONALIDAD Y COMPORTAMIENTO
|
|
|
|
- [**09-VISTA-PREVIA-TIEMPO-REAL.md**](09-VISTA-PREVIA-TIEMPO-REAL.md)
|
|
- Estructura HTML del preview
|
|
- Reglas críticas
|
|
- CSS para vista previa
|
|
|
|
- [**10-RESPONSIVE-DESIGN.md**](10-RESPONSIVE-DESIGN.md)
|
|
- Breakpoints
|
|
- Patrones responsive
|
|
- Media queries
|
|
|
|
- [**11-JAVASCRIPT-PATTERNS.md**](11-JAVASCRIPT-PATTERNS.md)
|
|
- Inicialización
|
|
- Event listeners
|
|
- updatePreview()
|
|
- Guardar/cargar configuración
|
|
|
|
- [**12-PERSISTENCIA-JSON.md**](12-PERSISTENCIA-JSON.md)
|
|
- Estructura del config.json
|
|
- Funciones de persistencia
|
|
- Sistema de notificaciones
|
|
|
|
### 🎛️ PANEL Y ADMINISTRACIÓN
|
|
|
|
- [**13-PANEL-ADMINISTRACION.md**](13-PANEL-ADMINISTRACION.md)
|
|
- Estructura del panel principal
|
|
- Grid de componentes
|
|
- Patrón para nuevos componentes
|
|
|
|
- [**14-CONFLICTOS-WORDPRESS.md**](14-CONFLICTOS-WORDPRESS.md)
|
|
- Conflicto con .card
|
|
- Conflicto con form switches
|
|
- Conflicto con alineación vertical
|
|
- Checklist anti-conflictos
|
|
|
|
### 📚 RECURSOS Y EJEMPLOS
|
|
|
|
- [**15-EJEMPLOS-COMPLETOS.md**](15-EJEMPLOS-COMPLETOS.md)
|
|
- Ejemplos de campos completos
|
|
- Template básico
|
|
- Checklist de implementación
|
|
- Troubleshooting
|
|
|
|
### 🎨 TOKENS DE DISEÑO
|
|
|
|
- [**design-tokens-apus-admin.scss**](design-tokens-apus-admin.scss)
|
|
- Variables SCSS para colores
|
|
- Espaciado
|
|
- Tipografía
|
|
- Sombras y bordes
|
|
|
|
---
|
|
|
|
## 🚀 QUICK START
|
|
|
|
1. **Lee primero:** [01-ESPECIFICACIONES-DEL-SISTEMA.md](01-ESPECIFICACIONES-DEL-SISTEMA.md)
|
|
2. **Consulta el diseño:** [03-PALETA-DE-COLORES.md](03-PALETA-DE-COLORES.md) y [04-TIPOGRAFIA.md](04-TIPOGRAFIA.md)
|
|
3. **Usa los componentes:** [07-COMPONENTES-REUTILIZABLES.md](07-COMPONENTES-REUTILIZABLES.md)
|
|
4. **Implementa JavaScript:** [11-JAVASCRIPT-PATTERNS.md](11-JAVASCRIPT-PATTERNS.md)
|
|
5. **Resuelve conflictos WP:** [14-CONFLICTOS-WORDPRESS.md](14-CONFLICTOS-WORDPRESS.md)
|
|
|
|
---
|
|
|
|
## 📝 NOTAS IMPORTANTES
|
|
|
|
1. ✅ **Usar la librería de componentes HTML como referencia** (`../componentes-html-bootstrap/`)
|
|
2. ❌ **NUNCA modificar el HTML del front-end desde el admin panel**
|
|
3. ✅ **La vista previa debe ser 100% idéntica al componente real**
|
|
4. ✅ **Guardar configuración en archivos JSON (NO localStorage)**
|
|
5. ✅ **Responsive es obligatorio, no opcional**
|
|
6. ✅ **Todos los iconos deben ser orange (#FF8600)**
|
|
7. ✅ **Todos los títulos de card deben ser navy (#1e3a5f)**
|
|
|
|
---
|
|
|
|
**Documento creado:** 2025
|
|
**Versión:** 1.0
|
|
**Proyecto:** APU México - Sistema de Administración
|
|
**Autor:** Design System Team
|