Fix variable creation issue

.changeset/chatty-buckets-share.md

@@ -0,0 +1,5 @@
+---
+"@tokens-studio/figma-plugin": patch
+---
+
+Fixed an issue around variable creation where if numerical weights were used we'd display an error that we're unable to apply the font. We now changed this to properly load all weights of the font family and then create styles correctly with variable references to the numerical weight variable

.changeset/hot-bears-compete.md

@@ -0,0 +1,5 @@
+---
+"@tokens-studio/figma-plugin": patch
+---
+
+Fixes variable creation of color token was using a modifier and using a reference. We now correctly create a raw hex value as Figma doesn't have modifiers. Before we falsely used a reference without the modifier applied

packages/tokens-studio-for-figma/src/plugin/setColorValuesOnTarget.ts

@@ -5,6 +5,11 @@ import { defaultTokenValueRetriever } from './TokenValueRetriever';
 import { ColorPaintType, tryApplyColorVariableId } from '@/utils/tryApplyColorVariableId';
 import { unbindVariableFromTarget } from './unbindVariableFromTarget';
 import { getReferenceTokensFromGradient } from '@/utils/color';
+import { SingleToken } from '@/types/tokens';
+
+function hasModifier(token: SingleToken) {
+  return token.$extensions?.['studio.tokens']?.modify;
+}
 
 export default async function setColorValuesOnTarget({
   target, token, key, givenValue,
@@ -79,7 +84,7 @@ export default async function setColorValuesOnTarget({
       const containsReferenceVariable = resolvedValue.toString().startsWith('{') && resolvedValue.toString().endsWith('}');
       const referenceVariableExists = await defaultTokenValueRetriever.getVariableReference(resolvedValue.slice(1, -1));
 
-      if (containsReferenceVariable && referenceVariableExists && shouldCreateStylesWithVariables) {
+      if (containsReferenceVariable && referenceVariableExists && shouldCreateStylesWithVariables && !hasModifier(resolvedToken)) {
         try {
           successfullyAppliedVariable = await tryApplyColorVariableId(target, resolvedValue.slice(1, -1), ColorPaintType.PAINTS);
         } catch (e) {

packages/tokens-studio-for-figma/src/plugin/tryApplyTypographyCompositeVariable.ts

@@ -24,29 +24,49 @@
   if (typeof value === 'string') return;
 
   try {
-    // First we set font family and weight without variables, we do this because to apply those values we need their combination
-    if ('fontName' in target && ('fontWeight' in value || 'fontFamily' in value)) {
-      setFontStyleOnTarget({ target, value: { fontFamily: value.fontFamily, fontWeight: value.fontWeight }, baseFontSize });
-    }
-    // Then we iterate over all keys of the typography object and apply variables if available, otherwise we apply the value directly
+    // We iterate over all keys of the typography object and apply variables if available, otherwise we apply the value directly
     for (const [originalKey, val] of Object.entries(value).filter(([_, keyValue]) => typeof keyValue !== 'undefined')) {
       if (typeof val === 'undefined') return;
       let successfullyAppliedVariable = false;
       if (resolvedValue[originalKey].toString().startsWith('{') && resolvedValue[originalKey].toString().endsWith('}') && shouldCreateStylesWithVariables) {
         const variableToApply = await defaultTokenValueRetriever.getVariableReference(resolvedValue[originalKey].toString().slice(1, -1));
         const key = transformTypographyKeyToFigmaVariable(originalKey, variableToApply);
+        // If we're dealing with a variable, we fetch all available font weights for the current font and load them.
+        // This is needed because we have numerical weights, but we need to apply the string ones. We dont know them from Figma, so we need to load all.
+        // e.g. font weight = 600, we dont know that we need to load "Bold".
+        if (key === 'fontFamily') {
+          const firstVariableValue = Object.values(variableToApply.valuesByMode)[0];
+          if (firstVariableValue) {
+            const fontsMatching = (await figma.listAvailableFontsAsync() || []).filter((font) => font.fontName.family === firstVariableValue);
+            for (const font of fontsMatching) {
+              await figma.loadFontAsync(font.fontName);
+            }
+          }
+        }
         if (variableToApply) {
           if (target.fontName !== figma.mixed) await figma.loadFontAsync(target.fontName);
-          target.setBoundVariable(key, variableToApply);
-          successfullyAppliedVariable = true;
+          try {
+            target.setBoundVariable(key, variableToApply);
+            successfullyAppliedVariable = true;
+          } catch (e) {
+            // eslint-disable-next-line no-console
+            console.error('unable to apply variable', key, variableToApply, e);
+          }
         }
       }
       // If there's no variable we apply the value directly
-      if (!successfullyAppliedVariable && originalKey !== 'fontFamily' && originalKey !== 'fontWeight') {
-        if (target.fontName !== figma.mixed) await figma.loadFontAsync(target.fontName);
-        const transformedValue = transformValue(value[originalKey], originalKey, baseFontSize);
-        if (transformedValue !== null) {
-          target[originalKey] = transformedValue;
+      if (!successfullyAppliedVariable) {
+        // First we set font family and weight without variables, we do this because to apply those values we need their combination
+        if (originalKey === 'fontFamily' || originalKey === 'fontWeight') {
+          if ('fontName' in target && ('fontWeight' in value || 'fontFamily' in value)) {
+            setFontStyleOnTarget({ target, value: { fontFamily: value.fontFamily, fontWeight: value.fontWeight }, baseFontSize });
+          }
+        } else {
+          if (target.fontName !== figma.mixed) await figma.loadFontAsync(target.fontName);
+          const transformedValue = transformValue(value[originalKey], originalKey, baseFontSize);
+          if (transformedValue !== null) {
+            target[originalKey] = transformedValue;
+          }
         }
       }
     }