fix(style): Use better text selection color (#1131)

* fix(style): Use better text selection color * Fix typo * Replace JS method color
mdn · Jun 9, 2023 · f92927f · f92927f
1 parent 4949ded
commit f92927f
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/editor/css/editor-libs/codemirror-override.css b/editor/css/editor-libs/codemirror-override.css
@@ -25,6 +25,15 @@
   border-color: var(--text-primary);
 }
 
+.cm-editor .cm-line::selection,
+.cm-editor .cm-line ::selection {
+  background-color: var(--selection-background-color) !important;
+}
+.cm-editor .cm-selectionBackground,
+.cm-editor.cm-focused .cm-selectionBackground {
+  background-color: initial;
+}
+
 /* Language specific rules */
 .cm-operator,
 .cm-variable {

diff --git a/editor/css/editor-libs/common.css b/editor/css/editor-libs/common.css
@@ -108,6 +108,7 @@
   --http-accent-background-color: #009a4630;
   --apis-accent-background-color: #9b65ff30;
   --learn-accent-background-color: #ff1f7230;
+  --selection-background-color: #d3e7ff;
   --plus-accent-engage: rgba(255, 42, 81, 0.7);
   --html-accent-engage: rgba(255, 42, 81, 0.7);
   --css-accent-engage: rgba(0, 133, 242, 0.7);
@@ -170,7 +171,7 @@
   --field-focus-border: #fff;
   --code-token-tag: #c1cff1;
   --code-token-punctuation: #9e9e9e;
-  --code-token-attribute-name: #ff97a0;
+  --code-token-attribute-name: #ffbb88;
   --code-token-attribute-value: #00d061;
   --code-token-comment: #9e9e9e;
   --code-token-default: #fff;
@@ -217,6 +218,7 @@
   --apis-accent-engage: rgba(174, 138, 255, 0.7);
   --learn-accent-engage: rgba(255, 109, 145, 0.7);
   --modal-backdrop-color: rgba(27, 27, 27, 0.7);
+  --selection-background-color: #233244;
   --blend-color: #00080;
   --text-primary-red: #ff97a0;
   --text-primary-green: #00d061;
@@ -317,6 +319,7 @@
     --http-accent-background-color: #009a4630;
     --apis-accent-background-color: #9b65ff30;
     --learn-accent-background-color: #ff1f7230;
+    --selection-background-color: #d3e7ff;
     --plus-accent-engage: rgba(255, 42, 81, 0.7);
     --html-accent-engage: rgba(255, 42, 81, 0.7);
     --css-accent-engage: rgba(0, 133, 242, 0.7);
@@ -382,7 +385,7 @@
     --field-focus-border: #fff;
     --code-token-tag: #c1cff1;
     --code-token-punctuation: #9e9e9e;
-    --code-token-attribute-name: #ff97a0;
+    --code-token-attribute-name: #ffbb88;
     --code-token-attribute-value: #00d061;
     --code-token-comment: #9e9e9e;
     --code-token-default: #fff;
@@ -434,6 +437,7 @@
     --text-primary-green: #00d061;
     --text-primary-blue: #8cb4ff;
     --text-primary-yellow: #c7b700;
+    --selection-background-color: #233244;
   }
 }