diff --git a/.changeset/nervous-waves-move.md b/.changeset/nervous-waves-move.md new file mode 100644 index 000000000..8ccf26e35 --- /dev/null +++ b/.changeset/nervous-waves-move.md @@ -0,0 +1,5 @@ +--- +"@tokens-studio/figma-plugin": patch +--- + +Fix import of decimal values when importing styles and variables diff --git a/packages/tokens-studio-for-figma/src/plugin/pullStyles.test.ts b/packages/tokens-studio-for-figma/src/plugin/pullStyles.test.ts index 16e8a7b7f..e8947e6dd 100644 --- a/packages/tokens-studio-for-figma/src/plugin/pullStyles.test.ts +++ b/packages/tokens-studio-for-figma/src/plugin/pullStyles.test.ts @@ -40,7 +40,7 @@ describe('pullStyles', () => { name: 'heading/h1/bold', id: '456', description: 'the big one', - fontSize: 24, + fontSize: 24.8, fontName: { family: 'Inter', style: 'Bold', @@ -164,7 +164,7 @@ describe('pullStyles', () => { ], fontSizes: [ { name: 'fontSize.0', type: 'fontSizes', value: '16' }, - { name: 'fontSize.1', type: 'fontSizes', value: '24' }, + { name: 'fontSize.1', type: 'fontSizes', value: '24.8' }, ], letterSpacing: [{ name: 'letterSpacing.0', type: 'letterSpacing', value: '0%' }], paragraphSpacing: [{ name: 'paragraphSpacing.0', type: 'paragraphSpacing', value: '0' }, diff --git a/packages/tokens-studio-for-figma/src/plugin/pullStyles.ts b/packages/tokens-studio-for-figma/src/plugin/pullStyles.ts index 49d79a42c..455ac81e6 100644 --- a/packages/tokens-studio-for-figma/src/plugin/pullStyles.ts +++ b/packages/tokens-studio-for-figma/src/plugin/pullStyles.ts @@ -97,7 +97,7 @@ export default function pullStyles(styleTypes: PullStyleOptions): void { .sort((a, b) => a - b) .map((size, idx) => ({ name: `fontSize.${idx}`, - value: size.toString(), + value: Number(size.toFixed(3)).toString(), type: TokenTypes.FONT_SIZES, })); diff --git a/packages/tokens-studio-for-figma/src/plugin/pullVariables.test.ts b/packages/tokens-studio-for-figma/src/plugin/pullVariables.test.ts index 6c77f394f..2dce9fec7 100644 --- a/packages/tokens-studio-for-figma/src/plugin/pullVariables.test.ts +++ b/packages/tokens-studio-for-figma/src/plugin/pullVariables.test.ts @@ -82,6 +82,18 @@ describe('pullStyles', () => { '1:3': 16, }, }, + { + name: 'Number3', + remote: false, + variableCollectionId: 'coll1', + resolvedType: 'FLOAT', + valuesByMode: { + '1:0': 24.8, + '1:1': 24.8, + '1:2': 24.8, + '1:3': 24.8, + }, + }, { name: 'String', remote: false, @@ -191,6 +203,30 @@ describe('pullStyles', () => { type: 'number', value: 16, }, + { + name: 'Number3', + parent: 'Collection 1/Default', + type: 'number', + value: 24.8, + }, + { + name: 'Number3', + parent: 'Collection 1/Dark', + type: 'number', + value: 24.8, + }, + { + name: 'Number3', + parent: 'Collection 1/Light', + type: 'number', + value: 24.8, + }, + { + name: 'Number3', + parent: 'Collection 1/Custom', + type: 'number', + value: 24.8, + }, ], booleans: [{ name: 'Boolean', parent: 'Collection 1/Default', type: 'boolean', value: 'true', @@ -292,6 +328,30 @@ describe('pullStyles', () => { type: 'dimension', value: '16px', }, + { + name: 'Number3', + parent: 'Collection 1/Default', + type: 'dimension', + value: '24.8px', + }, + { + name: 'Number3', + parent: 'Collection 1/Dark', + type: 'dimension', + value: '24.8px', + }, + { + name: 'Number3', + parent: 'Collection 1/Light', + type: 'dimension', + value: '24.8px', + }, + { + name: 'Number3', + parent: 'Collection 1/Custom', + type: 'dimension', + value: '24.8px', + }, ], booleans: [{ name: 'Boolean', parent: 'Collection 1/Default', type: 'boolean', value: 'true', @@ -393,6 +453,30 @@ describe('pullStyles', () => { type: 'dimension', value: '1rem', }, + { + name: 'Number3', + parent: 'Collection 1/Default', + type: 'dimension', + value: '1.55rem', + }, + { + name: 'Number3', + parent: 'Collection 1/Dark', + type: 'dimension', + value: '1.55rem', + }, + { + name: 'Number3', + parent: 'Collection 1/Light', + type: 'dimension', + value: '1.55rem', + }, + { + name: 'Number3', + parent: 'Collection 1/Custom', + type: 'dimension', + value: '1.55rem', + }, ], booleans: [{ name: 'Boolean', parent: 'Collection 1/Default', type: 'boolean', value: 'true', @@ -494,6 +578,30 @@ describe('pullStyles', () => { type: 'dimension', value: '1rem', }, + { + name: 'Number3', + parent: 'Collection 1/Default', + type: 'dimension', + value: '1.55rem', + }, + { + name: 'Number3', + parent: 'Collection 1/Dark', + type: 'dimension', + value: '1.55rem', + }, + { + name: 'Number3', + parent: 'Collection 1/Light', + type: 'dimension', + value: '1.55rem', + }, + { + name: 'Number3', + parent: 'Collection 1/Custom', + type: 'dimension', + value: '1.55rem', + }, ], booleans: [{ name: 'Boolean', parent: 'Collection 1/Default', type: 'boolean', value: 'true', diff --git a/packages/tokens-studio-for-figma/src/plugin/pullVariables.ts b/packages/tokens-studio-for-figma/src/plugin/pullVariables.ts index e4a040bfb..b48786b62 100644 --- a/packages/tokens-studio-for-figma/src/plugin/pullVariables.ts +++ b/packages/tokens-studio-for-figma/src/plugin/pullVariables.ts @@ -16,10 +16,15 @@ export default async function pullVariables(options: PullVariablesOptions): Prom let baseRem = 16; if (options.useRem) { - baseRem = await figma.clientStorage.getAsync('uiSettings').then(async (uiSettings) => { - const settings = JSON.parse(await uiSettings); - return settings.baseFontSize; - }); + const uiSettings = await figma.clientStorage.getAsync('uiSettings'); + const settings = JSON.parse(await uiSettings); + if (settings?.baseFontSize) { + const baseFontSizeValue = typeof settings.baseFontSize === 'number' + ? settings.baseFontSize + : parseFloat(settings.baseFontSize); + + baseRem = !isNaN(baseFontSizeValue) ? Number(baseFontSizeValue) : 16; + } } const localVariables = await getVariablesWithoutZombies(); @@ -100,9 +105,11 @@ export default async function pullVariables(options: PullVariablesOptions): Prom tokenValue = `{${alias?.name.replace(/\//g, '.')}}`; } else if (typeof value === 'number') { if (options.useRem) { - tokenValue = `${Number(tokenValue) / parseFloat(String(baseRem))}rem`; + tokenValue = `${Number((Number(tokenValue) / parseFloat(String(baseRem))).toFixed(3))}rem`; } else if (options.useDimensions) { - tokenValue = `${tokenValue}px`; + tokenValue = `${Number(tokenValue.toFixed(3))}px`; + } else { + tokenValue = Number(tokenValue.toFixed(3)); } } const modeName = collection?.modes.find((m) => m.modeId === mode)?.name;