From 1de06f1f4dfe9f453506d23587e384d92a0210da Mon Sep 17 00:00:00 2001
From: odeimaiz <maiz@itis.swiss>
Date: Mon, 26 Jul 2021 14:46:07 +0200
Subject: [PATCH 01/12] osparcportal theme removed

---
 source/class/osparc/theme/OSparcPortal.js     |  31 ---
 .../class/osparc/theme/osparcportal/Color.js  |  76 -------
 .../class/osparc/theme/osparcportal/Font.js   | 206 ------------------
 3 files changed, 313 deletions(-)
 delete mode 100644 source/class/osparc/theme/OSparcPortal.js
 delete mode 100644 source/class/osparc/theme/osparcportal/Color.js
 delete mode 100644 source/class/osparc/theme/osparcportal/Font.js

diff --git a/source/class/osparc/theme/OSparcPortal.js b/source/class/osparc/theme/OSparcPortal.js
deleted file mode 100644
index b003e9bf..00000000
--- a/source/class/osparc/theme/OSparcPortal.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/* ************************************************************************
-
-  OSparc Light Theme for Qooxdoo
-
-  Copyright:
-     2020 IT'IS Foundation
-
-  License:
-     MIT: https://opensource.org/licenses/MIT
-     See the LICENSE file in the project's top-level directory for details.
-
-  Authors:
-    * Odei Maiz (odeimaiz)
-
-  Origin:
-    This theme is based in large parts on the the Simple
-    theme included with Qooxdoo.
-************************************************************************ */
-/**
- * Simple Theme
- */
-qx.Theme.define("osparc.theme.OSparcPortal", {
-  title: "OSparc Portal Theme",
-  meta: {
-    color: osparc.theme.osparcportal.Color,
-    decoration: osparc.theme.common.Decoration,
-    font: osparc.theme.osparcportal.Font,
-    appearance: osparc.theme.common.Appearance,
-    icon: qx.theme.icon.Tango
-  }
-});
diff --git a/source/class/osparc/theme/osparcportal/Color.js b/source/class/osparc/theme/osparcportal/Color.js
deleted file mode 100644
index 4b21c4b9..00000000
--- a/source/class/osparc/theme/osparcportal/Color.js
+++ /dev/null
@@ -1,76 +0,0 @@
-/* ************************************************************************
-
-  Sparc Portal Theme for Qooxdoo
-
-  Copyright:
-     2020 IT'IS Foundation
-
-  License:
-     MIT: https://opensource.org/licenses/MIT
-     See the LICENSE file in the project's top-level directory for details.
-
-  Authors:
-    * Odei Maiz (odeimaiz)
-
-  Origin:
-    This theme is based in large parts on the the Simple
-    theme included with Qooxdoo.
-************************************************************************ */
-/**
- * Based on osparcdark inverted colors
- */
-qx.Theme.define("osparc.theme.osparcportal.Color", {
-  extend: osparc.theme.osparcblue.Color,
-
-  colors: {
-    // ----------------- GAZELLE-CX -----------------
-    // Primary Colors
-    "gzl-primary-1": "#8300BF", // Repeating major elements across the site like links and buttons
-    "gzl-primary-2": "#24245B", // Repeating major elements across the site like heros and header text
-    "gzl-primary-3": "#60626C", // Typography and icons (bug in orignal document)
-
-    // Secondary Colors
-    "gzl-secondary-1": "#BC00FC", // Decorative elements such as illustrations (bug in orignal document)
-    "gzl-secondary-2": "#0026FF", // Decorative elements such as illustrations
-
-    // Status Colors
-    "gzl-status-success": "#00E66B", // Confirmation messages
-    "gzl-status-warning": "#FF8400", // To warn users of potentially harmful situation
-    "gzl-status-error": "#b51d09", // Error messages and confirmation for deletion
-
-    // Text Colors
-    "gzl-text-body": "#303133", // Body text
-    "gzl-text-footer": "#606266", // Footer text
-    "gzl-text-ghost": "#909399", // Labels and ghost text
-
-    // Line Colors
-    "gzl-line-card": "#DCDFE6", // Cards
-    "gzl-line-dividers": "#E4E7ED", // Table dividers/breadcrumb backgrounds
-
-    // Background Colors
-    // "gzl-background": "#F5F7FA",
-    "gzl-background": "#FFFFFF",
-    // ----------------- GAZELLE-CX -----------------
-
-    "secondary-3": "#909399",
-
-
-    // main
-    "background-main": "gzl-background",
-    "primary-color": "gzl-primary-1",
-    "primary-color-light": "gzl-primary-3",
-    "primary-color-dark": "gzl-primary-2",
-    "secondary-color": "gzl-secondary-2",
-    "secondary-color-light": "secondary-3",
-    "secondary-color-dark": "gzl-secondary-1",
-    "contrasted-background": "gzl-background",
-    "invalid-color": "gzl-status-error",
-    "text": "gzl-text-body",
-    "text-disabled": "gzl-text-ghost",
-    "text-selected": "#FFFFFF",
-    "text-placeholder": "gzl-text-ghost",
-    "text-darker": "gzl-text-ghost",
-    "contrasted-text-dark": "gzl-line-dividers",
-    "contrasted-text-light": "gzl-text-body"
-  }
-});
diff --git a/source/class/osparc/theme/osparcportal/Font.js b/source/class/osparc/theme/osparcportal/Font.js
deleted file mode 100644
index b289bc84..00000000
--- a/source/class/osparc/theme/osparcportal/Font.js
+++ /dev/null
@@ -1,206 +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.osparcportal.Font", {
-  extend: osparc.theme.common.Font,
-
-  fonts: {
-    "default": {
-      size: 13,
-      family: ["sans-serif"],
-      color: "text",
-      sources: [
-        {
-          family: "Asap",
-          source: [
-            "osparc/theme/font/Asap/Asap-Regular.ttf"
-          ]
-        }
-      ]
-    },
-
-    "bold": {
-      size: 13,
-      family: ["sans-serif"],
-      bold: true,
-      color: "text",
-      sources: [
-        {
-          family: "Asap",
-          source: [
-            "osparc/theme/font/Asap/Asap-Bold.ttf"
-          ]
-        }
-      ]
-    },
-
-    "headline": {
-      size: 24,
-      family: ["sans-serif"],
-      color: "text",
-      sources: [
-        {
-          family: "Asap",
-          source: [
-            "osparc/theme/font/Asap/Asap-Regular.ttf"
-          ]
-        }
-      ]
-    },
-
-    "monospace": {
-      size: 14,
-      family: ["monospace"],
-      color: "text",
-      sources: [
-        {
-          family: "Asap Mono",
-          source: [
-            "osparc/theme/font/Asap/Asap-Regular.ttf"
-          ]
-        }
-      ]
-    },
-
-    "nav-bar-label": {
-      size: 20,
-      family: ["Asap"],
-      color: "text",
-      bold: true
-    },
-
-    "title-18": {
-      size: 18,
-      family: ["Asap"],
-      color: "text",
-      bold: true
-    },
-
-    "text-18": {
-      size: 18,
-      family: ["Asap"],
-      color: "text"
-    },
-
-    "title-16": {
-      size: 16,
-      family: ["Asap"],
-      color: "text",
-      bold: true
-    },
-
-    "text-16": {
-      size: 16,
-      family: ["Asap"],
-      color: "text"
-    },
-
-    "title-14": {
-      size: 14,
-      family: ["Asap"],
-      color: "text",
-      bold: true
-    },
-
-    "text-14": {
-      size: 14,
-      family: ["Asap"],
-      color: "text"
-    },
-
-    "title-13": {
-      size: 13,
-      family: ["Asap", "sans-serif"],
-      color: "text",
-      bold: true
-    },
-
-    "text-13": {
-      size: 13,
-      family: ["Asap", "sans-serif"],
-      color: "text"
-    },
-
-    "title-12": {
-      size: 12,
-      family: ["Asap"],
-      color: "text",
-      bold: true
-    },
-
-    "text-12": {
-      size: 12,
-      family: ["Asap"],
-      color: "text"
-    },
-
-    "link-label": {
-      size: 12,
-      family: ["Asap"],
-      color: "text-darker",
-      decoration: "underline"
-    },
-
-    "text-12-italic": {
-      size: 12,
-      family: ["Asap"],
-      color: "text",
-      italic: true
-    },
-
-    "text-11": {
-      size: 11,
-      family: ["Asap"],
-      color: "text"
-    },
-
-    "text-10": {
-      size: 10,
-      family: ["Asap"],
-      color: "text"
-    },
-
-    "text-9": {
-      size: 9,
-      family: ["Asap"],
-      color: "text"
-    },
-
-    "text-8-italic": {
-      size: 8,
-      family: ["Asap"],
-      color: "text",
-      italic: true
-    },
-
-    "workbench-start-hint": {
-      size: 20,
-      family: ["Asap"],
-      color: "text-disabled",
-      bold: true
-    },
-
-    "workbench-io-label": {
-      size: 20,
-      family: ["monospace"],
-      color: "text-disabled",
-      bold: true
-    }
-  }
-});

From e1ea54a804fe842a57b6753b05677a2a15940314 Mon Sep 17 00:00:00 2001
From: odeimaiz <maiz@itis.swiss>
Date: Mon, 26 Jul 2021 14:47:32 +0200
Subject: [PATCH 02/12] Color assignment updated

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

diff --git a/source/class/osparc/theme/osparcdark/Color.js b/source/class/osparc/theme/osparcdark/Color.js
index d7a3d55a..04d6bc7f 100644
--- a/source/class/osparc/theme/osparcdark/Color.js
+++ b/source/class/osparc/theme/osparcdark/Color.js
@@ -21,126 +21,146 @@
  */
 qx.Theme.define("osparc.theme.osparcdark.Color", {
   colors: {
+    "c00": "#000000",
+    "c01": "#202020",
+    "c02": "#303030",
+    "c03": "#404040",
+    "c04": "#505050",
+    "c05": "#606060",
+    "c06": "#707070",
+    "c07": "#808080",
+    "c08": "#909090",
+    "c09": "#A0A0A0",
+    "c10": "#B0B0B0",
+    "c11": "#C0C0C0",
+    "c12": "#D0D0D0",
+    "c13": "#FFFFFF",
+
+    "a-bit-transparent": "rgba(0, 0, 0, 0.4)",
+    "invalid-red": "#a04040",
+
+
     // main
-    "background-main": "#202020",
-    "background-main-lighter": "#303030",
-    "background-main-lighter+": "#373737",
-    "contrasted-background": "#444",
-    "contrasted-background+": "#555555",
+    "background-main": "c01",
+    "background-main-lighter": "c02",
+    "background-main-lighter+": "c03",
+    "contrasted-background": "c04",
+    "contrasted-background+": "c05",
+    "contrasted-background++": "c06",
 
     // text
-    "text": "#bfbfbf",
-    "text-disabled": "#808080",
-    "text-selected": "#f0f0f0",
-    "text-placeholder": "text-disabled",
-    "text-darker": "text-disabled",
-    "contrasted-text-dark": "#222222",
-    "contrasted-text-light": "#EEEEEE",
-    "link": "#aaa",
+    "text": "c11",
+    "text-disabled": "c07",
+    "text-selected": "c12",
+    "text-placeholder": "c07",
+    "text-darker": "c07",
+    "contrasted-text-dark": "c01",
+    "contrasted-text-light": "c12",
+    "link": "c08",
 
     // shadows
-    "bg-shadow": "#666666",
-    "shadow": qx.core.Environment.get("css.rgba") ? "rgba(0, 0, 0, 0.4)" : "bg-shadow",
+    "bg-shadow": "c06",
+    "shadow": qx.core.Environment.get("css.rgba") ? "a-bit-transparent" : "bg-shadow",
 
     // window
-    "window-caption-background": "background-main",
-    "window-caption-background-active": "contrasted-background",
-    "window-caption-text": "text",
-    "window-caption-text-active": "text-selected",
+    "window-caption-background": "c01",
+    "window-caption-background-active": "c04",
+    "window-caption-text": "c11",
+    "window-caption-text-active": "c12",
 
     // material-button
-    "material-button-background": "#404040",
-    "material-button-background-disabled": "#303030",
-    "material-button-background-hovered": "#505050",
-    "material-button-background-pressed": "#505050",
-    "material-button-text-disabled": "text-disabled",
-    "material-button-text": "text",
+    "material-button-background": "c03",
+    "material-button-background-disabled": "c01",
+    "material-button-background-hovered": "c05",
+    "material-button-background-pressed": "c05",
+    "material-button-text-disabled": "c07",
+    "material-button-text": "c11",
 
     // material-textfield
-    "material-textfield": "#808080",
-    "material-textfield-focused": "#e0e0e0",
-    "material-textfield-disabled": "#555",
-    "material-textfield-invalid": "#a04040",
-    "invalid": "material-textfield-invalid",
+    "material-textfield": "c07",
+    "material-textfield-focused": "c11",
+    "material-textfield-disabled": "c05",
+    "material-textfield-invalid": "invalid-red",
+    "invalid": "invalid-red",
 
     // backgrounds
-    "background-selected": "#555",
-    "background-selected-disabled": "#333",
-    "background-selected-dark": "#444",
-    "background-disabled": "background-main",
-    "background-disabled-checked": "#333",
-    "background-pane": "#222",
+    "background-selected": "c05",
+    "background-selected-disabled": "c02",
+    "background-selected-dark": "c04",
+    "background-disabled": "c01",
+    "background-disabled-checked": "c02",
+    "background-pane": "c01",
 
     // tabview
-    "tabview-unselected": "#ffffff",
-    "tabview-button-border": "#ffffff",
-    "tabview-label-active-disabled": "#d9d9d9",
-    "tabview-pane-background": "background-main",
+    "tabview-unselected": "c13",
+    "tabview-button-border": "c13",
+    "tabview-label-active-disabled": "c10",
+    "tabview-pane-background": "c01",
     "tabview-button-background": "transparent",
 
     // scrollbar
-    "scrollbar-passive": "#333",
-    "scrollbar-active": "#444",
+    "scrollbar-passive": "c02",
+    "scrollbar-active": "c04",
 
     // form
-    "button": "#555",
-    "button-border": "bg-shadow",
-    "button-border-hovered": "#888",
-    "button-box": "#444",
-    "button-box-pressed": "#555",
-    "border-lead": "#888888",
+    "button": "c05",
+    "button-border": "c06",
+    "button-border-hovered": "c07",
+    "button-box": "c04",
+    "button-box-pressed": "c05",
+    "border-lead": "c07",
 
     // window
-    "window-border": "#444",
-    "window-border-inner": "#222",
+    "window-border": "c04",
+    "window-border-inner": "c01",
 
     // group box
-    "white-box-border": "#404040",
+    "white-box-border": "c03",
 
     // borders
     // 'border-main' is an alias of 'background-selected' (compatibility reasons)
-    "border": "#484848",
-    "border-focused": "#B7B7B7",
-    "border-invalid": "material-textfield-invalid",
-    "border-disabled": "#222",
+    "border": "c04",
+    "border-focused": "c09",
+    "border-invalid": "invalid-red",
+    "border-disabled": "c01",
 
     // separator
-    "border-separator": "#808080",
+    "border-separator": "c07",
 
     // tooltip
-    "tooltip": "#808080",
-    "tooltip-text": "#f0f0f0",
+    "tooltip": "c07",
+    "tooltip-text": "c12",
 
     // table
-    "table-header": "background-main",
-    "table-header-foreground": "text",
-    "table-header-border": "#888",
-    "table-focus-indicator": "#757575",
+    "table-header": "c01",
+    "table-header-foreground": "c09",
+    "table-header-border": "c07",
+    "table-focus-indicator": "c06",
 
     // used in table code
-    "table-header-cell": "#202020",
-    "table-row-background-focused-selected": "#565656",
-    "table-row-background-focused": "#454545",
-    "table-row-background-selected": "#565656",
-    "table-row-background-even": "#202020",
-    "table-row-background-odd": "#303030",
+    "table-header-cell": "c01",
+    "table-row-background-focused-selected": "c05",
+    "table-row-background-focused": "c04",
+    "table-row-background-selected": "c05",
+    "table-row-background-even": "c01",
+    "table-row-background-odd": "c01",
 
     // foreground
-    "table-row-selected": "#f0f0f0",
-    "table-row": "#bfbfbf",
+    "table-row-selected": "c12",
+    "table-row": "c09",
 
     // table grid color
-    "table-row-line": "#222",
-    "table-column-line": "#222",
+    "table-row-line": "c01",
+    "table-column-line": "c01",
 
     // used in progressive code
-    "progressive-table-header": "#AAAAAA",
-    "progressive-table-row-background-even": "#202020",
-    "progressive-table-row-background-odd": "#303030",
-    "progressive-progressbar-background": "#000",
-    "progressive-progressbar-indicator-done": "#222",
-    "progressive-progressbar-indicator-undone": "#333",
-    "progressive-progressbar-percent-background": "#000",
-    "progressive-progressbar-percent-text": "#333"
+    "progressive-table-header": "c08",
+    "progressive-table-row-background-even": "c01",
+    "progressive-table-row-background-odd": "c01",
+    "progressive-progressbar-background": "c00",
+    "progressive-progressbar-indicator-done": "c01",
+    "progressive-progressbar-indicator-undone": "c02",
+    "progressive-progressbar-percent-background": "c00",
+    "progressive-progressbar-percent-text": "c02"
   }
 });
diff --git a/source/class/osparc/theme/osparclight/Color.js b/source/class/osparc/theme/osparclight/Color.js
index a609776b..3fb90a0b 100644
--- a/source/class/osparc/theme/osparclight/Color.js
+++ b/source/class/osparc/theme/osparclight/Color.js
@@ -21,126 +21,146 @@
  */
 qx.Theme.define("osparc.theme.osparclight.Color", {
   colors: {
+    "c00": "#FFFFFF",
+    "c01": "#EFEFEF",
+    "c02": "#C0C0C0",
+    "c03": "#B0B0B0",
+    "c04": "#A0A0A0",
+    "c05": "#909090",
+    "c06": "#808080",
+    "c07": "#707070",
+    "c08": "#606060",
+    "c09": "#505050",
+    "c10": "#404040",
+    "c11": "#303030",
+    "c12": "#202020",
+    "c13": "#000000",
+
+    "a-bit-transparent": "rgba(255, 255, 255, 0.4)",
+    "invalid-red": "#a04040",
+
+
     // main
-    "background-main": "#FFFFFF",
-    "background-main-lighter": "#CFCFCF",
-    "background-main-lighter+": "#C8C8C8",
-    "contrasted-background": "#BBBBBB",
-    "contrasted-background+": "#AAAAAA",
+    "background-main": "c01",
+    "background-main-lighter": "c02",
+    "background-main-lighter+": "c03",
+    "contrasted-background": "c04",
+    "contrasted-background+": "c05",
+    "contrasted-background++": "c06",
 
     // text
-    "text": "#404040",
-    "text-disabled": "#7F7F7F",
-    "text-selected": "#0F0F0F",
-    "text-placeholder": "text-disabled",
-    "text-darker": "text-disabled",
-    "contrasted-text-dark": "#DDDDDD",
-    "contrasted-text-light": "#111111",
-    "link": "#555555",
+    "text": "c11",
+    "text-disabled": "c07",
+    "text-selected": "c12",
+    "text-placeholder": "c07",
+    "text-darker": "c07",
+    "contrasted-text-dark": "c01",
+    "contrasted-text-light": "c12",
+    "link": "c08",
 
     // shadows
-    "bg-shadow": "#999999",
-    "shadow": qx.core.Environment.get("css.rgba") ? "rgba(1.0, 1.0, 1.0, 0.4)" : "bg-shadow",
+    "bg-shadow": "c06",
+    "shadow": qx.core.Environment.get("css.rgba") ? "a-bit-transparent" : "bg-shadow",
 
     // window
-    "window-caption-background": "background-main",
-    "window-caption-background-active": "contrasted-background",
-    "window-caption-text": "text",
-    "window-caption-text-active": "text-selected",
+    "window-caption-background": "c01",
+    "window-caption-background-active": "c04",
+    "window-caption-text": "c11",
+    "window-caption-text-active": "c12",
 
     // material-button
-    "material-button-background": "#BFBFBF",
-    "material-button-background-disabled": "#CFCFCF",
-    "material-button-background-hovered": "#AFAFAF",
-    "material-button-background-pressed": "#AFAFAF",
-    "material-button-text-disabled": "text-disabled",
-    "material-button-text": "text",
+    "material-button-background": "c03",
+    "material-button-background-disabled": "c01",
+    "material-button-background-hovered": "c05",
+    "material-button-background-pressed": "c05",
+    "material-button-text-disabled": "c07",
+    "material-button-text": "c11",
 
     // material-textfield
-    "material-textfield": "#7F7F7F",
-    "material-textfield-focused": "#1F1F1F",
-    "material-textfield-disabled": "#AAAAAA",
-    "material-textfield-invalid": "#5FBFBF",
-    "invalid": "material-textfield-invalid",
+    "material-textfield": "c07",
+    "material-textfield-focused": "c11",
+    "material-textfield-disabled": "c05",
+    "material-textfield-invalid": "invalid-red",
+    "invalid": "invalid-red",
 
     // backgrounds
-    "background-selected": "#AAAAAA",
-    "background-selected-disabled": "#CCCCCC",
-    "background-selected-dark": "#BBBBBB",
-    "background-disabled": "background-main",
-    "background-disabled-checked": "#CCCCCC",
-    "background-pane": "#DDDDDD",
+    "background-selected": "c05",
+    "background-selected-disabled": "c02",
+    "background-selected-dark": "c04",
+    "background-disabled": "c01",
+    "background-disabled-checked": "c02",
+    "background-pane": "c01",
 
     // tabview
-    "tabview-unselected": "#000000",
-    "tabview-button-border": "#000000",
-    "tabview-label-active-disabled": "#262626",
-    "tabview-pane-background": "background-main",
+    "tabview-unselected": "c13",
+    "tabview-button-border": "c13",
+    "tabview-label-active-disabled": "c10",
+    "tabview-pane-background": "c01",
     "tabview-button-background": "transparent",
 
     // scrollbar
-    "scrollbar-passive": "#CCCCCC",
-    "scrollbar-active": "#BBBBBB",
+    "scrollbar-passive": "c02",
+    "scrollbar-active": "c04",
 
     // form
-    "button": "#AAAAAA",
-    "button-border": "bg-shadow",
-    "button-border-hovered": "#777777",
-    "button-box": "#BBBBBB",
-    "button-box-pressed": "#AAAAAA",
-    "border-lead": "#777777",
+    "button": "c05",
+    "button-border": "c06",
+    "button-border-hovered": "c07",
+    "button-box": "c04",
+    "button-box-pressed": "c05",
+    "border-lead": "c07",
 
     // window
-    "window-border": "#BBBBBB",
-    "window-border-inner": "#DDDDDD",
+    "window-border": "c04",
+    "window-border-inner": "c01",
 
     // group box
-    "white-box-border": "#BFBFBF",
+    "white-box-border": "c03",
 
     // borders
     // 'border-main' is an alias of 'background-selected' (compatibility reasons)
-    "border": "#B7B7B7",
-    "border-focused": "#484848",
-    "border-invalid": "material-textfield-invalid",
-    "border-disabled": "#DDDDDD",
+    "border": "c04",
+    "border-focused": "c09",
+    "border-invalid": "invalid-red",
+    "border-disabled": "c01",
 
     // separator
-    "border-separator": "#7F7F7F",
+    "border-separator": "c07",
 
     // tooltip
-    "tooltip": "#7F7F7F",
-    "tooltip-text": "#0F0F0F",
+    "tooltip": "c07",
+    "tooltip-text": "c12",
 
     // table
-    "table-header": "background-main",
-    "table-header-foreground": "text",
-    "table-header-border": "#777777",
-    "table-focus-indicator": "#8A8A8A",
+    "table-header": "c01",
+    "table-header-foreground": "c09",
+    "table-header-border": "c07",
+    "table-focus-indicator": "c06",
 
     // used in table code
-    "table-header-cell": "#DFDFDF",
-    "table-row-background-focused-selected": "#A9A9A9",
-    "table-row-background-focused": "#BABABA",
-    "table-row-background-selected": "#A9A9A9",
-    "table-row-background-even": "#DFDFDF",
-    "table-row-background-odd": "#CFCFCF",
+    "table-header-cell": "c01",
+    "table-row-background-focused-selected": "c05",
+    "table-row-background-focused": "c04",
+    "table-row-background-selected": "c05",
+    "table-row-background-even": "c01",
+    "table-row-background-odd": "c01",
 
     // foreground
-    "table-row-selected": "#0F0F0F",
-    "table-row": "#404040",
+    "table-row-selected": "c12",
+    "table-row": "c09",
 
     // table grid color
-    "table-row-line": "#DDDDDD",
-    "table-column-line": "#DDDDDD",
+    "table-row-line": "c01",
+    "table-column-line": "c01",
 
     // used in progressive code
-    "progressive-table-header": "#555555",
-    "progressive-table-row-background-even": "#DFDFDF",
-    "progressive-table-row-background-odd": "#CFCFCF",
-    "progressive-progressbar-background": "#FFFFFF",
-    "progressive-progressbar-indicator-done": "#DDDDDD",
-    "progressive-progressbar-indicator-undone": "#CCCCCC",
-    "progressive-progressbar-percent-background": "#FFFFFF",
-    "progressive-progressbar-percent-text": "#CCCCCC"
+    "progressive-table-header": "c08",
+    "progressive-table-row-background-even": "c01",
+    "progressive-table-row-background-odd": "c01",
+    "progressive-progressbar-background": "c00",
+    "progressive-progressbar-indicator-done": "c01",
+    "progressive-progressbar-indicator-undone": "c02",
+    "progressive-progressbar-percent-background": "c00",
+    "progressive-progressbar-percent-text": "c02"
   }
 });

From cb66ccfefd578214a9e91746f90cb1cd231abcac Mon Sep 17 00:00:00 2001
From: odeimaiz <maiz@itis.swiss>
Date: Mon, 26 Jul 2021 14:48:56 +0200
Subject: [PATCH 03/12] minor version updated

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

diff --git a/Manifest.json b/Manifest.json
index 6147c78d..6f204da6 100644
--- a/Manifest.json
+++ b/Manifest.json
@@ -11,7 +11,7 @@
         "email": "tobi@itis.swiss"
       }
     ],
-    "version": "0.5.6"
+    "version": "0.6.0"
   },
   "provides": {
     "namespace": "osparc.theme",

From fddf611b43fc633e5f8e4b6c5d3f7d055498a0e9 Mon Sep 17 00:00:00 2001
From: odeimaiz <maiz@itis.swiss>
Date: Mon, 26 Jul 2021 15:17:07 +0200
Subject: [PATCH 04/12] purple color assignment updated

---
 source/class/osparc/theme/osparcdark/Color.js |   2 +-
 .../class/osparc/theme/osparclight/Color.js   |   2 +-
 source/class/osparc/theme/purple/Color.js     | 180 ++++++++++--------
 3 files changed, 102 insertions(+), 82 deletions(-)

diff --git a/source/class/osparc/theme/osparcdark/Color.js b/source/class/osparc/theme/osparcdark/Color.js
index 04d6bc7f..82b51766 100644
--- a/source/class/osparc/theme/osparcdark/Color.js
+++ b/source/class/osparc/theme/osparcdark/Color.js
@@ -70,7 +70,7 @@ qx.Theme.define("osparc.theme.osparcdark.Color", {
 
     // material-button
     "material-button-background": "c03",
-    "material-button-background-disabled": "c01",
+    "material-button-background-disabled": "c02",
     "material-button-background-hovered": "c05",
     "material-button-background-pressed": "c05",
     "material-button-text-disabled": "c07",
diff --git a/source/class/osparc/theme/osparclight/Color.js b/source/class/osparc/theme/osparclight/Color.js
index 3fb90a0b..a0718702 100644
--- a/source/class/osparc/theme/osparclight/Color.js
+++ b/source/class/osparc/theme/osparclight/Color.js
@@ -70,7 +70,7 @@ qx.Theme.define("osparc.theme.osparclight.Color", {
 
     // material-button
     "material-button-background": "c03",
-    "material-button-background-disabled": "c01",
+    "material-button-background-disabled": "c02",
     "material-button-background-hovered": "c05",
     "material-button-background-pressed": "c05",
     "material-button-text-disabled": "c07",
diff --git a/source/class/osparc/theme/purple/Color.js b/source/class/osparc/theme/purple/Color.js
index 0476e825..b84973d1 100644
--- a/source/class/osparc/theme/purple/Color.js
+++ b/source/class/osparc/theme/purple/Color.js
@@ -19,126 +19,146 @@
 
 qx.Theme.define("osparc.theme.purple.Color", {
   colors: {
+    "c00": "#000000",
+    "c01": "#202020",
+    "c02": "#24517b",
+    "c03": "#315E88",
+    "c04": "#3E6B95",
+    "c05": "#4A77A1",
+    "c06": "#707070",
+    "c07": "#808080",
+    "c08": "#909090",
+    "c09": "#A0A0A0",
+    "c10": "#B0B0B0",
+    "c11": "#C0C0C0",
+    "c12": "#D0D0D0",
+    "c13": "#FFFFFF",
+
+    "a-bit-transparent": "rgba(0, 0, 0, 0.4)",
+    "invalid-red": "#a04040",
+
+
     // main
-    "background-main": "#202020", // background
-    "background-main-lighter": "#24517b", // navbar bg
-    "background-main-lighter+": "#315E88", // dashboard button
-    "contrasted-background": "#3E6B95", // dashboard button hovered
-    "contrasted-background+": "#4A77A1", // dashboard button pressed
+    "background-main": "c01",
+    "background-main-lighter": "c02",
+    "background-main-lighter+": "c03",
+    "contrasted-background": "c04",
+    "contrasted-background+": "c05",
+    "contrasted-background++": "c06",
 
     // text
-    "text": "#bfbfbf",
-    "text-disabled": "#808080",
-    "text-selected": "#f0f0f0",
-    "text-placeholder": "text-disabled",
-    "text-darker": "text-disabled",
-    "contrasted-text-dark": "#222222",
-    "contrasted-text-light": "#EEEEEE",
-    "link": "#aaaaaa",
+    "text": "c11",
+    "text-disabled": "c07",
+    "text-selected": "c12",
+    "text-placeholder": "c07",
+    "text-darker": "c07",
+    "contrasted-text-dark": "c01",
+    "contrasted-text-light": "c12",
+    "link": "c08",
 
     // shadows
-    "bg-shadow": "#666666",
-    "shadow": qx.core.Environment.get("css.rgba") ? "rgba(1.0, 1.0, 1.0, 0.4)" : "bg-shadow",
+    "bg-shadow": "c06",
+    "shadow": qx.core.Environment.get("css.rgba") ? "a-bit-transparent" : "bg-shadow",
 
     // window
-    "window-caption-background": "background-main",
-    "window-caption-background-active": "contrasted-background",
-    "window-caption-text": "text",
-    "window-caption-text-active": "text-selected",
+    "window-caption-background": "c01",
+    "window-caption-background-active": "c04",
+    "window-caption-text": "c11",
+    "window-caption-text-active": "c12",
 
     // material-button
-    "material-button-background": "background-main-lighter+",
-    "material-button-background-disabled": "background-main-lighter",
-    "material-button-background-hovered": "contrasted-background+",
-    "material-button-background-pressed": "contrasted-background+",
-    "material-button-text-disabled": "text-disabled",
-    "material-button-text": "text",
+    "material-button-background": "c03",
+    "material-button-background-disabled": "c02",
+    "material-button-background-hovered": "c05",
+    "material-button-background-pressed": "c05",
+    "material-button-text-disabled": "c07",
+    "material-button-text": "c11",
 
     // material-textfield
-    "material-textfield": "text-disabled",
-    "material-textfield-focused": "#e0e0e0",
-    "material-textfield-disabled": "contrasted-background+",
-    "material-textfield-invalid": "#a04040",
-    "invalid": "material-textfield-invalid",
+    "material-textfield": "c07",
+    "material-textfield-focused": "c11",
+    "material-textfield-disabled": "c05",
+    "material-textfield-invalid": "invalid-red",
+    "invalid": "invalid-red",
 
     // backgrounds
-    "background-selected": "contrasted-background+",
-    "background-selected-disabled": "background-main-lighter",
-    "background-selected-dark": "contrasted-background",
-    "background-disabled": "background-main",
-    "background-disabled-checked": "background-main-lighter",
-    "background-pane": "background-main",
+    "background-selected": "c05",
+    "background-selected-disabled": "c02",
+    "background-selected-dark": "c04",
+    "background-disabled": "c01",
+    "background-disabled-checked": "c02",
+    "background-pane": "c01",
 
     // tabview
-    "tabview-unselected": "#ffffff",
-    "tabview-button-border": "#ffffff",
-    "tabview-label-active-disabled": "#d9d9d9",
-    "tabview-pane-background": "background-main",
+    "tabview-unselected": "c13",
+    "tabview-button-border": "c13",
+    "tabview-label-active-disabled": "c10",
+    "tabview-pane-background": "c01",
     "tabview-button-background": "transparent",
 
     // scrollbar
-    "scrollbar-passive": "background-main-lighter",
-    "scrollbar-active": "contrasted-background",
+    "scrollbar-passive": "c02",
+    "scrollbar-active": "c04",
 
     // form
-    "button": "contrasted-background+",
-    "button-border": "bg-shadow",
-    "button-border-hovered": "#888888",
-    "button-box": "contrasted-background",
-    "button-box-pressed": "contrasted-background+",
-    "border-lead": "#888888",
+    "button": "c05",
+    "button-border": "c06",
+    "button-border-hovered": "c07",
+    "button-box": "c04",
+    "button-box-pressed": "c05",
+    "border-lead": "c07",
 
     // window
-    "window-border": "contrasted-background",
-    "window-border-inner": "background-main",
+    "window-border": "c04",
+    "window-border-inner": "c01",
 
     // group box
-    "white-box-border": "#404040",
+    "white-box-border": "c03",
 
     // borders
     // 'border-main' is an alias of 'background-selected' (compatibility reasons)
-    "border": "#484848",
-    "border-focused": "#B7B7B7",
-    "border-invalid": "material-textfield-invalid",
-    "border-disabled": "background-main",
+    "border": "c04",
+    "border-focused": "c09",
+    "border-invalid": "invalid-red",
+    "border-disabled": "c01",
 
     // separator
-    "border-separator": "text-disabled",
+    "border-separator": "c07",
 
     // tooltip
-    "tooltip": "text-disabled",
-    "tooltip-text": "text-selected",
+    "tooltip": "c07",
+    "tooltip-text": "c12",
 
     // table
-    "table-header": "background-main",
-    "table-header-foreground": "text",
-    "table-header-border": "#888888",
-    "table-focus-indicator": "#757575",
+    "table-header": "c01",
+    "table-header-foreground": "c09",
+    "table-header-border": "c07",
+    "table-focus-indicator": "c06",
 
     // used in table code
-    "table-header-cell": "background-main",
-    "table-row-background-focused-selected": "#565656",
-    "table-row-background-focused": "#454545",
-    "table-row-background-selected": "#565656",
-    "table-row-background-even": "background-main",
-    "table-row-background-odd": "background-main-lighter",
+    "table-header-cell": "c01",
+    "table-row-background-focused-selected": "c05",
+    "table-row-background-focused": "c04",
+    "table-row-background-selected": "c05",
+    "table-row-background-even": "c01",
+    "table-row-background-odd": "c01",
 
     // foreground
-    "table-row-selected": "text-selected",
-    "table-row": "text",
+    "table-row-selected": "c12",
+    "table-row": "c09",
 
     // table grid color
-    "table-row-line": "background-main",
-    "table-column-line": "background-main",
+    "table-row-line": "c01",
+    "table-column-line": "c01",
 
     // used in progressive code
-    "progressive-table-header": "#AAAAAA",
-    "progressive-table-row-background-even": "background-main",
-    "progressive-table-row-background-odd": "background-main-lighter",
-    "progressive-progressbar-background": "#000000",
-    "progressive-progressbar-indicator-done": "background-main",
-    "progressive-progressbar-indicator-undone": "background-main-lighter",
-    "progressive-progressbar-percent-background": "#000000",
-    "progressive-progressbar-percent-text": "background-main-lighter"
+    "progressive-table-header": "c08",
+    "progressive-table-row-background-even": "c01",
+    "progressive-table-row-background-odd": "c01",
+    "progressive-progressbar-background": "c00",
+    "progressive-progressbar-indicator-done": "c01",
+    "progressive-progressbar-indicator-undone": "c02",
+    "progressive-progressbar-percent-background": "c00",
+    "progressive-progressbar-percent-text": "c02"
   }
 });

From 61931f3b818ab25805201d414a3a18e54bae2f07 Mon Sep 17 00:00:00 2001
From: odeimaiz <maiz@itis.swiss>
Date: Mon, 26 Jul 2021 15:47:19 +0200
Subject: [PATCH 05/12] comments added

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

diff --git a/source/class/osparc/theme/osparcdark/Color.js b/source/class/osparc/theme/osparcdark/Color.js
index 82b51766..1e3e3c32 100644
--- a/source/class/osparc/theme/osparcdark/Color.js
+++ b/source/class/osparc/theme/osparcdark/Color.js
@@ -21,20 +21,21 @@
  */
 qx.Theme.define("osparc.theme.osparcdark.Color", {
   colors: {
-    "c00": "#000000",
-    "c01": "#202020",
-    "c02": "#303030",
-    "c03": "#404040",
-    "c04": "#505050",
-    "c05": "#606060",
-    "c06": "#707070",
-    "c07": "#808080",
-    "c08": "#909090",
-    "c09": "#A0A0A0",
-    "c10": "#B0B0B0",
-    "c11": "#C0C0C0",
-    "c12": "#D0D0D0",
-    "c13": "#FFFFFF",
+    "c00": "#000000", // L=00
+    "c01": "#202020", // L=13
+    "c02": "#303030", // L=19
+    "c03": "#404040", // L=25
+    "c04": "#505050", // L=31
+    "c05": "#606060", // L=38
+    "c06": "#707070", // L=44
+    "c07": "#808080", // L=50
+    "c08": "#909090", // L=56
+    "c09": "#A0A0A0", // L=63
+    "c10": "#B0B0B0", // L=69
+    "c11": "#C0C0C0", // L=75
+    "c12": "#D0D0D0", // L=82
+    "c13": "#EFEFEF", // L=88
+    "c14": "#FFFFFF", // L=100
 
     "a-bit-transparent": "rgba(0, 0, 0, 0.4)",
     "invalid-red": "#a04040",
@@ -92,8 +93,8 @@ qx.Theme.define("osparc.theme.osparcdark.Color", {
     "background-pane": "c01",
 
     // tabview
-    "tabview-unselected": "c13",
-    "tabview-button-border": "c13",
+    "tabview-unselected": "c14",
+    "tabview-button-border": "c14",
     "tabview-label-active-disabled": "c10",
     "tabview-pane-background": "c01",
     "tabview-button-background": "transparent",
diff --git a/source/class/osparc/theme/osparclight/Color.js b/source/class/osparc/theme/osparclight/Color.js
index a0718702..71636e11 100644
--- a/source/class/osparc/theme/osparclight/Color.js
+++ b/source/class/osparc/theme/osparclight/Color.js
@@ -21,20 +21,21 @@
  */
 qx.Theme.define("osparc.theme.osparclight.Color", {
   colors: {
-    "c00": "#FFFFFF",
-    "c01": "#EFEFEF",
-    "c02": "#C0C0C0",
-    "c03": "#B0B0B0",
-    "c04": "#A0A0A0",
-    "c05": "#909090",
-    "c06": "#808080",
-    "c07": "#707070",
-    "c08": "#606060",
-    "c09": "#505050",
-    "c10": "#404040",
-    "c11": "#303030",
-    "c12": "#202020",
-    "c13": "#000000",
+    "c00": "#FFFFFF", // L=100
+    "c01": "#EFEFEF", // L=94
+    "c02": "#C0C0C0", // L=75
+    "c03": "#B0B0B0", // L=69
+    "c04": "#A0A0A0", // L=63
+    "c05": "#909090", // L=56
+    "c06": "#808080", // L=50
+    "c07": "#707070", // L=44
+    "c08": "#606060", // L=38
+    "c09": "#505050", // L=31
+    "c10": "#404040", // L=25
+    "c11": "#303030", // L=19
+    "c12": "#202020", // L=13
+    "c13": "#101010", // L=06
+    "c14": "#000000", // L=00
 
     "a-bit-transparent": "rgba(255, 255, 255, 0.4)",
     "invalid-red": "#a04040",
@@ -92,8 +93,8 @@ qx.Theme.define("osparc.theme.osparclight.Color", {
     "background-pane": "c01",
 
     // tabview
-    "tabview-unselected": "c13",
-    "tabview-button-border": "c13",
+    "tabview-unselected": "c14",
+    "tabview-button-border": "c14",
     "tabview-label-active-disabled": "c10",
     "tabview-pane-background": "c01",
     "tabview-button-background": "transparent",

From 40195cee3f1a274c673eddfa6ef00215cc0a787c Mon Sep 17 00:00:00 2001
From: odeimaiz <maiz@itis.swiss>
Date: Mon, 26 Jul 2021 15:56:54 +0200
Subject: [PATCH 06/12] Purple updated

---
 source/class/osparc/theme/purple/Color.js | 33 ++++++++++++-----------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/source/class/osparc/theme/purple/Color.js b/source/class/osparc/theme/purple/Color.js
index b84973d1..c81eb093 100644
--- a/source/class/osparc/theme/purple/Color.js
+++ b/source/class/osparc/theme/purple/Color.js
@@ -19,20 +19,21 @@
 
 qx.Theme.define("osparc.theme.purple.Color", {
   colors: {
-    "c00": "#000000",
-    "c01": "#202020",
-    "c02": "#24517b",
-    "c03": "#315E88",
-    "c04": "#3E6B95",
-    "c05": "#4A77A1",
-    "c06": "#707070",
-    "c07": "#808080",
-    "c08": "#909090",
-    "c09": "#A0A0A0",
-    "c10": "#B0B0B0",
-    "c11": "#C0C0C0",
-    "c12": "#D0D0D0",
-    "c13": "#FFFFFF",
+    "c00": "#000000", // L=00
+    "c01": "#202020", // L=13
+    "c02": "#05325C", // L=19
+    "c03": "#15426C", // L=25
+    "c04": "#24517b", // L=31
+    "c05": "#36638D", // L=38
+    "c06": "#707070", // L=44
+    "c07": "#808080", // L=50
+    "c08": "#909090", // L=56
+    "c09": "#A0A0A0", // L=63
+    "c10": "#B0B0B0", // L=69
+    "c11": "#C0C0C0", // L=75
+    "c12": "#D0D0D0", // L=82
+    "c13": "#EFEFEF", // L=88
+    "c14": "#FFFFFF", // L=100
 
     "a-bit-transparent": "rgba(0, 0, 0, 0.4)",
     "invalid-red": "#a04040",
@@ -90,8 +91,8 @@ qx.Theme.define("osparc.theme.purple.Color", {
     "background-pane": "c01",
 
     // tabview
-    "tabview-unselected": "c13",
-    "tabview-button-border": "c13",
+    "tabview-unselected": "c14",
+    "tabview-button-border": "c14",
     "tabview-label-active-disabled": "c10",
     "tabview-pane-background": "c01",
     "tabview-button-background": "transparent",

From 83e79315662fce59a388ee3faacad82a19ada6bb Mon Sep 17 00:00:00 2001
From: odeimaiz <maiz@itis.swiss>
Date: Mon, 26 Jul 2021 16:15:55 +0200
Subject: [PATCH 07/12] rename purple to osparcpurple

---
 source/class/osparc/theme/OSparcPurple.js     | 31 +++++++++++++++++++
 .../theme/{purple => osparcpurple}/Color.js   |  4 +--
 2 files changed, 33 insertions(+), 2 deletions(-)
 create mode 100644 source/class/osparc/theme/OSparcPurple.js
 rename source/class/osparc/theme/{purple => osparcpurple}/Color.js (97%)

diff --git a/source/class/osparc/theme/OSparcPurple.js b/source/class/osparc/theme/OSparcPurple.js
new file mode 100644
index 00000000..6e3094bd
--- /dev/null
+++ b/source/class/osparc/theme/OSparcPurple.js
@@ -0,0 +1,31 @@
+/* ************************************************************************
+
+  OSparc Dark Theme for Qooxdoo
+
+  Copyright:
+     2018 IT'IS Foundation
+
+  License:
+     MIT: https://opensource.org/licenses/MIT
+     See the LICENSE file in the project's top-level directory for details.
+
+  Authors:
+    * Tobias Oetiker (oetiker)
+
+  Origin:
+    This theme is based in large parts on the the Simple
+    theme included with Qooxdoo.
+************************************************************************ */
+/**
+ * Simple Theme
+ */
+qx.Theme.define("osparc.theme.OSparcPurple", {
+  title: "OSparc Blue Theme",
+  meta: {
+    color: osparc.theme.osparcblue.Purple,
+    decoration: osparc.theme.common.Decoration,
+    font: osparc.theme.common.Font,
+    appearance: osparc.theme.common.Appearance,
+    icon: qx.theme.icon.Tango
+  }
+});
diff --git a/source/class/osparc/theme/purple/Color.js b/source/class/osparc/theme/osparcpurple/Color.js
similarity index 97%
rename from source/class/osparc/theme/purple/Color.js
rename to source/class/osparc/theme/osparcpurple/Color.js
index c81eb093..5de90ea1 100644
--- a/source/class/osparc/theme/purple/Color.js
+++ b/source/class/osparc/theme/osparcpurple/Color.js
@@ -14,10 +14,10 @@
 
 ************************************************************************ */
 /**
- * Purple color theme based on the the dark theme
+ * Purple color theme based on the dark theme
  */
 
-qx.Theme.define("osparc.theme.purple.Color", {
+qx.Theme.define("osparc.theme.osparcpurple.Color", {
   colors: {
     "c00": "#000000", // L=00
     "c01": "#202020", // L=13

From b271afc54a894bdde9ef33c57906a9ad7ec42dd4 Mon Sep 17 00:00:00 2001
From: odeimaiz <maiz@itis.swiss>
Date: Mon, 26 Jul 2021 16:56:24 +0200
Subject: [PATCH 08/12] osparc light blue color added

---
 source/class/osparc/theme/OSparcLightBlue.js  |  31 ++++
 .../osparc/theme/osparclightblue/Color.js     | 168 ++++++++++++++++++
 2 files changed, 199 insertions(+)
 create mode 100644 source/class/osparc/theme/OSparcLightBlue.js
 create mode 100644 source/class/osparc/theme/osparclightblue/Color.js

diff --git a/source/class/osparc/theme/OSparcLightBlue.js b/source/class/osparc/theme/OSparcLightBlue.js
new file mode 100644
index 00000000..6e3094bd
--- /dev/null
+++ b/source/class/osparc/theme/OSparcLightBlue.js
@@ -0,0 +1,31 @@
+/* ************************************************************************
+
+  OSparc Dark Theme for Qooxdoo
+
+  Copyright:
+     2018 IT'IS Foundation
+
+  License:
+     MIT: https://opensource.org/licenses/MIT
+     See the LICENSE file in the project's top-level directory for details.
+
+  Authors:
+    * Tobias Oetiker (oetiker)
+
+  Origin:
+    This theme is based in large parts on the the Simple
+    theme included with Qooxdoo.
+************************************************************************ */
+/**
+ * Simple Theme
+ */
+qx.Theme.define("osparc.theme.OSparcPurple", {
+  title: "OSparc Blue Theme",
+  meta: {
+    color: osparc.theme.osparcblue.Purple,
+    decoration: osparc.theme.common.Decoration,
+    font: osparc.theme.common.Font,
+    appearance: osparc.theme.common.Appearance,
+    icon: qx.theme.icon.Tango
+  }
+});
diff --git a/source/class/osparc/theme/osparclightblue/Color.js b/source/class/osparc/theme/osparclightblue/Color.js
new file mode 100644
index 00000000..3d6a4686
--- /dev/null
+++ b/source/class/osparc/theme/osparclightblue/Color.js
@@ -0,0 +1,168 @@
+/* ************************************************************************
+
+  OSparc Dark Theme for Qooxdoo
+
+  Copyright:
+     2018 IT'IS Foundation
+
+  License:
+     MIT: https://opensource.org/licenses/MIT
+     See the LICENSE file in the project's top-level directory for details.
+
+  Authors:
+    * Odei Maiz (odeimaiz)
+
+  Origin:
+    This theme is based in large parts on the the Simple
+    theme included with Qooxdoo.
+************************************************************************ */
+/**
+ * Light Blue color theme based on the light theme
+ */
+
+qx.Theme.define("osparc.theme.osparclightblue.Color", {
+  colors: {
+    "c00": "#FFFFFF", // L=100
+    "c01": "#EFEFEF", // L=94
+    "c02": "#7AE6FF", // L=75
+    "c03": "#60CCFF", // L=69
+    "c04": "#51BDF0", // L=63
+    "c05": "#41ADE0", // L=56
+    "c06": "#808080", // L=50
+    "c07": "#707070", // L=44
+    "c08": "#606060", // L=38
+    "c09": "#505050", // L=31
+    "c10": "#404040", // L=25
+    "c11": "#303030", // L=19
+    "c12": "#202020", // L=13
+    "c13": "#101010", // L=06
+    "c14": "#000000", // L=00
+
+    "a-bit-transparent": "rgba(255, 255, 255, 0.4)",
+    "invalid-red": "#a04040",
+
+
+    // main
+    "background-main": "c01",
+    "background-main-lighter": "c02",
+    "background-main-lighter+": "c03",
+    "contrasted-background": "c04",
+    "contrasted-background+": "c05",
+    "contrasted-background++": "c06",
+
+    // text
+    "text": "c11",
+    "text-disabled": "c07",
+    "text-selected": "c12",
+    "text-placeholder": "c07",
+    "text-darker": "c07",
+    "contrasted-text-dark": "c01",
+    "contrasted-text-light": "c12",
+    "link": "c08",
+
+    // shadows
+    "bg-shadow": "c06",
+    "shadow": qx.core.Environment.get("css.rgba") ? "a-bit-transparent" : "bg-shadow",
+
+    // window
+    "window-caption-background": "c01",
+    "window-caption-background-active": "c04",
+    "window-caption-text": "c11",
+    "window-caption-text-active": "c12",
+
+    // material-button
+    "material-button-background": "c03",
+    "material-button-background-disabled": "c02",
+    "material-button-background-hovered": "c05",
+    "material-button-background-pressed": "c05",
+    "material-button-text-disabled": "c07",
+    "material-button-text": "c11",
+
+    // material-textfield
+    "material-textfield": "c07",
+    "material-textfield-focused": "c11",
+    "material-textfield-disabled": "c05",
+    "material-textfield-invalid": "invalid-red",
+    "invalid": "invalid-red",
+
+    // backgrounds
+    "background-selected": "c05",
+    "background-selected-disabled": "c02",
+    "background-selected-dark": "c04",
+    "background-disabled": "c01",
+    "background-disabled-checked": "c02",
+    "background-pane": "c01",
+
+    // tabview
+    "tabview-unselected": "c14",
+    "tabview-button-border": "c14",
+    "tabview-label-active-disabled": "c10",
+    "tabview-pane-background": "c01",
+    "tabview-button-background": "transparent",
+
+    // scrollbar
+    "scrollbar-passive": "c02",
+    "scrollbar-active": "c04",
+
+    // form
+    "button": "c05",
+    "button-border": "c06",
+    "button-border-hovered": "c07",
+    "button-box": "c04",
+    "button-box-pressed": "c05",
+    "border-lead": "c07",
+
+    // window
+    "window-border": "c04",
+    "window-border-inner": "c01",
+
+    // group box
+    "white-box-border": "c03",
+
+    // borders
+    // 'border-main' is an alias of 'background-selected' (compatibility reasons)
+    "border": "c04",
+    "border-focused": "c09",
+    "border-invalid": "invalid-red",
+    "border-disabled": "c01",
+
+    // separator
+    "border-separator": "c07",
+
+    // tooltip
+    "tooltip": "c07",
+    "tooltip-text": "c12",
+
+    // table
+    "table-header": "c01",
+    "table-header-foreground": "c09",
+    "table-header-border": "c07",
+    "table-focus-indicator": "c06",
+
+    // used in table code
+    "table-header-cell": "c01",
+    "table-row-background-focused-selected": "c05",
+    "table-row-background-focused": "c04",
+    "table-row-background-selected": "c05",
+    "table-row-background-even": "c01",
+    "table-row-background-odd": "c01",
+
+    // foreground
+    "table-row-selected": "c12",
+    "table-row": "c09",
+
+    // table grid color
+    "table-row-line": "c01",
+    "table-column-line": "c01",
+
+    // used in progressive code
+    "progressive-table-header": "c08",
+    "progressive-table-row-background-even": "c01",
+    "progressive-table-row-background-odd": "c01",
+    "progressive-progressbar-background": "c00",
+    "progressive-progressbar-indicator-done": "c01",
+    "progressive-progressbar-indicator-undone": "c02",
+    "progressive-progressbar-percent-background": "c00",
+    "progressive-progressbar-percent-text": "c02"
+  }
+});

From f0b351e476afe3c9d3f9e98c58f2c63c92962eef Mon Sep 17 00:00:00 2001
From: odeimaiz <maiz@itis.swiss>
Date: Mon, 26 Jul 2021 16:57:04 +0200
Subject: [PATCH 09/12] minor

---
 source/class/osparc/theme/OSparcLightBlue.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/class/osparc/theme/OSparcLightBlue.js b/source/class/osparc/theme/OSparcLightBlue.js
index 6e3094bd..4b029512 100644
--- a/source/class/osparc/theme/OSparcLightBlue.js
+++ b/source/class/osparc/theme/OSparcLightBlue.js
@@ -20,7 +20,7 @@
  * Simple Theme
  */
 qx.Theme.define("osparc.theme.OSparcPurple", {
-  title: "OSparc Blue Theme",
+  title: "OSparc Light Blue Theme",
   meta: {
     color: osparc.theme.osparcblue.Purple,
     decoration: osparc.theme.common.Decoration,

From 9125021f9baf5588443afe49b2bbf65073358a56 Mon Sep 17 00:00:00 2001
From: odeimaiz <maiz@itis.swiss>
Date: Mon, 26 Jul 2021 17:03:27 +0200
Subject: [PATCH 10/12] themes updated

---
 compile.json                                 |  6 ++--
 source/class/osparc/theme/OSparcLightBlue.js |  2 +-
 source/class/osparc/theme/OSparcPurple.js    |  4 +--
 source/class/osparc/theme/Purple.js          | 31 --------------------
 4 files changed, 6 insertions(+), 37 deletions(-)
 delete mode 100644 source/class/osparc/theme/Purple.js

diff --git a/compile.json b/compile.json
index 3499afe8..c70e0ec9 100644
--- a/compile.json
+++ b/compile.json
@@ -28,10 +28,10 @@
       "name": "widgetbrowser",
       "include": [
         "osparc.theme.OSparcLight",
-        "osparc.theme.OSparcPortal",
         "osparc.theme.OSparcBlue",
-        "osparc.theme.LightBlue",
-        "osparc.theme.Purple"
+        "osparc.theme.OSparcLightBlue",
+        "osparc.theme.OSparcPurple",
+        "osparc.theme.LightBlue"
       ],
       "parts": {
         "boot": {
diff --git a/source/class/osparc/theme/OSparcLightBlue.js b/source/class/osparc/theme/OSparcLightBlue.js
index 4b029512..ee1bb8ac 100644
--- a/source/class/osparc/theme/OSparcLightBlue.js
+++ b/source/class/osparc/theme/OSparcLightBlue.js
@@ -22,7 +22,7 @@
 qx.Theme.define("osparc.theme.OSparcPurple", {
   title: "OSparc Light Blue Theme",
   meta: {
-    color: osparc.theme.osparcblue.Purple,
+    color: osparc.theme.osparclightblue.Color,
     decoration: osparc.theme.common.Decoration,
     font: osparc.theme.common.Font,
     appearance: osparc.theme.common.Appearance,
diff --git a/source/class/osparc/theme/OSparcPurple.js b/source/class/osparc/theme/OSparcPurple.js
index 6e3094bd..6704c702 100644
--- a/source/class/osparc/theme/OSparcPurple.js
+++ b/source/class/osparc/theme/OSparcPurple.js
@@ -20,9 +20,9 @@
  * Simple Theme
  */
 qx.Theme.define("osparc.theme.OSparcPurple", {
-  title: "OSparc Blue Theme",
+  title: "OSparc Purple Theme",
   meta: {
-    color: osparc.theme.osparcblue.Purple,
+    color: osparc.theme.osparcpurple.Color,
     decoration: osparc.theme.common.Decoration,
     font: osparc.theme.common.Font,
     appearance: osparc.theme.common.Appearance,
diff --git a/source/class/osparc/theme/Purple.js b/source/class/osparc/theme/Purple.js
deleted file mode 100644
index adbafd48..00000000
--- a/source/class/osparc/theme/Purple.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/* ************************************************************************
-
-  OSparc Purple Theme for Qooxdoo
-
-  Copyright:
-     2020 IT'IS Foundation
-
-  License:
-     MIT: https://opensource.org/licenses/MIT
-     See the LICENSE file in the project's top-level directory for details.
-
-  Authors:
-    * Odei Maiz (odeimaiz)
-
-  Origin:
-    This theme is based in large parts on the the Simple
-    theme included with Qooxdoo.
-************************************************************************ */
-/**
- * Simple Theme
- */
-qx.Theme.define("osparc.theme.Purple", {
-  title: "Purple Theme",
-  meta: {
-    color: osparc.theme.purple.Color,
-    decoration: osparc.theme.common.Decoration,
-    font: osparc.theme.common.Font,
-    appearance: osparc.theme.common.Appearance,
-    icon: qx.theme.icon.Tango
-  }
-});

From 42e0d15d8815975a9894d7211433b3a556eb9377 Mon Sep 17 00:00:00 2001
From: odeimaiz <maiz@itis.swiss>
Date: Mon, 26 Jul 2021 17:05:57 +0200
Subject: [PATCH 11/12] minor

---
 source/class/osparc/theme/OSparcLightBlue.js | 6 +++---
 source/class/osparc/theme/OSparcPurple.js    | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/source/class/osparc/theme/OSparcLightBlue.js b/source/class/osparc/theme/OSparcLightBlue.js
index ee1bb8ac..3f5563a6 100644
--- a/source/class/osparc/theme/OSparcLightBlue.js
+++ b/source/class/osparc/theme/OSparcLightBlue.js
@@ -1,16 +1,16 @@
 /* ************************************************************************
 
-  OSparc Dark Theme for Qooxdoo
+  OSparc Light Blue Theme for Qooxdoo
 
   Copyright:
-     2018 IT'IS Foundation
+     2021 IT'IS Foundation
 
   License:
      MIT: https://opensource.org/licenses/MIT
      See the LICENSE file in the project's top-level directory for details.
 
   Authors:
-    * Tobias Oetiker (oetiker)
+    * Odei Maiz (odeimaiz)
 
   Origin:
     This theme is based in large parts on the the Simple
diff --git a/source/class/osparc/theme/OSparcPurple.js b/source/class/osparc/theme/OSparcPurple.js
index 6704c702..145bf1fd 100644
--- a/source/class/osparc/theme/OSparcPurple.js
+++ b/source/class/osparc/theme/OSparcPurple.js
@@ -1,16 +1,16 @@
 /* ************************************************************************
 
-  OSparc Dark Theme for Qooxdoo
+  OSparc Purple Theme for Qooxdoo
 
   Copyright:
-     2018 IT'IS Foundation
+     2020 IT'IS Foundation
 
   License:
      MIT: https://opensource.org/licenses/MIT
      See the LICENSE file in the project's top-level directory for details.
 
   Authors:
-    * Tobias Oetiker (oetiker)
+    * Odei Maiz (odeimaiz)
 
   Origin:
     This theme is based in large parts on the the Simple

From 7123b67f54c768d5f6c7d1bb62b3b6c8f98dbf39 Mon Sep 17 00:00:00 2001
From: odeimaiz <maiz@itis.swiss>
Date: Mon, 26 Jul 2021 17:07:38 +0200
Subject: [PATCH 12/12] last minors

---
 source/class/osparc/theme/OSparcLightBlue.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/source/class/osparc/theme/OSparcLightBlue.js b/source/class/osparc/theme/OSparcLightBlue.js
index 3f5563a6..cd31bf76 100644
--- a/source/class/osparc/theme/OSparcLightBlue.js
+++ b/source/class/osparc/theme/OSparcLightBlue.js
@@ -19,7 +19,7 @@
 /**
  * Simple Theme
  */
-qx.Theme.define("osparc.theme.OSparcPurple", {
+qx.Theme.define("osparc.theme.OSparcLightBlue", {
   title: "OSparc Light Blue Theme",
   meta: {
     color: osparc.theme.osparclightblue.Color,