UI Text: common.css overrides font size

[simison]

When using Text component from UI package with semantic rendering tags, common.css of WordPress overrides styles set by variant prop.

Example:

<Text
	// eslint-disable-next-line jsx-a11y/heading-has-content -- content provided via render prop
	render={ <h2 /> }
	variant="heading-lg"
>
	Example
</Text>

Component styles for heading-lg (15px):

Ends up looking bigger in reality when in wp-admin:

The solution could be higher specificity styles, even by using a format like h2.component-class?

[simison]

cc @ciampo @mirka if you have thoughts on how to approach fixing this.

[ciampo]

This is definitely one of the main challenges to solve in order to start using @wordpress/ui extensively — @mirka created #76135 which already includes it as a subtask.

So far, I think our main solution is to add data-* attribute to opt a DOM subtree out of those global styles.