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 {
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'] {