From df9d8fe1462066d25a488f3879ecbe625d73659a Mon Sep 17 00:00:00 2001 From: Francesco Spissu Date: Thu, 21 Jul 2022 12:40:01 +0200 Subject: [PATCH 01/13] remove unused arduino.foreground color --- .../src/browser/arduino-frontend-contribution.tsx | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx b/arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx index 143200399..8c897c246 100644 --- a/arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx +++ b/arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx @@ -201,16 +201,6 @@ export class ArduinoFrontendContribution 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: { From 4fee17c490e8008628644fb605b367b338e35245 Mon Sep 17 00:00:00 2001 From: Francesco Spissu Date: Thu, 21 Jul 2022 16:35:52 +0200 Subject: [PATCH 02/13] use proper variable for ide updater dialog --- .../src/browser/style/ide-updater-dialog.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/arduino-ide-extension/src/browser/style/ide-updater-dialog.css b/arduino-ide-extension/src/browser/style/ide-updater-dialog.css index d655cdef2..0149ab049 100644 --- a/arduino-ide-extension/src/browser/style/ide-updater-dialog.css +++ b/arduino-ide-extension/src/browser/style/ide-updater-dialog.css @@ -27,8 +27,8 @@ } .ide-updater-dialog .changelog-container { - color: var(--theia-dropdown-foreground); - background-color: var(--theia-dropdown-background); + color: var(--theia-editor-foreground); + background-color: var(--theia-editor-background); border: 1px solid var(--theia-tree-indentGuidesStroke); border-radius: 2px; font-size: 12px; From 82f4e21ec343e0c78d16e53f394184ec334591a7 Mon Sep 17 00:00:00 2001 From: Francesco Spissu Date: Fri, 22 Jul 2022 17:06:30 +0200 Subject: [PATCH 03/13] use VS Code variables --- .../browser/style/boards-config-dialog.css | 46 +++++++++---------- .../src/browser/style/cloud-sketchbook.css | 2 +- .../src/browser/style/main.css | 8 ++-- 3 files changed, 28 insertions(+), 28 deletions(-) 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 da8333f50..595cfc3e7 100644 --- a/arduino-ide-extension/src/browser/style/boards-config-dialog.css +++ b/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,9 @@ 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; @@ -165,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 @@ -199,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); @@ -239,22 +239,22 @@ 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 { @@ -262,8 +262,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-textLink-foreground); + border-top: 1px solid var(--theia-dropdown-border); } /* High Contrast Theme rules */ diff --git a/arduino-ide-extension/src/browser/style/cloud-sketchbook.css b/arduino-ide-extension/src/browser/style/cloud-sketchbook.css index 9e47a2157..8ed370329 100644 --- a/arduino-ide-extension/src/browser/style/cloud-sketchbook.css +++ b/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 { diff --git a/arduino-ide-extension/src/browser/style/main.css b/arduino-ide-extension/src/browser/style/main.css index e129db111..40cae2a31 100644 --- a/arduino-ide-extension/src/browser/style/main.css +++ b/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); } From 14e5a33ba78a11c116bb6c783ddb35f16081743f Mon Sep 17 00:00:00 2001 From: Francesco Spissu Date: Fri, 22 Jul 2022 17:10:53 +0200 Subject: [PATCH 04/13] unregister unused colors --- .../browser/arduino-frontend-contribution.tsx | 104 ------------------ 1 file changed, 104 deletions(-) diff --git a/arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx b/arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx index 8c897c246..a17165adf 100644 --- a/arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx +++ b/arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx @@ -183,24 +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.toolbar.button.background', defaults: { @@ -250,92 +232,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: { - dark: 'dropdown.border', - light: 'dropdown.border', - hc: 'dropdown.border', - }, - description: 'Border color of the Board Selector.', - }, - - { - id: 'arduino.toolbar.dropdown.borderActive', - defaults: { - dark: 'focusBorder', - light: 'focusBorder', - hc: 'focusBorder', - }, - description: "Border color of the Board Selector when it's active", - }, - - { - id: 'arduino.toolbar.dropdown.background', - defaults: { - dark: 'tab.unfocusedActiveBackground', - light: 'tab.unfocusedActiveBackground', - hc: 'tab.unfocusedActiveBackground', - }, - description: 'Background color of the Board Selector.', - }, - - { - id: 'arduino.toolbar.dropdown.label', - defaults: { - dark: 'foreground', - light: 'foreground', - hc: 'foreground', - }, - description: 'Font color of the Board Selector.', - }, - { - id: 'arduino.toolbar.dropdown.iconSelected', - defaults: { - dark: 'statusBar.background', - light: 'statusBar.background', - hc: 'statusBar.background', - }, - description: - 'Color of the selected protocol icon in the Board Selector.', - }, - { - id: 'arduino.toolbar.dropdown.option.backgroundHover', - defaults: { - dark: 'editor.background', - light: 'editor.background', - hc: 'editor.background', - }, - 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', - }, - description: - 'Background color of the selected board in the Board Selector.', } ); } From bcb297f977d2e72d7da9a95c5f55ff7dc62ecf5a Mon Sep 17 00:00:00 2001 From: Francesco Spissu Date: Tue, 26 Jul 2022 14:13:13 +0200 Subject: [PATCH 05/13] remove hard-coded colors --- .../src/browser/style/boards-config-dialog.css | 2 +- arduino-ide-extension/src/browser/style/editor.css | 2 +- .../src/browser/style/ide-updater-dialog.css | 6 +++--- .../src/browser/style/progress-bar.css | 4 ++-- .../src/browser/style/settings-dialog.css | 11 +++++++++++ .../src/browser/style/user-fields-dialog.css | 4 ++-- 6 files changed, 20 insertions(+), 9 deletions(-) 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 595cfc3e7..92deda324 100644 --- a/arduino-ide-extension/src/browser/style/boards-config-dialog.css +++ b/arduino-ide-extension/src/browser/style/boards-config-dialog.css @@ -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; } diff --git a/arduino-ide-extension/src/browser/style/editor.css b/arduino-ide-extension/src/browser/style/editor.css index 484e521c9..19bb6f5d8 100644 --- a/arduino-ide-extension/src/browser/style/editor.css +++ b/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 { diff --git a/arduino-ide-extension/src/browser/style/ide-updater-dialog.css b/arduino-ide-extension/src/browser/style/ide-updater-dialog.css index 0149ab049..d2a323e4a 100644 --- a/arduino-ide-extension/src/browser/style/ide-updater-dialog.css +++ b/arduino-ide-extension/src/browser/style/ide-updater-dialog.css @@ -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 { diff --git a/arduino-ide-extension/src/browser/style/progress-bar.css b/arduino-ide-extension/src/browser/style/progress-bar.css index 2fdbd4b7f..d395ece92 100644 --- a/arduino-ide-extension/src/browser/style/progress-bar.css +++ b/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; } diff --git a/arduino-ide-extension/src/browser/style/settings-dialog.css b/arduino-ide-extension/src/browser/style/settings-dialog.css index 11147f48a..a05000d13 100644 --- a/arduino-ide-extension/src/browser/style/settings-dialog.css +++ b/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-tab-activeBackground); + 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-bottom: 1px solid var(--theia-editorGroupHeader-tabsBorder); +} + .arduino-settings-dialog .react-tabs__tab-panel { padding-bottom: 8px; } diff --git a/arduino-ide-extension/src/browser/style/user-fields-dialog.css b/arduino-ide-extension/src/browser/style/user-fields-dialog.css index 48e4960ca..89a7b149d 100644 --- a/arduino-ide-extension/src/browser/style/user-fields-dialog.css +++ b/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; -} \ No newline at end of file +} From c041a9c0e193683df7ed7499277108b4d3dd6fd2 Mon Sep 17 00:00:00 2001 From: Francesco Spissu Date: Tue, 26 Jul 2022 15:21:14 +0200 Subject: [PATCH 06/13] update some variables --- .../src/browser/style/boards-config-dialog.css | 4 ++-- arduino-ide-extension/src/browser/style/dialogs.css | 2 +- arduino-ide-extension/src/browser/style/settings-dialog.css | 2 +- arduino-ide-extension/src/browser/style/sketchbook.css | 3 ++- 4 files changed, 6 insertions(+), 5 deletions(-) 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 92deda324..f9c5cb755 100644 --- a/arduino-ide-extension/src/browser/style/boards-config-dialog.css +++ b/arduino-ide-extension/src/browser/style/boards-config-dialog.css @@ -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 { @@ -262,7 +262,7 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i { } .arduino-board-dropdown-footer { - color: var(--theia-textLink-foreground); + color: var(--theia-secondaryButton-foreground); border-top: 1px solid var(--theia-dropdown-border); } diff --git a/arduino-ide-extension/src/browser/style/dialogs.css b/arduino-ide-extension/src/browser/style/dialogs.css index 5b6b1e218..3c2b209b2 100644 --- a/arduino-ide-extension/src/browser/style/dialogs.css +++ b/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; } diff --git a/arduino-ide-extension/src/browser/style/settings-dialog.css b/arduino-ide-extension/src/browser/style/settings-dialog.css index a05000d13..1efa38b5d 100644 --- a/arduino-ide-extension/src/browser/style/settings-dialog.css +++ b/arduino-ide-extension/src/browser/style/settings-dialog.css @@ -74,7 +74,7 @@ } .arduino-settings-dialog .react-tabs__tab-list { - border-bottom: 1px solid var(--theia-editorGroupHeader-tabsBorder); + border-color: var(--theia-tab-activeBorder); } .arduino-settings-dialog .react-tabs__tab-panel { diff --git a/arduino-ide-extension/src/browser/style/sketchbook.css b/arduino-ide-extension/src/browser/style/sketchbook.css index 1edc09119..dcba8d0d2 100644 --- a/arduino-ide-extension/src/browser/style/sketchbook.css +++ b/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; } From 4646ba9684fc211c58df6e2e881cd989c3cb1052 Mon Sep 17 00:00:00 2001 From: Francesco Spissu Date: Mon, 1 Aug 2022 13:02:31 +0200 Subject: [PATCH 07/13] certificate uploader dialog fix --- .../style/certificate-uploader-dialog.css | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) 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 c9d1332f7..58baca1be 100644 --- a/arduino-ide-extension/src/browser/style/certificate-uploader-dialog.css +++ b/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); -} From 1150a413a147262c64d8d5906036e7fe1364c3a7 Mon Sep 17 00:00:00 2001 From: Francesco Spissu Date: Mon, 1 Aug 2022 13:05:23 +0200 Subject: [PATCH 08/13] use correct variable for ide updater dialog border --- arduino-ide-extension/src/browser/style/ide-updater-dialog.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/arduino-ide-extension/src/browser/style/ide-updater-dialog.css b/arduino-ide-extension/src/browser/style/ide-updater-dialog.css index d2a323e4a..4fe01fed8 100644 --- a/arduino-ide-extension/src/browser/style/ide-updater-dialog.css +++ b/arduino-ide-extension/src/browser/style/ide-updater-dialog.css @@ -29,7 +29,7 @@ .ide-updater-dialog .changelog-container { color: var(--theia-editor-foreground); background-color: var(--theia-editor-background); - border: 1px solid var(--theia-tree-indentGuidesStroke); + border: 1px solid var(--theia-editorWidget-border); border-radius: 2px; font-size: 12px; height: 180px; From 90a0606d7e4e268df418747f536f240361724b78 Mon Sep 17 00:00:00 2001 From: Francesco Spissu Date: Tue, 2 Aug 2022 11:10:08 +0200 Subject: [PATCH 09/13] restore custom board selector variables --- .../browser/arduino-frontend-contribution.tsx | 68 +++++++++++++++++++ .../browser/style/boards-config-dialog.css | 30 ++++---- 2 files changed, 82 insertions(+), 16 deletions(-) diff --git a/arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx b/arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx index a17165adf..079d91f8e 100644 --- a/arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx +++ b/arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx @@ -232,6 +232,74 @@ export class ArduinoFrontendContribution }, description: 'Toggle color of the toolbar items when they are currently toggled (the command is in progress)', + }, + { + id: 'arduino.toolbar.dropdown.border', + defaults: { + dark: 'dropdown.border', + light: 'dropdown.border', + hc: 'dropdown.border', + }, + description: 'Border color of the Board Selector.', + }, + + { + id: 'arduino.toolbar.dropdown.borderActive', + defaults: { + dark: 'focusBorder', + light: 'focusBorder', + hc: 'focusBorder', + }, + description: "Border color of the Board Selector when it's active", + }, + + { + id: 'arduino.toolbar.dropdown.background', + defaults: { + dark: 'tab.unfocusedActiveBackground', + light: 'dropdown.background', + hc: 'dropdown.background', + }, + description: 'Background color of the Board Selector.', + }, + + { + id: 'arduino.toolbar.dropdown.label', + defaults: { + dark: 'dropdown.foreground', + light: 'dropdown.foreground', + hc: 'dropdown.foreground', + }, + description: 'Font color of the Board Selector.', + }, + { + id: 'arduino.toolbar.dropdown.iconSelected', + defaults: { + dark: 'list.activeSelectionIconForeground', + light: 'list.activeSelectionIconForeground', + hc: 'list.activeSelectionIconForeground', + }, + description: + 'Color of the selected protocol icon in the Board Selector.', + }, + { + id: 'arduino.toolbar.dropdown.option.backgroundHover', + defaults: { + 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: 'list.activeSelectionBackground', + light: 'list.activeSelectionBackground', + hc: 'list.activeSelectionBackground', + }, + description: + 'Background color of the selected board in the Board Selector.', } ); } 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 f9c5cb755..c3a391a92 100644 --- a/arduino-ide-extension/src/browser/style/boards-config-dialog.css +++ b/arduino-ide-extension/src/browser/style/boards-config-dialog.css @@ -145,9 +145,9 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i { .arduino-boards-toolbar-item-container { align-items: center; - background: var(--theia-dropdown-background); + background: var(--theia-arduino-toolbar-dropdown-background); border-radius: 1px; - color: var(--theia-dropdown-foreground); + color: var(--theia-arduino-toolbar-dropdown-label); border: 1px solid var(--theia-dropdown-border); display: flex; gap: 10px; @@ -167,7 +167,7 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i { .arduino-boards-toolbar-item--protocol , .arduino-boards-dropdown-item--protocol { - color: var(--theia-dropdown-foreground); + color: var(--theia-arduino-toolbar-dropdown-label); } .arduino-boards-toolbar-item-container @@ -196,28 +196,26 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i { .arduino-boards-dropdown-list { margin: -1px; z-index: 1; - border: 1px solid var(--theia-dropdown-border); + border: 1px solid var(--theia-arduino-toolbar-dropdown-border); } .arduino-boards-dropdown-list:focus { - border-style: solid; - border-width: 1px; - border-color: var(--theia-focus-border); + border: 1px solid var(--theia-arduino-toolbar-dropdown-borderActive); } .arduino-boards-dropdown-list--items-container { overflow: auto; max-height: 404px; - background: var(--theia-dropdown-background); + background: var(--theia-arduino-toolbar-dropdown-background); } .arduino-boards-dropdown-list--items-container::-webkit-scrollbar { - background: var(--theia-list-activeSelectionBackground); + background: var(--theia-arduino-toolbar-dropdown-background); } .arduino-boards-dropdown-item { - background: var(--theia-dropdown-background); - color: var(--theia-dropdown-foreground); + background: var(--theia-arduino-toolbar-dropdown-background); + color: var(--theia-arduino-toolbar-dropdown-label); cursor: default; display: flex; font-size: var(--theia-ui-font-size1); @@ -239,22 +237,22 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i { } .arduino-boards-dropdown-item:hover { - background: var(--theia-list-hoverBackground); + background: var(--theia-arduino-toolbar-dropdown-option-backgroundHover); } .arduino-boards-dropdown-item--selected, .arduino-boards-dropdown-item--selected:hover { - background: var(--theia-list-activeSelectionBackground); - border: 1px solid var(--theia-list-activeSelectionBackground); + background: var(--theia-arduino-toolbar-dropdown-option-backgroundSelected); + border: 1px solid var(--theia-arduino-toolbar-dropdown-option-backgroundSelected); } .arduino-boards-dropdown-item--selected .arduino-boards-dropdown-item--port-label { - color: var(--theia-list-activeSelectionForeground); + color: var(--theia-arduino-toolbar-dropdown-label); } .arduino-boards-dropdown-item--selected .fa { - color: var(--theia-list-activeSelectionIconForeground); + color: var(--theia-arduino-toolbar-dropdown-iconSelected); } .arduino-boards-dropdown-item .fa-check { From b2ccc26661c0f384f67c127fb0f5ca1264f2092d Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Tue, 2 Aug 2022 11:46:30 +0200 Subject: [PATCH 10/13] Updated themes (#1273) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .../src/browser/data/dark.color-theme.json | 7 +++++-- .../src/browser/data/default.color-theme.json | 7 +++++-- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/arduino-ide-extension/src/browser/data/dark.color-theme.json b/arduino-ide-extension/src/browser/data/dark.color-theme.json index c1be9e816..a633dd457 100644 --- a/arduino-ide-extension/src/browser/data/dark.color-theme.json +++ b/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": [ { diff --git a/arduino-ide-extension/src/browser/data/default.color-theme.json b/arduino-ide-extension/src/browser/data/default.color-theme.json index d3a1d2a2d..e15de4ea1 100644 --- a/arduino-ide-extension/src/browser/data/default.color-theme.json +++ b/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": [ { From 4a861daa6a99959e4ea16a84dcd8a98c21fbcc85 Mon Sep 17 00:00:00 2001 From: Francesco Spissu Date: Tue, 2 Aug 2022 12:04:08 +0200 Subject: [PATCH 11/13] fix toolbar button hover bg --- .../src/browser/arduino-frontend-contribution.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx b/arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx index 079d91f8e..f2b4af002 100644 --- a/arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx +++ b/arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx @@ -197,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.', From 4f2f3ee0daec565b398269e16907aaa6c37a3828 Mon Sep 17 00:00:00 2001 From: Francesco Spissu Date: Tue, 2 Aug 2022 14:53:12 +0200 Subject: [PATCH 12/13] use correct variable for board selector border --- .../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 c3a391a92..0905875b1 100644 --- a/arduino-ide-extension/src/browser/style/boards-config-dialog.css +++ b/arduino-ide-extension/src/browser/style/boards-config-dialog.css @@ -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; From cccfe1e1e7429b547a289c7a8208bc073eda21c0 Mon Sep 17 00:00:00 2001 From: Francesco Spissu Date: Tue, 2 Aug 2022 15:17:14 +0200 Subject: [PATCH 13/13] settings dialog tab bg update --- arduino-ide-extension/src/browser/style/settings-dialog.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/arduino-ide-extension/src/browser/style/settings-dialog.css b/arduino-ide-extension/src/browser/style/settings-dialog.css index 1efa38b5d..d42393ffc 100644 --- a/arduino-ide-extension/src/browser/style/settings-dialog.css +++ b/arduino-ide-extension/src/browser/style/settings-dialog.css @@ -67,7 +67,7 @@ } .arduino-settings-dialog .react-tabs__tab--selected { - background: var(--theia-tab-activeBackground); + background: var(--theia-editorWidget-background); border-color: var(--theia-tab-activeBorder); color: var(--theia-tab-activeForeground); border-radius: 5px 5px 0 0;