Extract color values into constants

elastic · Dec 14, 2023 · 9b18fd2 · 9b18fd2
1 parent d738826
commit 9b18fd2
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 17 deletions.
diff --git a/...on/public/detection_engine/rule_management/components/rule_details/json_diff/constants.ts b/...on/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)',
+    },
+  },
+};
diff --git a/...n/public/detection_engine/rule_management/components/rule_details/json_diff/diff_view.tsx b/...n/public/detection_engine/rule_management/components/rule_details/json_diff/diff_view.tsx
@@ -27,6 +27,13 @@ import unidiff from 'unidiff';
 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;
@@ -138,11 +145,6 @@ 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 DARK_THEME_CLASS_NAME = 'rule-update-diff-dark-theme';
-
 const CustomStyles: React.FC = ({ children }) => {
   const { euiTheme } = useEuiTheme();
 
@@ -163,53 +165,53 @@ const CustomStyles: React.FC = ({ children }) => {
     /* Gutter of a line with deletions */
     .${GUTTER_CLASS_NAME}.diff-gutter-delete {
       font-weight: bold;
-      background: rgb(255, 215, 213);
+      background: ${COLORS.light.gutterBackground.deletion};
     }
     .${DARK_THEME_CLASS_NAME} .${GUTTER_CLASS_NAME}.diff-gutter-delete {
-      background: rgba(248, 81, 73, 0.3);
+      background: ${COLORS.dark.gutterBackground.deletion};
     }
 
     /* Gutter of a line with insertions */
     .${GUTTER_CLASS_NAME}.diff-gutter-insert {
       font-weight: bold;
-      background: rgb(204, 255, 216);
+      background: ${COLORS.light.gutterBackground.insertion};
     }
     .${DARK_THEME_CLASS_NAME} .${GUTTER_CLASS_NAME}.diff-gutter-insert {
-      background: rgba(63, 185, 80, 0.3);
+      background: ${COLORS.dark.gutterBackground.insertion};
     }
 
     /* Background of a line with deletions */
     .${CODE_CLASS_NAME}.diff-code-delete {
-      background: rgb(255, 235, 233);
+      background: ${COLORS.light.lineBackground.deletion};
     }
     .${DARK_THEME_CLASS_NAME} .${CODE_CLASS_NAME}.diff-code-delete {
-      background: rgba(248, 81, 73, 0.1);
+      background: ${COLORS.dark.lineBackground.deletion};
     }
 
     /* Background of a line with insertions */
     .${CODE_CLASS_NAME}.diff-code-insert {
-      background: rgb(230, 255, 236);
+      background: ${COLORS.light.lineBackground.insertion};
     }
     .${DARK_THEME_CLASS_NAME} .${CODE_CLASS_NAME}.diff-code-insert {
-      background: rgba(46, 160, 67, 0.15);
+      background: ${COLORS.dark.lineBackground.insertion};
     }
 
     /* Accented background of removed characters / words */
     .${CODE_CLASS_NAME}.diff-code-delete .diff-code-edit {
       font-weight: 700;
-      background: rgba(255, 129, 130, 0.4);
+      background: ${COLORS.light.characterBackground.deletion};
     }
     .${DARK_THEME_CLASS_NAME} .${CODE_CLASS_NAME}.diff-code-delete .diff-code-edit {
-      background: rgba(248, 81, 73, 0.4);
+      background: ${COLORS.dark.characterBackground.deletion};
     }
 
     /* Accented background of inserted characters / words */
     .${CODE_CLASS_NAME}.diff-code-insert .diff-code-edit {
       font-weight: 700;
-      background: rgb(171, 242, 188);
+      background: ${COLORS.light.characterBackground.insertion};
     }
     .${DARK_THEME_CLASS_NAME} .${CODE_CLASS_NAME}.diff-code-insert .diff-code-edit {
-      background: rgba(46, 160, 67, 0.4);
+      background: ${COLORS.dark.characterBackground.insertion};
     }
   `;