Allow a `--theme` option to build project with a different theme

[potch]

This should pull a different set of theme files from the theme directory of each component, and build a custom HTML Import for the project.

[potch]

We should also allow theme = none!

[sole]

I wonder if it's possible to just somehow add some CSS that "overrides" some of the rules, but I have the feeling that it's going to be close to impossible due to the way html imports / scoped stuff works.

Picture this situation: I'm a normal average developer who just checked Brick and is mostly happy with how the thing looks like, but would want to change a few things here and there (simple example: the templates).

Maybe I didn't understand it correctly, but in the current scenario I would need to check out the entire bunch of individual element repositories and add a new theme folder to each one, write the .styl file and rebuild using such theme. It seems like a big hassle.

[fwenzel]

Can't you do that anyway, import Brick and then go wild on your own app's styles in a separate CSS file?

[sole]

No, because the styles are scoped and won't be overwritten. It looks like it works right now using the platform.js polyfill in Firefox OS/Firefox, but if you try the template in Chrome which does support actual Shadow DOM, the styles are not overwritten. Nothing changes.

[fwenzel]

Good point! So do we need theme inheritance? Urgh

[dotch]

the ::shadow pseudo element and the /deep/ combinator allow you to style the shadow elements from the outside. however, we need to test if this works consistently with and without polyfill...

[sole]

I wrote a test to determine what is the support for the :root pseudo element/selectors with platform.js and various runtimes: http://sole.github.io/test_cases/web_components/shadow_dom_and_selectors/

The answer, in short, is:

• really good in Chrome, both Stable and Canary. Visually look the same intended result.
• not really cool at all in any Firefox version that I tried (including various Firefox OS simulators)
  • The shadow boundary is not respected, and styles from the outside bleed into "shadow root" elements that match the query (even though it shouldn't) -- see here: https://github.com/sole/test_cases/blob/81b2f0b49edacee0a38338432908980737345c1e/web_components/shadow_dom_and_selectors/index.html#L20-L23 the pinkish/reddish background shouldn't be applied to any underline element if the shadow boundary is respected. This is what allowed me to "style" the elements to look like I wanted them to look like, but then I noticed they wouldn't look like that in Chrome. Oh, noo!
  • Likewise, the ::shadow pseudo doesn't work - so how do we juggle these two incompatible issues so we can override theming in both big platforms at once?