From d7a2d8399006fa7caf4eb4641a276eaa0761c1a2 Mon Sep 17 00:00:00 2001 From: Francesco Spissu <94986937+francescospissu@users.noreply.github.com> Date: Fri, 8 Jul 2022 10:43:10 +0200 Subject: [PATCH] Update buttons style (#1122) * Buttons updated to reflect the design system. --- .../browser/arduino-frontend-contribution.tsx | 4 +- .../src/browser/data/arduino.color-theme.json | 128 ------------------ .../src/browser/data/dark.color-theme.json | 5 +- .../src/browser/data/default.color-theme.json | 7 +- .../certificate-uploader-component.tsx | 2 +- .../src/browser/style/dialogs.css | 5 +- .../src/browser/style/fonts.css | 5 + .../style/fonts/OpenSans-Bold-webfont.woff | Bin 0 -> 20676 bytes .../style/fonts/OpenSans-Regular-webfont.woff | Bin 0 -> 20696 bytes .../src/browser/style/index.css | 44 ++++-- .../src/browser/style/list-widget.css | 4 +- .../src/browser/style/main.css | 6 +- .../src/browser/style/sketchbook.css | 2 +- .../theia/messages/notification-component.tsx | 4 +- .../component-list/list-item-renderer.tsx | 7 +- 15 files changed, 67 insertions(+), 156 deletions(-) delete mode 100644 arduino-ide-extension/src/browser/data/arduino.color-theme.json create mode 100644 arduino-ide-extension/src/browser/style/fonts/OpenSans-Bold-webfont.woff create mode 100644 arduino-ide-extension/src/browser/style/fonts/OpenSans-Regular-webfont.woff diff --git a/arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx b/arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx index eeb25f737..a1d92bf6f 100644 --- a/arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx +++ b/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', diff --git a/arduino-ide-extension/src/browser/data/arduino.color-theme.json b/arduino-ide-extension/src/browser/data/arduino.color-theme.json deleted file mode 100644 index 2ec89f317..000000000 --- a/arduino-ide-extension/src/browser/data/arduino.color-theme.json +++ /dev/null @@ -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" -} diff --git a/arduino-ide-extension/src/browser/data/dark.color-theme.json b/arduino-ide-extension/src/browser/data/dark.color-theme.json index ef011a2ca..6930a193b 100644 --- a/arduino-ide-extension/src/browser/data/dark.color-theme.json +++ b/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", diff --git a/arduino-ide-extension/src/browser/data/default.color-theme.json b/arduino-ide-extension/src/browser/data/default.color-theme.json index 36b150a0b..54d3e7101 100644 --- a/arduino-ide-extension/src/browser/data/default.color-theme.json +++ b/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", diff --git a/arduino-ide-extension/src/browser/dialogs/certificate-uploader/certificate-uploader-component.tsx b/arduino-ide-extension/src/browser/dialogs/certificate-uploader/certificate-uploader-component.tsx index 31afee792..528e7ec95 100644 --- a/arduino-ide-extension/src/browser/dialogs/certificate-uploader/certificate-uploader-component.tsx +++ b/arduino-ide-extension/src/browser/dialogs/certificate-uploader/certificate-uploader-component.tsx @@ -94,7 +94,7 @@ export const CertificateUploaderComponent = ({ > ); @@ -121,8 +124,8 @@ export class ListItemRenderer {
{moreInfo}
- {installButton} {versions} + {installButton}
);