[One Workflow] Use EUI primary tint for word occurrence highlight in YAML editor

[r4zr32d3k1l]

Before

After

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

[Kiryous]

The workflow editor already defines its own Monaco theme (WORKFLOWS_MONACO_EDITOR_THEME in use_workflows_monaco_theme.ts) and overrides things like editor.selectionBackground and editor.hoverHighlightBackground through the colors map. Since .wordHighlightText is a first-class Monaco token (editor.wordHighlightTextBackground), could we set it there instead of a CSS rule?

Two upsides:

1. No need for the [data-test-subj='workflowYamlEditor'] selector to scope the rule. The workflows theme is only attached to the workflow YAML editor (and the manual run form), so the override scopes naturally and we avoid styling off a data-test-subj (it's meant for test selection).
2. It lives next to the other Monaco color overrides (selection, hover, suggest widget, etc.), so future readers find them in one place.

Roughly:

// use_workflows_monaco_theme.ts, inside colors: { ... }
'editor.wordHighlightTextBackground': euiTheme.colors.backgroundLightPrimary,
// optional, for completeness if YAML ever gets read/write semantics:
'editor.wordHighlightBackground': euiTheme.colors.backgroundLightPrimary,
'editor.wordHighlightStrongBackground': euiTheme.colors.backgroundLightPrimary,

One thing to double-check: the existing theme uses chroma(transparentize(euiTheme.colors.primary, 0.1)) for selection, vs backgroundLightPrimary here. They're close but not identical. Worth picking one and being consistent so the highlight, selection, and hover tints don't look like three slightly different blues stacked on top of each other.

[r4zr32d3k1l]

Good call, done in c6fccdd:

• Moved the override into use_workflows_monaco_theme.ts using editor.wordHighlightTextBackground (plus the read/write variants for completeness), and removed the CSS rule + the [data-test-subj='workflowYamlEditor'] selector hack.
• For the consistency point, aligned with the existing selection pattern: chroma(transparentize(euiTheme.colors.primary, 0.1)).hex(). The highlight, selection, and hover now all live on the same primary-tinted ramp (selection/word at 0.1, hover at 0.15).

[Kiryous]

Quick note on the broader Monaco-theme question, since the PR title is editor-scoped: I checked the shared kbn-monaco default theme (src/platform/packages/shared/kbn-monaco/src/code_editor/theme.ts) and it doesn't set any editor.wordHighlight* tokens, so Console / Lens / every other Kibana Monaco editor still shows Monaco's default gray. So this PR is genuinely workflow-editor-only and there's no precedent to align with yet.

If the new tinted highlight feels nicer in practice, a follow-up could promote editor.wordHighlightTextBackground (+ the read/write variants) into the shared theme so the rest of Kibana picks it up too. Probably out of scope for this PR, just flagging.

[r4zr32d3k1l]

Thanks for checking the broader theme context @Kiryous! Agreed this PR is editor-scoped for now — happy to open a follow-up to promote editor.wordHighlight*Background into the shared kbn-monaco theme once we see how the tinted highlight reads in practice across other Monaco editors (Console, Lens, etc.).

[Kiryous]

LGTM

[kibanamachine]

💛 Build succeeded, but was flaky

• Buildkite Build
• Commit: 9123178

Failed CI Steps

• Scout Lane #7 - stateful-classic / default

Test Failures

• [job] [logs] Scout Lane #7 - stateful-classic / default / local-stateful-classic - APM integration not installed but setup completed - Admin user
• [job] [logs] Scout Lane #7 - stateful-classic / default / local-stateful-classic - Observability Landing Page (discover.isEsqlDefault enabled) - redirects to onboarding when no logs data exists
• [job] [logs] Scout Lane #7 - stateful-classic / default / local-stateful-classic - Profiling is not setup and no data is loaded - Admin users
• [job] [logs] Scout Lane #7 - stateful-classic / default / local-stateful-classic - Profiling is not setup and no data is loaded - Viewer users

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
workflowsManagement	2.3MB	2.3MB	+268.0B

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
agentBuilderWorkflows	21.2KB	21.5KB	+268.0B

History

• 💛 Build #438754 was flaky c6fccdd

[kibanamachine]

Starting backport for target branches: 9.4

https://github.com/elastic/kibana/actions/runs/25572737006

[kibanamachine]

💚 All backports created successfully

Status	Branch	Result
✅	9.4

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation