Stella Nova

Título	Stella Nova
Palabras Clave	skin, accesibilidad, diseño web, mediawiki, software libre
Período	2026-
URL	https://github.com/eadpucv/stella-nova

Qué es

Stella Nova es un skin para Casiopea, escrito desde cero para reemplazar al skin actual (basado en Chameleon 5.0.2 con las personalizaciones llamadas bo). Está construido respetando estándares modernos, con versatilidad de pantallas y CSS moderno (Grid, Flexbox, custom properties, :has(), color-mix(), light-dark()), con soporte para tema claro y oscuro, foco en accesibilidad WCAG 2.1 AA y compatibilidad explícita con Semantic MediaWiki.

No hereda de ningún skin previo: extiende solamente SkinMustache —el contrato moderno de MediaWiki que separa datos (PHP) de presentación (Mustache + CSS)— y declara todo en skin.json. Sin Bootstrap, sin Tailwind, sin clonar Example/BoilerPlate. El desarrollo va en la versión 0.4.2 (junio 2026); el detalle de cada cambio se lleva en el CHANGELOG del repositorio.

Del nombre

El 11 de noviembre de 1572, el astrónomo danés Tycho Brahe observó una estrella nueva y brillante en la constelación de Casiopea. La llamó stella nova y documentó sus mediciones en De nova stella (1573), el tratado que dio al mundo la palabra «nova». Aquella estrella no estaba naciendo sino muriendo: hoy se conoce como SN 1572, la supernova de Tycho. Su mayor consecuencia no fue astronómica sino filosófica: demostró que los cielos —que la tradición aristotélica creía inmutables— cambian.

Madurez actual

El skin está maduro y usable: renderiza sin errores, absorbe el CSS de las extensiones de Casiopea sin parchearlas y ya tiene resuelto el grueso del layout, el sistema de diseño y el cromo. Quedan asperezas por pulir, sobre todo en la ronda móvil real, la auditoría de accesibilidad y el testing (ver Asperezas pendientes). Lo que ya hace, a grandes rasgos:

Layout «página de papel». Hoja centrada sobre un campo ahuesado; cabecera-horizonte despejada (isotipo, pestañas de página, buscador, herramientas de usuario) y pie compuesto que sirve de mapa del sitio.
Sistema de diseño por tokens en tres capas (modelo Material 3): primitivas (paleta agnóstica, nombrada por hue de taller: papel, tinta, rojo, coral, azul…), semánticas (roles del skin, --sn-paper, --sn-ink, --sn-nova, --sn-link…) y componente (--sn-btn-*, --sn-field-*). El tema claro/oscuro se voltea con light-dark() cambiando un puñado de variables.
Tema claro y oscuro con default claro y conmutación explícita por el usuario (o auto, que sí sigue al sistema operativo).
Tipografía variable autoalojada (IBM Plex Sans + Roboto Serif + IBM Plex Mono), sin CDN en tiempo de ejecución, con alternador sans/serif del cuerpo desde el menú del usuario.
Ritmo vertical sobre baseline grid: cabeceras, párrafos, listas, citas y tablas caen en una retícula calculada desde la interlínea del cuerpo y reactiva a las preferencias de lectura.
Framework de maquetación grid / grilla para el wikitexto (reemplaza el .row > .col-md-* de Bootstrap del skin anterior), más clases opt-in (full-width a sangre, plantilla, img-circle, sn-notice) y la palabra mágica __PANTALLACOMPLETA__. Documentadas en Stella Nova/Grilla y Stella Nova/Wikitexto.
Tablas propias (regulares y de resultados semánticos): sin contorno exterior ni filetes verticales, solo filetes horizontales finos; alineadas al baseline; responsivas (caja de scroll horizontal en viewport angosto) y con cabeceras ordenables re-vestidas con íconos Feather.
Cromo del editor tematizado (WikiEditor, CodeEditor/Ace, formularios HTMLForm legacy y PageForms), sin azules ajenos y con modo oscuro coherente.
Cromo administrable desde la wiki sin tocar código (ver Páginas administrables).
Mejora progresiva: la página es legible y usable sin JavaScript; el JS solo agrega comodidad, y el tema se aplica antes del primer pintado (sin parpadeo).

Plan de migración

El paso del skin actual a Stella Nova es un trabajo gradual que toca el skin, el CSS global, el JavaScript global y las plantillas. Toda la operación se documenta paso a paso en Stella Nova/Migración, con sus fases, responsables y estado.

Si estás trabajando en el diseño de Casiopea —ya sea plantillas o modificando la cascada de estilo general— lee Stella Nova/Diseño CSS para Casiopea para diseñar de forma compatible con un skin que tiene modo claro y oscuro. Si lo que quieres es maquetar páginas, parte por Stella Nova/Wikitexto y Stella Nova/Grilla.

Estado y roadmap

El desarrollo se organiza en hitos M0 a M8:

Hito	Entregable	Estado
M0	Esqueleto del skin: `skin.json`, plantilla Mustache, tokens CSS, JS mínimo. Renderiza sin errores.	completo
M1	Estilos para extensiones (SMW, SRF, PageForms, OOUI y otras): el skin absorbe el CSS de 22 extensiones sin parcharlas.	completo
M2	Layout real: cabecera, hoja centrada sobre campo, pie compuesto.	completo
M3	Sistema de tokens y tema claro/oscuro. Tipografía IBM Plex y Roboto Serif autoalojadas.	completo
M4	Responsive y navegación: vista móvil, dropdowns, preferencias del usuario sin parpadeo.	en curso
M5	Accesibilidad WCAG 2.1 AA: auditoría con axe y WAVE, foco visible, lector de pantalla.	pendiente
M6	JavaScript progresivo: la página funciona sin JS, el JS solo agrega comodidad.	mayormente listo
M7	Testing y CI.	pendiente
M8	Verificación final y publicación.	pendiente

Decisiones tomadas

Sin frameworks: CSS moderno propio

El skin no usa Bootstrap ni Tailwind. CSS moderno propio basado en custom properties (--sn-*), Grid, Flexbox y container queries puntuales. Los colores, tamaños, espacios y la tipografía se centralizan en un archivo de tokens, y light/dark se voltea cambiando un puñado de variables.

Tokens en tres capas (modelo Material 3)

El sistema cromático se organiza en tres niveles para que cada cambio viva en un solo lugar: primitivas (la paleta agnóstica del tema, 36 tonos nombrados por hue de taller en castellano —papel, tinta, rojo, coral, azul, malva, verde…— con stops 50–950 donde el número crece con la oscuridad), semánticas (los 22 roles del skin: --sn-paper, --sn-ink, --sn-nova, --sn-link…, cada rol apunta a una primitiva por tema vía light-dark()) y componente (--sn-btn-*, --sn-field-*: consumen semánticas, nunca primitivas). El tema oscuro deja de ser dos bloques duplicados y se reduce a unas pocas líneas de color-scheme.

Tipografía IBM Plex y Roboto Serif, variables

IBM Plex Sans: cuerpo, interfaz y todas las cabeceras h1–h6; build variable de dos ejes (peso 100–700 y ancho 75–100), así el cuerpo condensa sin variantes extra.
Roboto Serif: serif del cuerpo cuando el lector la elige desde el menú, y voz por defecto de citas y bloques poem; variable de cuatro ejes (peso 100–900, ancho 75–100, óptico 8–60 y grado −50–100, este último corregido automáticamente en modo oscuro).
IBM Plex Mono para código.

Las tres están autoalojadas (sin CDN en tiempo de ejecución) y versionadas junto al skin. La preferencia familia (sans/serif) invierte en cascada los alias del cuerpo y de las citas.

Tema claro por defecto

Sin preferencia guardada, el skin queda en claro aunque el sistema operativo del visitante esté en oscuro. El tema oscuro solo aparece con elección explícita del usuario, o con la opción «auto» (que sí sigue al sistema operativo).

Cabecera despejada, mapa del sitio en el pie

La barra superior queda centrada en la página actual: isotipo, pestañas de página, buscador y herramientas de usuario. La navegación del sitio (los portlets del MediaWiki:Sidebar y el bloque institucional) bajó al pie como mapa del sitio en columnas.

Ritmo vertical: baseline grid

La unidad vertical es --sn-baseline (tamaño base × interlínea), reactiva a las preferencias de tamaño de letra e interlineado del lector. Cabeceras, párrafos, listas, citas, verso y tablas usan interlineados y márgenes en múltiplos enteros de esa unidad, de modo que toda la página cae en una retícula común y los párrafos calzan incluso en arreglos multicolumna.

La hoja, asentada

La hoja (.sn-paper) lleva un radio mínimo y una sombra muy sutil: no flota, se asienta sobre el campo.

Páginas administrables del skin

Hay dos páginas que cualquier editor con permisos puede modificar para ajustar el cromo del skin sin tocar código:

Stella-Nova:Aviso — aviso editorial que aparece en el tope de todas las páginas (descartable por el lector, recordado por versión de la revisión; no persiste entre versiones).
Stella-Nova:Pie — bloque institucional del pie de página (columna derecha). El resto del pie (última edición, licencia, enlaces de sitio, herramientas) lo emite siempre el skin.

Cómo probarlo ahora

Mientras el skin no es el predeterminado, se puede previsualizar agregando ?useskin=stellanova al final de cualquier URL de la wiki, o seleccionándolo en Especial:Preferencias dentro de la pestaña «Apariencia».

Asperezas pendientes

El skin es usable, pero todavía hay bordes por afinar antes de proponerlo como predeterminado:

Ronda móvil real (M4): falta probar el cromo en teléfonos reales, no solo en viewport simulado.
Auditoría de accesibilidad (M5): pasar axe y WAVE sobre páginas reales, revisar foco visible y orden de tabulación, y probar con lector de pantalla.
Testing y CI (M7): lint de PHP/JS/CSS y un pipeline que valide en cada cambio.
Inyección de JavaScript en __PANTALLACOMPLETA__: hoy sigue mediada por MediaWiki:Common.js global (deuda reconocida, ver Fase 9 de la migración).
Consolidación de plantillas: las fichas dependen de migrar a TemplateStyles las plantillas duplicadas con sufijo «2» (fases 5 y 6).

Subpáginas