Mística Tokens | Structure Definition

[yceballost]

Discussed in https://github.com/Telefonica/mistica-design/discussions/800

^{Originally posted by yceballost September 27, 2022} Abro esta discussion para listar qué elementos deberían tokenizarse en Mística

Included

• [x] Colors variables (Light & Dark)
• [x] Colors constants (Light & Dark)
• [x] #822
• [x] #1048
• [ ] #878
• [ ] #884
• [ ] #890

Future roadmap?

• [ ] Animation curves
• [ ] Animation timings
• [ ] Animation delays
• [ ] Spacing (?)
• [ ] Blur (?)
• [ ] Opacity (?)

[aweell]

Token type, customization and support

En la siguiente table se muestran los contextos en los que un token puede modificar su valor:

Context	sub-context
Theme	global, local
Mode 1	light, dark
Platform	iOS, android, web
Viewport size	mobile, tablet, desktop

¹ Only used for color tokens

En la siguiente tabla se muestra las propiedades que se considera que serán soportadas por la versión inicial del paquete de tokens. Éstas propiedades pueden afectar transversal o verticalmente al sistema, esto viene definido por los sub-contextos global y local dentro del contexto theme.

Token type	Theme [Global]	Theme [Local]	Mode	Platform	Viewport size
Color		:white_check_mark:	:white_check_mark:
Font-family		:white_check_mark:		:white_check_mark:
Font-size	:white_check_mark:				:white_check_mark:
Line-height	:white_check_mark:				:white_check_mark:
Font-weight		:white_check_mark:		:white_check_mark:
Border-radius		:white_check_mark:			:white_check_mark:
Shadow	:white_check_mark:			:white_check_mark:
z-index	:white_check_mark:			:white_check_mark:
media queries	:white_check_mark:				:white_check_mark:

Token distribution structure

La siguiente estructura se define con el objetivo de:

• Simplificar la creación de nuevas marcas.
• Organizar el consumo de tokens en las diferentes plataformas en función de variables de alto nivel.
• Permitir escalabilidad en lo relativo a nuevas propiedades customizables