Salesforce Experience Cloud - Path Style Accelerator

sfdc-dxp-pathOverrideStyles.css

/* ============= Tweak the Path bar ============ */

/* Change the text of each step in the path */
.slds-path__title {
    font-family: Open Sans;
    font-size: 1em;
}

/* Tweak the borders of every path item */
.slds-path__nav .slds-path-__item {
    border-width: 2px 2px 2px 2px;
    border-style: solid;
    border-color: #6772e5;
    border-image: initial;
}

/* Change the arrow styling of a chunk */
.slds-path__item::before, .slds-path__item::after {
}

/* Change the color and style of an incomplete chunk */
.slds-path__nav .slds-is-incomplete {
    background: #dad8e5;
    color: #FEF;
}
.slds-path__nav .slds-is-incomplete::before {
    background: #dad8e5;
    color: #FEF;
}
.slds-path__nav .slds-is-incomplete::after {
    background: #dad8e5;
    color: #FEF;
}

/* Change the color of a complete chunk */
 .slds-path__nav .slds-is-complete {
    background: #6772e5;
    color: #fff;
}
 .slds-path__nav .slds-is-complete::before {
    background: #6772e5;
    color: #fff;
}
 .slds-path__nav .slds-is-complete::after {
    background: #6772e5;
    color: #fff;
}

/* Change the color of an current chunk */
 .slds-path__nav .slds-is-current {
    background: #6772e5;
    color: #fff;
}
 .slds-path__nav .slds-is-current::before {
    background: #6772e5 !important;
    border: 0px;
    color: #fff;
}
 .slds-path__nav .slds-is-current::after {
    background: #6772e5 !important;
    color: #fff;
}
 .slds-path__nav .slds-is-current .slds-path__link {
    color: #fff;
}

/* Change the color of an active chunk */
 .slds-path__nav .slds-is-active {
    background: #6772e5 !important;
    color: #fff;
}
 .slds-path__nav .slds-is-active::before {
    background: #6772e5 !important;
    color: #fff;
}
 .slds-path__nav .slds-is-active::after {
    background: #6772e5 !important;
    color: #fff;
}

/* Tweak the first special chunk of the path */
 .slds-path__nav .slds-is-current:first-child {
    border-top-color: #6772e5;
    border-bottom-color: #6772e5;
    border-left-color: #6772e5;
    border-left: 0px;
}