v6: Restyle the top bar Run button (play icon, divider, chip shortcut) (#4399)

## Summary

Reworks the green **"Run"** button in the top bar
(`.graphiql-top-bar-run`) so it stops reading as a heavy, cluttered
element in an otherwise monochrome bar.

- Add a small play icon before the "Run" label.
- Add a faint vertical divider between the label and the keyboard
shortcut.
- Recolor the shortcut keys (`⌘` `⏎`) into translucent-white chips that
sit on the green fill, instead of the default dark-bordered keycap boxes
that looked like foreign objects on the button.
- Set the label to medium weight (500) rather than the previous heavy
bold (600).

Also removes the hardcoded `font-weight: 600` from the shared primary
button variant (`.graphiql-button-primary`), used by the collections
plugin dialogs (Import / Export / Save), so its label matches the other
buttons.

## Test plan

- [ ] Open GraphiQL and look at the top bar "Run" button: play icon +
"Run" + a faint divider + the `⌘⏎` shortcut as subtle chips. It should
read as one calm unit, not stand out as bold/busy.
- [ ] The shortcut chips should be legible white-on-green, not dark
boxes.
- [x] Open a collections dialog (e.g. Save / Import) and confirm the
green primary button's label matches a neutral button's weight.
- [x] Disabled state (e.g. GET selected with a mutation) still dims the
whole button and shows the "switch to POST" tooltip.

Refs: #4219

Author: trevor-scheer

.changeset/green-button-typography.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/react': patch
+---
+
+Refresh the top bar's "Run" button: add a play icon before the label, a faint divider before the keyboard shortcut, and recolor the shortcut keys into translucent chips that sit on the green fill instead of dark boxes. The label now uses medium weight rather than the heavier bold. Also remove the hardcoded bold weight from the primary button variant (used by the collections dialogs) so its label matches the other buttons.

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

@@ -41,7 +41,6 @@ button.graphiql-button {
     background-color: oklch(var(--btn-primary));
     border-color: oklch(var(--btn-primary-border));
     color: #fff;
-    font-weight: 600;
 
     &:hover {
       background-color: oklch(var(--btn-primary-border));

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

@@ -140,12 +140,34 @@
   color: #fff;
   font-family: var(--font-family);
   font-size: var(--font-size-body);
-  font-weight: 600;
+  font-weight: var(--font-weight-medium);
   cursor: pointer;
   white-space: nowrap;
   flex-shrink: 0;
 }
 
+.graphiql-top-bar-run-icon {
+  width: auto;
+  height: 11px;
+  flex-shrink: 0;
+}
+
+.graphiql-top-bar-run-sep {
+  width: 1px;
+  height: 14px;
+  background: rgb(255 255 255 / 0.28);
+  flex-shrink: 0;
+}
+
+/* The shortcut keys sit on the green fill here, not the dark bar. Darken them
+   into subtle inset chips rather than the default dark boxes; a light (white)
+   overlay would lighten the green and drop the white glyphs below AA contrast. */
+.graphiql-top-bar-run .graphiql-keycap {
+  border-color: rgb(255 255 255 / 0.2);
+  background: rgb(0 0 0 / 0.18);
+  color: #fff;
+}
+
 .graphiql-top-bar-run:disabled {
   opacity: 0.6;
   cursor: not-allowed;

packages/graphiql-react/src/components/top-bar/index.tsx

@@ -7,7 +7,7 @@ import type { HttpMethod } from '@graphiql/toolkit';
 import { useGraphiQL, useGraphiQLActions } from '../provider';
 import { KeycapHint, MODIFIER } from '../keycap-hint';
 import { Tooltip } from '../tooltip';
-import { GraphQLLogoIcon } from '../../icons';
+import { GraphQLLogoIcon, PlayIcon } from '../../icons';
 import { cn, getRunBlockReason, resolveActiveOperation } from '../../utility';
 import './index.css';
 
@@ -88,7 +88,9 @@ export const TopBarView: FC<TopBarViewProps> = ({
       disabled={isFetching || isBlocked}
       aria-label="Run query"
     >
-      Run
+      <PlayIcon className="graphiql-top-bar-run-icon" aria-hidden="true" />
+      <span className="graphiql-top-bar-run-label">Run</span>
+      <span className="graphiql-top-bar-run-sep" aria-hidden="true" />
       <KeycapHint
         keys={[MODIFIER.Meta, MODIFIER.Enter]}
         ariaLabel="Run query shortcut"