@studiolxd/brand 38.12.4

package/src/tokens/components/button.css

@@ -0,0 +1,230 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --button-border-style: solid; /** Border style */
+  --button-border-color: rgba(0, 0, 0, 0); /** Default border color — overridden by variants */
+  --button-justify-content: center; /** Justify content */
+  --button-cursor: pointer; /** Cursor */
+  --button-white-space: nowrap; /** White space */
+  --button-text-decoration: none; /** Text decoration */
+  --button-disabled-cursor: not-allowed; /** Cursor when disabled */
+  --button-focus-ring-style: solid; /** Focus ring border style */
+  --button-block-width: 100%; /** Width when block modifier is applied */
+  --button-outline-bg: rgba(0, 0, 0, 0); /** Background */
+  --button-text-border-width: 0; /** Border width — 0 para uso inline en texto */
+  --button-text-padding-inline: 0; /** Inline (horizontal) padding — 0 para uso inline en texto */
+  --button-text-bg: rgba(0, 0, 0, 0); /** Background — always transparent */
+  --button-text-border: rgba(0, 0, 0, 0); /** Border color — transparent */
+  --button-text-hover-bg: rgba(0, 0, 0, 0); /** Hover background — stays transparent */
+  --button-text-hover-border: rgba(0, 0, 0, 0); /** Hover border — stays transparent */
+  --button-text-active-bg: rgba(0, 0, 0, 0); /** Active background — stays transparent */
+  --button-text-active-border: rgba(0, 0, 0, 0); /** Active border — stays transparent */
+  --button-ghost-border-width: 0; /** Sin borde — fondo reemplaza al borde en hover */
+  --button-ghost-bg: rgba(0, 0, 0, 0); /** Background — transparente en reposo */
+  --button-ghost-border: rgba(0, 0, 0, 0); /** Border color — transparent */
+  --button-ghost-hover-border: rgba(0, 0, 0, 0); /** Hover border — transparent */
+  --button-ghost-active-border: rgba(0, 0, 0, 0); /** Active border — transparent */
+  --button-font-family: var(--font-family-sans); /** Font family */
+  --button-font-size: var(--font-size-2); /** Font size */
+  --button-line-height: var(--line-height-none); /** Line height */
+  --button-transition-duration: var(--motion-duration-fast); /** Transition duration */
+  --button-transition-easing: var(--motion-easing-default); /** Transition easing */
+  --button-height: var(--size-component-md); /** Altura fija del botón (talla md): el contenido se centra, no se hace por padding */
+  --button-sm-height: var(--size-component-sm); /** Altura — sm */
+  --button-lg-height: var(--size-component-lg); /** Altura — lg */
+  --button-padding-inline: var(--spacing-6); /** Inline (horizontal) padding */
+  --button-focus-ring-offset: var(--spacing-1); /** Separación entre el botón y el anillo de foco (4px): el hueco es el fondo de la superficie, y eso lo hace leerse como foco y no como un borde más */
+  --button-sm-padding-inline: var(--spacing-5); /** Inline padding — sm */
+  --button-sm-font-size: var(--font-size-1); /** Font size — sm */
+  --button-lg-padding-inline: var(--spacing-8); /** Inline padding — lg */
+  --button-lg-font-size: var(--font-size-3); /** Font size — lg */
+  --button-primary-border-style: var(--button-border-style); /** Border style */
+  --button-primary-justify-content: var(--button-justify-content); /** Justify content */
+  --button-primary-cursor: var(--button-cursor); /** Cursor */
+  --button-primary-white-space: var(--button-white-space); /** White space */
+  --button-primary-text-decoration: var(--button-text-decoration); /** Text decoration */
+  --button-primary-disabled-cursor: var(--button-disabled-cursor); /** Cursor when disabled */
+  --button-primary-disabled-color: var(--color-white); /** Text color when disabled — white on grey background */
+  --button-primary-focus-ring-style: var(--button-focus-ring-style); /** Focus ring border style */
+  --button-destructive-border-style: var(--button-border-style); /** Border style */
+  --button-destructive-justify-content: var(--button-justify-content); /** Justify content */
+  --button-destructive-cursor: var(--button-cursor); /** Cursor */
+  --button-destructive-white-space: var(--button-white-space); /** White space */
+  --button-destructive-text-decoration: var(--button-text-decoration); /** Text decoration */
+  --button-destructive-disabled-cursor: var(--button-disabled-cursor); /** Cursor when disabled */
+  --button-destructive-focus-ring-style: var(--button-focus-ring-style); /** Focus ring border style */
+  --button-destructive-bg: var(--color-white); /** Background */
+  --button-outline-border-style: var(--button-border-style); /** Border style */
+  --button-outline-justify-content: var(--button-justify-content); /** Justify content */
+  --button-outline-cursor: var(--button-cursor); /** Cursor */
+  --button-outline-white-space: var(--button-white-space); /** White space */
+  --button-outline-text-decoration: var(--button-text-decoration); /** Text decoration */
+  --button-outline-disabled-cursor: var(--button-disabled-cursor); /** Cursor when disabled */
+  --button-outline-focus-ring-style: var(--button-focus-ring-style); /** Focus ring border style */
+  --button-text-border-style: var(--button-border-style); /** Border style */
+  --button-text-justify-content: var(--button-justify-content); /** Justify content */
+  --button-text-cursor: var(--link-cursor); /** Cursor */
+  --button-text-white-space: var(--button-white-space); /** White space */
+  --button-text-hover-underline-width: var(--link-hover-underline-width); /** Grosor de la línea en hover y en activo — el de `Link` */
+  --button-text-ink-hover-underline-width: var(--link-ink-hover-underline-width); /** tone=ink: grosor del subrayado en hover */
+  --button-text-disabled-cursor: var(--button-disabled-cursor); /** Cursor when disabled */
+  --button-text-focus-ring-style: var(--button-focus-ring-style); /** Focus ring border style */
+  --button-ghost-border-style: var(--button-border-style); /** Border style */
+  --button-ghost-justify-content: var(--button-justify-content); /** Justify content */
+  --button-ghost-cursor: var(--button-cursor); /** Cursor */
+  --button-ghost-white-space: var(--button-white-space); /** White space */
+  --button-ghost-text-decoration: var(--button-text-decoration); /** Text decoration */
+  --button-ghost-disabled-cursor: var(--button-disabled-cursor); /** Cursor when disabled */
+  --button-ghost-focus-ring-style: var(--button-focus-ring-style); /** Focus ring border style */
+  --button-border-radius: var(--border-radius-default); /** Rectangular: el radio del sistema (0), como los campos */
+  --button-border-width: var(--border-width-default); /** Border width */
+  --button-font-weight: var(--font-weight-default); /** Font weight */
+  --button-disabled-bg: var(--color-disabled-bg-on-light); /** Background when disabled — only form button changes bg */
+  --button-disabled-color: var(--color-disabled-text-on-light); /** Text color when disabled — light surface */
+  --button-disabled-border: var(--color-disabled-text-on-light); /** Border color when disabled — light surface, matches text for contrast */
+  --button-focus-ring-width: var(--border-width-focus); /** Focus ring width */
+  --button-primary-font-family: var(--button-font-family); /** Font family */
+  --button-primary-font-size: var(--button-font-size); /** Font size */
+  --button-primary-line-height: var(--button-line-height); /** Line height */
+  --button-primary-transition-duration: var(--button-transition-duration); /** Transition duration */
+  --button-primary-transition-easing: var(--button-transition-easing); /** Transition easing */
+  --button-primary-padding-inline: var(--button-padding-inline); /** Inline (horizontal) padding */
+  --button-primary-focus-ring-offset: var(--button-focus-ring-offset); /** Focus ring offset */
+  --button-primary-focus-ring-color: var(--color-primary); /** Anillo de foco: la tinta de la superficie (prusia), no el lavanda del botón — así se ve como foco, no como borde */
+  --button-primary-bg: var(--color-accent-1); /** Background */
+  --button-primary-color: var(--color-primary); /** Text color */
+  --button-primary-border: var(--color-accent-1); /** Border color */
+  --button-primary-hover-bg: var(--color-accent-2); /** Hover background */
+  --button-primary-hover-color: var(--color-primary); /** Hover text color */
+  --button-primary-hover-border: var(--color-accent-2); /** Hover border color */
+  --button-primary-active-bg: var(--color-accent-2); /** Active background */
+  --button-primary-active-color: var(--color-primary); /** Active text color */
+  --button-primary-active-border: var(--color-accent-2); /** Active border color */
+  --button-destructive-font-family: var(--button-font-family); /** Font family */
+  --button-destructive-font-size: var(--button-font-size); /** Font size */
+  --button-destructive-line-height: var(--button-line-height); /** Line height */
+  --button-destructive-transition-duration: var(--button-transition-duration); /** Transition duration */
+  --button-destructive-transition-easing: var(--button-transition-easing); /** Transition easing */
+  --button-destructive-padding-inline: var(--button-padding-inline); /** Inline (horizontal) padding */
+  --button-destructive-focus-ring-offset: var(--button-focus-ring-offset); /** Focus ring offset */
+  --button-destructive-focus-ring-color: var(--color-destructive-text-on-light); /** Focus ring color */
+  --button-destructive-color: var(--color-destructive-text-on-light); /** Text color */
+  --button-destructive-border: var(--color-destructive-text-on-light); /** Border color */
+  --button-destructive-hover-bg: var(--color-destructive-fill); /** Hover background */
+  --button-destructive-hover-color: var(--color-destructive-fill-text); /** Hover text color */
+  --button-destructive-hover-border: var(--color-destructive-fill); /** Hover border color */
+  --button-destructive-active-bg: var(--color-destructive-fill); /** Active background */
+  --button-destructive-active-color: var(--color-destructive-fill-text); /** Active text color */
+  --button-destructive-active-border: var(--color-destructive-fill); /** Active border color */
+  --button-outline-font-family: var(--button-font-family); /** Font family */
+  --button-outline-font-size: var(--button-font-size); /** Font size */
+  --button-outline-line-height: var(--button-line-height); /** Line height */
+  --button-outline-transition-duration: var(--button-transition-duration); /** Transition duration */
+  --button-outline-transition-easing: var(--button-transition-easing); /** Transition easing */
+  --button-outline-disabled-color: var(--color-disabled-border-on-light); /** Text color when disabled */
+  --button-outline-disabled-border: var(--color-disabled-border-on-light); /** Border color when disabled */
+  --button-outline-padding-inline: var(--button-padding-inline); /** Inline (horizontal) padding */
+  --button-outline-focus-ring-offset: var(--button-focus-ring-offset); /** Focus ring offset */
+  --button-outline-focus-ring-color: var(--color-text-on-light); /** Focus ring color — dark on light backgrounds */
+  --button-outline-color: var(--color-text-on-light); /** Text color */
+  --button-outline-border: var(--color-text-on-light); /** Border color */
+  --button-outline-hover-bg: var(--color-text-on-light); /** Hover background */
+  --button-outline-hover-color: var(--color-text-on-dark); /** Hover text color */
+  --button-outline-hover-border: var(--color-text-on-light); /** Hover border color */
+  --button-outline-active-bg: var(--color-text-on-light); /** Active background */
+  --button-outline-active-color: var(--color-text-on-dark); /** Active text color */
+  --button-outline-active-border: var(--color-text-on-light); /** Active border color */
+  --button-text-font-family: var(--button-font-family); /** Font family */
+  --button-text-font-size: var(--button-font-size); /** Font size */
+  --button-text-line-height: var(--button-line-height); /** Line height */
+  --button-text-underline-offset: var(--link-underline-offset); /** Separación entre el texto y su línea — la de `Link`. Va como `padding-block-end`, así que la línea cae por debajo del icono igual que del texto */
+  --button-text-transition-duration: var(--button-transition-duration); /** Transition duration */
+  --button-text-transition-easing: var(--button-transition-easing); /** Transition easing */
+  --button-ghost-font-family: var(--button-font-family); /** Font family */
+  --button-ghost-font-size: var(--button-font-size); /** Font size */
+  --button-ghost-line-height: var(--button-line-height); /** Line height */
+  --button-ghost-transition-duration: var(--button-transition-duration); /** Transition duration */
+  --button-ghost-transition-easing: var(--button-transition-easing); /** Transition easing */
+  --button-ghost-padding-inline: var(--button-padding-inline); /** Inline (horizontal) padding */
+  --button-ghost-focus-ring-offset: var(--button-focus-ring-offset); /** Focus ring offset */
+  --button-ghost-focus-ring-color: var(--color-primary); /** Focus ring color */
+  --button-ghost-color: var(--color-text-on-light); /** Text color */
+  --button-ghost-hover-bg: var(--color-primary); /** Hover background — fondo sutil */
+  --button-ghost-hover-color: var(--color-text-on-dark); /** Hover text color — sin cambio */
+  --button-ghost-active-bg: var(--color-primary); /** Active background */
+  --button-ghost-active-color: var(--color-text-on-dark); /** Active text color */
+  --button-primary-border-radius: var(--button-border-radius); /** Border radius */
+  --button-primary-border-width: var(--button-border-width); /** Border width */
+  --button-primary-font-weight: var(--button-font-weight); /** Font weight */
+  --button-primary-disabled-bg: var(--button-disabled-border); /** Background when disabled — filled with the disabled border color */
+  --button-primary-disabled-border: var(--button-disabled-border); /** Border color when disabled */
+  --button-primary-focus-ring-width: var(--button-focus-ring-width); /** Focus ring width */
+  --button-destructive-border-radius: var(--button-border-radius); /** Border radius */
+  --button-destructive-border-width: var(--button-border-width); /** Border width */
+  --button-destructive-font-weight: var(--button-font-weight); /** Font weight */
+  --button-destructive-disabled-color: var(--button-disabled-color); /** Text color when disabled */
+  --button-destructive-disabled-border: var(--button-disabled-border); /** Border color when disabled */
+  --button-destructive-focus-ring-width: var(--button-focus-ring-width); /** Focus ring width */
+  --button-outline-border-radius: var(--button-border-radius); /** Border radius */
+  --button-outline-border-width: var(--button-border-width); /** Border width */
+  --button-outline-font-weight: var(--button-font-weight); /** Font weight */
+  --button-outline-focus-ring-width: var(--button-focus-ring-width); /** Focus ring width */
+  --button-text-border-radius: var(--button-border-radius); /** Border radius */
+  --button-text-font-weight: var(--button-font-weight); /** Font weight */
+  --button-text-underline-width: var(--link-underline-width); /** Grosor de la línea en reposo. La variante `text` se subraya con la misma técnica que `Link` —sombra interior, no `text-decoration`— porque `text-decoration` no cubre un SVG y un botón con icono quedaba con la línea cortada. Apunta al token de `Link` para que las dos piezas no puedan separarse */
+  --button-text-ink-color: var(--link-ink-color); /** tone=ink: la tinta de la superficie, como en Link */
+  --button-text-ink-underline-width: var(--link-ink-underline-width); /** tone=ink: grosor del subrayado en reposo */
+  --button-text-disabled-color: var(--button-disabled-color); /** Text color when disabled — light surface */
+  --button-text-focus-ring-width: var(--button-focus-ring-width); /** Focus ring width */
+  --button-text-focus-ring-offset: var(--link-focus-ring-offset); /** Focus ring offset */
+  --button-text-focus-ring-color: var(--link-focus-ring-color); /** Focus ring color — light surface */
+  --button-text-color: var(--link-color); /** Text color — light surface */
+  --button-text-hover-color: var(--link-hover-color); /** Hover text color — unchanged */
+  --button-text-active-color: var(--link-hover-color); /** Active text color — unchanged */
+  --button-ghost-border-radius: var(--button-border-radius); /** Border radius */
+  --button-ghost-font-weight: var(--button-font-weight); /** Font weight */
+  --button-ghost-disabled-color: var(--button-disabled-color); /** Text color when disabled */
+  --button-ghost-focus-ring-width: var(--button-focus-ring-width); /** Focus ring width */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --button-outline-hover-bg: var(--color-white); /** Hover background — surface-dark */
+  --button-outline-hover-border: var(--color-white); /** Hover border color — surface-dark */
+  --button-outline-active-bg: var(--color-white); /** Active background — surface-dark */
+  --button-outline-active-border: var(--color-white); /** Active border color — surface-dark */
+  --button-outline-focus-ring-color: var(--color-white); /** Focus ring color — surface-dark */
+  --button-text-underline-width: var(--link-underline-width); /** Grosor de la línea en reposo — surface-dark: el de `Link`, que sobre fondo oscuro no lleva línea en reposo */
+  --button-primary-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco — surface-dark (blanco) */
+  --button-destructive-color: var(--color-destructive-text-on-dark); /** Text color — surface-dark */
+  --button-destructive-border: var(--color-destructive-text-on-dark); /** Border color — surface-dark */
+  --button-destructive-hover-bg: var(--color-destructive-fill); /** Hover background — surface-dark (fill universal, mismo rojo que en claro) */
+  --button-destructive-hover-color: var(--color-destructive-fill-text); /** Hover text color — surface-dark */
+  --button-destructive-hover-border: var(--color-destructive-fill); /** Hover border color — surface-dark */
+  --button-destructive-active-bg: var(--color-destructive-fill); /** Active background — surface-dark */
+  --button-destructive-active-color: var(--color-destructive-fill-text); /** Active text color — surface-dark */
+  --button-destructive-active-border: var(--color-destructive-fill); /** Active border color — surface-dark */
+  --button-destructive-focus-ring-color: var(--color-destructive-text-on-dark); /** Focus ring color — surface-dark */
+  --button-outline-color: var(--color-text-on-dark); /** Text color — surface-dark */
+  --button-outline-border: var(--color-text-on-dark); /** Border color — surface-dark */
+  --button-outline-hover-color: var(--color-text-on-light); /** Hover text color — surface-dark */
+  --button-outline-active-color: var(--color-text-on-light); /** Active text color — surface-dark */
+  --button-text-disabled-color: var(--color-text-muted-on-dark); /** Text color when disabled — surface-dark */
+  --button-ghost-color: var(--color-text-on-dark); /** Text color — surface-dark */
+  --button-ghost-hover-color: var(--color-primary); /** Hover text color — surface-dark */
+  --button-ghost-active-color: var(--color-primary); /** Active text color — surface-dark */
+  --button-ghost-focus-ring-color: var(--color-text-on-dark); /** Focus ring color — surface-dark */
+  --button-ghost-hover-bg: var(--color-text-on-dark); /** Hover background — surface-dark */
+  --button-ghost-active-bg: var(--color-text-on-dark); /** Active background — surface-dark */
+  --button-ghost-disabled-color: var(--color-text-muted-on-dark); /** Text color when disabled — surface-dark */
+  --button-text-hover-underline-width: var(--link-hover-underline-width); /** Grosor de la línea en hover y activo — surface-dark: el de `Link`, que sobre fondo oscuro pone la línea en el hover */
+  --button-text-color: var(--link-color); /** Text color — surface-dark */
+  --button-text-hover-color: var(--link-hover-color); /** Hover text color — surface-dark */
+  --button-text-ink-color: var(--link-ink-color); /** tone=ink sobre superficie oscura */
+  --button-text-active-color: var(--link-hover-color); /** Active text color — surface-dark */
+  --button-text-focus-ring-color: var(--link-focus-ring-color); /** Focus ring color — surface-dark */
+}

package/src/tokens/components/button.ts

@@ -0,0 +1,13 @@
+import button from '../../../tokens/component/button.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(button as never);
+
+export const buttonBaseTokens        = all.filter(t => !t.name.match(/--button-(primary|outline|destructive|ghost|text|sm|lg|block)/));
+export const buttonPrimaryTokens     = all.filter(t => t.name.startsWith('--button-primary') && !t.name.startsWith('--button-primary-dark'));
+export const buttonPrimaryDarkTokens = all.filter(t => t.name.startsWith('--button-primary-dark'));
+export const buttonOutlineTokens     = all.filter(t => t.name.startsWith('--button-outline'));
+export const buttonDestructiveTokens = all.filter(t => t.name.startsWith('--button-destructive'));
+export const buttonGhostTokens       = all.filter(t => t.name.startsWith('--button-ghost'));
+export const buttonTextTokens        = all.filter(t => t.name.startsWith('--button-text'));
+export const buttonSizeTokens        = all.filter(t => t.name.match(/--button-(sm|lg)-/));

package/src/tokens/components/card.css

@@ -0,0 +1,43 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --card-padding-inline: var(--spacing-4); /** Padding horizontal */
+  --card-padding-block-start: var(--spacing-4); /** Padding block start */
+  --card-padding-block-end: var(--spacing-3); /** Padding block end */
+  --card-gap: var(--spacing-3); /** Separación entre elementos internos */
+  --card-description-font-size: var(--font-size-3); /** Tamaño de fuente de la descripción */
+  --card-description-margin-block-end: var(--spacing-7); /** Margen inferior de la descripción */
+  --card-header-gap: var(--spacing-3); /** Separación entre el bloque de texto y la acción en la cabecera */
+  --card-header-row-gap: var(--spacing-1); /** Separación entre el título y la descripción en la cabecera */
+  --card-footer-gap: var(--spacing-2); /** Separación entre acciones del pie */
+  --card-border-radius: var(--border-radius-default); /** Radio de esquinas — sin redondeado */
+  --card-title-font-weight: var(--font-weight-emphasis); /** Peso del título de la tarjeta */
+  --card-primary-bg: var(--color-accent-1); /** Variante primary — fondo lavanda. No es `color.primary` (prussian): coincidiría con `color.background.dark` y desaparecería sobre `.surface-dark`. Mismo patrón autocontenido que `button.primary` — un par que no depende de la superficie ambiente, igual en claro y oscuro */
+  --card-primary-color: var(--color-primary); /** Variante primary — texto prussian sobre el fondo lavanda */
+  --card-accent-1-bg: var(--color-accent-1); /** Variante accent-1 — fondo lavanda */
+  --card-accent-1-color: var(--color-text-on-light); /** Variante accent-1 — texto. Color saturado que ya contrasta en cualquier superficie: sin par surface-dark, como las variantes semánticas de Alert/Tag */
+  --card-accent-2-bg: var(--color-accent-2); /** Variante accent-2 — fondo amarillo */
+  --card-accent-2-color: var(--color-text-on-light); /** Variante accent-2 — texto. Sin par surface-dark: mismo motivo que accent-1 */
+  --card-support-1-bg: var(--color-support-1); /** Variante support-1 — fondo esmeralda */
+  --card-support-1-color: var(--color-text-on-light); /** Variante support-1 — texto. Sin par surface-dark: mismo motivo que accent-1 */
+  --card-support-2-bg: var(--color-support-2); /** Variante support-2 — fondo cayena */
+  --card-support-2-color: var(--color-text-on-light); /** Variante support-2 — texto. Sin par surface-dark: mismo motivo que accent-1 */
+  --card-outline-bg: var(--color-background-light); /** Variante outline — fondo blanco (light) */
+  --card-outline-color: var(--color-text-on-light); /** Variante outline — texto oscuro sobre blanco */
+  --card-outline-border-color: var(--color-primary); /** Variante outline — borde prussian */
+  --card-outline-border-width: var(--border-width-default); /** Variante outline — grosor de borde */
+  --card-selectable-focus-ring-offset: var(--button-focus-ring-offset); /** Tarjeta-opción: separación del anillo, la del botón */
+  --card-selectable-focus-ring-width: var(--button-focus-ring-width); /** Tarjeta-opción: grosor del anillo de foco, el del botón */
+  --card-selectable-focus-ring-color: var(--button-primary-focus-ring-color); /** Tarjeta-opción: color del anillo de foco (prusia), el del botón primario */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --card-outline-bg: var(--color-background-dark); /** Variante outline — fondo, surface-dark */
+  --card-outline-color: var(--color-text-on-dark); /** Variante outline — texto, surface-dark */
+  --card-outline-border-color: var(--color-text-on-dark); /** Variante outline — borde, surface-dark */
+}

package/src/tokens/components/card.ts

@@ -0,0 +1,7 @@
+import card from '../../../tokens/component/card.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(card as never);
+
+export const cardTokens     = all.filter(t => !t.name.startsWith('--card-surface-dark-'));
+export const cardDarkTokens = all.filter(t => t.name.startsWith('--card-surface-dark-'));

package/src/tokens/components/chat-shell.ts

@@ -0,0 +1,7 @@
+import chatShell from '../../../tokens/organism/chat-shell.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(chatShell as never);
+
+export const chatShellTokens     = all.filter(t => !t.name.includes('surface-dark'));
+export const chatShellDarkTokens = all.filter(t => t.name.includes('surface-dark'));

package/src/tokens/components/chat.css

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

package/src/tokens/components/checkbox.css

@@ -0,0 +1,44 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --checkbox-size: 1.25em; /** Tamaño del checkbox (ancho y alto) */
+  --checkbox-check-size: 0.65em; /** Tamaño del checkmark interior */
+  --checkbox-border-style: solid; /** Border style */
+  --checkbox-bg: transparent; /** Fondo sin marcar */
+  --checkbox-cursor: pointer; /** Cursor */
+  --checkbox-disabled-cursor: not-allowed; /** Cursor cuando está deshabilitado */
+  --checkbox-check-rotate: 15deg; /** Rotación del checkmark en animación de entrada/salida */
+  --checkbox-sm-size: 1rem; /** Tamaño del checkbox — variante sm (16px) */
+  --checkbox-sm-check-size: 0.55rem; /** Tamaño del checkmark interior — variante sm */
+  --checkbox-lg-size: 1.5rem; /** Tamaño del checkbox — variante lg (24px) */
+  --checkbox-lg-check-size: 0.85rem; /** Tamaño del checkmark interior — variante lg */
+  --checkbox-target-size: var(--size-target-min); /** Área sensible al puntero: 24×24 px como pide WCAG 2.5.8, aunque el dibujo sea menor. Se extiende de forma invisible y centrada, sin mover la maqueta */
+  --checkbox-check-color: var(--color-white); /** Color del checkmark */
+  --checkbox-transition-duration: var(--motion-duration-fast); /** Duración de transiciones */
+  --checkbox-transition-easing: var(--motion-easing-default); /** Easing de transiciones */
+  --checkbox-border-radius: var(--border-radius-default); /** Border radius */
+  --checkbox-border-width: var(--border-width-default); /** Border width */
+  --checkbox-border-color: var(--color-primary); /** Color del borde */
+  --checkbox-bg-checked: var(--color-primary); /** Fondo cuando está marcado */
+  --checkbox-focus-ring-width: var(--border-width-focus); /** Ancho del anillo de foco */
+  --checkbox-focus-ring-offset: var(--border-width-default); /** Separación del anillo de foco respecto al borde */
+  --checkbox-focus-ring-color: var(--color-primary); /** Color del anillo de foco */
+  --checkbox-error-border-color: var(--color-error-text-on-light); /** Borde en error: el color de error (texto/borde, nunca fondo) */
+  --checkbox-disabled-border-color: var(--color-disabled-border-on-light); /** Color del borde cuando está deshabilitado */
+  --checkbox-disabled-bg-checked: var(--color-disabled-border-on-light); /** Fondo marcado/indeterminado cuando está deshabilitado */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --checkbox-error-border-color: var(--color-error-text-on-dark); /** Borde en error — surface-dark */
+  --checkbox-border-color: var(--color-text-on-dark); /** Border color — surface-dark */
+  --checkbox-bg-checked: var(--color-text-on-dark); /** Background when checked — surface-dark */
+  --checkbox-check-color: var(--color-background-dark); /** Checkmark color — surface-dark */
+  --checkbox-focus-ring-color: var(--color-text-on-dark); /** Focus ring color — surface-dark */
+  --checkbox-disabled-border-color: var(--color-text-muted-on-dark); /** Borde deshabilitado — surface-dark */
+  --checkbox-disabled-bg-checked: var(--color-text-muted-on-dark); /** Fondo marcado deshabilitado — surface-dark */
+}

package/src/tokens/components/checkbox.ts

@@ -0,0 +1,9 @@
+import checkbox from '../../../tokens/component/checkbox.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(checkbox as never);
+
+export const checkboxBaseTokens     = all.filter(t => !t.name.match(/--checkbox-(focus|disabled|dark)/));
+export const checkboxFocusTokens    = all.filter(t => t.name.includes('focus'));
+export const checkboxDisabledTokens = all.filter(t => t.name.includes('disabled'));
+export const checkboxDarkTokens     = all.filter(t => t.name.includes('dark'));

package/src/tokens/components/close-button.css

@@ -0,0 +1,22 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --close-button-size-sm: var(--size-component-sm); /** Lado del botón en talla sm (32px): dentro de una tarjeta compacta — un aviso, un panel del dock */
+  --close-button-size-md: var(--size-component-md); /** Lado del botón en talla md (40px, por defecto): la cabecera de un diálogo */
+  --close-button-size-lg: var(--size-component-lg); /** Lado del botón en talla lg (48px): objetivo táctil holgado */
+  --close-button-icon-size: var(--icon-size-md); /** Glifo del aspa (24px), la talla por defecto de icono-botón. No cambia con la talla del botón: lo que crece es el área sensible, no el dibujo */
+  --close-button-color: var(--color-text-on-light); /** Color del glifo: la tinta de la superficie, ya en reposo. El aspa NO tiene estado de hover —ni fondo ni cambio de color—: el único estado que marca es el foco */
+  --close-button-focus-ring-width: var(--border-width-focus); /** Grosor del anillo de foco */
+  --close-button-focus-ring-offset: var(--border-width-focus); /** Separación del anillo de foco (el rol focus gobierna ancho y separación) */
+  --close-button-focus-ring-color: var(--color-text-on-light); /** Color del anillo de foco: la tinta de la superficie */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --close-button-color: var(--color-text-on-dark); /** Color del glifo — surface-dark */
+  --close-button-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco — surface-dark */
+}

package/src/tokens/components/close-button.ts

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

package/src/tokens/components/code-block.css

@@ -0,0 +1,62 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --code-block-focus-ring-style: solid; /** Estilo del anillo de foco del área de código */
+  --code-block-font-family: var(--font-family-mono); /** Monoespaciada (Google Sans Code) — propia del componente (card no define tipografía) */
+  --code-block-header-gap: var(--spacing-2); /** Separación en la cabecera (entre language tag y botón copiar) y entre la cabecera y el código */
+  --code-block-token-keyword-color: var(--color-chart-sequential-700); /** Palabra reservada (`const`, `return`, `if`) — el azul prusia del extremo de la rampa secuencial, 7,68:1 sobre el gris del bloque */
+  --code-block-token-string-color: var(--color-green); /** Literal de cadena — el verde base del sistema, 6,4:1 sobre el gris del bloque */
+  --code-block-token-number-color: var(--color-chart-diverging-warm-3); /** Literal numérico — el extremo del brazo cálido de la divergente, 5,7:1 sobre el gris del bloque */
+  --code-block-padding-inline: var(--card-padding-inline); /** Padding horizontal — heredado de card */
+  --code-block-padding-block-start: var(--card-padding-block-start); /** Padding block start — heredado de card */
+  --code-block-padding-block-end: var(--card-padding-block-end); /** Padding block end — heredado de card */
+  --code-block-color: var(--color-text-on-light); /** Color de texto */
+  --code-block-bg: var(--color-surface-secondary-on-light); /** Fondo gris claro — propio del componente (card no tiene variante gris) */
+  --code-block-font-size: var(--text-paragraph-small-font-size); /** Tamaño de fuente del código — mismo tamaño que paragraph small */
+  --code-block-line-height: var(--text-paragraph-small-line-height); /** Interlineado del código — mismo criterio que paragraph small */
+  --code-block-focus-ring-width: var(--border-width-focus); /** Grosor del anillo de foco del área de código: el `<pre>` con scroll horizontal es focalizable con teclado */
+  --code-block-focus-ring-offset: var(--border-width-default); /** Separación del anillo de foco respecto al área de código */
+  --code-block-focus-ring-color: var(--color-primary); /** Color del anillo de foco — prusia, como el borde */
+  --code-block-token-tag-color: var(--code-block-token-keyword-color); /** Nombre de etiqueta en marcado (`<div>`) — misma tinta que la palabra reservada: es la palabra del lenguaje */
+  --code-block-token-constant-color: var(--code-block-token-keyword-color); /** Constante del lenguaje (`true`, `null`, `undefined`) — misma tinta que la palabra reservada */
+  --code-block-token-regexp-color: var(--code-block-token-string-color); /** Expresión regular — misma tinta que la cadena: también es un literal */
+  --code-block-token-attribute-color: var(--code-block-token-string-color); /** Nombre de atributo en marcado (`class=`) — misma tinta que la cadena, con la que forma pareja visual */
+  --code-block-token-function-color: var(--code-block-token-number-color); /** Nombre de función invocada o declarada — misma tinta cálida que el número */
+  --code-block-token-comment-color: var(--color-text-muted-on-light); /** Comentario — la tinta secundaria del sistema, que es exactamente lo que un comentario es: 7,9:1 sobre el gris del bloque */
+  --code-block-token-inserted-bg: var(--color-success-fill); /** Línea añadida en un diff — relleno sólido universal (mismo color en las dos superficies), no tinta suelta: es el mismo dibujo que el resto de rellenos de feedback del sistema */
+  --code-block-token-inserted-color: var(--color-success-fill-text); /** Línea añadida — contenido sobre el relleno, 7,2:1 */
+  --code-block-token-deleted-bg: var(--color-destructive-fill); /** Línea eliminada en un diff — relleno sólido universal, por el mismo motivo que la añadida */
+  --code-block-token-deleted-color: var(--color-destructive-fill-text); /** Línea eliminada — contenido sobre el relleno, 7,2:1 */
+  --code-block-border-radius: var(--card-border-radius); /** Radio de esquinas — heredado de card */
+  --code-block-border-width: var(--card-outline-border-width); /** Grosor de borde — heredado de card (variante outline) */
+  --code-block-border-color: var(--card-outline-border-color); /** Color de borde — heredado de card (variante outline, prussian), para dar contraste frente al fondo gris claro */
+  --code-block-token-punctuation-color: var(--code-block-token-comment-color); /** Signos de puntuación y delimitadores (`{}`, `;`, `,`) — tinta secundaria: se retiran para que se lea lo que separan */
+  --code-block-token-operator-color: var(--code-block-token-comment-color); /** Operadores (`=`, `=>`, `+`) — tinta secundaria, como la puntuación */
+  --code-block-token-variable-color: var(--code-block-color); /** Identificador (nombre de variable o parámetro) — la tinta del bloque: los nombres que pone quien escribe el código son el texto corriente del fragmento, no una categoría del lenguaje */
+  --code-block-token-property-color: var(--code-block-token-variable-color); /** Nombre de propiedad de un objeto — la tinta del bloque, como el identificador */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --code-block-token-keyword-color: var(--color-chart-sequential-700-on-dark); /** Palabra reservada — surface-dark: el mismo extremo de la rampa en su paso oscuro, 5,79:1 sobre el gris oscuro del bloque */
+  --code-block-token-string-color: var(--color-emerald); /** Literal de cadena — surface-dark: la esmeralda de marca, el paso claro de la misma familia, 5,25:1 sobre el gris oscuro del bloque */
+  --code-block-token-number-color: var(--color-yellow); /** Literal numérico — surface-dark: el amarillo de marca, el paso claro de la misma familia cálida, 5,9:1 sobre el gris oscuro del bloque */
+  --code-block-border-color: var(--color-text-on-dark); /** Color de borde — surface-dark, por la regla de derivación (como el borde de Kbd) */
+  --code-block-color: var(--color-text-on-dark); /** Color de texto — surface-dark, por la regla de derivación */
+  --code-block-bg: var(--color-surface-secondary-on-dark); /** Fondo — surface-dark: el mismo rol de superficie clara secundaria, en su variante oscura (el que ya usan Kbd/ProgressBar/tfoot de Table sobre `.surface-dark`) */
+  --code-block-focus-ring-color: var(--color-text-on-dark); /** Color del anillo de foco — surface-dark, por la regla de derivación */
+  --code-block-token-tag-color: var(--code-block-token-keyword-color); /** Nombre de etiqueta — surface-dark */
+  --code-block-token-constant-color: var(--code-block-token-keyword-color); /** Constante del lenguaje — surface-dark */
+  --code-block-token-regexp-color: var(--code-block-token-string-color); /** Expresión regular — surface-dark */
+  --code-block-token-attribute-color: var(--code-block-token-string-color); /** Nombre de atributo — surface-dark */
+  --code-block-token-function-color: var(--code-block-token-number-color); /** Nombre de función — surface-dark */
+  --code-block-token-comment-color: var(--color-text-muted-on-dark); /** Comentario — surface-dark, por la regla de derivación (el par `-on-dark` del mismo rol) */
+  --code-block-token-punctuation-color: var(--code-block-token-comment-color); /** Puntuación — surface-dark */
+  --code-block-token-operator-color: var(--code-block-token-comment-color); /** Operadores — surface-dark */
+  --code-block-token-variable-color: var(--code-block-color); /** Identificador — surface-dark */
+  --code-block-token-property-color: var(--code-block-token-variable-color); /** Nombre de propiedad — surface-dark */
+}

package/src/tokens/components/code-block.ts

@@ -0,0 +1,11 @@
+import codeBlock from '../../../tokens/component/code-block.json';
+import { flattenTokens, type Token } from '../utils';
+
+const all = flattenTokens(codeBlock as never);
+
+const esOscuro   = (t: Token) => t.name.includes('-surface-dark-');
+const esSintaxis = (t: Token) => t.name.startsWith('--code-block-token-');
+
+export const codeBlockTokens       = all.filter(t => !esOscuro(t) && !esSintaxis(t));
+export const codeBlockSyntaxTokens = all.filter(t => esSintaxis(t) && !esOscuro(t));
+export const codeBlockDarkTokens   = all.filter(t => esOscuro(t));

package/src/tokens/components/code.css

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

package/src/tokens/components/code.ts

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

package/src/tokens/components/collapsible.css

@@ -0,0 +1,29 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --collapsible-trigger-cursor: pointer; /** Cursor del disparador */
+  --collapsible-disabled-cursor: not-allowed; /** Cursor cuando está deshabilitado */
+  --collapsible-trigger-gap: var(--spacing-2); /** Separación entre el rótulo del disparador y su chevron */
+  --collapsible-trigger-padding-block: var(--spacing-2); /** Aire vertical del disparador */
+  --collapsible-disabled-opacity: var(--opacity-disabled); /** Opacidad cuando está deshabilitado */
+  --collapsible-content-padding-block: var(--spacing-2); /** Aire bajo el contenido plegable */
+  --collapsible-transition-duration: var(--motion-duration-fast); /** Duración de abrir y cerrar */
+  --collapsible-transition-easing: var(--motion-easing-default); /** Easing de abrir y cerrar */
+  --collapsible-trigger-font-family: var(--control-font-family); /** Familia tipográfica del disparador */
+  --collapsible-trigger-font-size: var(--control-font-size); /** Tamaño de fuente del disparador */
+  --collapsible-trigger-color: var(--color-text-on-light); /** Tinta del disparador */
+  --collapsible-focus-ring-width: var(--border-width-focus); /** Grosor del anillo de foco */
+  --collapsible-focus-ring-offset: var(--border-width-default); /** Separación del anillo de foco */
+  --collapsible-focus-ring-color: var(--color-primary); /** Color del anillo de foco */
+  --collapsible-trigger-font-weight: var(--control-font-weight); /** Peso tipográfico del disparador */
+}
+
+.surface-dark,
+.surface-invert,
+[data-theme="dark"],
+html.dark {
+  --collapsible-trigger-color: var(--color-text-on-dark); /** Tinta del disparador — surface-dark */
+  --collapsible-focus-ring-color: var(--color-text-on-dark); /** Anillo de foco — surface-dark */
+}

package/src/tokens/components/collapsible.ts

@@ -0,0 +1,7 @@
+import collapsible from '../../../tokens/component/collapsible.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(collapsible as never);
+
+export const collapsibleTokens     = all.filter(t => !t.name.startsWith('--collapsible-surface-dark-'));
+export const collapsibleDarkTokens = all.filter(t => t.name.startsWith('--collapsible-surface-dark-'));

package/src/tokens/components/columns.css

@@ -0,0 +1,13 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --columns-ratio-1-1: 1fr 1fr; /** Reparto a dos columnas: mitad y mitad */
+  --columns-ratio-1-2: 1fr 2fr; /** Reparto a dos columnas: un tercio y dos tercios */
+  --columns-ratio-2-1: 2fr 1fr; /** Reparto a dos columnas: dos tercios y un tercio */
+  --columns-gap-md: var(--spacing-6); /** Aire entre columnas — base */
+  --columns-gap-lg: var(--spacing-8); /** Aire entre columnas — amplio */
+  --columns-stack-gap-md: var(--spacing-6); /** Aire entre celdas apiladas (móvil) — base */
+  --columns-stack-gap-lg: var(--spacing-7); /** Aire entre celdas apiladas (móvil) — amplio */
+}

package/src/tokens/components/columns.ts

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

package/src/tokens/components/container.css

@@ -0,0 +1,17 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --container-max-width-md: var(--breakpoint-md); /** Ancho del contenido — estrecho */
+  --container-max-width-lg: var(--breakpoint-lg); /** Ancho del contenido — medio */
+  --container-max-width-xl: var(--breakpoint-xl); /** Ancho del contenido — estándar de página pública */
+  --container-max-width-2xl: var(--breakpoint-2xl); /** Ancho del contenido — amplio */
+  --container-max-width-3xl: var(--breakpoint-3xl); /** Ancho del contenido — casi a sangre */
+  --container-padding-inline: var(--section-padding-inline); /** Aire lateral entre el borde de la pantalla y el contenido */
+  --container-padding-block-sm: var(--section-padding-block-sm); /** Aire vertical compacto */
+  --container-padding-block-md: var(--section-padding-block-md); /** Aire vertical base */
+  --container-padding-block-lg: var(--section-padding-block-lg); /** Aire vertical medio */
+  --container-padding-block-xl: var(--section-padding-block-xl); /** Aire vertical amplio — banda de sección estándar */
+  --container-padding-block-2xl: var(--section-padding-block-2xl); /** Aire vertical extra — bandas destacadas */
+}

package/src/tokens/components/container.ts

@@ -0,0 +1,7 @@
+import container from '../../../tokens/component/container.json';
+import { flattenTokens } from '../utils';
+
+const all = flattenTokens(container as never);
+
+export const containerWidthTokens   = all.filter(t => t.name.includes('max-width'));
+export const containerSpacingTokens = all.filter(t => t.name.includes('padding'));