ProgressCircle: Fill color that indicates progress is not visible in HCM for all variants

[dineshy87]

🐛 Bug Report

Fill color must be set to Highlight in high contrast mode. Currently, the fill color is not shown in High Contrast Mode. Currently, the fill color is changed in the variable but not set using border-color property yet.

🤔 Expected Behavior

'Highlight' color must be used as fill color.

😯 Current Behavior

ProgressCircle-fillcolor-missing.mov

💁 Possible Solution

Setting border-color property with !important will apply Highlight as fill color for all variants. If !important is not preferred, it needs to be applied separately for indeterminate and overBackground variants using selectors for those variants.

Change this

@media (forced-colors: active) {
 .spectrum-CircleLoader-fill_7c1153 {
      --spectrum-loader-circle-medium-track-fill-color: Highlight;
 }
}

To this

@media (forced-colors: active) {
 .spectrum-CircleLoader-fill_7c1153 {	
     
      --spectrum-loader-circle-medium-track-fill-color: Highlight;
     
      border-color: var(--spectrum-loader-circle-medium-track-fill-color) !important;
 }
}

🔦 Context

Issue can be observed on Storybook and react-spectrum docs on all variants in HCM

🌍 Your Environment

Software	Version(s)
react-spectrum
Browser	Edge 108
Operating System	Windows

🧢 Your Company/Team

🕷 Tracking Issue (optional)

[majornista]

This may be fixed by #3827, specifically: https://github.com/adobe/react-spectrum/pull/3827/files#diff-c6bd97135bfde61a860f3ced8fc7b020fbd8c46441d9f3b686717ffb6bf66b61.

See: https://reactspectrum.blob.core.windows.net/reactspectrum/fb65c3f877af04fc1d67f1015d37581f1634bd48/docs/react-spectrum/ProgressCircle.html for comparison.

[dineshy87]

Verified. Closing this. Thanks