XWIKI-21254: Improve the border on buttons

[manuelleduc]

Jira: https://jira.xwiki.org/browse/XWIKI-21254

Fixes some limitations identified with the initial proposal.

1. the background of the default buttons is the same as their border on hover.
2. when the background is grey, the border of the default button is the same as the background
3. on the distribution wizard (and more generally when using the "old" secondary class) on button groups, the button borders are missing.

Proposed fix:
Make the border of primary buttons 10% darker than the default grey (@btn-default-bg) by default, and 20% on hover.

Some screenshots:

Screencast.from.11-09-2023.10.58.51.webm

[michitux]

This darken/lighten approach seems dangerous with dark color themes. Have you tested how this works with dark color themes? Also, the difference in border color seems very subtle. Is this the same kind of difference than what we currently have on the edit button (and similar buttons)?

[manuelleduc]

This darken/lighten approach seems dangerous with dark color themes. Have you tested how this works with dark color themes?
The "old" button less code was also containing the same use of darken/lighten, meaning that any dark them already had to introduce some custom css to have nice buttons.
While this is always nicer to make it easier to define new themes, I don't think this is mandatory.
I also did some tests with the "old" less code and the one from the PR using darkly and cyborg, slate and superhero. And I couldn't notice any bad impact of the proposed change on them.

Also, the difference in border color seems very subtle. Is this the same kind of difference than what we currently have on the edit button (and similar buttons)?

With the button gradient, there the gradient was 5% darker on hover. Here we have a 10% diff of the border on hover.
While subtle, my feeling is that this is enough to indicate to the user that the element is interactive.