Yaru: Inconsistent focus rings, dashed vs. solid

[matthewpaulthomas]

yaru-theme-* 18.10.4, Ubuntu Cosmic

Some buttons, menus, and tabs have a dashed focus ring…

…while other buttons, and all text fields, have a solid focus ring.

It’s not clear whether this is deliberate, but it looks inconsistent.

In the forum, frederik-f wrote:

This one comes from a limitation in gnome-shell. A dashed focus ring is not possible there. So either we change the gtk focus ring to be solid, or we leave it as it is. There are several differences between gnome shell and the gtk theme which we accepted as a design limitation and/or a possibility to divide the the shell from the apps. :man_shrugging:

However:

• That does not explain why the focus rings for text fields and buttons are inconsistent within the same window.
  

• The wiki explains that for sliders, “we had to use circles for the knob, because Gnome Shell does not support squ[ir]cles. Although this limitation only applies to the shell, we wanted the same style in both GTK and the shell.” That is solid logic — and it applies much more to focus rings than it does to sliders, because focus rings are seen much more often.

[[Originally reported in the Yaru forum](https://discourse.ubuntu.com/t/call-for-participation-an-ubuntu-default-theme-lead-by-the-community/1545/1750).]

[Feichtmeier]

@matthewpaulthomas
In gtk3 apps:

All entries havea solid focus ring (including those with +/- buttons in them)
All other elements have a dashed focus ring

In the shell: only a solid ring is possible. Dashed borders don't exist there.

Firefox:
Firefox URL bar is not themeable
So either everything becomes orange again, including the text selection (they only suck up one colour and then set it as an accent colour) or live with the blue URL bar
Again: Firefox is a mess when it comes to theming. Since we knew this we opened the issue on their side.

Unifying solution for gtk3, shell and Firefox:
Blue solid ring for all three
But I know this will bring up other problems we discussed before. Like concealing the shadow of the pressed buttons and blue looking strange beside orange (gtk3 pathbar and stackswitcher .linked buttons)

[Feichtmeier]

We need to link the old discussions in here

https://github.com/ubuntu/yaru/pull/695

https://github.com/ubuntu/yaru/pull/566

[clobrano]

One more detail. We went for dash focus ring because, above all on buttons, makes the UI lighter according to our point of view (above all on buttons)

[clobrano]

That does not explain why the focus rings for text fields and buttons are inconsistent within the same window.

good point. Entries can have dashed focus ring

[clobrano]

What do you think about solid focus for buttons?

[clobrano]

This is a "side effect", but we could actually use orange in this case since it's not inside the green background anymore

[matthewpaulthomas]

What do you think about solid focus for buttons?

Looks good to me.

[clobrano]

thanks @matthewpaulthomas, however I later observed (just forgot to update this bug, sorry), that other widgets have a dashed focus ring (e.g. check/radio buttons, sliders), where the solid focus ring will be really heavy. Basically, only entries have the solid one.

[Feichtmeier]

We could also consider a blue focus ring for all elements in shell and gtk theme (even for green and red buttons) :man_shrugging:
At least try it one time before 19.4

[clobrano]

Sure we could, I am curious to see how this fits with both headerbar's color and success/destructive ones

[Feichtmeier]

So, since the dashed line is not possible in the shell theme, and the solid one is too heavy in the gtk theme, what shall we do?

[clobrano]

I suggest to keep it as it is on our side and investigate if there's something we can do upstream to remove the limitation. What do you think?

[Feichtmeier]

The merge closed it :D sorry

[clobrano]

I think we can actually close it now, there is nothing we can do here to improve it