fix: radial gradient export alignment and positioning by akshay-gupta7 · Pull Request #3837 · tokens-studio/figma-plugin

akshay-gupta7 · 2026-04-09T17:05:24Z

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 · 2026-04-09T17:05:32Z

⚠️ No Changeset found

Latest commit: 995feee

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 · 2026-04-09T17:08:05Z

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

codacy-production · 2026-04-09T17:15:02Z

Up to standards ✅

🟢 Issues 0 issues

Results:
0 new issues

View in Codacy

🟢 Metrics 15 complexity · 10 duplication

Metric Results

Complexity 15

Duplication 10

View in Codacy

_{NEW Get contextual insights on your PRs based on Codacy's metrics, along with PR and Jira context, without leaving GitHub. Enable AI reviewer}
_{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 · 2026-04-10T07:30:07Z

Commit SHA:3b56768923e5a34a9cac1cd0fbc4dd611846280f

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.56 (0.09)	53.04 (0.12)	59.32 (0.03)	61.95 (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)	75.6 (-4.4)	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 · 2026-04-10T07:30:08Z

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

six7 · 2026-04-21T07:46:32Z

 import { convertToFigmaColor } from '../../figmaTransforms/colors';

+// Helper function to check if a value is any type of gradient
+const isGradient = (value: string): boolean => value?.startsWith?.('linear-gradient')


do we support repeating-linear-gradient etc? you added that further above, but its missing from here

supported in the token, not in the export yet, removed it in remove repeating gradient check

will raise a separate PR to include support for exporting repeating gradients

six7

failing CI but approved otherwise

fix: radial gradient export alignment and positioning

885b3e1

akshay-gupta7 self-assigned this Apr 9, 2026

akshay-gupta7 requested a review from Copilot April 10, 2026 07:03

Copilot AI reviewed Apr 10, 2026

View reviewed changes

address review comments

3b085e3

akshay-gupta7 marked this pull request as ready for review April 10, 2026 07:27

akshay-gupta7 requested a review from six7 April 10, 2026 07:27

six7 reviewed Apr 21, 2026

View reviewed changes

akshay-gupta7 added 2 commits April 21, 2026 14:25

remove repeating gradient check

a3d8506

Merge branch 'main' into akshay/fix-radial-gradient-view

2574ab2

six7 approved these changes Apr 22, 2026

View reviewed changes

Merge branch 'main' into akshay/fix-radial-gradient-view

995feee

akshay-gupta7 merged commit 135b4ae into main Apr 22, 2026
8 of 10 checks passed

akshay-gupta7 deleted the akshay/fix-radial-gradient-view branch April 22, 2026 08:30

Uh oh!

Conversation

akshay-gupta7 commented Apr 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Why does this PR exist?

What does this pull request do?

Testing this change

Additional Notes (if any)

Uh oh!

changeset-bot Bot commented Apr 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

github-actions Bot commented Apr 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codacy-production Bot commented Apr 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Up to standards ✅

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Apr 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Test coverage results 🧪

Uh oh!

github-actions Bot commented Apr 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

six7 Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

akshay-gupta7 Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

akshay-gupta7 Apr 21, 2026

Choose a reason for hiding this comment

Uh oh!

six7 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

akshay-gupta7 commented Apr 9, 2026 •

edited

Loading

changeset-bot Bot commented Apr 9, 2026 •

edited

Loading

github-actions Bot commented Apr 9, 2026 •

edited

Loading

codacy-production Bot commented Apr 9, 2026 •

edited

Loading

github-actions Bot commented Apr 10, 2026 •

edited

Loading

github-actions Bot commented Apr 10, 2026 •

edited

Loading