2820 lineheight variables not binding and applying with styles (#2835)

* feat: add token format option to get exact resolved value * revert the DTCG format * add logs to figure out issue * feat: update applyTypographyTokenOnNode function to handle direct typography property tokens * update the logic to pass correct valueObject and resolvedObject * update test case to follow the logic
tokens-studio · Jun 12, 2024 · 85ee66c · 85ee66c
1 parent abcc06c
commit 85ee66c
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 9 deletions.
diff --git a/packages/tokens-studio-for-figma/src/plugin/applyTypographyTokenOnNode.ts b/packages/tokens-studio-for-figma/src/plugin/applyTypographyTokenOnNode.ts
@@ -57,6 +57,16 @@ export async function applyTypographyTokenOnNode(
     || values.textCase
     || values.textDecoration
   ) {
+    const resolvedValueObject = {
+      fontFamily: isPrimitiveValue(data.fontFamilies) ? String(data.fontFamilies.startsWith('{') ? data.fontFamilies : `{${data.fontFamilies}}`) : undefined,
+      fontWeight: isPrimitiveValue(data.fontWeights) ? String(data.fontWeights.startsWith('{') ? data.fontWeights : `{${data.fontWeights}}`) : undefined,
+      lineHeight: isPrimitiveValue(data.lineHeights) ? String(data.lineHeights.startsWith('{') ? data.lineHeights : `{${data.lineHeights}}`) : undefined,
+      fontSize: isPrimitiveValue(data.fontSizes) ? String(data.fontSizes.startsWith('{') ? data.fontSizes : `{${data.fontSizes}}`) : undefined,
+      letterSpacing: isPrimitiveValue(data.letterSpacing) ? String(data.letterSpacing.startsWith('{') ? data.letterSpacing : `{${data.letterSpacing}}`) : undefined,
+      paragraphSpacing: isPrimitiveValue(data.paragraphSpacing) ? String(data.paragraphSpacing.startsWith('{') ? data.paragraphSpacing : `{${data.paragraphSpacing}}`) : undefined,
+      textCase: isPrimitiveValue(data.textCase) ? String(data.textCase.startsWith('{') ? data.textCase : `{${data.textCase}}`) : undefined,
+      textDecoration: isPrimitiveValue(data.textDecoration) ? String(data.textDecoration.startsWith('{') ? data.textDecoration : `{${data.textDecoration}}`) : undefined,
+    }
     const valueObject = {
       fontFamily: isPrimitiveValue(values.fontFamilies) ? String(values.fontFamilies) : undefined,
       fontWeight: isPrimitiveValue(values.fontWeights) ? String(values.fontWeights) : undefined,
@@ -70,8 +80,8 @@ export async function applyTypographyTokenOnNode(
     await tryApplyTypographyCompositeVariable({
       target: node,
       value: valueObject,
-      resolvedValue: valueObject,
+      resolvedValue: resolvedValueObject,
       baseFontSize,
     });
   }
-}
+}
diff --git a/packages/tokens-studio-for-figma/src/plugin/tryApplyTypographyCompositeVariable.test.ts b/packages/tokens-studio-for-figma/src/plugin/tryApplyTypographyCompositeVariable.test.ts
@@ -45,14 +45,14 @@ describe('tryApplyTypographyCompositeVariable', () => {
       },
       setBoundVariable: jest.fn(),
     } as TextNode | TextStyle;
-    resolvedValue = {
-      fontFamily: '{fontFamily.default}',
-      fontWeight: '{fontWeight.default}',
-    };
     value = {
       fontFamily: 'Roboto-raw',
       fontWeight: 'Bold-raw',
     };
+    resolvedValue = {
+      fontFamily: '{fontFamily.default}',
+      fontWeight: '{fontWeight.default}',
+    };
     defaultTokenValueRetriever.getVariableReference = jest.fn().mockResolvedValue('Roboto');
     defaultTokenValueRetriever.getVariableReference = jest.fn()
       .mockResolvedValueOnce('Roboto')

diff --git a/packages/tokens-studio-for-figma/src/plugin/tryApplyTypographyCompositeVariable.ts b/packages/tokens-studio-for-figma/src/plugin/tryApplyTypographyCompositeVariable.ts
@@ -29,11 +29,11 @@ export async function tryApplyTypographyCompositeVariable({
       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
-    for (const [originalKey, val] of Object.entries(resolvedValue).filter(([_, keyValue]) => typeof keyValue !== 'undefined')) {
+    for (const [originalKey, val] of Object.entries(value).filter(([_, keyValue]) => typeof keyValue !== 'undefined')) {
       if (typeof val === 'undefined') return;
       let successfullyAppliedVariable = false;
-      if (val.toString().startsWith('{') && val.toString().endsWith('}') && shouldCreateStylesWithVariables) {
-        const variableToApply = await defaultTokenValueRetriever.getVariableReference(val.toString().slice(1, -1));
+      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 (variableToApply) {
           if (target.fontName !== figma.mixed) await figma.loadFontAsync(target.fontName);