Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit cbe603a

Browse files
jbickerAkos Kitta
jbicker
authored and
Akos Kitta
committedJan 29, 2020
Updated Arduino App to new theming system
Signed-off-by: Jan Bicker <[email protected]>
1 parent b220ce4 commit cbe603a

18 files changed

+527
-616
lines changed
 

‎arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx

Lines changed: 188 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,8 @@ import { ScmContribution } from '@theia/scm/lib/browser/scm-contribution';
4242
import { SearchInWorkspaceFrontendContribution } from '@theia/search-in-workspace/lib/browser/search-in-workspace-frontend-contribution';
4343
import { FileNavigatorCommands } from '@theia/navigator/lib/browser/navigator-contribution';
4444
import { EditorMode } from './editor-mode';
45+
import { ColorContribution } from '@theia/core/lib/browser/color-application-contribution';
46+
import { ColorRegistry } from '@theia/core/lib/browser/color-registry';
4547

4648
export namespace ArduinoMenus {
4749
export const SKETCH = [...MAIN_MENU_BAR, '3_sketch'];
@@ -57,7 +59,7 @@ export namespace ArduinoToolbarContextMenu {
5759

5860
@injectable()
5961
export class ArduinoFrontendContribution implements FrontendApplicationContribution,
60-
TabBarToolbarContribution, CommandContribution, MenuContribution, KeybindingContribution {
62+
TabBarToolbarContribution, CommandContribution, MenuContribution, KeybindingContribution, ColorContribution {
6163

6264
@inject(MessageService)
6365
protected readonly messageService: MessageService;
@@ -577,4 +579,189 @@ export class ArduinoFrontendContribution implements FrontendApplicationContribut
577579
return undefined;
578580
}
579581

582+
registerColors(colors: ColorRegistry): void {
583+
colors.register(
584+
{
585+
id: 'arduino.base',
586+
defaults: {
587+
dark: '#616161',
588+
light: '#616161',
589+
hc: '#FFFFFF'
590+
},
591+
description: 'Base layout color.'
592+
},
593+
{
594+
id: 'arduino.toolbarTooltip',
595+
defaults: {
596+
dark: '#616161',
597+
light: '#616161',
598+
hc: '#FFFFFF'
599+
},
600+
description: 'The color of the toolbar tooltip (shown next to the buttons).'
601+
},
602+
{
603+
id: 'arduino.editorMargin',
604+
defaults: {
605+
dark: '#2e2e2e',
606+
light: '#EEEEEE',
607+
hc: 'contrastBorder'
608+
},
609+
description: 'The color of the border which separates line numbers from code area.'
610+
},
611+
{
612+
id: 'arduino.dialogTitle',
613+
defaults: {
614+
dark: 'foreground',
615+
light: 'foreground',
616+
hc: 'contrastBorder'
617+
},
618+
description: 'The color of a dialog title (e.g. in board selector dialog).'
619+
},
620+
{
621+
id: 'arduino.select',
622+
defaults: {
623+
624+
},
625+
description: 'Color of background and border of select component (in serial monitor).'
626+
},
627+
{
628+
id: 'arduino.selectItemHoverBackground',
629+
defaults: {
630+
light: '#d7eaf8',
631+
dark: '#24455e'
632+
},
633+
description: 'Color of background of hovered Item in select component (in serial monitor).'
634+
},
635+
{
636+
id: 'arduino.dialogSecondaryTitle',
637+
defaults: {
638+
dark: '#7f8c8d',
639+
light: '#7f8c8d'
640+
},
641+
description: 'Color of secondary titles in Arduino Dialogs.'
642+
},
643+
{
644+
id: 'arduino.secondaryButtonShadow',
645+
defaults: {
646+
dark: '#95a5a6',
647+
light: '#95a5a6'
648+
},
649+
description: 'Color of secondary button shadow.'
650+
},
651+
{
652+
id: 'arduino.buttonShadow',
653+
defaults: {
654+
dark: '#006468',
655+
light: '#006468'
656+
},
657+
description: 'Color of button shadow.'
658+
},
659+
{
660+
id: 'arduino.toolbarItemForeground',
661+
defaults: {
662+
dark: 'button.foreground',
663+
light: 'button.foreground'
664+
},
665+
description: 'Foreground color of toolbar items.'
666+
},
667+
{
668+
id: 'arduino.boardSelectorBackground',
669+
defaults: {
670+
dark: 'editorWidget.background',
671+
light: 'editorWidget.background',
672+
hc: 'editorWidget.background'
673+
},
674+
description: 'Background color of board selector toolbar item.'
675+
},
676+
{
677+
id: 'arduino.boardSelectorHoverBackground',
678+
defaults: {
679+
dark: '#383838',
680+
light: '#dae2e4'
681+
},
682+
description: 'Background color of board selector toolbar item.'
683+
},
684+
{
685+
id: 'arduino.boardSelectorBorder',
686+
defaults: {
687+
dark: '#757575',
688+
light: '#e0e0e0'
689+
},
690+
description: 'Border color of board selector toolbar item.'
691+
},
692+
{
693+
id: 'arduino.boardSelectorCheck',
694+
defaults: {
695+
dark: '#259fd8',
696+
light: '#2b75c0'
697+
},
698+
description: 'Color of board selector toolbar check item.'
699+
},
700+
{
701+
id: 'arduino.listOddItem',
702+
defaults: {
703+
dark: '#1d1d1d',
704+
light: '#ffffff'
705+
},
706+
description: 'Backgroundcolor of item with odd number in list widget'
707+
},
708+
{
709+
id: 'arduino.listEvenItem',
710+
defaults: {
711+
dark: '#252526',
712+
light: '#f7f9f9'
713+
},
714+
description: 'Backgroundcolor of item with even number in list widget'
715+
},
716+
{
717+
id: 'arduino.listItemHoverBackground',
718+
defaults: {
719+
dark: '#333333',
720+
light: '#ececec'
721+
},
722+
description: 'Backgroundcolor of hovered item in list widget'
723+
},
724+
{
725+
id: 'arduino.listItemSecondaryForeground',
726+
defaults: {
727+
dark: '#9e9e9e',
728+
light: '#9e9e9e'
729+
},
730+
description: 'Backgroundcolor of hovered item in list widget'
731+
},
732+
{
733+
id: 'arduino.listItemInstalledBadge',
734+
defaults: {
735+
dark: '#259fd8',
736+
light: '#2b75c0'
737+
},
738+
description: 'Color of badge for installed list items.'
739+
},
740+
{
741+
id: 'arduino.listItemInfoLinkForeground',
742+
defaults: {
743+
dark: '#2196f3',
744+
light: '#2196f3'
745+
},
746+
description: 'Color of info link in list items.'
747+
},
748+
{
749+
id: 'arduino.bottomPanelTabBackground',
750+
defaults: {
751+
dark: 'editorGroupHeader.tabsBackground',
752+
light: 'editorGroupHeader.tabsBackground'
753+
},
754+
description: 'Color of info link in list items.'
755+
},
756+
{
757+
id: 'arduino.toolbarToggleBackground',
758+
defaults: {
759+
dark: '#757575',
760+
light: '#9e9e9e'
761+
},
762+
description: 'Color of active toggles (as in serial monitor toolbar).'
763+
}
764+
);
765+
}
766+
580767
}

‎arduino-ide-extension/src/browser/arduino-frontend-module.ts

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,6 @@ import { ToolOutputServiceClientImpl } from './tool-output/client-service-impl';
2626
import { BoardsServiceClientImpl } from './boards/boards-service-client-impl';
2727
import { WorkspaceService } from '@theia/workspace/lib/browser/workspace-service';
2828
import { ArduinoWorkspaceService } from './arduino-workspace-service';
29-
import { ThemeService } from '@theia/core/lib/browser/theming';
30-
import { ArduinoTheme } from './arduino-theme';
3129
import { OutlineViewContribution } from '@theia/outline-view/lib/browser/outline-view-contribution';
3230
import { ArduinoOutlineViewContribution } from './customization/arduino-outline-contribution';
3331
import { ProblemContribution } from '@theia/markers/lib/browser/problem/problem-contribution';
@@ -71,9 +69,18 @@ import { ArduinoAboutDialog } from './customization/arduino-about-dialog';
7169
import { ArduinoShellLayoutRestorer } from './shell/arduino-shell-layout-restorer';
7270
import { EditorMode } from './editor-mode';
7371
import { ListItemRenderer } from './components/component-list/list-item-renderer';
72+
import { ColorContribution } from '@theia/core/lib/browser/color-application-contribution';
73+
import { MonacoThemingService } from '@theia/monaco/lib/browser/monaco-theming-service';
7474

7575
const ElementQueries = require('css-element-queries/src/ElementQueries');
7676

77+
MonacoThemingService.register({
78+
id: 'arduinoTheme',
79+
label: 'Arduino Light Theme',
80+
uiTheme: 'vs',
81+
json: require('../../src/browser/data/arduino.color-theme.json')
82+
});
83+
7784
export default new ContainerModule((bind: interfaces.Bind, unbind: interfaces.Unbind, isBound: interfaces.IsBound, rebind: interfaces.Rebind) => {
7885
ElementQueries.listen();
7986
ElementQueries.init();
@@ -85,6 +92,7 @@ export default new ContainerModule((bind: interfaces.Bind, unbind: interfaces.Un
8592
bind(TabBarToolbarContribution).toService(ArduinoFrontendContribution);
8693
bind(KeybindingContribution).toService(ArduinoFrontendContribution);
8794
bind(FrontendApplicationContribution).toService(ArduinoFrontendContribution);
95+
bind(ColorContribution).toService(ArduinoFrontendContribution);
8896

8997
bind(ArduinoToolbarContribution).toSelf().inSingletonScope();
9098
bind(FrontendApplicationContribution).toService(ArduinoToolbarContribution);
@@ -200,9 +208,6 @@ export default new ContainerModule((bind: interfaces.Bind, unbind: interfaces.Un
200208
bind(ArduinoWorkspaceService).toSelf().inSingletonScope();
201209
rebind(WorkspaceService).to(ArduinoWorkspaceService).inSingletonScope();
202210

203-
const themeService = ThemeService.get();
204-
themeService.register(...ArduinoTheme.themes);
205-
206211
// Customizing default Theia layout based on the editor mode: `pro-mode` or `classic`.
207212
bind(EditorMode).toSelf().inSingletonScope();
208213
bind(FrontendApplicationContribution).toService(EditorMode);

‎arduino-ide-extension/src/browser/arduino-theme.ts

Lines changed: 0 additions & 29 deletions
This file was deleted.

‎arduino-ide-extension/src/browser/boards/boards-config.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -207,7 +207,7 @@ export class BoardsConfig extends React.Component<BoardsConfig.Props, BoardsConf
207207

208208
return <React.Fragment>
209209
<div className='search'>
210-
<input type='search' placeholder='SEARCH BOARD' onChange={this.updateBoards} ref={this.focusNodeSet} />
210+
<input type='search' className='theia-input' placeholder='SEARCH BOARD' onChange={this.updateBoards} ref={this.focusNodeSet} />
211211
<i className='fa fa-search'></i>
212212
</div>
213213
<div className='boards list'>

‎arduino-ide-extension/src/browser/components/arduino-select.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export class ArduinoSelect<T> extends Select<T> {
1616
control: styles => ({
1717
...styles,
1818
minWidth: 120,
19-
color: 'var(--theia-ui-font-color1)'
19+
color: 'var(--theia-foreground)'
2020
}),
2121
dropdownIndicator: styles => ({
2222
...styles,
@@ -45,7 +45,7 @@ export class ArduinoSelect<T> extends Select<T> {
4545
// `primary50`??? it's crazy but apparently, without this, we would get a light-blueish
4646
// color when selecting an option in the select by clicking and then not releasing the button.
4747
// https://react-select.com/styles#overriding-the-theme
48-
primary50: 'var(--theia-accent-color4)',
48+
primary50: 'var(--theia-arduino-selectItemHoverBackground)',
4949
}
5050
});
5151
const DropdownIndicator = () => <span className='fa fa-caret-down caret' />;

‎arduino-ide-extension/src/browser/components/component-list/list-item-renderer.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ export class ListItemRenderer<T extends ArduinoComponent> {
6868
return <label>{availableVersions[0]}</label>
6969
} else {
7070
return <select
71+
className='theia-select'
7172
value={input.selectedVersion}
7273
onChange={onSelectChange}>
7374
{

‎arduino-ide-extension/src/browser/components/component-list/search-bar.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export class SearchBar extends React.Component<SearchBar.Props> {
1010
render(): React.ReactNode {
1111
return <input
1212
ref={this.setRef}
13-
className={SearchBar.Styles.SEARCH_BAR_CLASS}
13+
className={`theia-input ${SearchBar.Styles.SEARCH_BAR_CLASS}`}
1414
type='text'
1515
placeholder='Filter your search...'
1616
size={1}

‎arduino-ide-extension/src/browser/data/arduino.color-theme.json

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,42 @@
8585
"editor.foreground": "#434f54",
8686
"editorWhitespace.foreground": "#BFBFBF",
8787
"editor.lineHighlightBackground": "#434f5410",
88-
"editor.selectionBackground": "#ffcb00"
88+
"editor.selectionBackground": "#ffcb00",
89+
"focusBorder": "#4db7bb99",
90+
"menubar.selectionBackground": "#ffffff",
91+
"menubar.selectionForeground": "#212121",
92+
"menu.selectionBackground": "#dae3e3",
93+
"menu.selectionForeground": "#212121",
94+
"editorGroupHeader.tabsBackground": "#f7f9f9",
95+
"button.background": "#4db7bb",
96+
"titleBar.activeBackground": "#006468",
97+
"titleBar.activeForeground": "#ffffff",
98+
"secondaryButton.background": "#b5c8c9",
99+
"secondaryButton.hoverBackground": "#dae3e3",
100+
"terminal.background": "#000000",
101+
"terminal.foreground": "#e0e0e0",
102+
"dropdown.border": "#ececec",
103+
"dropdown.background": "#ececec",
104+
"warningForeground": "#434f54",
105+
"activityBar.background": "#ececec",
106+
"activityBar.foreground": "#616161",
107+
"statusBar.background": "#006468",
108+
"arduino.base": "#006468",
109+
"arduino.dialogTitle": "#00979d",
110+
"arduino.select": "#ececec",
111+
"arduino.selectItemHoverBackground": "#4db7bb66",
112+
"list.hoverBackground": "#ececec",
113+
"arduino.secondaryButtonShadow": "#95a5a6",
114+
"arduino.buttonShadow": "#006468",
115+
"arduino.boardSelectorCheck": "#4db7bb",
116+
"arduino.listItemInstalledBadge": "#4db7bb",
117+
"inputValidation.warningBackground": "#ffb300",
118+
"arduino.listItemInfoLinkForeground": "#17a1a5",
119+
"arduino.toolbarItemForeground": "#006468",
120+
"arduino.toolbarTooltip": "#e0e0e0",
121+
"arduino.bottomPanelTabBackground": "#ffffff",
122+
"arduino.toolbarToggleBackground": "#b5c8c9"
89123
},
124+
"type": "light",
90125
"name": "Arduino"
91126
}

‎arduino-ide-extension/src/browser/monitor/monitor-widget.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -209,7 +209,7 @@ export class SerialMonitorSendInput extends React.Component<SerialMonitorSendInp
209209
return <input
210210
ref={this.setRef}
211211
type='text'
212-
className={this.props.monitorConfig ? '' : 'warning'}
212+
className={`theia-input ${this.props.monitorConfig ? '' : 'warning'}`}
213213
placeholder={this.placeholder}
214214
value={this.state.text}
215215
onChange={this.onChange}

‎arduino-ide-extension/src/browser/style/arduino-select.css

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,42 @@
11
.arduino-select__control {
2-
border: var(--theia-layout-color2) var(--theia-border-width) solid !important;
3-
background: var(--theia-layout-color2) !important;
2+
border: var(--theia-arduino-select) var(--theia-border-width) solid !important;
3+
background: var(--theia-arduino-select) !important;
44
}
55

66
.arduino-select__control:hover {
7-
border: var(--theia-layout-color2) var(--theia-border-width) solid !important;
7+
border: var(--theia-arduino-select) var(--theia-border-width) solid !important;
88
}
99

1010
.arduino-select__control--is-focused {
1111
box-shadow: none !important;
1212
}
1313

1414
.arduino-select__option--is-selected {
15-
background-color: var(--theia-accent-color3) !important;
16-
color: var(--theia-content-font-color0) !important;
17-
border-color: var(--theia-accent-color3) !important;
15+
background-color: var(--theia-focusBorder) !important;
16+
color: var(--theia-editor-foreground) !important;
17+
border-color: var(--theia-focusBorder) !important;
1818
}
1919

2020
.arduino-select__option--is-focused {
21-
background-color: var(--theia-accent-color4) !important;
22-
border-color: var(--theia-accent-color3) !important;
21+
background-color: var(--theia-arduino-selectItemHoverBackground) !important;
22+
border-color: var(--theia-focusBorder) !important;
2323
}
2424

2525
.arduino-select__menu {
26-
background-color: var(--theia-layout-color2) !important;
27-
border: 1px solid var(--theia-accent-color3) !important;
26+
background-color: var(--theia-arduino-select) !important;
27+
border: 1px solid var(--theia-focusBorder) !important;
2828
top: auto !important; /* to align the top of the menu with the bottom of the control */
2929
box-shadow: none !important;
3030
}
3131

3232
.arduino-select__control.arduino-select__control--menu-is-open {
3333
border: 1px solid !important;
34-
border-color: var(--theia-accent-color3) !important;
35-
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" */
34+
border-color: var(--theia-focusBorder) !important;
35+
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" */
3636
}
3737

3838
.arduino-select__value-container .arduino-select__single-value {
39-
color: var(--theia-ui-font-color1) !important;
39+
color: var(--theia-descriptionForeground) !important;
4040
}
4141

4242
.arduino-select__menu-list {

‎arduino-ide-extension/src/browser/style/arduino.useable.css

Lines changed: 0 additions & 240 deletions
This file was deleted.

‎arduino-ide-extension/src/browser/style/board-select-dialog.css

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ div.dialogContent.select-board-dialog > div.head .title {
1515
font-weight: 400;
1616
letter-spacing: .02em;
1717
font-size: 1.2em;
18-
color: #00979d;
18+
color: var(--theia-arduino-dialogTitle);
1919
margin: 17px 0;
2020
}
2121

@@ -24,18 +24,18 @@ div#select-board-dialog .selectBoardContainer .head .text {
2424
}
2525

2626
div#select-board-dialog .selectBoardContainer .body .list .item.selected {
27-
background: var(--theia-ui-button-color-secondary-hover);
27+
background: var(--theia-secondaryButton-hoverBackground);
2828
}
2929

3030
div#select-board-dialog .selectBoardContainer .body .list .item.selected i{
31-
color: var(--theia-arduino-light);
31+
color: var(--theia-arduino-base);
3232
}
3333

3434
#select-board-dialog .selectBoardContainer .search,
3535
#select-board-dialog .selectBoardContainer .search input,
3636
#select-board-dialog .selectBoardContainer .list,
3737
#select-board-dialog .selectBoardContainer .list {
38-
background: var(--theia-layout-color0);
38+
background: var(--theia-editor-background);
3939
}
4040

4141
#select-board-dialog .selectBoardContainer .body .search input {
@@ -47,7 +47,7 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i{
4747
margin: 0;
4848
vertical-align: top;
4949
display: flex;
50-
color: var(--theia-content-font-color0);
50+
color: var(--theia-editor-foreground);
5151
}
5252

5353
#select-board-dialog .selectBoardContainer .body .search input:focus {
@@ -79,7 +79,7 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i{
7979

8080
#select-board-dialog .selectBoardContainer .body .container .content .loading {
8181
font-size: var(--theia-ui-font-size1);
82-
color: #7f8c8d;
82+
color: var(--theia-arduino-dialogSecondaryTitle);
8383
padding: 10px 5px 10px 10px;
8484
text-transform: uppercase;
8585
/* The max, min-height comes from `.body .list` 265px + 47px top padding - 2 * 10px top padding */
@@ -99,19 +99,19 @@ div#select-board-dialog .selectBoardContainer .body .list .item.selected i{
9999

100100
#select-board-dialog .selectBoardContainer .body .list .item .detail {
101101
font-size: var(--theia-ui-font-size1);
102-
color: var(--theia-disabled-color0);
102+
color: var(--theia-mod-disabled-opacity);
103103
width: 155px; /* used heuristics for the calculation */
104104
white-space: pre;
105105
overflow: hidden;
106106
text-overflow: ellipsis;
107107
}
108108

109109
#select-board-dialog .selectBoardContainer .body .list .item.missing {
110-
color: var(--theia-disabled-color0);
110+
color: var(--theia-mod-disabled-opacity);
111111
}
112112

113113
#select-board-dialog .selectBoardContainer .body .list .item:hover {
114-
background: var(--theia-ui-button-color-secondary-hover);
114+
background: var(--theia-secondaryButton-hoverBackground);
115115
}
116116

117117
#select-board-dialog .selectBoardContainer .body .list {
@@ -140,15 +140,14 @@ button.theia-button {
140140
}
141141

142142
button.theia-button.secondary {
143-
background-color: #b5c8c9;
144-
color: #000;
145-
box-shadow: 0 4px #95a5a6;
143+
background-color: var(--theia-secondaryButton-background);
144+
color: var(--theia-foreground);
145+
box-shadow: 0 4px var(--theia-arduino-secondaryButtonShadow);
146146
}
147147

148148
button.theia-button.main {
149-
color: #fff;
150-
/* background-color: #00979c; */
151-
box-shadow: 0 4px var(--theia-accent-color0);
149+
color: var(--theia-button-foreground);
150+
box-shadow: 0 4px var(--theia-arduino-buttonShadow);
152151
}
153152

154153
.dialogControl {
@@ -192,15 +191,16 @@ button.theia-button.main {
192191
}
193192

194193
.arduino-boards-toolbar-item {
195-
background: var(--theia-layout-color1);
194+
background: var(--theia-arduino-boardSelectorBackground);
195+
color: var(--theia-foreground);
196196
height: 22px;
197197
display: flex;
198198
width: 100%;
199199
overflow: hidden;
200200
}
201201

202202
.arduino-boards-dropdown-list {
203-
border: 3px solid var(--theia-border-color2);
203+
border: 3px solid var(--theia-arduino-boardSelectorBorder);
204204
margin: -3px;
205205
z-index: 1;
206206
}
@@ -210,16 +210,16 @@ button.theia-button.main {
210210
display: flex;
211211
padding: 10px;
212212
cursor: pointer;
213-
color: var(--theia-ui-font-color1);
214-
background: var(--theia-layout-color1);
213+
color: var(--theia-foreground);
214+
background: var(--theia-arduino-boardSelectorBackground);
215215
}
216216

217217
.arduino-boards-dropdown-item .fa-check {
218-
color: var(--theia-accent-color1);
218+
color: var(--theia-arduino-boardSelectorCheck);
219219
align-self: center;
220220
}
221221

222222
.arduino-boards-dropdown-item.selected,
223223
.arduino-boards-dropdown-item:hover {
224-
background: var(--theia-layout-color3);
224+
background: var(--theia-arduino-boardSelectorHoverBackground);
225225
}

‎arduino-ide-extension/src/browser/style/browser-menu.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,5 @@
1111
}
1212

1313
.p-MenuBar-item.p-mod-active {
14-
color: var(--theia-ui-bar-font-color0);
14+
color: var(--theia-menubar-selectionForeground);
1515
}

‎arduino-ide-extension/src/browser/style/index.css

Lines changed: 14 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -5,39 +5,31 @@
55
@import './monitor.css';
66
@import './arduino-select.css';
77

8-
input:focus {
8+
.theia-input.warning:focus {
99
outline-width: 1px;
1010
outline-style: solid;
1111
outline-offset: -1px;
1212
opacity: 1 !important;
13-
outline-color: var(--theia-accent-color3);
13+
color: var(--theia-foreground);
14+
background-color: var(--theia-inputValidation-warningBackground);
1415
}
1516

16-
input.warning:focus {
17-
outline-width: 1px;
18-
outline-style: solid;
19-
outline-offset: -1px;
20-
opacity: 1 !important;
21-
color: var(--theia-warn-font-color0);
22-
background-color: var(--theia-warn-color0);
23-
}
24-
25-
input.warning {
26-
background-color: var(--theia-warn-color0);
17+
.theia-input.warning {
18+
background-color: var(--theia-inputValidation-warningBackground);
2719
}
2820

29-
input.warning::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
30-
color: var(--theia-warn-font-color0);
31-
background-color: var(--theia-warn-color0);
21+
.theia-input.warning::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
22+
color: var(--theia-foreground);
23+
background-color: var(--theia-inputValidation-warningBackground);
3224
opacity: 1; /* Firefox */
3325
}
3426

35-
input.warning:-ms-input-placeholder { /* Internet Explorer 10-11 */
36-
color: var(--theia-warn-font-color0);
37-
background-color: var(--theia-warn-color0);
27+
.theia-input.warning:-ms-input-placeholder { /* Internet Explorer 10-11 */
28+
color: var(--theia-foreground);
29+
background-color: var(--theia-inputValidation-warningBackground);
3830
}
3931

40-
input.warning::-ms-input-placeholder { /* Microsoft Edge */
41-
color: var(--theia-warn-font-color0);
42-
background-color: var(--theia-warn-color0);
32+
.theia-input.warning::-ms-input-placeholder { /* Microsoft Edge */
33+
color: var(--theia-foreground);
34+
background-color: var(--theia-inputValidation-warningBackground);
4335
}

‎arduino-ide-extension/src/browser/style/list-widget.css

Lines changed: 13 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -4,36 +4,15 @@
44
}
55

66
.arduino-list-widget {
7-
color: var(--theia-ui-font-color1);
7+
color: var(--theia-foreground);
88
}
99

1010
.arduino-list-widget .search-bar {
1111
margin: 0px 10px 10px 15px;
1212
}
1313

14-
.arduino-list-widget .search-filters {
15-
margin: 0px 10px 0px 15px;
16-
border-color: var(--theia-border-color3);
17-
}
18-
1914
.arduino-list-widget .search-bar:focus {
20-
border-color: var(--theia-accent-color3);
21-
}
22-
23-
.arduino-list-widget .filterable-list-container .search-filters .filter {
24-
margin: 0px 0px 10px 0px;
25-
display: flex;
26-
}
27-
28-
.arduino-list-widget .filterable-list-container .search-filters .filter .title {
29-
margin: 0px 10px 0px 0px;
30-
align-self: center;
31-
text-transform: uppercase;
32-
font-size: var(--theia-ui-font-size0);
33-
}
34-
35-
.arduino-list-widget .filterable-list-container .search-filters .filter > select {
36-
width: 100%;
15+
border-color: var(--theia-focusBorder);
3716
}
3817

3918
.filterable-list-container {
@@ -49,15 +28,15 @@
4928
}
5029

5130
.filterable-list-container .items-container > div:nth-child(odd) {
52-
background-color: var(--theia-layout-color0);
31+
background-color: var(--theia-arduino-listOddItem);
5332
}
5433

5534
.filterable-list-container .items-container > div:nth-child(even) {
56-
background-color: var(--theia-layout-color1);
35+
background-color: var(--theia-arduino-listEvenItem);
5736
}
5837

5938
.filterable-list-container .items-container > div:hover {
60-
background-color: var(--theia-layout-color2);
39+
background-color: var(--theia-arduino-listItemHoverBackground);
6140
}
6241

6342
/* Perfect scrollbar does not like if we explicitly set the `background-color` of the contained elements.
@@ -74,18 +53,9 @@ https://github.com/arduino/arduino-pro-ide/issues/82 */
7453
}
7554

7655
.component-list-item:hover {
77-
background: var(--theia-accent-color4);
7856
cursor: pointer;
7957
}
8058

81-
.component-list-item:hover .meta-info {
82-
color: var(--theia-ui-font-color1);
83-
}
84-
85-
.component-list-item .meta-info {
86-
color: var(--theia-ui-font-color3);
87-
}
88-
8959
.component-list-item .header {
9060
padding-bottom: 2px;
9161
display: flex;
@@ -104,33 +74,33 @@ https://github.com/arduino/arduino-pro-ide/issues/82 */
10474

10575
.component-list-item .header .author {
10676
font-weight: bold;
107-
color: var(--theia-ui-font-color2);
77+
color: var(--theia-arduino-listItemSecondaryForeground);
10878
}
10979

11080
.component-list-item:hover .header .author {
111-
color: var(--theia-ui-font-color1);
81+
color: var(--theia-foreground);
11282
}
11383

11484
.component-list-item .header .version {
115-
color: var(--theia-ui-font-color2);
85+
color: var(--theia-arduino-listItemSecondaryForeground);
11686
}
11787

11888
.component-list-item .header .installed:before {
11989
margin-left: 4px;
12090
display: inline-block;
12191
justify-self: end;
122-
background-color: var(--theia-accent-color1);
92+
background-color: var(--theia-arduino-listItemInstalledBadge);
12393
padding: 2px 4px 2px 4px;
12494
font-size: 10px;
12595
font-weight: bold;
12696
max-height: calc(1em + 4px);
127-
color: var(--theia-inverse-ui-font-color0);
97+
color: var(--theia-button-foreground);
12898
content: 'INSTALLED';
12999
}
130100

131101
.component-list-item .header .installed:hover:before {
132-
background-color: var(--theia-inverse-ui-font-color0);
133-
color: var(--theia-accent-color1);
102+
background-color: var(--theia-button-foreground);
103+
color: var(--theia-arduino-listItemInstalledBadge);
134104
content: 'UNINSTALL';
135105
}
136106

@@ -161,14 +131,10 @@ https://github.com/arduino/arduino-pro-ide/issues/82 */
161131
}
162132

163133
.component-list-item .info a {
164-
color: var(--theia-brand-color1);
134+
color: var(--theia-arduino-listItemInfoLinkForeground);
165135
text-decoration: none;
166136
}
167137

168138
.component-list-item a:hover {
169139
text-decoration: underline;
170140
}
171-
172-
.component-list-item strong.installed {
173-
color: rgb(0, 151, 157)
174-
}

‎arduino-ide-extension/src/browser/style/main.css

Lines changed: 15 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
1-
.p-TabBar[data-orientation='horizontal'].theia-app-bottom {
2-
background: var(--theia-layout-color1);
1+
#theia-bottom-content-panel .p-TabBar[data-orientation='horizontal'].theia-app-bottom {
2+
background: var(--theia-editorGroupHeader-tabsBackground);
3+
}
4+
5+
#theia-bottom-content-panel .p-TabBar-tab {
6+
background: var(--theia-arduino-bottomPanelTabBackground);
37
}
48

59
.theia-output {
6-
background: var(--theia-arduino-terminal);
10+
background: var(--theia-terminal-background);
11+
color: var(--theia-terminal-foreground);
712
}
813

914
#outputView {
@@ -20,11 +25,11 @@
2025
align-items: center;
2126
height: 24px;
2227
width: 24px;
23-
background: var(--theia-ui-button-color);
28+
background: var(--theia-button-background);
2429
}
2530

2631
.p-TabBar-toolbar .item.arduino-tool-item > div:hover {
27-
background: var(--theia-ui-button-color-hover);
32+
background: var(--theia-button-hoverBackground);
2833
}
2934

3035
.arduino-verify, .arduino-upload {
@@ -34,7 +39,8 @@
3439
.arduino-tool-icon {
3540
height: 24px;
3641
width: 24px;
37-
background: var(--theia-ui-button-font-color);
42+
color: var(--theia-arduino-toolbarItemForeground);
43+
background: var(--theia-arduino-toolbarItemForeground);
3844
-webkit-mask: url(../icons/mask-buttons.svg);
3945
mask: url(../icons/mask-buttons.svg);
4046
-webkit-mask-size: 800%;
@@ -86,29 +92,11 @@
8692
justify-content: flex-end;
8793
}
8894

89-
.arduino-tool-item.item.connected-boards {
90-
opacity: 1;
91-
}
92-
93-
.arduino-tool-item.item.connected-boards select {
94-
line-height: var(--theia-content-line-height);
95-
font-size: var(--theia-ui-font-size1);
96-
color: var(--theia-ui-font-color1);
97-
-webkit-appearance: none;
98-
-moz-appearance: none;
99-
background-image: linear-gradient(45deg, transparent 50%, var(--theia-ui-font-color1) 50%), linear-gradient(135deg, var(--theia-ui-font-color1) 50%, transparent 50%);
100-
background-position: calc(100% - 6px) 8px, calc(100% - 2px) 8px, 100% 0;
101-
background-size: 4px 5px;
102-
background-repeat: no-repeat;
103-
padding-left: 3px;
104-
padding-right: 15px;
105-
}
106-
10795
.arduino-toolbar-tooltip {
10896
margin-left: 10px;
10997
display: flex;
11098
align-items: center;
111-
color: var(--theia-ui-font-color3);
99+
color: var(--theia-arduino-toolbarTooltip);
112100
}
113101

114102
.p-TabBar-toolbar .item > div.arduino-toggle-advanced-mode {
@@ -126,11 +114,11 @@
126114
display: flex;
127115
justify-content: center;
128116
align-items: center;
129-
color: var(--theia-ui-button-font-color);
117+
color: var(--theia-arduino-toolbarItemForeground);
130118
}
131119

132120
.monaco-editor .margin {
133-
border-right: 2px solid var(--theia-border-color1);
121+
border-right: 2px solid var(--theia-arduino-editorMargin);
134122
box-sizing: border-box;
135123
}
136124

‎arduino-ide-extension/src/browser/style/monitor.css

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@
1414
.serial-monitor .head {
1515
display: flex;
1616
padding: 5px;
17-
background: var(--theia-layout-color0);
1817
height: 27px;
1918
}
2019

@@ -30,7 +29,7 @@
3029
}
3130

3231
.serial-monitor .head .send > input:focus {
33-
border-color: var(--theia-accent-color3);
32+
border-color: var(--theia-focusBorder);
3433
}
3534

3635
.serial-monitor .head .config {
@@ -55,7 +54,7 @@
5554
}
5655

5756
.p-TabBar-toolbar .item.arduino-monitor.toggled {
58-
background: var(--theia-secondary-brand-color1);
57+
background: var(--theia-arduino-toolbarToggleBackground);
5958
}
6059

6160
.p-TabBar-toolbar .item .clear-all {

‎yarn.lock

Lines changed: 208 additions & 201 deletions
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)
Please sign in to comment.