Triangle enhancements break inherit as a border color

[sgenoud]

• polished version: 3.2.0

Mixin/Helper/Shorthand you were using and how you were using it:

triangle({
    pointingDirection: "top",
    width: `6px`,
    height: `6px`,
    foregroundColor: 'inherit,
})

What you are seeing:

A black box

What you expected to see:

A colored triangle

Reproduction:

https://codepen.io/anon/pen/vMVqyM

It seems that browsers (tested on Firefox and Chrome) do not support the border color inherit in the form

border-color: transparent inherit transparent transparent;

but do if they are declared by side.

I would propose to revert back the triangle logic to make it work for inherit (and make the bundle slightly bigger).

This is very useful when creating tooltip arrows who can inherit the color of the border of the tooltip.

[bhough]

@sgenoud We will have to chew on this. It is a more than negligible increase to bundle size when just using triangle (it actually brings 2 more dependencies on board) and will be more bloated than the original due to the addition of more directions. It also bloats the final CSS for 99% of the use cases.

We will revisit this in the near future to see if we can come up with a roughly size-neutral way of supporting this while keeping the size down for everyone else. Our apologies for not catching this use case and breaking it with the new version.

[sgenoud]

I have made an attempt at fixing the issue without changing much of your code. I have done some limited testing and it works as expected. Note that it relies on the order of the keys in the object (I am not sure this is an issue for you).

[bhough]

This has been addressed in v4 which is now in beta and will be released in the coming weeks:

npm install polished@next
yarn add polished@next