Border - separated borders override colors

[SuperHackerKev]

Seperate border override each other
The bug results in wrong colors being applied to seperated borders on a rectangle

To Reproduce
Steps to reproduce the behavior:

1. create 4 tokens for each side of a rectangle with different colors - but 0 width for all sides except one!
2. apply each token to each side of the rectangle
3. witness that the last token defines the color for the only visible border

Expected behavior
The only visible border should keep its defined color

Screenshots or Screencasts

[six7]

Thanks, agree this would make it easier to work with 🙏

[NuthanHyma]

Figma File
Test File

[SamIam4Hyma]

This issue is partly due to Tokens Studio appears to be supporting independent colors for border, but under the hood, Figma doesn't support this yet, so the plugin is passing through the last color applied. We should look at this the next time we look at border under the hood, but it's a combo of known issue needing to be better documented based on the Figma limitation.

I will label as such and remember to add it to the new technical docs. @SuperHackerKev the workaround is to have the token with the value be applied last and make some notes in your token sets and component libraries until we get this fixed.

[JAspeling]

Is there a workaround for this in the meantime?

Edit: For now I'm creating a bottom-border manually with another rectable and the auto-layout. And then I style that rectangle as I would want the border for the different themes

[SamIam4Hyma]

@JAspeling I'm going to close this issue for now as I've added these notes to the new docs which should be live soon! Thank you so much for bringing this to our attention so we can help others out!

Feel free to email me a copy of your physical mailing address and I'd love to send you some Tokens Studio stickers in gratitude of your time and contribution to our docs.

sam@tokens.studio

p.s. For independent styling like you mentioned above, you can always "fake it" with "border" sub-elements like you mentioned. You could try a frame at 0px height or width with a stroke of its own at the width you need. Then add notes for your engineers on how you had to "hack" the mockup to get the idea across, but remind them to build properly. hehe

[SamIam4Hyma]

Added this as a known issue to the new technical docs, closing as this is expected behviour blocked by Figma