UIColor
Los colores de Didactika junto a todos los colores de Bootstrap y de Moodle, leídos de la versión que elijas, con su contraste y un laboratorio para probar los tuyos.
Los plugins nunca escriben un color. Usan las clases y variables de Bootstrap y de Moodle (btn-primary, text-danger, --bs-primary), y el tema del sitio decide cómo se ven. Cada muestra de abajo se lee de la hoja de estilos de la versión de Moodle elegida, enseña el mejor color de texto sobre ella con su relación de contraste, y copia su valor al hacer clic.
Colores del tema de Didactika
El verde azulado del logo (#00555a) y la familia que usa la web (didactika.org): una escala teal de 50 a 950, con esmeralda, cian y un gris pizarra frío para los neutros.
La paleta de Didactika
Activa Tema de Didactika en la barra de arriba y todos los ejemplos del sitio, también las muestras de abajo, se dibujan con la paleta del tema aplicada a los roles de Bootstrap: primario #0f766e, secundario #475569, éxito #15803d, información #0369a1, advertencia #b45309 y peligro #b91c1c. Cada uno llega a AA (4,5:1) con texto blanco.
Colores de tema de esta versión
Los ocho colores del tema de Bootstrap.
Son variables --bs-* y siguen el modo de color de la página.
Son las variables de la raíz (--primary, --success…).
Texto, fondos y bordes 5.3+
Tonos suaves y de énfasis 5.3+
Fondos suaves, bordes y texto fuerte para cada rol, que usan las alertas y los elementos de lista.
Paleta de Bootstrap
Los diez tonos de Bootstrap, negro y blanco.
Cada tono tiene además su escala de 100 a 900, calculada como lo hace Bootstrap: un tinte mezcla con blanco y una sombra con negro.
Grises
Escalas de Moodle 5.3+
Moodle añade un conjunto propio de tokens (--mds-color-<tono>-<paso>). Usa un color de escala solo donde un color del tema no sirva, por ejemplo el color de un tipo de actividad.
Qué significa cada color
| Color | Significa | Ejemplos |
|---|---|---|
| Primario | La acción principal, lo elegido o abierto | Nuevo perfil, Guardar, la página activa |
| Secundario | Una acción o estado neutro | Cancelar, Importar, Borrador |
| Éxito | Hecho, activado, seguro | Completada, Activado |
| Advertencia | Pide atención, sobrescribe, parcial | Parcial, Sobrescribir |
| Peligro | Elimina, detiene o ha fallado | Eliminar, Detener, Fallida |
| Información | Información neutra que importa | En cola, En curso |
El significado es el mismo en todos los plugins. El rojo nunca es decoración, y el verde nunca es “primario”.
Contraste
El texto sobre un color debe llegar a 4,5:1 (3:1 desde 24 px o 19 px en negrita), y los bordes de los controles y los anillos de foco a 3:1, en todos los modos de color. La etiqueta de cada muestra indica el mejor color de texto y su relación. No distingas dos estados solo por el tono: acompaña el color con un icono o una palabra, y usa azul y naranja antes que rojo y verde.
Tintes
Cuando un plugin necesita un fondo suave en un color del tema (un badge, una acción de fila, un tile), mezcla el color con el fondo de la página en lugar de elegir un color nuevo: color-mix(in srgb, var(--bs-success) 14%, var(--bs-body-bg)). El tinte sigue al tema y al modo de color, y no hay nada que configurar.
Laboratorio de color
Cambia un rol y míralo en componentes reales de la versión elegida, con el contraste del texto sobre él. Nada fuera de la vista previa cambia. Copia el SCSS para un preset de Boost cuando te guste.
Una frase con un enlace · text-primary · text-danger
- Elemento activo
- Otro elemento
SCSS para un preset de Boost
Pégalo en el "SCSS inicial en bruto" del tema, o usa el primario en "Color de marca".
Variables CSS
Para Moodle 5.x y su CSS adicional. Los botones necesitan el SCSS de arriba, porque Bootstrap compila sus colores.