[Bug]: sp-theme applies Adobe font-family to non-Spectrum child elements

[moikmellah]

Code of conduct

• I agree to follow this project's code of conduct.

Impacted component(s)

sp-theme

Expected behavior

The sp-theme element should only apply font-family to encapsulated Spectrum web components, and not to other elements contained in its light DOM.

Actual behavior

The sp-theme element applies system font-family styles to all encapsulated elements through a :host CSS rule applied to its shadow root.

Screenshots

What browsers are you seeing the problem in?

Firefox, Chrome

How can we reproduce this issue?

1. Wrap a 'div' or other element in an sp-theme
2. Look at element
3. Element has Spectrum font-family applied

Sample code or abstract reproduction which illustrates the problem

<sp-theme system="spectrum" color="light" scale="medium">
  <div>This text should not have an Adobe font applied unintentionally.</div>
</sp-theme>

Severity

SEV 4

Logs taken while reproducing problem

No response

[moikmellah]

Behavior was added with Spectrum 2 support fairly recently, applying the Spectrum font family stack and a few other font-related styles as a :host CSS rule. Prior to that PR sp-theme (at least with the "spectrum" system) didn't apply Spectrum styles to non-Spectrum elements.