de5fff4f5c
COMPLETADO: Fase 1 de la migración a Clean Architecture + POO ## Estructura de Carpetas - ✓ Estructura completa de 4 capas (Domain, Application, Infrastructure, Presentation) - ✓ Carpetas de Use Cases (SaveComponent, GetComponent, DeleteComponent, SyncSchema) - ✓ Estructura de tests (Unit, Integration, E2E) - ✓ Carpetas de schemas y templates ## Composer y Autoloading - ✓ PSR-4 autoloading configurado para ROITheme namespace - ✓ Autoloader optimizado regenerado ## DI Container - ✓ DIContainer implementado con patrón Singleton - ✓ Métodos set(), get(), has() para gestión de servicios - ✓ Getters específicos para ComponentRepository, ValidationService, CacheService - ✓ Placeholders que serán implementados en Fase 5 - ✓ Prevención de clonación y deserialización ## Interfaces - ✓ ComponentRepositoryInterface (Domain) - ✓ ValidationServiceInterface (Application) - ✓ CacheServiceInterface (Application) - ✓ Component entity placeholder (Domain) ## Bootstrap - ✓ functions.php actualizado con carga de Composer autoloader - ✓ Inicialización del DIContainer - ✓ Helper function roi_container() disponible globalmente ## Tests - ✓ 10 tests unitarios para DIContainer (100% cobertura) - ✓ Total: 13 tests unitarios, 28 assertions - ✓ Suite de tests pasando correctamente ## Validación - ✓ Script de validación automatizado (48/48 checks pasados) - ✓ 100% de validaciones exitosas La arquitectura base está lista para la Fase 2. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
214 lines
6.1 KiB
CSS
214 lines
6.1 KiB
CSS
/**
|
|
* Sistema de Tipografías - ROI Theme
|
|
*
|
|
* RESPONSABILIDAD: SOLO definición de fuentes y variables tipográficas
|
|
* - Declaraciones @font-face (comentadas - usar Google Fonts)
|
|
* - Variables CSS de tipografía (:root)
|
|
* - Clases utilitarias de fuentes
|
|
*
|
|
* NO debe contener:
|
|
* - Estilos de body (van en style.css)
|
|
* - Estilos de elementos HTML (van en style.css)
|
|
* - Variables de colores o espaciados (van en variables.css)
|
|
*
|
|
* @package ROI_Theme
|
|
* @since 1.0.0
|
|
*/
|
|
|
|
/* ============================================
|
|
SYSTEM FONTS (Por defecto - Recomendado)
|
|
============================================ */
|
|
|
|
:root {
|
|
/* Stack de fuentes del sistema - Fallback */
|
|
--font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
|
Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
|
|
|
|
/* Fuente primaria - Poppins según template y documentación */
|
|
--font-primary: 'Poppins', sans-serif;
|
|
|
|
/* Fuente para encabezados - Poppins según template */
|
|
--font-headings: 'Poppins', sans-serif;
|
|
|
|
/* Fuente para código (monospace) */
|
|
--font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono',
|
|
Consolas, 'Courier New', monospace;
|
|
|
|
/* Tamaños de fuente base */
|
|
--font-size-base: 16px;
|
|
--line-height-base: 1.6;
|
|
}
|
|
|
|
/* ELIMINADO: body, code, pre (movidos a style.css)
|
|
* Este archivo SOLO debe contener variables y @font-face
|
|
* Los estilos de elementos HTML van en style.css
|
|
*/
|
|
|
|
/* ============================================
|
|
POPPINS (Opcional - Solo si se activa)
|
|
============================================
|
|
|
|
Las siguientes declaraciones @font-face solo
|
|
se cargan cuando el usuario activa "Use Custom Fonts"
|
|
en Apariencia > Personalizar > Tipografía.
|
|
|
|
Para activar Poppins:
|
|
1. Descargar archivos WOFF2 de Google Fonts
|
|
2. Colocar en assets/fonts/poppins/
|
|
3. Descomentar las declaraciones @font-face
|
|
4. Activar en Customizer
|
|
|
|
============================================ */
|
|
|
|
/*
|
|
@font-face {
|
|
font-family: 'Poppins';
|
|
src: url('../fonts/poppins/Poppins-Regular.woff2') format('woff2'),
|
|
url('../fonts/poppins/Poppins-Regular.woff') format('woff');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Poppins';
|
|
src: url('../fonts/poppins/Poppins-Medium.woff2') format('woff2'),
|
|
url('../fonts/poppins/Poppins-Medium.woff') format('woff');
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Poppins';
|
|
src: url('../fonts/poppins/Poppins-SemiBold.woff2') format('woff2'),
|
|
url('../fonts/poppins/Poppins-SemiBold.woff') format('woff');
|
|
font-weight: 600;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Poppins';
|
|
src: url('../fonts/poppins/Poppins-Bold.woff2') format('woff2'),
|
|
url('../fonts/poppins/Poppins-Bold.woff') format('woff');
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
*/
|
|
|
|
/* Cuando Poppins esté activo, se aplica con clase .use-custom-fonts */
|
|
/*
|
|
.use-custom-fonts {
|
|
--font-primary: 'Poppins', var(--font-system);
|
|
--font-headings: 'Poppins', var(--font-system);
|
|
}
|
|
*/
|
|
|
|
/* ============================================
|
|
UTILIDADES DE FUENTES
|
|
============================================ */
|
|
|
|
/* Font Weight Utilities */
|
|
.font-light { font-weight: 300; }
|
|
.font-regular { font-weight: 400; }
|
|
.font-medium { font-weight: 500; }
|
|
.font-semibold { font-weight: 600; }
|
|
.font-bold { font-weight: 700; }
|
|
|
|
/* Font Family Utilities */
|
|
.font-system {
|
|
font-family: var(--font-system) !important;
|
|
}
|
|
|
|
.font-mono {
|
|
font-family: var(--font-mono) !important;
|
|
}
|
|
|
|
/* Font Size Utilities */
|
|
.text-xs { font-size: 0.75rem; line-height: 1.4; } /* 12px */
|
|
.text-sm { font-size: 0.875rem; line-height: 1.5; } /* 14px */
|
|
.text-base { font-size: 1rem; line-height: 1.6; } /* 16px */
|
|
.text-lg { font-size: 1.125rem; line-height: 1.6; } /* 18px */
|
|
.text-xl { font-size: 1.25rem; line-height: 1.5; } /* 20px */
|
|
.text-2xl { font-size: 1.5rem; line-height: 1.4; } /* 24px */
|
|
.text-3xl { font-size: 1.875rem; line-height: 1.3; } /* 30px */
|
|
.text-4xl { font-size: 2.25rem; line-height: 1.2; } /* 36px */
|
|
.text-5xl { font-size: 3rem; line-height: 1.1; } /* 48px */
|
|
|
|
/* Line Height Utilities */
|
|
.leading-none { line-height: 1; }
|
|
.leading-tight { line-height: 1.25; }
|
|
.leading-snug { line-height: 1.375; }
|
|
.leading-normal { line-height: 1.5; }
|
|
.leading-relaxed { line-height: 1.625; }
|
|
.leading-loose { line-height: 2; }
|
|
|
|
/* Text Transform */
|
|
.uppercase { text-transform: uppercase; }
|
|
.lowercase { text-transform: lowercase; }
|
|
.capitalize { text-transform: capitalize; }
|
|
.normal-case { text-transform: none; }
|
|
|
|
/* Font Smoothing */
|
|
.text-smooth,
|
|
.antialiased {
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
.subpixel-antialiased {
|
|
-webkit-font-smoothing: auto;
|
|
-moz-osx-font-smoothing: auto;
|
|
}
|
|
|
|
/* ============================================
|
|
RESPONSIVE FONT SIZES
|
|
============================================ */
|
|
|
|
/* Móviles (< 768px) */
|
|
@media (max-width: 767px) {
|
|
:root {
|
|
--font-size-base: 15px;
|
|
}
|
|
|
|
/* ELIMINADO: h1-h6 responsive - Template usa Bootstrap defaults */
|
|
}
|
|
|
|
/* Tablets (768px - 1024px) */
|
|
@media (min-width: 768px) and (max-width: 1024px) {
|
|
:root {
|
|
--font-size-base: 16px;
|
|
}
|
|
}
|
|
|
|
/* Desktop (> 1024px) */
|
|
@media (min-width: 1025px) {
|
|
:root {
|
|
--font-size-base: 16px;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
PERFORMANCE NOTES
|
|
============================================
|
|
|
|
System Fonts Benefits:
|
|
✅ 0 HTTP requests (fuentes ya en el sistema)
|
|
✅ 0 KB descargados (mejora LCP)
|
|
✅ Sin FOIT/FOUT (sin parpadeo de texto)
|
|
✅ Mejor Core Web Vitals
|
|
✅ Familiar para usuarios (fuentes nativas)
|
|
|
|
Custom Fonts (Poppins):
|
|
⚠️ Requiere descarga (~30-50 KB por peso)
|
|
⚠️ Impacto en LCP si no se optimiza
|
|
✅ Branding consistente
|
|
✅ Diseño específico del template
|
|
|
|
Recomendación: Mantener system fonts por defecto.
|
|
Solo activar Poppins si el branding lo requiere.
|
|
|
|
============================================ */
|