Change mode output format

[lukasoppermann]

trafficstars

Hey @0m4r,

I found a way of making multiple values work with style dictionary.

I am proposing a new format to include all modes into a token:

"accent": {
          "description": "",
          "type": "color",
          "value": "{base.color.blue.5}",
          "extensions": {
            "org.lukasoppermann.modes": { // adding this
               "dark": "{base.color.blue.7}",
            },
            "org.lukasoppermann.figmaDesignTokens": {
              "mode": "light",
              "collection": "mode",
              "scopes": [
                "SHAPE_FILL",
                "TEXT_FILL"
              ],
              "variableId": "VariableID:27057:2696",
              "exportKey": "variables"
            }
          }
        },

Basically we remove all the mode stuff from the structure, etc. and just add it to the extension as a simple key (mode name) and value (mode value) pair.

            "org.lukasoppermann.modes": { // adding this
               "dark": "{base.color.blue.7}",
            },

What do you think? Would you like to add this? I will implement the style dictionary part that is needed to make it work with SD in https://github.com/lukasoppermann/style-dictionary-utils

[0m4r]

uhm... would this produce a valid design token file as per the w3c standard?

but regardless of that, if you would have different modes would it be looking like:

"org.lukasoppermann.modes": {
  "mode1": "{base.color.blue.7}",
  "mode2": "{base.color.blue.8}",
  "mode3": "{base.color.blue.9}",
  "mode4": "{base.color.blue.10}",
},

whereas a mode0 would be defined "outside"?

[lukasoppermann]

uhm... would this produce a valid design token file as per the w3c standard?

Yes, as long as we have a $value prop in the top level we can pass to the $extension prop whatever we want.

but regardless of that, if you would have different modes would it be looking like [...] whereas a mode0 would be defined "outside"?

Not quite, I think it is preferable to add mode0 to both, the $value and $extension, so:

{
    "$value": "{base.color.blue.5}",
    "$extensions": {
        "mode0": "{base.color.blue.5}",
        "mode1": "{base.color.blue.7}",
        "mode2": "{base.color.blue.8}",
        "mode3": "{base.color.blue.9}",
        "mode4": "{base.color.blue.10}",
    }
}

This just makes it easier, as you don't have to rely on $value to be a specific mode. However, we need to set a default $value for w3c and also in case we have no modes.