Can Style Dictionary translate from a manifest file?

[droid001]

I've been exporting a handful of Figma variables with the Design Token Manager plugin which outputs multiple DTFM compatible files semantically linked together with a manifest. Can Style Dictionary utilise the manifest file somehow because currently the output doesn't produce values mapped to modes.
Example:
manifest.json

{
  "name": "Design Tokens",
  "collections": {
    "Typography": {
      "modes": {
        "desktop": [
          "Typography.desktop.tokens.json"
        ],
        "mobile": [
          "Typography.mobile.tokens.json"
        ]
      }
    }
  }
}

Typography.desktop.tokens.json

"font-size": {
    "4xlarge": {
      "$type": "dimension",
      "$value": "72px",
      "$description": "H1"
    },
    "3xlarge": {
      "$type": "dimension",
      "$value": "58px",
      "$description": "H2"
    },
    "2xlarge": {
      "$type": "dimension",
      "$value": "42px",
      "$description": "H3"
    },
    "xlarge": {
      "$type": "dimension",
      "$value": "27px",
      "$description": "H4"
    },
    "large": {
      "$type": "dimension",
      "$value": "21px",
      "$description": "Body Text - Large"
    },
    "mediumlarge": {
      "$type": "dimension",
      "$value": "20px",
      "$description": "H5"
    },
    "medium": {
      "$type": "dimension",
      "$value": "18px"
    },
    "small": {
      "$type": "dimension",
      "$value": "16px"
    },
    "xsmall": {
      "$type": "dimension",
      "$value": "14px"
    },
    "2xsmall": {
      "$type": "dimension",
      "$value": "12px"
    },
    "3xsmall": {
      "$type": "dimension",
      "$value": "11px"
    },
    "base": {
      "$type": "dimension",
      "$value": "18px"
    },
    "H1": {
      "$type": "dimension",
      "$value": "{font-size.4xlarge}"
    }
  },

Typography.mobile.tokens.json

"font-size": {
    "4xlarge": {
      "$type": "dimension",
      "$value": "40px",
      "$description": "H1"
    },
    "3xlarge": {
      "$type": "dimension",
      "$value": "34px",
      "$description": "H2"
    },
    "2xlarge": {
      "$type": "dimension",
      "$value": "26px",
      "$description": "H3"
    },
    "xlarge": {
      "$type": "dimension",
      "$value": "22px",
      "$description": "H4"
    },
    "large": {
      "$type": "dimension",
      "$value": "17px",
      "$description": "Body Text - Large"
    },
    "mediumlarge": {
      "$type": "dimension",
      "$value": "18px",
      "$description": "H5"
    },
    "medium": {
      "$type": "dimension",
      "$value": "16px"
    },
    "small": {
      "$type": "dimension",
      "$value": "15px"
    },
    "xsmall": {
      "$type": "dimension",
      "$value": "13px"
    },
    "2xsmall": {
      "$type": "dimension",
      "$value": "11px"
    },
    "3xsmall": {
      "$type": "dimension",
      "$value": "11px"
    },
    "base": {
      "$type": "dimension",
      "$value": "16px"
    },
    "H1": {
      "$type": "dimension",
      "$value": "{font-size.4xlarge}"
    }
  },

config.mjs

export default {
  "source": [
    "src/tokens/design-tokens/**/*"
  ],
  "usesDtcg": true,
  "platforms": {
    "css": {
      "transformGroup": "css",
      "buildPath": "src/styles/",
      "files": [
        {
          "destination": "_custom-properties.css",
          "format": "css/variables",
          "options": {
            "selector": ":root",
            "outputReferences": true
          },
          // "filter": (token) => token.$type !== undefined
        }
      ]
    }
  },
}

_custom-properties.css

:root {
  --font-family-title: Circular Std;
  --font-family-body: Circular Std;
  --font-weight-regular: 400rem;
  --font-weight-medium: 500rem;
  --font-weight-bold: 700rem;
  --font-weight-extrabold: 800rem;
  --font-size-4xlarge: 40px; /* H1 */
  --font-size-3xlarge: 34px; /* H2 */
  --font-size-2xlarge: 26px; /* H3 */
  --font-size-xlarge: 22px; /* H4 */
  --font-size-large: 17px; /* Body Text - Large */
  --font-size-mediumlarge: 18px; /* H5 */
  --font-size-medium: 16px;
  --font-size-small: 15px;
  --font-size-xsmall: 13px;
  --font-size-2xsmall: 11px;
  --font-size-3xsmall: 11px;
  --font-size-base: 16px;
  --line-height-base: 150%;
  --line-height-medium: 130%;
  --line-height-small: 120%;
  --letter-spacing-small: -1px;
  --letter-spacing-medium: 0px;
  --letter-spacing-large: 1px;
  --font-size-h1: var(--font-size-4xlarge);
}
```

[jorenbroekema]

No, Style Dictionary does not support something like that out of the box but there are examples out there on how to create a JavaScript wrapper around Style Dictionary to create multiple instances based on multi-dimensional theming.

https://github.com/amzn/style-dictionary/tree/main/examples/advanced/multi-brand-multi-platform this is the official example.

For Tokens Studio, which also has theming (multi-dimensional as well):

• https://github.com/tokens-studio/sd-transforms/tree/main?tab=readme-ov-file#themes-complete-example (might need to read https://docs.tokens.studio/themes/themes-pro first for context)
• https://github.com/tokens-studio/lion-example see readme about context on how this example is making use of theming to stitch tokensets together with Style Dictionary

In your instance it would look something like, read manifest, gather collections/permutations and combine the active tokens files together in the Style Dictionary instances that you create.