From a41dbfb40a917a3dc4c2f9fca26ce4fde171f448 Mon Sep 17 00:00:00 2001 From: Pavel M <91208591+r4zr32d3k1l@users.noreply.github.com> Date: Fri, 8 May 2026 20:33:52 +0200 Subject: [PATCH] [One Workflow] Use EUI primary tint for word occurrence highlight in YAML editor (#267667) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Before image After image ## Summary Replaces the default gray Monaco word-occurrence highlight (visible in the workflows YAML editor when the cursor sits on a token like `name` or `type`) with `euiTheme.colors.backgroundLightPrimary`, so the highlight matches the EUI primary accents already used elsewhere in the editor (selection, hover) instead of reading as a generic gray box. The override is scoped via `[data-test-subj='workflowYamlEditor']` so it only affects the workflows YAML editor — no impact on other Monaco editors in Kibana. ### Before / After - **Before:** Monaco's default neutral gray `wordHighlightText` background. - **After:** EUI `backgroundLightPrimary`, visually consistent with the rest of the editor's primary-tinted highlights. ## Test plan - [ ] Open a workflow in the workflows YAML editor. - [ ] Place the cursor on a YAML key (e.g. `name`, `type`) — all matching occurrences should be highlighted in soft EUI primary blue, not gray. - [ ] Verify the change does NOT bleed into other Monaco-based editors in Kibana (Console, Lens formula bar, etc.). - [ ] Verify in both light and dark EUI themes. 🤖 Generated with [Claude Code](https://claude.com/claude-code) --------- Co-authored-by: Claude Opus 4.7 (cherry picked from commit 090eedfc778cbba025e76b75c337299ac35a7135) --- .../styles/use_workflows_monaco_theme.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/platform/plugins/shared/workflows_management/public/widgets/workflow_yaml_editor/styles/use_workflows_monaco_theme.ts b/src/platform/plugins/shared/workflows_management/public/widgets/workflow_yaml_editor/styles/use_workflows_monaco_theme.ts index f5c53ccfe3676..03161bcd3c831 100644 --- a/src/platform/plugins/shared/workflows_management/public/widgets/workflow_yaml_editor/styles/use_workflows_monaco_theme.ts +++ b/src/platform/plugins/shared/workflows_management/public/widgets/workflow_yaml_editor/styles/use_workflows_monaco_theme.ts @@ -48,6 +48,15 @@ export function useWorkflowsMonacoTheme() { // Transparent backgrounds, they are set by the styles of the editor container behind. 'editor.background': '#00000000', 'editor.selectionBackground': chroma(transparentize(euiTheme.colors.primary, 0.1)).hex(), + 'editor.wordHighlightTextBackground': chroma( + transparentize(euiTheme.colors.primary, 0.1) + ).hex(), + 'editor.wordHighlightBackground': chroma( + transparentize(euiTheme.colors.primary, 0.1) + ).hex(), + 'editor.wordHighlightStrongBackground': chroma( + transparentize(euiTheme.colors.primary, 0.1) + ).hex(), 'editorGutter.background': '#00000000', 'minimap.background': '#00000000', 'diffEditor.unchangedRegionBackground': '#00000000',