/* ============================================================================ Juicy — Dashboard Design System · ALERT (toast · alert banner) ---------------------------------------------------------------------------- Figma: "Alerts & Toast" (1:3088). Toast (1:3116) 5 modos · Alert Banner (1:3092) 4 modos × Display Icon. Los dos consumen el CONTRATO DE TONOS (tone.css) — aquí no hay un solo color: Toast = --tone-fill de fondo + --tone-fg de texto (sólido) Banner = --tone-soft de fondo + --tone-on-soft de texto + --tone-fill en la barra de acento y el icono
Guardado
Listo
Mensaje del banner
El mapeo mood→tono del producto (success/error/warning/info del PHP) vive en $.fn.pop_alert (main.js), no aquí: el CSS no sabe qué es un "mood". ============================================================================ */ /* ---- Toast ----------------------------------------------------------------- */ /* La pila. main.js la crea con este id; la clase es la que pinta. */ .toast-stack { position: fixed; display: inline-flex; flex-direction: column; align-items: center; gap: 5px; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 9999; } /* Mode=Default es neutral-lv1 (el charcoal): sin clase de tono no hay toast "sin color". En :where() para que cualquier .tone-* lo gane. */ :where(.toast) { --tone-fill: var(--action-neutral-lv1-default); --tone-fg: var(--action-neutral-lv1-text); } .toast { position: relative; max-width: 300px; padding: 10px 16px; /* medido: 36 de alto = 10+16+10 */ border-radius: var(--radius-md); /* nota 2 */ background: var(--tone-fill); color: var(--tone-fg); font-size: 12px; font-weight: 500; line-height: 16px; text-align: center; box-shadow: var(--shadow-md); /* nota 3 */ /* Entrada/salida: estaba en main.css y se conserva tal cual — el JS togglea `.active` (comportamiento, no tono). */ transition: all 0.5s; transform: translateY(30px); opacity: 0; visibility: hidden; } .toast.active { transform: translateY(0); opacity: 1; visibility: visible; } /* ---- Alert Banner ----------------------------------------------------------- */ /* Franja a lo ancho, esquinas rectas. SIEMPRE lleva un `.tone-*` (no hay modo neutro en Figma). Consumidores (nació sin ninguno — los tres llegaron después): · el login — errores y el aviso de contraseña actualizada (F2f) · main.js — la caja `.form_errors` de cualquier formulario · el banner de modo pruebas de facturación (`tone-warning`): el ÚNICO con `Display Icon=Yes` y el ÚNICO con dos líneas de texto. Ver nota 6. */ .alert-banner { display: flex; align-items: center; gap: 11px; /* medido: icono→texto */ min-height: 56px; padding: 8px 20px 8px 15px; /* +5 de barra a la izq = 20 óptico */ border-left: 5px solid var(--tone-fill); background: var(--tone-soft); color: var(--tone-on-soft); /* nota 1 */ font-size: 13px; font-weight: 500; letter-spacing: 1px; /* nota 4 */ line-height: 1.35; } /* Tipografía, como todo icono de aquí: font-size + color, sin caja (foundation.css). El acento va en `--tone-fill` porque el icono es acento, no lectura — el TEXTO del banner sí baja a `--tone-on-soft` (nota 1). */ .alert-banner__icon { flex-shrink: 0; font-size: 24px; line-height: 1; color: var(--tone-fill); } svg.alert-banner__icon { width: 24px; height: 24px; fill: currentColor; } /* ============================================================================ NOTAS 1. EL TEXTO DEL BANNER DIVERGE DE FIGMA A PROPÓSITO: allá va en la rampa 500 (`--tone-fill`), aquí en `--tone-on-soft` (rampa 700) — la MISMA divergencia AA ya aprobada para el badge--soft (tone.css). Texto sobre tinte 200 con el 500 da 2.06–3.31:1. La barra y el icono sí van al 500: son acento, no lectura. 2. EL RADIO DEL TOAST ESTÁ DIBUJADO A MANO EN FIGMA (~8px, medido del render). El sistema tiene TRES radios (3/5/999) y un cuarto para un solo componente no se justifica — mismo criterio con el que murió `.btn--lg`. Normalizado a `--radius-md` (5). Si el 8 era intencional, se decide en Figma primero. 3. LA SOMBRA ES UN AÑADIDO: Figma pinta el toast plano sobre la tarjeta del styleguide, pero en el producto flota sobre contenido arbitrario y sin elevación se pierde. `--shadow-md` (la del sistema), no la rgba() a mano que traía main.css. 4. "MESSAGE" EN EL MOCK VA EN MAYÚSCULAS con tracking de 1px. Es imposible saber si el uppercase es DISEÑO o texto de muestra — un mensaje de error real de tres líneas gritando en caps sería mucho. Transcrito el tracking, NO el text-transform. Si era intencional, es una línea. 5. Los MOODS del producto son 4 + default (medidos: error ~100 usos, success 29, warning 4, info 2, '' = neutro). El mapeo a tonos es 1:1 (info→information) y vive en pop_alert. `warning` hereda del contrato el texto oscuro sobre naranja (tone.css invierte el fg de warning por AA). 6. EL BANNER NO TIENE TÍTULO NI CUERPO, Y ESTÁ BIEN ASÍ. Figma lo dibuja con una sola línea; el de modo pruebas (facturación) trae dos: un `` de título y una descripción. Se resuelve con markup del PRODUCTO dentro del componente — un `
` con `.d-block` — y NO con `.alert-banner__title` y `.alert-banner__body`. El motivo es la regla de siempre: un caso no es una regla. Con UN consumidor de dos líneas, inventar el par título/cuerpo es diseñar para un futuro que no ha pedido nada. Al tercero se promueve. Mientras, `align-items:center` + `min-height:56px` ya encuadran las dos líneas sin tocar el componente (medido: 56 exactos, el mismo alto que con una). 7. OJO CON EL TRACKING DE LA NOTA 4 CUANDO HAY PROSA DE VERDAD. El 1px se transcribió de un mock cuyo texto era la palabra "MESSAGE"; el banner de modo pruebas es el primero con frases reales, y ahí sí se nota el aire. Se deja transcrito (fidelidad al mock, que es la regla de esta migración) y se sube a decisión del dueño: si estorba, es una línea. Ver el plan, §3.b. ============================================================================ */