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

Removed a few custom colors and derived them from existing ones.

Browse Source 
Fixed the color for the:
 - selected items in the Explorer,
 - warning `input`s,
 - set custom dialog background for the Arduino theme,
 - the query term matches in the command palette, and
 - react-select.

Signed-off-by: Akos Kitta <kittaakos@typefox.io>
This commit is contained in:
Akos Kitta 2020-01-28 10:21:46 +01:00
parent cbe603a99f
commit 403fdbfdc0
14 changed files with 1627 additions and 1519 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored
View File

@ -6,8 +6,8 @@ downloads/
build/ build/
!electron/build/ !electron/build/
src-gen/ src-gen/
browser-app/webpack.config.js *-app/*webpack.config.js
electron-app/webpack.config.js .DS_Store
/workspace/static /workspace/static
.DS_Store .DS_Store
# switching from `electron` to `browser` in dev mode. # switching from `electron` to `browser` in dev mode.

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

@ -582,184 +582,29 @@ export class ArduinoFrontendContribution implements FrontendApplicationContribut
registerColors(colors: ColorRegistry): void { registerColors(colors: ColorRegistry): void {
colors.register( colors.register(
{ {
id: 'arduino.base', id: 'arduino.branding.primary',
defaults: { defaults: {
dark: '#616161', dark: 'statusBar.background',
light: '#616161', light: 'statusBar.background'
hc: '#FFFFFF'
}, },
description: 'Base layout color.' description: 'The primary branding color, such as dialog titles, library, and board manager list labels.'
}, },
{ {
id: 'arduino.toolbarTooltip', id: 'arduino.branding.secondary',
defaults: { defaults: {
dark: '#616161', dark: 'statusBar.background',
light: '#616161', light: 'statusBar.background'
hc: '#FFFFFF'
}, },
description: 'The color of the toolbar tooltip (shown next to the buttons).' description: 'Secondary branding color for list selections, dropdowns, and widget borders.'
}, },
{ {
id: 'arduino.editorMargin', id: 'arduino.foreground',
defaults: {
dark: '#2e2e2e',
light: '#EEEEEE',
hc: 'contrastBorder'
},
description: 'The color of the border which separates line numbers from code area.'
},
{
id: 'arduino.dialogTitle',
defaults: {
dark: 'foreground',
light: 'foreground',
hc: 'contrastBorder'
},
description: 'The color of a dialog title (e.g. in board selector dialog).'
},
{
id: 'arduino.select',
defaults: {
},
description: 'Color of background and border of select component (in serial monitor).'
},
{
id: 'arduino.selectItemHoverBackground',
defaults: {
light: '#d7eaf8',
dark: '#24455e'
},
description: 'Color of background of hovered Item in select component (in serial monitor).'
},
{
id: 'arduino.dialogSecondaryTitle',
defaults: {
dark: '#7f8c8d',
light: '#7f8c8d'
},
description: 'Color of secondary titles in Arduino Dialogs.'
},
{
id: 'arduino.secondaryButtonShadow',
defaults: {
dark: '#95a5a6',
light: '#95a5a6'
},
description: 'Color of secondary button shadow.'
},
{
id: 'arduino.buttonShadow',
defaults: {
dark: '#006468',
light: '#006468'
},
description: 'Color of button shadow.'
},
{
id: 'arduino.toolbarItemForeground',
defaults: {
dark: 'button.foreground',
light: 'button.foreground'
},
description: 'Foreground color of toolbar items.'
},
{
id: 'arduino.boardSelectorBackground',
defaults: { defaults: {
dark: 'editorWidget.background', dark: 'editorWidget.background',
light: 'editorWidget.background', light: 'editorWidget.background',
hc: 'editorWidget.background' hc: 'editorWidget.background'
}, },
description: 'Background color of board selector toolbar item.' description: 'Color of the Arduino Pro IDE foreground which is used for dialogs, such as the Select Board dialog.'
},
{
id: 'arduino.boardSelectorHoverBackground',
defaults: {
dark: '#383838',
light: '#dae2e4'
},
description: 'Background color of board selector toolbar item.'
},
{
id: 'arduino.boardSelectorBorder',
defaults: {
dark: '#757575',
light: '#e0e0e0'
},
description: 'Border color of board selector toolbar item.'
},
{
id: 'arduino.boardSelectorCheck',
defaults: {
dark: '#259fd8',
light: '#2b75c0'
},
description: 'Color of board selector toolbar check item.'
},
{
id: 'arduino.listOddItem',
defaults: {
dark: '#1d1d1d',
light: '#ffffff'
},
description: 'Backgroundcolor of item with odd number in list widget'
},
{
id: 'arduino.listEvenItem',
defaults: {
dark: '#252526',
light: '#f7f9f9'
},
description: 'Backgroundcolor of item with even number in list widget'
},
{
id: 'arduino.listItemHoverBackground',
defaults: {
dark: '#333333',
light: '#ececec'
},
description: 'Backgroundcolor of hovered item in list widget'
},
{
id: 'arduino.listItemSecondaryForeground',
defaults: {
dark: '#9e9e9e',
light: '#9e9e9e'
},
description: 'Backgroundcolor of hovered item in list widget'
},
{
id: 'arduino.listItemInstalledBadge',
defaults: {
dark: '#259fd8',
light: '#2b75c0'
},
description: 'Color of badge for installed list items.'
},
{
id: 'arduino.listItemInfoLinkForeground',
defaults: {
dark: '#2196f3',
light: '#2196f3'
},
description: 'Color of info link in list items.'
},
{
id: 'arduino.bottomPanelTabBackground',
defaults: {
dark: 'editorGroupHeader.tabsBackground',
light: 'editorGroupHeader.tabsBackground'
},
description: 'Color of info link in list items.'
},
{
id: 'arduino.toolbarToggleBackground',
defaults: {
dark: '#757575',
light: '#9e9e9e'
},
description: 'Color of active toggles (as in serial monitor toolbar).'
} }
); );
} }

2
arduino-ide-extension/src/browser/arduino-frontend-module.ts
View File

@ -76,7 +76,7 @@ const ElementQueries = require('css-element-queries/src/ElementQueries');
MonacoThemingService.register({ MonacoThemingService.register({
id: 'arduinoTheme', id: 'arduinoTheme',
label: 'Arduino Light Theme', label: 'Light (Arduino)',
uiTheme: 'vs', uiTheme: 'vs',
json: require('../../src/browser/data/arduino.color-theme.json') json: require('../../src/browser/data/arduino.color-theme.json')
}); });

2
arduino-ide-extension/src/browser/components/arduino-select.tsx
View File

@ -45,7 +45,7 @@ export class ArduinoSelect<T> extends Select<T> {
// `primary50`??? it's crazy but apparently, without this, we would get a light-blueish // `primary50`??? it's crazy but apparently, without this, we would get a light-blueish
// color when selecting an option in the select by clicking and then not releasing the button. // color when selecting an option in the select by clicking and then not releasing the button.
// https://react-select.com/styles#overriding-the-theme // https://react-select.com/styles#overriding-the-theme
primary50: 'var(--theia-arduino-selectItemHoverBackground)', primary50: 'var(--theia-list-activeSelectionBackground)',
} }
}); });
const DropdownIndicator = () => <span className='fa fa-caret-down caret' />; const DropdownIndicator = () => <span className='fa fa-caret-down caret' />;

2
arduino-ide-extension/src/browser/components/component-list/list-item-renderer.tsx
View File

@ -51,7 +51,7 @@ export class ListItemRenderer<T extends ArduinoComponent> {
const moreInfo = !!item.moreInfoLink && <a href={item.moreInfoLink} onClick={this.onMoreInfoClick}>More info</a>; const moreInfo = !!item.moreInfoLink && <a href={item.moreInfoLink} onClick={this.onMoreInfoClick}>More info</a>;
const onClickInstall = () => install(item); const onClickInstall = () => install(item);
const installButton = item.installable && const installButton = item.installable &&
<button className='install' onClick={onClickInstall}>INSTALL</button>; <button className='theia-button install' onClick={onClickInstall}>INSTALL</button>;
const onSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => { const onSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
const version = event.target.value; const version = event.target.value;

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

@ -1,91 +1,93 @@
{ {
"tokenColors": [ "tokenColors": [
{ {
"settings": { "settings": {
"foreground": "#434f54" "foreground": "#434f54"
} }
}, },
{ {
"name": "Comments", "name": "Comments",
"scope": "comment", "scope": "comment",
"settings": { "settings": {
"foreground": "#95a5a6cc" "foreground": "#95a5a6cc"
} }
}, },
{ {
"name": "Keywords Attributes", "name": "Keywords Attributes",
"scope": [ "scope": [
"storage", "storage",
"support", "support",
"string.quoted.single.c" "string.quoted.single.c"
], ],
"settings": { "settings": {
"foreground": "#00979D" "foreground": "#00979D"
} }
}, },
{ {
"name": "literal", "name": "literal",
"scope": [ "scope": [
"meta.function.c", "meta.function.c",
"entity.name.function", "entity.name.function",
"meta.function-call.c" "meta.function-call.c"
], ],
"settings": { "settings": {
"foreground": "#D35400" "foreground": "#D35400"
} }
}, },
{ {
"name": "punctuation", "name": "punctuation",
"scope": [ "scope": [
"punctuation.section", "punctuation.section",
"meta.function-call.c", "meta.function-call.c",
"meta.block.c", "meta.block.c",
"meta.function.c", "meta.function.c",
"entity.name.function.preprocessor.c", "entity.name.function.preprocessor.c",
"meta.preprocessor.macro.c" "meta.preprocessor.macro.c"
], ],
"settings": { "settings": {
"foreground": "#434f54" "foreground": "#434f54"
} }
}, },
{ {
"name": "strings", "name": "strings",
"scope": [ "scope": [
"string.quoted.double" "string.quoted.double"
], ],
"settings": { "settings": {
"foreground": "#005C5F" "foreground": "#005C5F"
} }
}, },
{ {
"name": "meta keywords", "name": "meta keywords",
"scope": [ "scope": [
"keyword.control", "keyword.control",
"meta.preprocessor.c" "meta.preprocessor.c"
], ],
"settings": { "settings": {
"foreground": "#728E00" "foreground": "#728E00"
} }
}, },
{ {
"name": "numeric preprocessor", "name": "numeric preprocessor",
"scope": [ "scope": [
"meta.preprocessor.macro.c", "meta.preprocessor.macro.c",
"constant.numeric.preprocessor.c", "constant.numeric.preprocessor.c",
"meta.preprocessor.c" "meta.preprocessor.c"
], ],
"settings": { "settings": {
"foreground": "#434f54" "foreground": "#434f54"
} }
} }
], ],
"colors": { "colors": {
"editor.background": "#FFFFFF", "list.highlightForeground": "#006468",
"editorCursor.foreground": "#434f54", "list.activeSelectionBackground": "#006468",
"editor.foreground": "#434f54", "editor.background": "#ffffff",
"editorWhitespace.foreground": "#BFBFBF", "editorCursor.foreground": "#434f54",
"editor.lineHighlightBackground": "#434f5410", "editor.foreground": "#434f54",
"editor.selectionBackground": "#ffcb00", "editorWhitespace.foreground": "#bfbfbf",
"editor.lineHighlightBackground": "#434f5410",
"editor.selectionBackground": "#ffcb00",
"focusBorder": "#4db7bb99", "focusBorder": "#4db7bb99",
"menubar.selectionBackground": "#ffffff", "menubar.selectionBackground": "#ffffff",
"menubar.selectionForeground": "#212121", "menubar.selectionForeground": "#212121",
@ -95,32 +97,19 @@
"button.background": "#4db7bb", "button.background": "#4db7bb",
"titleBar.activeBackground": "#006468", "titleBar.activeBackground": "#006468",
"titleBar.activeForeground": "#ffffff", "titleBar.activeForeground": "#ffffff",
"secondaryButton.background": "#b5c8c9",
"secondaryButton.hoverBackground": "#dae3e3",
"terminal.background": "#000000", "terminal.background": "#000000",
"terminal.foreground": "#e0e0e0", "terminal.foreground": "#e0e0e0",
"dropdown.border": "#ececec", "dropdown.border": "#ececec",
"dropdown.background": "#ececec", "dropdown.background": "#ececec",
"warningForeground": "#434f54",
"activityBar.background": "#ececec", "activityBar.background": "#ececec",
"activityBar.foreground": "#616161", "activityBar.foreground": "#616161",
"statusBar.background": "#006468", "statusBar.background": "#006468",
"arduino.base": "#006468", "secondaryButton.background": "#b5c8c9",
"arduino.dialogTitle": "#00979d", "secondaryButton.hoverBackground": "#dae3e3",
"arduino.select": "#ececec", "arduino.branding.primary": "#00979d",
"arduino.selectItemHoverBackground": "#4db7bb66", "arduino.branding.secondary": "#b5c8c9",
"list.hoverBackground": "#ececec", "arduino.foreground": "#edf1f1"
"arduino.secondaryButtonShadow": "#95a5a6", },
"arduino.buttonShadow": "#006468",
"arduino.boardSelectorCheck": "#4db7bb",
"arduino.listItemInstalledBadge": "#4db7bb",
"inputValidation.warningBackground": "#ffb300",
"arduino.listItemInfoLinkForeground": "#17a1a5",
"arduino.toolbarItemForeground": "#006468",
"arduino.toolbarTooltip": "#e0e0e0",
"arduino.bottomPanelTabBackground": "#ffffff",
"arduino.toolbarToggleBackground": "#b5c8c9"
},
"type": "light", "type": "light",
"name": "Arduino" "name": "Arduino"
} }

22
arduino-ide-extension/src/browser/style/arduino-select.css
View File

@ -1,10 +1,10 @@
.arduino-select__control { .arduino-select__control {
border: var(--theia-arduino-select) var(--theia-border-width) solid !important; border: var(--theia-sideBar-background) var(--theia-border-width) solid !important;
background: var(--theia-arduino-select) !important; background: var(--theia-sideBar-background) !important;
} }
.arduino-select__control:hover { .arduino-select__control:hover {
border: var(--theia-arduino-select) var(--theia-border-width) solid !important; border: var(--theia-focusBorder) var(--theia-border-width) solid !important;
} }
.arduino-select__control--is-focused { .arduino-select__control--is-focused {
@ -12,18 +12,24 @@
} }
.arduino-select__option--is-selected { .arduino-select__option--is-selected {
background-color: var(--theia-focusBorder) !important; background-color: var(--theia-list-activeSelectionBackground) !important;
color: var(--theia-editor-foreground) !important; color: var(--theia-list-activeSelectionForeground) !important;
border-color: var(--theia-focusBorder) !important; border-color: var(--theia-focusBorder) !important;
} }
.arduino-select__option--is-focused { .arduino-select__option--is-focused {
background-color: var(--theia-arduino-selectItemHoverBackground) !important; background-color: var(--theia-list-hoverBackground) !important;
border-color: var(--theia-focusBorder) !important;
}
.arduino-select__option--is-focused.arduino-select__option--is-selected {
background-color: var(--theia-list-activeSelectionBackground) !important;
color: var(--theia-list-activeSelectionForeground) !important;
border-color: var(--theia-focusBorder) !important; border-color: var(--theia-focusBorder) !important;
} }
.arduino-select__menu { .arduino-select__menu {
background-color: var(--theia-arduino-select) !important; background-color: var(--theia-sideBar-background) !important;
border: 1px solid var(--theia-focusBorder) !important; border: 1px solid var(--theia-focusBorder) !important;
top: auto !important; /* to align the top of the menu with the bottom of the control */ top: auto !important; /* to align the top of the menu with the bottom of the control */
box-shadow: none !important; box-shadow: none !important;
@ -32,7 +38,7 @@
.arduino-select__control.arduino-select__control--menu-is-open { .arduino-select__control.arduino-select__control--menu-is-open {
border: 1px solid !important; border: 1px solid !important;
border-color: var(--theia-focusBorder) !important; border-color: var(--theia-focusBorder) !important;
border-bottom-color: var(--theia-arduino-select) !important; /* if the bottom border color has the same color as the background of the control, we make the border "invisible" */ border-bottom-color: var(--theia-sideBar-background) !important; /* if the bottom border color has the same color as the background of the control, we make the border "invisible" */
} }
.arduino-select__value-container .arduino-select__single-value { .arduino-select__value-container .arduino-select__single-value {

25
arduino-ide-extension/src/browser/style/board-select-dialog.css
View File

@ -15,7 +15,7 @@ div.dialogContent.select-board-dialog > div.head .title {
font-weight: 400; font-weight: 400;
letter-spacing: .02em; letter-spacing: .02em;
font-size: 1.2em; font-size: 1.2em;
color: var(--theia-arduino-dialogTitle); color: var(--theia-arduino-branding-primary);
margin: 17px 0; margin: 17px 0;
} }
@ -27,8 +27,8 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected {
background: var(--theia-secondaryButton-hoverBackground); background: var(--theia-secondaryButton-hoverBackground);
} }
div#select-board-dialog .selectBoardContainer .body .list .item.selected i{ div#select-board-dialog .selectBoardContainer .body .list .item.selected i {
color: var(--theia-arduino-base); color: var(--theia-arduino-branding-primary);
} }
#select-board-dialog .selectBoardContainer .search, #select-board-dialog .selectBoardContainer .search,
@ -79,7 +79,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-dialogSecondaryTitle); color: var(--theia-arduino-branding-secondary);
padding: 10px 5px 10px 10px; padding: 10px 5px 10px 10px;
text-transform: uppercase; text-transform: uppercase;
/* The max, min-height comes from `.body .list` 265px + 47px top padding - 2 * 10px top padding */ /* The max, min-height comes from `.body .list` 265px + 47px top padding - 2 * 10px top padding */
@ -99,7 +99,7 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i{
#select-board-dialog .selectBoardContainer .body .list .item .detail { #select-board-dialog .selectBoardContainer .body .list .item .detail {
font-size: var(--theia-ui-font-size1); font-size: var(--theia-ui-font-size1);
color: var(--theia-mod-disabled-opacity); opacity: var(--theia-mod-disabled-opacity);
width: 155px; /* used heuristics for the calculation */ width: 155px; /* used heuristics for the calculation */
white-space: pre; white-space: pre;
overflow: hidden; overflow: hidden;
@ -107,7 +107,7 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i{
} }
#select-board-dialog .selectBoardContainer .body .list .item.missing { #select-board-dialog .selectBoardContainer .body .list .item.missing {
color: var(--theia-mod-disabled-opacity); opacity: var(--theia-mod-disabled-opacity);
} }
#select-board-dialog .selectBoardContainer .body .list .item:hover { #select-board-dialog .selectBoardContainer .body .list .item:hover {
@ -142,12 +142,10 @@ button.theia-button {
button.theia-button.secondary { button.theia-button.secondary {
background-color: var(--theia-secondaryButton-background); background-color: var(--theia-secondaryButton-background);
color: var(--theia-foreground); color: var(--theia-foreground);
box-shadow: 0 4px var(--theia-arduino-secondaryButtonShadow);
} }
button.theia-button.main { button.theia-button.main {
color: var(--theia-button-foreground); color: var(--theia-button-foreground);
box-shadow: 0 4px var(--theia-arduino-buttonShadow);
} }
.dialogControl { .dialogControl {
@ -191,16 +189,17 @@ button.theia-button.main {
} }
.arduino-boards-toolbar-item { .arduino-boards-toolbar-item {
background: var(--theia-arduino-boardSelectorBackground); background: var(--theia-tab-unfocusedActiveBackground);
color: var(--theia-foreground); color: var(--theia-foreground);
height: 22px; height: 22px;
display: flex; display: flex;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
margin: 0px 3px 0px 3px;
} }
.arduino-boards-dropdown-list { .arduino-boards-dropdown-list {
border: 3px solid var(--theia-arduino-boardSelectorBorder); border: 3px solid var(--theia-activityBar-background);
margin: -3px; margin: -3px;
z-index: 1; z-index: 1;
} }
@ -211,15 +210,15 @@ button.theia-button.main {
padding: 10px; padding: 10px;
cursor: pointer; cursor: pointer;
color: var(--theia-foreground); color: var(--theia-foreground);
background: var(--theia-arduino-boardSelectorBackground); background: var(--theia-tab-unfocusedActiveBackground);
} }
.arduino-boards-dropdown-item .fa-check { .arduino-boards-dropdown-item .fa-check {
color: var(--theia-arduino-boardSelectorCheck); color: var(--theia-arduino-branding-primary);
align-self: center; align-self: center;
} }
.arduino-boards-dropdown-item.selected, .arduino-boards-dropdown-item.selected,
.arduino-boards-dropdown-item:hover { .arduino-boards-dropdown-item:hover {
background: var(--theia-arduino-boardSelectorHoverBackground); background: var(--theia-list-hoverBackground);
} }

18
arduino-ide-extension/src/browser/style/index.css
View File

@ -10,26 +10,26 @@
outline-style: solid; outline-style: solid;
outline-offset: -1px; outline-offset: -1px;
opacity: 1 !important; opacity: 1 !important;
color: var(--theia-foreground); color: var(--theia-warningForeground);
background-color: var(--theia-inputValidation-warningBackground); background-color: var(--theia-warningBackground);
} }
.theia-input.warning { .theia-input.warning {
background-color: var(--theia-inputValidation-warningBackground); background-color: var(--theia-warningBackground);
} }
.theia-input.warning::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ .theia-input.warning::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: var(--theia-foreground); color: var(--theia-warningForeground);
background-color: var(--theia-inputValidation-warningBackground); background-color: var(--theia-warningBackground);
opacity: 1; /* Firefox */ opacity: 1; /* Firefox */
} }
.theia-input.warning:-ms-input-placeholder { /* Internet Explorer 10-11 */ .theia-input.warning:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: var(--theia-foreground); color: var(--theia-warningForeground);
background-color: var(--theia-inputValidation-warningBackground); background-color: var(--theia-warningBackground);
} }
.theia-input.warning::-ms-input-placeholder { /* Microsoft Edge */ .theia-input.warning::-ms-input-placeholder { /* Microsoft Edge */
color: var(--theia-foreground); color: var(--theia-warningForeground);
background-color: var(--theia-inputValidation-warningBackground); background-color: var(--theia-warningBackground);
} }

23
arduino-ide-extension/src/browser/style/list-widget.css
View File

@ -28,15 +28,18 @@
} }
.filterable-list-container .items-container > div:nth-child(odd) { .filterable-list-container .items-container > div:nth-child(odd) {
background-color: var(--theia-arduino-listOddItem); background-color: var(--theia-sideBar-background);
filter: contrast(105%);
} }
.filterable-list-container .items-container > div:nth-child(even) { .filterable-list-container .items-container > div:nth-child(even) {
background-color: var(--theia-arduino-listEvenItem); background-color: var(--theia-sideBar-background);
filter: contrast(95%);
} }
.filterable-list-container .items-container > div:hover { .filterable-list-container .items-container > div:hover {
background-color: var(--theia-arduino-listItemHoverBackground); background-color: var(--theia-sideBar-background);
filter: contrast(90%);
} }
/* Perfect scrollbar does not like if we explicitly set the `background-color` of the contained elements. /* Perfect scrollbar does not like if we explicitly set the `background-color` of the contained elements.
@ -74,7 +77,7 @@ https://github.com/arduino/arduino-pro-ide/issues/82 */
.component-list-item .header .author { .component-list-item .header .author {
font-weight: bold; font-weight: bold;
color: var(--theia-arduino-listItemSecondaryForeground); color: var(--theia-panelTitle-inactiveForeground);
} }
.component-list-item:hover .header .author { .component-list-item:hover .header .author {
@ -82,14 +85,18 @@ https://github.com/arduino/arduino-pro-ide/issues/82 */
} }
.component-list-item .header .version { .component-list-item .header .version {
color: var(--theia-arduino-listItemSecondaryForeground); color: var(--theia-panelTitle-inactiveForeground);
}
.component-list-item .footer .theia-button.install {
height: auto; /* resets the default Theia button height in the filterable list widget */
} }
.component-list-item .header .installed:before { .component-list-item .header .installed:before {
margin-left: 4px; margin-left: 4px;
display: inline-block; display: inline-block;
justify-self: end; justify-self: end;
background-color: var(--theia-arduino-listItemInstalledBadge); background-color: var(--theia-button-background);
padding: 2px 4px 2px 4px; padding: 2px 4px 2px 4px;
font-size: 10px; font-size: 10px;
font-weight: bold; font-weight: bold;
@ -100,7 +107,7 @@ https://github.com/arduino/arduino-pro-ide/issues/82 */
.component-list-item .header .installed:hover:before { .component-list-item .header .installed:hover:before {
background-color: var(--theia-button-foreground); background-color: var(--theia-button-foreground);
color: var(--theia-arduino-listItemInstalledBadge); color: var(--theia-button-background);
content: 'UNINSTALL'; content: 'UNINSTALL';
} }
@ -131,7 +138,7 @@ https://github.com/arduino/arduino-pro-ide/issues/82 */
} }
.component-list-item .info a { .component-list-item .info a {
color: var(--theia-arduino-listItemInfoLinkForeground); color: var(--theia-button-background);
text-decoration: none; text-decoration: none;
} }

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

@ -2,10 +2,6 @@
background: var(--theia-editorGroupHeader-tabsBackground); background: var(--theia-editorGroupHeader-tabsBackground);
} }
#theia-bottom-content-panel .p-TabBar-tab {
background: var(--theia-arduino-bottomPanelTabBackground);
}
.theia-output { .theia-output {
background: var(--theia-terminal-background); background: var(--theia-terminal-background);
color: var(--theia-terminal-foreground); color: var(--theia-terminal-foreground);
@ -39,8 +35,7 @@
.arduino-tool-icon { .arduino-tool-icon {
height: 24px; height: 24px;
width: 24px; width: 24px;
color: var(--theia-arduino-toolbarItemForeground); background-color: var(--theia-titleBar-activeBackground);
background: var(--theia-arduino-toolbarItemForeground);
-webkit-mask: url(../icons/mask-buttons.svg); -webkit-mask: url(../icons/mask-buttons.svg);
mask: url(../icons/mask-buttons.svg); mask: url(../icons/mask-buttons.svg);
-webkit-mask-size: 800%; -webkit-mask-size: 800%;
@ -82,6 +77,14 @@
z-index: 0; z-index: 0;
} }
#theia-top-panel .p-TabBar-toolbar {
padding-left: 4px !important; /* moves the `verify`, upload and other toolbar items to the left */
}
.p-Widget .p-MenuBar {
padding-left: 1px !important; /* moves the menubar: `File`, `Edit`, etc to the left */
}
#theia-top-panel .p-TabBar-toolbar.theia-arduino-toolbar.right { #theia-top-panel .p-TabBar-toolbar.theia-arduino-toolbar.right {
justify-content: flex-start; justify-content: flex-start;
min-width: 190px; min-width: 190px;
@ -96,7 +99,7 @@
margin-left: 10px; margin-left: 10px;
display: flex; display: flex;
align-items: center; align-items: center;
color: var(--theia-arduino-toolbarTooltip); color: var(--theia-titleBar-activeForeground);
} }
.p-TabBar-toolbar .item > div.arduino-toggle-advanced-mode { .p-TabBar-toolbar .item > div.arduino-toggle-advanced-mode {
@ -114,11 +117,11 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: var(--theia-arduino-toolbarItemForeground); color: var(--theia-titleBar-activeBackground);;
} }
.monaco-editor .margin { .monaco-editor .margin {
border-right: 2px solid var(--theia-arduino-editorMargin); border-right: 2px solid var(--theia-sideBar-background);
box-sizing: border-box; box-sizing: border-box;
} }
@ -130,4 +133,8 @@
.theia-sidepanel-toolbar .theia-sidepanel-title { .theia-sidepanel-toolbar .theia-sidepanel-title {
margin-left: 10px; margin-left: 10px;
} }
.p-Widget.dialogOverlay .dialogBlock {
background-color: var(--theia-arduino-foreground);
}

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

@ -54,7 +54,8 @@
} }
.p-TabBar-toolbar .item.arduino-monitor.toggled { .p-TabBar-toolbar .item.arduino-monitor.toggled {
background: var(--theia-arduino-toolbarToggleBackground); background: var(--theia-sideBarSectionHeader-background);
filter: contrast(80%);
} }
.p-TabBar-toolbar .item .clear-all { .p-TabBar-toolbar .item .clear-all {

4
arduino-ide-extension/src/browser/toolbar/arduino-toolbar.tsx
View File

@ -39,7 +39,7 @@ export class ArduinoToolbarComponent extends React.Component<ArduinoToolbarCompo
} }
} }
const command = this.props.commands.getCommand(item.command); const command = this.props.commands.getCommand(item.command);
const cls = `${ARDUINO_TOOLBAR_ITEM_CLASS} ${TabBarToolbar.Styles.TAB_BAR_TOOLBAR_ITEM} ${command && this.props.commandIsEnabled(command.id) ? ' enabled' : ''}` const cls = `${ARDUINO_TOOLBAR_ITEM_CLASS} ${TabBarToolbar.Styles.TAB_BAR_TOOLBAR_ITEM} ${command && this.props.commandIsEnabled(command.id) ? 'enabled' : ''}`
return <div key={item.id} className={cls} > return <div key={item.id} className={cls} >
<div className={item.id}> <div className={item.id}>
<div <div
@ -137,4 +137,4 @@ export namespace ArduinoToolbar {
export function is(maybeToolbarWidget: any): maybeToolbarWidget is ArduinoToolbar { export function is(maybeToolbarWidget: any): maybeToolbarWidget is ArduinoToolbar {
return maybeToolbarWidget instanceof ArduinoToolbar; return maybeToolbarWidget instanceof ArduinoToolbar;
} }
} }

2634
yarn.lock
View File

File diff suppressed because it is too large Load Diff