High Contrast theme update (#1265)

Author: francescospissu

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

@@ -49,3 +49,14 @@
     padding-top: 0 !important;
     padding-bottom: 0 !important;
 }
+
+
+/* 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 .arduino-select__option--is-selected {
+    outline: 1px solid var(--theia-focusBorder);
+}
+
+.hc-black.hc-theia.theia-hc .arduino-select__option--is-focused {
+    outline: 1px dashed var(--theia-focusBorder);
+}

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

@@ -148,6 +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);
   display: flex;
   gap: 10px;
   height: 28px;
@@ -264,3 +265,13 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i {
   color: var(--theia-arduino-branding-primary);
   border-top: 1px solid var(--theia-arduino-toolbar-dropdown-border);
 }
+
+/* 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 #select-board-dialog .selectBoardContainer .body .list .item:hover {
+  outline: 1px dashed var(--theia-focusBorder);
+}
+
+.hc-black.hc-theia.theia-hc div#select-board-dialog .selectBoardContainer .body .list .item.selected {
+  outline: 1px solid var(--theia-focusBorder);
+}

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

@@ -71,4 +71,10 @@
   width: 100%;
   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/index.css

@@ -135,3 +135,23 @@ button.secondary[disabled], .theia-button.secondary[disabled] {
 .fa-reload {
   font-size: 14px;
 }
+
+
+/* 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 button.theia-button:hover, 
+.hc-black.hc-theia.theia-hc .theia-button:hover {
+  outline: 1px dashed var(--theia-focusBorder);
+}
+
+.hc-black.hc-theia.theia-hc button.theia-button,
+.hc-black.hc-theia.theia-hc .theia-button,
+.hc-black.hc-theia.theia-hc button.theia-button.secondary {
+  border: 1px solid var(--theia-button-border);
+}
+
+.hc-black.hc-theia.theia-hc .theia-notification-list-item:hover:not(:focus) {
+  background-color: var(--theia-notifications-background);
+  outline: 1px dashed var(--theia-focusBorder);
+  outline-offset: -2px;
+}

arduino-ide-extension/src/browser/style/list-widget.css

@@ -145,3 +145,14 @@ https://github.com/arduino/arduino-pro-ide/issues/82 */
 .component-list-item a:hover {
     text-decoration: underline;
 }
+
+/* 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 .component-list-item .header .installed:hover:before {
+    background-color: transparent;
+    outline: 1px dashed var(--theia-focusBorder);    
+}
+
+.hc-black.hc-theia.theia-hc .component-list-item .header .installed:before {
+    border: 1px solid var(--theia-button-border);
+}

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

@@ -188,3 +188,58 @@
     border-right: none;
     background-color: var(--theia-arduino-output-background);
 }
+
+
+/* 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 .p-TabBar-toolbar .item.arduino-tool-item.enabled:hover > div {
+    background: var(--theia-arduino-toolbar-button-background);
+    outline: 1px dashed var(--theia-focusBorder);
+}
+
+.hc-black.hc-theia.theia-hc .p-TabBar-toolbar .item.arduino-tool-item.enabled:hover > div.toggle-serial-plotter,
+.hc-black.hc-theia.theia-hc .p-TabBar-toolbar .item.arduino-tool-item.enabled:hover > div.toggle-serial-monitor {
+    background: transparent;
+}
+
+.hc-black.hc-theia.theia-hc .item.arduino-tool-item.toggled .arduino-verify-sketch--toolbar,
+.hc-black.hc-theia.theia-hc .item.arduino-tool-item.toggled .arduino-upload-sketch--toolbar {
+    background-color: var(--theia-arduino-toolbar-button-background) !important;
+    outline: 1px solid var(--theia-focusBorder);
+}
+
+.hc-black.hc-theia.theia-hc .arduino-boards-dropdown-item:hover {
+    background: var(--theia-dropdown-background);
+}
+
+.hc-black.hc-theia.theia-hc .arduino-boards-dropdown-item:hover {
+    outline: 1px dashed var(--theia-focusBorder);
+    outline-offset: -2px;
+}
+
+.hc-black.hc-theia.theia-hc #theia-main-content-panel .p-TabBar .p-TabBar-tab.p-mod-current {
+    outline: 1px solid var(--theia-focusBorder);
+    outline-offset: -4px;
+}
+
+.hc-black.hc-theia.theia-hc #theia-main-content-panel .p-TabBar .p-TabBar-tab:hover {
+    outline: 1px dashed var(--theia-focusBorder);
+    outline-offset: -4px;
+}
+
+.hc-black.hc-theia.theia-hc .p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-closable > .p-TabBar-tabCloseIcon:hover {
+    outline: 1px dashed var(--theia-focusBorder);
+}
+
+.hc-black.hc-theia.theia-hc .quick-input-list .monaco-list-row.focused {
+    outline: 1px dotted var(--theia-focusBorder);
+}
+
+.hc-black.hc-theia.theia-hc .quick-input-list .monaco-list-row:hover {
+    outline: 1px dashed var(--theia-focusBorder);
+}
+
+.hc-black.hc-theia.theia-hc .quick-input-widget {
+    outline: 1px solid var(--theia-contrastBorder);
+    outline-offset: -1px;
+}

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

@@ -70,3 +70,19 @@
 .theia-Tree .ReactVirtualized__List:focus .theia-TreeNode.theia-mod-selected {
   background: var(--theia-list-inactiveSelectionBackground);
 }
+
+
+/* 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 .theia-TreeNode:hover {
+  outline: 1px dashed var(--theia-focusBorder);
+}
+
+.hc-black.hc-theia.theia-hc .theia-Tree .theia-TreeNode.theia-mod-selected {
+  outline: 1px dotted var(--theia-focusBorder);
+}
+
+.hc-black.hc-theia.theia-hc .theia-Tree:focus .theia-TreeNode.theia-mod-selected, 
+.hc-black.hc-theia.theia-hc .theia-Tree .ReactVirtualized__List:focus .theia-TreeNode.theia-mod-selected {
+  outline: 1px solid var(--theia-focusBorder);
+}