Componentes

En la implementación de los tokens de Nivel 3 (Componentes) hablamos de los valores más específicos al representar las propiedades propias de cada componente en el sistema.

Los tokens de nivel 3

Por su especificidad, cada componente es independiente de los otros en su descripción de valores a nivel de “Design Tokens”, es decir, si cambia el valor del token, no afectará nada fuera del componente.

También son fáciles de leer y ser interpretados por desarrollo. Los tokens específicos del componente del tipo button-color-background aclaran la función y aplicación del mismo. En otros niveles este nombre no pueden tener sentido en el contexto en el que se está utilizando.

Necesitan ser creados a medida que el sistema crece. Nuevos componentes implican nuevos “Design Tokens”. Por esta característica creemos que este tipo de implementaciones son ideales en entornos estables y con crecimientos bien escalados, de otra forma supondrán un importante foco de mantenimiento.

⁠

En diseño

Cada componente estaría enlazado a su propia librería de Foundations nivel 3. Esto supondría una tarea enorme de mantenimiento y construcción. No existe ningún Sistema que en su parte de diseño tenga implementada una solución de este tipo.

En desarrollo

Los valores son específicos de cada componente.

Beneficio

Cada componente es independiente del resto. Es más fácil tener un grado alto de libertad en los diseños.

Son intuitivos de implementar, al leer su nombre es sencillo saber dónde hay que aplicarlo, por ejemplo –button-color-background.

Contrapartida

Nuevos componentes requieren nuevos tokens y estos han de ser implementados en cada componente. Esto repercute en la sostenibilidad del sistema en ambientes de muchos cambios y alta creación de componentes.

Los tokens de Nivel 3 (Decisiones) son sencillos de leer e implementar por desarrollo, pero también un reto si existe un escenario de constantes cambios y creación frecuente de nuevos componentes.

⁠

Imagen mostrando los pasos entre niveles de token, transformador en output css y su implementación en desarrollo.

⁠

Plural DS y los componentes

Plural DS podría utilizar tokens de nivel 3, pero en la versión actual no son soportados.

Los tokens de nivel 3

Plural DS y los componentes

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.