@studiolxd/brand 38.12.4

package/src/tokens/molecules/notification-panel.css

@@ -0,0 +1,41 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --notification-panel-list-max-block-size: 21rem; /** Alto máximo de la lista (336px): pasado ese alto la lista hace scroll y la cabecera y el pie se quedan quietos. Medida de maqueta */
+  --notification-panel-item-body-line-clamp: 2; /** Cuántas líneas del cuerpo se ven antes de recortar con elipsis. El panel es un adelanto: el texto entero está en la bandeja */
+  --notification-panel-inline-size: min(22.5rem, calc(100vw - 2 * var(--spacing-5))); /** Ancho del panel (360px), con tope para que no se salga en una pantalla estrecha. Medida de maqueta, como la de la Sidebar: no pertenece a la escala de tallas */
+  --notification-panel-padding-inline: var(--spacing-4); /** Aire lateral de las filas, del bloque de marcar todas y del pie: el mismo, para que todo alinee en una sola columna */
+  --notification-panel-mark-all-padding-block: var(--spacing-3); /** Aire vertical del bloque de «Marcar todas», entre la lista y el pie */
+  --notification-panel-list-padding-block: var(--spacing-2); /** Aire vertical de la lista dentro del panel */
+  --notification-panel-list-gap: var(--spacing-1); /** Separación entre notificaciones. Las filas no llevan línea: se separan con aire */
+  --notification-panel-item-padding-block: var(--spacing-2); /** Aire vertical de cada notificación */
+  --notification-panel-item-gap: var(--spacing-2); /** Aire entre el punto de no leída y el texto */
+  --notification-panel-item-text-gap: var(--spacing-1); /** Aire entre el título, el cuerpo y la fecha */
+  --notification-panel-item-font-family: var(--font-family-sans); /** Familia tipográfica de la notificación */
+  --notification-panel-item-title-line-height: var(--line-height-snug); /** Interlineado del título */
+  --notification-panel-item-body-line-height: var(--line-height-snug); /** Interlineado del cuerpo */
+  --notification-panel-dot-size: var(--icon-size-sm); /** Caja del punto de no leída: la talla de icono dentro de un texto (16px), la misma con la que la bandeja pinta ese punto. El círculo dibujado dentro mide unos 7px */
+  --notification-panel-dot-margin-block-start: var(--spacing-1); /** Baja el punto hasta el centro óptico de la primera línea del título */
+  --notification-panel-empty-padding-block: var(--spacing-6); /** Aire vertical del estado vacío: el hueco de la lista sin encogerse */
+  --notification-panel-footer-padding-block: var(--spacing-3); /** Aire vertical del pie */
+  --notification-panel-footer-gap: var(--spacing-2); /** Aire entre los enlaces del pie */
+  --notification-panel-offset: var(--app-header-flyout-offset); /** Separación entre la campana y el panel: el desplazamiento compartido de los flotantes de la cabecera */
+  --notification-panel-item-border-radius: var(--border-radius-default); /** Radio de cada notificación: recto, como todo el sistema */
+  --notification-panel-item-title-font-size: var(--text-font-size); /** El título de una notificación es texto corriente: hereda el cuerpo de la superficie */
+  --notification-panel-item-title-font-weight: var(--font-weight-default); /** Peso del título, leída o sin leer: el del cuerpo de texto. Lo no leído lo dice el punto del indicador, no el peso */
+  --notification-panel-item-body-font-size: var(--text-paragraph-small-font-size); /** Cuerpo de la notificación: letra menor, un peldaño por debajo del cuerpo de la superficie */
+  --notification-panel-item-time-font-size: var(--text-paragraph-small-font-size); /** Fecha relativa: letra menor y tinta atenuada (la del texto secundario, vía `Text tone="muted"`) */
+  --notification-panel-dot-color: var(--color-error-fill); /** Color del punto: el mismo rojo del contador de la campana (`error-fill`), que es universal en claro y oscuro. No hay un rojo aparte para notificaciones */
+  --notification-panel-footer-font-size: var(--text-paragraph-small-font-size); /** Tamaño de los enlaces del pie: letra menor */
+  --notification-panel-focus-ring-width: var(--border-width-focus); /** Grosor del anillo de foco de una fila */
+  --notification-panel-focus-ring-color: var(--color-primary); /** Color del anillo de foco de una fila */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --notification-panel-focus-ring-color: var(--color-text-on-dark); /** Color del anillo de foco — superficie oscura */
+}

package/src/tokens/molecules/notification-panel.ts

@@ -0,0 +1,4 @@
+import notificationPanel from '../../../tokens/molecule/notification-panel.json';
+import { flattenTokens } from '../utils';
+
+export const notificationPanelTokens = flattenTokens(notificationPanel as never);

package/src/tokens/molecules/number-input-field.css

@@ -0,0 +1,25 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --number-input-field-gap: var(--spacing-2); /** Espacio entre label, input, helper y error */
+  --number-input-field-error-font-family: var(--form-error-font-family); /** Font family del mensaje de error */
+  --number-input-field-error-line-height: var(--form-error-line-height); /** Line height del mensaje de error */
+  --number-input-field-helper-font-family: var(--form-helper-font-family); /** Font family del texto de ayuda */
+  --number-input-field-helper-line-height: var(--form-helper-line-height); /** Line height del texto de ayuda */
+  --number-input-field-error-font-size: var(--form-error-font-size); /** Font size del mensaje de error */
+  --number-input-field-error-font-weight: var(--form-error-font-weight); /** Font weight del mensaje de error */
+  --number-input-field-error-color: var(--form-error-color); /** Color del mensaje de error */
+  --number-input-field-helper-font-size: var(--form-helper-font-size); /** Font size del texto de ayuda */
+  --number-input-field-helper-font-weight: var(--form-helper-font-weight); /** Font weight del texto de ayuda */
+  --number-input-field-helper-color: var(--form-helper-color); /** Color del texto de ayuda */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --number-input-field-error-color: var(--color-error-text-on-dark); /** Color del mensaje de error — surface-dark */
+  --number-input-field-helper-color: var(--color-text-on-dark); /** Color del texto de ayuda — surface-dark */
+}

package/src/tokens/molecules/number-input-field.ts

@@ -0,0 +1,8 @@
+import numberInputFieldJson from '../../../tokens/molecule/number-input-field.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(numberInputFieldJson as never);
+
+export const numberInputFieldBaseTokens   = all.filter(t => t.name === '--number-input-field-gap');
+export const numberInputFieldErrorTokens  = all.filter(t => t.name.startsWith('--number-input-field-error-'));
+export const numberInputFieldHelperTokens = all.filter(t => t.name.startsWith('--number-input-field-helper-'));

package/src/tokens/molecules/onboarding-shell.css

@@ -0,0 +1,18 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --onboarding-shell-gap: var(--spacing-6); /** Aire entre bloques del alta: el tramo del progreso al cuerpo dentro de la columna del paso y, cuando la plantilla va sin marco (`shell` a `false`), la separación de la marca y el pie de preferencias, que ahí vuelven a la rejilla. NO gobierna el aire del cuerpo a su pie de acciones (ese es el del formulario, `actions-margin-block-start`) ni el del chrome con marco, que sale de los tokens del chrome público */
+  --onboarding-shell-switchers-gap: var(--spacing-3); /** Aire entre los conmutadores de idioma y tema */
+  --onboarding-shell-actions-gap: var(--spacing-4); /** Aire entre las acciones del pie: entre «Atrás» y las decisiones, y entre la salida («Omitir») y la principal («Continuar»/«Finalizar»). Un peldaño por encima del aire de dentro de un componente (12px): la salida es una decisión distinta de la principal, no una pieza suya, y a 12px se leían como un par de botones pegados. El mismo valor sirve en las dos direcciones —en fila a partir de `md` y en columna en móvil, donde separa dos acciones a todo el ancho— y por eso el token sigue siendo uno solo */
+  --onboarding-shell-actions-padding-block-start: var(--spacing-5); /** Aire extra del pie de acciones, sobre el que ya pone `actions-margin-block-start`: al no haber línea que separe el paso de sus acciones, la separación entera la hace el espacio */
+  --onboarding-shell-max-width: var(--container-max-width-md); /** Ancho máximo de la columna del alta: la medida estrecha de contenido del sistema (768px). Apunta a la escala de anchos de contenido, no al breakpoint del mismo valor: un punto de corte responsive y una medida de columna son cosas distintas y tienen que poder moverse por separado */
+  --onboarding-shell-max-width-wide: var(--container-max-width-xl); /** Ancho máximo de la columna del alta con `width="wide"` (1280px, el de página pública): para un paso que enseña una fila de tarjetas, como la elección de plan */
+  --onboarding-shell-brand-padding-block: var(--app-header-padding-block); /** Aire arriba y abajo de la marca, que es chrome y no contenido: se pinta en la ranura de cabecera del marco, como la barra pública. Apunta al aire del chrome —`app-header.padding-block`, el mismo que da alto a `SiteHeader`—, no al del `main`: el aire del `Container` con `space="xl"` es del contenido, y usarlo aquí bajaba la marca 48px cuando en el sitio abre a 8. Atado, si mañana la barra pública respira distinto, el alta se mueve con ella */
+  --onboarding-shell-actions-margin-block-start: var(--form-actions-margin-block-start); /** Aire entre el cuerpo del paso y su pie de acciones. Sale del token del formulario, no del `gap` del alta: el pie del alta es el pie de un formulario —la principal cerrando el renglón— y tiene que separarse del cuerpo con la misma medida. Atado, si allí se mueve, aquí se mueve; con un valor propio coincidían por casualidad y se descolgaba sin que nadie se enterase */
+  --onboarding-shell-brand-height-compact: var(--site-header-content-height-compact); /** Alto de la marca en móvil (por debajo de md) — el mismo peldaño que la cabecera pública */
+  --onboarding-shell-brand-height-narrow: var(--site-header-content-height-narrow); /** Alto de la marca en teléfono (por debajo de sm) — el mismo peldaño que la cabecera pública */
+  --onboarding-shell-brand-margin-inline-start: var(--site-header-logo-margin-inline-start); /** Desplazamiento lateral de la marca. Es el mismo de la cabecera pública: el trazado del logotipo trae su propio espacio de seguridad, y sin descontarlo la marca se ve descolgada del borde del contenido. Apuntando al de la cabecera, en el alta cae exactamente en la misma vertical que en la pantalla anterior */
+  --onboarding-shell-brand-height: var(--site-header-content-height); /** Alto de la marca. Apunta al de la cabecera pública, no a un valor propio: el alta y el chrome público enseñan la misma marca al mismo tamaño, y tocar el de la cabecera mueve los dos */
+}

package/src/tokens/molecules/org-switcher.css

@@ -0,0 +1,57 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --org-switcher-content-min-width: 14rem; /** Ancho mínimo del panel: nombres de organización (no es una talla de componente) */
+  --org-switcher-content-max-height: var(--available-height); /** Altura máxima del panel (por defecto, el espacio disponible en viewport que expone Base UI) — con muchas organizaciones, el panel hace scroll en vez de salirse de la pantalla */
+  --org-switcher-trigger-padding-block: var(--spacing-2); /** Padding vertical del trigger */
+  --org-switcher-trigger-padding-inline: var(--spacing-3); /** Padding horizontal del trigger */
+  --org-switcher-trigger-gap: var(--spacing-3); /** Espacio entre logo y nombre */
+  --org-switcher-name-font-size: var(--font-size-2); /** Tamaño de texto del nombre de la org */
+  --org-switcher-content-padding-block: var(--spacing-2); /** Padding vertical del panel */
+  --org-switcher-content-padding-inline: var(--spacing-2); /** Padding horizontal del panel */
+  --org-switcher-item-padding-block: var(--spacing-2); /** Padding vertical de cada ítem */
+  --org-switcher-item-padding-inline: var(--spacing-3); /** Padding horizontal de cada ítem */
+  --org-switcher-item-font-size: var(--font-size-2); /** Tamaño de texto de ítems */
+  --org-switcher-trigger-border-radius: var(--border-radius-default); /** Radio del trigger */
+  --org-switcher-focus-ring-color: var(--color-primary); /** Color del focus ring */
+  --org-switcher-focus-ring-width: var(--border-width-focus); /** Grosor del focus ring */
+  --org-switcher-focus-ring-offset: var(--border-width-default); /** Separación del focus ring */
+  --org-switcher-name-font-weight: var(--font-weight-emphasis); /** Peso del nombre de la org */
+  --org-switcher-name-color: var(--color-text-on-light); /** Color del nombre de la org */
+  --org-switcher-content-z-index: var(--floating-panel-z-index); /** Z-index del dropdown (por encima del sidebar en mobile) */
+  --org-switcher-item-border-radius: var(--border-radius-default); /** Radio de cada ítem */
+  --org-switcher-item-font-weight: var(--font-weight-default); /** Peso de ítems */
+  --org-switcher-item-color: var(--color-text-on-light); /** Color de ítems */
+  --org-switcher-separator-margin-block: var(--separator-spacing-md); /** Margen vertical del separador — el aire md de la línea del sistema */
+  --org-switcher-transition-duration: var(--floating-panel-transition-duration); /** Duración de transición */
+  --org-switcher-transition-easing: var(--floating-panel-transition-easing); /** Easing de transición */
+  --org-switcher-content-bg: var(--floating-panel-bg); /** Fondo del panel */
+  --org-switcher-content-border-width: var(--floating-panel-border-width); /** Borde del panel */
+  --org-switcher-content-border-color: var(--floating-panel-border-color); /** Color del borde del panel */
+  --org-switcher-content-border-radius: var(--floating-panel-border-radius); /** Radio del panel */
+  --org-switcher-content-shadow: var(--floating-panel-shadow); /** Sombra del panel */
+  --org-switcher-item-highlighted-bg: var(--menu-item-highlighted-bg); /** Relleno del ítem resaltado — el del Menu: la inversión de marca */
+  --org-switcher-item-highlighted-color: var(--menu-item-highlighted-color); /** Texto del ítem resaltado — el del Menu */
+  --org-switcher-item-destructive-color: var(--menu-item-destructive-color); /** Color de ítem destructivo — el del Menu */
+  --org-switcher-item-destructive-highlighted-bg: var(--menu-item-destructive-highlighted-bg); /** Relleno del ítem destructivo resaltado — el del Menu */
+  --org-switcher-item-destructive-highlighted-color: var(--menu-item-destructive-highlighted-color); /** Texto del ítem destructivo resaltado — el del Menu */
+  --org-switcher-separator-color: var(--separator-color); /** Color del separador — el de la línea del sistema */
+  --org-switcher-separator-height: var(--separator-thickness); /** Alto del separador — el grosor de la línea del sistema */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --org-switcher-focus-ring-color: var(--color-text-on-dark); /** Focus ring color — surface-dark. `focus-ring-color` (prussian) sería invisible sobre fondo oscuro. */
+  --org-switcher-name-color: var(--color-text-on-dark); /** Color del nombre de la org — surface-dark. `name-color` (on-light/prussian) sería ilegible sobre fondo oscuro. */
+  --org-switcher-item-color: var(--color-text-on-dark); /** Color de ítems — surface-dark */
+  --org-switcher-separator-color: var(--color-text-on-dark); /** Color del separador — surface-dark */
+  --org-switcher-item-highlighted-bg: var(--menu-item-highlighted-bg); /** Relleno del ítem resaltado — surface-dark */
+  --org-switcher-item-highlighted-color: var(--menu-item-highlighted-color); /** Texto del ítem resaltado — surface-dark */
+  --org-switcher-item-destructive-color: var(--menu-item-destructive-color); /** Color de ítem destructivo — surface-dark */
+  --org-switcher-item-destructive-highlighted-bg: var(--menu-item-destructive-highlighted-bg); /** Relleno del ítem destructivo resaltado — surface-dark */
+  --org-switcher-item-destructive-highlighted-color: var(--menu-item-destructive-highlighted-color); /** Texto del ítem destructivo resaltado — surface-dark */
+}

package/src/tokens/molecules/otp-field.css

@@ -0,0 +1,25 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --otp-field-gap: var(--spacing-2); /** Espacio entre label, celdas, helper y error */
+  --otp-field-error-font-family: var(--form-error-font-family); /** Font family del mensaje de error */
+  --otp-field-error-line-height: var(--form-error-line-height); /** Line height del mensaje de error */
+  --otp-field-helper-font-family: var(--form-helper-font-family); /** Font family del texto de ayuda */
+  --otp-field-helper-line-height: var(--form-helper-line-height); /** Line height del texto de ayuda */
+  --otp-field-error-font-size: var(--form-error-font-size); /** Font size del mensaje de error */
+  --otp-field-error-font-weight: var(--form-error-font-weight); /** Font weight del mensaje de error */
+  --otp-field-error-color: var(--form-error-color); /** Color del mensaje de error */
+  --otp-field-helper-font-size: var(--form-helper-font-size); /** Font size del texto de ayuda */
+  --otp-field-helper-font-weight: var(--form-helper-font-weight); /** Font weight del texto de ayuda */
+  --otp-field-helper-color: var(--form-helper-color); /** Color del texto de ayuda */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --otp-field-error-color: var(--color-error-text-on-dark); /** Color del mensaje de error — surface-dark */
+  --otp-field-helper-color: var(--color-text-on-dark); /** Color del texto de ayuda — surface-dark */
+}

package/src/tokens/molecules/otp-field.ts

@@ -0,0 +1,8 @@
+import otpField from '../../../tokens/molecule/otp-field.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(otpField as never);
+
+export const otpFieldBaseTokens   = all.filter(t => t.name === '--otp-field-gap');
+export const otpFieldErrorTokens  = all.filter(t => t.name.startsWith('--otp-field-error-'));
+export const otpFieldHelperTokens = all.filter(t => t.name.startsWith('--otp-field-helper-'));

package/src/tokens/molecules/page-intro.css

@@ -0,0 +1,10 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --page-intro-title-space-after: var(--text-heading-space-after); /** Aire bajo el título cuando comparte fila con las acciones: el mismo em que deja un título suelto, para que una cabecera con acciones y una sin ellas separen igual el título de la entradilla */
+  --page-intro-row-column-gap: var(--spacing-5); /** Aire entre el título y las acciones cuando comparten fila (a partir de `md`) */
+  --page-intro-row-gap: var(--spacing-3); /** Aire entre el título y las acciones cuando las acciones caen debajo (por debajo de `md`) */
+  --page-intro-actions-gap: var(--form-actions-gap); /** Aire entre las acciones — el de los botones de un formulario: la fila de acciones del sistema es una sola */
+}

package/src/tokens/molecules/pagination.css

@@ -0,0 +1,68 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --pagination-padding-inline: 0; /** Sin padding lateral */
+  --pagination-btn-bg: rgba(0, 0, 0, 0); /** Relleno en reposo: ninguno — es un botón outline */
+  --pagination-btn-disabled-bg: rgba(0, 0, 0, 0); /** Relleno cuando está deshabilitado: ninguno */
+  --pagination-btn-disabled-cursor: not-allowed; /** Cursor cuando está deshabilitado */
+  --pagination-font-family: var(--font-family-sans); /** Font family */
+  --pagination-font-size: var(--font-size-2); /** 16px — texto del nav (sumario) en la talla md */
+  --pagination-line-height: var(--line-height-none); /** Single line */
+  --pagination-gap: var(--spacing-3); /** Gap entre secciones del nav */
+  --pagination-controls-gap: var(--spacing-1); /** Gap entre botones de paginación */
+  --pagination-padding-block: var(--spacing-1); /** Padding vertical del nav */
+  --pagination-btn-padding-inline: var(--spacing-2); /** Padding horizontal del botón: el inset interior del control, no el del rótulo de un `Button` (aquí el rótulo es una cifra y la caja ya es cuadrada por `btn-height`); solo entra en juego cuando el número tiene tres o más dígitos */
+  --pagination-btn-border-style: var(--button-border-style); /** Estilo del borde del botón — el del `Button` */
+  --pagination-transition-duration: var(--motion-duration-fast); /** Duración de las transiciones */
+  --pagination-transition-easing: var(--motion-easing-default); /** Easing de las transiciones */
+  --pagination-sm-font-size: var(--font-size-1); /** Texto del nav — talla sm */
+  --pagination-sm-btn-padding-inline: var(--spacing-1); /** Padding horizontal del botón — talla sm */
+  --pagination-lg-font-size: var(--font-size-3); /** Texto del nav — talla lg (la pública) */
+  --pagination-lg-btn-padding-inline: var(--spacing-3); /** Padding horizontal del botón — talla lg */
+  --pagination-font-weight: var(--font-weight-default); /** Font weight base */
+  --pagination-summary-color: var(--color-text-on-light); /** Color del texto de total de resultados */
+  --pagination-btn-height: var(--button-height); /** Altura del botón de página — la del `Button md` (40px). También su lado mínimo: la caja es cuadrada */
+  --pagination-btn-font-size: var(--button-font-size); /** Tipografía del botón de página — la del `Button md` */
+  --pagination-btn-color: var(--color-primary); /** Tinta del botón en reposo */
+  --pagination-btn-border-color: var(--color-primary); /** Borde del botón en reposo */
+  --pagination-btn-hover-bg: var(--color-primary); /** Relleno en hover — el outline se invierte, sin subrayado */
+  --pagination-btn-hover-color: var(--color-text-on-dark); /** Tinta en hover */
+  --pagination-btn-hover-border-color: var(--color-primary); /** Borde en hover */
+  --pagination-btn-current-bg: var(--color-primary); /** Relleno de la página activa: el mismo dibujo que el hover */
+  --pagination-btn-current-color: var(--color-text-on-dark); /** Tinta de la página activa */
+  --pagination-btn-current-border-color: var(--color-primary); /** Borde de la página activa */
+  --pagination-btn-current-font-weight: var(--font-weight-emphasis); /** Peso tipográfico de la página activa */
+  --pagination-btn-disabled-color: var(--color-disabled-border-on-light); /** Tinta cuando está deshabilitado — el mismo rol que el `Button outline` */
+  --pagination-btn-disabled-border-color: var(--color-disabled-border-on-light); /** Borde cuando está deshabilitado — el mismo rol que el `Button outline` */
+  --pagination-ellipsis-color: var(--color-text-muted-on-light); /** Color del ellipsis */
+  --pagination-focus-ring-color: var(--color-primary); /** Color del focus ring */
+  --pagination-focus-ring-width: var(--border-width-focus); /** Grosor del focus ring */
+  --pagination-focus-ring-offset: var(--border-width-default); /** Separación del focus ring */
+  --pagination-sm-btn-height: var(--button-sm-height); /** Altura y lado mínimo del botón — la del `Button sm` (32px) */
+  --pagination-sm-btn-font-size: var(--button-sm-font-size); /** Tipografía del botón — la del `Button sm` */
+  --pagination-lg-btn-height: var(--button-lg-height); /** Altura y lado mínimo del botón — la del `Button lg` (48px) */
+  --pagination-lg-btn-font-size: var(--button-lg-font-size); /** Tipografía del botón — la del `Button lg` */
+  --pagination-btn-radius: var(--button-border-radius); /** Radio de borde del botón — el del `Button` */
+  --pagination-btn-border-width: var(--button-border-width); /** Grosor del borde del botón (1px) — el del `Button` */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --pagination-summary-color: var(--color-text-on-dark); /** Color del resumen — surface-dark */
+  --pagination-btn-color: var(--color-text-on-dark); /** Tinta del botón en reposo — surface-dark */
+  --pagination-btn-border-color: var(--color-text-on-dark); /** Borde del botón en reposo — surface-dark */
+  --pagination-btn-hover-bg: var(--color-text-on-dark); /** Relleno en hover — surface-dark: el blanco puro, como el `Button outline` */
+  --pagination-btn-hover-color: var(--color-primary); /** Tinta en hover — surface-dark */
+  --pagination-btn-hover-border-color: var(--color-text-on-dark); /** Borde en hover — surface-dark */
+  --pagination-btn-current-bg: var(--color-text-on-dark); /** Relleno de la página activa — surface-dark */
+  --pagination-btn-current-color: var(--color-primary); /** Tinta de la página activa — surface-dark */
+  --pagination-btn-current-border-color: var(--color-text-on-dark); /** Borde de la página activa — surface-dark */
+  --pagination-btn-disabled-color: var(--color-disabled-border-on-dark); /** Tinta deshabilitada — surface-dark */
+  --pagination-btn-disabled-border-color: var(--color-disabled-border-on-dark); /** Borde deshabilitado — surface-dark */
+  --pagination-ellipsis-color: var(--color-text-muted-on-dark); /** Color del ellipsis — surface-dark */
+  --pagination-focus-ring-color: var(--color-text-on-dark); /** Focus ring color — surface-dark */
+}

package/src/tokens/molecules/pagination.ts

@@ -0,0 +1,9 @@
+import pagination from '../../../tokens/component/pagination.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(pagination as never);
+
+export const paginationLayoutTokens  = all.filter(t => !t.name.match(/btn|ellipsis|focus/));
+export const paginationButtonTokens  = all.filter(t => t.name.match(/btn/));
+export const paginationFocusTokens   = all.filter(t => t.name.match(/focus/));
+export const paginationEllipsisTokens = all.filter(t => t.name.match(/ellipsis/));

package/src/tokens/molecules/password-field.css

@@ -0,0 +1,29 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --password-field-gap: var(--spacing-2); /** Gap entre label, input y mensajes */
+  --password-field-toggle-size: var(--size-component-md); /** Lado del área clicable del botón toggle: la talla md, la misma que el campo */
+  --password-field-toggle-icon-size: var(--font-size-3); /** Tamaño del icono del toggle — md (20px, acorde al campo de 40) */
+  --password-field-sm-toggle-icon-size: var(--icon-size-sm); /** Tamaño del icono del toggle — sm (16px) */
+  --password-field-lg-toggle-icon-size: var(--icon-size-md); /** Tamaño del icono del toggle — lg (24px) */
+  --password-field-sm-toggle-size: var(--size-component-sm); /** Lado del toggle — sm */
+  --password-field-lg-toggle-size: var(--size-component-lg); /** Lado del toggle — lg */
+  --password-field-action-margin-block-start: var(--spacing-2); /** Aire extra sobre la acción bajo el campo («¿Olvidaste tu contraseña?»), además del gap del campo */
+  --password-field-toggle-color: var(--color-primary); /** Color del icono toggle: tinta, prusia sobre claro */
+  --password-field-toggle-color-hover: var(--color-primary); /** Color del icono toggle en hover (sin cambio: la tinta no se atenúa; el foco se marca con el anillo) */
+  --password-field-toggle-focus-ring-width: var(--border-width-focus); /** Grosor del anillo de foco del toggle */
+  --password-field-toggle-focus-ring-offset: var(--border-width-focus); /** Separación del anillo de foco del toggle (se dibuja hacia dentro de la caja: el toggle va a ras del borde del campo) */
+  --password-field-toggle-focus-ring-color: var(--color-primary); /** Color del anillo de foco del toggle: la tinta de la superficie */
+  --password-field-input-padding-inline-end: var(--password-field-toggle-size); /** Padding derecho del input — el texto termina donde empieza el toggle */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --password-field-toggle-color: var(--color-text-on-dark); /** Color del icono toggle — surface-dark (blanco) */
+  --password-field-toggle-color-hover: var(--color-text-on-dark); /** Color del icono toggle en hover — surface-dark */
+  --password-field-toggle-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco del toggle — surface-dark */
+}

package/src/tokens/molecules/prev-next-nav.css

@@ -0,0 +1,42 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --prev-next-nav-font-family: var(--font-family-sans); /** Font family */
+  --prev-next-nav-sm-font-size: var(--font-size-1); /** 14px — UI label (variante sm) */
+  --prev-next-nav-gap: var(--spacing-3); /** Gap entre botones y label — variante md */
+  --prev-next-nav-sm-gap: var(--spacing-2); /** Gap entre botones y label — variante sm */
+  --prev-next-nav-text-gap: var(--spacing-1); /** Aire entre el rótulo de dirección y el título */
+  --prev-next-nav-transition-duration: var(--motion-duration-fast); /** Duración de las transiciones */
+  --prev-next-nav-transition-easing: var(--motion-easing-default); /** Easing de las transiciones */
+  --prev-next-nav-font-size: var(--text-font-size); /** La variante md hereda el cuerpo de la superficie; la sm tiene talla propia */
+  --prev-next-nav-eyebrow-font-size: var(--text-paragraph-small-font-size); /** Rótulo «Anterior»/«Siguiente» sobre el título del destino */
+  --prev-next-nav-eyebrow-color: var(--color-text-muted-on-light); /** Color del rótulo de dirección */
+  --prev-next-nav-title-font-weight: var(--font-weight-emphasis); /** Peso del título del destino */
+  --prev-next-nav-title-color: var(--color-text-on-light); /** Color del título del destino */
+  --prev-next-nav-title-hover-color: var(--color-primary); /** Color del título del destino en hover */
+  --prev-next-nav-label-font-weight: var(--font-weight-emphasis); /** Peso tipográfico del label central */
+  --prev-next-nav-label-color: var(--color-text-on-light); /** Color del label central */
+  --prev-next-nav-btn-color: var(--color-text-on-light); /** Color de los botones de navegación */
+  --prev-next-nav-btn-hover-color: var(--color-primary); /** Color en hover */
+  --prev-next-nav-btn-disabled-color: var(--color-icon-secondary-on-light); /** Color cuando el botón está deshabilitado */
+  --prev-next-nav-focus-ring-color: var(--color-primary); /** Color del focus ring */
+  --prev-next-nav-focus-ring-radius: var(--border-radius-default); /** Radio del anillo de foco — recto, como toda esquina del sistema */
+  --prev-next-nav-focus-ring-width: var(--border-width-focus); /** Grosor del focus ring */
+  --prev-next-nav-focus-ring-offset: var(--border-width-default); /** Separación del focus ring */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --prev-next-nav-eyebrow-color: var(--color-text-muted-on-dark); /** Color del rótulo de dirección — surface-dark */
+  --prev-next-nav-title-color: var(--color-text-on-dark); /** Color del título del destino — surface-dark */
+  --prev-next-nav-title-hover-color: var(--color-accent-2); /** Color del título en hover — surface-dark: amarillo, porque el prusia de marca es aquí el fondo */
+  --prev-next-nav-label-color: var(--color-text-on-dark); /** Color del label central — surface-dark */
+  --prev-next-nav-btn-color: var(--color-text-on-dark); /** Color de los botones de navegación — surface-dark */
+  --prev-next-nav-btn-hover-color: var(--color-accent-2); /** Color en hover — surface-dark: amarillo, porque el prusia de marca es aquí el fondo */
+  --prev-next-nav-btn-disabled-color: var(--color-text-muted-on-dark); /** Color del botón deshabilitado — surface-dark */
+  --prev-next-nav-focus-ring-color: var(--color-text-on-dark); /** Color del focus ring — surface-dark */
+}

package/src/tokens/molecules/prev-next-nav.ts

@@ -0,0 +1,7 @@
+import prevNextNav from '../../../tokens/molecule/prev-next-nav.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(prevNextNav as never);
+
+export const prevNextNavTokens     = all.filter(t => !t.name.startsWith('--prev-next-nav-surface-dark-'));
+export const prevNextNavDarkTokens = all.filter(t => t.name.startsWith('--prev-next-nav-surface-dark-'));

package/src/tokens/molecules/project-card.css

@@ -0,0 +1,21 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --project-card-media-aspect-ratio: 3 / 2; /** Proporción de la imagen del proyecto */
+  --project-card-gap: var(--spacing-3); /** Aire entre las piezas de la tarjeta */
+  --project-card-tags-gap: var(--spacing-2); /** Aire entre etiquetas */
+  --project-card-title-hover-line-width: var(--border-width-default); /** Grosor de la línea bajo el título con el puntero encima. Un estado se marca con una línea de tinta, nunca con relleno */
+  --project-card-title-hover-line-offset: var(--link-underline-offset); /** Separación entre el título y su línea de hover. Apunta a la del enlace: en el DS todo subrayado se separa del texto lo mismo */
+  --project-card-focus-ring-color: var(--color-primary); /** Color del anillo de foco del enlace */
+  --project-card-focus-ring-width: var(--border-width-focus); /** Grosor del anillo de foco */
+  --project-card-focus-ring-offset: var(--border-width-default); /** Separación del anillo de foco */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --project-card-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco — surface-dark */
+}

package/src/tokens/molecules/project-card.ts

@@ -0,0 +1,7 @@
+import projectCard from '../../../tokens/molecule/project-card.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(projectCard as never);
+
+export const projectCardTokens     = all.filter(t => !t.name.includes('-surface-dark-'));
+export const projectCardDarkTokens = all.filter(t => t.name.includes('-surface-dark-'));

package/src/tokens/molecules/prose.css

@@ -0,0 +1,58 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --prose-measure: var(--content-measure); /** Ancho máximo de la columna de lectura — la medida del sistema (70ch), que se resuelve contra la fuente del propio texto */
+  --prose-line-height: var(--line-height-relaxed); /** Interlineado de lectura larga (1,65), un punto por encima del cuerpo de interfaz */
+  --prose-flow-space: var(--spacing-4); /** Aire entre dos bloques consecutivos del documento (párrafo, lista, cita, tabla…) */
+  --prose-heading-space-before: var(--spacing-6); /** Aire antes de un título: un título abre sección, así que respira más que un párrafo. El aire de después lo pone el flujo */
+  --prose-sm-flow-space: var(--spacing-3); /** Aire entre bloques — talla sm */
+  --prose-sm-heading-space-before: var(--spacing-5); /** Aire antes de un título — talla sm */
+  --prose-quote-padding-inline: var(--spacing-4); /** Sangría del texto de la cita respecto a su línea */
+  --prose-code-padding-block: var(--code-padding-block); /** Padding vertical del código en línea — el del átomo Code: cero, para no romper el interlineado del párrafo */
+  --prose-rule-space: var(--spacing-6); /** Aire a ambos lados del corte temático: separa bloques, no párrafos */
+  --prose-font-size: var(--text-font-size); /** Cuerpo del texto largo: el de la superficie (16px en aplicación, 20px en la pública) */
+  --prose-sm-font-size: var(--text-paragraph-small-font-size); /** Cuerpo del texto largo — talla sm (un peldaño por debajo del cuerpo) */
+  --prose-list-padding-inline-start: var(--text-list-padding-inline-start); /** Sangría de las listas — la del átomo List */
+  --prose-list-gap: var(--text-list-gap); /** Aire entre elementos de lista — el del átomo List */
+  --prose-quote-color: var(--color-text-muted-on-light); /** Color del texto citado — atenuado: es voz de otro */
+  --prose-code-padding-inline: var(--code-padding-inline); /** Padding horizontal del código en línea — el del átomo Code */
+  --prose-table-cell-padding-block: var(--table-cell-padding-block); /** Padding vertical de celda — el de Table */
+  --prose-table-cell-padding-inline: var(--table-cell-padding-inline); /** Padding horizontal de celda — el de Table */
+  --prose-caption-font-size: var(--text-paragraph-small-font-size); /** Cuerpo del pie de figura: un peldaño por debajo */
+  --prose-caption-color: var(--color-text-muted-on-light); /** Color del pie de figura — atenuado */
+  --prose-color: var(--text-color); /** Color del texto largo — el del cuerpo de la superficie */
+  --prose-quote-border-width: var(--separator-thickness); /** Grosor de la línea que marca una cita — la línea del sistema */
+  --prose-quote-border-color: var(--separator-color); /** Color de la línea de la cita — tinta de la superficie */
+  --prose-code-font-family: var(--code-font-family); /** Monoespaciada del código en línea — la del átomo Code */
+  --prose-pre-bg: var(--code-block-bg); /** Fondo del bloque de código — el de CodeBlock */
+  --prose-pre-color: var(--code-block-color); /** Tinta del bloque de código — la de CodeBlock */
+  --prose-pre-padding-block: var(--code-block-padding-block-start); /** Padding vertical del bloque de código — el de CodeBlock */
+  --prose-pre-padding-inline: var(--code-block-padding-inline); /** Padding horizontal del bloque de código — el de CodeBlock */
+  --prose-pre-font-size: var(--code-block-font-size); /** Tamaño del bloque de código — el de CodeBlock */
+  --prose-pre-line-height: var(--code-block-line-height); /** Interlineado del bloque de código — el de CodeBlock */
+  --prose-table-font-size: var(--table-font-size); /** Cuerpo de las celdas — el de Table */
+  --prose-table-border-width: var(--table-border-width); /** Grosor del separador de fila — el de Table */
+  --prose-table-border-color: var(--table-row-border-color); /** Color del separador de fila — el de Table */
+  --prose-table-header-font-weight: var(--table-header-font-weight); /** Peso de la cabecera — el de Table */
+  --prose-table-header-border-color: var(--table-header-border-color); /** Color del borde bajo la cabecera — el de Table */
+  --prose-rule-thickness: var(--separator-thickness); /** Grosor del corte temático (`hr`) — la línea del sistema */
+  --prose-rule-color: var(--separator-color); /** Color del corte temático — tinta de la superficie */
+  --prose-image-border-radius: var(--card-border-radius); /** Radio de las imágenes — el de las superficies del sistema */
+  --prose-code-font-size: var(--code-font-size); /** Tamaño del código en línea — el del átomo Code */
+  --prose-code-bg: var(--code-bg); /** Fondo del código en línea — el del átomo Code: par autocontenido, idéntico en ambos temas */
+  --prose-code-color: var(--code-color); /** Tinta del código en línea — la del átomo Code */
+  --prose-pre-border-width: var(--code-block-border-width); /** Grosor del borde del bloque de código — el de CodeBlock */
+  --prose-pre-border-color: var(--code-block-border-color); /** Color del borde del bloque de código — el de CodeBlock */
+  --prose-pre-border-radius: var(--code-block-border-radius); /** Radio del bloque de código — el de CodeBlock */
+  --prose-code-border-radius: var(--code-border-radius); /** Radio del código en línea — el del átomo Code */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --prose-quote-color: var(--color-text-muted-on-dark); /** Color del texto citado — surface-dark */
+  --prose-caption-color: var(--color-text-muted-on-dark); /** Color del pie de figura — surface-dark */
+}

package/src/tokens/molecules/prose.ts

@@ -0,0 +1,7 @@
+import prose from '../../../tokens/molecule/prose.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(prose as never);
+
+export const proseBaseTokens = all.filter(t => !t.name.includes('surface-dark'));
+export const proseDarkTokens = all.filter(t => t.name.includes('surface-dark'));

package/src/tokens/molecules/public-page-shell.css

@@ -0,0 +1,8 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --public-page-shell-preferences-gap: var(--spacing-3); /** Aire entre los conmutadores de la banda —idioma y tema—: el aire de dentro de un componente. Los dos controles son las dos caras de la misma preferencia de pantalla y se leen como un par, no como dos bloques */
+  --public-page-shell-preferences-padding-block: var(--legal-footer-padding-block); /** Aire arriba y abajo de la banda de preferencias, la de idioma y tema que cierra una página pública por encima del pie legal. Apunta al aire del pie público —`legal-footer.padding-block`—, no al del `main`: la banda es chrome, no contenido, y tiene que cerrar la pantalla con la misma medida con la que la cierra el `LegalFooter` que va justo debajo. El aire que la separa del contenido ya lo pone el `main` al cerrar */
+}

package/src/tokens/molecules/radio-field.css

@@ -0,0 +1,42 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --radio-field-cursor: pointer; /** Cursor */
+  --radio-field-disabled-cursor: not-allowed; /** Cursor cuando está deshabilitado */
+  --radio-field-stack-gap: var(--spacing-2); /** Espacio entre la opción, la ayuda y el error — el ritmo del resto de campos */
+  --radio-field-gap: var(--spacing-3); /** Separación entre el radio y el texto */
+  --radio-field-sm-gap: var(--spacing-2); /** Gap — variante sm */
+  --radio-field-sm-padding-block: var(--spacing-2); /** Padding block — variante sm */
+  --radio-field-lg-gap: var(--spacing-4); /** Gap — variante lg */
+  --radio-field-lg-padding-block: var(--spacing-5); /** Padding block — variante lg */
+  --radio-field-padding-block: var(--control-padding-block); /** Padding block — hereda de control */
+  --radio-field-sm-label-font-size: var(--label-sm-font-size); /** Cuerpo del texto — variante sm: un peldaño por debajo del cuerpo de la superficie */
+  --radio-field-lg-label-font-size: var(--label-lg-font-size); /** Tamaño de la etiqueta en lg — el del Label lg (no el párrafo large, que en superficie pública crece con la prosa) */
+  --radio-field-label-font-family: var(--text-font-family); /** Familia tipográfica */
+  --radio-field-label-font-size: var(--text-font-size); /** Es texto corriente: el cuerpo de la superficie (16px en aplicación, 20px en la pública) */
+  --radio-field-label-line-height: var(--text-line-height); /** Interlineado */
+  --radio-field-label-letter-spacing: var(--text-letter-spacing); /** Interletraje */
+  --radio-field-error-font-family: var(--form-error-font-family); /** Font family del mensaje de error */
+  --radio-field-error-line-height: var(--form-error-line-height); /** Line height del mensaje de error */
+  --radio-field-helper-font-family: var(--form-helper-font-family); /** Font family del texto de ayuda */
+  --radio-field-helper-line-height: var(--form-helper-line-height); /** Line height del texto de ayuda */
+  --radio-field-label-font-weight: var(--text-font-weight); /** Peso tipográfico */
+  --radio-field-label-color: var(--text-color); /** Color del texto */
+  --radio-field-error-font-size: var(--form-error-font-size); /** Font size del mensaje de error */
+  --radio-field-error-font-weight: var(--form-error-font-weight); /** Font weight del mensaje de error */
+  --radio-field-error-color: var(--form-error-color); /** Color del mensaje de error */
+  --radio-field-helper-font-size: var(--form-helper-font-size); /** Font size del texto de ayuda */
+  --radio-field-helper-font-weight: var(--form-helper-font-weight); /** Font weight del texto de ayuda */
+  --radio-field-helper-color: var(--form-helper-color); /** Color del texto de ayuda */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --radio-field-label-color: var(--color-text-on-dark); /** Color del texto — surface-dark */
+  --radio-field-error-color: var(--color-error-text-on-dark); /** Color del mensaje de error — surface-dark */
+  --radio-field-helper-color: var(--color-text-on-dark); /** Color del texto de ayuda — surface-dark */
+}

package/src/tokens/molecules/radio-field.ts

@@ -0,0 +1,9 @@
+import json from '../../../tokens/molecule/radio-field.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(json as never);
+
+export const radioFieldErrorTokens  = all.filter(t => t.name.startsWith('--radio-field-error-') || t.name.startsWith('--radio-field-surface-dark-error-'));
+export const radioFieldHelperTokens = all.filter(t => t.name.startsWith('--radio-field-helper-'));
+export const radioFieldLabelTokens  = all.filter(t => t.name.includes('-label-'));
+export const radioFieldBaseTokens   = all.filter(t => !t.name.startsWith('--radio-field-error-') && !t.name.startsWith('--radio-field-helper-') && !t.name.includes('-label-'));

package/src/tokens/molecules/recovery-codes.css

@@ -0,0 +1,23 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --recovery-codes-column-gap: var(--spacing-6); /** Separación entre columnas de la rejilla de códigos (CSS `columns`) */
+  --recovery-codes-item-margin-block-end: var(--spacing-2); /** Separación vertical entre un código y el siguiente dentro de una columna */
+  --recovery-codes-actions-margin-block-start: var(--spacing-4); /** Separación entre la rejilla de códigos y la fila de acciones (el aire entre los propios botones lo pone `Inline`) */
+  --recovery-codes-font-family: var(--font-family-mono); /** Monoespaciada, como CodeBlock y Kbd — cada código es una credencial y se lee carácter a carácter */
+  --recovery-codes-padding-inline-start: var(--text-list-padding-inline-start); /** Sangría de la numeración — el mismo indent que `List` (`ol`) */
+  --recovery-codes-font-size: var(--text-paragraph-small-font-size); /** Tamaño de cada código — mismo criterio que CodeBlock */
+  --recovery-codes-line-height: var(--text-paragraph-small-line-height); /** Interlineado de cada código */
+  --recovery-codes-color: var(--color-text-on-light); /** Tinta de cada código */
+  --recovery-codes-index-color: var(--color-text-muted-on-light); /** Color del número de orden (`::marker`) — tinta secundaria, como el comentario de CodeBlock: el número orienta, no es el dato */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --recovery-codes-color: var(--color-text-on-dark); /** Tinta — surface-dark, por la regla de derivación */
+  --recovery-codes-index-color: var(--color-text-muted-on-dark); /** Color del número — surface-dark, por la regla de derivación */
+}

package/src/tokens/molecules/recovery-codes.ts

@@ -0,0 +1,4 @@
+import recoveryCodes from '../../../tokens/molecule/recovery-codes.json';
+import { flattenTokens } from '../utils';
+
+export const recoveryCodesTokens = flattenTokens(recoveryCodes as never);