Skip to content

Commit

Permalink
[Console Monaco] Improve color contrast of selection highlighting (#1…
Browse files Browse the repository at this point in the history
…89060)

Closes #186772

## Summary

This PR fixes the color contrast issue with the selection highlighting
in Console Monaco.

Before:
<img width="1378" alt="Screenshot 2024-07-24 at 12 49 09"
src="https://github.com/user-attachments/assets/a233127d-8fb7-4882-8d3f-e8dd9cf53210">

Now:
<img width="1378" alt="Screenshot 2024-07-24 at 11 59 08"
src="https://github.com/user-attachments/assets/d2bf79b6-b622-4a51-af18-8c7b4f6ddcd5">

Note: I changed the request highlighting color from grey to blue
(`euiColorPrimary`) since we are soon starting work on the Console
redesign project, in which the new request highlighting color is blue
(see screenshot from Figma project below). With the blue color, the
contrast seems to be much higher.

<details>
<summary>Screenshot from Figma project</summary>
<img width="966" alt="Screenshot 2024-07-24 at 12 53 55"
src="https://github.com/user-attachments/assets/c7afe72c-5d1c-43bd-a02e-e28547681441">


</details>

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
  • Loading branch information
ElenaStoeva and kibanamachine authored Jul 30, 2024
1 parent fafdd16 commit 64c61e0
Showing 1 changed file with 1 addition and 1 deletion.
2 changes: 1 addition & 1 deletion src/plugins/console/public/styles/_app.scss
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@
* The highlighting for the selected requests in the monaco editor
*/
.console__monaco_editor__selectedRequests {
background: transparentize($euiColorLightShade, .3);
background: transparentize($euiColorPrimary, .9);
}
/*
* The z-index for the autocomplete suggestions popup
Expand Down

0 comments on commit 64c61e0

Please sign in to comment.