@studiolxd/brand 38.12.4

package/src/tokens/form.ts

@@ -0,0 +1,23 @@
+import formJson from '../../tokens/component/form.json';
+import { flattenTokens, type Token } from './utils';
+
+const all = flattenTokens(formJson as never);
+
+/** Estructura y aire del formulario: campos, errores, acciones, enlaces y alternativas. */
+export const formLayoutTokens = all.filter(t =>
+  !t.name.startsWith('--form-error-') &&
+  !t.name.startsWith('--form-helper-') &&
+  !t.name.startsWith('--form-success-') &&
+  !t.name.includes('surface-dark'),
+);
+
+export const formLayoutDarkTokens = all.filter(t => t.name.includes('surface-dark') && !t.name.startsWith('--form-error-') && !t.name.startsWith('--form-helper-') && !t.name.startsWith('--form-success-'));
+
+export const formErrorTokens = all.filter(t => t.name.startsWith('--form-error-') && !t.name.includes('surface-dark'));
+export const formErrorDarkTokens: Token[] = all.filter(t => t.name.startsWith('--form-error-') && t.name.includes('surface-dark'));
+
+export const formHelperTokens = all.filter(t => t.name.startsWith('--form-helper-') && !t.name.includes('surface-dark'));
+export const formHelperDarkTokens: Token[] = all.filter(t => t.name.startsWith('--form-helper-') && t.name.includes('surface-dark'));
+
+export const formSuccessTokens = all.filter(t => t.name.startsWith('--form-success-') && !t.name.includes('surface-dark'));
+export const formSuccessDarkTokens: Token[] = all.filter(t => t.name.startsWith('--form-success-') && t.name.includes('surface-dark'));

package/src/tokens/global/border.css

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

package/src/tokens/global/breakpoint.css

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

package/src/tokens/global/colors.css

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

package/src/tokens/global/form.css

@@ -0,0 +1,39 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --form-gap: var(--spacing-5); /** Aire entre campos */
+  --form-errors-gap: var(--spacing-1); /** Aire entre los errores del formulario (los que no cuelgan de un campo) */
+  --form-captcha-margin-block-start: var(--spacing-5); /** Aire entre el último campo y el captcha */
+  --form-actions-gap: var(--spacing-3); /** Aire entre los botones de la zona de acciones */
+  --form-actions-margin-block-start: var(--spacing-6); /** Aire entre el último campo y las acciones */
+  --form-links-gap: var(--spacing-4); /** Aire entre los enlaces secundarios (¿olvidaste la contraseña?, ¿no tienes cuenta?) */
+  --form-links-margin-block-start: var(--spacing-5); /** Aire entre las acciones y los enlaces secundarios */
+  --form-alternatives-gap: var(--spacing-3); /** Aire entre las alternativas (acceso con Google, enlace mágico…) */
+  --form-alternatives-margin-block-start: var(--spacing-6); /** Aire entre el bloque principal y las alternativas */
+  --form-error-font-family: var(--font-family-sans); /** Font family del mensaje de error */
+  --form-error-line-height: var(--line-height-normal); /** Line height del mensaje de error */
+  --form-helper-font-family: var(--font-family-sans); /** Font family del texto de ayuda */
+  --form-helper-line-height: var(--line-height-normal); /** Line height del texto de ayuda */
+  --form-success-font-family: var(--font-family-sans); /** Font family del mensaje de éxito */
+  --form-success-line-height: var(--line-height-normal); /** Line height del mensaje de éxito */
+  --form-error-font-size: var(--text-paragraph-small-font-size); /** El mensaje de error va un peldaño por debajo del cuerpo de la superficie (14px en aplicación, 16px en la pública) */
+  --form-error-font-weight: var(--font-weight-default); /** Font weight del mensaje de error */
+  --form-error-color: var(--color-error-text-on-light); /** Color del mensaje de error */
+  --form-helper-font-size: var(--text-paragraph-small-font-size); /** El texto de ayuda va un peldaño por debajo del cuerpo de la superficie (14px en aplicación, 16px en la pública) */
+  --form-helper-font-weight: var(--font-weight-default); /** Font weight del texto de ayuda */
+  --form-helper-color: var(--color-text-on-light); /** Color del texto de ayuda: tinta (prusia), no gris */
+  --form-success-font-size: var(--text-font-size); /** El mensaje de éxito hereda el cuerpo de la superficie */
+  --form-success-font-weight: var(--font-weight-default); /** Font weight del mensaje de éxito */
+  --form-success-color: var(--color-text-on-light); /** Color del mensaje de éxito */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --form-error-color: var(--color-error-text-on-dark); /** Color del mensaje de error — surface-dark */
+  --form-helper-color: var(--color-text-on-dark); /** Color del texto de ayuda — surface-dark (blanco) */
+  --form-success-color: var(--color-text-on-dark); /** Color del mensaje de éxito — surface-dark */
+}

package/src/tokens/global/motion.css

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

package/src/tokens/global/opacity.css

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

package/src/tokens/global/section.css

@@ -0,0 +1,12 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --section-padding-inline: var(--spacing-4); /** Aire lateral de una sección de página */
+  --section-padding-block-sm: var(--spacing-3); /** Ritmo vertical compacto */
+  --section-padding-block-md: var(--spacing-4); /** Ritmo vertical base: celdas y bloques internos */
+  --section-padding-block-lg: var(--spacing-6); /** Ritmo vertical medio: introducciones, bloques de contenido */
+  --section-padding-block-xl: var(--spacing-7); /** Ritmo vertical amplio: banda de sección estándar */
+  --section-padding-block-2xl: var(--spacing-8); /** Ritmo vertical extra: bandas destacadas */
+}

package/src/tokens/global/shadow.css

@@ -0,0 +1,12 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --shadow-none: none; /** Escala. Valor del rol default */
+  --shadow-sm: 0 1px 2px rgba(17,30,48,0.08); /** Escala. El sistema no lo usa */
+  --shadow-md: 0 2px 8px rgba(17,30,48,0.10); /** Escala. El sistema no lo usa */
+  --shadow-lg: 0 4px 16px rgba(17,30,48,0.12); /** Escala. El sistema no lo usa */
+  --shadow-xl: 0 8px 32px rgba(17,30,48,0.16); /** Escala. El sistema no lo usa */
+  --shadow-default: var(--shadow-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/global/size.css

@@ -0,0 +1,11 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --size-component-sm: 2rem; /** 32px — talla mínima del sistema: controles compactos, avatares, iconos-botón, logos en barras */
+  --size-component-md: 2.5rem; /** 40px — talla por defecto de todo control de una línea: campos, selects, botones */
+  --size-component-lg: 3rem; /** 48px — controles destacados y objetivo táctil holgado */
+  --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 */
+  --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/global/spacing.css

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

package/src/tokens/global/typography.css

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

package/src/tokens/global/z-index.css

@@ -0,0 +1,12 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --z-index-bar: 100; /** Barras fijas de la aplicación: cabecera, barra lateral */
+  --z-index-backdrop: 200; /** Velo que oscurece la página bajo un modal o una hoja */
+  --z-index-modal: 300; /** Modales, hojas y paneles de navegación a pantalla completa */
+  --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 */
+  --z-index-toast: 500; /** Avisos: siempre visibles, sobre cualquier otra capa */
+  --z-index-skip: 600; /** Enlace de salto al contenido: lo primero al tabular, sobre todo lo demás */
+}

package/src/tokens/icon.ts

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

package/src/tokens/index.css

@@ -0,0 +1,174 @@
+@import "./global/breakpoint.css";
+@import "./global/colors.css";
+@import "./global/typography.css";
+@import "./global/spacing.css";
+@import "./global/border.css";
+@import "./global/shadow.css";
+@import "./global/size.css";
+@import "./global/motion.css";
+@import "./global/opacity.css";
+@import "./global/z-index.css";
+@import "./global/form.css";
+@import "./global/section.css";
+@import "./components/accordion.css";
+@import "./components/text.css";
+@import "./components/breadcrumb.css";
+@import "./components/link.css";
+@import "./components/tag.css";
+@import "./components/kbd.css";
+@import "./components/separator.css";
+@import "./components/card.css";
+@import "./components/container.css";
+@import "./components/columns.css";
+@import "./components/site-shell.css";
+@import "./components/stack.css";
+@import "./components/inline.css";
+@import "./components/skip-link.css";
+@import "./components/site-header.css";
+@import "./components/code-block.css";
+@import "./components/label.css";
+@import "./components/control.css";
+@import "./components/input.css";
+@import "./components/textarea.css";
+@import "./components/button.css";
+@import "./components/checkbox.css";
+@import "./components/radio.css";
+@import "./components/menu-button.css";
+@import "./components/close-button.css";
+@import "./components/logo.css";
+@import "./components/logomark.css";
+@import "./components/app-header.css";
+@import "./molecules/input-field.css";
+@import "./molecules/form-field.css";
+@import "./molecules/field-row.css";
+@import "./molecules/filter-bar.css";
+@import "./molecules/page-intro.css";
+@import "./molecules/site-nav.css";
+@import "./molecules/language-switcher.css";
+@import "./molecules/theme-switcher.css";
+@import "./molecules/dropdown-field.css";
+@import "./components/legal-footer.css";
+@import "./components/site-footer.css";
+@import "./components/hero.css";
+@import "./components/highlight.css";
+@import "./molecules/notification-button.css";
+@import "./molecules/notification-panel.css";
+@import "./molecules/notification-list.css";
+@import "./molecules/textarea-field.css";
+@import "./molecules/select-field.css";
+@import "./molecules/multi-select-field.css";
+@import "./molecules/async-select-field.css";
+@import "./molecules/async-multi-select-field.css";
+@import "./molecules/input-phone-field.css";
+@import "./components/otp-input.css";
+@import "./molecules/otp-field.css";
+@import "./molecules/checkbox-field.css";
+@import "./molecules/radio-field.css";
+@import "./components/select.css";
+@import "./components/multi-select.css";
+@import "./components/async-select.css";
+@import "./components/async-multi-select.css";
+@import "./components/avatar.css";
+@import "./components/input-phone.css";
+@import "./components/figure.css";
+@import "./components/code.css";
+@import "./components/radio-group.css";
+@import "./components/arrow.css";
+@import "./components/icon.css";
+@import "./components/floating-panel.css";
+@import "./components/floating-dock.css";
+@import "./molecules/menu.css";
+@import "./molecules/command-palette.css";
+@import "./molecules/image-crop-dialog.css";
+@import "./components/popover.css";
+@import "./components/tooltip.css";
+@import "./molecules/pagination.css";
+@import "./molecules/prev-next-nav.css";
+@import "./molecules/consent.css";
+@import "./molecules/carousel.css";
+@import "./molecules/project-card.css";
+@import "./molecules/table.css";
+@import "./molecules/data-table.css";
+@import "./components/step.css";
+@import "./molecules/steps.css";
+@import "./molecules/stepper.css";
+@import "./components/sidebar.css";
+@import "./molecules/org-switcher.css";
+@import "./molecules/app-launcher.css";
+@import "./molecules/user-menu.css";
+@import "./molecules/sidebar-nav.css";
+@import "./molecules/modal.css";
+@import "./molecules/sheet.css";
+@import "./components/tabs.css";
+@import "./molecules/calendar.css";
+@import "./molecules/calendar-planner.css";
+@import "./molecules/calendar-roster.css";
+@import "./components/time-select.css";
+@import "./molecules/time-field.css";
+@import "./molecules/date-picker.css";
+@import "./molecules/date-picker-field.css";
+@import "./molecules/date-time-field.css";
+@import "./components/switcher.css";
+@import "./molecules/switcher-field.css";
+@import "./molecules/password-field.css";
+@import "./molecules/empty-state.css";
+@import "./components/progress-bar.css";
+@import "./components/spinner.css";
+@import "./components/skeleton.css";
+@import "./molecules/alert.css";
+@import "./molecules/banner.css";
+@import "./molecules/toast.css";
+@import "./components/number-input.css";
+@import "./molecules/number-input-field.css";
+@import "./components/file-upload.css";
+@import "./molecules/file-upload-field.css";
+@import "./components/description-list.css";
+@import "./components/copyable-value.css";
+@import "./components/number-badge.css";
+@import "./components/chat.css";
+@import "./components/message-bubble.css";
+@import "./components/typing-indicator.css";
+@import "./molecules/message-composer.css";
+@import "./molecules/conversation-thread.css";
+@import "./molecules/conversation-list.css";
+@import "./molecules/user-message.css";
+@import "./molecules/assistant-message.css";
+@import "./molecules/chat-shell.css";
+@import "./molecules/onboarding-shell.css";
+@import "./molecules/public-page-shell.css";
+@import "./molecules/chart.css";
+@import "./components/sparkline.css";
+@import "./components/star-rating.css";
+@import "./components/toggle.css";
+@import "./components/toggle-group.css";
+@import "./components/collapsible.css";
+@import "./components/scroll-area.css";
+@import "./components/slider.css";
+@import "./molecules/tree-view.css";
+@import "./molecules/annotation-thread.css";
+@import "./components/text-inline.css";
+@import "./molecules/prose.css";
+@import "./molecules/table-of-contents.css";
+@import "./molecules/docs-search.css";
+@import "./molecules/search-form.css";
+@import "./molecules/stat-tile.css";
+@import "./molecules/uptime-bars.css";
+@import "./molecules/copy-button.css";
+@import "./molecules/confirm-dialog.css";
+@import "./molecules/avatar-upload.css";
+@import "./molecules/recovery-codes.css";
+@import "./molecules/connector-auth.css";
+
+/* Modo oscuro derivado: los tokens que heredan de otro que sí tiene par oscuro.
+   Va al final por lo mismo que el bloque de abajo: misma especificidad que los
+   `:root` de arriba, así que gana el último. */
+@import "./surface-dark-derived.css";
+
+/* Superficie invertida dentro de una oscura: devuelve a claro los tokens que el
+   modo oscuro voltea. Va después del bloque de arriba, aunque gane por
+   especificidad, para que se lea en el orden en que actúa. */
+@import "./surface-invert.css";
+
+/* Remapeo de la superficie pública (`.site-shell`) — va al final: los tokens
+   que redefine tienen la misma especificidad que los `:root` de arriba. */
+@import "./surface-public.css";

package/src/tokens/layer.ts

@@ -0,0 +1,4 @@
+import zIndex from '../../tokens/layer/z-index.json';
+import { flattenTokens } from './utils';
+
+export const zIndexTokens = flattenTokens(zIndex as never);

package/src/tokens/layout.ts

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

package/src/tokens/molecules/alert.css

@@ -0,0 +1,46 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --alert-padding-block: var(--spacing-4); /** Padding vertical del alert (16px) */
+  --alert-padding-inline: var(--spacing-5); /** Padding horizontal del alert (24px) */
+  --alert-gap: var(--spacing-3); /** Aire entre el contenido y el botón de cierre (12px) */
+  --alert-content-gap: var(--spacing-2); /** Aire entre el título y la descripción, y entre los bloques de la descripción (8px) */
+  --alert-title-line-height: var(--line-height-snug); /** Interlineado del título — el de un rótulo corto */
+  --alert-close-size: var(--size-component-sm); /** 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 */
+  --alert-close-inset: var(--spacing-2); /** Distancia del botón de cierre a la esquina superior derecha (8px) */
+  --alert-border-radius: var(--border-radius-default); /** Sin radio de esquinas */
+  --alert-border-width: var(--border-width-default); /** Grosor del borde */
+  --alert-bg: var(--color-primary); /** 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`) */
+  --alert-border-color: var(--color-text-on-dark); /** Borde por defecto — blanco. Sobre página clara dibuja el contorno del relleno prusia */
+  --alert-title-font-size: var(--text-font-size); /** El título hereda el cuerpo de la superficie (16px en aplicación, 20px en la pública) */
+  --alert-title-font-weight: var(--font-weight-emphasis); /** Peso del título */
+  --alert-title-color: var(--color-text-on-dark); /** Texto blanco sobre el relleno prusia */
+  --alert-description-font-size: var(--text-font-size); /** La descripción hereda el cuerpo de la superficie (16px en aplicación, 20px en la pública) */
+  --alert-description-line-height: var(--text-line-height); /** Interlineado de la descripción — el del cuerpo */
+  --alert-description-color: var(--color-text-on-dark); /** Descripción blanca sobre el relleno prusia — igual que el título */
+  --alert-success-bg: var(--color-success-fill); /** Fondo success — verde semántico */
+  --alert-success-border-color: var(--color-success-fill); /** Borde igual al fondo success */
+  --alert-success-title-color: var(--color-success-fill-text); /** Título blanco sobre fondo success */
+  --alert-success-description-color: var(--color-success-fill-text); /** Descripción blanca sobre fondo success */
+  --alert-error-bg: var(--color-error-fill); /** Fondo error — rojo semántico */
+  --alert-error-border-color: var(--color-error-fill); /** Borde igual al fondo error */
+  --alert-error-title-color: var(--color-error-fill-text); /** Título blanco sobre fondo error */
+  --alert-error-description-color: var(--color-error-fill-text); /** Descripción blanca sobre fondo error */
+  --alert-warning-bg: var(--color-warning-fill); /** Fondo warning — el relleno del rol de aviso. Es el amarillo de siempre, pero la procedencia es el rol de feedback, no la marca */
+  --alert-warning-border-color: var(--color-warning-fill); /** Borde igual al fondo warning */
+  --alert-warning-title-color: var(--color-warning-fill-text); /** Título prusia sobre fondo warning (11,17:1, AAA) */
+  --alert-warning-description-color: var(--color-warning-fill-text); /** Descripción prusia sobre fondo warning */
+  --alert-warning-close-color: var(--color-warning-fill-text); /** 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 */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --alert-bg: var(--color-text-on-dark); /** Fondo por defecto — surface-dark: blanco. El relleno neutro es el lienzo invertido, y sobre una página prusia el prusia desaparecería (mismo motivo que `Tag`/`NumberBadge` primary, que también invierten en vez de pasar a lavanda) */
+  --alert-border-color: var(--color-text-on-dark); /** Borde por defecto — surface-dark: igual al fondo, como en `success`/`error`/`warning`. El relleno blanco ya se separa solo de la página oscura y no necesita filete */
+  --alert-title-color: var(--color-primary); /** Título — surface-dark: tinta prusia sobre el relleno blanco (16,77:1, AAA) */
+  --alert-description-color: var(--color-primary); /** Descripción — surface-dark: tinta prusia, igual que el título */
+}