[Question] Is there a way to have a value for a token that will also have nested values?

[michaelwarren1106]

What I'd really like to be able to do if possible is set a "default" prop that wont result in an addition to the token name but still allows to created nested variations in the same file/config.

Lets say I have config like the following:

color: {
   text: {
      body: {
         DEFAULT: { value: 'green'},
         on: {
            dark: { value: 'blue' },
            'dark-accent': { value: 'pink' }
         }
      }
   }
}

It would be really cool if the names that end up getting created are something like:

color-text-body: 'green'             // instead of 'color-text-body-default'
color-text-body-on-dark: 'blue'
color-text-body-on-dark-accent: 'pink'

Is there any way to accomplish this kind of config?

Thanks!

[michaelwarren1106]

nevermind, I've found the previous issues that mention this, and I second the 4.0 feature requests :)

[dbanksdesign]

You can do this if you changed 'DEFAULT' to a special or space character like '@' or '_':

color: {
   text: {
      body: {
         _: { value: 'green'},
         on: {
            dark: { value: 'blue' },
            'dark-accent': { value: 'pink' }
         }
      }
   }
}

[michaelwarren1106]

oh cool! so it'll just get "ignored" when translated through the various transforms?

[dbanksdesign]

It won't get ignored, but the way the name transforms work is they use a string formatting method like in the change-case package which trims starting and trailing characters like that, so "color-red-" becomes "colorRed" or "color_red" etc.