Can we use styling hooks on lightning-progress-indicator ? Or how to change background color of steps?

Question

I have been trying to modify the standard color for the 'completed' steps on the lightning-progress-indicator LWC (path type): https://developer.salesforce.com/docs/component-library/bundle/lightning-progress-indicator/example

I have a custom LWC that contains a lightning-progress-indicator with dinamically generated lightning-progress-step.

Custom LWC HTML:

<template>
<lightning-progress-indicator current-step={currentStep} type="path" variant="base">
        <template for:each={steps} for:item="step">
            <lightning-progress-step label={step.label} value={step.value} key={step.label} ></lightning-progress-step>
        </template>
</lightning-progress-indicator>

Custom LWC JS:

import { api, LightningElement } from 'lwc';
import getStepsForPath from '@salesforce/apex/Controller.getStepsForPath';
export default class ProgressIndicatorPathTypeWithIteration extends LightningElement {

steps;
currentStep;

connectedCallback() {
    getStepsForPath({})
        .then(result => {
            if (result) {
                let stepsResult = JSON.parse(result);
                for(let step of stepsResult) {
                    if(step.isCurrent) {
                        this.currentStep = step.value;
                        break;
                    }
                }
                this.steps = stepsResult;
            }                
        })
        .catch(error => { });
   }
}

Custom LWC CSS:

:host {    
    --slds-c-path-color-background: var(--lwc-colorBackgroundAltInverse) !important;
    --slds-c-path-link-color-background: var(--lwc-colorBackgroundAltInverse) !important;
    --slds-c-path-nav-color-background: var(--lwc-colorBackgroundAltInverse) !important;
    --slds-c-path-item-color-background: var(--lwc-colorBackgroundAltInverse) !important;
    --slds-c-path-color-background-hover: var(--lwc-colorBackgroundAltInverse) !important;
    --slds-c-path-link-color-background-hover: var(--lwc-colorBackgroundAltInverse) !important;
    --slds-c-path-nav-color-background-hover: var(--lwc-colorBackgroundAltInverse) !important;
    --slds-c-path-item-color-background-hover: var(--lwc-colorBackgroundAltInverse) !important;
}

All of the css in :host or any custom class is completely ignored. How can I change the background color of the steps inside the progress indicator component?

Answer 1

For type="base" use the progressBarColorBackgroundFill design token to change the default color of the Progress indicator.

CSS

.custom-css {
  --lwc-progressBarColorBackgroundFill: green;
}

HTML

<template>
    <lightning-card>
        <lightning-progress-indicator class="custom-css" current-step="3" type="base" has-error="true" variant="base">
            <lightning-progress-step label="Step 1" value="1"></lightning-progress-step>
            <lightning-progress-step label="Step 2" value="2"></lightning-progress-step>
            <lightning-progress-step label="Step 3" value="3"></lightning-progress-step>
            <lightning-progress-step label="Step 4" value="4"></lightning-progress-step>
        </lightning-progress-indicator>
    </lightning-card>
</template>

UPDATE: The above example is for type="base" and the below example is for type="path" for progress indicator.

For type="path" use the colorBackgroundPathComplete and colorBackgroundPathCompleteHover design token to change the default color of the progress indicator.

CSS

.custom-css {
  --lwc-colorBackgroundPathComplete:#5a1ba9;
  --lwc-colorBackgroundPathCompleteHover:#7526e3;
}

HTML

<template>
    <lightning-card>
        <lightning-progress-indicator class="custom-css" current-step="3" type="path" has-error="true" variant="base">
            <lightning-progress-step label="Step 1" value="1"></lightning-progress-step>
            <lightning-progress-step label="Step 2" value="2"></lightning-progress-step>
            <lightning-progress-step label="Step 3" value="3"></lightning-progress-step>
            <lightning-progress-step label="Step 4" value="4"></lightning-progress-step>
        </lightning-progress-indicator>
    </lightning-card>
</template>