[8.12] [Security Solution] Prebuilt rules diffing style adjustments (#173187) (#173373)

# Backport

This will backport the following commits from `main` to `8.12`:
- [[Security Solution] Prebuilt rules diffing style adjustments
(#173187)](https://github.com/elastic/kibana/pull/173187)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Nikita
Indik","email":"nikita.indik@elastic.co"},"sourceCommit":{"committedDate":"2023-12-14T12:09:16Z","message":"[Security
Solution] Prebuilt rules diffing style adjustments
(#173187)\n\n**Resolves:
https://github.com/elastic/kibana/issues/173264**\r\n**Addresses:
https://github.com/elastic/kibana/issues/169160**\r\n\r\n##
Summary\r\nTweaks diff styling so that it's more readable in both light
and dark\r\nmodes.\r\n\r\n---\r\n\r\n#### Light mode\r\n<img
width=\"1178\" alt=\"Scherm­afbeelding 2023-12-13 om 17 37
07\"\r\nsrc=\"fe8620c7-407a-4355-8863-4a5a8e1425ea\">\r\n\r\n\r\n####
Dark mode\r\n<img width=\"1174\" alt=\"Scherm­afbeelding 2023-12-13 om
17 41
03\"\r\nsrc=\"a8df3b88-a482-455f-91d3-5e08f1381b8c\">","sha":"37af741c6e03afe9dc877600fe47960b5bac8f50","branchLabelMapping":{"^v8.13.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["enhancement","release_note:skip","Team:Detections
and Resp","Team: SecuritySolution","Team:Detection Rule
Management","Feature:Prebuilt Detection
Rules","ci:cloud-deploy","v8.12.0","v8.13.0"],"number":173187,"url":"https://github.com/elastic/kibana/pull/173187","mergeCommit":{"message":"[Security
Solution] Prebuilt rules diffing style adjustments
(#173187)\n\n**Resolves:
https://github.com/elastic/kibana/issues/173264**\r\n**Addresses:
https://github.com/elastic/kibana/issues/169160**\r\n\r\n##
Summary\r\nTweaks diff styling so that it's more readable in both light
and dark\r\nmodes.\r\n\r\n---\r\n\r\n#### Light mode\r\n<img
width=\"1178\" alt=\"Scherm­afbeelding 2023-12-13 om 17 37
07\"\r\nsrc=\"fe8620c7-407a-4355-8863-4a5a8e1425ea\">\r\n\r\n\r\n####
Dark mode\r\n<img width=\"1174\" alt=\"Scherm­afbeelding 2023-12-13 om
17 41
03\"\r\nsrc=\"a8df3b88-a482-455f-91d3-5e08f1381b8c\">","sha":"37af741c6e03afe9dc877600fe47960b5bac8f50"}},"sourceBranch":"main","suggestedTargetBranches":["8.12"],"targetPullRequestStates":[{"branch":"8.12","label":"v8.12.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.13.0","labelRegex":"^v8.13.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/173187","number":173187,"mergeCommit":{"message":"[Security
Solution] Prebuilt rules diffing style adjustments
(#173187)\n\n**Resolves:
https://github.com/elastic/kibana/issues/173264**\r\n**Addresses:
https://github.com/elastic/kibana/issues/169160**\r\n\r\n##
Summary\r\nTweaks diff styling so that it's more readable in both light
and dark\r\nmodes.\r\n\r\n---\r\n\r\n#### Light mode\r\n<img
width=\"1178\" alt=\"Scherm­afbeelding 2023-12-13 om 17 37
07\"\r\nsrc=\"fe8620c7-407a-4355-8863-4a5a8e1425ea\">\r\n\r\n\r\n####
Dark mode\r\n<img width=\"1174\" alt=\"Scherm­afbeelding 2023-12-13 om
17 41
03\"\r\nsrc=\"a8df3b88-a482-455f-91d3-5e08f1381b8c\">","sha":"37af741c6e03afe9dc877600fe47960b5bac8f50"}}]}]
BACKPORT-->

Co-authored-by: Nikita Indik <nikita.indik@elastic.co>

x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/json_diff/constants.ts

@@ -0,0 +1,42 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export const TABLE_CLASS_NAME = 'rule-update-diff-table';
+export const CODE_CLASS_NAME = 'rule-update-diff-code';
+export const GUTTER_CLASS_NAME = 'rule-update-diff-gutter';
+export const DARK_THEME_CLASS_NAME = 'rule-update-diff-dark-theme';
+
+export const COLORS = {
+  light: {
+    gutterBackground: {
+      deletion: 'rgb(255, 215, 213)',
+      insertion: 'rgb(204, 255, 216)',
+    },
+    lineBackground: {
+      deletion: 'rgb(255, 235, 233)',
+      insertion: 'rgb(230, 255, 236)',
+    },
+    characterBackground: {
+      deletion: 'rgba(255, 129, 130, 0.4)',
+      insertion: 'rgb(171, 242, 188)',
+    },
+  },
+  dark: {
+    gutterBackground: {
+      deletion: 'rgba(248, 81, 73, 0.3)',
+      insertion: 'rgba(63, 185, 80, 0.3)',
+    },
+    lineBackground: {
+      deletion: 'rgba(248, 81, 73, 0.1)',
+      insertion: 'rgba(46, 160, 67, 0.15)',
+    },
+    characterBackground: {
+      deletion: 'rgba(248, 81, 73, 0.4)',
+      insertion: 'rgba(46, 160, 67, 0.4)',
+    },
+  },
+};

x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/json_diff/diff_view.tsx

@@ -6,6 +6,7 @@
  */
 
 import React, { useMemo } from 'react';
+import classNames from 'classnames';
 import { css, Global } from '@emotion/react';
 import {
   Diff,
@@ -23,9 +24,16 @@ import type {
   HunkTokens,
 } from 'react-diff-view';
 import unidiff from 'unidiff';
-import { useEuiTheme } from '@elastic/eui';
+import { useEuiTheme, COLOR_MODES_STANDARD } from '@elastic/eui';
 import { Hunks } from './hunks';
 import { markEdits, DiffMethod } from './mark_edits';
+import {
+  TABLE_CLASS_NAME,
+  CODE_CLASS_NAME,
+  GUTTER_CLASS_NAME,
+  DARK_THEME_CLASS_NAME,
+  COLORS,
+} from './constants';
 
 interface UseExpandReturn {
   expandRange: (start: number, end: number) => void;
@@ -137,53 +145,73 @@ const convertToDiffFile = (oldSource: string, newSource: string) => {
   return diffFile;
 };
 
-const TABLE_CLASS_NAME = 'rule-update-diff-table';
-const CODE_CLASS_NAME = 'rule-update-diff-code';
-const GUTTER_CLASS_NAME = 'rule-update-diff-gutter';
-
 const CustomStyles: React.FC = ({ children }) => {
   const { euiTheme } = useEuiTheme();
 
   const customCss = css`
-    .${TABLE_CLASS_NAME} .diff-gutter-col {
-      width: ${euiTheme.size.xl};
-    }
-
-    .${CODE_CLASS_NAME}.diff-code, .${GUTTER_CLASS_NAME}.diff-gutter {
-      background: transparent;
-    }
-
-    .${GUTTER_CLASS_NAME}:nth-child(3) {
-      border-left: 1px solid ${euiTheme.colors.mediumShade};
-    }
-
-    .${GUTTER_CLASS_NAME}.diff-gutter-delete {
-      color: ${euiTheme.colors.dangerText};
-      font-weight: bold;
-    }
-
-    .${GUTTER_CLASS_NAME}.diff-gutter-insert {
-      color: ${euiTheme.colors.successText};
-      font-weight: bold;
-    }
-
     .${CODE_CLASS_NAME}.diff-code {
       padding: 0 ${euiTheme.size.l} 0 ${euiTheme.size.m};
     }
 
-    .${CODE_CLASS_NAME}.diff-code-delete .diff-code-edit,
-    .${CODE_CLASS_NAME}.diff-code-insert .diff-code-edit {
-      background: transparent;
+    .${TABLE_CLASS_NAME} .diff-gutter-col {
+      width: ${euiTheme.size.xl};
     }
 
+    /* Vertical line separating two sides of the diff view */
+    .${GUTTER_CLASS_NAME}:nth-child(3) {
+      border-left: 1px solid ${euiTheme.colors.mediumShade};
+    }
+
+    /* Gutter of a line with deletions */
+    .${GUTTER_CLASS_NAME}.diff-gutter-delete {
+      font-weight: bold;
+      background: ${COLORS.light.gutterBackground.deletion};
+    }
+    .${DARK_THEME_CLASS_NAME} .${GUTTER_CLASS_NAME}.diff-gutter-delete {
+      background: ${COLORS.dark.gutterBackground.deletion};
+    }
+
+    /* Gutter of a line with insertions */
+    .${GUTTER_CLASS_NAME}.diff-gutter-insert {
+      font-weight: bold;
+      background: ${COLORS.light.gutterBackground.insertion};
+    }
+    .${DARK_THEME_CLASS_NAME} .${GUTTER_CLASS_NAME}.diff-gutter-insert {
+      background: ${COLORS.dark.gutterBackground.insertion};
+    }
+
+    /* Background of a line with deletions */
+    .${CODE_CLASS_NAME}.diff-code-delete {
+      background: ${COLORS.light.lineBackground.deletion};
+    }
+    .${DARK_THEME_CLASS_NAME} .${CODE_CLASS_NAME}.diff-code-delete {
+      background: ${COLORS.dark.lineBackground.deletion};
+    }
+
+    /* Background of a line with insertions */
+    .${CODE_CLASS_NAME}.diff-code-insert {
+      background: ${COLORS.light.lineBackground.insertion};
+    }
+    .${DARK_THEME_CLASS_NAME} .${CODE_CLASS_NAME}.diff-code-insert {
+      background: ${COLORS.dark.lineBackground.insertion};
+    }
+
+    /* Accented background of removed characters / words */
     .${CODE_CLASS_NAME}.diff-code-delete .diff-code-edit {
-      color: ${euiTheme.colors.dangerText};
-      text-decoration: line-through;
+      font-weight: 700;
+      background: ${COLORS.light.characterBackground.deletion};
+    }
+    .${DARK_THEME_CLASS_NAME} .${CODE_CLASS_NAME}.diff-code-delete .diff-code-edit {
+      background: ${COLORS.dark.characterBackground.deletion};
     }
 
+    /* Accented background of inserted characters / words */
     .${CODE_CLASS_NAME}.diff-code-insert .diff-code-edit {
-      color: ${euiTheme.colors.successText};
-      text-decoration: underline;
+      font-weight: 700;
+      background: ${COLORS.light.characterBackground.insertion};
+    }
+    .${DARK_THEME_CLASS_NAME} .${CODE_CLASS_NAME}.diff-code-insert .diff-code-edit {
+      background: ${COLORS.dark.characterBackground.insertion};
     }
   `;
 
@@ -229,6 +257,12 @@ export const DiffView = ({
   */
   const tokens = useTokens(hunks, diffMethod, oldSource);
 
+  const { colorMode } = useEuiTheme();
+
+  const tableClassName = classNames(TABLE_CLASS_NAME, {
+    [DARK_THEME_CLASS_NAME]: colorMode === COLOR_MODES_STANDARD.dark,
+  });
+
   return (
     <CustomStyles>
       <Diff
@@ -240,7 +274,7 @@ export const DiffView = ({
         hunks={hunks}
         renderGutter={renderGutter}
         tokens={tokens}
-        className={TABLE_CLASS_NAME}
+        className={tableClassName}
         gutterClassName={GUTTER_CLASS_NAME}
         codeClassName={CODE_CLASS_NAME}
       >