From 271fcc070e35abec6519502b9aa64dfcfcd078c6 Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Mon, 24 Aug 2026 23:37:31 +0100
Subject: [PATCH] fix: use a gray spotlight selection instead of primary blue

---
 apps/client/src/styles/a11y-overrides.css | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/apps/client/src/styles/a11y-overrides.css b/apps/client/src/styles/a11y-overrides.css
index 25c1eafe7..65f31b212 100644
--- a/apps/client/src/styles/a11y-overrides.css
+++ b/apps/client/src/styles/a11y-overrides.css
@@ -33,3 +33,20 @@
   color: var(--mantine-color-dimmed);
   -webkit-text-fill-color: var(--mantine-color-dimmed);
 }
+
+/* Spotlight's selected action ships as primary-filled blue with white text,
+ * but our custom action children (gray badge, dimmed snippet, gray icons)
+ * keep their light-surface colors on it and drop below WCAG AA 4.5:1
+ * (WCAG 1.4.3). Use a gray selection one step above the gray-0/dark-6
+ * hover instead - it matches the app's selection styling (we use no blue
+ * fills) and keeps every child at its already-passing resting contrast.
+ */
+.mantine-Spotlight-action[data-selected] {
+  background-color: light-dark(
+    var(--mantine-color-gray-1),
+    var(--mantine-color-dark-5)
+  );
+  color: var(--mantine-color-text);
+  --action-description-color: var(--mantine-color-dimmed);
+  --action-description-opacity: 1;
+}