From f46432e3e38cb056de79bba0870d6d5fda79b6e0 Mon Sep 17 00:00:00 2001
From: Ignacio Pascual <4764217+ignapas@users.noreply.github.com>
Date: Thu, 23 Jul 2020 19:34:02 +0200
Subject: [PATCH 1/8] test

---
 source/class/osparc/theme/osparc/Appearance.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/source/class/osparc/theme/osparc/Appearance.js b/source/class/osparc/theme/osparc/Appearance.js
index a799d2f2..20454c38 100644
--- a/source/class/osparc/theme/osparc/Appearance.js
+++ b/source/class/osparc/theme/osparc/Appearance.js
@@ -460,7 +460,7 @@ qx.Theme.define("osparc.theme.osparc.Appearance", {
       alias: "atom",
       style: state => ({
         decorator: "chip",
-        backgroundColor: "background-main-lighter",
+        backgroundColor: "red",
         padding: [3, 5]
       })
     },
@@ -472,7 +472,7 @@ qx.Theme.define("osparc.theme.osparc.Appearance", {
       })
     },
 
-    /*
+    /* --local
     ---------------------------------------------------------------------------
       Dashboard
     ---------------------------------------------------------------------------

From ca72ec445c4c001e0ed020b139d88c81859c7ced Mon Sep 17 00:00:00 2001
From: Ignacio Pascual <4764217+ignapas@users.noreply.github.com>
Date: Mon, 27 Jul 2020 11:16:08 +0200
Subject: [PATCH 2/8] Removed osparc specific decorations and appearances

---
 .../class/osparc/theme/osparc/Appearance.js   | 569 ------------------
 .../class/osparc/theme/osparc/Decoration.js   | 196 ------
 2 files changed, 765 deletions(-)
 delete mode 100644 source/class/osparc/theme/osparc/Appearance.js
 delete mode 100644 source/class/osparc/theme/osparc/Decoration.js

diff --git a/source/class/osparc/theme/osparc/Appearance.js b/source/class/osparc/theme/osparc/Appearance.js
deleted file mode 100644
index a799d2f2..00000000
--- a/source/class/osparc/theme/osparc/Appearance.js
+++ /dev/null
@@ -1,569 +0,0 @@
-/* ************************************************************************
-
-   osparc - the simcore frontend
-
-   https://osparc.io
-
-   Copyright:
-     2018 IT'IS Foundation, https://itis.swiss
-
-   License:
-     MIT: https://opensource.org/licenses/MIT
-
-   Authors:
-     * Tobias Oetiker (oetiker)
-     * Odei Maiz (odeimaiz)
-     * Ignacio Pascual (ignapas)
-
-************************************************************************ */
-
-qx.Theme.define("osparc.theme.osparc.Appearance", {
-  extend: osparc.theme.common.Appearance,
-
-  appearances: {
-    "pb-list": {
-      include: "list",
-      alias:   "list",
-      style: function(states) {
-        return {
-          decorator: null,
-          padding: 0
-        };
-      }
-    },
-    "pb-listitem":  {
-      include: "material-button",
-      style: function(states) {
-        const style = {
-          decorator: "pb-listitem",
-          padding: 5,
-          backgroundColor: "background-main-lighter+"
-        };
-        if (states.hovered) {
-          style.backgroundColor = "light-background";
-        }
-        if (states.selected || states.checked) {
-          style.backgroundColor = "light-background+";
-        }
-        return style;
-      }
-    },
-    "selectable": {
-      include: "material-button",
-      style: function(states) {
-        const style = {
-          decorator: "no-radius-button",
-          padding: 5,
-          backgroundColor: "transparent"
-        };
-        if (states.hovered) {
-          style.backgroundColor = "background-main-lighter+";
-        }
-        if (states.selected || states.checked) {
-          style.backgroundColor = "light-background";
-        }
-        return style;
-      }
-    },
-
-    /*
-    ---------------------------------------------------------------------------
-      WINDOW-SMALL-CAP CHOOSER
-    ---------------------------------------------------------------------------
-    */
-    "window-small-cap": {
-      include: "window", // get all the settings from window
-      alias: "window", // redirect kids to window/kid
-      style: function(states) {
-        return {
-          backgroundColor: states.selected ? "node-selected-background" : "background-selected-dark",
-          decorator: states.maximized ? "window-small-cap-maximized" : "window-small-cap"
-        };
-      }
-    },
-
-    "window-small-cap/captionbar": {
-      include: "window/captionbar", // load defaults from window captionbar
-      alias: "window/captionbar", // redirect kids
-      style: function(states) {
-        return {
-          padding: [0, 3, 0, 3],
-          minHeight: 20,
-          backgroundColor: "transparent",
-          decorator: "workbench-small-cap-captionbar"
-        };
-      }
-    },
-
-    "window-small-cap/title": {
-      include: "window/title",
-      style: function(states) {
-        return {
-          marginLeft: 2,
-          font: "small"
-        };
-      }
-    },
-
-    "window-small-cap/minimize-button": {
-      alias: "window/minimize-button",
-      include: "window/minimize-button",
-      style: function(states) {
-        return {
-          icon: osparc.theme.common.Image.URLS["window-minimize"]+"/14"
-        };
-      }
-    },
-
-    "window-small-cap/restore-button": {
-      alias: "window/restore-button",
-      include: "window/restore-button",
-      style: function(states) {
-        return {
-          icon: osparc.theme.common.Image.URLS["window-restore"]+"/14"
-        };
-      }
-    },
-
-    "window-small-cap/maximize-button": {
-      alias: "window/maximize-button",
-      include: "window/maximize-button",
-      style: function(states) {
-        return {
-          icon: osparc.theme.common.Image.URLS["window-maximize"]+"/14"
-        };
-      }
-    },
-
-    "window-small-cap/close-button": {
-      alias: "window/close-button",
-      include: "window/close-button",
-      style: function(states) {
-        return {
-          icon: osparc.theme.common.Image.URLS["window-close"]+"/14"
-        };
-      }
-    },
-
-    "window-small-cap/progress": "progressbar",
-
-    "service-window": {
-      include: "window",
-      alias: "window",
-      style: state => ({
-        decorator: state.maximized ? "service-window-maximized" : "service-window"
-      })
-    },
-    "service-window/captionbar": {
-      include: "window/captionbar",
-      style: state => ({
-        backgroundColor: "material-button-background",
-        decorator: "workbench-small-cap-captionbar"
-      })
-    },
-    "info-service-window": {
-      include: "service-window",
-      alias: "service-window",
-      style: state => ({
-        maxHeight: state.maximized ? null : 500
-      })
-    },
-
-    "dialog-window-content": {
-      style: () => ({
-        backgroundColor: "material-button-background"
-      })
-    },
-    /*
-    ---------------------------------------------------------------------------
-      PanelView
-    ---------------------------------------------------------------------------
-    */
-    "panelview": {
-      style: state => ({
-        decorator: "panelview"
-      })
-    },
-    "panelview/title": {
-      style: state => ({
-        font: "title-14"
-      })
-    },
-    "panelview-titlebar": {
-      style: state => ({
-        height: 24,
-        padding: [0, 5],
-        alignY: "middle",
-        cursor: "pointer"
-      })
-    },
-    "panelview-content": {
-      style: state => ({
-        decorator: "panelview-content",
-        margin: [0, 4, 4, 4]
-      })
-    },
-
-    /*
-    ---------------------------------------------------------------------------
-      Toolbar
-    ---------------------------------------------------------------------------
-    */
-    "toolbar-textfield": {
-      include: "material-textfield",
-      style: state => ({
-        backgroundColor: "transparent",
-        marginTop: 8
-      })
-    },
-    "toolbar-label": {
-      style: state => ({
-        marginTop: 11,
-        marginRight: 3
-      })
-    },
-    "textfilter": {},
-    "textfilter/textfield": "toolbar-textfield",
-
-    "autocompletefilter": {},
-    "autocompletefilter/autocompletefield/textfield": {
-      include: "toolbar-textfield",
-      style: state => ({
-        paddingRight: 15
-      })
-    },
-    "autocompletefilter/autocompletefield/button": {},
-
-    "toolbar-selectbox": {
-      include: "textfield",
-      alias: "selectbox",
-      style: () => ({
-        margin: [7, 10],
-        paddingLeft: 5
-      })
-    },
-    "toolbar-selectbox/arrow": {
-      include: "selectbox/arrow",
-      style: style => ({
-        cursor: style.disabled ? "auto" : "pointer"
-      })
-    },
-    "toolbar-selectbox/list": {
-      include: "selectbox/list",
-      style: () => ({
-        padding: 0
-      })
-    },
-
-    "toolbar-progressbar": {
-      include: "progressbar",
-      alias: "progressbar",
-      style: () => ({
-        margin: [7, 10]
-      })
-    },
-
-    /*
-    ---------------------------------------------------------------------------
-      SidePanel
-    ---------------------------------------------------------------------------
-    */
-    sidepanel: {
-      style: state => ({
-        backgroundColor: "background-main-lighter"
-      })
-    },
-
-    /*
-    ---------------------------------------------------------------------------
-      Splitpane
-    ---------------------------------------------------------------------------
-    */
-    "splitpane/splitter": {
-      style: state => ({
-        visible: false
-      })
-    },
-
-    /*
-    ---------------------------------------------------------------------------
-      NodePorts
-    ---------------------------------------------------------------------------
-    */
-    "node-ports": {
-      style: state => ({
-        backgroundColor: "background-main-lighter+"
-      })
-    },
-
-    /*
-    ---------------------------------------------------------------------------
-      Jumbo
-    ---------------------------------------------------------------------------
-    */
-    "jumbo": {
-      include: "material-button",
-      alias: "material-button",
-      style: state => ({
-        padding: [7, 8, 5, 8]
-      })
-    },
-
-    /*
-    ---------------------------------------------------------------------------
-      ServiceBrowser
-    ---------------------------------------------------------------------------
-    */
-    "service-browser": {
-      style: state => ({
-        padding: 8,
-        decorator: "service-browser"
-      })
-    },
-
-    /*
-    ---------------------------------------------------------------------------
-      Buttons
-    ---------------------------------------------------------------------------
-    */
-    "link-button": {
-      include: "material-button",
-      style: state => ({
-        decorator: "link-button",
-        backgroundColor: "transparent",
-        textColor: state.hovered ? "text" : "text-darker"
-      })
-    },
-
-    "xl-button": {
-      include: "material-button",
-      alias: "material-button",
-      style: state => ({
-        allowStretchY: false,
-        allowStretchX: false,
-        minHeight: 50,
-        center: true
-      })
-    },
-
-    "xl-button/label": {
-      include: "material-button/label",
-      style: state => ({
-        font: "title-16"
-      })
-    },
-
-    "lg-button": {
-      include: "material-button",
-      alias: "material-button",
-      style: state => ({
-        allowStretchY: false,
-        allowStretchX: false,
-        minHeight: 35,
-        center: true
-      })
-    },
-
-    "lg-button/label": {
-      include: "material-button/label",
-      style: state => ({
-        font: "text-16"
-      })
-    },
-
-    "md-button": {
-      include: "material-button",
-      alias: "material-button",
-      style: state => ({
-        allowStretchY: false,
-        allowStretchX: false,
-        minHeight: 25,
-        center: true
-      })
-    },
-
-    "md-button/label": {
-      include: "material-button/label",
-      style: state => ({
-        font: "text-14"
-      })
-    },
-
-    /*
-    ---------------------------------------------------------------------------
-      FlashMessage
-    ---------------------------------------------------------------------------
-    */
-    "flash": {
-      style: state => ({
-        padding: 10,
-        backgroundColor: "background-main-lighter+",
-        decorator: "flash"
-      })
-    },
-    "flash/badge": {
-      style: state => ({
-        decorator: "flash-badge"
-      })
-    },
-
-    /*
-    ---------------------------------------------------------------------------
-      IFrame
-    ---------------------------------------------------------------------------
-    */
-    "iframe": {},
-
-    /*
-    ---------------------------------------------------------------------------
-      GroupBox
-    ---------------------------------------------------------------------------
-    */
-    "settings-groupbox": {
-      include: "groupbox",
-      alias: "groupbox"
-    },
-    "settings-groupbox/frame": {
-      include: "groupbox/frame",
-      style: state => ({
-        decorator: "no-border"
-      })
-    },
-    "settings-groupbox/legend": {
-      alias: "atom",
-      include: "groupbox/legend",
-      style: state => ({
-        font: "title-16"
-      })
-    },
-
-    /*
-    ---------------------------------------------------------------------------
-      Hints
-    ---------------------------------------------------------------------------
-    */
-    "hint": {
-      style: state => ({
-        backgroundColor: "background-main-lighter+",
-        decorator: "hint",
-        padding: 5
-      })
-    },
-
-    /*
-    ---------------------------------------------------------------------------
-      Chip
-    ---------------------------------------------------------------------------
-    */
-    "chip": {
-      include: "atom",
-      alias: "atom",
-      style: state => ({
-        decorator: "chip",
-        backgroundColor: "background-main-lighter",
-        padding: [3, 5]
-      })
-    },
-
-    "chip/label": {
-      include: "atom/label",
-      style: state => ({
-        font: "text-10"
-      })
-    },
-
-    /*
-    ---------------------------------------------------------------------------
-      Dashboard
-    ---------------------------------------------------------------------------
-    */
-    "dashboard": {
-      include: "tabview",
-      alias: "tabview"
-    },
-
-    "dashboard/pane": {
-      style: state => ({
-        padding: [0, 0, 0, 15]
-      })
-    },
-
-    "dashboard/bar/content": {
-      style: state => ({
-        width: 120,
-        paddingTop: 15
-      })
-    },
-
-    "dashboard-page": {
-      include: "tabview-page",
-      alias: "tabview-page"
-    },
-
-    "dashboard-page/button": {
-      include: "tabview-page/button",
-      alias: "tabview-page/button",
-      style: state => ({
-        font: state.checked ? "title-16" : "text-16"
-      })
-    },
-
-    /*
-    ---------------------------------------------------------------------------
-      EditLabel
-    ---------------------------------------------------------------------------
-    */
-    "editlabel": {},
-    "editlabel/label": {
-      include: "atom/label",
-      style: state => ({
-        decorator: state.hovered && state.editable ? "border-editable" : null,
-        marginLeft: state.hovered && state.editable ? 0 : 1,
-        padding: [2, state.hovered && state.editable ? 2 : 3, 2, 2],
-        cursor: state.editable ? "text" : "auto"
-      })
-    },
-    "editlabel/input": {
-      include: "textfield",
-      style: state => ({
-        paddingTop: 4,
-        paddingLeft: 3,
-        minWidth: 80,
-        backgroundColor: "transparent"
-      })
-    },
-
-    /*
-    ---------------------------------------------------------------------------
-      Tag
-    ---------------------------------------------------------------------------
-    */
-    "tag": {
-      include: "atom/label",
-      style: state => ({
-        decorator: "tag",
-        padding: [1, 5]
-      })
-    },
-    "tagitem": {
-      style: () => ({
-        decorator: "tagitem",
-        padding: 5
-      })
-    },
-    "tagitem/colorbutton": {
-      include: "material-button",
-      alias: "material-button",
-      style: () => ({
-        decorator: "tagitem-colorbutton"
-      })
-    },
-    "tagbutton": {
-      include: "material-button",
-      alias: "material-button",
-      style: () => ({
-        decorator: "tagbutton"
-      })
-    }
-  }
-});
diff --git a/source/class/osparc/theme/osparc/Decoration.js b/source/class/osparc/theme/osparc/Decoration.js
deleted file mode 100644
index a384048e..00000000
--- a/source/class/osparc/theme/osparc/Decoration.js
+++ /dev/null
@@ -1,196 +0,0 @@
-/* ************************************************************************
-
-   osparc - the simcore frontend
-
-   https://osparc.io
-
-   Copyright:
-     2018 IT'IS Foundation, https://itis.swiss
-
-   License:
-     MIT: https://opensource.org/licenses/MIT
-
-   Authors:
-     * Tobias Oetiker (oetiker)
-     * Odei Maiz (odeimaiz)
-     * Ignacio Pascual (ignapas)
-
-************************************************************************ */
-
-qx.Theme.define("osparc.theme.osparc.Decoration", {
-  extend: osparc.theme.common.Decoration,
-
-  decorations: {
-    "service-tree": {
-      decorator: qx.ui.decoration.MSingleBorder,
-      style: {
-        width: 0
-      }
-    },
-
-    "panelview": {
-      style: {
-        transitionProperty: "top",
-        transitionDuration: "0.2s",
-        transitionTimingFunction: "ease-in"
-      }
-    },
-
-    "panelview-content": {
-      style: {
-        transitionProperty: "height",
-        transitionDuration: "0.2s",
-        transitionTimingFunction: "ease-in"
-      }
-    },
-
-    "outputPortHighlighted": {
-      style: {
-        backgroundColor: "background-main-lighter+"
-      }
-    },
-
-    "window-small-cap": {
-      include: "service-window",
-      style: {
-        width: 0,
-        radius: 3,
-        transitionProperty: "opacity",
-        transitionDuration: "0.05s",
-        transitionTimingFunction: "ease-in"
-      }
-    },
-
-    "window-small-cap-maximized": {
-      include: "service-window-maximized",
-      style: {
-        width: 0,
-        transitionProperty: "opacity",
-        transitionDuration: "0.05s",
-        transitionTimingFunction: "ease-in"
-      }
-    },
-
-    "workbench-small-cap-captionbar": {
-      style: {
-        width: 0
-      }
-    },
-
-    "service-window": {
-      include: "window",
-      style: {
-        radius: 3,
-        width: 1
-      }
-    },
-
-    "service-window-maximized": {
-      include: "window",
-      style: {
-        width: 1
-      }
-    },
-
-    "sidepanel": {
-      style: {
-        transitionProperty: ["left", "width"],
-        transitionDuration: "0.2s",
-        transitionTimingFunction: "ease-in"
-      }
-    },
-
-    "link-button": {},
-
-    "service-browser": {
-      style: {
-        color: "material-button-background"
-      }
-    },
-
-    "flash": {
-      style: {
-        radius: 3,
-        transitionProperty: "top",
-        transitionDuration: "0.2s",
-        transitionTimingFunction: "ease-in"
-      }
-    },
-
-    "flash-badge": {
-      style: {
-        radius: 5
-      }
-    },
-
-    "flash-container-transitioned": {
-      style: {
-        transitionProperty: "height",
-        transitionDuration: "0.2s",
-        transitionTimingFunction: "ease-in"
-      }
-    },
-
-    "no-border": {
-      style: {
-        width: 0
-      }
-    },
-
-    "border-editable": {
-      style: {
-        width: 1,
-        radius: 3,
-        color: "text-disabled"
-      }
-    },
-
-    "hint": {
-      style: {
-        radius: 3
-      }
-    },
-
-    "chip": {
-      style: {
-        radius: 9
-      }
-    },
-
-    "pb-listitem": {
-      style: {
-        radius: 3
-      }
-    },
-
-    "no-radius-button": {
-      style: {
-        radius: 0
-      }
-    },
-
-    "tag": {
-      style: {
-        radius: 2
-      }
-    },
-    "tagitem": {
-      style: {
-        radius: 2
-      }
-    },
-    "tagitem-colorbutton": {
-      include: "material-button",
-      style: {
-        radiusBottomRight: 0,
-        radiusTopRight: 0
-      }
-    },
-    "tagbutton": {
-      include: "material-button",
-      style: {
-        radius: 0
-      }
-    }
-  }
-});

From ff60b3d882e1ba7b645cf248c837d96de61ade59 Mon Sep 17 00:00:00 2001
From: Ignacio Pascual <4764217+ignapas@users.noreply.github.com>
Date: Mon, 27 Jul 2020 11:43:45 +0200
Subject: [PATCH 3/8] Set common appearances and decorations

---
 source/class/osparc/theme/OSparcBlue.js   | 4 ++--
 source/class/osparc/theme/OSparcDark.js   | 4 ++--
 source/class/osparc/theme/OSparcLight.js  | 4 ++--
 source/class/osparc/theme/OSparcPortal.js | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/source/class/osparc/theme/OSparcBlue.js b/source/class/osparc/theme/OSparcBlue.js
index afc7d928..6816b089 100755
--- a/source/class/osparc/theme/OSparcBlue.js
+++ b/source/class/osparc/theme/OSparcBlue.js
@@ -23,9 +23,9 @@ qx.Theme.define("osparc.theme.OSparcBlue", {
   title: "OSparc Blue Theme",
   meta: {
     color: osparc.theme.osparcblue.Color,
-    decoration: osparc.theme.osparc.Decoration,
+    decoration: osparc.theme.common.Decoration,
     font: osparc.theme.osparc.Font,
-    appearance: osparc.theme.osparc.Appearance,
+    appearance: osparc.theme.common.Appearance,
     icon: qx.theme.icon.Tango
   }
 });
diff --git a/source/class/osparc/theme/OSparcDark.js b/source/class/osparc/theme/OSparcDark.js
index 88d2bbec..a23edecc 100755
--- a/source/class/osparc/theme/OSparcDark.js
+++ b/source/class/osparc/theme/OSparcDark.js
@@ -23,9 +23,9 @@ qx.Theme.define("osparc.theme.OSparcDark", {
   title: "OSparc Dark Theme",
   meta: {
     color: osparc.theme.osparcdark.Color,
-    decoration: osparc.theme.osparc.Decoration,
+    decoration: osparc.theme.common.Decoration,
     font: osparc.theme.osparc.Font,
-    appearance: osparc.theme.osparc.Appearance,
+    appearance: osparc.theme.common.Appearance,
     icon: qx.theme.icon.Tango
   }
 });
diff --git a/source/class/osparc/theme/OSparcLight.js b/source/class/osparc/theme/OSparcLight.js
index c4a65d69..88c0141e 100644
--- a/source/class/osparc/theme/OSparcLight.js
+++ b/source/class/osparc/theme/OSparcLight.js
@@ -23,9 +23,9 @@ qx.Theme.define("osparc.theme.OSparcLight", {
   title: "OSparc Light Theme",
   meta: {
     color: osparc.theme.osparclight.Color,
-    decoration: osparc.theme.osparc.Decoration,
+    decoration: osparc.theme.common.Decoration,
     font: osparc.theme.osparc.Font,
-    appearance: osparc.theme.osparc.Appearance,
+    appearance: osparc.theme.common.Appearance,
     icon: qx.theme.icon.Tango
   }
 });
diff --git a/source/class/osparc/theme/OSparcPortal.js b/source/class/osparc/theme/OSparcPortal.js
index ffd6096f..336b78bb 100644
--- a/source/class/osparc/theme/OSparcPortal.js
+++ b/source/class/osparc/theme/OSparcPortal.js
@@ -23,9 +23,9 @@ qx.Theme.define("osparc.theme.OSparcPortal", {
   title: "OSparc Light Theme",
   meta: {
     color: osparc.theme.osparcportal.Color,
-    decoration: osparc.theme.osparc.Decoration,
+    decoration: osparc.theme.common.Decoration,
     font: osparc.theme.osparcportal.Font,
-    appearance: osparc.theme.osparc.Appearance,
+    appearance: osparc.theme.common.Appearance,
     icon: qx.theme.icon.Tango
   }
 });

From be5528b69e5f6ba323d3224907a75a39d7121f44 Mon Sep 17 00:00:00 2001
From: Ignacio Pascual <4764217+ignapas@users.noreply.github.com>
Date: Mon, 27 Jul 2020 16:49:59 +0200
Subject: [PATCH 4/8] Removed osparc specific fonts

---
 source/class/osparc/theme/OSparcBlue.js       |   2 +-
 source/class/osparc/theme/OSparcDark.js       |   2 +-
 source/class/osparc/theme/OSparcLight.js      |   2 +-
 source/class/osparc/theme/osparc/Font.js      | 149 ------------------
 .../class/osparc/theme/osparcportal/Font.js   |   2 +-
 source/class/widgetbrowser/pages/OSparc.js    |   2 +-
 6 files changed, 5 insertions(+), 154 deletions(-)
 delete mode 100644 source/class/osparc/theme/osparc/Font.js

diff --git a/source/class/osparc/theme/OSparcBlue.js b/source/class/osparc/theme/OSparcBlue.js
index 6816b089..988421a2 100755
--- a/source/class/osparc/theme/OSparcBlue.js
+++ b/source/class/osparc/theme/OSparcBlue.js
@@ -24,7 +24,7 @@ qx.Theme.define("osparc.theme.OSparcBlue", {
   meta: {
     color: osparc.theme.osparcblue.Color,
     decoration: osparc.theme.common.Decoration,
-    font: osparc.theme.osparc.Font,
+    font: osparc.theme.common.Font,
     appearance: osparc.theme.common.Appearance,
     icon: qx.theme.icon.Tango
   }
diff --git a/source/class/osparc/theme/OSparcDark.js b/source/class/osparc/theme/OSparcDark.js
index a23edecc..2da74112 100755
--- a/source/class/osparc/theme/OSparcDark.js
+++ b/source/class/osparc/theme/OSparcDark.js
@@ -24,7 +24,7 @@ qx.Theme.define("osparc.theme.OSparcDark", {
   meta: {
     color: osparc.theme.osparcdark.Color,
     decoration: osparc.theme.common.Decoration,
-    font: osparc.theme.osparc.Font,
+    font: osparc.theme.common.Font,
     appearance: osparc.theme.common.Appearance,
     icon: qx.theme.icon.Tango
   }
diff --git a/source/class/osparc/theme/OSparcLight.js b/source/class/osparc/theme/OSparcLight.js
index 88c0141e..8379a6a9 100644
--- a/source/class/osparc/theme/OSparcLight.js
+++ b/source/class/osparc/theme/OSparcLight.js
@@ -24,7 +24,7 @@ qx.Theme.define("osparc.theme.OSparcLight", {
   meta: {
     color: osparc.theme.osparclight.Color,
     decoration: osparc.theme.common.Decoration,
-    font: osparc.theme.osparc.Font,
+    font: osparc.theme.common.Font,
     appearance: osparc.theme.common.Appearance,
     icon: qx.theme.icon.Tango
   }
diff --git a/source/class/osparc/theme/osparc/Font.js b/source/class/osparc/theme/osparc/Font.js
deleted file mode 100644
index ae26c4df..00000000
--- a/source/class/osparc/theme/osparc/Font.js
+++ /dev/null
@@ -1,149 +0,0 @@
-/* ************************************************************************
-
-   osparc - the simcore frontend
-
-   https://osparc.io
-
-   Copyright:
-     2018 IT'IS Foundation, https://itis.swiss
-
-   License:
-     MIT: https://opensource.org/licenses/MIT
-
-   Authors:
-     * Tobias Oetiker (oetiker)
-     * Odei Maiz (odeimaiz)
-     * Ignacio Pascual (ignapas)
-
-************************************************************************ */
-
-qx.Theme.define("osparc.theme.osparc.Font", {
-  extend: osparc.theme.common.Font,
-
-  fonts: {
-    "nav-bar-label": {
-      size: 20,
-      family: ["Roboto"],
-      color: "text",
-      bold: true
-    },
-
-    "title-18": {
-      size: 18,
-      family: ["Roboto"],
-      color: "text",
-      bold: true
-    },
-
-    "text-18": {
-      size: 18,
-      family: ["Roboto"],
-      color: "text"
-    },
-
-    "title-16": {
-      size: 16,
-      family: ["Roboto"],
-      color: "text",
-      bold: true
-    },
-
-    "text-16": {
-      size: 16,
-      family: ["Roboto"],
-      color: "text"
-    },
-
-    "title-14": {
-      size: 14,
-      family: ["Roboto"],
-      color: "text",
-      bold: true
-    },
-
-    "text-14": {
-      size: 14,
-      family: ["Roboto"],
-      color: "text"
-    },
-
-    "title-13": {
-      size: 13,
-      family: ["Roboto", "sans-serif"],
-      color: "text",
-      bold: true
-    },
-
-    "text-13": {
-      size: 13,
-      family: ["Roboto", "sans-serif"],
-      color: "text"
-    },
-
-    "title-12": {
-      size: 12,
-      family: ["Roboto"],
-      color: "text",
-      bold: true
-    },
-
-    "text-12": {
-      size: 12,
-      family: ["Roboto"],
-      color: "text"
-    },
-
-    "link-label": {
-      size: 12,
-      family: ["Roboto"],
-      color: "text-darker",
-      decoration: "underline"
-    },
-
-    "text-12-italic": {
-      size: 12,
-      family: ["Roboto"],
-      color: "text",
-      italic: true
-    },
-
-    "text-11": {
-      size: 11,
-      family: ["Roboto"],
-      color: "text"
-    },
-
-    "text-10": {
-      size: 10,
-      family: ["Roboto"],
-      color: "text"
-    },
-
-    "text-9": {
-      size: 9,
-      family: ["Roboto"],
-      color: "text"
-    },
-
-    "text-8-italic": {
-      size: 8,
-      family: ["Roboto"],
-      color: "text",
-      italic: true
-    },
-
-    "workbench-start-hint": {
-      size: 20,
-      family: ["Roboto"],
-      color: "workbench-start-hint",
-      bold: true
-    },
-
-    "workbench-io-label": {
-      size: 20,
-      family: ["monospace"],
-      color: "workbench-start-hint",
-      bold: true
-    }
-  }
-});
diff --git a/source/class/osparc/theme/osparcportal/Font.js b/source/class/osparc/theme/osparcportal/Font.js
index b7ee680f..a4ac87fe 100644
--- a/source/class/osparc/theme/osparcportal/Font.js
+++ b/source/class/osparc/theme/osparcportal/Font.js
@@ -18,7 +18,7 @@
 ************************************************************************ */
 
 qx.Theme.define("osparc.theme.osparcportal.Font", {
-  extend: osparc.theme.osparc.Font,
+  extend: osparc.theme.common.Font,
 
   fonts: {
     "default": {
diff --git a/source/class/widgetbrowser/pages/OSparc.js b/source/class/widgetbrowser/pages/OSparc.js
index ddc80700..475d8310 100644
--- a/source/class/widgetbrowser/pages/OSparc.js
+++ b/source/class/widgetbrowser/pages/OSparc.js
@@ -66,7 +66,7 @@ qx.Class.define("widgetbrowser.pages.OSparc", {
       const osparcFontsGroupBox = new qx.ui.groupbox.GroupBox("oSparc Fonts").set({
         layout: new qx.ui.layout.VBox(5)
       });
-      const osparcFonts = osparc.theme.osparc.Font.fonts;
+      const osparcFonts = osparc.theme.common.Font.fonts;
       const osparcFontsKeys = Object.keys(Object.getPrototypeOf(osparcFonts));
       osparcFontsKeys.forEach(osparcFont => {
         const lbl = new qx.ui.basic.Label(osparcFont).set({

From 1c72dce378142c6e8f9a87fc8aaaad1098571ee9 Mon Sep 17 00:00:00 2001
From: Ignacio Pascual <4764217+ignapas@users.noreply.github.com>
Date: Mon, 27 Jul 2020 16:51:21 +0200
Subject: [PATCH 5/8] Increased version

---
 Manifest.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Manifest.json b/Manifest.json
index 5cd9f7bb..a226dc53 100644
--- a/Manifest.json
+++ b/Manifest.json
@@ -11,7 +11,7 @@
         "email": "tobi@itis.swiss"
       }
     ],
-    "version": "0.5.4"
+    "version": "0.5.5"
   },
   "provides": {
     "namespace": "osparc.theme",

From a454e69554656cb959cc7dc0a9427e918403fad0 Mon Sep 17 00:00:00 2001
From: Ignacio Pascual <4764217+ignapas@users.noreply.github.com>
Date: Mon, 27 Jul 2020 17:47:20 +0200
Subject: [PATCH 6/8] Removed osparc specific colors

---
 source/class/osparc/theme/osparcdark/Color.js | 40 +++++++++----------
 .../class/osparc/theme/osparclight/Color.js   | 40 +++++++++----------
 2 files changed, 40 insertions(+), 40 deletions(-)

diff --git a/source/class/osparc/theme/osparcdark/Color.js b/source/class/osparc/theme/osparcdark/Color.js
index 8f7690dc..775babf7 100755
--- a/source/class/osparc/theme/osparcdark/Color.js
+++ b/source/class/osparc/theme/osparcdark/Color.js
@@ -147,32 +147,32 @@ qx.Theme.define("osparc.theme.osparcdark.Color", {
       OSPARC RELATED
     ---------------------------------------------------------------------------
     */
-    "workbench-edge-comp-active": "#777777",
-    "workbench-edge-api-active": "#BBBBBB",
-    "workbench-edge-selected": "#0000FF",
-    "workbench-start-hint": "#505050",
+    // "workbench-edge-comp-active": "#777777",
+    // "workbench-edge-api-active": "#BBBBBB",
+    // "workbench-edge-selected": "#0000FF",
+    // "workbench-start-hint": "#505050",
 
-    "node-selected-background": "#666666",
-    "node-title-text": "#DCDCDC",
-    "node-port-text": "#BABABA",
+    // "node-selected-background": "#666666",
+    // "node-title-text": "#DCDCDC",
+    // "node-port-text": "#BABABA",
 
-    "logger-debug-message": "#FFFFFF",
-    "logger-info-message": "#FFFFFF",
-    "logger-warning-message": "#FFFF00",
-    "logger-error-message": "#FF0000",
+    // "logger-debug-message": "#FFFFFF",
+    // "logger-info-message": "#FFFFFF",
+    // "logger-warning-message": "#FFFF00",
+    // "logger-error-message": "#FF0000",
 
-    "service-window-hint": "#808080",
+    // "service-window-hint": "#808080",
 
-    "activitytree-background-cpu": "#2C7CCE",
-    "activitytree-background-memory": "#358475",
+    // "activitytree-background-cpu": "#2C7CCE",
+    // "activitytree-background-memory": "#358475",
 
-    "ready-green": "#33925A",
-    "failed-red": "#FF2D2D",
+    // "ready-green": "#33925A",
+    // "failed-red": "#FF2D2D",
 
-    "progressbar": "#60909e",
+    // "progressbar": "#60909e",
 
-    "loading-page-background-color": "#202020",
-    "loading-page-text": "#FFFFFF",
-    "loading-page-spinner": "#DDDDDD"
+    // "loading-page-background-color": "#202020",
+    // "loading-page-text": "#FFFFFF",
+    // "loading-page-spinner": "#DDDDDD"
   }
 });
diff --git a/source/class/osparc/theme/osparclight/Color.js b/source/class/osparc/theme/osparclight/Color.js
index 2ecc6bc2..d27dacf9 100644
--- a/source/class/osparc/theme/osparclight/Color.js
+++ b/source/class/osparc/theme/osparclight/Color.js
@@ -147,32 +147,32 @@ qx.Theme.define("osparc.theme.osparclight.Color", {
       OSPARC RELATED
     ---------------------------------------------------------------------------
     */
-    "workbench-edge-comp-active": "#888888",
-    "workbench-edge-api-active": "#444444",
-    "workbench-edge-selected": "#FFFF00",
-    "workbench-start-hint": "#AFAFAF",
+    // "workbench-edge-comp-active": "#888888",
+    // "workbench-edge-api-active": "#444444",
+    // "workbench-edge-selected": "#FFFF00",
+    // "workbench-start-hint": "#AFAFAF",
 
-    "node-selected-background": "#999999",
-    "node-title-text": "#232323",
-    "node-port-text": "#454545",
+    // "node-selected-background": "#999999",
+    // "node-title-text": "#232323",
+    // "node-port-text": "#454545",
 
-    "logger-debug-message": "#000000",
-    "logger-info-message": "#000000",
-    "logger-warning-message": "#FFFF00",
-    "logger-error-message": "#FF0000",
+    // "logger-debug-message": "#000000",
+    // "logger-info-message": "#000000",
+    // "logger-warning-message": "#FFFF00",
+    // "logger-error-message": "#FF0000",
 
-    "service-window-hint": "#7F7F7F",
+    // "service-window-hint": "#7F7F7F",
 
-    "activitytree-background-cpu": "#D38331",
-    "activitytree-background-memory": "#CA7B8A",
+    // "activitytree-background-cpu": "#D38331",
+    // "activitytree-background-memory": "#CA7B8A",
 
-    "ready-green": "#33925A",
-    "failed-red": "#FF2D2D",
+    // "ready-green": "#33925A",
+    // "failed-red": "#FF2D2D",
 
-    "progressbar": "#9F6F61",
+    // "progressbar": "#9F6F61",
 
-    "loading-page-background-color": "background-main",
-    "loading-page-text": "#000000",
-    "loading-page-spinner": "#222222"
+    // "loading-page-background-color": "background-main",
+    // "loading-page-text": "#000000",
+    // "loading-page-spinner": "#222222"
   }
 });

From 6c535462ab2529e8aae478e26205554affaa032c Mon Sep 17 00:00:00 2001
From: Ignacio Pascual <4764217+ignapas@users.noreply.github.com>
Date: Mon, 27 Jul 2020 18:28:13 +0200
Subject: [PATCH 7/8] Removed contrasting colors

---
 source/class/osparc/theme/osparcdark/Color.js  | 4 ++--
 source/class/osparc/theme/osparclight/Color.js | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/source/class/osparc/theme/osparcdark/Color.js b/source/class/osparc/theme/osparcdark/Color.js
index 775babf7..0eea9a63 100755
--- a/source/class/osparc/theme/osparcdark/Color.js
+++ b/source/class/osparc/theme/osparcdark/Color.js
@@ -104,8 +104,8 @@ qx.Theme.define("osparc.theme.osparcdark.Color", {
     "text-selected": "#f0f0f0",
     "text-placeholder": "text-disabled",
     "text-darker": "text-disabled",
-    "contrasted-text-dark": "#222222",
-    "contrasted-text-light": "#EEEEEE",
+    // "contrasted-text-dark": "#222222",
+    // "contrasted-text-light": "#EEEEEE",
 
     // tooltip
     "tooltip": "#808080",
diff --git a/source/class/osparc/theme/osparclight/Color.js b/source/class/osparc/theme/osparclight/Color.js
index d27dacf9..23ec30f8 100644
--- a/source/class/osparc/theme/osparclight/Color.js
+++ b/source/class/osparc/theme/osparclight/Color.js
@@ -104,8 +104,8 @@ qx.Theme.define("osparc.theme.osparclight.Color", {
     "text-selected": "#0F0F0F",
     "text-placeholder": "text-disabled",
     "text-darker": "text-disabled",
-    "contrasted-text-dark": "#DDDDDD",
-    "contrasted-text-light": "#111111",
+    // "contrasted-text-dark": "#DDDDDD",
+    // "contrasted-text-light": "#111111",
 
     // tooltip
     "tooltip": "#7F7F7F",

From 4bba4882dd9c783df9faab2fcac5004c24714d07 Mon Sep 17 00:00:00 2001
From: Ignacio Pascual <4764217+ignapas@users.noreply.github.com>
Date: Tue, 28 Jul 2020 10:30:33 +0200
Subject: [PATCH 8/8] removed osparc specific colors

---
 source/class/osparc/theme/osparcdark/Color.js | 38 +------------------
 .../class/osparc/theme/osparcdark/__init__.js |  4 --
 .../class/osparc/theme/osparclight/Color.js   | 38 +------------------
 3 files changed, 2 insertions(+), 78 deletions(-)
 delete mode 100755 source/class/osparc/theme/osparcdark/__init__.js

diff --git a/source/class/osparc/theme/osparcdark/Color.js b/source/class/osparc/theme/osparcdark/Color.js
index 0eea9a63..f5e3cb58 100755
--- a/source/class/osparc/theme/osparcdark/Color.js
+++ b/source/class/osparc/theme/osparcdark/Color.js
@@ -104,8 +104,6 @@ qx.Theme.define("osparc.theme.osparcdark.Color", {
     "text-selected": "#f0f0f0",
     "text-placeholder": "text-disabled",
     "text-darker": "text-disabled",
-    // "contrasted-text-dark": "#222222",
-    // "contrasted-text-light": "#EEEEEE",
 
     // tooltip
     "tooltip": "#808080",
@@ -139,40 +137,6 @@ qx.Theme.define("osparc.theme.osparcdark.Color", {
     "progressive-progressbar-indicator-done": "#222",
     "progressive-progressbar-indicator-undone": "#333",
     "progressive-progressbar-percent-background": "#000",
-    "progressive-progressbar-percent-text": "#333",
-
-
-    /*
-    ---------------------------------------------------------------------------
-      OSPARC RELATED
-    ---------------------------------------------------------------------------
-    */
-    // "workbench-edge-comp-active": "#777777",
-    // "workbench-edge-api-active": "#BBBBBB",
-    // "workbench-edge-selected": "#0000FF",
-    // "workbench-start-hint": "#505050",
-
-    // "node-selected-background": "#666666",
-    // "node-title-text": "#DCDCDC",
-    // "node-port-text": "#BABABA",
-
-    // "logger-debug-message": "#FFFFFF",
-    // "logger-info-message": "#FFFFFF",
-    // "logger-warning-message": "#FFFF00",
-    // "logger-error-message": "#FF0000",
-
-    // "service-window-hint": "#808080",
-
-    // "activitytree-background-cpu": "#2C7CCE",
-    // "activitytree-background-memory": "#358475",
-
-    // "ready-green": "#33925A",
-    // "failed-red": "#FF2D2D",
-
-    // "progressbar": "#60909e",
-
-    // "loading-page-background-color": "#202020",
-    // "loading-page-text": "#FFFFFF",
-    // "loading-page-spinner": "#DDDDDD"
+    "progressive-progressbar-percent-text": "#333"
   }
 });
diff --git a/source/class/osparc/theme/osparcdark/__init__.js b/source/class/osparc/theme/osparcdark/__init__.js
deleted file mode 100755
index 79b213f4..00000000
--- a/source/class/osparc/theme/osparcdark/__init__.js
+++ /dev/null
@@ -1,4 +0,0 @@
-/**
- * osparc.theme.osparcdark package
- *
- */
diff --git a/source/class/osparc/theme/osparclight/Color.js b/source/class/osparc/theme/osparclight/Color.js
index 23ec30f8..2e14311d 100644
--- a/source/class/osparc/theme/osparclight/Color.js
+++ b/source/class/osparc/theme/osparclight/Color.js
@@ -104,8 +104,6 @@ qx.Theme.define("osparc.theme.osparclight.Color", {
     "text-selected": "#0F0F0F",
     "text-placeholder": "text-disabled",
     "text-darker": "text-disabled",
-    // "contrasted-text-dark": "#DDDDDD",
-    // "contrasted-text-light": "#111111",
 
     // tooltip
     "tooltip": "#7F7F7F",
@@ -139,40 +137,6 @@ qx.Theme.define("osparc.theme.osparclight.Color", {
     "progressive-progressbar-indicator-done": "#DDDDDD",
     "progressive-progressbar-indicator-undone": "#CCCCCC",
     "progressive-progressbar-percent-background": "#FFFFFF",
-    "progressive-progressbar-percent-text": "#CCCCCC",
-
-
-    /*
-    ---------------------------------------------------------------------------
-      OSPARC RELATED
-    ---------------------------------------------------------------------------
-    */
-    // "workbench-edge-comp-active": "#888888",
-    // "workbench-edge-api-active": "#444444",
-    // "workbench-edge-selected": "#FFFF00",
-    // "workbench-start-hint": "#AFAFAF",
-
-    // "node-selected-background": "#999999",
-    // "node-title-text": "#232323",
-    // "node-port-text": "#454545",
-
-    // "logger-debug-message": "#000000",
-    // "logger-info-message": "#000000",
-    // "logger-warning-message": "#FFFF00",
-    // "logger-error-message": "#FF0000",
-
-    // "service-window-hint": "#7F7F7F",
-
-    // "activitytree-background-cpu": "#D38331",
-    // "activitytree-background-memory": "#CA7B8A",
-
-    // "ready-green": "#33925A",
-    // "failed-red": "#FF2D2D",
-
-    // "progressbar": "#9F6F61",
-
-    // "loading-page-background-color": "background-main",
-    // "loading-page-text": "#000000",
-    // "loading-page-spinner": "#222222"
+    "progressive-progressbar-percent-text": "#CCCCCC"
   }
 });