0

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.

1 Answer 1

3

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.

2
  • Thanks for your reply and it really helped me, but how do I find same styling hooks for the current stage? Jul 24, 2023 at 5:43
  • @StackExchange you could download the current Lightning Design System files and search for .slds-path__nav .slds-is-complete, .slds-path__nav .slds-is-active and .slds-path__nav .slds-is-incomplete in order to know which properties can be setted via styling hooks and the related tokens. You'll see that both .slds-is-complete and .slds-is-active define a static value for background, while .slds-is-incomplete uses background:var(--slds-g-color-neutral-base-95, #f3f3f3);
    – RubenDG
    Jul 24, 2023 at 7:14

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .