v6: Make the font-size setting reach the doc explorer, headers, and pills

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,15 +126,15 @@
 }
 
 .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);
   border-radius: 9999px;
 }
 
 .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;
 }

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);
 }

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);
 }

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;
 }

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;
 }

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);

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;
 

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));
 }
 

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 {

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;

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;
 }

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));
 }

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;
 }

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);