Unable to add colors inside the same json file using style-dictionary

Question

I want to generate scss vars from my design token using style-dictionarys npm package (not the cli). At the moment i have one token that holds the entire design-system and i cannot be sure that i will get everything in seperate jsons from the design team down the line - (if required i can write a little script that splits the json)

The basic SD example works just fine although i had some weird issues with relative paths and so on that gave me a lot of headscratchery. I am currently facing the problem that the nested properties cannot access other values from within the same object.

i added the highlight color to the basic example json. SD generates the base colors just fine without throwing any erros but "highlight" is being ignored.

// colors.json
{
 "color": { 
    "base": { 
        "gray": { 
            "light": { "value": "#CCCCCC" }, 
            "medium": { "value": "#999999" }, 
            "dark": { "value": "#111111" } 
        }, 
        "red": { "value": "#FF0000" },
        "green": { "value": "#00FF00" }
    }, 
    "highlight": { 
        "gray": { 
            "light": "{color.base.gray.light}" 
            } 
        } 
    } 
}

In the multi-brand-exmaple - they are not defining any custom formatters or transforms so i am a little stuck here.

Followed the exmaple provided from the example repo.

Answer 1

I missed adding the "value" prop in front of the reference.

    "highlight": { 
            "gray": { 
                "light": {"value": "{color.base.gray.light}" }
                } 
            }