Sistema de diseño de las ayudas

Cada componente se ve funcionando, con su wikitexto propuesto, su uso, su justificación y lo que falta evaluar, en el espécimen. Este documento resume las reglas y las decisiones.

Principio: Stella Nova prima

El sistema de diseño de las ayudas no define tokens propios. Todo se construye con los tokens semánticos de Stella Nova v0.9.0 y, antes de crear un componente, se reutiliza uno del skin. Referencia: espécimen de Stella Nova y docs/DISENO.md del repositorio del skin.

Reglas

Solo tokens semánticos --sn-*. Nunca primitivas (--sn-azul-300, --sn-malva-400, --sn-tinta-*, --sn-papel-*).
Nova reservado. --sn-nova es para foco, isotipo, títulos y menús activos. Ningún componente nuevo lo usa. Los componentes del skin que ya lo traen (Acordeón, Aviso info) se usan tal cual.
Reutilizar antes de crear. Badge, control segmentado, Aviso, Tarjeta, Acordeón, Botón y el badge de categoría cubren 7 de las 16 necesidades.
Nunca solo color. Modo y estado se leen por forma y palabra. El único color con significado agregado es el ámbar de la decisión, que ya existe como sn-badge-warn.
Ritmo. Vertical con --sn-baseline, --sn-baseline-half, --sn-baseline-2 y --sn-baseline-3. Horizontal con --sn-s-*.
Radios. --sn-radius-s, --sn-radius y --sn-radius-l. --sn-radius-pill solo para contadores numéricos en mono (el número de los Pasos).
Portables a la wiki. Todo cabe en Plantilla:X/style.css: var() sin valor de respaldo, sin :focus-within, sin var() dentro de transition.
Contraste AA. Texto secundario en --sn-ink-soft; --sn-ink-faint no se usa para texto.

Qué cambió respecto de la versión anterior

Antes	Ahora	Motivo
Tokens `--mx-aprender`, `--mx-resolver`, `--mx-consultar`, `--mx-entender` (un color por modo)	Badge neutro del skin + forma (● ▲ ■ ◆)	Usaban primitivas y `--sn-nova`; el modo ya se distinguía por forma y etiqueta
`--mx-pendiente`, `--mx-decision`, `--mx-recomendacion`	`mx-badge-fantasma`, `sn-badge-warn`, badge con borde	Alias innecesarios: el skin ya tiene esos roles
Sello en píldora (`--sn-radius-pill`)	Badge con `--sn-radius`	La píldora es solo para contadores numéricos
Tarjeta propia con borde nova al pasar el mouse	`.tarjeta` del skin	Reutilización; nova reservado
Píldoras de perfil	`.sn-seg` del skin	Reutilización
Avisos propios (perfil, pendiente, conversión)	`.cas-aviso` (nota, info) + `.wiki-btn`	Reutilización
«Más detalle» propio	`.wiki-accordion--naked` con `details` nativo	Reutilización
Pie con filete superior	Superficie `--sn-paper-edge` y aire	Doctrina del skin: separar por aire, no por filetes
Gantt con nova y azul por prioridad	Tintas (`--sn-ink`, `--sn-ink-soft`, `--sn-hairline`)	Sin primitivas ni nova
Decisión marcada con ◆	Decisión marcada con ?	El rombo ya es la forma de Entender

Inventario

#	Componente	Tipo	Base del skin
1	Sello de modo	Nuevo	Badge
2	Sello de estado	Nuevo	Badge
3	Ficha v0.4	Nuevo	Plantilla:Documentación de Casiopea
4	Pasos	Nuevo	Lista ordenada
5	Más detalle	Uso nuevo	Acordeón naked
6	Definición en línea	Nuevo	Tooltip (referencia visual)
7	Puente de modo	Nuevo	Navegación
8	Aviso por perfil	Uso nuevo	Aviso nota
9	Tarjeta de ayuda	Uso nuevo	Tarjeta
10	Selector de perfil	Uso nuevo	Control segmentado
11	Índice de temas	Uso nuevo	Badge de categoría
12	Enlace a pendiente	Nuevo	Enlace + sello de estado
13	Página pendiente	Uso nuevo	Aviso nota
14	Bloque de conversión	Uso nuevo	Aviso info + Botón
15	Catálogo de contenido incrustable	Uso nuevo	Tabla (wikitable)

El espécimen muestra solo estos 15 elementos, que son los que se crean para las ayudas. Las herramientas del prototipo (marcador de revisión, indicador de componente nuevo, modo comentarios, aviso de salida y recorrido de bienvenida) sirven para revisar la propuesta, no forman parte de ella y se describen en Especificación de la fase 2: propuesta accesible, comentarios y sitio del proyecto.

Indicador de componente nuevo

Con la capa de revisión encendida, al pasar el cursor o enfocar con el teclado un componente de la lista, aparece un globo que dice si es un componente nuevo o un uso nuevo de un componente del skin, que está en evaluación, y enlaza a su sección del espécimen. El globo se inserta justo después del componente, así que con Tab se llega a su enlace. Los componentes sin elementos enfocables reciben tabindex="0" solo mientras la capa está encendida. Con ?revision=0 desaparece.

Verificación (5 oct 2026)

Contraste medido en claro y oscuro: sello de modo 13,9:1 y 14,7:1; sello fantasma 5,7:1 y 6,1:1; badge warn 4,7:1 y 6:1; etiquetas de la ficha y del pie 5,2:1 y 5,6:1. Todo cumple AA.
Teclado: el globo del indicador es alcanzable con Tab; definiciones y marcadores se abren con Enter y se cierran con Escape.

Fase 2: sitio del proyecto y propuestas a la skin

Sitio del proyecto, hijo de Stella Nova. Resumen, árbol, decisiones, carta Gantt, espécimen y documentos dejan el chrome de la wiki y usan la estructura del espécimen de la skin (spec-top, spec-main, comp). Sus valores computados son idénticos a los del espécimen de Stella Nova v0.9.0. Lo propio se limita a la navegación móvil («Menú»), el panel «Lectura» y la hoja de los documentos (assets/css/proyecto.css).
Preferencias de lectura de la skin: tema (claro, oscuro, automático), tamaño de letra y familia, con las mismas claves sn-pref-* que la wiki.
Propuesta para la skin, limitada a .mx-propuesta (no redefine nada): .sn-badge-modo con --sn-mode-mark y --sn-mode-mark-size. El token de nota (--sn-note) pertenece a las herramientas de revisión y queda en la especificación de la fase 2, fuera del espécimen.
Foco: --sn-focus-ring es una sombra, no un color; los contornos de foco usan --sn-focus-border, igual que la skin.

Pendiente en esta fase

Que el equipo de revisión evalúe cada componente (sección «Para evaluar» del espécimen).
Confirmar los nombres de las plantillas propuestas: Sello, Pasos inicio/fin, Definición (o extender Tooltip).
Decidir si .mx-modo y .mx-badge-fantasma pasan al skin como variantes oficiales del badge.