build-tokens.cjs

const StyleDictionary = require("style-dictionary");
const {
  registerTransforms,
  transforms,
} = require("@tokens-studio/sd-transforms");
const { promises } = require("node:fs");

registerTransforms(StyleDictionary, {
  expand: {
    composition:false,
    typography: false,
    shadow: false,
    border: false,
  },
  'ts/color/modifiers': {
    format: 'hex',
  },
});
StyleDictionary.registerTransformGroup({
  name: "custom/tokens-studio",
  transforms: [...transforms, "attribute/cti", "name/cti/kebab"],
});

// filters only tokens originating from core.json
const coreFilter = (token) => token.filePath.endsWith("Core.json");
const coreWithoutFilter = (token) => !token.filePath.includes("Core.json");

// filters tokens by attributes.category (first key in the token hierachy, see attributes/cti transform for more info)
// must match per component name, in this repository we currently only have "button"
const componentFilter = (cat) => (token) => token.attributes.category === cat;

// for each component (currently only button), filter those specific component tokens and output them
// to the component folder where the component source code will live
const generateComponentFiles = (tokensCategories, theme) => {
  return tokensCategories.map((cat) => ({
    destination: `${cat}/${cat}-${theme.toLowerCase()}.css`,
    format: "css/variables",
    filter: coreWithoutFilter,
    options: {
      selector: ":host",
      fileHeader: "autoGeneratedFileHeader",
    },
  }));
};

async function run() {
  const $themes = JSON.parse(await promises.readFile("tokens/$themes.json"));
  const configs = $themes.map((theme) => ({
    source: Object.entries(theme.selectedTokenSets)
      .filter(([, val]) => val !== "disabled")
      .map(([tokenset]) => `tokens/${tokenset}.json`),
    fileHeader: {
      autoGeneratedFileHeader: () => {
        return [`Do not edit directly, this file was auto-generated`];
      },
    },
    platforms: {
      css: {
        transformGroup: "custom/tokens-studio",
        files: [
          // core/semantic tokens, e.g. for application developer
          {
            destination: "style.css",
            format: "css/variables",

          },
          // component tokens, e.g. for design system developer
          ...generateComponentFiles(["fiber"], theme.name),
        ],
      },
    },
  }));

  configs.forEach((cfg) => {
    const sd = StyleDictionary.extend(cfg);
    sd.cleanAllPlatforms();
    sd.buildAllPlatforms();
  });
}
run();