Style-dictionary: Themeable in formats

[dbanksdesign]

We recently merged in #359 that adds a themeable flag on tokens that will have the !default flag in SCSS. We want to make this broadly applicable to other built-in formats for other platforms. If you have any ideas/thoughts please post them here.

[nhoizey]

Do we have to set the themeable flag on each property, or is there a way to set this for all properties at once, in the configuration of a target platform of the build?

[dbanksdesign]

Right now it is each property. Although it wouldn't be too much work to be able to set it per file or per platform, we would just need to update the formats that support it.

Another option that would work right now would be to use a custom parser o.0

module.exports = {
  parsers: [{
    pattern: /\.json$/,
    parse: ({ contents, filePath }) => {
      const tokens = JSON.parse(contents);
      traverseObj(tokens, (obj) => {
        // add themeable to all tokens
        if (obj.hasOwnProperty('value')) {
          obj.themeable = true;
        }
      });
      return tokens;
    }
  }],
  //...
}

[nhoizey]

I could indeed use a custom parser, thanks for providing the code! 👍

Obviously, like anyone else I guess, I try to keep my code as small and "default" as possible, so if it becomes a default option, it would be awesome. 😃

[dbanksdesign]

I think adding a themable option to the formats that support it sounds like pretty good idea. It would be a pretty minor change. @chazzmoney thoughts?

[jacoblapworth]

I created a small transform to add a attribute to the platforms I needed.

import { Named, AttributeTransform } from 'style-dictionary'

export const themeable: Named<AttributeTransform> = {
  name: 'attribute/themeable',
  type: 'attribute',
  matcher: () => true,
  transformer: () => {
    return { themeable: true }
  },
}

[dbanksdesign]

Oh that is a good idea @jacoblapworth! One potential improvement, you can leave off the matcher function, if there is no matcher function on a transform then it will match all tokens.