Reason for Stylebox BG color becoming darker on focus is unclear - alpha seems to increase with some formula

[hsandt]

I noticed that even if you create a custom theme where all the modes (normal, hover, focus, pressed, disabled) use the same StyleBox (it's a weird idea but apparently the Theme editor does it by default; but that's another issue), the focus with have a darker shade for the BG Color at runtime. Technically, the alpha on BG Color is set to 1 on focus. You can verify this by playing with the alpha and notice that the difference shows when non-focus BG Color have some alpha < 1 and Focus BG Color alpha is high enough (the formula takes into account the alpha set in the StyleBox).

I cannot explain what happens, and that prevents me from doing complete customization if I want. Like not changing BG color at all and only changing texture; unless I make sure to set all alpha to 1 to be safe.

Do you know which formula is used, and could this be documented? And above all, can we tune behavior to disable it, customize the alpha formula, etc. ?

Note: may not be visible with default theme. Try to create custom theme with default StyleBoxFlat, which uses transparent BG color, to make it show

[Calinou]

The focus stylebox is drawn on top of other styleboxes using the same alpha mode (i.e. straight alpha unless the Control uses a CanvasItemMaterial with the premultiplied alpha blend mode). It is not intended to replace underlying styleboxes entirely.

The reason the focus stylebox is drawn on top is to allow normal/hover/pressed styleboxes to remain visible for better accessibility and UI feel, while still allowing a focus outline to display at the same time. See also #2011 (which was closed, but I think should still be implemented).

[hsandt]

EDIT 2: oops, I misunderstood what you meant. Please just skip to EDIT 2. Kept original text in case I need to refer to my thinking steps later.

OK, very interesting, I was just having an issue where I wouldn't be able to get rid of the focus white outline whatever I did with the theme stylebox, and was precisely wondering if it was not done on a different layer.

Although I managed to accidentally not have the white outline on the screenshot above, where I used the styleboxes autogenerated by my theme. Could not repro when I needed it though!

Back to darkening, I think it's a great default, but I still need to control it (at the same time as white outline) for when I have prepared textures and color variants (via either texture change or modulate) so I consider the focus, hover, etc. states to be obvious from texture change already (I could even have a texture that contains an outline, in which case there would be double outline).

That said I'm using a StyleBoxTexture right now and didn't notice the darkening, even when using alpha < 1. So maybe it only affects StyleBoxFlat? So I'm re-enabling it myself via Modulate at the moment...

Note: My current issue right now is not only about the white outline, but also about the fact that focus is not distinguished from focus + hover, so I have a hard time feedbacking to the user that they are hovering something already focused... But that's another issue (and would require yet another Stylebox, so maybe too heavy).

EDIT: wait, the white outline just disappeared after I played a bit with alpha then reverted. What's going on? It's similar to https://godotengine.org/qa/48695/remove-unwanted-border-shadow-from-focused-styleboxtexture
I'm really lost between all the default behaviors I cannot enable or disable on my own...

EDIT 2:

OK I got it. The Focus stylebox is really drawn on top (I thought you were just talking about custom code adding darken/outline or something, not the actual stylebox), and its nature is very important. Setting it to StyleBoxTexture will make the outline disappear since it has no border parameter, unlike the other StyleBoxes.

I also see now that it was explained in the doc at the beginning of https://docs.godotengine.org/en/stable/classes/class_stylebox.html

So that should bring me customization power as I could just make the Focus a StyleBoxFlat that adds a transparent darker overlay, or an outline with empty fill, or both (currently I'm just using the outline since my focus/pressed is already darkening the thing).

So to sum up, instead of setting all my styleboxes to the same class:

• I set Disabled, Hover, Normal, Pressed styleboxes to the class I need, e.g. StyleBoxTexture
• I set Focus stylebox to just an overlay effect I need. The default StyleBoxFlat generated when pressing Override All in the theme editor provides the famous white outline (however, if you Clear it and create a New StyleBoxFlat in the inspector you'll have an ugly opaque gray... maybe that could be explained somewhere)

And now I can combine Texture and focus effect (outline), and also distinguish focus from focus + hover:

In theory, a StyleBoxTexture could also work for focus but you'd need to make it semi-transparent and only contain the effect you want on top.