From 10205468146071efead272d0bac2e4d5179cee29 Mon Sep 17 00:00:00 2001
From: Jon Ambas <jon@jonambas.com>
Date: Mon, 29 Nov 2021 14:14:04 -0500
Subject: [PATCH 1/3] UX-749 Generate JS token files

---
 packages/design-tokens-sd/config.js      | 41 ++++++++++++++++++++----
 packages/design-tokens-sd/utils/utils.js | 21 ++++++++++++
 2 files changed, 56 insertions(+), 6 deletions(-)
 create mode 100644 packages/design-tokens-sd/utils/utils.js

diff --git a/packages/design-tokens-sd/config.js b/packages/design-tokens-sd/config.js
index a88eecf5a..d07db6b85 100644
--- a/packages/design-tokens-sd/config.js
+++ b/packages/design-tokens-sd/config.js
@@ -1,4 +1,5 @@
 const { mapGet, utils, colorMapGet } = require('./templates/scss-functions');
+const { toSnake, toCamel } = require('./utils/utils');
 
 module.exports = {
   source: ['tokens/**/*.json'],
@@ -31,17 +32,45 @@ module.exports = {
         },
       ],
     },
+    // Generates JS files in camel case
+    js: {
+      transformGroup: 'js',
+      buildPath: 'dist/js/',
+      transforms: ['name/cti/snake'],
+      files: [
+        {
+          destination: 'tokens.js',
+          format: 'javascript/module-flat',
+        },
+      ],
+    },
+    // Generates JS files in the old format of snake & camel using a custom transform
+    js_deprecated: {
+      transformGroup: 'js',
+      buildPath: 'dist/js/',
+      transforms: ['name/cti/deprecated'],
+      files: [
+        {
+          destination: 'deprecated.js',
+          format: 'javascript/module-flat',
+        },
+      ],
+    },
+  },
+  transform: {
+    'name/cti/deprecated': {
+      type: 'name',
+      transformer: (token) => {
+        const [category, ...rest] = token.path;
+        return `${toCamel(category)}_${toSnake(rest.join('-'))}`;
+      },
+    },
   },
   format: {
     'scss/functions': (args) => {
       const keys = Object.keys(args.dictionary.tokens);
       const rootFontSize = args.dictionary.allTokens.find(({ name }) => name === 'font-size-root');
-
-      const functions = keys
-        .map((key) => {
-          return key !== 'color' ? mapGet(key) : colorMapGet();
-        })
-        .join('');
+      const functions = keys.map((key) => (key !== 'color' ? mapGet(key) : colorMapGet())).join('');
       return `${utils(rootFontSize)}\n${functions}`;
     },
   },
diff --git a/packages/design-tokens-sd/utils/utils.js b/packages/design-tokens-sd/utils/utils.js
new file mode 100644
index 000000000..b44c67bd8
--- /dev/null
+++ b/packages/design-tokens-sd/utils/utils.js
@@ -0,0 +1,21 @@
+function toCamel(string) {
+  return string
+    .replace('-', ' ')
+    .replace(/(?:^\w|[A-Z]|\b\w)/g, (word, index) => {
+      return index === 0 ? word.toLowerCase() : word.toUpperCase();
+    })
+    .replace(/\s+/g, '');
+}
+
+function toSnake(string) {
+  return string
+    .replace(/\W+/g, ' ')
+    .split(/ |\B(?=[A-Z])/)
+    .map((word) => word.toLowerCase())
+    .join('_');
+}
+
+module.exports = {
+  toCamel,
+  toSnake,
+};

From 2f7b177e0d571be8723585e039455c4342385738 Mon Sep 17 00:00:00 2001
From: Jon Ambas <jon@jonambas.com>
Date: Tue, 30 Nov 2021 09:22:57 -0500
Subject: [PATCH 2/3] UX-749 Update deprecated token file name

---
 packages/design-tokens-sd/config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/design-tokens-sd/config.js b/packages/design-tokens-sd/config.js
index d07db6b85..9df0f30f6 100644
--- a/packages/design-tokens-sd/config.js
+++ b/packages/design-tokens-sd/config.js
@@ -51,7 +51,7 @@ module.exports = {
       transforms: ['name/cti/deprecated'],
       files: [
         {
-          destination: 'deprecated.js',
+          destination: 'tokens.legacy.js',
           format: 'javascript/module-flat',
         },
       ],

From c3bf6fb1e1b7b16575c4cb69db32df55ef536903 Mon Sep 17 00:00:00 2001
From: Jon Ambas <jon@jonambas.com>
Date: Tue, 30 Nov 2021 09:34:00 -0500
Subject: [PATCH 3/3] UX-749 Use 'legacy' instead of 'deprecated'

---
 packages/design-tokens-sd/config.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/design-tokens-sd/config.js b/packages/design-tokens-sd/config.js
index 9df0f30f6..e61234a23 100644
--- a/packages/design-tokens-sd/config.js
+++ b/packages/design-tokens-sd/config.js
@@ -32,7 +32,7 @@ module.exports = {
         },
       ],
     },
-    // Generates JS files in camel case
+    // Generates JS files in snake case
     js: {
       transformGroup: 'js',
       buildPath: 'dist/js/',
@@ -45,10 +45,10 @@ module.exports = {
       ],
     },
     // Generates JS files in the old format of snake & camel using a custom transform
-    js_deprecated: {
+    js_legacy: {
       transformGroup: 'js',
       buildPath: 'dist/js/',
-      transforms: ['name/cti/deprecated'],
+      transforms: ['name/cti/legacy'],
       files: [
         {
           destination: 'tokens.legacy.js',
@@ -58,7 +58,7 @@ module.exports = {
     },
   },
   transform: {
-    'name/cti/deprecated': {
+    'name/cti/legacy': {
       type: 'name',
       transformer: (token) => {
         const [category, ...rest] = token.path;