@studiolxd/brand 38.12.4

package/src/tokens/scss/components/_select.scss

@@ -0,0 +1,38 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-select-border-radius: 0px; // Radio del borde del trigger
+$lxd-select-border-width: 1px; // Grosor del borde
+$lxd-select-border-style: solid; // Estilo del borde
+$lxd-select-border-color: #111e30; // Color del borde
+$lxd-select-error-border-color: #b30000; // Borde en error: el color de error (excepción a «bordes en prusia»)
+$lxd-select-height: 2.5rem; // Altura del control: la talla md del sistema. Las tallas cambian la altura, no el padding vertical
+$lxd-select-sm-height: 2rem; // Altura — sm
+$lxd-select-lg-height: 3rem; // Altura — lg
+$lxd-select-padding-inline: 1rem; // Padding inline del trigger
+$lxd-select-icon-gap: 0.5rem; // Entre el valor y el chevron (el chevron mide su talla de icono)
+$lxd-select-font-family: "Google Sans Flex", system-ui, sans-serif; // Familia tipográfica
+$lxd-select-font-size: 1rem; // Tamaño de fuente
+$lxd-select-line-height: 1; // Interlineado del trigger
+$lxd-select-font-weight: 300; // Peso tipográfico
+$lxd-select-color: #111e30; // Color del texto
+$lxd-select-bg: #ffffff; // Fondo del trigger
+$lxd-select-icon-transition: 150ms; // Duración de la transición del icono
+$lxd-select-focus-ring-width: 2px; // Grosor del anillo de foco
+$lxd-select-focus-ring-color: #111e30; // Color del anillo de foco
+$lxd-select-content-bg: #ffffff; // Fondo del dropdown
+$lxd-select-content-border-color: #111e30; // Borde del dropdown
+$lxd-select-separator-color: #111e30; // Color del separador entre grupos — el de la línea del sistema
+$lxd-select-separator-height: 1px; // Grosor del separador entre grupos — el de la línea del sistema
+$lxd-select-content-z-index: 400; // Capa del desplegable: flotante
+$lxd-select-content-max-height: var(--available-height); // Altura máxima del dropdown (por defecto, el espacio disponible en viewport que expone Base UI)
+$lxd-select-item-padding-block: 0.5rem; // Padding block de cada opción
+$lxd-select-item-selected-font-weight: 500; // La opción elegida, en énfasis
+$lxd-select-item-highlighted-bg: #111e30; // Relleno de la opción 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 recorre la lista
+$lxd-select-item-highlighted-color: #ffffff; // Texto de la opción resaltada: invierte con el relleno — el glifo de marcado lo hereda por `currentColor`
+$lxd-select-sm-font-size: 0.875rem; // Cuerpo — sm
+$lxd-select-sm-padding-inline: 0.5rem; // Padding inline del trigger — variante sm
+$lxd-select-sm-item-padding-block: 0.25rem; // Padding block de cada opción — variante sm
+$lxd-select-lg-font-size: 1.25rem; // Cuerpo — lg
+$lxd-select-lg-padding-inline: 1.5rem; // Padding inline del trigger — variante lg
+$lxd-select-lg-item-padding-block: 0.75rem; // Padding block de cada opción — variante lg

package/src/tokens/scss/components/_separator.scss

@@ -0,0 +1,8 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-separator-color: #111e30; // Color de la línea sobre superficie clara. Es el prusia del sistema: una línea de separación no es un gris de estado
+$lxd-separator-thickness: 1px; // Grosor de la línea. Todo borde del sistema mide lo mismo (Foundations → Bordes)
+$lxd-separator-spacing-sm: 0.25rem; // Aire a ambos lados, talla sm — dentro de un control
+$lxd-separator-spacing-md: 0.5rem; // Aire a ambos lados, talla md — entre grupos de un menú o de una lista. Es el aire que ya usaban Menu, UserMenu, OrgSwitcher y Sidebar
+$lxd-separator-spacing-lg: 1rem; // Aire a ambos lados, talla lg — entre bloques de una tarjeta o de un panel

package/src/tokens/scss/components/_sidebar.scss

@@ -0,0 +1,29 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-sidebar-width: 15rem; // Ancho por defecto desplegada (240px). Medida de maqueta, como la de lectura: no pertenece a la escala de tallas
+$lxd-sidebar-min-width: 12rem; // Ancho mínimo desplegada (192px): por debajo, al redimensionar, salta a rail
+$lxd-sidebar-max-width: 24rem; // Ancho máximo desplegada (384px)
+$lxd-sidebar-rail-width: calc(2 * 1rem + 2.5rem); // Ancho del rail (72px): inset simétrico `1rem` (16px) a los dos lados — el izquierdo alinea el centro del icono con el centro del `MenuButton` del header — + caja de icono `2.5rem` (40px). Ver `rail-padding-inline-start`
+$lxd-sidebar-bg: #ffffff; // Fondo
+$lxd-sidebar-border-width: 1px; // Borde que separa la sidebar del contenido
+$lxd-sidebar-border-color: #111e30; // Color del borde
+$lxd-sidebar-padding-inline: 0.5rem; // Aire lateral de desplegada (8px). El rail no usa este token — ver `rail-padding-inline-start`, simétrico a ambos lados
+$lxd-sidebar-rail-padding-inline-start: 1rem; // Inset del rail (16px), igual a `--app-header-padding-inline`, a AMBOS lados (simétrico): alinea el centro del icono del rail con el centro del `MenuButton` del header (x=36px) y evita el aire desigual de una columna estrecha. Desacoplado del padding de desplegada (`padding-inline`) para no romper su alineación, ya correcta por composición de otros tokens
+$lxd-sidebar-padding-block: 1rem; // Aire vertical de cabecera y pie
+$lxd-sidebar-panel-padding-block: 2rem; // Aire vertical del panel (arriba y abajo de la lista de navegación), incondicional — con o sin logo/footer, en rail y desplegada. El doble del aire de cabecera/pie: antes dependía de que hubiera logo, ahora no
+$lxd-sidebar-gap: 0.75rem; // Entre cabecera, panel y pie
+$lxd-sidebar-resizer-width: 0.5rem; // Zona de agarre del asa de redimensión (8px), centrada en el borde
+$lxd-sidebar-resizer-hover-color: #111e30; // El borde se marca al pasar por el asa o al arrastrar
+$lxd-sidebar-resize-step: 16; // Píxeles por pulsación de flecha en el asa (teclado)
+$lxd-sidebar-transition-duration: 250ms; // Apertura y cierre
+$lxd-sidebar-transition-easing: ease-in-out; // Curva de apertura y cierre
+$lxd-sidebar-drawer-z-index: 300; // En móvil la sidebar es un cajón sobre la página
+$lxd-sidebar-backdrop-z-index: 200; // Velo bajo el cajón
+$lxd-sidebar-backdrop-bg: #000000; // El velo del sistema
+$lxd-sidebar-backdrop-opacity: 0.6; // Opacidad del velo, la del sistema
+$lxd-sidebar-group-padding-block: 0.5rem; // Aire vertical de una sección del panel
+$lxd-sidebar-group-gap: 0.25rem; // Entre elementos de una sección
+$lxd-sidebar-separator-color: #111e30; // Línea entre secciones — el color de la línea del sistema
+$lxd-sidebar-separator-height: 1px; // Grosor de la línea — el de la línea del sistema
+$lxd-sidebar-separator-margin-block: 0.5rem; // Aire de la línea — el aire md de la línea del sistema

package/src/tokens/scss/components/_site-footer.scss

@@ -0,0 +1,16 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-site-footer-space-block-start: 4rem; // Aire sobre el pie (64px): el ritmo de una banda destacada. Es del pie, no del envoltorio
+$lxd-site-footer-space-block-end: 4rem; // Aire bajo el pie (64px)
+$lxd-site-footer-space-block-start-compact: 3rem; // Aire sobre el pie en móvil (48px, por debajo de md)
+$lxd-site-footer-space-block-end-compact: 3rem; // Aire bajo el pie en móvil (48px, por debajo de md)
+$lxd-site-footer-gap: 3rem; // Aire entre los bloques del pie (marca, columnas, contacto)
+$lxd-site-footer-brand-gap: 1rem; // Aire entre el logotipo y la frase de marca
+$lxd-site-footer-columns-gap: 2rem; // Aire entre columnas de enlaces
+$lxd-site-footer-column-min-size: 10rem; // Ancho mínimo de una columna de enlaces: por debajo, las columnas se apilan
+$lxd-site-footer-column-gap: 0.75rem; // Aire entre el título de una columna y sus enlaces
+$lxd-site-footer-links-gap: 0.5rem; // Aire entre enlaces de una columna
+$lxd-site-footer-legal-space-before: 2rem; // Aire entre el cuerpo del pie y el bloque legal
+$lxd-site-footer-legal-separator-color: #111e30; // Línea sobre el bloque legal. Es la línea de separación del sistema
+$lxd-site-footer-legal-separator-thickness: 1px; // Grosor de la línea sobre el bloque legal

package/src/tokens/scss/components/_site-header.scss

@@ -0,0 +1,24 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-site-header-content-height: calc(64px * 4 / 3); // Lo más alto que lleva la barra: el logotipo a talla xxl (85px)
+$lxd-site-header-content-height-compact: 3rem; // Lo más alto que lleva la barra en móvil (por debajo de md): el logotipo a talla lg (48px), para que quepa con los controles
+$lxd-site-header-content-height-narrow: 2.5rem; // Lo más alto que lleva la barra en teléfono (por debajo de sm): el logotipo a talla md (40px), para caber en 360px con idioma y menú
+$lxd-site-header-height-narrow: calc(2.5rem + 2 * 0.5rem); // Alto de la barra en teléfono (56px, la misma que la barra de aplicación)
+$lxd-site-header-height-compact: calc(3rem + 2 * 0.5rem); // Alto de la barra en móvil (64px)
+$lxd-site-header-height: calc(calc(64px * 4 / 3) + 2 * 0.5rem); // Alto de la barra: el logotipo más el aire del sistema arriba y abajo (101px). La barra de aplicación mide 56: en la web manda la marcacación, para que ambas superficies coincidan
+$lxd-site-header-bg: #ffffff; // Fondo de la barra
+$lxd-site-header-logo-margin-inline-start: calc(-1 * 1rem); // La marca sale del aire lateral del Container: el logotipo trae su propio espacio de seguridad en el trazado, y con el padding encima se veía descolgado del borde del contenido
+$lxd-site-header-gap-narrow: 0.5rem; // Separación entre marca y controles en teléfono (por debajo de sm)
+$lxd-site-header-gap: 0.75rem; // Separación entre logo y controles
+$lxd-site-header-z-index: 100; // Capa z — sobre el contenido, bajo los paneles flotantes
+$lxd-site-header-panel-bg: #ffffff; // Fondo del panel de navegación
+$lxd-site-header-panel-padding-inline: 1rem; // Aire lateral del panel: el mismo del Container, para que su contenido caiga en la misma columna que la barra. El panel es `position: fixed`, así que sale del flujo de la banda y no hereda el aire que esta ya puso
+$lxd-site-header-panel-padding-block: 3rem; // Aire superior del panel, entre la barra y el índice
+$lxd-site-header-panel-padding-block-end: 1.5rem; // Aire inferior del panel, bajo los ajustes (idioma, tema), que van pegados al fondo: menos que arriba
+$lxd-site-header-panel-z-index: 300; // El panel a pantalla completa es una capa modal: sobre el contenido, bajo lo flotante
+$lxd-site-header-panel-transition-duration: 400ms; // Entrada y salida del panel: cambio de contexto
+$lxd-site-header-panel-transition-easing: ease-in-out; // Curva del panel: movimiento
+$lxd-site-header-panel-gap: 3rem; // Ritmo vertical entre las secciones del panel: el índice, el buscador y los ajustes del sitio. Es un solo aire para todas, no uno por sección
+$lxd-site-header-settings-margin-block-start: 3rem; // Aire mínimo entre el índice y los ajustes del sitio (idioma, tema), que van pegados al borde inferior del panel: el ritmo del panel. Se mantiene por compatibilidad; quien quiera cambiarlo toca `panel-gap`
+$lxd-site-header-settings-gap: 1.5rem; // Separación entre los ajustes del sitio: en fila en escritorio, apilados en móvil

package/src/tokens/scss/components/_site-shell.scss

@@ -0,0 +1,19 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-site-shell-text-font-size: 1.25rem; // Cuerpo de texto de la superficie pública (20px): la talla de los controles lg. Dentro del SiteShell todo el texto que hereda del lienzo va a esta talla; AppShell sigue a la base
+$lxd-site-shell-text-line-height: 1.5; // Interlineado del cuerpo en la superficie pública
+$lxd-site-shell-paragraph-small-font-size: 1rem; // Párrafo pequeño en la superficie pública (16px): un peldaño por debajo del cuerpo de 20px
+$lxd-site-shell-paragraph-large-font-size: 1.5rem; // Párrafo grande en la superficie pública (24px): un peldaño por encima del cuerpo de 20px
+$lxd-site-shell-heading-size-1: 1rem; // Paso 1 de la escala de títulos en la superficie pública (16px): un peldaño por encima del paso base
+$lxd-site-shell-heading-size-2: 1.25rem; // Paso 2 de la escala de títulos en la superficie pública (20px)
+$lxd-site-shell-heading-size-3: 1.25rem; // Paso 3 de la escala de títulos en la superficie pública (20px) — el de H6: iguala al cuerpo, y se distingue por el peso
+$lxd-site-shell-heading-size-4: 1.5rem; // Paso 4 de la escala de títulos en la superficie pública (24px) — el de H5: por encima del cuerpo
+$lxd-site-shell-heading-size-5: 1.75rem; // Paso 5 de la escala de títulos en la superficie pública (28px) — el de H4
+$lxd-site-shell-heading-size-6: 2rem; // Paso 6 de la escala de títulos en la superficie pública (32px) — el de H3
+$lxd-site-shell-heading-size-7: 2.5rem; // Paso 7 de la escala de títulos en la superficie pública (40px) — el de H2
+$lxd-site-shell-heading-size-8: 3.5rem; // Paso 8 de la escala de títulos en la superficie pública (56px) — el de H1
+$lxd-site-shell-heading-size-9: 4.5rem; // Paso 9 de la escala de títulos en la superficie pública (72px) — display pequeño
+$lxd-site-shell-heading-size-10: 6rem; // Paso 10 de la escala de títulos en la superficie pública (96px): el techo de la escala, no sube más
+$lxd-site-shell-close-size: 3rem; // Caja del botón de cerrar de Modal/Sheet en la superficie pública: objetivo táctil lg
+$lxd-site-shell-close-icon-size: 48px; // Glifo del botón de cerrar de Modal/Sheet en la superficie pública: lg, a juego con la caja lg — el aspa pesa lo mismo que el resto de la superficie pública, más grande que en aplicación

package/src/tokens/scss/components/_skeleton.scss

@@ -0,0 +1,9 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-skeleton-bg: #f2f2f2; // Fondo base del bloque en carga — superficie clara secundaria, mismo rol que kbd/code-block
+$lxd-skeleton-highlight: #ffffff; // Brillo que recorre el bloque
+$lxd-skeleton-border-radius: 0px; // Radio del bloque
+$lxd-skeleton-circle-border-radius: 9999px; // Radio de la variante circular (avatares)
+$lxd-skeleton-height: 1lh; // Alto por defecto — una línea de texto
+$lxd-skeleton-duration: 1400ms; // Duración del barrido — igual que Spinner, token propio: un bucle no es una transición del sistema

package/src/tokens/scss/components/_skip-link.scss

@@ -0,0 +1,13 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-skip-link-bg: #111e30; // Fondo del enlace revelado: relleno de marca
+$lxd-skip-link-color: #ffffff; // Texto sobre el relleno
+$lxd-skip-link-padding-block: 0.5rem; // Aire vertical del enlace revelado
+$lxd-skip-link-padding-inline: 1rem; // Aire horizontal del enlace revelado
+$lxd-skip-link-inset: 0.5rem; // Separación de la esquina de la ventana al revelarse
+$lxd-skip-link-font-weight: 500; // Peso del texto: es una acción
+$lxd-skip-link-focus-ring-width: 2px; // Grosor del anillo de foco
+$lxd-skip-link-focus-ring-offset: 0.25rem; // Separación del anillo de foco (4px): el hueco es la página, como en los botones
+$lxd-skip-link-focus-ring-color: #111e30; // Anillo de foco: va por fuera, sobre la página, así que es la tinta de la superficie (prusia), no la que contrasta con el relleno
+$lxd-skip-link-z-index: 600; // Sobre cualquier otra capa: es lo primero al tabular

package/src/tokens/scss/components/_slider.scss

@@ -0,0 +1,25 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-slider-control-block-size: 1.5rem; // Alto de la zona sensible: la banda es fina, pero el objetivo de pulsación no
+$lxd-slider-track-size: 0.25rem; // Grosor del carril
+$lxd-slider-track-bg: #d0d0d0; // Carril sin recorrer
+$lxd-slider-track-border-radius: 0px; // Radio del carril (recto, como el resto del sistema)
+$lxd-slider-indicator-bg: #111e30; // Tramo recorrido
+$lxd-slider-thumb-size: 16px; // Lado del pulgar (cuadrado, como el resto de formas del sistema)
+$lxd-slider-thumb-bg: #111e30; // Relleno del pulgar
+$lxd-slider-thumb-border-width: 1px; // Grosor del borde del pulgar
+$lxd-slider-thumb-border-color: #111e30; // Borde del pulgar
+$lxd-slider-thumb-border-radius: 0px; // Radio del pulgar
+$lxd-slider-value-font-family: "Google Sans Flex", system-ui, sans-serif; // Familia del valor cuando se muestra
+$lxd-slider-value-font-size: 1rem; // Tamaño del valor cuando se muestra
+$lxd-slider-value-color: #111e30; // Tinta del valor cuando se muestra
+$lxd-slider-value-gap: 0.75rem; // Separación entre la banda y el valor
+$lxd-slider-cursor: pointer; // Cursor sobre la banda
+$lxd-slider-disabled-cursor: not-allowed; // Cursor cuando está deshabilitado
+$lxd-slider-disabled-opacity: 0.4; // Opacidad cuando está deshabilitado
+$lxd-slider-transition-duration: 150ms; // Duración de la transición del pulgar
+$lxd-slider-transition-easing: ease; // Easing de la transición del pulgar
+$lxd-slider-focus-ring-width: 2px; // Grosor del anillo de foco
+$lxd-slider-focus-ring-offset: 0.25rem; // Separación del anillo de foco
+$lxd-slider-focus-ring-color: #111e30; // Color del anillo de foco

package/src/tokens/scss/components/_sparkline.scss

@@ -0,0 +1,11 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-sparkline-width: 5rem; // 80px — ancho por defecto de la chispa dentro de un StatTile
+$lxd-sparkline-height: 1.5rem; // 24px — alto por defecto: la chispa acompaña a una cifra, no la compite
+$lxd-sparkline-line-width: 2px; // Grosor de la línea. Es la misma marca que en Chart
+$lxd-sparkline-color: #6b6b6b; // Trazo de la serie: gris de atenuación, porque el dato que se lee es la cifra que va al lado
+$lxd-sparkline-accent-color: #1e7ff6; // Periodo actual y punto final: la ranura de apertura del sistema
+$lxd-sparkline-fill-opacity: 0.1; // Velo bajo la línea cuando la chispa se pinta como área
+$lxd-sparkline-marker-size: 0.5rem; // Diámetro del punto final
+$lxd-sparkline-baseline-color: #6b6b6b; // Línea del cero cuando la serie cruza el cero: es el ancla del dato, no rejilla, así que lleva la tinta del eje (≥3:1 contra la superficie, WCAG 1.4.11)

package/src/tokens/scss/components/_spinner.scss

@@ -0,0 +1,10 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-spinner-size-sm: 1rem; // 16px — compact spinner
+$lxd-spinner-size-md: 1.5rem; // 24px — default spinner
+$lxd-spinner-size-lg: 2rem; // 32px — large spinner
+$lxd-spinner-border-width-sm: 2px; // Grosor del trazo (stroke) para sm
+$lxd-spinner-border-width-md: 2px; // Grosor del trazo (stroke) para md
+$lxd-spinner-border-width-lg: 3px; // Grosor del trazo (stroke) para lg
+$lxd-spinner-animation-duration: 1000ms; // Tiempo en dibujar el contorno completo (un ciclo del bucle)

package/src/tokens/scss/components/_stack.scss

@@ -0,0 +1,6 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-stack-gap-sm: 0.5rem; // Aire entre piezas apiladas — compacto (8px): líneas de un mismo dato (nombre y correo, título y subtítulo). Es el mismo peldaño que `inline.gap-sm`, y queda por debajo del aire entre dos párrafos (`prose.flow-space`, 16px): las líneas se leen como una sola cosa
+$lxd-stack-gap-md: 1.5rem; // Aire entre piezas apiladas — base
+$lxd-stack-gap-lg: 3rem; // Aire entre piezas apiladas — amplio

package/src/tokens/scss/components/_star-rating.scss

@@ -0,0 +1,17 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-star-rating-gap: 0.25rem; // Separación entre estrellas
+$lxd-star-rating-star-size: 1.25em; // Tamaño de la estrella — relativo al texto que la rodea, como el resto de marcas en línea
+$lxd-star-rating-sm-star-size: 1em; // Tamaño de la estrella — talla sm
+$lxd-star-rating-lg-star-size: 1.5em; // Tamaño de la estrella — talla lg
+$lxd-star-rating-track-color: #6b6b6b; // Contorno de la estrella sin ganar
+$lxd-star-rating-fill-color: #111e30; // Relleno y contorno de la estrella ganada
+$lxd-star-rating-cursor: pointer; // Cursor sobre una estrella elegible
+$lxd-star-rating-disabled-cursor: not-allowed; // Cursor cuando la entrada está deshabilitada
+$lxd-star-rating-disabled-opacity: 0.4; // Opacidad cuando la entrada está deshabilitada
+$lxd-star-rating-transition-duration: 150ms; // Duración del cambio de relleno
+$lxd-star-rating-transition-easing: ease; // Easing del cambio de relleno
+$lxd-star-rating-focus-ring-width: 2px; // Grosor del anillo de foco
+$lxd-star-rating-focus-ring-offset: 1px; // Separación del anillo de foco
+$lxd-star-rating-focus-ring-color: #111e30; // Color del anillo de foco

package/src/tokens/scss/components/_step.scss

@@ -0,0 +1,37 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-step-size-sm: 1.5rem; // 24px — marca compacta: listas de proceso densas
+$lxd-step-size-md: 2rem; // 32px — por defecto: la talla que ya usaba Stepper
+$lxd-step-border-radius: 0px; // Marca cuadrada, el radio del sistema — no `round`: la marca de un paso es identidad de marca, no un avatar ni una píldora
+$lxd-step-border-width: 1px; // Filete de la marca hueca (estado `pending`). Todo borde del sistema mide lo mismo
+$lxd-step-icon-size: 16px; // El check de un paso `done`, o el icono que trae el paso: el icono dentro de un control
+$lxd-step-font-family: "Google Sans Flex", system-ui, sans-serif; // Tipografía de la cifra
+$lxd-step-font-size-sm: 0.75rem; // 12px — cifra en marca `sm`
+$lxd-step-font-size-md: 0.875rem; // 14px — cifra en marca `md`
+$lxd-step-font-weight: 300; // Peso de la cifra: dentro de una marca rellena de otro color el peso no señala nada — el estado ya lo dicen el relleno y el filete
+$lxd-step-pending-bg: #ffffff; // Fondo de una marca hueca (`pending`): el lienzo de la página. Tiene que tapar el carril igual que una marca rellena — transparente, la línea lo cruzaría por la mitad
+$lxd-step-pending-border-color: #d0d0d0; // Filete de una marca hueca: el borde general del sistema
+$lxd-step-pending-color: #4a4a4a; // Cifra de una marca hueca: texto secundario
+$lxd-step-tone-primary-bg: #111e30; // Relleno tono primary: la marca del sistema
+$lxd-step-tone-primary-color: #ffffff; // Tinta sobre el relleno primary
+$lxd-step-tone-accent-1-bg: #baabff; // Relleno tono accent-1 (lavender)
+$lxd-step-tone-accent-1-color: #111e30; // Tinta sobre accent-1
+$lxd-step-tone-accent-2-bg: #ffcd00; // Relleno tono accent-2 (yellow)
+$lxd-step-tone-accent-2-color: #111e30; // Tinta sobre accent-2
+$lxd-step-tone-support-1-bg: #20e38e; // Relleno tono support-1 (emerald)
+$lxd-step-tone-support-1-color: #111e30; // Tinta sobre support-1
+$lxd-step-tone-support-2-bg: #f05e1c; // Relleno tono support-2 (cayenne)
+$lxd-step-tone-support-2-color: #111e30; // Tinta sobre support-2
+$lxd-step-tone-danger-bg: #b30000; // Relleno tono danger
+$lxd-step-tone-danger-color: #ffffff; // Tinta sobre danger
+$lxd-step-tone-success-bg: #006616; // Relleno tono success
+$lxd-step-tone-success-color: #ffffff; // Tinta sobre success
+$lxd-step-tone-neutral-bg: #4a4a4a; // Relleno tono neutral (gris oscuro)
+$lxd-step-tone-neutral-color: #ffffff; // Tinta sobre neutral
+$lxd-step-connector-thickness: 1px; // Grosor de la línea entre pasos. Compartido por Stepper y Steps
+$lxd-step-connector-color: #d0d0d0; // Tramo sin recorrer / línea de unión: el rol de borde del sistema, el mismo que el filete de la marca `pending`
+$lxd-step-connector-done-color: #111e30; // Tramo recorrido (solo Stepper, que tiene estado): la marca del sistema
+$lxd-step-description-color: #4a4a4a; // Línea de detalle bajo una marca: texto secundario. La usan la descripción de Stepper y la de Steps, para que digan lo mismo con el mismo color
+$lxd-step-transition-duration: 150ms; // Duración del cambio de fondo de la marca (un paso que pasa a completado, o vuelve a pendiente)
+$lxd-step-transition-easing: ease; // Curva del cambio de fondo

package/src/tokens/scss/components/_switcher.scss

@@ -0,0 +1,30 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-switcher-target-size: 1.5rem; // Área sensible al puntero: 24×24 px como pide WCAG 2.5.8, aunque el track (sm) sea menor en bloque. Se extiende de forma invisible y centrada, sin mover la maqueta
+$lxd-switcher-track-width: 2.75em; // Ancho del track
+$lxd-switcher-track-height: 1.5em; // Alto del track
+$lxd-switcher-track-bg: #d0d0d0; // Fondo del track — estado off
+$lxd-switcher-track-bg-checked: #111e30; // Fondo del track — estado on
+$lxd-switcher-track-border-radius: 9999px; // Radio del track (pill)
+$lxd-switcher-track-padding: 0.1875em; // Padding interior del track — separa el thumb de los bordes
+$lxd-switcher-thumb-size: 1.125em; // Tamaño del thumb (cuadrado)
+$lxd-switcher-thumb-bg: #ffffff; // Color del thumb
+$lxd-switcher-thumb-border-radius: 9999px; // Radio del thumb (circular)
+$lxd-switcher-cursor: pointer; // Cursor
+$lxd-switcher-disabled-cursor: not-allowed; // Cursor cuando está deshabilitado
+$lxd-switcher-disabled-opacity: 0.4; // Opacidad cuando está deshabilitado
+$lxd-switcher-transition-duration: 150ms; // Duración de la transición
+$lxd-switcher-transition-easing: ease; // Easing de la transición
+$lxd-switcher-focus-ring-width: 2px; // Grosor del anillo de foco
+$lxd-switcher-focus-ring-offset: 1px; // Separación del anillo de foco
+$lxd-switcher-focus-ring-color: #111e30; // Color del anillo de foco
+$lxd-switcher-error-ring-width: 1px; // Grosor del anillo que marca el error (el track no tiene borde)
+$lxd-switcher-error-ring-offset: 1px; // Separación del anillo de error
+$lxd-switcher-error-ring-color: #b30000; // Color del anillo de error
+$lxd-switcher-sm-track-width: 2.25em; // Ancho del track — variante sm
+$lxd-switcher-sm-track-height: 1.25em; // Alto del track — variante sm
+$lxd-switcher-sm-thumb-size: 0.875em; // Tamaño del thumb — variante sm
+$lxd-switcher-lg-track-width: 3rem; // Ancho del track — variante lg (48px, alineado con la talla lg del sistema, size-component.lg). En rem, no en em: como el resto de campos en lg, no se escala además con la fuente del párrafo large del campo
+$lxd-switcher-lg-track-height: 1.625rem; // Alto del track — variante lg. En rem, ver lg-track-width
+$lxd-switcher-lg-thumb-size: 1.25rem; // Tamaño del thumb — variante lg. En rem, ver lg-track-width

package/src/tokens/scss/components/_tabs.scss

@@ -0,0 +1,26 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-tabs-list-border-width: 1px; // Ancho del borde inferior de la lista de tabs
+$lxd-tabs-list-border-color: #111e30; // Color del borde inferior de la lista
+$lxd-tabs-list-gap: 0.25rem; // Gap entre triggers
+$lxd-tabs-trigger-padding-block: 0.75rem; // Padding vertical del trigger
+$lxd-tabs-trigger-padding-inline: 1rem; // Padding horizontal del trigger
+$lxd-tabs-trigger-font-size: 1rem; // Tamaño de fuente del trigger
+$lxd-tabs-trigger-font-weight: 300; // Peso de fuente por defecto
+$lxd-tabs-trigger-active-weight: 500; // Peso de fuente del tab activo
+$lxd-tabs-trigger-color: #4a4a4a; // Color del trigger inactivo — es texto, nunca grey-dark
+$lxd-tabs-trigger-hover-color: #111e30; // Color del trigger en hover
+$lxd-tabs-trigger-active-color: #111e30; // Color del trigger activo
+$lxd-tabs-trigger-indicator-width: 1px; // Grosor del indicador activo (underline)
+$lxd-tabs-trigger-indicator-color: #111e30; // Color del indicador activo
+$lxd-tabs-trigger-pill-bg-active: #111e30; // Fondo del trigger activo en variante pill
+$lxd-tabs-trigger-pill-color-active: #ffffff; // Texto del trigger activo en variante pill
+$lxd-tabs-trigger-border-radius: 0px; // Radio de borde del trigger (pill + focus ring)
+$lxd-tabs-trigger-disabled-opacity: 0.4; // Opacidad del trigger deshabilitado
+$lxd-tabs-focus-ring-color: #111e30; // Color del anillo de foco
+$lxd-tabs-focus-ring-width: 2px; // Grosor del anillo de foco
+$lxd-tabs-focus-ring-offset: 1px; // Separación del anillo de foco
+$lxd-tabs-content-padding-block: 1rem; // Padding vertical del panel de contenido
+$lxd-tabs-transition-duration: 150ms; // Duración de la transición de color
+$lxd-tabs-transition-easing: ease-in-out; // Easing de la transición

package/src/tokens/scss/components/_tag.scss

@@ -0,0 +1,30 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-tag-border-radius: 9999px; // Píldora: el tag es una de las formas redondas del sistema
+$lxd-tag-font-family: "Google Sans Flex", system-ui, sans-serif; // Tipografía
+$lxd-tag-font-size: 0.875rem; // 14px — cuerpo de interfaz, no de prosa
+$lxd-tag-font-weight: 500; // Peso de énfasis
+$lxd-tag-line-height: 1; // Una línea
+$lxd-tag-padding-block: 0.25rem; // Aire vertical
+$lxd-tag-padding-inline: 0.75rem; // Aire horizontal
+$lxd-tag-primary-bg: #111e30; // Marca primaria (prusia) — relleno
+$lxd-tag-primary-color: #ffffff; // Marca primaria — texto sobre el relleno
+$lxd-tag-accent-1-bg: #baabff; // Acento 1 (lavanda) — relleno
+$lxd-tag-accent-1-color: #111e30; // Acento 1 — texto sobre el relleno
+$lxd-tag-accent-2-bg: #ffcd00; // Acento 2 (amarillo) — relleno
+$lxd-tag-accent-2-color: #111e30; // Acento 2 — texto sobre el relleno
+$lxd-tag-support-1-bg: #20e38e; // Soporte 1 (esmeralda) — relleno
+$lxd-tag-support-1-color: #111e30; // Soporte 1 — texto sobre el relleno
+$lxd-tag-support-2-bg: #f05e1c; // Soporte 2 (cayena) — relleno
+$lxd-tag-support-2-color: #111e30; // Soporte 2 — texto sobre el relleno
+$lxd-tag-neutral-bg: #4a4a4a; // Neutral — relleno gris oscuro (AAA con texto blanco)
+$lxd-tag-neutral-color: #ffffff; // Neutral — texto sobre el relleno
+$lxd-tag-info-bg: #111e30; // Información — relleno prusia (AAA con texto blanco)
+$lxd-tag-info-color: #ffffff; // Información — texto sobre el relleno
+$lxd-tag-warning-bg: #ffcd00; // Aviso — relleno universal del rol de feedback. Es el amarillo de siempre, pero llega por el rol, no por la marca
+$lxd-tag-warning-color: #111e30; // Aviso — contenido sobre el relleno: el prusia (11,17:1, AAA)
+$lxd-tag-success-bg: #006616; // Éxito — relleno universal del sistema
+$lxd-tag-success-color: #ffffff; // Éxito — contenido sobre el relleno
+$lxd-tag-danger-bg: #b30000; // Peligro — relleno universal del sistema
+$lxd-tag-danger-color: #ffffff; // Peligro — contenido sobre el relleno

package/src/tokens/scss/components/_text-inline.scss

@@ -0,0 +1,7 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-text-inline-emphasis-font-weight: 500; // Peso del énfasis fuerte en línea
+$lxd-text-inline-muted-color: #4a4a4a; // Texto secundario en línea: una aclaración, un metadato
+$lxd-text-inline-destructive-color: #b30000; // Énfasis en línea con intención destructiva: la palabra que dice que algo se pierde. Es tinta sobre la superficie, nunca un relleno
+$lxd-text-inline-success-color: #006616; // Énfasis en línea con intención de logro

package/src/tokens/scss/components/_text.scss

@@ -0,0 +1,73 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-text-font-family: "Google Sans Flex", system-ui, sans-serif; // Default font family
+$lxd-text-font-size: 1rem; // Cuerpo base (16px). Es el cuerpo de la superficie de aplicación; el SiteShell lo remapea a 20px
+$lxd-text-font-weight: 300; // Default font weight
+$lxd-text-line-height: 1.5; // Default line height
+$lxd-text-color: #111e30; // Default text color
+$lxd-text-background: #ffffff; // Fondo del lienzo de página (body)
+$lxd-text-letter-spacing: 0em; // Default letter spacing
+$lxd-text-size-1: 0.875rem; // Paso 1 de la escala de títulos (14px)
+$lxd-text-size-2: 1rem; // Paso 2 de la escala de títulos (16px)
+$lxd-text-size-3: 1rem; // Paso 3 de la escala de títulos (16px) — el de H6
+$lxd-text-size-4: 1.25rem; // Paso 4 de la escala de títulos (20px) — el de H5
+$lxd-text-size-5: 1.5rem; // Paso 5 de la escala de títulos (24px) — el de H4
+$lxd-text-size-6: 1.75rem; // Paso 6 de la escala de títulos (28px) — el de H3
+$lxd-text-size-7: 2rem; // Paso 7 de la escala de títulos (32px) — el de H2
+$lxd-text-size-8: 2.5rem; // Paso 8 de la escala de títulos (40px) — el de H1
+$lxd-text-size-9: 3.5rem; // Paso 9 de la escala de títulos (56px) — display pequeño
+$lxd-text-size-10: 6rem; // Paso 10 de la escala de títulos (96px) — display
+$lxd-text-heading-font-family: "Google Sans Flex", system-ui, sans-serif; // Heading font family
+$lxd-text-heading-font-weight: 500; // Heading font weight
+$lxd-text-heading-color: #111e30; // Heading color
+$lxd-text-heading-letter-spacing: -0.02em; // Heading letter spacing
+$lxd-text-heading-space-after: 0.5em; // Aire bajo un título, en em: escala con su tamaño (nivel, size o superficie). Se anula si el título es el último hijo
+$lxd-text-h1-font-family: "Google Sans Flex", system-ui, sans-serif; // H1 font family
+$lxd-text-h1-font-size: 2.5rem; // H1 font size — paso 8 de la escala (40px en base, un peldaño más en la superficie pública)
+$lxd-text-h1-font-weight: 500; // H1 font weight
+$lxd-text-h1-line-height: 1.1; // H1 line height
+$lxd-text-h1-color: #111e30; // H1 color
+$lxd-text-h1-letter-spacing: -0.02em; // H1 letter spacing
+$lxd-text-h2-font-family: "Google Sans Flex", system-ui, sans-serif; // H2 font family
+$lxd-text-h2-font-size: 2rem; // H2 font size — paso 7 de la escala (32px en base, un peldaño más en la superficie pública)
+$lxd-text-h2-font-weight: 500; // H2 font weight
+$lxd-text-h2-line-height: 1.1; // H2 line height
+$lxd-text-h2-color: #111e30; // H2 color
+$lxd-text-h2-letter-spacing: -0.02em; // H2 letter spacing
+$lxd-text-h3-font-family: "Google Sans Flex", system-ui, sans-serif; // H3 font family
+$lxd-text-h3-font-size: 1.75rem; // H3 font size — paso 6 de la escala (28px en base, un peldaño más en la superficie pública)
+$lxd-text-h3-font-weight: 500; // H3 font weight
+$lxd-text-h3-line-height: 1.1; // H3 line height
+$lxd-text-h3-color: #111e30; // H3 color
+$lxd-text-h3-letter-spacing: -0.02em; // H3 letter spacing
+$lxd-text-h4-font-family: "Google Sans Flex", system-ui, sans-serif; // H4 font family
+$lxd-text-h4-font-size: 1.5rem; // H4 font size — paso 5 de la escala (24px en base, un peldaño más en la superficie pública)
+$lxd-text-h4-font-weight: 500; // H4 font weight
+$lxd-text-h4-line-height: 1.3; // H4 line height
+$lxd-text-h4-color: #111e30; // H4 color
+$lxd-text-h4-letter-spacing: -0.02em; // H4 letter spacing
+$lxd-text-h5-font-family: "Google Sans Flex", system-ui, sans-serif; // H5 font family
+$lxd-text-h5-font-size: 1.25rem; // H5 font size — paso 4 de la escala (20px en base, un peldaño más en la superficie pública)
+$lxd-text-h5-font-weight: 500; // H5 font weight
+$lxd-text-h5-line-height: 1.3; // H5 line height
+$lxd-text-h5-color: #111e30; // H5 color
+$lxd-text-h5-letter-spacing: 0em; // H5 letter spacing
+$lxd-text-h6-font-family: "Google Sans Flex", system-ui, sans-serif; // H6 font family
+$lxd-text-h6-font-size: 1rem; // H6 font size — paso 3 de la escala (16px en base, un peldaño más en la superficie pública)
+$lxd-text-h6-font-weight: 500; // H6 font weight
+$lxd-text-h6-line-height: 1.3; // H6 line height
+$lxd-text-h6-color: #111e30; // H6 color
+$lxd-text-h6-letter-spacing: 0em; // H6 letter spacing
+$lxd-text-paragraph-small-font-size: 0.875rem; // Párrafo pequeño: un peldaño por debajo del cuerpo (14px en base, 16px en la superficie pública)
+$lxd-text-paragraph-small-line-height: 1.65; // Small paragraph line height
+$lxd-text-paragraph-large-font-size: 1.25rem; // Párrafo grande: un peldaño por encima del cuerpo (20px en base, 24px en la superficie pública)
+$lxd-text-paragraph-large-line-height: 1.3; // Large paragraph line height
+$lxd-text-list-font-family: "Google Sans Flex", system-ui, sans-serif; // List font family
+$lxd-text-list-font-size: 1rem; // List font size
+$lxd-text-list-font-weight: 300; // List font weight
+$lxd-text-list-line-height: 1.5; // List line height
+$lxd-text-list-color: #111e30; // List text color
+$lxd-text-list-letter-spacing: 0em; // List letter spacing
+$lxd-text-list-gap: 0.5rem; // Spacing between list items (8px)
+$lxd-text-list-padding-inline-start: 2rem; // Left indent for list (32px)

package/src/tokens/scss/components/_textarea.scss

@@ -0,0 +1,54 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-textarea-border-radius: 0px; // Border radius
+$lxd-textarea-border-width: 1px; // Border width
+$lxd-textarea-border-style: solid; // Border style
+$lxd-textarea-width: 100%; // Textarea is always full width
+$lxd-textarea-padding-block: 1rem; // Block (vertical) padding
+$lxd-textarea-padding-inline: 1rem; // Inline (horizontal) padding
+$lxd-textarea-font-family: "Google Sans Flex", system-ui, sans-serif; // Font family
+$lxd-textarea-font-size: 1rem; // Font size
+$lxd-textarea-font-weight: 300; // Font weight
+$lxd-textarea-line-height: 1.5; // Line height
+$lxd-textarea-rows: 4; // Líneas de texto que mide el campo por defecto. Cuatro: dos no se distinguen de un campo de una línea y cinco ya ocupa media pantalla en móvil. De aquí sale `min-height`
+$lxd-textarea-min-height: calc(4 * 1.5 * 1rem + 2 * 1rem + 2 * 1px); // Altura mínima: `rows` líneas de texto (rows × interlineado × cuerpo) más el aire de arriba y abajo y los dos bordes. Con la talla md, 130px
+$lxd-textarea-resize: vertical; // Resize direction
+$lxd-textarea-cursor: text; // Cursor
+$lxd-textarea-transition-duration: 150ms; // Transition duration
+$lxd-textarea-transition-easing: ease; // Transition easing
+$lxd-textarea-bg: #ffffff; // Background
+$lxd-textarea-color: #111e30; // Text color
+$lxd-textarea-border-color: #111e30; // Border color
+$lxd-textarea-placeholder-color: #4a4a4a; // Placeholder: el gris de placeholder del sistema, para que un campo vacío no parezca relleno
+$lxd-textarea-focus-border-color: #111e30; // Border color on focus
+$lxd-textarea-focus-ring-width: 2px; // Focus ring width
+$lxd-textarea-focus-ring-inset-offset: 1px; // Gap between border and focus ring
+$lxd-textarea-focus-ring-color: #111e30; // Focus ring color
+$lxd-textarea-disabled-cursor: not-allowed; // Cursor when disabled
+$lxd-textarea-disabled-bg: #f2f2f2; // Background when disabled
+$lxd-textarea-disabled-color: #4a4a4a; // Text color when disabled
+$lxd-textarea-disabled-border-color: #d0d0d0; // Border color when disabled
+$lxd-textarea-error-bg: #ffffff; // Error background
+$lxd-textarea-error-color: #111e30; // Error text color
+$lxd-textarea-error-border-color: #b30000; // Borde en error: el color de error (excepción a «bordes en prusia»)
+$lxd-textarea-error-placeholder-color: #4a4a4a; // Placeholder en error: el mismo gris
+$lxd-textarea-error-focus-border-color: #b30000; // Borde en foco+error
+$lxd-textarea-error-focus-ring-color: #b30000; // Error focus ring color
+$lxd-textarea-sm-padding-block: 0.5rem; // Block padding — variante sm
+$lxd-textarea-sm-padding-inline: 0.75rem; // Inline padding — variante sm
+$lxd-textarea-sm-font-size: 0.875rem; // Font size — variante sm (14px)
+$lxd-textarea-sm-min-height: calc(4 * 1.5 * 0.875rem + 2 * 0.5rem + 2 * 1px); // Altura mínima — sm: la misma fórmula con el cuerpo y el aire de la talla (102px)
+$lxd-textarea-lg-padding-block: 1.5rem; // Block padding — variante lg
+$lxd-textarea-lg-padding-inline: 1.5rem; // Inline padding — variante lg
+$lxd-textarea-lg-font-size: 1.25rem; // Font size — variante lg (20px)
+$lxd-textarea-bare-bg: rgba(0, 0, 0, 0); // Fondo — variante `bare`: el campo no pinta caja, la pinta el contenedor que lo enmarca
+$lxd-textarea-bare-border-color: rgba(0, 0, 0, 0); // Borde — variante `bare`: sin contorno propio
+$lxd-textarea-bare-min-height: auto; // Altura mínima — variante `bare`: la manda el contenido (`rows`), no la fórmula de la talla
+$lxd-textarea-bare-padding-block: 0; // Aire vertical — variante `bare`: lo pone el contenedor
+$lxd-textarea-bare-padding-inline: 0; // Aire horizontal — variante `bare`: lo pone el contenedor
+$lxd-textarea-bare-focus-ring-width: 0; // Anillo de foco — variante `bare`: no lo dibuja el campo; el contenedor lo dibuja con `:focus-within`
+$lxd-textarea-bare-disabled-bg: rgba(0, 0, 0, 0); // Fondo deshabilitado — variante `bare`: el gris de deshabilitado lo pinta el contenedor, no el campo
+$lxd-textarea-bare-disabled-border-color: rgba(0, 0, 0, 0); // Borde deshabilitado — variante `bare`
+$lxd-textarea-bare-resize: none; // Redimensionado — variante `bare`: el asa rompería la caja del contenedor
+$lxd-textarea-lg-min-height: calc(4 * 1.5 * 1.25rem + 2 * 1.5rem + 2 * 1px); // Altura mínima — lg: la misma fórmula con el cuerpo y el aire de la talla (170px)

package/src/tokens/scss/components/_time-select.scss

@@ -0,0 +1,7 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-time-select-gap: 0.25rem; // Espacio entre selector de horas, separador y selector de minutos
+$lxd-time-select-sep-font-family: "Google Sans Flex", system-ui, sans-serif; // Familia tipográfica del separador «:»
+$lxd-time-select-sep-line-height: 1; // Interlineado del separador «:»: sin holgura, para que quede a la altura de los desplegables
+$lxd-time-select-sep-color: #111e30; // Color del separador :

package/src/tokens/scss/components/_toggle-group.scss

@@ -0,0 +1,4 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-toggle-group-gap: 0.5rem; // Separación entre los botones del grupo

package/src/tokens/scss/components/_toggle.scss

@@ -0,0 +1,34 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-toggle-height: 2.5rem; // Altura del botón (talla md)
+$lxd-toggle-sm-height: 2rem; // Altura — talla sm
+$lxd-toggle-lg-height: 3rem; // Altura — talla lg
+$lxd-toggle-padding-inline: 1.5rem; // Padding inline
+$lxd-toggle-sm-padding-inline: 1rem; // Padding inline — talla sm
+$lxd-toggle-lg-padding-inline: 2rem; // Padding inline — talla lg
+$lxd-toggle-gap: 0.5rem; // Separación entre el icono y el texto
+$lxd-toggle-font-family: "Google Sans Flex", system-ui, sans-serif; // Familia tipográfica
+$lxd-toggle-font-size: 1rem; // Tamaño de fuente
+$lxd-toggle-sm-font-size: 0.875rem; // Tamaño de fuente — talla sm
+$lxd-toggle-lg-font-size: 1.25rem; // Tamaño de fuente — talla lg
+$lxd-toggle-font-weight: 300; // Peso tipográfico
+$lxd-toggle-line-height: 1; // Interlineado
+$lxd-toggle-border-width: 1px; // Grosor del borde
+$lxd-toggle-border-style: solid; // Estilo del borde
+$lxd-toggle-border-radius: 0px; // Radio del borde (recto, como el resto de controles)
+$lxd-toggle-border-color: #6b6b6b; // Borde sin pulsar. Es el contorno de un control, no un divisor: el gris de bordes se queda en 1.54:1 sobre blanco y WCAG 1.4.11 pide 3:1. El gris de acción secundaria cumple y deja sitio al paso de hover, que sí es prusia
+$lxd-toggle-bg: rgba(0, 0, 0, 0); // Fondo sin pulsar: ninguno. El relleno es lo que dice que el valor está elegido
+$lxd-toggle-color: #111e30; // Texto sin pulsar
+$lxd-toggle-hover-border-color: #111e30; // Borde al pasar el ratón — el hover no pone fondo, solo marca el borde
+$lxd-toggle-pressed-bg: #111e30; // Fondo pulsado: el valor elegido
+$lxd-toggle-pressed-color: #ffffff; // Texto pulsado
+$lxd-toggle-pressed-border-color: #111e30; // Borde pulsado
+$lxd-toggle-cursor: pointer; // Cursor
+$lxd-toggle-disabled-cursor: not-allowed; // Cursor cuando está deshabilitado
+$lxd-toggle-disabled-opacity: 0.4; // Opacidad cuando está deshabilitado
+$lxd-toggle-transition-duration: 150ms; // Duración de la transición
+$lxd-toggle-transition-easing: ease; // Easing de la transición
+$lxd-toggle-focus-ring-width: 2px; // Grosor del anillo de foco
+$lxd-toggle-focus-ring-offset: 0.25rem; // Separación del anillo de foco
+$lxd-toggle-focus-ring-color: #111e30; // Color del anillo de foco

package/src/tokens/scss/components/_tooltip.scss

@@ -0,0 +1,16 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-tooltip-bg: #111e30; // Fondo del bocadillo — superficie invertida para máximo contraste
+$lxd-tooltip-color: #ffffff; // Color del texto del bocadillo
+$lxd-tooltip-border-radius: 0px; // Radio de esquinas del bocadillo
+$lxd-tooltip-padding-block: 0.25rem; // Padding vertical del bocadillo
+$lxd-tooltip-padding-inline: 0.5rem; // Padding horizontal del bocadillo
+$lxd-tooltip-font-family: "Google Sans Flex", system-ui, sans-serif; // Tipografía del bocadillo
+$lxd-tooltip-font-size: 0.875rem; // Tamaño de texto del bocadillo
+$lxd-tooltip-line-height: 1.3; // Interlineado del bocadillo
+$lxd-tooltip-offset: 0.25rem; // Separación entre disparador y bocadillo (4px). Fuente del sideOffset por defecto
+$lxd-tooltip-max-width: 20rem; // Ancho máximo antes de romper línea
+$lxd-tooltip-z-index: 400; // Capa z — la misma que el resto de paneles flotantes
+$lxd-tooltip-transition-duration: 150ms; // Duración de la animación de entrada/salida
+$lxd-tooltip-transition-easing: ease; // Easing de la animación

package/src/tokens/scss/components/_typing-indicator.scss

@@ -0,0 +1,11 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-typing-indicator-dot-size: 0.375rem; // Lado de cada punto cuadrado (6px)
+$lxd-typing-indicator-dot-gap: 0.25rem; // Separación entre puntos
+$lxd-typing-indicator-dot-color: #111e30; // Color de los puntos
+$lxd-typing-indicator-dot-opacity-inactive: 0.4; // Opacidad del punto en reposo
+$lxd-typing-indicator-dot-opacity-active: 1; // Opacidad del punto en lo alto del salto
+$lxd-typing-indicator-dot-rise: 0.25rem; // Cuánto sube el punto en lo alto del salto (4px): una fracción del propio punto, no un desplazamiento de maqueta
+$lxd-typing-indicator-animation-duration: 400ms; // Duración del ciclo de animación
+$lxd-typing-indicator-animation-easing: ease-in-out; // Curva del salto: movimiento