feat: Add support for tokens in toml files (#3047)

lib/build-tokens.js

@@ -31,8 +31,13 @@ async function buildTokensCommand(commandArgs) {
   } = minimist(commandArgs, { alias, default: defaultParams, boolean: 'source-tokens-only' });
 
   const coreConfig = {
-    include: [path.resolve(__dirname, '../tokens/src/core/**/*.json')],
-    source: tokensSource ? [`${tokensSource}/core/**/*.json`] : [],
+    include: [
+      path.resolve(__dirname, '../tokens/src/core/**/*.json'),
+      path.resolve(__dirname, '../tokens/src/core/**/*.toml'),
+    ],
+    source: tokensSource
+      ? [`${tokensSource}/core/**/*.json`, `${tokensSource}/core/**/*.toml`]
+      : [],
     platforms: {
       css: {
         prefix: 'pgn',
@@ -67,8 +72,17 @@ async function buildTokensCommand(commandArgs) {
 
   const getStyleDictionaryConfig = (themeVariant) => ({
     ...coreConfig,
-    include: [...coreConfig.include, path.resolve(__dirname, `../tokens/src/themes/${themeVariant}/**/*.json`)],
-    source: tokensSource ? [`${tokensSource}/themes/${themeVariant}/**/*.json`] : [],
+    include: [
+      ...coreConfig.include,
+      path.resolve(__dirname, `../tokens/src/themes/${themeVariant}/**/*.json`),
+      path.resolve(__dirname, `../tokens/src/themes/${themeVariant}/**/*.toml`),
+    ],
+    source: tokensSource
+      ? [
+        `${tokensSource}/themes/${themeVariant}/**/*.json`,
+        `${tokensSource}/themes/${themeVariant}/**/*.toml`,
+      ]
+      : [],
     transform: {
       'color/sass-color-functions': {
         ...StyleDictionary.transform['color/sass-color-functions'],

package.json

@@ -68,6 +68,7 @@
     "file-selector": "^0.6.0",
     "glob": "^8.0.3",
     "inquirer": "^8.2.5",
+    "js-toml": "^1.0.0",
     "lodash.uniqby": "^4.7.0",
     "log-update": "^4.0.0",
     "mailto-link": "^2.0.0",

tokens/style-dictionary.js

@@ -1,6 +1,7 @@
 /**
  * This module creates and exports custom StyleDictionary instance for Paragon.
  */
+const toml = require('js-toml');
 const StyleDictionary = require('style-dictionary');
 const chroma = require('chroma-js');
 const { colorYiq, darken, lighten } = require('./sass-helpers');
@@ -216,6 +217,11 @@ StyleDictionary.registerFilter({
   matcher: token => token?.isSource === true,
 });
 
+StyleDictionary.registerParser({
+  pattern: /\.toml$/,
+  parse: ({ contents }) => toml.load(contents),
+});
+
 module.exports = {
   StyleDictionary,
   createCustomCSSVariables,