Add gradient position support for radial and conic gradients

[Copilot]

Overview

This PR implements support for position keywords and percentage values in radial-gradient() and conic-gradient() functions, addressing the limitation where gradients could only be centered at the default position.

Problem

Previously, the gradient implementation only supported basic color stops but ignored position syntax like:

• radial-gradient(ellipse at top, #ff0000, #0000ff)
• radial-gradient(ellipse at 10%, #333333, #333333 50%, #eeeeee 75%, #333333 75%)
• conic-gradient(from 45deg at bottom right, #ff0000, #0000ff)

The parser would skip over position parameters entirely, resulting in all gradients being centered at (0.5, 0.5).

Solution

New Position Parsing

Added a parsePosition() helper function that correctly handles:

• Keywords: left, top, right, bottom
• Percentages: 25%, 50%, 75%
• Combinations: top left, right bottom, 25% 75%

Enhanced Radial Gradients

Updated convertRadialGradient() to:

• Extract position from at position syntax
• Apply position offsets via transform matrices
• Map CSS coordinates to Figma's coordinate system

Enhanced Conic Gradients

Updated convertConicGradient() to:

• Support both from angle and at position in the same gradient
• Handle at position without angle specification
• Combine rotation and position transforms correctly

Examples Now Supported

/* Position keywords */
radial-gradient(circle at top, #ff0000, #0000ff)
radial-gradient(ellipse at left, #333, #fff)
radial-gradient(circle at bottom right, #red, #blue)

/* Percentage positioning */
radial-gradient(ellipse at 25%, #ff0000, #0000ff)
radial-gradient(circle at 75% 25%, #333, #fff)

/* Conic gradients with positioning */
conic-gradient(at top left, #ff0000, #0000ff)
conic-gradient(from 45deg at 25% 75%, #red, #blue)

Technical Details

The implementation correctly maps CSS coordinate system to Figma's coordinate system:

• CSS at top (50%, 0%) → Figma (0.5, 0)
• CSS at left (0%, 50%) → Figma (0, 0.5)
• Transform matrices apply position offsets while preserving rotation for conic gradients

Testing

Added comprehensive tests covering:

• All position keywords and combinations
• Percentage positioning
• Mixed angle and position syntax for conic gradients
• The specific examples from the original issue
• Backward compatibility verification

All existing tests continue to pass, ensuring no regressions.

Fixes

Closes #[issue-number]

Fixes #3595

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[changeset-bot]

🦋 Changeset detected

Latest commit: 64f9876

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@tokens-studio/figma-plugin	Patch

Not sure what this means? Click here to learn what changesets are.

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