arduino-ide/scripts/themes/theme-generator.js

const StyleDictionaryPackage = require('style-dictionary');

StyleDictionaryPackage.registerTransform({
  name: 'vsCodeName',
  type: 'name',
  transformer: (token) => {
    // syntax tokens we remove the first part of the object path
    if (token.path[0] === 'colors') {
      return token.path.slice(1).join('.');
    }

    if (token.path[0] === 'syntax') {
      // This allows you to have tokens at multiple levels
      // like `comment` and `comment.line`
      if (token.name === '*') {
        // removes the first and last parts of the path
        return token.path.slice(1, -1).join('.');
      } else {
        // removes the first part of the path which would be 'syntax'
        return token.path.slice(1).join('.');
      }
    }
  },
});

// Add a custom format that will generate the VSCode theme JSON
StyleDictionaryPackage.registerFormat({
  name: 'vsCodeTheme',
  formatter: (dictionary, config) => {
    // VSCode theme JSON files have this structure
    const theme = {
      name: `Arduino ${config.themeType}`,
      type: config.themeType,
      colors: {},
    };

    // Filter out the design tokens we don't want to add to the
    // 'colors' object. This includes core colors defined in tokens/core.json5
    // and syntax tokens defined in tokens/syntax
    dictionary.allProperties
      .filter((token) => {
        return !['color', 'syntax'].includes(token.path[0]);
      })
      .forEach((token) => {
        // Add each token to the colors object, the name is generated by the custom
        // transform defined above
        theme.colors[token.name] = token.value;
      });

    // Map the syntax styles
    theme.tokenColors = dictionary.allProperties
      .filter((token) => {
        return token.path[0] === 'syntax';
      })
      .map((token) => ({
        name: token.name,
        scope: token.scope,
        settings: {
          foreground: token.value,
          fontStyle: token.fontStyle,
        },
      }));

    // Style Dictionary formats expect a string that will be then written to a file
    return JSON.stringify(theme, null, 2);
  },
});

function getStyleDictionaryConfig(theme) {
  return {
    source: [`./scripts/themes/tokens/${theme}.json`],
    platforms: {
      vscode: {
        // Directory to build files to
        buildPath: `./arduino-ide-extension/src/browser/data/`,
        themeType: `${theme}`,
        // The name of the custom transform we defined above
        transforms: ['vsCodeName'],
        files: [
          {
            // The path the file will be created at. Make sure this matches
            // the file paths defined in the package.json
            destination: `${theme}.color-theme.json`,
            // The name of the custom format defined above
            format: 'vsCodeTheme',
            selector: `${theme}-theme`,
          },
        ],
      },
    },
  };
}

console.log('Build started...');

// PROCESS THE DESIGN TOKENS FOR THE DIFFEREN BRANDS AND PLATFORMS

['default', 'dark'].map(function (theme) {
  console.log('\n==============================================');
  console.log(`\nProcessing: [${theme}]`);

  const StyleDictionary = StyleDictionaryPackage.extend(
    getStyleDictionaryConfig(theme)
  );

  StyleDictionary.buildPlatform('vscode');

  console.log('\nEnd processing');
});

console.log('\n==============================================');
console.log('\nBuild completed!');