@studiolxd/brand 38.15.0 → 38.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiolxd/brand",
-  "version": "38.15.0",
+  "version": "38.17.0",
   "description": "El sistema de diseño de Studio LXD: componentes React, tokens y documentación de la suite SLXD.",
   "repository": {
     "type": "git",

package/src/tokens/molecules/alert.css

@@ -7,11 +7,13 @@
   --alert-padding-inline: var(--spacing-5); /** Padding horizontal del alert (24px) */
   --alert-gap: var(--spacing-3); /** Aire entre el contenido y el botón de cierre (12px) */
   --alert-content-gap: var(--spacing-2); /** Aire entre el título y la descripción, y entre los bloques de la descripción (8px) */
+  --alert-actions-margin-block-start: var(--spacing-3); /** Aire entre el cuerpo del aviso y su fila de acciones (12px): más que el que separa título y descripción, porque lo que viene ya no es texto */
   --alert-title-line-height: var(--line-height-snug); /** Interlineado del título — el de un rótulo corto */
   --alert-close-size: var(--size-component-sm); /** Lado del botón de cierre — talla sm (32px), la mínima del sistema. El color del aspa y su hover los pone el Button ghost, que voltea con la superficie del relleno */
   --alert-close-inset: var(--spacing-2); /** Distancia del botón de cierre a la esquina superior derecha (8px) */
   --alert-border-radius: var(--border-radius-default); /** Sin radio de esquinas */
   --alert-border-width: var(--border-width-default); /** Grosor del borde */
+  --alert-actions-gap: var(--form-actions-gap); /** Aire entre las acciones del aviso — el de los botones de un formulario: la fila de acciones del sistema es una sola */
   --alert-bg: var(--color-primary); /** Fondo por defecto — prussian. El relleno neutro invierte el lienzo: sobre página clara es prusia y sobre página oscura, blanco (ver `surface-dark-bg`) */
   --alert-border-color: var(--color-text-on-dark); /** Borde por defecto — blanco. Sobre página clara dibuja el contorno del relleno prusia */
   --alert-title-font-size: var(--text-font-size); /** El título hereda el cuerpo de la superficie (16px en aplicación, 20px en la pública) */

package/src/tokens/molecules/chat-shell.css

@@ -8,6 +8,7 @@
   --chat-shell-header-gap: var(--spacing-3); /** Separación entre lo que va en la cabecera del hilo */
   --chat-shell-thread-padding-block: var(--spacing-4); /** Aire del hilo por arriba y por abajo, en la ranura del armazón. Arriba separa el primer globo de la cabecera —el selector de modelo— y abajo el último de la caja de escribir: la columna del chat no tiene `gap`, así que sin esta medida los tres bloques se tocan. Va en el envoltorio y no dentro del hilo a propósito: ahí queda fuera del desplazamiento y el pasillo no se va con el scroll, que es lo que deja la cabecera siempre despejada */
   --chat-shell-breakpoint: var(--breakpoint-lg); /** Donde el armazón pasa de dos columnas a una. El mismo punto en el que el chrome de aplicación pasa de barra superior a barra lateral */
+  --chat-shell-drawer-gap: var(--chat-shell-thread-padding-block); /** Dentro del cajón de pantalla estrecha, el aire entre la fila del disparador y la lista. Cascada desde el aire de la ranura del hilo porque el cajón repite la maqueta de la columna principal: la lista tiene que arrancar donde arranca el hilo, para que al desplegar no se mueva más que el contenido. El cajón anula el relleno propio del `Sheet` (ver ChatShell.css), así que esta es la única medida que el armazón pone dentro de él */
   --chat-shell-thread-padding-inline: calc(var(--message-bubble-tail-size) + var(--message-bubble-border-width)); /** Pasillo lateral del hilo: exactamente lo que sobresale la cola del globo, que nace FUERA de su caja (el lado del triángulo más su contorno). Sin él la cola se corta contra el canto del desplazamiento. No es un margen de página —el aire alrededor del chat sigue poniéndolo quien lo monta—: es la anchura justa para que el pico respire */
   --chat-shell-bg: var(--color-background-light); /** Fondo del armazón */
 }

package/src/tokens/scss/molecules/_alert.scss

@@ -7,6 +7,8 @@ $lxd-alert-border-radius: 0px; // Sin radio de esquinas
 $lxd-alert-border-width: 1px; // Grosor del borde
 $lxd-alert-gap: 0.75rem; // Aire entre el contenido y el botón de cierre (12px)
 $lxd-alert-content-gap: 0.5rem; // Aire entre el título y la descripción, y entre los bloques de la descripción (8px)
+$lxd-alert-actions-gap: 0.75rem; // Aire entre las acciones del aviso — el de los botones de un formulario: la fila de acciones del sistema es una sola
+$lxd-alert-actions-margin-block-start: 0.75rem; // Aire entre el cuerpo del aviso y su fila de acciones (12px): más que el que separa título y descripción, porque lo que viene ya no es texto
 $lxd-alert-bg: #111e30; // Fondo por defecto — prussian. El relleno neutro invierte el lienzo: sobre página clara es prusia y sobre página oscura, blanco (ver `surface-dark-bg`)
 $lxd-alert-border-color: #ffffff; // Borde por defecto — blanco. Sobre página clara dibuja el contorno del relleno prusia
 $lxd-alert-title-font-size: 1rem; // El título hereda el cuerpo de la superficie (16px en aplicación, 20px en la pública)

package/src/tokens/scss/molecules/_chat-shell.scss

@@ -4,6 +4,7 @@
 $lxd-chat-shell-list-width: 15rem; // Ancho de la columna de conversaciones — cascada desde `sidebar`, que es donde suele vivir esa columna dentro de una aplicación
 $lxd-chat-shell-gap: 2rem; // El aire entre la columna de conversaciones y el hilo. Lo pone el contenedor, no los hijos: el armazón no tiene ningún relleno propio, así que esta es la única medida de espaciado que aporta y la única que separa las dos columnas — ya no hay línea ni pasillo que lo haga
 $lxd-chat-shell-header-gap: 0.75rem; // Separación entre lo que va en la cabecera del hilo
+$lxd-chat-shell-drawer-gap: 1rem; // Dentro del cajón de pantalla estrecha, el aire entre la fila del disparador y la lista. Cascada desde el aire de la ranura del hilo porque el cajón repite la maqueta de la columna principal: la lista tiene que arrancar donde arranca el hilo, para que al desplegar no se mueva más que el contenido. El cajón anula el relleno propio del `Sheet` (ver ChatShell.css), así que esta es la única medida que el armazón pone dentro de él
 $lxd-chat-shell-thread-padding-block: 1rem; // Aire del hilo por arriba y por abajo, en la ranura del armazón. Arriba separa el primer globo de la cabecera —el selector de modelo— y abajo el último de la caja de escribir: la columna del chat no tiene `gap`, así que sin esta medida los tres bloques se tocan. Va en el envoltorio y no dentro del hilo a propósito: ahí queda fuera del desplazamiento y el pasillo no se va con el scroll, que es lo que deja la cabecera siempre despejada
 $lxd-chat-shell-thread-padding-inline: calc(0.75rem + 1px); // Pasillo lateral del hilo: exactamente lo que sobresale la cola del globo, que nace FUERA de su caja (el lado del triángulo más su contorno). Sin él la cola se corta contra el canto del desplazamiento. No es un margen de página —el aire alrededor del chat sigue poniéndolo quien lo monta—: es la anchura justa para que el pico respire
 $lxd-chat-shell-bg: #ffffff; // Fondo del armazón

package/src/tokens/tokens.json

@@ -139,6 +139,8 @@
   "--alert-border-width": "1px",
   "--alert-gap": "0.75rem",
   "--alert-content-gap": "0.5rem",
+  "--alert-actions-gap": "0.75rem",
+  "--alert-actions-margin-block-start": "0.75rem",
   "--alert-bg": "#111e30",
   "--alert-border-color": "#ffffff",
   "--alert-title-font-size": "1rem",
@@ -3179,6 +3181,7 @@
   "--chat-shell-list-width": "15rem",
   "--chat-shell-gap": "2rem",
   "--chat-shell-header-gap": "0.75rem",
+  "--chat-shell-drawer-gap": "1rem",
   "--chat-shell-thread-padding-block": "1rem",
   "--chat-shell-thread-padding-inline": "calc(0.75rem + 1px)",
   "--chat-shell-bg": "#ffffff",