Question: how can I group tokens under themes?

[sarah-martinellibenedetti]

Hi, I am new to style-dictionary and would like to ask if there's any way to group tokens under themes. The reason I ask is that then the team could generate different themes with the pre-defined tokens just by using style-dictionary, instead of having to write it by hand.

In case the answer is yes, could you please give me a small example of how to do so?

thanks!

[spaceninja]

Using this blog post as a guide, I built something like what you're looking for. Here's our build script:

const StyleDictionary = require("style-dictionary");

// Look for args passed on the command line
const args = require("minimist")(process.argv.slice(2));

// If no theme arg was passed, default to Primary theme
const theme = args.theme ? args.theme : "primary";

console.log(`🚧 Compiling tokens with the ${theme.toUpperCase()} theme`);

/**
 * Generate a Theme-Specific Config
 * This accepts a theme parameter, which is used to control which set of
 * tokens to compile, and to define theme-specific compiled output.
 * @param {string} theme
 */
const getStyleDictionaryConfig = (theme) => {
  return {
    log: "warn",
    source: [
      "src/tokens/global/**/*.+(js|json)",
      `src/tokens/theme/${theme}/**/*.+(js|json)`,
    ],
    platforms: {
      css: {
        transformGroup: "css",
        buildPath: "src/styles/compiled/",
        files: [
          {
            destination: `tokens.css`,
            format: "css/variables",
          },
        ],
      },
    },
  };
};

// APPLY THE CONFIGURATION
// IMPORTANT: the registration of custom transforms
// needs to be done _before_ applying the configuration
const StyleDictionaryExtended = StyleDictionary.extend(
  getStyleDictionaryConfig(theme)
);

// BUILD ALL THE PLATFORMS
StyleDictionaryExtended.buildAllPlatforms();

Then in package.json, I added our build script:

{
  "scripts": {
    "build:tokens": "node ./build-tokens.js",
  }
}

Then when you call it from the command line, you can pass a theme like so: npm run build:tokens -- --theme=pizza

[sarah-martinellibenedetti]

Super helpful, thanks!

[dbanksdesign]

I point to that blog post as well. The author also wrote an the multi-brand-multi-platform example. (Thanks @didoo!)

Let me know if you have any questions!

[chazzmoney]

Seeing as the original issue has been solved and hasn't had any activity in awhile, I'm going to close this. Feel free to re-open if there are remaining questions.