Custom colors clean up (#1252)

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

View File

@ -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.',

View File

@ -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": [
{

View File

@ -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": [
{

View File

@ -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);
}
@ -206,6 +203,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 {
@ -247,8 +245,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 {
@ -260,8 +258,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 */

View File

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

View File

@ -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 {

View File

@ -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;
}

View File

@ -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 {

View File

@ -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 {

View File

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

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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;
}
}