color: auto support

[willmcgugan]

trafficstars

I'm wondering if we should have a auto value for the color rule, which selects white or black, whichever has better contrast.

This could also work in conjunction with optional opacity.

color: auto 95%;
color: auto 75%;

I'm considering this because the default color theme pre-calculates such colors and leaves you to specifiy them as CSS variables, which seems redundant.

i.e.

background: $primary-background-lighten-2;
color: $text-primary-background-lighten-2;

But if we have color: auto, that can go on the base widget, and we can omit color entirely.

[willmcgugan]

@darrenburns @DrBenton Thoughts?

[darrenburns]

I'm kind of on the fence for this because I can see it (or something like it) has value, but at the same time I don't think my gut reaction when I see "color: auto" is that it would pick either black or white.

As it stands when you set a background colour, doesn't the text colour already automatically get set such that it's readable?

[willmcgugan]

I feel it makes sense since on virtual every interface, text is black or white (with a hint of alpha). Perhaps there is a better term than auto?

As it stands when you set a background colour, doesn't the text colour already automatically get set such that it's readable?

Not as such, but there is a precalculated contrasting color (black or white) for ever CSS color variable.

[github-actions[bot]]

Did we solve your problem?

Consider buying the Textualize developers a coffee to say thanks.

– Textualize

[olivierphi]

I'm not sure I totally understand the sense of that task... Does it mean that we should be able to write something like this? :slightly_smiling_face:

background: auto; /* = "black" for light theme, "white" for dark theme ? */
color: auto; /* the opposite of this ☝ ? */

...and then see background's auto be replaced with black, while color's auto would be replaced with white? (for light theme, at least - for a dark theme I guess it would be the opposite)

In which case, we would likely need to created a mapping of which properties refer to "background-ish" colours by default, and which ones to "text-ish" colours, so we can replace auto with the right colour?

But again, I might have got this completely wrong :sweat_smile:

[willmcgugan]

It would just be "color" that respects auto. Basically picking white or black, whatever has best contrast.

[github-actions[bot]]

Did we solve your problem?

Consider buying the Textualize developers a coffee to say thanks.

– Textualize