Custom color of Lightning progress indicator not working

Question

HTML

<template>
    <lightning-card title="test color">
        <lightning-progress-indicator type="path" current-step="2" variant="shaded" 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>
    </lightning-card>
</template>

JS:

import { LightningElement, track, api } from 'lwc';
import { FlowAttributeChangeEvent } from 'lightning/flowSupport';

export default class LightningPath extends LightningElement {
    @api showFirstScreen = false;
    @api showSecondScreen = false;
    @track step = 4;


    launchFlow(event) {
        this.step = event.target.value;
        console.log('Path value', this.step);
    }
}

CSS

.custom_css {

    --lwc-colorbackgroungPathCurrent: red;
    --lwc-colorbackgroungPathIncomplete: purple;
    --lwc-colorBackgroundPathCurrentHover: red;
    --lwc-colorBackgroundPathComplete: red;
    --lwc-colorBackgroundPathCompleteHover: red;
    --lwc-colorBackgroundPathIncompleteHover: purple;
}

Previouly color was working after summer 23 release it is not working. Please suggest some other way to change the color of steps.

Answer 1

Make sure you are using the correct variable names (in camelCase):

Use --lwc-colorBackgroundPathCurrent instead of --lwc-colorbackgroungPathCurrent and --lwc-colorBackgroundPathIncomplete instead of --lwc-colorbackgroungPathIncomplete

Answer 2

Here is the custom CSS that you need to add to your code.

.custom_css {

    --lwc-colorBackgroundPathActive: green;
    --lwc-colorBackgroundPathActiveHover: gray;

    --lwc-colorBackgroundPathComplete: yellow;
    --lwc-colorBackgroundPathCompleteHover: black;   
    
    --lwc-colorBackgroundPathIncomplete: white;
    --lwc-colorBackgroundPathIncompleteHover: blue;

}

For the currently selected path you need to use --lwc-colorBackgroundPathActive and for the hover you need to use --lwc-colorBackgroundPathActiveHover.

For the Incomplete, you can use the --lwc-colorBackgroundPathIncomplete and --lwc-colorBackgroundPathIncompleteHover. I have tried to use this but some css will override it.