Change the color of lightning-progress-indicator for type=”path”

lightning-progressindicatorlightning-web-components

I want to have a custom color of the lightning-progress-indicator for the type="path" for all the type of stages i.e. complete , current and incomplete. I tried --lwc-colorBackgroundPathComplete and --lwc-colorBackgroundPathCompleteHover and it worked completely fine, but when I use other property --lwc-colorBackgroundPathCurrent or --lwc-colorBackgroundPathIncomplete they doesn't seems to work as expected. I also try to add !important after the property value but no result. Please tell me where I went wrong!

HTML

<lightning-progress-indicator type="path" current-step="2" class="custom_css">
        <lightning-progress-step label="Step 1" onclick={launchFlow} value="1"></lightning-progress-step>
        <lightning-progress-step label="Step 2" onclick={launchFlow} value="2"></lightning-progress-step>
        <lightning-progress-step label="Step 3" onclick={launchFlow} value="3"></lightning-progress-step>
        <lightning-progress-step label="Step 4" onclick={launchFlow} value="4"></lightning-progress-step>
    </lightning-progress-indicator>

CSS

.custom_css {
    --lwc-colorBackgroundPathCurrent: rgb(221, 0, 255)!important;
    --lwc-colorBackgroundPathComplete: #5a1ba9;
    --lwc-colorBackgroundPathCompleteHover: #7526e3;
    --lwc-colorBackgroundPathCurrentHover: #05020e;
    --lwc-colorBackgroundPathIncomplete: #ffff2d !important;
}

PS: Color value mentioned in the code is just for demo purpose, not the actual requirement.

Best Answer

Even with !important you cannot override default style due to Shadow DOM encapsulation:

Encapsulating the DOM gives developers the ability to share a component and protect the component from being manipulated by arbitrary HTML, CSS, and JavaScript.
[...]
CSS styles defined in a parent component don’t leak into a child

Usually SLDS provides Styling Hooks to customize component styling, but no one is listed for Pathnor for Progress Indicator.
Moreover the CSS custom properties you listed are not defined in SLDS Design Tokens so they shouldn't work.

Currenlty (Summer '23) you can only change slds-is-incomplete background color via styling hooks, i.e.

.custom_css {
    --slds-g-color-neutral-base-80: #ff0000; /* incomplete:hover */
    --slds-g-color-neutral-base-95: #ffff2d; /* incomplete */
}

Therefore, if you need to fully customize a path component, you could build your own component starting from blueprints.

Related Topic