Changing style based on widget state

[nyadiia]

Describe the feature you'd like
In waybar at least, there is a way to set a "warning" and "critical" amount for the battery widget. I think it would be cool if we were able to declare thresholds and change the style based on them. For example, if CPU temperature goes above 80C, then the background could change to yellow and the text to black, and if it goes above 90, it could go to red ( maybe blink too, I haven't tested to see if animations are available ).

On my previous waybar configuration, I had it so the background would change at 30% battery and then start blinking red at 15%. It also turned a different color when I had my laptop plugged in.

Describe alternatives you've considered
I was thinking of using a script instead of the actual widget but I think passing in color codes would be worse than having it adhere to the style.css file

Additional context
waybar css for what I described

#battery {
  border-style: solid;
  border-width: 2px 2px 2px 0px;
	border-color: #f5c2e7;
  border-radius: 0px 20px 20px 0px;
  padding-left: 5px;
  padding-right: 10px;
  margin-right: 3px;
  transition: none;
  color: white;
  background: rgba(17, 17, 27, 0.8);
}

#battery.charging {
  color: #313244;
  background-color: #f38ba8;
}

#battery.warning:not(.charging) {
  background: #f38ba8;
}


@keyframes blink {
  to {
    background-color: #11111b;
    color: #f38ba8;
  }
}

#battery.critical:not(.charging) {
  background-color: #f38ba8;
  color: #313244;
  animation-name: blink;
  animation-duration: 0.2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}