search

elastic / kibana

Your window into the Elastic Stack
https://www.elastic.co/products/kibana
Other
19.47k stars 8.04k forks source link

[Console][Monaco] No contrast between selected text and current line colors #186772

Open sakurai-youhei opened 6 days ago

sakurai-youhei commented 6 days ago

Kibana version: 74a202a79a116d3b56396783c465522bc56fc59c

Elasticsearch version: 8.15.0-SNAPSHOT

Server OS version: Linux wsl 5.15.146.1-microsoft-standard-WSL2 #1 SMP Thu Jan 11 04:09:03 UTC 2024 x86_64 x86_64 x86_64 GNU/Linux

Browser version: Chrome Version 126.0.6478.63 (Official Build) (64-bit)

Browser OS version: Windows 11 10.0.22621 N/A Build 22621

Original install method (e.g. download page, yum, from source, etc.): Build from source

Describe the bug: It's pretty hard (or impossible) to distinguish selected text in the current line due to no contrast in the text & background colors.

Steps to reproduce:

  1. Go to Kibana > Dev Tools > Console.
  2. Type in GET 1234567890.
  3. Select a part of the text from 2 to 0.

Expected behavior:

The selected part should be obvious like 8.14.1 below. selected-8141

Screenshots (if relevant): selected-main

elasticmachine commented 6 days ago

Pinging @elastic/kibana-management (Team:Kibana Management)

sakurai-youhei commented 6 days ago

The editor.selectionBackground has been set to #343551 (dark theme) and #E3E4ED (light theme) since ebe22f468b0d47ed5853cb89de2a28439caa0c5b, while the selected line's background color is transparentized #343741 (dark theme) and #D3DAE6 (light theme). That's why it is hard to distinguish two colors.

https://github.com/elastic/kibana/blob/6c36d72df7985f6fb899c6c8d03f38590d396f5b/src/plugins/console/public/styles/_app.scss#L130-L135

https://github.com/elastic/eui/blob/a7f6d8479de9402b48673d38e84116ace54fbf35/packages/eui/src/themes/amsterdam/_colors_dark.scss#L22

https://github.com/elastic/eui/blob/a7f6d8479de9402b48673d38e84116ace54fbf35/packages/eui/src/themes/amsterdam/_colors_light.scss#L22