Notice how there are multiple levels specified? This rule essentially has a specificity level of 3 (three levels define the target).
Applying the Named Style actually works in that it is applied as intended, but because the rule is so simple it is overridden/overruled by the more specific rule above.
.psc-MyStyle {
color: #00FF00;
}
To get around this, you can modify the named Style entry. Open the Named Style and in the color input field, add a space and the !important modifier. This will "force" the value to be used regardless of whatever rules are in place.
Alternatively, you could modify the theme files (progress-bar.css, specifically) to be less specific. Modifying the rule above to the following should alleviate your issue:
The required change was simple enough that I was able to knock it out myself, so the fix will be present in 8.1.23rc1 and eventually the stable build of 8.1.23.
One other thing, not really a bug, more of a feature enhancement. When you add the "!important" modifier to a color in the style class editor, the preview box stops displaying the color. You can see it in your screen shot above where you've entered "#00FF00 !important" (green) but the preview box is blank.
Because we run the color value through a function to display it in the Designer, but the function isn't a CSS function, it just takes String color values and returns what they would look like. !important is obviously not a color value so the function returns nothing.
No, because some people supply RGB colors like so: rgb(255, 0, 0). There are a whole bunch of different scenarios we would need to account for, but it would make the feature even more brittle and "expensive" long-term.