diff --git a/arduino-ide-extension/src/browser/icons/mask-buttons.svg b/arduino-ide-extension/src/browser/icons/mask-buttons.svg new file mode 100644 index 00000000..8a28a2ef --- /dev/null +++ b/arduino-ide-extension/src/browser/icons/mask-buttons.svg @@ -0,0 +1,70 @@ + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/arduino-ide-extension/src/browser/style/arduino.useable.css b/arduino-ide-extension/src/browser/style/arduino.useable.css index 492eba48..63485e8f 100644 --- a/arduino-ide-extension/src/browser/style/arduino.useable.css +++ b/arduino-ide-extension/src/browser/style/arduino.useable.css @@ -18,47 +18,57 @@ is not optimized for dense, information rich UIs. :root { /* Custom Theme Colors */ - --theia-arduino-light: rgb(0, 102, 102); - --theia-arduino-light1: rgb(0, 153, 153); + --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-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-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; @@ -71,75 +81,101 @@ is not optimized for dense, information rich UIs. --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-light); + --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: rgb(0, 102, 105); - --theia-accent-color1: rgb(0, 164, 167, 1.0); - --theia-accent-color2: rgb(0, 164, 167, 0.8); - --theia-accent-color3: rgb(0, 164, 167, 0.6); - --theia-accent-color4: rgb(0, 164, 167, 0.4); + + --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); @@ -147,7 +183,7 @@ is not optimized for dense, information rich UIs. --theia-scrollbar-active-thumb-color: hsla(0, 0%, 39%, .4); --theia-scrollbar-active-rail-color: transparent; /* Menu */ - --theia-menu-color0: var(--theia-layout-color3); + --theia-menu-color0: var(--theia-arduino-light); --theia-menu-color1: var(--theia-layout-color0); --theia-menu-color2: #dae3e3; /* Statusbar */ @@ -155,9 +191,9 @@ is not optimized for dense, information rich UIs. --theia-statusBar-font-color: var(--theia-inverse-ui-font-color0); --theia-statusBar-font-size: 12px; /* Buttons */ - --theia-ui-button-color: var(--theia-arduino-light); - --theia-ui-button-color-hover: var(--theia-arduino-light1); - --theia-ui-button-font-color: var(--theia-inverse-ui-font-color0); + --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); @@ -197,4 +233,8 @@ is not optimized for dense, information rich UIs. --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); + } \ No newline at end of file diff --git a/arduino-ide-extension/src/browser/style/board-select-dialog.css b/arduino-ide-extension/src/browser/style/board-select-dialog.css index d9f49155..4ef4162c 100644 --- a/arduino-ide-extension/src/browser/style/board-select-dialog.css +++ b/arduino-ide-extension/src/browser/style/board-select-dialog.css @@ -140,8 +140,8 @@ button.theia-button.secondary { button.theia-button.main { color: #fff; - background-color: #00979c; - box-shadow: 0 4px #005c5f; + /* background-color: #00979c; */ + box-shadow: 0 4px var(--theia-accent-color0); } .dialogControl { @@ -185,7 +185,7 @@ button.theia-button.main { } .arduino-boards-toolbar-item { - background: white; + background: var(--theia-layout-color1); height: 22px; display: flex; width: 100%; @@ -193,7 +193,7 @@ button.theia-button.main { } .arduino-boards-dropdown-list { - background: #f7f7f7; + background: var(--theia-layout-color1); border: 3px solid var(--theia-border-color2); margin: -3px; z-index: 1000; @@ -204,13 +204,14 @@ button.theia-button.main { display: flex; padding: 10px; cursor: pointer; + color: var(--theia-ui-font-color1); } .arduino-boards-dropdown-item .fa-check { - color: var(--theia-accent-color2); + color: var(--theia-accent-color1); } .arduino-boards-dropdown-item.selected, .arduino-boards-dropdown-item:hover { - background: var(--theia-ui-button-color-secondary-hover); + background: var(--theia-layout-color3); } diff --git a/arduino-ide-extension/src/browser/style/list-widget.css b/arduino-ide-extension/src/browser/style/list-widget.css index c2abbf80..69409a90 100644 --- a/arduino-ide-extension/src/browser/style/list-widget.css +++ b/arduino-ide-extension/src/browser/style/list-widget.css @@ -50,15 +50,15 @@ } .filterable-list-container .items-container > div:nth-child(odd) { - background-color: var(--theia-secondary-brand-color2); + background-color: var(--theia-layout-color0); } .filterable-list-container .items-container > div:nth-child(even) { - background-color: var(--theia-secondary-brand-color3); + background-color: var(--theia-layout-color1); } .filterable-list-container .items-container > div:hover { - background-color: var(--theia-layout-color1); + background-color: var(--theia-layout-color2); } .component-list-item { @@ -111,7 +111,7 @@ .component-list-item .header .installed { margin-left: 4px; justify-self: end; - background-color: var(--theia-accent-color2); + background-color: var(--theia-accent-color1); padding: 2px 4px 2px 4px; font-size: 10px; font-weight: bold; diff --git a/arduino-ide-extension/src/browser/style/main.css b/arduino-ide-extension/src/browser/style/main.css index 5cbb676f..00628233 100644 --- a/arduino-ide-extension/src/browser/style/main.css +++ b/arduino-ide-extension/src/browser/style/main.css @@ -7,66 +7,65 @@ } #outputView { - color: var(--theia-ui-font-color3); cursor: text; } -#toggle-serial-monitor.arduino-tool-icon:hover, -#arduino-verify.arduino-tool-icon:hover, -#arduino-save-file.arduino-tool-icon:hover, -#arduino-show-open-context-menu.arduino-tool-icon:hover, -#arduino-upload.arduino-tool-icon:hover { - background-position-y: 60px; -} - -#toggle-serial-monitor.arduino-tool-icon, -#arduino-verify.arduino-tool-icon, -#arduino-save-file.arduino-tool-icon, -#arduino-show-open-context-menu.arduino-tool-icon, -#arduino-upload.arduino-tool-icon { - height: 24px; - width: 24px; -} - -#arduino-save-file { - background: url(../icons/buttons.svg); - background-size: 800%; - background-position-y: 28px; - background-position-x: 59px; -} - -#arduino-verify { - background: url(../icons/buttons.svg); - background-size: 800%; - background-position-y: 28px; - background-position-x: 188px; -} - -#arduino-upload { - background: url(../icons/buttons.svg); - background-size: 800%; - background-position-y: 28px; - background-position-x: 156px; -} - -#arduino-show-open-context-menu { - background: url(../icons/buttons.svg); - background-size: 800%; - background-position-y: 28px; - background-position-x: 92px; -} - -#toggle-serial-monitor { - background: url(../icons/buttons.svg); - background-size: 800%; - background-position-y: 28px; - background-position-x: 28px; -} - .p-TabBar-toolbar .item.arduino-tool-item { margin-left: 3px; } +.p-TabBar-toolbar .item.arduino-tool-item > div { + display: flex; + justify-content: center; + align-items: center; + height: 24px; + width: 24px; + background: var(--theia-ui-button-color); +} + +.p-TabBar-toolbar .item.arduino-tool-item > div:hover { + background: var(--theia-ui-button-color-hover); +} + +.arduino-verify, .arduino-upload { + border-radius: 12px; +} + +.arduino-tool-icon { + height: 24px; + width: 24px; + background: var(--theia-ui-button-font-color); + -webkit-mask: url(../icons/mask-buttons.svg); + mask: url(../icons/mask-buttons.svg); + -webkit-mask-size: 800%; + mask-size: 800%; +} + +.arduino-save-file-icon { + -webkit-mask-position: 59px -4px; + mask-position: 59px -4px; +} + +.arduino-verify-icon { + -webkit-mask-position: 188px -4px; + mask-position: 188px -4px; +} + +.arduino-upload-icon { + -webkit-mask-position: 156px -4px; + mask-position: 156px -4px; +} + +.arduino-show-open-context-menu-icon { + -webkit-mask-position: 92px -4px; + mask-position: 92px -4px; +} + +.toggle-serial-monitor-icon { + -webkit-mask-position: 28px -4px; + mask-position: 28px -4px; +} + #arduino-toolbar-container { display: flex; width: 100%; @@ -112,13 +111,22 @@ color: var(--theia-ui-font-color3); } -.p-TabBar-toolbar .item > div#arduino-toggle-advanced-mode { +.p-TabBar-toolbar .item > div.arduino-toggle-advanced-mode { display: flex; width: 24px; height: 24px; justify-content: center; align-items: center; - color: var(--theia-ui-font-color3); +} + +.arduino-toggle-advanced-mode-icon { + mask: none; + -webkit-mask: none; + background: none; + display: flex; + justify-content: center; + align-items: center; + color: var(--theia-ui-button-font-color); } .monaco-editor .margin { diff --git a/arduino-ide-extension/src/browser/style/serial-monitor.css b/arduino-ide-extension/src/browser/style/serial-monitor.css index 69521181..d7e14b4f 100644 --- a/arduino-ide-extension/src/browser/style/serial-monitor.css +++ b/arduino-ide-extension/src/browser/style/serial-monitor.css @@ -14,7 +14,7 @@ .serial-monitor-container .head { display: flex; padding: 5px; - background: var(--theia-brand-color2); + background: var(--theia-layout-color0); height: 27px; } @@ -27,17 +27,22 @@ display: flex; padding: 0 5px; align-items: center; - background: var(--theia-brand-color3); - color: var(--theia-ui-dialog-font-color); + color: var(--theia-ui-font-color1); + opacity: 0.7; +} +.serial-monitor-container .head .send .btn:hover { + opacity: 1; + cursor: pointer; } .serial-monitor-container .head .send form { flex: 1; display: flex; + background: var(--theia-layout-color2); } .serial-monitor-container .head .send input#serial-monitor-send { - background: var(--theia-layout-color0); + color: var(--theia-ui-font-color1); flex: 1; } @@ -67,7 +72,7 @@ } .p-TabBar-toolbar .item.arduino-monitor.toggled { - background: var(--theia-brand-color2); + background: var(--theia-secondary-brand-color0); } .p-TabBar-toolbar .item .clear-all { @@ -77,6 +82,7 @@ /* React Select Styles */ .serial-monitor-select .sms__control { border: var(--theia-border-color1) var(--theia-border-width) solid; + background: var(--theia-layout-color2); } .serial-monitor-select .sms__control--is-focused { @@ -110,6 +116,10 @@ border-bottom: none; } +.serial-monitor-select .sms__value-container .sms__single-value { + color: var(--theia-ui-font-color1); +} + .sms__menu-list { padding-top: 0 !important; padding-bottom: 0 !important; diff --git a/arduino-ide-extension/src/browser/toolbar/arduino-toolbar.tsx b/arduino-ide-extension/src/browser/toolbar/arduino-toolbar.tsx index ea05637a..91fbadc9 100644 --- a/arduino-ide-extension/src/browser/toolbar/arduino-toolbar.tsx +++ b/arduino-ide-extension/src/browser/toolbar/arduino-toolbar.tsx @@ -28,7 +28,7 @@ export class ArduinoToolbarComponent extends React.Component { let innerText = ''; - let className = `${item.id} arduino-tool-icon`; + let className = `arduino-tool-icon ${item.id}-icon`; if (item.text) { for (const labelPart of this.props.labelParser.parse(item.text)) { if (typeof labelPart !== 'string' && LabelIcon.is(labelPart)) { @@ -40,17 +40,18 @@ export class ArduinoToolbarComponent extends React.Component -
this.setState({ tooltip: item.tooltip || '' })} - onMouseOut={() => this.setState({ tooltip: '' })} - title={item.tooltip}> - {innerText} + return
+
+
this.setState({ tooltip: item.tooltip || '' })} + onMouseOut={() => this.setState({ tooltip: '' })} + title={item.tooltip}> + {innerText} +
}