jeans/arduino-ide
jeans/arduino-ide
1
0
Fork 0
mirror of https://github.com/arduino/arduino-ide.git synced 2025-07-11 21:36:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Custom colors clean up (#1252)

Browse Source
This commit is contained in:
Francesco Spissu 2022-08-02 15:24:54 +02:00 committed by GitHub
parent 564862e173
commit 8a0dc1be7e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 75 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx
View File

@ -183,34 +183,6 @@ export class ArduinoFrontendContribution
registerColors(colors: ColorRegistry): void { registerColors(colors: ColorRegistry): void {
colors.register( 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', id: 'arduino.toolbar.button.background',
defaults: { defaults: {
@ -225,8 +197,8 @@ export class ArduinoFrontendContribution
id: 'arduino.toolbar.button.hoverBackground', id: 'arduino.toolbar.button.hoverBackground',
defaults: { defaults: {
dark: 'button.hoverBackground', dark: 'button.hoverBackground',
light: 'button.foreground', light: 'button.hoverBackground',
hc: 'textLink.foreground', hc: 'button.background',
}, },
description: description:
'Background color of the toolbar items when hovering over them. Such as Upload, Verify, etc.', 'Background color of the toolbar items when hovering over them. Such as Upload, Verify, etc.',
@ -261,24 +233,6 @@ export class ArduinoFrontendContribution
description: description:
'Toggle color of the toolbar items when they are currently toggled (the command is in progress)', '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', id: 'arduino.toolbar.dropdown.border',
defaults: { defaults: {
@ -303,8 +257,8 @@ export class ArduinoFrontendContribution
id: 'arduino.toolbar.dropdown.background', id: 'arduino.toolbar.dropdown.background',
defaults: { defaults: {
dark: 'tab.unfocusedActiveBackground', dark: 'tab.unfocusedActiveBackground',
light: 'tab.unfocusedActiveBackground', light: 'dropdown.background',
hc: 'tab.unfocusedActiveBackground', hc: 'dropdown.background',
}, },
description: 'Background color of the Board Selector.', description: 'Background color of the Board Selector.',
}, },
@ -312,18 +266,18 @@ export class ArduinoFrontendContribution
{ {
id: 'arduino.toolbar.dropdown.label', id: 'arduino.toolbar.dropdown.label',
defaults: { defaults: {
dark: 'foreground', dark: 'dropdown.foreground',
light: 'foreground', light: 'dropdown.foreground',
hc: 'foreground', hc: 'dropdown.foreground',
}, },
description: 'Font color of the Board Selector.', description: 'Font color of the Board Selector.',
}, },
{ {
id: 'arduino.toolbar.dropdown.iconSelected', id: 'arduino.toolbar.dropdown.iconSelected',
defaults: { defaults: {
dark: 'statusBar.background', dark: 'list.activeSelectionIconForeground',
light: 'statusBar.background', light: 'list.activeSelectionIconForeground',
hc: 'statusBar.background', hc: 'list.activeSelectionIconForeground',
}, },
description: description:
'Color of the selected protocol icon in the Board Selector.', 'Color of the selected protocol icon in the Board Selector.',
@ -331,18 +285,18 @@ export class ArduinoFrontendContribution
{ {
id: 'arduino.toolbar.dropdown.option.backgroundHover', id: 'arduino.toolbar.dropdown.option.backgroundHover',
defaults: { defaults: {
dark: 'editor.background', dark: 'list.hoverBackground',
light: 'editor.background', light: 'list.hoverBackground',
hc: 'editor.background', hc: 'list.hoverBackground',
}, },
description: 'Background color on hover of the Board Selector options.', description: 'Background color on hover of the Board Selector options.',
}, },
{ {
id: 'arduino.toolbar.dropdown.option.backgroundSelected', id: 'arduino.toolbar.dropdown.option.backgroundSelected',
defaults: { defaults: {
dark: 'editor.background', dark: 'list.activeSelectionBackground',
light: 'editor.background', light: 'list.activeSelectionBackground',
hc: 'editor.background', hc: 'list.activeSelectionBackground',
}, },
description: description:
'Background color of the selected board in the Board Selector.', 'Background color of the selected board in the Board Selector.',

7
arduino-ide-extension/src/browser/data/dark.color-theme.json
View File

@ -8,6 +8,7 @@
"list.inactiveSelectionForeground": "#dae3e3", "list.inactiveSelectionForeground": "#dae3e3",
"list.inactiveSelectionBackground": "#434f54", "list.inactiveSelectionBackground": "#434f54",
"list.hoverBackground": "#1f272a", "list.hoverBackground": "#1f272a",
"list.activeSelectionIconForeground": "#0ca1a6",
"progressBar.background": "#005c5f", "progressBar.background": "#005c5f",
"editor.background": "#1f272a", "editor.background": "#1f272a",
"editor.foreground": "#dae3e3", "editor.foreground": "#dae3e3",
@ -16,6 +17,7 @@
"editorCursor.foreground": "#434f54", "editorCursor.foreground": "#434f54",
"editorWhitespace.foreground": "#bfbfbf", "editorWhitespace.foreground": "#bfbfbf",
"editorWidget.background": "#171e21", "editorWidget.background": "#171e21",
"editorWidget.foreground": "#dae3e3",
"focusBorder": "#dae3e3", "focusBorder": "#dae3e3",
"menubar.selectionBackground": "#ffffff", "menubar.selectionBackground": "#ffffff",
"menubar.selectionForeground": "#212121", "menubar.selectionForeground": "#212121",
@ -28,7 +30,7 @@
"titleBar.activeBackground": "#171e21", "titleBar.activeBackground": "#171e21",
"titleBar.activeForeground": "#dae3e3", "titleBar.activeForeground": "#dae3e3",
"terminal.background": "#000000", "terminal.background": "#000000",
"terminal.foreground": "#e0e0e0", "terminal.foreground": "#ffffff",
"dropdown.border": "#7fcbcd", "dropdown.border": "#7fcbcd",
"dropdown.background": "#2c353a", "dropdown.background": "#2c353a",
"dropdown.foreground": "#dae3e3", "dropdown.foreground": "#dae3e3",
@ -64,7 +66,8 @@
"settings.headerForeground": "#dae3e3", "settings.headerForeground": "#dae3e3",
"tree.indentGuidesStroke": "#374146", "tree.indentGuidesStroke": "#374146",
"tab.unfocusedActiveForeground": "#dae3e3", "tab.unfocusedActiveForeground": "#dae3e3",
"tab.inactiveBackground": "#171e21" "tab.inactiveBackground": "#171e21",
"textLink.foreground": "#0ca1a6"
}, },
"tokenColors": [ "tokenColors": [
{ {

7
arduino-ide-extension/src/browser/data/default.color-theme.json
View File

@ -8,6 +8,7 @@
"list.inactiveSelectionForeground": "#4e5b61", "list.inactiveSelectionForeground": "#4e5b61",
"list.inactiveSelectionBackground": "#dae3e3", "list.inactiveSelectionBackground": "#dae3e3",
"list.hoverBackground": "#ecf1f1", "list.hoverBackground": "#ecf1f1",
"list.activeSelectionIconForeground": "#008184",
"progressBar.background": "#005c5f", "progressBar.background": "#005c5f",
"editor.background": "#ffffff", "editor.background": "#ffffff",
"editor.foreground": "#4e5b61", "editor.foreground": "#4e5b61",
@ -16,6 +17,7 @@
"editorCursor.foreground": "#434f54", "editorCursor.foreground": "#434f54",
"editorWhitespace.foreground": "#bfbfbf", "editorWhitespace.foreground": "#bfbfbf",
"editorWidget.background": "#f7f9f9", "editorWidget.background": "#f7f9f9",
"editorWidget.foreground": "#4e5b61",
"focusBorder": "#7fcbcd", "focusBorder": "#7fcbcd",
"menubar.selectionBackground": "#ffffff", "menubar.selectionBackground": "#ffffff",
"menubar.selectionForeground": "#212121", "menubar.selectionForeground": "#212121",
@ -28,7 +30,7 @@
"titleBar.activeBackground": "#006d70", "titleBar.activeBackground": "#006d70",
"titleBar.activeForeground": "#f7f9f9", "titleBar.activeForeground": "#f7f9f9",
"terminal.background": "#000000", "terminal.background": "#000000",
"terminal.foreground": "#e0e0e0", "terminal.foreground": "#ffffff",
"dropdown.border": "#dae3e3", "dropdown.border": "#dae3e3",
"dropdown.background": "#ffffff", "dropdown.background": "#ffffff",
"dropdown.foreground": "#4e5b61", "dropdown.foreground": "#4e5b61",
@ -64,7 +66,8 @@
"settings.headerForeground": "#4e5b61", "settings.headerForeground": "#4e5b61",
"tree.indentGuidesStroke": "#dae3e3", "tree.indentGuidesStroke": "#dae3e3",
"tab.unfocusedActiveForeground": "#4e5b61", "tab.unfocusedActiveForeground": "#4e5b61",
"tab.inactiveBackground": "#ecf1f1" "tab.inactiveBackground": "#ecf1f1",
"textLink.foreground": "#008184"
}, },
"tokenColors": [ "tokenColors": [
{ {

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

@ -15,7 +15,7 @@ div.dialogContent.select-board-dialog > div.head .title {
font-weight: 400; font-weight: 400;
letter-spacing: 0.02em; letter-spacing: 0.02em;
font-size: 1.2em; font-size: 1.2em;
color: var(--theia-arduino-branding-primary); color: var(--theia-editorWidget-foreground);
margin-bottom: 10px; 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 { 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, #select-board-dialog .selectBoardContainer .search,
@ -43,7 +43,7 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i {
margin: 0; margin: 0;
vertical-align: top; vertical-align: top;
display: flex; display: flex;
color: var(--theia-editor-foreground); color: var(--theia-input-foreground);
} }
#select-board-dialog .selectBoardContainer .body .search input:focus { #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 { #select-board-dialog .selectBoardContainer .body .container .content .title {
color: #7f8c8d; color: var(--theia-editorWidget-foreground);
padding: 0px 0px 10px 0px; padding: 0px 0px 10px 0px;
text-transform: uppercase; 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 { #select-board-dialog .selectBoardContainer .body .container .content .loading {
font-size: var(--theia-ui-font-size1); font-size: var(--theia-ui-font-size1);
color: var(--theia-arduino-branding-secondary); color: var(--theia-editorWidget-foreground);
padding: 10px 5px 10px 10px; padding: 10px 5px 10px 10px;
text-transform: uppercase; text-transform: uppercase;
/* The max, min-height comes from `.body .list` 200px + 47px top padding - 2 * 10px top padding */ /* 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); background: var(--theia-arduino-toolbar-dropdown-background);
border-radius: 1px; border-radius: 1px;
color: var(--theia-arduino-toolbar-dropdown-label); 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; display: flex;
gap: 10px; gap: 10px;
height: 28px; height: 28px;
@ -165,10 +165,7 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i {
font-size: 16px; font-size: 16px;
} }
.arduino-boards-toolbar-item--protocol { .arduino-boards-toolbar-item--protocol ,
color: var(--theia-arduino-toolbar-dropdown-label);
}
.arduino-boards-dropdown-item--protocol { .arduino-boards-dropdown-item--protocol {
color: var(--theia-arduino-toolbar-dropdown-label); color: var(--theia-arduino-toolbar-dropdown-label);
} }
@ -206,6 +203,7 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i {
.arduino-boards-dropdown-list--items-container { .arduino-boards-dropdown-list--items-container {
overflow: auto; overflow: auto;
max-height: 404px; max-height: 404px;
background: var(--theia-arduino-toolbar-dropdown-background);
} }
.arduino-boards-dropdown-list--items-container::-webkit-scrollbar { .arduino-boards-dropdown-list--items-container::-webkit-scrollbar {
@ -247,7 +245,7 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i {
} }
.arduino-boards-dropdown-item--selected .arduino-boards-dropdown-item--selected
.arduino-boards-dropdown-item--port-label { .arduino-boards-dropdown-item--port-label {
color: var(--theia-arduino-toolbar-dropdown-label); color: var(--theia-arduino-toolbar-dropdown-label);
} }
@ -260,8 +258,8 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i {
} }
.arduino-board-dropdown-footer { .arduino-board-dropdown-footer {
color: var(--theia-arduino-branding-primary); color: var(--theia-secondaryButton-foreground);
border-top: 1px solid var(--theia-arduino-toolbar-dropdown-border); border-top: 1px solid var(--theia-dropdown-border);
} }
/* High Contrast Theme rules */ /* High Contrast Theme rules */

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

@ -7,7 +7,7 @@
} }
.certificate-uploader-dialog .arduino-select__control { .certificate-uploader-dialog .arduino-select__control {
height: 31px; height: 31px;
background: var(--theia-menubar-selectionBackground) !important; background: var(--theia-dropdown-background) !important;
} }
.certificate-uploader-dialog .dialogRow > button{ .certificate-uploader-dialog .dialogRow > button{
@ -15,9 +15,10 @@
} }
.certificate-uploader-dialog .certificate-list { .certificate-uploader-dialog .certificate-list {
border: 1px solid #BDC7C7; border: 1px solid var(--theia-editorWidget-border);
border-radius: 2px;; border-radius: 2px;;
background: var(--theia-menubar-selectionBackground) !important; color: var(--theia-editor-foreground);
background-color: var(--theia-editor-background);
overflow: auto; overflow: auto;
height: 120px; height: 120px;
flex: 1; flex: 1;
@ -60,9 +61,10 @@
.certificate-add { .certificate-add {
padding: 16px; padding: 16px;
background-color: var(--theia-list-hoverBackground);
border-radius: 3px; 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 { .certificate-add input {
@ -72,9 +74,3 @@
box-sizing: border-box; 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);
}

2
arduino-ide-extension/src/browser/style/cloud-sketchbook.css
View File

@ -96,7 +96,7 @@
.cloud-sketchbook-welcome > .item .link { .cloud-sketchbook-welcome > .item .link {
cursor: pointer; cursor: pointer;
color: var(--theia-arduino-branding-primary); color: var(--theia-textLink-foreground);
} }
.pull-sketch-icon { .pull-sketch-icon {

2
arduino-ide-extension/src/browser/style/dialogs.css
View File

@ -17,7 +17,7 @@
font-weight: 500; font-weight: 500;
background-color: transparent; background-color: transparent;
font-size: var(--theia-ui-font-size2); font-size: var(--theia-ui-font-size2);
color: var(--theia-list-inactiveSelectionForeground); color: var(--theia-editorWidget-foreground);
min-height: 0; min-height: 0;
} }

2
arduino-ide-extension/src/browser/style/editor.css
View File

@ -6,7 +6,7 @@
} }
.monaco-list-row.show-file-icons.focused { .monaco-list-row.show-file-icons.focused {
background-color: #d6ebff; background-color: var(--theia-quickInputList-focusBackground);
} }
.monaco-editor .view-overlays .compiler-error { .monaco-editor .view-overlays .compiler-error {

12
arduino-ide-extension/src/browser/style/ide-updater-dialog.css
View File

@ -27,9 +27,9 @@
} }
.ide-updater-dialog .changelog-container { .ide-updater-dialog .changelog-container {
color: var(--theia-dropdown-foreground); color: var(--theia-editor-foreground);
background-color: var(--theia-dropdown-background); background-color: var(--theia-editor-background);
border: 1px solid var(--theia-tree-indentGuidesStroke); border: 1px solid var(--theia-editorWidget-border);
border-radius: 2px; border-radius: 2px;
font-size: 12px; font-size: 12px;
height: 180px; height: 180px;
@ -39,7 +39,7 @@
} }
.ide-updater-dialog .changelog-container a { .ide-updater-dialog .changelog-container a {
color: #018184; color: var(--theia-textLink-foreground);
} }
.ide-updater-dialog .changelog-container a:hover { .ide-updater-dialog .changelog-container a:hover {
@ -48,13 +48,13 @@
} }
.ide-updater-dialog .changelog-container code { .ide-updater-dialog .changelog-container code {
background: #ecf1f1; background: var(--theia-textBlockQuote-background);
border-radius: 2px; border-radius: 2px;
padding: 0 2px; padding: 0 2px;
} }
.ide-updater-dialog .changelog-container a code { .ide-updater-dialog .changelog-container a code {
color: #018184; color: var(--theia-textLink-foreground);
} }
.ide-updater-dialog .buttons-container { .ide-updater-dialog .buttons-container {

8
arduino-ide-extension/src/browser/style/main.css
View File

@ -173,20 +173,20 @@
/* Output */ /* Output */
.theia-output .editor-container { .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 { .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) { .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 { .theia-output .monaco-editor .margin {
border-right: none; border-right: none;
background-color: var(--theia-arduino-output-background); background-color: var(--theia-terminal-background);
} }

4
arduino-ide-extension/src/browser/style/progress-bar.css
View File

@ -3,7 +3,7 @@
} }
.progress-bar--outer { .progress-bar--outer {
background: #e5e5e5; background: var(--theia-editorWidget-background);
border-radius: 11px; border-radius: 11px;
height: 6px; height: 6px;
position: relative; position: relative;
@ -13,7 +13,7 @@
.progress-bar--inner { .progress-bar--inner {
transition: width 1s; transition: width 1s;
height: 100%; height: 100%;
background: #008184; background: var(--theia-progressBar-background);
border-radius: 11px; border-radius: 11px;
} }

11
arduino-ide-extension/src/browser/style/settings-dialog.css
View File

@ -66,6 +66,17 @@
color: var(--theia-textLink-activeForeground); 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 { .arduino-settings-dialog .react-tabs__tab-panel {
padding-bottom: 8px; padding-bottom: 8px;
} }

3
arduino-ide-extension/src/browser/style/sketchbook.css
View File

@ -45,7 +45,7 @@
.active-sketch { .active-sketch {
font-weight: 500; font-weight: 500;
background-color: var(--theia-list-activeSelectionBackground) !important; 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:focus .theia-TreeNode.theia-mod-selected,
.theia-Tree .ReactVirtualized__List:focus .theia-TreeNode.theia-mod-selected { .theia-Tree .ReactVirtualized__List:focus .theia-TreeNode.theia-mod-selected {
background: var(--theia-list-inactiveSelectionBackground); background: var(--theia-list-inactiveSelectionBackground);
color: var(--theia-list-inactiveSelectionForeground) !important;
} }

2
arduino-ide-extension/src/browser/style/user-fields-dialog.css
View File

@ -14,7 +14,7 @@
} }
.user-fields-dialog-content .field-label { .user-fields-dialog-content .field-label {
color: #2c353a; color: var(--theia-editorWidget-foreground);
font-size: 14px; font-size: 14px;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;