@studiolxd/brand 49.28.0 → 51.0.0

package/src/tokens/scss/molecules/_floating-toolbar.scss

@@ -0,0 +1,15 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-floating-toolbar-gap: 0.25rem; // Separación entre los botones de un grupo y entre los dos grupos de la barra superior
+$lxd-floating-toolbar-offset: 0.5rem; // Distancia entre la barra y el borde del elemento: por encima de él en la barra superior, a su lado en los raíles
+$lxd-floating-toolbar-padding-block: 0.25rem; // Aire vertical del panel de la barra (o de cada raíl)
+$lxd-floating-toolbar-padding-inline: 0.25rem; // Aire horizontal del panel de la barra (o de cada raíl)
+$lxd-floating-toolbar-button-size: 2rem; // Caja de cada botón de icono: la talla `sm` del botón. Es también lo que mide el raíl de ancho, y por eso el hueco que el elemento reserva a cada lado
+$lxd-floating-toolbar-bg: #ffffff; // Fondo del panel: el de cualquier panel flotante, para que la barra se lea encima del contenido vecino
+$lxd-floating-toolbar-border-width: 1px; // Grosor del borde del panel
+$lxd-floating-toolbar-border-color: #111e30; // Color del borde del panel
+$lxd-floating-toolbar-border-radius: 0px; // Radio del panel
+$lxd-floating-toolbar-shadow: none; // Sombra del panel
+$lxd-floating-toolbar-transition-duration: 150ms; // Duración de la aparición y la desaparición. Con `prefers-reduced-motion: reduce` vale 0ms
+$lxd-floating-toolbar-transition-easing: ease; // Curva de la aparición y la desaparición

package/src/tokens/scss/molecules/_heatmap.scss

@@ -31,8 +31,7 @@ $lxd-heatmap-empty-pattern-width: 0.25rem; // Ancho de la trama de la celda sin
 $lxd-heatmap-legend-gap: 0.5rem; // Separación entre los elementos de la leyenda
 $lxd-heatmap-legend-font-size: 0.875rem; // Tamaño del texto de la leyenda
 $lxd-heatmap-legend-color: #4a4a4a; // Color del texto de la leyenda
-$lxd-heatmap-legend-swatch-size: 0.75rem; // Lado del cuadradito de la leyenda
-$lxd-heatmap-legend-swatch-gap: 0.25rem; // Separación entre cuadraditos de la leyenda
+$lxd-heatmap-legend-swatch-size: 0.75rem; // Alto de la tira de la leyenda y ancho de cada uno de sus peldaños, que van pegados
 $lxd-heatmap-margin-block-start: 0.75rem; // Aire entre la matriz y su leyenda
 $lxd-heatmap-step-1-bg: #dce9fc; // Paso 1 de la rampa de la matriz — sequential-100 de la rampa secuencial del sistema
 $lxd-heatmap-step-1-color: #111e30; // Tinta sobre el paso 1 — la que llega a 4,5:1 sobre ese relleno
@@ -46,3 +45,17 @@ $lxd-heatmap-step-5-bg: #236ac5; // Paso 5 de la rampa de la matriz — sequenti
 $lxd-heatmap-step-5-color: #ffffff; // Tinta sobre el paso 5 — la que llega a 4,5:1 sobre ese relleno
 $lxd-heatmap-step-6-bg: #164b90; // Paso 6 de la rampa de la matriz — sequential-700 de la rampa secuencial del sistema
 $lxd-heatmap-step-6-color: #ffffff; // Tinta sobre el paso 6 — la que llega a 4,5:1 sobre ese relleno
+$lxd-heatmap-diverging-warm-3-bg: #9f431f; // Escala divergente, peldaño warm-3 — diverging-warm-3 (#9F431F), extremo del brazo cálido
+$lxd-heatmap-diverging-warm-3-color: #ffffff; // Tinta sobre el peldaño divergente warm-3 — diverging-warm-3 (#9F431F), extremo del brazo cálido. Blanco: 6,37:1 (prusia daría 2,63:1)
+$lxd-heatmap-diverging-warm-2-bg: #e26330; // Escala divergente, peldaño warm-2 — diverging-warm-2-on-dark (#E26330): ver la tinta
+$lxd-heatmap-diverging-warm-2-color: #111e30; // Tinta sobre el peldaño divergente warm-2 — diverging-warm-2-on-dark (#E26330), NO diverging-warm-2. El intermedio cálido del sistema (#D45C2C) no admite cifra con ninguna de las dos tintas: 4,29:1 con prusia y 3,91:1 con blanco. Su par de superficie oscura, ya en la paleta, sí: 4,84:1 con prusia, y queda entre sus dos vecinos (1,32:1 con warm-1, 1,84:1 con warm-3). Sin color nuevo (regla 9)
+$lxd-heatmap-diverging-warm-1-bg: #f37f54; // Escala divergente, peldaño warm-1 — diverging-warm-1 (#F37F54), junto al neutro
+$lxd-heatmap-diverging-warm-1-color: #111e30; // Tinta sobre el peldaño divergente warm-1 — diverging-warm-1 (#F37F54), junto al neutro. Prusia: 6,37:1 (blanco daría 2,63:1)
+$lxd-heatmap-diverging-neutral-bg: #f2f2f2; // Escala divergente, peldaño neutral — el centro: el mismo gris que chart.diverging-neutral (#F2F2F2), un rol de superficie porque el centro se retira hacia el lienzo
+$lxd-heatmap-diverging-neutral-color: #111e30; // Tinta sobre el peldaño divergente neutral — el centro: el mismo gris que chart.diverging-neutral (#F2F2F2), un rol de superficie porque el centro se retira hacia el lienzo. Prusia: 14,98:1. Comparte relleno con la casilla sin dato, que se distingue por su trama y por no llevar cifra
+$lxd-heatmap-diverging-cool-1-bg: #70a6f2; // Escala divergente, peldaño cool-1 — diverging-cool-1 (#70A6F2), junto al neutro
+$lxd-heatmap-diverging-cool-1-color: #111e30; // Tinta sobre el peldaño divergente cool-1 — diverging-cool-1 (#70A6F2), junto al neutro. Prusia: 6,73:1 (blanco daría 2,49:1)
+$lxd-heatmap-diverging-cool-2-bg: #3484ee; // Escala divergente, peldaño cool-2 — diverging-cool-2 (#3484EE), intermedio
+$lxd-heatmap-diverging-cool-2-color: #111e30; // Tinta sobre el peldaño divergente cool-2 — diverging-cool-2 (#3484EE), intermedio. Prusia: 4,54:1 (blanco daría 3,70:1)
+$lxd-heatmap-diverging-cool-3-bg: #1f61b6; // Escala divergente, peldaño cool-3 — diverging-cool-3 (#1F61B6), extremo del brazo frío
+$lxd-heatmap-diverging-cool-3-color: #ffffff; // Tinta sobre el peldaño divergente cool-3 — diverging-cool-3 (#1F61B6), extremo del brazo frío. Blanco: 6,10:1 (prusia daría 2,75:1)

package/src/tokens/scss/molecules/_input-field.scss

@@ -16,7 +16,6 @@ $lxd-input-field-search-clear-focus-ring-offset: 2px; // Separación del anillo
 $lxd-input-field-search-clear-focus-ring-color: #111e30; // Color del anillo de foco del aspa: la tinta de la superficie
 $lxd-input-field-search-input-padding-inline-start: 2.5rem; // Padding izquierdo del campo — el texto empieza donde acaba la lupa
 $lxd-input-field-search-input-padding-inline-end: 2.5rem; // Padding derecho del campo cuando ofrece borrado — el texto termina donde empieza el aspa
-$lxd-input-field-error-font-family: "Google Sans Flex", system-ui, sans-serif; // Font family del mensaje de error
 $lxd-input-field-error-font-size: 0.875rem; // Font size del mensaje de error
 $lxd-input-field-error-font-weight: 300; // Font weight del mensaje de error
 $lxd-input-field-error-line-height: 1.5; // Line height del mensaje de error

package/src/tokens/scss/molecules/_input-phone-field.scss

@@ -2,11 +2,6 @@
 // Do not edit directly, this file was auto-generated.
 
 $lxd-input-phone-field-gap: 0.5rem; // Espacio entre label, control, helper y error
-$lxd-input-phone-field-error-font-family: "Google Sans Flex", system-ui, sans-serif; // Font family del mensaje de error
-$lxd-input-phone-field-error-font-size: 0.875rem; // Font size del mensaje de error
-$lxd-input-phone-field-error-font-weight: 300; // Font weight del mensaje de error
-$lxd-input-phone-field-error-line-height: 1.5; // Line height del mensaje de error
-$lxd-input-phone-field-error-color: #b30000; // Color del mensaje de error
 $lxd-input-phone-field-helper-font-family: "Google Sans Flex", system-ui, sans-serif; // Font family del texto de ayuda
 $lxd-input-phone-field-helper-font-size: 0.875rem; // Font size del texto de ayuda
 $lxd-input-phone-field-helper-font-weight: 300; // Font weight del texto de ayuda

package/src/tokens/scss/molecules/_loading-state.scss

@@ -1,8 +1,8 @@
 
 // Do not edit directly, this file was auto-generated.
 
-$lxd-loading-state-min-block-size: 16rem; // Alto que reserva la espera de una página o una zona: la caja no colapsa a la altura del girador mientras el contenido no llega
-$lxd-loading-state-sm-min-block-size: 8rem; // Alto que reserva la espera en talla sm — el cuerpo de un diálogo, una hoja o un popover
+$lxd-loading-state-min-height: 16rem; // Alto que reserva la espera de una página o una zona: la caja no colapsa a la altura del girador mientras el contenido no llega
+$lxd-loading-state-sm-min-height: 8rem; // Alto que reserva la espera en talla sm — el cuerpo de un diálogo, una hoja o un popover
 $lxd-loading-state-gap: 1rem; // Aire entre el girador y la acción — el mismo que EmptyState, porque ocupa su sitio
 $lxd-loading-state-padding-block: 3rem; // Padding vertical — el de EmptyState
 $lxd-loading-state-padding-inline: 1.5rem; // Padding horizontal — el de EmptyState
@@ -12,3 +12,7 @@ $lxd-loading-state-label-font-family: "Google Sans Flex", system-ui, sans-serif;
 $lxd-loading-state-label-font-size: 1rem; // Tamaño del texto visible de la espera — el de la descripción de EmptyState (cuerpo de la superficie)
 $lxd-loading-state-sm-label-font-size: 0.875rem; // Tamaño del texto visible en talla sm — el de la descripción de EmptyState sm
 $lxd-loading-state-label-color: #4a4a4a; // Color del texto visible de la espera — el de la descripción de EmptyState (texto atenuado, nunca grey-dark)
+
+// Alias obsoletos: nombres anteriores a la convención D9.
+$lxd-loading-state-min-block-size: $lxd-loading-state-min-height; // OBSOLETO (v51, se retira en la v52): usar $lxd-loading-state-min-height
+$lxd-loading-state-sm-min-block-size: $lxd-loading-state-sm-min-height; // OBSOLETO (v51, se retira en la v52): usar $lxd-loading-state-sm-min-height

package/src/tokens/scss/molecules/_menu.scss

@@ -34,7 +34,8 @@ $lxd-menu-item-destructive-color: #b30000; // Color de texto de ítem destructiv
 $lxd-menu-item-destructive-highlighted-bg: #b30000; // Relleno del ítem destructivo resaltado: el rojo sólido, universal en las dos superficies
 $lxd-menu-item-destructive-highlighted-color: #ffffff; // Texto del ítem destructivo resaltado
 $lxd-menu-label-padding-block: 0.5rem; // Padding vertical del rótulo de sección
-$lxd-menu-label-padding-inline: 1rem; // Padding horizontal del rótulo de sección
+$lxd-menu-label-margin-inline: 0.5rem; // Margen lateral del rótulo de sección: el mismo `margin-inline` que el ítem (`menu.padding-inline`), para que su texto quede alineado con el del ítem por construcción
+$lxd-menu-label-padding-inline: 1rem; // Padding horizontal del rótulo de sección: el mismo que el del ítem (`menu.item-padding-inline`). Con `label-margin-inline`, el texto del rótulo arranca donde arranca el contenido del ítem (su texto o, si lo lleva, su icono)
 $lxd-menu-label-font-size: 0.875rem; // Tamaño de texto del rótulo de sección
 $lxd-menu-label-font-weight: 500; // Peso del rótulo de sección
 $lxd-menu-label-color: #4a4a4a; // Color del rótulo de sección

package/src/tokens/scss/molecules/_modal.scss

@@ -19,8 +19,9 @@ $lxd-modal-title-font-size: 2rem; // Tamaño del título (2rem)
 $lxd-modal-title-font-weight: 500; // Peso del título
 $lxd-modal-title-line-height: 1.1; // Interlineado del título — el de un título grande. Con el cuerpo del título da la altura de su primera línea, que es sobre la que se centra el aspa de cerrar
 $lxd-modal-title-color: #111e30; // Color del título
-$lxd-modal-width-max: 560px; // Anchura máxima del panel. Medida de layout (como container.max-width-*), no de la escala de espaciado ni de tallas de componente
-$lxd-modal-max-height: 90dvh; // Altura máxima del panel modal (dvh para móviles con barra de navegador variable). Medida de layout, igual que width-max
+$lxd-modal-max-width: 560px; // Anchura máxima del panel. Medida de layout (como container.max-width-*), no de la escala de espaciado ni de tallas de componente
+$lxd-modal-width: 90vw; // Ancho del panel antes del tope de `max-width`: deja aire a los lados en pantallas estrechas. Medida de layout, igual que `max-width`
+$lxd-modal-max-height: 90dvh; // Altura máxima del panel modal (dvh para móviles con barra de navegador variable). Medida de layout, igual que `max-width`
 $lxd-modal-transition-duration: 250ms; // Duración de la animación entrada/salida
 $lxd-modal-transition-easing: ease-in-out; // Easing de la animación
 $lxd-modal-content-enter-offset: 0.5rem; // Desplazamiento vertical del panel al entrar/salir (8px)
@@ -33,3 +34,7 @@ $lxd-modal-close-color: #111e30; // Color del glifo: la tinta de la superficie,
 $lxd-modal-close-focus-ring-width: 2px; // Grosor del anillo de foco
 $lxd-modal-close-focus-ring-offset: 2px; // Separación del anillo de foco (el rol focus gobierna ancho y separación)
 $lxd-modal-close-focus-ring-color: #111e30; // Color del anillo de foco: la tinta de la superficie
+
+// Alias obsoletos: nombres anteriores a la convención D9.
+$lxd-modal-width-max: $lxd-modal-max-width; // OBSOLETO (v51, se retira en la v52): usar $lxd-modal-max-width
+$lxd-modal-inline-size: $lxd-modal-width; // OBSOLETO (v51, se retira en la v52): usar $lxd-modal-width

package/src/tokens/scss/molecules/_multi-select-field.scss

@@ -2,11 +2,6 @@
 // Do not edit directly, this file was auto-generated.
 
 $lxd-multi-select-field-gap: 0.5rem; // Espacio entre label, multi-select, helper y error
-$lxd-multi-select-field-error-font-family: "Google Sans Flex", system-ui, sans-serif; // Font family del mensaje de error
-$lxd-multi-select-field-error-font-size: 0.875rem; // Font size del mensaje de error
-$lxd-multi-select-field-error-font-weight: 300; // Font weight del mensaje de error
-$lxd-multi-select-field-error-line-height: 1.5; // Line height del mensaje de error
-$lxd-multi-select-field-error-color: #b30000; // Color del mensaje de error
 $lxd-multi-select-field-helper-font-family: "Google Sans Flex", system-ui, sans-serif; // Font family del texto de ayuda
 $lxd-multi-select-field-helper-font-size: 0.875rem; // Font size del texto de ayuda
 $lxd-multi-select-field-helper-font-weight: 300; // Font weight del texto de ayuda

package/src/tokens/scss/molecules/_notification-panel.scss

@@ -1,11 +1,11 @@
 
 // Do not edit directly, this file was auto-generated.
 
-$lxd-notification-panel-inline-size: min(22.5rem, calc(100vw - 2 * 1.5rem)); // Ancho del panel (360px), con tope para que no se salga en una pantalla estrecha. Medida de maqueta, como la de la Sidebar: no pertenece a la escala de tallas
+$lxd-notification-panel-width: min(22.5rem, calc(100vw - 2 * 1.5rem)); // Ancho del panel (360px), con tope para que no se salga en una pantalla estrecha. Medida de maqueta, como la de la Sidebar: no pertenece a la escala de tallas
 $lxd-notification-panel-offset: 0.25rem; // Separación entre la campana y el panel: el desplazamiento compartido de los flotantes de la cabecera
 $lxd-notification-panel-padding-inline: 1rem; // Aire lateral de las filas, del bloque de marcar todas y del pie: el mismo, para que todo alinee en una sola columna
 $lxd-notification-panel-mark-all-padding-block: 0.75rem; // Aire vertical del bloque de «Marcar todas», entre la lista y el pie
-$lxd-notification-panel-list-max-block-size: 21rem; // Alto máximo de la lista (336px): pasado ese alto la lista hace scroll y la cabecera y el pie se quedan quietos. Medida de maqueta
+$lxd-notification-panel-list-max-height: 21rem; // Alto máximo de la lista (336px): pasado ese alto la lista hace scroll y la cabecera y el pie se quedan quietos. Medida de maqueta
 $lxd-notification-panel-list-padding-block: 0.5rem; // Aire vertical de la lista dentro del panel
 $lxd-notification-panel-list-gap: 0.25rem; // Separación entre notificaciones. Las filas no llevan línea: se separan con aire
 $lxd-notification-panel-item-padding-block: 0.5rem; // Aire vertical de cada notificación
@@ -29,3 +29,7 @@ $lxd-notification-panel-footer-gap: 0.5rem; // Aire entre los enlaces del pie
 $lxd-notification-panel-footer-font-size: 0.875rem; // Tamaño de los enlaces del pie: letra menor
 $lxd-notification-panel-focus-ring-width: 2px; // Grosor del anillo de foco de una fila
 $lxd-notification-panel-focus-ring-color: #111e30; // Color del anillo de foco de una fila
+
+// Alias obsoletos: nombres anteriores a la convención D9.
+$lxd-notification-panel-inline-size: $lxd-notification-panel-width; // OBSOLETO (v51, se retira en la v52): usar $lxd-notification-panel-width
+$lxd-notification-panel-list-max-block-size: $lxd-notification-panel-list-max-height; // OBSOLETO (v51, se retira en la v52): usar $lxd-notification-panel-list-max-height

package/src/tokens/scss/molecules/_number-input-field.scss

@@ -2,11 +2,6 @@
 // Do not edit directly, this file was auto-generated.
 
 $lxd-number-input-field-gap: 0.5rem; // Espacio entre label, input, helper y error
-$lxd-number-input-field-error-font-family: "Google Sans Flex", system-ui, sans-serif; // Font family del mensaje de error
-$lxd-number-input-field-error-font-size: 0.875rem; // Font size del mensaje de error
-$lxd-number-input-field-error-font-weight: 300; // Font weight del mensaje de error
-$lxd-number-input-field-error-line-height: 1.5; // Line height del mensaje de error
-$lxd-number-input-field-error-color: #b30000; // Color del mensaje de error
 $lxd-number-input-field-helper-font-family: "Google Sans Flex", system-ui, sans-serif; // Font family del texto de ayuda
 $lxd-number-input-field-helper-font-size: 0.875rem; // Font size del texto de ayuda
 $lxd-number-input-field-helper-font-weight: 300; // Font weight del texto de ayuda

package/src/tokens/scss/molecules/_org-chart.scss

@@ -3,7 +3,7 @@
 
 $lxd-org-chart-font-family: "Google Sans Flex", system-ui, sans-serif; // Familia tipográfica del organigrama
 $lxd-org-chart-gap: 0.75rem; // Separación entre el lienzo y sus controles
-$lxd-org-chart-viewport-block-size: 32rem; // Alto del lienzo con desplazamiento
+$lxd-org-chart-viewport-height: 32rem; // Alto del lienzo con desplazamiento
 $lxd-org-chart-viewport-padding: 1.5rem; // Aire alrededor del árbol dentro del lienzo
 $lxd-org-chart-viewport-bg: #f2f2f2; // Fondo del lienzo — superficie secundaria: lo que separa el organigrama de la página
 $lxd-org-chart-viewport-radius: 0px; // Radio del lienzo
@@ -16,7 +16,7 @@ $lxd-org-chart-sibling-gap: 1rem; // Separación horizontal entre dos nodos herm
 $lxd-org-chart-connector-length: 2rem; // Alto del tramo de líneas entre un nodo y sus hijos
 $lxd-org-chart-connector-color: #d0d0d0; // Color de las líneas que unen los nodos
 $lxd-org-chart-connector-width: 1px; // Grosor de las líneas que unen los nodos
-$lxd-org-chart-card-inline-size: 14rem; // Ancho de la tarjeta de un departamento
+$lxd-org-chart-card-width: 14rem; // Ancho de la tarjeta de un departamento
 $lxd-org-chart-card-bg: #ffffff; // Fondo de la tarjeta
 $lxd-org-chart-card-border-color: #111e30; // Borde de la tarjeta
 $lxd-org-chart-card-border-width: 1px; // Grosor del borde de la tarjeta
@@ -37,3 +37,7 @@ $lxd-org-chart-person-role-font-size: 0.75rem; // Tamaño del puesto de una pers
 $lxd-org-chart-person-role-color: #4a4a4a; // Color del puesto de una persona
 $lxd-org-chart-person-gap: 0.25rem; // Separación entre personas
 $lxd-org-chart-empty-color: #4a4a4a; // Color del «sin responsable» / «sin equipo»
+
+// Alias obsoletos: nombres anteriores a la convención D9.
+$lxd-org-chart-viewport-block-size: $lxd-org-chart-viewport-height; // OBSOLETO (v51, se retira en la v52): usar $lxd-org-chart-viewport-height
+$lxd-org-chart-card-inline-size: $lxd-org-chart-card-width; // OBSOLETO (v51, se retira en la v52): usar $lxd-org-chart-card-width

package/src/tokens/scss/molecules/_otp-field.scss

@@ -2,11 +2,6 @@
 // Do not edit directly, this file was auto-generated.
 
 $lxd-otp-field-gap: 0.5rem; // Espacio entre label, celdas, helper y error
-$lxd-otp-field-error-font-family: "Google Sans Flex", system-ui, sans-serif; // Font family del mensaje de error
-$lxd-otp-field-error-font-size: 0.875rem; // Font size del mensaje de error
-$lxd-otp-field-error-font-weight: 300; // Font weight del mensaje de error
-$lxd-otp-field-error-line-height: 1.5; // Line height del mensaje de error
-$lxd-otp-field-error-color: #b30000; // Color del mensaje de error
 $lxd-otp-field-helper-font-family: "Google Sans Flex", system-ui, sans-serif; // Font family del texto de ayuda
 $lxd-otp-field-helper-font-size: 0.875rem; // Font size del texto de ayuda
 $lxd-otp-field-helper-font-weight: 300; // Font weight del texto de ayuda

package/src/tokens/scss/molecules/_pagination.scss

@@ -12,6 +12,7 @@ $lxd-pagination-padding-inline: 0; // Sin padding lateral
 $lxd-pagination-summary-color: #111e30; // Color del texto de total de resultados
 $lxd-pagination-btn-height: 2.5rem; // Altura del botón de página — la del `Button md` (40px). También su lado mínimo: la caja es cuadrada
 $lxd-pagination-btn-font-size: 1rem; // Tipografía del botón de página — la del `Button md`
+$lxd-pagination-btn-line-height: 1; // Interlineado del botón de página — el del `Button`. Sin él, heredaba el 1,15 de normalize.css
 $lxd-pagination-btn-padding-inline: 0.5rem; // Padding horizontal del botón: el inset interior del control, no el del rótulo de un `Button` (aquí el rótulo es una cifra y la caja ya es cuadrada por `btn-height`); solo entra en juego cuando el número tiene tres o más dígitos
 $lxd-pagination-btn-radius: 0px; // Radio de borde del botón — el del `Button`
 $lxd-pagination-btn-border-width: 1px; // Grosor del borde del botón (1px) — el del `Button`

package/src/tokens/scss/molecules/_password-field.scss

@@ -7,7 +7,7 @@ $lxd-password-field-toggle-icon-size: 1.25rem; // Tamaño del icono del toggle
 $lxd-password-field-sm-toggle-icon-size: 16px; // Tamaño del icono del toggle — sm (16px)
 $lxd-password-field-lg-toggle-icon-size: 24px; // Tamaño del icono del toggle — lg (24px)
 $lxd-password-field-toggle-color: #111e30; // Color del icono toggle: tinta, prusia sobre claro
-$lxd-password-field-toggle-color-hover: #111e30; // Color del icono toggle en hover (sin cambio: la tinta no se atenúa; el foco se marca con el anillo)
+$lxd-password-field-toggle-hover-color: #111e30; // Color del icono toggle en hover (sin cambio: la tinta no se atenúa; el foco se marca con el anillo)
 $lxd-password-field-toggle-focus-ring-width: 2px; // Grosor del anillo de foco del toggle
 $lxd-password-field-toggle-focus-ring-offset: 2px; // Separación del anillo de foco del toggle (se dibuja hacia dentro de la caja: el toggle va a ras del borde del campo)
 $lxd-password-field-toggle-focus-ring-color: #111e30; // Color del anillo de foco del toggle: la tinta de la superficie
@@ -15,3 +15,6 @@ $lxd-password-field-sm-toggle-size: 2rem; // Lado del toggle — sm
 $lxd-password-field-lg-toggle-size: 3rem; // Lado del toggle — lg
 $lxd-password-field-action-margin-block-start: 0.5rem; // Aire extra sobre la acción bajo el campo («¿Olvidaste tu contraseña?»), además del gap del campo
 $lxd-password-field-input-padding-inline-end: 2.5rem; // Padding derecho del input — el texto termina donde empieza el toggle
+
+// Alias obsoletos: nombres anteriores a la convención D9.
+$lxd-password-field-toggle-color-hover: $lxd-password-field-toggle-hover-color; // OBSOLETO (v51, se retira en la v52): usar $lxd-password-field-toggle-hover-color

package/src/tokens/scss/molecules/_planning-grid.scss

@@ -32,5 +32,6 @@ $lxd-planning-grid-cell-input-width: 4.5rem; // Ancho del campo de horas dentro
 $lxd-planning-grid-footer-bg: #f2f2f2; // Fondo de las filas de totales
 $lxd-planning-grid-footer-font-weight: 500; // Peso de las filas de totales
 $lxd-planning-grid-footer-color: #111e30; // Color de las filas de totales
-$lxd-planning-grid-over-color: #b30000; // Color de un resto negativo: hay más horas asignadas que disponibles
-$lxd-planning-grid-pending-opacity: 0.4; // Opacidad de una celda cuyo cambio está en vuelo
+$lxd-planning-grid-over-bg: #b30000; // Relleno de un resto negativo: hay más horas asignadas que disponibles. Relleno universal, igual en las dos superficies (sin par oscuro)
+$lxd-planning-grid-over-color: #ffffff; // Tinta de un resto negativo, sobre su relleno de error
+$lxd-planning-grid-saving-gap: 0.25rem; // Aire entre el campo de un cruce en vuelo y su marca de guardado (el Spinner sm)

package/src/tokens/scss/molecules/_radio-field.scss

@@ -18,11 +18,6 @@ $lxd-radio-field-label-font-weight: 300; // Peso tipográfico
 $lxd-radio-field-label-line-height: 1.5; // Interlineado
 $lxd-radio-field-label-color: #111e30; // Color del texto
 $lxd-radio-field-label-letter-spacing: 0em; // Interletraje
-$lxd-radio-field-error-font-family: "Google Sans Flex", system-ui, sans-serif; // Font family del mensaje de error
-$lxd-radio-field-error-font-size: 0.875rem; // Font size del mensaje de error
-$lxd-radio-field-error-font-weight: 300; // Font weight del mensaje de error
-$lxd-radio-field-error-line-height: 1.5; // Line height del mensaje de error
-$lxd-radio-field-error-color: #b30000; // Color del mensaje de error
 $lxd-radio-field-helper-font-family: "Google Sans Flex", system-ui, sans-serif; // Font family del texto de ayuda
 $lxd-radio-field-helper-font-size: 0.875rem; // Font size del texto de ayuda
 $lxd-radio-field-helper-font-weight: 300; // Font weight del texto de ayuda

package/src/tokens/scss/molecules/_recurrence-field.scss

@@ -4,8 +4,14 @@
 $lxd-recurrence-field-gap: 1rem; // Separación entre los campos del editor de recurrencia
 $lxd-recurrence-field-row-gap: 0.75rem; // Separación entre los campos que comparten fila
 $lxd-recurrence-field-interval-width: 8rem; // Ancho del campo de intervalo — cabe un número de dos cifras y sus flechas, no la fila entera
+$lxd-recurrence-field-end-flex-basis: 12rem; // Base flexible del bloque de fin de la repetición: por debajo de ella pasa a otra línea
 $lxd-recurrence-field-weekdays-gap: 0.25rem; // Separación entre los días de la semana
 $lxd-recurrence-field-legend-font-size: 0.875rem; // Tamaño de la etiqueta del grupo de días — el de una etiqueta de campo
 $lxd-recurrence-field-legend-color: #111e30; // Color de la etiqueta del grupo de días
 $lxd-recurrence-field-legend-font-weight: 500; // Peso de la etiqueta del grupo de días — el de una etiqueta de campo
 $lxd-recurrence-field-legend-margin-block-end: 0.25rem; // Aire entre la etiqueta del grupo de días y los días
+$lxd-recurrence-field-helper-font-family: "Google Sans Flex", system-ui, sans-serif; // Font family del texto de ayuda del editor
+$lxd-recurrence-field-helper-font-size: 0.875rem; // Font size del texto de ayuda del editor
+$lxd-recurrence-field-helper-font-weight: 300; // Font weight del texto de ayuda del editor
+$lxd-recurrence-field-helper-line-height: 1.5; // Line height del texto de ayuda del editor
+$lxd-recurrence-field-helper-color: #111e30; // Color del texto de ayuda del editor

package/src/tokens/scss/molecules/_search-form.scss

@@ -1,7 +1,7 @@
 
 // Do not edit directly, this file was auto-generated.
 
-$lxd-search-form-inline-size: 100%; // Anchura del formulario: la del campo, que siempre ocupa su contenedor. El buscador vive dentro del panel del menú y se estira con él
+$lxd-search-form-width: 100%; // Anchura del formulario: la del campo, que siempre ocupa su contenedor. El buscador vive dentro del panel del menú y se estira con él
 $lxd-search-form-xl-height: 4rem; // Altura del campo — xl (64px, el peldaño de espaciado que sigue a los 48 de lg). No es una talla de control del sistema: solo existe aquí, para el buscador del menú del sitio
 $lxd-search-form-xl-padding-inline: 2rem; // Aire horizontal del campo — xl: el peldaño de espaciado siguiente al de lg
 $lxd-search-form-xl-font-size: 1.75rem; // Cuerpo de letra del campo — xl (28px): la escala de títulos pequeños, no la del cuerpo de texto. A esta talla el buscador se lee como un titular
@@ -19,3 +19,6 @@ $lxd-search-form-submit-disabled-color: #4a4a4a; // Color de la flecha con el ca
 $lxd-search-form-submit-focus-ring-width: 2px; // Grosor del anillo de foco de la flecha: el del sistema. Es lo único que marca el foco, porque el adorno no tiene fondo
 $lxd-search-form-submit-focus-ring-color: #111e30; // Color del anillo de foco de la flecha: el del borde del campo en foco
 $lxd-search-form-submit-input-padding-inline-end: 2.5rem; // Padding derecho del campo — el texto termina donde empieza la flecha, que va dentro del borde
+
+// Alias obsoletos: nombres anteriores a la convención D9.
+$lxd-search-form-inline-size: $lxd-search-form-width; // OBSOLETO (v51, se retira en la v52): usar $lxd-search-form-width

package/src/tokens/scss/molecules/_select-field.scss

@@ -2,11 +2,6 @@
 // Do not edit directly, this file was auto-generated.
 
 $lxd-select-field-gap: 0.5rem; // Espacio entre label, select, helper y error
-$lxd-select-field-error-font-family: "Google Sans Flex", system-ui, sans-serif; // Font family del mensaje de error
-$lxd-select-field-error-font-size: 0.875rem; // Font size del mensaje de error
-$lxd-select-field-error-font-weight: 300; // Font weight del mensaje de error
-$lxd-select-field-error-line-height: 1.5; // Line height del mensaje de error
-$lxd-select-field-error-color: #b30000; // Color del mensaje de error
 $lxd-select-field-helper-font-family: "Google Sans Flex", system-ui, sans-serif; // Font family del texto de ayuda
 $lxd-select-field-helper-font-size: 0.875rem; // Font size del texto de ayuda
 $lxd-select-field-helper-font-weight: 300; // Font weight del texto de ayuda

package/src/tokens/scss/molecules/_sheet.scss

@@ -7,8 +7,8 @@ $lxd-sheet-z-index: 300; // Capa z del panel
 $lxd-sheet-padding-block: 2rem; // Padding vertical del panel
 $lxd-sheet-padding-inline: 2rem; // Padding horizontal del panel
 $lxd-sheet-gap: 1rem; // Separación entre bloques del panel
-$lxd-sheet-inline-size: min(20rem, 85vw); // Ancho cuando entra por un lateral
-$lxd-sheet-block-size: 85vh; // Alto máximo cuando entra por arriba o abajo
+$lxd-sheet-width: min(20rem, 85vw); // Ancho cuando entra por un lateral
+$lxd-sheet-height: 85vh; // Alto máximo cuando entra por arriba o abajo
 $lxd-sheet-backdrop-bg: #000000; // Color del velo
 $lxd-sheet-backdrop-opacity: 0.6; // Opacidad del velo
 $lxd-sheet-backdrop-z-index: 200; // Capa z del velo
@@ -28,3 +28,7 @@ $lxd-sheet-close-focus-ring-offset: 2px; // Separación del anillo de foco
 $lxd-sheet-close-focus-ring-color: #111e30; // Color del anillo de foco
 $lxd-sheet-transition-duration: 250ms; // Duración de la animación de entrada/salida
 $lxd-sheet-transition-easing: ease-in-out; // Easing de la animación
+
+// Alias obsoletos: nombres anteriores a la convención D9.
+$lxd-sheet-inline-size: $lxd-sheet-width; // OBSOLETO (v51, se retira en la v52): usar $lxd-sheet-width
+$lxd-sheet-block-size: $lxd-sheet-height; // OBSOLETO (v51, se retira en la v52): usar $lxd-sheet-height

package/src/tokens/scss/molecules/_sidebar-nav.scss

@@ -16,13 +16,11 @@ $lxd-sidebar-nav-item-font-size: 1rem; // Tamaño de texto de ítems
 $lxd-sidebar-nav-item-font-weight: 300; // Peso de ítems
 $lxd-sidebar-nav-item-line-height: 1.3; // Interlineado de ítems
 $lxd-sidebar-nav-item-color: #111e30; // Color de ítems
-$lxd-sidebar-nav-item-active-color: #111e30; // Color de ítem activo
 $lxd-sidebar-nav-item-active-font-weight: 500; // Peso de ítem activo
 $lxd-sidebar-nav-focus-ring-color: #111e30; // Color del focus ring
 $lxd-sidebar-nav-focus-ring-width: 2px; // Grosor del anillo de foco
 $lxd-sidebar-nav-item-gap: 0.25rem; // Gap entre ítems dentro de un grupo
 $lxd-sidebar-nav-rail-item-size: 2.5rem; // En rail cada entrada es un cuadrado a talla md, como un botón de icono
-$lxd-sidebar-nav-rail-active-bar-width: 2px; // Barra al borde que marca la sección activa en rail
 $lxd-sidebar-nav-item-icon-size: 2rem; // Icono de ítem: talla sm del sistema
 $lxd-sidebar-nav-item-icon-gap: 0.5rem; // Gap entre icono y texto del ítem
 $lxd-sidebar-nav-transition-duration: 150ms; // Duración de transición de ítems
@@ -33,5 +31,3 @@ $lxd-sidebar-nav-item-empty-color: #4a4a4a; // Tinta de una entrada vacía: sigu
 $lxd-sidebar-nav-item-empty-cursor: not-allowed; // Cursor de una entrada vacía
 $lxd-sidebar-nav-item-empty-mark-font-size: 0.875rem; // Tamaño de la marca «sin docs»
 $lxd-sidebar-nav-item-empty-mark-color: #4a4a4a; // Tinta de la marca «sin docs»
-$lxd-sidebar-nav-item-hover-line-width: 1px; // Grosor de la línea que marca el ítem bajo el puntero. El hover no pinta relleno (regla de Colores): deja una línea de tinta bajo el ítem, el mismo grafismo del subrayado de `Link`
-$lxd-sidebar-nav-item-hover-line-color: #111e30; // Color de la línea de hover — tinta de la superficie

package/src/tokens/scss/molecules/_site-nav.scss

@@ -11,7 +11,8 @@ $lxd-site-nav-item-line-height: 1.3; // Enlaces
 $lxd-site-nav-item-color: #111e30; // Enlaces
 $lxd-site-nav-item-hover-color: #111e30; // Enlaces en hover: en claro no cambia el color, aparece la línea
 $lxd-site-nav-item-underline-offset: 2px; // Separación entre el texto y la línea de hover (2px, más pegada que en los enlaces de texto). Se reserva siempre: la línea no desplaza nada al aparecer
-$lxd-site-nav-item-hover-line-width: 1px; // Enlaces en hover: la línea bajo el enlace (como los enlaces de texto), en claro
+$lxd-site-nav-item-hover-line-width: 1px; // Enlaces en hover: grosor del subrayado (`text-decoration-thickness`), el de los enlaces de texto
+$lxd-site-nav-item-hover-decoration-line: underline; // Enlaces en hover: subrayados en claro (`text-decoration-line`), como los enlaces de texto en reposo
 $lxd-site-nav-item-disabled-color: #4a4a4a; // Ítem apagado («próximamente»): la tinta de un control deshabilitado sobre superficie clara. No baja de 3:1 sobre el lienzo —el mínimo de WCAG 1.4.11 para un componente inactivo—, que es el suelo de esta tinta
 $lxd-site-nav-item-badge-gap: 0.5rem; // Aire entre el rótulo del ítem y su distintivo
 $lxd-site-nav-item-column-gap: 2rem; // Pasillo entre las dos columnas de un grupo ancho (`columns: 2`). Es el mismo que separa dos grupos: las columnas de dentro tienen que leerse con el mismo aire que las de fuera, o el grupo ancho parecería dos grupos pegados

package/src/tokens/scss/molecules/_site-search.scss

@@ -1,14 +1,12 @@
 
 // Do not edit directly, this file was auto-generated.
 
-$lxd-site-search-inline-size: 100%; // Anchura del buscador: la de su contenedor. Es la página de resultados entera, así que ocupa todo el hueco donde se monte — declarada y no heredada del flujo, para que tampoco se encoja dentro de una fila flex o una celda de retícula
+$lxd-site-search-width: 100%; // Anchura del buscador: la de su contenedor. Es la página de resultados entera, así que ocupa todo el hueco donde se monte — declarada y no heredada del flujo, para que tampoco se encoja dentro de una fila flex o una celda de retícula
 $lxd-site-search-gap: 1.5rem; // Aire entre los bloques del buscador: el formulario, el aviso de estado, los resultados y el pie
-$lxd-site-search-block-gap: 0.75rem; // Aire entre las líneas de un bloque de estado (reposo, escribiendo, carga)
 $lxd-site-search-status-font-size: 0.875rem; // Cuerpo del aviso de estado: cuántos resultados hay, que se está buscando o que no hay nada
 $lxd-site-search-status-line-height: 1.5; // Interlineado del aviso de estado
 $lxd-site-search-status-color: #4a4a4a; // Color del aviso de estado — atenuado: acompaña a los resultados, no compite con ellos
 $lxd-site-search-status-gap: 0.5rem; // Aire entre el indicador de carga y su texto
-$lxd-site-search-status-query-font-weight: 500; // Peso de la consulta dentro del aviso: lo único que cambia de una búsqueda a otra
 $lxd-site-search-results-gap: 2rem; // Aire entre dos resultados (32px). Sin filete que los separe, es el aire el que dice dónde acaba uno y empieza el siguiente: tiene que ser claramente mayor que el que hay entre las líneas de un mismo resultado
 $lxd-site-search-result-gap: 0.5rem; // Aire entre las cuatro líneas de un resultado: sección, título, extracto y dirección
 $lxd-site-search-result-title-font-size: 1.25rem; // Cuerpo del título del resultado: un peldaño por encima del cuerpo de la superficie, para que siga mandando ahora que el extracto y la dirección leen al cuerpo entero
@@ -35,7 +33,13 @@ $lxd-site-search-result-mark-color: #111e30; // Tinta del resaltado sobre el ama
 $lxd-site-search-suggestions-gap: 0.5rem; // Aire entre las sugerencias de búsqueda
 $lxd-site-search-suggestions-label-font-size: 0.75rem; // Cuerpo del rótulo de las sugerencias
 $lxd-site-search-suggestions-label-color: #4a4a4a; // Color del rótulo de las sugerencias — atenuado
-$lxd-site-search-ghost-section-inline-size: 30%; // Ancho de la barra fantasma del rastro de sección
-$lxd-site-search-ghost-title-inline-size: 70%; // Ancho de la barra fantasma del título
-$lxd-site-search-ghost-url-inline-size: 45%; // Ancho de la barra fantasma de la dirección
+$lxd-site-search-ghost-section-width: 30%; // Ancho de la barra fantasma del rastro de sección
+$lxd-site-search-ghost-title-width: 70%; // Ancho de la barra fantasma del título
+$lxd-site-search-ghost-url-width: 45%; // Ancho de la barra fantasma de la dirección
 $lxd-site-search-skeleton-gap: 0.5rem; // Aire entre las barras de un resultado fantasma
+
+// Alias obsoletos: nombres anteriores a la convención D9.
+$lxd-site-search-inline-size: $lxd-site-search-width; // OBSOLETO (v51, se retira en la v52): usar $lxd-site-search-width
+$lxd-site-search-ghost-section-inline-size: $lxd-site-search-ghost-section-width; // OBSOLETO (v51, se retira en la v52): usar $lxd-site-search-ghost-section-width
+$lxd-site-search-ghost-title-inline-size: $lxd-site-search-ghost-title-width; // OBSOLETO (v51, se retira en la v52): usar $lxd-site-search-ghost-title-width
+$lxd-site-search-ghost-url-inline-size: $lxd-site-search-ghost-url-width; // OBSOLETO (v51, se retira en la v52): usar $lxd-site-search-ghost-url-width

package/src/tokens/scss/molecules/_switcher-field.scss

@@ -18,7 +18,6 @@ $lxd-switcher-field-label-font-weight: 300; // Peso tipográfico
 $lxd-switcher-field-label-line-height: 1.5; // Interlineado
 $lxd-switcher-field-label-color: #111e30; // Color del texto
 $lxd-switcher-field-label-letter-spacing: 0em; // Interletraje
-$lxd-switcher-field-error-font-family: "Google Sans Flex", system-ui, sans-serif; // Font family del mensaje de error
 $lxd-switcher-field-error-font-size: 0.875rem; // Font size del mensaje de error
 $lxd-switcher-field-error-font-weight: 300; // Font weight del mensaje de error
 $lxd-switcher-field-error-line-height: 1.5; // Line height del mensaje de error

package/src/tokens/scss/molecules/_table-of-contents.scss

@@ -22,6 +22,9 @@ $lxd-table-of-contents-focus-ring-width: 2px; // Grosor del anillo de foco de un
 $lxd-table-of-contents-focus-ring-offset: 1px; // Separación del anillo de foco
 $lxd-table-of-contents-focus-ring-color: #111e30; // Color del anillo de foco
 $lxd-table-of-contents-sticky-offset: 1.5rem; // Distancia al borde superior cuando el índice queda fijo (`sticky`). El consumidor la sube si tiene una cabecera fija más alta
-$lxd-table-of-contents-sticky-max-block-size: calc(100vh - (2 * 1.5rem)); // Alto máximo del índice fijo: el alto de la ventana menos su aire arriba y abajo. Un índice largo scrollea dentro
+$lxd-table-of-contents-sticky-max-height: calc(100vh - (2 * 1.5rem)); // Alto máximo del índice fijo: el alto de la ventana menos su aire arriba y abajo. Un índice largo scrollea dentro
 $lxd-table-of-contents-transition-duration: 150ms; // Duración de la transición de hover
 $lxd-table-of-contents-transition-easing: ease; // Easing de la transición de hover
+
+// Alias obsoletos: nombres anteriores a la convención D9.
+$lxd-table-of-contents-sticky-max-block-size: $lxd-table-of-contents-sticky-max-height; // OBSOLETO (v51, se retira en la v52): usar $lxd-table-of-contents-sticky-max-height

package/src/tokens/scss/molecules/_table.scss

@@ -12,6 +12,7 @@ $lxd-table-header-padding-block: 0.75rem; // Padding block del encabezado
 $lxd-table-header-padding-inline: 0.75rem; // Padding inline del encabezado
 $lxd-table-header-font-weight: 500; // Peso tipográfico del encabezado
 $lxd-table-header-border-width: 1px; // Borde inferior del thead — 1px, como todo borde del sistema; la cabecera se lee por peso, no por grosor
+$lxd-table-actions-width: 1px; // Ancho de la cabecera de la columna de acciones. No fija un ancho: con `table-layout: auto` el sobrante se reparte entre las demás columnas y esta se encoge a su contenido
 $lxd-table-header-content-gap: 0.5rem; // Separación entre el rótulo de la columna y el icono de ordenación
 $lxd-table-header-border-color: #111e30; // Color del borde inferior del thead
 $lxd-table-sort-icon-color: #4a4a4a; // Icono de ordenación en reposo, tinta plana; el hover lo lleva al color activo
@@ -38,3 +39,6 @@ $lxd-table-sm-header-padding-block: 0.5rem; // Padding block del encabezado —
 $lxd-table-sm-header-padding-inline: 0.5rem; // Padding inline del encabezado — variante sm
 $lxd-table-sm-cell-padding-block: 0.5rem; // Padding block de celda — variante sm
 $lxd-table-sm-cell-padding-inline: 0.5rem; // Padding inline de celda — variante sm
+
+// Alias obsoletos: nombres anteriores a la convención D9.
+$lxd-table-actions-inline-size: $lxd-table-actions-width; // OBSOLETO (v51, se retira en la v52): usar $lxd-table-actions-width

package/src/tokens/scss/molecules/_textarea-field.scss

@@ -2,11 +2,6 @@
 // Do not edit directly, this file was auto-generated.
 
 $lxd-textarea-field-gap: 0.5rem; // Espacio entre label, textarea, helper y error
-$lxd-textarea-field-error-font-family: "Google Sans Flex", system-ui, sans-serif; // Font family del mensaje de error
-$lxd-textarea-field-error-font-size: 0.875rem; // Font size del mensaje de error
-$lxd-textarea-field-error-font-weight: 300; // Font weight del mensaje de error
-$lxd-textarea-field-error-line-height: 1.5; // Line height del mensaje de error
-$lxd-textarea-field-error-color: #b30000; // Color del mensaje de error
 $lxd-textarea-field-helper-font-family: "Google Sans Flex", system-ui, sans-serif; // Font family del texto de ayuda
 $lxd-textarea-field-helper-font-size: 0.875rem; // Font size del texto de ayuda
 $lxd-textarea-field-helper-font-weight: 300; // Font weight del texto de ayuda

package/src/tokens/scss/molecules/_time-field.scss

@@ -2,11 +2,6 @@
 // Do not edit directly, this file was auto-generated.
 
 $lxd-time-field-gap: 0.5rem; // Espacio entre label, control, helper y error
-$lxd-time-field-error-font-family: "Google Sans Flex", system-ui, sans-serif; // Font family del mensaje de error
-$lxd-time-field-error-font-size: 0.875rem; // Font size del mensaje de error
-$lxd-time-field-error-font-weight: 300; // Font weight del mensaje de error
-$lxd-time-field-error-line-height: 1.5; // Line height del mensaje de error
-$lxd-time-field-error-color: #b30000; // Color del mensaje de error
 $lxd-time-field-helper-font-family: "Google Sans Flex", system-ui, sans-serif; // Font family del texto de ayuda
 $lxd-time-field-helper-font-size: 0.875rem; // Font size del texto de ayuda
 $lxd-time-field-helper-font-weight: 300; // Font weight del texto de ayuda

package/src/tokens/scss/molecules/_toast.scss

@@ -5,6 +5,7 @@ $lxd-toast-z-index: 500; // Capa de la pila — `toast` (500): por encima de mod
 $lxd-toast-max-width: 360px; // Ancho máximo de la pila. En pantallas estrechas cede al ancho de la ventana menos el aire lateral
 $lxd-toast-inset-block: 1.5rem; // Distancia de la pila al borde superior o inferior de la ventana (24px)
 $lxd-toast-inset-inline: 1.5rem; // Distancia de la pila al borde izquierdo o derecho de la ventana (24px)
+$lxd-toast-title-letter-spacing: -0.02em; // Tracking del título del aviso (−0,02em): hereda el del `Alert` (`alert.title-letter-spacing`, el de un `<h2>`), así que los dos avisos pintan el título igual. El token lo fija en la tarjeta para que no dependa de la herencia de `base.css` ni del nivel de encabezado del `Toast.Title`
 $lxd-toast-gap: 0.5rem; // Aire entre avisos cuando la pila está desplegada (8px). El `Toaster` lo puede sobreescribir con su prop `gap`
 $lxd-toast-stack-offset: 0.75rem; // Cuánto asoma cada aviso por detrás del de delante con la pila recogida (12px)
 $lxd-toast-stack-scale: 0.05; // Cuánto encoge cada aviso por peldaño de profundidad con la pila recogida (5%)

package/src/tokens/surface-dark-derived.css

@@ -72,7 +72,6 @@ html.dark {
   --popover-border-color: var(--floating-panel-border-color);
   --user-menu-content-bg: var(--floating-panel-bg);
   --user-menu-content-border-color: var(--floating-panel-border-color);
-  --autocomplete-field-error-color: var(--async-select-field-error-color);
   --autocomplete-field-helper-color: var(--async-select-field-helper-color);
   --calendar-year-color: var(--calendar-day-color);
   --calendar-year-current-color: var(--calendar-today-color);
@@ -88,6 +87,8 @@ html.dark {
   --color-picker-trigger-disabled-bg: var(--input-disabled-bg);
   --color-picker-trigger-disabled-border-color: var(--input-disabled-border-color);
   --command-palette-input-border-color: var(--floating-panel-border-color);
+  --floating-toolbar-bg: var(--floating-panel-bg);
+  --floating-toolbar-border-color: var(--floating-panel-border-color);
   --prose-color: var(--text-color);
   --prose-quote-border-color: var(--separator-color);
   --prose-code-bg: var(--code-bg);
@@ -98,6 +99,7 @@ html.dark {
   --prose-table-border-color: var(--table-row-border-color);
   --prose-table-header-border-color: var(--table-header-border-color);
   --prose-rule-color: var(--separator-color);
+  --recurrence-field-helper-color: var(--form-helper-color);
   --sheet-bg: var(--modal-bg);
   --sheet-title-color: var(--modal-title-color);
   --sheet-description-color: var(--modal-description-color);