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

Light blue theme
ITISFoundation · Jul 29, 2021 · 2111afd · 2111afd
2 parents 3755b2d + 7123b67
commit 2111afd
Show file tree

Hide file tree

Showing 11 changed files with 548 additions and 599 deletions.
diff --git 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",

diff --git 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/OSparcPortal.js → source/class/osparc/theme/OSparcLightBlue.js b/source/class/osparc/theme/OSparcPortal.js → source/class/osparc/theme/OSparcLightBlue.js
@@ -1,9 +1,9 @@
 /* ************************************************************************
 
-  OSparc Light Theme for Qooxdoo
+  OSparc Light Blue Theme for Qooxdoo
 
   Copyright:
-     2020 IT'IS Foundation
+     2021 IT'IS Foundation
 
   License:
      MIT: https://opensource.org/licenses/MIT
@@ -19,12 +19,12 @@
 /**
  * Simple Theme
  */
-qx.Theme.define("osparc.theme.OSparcPortal", {
-  title: "OSparc Portal Theme",
+qx.Theme.define("osparc.theme.OSparcLightBlue", {
+  title: "OSparc Light Blue Theme",
   meta: {
-    color: osparc.theme.osparcportal.Color,
+    color: osparc.theme.osparclightblue.Color,
     decoration: osparc.theme.common.Decoration,
-    font: osparc.theme.osparcportal.Font,
+    font: osparc.theme.common.Font,
     appearance: osparc.theme.common.Appearance,
     icon: qx.theme.icon.Tango
   }

diff --git a/source/class/osparc/theme/Purple.js → source/class/osparc/theme/OSparcPurple.js b/source/class/osparc/theme/Purple.js → source/class/osparc/theme/OSparcPurple.js
@@ -19,10 +19,10 @@
 /**
  * Simple Theme
  */
-qx.Theme.define("osparc.theme.Purple", {
-  title: "Purple Theme",
+qx.Theme.define("osparc.theme.OSparcPurple", {
+  title: "OSparc Purple Theme",
   meta: {
-    color: osparc.theme.purple.Color,
+    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/osparcdark/Color.js b/source/class/osparc/theme/osparcdark/Color.js
@@ -21,126 +21,147 @@
  */
 qx.Theme.define("osparc.theme.osparcdark.Color", {
   colors: {
+    "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",
+
+
     // 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": "c02",
+    "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": "c14",
+    "tabview-button-border": "c14",
+    "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"
   }
 });