[react] Design tokens are defined on `:root`, so generic names like `--radius-md` leak into the host app
Maintainers usually reply within 1 day
Nobody has claimed this yet.
Assessment
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Newbie friendliness
- 48/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Active
- Tech stack
- react, typescript
- Domain
- frontend
Research direction
Start by locating the @graphiql/react stylesheet rules that define tokens on :root, including the theme, density, and font-size blocks. Check how dialogs and portals are styled and run the relevant stylesheet tests or checks you find in the repository. Done means GraphiQL tokens no longer affect unrelated host app styles, including Tailwind v4 variables, while remaining available to GraphiQL.
Written by the indexing model from the issue text.
Description
@graphiql/react 1.0.2's stylesheet defines its design tokens on :root (:root, [data-theme="dark"] { ... }, plus the density and font-size blocks). Several have generic names, like --radius-sm/--radius-md/--radius-lg, --font-family, --font-size-body and --px-*.
Once the stylesheet is loaded they apply to the whole page, not just GraphiQL, and in a single-page app they stay after you leave the GraphiQL page. --radius-md is also a Tailwind v4 theme variable, so it changes rounded-md (and anything else using var(--radius-md)) across the app.
Could the tokens be scoped to .graphiql-container (and its dialogs/portals), or prefixed (e.g. --graphiql-radius-md)?
- Dominant language
- TypeScript
- Stars
- 16.9k
- Forks
- 1.9k
- Avg merge
- 14h 1m
- Merged PRs (30d)
- 81
Getting set up
- No Dockerfile or Docker Compose file
- No pull request template
- Read the contributing guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from graphql/graphiql
-
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
Maintainers usually reply within 1 day
-
Difficulty 1/5 Under an hour Newbie friendliness 88/100
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 83/100
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 77/100
Maintainers usually reply within 1 day
-
[graphiql] Variables editor flags a non-null variable with a default value as missingPossibly taken @khangb2306668 claimed this 2 days ago. Open
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
graphql/graphiql#4762 · 1 comment · 1 reaction ·
Maintainers usually reply within 1 day
All issues in graphql/graphiql
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
Maintainers usually reply within 1 day
-
Add "append" and "prepend" slots for vue-vuetify extended renderersPossibly taken @simeyc claimed this today. Open
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
eclipsesource/jsonforms#2668 ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
cobot/zapier#520 · 2 comments ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
Maintainers usually reply within 1 day
-
README の通知条件を実際の判定処理に合わせるPossibly taken @unhappychoice claimed this today. Openfactory:in-progress priority:medium
Difficulty 1/5 Under an hour Newbie friendliness 90/100
unhappychoice/oss-issue-opener#395 · 1 comment ·
Maintainers usually reply within 1 day