Fixes

tokens/figma/update-middleware.mjs

@@ -11,6 +11,7 @@ import {
   updateOrCreateVariableModeValues,
   generateTempModeId,
   VARIABLE_TYPES,
+  DEFAULT_FIGMA_MODENAME,
 } from "./utils.mjs";
 
 dotenv.config({ path: "../../.env" });
@@ -62,12 +63,13 @@ function formatBrandName(brand) {
     ); // Capitalize the first letter of each word
 }
 
-async function updateTheme(
+export async function updateTheme(
   jsonData,
   brand,
   FILE_KEY
 ) {
   try {
+    // Fetch existing variables and collections from Figma
     const response = await fetch(
       `https://api.figma.com/v1/files/${FILE_KEY}/variables/local`,
       {
@@ -92,23 +94,54 @@ async function updateTheme(
       variableModeValues: [],
     };
 
-    const modeNames = ["Light", "Dark"];
+    function findModeByName(
+      collection,
+      modeName
+    ) {
+      return collection.modes.find(
+        (mode) => mode.name === modeName
+      );
+    }
 
-    for (const modeName of modeNames) {
-      const modeData = await updateOrCreateMode({
-        mode: {
-          name: modeName,
-          variableCollectionId: "Theme",
-        },
-        defaultModeName: modeNames[0],
-        targetCollectionName: "Theme",
-        existingCollections,
-      });
+    const updateModes = (collectionName) => {
+      const collection = Object.values(
+        existingCollections
+      ).find(
+        (col) => col.name === collectionName
+      );
+      if (!collection) return;
 
-      if (modeData) {
-        newData.variableModes.push(modeData);
+      const defaultMode = collection.modes.find(
+        (mode) =>
+          mode.modeId === collection.defaultModeId
+      );
+      if (
+        defaultMode &&
+        defaultMode.name !== "Light"
+      ) {
+        newData.variableModes.push({
+          action: "UPDATE",
+          id: defaultMode.modeId,
+          variableCollectionId: collection.id,
+          name: "Light",
+        });
       }
-    }
+
+      const darkMode = findModeByName(
+        collection,
+        "Dark"
+      );
+      if (!darkMode) {
+        newData.variableModes.push({
+          action: "CREATE",
+          id: generateTempModeId("Dark", "Theme"),
+          variableCollectionId: collection.id,
+          name: "Dark",
+        });
+      }
+    };
+
+    updateModes("Theme");
 
     async function processVariables(
       lightVariables,
@@ -125,18 +158,25 @@ async function updateTheme(
           (v) => v.name === lightVariable.name
         );
 
-        // Find if an existing mode is named "Mode 1" as default mode
-
-        const CollectionNameId = Object.values(
+        // Get the collection ID
+        const collectionId = Object.values(
           existingCollections
         ).find(
           (collection) =>
             collection.name === collectionName
-        ).id;
+        )?.id;
 
+        if (!collectionId) {
+          console.warn(
+            `Collection ${collectionName} not found.`
+          );
+          continue;
+        }
+
+        // Get default mode for this collection
         const defaultMode = existingCollections[
-          CollectionNameId
-        ].modes.find(
+          collectionId
+        ]?.modes.find(
           (mode) =>
             mode.name === DEFAULT_FIGMA_MODENAME
         );
@@ -150,7 +190,7 @@ async function updateTheme(
               scopes: ["ALL_SCOPES"],
             },
             targetCollectionName: collectionName,
-            existingVariables: existingVariables,
+            existingVariables,
             existingCollections,
           });
 
@@ -163,7 +203,7 @@ async function updateTheme(
               hasAlias: false,
             },
             targetModeName: defaultMode
-              ? DEFAULT_FIGMA_MODENAME // When created the defaultModeName has not been yet updated to targetModeName
+              ? DEFAULT_FIGMA_MODENAME
               : "Light",
             targetCollectionName: collectionName,
             existingCollections,
@@ -204,20 +244,21 @@ async function updateTheme(
         newData.variables.push(variableData);
       }
 
-      return newData; // Moved the return outside the loop
+      return newData;
     }
 
-    // Await the processVariables function
+    // Process variables for light and dark themes
     await processVariables(
-      jsonData[brand]?.light,
-      jsonData[brand]?.dark,
+      jsonData[brand]?.light || [],
+      jsonData[brand]?.dark || [],
       "Theme",
       brand,
       existingVariables,
       existingCollections,
       newData
     );
 
+    // Update the variables and modes in Figma
     const updateResponse = await fetch(
       `https://api.figma.com/v1/files/${FILE_KEY}/variables`,
       {
@@ -338,8 +379,8 @@ async function updateSkinColorVariables(
         action: "CREATE",
         name: formattedFirstBrand,
         id: generateTempModeId(
-          "Skin",
-          formattedFirstBrand
+          formattedFirstBrand,
+          "Skin"
         ),
         variableCollectionId: skinCollection.id,
       });
@@ -371,8 +412,8 @@ async function updateSkinColorVariables(
           action: "CREATE",
           name: formattedBrand,
           id: generateTempModeId(
-            "Skin",
-            formattedBrand
+            formattedBrand,
+            "Skin"
           ),
           variableCollectionId: skinCollection.id,
         });

tokens/figma/utils.mjs

@@ -138,49 +138,65 @@ export async function updateOrCreateMode({
     (collection) =>
       collection.name === targetCollectionName
   );
-  const collectionId = collection.id;
 
-  const existingModes = collection.modes;
+  if (!collection) {
+    console.warn(
+      `Collection ${targetCollectionName} not found.`
+    );
+    return;
+  }
+
+  const collectionId = collection.id;
+  const existingModes = collection.modes || [];
 
+  // Find the default mode (e.g., "Mode 1" or "Default")
   const defaultMode = existingModes.find(
-    (m) => m.name === DEFAULT_FIGMA_MODENAME
+    (m) => m.name === DEFAULT_FIGMA_MODENAME // Replace with actual default mode name if different
   );
 
+  // Find the target mode by its name
   const existingMode = existingModes.find(
     (m) => m.name === mode.name
   );
 
-  // If renaming "Default" mode to the first mode name (e.g., "Light")
-  if (
-    !existingMode &&
-    defaultMode &&
-    mode.name === defaultModeName
-  ) {
-    return {
-      action: "UPDATE",
-      id: defaultMode.modeId,
-      name: mode.name, // Rename "Default" to "Light"
-      variableCollectionId: collectionId,
-    };
-  }
-
-  // Create new mode if it doesn't exist
-  if (!existingMode) {
+  if (mode.name === defaultModeName) {
+    if (defaultMode) {
+      // Rename the default mode to the target mode name
+      return {
+        action: "UPDATE",
+        id: defaultMode.modeId,
+        name: mode.name, // Rename "Default" to the target mode name
+        variableCollectionId: collectionId,
+      };
+    } else {
+      // If default mode does not exist, create it
+      return {
+        action: "CREATE",
+        id: generateTempModeId(
+          mode.name, // Use mode name for temp ID
+          targetCollectionName
+        ),
+        name: mode.name, // Create the mode with the target name
+        variableCollectionId: collectionId,
+      };
+    }
+  } else if (!existingMode) {
+    // If mode doesn't exist, create it
     return {
       action: "CREATE",
       id: generateTempModeId(
-        mode,
+        mode.name, // Use mode name for temp ID
         targetCollectionName
       ),
-      name: mode.name, // Create "Dark"
+      name: mode.name, // Create the mode with the specified name
       variableCollectionId: collectionId,
     };
   } else {
-    // Update existing mode if it exists
+    // If the mode exists, update it
     return {
       action: "UPDATE",
-      id: existingMode.modeId,
-      name: mode.name,
+      id: existingMode.modeId, // Use existing mode ID
+      name: mode.name, // Update the mode with the correct name
       variableCollectionId: collectionId,
     };
   }