Style rgb variables for error/warning/success

[gmartenscb]

Currently there are already style variables for the "alerts":

    --ha-alert-error-color: #db4437;
    --ha-alert-warning-color: rgb(255 166 0);
    --ha-alert-success-color: #43a047;
    --ha-alert-info-color: #039be5;

However, these are quite limited and do not provide rgba alternatives.
As well as the fact that the contrast color is missing, as far as I can tell.
Seeing these are variables, potentially even set by a Theme, these can vary.
A good example is the warning color, some themes make them more "yellow" and then white is not a viable text color.

The reason I am requesting this, is because I made a custom "update" card, which indicates if an update is up-to-date or not.
For those use-cases, I would like to use the "success" and "warning" colours, which I currently add myself.

    --update-unavailable-icon: rgba(67, 160, 71, 1);
    --update-unavailable-shape: rgba(67, 160, 71, 0.2);
    --update-available-icon: rgba(255, 166, 0, 1);
    --update-available-shape: rgba(255, 166, 0, 0.2);

I also provide a "feedback"-icon, for a custom "Reload all YAML"-card. Where I show a "success"-icon, and currently hardcode the text/icon color to white. But preferably this should be a css variable as well.

So I would suggest:

1. Adding rgba variations for the alert colours.
2. Adding rgba variations for the text for every alert colour.

[shannonhochkins]

I think this is nice however I've already provided the ability to create custom css variables through the ThemeProvider for this very reason that i figured the default wouldn't be exactly what everyone would need:

<ThemeProvider theme={{
    update: {
        unavailable: {
            icon: 'rgba(67, 160, 71, 1)',
            shape: 'rgba(67, 160, 71, 0.2)',
            ...
        }
    }
}} />

Then use var(--ha-update-unavailable-icon), does this help you?

[gmartenscb]

Yes and no. Cause those colours can potentially not adhere to any custom theme.
As soon as someone creates a theme where the success shape is not green but blue, and warnings are red, those variables will be completely out of context. Perhaps not likely, but rather be consistent from the start, rather than having to catch up later on.

As well as the "text color", for proper contrast. I can not assume that the --ha-alert-success color will never change. And if it does, I have no idea if my #fff for the text is still adhering to accessibility (a11y) standards. Therefore immediately supplying a variable for that, is quite beneficial and future proof. Both for maintainers, as well as theme authors.

[shannonhochkins]

Gotcha, makes sense, I'll implement something a bit smarter for those colours!

[shannonhochkins]

FYI these variables are now available as rgba from 0.1 through to 1 with 10 stops, there is also a contrast color but really, they're all white except the yellow one and they're not calculated dynamically currently, it's something i want to work on with the theme it's not where i want it to be