From 42f7489d2e6498cab1ccd5b7d41eefa774eb800f Mon Sep 17 00:00:00 2001
From: Narin Ratana <narin@adhocteam.us>
Date: Wed, 17 Jan 2024 11:20:56 -0800
Subject: [PATCH] Transform VADS tokens. Add custom formatter to remove 'color'
 prefix. Export as Colors

---
 packages/tokens/config.js | 38 ++++++++++++++++++++++++++++++++++++--
 1 file changed, 36 insertions(+), 2 deletions(-)

diff --git a/packages/tokens/config.js b/packages/tokens/config.js
index 5e579964..c7e14acf 100644
--- 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',
         },
       ],
     },