How to save theme styles for library widget?

Question

I have a main project A which depends on a project B. The project B contains special button and there is B/theme folder in which I describe specific styles. If I use B.Button in B and compile and run B - styles work fine. Hovewer if I use the button B.Button in A I get button without styles at all.

Is there right way to save styles of B.Button in A project?

The theme styles for the button:

qx.Theme.define("B.theme.Appearance",
{
  extend : qx.theme.indigo.Appearance,

  appearances :
  {
    "mybutton": {
      include: "button",
      style: function(states){
        return {
          padding: 100
        };
      }
    }
  }
});

I understand I could separate styles into a special theme project and describe all required stuff there but I think about about B as a fully independent project which I could load from another location (e.g. remote repository) and this project is provided with own styles too among widgets/classes.

Answer 1

The B project works because it has the B.theme compiled into it; if you compile project A, you either need that project to be compiled to use the same theme (eg in compile.json you set applications[].theme to be "B.theme"), or if project A already has a theme that you don't want to loose, you need to include it somehow.

One solution is to create your theming as Mixins - eg in project B, create a

qx.Theme.define("B.theme.MAppearance", {
  appearances : {
    "mybutton": { /* ... snip ... */ }
  }
});

and also:

qx.Theme.define("B.theme.Appearance", {
  extend : qx.theme.indigo.Appearance,
  include: [ B.theme.MAppearance ]
});

Then in project A you can also do:

qx.Theme.define("A.theme.Appearance", {
  extend : qx.theme.indigo.Appearance,
  include: [ B.theme.MAppearance ]
});

You can use the mixin approach with all aspects of a theme, eg Decorators, Colors, etc - so you might like to create a set of mixin for your buttons, and then a separate set of mixins for some other, unrelated set of widgets

Answer 2

No special projects or mixins required. In your project B just divide out your control's specific styles into it's own file/class (do not extend any other Theme):

qx.Theme.define("B.theme.mycontrol.Appearance", {
  appearances : {
    "mybutton": { /* ... snip ... */ }
  }
});

Then in the same, or in any other project, add one line to the app's main function to include the unique styles into the current project's theme:

qx.Theme.include(qx.theme.manager.Appearance.getInstance().getTheme(), B.theme.mycontrol.Appearance);

This can be done for any theme class (Decoration, Color, Font, etc.)