Quiero obtener las reglas scss para tokens de diseño de un archivo json proporcionado por el equipo de diseño. Usé el diccionario de estilos y logré obtener los tokens de diseño base, pero hay pocos tokens que usan objetos completos como valor.
Este es un ejemplo de token de diseño (recibido del equipo de diseño) que quiero transformar a scss:
{ "fontFamilies": { "inter": { "value": "Inter", "type": "fontFamilies" } }, "fontWeights": { "inter-0": { "value": "Regular", "type": "fontWeights" }, }, "fontSize": { "10": { "value": "72", "type": "fontSizes" } }, "Display-2xl": { "Regular": { "value": { "fontFamily": "{fontFamilies.inter.value}", "fontWeight": "{fontWeights.inter-0.value}", "fontSize": "$fontSize.10", }, "type": "typography" }, }Nota: los tokens simples se transforman con éxito. La salida del diccionario de estilo se ve así:
$font-families-inter: Inter; $font-weights-inter-0: Regular; $font-size-10: 72; $display-2xl-regular: [object Object]; ¿Es posible usar el diccionario de estilo y generar estas reglas para tokens como display-2xl-regular ?
El valor tiene que ser lo último en el nodo hoja.
Este:
{ "fontFamilies": { "inter": { "value": "Inter", "type": "fontFamilies" } }, "fontWeights": { "inter-0": { "value": "Regular", "type": "fontWeights" } }, "fontSize": { "10": { "value": "72", "type": "fontSizes" } }, "Display-2xl": { "Regular": { "type": "typography", "fontFamily": { "value": "{fontFamilies.inter.value}" }, "fontWeight": { "value": "{fontWeights.inter-0.value}" }, "fontSize": { "value": "{fontSize.10}" } } } }te conseguirá:
$font-families-inter: Inter; $font-weights-inter-0: Regular; $font-size-10: 72; $display-2xl-regular-font-family: Inter; $display-2xl-regular-font-weight: Regular; $display-2xl-regular-font-size: 72;Además, un diccionario de estilo de avisos normalmente agregará un prefijo.
Intenta jugar en el patio de recreo del diccionario de estilo de div.riot. Creé un ejemplo aquí .
También puede salirse con la suya si desea un valor en el padre.
"Display-2xl": { " ": { // Has to be a space. This comment also will break json value: "PARENT VALUE" }, "Regular": { "type": "typography", "fontFamily": { "value": "{fontFamilies.inter.value}" }, "fontWeight": { "value": "{fontWeights.inter-0.value}" }, "fontSize": { "value": "{fontSize.10}" } } }