UIAPI: tokens y versiones de Moodle
Las variables CSS de cada versión de Moodle, en claro y oscuro, cómo convertirlas en SCSS o en archivos de herramientas de diseño y cómo comprobar el contraste.
Un token es una variable CSS que define el tema de una versión de Moodle: --bs-primary, --bs-body-bg, los --mds-* de Moodle 5.3. Leerlos de aquí mantiene la documentación de un plugin, un kit de Figma o un script de build al paso de la hoja de estilos real de esa versión.
Qué se publica
| Dirección | Qué guarda |
|---|---|
/api/index.json → versions[] |
Cada versión con su generación de Bootstrap, familia de iconos, soporte y los enlaces a sus tokens y stylesheet |
/api/tokens/<version>.json |
tokens.light y tokens.dark, cada uno un mapa de nombre de variable a valor |
/moodle/<version>/boost.css |
La hoja de esa versión, acotada bajo .ds-<version> para que varias convivan en una página |
<version> es v53, v45 o v41. Moodle 5.3 tiene unas 500 variables por modo; las versiones 4.x tienen muchas menos, porque Bootstrap 4 compila sus colores en las clases. El modo oscuro existe desde Moodle 5.x; los archivos de 4.x tienen dark vacío.
Leer un token
const root = 'https://moodle-design.didactika.org';
const v53 = await (await fetch(root + '/api/tokens/v53.json')).json();
console.log(v53.version.label); // "Moodle 5.3 LTS"
console.log(v53.tokens.light['--bs-primary']);
console.log(v53.tokens.dark['--bs-body-bg']);Las familias de variables
| Prefijo | Qué guarda |
|---|---|
--bs-* |
Bootstrap: colores, cuerpo, bordes, fuentes, sombras, radios |
--bs-*-rgb |
Los mismos colores como canales, para rgba(var(--bs-primary-rgb), .2) |
--bs-*-bg-subtle, -border-subtle, -text-emphasis |
Los tonos que Bootstrap 5.3 deriva para cada rol |
--mds-* |
El sistema de diseño propio de Moodle 5.3 (tipografía, espaciado, color) |
--primary, --secondary… |
Los nombres antiguos de Moodle, aún definidos |
Generar SCSS para una herramienta
const entries = Object.entries(v53.tokens.light).filter(([name]) => name.startsWith('--bs-'));
const scss = entries.map(([name, value]) => `$${name.slice(2)}: ${value};`).join('\n');Generar un archivo para una herramienta de diseño
Un conjunto de tokens en el formato que leen los plugins de Figma y Style Dictionary ({ "nombre": { "value": … } }):
const toTokens = (map) => Object.fromEntries(
Object.entries(map)
.filter(([name]) => name.startsWith('--bs-') && !name.endsWith('-rgb'))
.map(([name, value]) => [name.slice(5), {value, type: /^#|^rgb/.test(value) ? 'color' : 'other'}]),
);
const file = {light: toTokens(v53.tokens.light), dark: toTokens(v53.tokens.dark)};Comprobar el contraste con los colores reales
const luminance = ([r, g, b]) => {
const f = (x) => { const v = x / 255; return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4; };
return 0.2126 * f(r) + 0.7152 * f(g) + 0.0722 * f(b);
};
const rgb = (hex) => [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16));
const ratio = (a, b) => { const [x, y] = [luminance(rgb(a)), luminance(rgb(b))].sort((p, q) => q - p); return (x + 0.05) / (y + 0.05); };
console.log(ratio(v53.tokens.light['--bs-primary'], '#ffffff').toFixed(2)); // 4,5 o másLos colores del tema de Didactika no son tokens de Moodle
La paleta del tema de Didactika (/api/brand.json) se aplica sobre las variables de Moodle. Un plugin nunca fija un hex de ella: usa la variable de Bootstrap (var(--bs-primary)) y la paleta llega con el tema. Mira la página “Tema de Didactika”.
Comprueba una versión antes de apoyarte en ella
El campo support de cada versión dice si es vigente, LTS o heredada, en los dos idiomas. Léelo cuando una guía diga qué versiones probar; la matriz de una CI debería incluir los dos extremos del rango admitido y la LTS intermedia.