[Feature]: Cleanup $themes.json utility

[jorenbroekema]

What feature would you like?

As a user of sd-transforms/style-dictionary/tokens-studio figma plugin,

I'd like to cleanup my $themes.json file so that my style-dictionary output looks simple. Yet at the same time, the redundancy in $themes.json is required from the perspective of the Figma Plugin in order to work properly with collections & figma variables.

Example

Tokens structure:

/primitives
  color.json
  dimension.json

/brand
  base.json
  /casual
    casual.json
  /business
    business.json
/comp
  /button
    base.json
    /overrides
      mobile.json

$themes.json:

[
  {
    "id": "95817a315f416ed523770b294c82079e0bb6108c",
    "name": "values",
    "selectedTokenSets": {
      "primitive/color": "source",
      "primitive/dimension": "source",
      "brand/business/business": "disabled"
    },
    "$figmaCollectionId": "VariableCollectionId:3706:428",
    "group": "primitive"
  },
  {
    "id": "e3b2ec82ed0d11eb6791c370b2615b7fc7ed8e98",
    "name": "casual",
    "selectedTokenSets": {
      "brand/base": "source",
      "primitive/color": "source",
      "brand/casual/casual": "enabled"
    },
    "$figmaCollectionId": "VariableCollectionId:3706:736",
    "group": "brand"
  },
  {
    "id": "aaa4d6520cb5a3c6ac709a35390f9a95c8c5a05b",
    "name": "business",
    "selectedTokenSets": {
      "brand/base": "source",
      "primitive/color": "source",
      "brand/business/business": "enabled"
    },
    "$figmaCollectionId": "VariableCollectionId:3706:736",
    "group": "brand"
  },
  {
    "id": "e21163fb18ad711bfefef90c8a3163f9590c485e",
    "name": "values",
    "selectedTokenSets": {
      "comp/button/base": "source",
      "primitive/dimension": "source",
      "primitive/color": "source",
      "brand/base": "source",
      "comp/button/overrides/mobile": "enabled"
    },
    "$figmaCollectionId": "VariableCollectionId:3706:1339",
    "group": "comp-mobile"
  }
]

In the example, there's 3 dimensions, comp-mobile, brand and primitive. Only brand has multiple variations, the other two are "redundant" from the perspective of style-dictionary. This means that for style-dictionary's purposes, the $themes.json can be simplified to:

[
  {
    "name": "casual",
    "selectedTokenSets": {
      "brand/base": "source",
      "primitive/color": "source",
      "primitive/dimension": "source",
      "comp/button/base": "source",
      "brand/casual/casual": "enabled",
      "comp/button/overrides/mobile": "enabled"
    },
  },
  {
    "name": "business",
    "selectedTokenSets": {
      "brand/base": "source",
      "primitive/color": "source",
      "primitive/dimension": "source",
      "comp/button/base": "source",
      "brand/business/business": "enabled",
      "comp/button/overrides/mobile": "enabled"
    }
  }
]

So the features of this utility:

• Remove all metadata that is irrelevant ($figma stuff, id)
• Remove "group" prop if only 1 theme dimension remains, and the "name" props don't collide (are unique)
• Merge the selectedTokenSets from the removed themes into the themes that remain
• Remove redundant selectedTokenSets -> when the value is "disabled"

Would you be available to contribute this feature?

• [ ] Yes, I would like to contribute this