Skip to content

v6: align font tokens with the Roboto/Fira Code that actually ship#4428

Merged
trevor-scheer merged 1 commit into
graphiql-6from
trevor/align-font-tokens
Jul 15, 2026
Merged

v6: align font tokens with the Roboto/Fira Code that actually ship#4428
trevor-scheer merged 1 commit into
graphiql-6from
trevor/align-font-tokens

Conversation

@trevor-scheer

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

Copy link
Copy Markdown
Contributor

Summary

tokens.css declared --font-family: 'Inter' and --font-family-mono: 'JetBrains Mono', but nothing in the app ever rendered in either. root.css redeclared both variables on .graphiql-container, pointing them back at Roboto and Fira Code, and that selector beats :root in the cascade. packages/graphiql/src/style.css only ever @imports the Roboto and Fira Code @font-face files, so Inter and JetBrains Mono weren't loaded to begin with — even if the cascade had gone the other way, the browser would have fallen through to the generic fallbacks.

We decided in #4426 to keep Roboto and Fira Code rather than swap the type system, so this points the canonical declaration in tokens.css at the fonts that actually ship and drops the now-redundant .graphiql-container override. One declaration, and it matches what you see. No font loading changes.

Test plan

  • Open the app and inspect the query editor and any body text. Computed font-family resolves to Fira Code and Roboto respectively, same as before this change.
  • In DevTools, confirm --font-family on .graphiql-container now inherits from :root rather than being overridden locally, and that its value is Roboto.
  • Switch themes and density presets and confirm no type regressions anywhere in the app (top bar, status bar, doc explorer, history, response pane).

Refs: #4219

tokens.css declared Inter/JetBrains Mono while root.css shadowed those
same variables back to Roboto/Fira Code on .graphiql-container, and
style.css only ever loaded the Roboto/Fira Code font files. Point the
canonical token declaration at the fonts that actually ship, and drop
the now-redundant container-level override.
@changeset-bot

changeset-bot Bot commented Jul 15, 2026

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: 1bb8c21

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 02:03
@trevor-scheer
trevor-scheer merged commit 7f63c9d into graphiql-6 Jul 15, 2026
13 checks passed
@trevor-scheer
trevor-scheer deleted the trevor/align-font-tokens branch July 15, 2026 02:03
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