UITema de Didactika
El sistema de diseño es lo que aplica cada plugin; el tema de Didactika es lo que añade encima un sitio de Didactika, y tiene su propia versión.
Este sitio documenta dos cosas y las mantiene separadas a propósito.
- El sistema de diseño es lo que aplican los plugins de Didactika: componentes, formas, tamaños, estados, layout y la manera en que se dibuja cada versión de Moodle. Un plugin usa solo esto, así que se ve bien en cualquier sitio Moodle, sea cual sea su tema.
- El tema de Didactika es lo que añade encima un sitio de Didactika: la paleta, la tipografía, el gradiente, la elevación y algunos detalles en la documentación. Un plugin nunca fija nada de esto.
El interruptor Tema de Didactika de la cabecera dibuja cada ejemplo con el tema sobre el sistema de diseño. Apagado, ves el sistema de diseño solo, como lo recibe un plugin en un sitio sin personalizar.
Versiones del tema
La versión actual es la v0.1 y es la única por ahora, así que junto al interruptor no se elige nada. Cuando haya otra, aparecerá un selector junto al interruptor mientras el tema esté activo. Una versión nueva del tema cambia lo que añade el tema y nunca el sistema de diseño, así que un plugin no tiene que cambiar cuando cambia el tema.
Enlaza una página con el tema activo: ?brand=1&theme=0.1.
Qué cambia la v0.1
El sistema de diseño es lo que los plugins publican para toda la comunidad, así que se mantiene cerca de Moodle: formas sobrias y los colores y la fuente del sitio. El tema es donde Didactika va más lejos, en la dirección de Material y de las interfaces modernas de React, de un modo que no encajaría en un Moodle sin personalizar.
| Área | Sistema de diseño (plugins) | Tema de Didactika v0.1 |
|---|---|---|
| Color | Los colores del sitio Moodle, con los tonos derivados de ellos | La paleta de Didactika sobre los roles de Bootstrap: primary #0f766e, secondary #475569, success #15803d, info #0369a1, warning #b45309, danger #b91c1c |
| Tipografía | La fuente del tema de Moodle | Inter, con menos espacio entre letras en los títulos |
| Botones | Radio de 8 px, 36 px de alto, botones de icono redondos, variante tonal | La misma forma en formularios y diálogos; píldoras solo en el marco de tablas, barras de herramientas y paginadores; los botones de icono crecen al pasar el puntero y el plano muestra un círculo teñido |
| Campos | Un borde y un anillo al enfocar | Una sombra interior suave, un tinte al pasar el puntero y un halo alrededor de un borde de 2 px al enfocar |
| Superficies | Radio de 12 px, un borde fino | Radio de 20 px en tarjetas y 28 px en diálogos, sombras teñidas en vez de bordes |
| Gradiente | Ninguno: colores sólidos | Un gradiente diagonal desde el color primario en botones primarios, barras de progreso y una navbar primaria |
| Detalles de aprendizaje | Nada extra | Una barra en la fila bajo el puntero, un subrayado de pestaña que se desliza, pastillas con gradiente, barras de progreso más gruesas y una casilla que salta al marcarse |
| Movimiento | Solo fundidos de color | Una onda desde el punto del clic y una elevación de un píxel al pasar el puntero |
| Documentación | Las páginas tal cual | Una etiqueta junto al título que dice que el tema está activo |
Qué no cambia
El tema cambia valores, no estructura: tamaños, espaciado, estados, anillo de foco, iconos y comportamiento son los del sistema de diseño. Eso es lo que permite que un plugin se vea igual con o sin tema, y lo que evita que un tema rompa una pantalla.
Reglas para los plugins
- Usa las variables de Bootstrap y las clases de los componentes (
var(--bs-primary),btn-primary), nunca un hex de la paleta. El tema llega al plugin por esas variables. - No fijes una familia tipográfica, un gradiente ni una sombra propia en un plugin. Si una pantalla necesita uno, va en el tema.
- Prueba una pantalla con el tema apagado y con él encendido: las dos tienen que verse bien.