Transform VADS tokens. Add custom formatter to remove 'color' prefix.…

… Export as Colors
department-of-veterans-affairs · Jan 17, 2024 · 42f7489 · 42f7489
1 parent 7118672
commit 42f7489
Showing 1 changed file with 36 additions and 2 deletions.
diff --git a/packages/tokens/config.js b/packages/tokens/config.js
@@ -1,8 +1,34 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const tokenCategories = require('./src/tokens')
+const StyleDictionary = require('style-dictionary')
+
+StyleDictionary.registerFormat({
+  name: 'javascript/es6/vads-colors',
+  formatter: function (dictionary) {
+    console.log(`dictionary`, dictionary)
+    const colorTokens = dictionary.allProperties
+      .filter((token) => token.attributes.category === 'color')
+      .reduce((result, token) => {
+        result[token.name.replace('color', '')] = token.value
+        return result
+      }, {})
+
+    return `export const Colors = ${JSON.stringify(colorTokens, null, 2)};`
+  },
+})
+
+StyleDictionary.registerFormat({
+  name: 'typescript/es6-declarations/colors',
+  formatter: function () {
+    return `export declare const Colors: { [key: string]: string };`
+  },
+})
 
 module.exports = {
-  source: ['src/tokens/**/*.json'],
+  source: [
+    '../../node_modules/@department-of-veterans-affairs/css-library/dist/tokens/json/variables.json',
+    // 'src/uswds/*.json',
+  ],
   platforms: {
     rn: {
       transformGroup: 'react-native',
@@ -14,8 +40,16 @@ module.exports = {
           format: 'javascript/es6',
         },
         {
-          format: 'typescript/es6-declarations',
+          destination: 'js/index.js',
+          format: 'javascript/es6/vads-colors',
+        },
+        // {
+        //   format: 'typescript/es6-declarations',
+        //   destination: 'index.d.ts',
+        // },
+        {
           destination: 'index.d.ts',
+          format: 'typescript/es6-declarations/colors',
         },
       ],
     },