Style Dictionary setups for exporting darkValue values to 1 file or to 2 files.

config-1-file.js

function darkFormatWrapper(format) {
  return function (args) {
    const darkTokens = []
    const dictionary = { 
      ...args.dictionary 
    }    

    // Strip out the dark tokens
    dictionary.allTokens = dictionary.allTokens.map((token) => {
      const { darkValue } = token;
      if (darkValue) darkTokens.push({
        ...token,
        value: token.darkValue,
        name: token.name + '-dark',
      })
      return token      
    })

    // Add them back in
    dictionary.allTokens = [...dictionary.allTokens, ...darkTokens]

    // Re-assign the dictionary
    return StyleDictionary.format[format]({ ...args, dictionary });
  };
}

module.exports = {
  source: ["tokens/**/*.json"],
  format: {
    cssDark: darkFormatWrapper(`css/variables`),
  },
  platforms: {
    css: {
      transformGroup: "css",
      buildPath: "dist/",
      prefix: "f-",
      files: [
        {
          destination: "fold/base.css",
          format: "cssDark",
          filter: (token) =>
            token.darkValue && token.attributes.category === `color`,
        },
      ],
    },
  },
};

config-2-files.js

function darkFormatWrapper(format) {
  return function (args) {
    const dictionary = { 
      ...args.dictionary 
    };

    // Replace the value with darkValue
    dictionary.allTokens = dictionary.allTokens.map((token) => {
      const { darkValue } = token;

      if (darkValue) {
        return {
          ...token,
          value: token.darkValue,
        };
      } else {
        return token;
      }
    });

    // Re-assign the dictionary
    return StyleDictionary.format[format]({ ...args, dictionary });
  };
}

module.exports = {
  source: ["tokens/**/*.json"],
  format: {
    cssDark: darkFormatWrapper(`css/variables`),
  },
  platforms: {
    css: {
      transformGroup: "css",
      buildPath: "dist/",
      prefix: "f-",
      files: [ 
       {
          destination: "fold/base.css",
          format: "css/variables",
        }, 
        {
          destination: "fold/base.css",
          format: "cssDark",
          filter: (token) =>
            token.darkValue && token.attributes.category === `color`,
        },
      ],
    },
  },
};