Handling static set base font-sizes.

[zeroedin]

When the font-size is set on a page via html, body {} rules such as html { font-size: 18px } it can have unintended consequences in RHDS web components while maintaining end-user browser default setting adjustment. This happens because rules such as font-size and font-family have the ability to break through the shadow dom encapsulation barrier.

This issue has appeared both in rh-footer and rh-secondary-nav implementations. In each, :root overrides were given in the proxy examples. However, our first attempted approach to resolve this was to contain additional fixes internally to the component's CSS or we asked that the :root styles be implemented in addition to each component.

After considerable discussion providing these fixes directly in the component was deemed not ideal as it creates unneeded style bloat when the offending websites should handle these inconsistencies themselves, rather than the design system passing those styles to sites that don't need the additional styles.

Moving forward In order to limit this issue, an override stylesheet will be provided that contains corrections to the rh-token CSS properties as well each component getting font-size: initial set as well as any other style fixes needed as part of the same problem. This will be done via a Gist or as implementation documentation (to be linked later).

For more information or as an example of this issue please visit this Codepen which isolates the example.

[zeroedin]

Here is the current tested gist: https://gist.github.com/zeroedin/c6cb41fd776f9242e9d27265505d4c48

This file includes the code for rh-footer that likely has already been implemented.

[heyMP]

We could add this to the wiki on "Mitigating root font size overrides"

[heyMP]

https://github.com/RedHat-UX/red-hat-design-system/wiki/%5BDraft%5D-Overriding-the-root-font-size