search

stamen / chartographer

https://stamen.github.io/chartographer/
MIT License
19 stars 4 forks source link

Use Figma acceptable colors #36

Closed aparlato closed 2 years ago

aparlato commented 2 years ago

Closes https://github.com/stamen/chartographer/issues/35

This PR converts all stylesheet colors to rgba on import as for whatever reason Figma seems to not accept hsl values in imported SVGs. I am not sure why this would be as Figma seems to say they support HSL color space, but since this tool only concerns itself with the visual output, this conversion feels fine as a solution.

This also adds some code that removes single quotes from gradient URLs which will also cause Figma to render the SVG as black.

@kelsey-taylor I tried this out with the problematic style you showed me as well as some others, but we probably want to do a few more tests here to make sure this is working appropriately for Figma as QA.

aparlato commented 2 years ago

Oh jeez, good catch! Let me dig a bit deeper here.

aparlato commented 2 years ago

@kelsey-taylor looks like the issue was the way we are handling ids in gradients. Certain characters like spaces, quotes, etc are invalid. I went ahead and replaced those characters in the layer ids we use for gradient ids in the SVG: https://github.com/stamen/chartographer/blob/1940241c7ac327765a12a3a58d61586c9c11c778/src/get-color.js#L135-L143

It's possible that we should block more special characters, but these are the known culprits.