monaco: fix focused quick-input

The commit fixes the styling for the monaco `quick-input` by introducing
additional colors (through the `ColorRegistry`) and applying specific
styling when an entry is currently focused.

The changes should:
- properly apply a foreground color for focused entries (including
  label, keybinding, separator).
- display properly when focused and fuzzy search results are present.

Signed-off-by: vince-fugnitto <vincent.fugnitto@ericsson.com>

packages/core/src/browser/common-frontend-contribution.ts

@@ -1225,6 +1225,8 @@ export class CommonFrontendContribution implements FrontendApplicationContributi
             { id: 'list.hoverBackground', defaults: { dark: '#2A2D2E', light: '#F0F0F0' }, description: 'List/Tree background when hovering over items using the mouse.' },
             { id: 'list.hoverForeground', description: 'List/Tree foreground when hovering over items using the mouse.' },
             { id: 'list.filterMatchBackground', defaults: { dark: 'editor.findMatchHighlightBackground', light: 'editor.findMatchHighlightBackground' }, description: 'Background color of the filtered match.' },
+            { id: 'list.highlightForeground', defaults: { dark: '#18A3FF', light: '#0066BF', hc: 'focusBorder' }, description: 'List/Tree foreground color of the match highlights when searching inside the list/tree.' },
+            { id: 'list.focusHighlightForeground', defaults: { dark: 'list.highlightForeground', light: 'list.activeSelectionForeground', hc: 'list.highlightForeground' }, description: 'List/Tree foreground color of the match highlights on actively focused items when searching inside the list/tree.' },
             { id: 'tree.inactiveIndentGuidesStroke', defaults: { dark: Color.transparent('tree.indentGuidesStroke', 0.4), light: Color.transparent('tree.indentGuidesStroke', 0.4), hc: Color.transparent('tree.indentGuidesStroke', 0.4) }, description: 'Tree stroke color for the inactive indentation guides.' },
 
             // Editor Group & Tabs colors should be aligned with https://code.visualstudio.com/api/references/theme-color#editor-groups-tabs
@@ -1468,6 +1470,27 @@ export class CommonFrontendContribution implements FrontendApplicationContributi
                     hc: 'sideBar.foreground'
                 }, description: 'Quick Input foreground color. The Quick Input widget is the container for views like the color theme picker.'
             },
+            {
+                id: 'quickInput.list.focusBackground', defaults: {
+                    dark: undefined,
+                    light: undefined,
+                    hc: undefined
+                }, description: 'quickInput.list.focusBackground deprecation. Please use quickInputList.focusBackground instead'
+            },
+            {
+                id: 'quickInputList.focusForeground', defaults: {
+                    dark: 'list.activeSelectionForeground',
+                    light: 'list.activeSelectionForeground',
+                    hc: 'list.activeSelectionForeground'
+                }, description: 'Quick picker foreground color for the focused item'
+            },
+            {
+                id: 'quickInputList.focusBackground', defaults: {
+                    dark: 'list.activeSelectionBackground',
+                    light: 'list.activeSelectionBackground',
+                    hc: undefined
+                }, description: 'Quick picker background color for the focused item.'
+            },
 
             // Panel colors should be aligned with https://code.visualstudio.com/api/references/theme-color#panel-colors
             {

packages/monaco/src/browser/style/index.css

@@ -140,7 +140,24 @@
 }
 
 .quick-input-list .monaco-list-row.focused {
-  background-color: var(--theia-quickInput-list-focusBackground) !important;
+  background-color: var(--theia-quickInputList-focusBackground) !important;
+}
+
+.quick-input-list .monaco-keybinding > .monaco-keybinding-key {
+  color: inherit !important;
+}
+
+.quick-input-list .monaco-list-row.focused,
+.quick-input-list .monaco-list-row.focused .monaco-highlighted-label,
+.quick-input-list .monaco-list-row.focused .monaco-highlighted-label .codicon,
+.quick-input-list .monaco-list-row.focused .quick-input-list-entry .quick-input-list-separator,
+.quick-input-list .monaco-list-row.focused .monaco-highlighted-label .monaco-keybinding .monaco-keybinding-key,
+.quick-input-list .monaco-list-row.focused .monaco-highlighted-label .monaco-keybinding .monaco-keybinding-key-separator {
+  color: var(--theia-quickInputList-focusForeground) !important;
+}
+
+.quick-input-list .monaco-list-row.focused .monaco-highlighted-label .highlight {
+  color: var(--theia-list-focusHighlightForeground) !important;
 }
 
 .monaco-list-rows