register new toolbar button colors and use list.activeSelectionBackground for active tree items

Author: Alberto Iannaccone

arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx

@@ -598,7 +598,7 @@ export class ArduinoFrontendContribution
           'Color of the Arduino IDE foreground which is used for dialogs, such as the Select Board dialog.',
       },
       {
-        id: 'arduino.toolbar.background',
+        id: 'arduino.toolbar.button.background',
         defaults: {
           dark: 'button.background',
           light: 'button.background',
@@ -608,7 +608,7 @@ export class ArduinoFrontendContribution
           'Background color of the toolbar items. Such as Upload, Verify, etc.',
       },
       {
-        id: 'arduino.toolbar.hoverBackground',
+        id: 'arduino.toolbar.button.hoverBackground',
         defaults: {
           dark: 'button.hoverBackground',
           light: 'button.foreground',

arduino-ide-extension/src/browser/style/main.css

@@ -20,11 +20,11 @@
     align-items: center;
     height: 24px;
     width: 24px;
-    background: var(--theia-arduino-toolbar-background);
+    background: var(--theia-arduino-toolbar-button-background);
 }
 
 .p-TabBar-toolbar .item.arduino-tool-item.enabled:hover > div {
-    background: var(--theia-arduino-toolbar-hoverBackground);
+    background: var(--theia-arduino-toolbar-button-hoverBackground);
 }
 
 .arduino-verify-sketch--toolbar,
@@ -178,7 +178,7 @@
 }
 
 #arduino-open-sketch-control--toolbar--container {
-    background-color: var(--theia-arduino-toolbar-background);
+    background-color: var(--theia-arduino-toolbar-button-background);
     border-radius: 1px;
 }
 

arduino-ide-extension/src/browser/style/sketchbook.css

@@ -44,7 +44,7 @@
 
 .active-sketch {
   font-weight: 500;
-  background-color: var(--theia-button-disabledBackground) !important;
+  background-color: var(--theia-list-activeSelectionBackground) !important;
   color: var(--theia-list-inactiveSelectionForeground) !important;
 
 }