lukasoppermann / design-tokens

🎨 Figma plugin to export design tokens to json in an amazon style dictionary compatible format.
https://www.figma.com/community/plugin/888356646278934516/Design-Tokens
MIT License
972 stars 135 forks source link

Gradient angle not correct #294

Open jonbrooks opened 1 year ago

jonbrooks commented 1 year ago

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?

lukasoppermann commented 1 year ago

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?