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

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

4
.gitignore vendored
View File

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

View File

@ -582,184 +582,29 @@ export class ArduinoFrontendContribution implements FrontendApplicationContribut
registerColors(colors: ColorRegistry): void {
colors.register(
{
id: 'arduino.base',
id: 'arduino.branding.primary',
defaults: {
dark: '#616161',
light: '#616161',
hc: '#FFFFFF'
dark: 'statusBar.background',
light: 'statusBar.background'
},
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: {
dark: '#616161',
light: '#616161',
hc: '#FFFFFF'
dark: 'statusBar.background',
light: 'statusBar.background'
},
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',
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',
id: 'arduino.foreground',
defaults: {
dark: 'editorWidget.background',
light: 'editorWidget.background',
hc: 'editorWidget.background'
},
description: 'Background color of board selector toolbar item.'
},
{
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).'
description: 'Color of the Arduino Pro IDE foreground which is used for dialogs, such as the Select Board dialog.'
}
);
}

View File

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

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
// color when selecting an option in the select by clicking and then not releasing the button.
// 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' />;

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 onClickInstall = () => install(item);
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 version = event.target.value;

View File

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

View File

@ -1,10 +1,10 @@
.arduino-select__control {
border: var(--theia-arduino-select) var(--theia-border-width) solid !important;
background: var(--theia-arduino-select) !important;
border: var(--theia-sideBar-background) var(--theia-border-width) solid !important;
background: var(--theia-sideBar-background) !important;
}
.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 {
@ -12,18 +12,24 @@
}
.arduino-select__option--is-selected {
background-color: var(--theia-focusBorder) !important;
color: var(--theia-editor-foreground) !important;
background-color: var(--theia-list-activeSelectionBackground) !important;
color: var(--theia-list-activeSelectionForeground) !important;
border-color: var(--theia-focusBorder) !important;
}
.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;
}
.arduino-select__menu {
background-color: var(--theia-arduino-select) !important;
background-color: var(--theia-sideBar-background) !important;
border: 1px solid var(--theia-focusBorder) !important;
top: auto !important; /* to align the top of the menu with the bottom of the control */
box-shadow: none !important;
@ -32,7 +38,7 @@
.arduino-select__control.arduino-select__control--menu-is-open {
border: 1px solid !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 {

View File

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

View File

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

View File

@ -28,15 +28,18 @@
}
.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) {
background-color: var(--theia-arduino-listEvenItem);
background-color: var(--theia-sideBar-background);
filter: contrast(95%);
}
.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.
@ -74,7 +77,7 @@ https://github.com/arduino/arduino-pro-ide/issues/82 */
.component-list-item .header .author {
font-weight: bold;
color: var(--theia-arduino-listItemSecondaryForeground);
color: var(--theia-panelTitle-inactiveForeground);
}
.component-list-item:hover .header .author {
@ -82,14 +85,18 @@ https://github.com/arduino/arduino-pro-ide/issues/82 */
}
.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 {
margin-left: 4px;
display: inline-block;
justify-self: end;
background-color: var(--theia-arduino-listItemInstalledBadge);
background-color: var(--theia-button-background);
padding: 2px 4px 2px 4px;
font-size: 10px;
font-weight: bold;
@ -100,7 +107,7 @@ https://github.com/arduino/arduino-pro-ide/issues/82 */
.component-list-item .header .installed:hover:before {
background-color: var(--theia-button-foreground);
color: var(--theia-arduino-listItemInstalledBadge);
color: var(--theia-button-background);
content: 'UNINSTALL';
}
@ -131,7 +138,7 @@ https://github.com/arduino/arduino-pro-ide/issues/82 */
}
.component-list-item .info a {
color: var(--theia-arduino-listItemInfoLinkForeground);
color: var(--theia-button-background);
text-decoration: none;
}

View File

@ -2,10 +2,6 @@
background: var(--theia-editorGroupHeader-tabsBackground);
}
#theia-bottom-content-panel .p-TabBar-tab {
background: var(--theia-arduino-bottomPanelTabBackground);
}
.theia-output {
background: var(--theia-terminal-background);
color: var(--theia-terminal-foreground);
@ -39,8 +35,7 @@
.arduino-tool-icon {
height: 24px;
width: 24px;
color: var(--theia-arduino-toolbarItemForeground);
background: var(--theia-arduino-toolbarItemForeground);
background-color: var(--theia-titleBar-activeBackground);
-webkit-mask: url(../icons/mask-buttons.svg);
mask: url(../icons/mask-buttons.svg);
-webkit-mask-size: 800%;
@ -82,6 +77,14 @@
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 {
justify-content: flex-start;
min-width: 190px;
@ -96,7 +99,7 @@
margin-left: 10px;
display: flex;
align-items: center;
color: var(--theia-arduino-toolbarTooltip);
color: var(--theia-titleBar-activeForeground);
}
.p-TabBar-toolbar .item > div.arduino-toggle-advanced-mode {
@ -114,11 +117,11 @@
display: flex;
justify-content: center;
align-items: center;
color: var(--theia-arduino-toolbarItemForeground);
color: var(--theia-titleBar-activeBackground);;
}
.monaco-editor .margin {
border-right: 2px solid var(--theia-arduino-editorMargin);
border-right: 2px solid var(--theia-sideBar-background);
box-sizing: border-box;
}
@ -130,4 +133,8 @@
.theia-sidepanel-toolbar .theia-sidepanel-title {
margin-left: 10px;
}
}
.p-Widget.dialogOverlay .dialogBlock {
background-color: var(--theia-arduino-foreground);
}

View File

@ -54,7 +54,8 @@
}
.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 {

View File

@ -39,7 +39,7 @@ export class ArduinoToolbarComponent extends React.Component<ArduinoToolbarCompo
}
}
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} >
<div className={item.id}>
<div
@ -137,4 +137,4 @@ export namespace ArduinoToolbar {
export function is(maybeToolbarWidget: any): maybeToolbarWidget is ArduinoToolbar {
return maybeToolbarWidget instanceof ArduinoToolbar;
}
}
}

2634
yarn.lock

File diff suppressed because it is too large Load Diff