@studiolxd/brand 38.12.4

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

@@ -0,0 +1,14 @@
+
+// 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
+$lxd-input-phone-field-helper-line-height: 1.5; // Line height del texto de ayuda
+$lxd-input-phone-field-helper-color: #111e30; // Color del texto de ayuda

package/src/tokens/scss/molecules/_language-switcher.scss

@@ -0,0 +1,9 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-language-switcher-list-gap: 1rem; // Separación entre idiomas en la lista desplegada
+$lxd-language-switcher-list-font-size: 1rem; // Idiomas en la lista
+$lxd-language-switcher-list-current-font-weight: 500; // Idioma actual en la lista: solo cambia el peso
+$lxd-language-switcher-focus-ring-width: 2px; // Anillo de foco
+$lxd-language-switcher-focus-ring-offset: 2px; // Separación del anillo de foco
+$lxd-language-switcher-focus-ring-color: #111e30; // Anillo de foco

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

@@ -0,0 +1,46 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-menu-bg: #ffffff; // Fondo del panel — mismo lenguaje que ContextMenu
+$lxd-menu-border-width: 1px; // Grosor del borde del panel
+$lxd-menu-border-color: #111e30; // Color del borde del panel
+$lxd-menu-border-radius: 0px; // Radio del panel
+$lxd-menu-shadow: none; // Sombra del panel
+$lxd-menu-z-index: 400; // Capa z del panel flotante
+$lxd-menu-content-max-height: var(--available-height); // Altura máxima del panel (por defecto, el espacio disponible en viewport que expone Base UI) — con muchos ítems, el panel hace scroll en vez de salirse de la pantalla
+$lxd-menu-padding-block: 0.5rem; // Padding vertical del panel
+$lxd-menu-padding-inline: 0.5rem; // Padding lateral del panel
+$lxd-menu-item-padding-block: 0.5rem; // Padding vertical de cada ítem
+$lxd-menu-item-padding-inline: 1rem; // Padding horizontal de cada ítem
+$lxd-menu-item-icon-gap: 0.5rem; // Gap entre icono y texto del ítem
+$lxd-menu-item-icon-size: 1.5rem; // Talla del icono y del glifo de radio
+$lxd-menu-sm-item-icon-size: 16px; // Talla del icono de ítem — talla sm (16px)
+$lxd-menu-lg-item-icon-size: 1.5rem; // Talla del icono de ítem — talla lg (24px, la base: el ítem ya es grande)
+$lxd-menu-item-border-radius: 0px; // Radio de cada ítem
+$lxd-menu-item-font-family: "Google Sans Flex", system-ui, sans-serif; // Tipografía de ítems
+$lxd-menu-item-font-size: 1rem; // Tamaño de texto de ítems
+$lxd-menu-sm-item-font-size: 0.875rem; // Tamaño de texto de ítems — talla sm (la del Select, para que el panel case con su disparador)
+$lxd-menu-sm-item-padding-block: 0.25rem; // Padding vertical de cada ítem — talla sm
+$lxd-menu-lg-item-font-size: 1.25rem; // Tamaño de texto de ítems — talla lg (la del Select)
+$lxd-menu-lg-item-padding-block: 0.75rem; // Padding vertical de cada ítem — talla lg
+$lxd-menu-item-font-weight: 300; // Peso de texto de ítems
+$lxd-menu-item-line-height: 1.3; // Interlineado de ítems
+$lxd-menu-item-color: #111e30; // Color de texto de ítems
+$lxd-menu-item-highlighted-bg: #111e30; // Relleno del ítem bajo el puntero o el teclado (`[data-highlighted]`): la inversión de marca. Excepción declarada a «los estados no se rellenan» (Foundations → Colores): en una lista de opciones densa el relleno es lo único que se lee de un vistazo mientras el teclado la recorre
+$lxd-menu-item-highlighted-color: #ffffff; // Texto del ítem resaltado: invierte con el relleno — iconos y atajos lo heredan por `currentColor`
+$lxd-menu-item-selected-font-weight: 500; // La opción elegida de un grupo de radio, en énfasis: sin glifo
+$lxd-menu-item-cursor: pointer; // Cursor de ítems
+$lxd-menu-item-destructive-color: #b30000; // Color de texto de ítem destructivo
+$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-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
+$lxd-menu-separator-color: #111e30; // Color del separador — el de la línea del sistema
+$lxd-menu-separator-height: 1px; // Alto del separador — el grosor de la línea del sistema
+$lxd-menu-separator-margin-block: 0.5rem; // Margen vertical del separador — el aire md de la línea del sistema
+$lxd-menu-disabled-opacity: 0.4; // Opacidad de ítems deshabilitados
+$lxd-menu-transition-duration: 150ms; // Duración de transición
+$lxd-menu-transition-easing: ease; // Easing de transición

package/src/tokens/scss/molecules/_message-composer.scss

@@ -0,0 +1,21 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-message-composer-gap: 0.5rem; // Separación entre el campo y los botones dentro del marco
+$lxd-message-composer-padding-block: 0.75rem; // Aire vertical del marco
+$lxd-message-composer-padding-inline: 1rem; // Aire horizontal del marco
+$lxd-message-composer-border-radius: 0px; // Radio del marco — cascada desde textarea
+$lxd-message-composer-border-width: 1px; // Grosor del marco — cascada desde textarea
+$lxd-message-composer-border-style: solid; // Estilo del marco — cascada desde textarea
+$lxd-message-composer-border-color: #111e30; // Color del marco — cascada desde textarea
+$lxd-message-composer-bg: #ffffff; // Fondo del marco — cascada desde textarea
+$lxd-message-composer-focus-border-color: #111e30; // Color del marco con el foco dentro — cascada desde textarea
+$lxd-message-composer-focus-ring-width: 2px; // Grosor del anillo de foco. Lo dibuja el marco, no el campo: el campo va en variante `bare`
+$lxd-message-composer-focus-ring-inset-offset: 1px; // Separación entre el marco y el anillo de foco
+$lxd-message-composer-focus-ring-color: #111e30; // Color del anillo de foco
+$lxd-message-composer-disabled-bg: #f2f2f2; // Fondo del marco deshabilitado — cascada desde textarea
+$lxd-message-composer-disabled-border-color: #d0d0d0; // Color del marco deshabilitado — cascada desde textarea
+$lxd-message-composer-helper-gap: 0.5rem; // Separación entre el marco y la línea de ayuda
+$lxd-message-composer-helper-line-height: 1.65; // Interlineado de la línea de ayuda: holgado, porque lleva teclas dentro y en pantalla estrecha rompe en dos renglones
+$lxd-message-composer-helper-font-size: 0.875rem; // Cuerpo de la línea de ayuda: un peldaño por debajo del texto de la superficie
+$lxd-message-composer-helper-color: #4a4a4a; // Tinta de la línea de ayuda

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

@@ -0,0 +1,35 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-modal-z-index: 300; // z-index del panel modal
+$lxd-modal-backdrop-z-index: 200; // z-index del backdrop
+$lxd-modal-backdrop-bg: #000000; // Color del backdrop/scrim
+$lxd-modal-backdrop-opacity: 0.6; // Opacidad del backdrop (0.6)
+$lxd-modal-bg: #ffffff; // Fondo del panel modal
+$lxd-modal-border-width: 1px; // Grosor del borde del panel
+$lxd-modal-border-color: rgba(0, 0, 0, 0); // Sin borde en superficie clara: el velo y el fondo blanco ya separan el panel
+$lxd-modal-border-radius: 0px; // Radio del panel
+$lxd-modal-shadow: none; // Sombra de elevación
+$lxd-modal-padding-block: 2rem; // Padding vertical del panel
+$lxd-modal-padding-inline: 2rem; // Padding horizontal del panel
+$lxd-modal-header-gap: 1rem; // Gap entre título y botón ✕
+$lxd-modal-footer-gap: 0.75rem; // Aire entre los botones del pie. Es el de las acciones de un formulario: la fila de acciones del sistema es una sola, esté en un formulario o en un diálogo
+$lxd-modal-footer-margin-block-start: 2rem; // Aire entre el cuerpo del diálogo y su pie — el mismo que separa el último campo de las acciones en un formulario
+$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-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)
+$lxd-modal-description-font-size: 1rem; // La descripción hereda el cuerpo de la superficie (16px en aplicación, 20px en la pública)
+$lxd-modal-description-color: #4a4a4a; // Color de la descripción del modal
+$lxd-modal-description-margin-block-end: 1rem; // Separación entre la descripción y el cuerpo del modal
+$lxd-modal-close-size: 2.5rem; // Caja del botón de cerrar (40px). En la superficie pública (SiteShell) remapea a size-component.lg
+$lxd-modal-close-icon-size: 24px; // Glifo del botón de cerrar (24px), la talla por defecto de icono-botón. En la superficie pública remapea igualmente a icon.size-md
+$lxd-modal-close-color: #111e30; // Color del glifo: la tinta de la superficie, ya en reposo. El aspa no se atenúa ni cambia de color al pasar el puntero — el foco se marca con el anillo
+$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

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

@@ -0,0 +1,14 @@
+
+// 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
+$lxd-multi-select-field-helper-line-height: 1.5; // Line height del texto de ayuda
+$lxd-multi-select-field-helper-color: #111e30; // Color del texto de ayuda

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

@@ -0,0 +1,6 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-notification-button-badge-offset: 0.5rem; // Distancia del borde del botón a la esquina del icono (el aire del icono md en un botón md): el contador se centra ahí
+$lxd-notification-button-badge-fill: #b30000; // El contador es rojo: el relleno de error del sistema, universal en claro y oscuro
+$lxd-notification-button-badge-color: #ffffff; // Cifra sobre el relleno

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

@@ -0,0 +1,20 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-notification-list-item-padding-block: 1rem; // Aire vertical de cada notificación. No hay línea entre filas: este aire, dos veces, es lo único que separa una notificación de la siguiente. Es una fila de página, no de popover: respira más que la del `NotificationPanel`
+$lxd-notification-list-item-gap: 0.75rem; // Aire entre la columna del punto y el texto
+$lxd-notification-list-item-row-gap: 0.5rem; // Aire entre las líneas de una fila: entre el texto y las acciones (por debajo de `md`) y entre el texto y la hora, que va siempre en una línea propia
+$lxd-notification-list-item-column-gap: 1.5rem; // Aire entre el texto y las acciones cuando comparten línea (a partir de `md`)
+$lxd-notification-list-item-text-gap: 0.25rem; // Aire entre el título y el cuerpo
+$lxd-notification-list-item-font-family: "Google Sans Flex", system-ui, sans-serif; // Familia tipográfica de la notificación
+$lxd-notification-list-title-font-size: 1rem; // El título de una notificación es texto corriente: hereda el cuerpo de la superficie
+$lxd-notification-list-title-line-height: 1.3; // Interlineado del título
+$lxd-notification-list-title-font-weight: 300; // Peso del título, leída o sin leer: el del cuerpo de texto. Lo no leído lo dice el punto del indicador, no el peso
+$lxd-notification-list-body-font-size: 1rem; // Cuerpo de la notificación: texto corriente. En la página se lee entero y a la talla de lectura, no recortado como en el panel
+$lxd-notification-list-body-line-height: 1.5; // Interlineado del cuerpo: el de un texto que se lee entero
+$lxd-notification-list-actions-gap: 0.75rem; // Aire entre las acciones de una fila — el de los botones de un formulario: la fila de acciones del sistema es una sola
+$lxd-notification-list-time-font-size: 0.875rem; // Fecha relativa: letra menor y tinta atenuada (la del texto secundario, vía `Text tone="muted"`)
+$lxd-notification-list-time-color: #4a4a4a; // Tinta de la hora: el gris de texto secundario del sistema, el mismo que da `Text tone="muted"` al resto de textos secundarios
+$lxd-notification-list-dot-size: 16px; // Caja del punto de no leída: la talla de icono dentro de un texto (16px), la misma con la que el panel pinta ese punto
+$lxd-notification-list-dot-color: #b30000; // Color del punto: el mismo rojo del contador de la campana (`error-fill`), que es universal en claro y oscuro. No hay un rojo aparte para notificaciones
+$lxd-notification-list-dot-margin-block-start: 0.25rem; // Baja el punto hasta el centro óptico de la primera línea del título

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

@@ -0,0 +1,31 @@
+
+// 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-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-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
+$lxd-notification-panel-item-border-radius: 0px; // Radio de cada notificación: recto, como todo el sistema
+$lxd-notification-panel-item-gap: 0.5rem; // Aire entre el punto de no leída y el texto
+$lxd-notification-panel-item-text-gap: 0.25rem; // Aire entre el título, el cuerpo y la fecha
+$lxd-notification-panel-item-font-family: "Google Sans Flex", system-ui, sans-serif; // Familia tipográfica de la notificación
+$lxd-notification-panel-item-title-font-size: 1rem; // El título de una notificación es texto corriente: hereda el cuerpo de la superficie
+$lxd-notification-panel-item-title-line-height: 1.3; // Interlineado del título
+$lxd-notification-panel-item-title-font-weight: 300; // Peso del título, leída o sin leer: el del cuerpo de texto. Lo no leído lo dice el punto del indicador, no el peso
+$lxd-notification-panel-item-body-font-size: 0.875rem; // Cuerpo de la notificación: letra menor, un peldaño por debajo del cuerpo de la superficie
+$lxd-notification-panel-item-body-line-height: 1.3; // Interlineado del cuerpo
+$lxd-notification-panel-item-body-line-clamp: 2; // Cuántas líneas del cuerpo se ven antes de recortar con elipsis. El panel es un adelanto: el texto entero está en la bandeja
+$lxd-notification-panel-item-time-font-size: 0.875rem; // Fecha relativa: letra menor y tinta atenuada (la del texto secundario, vía `Text tone="muted"`)
+$lxd-notification-panel-dot-size: 16px; // Caja del punto de no leída: la talla de icono dentro de un texto (16px), la misma con la que la bandeja pinta ese punto. El círculo dibujado dentro mide unos 7px
+$lxd-notification-panel-dot-color: #b30000; // Color del punto: el mismo rojo del contador de la campana (`error-fill`), que es universal en claro y oscuro. No hay un rojo aparte para notificaciones
+$lxd-notification-panel-dot-margin-block-start: 0.25rem; // Baja el punto hasta el centro óptico de la primera línea del título
+$lxd-notification-panel-empty-padding-block: 2rem; // Aire vertical del estado vacío: el hueco de la lista sin encogerse
+$lxd-notification-panel-footer-padding-block: 0.75rem; // Aire vertical del pie
+$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

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

@@ -0,0 +1,14 @@
+
+// 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
+$lxd-number-input-field-helper-line-height: 1.5; // Line height del texto de ayuda
+$lxd-number-input-field-helper-color: #111e30; // Color del texto de ayuda

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

@@ -0,0 +1,15 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-onboarding-shell-max-width: 768px; // Ancho máximo de la columna del alta: la medida estrecha de contenido del sistema (768px). Apunta a la escala de anchos de contenido, no al breakpoint del mismo valor: un punto de corte responsive y una medida de columna son cosas distintas y tienen que poder moverse por separado
+$lxd-onboarding-shell-max-width-wide: 1280px; // Ancho máximo de la columna del alta con `width="wide"` (1280px, el de página pública): para un paso que enseña una fila de tarjetas, como la elección de plan
+$lxd-onboarding-shell-gap: 2rem; // Aire entre bloques del alta: el tramo del progreso al cuerpo dentro de la columna del paso y, cuando la plantilla va sin marco (`shell` a `false`), la separación de la marca y el pie de preferencias, que ahí vuelven a la rejilla. NO gobierna el aire del cuerpo a su pie de acciones (ese es el del formulario, `actions-margin-block-start`) ni el del chrome con marco, que sale de los tokens del chrome público
+$lxd-onboarding-shell-brand-margin-inline-start: calc(-1 * 1rem); // Desplazamiento lateral de la marca. Es el mismo de la cabecera pública: el trazado del logotipo trae su propio espacio de seguridad, y sin descontarlo la marca se ve descolgada del borde del contenido. Apuntando al de la cabecera, en el alta cae exactamente en la misma vertical que en la pantalla anterior
+$lxd-onboarding-shell-brand-padding-block: 0.5rem; // Aire arriba y abajo de la marca, que es chrome y no contenido: se pinta en la ranura de cabecera del marco, como la barra pública. Apunta al aire del chrome —`app-header.padding-block`, el mismo que da alto a `SiteHeader`—, no al del `main`: el aire del `Container` con `space="xl"` es del contenido, y usarlo aquí bajaba la marca 48px cuando en el sitio abre a 8. Atado, si mañana la barra pública respira distinto, el alta se mueve con ella
+$lxd-onboarding-shell-brand-height: calc(64px * 4 / 3); // Alto de la marca. Apunta al de la cabecera pública, no a un valor propio: el alta y el chrome público enseñan la misma marca al mismo tamaño, y tocar el de la cabecera mueve los dos
+$lxd-onboarding-shell-brand-height-compact: 3rem; // Alto de la marca en móvil (por debajo de md) — el mismo peldaño que la cabecera pública
+$lxd-onboarding-shell-brand-height-narrow: 2.5rem; // Alto de la marca en teléfono (por debajo de sm) — el mismo peldaño que la cabecera pública
+$lxd-onboarding-shell-switchers-gap: 0.75rem; // Aire entre los conmutadores de idioma y tema
+$lxd-onboarding-shell-actions-gap: 1rem; // Aire entre las acciones del pie: entre «Atrás» y las decisiones, y entre la salida («Omitir») y la principal («Continuar»/«Finalizar»). Un peldaño por encima del aire de dentro de un componente (12px): la salida es una decisión distinta de la principal, no una pieza suya, y a 12px se leían como un par de botones pegados. El mismo valor sirve en las dos direcciones —en fila a partir de `md` y en columna en móvil, donde separa dos acciones a todo el ancho— y por eso el token sigue siendo uno solo
+$lxd-onboarding-shell-actions-margin-block-start: 2rem; // Aire entre el cuerpo del paso y su pie de acciones. Sale del token del formulario, no del `gap` del alta: el pie del alta es el pie de un formulario —la principal cerrando el renglón— y tiene que separarse del cuerpo con la misma medida. Atado, si allí se mueve, aquí se mueve; con un valor propio coincidían por casualidad y se descolgaba sin que nadie se enterase
+$lxd-onboarding-shell-actions-padding-block-start: 1.5rem; // Aire extra del pie de acciones, sobre el que ya pone `actions-margin-block-start`: al no haber línea que separe el paso de sus acciones, la separación entera la hace el espacio

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

@@ -0,0 +1,39 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-org-switcher-trigger-padding-block: 0.5rem; // Padding vertical del trigger
+$lxd-org-switcher-trigger-padding-inline: 0.75rem; // Padding horizontal del trigger
+$lxd-org-switcher-trigger-gap: 0.75rem; // Espacio entre logo y nombre
+$lxd-org-switcher-trigger-border-radius: 0px; // Radio del trigger
+$lxd-org-switcher-focus-ring-color: #111e30; // Color del focus ring
+$lxd-org-switcher-focus-ring-width: 2px; // Grosor del focus ring
+$lxd-org-switcher-focus-ring-offset: 1px; // Separación del focus ring
+$lxd-org-switcher-name-font-size: 1rem; // Tamaño de texto del nombre de la org
+$lxd-org-switcher-name-font-weight: 500; // Peso del nombre de la org
+$lxd-org-switcher-name-color: #111e30; // Color del nombre de la org
+$lxd-org-switcher-content-min-width: 14rem; // Ancho mínimo del panel: nombres de organización (no es una talla de componente)
+$lxd-org-switcher-content-bg: #ffffff; // Fondo del panel
+$lxd-org-switcher-content-border-width: 1px; // Borde del panel
+$lxd-org-switcher-content-border-color: #111e30; // Color del borde del panel
+$lxd-org-switcher-content-border-radius: 0px; // Radio del panel
+$lxd-org-switcher-content-shadow: none; // Sombra del panel
+$lxd-org-switcher-content-z-index: 400; // Z-index del dropdown (por encima del sidebar en mobile)
+$lxd-org-switcher-content-max-height: var(--available-height); // Altura máxima del panel (por defecto, el espacio disponible en viewport que expone Base UI) — con muchas organizaciones, el panel hace scroll en vez de salirse de la pantalla
+$lxd-org-switcher-content-padding-block: 0.5rem; // Padding vertical del panel
+$lxd-org-switcher-content-padding-inline: 0.5rem; // Padding horizontal del panel
+$lxd-org-switcher-item-padding-block: 0.5rem; // Padding vertical de cada ítem
+$lxd-org-switcher-item-padding-inline: 0.75rem; // Padding horizontal de cada ítem
+$lxd-org-switcher-item-border-radius: 0px; // Radio de cada ítem
+$lxd-org-switcher-item-font-size: 1rem; // Tamaño de texto de ítems
+$lxd-org-switcher-item-font-weight: 300; // Peso de ítems
+$lxd-org-switcher-item-color: #111e30; // Color de ítems
+$lxd-org-switcher-item-highlighted-bg: #111e30; // Relleno del ítem resaltado — el del Menu: la inversión de marca
+$lxd-org-switcher-item-highlighted-color: #ffffff; // Texto del ítem resaltado — el del Menu
+$lxd-org-switcher-item-destructive-color: #b30000; // Color de ítem destructivo — el del Menu
+$lxd-org-switcher-item-destructive-highlighted-bg: #b30000; // Relleno del ítem destructivo resaltado — el del Menu
+$lxd-org-switcher-item-destructive-highlighted-color: #ffffff; // Texto del ítem destructivo resaltado — el del Menu
+$lxd-org-switcher-separator-color: #111e30; // Color del separador — el de la línea del sistema
+$lxd-org-switcher-separator-height: 1px; // Alto del separador — el grosor de la línea del sistema
+$lxd-org-switcher-separator-margin-block: 0.5rem; // Margen vertical del separador — el aire md de la línea del sistema
+$lxd-org-switcher-transition-duration: 150ms; // Duración de transición
+$lxd-org-switcher-transition-easing: ease; // Easing de transición

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

@@ -0,0 +1,14 @@
+
+// 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
+$lxd-otp-field-helper-line-height: 1.5; // Line height del texto de ayuda
+$lxd-otp-field-helper-color: #111e30; // Color del texto de ayuda

package/src/tokens/scss/molecules/_page-intro.scss

@@ -0,0 +1,7 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-page-intro-title-space-after: 0.5em; // Aire bajo el título cuando comparte fila con las acciones: el mismo em que deja un título suelto, para que una cabecera con acciones y una sin ellas separen igual el título de la entradilla
+$lxd-page-intro-row-column-gap: 1.5rem; // Aire entre el título y las acciones cuando comparten fila (a partir de `md`)
+$lxd-page-intro-row-gap: 0.75rem; // Aire entre el título y las acciones cuando las acciones caen debajo (por debajo de `md`)
+$lxd-page-intro-actions-gap: 0.75rem; // Aire entre las acciones — el de los botones de un formulario: la fila de acciones del sistema es una sola

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

@@ -0,0 +1,46 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-pagination-font-family: "Google Sans Flex", system-ui, sans-serif; // Font family
+$lxd-pagination-font-size: 1rem; // 16px — texto del nav (sumario) en la talla md
+$lxd-pagination-font-weight: 300; // Font weight base
+$lxd-pagination-line-height: 1; // Single line
+$lxd-pagination-gap: 0.75rem; // Gap entre secciones del nav
+$lxd-pagination-controls-gap: 0.25rem; // Gap entre botones de paginación
+$lxd-pagination-padding-block: 0.25rem; // Padding vertical del nav
+$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-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`
+$lxd-pagination-btn-border-style: solid; // Estilo del borde del botón — el del `Button`
+$lxd-pagination-btn-bg: rgba(0, 0, 0, 0); // Relleno en reposo: ninguno — es un botón outline
+$lxd-pagination-btn-color: #111e30; // Tinta del botón en reposo
+$lxd-pagination-btn-border-color: #111e30; // Borde del botón en reposo
+$lxd-pagination-btn-hover-bg: #111e30; // Relleno en hover — el outline se invierte, sin subrayado
+$lxd-pagination-btn-hover-color: #ffffff; // Tinta en hover
+$lxd-pagination-btn-hover-border-color: #111e30; // Borde en hover
+$lxd-pagination-btn-current-bg: #111e30; // Relleno de la página activa: el mismo dibujo que el hover
+$lxd-pagination-btn-current-color: #ffffff; // Tinta de la página activa
+$lxd-pagination-btn-current-border-color: #111e30; // Borde de la página activa
+$lxd-pagination-btn-current-font-weight: 500; // Peso tipográfico de la página activa
+$lxd-pagination-btn-disabled-bg: rgba(0, 0, 0, 0); // Relleno cuando está deshabilitado: ninguno
+$lxd-pagination-btn-disabled-color: #d0d0d0; // Tinta cuando está deshabilitado — el mismo rol que el `Button outline`
+$lxd-pagination-btn-disabled-border-color: #d0d0d0; // Borde cuando está deshabilitado — el mismo rol que el `Button outline`
+$lxd-pagination-btn-disabled-cursor: not-allowed; // Cursor cuando está deshabilitado
+$lxd-pagination-ellipsis-color: #4a4a4a; // Color del ellipsis
+$lxd-pagination-focus-ring-color: #111e30; // Color del focus ring
+$lxd-pagination-focus-ring-width: 2px; // Grosor del focus ring
+$lxd-pagination-focus-ring-offset: 1px; // Separación del focus ring
+$lxd-pagination-transition-duration: 150ms; // Duración de las transiciones
+$lxd-pagination-transition-easing: ease; // Easing de las transiciones
+$lxd-pagination-sm-font-size: 0.875rem; // Texto del nav — talla sm
+$lxd-pagination-sm-btn-height: 2rem; // Altura y lado mínimo del botón — la del `Button sm` (32px)
+$lxd-pagination-sm-btn-font-size: 0.875rem; // Tipografía del botón — la del `Button sm`
+$lxd-pagination-sm-btn-padding-inline: 0.25rem; // Padding horizontal del botón — talla sm
+$lxd-pagination-lg-font-size: 1.25rem; // Texto del nav — talla lg (la pública)
+$lxd-pagination-lg-btn-height: 3rem; // Altura y lado mínimo del botón — la del `Button lg` (48px)
+$lxd-pagination-lg-btn-font-size: 1.25rem; // Tipografía del botón — la del `Button lg`
+$lxd-pagination-lg-btn-padding-inline: 0.75rem; // Padding horizontal del botón — talla lg

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

@@ -0,0 +1,17 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-password-field-gap: 0.5rem; // Gap entre label, input y mensajes
+$lxd-password-field-toggle-size: 2.5rem; // Lado del área clicable del botón toggle: la talla md, la misma que el campo
+$lxd-password-field-toggle-icon-size: 1.25rem; // Tamaño del icono del toggle — md (20px, acorde al campo de 40)
+$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-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
+$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

package/src/tokens/scss/molecules/_prev-next-nav.scss

@@ -0,0 +1,25 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-prev-next-nav-font-family: "Google Sans Flex", system-ui, sans-serif; // Font family
+$lxd-prev-next-nav-font-size: 1rem; // La variante md hereda el cuerpo de la superficie; la sm tiene talla propia
+$lxd-prev-next-nav-sm-font-size: 0.875rem; // 14px — UI label (variante sm)
+$lxd-prev-next-nav-gap: 0.75rem; // Gap entre botones y label — variante md
+$lxd-prev-next-nav-sm-gap: 0.5rem; // Gap entre botones y label — variante sm
+$lxd-prev-next-nav-eyebrow-font-size: 0.875rem; // Rótulo «Anterior»/«Siguiente» sobre el título del destino
+$lxd-prev-next-nav-eyebrow-color: #4a4a4a; // Color del rótulo de dirección
+$lxd-prev-next-nav-title-font-weight: 500; // Peso del título del destino
+$lxd-prev-next-nav-title-color: #111e30; // Color del título del destino
+$lxd-prev-next-nav-title-hover-color: #111e30; // Color del título del destino en hover
+$lxd-prev-next-nav-text-gap: 0.25rem; // Aire entre el rótulo de dirección y el título
+$lxd-prev-next-nav-label-font-weight: 500; // Peso tipográfico del label central
+$lxd-prev-next-nav-label-color: #111e30; // Color del label central
+$lxd-prev-next-nav-btn-color: #111e30; // Color de los botones de navegación
+$lxd-prev-next-nav-btn-hover-color: #111e30; // Color en hover
+$lxd-prev-next-nav-btn-disabled-color: #6b6b6b; // Color cuando el botón está deshabilitado
+$lxd-prev-next-nav-focus-ring-color: #111e30; // Color del focus ring
+$lxd-prev-next-nav-focus-ring-radius: 0px; // Radio del anillo de foco — recto, como toda esquina del sistema
+$lxd-prev-next-nav-focus-ring-width: 2px; // Grosor del focus ring
+$lxd-prev-next-nav-focus-ring-offset: 1px; // Separación del focus ring
+$lxd-prev-next-nav-transition-duration: 150ms; // Duración de las transiciones
+$lxd-prev-next-nav-transition-easing: ease; // Easing de las transiciones

package/src/tokens/scss/molecules/_project-card.scss

@@ -0,0 +1,11 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-project-card-gap: 0.75rem; // Aire entre las piezas de la tarjeta
+$lxd-project-card-media-aspect-ratio: 3 / 2; // Proporción de la imagen del proyecto
+$lxd-project-card-tags-gap: 0.5rem; // Aire entre etiquetas
+$lxd-project-card-title-hover-line-width: 1px; // Grosor de la línea bajo el título con el puntero encima. Un estado se marca con una línea de tinta, nunca con relleno
+$lxd-project-card-title-hover-line-offset: 0.25rem; // Separación entre el título y su línea de hover. Apunta a la del enlace: en el DS todo subrayado se separa del texto lo mismo
+$lxd-project-card-focus-ring-color: #111e30; // Color del anillo de foco del enlace
+$lxd-project-card-focus-ring-width: 2px; // Grosor del anillo de foco
+$lxd-project-card-focus-ring-offset: 1px; // Separación del anillo de foco

package/src/tokens/scss/molecules/_prose.scss

@@ -0,0 +1,47 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-prose-measure: 70ch; // Ancho máximo de la columna de lectura — la medida del sistema (70ch), que se resuelve contra la fuente del propio texto
+$lxd-prose-font-size: 1rem; // Cuerpo del texto largo: el de la superficie (16px en aplicación, 20px en la pública)
+$lxd-prose-line-height: 1.65; // Interlineado de lectura larga (1,65), un punto por encima del cuerpo de interfaz
+$lxd-prose-color: #111e30; // Color del texto largo — el del cuerpo de la superficie
+$lxd-prose-flow-space: 1rem; // Aire entre dos bloques consecutivos del documento (párrafo, lista, cita, tabla…)
+$lxd-prose-heading-space-before: 2rem; // Aire antes de un título: un título abre sección, así que respira más que un párrafo. El aire de después lo pone el flujo
+$lxd-prose-sm-font-size: 0.875rem; // Cuerpo del texto largo — talla sm (un peldaño por debajo del cuerpo)
+$lxd-prose-sm-flow-space: 0.75rem; // Aire entre bloques — talla sm
+$lxd-prose-sm-heading-space-before: 1.5rem; // Aire antes de un título — talla sm
+$lxd-prose-list-padding-inline-start: 2rem; // Sangría de las listas — la del átomo List
+$lxd-prose-list-gap: 0.5rem; // Aire entre elementos de lista — el del átomo List
+$lxd-prose-quote-border-width: 1px; // Grosor de la línea que marca una cita — la línea del sistema
+$lxd-prose-quote-border-color: #111e30; // Color de la línea de la cita — tinta de la superficie
+$lxd-prose-quote-padding-inline: 1rem; // Sangría del texto de la cita respecto a su línea
+$lxd-prose-quote-color: #4a4a4a; // Color del texto citado — atenuado: es voz de otro
+$lxd-prose-code-font-family: "Google Sans Code", ui-monospace, monospace; // Monoespaciada del código en línea — la del átomo Code
+$lxd-prose-code-font-size: 0.875rem; // Tamaño del código en línea — el del átomo Code
+$lxd-prose-code-bg: #f2f2f2; // Fondo del código en línea — el del átomo Code: par autocontenido, idéntico en ambos temas
+$lxd-prose-code-color: #111e30; // Tinta del código en línea — la del átomo Code
+$lxd-prose-code-border-radius: 0px; // Radio del código en línea — el del átomo Code
+$lxd-prose-code-padding-block: 0px; // Padding vertical del código en línea — el del átomo Code: cero, para no romper el interlineado del párrafo
+$lxd-prose-code-padding-inline: 0.25rem; // Padding horizontal del código en línea — el del átomo Code
+$lxd-prose-pre-bg: #f2f2f2; // Fondo del bloque de código — el de CodeBlock
+$lxd-prose-pre-color: #111e30; // Tinta del bloque de código — la de CodeBlock
+$lxd-prose-pre-padding-block: 1rem; // Padding vertical del bloque de código — el de CodeBlock
+$lxd-prose-pre-padding-inline: 1rem; // Padding horizontal del bloque de código — el de CodeBlock
+$lxd-prose-pre-border-width: 1px; // Grosor del borde del bloque de código — el de CodeBlock
+$lxd-prose-pre-border-color: #111e30; // Color del borde del bloque de código — el de CodeBlock
+$lxd-prose-pre-border-radius: 0px; // Radio del bloque de código — el de CodeBlock
+$lxd-prose-pre-font-size: 0.875rem; // Tamaño del bloque de código — el de CodeBlock
+$lxd-prose-pre-line-height: 1.65; // Interlineado del bloque de código — el de CodeBlock
+$lxd-prose-table-font-size: 1rem; // Cuerpo de las celdas — el de Table
+$lxd-prose-table-cell-padding-block: 0.75rem; // Padding vertical de celda — el de Table
+$lxd-prose-table-cell-padding-inline: 0.75rem; // Padding horizontal de celda — el de Table
+$lxd-prose-table-border-width: 1px; // Grosor del separador de fila — el de Table
+$lxd-prose-table-border-color: #111e30; // Color del separador de fila — el de Table
+$lxd-prose-table-header-font-weight: 500; // Peso de la cabecera — el de Table
+$lxd-prose-table-header-border-color: #111e30; // Color del borde bajo la cabecera — el de Table
+$lxd-prose-rule-thickness: 1px; // Grosor del corte temático (`hr`) — la línea del sistema
+$lxd-prose-rule-color: #111e30; // Color del corte temático — tinta de la superficie
+$lxd-prose-rule-space: 2rem; // Aire a ambos lados del corte temático: separa bloques, no párrafos
+$lxd-prose-image-border-radius: 0px; // Radio de las imágenes — el de las superficies del sistema
+$lxd-prose-caption-font-size: 0.875rem; // Cuerpo del pie de figura: un peldaño por debajo
+$lxd-prose-caption-color: #4a4a4a; // Color del pie de figura — atenuado

package/src/tokens/scss/molecules/_public-page-shell.scss

@@ -0,0 +1,5 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-public-page-shell-preferences-padding-block: 1.5rem; // Aire arriba y abajo de la banda de preferencias, la de idioma y tema que cierra una página pública por encima del pie legal. Apunta al aire del pie público —`legal-footer.padding-block`—, no al del `main`: la banda es chrome, no contenido, y tiene que cerrar la pantalla con la misma medida con la que la cierra el `LegalFooter` que va justo debajo. El aire que la separa del contenido ya lo pone el `main` al cerrar
+$lxd-public-page-shell-preferences-gap: 0.75rem; // Aire entre los conmutadores de la banda —idioma y tema—: el aire de dentro de un componente. Los dos controles son las dos caras de la misma preferencia de pantalla y se leen como un par, no como dos bloques

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

@@ -0,0 +1,30 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-radio-field-stack-gap: 0.5rem; // Espacio entre la opción, la ayuda y el error — el ritmo del resto de campos
+$lxd-radio-field-gap: 0.75rem; // Separación entre el radio y el texto
+$lxd-radio-field-padding-block: 1rem; // Padding block — hereda de control
+$lxd-radio-field-cursor: pointer; // Cursor
+$lxd-radio-field-disabled-cursor: not-allowed; // Cursor cuando está deshabilitado
+$lxd-radio-field-sm-gap: 0.5rem; // Gap — variante sm
+$lxd-radio-field-sm-padding-block: 0.5rem; // Padding block — variante sm
+$lxd-radio-field-lg-gap: 1rem; // Gap — variante lg
+$lxd-radio-field-lg-padding-block: 1.5rem; // Padding block — variante lg
+$lxd-radio-field-sm-label-font-size: 0.875rem; // Cuerpo del texto — variante sm: un peldaño por debajo del cuerpo de la superficie
+$lxd-radio-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-radio-field-label-font-family: "Google Sans Flex", system-ui, sans-serif; // Familia tipográfica
+$lxd-radio-field-label-font-size: 1rem; // Es texto corriente: el cuerpo de la superficie (16px en aplicación, 20px en la pública)
+$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
+$lxd-radio-field-helper-line-height: 1.5; // Line height del texto de ayuda
+$lxd-radio-field-helper-color: #111e30; // Color del texto de ayuda

package/src/tokens/scss/molecules/_recovery-codes.scss

@@ -0,0 +1,12 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-recovery-codes-column-gap: 2rem; // Separación entre columnas de la rejilla de códigos (CSS `columns`)
+$lxd-recovery-codes-item-margin-block-end: 0.5rem; // Separación vertical entre un código y el siguiente dentro de una columna
+$lxd-recovery-codes-padding-inline-start: 2rem; // Sangría de la numeración — el mismo indent que `List` (`ol`)
+$lxd-recovery-codes-actions-margin-block-start: 1rem; // Separación entre la rejilla de códigos y la fila de acciones (el aire entre los propios botones lo pone `Inline`)
+$lxd-recovery-codes-font-family: "Google Sans Code", ui-monospace, monospace; // Monoespaciada, como CodeBlock y Kbd — cada código es una credencial y se lee carácter a carácter
+$lxd-recovery-codes-font-size: 0.875rem; // Tamaño de cada código — mismo criterio que CodeBlock
+$lxd-recovery-codes-line-height: 1.65; // Interlineado de cada código
+$lxd-recovery-codes-color: #111e30; // Tinta de cada código
+$lxd-recovery-codes-index-color: #4a4a4a; // Color del número de orden (`::marker`) — tinta secundaria, como el comentario de CodeBlock: el número orienta, no es el dato

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

@@ -0,0 +1,21 @@
+
+// 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-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
+$lxd-search-form-xl-slot-size: 4rem; // Lado del hueco de la flecha — xl: cuadrado a la altura del campo, como en el resto de tallas
+$lxd-search-form-xl-icon-size: 2rem; // Tamaño del glifo de la flecha — xl (32px): la mitad del hueco, la misma proporción que guardan md y lg
+$lxd-search-form-submit-slot-size: 2.5rem; // Lado del hueco que ocupa la flecha dentro del campo: la talla md, la misma que el campo — así el adorno queda cuadrado sobre el control
+$lxd-search-form-submit-sm-slot-size: 2rem; // Lado del hueco de la flecha — sm
+$lxd-search-form-submit-lg-slot-size: 3rem; // Lado del hueco de la flecha — lg
+$lxd-search-form-submit-icon-size: 1.25rem; // Tamaño del glifo de la flecha — md (20px, acorde al campo de 40). El mismo peldaño que la lupa y el aspa de InputField
+$lxd-search-form-submit-sm-icon-size: 16px; // Tamaño del glifo — sm (16px)
+$lxd-search-form-submit-lg-icon-size: 24px; // Tamaño del glifo — lg (24px)
+$lxd-search-form-submit-color: #111e30; // Color de la flecha: la tinta del campo, prusia sobre claro
+$lxd-search-form-submit-hover-color: #111e30; // Color de la flecha en hover: la misma tinta. El adorno no pinta fondo al pasar el puntero —la regla del sistema— y la tinta no se atenúa
+$lxd-search-form-submit-disabled-color: #4a4a4a; // Color de la flecha con el campo deshabilitado: el del texto del campo deshabilitado
+$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

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

@@ -0,0 +1,14 @@
+
+// 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
+$lxd-select-field-helper-line-height: 1.5; // Line height del texto de ayuda
+$lxd-select-field-helper-color: #111e30; // Color del texto de ayuda

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

@@ -0,0 +1,30 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-sheet-bg: #ffffff; // Fondo del panel
+$lxd-sheet-shadow: none; // Sombra del panel
+$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-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
+$lxd-sheet-header-gap: 1rem; // Separación dentro de la cabecera
+$lxd-sheet-title-color: #111e30; // Color del título
+$lxd-sheet-title-font-size: 2rem; // Tamaño del título
+$lxd-sheet-title-font-weight: 500; // Peso del título
+$lxd-sheet-description-font-size: 1rem; // Tamaño del texto descriptivo — hereda el cuerpo de la superficie, como en Modal
+$lxd-sheet-description-color: #4a4a4a; // Color del texto descriptivo
+$lxd-sheet-footer-gap: 0.5rem; // Separación entre acciones del pie
+$lxd-sheet-close-inset: 0.75rem; // Distancia del botón de cierre a la esquina
+$lxd-sheet-close-size: 2.5rem; // Caja del botón de cerrar — misma talla que Modal
+$lxd-sheet-close-icon-size: 24px; // Glifo del botón de cerrar — mismo que Modal
+$lxd-sheet-close-color: #111e30; // Color del glifo — la tinta, ya en reposo, igual que Modal
+$lxd-sheet-close-focus-ring-width: 2px; // Grosor del anillo de foco
+$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