Merge pull request #37 from odeimaiz/feature/light-theme

odeimaiz · web-flow · commit dd7770a1f4ce · 2020-03-31T15:37:50.000+02:00
Added oSparc Light theme
diff --git a/Manifest.json b/Manifest.json
@@ -11,7 +11,7 @@
         "email": "tobi@itis.swiss"
       }
     ],
-    "version": "0.4.13"
+    "version": "0.5.0"
   },
   "provides": {
     "namespace": "osparc.theme",
diff --git a/README.md b/README.md
@@ -14,7 +14,7 @@ $ qx contrib list
 $ qx contrib install ITISFoundation/qx-osparc-theme
 ```
 
-now you just have to modify your `Manifest.json` to enable the theme:
+now you just have to modify your `compile.json` to enable the theme:
 
 ```json5
 "applications": [
@@ -56,4 +56,4 @@ Inspect the image interactively
 
 ```console
 $ docker run --entrypoint /bin/bash -i -t itisfoundation/qx-osparc-theme
-```
+```
diff --git a/compile.json b/compile.json
@@ -24,10 +24,10 @@
   "applications": [
     {
       "class": "widgetbrowser.Application",
-      // "theme": "osparc.theme.OSparcBlue",
       "theme": "osparc.theme.OSparcDark",
       "name": "widgetbrowser",
       "include": [
+        "osparc.theme.OSparcLight",
         "osparc.theme.OSparcBlue"
       ],
       "parts": {
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "devDependencies": {
-    "@qooxdoo/compiler": "^1.0.0-beta.20190911-2033",
+    "@qooxdoo/compiler": "^1.0.0-beta.20200326-1746",
     "babel-eslint": "^8.2.6",
     "eslint": "^4.19.1",
     "eslint-config-qx": "^0.1.0",
diff --git a/source/class/osparc/theme/OSparcLight.js b/source/class/osparc/theme/OSparcLight.js
@@ -0,0 +1,31 @@
+/* ************************************************************************
+
+  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.OSparcLight", {
+  title: "OSparc Light Theme",
+  meta: {
+    color: osparc.theme.osparclight.Color,
+    decoration: osparc.theme.osparcdark.Decoration,
+    font: osparc.theme.osparcdark.Font,
+    appearance: osparc.theme.osparcdark.Appearance,
+    icon: qx.theme.icon.Tango
+  }
+});
diff --git a/source/class/osparc/theme/osparcdark/Color.js b/source/class/osparc/theme/osparcdark/Color.js
@@ -23,7 +23,10 @@ qx.Theme.define("osparc.theme.osparcdark.Color", {
   colors: {
     // main
     "background-main": "#202020",
+    "background-main-lighter": "#303030",
+    "background-main-lighter+": "#373737",
     "light-background": "#444",
+    "light-background+": "#555555",
 
     // window
     "window-caption-background": "background-main",
@@ -38,12 +41,13 @@ qx.Theme.define("osparc.theme.osparcdark.Color", {
     "material-button-background-pressed": "#505050",
     "material-button-text-disabled": "text-disabled",
     "material-button-text": "text",
+
     // material-textfield
     "material-textfield": "#808080",
     "material-textfield-focused": "#e0e0e0",
     "material-textfield-disabled": "#555",
     "material-textfield-invalid": "#a04040",
-    "invalid":"material-textfield-invalid",
+    "invalid": "material-textfield-invalid",
 
     // backgrounds
     "background-selected": "#555",
@@ -57,7 +61,7 @@ qx.Theme.define("osparc.theme.osparcdark.Color", {
     "tabview-unselected": "#ffffff",
     "tabview-button-border": "#ffffff",
     "tabview-label-active-disabled": "#d9d9d9",
-    "tabview-pane-background": "background-pane",
+    "tabview-pane-background": "background-main",
     "tabview-button-background": "transparent",
     // text colors
     "link": "#aaa",
@@ -94,12 +98,14 @@ qx.Theme.define("osparc.theme.osparcdark.Color", {
     // separator
     "border-separator": "#808080",
 
-
     // text
     "text": "#bfbfbf",
     "text-disabled": "#808080",
     "text-selected": "#f0f0f0",
-    "text-placeholder": "#404040",
+    "text-placeholder": "text-disabled",
+    "text-darker": "text-disabled",
+    "contrasted-text-dark": "#222222",
+    "contrasted-text-light": "#EEEEEE",
 
     // tooltip
     "tooltip": "#808080",
@@ -133,6 +139,32 @@ 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"
+    "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"
+    // ----- osparc related -----
   }
 });
diff --git a/source/class/osparc/theme/osparclight/Color.js b/source/class/osparc/theme/osparclight/Color.js
@@ -0,0 +1,170 @@
+/* ************************************************************************
+
+  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.
+************************************************************************ */
+/**
+ * Based on osparcdark inverted colors
+ */
+qx.Theme.define("osparc.theme.osparclight.Color", {
+  colors: {
+    // main
+    "background-main": "#DFDFDF",
+    "background-main-lighter": "#CFCFCF",
+    "background-main-lighter+": "#C8C8C8",
+    "light-background": "#BBBBBB",
+    "light-background+": "#AAAAAA",
+
+    // window
+    "window-caption-background": "background-main",
+    "window-caption-background-active": "light-background",
+    "window-caption-text": "text",
+    "window-caption-text-active": "text-selected",
+
+    // 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-textfield
+    "material-textfield": "#7F7F7F",
+    "material-textfield-focused": "#1F1F1F",
+    "material-textfield-disabled": "#AAAAAA",
+    "material-textfield-invalid": "#5FBFBF",
+    "invalid": "material-textfield-invalid",
+
+    // backgrounds
+    "background-selected": "#AAAAAA",
+    "background-selected-disabled": "#CCCCCC",
+    "background-selected-dark": "#BBBBBB",
+    "background-disabled": "background-main",
+    "background-disabled-checked": "#CCCCCC",
+    "background-pane": "#DDDDDD",
+
+    // tabview
+    "tabview-unselected": "#000000",
+    "tabview-button-border": "#000000",
+    "tabview-label-active-disabled": "#262626",
+    "tabview-pane-background": "background-main",
+    "tabview-button-background": "transparent",
+    // text colors
+    "link": "#555555",
+
+    // scrollbar
+    "scrollbar-passive": "#CCCCCC",
+    "scrollbar-active": "#BBBBBB",
+
+    // form
+    "button": "#AAAAAA",
+    "button-border": "#999999",
+    "button-border-hovered": "#777777",
+    "button-box": "#BBBBBB",
+    "button-box-pressed": "#AAAAAA",
+    "border-lead": "#777777",
+
+    // window
+    "window-border": "#BBBBBB",
+    "window-border-inner": "#DDDDDD",
+
+    // group box
+    "white-box-border": "#BFBFBF",
+
+    // shadows
+    "shadow": qx.core.Environment.get("css.rgba") ? "rgba(1.0, 1.0, 1.0, 0.4)" : "#999999",
+
+    // borders
+    // 'border-main' is an alias of 'background-selected' (compatibility reasons)
+    "border": "#B7B7B7",
+    "border-focused": "#484848",
+    "border-invalid": "material-textfield-invalid",
+    "border-disabled": "#DDDDDD",
+
+    // separator
+    "border-separator": "#7F7F7F",
+
+    // 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",
+
+    // tooltip
+    "tooltip": "#7F7F7F",
+    "tooltip-text": "#0F0F0F",
+
+    // table
+    "table-header": "background-main",
+    "table-header-foreground": "text",
+    "table-header-border": "#777777",
+    "table-focus-indicator": "#8A8A8A",
+
+    // 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",
+    // foreground
+    "table-row-selected": "#0F0F0F",
+    "table-row": "#404040",
+    // table grid color
+    "table-row-line": "#DDDDDD",
+    "table-column-line": "#DDDDDD",
+
+    // 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",
+
+    // ----- 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"
+    // ----- osparc related -----
+  }
+});

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@`
`11`	`11`	`"email": "tobi@itis.swiss"`
`12`	`12`	`}`
`13`	`13`	`],`
`14`		`- "version": "0.4.13"`
	`14`	`+ "version": "0.5.0"`
`15`	`15`	`},`
`16`	`16`	`"provides": {`
`17`	`17`	`"namespace": "osparc.theme",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"devDependencies": {`
`3`		`- "@qooxdoo/compiler": "^1.0.0-beta.20190911-2033",`
	`3`	`+ "@qooxdoo/compiler": "^1.0.0-beta.20200326-1746",`
`4`	`4`	`"babel-eslint": "^8.2.6",`
`5`	`5`	`"eslint": "^4.19.1",`
`6`	`6`	`"eslint-config-qx": "^0.1.0",`