chore: DH-21115: Define diff editor colors (#2592)

- Defined new theme variables for diff editor colors and added them to our Monaco theme

Author: ericlln

packages/components/src/theme/theme-dark/theme-dark-semantic-editor.css

@@ -80,4 +80,26 @@
   /* Links */
   --dh-color-editor-link-foreground: var(--dh-color-accent-1000);
   --dh-color-editor-link-active-fg: var(--dh-color-accent-1100);
+
+  /* Diff */
+  --dh-color-editor-diff-inserted-text-bg: color-mix(
+    in srgb,
+    var(--dh-color-positive) 35%,
+    transparent
+  );
+  --dh-color-editor-diff-removed-text-bg: color-mix(
+    in srgb,
+    var(--dh-color-negative) 35%,
+    transparent
+  );
+  --dh-color-editor-diff-inserted-line-bg: color-mix(
+    in srgb,
+    var(--dh-color-positive) 20%,
+    transparent
+  );
+  --dh-color-editor-diff-removed-line-bg: color-mix(
+    in srgb,
+    var(--dh-color-negative) 20%,
+    transparent
+  );
 }

packages/components/src/theme/theme-light/theme-light-semantic-editor.css

@@ -78,4 +78,26 @@
   /* Links */
   --dh-color-editor-link-foreground: var(--dh-color-accent-1000);
   --dh-color-editor-link-active-fg: var(--dh-color-accent-1100);
+
+  /* Diff */
+  --dh-color-editor-diff-inserted-text-bg: color-mix(
+    in srgb,
+    var(--dh-color-positive) 35%,
+    transparent
+  );
+  --dh-color-editor-diff-removed-text-bg: color-mix(
+    in srgb,
+    var(--dh-color-negative) 35%,
+    transparent
+  );
+  --dh-color-editor-diff-inserted-line-bg: color-mix(
+    in srgb,
+    var(--dh-color-positive) 20%,
+    transparent
+  );
+  --dh-color-editor-diff-removed-line-bg: color-mix(
+    in srgb,
+    var(--dh-color-negative) 20%,
+    transparent
+  );
 }

packages/console/src/monaco/MonacoTheme.module.scss

@@ -103,4 +103,18 @@
   text-link-foreground: var(--dh-color-editor-link-foreground);
   text-link-active-foreground: var(--dh-color-editor-link-active-fg);
   editor-link-active-foreground: var(--dh-color-editor-link-active-fg);
+
+  // diff editor
+  diff-editor-inserted-text-background: var(
+    --dh-color-editor-diff-inserted-text-bg
+  );
+  diff-editor-removed-text-background: var(
+    --dh-color-editor-diff-removed-text-bg
+  );
+  diff-editor-inserted-line-background: var(
+    --dh-color-editor-diff-inserted-line-bg
+  );
+  diff-editor-removed-line-background: var(
+    --dh-color-editor-diff-removed-line-bg
+  );
 }

packages/console/src/monaco/MonacoUtils.ts

@@ -239,6 +239,14 @@ class MonacoUtils {
         MonacoTheme['editor-bracket-foreground6'],
       'editorBracketHighlight.unexpectedBracket.foreground':
         MonacoTheme['editor-unexpected-bracket-foreground'],
+      'diffEditor.insertedTextBackground':
+        MonacoTheme['diff-editor-inserted-text-background'],
+      'diffEditor.removedTextBackground':
+        MonacoTheme['diff-editor-removed-text-background'],
+      'diffEditor.insertedLineBackground':
+        MonacoTheme['diff-editor-inserted-line-background'],
+      'diffEditor.removedLineBackground':
+        MonacoTheme['diff-editor-removed-line-background'],
     };
 
     monaco.editor.defineTheme('dh-dark', {