design-tokens icon indicating copy to clipboard operation
design-tokens copied to clipboard

Gradient angle not correct

Open jonbrooks opened this issue 1 year ago • 1 comments

We are seeing linear gradients with 90 degree angles being exported as gradients with 133 degree angle instead:

The gradient according to Figma is: Screenshot 2023-11-29 at 11 42 15 AM

and the css according to Figma shows 90 degrees: Screenshot 2023-11-29 at 11 46 40 AM

But the exported json is:

      "violet": {
        "description": "my gradient",
        "type": "custom-gradient",
        "value": {
          "gradientType": "linear",
          "rotation": 133.3367478296384,
          "stops": [
            {
              "position": 0,
              "color": "#000000ff"
            },
            {
              "position": 1,
              "color": "#ffffffff"
            }
          ]
        }
      },

In this code we see 315 is being added to the result (and this is not part of the linked SO thread on calculating the rotation). Removing this addition of 315 results in the correct result of 90 degrees for the exported angle. Is there a reason 315 is being added here?

jonbrooks avatar Nov 29 '23 19:11 jonbrooks

Hey @jonbrooks,

to be honest, it has been so long since I wrote the code, I have no idea anymore.

If removing the 315 fixes it, feel free to send a PR. Figma may have changes something by now, maybe it was a bug before or something.

Could you also get the x and y coordinats for 2deg, 90deg, 157deg, 286deg and 369deg so we can check the calculation afterwards? Just so we don't break anything?

lukasoppermann avatar Nov 30 '23 21:11 lukasoppermann