use VS Code variables

Author: francescospissu

arduino-ide-extension/src/browser/style/boards-config-dialog.css

@@ -15,7 +15,7 @@ div.dialogContent.select-board-dialog > div.head .title {
   font-weight: 400;
   letter-spacing: 0.02em;
   font-size: 1.2em;
-  color: var(--theia-arduino-branding-primary);
+  color: var(--theia-editorWidget-foreground);
   margin-bottom: 10px;
 }
 
@@ -24,7 +24,7 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected {
 }
 
 div#select-board-dialog .selectBoardContainer .body .list .item.selected i {
-  color: var(--theia-arduino-branding-primary);
+  color: var(--theia-list-activeSelectionIconForeground);
 }
 
 #select-board-dialog .selectBoardContainer .search,
@@ -77,7 +77,7 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i {
 
 #select-board-dialog .selectBoardContainer .body .container .content .loading {
   font-size: var(--theia-ui-font-size1);
-  color: var(--theia-arduino-branding-secondary);
+  color: var(--theia-editorWidget-foreground);
   padding: 10px 5px 10px 10px;
   text-transform: uppercase;
   /* The max, min-height comes from `.body .list` 200px + 47px top padding - 2 * 10px top padding */
@@ -145,9 +145,10 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i {
 
 .arduino-boards-toolbar-item-container {
   align-items: center;
-  background: var(--theia-arduino-toolbar-dropdown-background);
+  background: var(--theia-dropdown-background);
   border-radius: 1px;
-  color: var(--theia-arduino-toolbar-dropdown-label);
+  color: var(--theia-dropdown-foreground);
+  border: 1px solid var(--theia-dropdown-border);
   display: flex;
   gap: 10px;
   height: 28px;
@@ -164,12 +165,9 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i {
   font-size: 16px;
 }
 
-.arduino-boards-toolbar-item--protocol {
-  color: var(--theia-arduino-toolbar-dropdown-label);
-}
-
+.arduino-boards-toolbar-item--protocol ,
 .arduino-boards-dropdown-item--protocol {
-  color: var(--theia-arduino-toolbar-dropdown-label);
+  color: var(--theia-dropdown-foreground);
 }
 
 .arduino-boards-toolbar-item-container
@@ -198,25 +196,28 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i {
 .arduino-boards-dropdown-list {
   margin: -1px;
   z-index: 1;
-  border: 1px solid var(--theia-arduino-toolbar-dropdown-border);
+  border: 1px solid var(--theia-dropdown-border);
 }
 
 .arduino-boards-dropdown-list:focus {
-  border: 1px solid var(--theia-arduino-toolbar-dropdown-borderActive);
+  border-style: solid;
+  border-width: 1px;
+  border-color: var(--theia-focus-border);
 }
 
 .arduino-boards-dropdown-list--items-container {
   overflow: auto;
   max-height: 404px;
+  background: var(--theia-dropdown-background);
 }
 
 .arduino-boards-dropdown-list--items-container::-webkit-scrollbar {
-  background: var(--theia-arduino-toolbar-dropdown-background);
+  background: var(--theia-list-activeSelectionBackground);
 }
 
 .arduino-boards-dropdown-item {
-  background: var(--theia-arduino-toolbar-dropdown-background);
-  color: var(--theia-arduino-toolbar-dropdown-label);
+  background: var(--theia-dropdown-background);
+  color: var(--theia-dropdown-foreground);
   cursor: default;
   display: flex;
   font-size: var(--theia-ui-font-size1);
@@ -238,29 +239,29 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i {
 }
 
 .arduino-boards-dropdown-item:hover {
-  background: var(--theia-arduino-toolbar-dropdown-option-backgroundHover);
+  background: var(--theia-list-hoverBackground);
 }
 
 .arduino-boards-dropdown-item--selected,
 .arduino-boards-dropdown-item--selected:hover {
-  background: var(--theia-arduino-toolbar-dropdown-option-backgroundSelected);
-  border: 1px solid var(--theia-arduino-toolbar-dropdown-option-backgroundSelected);
+  background: var(--theia-list-activeSelectionBackground);
+  border: 1px solid var(--theia-list-activeSelectionBackground);
 }
 
 .arduino-boards-dropdown-item--selected
-  .arduino-boards-dropdown-item--port-label {
-    color: var(--theia-arduino-toolbar-dropdown-label);
+.arduino-boards-dropdown-item--port-label {
+  color: var(--theia-list-activeSelectionForeground);
 }
 
 .arduino-boards-dropdown-item--selected .fa {
-  color: var(--theia-arduino-toolbar-dropdown-iconSelected);
+  color: var(--theia-list-activeSelectionIconForeground);
 }
 
 .arduino-boards-dropdown-item .fa-check {
   align-self: center;
 }
 
 .arduino-board-dropdown-footer {
-  color: var(--theia-arduino-branding-primary);
-  border-top: 1px solid var(--theia-arduino-toolbar-dropdown-border);
+  color: var(--theia-textLink-foreground);
+  border-top: 1px solid var(--theia-dropdown-border);
 }

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

@@ -96,7 +96,7 @@
 
 .cloud-sketchbook-welcome > .item .link {
     cursor: pointer;
-    color: var(--theia-arduino-branding-primary);
+    color: var(--theia-textLink-foreground);
 }
 
 .pull-sketch-icon {

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

@@ -173,18 +173,18 @@
 
 /* Output */
 .theia-output .editor-container {
-    background-color: var(--theia-arduino-output-background);
+    background-color: var(--theia-terminal-background);
 }
 
 .theia-output .monaco-editor .lines-content.monaco-editor-background {
-    background-color: var(--theia-arduino-output-background);
+    background-color: var(--theia-terminal-background);
 }
 
 .theia-output .monaco-editor .lines-content.monaco-editor-background .view-lines .view-line .mtk1:not(.theia-output-error):not(.theia-output-warning) {
-    color: var(--theia-arduino-output-foreground);
+    color: var(--theia-terminal-foreground);
 }
 
 .theia-output .monaco-editor .margin {
     border-right: none;
-    background-color: var(--theia-arduino-output-background);
+    background-color: var(--theia-terminal-background);
 }