fix: monaco diff view colors are not themed

Fixes #6232

Author: myan9

plugins/plugin-carbon-themes/web/scss/colors.scss

@@ -36,6 +36,12 @@
   --color-base0E: #fa75a6;
   --color-base0F: #d4bbff;
 
+  --color-base0B-rgb: 36, 161, 72;
+  --color-base08-rgb: 255, 131, 137;
+
+  --color-green-rgb: var(--color-base0B-rgb);
+  --color-red-rgb: var(--color-base08-rgb);
+
   --color-confirm-background: var(--color-sidecar-header);
   --color-confirm-foreground: var(--color-base06);
 
@@ -93,6 +99,12 @@
   --color-base0E: #d12765;
   --color-base0F: #8a3ffc;
 
+  --color-base0B-rgb: 25, 128, 56;
+  --color-base08-rgb: 218, 30, 40;
+
+  --color-green-rgb: var(--color-base0B-rgb);
+  --color-red-rgb: var(--color-base08-rgb);
+
   --color-red-sidecar: #fb4b53;
   --color-yellow-sidecar: #fdd13a;
   --color-green-sidecar: #56d679;

plugins/plugin-client-common/web/scss/components/Editor/Editor.scss

@@ -16,6 +16,7 @@
 
 @import '_mixins';
 @import './theme-alignment.css';
+@import './diff.scss';
 @import '~monaco-editor/min/vs/editor/editor.main.css';
 
 @include EditorContainer {

plugins/plugin-client-common/web/scss/components/Editor/diff.scss

@@ -0,0 +1,40 @@
+/*
+ * Copyright 2020 IBM Corporation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import '_mixins';
+
+body[kui-theme-style] {
+  .monaco-editor .inline-added-margin-view-zone,
+  .monaco-diff-editor .line-insert,
+  .monaco-diff-editor .char-insert,
+  .monaco-editor .line-insert,
+  .monaco-editor .char-insert {
+    background-color: rgba(var(--color-green-rgb), 0.2);
+  }
+
+  .monaco-editor .inline-deleted-margin-view-zone,
+  .monaco-diff-editor .line-delete,
+  .monaco-diff-editor .char-delete {
+    background-color: rgba(var(--color-red-rgb), 0.2);
+  }
+
+  canvas.modified.diffOverviewRuler {
+    display: none;
+  }
+  canvas.original.diffOverviewRuler {
+    display: none;
+  }
+}

plugins/plugin-core-themes/web/scss/atelier-seaside.scss

@@ -25,6 +25,12 @@ body[kui-theme='Atelier'] {
   --color-base0E: #ad2bee;
   --color-base0F: #e619c3;
 
+  --color-base0B-rgb: 41, 163, 41;
+  --color-base08-rgb: 230, 25, 60;
+
+  --color-green-rgb: var(--color-base0B-rgb);
+  --color-red-rgb: var(--color-base08-rgb);
+
   --color-ui-06: hsla(120, 8%, 14%, 1);
 
   --color-yellow: var(--color-base09);

plugins/plugin-core-themes/web/scss/dark.scss

@@ -25,6 +25,12 @@ body[kui-theme='Dark'] {
   --color-base0E: #ffa0c2; /* MAGENTA: Keywords, Storage, Selector, Markup Italic, Diff Changed */
   --color-base0F: #d0b0ff; /* BROWN: Deprecated, Opening/Closing Embedded Language Tags, e.g. <?php ?> */
 
+  --color-base0B-rgb: 61, 187, 97;
+  --color-base08-rgb: 251, 75, 83;
+
+  --color-green-rgb: var(--color-base0B-rgb);
+  --color-red-rgb: var(--color-base08-rgb);
+
   --color-table-border1: #616466;
   --color-table-border2: #4d5358;
   --color-table-border3: #565151;

plugins/plugin-core-themes/web/scss/dracula.scss

@@ -25,6 +25,12 @@ body[kui-theme='Dracula'] {
   --color-base0E: #b45bcf;
   --color-base0F: #00f769;
 
+  --color-base0A-rgb: 0, 247, 105;
+  --color-base08-rgb: 234, 81, 178;
+
+  --color-green-rgb: var(--color-base0A-rgb);
+  --color-red-rgb: var(--color-base08-rgb);
+
   --color-green: var(--color-base0A);
   --color-yellow: var(--color-base0B);
 

plugins/plugin-core-themes/web/scss/gruvbox-dark-medium.scss

@@ -25,6 +25,11 @@ body[kui-theme='Gruvbox'] {
   --color-base0E: #d3869b;
   --color-base0F: #d65d0e;
 
+  --color-base08-rgb: 251, 73, 52;
+  --color-red-rgb: var(--color-base08-rgb);
+  --color-base0B-rgb: 184, 187, 38;
+  --color-green-rgb: var(--color-base0B-rgb);
+
   --color-latency-0: #1b7837;
   --color-latency-1: #7fbf7b;
   --color-latency-2: #d9f0d3;

plugins/plugin-core-themes/web/scss/light.scss

@@ -95,6 +95,11 @@ body[kui-theme='Light'] {
   --color-base0E: #d12764;
   --color-base0F: #8a3ffc;
 
+  --color-base0B-rgb: 29, 189, 90;
+  --color-green-rgb: var(--color-base0B-rgb);
+  --color-base08-rgb: 231, 29, 50;
+  --color-red-rgb: var(--color-base08-rgb);
+
   --color-name: var(--color-base0D);
   --color-map-key: var(--color-base0D);
 

plugins/plugin-core-themes/web/scss/lucario.scss

@@ -27,6 +27,11 @@ body[kui-theme='Lucario'] {
   --color-base0E: #ff73fd;
   --color-base0F: #e6b5ff;
 
+  --color-base08-rgb: 255, 108, 96;
+  --color-green-rgb: var(--color-base0B-rgb);
+  --color-base0B-rgb: 142, 228, 120;
+  --color-red-rgb: var(--color-base08-rgb);
+
   --color-ui-06: hsla(209, 25%, 22%, 1);
 
   --color-latency-0: #1b7837;

plugins/plugin-core-themes/web/scss/monokai.scss

@@ -24,4 +24,9 @@ body[kui-theme='Monokai'] {
   --color-base0D: #66d9ef;
   --color-base0E: #ae81ff;
   --color-base0F: #cc6633;
+
+  --color-base08-rgb: 249, 38, 114;
+  --color-red-rgb: var(--color-base08-rgb);
+  --color-base0B-rgb: 166, 226, 46;
+  --color-green-rgb: var(--color-base0B-rgb);
 }