Tweak error and warning colors and fix StatusWarning icon visibility on light themes

[rsubtil]

Fixes #87987

Originally this PR focused on fixing visibility of the StatusWarning, but after successive iterations and positive feedback, a few more relevant alterations were made:

• Removed StatusWarning and StatusError icons from the exclusion list to be able to convert its colors
• Set error_color to the same color used in Node3D (#BF5A50 -> #CD3838)
• Shift warning_color to a more orange saturated hue (#A69042 -> #D18F19)
• Tweak EditorLogFilterButton appearance (more comparison screenshots at Tweak error and warning colors and fix StatusWarning icon visibility on light themes #88058 (comment)):
  • Increased icon normal color opacity from 40% to 80%
  • Removed icon hover color modulate, making it now the original color, aka 100%
  • Lightened gray brackground on pressed state by 50%

---

Comparison screenshots

Before	After

[adamscott]

As simple as that! Thanks @rsubtil !

[akien-mga]

On the second "After" screenshot, the error color also seems to lack contrast when the button is not toggled.

The toggle color itself seems to create contrast issues IMO. So I think we might need a bit more work than just special casing StatusWarning.

[Calinou]

The toggle color itself seems to create contrast issues IMO. So I think we might need a bit more work than just special casing StatusWarning.

The icon's opacity is decreased when the button isn't pressed – we probably need to lessen this effect, especially on light theme.

[rsubtil]

On the second "After" screenshot, the error color also seems to lack contrast when the button is not toggled.

I've tried to remove the exclusion for this icon (StatusError) too, but the effect is too subtle to make a significant impact:

Before	After

But tweaking the icon's opacity as suggested by @Calinou does seem to fix the contrast issue. Here's the changes I've made (only on light mode and for the EditorLogFilterButton type), and comparison shots:

• Increased icon normal color opacity from 40% to 80%
• Reduce icon hover color modulate from 145% to 125%

(I've also included the hover state as I noticed it looked bad for the yellow icon)

	Normal	Hover	Pressed
Before
After

[akien-mga]

(I've also included the hover state as I noticed it looked bad for the yellow icon)

Yeah I was about to point out that this is still lacking contrast. Overall the colors for both StatusError and StatusWarning on the light theme seem too washed out / desaturated IMO.

And the pressed button color (blue-grayish) also seems too dark / dull IMO, at least from close up, maybe in context it feels more appropriate.

[rsubtil]

Yeah I was about to point out that this is still lacking contrast. Overall the colors for both StatusError and StatusWarning on the light theme seem too washed out / desaturated IMO.

• For StatusError we could make a color conversion for the same color being used for Node3D, which is a more saturated red.

• For StatusWarning, the color is already being converted. Increasing its saturation doesn't work, as yellow will always be problematic on white, and it affects other elements adversely. But, I liked the effect when I shifted to a more "orange" hue.

And the pressed button color (blue-grayish) also seems too dark / dull IMO, at least from close up, maybe in context it feels more appropriate.

The effect is indeed much less pronounced on the dark theme, likely because of the already dark blue tint overall:

Dark	Light

I think reducing greatly the grayish tint works well for light themes, as the blue border is already a clear indicator of the button being toggled.

---

All in all, the changes are now as follows:

• Removed StatusError from the exclusion list to convert its colors
• Set error_color to the same color used in Node3D (#BF5A50 -> #CD3838)
• Set warning_color to a more saturated color, and with a more orange tint (#A69042 -> #D18F19)
• (On the output filter buttons only)
  • Increased icon normal color opacity from 40% to 80%
  • Removed icon hover color modulate (now original color, aka 100%)
  • Lightened gray brackground on pressed state by 50%

	Normal	Hover	Pressed
Before
1st iteration
2nd iteration

Warning

This changes some core colors used throughout all the editor. The error_color is subtle, but the warning_color is more noticeable:

Before	After

[Mickeon]

I dig the orange hue for the warning color in the light theme. It's more contrasted.
I am not sure about a few other changes that also affect the default theme, unless extremely small, as they may affect more places that one may think at a glance. Needs some testing.

[Calinou]

The new warning color is great! I've always found the previous warning color less than ideal on a light theme, so this is a big improvement.

[Calinou]

I suggest using the Color(float, float, float) form which avoids storing a string in the binary, and therefore reduces binary size ever so slightly. Individually, it might not sound like much, but I did this on all colors in the codebase a while ago and it reduced binary size by a non-negligible amount.

Color::hex(0xrrggbbaa) might reduce binary size further by using 1 integer instead of 3 floats as parameters, but that should be evaluated later.

[KoBeWi]

Color::hex(0xrrggbbaa) can be shortened to Color(0xrrggbbaa), no? It's a direct replacement for hex string.

[Mickeon]

My assumption was that the compiler was smarter than this but I suppose that these are among the many things to keep in mind. I did not expect for the Colors to be basically generated on the spot even for constant Strings.

By the way, I may be wrong but I believe the bits are reversed in pure hex: 0xaabbggrr.

[rsubtil]

I went with the 3-float approach then, but I agree reducing it in the future to a single hex int sounds interesting, especially for iterating on the colors and not having to constantly convert them to a [0, 1] float range.

[Calinou]

By the way, I may be wrong but I believe the bits are reversed in pure hex: 0xaabbggrr.

The ARGB (not ABGR) convention was used in Godot 3.x, but Godot 4.0 switched to RGBA.

[rsubtil]

Since the new changes ended up affecting the overall interface significantly, and there was very positive feedback on the warning color changes, I've edited this PR description to better describe the changes done, along with some new comparison screenshots.

[akien-mga]

Looks good to me.

[akien-mga]

Thanks!