From fbd5730206d7054f0d16dbba5403c3cfa936c15d Mon Sep 17 00:00:00 2001
From: Eyo Okon Eyo <eyo.eyo@elastic.co>
Date: Tue, 10 Dec 2024 12:01:41 +0100
Subject: [PATCH] switch hardcoded colors for eui colors

---
 packages/kbn-monaco/src/code_editor/theme.ts |  8 +++-----
 packages/kbn-monaco/src/console/theme.ts     | 21 ++++++++++----------
 2 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/packages/kbn-monaco/src/code_editor/theme.ts b/packages/kbn-monaco/src/code_editor/theme.ts
index 11678fe932bcf..cec8fe56c7b65 100644
--- a/packages/kbn-monaco/src/code_editor/theme.ts
+++ b/packages/kbn-monaco/src/code_editor/theme.ts
@@ -11,11 +11,9 @@ import type { UseEuiTheme } from '@elastic/eui';
 import { monaco } from '../..';
 
 export function createTheme(
-  { colorMode, euiTheme }: UseEuiTheme,
+  { euiTheme }: UseEuiTheme,
   backgroundColor?: string
 ): monaco.editor.IStandaloneThemeData {
-  const selectionBackgroundColor = colorMode === 'DARK' ? '#343551' : '#E3E4ED';
-
   return {
     base: 'vs',
     inherit: true,
@@ -87,11 +85,11 @@ export function createTheme(
     ],
     colors: {
       'editor.foreground': euiTheme.colors.darkestShade,
-      'editor.background': backgroundColor ?? euiTheme.colors.backgroundBaseSubdued,
+      'editor.background': backgroundColor ?? euiTheme.colors.backgroundBasePlain,
       'editorLineNumber.foreground': euiTheme.colors.darkShade,
       'editorLineNumber.activeForeground': euiTheme.colors.darkShade,
       'editorIndentGuide.background1': euiTheme.colors.lightShade,
-      'editor.selectionBackground': selectionBackgroundColor,
+      'editor.selectionBackground': euiTheme.colors.backgroundBaseInteractiveSelect,
       'editorWidget.border': euiTheme.colors.lightShade,
       'editorWidget.background': euiTheme.colors.lightestShade,
       'editorCursor.foreground': euiTheme.colors.darkestShade,
diff --git a/packages/kbn-monaco/src/console/theme.ts b/packages/kbn-monaco/src/console/theme.ts
index f0a75bdf646eb..8de65ae129403 100644
--- a/packages/kbn-monaco/src/console/theme.ts
+++ b/packages/kbn-monaco/src/console/theme.ts
@@ -13,23 +13,22 @@ import { themeRuleGroupBuilderFactory } from '../common/theme';
 
 const buildRuleGroup = themeRuleGroupBuilderFactory();
 
-const getConsoleColorConfig = (themeVars: UseEuiTheme['euiTheme'], isDarkMode: boolean) => {
+const getConsoleColorConfig = (themeVars: UseEuiTheme['euiTheme']) => {
   return {
     background: themeVars.colors.backgroundBaseSubdued,
-    booleanTextColor: '#585CF6',
-    methodTextColor: '#DD0A73',
-    urlTextColor: '#00A69B',
-    defaultStatusBackgroundColor: isDarkMode ? '#191B20' : '#F7F8FA',
-    successStatusBackgroundColor: isDarkMode ? '#212B30' : '#E7F5F5',
-    primaryStatusBackgroundColor: isDarkMode ? '#1E232D' : '#EBF1F7',
-    warningStatusBackgroundColor: isDarkMode ? '#2C2B25' : '#FBF6E9',
-    dangerStatusBackgroundColor: isDarkMode ? '#2E2024' : '#F6E6E7',
+    booleanTextColor: themeVars.colors.textPrimary,
+    methodTextColor: themeVars.colors.textAccent,
+    urlTextColor: themeVars.colors.accentSecondary,
+    defaultStatusBackgroundColor: themeVars.colors.backgroundLightAccentSecondary,
+    successStatusBackgroundColor: themeVars.colors.backgroundLightSuccess,
+    primaryStatusBackgroundColor: themeVars.colors.backgroundLightPrimary,
+    warningStatusBackgroundColor: themeVars.colors.backgroundLightWarning,
+    dangerStatusBackgroundColor: themeVars.colors.backgroundLightDanger,
   };
 };
 
 export const buildConsoleTheme = ({ colorMode, euiTheme, ...rest }: UseEuiTheme) => {
-  const isDarkMode = colorMode === 'DARK';
-  const consoleColors = getConsoleColorConfig(euiTheme, isDarkMode);
+  const consoleColors = getConsoleColorConfig(euiTheme);
 
   const themeBase = defaultThemesResolvers[CODE_EDITOR_DEFAULT_THEME_ID]({
     colorMode,