Update buttons style (#1122)

* Buttons updated to reflect the design system.

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

@@ -598,7 +598,7 @@ export class ArduinoFrontendContribution
           'Color of the Arduino IDE foreground which is used for dialogs, such as the Select Board dialog.',
       },
       {
-        id: 'arduino.toolbar.background',
+        id: 'arduino.toolbar.button.background',
         defaults: {
           dark: 'button.background',
           light: 'button.background',
@@ -608,7 +608,7 @@ export class ArduinoFrontendContribution
           'Background color of the toolbar items. Such as Upload, Verify, etc.',
       },
       {
-        id: 'arduino.toolbar.hoverBackground',
+        id: 'arduino.toolbar.button.hoverBackground',
         defaults: {
           dark: 'button.hoverBackground',
           light: 'button.foreground',

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

@@ -1,128 +0,0 @@
-{
-  "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",
-        "variable.other"
-      ],
-      "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",
-        "variable",
-        "variable.name"
-      ],
-      "settings": {
-        "foreground": "#434f54"
-      }
-    },
-    {
-      "name": "constants",
-      "scope": [
-        "string.quoted.double",
-        "constant"
-      ],
-      "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": "#005c5f",
-    "list.activeSelectionForeground": "#424242",
-    "list.activeSelectionBackground": "#DAE3E3",
-    "list.inactiveSelectionForeground": "#424242",
-    "list.inactiveSelectionBackground": "#DAE3E3",
-    "list.hoverBackground": "#ECF1F1",
-    "progressBar.background": "#005c5f",
-    "editor.background": "#ffffff",
-    "editorCursor.foreground": "#434f54",
-    "editor.foreground": "#434f54",
-    "editorWhitespace.foreground": "#bfbfbf",
-    "editor.lineHighlightBackground": "#434f5410",
-    "editor.selectionBackground": "#ffcb00",
-    "editorWidget.background": "#F7F9F9",
-    "focusBorder": "#7fcbcd99",
-    "menubar.selectionBackground": "#ffffff",
-    "menubar.selectionForeground": "#212121",
-    "menu.selectionBackground": "#dae3e3",
-    "menu.selectionForeground": "#212121",
-    "editorGroupHeader.tabsBackground": "#f7f9f9",
-    "button.background": "#7fcbcd",
-    "titleBar.activeBackground": "#005c5f",
-    "titleBar.activeForeground": "#ffffff",
-    "terminal.background": "#000000",
-    "terminal.foreground": "#e0e0e0",
-    "dropdown.border": "#ececec",
-    "dropdown.background": "#ececec",
-    "activityBar.background": "#ececec",
-    "activityBar.foreground": "#616161",
-    "statusBar.background": "#005c5f",
-    "secondaryButton.background": "#b5c8c9",
-    "secondaryButton.foreground": "#ececec",
-    "secondaryButton.hoverBackground": "#dae3e3",
-    "arduino.branding.primary": "#00979d",
-    "arduino.branding.secondary": "#b5c8c9",
-    "arduino.foreground": "#edf1f1",
-    "arduino.output.foreground": "#FFFFFF",
-    "arduino.output.background": "#000000"
-  },
-  "type": "light",
-  "name": "Arduino"
-}

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

@@ -4,7 +4,7 @@
   "colors": {
     "list.highlightForeground": "#0ca1a6",
     "list.activeSelectionForeground": "#dae3e3",
-    "list.activeSelectionBackground": "#434f54",
+    "list.activeSelectionBackground": "#0ca1a64d",
     "list.inactiveSelectionForeground": "#dae3e3",
     "list.inactiveSelectionBackground": "#434f54",
     "list.hoverBackground": "#1f272a",
@@ -45,7 +45,8 @@
     "arduino.foreground": "#edf1f1",
     "arduino.output.foreground": "#ffffff",
     "arduino.output.background": "#000000",
-    "arduino.toolbar.hoverBackground": "#dae3e3",
+    "arduino.toolbar.button.hoverBackground": "#dae3e3",
+    "arduino.toolbar.button.background": "#0ca1a6",
     "sideBar.background": "#101618",
     "sideBar.foreground": "#dae3e3",
     "input.background": "#000000",

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

@@ -4,7 +4,7 @@
   "colors": {
     "list.highlightForeground": "#008184",
     "list.activeSelectionForeground": "#4e5b61",
-    "list.activeSelectionBackground": "#dae3e3",
+    "list.activeSelectionBackground": "#00818433",
     "list.inactiveSelectionForeground": "#4e5b61",
     "list.inactiveSelectionBackground": "#dae3e3",
     "list.hoverBackground": "#ecf1f1",
@@ -22,7 +22,7 @@
     "menu.selectionBackground": "#dae3e3",
     "menu.selectionForeground": "#212121",
     "editorGroupHeader.tabsBackground": "#ecf1f1",
-    "button.background": "#7fcbcd",
+    "button.background": "#008184",
     "button.foreground": "#f7f9f9",
     "button.hoverBackground": "#005C5F",
     "titleBar.activeBackground": "#006d70",
@@ -45,7 +45,8 @@
     "arduino.foreground": "#edf1f1",
     "arduino.output.foreground": "#ffffff",
     "arduino.output.background": "#000000",
-    "arduino.toolbar.hoverBackground": "#f7f9f9",
+    "arduino.toolbar.button.hoverBackground": "#f7f9f9",
+    "arduino.toolbar.button.background": "#7fcbcd",
     "sideBar.background": "#f7f9f9",
     "sideBar.foreground": "#4e5b61",
     "input.background": "#ffffff",

arduino-ide-extension/src/browser/dialogs/certificate-uploader/certificate-uploader-component.tsx

@@ -94,7 +94,7 @@ export const CertificateUploaderComponent = ({
           >
             <button
               type="button"
-              className="theia-button primary add-cert-btn"
+              className="theia-button secondary add-cert-btn"
               onClick={() => {
                 showAdd ? setShowAdd(false) : setShowAdd(true);
               }}

arduino-ide-extension/src/browser/style/dialogs.css

@@ -55,7 +55,8 @@
 }
 
 .p-Widget.dialogOverlay .dialogBlock .dialogContent .dialogSection .dialogRow:first-child {
-    margin-top: 0px;
+    margin-top: 0px;    
+    height: 32px;
 }
 
 .fl1{
@@ -69,4 +70,4 @@
 
 .fa.disabled {
     opacity: .4;
-}
+}

arduino-ide-extension/src/browser/style/fonts.css

@@ -1,3 +1,8 @@
+@font-face {
+  font-family: 'Open Sans';
+  src: url('fonts/OpenSans-Bold-webfont.woff') format('woff');
+}
+
 @font-face {
   font-family: 'FontAwesome';
   src:

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

@@ -60,25 +60,51 @@
 /* Overrule the default Theia CSS button styles. */
 button.theia-button,
 .theia-button {
-  border: 1px solid var(--theia-dropdown-border);
+  align-items: center;
-}
+  display: flex;
-
+  font-family: 'Open Sans',sans-serif;
-button.theia-button:hover,
+  font-style: normal;
-.theia-button:hover {
+  font-weight: 700;  
-  border: 1px solid var(--theia-focusBorder);
+  font-size: 14px;
+  justify-content: center;
+  cursor: pointer;
+  letter-spacing: .01em;
+  line-height: 24px;
+  outline: none;
+  padding: 0 16px;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  border-width: 2px;
+  border-radius: 32px;
+  text-transform: uppercase;
+  transition: none;
+  box-shadow: none;
 }
 
 button.theia-button {
-  height: 31px;
+  height: 28px;
+  max-width: none;
+}
+
+.theia-button:active,
+.theia-button:focus {
+  box-shadow: 0 0 0 2px var(--theia-focusBorder);
 }
 
 button.theia-button.secondary {
-  background-color: var(--theia-secondaryButton-background);
+  border: 2px solid var(--theia-secondaryButton-foreground);
-  color: var(--theia-secondaryButton-foreground);
 }
 
-button.theia-button.main {
+button.theia-button[disabled], .theia-button[disabled] {
+  opacity: 0.5;
   color: var(--theia-button-foreground);
+  background-color: var(--theia-button-background);
+}
+
+button.secondary[disabled], .theia-button.secondary[disabled] {
+  color: var(--theia-secondaryButton-foreground);
+  background-color: var(--theia-secondaryButton-background);
 }
 
 /* To make the progress-bar slightly thicker, and use the color from the status bar */

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

@@ -127,12 +127,12 @@ https://github.com/arduino/arduino-pro-ide/issues/82 */
 }
 
 .component-list-item:hover .footer > * {
-    display: block;
+    display: inline-block;
     margin: 5px 0px 0px 10px;
 }
 
 .component-list-item:hover .footer > label {
-    display: block;
+    display: inline-block;
     align-self: center;
     margin: 5px 0px 0px 10px;
 }

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

@@ -20,11 +20,11 @@
     align-items: center;
     height: 24px;
     width: 24px;
-    background: var(--theia-arduino-toolbar-background);
+    background: var(--theia-arduino-toolbar-button-background);
 }
 
 .p-TabBar-toolbar .item.arduino-tool-item.enabled:hover > div {
-    background: var(--theia-arduino-toolbar-hoverBackground);
+    background: var(--theia-arduino-toolbar-button-hoverBackground);
 }
 
 .arduino-verify-sketch--toolbar,
@@ -178,7 +178,7 @@
 }
 
 #arduino-open-sketch-control--toolbar--container {
-    background-color: var(--theia-arduino-toolbar-background);
+    background-color: var(--theia-arduino-toolbar-button-background);
     border-radius: 1px;
 }
 

arduino-ide-extension/src/browser/style/sketchbook.css

@@ -44,7 +44,7 @@
 
 .active-sketch {
   font-weight: 500;
-  background-color: var(--theia-button-disabledBackground) !important;
+  background-color: var(--theia-list-activeSelectionBackground) !important;
   color: var(--theia-list-inactiveSelectionForeground) !important;
 
 }

arduino-ide-extension/src/browser/theia/messages/notification-component.tsx

@@ -61,7 +61,9 @@ export class NotificationComponent extends TheiaNotificationComponent {
                   actions.map((action, index) => (
                     <button
                       key={messageId + `-action-${index}`}
-                      className="theia-button"
+                      className={`theia-button ${
+                        index !== actions.length - 1 ? 'secondary' : ''
+                      }`}
                       data-message-id={messageId}
                       data-action={action}
                       onClick={this.onAction}

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

@@ -72,7 +72,10 @@ export class ListItemRenderer<T extends ArduinoComponent> {
     );
     const onClickInstall = () => install(item);
     const installButton = item.installable && (
-      <button className="theia-button install" onClick={onClickInstall}>
+      <button
+        className="theia-button secondary install"
+        onClick={onClickInstall}
+      >
         {nls.localize('arduino/component/install', 'INSTALL')}
       </button>
     );
@@ -121,8 +124,8 @@ export class ListItemRenderer<T extends ArduinoComponent> {
         </div>
         <div className="info">{moreInfo}</div>
         <div className="footer">
-          {installButton}
           {versions}
+          {installButton}
         </div>
       </div>
     );