@studiolxd/brand 38.12.4

package/src/tokens/scss/global/_border.scss

@@ -0,0 +1,15 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-border-radius-none: 0px; // Escala. Valor del rol default
+$lxd-border-radius-sm: 4px; // Escala. El sistema no lo usa
+$lxd-border-radius-md: 8px; // Escala. El sistema no lo usa
+$lxd-border-radius-lg: 12px; // Escala. El sistema no lo usa
+$lxd-border-radius-xl: 16px; // Escala. El sistema no lo usa
+$lxd-border-radius-full: 9999px; // Escala. Valor del rol round
+$lxd-border-radius-default: 0px; // Rol: toda esquina del sistema es recta. Los componentes apuntan aquí, nunca a la escala
+$lxd-border-radius-round: 9999px; // Rol: píldoras y círculos — avatar, tag, badge, interruptor, botón píldora
+$lxd-border-width-sm: 1px; // Escala. Valor del rol default
+$lxd-border-width-md: 2px; // Escala. Valor del rol focus
+$lxd-border-width-default: 1px; // Rol: todo borde del sistema. Los componentes apuntan aquí, nunca a la escala
+$lxd-border-width-focus: 2px; // Rol: anillo de foco, ancho y separación. Solo para outline; nunca como borde

package/src/tokens/scss/global/_breakpoint.scss

@@ -0,0 +1,9 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-breakpoint-sm: 480px; // Teléfono apaisado
+$lxd-breakpoint-md: 768px; // Tableta. Donde la maqueta pasa de una columna a varias
+$lxd-breakpoint-lg: 1024px; // Portátil. Donde el chrome de aplicación pasa de barra superior a barra lateral
+$lxd-breakpoint-xl: 1280px; // Escritorio. Ancho de las páginas públicas
+$lxd-breakpoint-2xl: 1440px; // Escritorio ancho
+$lxd-breakpoint-3xl: 1920px; // Pantallas grandes

package/src/tokens/scss/global/_colors.scss

@@ -0,0 +1,102 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-color-primary: #111e30; // Primary brand color — used ~50% of the time
+$lxd-color-accent-1: #baabff; // Accent 1 brand color — used ~20% of the time
+$lxd-color-accent-2: #ffcd00; // Accent 2 brand color — used ~20% of the time
+$lxd-color-support-1: #20e38e; // Support 1 brand color — used ~5% of the time
+$lxd-color-support-2: #f05e1c; // Support 2 brand color — used ~5% of the time
+$lxd-color-chart-series-1: #1e7ff6; // Serie 1 — tono prusia de marca (OKLCH H 257) llevado al paso legible de gráfico. Ranura de apertura: una serie sola siempre es esta
+$lxd-color-chart-series-2: #f16123; // Serie 2 — tono cayena de marca (H 41)
+$lxd-color-chart-series-3: #27a0af; // Serie 3 — aqua, tono derivado entre esmeralda y prusia (H 207)
+$lxd-color-chart-series-4: #b29124; // Serie 4 — tono amarillo de marca (H 91) oscurecido hasta la banda de gráfico
+$lxd-color-chart-series-5: #c62c90; // Serie 5 — magenta, tono derivado entre lavanda y cayena (H 346)
+$lxd-color-chart-series-6: #7d9d22; // Serie 6 — lima, tono derivado entre amarillo y esmeralda (H 124)
+$lxd-color-chart-series-7: #6332c4; // Serie 7 — tono lavanda de marca (H 292)
+$lxd-color-chart-series-8: #28a86b; // Serie 8 — tono esmeralda de marca (H 157)
+$lxd-color-chart-series-1-on-dark: #1d7cf0; // Serie 1 — paso elegido para la superficie prusia
+$lxd-color-chart-series-2-on-dark: #ed5f22; // Serie 2 — paso para superficie oscura
+$lxd-color-chart-series-3-on-dark: #28a4b2; // Serie 3 — paso para superficie oscura
+$lxd-color-chart-series-4-on-dark: #93771c; // Serie 4 — paso para superficie oscura
+$lxd-color-chart-series-5-on-dark: #d840a0; // Serie 5 — paso para superficie oscura
+$lxd-color-chart-series-6-on-dark: #7fa123; // Serie 6 — paso para superficie oscura
+$lxd-color-chart-series-7-on-dark: #875ef0; // Serie 7 — paso para superficie oscura
+$lxd-color-chart-series-8-on-dark: #29ac6d; // Serie 8 — paso para superficie oscura
+$lxd-color-chart-sequential-100: #dce9fc; // Rampa secuencial (tono prusia) — magnitud mínima
+$lxd-color-chart-sequential-200: #b6d2f8; // Rampa secuencial — paso 200
+$lxd-color-chart-sequential-300: #8fbaf5; // Rampa secuencial — paso 300. Extremo claro admisible para una rampa ordinal (2.00:1 sobre blanco)
+$lxd-color-chart-sequential-400: #67a1f1; // Rampa secuencial — paso 400
+$lxd-color-chart-sequential-500: #3b88ee; // Rampa secuencial — paso 500
+$lxd-color-chart-sequential-600: #236ac5; // Rampa secuencial — paso 600
+$lxd-color-chart-sequential-700: #164b90; // Rampa secuencial — magnitud máxima
+$lxd-color-chart-sequential-100-on-dark: #0e376b; // Rampa secuencial sobre prusia — magnitud mínima (el paso que se retira hacia la superficie)
+$lxd-color-chart-sequential-200-on-dark: #164b90; // Rampa secuencial sobre prusia — paso 200
+$lxd-color-chart-sequential-300-on-dark: #1f61b6; // Rampa secuencial sobre prusia — paso 300. Extremo admisible para ordinal (2.75:1 sobre prusia)
+$lxd-color-chart-sequential-400-on-dark: #2978de; // Rampa secuencial sobre prusia — paso 400
+$lxd-color-chart-sequential-500-on-dark: #4e92ef; // Rampa secuencial sobre prusia — paso 500
+$lxd-color-chart-sequential-600-on-dark: #80b0f3; // Rampa secuencial sobre prusia — paso 600
+$lxd-color-chart-sequential-700-on-dark: #b8d3f8; // Rampa secuencial sobre prusia — magnitud máxima
+$lxd-color-chart-diverging-warm-1: #f37f54; // Divergente, brazo cálido (cayena) — paso junto al neutro
+$lxd-color-chart-diverging-warm-2: #d45c2c; // Divergente, brazo cálido — paso intermedio
+$lxd-color-chart-diverging-warm-3: #9f431f; // Divergente, brazo cálido — extremo
+$lxd-color-chart-diverging-cool-1: #70a6f2; // Divergente, brazo frío (prusia) — paso junto al neutro
+$lxd-color-chart-diverging-cool-2: #3484ee; // Divergente, brazo frío — paso intermedio
+$lxd-color-chart-diverging-cool-3: #1f61b6; // Divergente, brazo frío — extremo
+$lxd-color-chart-diverging-warm-1-on-dark: #b54e24; // Divergente cálido sobre prusia — paso junto al neutro
+$lxd-color-chart-diverging-warm-2-on-dark: #e26330; // Divergente cálido sobre prusia — paso intermedio
+$lxd-color-chart-diverging-warm-3-on-dark: #f48f6a; // Divergente cálido sobre prusia — extremo
+$lxd-color-chart-diverging-cool-1-on-dark: #256fcf; // Divergente frío sobre prusia — paso junto al neutro
+$lxd-color-chart-diverging-cool-2-on-dark: #488fef; // Divergente frío sobre prusia — paso intermedio
+$lxd-color-chart-diverging-cool-3-on-dark: #80b0f3; // Divergente frío sobre prusia — extremo
+$lxd-color-error-text-on-light: #b30000; // Error — texto/icono/borde sobre superficie clara. Nunca como background
+$lxd-color-error-text-on-dark: #ff8585; // Error — texto/icono/borde sobre superficie oscura (prussian). Nunca como background
+$lxd-color-error-fill: #b30000; // Error — fondo sólido universal (igual en superficie clara y oscura). Nunca como color de texto
+$lxd-color-error-fill-text: #ffffff; // Error — contenido sobre error-fill
+$lxd-color-success-text-on-light: #006616; // Success — texto/icono/borde sobre superficie clara. Nunca como background
+$lxd-color-success-text-on-dark: #00cc2c; // Success — texto/icono/borde sobre superficie oscura (prussian). Nunca como background
+$lxd-color-success-fill: #006616; // Success — fondo sólido universal (igual en superficie clara y oscura). Nunca como color de texto
+$lxd-color-success-fill-text: #ffffff; // Success — contenido sobre success-fill
+$lxd-color-warning-fill: #ffcd00; // Aviso — fondo sólido universal (igual en superficie clara y oscura). El amarillo de marca, aquí como rol de feedback. Nunca como color de texto
+$lxd-color-warning-fill-text: #111e30; // Aviso — contenido sobre warning-fill: el prusia (11,17:1, AAA). El rol solo tiene estos dos tokens, a propósito: ver Foundations › Colores
+$lxd-color-destructive-text-on-light: #b30000; // Destructive — texto/icono/borde sobre superficie clara. Nunca como background
+$lxd-color-destructive-text-on-dark: #ff8585; // Destructive — texto/icono/borde sobre superficie oscura (prussian). Nunca como background
+$lxd-color-destructive-fill: #b30000; // Destructive — fondo sólido universal (igual en superficie clara y oscura). Nunca como color de texto
+$lxd-color-destructive-fill-text: #ffffff; // Destructive — contenido sobre destructive-fill
+$lxd-color-white: #ffffff; // Pure white
+$lxd-color-black: #000000; // Pure black
+$lxd-color-grey-lightest: #f2f2f2; // Superficie clara secundaria: bloque de código, kbd, burbujas, pie de tabla. Encima, texto prusia o grey-darkest
+$lxd-color-grey-light: #d0d0d0; // Bordes, dividers, separadores
+$lxd-color-grey-dark: #6b6b6b; // Iconos de acción secundarios y controles deshabilitados. No es un gris de texto: todo texto va en prusia o grey-darkest
+$lxd-color-grey-darkest: #4a4a4a; // Texto secundario y placeholder en superficie clara (AAA sobre blanco)
+$lxd-color-prussian: #111e30; // Brand prussian
+$lxd-color-lavender: #baabff; // Brand lavender
+$lxd-color-yellow: #ffcd00; // Brand yellow
+$lxd-color-emerald: #20e38e; // Brand emerald
+$lxd-color-cayenne: #f05e1c; // Brand cayenne
+$lxd-color-text-on-light: #111e30; // Text color for light backgrounds
+$lxd-color-text-on-dark: #ffffff; // Text color for dark backgrounds
+$lxd-color-text-placeholder-on-light: #4a4a4a; // Placeholder sobre superficie clara. Mismo gris que el texto secundario
+$lxd-color-text-placeholder-on-dark: #d0d0d0; // Placeholder sobre superficie oscura. Mismo gris que el texto secundario
+$lxd-color-text-muted-on-light: #4a4a4a; // Texto secundario: ayudas, etiquetas, metadatos
+$lxd-color-text-muted-on-dark: #d0d0d0; // Muted text on dark backgrounds
+$lxd-color-background-light: #ffffff; // Light surface background
+$lxd-color-background-dark: #111e30; // Dark surface background
+$lxd-color-surface-secondary-on-light: #f2f2f2; // Superficie clara secundaria sobre fondo claro: bloque de código, kbd, carril de progreso, pie de tabla
+$lxd-color-surface-secondary-on-dark: #4a4a4a; // Superficie clara secundaria — variante para superficie oscura
+$lxd-color-surface-inverse-on-light: #4a4a4a; // Superficie invertida sobre fondo claro: relleno neutral oscuro (Tag)
+$lxd-color-surface-inverse-on-dark: #f2f2f2; // Superficie invertida — variante para superficie oscura
+$lxd-color-surface-highlight-on-dark: #6b6b6b; // Brillo que recorre una superficie secundaria en carga (Skeleton) sobre superficie oscura — un paso más claro que el fondo secundario oscuro
+$lxd-color-border-default-on-light: #d0d0d0; // Borde general sobre superficie clara: divisores, separadores, carriles y guías sin recorrer. Por la regla de derivación el par en superficie oscura no es un primitivo gris, es `color.text.on-dark` (cada componente lo referencia directamente)
+$lxd-color-border-recessive-on-dark: #4a4a4a; // Línea recesiva sobre superficie oscura — no un borde que deba destacar (ese es `color.text.on-dark`, la derivación por defecto), sino un filete de cromo que se retira hacia el lienzo: la rejilla de `Chart`. Mismo `grey-darkest` que ya usaba por error `color.surface.secondary-on-dark` (una superficie, no una línea) — el valor visual no cambia, solo su procedencia semántica
+$lxd-color-disabled-bg-on-light: #f2f2f2; // Fondo de un control deshabilitado sobre superficie clara
+$lxd-color-disabled-bg-on-dark: #4a4a4a; // Fondo de un control deshabilitado — superficie oscura
+$lxd-color-disabled-text-on-light: #4a4a4a; // Texto o borde de un control de texto (Button, Input, Textarea) deshabilitado sobre superficie clara
+$lxd-color-disabled-text-on-dark: #d0d0d0; // Texto de un control de texto deshabilitado — superficie oscura
+$lxd-color-disabled-border-on-light: #d0d0d0; // Borde o relleno de un control deshabilitado (checkbox, radio, campo) sobre superficie clara
+$lxd-color-disabled-border-on-dark: #6b6b6b; // Borde de un control deshabilitado — superficie oscura
+$lxd-color-icon-secondary-on-light: #6b6b6b; // Icono de acción secundaria o control compacto deshabilitado (nav de calendario/paginación, aspa de borrar) sobre superficie clara
+$lxd-color-icon-secondary-on-dark: #d0d0d0; // Icono de acción secundaria — superficie oscura
+$lxd-color-red: #b30000; // System red — base (AAA sobre blanco; fill universal de error/destructive)
+$lxd-color-red-light: #ff8585; // System red light — SOLO texto/icono/borde sobre prussian, nunca como fondo
+$lxd-color-green: #006616; // System green — base (AAA sobre blanco; fill universal de success)
+$lxd-color-green-light: #00cc2c; // System green light — SOLO texto/icono/borde sobre prussian, nunca como fondo

package/src/tokens/scss/global/_form.scss

@@ -0,0 +1,27 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-form-gap: 1.5rem; // Aire entre campos
+$lxd-form-errors-gap: 0.25rem; // Aire entre los errores del formulario (los que no cuelgan de un campo)
+$lxd-form-captcha-margin-block-start: 1.5rem; // Aire entre el último campo y el captcha
+$lxd-form-actions-gap: 0.75rem; // Aire entre los botones de la zona de acciones
+$lxd-form-actions-margin-block-start: 2rem; // Aire entre el último campo y las acciones
+$lxd-form-links-gap: 1rem; // Aire entre los enlaces secundarios (¿olvidaste la contraseña?, ¿no tienes cuenta?)
+$lxd-form-links-margin-block-start: 1.5rem; // Aire entre las acciones y los enlaces secundarios
+$lxd-form-alternatives-gap: 0.75rem; // Aire entre las alternativas (acceso con Google, enlace mágico…)
+$lxd-form-alternatives-margin-block-start: 2rem; // Aire entre el bloque principal y las alternativas
+$lxd-form-error-font-family: "Google Sans Flex", system-ui, sans-serif; // Font family del mensaje de error
+$lxd-form-error-font-size: 0.875rem; // El mensaje de error va un peldaño por debajo del cuerpo de la superficie (14px en aplicación, 16px en la pública)
+$lxd-form-error-font-weight: 300; // Font weight del mensaje de error
+$lxd-form-error-line-height: 1.5; // Line height del mensaje de error
+$lxd-form-error-color: #b30000; // Color del mensaje de error
+$lxd-form-helper-font-family: "Google Sans Flex", system-ui, sans-serif; // Font family del texto de ayuda
+$lxd-form-helper-font-size: 0.875rem; // El texto de ayuda va un peldaño por debajo del cuerpo de la superficie (14px en aplicación, 16px en la pública)
+$lxd-form-helper-font-weight: 300; // Font weight del texto de ayuda
+$lxd-form-helper-line-height: 1.5; // Line height del texto de ayuda
+$lxd-form-helper-color: #111e30; // Color del texto de ayuda: tinta (prusia), no gris
+$lxd-form-success-font-family: "Google Sans Flex", system-ui, sans-serif; // Font family del mensaje de éxito
+$lxd-form-success-font-size: 1rem; // El mensaje de éxito hereda el cuerpo de la superficie
+$lxd-form-success-font-weight: 300; // Font weight del mensaje de éxito
+$lxd-form-success-line-height: 1.5; // Line height del mensaje de éxito
+$lxd-form-success-color: #111e30; // Color del mensaje de éxito

package/src/tokens/scss/global/_motion.scss

@@ -0,0 +1,12 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-motion-duration-instant: 0ms; // Sin transición: cambios que deben ser inmediatos
+$lxd-motion-duration-fast: 150ms; // Respuesta a la interacción: hover, foco, pulsación
+$lxd-motion-duration-base: 250ms; // Cambios de estado: abrir un menú, mostrar un tooltip
+$lxd-motion-duration-slow: 400ms; // Cambios de contexto: modales, hojas, paneles que entran
+$lxd-motion-easing-default: ease; // Transiciones de propiedad: color, fondo, opacidad
+$lxd-motion-easing-in: ease-in; // Escala. El sistema no lo usa
+$lxd-motion-easing-out: ease-out; // Salidas: lo que desaparece frena al final
+$lxd-motion-easing-in-out: ease-in-out; // Movimiento: paneles y hojas que se desplazan
+$lxd-motion-easing-linear: linear; // Escala. El sistema no lo usa

package/src/tokens/scss/global/_opacity.scss

@@ -0,0 +1,7 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-opacity-full: 1; // Extremo alto de una transición de opacidad: plenamente presente
+$lxd-opacity-muted: 0.7; // Presente pero en segundo plano: un control secundario en reposo
+$lxd-opacity-overlay: 0.6; // Velo bajo un modal o una hoja: oscurece la página sin ocultarla
+$lxd-opacity-disabled: 0.4; // Controles deshabilitados: el elemento sigue ahí, atenuado

package/src/tokens/scss/global/_section.scss

@@ -0,0 +1,9 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-section-padding-inline: 1rem; // Aire lateral de una sección de página
+$lxd-section-padding-block-sm: 0.75rem; // Ritmo vertical compacto
+$lxd-section-padding-block-md: 1rem; // Ritmo vertical base: celdas y bloques internos
+$lxd-section-padding-block-lg: 2rem; // Ritmo vertical medio: introducciones, bloques de contenido
+$lxd-section-padding-block-xl: 3rem; // Ritmo vertical amplio: banda de sección estándar
+$lxd-section-padding-block-2xl: 4rem; // Ritmo vertical extra: bandas destacadas

package/src/tokens/scss/global/_shadow.scss

@@ -0,0 +1,9 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-shadow-none: none; // Escala. Valor del rol default
+$lxd-shadow-sm: 0 1px 2px rgba(17,30,48,0.08); // Escala. El sistema no lo usa
+$lxd-shadow-md: 0 2px 8px rgba(17,30,48,0.10); // Escala. El sistema no lo usa
+$lxd-shadow-lg: 0 4px 16px rgba(17,30,48,0.12); // Escala. El sistema no lo usa
+$lxd-shadow-xl: 0 8px 32px rgba(17,30,48,0.16); // Escala. El sistema no lo usa
+$lxd-shadow-default: none; // Rol: ningún elemento del sistema proyecta sombra. La elevación se expresa con borde y con el fondo del panel

package/src/tokens/scss/global/_size.scss

@@ -0,0 +1,8 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-size-component-sm: 2rem; // 32px — talla mínima del sistema: controles compactos, avatares, iconos-botón, logos en barras
+$lxd-size-component-md: 2.5rem; // 40px — talla por defecto de todo control de una línea: campos, selects, botones
+$lxd-size-component-lg: 3rem; // 48px — controles destacados y objetivo táctil holgado
+$lxd-content-measure: 70ch; // Medida de lectura: 70 caracteres por línea del texto que la usa. Se resuelve contra la fuente del propio párrafo, así que se adapta sola al tamaño y a la familia. Rango cómodo 45-75; WCAG pide como máximo 80
+$lxd-size-target-min: 1.5rem; // 24px — objetivo de puntero mínimo (WCAG 2.5.8, nivel AA). No es una talla de maqueta: es el área sensible que un control pequeño (checkbox, radio) extiende de forma invisible más allá de su dibujo

package/src/tokens/scss/global/_spacing.scss

@@ -0,0 +1,11 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-spacing-1: 0.25rem; // 4px — dentro de un control: icono y texto, padding de un badge
+$lxd-spacing-2: 0.5rem; // 8px — dentro de un control: padding de botones y campos, gap entre iconos
+$lxd-spacing-3: 0.75rem; // 12px — entre elementos de un componente: filas de una lista, cabecera y cuerpo
+$lxd-spacing-4: 1rem; // 16px — entre elementos de un componente; padding estándar de tarjetas y secciones
+$lxd-spacing-5: 1.5rem; // 24px — entre componentes
+$lxd-spacing-6: 2rem; // 32px — entre componentes; bloques de una página
+$lxd-spacing-7: 3rem; // 48px — entre secciones
+$lxd-spacing-8: 4rem; // 64px — entre secciones destacadas

package/src/tokens/scss/global/_typography.scss

@@ -0,0 +1,36 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-font-family-sans: "Google Sans Flex", system-ui, sans-serif; // Familia principal: interfaz y texto. Variable (peso 1-1000, tamaño óptico 6-144)
+$lxd-font-family-mono: "Google Sans Code", ui-monospace, monospace; // Código, valores técnicos y contenido preformateado
+$lxd-font-family-serif: "Libre Bodoni", Georgia, serif; // Excepción de producto: no la usa ningún componente del sistema. Reservada para piezas editoriales o de marca que un producto decida tratar en serif
+$lxd-letter-spacing-tight: -0.02em; // -0,02em — display y títulos grandes
+$lxd-letter-spacing-normal: 0em; // Body text
+$lxd-letter-spacing-wide: 0.05em; // Uppercase labels
+$lxd-line-height-none: 1; // Single line elements, icons
+$lxd-line-height-tight: 1.1; // Display, large headings
+$lxd-line-height-snug: 1.3; // Medium headings
+$lxd-line-height-normal: 1.5; // Body text
+$lxd-line-height-relaxed: 1.65; // 1,65 — lectura larga
+$lxd-font-size-0: 0.75rem; // 12px — solo cifras dentro de marcas (contadores); nunca texto
+$lxd-font-size-1: 0.875rem; // 14px — etiquetas de interfaz, texto pequeño
+$lxd-font-size-2: 1rem; // 1rem (16px) — Body base
+$lxd-font-size-3: 1.25rem; // 1.25rem (20px) — Small subtitles
+$lxd-font-size-4: 1.5rem; // 1.5rem (24px) — Subtitles
+$lxd-font-size-5: 1.75rem; // 1.75rem (28px) — Small titles
+$lxd-font-size-6: 2rem; // 2rem (32px) — Titles
+$lxd-font-size-7: 2.5rem; // 2.5rem (40px) — Large titles
+$lxd-font-size-8: 3.5rem; // 3.5rem (56px) — Small display
+$lxd-font-size-9: 4.5rem; // 4.5rem (72px) — Display
+$lxd-font-size-10: 6rem; // 6rem (96px) — Large display
+$lxd-font-weight-thin: 100; // Escala de la fuente variable. El sistema no lo usa
+$lxd-font-weight-extralight: 200; // Escala de la fuente variable. El sistema no lo usa
+$lxd-font-weight-light: 300; // Cuerpo de texto (rol default)
+$lxd-font-weight-regular: 400; // Escala de la fuente variable. El sistema no lo usa
+$lxd-font-weight-medium: 500; // Títulos y énfasis (rol emphasis)
+$lxd-font-weight-semibold: 600; // Escala de la fuente variable. El sistema no lo usa
+$lxd-font-weight-bold: 700; // Escala de la fuente variable. El sistema no lo usa
+$lxd-font-weight-extrabold: 800; // Escala de la fuente variable. El sistema no lo usa
+$lxd-font-weight-black: 900; // Escala de la fuente variable. El sistema no lo usa
+$lxd-font-weight-default: 300; // Rol: cuerpo de texto. Los componentes apuntan aquí, nunca a la escala
+$lxd-font-weight-emphasis: 500; // Rol: títulos, énfasis local (strong, cifras destacadas), etiquetas. Dobla el trazo del cuerpo a 16px

package/src/tokens/scss/global/_z-index.scss

@@ -0,0 +1,9 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-z-index-bar: 100; // Barras fijas de la aplicación: cabecera, barra lateral
+$lxd-z-index-backdrop: 200; // Velo que oscurece la página bajo un modal o una hoja
+$lxd-z-index-modal: 300; // Modales, hojas y paneles de navegación a pantalla completa
+$lxd-z-index-floating: 400; // Paneles anclados a un control: menús, select, popover, tooltip. Por encima del modal, porque un select dentro de un modal debe abrirse sobre él
+$lxd-z-index-toast: 500; // Avisos: siempre visibles, sobre cualquier otra capa
+$lxd-z-index-skip: 600; // Enlace de salto al contenido: lo primero al tabular, sobre todo lo demás

package/src/tokens/scss/molecules/_alert.scss

@@ -0,0 +1,33 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-alert-padding-block: 1rem; // Padding vertical del alert (16px)
+$lxd-alert-padding-inline: 1.5rem; // Padding horizontal del alert (24px)
+$lxd-alert-border-radius: 0px; // Sin radio de esquinas
+$lxd-alert-border-width: 1px; // Grosor del borde
+$lxd-alert-gap: 0.75rem; // Aire entre el contenido y el botón de cierre (12px)
+$lxd-alert-content-gap: 0.5rem; // Aire entre el título y la descripción, y entre los bloques de la descripción (8px)
+$lxd-alert-bg: #111e30; // Fondo por defecto — prussian. El relleno neutro invierte el lienzo: sobre página clara es prusia y sobre página oscura, blanco (ver `surface-dark-bg`)
+$lxd-alert-border-color: #ffffff; // Borde por defecto — blanco. Sobre página clara dibuja el contorno del relleno prusia
+$lxd-alert-title-font-size: 1rem; // El título hereda el cuerpo de la superficie (16px en aplicación, 20px en la pública)
+$lxd-alert-title-font-weight: 500; // Peso del título
+$lxd-alert-title-line-height: 1.3; // Interlineado del título — el de un rótulo corto
+$lxd-alert-title-color: #ffffff; // Texto blanco sobre el relleno prusia
+$lxd-alert-description-font-size: 1rem; // La descripción hereda el cuerpo de la superficie (16px en aplicación, 20px en la pública)
+$lxd-alert-description-line-height: 1.5; // Interlineado de la descripción — el del cuerpo
+$lxd-alert-description-color: #ffffff; // Descripción blanca sobre el relleno prusia — igual que el título
+$lxd-alert-close-size: 2rem; // Lado del botón de cierre — talla sm (32px), la mínima del sistema. El color del aspa y su hover los pone el Button ghost, que voltea con la superficie del relleno
+$lxd-alert-close-inset: 0.5rem; // Distancia del botón de cierre a la esquina superior derecha (8px)
+$lxd-alert-success-bg: #006616; // Fondo success — verde semántico
+$lxd-alert-success-border-color: #006616; // Borde igual al fondo success
+$lxd-alert-success-title-color: #ffffff; // Título blanco sobre fondo success
+$lxd-alert-success-description-color: #ffffff; // Descripción blanca sobre fondo success
+$lxd-alert-error-bg: #b30000; // Fondo error — rojo semántico
+$lxd-alert-error-border-color: #b30000; // Borde igual al fondo error
+$lxd-alert-error-title-color: #ffffff; // Título blanco sobre fondo error
+$lxd-alert-error-description-color: #ffffff; // Descripción blanca sobre fondo error
+$lxd-alert-warning-bg: #ffcd00; // Fondo warning — el relleno del rol de aviso. Es el amarillo de siempre, pero la procedencia es el rol de feedback, no la marca
+$lxd-alert-warning-border-color: #ffcd00; // Borde igual al fondo warning
+$lxd-alert-warning-title-color: #111e30; // Título prusia sobre fondo warning (11,17:1, AAA)
+$lxd-alert-warning-description-color: #111e30; // Descripción prusia sobre fondo warning
+$lxd-alert-warning-close-color: #111e30; // Aspa y su anillo de foco sobre el relleno de aviso. Es el único relleno claro del componente, así que el aspa no puede tomar la tinta ambiente: con `[data-theme="dark"]` en la raíz saldría blanca sobre amarillo (1,50:1). Va fijada a la tinta del rol, que es universal

package/src/tokens/scss/molecules/_annotation-thread.scss

@@ -0,0 +1,28 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-annotation-thread-gap: 1rem; // Separación entre las piezas del hilo
+$lxd-annotation-thread-border-width: 1px; // Grosor del borde del hilo
+$lxd-annotation-thread-border-style: solid; // Estilo del borde del hilo
+$lxd-annotation-thread-border-color: #d0d0d0; // Borde del hilo
+$lxd-annotation-thread-padding-block: 1rem; // Aire vertical del hilo
+$lxd-annotation-thread-padding-inline: 1rem; // Aire horizontal del hilo
+$lxd-annotation-thread-reply-indent: 1.5rem; // Sangría de las respuestas respecto a la anotación que abre el hilo
+$lxd-annotation-thread-reply-guide-width: 1px; // Grosor de la guía que acompaña a las respuestas
+$lxd-annotation-thread-reply-guide-style: solid; // Estilo de la guía de respuestas
+$lxd-annotation-thread-reply-guide-color: #d0d0d0; // Color de la guía de respuestas
+$lxd-annotation-thread-item-gap: 0.5rem; // Separación entre la cabecera, el cuerpo y las acciones de una anotación
+$lxd-annotation-thread-items-gap: 1rem; // Separación entre anotaciones
+$lxd-annotation-thread-header-gap: 0.5rem; // Separación entre autor, fecha y marca de editada
+$lxd-annotation-thread-author-font-family: "Google Sans Flex", system-ui, sans-serif; // Familia del autor
+$lxd-annotation-thread-author-font-size: 0.875rem; // Tamaño del autor: la letra menor del texto corriente
+$lxd-annotation-thread-author-font-weight: 500; // Peso del autor
+$lxd-annotation-thread-author-color: #111e30; // Tinta del autor
+$lxd-annotation-thread-meta-font-size: 0.875rem; // Tamaño de la fecha y de la marca de editada
+$lxd-annotation-thread-meta-color: #4a4a4a; // Tinta de la fecha y de la marca de editada
+$lxd-annotation-thread-body-font-size: 1rem; // Tamaño del cuerpo: es texto corriente
+$lxd-annotation-thread-body-line-height: 1.5; // Interlineado del cuerpo
+$lxd-annotation-thread-body-color: #111e30; // Tinta del cuerpo
+$lxd-annotation-thread-replies-label-font-size: 0.875rem; // Tamaño del rótulo que cuenta las respuestas
+$lxd-annotation-thread-replies-label-color: #4a4a4a; // Tinta del rótulo que cuenta las respuestas
+$lxd-annotation-thread-resolved-opacity: 0.4; // Un hilo resuelto se retira: baja de intensidad sin desaparecer

package/src/tokens/scss/molecules/_app-launcher.scss

@@ -0,0 +1,46 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-app-launcher-trigger-size: 2.5rem; // Tamaño (cuadrado) del botón de rejilla
+$lxd-app-launcher-trigger-border-radius: 0px; // Radio del trigger
+$lxd-app-launcher-trigger-color: #111e30; // Color del icono de rejilla
+$lxd-app-launcher-focus-ring-color: #111e30; // Color del focus ring
+$lxd-app-launcher-focus-ring-width: 2px; // Grosor del focus ring
+$lxd-app-launcher-focus-ring-offset: 1px; // Separación del focus ring
+$lxd-app-launcher-trigger-label-gap: 0.5rem; // Espacio entre icono y texto del disparador con texto — el mismo aire que entre icono y texto de un ítem de SidebarNav
+$lxd-app-launcher-trigger-label-padding-block: 0.5rem; // Padding vertical del disparador con texto — el de un ítem de SidebarNav
+$lxd-app-launcher-trigger-label-padding-inline: 1rem; // Padding horizontal del disparador con texto — el de un ítem de SidebarNav
+$lxd-app-launcher-trigger-label-border-radius: 0px; // Radio del disparador con texto — el de un ítem de SidebarNav
+$lxd-app-launcher-trigger-label-font-size: 1rem; // Tamaño de texto del disparador con texto — el de un ítem de SidebarNav
+$lxd-app-launcher-trigger-label-font-weight: 300; // Peso de texto del disparador con texto — el de un ítem de SidebarNav
+$lxd-app-launcher-trigger-label-line-height: 1.3; // Interlineado del disparador con texto — el de un ítem de SidebarNav
+$lxd-app-launcher-trigger-label-color: #111e30; // Color del disparador con texto (icono y texto, por `currentColor`/herencia) — el de un ítem de SidebarNav
+$lxd-app-launcher-content-min-width: 20rem; // Ancho mínimo del popover
+$lxd-app-launcher-content-columns: 3; // Número de columnas de la rejilla de apps
+$lxd-app-launcher-content-gap: 0.25rem; // Espacio entre tiles
+$lxd-app-launcher-content-bg: #ffffff; // Fondo del panel
+$lxd-app-launcher-content-border-width: 1px; // Borde del panel
+$lxd-app-launcher-content-border-color: #111e30; // Color del borde del panel
+$lxd-app-launcher-content-border-radius: 0px; // Radio del panel
+$lxd-app-launcher-content-shadow: none; // Sombra del panel
+$lxd-app-launcher-content-z-index: 400; // Z-index del popover
+$lxd-app-launcher-content-max-height: var(--available-height); // Altura máxima del panel (por defecto, el espacio disponible en viewport que expone Base UI) — con muchas apps, el panel hace scroll en vez de salirse de la pantalla
+$lxd-app-launcher-content-padding-block: 0.75rem; // Padding vertical del panel
+$lxd-app-launcher-content-padding-inline: 0.75rem; // Padding horizontal del panel
+$lxd-app-launcher-transition-duration: 150ms; // Duración de la animación de entrada/salida
+$lxd-app-launcher-transition-easing: ease; // Easing de la animación
+$lxd-app-launcher-tile-padding-block: 0.5rem; // Padding vertical de cada tile — el de un ítem de Menu, para que la altura case con las listas de opciones del DS
+$lxd-app-launcher-tile-padding-inline: 1rem; // Padding horizontal de cada tile — el de un ítem de Menu
+$lxd-app-launcher-tile-gap: 0.25rem; // Espacio entre el nombre y el badge «nuevo» dentro del tile
+$lxd-app-launcher-tile-border-radius: 0px; // Radio de cada tile
+$lxd-app-launcher-tile-name-font-size: 0.875rem; // Tamaño de texto del nombre de app
+$lxd-app-launcher-tile-name-font-weight: 300; // Peso del nombre de app
+$lxd-app-launcher-tile-name-line-height: 1.3; // Interlineado del nombre de app — el de un ítem de Menu, para que la altura case con las listas de opciones del DS
+$lxd-app-launcher-tile-name-color: #111e30; // Color del nombre de app
+$lxd-app-launcher-tile-name-active-font-weight: 500; // Peso del nombre — app actual
+$lxd-app-launcher-trigger-hover-bg: #111e30; // Fondo del disparador (solo icono) bajo el puntero. Antes dejaba una línea de tinta debajo (regla de Colores), pero la línea bajo un glifo suelto —sin texto— se lee como un subrayado del icono; se sustituye por la misma inversión de marca que ya llevan los tiles del panel, la excepción declarada de este componente
+$lxd-app-launcher-trigger-hover-color: #ffffff; // Color del icono de rejilla bajo el puntero — el mismo par que `trigger-hover-bg`
+$lxd-app-launcher-tile-highlighted-bg: #111e30; // Relleno del tile bajo el puntero o el teclado — el del Menu: la inversión de marca. La rejilla de apps es la lista de opciones del panel, excepción declarada a «los estados no se rellenan» (Foundations → Colores)
+$lxd-app-launcher-tile-highlighted-color: #ffffff; // Texto del tile resaltado — el del Menu: nombre e inicial invierten con el relleno
+$lxd-app-launcher-tile-badge-hover-bg: #ffffff; // Fondo de la Tag «nuevo» cuando su tile está resaltado — invertido respecto al tile (`tile-highlighted-color`) para seguir leyéndose como una píldora de contraste sobre el relleno
+$lxd-app-launcher-tile-badge-hover-color: #111e30; // Texto de la Tag «nuevo» cuando su tile está resaltado — el mismo par invertido que `tile-badge-hover-bg`

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

@@ -0,0 +1,13 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-assistant-message-gap: 0.25rem; // Separación entre el nombre del modelo, el globo y la marca de tiempo
+$lxd-assistant-message-model-font-family: "Google Sans Flex", system-ui, sans-serif; // Familia tipográfica del nombre del modelo
+$lxd-assistant-message-model-font-size: 0.875rem; // Cuerpo del nombre del modelo: un peldaño por debajo del texto de la superficie
+$lxd-assistant-message-model-font-weight: 500; // Peso del nombre del modelo: es quien firma la respuesta, se lee antes que la marca de tiempo
+$lxd-assistant-message-model-color: #111e30; // Tinta del nombre del modelo: tinta plena, es contenido y no un dato secundario
+$lxd-assistant-message-model-padding-inline: 0.25rem; // Aire horizontal del nombre del modelo
+$lxd-assistant-message-timestamp-font-family: "Google Sans Flex", system-ui, sans-serif; // Familia tipográfica de la marca de tiempo
+$lxd-assistant-message-timestamp-font-size: 0.875rem; // Cuerpo de la marca de tiempo: un peldaño por debajo del texto de la superficie
+$lxd-assistant-message-timestamp-color: #4a4a4a; // Tinta de la marca de tiempo: el gris de texto secundario del sistema, no `grey-dark` (que no es un color de texto)
+$lxd-assistant-message-timestamp-padding-inline: 0.25rem; // Aire horizontal de la marca de tiempo

package/src/tokens/scss/molecules/_async-multi-select-field.scss

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

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

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

package/src/tokens/scss/molecules/_avatar-upload.scss

@@ -0,0 +1,23 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-avatar-upload-gap: 1rem; // Aire entre el avatar y la columna del botón
+$lxd-avatar-upload-body-gap: 0.5rem; // Aire entre el botón y el mensaje de error: el de un campo y su error
+$lxd-avatar-upload-ring-width: 2px; // Grosor del anillo que anuncia la diana. El del anillo de foco: sobre un cuadrado de 40-64px un borde de 1px no se ve desde el otro lado de la pantalla, que es donde empieza el arrastre
+$lxd-avatar-upload-ring-offset: 0.25rem; // Separación del anillo respecto al avatar. Se pinta por fuera con `outline`, que no ocupa maqueta ni recibe puntero: la zona que acepta el archivo sigue siendo exactamente el avatar
+$lxd-avatar-upload-ring-color: #111e30; // Color del anillo mientras hay un arrastre sobre la ventana
+$lxd-avatar-upload-overlay-bg: #000000; // Velo sobre el avatar cuando el archivo está justo encima: el mismo negro del scrim del sistema
+$lxd-avatar-upload-overlay-opacity: 0.6; // Opacidad del velo — la del scrim del sistema
+$lxd-avatar-upload-overlay-icon-color: #ffffff; // Icono de subida sobre el velo — tinta sobre oscuro
+$lxd-avatar-upload-transition-duration: 150ms; // Duración de la aparición del anillo y del velo
+$lxd-avatar-upload-transition-easing: ease; // Easing de la aparición del anillo y del velo
+$lxd-avatar-upload-hint-font-family: "Google Sans Flex", system-ui, sans-serif; // Tipografía de la pista de arrastre — la del texto de ayuda de los campos
+$lxd-avatar-upload-hint-font-size: 0.875rem; // Cuerpo de la pista de arrastre — el del texto de ayuda de los campos
+$lxd-avatar-upload-hint-font-weight: 300; // Peso de la pista de arrastre — el del texto de ayuda de los campos
+$lxd-avatar-upload-hint-line-height: 1.5; // Interlineado de la pista de arrastre — el del texto de ayuda de los campos
+$lxd-avatar-upload-hint-color: #111e30; // Color de la pista de arrastre — el del texto de ayuda de los campos
+$lxd-avatar-upload-error-font-family: "Google Sans Flex", system-ui, sans-serif; // Tipografía del mensaje de error — la de los campos
+$lxd-avatar-upload-error-font-size: 0.875rem; // Cuerpo del mensaje de error — el de los campos
+$lxd-avatar-upload-error-font-weight: 300; // Peso del mensaje de error — el de los campos
+$lxd-avatar-upload-error-line-height: 1.5; // Interlineado del mensaje de error — el de los campos
+$lxd-avatar-upload-error-color: #b30000; // Color del mensaje de error — el de los campos

package/src/tokens/scss/molecules/_banner.scss

@@ -0,0 +1,18 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-banner-padding-block: 0.75rem; // Padding vertical de la barra (12px). Con una línea de texto y el aspa a 8px de la esquina, el aspa queda centrada sin más reglas
+$lxd-banner-padding-inline: 1.5rem; // Padding horizontal de la barra (24px) — el mismo inset que el alert
+$lxd-banner-gap: 1rem; // Aire entre el mensaje y las acciones (16px). Es también el aire vertical cuando la fila apila por debajo de md
+$lxd-banner-border-width: 1px; // Grosor de los filetes superior e inferior. La barra va a ancho completo: en los cantos laterales no hay nada que separar, así que no lleva borde inline
+$lxd-banner-font-size: 1rem; // El mensaje lee al cuerpo de la superficie (16px en aplicación, 20px en la pública)
+$lxd-banner-line-height: 1.5; // Interlineado del mensaje — el del cuerpo
+$lxd-banner-close-size: 2rem; // Lado del botón de cierre — talla sm (32px), la mínima del sistema
+$lxd-banner-close-inset: 0.5rem; // Distancia del botón de cierre a la esquina superior derecha (8px)
+$lxd-banner-info-bg: #111e30; // Información — relleno prusia. Es el mismo en las dos superficies: el relleno es autocontenido y su contenido lee siempre en oscuro (la raíz lleva `.surface-dark`)
+$lxd-banner-info-color: #ffffff; // Información — mensaje blanco sobre el relleno prusia
+$lxd-banner-info-border-color: #ffffff; // Información — filete blanco. Dibuja el canto también cuando la página ya es oscura y el relleno prusia coincide con el fondo, igual que en el alert `default`
+$lxd-banner-warning-bg: #ffcd00; // Aviso — el relleno del rol: el amarillo de marca, aquí como feedback. Universal, igual en las dos superficies
+$lxd-banner-warning-color: #111e30; // Aviso — mensaje prusia sobre el relleno amarillo (11,17:1, AAA)
+$lxd-banner-warning-border-color: #ffcd00; // Aviso — filete igual al relleno: el amarillo ya se separa de cualquier fondo del sistema
+$lxd-banner-warning-close-color: #111e30; // Aviso — aspa y su anillo de foco. Es el único relleno claro de la barra, así que el aspa no puede tomar la tinta ambiente: con `[data-theme="dark"]` en la raíz saldría blanca sobre amarillo (1,50:1). Va fijada a la tinta del rol, que es universal

package/src/tokens/scss/molecules/_calendar-planner.scss

@@ -0,0 +1,46 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-calendar-planner-gap: 0.5rem; // Gap entre cabecera y cuadrícula — hereda de Calendar
+$lxd-calendar-planner-font-family: "Google Sans Flex", system-ui, sans-serif; // Familia tipográfica base — hereda de Calendar
+$lxd-calendar-planner-nav-color: #111e30; // Color de los botones prev/next — hereda de Calendar
+$lxd-calendar-planner-nav-focus-ring-color: #111e30; // Color del focus ring de los botones de navegación — hereda de Calendar
+$lxd-calendar-planner-nav-focus-ring-width: 2px; // Grosor del focus ring — hereda de Calendar
+$lxd-calendar-planner-nav-focus-ring-offset: 1px; // Separación del focus ring — hereda de Calendar
+$lxd-calendar-planner-nav-radius: 0px; // Radio de borde del botón de navegación — hereda de Calendar
+$lxd-calendar-planner-title-font-size: 1rem; // Tamaño del título del mes — hereda de Calendar
+$lxd-calendar-planner-title-font-weight: 500; // Peso del título del mes — hereda de Calendar
+$lxd-calendar-planner-title-color: #111e30; // Color del título del mes — hereda de Calendar
+$lxd-calendar-planner-weekday-font-size: 0.875rem; // Tamaño de las cabeceras de día de semana — hereda de Calendar
+$lxd-calendar-planner-weekday-color: #4a4a4a; // Color de las cabeceras de día de semana — hereda de Calendar
+$lxd-calendar-planner-weekday-font-weight: 500; // Peso de las cabeceras de día: aquí la cabecera es una banda de tabla, no una letra suelta
+$lxd-calendar-planner-weekday-padding-block: 0.5rem; // Padding vertical de las cabeceras
+$lxd-calendar-planner-grid-border-color: #111e30; // Color de los bordes del grid
+$lxd-calendar-planner-grid-border-width: 1px; // Grosor de los bordes del grid
+$lxd-calendar-planner-cell-min-height: 6rem; // Altura mínima de cada celda de día — md
+$lxd-calendar-planner-cell-padding-block: 0.5rem; // Padding vertical de la celda
+$lxd-calendar-planner-cell-padding-inline: 0.5rem; // Padding horizontal de la celda
+$lxd-calendar-planner-cell-bg: rgba(0, 0, 0, 0); // Fondo base de las celdas
+$lxd-calendar-planner-cell-today-number-bg: #111e30; // Fondo del número del día de hoy
+$lxd-calendar-planner-cell-today-number-color: #ffffff; // Color del número del día de hoy
+$lxd-calendar-planner-cell-outside-bg: #f2f2f2; // Fondo de las celdas fuera del mes — superficie secundaria, no un gris de estado
+$lxd-calendar-planner-cell-focus-ring-color: #111e30; // Color del focus ring de la celda — hereda de Calendar
+$lxd-calendar-planner-cell-focus-ring-width: 2px; // Grosor del focus ring de la celda — hereda de Calendar
+$lxd-calendar-planner-cell-focus-ring-offset: 1px; // Separación del focus ring de la celda — hereda de Calendar
+$lxd-calendar-planner-day-number-font-size: 0.875rem; // Tamaño del número del día
+$lxd-calendar-planner-day-number-font-weight: 500; // Peso del número del día
+$lxd-calendar-planner-day-number-color: #111e30; // Color del número del día — hereda de Calendar
+$lxd-calendar-planner-day-number-size: 1.5rem; // Tamaño (ancho y alto) del badge con el número
+$lxd-calendar-planner-day-number-radius: 0px; // Radio del badge del número
+$lxd-calendar-planner-day-number-outside-color: #4a4a4a; // Color del número en días fuera del mes — hereda de Calendar
+$lxd-calendar-planner-items-gap: 0.25rem; // Gap entre elementos/tags dentro de la celda
+$lxd-calendar-planner-more-font-size: 0.875rem; // Tamaño del texto '+N más'
+$lxd-calendar-planner-more-color: #4a4a4a; // Color del texto '+N más'
+$lxd-calendar-planner-more-hover-color: #111e30; // Color hover del texto '+N más'
+$lxd-calendar-planner-more-focus-ring-color: #111e30; // Color del focus ring del botón '+N más'
+$lxd-calendar-planner-transition-duration: 150ms; // Duración de las transiciones — hereda de Calendar
+$lxd-calendar-planner-transition-easing: ease; // Easing de las transiciones — hereda de Calendar
+$lxd-calendar-planner-sm-cell-min-height: 4rem; // Altura mínima de celda — sm
+$lxd-calendar-planner-lg-cell-min-height: 9rem; // Altura mínima de celda — lg
+$lxd-calendar-planner-hover-line-width: 1px; // Grosor de la línea de hover — hereda de Calendar
+$lxd-calendar-planner-hover-line-color: #111e30; // Color de la línea de hover — hereda de Calendar

package/src/tokens/scss/molecules/_calendar-roster.scss

@@ -0,0 +1,45 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$lxd-calendar-roster-font-family: "Google Sans Flex", system-ui, sans-serif; // Familia tipográfica base
+$lxd-calendar-roster-radius: 0px; // Radio del marco del cuadrante
+$lxd-calendar-roster-border-color: #111e30; // Color de los bordes del grid
+$lxd-calendar-roster-border-width: 1px; // Grosor de los bordes del grid
+$lxd-calendar-roster-th-name-width: 10rem; // Ancho de la columna de nombre
+$lxd-calendar-roster-th-name-font-size: 0.875rem; // Tamaño del encabezado de nombre
+$lxd-calendar-roster-th-name-font-weight: 500; // Peso del encabezado de nombre
+$lxd-calendar-roster-th-name-color: #4a4a4a; // Color del encabezado de nombre
+$lxd-calendar-roster-th-name-bg: #ffffff; // Fondo sticky de la columna de nombre
+$lxd-calendar-roster-th-name-padding-block: 0.5rem; // Padding vertical del encabezado de nombre
+$lxd-calendar-roster-th-name-padding-inline: 0.75rem; // Padding horizontal del encabezado de nombre
+$lxd-calendar-roster-th-day-width: 2.5rem; // Ancho mínimo de cada columna de día
+$lxd-calendar-roster-th-day-font-size: 0.875rem; // Tamaño del número de día
+$lxd-calendar-roster-th-day-sub-font-size: 0.75rem; // Tamaño de la letra del día de semana
+$lxd-calendar-roster-th-day-color: #111e30; // Color del encabezado de día
+$lxd-calendar-roster-th-day-padding-block: 0.5rem; // Padding vertical del encabezado de día
+$lxd-calendar-roster-th-day-bg: #ffffff; // Fondo del encabezado de día
+$lxd-calendar-roster-th-day-today-color: #ffffff; // Texto del encabezado del día de hoy
+$lxd-calendar-roster-th-day-today-bg: #111e30; // Fondo del encabezado del día de hoy
+$lxd-calendar-roster-th-day-today-radius: 0px; // Radio del badge del día de hoy
+$lxd-calendar-roster-th-day-today-size: 1.5rem; // Lado del badge del día de hoy
+$lxd-calendar-roster-td-name-font-size: 0.875rem; // Tamaño del nombre del empleado
+$lxd-calendar-roster-td-name-color: #111e30; // Color del nombre del empleado
+$lxd-calendar-roster-td-name-font-weight: 300; // Peso del nombre del empleado (la celda es th: el agente de usuario la pondría en negrita)
+$lxd-calendar-roster-td-name-bg: #ffffff; // Fondo sticky de la celda de nombre
+$lxd-calendar-roster-td-name-padding-block: 0.5rem; // Padding vertical de la celda de nombre
+$lxd-calendar-roster-td-name-padding-inline: 0.75rem; // Padding horizontal de la celda de nombre
+$lxd-calendar-roster-cell-padding-block: 0.25rem; // Padding vertical de las celdas de datos
+$lxd-calendar-roster-cell-padding-inline: 0.25rem; // Padding horizontal de las celdas de datos
+$lxd-calendar-roster-cell-bg: #ffffff; // Fondo de celdas de día laborable
+$lxd-calendar-roster-cell-weekend-bg: #f2f2f2; // Fondo de celdas de fin de semana — superficie secundaria, la misma para todo día no laborable: lo que los distingue es el chip, no el gris
+$lxd-calendar-roster-cell-holiday-bg: #f2f2f2; // Fondo de celdas festivas — misma superficie secundaria; el festivo se nombra con su chip
+$lxd-calendar-roster-cell-non-working-bg: #f2f2f2; // Fondo de celdas no laborables (laborable sin turno asignado)
+$lxd-calendar-roster-cell-today-outline-width: 2px; // Grosor del recuadro de la columna de hoy
+$lxd-calendar-roster-schedule-font-size: 0.75rem; // Tamaño del texto de horario
+$lxd-calendar-roster-schedule-color: #111e30; // Color del texto de horario
+$lxd-calendar-roster-legend-item-gap: 0.25rem; // Gap entre el chip y su texto dentro de una entrada de la leyenda
+$lxd-calendar-roster-legend-gap: 0.75rem; // Gap entre elementos de la leyenda
+$lxd-calendar-roster-legend-font-size: 0.875rem; // Tamaño del texto de la leyenda
+$lxd-calendar-roster-legend-color: #4a4a4a; // Color del texto de la leyenda
+$lxd-calendar-roster-legend-swatch-size: 0.75rem; // Tamaño del cuadradito de color en la leyenda
+$lxd-calendar-roster-legend-swatch-radius: 0px; // Radio del cuadradito de color