[Style] Fixed borders and background drawing for components

[tfabretti]

I realized drawing semi-transparent borders and background was a bit broken so I decided to compare with the online builder and find ways to make the two platforms look similar. What I did :

• Decoupling of background and borders drawing (so we can have one and not the other)
• Background is no longer drawn underneath the borders (more on that later)
• Addition of skips if the opacity is at 0
• Addition of support for differently sized borders

Here is my test image on Heaps :

And now the same test on the online builder :

There is one major difference : the background is not drawn underneath the borders, on Heaps. It makes much more sense to me to do it this way, as you'll always have the same visual for two semi-transparent borders having the same settings, even if the background is different. It's also the reason I don't have the gradient bug on Heaps. The online builder does weird stuff with the gradient background being drawn underneath the borders, adding it to the color of each border's part.

The test buttons are :

• First column : no border radius. 2 borders have the same size, one is bigger and one is 0. The last 2 backgrounds use a gradient.
• Second column : same as the previous except there is a border radius smaller than the bigger border but greater than the others.
• Third column : Two borders have the same side with a radius greater than them. The other two also have the same size but the radius is smaller than them.

If you think I missed test cases, tell me so I can check it works alright ! <3

[ianharrigan]

amazing, thanks loads for this!