@studiolxd/brand 38.12.4

package/src/tokens/scss/components/_async-multi-select.scss

@@ -0,0 +1,52 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-async-multi-select-bg: #ffffff; // Hereda de `multi-select.bg`: el buscador múltiple tiene la misma cara que el control síncrono
+$lxd-async-multi-select-border-color: #111e30; // Hereda de `multi-select.border-color`: el buscador múltiple tiene la misma cara que el control síncrono
+$lxd-async-multi-select-border-radius: 0px; // Hereda de `multi-select.border-radius`: el buscador múltiple tiene la misma cara que el control síncrono
+$lxd-async-multi-select-border-style: solid; // Hereda de `multi-select.border-style`: el buscador múltiple tiene la misma cara que el control síncrono
+$lxd-async-multi-select-border-width: 1px; // Hereda de `multi-select.border-width`: el buscador múltiple tiene la misma cara que el control síncrono
+$lxd-async-multi-select-disabled-cursor: not-allowed; // Cursor cuando está deshabilitado: el de los campos
+$lxd-async-multi-select-color: #111e30; // Hereda de `multi-select.color`: el buscador múltiple tiene la misma cara que el control síncrono
+$lxd-async-multi-select-content-bg: #ffffff; // Hereda de `multi-select.content-bg`: el buscador múltiple tiene la misma cara que el control síncrono
+$lxd-async-multi-select-content-border-color: #111e30; // Hereda de `multi-select.content-border-color`: el buscador múltiple tiene la misma cara que el control síncrono
+$lxd-async-multi-select-content-gap: 0.5rem; // Hereda de `multi-select.content-gap`: el buscador múltiple tiene la misma cara que el control síncrono
+$lxd-async-multi-select-content-z-index: 400; // Hereda de `multi-select.content-z-index`: el buscador múltiple tiene la misma cara que el control síncrono
+$lxd-async-multi-select-content-max-height: var(--available-height); // Hereda de `multi-select.content-max-height`: el buscador múltiple tiene la misma cara que el control síncrono
+$lxd-async-multi-select-error-border-color: #b30000; // Hereda de `multi-select.error-border-color`: el buscador múltiple tiene la misma cara que el control síncrono
+$lxd-async-multi-select-focus-ring-color: #111e30; // Hereda de `multi-select.focus-ring-color`: el buscador múltiple tiene la misma cara que el control síncrono
+$lxd-async-multi-select-focus-ring-width: 2px; // Hereda de `multi-select.focus-ring-width`: el buscador múltiple tiene la misma cara que el control síncrono
+$lxd-async-multi-select-font-family: "Google Sans Flex", system-ui, sans-serif; // Hereda de `multi-select.font-family`: el buscador múltiple tiene la misma cara que el control síncrono
+$lxd-async-multi-select-font-size: 1rem; // Hereda de `multi-select.font-size`: el buscador múltiple tiene la misma cara que el control síncrono
+$lxd-async-multi-select-font-weight: 300; // Hereda de `multi-select.font-weight`: el buscador múltiple tiene la misma cara que el control síncrono
+$lxd-async-multi-select-height: 2.5rem; // Hereda de `multi-select.height`: el buscador múltiple tiene la misma cara que el control síncrono
+$lxd-async-multi-select-item-highlighted-bg: #111e30; // Hereda de `multi-select.item-highlighted-bg`: el buscador múltiple tiene la misma cara que el control síncrono
+$lxd-async-multi-select-item-highlighted-color: #ffffff; // Texto de la opción resaltada — el del MultiSelect
+$lxd-async-multi-select-item-padding-block: 0.5rem; // Hereda de `multi-select.item-padding-block`: el buscador múltiple tiene la misma cara que el control síncrono
+$lxd-async-multi-select-lg-font-size: 1.25rem; // Hereda de `multi-select.lg-font-size`: el buscador múltiple tiene la misma cara que el control síncrono
+$lxd-async-multi-select-lg-height: 3rem; // Hereda de `multi-select.lg-height`: el buscador múltiple tiene la misma cara que el control síncrono
+$lxd-async-multi-select-lg-item-padding-block: 0.75rem; // Hereda de `multi-select.lg-item-padding-block`: el buscador múltiple tiene la misma cara que el control síncrono
+$lxd-async-multi-select-lg-padding-inline: 1.5rem; // Hereda de `multi-select.lg-padding-inline`: el buscador múltiple tiene la misma cara que el control síncrono
+$lxd-async-multi-select-line-height: 1; // Hereda de `multi-select.line-height`: el buscador múltiple tiene la misma cara que el control síncrono
+$lxd-async-multi-select-padding-inline: 1rem; // Hereda de `multi-select.padding-inline`: el buscador múltiple tiene la misma cara que el control síncrono
+$lxd-async-multi-select-placeholder-color: #4a4a4a; // Hereda de `multi-select.placeholder-color`: el buscador múltiple tiene la misma cara que el control síncrono
+$lxd-async-multi-select-sm-font-size: 0.875rem; // Hereda de `multi-select.sm-font-size`: el buscador múltiple tiene la misma cara que el control síncrono
+$lxd-async-multi-select-sm-height: 2rem; // Hereda de `multi-select.sm-height`: el buscador múltiple tiene la misma cara que el control síncrono
+$lxd-async-multi-select-sm-item-padding-block: 0.25rem; // Hereda de `multi-select.sm-item-padding-block`: el buscador múltiple tiene la misma cara que el control síncrono
+$lxd-async-multi-select-sm-padding-inline: 0.5rem; // Hereda de `multi-select.sm-padding-inline`: el buscador múltiple tiene la misma cara que el control síncrono
+$lxd-async-multi-select-pill-bg: #111e30; // Hereda de `multi-select.pill-bg`: el buscador múltiple tiene la misma cara que el control síncrono
+$lxd-async-multi-select-pill-border-radius: 9999px; // Hereda de `multi-select.pill-border-radius`: el buscador múltiple tiene la misma cara que el control síncrono
+$lxd-async-multi-select-pill-color: #ffffff; // Hereda de `multi-select.pill-color`: el buscador múltiple tiene la misma cara que el control síncrono
+$lxd-async-multi-select-pill-font-size: 0.875rem; // Hereda de `multi-select.pill-font-size`: el buscador múltiple tiene la misma cara que el control síncrono
+$lxd-async-multi-select-pill-gap: 0.25rem; // Hereda de `multi-select.pill-gap`: el buscador múltiple tiene la misma cara que el control síncrono
+$lxd-async-multi-select-pill-padding-block: 0.25rem; // Hereda de `multi-select.pill-padding-block`: el buscador múltiple tiene la misma cara que el control síncrono
+$lxd-async-multi-select-pill-padding-inline: 0.5rem; // Hereda de `multi-select.pill-padding-inline`: el buscador múltiple tiene la misma cara que el control síncrono
+$lxd-async-multi-select-selection-gap: 0.25rem; // Hereda de `multi-select.selection-gap`: el buscador múltiple tiene la misma cara que el control síncrono
+$lxd-async-multi-select-item-selected-font-weight: 500; // Peso de la opción ya elegida dentro de la lista de resultados
+$lxd-async-multi-select-loading-padding-block: 0.5rem; // Aire vertical de la fila de carga: la misma caja que una opción, para que la lista no salte al llegar los resultados
+$lxd-async-multi-select-loading-padding-inline: 1rem; // Aire horizontal de la fila de carga
+$lxd-async-multi-select-empty-padding-block: 0.5rem; // Aire vertical del mensaje de lista vacía
+$lxd-async-multi-select-empty-padding-inline: 1rem; // Aire horizontal del mensaje de lista vacía
+$lxd-async-multi-select-empty-font-family: "Google Sans Flex", system-ui, sans-serif; // Tipografía del mensaje de lista vacía
+$lxd-async-multi-select-empty-font-size: 1rem; // Tamaño del mensaje de lista vacía
+$lxd-async-multi-select-empty-color: #4a4a4a; // Tinta del mensaje de lista vacía: es texto secundario, no un valor

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

@@ -0,0 +1,44 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-async-select-bg: #ffffff; // Hereda de `select.bg`: el buscador tiene la misma cara que el control síncrono
+$lxd-async-select-border-color: #111e30; // Hereda de `select.border-color`: el buscador tiene la misma cara que el control síncrono
+$lxd-async-select-border-radius: 0px; // Hereda de `select.border-radius`: el buscador tiene la misma cara que el control síncrono
+$lxd-async-select-border-style: solid; // Hereda de `select.border-style`: el buscador tiene la misma cara que el control síncrono
+$lxd-async-select-border-width: 1px; // Hereda de `select.border-width`: el buscador tiene la misma cara que el control síncrono
+$lxd-async-select-disabled-cursor: not-allowed; // Cursor cuando está deshabilitado: el de los campos
+$lxd-async-select-color: #111e30; // Hereda de `select.color`: el buscador tiene la misma cara que el control síncrono
+$lxd-async-select-content-bg: #ffffff; // Hereda de `select.content-bg`: el buscador tiene la misma cara que el control síncrono
+$lxd-async-select-content-border-color: #111e30; // Hereda de `select.content-border-color`: el buscador tiene la misma cara que el control síncrono
+$lxd-async-select-content-gap: 0.5rem; // Hereda de `multi-select.content-gap`: el buscador tiene la misma cara que el control síncrono
+$lxd-async-select-content-z-index: 400; // Hereda de `select.content-z-index`: el buscador tiene la misma cara que el control síncrono
+$lxd-async-select-content-max-height: var(--available-height); // Hereda de `select.content-max-height`: el buscador tiene la misma cara que el control síncrono
+$lxd-async-select-error-border-color: #b30000; // Hereda de `select.error-border-color`: el buscador tiene la misma cara que el control síncrono
+$lxd-async-select-focus-ring-color: #111e30; // Hereda de `select.focus-ring-color`: el buscador tiene la misma cara que el control síncrono
+$lxd-async-select-focus-ring-width: 2px; // Hereda de `select.focus-ring-width`: el buscador tiene la misma cara que el control síncrono
+$lxd-async-select-font-family: "Google Sans Flex", system-ui, sans-serif; // Hereda de `select.font-family`: el buscador tiene la misma cara que el control síncrono
+$lxd-async-select-font-size: 1rem; // Hereda de `select.font-size`: el buscador tiene la misma cara que el control síncrono
+$lxd-async-select-font-weight: 300; // Hereda de `select.font-weight`: el buscador tiene la misma cara que el control síncrono
+$lxd-async-select-height: 2.5rem; // Hereda de `select.height`: el buscador tiene la misma cara que el control síncrono
+$lxd-async-select-item-highlighted-bg: #111e30; // Hereda de `select.item-highlighted-bg`: el buscador tiene la misma cara que el control síncrono
+$lxd-async-select-item-highlighted-color: #ffffff; // Texto de la opción resaltada — el del Select
+$lxd-async-select-item-padding-block: 0.5rem; // Hereda de `select.item-padding-block`: el buscador tiene la misma cara que el control síncrono
+$lxd-async-select-lg-font-size: 1.25rem; // Hereda de `select.lg-font-size`: el buscador tiene la misma cara que el control síncrono
+$lxd-async-select-lg-height: 3rem; // Hereda de `select.lg-height`: el buscador tiene la misma cara que el control síncrono
+$lxd-async-select-lg-item-padding-block: 0.75rem; // Hereda de `select.lg-item-padding-block`: el buscador tiene la misma cara que el control síncrono
+$lxd-async-select-lg-padding-inline: 1.5rem; // Hereda de `select.lg-padding-inline`: el buscador tiene la misma cara que el control síncrono
+$lxd-async-select-line-height: 1; // Hereda de `select.line-height`: el buscador tiene la misma cara que el control síncrono
+$lxd-async-select-padding-inline: 1rem; // Hereda de `select.padding-inline`: el buscador tiene la misma cara que el control síncrono
+$lxd-async-select-placeholder-color: #4a4a4a; // Hereda de `multi-select.placeholder-color`: el buscador tiene la misma cara que el control síncrono
+$lxd-async-select-sm-font-size: 0.875rem; // Hereda de `select.sm-font-size`: el buscador tiene la misma cara que el control síncrono
+$lxd-async-select-sm-height: 2rem; // Hereda de `select.sm-height`: el buscador tiene la misma cara que el control síncrono
+$lxd-async-select-sm-item-padding-block: 0.25rem; // Hereda de `select.sm-item-padding-block`: el buscador tiene la misma cara que el control síncrono
+$lxd-async-select-sm-padding-inline: 0.5rem; // Hereda de `select.sm-padding-inline`: el buscador tiene la misma cara que el control síncrono
+$lxd-async-select-item-selected-font-weight: 500; // Peso de la opción ya elegida dentro de la lista de resultados
+$lxd-async-select-loading-padding-block: 0.5rem; // Aire vertical de la fila de carga: la misma caja que una opción, para que la lista no salte al llegar los resultados
+$lxd-async-select-loading-padding-inline: 1rem; // Aire horizontal de la fila de carga
+$lxd-async-select-empty-padding-block: 0.5rem; // Aire vertical del mensaje de lista vacía
+$lxd-async-select-empty-padding-inline: 1rem; // Aire horizontal del mensaje de lista vacía
+$lxd-async-select-empty-font-family: "Google Sans Flex", system-ui, sans-serif; // Tipografía del mensaje de lista vacía
+$lxd-async-select-empty-font-size: 1rem; // Tamaño del mensaje de lista vacía
+$lxd-async-select-empty-color: #4a4a4a; // Tinta del mensaje de lista vacía: es texto secundario, no un valor

package/src/tokens/scss/components/_avatar.scss

@@ -0,0 +1,22 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-avatar-size-sm: 2rem; // 32px — en barras y menús (UserMenu, OrgSwitcher)
+$lxd-avatar-size-md: 2.5rem; // 40px — por defecto: listas, tarjetas
+$lxd-avatar-size-lg: 3rem; // 48px — cabeceras de perfil
+$lxd-avatar-size-xl: 64px; // 64px — el avatar es el asunto de la pantalla (una cabecera de perfil, la subida de la foto). Es la talla ilustrativa de la escala de iconos, la misma que usan `logo.height-xl` y `logomark.size-xl`, no una talla de control: por encima de `lg` el sistema ya no mide con la escala de controles
+$lxd-avatar-size-2xl: 6rem; // 96px — el avatar es además la zona donde se suelta la imagen (`AvatarUpload` a talla `sm`). Vez y media el peldaño anterior, sigue en el múltiplo de 8, y a 96px la diana de arrastre se acierta sin apuntar
+$lxd-avatar-size-3xl: 8rem; // 128px — el doble de `xl`. Retrato de la superficie de aplicación cuando la foto es el asunto de la pantalla y la diana del arrastre (`AvatarUpload` a talla `md`, /account)
+$lxd-avatar-size-4xl: 12rem; // 192px — el doble de `2xl`, y vez y media `3xl`: el mismo salto que hay de `xl` a `2xl`. Retrato de la superficie pública, donde el avatar es el paso entero de la pantalla (`AvatarUpload` a talla `lg`, el logotipo del alta). A 375px ya no cabe con el botón al lado: la fila del AvatarUpload envuelve y el botón baja
+$lxd-avatar-border-radius: 9999px; // Personas: círculo
+$lxd-avatar-border-radius-square: 0px; // Organizaciones (logos): el radio del sistema
+$lxd-avatar-initials-bg: #111e30; // Fondo de las iniciales
+$lxd-avatar-initials-color: #ffffff; // Iniciales sobre el fondo
+$lxd-avatar-initials-font-weight: 500; // Iniciales: énfasis
+$lxd-avatar-initials-font-size-sm: 0.875rem; // Iniciales a talla sm
+$lxd-avatar-initials-font-size-md: 1rem; // Iniciales a talla md
+$lxd-avatar-initials-font-size-lg: 1.25rem; // Iniciales a talla lg
+$lxd-avatar-initials-font-size-xl: 1.5rem; // Iniciales a talla xl: un peldaño de la escala tipográfica por talla, como las tres anteriores
+$lxd-avatar-initials-font-size-2xl: 1.75rem; // Iniciales a talla 2xl: un peldaño más, como en el resto de la escala
+$lxd-avatar-initials-font-size-3xl: 2rem; // Iniciales a talla 3xl: un peldaño más
+$lxd-avatar-initials-font-size-4xl: 2.5rem; // Iniciales a talla 4xl: un peldaño más

package/src/tokens/scss/components/_breadcrumb.scss

@@ -0,0 +1,20 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-breadcrumb-font-family: "Google Sans Flex", system-ui, sans-serif; // Font family
+$lxd-breadcrumb-font-size: 0.875rem; // Texto de navegación, no control: peldaño por debajo del cuerpo (respira en la superficie pública)
+$lxd-breadcrumb-font-weight: 300; // Font weight base
+$lxd-breadcrumb-line-height: 1; // Single-line
+$lxd-breadcrumb-gap: 0.5rem; // Gap entre items y separadores
+$lxd-breadcrumb-padding-block: 0.25rem; // Padding vertical del nav
+$lxd-breadcrumb-padding-inline: 0; // Sin padding lateral
+$lxd-breadcrumb-separator-color: #111e30; // Color del separador
+$lxd-breadcrumb-link-color: #111e30; // Color del link navegable
+$lxd-breadcrumb-link-color-hover: #111e30; // Color del link en hover
+$lxd-breadcrumb-link-text-decoration: none; // OBSOLETO — no viste nada. El subrayado de las migas es la línea del sistema, la misma de cualquier enlace, y no `text-decoration`. Se conserva en `none` para no romper a quien lo tenga referenciado; a retirar en el próximo major
+$lxd-breadcrumb-link-text-decoration-hover: none; // OBSOLETO — no viste nada. Valía `underline` y era la vía por la que el subrayado de `text-decoration` seguía entrando en el DS. A retirar en el próximo major
+$lxd-breadcrumb-current-color: #111e30; // Color del item activo (página actual)
+$lxd-breadcrumb-current-font-weight: 500; // Peso del item activo
+$lxd-breadcrumb-focus-ring-color: #111e30; // Color del focus ring
+$lxd-breadcrumb-focus-ring-width: 2px; // Grosor del focus ring
+$lxd-breadcrumb-focus-ring-offset: 1px; // Separación del focus ring

package/src/tokens/scss/components/_button.scss

@@ -0,0 +1,187 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-button-border-radius: 0px; // Rectangular: el radio del sistema (0), como los campos
+$lxd-button-border-width: 1px; // Border width
+$lxd-button-border-style: solid; // Border style
+$lxd-button-border-color: rgba(0, 0, 0, 0); // Default border color — overridden by variants
+$lxd-button-justify-content: center; // Justify content
+$lxd-button-font-family: "Google Sans Flex", system-ui, sans-serif; // Font family
+$lxd-button-font-size: 1rem; // Font size
+$lxd-button-font-weight: 300; // Font weight
+$lxd-button-line-height: 1; // Line height
+$lxd-button-cursor: pointer; // Cursor
+$lxd-button-white-space: nowrap; // White space
+$lxd-button-text-decoration: none; // Text decoration
+$lxd-button-transition-duration: 150ms; // Transition duration
+$lxd-button-transition-easing: ease; // Transition easing
+$lxd-button-disabled-cursor: not-allowed; // Cursor when disabled
+$lxd-button-disabled-bg: #f2f2f2; // Background when disabled — only form button changes bg
+$lxd-button-disabled-color: #4a4a4a; // Text color when disabled — light surface
+$lxd-button-disabled-border: #4a4a4a; // Border color when disabled — light surface, matches text for contrast
+$lxd-button-height: 2.5rem; // Altura fija del botón (talla md): el contenido se centra, no se hace por padding
+$lxd-button-sm-height: 2rem; // Altura — sm
+$lxd-button-lg-height: 3rem; // Altura — lg
+$lxd-button-padding-inline: 2rem; // Inline (horizontal) padding
+$lxd-button-focus-ring-width: 2px; // Focus ring width
+$lxd-button-focus-ring-style: solid; // Focus ring border style
+$lxd-button-focus-ring-offset: 0.25rem; // Separación entre el botón y el anillo de foco (4px): el hueco es el fondo de la superficie, y eso lo hace leerse como foco y no como un borde más
+$lxd-button-sm-padding-inline: 1.5rem; // Inline padding — sm
+$lxd-button-sm-font-size: 0.875rem; // Font size — sm
+$lxd-button-lg-padding-inline: 4rem; // Inline padding — lg
+$lxd-button-lg-font-size: 1.25rem; // Font size — lg
+$lxd-button-block-width: 100%; // Width when block modifier is applied
+$lxd-button-primary-border-radius: 0px; // Border radius
+$lxd-button-primary-border-width: 1px; // Border width
+$lxd-button-primary-border-style: solid; // Border style
+$lxd-button-primary-justify-content: center; // Justify content
+$lxd-button-primary-font-family: "Google Sans Flex", system-ui, sans-serif; // Font family
+$lxd-button-primary-font-size: 1rem; // Font size
+$lxd-button-primary-font-weight: 300; // Font weight
+$lxd-button-primary-line-height: 1; // Line height
+$lxd-button-primary-cursor: pointer; // Cursor
+$lxd-button-primary-white-space: nowrap; // White space
+$lxd-button-primary-text-decoration: none; // Text decoration
+$lxd-button-primary-transition-duration: 150ms; // Transition duration
+$lxd-button-primary-transition-easing: ease; // Transition easing
+$lxd-button-primary-disabled-cursor: not-allowed; // Cursor when disabled
+$lxd-button-primary-disabled-bg: #4a4a4a; // Background when disabled — filled with the disabled border color
+$lxd-button-primary-disabled-color: #ffffff; // Text color when disabled — white on grey background
+$lxd-button-primary-disabled-border: #4a4a4a; // Border color when disabled
+$lxd-button-primary-padding-inline: 2rem; // Inline (horizontal) padding
+$lxd-button-primary-focus-ring-width: 2px; // Focus ring width
+$lxd-button-primary-focus-ring-style: solid; // Focus ring border style
+$lxd-button-primary-focus-ring-offset: 0.25rem; // Focus ring offset
+$lxd-button-primary-focus-ring-color: #111e30; // Anillo de foco: la tinta de la superficie (prusia), no el lavanda del botón — así se ve como foco, no como borde
+$lxd-button-primary-bg: #baabff; // Background
+$lxd-button-primary-color: #111e30; // Text color
+$lxd-button-primary-border: #baabff; // Border color
+$lxd-button-primary-hover-bg: #ffcd00; // Hover background
+$lxd-button-primary-hover-color: #111e30; // Hover text color
+$lxd-button-primary-hover-border: #ffcd00; // Hover border color
+$lxd-button-primary-active-bg: #ffcd00; // Active background
+$lxd-button-primary-active-color: #111e30; // Active text color
+$lxd-button-primary-active-border: #ffcd00; // Active border color
+$lxd-button-destructive-border-radius: 0px; // Border radius
+$lxd-button-destructive-border-width: 1px; // Border width
+$lxd-button-destructive-border-style: solid; // Border style
+$lxd-button-destructive-justify-content: center; // Justify content
+$lxd-button-destructive-font-family: "Google Sans Flex", system-ui, sans-serif; // Font family
+$lxd-button-destructive-font-size: 1rem; // Font size
+$lxd-button-destructive-font-weight: 300; // Font weight
+$lxd-button-destructive-line-height: 1; // Line height
+$lxd-button-destructive-cursor: pointer; // Cursor
+$lxd-button-destructive-white-space: nowrap; // White space
+$lxd-button-destructive-text-decoration: none; // Text decoration
+$lxd-button-destructive-transition-duration: 150ms; // Transition duration
+$lxd-button-destructive-transition-easing: ease; // Transition easing
+$lxd-button-destructive-disabled-cursor: not-allowed; // Cursor when disabled
+$lxd-button-destructive-disabled-color: #4a4a4a; // Text color when disabled
+$lxd-button-destructive-disabled-border: #4a4a4a; // Border color when disabled
+$lxd-button-destructive-padding-inline: 2rem; // Inline (horizontal) padding
+$lxd-button-destructive-focus-ring-width: 2px; // Focus ring width
+$lxd-button-destructive-focus-ring-style: solid; // Focus ring border style
+$lxd-button-destructive-focus-ring-offset: 0.25rem; // Focus ring offset
+$lxd-button-destructive-focus-ring-color: #b30000; // Focus ring color
+$lxd-button-destructive-bg: #ffffff; // Background
+$lxd-button-destructive-color: #b30000; // Text color
+$lxd-button-destructive-border: #b30000; // Border color
+$lxd-button-destructive-hover-bg: #b30000; // Hover background
+$lxd-button-destructive-hover-color: #ffffff; // Hover text color
+$lxd-button-destructive-hover-border: #b30000; // Hover border color
+$lxd-button-destructive-active-bg: #b30000; // Active background
+$lxd-button-destructive-active-color: #ffffff; // Active text color
+$lxd-button-destructive-active-border: #b30000; // Active border color
+$lxd-button-outline-border-radius: 0px; // Border radius
+$lxd-button-outline-border-width: 1px; // Border width
+$lxd-button-outline-border-style: solid; // Border style
+$lxd-button-outline-justify-content: center; // Justify content
+$lxd-button-outline-font-family: "Google Sans Flex", system-ui, sans-serif; // Font family
+$lxd-button-outline-font-size: 1rem; // Font size
+$lxd-button-outline-font-weight: 300; // Font weight
+$lxd-button-outline-line-height: 1; // Line height
+$lxd-button-outline-cursor: pointer; // Cursor
+$lxd-button-outline-white-space: nowrap; // White space
+$lxd-button-outline-text-decoration: none; // Text decoration
+$lxd-button-outline-transition-duration: 150ms; // Transition duration
+$lxd-button-outline-transition-easing: ease; // Transition easing
+$lxd-button-outline-disabled-cursor: not-allowed; // Cursor when disabled
+$lxd-button-outline-disabled-color: #d0d0d0; // Text color when disabled
+$lxd-button-outline-disabled-border: #d0d0d0; // Border color when disabled
+$lxd-button-outline-padding-inline: 2rem; // Inline (horizontal) padding
+$lxd-button-outline-focus-ring-width: 2px; // Focus ring width
+$lxd-button-outline-focus-ring-style: solid; // Focus ring border style
+$lxd-button-outline-focus-ring-offset: 0.25rem; // Focus ring offset
+$lxd-button-outline-focus-ring-color: #111e30; // Focus ring color — dark on light backgrounds
+$lxd-button-outline-bg: rgba(0, 0, 0, 0); // Background
+$lxd-button-outline-color: #111e30; // Text color
+$lxd-button-outline-border: #111e30; // Border color
+$lxd-button-outline-hover-bg: #111e30; // Hover background
+$lxd-button-outline-hover-color: #ffffff; // Hover text color
+$lxd-button-outline-hover-border: #111e30; // Hover border color
+$lxd-button-outline-active-bg: #111e30; // Active background
+$lxd-button-outline-active-color: #ffffff; // Active text color
+$lxd-button-outline-active-border: #111e30; // Active border color
+$lxd-button-text-border-radius: 0px; // Border radius
+$lxd-button-text-border-width: 0; // Border width — 0 para uso inline en texto
+$lxd-button-text-border-style: solid; // Border style
+$lxd-button-text-justify-content: center; // Justify content
+$lxd-button-text-font-family: "Google Sans Flex", system-ui, sans-serif; // Font family
+$lxd-button-text-font-size: 1rem; // Font size
+$lxd-button-text-font-weight: 300; // Font weight
+$lxd-button-text-line-height: 1; // Line height
+$lxd-button-text-cursor: pointer; // Cursor
+$lxd-button-text-white-space: nowrap; // White space
+$lxd-button-text-underline-width: 1px; // Grosor de la línea en reposo. La variante `text` se subraya con la misma técnica que `Link` —sombra interior, no `text-decoration`— porque `text-decoration` no cubre un SVG y un botón con icono quedaba con la línea cortada. Apunta al token de `Link` para que las dos piezas no puedan separarse
+$lxd-button-text-hover-underline-width: 0px; // Grosor de la línea en hover y en activo — el de `Link`
+$lxd-button-text-ink-color: #111e30; // tone=ink: la tinta de la superficie, como en Link
+$lxd-button-text-ink-underline-width: 1px; // tone=ink: grosor del subrayado en reposo
+$lxd-button-text-ink-hover-underline-width: 0px; // tone=ink: grosor del subrayado en hover
+$lxd-button-text-underline-offset: 0.25rem; // Separación entre el texto y su línea — la de `Link`. Va como `padding-block-end`, así que la línea cae por debajo del icono igual que del texto
+$lxd-button-text-transition-duration: 150ms; // Transition duration
+$lxd-button-text-transition-easing: ease; // Transition easing
+$lxd-button-text-disabled-cursor: not-allowed; // Cursor when disabled
+$lxd-button-text-disabled-color: #4a4a4a; // Text color when disabled — light surface
+$lxd-button-text-padding-inline: 0; // Inline (horizontal) padding — 0 para uso inline en texto
+$lxd-button-text-focus-ring-width: 2px; // Focus ring width
+$lxd-button-text-focus-ring-style: solid; // Focus ring border style
+$lxd-button-text-focus-ring-offset: 1px; // Focus ring offset
+$lxd-button-text-focus-ring-color: #111e30; // Focus ring color — light surface
+$lxd-button-text-bg: rgba(0, 0, 0, 0); // Background — always transparent
+$lxd-button-text-color: #111e30; // Text color — light surface
+$lxd-button-text-border: rgba(0, 0, 0, 0); // Border color — transparent
+$lxd-button-text-hover-bg: rgba(0, 0, 0, 0); // Hover background — stays transparent
+$lxd-button-text-hover-color: #111e30; // Hover text color — unchanged
+$lxd-button-text-hover-border: rgba(0, 0, 0, 0); // Hover border — stays transparent
+$lxd-button-text-active-bg: rgba(0, 0, 0, 0); // Active background — stays transparent
+$lxd-button-text-active-color: #111e30; // Active text color — unchanged
+$lxd-button-text-active-border: rgba(0, 0, 0, 0); // Active border — stays transparent
+$lxd-button-ghost-border-radius: 0px; // Border radius
+$lxd-button-ghost-border-width: 0; // Sin borde — fondo reemplaza al borde en hover
+$lxd-button-ghost-border-style: solid; // Border style
+$lxd-button-ghost-justify-content: center; // Justify content
+$lxd-button-ghost-font-family: "Google Sans Flex", system-ui, sans-serif; // Font family
+$lxd-button-ghost-font-size: 1rem; // Font size
+$lxd-button-ghost-font-weight: 300; // Font weight
+$lxd-button-ghost-line-height: 1; // Line height
+$lxd-button-ghost-cursor: pointer; // Cursor
+$lxd-button-ghost-white-space: nowrap; // White space
+$lxd-button-ghost-text-decoration: none; // Text decoration
+$lxd-button-ghost-transition-duration: 150ms; // Transition duration
+$lxd-button-ghost-transition-easing: ease; // Transition easing
+$lxd-button-ghost-disabled-cursor: not-allowed; // Cursor when disabled
+$lxd-button-ghost-disabled-color: #4a4a4a; // Text color when disabled
+$lxd-button-ghost-padding-inline: 2rem; // Inline (horizontal) padding
+$lxd-button-ghost-focus-ring-width: 2px; // Focus ring width
+$lxd-button-ghost-focus-ring-style: solid; // Focus ring border style
+$lxd-button-ghost-focus-ring-offset: 0.25rem; // Focus ring offset
+$lxd-button-ghost-focus-ring-color: #111e30; // Focus ring color
+$lxd-button-ghost-bg: rgba(0, 0, 0, 0); // Background — transparente en reposo
+$lxd-button-ghost-color: #111e30; // Text color
+$lxd-button-ghost-border: rgba(0, 0, 0, 0); // Border color — transparent
+$lxd-button-ghost-hover-bg: #111e30; // Hover background — fondo sutil
+$lxd-button-ghost-hover-color: #ffffff; // Hover text color — sin cambio
+$lxd-button-ghost-hover-border: rgba(0, 0, 0, 0); // Hover border — transparent
+$lxd-button-ghost-active-bg: #111e30; // Active background
+$lxd-button-ghost-active-color: #ffffff; // Active text color
+$lxd-button-ghost-active-border: rgba(0, 0, 0, 0); // Active border — transparent

package/src/tokens/scss/components/_card.scss

@@ -0,0 +1,31 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-card-padding-inline: 1rem; // Padding horizontal
+$lxd-card-padding-block-start: 1rem; // Padding block start
+$lxd-card-padding-block-end: 0.75rem; // Padding block end
+$lxd-card-gap: 0.75rem; // Separación entre elementos internos
+$lxd-card-border-radius: 0px; // Radio de esquinas — sin redondeado
+$lxd-card-description-font-size: 1.25rem; // Tamaño de fuente de la descripción
+$lxd-card-description-margin-block-end: 3rem; // Margen inferior de la descripción
+$lxd-card-header-gap: 0.75rem; // Separación entre el bloque de texto y la acción en la cabecera
+$lxd-card-header-row-gap: 0.25rem; // Separación entre el título y la descripción en la cabecera
+$lxd-card-title-font-weight: 500; // Peso del título de la tarjeta
+$lxd-card-footer-gap: 0.5rem; // Separación entre acciones del pie
+$lxd-card-primary-bg: #baabff; // Variante primary — fondo lavanda. No es `color.primary` (prussian): coincidiría con `color.background.dark` y desaparecería sobre `.surface-dark`. Mismo patrón autocontenido que `button.primary` — un par que no depende de la superficie ambiente, igual en claro y oscuro
+$lxd-card-primary-color: #111e30; // Variante primary — texto prussian sobre el fondo lavanda
+$lxd-card-accent-1-bg: #baabff; // Variante accent-1 — fondo lavanda
+$lxd-card-accent-1-color: #111e30; // Variante accent-1 — texto. Color saturado que ya contrasta en cualquier superficie: sin par surface-dark, como las variantes semánticas de Alert/Tag
+$lxd-card-accent-2-bg: #ffcd00; // Variante accent-2 — fondo amarillo
+$lxd-card-accent-2-color: #111e30; // Variante accent-2 — texto. Sin par surface-dark: mismo motivo que accent-1
+$lxd-card-support-1-bg: #20e38e; // Variante support-1 — fondo esmeralda
+$lxd-card-support-1-color: #111e30; // Variante support-1 — texto. Sin par surface-dark: mismo motivo que accent-1
+$lxd-card-support-2-bg: #f05e1c; // Variante support-2 — fondo cayena
+$lxd-card-support-2-color: #111e30; // Variante support-2 — texto. Sin par surface-dark: mismo motivo que accent-1
+$lxd-card-outline-bg: #ffffff; // Variante outline — fondo blanco (light)
+$lxd-card-outline-color: #111e30; // Variante outline — texto oscuro sobre blanco
+$lxd-card-outline-border-color: #111e30; // Variante outline — borde prussian
+$lxd-card-outline-border-width: 1px; // Variante outline — grosor de borde
+$lxd-card-selectable-focus-ring-width: 2px; // Tarjeta-opción: grosor del anillo de foco, el del botón
+$lxd-card-selectable-focus-ring-color: #111e30; // Tarjeta-opción: color del anillo de foco (prusia), el del botón primario
+$lxd-card-selectable-focus-ring-offset: 0.25rem; // Tarjeta-opción: separación del anillo, la del botón

package/src/tokens/scss/components/_chat.scss

@@ -0,0 +1,4 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-chat-bubble-max-width: 75%; // Anchura máxima de un globo dentro del hilo — 3/4 del ancho, para que quede aire de sobra al otro lado y un mensaje nunca ocupe la columna entera. Compartido por toda la familia de chat (hoy solo lo consume `MessageBubble`); vive aquí y no en su JSON porque es una medida del hilo, no del globo

package/src/tokens/scss/components/_checkbox.scss

@@ -0,0 +1,28 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-checkbox-target-size: 1.5rem; // Área sensible al puntero: 24×24 px como pide WCAG 2.5.8, aunque el dibujo sea menor. Se extiende de forma invisible y centrada, sin mover la maqueta
+$lxd-checkbox-size: 1.25em; // Tamaño del checkbox (ancho y alto)
+$lxd-checkbox-check-size: 0.65em; // Tamaño del checkmark interior
+$lxd-checkbox-border-radius: 0px; // Border radius
+$lxd-checkbox-border-width: 1px; // Border width
+$lxd-checkbox-border-style: solid; // Border style
+$lxd-checkbox-border-color: #111e30; // Color del borde
+$lxd-checkbox-bg: transparent; // Fondo sin marcar
+$lxd-checkbox-bg-checked: #111e30; // Fondo cuando está marcado
+$lxd-checkbox-check-color: #ffffff; // Color del checkmark
+$lxd-checkbox-cursor: pointer; // Cursor
+$lxd-checkbox-transition-duration: 150ms; // Duración de transiciones
+$lxd-checkbox-transition-easing: ease; // Easing de transiciones
+$lxd-checkbox-focus-ring-width: 2px; // Ancho del anillo de foco
+$lxd-checkbox-focus-ring-offset: 1px; // Separación del anillo de foco respecto al borde
+$lxd-checkbox-focus-ring-color: #111e30; // Color del anillo de foco
+$lxd-checkbox-error-border-color: #b30000; // Borde en error: el color de error (texto/borde, nunca fondo)
+$lxd-checkbox-disabled-cursor: not-allowed; // Cursor cuando está deshabilitado
+$lxd-checkbox-disabled-border-color: #d0d0d0; // Color del borde cuando está deshabilitado
+$lxd-checkbox-disabled-bg-checked: #d0d0d0; // Fondo marcado/indeterminado cuando está deshabilitado
+$lxd-checkbox-check-rotate: 15deg; // Rotación del checkmark en animación de entrada/salida
+$lxd-checkbox-sm-size: 1rem; // Tamaño del checkbox — variante sm (16px)
+$lxd-checkbox-sm-check-size: 0.55rem; // Tamaño del checkmark interior — variante sm
+$lxd-checkbox-lg-size: 1.5rem; // Tamaño del checkbox — variante lg (24px)
+$lxd-checkbox-lg-check-size: 0.85rem; // Tamaño del checkmark interior — variante lg

package/src/tokens/scss/components/_close-button.scss

@@ -0,0 +1,11 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-close-button-size-sm: 2rem; // Lado del botón en talla sm (32px): dentro de una tarjeta compacta — un aviso, un panel del dock
+$lxd-close-button-size-md: 2.5rem; // Lado del botón en talla md (40px, por defecto): la cabecera de un diálogo
+$lxd-close-button-size-lg: 3rem; // Lado del botón en talla lg (48px): objetivo táctil holgado
+$lxd-close-button-icon-size: 24px; // Glifo del aspa (24px), la talla por defecto de icono-botón. No cambia con la talla del botón: lo que crece es el área sensible, no el dibujo
+$lxd-close-button-color: #111e30; // Color del glifo: la tinta de la superficie, ya en reposo. El aspa NO tiene estado de hover —ni fondo ni cambio de color—: el único estado que marca es el foco
+$lxd-close-button-focus-ring-width: 2px; // Grosor del anillo de foco
+$lxd-close-button-focus-ring-offset: 2px; // Separación del anillo de foco (el rol focus gobierna ancho y separación)
+$lxd-close-button-focus-ring-color: #111e30; // Color del anillo de foco: la tinta de la superficie

package/src/tokens/scss/components/_code-block.scss

@@ -0,0 +1,36 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-code-block-padding-inline: 1rem; // Padding horizontal — heredado de card
+$lxd-code-block-padding-block-start: 1rem; // Padding block start — heredado de card
+$lxd-code-block-padding-block-end: 0.75rem; // Padding block end — heredado de card
+$lxd-code-block-border-radius: 0px; // Radio de esquinas — heredado de card
+$lxd-code-block-border-width: 1px; // Grosor de borde — heredado de card (variante outline)
+$lxd-code-block-border-color: #111e30; // Color de borde — heredado de card (variante outline, prussian), para dar contraste frente al fondo gris claro
+$lxd-code-block-color: #111e30; // Color de texto
+$lxd-code-block-bg: #f2f2f2; // Fondo gris claro — propio del componente (card no tiene variante gris)
+$lxd-code-block-font-family: "Google Sans Code", ui-monospace, monospace; // Monoespaciada (Google Sans Code) — propia del componente (card no define tipografía)
+$lxd-code-block-font-size: 0.875rem; // Tamaño de fuente del código — mismo tamaño que paragraph small
+$lxd-code-block-line-height: 1.65; // Interlineado del código — mismo criterio que paragraph small
+$lxd-code-block-header-gap: 0.5rem; // Separación en la cabecera (entre language tag y botón copiar) y entre la cabecera y el código
+$lxd-code-block-focus-ring-width: 2px; // Grosor del anillo de foco del área de código: el `<pre>` con scroll horizontal es focalizable con teclado
+$lxd-code-block-focus-ring-style: solid; // Estilo del anillo de foco del área de código
+$lxd-code-block-focus-ring-offset: 1px; // Separación del anillo de foco respecto al área de código
+$lxd-code-block-focus-ring-color: #111e30; // Color del anillo de foco — prusia, como el borde
+$lxd-code-block-token-keyword-color: #164b90; // Palabra reservada (`const`, `return`, `if`) — el azul prusia del extremo de la rampa secuencial, 7,68:1 sobre el gris del bloque
+$lxd-code-block-token-tag-color: #164b90; // Nombre de etiqueta en marcado (`<div>`) — misma tinta que la palabra reservada: es la palabra del lenguaje
+$lxd-code-block-token-constant-color: #164b90; // Constante del lenguaje (`true`, `null`, `undefined`) — misma tinta que la palabra reservada
+$lxd-code-block-token-string-color: #006616; // Literal de cadena — el verde base del sistema, 6,4:1 sobre el gris del bloque
+$lxd-code-block-token-regexp-color: #006616; // Expresión regular — misma tinta que la cadena: también es un literal
+$lxd-code-block-token-attribute-color: #006616; // Nombre de atributo en marcado (`class=`) — misma tinta que la cadena, con la que forma pareja visual
+$lxd-code-block-token-number-color: #9f431f; // Literal numérico — el extremo del brazo cálido de la divergente, 5,7:1 sobre el gris del bloque
+$lxd-code-block-token-function-color: #9f431f; // Nombre de función invocada o declarada — misma tinta cálida que el número
+$lxd-code-block-token-comment-color: #4a4a4a; // Comentario — la tinta secundaria del sistema, que es exactamente lo que un comentario es: 7,9:1 sobre el gris del bloque
+$lxd-code-block-token-punctuation-color: #4a4a4a; // Signos de puntuación y delimitadores (`{}`, `;`, `,`) — tinta secundaria: se retiran para que se lea lo que separan
+$lxd-code-block-token-operator-color: #4a4a4a; // Operadores (`=`, `=>`, `+`) — tinta secundaria, como la puntuación
+$lxd-code-block-token-variable-color: #111e30; // Identificador (nombre de variable o parámetro) — la tinta del bloque: los nombres que pone quien escribe el código son el texto corriente del fragmento, no una categoría del lenguaje
+$lxd-code-block-token-property-color: #111e30; // Nombre de propiedad de un objeto — la tinta del bloque, como el identificador
+$lxd-code-block-token-inserted-bg: #006616; // Línea añadida en un diff — relleno sólido universal (mismo color en las dos superficies), no tinta suelta: es el mismo dibujo que el resto de rellenos de feedback del sistema
+$lxd-code-block-token-inserted-color: #ffffff; // Línea añadida — contenido sobre el relleno, 7,2:1
+$lxd-code-block-token-deleted-bg: #b30000; // Línea eliminada en un diff — relleno sólido universal, por el mismo motivo que la añadida
+$lxd-code-block-token-deleted-color: #ffffff; // Línea eliminada — contenido sobre el relleno, 7,2:1

package/src/tokens/scss/components/_code.scss

@@ -0,0 +1,10 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-code-font-family: "Google Sans Code", ui-monospace, monospace; // Monoespaciada (Google Sans Code) — la de CodeBlock: un fragmento en línea y un bloque suelto se ven igual
+$lxd-code-font-size: 0.875rem; // Tamaño del fragmento — el de CodeBlock (un peldaño por debajo del cuerpo)
+$lxd-code-bg: #f2f2f2; // Fondo del fragmento — el de CodeBlock, con su mismo par oscuro
+$lxd-code-color: #111e30; // Tinta del fragmento — la de CodeBlock
+$lxd-code-border-radius: 0px; // Esquina recta, como todo el sistema
+$lxd-code-padding-block: 0px; // Cero: un fragmento en línea no puede romper el interlineado del párrafo que lo contiene
+$lxd-code-padding-inline: 0.25rem; // Aire horizontal, el único que se puede dar sin desalinear la línea

package/src/tokens/scss/components/_collapsible.scss

@@ -0,0 +1,18 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-collapsible-trigger-gap: 0.5rem; // Separación entre el rótulo del disparador y su chevron
+$lxd-collapsible-trigger-padding-block: 0.5rem; // Aire vertical del disparador
+$lxd-collapsible-trigger-font-family: "Google Sans Flex", system-ui, sans-serif; // Familia tipográfica del disparador
+$lxd-collapsible-trigger-font-size: 1rem; // Tamaño de fuente del disparador
+$lxd-collapsible-trigger-font-weight: 300; // Peso tipográfico del disparador
+$lxd-collapsible-trigger-color: #111e30; // Tinta del disparador
+$lxd-collapsible-trigger-cursor: pointer; // Cursor del disparador
+$lxd-collapsible-disabled-cursor: not-allowed; // Cursor cuando está deshabilitado
+$lxd-collapsible-disabled-opacity: 0.4; // Opacidad cuando está deshabilitado
+$lxd-collapsible-content-padding-block: 0.5rem; // Aire bajo el contenido plegable
+$lxd-collapsible-transition-duration: 150ms; // Duración de abrir y cerrar
+$lxd-collapsible-transition-easing: ease; // Easing de abrir y cerrar
+$lxd-collapsible-focus-ring-width: 2px; // Grosor del anillo de foco
+$lxd-collapsible-focus-ring-offset: 1px; // Separación del anillo de foco
+$lxd-collapsible-focus-ring-color: #111e30; // Color del anillo de foco

package/src/tokens/scss/components/_columns.scss

@@ -0,0 +1,10 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-columns-gap-md: 2rem; // Aire entre columnas — base
+$lxd-columns-gap-lg: 4rem; // Aire entre columnas — amplio
+$lxd-columns-stack-gap-md: 2rem; // Aire entre celdas apiladas (móvil) — base
+$lxd-columns-stack-gap-lg: 3rem; // Aire entre celdas apiladas (móvil) — amplio
+$lxd-columns-ratio-1-1: 1fr 1fr; // Reparto a dos columnas: mitad y mitad
+$lxd-columns-ratio-1-2: 1fr 2fr; // Reparto a dos columnas: un tercio y dos tercios
+$lxd-columns-ratio-2-1: 2fr 1fr; // Reparto a dos columnas: dos tercios y un tercio

package/src/tokens/scss/components/_container.scss

@@ -0,0 +1,14 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-container-padding-inline: 1rem; // Aire lateral entre el borde de la pantalla y el contenido
+$lxd-container-max-width-md: 768px; // Ancho del contenido — estrecho
+$lxd-container-max-width-lg: 1024px; // Ancho del contenido — medio
+$lxd-container-max-width-xl: 1280px; // Ancho del contenido — estándar de página pública
+$lxd-container-max-width-2xl: 1440px; // Ancho del contenido — amplio
+$lxd-container-max-width-3xl: 1920px; // Ancho del contenido — casi a sangre
+$lxd-container-padding-block-sm: 0.75rem; // Aire vertical compacto
+$lxd-container-padding-block-md: 1rem; // Aire vertical base
+$lxd-container-padding-block-lg: 2rem; // Aire vertical medio
+$lxd-container-padding-block-xl: 3rem; // Aire vertical amplio — banda de sección estándar
+$lxd-container-padding-block-2xl: 4rem; // Aire vertical extra — bandas destacadas

package/src/tokens/scss/components/_control.scss

@@ -0,0 +1,19 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-control-border-style: solid; // Estilo del borde
+$lxd-control-border-radius: 0px; // Radio del borde
+$lxd-control-border-width: 1px; // Grosor del borde
+$lxd-control-height: 2.5rem; // Altura del control de una línea: la talla md del sistema
+$lxd-control-font-family: "Google Sans Flex", system-ui, sans-serif; // Familia tipográfica
+$lxd-control-font-size: 1rem; // Tamaño de fuente
+$lxd-control-font-weight: 300; // Peso tipográfico
+$lxd-control-line-height: 1; // Interlineado
+$lxd-control-cursor: text; // Cursor por defecto
+$lxd-control-disabled-cursor: not-allowed; // Cursor cuando está deshabilitado
+$lxd-control-transition-duration: 150ms; // Duración de la transición
+$lxd-control-transition-easing: ease; // Curva de animación
+$lxd-control-focus-ring-width: 2px; // Grosor del anillo de foco
+$lxd-control-focus-ring-inset-offset: 1px; // Separación entre borde y anillo de foco
+$lxd-control-padding-inline: 1rem; // Padding inline — compartido por controles y elementos de formulario
+$lxd-control-padding-block: 1rem; // Padding block — solo para lo multilínea (Textarea) y para el aire de las filas de formulario. Los controles de una línea fijan su altura a la talla (`height`) con padding vertical 0

package/src/tokens/scss/components/_copyable-value.scss

@@ -0,0 +1,4 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-copyable-value-gap: 0.75rem; // Aire mínimo entre el final del valor y el botón de copiar, en línea

package/src/tokens/scss/components/_description-list.scss

@@ -0,0 +1,19 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-description-list-border-width: 1px; // Grosor del borde exterior y de los separadores internos
+$lxd-description-list-border-style: solid; // Estilo del borde
+$lxd-description-list-border-color: #111e30; // Color del borde: tinta de la superficie
+$lxd-description-list-cell-padding-block: 0.75rem; // Aire vertical de cada celda
+$lxd-description-list-cell-padding-inline: 1rem; // Aire horizontal de cada celda
+$lxd-description-list-term-font-family: "Google Sans Flex", system-ui, sans-serif; // Tipografía del término (dt): la de las etiquetas
+$lxd-description-list-term-font-size: 0.875rem; // Cuerpo del término: el de las etiquetas, no el de la prosa
+$lxd-description-list-term-font-weight: 500; // Peso del término
+$lxd-description-list-term-line-height: 1.5; // Interlineado del término
+$lxd-description-list-term-letter-spacing: 0em; // Tracking del término
+$lxd-description-list-term-color: #111e30; // Color del término
+$lxd-description-list-value-font-family: "Google Sans Flex", system-ui, sans-serif; // Tipografía del valor (dd)
+$lxd-description-list-value-font-size: 1rem; // El valor hereda el cuerpo de la superficie (16px en aplicación, 20px en la pública)
+$lxd-description-list-value-font-weight: 300; // Peso del valor
+$lxd-description-list-value-line-height: 1.5; // Interlineado heredado del cuerpo de la superficie
+$lxd-description-list-value-color: #111e30; // Color del valor

package/src/tokens/scss/components/_figure.scss

@@ -0,0 +1,13 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-figure-media-bg: #f2f2f2; // Fondo de la caja de imagen: se ve cuando la proporción no coincide con la de la foto (fit contain)
+$lxd-figure-caption-font-size: 0.875rem; // El pie es texto corriente, un peldaño por debajo del cuerpo de la superficie
+$lxd-figure-caption-line-height: 1.5; // Interlineado del pie
+$lxd-figure-caption-color: #4a4a4a; // Color del pie: texto secundario
+$lxd-figure-caption-gap: 0.5rem; // Aire entre la imagen y su pie
+$lxd-figure-ratio-1-1: 1 / 1; // Proporción cuadrada
+$lxd-figure-ratio-4-3: 4 / 3; // Proporción clásica
+$lxd-figure-ratio-3-2: 3 / 2; // Proporción de foto
+$lxd-figure-ratio-16-9: 16 / 9; // Proporción panorámica
+$lxd-figure-ratio-21-9: 21 / 9; // Proporción de banda