I have the following button.json
{
"component": {
"button": {
"padding": { "value": "{size.padding.medium.value}" },
"font-size": { "value": 2 },
"text-align": { "value": "center" },
"primary": {
"background-color": { "value": "hsl(10, 80, 50)" },
"color": { "value": "{color.font.inverse.value}" }
},
"secondary": {
"background-color": { "value": "{color.background.primary.value}" },
"color": { "value": "{color.font.link.value}" }
}
}
}
I am able to generate style tokens using amazon style-dictionary. What I want to generate is a complete sass css out of the json.
For example:
.component-button {
padding: " ";
font-size: " ";
& .primary {
background-color: "",
color: ""
}
}
One way to do this would be to create a custom format with a custom template to render the
.scss
file. I’ve included the basic code to do this below.First, here is the button.json file I used:
I added an additional
color
andsize
object so the pointers could resolve appropriately. I also made some assumptions on how your tokens were structured (e.g. thesize.2
for thefont-size
) but hopefully the overall idea is clear there.Here is the main JavaScript code. I've included comments to try to explain everything.
If you run this you should get a final file (build/button.scss) that looks like this: