Fix Caps-lock-is-on color in light theme

[sergio-costas]

When a Polkit dialog is open to ask for the password, if the user activates the Caps Lock, a message appears under the text entry notifying that it is active, to warn the user.

In dark theme, this message is painted in yellow, which is fine because it gives a good contrast against the background; but in litgh theme, a slightly darker yellow is used, which has poor contrast. This goes against the accessibility (A11Y) requirements of having, at least, a 4.5/1 contrast ratio in text. This only happens in Yaru, because in upstream Gnome theme, the dialog is always dark, no matter what style (dark or light) is selected by the user.

This patch fixes this by setting the WARNING text color to black in light themes.

[juanruitina]

Actually, contrast actually needs between non-large text and background needs to be 4.5:1. Shall we use the text colour, instead of hardcoding black?

[sergio-costas]

@juanruitina Fixed the value. About using the text color, the problem is that the "warning_bg_color" and the "warning_color" are defined much before the current text color is defined...

[sergio-costas]

Also, did a change, because I realized that only the color for the text should be changed...

[3v1n0]

Is this affecting upstream too? If so, let's handle that there.

Otherwise, please add a comment to mention that this is a yaru-diff

[sergio-costas]

It only affects Yaru. In Gnome theme, the dialog is always dark, no matter if the style is dark or light, so the yellow always works fine. I'll add a comment in the description.

[3v1n0]

It only affects Yaru. In Gnome theme, the dialog is always dark, no matter if the style is dark or light, so the yellow always works fine. I'll add a comment in the description.

I see, however it seems the change is too generic, as the colors should be kept as they are, and in case we should override them in the dialogs

[3v1n0]

contrast actually needs between non-large text and background needs to be 4.5:1. Shall we use the text colour, instead of hardcoding black?

I'm fine using a valid contrast color, but I don't think black is the right one here, especially since it can be potentially be re-used in other places.

To get a properly contrasted color, @sergio-costas, you can generate one using the optimize-contrast sass-utils function.

[juanruitina]

@3v1n0 I disagree on this one. I do think we should use same colour as body text here as the simplest solution. There's no such thing as dark yellow, brown doesn't carry sufficient semantic meaning, and orange can't be used as a semantic colour in Ubuntu for obvious reasons.

[ochi12]

Hi guys I would like to suggest to use yellow background too. use the mixin function to mix the base background and the current fg color because it is a warning label and not any normal text. or using a darkened variant of the current yellow using darken.

but what I would suggest for the best is to use a mixed $warning_bg color and background color for the text's background just like in warning labels when trying to restart while there are unsaved changes in the system.

This is the best way we can preserve colors instead of forcing yellow to go dark

[3v1n0]

This is the best way we can preserve colors instead of forcing yellow to go dark

Yeah, that's nicer IMHO, although we should fix the colors there too, to have proper contrast.

[juanruitina]

I'm OK with using that background if we want to preserve semantic colour. Text colour needs to be darkened so it provides at least 4.5:1 contrast on that light yellow background. (Using darkened yellow is fine for text as long as there's a proper yellow background)

[sergio-costas]

@juanruitina Mmm... so then, adding a "warning_bg_color" and using normal text color and that "warning_bg_color" in the dialog...? That would require one patch for yaru, and another for gnome shell...

[Feichtmeier]

Hi guys I would like to suggest to use yellow background too. use the mixin function to mix the base background and the current fg color because it is a warning label and not any normal text. or using a darkened variant of the current yellow using darken.

but what I would suggest for the best is to use a mixed $warning_bg color and background color for the text's background just like in warning labels when trying to restart why there are unsaved changes in the system.

This is the best way we can preserve colors instead of forcing yellow to go dark

I would rather change the yellow 🟡 tone to become darker and more saturated

[ochi12]

Hi guys I would like to suggest to use yellow background too. use the mixin function to mix the base background and the current fg color because it is a warning label and not any normal text. or using a darkened variant of the current yellow using darken.
but what I would suggest for the best is to use a mixed $warning_bg color and background color for the text's background just like in warning labels when trying to restart why there are unsaved changes in the system.

This is the best way we can preserve colors instead of forcing yellow to go dark

I would rather change the yellow 🟡 tone to become darker and more saturated

Currently the general st icon warning color class feels saturated. Observed it in the battery icon. I always mistake the yellow bar for a red. I think it is also a good opportunity to open another topic or a separate PR to also tweak it. Tho not related to this discussion, it quite a need to mention too

[sergio-costas]

Ok, did some changes and now it uses the normal text color in light themes

[3v1n0]

Thanks the change is better, I think we should discuss this upstream though, since it's affecting both (I mean light theme is not default, but it can be enabled there too).

And I'd still go using the background in both cases as done for the logout.

[juanruitina]

Thank you Sergio, this addresses the accessibility concerns.

A quick mockup for comparison of the discussed options:

I darkened text yellow in the third option right on Figma for 4.5:1 contrast to #9F5E00. If we were to go for this, at could be desirable to generate these shades programatically (as you @3v1n0 did for accent colours), given we don't seem to have a comprehensive palette from which to pick it.

It would be great to look closer into this and come up with a consistent approach to alerts for both Yaru and Yaru.dart.

[3v1n0]

Yeah, let me see where I can get...

[ochi12]

I much prefer having a background that darkening the yellow color.

[sergio-costas]

Thanks the change is better, I think we should discuss this upstream though, since it's affecting both (I mean light theme is not default, but it can be enabled there too).

But in Gnome upstream the dialogs are always dark, no matter what theme is selected.

[sergio-costas]

BTW, just setting the background color results in this

so more work would be needed to reduce the size of the St.Label to the same size than the St.Entry, vertically center the text, add rounded corners...

[sergio-costas]

@3v1n0 So... this can be closed due to #4329 , isn't it?

[juanruitina]

Just as a clarification: I don't love that we use that darkened yellow alone because the semantics of it are barely noticeable and these tend to work better together with a more obviously yellow background, as discussed above; but it's an improvement because it's at least accessible. The accessibility bug is fixed, a nicer visual might be still worth exploring.