From 087cf3b8b0777f44cd8656d0eabed9dcc018a268 Mon Sep 17 00:00:00 2001
From: Reza Banazadeh <92025027+0xRezaa@users.noreply.github.com>
Date: Mon, 19 Oct 2026 11:11:41 +0200
Subject: [PATCH 1/3] Give `GrayToBlueIconButton` a blue background while
 `aria-pressed` is true

---
 .../src/pages/shared/gray-to-blue-icon-button.tsx         | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/apps/hash-frontend/src/pages/shared/gray-to-blue-icon-button.tsx b/apps/hash-frontend/src/pages/shared/gray-to-blue-icon-button.tsx
index a1a8df04fa3..f4e7084575b 100644
--- a/apps/hash-frontend/src/pages/shared/gray-to-blue-icon-button.tsx
+++ b/apps/hash-frontend/src/pages/shared/gray-to-blue-icon-button.tsx
@@ -24,6 +24,14 @@ export const GrayToBlueIconButton = ({ sx, ...props }: IconButtonProps) => {
             border: `1px solid ${palette.blue[25]}`,
             color: "blue.70",
           },
+          '&[aria-pressed="true"]': {
+            background: palette.blue[20],
+            border: `1px solid ${palette.blue[30]}`,
+            color: palette.blue[70],
+            "&:hover": {
+              background: palette.blue[30],
+            },
+          },
           "& svg": {
             fontSize: 13,
           },

From a32e4516ff322b5a0ddd007621e0eb8908bcb590 Mon Sep 17 00:00:00 2001
From: Reza Banazadeh <92025027+0xRezaa@users.noreply.github.com>
Date: Tue, 20 Oct 2026 12:15:42 +0200
Subject: [PATCH 2/3] Fill `GrayToBlueIconButton` with solid blue while it is
 pressed

---
 .../src/pages/shared/file-preview-search.tsx          |  8 +-------
 .../src/pages/shared/gray-to-blue-icon-button.tsx     | 11 +++++++----
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/apps/hash-frontend/src/pages/shared/file-preview-search.tsx b/apps/hash-frontend/src/pages/shared/file-preview-search.tsx
index a6be798aa0e..8141bf760d2 100644
--- a/apps/hash-frontend/src/pages/shared/file-preview-search.tsx
+++ b/apps/hash-frontend/src/pages/shared/file-preview-search.tsx
@@ -121,13 +121,7 @@ export const FilePreviewSearch = ({
               }}
               sx={{ "& svg": { fontSize: 13 }, p: 0.5 }}
             >
-              <FontCaseRegularIcon
-                sx={{
-                  fill: ({ palette }) =>
-                    ignoreCase ? undefined : palette.blue[70],
-                  transition: ({ transitions }) => transitions.create("fill"),
-                }}
-              />
+              <FontCaseRegularIcon />
             </GrayToBlueIconButton>
           </Tooltip>
           <Collapse orientation="horizontal" in={!!searchText} timeout={200}>
diff --git a/apps/hash-frontend/src/pages/shared/gray-to-blue-icon-button.tsx b/apps/hash-frontend/src/pages/shared/gray-to-blue-icon-button.tsx
index f4e7084575b..5f53b9a6dd2 100644
--- a/apps/hash-frontend/src/pages/shared/gray-to-blue-icon-button.tsx
+++ b/apps/hash-frontend/src/pages/shared/gray-to-blue-icon-button.tsx
@@ -24,12 +24,15 @@ export const GrayToBlueIconButton = ({ sx, ...props }: IconButtonProps) => {
             border: `1px solid ${palette.blue[25]}`,
             color: "blue.70",
           },
+          // `@hashintel/ds-components` tokens, as hex because their CSS
+          // variables only resolve inside `.hash-ds-root`.
           '&[aria-pressed="true"]': {
-            background: palette.blue[20],
-            border: `1px solid ${palette.blue[30]}`,
-            color: palette.blue[70],
+            background: "#0090ff", // blue.bg.solid
+            border: "1px solid #0090ff", // blue.bg.solid
+            color: "#ffffff", // blue.fg.onSolid
             "&:hover": {
-              background: palette.blue[30],
+              background: "#0588f0", // blue.bg.solid.hover
+              border: "1px solid #0588f0", // blue.bg.solid.hover
             },
           },
           "& svg": {

From 8a35b7028424de22e8991868e0fad117e30ef562 Mon Sep 17 00:00:00 2001
From: Reza Banazadeh <92025027+0xRezaa@users.noreply.github.com>
Date: Tue, 20 Oct 2026 12:24:25 +0200
Subject: [PATCH 3/3] Restore the light blue pressed state of
 `GrayToBlueIconButton`

---
 .../src/pages/shared/file-preview-search.tsx          |  8 +++++++-
 .../src/pages/shared/gray-to-blue-icon-button.tsx     | 11 ++++-------
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/apps/hash-frontend/src/pages/shared/file-preview-search.tsx b/apps/hash-frontend/src/pages/shared/file-preview-search.tsx
index 8141bf760d2..a6be798aa0e 100644
--- a/apps/hash-frontend/src/pages/shared/file-preview-search.tsx
+++ b/apps/hash-frontend/src/pages/shared/file-preview-search.tsx
@@ -121,7 +121,13 @@ export const FilePreviewSearch = ({
               }}
               sx={{ "& svg": { fontSize: 13 }, p: 0.5 }}
             >
-              <FontCaseRegularIcon />
+              <FontCaseRegularIcon
+                sx={{
+                  fill: ({ palette }) =>
+                    ignoreCase ? undefined : palette.blue[70],
+                  transition: ({ transitions }) => transitions.create("fill"),
+                }}
+              />
             </GrayToBlueIconButton>
           </Tooltip>
           <Collapse orientation="horizontal" in={!!searchText} timeout={200}>
diff --git a/apps/hash-frontend/src/pages/shared/gray-to-blue-icon-button.tsx b/apps/hash-frontend/src/pages/shared/gray-to-blue-icon-button.tsx
index 5f53b9a6dd2..f4e7084575b 100644
--- a/apps/hash-frontend/src/pages/shared/gray-to-blue-icon-button.tsx
+++ b/apps/hash-frontend/src/pages/shared/gray-to-blue-icon-button.tsx
@@ -24,15 +24,12 @@ export const GrayToBlueIconButton = ({ sx, ...props }: IconButtonProps) => {
             border: `1px solid ${palette.blue[25]}`,
             color: "blue.70",
           },
-          // `@hashintel/ds-components` tokens, as hex because their CSS
-          // variables only resolve inside `.hash-ds-root`.
           '&[aria-pressed="true"]': {
-            background: "#0090ff", // blue.bg.solid
-            border: "1px solid #0090ff", // blue.bg.solid
-            color: "#ffffff", // blue.fg.onSolid
+            background: palette.blue[20],
+            border: `1px solid ${palette.blue[30]}`,
+            color: palette.blue[70],
             "&:hover": {
-              background: "#0588f0", // blue.bg.solid.hover
-              border: "1px solid #0588f0", // blue.bg.solid.hover
+              background: palette.blue[30],
             },
           },
           "& svg": {