fix(ui): make text selection visibly contrast the background (#12123)

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

@@ -32,7 +32,7 @@ body {
 
 /* Global selection + focus */
 ::selection {
-  background: var(--color-primary-light);
+  background: var(--color-selection-bg);
   color: var(--color-text-primary);
 }
 

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);

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',