CreaRack Pro - Sistema de Diseno

CreaRack Pro - Sistema de Diseno

Version: 1.1 Fecha: 27-01-2026 Estado: Implementado (Fase 1 completada)

1. Filosofia de Diseno

Principios Fundamentales

1. Centralizacion: Una sola definicion, multiples usos
2. Semantica: El desarrollador indica la intencion, no el color
3. Dark Mode First: Optimizado para tema oscuro
4. Consistencia: Mismos componentes en todas las paginas
5. Minimalismo: Sin iconos en botones, solo texto
6. No romper: Los cambios deben ser alias, no modificaciones

Reglas Globales de Botones

• Fondo semi-transparente (10% del color base)
• Solo texto, NUNCA iconos
• Borde del color definido
• Hover: fondo 20% + box-shadow sutil

2. Colores Base (NO MODIFICAR)

Variables en variables.css

:root {
    /* Fondos */
    --bg-color: #000000;      /* Fondo principal - Negro puro */
    --card-bg: #111111;       /* Fondo tarjetas - Gris muy oscuro */
    --panel-bg: #111111;      /* Fondo paneles */
    --border-color: #333333;  /* Bordes */

    /* Textos */
    --text-primary: #ffffff;   /* Blanco */
    --text-secondary: #B0B0B0; /* Gris claro */
    --text-muted: #666666;     /* Gris oscuro */

    /* Colores corporativos (LOGOS, NO BOTONES) */
    --accent: #2962ff;         /* Azul corporativo - Solo para logos */
    --danger: #ef5350;         /* Rojo */
    --success: #66bb6a;        /* Verde */
    --warning: #ff9800;        /* Naranja */
}

3. Sistema de Botones

3.1 Clases Legacy (mantener para compatibilidad)

3.2 Clases Semanticas (USAR EN CODIGO NUEVO)

Son alias exactos de las clases legacy, pero con nombres basados en intencion:

3.3 CSS Exacto de Botones Semanticos

/* btn-action: Azul - Guardar, Crear, Confirmar */
.btn-action {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid var(--accent);  /* #2962ff */
    color: #82B1FF;
}
.btn-action:hover {
    background: rgba(59, 130, 246, 0.2);
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.2);
}

/* btn-danger: Rojo - Eliminar, Cancelar */
.btn-danger {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--danger);  /* #ef5350 */
    color: var(--danger);
}
.btn-danger:hover {
    background: rgba(239, 68, 68, 0.2);
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.2);
}

/* btn-success: Verde - Login, Conectar */
.btn-success {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid var(--success);  /* #66bb6a */
    color: var(--success);
}
.btn-success:hover {
    background: rgba(16, 185, 129, 0.2);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.2);
}

/* btn-warning: Naranja - Editar, Modificar */
.btn-warning {
    background: rgba(255, 152, 0, 0.1);
    border: 1px solid var(--warning);  /* #ff9800 */
    color: var(--warning);
}
.btn-warning:hover {
    background: rgba(255, 152, 0, 0.2);
    box-shadow: 0 0 8px rgba(255, 152, 0, 0.2);
}

/* btn-export: Amarillo - Exportar, Imprimir */
.btn-export {
    background: rgba(227, 179, 65, 0.1);
    border: 1px solid #e3b341;
    color: #e3b341;
}
.btn-export:hover {
    background: rgba(227, 179, 65, 0.2);
    box-shadow: 0 0 8px rgba(227, 179, 65, 0.2);
    color: #f2cc60;
}

/* btn-neutral: Blanco - Navegar, Ver */
.btn-neutral {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: var(--text-primary);  /* #ffffff */
}
.btn-neutral:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
    color: #ffffff;
}

4. Mapeo de Botones por Pagina

Dashboard (index.html)

Maps (blueprint_editor.html)

5. Sistema de Modales

5.1 Clases de Estructura

5.2 Ejemplo de Uso

<div class="modal-content">
    <div class="modal-header-simple">
        <h3>Titulo del Modal</h3>
        <button class="modal-close-btn">&times;</button>
    </div>
    <div class="modal-body">
        <!-- Contenido -->
    </div>
    <div class="modal-footer-simple">
        <button class="btn btn-neutral">Cancel</button>
        <button class="btn btn-action">Save</button>
    </div>
</div>

6. Fases de Implementacion

Fase 1: Clases Semanticas ✅ COMPLETADA

• Documentar colores exactos de botones existentes
• Crear clases semanticas como alias en components.css
• Verificar que no hay cambios visuales

Fase 2: Migracion Gradual ✅ COMPLETADA

• Migrar base.html a clases semanticas
• Migrar index.html a clases semanticas
• Migrar editor.html a clases semanticas
• Migrar blueprint_editor.html a clases semanticas
• Migrar terminal/index.html a clases semanticas
• Migrar logs.html a clases semanticas
• Migrar report.html a clases semanticas

Fase 3: Estandarizacion de Modales ✅ COMPLETADA

• Crear clases modal-header, modal-body, modal-footer en components.css
• Crear variantes: modal-header-simple, modal-footer-simple, modal-footer-spread
• Crear clase modal-close-btn para botones de cerrar inline
• Migrar modales de base.html (QR, Report, Scripts)
• Migrar modales de index.html (Groups, Trash)
• Migrar modales de editor.html (Import, QR, Apply Master, SSH)

7. Reglas de Oro

1. NUNCA modificar variables base (--accent, --danger, etc.)
2. NUNCA poner iconos en botones
3. Las clases semanticas son ALIAS, no reemplazos
4. Verificar visualmente despues de cada cambio
5. Un template a la vez

Ultima actualizacion: 27-01-2026 Migracion completada: Fase 1 + Fase 2 + Fase 3 (Design System 100% implementado)

Véase también

• [[crearack-tech—frontend—design-guidelines]] — guidelines de diseño UI
• [[crearack-tech—frontend—centralized-services]] — servicios JS centralizados
• [[crearack-tech—frontend—performance-guidelines]] — guidelines de performance frontend
• [[crearack-tech—frontend—asteroids-effect]] — efecto Asteroids easter-egg
• [[feature—workspace—refresh-ui-2026]] — refresh UI 2026 del workspace
• [[crearack-tech—backend—refactoring-guide]] — guía de refactorización frontend (deuda técnica acumulada)