switch hardcoded colors for eui colors

elastic · Dec 11, 2024 · fbd5730 · fbd5730
1 parent 683c24f
commit fbd5730
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 16 deletions.
diff --git 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
@@ -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,