@studiolxd/brand 38.12.4

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

@@ -0,0 +1,37 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-sidebar-nav-gap: 0.25rem; // Gap entre grupos
+$lxd-sidebar-nav-group-trigger-padding-block: 0.5rem; // Padding vertical del trigger de grupo
+$lxd-sidebar-nav-group-trigger-padding-inline: 0.75rem; // Padding horizontal del trigger de grupo
+$lxd-sidebar-nav-group-trigger-gap: 0.5rem; // Gap entre texto y chevron del grupo
+$lxd-sidebar-nav-group-label-font-size: 1rem; // Tamaño de texto de etiqueta de grupo
+$lxd-sidebar-nav-group-label-font-weight: 500; // Peso del texto de etiqueta de grupo
+$lxd-sidebar-nav-group-label-color: #111e30; // Color de la etiqueta de grupo
+$lxd-sidebar-nav-item-padding-block: 0.5rem; // Padding vertical de cada ítem
+$lxd-sidebar-nav-item-padding-inline: 1rem; // Padding horizontal de cada ítem
+$lxd-sidebar-nav-item-padding-inline-start: calc(0.75rem + 2rem + 0.5rem); // Sangría de los ítems: alineados con el texto de la cabecera de su grupo (aire + icono + gap)
+$lxd-sidebar-nav-item-border-radius: 0px; // Radio de cada ítem
+$lxd-sidebar-nav-item-font-size: 1rem; // Tamaño de texto de ítems
+$lxd-sidebar-nav-item-font-weight: 300; // Peso de ítems
+$lxd-sidebar-nav-item-line-height: 1.3; // Interlineado de ítems
+$lxd-sidebar-nav-item-color: #111e30; // Color de ítems
+$lxd-sidebar-nav-item-active-color: #111e30; // Color de ítem activo
+$lxd-sidebar-nav-item-active-font-weight: 500; // Peso de ítem activo
+$lxd-sidebar-nav-focus-ring-color: #111e30; // Color del focus ring
+$lxd-sidebar-nav-focus-ring-width: 2px; // Grosor del anillo de foco
+$lxd-sidebar-nav-item-gap: 0.25rem; // Gap entre ítems dentro de un grupo
+$lxd-sidebar-nav-rail-item-size: 2.5rem; // En rail cada entrada es un cuadrado a talla md, como un botón de icono
+$lxd-sidebar-nav-rail-active-bar-width: 2px; // Barra al borde que marca la sección activa en rail
+$lxd-sidebar-nav-item-icon-size: 2rem; // Icono de ítem: talla sm del sistema
+$lxd-sidebar-nav-item-icon-gap: 0.5rem; // Gap entre icono y texto del ítem
+$lxd-sidebar-nav-transition-duration: 150ms; // Duración de transición de ítems
+$lxd-sidebar-nav-transition-easing: ease-in-out; // Easing de transición de ítems
+$lxd-sidebar-nav-group-transition-duration: 150ms; // Duración de la animación de apertura/cierre de grupo
+$lxd-sidebar-nav-group-transition-easing: ease-in-out; // Easing de la animación de apertura/cierre de grupo
+$lxd-sidebar-nav-item-empty-color: #4a4a4a; // Tinta de una entrada vacía: sigue leyéndose, pero no invita a pulsarla
+$lxd-sidebar-nav-item-empty-cursor: not-allowed; // Cursor de una entrada vacía
+$lxd-sidebar-nav-item-empty-mark-font-size: 0.875rem; // Tamaño de la marca «sin docs»
+$lxd-sidebar-nav-item-empty-mark-color: #4a4a4a; // Tinta de la marca «sin docs»
+$lxd-sidebar-nav-item-hover-line-width: 1px; // Grosor de la línea que marca el ítem bajo el puntero. El hover no pinta relleno (regla de Colores): deja una línea de tinta bajo el ítem, el mismo grafismo del subrayado de `Link`
+$lxd-sidebar-nav-item-hover-line-color: #111e30; // Color de la línea de hover — tinta de la superficie

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

@@ -0,0 +1,18 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-site-nav-group-gap: 2rem; // Separación entre grupos: entre columnas en escritorio, entre bloques en móvil
+$lxd-site-nav-columns-max: 5; // Tope de columnas en el breakpoint ancho: a partir de ahí el panel no sigue ensanchando columnas por grupo
+$lxd-site-nav-label-margin-block-end: 1rem; // Aire entre la cabecera y sus enlaces: un paso más que entre enlaces, que la cabecera no se pegue al primero
+$lxd-site-nav-item-gap: 0.75rem; // Separación entre enlaces de un grupo
+$lxd-site-nav-item-font-size: 1.5rem; // Enlaces: un punto por debajo de la cabecera del grupo (Heading talla 6 = font-size.5)
+$lxd-site-nav-item-font-weight: 300; // Enlaces
+$lxd-site-nav-item-line-height: 1.3; // Enlaces
+$lxd-site-nav-item-color: #111e30; // Enlaces
+$lxd-site-nav-item-hover-color: #111e30; // Enlaces en hover: en claro no cambia el color, aparece la línea
+$lxd-site-nav-item-underline-offset: 2px; // Separación entre el texto y la línea de hover (2px, más pegada que en los enlaces de texto). Se reserva siempre: la línea no desplaza nada al aparecer
+$lxd-site-nav-item-hover-line-width: 1px; // Enlaces en hover: la línea bajo el enlace (como los enlaces de texto), en claro
+$lxd-site-nav-item-current-font-weight: 300; // Página actual: mismo peso que el resto (la marca aria-current y, si hace falta, el producto la resalta)
+$lxd-site-nav-focus-ring-width: 2px; // Anillo de foco
+$lxd-site-nav-focus-ring-offset: 2px; // Separación del anillo de foco
+$lxd-site-nav-focus-ring-color: #111e30; // Anillo de foco

package/src/tokens/scss/molecules/_stat-tile.scss

@@ -0,0 +1,32 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-stat-tile-padding-inline: 1rem; // Padding horizontal — el de las superficies del sistema
+$lxd-stat-tile-padding-block-start: 1rem; // Padding superior — el de las superficies del sistema
+$lxd-stat-tile-padding-block-end: 0.75rem; // Padding inferior — el de las superficies del sistema
+$lxd-stat-tile-border-radius: 0px; // Radio de esquinas — el de las superficies del sistema
+$lxd-stat-tile-border-width: 1px; // Grosor del borde — el de Card outline
+$lxd-stat-tile-border-color: #111e30; // Color del borde — el de Card outline: tinta, no gris
+$lxd-stat-tile-bg: rgba(0, 0, 0, 0); // Fondo: ninguno. La cifra se lee sobre el lienzo de la página, así que la baldosa funciona igual en las dos superficies sin un fondo propio que mantener
+$lxd-stat-tile-gap: 0.5rem; // Aire entre las piezas de la baldosa: etiqueta, cifra, delta y descripción
+$lxd-stat-tile-label-font-size: 0.875rem; // Cuerpo de la etiqueta: un peldaño por debajo, porque la protagonista es la cifra
+$lxd-stat-tile-label-font-weight: 300; // Peso de la etiqueta
+$lxd-stat-tile-label-color: #4a4a4a; // Color de la etiqueta — atenuado
+$lxd-stat-tile-label-gap: 0.5rem; // Aire entre el icono y la etiqueta
+$lxd-stat-tile-icon-size: 24px; // Talla del icono de la baldosa
+$lxd-stat-tile-icon-color: #4a4a4a; // Color del icono — atenuado, como la etiqueta a la que acompaña
+$lxd-stat-tile-value-font-size: 2rem; // Cuerpo de la cifra: paso 7 de la escala de títulos, el mismo que un h2. Sube un peldaño en la superficie pública
+$lxd-stat-tile-value-font-weight: 500; // Peso de la cifra
+$lxd-stat-tile-value-line-height: 1.1; // Interlineado de la cifra
+$lxd-stat-tile-value-letter-spacing: -0.02em; // Espaciado de la cifra — el de los títulos
+$lxd-stat-tile-value-color: #111e30; // Color de la cifra — tinta de la superficie
+$lxd-stat-tile-sm-value-font-size: 1.5rem; // Cuerpo de la cifra — talla sm: paso 5 de la escala, el de un h4
+$lxd-stat-tile-sm-padding-inline: 0.75rem; // Padding horizontal — talla sm
+$lxd-stat-tile-sm-padding-block: 0.75rem; // Padding vertical — talla sm
+$lxd-stat-tile-sm-label-font-size: 0.875rem; // Cuerpo de la etiqueta — talla sm
+$lxd-stat-tile-sm-gap: 0.25rem; // Aire entre piezas — talla sm
+$lxd-stat-tile-delta-gap: 0.25rem; // Aire entre la flecha de tendencia y su cifra dentro del delta
+$lxd-stat-tile-delta-icon-size: 16px; // Talla de la flecha de tendencia
+$lxd-stat-tile-description-font-size: 0.875rem; // Cuerpo de la descripción
+$lxd-stat-tile-description-line-height: 1.5; // Interlineado de la descripción
+$lxd-stat-tile-description-color: #4a4a4a; // Color de la descripción — atenuado

package/src/tokens/scss/molecules/_stepper.scss

@@ -0,0 +1,26 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-stepper-gap: 1rem; // Aire entre pasos en la forma horizontal
+$lxd-stepper-item-gap: 0.5rem; // Aire entre la marca del paso (`StepMarker`) y su etiqueta
+$lxd-stepper-text-gap: 0.25rem; // Aire entre la etiqueta del paso y su línea de detalle
+$lxd-stepper-padding-block: 0.25rem; // Aire vertical de cada paso: deja sitio al anillo de foco del paso alcanzable
+$lxd-stepper-font-family: "Google Sans Flex", system-ui, sans-serif; // Tipografía de las etiquetas
+$lxd-stepper-font-size: 0.875rem; // 14px — etiqueta de interfaz, no texto corriente
+$lxd-stepper-font-weight: 300; // Peso de la etiqueta de un paso
+$lxd-stepper-line-height: 1.3; // Interlineado de la etiqueta: cabe en dos líneas sin apelmazarse
+$lxd-stepper-current-font-weight: 500; // Peso de la etiqueta del paso actual: el énfasis dice dónde está el usuario sin depender del color. Es la segunda señal del estado y por eso solo lo lleva la etiqueta — la cifra de la marca va en peso de cuerpo (`step.font-weight`), porque dentro de un círculo relleno el peso no señala nada
+$lxd-stepper-label-color: #111e30; // Etiqueta de un paso completado o actual
+$lxd-stepper-pending-color: #4a4a4a; // Etiqueta de un paso pendiente: texto secundario
+$lxd-stepper-description-font-size: 0.75rem; // 12px — la línea de detalle bajo la etiqueta
+$lxd-stepper-description-color: #4a4a4a; // Línea de detalle: texto secundario
+$lxd-stepper-label-hover-line-width: 1px; // Grosor de la línea bajo la etiqueta de un paso navegable con el puntero encima. Todo subrayado del DS es una línea de 1px, el grosor único del sistema. Apunta al rol de borde y no al grosor de subrayado de `Link` porque ese token vale 0 en superficie oscura —el enlace no lleva línea en reposo sobre prusia— y arrastrarlo borraría esta línea, que sí es de hover
+$lxd-stepper-label-hover-line-offset: 0.25rem; // Separación entre la etiqueta y su línea de hover. La reserva el sitio siempre, aunque la línea solo se pinte en hover: si el hueco apareciese al pasar el puntero, la línea de detalle de debajo daría un salto
+$lxd-stepper-compact-gap: 0.5rem; // Aire entre el contador («Paso 2 de 4») y la etiqueta del paso actual en la forma compacta
+$lxd-stepper-compact-font-size: 0.875rem; // 14px — la forma compacta es una etiqueta de interfaz
+$lxd-stepper-compact-count-font-weight: 500; // Peso del contador de la forma compacta
+$lxd-stepper-compact-color: #111e30; // Color del contador de la forma compacta
+$lxd-stepper-compact-label-color: #4a4a4a; // Color de la etiqueta del paso actual en la forma compacta
+$lxd-stepper-focus-ring-color: #111e30; // Anillo de foco del paso alcanzable
+$lxd-stepper-focus-ring-width: 2px; // Grosor del anillo de foco
+$lxd-stepper-focus-ring-offset: 2px; // Separación del anillo de foco

package/src/tokens/scss/molecules/_steps.scss

@@ -0,0 +1,8 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-steps-gap: 1.5rem; // Aire entre pasos
+$lxd-steps-marker-gap: 1rem; // Aire entre la marca (`StepMarker`) y el texto del paso
+$lxd-steps-body-gap: 0.5rem; // Aire entre el título del paso y su descripción
+$lxd-steps-title-gap: 0.5rem; // Aire entre el icono y el título del paso
+$lxd-steps-column-min-size: 12rem; // Ancho mínimo de una columna en horizontal: por debajo, los pasos se apilan

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

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

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

@@ -0,0 +1,27 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-table-of-contents-gap: 0.25rem; // Aire entre dos entradas del índice
+$lxd-table-of-contents-title-font-size: 0.875rem; // Tamaño del rótulo del índice («En esta página»)
+$lxd-table-of-contents-title-font-weight: 500; // Peso del rótulo del índice
+$lxd-table-of-contents-title-color: #4a4a4a; // Color del rótulo del índice — atenuado: rotula, no compite con las entradas
+$lxd-table-of-contents-title-space-after: 0.75rem; // Aire entre el rótulo y la primera entrada
+$lxd-table-of-contents-item-font-size: 0.875rem; // Cuerpo de una entrada: un peldaño por debajo del texto que indexa
+$lxd-table-of-contents-item-line-height: 1.3; // Interlineado de una entrada, para los títulos que ocupan dos líneas
+$lxd-table-of-contents-item-color: #111e30; // Color de una entrada — tinta de la superficie
+$lxd-table-of-contents-item-padding-block: 0.25rem; // Padding vertical de una entrada: agranda el área de pulsación sin separar la lista
+$lxd-table-of-contents-item-padding-inline-start: 0.75rem; // Sangría base de una entrada, que deja sitio a la barra de la entrada actual
+$lxd-table-of-contents-item-indent: 0.75rem; // Sangría que suma cada nivel de profundidad respecto al título más alto del índice
+$lxd-table-of-contents-item-hover-line-width: 1px; // Grosor de la línea que marca la entrada bajo el puntero. El hover no pinta relleno (regla de Colores): línea de tinta bajo la entrada, como en SidebarNav
+$lxd-table-of-contents-item-hover-line-color: #111e30; // Color de la línea de hover — tinta de la superficie
+$lxd-table-of-contents-item-active-color: #111e30; // Color de la entrada actual
+$lxd-table-of-contents-item-active-font-weight: 500; // Peso de la entrada actual: lo actual persiste, así que se dice con peso y barra, nunca con relleno
+$lxd-table-of-contents-item-active-marker-width: 2px; // Grosor de la barra al borde de inicio que marca la sección en la que estás
+$lxd-table-of-contents-item-active-marker-color: #111e30; // Color de la barra de la entrada actual — tinta de la superficie
+$lxd-table-of-contents-focus-ring-width: 2px; // Grosor del anillo de foco de una entrada
+$lxd-table-of-contents-focus-ring-offset: 1px; // Separación del anillo de foco
+$lxd-table-of-contents-focus-ring-color: #111e30; // Color del anillo de foco
+$lxd-table-of-contents-sticky-offset: 1.5rem; // Distancia al borde superior cuando el índice queda fijo (`sticky`). El consumidor la sube si tiene una cabecera fija más alta
+$lxd-table-of-contents-sticky-max-block-size: calc(100vh - (2 * 1.5rem)); // Alto máximo del índice fijo: el alto de la ventana menos su aire arriba y abajo. Un índice largo scrollea dentro
+$lxd-table-of-contents-transition-duration: 150ms; // Duración de la transición de hover
+$lxd-table-of-contents-transition-easing: ease; // Easing de la transición de hover

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

@@ -0,0 +1,40 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-table-font-family: "Google Sans Flex", system-ui, sans-serif; // Font family
+$lxd-table-font-size: 1rem; // Las celdas heredan el cuerpo de la superficie (16px en aplicación, 20px en la pública)
+$lxd-table-font-weight: 300; // Font weight base
+$lxd-table-line-height: 1.5; // Interlineado heredado del cuerpo de la superficie, para celdas multilínea
+$lxd-table-color: #111e30; // Color de texto base
+$lxd-table-bg: rgba(0, 0, 0, 0); // Fondo de la tabla
+$lxd-table-border-width: 1px; // Grosor de separadores de fila
+$lxd-table-header-padding-block: 0.75rem; // Padding block del encabezado
+$lxd-table-header-padding-inline: 0.75rem; // Padding inline del encabezado
+$lxd-table-header-font-weight: 500; // Peso tipográfico del encabezado
+$lxd-table-header-border-width: 1px; // Borde inferior del thead — 1px, como todo borde del sistema; la cabecera se lee por peso, no por grosor
+$lxd-table-header-content-gap: 0.5rem; // Separación entre el rótulo de la columna y el icono de ordenación
+$lxd-table-header-border-color: #111e30; // Color del borde inferior del thead
+$lxd-table-sort-icon-color: #4a4a4a; // Icono de ordenación en reposo, tinta plana; el hover lo lleva al color activo
+$lxd-table-sort-icon-active-color: #111e30; // Color del icono de sort activo
+$lxd-table-cell-padding-block: 0.75rem; // Padding block de celda
+$lxd-table-cell-padding-inline: 0.75rem; // Padding inline de celda
+$lxd-table-row-border-color: #111e30; // Color del separador entre filas
+$lxd-table-row-selected-color: #111e30; // Tinta de la fila seleccionada: la selección se dice con tinta y peso, no con un fondo gris
+$lxd-table-row-hover-marker-width: 2px; // Grosor de la barra que marca la fila bajo el puntero. El hover no pinta relleno (regla de Colores): la fila se señala con una barra de tinta en su borde de inicio, el mismo grafismo que la sección activa del SidebarNav en rail
+$lxd-table-row-hover-marker-color: #111e30; // Color de la barra de hover — tinta de la superficie
+$lxd-table-row-selected-font-weight: 500; // Peso de la fila seleccionada
+$lxd-table-sticky-bg: #ffffff; // Fondo de la columna de acciones pegajosa (cabecera y celda): opaco, para tapar el resto de columnas que se deslizan debajo al hacer scroll horizontal
+$lxd-table-footer-bg: #f2f2f2; // Fondo del tfoot: superficie clara secundaria, no un fondo de estado
+$lxd-table-footer-border-width: 1px; // Borde superior del tfoot — 1px, como el del thead
+$lxd-table-footer-border-color: #111e30; // Color del borde superior del tfoot
+$lxd-table-footer-font-weight: 500; // Peso tipográfico de las celdas del footer
+$lxd-table-focus-ring-color: #111e30; // Color del focus ring
+$lxd-table-focus-ring-width: 2px; // Grosor del focus ring
+$lxd-table-focus-ring-offset: 1px; // Separación del focus ring
+$lxd-table-transition-duration: 150ms; // Duración de transiciones de hover
+$lxd-table-transition-easing: ease; // Easing de transiciones
+$lxd-table-sm-font-size: 0.875rem; // 14px — UI label size — variante sm
+$lxd-table-sm-header-padding-block: 0.5rem; // Padding block del encabezado — variante sm
+$lxd-table-sm-header-padding-inline: 0.5rem; // Padding inline del encabezado — variante sm
+$lxd-table-sm-cell-padding-block: 0.5rem; // Padding block de celda — variante sm
+$lxd-table-sm-cell-padding-inline: 0.5rem; // Padding inline de celda — variante sm

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

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

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

@@ -0,0 +1,10 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-theme-switcher-icon-gap: 0.5rem; // Entre el icono del tema y su nombre, en el menú y en la lista
+$lxd-theme-switcher-list-gap: 1rem; // Separación entre temas en la lista desplegada
+$lxd-theme-switcher-list-font-size: 1rem; // Temas en la lista
+$lxd-theme-switcher-list-current-font-weight: 500; // Tema actual en la lista: solo cambia el peso
+$lxd-theme-switcher-focus-ring-width: 2px; // Anillo de foco
+$lxd-theme-switcher-focus-ring-offset: 2px; // Separación del anillo de foco
+$lxd-theme-switcher-focus-ring-color: #111e30; // Anillo de foco

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

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

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

@@ -0,0 +1,14 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-toast-z-index: 500; // Capa de la pila — `toast` (500): por encima de modales y paneles flotantes
+$lxd-toast-max-width: 360px; // Ancho máximo de la pila. En pantallas estrechas cede al ancho de la ventana menos el aire lateral
+$lxd-toast-inset-block: 1.5rem; // Distancia de la pila al borde superior o inferior de la ventana (24px)
+$lxd-toast-inset-inline: 1.5rem; // Distancia de la pila al borde izquierdo o derecho de la ventana (24px)
+$lxd-toast-gap: 0.5rem; // Aire entre avisos cuando la pila está desplegada (8px). El `Toaster` lo puede sobreescribir con su prop `gap`
+$lxd-toast-stack-offset: 0.75rem; // Cuánto asoma cada aviso por detrás del de delante con la pila recogida (12px)
+$lxd-toast-stack-scale: 0.05; // Cuánto encoge cada aviso por peldaño de profundidad con la pila recogida (5%)
+$lxd-toast-enter-scale: 0.97; // Escala de la que entra y a la que sale el aviso: aparece un punto más pequeño y se va encogiendo
+$lxd-toast-duration-in: 250ms; // Duración de la entrada. Con `prefers-reduced-motion: reduce` vale 0ms y el aviso aparece sin animación
+$lxd-toast-duration-out: 250ms; // Duración de la salida. Con `prefers-reduced-motion: reduce` vale 0ms
+$lxd-toast-easing: ease-out; // Curva de entrada y salida — lo que aparece y desaparece frena al final

package/src/tokens/scss/molecules/_tree-view.scss

@@ -0,0 +1,34 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-tree-view-icon-size: 16px; // Tamaño de la marca (la carpeta) de cada fila
+$lxd-tree-view-indent: calc(16px + 0.5rem); // Sangría que gana cada nivel: exactamente lo que ocupa la marca de la fila padre más su hueco, de modo que el nivel de un hijo se lee contra el rótulo del padre
+$lxd-tree-view-row-gap: 0.5rem; // Separación entre el chevron, la marca y el rótulo — el hueco icono-texto del ítem de la barra
+$lxd-tree-view-row-padding-block: 0.5rem; // Aire vertical de cada fila — el del ítem de la barra
+$lxd-tree-view-row-padding-inline: 1rem; // Aire horizontal de cada fila — el del ítem de la barra
+$lxd-tree-view-row-border-radius: 0px; // Radio de la fila — el del ítem de la barra
+$lxd-tree-view-font-family: "Google Sans Flex", system-ui, sans-serif; // Familia tipográfica de las filas
+$lxd-tree-view-font-size: 1rem; // Tamaño de fuente de las filas — el del ítem de la barra
+$lxd-tree-view-font-weight: 300; // Peso de una fila cualquiera — el del ítem de la barra
+$lxd-tree-view-line-height: 1.3; // Interlineado de las filas — el del ítem de la barra
+$lxd-tree-view-color: #111e30; // Tinta de las filas — la del ítem de la barra
+$lxd-tree-view-selected-color: #111e30; // Tinta de la fila elegida: la MISMA tinta, no un acento. En la barra lateral solo el activo lleva color de marca; una carpeta elegida se marca únicamente con el peso
+$lxd-tree-view-selected-font-weight: 500; // Peso de la fila elegida — el del ítem activo de la barra
+$lxd-tree-view-chevron-size: 16px; // Tamaño del chevron que abre y cierra una rama
+$lxd-tree-view-chevron-color: #4a4a4a; // Tinta del chevron: atenuada, para que no compita con el rótulo
+$lxd-tree-view-actions-gap: 0.25rem; // Hueco entre el rótulo y las acciones de la fila
+$lxd-tree-view-drop-target-bg: #baabff; // Relleno de la carpeta que puede recibir lo que se arrastra: el acento de estado activo del sistema
+$lxd-tree-view-drop-target-color: #111e30; // Tinta sobre el relleno de destino. Es el par autocontenido de `Button primary`: se lee igual en claro y en oscuro, así que no lleva par `surface-dark-*`
+$lxd-tree-view-drop-target-border-width: 1px; // Grosor del borde discontinuo del destino de arrastre
+$lxd-tree-view-drop-target-border-style: dashed; // Estilo del borde del destino: discontinuo, el dibujo universal de «suéltalo aquí»
+$lxd-tree-view-drop-target-border-color: #111e30; // Color del borde discontinuo del destino de arrastre
+$lxd-tree-view-drop-disabled-opacity: 0.4; // Opacidad de una carpeta que NO puede recibir lo que se arrastra
+$lxd-tree-view-drop-disabled-cursor: not-allowed; // Cursor sobre una carpeta que no puede recibir lo que se arrastra
+$lxd-tree-view-cursor: pointer; // Cursor sobre una fila
+$lxd-tree-view-disabled-cursor: not-allowed; // Cursor de una fila deshabilitada
+$lxd-tree-view-disabled-opacity: 0.4; // Opacidad de una fila deshabilitada
+$lxd-tree-view-transition-duration: 150ms; // Duración del giro del chevron y de la aparición de las acciones
+$lxd-tree-view-transition-easing: ease; // Easing del giro del chevron y de la aparición de las acciones
+$lxd-tree-view-focus-ring-width: 2px; // Grosor del anillo de foco — el de la barra
+$lxd-tree-view-focus-ring-offset: 1px; // Separación del anillo de foco
+$lxd-tree-view-focus-ring-color: #111e30; // Color del anillo de foco — el de la barra

package/src/tokens/scss/molecules/_uptime-bars.scss

@@ -0,0 +1,25 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-uptime-bars-gap: 0.25rem; // 4px — hueco entre barritas. El ancho de la barrita no es un token: sale de repartir el contenedor entre los puntos de la serie
+$lxd-uptime-bars-bar-height: 2rem; // 32px — alto de la barrita. Es la única medida fija: el ancho lo pone el contenedor
+$lxd-uptime-bars-bar-radius: 0px; // Esquina recta, como todo el sistema
+$lxd-uptime-bars-bar-border-width: 1px; // Filete de contorno de la barrita. Mismo recurso que el relleno de ProgressBar: en superficie oscura los rellenos de feedback no llegan a 3:1 contra el lienzo, y WCAG 1.4.11 admite que sea el contorno quien identifique el elemento
+$lxd-uptime-bars-bar-border-color: #111e30; // Filete de la barrita en superficie clara: el prusia. Recuadra cada día —también el «sin dato»— y es quien identifica el tramo intermedio, cuyo relleno amarillo se queda en 1,50:1 contra el blanco
+$lxd-uptime-bars-ok-bg: #006616; // Tramo bueno — relleno sólido del rol success. Es un fondo, así que va el sufijo `-fill`
+$lxd-uptime-bars-degraded-bg: #ffcd00; // Tramo intermedio — relleno sólido del rol warning
+$lxd-uptime-bars-down-bg: #b30000; // Tramo malo — relleno sólido del rol error
+$lxd-uptime-bars-empty-bg: #f2f2f2; // Sin dato — superficie secundaria: no es un estado del servicio, es la ausencia de medida
+$lxd-uptime-bars-empty-pattern-color: #d0d0d0; // Rayas del «sin dato»: lo que distingue esa barrita de las demás sin depender del color
+$lxd-uptime-bars-empty-pattern-width: 2px; // 2px — grosor de cada raya del «sin dato»
+$lxd-uptime-bars-focus-ring-width: 2px; // Grosor del anillo de foco de la barrita
+$lxd-uptime-bars-focus-ring-offset: 2px; // Separación del anillo de foco. Es la del sistema encogida al hueco entre barritas: con 30 puntos a 375px el anillo se pisaría con el vecino
+$lxd-uptime-bars-focus-ring-color: #111e30; // Color del anillo de foco
+$lxd-uptime-bars-footer-gap: 0.5rem; // Aire entre la tira y la fila de pie (extremos y media)
+$lxd-uptime-bars-footer-font-size: 0.875rem; // Cuerpo del pie: letra menor, un peldaño por debajo del texto corriente
+$lxd-uptime-bars-footer-column-gap: 0.5rem; // Aire entre las tres celdas del pie
+$lxd-uptime-bars-edge-color: #111e30; // Etiquetas de los extremos — la tinta del sistema: acotan la tira y se leen igual que la media
+$lxd-uptime-bars-summary-color: #111e30; // La media — tinta del sistema: es el dato que se lee cuando no se miran las barritas
+$lxd-uptime-bars-summary-font-weight: 300; // Peso de la media: el del cuerpo. Es un dato que se lee, no un titular — lo que lo destaca es la tinta plena frente a los extremos, no el peso
+$lxd-uptime-bars-tooltip-gap: 0.25rem; // Aire entre la etiqueta y el detalle dentro del bocadillo
+$lxd-uptime-bars-tooltip-label-font-weight: 500; // Peso de la etiqueta del punto dentro del bocadillo

package/src/tokens/scss/molecules/_user-menu.scss

@@ -0,0 +1,53 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-user-menu-offset: 0.25rem; // Separación entre el disparador y el panel: el desplazamiento compartido de los flotantes de la cabecera
+$lxd-user-menu-trigger-padding-block: 0.5rem; // Padding vertical del trigger
+$lxd-user-menu-trigger-padding-inline: 0.75rem; // Padding horizontal del trigger
+$lxd-user-menu-trigger-compact-padding-inline: 0.25rem; // Padding horizontal del botón compacto (solo avatar)
+$lxd-user-menu-trigger-gap: 0.75rem; // Espacio entre avatar y nombre
+$lxd-user-menu-trigger-border-radius: 0px; // Radio del trigger
+$lxd-user-menu-focus-ring-color: #111e30; // Color del focus ring
+$lxd-user-menu-focus-ring-width: 2px; // Grosor del focus ring
+$lxd-user-menu-focus-ring-offset: 1px; // Separación del focus ring
+$lxd-user-menu-name-font-size: 1rem; // Tamaño de texto del nombre
+$lxd-user-menu-name-font-weight: 500; // Peso del nombre
+$lxd-user-menu-name-color: #111e30; // Color del nombre
+$lxd-user-menu-content-min-width: 14rem; // Ancho mínimo del panel: que quepan nombre y correo en una línea (no es una talla de componente)
+$lxd-user-menu-badge-offset: 0.25rem; // Cuánto asoma el badge de notificaciones por la esquina del avatar
+$lxd-user-menu-header-gap: 0.25rem; // Entre nombre y correo en la cabecera del panel
+$lxd-user-menu-content-bg: #ffffff; // Fondo del panel
+$lxd-user-menu-content-border-width: 1px; // Borde del panel
+$lxd-user-menu-content-border-color: #111e30; // Color del borde del panel
+$lxd-user-menu-content-border-radius: 0px; // Radio del panel
+$lxd-user-menu-content-shadow: none; // Sombra del panel
+$lxd-user-menu-content-z-index: 400; // Z-index del dropdown (por encima del sidebar en mobile)
+$lxd-user-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-user-menu-content-padding-block: 0.5rem; // Padding vertical del panel
+$lxd-user-menu-content-padding-inline: 0.5rem; // Padding horizontal del panel
+$lxd-user-menu-header-padding-block: 0.75rem; // Padding vertical de la cabecera del dropdown
+$lxd-user-menu-header-padding-inline: 1rem; // Padding horizontal de la cabecera del dropdown
+$lxd-user-menu-header-name-font-size: 1rem; // Tamaño del nombre en la cabecera
+$lxd-user-menu-header-name-font-weight: 500; // Peso del nombre en la cabecera
+$lxd-user-menu-header-name-color: #111e30; // Color del nombre en la cabecera
+$lxd-user-menu-header-email-font-size: 0.875rem; // Tamaño del email en la cabecera
+$lxd-user-menu-header-email-color: #4a4a4a; // Color del email en la cabecera
+$lxd-user-menu-item-padding-block: 0.5rem; // Padding vertical de cada ítem
+$lxd-user-menu-item-padding-inline: 1rem; // Padding horizontal de cada ítem
+$lxd-user-menu-item-icon-gap: 0.5rem; // Gap entre icono y texto del ítem
+$lxd-user-menu-item-border-radius: 0px; // Radio de cada ítem
+$lxd-user-menu-item-font-family: "Google Sans Flex", system-ui, sans-serif; // Tipografía de ítems
+$lxd-user-menu-item-font-size: 1rem; // Tamaño de texto de ítems
+$lxd-user-menu-item-font-weight: 300; // Peso de ítems
+$lxd-user-menu-item-color: #111e30; // Color de ítems
+$lxd-user-menu-item-highlighted-bg: #111e30; // Relleno del ítem resaltado — el del Menu: la inversión de marca
+$lxd-user-menu-item-highlighted-color: #ffffff; // Texto del ítem resaltado — el del Menu
+$lxd-user-menu-item-destructive-color: #b30000; // Color de ítem destructivo
+$lxd-user-menu-item-destructive-highlighted-bg: #b30000; // Relleno del ítem destructivo resaltado — el del Menu
+$lxd-user-menu-item-destructive-highlighted-color: #ffffff; // Texto del ítem destructivo resaltado — el del Menu
+$lxd-user-menu-separator-color: #111e30; // Color del separador — el de la línea del sistema
+$lxd-user-menu-separator-height: 1px; // Alto del separador — el grosor de la línea del sistema
+$lxd-user-menu-separator-margin-block: 0.5rem; // Margen vertical del separador — el aire md de la línea del sistema
+$lxd-user-menu-disabled-opacity: 0.4; // Opacidad de ítems deshabilitados
+$lxd-user-menu-transition-duration: 150ms; // Duración de transición
+$lxd-user-menu-transition-easing: ease; // Easing de transición

package/src/tokens/scss/molecules/_user-message.scss

@@ -0,0 +1,13 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-user-message-gap: 0.25rem; // Separación entre el nombre del autor, el globo y su marca de tiempo
+$lxd-user-message-author-font-family: "Google Sans Flex", system-ui, sans-serif; // Familia tipográfica del nombre del autor
+$lxd-user-message-author-font-size: 0.875rem; // Cuerpo del nombre del autor: un peldaño por debajo del texto de la superficie
+$lxd-user-message-author-font-weight: 300; // Peso del nombre del autor: discreto, a diferencia del nombre del modelo en `AssistantMessage` (que firma la respuesta con énfasis) — aquí el emisor ya lo dicen la alineación y la cola
+$lxd-user-message-author-color: #4a4a4a; // Tinta del nombre del autor: el gris de texto secundario del sistema, no `grey-dark` (que no es un color de texto)
+$lxd-user-message-author-padding-inline: 0.25rem; // Aire horizontal del nombre del autor
+$lxd-user-message-timestamp-font-family: "Google Sans Flex", system-ui, sans-serif; // Familia tipográfica de la marca de tiempo
+$lxd-user-message-timestamp-font-size: 0.875rem; // Cuerpo de la marca de tiempo: un peldaño por debajo del texto de la superficie
+$lxd-user-message-timestamp-color: #4a4a4a; // Tinta de la marca de tiempo: el gris de texto secundario del sistema, no `grey-dark` (que no es un color de texto)
+$lxd-user-message-timestamp-padding-inline: 0.25rem; // Aire horizontal de la marca de tiempo, para que no quede pegada al canto del globo

package/src/tokens/shadow.ts

@@ -0,0 +1,6 @@
+import scale from '../../tokens/shadow/scale.json';
+import { flattenTokens } from './utils';
+
+const all = flattenTokens(scale as never);
+export const shadowRoleTokens  = all.filter((t) => /-default$/.test(t.name));
+export const shadowScaleTokens = all.filter((t) => !/-default$/.test(t.name));

package/src/tokens/size.ts

@@ -0,0 +1,6 @@
+import component from '../../tokens/size/component.json';
+import target from '../../tokens/size/target.json';
+import { flattenTokens } from './utils';
+
+export const componentSizeTokens = flattenTokens(component as never);
+export const targetSizeTokens = flattenTokens(target as never);

package/src/tokens/spacing.ts

@@ -0,0 +1,4 @@
+import scale from '../../tokens/spacing/scale.json';
+import { flattenTokens } from './utils';
+
+export const spacingTokens = flattenTokens(scale as never);

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

@@ -0,0 +1,88 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ *
+ * Modo oscuro derivado: los tokens que heredan de otro token que sí tiene par
+ * oscuro. Se vuelven a declarar aquí porque un var() dentro de una custom
+ * property se resuelve en el elemento que la declara, no en el que la usa.
+ */
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --async-multi-select-bg: var(--multi-select-bg);
+  --async-multi-select-border-color: var(--multi-select-border-color);
+  --async-multi-select-color: var(--multi-select-color);
+  --async-multi-select-content-bg: var(--multi-select-content-bg);
+  --async-multi-select-content-border-color: var(--multi-select-content-border-color);
+  --async-multi-select-error-border-color: var(--multi-select-error-border-color);
+  --async-multi-select-focus-ring-color: var(--multi-select-focus-ring-color);
+  --async-multi-select-placeholder-color: var(--multi-select-placeholder-color);
+  --async-multi-select-pill-bg: var(--multi-select-pill-bg);
+  --async-multi-select-pill-color: var(--multi-select-pill-color);
+  --async-select-bg: var(--select-bg);
+  --async-select-border-color: var(--select-border-color);
+  --async-select-color: var(--select-color);
+  --async-select-content-bg: var(--select-content-bg);
+  --async-select-content-border-color: var(--select-content-border-color);
+  --async-select-error-border-color: var(--select-error-border-color);
+  --async-select-focus-ring-color: var(--select-focus-ring-color);
+  --async-select-placeholder-color: var(--multi-select-placeholder-color);
+  --card-selectable-focus-ring-color: var(--button-primary-focus-ring-color);
+  --code-bg: var(--code-block-bg);
+  --code-color: var(--code-block-color);
+  --floating-dock-panel-bg: var(--floating-panel-bg);
+  --floating-dock-panel-border-color: var(--floating-panel-border-color);
+  --floating-dock-title-color: var(--modal-title-color);
+  --floating-dock-description-color: var(--modal-description-color);
+  --floating-dock-close-color: var(--modal-close-color);
+  --floating-dock-close-focus-ring-color: var(--modal-close-focus-ring-color);
+  --menu-bg: var(--floating-panel-bg);
+  --menu-border-color: var(--floating-panel-border-color);
+  --number-input-border-color: var(--input-border-color);
+  --number-input-bg: var(--input-bg);
+  --number-input-color: var(--input-color);
+  --number-input-btn-separator-color: var(--input-border-color);
+  --number-input-focus-ring-color: var(--input-focus-ring-color);
+  --number-input-focus-border-color: var(--input-focus-border-color);
+  --number-input-disabled-bg: var(--input-disabled-bg);
+  --number-input-disabled-color: var(--input-disabled-color);
+  --number-input-disabled-border-color: var(--input-disabled-border-color);
+  --number-input-disabled-btn-color: var(--input-disabled-color);
+  --number-input-error-border-color: var(--input-error-border-color);
+  --number-input-error-bg: var(--input-error-bg);
+  --number-input-error-color: var(--input-error-color);
+  --number-input-error-focus-border-color: var(--input-error-focus-border-color);
+  --number-input-error-focus-ring-color: var(--input-error-focus-ring-color);
+  --org-switcher-content-bg: var(--floating-panel-bg);
+  --org-switcher-content-border-color: var(--floating-panel-border-color);
+  --popover-bg: var(--floating-panel-bg);
+  --popover-border-color: var(--floating-panel-border-color);
+  --user-menu-content-bg: var(--floating-panel-bg);
+  --user-menu-content-border-color: var(--floating-panel-border-color);
+  --calendar-year-color: var(--calendar-day-color);
+  --calendar-year-current-color: var(--calendar-today-color);
+  --calendar-year-selected-bg: var(--calendar-selected-bg);
+  --calendar-year-selected-color: var(--calendar-selected-color);
+  --calendar-year-disabled-color: var(--calendar-disabled-color);
+  --command-palette-input-border-color: var(--floating-panel-border-color);
+  --prose-color: var(--text-color);
+  --prose-quote-border-color: var(--separator-color);
+  --prose-code-bg: var(--code-bg);
+  --prose-code-color: var(--code-color);
+  --prose-pre-bg: var(--code-block-bg);
+  --prose-pre-color: var(--code-block-color);
+  --prose-pre-border-color: var(--code-block-border-color);
+  --prose-table-border-color: var(--table-row-border-color);
+  --prose-table-header-border-color: var(--table-header-border-color);
+  --prose-rule-color: var(--separator-color);
+  --sheet-bg: var(--modal-bg);
+  --sheet-title-color: var(--modal-title-color);
+  --sheet-description-color: var(--modal-description-color);
+  --sheet-close-color: var(--modal-close-color);
+  --sheet-close-focus-ring-color: var(--modal-close-focus-ring-color);
+  --stat-tile-border-color: var(--card-outline-border-color);
+  --chart-tooltip-bg: var(--tooltip-bg);
+  --chart-tooltip-color: var(--tooltip-color);
+  --connector-auth-untrusted-focus-ring-color: var(--link-focus-ring-color);
+}