Tokens Contextuales
Los tokens contextuales son aliases de tokens semánticos para contextos específicos de componentes o plataforma. En el DS Investigación, estos tokens vienen del panel de System Variables en Figma, donde ciertos valores semánticos se renombraron para contextos específicos de la app.
Limitación de extracción
La API de Variables de Figma (nivel contextual completo) requiere plan Professional. Los tokens aquí presentes fueron inferidos inspeccionando el panel System Variables vía API de nodos. El nivel contextual completo se completará cuando se actualice el plan de Figma.
Tokens disponibles
border-color
--ds-color-contextual-border-color
from System Variables: BorderColor = NeutralGray500
→ color.semantic.border.default
background-color
--ds-color-contextual-background-color
from System Variables: BackgroundColor = NeutralGray500
→ color.semantic.background.secondary
¿Cuándo crear un token contextual?
Si: Un componente necesita el mismo valor en múltiples lugares de sí mismo
Card.backgroundColor — usado en header, body y footer del card
Si: Un valor semántico tiene un nombre diferente en el contexto de un componente
Input.borderColor = semantic.border.default
Si: El valor puede necesitar cambiar independientemente por tema o plataforma
NavBar.background puede ser blanco en iOS y translúcido en Android
Uso en CSS
/* Token contextual — ejemplo de Card */
:root {
/* Contextual apunta a semántico */
--ds-color-contextual-border-color: var(--ds-color-semantic-border-default);
--ds-color-contextual-background-color: var(--ds-color-semantic-background-secondary);
}
/* Componente usa el contextual */
.card {
border-color: var(--ds-color-contextual-border-color);
background: var(--ds-color-contextual-background-color);
}
/* En un tema futuro, solo cambia el contextual */
[data-theme="dark"] {
--ds-color-contextual-background-color: #1a1f2e;
}