From 6389d6836b46d9df6514be1f1f5336ccf080e392 Mon Sep 17 00:00:00 2001
From: Trevor Scheer <trevor.scheer@gmail.com>
Date: Sun, 12 Jul 2026 17:29:49 -0700
Subject: [PATCH 1/2] Retire fixed `--font-size-hint`, route to
 `--font-size-eyebrow`

`--font-size-hint` in `root.css` was a frozen v5 value that never
scaled with the font-size preset. All ~19 call sites (var-headers-strip,
collections, history, doc-explorer) are caption/label text, so they
now use `--font-size-eyebrow` and track Settings > Font size. The
dead `--font-size-hint` definition is removed since nothing references
it anymore.
---
 .../graphiql-plugin-collections/src/index.css | 26 +++++++++----------
 .../src/components/argument.css               |  2 +-
 .../src/components/deprecation-reason.css     |  2 +-
 .../src/components/search.css                 |  2 +-
 .../src/components/section.css                |  2 +-
 .../graphiql-plugin-history/src/style.css     |  2 +-
 .../components/var-headers-strip/index.css    |  2 +-
 packages/graphiql-react/src/style/root.css    |  1 -
 8 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/packages/graphiql-plugin-collections/src/index.css b/packages/graphiql-plugin-collections/src/index.css
index c6b31eeff79..c149029061b 100644
--- a/packages/graphiql-plugin-collections/src/index.css
+++ b/packages/graphiql-plugin-collections/src/index.css
@@ -12,7 +12,7 @@
 
 .graphiql-collections-status {
   padding: var(--px-4) var(--px-12);
-  font-size: var(--font-size-hint);
+  font-size: var(--font-size-eyebrow);
   color: oklch(var(--accent-green));
 }
 
@@ -29,7 +29,7 @@
 .graphiql-collections-loading {
   padding: var(--px-8) var(--px-12);
   color: oklch(var(--fg-subtle));
-  font-size: var(--font-size-hint);
+  font-size: var(--font-size-eyebrow);
 }
 
 .graphiql-collections-toolbar {
@@ -55,7 +55,7 @@
   padding: var(--px-4) var(--px-8);
   border-radius: var(--border-radius-4);
   color: oklch(var(--fg-subtle));
-  font-size: var(--font-size-hint);
+  font-size: var(--font-size-eyebrow);
 }
 
 .graphiql-collections-action:hover {
@@ -126,7 +126,7 @@
 }
 
 .graphiql-collection-badge {
-  font-size: var(--font-size-hint);
+  font-size: var(--font-size-eyebrow);
   color: oklch(var(--fg-subtle));
   background: oklch(var(--bg-subtle));
   padding: 0 var(--px-6);
@@ -134,7 +134,7 @@
 }
 
 .graphiql-collection-chevron {
-  font-size: var(--font-size-hint);
+  font-size: var(--font-size-eyebrow);
   color: oklch(var(--fg-subtle));
   flex-shrink: 0;
 }
@@ -199,7 +199,7 @@
 
 .graphiql-collection-empty-hint {
   padding: var(--px-6) var(--px-12) var(--px-8) var(--px-20);
-  font-size: var(--font-size-hint);
+  font-size: var(--font-size-eyebrow);
   color: oklch(var(--fg-subtle));
   font-style: italic;
 }
@@ -264,7 +264,7 @@
 }
 
 .graphiql-collection-item-description {
-  font-size: var(--font-size-hint);
+  font-size: var(--font-size-eyebrow);
   color: oklch(var(--fg-subtle));
   overflow: hidden;
   text-overflow: ellipsis;
@@ -294,7 +294,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--px-4);
-  font-size: var(--font-size-hint);
+  font-size: var(--font-size-eyebrow);
   color: oklch(var(--fg-subtle));
 }
 
@@ -349,14 +349,14 @@
 }
 
 .graphiql-import-export-mode legend {
-  font-size: var(--font-size-hint);
+  font-size: var(--font-size-eyebrow);
   color: oklch(var(--fg-subtle));
   margin-bottom: var(--px-4);
 }
 
 .graphiql-import-export-error {
   color: oklch(var(--accent-red));
-  font-size: var(--font-size-hint);
+  font-size: var(--font-size-eyebrow);
 }
 
 /* Conflict dialog */
@@ -380,7 +380,7 @@
 
 .graphiql-conflict-review-hint-label {
   margin: 0;
-  font-size: var(--font-size-hint);
+  font-size: var(--font-size-eyebrow);
   color: oklch(var(--fg-subtle));
 }
 
@@ -417,13 +417,13 @@
 }
 
 .graphiql-conflict-review-collection {
-  font-size: var(--font-size-hint);
+  font-size: var(--font-size-eyebrow);
   color: oklch(var(--fg-subtle));
   white-space: nowrap;
 }
 
 .graphiql-conflict-review-hint {
-  font-size: var(--font-size-hint);
+  font-size: var(--font-size-eyebrow);
   color: oklch(var(--fg-subtle));
   white-space: nowrap;
 }
diff --git a/packages/graphiql-plugin-doc-explorer/src/components/argument.css b/packages/graphiql-plugin-doc-explorer/src/components/argument.css
index 7c80a917428..46992cba833 100644
--- a/packages/graphiql-plugin-doc-explorer/src/components/argument.css
+++ b/packages/graphiql-plugin-doc-explorer/src/components/argument.css
@@ -17,6 +17,6 @@
 }
 
 .graphiql-doc-explorer-argument-deprecation-label {
-  font-size: var(--font-size-hint);
+  font-size: var(--font-size-eyebrow);
   font-weight: var(--font-weight-medium);
 }
diff --git a/packages/graphiql-plugin-doc-explorer/src/components/deprecation-reason.css b/packages/graphiql-plugin-doc-explorer/src/components/deprecation-reason.css
index 32fe94a6d39..858012fc4ab 100644
--- a/packages/graphiql-plugin-doc-explorer/src/components/deprecation-reason.css
+++ b/packages/graphiql-plugin-doc-explorer/src/components/deprecation-reason.css
@@ -7,6 +7,6 @@
 }
 
 .graphiql-doc-explorer-deprecation-label {
-  font-size: var(--font-size-hint);
+  font-size: var(--font-size-eyebrow);
   font-weight: var(--font-weight-medium);
 }
diff --git a/packages/graphiql-plugin-doc-explorer/src/components/search.css b/packages/graphiql-plugin-doc-explorer/src/components/search.css
index f2b2397b1a6..99539159602 100644
--- a/packages/graphiql-plugin-doc-explorer/src/components/search.css
+++ b/packages/graphiql-plugin-doc-explorer/src/components/search.css
@@ -116,7 +116,7 @@
 
 .graphiql-doc-explorer-search-divider {
   color: oklch(var(--fg-muted));
-  font-size: var(--font-size-hint);
+  font-size: var(--font-size-eyebrow);
   font-weight: var(--font-weight-medium);
   margin-top: var(--px-8);
   padding: var(--px-8) var(--px-12);
diff --git a/packages/graphiql-plugin-doc-explorer/src/components/section.css b/packages/graphiql-plugin-doc-explorer/src/components/section.css
index 3cc72bb874a..88bf43fbae3 100644
--- a/packages/graphiql-plugin-doc-explorer/src/components/section.css
+++ b/packages/graphiql-plugin-doc-explorer/src/components/section.css
@@ -1,7 +1,7 @@
 .graphiql-doc-explorer-section-title {
   align-items: center;
   display: flex;
-  font-size: var(--font-size-hint);
+  font-size: var(--font-size-eyebrow);
   font-weight: var(--font-weight-medium);
   line-height: 1;
 
diff --git a/packages/graphiql-plugin-history/src/style.css b/packages/graphiql-plugin-history/src/style.css
index 4e468244bbc..94455701f02 100644
--- a/packages/graphiql-plugin-history/src/style.css
+++ b/packages/graphiql-plugin-history/src/style.css
@@ -16,7 +16,7 @@
 .graphiql-history-empty {
   padding: var(--px-8) var(--px-12);
   color: oklch(var(--fg-subtle));
-  font-size: var(--font-size-hint);
+  font-size: var(--font-size-eyebrow);
 }
 
 .graphiql-history-item {
diff --git a/packages/graphiql-react/src/components/var-headers-strip/index.css b/packages/graphiql-react/src/components/var-headers-strip/index.css
index f8f33495ce3..3b50e8f090a 100644
--- a/packages/graphiql-react/src/components/var-headers-strip/index.css
+++ b/packages/graphiql-react/src/components/var-headers-strip/index.css
@@ -16,7 +16,7 @@
 
 .graphiql-var-hint {
   margin-left: auto;
-  font-size: var(--font-size-hint);
+  font-size: var(--font-size-eyebrow);
   color: oklch(var(--fg-subtle));
   white-space: nowrap;
 }
diff --git a/packages/graphiql-react/src/style/root.css b/packages/graphiql-react/src/style/root.css
index 1032d81e967..2bfdd430818 100644
--- a/packages/graphiql-react/src/style/root.css
+++ b/packages/graphiql-react/src/style/root.css
@@ -35,7 +35,6 @@
   /* Font */
   --font-family: 'Roboto', sans-serif;
   --font-family-mono: 'Fira Code', monospace;
-  --font-size-hint: calc(12rem / 16);
   --font-size-inline-code: calc(13rem / 16);
   --font-size-body: calc(15rem / 16);
   --font-size-h4: calc(18rem / 16);

From 985022ddec630790473963b0e10610bca1adfa3a Mon Sep 17 00:00:00 2001
From: Trevor Scheer <trevor.scheer@gmail.com>
Date: Sun, 12 Jul 2026 17:30:00 -0700
Subject: [PATCH 2/2] Migrate hardcoded `font-size` px to tokens on
 doc-explorer, response-header, panel-header, method-pill
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`field-card`, `type-card`, `fields-list`, `response-header`,
`panel-header`, and `method-pill` all hardcoded `font-size` in px,
so they silently ignored the Settings font-size preset. Swapped each
for the nearest `--font-size-*` token (verified against the resolved
`--font-size-body` alias, which turned out to be shadowed by a frozen
legacy value in `root.css` — used `--font-size-mono` instead for the
mono-family names/types so they actually track the preset).
---
 .../src/components/field-card.css                         | 8 ++++----
 .../src/components/fields-list.css                        | 6 +++---
 .../src/components/type-card.css                          | 8 ++++----
 .../graphiql-react/src/components/method-pill/index.css   | 2 +-
 .../graphiql-react/src/components/panel-header/index.css  | 2 +-
 .../src/components/response-header/index.css              | 6 +++---
 6 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/packages/graphiql-plugin-doc-explorer/src/components/field-card.css b/packages/graphiql-plugin-doc-explorer/src/components/field-card.css
index 0129d1322e2..1764a2bff86 100644
--- a/packages/graphiql-plugin-doc-explorer/src/components/field-card.css
+++ b/packages/graphiql-plugin-doc-explorer/src/components/field-card.css
@@ -12,26 +12,26 @@
 
 .graphiql-doc-explorer-field-card-name {
   font-family: var(--font-family-mono);
-  font-size: 14px;
+  font-size: var(--font-size-mono);
   font-weight: 600;
   color: oklch(var(--accent-green-light));
 }
 
 .graphiql-doc-explorer-field-card-colon {
   font-family: var(--font-family-mono);
-  font-size: 14px;
+  font-size: var(--font-size-mono);
   color: oklch(var(--fg-muted));
 }
 
 .graphiql-doc-explorer-field-card-type {
   font-family: var(--font-family-mono);
-  font-size: 14px;
+  font-size: var(--font-size-mono);
   color: oklch(var(--fg-default));
 }
 
 .graphiql-doc-explorer-field-card-description {
   margin: 0 0 var(--px-6);
-  font-size: 12px;
+  font-size: var(--font-size-mono);
   color: oklch(var(--fg-muted));
   line-height: 17px;
 }
diff --git a/packages/graphiql-plugin-doc-explorer/src/components/fields-list.css b/packages/graphiql-plugin-doc-explorer/src/components/fields-list.css
index f6ce5637b82..161b99d5c02 100644
--- a/packages/graphiql-plugin-doc-explorer/src/components/fields-list.css
+++ b/packages/graphiql-plugin-doc-explorer/src/components/fields-list.css
@@ -16,7 +16,7 @@
   border: none;
   cursor: pointer;
   color: oklch(var(--fg-subtle));
-  font-size: 10px;
+  font-size: var(--font-size-eyebrow);
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.08em;
@@ -93,7 +93,7 @@
   align-items: baseline;
   gap: var(--px-6);
   font-family: var(--font-family-mono);
-  font-size: 12px;
+  font-size: var(--font-size-mono);
 }
 
 .graphiql-doc-explorer-field-row-name {
@@ -112,7 +112,7 @@
 
 /* Optional description */
 .graphiql-doc-explorer-field-row-desc {
-  font-size: 11px;
+  font-size: var(--font-size-small);
   color: oklch(var(--fg-subtle));
   line-height: 15px;
 }
diff --git a/packages/graphiql-plugin-doc-explorer/src/components/type-card.css b/packages/graphiql-plugin-doc-explorer/src/components/type-card.css
index fb491e401ef..a0b60235023 100644
--- a/packages/graphiql-plugin-doc-explorer/src/components/type-card.css
+++ b/packages/graphiql-plugin-doc-explorer/src/components/type-card.css
@@ -15,7 +15,7 @@
   background: oklch(var(--accent-blue) / 0.12);
   color: oklch(var(--accent-blue));
   font-family: var(--font-family-mono);
-  font-size: 10px;
+  font-size: var(--font-size-eyebrow);
   font-weight: 600;
   border-radius: var(--radius-sm);
   text-transform: uppercase;
@@ -25,7 +25,7 @@
 
 .graphiql-doc-explorer-type-card-name {
   font-family: var(--font-family-mono);
-  font-size: 14px;
+  font-size: var(--font-size-mono);
   font-weight: 600;
   color: oklch(var(--fg-strong));
   overflow-x: hidden;
@@ -35,7 +35,7 @@
 
 .graphiql-doc-explorer-type-card-description {
   margin: 0 0 var(--px-6);
-  font-size: 12px;
+  font-size: var(--font-size-mono);
   color: oklch(var(--fg-muted));
   line-height: 17px;
 }
@@ -47,7 +47,7 @@
   align-items: center;
   gap: var(--px-6);
   margin-top: var(--px-6);
-  font-size: 10.5px;
+  font-size: var(--font-size-eyebrow);
   color: oklch(var(--fg-subtle));
 }
 
diff --git a/packages/graphiql-react/src/components/method-pill/index.css b/packages/graphiql-react/src/components/method-pill/index.css
index 2cc06618b9d..e5ca2ee51ed 100644
--- a/packages/graphiql-react/src/components/method-pill/index.css
+++ b/packages/graphiql-react/src/components/method-pill/index.css
@@ -5,7 +5,7 @@
   padding: 1px 5px;
   border-radius: var(--radius-sm);
   font-family: var(--font-family-mono);
-  font-size: 9px;
+  font-size: var(--font-size-eyebrow);
   font-weight: 700;
   letter-spacing: 0.04em;
   line-height: 1.4;
diff --git a/packages/graphiql-react/src/components/panel-header/index.css b/packages/graphiql-react/src/components/panel-header/index.css
index da72c8e77bd..5209bd87b4f 100644
--- a/packages/graphiql-react/src/components/panel-header/index.css
+++ b/packages/graphiql-react/src/components/panel-header/index.css
@@ -17,7 +17,7 @@
   margin: 0;
   color: oklch(var(--fg-strong));
   font-family: var(--font-family);
-  font-size: 12px;
+  font-size: var(--font-size-mono);
   font-weight: 600;
   line-height: 1.3;
 }
diff --git a/packages/graphiql-react/src/components/response-header/index.css b/packages/graphiql-react/src/components/response-header/index.css
index fa1eb979ca4..ce20b1d70ae 100644
--- a/packages/graphiql-react/src/components/response-header/index.css
+++ b/packages/graphiql-react/src/components/response-header/index.css
@@ -14,7 +14,7 @@
   align-items: center;
   gap: var(--px-6);
   font-family: var(--font-family-mono);
-  font-size: 11.5px;
+  font-size: var(--font-size-mono);
   line-height: 1;
 }
 
@@ -47,7 +47,7 @@
 
 .graphiql-response-meta {
   font-family: var(--font-family-mono);
-  font-size: 11.5px;
+  font-size: var(--font-size-mono);
   color: oklch(var(--fg-muted));
   line-height: 1;
 }
@@ -118,7 +118,7 @@
   display: inline-flex;
   align-items: center;
   gap: var(--px-6);
-  font-size: 11.5px;
+  font-size: var(--font-size-small);
   line-height: 1;
   color: oklch(var(--fg-default));
 }