Untitled-1.txt

const StyleDictionary = require("style-dictionary");
const {
  registerTransforms,
  permutateThemes,
  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.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: `${theme}.css`,
    format: "css/variables",
    options: {
      selector: ":host",
    },
  }));
};
async function run() {
  const $themes = JSON.parse(
    await promises.readFile("tokens/$themes.json", "utf-8")
  );
  const themes = permutateThemes($themes, { separator: "_" });
  console.log(themes);
  const configs = Object.entries(themes).map(([name, tokensets]) => {
    console.log("----------------");
    console.log([name, tokensets]);

    return {
      source: tokensets.map((tokenset) => `tokens/${tokenset}.json`),
      platforms: {
        css: {
          transformGroup: "tokens-studio",
          files: [
            {
              destination: `vars-${name}.css`,
              format: "css/variables",
              filter: coreFilter,
            },
            ...generateComponentFiles(['fiber'],themes.name)
          ],
          
        },
      },
    };
  });
  configs.forEach((cfg) => {
    const sd = StyleDictionary.extend(cfg);
    sd.cleanAllPlatforms(); // optionally, cleanup files first..
    sd.buildAllPlatforms();
  });
}
run();