Removed a few custom colors and derived them from existing ones.

Fixed the color for the:
 - selected items in the Explorer,
 - warning `input`s,
 - set custom dialog background for the Arduino theme,
 - the query term matches in the command palette, and
 - react-select.

Signed-off-by: Akos Kitta <kittaakos@typefox.io>

arduino-ide-extension/src/browser/components/arduino-select.tsx

@@ -45,7 +45,7 @@ export class ArduinoSelect<T> extends Select<T> {
                 // `primary50`??? it's crazy but apparently, without this, we would get a light-blueish
                 // color when selecting an option in the select by clicking and then not releasing the button.
                 // https://react-select.com/styles#overriding-the-theme
-                primary50: 'var(--theia-arduino-selectItemHoverBackground)',
+                primary50: 'var(--theia-list-activeSelectionBackground)',
             }
         });
         const DropdownIndicator = () => <span className='fa fa-caret-down caret' />;

arduino-ide-extension/src/browser/components/component-list/list-item-renderer.tsx

@@ -51,7 +51,7 @@ export class ListItemRenderer<T extends ArduinoComponent> {
         const moreInfo = !!item.moreInfoLink && <a href={item.moreInfoLink} onClick={this.onMoreInfoClick}>More info</a>;
         const onClickInstall = () => install(item);
         const installButton = item.installable &&
-            <button className='install' onClick={onClickInstall}>INSTALL</button>;
+            <button className='theia-button install' onClick={onClickInstall}>INSTALL</button>;
 
         const onSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
             const version = event.target.value;