Alert tag dropdown using wrong red color

[torkelo]

Hi,

Trying to align the theme / colors of apps to use the design system theme colors.

This red here is not using the theme.colors.error.main (and the acknowledge should be using theme.colors.warning.text if you want a good contrast text orange/warning color )

[teodosii]

@raphael-batte ideas here? should we change the color scheme?

[raphael-batte]

This red tone was here from very beginning.
Just checked Alerting and yes, probably we can use theme.colors.error.main for firing state and theme.colors.warning.text for acknowledge

[raphael-batte]

@torkelo I Played with this UI and think that the question about alert states has more complexity.

If we use theme.colors.error.main for Firing, probably we need to use theme.colors.warning.main for Acknowledge. But such an object looks low contrast even with max-contrast-white text inside. If we make text black, it will be different from other alert states. In addition to these, we have Silence state which is gray and green for Resolve.

Probably summ of these factors was the reason why OnCall uses for states Tag color palette.

Below visualized the comparison using two palettes. Tags - left, main palette - right.

[joeyorlando]

@raphael-batte is this issue still relevant?

[teodosii]

@joeyorlando should be addressed once we fully migrate to emotionjs. so far 1/3 of it it's been done in this PR
#4123

For reference only #2666

[joeyorlando]

going to close as I assume this was done in #2666. @grafana/grafana-oncall-frontend can you confirm?

[teodosii]

Yes, can be closed. OnCall uses now same coloring as Alerting, not the ones defined by grafana styles, but the ones used to display rules/alerts in Alerting