Tokens semánticos
Los tokens semánticos son las claves públicas de diseño que una aplicación host puede sobrescribir mediante SET_CONFIG.
Usa estas claves dentro de payload.design; no apuntes a clases CSS generadas ni a detalles internos de componentes.
Los valores de esta página reflejan la implementación actual de mas-consents en design-tokens.
Cuando el host sobrescribe un color semántico, el valor puede ser una clave de color primitivo o un color CSS válido.
Tokens de color
Los tokens de color controlan fondos, textos, iconos y bordes del componente. El runtime tiene valores por defecto para light y dark.
| Token | Uso | Valor light | Valor dark |
|---|---|---|---|
background-neutral-primary | Fondo principal del componente | colors-slate-50 #F9FAFC | colors-slate-950 #0C0F18 |
background-surface-default | Fondo de superficies, cards y paneles | colors-common-white #FFFFFF | colors-neutral-900 #1A2330 |
background-button-default | Fondo del botón primario | colors-blue-800 #3466F5 | colors-blue-800 #3466F5 |
background-button-hover | Fondo del botón primario en hover | colors-blue-900 #1467EB | colors-blue-900 #1467EB |
background-button-pressed | Fondo del botón primario presionado | colors-blue-950 #003EB7 | colors-blue-950 #003EB7 |
background-semantic-critical-primary | Fondo de error y alertas de validación | colors-red-50 #FFF5F4 | colors-red-900 #A62319 |
text-neutral-primary | Texto principal | colors-neutral-950 #111827 | colors-neutral-300 #D1D5DB |
text-neutral-secondary | Texto secundario | colors-neutral-600 #4B5563 | colors-red-700 #BF2828 |
text-button-inverse | Texto sobre el botón primario | colors-common-white #FFFFFF | colors-common-white #FFFFFF |
text-semantic-critical-primary | Texto de error | colors-red-700 #BF2828 | colors-red-50 #FFF5F4 |
icon-neutral-primary | Iconos principales | colors-neutral-950 #111827 | colors-neutral-300 #D1D5DB |
icon-neutral-secondary | Iconos secundarios y controles sin marcar | colors-neutral-500 #6B7280 | colors-neutral-400 #9CA3AF |
icon-button-primary | Controles marcados e iconos relacionados con botones | colors-blue-800 #3466F5 | colors-blue-800 #3466F5 |
icon-semantic-critical-primary | Iconos de error | colors-red-700 #BF2828 | colors-red-50 #FFF5F4 |
border-neutral-primary | Bordes principales | colors-neutral-300 #D1D5DB | colors-neutral-700 #374151 |
border-neutral-secondary | Bordes secundarios y divisores | colors-neutral-200 #E5E7EB | colors-neutral-600 #4B5563 |
Tokens de tipografía
Los tokens de tipografía definen familia, tamaño, peso, interlineado y espaciado de letras para los estilos de texto que consume el componente.
El runtime usa de forma efectiva dos grupos responsive: xs para móvil y xl para cualquier caso no móvil.
| Grupo de tokens | Valores XL | Valores XS | Uso |
|---|---|---|---|
typography-base | Inter | Inter | Familia base aplicada salvo override específico |
headings-h4 | 24px, 700, 42px, -0.12px | 20px, 600, 32px, -0.10px | Título principal de la pantalla |
headings-h6 | 18px, 600, 28px, -0.20px | 18px, 600, 28px, -0.20px | Título del diálogo de información |
base-regular | 14px, 400, 22px, 0 | 14px, 400, 22px, 0 | Descripciones y textos secundarios de declaraciones |
base-medium | 14px, 500, 22px, 0 | 14px, 500, 22px, 0 | Etiquetas de declaraciones anidadas y texto del CTA |
body-medium | 16px, 500, 28px, 0 | 16px, 500, 28px, 0 | Etiquetas de declaraciones raíz |
Tokens de spacing
Los tokens de spacing controlan márgenes, paddings, gaps y algunos tamaños fijos de componentes. Cuando un token hereda de otro, sobrescribir el padre actualiza también el hijo salvo que el hijo tenga un override explícito.
| Token | Valor por defecto | Hereda de |
|---|---|---|
spacing-global-padding-x | spacing-400 (16px) | - |
spacing-global-padding-y | spacing-400 (16px) | - |
spacing-statement-vertical-gap | spacing-400 (16px) | - |
spacing-section-gap | spacing-0 (0px) | - |
spacing-statement-box-gap | spacing-300 (12px) | - |
spacing-statement-box-padding-x | spacing-300 (12px) | - |
spacing-header-padding-x | spacing-500 (20px) | spacing-global-padding-x + 4px |
spacing-header-padding-top | spacing-800 (32px) | spacing-global-padding-y + 16px |
spacing-header-padding-bottom | spacing-500 (20px) | spacing-global-padding-y + 4px |
spacing-header-content-gap | spacing-400 (16px) | - |
spacing-statement-parent-padding-x | spacing-400 (16px) | spacing-global-padding-x |
spacing-statement-parent-padding-y | spacing-400 (16px) | spacing-global-padding-y |
spacing-statement-parent-vertical-gap | spacing-400 (16px) | spacing-statement-vertical-gap |
spacing-statement-child-padding-x | spacing-400 (16px) | spacing-global-padding-x |
spacing-statement-child-padding-y | spacing-400 (16px) | spacing-global-padding-y |
spacing-statement-child-vertical-gap | spacing-400 (16px) | spacing-statement-vertical-gap |
spacing-statement-child-indent | spacing-800 (32px) | - |
spacing-footer-padding-x | spacing-800 (32px) | spacing-global-padding-x + 16px |
spacing-footer-padding-y | spacing-800 (32px) | spacing-global-padding-y + 16px |
spacing-footer-section-gap | spacing-800 (32px) | - |
spacing-alert-padding-x | spacing-400 (16px) | - |
spacing-alert-padding-y | spacing-300 (12px) | - |
spacing-button-desktop-padding-x | spacing-1400 (56px) | - |
spacing-button-padding-y | spacing-300 (12px) | - |
spacing-dialog-padding | spacing-800 (32px) | - |
spacing-dialog-padding-x | spacing-800 (32px) | spacing-dialog-padding |
spacing-dialog-padding-y | spacing-800 (32px) | spacing-dialog-padding |
spacing-dialog-section-gap | spacing-800 (32px) | - |
spacing-dialog-header-gap | spacing-400 (16px) | - |
spacing-dialog-offset | spacing-400 (16px) | - |
spacing-language-selector-gap | spacing-200 (8px) | - |
spacing-statement-help-icon-size | spacing-500 (20px) | - |
Tokens de radius
radius-global se propaga al resto de tokens de radius salvo que el token específico también esté sobrescrito.
| Token | Valor por defecto | Uso |
|---|---|---|
radius-global | radius-md (8px) | Fuente global de radius para tokens de componente |
radius-button | radius-md (8px) | Radius del botón CTA |
radius-statement-box | radius-md (8px) | Radio de borde de tarjetas de declaraciones en modo boxed |
radius-menu | radius-md (8px) | Radius del menú de selector de idioma |
radius-alert | radius-md (8px) | Radius de alerta de validación |
radius-dialog | radius-md (8px) | Radius del panel de diálogo de información |
Tokens de sombra
| Token | Valor light | Valor dark | Uso |
|---|---|---|---|
shadow-statement-box | shadow-3 (0px 0px 8px 0px #64748b24) | shadow-3 (0px 0px 8px 0px #00000099) | Tarjetas de statement en modo boxed |
shadow-language-selector-menu | shadow-3 (0px 0px 8px 0px #64748b24) | shadow-3 (0px 0px 8px 0px #00000099) | Desplegable del selector de idioma |
shadow-dialog | shadow-0 (none) | shadow-0 (none) | Diálogo de información |
Tokens de grosor de borde
| Token | Valor por defecto | Uso |
|---|---|---|
border-statement-box | stroke-100 (1px) | Borde de tarjeta de statement en modo boxed |
border-container | stroke-100 (1px) | Borde del contenedor global en modo flat |
Validación
Las reglas y límites actuales están documentados en Validaciones de tokens.