From eb02cac00fc11f341514a5b84e3aaaa95571c3cd Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <hello@benleonard.co.uk>
Date: Thu, 5 Dec 2024 17:12:12 +0000
Subject: [PATCH 1/4] Switch `tailwind-tokens.js` from cjs to esm

---
 scripts/convert-tokens.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/scripts/convert-tokens.ts b/scripts/convert-tokens.ts
index f31e95ee..5b4b8ad2 100644
--- a/scripts/convert-tokens.ts
+++ b/scripts/convert-tokens.ts
@@ -260,7 +260,7 @@ StyleDictionary.registerFormat({
     return `
 			/* THIS FILE IS AUTOGENERATED, DO NOT EDIT */
 
-			module.exports.textUtilities = {
+			export const textUtilities = {
 				${typeStyles.map(
           (prop) => `
 					'.text-${formatFontClass(prop.name)}': {
@@ -278,11 +278,11 @@ StyleDictionary.registerFormat({
         )}
 			}
 
-			module.exports.colorUtilities = {
+			export const colorUtilities = {
         ${colorUtilities}
       }
 
-      module.exports.elevationUtilities = {
+      export const elevationUtilities = {
         ${boxShadow
           .map(
             ({ name }, index) =>
@@ -293,7 +293,7 @@ StyleDictionary.registerFormat({
           .join(',\n')}
       }
 
-			module.exports.borderRadiusTokens = {
+			export const borderRadiusTokens = {
         ${borderRadius
           .map(
             ({ name }) =>

From 5170ecc1aecf9f25e48a6d19f038747f72d1a614 Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <hello@benleonard.co.uk>
Date: Thu, 5 Dec 2024 17:25:29 +0000
Subject: [PATCH 2/4] Add types to `tailwind-tokens`

---
 scripts/convert-tokens.ts | 23 ++++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/scripts/convert-tokens.ts b/scripts/convert-tokens.ts
index 5b4b8ad2..8778fd24 100644
--- a/scripts/convert-tokens.ts
+++ b/scripts/convert-tokens.ts
@@ -260,7 +260,9 @@ StyleDictionary.registerFormat({
     return `
 			/* THIS FILE IS AUTOGENERATED, DO NOT EDIT */
 
-			export const textUtilities = {
+			type CSSProperties = Record<string, string | number | Record<string, string | number>>
+
+      export const textUtilities: Record<string, CSSProperties> = {
 				${typeStyles.map(
           (prop) => `
 					'.text-${formatFontClass(prop.name)}': {
@@ -278,22 +280,21 @@ StyleDictionary.registerFormat({
         )}
 			}
 
-			export const colorUtilities = {
+			export const colorUtilities: Record<string, CSSProperties> = {
         ${colorUtilities}
       }
 
-      export const elevationUtilities = {
-        ${boxShadow
-          .map(
-            ({ name }, index) =>
-              `'.elevation-${index}': {
+      export const elevationUtilities: Record<string, CSSProperties> = {        ${boxShadow
+        .map(
+          ({ name }, index) =>
+            `'.elevation-${index}': {
                 'box-shadow': 'var(--${name})',
               }`,
-          )
-          .join(',\n')}
+        )
+        .join(',\n')}
       }
 
-			export const borderRadiusTokens = {
+      export const borderRadiusTokens: Record<string, string> = {
         ${borderRadius
           .map(
             ({ name }) =>
@@ -400,7 +401,7 @@ const makeConfig = (theme: typeof THEMES[number]) => {
   if (theme === 'main') {
     config.platforms.web.files?.push({
       filter: 'unused-theme-tokens',
-      destination: `tailwind-tokens.js`,
+      destination: `tailwind-tokens.ts`,
       format: 'tailwind',
     })
   }

From ccb9825c06aef0dc8bc525e1ec70a37fbba74959 Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <hello@benleonard.co.uk>
Date: Thu, 5 Dec 2024 17:28:22 +0000
Subject: [PATCH 3/4] Include new file extension in `package.json`

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index afb19880..4d7d4c89 100644
--- a/package.json
+++ b/package.json
@@ -73,7 +73,7 @@
   },
   "files": [
     "styles/dist/*.css",
-    "styles/dist/tailwind-tokens.js",
+    "styles/dist/tailwind-tokens.ts",
     "icons/**",
     "components/dist/**"
   ],

From 590d2980b1baa8f3834e2970e8dfdebe7c26d887 Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <hello@benleonard.co.uk>
Date: Thu, 5 Dec 2024 17:39:19 +0000
Subject: [PATCH 4/4] Removing and massaging of types

---
 scripts/convert-tokens.ts | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/scripts/convert-tokens.ts b/scripts/convert-tokens.ts
index 8778fd24..e6889543 100644
--- a/scripts/convert-tokens.ts
+++ b/scripts/convert-tokens.ts
@@ -79,11 +79,11 @@ const formatTypographyStyles = (name: string, value: any) => {
     case 'font-weight': {
       const weight = value.toLowerCase()
       if (weight.includes('light')) {
-        return [name, 300]
+        return [name, '300']
       } else if (weight.includes('medium')) {
-        return [name, 500]
+        return [name, '500']
       } else {
-        return [name, 400]
+        return [name, '400']
       }
     }
     case 'paragraph-spacing':
@@ -260,9 +260,7 @@ StyleDictionary.registerFormat({
     return `
 			/* THIS FILE IS AUTOGENERATED, DO NOT EDIT */
 
-			type CSSProperties = Record<string, string | number | Record<string, string | number>>
-
-      export const textUtilities: Record<string, CSSProperties> = {
+      export const textUtilities = {
 				${typeStyles.map(
           (prop) => `
 					'.text-${formatFontClass(prop.name)}': {
@@ -280,11 +278,11 @@ StyleDictionary.registerFormat({
         )}
 			}
 
-			export const colorUtilities: Record<string, CSSProperties> = {
+			export const colorUtilities = {
         ${colorUtilities}
       }
 
-      export const elevationUtilities: Record<string, CSSProperties> = {        ${boxShadow
+      export const elevationUtilities = {        ${boxShadow
         .map(
           ({ name }, index) =>
             `'.elevation-${index}': {
@@ -294,7 +292,7 @@ StyleDictionary.registerFormat({
         .join(',\n')}
       }
 
-      export const borderRadiusTokens: Record<string, string> = {
+      export const borderRadiusTokens = {
         ${borderRadius
           .map(
             ({ name }) =>