New border fade utilities are overridden by directional border utilities.

[jonrohan]

Describe the bug
The new border fade utilities #713 don't change the colors of the border when used with directional border utilities.

To Reproduce

Works as expected like this:

<div class="border border-white-fade-15">This works</div>

Doesn't work like this:

<div class="border-top border-white-fade-15">This doesn't work</div>

Additional context

I think we need to move the border color utilities below this section of directional breakpoint border utilities https://github.com/primer/css/blob/master/src/utilities/borders.scss#L59-L108

[simurai]

I think we need to move the border color utilities below this section of directional breakpoint border utilities https://github.com/primer/css/blob/master/src/utilities/borders.scss#L59-L108

👍 Moved the colors down in #727

In the meantime you could remove all sides except the top:

<div class="border border-white-fade-15 border-left-0 border-right-0 border-bottom-0">

But yeah, it's a bit lengthy.