diff --git a/arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx b/arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx index 143200399..f2b4af002 100644 --- a/arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx +++ b/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.', 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": [ { 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..0905875b1 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, @@ -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); } @@ -209,6 +206,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 { @@ -249,8 +247,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 { @@ -262,8 +260,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 */ 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); -} 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/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/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 d655cdef2..4fe01fed8 100644 --- a/arduino-ide-extension/src/browser/style/ide-updater-dialog.css +++ b/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 { 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); } 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..d42393ffc 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-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; } 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; } 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 +}