Mentions display does not follow the border-radius set at skin / color theme level

Thanks Anca! That's also an issue we stumbled upon when discussing this PR with a proposed solution for XWIKI-21584.

I agree with your opinion, we now have variables for this at the skin level, so they should be used in all places where we could expect them to be used.

Since they're both supposed to be used inline (badges & labels), I would say that the hardcoded paddings are likely to be a mistaken approach. I would go for em based spacing

Bootstrap 5 also uses em spacing for badges & labels.

It's interesting, though, badges in bootstrap (the version currently used by XWiki) have their own border-radius, the @badge-border-radius , while labels have a fixed radius of 0.25em, so they're not really aligned with the rest of the borders:

I guess the best here would be to use the @badge-border-radius, to align the design of mentions with badges.

As for paddings of these items:

• labels have paddings based on the font-size, in ems
• badges have fixed, hardcoded paddings.

Since they're both supposed to be used inline (badges & labels), I would say that the hardcoded paddings are likely to be a mistaken approach. I would go for em based spacing.

Note that subsequent versions of bootstrap (5) don't use 2 different names for these items but a single one, labels.

More generically, the whole layouting of the mention is hardcoded:

• as far as I can see paddings sizes are also hardcoded, I am not sure it should be the case (since it's for an inline box, I think I would expect the padding to be dependant on text size, but size of whitespaces is a complex topic, some should be text-dependant, some should not)
• more generically, the style of the mentions is probably better off as a copy of the style of bootstrap badges or labels, at least in terms of border radius & probably, padding.

See also https://getbootstrap.com/docs/3.3/components/#labels and https://getbootstrap.com/docs/3.3/components/#badges .