Custom colors clean up (#1252)

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

@@ -183,34 +183,6 @@ export class ArduinoFrontendContribution
 
   registerColors(colors: ColorRegistry): void {
     colors.register(
-      {
-        id: 'arduino.branding.primary',
-        defaults: {
-          dark: 'statusBar.background',
-          light: 'statusBar.background',
-        },
-        description:
-          'The primary branding color, such as dialog titles, library, and board manager list labels.',
-      },
-      {
-        id: 'arduino.branding.secondary',
-        defaults: {
-          dark: 'statusBar.background',
-          light: 'statusBar.background',
-        },
-        description:
-          'Secondary branding color for list selections, dropdowns, and widget borders.',
-      },
-      {
-        id: 'arduino.foreground',
-        defaults: {
-          dark: 'editorWidget.background',
-          light: 'editorWidget.background',
-          hc: 'editorWidget.background',
-        },
-        description:
-          'Color of the Arduino IDE foreground which is used for dialogs, such as the Select Board dialog.',
-      },
       {
         id: 'arduino.toolbar.button.background',
         defaults: {
@@ -225,8 +197,8 @@ export class ArduinoFrontendContribution
         id: 'arduino.toolbar.button.hoverBackground',
         defaults: {
           dark: 'button.hoverBackground',
-          light: 'button.foreground',
-          hc: 'textLink.foreground',
+          light: 'button.hoverBackground',
+          hc: 'button.background',
         },
         description:
           'Background color of the toolbar items when hovering over them. Such as Upload, Verify, etc.',
@@ -261,24 +233,6 @@ export class ArduinoFrontendContribution
         description:
           'Toggle color of the toolbar items when they are currently toggled (the command is in progress)',
       },
-      {
-        id: 'arduino.output.foreground',
-        defaults: {
-          dark: 'editor.foreground',
-          light: 'editor.foreground',
-          hc: 'editor.foreground',
-        },
-        description: 'Color of the text in the Output view.',
-      },
-      {
-        id: 'arduino.output.background',
-        defaults: {
-          dark: 'editor.background',
-          light: 'editor.background',
-          hc: 'editor.background',
-        },
-        description: 'Background color of the Output view.',
-      },
       {
         id: 'arduino.toolbar.dropdown.border',
         defaults: {
@@ -303,8 +257,8 @@ export class ArduinoFrontendContribution
         id: 'arduino.toolbar.dropdown.background',
         defaults: {
           dark: 'tab.unfocusedActiveBackground',
-          light: 'tab.unfocusedActiveBackground',
-          hc: 'tab.unfocusedActiveBackground',
+          light: 'dropdown.background',
+          hc: 'dropdown.background',
         },
         description: 'Background color of the Board Selector.',
       },
@@ -312,18 +266,18 @@ export class ArduinoFrontendContribution
       {
         id: 'arduino.toolbar.dropdown.label',
         defaults: {
-          dark: 'foreground',
-          light: 'foreground',
-          hc: 'foreground',
+          dark: 'dropdown.foreground',
+          light: 'dropdown.foreground',
+          hc: 'dropdown.foreground',
         },
         description: 'Font color of the Board Selector.',
       },
       {
         id: 'arduino.toolbar.dropdown.iconSelected',
         defaults: {
-          dark: 'statusBar.background',
-          light: 'statusBar.background',
-          hc: 'statusBar.background',
+          dark: 'list.activeSelectionIconForeground',
+          light: 'list.activeSelectionIconForeground',
+          hc: 'list.activeSelectionIconForeground',
         },
         description:
           'Color of the selected protocol icon in the Board Selector.',
@@ -331,18 +285,18 @@ export class ArduinoFrontendContribution
       {
         id: 'arduino.toolbar.dropdown.option.backgroundHover',
         defaults: {
-          dark: 'editor.background',
-          light: 'editor.background',
-          hc: 'editor.background',
+          dark: 'list.hoverBackground',
+          light: 'list.hoverBackground',
+          hc: 'list.hoverBackground',
         },
         description: 'Background color on hover of the Board Selector options.',
       },
       {
         id: 'arduino.toolbar.dropdown.option.backgroundSelected',
         defaults: {
-          dark: 'editor.background',
-          light: 'editor.background',
-          hc: 'editor.background',
+          dark: 'list.activeSelectionBackground',
+          light: 'list.activeSelectionBackground',
+          hc: 'list.activeSelectionBackground',
         },
         description:
           'Background color of the selected board in the Board Selector.',

arduino-ide-extension/src/browser/data/dark.color-theme.json

@@ -8,6 +8,7 @@
     "list.inactiveSelectionForeground": "#dae3e3",
     "list.inactiveSelectionBackground": "#434f54",
     "list.hoverBackground": "#1f272a",
+    "list.activeSelectionIconForeground": "#0ca1a6",
     "progressBar.background": "#005c5f",
     "editor.background": "#1f272a",
     "editor.foreground": "#dae3e3",
@@ -16,6 +17,7 @@
     "editorCursor.foreground": "#434f54",
     "editorWhitespace.foreground": "#bfbfbf",
     "editorWidget.background": "#171e21",
+    "editorWidget.foreground": "#dae3e3",
     "focusBorder": "#dae3e3",
     "menubar.selectionBackground": "#ffffff",
     "menubar.selectionForeground": "#212121",
@@ -28,7 +30,7 @@
     "titleBar.activeBackground": "#171e21",
     "titleBar.activeForeground": "#dae3e3",
     "terminal.background": "#000000",
-    "terminal.foreground": "#e0e0e0",
+    "terminal.foreground": "#ffffff",
     "dropdown.border": "#7fcbcd",
     "dropdown.background": "#2c353a",
     "dropdown.foreground": "#dae3e3",
@@ -64,7 +66,8 @@
     "settings.headerForeground": "#dae3e3",
     "tree.indentGuidesStroke": "#374146",
     "tab.unfocusedActiveForeground": "#dae3e3",
-    "tab.inactiveBackground": "#171e21"
+    "tab.inactiveBackground": "#171e21",
+    "textLink.foreground": "#0ca1a6"
   },
   "tokenColors": [
     {

arduino-ide-extension/src/browser/data/default.color-theme.json

@@ -8,6 +8,7 @@
     "list.inactiveSelectionForeground": "#4e5b61",
     "list.inactiveSelectionBackground": "#dae3e3",
     "list.hoverBackground": "#ecf1f1",
+    "list.activeSelectionIconForeground": "#008184",
     "progressBar.background": "#005c5f",
     "editor.background": "#ffffff",
     "editor.foreground": "#4e5b61",
@@ -16,6 +17,7 @@
     "editorCursor.foreground": "#434f54",
     "editorWhitespace.foreground": "#bfbfbf",
     "editorWidget.background": "#f7f9f9",
+    "editorWidget.foreground": "#4e5b61",
     "focusBorder": "#7fcbcd",
     "menubar.selectionBackground": "#ffffff",
     "menubar.selectionForeground": "#212121",
@@ -28,7 +30,7 @@
     "titleBar.activeBackground": "#006d70",
     "titleBar.activeForeground": "#f7f9f9",
     "terminal.background": "#000000",
-    "terminal.foreground": "#e0e0e0",
+    "terminal.foreground": "#ffffff",
     "dropdown.border": "#dae3e3",
     "dropdown.background": "#ffffff",
     "dropdown.foreground": "#4e5b61",
@@ -64,7 +66,8 @@
     "settings.headerForeground": "#4e5b61",
     "tree.indentGuidesStroke": "#dae3e3",
     "tab.unfocusedActiveForeground": "#4e5b61",
-    "tab.inactiveBackground": "#ecf1f1"
+    "tab.inactiveBackground": "#ecf1f1",
+    "textLink.foreground": "#008184"
   },
   "tokenColors": [
     {

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,
@@ -43,7 +43,7 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i {
   margin: 0;
   vertical-align: top;
   display: flex;
-  color: var(--theia-editor-foreground);
+  color: var(--theia-input-foreground);
 }
 
 #select-board-dialog .selectBoardContainer .body .search input:focus {
@@ -66,7 +66,7 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i {
 }
 
 #select-board-dialog .selectBoardContainer .body .container .content .title {
-  color: #7f8c8d;
+  color: var(--theia-editorWidget-foreground);
   padding: 0px 0px 10px 0px;
   text-transform: uppercase;
 }
@@ -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 */
@@ -148,7 +148,7 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i {
   background: var(--theia-arduino-toolbar-dropdown-background);
   border-radius: 1px;
   color: var(--theia-arduino-toolbar-dropdown-label);
-  border: 1px solid var(--theia-dropdown-border);
+  border: 1px solid var(--theia-arduino-toolbar-dropdown-border);
   display: flex;
   gap: 10px;
   height: 28px;
@@ -165,10 +165,7 @@ 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);
 }
@@ -206,6 +203,7 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i {
 .arduino-boards-dropdown-list--items-container {
   overflow: auto;
   max-height: 404px;
+  background: var(--theia-arduino-toolbar-dropdown-background);
 }
 
 .arduino-boards-dropdown-list--items-container::-webkit-scrollbar {
@@ -247,8 +245,8 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i {
 }
 
 .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-arduino-toolbar-dropdown-label);
 }
 
 .arduino-boards-dropdown-item--selected .fa {
@@ -260,8 +258,8 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i {
 }
 
 .arduino-board-dropdown-footer {
-  color: var(--theia-arduino-branding-primary);
-  border-top: 1px solid var(--theia-arduino-toolbar-dropdown-border);
+  color: var(--theia-secondaryButton-foreground);
+  border-top: 1px solid var(--theia-dropdown-border);
 }
 
 /* High Contrast Theme rules */

arduino-ide-extension/src/browser/style/certificate-uploader-dialog.css

@@ -7,7 +7,7 @@
 }
 .certificate-uploader-dialog .arduino-select__control {
   height: 31px;
-  background: var(--theia-menubar-selectionBackground) !important;
+  background: var(--theia-dropdown-background) !important;
 }
 
 .certificate-uploader-dialog .dialogRow > button{
@@ -15,9 +15,10 @@
 }
 
 .certificate-uploader-dialog .certificate-list {
-  border: 1px solid #BDC7C7;
+  border: 1px solid var(--theia-editorWidget-border);
   border-radius: 2px;;
-  background: var(--theia-menubar-selectionBackground) !important;
+  color: var(--theia-editor-foreground);
+  background-color: var(--theia-editor-background);
   overflow: auto;
   height: 120px;
   flex: 1;
@@ -60,9 +61,10 @@
 
 .certificate-add {
   padding: 16px;
-  background-color: var(--theia-list-hoverBackground);
   border-radius: 3px;
-  border: 1px solid #BDC7C7;
+  border: 1px solid var(--theia-editorWidget-border);
+  color: var(--theia-editorWidget-foreground);
+  background-color: var(--theia-editorWidget-background);
 }
 
 .certificate-add input {
@@ -72,9 +74,3 @@
   box-sizing: border-box;
 
 }
-
-/* High Contrast Theme rules */
-/* TODO: Remove it when the Theia version is upgraded to 1.27.0 and use Theia APIs to implement it*/
-.hc-black.hc-theia.theia-hc .certificate-add {
-  background-color: var(--theia-editorWidget-background);
-}

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/dialogs.css

@@ -17,7 +17,7 @@
     font-weight: 500;
     background-color: transparent;
     font-size: var(--theia-ui-font-size2);
-    color: var(--theia-list-inactiveSelectionForeground);
+    color: var(--theia-editorWidget-foreground);
     min-height: 0;
 }
 

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

@@ -6,7 +6,7 @@
 }
 
 .monaco-list-row.show-file-icons.focused {
-    background-color: #d6ebff;
+    background-color: var(--theia-quickInputList-focusBackground);
 }
 
 .monaco-editor .view-overlays .compiler-error {

arduino-ide-extension/src/browser/style/ide-updater-dialog.css

@@ -27,9 +27,9 @@
 }
 
 .ide-updater-dialog .changelog-container {
-  color: var(--theia-dropdown-foreground);
-  background-color: var(--theia-dropdown-background);
-  border: 1px solid var(--theia-tree-indentGuidesStroke);
+  color: var(--theia-editor-foreground);
+  background-color: var(--theia-editor-background);
+  border: 1px solid var(--theia-editorWidget-border);
   border-radius: 2px;
   font-size: 12px;
   height: 180px;
@@ -39,7 +39,7 @@
 }
 
 .ide-updater-dialog .changelog-container a {
-  color: #018184;
+  color: var(--theia-textLink-foreground);
 }
 
 .ide-updater-dialog .changelog-container a:hover {
@@ -48,13 +48,13 @@
 }
 
 .ide-updater-dialog .changelog-container code {
-  background: #ecf1f1;
+  background: var(--theia-textBlockQuote-background);
   border-radius: 2px;
   padding: 0 2px;
 }
 
 .ide-updater-dialog .changelog-container a code {
-  color: #018184;
+  color: var(--theia-textLink-foreground);
 }
 
 .ide-updater-dialog .buttons-container {

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

@@ -173,20 +173,20 @@
 
 /* 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);
 }
 
 

arduino-ide-extension/src/browser/style/progress-bar.css

@@ -3,7 +3,7 @@
 }
 
 .progress-bar--outer {
-  background: #e5e5e5;
+  background: var(--theia-editorWidget-background);
   border-radius: 11px;
   height: 6px;
   position: relative;
@@ -13,7 +13,7 @@
 .progress-bar--inner {
   transition: width 1s;
   height: 100%;
-  background: #008184;
+  background: var(--theia-progressBar-background);
   border-radius: 11px;
 }
 

arduino-ide-extension/src/browser/style/settings-dialog.css

@@ -66,6 +66,17 @@
     color: var(--theia-textLink-activeForeground);
 }
 
+.arduino-settings-dialog .react-tabs__tab--selected {
+    background: var(--theia-editorWidget-background);
+    border-color: var(--theia-tab-activeBorder);
+    color: var(--theia-tab-activeForeground);
+    border-radius: 5px 5px 0 0;
+}
+
+.arduino-settings-dialog .react-tabs__tab-list {
+    border-color: var(--theia-tab-activeBorder);
+}
+
 .arduino-settings-dialog .react-tabs__tab-panel {
     padding-bottom: 8px;
 }

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

@@ -45,7 +45,7 @@
 .active-sketch {
   font-weight: 500;
   background-color: var(--theia-list-activeSelectionBackground) !important;
-  color: var(--theia-list-inactiveSelectionForeground) !important;
+  color: var(--theia-list-activeSelectionForeground) !important;
 
 }
 
@@ -69,6 +69,7 @@
 .theia-Tree:focus .theia-TreeNode.theia-mod-selected,
 .theia-Tree .ReactVirtualized__List:focus .theia-TreeNode.theia-mod-selected {
   background: var(--theia-list-inactiveSelectionBackground);
+  color: var(--theia-list-inactiveSelectionForeground) !important;
 }
 
 

arduino-ide-extension/src/browser/style/user-fields-dialog.css

@@ -14,7 +14,7 @@
 }
 
 .user-fields-dialog-content .field-label {
-  color: #2c353a;
+  color: var(--theia-editorWidget-foreground);
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
@@ -29,4 +29,4 @@
 
 .user-fields-dialog-content .button-container {
   justify-content: flex-end;
-}
+}