From d36fe48ec57e581be33f81da238f0d5f5b9b046e Mon Sep 17 00:00:00 2001 From: Trevor Scheer Date: Sun, 12 Jul 2026 17:23:28 -0700 Subject: [PATCH 1/2] Add `--transition-fast` token A single 120ms ease transition token, so hover transitions across the app can converge on one duration instead of three different ones. --- packages/graphiql-react/src/style/tokens.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/graphiql-react/src/style/tokens.css b/packages/graphiql-react/src/style/tokens.css index 6daa1d72866..4b240086d98 100644 --- a/packages/graphiql-react/src/style/tokens.css +++ b/packages/graphiql-react/src/style/tokens.css @@ -97,6 +97,9 @@ /* Shadows */ --shadow-popover: 0 4px 12px oklch(0% 0 0 / 0.3), 0 1px 3px oklch(0% 0 0 / 0.15); + + /* Motion */ + --transition-fast: 120ms ease; } [data-theme='light'] { From 8056dbc3e4bfb0231247cf34530e8903ff73f2af Mon Sep 17 00:00:00 2001 From: Trevor Scheer Date: Sun, 12 Jul 2026 17:23:36 -0700 Subject: [PATCH 2/2] Unify list-row hover treatment across doc explorer and history Doc explorer rows hovered with an `--fg-default` alpha tint and history rows hovered with an `--accent-blue` alpha tint, while activity-rail, dropdown-menu, and collections all use a flat `oklch(var(--bg-subtle))` hover. Converge doc explorer (`fields-list`, `schema-documentation`, `search`, `search-row`) and history rows onto that same standard, and bring history's action-icon hover (previously its own fourth recipe, `--fg-default` at a different alpha) in line too. `--accent-blue` stays reserved for genuine active/selected state: the active field row in the doc explorer, and the editable/rename state in history. Neither of those is a hover, so they're untouched. Also apply `--transition-fast` to all of the above row hovers, since none of them transitioned before and this PR is already touching every one of them. --- .../src/components/fields-list.css | 5 +++-- .../src/components/schema-documentation.css | 6 ++++-- .../src/components/search-row.css | 12 +++--------- .../src/components/search.css | 12 +++--------- packages/graphiql-plugin-history/src/style.css | 10 ++++++++-- 5 files changed, 21 insertions(+), 24 deletions(-) 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..4521fce39ba 100644 --- a/packages/graphiql-plugin-doc-explorer/src/components/fields-list.css +++ b/packages/graphiql-plugin-doc-explorer/src/components/fields-list.css @@ -61,9 +61,10 @@ cursor: pointer; text-align: left; width: 100%; + transition: background var(--transition-fast); &:hover { - background: oklch(var(--fg-default) / 0.04); + background: oklch(var(--bg-subtle)); } &:focus-visible { @@ -72,7 +73,7 @@ } } -/* Active row — blue accent */ +/* Active row — blue accent, reserved for the selected field */ .graphiql-doc-explorer-field-row--active { background: oklch(var(--accent-blue) / 0.08); border-left-color: oklch(var(--accent-blue)); diff --git a/packages/graphiql-plugin-doc-explorer/src/components/schema-documentation.css b/packages/graphiql-plugin-doc-explorer/src/components/schema-documentation.css index fc9ec7c0bf9..c24878470b6 100644 --- a/packages/graphiql-plugin-doc-explorer/src/components/schema-documentation.css +++ b/packages/graphiql-plugin-doc-explorer/src/components/schema-documentation.css @@ -36,9 +36,10 @@ width: 100%; font-family: var(--font-family-mono); font-size: 12px; + transition: background var(--transition-fast); &:hover { - background: oklch(var(--fg-default) / 0.04); + background: oklch(var(--bg-subtle)); } &:focus-visible { @@ -72,9 +73,10 @@ cursor: pointer; text-align: left; width: 100%; + transition: background var(--transition-fast); &:hover { - background: oklch(var(--fg-default) / 0.04); + background: oklch(var(--bg-subtle)); } &:focus-visible { diff --git a/packages/graphiql-plugin-doc-explorer/src/components/search-row.css b/packages/graphiql-plugin-doc-explorer/src/components/search-row.css index 75166f40776..0f193d37243 100644 --- a/packages/graphiql-plugin-doc-explorer/src/components/search-row.css +++ b/packages/graphiql-plugin-doc-explorer/src/components/search-row.css @@ -67,17 +67,11 @@ text-overflow: ellipsis; white-space: nowrap; cursor: pointer; + transition: background-color var(--transition-fast); - &[data-headlessui-state='active'] { - background-color: oklch(var(--fg-default) / 0.08); - } - + &[data-headlessui-state='active'], &:hover { - background-color: oklch(var(--fg-default) / 0.12); - } - - &[data-headlessui-state='active']:hover { - background-color: oklch(var(--fg-default) / 0.16); + background-color: oklch(var(--bg-subtle)); } & + [role='option'] { diff --git a/packages/graphiql-plugin-doc-explorer/src/components/search.css b/packages/graphiql-plugin-doc-explorer/src/components/search.css index f2b2397b1a6..fdc378a68fd 100644 --- a/packages/graphiql-plugin-doc-explorer/src/components/search.css +++ b/packages/graphiql-plugin-doc-explorer/src/components/search.css @@ -72,17 +72,11 @@ text-overflow: ellipsis; white-space: nowrap; cursor: pointer; + transition: background-color var(--transition-fast); - &[data-headlessui-state='active'] { - background-color: oklch(var(--fg-default) / 0.08); - } - + &[data-headlessui-state='active'], &:hover { - background-color: oklch(var(--fg-default) / 0.12); - } - - &[data-headlessui-state='active']:hover { - background-color: oklch(var(--fg-default) / 0.16); + background-color: oklch(var(--bg-subtle)); } & + & { diff --git a/packages/graphiql-plugin-history/src/style.css b/packages/graphiql-plugin-history/src/style.css index 4e468244bbc..f741abd8320 100644 --- a/packages/graphiql-plugin-history/src/style.css +++ b/packages/graphiql-plugin-history/src/style.css @@ -23,11 +23,14 @@ border-bottom: 1px solid oklch(var(--border-default)); display: flex; align-items: stretch; + transition: background-color var(--transition-fast); &:hover { - background-color: oklch(var(--accent-blue) / 0.06); + background-color: oklch(var(--bg-subtle)); } + /* Editing (rename) is an active state, not a hover — keeps the accent-blue + tint reserved for active/selected. */ &.editable { background-color: oklch(var(--accent-blue) / 0.08); @@ -129,10 +132,13 @@ display: flex; padding: var(--px-6); border-radius: var(--radius-sm); + transition: + color var(--transition-fast), + background-color var(--transition-fast); &:hover { color: oklch(var(--fg-default)); - background-color: oklch(var(--fg-default) / 0.06); + background-color: oklch(var(--bg-subtle)); } & > svg {