Gracias, estoy tratando de entender los design tokens y me ayudan mucho vuestros artículos. Pero hay una cosa que no entiendo ¿Por qué si se ha definido size.font.base como 16px aparece en el archivo css generado como --size-font-base: 16rem? ¿Por qué el cambio de unidades?
En este caso el transformador solo agrega el rem, no escala el número por eso se pasa de tener 16px a 16rem. En este ejemplo nos vale, pero en un caso real habría que ver si es necesario aplicar una transformación también sobre el número.
Gracias, estoy tratando de entender los design tokens y me ayudan mucho vuestros artículos. Pero hay una cosa que no entiendo ¿Por qué si se ha definido size.font.base como 16px aparece en el archivo css generado como --size-font-base: 16rem? ¿Por qué el cambio de unidades?
Hola Alberto! gracias por tu comentario.
Pues mira, eso viene porque tenemos configurado el usar el transformGroup (conjunto de transformadores) de "css" que ya viene preconfigurado por style-dictionary: https://github.com/amzn/style-dictionary/blob/main/docs/transform_groups.md#css
Si te fijas, uno de los transformadores del que se compone es "size/rem" que lo que hace es justamente eso, agrega el rem: https://amzn.github.io/style-dictionary/#/transforms?id=sizerem
En este caso el transformador solo agrega el rem, no escala el número por eso se pasa de tener 16px a 16rem. En este ejemplo nos vale, pero en un caso real habría que ver si es necesario aplicar una transformación también sobre el número.
Espero que te sirva!
Muchísimas gracias Pablo, ya he estado jugando con los transformadores y viendo las posibilidades, automatizar esto me parece casi magia todavía 😅