CSS rules for HC theme

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);
+}
+
+div#select-board-dialog .selectBoardContainer .body .list .item.selected {
+  outline: 1px solid var(--theia-focusBorder);
+}

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

@@ -135,3 +135,15 @@ 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 .theia-button:focus {
+  outline: 1px solid var(--theia-focusBorder);
+}

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

@@ -188,3 +188,59 @@
     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 .arduino-upload-sketch--toolbar, 
+.hc-black.hc-theia.theia-hc .p-TabBar-toolbar .item.arduino-tool-item .arduino-verify-sketch--toolbar, 
+.hc-black.hc-theia.theia-hc .p-TabBar-toolbar .item.arduino-tool-item .arduino-start-debug {
+    background: transparent;
+}
+
+.hc-black.hc-theia.theia-hc .arduino-verify-sketch--toolbar-icon,
+.hc-black.hc-theia.theia-hc .arduino-upload-sketch--toolbar-icon,
+.hc-black.hc-theia.theia-hc .arduino-start-debug-icon {
+    background-color: var(--theia-arduino-toolbar-button-secondary-label);
+}
+
+.hc-black.hc-theia.theia-hc .p-TabBar-toolbar .item.arduino-tool-item.enabled:hover > div {
+    background: transparent;
+    outline: 1px dashed var(--theia-focusBorder);
+}
+
+.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: transparent !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 > div {
+    outline: 1px dashed var(--theia-focusBorder);
+}
+
+.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);
+}

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);
+}