v6: Align GraphQL syntax colors and color type names by category

[trevor-scheer]

Summary

This PR does two related things for GraphQL identifier coloring across the first-party plugins.

1. Align colors across plugins. Type names, field names, and argument names now use the same colors across the doc explorer, history, and query builder. Doc explorer was already internally consistent (orange types, green fields, purple arguments), so it's the reference the other two now follow. History's saved query labels (previously plain foreground text) are now the same green as field names. Query builder previously colored composite return types and type-condition names blue and left argument names uncolored; both now match doc explorer.

2. Color type names by category. Instead of every type name being orange, type-name references are colored by GraphQL kind, so a field list is no longer a monotonous wall of orange:

Kind	Color
object / interface / union	orange
scalar	blue
enum	green
input object	gold

This applies in the schema-aware plugins (doc explorer and query builder). The Monaco query editor is unchanged — it isn't schema-aware, so type names in query text stay orange.

Public API

The scheme is exposed so third-party plugins can conform to it and retheme it:

• Four CSS tokens — --type-composite, --type-scalar, --type-enum, --type-input — are the supported retheming surface (documented in tokens.css).
• typeCategory(type) is exported from @graphiql/react; it buckets any GraphQL type into 'scalar' | 'enum' | 'input' | 'composite', unwrapping list/non-null wrappers.

Class names, internal selectors, and the data-type-kind attribute remain private. Light-theme --type-input uses a darker gold than the dark theme so it clears WCAG AA as text (~5–6.5:1 against the doc-explorer surfaces).

Test plan

• Alignment: Open the doc explorer, history, and query builder in the same session. A field name is the same green in all three; an argument name is the same purple in both doc explorer and query builder.
• Category colors (doc explorer): Browse a schema with mixed field types. Scalar return types (String/Int/Boolean/ID/custom scalars) are blue, enum types green, object/interface/union types orange, and input object types gold.
• Category colors (query builder): Expand the field tree. Scalar-returning fields are blue, enum-returning fields green, object/interface/union fields orange.
• Arguments (doc explorer): A field with an input-object argument shows the input type name in gold, clearly distinct from the purple argument name beside it.
• Type conditions (query builder): Expand an interface/union field's possible types. The ... on TypeName labels are orange.
• Search (doc explorer): Search results show type names colored by the same category scheme.
• History: Saved query entries show their label/operation name in green.
• Light theme: Switch themes and spot-check the same views. All four category colors stay legible against the panel background — the gold in particular should read as a clear dark gold, not washed out.

Refs: #4219

[changeset-bot]

🦋 Changeset detected

Latest commit: bc40d58

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 8 packages

Name	Type
@graphiql/react	Patch
@graphiql/plugin-history	Patch
@graphiql/plugin-query-builder	Patch
@graphiql/plugin-code-exporter	Patch
@graphiql/plugin-collections	Patch
@graphiql/plugin-doc-explorer	Patch
@graphiql/plugin-explorer	Patch
graphiql	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR