Introduce transparent diff colors to fix overlay issues

We were using full opacity colors but monaco requires transparent colors

app/assets/stylesheets/framework/variables.scss

@@ -472,6 +472,22 @@ $line-added: #ecfdf0;
 $line-added-dark: #c7f0d2 !default;
 $line-removed: #fbe9eb;
 $line-removed-dark: #fac5cd !default;
+/*
+ * The transparent colors are used in Monaco editor. Using full opacity colors
+ * would hide other layers (selected text, matching brackets).
+ *
+ * When the transparent colors get layered on white background, they create their
+ * full opacity counterparts (computed with https://stackoverflow.com/a/12228643/606571):
+ *
+ *  - white + $line-added-transparent = $line-added
+ *  - white + $line-added-transparent + $line-added-dark-transparent = $line-added-dark
+ *
+ * More details: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/41553
+ */
+$line-added-transparent: rgba(160, 245, 180, 0.2);
+$line-added-dark-transparent: rgba(51, 188, 90, 0.2);
+$line-removed-transparent: rgba(235, 145, 155, 0.2);
+$line-removed-dark-transparent: rgba(246, 53, 85, 0.2);
 $line-number-old: #f9d7dc;
 $line-number-new: #ddfbe6;
 $line-number-select: #fbf2da;

app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss

@@ -19,14 +19,6 @@
     display: none;
   }
 
-  .monaco-editor .selected-text {
-    z-index: 1;
-  }
-
-  .monaco-editor .view-lines {
-    z-index: 2;
-  }
-
   .is-readonly .editor.original {
     .view-lines {
       cursor: default;
@@ -98,11 +90,11 @@
     }
 
     .char-insert {
-      background-color: $line-added-dark;
+      background-color: $line-added-dark-transparent;
     }
 
     .char-delete {
-      background-color: $line-removed-dark;
+      background-color: $line-removed-dark-transparent;
     }
 
     .line-numbers {
@@ -111,11 +103,11 @@
 
     .view-overlays {
       .line-insert {
-        background-color: $line-added;
+        background-color: $line-added-transparent;
       }
 
       .line-delete {
-        background-color: $line-removed;
+        background-color: $line-removed-transparent;
       }
     }
 

changelogs/unreleased/216491-monaco-diff-selection.yml

+---
+title: Selection Highlight Oversteps Bounds of Actual Selection in Web IDE
+merge_request: 41553
+author:
+type: fixed