Adapted Dark, Light and Arduino themes

Signed-off-by: jbicker <[email protected]>

Author: jbicker

arduino-ide-extension/src/browser/icons/mask-buttons.svg

@@ -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,93 +81,119 @@ 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);
     --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-layout-color3);
+    --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-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);
+
   }

arduino-ide-extension/src/browser/style/arduino.useable.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,15 +185,15 @@ button.theia-button.main {
 }
 
 .arduino-boards-toolbar-item {
-    background: white;
+    background: var(--theia-layout-color1);
     height: 22px;
     display: flex;
     width: 100%;
     overflow: hidden;
 }
 
 .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);
 }

arduino-ide-extension/src/browser/style/board-select-dialog.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;

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

@@ -7,64 +7,63 @@
 }
 
 #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;
+.p-TabBar-toolbar .item.arduino-tool-item {
+    margin-left: 3px;
 }
 
-#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 {
+.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);
 }
 
-#arduino-save-file {
-    background: url(../icons/buttons.svg);
-    background-size: 800%;
-    background-position-y: 28px;
-    background-position-x: 59px;
+.p-TabBar-toolbar .item.arduino-tool-item > div:hover {
+    background: var(--theia-ui-button-color-hover);
 }
 
-#arduino-verify {
-    background: url(../icons/buttons.svg);
-    background-size: 800%;
-    background-position-y: 28px;
-    background-position-x: 188px;
+.arduino-verify, .arduino-upload {
+    border-radius: 12px;
 }
 
-#arduino-upload {
-    background: url(../icons/buttons.svg);
-    background-size: 800%;
-    background-position-y: 28px;
-    background-position-x: 156px;
+.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-show-open-context-menu {
-    background: url(../icons/buttons.svg);
-    background-size: 800%;
-    background-position-y: 28px;
-    background-position-x: 92px;
+.arduino-save-file-icon {
+    -webkit-mask-position: 59px -4px;
+    mask-position: 59px -4px;
 }
 
-#toggle-serial-monitor {
-    background: url(../icons/buttons.svg);
-    background-size: 800%;
-    background-position-y: 28px;
-    background-position-x: 28px;
+.arduino-verify-icon {
+    -webkit-mask-position: 188px -4px;
+    mask-position: 188px -4px;
 }
 
-.p-TabBar-toolbar .item.arduino-tool-item {
-    margin-left: 3px;
+.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 {
@@ -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 {

arduino-ide-extension/src/browser/style/main.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;

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

@@ -28,7 +28,7 @@ export class ArduinoToolbarComponent extends React.Component<ArduinoToolbarCompo
 
     protected renderItem = (item: TabBarToolbarItem) => {
         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<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' : ''}`
-        return <div key={item.id}
-            className={cls} >
-            <div
-                key={item.id + '-icon'}
-                id={item.id}
-                className={className}
-                onClick={this.props.executeCommand}
-                onMouseOver={() => this.setState({ tooltip: item.tooltip || '' })}
-                onMouseOut={() => this.setState({ tooltip: '' })}
-                title={item.tooltip}>
-                {innerText}
+        return <div key={item.id} className={cls} >
+            <div className={item.id}>
+                <div
+                    key={item.id + '-icon'}
+                    id={item.id}
+                    className={className}
+                    onClick={this.props.executeCommand}
+                    onMouseOver={() => this.setState({ tooltip: item.tooltip || '' })}
+                    onMouseOut={() => this.setState({ tooltip: '' })}
+                    title={item.tooltip}>
+                    {innerText}
+                </div>
             </div>
         </div>
     }