From ed25ed6a6ca72f7f8247063e31459bd31d9d74c1 Mon Sep 17 00:00:00 2001
From: Raymond Hill <rhill@raymondhill.net>
Date: Fri, 4 Feb 2022 18:31:00 -0500
Subject: [PATCH] Fix selection color in codemirror editor

Related feedback:
- https://github.com/uBlockOrigin/uBlock-issues/discussions/1963#discussioncomment-2113694
---
 src/css/codemirror.css     |  9 +++++----
 src/css/themes/default.css | 18 ++++++++++--------
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/css/codemirror.css b/src/css/codemirror.css
index 95b87b093..b80db6568 100644
--- a/src/css/codemirror.css
+++ b/src/css/codemirror.css
@@ -15,9 +15,11 @@
 .CodeMirror-cursor {
     border-color: var(--cm-cursor);
     }
+.CodeMirror-selected {
+    background-color: var(--cm-selection-surface);
+    }
 .CodeMirror-focused .CodeMirror-selected {
-    background: var(--cm-selection-surface);
-    color: var(--cm-selection-ink);
+    background-color: var(--cm-selection-focused-surface);
     }
 .CodeMirror-foldmarker {
     color: var(--cm-foldmarker-ink);
@@ -31,8 +33,7 @@
 .CodeMirror-line::selection,
 .CodeMirror-line > span::selection,
 .CodeMirror-line > span > span::selection {
-    background: var(--cm-selection-surface);
-    color: var(--cm-selection-ink);
+    background-color: var(--cm-selection-surface);
     }
 .CodeMirror-linenumber {
     color: var(--cm-gutter-ink);
diff --git a/src/css/themes/default.css b/src/css/themes/default.css
index 2d3ab910c..65f289fb9 100644
--- a/src/css/themes/default.css
+++ b/src/css/themes/default.css
@@ -242,7 +242,7 @@
     --cloud-used-surface: rgb(var(--violet-60));
 
     /* codemirror */
-    --cm-active-line: var(--surface-1);
+    --cm-active-line: rgb(var(--gray-90));
     --cm-cursor: var(--ink-0);
     --cm-foldmarker-ink: rgb(var(--blue-40));
     --cm-gutter-border: var(--surface-1);
@@ -254,10 +254,10 @@
     --cm-merge-chunk-surface: rgb(var(--surface-0-rgb) / 40%);
     --cm-negative: #e32f00; /* h:15 S:100 Luv:50 */
     --cm-positive: #008a21; /* h:130 S:100 Luv:50 */
-    --cm-selection-surface: rgb(var(--primary-70) / 50%);
-    --cm-selection-ink: var(--ink-1);
-    --cm-searching-ink: inherit;
-    --cm-searching-surface: rgb(var(--yellow-20) / 80%);
+    --cm-selection-surface: rgb(var(--gray-90));
+    --cm-selection-focused-surface: rgb(var(--primary-90));
+    --cm-searching-ink: black;
+    --cm-searching-surface: #fee300cc /* h75 S:100 Luv:90 a:80% */;
     --cm-search-match-surface: rgb(var(--yellow-40) / 50%);
 
     /* syntax highlight: static filtering */
@@ -322,14 +322,16 @@
     --cloud-used-surface: rgb(var(--violet-20));
 
     /* codemirror */
+    --cm-active-line: rgb(var(--gray-20));
     --cm-merge-copy-ink: rgb(var(--blue-30));
     --cm-foldmarker-ink: rgb(var(--blue-20));
     --cm-matchingbracket: rgb(var(--green-30) / 50%);
     --cm-negative: #ff8982; /* h:15 S:100 Luv:70 */
     --cm-positive: #00c634; /* h:130 S:100 Luv:70 */
-    --cm-selection-surface: rgb(var(--primary-30) / 50%);
-    --cm-searching-ink: var(--surface-0);
-    --cm-searching-surface: rgb(var(--yellow-20));
+    --cm-selection-surface: rgb(var(--gray-20));
+    --cm-selection-focused-surface: rgb(var(--primary-20));
+    --cm-searching-ink: black;
+    --cm-searching-surface: #fee300cc /* h75 S:100 Luv:90 a:80% */;
 
     /* syntax highlight: static filtering */
     --sf-comment-ink: var(--ink-3);