divriots / story-to-design

Keep your Figma libraries true-to-code in a single click.
https://story.to.design
26 stars 0 forks source link

When css border properties are separated - the border is missing #175

Open dalexiev00 opened 1 month ago

dalexiev00 commented 1 month ago

Describe the problem

I noticed that when we define the properties of a border separately (like border-width, border-color, border-style) in figma the border is missing, but for short definition (like border: 1px solid black) it's perfectly fine. Could you check if you can do something about it? I can share more info if needed.


Bug report identity: Please do not edit

Task path: ep257UoJEMTnEDJeFpEl/1bA1JLkLYX3xr40WMSdS/wpa2qm1ywpfin

gluck commented 1 month ago

Hi @dalexiev00 Issue doesn't really come from the fact that properties are separated, but that figma doesn't support mixed colors borders, so we can't fully implement it. In your case maybe a bottom-only border (in figma) would be the closest to what you see in the web, but if you look closely on the edges, it will be different.

On the web you have:

image

Such border is pretty tricky to implement exactly on figma. We can probably use diamond gradients to make it work, so I'll have a look eventually, but just so you know, independent properties work just fine.