Clarity: Cannot customize color of progress bars

[dexfab]

Describe the bug

Progress bar color cannot be changed through CSS anymore

How to reproduce

Got to https://clarity.design/documentation/progress#color
Try changing the color of the progress through CSS, nothing happens.

Expected behavior

It should be possible to theme the progress bar by changing its color.

Versions

App

• Angular: 9
• Clarity: .

Device:

• Browser: chrome

[gnomeontherun]

Need to investigate, it used to work but might be an issue with some host bindings.

[dexfab]

Hi, any updates on this issue? We have a theme and this is the only component we cannot customise with our branding.

[BFergerson]

I'm also experiencing this issue. I've tried

<div class="progress top" style="color: black !important;">
    <progress style="color: black !important;" value="40" max="100"></progress>
</div>

Yet, the progress bar remains blue.

[macharius40]

Any news about this issue? I have the same problem. It doesn't work when I modify the color in Chrome dev tools. It doesn't work also on Firefox but it works on IE 😅

[prakashjp123]

Below code worked for me in chrome and firefox.

<div class="progress-block" id="custom-progress-bar">
    <clr-progress-bar clrValue="10" clrMax="20"></clr-progress-bar>
</div>

#custom-progress-bar {
    --clr-progress-bg-color: lightgray;
    --clr-progress-default-color: orange;
}

[bdryanovski]

Here are the properties that are related to the progress-bar

      --clr-progress-default-color: var(--clr-color-action-600);
      --clr-progress-alt-color-1: var(--clr-color-success-400); // green
      --clr-progress-alt-color-2: var(--clr-color-danger-800); // red
      --clr-progress-alt-color-3: var(--clr-progress-alt-color-2); // red
      --clr-progress-bg-color: var(--clr-color-neutral-200);

If you need to change the color you need to change the property of:

 .progress>progress::-webkit-progress-value

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.