Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Better support for radial gradient #202

Open
Yoksy opened this issue Apr 20, 2022 · 3 comments
Open

Better support for radial gradient #202

Yoksy opened this issue Apr 20, 2022 · 3 comments
Labels
help wanted Extra attention is needed

Comments

@Yoksy
Copy link

Yoksy commented Apr 20, 2022

Hello Lukas, thank you for this amazing plugin, its helping greatly my team settings up design tokens from figma to our apps!

I have noticed that the position parameter is missing when exporting radial gradient.

Example : radial-gradient(100% 100% at 50% red 0, green 100%) where 100% 100% at 50% is the position param.

Current export look like this:

"primary-radial": {
  "description": "",
  "type": "custom-gradient",
  "value": {
    "gradientType": "radial",
    "rotation": 87.7787395349543,
    "stops": [
        {
            "position": 0,
            "color": "red"
        },
        {
            "position": 1,
            "color": "green"
        }
    ]
},

And the exported CSS variable look like this : radial-gradient(red 0%, green 100%)

Could you look into it ? Thanks.

@nmereus-turner
Copy link

I have a similar issue with linear gradients not exporting the variables properly.

Export: "50% overlay": { "description": "", "type": "custom-gradient", "value": { "gradientType": "linear", "rotation": 360, "stops": [ { "position": 0, "color": "#000000cc" }, { "position": 0.53, "color": "#00000000" } ] },

Is exporting this as variable: $gradient-gradient-50-overlay: [object Object];

@lukasoppermann lukasoppermann added bug Something isn't working help wanted Extra attention is needed and removed bug Something isn't working labels May 16, 2022
@lukasoppermann
Copy link
Owner

Hmm, this does seem wrong.

So the position you get is basically 0% and 100%.
Can you please attach a picture of how the gradient looks in figma?

@Yoksy
Copy link
Author

Yoksy commented May 20, 2022

So the position you get is basically 0% and 100%.

Yes

Can you please attach a picture of how the gradient looks in figma?

figma-bug-radial-1
figma-bug-radial-2

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

3 participants