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

Merge pull request #98 from bcmi-labs/theme-update-vol2

Browse Source 
Theme update vol2
This commit is contained in:
Akos Kitta 2020-01-30 14:24:41 +01:00 committed by GitHub
commit ef74b04b0b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 1745 additions and 1708 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/
!electron/build/
src-gen/
browser-app/webpack.config.js
electron-app/webpack.config.js
*webpack.config.js
.DS_Store
/workspace/static
.DS_Store
# switching from `electron` to `browser` in dev mode.

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

@ -42,6 +42,8 @@ import { ScmContribution } from '@theia/scm/lib/browser/scm-contribution';
import { SearchInWorkspaceFrontendContribution } from '@theia/search-in-workspace/lib/browser/search-in-workspace-frontend-contribution';
import { FileNavigatorCommands } from '@theia/navigator/lib/browser/navigator-contribution';
import { EditorMode } from './editor-mode';
import { ColorContribution } from '@theia/core/lib/browser/color-application-contribution';
import { ColorRegistry } from '@theia/core/lib/browser/color-registry';
export namespace ArduinoMenus {
export const SKETCH = [...MAIN_MENU_BAR, '3_sketch'];
@ -57,7 +59,7 @@ export namespace ArduinoToolbarContextMenu {
@injectable()
export class ArduinoFrontendContribution implements FrontendApplicationContribution,
TabBarToolbarContribution, CommandContribution, MenuContribution, KeybindingContribution {
TabBarToolbarContribution, CommandContribution, MenuContribution, KeybindingContribution, ColorContribution {
@inject(MessageService)
protected readonly messageService: MessageService;
@ -577,4 +579,34 @@ export class ArduinoFrontendContribution implements FrontendApplicationContribut
return undefined;
}
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 Pro IDE foreground which is used for dialogs, such as the Select Board dialog.'
}
);
}
}

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

@ -26,8 +26,6 @@ import { ToolOutputServiceClientImpl } from './tool-output/client-service-impl';
import { BoardsServiceClientImpl } from './boards/boards-service-client-impl';
import { WorkspaceService } from '@theia/workspace/lib/browser/workspace-service';
import { ArduinoWorkspaceService } from './arduino-workspace-service';
import { ThemeService } from '@theia/core/lib/browser/theming';
import { ArduinoTheme } from './arduino-theme';
import { OutlineViewContribution } from '@theia/outline-view/lib/browser/outline-view-contribution';
import { ArduinoOutlineViewContribution } from './customization/arduino-outline-contribution';
import { ProblemContribution } from '@theia/markers/lib/browser/problem/problem-contribution';
@ -71,9 +69,18 @@ import { ArduinoAboutDialog } from './customization/arduino-about-dialog';
import { ArduinoShellLayoutRestorer } from './shell/arduino-shell-layout-restorer';
import { EditorMode } from './editor-mode';
import { ListItemRenderer } from './components/component-list/list-item-renderer';
import { ColorContribution } from '@theia/core/lib/browser/color-application-contribution';
import { MonacoThemingService } from '@theia/monaco/lib/browser/monaco-theming-service';
const ElementQueries = require('css-element-queries/src/ElementQueries');
MonacoThemingService.register({
id: 'arduinoTheme',
label: 'Light (Arduino)',
uiTheme: 'vs',
json: require('../../src/browser/data/arduino.color-theme.json')
});
export default new ContainerModule((bind: interfaces.Bind, unbind: interfaces.Unbind, isBound: interfaces.IsBound, rebind: interfaces.Rebind) => {
ElementQueries.listen();
ElementQueries.init();
@ -85,6 +92,7 @@ export default new ContainerModule((bind: interfaces.Bind, unbind: interfaces.Un
bind(TabBarToolbarContribution).toService(ArduinoFrontendContribution);
bind(KeybindingContribution).toService(ArduinoFrontendContribution);
bind(FrontendApplicationContribution).toService(ArduinoFrontendContribution);
bind(ColorContribution).toService(ArduinoFrontendContribution);
bind(ArduinoToolbarContribution).toSelf().inSingletonScope();
bind(FrontendApplicationContribution).toService(ArduinoToolbarContribution);
@ -200,9 +208,6 @@ export default new ContainerModule((bind: interfaces.Bind, unbind: interfaces.Un
bind(ArduinoWorkspaceService).toSelf().inSingletonScope();
rebind(WorkspaceService).toService(ArduinoWorkspaceService);
const themeService = ThemeService.get();
themeService.register(...ArduinoTheme.themes);
// Customizing default Theia layout based on the editor mode: `pro-mode` or `classic`.
bind(EditorMode).toSelf().inSingletonScope();
bind(FrontendApplicationContribution).toService(EditorMode);

29
arduino-ide-extension/src/browser/arduino-theme.ts
View File

@ -1,29 +0,0 @@
import { Theme } from '@theia/core/lib/browser/theming';
import { MonacoThemeRegistry } from '@theia/monaco/lib/browser/textmate/monaco-theme-registry';
const ARDUINO_CSS = require('../../src/browser/style/arduino.useable.css');
const ARDUINO_JSON = MonacoThemeRegistry.SINGLETON.register(
require('../../src/browser/data/arduino.color-theme.json'), {}, 'arduino', 'vs').name!;
export class ArduinoTheme {
static readonly arduino: Theme = {
type: 'light',
id: 'arduino-theme',
label: 'Arduino Light Theme',
description: 'Arduino Light Theme',
editorTheme: ARDUINO_JSON,
activate() {
ARDUINO_CSS.use();
},
deactivate() {
ARDUINO_CSS.unuse();
}
};
static readonly themes: Theme[] = [
ArduinoTheme.arduino
];
}

2
arduino-ide-extension/src/browser/boards/boards-config.tsx
View File

@ -207,7 +207,7 @@ export class BoardsConfig extends React.Component<BoardsConfig.Props, BoardsConf
return <React.Fragment>
<div className='search'>
<input type='search' placeholder='SEARCH BOARD' onChange={this.updateBoards} ref={this.focusNodeSet} />
<input type='search' className='theia-input' placeholder='SEARCH BOARD' onChange={this.updateBoards} ref={this.focusNodeSet} />
<i className='fa fa-search'></i>
</div>
<div className='boards list'>

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

@ -16,7 +16,7 @@ export class ArduinoSelect<T> extends Select<T> {
control: styles => ({
...styles,
minWidth: 120,
color: 'var(--theia-ui-font-color1)'
color: 'var(--theia-foreground)'
}),
dropdownIndicator: styles => ({
...styles,
@ -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-accent-color4)',
primary50: 'var(--theia-list-activeSelectionBackground)',
}
});
const DropdownIndicator = () => <span className='fa fa-caret-down caret' />;

3
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 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;
@ -68,6 +68,7 @@ export class ListItemRenderer<T extends ArduinoComponent> {
return <label>{availableVersions[0]}</label>
} else {
return <select
className='theia-select'
value={input.selectedVersion}
onChange={onSelectChange}>
{

2
arduino-ide-extension/src/browser/components/component-list/search-bar.tsx
View File

@ -10,7 +10,7 @@ export class SearchBar extends React.Component<SearchBar.Props> {
render(): React.ReactNode {
return <input
ref={this.setRef}
className={SearchBar.Styles.SEARCH_BAR_CLASS}
className={`theia-input ${SearchBar.Styles.SEARCH_BAR_CLASS}`}
type='text'
placeholder='Filter your search...'
size={1}

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

@ -1,91 +1,115 @@
{
"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"
},
"name": "Arduino"
}
"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",
"menu.selectionBackground": "#dae3e3",
"menu.selectionForeground": "#212121",
"editorGroupHeader.tabsBackground": "#f7f9f9",
"button.background": "#4db7bb",
"titleBar.activeBackground": "#006468",
"titleBar.activeForeground": "#ffffff",
"terminal.background": "#000000",
"terminal.foreground": "#e0e0e0",
"dropdown.border": "#ececec",
"dropdown.background": "#ececec",
"activityBar.background": "#ececec",
"activityBar.foreground": "#616161",
"statusBar.background": "#006468",
"secondaryButton.background": "#b5c8c9",
"secondaryButton.hoverBackground": "#dae3e3",
"arduino.branding.primary": "#00979d",
"arduino.branding.secondary": "#b5c8c9",
"arduino.foreground": "#edf1f1"
},
"type": "light",
"name": "Arduino"
}

2
arduino-ide-extension/src/browser/monitor/monitor-widget.tsx
View File

@ -209,7 +209,7 @@ export class SerialMonitorSendInput extends React.Component<SerialMonitorSendInp
return <input
ref={this.setRef}
type='text'
className={this.props.monitorConfig ? '' : 'warning'}
className={`theia-input ${this.props.monitorConfig ? '' : 'warning'}`}
placeholder={this.placeholder}
value={this.state.text}
onChange={this.onChange}

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

@ -1,10 +1,10 @@
.arduino-select__control {
border: var(--theia-layout-color2) var(--theia-border-width) solid !important;
background: var(--theia-layout-color2) !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-layout-color2) var(--theia-border-width) solid !important;
border: var(--theia-focusBorder) var(--theia-border-width) solid !important;
}
.arduino-select__control--is-focused {
@ -12,31 +12,37 @@
}
.arduino-select__option--is-selected {
background-color: var(--theia-accent-color3) !important;
color: var(--theia-content-font-color0) !important;
border-color: var(--theia-accent-color3) !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-accent-color4) !important;
border-color: var(--theia-accent-color3) !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-layout-color2) !important;
border: 1px solid var(--theia-accent-color3) !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;
}
.arduino-select__control.arduino-select__control--menu-is-open {
border: 1px solid !important;
border-color: var(--theia-accent-color3) !important;
border-bottom-color: var(--theia-layout-color2) !important; /* if the bottom border color has the same color as the background of the control, we make the border "invisible" */
border-color: var(--theia-focusBorder) !important;
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 {
color: var(--theia-ui-font-color1) !important;
color: var(--theia-descriptionForeground) !important;
}
.arduino-select__menu-list {

240
arduino-ide-extension/src/browser/style/arduino.useable.css
View File

@ -1,240 +0,0 @@
/*
The following CSS variables define the main public API for styling Theia.
These variables should be used by all extensions wherever possible. In other
words, extensions should not define custom colors, sizes, etc. unless
absolutely necessary. This enables users to adapt the visual theme of Theia
by changing these variables.
Many variables appear in ordered sequences (0,1,2,...). For most of these
sequences, colors go from dark to bright for dark themes, and from bright to
dark for bright themes. A few sequences are used to create contrast against
the others, e.g. font and accent colors, and thus their brightness goes the
other way around.
Throughout Theia, we are mostly following principles from Google's Material
Design when selecting colors. We are not, however, following all of MD as it
is not optimized for dense, information rich UIs.
*/
:root {
/* Custom Theme Colors */
--theia-arduino-light: rgb(0, 100, 104);
--theia-arduino-light1: rgb(23, 161, 165);
--theia-arduino-light2: rgb(218, 226, 228);
--theia-arduino-light3: rgb(237, 241, 242);
--theia-arduino-terminal: rgb(0, 0, 0);
/* Borders: Width and color (bright to dark) */
--theia-border-width: 1px;
--theia-panel-border-width: 2px;
--theia-border-color0: var(--md-grey-100);
--theia-border-color1: var(--md-grey-200);
--theia-border-color2: var(--md-grey-300);
--theia-border-color3: var(--md-grey-400);
/* UI fonts: Family, size and color (dark to bright)
---------------------------------------------------
The UI font CSS variables are used for the typography all of the Theia
user interface elements that are not directly user-generated content.
*/
--theia-ui-font-scale-factor: 1.2;
--theia-ui-font-size0: calc(var(--theia-ui-font-size1) / var(--theia-ui-font-scale-factor));
--theia-ui-font-size1: 13px; /* Base font size */
--theia-ui-font-size2: calc(var(--theia-ui-font-size1) * var(--theia-ui-font-scale-factor));
--theia-ui-font-size3: calc(var(--theia-ui-font-size2) * var(--theia-ui-font-scale-factor));
--theia-ui-icon-font-size: 14px; /* Ensures px perfect FontAwesome icons */
--theia-ui-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
--theia-ui-font-color0: var(--md-grey-900);
--theia-ui-font-color1: var(--md-grey-700);
--theia-ui-font-color2: var(--md-grey-500);
--theia-ui-font-color3: var(--md-grey-300);
/* Special font colors */
--theia-ui-icon-font-color: #ffffff;
--theia-ui-bar-font-color0: var(--theia-ui-font-color0);
--theia-ui-bar-font-color1: var(--theia-inverse-ui-font-color0); /* var(--theia-ui-font-color1); */
/* Use the inverse UI colors against the brand/accent/warn/error colors. */
--theia-inverse-ui-font-color0: rgba(255, 255, 255, 1.0);
--theia-inverse-ui-font-color2: rgba(255, 255, 255, 0.7);
--theia-inverse-ui-font-color3: rgba(255, 255, 255, 0.5);
/* Content fonts: Family, size and color (dark to bright)
Content font variables are used for typography of user-generated content.
*/
--theia-content-font-size: 13px;
--theia-content-line-height: 1.5;
--theia-content-font-color0: black;
--theia-content-font-color1: black;
--theia-content-font-color2: var(--md-grey-700);
--theia-content-font-color3: var(--md-grey-500);
--theia-code-font-size: 13px;
--theia-code-line-height: 17px;
--theia-code-padding: 5px;
--theia-code-font-family: Menlo, Monaco, Consolas, "Droid Sans Mono", "Courier New", monospace, "Droid Sans Fallback";
--theia-terminal-font-family: monospace;
--theia-ui-padding: 6px;
/* Tab Icon Colors */
--theia-tab-icon-color: var(--theia-ui-font-color1);
--theia-tab-font-color: #000;
/* Main layout colors (bright to dark)
------------------------------------ */
--theia-layout-color0: #ffffff;
--theia-layout-color1: #f7f9f9;
--theia-layout-color2: #ececec;
--theia-layout-color3: var(--theia-arduino-light2);
--theia-layout-color4: #dcdcdc;
/* Brand colors */
--theia-brand-color0: var(--theia-arduino-light);
--theia-brand-color1: var(--theia-arduino-light1);
--theia-brand-color2: var(--theia-arduino-light2);
--theia-brand-color3: var(--theia-arduino-light3);
/* Secondary Brand colors */
--theia-secondary-brand-color0: var(--md-grey-700);
--theia-secondary-brand-color1: #b5c8c9;
--theia-secondary-brand-color2: var(--theia-arduino-light2);
--theia-secondary-brand-color3: var(--theia-arduino-light3);
/* Accent colors (dark to bright): Use these to create contrast to layout colors. */
--theia-accent-color0: var(--theia-arduino-light);
--theia-accent-color1: rgb(77, 183, 187, 1.0);
--theia-accent-color2: rgb(77, 183, 187, 0.8);
--theia-accent-color3: rgb(77, 183, 187, 0.6);
--theia-accent-color4: rgba(77, 183, 187, 0.4);
/* Accent colors with opacity */
--theia-transparent-accent-color0: hsla(210, 63%, 46%, 0.3);
--theia-transparent-accent-color1: hsla(207, 66%, 56%, 0.3);
--theia-transparent-accent-color2: hsla(207, 64%, 85%, 0.3);
--theia-transparent-accent-color3: hsla(205, 70%, 91%, 0.3);
/* State colors (warn, error, success, info)
------------------------------------------ */
--theia-warn-color0: var(--md-amber-500);
--theia-warn-color1: var(--md-amber-400);
--theia-warn-color2: var(--md-amber-300);
--theia-warn-color3: var(--md-amber-200);
--theia-warn-font-color0: var(--md-grey-900);
--theia-error-color0: var(--md-red-400);
--theia-error-color1: #da5b4a;
--theia-error-color2: var(--md-red-200);
--theia-error-color3: var(--md-red-100);
--theia-error-font-color0: var(--md-grey-300);
--theia-success-color0: var(--md-green-500);
--theia-success-color1: var(--md-green-300);
--theia-success-color2: var(--md-green-100);
--theia-success-color3: var(--md-green-50);
--theia-success-font-color0: var(--md-grey-300);
--theia-info-color0: var(--md-cyan-700);
--theia-info-color1: var(--md-cyan-500);
--theia-info-color2: var(--md-cyan-300);
--theia-info-color3: var(--md-cyan-100);
--theia-info-font-color0: var(--md-grey-300);
--theia-disabled-color0: var(--md-grey-500);
--theia-disabled-color1: var(--md-grey-300);
--theia-disabled-color2: var(--md-grey-200);
--theia-disabled-color3: var(--md-grey-50);
--theia-added-color0: rgba(0, 255, 0, 0.8);
--theia-removed-color0: rgba(230, 0, 0, 0.8);
--theia-modified-color0: rgba(0, 100, 150, 0.8);
/* Background for selected text */
--theia-selected-text-background: var(--theia-accent-color3);
/* Colors to highlight words in widgets like tree or editors */
--theia-word-highlight-color0: rgba(168, 172, 148, 0.7);
--theia-word-highlight-color1: rgba(253, 255, 0, 0.2);
--theia-word-highlight-match-color0: rgba(234, 92, 0, 0.33);
--theia-word-highlight-match-color1: rgba(234, 92, 0, 0.5);
--theia-word-highlight-replace-color0: rgba(155, 185, 85, 0.2);
/* Scroll-bars */
--theia-scrollbar-width: 10px;
--theia-scrollbar-rail-width: 10px;
--theia-scrollbar-thumb-color: hsla(0, 0%, 61%, .4);
--theia-scrollbar-rail-color: transparent;
--theia-scrollbar-active-thumb-color: hsla(0, 0%, 39%, .4);
--theia-scrollbar-active-rail-color: transparent;
/* Menu */
--theia-menu-color0: var(--theia-arduino-light);
--theia-menu-color1: var(--theia-layout-color0);
--theia-menu-color2: #dae3e3;
/* Statusbar */
--theia-statusbar-color: var(--theia-arduino-light);
--theia-statusBar-font-color: var(--theia-inverse-ui-font-color0);
--theia-statusBar-font-size: 12px;
/* Buttons */
--theia-ui-button-color: var(--theia-accent-color1);
--theia-ui-button-color-hover: var(--theia-accent-color2);
--theia-ui-button-font-color: var(--theia-arduino-light);
--theia-ui-button-color-secondary: var(--theia-secondary-brand-color1);
--theia-ui-button-color-secondary-hover: var(--theia-menu-color2);
--theia-ui-button-font-color-secondary: var(--theia-inverse-ui-font-color0);
--theia-ui-button-color-disabled: var(--theia-accent-color3);
--theia-ui-button-font-color-disabled: var(--theia-ui-font-color2);
--theia-ui-button-color-secondary-disabled: var(--theia-disabled-color1);
--theia-ui-button-font-color-secondary-disabled: var(--theia-ui-font-color2);
/* Expand/collapse element */
--theia-ui-expand-button-color: var(--theia-accent-color4);
--theia-ui-expand-button-font-color: var(--theia-ui-font-color1);
/* Dialogs */
--theia-ui-dialog-header-color: var(--theia-arduino-light);
--theia-ui-dialog-header-font-color: var(--theia-inverse-ui-font-color0);
--theia-ui-dialog-color: rgb(236, 241, 241);
--theia-ui-dialog-font-color: black;
/* Variables */
--theia-variable-name-color: #9B46B0;
--theia-variable-value-color: rgba(108, 108, 108, 0.8);
--theia-number-variable-color: #09885A;
--theia-boolean-variable-color: #0000FF;
--theia-string-variable-color: #A31515;
/* ANSI color */
--theia-ansi-black-color: gray;
--theia-ansi-red-color: #BE1717;
--theia-ansi-green-color: #338A2F;
--theia-ansi-yellow-color: #BEB817;
--theia-ansi-blue-color: darkblue;
--theia-ansi-magenta-color: darkmagenta;
--theia-ansi-cyan-color: darkcyan;
--theia-ansi-white-color: #BDBDBD;
/* ANSI background color */
--theia-ansi-black-background-color: gray;
--theia-ansi-red-background-color: #BE1717;
--theia-ansi-green-background-color: #338A2F;
--theia-ansi-yellow-background-color: #BEB817;
--theia-ansi-blue-background-color: darkblue;
--theia-ansi-magenta-background-color: darkmagenta;
--theia-ansi-cyan-background-color: darkcyan;
--theia-ansi-white-background-color: #BDBDBD;
/* Output */
--theia-output-font-color: var(--theia-ui-font-color3);
}

43
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;
letter-spacing: .02em;
font-size: 1.2em;
color: #00979d;
color: var(--theia-arduino-branding-primary);
margin: 17px 0;
}
@ -24,18 +24,18 @@ div#select-board-dialog .selectBoardContainer .head .text {
}
div#select-board-dialog .selectBoardContainer .body .list .item.selected {
background: var(--theia-ui-button-color-secondary-hover);
background: var(--theia-secondaryButton-hoverBackground);
}
div#select-board-dialog .selectBoardContainer .body .list .item.selected i{
color: var(--theia-arduino-light);
div#select-board-dialog .selectBoardContainer .body .list .item.selected i {
color: var(--theia-arduino-branding-primary);
}
#select-board-dialog .selectBoardContainer .search,
#select-board-dialog .selectBoardContainer .search input,
#select-board-dialog .selectBoardContainer .list,
#select-board-dialog .selectBoardContainer .list {
background: var(--theia-layout-color0);
background: var(--theia-editor-background);
}
#select-board-dialog .selectBoardContainer .body .search input {
@ -47,7 +47,7 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i{
margin: 0;
vertical-align: top;
display: flex;
color: var(--theia-content-font-color0);
color: var(--theia-editor-foreground);
}
#select-board-dialog .selectBoardContainer .body .search input:focus {
@ -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: #7f8c8d;
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-disabled-color0);
opacity: var(--theia-mod-disabled-opacity);
width: 155px; /* used heuristics for the calculation */
white-space: pre;
overflow: hidden;
@ -107,11 +107,11 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i{
}
#select-board-dialog .selectBoardContainer .body .list .item.missing {
color: var(--theia-disabled-color0);
opacity: var(--theia-mod-disabled-opacity);
}
#select-board-dialog .selectBoardContainer .body .list .item:hover {
background: var(--theia-ui-button-color-secondary-hover);
background: var(--theia-secondaryButton-hoverBackground);
}
#select-board-dialog .selectBoardContainer .body .list {
@ -140,15 +140,12 @@ button.theia-button {
}
button.theia-button.secondary {
background-color: #b5c8c9;
color: #000;
box-shadow: 0 4px #95a5a6;
background-color: var(--theia-secondaryButton-background);
color: var(--theia-foreground);
}
button.theia-button.main {
color: #fff;
/* background-color: #00979c; */
box-shadow: 0 4px var(--theia-accent-color0);
color: var(--theia-button-foreground);
}
.dialogControl {
@ -192,15 +189,17 @@ button.theia-button.main {
}
.arduino-boards-toolbar-item {
background: var(--theia-layout-color1);
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-border-color2);
border: 3px solid var(--theia-activityBar-background);
margin: -3px;
z-index: 1;
}
@ -210,16 +209,16 @@ button.theia-button.main {
display: flex;
padding: 10px;
cursor: pointer;
color: var(--theia-ui-font-color1);
background: var(--theia-layout-color1);
color: var(--theia-foreground);
background: var(--theia-tab-unfocusedActiveBackground);
}
.arduino-boards-dropdown-item .fa-check {
color: var(--theia-accent-color1);
color: var(--theia-arduino-branding-primary);
align-self: center;
}
.arduino-boards-dropdown-item.selected,
.arduino-boards-dropdown-item:hover {
background: var(--theia-layout-color3);
background: var(--theia-list-hoverBackground);
}

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

@ -11,5 +11,5 @@
}
.p-MenuBar-item.p-mod-active {
color: var(--theia-ui-bar-font-color0);
color: var(--theia-menubar-selectionForeground);
}

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

@ -5,39 +5,31 @@
@import './monitor.css';
@import './arduino-select.css';
input:focus {
.theia-input.warning:focus {
outline-width: 1px;
outline-style: solid;
outline-offset: -1px;
opacity: 1 !important;
outline-color: var(--theia-accent-color3);
color: var(--theia-warningForeground);
background-color: var(--theia-warningBackground);
}
input.warning:focus {
outline-width: 1px;
outline-style: solid;
outline-offset: -1px;
opacity: 1 !important;
color: var(--theia-warn-font-color0);
background-color: var(--theia-warn-color0);
.theia-input.warning {
background-color: var(--theia-warningBackground);
}
input.warning {
background-color: var(--theia-warn-color0);
}
input.warning::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: var(--theia-warn-font-color0);
background-color: var(--theia-warn-color0);
.theia-input.warning::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: var(--theia-warningForeground);
background-color: var(--theia-warningBackground);
opacity: 1; /* Firefox */
}
input.warning:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: var(--theia-warn-font-color0);
background-color: var(--theia-warn-color0);
.theia-input.warning:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: var(--theia-warningForeground);
background-color: var(--theia-warningBackground);
}
input.warning::-ms-input-placeholder { /* Microsoft Edge */
color: var(--theia-warn-font-color0);
background-color: var(--theia-warn-color0);
.theia-input.warning::-ms-input-placeholder { /* Microsoft Edge */
color: var(--theia-warningForeground);
background-color: var(--theia-warningBackground);
}

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

@ -4,36 +4,15 @@
}
.arduino-list-widget {
color: var(--theia-ui-font-color1);
color: var(--theia-foreground);
}
.arduino-list-widget .search-bar {
margin: 0px 10px 10px 15px;
}
.arduino-list-widget .search-filters {
margin: 0px 10px 0px 15px;
border-color: var(--theia-border-color3);
}
.arduino-list-widget .search-bar:focus {
border-color: var(--theia-accent-color3);
}
.arduino-list-widget .filterable-list-container .search-filters .filter {
margin: 0px 0px 10px 0px;
display: flex;
}
.arduino-list-widget .filterable-list-container .search-filters .filter .title {
margin: 0px 10px 0px 0px;
align-self: center;
text-transform: uppercase;
font-size: var(--theia-ui-font-size0);
}
.arduino-list-widget .filterable-list-container .search-filters .filter > select {
width: 100%;
border-color: var(--theia-focusBorder);
}
.filterable-list-container {
@ -49,15 +28,18 @@
}
.filterable-list-container .items-container > div:nth-child(odd) {
background-color: var(--theia-layout-color0);
background-color: var(--theia-sideBar-background);
filter: contrast(105%);
}
.filterable-list-container .items-container > div:nth-child(even) {
background-color: var(--theia-layout-color1);
background-color: var(--theia-sideBar-background);
filter: contrast(95%);
}
.filterable-list-container .items-container > div:hover {
background-color: var(--theia-layout-color2);
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,18 +56,9 @@ https://github.com/arduino/arduino-pro-ide/issues/82 */
}
.component-list-item:hover {
background: var(--theia-accent-color4);
cursor: pointer;
}
.component-list-item:hover .meta-info {
color: var(--theia-ui-font-color1);
}
.component-list-item .meta-info {
color: var(--theia-ui-font-color3);
}
.component-list-item .header {
padding-bottom: 2px;
display: flex;
@ -104,33 +77,37 @@ https://github.com/arduino/arduino-pro-ide/issues/82 */
.component-list-item .header .author {
font-weight: bold;
color: var(--theia-ui-font-color2);
color: var(--theia-panelTitle-inactiveForeground);
}
.component-list-item:hover .header .author {
color: var(--theia-ui-font-color1);
color: var(--theia-foreground);
}
.component-list-item .header .version {
color: var(--theia-ui-font-color2);
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-accent-color1);
background-color: var(--theia-button-background);
padding: 2px 4px 2px 4px;
font-size: 10px;
font-weight: bold;
max-height: calc(1em + 4px);
color: var(--theia-inverse-ui-font-color0);
color: var(--theia-button-foreground);
content: 'INSTALLED';
}
.component-list-item .header .installed:hover:before {
background-color: var(--theia-inverse-ui-font-color0);
color: var(--theia-accent-color1);
background-color: var(--theia-button-foreground);
color: var(--theia-button-background);
content: 'UNINSTALL';
}
@ -161,14 +138,10 @@ https://github.com/arduino/arduino-pro-ide/issues/82 */
}
.component-list-item .info a {
color: var(--theia-brand-color1);
color: var(--theia-button-background);
text-decoration: none;
}
.component-list-item a:hover {
text-decoration: underline;
}
.component-list-item strong.installed {
color: rgb(0, 151, 157)
}

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

@ -1,9 +1,10 @@
.p-TabBar[data-orientation='horizontal'].theia-app-bottom {
background: var(--theia-layout-color1);
#theia-bottom-content-panel .p-TabBar[data-orientation='horizontal'].theia-app-bottom {
background: var(--theia-editorGroupHeader-tabsBackground);
}
.theia-output {
background: var(--theia-arduino-terminal);
background: var(--theia-terminal-background);
color: var(--theia-terminal-foreground);
}
#outputView {
@ -20,11 +21,11 @@
align-items: center;
height: 24px;
width: 24px;
background: var(--theia-ui-button-color);
background: var(--theia-button-background);
}
.p-TabBar-toolbar .item.arduino-tool-item > div:hover {
background: var(--theia-ui-button-color-hover);
background: var(--theia-button-hoverBackground);
}
.arduino-verify, .arduino-upload {
@ -34,7 +35,7 @@
.arduino-tool-icon {
height: 24px;
width: 24px;
background: var(--theia-ui-button-font-color);
background-color: var(--theia-titleBar-activeBackground);
-webkit-mask: url(../icons/mask-buttons.svg);
mask: url(../icons/mask-buttons.svg);
-webkit-mask-size: 800%;
@ -76,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;
@ -86,29 +95,11 @@
justify-content: flex-end;
}
.arduino-tool-item.item.connected-boards {
opacity: 1;
}
.arduino-tool-item.item.connected-boards select {
line-height: var(--theia-content-line-height);
font-size: var(--theia-ui-font-size1);
color: var(--theia-ui-font-color1);
-webkit-appearance: none;
-moz-appearance: none;
background-image: linear-gradient(45deg, transparent 50%, var(--theia-ui-font-color1) 50%), linear-gradient(135deg, var(--theia-ui-font-color1) 50%, transparent 50%);
background-position: calc(100% - 6px) 8px, calc(100% - 2px) 8px, 100% 0;
background-size: 4px 5px;
background-repeat: no-repeat;
padding-left: 3px;
padding-right: 15px;
}
.arduino-toolbar-tooltip {
margin-left: 10px;
display: flex;
align-items: center;
color: var(--theia-ui-font-color3);
color: var(--theia-titleBar-activeForeground);
}
.p-TabBar-toolbar .item > div.arduino-toggle-advanced-mode {
@ -126,11 +117,11 @@
display: flex;
justify-content: center;
align-items: center;
color: var(--theia-ui-button-font-color);
color: var(--theia-titleBar-activeBackground);;
}
.monaco-editor .margin {
border-right: 2px solid var(--theia-border-color1);
border-right: 2px solid var(--theia-sideBar-background);
box-sizing: border-box;
}
@ -142,4 +133,8 @@
.theia-sidepanel-toolbar .theia-sidepanel-title {
margin-left: 10px;
}
}
.p-Widget.dialogOverlay .dialogBlock {
background-color: var(--theia-arduino-foreground);
}

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

@ -14,7 +14,6 @@
.serial-monitor .head {
display: flex;
padding: 5px;
background: var(--theia-layout-color0);
height: 27px;
}
@ -30,7 +29,7 @@
}
.serial-monitor .head .send > input:focus {
border-color: var(--theia-accent-color3);
border-color: var(--theia-focusBorder);
}
.serial-monitor .head .config {
@ -55,7 +54,8 @@
}
.p-TabBar-toolbar .item.arduino-monitor.toggled {
background: var(--theia-secondary-brand-color1);
background: var(--theia-sideBarSectionHeader-background);
filter: contrast(80%);
}
.p-TabBar-toolbar .item .clear-all {

2
arduino-ide-extension/src/browser/tool-output/client-service-impl.ts
View File

@ -13,7 +13,7 @@ export class ToolOutputServiceClientImpl implements ToolOutputServiceClient {
protected readonly outputContribution: OutputContribution;
onNewOutput(tool: string, chunk: string): void {
this.outputContribution.openView({ activate: true }).then(() => {
this.outputContribution.openView({ reveal: true }).then(() => {
const channel = this.outputChannelManager.getChannel(`Arduino: ${tool}`);
channel.setVisibility(true);
channel.append(chunk);

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

8
electron/build/template-package.json
View File

@ -28,6 +28,14 @@
"// Notes:": [
"The resolution for `fs-extra` was required due to this: https://spectrum.chat/theia/general/our-theia-electron-builder-app-no-longer-starts~f5cf09a0-6d88-448b-8818-24ad0ec2ee7c"
],
"theia": {
"target": "electron",
"frontend": {
"config": {
"disallowReloadKeybinding": true
}
}
},
"build": {
"productName": "Arduino Pro IDE",
"appId": "arduino.ProIDE",

4
electron/packager/index.js
View File

@ -8,6 +8,7 @@
shell.env.THEIA_ELECTRON_SKIP_REPLACE_FFMPEG = '1'; // Do not run the ffmpeg validation for the packager.
shell.env.NODE_OPTIONS = '--max_old_space_size=4096'; // Increase heap size for the CI
const utils = require('./utils');
const merge = require('deepmerge');
const { version, release } = utils.versionInfo();
echo(`📦 Building ${release ? 'release ' : ''}version '${version}'...`);
@ -81,9 +82,12 @@
template.build.files = [...template.build.files, ...unusedDependencies.map(name => `!node_modules/${name}`)];
pkg.dependencies = { ...pkg.dependencies, ...template.dependencies };
pkg.devDependencies = { ...pkg.devDependencies, ...template.devDependencies };
// Deep-merging the Theia application configuration. We enable the electron window reload in dev mode but not for the final product. (arduino/arduino-pro-ide#187)
const theia = merge((pkg.theia || {}), (template.theia || {}));
fs.writeFileSync(path('..', 'build', 'package.json'), JSON.stringify({
...pkg,
...template,
theia,
dependencies: pkg.dependencies,
devDependencies: pkg.devDependencies
}, null, 2));

1
electron/packager/package.json
View File

@ -12,6 +12,7 @@
"author": "Arduino SA",
"license": "MIT",
"dependencies": {
"deepmerge": "4.2.2",
"depcheck": "^0.7.1",
"shelljs": "^0.8.3",
"yargs": "^12.0.5"

5
electron/packager/yarn.lock
View File

@ -200,6 +200,11 @@ decamelize@^1.2.0:
resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
deepmerge@4.2.2:
version "4.2.2"
resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
depcheck@^0.7.1:
version "0.7.1"
resolved "https://registry.yarnpkg.com/depcheck/-/depcheck-0.7.1.tgz#d4ef8511620fc5c783dafe27887cfdab533b1215"

2653
yarn.lock
View File

File diff suppressed because it is too large Load Diff