@studiolxd/brand 38.12.4

package/src/tokens/scss/molecules/_calendar.scss

@@ -0,0 +1,67 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-calendar-gap: 0.5rem; // Gap entre cabecera y cuadrícula
+$lxd-calendar-grid-gap: 0.25rem; // Gap entre celdas del grid
+$lxd-calendar-padding-block: 0.75rem; // Padding vertical del componente
+$lxd-calendar-padding-inline: 0.75rem; // Padding horizontal del componente
+$lxd-calendar-font-family: "Google Sans Flex", system-ui, sans-serif; // Familia tipográfica base
+$lxd-calendar-nav-color: #111e30; // Color de los botones prev/next
+$lxd-calendar-nav-disabled-color: #6b6b6b; // Color deshabilitado de los botones de navegación
+$lxd-calendar-nav-disabled-cursor: not-allowed; // Cursor deshabilitado
+$lxd-calendar-nav-focus-ring-color: #111e30; // Color del focus ring de los botones de navegación
+$lxd-calendar-nav-focus-ring-width: 2px; // Grosor del focus ring
+$lxd-calendar-nav-focus-ring-offset: 1px; // Separación del focus ring
+$lxd-calendar-title-font-size: 1rem; // Tamaño del título del mes — md
+$lxd-calendar-title-font-weight: 500; // Peso del título del mes
+$lxd-calendar-title-color: #111e30; // Color del título del mes
+$lxd-calendar-weekday-font-size: 0.875rem; // Tamaño de las cabeceras de día de semana
+$lxd-calendar-weekday-color: #4a4a4a; // Color de las cabeceras de día de semana
+$lxd-calendar-day-size: 2rem; // Tamaño (ancho y alto) de los botones de día — md
+$lxd-calendar-day-font-size: 0.875rem; // Tamaño de fuente de los días
+$lxd-calendar-day-font-weight: 300; // Peso de fuente de los días
+$lxd-calendar-day-radius: 0px; // Radio de borde de los botones de día
+$lxd-calendar-day-color: #111e30; // Color de texto de los días
+$lxd-calendar-day-bg: rgba(0, 0, 0, 0); // Fondo base de los días
+$lxd-calendar-day-focus-ring-color: #111e30; // Color del focus ring de los días
+$lxd-calendar-day-focus-ring-width: 2px; // Grosor del focus ring de los días
+$lxd-calendar-day-focus-ring-offset: 1px; // Separación del focus ring de los días
+$lxd-calendar-today-color: #111e30; // Color de texto del día de hoy
+$lxd-calendar-today-font-weight: 500; // Peso de fuente del día de hoy
+$lxd-calendar-today-marker-color: #111e30; // Color del marcador del día de hoy
+$lxd-calendar-today-marker-size: 0.25rem; // Lado del marcador del día de hoy
+$lxd-calendar-today-marker-offset: 0.25rem; // Separación del marcador respecto al borde inferior de la celda
+$lxd-calendar-today-marker-radius: 0px; // Radio del marcador del día de hoy — recto, como toda esquina del sistema
+$lxd-calendar-selected-bg: #111e30; // Fondo del día seleccionado
+$lxd-calendar-selected-color: #ffffff; // Texto del día seleccionado
+$lxd-calendar-outside-color: #4a4a4a; // Color de los días fuera del mes actual — se leen, así que son texto secundario, no gris de icono
+$lxd-calendar-disabled-color: #6b6b6b; // Color de los días deshabilitados
+$lxd-calendar-disabled-cursor: not-allowed; // Cursor de los días deshabilitados
+$lxd-calendar-transition-duration: 150ms; // Duración de las transiciones
+$lxd-calendar-transition-easing: ease; // Easing de las transiciones
+$lxd-calendar-sm-day-size: 1.5rem; // Tamaño de los botones de día — sm
+$lxd-calendar-sm-title-font-size: 0.875rem; // Tamaño del título — sm
+$lxd-calendar-lg-day-size: 3rem; // Tamaño de los botones de día — lg
+$lxd-calendar-lg-title-font-size: 1rem; // Tamaño del título — lg
+$lxd-calendar-lg-day-font-size: 1rem; // Tamaño de fuente de los días — lg
+$lxd-calendar-title-button-cursor: pointer; // Cursor del título: lleva a la rejilla de años
+$lxd-calendar-title-button-padding-inline: 0.25rem; // Aire a los lados del título pulsable: el mismo hueco que separa las celdas
+$lxd-calendar-year-columns: 4; // Columnas de la rejilla de años: doce años en tres filas de cuatro
+$lxd-calendar-year-height: 2rem; // Alto de la celda de año — md: el del día, para que la vista de años no cambie la altura del panel
+$lxd-calendar-year-padding-inline: 0.25rem; // Aire a los lados de la celda de año: el año lleva cuatro cifras y no cabe en el cuadrado del día
+$lxd-calendar-year-font-size: 0.875rem; // Cuerpo de letra del año
+$lxd-calendar-year-bg: rgba(0, 0, 0, 0); // Fondo base de la celda de año
+$lxd-calendar-year-color: #111e30; // Color de texto del año
+$lxd-calendar-year-current-color: #111e30; // Color del año en curso: el mismo que el día de hoy
+$lxd-calendar-year-current-font-weight: 500; // Peso del año en curso
+$lxd-calendar-year-selected-bg: #111e30; // Fondo del año de la fecha elegida
+$lxd-calendar-year-selected-color: #ffffff; // Texto del año de la fecha elegida
+$lxd-calendar-year-disabled-color: #6b6b6b; // Color de los años fuera de rango
+$lxd-calendar-year-grid-min-inline-size: calc(7 * 2rem + 6 * 0.25rem); // Ancho mínimo de la rejilla de años — md: el de la semana (siete días y sus seis huecos), para que el panel no encoja al pasar de los días a los años
+$lxd-calendar-sm-year-grid-min-inline-size: calc(7 * 1.5rem + 6 * 0.25rem); // Ancho mínimo de la rejilla de años — sm
+$lxd-calendar-lg-year-grid-min-inline-size: calc(7 * 3rem + 6 * 0.25rem); // Ancho mínimo de la rejilla de años — lg
+$lxd-calendar-sm-year-height: 1.5rem; // Alto de la celda de año — sm
+$lxd-calendar-lg-year-height: 3rem; // Alto de la celda de año — lg
+$lxd-calendar-lg-year-font-size: 1rem; // Cuerpo de letra del año — lg
+$lxd-calendar-hover-line-width: 1px; // Grosor de la línea de hover del día, del año y del título. Nada se rellena bajo el puntero (regla de Colores): lo que se puede pulsar y es texto deja una línea de tinta debajo. Las flechas no la llevan: son un glifo, y la línea del sistema subraya texto
+$lxd-calendar-hover-line-color: #111e30; // Color de la línea de hover — tinta de la superficie

package/src/tokens/scss/molecules/_carousel.scss

@@ -0,0 +1,15 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-carousel-gap: 1rem; // Aire entre diapositivas
+$lxd-carousel-slide-size: 100%; // Ancho de una diapositiva (`flex-basis`). Por defecto la pista entera: una diapositiva a la vista. Se sobreescribe con la prop `slideSize`
+$lxd-carousel-controls-gap: 0.5rem; // Aire entre los botones de la barra de control
+$lxd-carousel-controls-space-before: 1rem; // Aire entre la pista y la barra de control
+$lxd-carousel-indicator-inline-size: 2rem; // Largo de la barra indicadora (32px)
+$lxd-carousel-indicator-block-size: 2px; // Grosor de la barra indicadora — el mismo peso que la barra de activo del sistema
+$lxd-carousel-indicator-hit-block-size: 1rem; // Alto del área pulsable del indicador: la barra es fina, el objetivo táctil no
+$lxd-carousel-indicator-color: #4a4a4a; // Barra de una diapositiva que no está a la vista
+$lxd-carousel-indicator-current-color: #111e30; // Barra de la diapositiva a la vista. Es una barra de tinta, no un relleno: la posición no es un estado que se pinte de marca
+$lxd-carousel-focus-ring-color: #111e30; // Color del anillo de foco de los indicadores
+$lxd-carousel-focus-ring-width: 2px; // Grosor del anillo de foco
+$lxd-carousel-focus-ring-offset: 1px; // Separación del anillo de foco

package/src/tokens/scss/molecules/_chart.scss

@@ -0,0 +1,82 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-chart-series-1: #1e7ff6; // Ranura categórica 1. El orden de las ranuras es el mecanismo de seguridad para daltonismo: se asignan en orden, nunca se ciclan
+$lxd-chart-series-2: #f16123; // Ranura categórica 2
+$lxd-chart-series-3: #27a0af; // Ranura categórica 3
+$lxd-chart-series-4: #b29124; // Ranura categórica 4
+$lxd-chart-series-5: #c62c90; // Ranura categórica 5
+$lxd-chart-series-6: #7d9d22; // Ranura categórica 6
+$lxd-chart-series-7: #6332c4; // Ranura categórica 7
+$lxd-chart-series-8: #28a86b; // Ranura categórica 8 — techo. Una novena serie se pliega en «Otros» o se factoriza en múltiplos pequeños
+$lxd-chart-sequential-100: #dce9fc; // Rampa secuencial (magnitud) — mínimo
+$lxd-chart-sequential-200: #b6d2f8; // Rampa secuencial — paso 200
+$lxd-chart-sequential-300: #8fbaf5; // Rampa secuencial — paso 300; extremo claro de una rampa ordinal
+$lxd-chart-sequential-400: #67a1f1; // Rampa secuencial — paso 400
+$lxd-chart-sequential-500: #3b88ee; // Rampa secuencial — paso 500
+$lxd-chart-sequential-600: #236ac5; // Rampa secuencial — paso 600
+$lxd-chart-sequential-700: #164b90; // Rampa secuencial — máximo
+$lxd-chart-diverging-warm-1: #f37f54; // Divergente, brazo cálido junto al neutro
+$lxd-chart-diverging-warm-2: #d45c2c; // Divergente, brazo cálido intermedio
+$lxd-chart-diverging-warm-3: #9f431f; // Divergente, brazo cálido extremo
+$lxd-chart-diverging-neutral: #f2f2f2; // Punto medio divergente: gris neutro. Nunca un tono — el medio tiene que leerse como «nada». Es el único dato que se viste con un rol de SUPERFICIE, y a propósito: el cero es el punto de MENOR saliencia de la rampa, así que su trabajo es retirarse hacia el lienzo, no contrastar con él. Sobre blanco queda en 1,12:1, por debajo de los seis pasos de los dos brazos (2,49:1 el más flojo)
+$lxd-chart-diverging-cool-1: #70a6f2; // Divergente, brazo frío junto al neutro
+$lxd-chart-diverging-cool-2: #3484ee; // Divergente, brazo frío intermedio
+$lxd-chart-diverging-cool-3: #1f61b6; // Divergente, brazo frío extremo
+$lxd-chart-surface: #ffffff; // Color del hueco de 2px entre marcas contiguas y del anillo de 2px de los puntos. Es la superficie, no un borde: separar con trazo añadiría tinta que no es dato
+$lxd-chart-grid-color: #d0d0d0; // Rejilla: filete de 1px a un paso de la superficie. Cromo recesivo
+$lxd-chart-grid-width: 1px; // Grosor de la rejilla. Sólida siempre: una rejilla discontinua se lee como umbral
+$lxd-chart-axis-color: #6b6b6b; // Línea base y eje: un paso más firme que la rejilla, porque es el ancla del cero
+$lxd-chart-axis-width: 1px; // Grosor del eje
+$lxd-chart-label-color: #4a4a4a; // Rótulos de eje y de valor. El texto nunca lleva el color de la serie: la identidad la trae la marca de color que va al lado
+$lxd-chart-label-font-family: "Google Sans Flex", system-ui, sans-serif; // Tipografía de los rótulos
+$lxd-chart-label-font-size: 0.875rem; // 14px — rótulo de interfaz
+$lxd-chart-label-font-weight: 400; // Peso de los rótulos de eje
+$lxd-chart-value-font-weight: 500; // Peso de la etiqueta directa de valor: la cifra es lo que se lee
+$lxd-chart-muted-color: #6b6b6b; // Serie apagada del patrón de énfasis (una serie en color, el resto en gris) y ranura «Otros»
+$lxd-chart-line-width: 2px; // 2px — grosor de la línea de serie
+$lxd-chart-marker-size: 0.5rem; // 8px de diámetro — punto de serie y marcador de extremo
+$lxd-chart-marker-ring-width: 2px; // 2px — anillo del color de la superficie alrededor del punto, para que siga legible al cruzarse con una línea
+$lxd-chart-mark-gap: 2px; // 2px — hueco de superficie entre marcas que se tocan: segmentos de una barra apilada y barras contiguas
+$lxd-chart-bar-thickness-max: 1.5rem; // 24px — la barra nunca llena su banda; el sobrante es aire
+$lxd-chart-bar-radius: 0.25rem; // 4px — extremo de dato redondeado; el extremo de la línea base queda recto
+$lxd-chart-area-fill-opacity: 0.1; // El área es un velo del tono de la serie, nunca un bloque saturado
+$lxd-chart-donut-thickness: 0.55; // Fracción del radio que ocupa el anillo del donut
+$lxd-chart-funnel-gap: 0.25rem; // 4px — hueco de superficie entre tramos del embudo
+$lxd-chart-treemap-gap: 2px; // 2px — hueco entre baldosas del treemap
+$lxd-chart-radial-bar-gap: 0.25rem; // 4px — hueco entre anillos de la barra radial
+$lxd-chart-radial-track-color: #6b6b6b; // Carril del anillo sin recorrer en la barra radial: es la geometría de referencia del dato, como el eje, así que lleva su misma tinta (≥3:1 contra la superficie, WCAG 1.4.11)
+$lxd-chart-dot-size: 0.75rem; // 10px de diámetro nominal — punto de la nube de dispersión, mayor que el marcador de línea porque aquí el punto es la marca, no un remate
+$lxd-chart-radar-fill-opacity: 0.15; // El polígono del radar es un velo del tono de la serie, como el área
+$lxd-chart-tile-label-color: #ffffff; // Rótulo sobre una baldosa del treemap cuando el relleno lo elige el producto (`color`/`colors`): va encima del relleno de la serie, no de la superficie, y con un color desconocido el sistema no puede elegir la tinta
+$lxd-chart-tile-label-color-1: #000000; // Rótulo sobre la baldosa de la ranura 1. La tinta se elige por ranura: ninguna de las dos (blanco o negro) llega a 4.5:1 sobre las ocho series, así que cada una lleva la que cumple. Negro, no prusia: el prusia es un casi-negro entintado y se queda corto sobre el azul de la ranura 1
+$lxd-chart-tile-label-color-2: #000000; // Rótulo sobre la baldosa de la ranura 2
+$lxd-chart-tile-label-color-3: #000000; // Rótulo sobre la baldosa de la ranura 3
+$lxd-chart-tile-label-color-4: #000000; // Rótulo sobre la baldosa de la ranura 4
+$lxd-chart-tile-label-color-5: #ffffff; // Rótulo sobre la baldosa de la ranura 5 — el magenta es lo bastante oscuro para llevar tinta clara
+$lxd-chart-tile-label-color-6: #000000; // Rótulo sobre la baldosa de la ranura 6
+$lxd-chart-tile-label-color-7: #ffffff; // Rótulo sobre la baldosa de la ranura 7 — la lavanda de gráfico es la más oscura de las ocho
+$lxd-chart-tile-label-color-8: #000000; // Rótulo sobre la baldosa de la ranura 8
+$lxd-chart-tile-label-color-muted: #ffffff; // Rótulo sobre la baldosa gris de «Otros» (pasada la octava ranura)
+$lxd-chart-padding-block: 0.5rem; // Aire vertical del área de dibujo
+$lxd-chart-padding-inline: 0.5rem; // Aire horizontal del área de dibujo
+$lxd-chart-axis-gap: 0.5rem; // Separación entre el eje y sus rótulos
+$lxd-chart-height: 16rem; // 256px — alto por defecto del área de dibujo. La banda del eje X va aparte: el contenedor crece con ella y nunca aparece un scroll anidado
+$lxd-chart-block-gap: 0.75rem; // Separación entre título, lienzo y leyenda
+$lxd-chart-legend-gap: 0.5rem; // Aire entre las piezas de la leyenda
+$lxd-chart-legend-swatch-size: 0.5rem; // 8px — lado de la muestra de color de la leyenda
+$lxd-chart-legend-swatch-line-width: 0.75rem; // 12px — largo de la muestra cuando la marca es una línea: la leyenda imita la marca
+$lxd-chart-tooltip-bg: #111e30; // Bocadillo del gráfico: los mismos tokens que Tooltip, para que no haya dos bocadillos distintos en el sistema
+$lxd-chart-tooltip-color: #ffffff; // Texto del bocadillo
+$lxd-chart-tooltip-border-radius: 0px; // Radio del bocadillo
+$lxd-chart-tooltip-padding-block: 0.25rem; // Padding vertical del bocadillo
+$lxd-chart-tooltip-padding-inline: 0.5rem; // Padding horizontal del bocadillo
+$lxd-chart-tooltip-font-size: 0.875rem; // Tamaño de texto del bocadillo
+$lxd-chart-tooltip-line-height: 1.3; // Interlineado del bocadillo
+$lxd-chart-tooltip-offset: 0.25rem; // Separación entre el punto activo y el bocadillo
+$lxd-chart-tooltip-row-gap: 0.25rem; // Aire entre las filas del bocadillo
+$lxd-chart-tooltip-max-width: 20rem; // Ancho máximo del bocadillo
+$lxd-chart-crosshair-color: #6b6b6b; // Filete vertical que sigue al puntero y se engancha a la posición de dato más cercana
+$lxd-chart-transition-duration: 150ms; // Respuesta de la marca al puntero. Con `prefers-reduced-motion` no hay transición
+$lxd-chart-transition-easing: ease-out; // Curva de la respuesta al puntero
+$lxd-chart-hover-opacity: 0.75; // Atenuación de las marcas que no son la activa mientras el puntero está encima

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

@@ -0,0 +1,10 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$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-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
+$lxd-chat-shell-breakpoint: 1024px; // 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

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

@@ -0,0 +1,31 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-checkbox-field-stack-gap: 0.5rem; // Espacio entre el checkbox, la ayuda y el error — el ritmo del resto de campos
+$lxd-checkbox-field-gap: 0.75rem; // Separación entre el checkbox y el texto
+$lxd-checkbox-field-padding-block: 1rem; // Padding block — hereda de control
+$lxd-checkbox-field-checkbox-offset: 3px; // Desplazamiento vertical del checkbox para alinearlo con la primera línea de texto
+$lxd-checkbox-field-cursor: pointer; // Cursor
+$lxd-checkbox-field-disabled-cursor: not-allowed; // Cursor cuando está deshabilitado
+$lxd-checkbox-field-sm-gap: 0.5rem; // Gap — variante sm
+$lxd-checkbox-field-sm-padding-block: 0.5rem; // Padding block — variante sm
+$lxd-checkbox-field-lg-gap: 1rem; // Gap — variante lg
+$lxd-checkbox-field-lg-padding-block: 1.5rem; // Padding block — variante lg
+$lxd-checkbox-field-sm-label-font-size: 0.875rem; // Cuerpo del texto — variante sm: un peldaño por debajo del cuerpo de la superficie
+$lxd-checkbox-field-lg-label-font-size: 1.25rem; // Tamaño de la etiqueta en lg — el del Label lg (no el párrafo large, que en superficie pública crece con la prosa)
+$lxd-checkbox-field-label-font-family: "Google Sans Flex", system-ui, sans-serif; // Familia tipográfica
+$lxd-checkbox-field-label-font-size: 1rem; // Es texto corriente: el cuerpo de la superficie (16px en aplicación, 20px en la pública)
+$lxd-checkbox-field-label-font-weight: 300; // Peso tipográfico
+$lxd-checkbox-field-label-line-height: 1.5; // Interlineado
+$lxd-checkbox-field-label-color: #111e30; // Color del texto
+$lxd-checkbox-field-label-letter-spacing: 0em; // Interletraje
+$lxd-checkbox-field-error-font-family: "Google Sans Flex", system-ui, sans-serif; // Font family del mensaje de error
+$lxd-checkbox-field-error-font-size: 0.875rem; // Font size del mensaje de error
+$lxd-checkbox-field-error-font-weight: 300; // Font weight del mensaje de error
+$lxd-checkbox-field-error-line-height: 1.5; // Line height del mensaje de error
+$lxd-checkbox-field-error-color: #b30000; // Color del mensaje de error
+$lxd-checkbox-field-helper-font-family: "Google Sans Flex", system-ui, sans-serif; // Font family del texto de ayuda
+$lxd-checkbox-field-helper-font-size: 0.875rem; // Font size del texto de ayuda
+$lxd-checkbox-field-helper-font-weight: 300; // Font weight del texto de ayuda
+$lxd-checkbox-field-helper-line-height: 1.5; // Line height del texto de ayuda
+$lxd-checkbox-field-helper-color: #111e30; // Color del texto de ayuda

package/src/tokens/scss/molecules/_command-palette.scss

@@ -0,0 +1,33 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-command-palette-max-height: min(24rem, 60vh); // Alto máximo de la paleta — la lista scrollea dentro
+$lxd-command-palette-input-padding-block: 0.75rem; // Padding vertical del buscador
+$lxd-command-palette-input-padding-inline: 0.5rem; // Padding horizontal del buscador
+$lxd-command-palette-input-font-size: 1.25rem; // Tamaño de texto del buscador
+$lxd-command-palette-input-border-width: 1px; // Grosor de la línea bajo el buscador
+$lxd-command-palette-input-border-color: #111e30; // Color de la línea bajo el buscador
+$lxd-command-palette-input-placeholder-color: #4a4a4a; // Color del placeholder del buscador
+$lxd-command-palette-input-focus-ring-width: 2px; // Grosor del anillo de foco del buscador — el del sistema
+$lxd-command-palette-input-focus-ring-color: #111e30; // Color del anillo de foco del buscador
+$lxd-command-palette-input-focus-border-color: #111e30; // Color de la línea bajo el buscador con el foco puesto
+$lxd-command-palette-list-padding-block: 0.25rem; // Padding vertical de la lista de resultados
+$lxd-command-palette-list-padding-inline: 0.25rem; // Padding horizontal de la lista de resultados
+$lxd-command-palette-empty-padding-block: 2rem; // Padding vertical del estado vacío
+$lxd-command-palette-empty-padding-inline: 1rem; // Padding horizontal del estado vacío
+$lxd-command-palette-empty-font-size: 1rem; // Tamaño de texto del estado vacío
+$lxd-command-palette-empty-color: #4a4a4a; // Color del estado vacío
+$lxd-command-palette-heading-padding-block: 0.5rem; // Padding vertical del título de grupo
+$lxd-command-palette-heading-padding-inline: 0.75rem; // Padding horizontal del título de grupo
+$lxd-command-palette-heading-font-size: 0.875rem; // Tamaño de texto del título de grupo
+$lxd-command-palette-heading-font-weight: 500; // Peso del título de grupo
+$lxd-command-palette-heading-color: #4a4a4a; // Color del título de grupo
+$lxd-command-palette-item-padding-block: 0.5rem; // Padding vertical de cada ítem
+$lxd-command-palette-item-padding-inline: 0.75rem; // Padding horizontal de cada ítem
+$lxd-command-palette-item-gap: 0.5rem; // Gap entre icono y texto del ítem
+$lxd-command-palette-item-border-radius: 0px; // Radio de cada ítem
+$lxd-command-palette-item-font-size: 1rem; // Tamaño de texto de los ítems
+$lxd-command-palette-item-color: #111e30; // Color de texto de los ítems — comparte lenguaje con ContextMenu
+$lxd-command-palette-item-highlighted-bg: #111e30; // Relleno del ítem resaltado — el del Menu: la inversión de marca
+$lxd-command-palette-item-highlighted-color: #ffffff; // Texto del ítem resaltado — el del Menu: icono y atajo lo heredan por `currentColor`
+$lxd-command-palette-item-icon-size: 1.5rem; // Talla del icono de los ítems

package/src/tokens/scss/molecules/_confirm-dialog.scss

@@ -0,0 +1,4 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-confirm-dialog-actions-space-before: 1.5rem; // Aire entre el cuerpo del diálogo y su fila de acciones: separa la pregunta de la respuesta. El aire ENTRE los dos botones es el de `Inline` en su paso compacto

package/src/tokens/scss/molecules/_connector-auth.scss

@@ -0,0 +1,10 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-connector-auth-untrusted-max-lines: 3; // Cuántas líneas se ve de un valor de fuera —nombre de herramienta, cuenta, host— antes de recortarlo. Tres: bastantes para leer un nombre normal entero, pocas para que un nombre de 300 caracteres no empuje la decisión fuera de la pantalla
+$lxd-connector-auth-untrusted-toggle-gap: 0.25rem; // Aire entre el valor recortado y el desplegador que lo enseña entero
+$lxd-connector-auth-untrusted-toggle-font-size: 0.875rem; // Tamaño del desplegador: letra menor, porque no es el dato sino la manera de verlo entero
+$lxd-connector-auth-untrusted-toggle-cursor: pointer; // Cursor del desplegador — el del enlace, que es la cara que lleva
+$lxd-connector-auth-untrusted-focus-ring-width: 2px; // Grosor del anillo de foco del desplegador — el del enlace
+$lxd-connector-auth-untrusted-focus-ring-offset: 1px; // Separación del anillo de foco — la del enlace
+$lxd-connector-auth-untrusted-focus-ring-color: #111e30; // Anillo de foco del desplegador — el del enlace, con su mismo par oscuro

package/src/tokens/scss/molecules/_consent.scss

@@ -0,0 +1,18 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-consent-banner-bg: #ffffff; // Fondo de la banda
+$lxd-consent-banner-color: #111e30; // Texto de la banda
+$lxd-consent-banner-border-color: #111e30; // Línea superior que separa la banda de la página
+$lxd-consent-banner-border-width: 1px; // Grosor de la línea superior
+$lxd-consent-banner-padding-block: 1rem; // Aire vertical de la banda
+$lxd-consent-banner-padding-inline: 1rem; // Aire horizontal de la banda
+$lxd-consent-banner-gap: 0.75rem; // Separación entre el texto y la fila de botones
+$lxd-consent-banner-text-gap: 0.25rem; // Separación entre el título y el texto
+$lxd-consent-banner-actions-gap: 0.5rem; // Separación entre botones
+$lxd-consent-banner-max-inline-size: 1280px; // Ancho máximo del contenido dentro de la banda: el mismo del contenido de una página pública
+$lxd-consent-banner-z-index: 100; // Capa: la de las barras fijas de la aplicación. Por debajo del velo de un modal — el banner no bloquea nada
+$lxd-consent-banner-title-font-size: 1rem; // Cuerpo del título de la banda
+$lxd-consent-banner-description-font-size: 1rem; // Cuerpo del texto de la banda: el cuerpo de texto de la superficie, sin reducir (decisión del 2026-08-28)
+$lxd-consent-preferences-gap: 1rem; // Separación entre los bloques del panel
+$lxd-consent-preferences-category-gap: 0.75rem; // Separación entre categorías de la lista

package/src/tokens/scss/molecules/_conversation-list.scss

@@ -0,0 +1,23 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-conversation-list-header-gap: 0.5rem; // Separación entre el botón de conversación nueva y la lista
+$lxd-conversation-list-gap: 0.25rem; // Separación entre conversaciones
+$lxd-conversation-list-padding-inline: 0.5rem; // Aire horizontal de la lista dentro de la columna que la contiene
+$lxd-conversation-list-item-padding-block: 0.5rem; // Aire vertical de cada conversación
+$lxd-conversation-list-item-padding-inline: 0.75rem; // Aire horizontal de cada conversación
+$lxd-conversation-list-item-border-radius: 0px; // Radio de cada conversación: recto, como todo el sistema
+$lxd-conversation-list-item-font-family: "Google Sans Flex", system-ui, sans-serif; // Familia tipográfica del título de la conversación
+$lxd-conversation-list-item-font-size: 1rem; // El título es texto corriente: hereda el cuerpo de la superficie
+$lxd-conversation-list-item-color: #4a4a4a; // Tinta de una conversación en reposo: el gris de texto secundario del sistema, no `grey-dark` (que no es un color de texto)
+$lxd-conversation-list-item-hover-color: #111e30; // Tinta de la conversación bajo el puntero: el hover no pinta relleno (regla de Colores), sube del gris de texto secundario a tinta plena
+$lxd-conversation-list-item-active-color: #111e30; // Tinta de la conversación abierta: tinta plena. La conversación abierta se dice con tinta y peso, no con un fondo
+$lxd-conversation-list-item-active-font-weight: 500; // Peso de la conversación abierta
+$lxd-conversation-list-delete-color: #6b6b6b; // Tinta del aspa en reposo. Es un icono de acción secundaria — remapea `button.ghost.color` en el ámbito de la fila
+$lxd-conversation-list-delete-hover-bg: rgba(0, 0, 0, 0); // Fondo del aspa bajo el puntero: ninguno. La fila del chat no se rellena en hover (regla de Colores), así que el aspa apaga el relleno de marca del `Button` ghost y se queda solo con el cambio de tinta
+$lxd-conversation-list-delete-hover-color: #b30000; // Tinta del aspa bajo el puntero
+$lxd-conversation-list-delete-focus-ring-offset: calc(-1 * 2px); // El anillo de foco del aspa va por dentro, como el del título de la fila: el aspa toca el canto de la fila y un anillo por fuera se saldría
+$lxd-conversation-list-focus-ring-width: 2px; // Grosor del anillo de foco
+$lxd-conversation-list-focus-ring-color: #111e30; // Color del anillo de foco
+$lxd-conversation-list-transition-duration: 150ms; // Duración de la transición de color
+$lxd-conversation-list-transition-easing: ease; // Curva de la transición de color

package/src/tokens/scss/molecules/_conversation-thread.scss

@@ -0,0 +1,4 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-conversation-thread-gap: 1rem; // Separación vertical entre mensajes. Es la única medida de espaciado del hilo: el relleno se retiró —quien compone, espacia—, así que el aire alrededor de los globos lo pone quien monta el hilo

package/src/tokens/scss/molecules/_copy-button.scss

@@ -0,0 +1,4 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-copy-button-gap: 0.5rem; // Aire entre el icono y el texto cuando el botón lleva rótulo visible. Es el mismo aire que el icono de un `Link`

package/src/tokens/scss/molecules/_data-table.scss

@@ -0,0 +1,6 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-data-table-block-gap: 1rem; // Separación entre buscador, tabla y paginación — corta, es un bloque cohesionado
+$lxd-data-table-toolbar-gap: 0.5rem; // Separación entre buscador y acciones de la barra
+$lxd-data-table-footer-actions-gap: 0.75rem; // Separación entre la paginación y las acciones del pie

package/src/tokens/scss/molecules/_date-picker-field.scss

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

package/src/tokens/scss/molecules/_date-picker.scss

@@ -0,0 +1,26 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-date-picker-inline-size: 100%; // Anchura del control: la del campo, que siempre ocupa su contenedor
+$lxd-date-picker-border-width: 1px; // Grosor del borde del campo: el del sistema. Lo usa el anillo de foco del botón, que va justo por dentro de esa línea
+$lxd-date-picker-disabled-cursor: not-allowed; // Cursor con el control deshabilitado
+$lxd-date-picker-transition-duration: 150ms; // Duración de la transición de tinta del botón
+$lxd-date-picker-transition-easing: ease; // Curva de la transición
+$lxd-date-picker-button-slot-size: 2.5rem; // Lado del hueco que ocupa el botón del calendario dentro del campo: la talla md, la misma que el campo — así el adorno queda cuadrado sobre el control y su borde inferior coincide con el del campo
+$lxd-date-picker-button-sm-slot-size: 2rem; // Lado del hueco — sm
+$lxd-date-picker-button-lg-slot-size: 3rem; // Lado del hueco — lg
+$lxd-date-picker-button-icon-size: 1.25rem; // Tamaño del glifo del calendario — md (20px, acorde al campo de 40). El mismo peldaño que la flecha de `SearchForm`
+$lxd-date-picker-button-sm-icon-size: 16px; // Tamaño del glifo — sm (16px)
+$lxd-date-picker-button-lg-icon-size: 24px; // Tamaño del glifo — lg (24px)
+$lxd-date-picker-button-cursor: pointer; // Cursor del botón: abre el calendario, no se escribe en él
+$lxd-date-picker-button-color: #111e30; // Color del glifo: la tinta del campo, prusia sobre claro
+$lxd-date-picker-button-hover-color: #111e30; // Color del glifo bajo el puntero: la misma tinta. El adorno no pinta fondo ni línea al pasar el puntero
+$lxd-date-picker-button-disabled-color: #4a4a4a; // Color del glifo con el campo deshabilitado
+$lxd-date-picker-button-focus-ring-width: 2px; // Grosor del anillo de foco del botón: el del sistema. Es lo único que marca el foco, porque el adorno no tiene fondo
+$lxd-date-picker-button-focus-ring-color: #111e30; // Color del anillo de foco del botón: el del borde del campo en foco
+$lxd-date-picker-message-gap: 0.5rem; // Espacio entre el campo y el aviso de fecha incompleta: el mismo que separa las partes de un campo de formulario
+$lxd-date-picker-message-font-family: "Google Sans Flex", system-ui, sans-serif; // Familia del aviso de fecha incompleta
+$lxd-date-picker-message-font-size: 0.875rem; // Cuerpo del aviso
+$lxd-date-picker-message-font-weight: 300; // Peso del aviso
+$lxd-date-picker-message-line-height: 1.5; // Interlineado del aviso
+$lxd-date-picker-message-color: #b30000; // Color del aviso: el del error de formulario — lo que se escribió no es una fecha

package/src/tokens/scss/molecules/_date-time-field.scss

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

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

@@ -0,0 +1,27 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-docs-search-gap: 0.75rem; // Aire entre el campo de búsqueda y la lista de resultados
+$lxd-docs-search-results-gap: 0.25rem; // Aire entre dos resultados
+$lxd-docs-search-results-max-block-size: min(28rem, 60vh); // Alto máximo de la lista: a partir de ahí scrollea dentro en vez de empujar la página
+$lxd-docs-search-result-padding-block: 0.75rem; // Padding vertical de un resultado
+$lxd-docs-search-result-padding-inline: 0.75rem; // Padding horizontal de un resultado
+$lxd-docs-search-result-border-radius: 0px; // Radio de un resultado
+$lxd-docs-search-result-gap: 0.25rem; // Aire entre las tres líneas de un resultado: producto, título y extracto
+$lxd-docs-search-result-color: #111e30; // Color del resultado — tinta de la superficie
+$lxd-docs-search-result-title-font-size: 1rem; // Cuerpo del título del resultado: el del texto que indexa
+$lxd-docs-search-result-title-font-weight: 500; // Peso del título del resultado
+$lxd-docs-search-result-excerpt-font-size: 0.875rem; // Cuerpo del extracto: un peldaño por debajo del título
+$lxd-docs-search-result-excerpt-line-height: 1.5; // Interlineado del extracto
+$lxd-docs-search-result-excerpt-color: #4a4a4a; // Color del extracto — atenuado: acompaña al título, no compite con él
+$lxd-docs-search-result-product-font-size: 0.875rem; // Cuerpo del rótulo de producto del resultado
+$lxd-docs-search-result-product-color: #4a4a4a; // Color del rótulo de producto — atenuado
+$lxd-docs-search-result-mark-bg: #ffcd00; // Fondo del resaltado de coincidencias (`<mark>`) dentro del extracto: amarillo de marca. Es un relleno autocontenido —fondo y tinta emparejados—, así que no cambia en superficie oscura
+$lxd-docs-search-result-mark-color: #111e30; // Tinta del resaltado de coincidencias sobre el amarillo
+$lxd-docs-search-result-highlighted-bg: #111e30; // Relleno del resultado resaltado — el del Menu: la inversión de marca. El foco es virtual, así que puntero y teclado marcan el mismo relleno
+$lxd-docs-search-result-highlighted-color: #ffffff; // Texto del resultado resaltado — el del Menu: producto y extracto lo heredan por `currentColor`
+$lxd-docs-search-status-padding-block: 0.75rem; // Padding vertical del aviso de estado (buscando / sin resultados)
+$lxd-docs-search-status-padding-inline: 0.75rem; // Padding horizontal del aviso de estado
+$lxd-docs-search-status-gap: 0.5rem; // Aire entre el indicador de carga y su texto
+$lxd-docs-search-status-font-size: 0.875rem; // Cuerpo del aviso de estado
+$lxd-docs-search-status-color: #4a4a4a; // Color del aviso de estado — atenuado

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

@@ -0,0 +1,41 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-dropdown-field-gap: 0.5rem; // Entre la etiqueta y el control, como en el resto de campos
+$lxd-dropdown-field-height: 2.5rem; // El control mide la talla del sistema (md)
+$lxd-dropdown-field-sm-height: 2rem; // Altura — sm
+$lxd-dropdown-field-lg-height: 3rem; // Altura — lg
+$lxd-dropdown-field-sm-font-size: 0.875rem; // Cuerpo — sm (el del Select)
+$lxd-dropdown-field-value-icon-size: 1.5rem; // Icono dentro del control: la misma talla que en las opciones del menú, para que plegado y desplegado casen
+$lxd-dropdown-field-sm-value-icon-size: 16px; // Icono dentro del control — sm
+$lxd-dropdown-field-lg-value-icon-size: 1.5rem; // Icono dentro del control — lg
+$lxd-dropdown-field-lg-font-size: 1.25rem; // Cuerpo — lg (el del Select)
+$lxd-dropdown-field-sm-padding-inline: 0.5rem; // Padding inline — sm
+$lxd-dropdown-field-lg-padding-inline: 1.5rem; // Padding inline — lg
+$lxd-dropdown-field-padding-inline: 1rem; // Padding inline del control: el del Select
+$lxd-dropdown-field-content-gap: 0.5rem; // Entre el contenido del control y el chevron
+$lxd-dropdown-field-font-family: "Google Sans Flex", system-ui, sans-serif; // Familia tipográfica: la del Select
+$lxd-dropdown-field-font-size: 1rem; // Cuerpo: el del Select
+$lxd-dropdown-field-font-weight: 300; // Peso: el del Select
+$lxd-dropdown-field-color: #111e30; // Texto del control
+$lxd-dropdown-field-bg: #ffffff; // Fondo del control
+$lxd-dropdown-field-border-width: 1px; // Borde rectangular, como el Select
+$lxd-dropdown-field-border-color: #111e30; // Color del borde
+$lxd-dropdown-field-border-radius: 0px; // Radio: el del Select (rectangular)
+$lxd-dropdown-field-icon-transition: 150ms; // Giro del chevron al abrir
+$lxd-dropdown-field-icon-transition-easing: ease; // Curva del giro del chevron
+$lxd-dropdown-field-disabled-opacity: 0.4; // Opacidad del control deshabilitado
+$lxd-dropdown-field-disabled-cursor: not-allowed; // Cursor del control deshabilitado: el de los campos
+$lxd-dropdown-field-focus-ring-width: 2px; // Anillo de foco
+$lxd-dropdown-field-focus-ring-color: #111e30; // Anillo de foco
+$lxd-dropdown-field-error-border-color: #b30000; // Borde en error: el mismo que el del Select
+$lxd-dropdown-field-error-font-family: "Google Sans Flex", system-ui, sans-serif; // Font family del mensaje de error
+$lxd-dropdown-field-error-font-size: 0.875rem; // Font size del mensaje de error
+$lxd-dropdown-field-error-font-weight: 300; // Font weight del mensaje de error
+$lxd-dropdown-field-error-line-height: 1.5; // Line height del mensaje de error
+$lxd-dropdown-field-error-color: #b30000; // Color del mensaje de error
+$lxd-dropdown-field-helper-font-family: "Google Sans Flex", system-ui, sans-serif; // Font family del texto de ayuda
+$lxd-dropdown-field-helper-font-size: 0.875rem; // Font size del texto de ayuda
+$lxd-dropdown-field-helper-font-weight: 300; // Font weight del texto de ayuda
+$lxd-dropdown-field-helper-line-height: 1.5; // Line height del texto de ayuda
+$lxd-dropdown-field-helper-color: #111e30; // Color del texto de ayuda

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

@@ -0,0 +1,19 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-empty-state-gap: 1rem; // Gap entre icono, cuerpo y acción
+$lxd-empty-state-body-gap: 0.5rem; // Gap entre título y descripción
+$lxd-empty-state-padding-block: 3rem; // Padding vertical del contenedor
+$lxd-empty-state-padding-inline: 1.5rem; // Padding horizontal del contenedor
+$lxd-empty-state-icon-size: 48px; // Tamaño del icono — variante md (unificado con el icono destacado del sistema)
+$lxd-empty-state-icon-size-sm: 2rem; // Tamaño del icono — variante sm
+$lxd-empty-state-title-font-size-sm: 1.25rem; // Tamaño tipográfico del título — variante sm
+$lxd-empty-state-description-font-size-sm: 0.875rem; // Tamaño tipográfico de la descripción — variante sm
+$lxd-empty-state-icon-color: #6b6b6b; // Color del icono
+$lxd-empty-state-title-font-family: "Google Sans Flex", system-ui, sans-serif; // Familia tipográfica del título
+$lxd-empty-state-title-font-size: 1.5rem; // Tamaño tipográfico del título
+$lxd-empty-state-title-font-weight: 500; // Peso del título
+$lxd-empty-state-title-color: #4a4a4a; // Color del título — es texto, nunca grey-dark
+$lxd-empty-state-description-font-family: "Google Sans Flex", system-ui, sans-serif; // Familia tipográfica de la descripción
+$lxd-empty-state-description-font-size: 1rem; // La descripción hereda el cuerpo de la superficie (la variante sm tiene talla propia)
+$lxd-empty-state-description-color: #4a4a4a; // Color de la descripción — es texto, nunca grey-dark

package/src/tokens/scss/molecules/_field-row.scss

@@ -0,0 +1,21 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-field-row-column-gap: 1rem; // Aire entre las celdas de la fila, en columnas
+$lxd-field-row-row-gap: 0.75rem; // Aire entre las celdas apiladas (móvil)
+$lxd-field-row-rows-gap: 0.75rem; // Aire entre filas de la lista: el de los elementos de una lista, más apretado que el de campos sueltos de un formulario
+$lxd-field-row-rows-stack-gap: 1.5rem; // Aire entre filas cuando están apiladas (móvil): más que el que separa los campos dentro de una fila, o la lista se lee como una sola pila
+$lxd-field-row-cell-sm: 8rem; // Ancho propio de una celda estrecha (128px): un código postal, una cantidad
+$lxd-field-row-cell-md: 12rem; // Ancho propio de una celda normal (192px): el select de un papel («Administración»)
+$lxd-field-row-cell-lg: 16rem; // Ancho propio de una celda ancha (256px): un select de etiquetas largas
+$lxd-field-row-lg-cell-sm: 10rem; // Ancho propio de una celda estrecha — talla lg (160px): el mismo ancho, un peldaño arriba, porque la letra del control también sube
+$lxd-field-row-lg-cell-md: 15rem; // Ancho propio de una celda normal — talla lg (240px)
+$lxd-field-row-lg-cell-lg: 20rem; // Ancho propio de una celda ancha — talla lg (320px)
+$lxd-field-row-label-font-size: 0.875rem; // Cuerpo de la etiqueta que la fila reserva sobre la acción — el del Label
+$lxd-field-row-sm-label-font-size: 0.875rem; // Cuerpo de la etiqueta — talla sm
+$lxd-field-row-lg-label-font-size: 1.25rem; // Cuerpo de la etiqueta — talla lg
+$lxd-field-row-label-line-height: 1.5; // Interlineado de la etiqueta — el del Label: con el cuerpo, da la altura del hueco
+$lxd-field-row-label-gap: 0.5rem; // Aire entre la etiqueta y su control — el de los campos: completa el hueco que baja la acción hasta la línea de los controles
+$lxd-field-row-empty-font-size: 0.875rem; // Cuerpo del aviso de lista vacía
+$lxd-field-row-empty-line-height: 1.5; // Interlineado del aviso de lista vacía
+$lxd-field-row-empty-color: #4a4a4a; // Color del aviso de lista vacía — atenuado

package/src/tokens/scss/molecules/_file-upload-field.scss

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

package/src/tokens/scss/molecules/_filter-bar.scss

@@ -0,0 +1,8 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-filter-bar-gap: 1.5rem; // Aire entre la línea del buscador y la de los filtros: el mismo que separa dos campos de un formulario, porque eso es lo que son
+$lxd-filter-bar-column-gap: 1rem; // Aire entre las columnas de filtros — el de las celdas de una fila de campos
+$lxd-filter-bar-row-gap: 0.75rem; // Aire entre las filas de filtros cuando la rejilla envuelve, y entre los filtros apilados en móvil
+$lxd-filter-bar-column-min-inline-size: 12rem; // Ancho mínimo de una columna de filtros (192px, el de una celda normal de `FieldRow`): es lo que decide cuántas caben por fila —tres o cuatro en una tabla de administración— antes de apilarse
+$lxd-filter-bar-actions-gap: 0.75rem; // Aire entre las acciones de la barra — el de los botones de un formulario: la fila de acciones del sistema es una sola

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

@@ -0,0 +1,4 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-form-field-gap: 0.25rem; // Respiro entre la etiqueta, el control y la ayuda/error de un campo

package/src/tokens/scss/molecules/_image-crop-dialog.scss

@@ -0,0 +1,9 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-image-crop-dialog-gap: 1rem; // Separación entre el área de recorte y las acciones
+$lxd-image-crop-dialog-area-max-height: 60vh; // Alto máximo del área de recorte — la imagen se ajusta dentro
+$lxd-image-crop-dialog-area-min-height: 60vh; // Alto reservado para el área de recorte desde el primer render: el mismo que su máximo, para que la imagen no mueva la maqueta al cargar
+$lxd-image-crop-dialog-area-bg: #f2f2f2; // Fondo tras la imagen mientras se recorta: la superficie clara secundaria del sistema
+$lxd-image-crop-dialog-area-border-radius: 0px; // Radio del área de recorte
+$lxd-image-crop-dialog-actions-gap: 0.5rem; // Separación entre los botones de acción

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

@@ -0,0 +1,28 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-input-field-gap: 0.5rem; // Espacio entre label, input, helper y error
+$lxd-input-field-search-slot-size: 2.5rem; // Lado del hueco que ocupa un icono de la variante de búsqueda: la talla md, la misma que el campo — así lupa y aspa quedan cuadradas sobre el control
+$lxd-input-field-search-sm-slot-size: 2rem; // Lado del hueco del icono — sm
+$lxd-input-field-search-lg-slot-size: 3rem; // Lado del hueco del icono — lg
+$lxd-input-field-search-icon-size: 1.25rem; // Tamaño del glifo (lupa y aspa) — md (20px, acorde al campo de 40). El mismo peldaño que el toggle de PasswordField
+$lxd-input-field-search-sm-icon-size: 16px; // Tamaño del glifo — sm (16px)
+$lxd-input-field-search-lg-icon-size: 24px; // Tamaño del glifo — lg (24px)
+$lxd-input-field-search-icon-color: #111e30; // Color de la lupa: tinta, prusia sobre claro. La lupa no es un control — no cambia con el puntero
+$lxd-input-field-search-clear-color: #111e30; // Color del aspa de borrado: la misma tinta que la lupa
+$lxd-input-field-search-clear-hover-color: #111e30; // Color del aspa en hover (sin cambio: la tinta no se atenúa, y el hover no pinta fondo; el foco se marca con el anillo)
+$lxd-input-field-search-clear-focus-ring-width: 2px; // Grosor del anillo de foco del aspa
+$lxd-input-field-search-clear-focus-ring-offset: 2px; // Separación del anillo de foco del aspa (se dibuja hacia dentro de la caja: el aspa va a ras del borde del campo)
+$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
+$lxd-input-field-error-color: #b30000; // Color del mensaje de error
+$lxd-input-field-helper-font-family: "Google Sans Flex", system-ui, sans-serif; // Font family del texto de ayuda
+$lxd-input-field-helper-font-size: 0.875rem; // Font size del texto de ayuda
+$lxd-input-field-helper-font-weight: 300; // Font weight del texto de ayuda
+$lxd-input-field-helper-line-height: 1.5; // Line height del texto de ayuda
+$lxd-input-field-helper-color: #111e30; // Color del texto de ayuda