@studiolxd/brand 38.12.4

package/src/tokens/scss/components/_file-upload.scss

@@ -0,0 +1,72 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-file-upload-border-color: #111e30; // Borde del dropzone por defecto
+$lxd-file-upload-border-style: dashed; // Estilo de borde del dropzone
+$lxd-file-upload-border-width: 1px; // Grosor del borde
+$lxd-file-upload-border-radius: 0px; // Radio de esquinas del dropzone
+$lxd-file-upload-bg: #f2f2f2; // Fondo del dropzone
+$lxd-file-upload-padding-inline: 1.5rem; // Padding horizontal del dropzone
+$lxd-file-upload-gap: 0.25rem; // Espacio entre elementos dentro del dropzone
+$lxd-file-upload-text-color: #111e30; // Color del texto principal
+$lxd-file-upload-subtext-color: #4a4a4a; // Color del texto secundario y restricciones
+$lxd-file-upload-icon-color: #111e30; // Color del icono upload
+$lxd-file-upload-transition-duration: 150ms; // Duración de transiciones de estado
+$lxd-file-upload-transition-easing: ease; // Easing de transiciones
+$lxd-file-upload-drag-border-color: #111e30; // Borde cuando hay drag activo
+$lxd-file-upload-drag-border-style: solid; // Estilo de borde en drag activo
+$lxd-file-upload-drag-bg: #ffffff; // Fondo en drag activo
+$lxd-file-upload-error-border-color: #b30000; // Borde en estado de error
+$lxd-file-upload-error-border-style: solid; // Estilo de borde en error
+$lxd-file-upload-error-bg: #f2f2f2; // Fondo en estado de error
+$lxd-file-upload-disabled-opacity: 0.5; // Opacidad cuando está deshabilitado
+$lxd-file-upload-disabled-cursor: not-allowed; // Cursor cuando está deshabilitado: el de los campos
+$lxd-file-upload-list-gap: 0.5rem; // Espacio entre items de la lista
+$lxd-file-upload-list-margin-block-start: 0.75rem; // Margen superior de la lista de archivos
+$lxd-file-upload-item-bg: #ffffff; // Fondo de cada item
+$lxd-file-upload-item-border-color: #111e30; // Borde de cada item
+$lxd-file-upload-item-border-width: 1px; // Grosor de borde del item
+$lxd-file-upload-item-border-radius: 0px; // Radio de esquinas del item
+$lxd-file-upload-item-padding-block: 0.5rem; // Padding vertical del item
+$lxd-file-upload-item-padding-inline: 0.75rem; // Padding horizontal del item
+$lxd-file-upload-item-gap: 0.75rem; // Espacio entre thumb, info y botón
+$lxd-file-upload-item-name-font-family: "Google Sans Flex", system-ui, sans-serif; // Fuente del nombre de archivo
+$lxd-file-upload-item-name-font-size: 1rem; // El nombre de archivo hereda el cuerpo de la superficie
+$lxd-file-upload-item-name-font-weight: 300; // Peso del nombre de archivo
+$lxd-file-upload-item-name-color: #111e30; // Color del nombre de archivo
+$lxd-file-upload-item-size-font-size: 0.875rem; // Tamaño del peso del archivo
+$lxd-file-upload-item-size-color: #4a4a4a; // Color del peso del archivo
+$lxd-file-upload-item-error-color: #b30000; // Color del mensaje de error por archivo
+$lxd-file-upload-item-error-font-size: 0.875rem; // Tamaño del mensaje de error por archivo
+$lxd-file-upload-item-error-border-color: #b30000; // Borde del item con error
+$lxd-file-upload-item-error-bg: #ffffff; // Fondo del item con error
+$lxd-file-upload-thumb-size: 2.5rem; // Lado de la miniatura: la talla md del sistema (el mismo 2.5rem de antes, ahora con nombre)
+$lxd-file-upload-thumb-border-radius: 0px; // Radio del thumbnail
+$lxd-file-upload-thumb-bg: #f2f2f2; // Fondo del thumb para iconos (no imagen)
+$lxd-file-upload-thumb-icon-color: #6b6b6b; // Color del icono de archivo genérico
+$lxd-file-upload-remove-color: #4a4a4a; // Color del botón eliminar
+$lxd-file-upload-remove-color-hover: #b30000; // Color del botón eliminar al hacer hover
+$lxd-file-upload-progress-margin-block-start: 0.75rem; // Margen superior de la barra de progreso
+$lxd-file-upload-padding-block: 3rem; // Aire vertical del dropzone — talla md
+$lxd-file-upload-sm-padding-block: 2rem; // Aire vertical del dropzone — talla sm
+$lxd-file-upload-lg-padding-block: 4rem; // Aire vertical del dropzone — talla lg
+$lxd-file-upload-sm-padding-inline: 1rem; // Aire horizontal del dropzone — talla sm
+$lxd-file-upload-lg-padding-inline: 2rem; // Aire horizontal del dropzone — talla lg
+$lxd-file-upload-text-font-family: "Google Sans Flex", system-ui, sans-serif; // Tipografía del texto del dropzone
+$lxd-file-upload-text-font-size: 1rem; // El texto del dropzone es texto corriente: hereda el cuerpo de la superficie — talla md
+$lxd-file-upload-sm-text-font-size: 0.875rem; // Texto del dropzone — talla sm: un peldaño por debajo del cuerpo
+$lxd-file-upload-lg-text-font-size: 1.25rem; // Texto del dropzone — talla lg: un peldaño por encima
+$lxd-file-upload-text-font-weight: 300; // Peso del texto del dropzone
+$lxd-file-upload-subtext-font-weight: 300; // Peso del texto secundario del dropzone: el normal, para que no compita con la instrucción
+$lxd-file-upload-subtext-font-size: 0.875rem; // Tamaño de las restricciones (peso máximo, número de archivos) — talla md
+$lxd-file-upload-sm-subtext-font-size: 0.875rem; // Restricciones — talla sm: ya está en el peldaño menor de la escala de interfaz
+$lxd-file-upload-lg-subtext-font-size: 1rem; // Restricciones — talla lg: sube al cuerpo
+$lxd-file-upload-sm-thumb-size: 2rem; // Lado de la miniatura — talla sm
+$lxd-file-upload-lg-thumb-size: 3rem; // Lado de la miniatura — talla lg
+$lxd-file-upload-sm-item-name-font-size: 0.875rem; // Nombre del archivo — talla sm
+$lxd-file-upload-lg-item-name-font-size: 1.25rem; // Nombre del archivo — talla lg
+$lxd-file-upload-item-info-gap: 0.25rem; // Aire entre el nombre del archivo y su peso (antes 2px, fuera de la escala)
+$lxd-file-upload-border-dash-length: 1rem; // Largo de cada trazo del borde discontinuo del dropzone
+$lxd-file-upload-border-dash-gap: 0.5rem; // Hueco entre trazos del borde discontinuo (antes 10px, fuera de la escala)
+$lxd-file-upload-remove-focus-ring-offset: 1px; // Separación del anillo de foco del aspa
+$lxd-file-upload-remove-border-radius: 0px; // Radio del aspa — recto, como toda esquina del sistema

package/src/tokens/scss/components/_floating-dock.scss

@@ -0,0 +1,40 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-floating-dock-z-index: 100; // Capa del ancla: la del chrome de aplicación (100). Por debajo del velo y del modal, para que un diálogo del producto siga tapando al dock
+$lxd-floating-dock-offset-inline: 1.5rem; // Distancia al borde lateral de la ventana (24px). Se suma al `safe-area-inset` del dispositivo, nunca lo sustituye
+$lxd-floating-dock-offset-block: 1.5rem; // Distancia al borde superior o inferior de la ventana (24px). Se suma al `safe-area-inset`
+$lxd-floating-dock-gap: 0.75rem; // Separación entre el lanzador y el panel
+$lxd-floating-dock-trigger-size: 3rem; // Caja del lanzador (48px, la talla `lg` de icono-botón): objetivo táctil holgado. Es también lo que el panel reserva para no montarse encima
+$lxd-floating-dock-trigger-icon-size: 24px; // Glifo del lanzador (24px), la talla por defecto de icono-botón
+$lxd-floating-dock-badge-offset: 0.25rem; // Distancia del borde del lanzador a la esquina donde se centra el contador
+$lxd-floating-dock-badge-fill: #b30000; // El contador es rojo: el relleno de error del sistema, universal en claro y oscuro
+$lxd-floating-dock-badge-color: #ffffff; // Cifra sobre el relleno
+$lxd-floating-dock-panel-inline-size: 22rem; // Ancho del panel (352px). Medida de layout, como `modal.width-max`: no sale de la escala de espaciado
+$lxd-floating-dock-panel-block-size: 32rem; // Alto del panel (512px). Se recorta contra la ventana: nunca sobrepasa el alto disponible
+$lxd-floating-dock-panel-bg: #ffffff; // Fondo del panel
+$lxd-floating-dock-panel-border-width: 1px; // Grosor del borde: es lo que separa el panel del contenido que tiene debajo
+$lxd-floating-dock-panel-border-color: #111e30; // Color del borde
+$lxd-floating-dock-panel-border-radius: 0px; // Radio del panel: esquina recta
+$lxd-floating-dock-panel-shadow: none; // Sombra del panel
+$lxd-floating-dock-panel-padding-block: 1rem; // Aire vertical del panel
+$lxd-floating-dock-panel-padding-inline: 1rem; // Aire horizontal del panel
+$lxd-floating-dock-panel-gap: 0.75rem; // Separación entre la cabecera y el cuerpo
+$lxd-floating-dock-panel-enter-offset: 0.5rem; // Desplazamiento del panel al entrar y al salir (8px), en la dirección de la esquina en la que está anclado
+$lxd-floating-dock-header-gap: 0.25rem; // Separación entre el título y la descripción
+$lxd-floating-dock-title-color: #111e30; // Color del título
+$lxd-floating-dock-title-font-size: 1.25rem; // Tamaño del título: paso 4 de la escala de títulos (20px), el de un H5 — sube un peldaño en la superficie pública
+$lxd-floating-dock-title-font-weight: 500; // Peso del título
+$lxd-floating-dock-description-font-size: 0.875rem; // La descripción va un peldaño por debajo del cuerpo de la superficie
+$lxd-floating-dock-description-color: #4a4a4a; // Color de la descripción
+$lxd-floating-dock-close-size: 2rem; // Caja del botón de cerrar (32px): el panel es compacto y el aspa no compite con el título
+$lxd-floating-dock-close-icon-size: 24px; // Glifo del botón de cerrar (24px)
+$lxd-floating-dock-close-color: #111e30; // Color del glifo: la tinta de la superficie, ya en reposo
+$lxd-floating-dock-close-focus-ring-width: 2px; // Grosor del anillo de foco del aspa
+$lxd-floating-dock-close-focus-ring-offset: 2px; // Separación del anillo de foco del aspa
+$lxd-floating-dock-close-focus-ring-color: #111e30; // Color del anillo de foco del aspa
+$lxd-floating-dock-focus-ring-width: 2px; // Grosor del anillo de foco del panel (lo recibe al abrirse)
+$lxd-floating-dock-focus-ring-offset: 2px; // Separación del anillo de foco del panel
+$lxd-floating-dock-focus-ring-color: #111e30; // Color del anillo de foco del panel: la tinta de la superficie
+$lxd-floating-dock-transition-duration: 250ms; // Duración de la entrada y la salida del panel
+$lxd-floating-dock-transition-easing: ease-in-out; // Curva de la entrada y la salida del panel

package/src/tokens/scss/components/_floating-panel.scss

@@ -0,0 +1,11 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-floating-panel-bg: #ffffff; // Fondo de cualquier panel flotante (popover, context-menu…)
+$lxd-floating-panel-border-width: 1px; // Grosor del borde
+$lxd-floating-panel-border-color: #111e30; // Color del borde — prussian en modo claro
+$lxd-floating-panel-border-radius: 0px; // Sin radio de esquinas
+$lxd-floating-panel-shadow: none; // Sin sombra
+$lxd-floating-panel-z-index: 400; // Capa z — por encima del modal (1001) para que los paneles flotantes sean visibles dentro de modales
+$lxd-floating-panel-transition-duration: 150ms; // Duración de la animación de entrada/salida
+$lxd-floating-panel-transition-easing: ease; // Easing de la animación

package/src/tokens/scss/components/_hero.scss

@@ -0,0 +1,10 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-hero-actions-space-before: 2rem; // Aire entre el texto y la fila de acciones (32px): entre componentes
+$lxd-hero-space-block-start: 4rem; // Aire sobre la portada (64px): el ritmo de una banda destacada. Es de la sección, no del envoltorio
+$lxd-hero-space-block-end: 4rem; // Aire bajo la portada (64px)
+$lxd-hero-space-block-start-compact: 3rem; // Aire sobre la portada en móvil (48px, por debajo de md): la pantalla es más corta y el aire baja un peldaño
+$lxd-hero-space-block-end-compact: 3rem; // Aire bajo la portada en móvil (48px, por debajo de md)
+$lxd-hero-title-size-compact: 3.5rem; // Talla del título de la portada en móvil (56px, por debajo de md): el paso 10 de la escala son 96px fijos en toda anchura y no cabe en una pantalla de 360px
+$lxd-hero-actions-block-width: 100%; // Ancho de cada acción de la portada en móvil (todo el ancho, por debajo de md): en una pantalla estrecha dos botones en fila se quedan sin sitio para su texto

package/src/tokens/scss/components/_highlight.scss

@@ -0,0 +1,8 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-highlight-actions-space-before: 2rem; // Aire entre el texto y la fila de acciones (32px): entre componentes, el mismo que en `Hero`
+$lxd-highlight-space-block-start: 4rem; // Aire sobre la banda destacada (64px): el mismo ritmo que `Hero`. Es de la sección, no del envoltorio
+$lxd-highlight-space-block-end: 4rem; // Aire bajo la banda destacada (64px)
+$lxd-highlight-space-block-start-compact: 3rem; // Aire sobre la banda en móvil (48px, por debajo de md)
+$lxd-highlight-space-block-end-compact: 3rem; // Aire bajo la banda en móvil (48px, por debajo de md)

package/src/tokens/scss/components/_icon.scss

@@ -0,0 +1,8 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-icon-size-xs: 8px; // Marca: el punto de estado, el chevron de un desplegable
+$lxd-icon-size-sm: 16px; // Dentro de un control: junto al texto de un botón, en una celda
+$lxd-icon-size-md: 24px; // Por defecto: iconos-botón, navegación, listas
+$lxd-icon-size-lg: 48px; // Destacado: cabecera de un estado vacío, un aviso
+$lxd-icon-size-xl: 64px; // Ilustrativo: estados vacíos a pantalla completa

package/src/tokens/scss/components/_inline.scss

@@ -0,0 +1,6 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-inline-gap-sm: 0.5rem; // Aire entre piezas en fila — compacto (8px): etiquetas, chips
+$lxd-inline-gap-md: 1rem; // Aire entre piezas en fila — base (16px): botones y enlaces de una fila de acciones
+$lxd-inline-gap-lg: 1.5rem; // Aire entre piezas en fila — amplio (24px): entre componentes

package/src/tokens/scss/components/_input-phone.scss

@@ -0,0 +1,17 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-input-phone-country-width: 4.5rem; // Ancho del selector de país
+$lxd-input-phone-country-border-width: 1px; // Grosor del separador entre país y número
+$lxd-input-phone-country-border-style: solid; // Estilo del separador
+$lxd-input-phone-country-border-color: #111e30; // Color del separador
+$lxd-input-phone-content-z-index: 400; // Z-index del dropdown de país
+$lxd-input-phone-country-gap: 0.25rem; // Separación entre bandera/código y chevron en el selector de país
+$lxd-input-phone-content-max-height: 17.5rem; // Altura máxima del dropdown de país
+$lxd-input-phone-country-icon-size: 0.625rem; // Ancho del icono chevron en el selector de país
+$lxd-input-phone-country-icon-transition-easing: ease; // Curva del giro del chevron: la de los campos
+$lxd-input-phone-country-item-padding-block: 0.5rem; // Aire vertical de cada país en la lista: el de las opciones del Select
+$lxd-input-phone-sm-country-width: 3.5rem; // Ancho del selector de país — variante sm
+$lxd-input-phone-lg-country-width: 5.5rem; // Ancho del selector de país — variante lg
+$lxd-input-phone-country-item-highlighted-bg: #111e30; // Relleno del país resaltado en la lista — el del Select: la inversión de marca
+$lxd-input-phone-country-item-highlighted-color: #ffffff; // Texto del país resaltado — el del Select: el prefijo lo hereda por `currentColor`

package/src/tokens/scss/components/_input.scss

@@ -0,0 +1,40 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-input-border-radius: 0px; // Border radius
+$lxd-input-border-width: 1px; // Border width
+$lxd-input-border-style: solid; // Border style
+$lxd-input-width: 100%; // Inputs are always full width
+$lxd-input-height: 2.5rem; // Altura del campo: la talla md del sistema. Las tallas cambian la altura, no el padding vertical
+$lxd-input-sm-height: 2rem; // Altura — sm
+$lxd-input-lg-height: 3rem; // Altura — lg
+$lxd-input-padding-inline: 1rem; // Inline (horizontal) padding
+$lxd-input-font-family: "Google Sans Flex", system-ui, sans-serif; // Font family
+$lxd-input-font-size: 1rem; // Font size
+$lxd-input-font-weight: 300; // Font weight
+$lxd-input-line-height: 1; // Line height
+$lxd-input-cursor: text; // Cursor
+$lxd-input-transition-duration: 150ms; // Transition duration
+$lxd-input-transition-easing: ease; // Transition easing
+$lxd-input-bg: #ffffff; // Background
+$lxd-input-color: #111e30; // Text color
+$lxd-input-border-color: #111e30; // Border color
+$lxd-input-placeholder-color: #4a4a4a; // Placeholder: el gris de placeholder del sistema, para que un campo vacío no parezca relleno
+$lxd-input-focus-border-color: #111e30; // Border color on focus
+$lxd-input-focus-ring-width: 2px; // Focus ring width
+$lxd-input-focus-ring-inset-offset: 1px; // Gap between border and focus ring
+$lxd-input-focus-ring-color: #111e30; // Focus ring color
+$lxd-input-disabled-cursor: not-allowed; // Cursor when disabled
+$lxd-input-disabled-bg: #f2f2f2; // Background when disabled
+$lxd-input-disabled-color: #4a4a4a; // Text color when disabled
+$lxd-input-disabled-border-color: #d0d0d0; // Border color when disabled
+$lxd-input-error-bg: #ffffff; // Error background
+$lxd-input-error-color: #111e30; // Error text color
+$lxd-input-error-border-color: #b30000; // Borde en error: el color de error (excepción a «bordes en prusia»)
+$lxd-input-error-placeholder-color: #4a4a4a; // Placeholder en error: el mismo gris
+$lxd-input-error-focus-border-color: #b30000; // Borde en foco+error
+$lxd-input-error-focus-ring-color: #b30000; // Error focus ring color
+$lxd-input-sm-padding-inline: 0.75rem; // Inline padding — sm
+$lxd-input-sm-font-size: 0.875rem; // Font size — sm
+$lxd-input-lg-padding-inline: 1.5rem; // Inline padding — lg
+$lxd-input-lg-font-size: 1.25rem; // Font size — lg

package/src/tokens/scss/components/_kbd.scss

@@ -0,0 +1,23 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-kbd-border-radius: 0px; // Esquina recta, como todo el sistema
+$lxd-kbd-border-width: 1px; // Grosor del borde: es lo que da relieve a la tecla (el sistema no proyecta sombras)
+$lxd-kbd-border-color: #111e30; // Borde del keycap: tinta de la superficie
+$lxd-kbd-bg: #f2f2f2; // Fondo del keycap: la superficie clara secundaria del sistema
+$lxd-kbd-color: #111e30; // Color del símbolo de la tecla
+$lxd-kbd-font-family: "Google Sans Code", ui-monospace, monospace; // Monoespaciada (Google Sans Code) — alineada con el contenido técnico
+$lxd-kbd-font-size: 1rem; // 16px — talla md (por defecto)
+$lxd-kbd-font-weight: 500; // Peso de énfasis: legibilidad en tamaño compacto
+$lxd-kbd-line-height: 1; // Sin interlineado extra — el contenido se centra con flexbox
+$lxd-kbd-padding-block: 0.25rem; // Aire vertical (4px)
+$lxd-kbd-padding-inline: 0.75rem; // Aire horizontal (12px)
+$lxd-kbd-min-size: calc(1rem * 1 + 2 * 0.25rem + 2 * 1px); // Ancho mínimo: exactamente la altura de la tecla, así una tecla de un carácter sale casi cuadrada (el ancho real crece por el aire horizontal y el propio carácter, siempre mayor que este mínimo). No es una talla de componente —un keycap es una marca dentro del texto, no un control— sino la medida que sale de su propio cuerpo, su aire y sus bordes (26px en md)
+$lxd-kbd-sm-font-size: 0.875rem; // 14px — talla sm
+$lxd-kbd-sm-padding-block: 0.25rem; // Aire vertical sm (4px)
+$lxd-kbd-sm-padding-inline: 0.5rem; // Aire horizontal sm (8px)
+$lxd-kbd-sm-min-size: calc(0.875rem * 1 + 2 * 0.25rem + 2 * 1px); // Ancho mínimo sm: la misma fórmula con el cuerpo y el aire de la talla (24px)
+$lxd-kbd-lg-font-size: 1.25rem; // 20px — talla lg (el cuerpo de la superficie pública)
+$lxd-kbd-lg-padding-block: 0.5rem; // Aire vertical lg (8px)
+$lxd-kbd-lg-padding-inline: 1rem; // Aire horizontal lg (16px)
+$lxd-kbd-lg-min-size: calc(1.25rem * 1 + 2 * 0.5rem + 2 * 1px); // Ancho mínimo lg: la misma fórmula con el cuerpo y el aire de la talla (38px)

package/src/tokens/scss/components/_label.scss

@@ -0,0 +1,11 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-label-font-family: "Google Sans Flex", system-ui, sans-serif; // Font family
+$lxd-label-font-size: 0.875rem; // Font size (14px)
+$lxd-label-sm-font-size: 0.875rem; // Font size — sm (14px: la etiqueta no baja de la talla de interfaz)
+$lxd-label-lg-font-size: 1.25rem; // Font size — lg (20px: la del control, como en sm)
+$lxd-label-font-weight: 500; // Font weight
+$lxd-label-line-height: 1.5; // Line height
+$lxd-label-color: #111e30; // Text color
+$lxd-label-letter-spacing: 0em; // Letter spacing

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

@@ -0,0 +1,7 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-legal-footer-padding-block: 1.5rem; // Aire arriba y abajo del pie
+$lxd-legal-footer-gap: 0.75rem; // Entre el título y la lista de enlaces
+$lxd-legal-footer-links-gap: 1rem; // Entre enlaces
+$lxd-legal-footer-links-gap-stacked: 0.75rem; // Separación entre enlaces apilados (móvil, por debajo de md)

package/src/tokens/scss/components/_link.scss

@@ -0,0 +1,20 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-link-color: #111e30; // El enlace no tiene color propio: es texto, y lo distingue el subrayado
+$lxd-link-hover-color: #111e30; // Color en hover
+$lxd-link-underline-width: 1px; // El subrayado es una línea bajo el enlace (borde, no text-decoration): cubre texto e icono y se separa del texto. Su grosor
+$lxd-link-hover-underline-width: 0px; // Grosor de la línea en hover (en claro desaparece)
+$lxd-link-underline-offset: 0.25rem; // Separación entre el texto y la línea
+$lxd-link-icon-gap: 0.5rem; // Aire entre el icono y el texto del enlace
+$lxd-link-cursor: pointer; // Cursor
+$lxd-link-focus-ring-width: 2px; // Grosor del anillo de foco
+$lxd-link-focus-ring-offset: 1px; // Separación entre el enlace y el anillo
+$lxd-link-focus-ring-color: #111e30; // Anillo de foco
+$lxd-link-ink-color: #111e30; // Tono ink (enlaces utilitarios: legal, volver): tinta
+$lxd-link-ink-underline-width: 1px; // Tono ink: línea en reposo, en las dos superficies
+$lxd-link-ink-hover-underline-width: 0px; // Tono ink: sin línea en hover
+$lxd-link-accent-1-color: #baabff; // Tono accent-1 (lavanda): color saturado que ya contrasta en cualquier superficie, sin par surface-dark (mismo motivo que Card/Step/ProgressBar)
+$lxd-link-accent-1-hover-color: #baabff; // Tono accent-1: mismo color en hover, como accent — lo que cambia es la línea
+$lxd-link-accent-1-underline-width: 1px; // Tono accent-1: línea en reposo, igual en las dos superficies (el color no cambia)
+$lxd-link-accent-1-hover-underline-width: 0px; // Tono accent-1: sin línea en hover, como accent

package/src/tokens/scss/components/_logo.scss

@@ -0,0 +1,9 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-logo-height-sm: 2rem; // Alto del logotipo en barras compactas (Sidebar). El ancho sale de la proporción del trazado
+$lxd-logo-height-md: 2.5rem; // Alto por defecto: cabeceras y formularios de acceso
+$lxd-logo-height-lg: 3rem; // Alto destacado: pie de página
+$lxd-logo-height-xl: 64px; // Alto de marca: la cabecera del sitio. Es la talla ilustrativa de la escala de iconos (64px), no una talla de control
+$lxd-logo-height-xxl: calc(64px * 4 / 3); // Alto de marca mayor: la cabecera del sitio por defecto. Sigue la progresión de la escala —el mismo salto que hay de lg a xl (4/3)— sobre la talla xl: 85,33px
+$lxd-logo-color: #111e30; // Color del trazado sobre superficie clara

package/src/tokens/scss/components/_logomark.scss

@@ -0,0 +1,8 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-logomark-size-sm: 2rem; // Lado del isotipo en barras compactas. Es cuadrado: alto y ancho coinciden
+$lxd-logomark-size-md: 2.5rem; // Lado por defecto: cabeceras y avatares de aplicación
+$lxd-logomark-size-lg: 3rem; // Lado destacado: pie de página y tarjetas
+$lxd-logomark-size-xl: 64px; // Lado de marca (64px): la talla ilustrativa de la escala de iconos, no una talla de control
+$lxd-logomark-color: #111e30; // Color del trazado sobre superficie clara

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

@@ -0,0 +1,13 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-menu-button-size-sm: 2rem; // Lado del botón en talla sm
+$lxd-menu-button-size-md: 2.5rem; // Lado del botón en talla md (por defecto)
+$lxd-menu-button-size-lg: 3rem; // Lado del botón en talla lg: la cabecera del sitio, con el glifo a 48px
+$lxd-menu-button-color: #111e30; // Color del glifo
+$lxd-menu-button-transition-duration: 250ms; // Duración del paso de barras a aspa
+$lxd-menu-button-transition-easing: ease-in-out; // Curva del paso de barras a aspa: movimiento
+$lxd-menu-button-line-shift: 6px; // Cuánto recorre cada barra al plegarse en aspa. Va en unidades del viewBox del icono (24), donde 6 es el paso entre las tres líneas del glifo `menu`: con ese recorrido la primera y la tercera aterrizan exactamente sobre el aspa de `close`
+$lxd-menu-button-focus-ring-width: 2px; // Grosor del anillo de foco
+$lxd-menu-button-focus-ring-offset: 2px; // Separación del anillo de foco
+$lxd-menu-button-focus-ring-color: #111e30; // Color del anillo de foco

package/src/tokens/scss/components/_message-bubble.scss

@@ -0,0 +1,17 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-message-bubble-padding-block: 0.75rem; // Aire vertical del globo
+$lxd-message-bubble-padding-inline: 1rem; // Aire horizontal del globo
+$lxd-message-bubble-border-radius: 0px; // Radio del globo: recto en las cuatro esquinas, como todo el sistema. Quien distingue al emisor es la alineación y la cola, no una esquina redondeada
+$lxd-message-bubble-border-width: 1px; // Grosor del contorno del globo y de su cola
+$lxd-message-bubble-border-style: solid; // Estilo del contorno
+$lxd-message-bubble-max-width: 75%; // Anchura máxima del globo dentro del hilo — cascada desde `chat`, la medida es del hilo, no del globo
+$lxd-message-bubble-font-family: "Google Sans Flex", system-ui, sans-serif; // Familia tipográfica
+$lxd-message-bubble-font-size: 1rem; // El mensaje hereda el cuerpo de la superficie (16px en aplicación, 20px en la pública)
+$lxd-message-bubble-font-weight: 300; // Peso tipográfico
+$lxd-message-bubble-line-height: 1.65; // Interlineado
+$lxd-message-bubble-color: #111e30; // Tinta del mensaje. La misma para los dos emisores: el globo no tiene relleno, así que el texto va sobre la superficie
+$lxd-message-bubble-border-color: #111e30; // Contorno del globo. Único separador del mensaje: no hay relleno ni sombra
+$lxd-message-bubble-tail-size: 0.75rem; // Lado de la cola triangular que nace en la esquina inferior del lado del emisor y apunta hacia él
+$lxd-message-bubble-tail-fill: #ffffff; // Color con el que se vacía la cola: el de la superficie que hay detrás del globo. Es lo que interrumpe el borde donde nace la cola y deja el triángulo en puro contorno. Si el hilo vive sobre otra superficie, se repunta aquí

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

@@ -0,0 +1,51 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-multi-select-border-radius: 0px; // Radio del borde del trigger
+$lxd-multi-select-border-width: 1px; // Grosor del borde
+$lxd-multi-select-border-style: solid; // Estilo del borde
+$lxd-multi-select-border-color: #111e30; // Color del borde
+$lxd-multi-select-error-border-color: #b30000; // Borde en error: el color de error
+$lxd-multi-select-height: 2.5rem; // Altura mínima del trigger: la talla md del sistema. Crece solo si las pills ocupan más de una línea
+$lxd-multi-select-sm-height: 2rem; // Altura mínima del trigger — sm
+$lxd-multi-select-lg-height: 3rem; // Altura mínima del trigger — lg
+$lxd-multi-select-padding-inline: 1rem; // Padding inline del trigger
+$lxd-multi-select-font-family: "Google Sans Flex", system-ui, sans-serif; // Familia tipográfica
+$lxd-multi-select-font-size: 1rem; // Tamaño de fuente
+$lxd-multi-select-line-height: 1; // Interlineado del trigger
+$lxd-multi-select-font-weight: 300; // Peso tipográfico
+$lxd-multi-select-color: #111e30; // Color del texto
+$lxd-multi-select-placeholder-color: #4a4a4a; // Color del placeholder
+$lxd-multi-select-bg: #ffffff; // Fondo del trigger
+$lxd-multi-select-content-gap: 0.5rem; // Aire entre el contenido del disparador y el chevron
+$lxd-multi-select-icon-transition: 150ms; // Duración de la transición del icono
+$lxd-multi-select-focus-ring-width: 2px; // Grosor del anillo de foco
+$lxd-multi-select-focus-ring-color: #111e30; // Color del anillo de foco
+$lxd-multi-select-content-bg: #ffffff; // Fondo del dropdown
+$lxd-multi-select-content-border-color: #111e30; // Borde del dropdown
+$lxd-multi-select-content-z-index: 400; // Z-index del dropdown
+$lxd-multi-select-content-max-height: var(--available-height); // Altura máxima del dropdown (por defecto, el espacio disponible en viewport que expone Base UI)
+$lxd-multi-select-item-padding-block: 0.5rem; // Padding block de cada opción
+$lxd-multi-select-pill-bg: #111e30; // Fondo de la pill de valor seleccionado
+$lxd-multi-select-pill-color: #ffffff; // Texto de la pill
+$lxd-multi-select-pill-border-radius: 9999px; // Radio de la pill
+$lxd-multi-select-pill-padding-block: 0.25rem; // Padding block de la pill
+$lxd-multi-select-pill-padding-inline: 0.5rem; // Padding inline de la pill
+$lxd-multi-select-pill-gap: 0.25rem; // Separación entre texto y botón × en la pill
+$lxd-multi-select-pill-font-size: 0.875rem; // Tamaño de fuente de la pill
+$lxd-multi-select-disabled-opacity: 0.4; // Opacidad del control deshabilitado: el mismo velo que el resto de controles del sistema
+$lxd-multi-select-disabled-cursor: not-allowed; // Cursor sobre el control deshabilitado
+$lxd-multi-select-pill-line-height: 1; // Interlineado de la píldora: sin holgura, la píldora la mide su propio aire
+$lxd-multi-select-pill-remove-opacity: 0.7; // Opacidad del aspa en reposo: presente pero en segundo plano
+$lxd-multi-select-pill-remove-hover-opacity: 1; // Opacidad del aspa bajo el puntero
+$lxd-multi-select-item-selected-font-weight: 700; // Peso de la opción ya elegida en la lista: lo elegido se dice con peso, no con relleno
+$lxd-multi-select-icon-transition-easing: ease; // Curva del giro del chevron al abrir
+$lxd-multi-select-selection-gap: 0.25rem; // Separación entre pills. Nombrado `selection-gap`, no `values-gap`: Style Dictionary 4.4.0 confunde un segmento de ruta que empieza por «value» (`values-gap`) con el sufijo `.value`/`.$value` del propio alias DTCG (`getReferences.js`, `variable.replace('.value', '')` con un `String.replace` de texto plano, no una regex anclada) y no resuelve la referencia encadenada — ver `surface-dark-derived.css`/release-check § tokens sin resolver
+$lxd-multi-select-sm-font-size: 0.875rem; // Tamaño de fuente — variante sm
+$lxd-multi-select-sm-padding-inline: 0.5rem; // Padding inline del trigger — variante sm
+$lxd-multi-select-sm-item-padding-block: 0.25rem; // Padding block de cada opción — variante sm
+$lxd-multi-select-lg-font-size: 1.25rem; // Tamaño de fuente — variante lg
+$lxd-multi-select-lg-padding-inline: 1.5rem; // Padding inline del trigger — variante lg
+$lxd-multi-select-lg-item-padding-block: 0.75rem; // Padding block de cada opción — variante lg
+$lxd-multi-select-item-highlighted-bg: #111e30; // Relleno de la opción resaltada — el del Select: la inversión de marca
+$lxd-multi-select-item-highlighted-color: #ffffff; // Texto de la opción resaltada — el del Select

package/src/tokens/scss/components/_number-badge.scss

@@ -0,0 +1,26 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-number-badge-min-size: 1rem; // 16px: una marca, no un control (fuera de la escala de tallas); cabe un dígito redondo, dos en píldora
+$lxd-number-badge-padding-inline: 0.25rem; // Padding horizontal para números de más de un dígito
+$lxd-number-badge-border-radius: 9999px; // Forma circular
+$lxd-number-badge-font-family: "Google Sans Flex", system-ui, sans-serif; // Familia tipográfica
+$lxd-number-badge-font-size: 0.75rem; // La cifra: el cuerpo de marca (12px)
+$lxd-number-badge-font-weight: 300; // Peso normal: una cifra, no un título
+$lxd-number-badge-line-height: 1; // Sin interlineado extra — centrado por flexbox
+$lxd-number-badge-primary-bg: #111e30; // Fondo primary (prussian)
+$lxd-number-badge-primary-color: #ffffff; // Texto sobre primary
+$lxd-number-badge-accent-1-bg: #baabff; // Fondo accent-1 (lavender)
+$lxd-number-badge-accent-1-color: #111e30; // Texto sobre accent-1
+$lxd-number-badge-accent-2-bg: #ffcd00; // Fondo accent-2 (yellow)
+$lxd-number-badge-accent-2-color: #111e30; // Texto sobre accent-2
+$lxd-number-badge-support-1-bg: #20e38e; // Fondo support-1 (emerald)
+$lxd-number-badge-support-1-color: #111e30; // Texto sobre support-1
+$lxd-number-badge-support-2-bg: #f05e1c; // Fondo support-2 (cayenne)
+$lxd-number-badge-support-2-color: #111e30; // Texto sobre support-2
+$lxd-number-badge-danger-bg: #b30000; // Fondo danger (red)
+$lxd-number-badge-danger-color: #ffffff; // Texto sobre danger
+$lxd-number-badge-success-bg: #006616; // Fondo success (green)
+$lxd-number-badge-success-color: #ffffff; // Texto sobre success
+$lxd-number-badge-neutral-bg: #4a4a4a; // Fondo neutral (dark grey)
+$lxd-number-badge-neutral-color: #ffffff; // Texto sobre neutral

package/src/tokens/scss/components/_number-input.scss

@@ -0,0 +1,43 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-number-input-border-radius: 0px; // Border radius del contenedor
+$lxd-number-input-border-width: 1px; // Grosor del borde
+$lxd-number-input-border-style: solid; // Estilo del borde
+$lxd-number-input-border-color: #111e30; // Color del borde
+$lxd-number-input-bg: #ffffff; // Fondo del contenedor
+$lxd-number-input-color: #111e30; // Color del texto
+$lxd-number-input-font-family: "Google Sans Flex", system-ui, sans-serif; // Font family
+$lxd-number-input-font-size: 1rem; // Font size
+$lxd-number-input-font-weight: 300; // Font weight
+$lxd-number-input-line-height: 1; // Line height
+$lxd-number-input-height: 2.5rem; // Altura del control: la talla del sistema, heredada de input
+$lxd-number-input-padding-inline: 1rem; // Padding horizontal del campo
+$lxd-number-input-transition-duration: 150ms; // Duración de la transición
+$lxd-number-input-transition-easing: ease; // Easing de la transición
+$lxd-number-input-btn-width: 2rem; // Ancho de los botones +/−
+$lxd-number-input-btn-color: #111e30; // Color del icono de los botones
+$lxd-number-input-btn-bg: transparent; // Fondo de los botones
+$lxd-number-input-btn-hover-line-width: 1px; // Grosor de la línea de hover de los botones +/−. El hover no pinta relleno (regla de Colores): deja una línea de tinta bajo el botón
+$lxd-number-input-btn-hover-line-color: #111e30; // Color de la línea de hover de los botones +/−
+$lxd-number-input-btn-separator-color: #111e30; // Color del separador entre botón y campo
+$lxd-number-input-focus-ring-width: 2px; // Grosor del focus ring
+$lxd-number-input-focus-ring-inset-offset: 1px; // Gap entre borde y focus ring
+$lxd-number-input-focus-ring-color: #111e30; // Color del focus ring
+$lxd-number-input-focus-border-color: #111e30; // Color del borde en foco
+$lxd-number-input-disabled-cursor: not-allowed; // Cursor cuando deshabilitado
+$lxd-number-input-disabled-bg: #f2f2f2; // Fondo cuando deshabilitado
+$lxd-number-input-disabled-color: #4a4a4a; // Texto cuando deshabilitado
+$lxd-number-input-disabled-border-color: #d0d0d0; // Borde cuando deshabilitado
+$lxd-number-input-disabled-btn-color: #4a4a4a; // Color del icono de botones cuando deshabilitado
+$lxd-number-input-error-border-color: #b30000; // Color del borde en error
+$lxd-number-input-error-bg: #ffffff; // Fondo en error
+$lxd-number-input-error-color: #111e30; // Texto en error
+$lxd-number-input-error-focus-border-color: #b30000; // Borde en foco+error
+$lxd-number-input-error-focus-ring-color: #b30000; // Focus ring en error
+$lxd-number-input-sm-font-size: 0.875rem; // Font size — sm
+$lxd-number-input-sm-height: 2rem; // Altura — sm
+$lxd-number-input-sm-padding-inline: 0.75rem; // Padding horizontal — sm
+$lxd-number-input-lg-font-size: 1.25rem; // Font size — lg
+$lxd-number-input-lg-height: 3rem; // Altura — lg
+$lxd-number-input-lg-padding-inline: 1.5rem; // Padding horizontal — lg

package/src/tokens/scss/components/_otp-input.scss

@@ -0,0 +1,5 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-otp-input-gap: 0.5rem; // Separación entre celdas del código
+$lxd-otp-input-cell-inline-size: 3.5ch; // Anchura de una celda: medida en caracteres para que el dígito quepa centrado a cualquier talla de texto, sin recortarse con el texto ampliado (WCAG 1.4.4)

package/src/tokens/scss/components/_popover.scss

@@ -0,0 +1,17 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-popover-bg: #ffffff; // Fondo del panel
+$lxd-popover-border-width: 1px; // Grosor del borde: es lo que separa el panel de lo que tiene debajo (el sistema no proyecta sombras)
+$lxd-popover-border-color: #111e30; // Color del borde
+$lxd-popover-border-radius: 0px; // Radio del panel: esquina recta
+$lxd-popover-padding-block: 1rem; // Aire vertical del panel
+$lxd-popover-padding-inline: 1rem; // Aire horizontal del panel
+$lxd-popover-offset: 0.5rem; // Separación entre el disparador y el panel (8px). De aquí sale el `sideOffset` por defecto
+$lxd-popover-max-height: var(--available-height); // Altura máxima del panel (por defecto, el espacio disponible en viewport que expone Base UI) — un contenido largo hace scroll en vez de salirse de la pantalla
+$lxd-popover-z-index: 400; // Capa del panel flotante
+$lxd-popover-transition-duration: 150ms; // Duración de la entrada y la salida
+$lxd-popover-transition-easing: ease; // Curva de la entrada y la salida
+$lxd-popover-focus-ring-width: 2px; // Grosor del anillo de foco del panel (recibe el foco al abrirse)
+$lxd-popover-focus-ring-offset: 2px; // Separación del anillo de foco
+$lxd-popover-focus-ring-color: #111e30; // Color del anillo de foco: la tinta de la superficie

package/src/tokens/scss/components/_progress-bar.scss

@@ -0,0 +1,32 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-progress-bar-height-sm: 0.5rem; // 8px — barra compacta, sin etiqueta
+$lxd-progress-bar-height-md: 1.5rem; // 24px — barra por defecto: la etiqueta cabe dentro
+$lxd-progress-bar-height-lg: 2rem; // 32px — barra destacada
+$lxd-progress-bar-border-radius: 0px; // Esquina recta, como todo el sistema
+$lxd-progress-bar-inside-label-threshold: 15; // Porcentaje mínimo de relleno para que la cifra se escriba dentro; por debajo, fuera. Se consume también en JS (no solo CSS) para decidir la posición de la etiqueta
+$lxd-progress-bar-track-bg: #f2f2f2; // Fondo del carril: la superficie clara secundaria del sistema (no es un estado, es una superficie)
+$lxd-progress-bar-transition-duration: 250ms; // Duración del avance del relleno (cambio de estado)
+$lxd-progress-bar-transition-easing: ease-in-out; // Curva del avance del relleno
+$lxd-progress-bar-font-family: "Google Sans Flex", system-ui, sans-serif; // Tipografía de la cifra
+$lxd-progress-bar-font-size: 0.875rem; // 14px — cuerpo de interfaz de la cifra
+$lxd-progress-bar-font-weight: 500; // Peso de énfasis de la cifra
+$lxd-progress-bar-line-height: 1; // Una línea: la cifra se centra con la altura del carril
+$lxd-progress-bar-label-gap: 0.5rem; // Hueco entre el borde del relleno y la cifra cuando va fuera
+$lxd-progress-bar-label-padding-inline: 0.5rem; // Aire de la cifra dentro del relleno
+$lxd-progress-bar-fill-border-width: 1px; // Filete de contorno del relleno. Los rellenos de marca (lavanda, amarillo, esmeralda, cayena) son claros y saturados: contra un carril claro no llegan a 3:1, y WCAG 1.4.11 admite que el contorno sea quien identifique el elemento
+$lxd-progress-bar-fill-border-color: #111e30; // Color del filete del relleno: la tinta del sistema, que contrasta a la vez con el carril y con los rellenos claros
+$lxd-progress-bar-track-border-width: 1px; // Filete de contorno del carril, a juego con el del relleno
+$lxd-progress-bar-track-border-color: #111e30; // Color del filete del carril: la tinta del sistema, que lo distingue de la superficie ambiente
+$lxd-progress-bar-primary-fill: #111e30; // Marca primaria (prusia) — relleno
+$lxd-progress-bar-primary-label-inside-color: #ffffff; // Cifra sobre el relleno prusia
+$lxd-progress-bar-accent-1-fill: #baabff; // Acento 1 (lavanda) — relleno
+$lxd-progress-bar-accent-1-label-inside-color: #111e30; // Cifra sobre el relleno lavanda
+$lxd-progress-bar-accent-2-fill: #ffcd00; // Acento 2 (amarillo) — relleno
+$lxd-progress-bar-accent-2-label-inside-color: #111e30; // Cifra sobre el relleno amarillo
+$lxd-progress-bar-support-1-fill: #20e38e; // Soporte 1 (esmeralda) — relleno
+$lxd-progress-bar-support-1-label-inside-color: #111e30; // Cifra sobre el relleno esmeralda
+$lxd-progress-bar-support-2-fill: #f05e1c; // Soporte 2 (cayena) — relleno
+$lxd-progress-bar-support-2-label-inside-color: #111e30; // Cifra sobre el relleno cayena
+$lxd-progress-bar-label-outside-color: #111e30; // Color de la cifra cuando va fuera, sobre el carril

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

@@ -0,0 +1,5 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-radio-group-gap: 0.5rem; // Aire entre opciones apiladas
+$lxd-radio-group-gap-horizontal: 1.5rem; // Aire entre opciones en fila: mayor, para que cada marca se lea con su texto

package/src/tokens/scss/components/_radio.scss

@@ -0,0 +1,26 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-radio-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-radio-size: 1.25em; // Tamaño del radio (ancho y alto)
+$lxd-radio-dot-size: 0.5em; // Tamaño del punto interior
+$lxd-radio-border-radius: 50%; // Border radius (círculo)
+$lxd-radio-border-width: 1px; // Border width
+$lxd-radio-border-style: solid; // Border style
+$lxd-radio-border-color: #111e30; // Color del borde
+$lxd-radio-error-border-color: #b30000; // Borde en error: el color de error (texto/borde, nunca fondo)
+$lxd-radio-bg: transparent; // Fondo sin seleccionar
+$lxd-radio-dot-color: #111e30; // Color del punto cuando está seleccionado
+$lxd-radio-cursor: pointer; // Cursor
+$lxd-radio-transition-duration: 150ms; // Duración de transiciones
+$lxd-radio-transition-easing: ease; // Easing de transiciones
+$lxd-radio-focus-ring-width: 2px; // Ancho del anillo de foco
+$lxd-radio-focus-ring-offset: 1px; // Separación del anillo de foco respecto al borde
+$lxd-radio-focus-ring-color: #111e30; // Color del anillo de foco
+$lxd-radio-disabled-cursor: not-allowed; // Cursor cuando está deshabilitado
+$lxd-radio-disabled-border-color: #d0d0d0; // Color del borde cuando está deshabilitado
+$lxd-radio-disabled-dot-color: #d0d0d0; // Color del punto cuando está deshabilitado y seleccionado
+$lxd-radio-sm-size: 1rem; // Tamaño del radio — variante sm (16px)
+$lxd-radio-sm-dot-size: 0.4rem; // Tamaño del punto interior — variante sm
+$lxd-radio-lg-size: 1.5rem; // Tamaño del radio — variante lg (24px)
+$lxd-radio-lg-dot-size: 0.65rem; // Tamaño del punto interior — variante lg

package/src/tokens/scss/components/_scroll-area.scss

@@ -0,0 +1,13 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-scroll-area-scrollbar-size: 0.5rem; // Grosor de la barra de desplazamiento
+$lxd-scroll-area-scrollbar-bg: rgba(0, 0, 0, 0); // Carril de la barra: sin relleno, la barra es el pulgar
+$lxd-scroll-area-thumb-bg: #d0d0d0; // Pulgar de la barra
+$lxd-scroll-area-thumb-hover-bg: #6b6b6b; // Pulgar al pasar el ratón o arrastrarlo
+$lxd-scroll-area-thumb-border-radius: 0px; // Radio del pulgar (recto, como el resto del sistema)
+$lxd-scroll-area-transition-duration: 150ms; // Duración de la aparición de la barra
+$lxd-scroll-area-transition-easing: ease; // Easing de la aparición de la barra
+$lxd-scroll-area-focus-ring-width: 2px; // Grosor del anillo de foco del área desplazable
+$lxd-scroll-area-focus-ring-offset: 1px; // Separación del anillo de foco
+$lxd-scroll-area-focus-ring-color: #111e30; // Color del anillo de foco