From 749d4ff801d5c9ee84e054153b77e872f6bca641 Mon Sep 17 00:00:00 2001 From: Francesco Spissu Date: Thu, 28 Jul 2022 18:19:27 +0200 Subject: [PATCH 1/8] CSS rules for HC theme --- .../src/browser/style/arduino-select.css | 11 ++++ .../browser/style/boards-config-dialog.css | 11 ++++ .../src/browser/style/index.css | 12 ++++ .../src/browser/style/main.css | 56 +++++++++++++++++++ .../src/browser/style/sketchbook.css | 16 ++++++ 5 files changed, 106 insertions(+) diff --git a/arduino-ide-extension/src/browser/style/arduino-select.css b/arduino-ide-extension/src/browser/style/arduino-select.css index 25b4989bb..001c1bd9b 100644 --- a/arduino-ide-extension/src/browser/style/arduino-select.css +++ b/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); +} diff --git a/arduino-ide-extension/src/browser/style/boards-config-dialog.css b/arduino-ide-extension/src/browser/style/boards-config-dialog.css index 369b3ef45..82afb55bb 100644 --- a/arduino-ide-extension/src/browser/style/boards-config-dialog.css +++ b/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); +} diff --git a/arduino-ide-extension/src/browser/style/index.css b/arduino-ide-extension/src/browser/style/index.css index 1a7c98533..b288f5ec6 100644 --- a/arduino-ide-extension/src/browser/style/index.css +++ b/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); +} diff --git a/arduino-ide-extension/src/browser/style/main.css b/arduino-ide-extension/src/browser/style/main.css index dc5c0ad36..92967e827 100644 --- a/arduino-ide-extension/src/browser/style/main.css +++ b/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); +} diff --git a/arduino-ide-extension/src/browser/style/sketchbook.css b/arduino-ide-extension/src/browser/style/sketchbook.css index a0ab90ead..1edc09119 100644 --- a/arduino-ide-extension/src/browser/style/sketchbook.css +++ b/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); +} From a6158972f1357ab5f50186531b5bc4d26125f664 Mon Sep 17 00:00:00 2001 From: Francesco Spissu Date: Fri, 29 Jul 2022 11:03:03 +0200 Subject: [PATCH 2/8] fix for install button in libs and board manager --- .../src/browser/style/list-widget.css | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/arduino-ide-extension/src/browser/style/list-widget.css b/arduino-ide-extension/src/browser/style/list-widget.css index a7e9a9cba..5d6babf9b 100644 --- a/arduino-ide-extension/src/browser/style/list-widget.css +++ b/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); +} From 1985ceed72b8a47da0f9ab634bab699a8b39972a Mon Sep 17 00:00:00 2001 From: Francesco Spissu Date: Fri, 29 Jul 2022 11:13:21 +0200 Subject: [PATCH 3/8] add buttons border --- arduino-ide-extension/src/browser/style/index.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/arduino-ide-extension/src/browser/style/index.css b/arduino-ide-extension/src/browser/style/index.css index b288f5ec6..3db1abd77 100644 --- a/arduino-ide-extension/src/browser/style/index.css +++ b/arduino-ide-extension/src/browser/style/index.css @@ -144,6 +144,8 @@ button.secondary[disabled], .theia-button.secondary[disabled] { outline: 1px dashed var(--theia-focusBorder); } -.hc-black.hc-theia.theia-hc .theia-button:focus { - outline: 1px solid 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); } From fe287456a69ae80eaa2908495b889c92e0d48d78 Mon Sep 17 00:00:00 2001 From: Francesco Spissu Date: Fri, 29 Jul 2022 17:52:15 +0200 Subject: [PATCH 4/8] revert toolbar buttons background --- .../src/browser/style/main.css | 21 +++++++------------ 1 file changed, 7 insertions(+), 14 deletions(-) diff --git a/arduino-ide-extension/src/browser/style/main.css b/arduino-ide-extension/src/browser/style/main.css index 92967e827..682d49b32 100644 --- a/arduino-ide-extension/src/browser/style/main.css +++ b/arduino-ide-extension/src/browser/style/main.css @@ -192,26 +192,19 @@ /* 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: 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 { +.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; - 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; + background-color: var(--theia-arduino-toolbar-button-background) !important; outline: 1px solid var(--theia-focusBorder); } @@ -234,7 +227,7 @@ } .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); + outline: 1px dashed var(--theia-focusBorder); } .hc-black.hc-theia.theia-hc .quick-input-list .monaco-list-row.focused { From a53feb5c63b28f34a1d3fe1ba556fd50c2c677b8 Mon Sep 17 00:00:00 2001 From: Francesco Spissu Date: Mon, 1 Aug 2022 10:38:56 +0200 Subject: [PATCH 5/8] dashed outline for notification item hover status --- arduino-ide-extension/src/browser/style/index.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/arduino-ide-extension/src/browser/style/index.css b/arduino-ide-extension/src/browser/style/index.css index 3db1abd77..a308deebc 100644 --- a/arduino-ide-extension/src/browser/style/index.css +++ b/arduino-ide-extension/src/browser/style/index.css @@ -149,3 +149,9 @@ button.secondary[disabled], .theia-button.secondary[disabled] { .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; +} From 8bdf1ab0a2dc28b95fab587cc5bc6c9eb015ae7e Mon Sep 17 00:00:00 2001 From: Francesco Spissu Date: Mon, 1 Aug 2022 11:30:26 +0200 Subject: [PATCH 6/8] fix upload certificate dialog background --- .../src/browser/style/certificate-uploader-dialog.css | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/arduino-ide-extension/src/browser/style/certificate-uploader-dialog.css b/arduino-ide-extension/src/browser/style/certificate-uploader-dialog.css index 376bbc704..c9d1332f7 100644 --- a/arduino-ide-extension/src/browser/style/certificate-uploader-dialog.css +++ b/arduino-ide-extension/src/browser/style/certificate-uploader-dialog.css @@ -71,4 +71,10 @@ width: 100%; box-sizing: border-box; -} \ No newline at end of file +} + +/* 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); +} From 8e636c75c8308080f7094bc9a7057f26399df59f Mon Sep 17 00:00:00 2001 From: Francesco Spissu Date: Mon, 1 Aug 2022 14:36:03 +0200 Subject: [PATCH 7/8] quick input border and board selector hover --- arduino-ide-extension/src/browser/style/main.css | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/arduino-ide-extension/src/browser/style/main.css b/arduino-ide-extension/src/browser/style/main.css index 682d49b32..e129db111 100644 --- a/arduino-ide-extension/src/browser/style/main.css +++ b/arduino-ide-extension/src/browser/style/main.css @@ -212,8 +212,9 @@ background: var(--theia-dropdown-background); } -.hc-black.hc-theia.theia-hc .arduino-boards-dropdown-item:hover > div { +.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 { @@ -237,3 +238,8 @@ .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; +} From fd3b5aa143d4a1b5db1905fc8135d831f43c9889 Mon Sep 17 00:00:00 2001 From: Francesco Spissu Date: Mon, 1 Aug 2022 15:05:01 +0200 Subject: [PATCH 8/8] add missing selector --- .../src/browser/style/boards-config-dialog.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/arduino-ide-extension/src/browser/style/boards-config-dialog.css b/arduino-ide-extension/src/browser/style/boards-config-dialog.css index 82afb55bb..da8333f50 100644 --- a/arduino-ide-extension/src/browser/style/boards-config-dialog.css +++ b/arduino-ide-extension/src/browser/style/boards-config-dialog.css @@ -272,6 +272,6 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i { outline: 1px dashed var(--theia-focusBorder); } -div#select-board-dialog .selectBoardContainer .body .list .item.selected { +.hc-black.hc-theia.theia-hc div#select-board-dialog .selectBoardContainer .body .list .item.selected { outline: 1px solid var(--theia-focusBorder); }