Skip to content

v6: Make the font-size setting reach body text#4427

Merged
trevor-scheer merged 1 commit into
graphiql-6from
trevor/font-size-body-collision
Jul 15, 2026
Merged

v6: Make the font-size setting reach body text#4427
trevor-scheer merged 1 commit into
graphiql-6from
trevor/font-size-body-collision

Conversation

@trevor-scheer

@trevor-scheer trevor-scheer commented Jul 15, 2026

Copy link
Copy Markdown
Contributor

Summary

  • --font-size-body is declared twice: as a scaling preset token in tokens.css (:root, [data-font-size='default'|'compact'|'large'|'xl']), and as a frozen v5 value in root.css's DEPRECATED .graphiql-container block. Both selectors have specificity (0,1,0) and the frozen block comes later (after @import 'tokens.css'), so calc(15rem / 16) always won.
  • Every consumer of var(--font-size-body) — the .graphiql-container base font-size, button, dialog, dropdown-menu, top-bar, and the collections / doc-explorer / query-builder plugins — has silently been pinned to 15px, so Settings > Font size never touched body text even though the code looked correct. The sibling preset tokens (--font-size-small, --font-size-mono, --font-size-eyebrow) were unaffected because they aren't redeclared in that block.
  • Renaming the frozen declaration separates the two meanings and lets the preset token win.

Changes

  • root.css: renamed --font-size-body: calc(15rem / 16) to --font-size-body-legacy in the DEPRECATED .graphiql-container block.
  • graphiql-plugin-code-exporter/src/index.css: pointed the CodeMirror-based plugin at var(--font-size-body-legacy) so it keeps rendering at the frozen 15px.
  • Updated the DEPRECATED block comment to name the code-exporter plugin — the explorer plugin it referenced no longer consumes this token.

Validation Steps

  1. Open the app and note the size of body text (panel headers, buttons, top bar, doc explorer rows).
  2. Open Settings > Font size and switch to Large, then Extra large. Body text throughout the app should visibly grow at each step — previously it stayed fixed at 15px regardless.
  3. Switch to Compact. Body text should visibly shrink.
  4. Switch back to Default and confirm body text settles at the standard size (slightly smaller than before this change).
  5. Open the code exporter plugin and cycle through the font-size presets. Its exported-code panel should stay the same size at every preset — it intentionally remains frozen.

The DEPRECATED `.graphiql-container` block in `root.css` redeclared
`--font-size-body`, colliding with the v6 preset token of the same name in
`tokens.css`. Both selectors have specificity (0,1,0) and the frozen block
comes later (after `@import 'tokens.css'`), so `calc(15rem / 16)` always won
and Settings > Font size never reached body text.

Point the legacy CodeMirror-based code-exporter plugin at the renamed
variable so it keeps its frozen 15px.
@changeset-bot

changeset-bot Bot commented Jul 15, 2026

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: bfef0d5

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@trevor-scheer
trevor-scheer marked this pull request as ready for review July 15, 2026 01:09
@trevor-scheer
trevor-scheer enabled auto-merge (squash) July 15, 2026 01:09
@trevor-scheer
trevor-scheer merged commit 4f96f6d into graphiql-6 Jul 15, 2026
12 checks passed
@trevor-scheer
trevor-scheer deleted the trevor/font-size-body-collision branch July 15, 2026 01:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant