diff --git a/tokens/figma/update-middleware.mjs b/tokens/figma/update-middleware.mjs index d2d11af148..4f2dc5da7d 100644 --- a/tokens/figma/update-middleware.mjs +++ b/tokens/figma/update-middleware.mjs @@ -2,8 +2,10 @@ import fetch from "node-fetch"; import { updateCollections, - updateOrCreateVariable, + updateOrCreateModes, + updateOrCreateVariables, updateOrCreateVariableModeValues, + hasDefaultMode, generateTempModeId, VARIABLE_TYPES, COLLECTION_NAMES, @@ -30,7 +32,7 @@ function formatBrandName(brand) { ); // Capitalize the first letter of each word } -export async function updateTheme( +async function updateTheme( jsonData, brand, FILE_KEY, @@ -62,57 +64,39 @@ export async function updateTheme( variableModeValues: [], }; - function findModeByName( - collection, - modeName - ) { - return collection.modes.find( - (mode) => mode.name === modeName - ); - } + const modes = [ + MODE_NAMES.LIGHT, + MODE_NAMES.DARK, + ]; - const updateModes = (collectionName) => { - const collection = Object.values( - existingCollections - ).find( - (col) => col.name === collectionName - ); - if (!collection) return; + // Create or update modes for the collection - const defaultMode = collection.modes.find( - (mode) => - mode.modeId === collection.defaultModeId - ); - if ( - defaultMode && - defaultMode.name !== "True" - ) { - newData.variableModes.push({ - action: "UPDATE", - id: defaultMode.modeId, - variableCollectionId: collection.id, - name: MODE_NAMES.LIGHT, - }); - } + const defaultMode = modes[0]; - const darkMode = findModeByName( - collection, - MODE_NAMES.DARK - ); - if (!darkMode) { - newData.variableModes.push({ - action: "CREATE", - id: generateTempModeId( - MODE_NAMES.DARK, - COLLECTION_NAMES.COLOR_SCHEME - ), - variableCollectionId: collection.id, - name: MODE_NAMES.DARK, + const defaultModeResult = + await updateOrCreateModes({ + mode: { name: defaultMode }, + isDefault: true, + targetCollectionName: + COLLECTION_NAMES.COLOR_SCHEME, + existingCollections: existingCollections, + }); + + newData.variableModes.push(defaultModeResult); + + modes.slice(1).forEach(async (mode) => { + const modeResult = + await updateOrCreateModes({ + mode: { name: mode }, + isDefault: false, + targetCollectionName: + COLLECTION_NAMES.COLOR_SCHEME, + existingCollections: + existingCollections, }); - } - }; - updateModes(COLLECTION_NAMES.COLOR_SCHEME); + newData.variableModes.push(modeResult); + }); async function processVariables( lightVariables, @@ -154,7 +138,7 @@ export async function updateTheme( // Prepare the variable data const variableData = - await updateOrCreateVariable({ + await updateOrCreateVariables({ variable: { name: prefixedName, resolvedType: VARIABLE_TYPES.COLOR, @@ -327,75 +311,34 @@ async function updateSkinColorVariables( // Step 5: Create or update modes based on the brands const firstBrand = brands[0]; - const formattedFirstBrand = - formatBrandName(firstBrand); - - const defaultMode = - brandCollection.modes?.find( - (mode) => - mode.name === MODE_NAMES.DEFAULT || - mode.name === firstBrand || - mode.name === formattedFirstBrand - ); - if (defaultMode) { - if ( - defaultMode.name === firstBrand || - defaultMode.name === MODE_NAMES.DEFAULT - ) { - newData.variableModes.push({ - action: "UPDATE", - id: defaultMode.modeId, - name: formattedFirstBrand, - variableCollectionId: - brandCollection.id, - }); - } - } else { - newData.variableModes.push({ - action: "CREATE", - name: formattedFirstBrand, - id: generateTempModeId( - formattedFirstBrand, - COLLECTION_NAMES.BRAND - ), - variableCollectionId: brandCollection.id, + const firstModeResult = + await updateOrCreateModes({ + mode: { + name: formatBrandName(firstBrand), + }, + isDefault: true, + targetCollectionName: + COLLECTION_NAMES.BRAND, + existingCollections: themeCollections, }); - } - brands.slice(1).forEach((brand) => { + newData.variableModes.push(firstModeResult); + + brands.slice(1).forEach(async (brand) => { const formattedBrand = formatBrandName(brand); - const existingMode = - brandCollection.modes.find( - (mode) => - mode.name === brand || - mode.name === formattedBrand - ); - - if (existingMode) { - if (existingMode.name === brand) { - newData.variableModes.push({ - action: "UPDATE", - id: existingMode.modeId, - name: formattedBrand, - variableCollectionId: - brandCollection.id, - }); - } - } else { - newData.variableModes.push({ - action: "CREATE", - name: formattedBrand, - id: generateTempModeId( - formattedBrand, - COLLECTION_NAMES.BRAND - ), - variableCollectionId: - brandCollection.id, + const modeResult = + await updateOrCreateModes({ + mode: { name: formattedBrand }, + isDefault: false, + targetCollectionName: + COLLECTION_NAMES.BRAND, + existingCollections: themeCollections, }); - } + + newData.variableModes.push(modeResult); }); // Step 6: Create a map for color variables from Theme @@ -437,7 +380,7 @@ async function updateSkinColorVariables( }; const variableData = - await updateOrCreateVariable({ + await updateOrCreateVariables({ variable, targetCollectionName: variable.targetCollectionName, @@ -463,8 +406,11 @@ async function updateSkinColorVariables( }, targetModeName: - brand === brands[0] - ? defaultMode.name + hasDefaultMode( + COLLECTION_NAMES.BRAND, + themeCollections + ) && brand === brands[0] + ? MODE_NAMES.DEFAULT : formattedBrand, targetCollectionName: COLLECTION_NAMES.BRAND, // Assuming the collection name is 'Brand' @@ -635,7 +581,7 @@ async function updateSkinOtherVariables( for (const variable of variables) { // Update or create the variable in the collection const variableUpdateResult = - await updateOrCreateVariable({ + await updateOrCreateVariables({ variable: { ...variable, resolvedType: resolvedType, @@ -665,7 +611,12 @@ async function updateSkinOtherVariables( hasAlias: hasAlias, }, targetModeName: - formatBrandName(brand), + hasDefaultMode( + collectionName, + existingCollections + ) && brand === brands[0] + ? MODE_NAMES.DEFAULT + : formatBrandName(brand), targetCollectionName: collectionName, existingCollections: existingCollections, diff --git a/tokens/figma/update-skins.mjs b/tokens/figma/update-skins.mjs index 90c7dd9568..0c5c51a33e 100644 --- a/tokens/figma/update-skins.mjs +++ b/tokens/figma/update-skins.mjs @@ -1,7 +1,7 @@ import fetch from "node-fetch"; import { updateCollections, - updateOrCreateVariable, + updateOrCreateVariables, updateOrCreateVariableModeValues, COLLECTION_NAMES, VARIABLE_TYPES, @@ -65,8 +65,8 @@ async function updatePalette( for (const variable of variables) { // Update or create the variable in the collection - const variableUpdateResult = - await updateOrCreateVariable({ + const variablesUpdateResult = + await updateOrCreateVariables({ variable: { ...variable, resolvedType: resolvedType, @@ -83,7 +83,7 @@ async function updatePalette( newData.variables = []; } newData.variables.push( - variableUpdateResult + variablesUpdateResult ); // Find the mode for the current brand and set the mode values correctly diff --git a/tokens/figma/utils.mjs b/tokens/figma/utils.mjs index 11cbde7d38..ff351b2e13 100644 --- a/tokens/figma/utils.mjs +++ b/tokens/figma/utils.mjs @@ -53,6 +53,32 @@ export function generateTempModeId( return `tempId_${targetCollection}_${targetMode}`; } +export function hasDefaultMode( + targetCollectionName, + existingCollections +) { + const collection = Object.values( + existingCollections + ).find( + (collection) => + collection.name === targetCollectionName + ); + + if (!collection) { + console.warn( + `Collection ${targetCollectionName} not found.` + ); + return false; + } + + const existingModes = collection.modes || []; + + // Return true if a mode named "Default" exists, otherwise false + return existingModes.some( + (m) => m.name === MODE_NAMES.DEFAULT + ); +} + export async function updateCollections( collections, FILE_KEY, @@ -131,9 +157,9 @@ export async function updateCollections( } } -export async function updateOrCreateMode({ +export async function updateOrCreateModes({ mode, - defaultModeName, + isDefault, targetCollectionName, existingCollections, }) { @@ -144,70 +170,58 @@ export async function updateOrCreateMode({ collection.name === targetCollectionName ); + // Handle the case when the collection is not found if (!collection) { console.warn( `Collection ${targetCollectionName} not found.` ); - return; + return null; } 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 === DMODE_NAMES.DEFAULT // Replace with actual default mode name if different - ); - - // Find the target mode by its name + // Look for the existing mode by name and the default mode const existingMode = existingModes.find( (m) => m.name === mode.name ); + const defaultMode = existingModes.find( + (m) => m.name === MODE_NAMES.DEFAULT + ); - 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 + // If it's the default mode, update or rename it + if (isDefault && defaultMode) { + return { + action: "UPDATE", + id: defaultMode.modeId, + name: mode.name, // Rename or update "Default" mode to the target name + variableCollectionId: collectionId, + }; + } + + // If the mode does not exist, create it + if (!existingMode) { return { action: "CREATE", id: generateTempModeId( - mode.name, // Use mode name for temp ID + mode.name, targetCollectionName ), - name: mode.name, // Create the mode with the specified name - variableCollectionId: collectionId, - }; - } else { - // If the mode exists, update it - return { - action: "UPDATE", - id: existingMode.modeId, // Use existing mode ID - name: mode.name, // Update the mode with the correct name + name: mode.name, // Create the mode with the target name variableCollectionId: collectionId, }; } + + // If the mode exists, update it + return { + action: "UPDATE", + id: existingMode.modeId, + name: mode.name, // Update the mode with the correct name + variableCollectionId: collectionId, + }; } -export async function updateOrCreateVariable({ +export async function updateOrCreateVariables({ variable, targetCollectionName, existingVariables,