From 565b02e75bdd8651a26d111a0bc7e102433ef4cc Mon Sep 17 00:00:00 2001 From: macintoshhelper <6757532+macintoshhelper@users.noreply.github.com> Date: Mon, 30 Sep 2024 18:35:25 +0400 Subject: [PATCH 1/4] apply linear gradient incase variable reference not resolved --- .../src/plugin/setColorValuesOnTarget.ts | 100 ++++++++++-------- 1 file changed, 55 insertions(+), 45 deletions(-) diff --git a/packages/tokens-studio-for-figma/src/plugin/setColorValuesOnTarget.ts b/packages/tokens-studio-for-figma/src/plugin/setColorValuesOnTarget.ts index c2269ce81..a1333bfdf 100644 --- a/packages/tokens-studio-for-figma/src/plugin/setColorValuesOnTarget.ts +++ b/packages/tokens-studio-for-figma/src/plugin/setColorValuesOnTarget.ts @@ -11,6 +11,50 @@ function hasModifier(token: SingleToken) { return token.$extensions?.['studio.tokens']?.modify; } +const applyPaintIfNotEqual = (key, existingPaint, newPaint, target) => { + if (!existingPaint || !isPaintEqual(newPaint, existingPaint)) { + if (key === 'paints' && 'paints' in target) target.paints = [newPaint]; + if (key === 'fills' && 'fills' in target) target.fills = [newPaint]; + if (key === 'strokes' && 'strokes' in target) target.strokes = [newPaint]; + } +} + +const getLinearGradientPaint = async (fallbackValue, token) => { + const { gradientStops, gradientTransform } = convertStringToFigmaGradient(fallbackValue); + + const rawValue = defaultTokenValueRetriever.get(token)?.rawValue; + let gradientStopsWithReferences = gradientStops; + + const { createStylesWithVariableReferences } = defaultTokenValueRetriever; + if (createStylesWithVariableReferences) { + const referenceTokens = getReferenceTokensFromGradient(rawValue); + + if (gradientStops && referenceTokens.length > 0) { + gradientStopsWithReferences = await Promise.all(gradientStops.map(async (stop, index) => { + const referenceVariableExists = await defaultTokenValueRetriever.getVariableReference(referenceTokens[index]); + if (referenceVariableExists) { + return { + ...stop, + boundVariables: { + color: { + type: 'VARIABLE_ALIAS', + id: referenceVariableExists.id, + }, + }, + }; + } + return stop; + })); + } + } + const newPaint: GradientPaint = { + type: 'GRADIENT_LINEAR', + gradientTransform, + gradientStops: gradientStopsWithReferences, + }; + return newPaint; +} + export default async function setColorValuesOnTarget({ target, token, key, givenValue, }: { @@ -39,44 +83,8 @@ export default async function setColorValuesOnTarget({ if (resolvedValue.startsWith?.('linear-gradient')) { const fallbackValue = defaultTokenValueRetriever.get(token)?.value; - const { gradientStops, gradientTransform } = convertStringToFigmaGradient(fallbackValue); - - const rawValue = defaultTokenValueRetriever.get(token)?.rawValue; - let gradientStopsWithReferences = gradientStops; - - const { createStylesWithVariableReferences } = defaultTokenValueRetriever; - if (createStylesWithVariableReferences) { - const referenceTokens = getReferenceTokensFromGradient(rawValue); - - if (gradientStops && referenceTokens.length > 0) { - gradientStopsWithReferences = await Promise.all(gradientStops.map(async (stop, index) => { - const referenceVariableExists = await defaultTokenValueRetriever.getVariableReference(referenceTokens[index]); - if (referenceVariableExists) { - return { - ...stop, - boundVariables: { - color: { - type: 'VARIABLE_ALIAS', - id: referenceVariableExists.id, - }, - }, - }; - } - return stop; - })); - } - } - const newPaint: GradientPaint = { - type: 'GRADIENT_LINEAR', - gradientTransform, - gradientStops: gradientStopsWithReferences, - }; - - if (!existingPaint || !isPaintEqual(newPaint, existingPaint)) { - if (key === 'paints' && 'paints' in target) target.paints = [newPaint]; - if (key === 'fills' && 'fills' in target) target.fills = [newPaint]; - if (key === 'strokes' && 'strokes' in target) target.strokes = [newPaint]; - } + const newPaint = await getLinearGradientPaint(fallbackValue, token); + applyPaintIfNotEqual(key, existingPaint, newPaint, target); } else { // If the raw value is a pure reference to another token, we first should try to apply that reference as a variable if it exists. let successfullyAppliedVariable = false; @@ -99,14 +107,16 @@ export default async function setColorValuesOnTarget({ const valueToApply = fallbackValue ?? givenValue; if (!successfullyAppliedVariable) { - const { color, opacity } = convertToFigmaColor(typeof valueToApply === 'string' ? valueToApply : valueToApply?.color || givenValue || ''); - const newPaint: SolidPaint = { color, opacity, type: 'SOLID' }; - await unbindVariableFromTarget(target, key, newPaint); - if (!existingPaint || !isPaintEqual(newPaint, existingPaint)) { - if (key === 'paints' && 'paints' in target) target.paints = [newPaint]; - if (key === 'fills' && 'fills' in target) target.fills = [newPaint]; - if (key === 'strokes' && 'strokes' in target) target.strokes = [newPaint]; + let newPaint: SolidPaint | GradientPaint; + if (valueToApply.startsWith?.('linear-gradient')) { + newPaint = await getLinearGradientPaint(fallbackValue, token); + } else { + const { color, opacity } = convertToFigmaColor(typeof valueToApply === 'string' ? valueToApply : valueToApply?.color || givenValue || ''); + newPaint = { color, opacity, type: 'SOLID' }; } + + applyPaintIfNotEqual(key, existingPaint, newPaint, target) + await unbindVariableFromTarget(target, key, newPaint); } } if (description && 'description' in target) { From 33902fbda6fe964b99f2fdf9d3953db9b52a6915 Mon Sep 17 00:00:00 2001 From: macintoshhelper <6757532+macintoshhelper@users.noreply.github.com> Date: Mon, 30 Sep 2024 23:08:43 +0400 Subject: [PATCH 2/4] fix order of unbindVariableFromTarget and applyPaint --- .../src/plugin/setColorValuesOnTarget.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/tokens-studio-for-figma/src/plugin/setColorValuesOnTarget.ts b/packages/tokens-studio-for-figma/src/plugin/setColorValuesOnTarget.ts index a1333bfdf..e7666c128 100644 --- a/packages/tokens-studio-for-figma/src/plugin/setColorValuesOnTarget.ts +++ b/packages/tokens-studio-for-figma/src/plugin/setColorValuesOnTarget.ts @@ -115,8 +115,8 @@ export default async function setColorValuesOnTarget({ newPaint = { color, opacity, type: 'SOLID' }; } - applyPaintIfNotEqual(key, existingPaint, newPaint, target) await unbindVariableFromTarget(target, key, newPaint); + applyPaintIfNotEqual(key, existingPaint, newPaint, target); } } if (description && 'description' in target) { From 1bf3df21a74aa44c3c5d08a87b60613525a75b15 Mon Sep 17 00:00:00 2001 From: macintoshhelper <6757532+macintoshhelper@users.noreply.github.com> Date: Mon, 30 Sep 2024 23:09:45 +0400 Subject: [PATCH 3/4] fixes: lint errors --- .../src/plugin/setColorValuesOnTarget.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/tokens-studio-for-figma/src/plugin/setColorValuesOnTarget.ts b/packages/tokens-studio-for-figma/src/plugin/setColorValuesOnTarget.ts index e7666c128..cb905c419 100644 --- a/packages/tokens-studio-for-figma/src/plugin/setColorValuesOnTarget.ts +++ b/packages/tokens-studio-for-figma/src/plugin/setColorValuesOnTarget.ts @@ -17,7 +17,7 @@ const applyPaintIfNotEqual = (key, existingPaint, newPaint, target) => { if (key === 'fills' && 'fills' in target) target.fills = [newPaint]; if (key === 'strokes' && 'strokes' in target) target.strokes = [newPaint]; } -} +}; const getLinearGradientPaint = async (fallbackValue, token) => { const { gradientStops, gradientTransform } = convertStringToFigmaGradient(fallbackValue); @@ -53,7 +53,7 @@ const getLinearGradientPaint = async (fallbackValue, token) => { gradientStops: gradientStopsWithReferences, }; return newPaint; -} +}; export default async function setColorValuesOnTarget({ target, token, key, givenValue, From 36c3607ef12d5997d0d9cf816f9faeeb314c84f5 Mon Sep 17 00:00:00 2001 From: macintoshhelper Date: Thu, 3 Oct 2024 11:48:04 +0300 Subject: [PATCH 4/4] create changeset for gradient style resolving fix --- .changeset/twenty-days-relate.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/twenty-days-relate.md diff --git a/.changeset/twenty-days-relate.md b/.changeset/twenty-days-relate.md new file mode 100644 index 000000000..a60e94edb --- /dev/null +++ b/.changeset/twenty-days-relate.md @@ -0,0 +1,5 @@ +--- +"@tokens-studio/figma-plugin": patch +--- + +Fixed an issue where referencing a gradient would result in an empty color style; now the style correctly resolves to the gradient.