adobe / adobe/spectrum-web-components

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

Open
#5,112 1 comment 0 reactions 0 assignees View on GitHub
bug Component:Theme SEV 4 Spectrum CSS
Dominant language
TypeScript
Stars
1.5k
Forks
262
Avg merge
3d 10h
Merged PRs (30d)
68

Description

### Code of conduct

- [x] 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

![Image](https://github.com/user-attachments/assets/3468c2ce-7736-4376-a876-1a387af9cc2a)

### 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

```

This text should not have an Adobe font applied unintentionally.

```

### Severity

SEV 4

### Logs taken while reproducing problem

_No response_

Contributor guide

Open the contributing guide

Research direction

Locate the sp-theme component entry point and its shadow-root styles; reproduce the sample with a non-Spectrum light-DOM div and inspect the applied font-family. Check the component's existing tests, then confirm the fix preserves font styling for Spectrum children while leaving the div unstyled.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.