fix: resolve mode-specific baseFontSize for rem scaling in variable e… (#3836)

* fix: resolve mode-specific baseFontSize for rem scaling in variable export

* fix lint

* update test

* add changeset

* update changeset

Author: akshay-gupta7

.changeset/fresh-brooms-build.md

@@ -0,0 +1,5 @@
+---
+"@tokens-studio/figma-plugin": patch
+---
+
+Support per-mode `baseFontSize` resolution via aliases, ensuring correct rem-to-pixel scaling when exporting variables across different themes. Also includes improved handling of numeric/aliased font sizes in variable exports and more robust testing for dimension conversions.

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

@@ -4,8 +4,8 @@ export default function setBooleanValuesOnVariable(variable: Variable, mode: str
   try {
     const existingVariableValue = variable.valuesByMode[mode];
     if (
-      existingVariableValue === undefined
-      || !(typeof existingVariableValue === 'boolean' || isVariableWithAliasReference(existingVariableValue))
+      existingVariableValue !== undefined
+      && !(typeof existingVariableValue === 'boolean' || isVariableWithAliasReference(existingVariableValue))
     ) return;
 
     const newValue = value === 'true';

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

@@ -23,8 +23,8 @@ export default function setColorValuesOnVariable(variable: Variable, mode: strin
     const { color, opacity } = convertToFigmaColor(value);
     const existingVariableValue = variable.valuesByMode[mode];
     if (
-      !existingVariableValue
-      || !(isFigmaColorObject(existingVariableValue) || isVariableWithAliasReference(existingVariableValue))
+      existingVariableValue
+      && !(isFigmaColorObject(existingVariableValue) || isVariableWithAliasReference(existingVariableValue))
     ) return;
 
     const newValue = { ...color, a: opacity };

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

@@ -16,8 +16,8 @@ export default function setNumberValuesOnVariable(variable: Variable, mode: stri
     }
     const existingVariableValue = variable.valuesByMode[mode];
     if (
-      existingVariableValue === undefined
-      || !(typeof existingVariableValue === 'number' || isVariableWithAliasReference(existingVariableValue))
+      existingVariableValue !== undefined
+      && !(typeof existingVariableValue === 'number' || isVariableWithAliasReference(existingVariableValue))
     ) return;
 
     // For direct number values, compare using threshold

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

@@ -4,8 +4,8 @@ export default function setStringValuesOnVariable(variable: Variable, mode: stri
   try {
     const existingVariableValue = variable.valuesByMode[mode];
     if (
-      !existingVariableValue
-      || !(typeof existingVariableValue === 'string' || isVariableWithAliasReference(existingVariableValue))
+      existingVariableValue
+      && !(typeof existingVariableValue === 'string' || isVariableWithAliasReference(existingVariableValue))
     ) return;
 
     if (forceUpdate || existingVariableValue !== value) {

packages/tokens-studio-for-figma/src/plugin/updateVariables.test.ts

@@ -297,4 +297,195 @@ describe('updateVariables', () => {
     // Verify that 2rem was converted to 30px (2 * 15)
     expect(mockSetValueForMode).toHaveBeenCalledWith('1:1', 30);
   });
+
+  it('should handle numeric baseFontSize results from getAliasValue (math evaluated)', async () => {
+    mockSetValueForMode.mockClear();
+
+    const baselineVariable = {
+      name: 'typography/baseline',
+      variableCollectionId: 'VariableCollectionId:1:0',
+      resolvedType: 'FLOAT',
+      setValueForMode: mockSetValueForMode,
+      id: 'VariableID:1:3',
+      key: 'VariableID:1:3',
+      description: '',
+      valuesByMode: { '1:0': 16 },
+      remote: false,
+      remove: jest.fn(),
+    };
+
+    const newVarForTest = {
+      name: 'sizing/test',
+      variableCollectionId: 'VariableCollectionId:1:0',
+      resolvedType: 'FLOAT',
+      setValueForMode: mockSetValueForMode,
+      id: 'VariableID:1:new',
+      key: 'VariableID:1:new',
+      description: '',
+      valuesByMode: { '1:0': 0 },
+      remote: false,
+      remove: jest.fn(),
+    };
+
+    figma.variables.createVariable = jest.fn().mockImplementation((name) => {
+      if (name === 'typography/baseline') return baselineVariable;
+      if (name === 'sizing/test') return newVarForTest;
+      return newVariable;
+    });
+
+    figma.variables.getLocalVariables = jest.fn().mockReturnValue([]);
+
+    const theme = {
+      id: 'ThemeId:test',
+      name: 'Test',
+      group: 'Test group',
+      selectedTokenSets: { core: TokenSetStatus.ENABLED },
+    };
+
+    const tokens = {
+      core: [
+        {
+          name: 'typography.baseline',
+          value: '16', 
+          type: TokenTypes.FONT_SIZES,
+        },
+        {
+          name: 'sizing.test',
+          value: '1.5rem',
+          type: TokenTypes.SIZING,
+        },
+      ],
+    };
+
+    const settingsWithAlias = {
+      ...settings,
+      aliasBaseFontSize: '{typography.baseline}',
+    };
+
+    await updateVariables({
+      collection: { id: 'VariableCollectionId:1:0' } as any,
+      mode: '1:0',
+      theme,
+      tokens,
+      settings: settingsWithAlias,
+      overallConfig: { core: TokenSetStatus.ENABLED },
+    });
+
+    // 1.5rem * 16 = 24
+    expect(mockSetValueForMode).toHaveBeenCalledWith('1:0', 24);
+  });
+
+  it('should apply different baseFontSize for different modes in the same collection', async () => {
+    mockSetValueForMode.mockClear();
+    const mockSpacingSetValueForMode = jest.fn();
+    const mockBaseFontSizeSetValueForMode = jest.fn();
+
+    const collection: any = {
+      id: 'collection1',
+      modes: [
+        { modeId: 'mode-a', name: 'Mode A' },
+        { modeId: 'mode-b', name: 'Mode B' },
+      ],
+    };
+
+    const tokens: any = {
+      core: [
+        { name: 'base.font-size', value: '16', type: TokenTypes.NUMBER },
+        { name: 'spacing.small', value: '1rem', type: TokenTypes.SPACING },
+      ],
+      dark: [
+        { name: 'base.font-size', value: '20', type: TokenTypes.NUMBER },
+      ],
+    };
+
+    const settings: any = {
+      aliasBaseFontSize: '{base.font-size}',
+      variablesNumber: true,
+      variablesColor: false,
+      variablesString: false,
+      variablesBoolean: false,
+      renameExistingStylesAndVariables: false,
+      removeStylesAndVariablesWithoutConnection: false,
+    };
+
+    const themeA: any = {
+      id: 'theme-a',
+      name: 'Theme A',
+      selectedTokenSets: { core: TokenSetStatus.ENABLED },
+      $figmaModeId: 'mode-a',
+    };
+
+    const themeB: any = {
+      id: 'theme-b',
+      name: 'Theme B',
+      selectedTokenSets: {
+        core: TokenSetStatus.ENABLED,
+        dark: TokenSetStatus.ENABLED,
+      },
+      $figmaModeId: 'mode-b',
+    };
+
+    const mockSpacingVariable: any = {
+      id: 'var1',
+      key: 'var1-key',
+      name: 'spacing/small',
+      resolvedType: 'FLOAT',
+      variableCollectionId: 'collection1',
+      valuesByMode: { 'mode-a': 0, 'mode-b': 0 }, // Initial values changed to 0
+      setValueForMode: mockSpacingSetValueForMode,
+    };
+
+    const mockBaseFontSizeVariable: any = {
+      id: 'var2',
+      key: 'var2-key',
+      name: 'base/font-size',
+      resolvedType: 'FLOAT',
+      variableCollectionId: 'collection1',
+      valuesByMode: { 'mode-a': 0, 'mode-b': 0 }, // Initial values changed to 0
+      setValueForMode: mockBaseFontSizeSetValueForMode,
+    };
+
+    (figma.variables.getLocalVariables as jest.Mock).mockReturnValue([
+      mockSpacingVariable,
+      mockBaseFontSizeVariable,
+    ]);
+    (figma.variables.getVariableByIdAsync as jest.Mock).mockImplementation(async (id: string) => {
+      if (id === mockSpacingVariable.id) return mockSpacingVariable;
+      if (id === mockBaseFontSizeVariable.id) return mockBaseFontSizeVariable;
+      return null;
+    });
+
+    // Call updateVariables for Theme A (Mode A)
+    await updateVariables({
+      collection,
+      mode: 'mode-a',
+      theme: themeA,
+      tokens,
+      settings,
+      overallConfig: { core: TokenSetStatus.ENABLED },
+    });
+
+    // Call updateVariables for Theme B (Mode B)
+    await updateVariables({
+      collection,
+      mode: 'mode-b',
+      theme: themeB,
+      tokens,
+      settings,
+      overallConfig: {
+        core: TokenSetStatus.ENABLED,
+        dark: TokenSetStatus.ENABLED,
+      },
+    });
+
+    // Verify spacing/small got 16px for Mode A (1rem * 16)
+    // Note: It might not be called if value is already 16, but we check consistency
+    expect(mockSpacingSetValueForMode).toHaveBeenCalledWith('mode-a', 16);
+    // Verify spacing/small got 20px for Mode B (1rem * 20)
+    expect(mockSpacingSetValueForMode).toHaveBeenCalledWith('mode-b', 20);
+
+    // Verify base/font-size updates
+    expect(mockBaseFontSizeSetValueForMode).toHaveBeenCalledWith('mode-a', 16);
+    expect(mockBaseFontSizeSetValueForMode).toHaveBeenCalledWith('mode-b', 20);
+  });
 });

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

@@ -53,8 +53,12 @@ export default async function updateVariables({
   let themeBaseFontSize = settings.baseFontSize;
   if (settings.aliasBaseFontSize) {
     const resolvedBaseFontSize = getAliasValue(settings.aliasBaseFontSize, resolvedTokens);
-    if (resolvedBaseFontSize && typeof resolvedBaseFontSize === 'string') {
-      themeBaseFontSize = resolvedBaseFontSize;
+    if (
+      resolvedBaseFontSize !== undefined
+      && resolvedBaseFontSize !== null
+      && (typeof resolvedBaseFontSize === 'string' || typeof resolvedBaseFontSize === 'number')
+    ) {
+      themeBaseFontSize = String(resolvedBaseFontSize);
     }
   }