@qooxdoo/framework 7.0.0-beta.6 → 7.0.0

package/source/class/qx/theme/tangible/Appearance.js

@@ -43,112 +43,106 @@ qx.Theme.define("qx.theme.tangible.Appearance", {
     ---------------------------------------------------------------------------
     */
 
-    "widget": {},
+    widget: {},
 
-    "label":
-      {
-        style: function(states) {
-          return {textColor: states.disabled ? "text-disabled-on-surface" : undefined};
-        }
-      },
+    label: {
+      style(states) {
+        return {
+          textColor: states.disabled ? "text-disabled-on-surface" : undefined
+        };
+      }
+    },
 
-    "image":
-      {
-        style: function(states) {
-          return {opacity: !states.replacement && states.disabled ? 0.3 : undefined};
-        }
-      },
+    image: {
+      style(states) {
+        return {
+          opacity: !states.replacement && states.disabled ? 0.3 : undefined
+        };
+      }
+    },
 
-    "atom": {},
+    atom: {},
     "atom/label": "label",
     "atom/icon": "image",
 
-    "root":
-      {
-        style: function(states) {
-          return {
-            backgroundColor: "surface",
-            textColor: "text-primary-on-surface",
-            font: "default"
-          };
-        }
-      },
+    root: {
+      style(states) {
+        return {
+          backgroundColor: "surface",
+          textColor: "text-primary-on-surface",
+          font: "default"
+        };
+      }
+    },
 
-    "popup":
-      {
-        style: function(states) {
-          return {
-            decorator: "popup",
-            backgroundColor: "surface"
-          };
-        }
-      },
+    popup: {
+      style(states) {
+        return {
+          decorator: "popup",
+          backgroundColor: "surface"
+        };
+      }
+    },
 
-    "tooltip":
-      {
-        include: "popup",
+    tooltip: {
+      include: "popup",
 
-        style: function(states) {
-          return {
-            backgroundColor: "secondary",
-            textColor: "text-on-secondary",
-            decorator: "tooltip",
-            padding: [1, 3, 2, 3],
-            offset: [10, 5, 5, 5]
-          };
-        }
-      },
+      style(states) {
+        return {
+          backgroundColor: "secondary",
+          textColor: "text-on-secondary",
+          decorator: "tooltip",
+          padding: [1, 3, 2, 3],
+          offset: [10, 5, 5, 5]
+        };
+      }
+    },
 
     "tooltip/atom": "atom",
 
-    "tooltip-error":
-      {
-        include: "tooltip",
+    "tooltip-error": {
+      include: "tooltip",
 
-        style: function(states) {
-          return {
-            textColor: "text-on-error",
-            showTimeout: 100,
-            hideTimeout: 10000,
-            decorator: "tooltip-error",
-            font: "bold",
-            backgroundColor: undefined
-          };
-        }
-      },
+      style(states) {
+        return {
+          textColor: "text-on-error",
+          showTimeout: 100,
+          hideTimeout: 10000,
+          decorator: "tooltip-error",
+          font: "bold",
+          backgroundColor: undefined
+        };
+      }
+    },
 
     "tooltip-error/atom": "atom",
 
-    "iframe":
-      {
-        style: function(states) {
-          return {
-            backgroundColor: "surface",
-            decorator: "main"
-          };
-        }
-      },
+    iframe: {
+      style(states) {
+        return {
+          backgroundColor: "surface",
+          decorator: "main"
+        };
+      }
+    },
 
-    "move-frame":
-      {
-        style: function(states) {
-          return {decorator: "main"};
-        }
-      },
+    "move-frame": {
+      style(states) {
+        return { decorator: "main" };
+      }
+    },
 
     "resize-frame": "move-frame",
 
     "dragdrop-cursor": {
-      style: function(states) {
+      style(states) {
         var icon = "nodrop";
 
         if (states.copy) {
           icon = "copy";
-        }
-        else if (states.move) {
+        } else if (states.move) {
           icon = "move";
-        }
-        else if (states.alias) {
+        } else if (states.alias) {
           icon = "alias";
         }
 
@@ -159,62 +153,66 @@ qx.Theme.define("qx.theme.tangible.Appearance", {
         };
       }
     },
+
     /*
     ---------------------------------------------------------------------------
       BUTTON
     ---------------------------------------------------------------------------
     */
 
-    "button": { /* qx.ui.form.Button */
+    button: {
+      /* qx.ui.form.Button */
 
       alias: "material-button",
       include: "material-button",
-      style: function(states) {
-        return {center: true};
+      style(states) {
+        return { center: true };
       }
     },
 
-    "toggle-button" : {
+    "toggle-button": {
       include: "button",
-      style: function(states) {
-        return {
-          decorator: "toggle-button"
-            + ( states.checked ? "-checked" : "")
-            + ( states.disabled ? "-disabled" : "")
-            + ( !states.disabled && states.hovered ? "-hovered":"" ),
-          textColor: states.disabled ?
-            "text-disabled-on-primary" : "text-on-primary"
-        }
+      style(states) {
+        return {
+          decorator:
+            "toggle-button" +
+            (states.checked ? "-checked" : "") +
+            (states.disabled ? "-disabled" : "") +
+            (!states.disabled && states.hovered ? "-hovered" : ""),
+          textColor: states.disabled
+            ? "text-disabled-on-primary"
+            : "text-on-primary"
+        };
       }
     },
+
     "toggle-button/label": {
       include: "button/label",
-      style: function(states) {
-        if (states.checked){
+      style(states) {
+        if (states.checked) {
           return {
             textColor: undefined
-          }
-        };
+          };
+        }
         return {
           textColor: undefined
         };
       }
     },
+
     "material-button": {
       alias: "atom",
 
-      style: function(states) {
+      style(states) {
         var decorator = "material-button";
 
         if (!states.disabled) {
           if (states.pressed || states.checked) {
             decorator += "-pressed";
-          }
-          else if (states.hovered || states.focused) {
+          } else if (states.hovered || states.focused) {
             decorator += "-hovered";
           }
-        }
-        else {
+        } else {
           decorator += "-disabled";
         }
 
@@ -225,30 +223,34 @@ qx.Theme.define("qx.theme.tangible.Appearance", {
         return {
           decorator: decorator,
           padding: [6, 15],
-          margin: [ 2, 4 ],
+          margin: [2, 4],
           cursor: states.disabled ? undefined : "pointer",
           minWidth: 5,
           minHeight: 5
         };
       }
     },
+
     "material-button/label": {
       alias: "atom/label",
 
-      style: function(states) {
+      style(states) {
         return {
-          textColor: states.disabled ?
-            "text-disabled-on-primary" : "text-on-primary"
+          textColor: states.disabled
+            ? "text-disabled-on-primary"
+            : "text-on-primary"
         };
       }
     },
+
     "material-button/icon": {
       alias: "atom/label",
 
-      style: function(states) {
+      style(states) {
         return {
-          textColor: states.disabled ?
-            "text-disabled-on-primary" : "text-on-primary"
+          textColor: states.disabled
+            ? "text-disabled-on-primary"
+            : "text-on-primary"
         };
       }
     },
@@ -256,25 +258,22 @@ qx.Theme.define("qx.theme.tangible.Appearance", {
     "button-frame": {
       alias: "atom",
 
-      style: function(states) {
+      style(states) {
         var decorator = "button-box";
 
         if (!states.disabled) {
           if (states.hovered && !states.pressed && !states.checked) {
             decorator = "button-box-hovered";
-          }
-          else if (states.hovered && (states.pressed || states.checked)) {
+          } else if (states.hovered && (states.pressed || states.checked)) {
             decorator = "button-box-pressed-hovered";
-          }
-          else if (states.pressed || states.checked) {
+          } else if (states.pressed || states.checked) {
             decorator = "button-box-pressed";
           }
         }
 
         if (states.invalid && !states.disabled) {
           decorator += "-invalid";
-        }
-        else if (states.focused) {
+        } else if (states.focused) {
           decorator += "-focused";
         }
 
@@ -291,35 +290,30 @@ qx.Theme.define("qx.theme.tangible.Appearance", {
     "button-frame/label": {
       alias: "atom/label",
 
-      style: function(states) {
+      style(states) {
         return {
-          textColor:
-            states.disabled ? "text-disabled-on-primary"
+          textColor: states.disabled
+            ? "text-disabled-on-primary"
             : "text-on-primary"
         };
       }
     },
 
+    "hover-button": {
+      alias: "button",
+      include: "button",
 
+      style(states) {
+        return {
+          decorator: states.hovered ? "button-hover" : undefined
+        };
+      }
+    },
 
-    "hover-button":
-      {
-        alias: "button",
-        include: "button",
-
-        style: function(states) {
-          return {
-            decorator:
-              states.hovered ? "button-hover"
-              : undefined
-          };
-        }
-      },
-
-    "menubutton": {
+    menubutton: {
       include: "button",
       alias: "button",
-      style: function(states) {
+      style(states) {
         return {
           icon: qx.theme.tangible.Image.URLS["arrow-down"],
           iconPosition: "right"
@@ -327,7 +321,6 @@ qx.Theme.define("qx.theme.tangible.Appearance", {
       }
     },
 
-
     /*
     ---------------------------------------------------------------------------
       TEXT FIELD
@@ -335,7 +328,7 @@ qx.Theme.define("qx.theme.tangible.Appearance", {
     */
 
     "material-textfield": {
-      style: function(states) {
+      style(states) {
         var decorator;
         var padding;
         decorator = "material-textfield";
@@ -343,53 +336,47 @@ qx.Theme.define("qx.theme.tangible.Appearance", {
         if (states.readonly) {
           decorator += "-readonly";
           padding = [3, 0, 5, 0];
-        }
-        else if (states.disabled) {
+        } else if (states.disabled) {
           decorator += "-disabled";
-        }
-        else if (states.focused) {
+        } else if (states.focused) {
           decorator += "-focused";
           if (states.invalid) {
             decorator += "-invalid";
           }
           padding = [3, 0, 3, 0];
-        }
-        else if (states.invalid) {
+        } else if (states.invalid) {
           decorator += "-invalid";
         }
 
         return {
           decorator: decorator,
           padding: padding,
-          textColor:
-            states.disabled ? "text-disabled-on-surface" :
-            states.showingPlaceholder ? "text-hint-on-surface"
+          textColor: states.disabled
+            ? "text-disabled-on-surface"
+            : states.showingPlaceholder
+            ? "text-hint-on-surface"
             : undefined
         };
       }
     },
 
-    "textfield": "material-textfield",
-    "textarea": "textfield",
+    textfield: "material-textfield",
+    textarea: "textfield",
 
-    "framebox":
-    {
-      style: function(states) {
+    framebox: {
+      style(states) {
         var decorator;
         var padding;
         if (states.disabled) {
           decorator = "border-disabled";
           padding = [1, 2];
-        }
-        else if (states.invalid) {
+        } else if (states.invalid) {
           decorator = "border-invalid";
           padding = [1, 2];
-        }
-        else if (states.focused) {
+        } else if (states.focused) {
           decorator = "border-focused";
           padding = [1, 2];
-        }
-        else {
+        } else {
           padding = [1, 2];
           decorator = "border";
         }
@@ -397,72 +384,65 @@ qx.Theme.define("qx.theme.tangible.Appearance", {
         return {
           decorator: decorator,
           padding: padding,
-          textColor:
-            states.disabled ? "text-disabled-on-surface" :
-            states.showingPlaceholder ? "text-hint-on-surface"
+          textColor: states.disabled
+            ? "text-disabled-on-surface"
+            : states.showingPlaceholder
+            ? "text-hint-on-surface"
             : undefined
         };
       }
     },
 
-
     /*
     ---------------------------------------------------------------------------
       SPLIT BUTTON
     ---------------------------------------------------------------------------
     */
-    "splitbutton": {},
-
-    "splitbutton/button":
-      {
-        alias: "material-button",
-        style: function(states) {
-          var decorator = "material-button";
-
-          if (!states.disabled) {
-            if (states.pressed || states.checked) {
-              decorator += "-pressed";
-            }
-            else if (states.hovered) {
-              decorator += "-hovered";
-            }
-            else if (states.focused) {
-              decorator += "-focused";
-            }
-          }
-          else {
-            decorator += "-disabled";
-          }
+    splitbutton: {},
 
-          decorator += "-left";
+    "splitbutton/button": {
+      alias: "material-button",
+      style(states) {
+        var decorator = "material-button";
 
-          return {
-            decorator: decorator,
-            padding: [6, 15,6,15],
-            margin: [ 2, 0,2,4 ],
-            cursor: states.disabled ? undefined : "pointer",
-            textColor: "text-primary-on-surface"
-          };
+        if (!states.disabled) {
+          if (states.pressed || states.checked) {
+            decorator += "-pressed";
+          } else if (states.hovered) {
+            decorator += "-hovered";
+          } else if (states.focused) {
+            decorator += "-focused";
+          }
+        } else {
+          decorator += "-disabled";
         }
-      },
+
+        decorator += "-left";
+
+        return {
+          decorator: decorator,
+          padding: [6, 15, 6, 15],
+          margin: [2, 0, 2, 4],
+          cursor: states.disabled ? undefined : "pointer",
+          textColor: "text-primary-on-surface"
+        };
+      }
+    },
 
     "splitbutton/arrow": {
       alias: "material-button",
-      style: function(states) {
+      style(states) {
         var decorator = "material-button";
 
         if (!states.disabled) {
           if (states.pressed || states.checked) {
             decorator += "-pressed";
-          }
-          else if (states.focused) {
+          } else if (states.focused) {
             decorator += "-focused";
-          }
-          else if (states.hovered) {
+          } else if (states.hovered) {
             decorator += "-hovered";
           }
-        }
-        else {
+        } else {
           decorator += "-disabled";
         }
 
@@ -472,49 +452,56 @@ qx.Theme.define("qx.theme.tangible.Appearance", {
           icon: qx.theme.tangible.Image.URLS["arrow-down"],
           decorator: decorator,
           cursor: states.disabled ? undefined : "pointer",
-          padding: [6, 10,6,10],
-          margin: [ 2, 4,2,0],
+          padding: [6, 10, 6, 10],
+          margin: [2, 4, 2, 0],
           textColor: "text-on-primary"
         };
       }
     },
+
     "splitbutton/arrow/icon": {
-      style: function(states) {
+      style(states) {
         return {
           textColor: "text-icon-on-primary"
-        }
+        };
       }
     },
+
     /*
     ---------------------------------------------------------------------------
       SLIDEBAR
     ---------------------------------------------------------------------------
     */
 
-    "slidebar": {},
+    slidebar: {},
     "slidebar/scrollpane": {},
     "slidebar/content": {},
 
-    "slidebar/button-forward":
-      {
-        alias: "button",
-        include: "button",
-
-        style: function(states) {
-          return {icon: qx.theme.tangible.Image.URLS["arrow-" + (states.vertical ? "down" : "right")]};
-        }
-      },
+    "slidebar/button-forward": {
+      alias: "button",
+      include: "button",
 
-    "slidebar/button-backward":
-      {
-        alias: "button",
-        include: "button",
+      style(states) {
+        return {
+          icon: qx.theme.tangible.Image.URLS[
+            "arrow-" + (states.vertical ? "down" : "right")
+          ]
+        };
+      }
+    },
 
-        style: function(states) {
-          return {icon: qx.theme.tangible.Image.URLS["arrow-" + (states.vertical ? "up" : "left")]};
-        }
-      },
+    "slidebar/button-backward": {
+      alias: "button",
+      include: "button",
 
+      style(states) {
+        return {
+          icon: qx.theme.tangible.Image.URLS[
+            "arrow-" + (states.vertical ? "up" : "left")
+          ]
+        };
+      }
+    },
 
     /*
     ---------------------------------------------------------------------------
@@ -522,50 +509,47 @@ qx.Theme.define("qx.theme.tangible.Appearance", {
     ---------------------------------------------------------------------------
     */
 
-    "table": {
-      style: function(states) {
+    table: {
+      style(states) {
         return {
-            rowHeight: 30
-        }
+          rowHeight: 30
+        };
       }
     },
 
-    "table/statusbar":
-      {
-        style: function(states) {
-          return {
-            decorator: "statusbar",
-            padding: [2, 5]
-          };
-        }
-      },
+    "table/statusbar": {
+      style(states) {
+        return {
+          decorator: "statusbar",
+          padding: [2, 5]
+        };
+      }
+    },
 
-    "table/column-button":
-      {
-        alias: "button",
+    "table/column-button": {
+      alias: "button",
 
-        style: function(states) {
-          return {
-            decorator: "table-header-column-button",
-            textColor: "text-primary-on-surface",
-            backgroundColor: "surface",
-            padding: 3,
-            icon: qx.theme.tangible.Image.URLS["select-column-order"]
-          };
-        }
-      },
+      style(states) {
+        return {
+          decorator: "table-header-column-button",
+          textColor: "text-primary-on-surface",
+          backgroundColor: "surface",
+          padding: 3,
+          icon: qx.theme.tangible.Image.URLS["select-column-order"]
+        };
+      }
+    },
 
-    "table-column-reset-button":
-      {
-        include: "menu-button",
-        alias: "menu-button",
-        style: function() {
-          return {
-            decorator: "table-header-column-button",
-            icon: "icon/16/actions/view-refresh.png"
-          };
-        }
-      },
+    "table-column-reset-button": {
+      include: "menu-button",
+      alias: "menu-button",
+      style() {
+        return {
+          decorator: "table-header-column-button",
+          icon: "icon/16/actions/view-refresh.png"
+        };
+      }
+    },
 
     "table-scroller/scrollbar-x": "scrollbar",
     "table-scroller/scrollbar-y": "scrollbar",
@@ -573,7 +557,7 @@ qx.Theme.define("qx.theme.tangible.Appearance", {
     "table-scroller": "widget",
 
     "table-scroller/header": {
-      style: function() {
+      style() {
         return {
           textColor: "text-primary-on-surface",
           backgroundColor: "surface",
@@ -584,108 +568,103 @@ qx.Theme.define("qx.theme.tangible.Appearance", {
 
     "table-scroller/pane": {},
 
-    "table-scroller/focus-indicator":
-      {
-        style: function(states) {
-          return {
-            // attention hackerery in the qx.ui.table.pane.Scroller
-            // decorator: "table-scroller-focus-indicator"
-            // gets applied hardcoded! So do not try to change its
-            // name here!
-          };
-        }
-      },
+    "table-scroller/focus-indicator": {
+      style(states) {
+        return {
+          // attention hackerery in the qx.ui.table.pane.Scroller
+          // decorator: "table-scroller-focus-indicator"
+          // gets applied hardcoded! So do not try to change its
+          // name here!
+        };
+      }
+    },
 
-    "table-scroller/resize-line":
-      {
-        style: function(states) {
-          return {
-            backgroundColor: "text-hint-on-surface",
-            width: 3
-          };
-        }
-      },
+    "table-scroller/resize-line": {
+      style(states) {
+        return {
+          backgroundColor: "text-hint-on-surface",
+          width: 3
+        };
+      }
+    },
 
-    "table-header-cell":
-      {
-        alias: "atom",
+    "table-header-cell": {
+      alias: "atom",
 
-        style: function(states) {
-          return {
-            decorator: states.first ? "table-header-cell-first" : "table-header-cell",
-            minWidth: 13,
-            font: "bold",
-            paddingTop: 3,
-            paddingLeft: 5,
-            cursor: states.disabled ? undefined : "pointer",
-            sortIcon: states.sorted ?
-              (qx.theme.tangible.Image.URLS["table-" +
-                (states.sortedAscending ? "ascending" : "descending")
-              ]) : undefined
-          };
-        }
-      },
+      style(states) {
+        return {
+          decorator: states.first
+            ? "table-header-cell-first"
+            : "table-header-cell",
+          minWidth: 13,
+          font: "bold",
+          paddingTop: 3,
+          paddingLeft: 5,
+          cursor: states.disabled ? undefined : "pointer",
+          sortIcon: states.sorted
+            ? qx.theme.tangible.Image.URLS[
+                "table-" + (states.sortedAscending ? "ascending" : "descending")
+              ]
+            : undefined
+        };
+      }
+    },
 
-    "table-header-cell/icon":
-      {
-        include: "atom/icon",
+    "table-header-cell/icon": {
+      include: "atom/icon",
 
-        style: function(states) {
-          return {paddingRight: 5};
-        }
-      },
+      style(states) {
+        return { paddingRight: 5 };
+      }
+    },
 
-    "table-header-cell/sort-icon":
-      {
-        style: function(states) {
-          return {
-            alignY: "middle",
-            alignX: "right",
-            paddingRight: 5
-          };
-        }
-      },
+    "table-header-cell/sort-icon": {
+      style(states) {
+        return {
+          alignY: "middle",
+          alignX: "right",
+          paddingRight: 5
+        };
+      }
+    },
 
-    "table-editor-textfield":
-      {
-        include: "framebox",
+    "table-editor-textfield": {
+      include: "framebox",
 
-        style: function(states) {
-          return {
-            decorator: undefined,
-            padding: [2, 2]
-          };
-        }
-      },
+      style(states) {
+        return {
+          decorator: undefined,
+          padding: [2, 2]
+        };
+      }
+    },
 
-    "table-editor-selectbox":
-      {
-        include: "selectbox",
-        alias: "selectbox",
+    "table-editor-selectbox": {
+      include: "selectbox",
+      alias: "selectbox",
 
-        style: function(states) {
-          return {padding: [0, 2]};
-        }
-      },
+      style(states) {
+        return { padding: [0, 2] };
+      }
+    },
 
-    "table-editor-combobox":
-      {
-        include: "combobox",
-        alias: "combobox",
+    "table-editor-combobox": {
+      include: "combobox",
+      alias: "combobox",
 
-        style: function(states) {
-          return {decorator: undefined};
-        }
-      },
+      style(states) {
+        return { decorator: undefined };
+      }
+    },
 
     "progressive-table-header": {
-      style: function(states) {
-        return {decorator: "progressive-table-header"};
+      style(states) {
+        return { decorator: "progressive-table-header" };
       }
     },
 
     "progressive-table-header-cell": {
-      style: function(states) {
+      style(states) {
         return {
           decorator: "progressive-table-header-cell",
           padding: [5, 6, 5, 6]
@@ -693,78 +672,74 @@ qx.Theme.define("qx.theme.tangible.Appearance", {
       }
     },
 
-
     /*
     ---------------------------------------------------------------------------
       TREEVIRTUAL
     ---------------------------------------------------------------------------
     */
 
-    "treevirtual": {
+    treevirtual: {
       include: "framebox",
       alias: "table",
-      style: function(states, superStyles) {
-        return {padding: [superStyles.padding[0] + 2, superStyles.padding[1] + 1]};
+      style(states, superStyles) {
+        return {
+          padding: [superStyles.padding[0] + 2, superStyles.padding[1] + 1]
+        };
       }
     },
 
-    "treevirtual-folder":
-      {
-        style: function(states) {
-          return {
-            icon: (states.opened ?
-              qx.theme.tangible.Image.URLS["folder-open"] :
-              qx.theme.tangible.Image.URLS["folder"]),
-            opacity: states.drag ? 0.5 : undefined
-          };
-        }
-      },
+    "treevirtual-folder": {
+      style(states) {
+        return {
+          icon: states.opened
+            ? qx.theme.tangible.Image.URLS["folder-open"]
+            : qx.theme.tangible.Image.URLS["folder"],
+          opacity: states.drag ? 0.5 : undefined
+        };
+      }
+    },
 
-    "treevirtual-file":
-      {
-        include: "treevirtual-folder",
-        alias: "treevirtual-folder",
+    "treevirtual-file": {
+      include: "treevirtual-folder",
+      alias: "treevirtual-folder",
 
-        style: function(states) {
-          return {
-            icon: qx.theme.tangible.Image.URLS["file"],
-            opacity: states.drag ? 0.5 : undefined
-          };
-        }
-      },
+      style(states) {
+        return {
+          icon: qx.theme.tangible.Image.URLS["file"],
+          opacity: states.drag ? 0.5 : undefined
+        };
+      }
+    },
 
-    "treevirtual-blank":
-      {
-        style: function(states) {
-          return {icon: qx.theme.tangible.Image.URLS["blank"]};
-        }
-      },
+    "treevirtual-blank": {
+      style(states) {
+        return { icon: qx.theme.tangible.Image.URLS["blank"] };
+      }
+    },
 
-    "treevirtual-contract":
-      {
-        style: function(states) {
-          return {icon: qx.theme.tangible.Image.URLS["tree-minus"]};
-        }
-      },
+    "treevirtual-contract": {
+      style(states) {
+        return { icon: qx.theme.tangible.Image.URLS["tree-minus"] };
+      }
+    },
 
-    "treevirtual-expand":
-      {
-        style: function(states) {
-          return {icon: qx.theme.tangible.Image.URLS["tree-plus"]};
-        }
-      },
-
-    "treevirtual-only-contract" : "treevirtual-contract",
-    "treevirtual-only-expand" : "treevirtual-expand",
-    "treevirtual-start-contract" : "treevirtual-contract",
-    "treevirtual-start-expand" : "treevirtual-expand",
-    "treevirtual-end-contract" : "treevirtual-contract",
-    "treevirtual-end-expand" : "treevirtual-expand",
-    "treevirtual-cross-contract" : "treevirtual-contract",
-    "treevirtual-cross-expand" : "treevirtual-expand",
-    "treevirtual-line" : "treevirtual-blank",
-    "treevirtual-end" : "treevirtual-blank",
-    "treevirtual-cross" : "treevirtual-blank",
+    "treevirtual-expand": {
+      style(states) {
+        return { icon: qx.theme.tangible.Image.URLS["tree-plus"] };
+      }
+    },
+
+    "treevirtual-only-contract": "treevirtual-contract",
+    "treevirtual-only-expand": "treevirtual-expand",
+    "treevirtual-start-contract": "treevirtual-contract",
+    "treevirtual-start-expand": "treevirtual-expand",
+    "treevirtual-end-contract": "treevirtual-contract",
+    "treevirtual-end-expand": "treevirtual-expand",
+    "treevirtual-cross-contract": "treevirtual-contract",
+    "treevirtual-cross-expand": "treevirtual-expand",
+    "treevirtual-line": "treevirtual-blank",
+    "treevirtual-end": "treevirtual-blank",
+    "treevirtual-cross": "treevirtual-blank",
 
     /*
     ---------------------------------------------------------------------------
@@ -772,13 +747,11 @@ qx.Theme.define("qx.theme.tangible.Appearance", {
     ---------------------------------------------------------------------------
     */
 
-    "resizer":
-      {
-        style: function(states) {
-          return {decorator: "main"};
-        }
-      },
-
+    resizer: {
+      style(states) {
+        return { decorator: "main" };
+      }
+    },
 
     /*
     ---------------------------------------------------------------------------
@@ -786,38 +759,35 @@ qx.Theme.define("qx.theme.tangible.Appearance", {
     ---------------------------------------------------------------------------
     */
 
-    "splitpane": {},
+    splitpane: {},
 
-    "splitpane/splitter":
-      {
-        style: function(states) {
-          return {backgroundColor: "text-hint-on-surface"};
-        }
-      },
+    "splitpane/splitter": {
+      style(states) {
+        return { backgroundColor: "text-hint-on-surface" };
+      }
+    },
 
-    "splitpane/splitter/knob":
-      {
-        style: function(states) {
-          return {
-            source: qx.theme.tangible.Image.URLS[
+    "splitpane/splitter/knob": {
+      style(states) {
+        return {
+          source:
+            qx.theme.tangible.Image.URLS[
               "knob-" + (states.horizontal ? "horizontal" : "vertical")
             ],
-            padding: 0
-          };
-        }
-      },
-
-    "splitpane/slider":
-      {
-        style: function(states) {
-          return {
-            backgroundColor: "text-hint-on-surface",
-            opacity: 0.3
-          };
-        }
-      },
 
+          padding: 0
+        };
+      }
+    },
 
+    "splitpane/slider": {
+      style(states) {
+        return {
+          backgroundColor: "text-hint-on-surface",
+          opacity: 0.3
+        };
+      }
+    },
 
     /*
     ---------------------------------------------------------------------------
@@ -825,189 +795,174 @@ qx.Theme.define("qx.theme.tangible.Appearance", {
     ---------------------------------------------------------------------------
     */
 
-    "menu":
-      {
-        style: function(states) {
-          var result =
-            {
-              backgroundColor: "surface",
-              decorator: "main",
-              spacingX: 6,
-              spacingY: 1,
-              iconColumnWidth: 16,
-              arrowColumnWidth: 4,
-              padding: 1,
-              placementModeY: states.submenu || states.contextmenu ? "best-fit" : "keep-align"
-            };
-
-          if (states.submenu) {
-            result.position = "right-top";
-            result.offset = [-2, -3];
-          }
+    menu: {
+      style(states) {
+        var result = {
+          backgroundColor: "surface",
+          decorator: "main",
+          spacingX: 6,
+          spacingY: 1,
+          iconColumnWidth: 16,
+          arrowColumnWidth: 4,
+          padding: 1,
+          placementModeY:
+            states.submenu || states.contextmenu ? "best-fit" : "keep-align"
+        };
 
-          if (states.contextmenu) {
-            result.offset = 4;
-          }
+        if (states.submenu) {
+          result.position = "right-top";
+          result.offset = [-2, -3];
+        }
 
-          return result;
+        if (states.contextmenu) {
+          result.offset = 4;
         }
-      },
+
+        return result;
+      }
+    },
 
     "menu/slidebar": "menu-slidebar",
 
     "menu-slidebar": "widget",
 
-    "menu-slidebar-button":
-      {
-        style: function(states) {
-          return {
-            backgroundColor:
-                states.hovered ? "primary-hovered"
-                : undefined,
-            padding: 6,
-            center: true
-          };
-        }
-      },
+    "menu-slidebar-button": {
+      style(states) {
+        return {
+          backgroundColor: states.hovered ? "primary-hovered" : undefined,
+          padding: 6,
+          center: true
+        };
+      }
+    },
 
-    "menu-slidebar/button-backward":
-      {
-        include: "menu-slidebar-button",
+    "menu-slidebar/button-backward": {
+      include: "menu-slidebar-button",
 
-        style: function(states) {
-          return {
-            icon: qx.theme.tangible.Image.URLS[
-              "arrow-up" + (states.hovered ? "-invert" : "")
-            ]
-          };
-        }
-      },
+      style(states) {
+        return {
+          icon: qx.theme.tangible.Image.URLS[
+            "arrow-up" + (states.hovered ? "-invert" : "")
+          ]
+        };
+      }
+    },
 
-    "menu-slidebar/button-forward":
-      {
-        include: "menu-slidebar-button",
+    "menu-slidebar/button-forward": {
+      include: "menu-slidebar-button",
 
-        style: function(states) {
-          return {
-            icon: qx.theme.tangible.Image.URLS[
-              "arrow-down" + (states.hovered ? "-invert" : "")
-            ]
-          };
-        }
-      },
+      style(states) {
+        return {
+          icon: qx.theme.tangible.Image.URLS[
+            "arrow-down" + (states.hovered ? "-invert" : "")
+          ]
+        };
+      }
+    },
 
-    "menu-separator":
-      {
-        style: function(states) {
-          return {
-            height: 0,
-            decorator: "menu-separator",
-            marginTop: 4,
-            marginBottom: 4,
-            marginLeft: 2,
-            marginRight: 2
-          };
-        }
-      },
+    "menu-separator": {
+      style(states) {
+        return {
+          height: 0,
+          decorator: "menu-separator",
+          marginTop: 4,
+          marginBottom: 4,
+          marginLeft: 2,
+          marginRight: 2
+        };
+      }
+    },
 
-    "menu-button":
-      {
-        alias: "atom",
+    "menu-button": {
+      alias: "atom",
 
-        style: function(states) {
-          return {
-            backgroundColor:
-                states.selected ? "primary-selected"
-                : undefined,
-            textColor:
-                states.selected ? "text-on-primary"
-                : "text-primary-on-surface",
-            padding: [2, 6]
-          };
-        }
-      },
+      style(states) {
+        return {
+          backgroundColor: states.selected ? "primary-selected" : undefined,
+          textColor: states.selected
+            ? "text-on-primary"
+            : "text-primary-on-surface",
+          padding: [2, 6]
+        };
+      }
+    },
 
-    "menu-button/icon":
-      {
-        include: "image",
+    "menu-button/icon": {
+      include: "image",
 
-        style: function(states) {
-          return {
-            alignY: "middle",
-            textColor:
-              states.selected ? "text-icon-on-primary"
-              : "text-icon-on-surface"
-          };
-        }
-      },
+      style(states) {
+        return {
+          alignY: "middle",
+          textColor: states.selected
+            ? "text-icon-on-primary"
+            : "text-icon-on-surface"
+        };
+      }
+    },
 
-    "menu-button/label":
-      {
-        include: "label",
+    "menu-button/label": {
+      include: "label",
 
-        style: function(states) {
-          return {
-            alignY: "middle",
-            padding: 1
-          };
-        }
-      },
+      style(states) {
+        return {
+          alignY: "middle",
+          padding: 1
+        };
+      }
+    },
 
-    "menu-button/shortcut":
-      {
-        include: "label",
+    "menu-button/shortcut": {
+      include: "label",
 
-        style: function(states) {
-          return {
-            alignY: "middle",
-            marginLeft: 14,
-            padding: 1
-          };
-        }
-      },
+      style(states) {
+        return {
+          alignY: "middle",
+          marginLeft: 14,
+          padding: 1
+        };
+      }
+    },
 
-    "menu-button/arrow":
-      {
-        include: "image",
+    "menu-button/arrow": {
+      include: "image",
 
-        style: function(states) {
-          return {
-            source: qx.theme.tangible.Image.URLS[
+      style(states) {
+        return {
+          source:
+            qx.theme.tangible.Image.URLS[
               "arrow-right" + (states.selected ? "-invert" : "")
             ],
-            alignY: "middle"
-          };
-        }
-      },
 
-    "menu-checkbox":
-      {
-        alias: "menu-button",
-        include: "menu-button",
+          alignY: "middle"
+        };
+      }
+    },
+
+    "menu-checkbox": {
+      alias: "menu-button",
+      include: "menu-button",
 
-        style: function(states) {
-          var icon = "menu-checkbox";
-          if (states.checked) {
-            icon += "-checked";
-          }
-          return {icon: qx.theme.tangible.Image.URLS[icon]};
+      style(states) {
+        var icon = "menu-checkbox";
+        if (states.checked) {
+          icon += "-checked";
         }
-      },
+        return { icon: qx.theme.tangible.Image.URLS[icon] };
+      }
+    },
 
-    "menu-radiobutton":
-      {
-        alias: "menu-button",
-        include: "menu-button",
+    "menu-radiobutton": {
+      alias: "menu-button",
+      include: "menu-button",
 
-        style: function(states) {
-          var icon = "menu-radiobutton";
-          if (states.checked) {
-            icon += "-checked";
-          }
-          return {icon: qx.theme.tangible.Image.URLS[icon]};
+      style(states) {
+        var icon = "menu-radiobutton";
+        if (states.checked) {
+          icon += "-checked";
         }
-      },
-
+        return { icon: qx.theme.tangible.Image.URLS[icon] };
+      }
+    },
 
     /*
     ---------------------------------------------------------------------------
@@ -1015,39 +970,35 @@ qx.Theme.define("qx.theme.tangible.Appearance", {
     ---------------------------------------------------------------------------
     */
 
-    "menubar":
-      {
-        style: function(states) {
-          return {
-            backgroundColor: "surface",
-            padding: [4, 2]
-          };
-        }
-      },
-
-    "menubar-button":
-      {
-        style: function(states) {
-          var decorator;
-          var padding = [2, 6];
-          if (!states.disabled) {
-            if (states.pressed) {
-              decorator = "menubar-button-pressed";
-            }
-            else if (states.hovered) {
-              decorator = "menubar-button-hovered";
-            }
-          }
+    menubar: {
+      style(states) {
+        return {
+          backgroundColor: "surface",
+          padding: [4, 2]
+        };
+      }
+    },
 
-          return {
-            padding: padding,
-            cursor: states.disabled ? undefined : "pointer",
-            textColor: "text-on-primary",
-            decorator: decorator
-          };
+    "menubar-button": {
+      style(states) {
+        var decorator;
+        var padding = [2, 6];
+        if (!states.disabled) {
+          if (states.pressed) {
+            decorator = "menubar-button-pressed";
+          } else if (states.hovered) {
+            decorator = "menubar-button-hovered";
+          }
         }
-      },
 
+        return {
+          padding: padding,
+          cursor: states.disabled ? undefined : "pointer",
+          textColor: "text-on-primary",
+          decorator: decorator
+        };
+      }
+    },
 
     /*
     ---------------------------------------------------------------------------
@@ -1060,175 +1011,163 @@ qx.Theme.define("qx.theme.tangible.Appearance", {
     "row-layer": "widget",
     "column-layer": "widget",
 
-    "group-item":
-      {
-        include: "label",
-        alias: "label",
+    "group-item": {
+      include: "label",
+      alias: "label",
 
-        style: function(states) {
-          return {
-            padding: 4,
-            backgroundColor: "primary",
-            textColor: "text-on-primary",
-            font: "bold"
-          };
-        }
-      },
+      style(states) {
+        return {
+          padding: 4,
+          backgroundColor: "primary",
+          textColor: "text-on-primary",
+          font: "bold"
+        };
+      }
+    },
 
     "virtual-selectbox": "selectbox",
     "virtual-selectbox/dropdown": "popup",
-    "virtual-selectbox/dropdown/list": {alias: "virtual-list"},
+    "virtual-selectbox/dropdown/list": { alias: "virtual-list" },
 
     "virtual-combobox": "combobox",
     "virtual-combobox/dropdown": "popup",
-    "virtual-combobox/dropdown/list": {alias: "virtual-list"},
+    "virtual-combobox/dropdown/list": { alias: "virtual-list" },
 
-    "virtual-tree":
-      {
-        include: "tree",
-        alias: "tree",
+    "virtual-tree": {
+      include: "tree",
+      alias: "tree",
 
-        style: function(states) {
-          return {itemHeight: 21};
-        }
-      },
+      style(states) {
+        return { itemHeight: 21 };
+      }
+    },
 
     "virtual-tree-folder": "tree-folder",
     "virtual-tree-file": "tree-file",
 
-    "cell":
-      {
-        style: function(states) {
-          return {
-            backgroundColor:
-              states.selected ? "primary-selected"
-              : "surface",
-            textColor:
-              states.selected ? "text-on-primary"
-              : "text-primary-on-surface",
-            padding: [3, 6]
-          };
-        }
-      },
+    cell: {
+      style(states) {
+        return {
+          backgroundColor: states.selected ? "primary-selected" : "surface",
+          textColor: states.selected
+            ? "text-on-primary"
+            : "text-primary-on-surface",
+          padding: [3, 6]
+        };
+      }
+    },
 
     "cell-string": "cell",
-    "cell-number":
-      {
-        include: "cell",
-        style: function(states) {
-          return {textAlign: "right"};
-        }
-      },
+    "cell-number": {
+      include: "cell",
+      style(states) {
+        return { textAlign: "right" };
+      }
+    },
+
     "cell-image": "cell",
     "cell-boolean": "cell",
     "cell-atom": "cell",
     "cell-date": "cell",
     "cell-html": "cell",
 
-
     /*
     ---------------------------------------------------------------------------
       SCROLLBAR
     ---------------------------------------------------------------------------
     */
 
-    "scrollbar": {},
+    scrollbar: {},
     "scrollbar/slider": {},
 
-    "scrollbar/slider/knob":
-      {
-        style: function(states) {
-          var decorator = "scroll-knob";
-
-          if (!states.disabled) {
-            if (states.hovered && !states.pressed && !states.checked) {
-              decorator = "scroll-knob-hovered";
-            }
-            else if (states.hovered && (states.pressed || states.checked)) {
-              decorator = "scroll-knob-pressed-hovered";
-            }
-            else if (states.pressed || states.checked) {
-              decorator = "scroll-knob-pressed";
-            }
-          }
+    "scrollbar/slider/knob": {
+      style(states) {
+        var decorator = "scroll-knob";
 
-          return {
-            height: 8,
-            width: 8,
-            marginLeft: 2,
-            marginTop: 2,
-            cursor: states.disabled ? undefined : "pointer",
-            decorator: decorator,
-            minHeight: states.horizontal ? undefined : 30,
-            minWidth: states.horizontal ? 30 : undefined
-          };
+        if (!states.disabled) {
+          if (states.hovered && !states.pressed && !states.checked) {
+            decorator = "scroll-knob-hovered";
+          } else if (states.hovered && (states.pressed || states.checked)) {
+            decorator = "scroll-knob-pressed-hovered";
+          } else if (states.pressed || states.checked) {
+            decorator = "scroll-knob-pressed";
+          }
         }
-      },
 
+        return {
+          height: 8,
+          width: 8,
+          marginLeft: 2,
+          marginTop: 2,
+          cursor: states.disabled ? undefined : "pointer",
+          decorator: decorator,
+          minHeight: states.horizontal ? undefined : 30,
+          minWidth: states.horizontal ? 30 : undefined
+        };
+      }
+    },
 
-    "scrollbar/button":
-      {
-        style: function(states) {
-          return {
-            height: 0,
-            width: 0,
-            margin: [2, 2]
-          };
-        }
-      },
+    "scrollbar/button": {
+      style(states) {
+        return {
+          height: 0,
+          width: 0,
+          margin: [2, 2]
+        };
+      }
+    },
 
     "scrollbar/button-begin": "scrollbar/button",
     "scrollbar/button-end": "scrollbar/button",
 
-
     /*
     ---------------------------------------------------------------------------
       SCROLLAREA
     ---------------------------------------------------------------------------
     */
 
-    "scrollarea/corner":
-      {
-        style: function(states) {
-          return {backgroundColor: "surface"};
-        }
-      },
+    "scrollarea/corner": {
+      style(states) {
+        return { backgroundColor: "surface" };
+      }
+    },
 
-    "scrollarea": "widget",
+    scrollarea: "widget",
     "scrollarea/pane": "widget",
     "scrollarea/scrollbar-x": "scrollbar",
     "scrollarea/scrollbar-y": "scrollbar",
 
-
-
     /*
     ---------------------------------------------------------------------------
       RADIO BUTTON
     ---------------------------------------------------------------------------
     */
 
-    "radiobutton":
-      {
-        style: function(states) {
-          return {
-            icon: qx.theme.tangible.Image.URLS[
-                states.checked ? "radiobutton-checked"
-                : "radiobutton-unchecked"],
-            paddingTop: 2,
-            textColor:
-                states.disabled ? "text-disabled-on-surface" :
-                states.invalid ? "error" :
-                states.checked ? "primary"
-                : "text-primary-on-surface",
-            gap: 6
-          };
-        }
-      },
+    radiobutton: {
+      style(states) {
+        return {
+          icon: qx.theme.tangible.Image.URLS[
+            states.checked ? "radiobutton-checked" : "radiobutton-unchecked"
+          ],
+
+          paddingTop: 2,
+          textColor: states.disabled
+            ? "text-disabled-on-surface"
+            : states.invalid
+            ? "error"
+            : states.checked
+            ? "primary"
+            : "text-primary-on-surface",
+          gap: 6
+        };
+      }
+    },
+
     "radiobutton/icon": {
-      style: function(states) {
+      style(states) {
         return {
           decorator: "radiobutton",
-          padding: [2,0,0,0]
+          padding: [2, 0, 0, 0]
         };
       }
     },
@@ -1240,8 +1179,8 @@ qx.Theme.define("qx.theme.tangible.Appearance", {
     */
     "form-renderer-label": {
       include: "label",
-      style: function() {
-        return {paddingTop: 3};
+      style() {
+        return { paddingTop: 3 };
       }
     },
 
@@ -1250,30 +1189,33 @@ qx.Theme.define("qx.theme.tangible.Appearance", {
       CHECK BOX
     ---------------------------------------------------------------------------
     */
-    "checkbox":
-      {
-        alias: "atom",
-
-        style: function(states) {
-          return {
-            icon:
-            qx.theme.tangible.Image.URLS[
-                states.checked ? "checkbox-checked" :
-                states.undetermined ? "checkbox-undetermined"
-                : "checkbox-blank"],
-            textColor:
-                states.disabled ? "text-disabled-on-surface" :
-                states.invalid ? "error" :
-                states.checked ? "primary"
-                : "text-primary-on-surface",
-            gap: 6
-          };
-        }
-      },
+    checkbox: {
+      alias: "atom",
 
+      style(states) {
+        return {
+          icon: qx.theme.tangible.Image.URLS[
+            states.checked
+              ? "checkbox-checked"
+              : states.undetermined
+              ? "checkbox-undetermined"
+              : "checkbox-blank"
+          ],
+
+          textColor: states.disabled
+            ? "text-disabled-on-surface"
+            : states.invalid
+            ? "error"
+            : states.checked
+            ? "primary"
+            : "text-primary-on-surface",
+          gap: 6
+        };
+      }
+    },
 
     "checkbox/icon": {
-      style: function(states) {
+      style(states) {
         return {
           decorator: "checkbox",
           padding: 0
@@ -1281,54 +1223,51 @@ qx.Theme.define("qx.theme.tangible.Appearance", {
       }
     },
 
-
     /*
     ---------------------------------------------------------------------------
       SPINNER
     ---------------------------------------------------------------------------
     */
 
-    "spinner":
-      {
-        style: function(states) {
-          return {textColor: states.disabled ? "text-disabled-on-surface" : undefined};
-        }
-      },
+    spinner: {
+      style(states) {
+        return {
+          textColor: states.disabled ? "text-disabled-on-surface" : undefined
+        };
+      }
+    },
 
     "spinner/textfield": "textfield",
 
-    "spinner/upbutton":
-      {
-        alias: "combobox/button",
-        include: "combobox/button",
-
-        style: function(states) {
-          return {
-            icon: qx.theme.tangible.Image.URLS["arrow-up-small"],
-            decorator: undefined,
-            width: 12,
-            height: 6,
-            padding: [-1, 0, 0, 0]
-          };
-        }
-      },
+    "spinner/upbutton": {
+      alias: "combobox/button",
+      include: "combobox/button",
 
-    "spinner/downbutton":
-      {
-        alias: "combobox/button",
-        include: "combobox/button",
+      style(states) {
+        return {
+          icon: qx.theme.tangible.Image.URLS["arrow-up-small"],
+          decorator: undefined,
+          width: 12,
+          height: 6,
+          padding: [-1, 0, 0, 0]
+        };
+      }
+    },
 
-        style: function(states) {
-          return {
-            icon: qx.theme.tangible.Image.URLS["arrow-down-small"],
-            decorator: undefined,
-            width: 12,
-            height: 6,
-            padding: [-1, 0, 0, 0]
-          };
-        }
-      },
+    "spinner/downbutton": {
+      alias: "combobox/button",
+      include: "combobox/button",
 
+      style(states) {
+        return {
+          icon: qx.theme.tangible.Image.URLS["arrow-down-small"],
+          decorator: undefined,
+          width: 12,
+          height: 6,
+          padding: [-1, 0, 0, 0]
+        };
+      }
+    },
 
     /*
     ---------------------------------------------------------------------------
@@ -1336,7 +1275,7 @@ qx.Theme.define("qx.theme.tangible.Appearance", {
     ---------------------------------------------------------------------------
     */
 
-    "selectbox": "textfield",
+    selectbox: "textfield",
 
     "selectbox/atom": "atom",
     "selectbox/popup": "popup",
@@ -1344,25 +1283,23 @@ qx.Theme.define("qx.theme.tangible.Appearance", {
       alias: "list",
       include: "list",
 
-      style: function() {
-        return {decorator: undefined};
+      style() {
+        return { decorator: undefined };
       }
     },
 
-    "selectbox/arrow":
-      {
-        include: "image",
-
-        style: function(states) {
-          return {
-            source: qx.theme.tangible.Image.URLS["arrow-down"],
-            paddingRight: 0,
-            paddingLeft: 2,
-            paddingTop: -3
-          };
-        }
-      },
+    "selectbox/arrow": {
+      include: "image",
 
+      style(states) {
+        return {
+          source: qx.theme.tangible.Image.URLS["arrow-down"],
+          paddingRight: 0,
+          paddingLeft: 2,
+          paddingTop: -3
+        };
+      }
+    },
 
     /*
     ---------------------------------------------------------------------------
@@ -1372,104 +1309,99 @@ qx.Theme.define("qx.theme.tangible.Appearance", {
     "checked-selectbox": "selectbox",
     "checked-selectbox/allNone": {
       include: "button",
-      style: function(states) {
+      style(states) {
         return {
-          padding: [ 2, 10 ],
+          padding: [2, 10],
           textColor: "text-on-primary"
         };
       }
     },
+
     "checked-selectbox/tag": "tag",
-    "tag": {
+    tag: {
       alias: "button",
       include: "button",
-      style: function(states) {
+      style(states) {
         return {
-          padding: [ 1, 7 ],
+          padding: [1, 7],
           margin: 0,
           decorator: "tag"
         };
       }
     },
 
-
     /*
     ---------------------------------------------------------------------------
       COMBO BOX
     ---------------------------------------------------------------------------
     */
 
-    "combobox": {},
+    combobox: {},
 
-    "combobox/button":
-      {
-        alias: "button-frame",
-        include: "button-frame",
+    "combobox/button": {
+      alias: "button-frame",
+      include: "button-frame",
 
-        style: function(states) {
-          var decorator = "material-textfield";
-          if (states.focused) {
-            decorator += "-focused";
-            if (states.invalid) {
-              decorator += "-invalid";
-            }
-          }
-          else if (states.invalid) {
+      style(states) {
+        var decorator = "material-textfield";
+        if (states.focused) {
+          decorator += "-focused";
+          if (states.invalid) {
             decorator += "-invalid";
           }
-          else if (states.disabled) {
-            decorator += "-disabled";
-          }
-
-          return {
-            backgroundColor: undefined,
-            icon: qx.theme.tangible.Image.URLS["arrow-down"],
-            decorator: decorator,
-            padding: [0, 0, 0, 0]
-          };
+        } else if (states.invalid) {
+          decorator += "-invalid";
+        } else if (states.disabled) {
+          decorator += "-disabled";
         }
-      },
+
+        return {
+          backgroundColor: undefined,
+          icon: qx.theme.tangible.Image.URLS["arrow-down"],
+          decorator: decorator,
+          padding: [0, 0, 0, 0]
+        };
+      }
+    },
 
     "combobox/popup": "popup",
     "combobox/list": {
       alias: "list",
-      style: function(states) {
-        return {paddingRight: 2};
+      style(states) {
+        return { paddingRight: 2 };
       }
     },
 
     "combobox/textfield": "textfield",
 
-
     /*
     ---------------------------------------------------------------------------
       DATEFIELD
     ---------------------------------------------------------------------------
     */
 
-    "datefield": "textfield",
+    datefield: "textfield",
 
-    "datefield/button":
-      {
-        alias: "combobox/button",
-        include: "combobox/button",
+    "datefield/button": {
+      alias: "combobox/button",
+      include: "combobox/button",
 
-        style: function(states) {
-          return {
-            icon: "@MaterialIcons/calendar_today/14",
-            padding: [0, 0, 0, 0],
-            backgroundColor: undefined,
-            decorator: undefined,
-            width: 16
-          };
-        }
-      },
+      style(states) {
+        return {
+          icon: "@MaterialIcons/calendar_today/14",
+          padding: [0, 0, 0, 0],
+          backgroundColor: undefined,
+          decorator: undefined,
+          width: 16
+        };
+      }
+    },
 
     "datefield/textfield": {
       alias: "textfield",
       include: "textfield",
 
-      style: function(states) {
+      style(states) {
         return {
           decorator: undefined,
           padding: 0
@@ -1477,17 +1409,14 @@ qx.Theme.define("qx.theme.tangible.Appearance", {
       }
     },
 
-    "datefield/list":
-      {
-        alias: "datechooser",
-        include: "datechooser",
-
-        style: function(states) {
-          return {decorator: undefined};
-        }
-      },
-
+    "datefield/list": {
+      alias: "datechooser",
+      include: "datechooser",
 
+      style(states) {
+        return { decorator: undefined };
+      }
+    },
 
     /*
     ---------------------------------------------------------------------------
@@ -1495,46 +1424,43 @@ qx.Theme.define("qx.theme.tangible.Appearance", {
     ---------------------------------------------------------------------------
     */
 
-    "list":
-      {
-        alias: "scrollarea",
-        include: "framebox"
-      },
-
-    "listitem":
-      {
-        alias: "atom",
+    list: {
+      alias: "scrollarea",
+      include: "framebox"
+    },
 
-        style: function(states) {
-          var padding = [3, 5, 3, 5];
-          if (states.lead) {
-            padding = [2, 4, 2, 4];
-          }
-          if (states.dragover) {
-            padding[2] -= 2;
-          }
+    listitem: {
+      alias: "atom",
 
-          return {
-            gap: 4,
-            padding: padding,
-            backgroundColor:
-                states.selected ?
-                    states.disabled ? "primary-disabled"
-                    : "primary"
-                : "transparent",
-            textColor:
-                states.selected ?
-                  "text-on-primary"
-                  : "text-primary-on-surface",
-            decorator:
-                states.lead ? "lead-item" :
-                states.dragover ? "dragover"
-                : undefined,
-            opacity: states.drag ? 0.5 : undefined
-          };
+      style(states) {
+        var padding = [3, 5, 3, 5];
+        if (states.lead) {
+          padding = [2, 4, 2, 4];
+        }
+        if (states.dragover) {
+          padding[2] -= 2;
         }
-      },
 
+        return {
+          gap: 4,
+          padding: padding,
+          backgroundColor: states.selected
+            ? states.disabled
+              ? "primary-disabled"
+              : "primary"
+            : "transparent",
+          textColor: states.selected
+            ? "text-on-primary"
+            : "text-primary-on-surface",
+          decorator: states.lead
+            ? "lead-item"
+            : states.dragover
+            ? "dragover"
+            : undefined,
+          opacity: states.drag ? 0.5 : undefined
+        };
+      }
+    },
 
     /*
     ---------------------------------------------------------------------------
@@ -1542,41 +1468,32 @@ qx.Theme.define("qx.theme.tangible.Appearance", {
     ---------------------------------------------------------------------------
     */
 
-    "slider":
-      {
-        style: function(states) {
-          var decorator;
-          var padding;
-          if (states.disabled) {
-            decorator = "border-disabled";
-            padding = [1, 2];
-          }
-          else if (states.invalid) {
-            decorator = "border-invalid";
-            padding = [1, 2];
-          }
-          else if (states.focused) {
-            decorator = "border-focused";
-            padding = [1, 2];
-          }
-          else {
-            padding = [1, 2];
-            decorator = "border";
-          }
-
-          return {
-            decorator: decorator,
-            padding: padding
-          };
+    slider: {
+      style(states) {
+        var decorator;
+        var padding;
+        if (states.disabled) {
+          decorator = "border-disabled";
+          padding = [1, 2];
+        } else if (states.invalid) {
+          decorator = "border-invalid";
+          padding = [1, 2];
+        } else if (states.focused) {
+          decorator = "border-focused";
+          padding = [1, 2];
+        } else {
+          padding = [1, 2];
+          decorator = "border";
         }
-      },
-
-    "slider/knob": "scrollbar/slider/knob",
-
-
-
 
+        return {
+          decorator: decorator,
+          padding: padding
+        };
+      }
+    },
 
+    "slider/knob": "scrollbar/slider/knob",
 
     /*
     ---------------------------------------------------------------------------
@@ -1584,69 +1501,63 @@ qx.Theme.define("qx.theme.tangible.Appearance", {
     ---------------------------------------------------------------------------
     */
 
-    "groupbox": {},
+    groupbox: {},
 
-    "groupbox/legend":
-      {
-        alias: "atom",
+    "groupbox/legend": {
+      alias: "atom",
 
-        style: function(states) {
-          return {
-            textColor: states.invalid ? "error" : undefined,
-            padding: 5,
-            margin: 4,
-            font: "bold"
-          };
-        }
-      },
+      style(states) {
+        return {
+          textColor: states.invalid ? "error" : undefined,
+          padding: 5,
+          margin: 4,
+          font: "bold"
+        };
+      }
+    },
 
-    "groupbox/frame":
-      {
-        style: function(states) {
-          return {
-            backgroundColor: "surface",
-            padding: [6, 9],
-            margin: [18, 2, 2, 2],
-            decorator: "box"
-          };
-        }
-      },
+    "groupbox/frame": {
+      style(states) {
+        return {
+          backgroundColor: "surface",
+          padding: [6, 9],
+          margin: [18, 2, 2, 2],
+          decorator: "box"
+        };
+      }
+    },
 
     "check-groupbox": "groupbox",
 
-    "check-groupbox/legend":
-      {
-        alias: "checkbox",
-        include: "checkbox",
+    "check-groupbox/legend": {
+      alias: "checkbox",
+      include: "checkbox",
 
-        style: function(states) {
-          return {
-            textColor: states.invalid ? "error" : undefined,
-            padding: 5,
-            margin: 4,
-            font: "bold"
-          };
-        }
-      },
+      style(states) {
+        return {
+          textColor: states.invalid ? "error" : undefined,
+          padding: 5,
+          margin: 4,
+          font: "bold"
+        };
+      }
+    },
 
     "radio-groupbox": "groupbox",
 
-    "radio-groupbox/legend":
-      {
-        alias: "radiobutton",
-        include: "radiobutton",
-
-        style: function(states) {
-          return {
-            textColor: states.invalid ? "error" : undefined,
-            padding: 5,
-            margin: 4,
-            font: "bold"
-          };
-        }
-      },
-
+    "radio-groupbox/legend": {
+      alias: "radiobutton",
+      include: "radiobutton",
 
+      style(states) {
+        return {
+          textColor: states.invalid ? "error" : undefined,
+          padding: 5,
+          margin: 4,
+          font: "bold"
+        };
+      }
+    },
 
     /*
     ---------------------------------------------------------------------------
@@ -1654,93 +1565,84 @@ qx.Theme.define("qx.theme.tangible.Appearance", {
     ---------------------------------------------------------------------------
     */
 
-    "tree-folder/open":
-      {
-        include: "image",
-        style: function(states) {
-          return {
-            source: states.opened ?
-              qx.theme.tangible.Image.URLS["tree-minus"] :
-              qx.theme.tangible.Image.URLS["tree-plus"],
-            textColor:
-                states.selected ? "text-on-primary"
-                : "text-primary-on-surface"
-          };
-        }
-      },
-
-
-    "tree-folder":
-      {
-        style: function(states) {
-          return {
-            padding: [2, 8, 2, 5],
-            icon: states.opened ?
-              qx.theme.tangible.Image.URLS["folder-open"] :
-              qx.theme.tangible.Image.URLS["folder"],
-            backgroundColor:
-                states.selected ?
-                    states.disables ? "primary-disabled"
-                    : "primary-selected"
-                : "surface",
-            textColor:
-                states.selected ? "text-on-primary"
-                 : "text-disabled-on-primary",
-            iconOpened: qx.theme.tangible.Image.URLS["folder-open"],
-            opacity: states.drag ? 0.5 : undefined
-          };
-        }
-      },
-
-    "tree-folder/icon":
-      {
-        include: "image",
-        style: function(states) {
-          return {
-            padding: [0, 4, 0, 0],
-            textColor:
-                states.selected ? "text-icon-on-primary"
-                : "text-primary-on-surface"
-          };
-        }
-      },
+    "tree-folder/open": {
+      include: "image",
+      style(states) {
+        return {
+          source: states.opened
+            ? qx.theme.tangible.Image.URLS["tree-minus"]
+            : qx.theme.tangible.Image.URLS["tree-plus"],
+          textColor: states.selected
+            ? "text-on-primary"
+            : "text-primary-on-surface"
+        };
+      }
+    },
 
-    "tree-folder/label":
-      {
-        style: function(states) {
-          return {
-            padding: [1, 2],
-            textColor:
-                states.selected ? "text-on-primary"
-                : "text-primary-on-surface"
-          };
-        }
-      },
+    "tree-folder": {
+      style(states) {
+        return {
+          padding: [2, 8, 2, 5],
+          icon: states.opened
+            ? qx.theme.tangible.Image.URLS["folder-open"]
+            : qx.theme.tangible.Image.URLS["folder"],
+          backgroundColor: states.selected
+            ? states.disables
+              ? "primary-disabled"
+              : "primary-selected"
+            : "surface",
+          textColor: states.selected
+            ? "text-on-primary"
+            : "text-disabled-on-primary",
+          iconOpened: qx.theme.tangible.Image.URLS["folder-open"],
+          opacity: states.drag ? 0.5 : undefined
+        };
+      }
+    },
 
-    "tree-file":
-      {
-        include: "tree-folder",
-        alias: "tree-folder",
+    "tree-folder/icon": {
+      include: "image",
+      style(states) {
+        return {
+          padding: [0, 4, 0, 0],
+          textColor: states.selected
+            ? "text-icon-on-primary"
+            : "text-primary-on-surface"
+        };
+      }
+    },
 
-        style: function(states) {
-          return {icon: qx.theme.tangible.Image.URLS["file"]};
-        }
-      },
+    "tree-folder/label": {
+      style(states) {
+        return {
+          padding: [1, 2],
+          textColor: states.selected
+            ? "text-on-primary"
+            : "text-primary-on-surface"
+        };
+      }
+    },
 
-    "tree":
-      {
-        include: "list",
-        alias: "list",
+    "tree-file": {
+      include: "tree-folder",
+      alias: "tree-folder",
 
-        style: function(states) {
-          return {
-            contentPadding: [4, 1],
-            padding: 1
-          };
-        }
-      },
+      style(states) {
+        return { icon: qx.theme.tangible.Image.URLS["file"] };
+      }
+    },
 
+    tree: {
+      include: "list",
+      alias: "list",
 
+      style(states) {
+        return {
+          contentPadding: [4, 1],
+          padding: 1
+        };
+      }
+    },
 
     /*
     ---------------------------------------------------------------------------
@@ -1748,129 +1650,121 @@ qx.Theme.define("qx.theme.tangible.Appearance", {
     ---------------------------------------------------------------------------
     */
 
-    "window":
-      {
-        style: function(states) {
-          return {
-            contentPadding: [10, 10, 10, 10],
-            backgroundColor: "surface",
-            decorator: states.maximized ? undefined : states.active ? "window-active" : "window"
-          };
-        }
-      },
+    window: {
+      style(states) {
+        return {
+          contentPadding: [10, 10, 10, 10],
+          backgroundColor: "surface",
+          decorator: states.maximized
+            ? undefined
+            : states.active
+            ? "window-active"
+            : "window"
+        };
+      }
+    },
 
     "window-resize-frame": "resize-frame",
 
     "window/pane": {
-      style: function(states) {
-        return {padding: 10};
+      style(states) {
+        return { padding: 10 };
       }
     },
 
-    "window/captionbar":
-      {
-        style: function(states) {
-          return {
-            backgroundColor:
-                states.active ? "primary-selected"
-                : "primary",
-            margin: 0,
-            padding: 8,
-            decorator: "window-caption"
-          };
-        }
-      },
+    "window/captionbar": {
+      style(states) {
+        return {
+          backgroundColor: states.active ? "primary-selected" : "primary",
+          margin: 0,
+          padding: 8,
+          decorator: "window-caption"
+        };
+      }
+    },
 
-    "window/icon":
-      {
-        style: function(states) {
-          return {
-            marginRight: 4,
-            marginTop: 2
-          };
-        }
-      },
+    "window/icon": {
+      style(states) {
+        return {
+          marginRight: 4,
+          marginTop: 2
+        };
+      }
+    },
 
-    "window/title":
-      {
-        style: function(states) {
-          return {
-            cursor: "default",
-            font: states.active ? "bold" : "default",
-            textColor: states.active ? "text-on-primary"
-            : "text-on-primary",
-            marginRight: 20,
-            marginLeft: 4,
-            alignY: "middle"
-          };
-        }
-      },
+    "window/title": {
+      style(states) {
+        return {
+          cursor: "default",
+          font: states.active ? "bold" : "default",
+          textColor: states.active ? "text-on-primary" : "text-on-primary",
+          marginRight: 20,
+          marginLeft: 4,
+          alignY: "middle"
+        };
+      }
+    },
 
-    "window/minimize-button":
-      {
-        alias: "button",
+    "window/minimize-button": {
+      alias: "button",
 
-        style: function(states) {
-          return {
-            icon: qx.theme.tangible.Image.URLS["window-minimize"]+"/18",
-            padding: 0,
-            cursor: states.disabled ? undefined : "pointer",
-            textColor: "text-on-primary"
-          };
-        }
-      },
+      style(states) {
+        return {
+          icon: qx.theme.tangible.Image.URLS["window-minimize"] + "/18",
+          padding: 0,
+          cursor: states.disabled ? undefined : "pointer",
+          textColor: "text-on-primary"
+        };
+      }
+    },
 
-    "window/restore-button":
-      {
-        alias: "button",
+    "window/restore-button": {
+      alias: "button",
 
-        style: function(states) {
-          return {
-            icon: qx.theme.tangible.Image.URLS["window-restore"]+"/18",
-            padding: 0,
-            cursor: states.disabled ? undefined : "pointer",
-            textColor: "text-on-primary"
-          };
-        }
-      },
+      style(states) {
+        return {
+          icon: qx.theme.tangible.Image.URLS["window-restore"] + "/18",
+          padding: 0,
+          cursor: states.disabled ? undefined : "pointer",
+          textColor: "text-on-primary"
+        };
+      }
+    },
 
-    "window/maximize-button":
-      {
-        alias: "button",
+    "window/maximize-button": {
+      alias: "button",
 
-        style: function(states) {
-          return {
-            icon: qx.theme.tangible.Image.URLS["window-maximize"]+"/18",
-            padding: 0,
-            cursor: states.disabled ? undefined : "pointer",
-            textColor: "text-on-primary"
-          };
-        }
-      },
+      style(states) {
+        return {
+          icon: qx.theme.tangible.Image.URLS["window-maximize"] + "/18",
+          padding: 0,
+          cursor: states.disabled ? undefined : "pointer",
+          textColor: "text-on-primary"
+        };
+      }
+    },
 
-    "window/close-button":
-      {
-        alias: "button",
+    "window/close-button": {
+      alias: "button",
 
-        style: function(states) {
-          return {
-            icon: qx.theme.tangible.Image.URLS["window-close"]+"/18",
-            padding: 0,
-            cursor: states.disabled ? undefined : "pointer",
-            textColor: "text-on-primary"
-          };
-        }
-      },
+      style(states) {
+        return {
+          icon: qx.theme.tangible.Image.URLS["window-close"] + "/18",
+          padding: 0,
+          cursor: states.disabled ? undefined : "pointer",
+          textColor: "text-on-primary"
+        };
+      }
+    },
 
-    "window/statusbar":
-      {
-        style: function(states) {
-          return {
-            decorator: "statusbar",
-            padding: [2, 6]
-          };
-        }
-      },
+    "window/statusbar": {
+      style(states) {
+        return {
+          decorator: "statusbar",
+          padding: [2, 6]
+        };
+      }
+    },
 
     "window/statusbar-text": "label",
 
@@ -1879,26 +1773,28 @@ qx.Theme.define("qx.theme.tangible.Appearance", {
       DATE CHOOSER
     ---------------------------------------------------------------------------
     */
-    "datechooser":
-      {
-        style: function(states) {
-          return {
-            decorator: "main",
-            minWidth: 220
-          };
-        }
-      },
+    datechooser: {
+      style(states) {
+        return {
+          decorator: "main",
+          minWidth: 220
+        };
+      }
+    },
 
-    "datechooser/navigation-bar":
-      {
-        style: function(states) {
-          return {
-            backgroundColor: "surface",
-            textColor: states.disabled ? "text-disabled-on-surface" : states.invalid ? "error" : undefined,
-            padding: [2, 10]
-          };
-        }
-      },
+    "datechooser/navigation-bar": {
+      style(states) {
+        return {
+          backgroundColor: "surface",
+          textColor: states.disabled
+            ? "text-disabled-on-surface"
+            : states.invalid
+            ? "error"
+            : undefined,
+          padding: [2, 10]
+        };
+      }
+    },
 
     "datechooser/last-year-button-tooltip": "tooltip",
     "datechooser/last-month-button-tooltip": "tooltip",
@@ -1911,142 +1807,120 @@ qx.Theme.define("qx.theme.tangible.Appearance", {
     "datechooser/next-month-button": "datechooser/button",
     "datechooser/button/icon": {},
 
-    "datechooser/button":
-      {
-        style: function(states) {
-          var result = {
-            width: 17,
-            show: "icon",
-            cursor: states.disabled ? undefined : "pointer"
-          };
-
-          if (states.lastYear) {
-            result.icon = qx.theme.tangible.Image.URLS["arrow-rewind"];
-          }
-          else if (states.lastMonth) {
-            result.icon = qx.theme.tangible.Image.URLS["arrow-left"];
-          }
-          else if (states.nextYear) {
-            result.icon = qx.theme.tangible.Image.URLS["arrow-forward"];
-          }
-          else if (states.nextMonth) {
-            result.icon = qx.theme.tangible.Image.URLS["arrow-right"];
-          }
-
-          return result;
-        }
-      },
-
-    "datechooser/month-year-label":
-      {
-        style: function(states) {
-          return {
-            font: "bold",
-            textAlign: "center"
-          };
-        }
-      },
-
-    "datechooser/date-pane":
-      {
-        style: function(states) {
-          return {
-            decorator: "datechooser-date-pane",
-            backgroundColor: "surface"
-          };
-        }
-      },
+    "datechooser/button": {
+      style(states) {
+        var result = {
+          width: 17,
+          show: "icon",
+          cursor: states.disabled ? undefined : "pointer"
+        };
 
-    "datechooser/weekday":
-      {
-        style: function(states) {
-          return {
-            decorator: "datechooser-weekday",
-            font: states.weekend ? "bold" : "default",
-            textAlign: "center",
-            textColor:
-                states.disabled ? "text-disabled-on-surface" :
-                "text-primary-on-surface",
-            backgroundColor:
-                "surface",
-            paddingTop: 2
-          };
+        if (states.lastYear) {
+          result.icon = qx.theme.tangible.Image.URLS["arrow-rewind"];
+        } else if (states.lastMonth) {
+          result.icon = qx.theme.tangible.Image.URLS["arrow-left"];
+        } else if (states.nextYear) {
+          result.icon = qx.theme.tangible.Image.URLS["arrow-forward"];
+        } else if (states.nextMonth) {
+          result.icon = qx.theme.tangible.Image.URLS["arrow-right"];
         }
-      },
 
-    "datechooser/day":
-      {
-        style: function(states) {
-          return {
-            textAlign: "center",
-            decorator:
-                states.today ? "main" :
-                undefined,
-            textColor:
-                states.disabled ? "text-disabled-on-surface" :
-                states.selected ? "text-on-primary" :
-                states.otherMonth ? "text-disabled-on-surface" :
-                undefined,
-            backgroundColor:
-                states.selected ?
-                    states.disabled ? "primary-disabled"
-                    : "primary"
-                : undefined,
-            padding:
-                states.today ? [1, 3] :
-                [2, 4]
-          };
-        }
-      },
+        return result;
+      }
+    },
 
-    "datechooser/week":
-      {
-        style: function(states) {
-          return {
-            textAlign: "center",
-            textColor: "text-primary-on-surface",
-            padding: [2, 4],
-            decorator:
-                states.header ? "datechooser-week-header" :
-                "datechooser-week"
-          };
-        }
-      },
+    "datechooser/month-year-label": {
+      style(states) {
+        return {
+          font: "bold",
+          textAlign: "center"
+        };
+      }
+    },
 
+    "datechooser/date-pane": {
+      style(states) {
+        return {
+          decorator: "datechooser-date-pane",
+          backgroundColor: "surface"
+        };
+      }
+    },
 
+    "datechooser/weekday": {
+      style(states) {
+        return {
+          decorator: "datechooser-weekday",
+          font: states.weekend ? "bold" : "default",
+          textAlign: "center",
+          textColor: states.disabled
+            ? "text-disabled-on-surface"
+            : "text-primary-on-surface",
+          backgroundColor: "surface",
+          paddingTop: 2
+        };
+      }
+    },
 
+    "datechooser/day": {
+      style(states) {
+        return {
+          textAlign: "center",
+          decorator: states.today ? "main" : undefined,
+          textColor: states.disabled
+            ? "text-disabled-on-surface"
+            : states.selected
+            ? "text-on-primary"
+            : states.otherMonth
+            ? "text-disabled-on-surface"
+            : undefined,
+          backgroundColor: states.selected
+            ? states.disabled
+              ? "primary-disabled"
+              : "primary"
+            : undefined,
+          padding: states.today ? [1, 3] : [2, 4]
+        };
+      }
+    },
 
+    "datechooser/week": {
+      style(states) {
+        return {
+          textAlign: "center",
+          textColor: "text-primary-on-surface",
+          padding: [2, 4],
+          decorator: states.header
+            ? "datechooser-week-header"
+            : "datechooser-week"
+        };
+      }
+    },
 
     /*
     ---------------------------------------------------------------------------
       PROGRESSBAR
     ---------------------------------------------------------------------------
     */
-    "progressbar":
-      {
-        style: function(states) {
-          return {
-            decorator: "progressbar",
-            padding: 1,
-            backgroundColor: "surface",
-            width: 200,
-            height: 20
-          };
-        }
-      },
-
-    "progressbar/progress":
-      {
-        style: function(states) {
-          return {
-            backgroundColor: states.disabled ?
-              "primary-disabled" :
-              "primary"
-          };
-        }
-      },
-
+    progressbar: {
+      style(states) {
+        return {
+          decorator: "progressbar",
+          padding: 1,
+          backgroundColor: "surface",
+          width: 200,
+          height: 20
+        };
+      }
+    },
 
+    "progressbar/progress": {
+      style(states) {
+        return {
+          backgroundColor: states.disabled ? "primary-disabled" : "primary"
+        };
+      }
+    },
 
     /*
     ---------------------------------------------------------------------------
@@ -2054,140 +1928,140 @@ qx.Theme.define("qx.theme.tangible.Appearance", {
     ---------------------------------------------------------------------------
     */
 
-    "toolbar":
-      {
-        style: function(states) {
-          return {
-            backgroundColor: "primary",
-            padding: 0
-          };
-        }
-      },
+    toolbar: {
+      style(states) {
+        return {
+          backgroundColor: "primary",
+          padding: 0
+        };
+      }
+    },
 
     "toolbar/part": {
-      style: function(states) {
-        return {margin: [0, 15]};
+      style(states) {
+        return { margin: [0, 15] };
       }
     },
 
     "toolbar/part/container": {},
     "toolbar/part/handle": {},
 
-    "toolbar-separator":
-      {
-        style: function(states) {
-          return {
-            decorator: undefined,
-            margin: [7, 0],
-            width: 4
-          };
-        }
-      },
-
-    "toolbar-button":
-      {
-        alias: "atom",
+    "toolbar-separator": {
+      style(states) {
+        return {
+          decorator: undefined,
+          margin: [7, 0],
+          width: 4
+        };
+      }
+    },
 
-        style: function(states) {
-          // set the margin
-          var margin = [7, 10];
-          if (states.left || states.middle || states.right) {
-            margin = [7, 3];
-          }
-          var decorator = "toolbar-button";
-          if (states.hovered || states.pressed || states.checked) {
-            decorator += "-hovered";
-          }
+    "toolbar-button": {
+      alias: "atom",
 
-          return {
-            cursor: states.disabled ? undefined : "pointer",
-            decorator: decorator,
-            textColor: "text-on-primary",
-            margin: margin,
-            padding: [3, 5]
-          };
+      style(states) {
+        // set the margin
+        var margin = [7, 10];
+        if (states.left || states.middle || states.right) {
+          margin = [7, 3];
         }
-      },
-
-    "toolbar-menubutton":
-      {
-        alias: "toolbar-button",
-        include: "toolbar-button",
-
-        style: function(states) {
-          return {showArrow: true};
+        var decorator = "toolbar-button";
+        if (states.hovered || states.pressed || states.checked) {
+          decorator += "-hovered";
         }
-      },
-
-    "toolbar-menubutton/arrow":
-      {
-        alias: "image",
-        include: "image",
 
-        style: function(states) {
-          return {
-            source: qx.theme.tangible.Image.URLS["arrow-down"],
-            cursor: states.disabled ? undefined : "pointer",
-            padding: 0,
-            textColor: "text-on-primary",
-            marginLeft: 2
-          };
-        }
-      },
+        return {
+          cursor: states.disabled ? undefined : "pointer",
+          decorator: decorator,
+          textColor: "text-on-primary",
+          margin: margin,
+          padding: [3, 5]
+        };
+      }
+    },
 
-    "toolbar-splitbutton": {},
+    "toolbar-menubutton": {
+      alias: "toolbar-button",
+      include: "toolbar-button",
 
-    "toolbar-splitbutton/button":
-      {
-        alias: "toolbar-button",
-        include: "toolbar-button",
+      style(states) {
+        return { showArrow: true };
+      }
+    },
 
-        style: function(states) {
-          // set the margin
-          var margin = [7, 0,7,10];
-          if (states.left || states.middle || states.right) {
-            margin = [7, 0,7,3];
-          }
-          var decorator = "toolbar-button";
-          if (states.hovered || states.pressed || states.focused ||states.checked) {
-            decorator += "-hovered";
-          }
-          decorator += "-left";
+    "toolbar-menubutton/arrow": {
+      alias: "image",
+      include: "image",
 
-          return {
-            decorator: decorator,
-            margin: margin
-          };
-        }
-      },
+      style(states) {
+        return {
+          source: qx.theme.tangible.Image.URLS["arrow-down"],
+          cursor: states.disabled ? undefined : "pointer",
+          padding: 0,
+          textColor: "text-on-primary",
+          marginLeft: 2
+        };
+      }
+    },
 
+    "toolbar-splitbutton": {},
 
-    "toolbar-splitbutton/arrow":
-      {
-        alias: "toolbar-button",
-        include: "toolbar-button",
+    "toolbar-splitbutton/button": {
+      alias: "toolbar-button",
+      include: "toolbar-button",
 
-        style: function(states) {
-          // set the margin
-          var margin = [7, 10,7,0];
-          if (states.left || states.middle || states.right) {
-            margin = [7, 3,7,0];
-          }
-          var decorator = "toolbar-button";
-          if (states.hovered || states.pressed || states.focused ||states.checked) {
-            decorator += "-hovered";
-          }
-          decorator += "-right";
+      style(states) {
+        // set the margin
+        var margin = [7, 0, 7, 10];
+        if (states.left || states.middle || states.right) {
+          margin = [7, 0, 7, 3];
+        }
+        var decorator = "toolbar-button";
+        if (
+          states.hovered ||
+          states.pressed ||
+          states.focused ||
+          states.checked
+        ) {
+          decorator += "-hovered";
+        }
+        decorator += "-left";
 
+        return {
+          decorator: decorator,
+          margin: margin
+        };
+      }
+    },
 
-          return {
-            icon: qx.theme.tangible.Image.URLS["arrow-down"],
-            decorator: decorator,
-            margin: margin
-          };
+    "toolbar-splitbutton/arrow": {
+      alias: "toolbar-button",
+      include: "toolbar-button",
+
+      style(states) {
+        // set the margin
+        var margin = [7, 10, 7, 0];
+        if (states.left || states.middle || states.right) {
+          margin = [7, 3, 7, 0];
+        }
+        var decorator = "toolbar-button";
+        if (
+          states.hovered ||
+          states.pressed ||
+          states.focused ||
+          states.checked
+        ) {
+          decorator += "-hovered";
         }
-      },
+        decorator += "-right";
 
+        return {
+          icon: qx.theme.tangible.Image.URLS["arrow-down"],
+          decorator: decorator,
+          margin: margin
+        };
+      }
+    },
 
     /*
     ---------------------------------------------------------------------------
@@ -2195,220 +2069,196 @@ qx.Theme.define("qx.theme.tangible.Appearance", {
     ---------------------------------------------------------------------------
     */
 
-    "tabview": {},
-
-    "tabview/bar":
-      {
-        alias: "slidebar",
+    tabview: {},
 
-        style: function(states) {
-          var marginTop = 0;
-          var marginRight = 0;
-          var marginBottom = 0;
-          var marginLeft = 0;
+    "tabview/bar": {
+      alias: "slidebar",
 
-          if (states.barTop) {
-            marginBottom -= 1;
-          }
-          else if (states.barBottom) {
-            marginTop -= 1;
-          }
-          else if (states.barRight) {
-            marginLeft -= 1;
-          }
-          else {
-            marginRight -= 1;
-          }
+      style(states) {
+        var marginTop = 0;
+        var marginRight = 0;
+        var marginBottom = 0;
+        var marginLeft = 0;
 
-          return {
-            marginBottom: marginBottom,
-            marginTop: marginTop,
-            marginLeft: marginLeft,
-            marginRight: marginRight
-          };
+        if (states.barTop) {
+          marginBottom -= 1;
+        } else if (states.barBottom) {
+          marginTop -= 1;
+        } else if (states.barRight) {
+          marginLeft -= 1;
+        } else {
+          marginRight -= 1;
         }
-      },
 
+        return {
+          marginBottom: marginBottom,
+          marginTop: marginTop,
+          marginLeft: marginLeft,
+          marginRight: marginRight
+        };
+      }
+    },
 
-    "tabview/bar/button-forward":
-      {
-        include: "slidebar/button-forward",
-        alias: "slidebar/button-forward",
+    "tabview/bar/button-forward": {
+      include: "slidebar/button-forward",
+      alias: "slidebar/button-forward",
 
-        style: function(states) {
-          if (states.barTop) {
-            return {
-              marginTop: 4,
-              marginBottom: 2,
-              decorator: null
-            };
-          }
-          else if (states.barBottom) {
-            return {
-              marginTop: 2,
-              marginBottom: 4,
-              decorator: null
-            };
-          }
-          else if (states.barLeft) {
-            return {
-              marginLeft: 4,
-              marginRight: 2,
-              decorator: null
-            };
-          }
+      style(states) {
+        if (states.barTop) {
+          return {
+            marginTop: 4,
+            marginBottom: 2,
+            decorator: null
+          };
+        } else if (states.barBottom) {
+          return {
+            marginTop: 2,
+            marginBottom: 4,
+            decorator: null
+          };
+        } else if (states.barLeft) {
           return {
-            marginLeft: 2,
-            marginRight: 4,
+            marginLeft: 4,
+            marginRight: 2,
             decorator: null
           };
         }
-      },
+        return {
+          marginLeft: 2,
+          marginRight: 4,
+          decorator: null
+        };
+      }
+    },
 
-    "tabview/bar/button-backward":
-      {
-        include: "slidebar/button-backward",
-        alias: "slidebar/button-backward",
+    "tabview/bar/button-backward": {
+      include: "slidebar/button-backward",
+      alias: "slidebar/button-backward",
 
-        style: function(states) {
-          if (states.barTop) {
-            return {
-              marginTop: 4,
-              marginBottom: 2,
-              decorator: null
-            };
-          }
-          else if (states.barBottom) {
-            return {
-              marginTop: 2,
-              marginBottom: 4,
-              decorator: null
-            };
-          }
-          else if (states.barLeft) {
-            return {
-              marginLeft: 4,
-              marginRight: 2,
-              decorator: null
-            };
-          }
+      style(states) {
+        if (states.barTop) {
+          return {
+            marginTop: 4,
+            marginBottom: 2,
+            decorator: null
+          };
+        } else if (states.barBottom) {
+          return {
+            marginTop: 2,
+            marginBottom: 4,
+            decorator: null
+          };
+        } else if (states.barLeft) {
           return {
-            marginLeft: 2,
-            marginRight: 4,
+            marginLeft: 4,
+            marginRight: 2,
             decorator: null
           };
         }
-      },
+        return {
+          marginLeft: 2,
+          marginRight: 4,
+          decorator: null
+        };
+      }
+    },
 
-    "tabview/pane":
-      {
-        style: function(states) {
-          var marginTop =0;
-          var marginBottom = 0;
-          var marginLeft = 0;
-          var marginRight = 0;
-          var decorator;
+    "tabview/pane": {
+      style(states) {
+        var marginTop = 0;
+        var marginBottom = 0;
+        var marginLeft = 0;
+        var marginRight = 0;
+        var decorator;
 
-          if (states.barTop) {
-            marginTop = -1;
-            decorator = "main-top";
-          }
-          else if (states.barBottom) {
-            marginBottom = -1;
-            decorator = "main-bottom";
-          }
-          else if (states.barLeft) {
-            marginLeft = -1;
-            decorator = "main-left";
-          }
-          else {
-            marginRight = -1;
-            decorator = "main-right";
-          }
-          return {
-            marginLeft: marginLeft,
-            marginRight: marginRight,
-            marginTop: marginTop,
-            marginBottom: marginBottom,
-            padding: 10,
-            decorator: decorator,
-            backgroundColor: "surface"
-          };
+        if (states.barTop) {
+          marginTop = -1;
+          decorator = "main-top";
+        } else if (states.barBottom) {
+          marginBottom = -1;
+          decorator = "main-bottom";
+        } else if (states.barLeft) {
+          marginLeft = -1;
+          decorator = "main-left";
+        } else {
+          marginRight = -1;
+          decorator = "main-right";
         }
-      },
+        return {
+          marginLeft: marginLeft,
+          marginRight: marginRight,
+          marginTop: marginTop,
+          marginBottom: marginBottom,
+          padding: 10,
+          decorator: decorator,
+          backgroundColor: "surface"
+        };
+      }
+    },
 
     "tabview-page": "widget",
 
-    "tabview-page/button":
-      {
-        style: function(states) {
-          var decorator;
-          var padding;
-          // default padding
-          if (states.barTop || states.barBottom) {
-            padding = [8, 16, 8, 13];
-          }
-          else if (states.barRight) {
-            padding = [8, 8, 8, 12];
-          }
-          else if (states.barLeft) {
-            padding = [8, 8, 8, 8];
-          }
+    "tabview-page/button": {
+      style(states) {
+        var decorator;
+        var padding;
+        // default padding
+        if (states.barTop || states.barBottom) {
+          padding = [8, 16, 8, 13];
+        } else if (states.barRight) {
+          padding = [8, 8, 8, 12];
+        } else if (states.barLeft) {
+          padding = [8, 8, 8, 8];
+        }
 
-          // decorator
-          if (states.checked) {
-            if (states.barTop) {
-              decorator = "tabview-page-button-top";
-              padding[2] -= 2;
-            }
-            else if (states.barBottom) {
-              decorator = "tabview-page-button-bottom";
-              padding[0] -= 2;
-            }
-            else if (states.barRight) {
-              decorator = "tabview-page-button-right";
-              padding[3] -= 2;
-            }
-            else if (states.barLeft) {
-              decorator = "tabview-page-button-left";
-              padding[1] -= 2;
-            }
+        // decorator
+        if (states.checked) {
+          if (states.barTop) {
+            decorator = "tabview-page-button-top";
+            padding[2] -= 2;
+          } else if (states.barBottom) {
+            decorator = "tabview-page-button-bottom";
+            padding[0] -= 2;
+          } else if (states.barRight) {
+            decorator = "tabview-page-button-right";
+            padding[3] -= 2;
+          } else if (states.barLeft) {
+            decorator = "tabview-page-button-left";
+            padding[1] -= 2;
           }
-
-          return {
-            zIndex: states.checked ? 10 : 5,
-            decorator: decorator,
-            textColor:
-                states.disabled ? "text-disabled-on-surface" :
-                "text-primary-on-surface",
-            font: states.checked ? "bold": undefined,
-            padding: padding,
-            cursor: "pointer"
-          };
         }
-      },
 
-    "tabview-page/button/label":
-      {
-        alias: "label",
+        return {
+          zIndex: states.checked ? 10 : 5,
+          decorator: decorator,
+          textColor: states.disabled
+            ? "text-disabled-on-surface"
+            : "text-primary-on-surface",
+          font: states.checked ? "bold" : undefined,
+          padding: padding,
+          cursor: "pointer"
+        };
+      }
+    },
 
-        style: function(states) {
-          return {padding: [0, 1, 0, 1]};
-        }
-      },
+    "tabview-page/button/label": {
+      alias: "label",
 
-    "tabview-page/button/icon": "image",
-    "tabview-page/button/close-button":
-      {
-        alias: "atom",
-        style: function(states) {
-          return {
-            cursor: states.disabled ? undefined : "pointer",
-            icon: qx.theme.tangible.Image.URLS["tabview-close"]
-          };
-        }
-      },
+      style(states) {
+        return { padding: [0, 1, 0, 1] };
+      }
+    },
 
+    "tabview-page/button/icon": "image",
+    "tabview-page/button/close-button": {
+      alias: "atom",
+      style(states) {
+        return {
+          cursor: states.disabled ? undefined : "pointer",
+          icon: qx.theme.tangible.Image.URLS["tabview-close"]
+        };
+      }
+    },
 
     /*
     ---------------------------------------------------------------------------
@@ -2416,81 +2266,73 @@ qx.Theme.define("qx.theme.tangible.Appearance", {
     ---------------------------------------------------------------------------
     */
 
+    colorpopup: {
+      alias: "popup",
+      include: "popup",
 
-    "colorpopup":
-      {
-        alias: "popup",
-        include: "popup",
-
-        style: function(states) {
-          return {padding: 5};
-        }
-      },
+      style(states) {
+        return { padding: 5 };
+      }
+    },
 
-    "colorpopup/field":
-      {
-        style: function(states) {
-          return {
-            margin: 2,
-            width: 14,
-            height: 14,
-            backgroundColor: "surface",
-            decorator: "main"
-          };
-        }
-      },
+    "colorpopup/field": {
+      style(states) {
+        return {
+          margin: 2,
+          width: 14,
+          height: 14,
+          backgroundColor: "surface",
+          decorator: "main"
+        };
+      }
+    },
 
     "colorpopup/selector-button": "button",
     "colorpopup/auto-button": "button",
 
     "colorpopup/preview-pane": "groupbox",
 
-    "colorpopup/current-preview":
-      {
-        style: function(state) {
-          return {
-            height: 20,
-            padding: 4,
-            marginLeft: 4,
-            decorator: "main",
-            allowGrowX: true
-          };
-        }
-      },
-
-    "colorpopup/selected-preview":
-      {
-        style: function(state) {
-          return {
-            height: 20,
-            padding: 4,
-            marginRight: 4,
-            decorator: "main",
-            allowGrowX: true
-          };
-        }
-      },
+    "colorpopup/current-preview": {
+      style(state) {
+        return {
+          height: 20,
+          padding: 4,
+          marginLeft: 4,
+          decorator: "main",
+          allowGrowX: true
+        };
+      }
+    },
 
-    "colorpopup/colorselector-okbutton":
-      {
-        alias: "button",
-        include: "button",
+    "colorpopup/selected-preview": {
+      style(state) {
+        return {
+          height: 20,
+          padding: 4,
+          marginRight: 4,
+          decorator: "main",
+          allowGrowX: true
+        };
+      }
+    },
 
-        style: function(states) {
-          return {icon: "icon/16/actions/dialog-ok.png"};
-        }
-      },
+    "colorpopup/colorselector-okbutton": {
+      alias: "button",
+      include: "button",
 
-    "colorpopup/colorselector-cancelbutton":
-      {
-        alias: "button",
-        include: "button",
+      style(states) {
+        return { icon: "icon/16/actions/dialog-ok.png" };
+      }
+    },
 
-        style: function(states) {
-          return {icon: "icon/16/actions/dialog-cancel.png"};
-        }
-      },
+    "colorpopup/colorselector-cancelbutton": {
+      alias: "button",
+      include: "button",
 
+      style(states) {
+        return { icon: "icon/16/actions/dialog-cancel.png" };
+      }
+    },
 
     /*
     ---------------------------------------------------------------------------
@@ -2498,37 +2340,36 @@ qx.Theme.define("qx.theme.tangible.Appearance", {
     ---------------------------------------------------------------------------
     */
 
-    "colorselector": "widget",
+    colorselector: "widget",
     "colorselector/control-bar": "widget",
     "colorselector/visual-pane": "groupbox",
     "colorselector/control-pane": "widget",
     "colorselector/preset-grid": "widget",
 
-    "colorselector/colorbucket":
-      {
-        style: function(states) {
-          return {
-            decorator: "main",
-            width: 16,
-            height: 16
-          };
-        }
-      },
+    "colorselector/colorbucket": {
+      style(states) {
+        return {
+          decorator: "main",
+          width: 16,
+          height: 16
+        };
+      }
+    },
 
     "colorselector/preset-field-set": "groupbox",
     "colorselector/input-field-set": {
       include: "groupbox",
       alias: "groupbox",
-      style: function() {
-        return {paddingTop: 12};
+      style() {
+        return { paddingTop: 12 };
       }
     },
 
     "colorselector/preview-field-set": {
       include: "groupbox",
       alias: "groupbox",
-      style: function() {
-        return {paddingTop: 12};
+      style() {
+        return { paddingTop: 12 };
       }
     },
 
@@ -2545,85 +2386,76 @@ qx.Theme.define("qx.theme.tangible.Appearance", {
     "colorselector/hsb-spinner-saturation": "spinner",
     "colorselector/hsb-spinner-brightness": "spinner",
 
-    "colorselector/preview-content-old":
-      {
-        style: function(states) {
-          return {
-            decorator: "main",
-            width: 50,
-            height: 25
-          };
-        }
-      },
+    "colorselector/preview-content-old": {
+      style(states) {
+        return {
+          decorator: "main",
+          width: 50,
+          height: 25
+        };
+      }
+    },
 
-    "colorselector/preview-content-new":
-      {
-        style: function(states) {
-          return {
-            decorator: "main",
-            backgroundColor: "surface",
-            width: 50,
-            height: 25
-          };
-        }
-      },
+    "colorselector/preview-content-new": {
+      style(states) {
+        return {
+          decorator: "main",
+          backgroundColor: "surface",
+          width: 50,
+          height: 25
+        };
+      }
+    },
 
-    "colorselector/hue-saturation-field":
-      {
-        style: function(states) {
-          return {
-            decorator: "main",
-            margin: 5
-          };
-        }
-      },
+    "colorselector/hue-saturation-field": {
+      style(states) {
+        return {
+          decorator: "main",
+          margin: 5
+        };
+      }
+    },
 
-    "colorselector/brightness-field":
-      {
-        style: function(states) {
-          return {
-            decorator: "main",
-            margin: [5, 7]
-          };
-        }
-      },
+    "colorselector/brightness-field": {
+      style(states) {
+        return {
+          decorator: "main",
+          margin: [5, 7]
+        };
+      }
+    },
 
     "colorselector/hue-saturation-pane": "widget",
     "colorselector/hue-saturation-handle": "widget",
     "colorselector/brightness-pane": "widget",
     "colorselector/brightness-handle": "widget",
 
-
-
     /*
     ---------------------------------------------------------------------------
       APPLICATION
     ---------------------------------------------------------------------------
     */
 
-    "app-header":
-      {
-        style: function(states) {
-          return {
-            font: "headline",
-            textColor: "text-on-primary",
-            backgroundColor: "primary",
-            padding: [8, 12]
-          };
-        }
-      },
-
-    "app-header-label":
-      {
-        style: function(states) {
-          return {paddingTop: 5};
-        }
-      },
+    "app-header": {
+      style(states) {
+        return {
+          font: "headline",
+          textColor: "text-on-primary",
+          backgroundColor: "primary",
+          padding: [8, 12]
+        };
+      }
+    },
 
+    "app-header-label": {
+      style(states) {
+        return { paddingTop: 5 };
+      }
+    },
 
     "app-splitpane": {
       alias: "splitpane",
-      style: function(states) {
+      style(states) {
         return {
           padding: [0, 10, 10, 10]
         };
@@ -2635,13 +2467,13 @@ qx.Theme.define("qx.theme.tangible.Appearance", {
       VIRTUAL SELECTBOX
       --------------------
     */
-     
-    "list-search-highlight" : {
-      style : function(states) {
+
+    "list-search-highlight": {
+      style(states) {
         return {
-          backgroundColor: 'rgba(255, 251, 0, 0.53)',
-          textDecorationStyle: 'dotted',
-          textDecorationLine: 'underline'
+          backgroundColor: "rgba(255, 251, 0, 0.53)",
+          textDecorationStyle: "dotted",
+          textDecorationLine: "underline"
         };
       }
     }