fix: radial gradient export alignment and positioning

[akshay-gupta7]

Why does this PR exist?

This PR addresses inconsistencies and missing features in radial gradient handling between Tokens Studio and Figma. Previously, radial gradients were not accurately positioned or aligned during export, and the plugin lacked the ability to match radial gradient tokens against existing Figma paint styles.

What does this pull request do?

• Radial Gradient Transformation Engine:
  • Implemented robust parsing for radial-gradient syntax, including support for the at <position> keyword and shape/size declarations (circle, ellipse).
  • Added matrix math to correctly transform CSS coordinates and centers into Figma's relative transformation space, ensuring pixel-perfect alignment.
• Paint Style Matcher Support:
  • Added support for GRADIENT_RADIAL in paintStyleMatchesColorToken.ts. This allows the plugin to correctly identify when a Figma style already matches a radial gradient token, preventing unnecessary style overrides.
• Hardened Parsing & Modern Color Support:
  • Refactored gradient part detection to use keyword-based identification (at, circle, etc.). This fixes a previous bug where modern color formats like oklch() or named colors were sometimes misclassified as positioning metadata.
  • Added non-gradient guards to prevent the parser from attempting to process solid colors during style matching.
• Types & Cleanup:
  • Removed redundant type fallbacks and non-null assertions across gradients.ts and setColorValuesOnTarget.ts.
  • Fixed documentation typos in transformation comments.
• Comprehensive Testing:
  • Added new test suites covering radial and conic gradients, including edge cases with non-standard rotations and centers.

Testing this change

• Automated Tests:
  • Run yarn workspace @tokens-studio/figma-plugin test src/plugin/figmaUtils/styleMatchers/paintStyleMatchesColorToken.test.ts to verify radial style matching.
  • Run yarn workspace @tokens-studio/figma-plugin test src/plugin/figmaTransforms/gradients.test.ts to verify the transformation engine.
• Manual Verification:
  • Apply a radial gradient token with a custom position (e.g., radial-gradient(at top left, #fff, #000)) to a layer and verify it matches the expected visual output in Figma.

Additional Notes (if any)

This PR also includes updates to the PaintStyle test mock to align with the latest @figma/plugin-typings.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 3b085e3

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

⤵️ 📦 ✨ The artifact was successfully created! Want to test it? Download it here 👀 🎁

[codacy-production]

Up to standards ✅

🟢 Issues 0 issues

Results:
0 new issues

View in Codacy

🟢 Metrics 10 duplication

Metric	Results
Duplication	10

View in Codacy

_{TIP This summary will be updated as you push new changes. Give us feedback}

[Copilot]

Pull request overview

Improves handling of radial gradients so exported/parsed gradients align more closely with Figma’s positioning behavior.

Changes:

• Updated radial gradient parsing to account for at <position> and introduced transform adjustments for common positions.
• Extended gradient parsing to accept repeating gradient function names and case-insensitive function names.
• Added radial-gradient transform test cases and added radial matching support for paint style comparisons.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 6 comments.

File	Description
packages/tokens-studio-for-figma/src/plugin/setColorValuesOnTarget.ts	Adjusts gradient paint creation typing (non-null assertion on gradientTransform).
packages/tokens-studio-for-figma/src/plugin/figmaUtils/styleMatchers/paintStyleMatchesColorToken.ts	Adds matching support for GRADIENT_RADIAL paint styles.
packages/tokens-studio-for-figma/src/plugin/figmaTransforms/gradients.ts	Enhances radial gradient transform calculations; broadens supported gradient function names; normalizes function-name casing.
packages/tokens-studio-for-figma/src/plugin/figmaTransforms/gradients.test.ts	Adds tests for radial-gradient positioning/case-insensitivity behavior.

[github-actions]

Commit SHA:d8423f2909030d49b9cc96677e3bc67d6ca4ff0e

Test coverage results 🧪

Code coverage diff between base branch:main and head branch: akshay/fix-radial-gradient-view 

Status	File	% Stmts	% Branch	% Funcs	% Lines
🟢	total	61.59 (0.08)	53.12 (0.13)	59.32 (0.03)	61.98 (0.08)
🟢	packages/tokens-studio-for-figma/src/plugin/setColorValuesOnTarget.ts	92.64 (0)	87.35 (0.84)	100 (0)	93.54 (0)
🔴	packages/tokens-studio-for-figma/src/plugin/figmaTransforms/gradients.ts	86.38 (-1.67)	76.19 (-3.81)	100 (0)	86.77 (-1.19)
🔴	packages/tokens-studio-for-figma/src/plugin/figmaUtils/styleMatchers/paintStyleMatchesColorToken.ts	100 (0)	93.33 (-6.67)	100 (0)	100 (0)
🟢	packages/tokens-studio-for-figma/src/utils/isPaintEqual.ts	81.81 (0)	75 (7.15)	100 (0)	81.81 (0)

[github-actions]

Commit SHA:d8423f2909030d49b9cc96677e3bc67d6ca4ff0e
Current PR reduces the test coverage percentage by 1 for some tests