Workshop Kit · referencia del widget
Publicadopalette-picker
Un selector de paleta de tres muestras — acento, fondo (crema), tinta — con paletas iniciales curadas por cocina y un control de contraste WCAG en vivo. Escribe en palette[] dentro de MuntinContext; cada otro widget que se suscribe (la barra de vista previa en vivo, el generador de la L14) repinta el sitio del operador en los nuevos colores al instante.
Demo en vivo
Tres inputs de color nativos lado a lado. Elige una paleta sugerida para arrancar, luego ajusta cualquier muestra individualmente. El indicador de contraste debajo de los selectores se actualiza en vivo con la razón acento-sobre-crema (el contraste de texto más visible en el sitio generado del operador). El guardado persiste entre recargas.
data-context-key="palette" (siempre — lee restaurantProfile.cuisine para las sugerencias iniciales)
Contrato
El widget no necesita atributos data más allá de data-widget. Siempre escribe en palette[] (por posición: índice 0 = acento, 1 = crema, 2 = tinta), y lee restaurantProfile.cuisine para las sugerencias iniciales.
| Atributo / comportamiento | Notas |
|---|---|
data-widgetRequerido |
Siempre "palette-picker". |
Lee MuntinContext.restaurantProfile.cuisine |
Si está presente, la cadena de cocina (coincidencia por subcadena sin sensibilidad a mayúsculas: "mexican", "italian", "japanese", "mediterranean", etc.) selecciona un conjunto curado de tres paletas iniciales apropiadas para esa cocina. Si está ausente o no hay coincidencia, se entrega un conjunto neutral por defecto. |
Escribe MuntinContext.palette |
Un arreglo de tres cadenas en mayúsculas #RRGGBB — [acento, crema, tinta] — escrito con cada cambio (con debounce). Hex vacío/inválido nunca llega al almacenamiento; los inputs de color del widget son elementos nativos <input type="color"> que solo emiten hex válido. |
| Control de contraste WCAG en vivo | Recalcula la razón de contraste WCAG 2.2 de acento ↔ crema con cada cambio. Tres niveles de severidad: ok (≥4.5), warn (3.0–4.5), fail (<3.0). El indicador debajo de los selectores muestra la razón y el nivel en lenguaje simple. |
Marcado
Eso es todo el sitio de llamada. La lógica de sugerencias por cocina, los tres inputs de color, el control de contraste y los anuncios de la región en vivo viven en el renderer del widget; el autor de la lección solo deja caer la sección vacía en la página.
Por qué tres muestras y no cinco
Un error común en la marca de restaurantes es tratar al sitio web como un kit de marca — primaria, secundaria, terciaria, acento-1, acento-2. Así es como los consultores de marca cobran $8,000 por un lockup de logo. Para el operador que de verdad está publicando un sitio esta semana, tres colores hacen el trabajo: un acento para el CTA + cromo de marca, un fondo, una tinta. El generador de la L14 interpola esos tres en el CSS en línea de cada página generada; ninguna paleta más allá de las tres necesita existir.
El control de contraste existe porque los operadores eligen consistentemente pares de acento/crema que se ven geniales en el selector (coral saturado sobre beige cálido) pero fallan en el texto del cuerpo. El widget atrapa esto en el momento de diseño, no después del despliegue.
Dónde se publica
Cada lección posterior con un live-preview-frame en su barra lateral recoge la nueva paleta automáticamente — para la L8 la página del menú se renderiza en el color de acento del operador; para la L14 el generador emite una hoja de estilos anclada a ella.
Código fuente
/tools/_shared/workshop/palette-picker.js — ~280 LOC. Exporta { tag, contextKeys, mount, serialize } según el contrato de widgets del Workshop Kit. Tabla cocina → paleta en la parte superior del archivo; matemáticas de contraste WCAG 2.2 en un pequeño ayudante; el resto es conectar los elementos nativos <input type="color"> a la ruta de commit.
contextKeys lista tanto 'palette' (escribe) como 'restaurantProfile' (lee para cocina). El motor usa contextKeys para tree-shaking + seguimiento de dependencias; los widgets que no declaran sus lecturas pueden perder re-renderizados cuando el contexto upstream cambia.