Workshop Kit · referencia del widget
Publicadofont-pair-picker
Seis emparejamientos pre-vetados de tipografía título + cuerpo, presentados como tarjetas de vista previa que renderizan el mismo nombre de restaurante + tagline. Cada par es un stack CSS de font-family construido sobre fallbacks del sistema y comúnmente-instalados — sin fetch de fuente remota — así que el iframe sandbox="" del riel muestra la elección real sin contradecir la postura de "sin fetch" de la suite. Las fuentes reales de Google Fonts entran por el @import del generador de la L14 al momento del deploy, no aquí. Escribe fontPair: { id, heading, body } a MuntinContext.
Demo en vivo
Seis tarjetas, una seleccionada en todo momento. Haz clic o usa las flechas para mover la tarjeta enfocada; Enter o Espacio confirma la selección. El id, stack de título y stack de cuerpo del par elegido se escriben a MuntinContext.fontPair.
Sin bloque de configuración — los seis pares vienen incluidos en el widget
Los seis pares
El listado está curado para uso en restaurantes — cada par mapea a un tipo reconocible de operación. Los operadores no necesitan saber terminología tipográfica para elegir bien; las descripciones les dicen qué "lee como" cada par.
| id | Stack de título | Stack de cuerpo | Se lee como |
|---|---|---|---|
editorial-modern |
Fraunces / Playfair / Georgia / serif | Inter / system-ui sans | El default del Método; el bootcamp mismo está en este par. |
diner-classic |
Bebas / Oswald / Impact / Arial Narrow | Georgia / serif | Lugares de desayuno, mostradores americanos clásicos, sensación de letrero de diner. |
trattoria |
Playfair / Cormorant / Garamond / serif | Lora / EB Garamond / serif | Default de restaurante italiano; establecido sin esforzarse demasiado. |
taqueria |
Anton / Bebas / Impact / sans | Inter / system-ui sans | Lee callejero, lee fuerte — restaurantes estilo letrero pintado a mano. |
minimal-tasting |
Inter / system-ui sans | Inter / system-ui sans | Menús de degustación, bares de vino — donde la sobriedad ES la marca. |
corner-store |
Caveat / Kalam / Comic Sans MS / cursive | Inter / system-ui sans | Cafés, panaderías, jugueras — "la persona detrás del mostrador." |
Contrato
Sin atributos data más allá de data-widget; sin bloque JSON. El widget lee el id del par seleccionado previamente (si lo hay) de MuntinContext.fontPair.id y pre-selecciona esa tarjeta.
| Comportamiento | Notas |
|---|---|
Lee fontPair.id |
Pre-selecciona la tarjeta correspondiente al montar. Cae a "sin selección" si está ausente (la primera tarjeta recibe el foco por Tab, pero aria-checked="false" hasta que el operador confirme). |
Escribe fontPair |
{ id, heading, body } — el id es el slug estable; título + cuerpo son los stacks CSS que el generador de la L14 + el riel usan directamente. |
| Sin cargas de fuente remota | Cada par usa fallbacks del sistema y comúnmente-instalados, así el iframe en sandbox del riel muestra el renderizado correcto sin violar "sin fetch". El generador de la L14 empareja el id elegido con un @import de Google Fonts al momento del deploy. |
| Etiquetas bilingües | Cada par tiene name_en / name_es y blurb_en / blurb_es. El widget lee deps.locale al montar y renderiza los strings correspondientes. El nombre de restaurante de muestra + tagline también están localizados ("Jolene's Cafe" → "Café Jolene"). |
| Sincronización entre dispositivos | fontPair está en CONFIG_ALLOWED_KEYS en src/lib/course.js y en el array ALLOWED correspondiente en assets/js/course-config-sync.js, así que los operadores con sesión iniciada ven la misma elección en su segundo dispositivo. |
Marcado
Eso es todo. Las seis tarjetas se renderizan automáticamente y la selección se escribe a fontPair en cada commit.
Accesibilidad
- El contenedor de tarjetas es
role="radiogroup"conaria-labelledbyapuntando al encabezado visible. - Cada tarjeta es
role="radio"conaria-checked. La tarjeta seleccionada es la única contabindex="0"; las demás sontabindex="-1", según el patrón WAI-ARIA de radio-group. - Teclado: las flechas (Arriba/Abajo/Izquierda/Derecha) mueven y confirman la selección; Home y End saltan al primero/último; Enter y Espacio confirman la tarjeta enfocada.
- Una región polite en vivo anuncia la selección: "Par tipográfico Editorial moderno seleccionado." Los usuarios de lectores de pantalla escuchan el resultado sin tener que interpretar la vista previa visual.
- El foco es visible vía un contorno de alto contraste distinto del borde de selección.
Por qué seis, no "construye el tuyo"
La tipografía es el lugar donde los operadores se atascan o eligen mal. Seis pares pre-vetados re-encuadra la elección de "toma una decisión tipográfica" a "elige el que lee como mi lugar", que es la pregunta que sí pueden responder. Las descripciones ("lee callejero, lee fuerte") nombran el vibe en lenguaje-de-operador. La L7 también incluye el slider de voz para el tono — juntos cubren paleta + voz + tipografía, las tres decisiones definitorias de marca que el bootcamp necesita fijadas antes de la L8.
Dónde se publica
El generador de la L14 lee fontPair.id y emite un @import de Google Fonts + variables CSS para --font-display + --font-body en el styles.css generado. El riel usa el mismo id para renderizar su iframe en sandbox con fallbacks del sistema mientras el operador todavía está eligiendo — sin necesidad de deploy para ver la vista previa.
Código fuente
/tools/_shared/workshop/font-pair-picker.js — ~210 LOC. Exporta { tag, contextKeys, mount, serialize } según el contrato de widgets del Workshop Kit. Los seis pares viven como una constante PAIRS congelada al inicio del archivo; el widget es por lo demás un renderizador delgado de radio-group con navegación por flechas y un anunciador de región polite.