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 de Pantalla y Contenedor | colors-slate-50 #F9FAFC | colors-slate-950 #0C0F18 |
background-surface-default | Fondo de superficie para Cabecera, Pie, Tarjeta de consentimiento, Menú de idioma y Diálogo informativo | colors-common-white #FFFFFF | colors-neutral-900 #1A2330 |
background-button-default | Fondo por defecto de Botón CTA | colors-blue-800 #3466F5 | colors-blue-800 #3466F5 |
background-button-hover | Fondo en hover de Botón CTA | colors-blue-900 #1467EB | colors-blue-900 #1467EB |
background-button-pressed | Fondo presionado de Botón CTA | colors-blue-950 #003EB7 | colors-blue-950 #003EB7 |
background-semantic-critical-primary | Fondo de Alerta de validación | colors-red-50 #FFF5F4 | colors-red-900 #A62319 |
text-neutral-primary | Color de Título, Descripción de cabecera, Texto de consentimiento y Descripción de consentimiento | colors-neutral-950 #111827 | colors-neutral-300 #D1D5DB |
text-neutral-secondary | Color de texto secundario para contenido de apoyo dentro de Contenedor | colors-neutral-600 #4B5563 | colors-red-700 #BF2828 |
text-button-inverse | Color de texto de Botón CTA | colors-common-white #FFFFFF | colors-common-white #FFFFFF |
text-semantic-critical-primary | Color de texto de Alerta de validación | colors-red-700 #BF2828 | colors-red-50 #FFF5F4 |
icon-neutral-primary | Color de icono de Botón de despliegue y Selector de idioma | colors-neutral-950 #111827 | colors-neutral-300 #D1D5DB |
icon-neutral-secondary | Color de icono de Icono de ayuda y Control de selección inactivo | colors-neutral-500 #6B7280 | colors-neutral-400 #9CA3AF |
icon-button-primary | Color de icono de Control de selección activo e iconos relacionados con botones | colors-blue-800 #3466F5 | colors-blue-800 #3466F5 |
icon-semantic-critical-primary | Color de icono de Alerta de validación | colors-red-700 #BF2828 | colors-red-50 #FFF5F4 |
border-neutral-primary | Color de borde de Tarjeta de consentimiento | colors-neutral-300 #D1D5DB | colors-neutral-700 #374151 |
border-neutral-secondary | Color de borde de Contenedor y divisores entre Consentimiento padre y Consentimiento hijo | 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 para el texto dentro de Contenedor |
headings-h4 | 24px, 700, 42px, -0.12px | 20px, 600, 32px, -0.10px | Título |
headings-h6 | 18px, 600, 28px, -0.20px | 18px, 600, 28px, -0.20px | Texto de encabezado dentro de Diálogo informativo |
base-regular | 14px, 400, 22px, 0 | 14px, 400, 22px, 0 | Texto de Descripción de cabecera, Descripción de consentimiento y Diálogo informativo |
base-medium | 14px, 500, 22px, 0 | 14px, 500, 22px, 0 | Texto de Consentimiento hijo y Botón CTA |
body-medium | 16px, 500, 28px, 0 | 16px, 500, 28px, 0 | Consentimiento padre y Texto de consentimiento |
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 Botón CTA, Tarjeta de consentimiento, Menú de idioma y Diálogo informativo |
radius-button | radius-md (8px) | Radius de Botón CTA |
radius-statement-box | radius-md (8px) | Radius de Tarjeta de consentimiento en modo boxed |
radius-menu | radius-md (8px) | Radius de Menú de idioma |
radius-alert | radius-md (8px) | Radius de Alerta de validación |
radius-dialog | radius-md (8px) | Radius de Diálogo informativo |
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) | Sombra de Tarjeta de consentimiento |
shadow-language-selector-menu | shadow-3 (0px 0px 8px 0px #64748b24) | shadow-3 (0px 0px 8px 0px #00000099) | Sombra de Menú de idioma |
shadow-dialog | shadow-0 (none) | shadow-0 (none) | Sombra de Diálogo informativo |
Tokens de grosor de borde
| Token | Valor por defecto | Uso |
|---|---|---|
border-statement-box | stroke-100 (1px) | Grosor de borde de Tarjeta de consentimiento |
border-container | stroke-100 (1px) | Grosor de borde de Contenedor en modo flat |
Validación
Las reglas y límites actuales están documentados en Validaciones de tokens.