v6: Tidy up token/consistency nits (method pills, status bar, icon sizing) (#4421)

## Summary

- `MethodPill`'s query/mutation/subscription colors were hand-typed
OKLCH values that approximated
`--accent-green`/`--accent-yellow`/`--accent-purple` but didn't
reference them, so the pills never re-themed with the rest of the app.
They now read the tokens directly. Query and subscription flip their
text color between near-black and near-white depending on theme, the
same split `.graphiql-button-success` and the query-builder's variable
toggle already use, since the token values (unlike the old hardcoded
ones) differ enough per theme to change which text color clears
contrast.
- The status bar's item gap (`--px-14`) didn't match the top bar's
(`--px-12`), its closest structural sibling, for no obvious reason. Both
now use `--px-12`. Leaving the status bar's mono/small/muted type scale
alone on purpose here, that reads as a deliberate "quiet metadata strip"
choice, not a bug.
- Icon buttons in the toolbar, activity rail, and response header each
sized themselves differently: a legacy `--toolbar-width` variable, a
hardcoded 32px, and a hardcoded 28px override. Added a shared
`--icon-button-size-sm/md/lg` scale to the density presets in
`tokens.css` and pointed all three at it.

## Test plan

- [x] Switch between light and dark themes and confirm the QRY/MUT/SUB
method pills recolor with the rest of the accent palette and their text
stays legible in both.
- [x] Confirm the status bar's item spacing now matches the top bar's.
- [x] At each density preset (Compact/Comfortable/Spacious in Settings),
confirm icon buttons in the activity rail, top-bar toolbar, and response
header size consistently with each other.
- [x] In the response header, confirm the toolbar icon buttons still fit
comfortably inside the 32px-tall header bar without touching its edges.

Refs: #4219

Author: trevor-scheer

packages/graphiql-react/src/components/activity-rail/index.css

@@ -19,8 +19,8 @@
 }
 
 .graphiql-activity-rail-item {
-  width: 32px;
-  height: 32px;
+  width: var(--icon-button-size-md);
+  height: var(--icon-button-size-md);
   border: 0;
   border-left: 2px solid transparent;
   margin-left: -2px;
@@ -64,8 +64,8 @@
 }
 
 .graphiql-activity-rail-settings {
-  width: 32px;
-  height: 32px;
+  width: var(--icon-button-size-md);
+  height: var(--icon-button-size-md);
   margin: 0 auto;
   border: 0;
   background: transparent;

packages/graphiql-react/src/components/method-pill/index.css

@@ -17,16 +17,28 @@
  * the pill text stays well above WCAG AA in both themes.
  */
 .graphiql-method-pill-query {
-  color: oklch(98% 0 0);
-  background: oklch(50% 0.15 146);
+  /* --accent-green is near-black-readable in dark theme (light L) and
+     near-white-readable in light theme (darker L) — same split as
+     .graphiql-button-success. */
+  color: oklch(15% 0 0);
+  background: oklch(var(--accent-green));
+
+  [data-theme='light'] & {
+    color: oklch(98% 0 0);
+  }
 }
 
 .graphiql-method-pill-mutation {
   color: oklch(15% 0 0);
-  background: oklch(85% 0.13 90);
+  background: oklch(var(--accent-yellow));
 }
 
 .graphiql-method-pill-subscription {
-  color: oklch(98% 0 0);
-  background: oklch(45% 0.18 295);
+  /* Same theme split as --accent-green above, see .graphiql-qb-var-toggle. */
+  color: oklch(15% 0 0);
+  background: oklch(var(--accent-purple));
+
+  [data-theme='light'] & {
+    color: oklch(98% 0 0);
+  }
 }

packages/graphiql-react/src/components/method-pill/method-pill.stories.tsx

@@ -21,3 +21,22 @@ export const Mutation: Story = {
 export const Subscription: Story = {
   render: () => <MethodPill operation="subscription" />,
 };
+
+// The pills read their colors from --accent-green/-yellow/-purple, which
+// resolve differently per theme, so the default (dark) stories above don't
+// exercise light-theme contrast. These pin the light theme explicitly so the
+// a11y check covers both.
+export const QueryLight: Story = {
+  render: () => <MethodPill operation="query" />,
+  globals: { theme: 'light' },
+};
+
+export const MutationLight: Story = {
+  render: () => <MethodPill operation="mutation" />,
+  globals: { theme: 'light' },
+};
+
+export const SubscriptionLight: Story = {
+  render: () => <MethodPill operation="subscription" />,
+  globals: { theme: 'light' },
+};

packages/graphiql-react/src/components/response-header/index.css

@@ -56,11 +56,11 @@
   flex: 1;
 }
 
-/* ToolbarButton defaults to --toolbar-width (40px); shrink it so the hover
+/* ToolbarButton defaults to --icon-button-size-lg; shrink it so the hover
    background fits inside the 32px header bar. */
 .graphiql-response-header .graphiql-toolbar-button {
-  height: 28px;
-  width: 28px;
+  height: var(--icon-button-size-sm);
+  width: var(--icon-button-size-sm);
 }
 
 .graphiql-response-pane {

packages/graphiql-react/src/components/status-bar/index.css

@@ -1,12 +1,15 @@
 .graphiql-status-bar {
   display: flex;
   align-items: center;
-  gap: var(--px-14);
+  gap: var(--px-12);
   height: var(--status-bar-height);
   flex-shrink: 0;
   padding: 0 var(--px-12);
   background: oklch(var(--bg-elevated));
   border-top: 1px solid oklch(var(--border-default));
+  /* Mono + eyebrow + --fg-subtle is intentional here — the status bar
+     reads as a quiet metadata strip, unlike the top bar's primary-content
+     type scale. Leave this as-is. */
   color: oklch(var(--fg-subtle));
   font-family: var(--font-family-mono);
   font-size: var(--font-size-eyebrow);

packages/graphiql-react/src/components/toolbar-button/index.css

@@ -2,8 +2,8 @@ button.graphiql-toolbar-button {
   display: flex;
   align-items: center;
   justify-content: center;
-  height: var(--toolbar-width);
-  width: var(--toolbar-width);
+  height: var(--icon-button-size-lg);
+  width: var(--icon-button-size-lg);
   color: oklch(var(--fg-subtle));
   border-radius: var(--radius-sm);
 

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

@@ -173,6 +173,14 @@
   --dialog-padding-y: 16px;
   --dialog-bar-padding-y: 6px;
   --dialog-gap: 16px;
+
+  /* Icon-button hit-target sizes. -sm/-md/-lg cover the three sizes icon
+     buttons render at today (response header / activity rail / top-bar
+     toolbar), so all three can read one scale instead of each hardcoding
+     its own pixel value. */
+  --icon-button-size-sm: 28px;
+  --icon-button-size-md: 32px;
+  --icon-button-size-lg: 40px;
 }
 
 [data-density='compact'] {
@@ -188,6 +196,9 @@
   --dialog-padding-y: 12px;
   --dialog-bar-padding-y: 4px;
   --dialog-gap: 12px;
+  --icon-button-size-sm: 24px;
+  --icon-button-size-md: 26px;
+  --icon-button-size-lg: 34px;
 }
 
 [data-density='spacious'] {
@@ -203,6 +214,9 @@
   --dialog-padding-y: 20px;
   --dialog-bar-padding-y: 10px;
   --dialog-gap: 20px;
+  --icon-button-size-sm: 34px;
+  --icon-button-size-md: 40px;
+  --icon-button-size-lg: 48px;
 }
 
 /* -------------------------------------------------------------------------