The Button component fails to render a correct font-size

[afercia]

Looking at #627 I'm building a page in the standalone yoast-component app to render all the buttons, as I think we're at a point where checking their behavior and visual appearance would be beneficial. While at it, I've noticed the Button component font-size is not applied correctly.

The only difference between BaseButton and Button should be that the latter has a smaller font-size (0.8rem). However it seems this fails, because of the order the CSS classes are applied to the button.

Right now, all buttons have the same font size:

The CSS class with font-size: 0.8rem; gets applied first and then overridden by the one with font-size: inherit;.

[afercia]

Same for the LinkButton, which is an a element styled like a button:

[afercia]

I have a quick PR ready for this but maybe we should discuss a bit what's really needed here. /Cc @IreneStr

Currently, the buttons always inherit the font-size from the parent and ancestors. This may or may not be desired, but seems to work in most of the cases. For example in WordPress this would inherit a 13 pixels font-size in most of the cases.

On the other hand, I'm not sure what the original intent of font-size: 0.8rem; is, as this value translates to a computed font-size of 12.8 pixels. At the very least, it should be 0.8125rem.

With a proper fix in place, the base buttons would keep a font-size of 16 pixels while all the other ones would have a font-size of 13 pixels.

However, I'm not sure this would be desired in all cases and maybe we should consider to pass the font-siz as a prop with a default value?

[IreneStr]

However, I'm not sure this would be desired in all cases and maybe we should consider to pass the font-siz as a prop with a default value?

@afercia Let's worry about this when it turns out to be relevant. For now a font-size: 0.8125rem; and a parent font size of 16px so that the button will have a 13px font seems fine. Because font-size: 0.8125rem; makes sense in WP as well, right?