From 65264635efaf2340a8363541e56001b3f656970d Mon Sep 17 00:00:00 2001
From: "Plamen K. Kosseff" <333840+blackd@users.noreply.github.com>
Date: Sat, 19 Sep 2026 01:19:55 +0300
Subject: [PATCH] fix(ui): make text selection visibly contrast the background
 (#12123)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The global ::selection used --color-primary-light (14% primary), which
composites to about 1.1:1 against the dark page ground — selected text
was nearly indistinguishable from unselected. Give selection its own
token in both palettes and align the CodeMirror themes with the same
strengths.

Assisted-by: Claude:claude-fable-5

Signed-off-by: Plamen K. Kosseff <p.kosseff@gmail.com>
---
 core/http/react-ui/src/index.css        | 2 +-
 core/http/react-ui/src/theme.css        | 6 ++++++
 core/http/react-ui/src/utils/cmTheme.js | 4 ++--
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/core/http/react-ui/src/index.css b/core/http/react-ui/src/index.css
index 5eb60b194..738606065 100644
--- a/core/http/react-ui/src/index.css
+++ b/core/http/react-ui/src/index.css
@@ -32,7 +32,7 @@ body {
 
 /* Global selection + focus */
 ::selection {
-  background: var(--color-primary-light);
+  background: var(--color-selection-bg);
   color: var(--color-text-primary);
 }
 
diff --git a/core/http/react-ui/src/theme.css b/core/http/react-ui/src/theme.css
index 311ff9872..07976975d 100644
--- a/core/http/react-ui/src/theme.css
+++ b/core/http/react-ui/src/theme.css
@@ -28,6 +28,9 @@
   --color-primary-light: rgba(79, 140, 255, 0.14);
   --color-primary-border: rgba(79, 140, 255, 0.34);
 
+  /* Text selection */
+  --color-selection-bg: rgba(79, 140, 255, 0.38);
+
   --color-secondary: #8aa6cc;
   --color-secondary-hover: #9db6d8;
   --color-secondary-light: rgba(138, 166, 204, 0.12);
@@ -196,6 +199,9 @@
   --color-primary-light: rgba(47, 98, 216, 0.12);
   --color-primary-border: rgba(47, 98, 216, 0.34);
 
+  /* Text selection */
+  --color-selection-bg: rgba(47, 98, 216, 0.25);
+
   --color-secondary: #4a5769;
   --color-secondary-hover: #3a4553;
   --color-secondary-light: rgba(74, 87, 105, 0.1);
diff --git a/core/http/react-ui/src/utils/cmTheme.js b/core/http/react-ui/src/utils/cmTheme.js
index 2802a5e04..736e4e0d5 100644
--- a/core/http/react-ui/src/utils/cmTheme.js
+++ b/core/http/react-ui/src/utils/cmTheme.js
@@ -18,7 +18,7 @@ const darkEditorTheme = EditorView.theme({
   },
   '.cm-cursor, .cm-dropCursor': { borderLeftColor: '#4f8cff', borderLeftWidth: '2px' },
   '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
-    backgroundColor: 'rgba(79, 140, 255, 0.25)',
+    backgroundColor: 'rgba(79, 140, 255, 0.38)',
   },
   '.cm-gutters': {
     backgroundColor: '#131a23',
@@ -79,7 +79,7 @@ const lightEditorTheme = EditorView.theme({
   },
   '.cm-cursor, .cm-dropCursor': { borderLeftColor: '#5e81ac', borderLeftWidth: '2px' },
   '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
-    backgroundColor: 'rgba(94, 129, 172, 0.18)',
+    backgroundColor: 'rgba(94, 129, 172, 0.28)',
   },
   '.cm-gutters': {
     backgroundColor: '#e5e9f0',