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

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

Author: trevor-scheer

packages/graphiql-plugin-code-exporter/src/index.css

@@ -24,7 +24,7 @@
   & > div {
     font-family: var(--font-family) !important;
     padding: 0 !important;
-    font-size: var(--font-size-body) !important;
+    font-size: var(--font-size-body-legacy) !important;
   }
   & > div:first-of-type {
     display: flex;

packages/graphiql-react/src/style/root.css

@@ -13,7 +13,7 @@
  * via PortalProvider, so they inherit these variables through DOM ancestry.
  */
 .graphiql-container {
-  /* DEPRECATED (v5): retained frozen for backward compatibility and the CodeMirror-based explorer plugin. Do not add new usages — use the OKLCH tokens in tokens.css. */
+  /* DEPRECATED (v5): retained frozen for backward compatibility and the CodeMirror-based code-exporter plugin. Do not add new usages — use the OKLCH tokens in tokens.css. */
   /* Colors */
   --color-primary: 320, 95%, 43%;
   --color-secondary: 242, 51%, 61%;
@@ -36,7 +36,8 @@
   --font-family: 'Roboto', sans-serif;
   --font-family-mono: 'Fira Code', monospace;
   --font-size-inline-code: calc(13rem / 16);
-  --font-size-body: calc(15rem / 16);
+  /* Renamed off the v6 preset name `--font-size-body` (tokens.css) so this frozen v5 value stops overriding it on `.graphiql-container` at equal specificity. Only the legacy code-exporter plugin consumes it. */
+  --font-size-body-legacy: calc(15rem / 16);
   --font-size-h4: calc(18rem / 16);
   --font-size-h3: calc(22rem / 16);
   --font-size-h2: calc(29rem / 16);