SLDS Path Blueprint Is Missing Background Color For `current` Elements Which Are Not `active`

[SethAngell]

When using the SLDS Path Blueprint, if you have a step which is current but not active, the color of the element beneath the path element shows through in the triangular portion on the right side.

This can be hard to notice at first glance

but by switching the background color it becomes apparent.

This stuck out to me, as I'm working on a new LWC with SLDS2 in mind, and noticed that the grey background is poking through

[SethAngell]

If anyone else stumbles across this, the following (very hacky) css seems to resolve the issue for now.

.slds-path__nav li:not(.slds-is-active).slds-is-current:first-child::before {
    background-color: var(--slds-g-color-surface-container-1);
    border-top-color: var(--slds-g-color-brand-base-30);
    border-top-width: 1px;
    border-top-style: solid;
}

.slds-path__nav li:not(.slds-is-active).slds-is-current:first-child::after {
    background-color: var(--slds-g-color-surface-container-1);
    border-bottom-color: var(--slds-g-color-brand-base-30);
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

.slds-path__nav li.slds-is-active:hover:first-child::before,
.slds-path__nav li.slds-is-active:hover:first-child::after {
    background-image: none;
}



.slds-path__nav li:not(.slds-is-active).slds-is-current:hover:first-child::before {
    border-top-color: var(--slds-g-color-brand-base-20);
}

.slds-path__nav li:not(.slds-is-active).slds-is-current:hover:first-child::after {
    border-bottom-color: var(--slds-g-color-brand-base-20);
}

.slds-path__item::before {
    transform: skew(30deg) translate3d(0, 0, 0);
}